/* Template Control Room. Slate and ultramarine, with one device that carries
   the whole argument: a 45-degree hatch means THIS DATA DOES NOT EXIST. It is
   on every absent field, every ticket with no reason, and the budget panel
   before the quota is read. An empty cell and a missing cell look different,
   because on this page the difference is the point. */

:root {
  --ground: #eceef3;
  --panel: #f9fafc;
  --panel-2: #e3e6ef;
  --line: #c8cddd;
  --line-soft: #dde1ec;
  --ink: #141826;
  --ink-2: #414761;
  --muted: #71789a;

  --accent: #3a3fa6;
  --accent-soft: rgba(58, 63, 166, .10);
  --accent-line: rgba(58, 63, 166, .34);

  --crit: #b22f3e;
  --crit-soft: rgba(178, 47, 62, .10);
  --warn: #8a6a12;
  --warn-soft: rgba(138, 106, 18, .11);
  --ok: #2b6f47;
  --ok-soft: rgba(43, 111, 71, .11);

  --hatch: repeating-linear-gradient(45deg,
      transparent 0 3px, var(--line) 3px 4px);

  --sp: 4px;
  --r: 2px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ui: "Chivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --read: "Spectral", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d0f17;
    --panel: #14171f;
    --panel-2: #1b1f2b;
    --line: #2b3040;
    --line-soft: #21252f;
    --ink: #e6e8f2;
    --ink-2: #b2b7cb;
    --muted: #7c85a3;

    --accent: #9096f2;
    --accent-soft: rgba(144, 150, 242, .13);
    --accent-line: rgba(144, 150, 242, .38);

    --crit: #f0707e;
    --crit-soft: rgba(240, 112, 126, .13);
    --warn: #dda93f;
    --warn-soft: rgba(221, 169, 63, .13);
    --ok: #60c184;
    --ok-soft: rgba(96, 193, 132, .13);
  }
}

:root[data-theme="dark"] {
  --ground: #0d0f17;
  --panel: #14171f;
  --panel-2: #1b1f2b;
  --line: #2b3040;
  --line-soft: #21252f;
  --ink: #e6e8f2;
  --ink-2: #b2b7cb;
  --muted: #7c85a3;
  --accent: #9096f2;
  --accent-soft: rgba(144, 150, 242, .13);
  --accent-line: rgba(144, 150, 242, .38);
  --crit: #f0707e;
  --crit-soft: rgba(240, 112, 126, .13);
  --warn: #dda93f;
  --warn-soft: rgba(221, 169, 63, .13);
  --ok: #60c184;
  --ok-soft: rgba(96, 193, 132, .13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r);
}

code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 0 .3em;
  word-break: break-word;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- the rail ---- */
.rail {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--sp) * 3);
  padding: calc(var(--sp) * 3) calc(var(--sp) * 6);
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow-x: auto;
}
.rail a { color: var(--muted); text-decoration: none; }
.rail a:hover { color: var(--ink); }
.rail .home {
  color: var(--ink); font-weight: 600;
  border-right: 1px solid var(--line);
  padding-right: calc(var(--sp) * 4);
}

/* ---- the page ---- */
.wrap {
  max-width: 1240px; margin: 0 auto;
  padding: calc(var(--sp) * 12) calc(var(--sp) * 6) calc(var(--sp) * 24);
  display: flex; flex-direction: column; gap: calc(var(--sp) * 16);
}
body.read .wrap { max-width: 900px; }

