/* =============================================================
   REVIEWED — Abdallah Elraai, case file
   High-Craft Archival Publishing

   1. Fonts          — self-hosted, latin subset, no external calls
   2. Tokens         — §3 palette, type scale, depth, motion
   3. UV theme       — feature 15, forensic dark variant
   4. Base
   5. Sheet + gutter
   6. Masthead       — §6.1
   7. Controls       — audit toggle, UV toggle, persona switcher
   8. Cover / hero   — §7.2
   9. Tracked change — §6.4
  10. Exhibit stack
  11. Audit mode     — feature 1
  12. Motion + reduced motion
  13. Responsive
  14. Print          — feature 23 (court filing)
   ============================================================= */

/* --- 1. Fonts ------------------------------------------------ */

@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-roman.woff2") format("woff2");
  font-weight:400 600;          /* variable wght axis */
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-italic.woff2") format("woff2");
  font-weight:400 600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/plex-mono-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

/* --- 2. Tokens ----------------------------------------------- */

:root{
  --paper:#F1EFEA; --paper-raised:#FFFFFF; --paper-border:rgba(26,26,23,0.09);
  --paper-shadow:0 4px 24px rgba(26,26,23,0.05);
  --ink:#1A1A17; --ink-soft:#63625B; --ink-faint:#C2C0B6;
  --redline:#D6262F; --stamp:#2B3A67; --verified:#2E7E57; --plum:#6D4AA0;
  --highlighter:rgba(252,228,91,0.35);
  --pass:var(--redline);        /* swapped dynamically per review pass */

  /* Small-text siblings. The §3 marks are tuned for strikes, seals and
     large figures — all fine at the 3:1 large-text threshold. But on the
     deepened #F1EFEA stock, --redline lands at 4.37:1 and --verified at
     4.31:1, so anything under 24px uses these 2-3% darker variants to
     hold WCAG AA (§11). Never use them for rules, seals or strikes. */
  --redline-ink:#D2252E;        /* 4.52:1 on paper, 5.19:1 on raised */
  --verified-ink:#2D7A54;       /* 4.54:1 on paper, 5.22:1 on raised */
  --pass-ink:var(--redline-ink);

  /* The apparatus bottoms out at 9px and 10px. That reads fine on a
     monitor and is too small on a phone, so both are tokens and both
     step up under 760px. The .shell illustration deliberately uses
     smaller literal sizes and is unaffected. */
  --fs-micro:.5625rem;   /* 9px  → 11px on mobile */
  --fs-mini:.625rem;     /* 10px → 11px on mobile */

  --font-serif:"Newsreader",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  --maxw:1140px;
  --gutter:clamp(64px,10vw,180px);

  /* derived — not in §3, needed to build with */
  --gutter-gap:clamp(18px,2.2vw,34px);
  --edge:clamp(20px,4vw,44px);
  --rule:rgba(26,26,23,0.09);
  --margin-rule:rgba(214,38,47,0.16);
  --paper-sunk:#E8E6E0;
  --measure:65ch;

  --lift-1:0 1px 0 rgba(26,26,23,.04), 0 2px 8px -4px rgba(26,26,23,.14);
  --lift-2:var(--paper-shadow);
  --lift-3:0 2px 0 rgba(26,26,23,.04), 0 26px 54px -28px rgba(26,26,23,.34);

  --t-fast:170ms; --t-base:400ms; --t-slow:700ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-pen:cubic-bezier(.62,.02,.28,1);
  --ease-press:cubic-bezier(.2,1.5,.42,1);

  --glow:none;                  /* UV only */
}

/* --- 3. UV forensic theme (feature 15) ----------------------- */
/* Not "dark mode with a filter" — a UV inspection lamp over the
   same file. Phosphor redlines, indigo stock, wireframe rules. */

[data-theme="uv"]{
  --paper:#0F1220; --paper-raised:#171B2C; --paper-sunk:#12162494; --paper-border:rgba(150,175,255,0.16);
  --paper-shadow:0 4px 28px rgba(0,0,0,0.5);
  --ink:#E9EAF2; --ink-soft:#A2A7C0; --ink-faint:#454B66;
  --redline:#FF5560; --stamp:#8FAAFF; --verified:#49E6A0; --plum:#BE8CFF;
  --highlighter:rgba(252,228,91,0.20);
  --rule:rgba(150,175,255,0.14);
  --margin-rule:rgba(255,85,96,0.30);
  --lift-1:0 1px 0 rgba(0,0,0,.3), 0 2px 10px -4px rgba(0,0,0,.5);
  --lift-2:0 4px 24px rgba(0,0,0,.45);
  --lift-3:0 2px 0 rgba(0,0,0,.3), 0 26px 54px -28px rgba(0,0,0,.7);
  --glow:0 0 12px currentColor;
  /* under UV the phosphor marks already clear AA (5.96:1 / 11.63:1) */
  --redline-ink:var(--redline);
  --verified-ink:var(--verified);
  --pass-ink:var(--redline);
}

/* --- 4. Base -------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:7rem;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:1.125rem;
  line-height:1.65;
  font-optical-sizing:auto;
  overflow-x:clip;
  transition:background-color var(--t-base) ease, color var(--t-base) ease;
}

/* bond-paper tooth — above the stock, below the ink */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="uv"] body::before{opacity:.07}
.masthead,main{position:relative; z-index:1}

p{margin:0 0 1.1em}
h1,h2,h3{margin:0; font-weight:500}

::selection{background:var(--highlighter); color:var(--ink)}

:focus-visible{
  outline:2px solid var(--stamp);
  outline-offset:3px;
  border-radius:1px;
}

.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.svg-defs{position:absolute; width:0; height:0; overflow:hidden}

.skip-link{
  position:fixed; left:var(--edge); top:-100px; z-index:100;
  background:var(--paper-raised); color:var(--ink);
  border:1px solid var(--ink); padding:.55rem .9rem;
  font-family:var(--font-mono); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em; text-decoration:none;
  transition:top var(--t-fast) ease;
}
.skip-link:focus{top:.6rem}

/* mono apparatus — §4 */
.eyebrow,.note,.docket,.clock,.personas,.ctl,.stack__acc,.stack__meta,
.stack__figure,.stack__cap,.brief,.drafting{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
.eyebrow{
  font-size:.75rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 clamp(1.1rem,2.6vh,1.8rem);
}

a{color:var(--stamp); text-underline-offset:.18em; text-decoration-thickness:1px}
a:hover{color:var(--redline)}

/* Only two families ship (§4). These elements carry UA defaults —
   <code> falls back to bare monospace, form controls to Arial — so
   they are pinned explicitly rather than left to the browser. */
code,kbd,samp,pre{font-family:var(--font-mono)}
input,button,select,textarea{font-family:inherit}

/* --- 5. Sheet + gutter --------------------------------------- */

.sheet{
  position:relative;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--edge);
  display:grid;
  grid-template-columns:var(--gutter) minmax(0,1fr);
  column-gap:var(--gutter-gap);
}
/* the ruled margin of the stock */
.sheet::before{
  content:"";
  position:absolute; top:0; bottom:0;
  left:calc(var(--edge) + var(--gutter) + (var(--gutter-gap) / 2));
  width:1px; background:var(--margin-rule);
}
.gutter{position:relative; text-align:right; padding-right:.15rem}
.col{min-width:0}

.drafting{
  display:block;
  font-size:1.05rem; font-weight:500;
  color:var(--ink-soft);
  padding-top:.35em;
}

/* --- 6. Masthead — §6.1 -------------------------------------- */

.masthead{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.08) blur(10px);
  -webkit-backdrop-filter:saturate(1.08) blur(10px);
}
.masthead__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:.6rem var(--edge) .55rem;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"id controls" "nav aside";
  align-items:center;
  gap:.4rem 1.5rem;
}
.masthead__rule{height:1px; background:var(--rule)}

.masthead__id{grid-area:id; min-width:0}
.masthead__name{
  display:inline-flex; align-items:center; min-height:24px;
  font-family:var(--font-serif);
  font-weight:600; font-size:1rem; line-height:1.1;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.masthead__strip{
  display:flex; flex-wrap:wrap; gap:.45em;
  margin:.25rem 0 0;
  font-family:var(--font-mono);
  font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
}
.masthead__strip .sep{color:var(--ink-soft)}

.masthead__controls{
  grid-area:controls;
  display:flex; align-items:center; justify-content:flex-end;
  gap:.45rem; flex-wrap:wrap;
}

.clock{
  margin:0; display:flex; align-items:baseline; gap:.35em;
  font-size:.6875rem; font-weight:500; letter-spacing:.05em;
  color:var(--ink-soft); white-space:nowrap;
}
.clock__z{font-size:var(--fs-micro); color:var(--ink-soft)}

/* --- 7. Controls --------------------------------------------- */

.ctl{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .7rem;
  background:transparent;
  border:1px solid var(--paper-border);
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease,
             background-color var(--t-fast) ease;
}
.ctl:hover{color:var(--ink); border-color:var(--ink-faint)}
.ctl__bolt{font-size:.8em; line-height:1}

.ctl--audit[aria-pressed="true"]{
  background:var(--ink); border-color:var(--ink); color:var(--paper-raised);
}
.ctl--audit[aria-pressed="true"] .ctl__bolt{color:var(--highlighter)}

/* UV lamp: the pip fills when the lamp is on */
.ctl__uv{
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid currentColor;
  transition:background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
[data-theme="uv"] .ctl__uv{
  background:var(--plum); border-color:var(--plum);
  box-shadow:0 0 9px var(--plum);
}
[data-theme="uv"] .ctl--icon{color:var(--plum); border-color:var(--plum)}

/* persona switcher */
.personas{
  display:flex; align-items:center; flex-wrap:wrap; gap:.3rem;
  padding-top:.15rem;
}
.personas__lede{
  font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-right:.35rem;
}
.personas [role="radio"]{
  appearance:none; cursor:pointer;
  background:transparent; border:0;
  border-bottom:1.5px solid transparent;
  min-height:24px; display:inline-flex; align-items:center; justify-content:center;
  min-width:24px;
  padding:.25rem .2rem;
  margin-right:.9rem;
  font-family:var(--font-mono);
  font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.personas [role="radio"]:hover{color:var(--ink)}
.personas [role="radio"][aria-checked="true"]{
  color:var(--redline-ink); border-bottom-color:var(--redline);
}

/* --- 8. Cover / hero — §7.2 ---------------------------------- */

.cover{
  padding-top:clamp(3rem,9vh,6rem);
  padding-bottom:clamp(3.5rem,10vh,7rem);
}
.cover .sheet{
  grid-template-columns:var(--gutter) minmax(0,1.05fr) minmax(0,.75fr);
  align-items:start;
}
.cover__body{max-width:none}

.statement{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(2.35rem,5.2vw,4.2rem);
  line-height:1.0;
  letter-spacing:-.021em;
  margin:0 0 clamp(1.4rem,3.4vh,2.2rem);
  text-wrap:balance;
}
.statement ins{display:block; margin-top:.1em; text-decoration:none; color:var(--ink)}
.statement ins em{font-style:italic; font-weight:400}
.statement + .note{margin-top:0}
.statement__caret{
  display:inline-block; margin-right:.2em;
  font-family:var(--font-mono); font-size:.3em; font-weight:600;
  line-height:1; vertical-align:.5em; color:var(--redline-ink);
}

/* monospaced bracket annotation — replaces the handwriting voice (§4) */
.note{
  max-width:var(--measure);
  margin:1.8em 0 1.5em;
  padding-left:.9rem;
  border-left:2px solid var(--stamp);
  font-size:.8125rem; font-weight:500;
  line-height:1.6; letter-spacing:.01em;
  color:var(--stamp);
}
.note__key{font-weight:600; margin-right:.5em; opacity:.75}

.lede{max-width:var(--measure); font-size:1.125rem; line-height:1.65}

/* The switcher lives on the panel it controls, so cause and effect are
   adjacent instead of a masthead control with its only visible result
   1,200px further down the page. */
/* --- how to read this file ------------------------------------
   The homepage is ~8,500px on a desktop and ~11,000px on a phone.
   That is fine for a document and not fine as a surprise, so the
   choice is stated at the top with honest times against it. --- */

.routes{
  max-width:var(--measure); margin:0 0 1.7em;
  padding-top:.9rem; border-top:1px solid var(--ink-faint);
}
.routes__lede{
  margin:0 0 .55rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.routes__list{list-style:none; margin:0; padding:0}
.routes__list li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem;
  padding:.42rem 0; border-bottom:1px solid var(--rule);
}
.routes__go{
  display:inline-flex; align-items:center; gap:.4rem; min-height:24px;
  margin:0; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--font-serif); font-size:1rem; font-weight:500;
  letter-spacing:-.005em; color:var(--ink); text-align:left; text-decoration:none;
  border-bottom:1px solid var(--redline); padding-bottom:1px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.routes__go i{font-style:normal; font-size:.75em; color:var(--redline-ink)}
.routes__go:hover{color:var(--redline-ink)}
.routes__go[aria-pressed="true"]{border-bottom-color:var(--verified)}
.routes__go[aria-pressed="true"] i{color:var(--verified-ink)}
.routes__t{
  font-family:var(--font-mono); font-size:var(--fs-mini);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  margin-left:auto; text-align:right;
}
@media (max-width:520px){
  .routes__t{margin-left:0; text-align:left; flex-basis:100%}
}
/* in audit mode the routes are apparatus, not prose — keep them lit */
[data-audit="on"] .routes{opacity:1}

.brief{
  max-width:var(--measure);
  margin:0 0 1.6em;
  padding:.7rem .9rem .85rem;
  background:var(--highlighter);
  font-size:.8125rem; line-height:1.6;
  color:var(--ink);
}
.brief__text{margin:0}
.brief .personas{
  margin:0 0 .5rem; padding-bottom:.45rem;
  border-bottom:1px solid rgba(26,26,23,.14);
}
.brief .personas__lede{color:var(--ink-soft)}
.brief .personas [role="radio"]{color:var(--ink-soft)}
.brief .personas [role="radio"]:hover{color:var(--ink)}
/* On the highlighter panel, redline text only reaches 4.32:1. The
   underline carries the selected signal instead, so the label can stay
   at full ink and clear AA in both themes. */
.brief .personas [role="radio"][aria-checked="true"]{
  color:var(--ink); border-bottom-color:var(--redline); border-bottom-width:2px;
}
.brief__tag{
  display:block; margin-bottom:.25rem;
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft);
}
.brief b{font-weight:600}

.cover__actions{display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 clamp(2rem,5vh,3rem)}

.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.1rem;
  border:1px solid var(--ink);
  background:var(--paper-raised);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:color var(--t-base) var(--ease-out), border-color var(--t-base) ease;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--ink);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-base) var(--ease-out);
}
.btn > *{position:relative; z-index:1}
.btn:hover{color:var(--paper-raised)}
.btn:hover::before{transform:scaleX(1)}
.btn i{font-style:normal; transition:transform var(--t-base) var(--ease-out)}
.btn:hover i{transform:translateX(3px)}
.btn--ghost{border-color:var(--ink-faint); background:transparent}
.btn--ghost::before{background:var(--stamp)}
.btn--ghost:hover{border-color:var(--stamp)}

