/* ============================================================================
   CT Signal — job app (office web UI), design layer
   Card t_199878a5 · author Reya · 2026-10-29
   ----------------------------------------------------------------------------
   Load order:  brand/ct-signal/tokens.css  ->  design/website/web.css  ->  app.css

   This file EXTENDS the existing web layer; it does not fork it. Every colour,
   font family, radius and spacing value below resolves to a pack token or to a
   --w-* value declared in design/website/web.css. Nothing new is invented here
   except the app density scale in §1, which is marked derived in NOTES.md.

   House rules carried over unchanged:
     - brand red #ED1C24 is a MARK (bar, rule, underline, focus edge). It never
       carries text on a light ground: measured 4.38:1, under the 4.5:1 floor.
     - status is never colour alone: every state prints a word, and solid vs
       dashed borders separate "done" from "pending" in greyscale.
     - control boundaries use #847F80 (3.94:1), never the 1.34:1 decorative rule.
     - one primary action per screen: black ground, white label, 4px red edge.
   ========================================================================= */

/* --- 1 · app scale (DERIVED: density for a laptop at arm's length) -------- */
:root{
  --a-body:15px;            /* app body  · was 17-18px on the marketing site   */
  --a-cell:14px;            /* table cells                                     */
  --a-small:13px;           /* secondary text, field hints                     */
  --a-label:11px;           /* uppercase labels, chips                         */
  --a-h1:24px; --a-h2:18px; --a-h3:16px;
  --a-lh:1.45;
  --a-row:36px;             /* one board row                                   */
  --a-gutter:clamp(12px,2vw,24px);
  --a-rail:300px;           /* job screen right rail                           */
  --a-page:1440px;
  --a-tap:44px;             /* anything a person taps or types in              */
}

/* --- 2 · review-page chrome (never part of the app) ---------------------- */
body{background:var(--w-surface)}
.rev-page{max-width:var(--a-page);margin-inline:auto;padding:0 var(--a-gutter) var(--cts-space-8)}
.rev-top{background:var(--w-bg);border-bottom:1px solid var(--w-border-decor);
  padding-block:var(--cts-space-4)}
.rev-top h1{font-size:var(--w-h2);margin-bottom:var(--cts-space-2)}
.rev-top p{margin:0;font-size:var(--w-small);color:var(--w-fg-muted);max-width:92ch}
.rev-jump{position:sticky;top:0;z-index:20;background:var(--w-bg);
  border-bottom:2px solid var(--w-fg);margin-bottom:var(--cts-space-5)}
.rev-jump ul{display:flex;flex-wrap:wrap;gap:var(--cts-space-1);list-style:none;margin:0;padding:0}
.rev-jump li{margin:0;max-width:none}
.rev-jump a{display:flex;align-items:center;min-height:var(--a-tap);padding:0 var(--cts-space-3);
  font-weight:700;font-size:var(--a-small);text-decoration:none;border-bottom:3px solid transparent}
.rev-jump a:hover,.rev-jump a:focus-visible{border-bottom-color:var(--w-accent)}

.screen{padding-top:var(--cts-space-6)}
.screen__head{border-top:3px solid var(--w-fg);padding-top:var(--cts-space-3);
  margin-bottom:var(--cts-space-4);display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cts-space-3)}
.screen__n{font-size:var(--a-label);font-weight:700;text-transform:uppercase;letter-spacing:var(--cts-track-label);
  color:var(--w-fg-muted)}
.screen__title{font-size:var(--w-h3);margin:0}
.screen__why{margin:0;font-size:var(--a-small);color:var(--w-fg-muted);flex-basis:100%;max-width:96ch}
.screen__frame{border:1px solid var(--w-border-control);background:var(--w-bg)}