.mast { display: flex; flex-direction: column; gap: calc(var(--sp) * 3); }
.eyebrow {
  margin: 0; display: flex; gap: calc(var(--sp) * 5); flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
h1 {
  margin: 0; font-family: var(--ui); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.02;
  letter-spacing: -.024em; text-wrap: balance;
}
.standfirst { margin: 0; max-width: 66ch; color: var(--ink-2); font-size: 17px; }

section { display: flex; flex-direction: column; gap: calc(var(--sp) * 5); }
.sh { display: flex; flex-direction: column; gap: calc(var(--sp) * 2); }
h2 {
  margin: 0; font-family: var(--ui); font-weight: 700;
  font-size: 25px; letter-spacing: -.02em; text-wrap: balance;
  padding-bottom: calc(var(--sp) * 2);
  border-bottom: 2px solid var(--ink);
}
h3.sub {
  margin: calc(var(--sp) * 4) 0 0;
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.lede { margin: 0; max-width: 78ch; color: var(--ink-2); }
.src {
  margin: 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--muted); max-width: 90ch;
  padding-top: calc(var(--sp) * 2); border-top: 1px dashed var(--line);
}
.src code { background: none; border: none; padding: 0; color: var(--muted); font-weight: 500; }
.meta { margin: 0; font-size: 12.5px; color: var(--muted); }
.more { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }

/* ---- stat strips ---- */
/* Cell dividers are `outline`, not a 1px gap over a coloured container: the
   gap trick paints the container through any grid area no cell occupies, so a
   five-stat row in a four-column grid showed a dead panel-coloured block.
   An outline draws per cell, costs no layout, and adjacent outlines meet in
   the 1px gap as one line. */
.stats {
  margin: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.stat {
  background: var(--panel); padding: calc(var(--sp) * 4) calc(var(--sp) * 5);
  outline: 1px solid var(--line);
}
.stat dt {
  margin: 0 0 calc(var(--sp) * 2); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.stat dd {
  margin: 0; font-family: var(--ui); font-weight: 700; font-size: 27px;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat dd span {
  margin-left: calc(var(--sp) * 1.5); font-family: var(--mono);
  font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0;
  white-space: nowrap;
}
/* Explicit six, not auto-fit: a stat's uppercase mono label has a min-content
   width wider than any sensible minmax() floor, so auto-fit silently dropped
   to four columns and left a dead cell showing the grid's own background. */
.stats.hero { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.stats.hero .stat { padding: calc(var(--sp) * 5) calc(var(--sp) * 4); }
.stats.hero .stat dd { font-size: 31px; }
@media (max-width: 1080px) { .stats.hero { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .stats.hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat--bad dd { color: var(--crit); }
.stat--warn dd { color: var(--warn); }
.stat--unknown dd { color: var(--muted); font-size: 21px; font-style: italic; }

/* ---- coverage, the honest hero of section one ---- */
.cover {
  display: grid; grid-template-columns: auto 1fr; gap: calc(var(--sp) * 7);
  align-items: start;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--crit); border-radius: var(--r);
  padding: calc(var(--sp) * 6);
}
.cover-n {
  font-family: var(--ui); font-weight: 700; font-size: clamp(52px, 8vw, 84px);
  line-height: .84; letter-spacing: -.045em; color: var(--crit);
  font-variant-numeric: tabular-nums;
}
.cover-n small {
  display: block; margin-top: calc(var(--sp) * 3);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.ticks { display: flex; flex-wrap: wrap; gap: 3px; }
.tick { width: 11px; height: 26px; border: 1px solid var(--line); border-radius: 1px; }
.tick.full { background: var(--crit); border-color: var(--crit); }
.tick.some { background: var(--warn-soft); border-color: var(--warn); }
.tick.none { background-image: var(--hatch); }
.cover-note {
  grid-column: 2; margin: calc(var(--sp) * 4) 0 0;
  font-size: 13.5px; color: var(--ink-2); max-width: 70ch;
}

/* ---- cards ---- */
.cards {
  display: grid; gap: calc(var(--sp) * 4);
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--sp) * 5);
  display: flex; flex-direction: column; gap: calc(var(--sp) * 3);
}
.card.crit { border-left: 3px solid var(--crit); }
.card.warn { border-left: 3px solid var(--warn); }
.card h4 {
  margin: 0; font-family: var(--ui); font-weight: 600; font-size: 17px;
  letter-spacing: -.015em; line-height: 1.25; text-wrap: balance;
}
.card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.fields { margin: 0; display: flex; flex-direction: column; gap: calc(var(--sp) * 3); }
.fields .f { display: grid; grid-template-columns: 8.5em 1fr; gap: calc(var(--sp) * 3); }
.fields dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding-top: 3px;
}
.fields dd { margin: 0; font-size: 14px; color: var(--ink); }

.said {
  margin: 0; padding: calc(var(--sp) * 3) calc(var(--sp) * 4);
  border-left: 2px solid var(--accent-line); background: var(--accent-soft);
  font-family: var(--read); font-size: 15.5px; font-style: italic; color: var(--ink);
}
.said.para { border-left-style: dashed; }

.pills { display: flex; flex-wrap: wrap; gap: calc(var(--sp) * 2); }
.pill {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); background: var(--panel-2);
}
.pill.open, .pill.p0 {
  color: var(--crit); border-color: var(--crit); background: var(--crit-soft);
}
.pill.partly, .pill.p1 {
  color: var(--warn); border-color: var(--warn); background: var(--warn-soft);
}
.pill.p2 {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
}
.pill.p3, .pill.unscored { color: var(--muted); }
.pill.para { border-style: dashed; color: var(--warn); }
.pill.absent-pill { color: var(--muted); background-image: var(--hatch); border-style: dashed; }
.pts {
  margin-left: calc(var(--sp) * 2); font-family: var(--mono);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* ---- tables ---- */
.scroll { overflow-x: auto; max-width: 100%; }
table {
  border-collapse: collapse; width: 100%;
  background: var(--panel); font-size: 13.5px;
}
.grid { border: 1px solid var(--line); }
th, td {
  text-align: left; vertical-align: top;
  padding: calc(var(--sp) * 2.5) calc(var(--sp) * 3);
  border-bottom: 1px solid var(--line-soft);
}
/* Deliberately not `position: sticky`. The section rail is already sticky at
   top: 0, so a sticky header either slides behind it or has to hard-code the
   rail's height - and the rail wraps to two lines below 1080px, so that height
   is not a constant. */
thead th {
  background: var(--panel-2);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.none {
  font-family: var(--mono); font-size: 11px; font-style: italic;
  color: var(--muted); white-space: nowrap;
}
tbody tr:hover { background: var(--accent-soft); }
tbody th[scope="row"] { font-weight: 600; font-size: 13.5px; }
td.mono, .mono { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
td.num, .num { font-variant-numeric: tabular-nums; }
td.absent, .hatched { background-image: var(--hatch); }
/* `table-layout: fixed` on both wide tables, because auto layout sized these
   from content: one nowrap mono cell of ticket ids took a third of the width
   and squeezed the entry column to eight characters, wrapping every heading to
   five lines. Fixed layout means the percentages below are obeyed. */
.rank { table-layout: fixed; min-width: 1000px; }
.rank th:nth-child(1), .rank td:nth-child(1) { width: 96px; }
.rank th:nth-child(2), .rank td:nth-child(2) { width: 96px; }
.rank th:nth-child(3), .rank td:nth-child(3) { width: 27%; }
.rank th:nth-child(4), .rank td:nth-child(4) { width: auto; color: var(--ink-2); }
.rank th:nth-child(5), .rank td:nth-child(5) { width: 84px; }

/* The 42 thin entries. Four boxes say which promised fields exist, so a row
   is one or two lines instead of four wide columns of hatching. */
.thin { table-layout: fixed; min-width: 1020px; }
.thin th:nth-child(1), .thin td:nth-child(1) { width: 29%; }
.thin th:nth-child(2), .thin td:nth-child(2) { width: 118px; }
.thin th:nth-child(3), .thin td:nth-child(3) { width: auto; }
.thin th:nth-child(4), .thin td:nth-child(4) { width: 15%; }
.thin th:nth-child(5), .thin td:nth-child(5) { width: 64px; }
.thin thead th.swatch-h { font-size: 9px; letter-spacing: .04em; }
td.swatch { white-space: nowrap; }
td.tix { white-space: normal; word-break: break-word; }
.box {
  display: inline-block; width: 12px; height: 12px; margin-right: 2px;
  border: 1px solid var(--line); border-radius: 1px; vertical-align: -1px;
}
.box.on { background: var(--crit); border-color: var(--crit); }
.box.off { background-image: var(--hatch); }
/* `display: block` on the span rather than `flex` on the cell: a `<td>` taken
   out of `table-cell` stops participating in column sizing and the header row
   silently stops lining up with the body. */
.said-f { display: block; }
.said-f + .said-f { margin-top: calc(var(--sp) * 1.5); }
.said-f b {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-right: calc(var(--sp) * 2);
}
.caveat {
  margin: 0; font-size: 13px; color: var(--ink-2); max-width: 82ch;
  border-left: 2px solid var(--warn); background: var(--warn-soft);
  padding: calc(var(--sp) * 3) calc(var(--sp) * 4);
}

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--sp) * 6);
  display: flex; flex-direction: column; gap: calc(var(--sp) * 3);
}
.absent-note { margin: 0; color: var(--ink-2); max-width: 74ch; }
/* Two classes, so this beats `.panel`'s one - and `.panel` sets `background`
   as a shorthand, which resets background-image to none. A single-class
   `.hatched` here was silently erased and the panel looked ordinary, which is
   the exact failure this device exists to prevent. The hatch is a rail rather
   than a fill: behind body text it costs more legibility than it buys. */
.panel.hatched { position: relative; border-style: dashed; padding-left: calc(var(--sp) * 9); }
.panel.hatched::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background-image: var(--hatch);
}
pre.why {
  margin: 0; font-family: var(--mono); font-size: 12px; white-space: pre-wrap;
  color: var(--crit); background: var(--crit-soft); padding: calc(var(--sp) * 3);
  border-radius: var(--r);
}

/* ---- budget ---- */
.budget {
  display: grid; gap: calc(var(--sp) * 7);
  grid-template-columns: auto auto 1fr; align-items: end;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--sp) * 6);
}
.budget .figure {
  display: block; font-family: var(--ui); font-weight: 700;
  line-height: .82; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
}
.budget .figure em { font-style: normal; font-size: .42em; margin-left: .08em; }
.budget .big .figure { font-size: clamp(56px, 9vw, 92px); }
.budget .small .figure { font-size: clamp(26px, 4vw, 38px); color: var(--ink-2); }
.budget .off {
  display: block; margin-top: calc(var(--sp) * 3);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
}
.budget .big.ok .off { color: var(--ok); }
.budget .big.crit .off { color: var(--crit); }
.budget .big.warn .off { color: var(--warn); }
.budget small {
  display: block; margin-top: calc(var(--sp) * 2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted);
}
.budget-side { margin: 0; display: flex; flex-direction: column; gap: calc(var(--sp) * 2); }
.budget-side div { display: grid; grid-template-columns: 12em 1fr; gap: calc(var(--sp) * 3); }
.budget-side dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.budget-side dd { margin: 0; font-family: var(--mono); font-size: 12.5px; }

