/* Navy system (2026-09-24, Phase 1): every legacy variable resolves to a design
     token (design-tokens.css loads first). Status families: blue = on site,
     amber + purple = en route / for review, gray = neutral, red = late. */
  :root{
    --navy:var(--ds-chrome); --green:var(--ds-st-done-ink); --green2:var(--ds-st-done); --ink:var(--ds-ink); --muted:var(--ds-ink-3); --faint:var(--ds-ink-3);
    --line:var(--ds-line); --line2:var(--ds-hair); --ctl:var(--ds-field); --paper:var(--ds-surface); --canvas:var(--ds-canvas);
    --blue-bg:var(--ds-st-site-bg); --blue-tx:var(--ds-st-site-ink); --blue-bd:var(--ds-st-site-bd);
    --purple-bg:var(--ds-st-route-bg); --purple-tx:var(--ds-st-route-ink); --purple-bd:var(--ds-st-route-bd);
    --amber-bg:var(--ds-st-route-bg); --amber-tx:var(--ds-st-route-ink); --amber-bd:var(--ds-st-route-bd);
    --gray-bg:var(--ds-tint); --gray-tx:var(--ds-ink-2);
    --red:var(--ds-st-late);
    --f:var(--ds-font);
}

/* PCSP generator — one selected-equipment plan per run. */
.pcsp-open{border:1px solid var(--ds-st-site-bd);background:var(--ds-surface);color:var(--ds-st-site-ink);border-radius:var(--ds-r-md);padding:8px 12px;font-weight:var(--ds-w-semi);cursor:pointer;white-space:nowrap}
.pcsp-open:hover{background:var(--ds-paper-hover)}.pcsp-open:disabled{opacity:.48;cursor:not-allowed}
.pcsp-shade{position:fixed;inset:0;z-index:9500;background:color-mix(in srgb, var(--ds-chrome) 62%, transparent);display:flex;align-items:center;justify-content:center;padding:20px}
.pcsp-modal{width:min(1180px,100%);height:min(860px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;background:var(--ds-surface);border:1px solid var(--ds-rule);border-radius:var(--ds-r-lg);box-shadow:var(--ds-e-pop);color:var(--ds-ink)}
.pcsp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:16px 20px;border-bottom:1px solid var(--ds-line)}.pcsp-head h2{margin:0;font-size:var(--ds-text-md)}.pcsp-head p{margin:5px 0 0;color:var(--ds-ink-3);font-size:var(--ds-text-sm)}.pcsp-x{border:0;background:transparent;color:var(--ds-ink-3);font-size:28px;line-height:1;cursor:pointer}
.pcsp-work{display:grid;grid-template-columns:minmax(310px,390px) 1fr;min-height:0;flex:1}.pcsp-side{overflow:auto;padding:17px;border-right:1px solid var(--ds-line)}.pcsp-main{min-width:0;min-height:0;background:var(--ds-tint);padding:16px}
.pcsp-select-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.pcsp-select-head span{color:var(--ds-ink-3);font-size:var(--ds-text-caps)}.pcsp-select-tools{display:flex;gap:7px;margin:8px 0}.pcsp-select-tools button{border:0;background:transparent;color:var(--ds-st-site-ink);padding:2px 0;margin-right:9px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);cursor:pointer}
.pcsp-equipment-list{display:grid;gap:7px}.pcsp-equipment{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:9px;border:1px solid var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface);cursor:pointer}.pcsp-equipment:hover{border-color:var(--ds-st-site-bd)}.pcsp-equipment strong,.pcsp-equipment small{display:block}.pcsp-equipment strong{font-size:var(--ds-text-sm);line-height:1.3}.pcsp-equipment small{margin-top:3px;color:var(--ds-ink-3);font-size:var(--ds-text-caps)}.pcsp-equipment.unavailable{background:var(--ds-canvas);opacity:.72;cursor:not-allowed}.pcsp-equipment .pcsp-unavailable{color:var(--ds-st-late-ink)}
.pcsp-help,.pcsp-empty,.pcsp-loading{padding:28px;color:var(--ds-ink-3);text-align:center}.pcsp-edit{display:grid;gap:11px;margin-top:18px;padding-top:16px;border-top:1px solid var(--ds-line)}.pcsp-edit>label{display:grid;gap:5px;color:var(--ds-ink-2);font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);text-transform:uppercase;letter-spacing:.04em}.pcsp-edit input[type=text],.pcsp-edit textarea{width:100%;border:1px solid var(--ds-rule);border-radius:var(--ds-r-md);padding:8px;color:var(--ds-ink);background:var(--ds-surface);font:12px/1.35 inherit;text-transform:none;letter-spacing:0;resize:vertical}.pcsp-procedures{border:1px solid var(--ds-line);border-radius:var(--ds-r-md);padding:8px}.pcsp-procedures summary{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);cursor:pointer}.pcsp-procedure{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:center;margin-top:7px}.pcsp-procedure.custom{grid-template-columns:18px minmax(0,1fr) 28px}.pcsp-procedure input[type=text]{padding:6px}.pcsp-add-row{margin:8px 0 0 24px;border:0;background:transparent;color:var(--ds-st-site-ink);padding:3px 0;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);cursor:pointer}.pcsp-add-row:disabled{color:var(--ds-icon);cursor:not-allowed}.pcsp-remove-row{width:28px;height:28px;border:1px solid var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface);color:var(--ds-st-late-ink);font-size:var(--ds-text-md);line-height:1;cursor:pointer}.pcsp-remove-row:disabled{opacity:.48;cursor:not-allowed}
.pcsp-preview-wrap{height:100%;position:relative}.pcsp-preview{width:100%;height:100%;border:1px solid var(--ds-rule);border-radius:var(--ds-r-md);background:var(--ds-surface);box-shadow:none}.pcsp-preview-empty{height:100%;display:grid;place-items:center;color:var(--ds-ink-3);border:1px dashed var(--ds-rule);border-radius:var(--ds-r-md)}.pcsp-stale{position:absolute;z-index:2;top:10px;left:50%;transform:translateX(-50%);background:var(--ds-st-route);color:var(--ds-chrome-fg);border-radius:var(--ds-r-full);padding:6px 12px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);box-shadow:none}
.pcsp-error{padding:9px 20px;background:var(--ds-st-late-bg);border-top:1px solid var(--ds-st-late-bd);color:var(--ds-st-late-ink);font-size:var(--ds-text-sm)}.pcsp-actions{display:grid;grid-template-columns:auto 1fr auto auto;gap:9px;align-items:center;padding:13px 18px;border-top:1px solid var(--ds-line)}.pcsp-btn{border:1px solid var(--ds-rule);background:var(--ds-surface);color:var(--ds-ink);border-radius:var(--ds-r-md);padding:9px 13px;font-weight:var(--ds-w-semi);cursor:pointer}.pcsp-btn.primary{border-color:var(--ds-st-site-bd);background:var(--ds-st-site);color:var(--ds-chrome-fg)}.pcsp-btn:disabled{opacity:.48;cursor:not-allowed}
@media(max-width:760px){.pcsp-shade{padding:0}.pcsp-modal{height:100vh;border-radius:0}.pcsp-work{grid-template-columns:1fr}.pcsp-side{max-height:48vh;border-right:0;border-bottom:1px solid var(--ds-line)}.pcsp-main{min-height:42vh}.pcsp-actions{grid-template-columns:auto 1fr auto}.pcsp-actions .primary{grid-column:1/-1}.pcsp-head p{display:none}}
  *{box-sizing:border-box}
  html,body{margin:0}
  body{font-family:var(--f);color:var(--ink);background:var(--ds-canvas);-webkit-font-smoothing:antialiased;font-size:14px;font-feature-settings:var(--ds-features)}
  .muted{color:var(--muted)} button{font-family:inherit}
  /* D17: the single focus ring, a separate 2px --ds-focus outline 2px outside every control */
  button:focus-visible,a:focus-visible,[role="switch"]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[role="tab"]:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
  input[type="checkbox"]{accent-color:var(--ds-action);width:15px;height:15px}
  .lbody,.scroll,.drail,.ctwrap{scrollbar-width:thin;scrollbar-color:#c3cad6 transparent}
  .lbody::-webkit-scrollbar,.scroll::-webkit-scrollbar,.drail::-webkit-scrollbar,.ctwrap::-webkit-scrollbar{width:8px;height:8px}
  .lbody::-webkit-scrollbar-thumb,.scroll::-webkit-scrollbar-thumb,.drail::-webkit-scrollbar-thumb,.ctwrap::-webkit-scrollbar-thumb{background:#c3cad6;border-radius:999px}
  .lbody::-webkit-scrollbar-track,.scroll::-webkit-scrollbar-track,.drail::-webkit-scrollbar-track,.ctwrap::-webkit-scrollbar-track{background:transparent}

  .wrap{max-width:1480px;margin:0 auto;padding:16px 18px 40px}
  .device{background:var(--paper);border:1px solid #cfd6e0;border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(16,32,51,.14)}

  /* Navy chrome (D6, D22a): top bar is --ds-chrome; ONE active style = --ds-chrome-raise fill */
  /* min-height keeps the live 59px bar that the calc(100dvh - 59px) page heights rely on (Phase 2 moves chrome to --ds-bar-h) */
  .top{display:flex;align-items:center;gap:var(--ds-s-4);padding:11px var(--ds-gutter);min-height:59px;background:var(--ds-chrome);color:var(--ds-chrome-fg-2);border-bottom:0}
  .logo{display:flex;align-items:center;gap:10px}
  .nav{display:flex;gap:var(--ds-s-1);margin-left:var(--ds-s-2)}
  .nav button{font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);color:var(--ds-chrome-dim);height:var(--ds-control-h);padding:0 var(--ds-s-3);border-radius:var(--ds-r-md);border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:7px}
  .nav button.on{background:var(--ds-chrome-raise);color:var(--ds-chrome-fg);font-weight:var(--ds-w-medium)}
  .search{flex:1;min-width:0;border:1px solid var(--ds-chrome-edge);background:var(--ds-chrome-field);border-radius:var(--ds-r-md);color:var(--ds-chrome-fg);font-size:var(--ds-text-base);padding:8px 12px}
  .search:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
  .top [data-handoff-ms-upgrade]{flex:0 0 auto}
  .top [data-handoff-ms-upgrade] .send-lg{padding:8px 12px;white-space:nowrap}
  .user{display:flex;align-items:center;gap:9px;font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);white-space:nowrap}
  .user .av{width:28px;height:28px;border-radius:var(--ds-r-full);background:var(--ds-chrome-raise);color:var(--ds-chrome-fg);box-shadow:inset 0 0 0 1px var(--ds-chrome-edge);display:flex;align-items:center;justify-content:center;font-weight:var(--ds-w-semi);font-size:var(--ds-text-caps)}
  .gearb{margin-left:auto;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid transparent;border-radius:var(--ds-r-md);background:transparent;color:var(--ds-chrome-fg-2);cursor:pointer;flex:0 0 auto;transition:background .13s ease,color .13s ease}
  .gearb:hover{background:var(--ds-chrome-raise);color:var(--ds-chrome-fg)}
  .gearb.on{background:var(--ds-chrome-raise);color:var(--ds-chrome-fg)}
  .gearb:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}

  .subbar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--ds-line);background:var(--ds-canvas);flex-wrap:wrap}
  .subbar-bottom{border-bottom:0;border-top:1px solid var(--line);margin-top:auto;flex:0 0 auto;flex-direction:column;align-items:stretch;gap:6px;padding:9px 12px}
  .subbar-bottom .scope{font-size:11px;color:var(--muted)}
  .subbar-bottom .sb-selects{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .subbar-bottom .sb-selects select{width:100%;min-width:0;font-size:12px;padding:5px 8px;font-weight:600}
  .scope{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
  .fchips{display:flex;gap:7px;flex-wrap:wrap}
  .fchip{border:1px solid var(--ds-field);background:var(--ds-surface);color:var(--ds-ink);font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);padding:7px 13px;border-radius:var(--ds-r-md);cursor:pointer;display:flex;align-items:center;gap:7px}
  .fchip:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
  .fchip .d{width:8px;height:8px;border-radius:50%}
  .fchip .n{font-weight:var(--ds-w-regular);font-size:var(--ds-text-sm);color:var(--ds-ink-3)}
  .fchip.on{border-color:var(--ds-action);background:var(--ds-action);color:var(--ds-action-fg)} .fchip.on .n{color:var(--ds-chrome-fg-2)}
  .vsep{width:1px;height:22px;background:var(--line)}
  /* QUOTES chip bar: padded to the row gutter; the reviewer-name group pins right. */
  .qchips{padding:10px 16px;border-bottom:1px solid var(--line2);align-items:center}
  .qchips .vsep{margin-left:auto}

  /* Keep the job list narrow and scannable; reclaimed width goes to the work surface. */
  .work{display:grid;grid-template-columns:400px 1fr;height:calc(100dvh - 59px);min-height:0}
  .listcol{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:#fbfcfe}
  .lhead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 10px;border-bottom:1px solid var(--line)}
  .lhead .t{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
  .lhead .sub{font-size:12px;color:var(--muted)}
  .lbody{overflow:auto;flex:1;min-height:0}
  .lrow{padding:12px 14px 14px;border-bottom:1px solid var(--line2);cursor:pointer;transition:background .13s ease}
  .lrow:hover{background:#f3f7fd}
  .lrow.sel{background:#eef5ff;box-shadow:inset 3px 0 0 var(--green2)}
  .lrow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
  /* micro-transitions on every interactive surface (shipped-product feel) */
  .fchip,.nlg,.railbtn,.railqbtn,.nav button,.send-lg,.railq,.viewall,.mkjob,.portal{transition:background .13s ease,border-color .13s ease,box-shadow .13s ease,color .13s ease}
  /* r1: title + job number */
  .lrow .r1{display:flex;align-items:first baseline;gap:8px}
  .lrow .cust{font-size:14px;font-weight:650;line-height:1.3;flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .lrow .jnum{font-size:11px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}
  .lrow .r1 .stchip,.lrow .r1 .hchip,.lrow .r1 .flag,.lrow .r1 .pill{flex:0 0 auto;margin-top:1px}
  .lrow .grow{flex:1}
  /* r2: site · tech */
  .lrow .r2{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:baseline;gap:5px;min-width:0;white-space:nowrap;overflow:hidden}
  .lrow .r2 .r2t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lrow .r2 .r2t .bld{color:var(--ink);font-weight:600}
  /* rmeta: completed time + quote amount */
  .lrow .rmeta{font-size:11.5px;color:var(--muted);margin-top:3px;display:flex;align-items:baseline;justify-content:space-between}
  .lrow .rmeta .amt{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .lrow .rmeta .amt.dim{font-weight:600;color:var(--faint)}
  /* rstatus: 3 status dots on one line */
  .lrow .rstatus{font-size:11px;color:var(--muted);margin-top:8px;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
  .lrow .rstatus .sg{display:inline-flex;align-items:center;gap:3px;flex:1 1 0;min-width:0;overflow:hidden}
  .lrow .rstatus .sg-l{font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--faint);flex:0 0 auto}
  .lrow .rstatus .sg .d{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 auto}
  .lrow .rstatus .sg .d.open{background:transparent;border:1.5px solid var(--faint)}
  .lrow .rstatus .sg-v{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
  .lrow .rstatus .sg-v.dim{color:var(--faint)}
  /* r3 legacy (used by qrow fallback) */
  .lrow .r3{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px;row-gap:2px;flex-wrap:wrap}
  .lrow .r3 .qd{font-weight:600;color:#33415c}
  .lrow .r3 .qd.none{color:var(--faint);font-weight:500}
  .lrow .r3 .qs{color:var(--muted)}
  .lrow .bi{font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;white-space:nowrap;flex:0 0 auto}
  .bi-done{color:#1a6e2e;background:#e0f5e5} .bi-nb{color:#6b6b6b;background:#eee}
  .bi-rev{color:#2b5ea7;background:#e0edff} .bi-ub{color:#9a5c00;background:#fff3d4}
  .lrow .r2 .qrev{font-weight:600;color:var(--muted)}
  .lrow .r2 .qrevdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle}
  .qr-bl{background:#3f7fd0} .qr-am{background:#a9750a} .qr-gr{background:#3c9a4e}
  .lrow .dotsep{color:#c3c9d4}
  /* QUOTES review-queue row: SITE + SCOPE NAME is the primary title; the customer /
     management company is demoted to a quiet secondary line; the $ amount is its own
     right-aligned tabular column so values compare; ONE status chip pins to the right
     edge (resolves the 3x status duplication). */
  .lrow.qrow{padding:11px 16px}
  .qrow .qr-top{display:flex;align-items:flex-start;gap:10px}
  .qrow .qr-main{flex:1 1 auto;min-width:0}
  .qrow .qr-title{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .qrow .qr-sub{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qrow .qr-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
  .qrow .qr-amt{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
  .qrow .qr-taxlbl{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-left:3px}
  .qrow .qr-amt.none{color:var(--faint);font-weight:600}
  .qrow .qr-side .rstat{margin-top:0}
  .qrow .qr-snip{font-size:12px;color:var(--muted);line-height:1.35;margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
  .qrow .qr-meta{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .qrow .qr-meta .qd{font-weight:600;color:#33415c}
  .qrow .qr-age{font-weight:600}
  .qrow .qr-age.warn{color:var(--amber-tx)}
  .qrow .qr-age.over{color:var(--red)}
  .lrow.qrow.sel .qr-title{color:#0d1c33}
  .flag{font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2);background:var(--ds-st-route-bg);border-radius:var(--ds-r-sm);padding:3px 9px;white-space:nowrap}
  /* automation-health / test-row chips (contract §1) */
  .hchip{font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2);border-radius:var(--ds-r-sm);padding:3px 9px;white-space:nowrap}
  .hchip.h-error,.hchip.h-failed{background:var(--ds-st-late-bg);color:var(--ds-ink-2)}
  .hchip.h-processing,.hchip.h-skipped,.hchip.h-dispositioned{background:var(--ds-tint);color:var(--ds-ink-2)}
  .hchip.h-test{background:var(--ds-st-route-bg);color:var(--ds-ink-2);letter-spacing:.4px}
  /* D14: status word is ink-2; only the glyph (dot) and the soft tint carry the state colour */
  .stchip{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2);padding:3px 10px;border-radius:var(--ds-r-sm);white-space:nowrap}
  .stchip .d{width:7px;height:7px;border-radius:var(--ds-r-full)}
  .st-notes{background:var(--ds-st-site-bg);color:var(--ds-ink-2)} .st-notes .d{background:var(--ds-st-site)}
  .st-quote{background:var(--ds-st-route-bg);color:var(--ds-ink-2)} .st-quote .d{background:var(--ds-st-route)}
  .st-follow{background:var(--ds-st-route-bg);color:var(--ds-ink-2)} .st-follow .d{background:var(--ds-st-route)}
  .st-closed{background:var(--ds-tint);color:var(--ds-ink-2)} .st-closed .d{background:var(--ds-st-sched)}
  /* Integrated quote-status (replaces the chips): the real Simpro status as
     plain text + a small status-family dot. No filled pill. */
  .rstat{display:inline-flex;align-items:center;gap:7px;font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2);white-space:nowrap;flex:0 0 auto;margin-top:2px}
  /* Base dot = neutral grey; quote-status rows override background inline with the
     REAL Simpro status color (see statusDot()). No client-side tone classes. */
  .rstat .d{width:7px;height:7px;border-radius:var(--ds-r-full);background:var(--ds-st-sched);flex:0 0 auto}
  .rstat .d.d-deleted{background:var(--ds-st-late)}
  .rstat .d.d-checking{background:var(--ds-st-route)}
  .lempty{margin:auto;padding:46px 24px;text-align:center;color:var(--muted)}
  .lempty .ico{font-size:var(--ds-text-p-d1);color:var(--green2)} .lempty .ico.mono{color:var(--ds-icon)} .lempty .big{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--ink);margin:8px 0 4px}
  .dempty .qsummary{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
  .dempty .qs-item{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 18px;min-width:104px;text-align:center;cursor:pointer;font-family:inherit;transition:border-color .13s ease,box-shadow .13s ease}
  .dempty .qs-item:hover{border-color:var(--navy);box-shadow:0 2px 8px rgba(16,35,63,.08)}
  .dempty .qs-n{display:block;font-size:22px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.1}
  .dempty .qs-l{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}

  /* detail — real 2-zone layout: LEFT work surface + RIGHT facts rail */
  .detail{display:flex;flex-direction:column;min-height:0;background:#fff}
  /* E15 DE-CRAMP: slightly slimmer facts rail (short key/value facts) so the
     editor + preview get more room at 1440px and just under. */
  .detail.split{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-rows:minmax(0,1fr);align-items:stretch}
  .dleft{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
  .drail{background:var(--canvas);border-left:1px solid var(--line);overflow:auto;padding:10px 10px 26px;display:flex;flex-direction:column;gap:10px;min-width:0}
  .railsec .rl{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.6px;text-transform:uppercase;color:var(--faint);margin:0 0 7px}
  .railsec{border-bottom:1px solid var(--line);padding-bottom:14px}
  .railsec:last-child{border-bottom:0;padding-bottom:0}
  .fact{display:flex;flex-direction:column;gap:1px;margin-bottom:9px;font-size:13px}
  .fact:last-child{margin-bottom:0}
  .fact .fk{font-size:11px;color:var(--faint);font-weight:600}
  .fact .fv{color:var(--ink);font-weight:600;line-height:1.35}
  .fact .fv.sub{font-weight:500;color:var(--muted);font-size:12px}
  .railq{border:1px solid var(--line);border-radius:var(--ds-r-md);padding:11px 12px;background:var(--ds-surface);font-size:var(--ds-text-sm)}
  .railq.on{border-color:var(--blue-bd);background:var(--blue-bg)} .railq.flagged{border-color:var(--purple-bd);background:var(--purple-bg)}
  .railqpick{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;margin:0 0 7px}
  .railqpick:last-child{margin-bottom:0}.railqpick.chosen{box-shadow:inset 0 0 0 2px var(--navy)}
  .railqpick:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
  .railq .qq{font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--ink);display:block;margin-bottom:2px}
  .railq .qmeta{color:var(--muted)}
  .railq .qacts{display:flex;gap:12px;margin-top:9px;flex-wrap:wrap}
  .railq .linkb{font-size:var(--ds-text-sm)}
  .railqbtn{display:block;width:100%;text-align:center;border:1px solid var(--blue-bd);background:var(--blue-bg);color:var(--blue-tx);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);padding:9px 14px;border-radius:var(--ds-r-md);cursor:pointer;margin-top:8px}
  .railqbtn.ghost{border:1px solid var(--ctl);background:var(--ds-surface);color:var(--navy);font-weight:600}
  .railphotos{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
  .railphotos .pn{font-weight:700;color:var(--ink)}
  .railtoggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink);cursor:pointer}
  /* Service-photo previewer (replaces the old Job-facts rail box) */
  .svcphotos .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .svcphotos .pthumb{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:var(--ds-r-md);overflow:hidden;background:var(--ds-tint);cursor:pointer;aspect-ratio:1/1}
  .svcphotos .pthumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--ds-r-md)}
  .svcphotos .pthumb:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .svcphotos .photoact{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:7px;min-width:0}
  .svcphotos .pmore{display:inline-block;font-size:var(--ds-text-sm);white-space:nowrap;min-width:0}
  .svcphotos .photoact .railtoggle{white-space:nowrap;gap:4px;flex:0 0 auto}
  .svcphotos .photoact .railtoggle input{margin:0;width:14px;height:14px}
  .svcphotos .pstate{font-size:var(--ds-text-sm);color:var(--muted)}
  .svcphotos .pstate.perr{color:var(--ds-st-late-ink)}
  /* LIGHTBOX — rows: top bar / centered contain stage / context dock. The image
     carries cursor:zoom-in and a click-to-magnify state (drag-to-pan when
     zoomed); the empty top/dock zones + stage carry cursor:zoom-out. */
  .photolb{position:fixed;inset:0;z-index:9000;display:grid;grid-template-rows:auto 1fr auto;background:color-mix(in srgb, var(--ds-chrome) 86%, transparent)}
  .photolb .plb-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:zoom-out}
  .photolb .plb-counter{background:color-mix(in srgb, var(--ds-surface) 16%, transparent);color:var(--ds-chrome-fg);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);padding:5px 11px;border-radius:var(--ds-r-full);font-variant-numeric:tabular-nums;cursor:default}
  .photolb .pclose{width:40px;height:40px;border-radius:var(--ds-r-full);border:0;background:color-mix(in srgb, var(--ds-surface) 16%, transparent);color:var(--ds-chrome-fg);font-size:var(--ds-text-md);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .photolb .pclose:hover{background:color-mix(in srgb, var(--ds-surface) 28%, transparent)}
  .photolb .plb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;cursor:zoom-out;overflow:hidden}
  .photolb .plb-stage img{max-width:92vw;max-height:78vh;border-radius:var(--ds-r-lg);box-shadow:var(--ds-e-pop);object-fit:contain;cursor:zoom-in;transition:transform .18s ease;transform-origin:center center}
  .photolb .plb-stage.zoomed{cursor:default}
  .photolb .plb-stage.zoomed img{cursor:grab;max-width:none;max-height:none;transition:none}
  .photolb .plb-stage.zoomed.panning img{cursor:grabbing}
  .photolb .plb-broken{color:var(--ds-chrome-fg-2);font-size:var(--ds-text-md);display:flex;flex-direction:column;align-items:center;gap:10px}
  .photolb .plb-prev,.photolb .plb-next{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:var(--ds-r-full);border:0;background:color-mix(in srgb, var(--ds-surface) 16%, transparent);color:var(--ds-chrome-fg);font-size:var(--ds-text-md);line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
  .photolb .plb-prev:hover,.photolb .plb-next:hover{background:color-mix(in srgb, var(--ds-surface) 30%, transparent)}
  .photolb .plb-prev{left:16px} .photolb .plb-next{right:16px}
  .photolb .plb-dock{padding:12px 16px;text-align:center;cursor:zoom-out}
  .photolb .pcap{color:var(--ds-chrome-fg);font-size:var(--ds-text-base);font-variant-numeric:tabular-nums;cursor:default;display:inline-block;max-width:92vw}
  .photolb .pcap .pcap-note{display:block;color:var(--ds-chrome-fg-2);font-size:var(--ds-text-sm);margin-top:3px;max-height:clamp(48px,18vh,160px);overflow-y:auto;white-space:pre-wrap;text-align:left}
  .photolb .plb-dl{display:inline-flex;align-items:center;gap:6px;margin-left:14px;color:var(--ds-chrome-fg);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);text-decoration:none;cursor:pointer}
  .photolb .plb-dl:hover{color:var(--ds-chrome-fg);text-decoration:underline}
  @media(prefers-reduced-motion:reduce){ .photolb .plb-stage img{transition:none} }
  .actlist .ai{display:flex;gap:9px;font-size:12px;padding:5px 0;border-bottom:1px solid var(--line2);color:var(--muted)}
  .actlist .ai:last-child{border-bottom:0}
  .actlist .ai b{color:var(--ink);font-weight:600}
  .actlist .ai .ad{width:7px;height:7px;border-radius:50%;background:var(--green2);margin-top:5px;flex:0 0 auto}
  .railbtn{display:block;width:100%;text-align:center;border:1px solid var(--ctl);background:var(--ds-surface);color:var(--navy);font-size:var(--ds-text-base);font-weight:600;padding:9px 14px;border-radius:var(--ds-r-md);cursor:pointer;margin-top:8px}
  .railbtn.danger{color:var(--red);border-color:var(--ds-st-late-bd)}
  /* FIX 4: mobile-only back-to-list control inside the editor (desktop hides it) */
  .dback{display:none}
  .dbackb{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ctl);background:#fff;color:var(--navy);font-size:13px;font-weight:600;padding:9px 14px;border-radius:8px;cursor:pointer}
  .dback{padding:11px 18px 0}
  /* E: labeled inline back pill — "‹ All quotes", height-matched to the review chip,
     sits inline left of the title (still no standalone line). */
  .dbackin{display:inline-flex;align-items:center;gap:6px;height:24px;flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:7px;padding:0 10px 0 8px;cursor:pointer;font:inherit;font-size:13px;font-weight:500;margin-right:2px;transition:background .12s,color .12s,border-color .12s}
  .dbackin svg{flex:0 0 auto}
  .dbackin span{white-space:nowrap}
  .dbackin:hover{background:var(--canvas);color:var(--navy);border-color:var(--ctl)}
  .dbackin:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .dempty{margin:auto;text-align:center;color:var(--muted);padding:40px}
  .dempty .ico{font-size:var(--ds-text-p-d1);color:var(--ds-icon)}
  .dempty .big{font-size:var(--ds-text-md);font-weight:600;color:var(--ink);margin:10px 0 5px}
  /* PASSIVE progress indicator — NOT clickable tabs. The four stage nodes sit on
     ONE continuous connecting rail (the .sep segments grow to fill the gaps), so it
     reads as a read-only progress line, not a tab strip. No handler is wired and none
     is implied: default cursor, no hover/active state, nodes are non-interactive
     (pointer-events:none) and the strip is non-selectable. role=img + an aria-label
     (set in lifeStrip) tell assistive tech this is a status graphic, not a control. */
  .life{padding:12px 22px;border-bottom:1px solid var(--line2);background:#fcfdff}
  .lifeinner{display:flex;align-items:center;gap:0;width:100%;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  .life .st{display:flex;align-items:center;gap:6px;flex:0 0 auto;font-size:11px;color:var(--faint);font-weight:600;cursor:default;pointer-events:none}
  .life .st .d{width:9px;height:9px;border-radius:50%;background:#d2d8e4;box-shadow:0 0 0 2px #fcfdff}
  .life .st.skip .d{background:transparent;border:1px dashed #aeb8c8}
  .life .st.done{color:var(--green)} .life .st.done .d{background:var(--green2)}
  .life .st.cur{color:var(--navy)} .life .st.cur .d{background:var(--navy);box-shadow:0 0 0 2px #fcfdff,0 0 0 5px rgba(16,35,63,.14)}
  /* connector: one continuous rail segment between nodes (grows to fill the gap) */
  .life .sep{flex:1 1 auto;min-width:14px;height:2px;background:#dde3ec;margin:0 9px;border-radius:1px}
  /* COMPOSED HEADER BAND (rubric A/B): one coherent band with a hairline bottom
     border — NOT an equal-cell data table. A left identity stack capped to its content,
     then a right zone with DELIBERATELY UNEQUAL, border-free groups: status + reserve
     cluster as quiet secondary groups, and the grand TOTAL anchors the far right edge
     as the unmistakable primary (more space, more weight, a soft panel). Separation is
     by whitespace + alignment, not vertical hairlines. Type tiers: primary=navy total
     number, secondary=quiet micro-labels (.dh-cl), tertiary=meta (ex. tax / created). */
  .dhead{display:block;width:100%;padding:0;border-bottom:1px solid var(--line);background:#fff}
  .dh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-width:0;gap:24px}
  /* the Jobs-view header (a different dhead) still uses .dh-titleline/.who/.meta */
  .dh-titleline{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
  .dhead>.dh-titleline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:5px 14px;padding:10px 20px 0}
  .dhead .who{font-size:11.5px;color:var(--muted);display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px 7px}
  .dhead>.dh-titleline>.who{justify-content:flex-end;text-align:right;max-width:210px;padding-top:1px}
  .dhead .meta{font-size:12.5px;color:var(--muted);margin-top:5px}
  .dhead>.meta{box-sizing:border-box;padding:3px 20px 10px;margin-top:0;line-height:1.38;overflow-wrap:break-word}
  /* LEFT column — the identity column. Mirrors the body's left column (.qe-left,
     flex:42) so the header is a genuine TWO-COLUMN layout aligned to the screen
     below it, NOT a content-capped block that leaves a mid-header void. */
  .dh-idstack{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;flex:1 1 auto;padding:15px 18px 14px 24px}
  /* L11: back control sits INLINE, left of the title, as a compact chip. */
  .dh-identity{display:flex;align-items:flex-start;gap:11px;min-width:0}
  /* name block = customer/site line + the #/stage/date meta beneath it, so the meta
     aligns under the name, not under the back button. */
  .dh-nameblock{display:flex;flex-direction:column;min-width:0;gap:3px}
  .dh-crumb{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:4px 9px 4px 6px;border-radius:8px;white-space:nowrap}
  .dh-crumb svg{margin-left:-2px}
  .dh-crumb:hover{color:var(--navy);border-color:var(--navy)}
  .dhead .h{font-size:15px;font-weight:700;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;letter-spacing:0} .dhead .h small{font-weight:500;color:var(--muted);font-size:12px}
  .dhead>.dh-titleline>.h{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;display:block;word-break:break-word}
  .dhead .h .qnum{font-weight:600;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
  /* LEFT column identity (spec 1): customer + site presented with EQUAL visual weight
     — same size + weight, stacked — then a quieter secondary line below. */
  .dh-names{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dh-name{font-size:16px;font-weight:700;color:var(--ink);line-height:1.22;min-width:0;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dh-dash{color:var(--faint);font-weight:600}
  /* secondary line: quote # + created date, quiet/tertiary. */
  .dh-submeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:12px;color:var(--faint)}
  .dh-qnum{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
  .dh-qstage{font-weight:600;color:var(--muted)}
  .dh-subdot{color:var(--line)}
  .dh-site{font-size:12.5px;color:var(--ink);font-weight:500}
  /* tertiary tier */
  .dh-created{font-size:12px;color:var(--faint)}
  /* RIGHT column (spec 1): TWO real boxes — a STATUS box and a QUOTE TOTAL box — that
     FILL the right column (flex:58, mirroring the body's .qe-main below them). They do
     not hug the right edge; they span the column edge-to-edge so the header reads as the
     same two columns as the screen. The total box is weighted larger (the primary). */
  .dh-cells{display:flex;align-items:center;flex:0 0 auto;justify-content:flex-end;gap:18px;padding:13px 26px 13px 0}
  /* each box fills its share of the right column. */
  .dh-cell{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;gap:4px;min-width:0;flex:1 1 0;padding:9px 14px;background:#fff;border:1px solid var(--line2);border-radius:11px}
  /* TYPE HIERARCHY — three real tiers, NOT one uniform all-caps label:
     - the TOTAL label is a quiet small-cap eyebrow, but its NUMBER is the headline;
     - reserve/status labels are even quieter micro-labels so they recede. */
  .dh-cl{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
  /* STATUS box — a quiet sibling box to the left of the total. */
  .dh-cell-status{flex:0 0 auto;justify-content:center;background:var(--canvas)}
  /* STATUS is NOT a box — plain text, right-aligned, sitting to the left of the total box. */
  .dh-statusplain{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;text-align:right}
  .dh-statusplain .qe-statesub{justify-content:flex-end}
  .dh-statusplain .qe-stateact{justify-content:flex-end}
  /* save action only appears when there are unsaved edits — sits left of the total. */
  .dh-savewrap{display:flex;align-items:center;gap:8px;flex:0 0 auto}
  /* QUOTE TOTAL box (the unmistakable PRIMARY): more room + weight + a soft panel; the
     reserve editor is built IN below the headline number. */
  .dh-cell-total{flex:0 0 auto;align-items:stretch;gap:0;padding:0;background:linear-gradient(180deg,#fbfcfe,#f4f7fb);border:1px solid var(--line2);border-radius:11px;overflow:hidden}
  .dh-totalmain{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px;padding:9px 16px 8px}
  .dh-cell-total .dh-cl{color:var(--muted);letter-spacing:.09em}
  .qe-finsum{display:flex;flex-direction:column;align-items:flex-end;gap:0;line-height:1.02}
  /* DUAL TOTAL — ex-tax (operator working figure) AND incl-tax (the figure the
     customer PDF prints) shown side by side so the operator never approves the
     wrong price. The two amounts share one weight row. */
  .qe-finrow{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;flex-wrap:wrap}
  .qe-finseg{display:flex;flex-direction:column;align-items:flex-end;line-height:1.02}
  .qe-finsep{font-size:22px;font-weight:700;color:var(--line2);align-self:center;line-height:1}
  /* PRIMARY: the headline number — larger + tighter so it owns the eye. */
  .qe-finsum .tv{font-size:17px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.2px;line-height:1.1}
  /* The ex-tax amount: same size as incl-tax but a touch quieter, so incl-tax
     (the customer figure) carries AT LEAST equal visual weight. */
  .qe-finsum .tv-ex{font-weight:700;color:var(--muted)}
  /* The incl-tax amount: full headline weight — the customer-facing total. */
  .qe-finsum .tv-inc{font-weight:800;color:var(--navy)}
  /* tertiary tier — caption BELOW the number, lowercase "ex. tax". */
  .qe-finsum .tx{font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.02em;text-transform:lowercase}
  .qe-finsum .tx-inc{color:var(--navy);font-weight:700}
  /* QUOTE-LEVEL RESERVE — integrated INSIDE the total box, on a tinted shelf below the
     number with a hairline, so it reads as part of how the total is composed. */
  .dh-totalresv{padding:9px 16px 10px;border-top:1px solid var(--line2);background:rgba(16,35,63,.025)}
  .qe-reserve{display:flex;align-items:center;justify-content:flex-end;gap:8px 11px;flex-wrap:wrap}
  .qe-reslbl{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:auto}
  .qe-restog{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
  .qe-restogbtn{font-size:11px;font-weight:700;padding:2px 7px;border:0;background:#fff;color:var(--muted);cursor:pointer;line-height:1.4}
  .qe-restogbtn.on{background:var(--navy);color:#fff}
  /* SUBORDINATED edit control — small + muted so it never competes with the total. */
  .qe-resin{width:52px;font-size:11px;font-weight:600;text-align:right;padding:2px 6px;border:1px solid var(--line);border-radius:6px;color:var(--muted);font-variant-numeric:tabular-nums;background:#f6f8fb}
  .qe-resin:focus{color:var(--navy);background:#fff}
  /* the reserve read value — kept legible but DESATURATED + smaller so the green
     supports the total instead of fighting it for "the real number". */
  .qe-resamt{font-size:12.5px;font-weight:700;color:#4b7a4e;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:5px}
  /* tertiary tier */
  .qe-reseff{font-size:10px;font-weight:600;color:var(--faint)}
  /* TAX CITY selector — its own shelf in the total box, below the reserve. */
  .dh-totaltax{padding:9px 16px 10px;border-top:1px solid var(--line2);background:rgba(16,35,63,.025)}
  .qe-tax{display:flex;align-items:center;justify-content:flex-end;gap:8px 11px;flex-wrap:wrap}
  .qe-taxretry{font-size:11px;font-weight:600;color:#9a3b3b;background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
  .qe-taxlbl{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-right:auto}
  .qe-taxsel{font-size:11px;font-weight:600;padding:2px 22px 2px 7px;border:1px solid var(--line);border-radius:6px;color:var(--muted);background:#f6f8fb;max-width:210px;cursor:pointer}
  .qe-taxsel:focus{color:var(--navy);background:#fff;outline:none;border-color:var(--navy)}
  .qe-taxbusy,.qe-taxload{font-size:10px;font-weight:600;color:var(--faint)}
  /* STATUS box: a CLEAN VERTICAL hierarchy — eyebrow / stage pill / one quiet secondary
     line — never a horizontal pile of mismatched chips. */
  .qe-statechips{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:nowrap}
  .qe-statestage{margin-top:5px}
  .qe-statesub{display:flex;align-items:center;gap:9px;margin-top:6px;flex-wrap:wrap}
  .qe-stateact{display:flex;align-items:center;gap:8px;margin-top:7px;flex-wrap:wrap}
  .qe-aimeta{font-size:11px;font-weight:600;color:var(--faint);white-space:nowrap;cursor:help;border-bottom:1px dotted var(--ctl)}
  .qe-aimeta:hover{color:var(--ink)}
  /* G: plain inline status — green dot + text, NO button chrome. */
  .qe-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
  .qe-stat .d{width:7px;height:7px;border-radius:50%;background:var(--green2);flex:0 0 auto}
  .qe-stat.ok{color:var(--green2)} .qe-stat.ok .ck{font-weight:800}
  .qe-stat.dirty{color:var(--amber-tx)} .qe-stat.dirty .d{background:#c98a14} .qe-stat.dirty b{color:var(--amber-tx)}
  .qe-stat.saving{color:var(--blue-tx)} .qe-stat.saving .d{background:var(--blue-tx)}
  /* G: Save to Simpro is its own standard button, only present when dirty. */
  .qe-savebtn{display:inline-flex;align-items:center;gap:7px;border:0;background:var(--navy);color:#fff;border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
  .qe-savebtn:hover{background:#1f3358}
  .qe-savecnt{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:16px;padding:0 5px;border-radius:8px;background:rgba(255,255,255,.22);font-size:11px;font-weight:700}
  .qe-ghostbtn{border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;text-decoration:underline;cursor:pointer;padding:4px 2px}
  .qe-ghostbtn:hover{color:var(--ink)}
  /* deviation 12: stored-package freshness chip + manual refresh control */
  .pkgbuilt{color:var(--muted);font-size:12px;margin-right:8px}
  .who .pkgsep{display:inline-block;width:1px;height:14px;background:var(--line);margin:0 10px;vertical-align:middle}
  .senderSel{font:inherit;font-size:var(--ds-text-sm);font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:var(--ds-r-md);padding:3px 7px;background:var(--ds-surface);cursor:pointer;vertical-align:middle;margin-left:2px}
  .senderSel:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .seg2{display:inline-flex;background:var(--ds-tint);border:1px solid var(--ctl);border-radius:var(--ds-r-md);padding:3px;margin-top:0}
  .seg2 button{border:0;background:transparent;font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);color:var(--navy);padding:6px 13px;border-radius:var(--ds-r-md);cursor:pointer}
  .seg2 button.on{background:var(--ds-surface);color:var(--ink);box-shadow:none}
  .linkb{border:0;background:transparent;color:var(--ds-ink-2);font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);text-decoration:underline;text-decoration-color:var(--ds-field);text-underline-offset:3px;cursor:pointer;padding:0}
  .linkb:hover{color:var(--ds-ink);text-decoration-color:var(--ds-ink)}
  .linkb:disabled{color:var(--ds-disabled-fg);cursor:not-allowed}
  /* Editor/preview scroll well: compact chrome, with compose forms able to claim the
     height between the header and action bar instead of floating as nested cards. */
  .scroll{padding:14px 20px;flex:1;overflow:auto;min-height:0;display:flex;flex-direction:column}
  .scroll:has(.thread-panel){position:relative;padding-bottom:34px;scroll-padding-bottom:34px}
  .scroll:has(.thread-panel):after{content:"";position:sticky;display:block;left:0;right:0;bottom:-34px;height:34px;margin:0 -20px -34px;background:linear-gradient(to bottom,color-mix(in srgb, var(--ds-surface) 0%, transparent),var(--ds-canvas) 55%);pointer-events:none}
  .mailcard{border:1px solid var(--line);border-radius:var(--ds-r-lg);overflow:hidden;width:100%;margin:0;box-shadow:none;flex:0 0 auto}
  .mh{display:none}
  .mh b{font-size:var(--ds-text-base)} .mh .fr{font-size:var(--ds-text-caps);color:var(--ds-icon)}
  .mb{padding:18px} .mb p{margin:0 0 11px;font-size:var(--ds-text-base);line-height:1.6;color:var(--ds-ink)}
  .pcap{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:13px 0 7px}
  .pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .pht{position:relative;border-radius:var(--ds-r-md);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
  .pht svg{width:100%;height:100%;display:block}
  .pht .more{position:absolute;inset:0;background:color-mix(in srgb, var(--ds-chrome) 60%, transparent);color:var(--ds-chrome-fg);font-weight:var(--ds-w-semi);display:flex;align-items:center;justify-content:center;font-size:var(--ds-text-md)}
  .nophoto{border:1px dashed var(--amber-bd);background:var(--amber-bg);color:var(--amber-tx);border-radius:8px;padding:11px 13px;font-size:12px;font-weight:600}
  .photosoff{border:1px dashed var(--line);color:var(--muted);border-radius:8px;padding:11px 13px;font-size:12px}
  .apx{margin-top:15px;border-top:1px dashed var(--line);padding-top:13px}
  .apx .apxh{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
  .qbtns{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:8px}
  .portal{display:inline-block;background:var(--navy);color:var(--ds-chrome-fg);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);padding:9px 14px;border-radius:var(--ds-r-md);text-decoration:none;cursor:pointer}
  .pdfchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--muted)}
  /* Operator quote summary (name + total/labor/net-margin metrics) in the Scope slot. */
  .qsum{margin-top:5px}
  .qsum-name{font-weight:600;font-size:13px;color:var(--ink);line-height:1.35}
  .qsum-metrics{margin-top:3px;font-size:12.5px;color:var(--muted);font-weight:500}
  /* Draft-follow-up control sits directly under the follow-up schedule. */
  .fucta{margin-top:10px}
  /* Quote/PDF access control sits right under the quote metrics (not the sidebar). */
  .qaccess{margin-top:8px}
  .sig{border-top:1px solid var(--line2);margin-top:14px;padding-top:12px;font-size:12px;color:var(--muted);line-height:1.55} .sig b{color:var(--ink)}
  .viewall{display:inline-block;margin-top:11px;font-size:13px;font-weight:700;color:var(--green);border:1px solid #cfe3c6;background:#f4faf0;border-radius:8px;padding:9px 14px;cursor:pointer}
  .qreview{margin-top:15px;border:1px solid var(--blue-bd);background:var(--ds-st-site-bg);border-radius:var(--ds-r-lg);padding:14px}
  .qreview .qh{display:flex;justify-content:space-between;align-items:baseline}
  .qreview .qh b{font-size:var(--ds-text-md)} .qreview .qh .tot{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--navy)}
  .qreview ul{margin:9px 0 0;padding-left:19px;font-size:var(--ds-text-base);color:var(--ds-ink-2);line-height:1.7}
  .qreview .qm{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
  /* The composer is the work surface, not a card inside the work surface. Keep only
     the actual inputs/editing surface boxed so the body can use the freed space. */
  .scroll:has(>.editform){padding:12px 14px 0}
  .editform{border:0;border-radius:0;padding:0;background:transparent;width:100%;margin:0;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;box-shadow:none}
  .fl{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);display:block;margin:2px 0 6px}
  .frow{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:14px}
  /* compact inline fields for To/Cc/Subject — label sits left of the input */
  .ifield{display:flex;align-items:center;gap:9px;margin-bottom:9px}
  .ifield>label{flex:0 0 auto;min-width:30px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
  .ifield .input{padding:8px 11px}
  .ifrow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,1fr);gap:12px;margin-bottom:9px}
  .ifrow .ifield{margin-bottom:0}
  .ifrow .ifield:last-child>label{min-width:20px}
  .ckline{font-size:13px;display:flex;gap:8px;align-items:center;margin-top:14px;flex:0 0 auto}
  .rtbar{display:flex;gap:2px;margin:4px 0 0;flex-wrap:wrap;align-items:center;border:0.5px solid var(--line);border-radius:var(--ds-r-md) var(--ds-r-md) 0 0;padding:3px 6px;background:var(--ds-surface);flex:0 0 auto}
  .rtb{min-width:0;width:28px;height:28px;padding:0;border:0;background:transparent;border-radius:var(--ds-r-md);cursor:pointer;color:var(--ds-ink-2);display:inline-flex;align-items:center;justify-content:center;transition:background .12s ease}
  .rtb:hover{background:var(--ds-paper-hover)}
  .rtb:active{background:var(--ds-st-site-bg)}
  .rtb-sw{width:26px}
  .rtdot{width:15px;height:15px;border-radius:var(--ds-r-full);border:0.5px solid color-mix(in srgb, var(--ds-chrome) 20%, transparent);display:block}
  .rtb-clear{width:auto;padding:0 9px;gap:5px;margin-left:auto;font-size:var(--ds-text-sm);color:var(--muted)}
  .rtsep{width:1px;height:18px;align-self:center;background:var(--ds-skeleton);margin:0 5px}
  /* Rich-text body: a real contained writing surface. The parent panel owns page
     positioning; this field owns long-message scrolling so text never spills out of
     the control chrome or gets sliced by the action bar. */
  .rtedit{position:relative;flex:1 1 auto;height:auto;min-height:250px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scroll-padding-bottom:28px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--ds-r-lg) var(--ds-r-lg);padding:12px 14px 26px;box-sizing:border-box;background:var(--ds-surface);font-size:var(--ds-text-md);line-height:1.55;font-family:var(--ds-font);color:var(--ds-ink);outline:none}
  .rtedit:after{content:"";position:sticky;display:block;left:0;right:0;bottom:-30px;height:30px;margin:0 -14px -30px;background:linear-gradient(to bottom,color-mix(in srgb, var(--ds-surface) 0%, transparent),var(--ds-surface) 45%);pointer-events:none}
  .rtedit:focus{border-color:var(--ds-line);box-shadow:none;outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
  .rtedit:empty:before{content:attr(data-ph);color:var(--ds-icon)}
  .rtedit p{margin:0 0 10px}
  .input{border:1px solid var(--ds-field);border-radius:var(--ds-r-md);padding:9px 12px;font:inherit;font-size:var(--ds-text-base);width:100%;background:var(--ds-surface);color:var(--ds-ink);caret-color:var(--ds-focus)}
  .input::placeholder{color:var(--ds-ink-3)}
  /* D17 focus: the field's own line steps down to the hairline; the shared ring is the one strong line */
  .input:focus-visible{border-color:var(--ds-line);outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
  .input:disabled{background:var(--ds-disabled-bg);border-color:var(--ds-disabled-bd);color:var(--ds-disabled-fg);cursor:not-allowed}
  /* D22c error: a crisp 1px late border, no glow */
  .input[aria-invalid="true"],.input.invalid{border-color:var(--ds-st-late)}
  /* #17: the Cc input sits in the narrow (1fr) column of the To/Cc row, so a long
     list of addresses truncates at a glance. When a field in that row is focused,
     expand it to span the FULL row width so the whole value is visible while editing
     (this is what reveals a long Cc list in place). The title attr (set inline to the
     value) gives the full string on hover too, and the aria-label names the Cc input
     for screen readers since its visible <label> is a sibling, not a wrapper. */
  .ifrow .ifield:focus-within{grid-column:1 / -1}
  .cc-input:focus{box-shadow:none;border-color:var(--ds-line)}
  /* the body textarea grows to fill the editor; the flex floor keeps it tall
     even when the scroll well is short. resize:vertical still lets the operator
     drag it taller. */
  textarea.input{min-height:280px;resize:vertical;line-height:1.6;flex:1 1 auto}
  /* E12 customer-email preview: the SERVER-rendered body in a sandboxed iframe.
     Auto-height is set inline by bindPreviewFrames; min-height covers the brief
     pre-measure paint and any blocked-measurement fallback. */
  .mailframe{display:block;width:100%;border:0;background:var(--ds-surface);min-height:420px;overflow:hidden}
  /* Resolved sent messages in conversation history use the page's outer scroll.
     Nested clipped panels made real threads look broken and hid message content. */
  .threadframe{display:block;width:100%;border:1px solid var(--line);border-radius:var(--ds-r-md);background:var(--ds-surface);min-height:130px;overflow:hidden;margin-top:8px}
  .mailfoot{padding:14px 18px 16px;border-top:1px solid var(--line2);background:var(--ds-st-site-bg)}
  .mailfoot .pcap{margin:0 0 7px}
  .mailfoot .viewall{margin-top:0}
  .previewnote{font-size:12px;color:var(--blue-tx);background:var(--blue-bg);border-bottom:1px solid var(--blue-bd);padding:8px 16px;line-height:1.45}
  .previewloading{padding:26px 18px;font-size:13px;color:var(--muted)}
  .qd-card{border:1px solid var(--line);border-radius:var(--ds-r-lg);padding:16px;margin:0;width:100%}
  .qd-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
  .qd-top b{font-size:var(--ds-text-md)} .qd-top .tot{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--navy)}
  .qd-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
  .qd-card ul{margin:6px 0 0;padding-left:19px;font-size:var(--ds-text-base);color:var(--ds-ink-2);line-height:1.7}
  .qd-note{margin:4px 0 0;font-size:var(--ds-text-base);line-height:1.6;color:var(--ds-ink-2)}
  .thread-scroll{flex:0 0 auto;max-height:24vh;border-top:1px solid var(--line);background:var(--ds-canvas);overflow-y:auto}
  .thread-panel{width:100%;border-top:1px solid var(--line);background:transparent;padding:13px 0 0;margin-top:14px;box-shadow:none;flex:0 0 auto}
  .scroll>.thread-panel:first-child,.thread-scroll .thread-panel{margin-top:0}
  .thread-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
  .thread-title b{font-size:var(--ds-text-md);color:var(--ink)}
  .thread-count{font-size:var(--ds-text-sm);color:var(--muted);font-weight:600;white-space:nowrap}
  .thread-section{margin-top:12px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
  .thread-section:first-of-type{margin-top:0}
  .thread-card{border-top:1px solid var(--line2);padding:9px 0 0;margin-top:9px;background:transparent}
  .thread-card.reply{background:transparent;border-color:var(--blue-bd)}
  .thread-subj{font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);line-height:1.35;color:var(--ink);word-break:break-word}
  .thread-meta{font-size:var(--ds-text-sm);color:var(--muted);line-height:1.4;margin-top:3px;word-break:break-word}
  .thread-text{white-space:pre-wrap;margin-top:8px;line-height:1.55;font-size:var(--ds-text-base);color:var(--ds-ink)}
  .thread-link{margin-top:8px}
  .thread-empty{margin:7px 0 0;font-size:var(--ds-text-base);line-height:1.5;color:var(--muted)}
  .thread-alert{margin:8px 0 0;padding:8px 10px;border:1px solid var(--ds-st-route-bd);border-radius:var(--ds-r-md);background:var(--ds-st-route-bg);color:var(--ds-st-route-ink);font-size:var(--ds-text-sm);line-height:1.45}
  /* DECOUPLED quote detail: the parts/labor editor is the PRIMARY pane (takes the
     available height, scrolls); the customer-send flow is a SECONDARY block below
     it (collapsible by content, never gating the editor). */
  .qd-editor{flex:1;min-height:0;display:flex;flex-direction:column}
  /* #10 + #12: the send composer is a BOUNDED flex column so its inner .scroll well
     owns the ONE real scroll port (like the notes composer) and the Send action bar
     stays pinned + visible. Without the cap a tall body would push .action below the
     fold of the overflow:hidden .dleft and clip the Send buttons. */
  .qd-send{border-top:1px solid var(--line);background:#fbfcfe;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;flex:0 0 auto;overflow:hidden}
  .qd-send.has-thread{grid-template-rows:minmax(280px,1fr) minmax(180px,24vh) auto;flex:1 1 auto}
  /* This composer's SINGLE scroll port (overrides the base .scroll flex:1). It flexes
     to fill the bounded .qd-send and scrolls a tall body; .rtedit no longer scrolls
     on its own, so there is exactly one scrollbar here. */
  .qd-send .scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
  .qd-send>.scroll:has(>.editform){display:flex;flex-direction:column;overflow:hidden}
  .qd-send>.scroll>.editform{height:100%;min-height:0}
  .qd-send .rtedit{min-height:0;flex:1 1 0}
  .qd-send.has-thread>.thread-scroll{max-height:none}
  /* Pin the Send action bar to the bottom of the composer so Send to customer / Send
     test never scroll out of reach when the body editor expands. */
  .qd-send .action{position:relative;bottom:auto;z-index:3;flex:0 0 auto;padding:6px 20px 7px}
  .qd-send .qd-card{margin:14px 26px}
  .qd-sendhd{padding:13px 26px 0}
  .qd-sendt{font-size:13px;font-weight:800;color:var(--ink)}
  .qd-sendsub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;max-width:560px}
  .closedcard{margin:0;width:100%;border:1px solid var(--line);border-radius:var(--ds-r-lg);padding:18px;background:var(--ds-st-site-bg)}
  .closedcard .lines{font-size:var(--ds-text-base);color:var(--ds-ink-2);line-height:2.05;margin-top:8px}
  .closedcard .lines .k{color:var(--faint);display:inline-block;width:130px}
  .ok{color:var(--green);font-weight:800}

  /* E15 DE-CRAMP: roomier action bar so the send/decision controls aren't squeezed. */
  .action{position:relative;z-index:3;border-top:1px solid var(--line);background:#fbfcfe;padding:14px 26px}
  .action:before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;background:linear-gradient(to bottom,rgba(251,252,254,0),#fbfcfe 70%);pointer-events:none}
  .notes-action{padding:10px 20px}
  .notes-action .btns{gap:8px;flex-wrap:nowrap}
  .notes-action .btns .grow{display:none}
  .action.notes-action .btns .senderSel{margin-left:0}
  .action.notes-action .btns .senderSel{width:150px;max-width:150px;padding-right:24px;font-size:var(--ds-text-sm)}
  .action.notes-action .btns .nlg{padding-left:12px;padding-right:12px}
  .action.notes-action .btns .send-lg{padding-left:14px;padding-right:14px}
  .action.notes-action .btns .linkb{font-size:12px}
  /* Action bar: one 38px control height; hierarchy by fill/weight, not size */
  .action .btns{gap:10px}
  .action .btns .senderSel{height:38px;padding:0 30px 0 11px;font-size:var(--ds-text-base);border-color:var(--ctl);border-radius:var(--ds-r-md);margin-left:6px}
  .action .btns .nlg{height:38px;padding:0 16px;font-size:13px;border-radius:8px;display:inline-flex;align-items:center}
  .action .btns .send-lg{height:38px;padding:0 18px;font-size:13px;border-radius:8px;display:inline-flex;align-items:center}
  .action .btns .linkb{height:38px;display:inline-flex;align-items:center;font-size:13px}
  /* Independent opt-in "follow-up quote needed?" choice above the send row. */
  .qneed{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 6px;padding:5px 8px;border:1px solid var(--line);border-radius:var(--ds-r-md);background:var(--ds-surface)}
  .qneed-q{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);color:var(--ink)}
  .qneed .qneed-seg{margin:0;padding:2px}
  .qneed .qneed-seg button{padding:4px 10px;font-size:var(--ds-text-sm)}
  .qneed-hint{font-size:var(--ds-text-sm);font-weight:600;color:var(--blue-tx)}
  .qneed-hint.chosen{color:var(--muted);font-weight:500}
  /* Follow-up reminder opt-in (quote-send): reuses the .qneed panel shell. */
  .qneed.fu-reminders{margin:0 0 10px}
  .qd-send .qneed.fu-reminders{margin:0 0 5px;padding:3px 8px}
  .qd-send .btns{gap:8px;flex-wrap:nowrap}
  .fu-optin{display:inline-flex;align-items:center;gap:7px;font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--ink);cursor:pointer}
  .fu-optin input{width:15px;height:15px;cursor:pointer;accent-color:var(--navy)}
  .actrow{width:100%;margin:0}
  .btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .grow{flex:1}
  /* Point 9: cap ONLY the quote send-section action row so the loaded send controls
     don't strand a wide empty band between left content and the right-aligned Send. */
  .qd-send .actrow{max-width:980px;margin:0 auto}
  /* D17 buttons. Primary (.send-lg, .send-lg.navy): --ds-action fill + 1px shadow, hover/pressed steps.
     Secondary (.nlg): white, 1px --ds-field line. Destructive (.danger): secondary look, late-ink label. */
  .send-lg{background:var(--ds-action);color:var(--ds-action-fg);border:1px solid var(--ds-action);border-radius:var(--ds-r-md);padding:11px 16px;font-weight:var(--ds-w-semi);font-size:var(--ds-text-base);cursor:pointer;box-shadow:var(--ds-e-primary)}
  .send-lg.navy{background:var(--ds-action);border-color:var(--ds-action)} .send-lg:active{transform:scale(.99)}
  .send-lg:hover,.send-lg.navy:hover{background:var(--ds-action-hover);border-color:var(--ds-action-hover)}
  .send-lg:active,.send-lg.navy:active{background:var(--ds-action-press);border-color:var(--ds-action-press);box-shadow:var(--ds-e-primary-press)}
  .send-lg:disabled,.send-lg.navy:disabled{background:var(--ds-disabled-primary-bg);border-color:var(--ds-disabled-primary-bg);color:var(--ds-disabled-primary-fg);box-shadow:none;cursor:not-allowed;transform:none}
  .nlg{background:var(--ds-surface);border:1px solid var(--ds-field);border-radius:var(--ds-r-md);padding:11px 16px;font-weight:var(--ds-w-medium);font-size:var(--ds-text-base);color:var(--ds-ink);cursor:pointer}
  .nlg:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
  .nlg:active{background:var(--ds-canvas);border-color:var(--ds-field)}
  .nlg:disabled{background:var(--ds-disabled-bg);border-color:var(--ds-disabled-bd);color:var(--ds-disabled-fg);cursor:not-allowed}
  .nlg.danger{color:var(--ds-st-late-ink);border-color:var(--ds-field)}
  .nlg.rg{padding:9px 14px}

  /* nav screens */
  .sc-head{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
  /* D3: page titles take the display face (Saira Semi Condensed 600, 20/24) */
  .sc-head h2{margin:0;font-family:var(--ds-display);font-size:var(--ds-text-d2);line-height:var(--ds-lh-d2);font-weight:var(--ds-display-weight);letter-spacing:var(--ds-display-track);color:var(--ds-ink)} .sc-head .sub{font-size:var(--ds-text-sm);color:var(--ds-ink-3);margin-top:3px}
  .contracts-stale-banner{display:flex;align-items:center;gap:10px;margin:12px 22px 0;padding:10px 12px;border:1px solid var(--ds-st-route-bd);border-radius:var(--ds-r-lg);background:var(--amber-bg);color:var(--amber-tx);font-size:var(--ds-text-sm);font-weight:600}
  .contracts-stale-banner .grow{flex:1}.contracts-stale-banner .linkb{color:inherit}
  .gt{width:100%;border-collapse:collapse;font-size:var(--ds-text-base)}
  .gt thead th{text-align:left;font-size:var(--ds-text-caps);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);font-weight:var(--ds-w-semi);padding:11px 22px;border-bottom:1px solid var(--line);background:var(--ds-canvas)}
  .gt td{padding:13px 22px;border-bottom:1px solid var(--line2)}
  .gt tbody tr:hover{background:var(--ds-paper-hover)}
  /* D14 pill: soft state tint, no border, sentence-case word in ink-2 */
  .pill{font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2);padding:3px 9px;border-radius:var(--ds-r-sm);white-space:nowrap}
  .pill.gr{background:var(--ds-st-done-bg);color:var(--ds-ink-2)} .pill.am{background:var(--ds-st-route-bg);color:var(--ds-ink-2)} .pill.bl{background:var(--ds-st-site-bg);color:var(--ds-ink-2)} .pill.gy{background:var(--ds-tint);color:var(--ds-ink-2)} .pill.rd{background:var(--ds-st-late-bg);color:var(--ds-ink-2)}
  /* service contracts — PM scheduling worklist (full-width) */
  .scopetx{color:var(--muted);font-weight:500;font-size:12px}
  .nx.over{color:var(--ds-st-late-ink)} .nx.soon{color:var(--ds-st-route-ink)} .nx.ok{color:var(--ds-ink-2)}
  .srthint{font-size:var(--ds-text-sm);color:var(--muted)}
  .ctwrap{overflow:auto;border-top:1px solid var(--ds-line)}
  /* The controller swaps one active Contracts tree at a time. Key responsive
     geometry to that rendered identity so a breakpoint cannot hide/reflow the
     old tree before its scroll state is captured for the synchronous repaint. */
  .ctwrap[data-contract-layout="mobile"]{max-height:none;overflow:visible;border-top:0}
  .contracts-more{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;background:var(--ds-canvas);border-top:1px solid var(--line);color:var(--muted);font-size:var(--ds-text-sm);font-variant-numeric:tabular-nums}
  .contracts-more .send-lg{padding:8px 13px;background:var(--ds-surface);color:var(--navy);border-color:var(--ctl)}
  .ctwrap[data-contract-layout="mobile"] .contracts-more{margin:0 14px 14px;border:1px solid var(--line);border-radius:var(--ds-r-lg);flex-wrap:wrap}
  .ctab{width:100%;min-width:760px;border-collapse:collapse;font-size:var(--ds-text-base)}
  .ctab thead th{position:sticky;top:0;z-index:2;text-align:left;font-size:var(--ds-text-caps);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);font-weight:var(--ds-w-semi);background:var(--ds-canvas);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
  .ctab th.ralt{text-align:right}
  .ctab th.srt{cursor:pointer;user-select:none} .ctab th.srt:hover{color:var(--navy)} .ctab th.srt.on{color:var(--navy)}
  .ctab td{padding:11px 14px;border-bottom:1px solid var(--line2);vertical-align:middle}
  .ctab .cdue .pill{display:inline-block;margin-top:4px}
  .ctab .nowrap{white-space:nowrap} .ctab .ralt{text-align:right}
  .crate-list{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:118px}
  .crate{display:inline-flex;align-items:baseline;gap:5px;line-height:1.25;white-space:nowrap}
  .crate .l{font-size:var(--ds-text-caps);color:var(--muted)} .crate b{font-size:var(--ds-text-sm);color:var(--ink);font-weight:var(--ds-w-semi);font-variant-numeric:tabular-nums}
  .crate b.raw{color:var(--amber-tx)}
  .crate-note{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--amber-tx);background:var(--amber-bg);border-radius:var(--ds-r-full);padding:2px 7px;white-space:nowrap}
  .crate-empty{font-size:var(--ds-text-sm);color:var(--muted);white-space:nowrap}
  .crate-panel{margin:0 18px 0;padding:13px 0;border-bottom:1px solid var(--line)}
  .crate-panel-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-size:var(--ds-text-base)}.crate-panel-h b{font-weight:var(--ds-w-semi)}.crate-panel-h span{font-size:var(--ds-text-caps);color:var(--muted)}
  .crate-panel .crate-list{flex-direction:row;flex-wrap:wrap;gap:6px 16px}
  .crate-panel-note{margin-top:8px;padding:7px 9px;border-radius:var(--ds-r-md);background:var(--amber-bg);color:var(--amber-tx);font-size:var(--ds-text-sm);line-height:1.35}
  .cdocs{margin:0 18px;padding:13px 0;border-bottom:1px solid var(--line)}
  .cdocs-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px;font-size:var(--ds-text-base)}.cdocs-h b{font-weight:var(--ds-w-semi)}.cdocs-h span{font-size:var(--ds-text-caps);color:var(--muted)}
  .cdocs-list{display:flex;flex-wrap:wrap;gap:7px}
  .cdoc{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid var(--ctl);background:var(--ds-surface);border-radius:var(--ds-r-md);padding:7px 10px;color:var(--navy);font:inherit;font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);cursor:pointer;text-align:left}
  .cdoc:hover{background:var(--blue-bg);border-color:var(--blue-bd)}.cdoc .fn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdoc .maybe{font-size:var(--ds-text-caps);color:var(--amber-tx);background:var(--amber-bg);border-radius:var(--ds-r-full);padding:2px 6px;white-space:nowrap}
  .cdocs-state{font-size:var(--ds-text-sm);color:var(--muted)}
  /* ===== Quote editor (contract-ops-v2 visual language: calm, dense, restrained) ===== */
  /* TWO EQUAL panels (~50/50). LEFT = navigator + scope + context. RIGHT = line items. */
  .qe-wrap{display:flex;gap:22px;align-items:flex-start;width:100%;min-width:0}
  /* LEFT = navigator + quote context. RIGHT = active center's scope + line items +
     a per-center summary card. Both columns size to their own content; the right
     panel ends at its summary card (no trailing empty void below it — review #A). */
  /* finding 6: favor the working table ~58/42 so the 6 line-item columns breathe;
     the reference rail (scope + context) takes the narrower share and sizes to its
     own content. */
  /* point 1A: the LEFT context column STAYS visible while the RIGHT line items
     scroll. It's sticky to the top of the .scroll viewport, parked just below the
     pinned switcher band; align-self:flex-start keeps it hugging its own content (no
     stretch). qeFitStickyLeft() sets max-height live to the scroll viewport so a tall
     left column scrolls inside itself instead of pushing the page — and there is no
     trailing empty void beside the still-scrolling line items. */
  .qe-left{flex:42 1 0;min-width:300px;display:flex;flex-direction:column;gap:16px;align-self:flex-start;padding-right:2px;position:sticky;top:48px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin}
  .qe-main{flex:58 1 0;min-width:0;display:flex;flex-direction:column}
  .qe-leftcard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(16,32,51,.04)}
  /* the context rail no longer floats as a sidebar — it's a card in the LEFT panel */
  .qe-rail{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:0 1px 2px rgba(16,32,51,.04)}
  .qe-rsec{border-bottom:1px solid var(--line2);padding-bottom:14px} .qe-rsec:last-child{border-bottom:0;padding-bottom:0}
  .qe-rl{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 9px;display:flex;align-items:center;gap:6px}
  .qe-prose{font-size:13px;line-height:1.5;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .qe-prose b{color:var(--navy)}
  .qe-prov{font-size:11px;color:var(--muted);margin-top:6px;font-style:italic}
  /* asset report: a modest inline toggle that reveals the report detail in a quiet
     panel — honest, not a card dressed as a navigable link (Point 6). */
  .qe-rsec-inline{padding-bottom:14px;border-bottom:1px solid var(--line2)}
  .qe-assettog{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:13px;font-weight:600;color:var(--ink);background:transparent;border:0;border-radius:8px;padding:4px 2px;cursor:pointer}
  .qe-assettog svg{color:var(--blue-tx);flex:0 0 auto}
  .qe-assettog .lb{color:var(--navy);font-weight:700}
  .qe-assettog:hover .lb{text-decoration:underline}
  .qe-assettog .sub{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
  .qe-assetcar{margin-left:auto;font-size:11px;color:var(--faint)}
  .qe-assetdetail{margin-top:9px;border:1px solid var(--line2);border-radius:9px;background:var(--canvas);padding:9px 11px;font-size:12px}
  .qe-arow{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--muted)}
  .qe-arow b{color:var(--ink);font-weight:600;text-align:right}
  .qe-arow .l{flex:0 0 auto}
  .qe-asset{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px 12px;font-size:12px;color:var(--ink)}
  .qe-asset .am{font-weight:700;color:var(--navy);margin-bottom:3px}
  .qe-asset .ar{display:flex;justify-content:space-between;gap:8px;padding:2px 0;color:var(--muted)}
  .qe-asset .ar b{color:var(--ink);font-weight:600}
  .qe-phtoggle{display:inline-flex;border:1px solid var(--ctl);border-radius:7px;overflow:hidden;margin-bottom:8px}
  .qe-phtoggle button{border:0;background:#fff;color:var(--muted);font-size:11px;font-weight:700;padding:4px 11px;cursor:pointer}
  .qe-phtoggle button.on{background:var(--navy);color:#fff}
  .qe-phgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  /* tasteful thumbnail surfaces — soft photographic gradients + a muted caption +
     a gentle hover-zoom, so they read as real site thumbnails not empty boxes (#C). */
  .qe-ph{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background:#eef1f6;border:1px solid var(--line);cursor:pointer;box-shadow:inset 0 1px 3px rgba(16,32,51,.10);transition:border-color .14s,transform .14s,box-shadow .14s}
  .qe-ph:hover{border-color:var(--blue-bd);transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,32,51,.12)}
  .qe-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
  .qe-ph:hover img{transform:scale(1.06)}
  .qe-ph .ico{color:#9aa6ba}
  .qe-phcap{position:absolute;left:0;right:0;bottom:0;padding:9px 8px 5px;font-size:10.5px;font-weight:600;color:#fff;letter-spacing:.1px;text-shadow:0 1px 2px rgba(0,0,0,.45);background:linear-gradient(180deg,rgba(15,25,45,0),rgba(15,25,45,.55));pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qe-ph-demo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 18%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}
  .qe-ph-demo.g0{background:linear-gradient(145deg,#5b7193,#33455f)}
  .qe-ph-demo.g1{background:linear-gradient(145deg,#7d8aa0,#4a566c)}
  .qe-ph-demo.g2{background:linear-gradient(145deg,#9a7d63,#5e4a39)}
  .qe-ph-demo.g3{background:linear-gradient(145deg,#6f8a86,#41524f)}
  .qe-ph-demo.g4{background:linear-gradient(145deg,#83889a,#4d5366)}
  .qe-ph-demo.g5{background:linear-gradient(145deg,#6d7e96,#3c4a60)}
  .qe-phempty{display:flex;align-items:center;gap:9px;padding:14px 14px;border:1px dashed var(--ctl);border-radius:10px;background:var(--canvas);color:var(--muted);font-size:12.5px}
  .qe-phempty svg{color:#9aa6ba;flex:0 0 auto}
  .qe-phempty.qe-pherr{border-color:#e7b6ac;background:#fdf3f1;color:#b42318}
  .qe-phempty.qe-pherr svg{color:#d08c80}
  .qe-phmore{font-size:12px;font-weight:600;color:var(--blue-tx);cursor:pointer;margin-top:9px;display:inline-block}
  .qe-phmore:hover{text-decoration:underline}
  .qe-idx{display:flex;flex-wrap:wrap;gap:6px}
  .qe-idx a{font-size:12px;color:var(--blue-tx);text-decoration:none;border:1px solid var(--blue-bd);background:var(--blue-bg);border-radius:6px;padding:2px 8px;cursor:pointer}
  /* prose-money + concern fact: one quiet, ignorable tier — never red, never near Send */
  .qe-fact{display:flex;gap:7px;align-items:flex-start;background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;color:var(--blue-tx);margin-top:8px}
  .qe-fact .fa{cursor:pointer;text-decoration:underline;white-space:nowrap}
  /* COMPACT cost-center SWITCHER BAR (Point 2) — one pinned ~44px row, modeled on
     ServiceTitan estimate-section nav + the QuickBooks/Xero entity combobox. Left:
     prev/next stepper + "Building N of M". Right of that: the active center as a
     clickable combobox trigger that opens a capped-height popover. NOT a 50% list. */
  /* finding 2 / point 2: a true full-bleed OPAQUE sticky band so scrolled line-item
     rows never bleed through behind it OR beside it in the scroll gutters. It spans
     the full scroll width by cancelling the .scroll padding with negative margins,
     paints the page surface (var(--tint-50), the same colour as .scroll), and carries
     a clean bottom hairline + subtle shadow. No floating-card radius — it reads as a
     solid pinned band, not a card. .scroll's scroll-padding-top (set below) keeps any
     scrolled heading from rendering under it. */
  .qe-switch{position:sticky;top:-18px;z-index:30;display:block;padding:11px 20px;margin:-18px -20px 16px;background:var(--tint-50);border-bottom:1px solid var(--line);box-shadow:0 4px 12px -4px rgba(16,32,51,.16)}
  .qe-swlbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);flex:0 0 auto;margin-right:2px}
  /* point 3: the ACTIVE center's live summary, pinned to the band's top-right corner
     (line-count · margin · subtotal — the ONE per-center total, removed from the footer).
     Absolute so it never wraps onto its own row with the building tabs; the strip below
     reserves padding-right so wrapping tabs never collide with it. */
  .qe-swsum{flex:0 0 auto;margin-left:auto;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:6px}
  .qe-swsum-l{font-size:12px;color:var(--muted)}
  .qe-swsum-sep{font-size:12px;color:var(--line)}
  .qe-swsum-m{font-size:12px;color:var(--muted)}
  .qe-swsum-t{font-size:15px;font-weight:800;color:var(--navy)}
  /* On narrow frames the whole right summary collapses so the TAB STRIP gets the room
     (each tab already carries its own subtotal, so this is non-lossy). */
  @media(max-width:760px){.qe-swsum{display:none}}
  /* point 2: keep any scrolled-to heading clear of the sticky band */
  .qd-editor .scroll{scroll-padding-top:64px}
  .qe-swarrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;border:1px solid var(--ctl);background:#fff;border-radius:8px;color:var(--navy);cursor:pointer;transition:background .12s,border-color .12s}
  /* the single-line strip scrolls; arrows appear only on overflow (qeSyncSwitcherArrows). */
  .qe-swarrow:hover:not([disabled]){background:var(--blue-bg);border-color:var(--blue-bd)}
  .qe-swarrow:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  /* arrows greyed when there is no overflow to scroll in that direction. */
  .qe-swarrow[disabled]{color:#c2cad8;background:#f7f9fc;cursor:default;border-color:var(--line2)}
  /* TAB STRIP (spec 2): the building tabs live on ONE horizontally-scrollable line.
     It takes the remaining width and clips overflow; the flanking arrows pan it. The
     scrollbar is hidden (the arrows + drag are the affordance). */
  /* tabs WRAP to a second line when they don't fit — never a horizontal scroll, and
     names are never truncated. */
  /* outer row: wrapping tab-cell on the left, fixed summary cell on the right. The tabs
     wrap only inside .qe-swtabwrap, so they can never collide with the summary. */
  .qe-swrow{display:flex;align-items:center;gap:10px}
  .qe-swstrip{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;-ms-overflow-style:none;scroll-padding-inline:2px}
  .qe-swadd{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--ctl);background:#fff;border-radius:8px;padding:4px 12px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;transition:background .12s,border-color .12s}
  .qe-swadd:hover{background:var(--blue-bg);border-color:var(--blue-bd)}
  .qe-swadd svg{opacity:.85;flex:0 0 auto}
  .qe-swstrip::-webkit-scrollbar{display:none;height:0}
  /* each tab — building name + its subtotal, content-sized, never wrapping. The
     active tab reads as selected (navy tint + border). */
  .qe-swtab{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;border:1px solid var(--ctl);background:#fff;border-radius:8px;padding:4px 11px;cursor:pointer;font:inherit;white-space:nowrap;transition:background .12s,border-color .12s,box-shadow .12s}
  .qe-swtab:hover{background:var(--canvas);border-color:var(--blue-bd)}
  .qe-swtab:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .qe-swtab.on{background:var(--blue-bg);border-color:var(--navy);box-shadow:0 0 0 2px var(--blue-bg)}
  .qe-swtdot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--green2)}
  .qe-swtdot.q{background:var(--line)}
  .qe-swtname{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
  .qe-swtab.on .qe-swtname{color:var(--navy)}
  .qe-swtsub{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:8px;border-left:1px solid var(--line2)}
  .qe-swtab.on .qe-swtsub{color:var(--navy)}
  /* total card + header */
  /* INLINE editor status — Draft dot + save chip + grand total live ON the quote
     title line (Points 1 & 5). No standalone header band. */
  /* Point 2: the ONE status = the real Simpro stage, mirrored as a calm pill. */
  .qe-stagepill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--navy);background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:999px;padding:3px 10px;white-space:nowrap}
  .qe-stagepill .d{width:6px;height:6px;border-radius:50%;background:var(--blue-tx);flex:0 0 auto}
  /* Point 8: confidential internal margins — small, de-emphasized, operator-only. */
  .qe-margin{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
  .qe-draft{flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap}
  .qe-draft b{color:var(--ink);font-weight:600}
  /* Point 6: "drafted by AI" is an honest quiet info marker, NOT a link-with-chevron. */
  .qe-hdrerr{margin:0 24px 13px;padding:9px 13px;border:1px solid #e7b6ac;background:#fdf3f1;border-radius:9px;font-size:12px;color:var(--red)}
  .qe-whisper{font-size:11px;color:var(--muted);align-self:center;margin-right:auto;font-style:italic}
  /* RIGHT-panel center section — line items live here; the header is rendered above */
  /* the active center's scope, mounted at the TOP of the RIGHT column above the
     line items (review #A). It carries the same card chrome as the line-item table
     so the two read as one continuous right-panel surface. */
  /* scope card now stands alone in the LEFT column — full borders + radius */
  .qe-scopecard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(16,32,51,.04);flex:0 0 auto}
  /* line-item card opens the RIGHT column directly under the per-center header */
  /* point 1B: overflow VISIBLE (was hidden) so the sticky column-header row can pin
     to the .scroll viewport instead of being clipped to this card. The rounded top
     corners are carried by the .qe-add bar itself. */
  .qe-cc{border:1px solid var(--line);border-radius:14px 14px 0 0;border-bottom:0;background:#fff;margin:0;overflow:visible;box-shadow:0 1px 2px rgba(16,32,51,.04);flex:0 0 auto;min-height:0;display:flex;flex-direction:column}
  .qe-cc .qe-add{border-radius:14px 14px 0 0}
  .qe-ccnote{font-size:12px;color:var(--muted);padding:10px 16px 0;font-weight:600}
  /* add bar pinned to the top of the line-item card; bands sit beneath it. The panel
     grows to its content (no internal scroll, no fixed-height void) so the right
     column terminates at the subtotal footer (review #A). */
  .qe-ccbody{padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .qe-ccbody .qe-add{flex:0 0 auto;position:relative;z-index:5}
  .qe-ccbody .qe-ccact{flex:0 0 auto}
  .qe-ccscroll{flex:1 1 auto;min-height:0}
  /* running per-center subtotal anchored to the bottom of the right panel so it
     reads as a deliberately terminated column (review #3) */
  /* A: per-center summary card — the deliberate terminal element of the right panel */
  .qe-mainfoot{flex:0 0 auto;display:flex;flex-direction:column;gap:11px;padding:14px 16px 15px;background:linear-gradient(180deg,#fbfcfe,#f6f9fe);border:1px solid var(--line);border-radius:0 0 14px 14px;box-shadow:0 1px 2px rgba(16,32,51,.04)}
  .qe-smgrid{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
  .qe-smcell{flex:1 1 0;min-width:74px;display:flex;flex-direction:column;gap:3px;padding:7px 11px;border-radius:9px;background:#fff;border:1px solid var(--line)}
  .qe-smcell .l{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:6px}
  .qe-smcell .l::before{content:"";width:8px;height:8px;border-radius:2px;flex:0 0 auto}
  .qe-smcell.p .l::before{background:#7d93b8} .qe-smcell.l .l::before{background:#caa46b} .qe-smcell.f .l::before{background:#9fb89a}
  .qe-smcell .v{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .qe-smcell.m{flex:1 1 100%;flex-direction:row;align-items:center;background:transparent;border:0;padding:0 2px}
  .qe-smcell.m .l{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);font-size:12px}
  .qe-smcell.m .l::before{display:none}
  .qe-smtot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:11px;border-top:1px solid var(--line)}
  .qe-smtot .l{font-size:13px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qe-smtot .v{font-size:17px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;flex:0 0 auto}
  .qe-cc.col .qe-ccbody{display:none}
  .qe-empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.5;border-top:1px solid var(--line2)}
  /* RIGHT-panel header above the line-item card: active center name + subtotal */
  .qe-maincap{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:0 2px 9px}
  .qe-maincap-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .qe-capstats{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap;font-variant-numeric:tabular-nums}
  .qe-capn,.qe-capm{font-size:12px;color:var(--muted)}
  .qe-capdot{font-size:12px;color:var(--line)}
  .qe-capt{font-size:15px;font-weight:800;color:var(--navy)}
  /* LEFT-panel scope card — "what the customer sees" */
  .qe-scopewrap{padding:0}
  /* per-center asset report inside the scope card (findings 3/8) — a quiet top-ruled
     block carrying the honest inline toggle. */
  .qe-scopeassetwrap{margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
  .qe-scopeasset{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--navy);margin-top:11px;padding-top:11px;border-top:1px solid var(--line2)}
  .qe-scopeasset svg{color:var(--blue-tx);flex:0 0 auto}
  .qe-scopeasset b{font-weight:700}
  .qe-scopeasset .sn{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
  /* decoder band */
  .qe-band{padding:0}
  /* D: right-pad the band header by the action-gutter width so the band subtotal's
     right edge lands on the same x as each row's Total value (one shared edge). */
  .qe-bandhd{display:flex;align-items:center;gap:9px;padding:9px 14px;padding-right:50px;background:#fbfcfe;border-bottom:1px solid var(--line2);border-top:1px solid var(--line2);cursor:pointer;transition:background .1s}
  .qe-bandhd:hover{background:#f4f7fb}
  .qe-bandhd .bv{color:var(--faint);display:inline-flex;align-items:center;justify-content:center;width:14px;transition:transform .15s}
  .qe-bandhd .bv svg{display:block}
  .qe-bandhd.fold .bv{transform:rotate(-90deg)}
  .qe-bandhd .bn{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
  .qe-bandhd .bc{font-size:12px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
  .qe-band.fold .qe-tbl{display:none}
  /* Point 10: give the fixed-column table a min-width and let the band area scroll
     horizontally so a narrow (~1100px laptop) column never crushes cells / wraps
     "Raypak" -> "Raypa/k". Below 980px the stacked layout (media query) takes over. */
  /* point 1B: NOT a vertical scroll container — an overflow-x scroll box would clip
     the sticky thead to itself and break the pinned column header. The table's fixed
     min-width fits the wide right column at desktop; the <=980px media query swaps to
     the stacked card layout where this never applies. */
  .qe-ccscroll{overflow:visible}
  .qe-tbl{width:100%;min-width:600px;border-collapse:collapse;font-size:13px;table-layout:fixed}
  /* POLISH: cap the Description column at a fixed width and let a flexible spacer
     column (c-gap) absorb the slack on the RIGHT of the description text, so short rows
     read description -> numbers as one tight unit instead of a half-empty row. The
     spacer keeps every band + the colhead + the footing rows aligned (same colgroup). */
  .qe-tbl col.c-desc{width:330px} .qe-tbl col.c-gap{width:auto}
  .qe-tbl col.c-qty{width:56px} .qe-tbl col.c-cost{width:98px} .qe-tbl col.c-mk{width:82px}
  /* D: fixed action gutter to the right of Total; the Total value right-aligns within
     its own column and the delete glyph centers in the gutter at a steady x. */
  .qe-tbl col.c-sell{width:104px} .qe-tbl col.c-tot{width:96px} .qe-tbl col.c-del{width:40px}
  .qe-tbl td.c-del,.qe-tbl th.c-del{text-align:center;padding-left:0;padding-right:8px}
  .qe-tbl td.qe-mut{color:var(--muted);font-variant-numeric:tabular-nums}
  .qe-tbl .qe-sel{max-width:100%}
  .qe-tbl thead th{text-align:left;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:500;padding:7px 10px 8px;border-bottom:1px solid var(--line);background:#fff;white-space:nowrap}
  /* point 1B: the ONE persistent line-item column-header bar. It STICKS to the top of
     the .scroll viewport (parked just below the pinned switcher band — its precise top
     is set live by qeFitStickyLeft) so the operator always sees Qty/Cost/Markup/Sell/
     Total while the rows scroll. Solid white backing + a hairline so rows never bleed
     through; z above the rows, below the switcher. */
  .qe-colhead{position:sticky;top:48px;z-index:9;background:#fff}
  .qe-colhead .qe-colheadtbl{margin:0;border-bottom:1px solid var(--line)}
  .qe-colhead .qe-colheadtbl thead th{background:#fff;padding:8px 10px;box-shadow:0 1px 0 var(--line)}
  .qe-tbl th.r,.qe-tbl td.r{text-align:right}
  .qe-tbl td{padding:5px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
  /* cells that host an editable numeric input get tighter side padding so the field
     itself owns the column width and the value never clips */
  .qe-tbl td.r:has(.qe-in.num){padding-left:4px;padding-right:6px}
  .qe-tbl tbody tr:hover{background:#f6f8fb}
  .qe-tbl tbody tr.foc{background:#eef3fb}
  .qe-desc{display:flex;flex-direction:column;gap:1px;min-width:0}
  .qe-desc .dt{color:var(--ink);word-break:break-word}
  .qe-desc .dt.soup{white-space:normal;word-break:break-all}
  .qe-desc .pn{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .qe-chip{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.2px;text-transform:none;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle}
  .qe-chip.cat{background:var(--gray-bg);color:var(--gray-tx)} .qe-chip.one{background:var(--purple-bg);color:var(--purple-tx)}
  .qe-chip.np{background:var(--amber-bg);color:var(--amber-tx)}
  .qe-eqfact{font-size:11px;color:var(--muted);margin-top:1px}
  .qe-in{border:1px solid var(--ctl);border-radius:6px;padding:4px 7px;font:inherit;font-size:13px;background:#fff;box-sizing:border-box;width:100%}
  /* One consistent editability signal for in-row numerics: a quiet field that reads
     as editable on hover (subtle fill) and on focus (clear ring), right-aligned and
     wide enough that the longest currency/percent value never clips. */
  .qe-in.num{text-align:right;width:100%;max-width:none;font-variant-numeric:tabular-nums;border:1px solid var(--line);background:#fff;padding:5px 11px 5px 8px;border-radius:7px;color:var(--ink);transition:background .1s,border-color .1s,box-shadow .1s}
  .qe-tbl tbody tr:hover .qe-in.num{border-color:var(--line);background:#fff}
  .qe-in.num:hover{border-color:var(--ctl);background:#fff}
  .qe-in.num:focus{border-color:var(--blue-bd);background:#fff;box-shadow:0 0 0 2px var(--blue-bg)}
  /* deliberate "markup not applicable" marker for $0-cost lines — a quiet em-dash, not
     an editable field and not a blank cell. Right-aligned to sit in the numeric column. */
  .qe-na{display:inline-block;width:100%;text-align:right;padding:5px 11px 5px 8px;color:var(--faint);font-variant-numeric:tabular-nums;cursor:default;-webkit-user-select:none;user-select:none}
  .qe-in:focus{outline:0;border-color:var(--blue-bd);box-shadow:0 0 0 2px var(--blue-bg)}
  .qe-in.locked{background:#f3f5f9;color:var(--muted)}
  .qe-desc-in{width:auto;min-width:200px;max-width:100%;font-size:13px}
  .qe-tot{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  /* P0: per-center footing rows (Reserve / Adjustment / Building subtotal). Same
     fixed colgroup as the bands so the dollar right-aligns under the Total column. */
  .qe-adjtbl{margin:0}
  .qe-adjtbl td{border-bottom:0;padding:6px 10px}
  .qe-adjrow .qe-adjlbl{font-size:12.5px;color:var(--muted);font-weight:600}
  .qe-adjrow .qe-adjamt{font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .qe-adjtbl.res td,.qe-adjtbl.adj td{background:#fbfcfe}
  .qe-adjtbl.res .qe-adjlbl,.qe-adjtbl.adj .qe-adjlbl{color:var(--navy)}
  .qe-adjtbl.sub{border-top:2px solid var(--line)}
  .qe-adjtbl.sub td{padding-top:9px;padding-bottom:3px}
  .qe-adjtbl.sub .qe-adjlbl{font-weight:700;color:var(--ink);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
  .qe-adjtbl.sub .qe-adjamt{font-weight:800;color:var(--navy);font-size:14px}
  .qe-tick{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber-bd);margin-left:5px;vertical-align:middle}
  .qe-pop{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
  .qe-pop .pl{color:var(--faint);margin-right:3px}
  /* D: delete glyph is tertiary/near-invisible until the row is hovered, so it stops
     crowding the Total number; it lives centered in the fixed action gutter. */
  .qe-del{border:0;background:transparent;color:#c2cad8;cursor:pointer;padding:4px;border-radius:6px;line-height:0;opacity:0;transition:opacity .12s,background .12s,color .12s}
  .qe-tbl tbody tr:hover .qe-del{opacity:1;color:var(--muted)}
  .qe-del:focus-visible{opacity:1;color:var(--muted)}
  .qe-del:hover{background:#fbe9e6;color:#9a2f1c}
  .qe-rowmk{cursor:pointer;color:var(--blue-tx);font-size:11px;text-decoration:underline}
  /* concern glyph — single passive inline marker, never red, never counted */
  .qe-cn{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1px solid var(--blue-bd);background:var(--blue-bg);color:var(--blue-tx);font-size:11px;font-weight:800;cursor:pointer;margin-left:5px;vertical-align:middle}
  .qe-cnx{font-size:11px;color:var(--blue-tx);background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:7px;padding:6px 9px;margin:5px 12px;line-height:1.45}
  .qe-cnx .fa{text-decoration:underline;cursor:pointer;margin-left:6px;white-space:nowrap}
  /* consistency / reconcile strip — neutral, navigation-only, never strikes a total */
  .qe-strip{font-size:12px;color:var(--muted);padding:7px 15px;border-top:1px solid var(--line2);background:#fafbfd;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .qe-strip .ok{color:var(--green2)}
  .qe-strip .jump{color:var(--blue-tx);cursor:pointer;text-decoration:underline}
  /* add-parts control — the obvious, inviting way to add a line (Point 4). Sits at
     the TOP of the line-item card: a clear "Add to this center" label, a prominent
     catalog search with a leading icon, and three manual-add buttons. */
  .qe-add{padding:15px 16px 16px;background:linear-gradient(180deg,#f6f9ff,#fbfcfe);border-bottom:1px solid var(--line2)}
  .qe-addtitle{margin:0 0 10px}
  .qe-addlbl{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
  .qe-addlbl svg{color:var(--blue-tx)}
  .qe-addrow{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
  .qe-addrow .qe-srch{flex:1 1 260px;min-width:220px}
  .qe-addrow .qe-addbtn{flex:0 0 auto}
  /* #1 two-tier header (design-review redesign) */
  .dhead{display:block;width:100%;border-bottom:1px solid var(--line);background:#fff}
  .dh-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:20px;padding:12px 24px 13px 24px}
  .dh-idstack{display:flex;flex-direction:column;gap:3px;min-width:0}
  .dh-eyebrow{display:flex;align-items:center;gap:8px;min-width:0}
  .dh-crumb{display:inline-flex;align-items:center;gap:3px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:0;white-space:nowrap;flex:0 0 auto}
  .dh-crumb svg{margin-left:-2px}
  .dh-crumb:hover{color:var(--navy)}
  .dh-esep{flex:0 0 auto;width:1px;height:10px;background:var(--line)}
  .dh-qnum{font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.02em;flex:0 0 auto}
  .dh-estat{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;flex:0 0 auto}
  .dh-estat .d{width:7px;height:7px}
  .dh-name{margin:0;font-size:19px;font-weight:700;line-height:1.22;color:var(--ink);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .dh-name-empty{color:var(--faint);font-weight:600}
  .dh-subline{display:flex;align-items:center;gap:8px;min-width:0}
  .dh-osite{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
  .dh-ocust{font-size:13px;font-weight:500;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
  .dh-ocreated{font-size:12.5px;font-weight:500;color:var(--faint);white-space:nowrap;flex:0 0 auto}
  .dh-osep{flex:0 0 auto;width:3px;height:3px;border-radius:50%;background:var(--ctl)}
  .dh-cells{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto}
  .dh-save{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .dh-save .qe-savebtn,.dh-save .qe-savebtn-clean{all:unset;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:var(--faint);cursor:pointer}
  .dh-save .qe-savebtn:hover,.dh-save .qe-savebtn-clean:hover{color:var(--navy)}
  /* #4 one-off purple dot */
  .qe-oodot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7c3aed;margin-right:9px;flex:0 0 auto;vertical-align:middle}
  /* #2 clean (no-edits) save button */
  .qe-savebtn-clean{background:#eef1f6;color:var(--muted);cursor:default}
  .qe-savebtn-clean:hover{background:#eef1f6}
  /* #5 scope rich-text editor */
  .qe-scopebar{border:1px solid var(--ctl);border-bottom:0;border-radius:9px 9px 0 0;background:#f8fafc;margin:0;display:flex;align-items:center;gap:2px;padding:4px 6px;flex-wrap:wrap}
  .qe-scoperte{min-height:90px;max-height:280px;border:1px solid var(--ctl);border-top:0;border-radius:0 0 9px 9px;padding:10px 12px;font-size:13px;line-height:1.55;color:var(--ink);background:var(--canvas);overflow:auto;outline:none}
  .qe-scoperte:focus{border-color:var(--blue-bd);box-shadow:0 0 0 3px var(--blue-bg);background:#fff}
  .qe-scoperte:empty:before{content:attr(data-ph);color:#9aa3b2}
  .qe-scoperte p{margin:0 0 8px}
  .qe-scoperte ul{margin:0 0 8px;padding-left:20px}
  .qe-srch{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center}
  .qe-srchic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--blue-tx);pointer-events:none}
  .qe-srchin{padding-left:36px !important;height:42px;border-radius:10px !important;font-size:13px !important;background:#fff !important;border-color:var(--blue-bd) !important;box-shadow:0 1px 2px rgba(16,32,51,.05)}
  .qe-srchin::placeholder{color:#8895ab}
  .qe-srchin:focus{border-color:var(--navy) !important;box-shadow:0 0 0 3px var(--blue-bg) !important}
  .qe-addalt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
  .qe-addor{font-size:12px;color:var(--muted);margin-right:2px}
  .qe-addbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ctl);background:#fff;color:var(--navy);border-radius:9px;padding:8px 13px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
  .qe-addbtn .pl{font-size:15px;font-weight:700;line-height:0;color:var(--blue-tx)}
  .qe-addbtn:hover{background:var(--blue-bg);border-color:var(--blue-bd);box-shadow:0 1px 3px rgba(16,35,63,.07)}
  .qe-addbtn:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .qe-drop{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--ctl);border-radius:10px;box-shadow:0 12px 32px rgba(16,35,63,.16);max-height:300px;overflow:auto;margin-top:6px}
  .qe-opt{display:flex;gap:10px;align-items:baseline;padding:8px 11px;cursor:pointer;border-bottom:1px solid var(--line2)}
  .qe-opt:hover{background:#eef3fb} .qe-opt .pn{font-weight:700;color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums} .qe-opt .nm{color:#33415c;font-size:12px;flex:1;min-width:0} .qe-opt .rk{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--green2)} .qe-opt .pr{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
  /* alternate / option bracket */
  .qe-altwrap{border:1px solid var(--purple-bd);border-radius:12px;background:#fbfaff;margin:0 0 14px;padding:10px 14px}
  .qe-althd{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--purple-tx);margin-bottom:8px}
  .qe-altsel{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);cursor:pointer;padding:3px 0}
  .qe-altsel .rd{width:14px;height:14px;flex:0 0 auto}
  /* lock heads-up — calm single line, informs never gates */
  .qe-lock{display:flex;gap:10px;align-items:center;background:var(--amber-bg);color:var(--amber-tx);border:1px solid var(--amber-bd);border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:13px}
  .qe-load,.qe-fail{padding:22px 16px;text-align:center;color:var(--muted);font-size:13px}
  .qe-section-lbl{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);padding:8px 15px 4px}
  .qe-ccact{display:flex;align-items:center;gap:9px;padding:13px 16px 14px;margin-top:16px;border-top:1px solid var(--line);background:#fff}
  .qe-ccact-lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-right:3px}
  /* findings 9/13: the two sibling actions sit together as one group, pushed right. */
  .qe-ccact-grp{margin-left:auto;display:flex;align-items:center;gap:8px}
  .qe-ccact button{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ctl);background:#fff;color:var(--navy);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
  .qe-ccact button svg{color:var(--muted)}
  .qe-ccact button:hover{background:#f4f6f9;border-color:var(--blue-bd)}
  /* destructive Delete: persistent danger tint + red trash icon, clearly distinct
     from the benign Duplicate beside it (no fencing — just an honest affordance). */
  .qe-ccact button.dng{color:var(--red);border-color:#e7b6ac;background:#fdf6f4}
  .qe-ccact button.dng svg{color:var(--red)}
  .qe-ccact button.dng:hover{color:#fff;background:var(--red);border-color:var(--red)}
  .qe-ccact button.dng:hover svg{color:#fff}
  .qe-scope{padding:15px 16px 16px}
  .qe-scopel{display:block;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;margin:0 0 8px}
  .qe-scopelh{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);font-size:12px}
  /* I: no native OS resize grip; the field auto-grows on input via qeAutoGrowTextareas. */
  .qe-scopein{width:100%;box-sizing:border-box;border:1px solid var(--ctl);border-radius:9px;padding:9px 11px;font:inherit;font-size:13px;line-height:1.55;color:var(--ink);background:var(--canvas);resize:none;overflow:hidden;min-height:46px}
  .qe-scopein:focus{outline:0;border-color:var(--blue-bd);box-shadow:0 0 0 3px var(--blue-bg);background:#fff}
  .qe-sel{border:1px solid var(--ctl);border-radius:6px;padding:4px 7px;font:inherit;font-size:13px;background:#fff;color:var(--ink);max-width:100%;cursor:pointer}
  .qe-sel:focus{outline:0;border-color:var(--blue-bd);box-shadow:0 0 0 2px var(--blue-bg)}
  .qe-rsub{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);font-weight:800;margin:9px 0 4px}
  /* notes textarea caps its height and scrolls — long notes won't blow out the rail */
  .qe-railin{width:100%;box-sizing:border-box;border:1px solid var(--ctl);border-radius:7px;padding:7px 9px;font:inherit;font-size:12px;line-height:1.5;color:var(--ink);background:#fff;resize:none;max-height:150px;overflow:auto}
  .qe-railin:focus{outline:0;border-color:var(--blue-bd);box-shadow:0 0 0 2px var(--blue-bg)}
  /* read-only technician reference caps + scrolls so a long note collapses cleanly */
  .qe-refnote{margin-top:10px;padding:9px 11px;background:#f4f6f9;border:1px solid var(--line2);border-radius:7px;font-size:12px;line-height:1.5;color:var(--muted);max-height:150px;overflow:auto}
  .qe-rlhint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
  .qe-railtop{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600;padding-bottom:12px;border-bottom:1px solid var(--line2);display:flex;align-items:baseline;gap:7px}
  /* Point 9 / review findings 3 & 12: the send footer spans the FULL editor width
     (matching the line-item editor's right edge) — label-left, primary action
     right-aligned to the editor's right edge. No orphaned center button, no empty
     half. The summary block on the left stays compact so the bar reads balanced. */
  /* Point 9 / findings: constrain the send bar to a sensible max width and center it
     so it never reads as a ~1000px empty band; the "Sending as" picker now sits next
     to Prepare (findings 7/14). */
  .qd-sendrow{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:11px 26px;max-width:100%;margin:0;width:100%;box-sizing:border-box}
  .qd-summ{min-width:0}
  .qd-sumto{font-size:13px;font-weight:600;color:var(--ink)}
  .qd-summeta{font-size:12px;color:var(--muted);margin-top:2px}
  /* Incl-tax echo near Send — the customer PDF figure, the operator commits to it. */
  .qd-sumtot{margin-top:4px}
  .qd-sendecho{display:flex;align-items:center;flex:0 0 auto}
  .qd-sendtot{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
  .qd-sendtot b{font-weight:700;color:var(--navy)}
  .qd-sendtotex{color:var(--muted);font-weight:500}
  .qd-sendact{display:flex;align-items:center;gap:14px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
  /* ---- bottom cost bar: 4 clean sections + Prepare Email ---- */
  .qd-costbar{flex:0 0 auto;background:#fbfcfe}
  .qd-costrow{display:flex;align-items:stretch;gap:0;padding:13px 26px;flex-wrap:wrap;row-gap:12px}
  .qd-cseg{display:flex;flex-direction:column;gap:7px;justify-content:center;padding:3px 24px;border-right:1px solid var(--line);min-height:48px}
  .qd-costrow>.qd-cseg:first-child{padding-left:0}
  .qd-cslbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;line-height:1}
  .qd-csval{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
  .qd-cseg-total{padding-right:30px;margin-left:auto;border-right:none}
  .qd-cseg-total .qd-csval.qd-cstotal{font-size:22px;color:var(--navy)}
  .qd-cstaxamt{font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
  .qd-taxwrap{display:flex;align-items:center;gap:11px}
  .qd-csact{margin-left:0;display:flex;align-items:center;padding-left:28px;border-left:1px solid var(--line)}
  .qd-cseg-resv .qe-reserve{margin:0}
  .qd-cseg-tax .qe-tax{margin:0}
  .qd-cseg-tax .qe-taxlbl{display:none}
  .qd-sendas{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
  .qd-primary{flex:0 0 auto;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer}
  .qd-primary:hover{background:#1f3358}
  .qe-reflbl{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);font-weight:800;margin-bottom:4px}
  .qe-undo{font-size:12px;color:var(--blue-tx);cursor:pointer;text-decoration:underline;align-self:center}
  /* finding 1: when the two columns collapse, the LINE-ITEM EDITOR comes FIRST (it
     is the work surface) and the reference rail demotes BELOW it. order: flips the
     visual order without changing the DOM. No pinned footer over a half-height well —
     the column flows naturally so there's no dead void. */
  @media(max-width:1100px){
    .qe-wrap{flex-direction:column;gap:16px}
    .qe-left,.qe-main{width:100%;flex:1 1 auto;min-width:0}
    .qe-main{order:1;position:static;max-height:none}
    .qe-left{order:2}
    .qe-cc{flex:0 0 auto}.qe-ccscroll{overflow:visible}
  }
  @media(max-width:980px){.qe-rsec{border-bottom:0}.qe-ccscroll{overflow-x:visible}.qe-tbl{min-width:0}.qe-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.qe-tbl,.qe-tbl tbody,.qe-tbl tr,.qe-tbl td{display:block;width:auto}.qe-tbl td{border-bottom:0;padding:3px 12px}.qe-tbl tr{border-bottom:1px solid var(--line2);padding:7px 0}.qe-in.num{max-width:none;width:auto}}
  tr.grp td{background:var(--ds-tint);padding:7px 14px;border-bottom:1px solid var(--line)}
  tr.grp .gname{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
  tr.grp.gover .gname{color:var(--ds-st-late-ink)} tr.grp.gsoon .gname{color:var(--ds-st-route-ink)}
  tr.grp .gn{margin-left:8px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--muted)}
  tr.ctr{cursor:pointer} tr.ctr:hover{background:var(--ds-paper-hover)} tr.ctr.open{background:var(--ds-st-site-bg)}
  tr.ctr:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
  .cdue b.nx{display:block;font-size:var(--ds-text-base)} .cdue .rel{font-size:var(--ds-text-sm)}
  .cdue .rel.over{color:var(--ds-st-late-ink);font-weight:var(--ds-w-semi)} .cdue .rel.soon{color:var(--ds-st-route-ink)} .cdue .rel.ok{color:var(--muted)}
  .ceq b{font-weight:var(--ds-w-semi)} .ceq .cnt{color:var(--muted);font-weight:600}
  .flagdot{color:var(--ds-st-late-ink);margin-left:7px;font-size:var(--ds-text-sm);cursor:default}
  .csite b{display:block;font-weight:600} .csite .muted{font-size:12px}
  .cact{text-align:right;white-space:nowrap}
  .mkjob{background:var(--navy);color:var(--ds-chrome-fg);border:1px solid var(--navy);border-radius:var(--ds-r-md);padding:9px 14px;font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);cursor:pointer}
  .mkjob.ghost{background:var(--ds-surface);color:var(--navy)}
  tr.ctr.open .cact .mkjob{display:none}
  .exchev{display:inline-block;margin-left:10px;color:var(--muted);font-size:16px;transition:transform .15s ease;transform:rotate(0)}
  tr.ctr.open .exchev{transform:rotate(90deg);color:var(--navy)}
  /* PM service history (the only drill-down on this screen) */
  tr.exrow td{background:var(--ds-canvas);border-bottom:1px solid var(--line);padding:0}
  .hist{padding:13px 18px 16px}
  .histh{font-size:var(--ds-text-base);margin-bottom:8px} .histh b{font-weight:var(--ds-w-semi)}
  .hrow{display:flex;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line2);font-size:var(--ds-text-base)}
  .hrow:last-child{border-bottom:0}
  .hrow.next{font-weight:600}
  .hrow.next .hby .nx.over{color:var(--ds-st-late-ink);font-weight:var(--ds-w-semi)}
  .hdot{width:9px;height:9px;border-radius:var(--ds-r-full);flex:0 0 auto;background:var(--green2)}
  .hdot.at{background:var(--ds-st-late)} .hdot.nx{background:var(--navy);box-shadow:none}
  .hdate{width:108px;font-weight:600;color:var(--ink)}
  .hby{flex:1;font-size:12px}
  .hres{margin-left:auto}
  /* mobile stacked contract cards (P0-4) */
  .cardlist{display:none}
  .ctwrap[data-contract-layout="mobile"] .cardlist{display:block;padding:12px 14px}
  .cgrp{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.7px;text-transform:uppercase;color:var(--ds-ink-2);margin:14px 2px 8px}
  .cgrp:first-child{margin-top:2px}
  .cgrp.over{color:var(--ds-st-late-ink)} .cgrp.soon{color:var(--ds-st-route-ink)}
  .cgrp .gn{margin-left:7px;color:var(--muted)}
  .ccard{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);padding:13px 14px;margin-bottom:10px;box-shadow:none}
  .ccard[data-contract]{cursor:pointer}.ccard[data-contract]:focus{outline:2px solid var(--blue-bd);outline-offset:2px}.ccard.open{border-color:var(--blue-bd)}
  .ccard .cc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .ccard .cc-due b{display:block;font-size:var(--ds-text-md);color:var(--ink)}
  .ccard .cc-due .rel{font-size:var(--ds-text-sm)}
  .ccard .cc-due .rel.over{color:var(--ds-st-late-ink);font-weight:var(--ds-w-semi)} .ccard .cc-due .rel.soon{color:var(--ds-st-route-ink)} .ccard .cc-due .rel.ok{color:var(--muted)}
  .ccard .cc-eq{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);margin-top:9px}
  .ccard .cc-eq .cnt{color:var(--muted);font-weight:600}
  .ccard .cc-site{font-size:var(--ds-text-base);font-weight:600;margin-top:7px} .ccard .cc-site .mg{display:block;font-size:var(--ds-text-sm);font-weight:500;color:var(--muted)}
  .ccard .cc-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin-top:9px;font-size:var(--ds-text-sm);color:var(--muted)}
  .ccard .cc-meta b{color:var(--ink);font-weight:600}
  .ccard .cc-rates{margin-top:10px;padding-top:9px;border-top:1px solid var(--line2)}
  .ccard .cc-rates .lbl{display:block;font-size:var(--ds-text-caps);color:var(--muted);margin-bottom:5px}
  .ccard .cc-rates .crate-list{flex-direction:row;flex-wrap:wrap;gap:5px 14px}
  .ccard .cc-act{margin-top:11px}
  .ccard .cc-act .mkjob,.ccard .cc-act .nlg{width:100%;text-align:center}
  .ccard .cc-expand{margin:12px -14px -13px;border-top:1px solid var(--line);background:var(--ds-canvas);border-radius:0 0 var(--ds-r-lg) var(--ds-r-lg);padding:0 14px 13px;cursor:default}
  .ccard .cc-expand .crate-panel,.ccard .cc-expand .cdocs{margin-left:0;margin-right:0}
  .ccard .cc-expand .hist{margin-left:0;margin-right:0}

  /* PHOTOS TAB — standalone site-gallery browser over the /site-galleries corpus
     endpoint (decoupled from the 30-day operator inbox). NET-NEW: .phshell,
     .phscroll, .skel, .ph-subbar tokens. REUSE: .phwrap/.phhead/.psgrid/
     .psitecard/.pcover/.pgrid/.pvisit/.fchip/.lempty/.pstate. */
  .phwrap{padding:18px 26px;max-width:1320px}
  /* Landing only: the site-card grid fills the width so it lines up with the
     full-width sub-bar; the site detail view keeps the 1320px reading cap. */
  .phwrap.ph-landwrap{max-width:none}
  .phhead{margin-bottom:14px} .phhead h1{font-family:var(--ds-display);font-size:var(--ds-text-d2);line-height:var(--ds-lh-d2);font-weight:var(--ds-display-weight);letter-spacing:var(--ds-display-track);color:var(--ds-ink);margin:0}
  .phhead .phsub{font-size:var(--ds-text-sm);color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
  .phhead .phsub.err{color:var(--red)}
  .phback{font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--navy);text-decoration:none;display:inline-block;margin-bottom:12px;border:0;background:transparent;cursor:pointer;padding:0}
  /* Shell: the single named scroll container .phscroll, flex-pinned >=1101px and
     sticky-pinned <=1100px — NEVER both (resolves the S3 double-offset). */
  .phshell{display:flex;flex-direction:column}
  .ph-subbar{background:var(--tint-100);border-bottom:1px solid var(--tline);padding:9px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .ph-subbar .ph-scope{font-size:var(--ds-text-sm);color:var(--muted);font-weight:600}
  .ph-subbar .ph-chiprow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .ph-subbar .ph-chiprow .ph-clabel{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin-right:1px}
  .ph-hero{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
  .ph-hero .ph-find{position:relative;max-width:560px}
  .ph-hero .ph-find input{width:100%;box-sizing:border-box;border:1px solid var(--tctl);background:var(--ds-surface);border-radius:var(--ds-r-lg);color:var(--ink);font-size:var(--ds-text-md);padding:13px 15px 13px 42px;box-shadow:none}
  .ph-hero .ph-find input:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
  .ph-hero .ph-find .ph-mag{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ds-ink-3);pointer-events:none}
  .psgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .psitecard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;text-align:left;width:100%;cursor:pointer;padding:0;overflow:hidden;border:1px solid var(--ds-st-site-bd);background:var(--ds-surface);border-radius:var(--ds-r-lg);transition:box-shadow .12s ease,transform .12s ease}
  .psitecard:hover{box-shadow:none;transform:translateY(-1px)}
  .psitecard:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .psitecard.skelcard{cursor:default}
  .pcover{aspect-ratio:4/3;width:100%;background:var(--ds-tint);border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0;overflow:hidden;display:block}
  .pcover img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
  .pcover img.on{opacity:1}
  .pcover-ph{display:flex;align-items:center;justify-content:center;color:var(--ds-icon);background:var(--ds-tint)}
  /* Notes-only treatment: a camera-less amber-tinted document cover + a corner
     "Notes only" badge, so a photo-less site reads as intentional, not broken. */
  .pcover-notes{color:var(--ds-st-route-ink);background:repeating-linear-gradient(135deg,var(--ds-st-route-bg),var(--ds-st-route-bg) 9px,var(--ds-st-route-bg) 9px,var(--ds-st-route-bg) 18px)}
  .psitecard{position:relative}
  .psitecard.notesonly{border-color:var(--ds-st-route-bd)}
  .psitecard .ps-notesbadge{position:absolute;top:8px;left:8px;z-index:1;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.02em;text-transform:uppercase;color:var(--ds-st-route-ink);background:color-mix(in srgb, var(--ds-surface) 94%, transparent);border:1px solid var(--ds-st-route-bd);border-radius:var(--ds-r-md);padding:3px 7px;line-height:1}
  .psitecard .ps-name{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--ink);margin:11px 13px 0;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .psitecard .ps-count{font-size:var(--ds-text-sm);color:var(--muted);font-weight:600;margin:6px 13px 0;font-variant-numeric:tabular-nums}
  .psitecard .ps-last{font-size:var(--ds-text-sm);color:var(--muted);margin:3px 13px 13px;font-variant-numeric:tabular-nums}
  .psitecard .ps-last.fresh{color:var(--navy-700);font-weight:600}
  .ph-foot{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--ds-text-sm);color:var(--muted);font-variant-numeric:tabular-nums}
  .ph-foot .ph-more{border:1px solid var(--tctl);background:var(--ds-surface);color:var(--navy);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);padding:8px 16px;border-radius:var(--ds-r-md);cursor:pointer}
  .ph-foot .ph-more:hover{background:var(--tint-100)}
  .ph-foot .ph-more[disabled]{opacity:.55;cursor:default}
  /* Skeleton sweep (no seed; honest cold state). Reduced-motion freezes it. */
  .skel{position:relative;overflow:hidden;background:var(--tint-100)}
  .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--tint-50) 0%,var(--tint-hov) 50%,var(--tint-50) 100%);background-size:200% 100%;animation:skelsweep 1.4s linear infinite}
  .skel.bar{height:11px;border-radius:var(--ds-r-sm);margin:9px 13px 0}
  .skel.bar.w2{width:62%;margin-bottom:13px}
  @keyframes skelsweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
  /* DETAIL — year rail + visit timeline */
  .ph-detail{display:grid;grid-template-columns:1fr;gap:0}
  .ph-dhead{display:flex;flex-direction:column;gap:5px;margin-bottom:6px}
  .ph-dhead h1{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--ink);margin:0;line-height:1.25}
  .ph-dhead .ph-dmeta{font-size:var(--ds-text-sm);color:var(--muted);font-variant-numeric:tabular-nums}
  .ph-dhead .ph-dacts{display:flex;gap:14px;flex-wrap:wrap;margin-top:4px}
  .ph-dhead .ph-dacts a,.ph-dhead .ph-dacts button{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);color:var(--navy);text-decoration:none;border:0;background:transparent;cursor:pointer;padding:0}
  .ph-dtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
  .ph-yearrail{display:flex;gap:6px;flex-wrap:wrap}
  .ph-yearrail .ph-year{border:1px solid var(--tctl);background:var(--ds-surface);color:var(--ds-ink-2);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);padding:4px 11px;border-radius:var(--ds-r-full);cursor:pointer;font-variant-numeric:tabular-nums}
  .ph-yearrail .ph-year.on{border-color:var(--navy);background:var(--navy);color:var(--ds-chrome-fg)}
  .ph-jobfilter{position:relative;flex:1;min-width:180px;max-width:320px}
  .ph-jobfilter input{width:100%;box-sizing:border-box;border:1px solid var(--tctl);background:var(--ds-surface);border-radius:var(--ds-r-md);color:var(--ink);font-size:var(--ds-text-base);padding:7px 11px}
  .ph-jobfilter input:focus{outline:2px solid var(--navy);outline-offset:0}
  .pvgroup{margin-top:16px} .pvgroup:first-child{margin-top:0}
  .pvisit{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .pvisit .pv-when{font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--ink);font-variant-numeric:tabular-nums}
  .pvisit .pv-job{font-size:var(--ds-text-sm);color:var(--muted)}
  .pvisit .pv-n{font-size:var(--ds-text-caps);color:var(--faint);font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums}
  .pvnote{font-size:var(--ds-text-sm);color:var(--muted);margin:0 0 8px;line-height:1.4}
  @media(min-width:1101px){
    #app:has(.phshell){display:flex;flex-direction:column;height:100vh}
    #app>.phshell{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
    .phshell>.ph-subbar{flex:0 0 auto}
    .phshell>.phscroll{flex:1 1 auto;overflow:auto;min-height:0}
  }
  @media(max-width:1100px){ .phshell>.ph-subbar{position:sticky;top:0;z-index:5} }
  @media(max-width:980px){ .phwrap{padding:14px 16px} .ph-subbar{padding:9px 16px} .psgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
  @media(prefers-reduced-motion:reduce){ .skel::after{animation:none} .pcover img{transition:none;opacity:1} }

  .setwrap{padding:18px 22px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1180px;align-items:start}
  .setcard.full{grid-column:1/-1}
  @media(max-width:880px){ .setwrap{grid-template-columns:1fr} }
  .setcard{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);padding:16px 18px}
  .seth{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
  .seth b{font-size:var(--ds-text-md)}
  .setrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line2);font-size:var(--ds-text-base)}
  .sw{width:36px;height:21px;border-radius:var(--ds-r-full);background:var(--ctl);position:relative;flex:0 0 auto;border:0;padding:0;cursor:pointer}
  .sw.on{background:var(--green2)}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:var(--ds-r-full);background:var(--ds-surface)}
  .sw.on::after{left:17px}
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(18px);background:var(--ds-chrome);color:var(--ds-chrome-fg);padding:11px 16px;border-radius:var(--ds-r-md);font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);box-shadow:var(--ds-e-pop),var(--ds-e-toast);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:80;display:flex;gap:9px;align-items:center;max-width:540px}
  .toast .toastlink{color:var(--ds-chrome-fg);font-weight:var(--ds-w-semi);text-decoration:underline;text-decoration-color:var(--ds-chrome-edge);text-underline-offset:3px}
  .toast .gv{color:var(--ds-chrome-fg);font-weight:var(--ds-w-semi)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* below ~1100px the 2-zone editor collapses to one column; the facts rail stacks BELOW the work surface as a summary block */
  @media(max-width:1100px){
    .detail.split{grid-template-columns:1fr}
    .drail{border-left:0;border-top:1px solid var(--line);flex-direction:row;flex-wrap:wrap;gap:12px 18px;padding:13px 22px}
    .drail .railsec{border-bottom:0;padding-bottom:0;flex:1 1 200px;min-width:0}
    .dleft{overflow:visible}
  }
  @media(max-width:980px){ .top{flex-wrap:wrap;padding:8px 14px;row-gap:6px} .user{margin-left:auto} .nav{order:2;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;margin-left:0;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav button{padding:7px 11px;white-space:nowrap} .search{flex-basis:100%;order:3;min-width:0} .work{grid-template-columns:1fr;height:auto} .detail{border-top:1px solid var(--line)} .detail.split{height:auto} .dhead{flex-direction:column;padding-left:22px;padding-right:22px} .dhead .who{text-align:left} .scroll{overflow:visible} }
  /* FIX 4: below ~1100px the inbox becomes a single-pane list->detail. When a job is selected (.work.has-sel) show ONLY the editor with a back control; otherwise show ONLY the list. Desktop (>=1100px) keeps the two-column split untouched. */
  @media(max-width:1100px){
    .work.has-sel .listcol{display:none}
    .work:not(.has-sel) .detail{display:none}
    .dback{display:block;order:-2}
    .detail.split{display:flex;flex-direction:column}
    /* finding 1: stop the editor from living inside a short internal scroll WELL —
       let the whole column flow so the line-item table (first) and the demoted rail
       (below) are simply scrolled by the page, with no dead void under a pinned
       footer. */
    .work{height:auto}
    .detail{height:auto}
    .dleft{overflow:visible}
    .qd-editor{flex:0 0 auto;min-height:0}
    .qd-editor .scroll{overflow:visible;flex:0 0 auto}
    /* single-pane mode: .dleft flows with the page (overflow:visible), so the send
       composer must NOT be a bounded inner-scroll column — let it grow and let the
       page scroll it, with the action bar simply at its end. */
    .qd-send{max-height:none}
    .qd-send .scroll{overflow:visible;flex:0 0 auto}
    .qd-send .action{position:static}
  }
  /* QUOTES (desktop): opening a quote collapses the left list so the editor gets the
     full width; the "All quotes" back control (its own row above the title — no
     overlap) re-expands it. Scoped to .qwork so the Jobs tab is unaffected. */
  .qwork.has-sel{grid-template-columns:1fr}
  .qwork.has-sel .listcol{display:none}
  .qwork.has-sel .dback{display:block;padding:11px 26px 0}
  /* L4: the QUEUE LANDING (nothing selected yet) gave the list a thin 416px column and
     wasted the right ~55% on an empty illustration. Until a quote is opened, the list
     takes a much wider share and the empty panel shrinks to a slim, centered prompt so
     the page never reads as a big blank void. */
  .qwork:not(.has-sel){grid-template-columns:minmax(0,1fr) 360px}
  .qwork:not(.has-sel) .listcol{border-right:1px solid var(--line)}
  .qwork:not(.has-sel) .dempty{padding:40px 28px}
  /* contracts: stacked cards below 700px (P0-4) */
  @media(max-width:700px){
    .srthint{display:none}
    .vsep{display:none} /* R3-P2: chip rows wrap here — no orphaned divider at a wrap break */

    /* FIX 2: Documents table -> stacked cards (no horizontal clipping; Open reachable) */
    .docview .gt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .docview .gt,.docview .gt tbody,.docview .gt tr,.docview .gt td{display:block;width:auto}
    .docview .gt tr{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);margin:0 14px 10px;padding:12px 14px;box-shadow:none}
    .docview .gt tr:hover{background:var(--ds-surface)}
    .docview .gt td{border-bottom:0;padding:2px 0}
    .docview .gt td[data-c]::before{content:attr(data-c);display:block;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.7px;text-transform:uppercase;color:var(--ds-ink-2);margin-bottom:1px}
    .docview .gt td.dc-name{font-size:var(--ds-text-md);margin-bottom:4px}
    .docview .gt td.dc-open{text-align:left;margin-top:10px}
    .docview .gt td.dc-open button,.docview .gt td.dc-open a{width:100%;text-align:center;padding:9px 14px!important}

    /* FIX 3: Settings -> stack each setrow (control under label) + sender table as cards */
    .setwrap{padding:14px}
    .setrow{flex-direction:column;align-items:stretch;gap:8px}
    .setrow .sw{align-self:flex-start}
    .setview .gt thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
    .setview .gt,.setview .gt tbody,.setview .gt tr,.setview .gt td{display:block;width:auto}
    .setview .gt tr{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);margin:0 0 10px;padding:12px 14px}
    .setview .gt tr:hover{background:var(--ds-surface)}
    .setview .gt td{border-bottom:0;padding:2px 0;text-align:left!important}
    .setview .gt td[data-c]::before{content:attr(data-c);display:inline-block;min-width:74px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.7px;text-transform:uppercase;color:var(--ds-ink-2)}
    .setview .gt td.se-name{font-size:var(--ds-text-md);margin-bottom:3px}
    .setview .gt td.se-name::before{display:none}
    .setview .gt td.se-empty{display:none} /* R3-P2: non-default senders carry no Default field on cards */
    .setview .gt td.se-edit{margin-top:9px}
    .setview .gt td.se-edit::before{display:none}
    .setview .gt td.se-edit button{width:100%;text-align:center;padding:9px 14px!important}
  }
  @media(max-width:900px){ .subbar>.vsep{display:none} }

  /* ---- v2 deviations from the reference prototype (operator-directed, 2026-06-09) ----
     1) Real-app shell: the reference's demo banner, gray canvas backdrop and
        floating device card were mockup presentation chrome - removed per
        operator instruction. Reloading the page resets the sample data.
     2) Mid-width repair: the reference held only at 1440/390. Between
        1101-1360px the fixed 452px list + 320px rail crushed the editor work
        surface and clipped its header controls; between 981-1100px the
        single-pane mode left the visible pane in a half-width grid track.
        Slimmer columns, a wrapping editor header, and a full-width track fix
        every window size in between.
     3) Brand header: real Pro Star logo (embedded, pre-whitened PNG) on a
        navy top bar, replacing the reference's generic PS mark + text logo.
        Nav/search/user styles re-tinted for the navy bar; focus rings on the
        bar switch to white so they stay visible. */
  .top{background:var(--ds-chrome);border-bottom:0}
  /* D6 white logo on navy: 28px box, lifted 3px (the star rises above the wordmark) */
  .blogo{display:block;height:var(--ds-brand-logo-h);width:auto}
  .top .logo{margin-right:var(--ds-s-2)}
  .top .logo .blogo{position:relative;top:var(--ds-brand-logo-nudge)}
  .nav button{color:var(--ds-chrome-dim)}
  .nav button:hover{color:var(--ds-chrome-fg)}
  .nav button.on{background:var(--ds-chrome-raise);color:var(--ds-chrome-fg)}
  .top :focus-visible{outline-color:var(--ds-focus)}
  .search{background:var(--ds-chrome-field);border-color:var(--ds-chrome-edge);color:var(--ds-chrome-fg)}
  .search::placeholder{color:var(--ds-chrome-fg-3)}
  .search:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off);border-color:var(--ds-chrome-edge)}
  .user{color:var(--ds-chrome-fg)}
  /* desktop: search is a 280px chrome field at the right, before the user + settings (section 4) */
  @media(min-width:981px){
    .top .search{flex:0 1 280px;margin-left:auto}
    .top>.gearb{margin-left:0}
  }
  /* D5: warm paper is the page canvas; white means raised */
  body{background:var(--ds-canvas)}
  .wrap{max-width:none;margin:0;padding:0}
  .device{border:0;border-radius:0;box-shadow:none}
  .dhead{flex-wrap:wrap}
  @media(min-width:1101px){
    #app:has(.work){display:flex;flex-direction:column;height:100vh}
    #app>.top,#app>.subbar{flex:0 0 auto}
    .work{flex:1 1 auto;height:auto;min-height:0}
  }
  @media(max-width:1360px){
    .work{grid-template-columns:320px 1fr}
    .detail.split{grid-template-columns:minmax(0,1fr) 216px}
    .scroll{padding:14px 20px}
    .action{padding:13px 20px}
  }
  @media(max-width:1100px){
    .work{grid-template-columns:1fr}
  }
  /* R3-P2: on narrow headers the nav row scrolls with a hidden scrollbar — while more
     items sit off-screen to the right (class toggled in navSync()), a sticky navy fade
     marks the cut edge; it disappears once scrolled to the end.
     R4-P2: symmetric left fade (.can-l) when items sit cut off off-screen to the LEFT.
     The -29px margins absorb the fade's 26px basis PLUS the row's 3px flex gap, so
     toggling either class never changes scrollWidth (no clamp/oscillation at the ends). */
  @media(max-width:980px){
    .nav.can-r::after{content:"";position:sticky;right:0;flex:0 0 26px;margin-left:-29px;align-self:stretch;background:linear-gradient(90deg,transparent,var(--ds-chrome) 85%);pointer-events:none}
    .nav.can-l::before{content:"";position:sticky;left:0;flex:0 0 26px;margin-right:-29px;align-self:stretch;background:linear-gradient(270deg,transparent,var(--ds-chrome) 85%);pointer-events:none}
  }

  /* ============================================================================
     VARIANT C — "Tonal navy precision" (visual elevation pass, 2026-06-10)
     Restyle ONLY. Brand navy pulled deep into the product as TINT: navy-tinted
     filter band and list header, solid-navy table header bands, tonal row
     hover/selected states, navy-tinted facts rail with white fact cards,
     status colors at deeper saturation, tabular numerals on dates/totals.
     Every text/background pair introduced here computes >= 4.5:1 (WCAG AA).
     ============================================================================ */
  :root{
    /* navy tint scale -> navy-system neutrals (Phase 1) */
    --tint-50:var(--ds-canvas); --tint-75:var(--ds-canvas); --tint-100:var(--ds-canvas); --tint-150:var(--ds-tint);
    --tint-200:var(--ds-tint); --tint-sel:var(--ds-sel-bg); --tint-hov:var(--ds-paper-hover);
    --tline:var(--ds-line); --tline2:var(--ds-line); --tctl:var(--ds-field);
    --navy-head:var(--ds-chrome); --navy-700:var(--ds-ink); --navy-600:var(--ds-ink-2);
    /* shared hairlines + canvas */
    --line:var(--ds-line); --line2:var(--ds-hair); --ctl:var(--ds-field);
    --canvas:var(--ds-canvas);
    /* status colours: navy-system families */
    --blue-bg:var(--ds-st-site-bg); --blue-tx:var(--ds-st-site-ink); --blue-bd:var(--ds-st-site-bd);
    --purple-bg:var(--ds-st-route-bg); --purple-tx:var(--ds-st-route-ink); --purple-bd:var(--ds-st-route-bd);
    --amber-bg:var(--ds-st-route-bg); --amber-tx:var(--ds-st-route-ink); --amber-bd:var(--ds-st-route-bd);
    --gray-bg:var(--ds-tint); --gray-tx:var(--ds-ink-2);
  }
  /* tabular numerals: every date, total, count and ID column keeps rhythm */
  body{font-variant-numeric:tabular-nums}

  /* --- navy-tinted subbar / filter band -------------------------------------- */
  .subbar{background:var(--tint-100);border-bottom:1px solid var(--tline);padding:11px 18px}
  .scope{color:var(--navy-600)}
  .vsep{background:var(--ds-line)}
  .fchip{border:1px solid var(--ds-field);color:var(--ds-ink);border-radius:var(--ds-r-md);padding:6px 12px;box-shadow:none}
  .fchip .n{color:var(--ds-ink-3)}
  .fchip.on{border-color:var(--ds-action);background:var(--ds-action);box-shadow:none}
  .fchip.on .n{color:var(--ds-chrome-fg-2)}
  .srthint{color:var(--ds-ink-2)}

  /* --- inbox list: tonal states, navy selection bar --------------------------- */
  .listcol{background:var(--tint-50);border-right:1px solid var(--tline)}
  .lhead{background:#fff;border-bottom:0.5px solid var(--line)}
  .lhead .t{color:var(--ink);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none}
  .lhead .sub{color:var(--muted)}
  .lrow{border-bottom:1px solid #e2e9f2}
  .lrow:hover{background:var(--tint-hov)}
  .lrow.sel{background:var(--tint-sel);box-shadow:inset 3px 0 0 var(--navy)}
  .stchip .d{box-shadow:none}
  .st-notes .d{background:var(--ds-st-site)} .st-quote .d{background:var(--ds-st-route)}
  .st-follow .d{background:var(--ds-st-route)} .st-closed .d{background:var(--ds-st-sched)}

  /* --- editor work surface: tinted scroll well, white cards ------------------- */
  .life{background:var(--tint-75);border-bottom:1px solid var(--line2)}
  .life .sep{background:#ccd7e8}
  .scroll{background:var(--tint-50)}
  .mailcard{border-color:var(--tline);box-shadow:none;background:var(--ds-surface)}
  .qd-card,.closedcard{background:var(--ds-surface);border-color:var(--tline);box-shadow:none}
  .editform{background:transparent;box-shadow:none}
  .action{background:var(--tint-100);border-top:1px solid var(--tline)}
  .seg2{background:var(--tint-150);border-color:var(--tctl)}
  .qreview{border-color:var(--blue-bd);background:var(--ds-st-site-bg)}
  .fl,.apx .apxh{letter-spacing:.7px;color:var(--ds-ink-2)}
  .viewall{color:#266e1b}

  /* --- navy-tinted facts rail with white fact cards ---------------------------- */
  .drail{background:var(--canvas);border-left:1px solid var(--tline);gap:10px;padding:10px 10px 26px}
  .drail .railsec{background:transparent;border:0;border-bottom:1px solid var(--ds-st-site-bd);border-radius:0;padding:0 0 10px;box-shadow:none}
  .drail .railsec:last-child{border:0;padding-bottom:0}
  .railsec .rl{color:var(--ds-ink-2);letter-spacing:.7px}
  .railbtn,.railqbtn.ghost,.nlg,.dbackb{border-color:var(--tctl)}
  .railq{border-color:var(--tline)}

  /* --- tables: solid-navy header bands, crisper rhythm ------------------------- */
  .gt thead th{background:var(--navy-head);color:var(--ds-st-site);border-bottom:1px solid var(--ds-action);letter-spacing:.7px;padding:10px 22px}
  .gt td{border-bottom:1px solid var(--line2);padding:12px 22px}
  .gt tbody tr:hover{background:var(--tint-hov)}
  .ctab thead th{background:var(--navy-head);color:var(--ds-st-site);border-bottom:1px solid var(--ds-action);letter-spacing:.7px}
  .ctab th.srt:hover{color:var(--ds-chrome-fg)} .ctab th.srt.on{color:var(--ds-chrome-fg)}
  .ctab td{border-bottom:1px solid var(--line2);padding:10px 14px}
  .ctab td.ralt{color:var(--ds-ink-2);font-weight:600}
  .ctwrap{border-top:0}
  tr.grp td{background:var(--tint-200);border-top:1px solid var(--tline2);border-bottom:1px solid var(--tline2);box-shadow:inset 3px 0 0 var(--navy);padding:7px 14px}
  tr.grp .gname{color:var(--navy-700);letter-spacing:.7px}
  tr.grp.gover .gname{color:var(--ds-st-late-ink)} tr.grp.gsoon .gname{color:var(--ds-st-route-ink)}
  tr.grp .gn{color:var(--ds-ink-2)}
  tr.ctr:hover{background:var(--tint-hov)} tr.ctr.open{background:var(--tint-sel)}
  tr.exrow td{background:var(--tint-50);border-bottom:1px solid var(--tline)}
  .sc-head{border-bottom:1px solid var(--tline)}
  .sc-head .sub{color:var(--ds-ink-2)}
  .pill.gr{background:var(--ds-st-done-bg);color:var(--ds-ink-2)} .pill.rd{background:var(--ds-st-late-bg);color:var(--ds-ink-2)}

  /* --- settings: tinted canvas, white cards ------------------------------------ */
  .setview{background:var(--tint-50)}
  .setcard{border-color:var(--ds-st-site-bd);box-shadow:none}
  /* --- mobile cards pick up the same tonal frame -------------------------------- */
  .ccard,.docview .gt tr,.setview .gt tr{border-color:var(--ds-st-site-bd);box-shadow:none}

  /* ============================================================================
     INTEGRATION GRAFTS — judge-panel consensus applied to Variant C (2026-06-10)
     A1: solid-navy selected list row (from Variant A); every token inside
         computes >= 4.5:1 against #10233f (title #fff 15.74, meta #b9c6dd 9.13,
         date/quote facts #d7e2f4 12.05, dot separators #a9bad6 8.01); the
         stage chip and amber "no photos" flag keep their own backgrounds
         (#6f4602 on #fdeec9 = 7.15). A light seam under the navy list-header
         band stops a selected row scrolled to the top fusing into one slab.
     B1: one type-scale step on the editor headline (17 -> 23px, looser leading)
         + roomier email reading (line-height 1.65, more inner padding). The
         navy "Pro Star Mechanical" mail banner stays.
     B2: photo-placeholder pastels desaturated one step — see pal[] in the JS.
     C1: navy-band cap — bands live ONLY on the app header, table/list header
         and the selected row; rail/section headers and email areas stay light.
     C2: documents table header sticks like the contracts one.
     R:  rail quote-status card boundary reads on cheap monitors (borders
         >= 3:1 vs the white rail card: #5f87c1 3.67, #8e74c4 3.86, #7e93b4 3.13).
     M:  mobile 390 — ~40px filter-chip tap targets, follow-up schedule row
         gets a clean stack break, breathing room above the action bar.
     ============================================================================ */
  .lrow.sel{background:var(--navy);box-shadow:none}
  .lrow.sel .cust,.lrow.sel .bld,.lrow.sel .r2 .r2t .bld{color:#fff}
  .lrow.sel .r2,.lrow.sel .r3{color:#b9c6dd}
  .lrow.sel .r3 .qd{color:#d7e2f4}
  .lrow.sel .r3 .qd.none,.lrow.sel .r3 .qs{color:#b9c6dd}
  .lrow.sel .dotsep{color:#a9bad6}
  .lrow.sel .jnum{color:#b9c6dd}
  .lrow.sel .rmeta{color:#b9c6dd}
  .lrow.sel .rmeta .amt{color:#d7e2f4}
  .lrow.sel .rmeta .amt.dim{color:#b9c6dd}
  .lrow.sel .rstatus{color:#b9c6dd}
  .lrow.sel .rstatus .sg-l{color:#8ea4c4}
  .lrow.sel .rstatus .sg-v{color:#b9c6dd}
  .lrow.sel .rstatus .sg-v.dim{color:#8ea4c4}
  .lrow.sel .rstatus .sg .d.open{border-color:#8ea4c4}
  /* B2: status text was dark-on-dark (1.04:1) and invisible on the selected row. */
  .lrow.sel .rstat{color:#d7e2f4}
  .lrow.sel:focus-visible{outline-color:#fff}
  .lhead{border-bottom:0.5px solid var(--line)}
  .dhead .h{font-size:15px;line-height:1.26;letter-spacing:0}
  .mb{padding:22px 24px}
  .mb p{line-height:1.65}
  .docview .gt thead th{position:sticky;top:0;z-index:2}
  /* the reference's device-card clip (overflow:hidden) is dead chrome in the
     full-bleed shell and it traps position:sticky — release it so the
     documents header can pin to the viewport like the contracts one */
  .device{overflow:visible}
  .railq{border-color:var(--ds-field)}
  .railq.on{border-color:var(--ds-st-site-bd)}
  .railq.flagged{border-color:var(--ds-st-route-bd)}
  @media(max-width:700px){
    .fchip{padding:12px 14px}
    .scroll{padding-bottom:28px}
    .qd-card .hrow{flex-wrap:wrap;row-gap:7px}
    .qd-card .hrow .hres{margin-left:auto}
  }

  /* ---- runtime gate screens (contract §8.A): key-required on bare load (no
     sample data), 503 flag-off, 401/403 bad key, fetch failure, loading ---- */
  .gate{min-height:60vh;display:flex;align-items:center;justify-content:center;background:var(--canvas);padding:28px 16px}
  .gate.full{min-height:100vh}
  .gatecard{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);box-shadow:var(--ds-e-pop);max-width:480px;width:100%;overflow:hidden;text-align:center}
  .gatecard .ghead{background:var(--ds-chrome);padding:18px}
  .gatecard .ghead .blogo{margin:0 auto}
  .gatecard .gbody{padding:22px 26px 26px}
  /* D3: the gate title is the page title, so it takes the display face */
  .gatecard .gbig{font-family:var(--ds-display);font-size:var(--ds-text-d2);line-height:var(--ds-lh-d2);font-weight:var(--ds-display-weight);letter-spacing:var(--ds-display-track);color:var(--ds-ink);margin-bottom:7px}
  .gatecard .gsub{font-size:var(--ds-text-base);color:var(--ds-ink-2);line-height:1.55}
  .gatecard .gform{display:flex;gap:9px;margin-top:16px}
  .gatecard .gform .input{flex:1}
  .gatecard .gact{margin-top:16px}

  /* C3: CSS-only loading skeleton for the notes editor while the email package
     loads. Mirrors the To/Cc/Subject/Body layout of the real editform so the
     pane doesn't reflow when the package lands. */
  @keyframes skelshimmer{0%{background-position:-360px 0}100%{background-position:360px 0}}
  .skel-card{border:1px solid var(--line);border-radius:var(--ds-r-lg);padding:18px;background:var(--ds-surface);width:100%}
  .skel{background:var(--ds-tint);background-image:linear-gradient(90deg,var(--ds-tint) 0,var(--ds-canvas) 50%,var(--ds-tint) 100%);background-size:360px 100%;background-repeat:no-repeat;border-radius:var(--ds-r-md);animation:skelshimmer 1.1s ease-in-out infinite}
  .skel-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .skel-lbl{flex:0 0 38px;height:11px}
  .skel-fld{flex:1;height:34px}
  .skel-body{height:170px;margin-top:8px}
  @media(prefers-reduced-motion:reduce){.skel{animation:none}}

  /* ===== PHOTOS VISIT VIEWER (converged two-pane detail) — additive, namespaced
     .vv-*. Reuses the existing navy tokens; adds only the result-accent palette
     the asset cards need. Renders inside the existing .phshell/.phscroll. ===== */
  .vv-mono{font-family:var(--ds-mono)}
  .vv{--fail-acc:#d4694e;--fail-bd:#ead4d0;--fail-tint:#fdf7f5;--fail-badge-bg:#fbe4e0;--fail-badge-tx:#b23420;
      --find-acc:#d6a43a;--find-bd:#ecdfc0;--find-tint:#fdfaf3;--find-badge-bg:#fdedca;--find-badge-tx:#8a5400;--find-badge-bd:#ecc874;
      --pass-acc:#4fa83e;--pass-bd:#dde3ec;--pass-tint:#fbfdfb;--pass-badge-bg:#e8f5e6;--pass-badge-tx:#2c7e22;
      display:grid;grid-template-columns:320px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  @media(max-width:1100px){.vv{grid-template-columns:1fr}}
  /* LEFT rail */
  .vv-rail{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);background:var(--ds-surface)}
  @media(max-width:1100px){.vv-rail{border-right:0;border-bottom:1px solid var(--line)}}
  /* Rail head mirrors the customer viewer's .service-history-title + a subtle
     keyword filter (NOT a prominent search box). */
  .vv-rhead{padding:18px 15px 10px}
  .vv-rtitle{padding:0 0 7px 13px;color:var(--ink);font-size:var(--ds-text-md);font-weight:600;line-height:1.2}
  .vv-rhead .vv-sm{padding:0 0 12px 13px;font-size:var(--ds-text-sm);color:var(--muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .vv-rhead .vv-sm b{color:var(--ds-ink-2);font-weight:var(--ds-w-semi)}
  .vv-dotsep{color:var(--ds-icon)}
  .vv-rsearch{position:relative;margin:0 0 2px 13px}
  .vv-rsearch input{width:100%;box-sizing:border-box;border:1px solid var(--line);background:var(--ds-surface);border-radius:var(--ds-r-md);font-size:var(--ds-text-sm);padding:7px 10px 7px 28px;color:var(--ink)}
  .vv-rsearch input::placeholder{color:var(--ds-icon)}
  .vv-rsearch input:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
  .vv-rsearch .vv-si{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ds-icon);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);pointer-events:none}
  .vv-pivot{margin:10px 0 0 13px;display:flex;align-items:center;gap:8px;background:var(--blue-bg);border:1px solid var(--blue-bd);border-radius:var(--ds-r-md);padding:7px 10px;font-size:var(--ds-text-sm);color:var(--blue-tx)}
  .vv-pivot .vv-pi{font-weight:var(--ds-w-semi)}
  .vv-pivot b{font-weight:var(--ds-w-semi)}
  .vv-pivot .vv-px{margin-left:auto;color:var(--ds-ink-3);font-weight:var(--ds-w-semi);cursor:pointer;font-size:var(--ds-text-md);border:0;background:transparent;padding:0 2px;line-height:1}
  /* .vv-rbody mirrors the customer viewer's .history-list: a flat, scrollable
     timeline with a border-left rail; one .history-button per visit. */
  .vv-rbody{overflow-y:auto;flex:1;min-height:0;max-height:72vh;display:grid;grid-auto-rows:max-content;align-content:start;gap:0;padding:6px 4px 8px 13px;margin-left:15px;border-left:2px solid var(--line)}
  @media(max-width:1100px){.vv-rbody{max-height:340px}}
  /* "Load older visits" footer for the navigator rail (server-cursor paging). */
  .vv-loadmore{padding:12px 15px;display:flex;flex-direction:column;gap:7px}
  .vv-loadmore .ph-more{width:100%;border:1px solid var(--tctl);background:var(--ds-surface);color:var(--navy);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);padding:8px 14px;border-radius:var(--ds-r-md);cursor:pointer}
  .vv-loadmore .ph-more:hover{background:var(--tint-100)}
  .vv-loadmore .ph-more[disabled]{opacity:.55;cursor:default}
  .vv-loadmore-err{font-size:var(--ds-text-sm);color:var(--fail-badge-tx);font-weight:600}
  /* One timeline button per visit — MIRRORS the customer viewer's .history-button:
     a left border-rail accent, a timeline dot (.vv-vdot, positioned like the
     model's ::before), a date line, and the job title. aria-current="true" is the
     active highlight (scroll-spy). */
  .vv-vrow{appearance:none;position:relative;display:block;width:100%;min-height:54px;padding:9px 10px 9px 16px;border:0;border-left:2px solid transparent;border-radius:var(--ds-r-md);background:transparent;color:var(--muted);text-align:left;cursor:pointer}
  .vv-vrow:hover,.vv-vrow:focus-visible{outline:2px solid transparent;background:var(--surface-soft,var(--ds-paper-hover));color:var(--ink)}
  .vv-vrow[aria-current="true"]{border-left-color:var(--ds-action);background:var(--surface-soft,var(--ds-sel-bg));color:var(--ink);font-weight:600}
  .vv-vrow[disabled]{cursor:default;opacity:.7}
  .vv-vrow .vv-vdot{position:absolute;top:18px;left:-22px;width:7px;height:7px;border:2px solid var(--ds-surface);border-radius:var(--ds-r-full);background:var(--ds-skeleton)}
  .vv-vrow[aria-current="true"] .vv-vdot{background:var(--ds-action)}
  .vv-vdot.fail{background:var(--fail-acc)} .vv-vdot.find{background:var(--find-acc)} .vv-vdot.ok{background:var(--pass-acc)} .vv-vdot.react{background:var(--ds-skeleton)}
  .vv-vrow .vv-vdate{display:block;color:var(--muted);font-size:var(--ds-text-sm);line-height:1.35}
  .vv-vrow .vv-vtitle{display:block;margin-top:2px;color:inherit;font-size:var(--ds-text-base);line-height:1.32;overflow-wrap:anywhere}
  .vv-vrow .vv-vmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:5px}
  /* Notes-only visit pill in the navigator rail: amber "Notes" so a notes-only
     visit reads distinctly from a photo visit. */
  .vv-vrow .vv-ph{display:inline-flex;align-items:center;gap:3px;font-weight:var(--ds-w-semi);font-size:var(--ds-text-caps);color:var(--ds-ink-2)}
  .vv-vrow .vv-ph.notes{color:var(--ds-st-route-ink);background:var(--ds-st-route-bg);border:1px solid var(--ds-st-route-bd);border-radius:var(--ds-r-sm);padding:1px 6px;font-size:var(--ds-text-caps);letter-spacing:.02em;text-transform:uppercase}
  .vv-tag{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:var(--ds-r-sm);white-space:nowrap}
  .vv-tag.quote{background:var(--blue-bg);color:var(--blue-tx)}
  .vv-tag.react{background:var(--ds-tint);color:var(--ds-ink-2)}
  .vv-tag.asset{background:var(--find-badge-bg);color:var(--find-badge-tx)}
  .vv-vresult{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.3px;text-transform:uppercase;padding:2px 6px;border-radius:var(--ds-r-sm);white-space:nowrap}
  .vv-vresult.fail{background:var(--fail-badge-bg);color:var(--fail-badge-tx)}
  .vv-vresult.pass{background:var(--pass-badge-bg);color:var(--pass-badge-tx)}
  .vv-railmore{padding:11px 15px;text-align:center}
  .vv-railmore button{border:1px solid var(--ctl);background:var(--ds-surface);color:var(--navy);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);padding:7px 14px;border-radius:var(--ds-r-md);cursor:pointer;width:100%}
  .vv-railempty{padding:18px 15px;font-size:var(--ds-text-sm);color:var(--muted);line-height:1.5}
  /* RIGHT detail pane */
  .vv-detail{display:flex;flex-direction:column;min-height:0;background:var(--ds-surface)}
  .vv-dhead{padding:14px 20px 13px;border-bottom:1px solid var(--line)}
  .vv-dhcrumb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--ds-text-sm)}
  .vv-dhcrumb-r{margin-left:auto;display:inline-flex;align-items:center;gap:14px}
  .vv-hlink{display:inline-flex;align-items:center;gap:5px;color:var(--blue-tx);font-weight:var(--ds-w-semi);cursor:pointer;font-size:var(--ds-text-sm);text-decoration:none;border:0;background:transparent;padding:0}
  .vv-hlink:hover{text-decoration:underline}
  .vv-dhtitle{display:flex;align-items:flex-start;gap:12px;margin-top:11px}
  .vv-dhtitle .vv-h{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--ink);line-height:1.25;flex:1;min-width:0}
  .vv-stchip{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);padding:4px 11px;border-radius:var(--ds-r-full);white-space:nowrap;flex:0 0 auto;margin-top:3px}
  .vv-stchip .d{width:7px;height:7px;border-radius:var(--ds-r-full)}
  .vv-stchip.quote{background:var(--blue-bg);color:var(--blue-tx)} .vv-stchip.quote .d{background:var(--ds-st-site)}
  .vv-dhsub{font-size:var(--ds-text-base);color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .vv-dhsub b{color:var(--ds-ink-2);font-weight:var(--ds-w-semi)}
  .vv-dbody{overflow:auto;flex:1;min-height:0;padding:18px 22px 26px;display:flex;flex-direction:column;gap:20px;max-height:74vh}
  @media(max-width:1100px){.vv-dbody{max-height:none}}
  .vv-dsplit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  @media(max-width:1180px){.vv-dsplit{grid-template-columns:1fr}}
  .vv-dmain{min-width:0;display:flex;flex-direction:column;gap:22px}
  .vv-dside{display:flex;flex-direction:column;gap:16px}
  .vv-sec>.vv-sh{display:flex;align-items:center;gap:10px;margin:0 0 12px}
  .vv-sec>.vv-sh .vv-st{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);letter-spacing:.9px;text-transform:uppercase;color:var(--ds-ink-2)}
  .vv-sec>.vv-sh .vv-sc{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--muted);background:var(--gray-bg);border-radius:var(--ds-r-full);padding:2px 9px}
  .vv-sec>.vv-sh .vv-sline{flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent);border-radius:var(--ds-r-tag)}
  .vv-sublab{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;color:var(--ds-ink-3)}
  /* photos grid (reuses lightbox via data-photo-expand) */
  .vv-pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
  @media(max-width:680px){.vv-pgrid{grid-template-columns:repeat(4,1fr)}}
  .vv-pthumb{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--ds-r-md);background:var(--ds-tint);overflow:hidden;cursor:pointer;display:block;padding:0;width:100%}
  .vv-pthumb img{display:block;width:100%;height:100%;object-fit:cover}
  .vv-pthumb:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
  .vv-pthumb.more{background:var(--ds-tint);border-style:dashed;display:flex;align-items:center;justify-content:center}
  .vv-pthumb.more .ml{color:var(--navy);font-weight:var(--ds-w-semi);font-size:var(--ds-text-base)}
  .vv-photohint{font-size:var(--ds-text-sm);color:var(--muted);margin-top:9px}
  /* notes account */
  .vv-notesbox{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);overflow:hidden}
  .vv-nb-src{display:flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ds-canvas);border-bottom:1px solid var(--line);font-size:var(--ds-text-sm);color:var(--muted)}
  .vv-nb-src b{color:var(--ds-ink-2);font-weight:var(--ds-w-semi)}
  .vv-nblock{padding:13px 16px 15px}
  .vv-nb-val{font-size:var(--ds-text-base);line-height:1.6;color:var(--ink);white-space:pre-wrap;word-break:break-word}
  .vv-notesempty{font-size:var(--ds-text-sm);color:var(--muted);background:var(--canvas);border:1px dashed var(--ctl);border-radius:var(--ds-r-lg);padding:13px 14px;line-height:1.5}
  .vv-notesempty b{color:var(--ds-ink-2);font-weight:var(--ds-w-semi)}
  /* In-progress loading state for the visit panes — a CSS-only spinner next to
     the honest copy, so a 5–8s hydration reads as working, not stuck. */
  .vv-loading{display:flex;align-items:center;gap:9px}
  .vv-spin{flex:0 0 auto;width:14px;height:14px;border-radius:var(--ds-r-full);border:2px solid var(--tint-200,var(--ds-line));border-top-color:var(--navy,var(--ds-action));animation:vvspin .7s linear infinite}
  @keyframes vvspin{to{transform:rotate(360deg)}}
  @media(prefers-reduced-motion:reduce){.vv-spin{animation:none}}
  /* asset cards */
  .vv-assetwrap{display:flex;flex-direction:column;gap:14px}
  .vv-acard{border:1px solid var(--pass-bd);border-left:3px solid var(--pass-acc);border-radius:var(--ds-r-lg);background:var(--ds-surface);overflow:hidden}
  .vv-acard.fail{border-left-color:var(--fail-acc)}
  .vv-acard.find{border-left-color:var(--find-acc)}
  .vv-ahead{display:flex;align-items:flex-start;gap:12px;padding:12px 15px;background:var(--ds-surface);border-bottom:1px solid var(--line2)}
  .vv-ahead .vv-ai{flex:1;min-width:0}
  .vv-ahead .vv-at{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--ink);line-height:1.3;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .vv-ahead .vv-piv{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--blue-tx);letter-spacing:.2px;cursor:pointer;border:0;background:transparent;padding:0}
  .vv-ahead .vv-aid{font-size:var(--ds-text-sm);color:var(--muted);margin-top:3px;line-height:1.45}
  .vv-ametaline{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
  .vv-ametaline .vv-aby{font-size:var(--ds-text-caps);color:var(--muted)}
  .vv-hpill{display:inline-flex;align-items:center;gap:5px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--ds-ink-2);background:var(--gray-bg);border:1px solid var(--ds-line);border-radius:var(--ds-r-full);padding:2px 8px}
  .vv-hpill .hd{width:6px;height:6px;border-radius:var(--ds-r-full)}
  .vv-hpill .hd.watch{background:var(--find-acc)} .vv-hpill .hd.good{background:var(--pass-acc)} .vv-hpill .hd.crit{background:var(--fail-acc)}
  /* secondary (demoted) global-health pill — never competes with the per-visit result badge */
  .vv-hpill.secondary{font-size:var(--ds-text-caps);font-weight:600;color:var(--ds-ink-3);background:transparent;border:1px solid var(--line2);padding:1px 7px}
  .vv-resb{display:inline-flex;align-items:center;gap:5px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.5px;text-transform:uppercase;padding:5px 11px;border-radius:var(--ds-r-md);flex:0 0 auto}
  .vv-resb .rd{width:7px;height:7px;border-radius:var(--ds-r-full)}
  .vv-resb.pass{background:var(--pass-badge-bg);color:var(--pass-badge-tx)} .vv-resb.pass .rd{background:var(--pass-acc)}
  .vv-resb.fail{background:var(--fail-badge-bg);color:var(--fail-badge-tx)} .vv-resb.fail .rd{background:var(--fail-acc)}
  .vv-resb.find{background:var(--find-badge-bg);color:var(--find-badge-tx);border:1px solid var(--find-badge-bd)} .vv-resb.find .rd{background:var(--find-acc)}
  .vv-resb.na{background:var(--ds-tint);color:var(--ds-ink-2);border:1px solid var(--ds-rule)} .vv-resb.na .rd{background:var(--ds-field)}
  .vv-enricherr{padding:11px 15px;font-size:var(--ds-text-sm);color:var(--muted);background:var(--ds-surface)}
  .vv-enrichwarn{padding:8px 15px;font-size:var(--ds-text-sm);color:var(--amber-tx);background:var(--amber-bg);border-bottom:1px solid var(--amber-bd)}
  .vv-retry{background:none;border:0;color:var(--blue-tx);font:inherit;font-size:var(--ds-text-sm);cursor:pointer;text-decoration:underline;padding:0}
  .vv-anote{padding:11px 15px;border-bottom:1px solid var(--line2);font-size:var(--ds-text-sm);line-height:1.55;color:var(--ink);background:var(--ds-surface);white-space:pre-wrap;word-break:break-word}
  .vv-anote .vv-nl{margin-bottom:5px}
  /* readings disclosure (audit fix 5) */
  .vv-rdwrap{background:var(--ds-surface);border-bottom:1px solid var(--line2)}
  .vv-rdtoggle{display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;padding:9px 15px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.4px;text-transform:uppercase;color:var(--ds-ink-3)}
  .vv-rdtoggle:hover{color:var(--ink)}
  .vv-rdtoggle .cr{font-size:var(--ds-text-caps);color:var(--ds-icon)}
  .vv-rdtoggle.open .cr{color:var(--ink)}
  .vv-rdc{margin-left:6px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--muted);background:var(--gray-bg);border-radius:var(--ds-r-full);padding:1px 7px;text-transform:none;letter-spacing:0}
  .vv-rdc.none{color:var(--ds-icon);background:transparent;border:1px solid var(--line2)}
  .vv-rdwrap.open .vv-rdtoggle{border-bottom:1px solid var(--line2)}
  .vv-rdempty{font-size:var(--ds-text-sm);color:var(--muted);padding:11px 15px;line-height:1.5}
  /* reading grid — ONE chip semantic system */
  .vv-rgrid{background:var(--ds-surface)}
  .vv-rgrow{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line2)}
  .vv-rgrow:first-child{border-top:0}
  .vv-rgtags{padding:9px 13px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:5px}
  .vv-rtag{display:inline-flex;align-items:baseline;gap:4px;border-radius:var(--ds-r-md);padding:5px 9px;font-size:var(--ds-text-caps);line-height:1.1;min-width:0}
  .vv-rtag .rn{font-size:var(--ds-text-caps);color:var(--ds-ink-3);white-space:nowrap}
  .vv-rtag .rn:after{content:":";color:var(--ds-icon);margin-left:1px;margin-right:2px}
  .vv-rtag .rval{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vv-rtag.num{background:var(--ds-canvas)} .vv-rtag.num .rval{font-family:var(--ds-mono)}
  .vv-rtag.bad{background:var(--ds-surface);border:1px solid var(--fail-acc)} .vv-rtag.bad .rn{color:var(--ds-st-late-ink)} .vv-rtag.bad .rval{color:var(--fail-badge-tx);font-weight:var(--ds-w-semi)}
  .vv-rtag.done{background:var(--pass-badge-bg)} .vv-rtag.done .rval{color:var(--pass-badge-tx)}
  .vv-rtag.ref{background:transparent;padding-left:0;padding-right:6px} .vv-rtag.ref .rval{color:var(--ds-icon);font-weight:600} .vv-rtag.ref .rn{color:var(--ds-icon)}
  /* trend strip */
  .vv-trend{margin:0 15px 13px;border:1px solid var(--find-bd);background:var(--find-tint);border-radius:var(--ds-r-lg);padding:10px 12px}
  .vv-trend .tlab{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.4px;text-transform:uppercase;color:var(--ds-st-route-ink);margin-bottom:7px;display:flex;align-items:center;gap:7px}
  .vv-trend .tlab .tnow{margin-left:auto;font-family:var(--ds-mono);font-weight:var(--ds-w-semi);color:var(--fail-badge-tx);letter-spacing:0}
  .vv-spark{width:100%;height:34px;display:block}
  .vv-trendempty{margin:0 15px 13px;padding:10px 12px;border:1px dashed var(--find-bd);background:var(--find-tint);border-radius:var(--ds-r-lg);font-size:var(--ds-text-sm);color:var(--ds-st-route-ink);line-height:1.5}
  .vv-trrow{display:flex;align-items:flex-end;gap:0;margin-top:5px}
  .vv-trpt{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
  .vv-trpt .tv{font-family:var(--ds-mono);font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--ds-st-route-ink)}
  .vv-trpt.lastpt .tv{color:var(--fail-badge-tx)}
  .vv-trpt .tdate{font-size:var(--ds-text-caps);color:var(--ds-ink-3)}
  .vv-openrow{display:flex;align-items:center;gap:14px;padding:9px 15px;border-top:1px solid var(--line2);background:var(--ds-canvas);flex-wrap:wrap}
  .vv-openrow .ol{font-size:var(--ds-text-caps);color:var(--blue-tx);font-weight:var(--ds-w-semi);cursor:pointer;display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:0;text-decoration:none}
  .vv-openrow .ol:hover{text-decoration:underline}
  /* fact boxes (rail) */
  .vv-factbox{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);overflow:hidden}
  .vv-factbox .fbh{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.6px;text-transform:uppercase;color:var(--ds-ink-3);padding:11px 14px 9px;display:flex;align-items:center;gap:8px}
  .vv-factbox .fbh .fc{margin-left:auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--muted);background:var(--gray-bg);border-radius:var(--ds-r-full);padding:1px 8px}
  .vv-fbpad{padding:0 14px 13px}
  .vv-factbox.admin{background:var(--canvas)}
  .vv-factbox.admin .fbh{color:var(--ds-icon)}
  .vv-healthrow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line2)}
  .vv-healthrow:first-of-type{border-top:0}
  .vv-healthrow .hn{flex:1;min-width:0}
  .vv-healthrow .hnm{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);color:var(--ink)}
  .vv-healthrow .hsub{font-size:var(--ds-text-caps);color:var(--muted);margin-top:1px}
  .vv-hr{flex:0 0 auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:var(--ds-r-sm)}
  .vv-hr.fail{background:var(--fail-badge-bg);color:var(--fail-badge-tx)}
  .vv-hr.find{background:var(--find-badge-bg);color:var(--find-badge-tx)}
  .vv-hr.pass{background:var(--pass-badge-bg);color:var(--pass-badge-tx)}
  /* related quotes */
  .vv-qcard{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);padding:12px 13px;margin-bottom:9px}
  .vv-qcard:last-child{margin-bottom:0}
  .vv-qcard.on{border-color:var(--blue-bd);background:var(--ds-st-site-bg)}
  .vv-qcard .q1{display:flex;align-items:flex-start;gap:9px}
  .vv-qcard .qn{font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--ink)}
  .vv-qcard .qttl{font-size:var(--ds-text-sm);color:var(--ds-ink-2);line-height:1.4;margin-top:1px}
  .vv-qrel{flex:0 0 auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:var(--ds-r-md);background:var(--blue-bg);color:var(--blue-tx)}
  .vv-qrel.ref{background:var(--gray-bg);color:var(--gray-tx)}
  .vv-qchip{flex:0 0 auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.3px;text-transform:uppercase;padding:3px 8px;border-radius:var(--ds-r-md);white-space:nowrap}
  .vv-qchip.appr{background:var(--pass-badge-bg);color:var(--pass-badge-tx)}
  .vv-qchip.acc{background:var(--blue-bg);color:var(--blue-tx)}
  .vv-qchip.other{background:var(--gray-bg);color:var(--gray-tx)}
  .vv-qmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px;font-size:var(--ds-text-sm);color:var(--muted)}
  .vv-qmeta .qtot{font-family:var(--ds-mono);font-weight:var(--ds-w-semi);color:var(--ds-st-done-ink)}
  .vv-qacts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
  .vv-qbtn{border:1px solid var(--ctl);background:var(--ds-surface);color:var(--navy);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);padding:6px 12px;border-radius:var(--ds-r-md);cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
  .vv-qbtn.prime{border-color:var(--blue-bd);background:var(--blue-bg);color:var(--blue-tx)}
  .vv-qempty{font-size:var(--ds-text-sm);color:var(--muted);padding:2px 0 4px;line-height:1.5}
  /* segregated "possibly related (different site — verify)" subsection (audit fix 4) */
  .vv-qmaybe{margin-top:11px;padding-top:11px;border-top:1px dashed var(--ctl)}
  .vv-qmaybe-h{display:flex;align-items:center;gap:6px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.4px;text-transform:uppercase;color:var(--ds-st-route-ink)}
  .vv-qmaybe-h .vv-qmw{font-size:var(--ds-text-sm)}
  .vv-qmaybe-h .fc{margin-left:auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--ds-st-route-ink);background:var(--find-tint);border:1px solid var(--find-bd);border-radius:var(--ds-r-full);padding:1px 8px}
  .vv-qmaybe-note{font-size:var(--ds-text-caps);color:var(--muted);line-height:1.45;margin:5px 0 9px}
  .vv-qcard.maybe{border-style:dashed;border-color:var(--find-bd);background:var(--find-tint);opacity:.92}
  .vv-qverify{flex:0 0 auto;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.3px;text-transform:uppercase;padding:3px 7px;border-radius:var(--ds-r-md);background:var(--find-badge-bg);color:var(--find-badge-tx);border:1px solid var(--find-badge-bd)}
  /* readings side-pane */
  .vv-readpane{border:1px solid var(--line);border-radius:var(--ds-r-lg);background:var(--ds-surface);overflow:hidden}
  .vv-readpane .rp-h{padding:11px 14px 9px;font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.6px;text-transform:uppercase;color:var(--ds-ink-3)}
  .vv-read{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 14px;border-top:1px solid var(--line2)}
  .vv-read .rl{font-size:var(--ds-text-sm);color:var(--muted)}
  .vv-read .rv{font-family:var(--ds-mono);font-size:var(--ds-text-base);font-weight:var(--ds-w-semi);color:var(--ds-ink);white-space:nowrap;text-align:right}
  /* materials + labor */
  .vv-matrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line2);font-size:var(--ds-text-base)}
  .vv-matrow:first-of-type{border-top:0}
  .vv-matrow .mq{flex:0 0 auto;font-family:var(--ds-mono);font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);color:var(--ds-ink-2);background:var(--ds-tint);border-radius:var(--ds-r-sm);padding:2px 7px;min-width:30px;text-align:center}
  .vv-matrow .mn{flex:1;min-width:0}
  .vv-matrow .mn .mt{font-weight:600;color:var(--ink)}
  .vv-matrow .mn .mp{font-family:var(--ds-mono);font-size:var(--ds-text-caps);color:var(--muted)}
  .vv-matrow .ms{flex:0 0 auto;font-family:var(--ds-mono);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);color:var(--ds-ink-2)}
  .vv-laborbig{display:flex;align-items:baseline;gap:7px}
  .vv-laborbig .n{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);color:var(--navy);font-variant-numeric:tabular-nums;line-height:1}
  .vv-laborbig .u{font-size:var(--ds-text-sm);color:var(--muted);font-weight:600}
  .vv-emptyline{font-size:var(--ds-text-sm);color:var(--muted);line-height:1.5}
  /* START A QUOTE action — mirrors the completed-job pane's send-lg navy button */
  .vv-startquote{margin-top:11px;padding:13px 14px;border:1px solid var(--find-bd);background:var(--find-tint);border-radius:var(--ds-r-lg)}
  .vv-startquote .sqlab{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:.4px;text-transform:uppercase;color:var(--find-badge-tx);margin-bottom:8px}
  .vv-startquote .sqsub{font-size:var(--ds-text-sm);color:var(--ds-st-route-ink);line-height:1.5;margin-bottom:10px}
  .vv-startquote .sqfall{margin-top:9px;text-align:center}
  .vv-startquote .sqfall .vv-hlink{font-size:var(--ds-text-sm);color:var(--blue-tx);font-weight:var(--ds-w-semi);text-decoration:none}
  .vv-startquote .sqfall .vv-hlink:hover{text-decoration:underline}
      /* ===== Scheduling board ===== */
      .sched { --ink:#1c2330; --sec:#646c78; --faint:#676e77; --line:#ebedf0; --line2:#dfe2e6;
        --canvas:#f5f6f8; --surface:#fff; --accent:#14233b; --accent-soft:#eef1f6;
        --blue:#3b6fb0; --amber:#8a5a00; --amber-stroke:#8a5a00; --done:#737b88; --green:#2f8f4e; --red:#c0392f;
        --sh:0 1px 2px rgba(20,30,45,.05); --shlg:0 10px 28px rgba(20,30,45,.12);
        display:grid; grid-template-columns:312px minmax(0,1fr); height:calc(100vh - 150px); min-height:560px;
        background:var(--canvas); color:var(--ink); font-size:13px; }
      .sched.single { grid-template-columns:1fr; }
      .sched .ic { flex:0 0 auto; color:var(--faint); }
      .sched .muted { color:var(--faint); }
      .sched ::-webkit-scrollbar { width:10px; height:10px; } .sched ::-webkit-scrollbar-thumb { background:#d3d7dd; border-radius:6px; border:3px solid var(--canvas); }

      /* queue */
      .sched-queue { display:flex; flex-direction:column; min-height:0; background:var(--surface); border-right:1px solid var(--line); }
      .sched-queue-head { display:flex; align-items:center; justify-content:space-between; padding:15px 16px 12px; }
      .qh-title { font-size:13px; font-weight:700; color:var(--ink); }
      .sched-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 7px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:700; }
      .sched-queue-list { flex:1; overflow:auto; padding:4px 12px 14px; display:flex; flex-direction:column; gap:9px; }
      .sched-card { border:1px solid var(--line2); border-radius:12px; background:var(--surface); padding:12px; cursor:grab; box-shadow:var(--sh); transition:box-shadow .14s, transform .14s, border-color .14s; }
      .sched-card:hover { box-shadow:var(--shlg); transform:translateY(-1px); border-color:#cfd4db; }
      .sched-card:active { cursor:grabbing; }
      .card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
      .card-site { font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.25; }
      .card-svc { font-size:12px; color:var(--sec); margin-top:3px; line-height:1.35; }
      .card-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; font-size:11.5px; color:var(--sec); }
      .card-meta span { display:inline-flex; align-items:center; gap:4px; }
      .card-flags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
      .sched-chip { display:inline-flex; align-items:center; gap:4px; height:21px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:600; background:#f3f4f6; color:var(--sec); border:1px solid var(--line2); }
      .sched-chip.amber { background:#fbf3e6; color:var(--amber); border-color:#f0e0c4; }
      .sched-chip.test { background:var(--purple-bg); color:var(--purple-tx); border-color:var(--purple-bd); font-weight:800; letter-spacing:.03em; }
      .sched-chip .ic { color:currentColor; }
      .sched-pill { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px; letter-spacing:.01em; }
      .sched-pill.urgent { background:#fbecea; color:var(--red); }
      .sched-pill.high { background:#fbf3e6; color:var(--amber); }
      .sched-pill.muted { background:#f1f2f4; color:var(--faint); }
      .sched-suggest-line { display:flex; align-items:center; gap:6px; margin-top:10px; padding:7px 9px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:11.5px; line-height:1.3; }
      .sched-suggest-line .ic { color:var(--accent); }
      .card-actions { margin-top:10px; }

      /* board + toolbar */
      .sched-board { display:flex; flex-direction:column; min-width:0; min-height:0; }
      .sched-toolbar { display:flex; align-items:center; gap:9px; padding:11px 16px; background:var(--surface); border-bottom:1px solid var(--line); flex-wrap:wrap; }
      .sched-seg { display:inline-flex; background:#eef0f3; border-radius:9px; padding:3px; gap:2px; }
      .sched-seg button { border:0; background:transparent; color:var(--sec); font-weight:600; font-size:12.5px; padding:6px 13px; border-radius:7px; cursor:pointer; transition:background .12s,color .12s; }
      .sched-seg button.on { background:var(--surface); color:var(--accent); box-shadow:var(--sh); }
      .sched-seg.small button { padding:5px 9px; font-size:11px; }
      .sched-datenav { display:flex; align-items:center; gap:4px; }
      .sched-ghost { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line2); background:var(--surface); color:var(--ink); border-radius:8px; padding:7px 11px; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .12s,border-color .12s; }
      .sched-ghost:hover { background:#f6f7f9; border-color:#cfd4db; }
      .sched-ghost.icon { padding:7px; }
      .sched-ghost.sm { padding:5px 9px; font-size:12px; }
      .sched-ghost.disabled { opacity:.45; pointer-events:none; }
      .sched-ghost.danger { color:var(--red); border-color:#eccfcc; } .sched-ghost.danger:hover { background:#fbecea; }
      .sched-ghost .ic { color:var(--sec); }
      .sched-date { font-size:13px; font-weight:700; color:var(--ink); margin-left:6px; }
      .sched-spacer { flex:1; }
      .sched-summary { display:flex; align-items:center; gap:9px; color:var(--sec); font-size:12px; white-space:nowrap; }
      .sched-summary strong { color:var(--ink); font-weight:700; }
      .sched-summary .warn strong, .sched-summary .warn { color:var(--red); }
      .sched-summary .dotsep { width:3px; height:3px; border-radius:50%; background:#cdd2d9; display:inline-block; }
      .sched-search { display:flex; align-items:center; gap:7px; padding:0 11px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); min-width:188px; }
      .sched-search input { border:0; outline:0; min-height:34px; background:transparent; font-size:13px; color:var(--ink); width:100%; }
      .sched-sel { min-height:36px; border:1px solid var(--line2); border-radius:8px; padding:0 10px; background:var(--surface); font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; }

      /* legend */
      .sched-legend { display:flex; align-items:center; gap:16px; padding:8px 16px; background:var(--canvas); border-bottom:1px solid var(--line); font-size:11.5px; color:var(--sec); flex-wrap:wrap; }
      .sched-legend span { display:inline-flex; align-items:center; gap:6px; }
      .lg-dot { width:9px; height:9px; border-radius:50%; background:var(--blue); }
      .lg-dot.status-scheduled{background:var(--blue);} .lg-dot.status-enroute{background:var(--amber-stroke);} .lg-dot.status-onsite{background:var(--green);} .lg-dot.status-done{background:var(--done);}
      .lg-band { width:14px; height:9px; border-radius:3px; background:#f4f5f7; border:1px solid var(--line2); }
      .lg-now { width:2px; height:11px; border-radius:1px; background:var(--accent); position:relative; }
      .lg-now::after { content:""; position:absolute; top:-2px; left:-2px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
      .lg-warn { color:var(--amber); } .lg-warn .ic { color:var(--amber-stroke); }

      /* banner */
      .sched-banner { display:flex; align-items:center; gap:8px; margin:12px 16px 0; padding:9px 13px; border-radius:9px; background:var(--surface); border:1px solid var(--line2); color:var(--sec); font-size:12.5px; font-weight:600; }
      .sched-banner.risk { background:#fbecea; border-color:#eccfcc; color:var(--red); } .sched-banner.risk .ic{color:var(--red);}
      .sched-banner.warn { background:#fbf3e6; border-color:#f0e0c4; color:var(--amber); } .sched-banner.warn .ic{color:var(--amber);}

      /* timeline */
      .sched-scroll { flex:1; overflow:auto; min-height:0; padding-bottom:14px; }
      .sched-timehdr { display:grid; position:sticky; top:0; z-index:6; background:var(--surface); border-bottom:1px solid var(--line2); }
      .sched-timehdr .corner { border-right:1px solid var(--line); }
      .sched-ticks { position:relative; height:30px; }
      .sched-tick { position:absolute; top:0; bottom:0; border-left:1px solid var(--line); padding:8px 0 0 6px; font-size:10.5px; font-weight:600; color:var(--faint); }
      .sched-lanes { position:relative; }
      .sched-lane { display:grid; border-bottom:1px solid var(--line); }
      .sched-lane:hover .sched-lanehead { background:#fafbfc; }
      .sched-lanehead { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-right:1px solid var(--line); background:var(--surface); position:sticky; left:0; z-index:4; }
      .avatar { width:30px; height:30px; border-radius:50%; color:#fff; font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; letter-spacing:.02em; }
      .avatar.sm { width:24px; height:24px; font-size:10px; }
      .avatar.ghost { background:#cdd3db; color:#fff; }
      .lh-id { min-width:0; flex:1; }
      .lh-name { font-size:13px; font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .lh-meta { font-size:11px; color:var(--faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .cap { display:flex; align-items:center; gap:7px; margin-top:8px; }
      .cap-track { flex:1; min-width:18px; height:5px; border-radius:999px; background:#edeff2; overflow:hidden; }
      .cap-fill { height:100%; border-radius:999px; background:var(--green); }
      .cap.low .cap-fill { background:#cfd4db; } .cap.over .cap-fill { background:var(--red); }
      .cap-num { font-size:10.5px; font-weight:700; color:var(--sec); }
      .cap.over .cap-num { color:var(--red); }
      .cap-over-tag { display:inline-flex; align-items:center; gap:3px; margin-left:4px; font-size:9.5px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:.04em; }
      .sched-track { position:relative; height:80px; background-image:linear-gradient(90deg,var(--line) 0 1px,transparent 1px); background-repeat:repeat; }
      .sched-track.drop-target { background-color:#eef5ef; box-shadow:inset 0 0 0 2px var(--green); }
      .sched-nowline { position:absolute; top:0; bottom:0; width:2px; background:var(--accent); z-index:5; pointer-events:none; }
      .now-dot { position:absolute; top:-3px; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
      .now-label { position:absolute; top:-13px; left:5px; font-size:9.5px; font-weight:700; color:var(--accent); background:var(--surface); padding:0 3px; border-radius:3px; white-space:nowrap; box-shadow:var(--sh); }

      /* blocks */
      .sched-block { position:absolute; top:7px; bottom:7px; display:flex; border:1px solid var(--line2); border-radius:8px; background:var(--surface); overflow:hidden; cursor:grab; box-shadow:var(--sh); transition:box-shadow .1s; }
      .sched-block:hover { box-shadow:var(--shlg); z-index:3; }
      .sched-block:active { cursor:grabbing; }
      .sched-block.dim { opacity:.32; }
      .b-rail { width:3px; flex:0 0 auto; background:var(--blue); }
      .sched-block.status-enroute .b-rail { background:var(--amber-stroke); } .sched-block.status-onsite .b-rail { background:var(--green); } .sched-block.status-done .b-rail { background:var(--done); }
      .b-body { padding:6px 9px; min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; }
      .b-line1 { display:flex; align-items:center; justify-content:space-between; gap:5px; }
      .b-site { font-size:12px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .b-line2 { font-size:10.5px; color:var(--faint); font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .b-tags { display:inline-flex; align-items:center; gap:3px; flex:0 0 auto; }
      .bt { display:inline-flex; color:var(--faint); } .bt.warn { color:var(--amber); }
      .bt-num { font-size:9.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); border-radius:4px; padding:0 4px; }
      .sched-block.status-done .b-site, .sched-block.status-done .b-line2 { color:var(--faint); }
      .sched-block.type-travel, .sched-block.type-lunch, .sched-block.type-parts { background:#f4f5f7; }
      .sched-block.type-travel .b-rail, .sched-block.type-lunch .b-rail, .sched-block.type-parts .b-rail { background:#c6cbd3; }
      .sched-block.type-travel .b-site, .sched-block.type-lunch .b-site, .sched-block.type-parts .b-site { font-weight:600; color:var(--sec); }
      .sched-block.narrow { justify-content:center; }
      .sched-block.narrow .b-rail { display:none; }
      .sched-block.narrow .b-body { padding:0; align-items:center; }
      .sched-block.narrow .b-site, .sched-block.narrow .b-line2 { display:none; }
      .sched-block.narrow .b-glyph { display:flex; color:var(--sec); }
      .sched-block .b-glyph { display:none; }
      .sched-block.conflict { border-color:var(--red); box-shadow:0 0 0 2px rgba(192,57,47,.18); }
      .sched-block.conflict .b-rail { background:var(--red); }
      .sched-block.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(20,35,59,.18); }
      .sched-resize { position:absolute; top:0; right:0; bottom:0; width:9px; cursor:ew-resize; }

      /* detail drawer */
      .sched-detail { position:fixed; right:18px; bottom:18px; z-index:30; width:min(380px,calc(100vw - 36px)); background:var(--surface); border:1px solid var(--line2); border-radius:14px; box-shadow:var(--shlg); overflow:hidden; color:var(--ink); }
      .sd-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:15px 16px 13px; border-bottom:1px solid var(--line); }
      .sd-jn { font-size:11px; font-weight:700; color:var(--faint); letter-spacing:.03em; }
      .sd-site { font-size:15px; font-weight:700; color:var(--ink); margin-top:2px; line-height:1.25; }
      .sd-head .sched-ghost { border:0; padding:5px; } .sd-head .sched-ghost:hover{background:#f1f2f4;}
      .sd-svc { padding:12px 16px 0; color:var(--sec); font-size:13px; line-height:1.45; }
      .sd-rows { padding:12px 16px 4px; display:flex; flex-direction:column; gap:9px; }
      .sd-row { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:12.5px; }
      .sd-k { color:var(--faint); flex:0 0 auto; }
      .sd-v { color:var(--ink); font-weight:600; text-align:right; }
      .sd-v .risk, .risk { color:var(--red); font-weight:700; }
      .sd-section { padding:13px 16px 0; margin-top:9px; border-top:1px solid var(--line); }
      .sd-label { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:8px; }
      .sched-status-chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px; border-radius:999px; font-size:12px; font-weight:700; background:var(--accent-soft); color:var(--blue); }
      .sched-status-chip.status-enroute { color:var(--amber-stroke); background:#fbf3e6; }
      .sched-status-chip.status-onsite { color:var(--green); background:#eaf4ee; }
      .sched-status-chip.status-done { color:var(--done); background:#f1f2f4; }
      .ss-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line2); background:var(--surface); border-radius:9px; padding:8px 10px; margin-bottom:6px; cursor:pointer; transition:background .12s; }
      .ss-row:hover { background:#f6f7f9; }
      .ss-id { display:flex; flex-direction:column; min-width:0; }
      .ss-name { font-size:13px; font-weight:700; color:var(--ink); }
      .ss-reason { font-size:11px; color:var(--faint); }
      .sd-actions { display:flex; gap:8px; padding:14px 16px; }
      .sd-actions .sched-ghost { flex:1; justify-content:center; }

      /* week */
      .sched-week { flex:1; overflow:auto; padding:16px; }
      .wk-grid { display:grid; grid-template-columns:220px repeat(7,minmax(94px,1fr)); background:var(--surface); border:1px solid var(--line2); border-radius:12px; overflow:hidden; box-shadow:var(--sh); }
      .wk-hd { padding:11px 10px; border-bottom:1px solid var(--line2); border-left:1px solid var(--line); background:#fafbfc; font-size:11.5px; font-weight:700; color:var(--sec); text-align:center; }
      .wk-hd.name { text-align:left; border-left:0; } .wk-hd.today { background:var(--accent-soft); color:var(--accent); }
      .wk-cell { padding:11px 10px; border-bottom:1px solid var(--line); border-left:1px solid var(--line); min-height:58px; }
      .wk-cell.name { display:flex; align-items:center; gap:9px; border-left:0; }
      .wk-name { display:flex; flex-direction:column; font-size:12.5px; font-weight:700; color:var(--ink); } .wk-name small { font-size:10.5px; font-weight:500; color:var(--faint); }
      .wk-cell.today { background:#fafcfb; }
      .wk-empty { color:#8b929c; }

      /* map */
      .sched-map { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; padding:16px; overflow:auto; }
      .map-col { border:1px solid var(--line2); border-radius:12px; background:var(--surface); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--sh); }
      .map-col-head { display:flex; align-items:center; gap:7px; padding:11px 13px; font-size:13px; font-weight:700; color:var(--ink); border-bottom:1px solid var(--line); } .map-col-head .ic{color:var(--accent);} .map-col-head .sched-count{margin-left:auto;}
      .map-techs { display:flex; flex-wrap:wrap; gap:6px; padding:11px 13px; border-bottom:1px solid var(--line); }
      .map-tech { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink); background:#f6f7f9; border:1px solid var(--line); border-radius:999px; padding:2px 10px 2px 2px; }
      .map-jobs { padding:7px 9px; display:flex; flex-direction:column; gap:2px; }
      .map-job { display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:transparent; font-size:12.5px; color:var(--ink); cursor:pointer; padding:7px 8px; border-radius:8px; }
      .map-job:hover { background:#f6f7f9; }
      .mj-site { flex:1; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .map-job .muted { margin-left:auto; font-size:11px; }
      .map-queued { padding:9px 13px; border-top:1px dashed var(--line2); color:var(--amber); font-size:11.5px; font-weight:600; background:#fdf8ef; }
      .pad { padding:8px; }

      /* host + empty + toast */
      .sched-host { display:block; min-height:560px; }
      .sched-gate { padding:46px 24px; max-width:520px; margin:40px auto; text-align:center; }
      .sched-gate .gbig { font-size:18px; font-weight:800; color:#1c2330; }
      .sched-gate .gsub { margin-top:9px; font-size:13.5px; color:#646c78; line-height:1.55; }
      .sched-empty { padding:30px 18px; text-align:center; color:var(--sec); font-size:13px; font-weight:600; }
      .sched-empty span { display:block; margin-top:5px; font-size:12px; font-weight:500; color:var(--faint); }
      .sched-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(14px); z-index:60; background:var(--accent,#14233b); color:#fff; font-size:13px; font-weight:600; padding:11px 18px; border-radius:999px; box-shadow:0 12px 30px rgba(20,30,45,.25); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
      .sched-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

      /* Billing review v2 — one single-header operator modal, styled to the
         existing Contract Ops surface. It is rendered only when the backend
         returns billingReviewRequired:true, so the legacy flow is unchanged
         while the feature flag is off. */
      .bill-shade {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: color-mix(in srgb, var(--ds-chrome) 56%, transparent);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
      }
      .bill-modal {
        width: min(960px, 100%);
        max-height: min(880px, calc(100vh - 48px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--ds-surface);
        border: 1px solid var(--ds-rule);
        border-radius: var(--ds-r-lg);
        box-shadow: var(--ds-e-pop);
        color: var(--ds-ink);
      }
      .bill-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 22px;
        padding: 16px 22px;
        border-bottom: 1px solid var(--ds-line);
      }
      .bill-head h2 {
        margin: 0;
        font-size: var(--ds-text-md);
        font-weight: var(--ds-w-semi);
      }
      .bill-site {
        margin-top: 5px;
        font-weight: var(--ds-w-semi);
      }
      .bill-address, .bill-class {
        margin-top: 3px;
        color: var(--ds-ink-2);
        font-size: var(--ds-text-sm);
      }
      .bill-contact {
        max-width: 280px;
        text-align: right;
        overflow-wrap: anywhere;
      }
      .bill-cap {
        color: var(--ds-ink-3);
        font-size: var(--ds-text-caps);
        font-weight: var(--ds-w-semi);
        letter-spacing: 0.4px;
        text-transform: uppercase;
      }
      .bill-contact strong {
        display: block;
        margin-top: 3px;
      }
      .bill-contact span {
        display: block;
        margin-top: 2px;
        color: var(--ds-ink-2);
        font-size: var(--ds-text-sm);
      }
      .bill-scroll {
        overflow: auto;
        padding: 18px 22px;
      }
      .bill-section {
        margin-bottom: 18px;
      }
      .bill-section:last-child {
        margin-bottom: 0;
      }
      .bill-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 8px;
      }
      .bill-section-head .bill-title {
        margin: 0;
      }
      .bill-title-group {
        min-width: 0;
      }
      .bill-title-line {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      .bill-title-line .bill-title {
        margin: 0;
      }
      .bill-edit-badge {
        display: inline-flex;
        align-items: center;
        min-height: 20px;
        padding: 2px 7px;
        border: 1px solid var(--ds-rule);
        border-radius: var(--ds-r-full);
        background: var(--ds-canvas);
        color: var(--ds-ink-2);
        font-size: var(--ds-text-caps);
        font-weight: var(--ds-w-semi);
        letter-spacing: 0.45px;
        line-height: 1;
        white-space: nowrap;
      }
      .bill-edit-badge.editable {
        border-color: var(--ds-st-site-bd);
        background: var(--ds-st-site-bg);
        color: var(--ds-st-site-ink);
      }
      .bill-edit-badge.fixed,
      .bill-edit-badge.read-only {
        border-color: var(--ds-rule);
        background: var(--ds-canvas);
        color: var(--ds-ink-2);
      }
      .bill-edit-guidance {
        margin-top: 4px;
        color: var(--ds-ink-2);
        font-size: var(--ds-text-caps);
        font-weight: var(--ds-w-medium);
        line-height: 1.35;
      }
      .bill-section-tools {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        flex-wrap: wrap;
      }
      .bill-title {
        margin: 0 0 8px;
        color: var(--ds-ink-3);
        font-size: var(--ds-text-caps);
        font-weight: var(--ds-w-semi);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      .bill-add {
        border: 0;
        background: transparent;
        color: var(--ds-st-done-ink);
        font: inherit;
        font-size: var(--ds-text-sm);
        font-weight: var(--ds-w-semi);
        cursor: pointer;
      }
      .bill-add.bill-add-primary {
        min-height: 34px;
        padding: 7px 11px;
        border: 1px solid var(--ds-st-site-bd);
        border-radius: var(--ds-r-md);
        background: var(--ds-st-site-bg);
        color: var(--ds-st-site-ink);
        box-shadow: none;
      }
      .bill-add.bill-add-primary:hover {
        border-color: var(--ds-st-site-bd);
        background: var(--ds-st-site-bg);
      }
      .bill-add.bill-add-primary:focus-visible {
        outline: var(--ds-focus-w) solid var(--ds-focus);
        outline-offset: 2px;
      }
      .bill-add:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .bill-labor {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--ds-text-base);
      }
      .bill-labor th, .bill-table th {
        padding: 9px 10px;
        background: var(--ds-canvas);
        border-bottom: 1px solid var(--ds-line);
        color: var(--ds-ink-3);
        font-size: var(--ds-text-caps);
        font-weight: var(--ds-w-semi);
        letter-spacing: 0.4px;
        text-align: left;
        text-transform: uppercase;
      }
      .bill-labor td, .bill-table td {
        padding: 9px 10px;
        border-bottom: 1px solid var(--ds-line);
        vertical-align: middle;
      }
      .bill-labor .num, .bill-table .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
      }
      .bill-input, .bill-select, .bill-note {
        border: 1px solid var(--ds-field);
        border-radius: var(--ds-r-md);
        background: var(--ds-surface);
        color: var(--ds-ink);
        font: inherit;
      }
      .bill-editor {
        border-color: var(--ds-st-site-bd);
        background: var(--ds-st-site-bg);
        box-shadow: none;
      }
      .bill-editor:hover {
        border-color: var(--ds-st-site-bd);
      }
      .bill-editor:focus-visible {
        outline: var(--ds-focus-w) solid var(--ds-focus);
        outline-offset: 1px;
        border-color: var(--ds-st-site-bd);
        background: var(--ds-surface);
      }
      .bill-input {
        width: 80px;
        padding: 7px 8px;
        text-align: right;
      }
      .bill-input-source {
        margin-top: 3px;
        color: var(--ds-ink-3);
        font-size: var(--ds-text-caps);
        font-weight: 500;
        line-height: 1.25;
      }
      .bill-select {
        width: 100%;
        min-width: 180px;
        padding: 7px 8px;
      }
      .bill-period {
        min-width: 0;
        width: 145px;
        margin-top: 5px;
        padding: 5px 7px;
        font-size: var(--ds-text-caps);
      }
      .bill-rate {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 5px;
        color: var(--ds-ink-2);
        white-space: nowrap;
      }
      .bill-rate .bill-input {
        width: 92px;
      }
      .bill-note {
        width: 100%;
        min-height: 72px;
        padding: 9px 11px;
        resize: vertical;
      }
      .bill-evidence {
        padding: 7px 10px;
        background: var(--ds-canvas);
        color: var(--ds-ink-2);
        font-size: var(--ds-text-sm);
      }
      .bill-table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--ds-text-base);
      }
      .bill-table tfoot td {
        background: var(--ds-canvas);
        font-weight: var(--ds-w-semi);
      }
      .bill-totals {
        width: 100%;
        max-width: 430px;
        margin-left: auto;
        border-collapse: collapse;
        font-size: var(--ds-text-base);
      }
      .bill-totals td {
        padding: 5px 0 5px 16px;
      }
      .bill-totals td:first-child {
        color: var(--ds-ink-2);
      }
      .bill-totals .num {
        text-align: right;
        white-space: nowrap;
      }
      .bill-totals .grand td {
        padding-top: 9px;
        border-top: 1px solid var(--ds-line);
        color: var(--ds-ink);
        font-weight: var(--ds-w-semi);
      }
      .bill-taxwhy {
        display: block;
        margin-top: 2px;
        color: var(--ds-ink-3);
        font-size: var(--ds-text-caps);
      }
      .bill-warn {
        margin-top: 12px;
        padding: 9px 11px;
        border-left: 3px solid var(--ds-st-route-bd);
        background: var(--ds-st-route-bg);
        color: var(--ds-st-route-ink);
        font-size: var(--ds-text-sm);
        line-height: 1.45;
      }
      .bill-material-advisory {
        margin: -1px 0 8px;
        padding: 7px 9px;
        border-left: 3px solid var(--ds-st-route-bd);
        background: var(--ds-st-route-bg);
        color: var(--ds-st-route-ink);
        font-size: var(--ds-text-sm);
        line-height: 1.4;
      }
      .bill-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        border-top: 1px solid var(--ds-line);
        background: var(--ds-canvas);
      }
      .bill-grow {
        flex: 1;
      }
      .bill-btn {
        border: 1px solid var(--ds-field);
        border-radius: var(--ds-r-md);
        padding: 10px 15px;
        background: var(--ds-surface);
        color: var(--ds-ink);
        font: inherit;
        font-weight: var(--ds-w-semi);
        cursor: pointer;
      }
      .bill-btn.primary {
        border-color: var(--ds-st-done);
        background: var(--ds-st-done);
        color: var(--ds-chrome-fg);
      }
      .bill-btn.danger {
        border-color: var(--ds-field);
        color: var(--ds-st-late-ink);
        background: var(--ds-surface);
      }
      .bill-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
      .bill-loading {
        padding: 52px 22px;
        text-align: center;
        color: var(--ds-ink-2);
      }
      .bill-error {
        padding: 28px 22px;
        color: var(--ds-st-late-ink);
      }
      .bill-state-title {
        font-size: var(--ds-text-md);
        font-weight: var(--ds-w-semi);
        color: var(--ds-ink);
      }
      .bill-state-copy {
        margin-top: 5px;
        color: var(--ds-ink-2);
        font-size: var(--ds-text-base);
        line-height: 1.5;
      }
      @media (max-width: 680px) {
        .bill-shade {
          padding: 0;
        }
        .bill-modal {
          height: 100vh;
          max-height: none;
          border: 0;
          border-radius: 0;
        }
        .bill-head {
          display: grid;
        }
        .bill-contact {
          text-align: left;
        }
        .bill-table thead, .bill-labor thead {
          display: none;
        }
        .bill-table,
        .bill-table tbody,
        .bill-table tfoot,
        .bill-table tr,
        .bill-table td,
        .bill-labor,
        .bill-labor tbody,
        .bill-labor tr,
        .bill-labor td {
          display: block;
          width: 100%;
        }
        .bill-table tr, .bill-labor tr {
          padding: 6px 0;
          border-bottom: 1px solid var(--ds-line);
        }
        .bill-table td, .bill-labor td {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          padding: 5px 8px;
          border: 0;
          text-align: right !important;
          white-space: normal !important;
        }
        .bill-table td:before, .bill-labor td:before {
          content: attr(data-label);
          color: var(--ds-ink-3);
          font-weight: var(--ds-w-semi);
          text-align: left;
        }
        .bill-table tfoot td:first-child {
          justify-content: flex-start;
          text-align: left !important;
        }
        .bill-labor {
          font-size: var(--ds-text-sm);
        }
        .bill-labor .bill-select {
          width: min(190px, 62vw);
          min-width: 0;
        }
        .bill-labor .bill-input {
          width: 86px;
        }
        .bill-labor .bill-rate .bill-input {
          width: 80px;
        }
        .bill-section-head,
        .bill-section-tools {
          align-items: stretch;
        }
        .bill-section-head {
          flex-direction: column;
        }
        .bill-actions {
          flex-wrap: wrap;
        }
      }

/* ==========================================================================
   Navy system, Phase 4 (2026-09-24): Contracts, History, Documents, Settings,
   PCSP dialog, recipients, customer emails, billing base, empty/banner states.
   Presentation only; tokens only (design-tokens.css). Standard:
   docs/design-system/README.md. Glyph masks are the reference D14 family.
   ========================================================================== */
:root{
  --p4-g-late:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cmask id='m'%3E%3Crect width='12' height='12' fill='%23fff'/%3E%3Cpath d='M6 3.2v3.3' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.6' r='.85' fill='%23000'/%3E%3C/mask%3E%3Ccircle cx='6' cy='6' r='5.5' mask='url%28%23m%29'/%3E%3C/svg%3E");
  --p4-g-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M6 3.7v2.6' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='8.1' r='.8'/%3E%3C/svg%3E");
  --p4-g-sched:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.75' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --p4-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.9 9.65 5.8l4.2.33-3.2 2.73.98 4.1L8 10.75 4.37 12.96l.98-4.1-3.2-2.73 4.2-.33Z' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Page heads on paper (D5); the Saira title stays the only display text (D3). */
#app>.sc-head,.docview,.setview,.phshell,.phscroll{background:var(--ds-canvas)}
.sc-head{border-bottom:1px solid var(--ds-line);padding:var(--ds-s-4) var(--ds-gutter)}
.sc-head .sub{color:var(--ds-ink-3);font-size:var(--ds-text-sm)}

/* Tables (Contracts, Documents, Settings senders): paper, caps heads, 0.5px row rules. */
.gt thead th,.ctab thead th{background:var(--ds-canvas);color:var(--ds-ink-3);font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-caps);text-transform:uppercase;border-bottom:1px solid var(--ds-line)}
.ctab th.srt:hover,.ctab th.srt.on{color:var(--ds-ink)}
.gt td,.ctab td{border-bottom:var(--ds-rule-hair) solid var(--ds-rule)}
.gt tbody tr:hover,tr.ctr:hover{background:var(--ds-paper-hover)}
.ctab td.ralt{color:var(--ds-ink-2);font-weight:var(--ds-w-medium)}
.gt td b,.ctab td b{font-weight:var(--ds-w-semi)}
.contracts-more{background:var(--ds-canvas);border-top:1px solid var(--ds-line);color:var(--ds-ink-3)}
.contracts-more .send-lg{background:var(--ds-surface);color:var(--ds-ink);border-color:var(--ds-field);box-shadow:none;font-weight:var(--ds-w-medium)}
.contracts-more .send-lg:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}

/* Let the desktop worklist use the space below its actual page controls. */
#app:has(>.ctwrap[data-contract-layout="desktop"]){display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:calc(var(--ds-row-h) * 7)}
#app:has(>.ctwrap[data-contract-layout="desktop"])>.top,
#app:has(>.ctwrap[data-contract-layout="desktop"])>.sc-head,
#app:has(>.ctwrap[data-contract-layout="desktop"])>.subbar,
#app:has(>.ctwrap[data-contract-layout="desktop"])>.contracts-stale-banner{flex:none}
.ctwrap[data-contract-layout="desktop"]{flex:1;min-height:0;max-height:none;min-width:0;width:100%;overflow-x:hidden}
.ctwrap[data-contract-layout="desktop"] .ctab{table-layout:fixed;min-width:0}
.ctab thead th:nth-child(1){width:12%}
.ctab thead th:nth-child(2){width:18%}
.ctab thead th:nth-child(3){width:18%}
.ctab thead th:nth-child(4){width:12%}
.ctab thead th:nth-child(5){width:14%}
.ctab thead th:nth-child(6){width:12%}
.ctab thead th:nth-child(7){width:14%}
.ctab thead{position:sticky;top:0;z-index:2;background:var(--ds-canvas)}
.ctab thead th{position:static;white-space:normal}
.ctab .ctr td{overflow-wrap:anywhere}
.ctab .ctr .nowrap,.ctab .ctr .cact,.ctab .ctr .pill{white-space:normal}
.ctab .ctr .crate-list{min-width:0;max-width:100%}
.ctab .ctr .crate{flex-wrap:wrap;white-space:normal}
.ctab .ctr .crate-empty,.ctab .ctr .crate-note{white-space:normal}
.ctab .ctr .cfix,.ctab .ctr .mkjob{max-width:100%}
.ceq-detail{display:block;margin-top:var(--ds-s-1);color:var(--ds-ink-3);font-size:var(--ds-text-sm);font-weight:var(--ds-w-regular);line-height:1.35;overflow-wrap:anywhere}
.cnote{display:block;margin-top:var(--ds-s-1);color:var(--ds-st-route-ink);font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);line-height:var(--ds-lh-sm);overflow-wrap:anywhere}
.clast-done .clast-tech{display:inline}
.cjob-status{display:block;margin-top:var(--ds-s-1);color:var(--ds-ink-2);font-size:var(--ds-text-sm);font-weight:var(--ds-w-regular);line-height:1.35;overflow-wrap:anywhere;text-align:left}
.cjob-status .cjob-unbooked{color:var(--ds-st-route-ink)}
.cjob-more{display:block;margin-top:var(--ds-s-1);font-size:var(--ds-text-sm);font-weight:var(--ds-w-regular)}
@media(min-width:701px) and (max-width:1280px){
  .ctab thead th,.ctab .ctr td{padding:var(--ds-s-2)}
  .ctab .ctr .mkjob{padding:var(--ds-s-2);font-size:var(--ds-text-sm)}
  .ctab .ctr .exchev{margin-left:var(--ds-s-1)}
}

/* Contracts: due groups are a status word on a rule, no band fill (6.5); the open
   contract is one white band with the 3px navy rail (6.6). */
tr.grp td{background:var(--ds-canvas);box-shadow:none;border-top:0;border-bottom:var(--ds-rule-hair) solid var(--ds-rule);padding:var(--ds-s-4) 14px var(--ds-s-2)}
tr.grp .gname{display:inline-flex;align-items:center;gap:6px;font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);letter-spacing:0;text-transform:none;color:var(--ds-ink-2)}
tr.grp.gover .gname,tr.grp.gsoon .gname{color:var(--ds-ink-2)}
tr.grp.gover .gname::before,tr.grp.gsoon .gname::before{content:"";width:12px;height:12px;flex:none;-webkit-mask:var(--p4-g-late) center/12px 12px no-repeat;mask:var(--p4-g-late) center/12px 12px no-repeat;background:var(--ds-st-late)}
tr.grp.gsoon .gname::before{-webkit-mask-image:var(--p4-g-warn);mask-image:var(--p4-g-warn);background:var(--ds-st-route)}
tr.grp .gn{color:var(--ds-ink-3);font-weight:var(--ds-w-medium)}
tr.ctr.open{background:var(--ds-surface);box-shadow:inset 3px 0 0 var(--ds-selection)}
tr.ctr.open .exchev{color:var(--ds-ink)}
tr.exrow td{background:var(--ds-surface);border-bottom:1px solid var(--ds-line);box-shadow:inset 3px 0 0 var(--ds-selection)}
tr.ctr:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:-2px}
.cdue b.nx,.cdue b.nx.over,.cdue b.nx.soon{color:var(--ds-ink);font-weight:var(--ds-w-semi)}
.cdue .rel,.ccard .cc-due .rel{display:inline-flex;align-items:center;gap:6px;font-weight:var(--ds-w-medium)}
.cdue .rel.over,.cdue .rel.soon,.ccard .cc-due .rel.over,.ccard .cc-due .rel.soon{color:var(--ds-ink-2)}
.cdue .rel.over::before,.cdue .rel.soon::before,.ccard .cc-due .rel.over::before,.ccard .cc-due .rel.soon::before{content:"";width:12px;height:12px;flex:none;background:var(--ds-st-late);-webkit-mask:var(--p4-g-late) center/12px 12px no-repeat;mask:var(--p4-g-late) center/12px 12px no-repeat}
.cdue .rel.soon::before,.ccard .cc-due .rel.soon::before{background:var(--ds-st-route);-webkit-mask-image:var(--p4-g-warn);mask-image:var(--p4-g-warn)}
.cdue .rel.ok,.ccard .cc-due .rel.ok{color:var(--ds-ink-3)}
.nx.over,.hrow.next .hby .nx.over{color:var(--ds-st-late-ink)}
.nx.soon{color:var(--ds-st-route-ink)} .nx.ok{color:var(--ds-ink-2)}
.flagdot{color:var(--ds-st-route)}
.ceq b{font-weight:var(--ds-w-semi)} .ceq .cnt{color:var(--ds-ink-3);font-weight:var(--ds-w-medium)}
.crecurring{display:block;color:var(--ds-ink-3);font-size:var(--ds-text-sm);font-weight:var(--ds-w-regular);margin-top:var(--ds-s-1)}
.cvalue{color:var(--ds-ink);font-weight:var(--ds-w-medium)}
.clast-tech{display:block;color:var(--ds-ink-3);font-size:var(--ds-text-sm);font-weight:var(--ds-w-regular)}
.crate-visible-note{display:block;margin-top:var(--ds-s-1);color:var(--ds-ink-2);font-size:var(--ds-text-sm);line-height:var(--ds-lh-sm);font-weight:var(--ds-w-regular)}
.cfix{display:inline-block;white-space:normal;text-align:left;color:var(--ds-ink-3);font-size:var(--ds-text-sm);line-height:var(--ds-lh-sm);font-weight:var(--ds-w-medium)}
.ccard .cc-meta .cc-last{grid-column:1 / -1}
/* One filled primary per view (D7): the page's "New contract" stays primary; row
   "Create job" is the secondary look (D17), same label and behaviour. */
.mkjob,.mkjob.ghost{background:var(--ds-surface);color:var(--ds-ink);border:1px solid var(--ds-field);border-radius:var(--ds-r-md);padding:7px 12px;font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);box-shadow:none}
.mkjob:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
.mkjob:disabled{background:var(--ds-disabled-bg);border-color:var(--ds-disabled-bd);color:var(--ds-disabled-fg);cursor:not-allowed}
.hdot{background:var(--ds-st-done)} .hdot.at{background:var(--ds-st-late)} .hdot.nx{background:var(--ds-ink);box-shadow:none}
.histh b,.crate-panel-h b,.cdocs-h b{font-weight:var(--ds-w-semi)}
.crate-note,.cdoc .maybe{background:var(--ds-st-route-bg);color:var(--ds-ink-2);border-radius:var(--ds-r-sm);font-weight:var(--ds-w-medium)}
.crate-panel-note{background:var(--ds-tint);color:var(--ds-ink-2);border-radius:var(--ds-r-md)}
.cdoc{border-color:var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium);border-radius:var(--ds-r-md)}
.cdoc:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
/* phone cards: white record tiles on paper, no shadow */
.ccard{border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);box-shadow:none}
.ccard.open{border-color:var(--ds-field);box-shadow:inset 3px 0 0 var(--ds-selection)}
.ccard .cc-expand{background:var(--ds-surface);border-radius:0 0 var(--ds-r-lg) var(--ds-r-lg)}
.cgrp{display:flex;align-items:center;gap:6px;font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);letter-spacing:0;text-transform:none;color:var(--ds-ink-2)}
.cgrp.over,.cgrp.soon{color:var(--ds-ink-2)}
.cgrp.over::before,.cgrp.soon::before{content:"";width:12px;height:12px;flex:none;background:var(--ds-st-late);-webkit-mask:var(--p4-g-late) center/12px 12px no-repeat;mask:var(--p4-g-late) center/12px 12px no-repeat}
.cgrp.soon::before{background:var(--ds-st-route);-webkit-mask-image:var(--p4-g-warn);mask-image:var(--p4-g-warn)}

/* D16 banner: neutral tint, the status colour only in the icon. */
.contracts-stale-banner{background:var(--ds-tint);border:0;border-radius:var(--ds-r-md);color:var(--ds-ink-2);font-size:var(--ds-text-base);font-weight:var(--ds-w-regular);margin:var(--ds-s-4) var(--ds-gutter) 0}
.contracts-stale-banner>span:first-child{color:var(--ds-st-route)}
.contracts-stale-banner .linkb{color:var(--ds-ink);font-size:var(--ds-text-base)}

/* D15 empty state: 24px outline star, title, one line, one action; left-aligned in
   the list frame. The legacy "∅" mark is hidden (no markup change). */
.ctwrap .lempty,.docview .lempty,.phwrap .lempty{margin:0;padding:var(--ds-s-5) var(--ds-s-2);text-align:left;color:var(--ds-ink-2);font-size:var(--ds-text-base);display:grid;grid-template-columns:24px 1fr;column-gap:var(--ds-s-4);justify-items:start}
.ctwrap .lempty::before,.docview .lempty::before,.phwrap .lempty::before{content:"";grid-row:1/span 4;width:24px;height:24px;background:var(--ds-icon);-webkit-mask:var(--p4-star) center/24px 24px no-repeat;mask:var(--p4-star) center/24px 24px no-repeat}
.ctwrap .lempty>*,.docview .lempty>*,.phwrap .lempty>*{grid-column:2}
.ctwrap .lempty .ico,.docview .lempty .ico,.phwrap .lempty .ico{display:none}
.ctwrap .lempty .big,.docview .lempty .big,.phwrap .lempty .big{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight);color:var(--ds-ink);margin:2px 0}
.ctwrap .lempty .ph-more,.ctwrap .lempty .linkb,.phwrap .lempty .ph-more,.phwrap .lempty .linkb{margin-top:var(--ds-s-3)}

/* Documents */
.docview .gt td.dc-name b{font-weight:var(--ds-w-semi)}
.docview .gt td[data-c]::before,.setview .gt td[data-c]::before{color:var(--ds-ink-3);font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-caps)}

/* Settings: sections on paper under a 1px line, no boxed cards (principle 9, D8);
   switches read "on" in the action navy, not a status green. */
.setcard,.setcard.full{background:transparent;border:0;border-top:1px solid var(--ds-line);border-radius:0;box-shadow:none;padding:var(--ds-s-4) 0 var(--ds-s-2)}
.seth b{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight)}
.seth .muted{color:var(--ds-ink-3)}
.setrow{border-top:var(--ds-rule-hair) solid var(--ds-rule)}
.setwrap{column-gap:var(--ds-s-8);padding:var(--ds-s-2) var(--ds-gutter) var(--ds-s-6)}
.sw{background:var(--ds-field)}
.sw.on{background:var(--ds-action)}
.sw::after{background:var(--ds-surface)}
.sw:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.setview .gt thead th{background:var(--ds-canvas)}
@media(max-width:700px){
  .docview .gt tr,.setview .gt tr{border-color:var(--ds-line);border-radius:var(--ds-r-lg);box-shadow:none}
}

/* History: site tiles are raised (white), flat; filters and search per 6.11. */
.ph-subbar{background:var(--ds-canvas);border-bottom:1px solid var(--ds-line)}
.ph-subbar .ph-scope{color:var(--ds-ink-3);font-weight:var(--ds-w-medium)}
.ph-subbar .ph-chiprow .ph-clabel{letter-spacing:var(--ds-track-caps);color:var(--ds-ink-3);font-weight:var(--ds-w-semi)}
.phhead .phsub{font-size:var(--ds-text-sm);color:var(--ds-ink-3)}
.ph-hero .ph-find input{border-color:var(--ds-field);border-radius:var(--ds-r-md);font-size:var(--ds-text-base);padding:7px 12px 7px 36px;box-shadow:none;height:var(--ds-primary-h)}
.ph-hero .ph-find input:focus{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off);border-color:var(--ds-line)}
.ph-hero .ph-find .ph-mag{left:12px;color:var(--ds-icon)}
.psitecard{border:1px solid var(--ds-line);border-radius:var(--ds-r-lg);transition:border-color var(--ds-fast) var(--ds-ease)}
.psitecard:hover{box-shadow:none;transform:none;border-color:var(--ds-field)}
.psitecard:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.pcover{background:var(--ds-thumb);border-radius:var(--ds-r-lg) var(--ds-r-lg) 0 0}
.pcover-ph{background:var(--ds-thumb);color:var(--ds-icon)}
.pcover-notes{color:var(--ds-st-route);background:var(--ds-st-route-bg)}
.psitecard.notesonly{border-color:var(--ds-line)}
.psitecard .ps-notesbadge{background:var(--ds-st-route-bg);border:0;color:var(--ds-ink-2);border-radius:var(--ds-r-sm);text-transform:none;letter-spacing:0;font-weight:var(--ds-w-medium);font-size:var(--ds-text-sm);padding:4px 8px}
.psitecard .ps-name{font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight)}
.psitecard .ps-count{color:var(--ds-ink-2);font-weight:var(--ds-w-medium)}
.psitecard .ps-last{color:var(--ds-ink-3)}
.psitecard .ps-last.fresh{color:var(--ds-ink-2);font-weight:var(--ds-w-medium)}
.ph-foot{font-size:var(--ds-text-sm);color:var(--ds-ink-3)}
.ph-foot .ph-more{background:var(--ds-surface);border:1px solid var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium);border-radius:var(--ds-r-md)}
.ph-foot .ph-more:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
.phback,.ph-dhead .ph-dacts a,.ph-dhead .ph-dacts button{color:var(--ds-ink);font-weight:var(--ds-w-medium);text-decoration:underline;text-decoration-color:var(--ds-field);text-underline-offset:3px}
/* the site gallery title is the page title (D3) */
.ph-dhead h1{font-family:var(--ds-display);font-size:var(--ds-text-d2);line-height:var(--ds-lh-d2);font-weight:var(--ds-display-weight);letter-spacing:var(--ds-display-track);color:var(--ds-ink)}
.ph-dhead .ph-dmeta{font-size:var(--ds-text-sm);color:var(--ds-ink-3)}
.ph-yearrail .ph-year{border-color:var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium);border-radius:var(--ds-r-md)}
.ph-yearrail .ph-year.on{background:var(--ds-sel-bg);border-color:var(--ds-ink);color:var(--ds-ink);font-weight:var(--ds-w-semi)}
.ph-jobfilter input{border-color:var(--ds-field);border-radius:var(--ds-r-md)}
.ph-jobfilter input:focus{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.skel.bar{background:var(--ds-skeleton);border-radius:var(--ds-r-tag);height:8px}
.skel.bar.w2{background:var(--ds-line)}

/* PCSP generator dialog: one white raised surface; its own primary is the one filled button. */
.pcsp-open{border-color:var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium)}
.pcsp-head h2{font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight);color:var(--ds-ink)}
.pcsp-main{background:var(--ds-canvas)}
.pcsp-equipment:hover{border-color:var(--ds-field);background:var(--ds-paper-hover)}
.pcsp-x:focus-visible,.pcsp-btn:focus-visible,.pcsp-open:focus-visible,.pcsp-equipment:focus-within{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.pcsp-error{background:var(--ds-tint);border-top:1px solid var(--ds-line);color:var(--ds-st-late-ink)}

/* D17 buttons inside the PCSP and billing dialogs: secondary = white + field line;
   the dialog's one primary (Attach / Save) is the action navy, never a status colour. */
.pcsp-btn,.bill-btn{background:var(--ds-surface);border:1px solid var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium);border-radius:var(--ds-r-md)}
.pcsp-btn:hover:not(:disabled),.bill-btn:hover:not(:disabled){background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}
.pcsp-btn.primary,.pcsp-actions .primary,.bill-btn.primary{background:var(--ds-action);border-color:var(--ds-action);color:var(--ds-action-fg);font-weight:var(--ds-w-semi);box-shadow:var(--ds-e-primary)}
.pcsp-btn.primary:hover:not(:disabled),.bill-btn.primary:hover:not(:disabled){background:var(--ds-action-hover);border-color:var(--ds-action-hover)}
.pcsp-btn.primary:disabled,.bill-btn.primary:disabled{opacity:1;background:var(--ds-disabled-primary-bg);border-color:var(--ds-disabled-primary-bg);color:var(--ds-disabled-primary-fg);box-shadow:none}
.pcsp-btn:disabled:not(.primary),.bill-btn:disabled:not(.primary){opacity:1;background:var(--ds-disabled-bg);border-color:var(--ds-disabled-bd);color:var(--ds-disabled-fg)}
.bill-btn.danger{color:var(--ds-st-late-ink)}
.bill-add{color:var(--ds-ink);font-weight:var(--ds-w-medium);text-decoration:underline;text-decoration-color:var(--ds-field);text-underline-offset:3px}
.bill-add.bill-add-primary{background:var(--ds-surface);border-color:var(--ds-field);color:var(--ds-ink);text-decoration:none}
.bill-add.bill-add-primary:hover{background:var(--ds-paper-hover);border-color:var(--ds-ink-3)}

/* Settings: the page head's rule is enough above the first sections. */
.setview>.sc-head{border-bottom:0}
/* History visit viewer: section labels are sentence case 12/600 ink-3 (section 3;
   uppercase only in table heads); money and codes in Inter tabular (D2); the
   nested fact boxes sit flat on the record so no card sits in a card (D8). */
.vv-sec>.vv-sh .vv-st,.vv-factbox .fbh,.vv-readpane .rp-h,.vv-sublab,.vv-startquote .sqlab,.vv-qmaybe-h,.vv-trend .tlab{font-size:var(--ds-text-sm);font-weight:var(--ds-w-semi);letter-spacing:0;text-transform:none;color:var(--ds-ink-3)}
.vv-mono,.vv-qmeta .qtot{font-family:var(--ds-font);font-variant-numeric:tabular-nums}
.vv-factbox,.vv-readpane,.vv-notesbox{background:transparent;box-shadow:none;border-color:var(--ds-line)}
.vv-qcard,.vv-qcard.on{background:var(--ds-surface);border-color:var(--ds-line);box-shadow:none}
.vv-qcard.on{box-shadow:inset 3px 0 0 var(--ds-selection)}
.vv-qrel,.vv-qchip,.vv-qverify,.vv-hr,.vv-resb,.vv-tag,.vv-vresult{letter-spacing:0;text-transform:none;font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium)}
.vv-hlink{color:var(--ds-ink);text-decoration:underline;text-decoration-color:var(--ds-field);text-underline-offset:3px}
.vv-qbtn{background:var(--ds-surface);border-color:var(--ds-field);color:var(--ds-ink);font-weight:var(--ds-w-medium)}
.vv-startquote{background:var(--ds-tint);border:0;border-radius:var(--ds-r-md)}

/* Toast error mark: a light late tone that holds on the navy toast. */
.toast .toasterr{color:color-mix(in srgb, var(--ds-st-late) 40%, var(--ds-chrome-fg))}

/* Recipient chips (6.7): white, 1px line, 4px radius. */
/* (recipients.css holds the chip rules; tokens applied there.) */

.mat-topsearch-hidden{display:none}

/* Materials screen (materials-build-spec.md section 10). mat- prefix; existing tokens only. */
.matview{display:grid;grid-template-columns:352px minmax(0,1fr);height:calc(100dvh - 118px);min-height:540px;max-height:920px;background:#fff;overflow:hidden}
.matview>.gate{grid-column:1/-1}
.mat-rail{border-right:var(--ds-rule-hair) solid var(--ds-line);background:var(--ds-surface);display:flex;flex-direction:column;min-height:0}
.mat-railhd{padding:14px 16px 12px;display:grid;gap:10px}
.mat-seg{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 -16px;padding:0 16px}
.mat-segb{padding:6px 2px 10px;margin:0 18px -1px 0;font-size:13.5px;font-weight:500;color:var(--muted);border:0;border-bottom:2px solid transparent;background:transparent;cursor:pointer;display:flex;gap:6px;align-items:baseline}
.mat-segb.on{color:var(--ink);font-weight:700;border-bottom-color:var(--navy)}
.mat-segb .n{font-size:11.5px;color:var(--muted);font-weight:500}
.mat-search{width:100%;box-sizing:border-box;padding:7px 10px;font:inherit;font-size:13px;border:1px solid var(--line);border-radius:6px;background:var(--bg,#fff);color:var(--ink)}
.mat-search:focus{outline:2px solid var(--navy);outline-offset:1px}
.mat-railtools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.mat-archive-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}
.mat-link{font-size:12.5px;color:var(--blue-tx);font-weight:500;text-align:left;border:0;background:transparent;padding:0;cursor:pointer}
.mat-link:hover{text-decoration:underline}
.mat-list{overflow:auto;flex:1;min-height:0;padding-bottom:8px}
.mat-grp{padding:14px 16px 6px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.mat-row,.mat-qrow{display:grid;width:100%;text-align:left;font:inherit;color:inherit;gap:3px 14px;padding:9px 16px 10px;cursor:pointer;border:0;border-left:2px solid transparent;background:transparent;align-items:baseline}
.mat-row{grid-template-columns:minmax(0,1fr) auto;gap:var(--ds-s-1) var(--ds-s-3);padding:var(--ds-s-3) var(--ds-s-4);border-bottom:var(--ds-rule-hair) solid var(--ds-line);background:var(--ds-surface);color:var(--ds-ink)}
.mat-row:hover,.mat-qrow:hover{background:#f1f4f9}
.mat-row.on,.mat-qrow.on{background:#fff;border-left-color:var(--navy)}
.mat-row:focus-visible,.mat-qrow:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.mat-row .t,.mat-qrow .t{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mat-row .t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:var(--ds-text-md);font-weight:var(--ds-w-semi)}
.mat-row .s,.mat-qrow .s{font-size:12.5px;color:var(--muted);grid-column:1;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mat-row .p{font-weight:var(--ds-w-semi);font-size:var(--ds-text-base);text-align:right;font-variant-numeric:var(--ds-nums)}
.mat-row .s{grid-column:1/-1;font-size:var(--ds-text-sm);line-height:var(--ds-lh-sm);color:var(--ds-ink-2);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;margin:0}
.mat-row .w{grid-column:1/-1;font-size:var(--ds-text-sm);color:var(--ds-ink-2);text-align:left;white-space:normal;overflow-wrap:anywhere}
.mat-row .w.stale,.mat-stale{color:var(--amber-tx)}
.mat-needs-pricing{color:var(--amber-tx);font-weight:600}
.mat-chip{display:inline-flex;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:transparent;white-space:nowrap;margin-left:6px}
.mat-chip.warn{color:var(--amber-tx);border-color:currentColor}
.mat-qrow{grid-template-columns:24px minmax(0,1fr) auto;gap:2px 10px;padding:10px 16px;align-items:center}
.mat-qrow .t .q{color:var(--faint);font-weight:500}
.mat-qrow .s{grid-column:2}
.mat-qrow .tm{font-size:12px;color:var(--muted);white-space:nowrap;text-align:right}
.mat-qrow .st{grid-column:3;font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.mat-railft{padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.mat-vm{display:inline-flex;width:24px;height:24px;border-radius:6px;font-size:10px;font-weight:700;align-items:center;justify-content:center;letter-spacing:.2px;flex:0 0 auto;color:#fff}
.mat-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;vertical-align:middle;margin-right:6px;position:relative;top:-1px}
.mat-dot.lead{background:var(--amber-tx)}.mat-dot.out{background:var(--red)}.mat-dot.none{background:#c3cad6}
.mat-avail{white-space:nowrap}
.mat-mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em}
.mat-plain{color:var(--muted);font-weight:400}
.mat-empty{padding:28px 16px;color:var(--muted);text-align:center;font-size:13px}
.mat-empty.big{padding:80px 16px}
.mat-main{padding:var(--ds-s-6) var(--ds-s-8);min-width:0;font-size:var(--ds-text-base);line-height:var(--ds-lh-base);color:var(--ds-ink);background:var(--ds-surface);overflow:auto}
.mat-back{display:none}
.mat-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--ds-rule-hair) solid var(--ds-line);border-radius:var(--ds-r-md);background:var(--ds-surface);overflow:hidden}
.mat-source{padding:var(--ds-s-4);min-width:0}.mat-source+.mat-source{border-left:var(--ds-rule-hair) solid var(--ds-line)}
.mat-source .l{font-size:var(--ds-text-sm);color:var(--ds-ink-2)}.mat-source .v{font-size:var(--ds-text-d2);line-height:var(--ds-lh-d2);font-weight:var(--ds-w-semi);font-variant-numeric:var(--ds-nums)}.mat-source .s{font-size:var(--ds-text-sm);line-height:var(--ds-lh-sm);color:var(--ds-ink-2);overflow-wrap:anywhere}.mat-source .s:empty{display:none}.mat-source .mat-link{display:inline-flex;align-items:center;min-height:var(--ds-control-h);font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink);text-decoration:underline;text-underline-offset:var(--ds-s-1)}.mat-source .mat-link:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}.mat-source .mat-dot{width:var(--ds-s-2);height:var(--ds-s-2);margin-right:var(--ds-s-1);background:var(--ds-st-done);top:0}.mat-source .mat-dot.lead{background:var(--ds-st-route)}.mat-source .mat-dot.out{background:var(--ds-st-late)}.mat-source .mat-dot.none{background:var(--ds-st-sched)}
.mat-inline-error{margin:12px 0;padding:10px 12px;border-radius:7px;background:#fff8e8;color:var(--amber-tx);font-size:12.5px}.mat-ingest{padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}.mat-ingest.warn{color:var(--amber-tx)}.mat-usage{margin-top:10px;color:var(--muted);font-size:12.5px}
.mat-hd{display:flex;align-items:flex-start;gap:var(--ds-s-4);margin-bottom:var(--ds-s-4)}
.mat-hd>div:first-child{min-width:0}
.mat-hdv{display:flex;gap:14px;align-items:flex-start;min-width:0}
.mat-hd h1{margin:0;font-family:var(--ds-display);font-size:var(--ds-text-d1);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight);line-height:var(--ds-lh-d1);overflow-wrap:anywhere}
.mat-hd h1 .f{color:var(--faint);font-weight:500;font-size:18px;margin-right:8px}
.mat-hd .sub{font-size:var(--ds-text-base);color:var(--ds-ink-2);margin-top:var(--ds-s-1)}
.mat-hd .sub b{color:var(--ds-ink);font-weight:var(--ds-w-semi)}
.mat-hd .sub .sep{margin:0 var(--ds-s-1);color:var(--ds-icon)}
.mat-hd .act{margin-left:auto;display:flex;gap:var(--ds-s-2);align-items:center;flex:0 0 auto}
.mat-qtyl{font-size:var(--ds-text-sm);color:var(--ds-ink-2)}
.mat-qty{box-sizing:border-box;width:var(--ds-actionbar-h);height:var(--ds-control-h);border:var(--ds-rule-hair) solid var(--ds-field);border-radius:var(--ds-r-md);padding:var(--ds-s-1) var(--ds-s-2);font:inherit;font-size:var(--ds-text-base);text-align:right;color:var(--ds-ink);background:var(--ds-surface)}
.mat-qty:focus{border-color:var(--ds-line);outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.mat-hd .act .nlg.rg{min-height:var(--ds-control-h);padding:var(--ds-s-1) var(--ds-s-3);font-size:var(--ds-text-base);font-weight:var(--ds-w-medium);color:var(--ds-ink);border:var(--ds-rule-hair) solid var(--ds-field);border-radius:var(--ds-r-md);background:var(--ds-surface)}
.mat-hd .act .nlg.rg:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.mat-main .nlg.rg,.mat-main .send-lg{padding:8px 13px;white-space:nowrap}
.mat-main .send-lg[disabled],.mat-main .nlg[disabled]{opacity:.45;cursor:default}
.mat-stats{display:flex;gap:40px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.mat-stat .l{font-size:12px;color:var(--faint)}
.mat-stat .v{font-size:22px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin-top:2px;font-variant-numeric:tabular-nums}
.mat-stat .v.gr,.mat-main .gr{color:var(--green)}.mat-stat .v.rd{color:var(--red)}.mat-stat .v.am{color:var(--amber-tx)}
.mat-stat .s{font-size:12.5px;color:var(--muted);margin-top:1px}
.mat-sec{margin-top:28px}
.mat-sec h3{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:-.1px;display:flex;align-items:center;gap:10px}
.mat-sec h3 span{font-weight:400;color:var(--faint);font-size:12.5px}
.mat-ladder{display:grid}
.mat-lr{display:grid;grid-template-columns:140px 1fr 96px 230px;gap:16px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line2)}
.mat-lr:last-child{border-bottom:0}
.mat-lr .v{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.mat-lr .v span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mat-lr .v small{display:block;color:var(--faint);font-size:10.5px;font-weight:500}
.mat-lr .bar{height:14px;border-radius:3px;background:var(--line2);position:relative}
.mat-lr .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#cfd8e6}
.mat-lr.best .bar i{background:var(--green)}
.mat-lr.old .bar i{background:#e3e7ef}
.mat-lr .p{font-weight:700;font-size:15px;text-align:right;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.mat-lr.best .p{color:var(--green)}
.mat-lr.old .p{color:var(--faint)}
.mat-lr .mt{font-size:12.5px;color:var(--muted);white-space:nowrap;display:flex;align-items:center}
.mat-lr .mt .d{color:var(--faint);margin-left:6px}
.mat-lr .mt .delta{margin-left:auto;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.mat-two{display:grid;grid-template-columns:1.3fr 1fr;gap:40px}
.mat-chart{width:100%;height:auto;display:block}
.mat-chart-grid{stroke:var(--line2)}
.mat-chart-axis{font-size:11px;fill:var(--faint)}
.mat-chart-label{font-size:11px;font-weight:500}
.mat-chart-label.best{font-weight:700}
.mat-ml{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);align-items:center}
.mat-ml:last-child{border-bottom:0}
.mat-ml .t{font-weight:600;font-size:13.5px}.mat-ml .t .pr{font-weight:700;margin-left:6px}.mat-ml .t .m{color:var(--muted);font-weight:400}
.mat-ml .s{font-size:12.5px;color:var(--muted)}
.mat-ml .d{text-align:right;font-size:12.5px;color:var(--faint);white-space:nowrap}
.mat-ml .d .mat-link{display:block;margin-top:1px;margin-left:auto}
.mat-source-unavailable{display:block;margin-top:2px;color:var(--faint);font-size:11.5px}
.mat-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mat-table th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:0 12px 9px 0;border-bottom:1px solid var(--line)}
.mat-table td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.mat-table tbody tr:last-child td{border-bottom:0}
.mat-table th.r,.mat-table td.r{text-align:right}
.mat-table th:last-child,.mat-table td:last-child{padding-right:0}
.mat-table td .t{font-weight:600}
.mat-table td .s{font-size:12.5px;color:var(--muted);margin-top:1px}
.mat-table td .price{font-weight:700;font-size:14px;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.mat-table td.f{color:var(--faint);font-variant-numeric:tabular-nums}
.mat-ck td.term{color:var(--faint);font-size:12.5px}
.mat-ck tr.miss td{color:var(--faint)}
.mat-cmp{font-size:13px;color:var(--muted)}
.mat-cmp b{font-weight:600;color:var(--ink)}
.mat-cmp.win b{color:var(--green)}.mat-cmp.lose b{color:var(--red)}
.mat-mt{table-layout:fixed}
.mat-mt th:nth-child(1){width:34px}.mat-mt th:nth-child(3){width:150px}.mat-mt th:nth-child(4){width:130px}.mat-mt th:nth-child(5){width:250px}
.mat-mt th:nth-child(2),.mat-mt td:nth-child(2){min-width:200px}
.mat-tablewrap{overflow-x:auto}
.mat-locations{margin-top:var(--ds-s-4)}
.mat-locations h3{margin:0 0 var(--ds-s-2);font-size:var(--ds-text-md);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-tight);line-height:var(--ds-lh-md);gap:var(--ds-s-1);flex-wrap:wrap}
.mat-locations h3 span{font-size:var(--ds-text-sm);font-weight:var(--ds-w-medium);color:var(--ds-ink-2)}
.mat-location-scroll{max-width:100%;overflow-x:auto;background:var(--ds-surface);border:var(--ds-rule-hair) solid var(--ds-line);border-radius:var(--ds-r-md)}
.mat-location-scroll:focus-visible{outline:var(--ds-focus-w) solid var(--ds-focus);outline-offset:var(--ds-focus-off)}
.mat-location-table{font-size:var(--ds-text-base);font-variant-numeric:var(--ds-nums)}
.mat-location-table th,.mat-location-table td{padding:var(--ds-s-2) var(--ds-s-3);white-space:nowrap;border-bottom:var(--ds-rule-hair) solid var(--ds-line)}
.mat-location-table th{font-size:var(--ds-text-caps);font-weight:var(--ds-w-semi);letter-spacing:var(--ds-track-caps);color:var(--ds-ink-3)}
.mat-location-table th:last-child,.mat-location-table td:last-child{padding-right:var(--ds-s-3)}
.mat-location-status{display:inline-flex;align-items:center;gap:var(--ds-s-1);font-size:var(--ds-text-sm);color:var(--ds-ink-2)}
.mat-location-status .mat-dot{width:var(--ds-s-2);height:var(--ds-s-2);margin:0;background:var(--ds-st-route);top:0}
.mat-export-list{display:grid;gap:8px}
.mat-export-row{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(130px,.8fr) minmax(110px,.7fr) minmax(180px,1.3fr);gap:12px 18px;align-items:start;padding:12px 14px;border:1px solid var(--line2);border-radius:8px;background:#fff;min-width:0}
.mat-export-row>div{min-width:0}
.mat-export-row span{display:block;margin-bottom:3px;color:var(--faint);font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}
.mat-export-row b{display:block;color:var(--ink);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.mat-export-price b{font-size:15px}
.mat-export-source b{overflow-wrap:anywhere}
.mat-ck{min-width:760px}.mat-ck th.term{width:150px}
.mat-scroll-hint{display:none;margin:8px 0 5px;color:var(--faint);font-size:12px}
.mat-mt input[type=checkbox]{accent-color:var(--navy);margin:0;display:block}
.mat-tick{display:flex;align-items:center;justify-content:center;cursor:pointer}
.mat-mt tr.mat-grprow td{padding:16px 0 8px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink);background:none}
.mat-mt tr.mat-grprow td .n{color:var(--faint);font-weight:400;margin-left:6px}
.mat-mt tr.mat-grprow:first-child td{padding-top:4px}
.mat-mt tr.mat-sel td{background:#f3f7fd}
.mat-chk{margin-top:2px}
.mat-chk textarea{width:100%;max-width:640px;min-height:96px;border:1px solid var(--ctl);border-radius:8px;padding:10px 12px;font:inherit;font-size:13.5px;resize:vertical;color:var(--ink);background:#fff}
.mat-chk textarea:focus{border-color:var(--navy);outline:0;box-shadow:0 0 0 3px rgba(16,35,63,.08)}
.mat-chk .ct{display:flex;gap:8px;margin-top:10px;align-items:center}
.mat-actbar{position:sticky;bottom:0;margin-top:18px;display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);background:#fff}
.mat-actbar .cnt{font-size:13.5px}.mat-actbar .cnt b{font-weight:700}
.mat-actbar .sp{flex:1}
.mat-requests h3 .mat-from{margin-left:auto}
.mat-from{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-weight:400}
.mat-from select,.mat-draft .to select{border:1px solid var(--ctl);border-radius:7px;padding:5px 8px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:#fff;max-width:100%}
.mat-sendall{margin-left:4px}
.mat-vpick{display:flex;gap:6px 22px;flex-wrap:wrap;margin:-2px 0 14px}
.mat-vopt{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer}
.mat-vopt.on{color:var(--ink);font-weight:600}
.mat-vopt input{margin:0;accent-color:var(--navy)}
.mat-vopt:not(.on) .mat-vm{opacity:.35}
.mat-drafts{display:grid;gap:20px}
.mat-draft{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mat-draft .dh{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.mat-draft.sent .dh{border-bottom:0}
.mat-draft .dm{min-width:0;flex:1}
.mat-draft .dh .to{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.mat-draft .dh .to .cc{white-space:nowrap}
.mat-draft .dh .act{display:flex;gap:6px;flex:0 0 auto}
.mat-draft .subj{padding:14px 18px 0;font-size:13.5px}
.mat-draft .subj b{font-weight:600}
.mat-draft .body{display:block;width:100%;border:0;padding:12px 18px 16px;font:inherit;font-size:13.5px;line-height:1.6;color:var(--ink);background:#fff;resize:vertical;min-height:120px;tab-size:44}
.mat-draft .body:focus{outline:0;background:#fbfcfe}
@media(max-width:1100px){.matview{grid-template-columns:300px minmax(0,1fr)}.mat-main{padding:22px 22px 32px}.mat-two{grid-template-columns:1fr;gap:28px}.mat-lr{grid-template-columns:130px 1fr 80px 190px;gap:12px}.mat-stats{gap:28px}.mat-mt{table-layout:auto}.mat-mt th:nth-child(1),.mat-mt th:nth-child(2),.mat-mt th:nth-child(3),.mat-mt th:nth-child(4),.mat-mt th:nth-child(5){width:auto}.mat-ck th.term{width:110px}}
@media(max-width:820px){.matview{grid-template-columns:minmax(0,1fr);height:calc(100dvh - 104px);min-height:420px;max-height:none;width:100%;overflow:hidden}.matview.has-sel .mat-rail{display:none}.matview:not(.has-sel) .mat-main{display:none}.mat-rail{border-right:0;border-bottom:0;min-width:0}.mat-list{max-height:none}.mat-main{padding:16px;min-width:0}.mat-back{display:inline-flex;border:0;background:transparent;color:var(--blue-tx);font:inherit;font-weight:600;padding:0 0 14px}.mat-hd{flex-wrap:wrap}.mat-hd .act{margin-left:0;flex-wrap:wrap}.mat-lr{grid-template-columns:minmax(90px,1fr) minmax(70px,1fr);gap:8px}.mat-lr .bar{display:none}.mat-lr .mt{grid-column:1/-1}.mat-tablewrap{max-width:100%;overflow:auto}.mat-hd h1,.mat-ml .t,.mat-ml .s{overflow-wrap:anywhere}.mat-hd .sub{overflow-wrap:break-word;word-break:normal}.mat-hd .sub b{white-space:nowrap}.mat-draft .dh{align-items:flex-start;flex-wrap:wrap}.mat-draft .dh .act{width:100%}.matview .mat-search,.matview .mat-qty,.matview textarea,.matview select{font-size:16px}.matview .mat-search{min-height:44px}.matview .mat-qty{min-height:44px}.mat-row,.mat-qrow{min-height:44px}.mat-link,.mat-back,.matview .nlg,.matview .send-lg{min-height:44px;display:inline-flex;align-items:center;justify-content:center}.mat-back,.mat-railtools .mat-link{justify-content:flex-start}.mat-segb{min-height:44px;min-width:44px;align-items:center;justify-content:center;padding-top:0;padding-bottom:0}.matview input[type=checkbox]{width:22px;height:22px}.mat-tick{min-width:44px;min-height:44px}.matview input[type=radio]{width:22px;height:22px}.mat-ck td.term label{display:inline-flex;align-items:center;gap:8px;min-height:44px}.mat-row .w{grid-column:1/-1;text-align:left;max-width:none;white-space:normal;overflow:visible;text-overflow:clip}.mat-actbar{flex-wrap:wrap}.mat-actbar .sp{display:none}.mat-actbar .cnt{flex:1 0 100%}.mat-actbar button{flex:1 1 auto}.mat-railft{align-items:center}}
@media(max-width:600px){.mat-export-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.mat-export-source{grid-column:1/-1}.mat-export-source b{font-size:12.5px}.mat-mt thead,.mat-ck thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mat-mt tr,.mat-ck tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mat-mt td[data-label]::before,.mat-ck td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted)}.mat-mt td:nth-child(2){grid-column:1/-1;min-width:140px}.mat-mt td:first-child{grid-column:1/-1}.mat-mt tr.mat-sel{background:#f3f7fd}.mat-mt tr.mat-sel td{background:transparent}.mat-mt td[colspan],.mat-ck td[colspan]{grid-column:1/-1}.mat-mt td,.mat-ck td{border-bottom:0;padding:6px 8px 6px 0}.mat-mt tr.mat-grprow td{border-bottom:0}.mat-mt tbody tr,.mat-ck tbody tr{border-bottom:1px solid var(--line2);padding:6px 0}.mat-mt td:first-child:empty{display:none}.mat-ck{min-width:0}.mat-scroll-hint{display:none}}
@media(max-width:820px) and (min-width:601px){.mat-scroll-hint{display:block}}
@media(max-width:480px){.mat-sources{grid-template-columns:1fr}.mat-source+.mat-source{border-left:0;border-top:var(--ds-rule-hair) solid var(--ds-line)}.mat-source .mat-link{min-height:var(--ds-touch-h)}.mat-hd h1{font-size:var(--ds-text-p-d2);line-height:var(--ds-lh-p-d2)}.mat-hd .act .nlg.rg,.mat-hd .act .mat-qty{min-height:var(--ds-touch-h)}.mat-stats{gap:18px}.mat-hd .act{width:100%}.mat-hd .act .send-lg{flex:1}}