/* SELLUP PITCH DESK — delivery scoping deck. Product-specific styles only.
   Foundation: _kit/mockup-base.css (linked first in index.html).
   Nothing here re-declares a token except --brand (see §0).

   Sections
     0. Brand + rail-less shell (the ONE documented deviation from §6a/§7b)
     1. THE DECK SIGNATURE — commitment tier + evidence mark
     2. Grids · meters · strip · micro · URL/mono cells
     3. Unified data panel (§7c) + table helpers (§7d)
     4. Banner
     5. Metagrid · kv · checklist · requirement lists
     6. Milestone cards · out-of-scope card · two-column factor lists
     7. Commitment lanes (screen 02) — the deck's one high-impact moment
     8. Question cards (screen 10)
     9. Evidence rows · header specimens · mono code cards
    10. System notes helpers
    11. Responsive
   ========================================================================== */

/* ==========================================================================
   0. BRAND + RAIL-LESS SHELL

   DEVIATION FROM DESIGN-SYSTEM.md §6a / §7b, and only from those two rules —
   carried over deliberately from console/design/styles/global.css §0 so the
   two SellUp-facing decks are structurally interchangeable. This is a
   SellUp-branded single-purpose console, not a CHEK-suite module, so there is
   no CHEK lockup, no app switcher and no 52px app rail. The kit's `.body-row`
   is a flex row (not a grid), so omitting `.rail` needs no override —
   `--rail-w` is zeroed only so any rail-derived measurement stays truthful.
   Nothing in _kit/ is edited.
   ========================================================================== */
:root{
  /* SellUp teal, desaturated to the system's semantic saturation level.
     TWO jobs in the whole deck and no others: the lockup dot, and the 3px left
     edge of the committed-tier lane on screen 02. Those are the only two places
     hue appears and is not a 6px status dot or a 2px banner rule. */
  --brand:#2f7d70;
}
/* min-width 1268, not the kit's 1180. Solved from measurement, not estimated.

   The navbar keeps the shared 3-column grid — minmax(0,1fr) / minmax(0,560px) /
   minmax(0,1fr) — so search measures dead-centre on the shell. Each 1fr track is
   therefore (W − 32 padding − 32 gap − 560) / 2, and BOTH side blocks have to fit
   their own track or they overflow it and paint over the centred search.

   Measured in Chrome at shell width 1268 (grid resolves to 322 / 560 / 322):

     .nav-left   brand lockup + divider + property switcher   317.1px   fits 322
     .nav-right  scope chip + bell + user block               306.0px   fits 322

   The binding constraint is the LEFT block: W ≥ 624 + 2 × 317.1 = 1258.2, so
   1268 with ~10px headroom. Verified: search off-centre 0.0px, and the right
   block clears the search's right edge by 32px.

   This was wrong once. The scope chip originally read "Working estimate ·
   pre-discovery", which took .nav-right to 431.8px — 110px past its track — and
   it overlapped the centred search by 93.8px at every width. Nothing looked
   broken enough to notice by eye; the geometry audit caught it. The chip now
   reads "Pre-discovery" and the deck's other screens carry the "working
   estimate" qualifier in prose instead.

   Do not "fix" a narrow-window overlap by flexing the navbar or shrinking the
   560px centre column: that moves search off the shell's centre line, which
   DESIGN-SYSTEM.md §6 forbids in so many words. Shorten a side block, or raise
   this min-width and let the frame scroll internally as §6 prescribes. The page
   itself never scrolls horizontally at any width. */
.shell{--rail-w:0px;min-width:1268px}
.navbar .nav-right{gap:6px}
.nav-user{gap:8px}
.nav-user .nm,.nav-user .rl{white-space:nowrap}
.nav-user .rl{font-size:11px}

/* SellUp lockup — solved geometry copied verbatim from console/design §0 so a
   swap between the two decks moves no layout. The wordmark plus its dot spans
   exactly the advance width of the tagline, both starting at x=0, inside the
   shared 96 × 50 slot:

     .tg  "BUY. SELL. TRADE IN."   6.200px / 700 / +1.1783px  →  advance 95.859
     .wm  "SELLUP"                25.541px / 800 /  -.2386px  →  advance 93.703
     .dot  cx 91.9  r 3.95        →  right edge 95.850

   Letter-spacing is absolute: to re-derive, scale font-size AND letter-spacing
   by the same ratio, then re-measure. */
.brand-svg .wm{font-size:25.541px;font-weight:800;letter-spacing:-.2386px}
.brand-svg .tg{letter-spacing:1.1783px}

/* A focus ring that cannot be lost. mockup-base.css sets the global ring near
   the top of the file, but .sel / .btn / .picker-btn / .iconbtn-outline each
   declare their own box-shadow further down, and a later declaration of equal
   specificity wins — so on those four the ring silently disappeared. Restating
   it as an `outline` (a property nothing else in the system uses) puts it back
   on every focusable control at once, without editing _kit/. */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

.nav-left .vr{width:1px;height:24px;background:var(--line);flex:0 0 auto;display:inline-block}

/* scope chip in the navbar — a neutral mono chip, the dot carries the only hue */
.scopechip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-xs);
  font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap}

.sb-nav a .cnt{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-2);
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 6px;line-height:1.5}
.sb-nav a.on .cnt{color:var(--ink);border-color:var(--line-strong)}
.sb-nav .sep{height:1px;background:var(--line-soft);margin:8px 16px}
.sb-nav .glab{padding:12px 18px 6px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}