details.raw { border-top: 1px dashed var(--line); padding-top: calc(var(--sp) * 3); }
details.raw summary {
  cursor: pointer; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
details.raw[open] summary { margin-bottom: calc(var(--sp) * 3); }
details.raw pre {
  margin: 0; font-family: var(--mono); font-size: 12px;
  background: var(--panel); border: 1px solid var(--line-soft);
  padding: calc(var(--sp) * 4); border-radius: var(--r);
}

ul.cols {
  margin: 0; padding: 0; list-style: none;
  columns: 200px; column-gap: calc(var(--sp) * 6);
  font-size: 13px;
}
ul.cols li { break-inside: avoid; padding: 1px 0; }
ul.terms { columns: 230px; }
ul.plain { margin: 0; padding-left: 1.2em; }

/* ---- the method surface ---- */
.docs {
  display: grid; gap: calc(var(--sp) * 4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.doccard {
  display: flex; flex-direction: column; gap: calc(var(--sp) * 2);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  border-top: 3px solid var(--accent-line);
  padding: calc(var(--sp) * 5); text-decoration: none; color: inherit;
}
.doccard:hover { border-top-color: var(--accent); background: var(--accent-soft); }
.doccard h4 {
  margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: -.01em;
}
.doccard p { margin: 0; font-size: 14px; color: var(--ink-2); }
.doccard .mono { font-size: 10.5px; color: var(--muted); margin-top: auto; }

/* ---- the graph ---- */
.legend {
  margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--sp) * 2);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .05em;
}
.legend .key {
  width: 9px; height: 9px; border-radius: 50%;
  margin-left: calc(var(--sp) * 3); border: 1px solid var(--line);
}
.legend span:last-child { margin-left: auto; }
.key.p0, .node.p0, .dot.p0 { background: var(--crit); border-color: var(--crit); }
.key.p1, .node.p1, .dot.p1 { background: var(--warn); border-color: var(--warn); }
.key.p2, .node.p2, .dot.p2 { background: var(--accent); border-color: var(--accent); }
.key.p3, .node.p3, .dot.p3 { background: var(--muted); border-color: var(--muted); }
.key.unscored, .node.unscored, .dot.unscored { background: transparent; }
.key.built, .dot.built {
  background: transparent; border-color: var(--muted); border-style: dashed;
}

.islands {
  display: grid; gap: calc(var(--sp) * 4);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
}
.island {
  margin: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: calc(var(--sp) * 4);
  min-width: 0;
}
.island figcaption {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: calc(var(--sp) * 2);
}
.island figcaption strong { color: var(--ink); }
.island svg { display: block; }
svg .edge { fill: none; stroke: var(--accent-line); stroke-width: 1.2; }
/* An edge out of a built ticket is drawn but drawn spent: the dependency is
   real and recorded, and it stopped holding anything back when the blocker
   landed. That distinction is `edges` 62 against `edges_blocking_unbuilt_work`
   15, and the two numbers are unreadable if both edges look the same. */
svg .edge.built { stroke: var(--line); stroke-dasharray: 3 3; }
svg .node { stroke: var(--line); stroke-width: 1; }
svg .node.unscored { stroke: var(--muted); stroke-dasharray: 2 2; }
svg .node.built { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; }
svg .nodelabel { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-2); }
svg .nodelabel.done { fill: var(--muted); text-decoration: line-through; }