.docket{
  margin:0;
  border-top:1px solid var(--rule);
  font-size:.6875rem; letter-spacing:.04em;
}
.docket__row{
  display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--rule);
}
.docket dt{text-transform:uppercase; font-weight:500; color:var(--ink-soft)}
.docket dd{margin:0; color:var(--ink)}
.docket .ok{color:var(--verified-ink); font-weight:600}

/* --- 9. Tracked change — §6.4 -------------------------------- */
/* percentages keep the stroke on the x-height centre at every clamped
   size; box-decoration-break keeps it whole across a line wrap. */

del{
  text-decoration:none;
  color:var(--ink-soft);
  padding-inline:.05em; margin-inline:-.05em;
  background-image:
    linear-gradient(to right,var(--redline),var(--redline)),
    linear-gradient(to right,rgba(214,38,47,.5),rgba(214,38,47,.5));
  background-repeat:no-repeat;
  background-position:0 61%, 0 63%;
  background-size:100% .05em, 97% .02em;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}
.statement del{display:inline}
ins{text-decoration:none}

/* --- 10. Exhibit stack --------------------------------------- */

.cover__stack{padding-top:.5rem}

.stack{
  position:relative;
  height:clamp(270px,30vw,330px);
  margin-bottom:3.1rem;   /* sheets translateY up to 26px past the box */
  perspective:1400px;
}
.stack__sheet{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:1.15rem 1.25rem;
  background:var(--paper-raised);
  border:1px solid var(--paper-border);
  box-shadow:var(--lift-2);
  text-decoration:none; color:var(--ink);
  transform-origin:50% 100%;
  transition:transform var(--t-slow) var(--ease-out),
             box-shadow var(--t-slow) var(--ease-out);
}
.stack__sheet--back{
  transform:translateY(26px) rotate(-3.1deg) scale(.955);
  box-shadow:var(--lift-1);
}
.stack__sheet--b{transform:translateY(14px) rotate(1.9deg) scale(.978)}
.stack__sheet--a{transform:translateY(0) rotate(-.7deg)}

/* riffle: the hovered sheet lifts clear of the stack */
.stack__sheet--b:hover,.stack__sheet--b:focus-visible{
  transform:translateY(-6px) rotate(3.4deg) scale(1);
  box-shadow:var(--lift-3); z-index:3;
}
.stack__sheet--a:hover,.stack__sheet--a:focus-visible{
  transform:translateY(-10px) rotate(-2deg) scale(1.012);
  box-shadow:var(--lift-3); z-index:3;
}
.stack:hover .stack__sheet--a:not(:hover){transform:translateY(6px) rotate(-3.6deg) scale(.985)}

.stack__acc{
  font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--pass-ink);
}
.stack__sheet--b{--pass:var(--stamp)}
.stack__name{
  margin-top:.45rem;
  font-family:var(--font-serif);
  font-size:1.6rem; font-weight:500; line-height:1.05;
  letter-spacing:-.015em;
}
.stack__meta{
  margin-top:.3rem;
  font-size:var(--fs-mini); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* The sheet is tall enough to riffle convincingly, which left ~200px of
   empty paper in the middle. Filling it with the one device the whole
   identity rests on: the argument, in one line, before the number. */
.stack__tc{
  margin-top:1.1rem; display:block;
  font-family:var(--font-serif); line-height:1.3;
}
.stack__tc del{
  display:block; width:max-content; max-width:100%;
  text-decoration:none; color:var(--ink-soft);
  font-size:.9rem; padding-inline:.05em;
  background-image:linear-gradient(var(--redline),var(--redline));
  background-repeat:no-repeat; background-position:0 58%; background-size:100% 1.5px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.stack__tc ins{
  display:block; margin-top:.22rem; text-decoration:none;
  font-size:1.02rem; font-weight:500; letter-spacing:-.012em;
}
.stack__tc ins::before{
  content:"→ "; color:var(--redline-ink);
  font-family:var(--font-mono); font-size:.72em;
}

.stack__figure{margin-top:auto; display:flex; align-items:baseline; gap:.6rem}
.stack__figure b{font-size:1.9rem; font-weight:600; line-height:1; letter-spacing:-.02em}
.stack__figure i{
  font-style:normal; font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); max-width:12ch; line-height:1.4;
}
.sign-cut  b{color:var(--redline)}
.sign-gain b{color:var(--verified)}
.sign-ref  b{color:var(--stamp)}

/* Docked to the foot of the sheet, opposite the figure: a stamp goes at
   the bottom of a page, and it balances the number instead of crowding
   the accession line. */
.stack__seal{
  position:absolute; right:1.1rem; bottom:1.1rem;
  width:58px; color:var(--verified); opacity:.85;
  transform:rotate(-9deg);
}
.stack__seal svg{display:block; width:100%; height:auto}
.seal-mini__word{
  font-family:var(--font-mono); font-size:15px; font-weight:600;
  fill:currentColor; text-anchor:middle; letter-spacing:.04em;
}

.stack__cap{
  margin:.9rem 0 0; text-align:right;
  font-size:var(--fs-micro); letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* --- 11. Audit mode (feature 1) ------------------------------ */
/* Prose recedes; findings, exhibits and deliverables stay lit. */

[data-audit="on"] [data-prose]{
  opacity:.2;
  filter:saturate(.2);
}
[data-audit="on"] [data-signal],
[data-audit="on"] .stack,
[data-audit="on"] .statement{
  opacity:1;
}
[data-audit="on"] [data-signal]{
  background:var(--highlighter);
  box-shadow:0 0 0 .55rem var(--highlighter);
}
[data-audit="on"] .stack__figure b{
  text-shadow:var(--glow);
}
[data-prose]{transition:opacity var(--t-base) ease, filter var(--t-base) ease}
[data-signal]{transition:background-color var(--t-base) ease, box-shadow var(--t-base) ease}

/* --- 12. Motion ---------------------------------------------- */

.js .statement del{transition:background-size var(--t-slow) var(--ease-pen)}
.js .statement:not(.is-marked) del{background-size:0 .05em, 0 .02em}
.js .statement ins{
  transition:opacity var(--t-base) ease 260ms, transform var(--t-base) var(--ease-pen) 260ms;
}
.js .statement:not(.is-marked) ins{opacity:.3; transform:translateY(.12em)}

.js [data-reveal]{
  opacity:0; transform:translateY(14px);
  transition:opacity var(--t-slow) var(--ease-out) calc(var(--i,0) * 65ms),
             transform var(--t-slow) var(--ease-out) calc(var(--i,0) * 65ms);
}
.js [data-reveal].is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
  }
  .js [data-reveal]{opacity:1; transform:none}
  .stack__sheet:hover{transform:none !important}
}

/* =============================================================
   15. CLAUSE SECTIONS + FLAGSHIP FEATURES
   ============================================================= */

.clause{padding-block:clamp(3rem,8vh,5.5rem); scroll-margin-top:8rem}
.clause + .clause > .sheet::after{
  content:""; position:absolute; left:var(--edge); right:var(--edge);
  top:calc(-1 * clamp(3rem,8vh,5.5rem)); border-top:1px solid var(--rule);
}
.clause-no{
  margin:0; font-family:var(--font-mono);
  font-size:.75rem; font-weight:500; letter-spacing:.05em;
  color:var(--ink-soft); padding-top:.45em;
}
.clause__title{
  font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.85rem,3.6vw,2.9rem);
  line-height:1.04; letter-spacing:-.018em; margin:0 0 .45em;
  text-wrap:balance;
}
.verdict{
  max-width:var(--measure); font-size:1.125rem; line-height:1.55;
  color:var(--ink-soft); font-style:italic; margin-bottom:1.5em;
}

/* feature 16 — accession tab */
.accession{
  display:inline-flex; align-items:center; gap:.5rem;
  margin:0 0 1rem; padding:.32rem .75rem;
  background:var(--paper-raised);
  border:1px solid var(--paper-border); border-bottom-color:var(--pass);
  border-bottom-width:2px;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.accession span:first-child{color:var(--pass-ink)}
.accession i{font-style:normal; color:var(--ink-soft)}
.accession--b{--pass:var(--stamp); --pass-ink:var(--stamp)}

/* --- tracked change ------------------------------------------ */
.tc{
  margin:clamp(1.4rem,3.4vh,2rem) 0;
  padding-left:clamp(.9rem,2vw,1.3rem);
  border-left:2px solid var(--pass);
  max-width:var(--measure);
}
.tc__line{
  margin:0 0 .5em; font-family:var(--font-serif);
  font-size:clamp(1.05rem,1.7vw,1.28rem); line-height:1.35;
}
.tc__line ins{display:block; margin-top:.08em}
.tc__arrow{
  display:inline-block; margin-right:.4em;
  font-family:var(--font-mono); font-size:.78em; font-weight:600;
  color:var(--redline-ink);
}
.tc__why{margin:.75em 0 0; font-size:1rem; line-height:1.6; color:var(--ink-soft)}

/* --- feature 5 · 4-pass review lens -------------------------- */
.lens{margin-top:clamp(1.4rem,3.4vh,2rem)}
.lens[data-pass="design"]  {--pass:var(--redline); --pass-ink:var(--redline-ink)}
.lens[data-pass="analysis"]{--pass:var(--stamp);   --pass-ink:var(--stamp)}
.lens[data-pass="ship"]    {--pass:var(--plum);    --pass-ink:var(--plum)}
.lens[data-pass="verify"]  {--pass:var(--verified);--pass-ink:var(--verified-ink)}

.lens__bar{
  display:flex; flex-wrap:wrap;
  border-block:1px solid var(--rule);
  margin-bottom:clamp(1.2rem,3vh,1.8rem);
}
.lens__bar [role="tab"]{
  appearance:none; cursor:pointer; background:none; border:0;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1rem;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.lens__bar [role="tab"]:hover{color:var(--ink)}
.lens__bar [role="tab"][aria-selected="true"]{color:var(--pass-ink); border-bottom-color:var(--pass)}
.lens__bar kbd{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  border:1px solid var(--paper-border); border-radius:2px;
  padding:.05rem .3rem; color:var(--ink-soft); background:var(--paper-raised);
}
.lens__bar [role="tab"][aria-selected="true"] kbd{color:var(--pass-ink); border-color:currentColor}

/* The heat tint darkens the cell, so step labels move to full ink to
   stay above AA while the overlay is on. */
[data-heat].is-hot .flow__steps li b,
[data-heat].is-hot .flow__steps li span{color:var(--ink)}

.pass__h{
  font-family:var(--font-serif); font-size:1.3rem; font-weight:500;
  margin:0 0 .7em; color:var(--pass-ink);
}

/* --- density comparison, two-up ------------------------------------
   The layout grammar of the real product, redrawn: chrome bar,
   breadcrumb, toolbar with search + split secondary/primary actions,
   header row, data rows, pagination footer. Placeholder content and
   this portfolio's own palette — no client UI, data or branding. */

.twoup{margin:clamp(1.3rem,3vh,1.9rem) 0}
.twoup__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(.7rem,1.6vw,1.1rem);
}
.twoup__pane{min-width:0}
.twoup__tag{
  margin:0 0 .45rem;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--verified-ink);
}
.twoup__tag--super{color:var(--plum)}
.twoup figcaption{
  margin-top:.85rem; max-width:var(--measure);
  font-size:.9375rem; line-height:1.55; color:var(--ink-soft);
}

/* This block is a picture of an interface, not an interface: the whole
   shell is aria-hidden and its 6-8px labels are illustration, the same
   as text inside a screenshot. Sized for the diagram, not for reading. */
.shell{
  display:flex; flex-direction:column;
  background:var(--paper-sunk);
  border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
  font-family:var(--font-mono);
  overflow:hidden;
}

/* chrome bar */
.shell__bar{
  flex:0 0 auto; height:30px; display:flex; align-items:center; gap:.5rem;
  padding:0 .6rem; background:var(--paper-raised);
  border-bottom:1px solid var(--paper-border);
}
.shell__dots{display:grid; grid-template-columns:repeat(3,3px); gap:2px; flex:0 0 auto}
.shell__dots i{display:block; width:3px; height:3px; background:var(--ink-faint); border-radius:50%}
.shell__crumb{
  min-width:0; font-size:.5rem; font-weight:500; letter-spacing:.05em; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.shell__crumb em{font-style:normal; color:var(--ink-soft); margin:0 .2em}
.shell__avatar{
  margin-left:auto; flex:0 0 auto;
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--stamp); color:var(--paper-raised);
  font-size:.375rem; font-weight:600;
}

/* the working card */
.shell__card{
  flex:1 1 auto; margin:.45rem; display:flex; flex-direction:column;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  overflow:hidden;
}
.shell__tools{
  flex:0 0 auto; height:28px; display:flex; align-items:center; gap:.4rem;
  padding:0 .45rem; border-bottom:1px solid var(--rule);
}
.shell__field{
  flex:0 1 96px; min-width:0; height:15px; display:flex; align-items:center; padding:0 .3rem;
  border:1px solid var(--paper-border); border-radius:2px;
  font-size:.375rem; letter-spacing:.04em; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden;
}
.shell__btns{margin-left:auto; display:flex; gap:.25rem; flex:0 0 auto}
.shell__btns i{display:block; height:15px; border-radius:2px}
.shell__btns .ghost{width:34px; border:1px solid var(--stamp); opacity:.45}
.shell__btns .solid{width:42px; background:var(--stamp)}