/* ==========================================================================
   1. THE DECK SIGNATURE — commitment tier, and evidence provenance.

   Every work item in this deck answers two questions the client actually
   asked: is it committed, and do we KNOW or are we assuming. So both are
   primitives, both appear identically on every screen, and both carry a WORD —
   the brief's own reducer/increaser table proved how quickly an unlabelled
   mark becomes an argument.

   Border-STYLE, not colour, is the tier's primary carrier: solid = committed,
   dashed = deal-dependent, dotted = separately agreed. That survives
   greyscale printing, which a client-facing estimate has to.
   ========================================================================== */
.tier{display:inline-flex;align-items:center;gap:7px;padding:2px 9px 2px 7px;background:var(--sunken);
  border:1px solid var(--line);border-left-width:2px;border-left-style:solid;border-left-color:var(--primary);
  border-radius:var(--r-sm);font-size:11px;font-weight:500;color:var(--ink-2);white-space:nowrap;line-height:1.6}
.tier .dot{flex:0 0 auto}
.tier-c{border-left-style:solid;border-left-color:var(--primary)}
.tier-d{border-left-style:dashed;border-left-color:var(--warn)}
.tier-n{border-left-style:dotted;border-left-color:var(--muted-2);color:var(--muted)}
.tier-sm{font-size:10.5px;font-family:var(--mono);padding:1px 7px 1px 6px}

/* bucket mark — stated / derived / confirm. Derived stays visible all the way
   onto the page; a derived item folded into a stated band is how a deck loses
   the client in one reading. */
.bkt{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.bkt svg{width:12px;height:12px;stroke-width:1.75;flex:0 0 auto}
.bkt-stated{color:var(--muted)}
.bkt-derived{color:var(--ink-2)}
.bkt-derived svg{color:var(--warn)}
.bkt-ambig{color:var(--ink-2)}
.bkt-ambig svg{color:var(--info)}

/* evidence mark — VERIFIED against the live property, or awaiting discovery.
   A reducer we have verified is the reason the low band is credible; an
   increaser we have verified live is the reason the high band is. Unverified
   is honest too, and says so. */
.ev{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap;line-height:1.5}
.ev svg{width:13px;height:13px;stroke-width:1.75;flex:0 0 auto;color:var(--muted-2)}
.ev-y{color:var(--ink-2)}
.ev-y svg{color:var(--ok)}
.ev-n svg{color:var(--muted)}
.ev .m{font-family:var(--mono);font-size:10.5px}

/* ==========================================================================
   2. GRIDS · METERS · STRIP · MICRO · MONO CELLS
   ========================================================================== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);padding:16px 18px}
.kpi .lab{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.4}
.kpi .lab svg{width:14px;height:14px;stroke-width:1.75;color:var(--muted-2);flex:0 0 auto}
.kpi .val{margin-top:8px;font-family:var(--mono);font-size:24px;font-weight:640;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.kpi .val .u{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.kpi .sub{margin-top:7px;font-size:12px;color:var(--muted);line-height:1.5}
.kpi .sub .m{font-family:var(--mono);color:var(--ink-2)}
.kpi .barrow{margin-top:9px;display:flex;align-items:center;gap:9px}
.kpi .barrow .pc{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
/* dashed track for a band that is NOT committed — the meter itself says so */
.kpi.notc .val{color:var(--ink-2)}
.kpi.notc .bar{background:transparent;border:1px dashed var(--line-strong);height:8px}
.kpi.notc .bar i{background:var(--line-strong)}

/* SINGLE-COLUMN CONTENT SLOT — no side-by-side content blocks, at any width.
   The page is a sidebar plus ONE reading column. These wrappers are kept as
   class names because 36 section fragments use them, but they no longer make
   columns: each child block takes the full measure and they stack in DOM
   order. What was the right-hand rail now falls below the block it annotated,
   which is where it reads.

   The distinction that decides whether a grid survives in this file: a grid of
   INDEPENDENT CONTENT BLOCKS (cards, prose, list columns) is a column layout
   and is flattened here. A grid whose cells form ONE ALIGNED ROW that is read
   horizontally — .strip, .scan, .kpi-grid, .mrail, .figs, and every table row
   grid — is a data display, not a column, and keeps its columns. */
.grid2,.grid2-eq,.grid2-wide,.grid3,.grid4{
  display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}

/* ---- MEASURE: NOT CAPPED — content fills its container -------------------
   Recorded because it was tried and reversed, and because the trade-off is
   real either way.

   Flattening to one column left text at the full 1042px content width, which
   a sweep of all four pages measured at 150-190 characters per line (.pnote
   worst at 187 -- an 11.5px footnote fits far more characters into the same
   box than body copy does). The first fix capped prose at 700px, the width the
   old left column had.

   That was reversed ON REQUEST: capping the text but not its container left
   ~340px of empty box to the right of every paragraph, panel and card, which
   read as broken rather than as a margin. Content fills its container.

   THE COST, stated plainly so nobody has to rediscover it: at a 1440px window
   the smallest type runs to ~187 CPL, against a comfortable 45-95. It is worst
   for .pnote and the .banner / .factors / .qb body copy.

   IF BOTH are wanted -- full-width blocks AND a sane line length -- the fix is
   NOT to reinstate per-element caps. It is to narrow the content column itself
   (.docwrap max-width, currently 1140px; ~980 would put body copy near 105 CPL
   and .pnote near 135) and to regenerate the embedded diagram at the matching
   width, which pitch/diagrams/build.py does with a preset. Then every block
   still fills its container and the container is a reading width. */
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.stack-sm{display:flex;flex-direction:column;gap:10px;min-width:0}

/* Count strip — a GRID of 4 columns, not a wrapping flex row.

   As a `flex-wrap` row it packed as many items as fit and orphaned the
   remainder: the 8-item strip in part 01 broke 7 + 1, and the 7-item strip in
   part 03 broke 6 + 1, each leaving a single item alone on a second line with
   a dangling divider and a wide gap beside it. It read as a rendering fault
   rather than as a deliberate second row.

   Four fixed columns gives 4 + 4 and 4 + 3 — two balanced lines in both
   cases, with the column dividers lining up vertically between the rows. The
   divider is cleared at the end of each row (`4n`) and on the final item, so
   no rule ever dangles into empty space. If a strip ever needs a different
   item count, keep it to a multiple or near-multiple of the column count. */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:baseline;row-gap:11px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-xs);padding:13px 18px}
