/* Assay — static site styles: "The Control Surface".
   The site reads as an instrument of record: warm paper, a filing serif with
   tabular figures, double-rule exhibit borders, one ledger-green accent with red
   reserved for the single adverse event. Light is the default; the dark set is a
   system-preference override (no JavaScript, no manual toggle). Typography and the
   filing register carry the identity; everything else stays quiet. */

/* ---------- Fonts (self-hosted, latin subset, SIL OFL) ----------
   Paths are relative to THIS file (public/assets/site.css) -> public/assets/fonts/.
   Source Serif 4 is a variable build (weight 300..700, roman + italic); IBM Plex
   Mono ships as static instances (400 / 500 / 600 and italic 400). */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/source-serif-4-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-italic-400-latin.woff2') format('woff2');
}

/* ---------- Theme tokens ----------
   Both themes define the full set on :root, so no color has a hardcoded-only
   value. Default :root = light (the house white-document rule); the media query
   flips to dark when the system prefers it. */
:root {
  color-scheme: light;
  --paper:#f6f3ec;
  --panel:#fdfbf6;
  --panel-2:#efeadf;
  --ink:#211d16;
  --muted:#6a6152;
  --line:#d9d2c3;
  --line-strong:#8f8672;
  --accent:#175d43;      /* ledger green */
  --accent-soft:#e2ece6;
  --red:#9c2a20;         /* reserved: the single adverse event only */
  --red-soft:#f5e4e0;
  --on-accent:#ffffff;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper:#171410;
    --panel:#1e1a15;
    --panel-2:#231f18;
    --ink:#ebe4d6;
    --muted:#a89d8a;
    --line:#3a342a;
    --line-strong:#5c5443;
    --accent:#5cbb92;
    --accent-soft:#20302a;
    --red:#e0685c;
    --red-soft:#382019;
    --on-accent:#132019;
  }
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); }
body {
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* safety net: wide content scrolls in its own container, never the body */
}
img, svg { max-width:100%; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }

/* Visible keyboard focus everywhere (a11y floor) */
a:focus-visible,
.btn:focus-visible,
.nav-toggle:focus-visible,
summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.shell { max-width:74rem; margin:0 auto; padding:0 clamp(18px,4vw,44px); }
.measure { max-width:46rem; }