/* rows */
.shell__row{
  display:grid; align-items:center; gap:.3rem;
  padding:0 .45rem; height:20px; flex:0 0 auto;
  border-bottom:1px solid var(--rule);
}
.shell__row--head{
  height:22px; background:var(--paper-sunk);
  font-size:.375rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft);
}
.shell__row--head .shell__cell{white-space:nowrap; overflow:hidden; text-overflow:clip}
.shell__row.is-sel{background:color-mix(in srgb, var(--stamp) 8%, transparent)}
.shell__cell{min-width:0; overflow:hidden}
/* data cells are bars, not text — the subject is density, not content */
.shell__row:not(.shell__row--head) .shell__cell::before{
  content:""; display:block; height:5px; border-radius:1px;
  background:var(--ink-faint); opacity:.55;
}
.w4::before{width:40%} .w5::before{width:52%} .w6::before{width:64%}
.w7::before{width:74%} .w8::before{width:86%} .w9::before{width:96%}

.shell__foot{
  margin-top:auto; flex:0 0 auto; height:22px;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:0 .45rem; border-top:1px solid var(--rule);
  font-size:.375rem; letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap;
}

/* the two densities — identical markup, different column count */
.shell[data-density="simple"] .shell__row{grid-template-columns:2.4fr 1fr 1.2fr}
.shell[data-density="simple"] .shell__cell:nth-child(n+4){display:none}
.shell[data-density="super"]  .shell__row{grid-template-columns:repeat(9,minmax(0,1fr))}
.shell[data-density="super"]  .shell__row--head{font-size:.3125rem; letter-spacing:.02em}

/* --- findings ------------------------------------------------- */
/* Apparatus — tables, findings, ledgers — runs the full column. Only
   prose keeps a measure. Mixing the two put four different right edges
   on one page (576 / 663 / 672 / 876), which reads as a broken grid
   rather than as considered typography. */
.findings{
  list-style:none; margin:clamp(1.3rem,3vh,1.9rem) 0 0; padding:0;
  border-top:1px solid var(--rule);
}
.finding{
  display:flex; align-items:baseline; gap:.7rem;
  padding:.8rem 0; border-bottom:1px solid var(--rule);
}
.finding__v{
  flex:0 0 auto; margin:0;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:600;
  line-height:1; letter-spacing:-.02em;
}
.finding.sign-cut  .finding__v{color:var(--redline)}
.finding.sign-gain .finding__v{color:var(--verified)}
.finding.sign-ref  .finding__v{color:var(--stamp)}
.finding__l{
  margin:0; font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; line-height:1.5; color:var(--ink-soft);
}
.tick{color:var(--verified-ink); font-weight:600}
/* Provenance caveat on a figure. It ran inline into the label and read
   like an internal note that had leaked into the page; it needs to look
   like a footnote, because that is what it is. */
.finding__note{
  display:block; margin-top:.3rem;
  text-transform:none; letter-spacing:.01em;
  font-size:var(--fs-mini); font-style:italic; color:var(--ink-soft);
}

/* --- feature 12 · friction heatmap ---------------------------- */
.flow{margin:clamp(1.3rem,3vh,1.9rem) 0; padding:0}
.flow__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem}
.flow__cap{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.flow__cap--after{display:block; margin:1.2rem 0 .6rem}
.flow__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:.45rem;
}
.flow__steps li{
  position:relative; padding:.7rem .6rem;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  font-family:var(--font-mono); transition:background-color var(--t-base) ease;
}
.flow__steps b{display:block; font-size:.6875rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.flow__steps span{display:block; margin-top:.2rem; font-size:var(--fs-micro); color:var(--ink-soft); letter-spacing:.04em}
.flow__steps .is-cut b{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--redline); text-decoration-thickness:1.5px}
.flow__steps--after li{border-bottom:2px solid var(--verified)}
/* heat overlay */
[data-heat].is-hot .flow__steps li[data-friction="1"]{background:color-mix(in srgb, var(--verified) 8%, var(--paper-raised))}
[data-heat].is-hot .flow__steps li[data-friction="3"]{background:color-mix(in srgb, var(--redline) 12%, var(--paper-raised))}
[data-heat].is-hot .flow__steps li[data-friction="4"]{background:color-mix(in srgb, var(--redline) 20%, var(--paper-raised))}
[data-heat].is-hot .flow__steps li[data-friction="5"]{background:color-mix(in srgb, var(--redline) 30%, var(--paper-raised))}

/* --- features 6 + 8 · code diff & token map ------------------- */
.diff{
  margin:clamp(1.3rem,3vh,1.9rem) 0;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow); overflow:hidden;
}
.diff__head{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem;
  padding:.6rem .9rem; border-bottom:1px solid var(--rule);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
}
.diff__file{color:var(--ink)}
.diff__meta{color:var(--plum)}
.diff__body{
  margin:0; padding:.9rem; overflow-x:auto;
  font-family:var(--font-mono); font-size:.75rem; line-height:1.75;
}
.diff__body code{display:block; white-space:pre}
.d-ctx{color:var(--ink-soft)}
.d-del{display:block; color:var(--redline-ink); background:color-mix(in srgb,var(--redline) 8%, transparent)}
.d-add{display:block; color:var(--verified-ink); background:color-mix(in srgb,var(--verified) 10%, transparent)}
.tok-scroll{overflow-x:auto}   /* the token map is wider than a phone */
.tok{width:100%; min-width:22rem; border-collapse:collapse; font-family:var(--font-mono); font-size:.6875rem}
.tok th,.tok td{text-align:left; padding:.45rem .9rem; border-top:1px solid var(--rule); font-weight:400}
.tok thead th{font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-size:var(--fs-micro)}
.tok tbody th{color:var(--plum); font-weight:500}
.tok .num{text-align:right; color:var(--ink)}
.diff__foot{margin:0; padding:.7rem .9rem .9rem; font-size:.9375rem; color:var(--ink-soft)}

/* --- feature 7 · live test suite ------------------------------ */
.term{
  margin:clamp(1.3rem,3vh,1.9rem) 0;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.term__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem; padding:.55rem .9rem; border-bottom:1px solid var(--rule);
}
.term__title{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.term__out{
  margin:0; padding:.9rem; min-height:15rem; max-height:22rem; overflow-y:auto;
  font-family:var(--font-mono); font-size:.6875rem; line-height:1.85;
  white-space:pre-wrap; color:var(--ink);
}
.t-dim{color:var(--ink-soft)}
.t-pass{color:var(--verified-ink); font-weight:600}
.t-run{color:var(--stamp)}
.t-sum{color:var(--ink); font-weight:600}

.chip{
  appearance:none; cursor:pointer;
  border:1px solid var(--paper-border); background:transparent;
  padding:.35rem .65rem;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.chip:hover{color:var(--ink); border-color:var(--ink-faint)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper-raised)}
.chip--run{color:var(--verified-ink); border-color:var(--verified)}
.chip--run:hover{background:var(--verified); border-color:var(--verified); color:#fff}
.chip[disabled]{opacity:.5; cursor:default}

/* --- the QA rig ----------------------------------------------- */

.rig{
  margin:clamp(1.3rem,3vh,1.9rem) 0;
  padding:clamp(1rem,2.4vw,1.35rem);
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.rig__head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; margin-bottom:1rem}
.rig__t{
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.rig__n{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-mini); letter-spacing:.08em; text-transform:uppercase; color:var(--verified-ink);
}
.rig__cov{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.1rem 1.4rem;
}
.rig__cov li{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.55rem 0; border-top:1px solid var(--rule);
}
.rig__cov b{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.05em; color:var(--verified-ink);
}
.rig__cov span{
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft);
}
.rig__stack{
  margin:1rem 0 0; padding-top:.85rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem;
}
.rig__lbl{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
  margin-right:.35rem;
}
.rig__stack code{
  font-size:var(--fs-mini); letter-spacing:.02em; color:var(--ink);
  border:1px solid var(--paper-border); padding:.2rem .45rem;
}
.rig__note{
  margin:.9rem 0 0; max-width:58ch;
  font-size:.9375rem; line-height:1.55; color:var(--ink-soft);
}
.rig__note code{font-size:.8125rem; color:var(--verified-ink)}

/* --- feature 9 · ticket drawer -------------------------------- */
.drawer{margin:clamp(1.3rem,3vh,1.9rem) 0; border-top:1px solid var(--rule)}
.drawer__btn{
  appearance:none; cursor:pointer; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  background:none; border:0; padding:.85rem 0;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verified-ink);
}
.drawer__btn i{font-style:normal; transition:transform var(--t-base) var(--ease-out)}
.drawer.is-open .drawer__btn i{transform:rotate(180deg)}
/* one inner wrapper on purpose: with two children, `grid-template-rows:0fr`
   only sizes the first row and the second gets an implicit auto track. */
.drawer__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-slow) var(--ease-out)}
.drawer.is-open .drawer__body{grid-template-rows:1fr}
.drawer__inner{overflow:hidden; min-height:0}
.log{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:.6875rem}
.log th,.log td{text-align:left; padding:.42rem .8rem .42rem 0; border-bottom:1px solid var(--rule); font-weight:400}
.log thead th{font-size:var(--fs-micro); font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
.log .sev{font-weight:600}
.log .p0{color:var(--redline-ink)} .log .p1{color:var(--plum)} .log .p2{color:var(--stamp)}
.log .ok{color:var(--verified-ink); font-weight:600}
.log__foot{margin:.8rem 0 1rem; font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}

/* --- feature 14 · canvas stamp -------------------------------- */
.stampzone{margin:clamp(1.6rem,4vh,2.4rem) 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem}
.stampzone canvas{width:clamp(180px,24vw,220px); height:auto; display:block}
.stampzone__cap{
  margin:0; font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}

/* --- feature 13 · redaction unmasker -------------------------- */
.redact{
  position:relative; cursor:pointer;
  display:inline-flex; align-items:center; min-height:24px;
  background:var(--ink); color:transparent; border-radius:1px;
  padding:.05em .25em; transition:background-color var(--t-base) ease, color var(--t-base) ease;
  text-decoration:none;
}
.redact:hover,.redact:focus-visible,.redact.is-open{background:var(--highlighter); color:var(--ink)}

/* --- §03 method + legend -------------------------------------- */
.method{list-style:none; counter-reset:m; margin:clamp(1.2rem,3vh,1.8rem) 0 0; padding:0; max-width:var(--measure)}
.method li{position:relative; padding:1.1rem 0 1.1rem 3rem; border-top:1px solid var(--rule)}
.method li::before{
  content:"(" attr(data-n) ")"; position:absolute; left:0; top:1.35rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500; color:var(--ink-soft);
}
.method h3{font-family:var(--font-serif); font-size:1.2rem; font-weight:500; margin:0 0 .25em}
.method p{margin:0; font-size:1.0625rem; line-height:1.6; color:var(--ink-soft)}

.legend{
  margin-top:clamp(1.6rem,4vh,2.4rem); padding:1rem 1.1rem;
  background:var(--paper-raised); border:1px solid var(--paper-border);
}
.legend__t{
  margin:0 0 .7rem; font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.legend ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.55rem 1.2rem}
.legend li{display:flex; align-items:baseline; gap:.7rem}
.legend b{font-family:var(--font-serif); font-size:1.1rem; color:var(--redline-ink); min-width:1.2em}
.legend span{font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.04em; color:var(--ink-soft)}

/* --- §04 credentials + ROI ------------------------------------ */
.creds{margin:clamp(1.2rem,3vh,1.8rem) 0 0; max-width:var(--measure)}
.creds__row{padding:1rem 0; border-top:1px solid var(--rule)}
.creds dt{font-family:var(--font-serif); font-size:1.2rem; font-weight:500; margin-bottom:.2em}
.creds dt span{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-left:.7em;
}
.creds dd{margin:0; font-size:1.0625rem; line-height:1.6; color:var(--ink-soft)}

.roi{
  margin-top:clamp(1.8rem,4vh,2.6rem); padding:1.2rem 1.3rem;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.roi__t{
  margin:0 0 1rem; font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.roi__inputs{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.9rem}
.roi__f{margin:0; display:flex; flex-direction:column; gap:.3rem}
.roi__f label{font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.roi__f input{
  font-family:var(--font-mono); font-size:.9375rem; font-variant-numeric:tabular-nums;
  padding:.5rem .6rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--paper-border); border-radius:0;
}
.roi__out{
  display:block; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}
.roi__big{display:block; font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:600; line-height:1.05; color:var(--verified)}
.roi__sub{display:block; margin-top:.35rem; font-size:.6875rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft)}
.roi__note{margin:.9rem 0 0; font-size:.9375rem; line-height:1.55; color:var(--ink-soft)}

/* --- §05 ledger ------------------------------------------------ */
.ledger{
  width:100%; margin-top:clamp(1.2rem,3vh,1.8rem);
  border-collapse:collapse; font-family:var(--font-mono);
  font-variant-numeric:tabular-nums; font-size:.75rem; letter-spacing:.04em;
}
.ledger th,.ledger td{text-align:left; padding:.65rem .8rem .65rem 0; border-bottom:1px solid var(--rule); font-weight:400}
.ledger thead th{font-weight:500; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--ink-faint)}
.ledger tbody th{color:var(--ink); font-weight:400}
.ledger td{color:var(--ink-soft)}
.ledger .num{text-align:right; padding-right:0; font-weight:600; font-size:.9375rem}
.ledger .num.sign-cut{color:var(--redline-ink)}
.ledger .num.sign-gain{color:var(--verified-ink)}
.ledger .num.sign-ref{color:var(--stamp)}
.js .ledger tbody tr{transition:opacity var(--t-base) ease}
.js .ledger tbody tr:not(.is-posted){opacity:.4}
.tally{
  margin-top:.9rem; font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}

/* --- execution block ------------------------------------------ */
.execution > .sheet::after{border-top-width:3px; border-top-style:double}
.exec{display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(1.6rem,5vw,3rem); margin-top:1.2rem}
.exec__main{flex:1 1 24rem; min-width:0}
.exec__seal{flex:0 0 auto}
.seal{width:clamp(104px,13vw,132px); color:var(--verified); transform:rotate(-8deg)}
.seal svg{display:block; width:100%; height:auto; opacity:.9}

.pad{margin-bottom:1.2rem}
.pad canvas{
  display:block; width:100%; height:auto; touch-action:none; cursor:crosshair;
  background:var(--paper-raised); border:1px solid var(--paper-border);
}
.pad__rule{margin:.3rem 0 .5rem; border-bottom:1px solid var(--ink)}
.pad__row{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.pad__row input{
  flex:1 1 12rem; min-width:0;
  font-family:var(--font-mono); font-size:.75rem; padding:.45rem .6rem;
  color:var(--ink); background:var(--paper); border:1px solid var(--paper-border); border-radius:0;
}
.pad__receipt{
  display:block; margin-top:.7rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.05em; color:var(--verified-ink);
}
.signature__cap{
  margin:0 0 1.2em; font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.contacts{list-style:none; margin:0 0 1.3em; padding:0}
.contacts li{margin-bottom:.15em}
.contacts a{font-family:var(--font-mono); font-size:.8125rem; letter-spacing:.03em;
  display:inline-flex; align-items:center; min-height:24px}
.colophon{
  margin:clamp(2rem,5vh,3rem) 0 0; padding-top:1rem; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between;
  font-family:var(--font-mono); font-size:var(--fs-mini);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}

/* =============================================================
   16. NAVIGATION, FOLIO, PROGRESS, DOCKET INDEX
   ============================================================= */

.nav{grid-area:nav; display:flex; flex-wrap:wrap; align-items:center; gap:0 .2rem; margin-left:-.55rem}
.nav a{
  position:relative;
  display:inline-flex; align-items:center; min-height:24px;
  padding:.25rem .55rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
  transition:color var(--t-fast) ease;
}
.nav a::after{
  content:""; position:absolute; left:.55rem; right:.55rem; bottom:.1rem; height:1.5px;
  background:var(--redline); transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-base) var(--ease-out);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:var(--ink)}
.nav__cv{color:var(--stamp) !important; margin-left:.35rem}
.nav__cv::after{background:var(--stamp)}

.masthead__aside{
  grid-area:aside;
  display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex-wrap:wrap;
}
.folio{
  margin:0; white-space:nowrap;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-mini); font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--redline-ink);
}

