/* ═══════════════════════════════════════════════════════════════════════
   THE REGISTRY DESK, wired into the running application.

   WHAT THIS IS. The working build Mike chose — "Registry Desk.dc.html" from
   the Legal-Parchment Design Exploration (direction 1d), ingested at
   prototype/legal-parchment-exploration/ — applied to the real app's own
   markup. A dark wooden desk; the workspace is a cream sheet lying on it;
   statuses are rubber stamps that carry a word; acts are green press-plates.
   It REPLACES v6.css ("The Brief", direction 1b), which was applied
   2026-08-09 from the wrong source file: the comparison document recommended
   the 1b sketch, but the look Mike picked is the built Registry Desk.

   WHY IT IS ONE FILE. S95 (2026-07-28) made the parchment look one removable
   line, so dark mode was always one deletion away. Kept exactly: remove this
   line and you are back at parchment; remove two and you are back at dark.
   (v6.css remains on disk beside this file; relink it to compare.)

   WHAT DID NOT CHANGE. The meaning rules survive the restyle untouched:
   red means error and nothing else; pending is amber and hatched, never
   green; a check that never ran is dashed and unfilled; superseded is struck
   through and kept; nothing is said by colour alone — every stamp carries
   its word, which is the one thing the Registry Desk build proved in
   greyscale. Only the clothes changed.

   TYPEFACE NOTE. The build's stamp face was Special Elite; since
   2026-08-10 the stamps wear CW STAMP — the registry's own rubber, a
   distressed Modified Version of Courier Prime built by
   fonts/make-stamp-face.py, OFL like everything else in the folder. No CDN
   request is made either way.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* THE DESK. Dark waxed wood; everything readable sits on paper. */
  --bg:#42331f;

  /* THE PAPER. The big working sheet, and the brighter cards laid on it. */
  --sheet:#f7f0dd;
  --sheet-2:#f3ecd4;
  --surface:#fbf6e9;  --surface-2:#f3edda;
  --panel:#fbf6e9;    --panel-2:#f3edda;
  --line:#ddd3b4;     --line-2:#c5b894;

  /* THE INKS — same five meanings as every theme before it. */
  --ink:#2c2318;
  --mute:#6c5d45;
  --mute-2:#77694f;                /* was #8a7a5c — 3.54 on --sheet-2 */
  --accent:oklch(0.42 0.09 165);   /* banker's-lamp green — effective, recorded */
  --accent-2:oklch(0.50 0.12 72);  /* burnished amber — pending, never green    */
  --danger:oklch(0.47 0.16 28);    /* sealing-wax red — ERROR, and nothing else */
  --ok:oklch(0.42 0.09 165);
  /* THE TWO FADED INKS, darkened 2026-08-22 to clear WCAG AA on the paper.
     They were #9a8d70 and #8d8069, which measured 2.51 and 2.92 against
     --sheet-2 — three of the five status marks could not actually be read,
     while the corner of the sign-in sheet promised "nothing said by colour
     alone". The word is the part that was failing. Each was walked toward
     black by the smallest step that clears 4.5, so both keep their hue and
     still read as faded beside --ink. */
  --never:#746a54;                 /* never ran   — 4.54 on --sheet-2 */
  --gone:#746956;                  /* superseded  — 4.56 on --sheet-2 */

  /* Ink for the chrome that sits directly on the wood. */
  --desk-ink:#f3ecd8;
}

/* ── The desk itself ──────────────────────────────────────────────────────
   Straight from the build: a warm glow at the top of the desk, a faint
   diagonal wood grain, and a vignette at the bottom edge. */
html, body{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(255,235,190,.13), transparent 60%),
    repeating-linear-gradient(88deg, rgba(0,0,0,.10) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.45), transparent 60%);
}

/* The two animations of this desk: a sheet is laid down, a stamp comes down. */
@keyframes sheet-in{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes registry-stamp{
  0%{ opacity:0; transform:scale(1.6) rotate(var(--rot,-2deg)); }
  60%{ opacity:1; transform:scale(.94) rotate(var(--rot,-2deg)); }
  /* Lands at full ink. It used to settle at .92 — a third place the same 8%
     fade was spent, after .chip and .stamp, and the one that would have put
     the marks back under the floor for the animation's last frame onward. */
  100%{ opacity:1; transform:scale(1) rotate(var(--rot,-2deg)); }
}

/* ── The desk, and the sheet on it ───────────────────────────────────────
   REDRAWN 2026-08-10 to match the build: the workspace container is the
   DESK — dark wood, nothing else — and the pane's content is a cream sheet
   LYING on it, tilted, with its grain and its hard-edged shadow. The wood
   showing around the paper is most of what makes the metaphor read. */
[data-testid="workspace"]{
  background:transparent;
  padding-top:18px !important;
  padding-bottom:56px !important;
}
.sheet-main{
  background-color:var(--sheet);
  background-image:radial-gradient(rgba(44,35,24,.03) 1px, transparent 1px);
  background-size:3px 3px;
  max-width:1180px; margin:0 auto;
  padding:26px 32px 34px;
  transform:rotate(-.3deg); --rot:-.3deg;
  box-shadow:0 2px 0 rgba(0,0,0,.3), 0 22px 44px -18px rgba(0,0,0,.7);
  animation:sheet-in .4s ease-out;
}

/* The sheet's headline: engraved title over a double rule, the register's
   meta note at the right — the build's idiom on every sheet. */
.sheet-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  border-bottom:3px double var(--ink); padding-bottom:10px; flex-wrap:wrap;
}
.sheet-head .sheet-title{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:30px; line-height:1.1; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink);
}
.sheet-head .sheet-note{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10.5px; color:var(--mute); letter-spacing:.04em;
  padding-bottom:4px;
}
.sheet-kicker{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}

/* ── Typeset: the registry register ──────────────────────────────────────── */
h1,h2,h3,.pane-title,.section-title{
  font-family:'Instrument Serif',Georgia,serif; letter-spacing:.03em;
}
.caption{ font-style:italic; color:var(--mute); }
.section-label,.empty-kicker,.tag{
  font-family:'Courier Prime','Courier New',monospace;
  letter-spacing:.16em; text-transform:uppercase; font-weight:400;
}
/* Every figure that might be compared to another aligns. */
.font-mono,.tile-n,.waiting-age,.chip,.tag,.btn,
input,textarea,select,table,td,th{ font-variant-numeric:tabular-nums; }

/* ── Cards on the sheet ───────────────────────────────────────────────────
   Panels are the brighter cards the build lays on its sheet: near-white,
   one hairline, sharp corners. The sheet supplies the theatre; the cards
   stay flat so tables and forms stay scannable. */
.panel{
  background:var(--panel); border:1px solid #cfc4a5; border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(44,35,24,.04);
}
.panel-2{ background:var(--panel-2); border-radius:0; }
.tile{ background:var(--panel); }
/* A STRIP NARROWER THAN ITS FIGURES SCROLLS INSIDE ITSELF, never clips.
   `v4.css` gives .tile-strip `overflow:hidden` to clip its corner radius, and
   the line below already flattens that radius to zero — so at 375px the hidden
   overflow was buying nothing and costing the LAST FIGURE on every strip, which
   simply vanished with no way to reach it. Measured on the sourcing desk:
   scrollWidth 409, clientWidth 254, the fifth tile's right edge at 465 in a
   375px viewport. This is S324's repair one element over — the page must never
   be the thing that scrolls sideways, and `auto` costs nothing at 1440. */
.tile-strip{ border-radius:0; overflow-x:auto; overflow-y:hidden; }
/* A tile that counted a set you can be shown says so. The ones counting the
   whole book, or counting nothing you can open, get none of this. */
.tile--drill{ cursor:pointer; transition:background .12s, box-shadow .12s; }
.tile--drill:hover{ background:var(--panel-2); }
.tile--drill[aria-pressed="true"]{
  background:var(--panel-2);
  box-shadow:inset 0 -3px 0 var(--ink);
}
/* THE NARROWING, SAID OUT LOUD. A list showing a subset without saying which
   subset is the whole defect this exists to close, so the chip sits in the
   filter row beside the search box and drops the focus when pressed. */
.chip-focus{
  border:1px solid var(--ink); background:var(--panel-2); color:var(--ink);
  cursor:pointer; white-space:nowrap; align-self:center;
}
.chip-focus:hover{ background:var(--ink); color:var(--panel); }

/* The dossier sheet is its own piece of paper, laid slightly askew. */
.paper{
  background:#fbf6e9;
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 24px 50px -18px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(26,23,20,.06);
  transform:rotate(-.4deg);
  animation:sheet-in .5s ease-out;
}

/* ── Stamps ───────────────────────────────────────────────────────────────
   Every status chip is a rubber stamp: the typewriter stamp face, a thick
   border in the ink's own colour, a slight tilt, and ALWAYS a word. The
   five meanings are unchanged — only the rubber is new. */
.chip{
  font-family:var(--stamp-face);
  font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  border-width:2px; border-style:solid; border-radius:2px;
  padding:2px 8px;
  /* NO OPACITY. A flat .92 faded ink and border together on every chip, and
     it is what cost `pending` its pass: 5.20 flat, 4.46 once faded, 4.07 over
     its own hatch. The tilt, the stamp face and the 2px border carry the
     rubber-stamp character without spending contrast on it. */
  transform:rotate(-1.5deg);
}
.chip:nth-of-type(even){ transform:rotate(1deg); }

