/* ============================================================================
   THE TOKEN BLOCK — the only place a colour value is allowed to exist.
   Two families, and the split is the whole rule:
     BRAND   — a client's look. Swap it and the frame of the app follows.
     LOCKED  — the app's vocabulary. Stage identity and status meaning.
               A client never themes these, because they are how the software
               warns someone. Every one was checked with a colourblind-separation
               validator, not chosen by eye.
   ============================================================================ */
:root{
  /* ---- BRAND · themeable (default: Slate) ---- */
  --brand:#1B3A6B; --brand-ink:#FFFFFF; --brand-hover:#17335E;
  --brand-tint:#EFF1F4; --brand-edge:#BFC7D5;
  --surface:#FFFFFF;
  /* the page and every secondary control are tints OF the brand, so a theme change carries all of them */
  --page:#EFF1F5; --btn-bg:#E1E5EC; --btn-edge:#A8B4C7; --ctl-bg:#F4F5F8; --ctl-edge:#BBC4D3;

  /* ---- LOCKED · the five stages. Validated all-pairs for colourblind
         separation; the ink on each is computed for contrast, which is why
         Contract takes dark text and the other four take white. ---- */
  --st-req:#0A7EA4;   --st-req-ink:#FFFFFF;
  --st-surv:#A16207;  --st-surv-ink:#FFFFFF;
  --st-quote:#4F46E5; --st-quote-ink:#FFFFFF;
  --st-offer:#DB2777; --st-offer-ink:#FFFFFF;
  --st-con:#65A30D;   --st-con-ink:#1C2128;

  /* ---- LOCKED · status. Green advances, amber is a gap, red refuses. ---- */
  --ok:#12855F; --amber:#D97706; --red:#B42318; --info:#4F46E5;

  /* ---- LOCKED · charts. One blue in the whole system: the chart's
         "sold" series is the same indigo as the Quote stage, deliberately,
         so no two blues can ever be mistaken for each other. ---- */
  --chart-sold:#4F46E5; --chart-coll:#12855F; --age-bar:#C77B1E; --age-crit:#8A2B12;

  /* ---- LOCKED · the tints and inks each status is written in ---- */
  --amber-ink:#92400E; --amber-tint:#FFF8E6; --amber-edge:#F2E2B8;
  --info-tint:#F5F7FF; --info-ink:#26346B;
  /* ---- neutrals ---- */
  --chip:#F1F2F0; --chip-edge:#DEDFDB; --ink:#1C2128; --ink-2:#374151;
  --line:#E7E7E4; --muted:#6B7280; --surface-2:#FCFCFB;
  --green:var(--brand);   /* the primary action button follows the client */
  --blue:var(--info);
}
/* ---- the coordinated client themes. One attribute changes the whole frame.
       Each brand colour was screened against all five stage colours and all
       three status colours; none is closer than ΔE 18 to any of them. ---- */