/* ---------- small typographic parts ---------- */
.kicker {
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.kicker b { color:var(--accent); font-weight:600; }
.exhibit-tag {
  display:inline-block;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  padding:5px 10px;
}
.exhibit-tag.red { background:var(--red); }
.rule-double { border:0; border-top:4px double var(--line-strong); margin:0; }
.small { font-size:.85rem; color:var(--muted); }

/* ---------- header (shared across every page) ---------- */
.site-header {
  display:flex;
  align-items:center;
  gap:1rem 1.4rem;
  flex-wrap:wrap;
  padding:14px clamp(18px,4vw,44px);
  border-bottom:1px solid var(--line);
  background:var(--paper);
}
.site-header .brand { display:flex; align-items:center; gap:.6rem; }
.site-header .brand img { display:block; height:30px; width:30px; }
.site-header .wordmark {
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:1.4rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
}
.site-header .wordmark:hover { text-decoration:none; color:var(--accent); }
.site-header .header-tag { font-size:.85rem; color:var(--muted); font-style:italic; }
.site-header nav { margin-left:auto; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.site-header nav a {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent;
}
.site-header nav a:hover { border-bottom-color:var(--accent); text-decoration:none; }

/* grouped nav — a group label is a REAL LINK to its section landing page;
   the chevron <button> beside it discloses the group's menu, which opens as a
   small filing card: panel ground, hairline frame, and the double-rule top
   border of the exhibit idiom. assets/nav.js wires aria-expanded, Esc, arrow
   keys, hover-open and outside-click; without it the html:not(.js) fallback
   below reveals the card on hover / keyboard focus. On narrow screens the card
   files inline in the flow instead of floating — see the 700px block below. */
.site-header nav .nav-group {
  position:relative;
  display:inline-flex;
  align-items:center;
}
.site-header nav .nav-toggle {
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  margin:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  align-self:stretch;
  padding:0;
  color:var(--ink);
}
.site-header nav .nav-toggle::before {
  content:"";
  width:.4em;
  height:.4em;
  margin-top:-.25em;
  border-right:1.5px solid var(--line-strong);
  border-bottom:1.5px solid var(--line-strong);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.site-header nav .nav-toggle:hover::before { border-color:var(--accent); }
.site-header nav .nav-group.open > .nav-toggle::before { transform:rotate(225deg); margin-top:.15em; }
.site-header nav .nav-menu {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:60;
  min-width:12.5rem;
  padding:6px 0;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:4px double var(--line-strong);
  box-shadow:0 12px 28px rgba(33,29,22,.12);
}
.site-header nav .nav-group.open > .nav-menu { display:block; }
/* no-JS fallback: the card still reveals on hover and on keyboard focus */
html:not(.js) .site-header nav .nav-group:hover > .nav-menu,
html:not(.js) .site-header nav .nav-group:focus-within > .nav-menu { display:block; }
.site-header nav .nav-menu a {
  display:block;
  padding:9px 18px;
  border-bottom:0;
}
.site-header nav .nav-menu a:hover {
  background:var(--accent-soft);
  color:var(--accent);
  border-bottom:0;
}
/* location marks: the section you are in keeps a quiet accent underline at the
   top level; the exact page is stamped in ledger green inside its card */
.site-header nav > a.here,
.site-header nav > a[aria-current],
.site-header nav .nav-group > a[aria-current] { border-bottom-color:var(--accent); }
.site-header nav .nav-menu a[aria-current] { color:var(--accent); font-weight:600; }
@media (prefers-reduced-motion: reduce) {
  .site-header nav .nav-toggle::before { transition:none; }
}

/* ---------- hero ---------- */
.hero { padding:clamp(44px,7vw,84px) 0 clamp(30px,4vw,48px); }
.hero h1 {
  font-size:clamp(2rem,4.6vw,3.3rem);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.012em;
  max-width:22ch;
  margin:14px 0 20px;
}
.hero .lede { font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:56ch; color:var(--ink); }
.hero .lede em { font-style:italic; }

.honest {
  margin:26px 0 0;
  max-width:56ch;
  border-left:4px solid var(--accent);
  background:var(--accent-soft);
  padding:14px 18px;
}
.honest .kicker { color:var(--accent); }
.honest p { margin-top:6px; font-size:.98rem; }

.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

/* ---------- buttons ---------- */
.btn {
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:13px 20px;
  text-decoration:none;
  border:1.5px solid var(--ink);
  color:var(--ink);
  background:transparent;
  display:inline-block;
}
.btn:hover { text-decoration:none; background:var(--panel-2); }
.btn.primary,
.btn-primary { background:var(--ink); color:var(--paper); }
.btn.primary:hover,
.btn-primary:hover { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
/* legacy alias: the outline button on pages not yet migrated */
.btn-secondary { background:transparent; border:1.5px solid var(--ink); color:var(--ink); }

/* ---------- exhibits / filing register ---------- */
.exhibit {
  margin:clamp(30px,4vw,44px) 0 0;
  border-top:4px double var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--panel);
}
.exhibit.spaced { margin-top:24px; }
.exhibit-head {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
}
.exhibit-head.divided { border-top:1px solid var(--line); }
.exhibit-head .title { font-style:italic; font-size:1rem; }
.tablewrap { overflow-x:auto; padding:0 18px 16px; }
table.register {
  width:100%;
  border-collapse:collapse;
  min-width:600px;
  font-size:.92rem;
}
table.register caption {
  caption-side:bottom;
  text-align:left;
  padding:12px 2px 2px;
  font-size:.82rem;
  color:var(--muted);
  font-style:italic;
}
table.register th {
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:14px 14px 8px 2px;
  border-bottom:1px solid var(--line-strong);
}
table.register td {
  padding:11px 14px 11px 2px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
table.register td.c-obj { font-weight:600; min-width:11rem; }
table.register td.c-status { font-family:var(--mono); font-size:.78rem; white-space:nowrap; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--accent); margin-right:7px; vertical-align:baseline; }
.dot.red { background:var(--red); }

/* ---------- hero grid ---------- */
.herogrid { display:block; }
.heroleft { min-width:0; }
.heroright { min-width:0; margin-top:38px; }
@media (min-width:1080px) {
  .herogrid {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(420px,510px);
    column-gap:clamp(36px,4.5vw,72px);
    align-items:start;
  }
  .heroright { margin-top:6px; }
}
.heroright .exhibit { margin:0; }
.heroright .dwrap { padding:14px 14px 8px; }

/* ---------- marginalia rail (filing apparatus) ----------
   The rail grid holds ONLY the section head, the prose column, and the sticky rail.
   Full-width exhibits live in a SIBLING .shell after the grid, so the sticky rail's
   containing block ends before them — it can never travel over an exhibit. */
.railmain, .rail, .railhead { min-width:0; }
.rail { margin-top:30px; }
@media (min-width:1140px) {
  .railgrid { display:grid; grid-template-columns:minmax(0,1fr) 230px; column-gap:clamp(40px,4.5vw,72px); }
  .railgrid > .railhead { grid-column:1 / -1; grid-row:1; }
  .railgrid > .railmain { grid-column:1; grid-row:2; }
  .railgrid > .rail { grid-column:2; grid-row:2; margin-top:10px; position:sticky; top:24px; align-self:start; }
}
.railcard { border-top:3px double var(--line-strong); padding:12px 2px 4px; max-width:46rem; }
.railcard + .railcard { margin-top:18px; }
.railcard .rk {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.railcard p,
section.doc .railcard p {
  font-size:.86rem;
  line-height:1.55;
  color:var(--muted);
  font-style:italic;
  margin:0 0 8px;
  max-width:none;
}
.railcard a { color:var(--accent); }
.pathscard { margin-top:18px; }

/* ---------- filing stamp ---------- */
.stamp {
  display:inline-block;
  margin-top:24px;
  padding:10px 18px 12px;
  border:2px solid var(--accent);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px var(--accent);
  color:var(--accent);
  font-family:var(--mono);
  text-transform:uppercase;
  text-align:center;
  transform:rotate(-2.5deg);
}
.stamp .s1 { display:block; font-size:1.05rem; font-weight:600; letter-spacing:.3em; padding-left:.3em; }
.stamp .s2 { display:block; font-size:.6rem; letter-spacing:.22em; margin-top:5px; padding-left:.22em; }
.stamp .s3 { display:block; font-size:.6rem; letter-spacing:.18em; margin-top:3px; color:var(--muted); }

/* ---------- fact strip ---------- */
.factstrip {
  margin:clamp(34px,5vw,52px) 0 0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border:1px solid var(--line-strong);
  border-top:4px double var(--line-strong);
  background:var(--panel);
}
.fact { padding:20px 20px 22px; border-bottom:1px solid var(--line); }
.fact:last-child { border-bottom:0; }
@media (min-width:820px) {
  .fact { border-bottom:0; border-right:1px solid var(--line); }
  .fact:last-child { border-right:0; }
}
.fact h2 { font-size:1.02rem; font-weight:600; margin:8px 0 6px; }
.fact p { font-size:.92rem; color:var(--muted); }
.fact .kicker { font-size:.66rem; }

/* ---------- document sections ---------- */
section.doc { padding:clamp(44px,7vw,80px) 0 0; }
section.doc .rule-double { margin-bottom:26px; }
section.doc h2 {
  font-size:clamp(1.5rem,2.8vw,2.15rem);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:14px 0 16px;
  max-width:26ch;
}
section.doc h3 { font-size:1.08rem; font-weight:600; margin:26px 0 8px; }
section.doc p { max-width:60ch; margin-bottom:14px; }
section.doc p.small { max-width:60ch; }

blockquote.board {
  margin:26px 0;
  border-left:4px solid var(--ink);
  padding:16px 22px;
  background:var(--panel);
  max-width:58ch;
  font-size:1.08rem;
  font-style:italic;
  line-height:1.55;
}
blockquote.board footer {
  font-style:normal;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:10px;
}

/* mapping table */
table.map { width:100%; border-collapse:collapse; min-width:640px; font-size:.94rem; }
table.map th {
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:left;
  padding:12px 16px 8px 2px;
  border-bottom:1px solid var(--line-strong);
}
table.map td { padding:12px 16px 12px 2px; border-bottom:1px solid var(--line); vertical-align:top; }
table.map td:first-child { font-weight:600; white-space:nowrap; font-size:.9rem; }
.mapwrap { overflow-x:auto; margin:18px 0 8px; border-top:4px double var(--line-strong); background:var(--panel); padding:0 18px 8px; }

/* ---------- adverse event exhibit ---------- */
.event {
  margin:26px 0 10px;
  border-top:4px double var(--line-strong);
  border-bottom:1px solid var(--line-strong);
  background:var(--panel);
}
.event .exhibit-head { border-bottom:1px solid var(--line); }
.event .exhibit-tag { background:var(--red); }
.event .diagram { margin:0; }
.codewrap { overflow-x:auto; padding:16px 18px; }
pre.filing {
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.7;
  min-width:560px;
}
pre.filing .path { color:var(--muted); }
pre.filing .del {
  display:block;
  background:var(--red-soft);
  color:var(--red);
  padding:1px 8px;
  margin:0 -8px;
}
pre.filing .ctx { color:var(--muted); }
pre.filing .fail { color:var(--red); font-weight:600; }
pre.filing .ok { color:var(--accent); }
pre.filing .cmd { font-weight:600; }
.event-captions {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--line);
}
.event-cap { padding:16px 18px 18px; }
.event-cap + .event-cap { border-top:1px solid var(--line); }
@media (min-width:820px) {
  .event-cap + .event-cap { border-top:0; border-left:1px solid var(--line); }
}
.event-cap h3 { margin:6px 0 6px !important; font-size:.98rem !important; }
.event-cap p { font-size:.9rem; color:var(--muted); margin-bottom:0 !important; }

/* ---------- mechanism cards ---------- */
.mechgrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin:24px 0 8px;
}
.mech {
  border:1px solid var(--line-strong);
  border-top:3px solid var(--ink);
  background:var(--panel);
  padding:18px 18px 20px;
}
.mech .num { font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--accent); }
.mech h3 { margin:8px 0 6px !important; font-size:1.02rem !important; }
.mech p { font-size:.9rem; color:var(--muted); margin-bottom:0 !important; max-width:none !important; }

/* ---------- diagrams (inline SVG, theme-aware via currentColor + tokens) ---------- */
figure.diagram { margin:26px 0 10px; }
figure.diagram .dwrap { overflow-x:auto; padding:18px 18px 10px; }
figure.diagram svg { display:block; width:100%; height:auto; }
figure.diagram figcaption {
  padding:12px 18px 16px;
  font-size:.85rem;
  color:var(--muted);
  font-style:italic;
  border-top:1px solid var(--line);
  line-height:1.55;
}
/* per-diagram intrinsic widths — the SVG scrolls inside .dwrap, never the page */
#svg-schematic { min-width:460px; }
#svg-c0 { min-width:700px; }
#svg-d0 { min-width:760px; }

.dg-box { fill:var(--panel-2); stroke:currentColor; stroke-width:1.2; }
.dg-ghost { fill:var(--panel); }
.dg-ln { stroke:currentColor; stroke-width:1.2; fill:none; }
.dg-thin { stroke:var(--line); stroke-width:1; }
.dg-dash { stroke-dasharray:5 5; }
.dg-mut { stroke:var(--muted); }
.dg-acc { stroke:var(--accent); }
.dg-accf { fill:var(--accent); }
.dg-redl { stroke:var(--red); }
.dg-redf { fill:var(--red); }
.dg-redsoftf { fill:var(--red-soft); }
.dg-panelf { fill:var(--panel); }
.dg-t { font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; fill:currentColor; }
.dg-th { font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.dg-tm { fill:var(--muted); }
.dg-ta { fill:var(--accent); }
.dg-tr { fill:var(--red); }
.dg-ts { font-family:var(--serif); font-style:italic; font-size:12.5px; letter-spacing:0; }
.dg-num { font-family:var(--mono); font-weight:600; font-size:12px; fill:currentColor; }

/* ---------- limits ---------- */
.limits {
  border:1.5px solid var(--ink);
  background:var(--panel);
  padding:22px 24px 10px;
  margin:24px 0 8px;
  max-width:60ch;
}
.limits ul { list-style:none; }
.limits li {
  padding:10px 0 12px 26px;
  position:relative;
  border-bottom:1px solid var(--line);
  font-size:.95rem;
}
.limits li:last-child { border-bottom:0; }
.limits li::before { content:"—"; position:absolute; left:0; color:var(--red); font-weight:600; }
.limits li b { font-weight:600; }

/* ---------- tiers ---------- */
.tiers {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin:24px 0 8px;
}
.tier {
  border:1px solid var(--line-strong);
  background:var(--panel);
  display:flex;
  flex-direction:column;
  padding:22px 22px 24px;
}
.tier.lead { border:2px solid var(--accent); background:var(--panel); }
.tier .price {
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.tier.lead .price { color:var(--accent); }
.tier h3 { font-size:1.25rem !important; margin:8px 0 4px !important; }
.tier .stage { font-size:.78rem; font-style:italic; color:var(--muted); margin-bottom:10px; }
.tier ul { list-style:none; margin:8px 0 18px; flex:1; }
.tier li { padding:7px 0 7px 20px; position:relative; font-size:.92rem; border-bottom:1px solid var(--line); }
.tier li:last-child { border-bottom:0; }
.tier li::before { content:"·"; position:absolute; left:4px; color:var(--accent); font-weight:700; }
.tier .btn { text-align:center; }

/* ---------- close ---------- */
.close-band {
  margin-top:clamp(48px,7vw,84px);
  border-top:4px double var(--line-strong);
  background:var(--panel-2);
  padding:clamp(40px,6vw,64px) 0;
}
.close-band h2 { font-size:clamp(1.6rem,3vw,2.3rem); font-weight:600; line-height:1.15; max-width:24ch; margin:12px 0 14px; }
.close-band p { max-width:56ch; margin-bottom:22px; }

/* ---------- footer (shared across every page) ---------- */
.site-footer {
  border-top:1px solid var(--line);
  padding:28px clamp(18px,4vw,44px) 46px;
  margin-top:0;
  background:var(--paper);
  color:var(--muted);
}
.site-footer .container { max-width:74rem; margin:0 auto; padding:0; }
.site-footer p { font-size:.82rem; margin:.35rem 0; color:var(--muted); }
.site-footer > .container > p:first-child {
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink);
}
.site-footer a { color:var(--accent); }
.site-footer .legal { font-size:.72rem; line-height:1.6; color:var(--muted); max-width:82ch; }
.site-footer .legal + .legal { margin-top:8px; }
.site-footer .footer-nav { font-size:.82rem; margin-top:.6rem; }
.site-footer .footer-nav a { text-decoration:none; }
.site-footer .footer-nav a:hover { text-decoration:underline; }

/* ---------- responsive ---------- */
@media (max-width:700px) {
  .site-header { gap:.75rem 1rem; }
  .site-header nav { margin-left:0; width:100%; gap:.35rem 1rem; }
  .site-header nav a { min-height:40px; display:inline-flex; align-items:center; }
  /* groups file inline: the open card sits in the flow on its own row,
     framed by a left rule instead of floating over the page */
  .site-header nav .nav-group { position:static; flex-wrap:wrap; }
  .site-header nav .nav-group.open,
  html:not(.js) .site-header nav .nav-group:focus-within { width:100%; }
  .site-header nav .nav-toggle { width:34px; min-height:40px; align-self:auto; }
  .site-header nav .nav-menu {
    position:static;
    width:100%;
    min-width:0;
    margin:2px 0 8px;
    padding:2px 0 2px 14px;
    border:0;
    border-left:2px solid var(--line-strong);
    box-shadow:none;
  }
  .site-header nav .nav-menu a { min-height:36px; padding:6px 10px; }
}
@media (max-width:420px) {
  body { font-size:16px; }
  .hero h1 { font-size:1.9rem; }
}

/* ---------- explainer pages (methodology, briefs, registers, lifecycle, statusgen) ----------
   The mechanism explainers compose the shared header/footer and the exhibit / section /
   register system above; these parts are specific to long-form reference prose. */

/* inline code — register apparatus, mono on a faint panel */
code {
  font-family:var(--mono);
  font-size:.84em;
  background:var(--panel-2);
  padding:.1em .4em;
  color:var(--ink);
}
a code { color:inherit; }

/* running prose lists — the reset zeroes list padding, so restore it (scoped to
   .measure so the landing's custom-bulleted .limits / .tier lists are untouched) */
.measure ul, .measure ol { padding-left:1.35em; margin:0 0 14px; max-width:60ch; }
.measure li { margin:6px 0; padding-left:3px; }
.measure li::marker { color:var(--accent); }

/* a boxed note / caveat in the filing idiom — candor is load-bearing */
.note {
  margin:22px 0;
  max-width:60ch;
  border-left:4px solid var(--line-strong);
  background:var(--panel);
  padding:14px 20px 16px;
}
.note .rk {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.note p { font-size:.95rem; margin:0; max-width:none; }
.note p + p { margin-top:10px; }
.note strong, .note b { font-weight:600; color:var(--ink); }

/* "Reading" article slots — pending-publication cards on the mech grid */
.mech h4 { margin:8px 0 6px; font-size:1.02rem; font-weight:600; }
.mech .coming {
  font-family:var(--mono);
  font-size:.66rem !important;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:12px !important;
}

/* the lifecycle token arc — a short state-flow strip in ledger green */
pre.stateflow {
  font-family:var(--mono);
  font-size:.88rem;
  letter-spacing:.03em;
  color:var(--accent);
}

/* bottom page navigation (back-links), mono, above a hairline */
.pagenav {
  border-top:1px solid var(--line);
  margin-top:clamp(40px,6vw,64px);
  padding-top:20px;
}
.pagenav a {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* metrics ("how it runs") page — state badges and value/family cells.
   Red stays reserved for the adverse-event exhibit, so could-not-check reads as a
   dashed, muted absence rather than an alarm. */
.state {
  display:inline-block;
  font-family:var(--mono);
  font-size:.64rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 7px;
  border:1px solid var(--line-strong);
  color:var(--muted);
  white-space:nowrap;
}
.state-measured { color:var(--accent); border-color:var(--accent); }
.state-partial { color:var(--ink); border-color:var(--line-strong); }
.state-cnc { color:var(--muted); border-style:dashed; }
table.register td.m-value { font-family:var(--mono); font-size:.8rem; white-space:normal; }
.m-family {
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}
/* Client-render states for the live "how it runs" table: a muted, italic
   loading line, and an error line that reads as an absence — never red, which
   stays reserved for the adverse-event exhibit. */
.js-loading { color:var(--muted); font-style:italic; }
.js-error { color:var(--muted); font-style:italic; }

/* explainer diagram intrinsic widths — each SVG scrolls inside .dwrap, never the page */
#intake-loop-svg { min-width:720px; }
#desk-flow-svg { min-width:760px; }
#feedback-loop-svg { min-width:600px; }

/* ---------- reduced motion (a11y floor) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}

/* ---------- GitHub Apps page (apps.html) ---------- */
.apps-owner { padding:18px 20px 6px; }
.apps-owner p { margin:0 0 14px; }
.apps-owner label {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-block;
  min-width:14ch;
}
.apps-owner input {
  font-family:var(--mono);
  font-size:.9rem;
  padding:7px 10px;
  border:1.5px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  min-width:28ch;
  max-width:100%;
}
.apps-owner input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.apps-owner .legal,
.apps-table .legal { display:block; font-size:.78rem; line-height:1.5; color:var(--muted); margin-top:6px; max-width:70ch; }
.apps-table form { margin:0; }
.apps-table .btn { padding:9px 14px; white-space:nowrap; }
.apps-table td { vertical-align:middle; }
.apps-nojs[hidden] { display:none; }

/* the fleet's toolset register (auth section) — the in/never marks are mono text,
   green for carried and muted for absent; never red (red stays reserved for the
   single adverse-event exhibit). */
.apps-tool {
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.apps-tool.in { color:var(--accent); }
.apps-tool.never { color:var(--muted); }

/* sample icon family — square filing swatches, ledger-green line art, theme-aware
   through currentColor (one accent only, no gold). */
.icon-family {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:14px;
  padding:18px 18px 22px;
}
.icon-item { text-align:center; }
.icon-avatar {
  width:64px;
  height:64px;
  margin:0 auto 9px;
  display:grid;
  place-items:center;
  border:1px solid var(--line-strong);
  background:var(--panel);
  color:var(--accent);
}
.icon-avatar svg { width:40px; height:40px; display:block; stroke:currentColor; fill:none; }
.icon-item span {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}

/* apps-created.html: the seven avatars as one clean register table — a swatch,
   the role, its filename, and a download button per row. Reuses the .icon-avatar
   swatch, dropping the family grid's bottom margin inside a cell. */
.icon-table td { vertical-align:middle; }
.icon-table td.c-icon { width:80px; padding-top:10px; padding-bottom:10px; }
.icon-table .icon-avatar { width:52px; height:52px; margin:0; }
.icon-table .icon-avatar img { display:block; width:44px; height:44px; }
.icon-table .btn { padding:8px 14px; white-space:nowrap; }

/* apps-created.html: the assembled-command block's actions (copy + create
   another), sitting under the generated script inside its exhibit. */
.assembled-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:4px 18px 16px;
}