/* --- 3 · app bar -------------------------------------------------------- */
.app{font-size:var(--a-body);line-height:var(--a-lh);color:var(--w-fg);background:var(--w-bg)}
.app-bar{background:var(--w-dark);color:var(--w-on-dark);border-bottom:4px solid var(--w-accent)}
.app-bar__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cts-space-2) var(--cts-space-4);
  padding:var(--cts-space-2) var(--a-gutter)}
.app-bar__brand{display:flex;align-items:center;gap:var(--cts-space-3);min-height:var(--a-tap)}
.app-bar__logo{height:20px;width:auto;display:block}
.app-bar__product{font-weight:700;font-size:var(--a-small);text-transform:uppercase;letter-spacing:.14em;
  color:var(--w-on-dark-muted);border-left:1px solid var(--w-border-control);padding-left:var(--cts-space-3)}
.app-nav{margin-left:auto}
.app-nav ul{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.app-nav li{margin:0;max-width:none}
.app-nav a{display:flex;align-items:center;min-height:var(--a-tap);padding:0 var(--cts-space-3);
  color:var(--w-on-dark);font-weight:700;font-size:var(--a-small);text-decoration:none;
  border-bottom:3px solid transparent}
.app-nav a:hover{border-bottom-color:var(--w-accent)}
.app-nav a[aria-current="page"]{border-bottom-color:var(--w-on-dark);background:rgba(255,255,255,.08)}
.app-bar__end{display:flex;align-items:center;gap:var(--cts-space-3);margin-left:var(--cts-space-4)}
.app-bar__who{font-size:var(--a-small);color:var(--w-on-dark-muted)}
/* .chip--onDark is defined with the chip set in §5, after the base .chip rule,
   so it actually wins on equal specificity. */

@media (max-width:47.99rem){
  .app-nav{order:3;width:100%;margin-left:0;border-top:1px solid var(--w-border-control)}
  .app-nav ul{width:100%}
  .app-nav a{padding:0 var(--cts-space-2);font-size:var(--a-label);letter-spacing:.06em}
  .app-bar__end{order:2;margin-left:auto}
  .app-bar__product{display:none}
}

/* --- 4 · page head, actions, filter bar --------------------------------- */
.app-main{padding:var(--cts-space-4) var(--a-gutter) var(--cts-space-6)}
.app-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--cts-space-3);margin-bottom:var(--cts-space-4)}
.app-head__txt{flex:1 1 320px;min-width:0}
.app-head h2{font-size:var(--a-h1);line-height:1.2;margin:0 0 2px}
.app-head__sub{margin:0;font-size:var(--a-small);color:var(--w-fg-muted)}
.app-head__acts{display:flex;flex-wrap:wrap;gap:var(--cts-space-2);align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--cts-space-2);
  min-height:var(--a-tap);padding:0 var(--cts-space-4);font-family:var(--w-font);
  font-weight:700;font-size:var(--a-small);letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--w-radius);cursor:pointer;text-decoration:none}
.btn--primary{background:var(--w-dark);color:var(--w-on-dark);border:1px solid var(--w-dark);
  border-left:4px solid var(--w-accent)}
.btn--primary:hover{background:var(--w-btn-hover);border-color:var(--w-btn-hover)}
.btn--ghost{background:var(--w-bg);color:var(--w-fg);border:1px solid var(--w-border-control)}
.btn--ghost:hover{border-color:var(--w-border-control-hover);background:var(--w-surface)}
.btn--sm{min-height:32px;font-size:var(--a-label);padding:0 var(--cts-space-3)}
.btn:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px}

.filters{position:sticky;top:0;z-index:10;background:var(--w-surface);
  border:1px solid var(--w-border-decor);border-top:3px solid var(--w-fg);
  padding:var(--cts-space-3);margin-bottom:var(--cts-space-3)}
.filters__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--cts-space-3)}
.filters__sum{margin:var(--cts-space-3) 0 0;font-size:var(--a-small);color:var(--w-fg-muted);
  display:flex;flex-wrap:wrap;gap:var(--cts-space-3)}