.dots { display: flex; flex-wrap: wrap; gap: 4px; }
.dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--line); cursor: help;
}
.dot.unscored { border-color: var(--muted); border-style: dashed; }

/* ---- rendered prose. A serif, because this half is read and not scanned ---- */
.toc {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: calc(var(--sp) * 5);
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  columns: 260px; column-gap: calc(var(--sp) * 8);
  font-family: var(--mono); font-size: 12px;
}
.toc li { break-inside: avoid; padding: 1.5px 0; }
.toc li.l3 { padding-left: calc(var(--sp) * 4); color: var(--muted); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

.prose { font-family: var(--read); font-size: 17px; line-height: 1.66; }
.prose > * { max-width: 68ch; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--ui); letter-spacing: -.02em; text-wrap: balance;
  margin: calc(var(--sp) * 11) 0 calc(var(--sp) * 3);
}
.prose h1 { font-size: 30px; }
.prose h2 {
  font-size: 24px; border-bottom: 1px solid var(--line);
  padding-bottom: calc(var(--sp) * 2);
}
.prose h3 { font-size: 19px; }
.prose h4 { font-size: 16px; font-family: var(--mono); font-weight: 600; color: var(--muted); }
.prose p { margin: 0 0 calc(var(--sp) * 5); }
.prose ul, .prose ol { margin: 0 0 calc(var(--sp) * 5); padding-left: 1.4em; }
.prose li { margin-bottom: calc(var(--sp) * 2); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote {
  margin: 0 0 calc(var(--sp) * 5); padding: calc(var(--sp) * 3) calc(var(--sp) * 5);
  border-left: 2px solid var(--accent-line); background: var(--accent-soft);
  font-style: italic;
}
.prose hr { border: none; border-top: 1px solid var(--line); margin: calc(var(--sp) * 10) 0; }
.prose .scroll { max-width: 100%; margin-bottom: calc(var(--sp) * 6); }
.prose table { font-family: var(--ui); font-size: 13.5px; border: 1px solid var(--line); }
.prose pre {
  margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5;
  background: var(--panel); border: 1px solid var(--line);
  padding: calc(var(--sp) * 4); border-radius: var(--r);
}
.prose pre code { background: none; border: none; padding: 0; font-size: inherit; }
.doc-mast .eyebrow a { color: var(--muted); }

.foot {
  border-top: 1px solid var(--line); padding-top: calc(var(--sp) * 5);
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  display: flex; flex-direction: column; gap: calc(var(--sp) * 2);
}
.foot p { margin: 0; max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media (max-width: 720px) {
  .cover, .budget { grid-template-columns: 1fr; }
  .cover-note { grid-column: 1; }
  .fields .f, .budget-side div { grid-template-columns: 1fr; gap: 2px; }
}