body[data-theme="graphite"]{--brand:#334155;--brand-hover:#2C394A;--brand-tint:#F0F1F3;--brand-edge:#C5C9CF;--page:#F1F2F3;--btn-bg:#E4E6E9;--btn-edge:#B1B7BE;--ctl-bg:#F5F6F6;--ctl-edge:#C2C6CC}
body[data-theme="ironstone"]{--brand:#3F3B36;--brand-hover:#37332F;--brand-tint:#F1F1F0;--brand-edge:#C9C8C6;--page:#F2F1F1;--btn-bg:#E6E6E5;--btn-edge:#B6B5B3;--ctl-bg:#F5F5F5;--ctl-edge:#C5C4C3}
body[data-theme="petrol"]{--brand:#0F3D4C;--brand-hover:#0D3542;--brand-tint:#EEF3F5;--brand-edge:#BDD1D8;--page:#EEF1F2;--btn-bg:#E0E6E8;--btn-edge:#A4B5BB;--ctl-bg:#F3F5F6;--ctl-edge:#B7C5C9}
body[data-theme="aubergine"]{--brand:#4C1D6B;--brand-hover:#42195E;--brand-tint:#F2EFF4;--brand-edge:#CCBFD5;--page:#F2EFF5;--btn-bg:#E8E2EC;--btn-edge:#BBA9C7;--ctl-bg:#F6F4F8;--ctl-edge:#C9BBD3}
body[data-theme="bordeaux"]{--brand:#5B1A2B;--brand-hover:#501725;--brand-tint:#F4EFF1;--brand-edge:#D4C0C6;--page:#F4EFF0;--btn-bg:#EAE1E3;--btn-edge:#C1A8AE;--ctl-bg:#F7F4F4;--ctl-edge:#CEBABF}
/* Drafting board — Scott's pick, 21 Sept. The page IS the board: a Borco-style sage green, with white cards
   sitting on it like sheets. Unlike the other six, the page is a real colour, not a faint tint, so two
   things change with it: grey helper text is darkened (the standard grey fails contrast on green, 3.3:1),
   and the brand is a deep drafting green kept ΔE 19.6 from the "ok" status green so the two never read alike. */
body[data-theme="drafting"]{--brand:#24463A;--brand-hover:#1D3A30;--brand-tint:#E4ECE1;--brand-edge:#9DB3A6;
  --page:#C9D9C6;--btn-bg:#E4ECE1;--btn-edge:#7F998A;--ctl-bg:#F2F6F0;--ctl-edge:#A9BCAE;--muted:#465245}
*{box-sizing:border-box}
/* --green must be re-declared on body: declared only on :root it resolves to Slate's navy there and never follows a theme */
body{--green:var(--brand);margin:0;background:var(--page);color:var(--ink);font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1300px;margin:0 auto;padding:18px 16px 130px}
h1{font-size:22px;margin:0 0 2px;letter-spacing:-.01em}
.sub{color:var(--muted);margin:0 0 14px;font-size:13px}
.note{background:#FFF8E6;border:1px solid #F2E2B8;border-radius:8px;padding:11px 13px;margin:0 0 14px;font-size:13px}
.note.grey{background:#F4F5F3;border-color:var(--line)}
.note.blue{background:#F5F7FF;border-color:#DBE3FF}
.note b{display:block;margin-bottom:2px}
.steps{display:flex;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 16px;background:#fff}
.steps button{flex:1;border:0;border-right:1px solid var(--line);background:#fff;padding:10px 14px;
  text-align:left;font:inherit;cursor:pointer}
.steps button:last-child{border-right:0}
.steps button[aria-pressed=true]{background:var(--ink);color:#fff}
.steps .n{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;opacity:.7}
.steps .t{font-weight:600;display:block;margin-top:3px}
.steps .c{display:block;font-size:11.5px;opacity:.75;margin-top:1px}
.steps button[disabled]{opacity:.45;cursor:not-allowed}
.card{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden;margin-bottom:14px}
.card .hd{padding:10px 13px;border-bottom:1px solid var(--line);background:#FCFCFB;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:#4B5563;display:flex;justify-content:space-between;gap:8px}
.pad{padding:15px 17px}
.grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.grid3{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:920px){.grid,.grid3{grid-template-columns:1fr}}
.prog{display:flex;gap:5px;padding:9px 13px;border-bottom:1px solid var(--line);background:#FCFCFB}
.prog i{height:4px;border-radius:2px;background:#E1E2DE;flex:1}
.prog i.on{background:var(--green)}.prog i.now{background:var(--ink)}
.qn{font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.q{font-size:18px;font-weight:600;margin:7px 0 3px;letter-spacing:-.01em}
.qh{font-size:13px;color:var(--muted);margin:0 0 13px}
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--chip-edge);border-radius:9px;
  padding:10px 12px;cursor:pointer;background:#fff;font-size:14px;text-align:left;font-family:inherit;width:100%}
.opt:hover{border-color:#B7C9BF;background:#F9FCFA}
.opt.sel{border-color:var(--green);background:#F0FDF4;box-shadow:inset 0 0 0 1px var(--green)}
.opt.unsure{border-style:dashed}
.opt .bx{width:16px;height:16px;border:1.5px solid #C6C7C2;border-radius:4px;flex:0 0 16px;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.opt .bx.rad{border-radius:50%}
.opt.sel .bx{background:var(--green);border-color:var(--green)}
.opt .t{font-weight:600}.opt .d{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.acts{display:flex;gap:9px;align-items:center;padding:13px 17px;border-top:1px solid var(--line);background:#FCFCFB}
.acts .sp{flex:1}
.btn{background:var(--green);color:#fff;border:1px solid var(--green);border-radius:7px;padding:8px 15px;
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.chip{background:var(--btn-bg);border:1px solid var(--btn-edge);color:var(--brand);font-weight:600;font:inherit;font-weight:600;font-size:13px;box-shadow:0 1px 2px rgba(16,24,40,.10);
  padding:6px 11px;border-radius:7px;cursor:pointer}
.feeds .row{display:flex;gap:9px;padding:7px 13px;border-bottom:1px solid #F3F3F1;align-items:baseline;font-size:12.5px}
.feeds .row.pend{opacity:.4}
.feeds .a{flex:1;min-width:0}.feeds .a b{font-weight:600}
.feeds .a span{display:block;font-size:11px;color:var(--muted)}
.feeds .rd{font-size:10.5px;color:var(--blue);text-align:right;max-width:160px}
.draft{background:#F7F7F5;border:1px solid var(--line);border-left:3px solid var(--ink);
  border-radius:0 8px 8px 0;padding:11px 12px;margin:13px;font-size:13.5px;line-height:1.6}
.filt{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px}
.filt .f{font-size:11.5px;background:#EEF2FF;border:1px solid #DBE3FF;color:#26346B;border-radius:6px;padding:3px 8px}
.filt .f.off{background:#F7F7F5;border-color:var(--line);color:#9CA3AF}
.stages{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 12px}
.stages .s{font-size:11.5px;border:1px solid var(--chip-edge);border-radius:6px;padding:3px 8px;background:var(--chip)}
.stages .s.on{background:#EAF6EE;border-color:#7CC29B;color:#166534;font-weight:600}
.stages .s.off{opacity:.4;text-decoration:line-through}
.count{padding:10px 13px;border-top:1px solid var(--line);background:#FCFCFB;font-size:13px;display:flex;justify-content:space-between}
.count b{font-size:20px;font-weight:700}
/* facets */
.fac{display:flex;gap:7px;align-items:baseline;padding:5px 11px;border-top:1px solid #F5F5F3;font-size:12.5px;cursor:grab}
.fac:hover{background:#F7FAF8}
.fac .id{font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);flex:0 0 34px}
.fac .ar{flex:1;font-variant-numeric:tabular-nums}
.fac .pt{font-variant-numeric:tabular-nums;color:var(--muted)}
.fac.low{background:#F5F7FF}
.sbin{border:1px solid var(--line);border-radius:9px;margin:0 0 10px;overflow:hidden;background:#fff}
.sbin .sh{padding:8px 11px;background:#FCFCFB;display:flex;gap:9px;align-items:baseline;border-bottom:1px solid var(--line)}
.sbin .sh input{border:1px solid #D5D6D1;border-radius:5px;padding:2px 6px;font:inherit;font-size:13px;font-weight:600;width:130px}
.sbin .sh .m{flex:1;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.sbin .cv{font-size:11px;padding:2px 7px;border-radius:5px;border:1px solid #DBE3FF;background:#EEF2FF;color:#26346B}
.sbin .cv.lock{background:#F5F7FF;border-style:dashed}
.sbin.can{box-shadow:inset 0 0 0 2px #7CC29B}
.sbin.over{box-shadow:inset 0 0 0 2px #0F7A4E;background:#F3FBF6}
.sbin .body{min-height:34px;padding:2px 0}
.empt{padding:8px 11px;color:var(--muted);font-style:italic;font-size:12.5px}
/* book + bom */
/* ---- the client theme picker ---- */
.thm{display:flex;gap:6px;align-items:center}
.thm .sw{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.thm .sw[aria-pressed=true]{border-color:var(--ink)}
.thm .lb{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-right:3px}
/* ---- the money book (modal) ---- */
.ovl{position:fixed;inset:0;background:rgba(18,20,24,.45);display:flex;align-items:flex-start;
  justify-content:center;padding:26px 16px;overflow:auto;z-index:60}
.mdl{background:#fff;border-radius:14px;width:min(1080px,100%);box-shadow:0 18px 50px rgba(0,0,0,.24);
  overflow:hidden}
.mdl .top{display:flex;gap:11px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.mdl .top h3{margin:0;font-size:17px;letter-spacing:-.01em}
.mdl .top .sp{flex:1}
.mdl .x{border:1px solid var(--chip-edge);background:#fff;border-radius:8px;width:30px;height:30px;
  font:inherit;font-size:16px;line-height:1;cursor:pointer;color:#4B5563}
.per{display:flex;gap:9px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);
  background:#FCFCFB;flex-wrap:wrap}
.per .lab{font-weight:600;min-width:186px;line-height:1.25}
.per .lab .rng{display:block;font-weight:400;font-size:11.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.per .prt{font-size:11.5px;color:#92400E;background:#FFF8E6;border:1px solid #F2E2B8;
  border-radius:20px;padding:3px 10px}
.msec{padding:15px 18px;border-bottom:1px solid var(--line)}
.msec:last-child{border-bottom:0}
.msec h4{margin:0 0 3px;font-size:13.5px}
.msec p.sub{margin:0 0 11px;font-size:12.5px;color:var(--muted)}
.twoc{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:760px){.twoc{grid-template-columns:1fr}}
.clock{border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.clock .k{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#6B7280;display:flex;gap:7px;align-items:center}
.clock .k i{width:9px;height:9px;border-radius:3px;display:block}
.clock .v{font-size:28px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock .d{font-size:11.5px;color:var(--muted)}
.clock .cmp{font-size:12px;margin-top:6px}
.clock .cmp .up{color:#12855F;font-weight:600}.clock .cmp .dn{color:#B42318;font-weight:600}
.owed{width:100%;border-collapse:collapse;font-size:13.5px}
.owed td{padding:8px 0;border-bottom:1px solid #F3F3F1;vertical-align:baseline}
.owed td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.owed td .w{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
.owed tr.soft td{color:#6B7280}
.owed tr.soft td.n{color:#6B7280;font-weight:500}
.owed tr.tot td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:700;padding-top:10px}
.agerow{display:grid;grid-template-columns:96px 1fr 104px;gap:11px;align-items:center;padding:6px 0}
.agerow .lbl{font-size:12.5px;font-variant-numeric:tabular-nums}
.agerow .track{background:#F2F2EF;border-radius:4px;height:16px;overflow:hidden}
.agerow .fillb{height:100%;border-radius:4px;background:var(--age-bar)}
.agerow .amt{text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.agerow.crit .lbl{color:#B42318;font-weight:600}
.agerow.crit .fillb{background:var(--age-crit)}
.lgd{display:flex;gap:14px;font-size:12px;color:#4B5563;margin:0 0 6px}
.lgd span{display:inline-flex;gap:6px;align-items:center}
.lgd i{width:10px;height:10px;border-radius:3px;display:block}
.cw{overflow:auto}
/* ---- the dashboard ---- */

.dtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 14px}
@media(max-width:820px){.dtiles{grid-template-columns:repeat(2,1fr)}}
.dtile{border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px 14px}
.dtile .k{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.dtile .v{font-size:25px;font-weight:700;margin:5px 0 1px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dtile .d{font-size:11.5px;color:var(--muted)}
.dtile.hot{border-color:#F2E2B8;background:#FFFCF4}.dtile.hot .v{color:#92400E}
.dbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:11px 13px;border:1px solid var(--line);
  border-radius:10px;background:#fff;margin:0 0 14px}
.dbar input.q{flex:1 1 210px;min-width:170px;border:1px solid var(--chip-edge);border-radius:8px;
  padding:7px 10px;font:inherit;font-size:13.5px}
.spills{display:flex;gap:6px;flex-wrap:wrap}
.spill{border:1px solid var(--chip-edge);background:#fff;border-radius:20px;padding:4px 11px 4px 8px;font:inherit;
  font-size:12.5px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;color:var(--ink)}
.spill i{width:9px;height:9px;border-radius:3px;display:block;flex:0 0 9px}
.spill .c{font-variant-numeric:tabular-nums;opacity:.6;font-size:11.5px}
.spill.on{color:#fff;border-color:transparent}
.spill.on .c{opacity:.8}
.spill.zero{opacity:.42}
.seg{display:flex;border:1px solid var(--chip-edge);border-radius:8px;overflow:hidden}
.seg button{border:0;background:#fff;padding:6px 11px;font:inherit;font-size:12.5px;cursor:pointer;
  border-right:1px solid var(--chip-edge);color:var(--ink)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.prow{display:flex;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:10px;background:#fff;
  margin:0 0 9px;overflow:hidden;cursor:pointer;text-align:left;width:100%;font:inherit;padding:0;color:var(--ink)}
.prow:hover{border-color:#B7C9BF;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.prow .bar{width:5px;flex:0 0 5px}
.prow .mid{flex:1;min-width:0;padding:11px 14px}
.prow .nm{font-weight:600;font-size:14.5px}
.prow .ad{font-size:12.5px;color:var(--muted);margin-top:1px}
.prow .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tg{font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--chip-edge);background:var(--chip);color:#4B5563}
.tg.stage{color:#fff;border-color:transparent;font-weight:600}
.tg.us{background:#FFF8E6;border-color:#F2E2B8;color:#92400E;font-weight:600}
.tg.them{background:#F5F7FF;border-color:#DBE3FF;color:#26346B}
.tg.ins{background:#F6F3FF;border-color:#E2D9FF;color:#4C1D95}
.tg.live{background:#0B6E4F;border-color:#0B6E4F;color:#fff;font-weight:600}
.prow .rt{padding:11px 14px;text-align:right;border-left:1px solid #F3F3F1;min-width:150px}
.prow .age{font-size:12.5px;font-variant-numeric:tabular-nums}
.prow .age.old{color:#B42318;font-weight:600}
.prow .nx{font-size:11.5px;color:var(--muted);margin-top:3px;max-width:190px}
.prow .mny{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}
.dlane{font:10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;
  color:#4B5563;margin:16px 0 8px;display:flex;gap:9px;align-items:center}
.dlane:first-child{margin-top:0}
.dlane b{color:var(--ink)}
.homebar{display:flex;gap:9px;align-items:center;margin:0 0 12px}
.homebar .crumb{font-size:12.5px;color:var(--muted);flex:1;min-width:0}
.homebar .crumb b{color:var(--ink)}
/* ---- the money clock sub-tabs ---- */
.subs{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.subs button{border:1px solid var(--chip-edge);background:#fff;border-radius:8px;padding:7px 13px;font:inherit;
  font-size:13px;cursor:pointer;display:flex;gap:8px;align-items:baseline;color:var(--ink)}
.subs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.subs button[disabled]{opacity:.4;cursor:not-allowed}
.subs .go{font-size:11px;opacity:.75;margin-left:2px}

/* ---- the customer's signature link, on the Offer screen ---- */
.linkst{font-size:12.5px;font-weight:600;align-self:center}
.linkst.ok{color:var(--ok)} .linkst.no{color:var(--red)}
.linkbox{font:11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:6px 8px;border:1px solid var(--ctl-edge);
  border-radius:6px;background:var(--ctl-bg);min-width:240px;flex:1 1 260px;color:var(--ink-2)}

/* ---- colour, per surface. A term of the contract, so it is shown as one. ---- */
.colrow{border-top:1px solid var(--line);padding:8px 10px;background:var(--surface-2);display:flex;flex-wrap:wrap;gap:8px}
.colrow.set{background:#F4FBF7}
.colrow .cl{flex:1 1 150px;min-width:0}
.colrow label{display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.colsel{width:100%;font:inherit;font-size:12px;padding:4px 6px;border:1px solid var(--ctl-edge);border-radius:6px;background:#fff}
.colsay{flex:1 1 100%;font-size:11.5px;color:var(--ink-2);line-height:1.4}
.colsay.none{color:var(--amber-ink)}
.meas .hotwarn{background:var(--amber-tint)}
.meas .v.none{color:var(--amber-ink);font-weight:500;font-size:13px}
/* on the printed scope and contract */
.colsc{margin:4px 0 0;font-size:12px;padding:5px 7px;background:#F7F7F5;border-left:3px solid var(--ink)}
.colsc.none{border-left-color:var(--amber);color:var(--amber-ink);background:var(--amber-tint)}
.colini{float:right;color:var(--muted);letter-spacing:.06em}
/* Settings: the colour book */
.cb{width:100%;border-collapse:collapse;font-size:13px}
.cb th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;
  padding:8px 12px;border-bottom:1px solid var(--line);background:#FCFCFB}
.cb td{padding:6px 12px;border-bottom:1px solid var(--line)}
.cb tr.retd td{background:#FAFAF9;color:#9CA3AF;text-decoration:line-through}
.cb input{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--ctl-edge);border-radius:6px;background:var(--ctl-bg);width:100%}
.subs .v{font-variant-numeric:tabular-nums;font-size:12px;opacity:.7}
.subs .warn{color:var(--amber);font-weight:700}
.subs button[aria-pressed=true] .warn{color:#FDBA74}
/* ---- money blocks ---- */
.blk{border-top:1px solid var(--line)}
.blk:first-child{border-top:0}
.blkh{padding:9px 14px;background:#FCFCFB;font:10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.11em;text-transform:uppercase;color:#4B5563;display:flex;justify-content:space-between;gap:9px}
.blkh .amt{font-size:13px;letter-spacing:0;font-weight:700;color:var(--ink);text-transform:none}
.flds{display:flex;flex-wrap:wrap;gap:9px;padding:11px 14px 4px}
.fld{flex:1 1 92px;min-width:82px}
.fld label{display:block;font:9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;
  text-transform:uppercase;color:#6B7280;margin:0 0 3px}
.fld input{width:100%;border:1px solid var(--chip-edge);border-radius:6px;padding:5px 7px;font:inherit;
  font-size:13.5px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
.fld input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #0B6E4F22}
.fld.ro input{background:#F6F6F4;color:#4B5563}
.chain{padding:2px 14px 11px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#4B5563}
.chain b{color:var(--ink)}
.chain .cap{color:#92400E}
.tog{display:flex;gap:7px;padding:11px 14px}
.tog button{flex:1;border:1px solid var(--chip-edge);background:#fff;border-radius:8px;padding:9px 11px;
  font:inherit;font-size:13.5px;cursor:pointer;text-align:left;color:var(--ink)}
.tog button.on{border-color:var(--green);background:#F0FDF4;box-shadow:inset 0 0 0 1px var(--green);font-weight:600}
.tog button small{display:block;font-size:11.5px;color:var(--muted);font-weight:400}
/* ---- the build-up ---- */
.bu{width:100%;border-collapse:collapse;font-size:13.5px}
.bu td{padding:6px 14px;border-bottom:1px solid #F3F3F1;vertical-align:baseline}
.bu td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bu td.b{font-size:11.5px;color:var(--muted)}
.bu tr.sum td{border-top:1.5px solid var(--ink);border-bottom:0;font-weight:700;background:#FCFCFB}
.bu tr.grand td{border-top:2.5px double var(--ink);font-weight:700;font-size:15px;background:#F7F8F6}
.bu tr.neg td.n{color:#B42318}
.bu tr.off td{color:#9CA3AF}
.tie{padding:9px 14px;font-size:12.5px;display:flex;gap:8px;align-items:center}
.tie.ok{background:#F0FDF4;color:#166534}.tie.no{background:#FEF2F2;color:#7F1D1D;font-weight:600}
.pay{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pay>div{padding:12px 14px;border-right:1px solid var(--line)}
.pay>div:last-child{border-right:0}
.pay .k{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.pay .v{font-size:21px;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.pay .d{font-size:11.5px;color:var(--muted)}
.gate .g{display:flex;gap:9px;padding:8px 14px;border-bottom:1px solid #F3F3F1;font-size:12.5px;align-items:flex-start}
.gate .g:last-child{border-bottom:0}
.gate .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px;background:#D1D5DB}
.gate .g.ok .dot{background:var(--ok)}.gate .g.no .dot{background:var(--red)}.gate .g.warn .dot{background:var(--amber)}
.gate .x{flex:1}.gate .x b{display:block;font-weight:600}.gate .x span{display:block;color:var(--muted);font-size:11.5px}
.gate .g.no .x b{color:var(--red)}.gate .g.warn .x b{color:#92400E}
.kv{display:grid;grid-template-columns:150px 1fr;gap:0}
.kv>div{padding:7px 14px;border-bottom:1px solid #F3F3F1;font-size:13px}
.kv>div:nth-child(odd){color:var(--muted);font-size:12px}
.kv input,.kv select{width:100%;border:1px solid var(--chip-edge);border-radius:6px;padding:4px 7px;font:inherit;font-size:13px}
.miss{color:#B42318;font-style:italic}
.quietbtn{background:transparent;border:1px solid var(--chip-edge);color:#6B7280;border-radius:7px;
  padding:5px 10px;font:inherit;font-size:12.5px;cursor:pointer}
/* ---- work surfaces: each pane scrolls on its own, headers stay put ---- */
.work{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:16px;align-items:stretch;
  height:calc(100vh - 250px);min-height:460px}
.work.even{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.work.v3{height:calc(100vh - 315px)}
@media(max-width:920px){.work{grid-template-columns:1fr;height:auto}
  .work .pane{max-height:560px}}
.work .pane{display:flex;flex-direction:column;min-height:0;margin:0;height:100%}
.pane .scroll{flex:1;min-height:0;overflow:auto}
.pane .hd,.pane .acts,.pane .bkf{flex:0 0 auto}
/* ---- reviewer commentary, kept off the working surface ---- */
.cmt{margin:18px 0 0;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.cmt>.hd{padding:9px 13px;border-bottom:1px solid var(--line);background:#FCFCFB;font:10.5px/1 ui-monospace,
  SFMono-Regular,Menlo,monospace;letter-spacing:.11em;text-transform:uppercase;color:#4B5563}
.cmt .in{padding:13px 15px}
.cmt .in>*:first-child{margin-top:0}.cmt .in>*:last-child{margin-bottom:0}
.cmt .note{margin:0 0 11px}
.bkf{padding:9px 12px;border-bottom:1px solid var(--line);background:#FCFCFB}
.bkf .lbl{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;
  color:#6B7280;margin:0 0 6px;display:block}
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pill{border:1px solid var(--chip-edge);background:#fff;border-radius:20px;padding:4px 10px;font:inherit;
  font-size:12px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--ink)}
.pill:hover{border-color:#B7C9BF}
.pill.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill .c{font-size:10.5px;opacity:.6;font-variant-numeric:tabular-nums}
.pill.zero{opacity:.4}
.pill.unexp{border-style:dashed}
.pill.all.on{background:var(--green);border-color:var(--green)}
.bkf .srch{width:100%;margin-top:7px;border:1px solid var(--chip-edge);border-radius:7px;padding:6px 9px;
  font:inherit;font-size:13px}
.bkf .hint{font-size:11px;color:#6B7280;margin:7px 0 0}
.bklist{max-height:440px;overflow:auto}
.cat{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 12px 3px;
  background:#FCFCFB;border-top:1px solid #F3F3F1}
.cat em{font-style:normal;color:var(--blue);font-weight:600}
.bi{display:flex;gap:8px;align-items:baseline;padding:6px 12px;border-top:1px solid #F5F5F3;cursor:grab;font-size:12.5px}
.bi:hover{background:#F7FAF8}
.bi .nm{flex:1;min-width:0}.bi .nm b{font-weight:500}
.bi .u{font-size:11px;color:var(--muted);display:block}
.bi .pr{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;font-size:12px}
.bi.kit{background:#F5F7FF}
.bi.kit .nm b::before{content:"KIT ";font-size:9.5px;letter-spacing:.08em;color:var(--blue);font-weight:700}
.bi.dead{cursor:not-allowed;opacity:.6;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(163,46,30,.06) 5px,rgba(163,46,30,.06) 10px)}
.bi.dead .pr{color:var(--red);font-size:11px}
.stg{border-top:2px solid var(--ink)}.stg:first-child{border-top:0}
.stgh{padding:8px 12px;display:flex;justify-content:space-between;gap:9px;align-items:baseline;background:#F7F8F6}
.stgh .n{font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);letter-spacing:.14em}
.stgh .nm{font-weight:700;flex:1}
.stgh .tt{font-variant-numeric:tabular-nums;font-weight:600}
.stg.gap .stgh{background:#FFF8E6}.stg.gap .stgh .nm{color:#92400E}
.stg.na .stgh{background:#F7F7F5;opacity:.55}
.gapmsg{padding:6px 12px;font-size:12px;color:#92400E;font-style:italic}
.stg.op .stgh{background:#F1F5FF}.stg.op .stgh .nm{color:#1D4ED8}
.stg.na .stgh{background:#F7F7F5}
.namsg{padding:6px 12px;font-size:12px;color:#6B7280;font-style:italic}
.why{padding:7px 12px;background:#F8FAFF;border-bottom:1px solid #E6ECFB;display:flex;gap:8px;align-items:center;font-size:12px}
.why label{color:#1D4ED8;font-weight:600;white-space:nowrap}
.why input{flex:1;border:1px solid #CBD5F5;border-radius:6px;padding:5px 8px;font:inherit;font-size:12.5px}
.why input.bad{border-color:var(--red);background:#FEF6F5}
.why .tag{font-size:11px;color:var(--red);font-weight:600}
/* 3 Oct: an expected layer this job does not need, with the reason */
.why.nn{background:#F7F7F5}.why.nn label{color:#374151}.why.nn .chip,.why.nn .quietbtn{flex:0 0 auto}
.nnmsg{color:#374151}.gapmsg .linkbtn,.nnmsg .linkbtn{font-style:normal;margin-left:6px}
.sgh{padding:4px 12px;display:flex;justify-content:space-between;gap:9px;background:#FCFCFB;font-size:11.5px;color:var(--muted);border-top:1px solid #F0F0EE}
.sgh b{color:#374151}
.ln{display:grid;grid-template-columns:1fr 132px 78px 86px 22px;gap:7px;align-items:baseline;padding:5px 12px;
  border-top:1px solid #F5F5F3;font-size:12.5px}
.ln .nm b{font-weight:500}
.ln .src{font-size:10.5px;color:var(--muted);display:block}
.ln .src.ovr{color:#92400E;font-weight:600}
.ln .q{text-align:right;font-variant-numeric:tabular-nums}
.ln .q input{width:58px;padding:1px 4px;border:1px solid #D5D6D1;border-radius:5px;font:inherit;font-size:12px;text-align:right}
.ln .q .pk{font-size:10.5px;color:var(--muted);display:block}
.ln .up,.ln .tot{text-align:right;font-variant-numeric:tabular-nums}.ln .tot{font-weight:600}
.ln.loss .tot{color:var(--red)}
.ln .x{cursor:pointer;color:#B9BAB5;text-align:center}.ln .x:hover{color:var(--red)}
.ln.kitline{background:#F8F9FF}
.ln.kitline .nm b::before{content:"KIT ";font-size:9px;letter-spacing:.08em;color:var(--blue);font-weight:700}
.ln.child{background:#FCFCFE;font-size:12px;color:#4B5563}.ln.child .nm{padding-left:15px}
.dropz{padding:5px 12px;font-size:11.5px;color:var(--muted);font-style:italic;border-top:1px dashed #E3E3E0}
.dropz.can{background:#EAF6EE;color:#166534;font-style:normal;box-shadow:inset 3px 0 0 #7CC29B}
.dropz.cant{background:#FAEFED;color:#7F1D1D;font-style:normal;background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,rgba(163,46,30,.07) 5px,rgba(163,46,30,.07) 10px)}
.dropz.over.can{background:#D9F0E3;box-shadow:inset 0 0 0 2px #0F7A4E}

/* ---- the drop target is the WHOLE stage block, not the strip at its foot (23 Sept).
       A target of a few hundred pixels cannot be missed; a twenty-pixel strip can. ---- */
body.dragging .stg.can{background:#F4FBF7;box-shadow:inset 0 0 0 2px #7CC29B}
body.dragging .stg.can *{pointer-events:none}
body.dragging .stg.over.can{background:#E4F5EC;box-shadow:inset 0 0 0 2px #0F7A4E}
body.dragging .stg.cant{opacity:.42}
body.dragging .stg.cant *{pointer-events:none}

/* ---- and the + that adds without any aiming at all ---- */
.bi{position:relative}
.addbtn{width:22px;height:22px;flex:0 0 auto;align-self:center;border-radius:6px;border:1px solid var(--btn-edge);
  background:var(--btn-bg);color:var(--brand);font:600 14px/1 inherit;cursor:pointer;padding:0}
.addbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.addbtn:disabled{opacity:.3;cursor:not-allowed}
.bi .lastch{display:block;font-size:10.5px;color:var(--muted);opacity:.85}
.pb .lastch{font-size:10.5px;color:var(--muted);margin-top:2px}

/* ---- a price you can click: on a book row, and on a line of the quote ---- */
.pbtn{font:inherit;font-size:12px;font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:5px;
  border:1px dashed var(--ctl-edge);background:transparent;color:var(--ink);cursor:pointer}
.pbtn:hover{border-style:solid;border-color:var(--brand);background:var(--brand-tint)}
.pbtn.set{border-style:solid;border-color:var(--info);color:var(--info-ink);background:var(--info-tint);font-weight:600}
.pbtn.none{border-color:var(--red);color:var(--red);font-style:italic}
.ln .src.set{color:var(--info-ink);font-weight:600}
.ped{grid-column:1/-1;background:var(--info-tint);border:1px solid #D7DDF5;border-radius:8px;margin:5px 0 2px;padding:10px 12px}
.ped .t{font-size:12.5px;margin-bottom:8px}
.ped .prow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ped input{width:96px;font:inherit;font-size:14px;padding:6px 8px;text-align:right;border:1px solid var(--ctl-edge);
  border-radius:6px;background:#fff}
.ped .opt{display:block;flex:1 1 210px;text-align:left;font:inherit;font-size:12.5px;padding:8px 11px;border-radius:7px;cursor:pointer;
  border:1px solid var(--btn-edge);background:#fff;color:var(--ink)}
.ped .opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.ped .opt b{display:block;width:100%;font-size:13px;font-weight:600;margin-bottom:1px}
.ped .opt span{display:block;width:100%;color:var(--muted);font-size:11.5px;line-height:1.35}
.ped .pfoot{margin-top:8px}
.ped .opt:disabled{opacity:.55;cursor:not-allowed;background:#F6F6F4}
.ped .opt:disabled:hover{border-color:var(--btn-edge);background:#F6F6F4}
.ped .opt.fill{border-color:var(--ok)}.ped .opt.fill b{color:var(--ok)}
.ped .pwhy{color:var(--red);font-size:12px;margin-top:7px}

/* ---- slice 3a: the approval, above the Send buttons ---- */
.appr{padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px}
.appr b{display:block;font-weight:600;margin-bottom:1px}
.appr span{color:var(--muted)}
.appr.ok{background:#F2FBF6;color:#12603F} .appr.ok b{color:var(--ok)}
.appr.wait{background:var(--surface-2)}
.appr.stale{background:#FDF3F2;color:#7F1D1D} .appr.stale b{color:var(--red)} .appr.stale span{color:#9A4A42}
.revwhy{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--ctl-edge);border-radius:6px;
  background:var(--ctl-bg);min-width:230px}
/* the money strip: boxes only as wide as their figure, so the row does not eat the screen */
.money{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;border:1px solid var(--line);
  border-radius:10px;background:#fff;overflow:hidden;margin:0 0 8px}
.money div{flex:0 0 auto;min-width:96px;padding:7px 12px;border-right:1px solid var(--line)}
.money div:last-child{border-right:0}
.money .k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.money .v{font-size:16px;font-weight:600;margin-top:1px;white-space:nowrap}
.money .v.warn{color:var(--amber)}.money .v small{font-size:11px;font-weight:500;color:var(--muted)}

/* What the surface being priced measures — the figures every quantity on this screen comes from. */
.meas{display:flex;flex-wrap:wrap;width:max-content;max-width:100%;border:1px solid var(--line);
  border-radius:10px;background:var(--surface-2);overflow:hidden;margin:0 0 14px}
.meas>div{flex:0 0 auto;min-width:92px;padding:7px 12px;border-right:1px solid var(--line)}
.meas>div:last-child{border-right:0}
.meas .k{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.meas .v{font-size:15px;font-weight:600;margin-top:1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.meas .v small{font-size:10.5px;font-weight:500;color:var(--muted)}
.meas .s{font-size:10.5px;color:var(--muted);margin-top:1px;white-space:nowrap}
.meas .none{font-size:13px;font-weight:500;color:var(--muted)}
.meas .lead{background:var(--ink);color:#fff}
.meas .lead .k,.meas .lead .s{color:#B9C0CC}
.measwrap{width:max-content;max-width:100%;margin:0 0 14px}
.measwrap .meas{margin:0;border-radius:10px 10px 0 0;border-bottom:0}
.measfoot{border:1px solid var(--line);border-radius:0 0 10px 10px;background:var(--surface-2);
  padding:5px 12px;font-size:11px;color:var(--muted)}
.meas .hot{background:#F4FBF7}

/* a book row now says what it will measure on this surface, and why it cannot be used */
.bi .willbe{display:block;font-size:10.5px;color:var(--ok);font-weight:600}
.bi .cant{display:block;font-size:10.5px;color:var(--red)}
.cat.miss{color:var(--red);background:#FDF3F2;font-style:normal}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;max-width:1060px;width:calc(100% - 30px);
  background:var(--ink);color:#fff;border-radius:10px;padding:10px 14px;font-size:12.5px;
  box-shadow:0 6px 24px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s}
.toast.on{opacity:1}.toast b{color:#9BE7C4}.toast .bad{color:#FFB4A8}.toast span{display:inline-block;margin-right:13px}
.qmt{width:100%;border-collapse:collapse;font-size:12px}
.qmt td,.qmt th{border:1px solid var(--line);padding:4px 7px;text-align:right}
.qmt th{background:#F7F7F5;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qmt td:first-child,.qmt th:first-child{text-align:left}
.qmt tr.lo td{background:#F5F7FF;color:#26346B;font-weight:600}
h3{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:24px 0 6px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.legend table{border-collapse:collapse;width:100%;font-size:12.5px}
.legend td,.legend th{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
.legend th{background:#F7F7F5;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* ---- measurement source ---- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:760px){.doors{grid-template-columns:1fr}}
.door{border:1px solid var(--chip-edge);border-radius:11px;padding:15px 16px;background:#fff}
.door h4{margin:0 0 4px;font-size:15.5px}
.door p{margin:0 0 11px;font-size:12.5px;color:var(--muted);line-height:1.5}
.door .tag{display:inline-block;font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;
  padding:3px 7px;border-radius:5px;margin:0 0 8px}
.door.a{border-color:#BBD9C8;background:#FAFDFB}.door.a .tag{background:#E6F4EC;color:#0B6E4F}
.door.b .tag{background:var(--chip);color:#4B5563}
.door input[type=file]{font-size:12px;width:100%;margin:0 0 8px}
.door textarea{width:100%;height:76px;border:1px solid var(--chip-edge);border-radius:8px;padding:7px 9px;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.ing .r{display:flex;gap:9px;padding:8px 13px;border-bottom:1px solid #F3F3F1;font-size:12.5px;align-items:flex-start}
.ing .r:last-child{border-bottom:0}
.ing .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px;background:#D1D5DB}
.ing .r.ok .dot{background:var(--ok)}.ing .r.no .dot{background:var(--red)}.ing .r.warn .dot{background:var(--amber)}
.ing .x{flex:1;min-width:0}.ing .x b{display:block;font-weight:600}
.ing .x span{display:block;color:var(--muted);font-size:11.5px}
.ing .r.no .x b{color:var(--red)}.ing .r.warn .x b{color:#92400E}
.prov{font-size:11px;padding:2px 7px;border-radius:5px;border:1px solid #DBE3FF;background:#EEF2FF;color:#26346B;white-space:nowrap}
.prov.hand{border-color:#F2E2B8;background:#FFF8E6;color:#92400E}
.hnd{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:8px 11px;background:#FCFCFB;
  border-top:1px solid #F3F3F1}
.hnd label{display:block;font:9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#6B7280;margin:0 0 3px}
.hnd input,.hnd select{width:100%;border:1px solid var(--chip-edge);border-radius:6px;padding:4px 6px;
  font:inherit;font-size:12.5px;background:#fff}
/* ---- who and where ---- */
.frm{display:grid;grid-template-columns:1fr 1fr;gap:10px 11px}
.frm .full{grid-column:1/-1}
.fl{display:block;font:10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#4B5563;margin:0 0 4px}
.fl .req{color:var(--red)}
.frm input,.frm select{width:100%;border:1px solid var(--chip-edge);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.frm input:focus,.frm select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px #0B6E4F22}
.frm input.bad{border-color:var(--red);background:#FEF6F5}
.trio{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:9px}
.same{display:flex;gap:8px;align-items:center;font-size:13px;color:#374151;grid-column:1/-1;
  padding:2px 0 0;cursor:pointer}
.same input{width:15px;height:15px;accent-color:var(--green)}
.unl{border-bottom:1px solid #F3F3F1;padding:9px 13px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start}
.unl:last-child{border-bottom:0}
.unl .dot{width:7px;height:7px;border-radius:50%;flex:0 0 7px;margin-top:6px;background:#D1D5DB}
.unl.ok .dot{background:var(--green)}.unl.no .dot{background:var(--red)}.unl.warn .dot{background:var(--amber)}
.unl .x{flex:1;min-width:0}.unl .x b{display:block;font-weight:600}
.unl .x span{color:var(--muted);display:block;font-size:11.5px}
.unl.no .x b{color:var(--red)}.unl.warn .x b{color:#92400E}

/* ---- the back half: offer · contract · prints · settings ---- */
.muted{color:var(--muted)}
.frz{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:13px}
.frz b{flex:0 0 auto}.frz span{flex:1 1 260px;color:inherit;opacity:.85}
.frz.snt{background:#FDF2F8;border:1px solid #F5C6DD;color:#831843}
.frz.sig{background:#F4F9EC;border:1px solid #CFE3B0;color:#365314}
.bign{font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lockl{margin-top:12px;font-size:12.5px;border-top:1px dashed var(--line);padding-top:10px}.lockl b{display:block}
.vt{width:100%;border-collapse:collapse;font-size:13px}.vt th{text-align:left;font:10px/1.2 ui-monospace,Menlo,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:#6B7280;padding:8px 12px;border-bottom:1px solid var(--line)}
.vt td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}.vt .n{text-align:right;font-variant-numeric:tabular-nums}
.drop{display:block;margin:4px 14px 10px;border:2px dashed var(--chip-edge);border-radius:9px;padding:16px;text-align:center;cursor:pointer;color:#4B5563}
.ctot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.ctot .k{font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#6B7280}.ctot .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.riskbar{margin:12px 0 4px}.riskbar .lbl{font-size:12.5px;margin-bottom:5px}
.riskbar .track{height:8px;border-radius:4px;background:#EEE;overflow:hidden}.riskbar i{display:block;height:100%}
.inl{font-size:12px;margin-right:6px}.inl input{border:1px solid var(--chip-edge);border-radius:6px;padding:4px 6px;font:inherit}
.pm{width:min(900px,100%)}.pbody{background:#E9E9E6;padding:18px}
.pp{background:#fff;max-width:780px;margin:0 auto 18px;padding:30px 36px 44px;box-shadow:0 2px 10px rgba(0,0,0,.12);
  font-size:12px;line-height:1.5;position:relative;min-height:900px}
.pf{position:absolute;left:36px;right:36px;bottom:16px;font-size:10.5px;color:#6B7280;display:flex;justify-content:space-between;
  border-top:1px solid #ddd;padding-top:6px}
.lh{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--brand);padding-bottom:10px;margin-bottom:12px}
.lh .co{font-size:17px;font-weight:700;color:var(--brand)}.lh .dt{font-weight:700;letter-spacing:.12em;font-size:13px}
.internal{background:#1C2128;color:#fff;font-weight:700;padding:6px 10px;border-radius:4px;margin:0 0 8px;font-size:11px;letter-spacing:.04em}
.bt{width:100%;border-collapse:collapse;margin:0 0 12px}.bt th,.bt td{padding:4px 6px;border-bottom:1px solid #E3E3E0;text-align:left;vertical-align:top}
.bt thead{display:table-header-group}.bt th{font-size:10px;color:#4B5563;text-transform:uppercase;letter-spacing:.06em}
.bt tr.grp th{background:#2A2F36;color:#fff;font-size:12px;text-transform:none;letter-spacing:0;padding:6px 8px}
.bt tr.grp th span{font-weight:400;opacity:.8;margin-left:6px}.bt .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bt tr.kit td{background:#F4F5F3}.bt tr.kid td:first-child{padding-left:20px}.bt td.src{color:#6B7280;font-size:10.5px}
.bt tr.tot td{border-top:2px solid #1C2128}.bt tr.badr td{background:#FEF2F2;color:#7F1D1D}
.wb{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}.wb .k,.sig .k{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#6B7280}
.pp h6{font-size:12.5px;margin:14px 0 5px}.sc{margin:0 0 10px}
.ss{border:1px solid #E3E3E0;border-radius:6px;padding:8px 10px;margin:0 0 8px}.ss .sh{font-weight:700}.ss .sh span{font-weight:400;color:#6B7280}
.ss ul{margin:5px 0 0;padding-left:18px}
.pr{display:flex;justify-content:space-between;font-size:15px;font-weight:700;border-top:2px solid #1C2128;border-bottom:1px solid #1C2128;padding:7px 0;margin:10px 0 4px}
.prs{font-size:12px;margin-bottom:8px}
.wm{position:absolute;top:340px;left:0;right:0;text-align:center;font-size:42px;font-weight:800;color:rgba(180,35,24,.10);transform:rotate(-18deg);pointer-events:none}
.atty{background:#FFF8E6;border:1px solid #F2E2B8;color:#92400E;padding:6px 9px;border-radius:5px;margin:0 0 6px;font-weight:600}
.sigs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:14px}.sig .ln{border-bottom:1px solid #1C2128;height:34px;margin-bottom:4px;position:relative}
.sgn{position:absolute;bottom:2px;left:4px;font:italic 22px/1 "Brush Script MT","Segoe Script",cursive;color:#1B3A6B}
.tlbad{background:#FEF2F2;border:1px solid #F5C2C0;color:#7F1D1D;padding:7px 10px;border-radius:5px;margin:0 0 10px;font-weight:600}
.tlok{background:#F0FDF4;color:#166534;padding:7px 10px;border-radius:5px;margin:0 0 10px}
.lg{font:12px/1.7 ui-monospace,Menlo,monospace}
@media print{
  body.printing .wrap>*:not(#pmodal){display:none!important}
  body.printing .ovl{position:static;background:none;padding:0;display:block}
  body.printing .mdl{box-shadow:none;width:auto;border-radius:0}
  body.printing .mdl .top,body.printing .noprint{display:none}
  body.printing .pbody{background:none;padding:0}
  body.printing .pp{box-shadow:none;margin:0;max-width:none;min-height:0;break-after:page;page-break-after:always;padding:0 0 40px}
  body.printing .pp:last-child{break-after:auto;page-break-after:auto}
}

/* ---- placeholders are examples, never values: light blue, italic, and they say "e.g." ---- */
::placeholder{color:#7BA7DE;font-style:italic;opacity:1}
::-webkit-input-placeholder{color:#7BA7DE;font-style:italic}
/* ---- secondary controls: every colour is a token from the block at the top ---- */
/* 3 Oct, Scott: "the buttons in the panels, when you hover over them, blank to a shadow" — a hover never repaints a
   button that is chosen (dark, white words): white on white was a blank */
.chip:hover:not(.act):not(.on):not([aria-pressed=true]){background:var(--surface);border-color:var(--brand)}
.chip[disabled]{opacity:.45;cursor:not-allowed}
.quietbtn{background:var(--surface);border:1px solid var(--btn-edge);color:var(--brand);box-shadow:0 1px 2px rgba(16,24,40,.10);font-weight:600}
.quietbtn:hover{border-color:var(--brand)}
.tog button,.subs button,.seg button{border:1px solid var(--ctl-edge);background:var(--ctl-bg);box-shadow:0 1px 2px rgba(16,24,40,.08)}
.tog button:hover:not(.on),.subs button:hover:not([aria-pressed=true]):not([disabled]){border-color:var(--brand);background:var(--surface)}
.subs button[aria-pressed=true]:hover{background:#000;border-color:#000}
.steps button{background:var(--ctl-bg)}.steps button:hover:not([disabled]):not([aria-pressed=true]){background:var(--surface)}
.mdl .x{background:var(--btn-bg);border-color:var(--btn-edge);color:var(--brand)}
/* ---- a gate line is a door to the field that fails it ---- */
.gate .g.go{cursor:pointer;border-radius:6px}.gate .g.go:hover{background:#F4F5F7}
.gate .g.go .x b::after{content:'  → take me there';font-weight:600;font-size:11.5px;color:var(--brand);white-space:nowrap}
.flash{outline:3px solid var(--amber)!important;outline-offset:2px;animation:fl 1.6s ease-out 2}
@keyframes fl{0%{outline-color:var(--amber)}100%{outline-color:transparent}}

/* ---- the contract document ---- */
.cdoc p{margin:0 0 7px}.cdoc .ctr{text-align:center}.cdoc .jus{text-align:justify}
.cdoc .fill{font-weight:600;color:#1B3A6B;border-bottom:1px solid #1B3A6B;padding:0 4px}
.cdoc .tk{color:#1B3A6B}.chead{font-size:10px;color:#6B7280;text-align:right;margin-bottom:8px}
.cdoc .bt.ct td,.cdoc .bt.ct th{border:1px solid #D9D9D6}.cdoc .bt.ct th{text-transform:none;letter-spacing:0;font-size:11px;color:#1C2128}
.sig .k2{font-size:10.5px;color:#374151;margin-bottom:8px}.sig .ln.sm{height:22px;display:flex;align-items:flex-end}
.cdoc .sigs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:8px}.cdoc .sig{min-width:0}.cdoc .sig .ln.sm .fill{border:0;white-space:nowrap;padding:0}
.obl{display:flex;gap:9px;align-items:flex-start;margin:0 0 8px;font-size:12.5px}.obl .tg{flex:0 0 auto}

/* ---- v2+: the change, in red (the locked status red), always with words beside it ---- */
.chg{color:var(--red)!important;font-weight:700}s.chg{font-weight:400;text-decoration:line-through}
.chgbox{border:1.5px solid var(--red);border-radius:5px;padding:7px 10px;margin:0 0 10px;color:#7F1D1D;font-size:11.5px}
.chgbox ul{margin:4px 0 0;padding-left:18px}.chgbox b{color:var(--red)}
.bt tr.del td{color:var(--red);text-decoration:line-through}.bt tr.new td:first-child{border-left:3px solid var(--red)}
.ss.gone{border-color:var(--red);border-style:dashed}.chgl{margin:0;padding-left:18px;color:var(--red)}

/* ---- step 6: invoices and the payment register ---- */
.tg.ist-paid{background:var(--ok);color:#fff;border-color:transparent}.tg.ist-overdue{background:var(--red);color:#fff;border-color:transparent}
.tg.ist-part,.tg.ist-issued{background:var(--info-tint);color:var(--info-ink)}.tg.ist-disputed{background:var(--amber-tint);color:var(--amber-ink)}
.tg.ist-ready{background:var(--amber-tint);color:var(--amber-ink);font-weight:600}.tg.ist-void{text-decoration:line-through}
.minis{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.minis .quietbtn{padding:3px 8px;font-size:11.5px}
tr.revd td{color:#9CA3AF;text-decoration:line-through}tr.revd td:last-child{text-decoration:none}
.ppnote{border:2px solid #1C2128;padding:8px 10px;margin:0 0 12px;font-size:11px;line-height:1.45}
.ctot .card.pad{margin:0}

.pbwrap{max-height:520px;overflow:auto;border-top:1px solid var(--line)}.vt.pb td{padding:5px 8px;vertical-align:middle}
.vt.pb th{position:sticky;top:0;background:var(--surface);z-index:1}
.pbi{border:1px solid var(--chip-edge);border-radius:5px;padding:3px 6px;font:inherit;font-size:12.5px;text-align:inherit}
.vt.pb td.n .pbi{text-align:right}tr.retd td{opacity:.45}tr.retd td:last-child{opacity:1}
.vt.reg td{font-size:12.5px}

/* ---- the company logo on printouts ---- */
.lh{align-items:center}.lhlogo{max-height:56px;max-width:190px;object-fit:contain;margin-right:14px}
.pflogo{height:14px;max-width:60px;object-fit:contain;vertical-align:middle;margin-right:6px}.pf{align-items:center}
.clogo{margin:0 0 8px}.lgp{display:flex;gap:14px;align-items:center;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.lgbox{width:170px;height:76px;border:1px dashed var(--chip-edge);border-radius:8px;display:flex;align-items:center;justify-content:center;background:#fff;padding:6px;text-align:center;font-size:11.5px}
.lgbox img{max-width:100%;max-height:100%;object-fit:contain}

/* ---- letterhead: logo, then the company name with address · phone · ROC beneath it in smaller type ---- */
.lh{display:flex;align-items:center;gap:0}.lhid{flex:1;line-height:1.35}.lhid .co{font-size:17px;margin-bottom:2px}
.lhl{font-size:10.5px;color:#4B5563}.lhdoc{text-align:right;align-self:flex-start}
.clh{display:flex;align-items:center;margin:0 0 6px}.clhid p{margin:0 0 1px!important;font-size:10.5px;color:#4B5563}
.clhid p:first-child{font-size:15px;color:#1C2128}

/* ---- clean pages: designer commentary shows only when switched on ---- */
body:not(.show-design) .design, body:not(.show-design) .dz{display:none!important}
.appbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.appbar img{height:30px;max-width:130px;object-fit:contain}.appbar b{font-size:16px;color:var(--brand)}
.appbar span{font:10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dtog{position:fixed;left:12px;bottom:12px;z-index:50;font:11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;
  background:var(--surface);border:1px dashed var(--chip-edge);color:var(--muted);border-radius:6px;padding:6px 9px;cursor:pointer;opacity:.75}
.dtog:hover{opacity:1}
@media print{.dtog,.appbar{display:none}}
.one{max-width:760px}

.claimbtn{margin-left:auto;margin-right:8px}.claimbtn[aria-pressed=true]{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
.vt tr.old td{color:#9CA3AF}
.homebar{display:flex;align-items:center;gap:10px}
.vt.claims tr.crow{cursor:pointer}.vt.claims tr.crow:hover td{background:#F4F5F7}.vt.claims td .tg.stage{margin-top:4px;display:inline-block}

/* ---- Kinsey ---- */
.offline{background:#FEF3C7;color:#92400E;border:1px solid #F59E0B;border-radius:8px;padding:9px 12px;margin:0 0 12px;font-size:13px}
.soon{font-size:11px;color:var(--muted)}
.prow .nm,.prow .ad,.prow .age,.prow .nx,.prow .mny{display:block}
/* sign-in (web test copy) */
.login{position:fixed;inset:0;background:var(--page);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px}
.login[hidden]{display:none}
.logincard{width:100%;max-width:340px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;padding:26px 24px}
.logincard .logo{font-size:26px;font-weight:700;letter-spacing:-.5px}
.logincard .sub{color:var(--muted);margin:2px 0 18px}
.logincard .lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.logincard input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:10px 11px;border:1px solid var(--chip-edge);border-radius:8px}
.logincard .err{min-height:20px;color:#B91C1C;font-size:13px;margin:6px 0 10px}
.logincard button{width:100%;padding:11px;border:0;border-radius:8px;background:var(--ink);color:#fff;font:inherit;font-weight:600;cursor:pointer}

/* surfaces: in the job, main/secondary, covering, an adjusted area (carried over from the mockup of 21 Sept) */
.sctl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 10px;border-top:1px solid var(--line);background:#FBFBFA;font-size:12.5px}
.sctl label.chk{display:inline-flex;gap:6px;align-items:center;font-weight:600}
.sctl select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--chip-edge);border-radius:6px;background:#fff}
.sctl .adjd{color:var(--amber-ink)}
.sctl .adjf{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
.sctl .adjf input{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--chip-edge);border-radius:6px}
.sbin.off{opacity:.55}.sbin.off .sh input{text-decoration:line-through}
.sbin .swarn{padding:6px 10px;font-size:12px;color:var(--amber-ink);border-top:1px solid var(--line)}

/* Surfaces (report): groups and the faces table — as the 22 Sept mockup Scott approved */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:12px}
.gcard{border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fff}
.gcard.off{opacity:.55}.gtop{display:flex;gap:8px;align-items:center}
.gnm{font:inherit;font-weight:700;font-size:15px;border:1px solid transparent;border-radius:6px;padding:2px 6px;margin-left:-6px;flex:1;min-width:0;background:transparent}
.gnm:hover,.gnm:focus{border-color:var(--chip-edge);outline:none;background:#fff}
.gtop label.chk{display:inline-flex;gap:5px;align-items:center;font-weight:600;font-size:12.5px;white-space:nowrap}
.gfig{font-size:21px;font-weight:700;margin:4px 0 0}.gfig small{font-size:12.5px;font-weight:500;color:var(--muted)}
.gmeta{font-size:12.5px;color:var(--muted);margin-top:2px}.gmeta b{color:var(--amber-ink);font-weight:600}.gmeta.warnt{color:var(--amber-ink)}
.gctl{display:flex;flex-wrap:wrap;gap:6px 8px;margin:8px 0 2px}
.gctl select,.fbar select,.fgrp select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--chip-edge);border-radius:6px;background:#fff}
.gadd{border:1px dashed var(--chip-edge);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:110px;color:var(--muted);cursor:pointer;background:transparent;font:inherit}
.gadd span{font-size:12px}.gadd:hover{background:#fff;color:var(--ink)}
.fbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
.ftwrap{overflow-x:auto}
.ftab{width:100%;border-collapse:collapse;min-width:620px}
.ftab th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line);background:#FCFCFB}
.ftab th.n,.ftab td.n{text-align:right}
.ftab td{padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
.ftab tr.fout td{background:#FAFAF9;color:#9CA3AF}.ftab tr.fout td.fid{text-decoration:line-through}
.ftab td.fid{font-family:ui-monospace,Menlo,monospace;font-size:13px;width:60px}
.fsq{display:inline-flex;align-items:center;gap:6px}
.fsq input{width:86px;text-align:right;font:inherit;padding:4px 7px;border:1px solid var(--chip-edge);border-radius:6px}
.fsq input.ed{border-color:var(--amber-edge);background:var(--amber-tint);font-weight:600}
.fsq .was{font-size:11.5px;color:var(--amber-ink)}
.tg.lowt{margin-left:6px;background:#E8F0FB;color:#1E3A8A}
.fgrp select{min-width:170px}.fwarn{display:block;font-size:11.5px;color:var(--amber-ink);margin-top:2px}
.ffoot{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 14px;font-size:13px;background:#FCFCFB}
.logincard .alt{margin-top:10px;font-size:12.5px;color:var(--muted);text-align:center}
.logincard .shown{background:var(--amber-tint);border:1px solid var(--amber-edge);color:var(--amber-ink);border-radius:8px;padding:8px 10px;margin:8px 0 0;font-size:12.5px}
.linkbtn{background:none;border:0;color:var(--ink-2);text-decoration:underline;cursor:pointer;font:inherit;font-size:12.5px;padding:0}
.logincard .alt .linkbtn{width:auto;display:inline;background:none;color:var(--ink-2);font-weight:400;padding:0;border-radius:0}
.logincard input[inputmode="numeric"]{text-align:center;letter-spacing:.35em;font:600 19px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:12px 11px}
.logincard .shown b{font:600 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
/* Settings H · the people who may sign in */
.utab{width:100%;border-collapse:collapse}
.utab th{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:600;padding:8px 12px;border-bottom:1px solid var(--line);background:#FCFCFB}
.utab td{padding:7px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.utab tr.off td{background:#FAFAF9;color:#9CA3AF}
.utab .me{font-size:11px;background:var(--chip);border-radius:10px;padding:1px 7px;margin-left:6px}
.utab select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--chip-edge);border-radius:6px;background:#fff}

/* colour chips — the hand-entry pane (Scott, 25 Sept) */
.chippane{border-top:1px solid var(--line);padding:12px 13px 14px}
.chippane .chead{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;font-size:13px}
.chippane .chead .chip.act{background:var(--ink,#1f2937);color:#fff;border-color:var(--ink,#1f2937)}
.chippane .csay{font-size:12.5px;margin:0 0 10px;color:var(--ink-2,#374151)}
.chippane .clab{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:6px 0 4px}
.chippane .cgrp{font-size:12px;color:var(--muted);margin:8px 0 5px}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin:0 0 6px}
.cchip{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px;border:1px solid var(--line);border-radius:9px;
  background:#fff;cursor:pointer;font:inherit;text-align:left;min-height:44px}
.cchip:hover{border-color:var(--brand-edge)}
.cchip.on{border:2px solid var(--brand);padding:5px;background:var(--brand-tint)}
.cchip .sw{display:block;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,.12)}
.cchip .sw.none{background:repeating-linear-gradient(45deg,#f3f4f6 0 6px,#e5e7eb 6px 12px);color:var(--muted);font-size:10.5px;
  display:flex;align-items:center;justify-content:center}
.cchip .cn{font-size:12px;line-height:1.25;color:var(--ink-2,#374151)}
.cchip .cc{font-size:10.5px;color:var(--muted)}
.cchip .ck{font-size:10.5px;color:var(--brand);font-weight:700}
.swin{width:38px;height:26px;padding:0;border:1px solid var(--line);border-radius:5px;background:none;cursor:pointer;vertical-align:middle}
td .sw{display:inline-block;width:24px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}

/* the training guide — slides in from the right (Scott, 25 Sept) */
#g-tab{position:fixed;right:0;top:46%;z-index:9001;transform:rotate(-90deg) translateY(-100%);transform-origin:top right;
  background:var(--brand);color:#fff;border:0;border-radius:8px 8px 0 0;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
#g-tab span{display:inline-block;width:16px;height:16px;line-height:16px;border-radius:50%;background:#fff;color:var(--brand);text-align:center;font-size:11px;margin-right:4px}
body.g-open #g-tab{right:min(380px,100vw)}
#g-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:9000;background:var(--surface,#fff);border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(0,0,0,.12);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;font-size:14px}
body.g-open #g-panel{transform:none}
#g-panel .g-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px 12px;background:var(--brand);color:#fff}
#g-panel .g-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
#g-panel .g-t{font-size:16px;font-weight:700;margin-top:2px}
#g-panel .g-x{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
#g-panel .g-body{flex:1;overflow:auto;padding:12px 16px}
#g-panel .g-p{margin:0 0 12px;color:var(--ink-2,#374151);line-height:1.5}
#g-panel .g-note{background:var(--brand-tint);border-radius:8px;padding:8px 10px;font-size:12.5px;margin:0 0 10px}
#g-panel .g-steps{list-style:none;margin:0;padding:0}
#g-panel .g-steps li{border:1px solid var(--line);border-radius:9px;margin:0 0 6px;background:#fff}
#g-panel .g-steps li.on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
#g-panel .g-st{display:flex;gap:9px;align-items:center;width:100%;background:none;border:0;padding:9px 10px;font:inherit;font-weight:600;text-align:left;cursor:pointer;color:inherit}
#g-panel .g-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand-tint);color:var(--brand);font-size:12px;display:flex;align-items:center;justify-content:center}
#g-panel li.on .g-n{background:var(--brand);color:#fff}
#g-panel .g-say{padding:0 12px 8px 41px;line-height:1.5;color:var(--ink-2,#374151)}
#g-panel .g-lk{background:none;border:0;color:var(--brand);font:inherit;font-weight:600;cursor:pointer;padding:0 0 10px 41px;text-decoration:underline}
#g-panel .g-note .g-lk{padding:0}
#g-panel .g-miss{display:none;margin:-4px 12px 10px 41px;font-size:12px;color:var(--muted)}
#g-panel .g-ft{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
#g-panel .g-c{flex:1;text-align:center;color:var(--muted);font-size:12.5px}
#g-panel .g-b{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;min-height:40px}
#g-panel .g-b.pri{background:var(--brand);color:#fff;border-color:var(--brand)}
#g-panel .g-b:disabled{opacity:.4;cursor:default}
#g-panel .g-other{padding:8px 16px 14px;font-size:12px;color:var(--muted)}
#g-panel .g-other select{display:block;width:100%;margin-top:4px;font:inherit;padding:6px}
.g-hl{outline:3px solid var(--amber,#D97706)!important;outline-offset:3px;border-radius:6px;animation:g-pulse 1s ease-in-out 3}
@keyframes g-pulse{50%{outline-color:transparent}}
@media print{#g-tab,#g-panel{display:none!important}}
/* on a wide screen the guide sits beside the work instead of over it */
@media (min-width:1100px){ body.g-open{margin-right:380px} }
.tlerr{color:var(--red);font-size:12px;min-height:0;margin-top:3px}
.tlerr:empty{display:none}
/* a refusal must be seen even over the print window */
.toast{z-index:10050}
/* a wrong entry stops at the box (Scott, 25 Sept) */
.fstop{position:fixed;z-index:10060;max-width:330px;background:#FEF3F2;border:1px solid #F4C7C3;color:#7A271A;border-radius:9px;
  padding:9px 11px;box-shadow:0 6px 20px rgba(0,0,0,.18);font-size:13px;line-height:1.4}
.fstop b{display:block;font-weight:600}
.fstop span{display:block;font-size:11.5px;color:#9A3412;margin-top:3px}
.fstop::before{content:"";position:absolute;top:-7px;left:var(--ax,18px);border:7px solid transparent;border-top:0;border-bottom-color:#F4C7C3}
input.bad,textarea.bad{border-color:var(--red)!important;background:#FFF7F6!important}
.fstop.up::before{top:auto;bottom:-7px;border-bottom:0;border-top:7px solid #F4C7C3}
/* closing a project (26 Sept) */
.closekind{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px}
.closekind .opt{text-align:left;font:inherit;cursor:pointer;background:#fff}
.frz.cls{background:#F3F4F6;border:1px solid #D1D5DB;color:#374151}
.tg.cls{background:#E5E7EB;color:#374151}
.prow.closed .nm{color:#4B5563}
.prow.closed .nx{white-space:normal;max-width:360px;text-align:right}

/* ===================== the menu on the left (26 Sept) ===================== */
.nav{display:none}
body.has-nav{--navw:214px}
body.has-nav.nav-rail{--navw:60px}
body.has-nav .nav{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--navw);z-index:8000;
  background:var(--surface,#fff);border-right:1px solid var(--line);transition:width .18s ease;overflow:hidden}
body.has-nav{padding-left:var(--navw);transition:padding-left .18s ease}
@media (min-width:760px){ body.has-nav .wrap{padding-right:52px} }   /* room for the Guide tab on the right edge */
body.has-nav #appbar{display:none}
.nav .nhd{display:flex;align-items:center;gap:8px;padding:14px 10px 12px 14px;border-bottom:1px solid var(--line);min-height:34px}
.nav .nhd img{height:26px;max-width:90px;object-fit:contain}
.nav .nco{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.nav .nco b{font-size:14px;color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .nco span{font:9.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav .nrail{flex:0 0 auto;width:32px;height:32px;border:0;background:none;border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.nav .nrail:hover{background:var(--brand-tint,#EEF1F6);color:var(--ink)}
.nav .nsc{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 8px}
.nav .nft{border-top:1px solid var(--line);padding:8px}
.nav .ngh{font:9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 8px 6px;white-space:nowrap}
.nav .ni{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:7px 9px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer;text-decoration:none;white-space:nowrap;position:relative}
.nav .ni svg,#nav-btn svg,.nav .nrail svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav .ni:hover{background:var(--brand-tint,#EEF1F6)}
.nav .ni.on{background:var(--brand-tint,#EEF1F6);color:var(--brand);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.nav .ni.pri{background:var(--brand);color:var(--brand-ink,#fff);font-weight:600;margin:0 0 4px}
.nav .ni.pri:hover{background:var(--brand-hover,var(--brand))}
.nav .ni.sub{min-height:30px;font-size:12.5px;color:var(--muted);padding-left:38px}
.nav .ni.sub svg{width:15px;height:15px;flex-basis:15px}
.nav .ni.off{color:var(--muted);cursor:default;opacity:.75}.nav .ni.off:hover{background:none}
.nav .nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav .nb{font-size:11px;font-weight:600;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--btn-bg,#E1E5EC);color:var(--ink);text-align:center}
.nav .ni[data-nav="dash"] .nb{background:#FDE7D8;color:#9A3412}
.nav .soon2{font-size:10.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 6px}
.nav .nme{display:flex;align-items:center;gap:10px;padding:8px 9px;white-space:nowrap}
.nav .nme .nl{display:flex;flex-direction:column;line-height:1.25}.nav .nme .nl b{font-size:13px}.nav .nme .nl span{font-size:11.5px;color:var(--muted)}
.nav .nav-av{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--brand);color:var(--brand-ink,#fff);display:grid;place-items:center;font-size:11px;font-weight:700;margin-left:-4px}
/* the narrow strip: icons only, the name on hover as a tooltip (title) */
body.nav-rail .nav .nl,body.nav-rail .nav .ngh,body.nav-rail .nav .nco,body.nav-rail .nav .nhd img,body.nav-rail .nav .soon2,body.nav-rail .nav .ni.sub{display:none}
body.nav-rail .nav .nhd{padding:14px 0 12px;justify-content:center}
body.nav-rail .nav .ni{justify-content:center;padding:7px 0}
body.nav-rail .nav .nb{position:absolute;top:2px;right:2px;min-width:16px;padding:0 4px;font-size:10px}
body.nav-rail .nav .ngh{display:block;height:1px;padding:0;margin:10px 6px;background:var(--line);font-size:0}
body.nav-rail .nav .nme{justify-content:center;padding:8px 0}body.nav-rail .nav .nav-av{margin:0}
#nav-btn,#nav-shade{display:none}
/* a phone: the menu is behind ☰ and slides over the page */
@media (max-width:759px){
  body.has-nav{--navw:0px}
  body.has-nav .nav{width:264px;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 30px rgba(0,0,0,.2)}
  body.has-nav.nav-open .nav{transform:none}
  body.has-nav .nav .nhd{padding-left:58px}
  body.has-nav .nav .nrail{display:none}
  body.has-nav #appbar{display:flex;padding-left:46px}
  body.has-nav #nav-btn{display:grid;place-items:center;position:fixed;left:10px;top:10px;z-index:8001;width:38px;height:38px;border-radius:9px;
    border:1px solid var(--line);background:var(--surface,#fff);color:var(--ink);cursor:pointer}
  body.has-nav.nav-open #nav-shade{display:block;position:fixed;inset:0;z-index:7999;background:rgba(15,23,42,.35)}
}
/* ===================== the dashboard: a working column and Today ===================== */
.dwrap{container-type:inline-size}
.dgrid{display:flex;flex-direction:column;gap:16px}
.dgrid>.dmain{min-width:0}
@container (min-width:900px){ .dgrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:18px}
  .dgrid>.dtoday{grid-column:2;grid-row:1;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
  .dgrid>.dmain{grid-column:1;grid-row:1} }
.dtoday .card{margin:0}
.tdl{padding:4px 0 6px}
.tdg{font:9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:12px 14px 4px}
.tdi{position:relative;padding:7px 14px 8px 22px;border-top:1px solid var(--line)}
.tdg+.tdi{border-top:0}
.tdi::before{content:"";position:absolute;left:10px;top:14px;width:7px;height:7px;border-radius:50%;background:#C8CCD3}
.tdi.hot::before{background:#D97706}.tdi.late::before{background:#DC2626}
.tdo{display:block;width:100%;border:0;background:none;padding:0;text-align:left;font:inherit;cursor:pointer;color:var(--ink)}
.tdo:hover .tdw{text-decoration:underline}
.tdn{display:block;font-size:11.5px;color:var(--muted)}
.tdw{display:block;font-weight:600;font-size:13.5px;line-height:1.35}
.tdi.late .tdw{color:#B91C1C}
.tdt{display:block;font-size:12.5px;color:var(--ink);opacity:.8}
.tdr{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.tdc{margin-top:6px;font-size:12px;padding:3px 10px}
/* activity (26 Sept) */
#act-who,#act-job{min-width:240px;max-width:100%;padding:6px 8px;border:1px solid var(--ctl-edge);border-radius:8px;background:var(--ctl-bg,#fff);font:inherit}
.actl{padding:0 0 8px}
.actd{font:9.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 16px 6px;border-top:1px solid var(--line)}
.actl .actd:first-child{border-top:0}
.acti{display:grid;grid-template-columns:70px minmax(0,1fr) auto;gap:10px;padding:5px 16px;font-size:13.5px;align-items:baseline}
.acti .actt{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.acti .actw{min-width:0;overflow-wrap:anywhere}
.acti.k-view .actw{color:var(--muted)}
.acti.k-edit .actw{color:var(--ink)}
.acti .actj{font-size:12.5px;text-align:right;white-space:nowrap}
@media (max-width:600px){ .acti{grid-template-columns:56px minmax(0,1fr)} .acti .actj{grid-column:2;text-align:left} }
/* the calendar (26 Sept) */
.calh{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.calh h2{margin:0;font-size:19px;letter-spacing:-.01em}
.calnav{display:flex;gap:6px;align-items:center}.calnav b{font-size:15px;margin-left:6px}
#cal-who{padding:6px 8px;border:1px solid var(--ctl-edge);border-radius:8px;font:inherit;background:var(--ctl-bg,#fff)}
.calc{overflow:hidden}
.cmh{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.cmh div{font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:8px 8px}
.cmg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cmd{min-height:104px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cmd:nth-child(7n){border-right:0}
.cmd.out{background:var(--surface-2,#FAFAF9)}.cmd.out .cmn{opacity:.45}
.cmd.today .cmn{background:var(--brand);color:var(--brand-ink,#fff)}
.cmn{align-self:flex-start;border:0;background:none;font:inherit;font-size:12.5px;font-weight:600;width:26px;height:26px;border-radius:50%;cursor:pointer;color:var(--ink)}
.cmn:hover{background:var(--brand-tint,#EEF1F6)}
.apc{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--k);background:color-mix(in srgb,var(--k) 10%,transparent);border-radius:4px;padding:2px 5px;
  font:inherit;font-size:11.5px;line-height:1.35;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apc b{font-weight:600}.apc span{color:var(--muted)}
.apc.st-cancelled,.apb.st-cancelled{text-decoration:line-through;opacity:.55}
.apc.st-done,.apb.st-done{opacity:.6}
.cmore{border:0;background:none;font-size:11px;color:var(--brand);cursor:pointer;text-align:left;padding:0 5px}
.cgw{display:grid;grid-template-columns:52px 1fr;max-height:70vh;overflow:auto}
.cgt{position:relative;height:calc(14 * 56px);margin-top:34px}
.cgh{position:absolute;right:6px;font-size:10.5px;color:var(--muted);transform:translateY(-6px)}
.cgc{display:grid;min-width:0}
.cgcol{border-left:1px solid var(--line);min-width:0}
.cgcol.today .cgk{color:var(--brand);font-weight:700}
.cgk{height:34px;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface,#fff);z-index:2}
.cgb{position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 55px,var(--line) 55px,var(--line) 56px);cursor:copy}
.apb{position:absolute;border:0;border-left:3px solid var(--k);background:color-mix(in srgb,var(--k) 14%,var(--surface,#fff));border-radius:5px;padding:3px 6px;text-align:left;
  font:inherit;font-size:11.5px;line-height:1.3;color:var(--ink);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.apb b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.apb span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 2px;font-size:12px;color:var(--muted)}
.calkey span{display:inline-flex;align-items:center;gap:6px}.calkey i{width:10px;height:10px;border-radius:3px;background:var(--k)}
/* the appointment panel and form */
.apov{position:fixed;inset:0;background:rgba(15,23,42,.38);z-index:9500;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 16px;overflow:auto}
.apd{width:100%;max-width:440px;background:var(--surface,#fff);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.apd.wide{max-width:640px}
.aph{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.aph i{width:12px;height:12px;border-radius:3px;background:var(--k)}.aph b{font-size:16px}.aph span{color:var(--muted);font-size:13px;flex:1}
.aph .g-x{margin-left:auto;border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.apb2{padding:14px 16px}
.apl{margin:0 0 6px;font-size:14px}
.apa{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.apf{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 12px}
.apf .fld{display:flex;flex-direction:column;gap:4px;min-width:0}.apf .fld.full{grid-column:1/-1}
.apf label{font-size:12px;color:var(--muted)}
.apf select,.apf input,.jno textarea,#ap-why{font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--ctl-edge);border-radius:8px;background:var(--ctl-bg,#fff);min-width:0;width:100%;box-sizing:border-box}
@media (max-width:600px){ .apf{grid-template-columns:1fr 1fr} }
.apday{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px}
.apday .k{font-weight:600;margin-bottom:8px}
.apdr{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:8px;margin:4px 0}
.apdr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}.apdr.me span{color:var(--ink);font-weight:600}
.apdt{position:relative;height:16px;background:var(--surface-2,#F5F6F7);border-radius:4px}
.apdt i{position:absolute;top:2px;bottom:2px;border-radius:3px;background:var(--k)}
.apdt i.new{background:none;border:2px dashed var(--brand);top:0;bottom:0}
.apdx{display:flex;justify-content:space-between;margin-left:118px;color:var(--muted);font-size:10.5px}
.apclash{margin-top:12px;background:#FEF3F2;border:1px solid #F4C7C3;color:#7A271A;border-radius:10px;padding:10px 12px;font-size:13px}
.jap .japi{display:flex;gap:8px;align-items:center;margin:0 0 4px}.jap .japi i{width:8px;height:8px;border-radius:2px;background:var(--k);flex:0 0 8px}
.jno textarea{margin:0 0 6px;resize:vertical}
.jnoi{border-top:1px solid var(--line);padding:7px 0}.jnoi:first-of-type{margin-top:8px}
.jnoh{font-size:11.5px;color:var(--muted)}.jnot{white-space:pre-wrap;font-size:13.5px}
.apb.short{flex-direction:row;gap:6px;align-items:center;padding:1px 6px}.apb.short span:last-child{display:none}

/* 27 Sept: the two doors a signature comes back through */
.sigdoor{border-top:1px solid var(--line)}.sigdoor:first-of-type{border-top:0}
.sigdoor .sdh{font:10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.actp{border:1.5px solid var(--brand);border-radius:10px;padding:10px 12px;margin:8px 0 4px;background:var(--surface,#fff);white-space:normal;text-align:left}
.actp label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
.actp>input{width:100%;box-sizing:border-box}
.actp .actch{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}.actp .chip.on{background:var(--brand);color:#fff}
.actp .acts{padding:10px 0 0;border:0;gap:8px}

/* ============================================================================
   THE WALK — 28 Sept. The step bar as Scott ruled it: a done step keeps a ✓ and stays white; GREEN is the step
   the job has got to; a stop light in a step's top-right corner is amber (waiting on someone) or red (a problem),
   on a done step too; the dark ring is the step on screen. Inside: stages in order, the one that needs you lit.
   ============================================================================ */
.steps{gap:6px;border:0;overflow:visible;background:none;border-radius:0;flex-wrap:wrap;padding-top:6px}
.steps button{position:relative;border:1.5px solid var(--line);border-radius:10px;background:#fff;min-width:0}
.steps button:last-child{border-right:1.5px solid var(--line)}
.steps button[aria-pressed=true]{background:#fff;color:var(--ink)}
.steps button.sd .n{color:var(--ok);opacity:1;font-weight:700}
.steps button.sc,.steps button.sc[aria-pressed=true]{background:var(--ok);border-color:var(--ok);color:#fff}
.steps button.sc .n,.steps button.sc .c{opacity:.9}
.steps button.sf{background:#F6F7F6;border-style:dashed;color:#6B7280}
.steps button.on{outline:3px solid var(--ink);outline-offset:2px}
.steps button.on::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.steps .lt{position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 2.5px #fff,0 1px 3px rgba(0,0,0,.35)}
.steps .lt.w{background:var(--amber)}.steps .lt.b{background:var(--red)}
@media (max-width:760px){.steps button{flex:1 1 30%}}

.wnext{display:flex;align-items:center;gap:12px;background:#fff;border-radius:10px;padding:10px 14px;margin:6px 0 14px;border:1px solid var(--line);border-left:6px solid var(--brand)}
.wnext.wait{border-left-color:var(--amber)}.wnext.bad{border-left-color:var(--red)}.wnext.done{border-left-color:var(--ok)}
.wnext b{font-size:15.5px}
.wtag{border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:2px 9px;margin-left:8px;vertical-align:1px;white-space:nowrap}
.wnext .wtag{margin-left:0}
.wtag.now{background:#F2C94C;color:#3A2A00}.wtag.w{background:var(--amber);color:#fff}.wtag.b{background:var(--red);color:#fff}.wtag.ok{background:var(--ok);color:#fff}
.wgrid{display:grid;grid-template-columns:minmax(0,1fr) clamp(270px,30%,360px);gap:16px;align-items:start}
@media (max-width:900px){.wgrid{grid-template-columns:minmax(0,1fr)}.wgrid .snap{position:static}}
.walk{display:flex;flex-direction:column;gap:8px}
.wk{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.wkh{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:11px 14px;text-align:left;font:inherit;color:inherit;cursor:pointer;border-radius:12px}
.wkh[tabindex="-1"]{cursor:default}
.wki{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;background:#EEF0EE;color:var(--muted)}
.wkt{flex:1;min-width:0}.wkt b{font-weight:650}.wks{display:block;font-size:13px;color:var(--muted)}
.wkr{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.chev{display:inline-block;transition:transform .15s;font-size:11px}.wk.open .chev{transform:rotate(90deg)}
.wkb{padding:2px 14px 14px 52px}
.wk-done .wki{background:var(--ok);color:#fff}
.wk-later{opacity:.62}
.wk-now{border:3px solid var(--brand);box-shadow:0 8px 24px rgba(0,0,0,.10)}.wk-now .wki{background:var(--brand);color:#fff}
.wk-wait{border:2px solid var(--amber-edge);background:linear-gradient(var(--amber-tint),var(--surface) 70px)}.wk-wait .wki{background:var(--amber);color:#fff}
.wk-bad{border:2px solid #F3B4AC;background:linear-gradient(#FEF1EF,var(--surface) 70px)}.wk-bad .wki{background:var(--red);color:#fff}
@media (max-width:600px){.wkb{padding-left:14px}}
.wit{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}.wkb>.wit:first-child{border-top:0}
.wit .c{width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px;display:grid;place-items:center;font-size:11px;font-weight:800;border:1.5px solid #BFC7C2;color:#9AA3A0}
.wit.done .c{background:var(--ok);border-color:var(--ok);color:#fff}.wit.na .c{background:#EEF1EE;border-color:#EEF1EE}
.wit .m{flex:1;min-width:0}.wit .m b{font-weight:600}.wit .s{font-size:13px;color:var(--muted)}.wit.na .m b{color:var(--muted);font-weight:500}
.wact{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px}
.wq{background:none;border:0;color:var(--brand);text-decoration:underline;padding:0;font:inherit;font-size:13px;cursor:pointer}
.wform{background:var(--ctl-bg);border:1px solid var(--ctl-edge);border-radius:10px;padding:10px 12px;margin:8px 0;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end}
.wform label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px;flex:1 1 170px}
.wform label.inl{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.wform label.drop{flex:1 1 100%;margin:0}
.wform input,.wform select{border:1px solid var(--chip-edge);border-radius:7px;padding:6px 8px;font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.wform .wsub{flex:1 1 100%}.wform .chain{flex:1 1 100%;padding:0}
.wbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;flex:1 1 100%}
.wmore{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-top:10px;color:var(--muted);align-items:baseline}
.wline{font-size:13.5px;margin:6px 0}
.wsub{font-weight:650;font-size:13px;margin:10px 0 4px}
.wtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 12px}
.wtile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.wtile .k{font:10px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wtile .v{font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}.wtile .s{font-size:12px;color:var(--muted)}
.wtile.warn{border:2px solid #F3B4AC;background:#FEF1EF}.wtile.warn .v{color:var(--red)}
.wpill{border-radius:999px;padding:1px 9px;font-size:12px;font-weight:650;white-space:nowrap}
.wpill.ok{background:#E7F5EE;color:var(--ok)}.wpill.w{background:var(--amber-tint);color:var(--amber-ink)}.wpill.b{background:#FEF1EF;color:var(--red)}.wpill.gr{background:#EEF1EE;color:var(--muted)}
.snap{position:sticky;top:10px;display:flex;flex-direction:column;gap:10px}
.snap::before{content:"SNAPSHOT · ACTIONS";display:block;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;color:#fff;background:var(--brand);border-radius:10px;padding:9px 12px}
.snap .card{margin:0}
.sfx{display:grid;grid-template-columns:minmax(80px,42%) minmax(0,1fr) 28px;gap:8px;align-items:center;padding:7px 13px;border-top:1px solid var(--line);font-size:13.5px}
.snap .card>.sfx:nth-child(2){border-top:0}
.sfx>span:first-child{color:var(--muted);font-size:12.5px}.sfx>b{overflow-wrap:anywhere;font-weight:600}
.sfx select{font:inherit;font-size:13px;border:1px solid var(--chip-edge);border-radius:7px;padding:3px 6px}
.sed{border:1px solid var(--btn-edge);background:#fff;border-radius:7px;width:28px;height:28px;padding:0;color:var(--brand);cursor:pointer}
.sed:hover{background:var(--brand);color:#fff}
.slk{border:0;background:none;width:28px;opacity:.55;cursor:help;padding:0;font-size:14px}
.sedbox,.slkwhy{display:none;grid-column:1/-1;background:var(--ctl-bg);border-radius:8px;padding:8px}
.sfx.open .sedbox{display:grid;gap:6px}.sfx.showwhy .slkwhy{display:block;font-size:12.5px;color:var(--muted)}
.sedbox input{border:1px solid var(--chip-edge);border-radius:7px;padding:6px 8px;font:inherit;font-size:14px}
.sdr{display:grid;grid-template-columns:minmax(0,1fr) 34px 34px;gap:6px;align-items:center;padding:7px 13px;border-top:1px solid var(--line);font-size:13.5px}
.snap .card>.sdr:nth-child(2){border-top:0}
.sdr small{display:block;color:var(--muted);font-size:12px}
.ic2{width:34px;height:30px;padding:0!important;display:inline-grid;place-items:center;font-size:14px;vertical-align:middle;margin-left:4px}
.ic2.no{color:#B8C0BB;font-size:13px}
.sdl{padding:6px 13px 10px;font-size:12.5px;border-top:1px solid var(--line)}.sdl>div{padding:3px 0}
.mailbox{width:min(560px,100%)}
.mlab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}
.mto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:8px;align-items:center;margin:0 0 6px;font-size:13.5px}
.mto label{display:flex;gap:8px;align-items:center}.mto input[type=checkbox]{width:auto;margin:0;flex:none}
.mto input:not([type=checkbox]),.mfull{border:1px solid var(--chip-edge);border-radius:8px;padding:7px 9px;font:inherit;font-size:14px;width:100%;box-sizing:border-box}
.matt{display:inline-flex;gap:6px;align-items:center;background:var(--ctl-bg);border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:13px;margin-top:10px}
@media (max-width:600px){.mto{grid-template-columns:1fr}}
/* the page a PDF is made from: off-screen, Letter width */
.pdfsrc{position:fixed;left:-12000px;top:0;width:816px;z-index:-1;pointer-events:none}
.pdfsrc .pbody{background:#fff;padding:0}
.pdfsrc .pp{max-width:none;width:816px;min-height:1056px;margin:0;box-shadow:none;padding:48px 56px 64px;position:relative}
/* Reports */
.rhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}.rhead h1{margin:0}
.rranges{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 6px}.rranges .chip.on{background:var(--ok);border-color:var(--ok);color:#fff}
.rcustom{display:flex;gap:8px;align-items:center;margin:4px 0 6px;font-size:13.5px}.rcustom input{border:1px solid var(--chip-edge);border-radius:7px;padding:4px 8px;font:inherit}
.rspan{font-size:13px;margin:0 0 12px}
.rtiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.rtile{border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;background:#fff;text-align:left;font:inherit;color:inherit;cursor:pointer;display:flex;flex-direction:column}
.rtile:hover,.rtile.on{border-color:var(--ok)}.rtile.on{box-shadow:0 0 0 2px #E7F5EE}
.rtile .k{font-size:12.5px;color:var(--muted);font-weight:600}.rtile .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}.rtile .s{font-size:12px;color:var(--muted)}
.neg{color:var(--red)}
.rdrill{margin:12px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.rfoot{font-size:12.5px;margin:10px 0 0}
.rage{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}
.rag{border-radius:10px;padding:8px 10px;background:var(--ctl-bg);display:flex;flex-direction:column;font-size:12px;color:var(--muted)}.rag b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.rag.w{background:var(--amber-tint)}.rag.b{background:#FEF1EF}
.rtwo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1100px){.rtiles{grid-template-columns:repeat(3,minmax(0,1fr))}.rtwo{grid-template-columns:1fr}}
@media (max-width:560px){.rtiles{grid-template-columns:repeat(2,minmax(0,1fr))}.rage{grid-template-columns:repeat(2,1fr)}.wtiles{grid-template-columns:1fr}}

/* ===== 29 Sept — the scope as one sheet (Scott: "you can not see the whole walk decisions in one view") ===== */
.srecg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.srecg>div{padding:9px 13px;border-right:1px solid var(--line);font-size:13px;min-width:0;overflow-wrap:anywhere}
.srecg>div:last-child{border-right:0}
.srecg small{display:block;color:var(--muted);font-size:11.5px}.srecg b{font-weight:600;display:block}
.srecg span{display:block;font-size:12px;color:var(--muted)}
@media(max-width:760px){.srecg{grid-template-columns:1fr 1fr}.srecg>div{border-bottom:1px solid var(--line)}}
.srow{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:14px;padding:11px 13px;border-top:1px solid var(--line);align-items:start}
.ssheet .hd+.srow{border-top:0}
@media(max-width:760px){.srow{grid-template-columns:1fr;gap:6px}}
.srow.todo{background:var(--amber-tint)}
.srow.next{box-shadow:inset 4px 0 0 var(--amber)}
.sq{font-weight:650;font-size:14px}
.sh{font-size:12px;color:var(--muted);margin-top:2px}
.sr{font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;color:#8A8F98;margin-top:4px}
.smulti{display:inline-block;margin-left:4px;background:#E8F0FB;color:#2456A6;font-weight:700;font-size:10.5px;padding:1px 7px;border-radius:999px;vertical-align:2px;white-space:nowrap}
.stodo{display:inline-block;margin-left:4px;background:#fff;border:1px solid var(--amber-edge);color:var(--amber-ink);font-weight:700;font-size:10.5px;padding:0 7px;border-radius:999px;vertical-align:2px;white-space:nowrap}
.sopts{display:flex;flex-wrap:wrap;gap:6px}
.sopt{display:inline-flex;align-items:flex-start;gap:7px;border:1.5px solid var(--chip-edge);background:#fff;border-radius:999px;padding:6px 12px;
  font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink);text-align:left}
.sopt:hover{border-color:var(--brand)}
.sopt.sel{background:var(--brand);border-color:var(--brand);color:#fff}
.sopt.unsure{border-style:dashed}
.sopt[disabled]{opacity:.45;cursor:not-allowed}
.sopt .t small{display:block;font-size:11.5px;opacity:.75;font-weight:400}
.sopt .mk{flex:0 0 15px;width:15px;height:15px;margin-top:2px;border:1.6px solid #9AA3AE;background:#fff;
  display:flex;align-items:center;justify-content:center;font:800 11px/1 -apple-system,sans-serif;color:var(--brand)}
.sopt .mk.r{border-radius:50%}.sopt .mk.c{border-radius:3px}
.sopt.sel .mk{border-color:#fff}
.sopt.sel .mk.r{box-shadow:inset 0 0 0 3px var(--brand)}
.scount{font-size:12px;color:#2456A6;margin-top:7px}
.swarn{margin:0 13px 12px;padding:10px 12px;border-radius:9px;background:var(--amber-tint);border:1px solid var(--amber-edge);font-size:13px;line-height:1.5}
.sbtns{display:inline-flex;gap:8px;margin-left:6px;vertical-align:middle}
.sfoot{display:flex;align-items:center;gap:10px;padding:12px 13px;border-top:1px solid var(--line);background:var(--surface-2);font-size:13px}
.sfoot .sp{flex:1}
.ssheet.slock .sopt{pointer-events:none}
.ssheet.slock .sopt:not(.sel){opacity:.55}
.lockd{font-size:13px}
.tg.ok{background:#E6F4EC;border-color:#BFE3CF;color:var(--ok);font-weight:600}
.tg.warn{background:var(--amber-tint);border-color:var(--amber-edge);color:var(--amber-ink);font-weight:600}

/* ===== insurance: a card beside the step, a status line under the step bar, the whole claim in a drawer ===== */
.insline{display:flex;align-items:center;gap:10px;width:100%;margin:-6px 0 14px;background:#EEF3FB;border:1px solid #CFDDF3;border-radius:10px;
  padding:7px 12px;font:inherit;font-size:13px;color:#24406E;cursor:pointer;text-align:left}
.insline:hover{border-color:#9FB9E3}
.insline .dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.insline .dot.g{background:var(--ok)}.insline .dot.r{background:var(--red)}
.insline b{font-weight:650}.insline .sp{flex:1}.insline .go{white-space:nowrap;font-weight:600}
.ic .ln{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 13px;border-top:1px solid var(--line);
  font-size:13px;cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;color:inherit}
.ic .hd+.ln{border-top:0}
.ic .ln:hover{background:var(--surface-2)}
.ic .ln small{color:var(--muted);font-size:12px}.ic .ln .v{font-weight:600;min-width:0;overflow-wrap:anywhere}
.ic .ln .v small{display:block;font-weight:400}
.ic .ln .ed{font-size:12px;color:var(--brand)}
.ic .ln .miss{color:var(--amber-ink);font-weight:600}
.ic .edf{padding:8px 13px 12px;border-top:1px solid var(--line);background:var(--surface-2);font-size:12.5px}
.ic .edf input{width:100%;border:1px solid var(--ctl-edge,#C9D3CD);border-radius:7px;padding:6px 8px;font:inherit;font-size:13px;margin:3px 0 8px;box-sizing:border-box}
.ic .lockmsg{padding:8px 13px 11px;border-top:1px solid var(--line);background:var(--amber-tint);font-size:12.5px;color:var(--amber-ink)}
.ic .sec{padding:9px 13px 4px;font:10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}
.ic .add{padding:4px 13px 10px;font-size:12.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ic .foot{padding:10px 13px;border-top:1px solid var(--line);background:var(--surface-2)}
.cdrawer{position:fixed;inset:0;background:rgba(15,20,18,.4);z-index:55}
.cdrawer .din{position:absolute;top:0;right:0;bottom:0;width:min(1060px,100%);background:var(--page);overflow:auto;box-shadow:-8px 0 24px rgba(0,0,0,.18)}
.cdrawer .dh{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}
.cdrawer .dh b{flex:1;font-size:16px}
.cdrawer .dbody{padding:16px 18px 40px}
@media print{.cdrawer,.insline{display:none!important}}
/* the Issue tab, below the Guide (Scott, 2 Oct) — same edge, same panel shape; opening one closes the other */
#i-tab{position:fixed;right:0;top:calc(46% + 104px);z-index:9001;transform:rotate(-90deg) translateY(-100%);transform-origin:top right;
  background:#B45309;color:#fff;border:0;border-radius:8px 8px 0 0;padding:7px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
#i-tab span{display:inline-block;width:16px;height:16px;line-height:16px;border-radius:50%;background:#fff;color:#B45309;text-align:center;font-size:11px;font-weight:800;margin-right:4px}
body.g-open #i-tab,body.i-open #i-tab,body.i-open #g-tab{right:min(380px,100vw)}
#i-panel{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:9000;background:var(--surface,#fff);border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(0,0,0,.12);transform:translateX(105%);transition:transform .25s ease;display:flex;flex-direction:column;font-size:14px}
body.i-open #i-panel{transform:none}
body.i-open.i-picking #i-panel{transform:translateX(105%)}
@media (min-width:1100px){ body.i-open{margin-right:380px} body.i-open.i-picking{margin-right:0} }
#i-panel .g-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px 12px;background:#B45309;color:#fff}
#i-panel .g-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
#i-panel .g-t{font-size:16px;font-weight:700;margin-top:2px}
#i-panel .g-x{background:none;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
#i-panel .g-body{flex:1;overflow:auto;padding:12px 16px}
#i-panel .g-ft{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
#i-panel .g-c{flex:1;color:var(--muted);font-size:12px}
#i-panel .g-b{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:#fff;cursor:pointer;min-height:40px}
#i-panel .g-b.pri{background:#B45309;color:#fff;border-color:#B45309}
#i-panel .g-b:disabled{opacity:.4;cursor:default}
#i-panel .g-lk{background:none;border:0;color:#B45309;font:inherit;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
#i-panel .i-where{background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:12px}
#i-panel .i-q{font-weight:700;margin:12px 0 6px}
#i-panel .i-q span{font-weight:400;color:var(--muted);font-size:12.5px}
#i-panel .i-kinds{display:flex;flex-direction:column;gap:5px}
#i-panel .i-kind{text-align:left;font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;min-height:40px}
#i-panel .i-kind.on{border-color:#B45309;box-shadow:0 0 0 1px #B45309;background:#FFF7ED;font-weight:600}
#i-panel .i-pt{background:#F3F4F6;border-radius:8px;padding:8px 10px;font-size:13px}
#i-panel textarea{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;resize:vertical}
#i-panel .i-stuck{display:flex;gap:7px;align-items:center;margin:8px 0;font-size:13.5px;cursor:pointer}
#i-panel .i-also{font-size:11.5px;color:var(--muted);line-height:1.4}
#i-panel .i-err{color:var(--red,#B42318);font-size:13px;margin-top:6px}
#i-panel .i-err:empty{display:none}
#i-panel .i-done{background:#ECFDF3;border:1px solid #ABEFC6;border-radius:9px;padding:12px;line-height:1.5}
#i-panel .i-done div{margin-top:10px}
#i-panel .i-list{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}
#i-panel .i-lh{font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between}
#i-panel .i-it{border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:13px}
#i-panel .i-w{margin-top:3px;line-height:1.4}
#i-panel .i-d{color:var(--muted);font-size:11.5px}
#i-panel .i-s{font-size:11px;padding:1px 7px;border-radius:999px;background:#F3F4F6}
#i-panel .i-s.open{background:#FFF7ED;color:#B45309}#i-panel .i-s.fixed{background:#ECFDF3;color:#067647}#i-panel .i-s.stuck{background:#FEF3F2;color:#B42318}
#i-panel .i-set{display:flex;gap:5px;margin-top:6px}#i-panel .i-set input{flex:1;min-width:0;font:inherit;font-size:12.5px;padding:4px 6px}
#i-pickbar{display:none;position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:10070;background:#B45309;color:#fff;border-radius:999px;padding:8px 10px 8px 16px;font-size:13.5px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#i-pickbar button{margin-left:10px;background:#fff;color:#B45309;border:0;border-radius:999px;padding:4px 10px;font:inherit;font-weight:600;cursor:pointer}
body.i-picking #i-pickbar{display:block}
body.i-picking,body.i-picking *{cursor:crosshair!important}
@media print{#i-tab,#i-panel,#i-pickbar{display:none!important}}
/* details of the work — the free-form part of the scope (2 Oct) */
.snotes .snote{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;resize:vertical;min-height:110px}
.snotes .snote-ro{white-space:pre-wrap;line-height:1.5;padding:8px 10px;background:#F9FAFB;border:1px solid var(--line);border-radius:8px}
.snp{margin:8px 0 12px}.snp b{display:block;margin-bottom:3px}.snp div{white-space:pre-wrap;line-height:1.5}
/* a new item typed on Price It (3 Oct) */
.newit{margin:0 12px 10px;padding:10px 10px 12px;border:1px solid var(--line);border-radius:9px;background:#FAFBFC}
.newit .flds{padding:0;gap:8px}
.nichoice{display:flex;flex-direction:column;gap:5px;margin:8px 0 4px;font-size:13px}
.nichoice label{display:flex;gap:6px;align-items:flex-start;cursor:pointer}
.nichoice label.off{opacity:.5;cursor:default}
.jobonly{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;background:#FFF7ED;color:#B45309;border:1px solid #FED7AA;vertical-align:1px}

/* 3 Oct: the claim file's one top card — the claim, its dates, the people, the decision */
#claimhead .csec{padding:10px 14px 0;font:10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);margin-top:6px;display:flex;justify-content:space-between}
#claimhead .csec:first-of-type{border-top:0;margin-top:0}
#claimhead .csec span{letter-spacing:0;text-transform:none;font-size:11.5px}
#claimhead .kv{padding:6px 14px 8px}
#claimhead .flds input{width:100%;border:1px solid var(--chip-edge);border-radius:6px;padding:5px 7px;font:inherit;font-size:13px}
#claimhead .flds input[readonly]{background:#F7F7F5;color:var(--muted)}
.cfwas{font-size:11px;color:var(--amber-ink,#92400E);margin-top:3px;line-height:1.3}

/* ===================== THE JOB, STEP BY STEP — the walk (3 Oct, from mockup v4) =====================
   It sits over the app. The screen under it is hidden so its boxes cannot be found instead of the walk's; the
   claim drawer, the print pane and the money book open over the walk. The Guide and Issue tabs stay on top. */
body.wz-open #view>*:not(.cdrawer),body.wz-open #steps,body.wz-open #home{display:none!important}
body.wz-open .cdrawer{z-index:8700}
body.wz-open .ovl{z-index:8800}
:is(#wiz,#cwalk) .wzshade{position:fixed;inset:0;background:rgba(17,24,39,.4);z-index:8500}
:is(#wiz,#cwalk) .wzbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,96vw);height:min(760px,94vh);background:var(--surface,#fff);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);display:flex;flex-direction:column;overflow:hidden;z-index:8501;font-size:15px;color:var(--ink,#111827)}
:is(#wiz,#cwalk) .wztop{padding:14px 20px 10px;border-bottom:1px solid var(--line)}
:is(#wiz,#cwalk) .wzrow1{display:flex;align-items:center;gap:6px}
:is(#wiz,#cwalk) .wzjob{font-weight:700;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#wiz,#cwalk) .wzjob span{font-weight:400;color:var(--muted);font-size:13px;margin-left:8px}
:is(#wiz,#cwalk) .wzx{background:none;border:0;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:8px;white-space:nowrap}
:is(#wiz,#cwalk) .wzx:hover{background:var(--chip,#F3F4F6)}
:is(#wiz,#cwalk) .wzsteps{display:flex;gap:4px;margin-top:12px}
:is(#wiz,#cwalk) .wzsteps button{flex:1;border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;min-width:0}
:is(#wiz,#cwalk) .wzsteps i{display:block;height:5px;border-radius:3px;background:#E5E7EB}
:is(#wiz,#cwalk) .wzsteps .done i{background:#2C5491}:is(#wiz,#cwalk) .wzsteps .now i{background:#1F3A68}
:is(#wiz,#cwalk) .wzsteps small{display:block;font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#wiz,#cwalk) .wzsteps .now small{color:#1F3A68;font-weight:700}
:is(#wiz,#cwalk) .wzsteps button:disabled{cursor:default;opacity:.7}
:is(#wiz,#cwalk) .wzbody{flex:1;overflow:auto;padding:22px 26px}
:is(#wiz,#cwalk) h2{margin:0 0 4px;font-size:22px;letter-spacing:-.01em}
:is(#wiz,#cwalk) .wzlead{margin:0 0 18px;color:var(--muted)}
:is(#wiz,#cwalk) .wzfoot{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line);background:#FAFBFC}
:is(#wiz,#cwalk) .sp{flex:1}
:is(#wiz,#cwalk) .wzbtn{font:inherit;font-weight:600;border-radius:10px;padding:9px 16px;cursor:pointer;border:1px solid var(--line);background:#fff;min-height:42px;color:inherit}
:is(#wiz,#cwalk) .wzbtn.pri{background:#1F3A68;color:#fff;border-color:#1F3A68}
:is(#wiz,#cwalk) .wzbtn.pri.dim,:is(#wiz,#cwalk) .wzbtn:disabled{opacity:.45}
:is(#wiz,#cwalk) .wzbtn:disabled{cursor:default}
:is(#wiz,#cwalk) .wzbtn.ghost{border-color:transparent;background:none;color:var(--muted)}
:is(#wiz,#cwalk) .wzbtn.wide{width:100%}
:is(#wiz,#cwalk) .wzfoot .wzbtn{min-height:46px;padding:11px 20px}
:is(#wiz,#cwalk) .wzmini{font:inherit;font-size:13px;color:#1F3A68;background:none;border:0;cursor:pointer;font-weight:600;padding:4px}
:is(#wiz,#cwalk) .wzl{display:block;font-size:12.5px;font-weight:600;color:#374151;margin:0 0 5px}
:is(#wiz,#cwalk) .wzin{width:100%;font:inherit;padding:10px 12px;border:1px solid #D1D5DB;border-radius:9px;background:#fff;color:inherit;box-sizing:border-box}
:is(#wiz,#cwalk) .wzin.bad{border-color:var(--red,#B42318);background:#FEF6F5}
:is(#wiz,#cwalk) .wzin:focus{outline:2px solid #2C5491;outline-offset:1px;border-color:#2C5491}
:is(#wiz,#cwalk) .wzf{margin-bottom:14px;min-width:0}
:is(#wiz,#cwalk) .wzg2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
:is(#wiz,#cwalk) .wzg3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
:is(#wiz,#cwalk) .wzg6{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
:is(#wiz,#cwalk) .wzq{margin:0 0 18px}:is(#wiz,#cwalk) .wzqt{font-weight:700;margin-bottom:8px}
:is(#wiz,#cwalk) .wzch{display:flex;flex-wrap:wrap;gap:8px}
:is(#wiz,#cwalk) .wzch button{font:inherit;padding:10px 16px;border-radius:10px;border:1px solid #D1D5DB;background:#fff;cursor:pointer;min-height:46px;color:inherit}
:is(#wiz,#cwalk) .wzch button.on{border-color:#1F3A68;background:#EAF0F8;color:#1F3A68;font-weight:700;box-shadow:0 0 0 1px #1F3A68}
:is(#wiz,#cwalk) .wzch button:disabled{opacity:.45;cursor:default}
:is(#wiz,#cwalk) .wzmuted{color:var(--muted);font-size:13px}
:is(#wiz,#cwalk) .wznote{background:#FFF7ED;border:1px solid #FED7AA;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
:is(#wiz,#cwalk) .wzwarn{background:#FEF3F2;border:1px solid #F4C7C3;color:#7A271A;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
:is(#wiz,#cwalk) .wzgood{background:#ECFDF3;border:1px solid #ABEFC6;border-radius:10px;padding:10px 12px;font-size:13.5px;margin:10px 0}
:is(#wiz,#cwalk) .wzbtns{display:inline-flex;gap:8px;margin-left:6px;vertical-align:middle}
:is(#wiz,#cwalk) .wzrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
:is(#wiz,#cwalk) .wzdoors{display:grid;grid-template-columns:1fr 1fr;gap:14px}
:is(#wiz,#cwalk) .wzdoor{position:relative;border:2px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;background:#fff;text-align:left;font:inherit;color:inherit;display:block}
:is(#wiz,#cwalk) .wzdoor:hover{border-color:#1F3A68;background:#EAF0F8}
:is(#wiz,#cwalk) .wzdoor input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
:is(#wiz,#cwalk) .wzdoor b{display:block;font-size:16px;margin-bottom:4px}:is(#wiz,#cwalk) .wzdoor span{color:var(--muted);font-size:13.5px}
:is(#wiz,#cwalk) .wzsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
:is(#wiz,#cwalk) .wzsum div{background:#F9FAFB;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
:is(#wiz,#cwalk) .wzsum small{display:block;color:var(--muted);font-size:12px}:is(#wiz,#cwalk) .wzsum b{font-size:18px}
:is(#wiz,#cwalk) .wzsec{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
:is(#wiz,#cwalk) .wzsh{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}:is(#wiz,#cwalk) .wzsh b{flex:1}
:is(#wiz,#cwalk) .wzsh .wzname{flex:2 1 180px;font-weight:700}:is(#wiz,#cwalk) .wzsh .wzcov{flex:1 1 140px}
:is(#wiz,#cwalk) .wzpill{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:#FFF7ED;color:#B45309}
:is(#wiz,#cwalk) .wzpill.ok{background:#ECFDF3;color:#067647}
:is(#wiz,#cwalk) .wztbl{width:100%;border-collapse:collapse}
:is(#wiz,#cwalk) .wztbl td{padding:9px 6px;border-bottom:1px solid #F1F2F4;vertical-align:middle}
:is(#wiz,#cwalk) .wztbl .wzhd td{padding:0 6px 2px;font-size:11px;color:var(--muted);border:0}
:is(#wiz,#cwalk) .wztbl .wznone{padding-left:36px}
:is(#wiz,#cwalk) .wztbl .wzstg td{padding:16px 6px 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:0}
:is(#wiz,#cwalk) .wztbl .n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
:is(#wiz,#cwalk) .wztbl input[type=checkbox]{width:18px;height:18px}
:is(#wiz,#cwalk) .wztbl tr.off td{color:#B6BCC6;text-decoration:line-through}
:is(#wiz,#cwalk) .wztbl tr.off td:first-child{text-decoration:none}
:is(#wiz,#cwalk) .wzqty{width:80px;padding:6px 8px;text-align:right;display:inline-block}
:is(#wiz,#cwalk) .wzadd{margin-left:8px;font:inherit;font-size:12px;letter-spacing:0;text-transform:none;font-weight:700;color:#fff;background:#1F3A68;border:0;border-radius:999px;padding:3px 10px;cursor:pointer;vertical-align:1px}
:is(#wiz,#cwalk) .wzadd.on{background:#111827}
:is(#wiz,#cwalk) .wzpk td{background:#F6F8FC;border-bottom:1px solid #E3E8F2}
:is(#wiz,#cwalk) .wzpkin{padding:6px 4px}
:is(#wiz,#cwalk) .wzph{display:flex;gap:8px;align-items:center;margin-bottom:8px}:is(#wiz,#cwalk) .wzph input{flex:1}
:is(#wiz,#cwalk) .wzit{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;background:#fff;border:1px solid #E5E7EB;margin-bottom:5px}
:is(#wiz,#cwalk) .wzit b{flex:1;font-weight:600}
:is(#wiz,#cwalk) .wznewl{display:block;width:100%;text-align:left;margin-top:6px;padding:9px 10px;border:1px dashed #9AA6BF;border-radius:8px;background:#fff;font:inherit;font-size:13.5px;font-weight:600;color:#1F3A68;cursor:pointer}
:is(#wiz,#cwalk) .wznf{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:8px}
:is(#wiz,#cwalk) .wzonly{font-size:11px;font-weight:700;color:#92400E;background:#FFF4E5;border-radius:999px;padding:1px 8px;margin-left:6px}
:is(#wiz,#cwalk) .wztotal{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:2px solid #1F3A68}
:is(#wiz,#cwalk) .wztotal b{font-size:22px}
:is(#wiz,#cwalk) .wzlist{list-style:none;margin:0;padding:0}
:is(#wiz,#cwalk) .wzlist li{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #F1F2F4}
:is(#wiz,#cwalk) .wzic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:0 0 22px}
:is(#wiz,#cwalk) .wzic.ok{background:#ECFDF3;color:#067647}:is(#wiz,#cwalk) .wzic.no{background:#FEF3F2;color:#B42318}:is(#wiz,#cwalk) .wzic.warn{background:#FFF7ED;color:#B45309}
:is(#wiz,#cwalk) .wzdocs{display:grid;gap:10px}
:is(#wiz,#cwalk) .wzdoc{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px}
:is(#wiz,#cwalk) .wzdoc .pg{width:34px;height:44px;border:1px solid #D1D5DB;border-radius:4px;background:repeating-linear-gradient(#fff 0 6px,#EEF0F3 6px 7px)}
:is(#wiz,#cwalk) .wzdoc div:nth-child(2){flex:1}:is(#wiz,#cwalk) .wzdoc b{display:block}:is(#wiz,#cwalk) .wzdoc span{color:var(--muted);font-size:13px}
:is(#wiz,#cwalk) .wztl{margin-top:16px;border-left:2px solid #D1D5DB;padding-left:14px}
:is(#wiz,#cwalk) .wztl div{margin:0 0 10px}:is(#wiz,#cwalk) .wztl small{color:var(--muted);margin-left:6px}:is(#wiz,#cwalk) .wztl .wait b{color:#B45309}
:is(#wiz,#cwalk) .wzprev .pbody{background:#EEF0F3;padding:12px;border-radius:10px}
:is(#wiz,#cwalk) .wzprev .pp{background:#fff;margin:0 auto 12px;max-width:760px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
@media (max-width:640px){:is(#wiz,#cwalk) .wzg2,:is(#wiz,#cwalk) .wzg3,:is(#wiz,#cwalk) .wzdoors,:is(#wiz,#cwalk) .wzsum,:is(#wiz,#cwalk) .wznf{grid-template-columns:1fr}:is(#wiz,#cwalk) .wzg6{grid-template-columns:1fr 1fr}:is(#wiz,#cwalk) .wzsteps small{display:none}:is(#wiz,#cwalk) .wzbody{padding:16px}}

/* the version after "Kinsey" (3 Oct) */
.kver{white-space:nowrap;font:inherit;font-style:normal;letter-spacing:.04em;text-transform:none;opacity:.85;margin-left:2px}
button.kver.new{white-space:nowrap;background:#B45309;color:#fff;border:0;border-radius:999px;padding:2px 8px;cursor:pointer;opacity:1;font-weight:700;letter-spacing:.02em}

/* version 2 from the locked banner (3 Oct) */
.frz .revb{display:inline-flex;flex-wrap:wrap;gap:6px;margin:6px 6px 0 0}
.frz .revf{flex-basis:100%;margin-top:8px}
:is(#wiz,#cwalk) .revf{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:12px}
:is(#wiz,#cwalk) .revf label{display:block;font-weight:600;font-size:13.5px}
:is(#wiz,#cwalk) .revf input{width:100%;font:inherit;padding:9px 11px;border:1px solid #D1D5DB;border-radius:9px;margin-top:6px;box-sizing:border-box}
/* the claim, step by step (3 Oct): the same walk, over the claim — above the job walk when it is opened from there */
#cwalk .wzshade{z-index:8850}#cwalk .wzbox{z-index:8851;height:min(700px,94vh)}
#cwalk .wzsay{background:#F0F7F2;border:1px solid #CFE3D5;border-radius:10px;padding:10px 12px;margin:0 0 14px;font-size:14px}
#cwalk .wzcard{border:1px solid var(--line);border-radius:12px;padding:14px;margin:6px 0 14px;background:#FCFCFD}
#cwalk .cwsum{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:6px 0 14px}
#cwalk .cwsr{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 14px;border-top:1px solid var(--line);font-size:14px}
#cwalk .cwsr:first-child{border-top:0}#cwalk .cwsr>span:first-child{color:var(--muted);font-size:13px}
#cwalk .tie{margin:8px 0 0}
@media (max-width:640px){#cwalk .cwsr{grid-template-columns:1fr;gap:2px}}

/* Price It says what is next (3 Oct) */
.pnext{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.pnext b{flex:1 1 260px}
.pnext .btn{margin-left:auto}

/* The number, ready to approve or send: a red ring round the tab, whether it is chosen (black) or not (white) — Scott, 3 Oct */
.subs button.ready{outline:3px solid #DC2626;outline-offset:2px}

/* the side panels fold (3 Oct) */
.snap .sidec:not(.open)>*:not(.hd){display:none!important}
.snap .sideh{cursor:pointer;flex-wrap:wrap;user-select:none}
.snap .sideh:hover{background:#F4F6F5}
.snap .sideh:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.snap .sideh .chev{margin-left:6px;font-size:12px;color:var(--muted)}
.snap .sidec:not(.open) .sideh{border-bottom:0}
.snap .sidesum{flex-basis:100%;font:13px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--ink);margin-top:4px}
.snap .sdsub{padding:10px 13px 4px;font:10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line)}

/* send, with the email in front of you (3 Oct) — over everything, the walks included */
#sendbox .sbshade{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:8900}
#sendbox .sbbox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,96vw);max-height:92vh;display:flex;flex-direction:column;background:var(--surface,#fff);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3);z-index:8901;overflow:hidden}
#sendbox .sbhd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}#sendbox .sbhd b{flex:1;font-size:17px}
#sendbox .sbbody{padding:14px 18px;overflow:auto}
#sendbox .sbl{display:block;font-size:12.5px;font-weight:600;margin:10px 0 5px}
#sendbox .sbin{width:100%;box-sizing:border-box;font:inherit;font-size:15px;padding:9px 11px;border:1px solid #D1D5DB;border-radius:9px}
#sendbox .sbin:focus{outline:2px solid var(--brand);outline-offset:1px}
#sendbox .sbnote{font-size:12.5px;color:var(--amber-ink,#92400E);margin-top:5px}#sendbox .sbnote.grey{color:var(--muted)}
#sendbox .sbsub{display:flex;gap:10px;font-size:13.5px;padding:8px 10px;background:#F8F9FA;border:1px solid var(--line);border-bottom:0;border-radius:9px 9px 0 0}#sendbox .sbsub span{color:var(--muted)}
#sendbox .sbtxt{margin:0;white-space:pre-wrap;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#FCFCFD;border:1px solid var(--line);border-radius:0 0 9px 9px;padding:10px 12px;max-height:260px;overflow:auto}
#sendbox .sbft{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);background:#FAFBFC}#sendbox .sp{flex:1}
/* the Owner wants a change (4 Oct): one field under another, the details wide enough to read */
#co-form label{display:block;flex:1 1 100%;width:100%;max-width:none}
#co-form label input,#co-form textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px}
#co-form textarea{font:inherit;font-size:14px;line-height:1.45;padding:8px 10px;border:1px solid var(--ctl-edge);border-radius:7px;min-height:120px}
#co-form .tog{margin:4px 0 10px}#co-form #co-days{max-width:110px}
/* the Owner tells us about the roof (4 Oct): the ask pop-up, the preview, check and accept */
#sendbox .sbck{display:flex;gap:8px;align-items:flex-start;font-size:14px;padding:4px 0;cursor:pointer}#sendbox .sbck input{margin-top:3px}
#sendbox textarea.sbin{font:inherit;font-size:14px;min-height:70px}
#sendbox .pvshade{position:fixed;inset:0;background:rgba(17,24,39,.5);z-index:8950;display:flex;align-items:center;justify-content:center;padding:14px}
#sendbox .pvbox{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:96vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
#sendbox .pvhd{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}#sendbox .pvhd b{font-size:17px}#sendbox .pvhd .muted{flex:1;font-size:12.5px}
#sendbox .pvgrid{display:grid;grid-template-columns:390px 1fr;gap:24px;padding:18px;align-items:start}@media(max-width:820px){#sendbox .pvgrid{grid-template-columns:1fr}}
#sendbox .pvphone{width:100%;max-width:390px;height:min(720px,76vh);overflow:auto;background:#F4F6F5;border-radius:30px;border:9px solid #1F2937;box-shadow:0 16px 40px rgba(0,0,0,.22);font-size:15px;color:#111827}
#sendbox .pvbar{background:var(--brand,#2D4A3E);color:#fff;padding:12px 16px;display:flex;flex-direction:column}#sendbox .pvbar span{font-size:12.5px;opacity:.85}
#sendbox .pvin{padding:12px}#sendbox .pvk{font:10.5px/1.2 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 2px 8px}
#sendbox .pvcard{background:#fff;border:2.5px solid var(--brand,#2D4A3E);border-radius:12px;padding:14px}#sendbox .pvcard h3{margin:4px 0;font-size:16px}
#sendbox .pvnote{font-size:14px;color:#374151}#sendbox .pvnote p{margin:8px 0}
#sendbox .oibox{width:min(980px,96vw)}
#sendbox .oirow{display:grid;grid-template-columns:160px 1fr 1.2fr 230px;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #F1F2F4;font-size:13.5px}
#sendbox .oirow.oih{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:0}
#sendbox .oihis{background:#EEF5F1;border-radius:6px;padding:3px 7px}#sendbox .oiacts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
#sendbox .oit{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:4px;white-space:nowrap}
#sendbox .oit.fill{background:#ECFDF3;color:#067647}#sendbox .oit.diff{background:#FFF7ED;color:#B45309}#sendbox .oit.same,#sendbox .oit.done{background:#F3F4F6;color:#6B7280}
#sendbox .oifill{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#F0F7F2;border:1px solid #CFE3D5;border-radius:10px;padding:9px 12px;margin:0 0 10px;font-size:14px}
@media(max-width:760px){#sendbox .oirow{grid-template-columns:1fr}}
.oiline{border-color:#9FD0B4}.owncol{background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;padding:8px 10px;font-size:13px;margin:6px 0}