.chip-ok{   color:var(--ok);   border-color:var(--ok);   background:transparent; }
/* Pending is amber AND hatched — a grant must not look effective early. */
.chip-pending{
  color:var(--accent-2); border-color:var(--accent-2);
  background:repeating-linear-gradient(45deg, rgba(44,35,24,.05) 0 3px, transparent 3px 6px);
}
/* THE FLOOR MARK. A position, not a fault: this rung had nothing below it,
   so a contract standing on it had no retreat. It wears the same amber as
   pending because both mean "look here", and it is kept clear of pending by
   having no hatch — the hatch is what says "not effective yet", and a floor
   is a fact, not a wait. Not `chip-err` (nothing has gone wrong) and not
   `chip-high` (that is a severity, and on the portfolio this chip sits
   beside a real severity chip, so it must not borrow its face). */
.chip-warn{ color:var(--accent-2); border-color:var(--accent-2); background:transparent; }
/* Red is error. Stated, never shouted. */
.chip-err{  color:var(--danger); border-color:var(--danger); background:transparent; font-weight:400; }
/* Never ran: neither pass nor fail — dashed, unfilled, visibly absent. */
.chip-unknown{ color:var(--never); border-style:dashed; border-color:var(--never); background:transparent; }
/* "High" is a severity, not an error; it wears the plain ink, heavily. */
.chip-high{ color:var(--ink); border-color:var(--ink); background:transparent; font-weight:600; }
.chip-std{  color:var(--mute); border-width:1.5px; border-color:color-mix(in oklch, var(--mute), transparent 40%); background:transparent; }
/* Superseded is struck through and KEPT. */
.chip-gone{
  color:var(--gone); border-width:1.5px; border-color:color-mix(in oklch, var(--gone), transparent 40%);
  background:transparent; text-decoration:line-through;
}

/* ── Acts ─────────────────────────────────────────────────────────────────
   The primary act is the build's press-plate: solid green, cream lettering,
   a hard shadow that gives it something to be pressed against. */
.btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1.5px solid color-mix(in oklch, currentColor, transparent 55%);
  border-radius:2px;
}
.btn-primary{
  background:oklch(0.38 0.08 165); border:none; border-radius:0;
  color:#f3ecd8; font-weight:700; letter-spacing:.14em;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.btn-primary:hover{ filter:brightness(1.12); background:oklch(0.38 0.08 165); }

input, textarea, select{
  background:#fdfaf0; border:1px solid var(--line-2); border-radius:0;
  font-family:'Courier Prime','Courier New',monospace;
}

/* ── The chrome on the wood ───────────────────────────────────────────────
   Masthead, tab row and footer sit directly on the desk, so their ink
   tokens flip to cream. Re-scoping the tokens (rather than restyling every
   descendant) keeps the panes' own inline styles honest in both worlds. */
.masthead, .footer-bar, [data-testid="tab-row"]{
  --ink:var(--desk-ink);
  --mute:#cdbd98;
  --mute-2:#ac9c7b;    /* was #a08d67 — 3.77 on the wood */
  --line:rgba(0,0,0,.35);
  --line-2:#63533a;
  --panel-2:rgba(243,236,216,.08);
  color:var(--desk-ink);
}
/* The masthead is the registry's nameplate on the wood: engraved serif,
   letterspaced, the desk's own ink. */
.masthead{ border-bottom:1px solid rgba(217,201,164,.25); }
.masthead .registry-wordmark{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:20px; letter-spacing:.12em; color:#f0e4c6; white-space:nowrap;
}
.masthead .registry-est{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:#b3a17d;   /* was #a8946c — 4.13 on the wood; 4.61 now */
}
.masthead .desk-of{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:12px; color:#d9c9a4;
}
.masthead .desk-of b{ color:#f0e4c6; }

/* The footer is a brass strip: the register's small print. */
.footer-bar{
  border-top:1px solid rgba(217,201,164,.2) !important;
  font-family:'Courier Prime','Courier New',monospace;
  letter-spacing:.08em;
}

/* Tabs are the build's file-folder tabs: squared shoulders, no underline,
   the open one is the paper itself slotted forward. */
[data-testid="tab-row"]{ border-bottom:none !important; }
[data-testid="tab-row"] .tab-btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:none; border-radius:3px 3px 0 0;
  /* 7px 14px 9px until the rack gained compartments. Each compartment now
     carries an engraved label above its plates, which is a line of chrome per
     ROW; the plates give a little of it back so the whole rack stays close to
     the height the flat row occupied. */
  padding:6px 11px 7px; color:#cdbd98;
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(243,236,216,.08);
}
[data-testid="tab-row"] .tab-btn:hover{ color:#f0e4c6; }
[data-testid="tab-row"] .tab-btn.active{
  background:var(--sheet); color:#2c2318; font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
[data-testid="tab-row"] .tab-btn.active::after{ display:none; }

/* The rail is retired (Mike, 2026-08-10): navigation is the top rack, one
   place for every role and every view. The count badge survives — measured
   figures only; zero is shown, muted, never hidden. */
[data-testid="tab-row"] .tab-n{
  font-family:'Courier Prime','Courier New',monospace; font-size:10px;
  font-variant-numeric:tabular-nums;
  color:#cdbd98;   /* was #a08d67 — 3.77 on the wood */
  margin-left:7px;
}
[data-testid="tab-row"] .tab-btn.active .tab-n{ color:#6c5d45; }
/* A ZERO IS A MEASURED FIGURE AND MUST BE READABLE. This was the same ink
   faded 40%, which measured 2.60 on the wood — hidden, three lines under a
   comment promising "zero is shown, muted, never hidden". It is muted by
   being the quieter of two legible inks now (4.52 against the figure's
   6.57) rather than by being faded past reading. */
[data-testid="tab-row"] .tab-n.zero{
  color:#ac9c7b;
}

/* ── The rack has compartments ────────────────────────────────
   Eighteen plates in one flat row is a drawer, not a rack. The joiner's
   answer — the one the design brief already draws navigation as (§6, "the
   pigeonhole") — is a compartment per kind of work, and the plates of the
   compartment you are in on the shelf beneath it.

   THE HEIGHT IS WHY IT IS TWO TIERS. Measured on the Legal admin's eighteen
   areas at 1280px: 85px as one flat wrapping row with no order at all; 147px
   drawn as a column per compartment, because a column cannot break across
   lines; 108px drawn as one sequence of labels and plates, because the labels
   cost width too. Two tiers is two rows at any number of areas, and this rack
   has gained an area in nine of the last ten cycles. */
.rack{ column-gap:5px; row-gap:3px; }
/* The compartment. Brass-lettered on the wood; the open one is a paper plate
   slotted forward, exactly as an open pane's tab is. */
.rack .bay-btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  border:none; border-radius:3px; padding:6px 11px 7px;
  color:#cdbd98; background:rgba(0,0,0,.22);
}
.rack .bay-btn:hover{ color:#f0e4c6; }
.rack .bay-btn.open{
  background:var(--sheet); color:#2c2318; font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.rack .bay-btn.open .tab-n{ color:#6c5d45; }
/* WHERE YOU ARE, said by a shape and not by colour alone (design brief §5.5):
   the compartment holding the open pane carries a rule under it, which reads
   in greyscale and survives beside the paper fill of the compartment somebody
   has merely opened to look inside. */
.rack .bay-btn.current{ box-shadow:inset 0 -3px 0 #d9c9a4; }
.rack .bay-btn.open.current{ box-shadow:0 2px 0 rgba(0,0,0,.35), inset 0 -3px 0 #6c5d45; }

/* The shelf: the plates of the open compartment, on the wood under the rack. */
.rack-shelf{
  padding-top:2px; padding-bottom:5px;
  column-gap:4px; row-gap:3px;
}
.rack-shelf .shelf-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:#a8946c; padding-right:10px; margin-right:4px;
  border-right:1px solid rgba(217,201,164,.18);
  align-self:stretch; display:flex; align-items:center; white-space:nowrap;
}

/* ── Jump to ──────────────────────────────────────────────────────────────
   The control on the rack, and the sheet it opens. */
.rack .jump-btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px dashed rgba(217,201,164,.45); border-radius:3px;
  padding:6px 10px 7px; color:#cdbd98; background:transparent;
  display:inline-flex; align-items:center; gap:8px;
}
.rack .jump-btn:hover{ color:#f0e4c6; border-color:rgba(217,201,164,.8); }
.rack .jump-kbd{
  font-family:'Courier Prime','Courier New',monospace; font-size:9px;
  letter-spacing:.08em; color:#a8946c;
  border:1px solid rgba(217,201,164,.3); border-radius:2px; padding:1px 4px;
}
.jump-scrim{
  position:fixed; inset:0; z-index:60;
  background:rgba(18,14,9,.62);
  display:flex; align-items:flex-start; justify-content:center;
  padding:9vh 16px 16px;
}
.jump-sheet{
  background:var(--sheet); color:var(--ink);
  width:min(720px,100%); max-height:76vh; overflow:auto;
  border:1px solid rgba(44,35,24,.35);
  box-shadow:0 18px 0 rgba(0,0,0,.28);
  padding:16px 18px 12px;
  animation:sheet-in .28s ease-out both;
}
.jump-rule{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:#6c5d45; border-bottom:1px solid rgba(44,35,24,.25);
  padding-bottom:7px;
}
.jump-input{
  width:100%; margin-top:12px; padding:9px 11px;
  font-family:'Courier Prime','Courier New',monospace; font-size:13px;
  background:transparent; border:1px solid rgba(44,35,24,.4); color:var(--ink);
}
.jump-list{ list-style:none; margin:10px 0 0; padding:0; }
.jump-list li + li{ border-top:1px solid rgba(44,35,24,.12); }
.jump-row{
  display:grid; width:100%; text-align:left;
  grid-template-columns:minmax(120px,auto) auto auto 1fr;
  align-items:baseline; gap:10px; padding:7px 8px; background:transparent;
}
/* THE CURSOR IS NOT SAID BY COLOUR ALONE (design brief §5.5): the row it is on
   carries a left bar and the label goes bold, so it survives greyscale. */
.jump-row.at{ background:rgba(44,35,24,.07); box-shadow:inset 3px 0 0 var(--ink); }
.jump-row.at .jump-label{ font-weight:700; }
.jump-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
.jump-bay{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#6c5d45;
}
.jump-n{
  font-family:'Courier Prime','Courier New',monospace; font-size:10px;
  font-variant-numeric:tabular-nums; color:#6c5d45;
}
.jump-note{ font-size:12.5px; color:#4a3d2a; }
.jump-none{ margin-top:12px; font-size:12.5px; color:#4a3d2a; line-height:1.6; }
.jump-keys{
  margin-top:10px; padding-top:8px; border-top:1px solid rgba(44,35,24,.18);
  font-family:'Courier Prime','Courier New',monospace; font-size:10px;
  letter-spacing:.08em; color:#6c5d45;
}
.jump-keys kbd{
  border:1px solid rgba(44,35,24,.3); border-radius:2px; padding:1px 4px;
  margin-right:3px;
}
/* At a narrow width the sentence is dropped rather than wrapped into a wall:
   the label, its bay and its count still say which area this is. */
@media (max-width:560px){
  .jump-row{ grid-template-columns:1fr auto auto; }
  .jump-note{ display:none; }
}

/* ── The front door ───────────────────────────────────────────────────────
   The build's sign-in: one sheet dropped on the dark desk. */
.signin-card{
  background-color:var(--sheet);
  background-image:radial-gradient(rgba(44,35,24,.03) 1px, transparent 1px);
  background-size:3px 3px;
  border:none; border-radius:0; padding:34px 36px 28px;
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 24px 50px -18px rgba(0,0,0,.75);
  transform:rotate(-.6deg);
  animation:sheet-in .5s ease-out;
}

/* The demo caption is a paper slip on the desk edge. */
.demo-caption{
  box-shadow:0 2px 0 rgba(0,0,0,.3), 0 16px 30px -14px rgba(0,0,0,.7);
  transform:translateX(-50%) rotate(.4deg);
}

/* The refusal state: an un-stamped outline, nothing more. */
.refusal{ border:2px dashed #bfae87; border-radius:2px; }

/* ── The reading surface and its origin margin ────────────────────────────
   Carried over from the previous theme unchanged in structure: a contract
   is read, not scanned, and the origin of every paragraph is stated in the
   margin, in words. The margin is on the SCREEN and never in the exported
   file (owner, 2026-07-25). */
.sheet{
  background:var(--sheet); border:1px solid color-mix(in oklch, var(--ink), transparent 78%);
  box-shadow:0 2px 0 rgba(0,0,0,.2), 0 16px 34px -26px rgba(0,0,0,.55);
}
.clause{
  display:grid; grid-template-columns:38px 1fr 240px; gap:0 16px;
  padding:15px 20px; border-bottom:1px solid color-mix(in oklch, var(--ink), transparent 88%);
}
.clause:last-child{ border-bottom:0; }
.clause-n{
  font-family:'Courier Prime','Courier New',monospace; font-size:10.5px;
  color:var(--mute); text-align:right; padding-top:4px; font-variant-numeric:tabular-nums;
}
.clause-text h4{
  margin:0 0 3px; font-size:12px; font-weight:700;
  font-variant:all-small-caps; letter-spacing:.1em; color:var(--ink);
}
.clause-text p{ margin:0; font-size:14.5px; line-height:1.75; max-width:64ch; color:var(--ink); }
.clause-margin{
  border-left:1px dashed color-mix(in oklch, var(--ink), transparent 80%);
  padding-left:14px; position:relative;
}
/* FIVE FILLS, not five hues: solid · diagonal · notched · hollow · dashed. */
.og{ position:absolute; left:0; top:2px; width:7px; height:calc(100% - 6px); min-height:24px; }
.og-legal{ background:var(--ok); }
.og-model{
  background:repeating-linear-gradient(45deg, var(--ok) 0 2.5px, transparent 2.5px 6px);
  border:1px solid var(--ok);
}
.og-vendor{ background:linear-gradient(var(--ink) 0 34%, var(--sheet) 34% 48%, var(--ink) 48% 100%); }
.og-external{ background:transparent; border:1.5px dotted var(--accent-2); }
.og-none{ background:transparent; border:1.5px dashed var(--never); }
.og-word{
  display:block; font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in oklch, var(--ink), transparent 20%); line-height:1.5;
}
.og-detail{ font-size:12px; font-style:italic; color:var(--mute); line-height:1.5; margin-top:3px; }
.og-ref{
  font-family:'Courier Prime','Courier New',monospace; font-size:10.5px;
  color:var(--mute); margin-top:3px;
}

/* ── Reading ──────────────────────────────────────────────────────────── */
p,.prose{ max-width:66ch; }

/* Scrollbars in desk tones. */
::-webkit-scrollbar-thumb{ background:#6b5940; border-radius:5px; }

/* ═══════════════════════════════════════════════════════════════════════
   THE DESIGN SET OF 2026-08-10 — the six screen designs Mike handed over
   (sign-in, buyer home, obligations, the deal room, legal home, legal
   deals), applied to the real screens. Everything below is vocabulary FOR
   those screens; the meaning rules above are untouched.

   ONE NEW INK, DELIBERATE: --advice, a ballpoint blue. The designs draw
   every advisory surface — the AI analysis card, comment anchors — in a
   different pen from the record's iron-gall ink, which is exactly the
   right idea: advice is not the record, and the pen says so. It is NOT a
   status ink; no state may wear it.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --advice:#2b4a8b;          /* the ballpoint pen — advisory surfaces only  */
  /* CW Stamp is the registry's own rubber (2026-08-10): Courier Prime,
     distressed and renamed under the OFL by fonts/make-stamp-face.py. */
  --stamp-face:'CW Stamp','Courier Prime','Courier New',monospace;
}

/* ── The stamp, at rubber size ────────────────────────────────────────────
   .chip stays the small mark inside rows; .stamp is the design's full-size
   rubber stamp: thick border, the stamp face, a tilt, always a word. */
.stamp{
  display:inline-block;
  font-family:var(--stamp-face);
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  border:2.5px solid currentColor; border-radius:2px;
  padding:3px 12px; font-weight:700;
  /* NO OPACITY, for the same reason .chip has none: a flat fade over ink and
     border costs every mark contrast and buys character the tilt, the stamp
     face and the 2.5px border already supply. Removing it from .chip and
     leaving it here is how the TERMINATED stamp came back at 4.08 while the
     chip beside it passed — one rule, two sites, and only one of them kept. */
  transform:rotate(var(--rot,-2deg));
  animation:registry-stamp .3s ease-out;
}
.stamp-lg{ font-size:17px; padding:5px 16px; border-width:3px; }
.stamp-sm{ font-size:10.5px; padding:1px 8px; border-width:2px; font-weight:400; }
.stamp-ok{      color:var(--ok); }
.stamp-pending{
  color:var(--accent-2);
  background:repeating-linear-gradient(45deg, rgba(44,35,24,.06) 0 3px, transparent 3px 6px);
}
.stamp-err{  color:var(--danger); }
.stamp-never{ color:var(--never); border-style:dashed; opacity:.85; font-weight:400; }
.stamp-gone{ color:var(--gone); text-decoration:line-through; font-weight:400; }
.stamp-ink{  color:var(--ink); }

/* ── The engraved crest ──────────────────────────────────────────────────
   Sized here, drawn as inline SVG in the ink of whatever it sits on. */
.crest{ display:block; margin:0 auto; color:var(--ink); opacity:.85; }

/* ── The front door, re-set as the registry-access sheet ─────────────────
   One portrait sheet on the dark desk; the form is a brighter card laid on
   it; the small print is the desk's own furniture. */
.signin-sheet{
  width:520px; max-width:calc(100vw - 48px);
  max-height:calc(100vh - 48px); overflow-y:auto;
  background-color:var(--sheet);
  background-image:radial-gradient(rgba(44,35,24,.03) 1px, transparent 1px);
  background-size:3px 3px;
  border:none; border-radius:0; padding:38px 44px 30px;
  box-shadow:inset 0 0 0 1px rgba(44,35,24,.25), inset 0 0 0 3px var(--sheet),
    inset 0 0 0 4px rgba(44,35,24,.12),
    0 2px 0 rgba(0,0,0,.25), 0 24px 50px -18px rgba(0,0,0,.75);
  transform:rotate(-.4deg);
  animation:sheet-in .5s ease-out;
}
.signin-wordmark{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:44px; letter-spacing:.06em; text-align:center; color:var(--ink);
  line-height:1.05;
}
.signin-sub{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  text-align:center; color:var(--mute); margin-top:6px;
}
.registry-access{
  background:var(--surface); border:1px solid #cfc4a5; padding:22px 24px 20px;
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 14px 28px -16px rgba(0,0,0,.45);
}
.access-rule{
  display:flex; align-items:center; gap:10px;
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute);
}
.access-rule::before,.access-rule::after{
  content:''; flex:1; border-top:1px solid var(--line-2);
}
.authorized-box{
  border:1.5px solid var(--ink); padding:9px 14px; text-align:center;
  font-family:'Courier Prime','Courier New',monospace;
  letter-spacing:.18em; text-transform:uppercase; font-size:11px; color:var(--ink);
  opacity:.85;
}
.authorized-box .fine{
  display:block; letter-spacing:.06em; text-transform:none; font-size:10.5px;
  color:var(--mute); margin-top:3px;
}

/* The rules of the desk — the product's law written on the furniture, in
   the desk's cream ink when it sits on the wood. */
.rules-of-the-desk{
  font-family:'Source Serif 4',Georgia,serif; font-style:italic;
  font-size:11.5px; line-height:1.75; color:#cdbd98;
}
.rules-of-the-desk .rules-title{
  font-family:'Courier Prime','Courier New',monospace; font-style:normal;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#a08d67;
  border-bottom:1px solid #63533a; padding-bottom:3px; margin-bottom:6px;
}
.rules-of-the-desk ol{ margin:0; padding-left:16px; }

/* The status-marks legend — a reference slip laid at the sheet's foot. */
.stamp-legend{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; padding:12px 18px;
  background:var(--sheet-2);
  box-shadow:0 2px 0 rgba(0,0,0,.25), 0 14px 26px -14px rgba(0,0,0,.55);
  transform:rotate(.35deg);
}

/* ── Index cards and margin notes ────────────────────────────────────────
   Advisory content lives on smaller, warmer slips beside the main sheet,
   visibly labelled. Never dressed as a control. */
.note-card{
  background:#f6eecf; padding:12px 14px; border-radius:0;
  box-shadow:0 2px 0 rgba(0,0,0,.22), 0 12px 22px -12px rgba(0,0,0,.5);
  transform:rotate(var(--rot,.5deg));
  font-family:'Courier Prime','Courier New',monospace; font-size:11.5px;
  line-height:1.65; color:var(--ink);
}
.note-card .note-title{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--mute); border-bottom:1px dotted var(--line-2);
  padding-bottom:4px; margin-bottom:7px;
}
.note-card--ruled{
  background:
    repeating-linear-gradient(transparent 0 21px, rgba(43,74,139,.18) 21px 22px),
    #fdfaf0;
  padding-top:14px;
}
.note-card--ledger{ background:#e8e9df; }
/* The rule-of-the-desk slip: the governing rule written on the furniture,
   in the registry's voice — serif, italic, a darker cream. */
.note-card--rule{ background:#e9dfc4; }
.note-card--rule .rule-text{
  font-family:'Source Serif 4',Georgia,serif; font-style:italic;
  font-size:13px; line-height:1.6; color:var(--ink); letter-spacing:0;
  text-transform:none;
}
/* The advisory card proper: white card, ballpoint ink, labelled on its face. */
.advice-card{
  background:#fdfbf2; border:1.5px solid var(--advice); border-radius:2px;
  padding:12px 14px; color:var(--advice);
  box-shadow:0 2px 0 rgba(0,0,0,.18), 0 12px 24px -14px rgba(0,0,0,.45);
}
.advice-card .advice-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.advice-foot{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  border-top:1px solid color-mix(in oklch, var(--advice), transparent 70%);
  padding-top:6px; margin-top:8px;
}

/* The open Deal Room is a dossier, the paper, and its advisory margin. On a
   narrow desk the paper comes first, then its advice, then the supporting
   dossier; the fixed analysis controls must never sit beyond the viewport. */
.deal-room-grid{
  display:grid; grid-template-columns:230px minmax(0, 1fr) 330px; gap:20px;
}
@media(max-width:900px){
  .deal-room-grid{ grid-template-columns:minmax(0, 1fr); }
  .deal-room-grid > :nth-child(2){ order:-2; }
  .deal-room-grid > :nth-child(3){ order:-1; }
}

/* ── The ledger table ─────────────────────────────────────────────────────
   Tables are straight even when the sheets are not. Courier heads, hair
   rules, tabular figures. */
.ledger{ width:100%; border-collapse:collapse; }
.ledger th{
  font-family:'Courier Prime','Courier New',monospace; font-weight:400;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); text-align:left; padding:7px 10px;
  border-bottom:1px solid var(--line-2);
}
.ledger td{
  font-size:12.5px; color:var(--ink); padding:9px 10px;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.ledger tr:last-child td{ border-bottom:0; }
.ledger tbody tr[data-open]{ cursor:pointer; }
.ledger tbody tr[data-open]:hover td{ background:rgba(44,35,24,.03); }
.ledger .mono, .ledger td.mono{
  font-family:'Courier Prime','Courier New',monospace; font-size:11.5px;
}

/* ── The stat boxes ───────────────────────────────────────────────────────
   Legal home's counters: a framed figure with its stamp beside it. */
.stat-box{
  border:1.5px solid var(--line-2); background:var(--surface);
  padding:12px 14px 10px; display:flex; flex-direction:column; gap:8px;
}
.stat-box .stat-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
}
.stat-box .stat-n{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:34px; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat-box .stat-n.none{ color:var(--mute-2); }
/* A figure with somewhere to go says so. The ones that count nothing you can
   open get none of this and stay flat — the affordance appears exactly where
   there is a destination, which is what makes it worth trusting. */
.stat-box--drill{ cursor:pointer; transition:border-color .12s, background .12s; }
.stat-box--drill:hover{ border-color:var(--ink); background:var(--panel-2); }
.stat-box--drill:hover .stat-label{ color:var(--ink); }

/* ── The pipeline, as stage cards ────────────────────────────────────────
   Buyer home's "my deals — by pipeline stage": one column per stage, the
   count, and an honest mark. Straight, because figures are compared. */
.stage-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  border:1px solid #cfc4a5; background:var(--panel);
}
.stage-card{
  padding:14px 12px 16px; text-align:center;
  border-right:1px solid var(--line);
}
.stage-card:last-child{ border-right:0; }
.stage-card .stage-name{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.stage-card .stage-n{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:12px; color:var(--mute); margin-top:3px; font-variant-numeric:tabular-nums;
}
.stage-card .stage-mark{ margin:12px 0 6px; }

/* A card with a measured set behind it is a way INTO the list below, so it
   has to look like something you can press. The four cards that measured
   nothing get none of this and stay flat, which is the honest difference:
   the affordance appears exactly where there is something to drill to. */
.stage-card--drill{ cursor:pointer; background:transparent; transition:background .12s; }
.stage-card--drill:hover{ background:var(--panel-2, #efe6cd); }
/* The pressed state says WHICH figure the list below is currently showing,
   and says it in more than colour — the name is underscored as well, so the
   selected card is still identifiable without it. */
.stage-card--drill[aria-pressed="true"]{ background:var(--panel-2, #efe6cd); }
.stage-card--drill[aria-pressed="true"] .stage-name{
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px;
}

/* The three counts in the sheet head, which drill to the same list. Drawn as
   text rather than as buttons — they read as a sentence and must go on
   doing so — but they are real buttons underneath, with the tab stop and the
   keyboard behaviour that comes with the element. */
.count-drills{ display:inline-flex; align-items:baseline; gap:0; }
.count-drill{
  font:inherit; color:inherit; background:none; border:0; padding:0 2px;
  cursor:pointer; border-bottom:1px solid transparent;
}
.count-drill:hover{ border-bottom-color:currentColor; }
.count-drill[aria-pressed="true"]{ color:var(--ink); border-bottom-color:currentColor; font-weight:600; }
.count-drill:disabled{ cursor:default; opacity:1; }

/* ── The press-plate row ─────────────────────────────────────────────────
   A dark strip of plates on the desk for a screen's standing acts. The
   plates are real acts only — no decorative affordances. */
.press-row{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:linear-gradient(180deg, #3a2d1c, #2e2313);
  border:1px solid rgba(0,0,0,.5); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,235,190,.08), 0 2px 0 rgba(0,0,0,.35);
}
.press-row .press-title{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#a08d67;
  margin-right:4px;
}

/* ── The deal-meta strip ─────────────────────────────────────────────────
   The deal room's header facts: LABEL over value, in columns. */
.deal-meta{
  display:flex; flex-wrap:wrap; align-items:stretch;
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.deal-meta .meta-cell{
  padding:8px 18px 9px 0; margin-right:18px;
  border-right:1px solid var(--line);
}
.deal-meta .meta-cell:last-child{ border-right:0; margin-right:0; }
.deal-meta .meta-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute-2);
}
.deal-meta .meta-value{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:13px; color:var(--ink); margin-top:3px; font-variant-numeric:tabular-nums;
}

/* ── The key card ────────────────────────────────────────────────────────
   The obligations screen's legend: each mark with its word and meaning. */
.key-card .key-row{
  display:flex; align-items:baseline; gap:10px; margin-top:9px;
}
.key-card .key-what{
  font-family:'Source Serif 4',Georgia,serif; font-style:italic;
  font-size:12px; color:var(--mute);
}

/* ── The redline legend ──────────────────────────────────────────────────
   The carbon-copy idiom, stated where the reader can see it. Deletions
   wear the superseded ink — struck and kept — never the error red: a
   supplier's deletion is a proposal, not a fault (meaning rule 1). */
.redline-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  font-family:'Courier Prime','Courier New',monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute);
}
.redline-ins{
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  background:color-mix(in oklch, var(--accent), transparent 92%);
}
.redline-del{
  color:var(--gone); text-decoration:line-through;
}
.anchor-flag{
  font-family:'Courier Prime','Courier New',monospace; font-size:10px;
  letter-spacing:.08em; color:var(--advice);
  border:1px solid color-mix(in oklch, var(--advice), transparent 55%);
  border-radius:2px; padding:1px 6px; background:#fdfbf2;
}

/* ── The wax seal ────────────────────────────────────────────────────────
   Decorative red is allowed HERE as an object, not as a status colour. */
.wax-seal{
  width:88px; height:88px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 34% 30%, #b5453a, #8e2f27 55%, #6f221c);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.25), inset 0 -3px 8px rgba(0,0,0,.4),
    0 3px 6px rgba(0,0,0,.35);
  color:#f3d9cf;
  font-family:var(--stamp-face);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  transform:rotate(-6deg);
}
.wax-seal > span{
  border:1.5px solid rgba(243,217,207,.6); border-radius:50%;
  width:72px; height:72px; display:flex; align-items:center; justify-content:center;
  padding:6px;
}

/* Small print standing on the wood at the door — hidden when the desk is
   too narrow to hold furniture beside the sheet. */
.desk-corner{ position:fixed; bottom:26px; left:30px; width:230px; }
@media (max-width:1100px){ .desk-corner{ display:none; } }
.desk-corner--right{ left:auto; right:30px; bottom:auto; top:90px; }

/* ── The footer facts strip ──────────────────────────────────────────────
   The deal room's foot: last act · what still waits. A dark plate set on
   the sheet's foot, wearing the desk ink. */
.foot-facts{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  background:linear-gradient(180deg, #3a2d1c, #2e2313);
  border:1px solid rgba(0,0,0,.5); border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,235,190,.08), 0 2px 0 rgba(0,0,0,.35);
  padding:2px 18px 4px;
}
.foot-facts .fact-cell{
  padding:10px 20px 12px 0; margin-right:20px;
  border-right:1px solid rgba(243,236,216,.15);
}
.foot-facts .fact-cell:last-child{ border-right:0; }
.foot-facts .fact-label{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:#a08d67;
}
.foot-facts .fact-value{
  font-size:12px; color:#e6dbbc; margin-top:4px; line-height:1.5;
}
.foot-facts .fact-value .font-mono{ font-size:11px; }

/* ── Controls you can hit, and see that you are in ────────────────────────
   BOTH OF THESE CORRECT `base.css`, WHICH CANNOT BE EDITED. It is v3's
   stylesheet kept byte for byte, and a test asserts it — so anything it got
   wrong is repaired here, in the sheet that loads last.

   1 · A FLOOR UNDER EVERY CONTROL.
   base.css gives inputs a border, a background and a font size, and NO
   padding. So a control's height came down to whether whoever wrote the line
   remembered to add some inline: 38 of the app's 100 controls did, in five
   different values, and 62 did not. The unpadded ones measured 19–23px
   against WCAG 2.2's 24px target-size minimum (2.5.8).

   `min-height` is the load-bearing half of this rule. The 38 sites that set
   `padding` inline override the padding but CANNOT override the floor, so all
   one hundred clear the minimum whether or not anybody remembered — and the
   convention now lives in the stylesheet instead of in a habit. */
input, select, textarea{
  padding:5px 9px;
  min-height:28px;
}

/* 2 · A FOCUS RING THAT EXISTS.
   base.css does `outline:none` and offers a 1px border-colour change in its
   place, which on cream paper against a --line-2 border is very close to
   nothing — and it is the only thing telling a keyboard user where they are.

   :focus-visible rather than :focus, so it answers the keyboard and does not
   ring every control somebody clicks. The offset keeps it clear of the
   control's own border, and it is drawn in the banker's-lamp green the rest
   of the desk already uses for "this is the live one". */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}
/* On the wood the green ring has nothing to sit against, so the chrome's
   controls take the desk's own cream. */
.masthead :focus-visible,
.footer-bar :focus-visible,
[data-testid="tab-row"] :focus-visible{
  outline-color:var(--desk-ink);
}
/* A row that opens something is a control, and reads as one when it has
   focus — the same cream sheet the pointer already gets on hover. */
tr[data-open="true"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px;
}

/* A settings row whose value will not fit beside its description gives the
   value the whole line. v4.css lays .waiting-row out as `1fr auto`, which is
   right for a chip and a date and wrong for a 569px comma list. */
.waiting-row--stacked{ grid-template-columns:1fr; align-items:start; }

/* ── A wide table scrolls itself ──────────────────────────────────────────
   The deal room's ledger is six columns and 486px at its narrowest; at 375px
   it pushed the whole PAGE sideways, which drags the masthead, the rack and
   every pane with it. A table that does not fit should scroll inside its own
   panel and leave the rest of the desk where it is.

   Unconditional, because `auto` draws a scrollbar only when one is needed —
   at 1440 nothing changes. */
.panel:has(table.ledger){ overflow-x:auto; }

/* The AI-use register is eight columns before a single model call exists.
   At 375px it widened the sheet from 336px to 634px and made the whole
   workspace scroll sideways. Keep each register inside its own card, as the
   deal-room ledger above does, so the page and its controls stay put. */
[data-testid="ai-use"] .panel:has(table){ overflow-x:auto; }

/* ── The chrome stays reachable at any width ──────────────────────────────
   Letting the masthead WRAP was not enough: the right-hand group is 438px of
   "desk of …" plus LEAVE THE DESK and carries `shrink-0`, so it wrapped onto
   its own line and ran off the edge anyway. At 375px the sign-out control was
   unreachable on every screen in the application.

   So below the point where the two halves stop fitting, the group is allowed
   to shrink and to wrap inside itself, and the "desk of" line is allowed to
   break. The BUTTON never shrinks — it is the thing this rule exists to keep
   on the page.

   Still not a claim to work on a phone. It is the smaller promise that a
   system which records every access lets you leave the desk. */
@media (max-width:820px){
  .masthead-right{
    flex-shrink:1; min-width:0; flex-wrap:wrap; justify-content:flex-end;
  }
  .masthead-right .desk-of{
    white-space:normal; overflow-wrap:anywhere; min-width:0;
  }
  .masthead-right .btn{ flex:0 0 auto; }
}

/* ── And so does the nameplate beside it ──────────────────────────────────
   The rule above repaired one half of the bar and left the other half alone.
   Measured in a real browser at 375px: the left-hand group reported
   `scrollWidth 343 / clientWidth 327` — 16px past the edge — on EVERY screen,
   because it is the masthead. Clean at 768, 1024 and 1440.

   SHRINKING IS NOT THE REPAIR HERE, which three measurements say and no
   amount of reading the class list would. `.registry-est` carries `shrink-0`
   and that looks like the answer; letting it shrink moved the number by
   NOTHING (343/327 before, 343/327 after), because the wordmark beside it is
   `white-space:nowrap` and floors itself at its own 210px content. Letting
   BOTH shrink got it to 333/327 — still over, and now squeezing letters that
   are meant to be read. So the group WRAPS, exactly as its neighbour does:
   the nameplate keeps its line and the workspace name drops beneath it, both
   at full size. 327/327, and the row gap is tightened so the second line
   costs 17px of bar rather than 31.

   `shrink-0` STAYS on the workspace name on purpose — once the group wraps,
   it is what stops that line squeezing on its own.

   Costs nothing above the breakpoint: at 768, 1024 and 1440 the group is
   343px inside a wider bar, nothing wraps, and the bar's height is unchanged. */
@media (max-width:820px){
  .masthead-left{ flex-wrap:wrap; row-gap:2px; }
}

/* ── A filter row you can still type in ───────────────────────────────────
   Search box and facet select sit on one line. At 375px the select took the
   room and the search input collapsed to TWENTY PIXELS — present, focusable,
   and useless. Below the point where both fit, they stack instead.

   `.list-filter` is on all six filter rows: the shared ListFilter, and the
   five panes that still carry their own copy of the logic (the library, the
   audit record, the access history, my deals and the review desk). The layout
   is shared even where the logic is not yet — which is the smaller half of
   that debt, and the half that was breaking. */
.list-filter{ flex-wrap:wrap; }
.list-filter > input{ flex:1 1 14rem; min-width:min(14rem,100%); }
.list-filter > select{ flex:0 1 auto; }

/* ── A waiting row says which kind of date it is showing ──────────────────
   cw.waiting_for() answers a DEADLINE (`due_on`, two of its twelve kinds) and
   a START (`since`, the other ten) in two columns, and the buyer home printed
   both bare under a column headed "Due" — so three envelopes sent three weeks
   ago read as three deadlines missed three weeks ago.

   The label and the overdue mark travel together on one line, and the whole
   group wraps rather than pushing the row sideways: this sits in the right-hand
   cell of a `1fr auto` grid, and an unwrappable group there is how a panel
   starts scrolling at 768. */
.waiting-when{
  display:inline-flex; align-items:center; gap:7px;
  flex-wrap:wrap; justify-content:flex-end; min-width:0;
}
.waiting-when-label{ white-space:nowrap; }
/* The chip inside a row is already 10px and uppercase; it must not inherit the
   monospace cell's letter-spacing on top of its own. */
.waiting-when .chip{ flex:0 0 auto; }

/* ── A proportion drawn over its own measured total ───────────────────────
   The panel's measurement board shows how a discipline's consultations ended:
   answered, waived, still open. Drawn as segments of ONE bar of fixed length
   rather than as a percentage, for the reason the board's own header gives —
   a percentage reads the same at four consultations as at four hundred, and
   the first is noise. Segment width is `flex-grow: <count>`, so the geometry
   IS the arithmetic and a reader can check it by looking.

   `--wait` is not a token base.css defines and must not be invented as a
   colour: the still-open band takes the muted ink every "nothing has happened
   yet" mark in this product already wears. */
.band-bar{
  display:flex; height:8px; width:100%; overflow:hidden;
  border:1px solid var(--line); background:var(--panel-2);
}
.band{ display:block; min-width:2px; }
.band-ok{   background:color-mix(in oklch, var(--ok), transparent 35%); }
.band-warn{ background:color-mix(in oklch, var(--accent-2), transparent 35%); }
.band-wait{ background:color-mix(in oklch, var(--mute-2), transparent 55%); }
/* The key beside the numbers, so the bar is readable without hovering it and
   without relying on colour alone — the counts are written out either way. */
.band-key{
  display:inline-block; width:9px; height:9px; margin-right:5px;
  border:1px solid var(--line); vertical-align:baseline;
}

/* ── A measured row on the panel board ───────────────────────────────────
   `.waiting-row` is a GRID of `1fr auto`, not a flex row — so `shrink-0` on
   the right-hand column was not merely unnecessary, it was the whole defect:
   an `auto` track sized to an email address, "decided by <name>" and a date
   took the line and squeezed the quoted opinion beside it to THIRTY-SIX pixels
   at 375px (measured: scrollWidth 99, clientWidth 36).

   Below the app's one media query the row becomes a single column and the
   aside falls underneath, which is `.waiting-row--stacked`'s shape and the
   same repair S323 named: a fix sized in pixels is a fix for the widths you
   tried, and a wrapping box holds an arbitrarily long value at every one. */
/* ── The person's own row keeps its own details (2026-08-25, S414) ────────
   MEASURED, BEFORE AND AFTER, at 1440 / 1024 / 768 / 375. `.waiting-row` is a
   grid of `1fr auto`: the control cluster is the `auto` track and takes what it
   needs, and the `1fr` beside it has no floor, so it goes to ZERO rather than
   the row overflowing. The row therefore measures 253/253 — perfectly clean —
   while the name, the address and the grant line beside it are not on the
   screen at all. An overflow check cannot see this: there is no overflow.

   INHERITED AT 375, MADE WORSE AT 768 BY THIS CHANGE, and both are said plainly
   because a leftover nobody names is found again as a defect:

     width   left column before   after adding the two address controls
      1440         853 / 559 / 525          705 / 450 / 416
      1024         641 / 347 / 313          493 / 238 / 204
       768         385 /  91 /  57          237 /   0 /   0     <- mine
       375           0 /   0 /   0            0 /   0 /   0     <- already so

   The repair is the one `.measure-row` below already uses, for the identical
   reason: below the app's own breakpoint the row becomes a single column and
   the controls fall underneath the person they act on. A width-sized floor
   would be a fix for the widths I happened to try; a stacked row holds any
   number of controls at every width.

   SCOPED TO THIS LIST, deliberately. `.waiting-row` is shared by many panes and
   restacking all of them is a change I could not sweep in one cycle — so the
   people list opts in by name, and the general question stays open rather than
   being answered silently for every pane at once. */
@media (max-width:1100px){
  .people-row{ grid-template-columns:1fr; align-items:start; }
  .people-row > .flex{ justify-content:flex-start; }
}

.measure-row{ align-items:start; }
.measure-aside{ min-width:0; text-align:right; }
@media (max-width:1100px){
  .measure-row{ grid-template-columns:1fr; }
  .measure-aside{ text-align:left; margin-top:6px; }
}

/* ── The deal list beside the deal's duties (obligations, "By agreement") ──
   Measured at 375px on 2026-09-05 (S481): the second track — the duties, the
   whole point of the section — was a 26px sliver beside the 230px list, its
   table scrolling inside a 24px window, and the page reported no overflow at
   all because nothing moved past the edge. An inline style cannot carry a
   media query, so the two tracks live here and collapse to one below the
   masthead's own breakpoint. `minmax(0,1fr)` stays on the single track for
   the same reason it was there beside the list: a table inside it must not
   force the track wider than the sheet (traps F13). */
.by-agreement-grid{ display:grid; gap:16px; grid-template-columns:230px minmax(0,1fr); }
@media (max-width:820px){
  .by-agreement-grid{ grid-template-columns:minmax(0,1fr); }
}

/* WHICH FIGURE IS NARROWING THE LIST. `.tile--drill` has said so since the
   library's figures became controls; `.stat-box--drill` did not, so the
   obligations strip — six toggles over one book — had no way to show which one
   was pressed. Same ink and same underline as the tile, because they are the
   same idea drawn in two sizes. */
.stat-box--drill[aria-pressed="true"]{
  background:var(--panel-2);
  border-color:var(--ink);
  box-shadow:inset 0 -3px 0 var(--ink);
}

/* A FILTER ROW'S SELECTS MUST BE ABLE TO SHRINK, AND THEN TO STACK.
   `flex: 0 1 auto` looks like it can shrink and cannot: a `<select>`'s default
   `min-width: auto` floors it at its own content, so the widest option decides.
   Measured on the requester's deal list at 375px when a third control joined
   the row: the order select sat at 187px inside a 116px row and ran off the
   edge with nothing to scroll it back.

   `min-width: 0` lets it shrink; below the app's one media query it takes the
   whole line instead, because a select squeezed to 116px shows a truncated
   option and a control whose value you cannot read is the defect S314 records
   about hard-coded widths. Wrapping beats squeezing at every width. */
.list-filter > select{ min-width:0; }
@media (max-width:1100px){
  .list-filter > select{ flex-basis:100%; }
}

/* A REFERENCE INSIDE A SENTENCE THAT OPENS THE THING IT NAMES. Used where a
   note lists engagement references in prose rather than in a row — a `<button>`
   because it opens a record inside this application rather than navigating
   anywhere, and monospace because every reference in this product is. It is
   underlined rather than coloured alone: colour is not a control in a product
   whose one accent already means something else. */
.link-mono{
  font-family:'JetBrains Mono', monospace; font-size:12.5px;
  color:var(--ink); text-decoration:underline; text-underline-offset:2px;
  background:none; border:0; padding:0; cursor:pointer;
}
.link-mono:hover{ color:var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════
   TODAY — the desk every role opens on (app/home.jsx).

   Four bands on one sheet: the role's way in, what is waiting, the areas of
   this workspace, and one composition. Nothing here introduces a colour or a typeface; it
   reuses the desk's own inks and the panel rules the rest of the sheet is
   built from.
   ═══════════════════════════════════════════════════════════════════════ */

/* A band is a section of the sheet with air above it and a hairline over
   the heading, so four stacked sections read as four questions rather
   than as one long page. The first band takes no rule — the page title's
   own double rule is directly above it. */
.desk-band{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.desk-band:first-of-type{ margin-top:20px; padding-top:0; border-top:0; }

/* THE FIRST-MORNING MAP. The left side says what this role is for and gives
   one obvious way into its work. The right side is a sequence of landmarks,
   not a second workflow engine: the record-specific screen decides progress.
   `minmax(0, ...)` lets both sides surrender width before a long role sentence
   can push the paper wider than the viewport. */
.role-guide{
  display:grid; grid-template-columns:minmax(210px, .8fr) minmax(0, 1.5fr);
  gap:24px; padding:18px; border:1px solid var(--line);
  background:var(--panel);
}
.role-guide-purpose{ min-width:0; }
.role-guide-purpose p{
  margin:8px 0 14px; font-family:'Libre Baskerville', serif;
  font-size:14px; line-height:1.55; color:var(--ink);
}
.role-guide-primary{ max-width:100%; white-space:normal; text-align:left; }
.journey-guide{
  list-style:none; margin:8px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(105px, 1fr)); gap:7px;
}
.journey-guide li{ min-width:0; }
.journey-guide button{
  width:100%; min-height:54px; padding:8px 9px; text-align:left;
  display:flex; align-items:flex-start; gap:8px;
  border:1px solid var(--line); background:var(--sheet); color:var(--ink);
  font-size:11.5px; line-height:1.35; cursor:pointer;
  transition:background .12s, border-color .12s;
}
.journey-guide button:hover{ background:var(--panel-2); border-color:var(--ink); }
.journey-guide button:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.journey-number{
  flex:0 0 auto; font-family:'JetBrains Mono', monospace; font-size:10px;
  color:var(--mute); border-bottom:1px solid var(--line-2);
}

@media (max-width:1100px){
  .role-guide{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:520px){
  .journey-guide{ grid-template-columns:1fr 1fr; }
}

/* THE CUSTOMER-SETUP CHECKLIST. Seven small answers, each independently
   evidenced. Cards wrap before their status badge can crush the explanation,
   and no fixed column count assumes an Administrator has a wide screen. */
.setup-summary{
  margin:8px 0 10px; padding:9px 11px; border-left:3px solid var(--accent);
  background:var(--panel); color:var(--ink); font-size:12.5px; line-height:1.5;
}
.setup-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(225px, 1fr)); gap:8px;
}
.setup-card{
  min-width:0; padding:12px; border:1px solid var(--line); background:var(--sheet);
}
.setup-card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; min-width:0;
}
.setup-card-head > div{ min-width:0; }
.setup-card-head .chip{ flex:0 0 auto; }
.setup-card p{
  margin:9px 0 10px; color:var(--mute); font-size:12px; line-height:1.55;
  overflow-wrap:anywhere;
}

@media (max-width:520px){
  .setup-grid{ grid-template-columns:1fr; }
  .setup-card-head{ flex-wrap:wrap; }
}

/* THE NARROWING CONTROLS. A chip that SETS a focus, as against `.chip-focus`
   which DROPS one — deliberately a different class, because the two do
   opposite things and one class doing both is how a control comes to look
   pressed when it is not. The pressed state is a filled plate, the same
   inversion the desk uses for a press-plate everywhere else, and it is
   announced with aria-pressed as well as drawn. */
.kind-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.kind-chip{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.02em;
  border:1px solid var(--line-2); background:var(--panel); color:var(--mute);
  padding:3px 9px; cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s, border-color .12s;
}
.kind-chip b{ font-weight:600; color:var(--ink); margin-left:6px; }
.kind-chip:hover{ border-color:var(--ink); color:var(--ink); }
.kind-chip.on{ background:var(--ink); border-color:var(--ink); color:var(--sheet); }
.kind-chip.on b{ color:var(--sheet); }
/* PAST ITS DATE IS AMBER AND CARRIES THE WORDS. Never red — red means error
   on this desk and an overdue obligation is not an error, it is a fact
   somebody has to act on. */
.kind-chip--late{ border-color:var(--accent-2); color:var(--accent-2); }
.kind-chip--late b{ color:var(--accent-2); }
.kind-chip--late.on{ background:var(--accent-2); border-color:var(--accent-2); color:var(--sheet); }
.kind-chip--late.on b{ color:var(--sheet); }

/* THE MAP OF THE WORKSPACE. auto-fill rather than a fixed column count, so
   the same grid holds nine cards on a laptop and three on a phone without a
   second breakpoint to keep in step. 190px is the width at which the
   longest area label still sits on one line. */
/* CARDS WITH AIR BETWEEN THEM, not a ledger block. Drawn first as a single
   grid whose 1px gaps were the hairlines — the trick `.tile-strip` uses — and
   it was wrong here for a reason a flex row never meets: a wrapping grid's
   LAST ROW is short, and the grid's own background painted the empty cells as
   a large filled slab that read as an area with something in it. Nine cards in
   a five-column grid drew four of them. Per-card borders leave the empty cells
   as what they are: paper. */
.desk-grid{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.area-card{
  background:var(--panel); border:1px solid var(--line); padding:12px 14px 14px;
  cursor:pointer; transition:background .12s, border-color .12s;
  display:flex; flex-direction:column; gap:6px;
}
.area-card:hover{ border-color:var(--line-2); }
.area-card:hover{ background:var(--panel-2); }
.area-card:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }
.area-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.area-label{
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink); font-weight:600;
}
.area-card:hover .area-label{ color:var(--accent); }
/* The count wears the same face and the same muted-zero rule as every other
   figure on this desk. An area with NO number renders an empty span rather
   than a nought — see the comment in home.jsx; they are different facts. */
.area-n{ font-family:'JetBrains Mono', monospace; font-size:19px; color:var(--ink); line-height:1; }
.area-n.none{ color:var(--mute-2); }
.area-note{ font-size:12px; line-height:1.5; color:var(--mute); }

/* The order control on the waiting band, in the panel head's right slot. */
.desk-band select{
  font-size:11.5px; padding:3px 6px; min-width:0;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
}

/* A HEALTH VERDICT THAT OPENS ITS WORKING. The row already reads as a list
   entry; this only says it can be pressed, in the same muted way the area
   cards on the desk do. The little marker beside the detail carries the
   state in a CHARACTER as well — nothing on this desk is said by colour or
   by a cursor alone. */
.health-row--drill{ cursor:pointer; transition:background .12s; }
.health-row--drill:hover{ background:var(--panel-2); }
.health-row--drill:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }


/* ── The reporting desk's own index ───────────────────────────────────────
   The reporting pane was one column, nine sections deep — 4,102px of content
   in a 559px viewport, measured on the Legal admin's screen. A report is
   CHOSEN now, and this is what it is chosen from: the same paper-plate idiom
   the navigation rack uses, one step quieter, because this picks a report
   within a screen rather than a screen within a workspace.

   APPENDED AT THE END OF THE FILE ON PURPOSE. A second session was live in
   this repository while it was written, and this file is on the
   high-collision list; a block at the end is the one edit that cannot
   conflict with a change made anywhere else in it. */
.report-picker{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:8px 0;
}
.report-picker .section-label{ color:var(--mute); margin-right:6px; }
.report-btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:2px;
  padding:5px 10px 6px; color:var(--mute); background:transparent;
}
.report-btn:hover{ color:var(--ink); border-color:var(--ink); }
/* THE CHOSEN ONE IS INKED, not merely tinted — the border thickens and the
   lettering goes bold, so which report you are reading survives greyscale
   exactly as the rack's open compartment does. */
.report-btn.open{
  color:var(--ink); font-weight:700;
  border-color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink);
  background:var(--panel);
}
.report-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* ── What a person has put away ───────────────────────────────────────────
   A shelf that is missing plates says so, on the shelf, with the way to get
   them back beside it. An area put away is still counted by its compartment
   and still offered by the jump box; this is the third place that stays
   honest — the shelf itself.

   APPENDED AT THE END for the reason the block above it was. */
.rack-shelf .shelf-away{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#a8946c; margin-left:8px; display:inline-flex; gap:5px; align-items:center;
}
.rack-shelf .link-btn{
  font-family:'Courier Prime','Courier New',monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#e4d6b0; background:transparent; border:none;
  border-bottom:1px solid rgba(217,201,164,.5); padding:0;
}
.rack-shelf .link-btn:hover{ color:#f7f0dd; }
/* The customise sheet's table sits on the same paper as the jump box. */
[data-testid="customise-table"] th{ padding:4px 6px; color:var(--mute); }
[data-testid="customise-table"] td{ padding:3px 6px; border-top:1px solid rgba(44,35,24,.12); }

/* ── A file input never wider than what holds it ──────────────────────────
   A file input carries an INTRINSIC width — the browser's own "Choose file"
   button plus room for a filename — and it ignores the container the way an
   image would not. Measured at 375px on the negotiation rounds strip: the
   control is 285px inside a 222px panel, and the panel overflowed by 112px.

   THIS WAS ALREADY TRUE OF THE REDLINE UPLOAD before a second file input was
   added beside it, so this is a repair and not only a precaution. It is here
   rather than on either call site because it is true of every file input this
   product will ever draw, and fixing it at one of two sites is how a rule
   ends up kept at some of its sites.

   `max-width` rather than `width`: at a comfortable width the control keeps
   its natural size, and only a container narrower than that constrains it. */
input[type="file"]{ max-width:100%; }

/* The masthead strapline (issue #221). The markup used to carry a responsive
   utility this build has no rules for, so the italic sentence saying what a
   workspace opens on had never been displayed to anybody, at any width. The
   intent that utility declared is written here as a real rule instead: hidden
   on narrow screens, shown from 768px up. The span keeps `truncate` and sits
   in a `min-w-0` parent, so at widths where it shows it shrinks rather than
   pushing the right-hand group off the page. */
.masthead-strapline{ display:none; }
@media (min-width: 768px){ .masthead-strapline{ display:block; } }

/* ── A SETTING'S KEY IS ONE UNBREAKABLE WORD (2026-08-31, #130) ──────────
   `.waiting-row` is a grid of `1fr auto`, and the `1fr` track takes its
   minimum from its content — except that the content here carries `min-w-0`,
   which drops that minimum to nought. The track is then free to collapse
   BELOW what it holds, and what it holds is a setting key: a mono identifier
   like `supersession_never_rewrites_a_contract` with no space, no hyphen and
   therefore no break opportunity anywhere in it. It cannot wrap, so it spills
   out of its own cell, through the panel, and drags the whole workspace
   sideways.

   MEASURED AT 375px, BEFORE AND AFTER, on the two panes that draw these rows
   (the workspace's own scrollWidth against its clientWidth):

     pane                        before      after
     #/governance  (legal_admin)  443/367    367/367
     #/settings    (administrator) 473/367   367/367

   Both halves are needed and each is doing a different job. `overflow-wrap`
   gives the key a break opportunity it does not otherwise have, which is what
   stops an ARBITRARILY long key overflowing at ANY width — a stacked row is
   still only 253px wide. The stack below the app's own breakpoint is what
   gives the key the full width to wrap into, rather than the 45px the
   collapsed track had left it. Neither is a pixel floor: both hold for a key
   nobody has written yet, which is the property S323 asked for.

   SCOPED BY NAME, for the reason `.people-row` above gives: `.waiting-row` is
   shared by many panes, and restacking all of them is a change nobody has
   swept. The three lists that draw a setting key opt in. */
.setting-key{ overflow-wrap:anywhere; }
@media (max-width:1100px){
  .setting-row{ grid-template-columns:1fr; align-items:start; }
  /* WRAPS, because the cluster is a value box AND a save button. The box is
     sized to its own value on purpose (`clamp(12ch, …, 46ch)` — an
     administrator was once editing a 569-character list through 108px), so it
     is the button that must be free to fall underneath. Without this the two
     together were 264px in a 253px row: measured 369/367 on #/settings at
     375px with the stack alone, 367/367 with the wrap. */
  .setting-row > .flex{ justify-content:flex-start; flex-wrap:wrap; }
}

/* ── A SECTION HEAD'S RIGHT-HAND CONTROL MUST BE ABLE TO FALL (2026-08-31, #222)
   `PanelHead` draws a flex row of two: the title block, and whatever the pane
   passes as `right` — usually a chip or a narrowing control. The row could not
   wrap, and `.kind-chip` carries `white-space:nowrap`, so the chip's own text
   was the floor: at 375px the administrator's "only areas carrying work" chip
   measured 203px beside a 76px title in a 255px row — 279 into 255.

   THIS IS THE SIBLING'S OWN FIX, not a new idea. `.sheet-head` above — the
   PaneHead equivalent, three inches up this file — has carried `flex-wrap:wrap`
   and a gap since it was written; `PanelHead` simply never got it. Matching
   them is what stops the same reading coming back on the next pane that passes
   a `right`.

   Measured at 375px on the administrator's landing page, before and after:
   the `.desk-band` section and this row both 279/255, and both 255/255 after.
   Swept at 1440 / 1024 / 768 / 375 for the reverse: with slack in the row a
   `justify-content:space-between` row is unmoved by a gap, so the wide
   layouts are byte-identical. */
.panel-head-row{ flex-wrap:wrap; gap:12px; }

/* ── THE WAITING LIST'S LEFT COLUMN WENT TO NOUGHT (2026-08-31, #222) ────
   The fourth time this exact shape has been repaired in this file, after
   `.people-row`, `.measure-row` and `.setting-row`. `.waiting-row` is a grid
   of `1fr auto`; the aside carries `shrink-0` and takes what it needs; the
   `1fr` beside it has `min-w-0` and therefore no floor at all. On the
   requester's desk at 375px the grid measured `0px 253.938px` — the title
   and the agreement id were not merely clipped, they had NO WIDTH, and the
   aside still wanted 254 in a 253 row.

   THE COMMENT ON `.people-row` LEFT THIS QUESTION OPEN, deliberately, saying
   restacking every pane that shares `.waiting-row` was a change nobody could
   sweep in one cycle. The reason it could not be swept was that the seeded
   database had no deals, tickets or rounds in it, so the rows never drew.
   With `seed_portfolio` loaded (48 agreements, 36 negotiations, 72 tickets)
   they do, and the sweep is in the pull request.

   SCOPED TO `WaitingList`, still not to every `.waiting-row`: this is the
   shared component whose own comment counts what it reaches — 72 rows on
   Legal's review desk, 72 on the Legal admin's, 36 on the requester's
   negotiations, 12 in the reading room. Panes that hand-roll a `.waiting-row`
   are not touched and are named in the pull request as left.

   Measured at 375px on the requester's desk, before and after:
   `.waiting-row` 253/284 -> 253/253, and the left column 0px -> 253px, which
   is the half an overflow check cannot see. */
@media (max-width:1100px){
  .waiting-list-row{ grid-template-columns:1fr; align-items:start; }
  .waiting-list-row > .flex{ justify-content:flex-start; flex-wrap:wrap; margin-top:6px; }
}

/* ── ONE CHIP CAN BE WIDER THAN THE ROW THAT WRAPS THEM (2026-08-31, #222)
   `.kind-row` already wraps BETWEEN chips, which is why the strip has never
   overflowed before. It cannot help when a SINGLE chip is wider than the row:
   "an envelope is out for signature 3" measured 258 in a 255px strip, because
   `.kind-chip` carries `white-space:nowrap` and its own text is its floor.
   Below the app's breakpoint the label may take a second line instead — the
   chip is a control, not a table cell, and a control that runs off the screen
   cannot be pressed. Unchanged above 1100px, where no chip has ever been
   close to the width of its strip. */
@media (max-width:1100px){
  .kind-chip{ white-space:normal; max-width:100%; }
}

/* A tilted sheet needs spare canvas around every corner. The phone workspace
   has none: at 375px the shared 367px sheet measured 370px after rotation and
   made otherwise-contained panes slide sideways. Keep the paper metaphor on
   widths that have room for it; on the narrow layout, keep the whole sheet in
   the viewport, including while it enters. */
@media (max-width:1100px){
  .sheet-main{ transform:none; --rot:0deg; animation:none; }
}

/* ── THE PIPELINE STRIP HAD ONE COLUMN PER STAGE AND NO WAY TO WRAP ──────
   (2026-08-31, found while sweeping #222 with a seeded portfolio.)
   `.stage-strip` is `grid-auto-flow:column` with `grid-auto-columns:1fr`, so
   it lays one column per pipeline stage however many there are and however
   narrow the page. On the requester's Buyer Home at 375px that measured
   253/717 and took the whole workspace to 786/367 — the worst reading found
   in this sweep, and the page genuinely slid sideways.

   NOT part of issue #222, which is about the six LANDING pages; this is
   `#/my-deals`. Found because `seed_portfolio` finally put 36 deals behind
   the strip. Pre-existing and attributed by removal: neutering every rule
   this branch adds leaves 786/367 exactly, so none of it is mine.

   Below the app's breakpoint the stages flow into rows instead, two to a
   line at 375px. The cards stay equal width, which is the point of the strip
   — figures are compared — and the separating rule moves with them. */
@media (max-width:1100px){
  .stage-strip{
    grid-auto-flow:row;
    grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  }
  .stage-card{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stage-card:last-child{ border-right:0; border-bottom:0; }
  /* AND THE MARK MUST BE ABLE TO BREAK. Equal columns are the point of the
     strip, so a card cannot widen to fit its own mark: at 768 the columns
     came out at 109px and `terminated` wanted 94 in an 85px content box.
     Caught by measuring my own rule against its absence — without it the
     cards size unequally (100/91/112/118) and the mark happens to fit while
     the STRIP overflows instead, which is the worse of the two.
     A break opportunity rather than a pixel floor on the column: a floor
     would be a fix for the labels that exist today, and the ladder's marks
     are customer content that can be any word at all. */
  .stage-card .stage-mark{ overflow-wrap:anywhere; }
}
/* Legal compares the source with an independently written draft. Keep both
   columns readable; long source text has its own keyboard-accessible scroll.
   No sticky ancestor or fixed-height page can hide the supporting evidence. */
.review-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.review-reference, .review-decision { min-width: 0; }
.review-source { max-height: 20rem; overflow: auto; }
.review-literal { white-space: pre-wrap; overflow-wrap: anywhere; }
.review-editor { min-height: 16rem; resize: vertical; }
.review-identifiers > div { min-width: 0; }
@media (min-width: 960px) {
  .review-workbench { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .review-decision { border-left: 1px solid var(--line); padding-left: 1.5rem; }
}
@media (max-width: 479px) {
  .review-identifiers { grid-template-columns: minmax(0, 1fr); }
}
/* Execution evidence: every field remains reachable on the narrow desk. */
.execution-filing { overflow-wrap: anywhere; }
.execution-filing .flex { flex-wrap: wrap; }
.execution-filing .flex > .flex-1 { flex: 1 1 150px; min-width: 0; }
.execution-filing input { min-width: 0; max-width: 100%; }
/* A finding's reasoning stays readable beside its own decision controls. */
.override-finding-actions { flex-wrap: wrap; align-items: flex-start; }
.override-finding-note { flex: 1 1 20rem; min-width: 0; max-width: 100%; resize: vertical; }
.override-finding-actions .btn { max-width: 100%; white-space: normal; }
/* Promotion is a full-width review of immutable wording, not a squeezed row form. */
.promotion-row { display: flex; flex-wrap: wrap; align-items: flex-start; overflow-wrap: anywhere; }
.promotion-summary { flex: 1 1 24rem; min-width: 0; }
.promotion-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.promotion-actions .btn { white-space: normal; max-width: 100%; }
.promotion-review { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.promotion-wording { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65;
  padding: 16px; border-left: 3px solid var(--ink); background: var(--paper); }
.promotion-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.promotion-review input, .promotion-review textarea { min-width: 0; max-width: 100%; }
/* A proposal's exact words and approval steps stay full-width on a phone. */
.concession-proposal, .concession-proposal-editor { min-width: 0; max-width: 100%; }
.new-negotiation-point .concession-field { flex: 1 1 15rem; }
.new-negotiation-point .btn { white-space: normal; max-width: 100%; }
.concession-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.concession-field input, .concession-field select, .concession-field textarea {
  min-width: 0; width: 100%; max-width: 100%; }
.concession-field textarea { resize: vertical; }
.concession-wording { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.concession-approval-note { padding: 12px; border-left: 3px solid var(--accent); background: var(--paper); }
.concession-proposal .btn, .concession-approval-note .btn,
[data-testid="settle-or-withdraw"] .btn { white-space: normal; max-width: 100%; }
@media (max-width: 767px) {
  .promotion-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Customer-paper onboarding keeps long originals and forms within the pane. */
.co-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; margin-top:24px; }
.co-workspace .panel { padding:20px; }
.co-workspace h3 { margin-bottom:12px; }
.co-workspace .caption { max-width:none; }
.co-columns > div, .co-fields > *, .co-upload > * { min-width:0; }
.co-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.co-signatories { grid-column:1/-1; }
.co-field, .co-upload label { display:flex; flex-direction:column; gap:6px; font-size:13px; }
.co-field input,.co-field select,.co-upload input,.co-upload select { width:100%; max-width:100%; box-sizing:border-box; padding:9px; border:1px solid #b9b2a5; border-radius:4px; background:#fffdf8; color:#28261f; }
.co-upload { display:flex; align-items:end; flex-wrap:wrap; gap:16px; margin:16px 0; }
.co-upload label { flex:1 1 220px; }
.co-source { max-height:650px; overflow:auto; border:1px solid #b9b2a5; padding:16px; }
.co-source p { white-space:pre-wrap; overflow-wrap:anywhere; }
.co-source section + section { margin-top:24px; }
.co-detail { margin-top:24px; overflow-wrap:anywhere; }
.co-hash { overflow-wrap:anywhere; }
.co-confirm { display:flex; align-items:start; gap:8px; margin:16px 0; }
.co-confirm input { margin-top:3px; flex:none; }
.co-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.co-card { display:flex; flex-direction:column; gap:8px; text-align:left; background:#fffdf8; color:#28261f; border:1px solid #b9b2a5; border-radius:5px; padding:16px; cursor:pointer; overflow-wrap:anywhere; }
.co-card span { font-size:12px; }
.co-card:focus-visible { outline:2px solid #765535; outline-offset:3px; }
@media(max-width:1024px) { .co-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) { .co-columns { grid-template-columns:minmax(0,1fr); } .co-source { max-height:400px; } }
@media(max-width:480px) { .co-fields,.co-cards { grid-template-columns:minmax(0,1fr); } }