.filters__sum b{color:var(--w-fg)}

.fld{display:block;min-width:0}
.fld__label{display:block;font-size:var(--a-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--w-fg);margin-bottom:4px}
.fld__input,.fld select,.fld textarea{width:100%;min-height:var(--a-tap);padding:6px 10px;
  font-family:var(--w-font);font-size:var(--a-cell);color:var(--w-fg);background:var(--w-bg);
  border:1px solid var(--w-border-control);border-radius:var(--w-radius)}
.fld textarea{min-height:64px;line-height:1.4}
.fld select:hover,.fld__input:hover{border-color:var(--w-border-control-hover)}
.fld select:focus-visible,.fld__input:focus-visible,.fld textarea:focus-visible{
  outline:2px solid var(--w-focus);outline-offset:1px;border-color:var(--w-fg)}
.fld__hint{display:block;font-size:var(--a-small);color:var(--w-fg-muted);margin-top:2px}

/* --- 5 · chips --------------------------------------------------------- */
.chip{display:inline-block;font-size:var(--a-label);font-weight:700;line-height:1.6;
  text-transform:uppercase;letter-spacing:.1em;padding:0 6px;border:1px solid var(--w-border-control);
  border-radius:var(--w-radius);color:var(--w-fg);white-space:nowrap}
.chip--pending{border-style:dashed;border-width:2px;border-color:var(--w-pending);color:var(--w-pending)}
.chip--ok{border-color:var(--w-success);color:var(--w-success)}
.chip--bad{border-color:var(--w-error);color:var(--w-error)}
.chip--quiet{border-color:var(--w-border-control);color:var(--w-fg-muted)}
.chip--solid{background:var(--w-dark);color:var(--w-on-dark);border-color:var(--w-dark);
  border-left:3px solid var(--w-accent)}
.chip--onDark{border-color:var(--w-on-dark-muted);color:var(--w-on-dark)}

/* --- 6 · tables: dense, scannable, fixed layout ------------------------- */
.tbl-wrap{border:1px solid var(--w-border-decor);background:var(--w-bg)}
.tbl{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--a-cell)}
.tbl caption{text-align:left;font-size:var(--a-small);color:var(--w-fg-muted);
  padding:var(--cts-space-2) var(--cts-space-3);border-bottom:1px solid var(--w-border-decor)}
.tbl th,.tbl td{padding:6px 10px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--w-border-decor);overflow-wrap:anywhere}
.tbl thead th{font-size:var(--a-label);text-transform:uppercase;letter-spacing:.1em;
  background:var(--w-surface);border-bottom:2px solid var(--w-fg);white-space:nowrap}
.tbl tbody tr:hover{background:var(--w-surface)}
.tbl tr.group th{background:var(--w-dark);color:var(--w-on-dark);font-size:var(--a-label);
  text-transform:uppercase;letter-spacing:.12em;padding:4px 10px;border-bottom:0;
  border-left:4px solid var(--w-accent)}