.strip .it{display:flex;align-items:baseline;gap:8px;min-width:0;
  padding-right:20px;margin-right:20px;border-right:1px solid var(--line-soft)}
.strip .it:nth-child(4n),.strip .it:last-child{border-right:0;margin-right:0;padding-right:0}
.strip .k{font-size:12.5px;color:var(--muted);min-width:0}
.strip .v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);flex:0 0 auto}

/* Link row inside the strip's box. Spans all four columns and sits under a
   rule, so the 8 counts keep their balanced 4 + 4 rows and the 4n divider
   logic above is untouched — adding link cells to the grid itself would have
   put a dangling divider mid-row. */
.strip .lnks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  margin-top:2px;padding-top:11px;border-top:1px solid var(--line-soft)}
.strip .lnks a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.strip .lnks a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.strip .lnks a svg{width:14px;height:14px;stroke-width:1.75;flex:0 0 auto;color:var(--muted-2)}
.strip .lnks a:hover svg{color:var(--ink-2)}
.strip .lnks .sep{font-size:12.5px;color:var(--line-strong);user-select:none}
.micro{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero-num{font-family:var(--mono);font-size:26px;font-weight:640;letter-spacing:-.02em;color:var(--ink);line-height:1.15}

/* URL / header-value cell — machine data typeset as data. Origin greys out,
   the path inks up, the leaf carries the weight. Same treatment as the
   sibling console deck so a URL looks identical in both. */
.url{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em;line-height:1.45;white-space:nowrap;
  display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.url .o{color:var(--muted)}
.url .p{color:var(--ink-3)}
.url .l{color:var(--ink);font-weight:500}
.url .q{color:var(--muted)}
.url-wrap{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word;line-height:1.5}
.url-sm{font-size:11.5px}

/* status code — 3 mono characters + one 6px dot, never a filled pill */
.st{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.st .c{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  width:26px;flex:0 0 26px;display:inline-block}
.st .c.dim{color:var(--muted)}

.gl{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:0 0 auto}
.gl svg{width:14px;height:14px;stroke-width:2}
.gl-y{color:var(--ink-2)}
.gl-n{color:var(--danger)}
.gl-m{color:var(--muted-2)}
.gl-p{color:var(--muted)}

/* ==========================================================================
   3. UNIFIED DATA PANEL (§7c) + TABLE HELPERS (§7d)
   ========================================================================== */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);overflow:hidden}
.panel .tabs{border-bottom:1px solid var(--line-soft);padding:0 16px}
.panel .toolbar{padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.panel .tbl thead th,.card .tbl thead th{background:var(--sunken)}
.panel .pager{border-top:1px solid var(--line-soft);margin:0;padding:12px 16px}
.panel .pbody{padding:16px}
.panel .pnote{border-top:1px solid var(--line-soft);padding:10px 16px;font-size:11.5px;color:var(--muted);line-height:1.6}
.panel .pnote .m{font-family:var(--mono);color:var(--ink-2)}
.card .pnote{padding:10px 0 0;margin-top:10px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted);line-height:1.6}
.card .pnote .m{font-family:var(--mono);color:var(--ink-2)}
.panel-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.panel-head h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--ink);line-height:1.4}
.panel-head .acts{margin-left:auto;display:flex;align-items:center;gap:8px}

.tbl .nowrap{white-space:nowrap}
.tbl-tight thead th,.tbl-tight tbody td{padding-left:7px;padding-right:7px}
.tbl-tight thead th:first-child,.tbl-tight tbody td:first-child{padding-left:16px}
.tbl-tight thead th:last-child,.tbl-tight tbody td:last-child{padding-right:16px}
/* .tbl-tighter — one step below .tbl-tight, for the discipline matrix on
   screen 07: eight columns of numeric bands inside 1,092px. Padding is the
   last 20px, not the first 200 — fold a column before reaching for this. */
.tbl-tighter thead th,.tbl-tighter tbody td{padding-left:5px;padding-right:5px}
.tbl-tighter thead th:first-child,.tbl-tighter tbody td:first-child{padding-left:16px}
.tbl-tighter thead th:last-child,.tbl-tighter tbody td:last-child{padding-right:16px}
.tbl tfoot td{background:var(--sunken);border-top:1px solid var(--line);border-bottom:0;padding:10px;
  font-size:12.5px;font-weight:600;color:var(--ink)}
.tbl tfoot td:first-child{padding-left:16px}
.tbl tfoot td:last-child{padding-right:16px}
.tbl tfoot .num{text-align:right;font-family:var(--mono)}
.tbl tfoot tr.sub td{background:var(--card);font-weight:500;color:var(--ink-2);border-top:1px solid var(--line-soft)}
.tbl tfoot tr.sub td .tier{font-weight:500}
/* hour bands are the thing the client audits — tabular numerals, right
   aligned, and one step up in weight so the column reads as a column */