/* reading progress — a pen line drawn along the masthead edge */
.masthead__progress{height:2px; background:transparent; overflow:hidden}
.masthead__progress span{
  display:block; height:100%; width:100%;
  background:var(--redline);
  transform:scaleX(var(--read,0)); transform-origin:0 50%;
}

/* --- the docket index ---------------------------------------- */

.index{list-style:none; margin:clamp(1.2rem,3vh,1.8rem) 0 0; padding:0; border-top:1px solid var(--rule)}
.index__row{border-bottom:1px solid var(--rule)}
.index__row a{
  display:grid;
  grid-template-columns:3.2rem auto minmax(0,1fr) auto auto;
  align-items:center; gap:clamp(.7rem,1.6vw,1.3rem);
  padding:1rem .4rem 1rem 0;
  text-decoration:none; color:var(--ink);
  transition:background-color var(--t-fast) ease, padding-left var(--t-base) var(--ease-out);
}
.index__row a:hover{background:rgba(26,26,23,.028); padding-left:.5rem}
.index__row[data-pass="design"]  {--pass:var(--redline);  --pass-ink:var(--redline-ink)}
.index__row[data-pass="analysis"]{--pass:var(--stamp);    --pass-ink:var(--stamp)}
.index__row[data-pass="ship"]    {--pass:var(--plum);     --pass-ink:var(--plum)}
.index__row[data-pass="verify"]  {--pass:var(--verified); --pass-ink:var(--verified-ink)}
.index__row--b{--pass:var(--stamp); --pass-ink:var(--stamp)}

.index__ref{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; color:var(--pass-ink);
  border-left:2px solid var(--pass); padding-left:.6rem;
}
.index__name{
  display:block; font-family:var(--font-serif); font-weight:500;
  font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.15; letter-spacing:-.012em;
}
.index__meta{
  display:block; margin-top:.2rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
}
/* A row that opens a page should say so. Nothing here read as a link:
   no underline, no chevron, serif heading on paper. */
/* --- docket thumbnails ---------------------------------------
   Five text rows gave a recruiter nothing to look at before §01,
   and recruiters skim for pictures. These are the case's own
   artefact reduced to a mark: the same drawing, at 66px, so the
   row shows what kind of work is behind it before you click.
   Six <i> in every thumb, so the markup is identical on both
   docket pages and only the data-thumb value changes. -------- */

.index__thumb{
  display:grid; gap:2px; align-content:center;
  width:66px; height:42px; padding:5px; flex:0 0 auto;
  background:var(--paper); border:1px solid var(--rule);
  transition:border-color var(--t-fast) ease;
}
.index__row a:hover .index__thumb{border-color:var(--pass)}
.index__thumb i{display:block; background:var(--pass)}

/* a pipeline of steps, two of them struck */
.index__thumb[data-thumb="flow"]{grid-auto-flow:column; align-items:center}
.index__thumb[data-thumb="flow"] i{height:15px; background:none; border:1px solid var(--pass); opacity:.8}
.index__thumb[data-thumb="flow"] i:nth-child(n+5){display:none}
.index__thumb[data-thumb="flow"] i:nth-child(2),
.index__thumb[data-thumb="flow"] i:nth-child(3){border-color:var(--redline); border-style:dashed}

/* two densities of the same table */
.index__thumb[data-thumb="table"]{grid-template-columns:1fr 1.6fr; gap:3px}
.index__thumb[data-thumb="table"] i{
  height:100%; min-height:26px; background:none;
  border:1px solid var(--pass); opacity:.8;
  background-image:repeating-linear-gradient(90deg,var(--pass) 0 1px,transparent 1px var(--c));
  background-size:100% 100%;
}
.index__thumb[data-thumb="table"] i:nth-child(1){--c:9px}
.index__thumb[data-thumb="table"] i:nth-child(2){--c:5px}
.index__thumb[data-thumb="table"] i:nth-child(n+3){display:none}

/* the drift histogram */
.index__thumb[data-thumb="bars"]{grid-auto-flow:column; align-items:end; gap:3px}
.index__thumb[data-thumb="bars"] i:nth-child(1){height:30px}
.index__thumb[data-thumb="bars"] i:nth-child(2){height:28px}
.index__thumb[data-thumb="bars"] i:nth-child(3){height:14px}
.index__thumb[data-thumb="bars"] i:nth-child(4){height:4px; background:var(--redline)}
.index__thumb[data-thumb="bars"] i:nth-child(5){height:3px; background:var(--redline)}
.index__thumb[data-thumb="bars"] i:nth-child(6){height:2px; background:var(--redline)}

/* the suite grid — passes on a board */
.index__thumb[data-thumb="grid"]{grid-template-columns:repeat(3,1fr); gap:3px}
.index__thumb[data-thumb="grid"] i{height:100%; min-height:12px; opacity:.35}
.index__thumb[data-thumb="grid"] i:nth-child(2),
.index__thumb[data-thumb="grid"] i:nth-child(3),
.index__thumb[data-thumb="grid"] i:nth-child(4){opacity:1}

/* scope: two kept, four deferred */
.index__thumb[data-thumb="list"]{gap:3px}
.index__thumb[data-thumb="list"] i{height:4px; opacity:.28}
.index__thumb[data-thumb="list"] i:nth-child(1),
.index__thumb[data-thumb="list"] i:nth-child(2){background:var(--verified); opacity:1}
.index__thumb[data-thumb="list"] i:nth-child(n+5){display:none}

.index__row a::after{
  content:"→"; grid-column:5;
  font-family:var(--font-mono); font-size:.9rem; color:var(--ink-soft);
  opacity:.55; transform:translateX(-3px);
  transition:opacity var(--t-fast) ease, transform var(--t-base) var(--ease-out),
             color var(--t-fast) ease;
}
.index__row a:hover::after,.index__row a:focus-visible::after{
  opacity:1; transform:none; color:var(--pass-ink);
}