.tbl tr.group th span{color:var(--w-on-dark-muted);font-weight:400;letter-spacing:.06em;margin-left:8px}
.tbl tr.group th .stg-n{display:inline-block;min-width:20px;color:var(--w-on-dark-muted);margin-right:8px}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl th.job, .tbl td.job{font-weight:700;white-space:nowrap}
.tbl a{color:var(--w-fg);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;font-weight:700}
.tbl a:hover{text-decoration-thickness:2px}
.tbl .due--soon{font-weight:700}
.tbl .sub{display:block;font-weight:400;font-size:var(--a-small);color:var(--w-fg-muted)}
.tbl--plain th,.tbl--plain td{border-bottom:1px solid var(--w-border-decor)}
.tbl--kv tbody th{width:38%;font-weight:700;background:var(--w-surface)}
@media (max-width:1100px){
  .tbl{display:block;table-layout:auto}
  /* a blockified table-caption shrink-wraps in Chromium, which shredded the
     caption into 3-word lines on a narrow screen; make it a normal full-width block */
  .tbl caption{display:block;width:100%;text-align:left}
  .tbl colgroup,.tbl col{display:none}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td,.tbl tbody th{display:block}
  .tbl tr.group{display:block;margin-top:var(--cts-space-3)}
  .tbl tbody tr{border-bottom:2px solid var(--w-fg);padding-bottom:var(--cts-space-2)}
  .tbl tbody tr:first-of-type{border-top:0}
  .tbl td,.tbl tbody th{padding:4px 12px;border-bottom:1px solid var(--w-border-decor);
    display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:baseline}
  .tbl td::before{content:attr(data-label);font-size:var(--a-label);font-weight:700;
    text-transform:uppercase;letter-spacing:.08em;color:var(--w-fg-muted)}
  .tbl td>.sub{grid-column:2}
  .tbl td.num{text-align:left}
  .tbl tbody th[scope="row"]{padding-inline:12px;font-size:15px}
  .tbl tbody th[scope="row"]::before{content:attr(data-label);font-size:var(--a-label);
    font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--w-fg-muted);
    display:block;margin-bottom:2px}
  .tbl--kv tbody th{width:auto;display:block}
  .tbl--kv tbody th::before{content:none}
}

/* --- 7 · layout: content + rail, panels, facts -------------------------- */
.split{display:grid;gap:var(--cts-space-5)}
@media (min-width:64rem){ .split{grid-template-columns:minmax(0,1fr) var(--a-rail);align-items:start}
  .split__rail{position:sticky;top:var(--cts-space-3)} }
.panel{border:1px solid var(--w-border-decor);border-top:3px solid var(--w-fg);
  background:var(--w-bg);padding:var(--cts-space-4);margin-bottom:var(--cts-space-5)}
.panel--tight{padding:var(--cts-space-3)}
.panel--mark{border-top:3px solid var(--w-accent)}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--cts-space-3);
  margin-bottom:var(--cts-space-3)}
.panel__head h3{font-size:var(--a-h3);margin:0;text-transform:none}
.panel__head .act{margin-left:auto;font-size:var(--a-small);font-weight:700;min-height:var(--a-tap);
  display:inline-flex;align-items:center}
.panel__note{margin:0;font-size:var(--a-small);color:var(--w-fg-muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--cts-space-3) var(--cts-space-4)}
.fact{padding-top:var(--cts-space-2);border-top:2px solid var(--w-border-control);min-width:0}
.fact__l{display:block;font-size:var(--a-label);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--w-fg-muted);margin-bottom:2px}
.fact__v{display:block;font-size:var(--a-h3);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.fact__v--sm{font-size:var(--a-body)}
.fact__n{display:block;font-size:var(--a-small);color:var(--w-fg-muted);margin-top:2px}
.fact--mark{border-top-color:var(--w-accent)}
/* the one number a screen exists for (inspection due) is allowed to be the biggest */
.fact--hero .fact__v{font-size:clamp(20px,2.2vw,27px);line-height:1.15}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--cts-space-4);margin:0;
  font-size:var(--a-cell)}
.kv dt{font-weight:700;color:var(--w-fg-muted);font-size:var(--a-small);text-transform:uppercase;
  letter-spacing:.06em;padding-top:2px}
.kv dd{margin:0;padding-top:2px;overflow-wrap:anywhere}

/* --- 8 · tabs ---------------------------------------------------------- */
.tabs{border-bottom:2px solid var(--w-fg);margin-bottom:var(--cts-space-4)}
.tabs ul{display:flex;flex-wrap:wrap;gap:var(--cts-space-1);list-style:none;margin:0;padding:0}
.tabs li{margin:0;max-width:none}
.tabs a{display:flex;align-items:center;gap:6px;min-height:var(--a-tap);padding:0 var(--cts-space-3);
  font-weight:700;font-size:var(--a-small);text-decoration:none;border-bottom:4px solid transparent;
  margin-bottom:-2px}