.tbl .hrs{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .hrs.dim{color:var(--muted);font-weight:500}
.tbl .cellsub2{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.45}
.tbl .cellsub2 .m{font-family:var(--mono);color:var(--ink-2)}
.tag-chip{display:inline-flex;align-items:center;gap:4px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:2px 7px;font-size:11px;color:var(--ink-2);white-space:nowrap}
.tag-chip.mono{font-family:var(--mono);font-size:10.5px}
.tile{background:#f4f4f5}
.tile-24{width:24px;height:24px;border-radius:var(--r-sm)}
.tile-24 svg{width:14px;height:14px;stroke-width:1.75}

/* ==========================================================================
   4. BANNER — sunken well + 2px semantic rule, never a tint
   ========================================================================== */
.banner{display:flex;align-items:flex-start;gap:10px;background:var(--sunken);border:1px solid var(--line);
  border-left:2px solid var(--line-strong);border-radius:var(--r-md);padding:11px 14px}
.banner>svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:var(--muted)}
.banner .b{flex:1 1 auto;min-width:0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.banner .t{font-size:13px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:3px}
.banner .m{font-family:var(--mono);color:var(--ink-2)}
.banner-warn{border-left-color:var(--warn)}.banner-warn>svg{color:var(--warn)}
.banner-danger{border-left-color:var(--danger)}.banner-danger>svg{color:var(--danger)}
.banner-info{border-left-color:var(--info)}.banner-info>svg{color:var(--info)}
.banner-ok{border-left-color:var(--ok)}.banner-ok>svg{color:var(--ok)}

/* ==========================================================================
   5. METAGRID · KV · CHECKLIST · REQUIREMENT LISTS
   ========================================================================== */
.metagrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px}
.metagrid.m1{grid-template-columns:minmax(0,1fr)}
.metagrid.m3{grid-template-columns:repeat(3,minmax(0,1fr))}
.metagrid .k{font-size:11.5px;color:var(--muted);line-height:1.45}
.metagrid .v{font-size:13.5px;color:var(--ink);line-height:1.5;margin-top:3px}
.metagrid .v.mono{font-size:12.5px;font-family:var(--mono)}

.kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:12.5px;color:var(--muted);line-height:1.5}
.kv+.kv{border-top:1px solid var(--line-soft)}
.kv .v{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);text-align:right;white-space:nowrap}
.kv .v.big{font-size:14px;font-weight:600;color:var(--ink)}

.fval{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 11px;background:var(--sunken);
  border:1px dashed var(--line-strong);border-radius:var(--r-md);font-size:12.5px;color:var(--ink-2);overflow:hidden}
.fval .mono{font-family:var(--mono);font-size:12px}
.fval>span:not(.ic){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fval .ic{margin-left:auto;color:var(--muted-2);display:inline-flex;flex:0 0 auto}

.chk{display:flex;flex-direction:column}
.chk .r{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-top:1px solid var(--line-soft)}
.chk .r:first-child{border-top:0;padding-top:0}
.chk .r:last-child{padding-bottom:0}
.chk .r>.n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);flex:0 0 18px;margin-top:2px}
.chk .r .b{flex:1 1 auto;min-width:0}
.chk .r .t{font-size:13px;color:var(--ink);line-height:1.45}
.chk .r .d{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:3px}
.chk .r .d .m{font-family:var(--mono);color:var(--ink-2)}
.chk .r .s{flex:0 0 auto;margin-top:1px}
/* .chk-stack (row stacked vertically) is GONE. It existed only for the two
   .chk lists that sat in a ~280px .grid2 rail, where the horizontal
   label / content / status row could not fit. Both are full-width now, so they
   use the standard row: label left, content right, status right-aligned. */

.reqlist{display:flex;flex-direction:column;gap:9px}
.reqlist .r{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.reqlist .r svg{width:15px;height:15px;stroke-width:1.75;flex:0 0 auto;margin-top:2px;color:var(--muted-2)}
.reqlist .r.ok svg{color:var(--ok)}
.reqlist .r.no svg{color:var(--danger)}
.reqlist .r.wa svg{color:var(--warn)}
.reqlist .r .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* ==========================================================================
   6. MILESTONE CARDS · OUT-OF-SCOPE CARD · TWO-COLUMN FACTOR LISTS
   ========================================================================== */
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:16px 18px;display:flex;flex-direction:column;gap:11px;min-width:0}
.mcard .hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mcard .no{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--primary-fg);
  background:var(--primary);border-radius:var(--r-sm);padding:2px 6px;line-height:1.35;flex:0 0 auto}