.index__figure{text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.index__figure b{display:block; font-size:1.5rem; font-weight:600; line-height:1; letter-spacing:-.02em}
.index__figure i{
  display:block; margin-top:.3rem; font-style:normal;
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}

/* --- identification page ------------------------------------- */

.idcard{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.2rem); align-items:start;
  margin:clamp(1.2rem,3vh,1.8rem) 0 clamp(1.6rem,4vh,2.4rem);
  padding:clamp(1rem,2.4vw,1.4rem);
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.idcard__photo{
  position:relative; margin:0; aspect-ratio:1; overflow:hidden;
  background:var(--paper-sunk,#E8E6E0);
  border:1px solid var(--paper-border);
}
.idcard__photo img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:filter var(--t-slow) var(--ease-out);
}
.idcard:hover .idcard__photo img{filter:grayscale(.15) contrast(1)}
/* portrait not supplied yet — show a filing placeholder, never a broken icon */
.idcard__photo.is-missing img{display:none}
.idcard__photo.is-missing .idcard__stamp{display:none}
.idcard__photo.is-missing::after{
  content:"PORTRAIT ON FILE — assets/portrait.jpg";
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:1rem;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(26,26,23,.05) 7px,rgba(26,26,23,.05) 14px);
}
.idcard__stamp{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:baseline; gap:.45rem;
  padding:.45rem .6rem;
  /* opaque enough that white stays AA over any photograph */
  background:linear-gradient(transparent,rgba(26,26,23,.55) 25%,rgba(26,26,23,.88) 65%);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.idcard__stamp b{font-size:var(--fs-mini); font-weight:600; color:#fff; letter-spacing:.1em}
.idcard__body .lede{max-width:none}
.idcard__meta{
  margin:1.1rem 0 0; padding-top:.9rem; border-top:1px solid var(--rule);
  font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.04em;
}
.idcard__meta > div{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:.8rem; padding:.28rem 0}
.idcard__meta dt{text-transform:uppercase; color:var(--ink-soft)}
.idcard__meta dd{margin:0; color:var(--ink)}

/* --- the drift audit ----------------------------------------- */

.drift{
  margin:clamp(1.3rem,3vh,1.9rem) 0;
  padding:clamp(1rem,2.4vw,1.35rem);
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.drift__head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; margin-bottom:1rem}
.drift__t{
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}
.drift__n{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:var(--fs-mini); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
}
.drift__bars{list-style:none; margin:0; padding:0; display:grid; gap:.3rem}
.drift__bars li{
  display:grid; grid-template-columns:3.4rem minmax(0,1fr) 4rem;
  align-items:center; gap:.7rem;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.6875rem;
}
.drift__bars b{font-weight:600; color:var(--ink); text-align:right}
.drift__bars i{font-style:normal; text-align:right; color:var(--ink-soft); font-size:var(--fs-mini)}
.drift__bar{
  display:block; height:13px; background:var(--plum);
  width:calc(var(--v,0) * 1%);
  transform-origin:0 50%;
}
.is-tail .drift__bar{background:var(--redline); min-width:2px}
.is-tail b{color:var(--redline-ink)}
.is-rest b,.is-rest i{color:var(--ink-soft)}
.is-rest .drift__bar{background:repeating-linear-gradient(90deg,var(--redline) 0 3px,transparent 3px 6px)}
/* the bars sweep out as the audit scrolls in */
.js .drift__bar{transform:scaleX(0); transition:transform var(--t-slow) var(--ease-out)}
.js .drift.is-in .drift__bar{transform:scaleX(1)}
.js .drift.is-in .drift__bars li:nth-child(2) .drift__bar{transition-delay:60ms}
.js .drift.is-in .drift__bars li:nth-child(3) .drift__bar{transition-delay:120ms}
.js .drift.is-in .drift__bars li:nth-child(n+4) .drift__bar{transition-delay:200ms}

.drift__call{
  margin:1.2rem 0 0; padding-top:1rem; border-top:1px solid var(--rule);
  font-size:1.0625rem; line-height:1.55; color:var(--ink-soft); max-width:58ch;
}
.drift__pct{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:1.75rem; font-weight:600; letter-spacing:-.02em;
  color:var(--plum); margin-right:.4rem; vertical-align:-.08em;
}
.drift__bug{
  margin:.9rem 0 0; padding:.7rem .85rem;
  background:color-mix(in srgb, var(--redline) 7%, transparent);
  border-left:2px solid var(--redline);
  font-size:.9375rem; line-height:1.55; color:var(--ink-soft); max-width:58ch;
}
.drift__bug code{font-size:.8125rem; color:var(--redline-ink)}
.drift__bug b{color:var(--ink); font-weight:600}
.drift__flag{color:var(--redline); font-weight:600; margin-right:.35rem}

/* --- case pages (/work/<slug>/) ------------------------------- */

.masthead__inner--case{grid-template-areas:"id controls" "nav nav"}
.nav--case{display:flex; align-items:center; gap:.15rem; flex-wrap:wrap}
.nav--case a,.nav__here{
  display:inline-flex; align-items:center; min-height:24px; padding:.25rem .4rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; text-decoration:none;
}
.nav--case a{color:var(--ink-soft)}
.nav--case a:hover{color:var(--ink)}
.nav__here{color:var(--ink)}
.nav__sep{color:var(--ink-soft); font-size:var(--fs-mini)}

.case{padding-top:clamp(2rem,5vh,3.2rem)}
.case[data-pass="design"]  {--pass:var(--redline);  --pass-ink:var(--redline-ink)}
.case[data-pass="analysis"]{--pass:var(--stamp);    --pass-ink:var(--stamp)}
.case[data-pass="ship"]    {--pass:var(--plum);     --pass-ink:var(--plum)}
.case[data-pass="verify"]  {--pass:var(--verified); --pass-ink:var(--verified-ink)}
.case .clause__title{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.docket--case{margin-top:1.6rem}
/* tag chips — the component existed in the archived V2 and was never
   carried across, so case pages were rendering a default bulleted list */
.tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.35rem .4rem;
}
.tags li{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--paper-border); padding:.3rem .55rem;
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.tags li:hover{border-color:var(--ink-faint); color:var(--ink)}
.case__tags{margin:1.4rem 0 2rem}
/* .sheet only sets column-gap, so stacked grid rows touch. The tag chips
   end the first row, so their own bottom margin is what separates them
   from the prose row below. (A previous :first-of-type selector here was
   dead — it keys on element type, and .gutter is the first div.) */

.tc--reflect{border-left-color:var(--ink-faint)}
.reflect__lbl{
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  margin-right:.3rem;
}

/* scope diagram — LightByte */
.scope{
  margin:clamp(1.3rem,3vh,1.9rem) 0; padding:clamp(1rem,2.4vw,1.35rem);
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--paper-shadow);
}
.scope__head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.3rem 1rem; margin-bottom:.9rem}
.scope__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.4rem;
}
.scope__list li{
  padding:.6rem .7rem; border:1px solid var(--paper-border);
  font-family:var(--font-mono);
}
.scope__list b{
  display:block; font-size:.6875rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft);
  text-decoration:line-through; text-decoration-color:var(--redline); text-decoration-thickness:1.5px;
}
.scope__list span{
  display:block; margin-top:.2rem; font-size:var(--fs-micro);
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.scope__list .is-kept{border-bottom:2px solid var(--verified)}
.scope__list .is-kept b{color:var(--ink); text-decoration:none}
.scope__list .is-kept span{color:var(--verified-ink)}

/* prev / next */
.casenav{padding-block:clamp(2rem,5vh,3rem); border-top:1px solid var(--rule)}
.casenav__grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.casenav__link{
  display:flex; flex-direction:column; gap:.35rem;
  padding:1rem 1.1rem; text-decoration:none;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  transition:border-color var(--t-fast) ease, transform var(--t-base) var(--ease-out);
}
.casenav__link:hover{border-color:var(--ink-faint); transform:translateY(-2px)}
.casenav__link--next{text-align:right}
.casenav__dir{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.casenav__name{
  font-family:var(--font-serif); font-size:1.15rem; font-weight:500;
  line-height:1.15; color:var(--ink);
}

/* --- back to top --------------------------------------------- */

.totop{
  position:fixed; right:1rem; bottom:1rem; z-index:40;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:32px; padding:.45rem .7rem;
  background:var(--paper-raised); border:1px solid var(--paper-border);
  box-shadow:var(--lift-1);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; cursor:pointer;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity var(--t-base) ease, transform var(--t-base) var(--ease-out),
             color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.totop.is-on{opacity:1; transform:none; pointer-events:auto}
.totop:hover{color:var(--ink); border-color:var(--ink-faint)}

/* --- 13. Responsive ------------------------------------------ */

@media (max-width:1000px){
  .cover .sheet{grid-template-columns:var(--gutter) minmax(0,1fr)}
  .cover__stack{grid-column:2; padding-top:clamp(2rem,5vh,3rem)}
}

@media (max-width:820px){
  .masthead__inner{grid-template-columns:1fr; grid-template-areas:"id" "controls" "nav" "aside"; gap:.5rem}
  .masthead__controls,.masthead__aside{justify-content:flex-start}
  .nav{margin-left:-.55rem}
}

@media (max-width:760px){
  .casenav__grid{grid-template-columns:minmax(0,1fr)}
  .casenav__link--next{text-align:left}
  .masthead__inner--case{grid-template-columns:1fr; grid-template-areas:"id" "controls" "nav"}
  .twoup__grid{grid-template-columns:minmax(0,1fr); gap:1.1rem}
  .idcard{grid-template-columns:minmax(0,1fr)}
  .idcard__photo{max-width:230px}
  .idcard__meta > div{grid-template-columns:minmax(0,1fr); gap:.1rem}
  .drift__bars li{grid-template-columns:3rem minmax(0,1fr) 3.2rem; gap:.5rem; font-size:var(--fs-mini)}
  /* ref | thumb | name — the thumbnail takes the place the ref used
     to have on its own, and the figure drops to a third row */
  .index__row a{grid-template-columns:2.4rem 66px minmax(0,1fr); row-gap:.6rem; gap:.7rem}
  .index__figure{grid-column:2 / -1; text-align:left; display:flex; align-items:baseline; gap:.6rem}
  .index__figure i{margin-top:0}
  .sheet,.cover .sheet{grid-template-columns:minmax(0,1fr)}
  .sheet::before{display:none}
  .gutter{text-align:left; padding-right:0; margin-bottom:.5rem}
  .gutter:empty{display:none}
  .cover__stack{grid-column:1}
  .docket__row{grid-template-columns:minmax(0,1fr); gap:.15rem}
  .stack{height:clamp(300px,78vw,380px)}
  .clock{display:none}
}

@media (max-width:420px){
  .masthead__strip .opt{display:none}
  .personas [role="radio"]{margin-right:.6rem}
}

/* --- 14. Print — feature 23 (court filing) -------------------- */

@media print{
  .loupe,.auditexit{display:none}
  :root{--paper:#fff}
  body::before,.skip-link,.masthead__controls,.personas,.stack__cap{display:none}
  .masthead{position:static; backdrop-filter:none}
  .statement{font-size:2.1rem}
  .stack{height:auto; perspective:none}
  .stack__sheet{position:static; transform:none !important; box-shadow:none;
                border:1px solid #999; margin-bottom:.5rem; page-break-inside:avoid}
  .cover .sheet{display:block}
  [data-audit="on"] [data-prose]{opacity:1; filter:none}
}

/* --- audit-mode exit chip (A5) --------------------------------- */
/* Audit mode dims prose by design; this guarantees a visible way out
   no matter how far the reader has scrolled from the masthead. */
.auditexit{
  position:fixed; left:50%; bottom:1rem; z-index:45;
  transform:translateX(-50%) translateY(8px);
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:32px; padding:.5rem .8rem;
  background:var(--ink); color:var(--paper-raised);
  border:1px solid var(--ink); box-shadow:var(--lift-2);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-base) ease, transform var(--t-base) var(--ease-out);
}
.auditexit.is-on{opacity:1; transform:translateX(-50%); pointer-events:auto}
.auditexit kbd{
  border:1px solid rgba(255,255,255,.4); border-radius:2px;
  padding:.05rem .3rem; font-size:.5rem; color:var(--paper-raised);
}

/* --- craft inspection loupe ------------------------------------ */
/* Mounted only on the density panes. The Super shell renders its
   headers at 5px to fit nine columns — unreadable by design, and the
   reason a magnifier earns its place instead of decorating. */

.twoup__pane{position:relative}
.loupe{
  --lz:150px;
  position:absolute; left:0; top:0; z-index:5;
  width:var(--lz); height:var(--lz); border-radius:50%;
  overflow:hidden; pointer-events:none;
  background:var(--paper-raised);
  border:1.5px solid var(--pass, var(--redline));
  box-shadow:0 12px 34px -14px rgba(26,26,23,.5), inset 0 0 26px rgba(255,255,255,.35);
  transform:translate(calc(var(--lx,-999px) - 50%), calc(var(--ly,-999px) - 50%)) scale(.75);
  opacity:0;
  transition:opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.loupe.is-on{
  opacity:1;
  transform:translate(calc(var(--lx) - 50%), calc(var(--ly) - 50%)) scale(1);
}
.loupe__inner{position:absolute; top:0; left:0; transform-origin:0 0}
.loupe__inner .shell{box-shadow:none; border:0}
/* the twoup panes carry the pass colour of what they show */
.twoup__pane:first-child .loupe{--pass:var(--verified)}
.twoup__pane:last-child  .loupe{--pass:var(--plum)}

@media (hover:none),(pointer:coarse){ .loupe{display:none} }
@media (prefers-reduced-motion:reduce){ .loupe{display:none} }

/* --- cross-document view transitions ---------------------------- */
/* Same-origin navigations (docket → case → case) cross-fade instead of
   hard-cutting, with the masthead held still so only the document body
   changes. Progressive enhancement: browsers without the API just cut,
   which is exactly today's behaviour. */

@view-transition{ navigation:auto }

/* the chrome persists; only the page under it moves */
.masthead{ view-transition-name:masthead }
.totop{ view-transition-name:totop }

::view-transition-old(root){
  animation:vt-out 180ms cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:vt-in 320ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px) } }

/* the masthead should not cross-fade against itself */
::view-transition-old(masthead),
::view-transition-new(masthead){ animation:none; mix-blend-mode:normal }

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation:none }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none }
}

/* --- outbound links to the companies worked for ---------------- */
/* A matter is a real organisation, so its name is a link out. Kept
   quiet — mono, ink-soft, with a ↗ so it is obviously off-site. */

.matterlink{
  display:inline-flex; align-items:center; gap:.25em; min-height:24px;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.06em; color:var(--stamp);
  text-decoration-color:color-mix(in srgb, var(--stamp) 45%, transparent);
  text-underline-offset:.2em;
}
.matterlink:hover{color:var(--redline-ink); text-decoration-color:currentColor}
.matterlink__out{font-size:.85em; opacity:.7}

.accession__link{
  display:inline-flex; align-items:center; gap:.25em;
  min-height:24px; padding-block:.1rem;
  color:var(--pass-ink); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent);
}
.accession__link:hover{border-bottom-color:currentColor}

.matterstrip{margin:-.2rem 0 1rem}

/* --- exit from a summary to the full case --------------------- */
/* Before this, the five docket rows were the only links to the case
   pages on the whole homepage. Anyone who scrolled past the docket and
   read an exhibit end-to-end was handed no way out. */

.casexit{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin:1.6rem 0 0; padding-top:.85rem;
  border-top:1px solid var(--rule);
  font-family:var(--font-mono);
}
.casexit__no{
  font-size:var(--fs-mini); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft);
}
.casexit a{
  display:inline-flex; align-items:center; min-height:24px;
  font-size:.6875rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; text-decoration:none; color:var(--stamp);
  /* tied to currentColor so the rule follows the stamp into UV */
  border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom:1px;
  transition:color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.casexit a:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* =============================================================
   MOBILE REFINEMENT
   Measured on iPhone SE / 14 / Pixel 7: the sticky masthead was
   190px — 33% of an SE viewport — because it stacked five rows.
   Small mono labels also bottomed out at 9px, which is legible on
   a desktop monitor and not on a phone.
   ============================================================= */

@media (max-width:760px){

  /* one step-up, applied everywhere the tokens are used */
  :root{ --fs-micro:.6875rem; --fs-mini:.6875rem; }

  /* --- masthead: five rows down to two ----------------------- */
  .masthead__inner{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"id controls" "nav nav";
    gap:.4rem .8rem;
    padding-block:.5rem .35rem;
  }
  /* no nowrap: at 320px the name is wider than its grid column and
     would overlap the controls. Wrapping to two lines is the safe fail. */
  .masthead__name{font-size:.8125rem; letter-spacing:.08em}
  .masthead__id{min-width:0}
  .masthead__controls{flex-shrink:0}
  /* the nav strip below already says what this is, and the wrapped
     "CASE FILE · PRODUCT DESIGN" cost a row plus a dangling separator */
  .masthead__strip{display:none}
  /* the folio duplicates what aria-current already shows in the nav */
  .masthead__aside{display:none}

  /* nav becomes one swipeable line instead of wrapping to three */
  .nav{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--edge)); padding-inline:var(--edge);
    scroll-snap-type:x proximity;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto; scroll-snap-align:start}

  /* The strip is 578px of links inside a 390px viewport, so Contact and
     CV sat off the right edge with nothing to say the row scrolled — the
     one action a recruiter came for was invisible. CV now sticks to the
     right edge; the fade behind it is the scroll cue. */
  /* `.nav a` (0,1,1) outranks `.nav__cv` (0,1,0) — the base rule sets
     position:relative, so this has to match on both to win. */
  .nav a.nav__cv{
    /* sticky insets are measured from the scroller's padding box, so
       right:0 would stop at the content edge and leave a 20px slot where
       the links behind still showed. Pull it out by the same edge. */
    position:sticky; right:calc(-1 * var(--edge)); z-index:2;
    margin-left:.6rem; padding-inline:2.2rem var(--edge);
    /* fade from fully transparent *paper*, not from transparent black —
       color-mix keeps the hue and only drops alpha, so it works in UV too */
    background:linear-gradient(90deg,
      color-mix(in srgb, var(--paper) 0%, transparent) 0,
      var(--paper) 1.9rem, var(--paper) 100%);
  }
  .nav a.nav__cv::after{left:2.2rem; right:var(--edge)}

  /* the sticky bar retreats while reading, returns on scroll-up */
  .masthead{transition:transform var(--t-base) var(--ease-out)}
  .masthead.is-tucked{transform:translateY(-100%)}

  /* --- the decorative gutter mark cost a whole row ----------- */
  .drafting{display:none}

  /* --- horizontal scrollers now announce themselves ---------- */
  .diff__body,.tok-scroll{
    position:relative;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .diff__body::after,.tok-scroll::after{
    content:"swipe →";
    position:sticky; right:0; bottom:0; float:right;
    padding:.15rem .4rem; margin-top:.3rem;
    background:var(--paper-raised); border:1px solid var(--paper-border);
    font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }

  /* --- back-to-top stops sitting on the text ----------------- */
  /* At 390px the label made it ~240px wide, opaque, and parked over the
     right half of whatever paragraph you were reading. Icon only, and
     clear of the home-indicator. */
  .totop{
    right:.6rem; bottom:max(.6rem, env(safe-area-inset-bottom));
    width:44px; height:44px; min-height:44px; padding:0;
    justify-content:center; font-size:1rem; letter-spacing:0;
  }
  .totop .totop__label{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }

  /* --- give long-form sections a little more air ------------- */
  .clause{padding-block:clamp(2.4rem,7vh,3.6rem)}
  .statement{font-size:clamp(2.1rem,9vw,2.8rem)}
}

@media (prefers-reduced-motion:reduce){
  .masthead.is-tucked{transform:none}
}

/* =============================================================
   PLATES — the visual exhibits on case pages
   Wireframes, flow diagrams, IA maps and component specs, all
   drawn in CSS/SVG from the same tokens as the rest of the file.
   Nothing here is an image, so everything follows the theme,
   scales without blurring, and costs no bytes over the stylesheet.
   ============================================================= */