.tabs a[aria-current="page"]{border-bottom-color:var(--w-accent)}
.tabs .n{font-size:var(--a-label);color:var(--w-fg-muted);letter-spacing:.06em}

/* --- 9 · visit record: checklist, readings, photos, sign-off ----------- */
.ck{list-style:none;margin:0;padding:0;counter-reset:ck}
.ck>li{counter-increment:ck;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cts-space-2);
  padding:var(--cts-space-3) 0;border-bottom:1px solid var(--w-border-decor);margin:0;max-width:none}
.ck>li:first-child{border-top:1px solid var(--w-border-decor)}
.ck__q{display:flex;gap:var(--cts-space-3);align-items:baseline;font-weight:700;font-size:var(--a-body)}
.ck__q::before{content:counter(ck,decimal-leading-zero);flex:0 0 auto;font-size:var(--a-label);
  color:var(--w-fg-muted);letter-spacing:.08em;padding-top:2px}
.ck__hint{display:block;font-size:var(--a-small);font-weight:400;color:var(--w-fg-muted);margin-top:2px}
@media (min-width:56rem){
  .ck>li{grid-template-columns:minmax(0,1fr) auto}
  .ck__note{grid-column:1 / -1}
}
.seg{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg label{display:inline-flex;align-items:center;justify-content:center;min-width:64px;
  min-height:var(--a-tap);padding:0 var(--cts-space-3);border:1px solid var(--w-border-control);
  border-radius:var(--w-radius);font-weight:700;font-size:var(--a-label);text-transform:uppercase;
  letter-spacing:.08em;cursor:pointer;background:var(--w-bg);color:var(--w-fg)}
.seg label:hover{border-color:var(--w-border-control-hover);background:var(--w-surface)}
.seg input:checked+label{background:var(--w-dark);color:var(--w-on-dark);border-color:var(--w-dark);
  border-left:4px solid var(--w-accent);padding-left:calc(var(--cts-space-3) - 3px)}
.seg input:focus-visible+label{outline:2px solid var(--w-focus);outline-offset:2px}
.seg label .mk{display:inline-block;width:9px;height:9px;border:1px solid currentColor;
  border-radius:50%;margin-right:6px;flex:0 0 auto}
.seg input:checked+label .mk{background:currentColor}
.ck__note{font-size:var(--a-small);color:var(--w-fg);width:100%;min-height:var(--a-tap);
  padding:6px 10px;border:1px solid var(--w-border-control);border-radius:var(--w-radius);
  font-family:var(--w-font);background:var(--w-bg)}
.ck__note:focus-visible{outline:2px solid var(--w-focus);outline-offset:1px;border-color:var(--w-fg)}

.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--cts-space-3);
  list-style:none;margin:0;padding:0}
.photos li{margin:0;max-width:none}
.photo{display:block;border:2px dashed var(--w-border-control);background:var(--w-surface);
  aspect-ratio:3/2;padding:var(--cts-space-2);font-size:var(--a-small);color:var(--w-fg);
  text-decoration:none;position:relative}
.photo:hover,.photo:focus-visible{border-color:var(--w-border-control-hover);border-style:solid}
.photo__l{display:block;font-weight:700;font-size:var(--a-label);text-transform:uppercase;
  letter-spacing:.08em}
.photo__s{display:block;margin-top:2px;color:var(--w-fg-muted)}
.photo__state{position:absolute;left:var(--cts-space-2);bottom:var(--cts-space-2);
  font-size:var(--a-label);text-transform:uppercase;letter-spacing:.08em;color:var(--w-pending);
  font-weight:700}