.mcard.todo .no{background:var(--sunken);border:1px solid var(--line);color:var(--muted)}
.mcard .hrs{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
.mcard h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--ink);line-height:1.4}
.mcard.todo h3{color:var(--muted)}
.mcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.mcard li{position:relative;padding-left:13px;font-size:12px;color:var(--ink-3);line-height:1.5}
.mcard li::before{content:"";position:absolute;left:0;top:7px;width:4px;height:4px;border-radius:var(--r-full);background:var(--muted-2)}
.mcard .ft{margin-top:auto;display:flex;align-items:center;gap:9px;padding-top:4px;flex-wrap:wrap}
.mcard .ft .pc{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
/* a milestone that contains deal-dependent items is dashed on its own edge —
   the card cannot claim a band the deal has not settled */
.mcard.dealdep{border-style:dashed;border-color:var(--line-strong)}

.notelist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.notelist li{position:relative;padding-left:14px;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.notelist li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:var(--r-full);background:var(--muted-2)}
.notelist li .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

.oos{background:var(--sunken);border:1px dashed var(--line-strong);border-radius:var(--r-xl)}
.oos .card-head{border-bottom:1px dashed var(--line-strong)}
.oos .card-title{color:var(--muted)}
.oos .notelist li{color:var(--muted)}
.oos .notelist li::before{background:var(--line-strong)}

/* stacked, not columned — the divider is a rule between blocks, not beside them */
.twocol{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.twocol>.c{padding:0;min-width:0}
.twocol>.c+.c{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.twocol .h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.4;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line-soft)}
.twocol .h svg{width:14px;height:14px;stroke-width:1.75;flex:0 0 auto;color:var(--muted)}
.twocol .h.up svg{color:var(--ok)}
.twocol .h.dn svg{color:var(--warn)}
/* factor rows carry their own evidence mark — that is what makes the list an
   argument rather than a mood */
.factors{display:flex;flex-direction:column}
.factors .r{padding:10px 0;border-top:1px solid var(--line-soft)}
.factors .r:first-child{border-top:0;padding-top:0}
.factors .r .t{font-size:12.5px;color:var(--ink-3);line-height:1.55}
.factors .r .t .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.factors .r .f{margin-top:5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   7. COMMITMENT LANES (screen 02) — the deck's one high-impact moment.

   Three horizontal lanes, one per codebase, each carrying its proof, its band
   and its work items. The lanes are the argument: the seam the client has to
   decide on is a REAL seam in the software (two different `x-powered-by`
   headers on the same hostname), not a commercial convenience. Monochrome;
   the only differentiator is border-style and the 3px left edge.
   ========================================================================== */
.lanes{display:flex;flex-direction:column;gap:12px}
.lane{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-xs);
  padding:15px 18px;display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr) 128px;gap:18px;align-items:start}
.lane.c{box-shadow:var(--shadow-xs),inset 3px 0 0 var(--brand)}
.lane.d{border-style:dashed;border-color:var(--line-strong);box-shadow:inset 3px 0 0 var(--warn)}
.lane.n{border-style:dotted;border-color:var(--line-strong);background:var(--sunken);box-shadow:inset 3px 0 0 var(--muted-2)}
.lane .lh{min-width:0}
.lane .lh .nm{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;letter-spacing:-.005em;
  color:var(--ink);line-height:1.4}