.plate{
  margin:clamp(1.6rem,4vh,2.4rem) 0;
  padding:clamp(1rem,2.4vw,1.5rem);
  background:var(--paper-raised);
  border:1px solid var(--paper-border);
}
.plate__head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .9rem;
  margin-bottom:clamp(.9rem,2.2vh,1.3rem);
  padding-bottom:.7rem; border-bottom:1px solid var(--rule);
}
.plate__kicker{
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pass-ink,var(--ink-soft));
}
.plate__t{
  font-family:var(--font-serif); font-size:clamp(1rem,1.7vw,1.15rem);
  font-weight:500; letter-spacing:-.01em; color:var(--ink);
}
.plate__cap{
  margin:clamp(.9rem,2.2vh,1.2rem) 0 0; padding-top:.8rem;
  border-top:1px solid var(--rule);
  font-family:var(--font-serif); font-size:.9375rem; line-height:1.6;
  color:var(--ink-soft); max-width:44rem;
}
.plate__cap b{font-weight:500; color:var(--ink)}

/* numbered annotations — the marker on the drawing, the sentence below */
.plate__notes{
  counter-reset:pn; list-style:none;
  margin:clamp(.9rem,2.2vh,1.2rem) 0 0; padding:0;
  display:grid; gap:.5rem;
}
.plate__notes li{
  counter-increment:pn; position:relative; padding-left:1.9rem;
  font-family:var(--font-serif); font-size:.875rem; line-height:1.55; color:var(--ink-soft);
}
.plate__notes li::before{
  content:counter(pn);
  position:absolute; left:0; top:.05em;
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:50%;
  border:1px solid var(--redline); color:var(--redline-ink);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
}

/* --- 1. wireframes ------------------------------------------- */

.wf__set{
  display:grid; gap:clamp(.7rem,1.8vw,1.1rem);
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
}
/* frames stretch to the tallest in the set — a wireframe row reads as
   one comparison, and ragged bottoms make it read as three pictures */
