/* ============================================================
     ROOF PLAN SKETCHER — single-file tool
     Plan-view roof drawing: facets, pitch, square footage,
     and color-coded roof lines (ridge/hip/eave/valley/etc).
     Shares the Flashing Sketcher visual skin.
     ============================================================ */

  *, *::before, *::after { box-sizing: border-box; }

  :root {
    --bg: #f4f1ea;
    --paper: #fdfcf7;
    --ink: #1a1a1a;
    --ink-soft: #4a4a4a;
    --ink-faint: #8a857c;
    --line: #c9c3b4;
    --line-soft: #e2dccd;
    --accent: #1e4d6b;
    --accent-soft: #dde7ee;
    --warn: #b85c2e;
    --grid: #ebe6d8;
    --shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(20,15,5,0.06);

    /* Roof line type colors */
    --t-ridge: #c0392b;
    --t-hip: #e67e22;
    --t-eave: #2e86de;
    --t-valley: #8e44ad;
    --t-clerestory: #16a085;
    --t-transition: #d4a017;
    --t-backpan: #546e7a;
    --t-headwall: #d81b60;
    --t-sidewall: #5d4037;
    --t-rake: #2e7d32;
    --t-stepup: #00acc1;
    --t-stepdown: #00838f;
  }

  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  button, input, select, textarea { font: inherit; color: inherit; }

  /* ---------- Header ---------- */
  header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 14px 7px;
    display: flex;
    flex-direction: column;   /* two tidy rows: brand+job info, then the tool buttons */
    gap: 7px;
  }
  .hdr-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .brand {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .brand .accent { color: var(--accent); }
  .brand .tag {
    margin-left: 10px;
    padding: 2px 8px;
    background: var(--accent);
    color: white;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.1em;
    vertical-align: middle;
  }
  .header-fields { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; align-items: center; }
  .field { display: flex; align-items: center; gap: 7px; }   /* label sits LEFT of its input — one short row */
  .field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    font-weight: 600;
    white-space: nowrap;
  }
  .field input[type="text"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 3px 2px;
    font-size: 13px;
    min-width: 0;
    outline: none;
    transition: border-color 0.15s;
  }
  .field input[type="text"]:focus { border-bottom-color: var(--accent); }
  .header-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
  .header-actions .btn { padding: 5px 10px; font-size: 12px; }
  .header-actions .sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 4px; }

  /* ---------- Toolbar (facet tabs · total · line types) ---------- */
  .plan-toolbar {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .tb-group { display: flex; align-items: center; gap: 8px; }
  .tb-group.right { margin-left: auto; }
  .tb-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    font-weight: 700;
  }
  .facet-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .facet-tab {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-soft);
    transition: all 0.12s;
  }
  .facet-tab:hover { border-color: var(--accent); color: var(--accent); }
  .facet-tab.active { background: var(--accent); color: white; border-color: var(--accent); }
  .tb-newfacet {
    height: 30px;
    padding: 0 12px;
    border: 1px dashed var(--line);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-faint);
    transition: all 0.12s;
  }
  .tb-newfacet:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
  .tb-newfacet.armed { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); border-style: solid; }

  .total-pill {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--ink);
    color: white;
    border-radius: 5px;
    padding: 6px 14px;
  }
  .total-pill .lbl {
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint);
  }
  .total-pill .val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 17px; }

  .type-selector { display: flex; gap: 4px; flex-wrap: wrap; }
  .type-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: all 0.12s;
  }
  .type-chip .swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }
  .type-chip:hover { border-color: var(--ink-soft); }
  .type-chip.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--ink); }

  /* ---------- Layout ---------- */
  main { display: grid; grid-template-columns: 1fr; height: calc(100% - 116px); }
  @media (min-width: 960px) { main { grid-template-columns: 340px 1fr; } }

  aside {
    background: var(--paper);
    border-right: 1px solid var(--line);
    padding: 18px 18px 80px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .canvas-wrap {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--paper);
  }
  .canvas-wrap.no-grid { background: var(--paper); }
  #canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
  .canvas-wrap.panning #canvas { cursor: grabbing; }

  .zoom-controls {
    position: absolute; top: 14px; right: 14px;
    display: flex; gap: 4px; align-items: center;
    background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
    padding: 4px 4px 4px 10px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px;
    box-shadow: var(--shadow); z-index: 10; user-select: none;
  }
  #zoom-badge { color: var(--ink-soft); font-weight: 600; min-width: 38px; text-align: right; }
  .zoom-controls button {
    background: transparent; border: 1px solid var(--line); border-radius: 3px;
    padding: 2px 8px; cursor: pointer; color: var(--ink-soft);
    font-family: inherit; font-size: 11px; font-weight: 600; transition: all 0.12s;
  }
  .zoom-controls button:hover { border-color: var(--accent); color: var(--accent); }

  .mode-hint {
    position: absolute; bottom: 12px; left: 14px;
    font-size: 11px; color: var(--ink-soft);
    background: var(--paper); border: 1px solid var(--line-soft); border-radius: 3px;
    padding: 5px 10px; max-width: 60%; box-shadow: var(--shadow); z-index: 9;
  }
  .mode-hint b { color: var(--accent); }

  /* tape-measure floating window */
  #tape-window {
    position: absolute; display: none; z-index: 12;
    background: var(--paper); border: 1px solid var(--accent); border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 4px 16px rgba(20,15,5,0.18);
    transform: translate(14px, 14px); min-width: 190px;
  }
  #tape-window.show { display: block; }
  #tape-window .tw-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
  #tape-window .tw-row { display: flex; align-items: center; gap: 4px; }
  #tape-window .tw-row input {
    width: 46px; border: 1px solid var(--line); border-radius: 3px; padding: 6px 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 14px; text-align: right; background: white;
  }
  #tape-window .tw-row input:focus { outline: none; border-color: var(--accent); }
  #tape-window .tw-row span { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); }
  #tape-window .tw-row .btn { padding: 6px 12px; margin-left: 2px; }
  #tape-window .tw-hint { font-size: 10px; color: var(--ink-faint); font-style: italic; margin-top: 6px; }
  #tape-btn.armed, #bg-scale-btn.armed { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-soft); }
  #dormer-btn.armed { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-soft); }
  .dorm-type.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 700; }

  /* dormer dimension entry (click a blue dim number) — same look as the tape window */
  #dorm-window {
    position: absolute; display: none; z-index: 12;
    background: var(--paper); border: 1px solid #1565c0; border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 4px 16px rgba(20,15,5,0.18);
    transform: translate(14px, 14px); min-width: 200px;
  }
  #dorm-window.show { display: block; }
  #dorm-window .tw-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: #1565c0; font-weight: 700; margin-bottom: 6px; }
  #dorm-window .tw-row { display: flex; align-items: center; gap: 4px; }
  #dorm-window .tw-row input {
    width: 46px; border: 1px solid var(--line); border-radius: 3px; padding: 6px 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 14px; text-align: right; background: white;
  }
  #dorm-window .tw-row input:focus { outline: none; border-color: #1565c0; }
  #dorm-window .tw-row span { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); }
  #dorm-window .tw-row .btn { padding: 6px 12px; margin-left: 2px; }
  #dorm-window .tw-hint { font-size: 10px; color: var(--ink-faint); font-style: italic; margin-top: 6px; }

  /* exact-placement window for Edit Shape dots (same look as the tape window) */
  #dot-window {
    position: absolute; display: none; z-index: 12;
    background: var(--paper); border: 1px solid var(--accent); border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 4px 16px rgba(20,15,5,0.18);
    transform: translate(14px, 14px); min-width: 210px;
  }
  #dot-window.show { display: block; }
  #dot-window .tw-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; margin-bottom: 6px; }
  #dot-window .tw-row { display: flex; align-items: center; gap: 4px; }
  #dot-window .tw-row input {
    width: 46px; border: 1px solid var(--line); border-radius: 3px; padding: 6px 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 14px; text-align: right; background: white;
  }
  #dot-window .tw-row input:focus { outline: none; border-color: var(--accent); }
  #dot-window .tw-row span { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); }
  #dot-window .tw-row .btn { padding: 6px 12px; margin-left: 2px; }
  #dot-window .tw-hint { font-size: 10px; color: var(--ink-faint); font-style: italic; margin-top: 6px; }

  /* background trace image controls */
  #bg-controls {
    position: absolute; bottom: 12px; right: 14px; display: none;
    background: var(--paper); border: 1px solid var(--line); border-radius: 5px;
    padding: 8px 10px; box-shadow: var(--shadow); z-index: 11; font-size: 12px;
  }
  #bg-controls.show { display: block; }

  #debug-box {
    position: absolute; top: 14px; left: 14px; display: none; z-index: 13;
    max-width: 360px; background: #fff7f2; border: 1px solid var(--warn); border-radius: 5px;
    padding: 10px 12px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.5; color: var(--ink);
  }
  #debug-box.show { display: block; }
  #debug-box .db-x { float: right; margin: -4px -4px 0 8px; border: none; background: transparent; cursor: pointer; color: var(--ink-faint); font-size: 14px; }
  #debug-box .dh { font-size: 10.5px; color: var(--ink-faint); }

  /* SketchUp-style typed length box */
  #vcb-box {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: none; z-index: 11;
    background: var(--ink); color: #fff; border-radius: 6px; padding: 7px 14px; box-shadow: var(--shadow);
    font-family: 'IBM Plex Mono', monospace; text-align: center; user-select: none;
  }
  #vcb-box.show { display: block; }
  #vcb-box .vcb-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
  #vcb-box .vcb-val { font-size: 17px; font-weight: 600; }
  #vcb-box .vcb-eq { font-size: 13px; color: #9fb8c8; }
  #vcb-box .vcb-hint { font-family: 'IBM Plex Sans', sans-serif; font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
  #bg-controls .bgc-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; display: block; margin-bottom: 6px; }
  #bg-controls .bgc-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
  #bg-controls .bgc-row .btn { padding: 4px 9px; font-size: 12px; }
  #bg-controls #bg-lock.locked { background: var(--accent); color: #fff; border-color: var(--accent); }
  .canvas-wrap.bg-move #canvas { cursor: move; }

  /* edit-roof-lines controls */
  #edit-controls {
    position: absolute; top: 14px; left: 14px; display: none; z-index: 13;
    background: var(--paper); border: 1px solid var(--accent); border-radius: 5px;
    padding: 9px 11px; box-shadow: var(--shadow); font-size: 12px; max-width: 340px;
  }
  #edit-controls.show { display: block; }
  #edit-controls .bgc-title { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); font-weight: 700; display: block; margin-bottom: 6px; }
  #edit-controls .bgc-row { display: flex; align-items: center; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
  #edit-controls .bgc-row .btn { padding: 4px 9px; font-size: 12px; }
  #edit-controls .etype.active { color: #fff; border-color: transparent; }
  #edit-controls .e-hint { font-size: 10.5px; color: var(--ink-faint); line-height: 1.45; margin-top: 7px; display: block; }
  .canvas-wrap.editing #canvas { cursor: crosshair; }
  .canvas-wrap.shape-editing #canvas { cursor: crosshair; }
  /* Cursor color picker (Joe 2026-08-14): black / white / bright red,
     each with a contrast halo so it reads on any roof color. */
  #canvas.cur-black, .canvas-wrap.editing #canvas.cur-black, .canvas-wrap.shape-editing #canvas.cur-black { cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, crosshair; }
  #canvas.cur-white, .canvas-wrap.editing #canvas.cur-white, .canvas-wrap.shape-editing #canvas.cur-white { cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20stroke%3D%22%23000000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, crosshair; }
  #canvas.cur-red,   .canvas-wrap.editing #canvas.cur-red,   .canvas-wrap.shape-editing #canvas.cur-red   { cursor: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23ff1111%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%2223%22%2F%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 12 12, crosshair; }
  .cursor-color-menu { position: absolute; z-index: 400; background: #fff; border: 1px solid #d0d7e2;
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 8px; display: none; }
  .cursor-color-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 14px;
    margin: 2px 0; border: 2px solid transparent; border-radius: 8px; background: #f6f8fb; cursor: pointer;
    font: inherit; font-weight: 600; }
  .cursor-color-menu button.active { border-color: #2563EB; background: #DBEAFE; }
  .cursor-color-menu .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #94a3b8; display: inline-block; }
  #shape-edit-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* Top-bar popups (Lukas 2026-08-20 menu cleanup): Dormers / Tape / Help live up top, out of the way */
  .tb-pop-btn { padding: 5px 12px; font-size: 12.5px; }
  .tb-pop-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  .side-pop { position: fixed; z-index: 420; background: #fff; border: 1px solid #d0d7e2; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 12px 14px; display: none; width: 300px;
    max-height: 72vh; overflow-y: auto; }
  .side-pop.open { display: block; }
  .side-pop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
    font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ink-faint); }
  .side-pop-x { border: none; background: none; cursor: pointer; font-size: 13px; color: var(--ink-faint); padding: 2px 6px; }
  .side-pop-x:hover { color: var(--ink); }
  .help-sec { margin-bottom: 10px; font-size: 12px; }
  .help-sec b { display: block; margin-bottom: 2px; }
  .help-sec p { margin: 0; color: var(--ink-faint); line-height: 1.45; }

  /* "measured lengths" (field-measured / already-on-slope) toggle */
  .true-len-toggle { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12px; color: var(--ink-faint); line-height: 1.35; cursor: default; }
  .true-len-toggle label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
  .true-len-toggle input { margin: 0; flex: none; cursor: pointer; }
  .true-len-toggle b { color: var(--ink); }

  /* ---------- Facet overlay cards (pitch + sq ft, in screen space) ---------- */
  #facet-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
  /* a placement tool is armed (dormer, tape, accessory, pop-top, scale...): the label cards step
     aside so the click reaches the roof under them — they were swallowing it as a label drag */
  #facet-overlays.tool-armed .facet-card { pointer-events: none; }
  .facet-card {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(253,252,247,0.94);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 5px 8px;
    box-shadow: var(--shadow);
    text-align: center;
    pointer-events: auto;
    min-width: 0;
    padding: 2px 6px;
  }
  .facet-card { cursor: move; touch-action: none; user-select: none; }
  .facet-card.dormer { border-color: var(--warn); border-style: dashed; background: rgba(251,243,230,0.95); }
  /* FACET NUMBERS, SMALL (Joe 2026-09-23: "we need much smaller facet numbers… should not overlap roofing numbers"):
     a badge with the number only; the card slides to a clear spot when a roofing or edge number sits under it */
  .facet-card .fc-num {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 800; font-size: 10px; line-height: 1;
    color: var(--accent); margin-bottom: 1px;
  }
  .facet-card.dormer .fc-num { color: var(--warn); }
  .facet-card.gap { border-color: #b91c1c; background: #fee2e2; }   /* LOUD GAPS: a tie off by more than 3" */
  .facet-card.gap .fc-num { color: #b91c1c; }
  .facet-card .fc-dormer {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 10px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; user-select: none; margin-bottom: 1px;
  }
  .facet-card .fc-dormer input { cursor: pointer; margin: 0; }
  .facet-card .fc-pitch {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft);
  }
  .facet-card .fc-pitch input {
    width: 30px; text-align: center;
    border: 1px solid var(--line); border-radius: 3px;
    padding: 2px 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
    background: white;
  }
  .facet-card .fc-pitch input:focus { outline: none; border-color: var(--accent); }
  .facet-card .fc-sqft {
    margin-top: 1px;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 9px; color: var(--ink);
  }
  .facet-card .fc-sqft small { color: var(--ink-faint); font-weight: 400; font-size: 8px; display: block; }

  /* ---------- Sidebar sections ---------- */
  .section-title {
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    text-transform: uppercase; letter-spacing: 0.12em;
    font-size: 11px; font-weight: 700; color: var(--ink-faint);
    margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
  }
  .section-title::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

  .len-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .len-field label {
    font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-faint); font-weight: 700;
  }
  .len-field input {
    border: 1px solid var(--line); border-radius: 4px;
    padding: 9px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 16px;
    text-align: right; background: white; width: 100%;
  }
  .len-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

  .add-btn {
    background: white; border: 1px dashed var(--line); border-radius: 4px;
    padding: 10px; cursor: pointer; color: var(--ink-faint); font-weight: 500;
    width: 100%; transition: all 0.12s; font-size: 13px;
  }
  .add-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
  .add-btn.armed { border-color: var(--accent); color: var(--accent); border-style: solid; background: var(--accent-soft); }

  .btn-row { display: flex; gap: 6px; }
  .btn-row .btn { flex: 1; }

  /* facet pitch (sidebar, near edges) */
  .facet-pitch-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--accent-soft); border: 1px solid #c8d8e3; border-radius: 4px;
    padding: 9px 11px; margin-bottom: 10px;
  }
  .facet-pitch-row .fp-left {
    display: flex; align-items: center; gap: 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink-soft); font-weight: 600;
  }
  .facet-pitch-row .fp-left input {
    width: 40px; text-align: center; border: 1px solid var(--line); border-radius: 3px;
    padding: 5px 4px; font-family: 'IBM Plex Mono', monospace; font-size: 15px; background: white;
  }
  .facet-pitch-row .fp-left input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
  .facet-pitch-row .fp-right {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px; color: var(--ink);
  }

  /* edge editor */
  .edge-row {
    background: white; border: 1px solid var(--line-soft); border-radius: 4px;
    padding: 7px 9px; display: grid; grid-template-columns: 20px minmax(0,1fr) minmax(0,1.15fr); gap: 8px;
    align-items: center; margin-bottom: 6px;
  }
  .edge-row .e-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); font-weight: 600; text-align: center; }
  .edge-row .e-field { display: flex; flex-direction: column; gap: 2px; }
  .edge-row .e-field label { font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 700; }
  .edge-row input {
    border: 1px solid var(--line); border-radius: 3px; padding: 4px 5px;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; text-align: right; background: white; width: 100%;
  }
  .edge-row input:focus { outline: none; border-color: var(--accent); }
  .edge-row input:disabled { background: var(--bg); color: var(--ink-faint); }
  .edge-row.row-flash { animation: rowflash 1.6s ease-out; }
  @keyframes rowflash { 0% { background: #ffe9b0; border-radius: 6px; } 100% { background: transparent; } }
  .edge-row:hover { background: var(--accent-soft, #eef4f8); border-radius: 6px; }
  .ang-wrap { display: flex; align-items: center; gap: 4px; }
  .edge-row .ang-input { width: 44px; flex: none; }
  .e-static {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint);
    padding: 4px 2px; font-weight: 600;
  }
  .edge-row .e-slope {
    grid-column: 1 / -1; margin-top: 2px; padding-top: 5px; border-top: 1px solid var(--line-soft);
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500;
  }
  .edge-row .e-slope b { font-weight: 700; }
  .edge-row .e-slope.warn { color: var(--warn); font-family: 'IBM Plex Sans', sans-serif; font-style: italic; }
  .turn-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; flex: none; }
  .turn-toggle button {
    background: white; border: none; padding: 4px 7px; font-size: 13px; line-height: 1;
    cursor: pointer; color: var(--ink-faint); transition: all 0.12s;
  }
  .turn-toggle button.active { background: var(--accent); color: white; }
  .turn-toggle button:hover:not(.active) { background: var(--accent-soft); color: var(--accent); }

  /* ---------- Buttons ---------- */
  .btn {
    background: white; color: var(--ink); border: 1px solid var(--line); border-radius: 4px;
    padding: 7px 14px; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all 0.12s; white-space: nowrap;
  }
  .btn:hover { border-color: var(--accent); color: var(--accent); }
  .btn.primary { background: var(--accent); color: white; border-color: var(--accent); }
  .btn.primary:hover { background: #16384f; border-color: #16384f; color: white; }
  .btn.ghost { border-color: transparent; color: var(--ink-soft); }
  .btn.ghost:hover { background: var(--line-soft); color: var(--ink); border-color: transparent; }
  .btn.danger:hover { border-color: var(--warn); color: var(--warn); }
  .btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
  #labels-btn.off, #grid-btn.off { opacity: 0.55; text-decoration: line-through; }
  #plen-btn.on { background: var(--accent); color: #fff; }

  .hint { font-size: 11px; color: var(--ink-faint); font-style: italic; }
  input[type="file"] { display: none; }

  /* ---------- Summary overlay ---------- */
  .summary-back {
    position: fixed; inset: 0; background: rgba(20,15,5,0.4);
    display: none; align-items: center; justify-content: center; z-index: 50; padding: 24px;
  }
  .summary-back.open { display: flex; }
  .summary-panel {
    background: var(--paper); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 26px 30px;
  }
  .summary-panel h2 {
    font-family: 'IBM Plex Sans Condensed', sans-serif; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 18px; margin: 0 0 4px;
  }
  .summary-panel .sub { color: var(--ink-faint); font-size: 12px; margin-bottom: 20px; }
  .sum-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
  .sum-table th, .sum-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
  .sum-table th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); }
  .sum-table td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; font-weight: 600; }
  .sum-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
  .sum-roof { font-size: 15px; margin: 20px 0 8px; padding-top: 12px; border-top: 2px solid var(--ink); letter-spacing: 0.02em; }
  .sum-roof:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .sum-roof .num { font-family: 'IBM Plex Mono', monospace; font-weight: 600; float: right; }
  .sum-total {
    background: var(--ink); color: white; border-radius: 6px; padding: 14px 18px;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .sum-total .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
  .sum-total .val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 22px; }
  .view3d-panel {
    background: var(--paper); border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    width: 100%; max-width: 900px; padding: 16px 18px;
  }
  .v3d-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
  .v3d-title { font-family: 'IBM Plex Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 17px; font-weight: 700; }
  .v3d-sub { color: var(--ink-faint); font-size: 12px; margin-left: 10px; }
  .v3d-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .v3d-tools .btn { padding: 6px 11px; font-size: 12.5px; }
  .v3d-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink); cursor: pointer; user-select: none; white-space: nowrap; }
  .v3d-check input { margin: 0; cursor: pointer; }
  #view3d-canvas { width: 100%; height: 520px; max-height: 64vh; background: linear-gradient(#eef2f5, #fbfaf6); border: 1px solid var(--line); border-radius: 6px; cursor: grab; display: block; touch-action: none; }
  #view3d-canvas.grabbing { cursor: grabbing; }

  .panel-controls { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
  .panel-controls .len-field input { font-size: 16px; }
  .panel-facet { margin-bottom: 16px; }
  .panel-facet h3 { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 14px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.05em; }
  .panel-facet .pf-warn { color: var(--warn); font-style: italic; font-size: 12px; }
  .panel-sched { display: flex; flex-wrap: wrap; gap: 6px; }
  .panel-sched .chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: var(--accent-soft); border: 1px solid #c8d8e3; border-radius: 3px; padding: 3px 8px; }
  .summary-close { float: right; }

  /* ---------- Finish Roof (accessories) ---------- */
  .acc-add { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 18px; }
  .acc-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; }
  .acc-row span { color: var(--ink-faint); font-size: 12px; }
  .acc-in { width: 60px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 7px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; text-align: right; background: white; }
  .acc-in:focus { outline: none; border-color: var(--accent); }
  .acc-row .btn { margin-left: auto; padding: 6px 12px; }
  #finish-list table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
  #finish-list th { text-align: left; border-bottom: 2px solid var(--ink); padding: 5px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
  #finish-list td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
  #finish-list .acc-del { color: var(--warn); cursor: pointer; font-weight: 700; border: none; background: none; font-size: 15px; }
  .acc-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
  /* Finish Roof is a floating tool WINDOW, not a modal: no backdrop, canvas stays live, draggable */
  #finish-back { background: none; pointer-events: none; }
  #finish-back .summary-panel { pointer-events: auto; position: absolute; right: 26px; top: 62px;
    width: min(560px, 92vw); max-height: 82vh; overflow: auto; margin: 0;
    box-shadow: 0 14px 44px rgba(20, 40, 55, 0.3); border: 1px solid var(--line); }
  #finish-title { cursor: move; user-select: none; }
  /* ---- the pricer window ---- */
  #pricer-back .summary-panel { max-width: none; width: 98vw; max-height: 94vh; padding: 16px 22px 22px; }   /* the whole screen, left to right (Joe 2026-09-20) */
  #pricer-back { padding: 12px; }
  #pricer-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 0; border-bottom: 1px solid var(--line); }
  .arp-tab { padding: 7px 12px; border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--bg); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-faint); cursor: pointer; }
  .arp-tab.on { background: var(--paper); color: var(--accent); font-weight: 800; position: relative; top: 1px; }
  #pricer-body { padding-top: 14px; }
  .arp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
  .arp-proposal { font-family: system-ui, 'Segoe UI', sans-serif; color: #1a1a1a; }
  .arp-proposal .co { font-size: 22px; font-weight: 800; letter-spacing: .04em; }
  .arp-proposal .co small { display: block; font-size: 12px; font-weight: 400; color: #555; letter-spacing: 0; }
  .arp-proposal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
  .arp-proposal td { border-bottom: 1px solid #ddd; padding: 7px 4px; } .arp-proposal td:first-child { color: #555; width: 32%; }
  .arp-proposal .price { font-size: 26px; font-weight: 800; margin: 18px 0; border: 2px solid #222; padding: 12px 16px; display: flex; justify-content: space-between; }
  .arp-proposal .sig { display: flex; gap: 40px; margin-top: 44px; } .arp-proposal .sig div { flex: 1; border-top: 1px solid #222; padding-top: 6px; font-size: 12px; color: #555; }
  #pricer-body h3 { font-family: 'IBM Plex Sans Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin: 14px 0 8px; color: var(--ink); }
  #pricer-body h4 { margin: 12px 0 6px; font-size: 13px; }
  .arp-cols { display: grid; grid-template-columns: minmax(380px, 1fr) 1.5fr; gap: 26px; }
  .arp-cols > div { min-width: 0; }   /* a grid column must not grow with its content (Joe 2026-09-23: "your extra lines over runs the info to the right") */
  /* THE BOX (Joe: "put that in a box"): every line-item and parts table sits in its own bordered box with its own scrollbar,
     so a wide table never runs over or under the column beside it */
  .arp-tablebox { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px 8px; margin: 2px 0 8px; overflow-x: auto; background: rgba(255,255,255,0.55); scrollbar-width: thin; }
  .arp-tablebox > table { margin: 0; }
  @media (max-width: 900px) { .arp-cols { grid-template-columns: 1fr; } }
  .arp-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; align-items: center; margin-bottom: 8px; }
  .arp-grid label { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
  .arp-in { border: 1px solid #d0d7e2; border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; background: #fff; }
  .arp-in.num { width: 84px; text-align: right; font-family: 'IBM Plex Mono', monospace; }
  .arp-lines th { font-size: 10px; }
  .arp-lines td { padding: 4px 6px; }
  .arp-total { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 14px; background: var(--bg); }
  .arp-total > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
  .arp-total > div.grand { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 16px; }
  .arp-parts tr.arp-part td { background: var(--accent-soft); font-weight: 600; }
  .arp-parts tr.arp-use td:first-child { padding-left: 18px; font-weight: 400; white-space: nowrap; }
  .arp-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
  .facet-dormer-row { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 2px 0 6px; cursor: pointer; }
  .arp-total b { font-family: 'IBM Plex Mono', monospace; }
  .arp-ticket table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 12.5px; }
  .arp-ticket th, .arp-ticket td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
  .arp-ticket .num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
  .arp-ticket .hdr { display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; color: var(--ink-faint); border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 10px; }
  .arp-ticket .ptotal { margin-top: 12px; font-size: 16px; border-top: 2px solid var(--ink); padding-top: 8px; font-weight: 700; }
  /* ---------- Panel runout list editor (floating window, same pattern as Finish Roof) ---------- */
  #plist-back { background: none; pointer-events: none; }
  #plist-back .summary-panel { pointer-events: auto; position: absolute; right: 26px; top: 62px;
    width: min(470px, 92vw); max-height: 82vh; overflow: auto; margin: 0;
    box-shadow: 0 14px 44px rgba(20, 40, 55, 0.3); border: 1px solid var(--line); }
  #plist-title { cursor: move; user-select: none; }
  #plist-rows table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
  #plist-rows th { text-align: left; border-bottom: 2px solid var(--ink); padding: 5px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
  #plist-rows td { border-bottom: 1px solid var(--line); padding: 6px 8px; }
  #plist-rows td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; }
  #plist-rows tr.pl-total td { border-top: 2px solid var(--ink); font-weight: 700; }
  #plist-combine { display: none; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px;
    background: var(--accent-soft); border: 1px solid #c8d8e3; border-radius: 6px; padding: 8px 10px; margin-top: 8px; }
  #plist-combine.on { display: flex; }
  #plist-adds, #plist-extras { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: 4px 0 8px; font-size: 13px; line-height: 1.6; }

  /* panel color swatches in the 3D header */
  .v3d-colors { display: inline-flex; gap: 5px; align-items: center; margin: 0 4px; }
  .v3d-sw { width: 19px; height: 19px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9ab0bc; cursor: pointer; padding: 0; }
  .v3d-sw.on { box-shadow: 0 0 0 2.5px var(--accent); }

  /* ---------- Print ---------- */
  .print-only { display: none; }
  @media print {
    @page { size: letter; margin: 0.2in; }   /* orientation is Joe's pick in the dialog; 0.2in clears the printer's no-print strip (step176) */
    html, body { background: white !important; display: block !important; overflow: visible !important; height: auto !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    header, aside, .roofs-bar, .plan-toolbar, .header-actions, .zoom-controls, .mode-hint, .summary-back,
    .print-header, .print-summary,
    #canvas, #facet-overlays, #tape-window, #dot-window, #dorm-window, #debug-box, #vcb-box, #bg-controls, #edit-controls { display: none !important; }
    main { display: block; height: auto; }
    .print-only { display: block; }
    .print-header {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
      padding: 0 0 10px; border-bottom: 2px solid var(--ink); margin-bottom: 10px;
    }
    .print-header .field-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); margin-bottom: 2px; font-weight: 600; }
    .print-header .field-value { font-size: 13px; font-weight: 600; }
    .canvas-wrap { background: white !important; height: auto !important; border: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
    body { margin: 0 !important; padding: 0 !important; }
    #print-svg-host { display: block; width: 100%; height: 99vh; background: #fff; margin: 0; padding: 0; page-break-after: avoid; }   /* fills the printable area in either orientation */
    #print-svg-host svg { width: 100%; height: 100%; display: block; }
    .print-summary { margin-top: 12px; }
    .print-summary table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .print-summary th, .print-summary td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; }
    .print-summary th { background: var(--bg); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
    .print-summary td.num { font-family: 'IBM Plex Mono', monospace; text-align: right; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 959px) {
    html, body { height: 100%; }
    body { display: flex; flex-direction: column; overflow: hidden; }
    header { flex: none; padding: 9px 12px; gap: 8px; }
    .header-fields { display: none; }
    .plan-toolbar { flex: none; padding: 7px 12px; gap: 10px; }
    .tb-group.right { width: 100%; margin-left: 0; }
    main { flex: 1 1 auto; display: flex; flex-direction: column; height: auto; min-height: 0; }
    .canvas-wrap { order: -1; flex: 0 0 46vh; min-height: 0; touch-action: none; border-bottom: 1px solid var(--line); }
    aside { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-right: none; padding: 14px 14px 24px; gap: 16px; }
  }

.roofs-bar{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--paper,#fbfaf6);border-bottom:1px solid var(--line,#e2e2dc);flex-wrap:wrap}
.roofs-bar .tb-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint,#888);font-weight:700}
.roof-tabs{display:flex;gap:5px;flex-wrap:wrap}
.roof-tab{padding:4px 12px;border:1px solid var(--line,#ccc);border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#555}
.roof-tab.active{background:var(--accent,#1e4d6b);color:#fff;border-color:var(--accent,#1e4d6b)}
.roof-elev{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#555;margin-left:6px}
.roof-elev input{border:1px solid var(--line,#ccc);border-radius:5px;font-size:12px}
.roof-seeall{padding:4px 12px;border:1px solid var(--line,#ccc);border-radius:6px;background:#fff;cursor:pointer;font-size:12px;font-weight:600;color:#555}
.roof-seeall.active{background:var(--accent,#1e4d6b);color:#fff;border-color:var(--accent,#1e4d6b)}
.roof-del{border:1px solid var(--line,#ccc);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;padding:3px 8px;line-height:1}
.proj-total{margin-left:auto;font-size:12px;color:#666}.proj-total b{font-size:15px;color:#111;margin-left:6px}