/* ===== client quote masthead (proposal-grade) ===== */
  .clienthead{border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-sm);background:var(--card);padding:clamp(20px,3vw,32px);margin:0 0 16px;position:relative}
  .clienthead .ch-brand{display:flex;align-items:center;gap:16px;margin-bottom:16px;min-height:1px}
  .clienthead .ch-logo{max-height:46px;max-width:210px;object-fit:contain;display:block}
  .clienthead .ch-name{font-size:var(--fs-title);font-weight:var(--fw-med);letter-spacing:var(--tr-snug);color:var(--fg)}
  /* WS15-C C3 (Codex r1): the masthead title is styled by its class, not its heading level — the portal's is its page's <h1> */
  .clienthead .ch-title{font-size:clamp(var(--fs-title),3.2vw,var(--fs-kpi));letter-spacing:var(--tr-tighter);line-height:var(--lh-tight);margin:12px 0 0;color:var(--fg);font-weight:var(--fw-reg)}
  .clienthead .ch-meta{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:16px;font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--tr-flat);color:var(--muted)}
  .clienthead .ch-meta b{color:var(--fg);font-weight:var(--fw-med)}
  .clienthead .ch-meta .warn{color:var(--pord-fg)} .clienthead .ch-meta .exp{color:var(--accent)}
  .clienthead .ch-sum{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .clienthead .ch-cell{flex:1;min-width:120px;background:var(--card);padding:12px 16px}
  .clienthead .ch-cell .k{color:var(--muted)}
  .clienthead .ch-cell .v{font-size:var(--fs-title);letter-spacing:var(--tr-tight);margin-top:6px;color:var(--fg)}
  .clienthead .ch-cell .v.acc{color:var(--accent)}
  @media(max-width:560px){.clienthead .ch-cell{min-width:44%}}
  @media print{
    .clienthead{break-inside:avoid;padding:16px 16px !important;margin-bottom:12px !important}
    .clienthead .ch-brand{margin-bottom:8px !important}
    .clienthead .ch-logo{max-height:34px !important}
    .clienthead .ch-title{font-size:var(--fs-title) !important;margin-top:4px !important}
    .clienthead .ch-meta{margin-top:8px !important;font-size:var(--fs-micro) !important}
    .clienthead .ch-sum{margin-top:12px !important}
    .clienthead .ch-cell{padding:8px 12px !important}
    .clienthead .ch-cell .v{font-size:var(--fs-body) !important;margin-top:2px !important}
  }
  /* ===== quote status pills ===== */
  /* ── THE CHIP ─────────────────────────────────────────────────────────────────────────
     A tinted pill with a leading dot, on the reference's register: ink on its own tint, 11px
     mono caps, fully round. Every chip resolves --cf-ink / --cf-bg from its status class, so a
     new status is one line and cannot invent a colour of its own.
     THE WORD IS STILL THE SIGNAL. Colour accelerates recognition; it never carries meaning
     alone, which is what keeps the palette safe where two families converge under colour-vision
     deficiency (see the token block for the measurements). */
  .qstat{--cf-ink:var(--c-neutral);--cf-bg:var(--c-neutral-bg);
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    color:var(--cf-ink);background:var(--cf-bg);
    border-radius:var(--radius-pill);padding:3px 12px;line-height:1.35}
  .qstat::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}

  /* IN FLIGHT — moving, nothing owed */
  .qstat.sent,.qstat.viewed{--cf-ink:var(--c-info);--cf-bg:var(--c-info-bg)}
  .qstat.sent::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
  /* GOOD — money in, or the job done */
  .qstat.accepted,.qstat.paid,.qstat.fulfilled{--cf-ink:var(--c-good);--cf-bg:var(--c-good-bg)}
  .qstat.paid{font-weight:var(--fw-med)}
  /* WAITING ON A HUMAN */
  .qstat.requested,.qstat.pending_override{--cf-ink:var(--c-bad);--cf-bg:var(--c-bad-bg)}
  /* STOP — over, or refused. Revoked keeps the strike: it is the one state that is not just
     over but withdrawn, and that reads instantly without depending on the hue at all. */
  .qstat.expired,.qstat.rejected,.qstat.revoked,.qstat.declined{--cf-ink:var(--c-bad);--cf-bg:var(--c-bad-bg)}
  .qstat.rejected::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
  .qstat.revoked{text-decoration:line-through}
  .qstat .ago{color:inherit;opacity:.72;text-transform:none;letter-spacing:var(--tr-flat)}
  .qstat[data-hist]{cursor:pointer}
  .qstat[data-hist]:hover{text-decoration:underline}
  /* ===== override (a line under 500 vials → super-admin approval) ===== */
  .ovrtog.on{background:var(--danger);border-color:var(--danger);color:var(--bg)}
  tr.ovrrow>td{background:var(--danger-bg)}
  tr.ovrrow>td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
  .ovrbar{margin:12px 0 4px;padding:12px 16px;border:1px dashed var(--danger);border-radius:var(--radius-sm);background:var(--danger-bg)}
  .ovrbar textarea{display:block;width:100%;margin-top:8px;min-height:52px;font:inherit;font-size:var(--fs-base);padding:12px 12px;border:1px solid var(--btn-line);border-radius:var(--radius-sm);background:var(--input-bg,var(--card));color:var(--fg);resize:vertical}
  .ovrbar textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
  .ovrflag{color:var(--danger)}
  .ovrreq{color:var(--muted);font-weight:var(--fw-reg);text-transform:none;letter-spacing:var(--tr-flat)}
  .rev-note.ovr-note{color:var(--fg);border:1px dashed var(--pord-fg);padding:12px 12px;border-radius:var(--radius-sm)}
  /* editing an existing quote — the client's link is live, so say so */
  .editbar{display:none;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 12px;
    padding:12px 16px;border:1px solid var(--held-bd,var(--held));border-radius:var(--radius-sm);
    background:var(--held-bg)}
  .editbar .eb-t{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--held)}
  .editbar .eb-t b{color:var(--fg)}
  .editbar .eb-d{font-size:var(--fs-base);color:var(--muted);flex:1 1 auto}
  .editbar .eb-x{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;
    padding:7px 12px;border-radius:var(--radius-btn);cursor:pointer;border:1px solid var(--btn-line);
    background:var(--btn-bg);color:var(--fg)}
  .editbar .eb-x:hover{background:var(--band)}
  @media print{.editbar{display:none !important}}
  .ovrl{font-size:var(--fs-base);line-height:var(--lh-text)}
  .ovrx{color:var(--muted);font-size:var(--fs-micro);font-family:var(--font-mono)}
  /* per line in the override queue: the quantity being approved and the quoted price */
  .blz{margin:0 0 12px;padding-left:12px;border-left:2px solid var(--fg)}
  .blz:last-of-type{margin-bottom:0}
  .blz .blz-h{font-size:var(--fs-base);line-height:var(--lh-ui)}
  .blz .blz-f{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:3px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);color:var(--muted)}
  .blz .blz-f b{color:var(--fg);font-weight:var(--fw-semi)}
  /* the rep's own words: the reason given for the exception */
  .ovrclaim{display:block;margin-top:7px;font-family:var(--font-mono);font-size:var(--fs-micro);line-height:var(--lh-ui);color:var(--muted)}
  .ovrclaim b{display:block;font-weight:var(--fw-semi);letter-spacing:var(--tr-caps);color:var(--muted)}
  /* Activation cohort — whole people, never percentages. A dead invitation and a rep who simply never
     quoted used to look identical; the first two rungs are the ones that were missing. */
  .coh{border:1px solid var(--line);background:var(--card)}
  .coh-r{display:grid;grid-template-columns:minmax(0,1fr) 68px;gap:0 16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
  .coh-r:last-child{border-bottom:0}
  .coh-l{font-size:var(--fs-base);color:var(--fg)}
  .coh-l .coh-s{display:block;color:var(--muted);margin-bottom:3px}
  .coh-bar{grid-column:1/-1;height:6px;background:var(--line);margin-top:8px;overflow:hidden}
  .coh-bar>i{display:block;height:100%;background:var(--fg)}
  .coh-n{font-family:var(--font-mono);font-size:var(--fs-title);color:var(--fg);text-align:right;line-height:var(--lh-flat)}
  .coh-n.off{font-size:var(--fs-fine);letter-spacing:var(--tr-flat);color:var(--muted)}
  .coh-d{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 16px;padding:12px 16px;background:var(--band);border-bottom:1px solid var(--line);
    font-family:var(--font-mono);font-size:var(--fs-fine);line-height:var(--lh-text);letter-spacing:var(--tr-flat);color:var(--muted)}
  .coh-d .coh-dn{font-size:var(--fs-base);font-weight:var(--fw-semi);color:var(--fg);text-align:right}
  .coh-d b{display:block;color:var(--fg);font-weight:var(--fw-semi);letter-spacing:var(--tr-caps)}
  .coh-d.none{color:var(--muted)}
  /* the measured reference on the admin surfaces: ink and paper only — the status colours these registers
     inherited (amber attention, green bars, red losses) stop at the frame. */
  #adminsec .tl-bar>i,#teamsec .tl-bar>i{background:var(--fg)}
  #adminsec .tl-att,#teamsec .tl-att,#adminsec .wr-loss,#teamsec .wr-loss,#adminsec .bf-badge,#teamsec .bf-badge,
  #adminsec .earn-real,#teamsec .earn-real,#adminsec .earn-neg,#teamsec .earn-neg{color:var(--fg)}
  #adminsec .earn-pot,#teamsec .earn-pot{color:var(--muted)}
  .heldcode{color:var(--pord-fg);font-size:var(--fs-micro);letter-spacing:var(--tr-caps);font-weight:var(--fw-semi)}
  /* ===== notifications ===== */
  .bell-dot{position:absolute;top:5px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:1px solid var(--bg)}
  .npop{position:fixed;top:56px;right:16px;z-index:120;width:344px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast)}
  .npop.open{opacity:1;transform:none;pointer-events:auto}
  .npop-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
  .npop-clear{color:var(--accent);background:none;border:0;cursor:pointer}
  .npop-list{max-height:min(60vh,420px);overflow-y:auto}
  .npop-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line);font-size:var(--fs-base);color:var(--fg)}
  .npop-row:last-child{border-bottom:0}
  .npop-row .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:5px;flex:none}
  .npop-row.seen .dot{background:var(--muted)}
  .npop-row .tm{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted);white-space:nowrap}
  .npop-row .code{font-family:var(--font-mono);color:var(--accent)}
  .npop-empty{padding:20px 16px;font-family:var(--font-mono);font-size:var(--fs-fine);color:var(--muted)}
  /* ===== analytics ===== */
  .an-grid{display:grid;grid-template-columns:1fr;gap:12px}
  @media(min-width:900px){.an-grid{grid-template-columns:1.5fr 1fr 1fr}}
  /* ── PANEL CHROME (Attio Reports, dr1/dr2.png) ────────────────────────────────────────
     Every chart sits in a panel with a head: the title, the entity it reads from as a small
     tinted chip, and a quiet overflow control on the right. The chip is what makes a board of
     six charts legible at a glance — you can see WHAT each one counts before reading the axis. */
  /* dr1/dr2: title x769 minus panel edge x745 = 24 device px. Their own nav
     cap is 20px, so 24/(20/.7275)*14 = 12.2px: the existing s3 inset.
     A plot adds its own axis gutter inside this inset. Neither report panel casts a shadow. */
  .an-card{background:var(--card);padding:var(--s3);min-width:0;border:1px solid var(--line);border-radius:var(--radius-card)}
  .an-h{display:flex;align-items:center;gap:8px;padding:0 0 var(--s3);flex-wrap:wrap}
  .an-t{color:var(--fg);font-size:var(--fs-base);font-weight:var(--fw-med);margin:0;letter-spacing:0}
  .an-ent{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-sans);font-size:var(--fs-fine);
    letter-spacing:0;text-transform:none;padding:2px 7px;border-radius:var(--radius-pill);
    color:var(--c-neutral);background:var(--c-neutral-bg)}
  .an-ent::before{content:"";width:6px;height:6px;border-radius:2px;background:currentColor;flex:none}
  .an-ent.q{color:var(--c-info);background:var(--c-info-bg)}
  .an-ent.c{color:var(--c-good);background:var(--c-good-bg)}
  /* Hyperline dark: colour belongs to the plots; entity tags are neutral. */
  body.dark .an-ent{color:var(--muted);background:var(--line)}
  .an-more{margin-left:auto;width:28px;height:28px;min-height:28px;display:grid;place-items:center;flex:none;
    border:1px solid transparent;border-radius:var(--radius-btn);background:none;color:var(--muted);cursor:pointer;
    font-size:var(--fs-base);line-height:1}
  .an-more:hover{background:var(--band);color:var(--fg)}
  .an-card .an-chart,.an-card .an-sum,.an-card .an-fallback{padding:0}
  .cb-why{padding:0 0 8px}
  .cb-why summary{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;
    text-transform:none;color:var(--muted);cursor:pointer;list-style:none;min-height:24px;display:flex;align-items:center}
  .cb-why summary::-webkit-details-marker{display:none}
  .cb-why summary::before{content:"\25B8";margin-right:6px;transition:transform var(--t-fast) var(--e-out)}
  .cb-why[open] summary::before{transform:rotate(90deg)}
  .cb-why p{margin:6px 0 0;color:var(--muted);font-size:var(--fs-fine);line-height:var(--lh-ui);max-width:70ch}
  .an-chart svg{width:100%;height:auto;display:block;overflow:visible}
  .an-lbl{font-family:var(--font-mono);font-size:var(--fs-micro);fill:var(--muted)}
  .an-val{font-family:var(--font-mono);font-size:var(--fs-micro);fill:var(--fg)}
  .an-card{position:relative}
  .an-row .an-bar{transition:fill-opacity var(--t-fast)}
  .an-row:hover .an-bar{fill-opacity:1}
  .an-row:hover .an-val{fill:var(--fg);font-weight:var(--fw-semi)}
  .an-tip{display:none;position:absolute;top:34px;z-index:5;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);
    background:var(--pop);color:var(--fg);border:1px solid var(--card-line);border-radius:0;padding:5px 12px;
    pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-md)}
  @media (prefers-reduced-motion:no-preference){
    .an-bar{transform-box:view-box;animation:anBar .5s var(--e-out) both}
    @keyframes anBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .an-draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:anLine .8s ease-out forwards}
    @keyframes anLine{to{stroke-dashoffset:0}}
  }
  .d-spark{display:block;width:90px;height:22px;margin-top:7px;opacity:.85}
  .an-empty{font-family:var(--font-mono);font-size:var(--fs-fine);color:var(--muted);padding:6px 0 12px}
  /* SVGs supply their own content height; fixed wrappers left blank space below sparse charts. */
  figure.an-card{margin:0}
  /* dr1/dr2: 24 native px / (20/.7275) * 14 = 12.2px gutters.
     dr1/dr2 row bottoms at x1300 and x2400 both occupy y1374–1375.
     Stretch the cards to one baseline; the SVGs keep their own data height. */
  .an-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:stretch;margin-bottom:var(--s3)}
  .an-pipe3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);align-items:stretch}
  .an-main>.an-card,.an-pipe3>.an-card{display:flex;flex-direction:column}
  .an-main>.an-card>.an-sum,.an-pipe3>.an-card>.an-sum{margin-top:auto;padding-top:var(--s3)}
  /* Empty charts carry their sentence in the plot slot. Only populated cards
     stretch to the row baseline; zero sales must not inherit a neighbour's plot height. */
  .an-main>.an-card.is-empty,.an-pipe3>.an-card.is-empty{align-self:start}
  .an-card.is-empty>.an-sum{display:none}
  @media(max-width:1100px){.an-main,.an-pipe3{grid-template-columns:1fr}}
  .an-funnel-chart,.an-stage-chart,.an-quoted-chart{height:auto}
  /* §8 — every chart ships a table fallback of the same numbers */
  .an-fallback{margin-top:12px;font-size:var(--fs-fine)}
  .an-fallback summary{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer}
  .an-fallback table{width:100%;border-collapse:collapse;margin-top:8px}
  .an-fallback td{padding:4px 0;border-bottom:1px solid var(--line)}
  .an-fallback td:last-child{text-align:right}
  .an-chart{position:relative;height:auto}
  .an-donut .an-chart{height:180px}
  .an-sum{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;color:var(--muted);margin-top:12px;line-height:var(--lh-ui)}
  .an-legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;color:var(--muted)}
  .an-legend i{width:8px;height:8px;display:inline-block;margin-right:6px;vertical-align:middle}
  .an-grid-team{margin-bottom:6px}
  @media(max-width:720px){.an-donut .an-chart{height:170px}}
  /* Stage 5 item 4 — Next actions: every row is one click to its quote (or rep); the list folds past six */
  .fu-row[role=link]{cursor:pointer;transition:background-color var(--t-fast)}
  .fu-row[role=link]:hover{background:var(--band)}
  .fu-row[role=link]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ring)}
  #admin-box tr.fu-flash td{background:var(--band)}
  /* Stage 5 item 6 — ui_flags: hidden unless app_config.ui_flags says exactly true (!important beats the wizard's inline display) */
  body.ui-nomarkup #acc-markup{display:none !important}
  body.ui-norepsheets .rp-btn,body.ui-norepsheets #repprices{display:none !important}
  #an-range{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  /* WS15-C C1: #an-range .qfchip's one-off 5px padding deleted — the range chips are the same 29px chip as every other */
  /* ===== payment methods editor (branding view) ===== */
  #paycell .paywarn{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);color:var(--held);
    border:1px solid var(--held-bd,var(--held));background:var(--held-bg);border-radius:var(--radius-sm);
    padding:8px 12px;margin:0 0 16px}
  .paym{border-top:1px solid var(--line);padding:12px 0}
  .paychk{display:flex;align-items:center;gap:12px;font-size:var(--fs-body);font-weight:var(--fw-med);cursor:pointer}
  .paychk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
  .paym .payf{display:none;flex-direction:column;gap:8px;margin-top:12px}
  .paym.on .payf{display:flex}
  .paym .payf input{width:100%;font:inherit;font-size:var(--fs-base);line-height:var(--lh-ui);padding:12px 12px;border:1px solid var(--btn-line);border-radius:var(--radius-input);background:var(--input-bg);color:var(--fg)}
  .paym .payf input:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)}
  .paym.legacy .payhint{font-size:var(--fs-base);line-height:var(--lh-ui);color:var(--muted)}
  .paym.legacy .paylegacy{margin-top:6px;font-size:var(--fs-base);line-height:var(--lh-ui);color:var(--fg);white-space:pre-line}
  /* the note belongs to the group, so give it the same rule the methods have */
  #paycell .paym + .bfield{border-top:1px solid var(--line);padding-top:16px;margin-top:2px}
  .onb{background:var(--card);padding:clamp(20px,3vw,32px);margin:0 0 32px}
  .onb-h{font-size:clamp(var(--fs-body),2.4vw,var(--fs-title));letter-spacing:var(--tr-tighter);font-weight:var(--fw-reg);color:var(--fg);margin-bottom:4px}
  .onb-sub{font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--tr-flat);color:var(--muted);margin-bottom:20px}
  .onb-steps{display:grid;grid-template-columns:1fr;}
  @media(min-width:820px){.onb-steps{grid-template-columns:1fr 1fr 1fr}}
  .onb-step{padding:20px 20px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
  .onb-n{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-caps-wide);color:var(--accent)}
  .onb-t{font-size:var(--fs-body);color:var(--fg);font-weight:var(--fw-med)}
  .onb-d{font-size:var(--fs-base);line-height:var(--lh-text);color:var(--muted);flex:1}
  .onb-step .d-btn{align-self:flex-start;margin-top:2px}
  /* ===== expiry + accept (client quote) ===== */
  .expbar{font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--tr-flat);padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);margin:0 0 12px;color:var(--muted);background:var(--card)}
  .expbar.warn{color:var(--pord-fg);background:var(--band)}
  .expbar.expired{color:var(--accent);background:rgba(127,127,134,.10);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .expbar b{color:var(--fg)}
  .acceptbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:16px 0 0;padding:16px 20px;border:1px solid var(--accent);border-radius:var(--radius-sm);background:rgba(127,127,134,.10);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .ab-msg{font-size:var(--fs-body);color:var(--fg);font-weight:var(--fw-med)}
  .ab-actions{display:flex;gap:12px;flex-wrap:wrap}
  /* WS15-C C3: the accept bar's actions are the page's primary buttons: the button type (14px) and the primary height (40px), not 12px / 41px */
  .ab-req,.ab-accept{font-family:var(--font-sans);font-size:var(--fs-base);font-weight:var(--fw-med);letter-spacing:0;text-transform:none;min-height:var(--btn-h-primary);padding:0 20px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--fg)}
  .ab-accept{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
  .ab-accept:hover{filter:brightness(1.08)}
  .acceptbar.done{border-color:var(--pin-fg,#111114);background:rgba(127,127,134,.14);background:color-mix(in srgb,var(--pin-fg,#111114) 10%,var(--card))}
  .acceptbar.done .ab-msg{color:var(--pin-fg,#111114)}
  .apblock{margin-top:20px;padding-top:20px;border-top:1px solid var(--card-line)}
  .apblock textarea,.apblock select{font:inherit;font-size:var(--fs-base);width:100%;padding:12px 12px;border:1px solid var(--btn-line);
    border-radius:var(--radius-sm);background:var(--input-bg);color:var(--fg);resize:vertical}
  .aprow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  @media(max-width:700px){.aprow{grid-template-columns:1fr}}
  .ab-apwrap{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1 1 100%;margin-bottom:4px}
  .ab-apwrap .ab-bill{resize:vertical;line-height:var(--lh-ui)}
  .ab-opt{font-weight:var(--fw-reg);color:var(--muted);text-transform:none;letter-spacing:var(--tr-flat)}
  @media(max-width:560px){.ab-apwrap{grid-template-columns:1fr}}
  .ab-legal{flex:1 1 100%;font-size:var(--fs-fine);line-height:var(--lh-text);color:var(--muted);margin-top:2px}
  .ab-legal a{color:var(--fg);text-underline-offset:2px}
  .acceptbar.done .ab-legal{display:none}
  .ab-contact{flex:1 1 100%;font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--tr-flat);color:var(--muted);margin-top:2px}
  .ab-contact a{color:var(--accent);text-decoration:none} .ab-contact a:hover{text-decoration:underline}
  .ab-namewrap{flex:1 1 100%;display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
  .ab-namein{flex:1;min-width:200px;font:inherit;font-size:var(--fs-base);padding:12px 12px;border:1px solid var(--btn-line);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--fg)}
  /* ship-to at acceptance: the address the order will ship to, collected once, stored on the quote */
  .ab-shiphead{flex:1 1 100%;color:var(--muted);margin-top:12px}
  .ab-shipwrap{flex:1 1 100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ab-shipwrap .ab-namein,.ab-apwrap .ab-namein{min-width:0;width:100%;flex:none}
  .ab-shipwrap .span2{grid-column:1/-1}
  .ab-namein.ab-bad{border-color:var(--danger,#111114)}
  /* validation feedback lives INSIDE the form, next to the fields; scroll-margin keeps it (and a focused
     field) clear of the sticky header, whose live height is --topbar-h */
  .ab-err{flex:1 1 100%;font-size:var(--fs-base);line-height:var(--lh-ui);color:var(--danger,#B3261E);font-weight:var(--fw-med);scroll-margin-top:calc(var(--topbar-h) + 14px)}
  .ab-err[hidden]{display:none}
  .ab-namein{scroll-margin-top:calc(var(--topbar-h) + 14px)}
  @media(max-width:767px){.ab-shipwrap{grid-template-columns:1fr}}
  .ab-reorder{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;padding:12px 16px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--fg)}
  .ab-reorder:hover{background:var(--band)}
  .ab-portalhint{display:block;flex:1 1 100%;margin-top:8px;font-size:var(--fs-base);line-height:var(--lh-ui);color:var(--muted)}   /* Stage 5 item 5 */
  /* ===== client trust strip (Stage 5 item 3) — four fixed facts + one server-supplied line, above the OPEN accept bar ===== */
  .truststrip{margin:16px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
  .ts-chip{font-family:var(--font-mono);font-size:var(--fs-fine);letter-spacing:var(--tr-flat);line-height:var(--lh-ui);color:var(--muted);padding:12px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);min-width:0;overflow-wrap:anywhere}
  .ts-note{grid-column:1/-1;font-size:var(--fs-base);line-height:var(--lh-ui);color:var(--fg);padding:2px 2px 0}
  @media(max-width:767px){.truststrip{grid-template-columns:1fr}}
  @media print{.acceptbar,.expbar,.npop,.truststrip{display:none!important}}
  /* ===== catalog manager ===== */
  #catmgr{padding:0 24px 40px;position:relative}
  .cm-status{font-family:var(--font-mono);font-size:var(--fs-fine);color:var(--muted);min-height:16px;margin:6px 0 12px}
  .cm-status.ok{color:var(--pin-fg,#307E77)} .cm-status.err{color:var(--err,#B94A5A)}
  #cm-panel:empty{display:none} #cm-panel{margin-bottom:16px}
  .cm-form{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:16px 20px}
  .cm-form h3{font-size:var(--fs-body);margin:0 0 16px;font-weight:var(--fw-med)}
  .cm-frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
  .cm-frow label{display:flex;flex-direction:column;gap:5px;color:var(--muted)}
  .cm-frow input,.cm-frow select{font:inherit;font-size:var(--fs-base);color:var(--fg);background:var(--input-bg);border:1px solid var(--btn-line);border-radius:var(--radius-sm);padding:8px 12px}
  .cm-frow input.w-sm{width:70px;text-align:right;font-family:var(--font-mono)}
  .cm-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
  .cm-state.on{color:var(--pin-fg,#307E77)} .cm-state.off{color:var(--muted)}
  .cm-avail-quick{font-family:var(--font-mono);font-size:var(--fs-fine);padding:4px 6px;border:1px solid var(--btn-line);border-radius:var(--radius-sm);background:var(--input-bg);color:var(--fg);cursor:pointer;max-width:170px}
  .cm-avail-quick:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
  .cm-hist{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);padding:8px 16px}
  .cm-hist-row{display:grid;grid-template-columns:120px 110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--fs-base);color:var(--fg)}
  .cm-hist-row:last-child{border-bottom:0}
  .cm-hist-row .tm{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted)}
  .cm-hist-row .act{color:var(--accent)}
  #cm-table td[data-label]{white-space:nowrap}
  /* ===== MOBILE-FIRST: dense tables → labeled cards at ≤767px ===== */
  @media(max-width:767px){
    #out table,#out thead,#out tbody,#out th,#out td,#out tr{display:block}
    #out thead{position:absolute;left:-9999px;height:0;overflow:hidden}
    #out table{min-width:0}
    #out tbody tr{padding:4px 12px;background:var(--card);overflow:hidden}
    #out tbody tr.sec{background:var(--ink-05);color:var(--ink-45);border:0;padding:7px 12px}
    #out td{border:0!important;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;white-space:normal;text-align:right}
    #out td.prod{justify-content:flex-start;font-size:var(--fs-body);padding:12px 0 4px;font-weight:var(--fw-med)}
    #out td.pick,#out td.num{display:none}
    #out td[data-label]::before{content:attr(data-label);font-family:var(--font-sans);font-size:var(--fs-micro);letter-spacing:0;text-transform:none;color:var(--muted);text-align:left;flex:none}
    tr.totrow td{display:flex!important}
    .qt thead{position:absolute;left:-9999px;height:0;overflow:hidden}
    .qt,.qt tbody,.qt tr,.qt td{display:block}
    .qt tbody tr{padding:4px 12px;background:var(--card)}
    .qt td{border:0!important;display:flex;justify-content:space-between;gap:12px;padding:7px 0;text-align:right;white-space:normal}
    .qt td.num{width:auto}   /* WS15-C C2: the legacy td.num width (30px, a builder row number) made a stacked money cell 30px wide — its value hugged the label instead of the right edge */
    .qt td[data-label]::before{content:attr(data-label);font-family:var(--font-sans);font-size:var(--fs-micro);letter-spacing:0;text-transform:none;color:var(--muted);flex:none}
    .qt .hidesm{display:flex!important}
    .qt-ops{justify-content:flex-end;gap:8px;flex-wrap:wrap}
    .qt td.ovrtd{display:block;text-align:left}
    .qt td.ovrtd::before{display:block;margin-bottom:7px}
    .d-actions{flex-wrap:wrap;justify-content:flex-start}.d-actions .d-btn{flex:1 1 auto}
    .an-grid{grid-template-columns:1fr}
    #catmgr,#dash{padding-left:16px;padding-right:16px}
    .acceptbar{flex-direction:column;align-items:stretch}
    .ab-actions{justify-content:stretch}.ab-req,.ab-accept{flex:1;text-align:center}
    /* topbar fits: wrap actions, truncate title, drop ⌘K (not useful on touch) */
    /* P29-B02: at phone widths the bar is a WRAPPING flex row — switcher · burger + title · finder hold the first line; the
       actions ride that line when they fit (the dashboard's bell + initials) and drop to their own full-width line when they
       do not (the builder's Save / Copy link / Print set) — so no two regions can overlap; every control is a 40 × 40 box */
    .topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 12px;padding:12px 16px}
    .tb-switch,.tb-mid{flex:none}
    .tb-left{flex:1 1 140px;min-width:0}
    .topactions{flex:1 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;gap:6px;justify-content:flex-end}
    .finder{width:40px;height:40px;padding:0;justify-content:center}.finder .finder-t,.finder kbd{display:none}   /* the finder collapses to an icon button */
    .siteswitch{width:40px;height:40px;padding:0;justify-content:center}.siteswitch .ss-text,.siteswitch .ss-chev{display:none}   /* the switcher keeps its tile in a 40 × 40 box */
    .topactions .tb-cut{display:none}#dashback{min-width:40px}   /* the builder's widest set fits one action line: "←" and "Print" (the labels stay for assistive tech via aria-label) */
    .title{font-size:var(--fs-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .subtitle{display:none}
    .an-card{overflow:hidden}
    .d-sec-head .ml2{display:none}
  }
  @media(max-width:560px){
    .d-kpi{border-right:0}
    .d-kpi .v{font-size:var(--fs-kpi)}
    #cm-table th:nth-child(1),#cm-table td:nth-child(1){display:none}
  }
  /* ===================== SOFT INSTRUMENT (v4) — depth + softness over hairline boxes ==============     Cards float (shadow ramp in tokens), joined 1px grids are gone, chips are pills, rail is tonal.
     Print is shielded in the terminal block below — do not add screen rules after it. */
  .d-kpi{border:0;background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .an-card{border-radius:var(--radius-card);box-shadow:none}
  .onb{border:0;box-shadow:var(--shadow-sm);border-radius:var(--radius-card)}
  .onb-steps{gap:12px;background:transparent;border:0;overflow:visible;border-radius:0}
  .onb-step{border:0;background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .cust{border:1px solid var(--line);background:var(--card);border-radius:var(--radius-card);box-shadow:none;transition:border-color var(--t-fast) ease}
  .cust:hover{border-color:var(--ink-45)}
  .cust .logo{border-radius:0}
  .d-empty{border-radius:var(--radius-card)}
  #custedit{border:0;background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .cm-form,.cm-hist{border:0;background:var(--card);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .controls,.markupbar,.chdr,.saved,.wizardnav,.expbar{border-color:transparent;background:var(--card);box-shadow:var(--shadow-sm)}
  .saved{border-color:var(--accent)}
  .expbar.warn{border-color:var(--card-line)}
  .expbar.expired{border-color:var(--accent)}
  .ch-cell{background:var(--band);border-radius:var(--radius-sm)}
  .bp-cell{border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .bpanel.grid{gap:16px;background:transparent;border:0}
  .rail-item{width:calc(100% - 16px);margin:0 8px;border-radius:var(--radius-btn)}
  body.railmin .rail-item{width:calc(100% - 12px);margin:0 6px}
  .rail-top,.rail-foot{border-color:transparent}
  .topbar{border-bottom-color:rgba(127,127,134,.30);border-bottom-color:color-mix(in srgb,var(--line) 60%,transparent)}
  body{border-left:0;border-right:0}
  /* v10.3: the pill is status ONLY. .qfchip / .qfclient / .notes span / .cust .op are filters and
     actions, not states, so they take the square edge with everything else. */
  .st{border-radius:var(--radius-pill)}
  .qfchip,.qfclient,.notes span,.cust .op{border-radius:0}
  .codebtn{border-radius:var(--radius-btn)}
  .d-btn,.ab-req,.ab-accept,.rail-burger,.rail-collapse{border-radius:var(--radius-btn)}
  .rail-acct .ini{border-radius:0}
  /* focus rings composed WITH elevation (same box-shadow channel) */
  .tt:focus-visible,.bar button:focus-visible,.controls button:focus-visible,.bbtn:focus-visible,.gate button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring),var(--shadow-sm)}
  .op:focus-visible,.codebtn:focus-visible,.qfchip:focus-visible,.d-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring),var(--shadow-sm)}
  .qfsearch,#custedit input,.cm-frow input,.cm-frow select{border-radius:var(--radius-input)}
  .cmdk-panel{border-radius:0;box-shadow:var(--shadow-lg)}
  .npop{border-radius:0;box-shadow:var(--shadow-lg)}
  .modal-card{border-radius:0;box-shadow:var(--shadow-lg)}
  @keyframes softViewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  #dash.view-in,#priceui.view-in,#bpanel.view-in,#catmgr.view-in{animation:softViewIn .16s var(--e-exit) both}
  @media(max-width:767px){
    #out tbody tr{border:0;border-radius:0;box-shadow:var(--shadow-sm);margin:0 12px 12px}
    .qt tbody tr{border:0;border-radius:0;box-shadow:var(--shadow-sm);margin:0 0 12px}
    #out tbody tr.sec{border-radius:0;margin:8px 12px 6px}
  }
  /* ---- OBSIDIAN v5 surface layer ---- */
  .cmdk-panel,.npop,.modal-card,#custedit{background:var(--pop)}
  /* Exact reference pill, with Oscar's sanctioned white active-ink accommodation. */
  .rail-item.on{background:var(--rail-active);box-shadow:none;color:var(--rail-selected-ink)}
  /* WS16-D: .gate button left this group — it put the accent glow under every gate button (the text link and the theme toggle
     too); the gate's own rule already gives ENTER the accent (app-base .gate button) */
  .topactions .primary,.controls button.primary,.bbtn.primary,.wbtn.primary,.wbtn.primary.saveblue{
    background:var(--accent);border-color:transparent;color:var(--accent-fg);
    box-shadow:0 6px 18px -8px var(--accent-glow)}
  .topactions .primary:hover,.controls button.primary:hover,.bbtn.primary:hover,.wbtn.primary:hover,.gate button:hover{filter:brightness(1.06)}
  .topactions .primary:focus-visible,.controls button.primary:focus-visible,.bbtn.primary:focus-visible,.wbtn.primary:focus-visible,.gate button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring),0 8px 26px -8px var(--accent-glow)}
  .gate{border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
  .gate input{border-radius:0}
  .gate button{border-radius:0}
  /* PRINT (must stay LAST in the stylesheet — wins all !important ties by source order):
     always the columnar table (never stacked mobile cards), clean bands, no trailing blank page */
  @media print{
    #out table{display:table !important;min-width:0 !important;width:100% !important}
    #out thead{display:table-header-group !important;position:static !important;left:auto !important;height:auto !important;overflow:visible !important}
    #out tbody{display:table-row-group !important}
    #out tr{display:table-row !important;border:0 !important;margin:0 !important;padding:0 !important;border-radius:0 !important}
    #out td,#out th{display:table-cell !important}
    #out td[data-label]::before{content:none}
    #out td.num{display:table-cell !important}
    #out tr td{background:transparent !important;border-bottom:1px solid #CACACA !important}
    #out td.prod{font-size:var(--fs-fine);padding:5px 6px !important}
    #out tbody tr.sec td{background:var(--ink-05);color:var(--ink-45);text-align:left}
    #out tr.totrow td{border-bottom:0 !important;border-top:2px solid #111114 !important}
    #out,#out table,.clienthead,.qa{border-radius:0 !important}
    /* guarantee cards: one compact row even at narrow print widths */
    .qa{flex-direction:row !important;gap:8px !important;margin-bottom:8px !important}
    .qa div{flex:1 1 0 !important;min-width:0 !important;padding:6px 12px !important}
    /* Chrome samples animations at frame 0 in print → strip would print at 40% with invisible checkmarks */
    .qa.animate div,.qa.animate .ck,.qa div,.qa .ck{animation:none !important;opacity:1 !important;transform:none !important}
    /* the dot-grid accent band leaks stray squares between cards on the PDF */
    #priceui::before,#dash::before{display:none}
    body{padding:0 !important;border:0 !important}
    .foot{margin-top:6px !important}
    html,body{height:auto !important;min-height:0 !important}
    #app,#priceui{min-height:0 !important}
    .clienthead{break-after:avoid}
    .qa{break-inside:avoid}
    /* SOFT INSTRUMENT print shields: PDF stays the pre-v4 artifact.
       The radius tokens are NOT re-zeroed here any more, and they never actually were:
       this block lives inside the inline <style>, assets/fam.v7.css loads after it and
       wins, so print inherited the rounded ladder regardless. A rule that loses is worse
       than no rule — it reads as a guarantee. Shadows DO re-zero; nothing overrides those. */
    :root,body.dark{--shadow-sm:none;--shadow-md:none;--shadow-lg:none}
    .qa div{border:1px solid #CACACA !important;border-radius:0 !important;background:#fff !important}
    .topactions .primary,.controls button.primary,.bbtn.primary,.wbtn.primary,.gate button{background-image:none !important;box-shadow:none !important}
    .clienthead{border:1px solid #CACACA !important}
    .clienthead .ch-sum{gap:1px !important;background:#CACACA !important;border:1px solid #CACACA !important;border-radius:0 !important}
    .clienthead .ch-cell{background:#fff !important;border-radius:0 !important}
    .st,.notes span{border-radius:var(--radius-sm) !important}
    #out{background:#fff !important;box-shadow:none !important}
    #dash.view-in,#priceui.view-in,#bpanel.view-in,#catmgr.view-in{animation:none !important}
  }
  /* Reports dr1/dr2: first panel starts 164 native px below the toolbar;
     164 / (20/.7275) * 14 = 83.517px. The compact header stays within that
     84px budget. Full generated prose lives in the visible brief below the
     chart grid, so its length cannot push the instruments off screen. */
  .d-band{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) 0 0;margin:0 0 var(--s3);background:none;border:0;border-radius:0}
  .d-heading{min-width:0}
  .d-band h2{font-size:var(--fs-body);font-weight:var(--fw-med);line-height:var(--lh-ui);letter-spacing:0;margin:0 0 4px;color:var(--fg)}
  .d-band .ml{font-size:var(--fs-fine);color:var(--muted)}
  .d-band .d-actions{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
  #analytics.d-sec{margin-bottom:var(--s6)}
  .d-readout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--panel-gap);align-items:start;margin-bottom:var(--sec-gap)}
  .d-status{font-size:var(--fs-base);color:var(--muted);margin:var(--s3) 0 0;line-height:var(--lh-ui);min-height:24px}
  .d-status .skel-b{width:60%;height:12px;margin-top:6px}
  .d-readout .d-stats,#dashboard-readout #d-kpis{margin-bottom:0}
  .d-tlink{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 1px;cursor:pointer;height:auto}
  .d-tlink:hover{color:var(--fg);border-color:var(--fg)}
  /* stat cards — TWO survive (Sales · Payments outstanding); Quotes committed and Pipeline were
     deleted 2026-09-20 (the closing board carries the pipeline, and "committed" was a win-rate
     instrument in a channel with no wins yet). */
  .d-stats{margin:0 0 var(--sec-gap)}
  #dash .d-kpis{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--panel-gap);margin-bottom:var(--sec-gap)}
  /* the ledger line: the figure and the counts share one row instead of stacking into a second tile */
  .d-ledger{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 32px;align-items:baseline}
  .d-ledger .l{grid-column:1/-1}
  #dash .d-ledger .n{margin-top:0;white-space:normal;overflow:visible;line-height:var(--lh-text)}   /* the stat-tile default clips to one line with an ellipsis; this line is a sentence and must wrap */
  #dash .d-kpi{border:1px solid var(--card-line);border-radius:var(--radius-card);background:var(--card);box-shadow:var(--shadow-sm);padding:var(--card-pad);position:relative;min-width:0}
  #dash .d-kpi .v{font-size:var(--fs-kpi);letter-spacing:var(--tr-tighter);margin-top:12px;line-height:var(--lh-flat);font-weight:var(--fw-med)}
  .d-kpi .n{font-size:var(--fs-base);color:var(--muted);margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .d-kpi .sf{color:var(--muted);margin-top:8px;line-height:var(--lh-text)}
  /* v11: a stat tile is black and white. A figure that matters is INK, a quiet one is muted, and the
     words beside it carry the meaning — colour lives only inside a chart canvas. */
  .d-kpi .sf em{font-style:normal;color:var(--fg)}.d-kpi .sf em.neg{color:var(--fg)}.d-kpi .sf em.flat{color:var(--muted)}
  /* MOTHBALLED 2026-09-20 with sparkSvg(): the KPI sparklines drew a 12-month trend from a book of
     18 quotes, where a line between two points is decoration. The rule stays for the day the book is
     big enough to carry one (~200 quotes) — nothing renders .spk today. */
  .d-kpi .spk{position:absolute;right:20px;top:18px;width:64px;height:20px;color:var(--muted)}.d-kpi .spk .d-spark{width:64px;height:20px;display:block}
  .d-kpi.skel .skel-b.n{width:70%;height:10px;margin-top:12px;opacity:.7}
  #dash .d-sec-head .t{white-space:nowrap;flex:none}#dash .d-sec-head .ml2{text-align:right}
  .d-desk{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--panel-gap);margin-bottom:var(--sec-gap);align-items:start}
  .d-desk-l,.d-desk-r{min-width:0}.d-desk .d-sec{margin-bottom:0}
  .rc{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;position:relative}
  .rc-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
  .rc-h b{font-weight:var(--fw-med);font-size:var(--fs-base);color:var(--fg)}
  .rc-a{color:var(--muted);background:transparent;border:0;cursor:pointer;padding:0;white-space:nowrap}.rc-a:hover{color:var(--fg)}
  .rc-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:var(--fs-base);color:var(--fg)}.rc-h+.rc-row{border-top:0}
  .rc-row .dot{width:6px;height:6px;border-radius:50%;background:var(--muted2,var(--muted));flex:none}
  .rc-row .who{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rc-row .who b{font-weight:var(--fw-med)}.rc-row .who .rc-code{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-caps);color:var(--muted)}
  .rc-row .age,.rc-row .val{margin-left:auto;color:var(--muted);white-space:nowrap}.rc-row .val{color:var(--fg)}
  .rc-empty{padding:16px;font-size:var(--fs-base);color:var(--muted)}
  .rc-act{padding:12px 16px}.rc-bar{display:flex;height:8px;gap:2px;margin:6px 0 8px}.rc-bar span{background:var(--muted2,var(--muted))}.rc-bar span:nth-child(1){background:var(--fg)}.rc-bar span:nth-child(2){background:var(--muted)}.rc-bar span:nth-child(4){background:var(--line)}
  .rc-k{display:grid;grid-template-columns:repeat(4,1fr);color:var(--muted)}.rc-k b{display:block;color:var(--fg);font-size:var(--fs-body);font-weight:var(--fw-med);font-family:var(--font-sans)}
  .rc.skel .rc-row .skel-b{height:10px}.rc.skel .rc-row .skel-b.a{width:46%}.rc.skel .rc-row .skel-b.b{width:44px;margin-left:auto}
  /* ===== ESTATE OVERVIEW — Oscar's home (docs/the measured reference, §3, §4, §6) =====
     He is not a company, so there is NO tenant accent anywhere in here: pure ink on paper.
     That absence is how you know you are above the tenancy rather than inside one (law §1).
     Every value below is an existing token: no new hex, and no specificity overrides. */
  #overview{display:none;max-width:1320px;margin:0 auto;padding:0 16px 40px}
  @media(min-width:768px){#overview{padding:0 24px 40px}}
  @media(min-width:1024px){#overview{padding:0 32px 40px}}
  .ov-ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0 20px}
  .ov-ph h1{font-size:var(--fs-title);font-weight:var(--fw-med);letter-spacing:-.01em;margin:0}
  .ov-ph .sub{font-size:var(--fs-base);color:var(--muted);margin-top:4px}
  .ov-grid{display:grid;gap:20px}
  .ov-card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);padding:16px;transition:border-color var(--t-fast) ease}
  .ov-card:hover{border-color:var(--muted2)}   /* law §3: hover darkens the hairline and moves nothing */
  .ov-card h2{font-size:var(--fs-base);font-weight:var(--fw-med);margin:0}
  .ov-card .csub{font-size:var(--fs-fine);color:var(--muted);margin-top:2px}
  .ov-chead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
  /* law §2: ONE hero per page, at most. This is it. */
  .ov-hero{font-size:var(--fs-hero);font-weight:var(--fw-med);letter-spacing:-.02em;line-height:1}
  .ov-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:16px}
  .ov-fig .l{display:block;font-family:var(--font-sans);font-size:var(--fs-micro);letter-spacing:.06em;text-transform:none;color:var(--muted)}
  .ov-fig .v{font-size:var(--fs-kpi);font-weight:var(--fw-med);letter-spacing:-.02em;margin-top:6px;line-height:1.05}
  .ov-fig .d{font-size:var(--fs-fine);color:var(--muted);margin-top:4px}
  .ov-row{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 8px;border-top:1px solid var(--line);font-size:var(--fs-base)}
  .ov-row:first-child{border-top:0}
  .ov-row .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ov-row .f{color:var(--muted)}
  .ov-row .f.ink{color:var(--fg)}
  .ov-bars{display:grid;gap:8px;margin-top:4px}
  .ov-bar{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;min-height:38px;font-size:var(--fs-base)}
  .ov-bar .k{font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:.06em;color:var(--muted)}
  .ov-bar .t{height:8px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
  .ov-bar .t i{display:block;height:100%;background:var(--fg)}
  .ov-bar .v{color:var(--muted)}
  /* law §6: empty is not error is not unavailable, and each says what it does NOT mean */
  .ov-note{font-size:var(--fs-fine);color:var(--muted);padding:12px 8px;line-height:1.5}
  .ov-wait{display:flex;align-items:center;gap:12px;min-height:38px;padding:0 8px;border-top:1px solid var(--line);font-size:var(--fs-base)}
  .ov-wait:first-child{border-top:0}
  .ov-wait .c{font-family:var(--font-mono);font-size:var(--fs-base);min-width:34px}
  .ov-skel{height:38px;border-radius:var(--radius-sm);background:var(--line);opacity:.5}
  /* Next-actions register (docs/SPEC-NEXT-ACTIONS.md §4 + §6): round rank dot · kicker · title · meta · ONE primary + quiet Open ⟶ · × */
  .na-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--card)}
  .na-row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;grid-template-areas:"dot main acts x";align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);cursor:pointer}
  .na-list>.na-row:first-child,.na-list.snap>.na-row:first-of-type{border-top:0}
  .na-row:hover{background:var(--band)}
  /* v11: rank is carried by INK and by FILL, never by hue — the same encoding the closing board uses
     for "has the client opened it", so one reading serves both surfaces. The kicker names the kind in
     words, so the dot is never the only signal. */
  .na-dot{grid-area:dot;width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid var(--muted);box-sizing:border-box;flex:none}
  .na-row.warn .na-dot{background:var(--muted);border-color:var(--muted)}
  .na-row.danger .na-dot{background:var(--fg);border-color:var(--fg)}
  .na-main{grid-area:main;min-width:0;display:flex;flex-direction:column;gap:3px}
  .na-kick{color:var(--muted)}
  .na-title{font-size:var(--fs-body);font-weight:var(--fw-med);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .na-meta{color:var(--muted)}
  /* v11: urgency is weight, not hue. "EXPIRES IN 1 D · NEVER OPENED" is already the alarm; painting it
     red said the same thing twice and spent colour the product no longer spends outside a chart. */
  .na-row.warn .na-meta{color:var(--muted)}.na-row.danger .na-meta{color:var(--fg)}
  .na-acts{grid-area:acts;display:flex;gap:12px;align-items:center;flex:none}
  .na-acts .d-btn{height:30px;padding:0 12px;font-size:var(--fs-micro)}
  .na-open{color:var(--muted);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 0 1px;cursor:pointer;white-space:nowrap}.na-open:hover{color:var(--fg)}
  .na-x{grid-area:x;width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:var(--fs-body);cursor:pointer;padding:0}.na-x:hover{border-color:var(--line);color:var(--fg)}
  .na-row.dismissed{opacity:.5}
  .na-foot{color:var(--muted);padding:8px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .na-foot button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;border-bottom:1px solid var(--line)}.na-foot button:hover{color:var(--fg)}
  .na-empty{padding:20px 16px;font-size:var(--fs-base);color:var(--muted)}
  .na-menu{position:fixed;inset:auto;z-index:99;margin:0;min-width:200px;background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius-sm);padding:6px;box-shadow:var(--shadow-lg);color:var(--fg)}
  .na-menu button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:transparent;font:inherit;font-size:var(--fs-base);color:var(--fg);border-radius:var(--radius-sm);cursor:pointer}.na-menu button:hover{background:var(--band)}
  .na-menu .na-mh{color:var(--muted);padding:6px 12px}
  .na-list.snap::before{content:'refreshing…';display:block;padding:6px 16px;color:var(--muted);border-bottom:1px solid var(--line)}.na-list.snap::after{content:none}
  .na-row.skel{gap:16px}.na-row.skel .skel-b{height:10px}.na-row.skel .skel-b.a{width:34%}.na-row.skel .skel-b.b{width:22%;opacity:.7}.na-row.skel .skel-b.c{width:44px;margin-left:auto}
  .d-updates{background:var(--band);border:1px solid var(--line);border-radius:var(--radius-sm);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:var(--s3) var(--s4);margin-bottom:var(--sec-gap)}
  .d-utag{background:var(--accent);color:var(--accent-fg);padding:5px 7px}
  .d-u{min-width:0}.d-u b{font-weight:var(--fw-med);color:var(--fg)}.d-u .mono{font-size:var(--fs-micro);color:var(--muted);margin-left:8px;letter-spacing:0;text-transform:none}.d-u p{margin:2px 0 0;font-size:var(--fs-base);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Sales card (docs/SPEC-SALES-GRAPH.md) */
  .an-sales{margin-bottom:0}
  .an-sales-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.an-sales-ctl{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  #an-scope{display:inline-flex;gap:4px}#an-scope:empty{display:none}
  .an-sales-summary{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-top:var(--s3);flex-wrap:wrap}
  .an-sales-fig{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.an-sales-big{font-size:var(--fs-kpi);letter-spacing:var(--tr-tighter);font-weight:var(--fw-med);line-height:var(--lh-flat);color:var(--fg)}
  /* MOTHBALLED with deltaTag() — the delta chip is off the Sales card until the book can carry a
     comparison. Kept in greyscale so that restoring it cannot reintroduce colour outside a canvas. */
  .an-sales-kind{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;color:var(--muted)}
  #an-sales-t{overflow-x:auto}
  #an-sales-t:focus-visible{outline:2px solid var(--muted);outline-offset:-2px}
  #an-sales-t th,#an-sales-t td{padding:4px 8px;text-align:right;border-bottom:1px solid var(--line)}
  #an-sales-t th{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;font-weight:var(--fw-med);white-space:normal;background:none;color:var(--muted)}
  #an-sales-t th:first-child,#an-sales-t td:first-child{text-align:left}
  #an-sales-t td.num{font-family:var(--font-mono);white-space:nowrap}
  .an-delta{font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--fg)}.an-delta.neg{color:var(--fg)}.an-delta.flat{color:var(--muted)}
  #an-sales .an-sales-chart{height:auto;margin-top:16px}
  .an-legend-line{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:6px;min-height:12px}
  .an-sales-summary .an-metric .v{font-size:var(--fs-body);letter-spacing:0;margin-top:4px}
  .an-sales-folds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
  .an-sales-folds>.an-fold,.an-sales-folds>.an-fallback{margin:0;padding:0;border:0}
  .an-sales-folds>details[open]{grid-column:1/-1}
  @media(max-width:720px){.an-sales-summary .an-metrics{width:100%}.an-sales-folds{grid-template-columns:1fr}}
  .an-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .an-metric .l{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;color:var(--muted)}.an-metric .v{font-size:var(--fs-title);font-weight:var(--fw-med);margin-top:6px;letter-spacing:var(--tr-tight);color:var(--fg)}
  .an-metric .d{color:var(--fg);margin-top:3px}.an-metric .d.neg{color:var(--fg)}.an-metric .d.flat{color:var(--muted)}
  .an-fold{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.an-fold summary{font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer;list-style:none}.an-fold summary::-webkit-details-marker{display:none}.an-fold summary:hover{color:var(--fg)}
  .an-tc{display:grid;gap:6px;margin-top:12px}.an-tc .r{display:grid;grid-template-columns:150px minmax(0,1fr) 80px;gap:12px;align-items:center;font-size:var(--fs-fine);color:var(--fg)}.an-tc .r>span:first-child{overflow-wrap:anywhere}
  .an-tc .r .bar{height:8px;background:var(--line);position:relative}.an-tc .r .bar i{position:absolute;inset:0 auto 0 0;background:var(--k1)}.an-tc .r .v{text-align:right;font-family:var(--font-mono);font-size:var(--fs-fine);color:var(--muted)}
  .an-sales.skel .an-sales-big,.an-sales.skel .an-delta{visibility:hidden}
  /* THE CLOSING BOARD — follows Sales in Analytics. Every rule here is greyscale: the card,
     its legend and its lists are chrome, and chrome is ink. The only colour is inside the SVG. */
  .an-close{margin-bottom:0}
  .an-close-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
  .an-close-k{font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted)}
  .cb-read{font-size:var(--fs-base);line-height:var(--lh-text);color:var(--muted);margin:0 0 16px;max-width:88ch}
  .cb-read b{color:var(--fg);font-weight:var(--fw-med)}
  /* WS4 (MVP): Pending quotes — one plain row per quote waiting on the customer; and the dashboard's lower row is two cards now
     (the stage card is gone), scoped to #analytics so the owner Overview's three-up row is untouched */
  @media(min-width:1101px){#analytics .an-pipe3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* WS4: the rep's quote page — the customer-only pieces stay on the customer's link, the Activity list is the rep's */
  .rq-activity{display:none}
  body.repquote #truststrip,body.repquote #acceptbar,body.repquote #bar{display:none!important}
  .ab-decline-go{color:var(--c-bad)!important;border-color:var(--c-bad)!important}   /* WS4: declining is never styled as the positive action */
  body.repquote .rq-activity{display:block;margin:var(--s6) 0 0;padding:var(--card-pad);border:1px solid var(--card-line);border-radius:var(--radius-card);background:var(--card)}
  .rq-activity h2{margin:0 0 var(--s3);font-size:var(--fs-body);font-weight:var(--fw-med)}
  .rq-activity ol{list-style:none;margin:0;padding:0}
  .rq-activity li{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-top:1px solid var(--line);font-size:var(--fs-base)}
  .rq-activity li:first-child{border-top:0}
  .rq-activity time,.rq-activity .rq-wait{color:var(--muted);font-size:var(--fs-fine);white-space:nowrap}
  @media print{.rq-activity{display:none!important}}
  .pq-list{display:flex;flex-direction:column}
  #pending-quotes .pq-list{flex:1}   /* the list fills its stretched card, so the footer edge aligns with Sales */
  .pq-row{display:grid;grid-template-columns:minmax(0,1.6fr) auto auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);font-size:var(--fs-base)}
  .pq-row:first-child{border-top:0}
  .pq-c{min-width:0;overflow-wrap:anywhere}
  .pq-c small{display:block;color:var(--muted);font-size:var(--fs-fine);font-family:var(--font-mono)}
  .pq-t{font-weight:var(--fw-med);text-align:right}
  .pq-e{color:var(--muted);font-size:var(--fs-fine)}
  .pq-a{display:flex;gap:var(--s3);justify-content:flex-end}
  .pq-a .d-tlink{min-height:40px}
  .pq-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s4) 0;color:var(--muted)}
  .pq-empty b{color:var(--fg);font-weight:var(--fw-med)}
  @media(max-width:720px){.pq-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.pq-s,.pq-e{grid-column:1}.pq-t{grid-row:1;grid-column:2}.pq-a{grid-column:2;grid-row:2 / span 2}}
  .an-legend i.cb-g{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--fg);background:transparent;box-sizing:border-box;margin-right:7px;vertical-align:-1px}
  .an-legend i.cb-g.once{background:linear-gradient(90deg,var(--fg) 0 50%,transparent 50% 100%)}
  .an-legend i.cb-g.many{background:var(--fg)}
  .cb-off{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none;color:var(--muted);margin-top:12px;line-height:var(--lh-text)}
  .cb-off:empty{display:none}
  .cb-off b{color:var(--fg);font-weight:var(--fw-med)}
  .cb-zero{display:grid;gap:12px;justify-items:start;padding:32px 0 24px;max-width:60ch}
  .cb-zero b{font-size:var(--fs-title);font-weight:var(--fw-reg);letter-spacing:var(--tr-tight);color:var(--fg)}
  .cb-zero span{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted)}
  @media(max-width:720px){.cb-zero b{font-size:var(--fs-title)}}
  #adminsec .an-grid-team{grid-template-columns:minmax(0,1fr)}
  .d-regs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--panel-gap);margin-bottom:var(--sec-gap);align-items:start}
  .d-regs>.reg-quotes{grid-column:1/-1}.d-regs .d-sec{margin-bottom:0;min-width:0}
  .reg-card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--radius-sm);overflow:hidden}
  .reg-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}.reg-tbl td{padding:12px 16px;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;color:var(--fg)}
  #regs .reg-tbl td{padding:0 16px;height:var(--row-h)}
  .reg-tbl tr:first-child td{border-top:0}.reg-tbl td.m{color:var(--muted)}.reg-tbl td.r{text-align:right}.reg-tbl tr[data-act]{cursor:pointer}.reg-tbl tr[data-act]:hover td{background:var(--band)}
  /* ---- CRM pipeline board (2026-09-20). the measured reference: monochrome substrate, straight edge, no bracket
     motif. NO border-radius is declared anywhere in this block — not even var(--radius-card), which resolves
     to 0 today: a surface that never names a radius cannot drift back to one. Stage is carried by the COLUMN
     the card sits in and by a mono text chip, never by colour — the board reads in monochrome, in print, and
     for a tenant who has never picked a palette. ---- */
  .crm-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
  .crm-col{background:var(--card);border:1px solid var(--card-line);min-width:0}
  .crm-col-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 12px;border-bottom:1px solid var(--card-line)}
  .crm-col-h .nm{color:var(--fg)}
  .crm-col-h .n{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted)}
  .crm-cards{display:flex;flex-direction:column;gap:8px;padding:12px}
  .crm-card{background:var(--pop);border:1px solid var(--card-line);padding:12px}
  .crm-card .nm{display:block;font-size:var(--fs-base);color:var(--fg);overflow-wrap:anywhere}
  .crm-card .ct{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
  .crm-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  /* the state chip — mono text, a border, no hue; `.pin` says a human overrode the derivation */
  .crm-chip{flex:0 0 auto;width:max-content;max-width:100%;padding:3px 6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
  .crm-chip.pin{color:var(--fg);border-color:var(--fg)}
  .crm-acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:12px;align-items:center}
  /* At rest the two controls are QUIET — transparent border, muted ink — so five columns of cards read as
     cards and not as a grid of forms. They are never hover-only: both keep their visible text label at all
     times and both stay in the tab order, so a keyboard or touch user reaches them exactly as before.
     Hovering the card, or focusing either control, restores the full affordance. */
  .crm-sel,.crm-open{height:40px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer;transition:border-color var(--t-fast) ease,color var(--t-fast) ease,background-color var(--t-fast) ease}
  /* At 1440px, Negotiating measures 66.5px at the shared 12px label size.
     The 8px action insets leave 67.6px for it beside the 32px arrow reserve. */
  .crm-sel{min-width:0;padding:0 8px;font-family:var(--font-sans);font-size:var(--fs-fine);font-weight:var(--fw-med);letter-spacing:0}
  .crm-open{min-width:40px;display:inline-grid;place-items:center;padding:0 8px}
  .crm-card:hover .crm-sel,.crm-card:hover .crm-open,
  .crm-card:focus-within .crm-sel,.crm-card:focus-within .crm-open{border-color:var(--btn-line);color:var(--fg)}
  .crm-sel:focus-visible,.crm-open:focus-visible{border-color:var(--fg);color:var(--fg)}
  .crm-open:hover{background:var(--btn-bg)}
  .crm-empty{padding:12px 12px;font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--muted)}
  /* narrow: the five columns stack full width and the board becomes a list. No toggle to get wrong, and the
     column heading stays the thing that names the stage. */
  @media(max-width:720px){.crm-board{grid-template-columns:minmax(0,1fr)}}
  .stag{padding:3px 6px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}.stag.due{color:var(--held);border-color:var(--held-bd)}.stag.late{color:var(--danger);border-color:var(--danger-bd)}
  .reg-foot{padding:8px 16px;border-top:1px solid var(--line);color:var(--muted)}
  .d-foot{display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);color:var(--muted);border-top:1px solid var(--line);padding:16px 0 4px;flex-wrap:wrap}
  /* Datum Stage 2 (docs/DATUM.md): the page header lives in the CONTENT column — eyebrow → title → right-aligned actions; the dashboard's
     header is its band, every other view paints #ph. Rail count badges (.cnt) on the items that carry work. The switcher roster groups by company. */
  .ph{display:none;flex-direction:column;gap:7px;max-width:1320px;margin:20px auto 0;padding:0 24px}
  .ph-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .ph-ttl{margin:0;font-size:var(--fs-kpi);font-weight:var(--fw-semi);letter-spacing:var(--tr-tight);line-height:var(--lh-tight);color:var(--fg);min-width:0;overflow-wrap:anywhere}
  .ph-acts{display:flex;gap:8px;flex:none;align-items:center;flex-wrap:wrap;max-width:100%}   /* four actions at 390 wrap onto a second row instead of leaving the viewport */
  .ph.on{display:flex}
  body.repshell .tb-title .title,body.repshell .tb-title .subtitle{display:none}   /* Stage 2: the page owns its header at every width (fam.v2 hid the bar title at ≥ 721 only) */
  body.view-customers #sec-customers>.d-sec-head>.t{display:none}   body.view-pipeline #sec-pipeline>.d-sec-head>.t{display:none}                                    body.view-pipeline #sec-pipeline>.d-sec-head{justify-content:flex-end}
  .rail-item .cnt{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--line);border-radius:var(--radius-pill);display:inline-grid;place-items:center;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);color:var(--muted);text-transform:none}
  .rail-item.on .cnt{border-color:var(--line);color:var(--fg)}.rail-item .cnt:empty{display:none}
  body.railmin .rail-item .cnt{display:none}
  @media(max-width:1023px){body.repshell:not(.drawer) .rail-item .cnt{display:none}}
  .sitemenu .sm-grp{list-style:none;color:var(--fg);padding:12px 8px 4px}
  .sitemenu .sm-grp:first-child{padding-top:4px}
  @media(max-width:720px){.ph{margin-top:16px;padding:0 16px}.ph-ttl{font-size:var(--fs-title)}}
  /* View as (docs/SPEC-VIEW-AS.md): the banner under the bar; every write action inert; the ways into a write hidden */
  .d-viewas{position:sticky;top:var(--top-h);z-index:45;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 24px;background:var(--band);border-bottom:2px solid var(--fg)}
  .d-viewas .d-btn{min-height:40px;padding:4px 16px}
  .va-ro{display:inline-flex;align-items:center;margin-left:12px;padding:3px 7px;background:var(--fg);color:var(--bg)}
  .va-why{display:block;font-family:var(--font-mono);font-size:var(--fs-micro);letter-spacing:var(--tr-flat);color:var(--muted);margin-top:3px}
  .d-viewas .d-u b{font-weight:var(--fw-med);color:var(--fg)}.d-viewas .d-u .mono{font-size:var(--fs-micro);color:var(--muted);margin-left:8px;letter-spacing:0;text-transform:none}
  body.viewas [data-w]{opacity:.4;pointer-events:none;filter:grayscale(1)}
  body.viewas .d-band .d-actions,body.viewas #cust-new,body.viewas #dash-brand,body.viewas .rail-item[data-rail="builder"],body.viewas .rail-item[data-rail="branding"],body.viewas .rail-new,body.viewas #inv-email,body.viewas .invbar,body.viewas .na-x{display:none}
  @media(max-width:720px){.d-viewas{grid-template-columns:auto minmax(0,1fr);padding:12px 16px}.d-viewas .d-btn{grid-column:1/-1;justify-self:end}}
  /* Dashboard-only blocks share the current section state; a future section
     cannot accidentally inherit dashboard chrome. View-as still passes the
     legacy home alias 'dashboard'. No second section list or router change. */
  body[data-section]:not([data-section=""]):not([data-section="dashboard"]) [data-dashboard-only]{display:none !important}
  /* Related instruments stay grouped; small screens stack without clipping. */
  @media(max-width:1000px){.d-desk,.d-readout{grid-template-columns:1fr}.d-regs{grid-template-columns:1fr}}
  @media(max-width:720px){.d-band{align-items:flex-start;flex-direction:column}.d-stats{margin:0 0 var(--sec-gap)}#dash .d-kpis{gap:12px}#dash .d-kpi{padding:20px}.d-kpi .spk{display:none}
    #dash .d-sec-head{flex-direction:column;align-items:flex-start;gap:6px}.an-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
    .na-row{grid-template-columns:10px minmax(0,1fr) 34px;grid-template-areas:"dot main x" "acts acts acts";row-gap:8px}.na-acts{justify-content:flex-end;flex-wrap:wrap}.na-x{align-self:start}
    .d-updates{grid-template-columns:auto minmax(0,1fr)}.d-updates .d-btn{grid-column:1/-1;justify-self:end}.an-tc .r{grid-template-columns:110px minmax(0,1fr) 70px}.reg-tbl td{max-width:140px}}
  @media(max-width:720px){.d-ledger{grid-template-columns:minmax(0,1fr)}#dash .d-ledger .n{margin-top:8px}}
  @media (prefers-reduced-motion:reduce){.d-band::after{display:none}}

  /* Shared page furniture, extending the compact dashboard rather than a second
     scale. attio-ref.png: content x730→Information x792 = 62 device px;
     62/(27/.7275)*14 = 23.4px → existing 24px page inset. Field pitch104→40,
     transaction-row pitch110→42. Its two-row table ends after two rows.
     Reports supplies the dashboard's 16px title, 12px metadata and 12px gap.
     Empty scenes aren't pictured: reuse these plain text/panel primitives,
     without inventing artwork or a viewport-height empty container. */
  .page-head .page-title{display:block;font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-med);line-height:var(--lh-ui);letter-spacing:0;margin:0 0 4px;color:var(--fg)}
  .page-head .page-meta{display:block;font-family:var(--font-sans);font-size:var(--fs-fine);font-weight:var(--fw-reg);line-height:var(--lh-ui);letter-spacing:0;color:var(--muted);margin:0}
  .page-head .page-meta[hidden]{display:none}
  .page-heading{min-width:0}
  .page-head .page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4)}
  .page-head .page-actions button,.page-head .page-actions a{font-size:var(--fs-base)}
  #band .d-tlink{min-height:40px}
  .ph{max-width:none;margin:var(--s4) auto var(--s3);padding:0 var(--page-pad);gap:0}
  .ph-row{align-items:center;gap:var(--s3)}
  #dash .page-local-head,#adminsec .apane>.d-sec-head{display:none}
  #overview{max-width:none;padding:0 var(--page-pad) var(--s8)}
  .ov-ph{align-items:center;padding:var(--s4) 0 0;margin-bottom:var(--s3);gap:var(--s3)}
  /* Reports use the same 12px inset and gutter measured from dr1/dr2 as the rep grid. */
  .ov-grid{display:block}
  .ov-grid .ov-card{min-width:0;padding:var(--s3)}
  .ov-report-summary{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
  .ov-kicker{font-size:var(--fs-fine);color:var(--muted);margin-top:4px}
  .ov-report-facts{display:flex;gap:var(--s4);flex-wrap:wrap}
  .ov-report-facts>div{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-fine);color:var(--muted)}
  .ov-report-facts b{color:var(--fg);font-size:var(--fs-base);font-weight:var(--fw-med)}
  .ov-card .an-fallback>div{overflow-x:auto}
  .ov-card .an-fallback td:first-child{overflow-wrap:anywhere}
  .ov-review{margin-top:var(--s3)}
  .ov-review>summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3);min-height:var(--btn-h);cursor:pointer;list-style:none;font-size:var(--fs-base);font-weight:var(--fw-med)}
  .ov-review>summary::-webkit-details-marker{display:none}
  .ov-review>summary::before{content:'›';font-size:var(--fs-body);color:var(--muted);transform:rotate(0deg)}
  .ov-review[open]>summary::before{transform:rotate(90deg)}
  .ov-review>summary .an-ent{margin-left:auto}
  .ov-review[open]>summary{margin-bottom:var(--s3)}
  .ov-review .an-h{flex-wrap:wrap}
  .ov-review .d-tlink{margin-left:auto}
  .ov-decisions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s3)}
  .ov-decision{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:var(--radius-btn);padding:var(--s3);font-size:var(--fs-fine);color:var(--muted)}
  .ov-decision b,.ov-decision .num{color:var(--fg);font-weight:var(--fw-med)}
  .ov-review .ov-note{margin:0;padding-bottom:0}
  .owner-directory-tools{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3)}
  .owner-directory-tools input{flex:1;max-width:440px}
  #owner-directory-count{display:none}
  .owner-directory-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s3)}
  .owner-directory-card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--card-pad);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card);min-width:0}
  .owner-directory-card h2{margin:0;font-size:var(--fs-base);font-weight:var(--fw-med)}
  .owner-directory-card .owner-account{display:grid;gap:4px;min-width:0;font-size:var(--fs-fine);color:var(--muted);overflow-wrap:anywhere}
  .owner-directory-card .owner-account b{font-weight:var(--fw-med);color:var(--fg)}
  .owner-directory-card .rowacts{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:auto}
  .owner-directory-card .codebtn{min-height:var(--btn-h)}
  .owner-directory-card .codebtn:disabled{cursor:not-allowed;color:var(--muted);background:var(--card);border-color:var(--line)}
  .owner-directory-log{margin-top:var(--panel-gap)}
  #leaderboardsec .an-card{padding:var(--s3);margin-bottom:var(--s3)}
  body.view-leaderboard #dash.view-in,#leaderboardsec .d-kpi .v{animation:none}
  #leaderboardsec .d-kpi .v.real:not(.neg){color:var(--fg)}
  #leaderboardsec .qt th,#leaderboardsec .qt td{white-space:nowrap}
  #leaderboardsec .qt td[data-label]::before{font-size:var(--fs-fine)}
  .ov-hero{font-size:var(--fs-kpi)}
  .ov-fig .v{font-size:var(--fs-title)}
  .ov-row,.ov-bar,.ov-wait{min-height:var(--row-h)}
  .ov-fig .l,.ov-bar .k{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
  .cust-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s3);align-items:start}
  .cust{padding:var(--card-pad);gap:var(--s3)}
  .cust .logo{font-family:var(--font-sans)}
  .cust .ct{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
  .cust .nm{white-space:normal;overflow:visible;overflow-wrap:anywhere;text-overflow:clip}
  .cust .ops{gap:var(--s2);flex-wrap:wrap}
  .cust .op{border-radius:var(--radius-btn);color:var(--fg);border-color:var(--btn-line);min-height:var(--btn-h)}
  .qt-wrap,.reg-card,.bp-cell,#custedit,.cm-form,.cm-hist,.chdr,.controls,.tacc,.saved,.expbar{box-shadow:none;border:1px solid var(--line)}
  #out,.clienthead{box-shadow:none;border:1px solid var(--line)}
  .bpanel.grid{align-items:start;gap:var(--panel-gap);margin-top:0}
  #app>#priceui{padding-top:0}
  .chdr{gap:var(--s3);padding:var(--card-pad)}
  .chdr label{flex:1 1 220px;min-width:0}
  .chdr input{min-width:0;width:100%;font-family:var(--font-sans)}
  .qs{padding-bottom:var(--s6);margin-bottom:var(--s6)}
  .qs-h{font-size:var(--fs-fine);margin-bottom:var(--s3)}
  .controls{gap:var(--s2);margin-bottom:var(--s3)}
  .controls .count{flex:1 0 100%;text-align:right}
  .topactions #print.tt{background:transparent;color:var(--fg);border-color:var(--btn-line)}
  .addall button{font:inherit;font-size:var(--fs-fine);min-height:var(--btn-h);border:1px solid var(--btn-line);border-radius:var(--radius-btn);padding:4px var(--s3);background:var(--btn-bg);color:var(--fg)}
  .d-empty,.ord-state,.cart-empty,.wadd-empty,.msg{padding:var(--card-pad);font-family:var(--font-sans);font-size:var(--fs-base);font-weight:var(--fw-reg);letter-spacing:0;line-height:var(--lh-ui);color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-card);min-height:0}
  #out>.msg{border:0;border-radius:0}
  .ov-note{padding:var(--s3) 0;font-family:var(--font-sans);font-size:var(--fs-base);letter-spacing:0}
  .sheet-h{padding:var(--card-pad);gap:var(--s3)}
  .sheet-b{padding:var(--card-pad);gap:var(--panel-gap)}
  .sheet .d-empty{padding:0;border:0;border-radius:0;background:none}
  .sheet-f{padding:var(--s3) var(--card-pad)}
  .sheet-x{width:40px;height:40px;min-height:40px}
  #cm-status{display:none}
  #cm-empty{margin:0}
  #cm-empty[hidden]{display:none}
  .asubs{margin-bottom:var(--s3);border-radius:var(--radius-btn);overflow-x:auto;flex-wrap:nowrap}
  .asub{flex:none;white-space:nowrap}
  .catalog-actions{display:flex;justify-content:flex-end;margin-bottom:var(--s3)}
  .ord-t th,.ord-chip,.ord-det dt{font-size:var(--fs-fine);letter-spacing:0}
  .ord-t td,.ord-t td>.cell{height:var(--row-h)}
  .ord-trk{font-family:var(--font-sans);overflow-wrap:anywhere}
  .notes span,.mlabel,.chdr label,.bfield label,.controls label.chk,th,.st,.totlabel,.mksel,.mkor,.bhint,.bp-label,.count,.cm-status,.cm-avail-quick,.qt .codebtn,.qbulk .codebtn,.qfclient,.qfsum,.crm-card .ct,.crm-empty,.ts-chip,.ab-contact,.clienthead .ch-meta,.ord-det dt,.an-empty,.cmdk-empty,.npop-empty{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0;text-transform:none}
  .clienthead .ch-meta{gap:var(--s2) var(--s6)}
  .prdoc .pr-doc,.prdoc .pr-docno,.prdoc .pr-chip,.prdoc .pr-paid{font-family:var(--font-sans);letter-spacing:0}
  .plain-label{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
  /* All selects use the existing 12px fill-selector chevron, with the shared
     12px inset and 32px reserved text space. Arrow ink matches --muted in each
     theme. The shared affordance rules outrank legacy background/padding
     shorthands so a bare select and a classed one cannot diverge again. */
  :root{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23737373' stroke-width='1.5'/%3E%3C/svg%3E")}
  body.dark{--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23999999' stroke-width='1.5'/%3E%3C/svg%3E")}
  select{-webkit-appearance:none;appearance:none;font-family:var(--font-sans);font-size:var(--fs-base);letter-spacing:0;color:var(--fg);background-color:var(--input-bg);border:1px solid var(--btn-line);border-radius:var(--radius-input);padding:8px var(--s3);cursor:pointer}
  select:not([multiple]):not([size]){background-image:var(--select-chevron)!important;background-repeat:no-repeat!important;background-position:right var(--s3) center!important;background-size:12px 12px!important;padding-right:var(--s7)!important}
  select:focus-visible{outline:2px solid var(--muted)!important;outline-offset:2px;box-shadow:none!important}
  select:disabled{color:var(--muted);opacity:1;cursor:default}
  .codebtn{font-family:var(--font-sans);font-size:var(--fs-fine);font-weight:var(--fw-med);letter-spacing:0;min-height:var(--btn-h);padding:4px var(--s3);border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--fg);cursor:pointer}
  /* WS15-C C2: ONE owner KPI strip — the owner Quotes page kept a private copy of it (owner-quotes v1.css, deleted in v2), and the
     earnings statements (inside #dash) fell to the Dashboard's one-column #dash .d-kpis: four full-width cards stacked */
  #teamsec .d-kpis,#leaderboardsec .d-kpis,#ownerquotessec .d-kpis,#statementssec .d-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--panel-gap)}
  #statementssec .d-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}   /* four across only where a 32px figure fits its card (Codex C2 r1: at 768-1100px it spilled) */
  @media(min-width:1280px){#statementssec .d-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media(max-width:1023px){#teamsec .d-kpis,#leaderboardsec .d-kpis,#ownerquotessec .d-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}   /* three across spilled a 32px figure at 768px (the Leaderboard's $1,331,840 by 35px) */
  #teamsec .d-kpi,#leaderboardsec .d-kpi,#ownerquotessec .d-kpi,#statementssec .d-kpi{box-shadow:none;margin:0;padding:var(--card-pad)}
  #updatessec>.d-sec-head{display:none}
  #updatessec>.qfsum{margin-top:0}
  .updates-editor{padding:var(--card-pad);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--card)}
  .updates-editor .ce-prices-head{margin-bottom:var(--s3)}
  .updates-editor .ce-prices-row{display:flex;align-items:center;gap:var(--s3)}
  .sheet-b .ml{margin-bottom:var(--s2)}
  body:not(.repshell) .topbar .title{font-size:var(--fs-body);letter-spacing:0;white-space:normal;overflow:visible;text-overflow:clip}
  body:not(.repshell) .topbar .subtitle,.foot,.bar #status{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
  .clienthead{padding:var(--card-pad)}
  .clienthead .ch-brand{margin-bottom:var(--s3)}
  .clienthead .ch-name{font-size:var(--fs-body);letter-spacing:0}
  .clienthead .ch-title{font-size:var(--fs-title)}
  .clienthead .ch-sum{margin-top:var(--s4);gap:var(--panel-gap)}
  .clienthead .ch-cell{flex:0 1 auto;min-width:120px;padding:0}
  .clienthead .ch-cell .v,.clienthead .ch-cell .v.acc{font-size:var(--fs-body);color:var(--fg)}
  .ab-contact a{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
  tr.sec td,tr.totrow .totlabel,.optchip,.addall-st{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
  .prdoc .pr-tbl th,.prdoc .pr-pay .pl{font-size:var(--fs-fine);letter-spacing:0}
  #paycell .paywarn,.bstop,.bstops .bstop-note{font-family:var(--font-sans);font-size:var(--fs-fine);letter-spacing:0}
  /* WS15-C C2: the owner Quotes register and the Leaderboard are the same owner data tables as Approvals and the Catalog —
     the one row model (--row-h), not 57px rows from 12px padding around a 32px code button */
  @media(min-width:768px){#cm-table td,#admin-box .qt td,#ownerquotessec .oq-t td,#leaderboardsec .qt td{height:var(--row-h);padding:0 var(--s3)}}
  @media(max-width:900px){.ov-grid{grid-template-columns:1fr}}
  @media screen and (max-width:767px){
    .ph{padding:0 var(--s4)}
    #overview{padding-left:var(--s4);padding-right:var(--s4)}
    .ph-row{align-items:flex-start}
    .bpanel.grid{margin-top:0 !important}
    .chdr label{flex-basis:calc(50% - 6px)}
    .chdr input{font-size:var(--fs-base)}
    .asubs{flex-direction:row;max-width:100%}
    .asub{border-right:1px solid var(--line);border-bottom:0;min-height:44px;justify-content:flex-start}
    .asub:last-child{border-right:0}
    #dash .d-sec-head .ml2{display:block}
    .cust .who{flex-basis:180px}
    .cust .ops{width:100%;margin-left:0}
    .cust .op{flex:1}
    .ord-t{min-width:620px}
    #ord-box{overflow-x:auto}
    .qt tbody tr,#out tbody tr{box-shadow:none;border-bottom:1px solid var(--line)}
    /* The same flat table surface survives the mobile card layout. A tfoot
       left as table-footer-group shrinks to its text inside a block table. */
    #out tbody tr:not(.sec) td{background:transparent;border-radius:0}
    #out tfoot{display:block}
    #out tr.totrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px var(--s3);padding:var(--card-pad);border-top:1px solid var(--line);background:var(--band)}
    #out tr.totrow td{padding:0;background:transparent;border-radius:0}
    #out tr.totrow td:empty{display:none !important}
    #out tr.totrow .totlabel{grid-column:1;grid-row:1;justify-content:flex-start;text-align:left}
    #out tr.totrow td.c:not(.totsum):not(:empty){grid-column:1;grid-row:2;justify-content:flex-start;gap:4px}
    #out tr.totrow .totsum{grid-column:2;grid-row:1/3}
    #out tr.totrow .totsum span{color:var(--fg);letter-spacing:0}
  }