.wf__set{align-items:stretch}
.wf{margin:0; min-width:0; display:flex; flex-direction:column}
.wf__frame{flex:1}
.wf__cap{
  margin-bottom:.45rem;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.wf__frame{
  display:block; padding:0 0 .6rem;
  background:var(--paper); border:1px solid var(--ink-faint);
}
.wf__chrome{
  display:flex; gap:4px; align-items:center;
  height:16px; padding:0 .5rem; margin-bottom:.55rem;
  border-bottom:1px solid var(--ink-faint);
}
.wf__chrome i{width:4px; height:4px; border-radius:50%; background:var(--ink-faint)}
.wf__body{display:grid; gap:.4rem; padding:0 .5rem}
.wf__body--flush{padding-top:0}

/* a block, plus its annotation marker if it carries one */
.wf-b{position:relative; display:block; min-width:0}
.wf-b[data-note]::after{
  content:attr(data-note);
  position:absolute; right:-7px; top:-7px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  background:var(--paper-raised); border:1px solid var(--redline);
  color:var(--redline-ink);
  font-family:var(--font-mono); font-size:9px; font-weight:600; line-height:1;
}

.wf-bar{display:block; height:12px; width:calc(var(--w,100) * 1%); background:var(--wf-fill)}
.wf-head{display:block; height:9px; width:calc(var(--w,55) * 1%); background:var(--ink-faint)}
.wf-text{display:grid; gap:3px}
.wf-text i{display:block; height:4px; width:calc(var(--w,100) * 1%); background:var(--wf-fill)}
.wf-field{
  display:flex; align-items:center; height:16px; padding:0 4px;
  border:1px solid var(--ink-faint); background:var(--paper-raised);
  font-family:var(--font-mono); font-size:7px; letter-spacing:.04em;
  color:var(--ink-soft); white-space:nowrap; overflow:hidden;
}
.wf-field--sel{justify-content:space-between}
.wf-field i{font-style:normal; font-size:6px}
.wf-btns{display:flex; gap:4px; justify-content:flex-end}
.wf-btn{
  display:inline-flex; align-items:center; height:14px; padding:0 5px;
  font-family:var(--font-mono); font-size:6.5px; font-style:normal;
  letter-spacing:.05em; white-space:nowrap;
}
.wf-btn--ghost{border:1px solid var(--ink-faint); color:var(--ink-soft)}
/* paper, not white: --stamp is a dark navy on paper and a light blue in
   UV, so a fixed white label drops to 2.2:1 under the lamp */
.wf-btn--solid{background:var(--stamp); color:var(--paper)}
.wf-chips{display:flex; gap:3px; flex-wrap:wrap}
.wf-chips i{
  padding:1px 4px; border:1px solid var(--ink-faint); font-style:normal;
  font-family:var(--font-mono); font-size:6.5px; color:var(--ink-soft); white-space:nowrap;
}
.wf-chips i:first-child{background:var(--wf-fill); color:var(--ink)}
.wf-table{display:grid; gap:2px}
.wf-tr{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px}
.wf-tr i{display:block; height:6px; background:var(--wf-fill)}
.wf-tr.is-head i{background:var(--ink-faint); height:5px}
.wf-tr i.is-gap{background:none; outline:1px dashed var(--ink-faint); outline-offset:-1px}
.wf-cards{display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:4px}
.wf-cards i{display:block; height:26px; border:1px solid var(--ink-faint)}
.wf-list{display:grid; gap:4px}
.wf-list i{display:block; height:11px; border-bottom:1px solid var(--rule); background:var(--wf-fill)}
.wf-panel{
  display:flex; align-items:center; justify-content:center;
  height:calc(var(--h,64) * 1px);
  border:1px dashed var(--ink-faint); background:var(--paper-raised);
}
.wf-panel em{
  font-style:normal; font-family:var(--font-mono);
  font-size:7px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.wf-split{display:grid; grid-template-columns:var(--l,1fr) 1fr; gap:5px; align-items:start}
.wf-col{display:grid; gap:.4rem; min-width:0}
.wf-gap{display:block; height:calc(var(--h,10) * 1px)}

:root{--wf-fill:rgba(26,26,23,.10)}
[data-theme="uv"]{--wf-fill:rgba(150,175,255,.14)}

/* --- 2. flow maps -------------------------------------------- */

.fm-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.fm{display:block; width:100%; min-width:560px; height:auto; overflow:visible}

.fm-n rect{fill:var(--paper); stroke:var(--ink); stroke-width:1}
.fm-n text{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.03em; fill:var(--ink);
}
.fm-n .fm-sub{font-size:9px; font-weight:500; letter-spacing:.06em; fill:var(--ink-soft)}
.fm-n--start rect{stroke-width:2}
.fm-n--end   rect{stroke:var(--verified); stroke-width:2}
.fm-n--end   text{fill:var(--verified-ink)}
.fm-n--cut   rect{stroke:var(--redline); stroke-dasharray:4 3}
.fm-n--cut   text{fill:var(--redline-ink)}
.fm-n--decision path{fill:var(--paper); stroke:var(--stamp); stroke-width:1.5}
.fm-n--decision text{text-anchor:middle; font-size:10px; fill:var(--stamp)}

.fm-e path{fill:none; stroke:var(--ink-soft); stroke-width:1.25}
.fm-e text{
  font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; text-anchor:middle; fill:var(--ink-soft);
  /* a paper outline behind the label so a branch name never has to
     compete with the line it belongs to */
  paint-order:stroke; stroke:var(--paper-raised); stroke-width:3.5px; stroke-linejoin:round;
}
.fm-e--cut path{stroke:var(--redline); stroke-dasharray:5 4}
.fm-e--cut text{fill:var(--redline-ink)}
.fm-e--ok  path{stroke:var(--verified)}
.fm-e--ok  text{fill:var(--verified-ink)}
.fm-head--flow path{fill:var(--ink-soft)}
.fm-head--ok   path{fill:var(--verified)}
.fm-head--cut  path{fill:var(--redline)}

.fm-lane line{stroke:var(--rule); stroke-width:1}
.fm-lane text{
  font-family:var(--font-mono); font-size:9px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; fill:var(--ink-soft);
}

/* --- 3. information architecture ----------------------------- */

.ia{font-family:var(--font-mono)}
.ia__l{list-style:none; margin:0; padding:0}
.ia__l .ia__l{margin-left:.85rem; padding-left:.85rem; border-left:1px solid var(--rule)}
.ia__n{position:relative}
.ia__row{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem;
  padding:.4rem 0; border-bottom:1px solid var(--rule);
}
.ia__row b{
  font-size:.8125rem; font-weight:600; letter-spacing:.03em; color:var(--ink);
}
.ia__row i{
  font-style:normal; font-size:var(--fs-mini); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ia__n.is-kept > .ia__row b{color:var(--verified-ink)}
.ia__n.is-kept > .ia__row i{color:var(--verified-ink)}
.ia__n.is-cut  > .ia__row b{
  color:var(--ink-soft);
  background-image:linear-gradient(var(--redline),var(--redline));
  background-repeat:no-repeat; background-position:0 58%; background-size:100% 1px;
}
.ia__n.is-cut  > .ia__row i{color:var(--redline-ink)}

/* --- 4. spec sheets ------------------------------------------ */

.spec__stage{
  display:flex; align-items:center; justify-content:center;
  /* the pins sit outside the component, so the stage has to hold them */
  padding:clamp(3rem,5vw,3.8rem) 1rem;
  background:var(--paper); border:1px solid var(--rule);
}
.plate__notes--anat li::before{border-color:var(--stamp); color:var(--stamp)}

/* the density switch, drawn */
.an{position:relative}
.an__seg{display:inline-flex; border:1px solid var(--ink)}
.an__opt{
  padding:.5rem 1.1rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
}
.an__opt + .an__opt{border-left:1px solid var(--ink)}
.an__opt.is-on{background:var(--ink); color:var(--paper); font-weight:600}
.an__pin{
  position:absolute; left:var(--x); top:50%;
  transform:translate(-50%,var(--y));
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:50%;
  background:var(--paper); border:1px solid var(--stamp); color:var(--stamp);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
}
.an__pin::before{
  content:""; position:absolute; left:50%; width:1px; height:22px;
  background:var(--stamp); opacity:.5;
}
.an__pin--up::before{top:100%}
.an__pin--down::before{bottom:100%}

.spec__states{display:flex; flex-wrap:wrap; gap:.55rem 1.2rem; margin-top:1rem}
.spec__state{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.st{display:inline-block; width:2.1rem; height:1.05rem; border:1px solid var(--ink-faint)}
.st--rest {background:var(--paper)}
.st--hover{background:var(--wf-fill)}
.st--focus{border-color:var(--stamp); box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--stamp)}
.st--on   {background:var(--ink); border-color:var(--ink)}
.st--off  {background:repeating-linear-gradient(45deg,transparent 0 3px,var(--wf-fill) 3px 6px)}

.spec__grid{
  display:grid; gap:.1rem 1.4rem; margin:1.1rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.spec__grid > div{
  display:flex; align-items:baseline; justify-content:space-between; gap:.6rem;
  padding:.42rem 0; border-bottom:1px solid var(--rule);
}
.spec__grid dt{
  font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
}
.spec__grid dd{
  margin:0; font-family:var(--font-mono); font-size:.8125rem; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:.02em; color:var(--ink); text-align:right;
}

/* token ramps.
   Horizontal bars, not vertical: at 4px and 8px a column is narrower
   than its own label, and the bottom of the scale becomes unreadable
   exactly where the interesting values are. */
.ramp{display:grid; gap:1.9rem; width:100%; max-width:34rem}
.ramp__row{display:grid; gap:.7rem}
.ramp__lbl{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.ramp__pin{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.25rem; height:1.25rem; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--stamp); color:var(--stamp);
  font-size:var(--fs-micro); font-weight:600; letter-spacing:0;
}
.ramp__scale{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.ramp__scale li{display:flex; align-items:center; gap:.6rem}
.ramp__scale i{
  display:block; height:9px; width:calc(var(--s) * 1px);
  background:var(--wf-fill); flex:0 0 auto;
}
.ramp__scale li.is-key i{background:var(--plum)}
/* a value the build leaned on that the system never published */
.ramp__scale li.is-off i{background:var(--redline)}
.ramp__scale li.is-off em{color:var(--redline-ink); font-weight:600}
.ramp__scale li.is-off s{color:var(--redline-ink)}
.ramp__scale em{
  font-style:normal; font-family:var(--font-mono);
  font-size:var(--fs-mini); font-variant-numeric:tabular-nums;
  letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap;
}
.ramp__scale li.is-key em{color:var(--ink); font-weight:600}
.ramp__scale s{text-decoration:none; font-weight:500; color:var(--ink-soft)}

.ramp__radii{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ramp__radii i{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:28px; border:1px solid var(--ink-faint); border-radius:var(--r);
  font-style:normal; font-family:var(--font-mono);
  font-size:var(--fs-micro); font-weight:500; color:var(--ink-soft);
}
.ramp__radii i.is-bad{
  width:auto; padding-inline:.6rem; border-color:var(--redline); color:var(--redline-ink);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  font-style:normal; letter-spacing:.04em; white-space:nowrap;
}

/* --- plates on a phone --------------------------------------- */

@media (max-width:760px){
  /* three wireframes side by side at 390px is 110px each — the
     annotations stop being readable before the structure does */
  .wf__set{grid-template-columns:minmax(0,1fr); gap:1.1rem}
  .plate{padding:.85rem}
  .spec__stage{padding:1.8rem .8rem}
  .fm-scroll::after{
    content:"swipe →"; display:block; text-align:right; margin-top:.3rem;
    font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }
}

/* --- wireframe product chrome --------------------------------
   Drawn to the real portal's structure: 52px topbar with the
   breadcrumb centred, overlay drawer (so no persistent sidebar
   appears anywhere), report views that close with a status bar
   instead of pagination, and a sub-tab row that only ever sits
   inside a report. These proportions are what make an abstracted
   screen read as this product rather than as generic admin UI. */

.wf-top{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px;
  height:17px; padding:0 4px; margin:0 -.5rem .1rem;
  border-bottom:1px solid var(--ink-faint); background:var(--paper-raised);
}
.wf-top__burger{width:8px; height:6px; border-top:1px solid var(--ink-soft);
  border-bottom:1px solid var(--ink-soft); box-sizing:content-box}
.wf-top__crumb{
  font-style:normal; text-align:center; font-family:var(--font-mono);
  font-size:6.5px; letter-spacing:.06em; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wf-top__r{display:flex; align-items:center; gap:4px}
.wf-top__ico{width:7px; height:7px; border:1px solid var(--ink-faint); flex:0 0 auto}
.wf-top__av{width:8px; height:8px; border-radius:50%; background:var(--stamp); opacity:.55}

.wf-tabs{display:flex; gap:9px; border-bottom:1px solid var(--ink-faint); padding-bottom:3px}
.wf-tabs i{
  font-style:normal; font-family:var(--font-mono); font-size:6.5px;
  letter-spacing:.05em; color:var(--ink-soft); position:relative;
}
.wf-tabs i.is-on{color:var(--ink); font-weight:600}
.wf-tabs i.is-on::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1.5px; background:var(--stamp);
}

.wf-tools{
  display:flex; align-items:center; gap:3px; padding:3px 0;
  border-bottom:1px solid var(--rule);
}
.wf-tools i{width:8px; height:8px; border:1px solid var(--ink-faint); flex:0 0 auto}
.wf-tools em{
  margin-left:auto; font-style:normal; font-family:var(--font-mono);
  font-size:6px; font-weight:600; letter-spacing:.06em;
  color:var(--paper); background:var(--stamp); padding:1px 4px; white-space:nowrap;
}

.wf-status{
  display:flex; justify-content:space-between; gap:8px;
  margin-top:auto; padding-top:3px; border-top:1px solid var(--ink-faint);
}
.wf-status em{
  font-style:normal; font-family:var(--font-mono); font-size:6px;
  letter-spacing:.05em; color:var(--ink-soft); white-space:nowrap;
}

/* a real grid: named columns, typed cells */
.wf-grid{display:block; border:1px solid var(--ink-faint)}
.wf-grid__hd,.wf-grid__r{
  display:grid; grid-template-columns:var(--cols); align-items:center;
  gap:4px; padding:3px 4px;
}
.wf-grid__hd{background:var(--wf-fill); border-bottom:1px solid var(--ink-faint)}
.wf-grid__hd em{
  font-style:normal; font-family:var(--font-mono); font-size:6px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wf-grid__r{border-bottom:1px solid var(--rule); min-height:13px}
.wf-grid__r:last-child{border-bottom:0}
.wf-grid__r.is-sel{background:color-mix(in srgb, var(--stamp) 7%, transparent)}
.wf-cell-b i{display:block; height:4px; width:calc(var(--w,80) * 1%); background:var(--wf-fill)}
.wf-cell-t,.wf-cell-n{
  font-style:normal; font-family:var(--font-mono); font-size:6px;
  color:var(--ink-soft); white-space:nowrap;
}
.wf-cell-n{color:var(--ink-soft)}
.wf-cell-sel{
  display:flex; align-items:center; justify-content:space-between; gap:2px;
  font-style:normal; font-family:var(--font-mono); font-size:6px;
  color:var(--ink-soft); border:1px solid var(--ink-faint);
  padding:0 3px; height:11px; white-space:nowrap; overflow:hidden;
}
.wf-cell-sel b{font-weight:400; font-size:5px; flex:0 0 auto}

/* the MFN tri-toggle: electable / disclosable / excluded */
.wf-tri{display:inline-flex; font-style:normal; border:1px solid var(--ink-faint); width:max-content}
.wf-tri b{
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:11px; font-family:var(--font-mono); font-size:6px;
  font-weight:600; color:var(--ink-faint);
}
.wf-tri b + b{border-left:1px solid var(--ink-faint)}
.wf-tri b.is-on{color:var(--paper)}
.wf-tri b.tri-E{background:var(--verified-ink)}
.wf-tri b.tri-D{background:var(--stamp)}
.wf-tri b.tri-X{background:var(--ink-soft)}

/* document picker with anchor + remove */
.wf-pick{display:grid; gap:3px}
.wf-pick__r{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:5px;
  padding:2px 3px; border:1px solid var(--rule);
}
.wf-pick__r.is-anchor{border-color:var(--stamp); background:color-mix(in srgb, var(--stamp) 7%, transparent)}
.wf-cb{width:7px; height:7px; border:1px solid var(--ink-faint)}
.wf-cb.is-on{background:var(--stamp); border-color:var(--stamp)}
.wf-pick__n{display:block; height:5px; width:calc(var(--w,70) * 1%); background:var(--wf-fill)}
/* the anchor control, drawn rather than typed — the ⚓ character renders
   as a colour emoji in Chromium and blows a hole in a greyscale drawing */
.wf-pick__a{
  width:8px; height:8px; border-radius:50%;
  border:1px solid var(--ink-faint); position:relative;
}
.wf-pick__r.is-anchor .wf-pick__a{border-color:var(--stamp)}
.wf-pick__r.is-anchor .wf-pick__a::after{
  content:""; position:absolute; inset:1.5px; border-radius:50%; background:var(--stamp);
}
.wf-pick__x{font-style:normal; font-size:7px; color:var(--ink-soft); line-height:1}

/* Compare: run on the left, mode menu on the right */
.wf-split-btn{display:flex; justify-content:flex-end}
.wf-btn--chev{background:var(--stamp); color:var(--paper); border-left:1px solid var(--paper); padding:0 4px}

/* right panel over the page */
.wf-rp{display:flex; flex-direction:column; border:1px solid var(--ink-faint); background:var(--paper-raised)}
.wf-rp__h{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:3px 5px; border-bottom:1px solid var(--ink-faint);
}
.wf-rp__h em{font-style:normal; font-family:var(--font-mono); font-size:6.5px;
  font-weight:600; letter-spacing:.05em; color:var(--ink)}
.wf-rp__x{color:var(--ink-soft); font-size:8px}
.wf-rp__b{display:grid; gap:4px; padding:5px}
.wf-rp__f{display:flex; justify-content:flex-end; gap:4px; padding:4px 5px;
  border-top:1px solid var(--rule); margin-top:auto}

/* =============================================================
   HI-FIDELITY SCREENS
   Not wireframes — the real interfaces, rebuilt in this file's
   own system. The translation is the point: what these products
   look like when they are drawn with paper, two typefaces, a
   redline and no rounded corners.

     blue primary   → --stamp
     alert red      → --redline
     "optimal" green→ --verified
     card on grey   → --paper-raised on --paper
     Inter / SF     → Newsreader for names, Plex Mono for apparatus
     rounded        → squared; the corner radius was never load-bearing
   ============================================================= */

.ui{
  display:block; width:100%;
  background:var(--paper); border:1px solid var(--ink);
  font-family:var(--font-mono); color:var(--ink);
  container-type:inline-size;
  --u:1px;                 /* scale hook for the shot renderer */
}
.ui *{box-sizing:border-box}

/* --- topbar --------------------------------------------------- */
.ui__bar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:12px; padding:8px 12px; min-height:44px;
  border-bottom:1px solid var(--ink); background:var(--paper-raised);
}
.ui__brand{display:flex; flex-direction:column; gap:1px; min-width:0}
.ui__brand b{
  font-family:var(--font-serif); font-size:15px; font-weight:600;
  letter-spacing:-.01em; line-height:1.1; color:var(--ink);
}
.ui__brand span{
  font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.ui__baractions{display:flex; align-items:center; gap:8px}

/* --- sidebar -------------------------------------------------- */
.ui__body{display:grid; grid-template-columns:158px minmax(0,1fr); min-height:0}
.ui__nav{
  border-right:1px solid var(--rule); padding:10px 0;
  background:var(--paper-raised); display:grid; align-content:start; gap:1px;
}
.ui__nav a{
  display:flex; align-items:center; gap:8px; padding:7px 12px;
  font-size:10px; letter-spacing:.05em; color:var(--ink-soft); text-decoration:none;
}
.ui__nav a i{
  width:9px; height:9px; border:1px solid currentColor; flex:0 0 auto; font-style:normal;
}
.ui__nav a em{
  margin-left:auto; font-style:normal; font-size:8px; font-weight:600;
  /* paper on full redline is 4.37:1 at 8px — a shade of ink takes it to 5.6 */
  background:color-mix(in srgb, var(--redline) 84%, var(--ink));
  color:var(--paper); padding:0 4px; line-height:13px;
}
.ui__nav a.is-on{
  color:var(--ink); font-weight:600; background:var(--paper);
  box-shadow:inset 2px 0 0 var(--redline);
}
.ui__main{padding:14px; display:grid; gap:12px; align-content:start; min-width:0}

/* --- page head ------------------------------------------------ */
.ui__h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ui__h h4{
  margin:0; font-family:var(--font-serif); font-size:17px; font-weight:600;
  letter-spacing:-.012em; color:var(--ink);
}
.ui__h p{margin:2px 0 0; font-size:9px; letter-spacing:.05em; color:var(--ink-soft)}

/* --- generic controls ----------------------------------------- */
.ui-sel{
  display:inline-flex; align-items:center; gap:8px; height:24px; padding:0 8px;
  border:1px solid var(--ink-faint); background:var(--paper);
  font-size:9.5px; letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap;
}
.ui-sel b{font-weight:400; font-size:8px}
.ui-btn{
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px;
  font-size:9px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink); white-space:nowrap;
}
.ui-btn--ghost{background:none; color:var(--ink); border-color:var(--ink-faint); font-weight:500}
.ui-btn--stamp{background:var(--stamp); border-color:var(--stamp); color:var(--paper)}
.ui-ico{width:16px; height:16px; border:1px solid var(--ink-faint); flex:0 0 auto}
.ui-av{
  width:20px; height:20px; flex:0 0 auto; display:inline-flex;
  align-items:center; justify-content:center;
  background:var(--stamp); color:var(--paper);
  font-size:8px; font-weight:600; letter-spacing:.04em;
}
.ui-av--soft{background:var(--wf-fill); color:var(--ink-soft)}
.ui-tag{
  display:inline-flex; align-items:center; height:15px; padding:0 5px;
  font-size:8px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid currentColor; white-space:nowrap;
}
.ui-tag--bad{color:var(--redline-ink)}
.ui-tag--ok{color:var(--verified-ink)}
.ui-tag--note{color:var(--stamp)}
.ui-tag--mute{color:var(--ink-soft)}
.ui-tag--solid{background:var(--ink); border-color:var(--ink); color:var(--paper)}

/* --- KPI row -------------------------------------------------- */
.ui-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.ui-k{
  padding:9px 10px; background:var(--paper-raised); border:1px solid var(--paper-border);
  display:grid; gap:3px; align-content:start;
}
.ui-k__l{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-size:8px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft);
}
.ui-k__v{
  font-size:22px; font-weight:600; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.ui-k__v small{font-size:9px; font-weight:500; letter-spacing:.06em; color:var(--ink-soft); margin-left:4px}
.ui-k__s{font-size:8px; letter-spacing:.05em; color:var(--ink-soft)}
.ui-k--bad .ui-k__v{color:var(--redline-ink)}
.ui-k--ok  .ui-k__v{color:var(--verified-ink)}
.ui-k__spark{display:flex; align-items:flex-end; gap:1.5px; height:14px; margin-top:2px}
.ui-k__spark i{display:block; width:100%; background:var(--wf-fill)}

/* --- cards ---------------------------------------------------- */
.ui-cols{display:grid; grid-template-columns:var(--c,1.55fr 1fr); gap:10px; align-items:start}
.ui-card{background:var(--paper-raised); border:1px solid var(--paper-border)}
.ui-card__h{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-bottom:1px solid var(--rule);
}
.ui-card__h b{
  font-family:var(--font-serif); font-size:12px; font-weight:600; letter-spacing:-.005em;
}
.ui-card__h em{font-style:normal; font-size:8px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft)}
.ui-card__b{padding:10px; display:grid; gap:9px}
.ui-card__f{padding:7px 10px; border-top:1px solid var(--rule);
  font-size:8px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}

/* --- staffing meters ------------------------------------------ */
.ui-meter{display:grid; gap:4px}
.ui-meter__h{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.ui-meter__n b{font-size:10.5px; font-weight:600; letter-spacing:.02em}
.ui-meter__n span{font-size:8px; letter-spacing:.06em; color:var(--ink-soft); margin-left:6px}
.ui-meter__r{display:flex; align-items:center; gap:6px}
.ui-meter__r b{font-size:10px; font-weight:600; font-variant-numeric:tabular-nums}
.ui-meter__t{display:flex; gap:2px}
.ui-meter__t i{display:block; height:7px; flex:1; background:var(--wf-fill)}
.ui-meter__t i.on{background:var(--pass,var(--stamp))}
.ui-meter--bad{--pass:var(--redline)}
.ui-meter--ok {--pass:var(--verified)}
.ui-meter--over{--pass:var(--stamp)}

/* --- alert list ----------------------------------------------- */
.ui-alerts{display:grid; gap:1px; background:var(--rule)}
.ui-alert{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px;
  align-items:start; padding:7px 9px; background:var(--paper-raised);
}
.ui-alert__m{
  width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:600; border:1px solid currentColor; color:var(--ink-soft);
}
.ui-alert--hi .ui-alert__m{color:var(--redline-ink)}
.ui-alert--md .ui-alert__m{color:var(--stamp)}
.ui-alert__t{font-size:9.5px; line-height:1.4; letter-spacing:.01em}
.ui-alert__t b{font-weight:600}
.ui-alert__d{font-size:8px; letter-spacing:.06em; color:var(--ink-soft); white-space:nowrap}

/* --- person rows ---------------------------------------------- */
.ui-people{display:grid; gap:1px; background:var(--rule)}
.ui-p{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px;
  align-items:center; padding:6px 9px; background:var(--paper-raised);
}
.ui-p__n b{display:block; font-size:10px; font-weight:600; letter-spacing:.01em}
.ui-p__n span{display:block; font-size:8px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft)}
.ui-p__r{text-align:right}
.ui-p__r b{display:block; font-size:9px; font-weight:600; font-variant-numeric:tabular-nums}
.ui-p__r span{display:block; font-size:8px; color:var(--ink-soft)}

/* --- roster grid ---------------------------------------------- */
.ui-rota{border:1px solid var(--paper-border); background:var(--paper-raised); overflow:hidden}
.ui-rota__r{
  display:grid; grid-template-columns:112px repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--rule);
}
.ui-rota__r:last-child{border-bottom:0}
.ui-rota__r--h{background:var(--wf-fill)}
.ui-rota__c{
  padding:4px; border-right:1px solid var(--rule); min-height:34px;
  display:grid; gap:2px; align-content:start;
}
.ui-rota__c:last-child{border-right:0}
.ui-rota__r--h .ui-rota__c{
  min-height:0; padding:5px 6px;
  font-size:8px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.ui-rota__who{
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  border-right:1px solid var(--rule); min-width:0;
}
.ui-rota__who b{display:block; font-size:9.5px; font-weight:600; line-height:1.15; text-transform:none}
.ui-rota__who span{display:block; font-size:7.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft)}
.ui-shift{
  display:block; padding:2px 4px; border-left:2px solid var(--stamp);
  background:color-mix(in srgb, var(--stamp) 8%, transparent);
  font-size:7.5px; line-height:1.3; letter-spacing:.02em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.ui-shift em{display:block; font-style:normal; font-size:7px; color:var(--ink-soft)}
.ui-shift--n{border-left-color:var(--plum); background:color-mix(in srgb, var(--plum) 8%, transparent)}
.ui-shift--e{border-left-color:var(--verified); background:color-mix(in srgb, var(--verified) 9%, transparent)}
/* the unfilled cell is the product */
.ui-gap{
  display:flex; align-items:center; justify-content:center; min-height:22px;
  border:1px dashed var(--redline); color:var(--redline-ink);
  font-size:7.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}

/* --- modal ---------------------------------------------------- */
.ui-stage{position:relative}
.ui-scrim{position:absolute; inset:0; background:rgba(26,26,23,.34); z-index:2}
[data-theme="uv"] .ui-scrim{background:rgba(4,6,14,.55)}
.ui-modal{
  position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(300px,86%); background:var(--paper-raised);
  border:1px solid var(--ink); box-shadow:0 18px 44px -18px rgba(26,26,23,.5);
}
.ui-modal__h{padding:9px 11px; border-bottom:1px solid var(--rule);
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.ui-modal__h b{display:block; font-family:var(--font-serif); font-size:13px; font-weight:600}
.ui-modal__h span{display:block; margin-top:1px; font-size:8px;
  letter-spacing:.06em; color:var(--ink-soft)}
.ui-modal__b{padding:11px; display:grid; gap:8px}
.ui-modal__f{padding:9px 11px; border-top:1px solid var(--rule);
  display:flex; justify-content:flex-end; gap:6px}
.ui-field{display:grid; gap:3px}
.ui-field > b{font-size:8px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft)}
.ui-field > span{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  height:24px; padding:0 7px; border:1px solid var(--ink-faint); background:var(--paper);
  font-size:9.5px; letter-spacing:.03em; color:var(--ink);
}
.ui-field > span i{font-style:normal; font-size:7px; color:var(--ink-soft)}
.ui-row2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ui-row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px}
.ui-callout{
  padding:8px 9px; border-left:2px solid var(--stamp);
  background:color-mix(in srgb, var(--stamp) 6%, transparent);
  display:grid; gap:3px;
}
.ui-callout b{font-size:9.5px; font-weight:600}
.ui-callout span{font-size:8.5px; line-height:1.45; color:var(--ink-soft)}

/* --- request cards -------------------------------------------- */
.ui-reqs{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ui-req{background:var(--paper-raised); border:1px solid var(--paper-border); padding:9px 10px;
  display:grid; gap:7px; align-content:start}
.ui-req__h{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center}
.ui-req__meta{font-size:8.5px; letter-spacing:.05em; color:var(--ink-soft)}
.ui-req__impact{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:5px 7px; background:var(--paper); border:1px solid var(--rule);
  font-size:8.5px; letter-spacing:.05em; color:var(--ink-soft);
}
.ui-req__impact b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.ui-req__a{display:flex; gap:6px}
.ui-req__a .ui-btn{flex:1; justify-content:center}
.ui-req__a .ui-btn--ghost{flex:0 0 auto}

/* --- phone shell ---------------------------------------------- */
.ui-phones{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.ph{
  width:214px; flex:0 0 auto; background:var(--paper-raised);
  border:1px solid var(--ink); display:flex; flex-direction:column;
  font-family:var(--font-mono); color:var(--ink);
}
.ph__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 9px; font-size:7.5px; letter-spacing:.06em; color:var(--ink-soft);
  border-bottom:1px solid var(--rule);
}
.ph__status i{display:inline-block; width:12px; height:5px; border:1px solid currentColor; font-style:normal}
.ph__nav{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; align-items:center;
  padding:7px 9px; border-bottom:1px solid var(--ink);
}
.ph__nav b{font-family:var(--font-serif); font-size:12px; font-weight:600; text-align:center}
.ph__nav em{font-style:normal; font-size:11px; color:var(--ink-soft); line-height:1}
.ph__b{padding:9px; display:grid; gap:8px; align-content:start; flex:1}
.ph__tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  padding:6px 9px; border-top:1px solid var(--ink); background:var(--paper);
}
.ph__tabs i{
  height:12px; border:1px solid var(--ink-faint); font-style:normal;
}
.ph__tabs i.on{background:var(--ink); border-color:var(--ink)}
.ph__cap{
  margin:6px 0 0; text-align:center; font-size:8px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
}

/* phone content pieces */
.ph-hero{
  padding:10px; border:1px solid var(--ink); background:var(--paper);
  display:grid; gap:3px;
}
.ph-hero b{font-size:8px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft)}
.ph-hero strong{font-size:22px; font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1}
.ph-hero span{font-size:8px; letter-spacing:.06em; color:var(--ink-soft)}
.ph-two{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.ph-stat{padding:7px 8px; border:1px solid var(--paper-border); display:grid; gap:2px}
.ph-stat b{font-size:7.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft)}
.ph-stat strong{font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1}
.ph-stat--in strong{color:var(--verified-ink)}
.ph-stat--out strong{color:var(--redline-ink)}
.ph-sec{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.ph-sec b{font-family:var(--font-serif); font-size:11px; font-weight:600}
.ph-sec em{font-style:normal; font-size:7.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft)}
.ph-list{display:grid; gap:1px; background:var(--rule)}
.ph-tx{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px;
  align-items:center; padding:5px 6px; background:var(--paper-raised);
}
.ph-tx__i{width:16px; height:16px; border:1px solid var(--ink-faint); flex:0 0 auto}
.ph-tx__n b{display:block; font-size:9.5px; font-weight:600}
.ph-tx__n span{display:block; font-size:7.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft)}
.ph-tx__v{font-size:10px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.ph-in{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  height:26px; padding:0 8px; border:1px solid var(--ink-faint); background:var(--paper);
  font-size:9.5px; letter-spacing:.03em; color:var(--ink-soft);
}
.ph-in--filled{color:var(--ink)}
.ph-in i{font-style:normal; font-size:8px; color:var(--ink-soft)}
.ph-cta{
  display:flex; align-items:center; justify-content:center; height:28px;
  background:var(--ink); color:var(--paper);
  font-size:9px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
}
.ph-cta--ghost{background:none; color:var(--ink); border:1px solid var(--ink)}
.ph-or{
  display:flex; align-items:center; gap:8px;
  font-size:7.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.ph-or::before,.ph-or::after{content:""; flex:1; height:1px; background:var(--rule)}
.ph-note{font-size:8px; line-height:1.5; letter-spacing:.03em; color:var(--ink-soft); text-align:center}
.ph-note b{color:var(--ink); font-weight:600}

/* VPN pieces */
.ph-shield{
  display:grid; gap:5px; justify-items:center; padding:14px 10px;
  border:1px solid var(--verified); background:color-mix(in srgb, var(--verified) 7%, transparent);
}
.ph-shield b{font-size:9px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verified-ink)}
.ph-shield strong{font-size:24px; font-weight:600; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; line-height:1}
.ph-shield span{font-size:8px; letter-spacing:.07em; color:var(--ink-soft)}
.ph-srv{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:7px;
  align-items:center; padding:5px 6px; background:var(--paper-raised);
}
.ph-srv__f{width:14px; height:10px; border:1px solid var(--ink-faint); flex:0 0 auto}
.ph-srv__n b{display:block; font-size:9.5px; font-weight:600}
.ph-srv__n span{display:block; font-size:7.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-soft)}
.ph-srv__l{width:34px; height:5px; background:var(--wf-fill); flex:0 0 auto; position:relative}
.ph-srv__l i{position:absolute; inset:0 auto 0 0; width:var(--l); background:var(--ink-soft)}
.ph-srv__l.hi i{background:var(--redline)}
.ph-srv__p{font-size:8.5px; font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap}
.ph-srv.is-on{box-shadow:inset 2px 0 0 var(--verified)}
.ph-srv.is-on .ph-srv__n b{color:var(--verified-ink)}

/* --- responsive ----------------------------------------------- */
@container (max-width: 640px){
  .ui__body{grid-template-columns:minmax(0,1fr)}
  .ui__nav{display:none}
  .ui-kpis{grid-template-columns:1fr 1fr}
  .ui-cols{grid-template-columns:minmax(0,1fr)}
  .ui-reqs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ui-phones{gap:10px}
  .ph{width:min(214px,100%)}
}

/* the rebuilt interfaces need to scroll rather than squeeze on a phone */
.uiscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.uiscroll > .ui{min-width:660px}
@media (max-width:760px){
  .uiscroll::after{
    content:"swipe →"; display:block; text-align:right; margin-top:.3rem;
    font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
  }
  .uiscroll > .ui-phones{min-width:0}
}

/* phones in a set stand at one height — a row of screens is a comparison,
   and ragged bottoms make it read as three unrelated pictures */
.ui-phones{align-items:stretch}
.ui-phones > div{display:flex; flex-direction:column}
.ui-phones > div > .ph{flex:1}
.ph__b{min-height:0}

/* --- real screens on a case page ------------------------------ */
.real{display:grid; gap:clamp(.7rem,1.8vw,1.1rem);
      grid-template-columns:repeat(var(--cols,1),minmax(0,1fr)); align-items:start}
.real__i{margin:0; min-width:0}
.real__i img{
  display:block; width:100%; height:auto;
  background:var(--paper); border:1px solid var(--paper-border);
}
.real__i figcaption{
  margin-top:.45rem;
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
@media (max-width:760px){
  /* three phones at 390px is 110px each — stack the desktop screens,
     keep phones side by side because they still read at that size */
  .real{grid-template-columns:repeat(min(var(--cols,1),3),minmax(0,1fr)); gap:.6rem}
  .real:not([style*="--cols:1"]) .real__i figcaption{font-size:.625rem; letter-spacing:.08em}
}

/* =============================================================
   THE PLATE VIEWER
   A contact sheet of the shipped screens at one uniform height,
   and a full-size viewer over the page. Uniform height is the
   whole point: a 1500x1720 report and a 620x1344 phone cannot
   share a grid without one of them becoming unreadable.
   ============================================================= */

.contact-wrap{position:relative}
.contact{
  list-style:none; margin:0; padding:0 0 .5rem;
  display:flex; gap:clamp(.6rem,1.6vw,1rem); align-items:flex-start;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scrollbar-width:thin;
}
.contact__i{flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; gap:.45rem}
.contact__t{
  position:relative; display:block; height:clamp(190px,26vw,300px);
  background:var(--paper); border:1px solid var(--paper-border);
  cursor:zoom-in; overflow:hidden;
  transition:border-color var(--t-fast) ease, box-shadow var(--t-base) var(--ease-out);
}
.contact__t img{
  display:block; height:100%; width:auto; max-width:none;
  /* the top of a screen is the part worth previewing */
  object-fit:cover; object-position:top center;
}
.contact__t:hover,.contact__t:focus-visible{border-color:var(--ink); box-shadow:var(--lift-2)}
.contact__n{
  position:absolute; left:0; top:0;
  min-width:1.55rem; padding:.15rem .3rem; text-align:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
.contact__l{
  font-family:var(--font-mono); font-size:var(--fs-micro); font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);
}
.contact__hint{
  margin:.5rem 0 0;
  font-family:var(--font-mono); font-size:var(--fs-mini); letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* --- the viewer ---------------------------------------------- */
.pv{
  position:fixed; inset:0; z-index:200; display:none;
  background:color-mix(in srgb, var(--paper) 96%, var(--ink));
}
.pv.is-on{display:grid; grid-template-rows:auto minmax(0,1fr) auto}
.pv__bar,.pv__foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem clamp(1rem,4vw,2.4rem);
  font-family:var(--font-mono); font-size:var(--fs-mini); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}
.pv__bar{border-bottom:1px solid var(--rule)}
.pv__foot{border-top:1px solid var(--rule); justify-content:center; gap:.5rem}
.pv__cap b{color:var(--ink)}
.pv__stage{
  display:grid; place-items:center; padding:clamp(.8rem,2.5vw,1.8rem); min-height:0;
}
.pv__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  border:1px solid var(--paper-border); box-shadow:var(--lift-3); background:var(--paper);
}
.pv__b{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  min-height:32px; min-width:32px; padding:.3rem .7rem;
  background:none; border:1px solid var(--paper-border); color:var(--ink-soft);
  font:inherit; cursor:pointer;
  transition:border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.pv__b:hover:not(:disabled){border-color:var(--ink); color:var(--ink)}
.pv__b:disabled{opacity:.35; cursor:default}
.pv__x{border:0; font-size:1.1rem; line-height:1}
.pv__of{font-variant-numeric:tabular-nums; padding-inline:.6rem; color:var(--ink)}
body.pv-open{overflow:hidden}

@media (max-width:760px){
  .contact__t{height:200px}
  .pv__bar,.pv__foot{padding-inline:1rem}
}
@media (prefers-reduced-motion:reduce){
  .contact__t{transition:none}
}

/* the plate number reads better beside the label than stamped on the
   screen, where it landed on whatever the product put top-left */
.contact__l{display:flex; align-items:baseline; gap:.5rem}
.contact__l b{
  color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

/* A 1500x1720 report shrunk to fit 800px of viewport is unreadable, which
   defeats the point of opening it. So the stage scrolls instead: the image
   arrives at full width and you read down it, with the chrome fixed. */
.pv__stage{overflow:auto; place-items:start center; -webkit-overflow-scrolling:touch}
.pv__stage img{max-height:none; height:auto}