.lane .lh .nm svg{width:16px;height:16px;stroke-width:2;flex:0 0 auto;color:var(--muted)}
.lane.n .lh .nm{color:var(--muted)}
.lane .lh .pf{margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.6;word-break:break-word}
.lane .lh .pf b{color:var(--ink-2);font-weight:600}
.lane .lb{min-width:0;display:flex;flex-direction:column;gap:8px}
.lane .lb .items{display:flex;flex-wrap:wrap;gap:6px}
.lane .lb .cap{font-size:12px;color:var(--muted);line-height:1.55}
.lane .lr{text-align:right;min-width:0}
.lane .lr .n{font-family:var(--mono);font-size:22px;font-weight:640;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.lane.n .lr .n{color:var(--muted)}
.lane .lr .u{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
.lane .lr .ct{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}

/* the decision gate below the lanes */
.gate{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.gate>.g{padding:0;min-width:0}
.gate>.g+.g{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gate .gk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.gate .gt{font-size:12.5px;color:var(--ink-3);line-height:1.6}
.gate .gt .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* ==========================================================================
   8. QUESTION CARDS (screen 10) — every ambiguity, both readings, both sized
   ========================================================================== */
.qs{display:flex;flex-direction:column;gap:0}
.q{padding:14px 0;border-top:1px solid var(--line-soft)}
.q:first-child{border-top:0;padding-top:0}
.q:last-child{padding-bottom:0}
.q .qh{display:flex;align-items:flex-start;gap:10px}
.q .qh .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--primary-fg);background:var(--primary);
  border-radius:var(--r-sm);padding:2px 6px;line-height:1.35;flex:0 0 auto;margin-top:1px}
.q .qh .t{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.45}
.q .qh .d{margin-left:auto;flex:0 0 auto}
/* both readings stack — a question is read top-to-bottom like everything else */
.q .qb{margin-top:11px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch}
.q .rd{background:#fafafa;border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;min-width:0}
.q .rd.b{border-style:dashed;border-color:var(--line-strong)}
.q .rd .rk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.q .rd .rt{font-size:12px;color:var(--ink-3);line-height:1.55}
.q .rd .rt .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.q .rd .rn{margin-top:7px;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.q .rd .rn.dim{color:var(--muted)}
/* left-aligned: the delta is now a block under the two readings, not a right column */
.q .delta{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;min-width:0}
.q .delta .n{font-family:var(--mono);font-size:16px;font-weight:640;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.q .delta .k{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--mono);font-weight:700}

/* ==========================================================================
   9. EVIDENCE ROWS · HEADER SPECIMENS · MONO CODE CARDS
   ========================================================================== */
.evlist{display:flex;flex-direction:column}
.evlist .r{display:grid;grid-template-columns:34px minmax(0,1fr) 168px;gap:12px;align-items:start;
  padding:12px 0;border-top:1px solid var(--line-soft)}
.evlist .r:first-child{border-top:0;padding-top:0}
.evlist .r:last-child{padding-bottom:0}
.evlist .r>.n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.evlist .r .b{min-width:0}
.evlist .r .t{font-size:13px;color:var(--ink);line-height:1.45}
.evlist .r .t .m{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.evlist .r .how{margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.65;word-break:break-word}
.evlist .r .how b{color:var(--ink-2);font-weight:600}
.evlist .r .so{margin-top:6px;font-size:12px;color:var(--ink-3);line-height:1.55}
.evlist .r .so b{color:var(--ink);font-weight:600}
.evlist .r .s{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* Code lines WRAP; they do not scroll out of sight. The value a reviewer came
   to read is always at the END of the line — the canonical href, the price,
   the vary header. Continuations hang-indent 14px so a wrapped line can never
   be mistaken for a new statement. There is deliberately no fixed-height,
   inner-scrolling variant: a payload behind a scroller is a payload the
   client will not read. */
.code{background:#fafafa;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
  font-family:var(--mono);font-size:11.5px;line-height:1.75;color:var(--ink-3)}
.code .ln{display:block;white-space:pre-wrap;overflow-wrap:anywhere;padding-left:14px;text-indent:-14px}
.code .ln.chg{box-shadow:inset 2px 0 0 var(--line-strong);padding-left:23px;margin-left:-9px}
.code .k{color:var(--ink-2);font-weight:600}
.code .s{color:var(--ink-3)}
.code .p{color:var(--muted)}
.code .t{color:var(--ink);font-weight:600}
.codehead{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.codehead .t2{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.codehead .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* stack finding rows (screen 04) */
.stk{display:flex;flex-direction:column}
.stk .r{padding:14px 0;border-top:1px solid var(--line-soft)}
.stk .r:first-child{border-top:0;padding-top:0}
.stk .r:last-child{padding-bottom:0}
.stk .r .sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stk .r .sh .tl{width:28px;height:28px;border-radius:var(--r-sm);background:#f4f4f5;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);flex:0 0 auto}
.stk .r .sh .tl svg{width:15px;height:15px;stroke-width:1.75}
.stk .r .sh .nm{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.4}
.stk .r .sh .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.stk .r .sg{margin-top:9px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px 18px}
.stk .r .sg .c .k{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:4px}
.stk .r .sg .c .v{font-size:12px;color:var(--ink-3);line-height:1.55}
.stk .r .sg .c .v .m{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}

/* dependency register (screen 05) */
.dep .own{display:flex;align-items:center;gap:8px;min-width:0}
.dep .own .nm{font-size:12.5px;color:var(--ink-2);line-height:1.4;min-width:0}
.dep .own .nm .d2{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* ==========================================================================
   10. SYSTEM NOTES HELPERS
   ========================================================================== */
.notegrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.specrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--line-soft)}
.specrow:first-child{border-top:0;padding-top:0}
.specrow .sk{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:0 0 132px}
.specrow .sv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.emptystate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px 20px;
  text-align:center;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:#fafafa}
.emptystate>svg{width:24px;height:24px;stroke-width:1.75;color:var(--muted-2)}
.emptystate .t{font-size:13px;color:var(--ink-2);line-height:1.5}
.emptystate .d{font-size:12px;color:var(--muted);line-height:1.5}

/* ==========================================================================
   11. RESPONSIVE — the deck never scrolls horizontally; frames scroll inside
   ========================================================================== */
/* The content-block grids are single-column at EVERY width now (see §above),
   so nothing here re-columns them — .grid4 in particular must not reappear at
   2-up. What is left are the data displays, which do still step down. */
@media (max-width:1279px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .kpi-grid{grid-template-columns:minmax(0,1fr)}
  .lane{grid-template-columns:minmax(0,1fr)}
  .lane .lr{text-align:left}
  .evlist .r{grid-template-columns:34px minmax(0,1fr)}
  .evlist .r .s{grid-column:2}
  .stk .r .sg{grid-template-columns:minmax(0,1fr)}
}

/* ==========================================================================
   12. MILESTONE RAIL — four states across one horizontal run (screen 01)
   ========================================================================== */
.mrail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.mrail .m{padding:0 18px;border-left:1px solid var(--line-soft);min-width:0}
.mrail .m:first-child{border-left:0;padding-left:0}
.mrail .m:last-child{padding-right:0}
.mrail .m .hd{display:flex;align-items:center;gap:8px}
.mrail .m .no{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--primary-fg);
  background:var(--primary);border-radius:var(--r-sm);padding:2px 6px;line-height:1.35;flex:0 0 auto}
.mrail .m .hrs{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.mrail .m .nm{margin-top:8px;font-size:13px;font-weight:500;color:var(--ink);line-height:1.45}
.mrail .m .ft{margin-top:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mrail .m .ft .pc{font-family:var(--mono);font-size:11px;color:var(--muted);flex:0 0 auto}
@media (max-width:899px){.mrail{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================================
   13. TOKEN SWATCH BOX FIX (screen 12) — a shared-kit finding, fixed here.

   `_kit/mockup-base.css` styles the swatch label as `.sw .m{padding:7px 9px;
   border-top:…}` without a `display`, so it stays `display:inline` while its
   two children (`.n` and `.h`) are `display:block`. An inline box with block
   children fragments: it contributes its own 20.25px line-height strut *plus*
   padding on both sides of the fragment, which measured `.m` at 82px against
   31px of actual text. `.sw` has `overflow:hidden`, so all fifteen swatches
   clipped their hex label by 5px — the geometry audit caught it, nothing was
   visibly broken enough to notice by eye.

   `_kit/` is shared and must not be edited from a product deck, so the fix
   lives here: make `.sw` a real flex column and `.m` a real block. The box
   height then comes from its content, and the grid row from the tallest box.
   Logged in HANDOFF §"Deviations and findings" as a kit issue to back-port.
   ========================================================================== */
.sw{display:flex;flex-direction:column}
.sw .m{display:block;flex:1 1 auto}

/* ==========================================================================
   14. LANDING-PAGE LAYOUT — one scrolling document, sticky left sidebar.

   REPLACES the deck chrome. This deliverable is a scope document a client
   reads top to bottom, not a mockup a reviewer switches between: so there is
   no `.viewer` picker, no `.frame`, no one-screen-at-a-time `.screen`, and no
   duplicated app shell per part. The twelve parts are sections of one page,
   and the sidebar is a table of contents with scroll-spy.

   Every content primitive (.phead .kpi .panel .card .tbl .lane .tier …) is
   unscoped in _kit/mockup-base.css, so all of it transplants unchanged —
   only the outer frame differs.
   ========================================================================== */
.doc{display:grid;grid-template-columns:var(--docnav-w) minmax(0,1fr);max-width:1560px;margin:0 auto;
  align-items:start;gap:0}
:root{--docnav-w:272px}

/* ---- sidebar: sticky table of contents ---------------------------------- */
.docnav{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:22px 0 28px;scrollbar-width:thin}
.docnav::-webkit-scrollbar{width:10px}
.docnav::-webkit-scrollbar-thumb{background:var(--line);border:3px solid var(--card);border-radius:var(--r-full)}
.docnav .brand{display:block;padding:0 22px 18px;margin-bottom:0}
.docnav .brand .brand-svg{width:112px;height:58.3px}   /* 96×50 × 1.1667 — exact aspect */
.docnav .navsum{margin:0 18px 16px;padding:13px 14px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-lg)}
.docnav .navsum .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);line-height:1.5}
.docnav .navsum .v{font-family:var(--mono);font-size:19px;font-weight:640;letter-spacing:-.02em;color:var(--ink);
  line-height:1.2;margin-top:3px}
.docnav .navsum .r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;
  font-size:11.5px;color:var(--muted);line-height:1.45}
.docnav .navsum .r+.r{border-top:1px solid var(--line)}
.docnav .navsum .r .n{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.docnav .navsum .sep{height:1px;background:var(--line);margin:11px 0 6px}

.docnav .lab{padding:13px 22px 5px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2)}
.docnav a.it{display:flex;align-items:center;gap:9px;margin:0 10px;padding:0 10px;min-height:36px;
  border-radius:var(--r-md);color:var(--ink-3);text-decoration:none;font-size:13px;line-height:1.35;
  border-left:2px solid transparent;transition:background .15s,color .15s}
.docnav a.it .no{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted-2);flex:0 0 16px;
  letter-spacing:.02em}
.docnav a.it .lb{flex:1 1 auto;min-width:0}
.docnav a.it .cnt{font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink-2);
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 5px;line-height:1.6;
  flex:0 0 auto}
.docnav a.it:hover{background:var(--accent);color:var(--ink)}
/* active section — .accent fill + 2px near-black left marker, mirroring the
   kit's sidebar/rail active treatment exactly */
.docnav a.it.on{background:var(--accent);color:var(--ink);font-weight:500;border-left-color:var(--primary)}
.docnav a.it.on .no{color:var(--ink)}
.docnav a.it.on .cnt{border-color:var(--line-strong);color:var(--ink)}
.docnav .navfoot{margin-top:auto;padding:16px 22px 0;border-top:1px solid var(--line-soft);
  font-size:11px;color:var(--muted);line-height:1.6}
.docnav .navfoot .m{font-family:var(--mono);color:var(--ink-2)}

/* ---- main column -------------------------------------------------------- */
/* the <section-NN> custom elements are unknown tags, so they default to
   display:inline — which collapses the column layout inside them. */
.part>:not(.parthead){display:block}
.docmain{min-width:0;padding:0 0 96px}
.docwrap{max-width:1140px;margin:0 auto;padding:0 32px}

.dochero{padding:52px 0 8px}
.dochero .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.dochero h1{margin:13px 0 12px;font-size:32px;font-weight:640;letter-spacing:-.03em;line-height:1.14;color:var(--ink)}
.dochero .lead{margin:0;font-size:14px;color:var(--muted);line-height:1.65}
.dochero .lead b{color:var(--ink-2);font-weight:600}
.dochero .lead .mono{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.dochero .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.dochero .tag{display:inline-flex;align-items:center;gap:6px;background:var(--sunken);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:3px 9px;font-family:var(--mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap}

/* ---- one part ----------------------------------------------------------- */
.part{padding:34px 0 6px;scroll-margin-top:20px}
.part+.part{border-top:1px solid var(--line)}
.part .inner{display:flex;flex-direction:column;gap:20px}
.parthead{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:20px}
.parthead .no{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--primary-fg);
  background:var(--primary);border-radius:var(--r-sm);padding:3px 7px;line-height:1.35;flex:0 0 auto}
.parthead .pk{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.parthead .route{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap}
/* section titles are h2 in a single document — the page has one h1, in the hero */
.part .phead h2{margin:0;font-size:22px;font-weight:640;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}

.docfoot{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);
  line-height:1.7}
.docfoot .m{font-family:var(--mono);color:var(--ink-2)}

/* ---- responsive: sidebar collapses to a top bar ------------------------- */
@media (max-width:1099px){
  :root{--docnav-w:1fr}
  .doc{grid-template-columns:minmax(0,1fr)}
  .docnav{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px;padding:14px 18px}
  .docnav .brand{padding:0 14px 0 0}
  .docnav .navsum,.docnav .lab,.docnav .navfoot{display:none}
  .docnav a.it{margin:0;border-left:0;border-bottom:2px solid transparent;min-height:32px;font-size:12.5px}
  .docnav a.it.on{border-left:0;border-bottom-color:var(--primary)}
  .docnav a.it .cnt{display:none}
  .docwrap{padding:0 20px}
  .dochero{padding:34px 0 4px}
  .dochero h1{font-size:27px;max-width:none}
}
@media (max-width:639px){
  .docwrap{padding:0 14px}
  .dochero h1{font-size:23px}
  .parthead .route{display:none}
}

/* ==========================================================================
   15. NARROW-WIDTH CONTAINMENT

   Two fixes found by the geometry audit at 390px, both of them the page
   scrolling horizontally — which the responsive contract forbids outright.
   ========================================================================== */

/* (a) Long mono strings in the footer pushed the PAGE 65px wide.
   `.plan/SellUp_Technical_SEO_Developer_Implementation_Brief.pdf` is 63
   characters of unbreakable monospace — 441px — and nothing in the cascade
   let it break. Paths and filenames must wrap anywhere; they are references,
   not identifiers a reader has to select in one piece. */
.docfoot,.docnav .navfoot{overflow-wrap:anywhere}

/* (b) The five estimate tables are 474–545px of fixed numeric columns and
   cannot fit a 390px viewport. DESIGN-SYSTEM.md §6 is explicit that these are
   desktop artefacts and must not be squashed into a phone layout, and the
   alternative here — restructuring a nine-column discipline matrix into
   stacked cards — would break the row/column cross-check that makes the
   estimate auditable in the first place.

   So the table scrolls inside its own wrapper, and below 900px it says so.
   This is a DELIBERATE, SIGNPOSTED scroller, not content parked out of sight:
   the affordance is a right-edge shadow plus a one-line hint, so a reader on a
   phone knows the column continues. Recorded in HANDOFF as a deviation. */
@media (max-width:899px){
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to left,rgba(24,24,27,.07),transparent 24px)}
  .panel .tbl-wrap::after,.card .tbl-wrap::after{content:""}
  .tbl-wrap+.pnote::before,.panel>.tbl-wrap~.pnote::before{
    content:"Scroll the table sideways to read every column. ";
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-2)}
}

/* ---- count strip, narrower widths ---------------------------------------
   The divider must be cleared at whatever the row end actually IS at each
   breakpoint, or a rule dangles into empty space. `4n` is a subset of `2n`,
   so stepping down to two columns only needs the extra `2n` rule — nothing
   has to be re-added. At one column every divider goes. */
@media (max-width:1279px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .it:nth-child(2n){border-right:0;margin-right:0;padding-right:0}
}
@media (max-width:639px){
  .strip{grid-template-columns:minmax(0,1fr);row-gap:9px}
  .strip .it{border-right:0;margin-right:0;padding-right:0}
}

/* ---- hero summary lines --------------------------------------------------
   The opening was a single ~200-word paragraph of dense technical prose. It
   held the right facts and was unusable as the first thing a client sees:
   nothing to scan, no entry point, and the commercially important numbers
   buried mid-sentence.

   Replaced with a labelled summary — one row per thing the reader needs in
   the first ten seconds. The detail did not need relocating: the two-system
   argument is already part 02's whole subject, and the findings are part 03's.
   The hero now points at them instead of pre-empting them. */
.dochero .lede{margin-top:20px;display:flex;flex-direction:column}
.dochero .lede .r{display:grid;grid-template-columns:206px minmax(0,1fr);gap:20px;
  padding:11px 0;border-top:1px solid var(--line-soft);align-items:baseline}
.dochero .lede .r:first-child{border-top:0;padding-top:0}
.dochero .lede .k{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.5}
.dochero .lede .k .n{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink)}
.dochero .lede .v{font-size:14px;color:var(--ink-3);line-height:1.6}
.dochero .lede .v b{color:var(--ink);font-weight:600}
.dochero .lede .v .m{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.dochero .kicker{margin:0 0 4px;font-size:16px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);line-height:1.5}
@media (max-width:899px){
  .dochero .lede .r{grid-template-columns:minmax(0,1fr);gap:3px;padding:9px 0}
}

/* ---- brand mark: the real SellUp logo ------------------------------------
   DEVIATION, deliberate and client-driven. Replaces the drawn `.brand-svg`
   text lockup with SellUp's actual logo, taken from sellup.com.sg/images/logo.png.

   Two house rules bend here, and both are worth stating:
   · DESIGN-SYSTEM.md §7b/§8 require an inline SVG lockup and forbid rasters —
     this is a PNG, because it is the client's own mark and we do not have a
     vector of it. Supplied at 1x and 2x so it stays crisp on retina.
   · The ~3% colour budget: the mark carries SellUp blue and a red chevron,
     which are outside the neutral ramp. It is ONE element, top-left, on three
     pages — it reads as the brand signature rather than as page colour, and a
     client-facing proposal that redraws the client's logo in greyscale would
     be a strange thing to hand over.

   The source is 402×120 with 86px of transparent padding on each side, so the
   asset is cropped to its ink box (230×120) — which, because the padding was
   symmetrical, is also exactly centred. No manual centring is needed; do not
   add negative margins to "fix" alignment. */
.docnav .brand{display:block;padding:2px 22px 20px;margin-bottom:0}
.docnav .brand-img{display:block;width:122px;height:auto;margin:0 auto;image-rendering:auto}
/* collapsed top-bar layout: the sidebar becomes a horizontal row, so the mark
   sits inline at its start rather than centred in a column */
@media (max-width:1099px){
  .docnav .brand{padding:0 14px 0 0}
  .docnav .brand-img{width:104px;margin:0}
}