.sign{display:grid;gap:var(--cts-space-3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sign__line{border-bottom:2px solid var(--w-fg);height:var(--a-tap);display:flex;align-items:flex-end;
  font-size:var(--a-small);color:var(--w-fg-muted);padding-bottom:2px}
.sign__cap{font-size:var(--a-label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--w-fg-muted);margin-top:4px;display:block;font-weight:700}

/* --- 10 · misc --------------------------------------------------------- */
.note-box{border-left:4px solid var(--w-pending);background:var(--w-surface);
  padding:var(--cts-space-3);margin:0 0 var(--cts-space-4);font-size:var(--a-small)}
.note-box b{display:block;font-size:var(--a-label);text-transform:uppercase;letter-spacing:.1em;
  color:var(--w-pending);margin-bottom:2px}
.list-flat{list-style:none;margin:0;padding:0;font-size:var(--a-cell)}
.list-flat li{margin:0 0 6px;max-width:none;display:flex;gap:var(--cts-space-2);align-items:baseline}
.list-flat .k{flex:0 0 auto;font-weight:700;font-size:var(--a-small);color:var(--w-fg-muted);
  min-width:88px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack-sm>*+*{margin-top:var(--cts-space-3)}
.foot-note{margin:var(--cts-space-4) 0 0;font-size:var(--a-small);color:var(--w-fg-muted);
  max-width:100ch}
.act-row{display:flex;flex-wrap:wrap;gap:var(--cts-space-2);margin-top:var(--cts-space-3)}

/* touch widths (tablet and below): every tappable thing is 44px tall. The board is an
   office screen, but a tablet is a thumb-and-finger device, so the floor applies there
   and anywhere narrower — including a phone, which is not a delivered size. */
@media (max-width:1100px){
  a[href]:not(.btn):not(.photo),
  .btn--sm{display:inline-flex;align-items:center;min-height:var(--a-tap)}
  .seg label{min-width:74px}
}

/* --- 11 · board v2: count filters, band age, material and permit lines ---
   Mac's handoff of 2026-11-14. Nothing here invents a colour: the counts use the
   control border, the pressed state is the primary button's black, and the two
   amber lines (#A05F00) and two red lines (#C41E22) all measure above 4.5:1 on
   white, which is why they carry text. Desk targets are 30px; under 1100px they
   go to the 44px floor like everything else. */
.app-head__n{font-size:var(--a-h3);font-weight:400;color:var(--w-fg-muted);
  margin-left:var(--cts-space-2)}
.filters__asof{margin:var(--cts-space-3) 0 0;font-size:var(--a-small);color:var(--w-fg-muted)}
.filters__sum{margin:6px 0 0;align-items:center}
.count{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 9px;
  font-family:var(--w-font);font-size:var(--a-small);color:var(--w-fg-muted);
  background:var(--w-bg);border:1px solid var(--w-border-control);
  border-radius:var(--w-radius);cursor:pointer}
.count b{color:var(--w-fg);font-variant-numeric:tabular-nums}
.count:hover{border-color:var(--w-border-control-hover);background:var(--w-surface)}
.count:focus-visible{outline:2px solid var(--w-focus);outline-offset:2px}
.count[aria-pressed="true"]{background:var(--w-dark);border-color:var(--w-dark);color:var(--w-on-dark)}
.count[aria-pressed="true"] b{color:var(--w-on-dark)}
.count--clear{font-weight:700;color:var(--w-fg)}
.filters__state{margin:var(--cts-space-2) 0 0;font-size:var(--a-small);color:var(--w-fg);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--cts-space-2)}
/* the count buttons are inline-flex, so [hidden] needs saying out loud */
.count[hidden]{display:none !important}
/* a filtered row must stay gone in stacked mode, where tr is display:block */
.tbl--board tr[hidden]{display:none !important}
/* secondary lines inside a board cell: material state, permit/AHJ, band age */
/* a settled invoice (invoiced, retention held, paid) keeps the plain solid border */
.chip--settled{border-color:var(--w-border-control);color:var(--w-fg)}
.tbl--board .mat,.tbl--board .ahj--bad{margin-top:2px}
.tbl--board .sub.mat--none,.tbl--board .sub.ahj--bad{color:var(--w-pending);font-weight:700}
.tbl--board th[scope="row"]>.chip{margin-top:4px}
.tbl tr.group th .band-c{margin-left:8px}
/* the band's age. Amber measures 3.11:1 on the black band, so a band that is
   backing up is carried by weight and the word, not by a colour that fails. */
.tbl tr.group th .band-age{color:var(--w-on-dark-muted);margin-left:10px;font-weight:400}
.tbl tr.group th .band-age--old{color:var(--w-on-dark);font-weight:700;font-size:12px}
@media (max-width:1100px){
  /* Every stacked cell is a 104px label column plus a value column. A chip or a second
     line that auto-places lands in the *label* column, beside a label it does not belong
     to, so both are placed explicitly: the label keeps its own column, the value keeps the
     wide one. Measured before this rule: 18 children sat in the label column across board,
     client, site and quotes. */
  .tbl tbody th[scope="row"]>.sub,
  .tbl tbody th[scope="row"]>.chip,
  .tbl tbody td>.chip{grid-column:2}
  .count{min-height:var(--a-tap)}
  /* In the stacked view a cell is a grid, and a grid item stretches by default — so a
     1px-outline chip rendered as a 565px bar in a 703px cell, reading as a button instead
     of a status mark. Hug the text. Measured, not guessed: verify.py fails any chip wider
     than 60% of its own cell at 768 px. */
  .tbl td>.chip,.tbl tbody th>.chip{justify-self:start}
}

/* --- 11b · quotes (screen 6) -------------------------------------------- */
/* a filtered row must stay gone in stacked mode, where tr is display:block */
.tbl--q tr[hidden]{display:none !important}
.tbl--q .sub{margin-top:2px}
/* status = word + shape, so the five states survive a greyscale print and a
   reader who does not separate amber from red. The shape is inline SVG, not a
   font character: no tofu fallback. draft = hollow ring · sent = filled dot ·
   revised = slashed ring · won = tick · lost = cross. */
.tbl--q .st{display:inline-flex;align-items:center;gap:5px}
.tbl--q .st__i{width:12px;height:12px;flex:none;display:block}
/* a superseded revision is history: the word carries it, in dark type, so the
   row cannot be mistaken for a live value at a glance */
.tbl--q .sub--sup{color:var(--w-fg);font-weight:700}
/* the figures' scope, under the counts: what a total counts and what it leaves
   out, so the money is not a number the reader has to trust */
.filters__total-n{margin:6px 0 0;font-size:var(--a-small);color:var(--w-fg-muted)}
.filters__total-n b{color:var(--w-fg)}
/* a filter that matches nothing says so in words, never a blank body under a
   count of zero */
.tbl--q .tbl__empty td{padding:var(--cts-space-4) var(--cts-space-3);
  font-size:var(--a-small);color:var(--w-fg)}

/* --- 12 · print: the weekly digest is the only printable screen --------
   The digest is the one screen that is meant to leave the office, so print
   drops every other screen instead of paginating six wireframes. A printed
   sheet therefore carries the logo bar, the week header, Late and the 90-day
   list — and nothing else. Measured: 1 A4 page instead of 17. */
@media print{
  body{background:#fff}
  .rev-top,.rev-jump,.screen__head{display:none}
  .screen{display:none;padding-top:0;break-inside:auto}
  #digest{display:block}
  .screen__frame{border:0}
  .app-bar{border-bottom-width:2px}
  /* keep the "Demo data" chip on paper: the sheet must still say the names are
     placeholders. Only the logged-in user line and the keyboard skip link go. */
  .app-nav,.app-bar__who,.btn,.app-head__sub,.w-skip{display:none}
  .tbl{font-size:10.5pt}
  .tbl tbody tr:hover{background:transparent}
}