/* Advent Grants Platform — design system.
   ---------------------------------------------------------------------------
   A financial administration tool, not a dashboard. The rules it follows:

   * Status never depends on colour. Every state is a word and a mark as well as
     a hue, because "the red one" is not a thing you can say on a phone call, and
     roughly one man in twelve cannot see the difference anyway.
   * Numbers line up. Tabular figures everywhere, right-aligned, so a column of
     euros can be read down rather than across.
   * One theme, and it is the light one. The stylesheet used to follow the
     machine's appearance setting, so the same report was white on one laptop
     and near-black on the next, and the charts -- which are drawn in ink
     chosen against white paper -- lost their contrast on the dark one. These
     are finance and research documents that get printed and screen-shared, so
     they look the same for everybody. `color-scheme: light` below says the
     same thing to the browser's own furniture: form controls and scroll bars.
   * One vocabulary. `.muted`, `.ok`, `.bad` and `table.grid` were used thirty,
     eight, thirteen and ten times respectively and defined nowhere.
   --------------------------------------------------------------------------- */

/* ── tokens ───────────────────────────────────────────────────────────────── */
:root {
  --bg:#f6f7f9;  --surface:#fff;  --surface-2:#f1f3f6;  --surface-3:#e9ecf1;
  --ink:#16181d;  --ink-2:#565e6c;  --ink-3:#828a97;
  --line:#e2e5ea;  --line-strong:#c9cfd8;
  --accent:#1f5fa8;  --accent-ink:#fff;  --accent-soft:#e9f0f9;  --accent-line:#c3d7ee;

  --ok:#186b3d;        --ok-soft:#e6f3ea;    --ok-line:#bcdcc7;
  --attn:#8a5600;      --attn-soft:#fbf1de;  --attn-line:#ebd6ac;
  --stop:#a52f28;      --stop-soft:#faeae9;  --stop-line:#eec6c3;
  --prov:#4a4a9c;      --prov-soft:#ececf9;  --prov-line:#cdcdee;
  --neutral:#5b6472;   --neutral-soft:#eef0f3; --neutral-line:#dfe3e9;
  /* The research reports are not one of Advent's record screens, and they are drawn in their
     own green -- chapter 1's accent, the first of `research_layout.ACCENTS`. It is a token
     here so the menu entry and the reports cannot drift apart. */
  --research:#2f6f4f;  --research-soft:#e8f1ec; --research-line:#c6dccf; --research-ink:#1d4a34;

  --radius:8px;  --radius-sm:5px;
  --shadow:0 1px 2px rgba(16,20,28,.04);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* The browser's own furniture -- scroll bars, form controls, the flash of colour before the
     stylesheet arrives -- follows this, not the machine's appearance setting. */
  color-scheme:light;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 var(--font);
  font-variant-numeric:tabular-nums;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ── application shell ────────────────────────────────────────────────────── */
.masthead {
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20;
}
/* On a report the page itself runs edge to edge, so the bar above it does too: a menu that
   starts 460 px in while the contents start at 32 reads as two different pages. */
body.doc-page .masthead .inner { max-width:none; padding-left:32px; padding-right:32px; }
.masthead .inner {
  max-width:1480px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:18px; min-height:52px;
}
.brand {
  font-size:14px; font-weight:650; letter-spacing:-.01em; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.brand span { color:var(--ink-3); font-weight:450; }
.mainnav { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
/* Eleven links since round 3 (Management overview, and Needs review grew a count). At 13.5 px
   with 10 px of padding in a 1,320-px masthead the last one wrapped alone at 1,440 px; 13 px,
   8 px and a 1,400-px masthead kept them on one line (1,071 px of links in 1,109 px). They had
   crept past it again -- 1,127 px in 1,117 px, so "Needs review" sat alone on a second row on
   a 1,496-px screen. 7 px of padding and a 1,480-px masthead put them back: 1,105 px in 1,197.
   Narrower screens still wrap, by design; the page body keeps its own width. */
.mainnav a, .utilnav a {
  color:var(--ink-2); text-decoration:none; font-size:13px; padding:6px 7px;
  border-radius:var(--radius-sm); white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
}
.mainnav a:hover, .utilnav a:hover { background:var(--surface-2); color:var(--ink); }
.mainnav a[aria-current="page"] { background:var(--accent-soft); color:var(--accent); font-weight:600; }
/* Research is the one entry in this menu that does not lead to Advent's own records: it leads
   to the compiled technical reports, which are a different kind of document and are drawn in
   their own green. The entry carries that green from every page, so the two kinds of screen can
   be told apart at a glance, and fills with it when you are on one of them. Nothing is said in
   colour here that the word does not already say -- it marks a section, it does not report a
   state (see the rules at the top of this file). */
.mainnav a[href="/research"] {
  background:var(--research-soft); color:var(--research); font-weight:600;
}
.mainnav a[href="/research"]:hover {
  background:var(--research-line); color:var(--research-ink);
}
.mainnav a[href="/research"][aria-current="page"] {
  background:var(--research); color:#fff;
}
.utilnav { display:flex; gap:2px; }
.navcount {
  font-size:11px; font-weight:700; padding:1px 6px; border-radius:999px;
  background:var(--attn-soft); color:var(--attn); border:1px solid var(--attn-line);
}
.navcount.is-zero { background:var(--neutral-soft); color:var(--ink-3); border-color:var(--neutral-line); }

/* project context bar — "which project am I on" should never be a question */
.contextbar { background:var(--surface-2); border-bottom:1px solid var(--line); }
.contextbar .inner {
  max-width:1320px; margin:0 auto; padding:10px 24px 0;
}
.contextbar .who { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.contextbar .who strong { font-size:16px; letter-spacing:-.01em; }
.contextbar .who .ref { color:var(--ink-3); font-size:13px; }
.subnav { display:flex; gap:2px; margin-top:8px; flex-wrap:wrap; }
.subnav a {
  font-size:13.5px; text-decoration:none; color:var(--ink-2);
  padding:7px 11px; border-bottom:2px solid transparent; border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.subnav a:hover { color:var(--ink); background:var(--surface); }
.subnav a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }

main { max-width:1320px; margin:0 auto; padding:22px 24px 72px; }
main.narrow { max-width:900px; }

/* ── page header ──────────────────────────────────────────────────────────── */
.crumbs { font-size:13px; color:var(--ink-3); margin-bottom:10px; }
.crumbs a { color:var(--ink-2); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs .sep { padding:0 6px; color:var(--line-strong); }

.pagehead { display:flex; align-items:flex-start; gap:20px; margin:0 0 20px; flex-wrap:wrap; }
.pagehead h1 { font-size:22px; line-height:1.25; margin:0; letter-spacing:-.015em; font-weight:650; }
.pagehead .lead { color:var(--ink-2); font-size:14px; margin:6px 0 0; max-width:74ch; }
.pagehead .actions { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

h2 { font-size:16.5px; margin:30px 0 12px; letter-spacing:-.01em; font-weight:640; }
h3 { font-size:14.5px; margin:20px 0 8px; font-weight:640; }
p { margin:10px 0; }
a { color:var(--accent); }
.muted { color:var(--ink-2); }
.dim { color:var(--ink-3); font-size:13px; }
.num, td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono, code { font-family:var(--mono); font-size:12.5px; }
code { background:var(--surface-2); padding:1px 5px; border-radius:4px; }
.nowrap { white-space:nowrap; }

/* ── panels ───────────────────────────────────────────────────────────────── */
.panel {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin:16px 0; overflow:hidden;
}
.panel > .panel-head {
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.panel > .panel-head h2, .panel > .panel-head h3 { margin:0; font-size:14.5px; }
.panel > .panel-head .dim { margin-left:auto; }
.panel > .panel-body { padding:14px 16px; }
.panel > .panel-body > :first-child { margin-top:0; }
.panel > .panel-body > :last-child { margin-bottom:0; }
.panel > table { margin:0; border:0; border-radius:0; box-shadow:none; }

/* ── figures ──────────────────────────────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin:0 0 20px; }
.stat {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; box-shadow:var(--shadow);
}
.stat .k { color:var(--ink-2); font-size:11.5px; text-transform:uppercase; letter-spacing:.055em; font-weight:600; }
.stat .v { font-size:23px; font-weight:640; margin-top:3px; letter-spacing:-.02em; }
.stat .n { color:var(--ink-3); font-size:12.5px; margin-top:2px; }

/* ── tables ───────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
             background:var(--surface); box-shadow:var(--shadow); margin:14px 0; }
.tablewrap > table { border:0; border-radius:0; box-shadow:none; margin:0; }
/* The rule above leaves `overflow:hidden` from the base `table` rule in place; the WS-E block at
   the end of this file overrides it with `overflow:visible` for every table in a wrapper, because
   a table that clips is a scroll container and a sticky cell sticks to it instead of to the
   wrapper -- nothing pinned in a `.tablewrap` ever stuck (`docs/DEFECTS-FOUND.md`, round 3). */
table, table.data, table.grid {
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:14px 0;
}
th, td { padding:9px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:top; }
thead th, tr:first-child th {
  background:var(--surface-2); color:var(--ink-2); font-weight:640;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.045em;
  position:sticky; top:0; z-index:1; white-space:nowrap;
}
tbody tr:hover td { background:var(--surface-2); }
tr:last-child td { border-bottom:none; }
thead th[colspan] { text-align:center; }
tr.sub th { font-weight:500; font-size:11px; text-transform:none; letter-spacing:0; color:var(--ink-3); }
tr.total td, tr.total th { border-top:2px solid var(--line-strong); font-weight:680; background:var(--surface); }
tbody tr.total:hover td { background:var(--surface); }
td .sub2 { display:block; color:var(--ink-3); font-size:12px; margin-top:1px; }

/* ── status: colour + mark + word, never colour alone ─────────────────────── */
.chip {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:2px 9px 2px 7px; border-radius:999px; font-size:12px; font-weight:600;
  border:1px solid transparent;
}
.chip .mark { font-size:11px; line-height:1; }
.chip-ok      { background:var(--ok-soft);      color:var(--ok);      border-color:var(--ok-line); }
.chip-attn    { background:var(--attn-soft);    color:var(--attn);    border-color:var(--attn-line); }
.chip-stop    { background:var(--stop-soft);    color:var(--stop);    border-color:var(--stop-line); }
.chip-prov    { background:var(--prov-soft);    color:var(--prov);    border-color:var(--prov-line); }
.chip-neutral { background:var(--neutral-soft); color:var(--neutral); border-color:var(--neutral-line); }
.chip-accent  { background:var(--accent-soft);  color:var(--accent);  border-color:var(--accent-line); }

/* the same five states as plain text, for inside a dense table cell */
.state-ok      { color:var(--ok);      font-weight:600; }
.state-attn    { color:var(--attn);    font-weight:600; }
.state-stop    { color:var(--stop);    font-weight:600; }
.state-prov    { color:var(--prov);    font-weight:600; }
.state-neutral { color:var(--ink-3); }
.ok  { color:var(--ok); }
.bad { color:var(--stop); }
.warn { color:var(--attn); }

/* provenance / authority caption: where a number came from */
.origin {
  font-size:11px; padding:1px 6px; border-radius:4px;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.authority { display:block; color:var(--ink-3); font-size:11.5px; margin-top:2px; }

/* ── messages ─────────────────────────────────────────────────────────────── */
.msg {
  border:1px solid var(--line); border-left:3px solid var(--neutral);
  background:var(--surface); border-radius:var(--radius); padding:12px 16px; margin:14px 0;
  font-size:13.5px; box-shadow:var(--shadow);
}
.msg > :first-child { margin-top:0; } .msg > :last-child { margin-bottom:0; }
.msg .msg-title { font-weight:650; display:flex; align-items:center; gap:7px; }
.msg-info { border-left-color:var(--accent); }
.msg-info .msg-title { color:var(--accent); }
.msg-ok { border-left-color:var(--ok); background:var(--ok-soft); border-color:var(--ok-line); }
.msg-ok .msg-title { color:var(--ok); }
.msg-attn { border-left-color:var(--attn); background:var(--attn-soft); border-color:var(--attn-line); }
.msg-attn .msg-title { color:var(--attn); }
.msg-stop { border-left-color:var(--stop); background:var(--stop-soft); border-color:var(--stop-line); }
.msg-stop .msg-title { color:var(--stop); }
/* Neutral: a plain statement of fact, neither good news nor a warning. Two templates asked for
   it and the stylesheet never defined it (#139), so it rendered unstyled -- unreachable on a
   laptop, where the document it belongs to is always readable, and on every document page of
   the server, where the originals are not. */
.confirm-irreversible label { display:flex; align-items:center; gap:7px; font-weight:500; }
.confirm-irreversible input { width:auto; margin:0; }
.msg-neutral { border-left-color:var(--line-strong); }
.msg-neutral .msg-title { color:var(--ink); }
.msg-prov { border-left-color:var(--prov); background:var(--prov-soft); border-color:var(--prov-line); }
.msg-prov .msg-title { color:var(--prov); }
.msg .next { margin-top:8px; }

/* ── empty states ─────────────────────────────────────────────────────────── */
.empty {
  border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface);
  padding:30px 26px; text-align:center; margin:16px 0;
}
.empty h3 { margin:0 0 6px; font-size:15px; }
.empty p { color:var(--ink-2); margin:0 auto; max-width:56ch; font-size:13.5px; }
.empty .actions { margin-top:16px; display:flex; gap:8px; justify-content:center; }

/* ── controls ─────────────────────────────────────────────────────────────── */
.btn, button {
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:7px 14px; border-radius:var(--radius-sm);
  background:var(--accent); color:var(--accent-ink); border:1px solid transparent;
  display:inline-flex; align-items:center; gap:6px; text-decoration:none; line-height:1.35;
}
.btn:hover, button:hover { filter:brightness(1.08); }
.btn-quiet, button.ghost, button.btn-quiet {
  background:var(--surface); color:var(--ink); border-color:var(--line-strong);
}
.btn-quiet:hover, button.ghost:hover { background:var(--surface-2); filter:none; }
.btn-danger { background:var(--stop); color:#fff; }
.btn:disabled, button:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.btn-link {
  background:none; border:0; color:var(--accent); padding:0; font-weight:600; text-decoration:underline;
}

.field { margin:0 0 14px; }
.field > label, label.lbl {
  display:block; font-size:12.5px; font-weight:640; color:var(--ink-2); margin-bottom:4px;
}
.field .hint { color:var(--ink-3); font-size:12.5px; margin-top:4px; }
.field .err { color:var(--stop); font-size:12.5px; margin-top:4px; font-weight:600; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color:var(--stop); }
input[type=text], input[type=number], input[type=date], input[type=search], input[type=email],
input:not([type]), select, textarea {
  font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:7px 9px; width:100%; max-width:420px;
}
input[type=file] { font-size:13px; }
textarea { min-height:70px; resize:vertical; }
input:disabled, select:disabled { background:var(--surface-2); color:var(--ink-3); }
.formrow { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.formrow .field { margin-bottom:0; }
.w-xs { max-width:90px; } .w-sm { max-width:150px; } .w-md { max-width:260px; } .w-lg { max-width:420px; }
form.inline { display:inline-flex; gap:6px; align-items:center; margin:0 6px 4px 0; flex-wrap:wrap; }
form.inline input, form.inline select { width:auto; }
fieldset { border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:16px 0; }
legend { font-size:12.5px; font-weight:650; color:var(--ink-2); padding:0 6px; }

/* ── contextual help ──────────────────────────────────────────────────────── */
details.help { margin:10px 0; font-size:13.5px; }
details.help > summary {
  cursor:pointer; color:var(--accent); font-weight:600; font-size:13px;
  list-style:none; display:inline-flex; align-items:center; gap:6px;
}
details.help > summary::-webkit-details-marker { display:none; }
details.help > summary::before { content:"?"; font-size:10.5px; font-weight:700;
  width:15px; height:15px; border-radius:50%; background:var(--accent-soft);
  border:1px solid var(--accent-line); display:inline-flex; align-items:center; justify-content:center; }
details.help[open] > summary { margin-bottom:8px; }
details.help .help-body {
  border-left:2px solid var(--line); padding:2px 0 2px 14px; color:var(--ink-2); max-width:78ch;
}
details.help .help-body > :first-child { margin-top:0; }
details.help .help-body > :last-child { margin-bottom:0; }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.linkrow { display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; margin:12px 0; }
.tabs { display:flex; gap:4px; flex-wrap:wrap; margin:14px 0; align-items:center; }
/* Names the strip as a filter for everyone, not only for a screen reader. */
.tabs-label { font-size:.82rem; text-transform:uppercase; letter-spacing:.04em;
              padding-right:6px; }
.tabs a {
  font-size:13px; text-decoration:none; color:var(--ink-2); padding:5px 11px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
}
.tabs a:hover { background:var(--surface-2); color:var(--ink); }
.tabs a[aria-current="page"] { background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent-line); font-weight:640; }
/* The strip that says these are not Advent's records. It was the only cue distinguishing a
   practice copy from the real system, and it was the one element on the page that scrolled
   away -- the masthead below it is sticky, so after one scroll the demo looked exactly like
   production. Found by John, who had to ask which system he was about to write to. It now
   sticks above the masthead, and the masthead starts below it. */
.testbanner {
  background:var(--prov-soft); color:var(--prov); border-bottom:1px solid var(--prov-line);
  font-size:12.5px; font-weight:650; text-align:center; padding:5px 24px; letter-spacing:.02em;
  position:sticky; top:0; z-index:25;
}
body:has(.testbanner) .masthead { top:30px; }

/* ── the manual ───────────────────────────────────────────────────────────────
   /help is the only page a reader works THROUGH rather than looks AT, so it is
   the one page with its own typography. Three rules held it together:

   * Nothing here touches a shared selector. Every rule below is prefixed
     `.guide` or `.guide-`, because a stray `table {}` on this page would move
     twenty other screens and nobody would notice until an auditor did.
   * Colour is a token, never a hex, so both themes stay complete.
   * A coloured box always carries its word — "Do this", "Careful", "Refused" —
     and its mark. The manual obeys the same rule the screens do.
   --------------------------------------------------------------------------- */
.guide { max-width:none; counter-reset:part; --measure:660px; }
/* One measure, in px, for everything a reader reads a line of. It is NOT `ch`: `ch` resolves
   against each element's own font-size, and `.msg` is 13.5px against the prose's 15px, so 70ch
   drew the callouts visibly short of the step boxes beside them. Tables are exempt -- a
   four-column table squeezed into this width wraps every cell and stops being a table. */
.guide p, .guide ul, .guide ol, .guide h3, .guide h4 { max-width:var(--measure); }
.guide > p:first-child { font-size:16px; color:var(--ink-2); }

/* parts — the manual is in parts, and a part is a divider, not a heading */
.guide .part {
  counter-increment:part;
  display:flex; align-items:baseline; gap:10px;
  margin:52px 0 6px; padding:0 0 10px;
  font-size:20px; font-weight:680; letter-spacing:-.02em; color:var(--ink);
  border-bottom:2px solid var(--accent);
}
.guide .part::before {
  content:"Part " counter(part);
  flex:none; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:999px; padding:3px 10px;
}
.guide .part:first-child { margin-top:8px; }

.guide h2 { font-size:18px; margin:34px 0 10px; letter-spacing:-.015em; }
.guide h3 {
  font-size:15px; margin:26px 0 8px; color:var(--ink);
  padding-left:11px; border-left:3px solid var(--line-strong);
}
.guide h4 { font-size:14px; margin:20px 0 6px; font-weight:640; }
.guide p { margin:11px 0; color:var(--ink); }
.guide ul, .guide ol { margin:11px 0; padding-left:22px; }
.guide li { margin:6px 0; }
.guide hr { border:0; border-top:1px solid var(--line); margin:34px 0; }
.guide code { font-size:12.5px; }
.guide a { text-decoration:underline; }
.guide strong { font-weight:650; }

/* the instruction box — the thing an employee actually follows */
.guide .steps {
  margin:16px 0; border:1px solid var(--accent-line); border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); overflow:hidden;
}
.guide .steps-head {
  padding:8px 16px; background:var(--accent-soft); color:var(--accent);
  border-bottom:1px solid var(--accent-line);
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.guide .steps ol, .guide .steps ul {
  list-style:none; margin:0; padding:14px 18px; counter-reset:step;
}
.guide .steps li {
  counter-increment:step; position:relative;
  margin:0 0 10px; padding-left:34px; font-size:14.5px;
}
.guide .steps li:last-child { margin-bottom:0; }
.guide .steps ol > li::before {
  content:counter(step);
  position:absolute; left:0; top:-1px;
  width:23px; height:23px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}
.guide .steps ul > li::before {
  content:"–"; position:absolute; left:7px; color:var(--ink-3); font-weight:700;
}

/* callouts reuse .msg, so a warning here looks like a warning on the screens */
.guide .msg { margin:16px 0; }
.guide .msg > p:first-of-type { margin-top:6px; }
.guide .msg ol, .guide .msg ul { margin:6px 0; }

/* tables */
.guide .tablewrap { max-width:100%; margin:16px 0; }
.guide .steps, .guide .msg { max-width:var(--measure); }
.guide thead th {
  background:var(--accent-soft); color:var(--accent);
  border-bottom:1px solid var(--accent-line);
}
.guide td, .guide th { padding:10px 14px; }
.guide tbody td:first-child { color:var(--ink); }

/* the contents card at the top of the page */
.guide-contents { margin:0 0 26px; }
.guide-contents .gc-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px 26px;
}
.guide-contents .gc-part {
  display:flex; align-items:baseline; gap:7px;
  font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent); margin:0 0 7px; padding-bottom:6px;
  border-bottom:1px solid var(--accent-line);
}
.guide-contents .gc-n {
  flex:none; width:17px; height:17px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  font-size:10.5px; display:inline-flex; align-items:center; justify-content:center;
}
.guide-contents ul { list-style:none; margin:0; padding:0; }
.guide-contents li { margin:0 0 4px; font-size:13.5px; line-height:1.4; }
.guide-contents a { color:var(--ink-2); text-decoration:none; }
.guide-contents a:hover { color:var(--accent); text-decoration:underline; }

/* the manual is the one page people print */
@media print {
  .masthead, .contextbar, .testbanner, .guide-contents { display:none; }
  main, main.narrow { max-width:none; padding:0; }
  .guide { max-width:none; }
  .guide .part { break-after:avoid; }
  .guide h2, .guide h3 { break-after:avoid; }
  .guide .steps, .guide .msg, .guide .tablewrap { break-inside:avoid; }
  .guide .steps, .guide .msg { box-shadow:none; }
}

/* ── WS4 — the timesheet preview's month grid (project × day) ─────────────────
   Thirty-one narrow columns, as on the month sheet of the statutory form. The figures are
   small and right-aligned; weekend columns are shaded so a reader sees why the split skips
   them; the project column stays put while the days scroll. */
table.daygrid { font-size:11px; }
table.daygrid th, table.daygrid td {
  padding:3px 4px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  border-left:1px solid var(--line);
}
table.daygrid thead th { text-align:right; position:sticky; top:0; }
table.daygrid th:first-child, table.daygrid td:first-child {
  text-align:left; border-left:0; position:sticky; left:0; z-index:2; background:var(--surface);
  font-weight:600; color:var(--ink);
}
/* the month's totals are the figures a reader checks first: they stay in view while the days scroll */
table.daygrid th:last-child, table.daygrid td:last-child {
  position:sticky; right:0; z-index:2; background:var(--surface); font-weight:650;
  border-left:2px solid var(--line-strong);
}
table.daygrid thead th:first-child, table.daygrid thead th:last-child {
  z-index:3; background:var(--surface-2); color:var(--ink-2);
}
table.daygrid thead th .dow {
  display:block; font-size:9.5px; font-weight:500; text-transform:none; letter-spacing:0;
  color:var(--ink-3);
}
table.daygrid .we { background:var(--surface-2); color:var(--ink-3); }
table.daygrid tbody tr:hover td { background:var(--surface-2); }
table.daygrid tr.leave th, table.daygrid tr.leave td { color:var(--ink-2); font-style:italic; }
table.daygrid tr.total td { font-weight:650; }

/* ── WS2 (round 2, T8/T9): the change link in a grid cell, and the carried-over row ─────────
   `.cell-edit` is the link in a cell of the Hours grid that opens the cell's change panel. Round
   2 drew it as a quiet word under the figure (11 px, 75 % opacity) "so as not to steal the eye
   from the number" -- and the testers did not see it (round 3, R16, image #20). Now the figure
   itself is the link, at the table's own size and full opacity; the WS-F block at the end of
   this file adds the pencil after it and the + of an empty cell. `tr.carry` is the row under a
   (person, work package) row that says what last year left undone -- a note, not a figure
   column. */
td .cell-edit { display:block; font-size:13.5px; line-height:1.3; margin-top:0;
                color:var(--accent); text-decoration:none; font-variant-numeric:tabular-nums; }
td .cell-edit:hover, td .cell-edit:focus-visible { text-decoration:underline; }
tr.carry td { font-size:12.5px; color:var(--ink-2); font-style:italic;
              background:var(--surface-2); border-bottom:1px solid var(--line); }

/* ── WS3 · Employees (/people) ──────────────────────────────────────────────
   The other spellings a name arrived under. Several per cell, so it wraps and reads quieter
   than the name beside it. */
td.spellings { color:var(--ink-2); font-size:12.5px; max-width:26ch; white-space:normal; }

/* ── round 2, polish: wide tables at laptop width ────────────────────────────────────────────
   Everyone's hours carries one column per project plus Charged / Planned / Available / Spare,
   and the Employees list eleven columns; at 1440 px both pushed their last columns behind the
   wrapper's horizontal scroll, which reads as "cut off". Tighter cells keep the figures on the
   screen; the wrapper still scrolls if a year gains projects. */
table.compact th, table.compact td { padding:6px 6px; font-size:12.5px; }
table.compact thead th { letter-spacing:.02em; overflow-wrap:anywhere; }
table.compact td.spellings { max-width:18ch; }
table.compact .sub2 { font-size:11px; }

/* ── WS-F · the change link you can see (round 3, R16) ─────────────────────────────────────
   Image #20: the testers saw plain figures -- 9.0, 4.0 -- and no way to change them. In a named
   row of the Hours grid every cell is now a link (`.cell-edit` above carries the figure at full
   size): the pencil after a worked figure is the mark that says "this opens something", and an
   empty cell carries a quiet + that fills the Record form in. Both are marks beside words (the
   links' aria-labels name the person, work package and month), never colour alone. The + is
   deliberately dimmer than a figure so a row of empty months does not shout; it takes the link
   colour on hover and focus. */
td .cell-edit .pen { font-size:11px; margin-left:3px; color:var(--ink-3); }
td .cell-edit:hover .pen, td .cell-edit:focus-visible .pen { color:var(--accent); }
td .cell-add { display:block; font-size:13.5px; line-height:1.3; color:var(--ink-3);
               text-decoration:none; }
td .cell-add:hover, td .cell-add:focus-visible { color:var(--accent); text-decoration:underline; }
/* The grid at the testers' width. Image #20 was taken in a window of about 1,130 px, where the
   fifteen columns (employee, work package, twelve months, the total) at the table's default
   14 px side padding needed 1,222 px -- 1,257 with the pencil -- against a 1,080 px wrapper, so
   December and the total column sat behind the wrapper's scroll. Tighter side padding brings the
   whole year into view at 1,100 px; the outer edges keep the table's own margin. */
table.hours-grid th, table.hours-grid td { padding:8px 6px; }
table.hours-grid th:first-child, table.hours-grid td:first-child { padding-left:14px; }
table.hours-grid th:last-child, table.hours-grid td:last-child { padding-right:14px; }

/* ── WS-E · Everyone's hours at 1,100 px ────────────────────────────────────────────────────
   The testers' window is about 1,130 px wide (image #31 cuts the header at "AVAILA…") and a
   month carries eight to ten project columns, so the table is wider than the screen and the four
   columns a reader compares were the ones pushed behind the wrapper's scroll. Employee and Role
   (`.who`, `.role`) are pinned on the left and Charged · Planned · Available · Spare (`.fig`) on
   the right; the project columns scroll between them. A sticky offset needs the columns before
   it to have a known width, so the six pinned columns have one -- a name or a role longer than
   its column wraps instead of widening it, and a chip in Spare wraps instead of widening it.
   Plan figures under a project cell stay on one line ("plan 118.8", not "plan / 118.8").
   `position:sticky` sticks to the nearest scroll container, and the base `table` rule's
   `overflow:hidden` (there for the border-radius of a bare table) made every table inside a
   `.tablewrap` its own -- so nothing pinned in a wrapper ever stuck, the round-2 day grid's
   project column included (measured: scrolled away with the days). Inside the wrapper the
   table has nothing to clip; the wrapper clips. */
.tablewrap > table { overflow:visible; }
table.everyone th, table.everyone td { padding:6px 8px; }
table.everyone thead th { font-size:10.5px; letter-spacing:0; }
table.everyone td .sub2 { white-space:nowrap; font-size:11px; }
table.everyone .who, table.everyone .role, table.everyone .fig {
  position:sticky; z-index:2; background:var(--surface); box-sizing:border-box;
}
table.everyone thead .who, table.everyone thead .role, table.everyone thead .fig {
  z-index:3; background:var(--surface-2);
}
table.everyone tbody tr:hover .who, table.everyone tbody tr:hover .role,
table.everyone tbody tr:hover .fig { background:var(--surface-2); }
table.everyone .who { left:0; width:160px; min-width:160px; max-width:160px; overflow-wrap:anywhere; }
table.everyone .role { left:160px; width:118px; min-width:118px; max-width:118px; overflow-wrap:anywhere;
                       border-right:1px solid var(--line); }
table.everyone .fig:nth-last-child(4) { right:254px; width:76px; min-width:76px; max-width:76px;
                                        border-left:1px solid var(--line); }
/* a soft edge where the project columns slide under the pinned ones -- a box-shadow does not
   paint on a cell of a collapsed-border table, so it is drawn beside the cell instead */
table.everyone .role::after, table.everyone .fig:nth-last-child(4)::after {
  content:""; position:absolute; top:0; bottom:0; width:8px; pointer-events:none;
}
table.everyone .role::after { right:-9px; background:linear-gradient(to right, rgba(0,0,0,.10), transparent); }
table.everyone .fig:nth-last-child(4)::after { left:-9px; background:linear-gradient(to left, rgba(0,0,0,.10), transparent); }
table.everyone .fig:nth-last-child(3) { right:178px; width:76px; min-width:76px; max-width:76px; }
table.everyone .fig:nth-last-child(2) { right:96px;  width:82px; min-width:82px; max-width:82px; }
table.everyone .fig:nth-last-child(1) { right:0;     width:96px; min-width:96px; max-width:96px; }
table.everyone .fig .chip { white-space:normal; text-align:left; line-height:1.25; }

/* ── WS-G (round 3, R17) · Management overview ───────────────────────────────────────────────
   The executive summary is a panel the eye lands on first; the controls behind each item are a
   disclosure like the Record button on Work package deadlines; a folded row says how many ended
   work packages of one project it stands for. */
.ov-summary { margin:0 0 22px; }
.ov-summary .panel-body p { font-size:15px; line-height:1.6; margin:0; max-width:90ch; }
table.ov td { vertical-align:top; }
table.ov .ov-act > summary { font-size:12px; padding:4px 9px; white-space:nowrap; }
table.ov .ov-act[open] > summary { margin-bottom:6px; }
table.ov .ov-act form.inline { margin:0 0 6px; }
tr.ov-fold td { font-style:italic; background:var(--surface-2); }
/* the month steps are small GET forms sitting in the tab strip; they read like the tabs */
.ov-months form.inline { margin:0; }
.ov-months input[type=month] { width:auto; padding:4px 8px; font-size:13px; }

/* ── WS-C1 (round 3, D2/D4): the timesheet preview's holiday columns and office-duties row ──
   A public holiday column is shaded like a weekend, because the split treats it the same way
   (no project hours), and the row that completes the month to the contract reads quieter than
   the projects above it. */
table.daygrid .hol { background:var(--surface-2); color:var(--ink-3); }
table.daygrid tr.internal th, table.daygrid tr.internal td { color:var(--ink-2); }

/* ── WS-C2 (round 3, R8/R9/R13): the month of the form as a form, and the set-by-hand note ──
   `?edit=M` turns one month's grid into boxes: thirty-one narrow inputs a row, sized to the
   grid's 11-px figures so the form keeps the shape of the sheet it fills. The note under a month
   set by hand reads quieter than the figures, with the reset form beside it. */
table.daygrid input.cell {
  width:2.9em; min-width:2.9em; max-width:2.9em; padding:2px 3px; font-size:11px;
  text-align:right; font-variant-numeric:tabular-nums; border-radius:3px;
}
table.daygrid td:has(input.cell) { padding:1px 2px; }
.panel.edit-month .panel-body .formrow { margin-top:10px; }
.edited { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;
          font-size:13px; color:var(--ink-2); margin:0 0 10px; }
.edited p { margin:0; }
/* ── WS-B (round 3, R1/R2): Hourly rates — the matrix folds, the upload box comes first ───────
   The 89-row employee × year table used to sit above the upload panel, and the testers never
   scrolled past it. It now comes last, inside a <details> that opens on load and can be folded;
   the `set` link under each cell reuses `.cell-edit` (WS2), the quiet link that opens a panel. */
details.matrix { margin:18px 0 10px; }
details.matrix > summary { cursor:pointer; font-weight:650; font-size:14.5px; padding:6px 0;
                           color:var(--ink-1); list-style:none; }
details.matrix > summary::-webkit-details-marker { display:none; }
details.matrix > summary::before { content:"▸"; display:inline-block; width:1.1em; color:var(--ink-3); }
details.matrix[open] > summary::before { content:"▾"; }
details.matrix > .tablewrap { margin-top:6px; }

/* ── WS-D (round 3, R14) · a timesheet sent for signature ──────────────────────────────────
   In the created list the Mark as signed form (a date and a name) sits behind a disclosure, like
   the overview's Assign · done…, so a row of files stays a row; on the send page the subject and
   the message are wider than a name box. */
details.ts-act { display:inline-block; margin:4px 6px 0 0; font-size:13px; vertical-align:middle; }
details.ts-act > summary { cursor:pointer; color:var(--accent); font-weight:600; list-style:none; }
details.ts-act > summary::-webkit-details-marker { display:none; }
details.ts-act[open] > summary { margin-bottom:6px; }
/* `input[type=text]` caps every box at 420 px with more specificity than a bare class, so the
   wide class names the element too */
input.w-xl, textarea.w-xl { max-width:640px; }
textarea.w-xl { min-height:170px; }

/* ── research reports: figures, and a long document that stays navigable ──────
   The reports are long by design -- one entry per experiment, several hundred of them -- so the
   contents list follows the reader down the page instead of sitting at the top where it is lost
   after the first screen. On a narrow screen it goes back to being a block above the text,
   because a sidebar that squeezes the measure is worse than no sidebar. */
.doc-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; }
.doc-toc { position:sticky; top:64px; max-height:calc(100vh - 90px); overflow-y:auto;
           border-right:1px solid var(--line); padding-right:14px; }
.doc-toc-head { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2);
                margin:0 0 8px; }
.doc-toc-part { --accent:var(--ink-2); margin:14px 0 4px; font-weight:600; font-size:13px; }
/* Each chapter is drawn in its own accent through the whole report -- the rule under its
   heading, the disc beside it, the card in the contents. The rail says the same thing quietly:
   the chapter's name takes its colour, the sections under it stay grey so the eye still reads
   them as a list, and the one being pointed at takes the colour too. Nothing is said in colour
   that the words do not already say; it is there to tie the rail to the page. */
.doc-toc-part > a { display:flex; gap:8px; align-items:baseline; }
/* `.doc-toc a` below is (0,1,1) and comes later, so it was winning: the chapter names in the
   rail never took the `--ink` this rule asked for, let alone an accent. Said at (0,2,1) they
   do. */
.doc-toc .doc-toc-part > a { color:var(--accent); }
.doc-toc-n { flex:none; width:18px; height:18px; display:inline-grid; place-items:center;
             border-radius:999px; background:var(--accent); color:#fff;
             font-size:10px; font-weight:700; line-height:1; transform:translateY(2px); }
.doc-toc ul { list-style:none; margin:0 0 4px; padding:0 0 0 7px;
              border-left:2px solid var(--accent, var(--line)); margin-left:8px; }
.doc-toc li { margin:2px 0; }
.doc-toc a { font-size:12.5px; line-height:1.35; color:var(--ink-2); text-decoration:none;
             display:block; padding:1px 0; }
.doc-toc a:hover { color:var(--accent, var(--ink)); text-decoration:underline; }
.doc-toc ul { border-left-width:2px; }
/* The right-hand column of the report: the contents list, the figures and the report, so the
   rail on the left starts at the top of the page rather than below all three. */
.doc-main { min-width:0; }
.doc-body { min-width:0; }
/* The rail costs the reading column 334 px, and below about a thousand pixels of window that is
   more than the report can spare: the three-column "Inputs and their sources" table reaches its
   narrowest possible layout at 616 px and then starts to scroll, so a reader at 950 px got a
   scroll bar under a table that would have fitted with room to spare on the full width. Measured
   on that table: the column is `viewport - 382`, so it holds the table whenever the window is
   1,000 px or wider. The rail folds above the text below 1,040 -- still the first thing on the
   page, which is what it is for, and the text gets the whole width. */
@media (max-width: 1040px) {
  .doc-layout { grid-template-columns:1fr; }
  .doc-toc { position:static; max-height:260px; border-right:0; border-bottom:1px solid var(--line);
             padding:0 0 10px; margin-bottom:16px; }
}

/* A research report is the only thing here that is read rather than consulted, and it was being
   served in `main.narrow` -- the 900-px column written for the help manual. On the 1,500-px
   screen it is read on, that left 300 px of empty paper down the side of the contents and 300
   more past the text, with the prose set at the 15 px a dense financial table needs rather than
   the size a page of continuous text wants. The report gets its own width and its own type.

   The measure grows with the letters on purpose: 660 px at 15 px is 44 em, and 820 px at 17 px
   is 48 em, so a line still holds about as many words as before -- bigger type in a column of
   the same width would mean fewer words per line, which is a harder page, not an easier one.
   Figures, tables and the conclusion cards are exempt, as they were, and use the full column. */
/* No cap. Capped at 1,680 px the report was centred on a wider screen, which put the contents
   rail a couple of hundred pixels in from the left and squeezed the column that holds the
   tables and the charts. The page is the window; the measure below keeps the prose readable
   inside it, and the figures and tables take the room that is left. */
main.doc-page { max-width:none; padding-left:32px; padding-right:32px; }
main.doc-page .doc-layout { grid-template-columns:300px minmax(0,1fr); gap:34px; }
main.doc-page .doc-toc-head { font-size:11.5px; }
main.doc-page .doc-toc-part { font-size:14px; }
main.doc-page .doc-toc a { font-size:13.5px; line-height:1.4; }

.doc-body { font-size:17px; line-height:1.68; --measure:880px; }
.doc-body > p:first-child { font-size:18.5px; }
.doc-body .part { font-size:23px; }
.doc-body h2 { font-size:21px; }
.doc-body h3 { font-size:17.5px; }
.doc-body h4 { font-size:16px; }
.doc-body li { margin:8px 0; }
/* The evidence report cites files by their full absolute path, inside backticks. A path has no
   spaces to break at, so on a narrow screen forty-two of them ran up to 247 px past the window
   and took the page with them. `break-word` breaks only a word that does not fit, so nothing
   changes on a screen where it does. */
.doc-body code { font-size:14px; overflow-wrap:break-word;
                 -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.doc-body .entry > h3 { font-size:17px; }
.doc-body .entry-meta { font-size:13.5px; }
.doc-body .entry-meta code { font-size:12.5px; }
main.doc-page .fig-title { font-size:15px; }
main.doc-page .fig-note { font-size:13.5px; }
main.doc-page .fig-source { font-size:12.5px; }
main.doc-page .doc-contents .dim { font-size:14.5px; }
main.doc-page > .dim { font-size:14px; }
.doc-body .codewrap code { font-size:13px; }

/* A finding is written as one run-on paragraph: four claims, a dozen measurements and a
   citation, joined by semicolons. Set as one block it is a wall, and a reader after one number
   has to read all of them. `research_layout.clauses` puts each clause in its own span -- the
   same words, in the same order, with somewhere to breathe -- and this gives them a line each.
   Nothing is hidden, shortened or folded away: the text is exactly what the file says. */
.doc-body .clause { display:block; }
.doc-body .clause + .clause { margin-top:8px; }
/* Figures in a table line up under each other and are read down the column, so they are
   tabular. Figures in a sentence are read across, and tabular ones give every digit the same
   width -- which is what turns "0.6367 vs 0.6113 V, eta ORR 0.3770 vs 0.3922 V" into a grid
   rather than a phrase. The prose of a report gets the proportional figures prose is set in. */
.doc-body { font-variant-numeric:normal; }
.doc-body table, .doc-body .codewrap { font-variant-numeric:tabular-nums; }


/* A table in a report is read, not scanned for one figure, so it is set nearer the size of the
   prose than of a financial grid -- and it is only as wide as it needs to be. `width:100%` on a
   two-column table put "Answers to the ten questions" and "0 numbered headings" at opposite ends
   of a 1,100-px column with a hand's width of nothing between them. The frame follows the table
   rather than the column, so a narrow table is a narrow box. */
.doc-body table { width:auto; max-width:100%; }
.doc-body .tablewrap { width:fit-content; max-width:100%; }
.doc-body th, .doc-body td { font-size:15px; }

/* A scroll bar cannot be relied on to say it: macOS hides it until it is used, and asking for
   one with `scrollbar-width` only makes Chromium ignore `::-webkit-scrollbar` and keep the
   overlay bar. So the frame says it in ink. Four background layers: two the colour of the frame
   at its left and right edges, which SCROLL WITH THE CONTENT (`local`), and two soft shadows
   fixed to the frame itself (`scroll`). At the far left the moving cover sits exactly over the
   fixed left shadow and hides it; scroll right and the cover moves away, the shadow appears, and
   the one on the right disappears as the end of the table arrives. A frame with nothing hidden
   shows no shadow at all. No script, and nothing to go stale. */
.doc-body .tablewrap, .doc-body .codewrap {
  background-repeat:no-repeat;
  background-size:34px 100%, 34px 100%, 16px 100%, 16px 100%;
  background-position:left center, right center, left center, right center;
  background-attachment:local, local, scroll, scroll;
}
.doc-body .tablewrap {
  background-color:var(--surface);
  background-image:
    linear-gradient(to right, var(--surface), rgba(255,255,255,0)),
    linear-gradient(to left,  var(--surface), rgba(255,255,255,0)),
    linear-gradient(to right, rgba(16,20,28,.17), rgba(16,20,28,0)),
    linear-gradient(to left,  rgba(16,20,28,.17), rgba(16,20,28,0));
}
.doc-body .codewrap {
  background-color:var(--surface-2);
  background-image:
    linear-gradient(to right, var(--surface-2), rgba(255,255,255,0)),
    linear-gradient(to left,  var(--surface-2), rgba(255,255,255,0)),
    linear-gradient(to right, rgba(16,20,28,.17), rgba(16,20,28,0)),
    linear-gradient(to left,  rgba(16,20,28,.17), rgba(16,20,28,0));
}
/* the table and the listing must not paint over the shadows */
.doc-body .tablewrap > table, .doc-body .codewrap > pre { background:transparent; }

/* Some tables are wider than any column that leaves the prose readable -- three of the fourteen
   in the evidence report, one of the twenty in the cost report -- so their frame scrolls. That
   is right, and it was invisible: macOS hides a scroll bar until it is used, so a table with
   four more columns to the right looked like a table that ended at the edge of its box. These
   frames carry a scroll bar of their own, so "there is more this way" is something the reader
   can see rather than something they have to try. */
@media (max-width: 1100px) {
  main.doc-page { padding-left:24px; padding-right:24px; }
  .doc-body { font-size:16px; --measure:none; }
}
/* `main.doc-page .doc-layout` outranks the `.doc-layout { grid-template-columns:1fr }` in the
   breakpoint above it, so the report kept a 300-px sidebar on a phone and the text was squeezed
   into 48 px beside it. The collapse has to be restated at the same specificity. */
@media (max-width: 1040px) {
  main.doc-page .doc-layout { grid-template-columns:1fr; gap:0; }
}

/* The contents at the head of a research report. The sidebar follows the reader down the
   page; this says, before any of it is read, what the report is made of. */
.doc-contents { margin:22px 0 26px; }
/* The chapters are of very different lengths -- one lists four sections, the next twenty-three.
   In a grid every card in a row is as tall as the tallest card in that row, so a short chapter
   sat in a box with a hand's depth of empty white under it and the block read as misaligned
   rather than as a list. Columns pack them: a card is only as tall as its own contents, the
   browser levels the columns, and the reading order runs down each column, as a printed index
   does. `break-inside` keeps a card whole. */
.chaplist { counter-reset:none; list-style:none; margin:10px 0 0; padding:0;
            columns:420px; column-gap:14px; }
.chaplist > li { --accent:var(--ink-2); margin:0 0 14px; padding:11px 14px;
                 break-inside:avoid; -webkit-column-break-inside:avoid;
                 border:1px solid var(--line); border-left:3px solid var(--accent);
                 border-radius:var(--radius); background:var(--surface, #fff); }
.chaplist-head { display:flex; gap:9px; align-items:baseline; font-weight:650; font-size:14px;
                 color:var(--ink); text-decoration:none; }
.chaplist-head:hover { text-decoration:underline; }
.chaplist-n { flex:none; width:21px; height:21px; display:inline-grid; place-items:center;
              border-radius:999px; background:var(--accent); color:#fff;
              font-size:10.5px; font-weight:700; line-height:1; transform:translateY(2px); }
.chaplist-sections { margin:6px 0 0 30px; font-size:13px; line-height:1.55; color:var(--ink-2); }
.chaplist-sections a { color:var(--ink-2); text-decoration:none; }
.chaplist-sections a:hover { color:var(--ink); text-decoration:underline; }

/* The sources page: what a report is built on, as a list of files. The folder is set quieter
   than the file name because a reader is looking for the file; it is there so they can find it,
   not to be read. */
.srcgroup { margin:0 0 30px; }
.srcgroup .part { font-size:19px; }
.srccount { font-weight:450; font-size:13px; color:var(--ink-2);
            background:var(--surface-2); border:1px solid var(--line);
            border-radius:999px; padding:2px 10px; margin-left:10px; }
.srcgroup .tablewrap { width:fit-content; max-width:100%; }
td.srcname { font-weight:600; color:var(--ink); }
.srckind { display:block; font-weight:450; font-size:12px; color:var(--ink-3); margin-top:2px; }
td.srcfolder { color:var(--ink-2); font-size:13px; font-family:var(--mono);
               overflow-wrap:anywhere; max-width:62ch; }
.srcgroup td.num, .srcgroup th.num { text-align:right; font-variant-numeric:tabular-nums;
                                     width:5em; }

/* The research index: one card per report, side by side where there is room. */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); gap:16px;
         margin:4px 0 22px; }
.cards > .panel { margin:0; }

.figures { margin:18px 0 26px; }
/* `minmax(420px, …)` is a floor, and a floor wider than the screen pushes the whole page
   sideways: on a 430-px phone each figure was drawn 62 px wider than the window. `min(420px,
   100%)` keeps the two-up layout wherever there is room for it and gives way where there is not. */
.fig-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr));
            gap:18px; }
/* A chart is an SVG scaled to the width of its card, so two to a row meant every label and
   every value drawn at about ten pixels -- smaller than the figure's own caption and much
   smaller than the prose. One to a row, and capped so a very wide window does not blow them
   up instead: the labels land near the size of the text around them. */
main.doc-page .fig-grid { grid-template-columns:1fr; }
main.doc-page .fig { max-width:1040px; }
.fig { margin:0; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
       background:var(--surface, #fff); overflow:hidden; }
.fig-title { font-weight:600; font-size:14px; margin-bottom:10px; }
.fig-unit { font-weight:400; color:var(--ink-2); }
.fig-svg { width:100%; height:auto; display:block; }
.fig-label { font-size:11.5px; fill:var(--ink-2); }
.fig-value { font-size:11.5px; font-weight:600; fill:var(--ink); }
.fig-value.is-missing { font-weight:400; fill:var(--ink-2); }
.fig-axis  { font-size:11px; fill:var(--ink-2); }
.fig-legend{ font-size:11px; fill:var(--ink-2); }
.fig-target{ font-size:11px; font-weight:600; fill:#a3342f; }
.fig-note  { font-size:12.5px; color:var(--ink-2); margin:10px 0 4px; }
.fig-source{ font-size:11.5px; color:var(--ink-2); margin:0; font-style:italic; }

/* ── research reports: chapters, entry cards, and the bar between them ───────
   A report with several hundred entries reads as a wall unless the structure it already has is
   shown: a chapter is a block with an accent, an experiment is a card, and the lines that say
   where a figure came from are metadata, not findings, so they are set quieter than the text
   they support. Nothing here hides anything -- every word is still on the page. */
.chapter { --accent:var(--research); }
.chapter > h2.part { border-left:4px solid var(--accent); padding-left:12px; }

/* The chapter bar: one line high, whatever the number of chapters. Previous and next are
   named and truncate; the full list opens over the page from the middle; the rail under it
   says how far through the report the reader is. */
.chapbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
           align-items:center; gap:10px;
           margin:30px 0 12px; padding:7px 12px 9px; border:1px solid var(--line);
           border-radius:999px; background:var(--surface-2, #fafafa);
           position:sticky; top:56px; z-index:6; }
.chap-prev, .chap-next { display:flex; align-items:center; gap:6px; min-width:0;
                         overflow:hidden; font-size:12px;
                         text-decoration:none; color:var(--ink-2); }
.chap-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chap-next { justify-content:flex-end; }
.chap-arrow { color:var(--accent); font-weight:700; flex:none; }
.chap-prev:hover, .chap-next:hover { color:var(--ink); }
.chap-prev.is-off, .chap-next.is-off { opacity:.4; }
.chap-jump { position:relative; }
.chap-jump > summary { display:flex; align-items:center; gap:8px; cursor:pointer;
                       list-style:none; padding:3px 12px; border-radius:999px;
                       border:1px solid var(--line); background:var(--surface, #fff);
                       font-size:11.5px; color:var(--ink-2); white-space:nowrap; }
.chap-jump > summary::-webkit-details-marker { display:none; }
.chap-jump > summary:hover { border-color:var(--accent); color:var(--ink); }
.chap-where { font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.chap-all::after { content:" \25be"; }
.chap-pills { display:none; }
.chap-jump[open] > .chap-pills { display:grid; gap:4px; position:absolute; z-index:20;
             left:50%; transform:translateX(-50%); top:calc(100% + 8px); width:min(460px, 86vw);
             max-height:60vh; overflow:auto; padding:8px; border:1px solid var(--line);
             border-radius:var(--radius); background:var(--surface, #fff);
             box-shadow:0 12px 34px rgba(0,0,0,.14); }
.chap-pill { --accent:var(--research); display:flex; align-items:center; gap:9px; font-size:12.5px;
             line-height:1.3; padding:6px 10px; border-radius:8px; color:var(--ink-2);
             text-decoration:none; border-left:3px solid var(--accent); }
.chap-n { flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:999px;
          background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; }
.chap-pill:hover { background:var(--surface-2, #f6f6f6); color:var(--ink); }
.chap-pill.is-here { background:var(--surface-2, #f3f3f3); color:var(--ink); font-weight:600; }
.chap-rail { grid-column:1 / -1; height:3px; border-radius:999px;
             background:var(--line); overflow:hidden; }
.chap-rail > span { display:block; height:100%; background:var(--accent); border-radius:999px; }

.entry { border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius);
         padding:12px 16px 6px; margin:14px 0; background:var(--surface, #fff); }
.entry > h3 { margin-top:0; font-size:15px; }
.entry > ul, .entry > p { max-width:var(--measure); }
.entry-meta { font-size:12px; color:var(--ink-2); }
.entry-meta code { font-size:11px; }
/* The findings and conclusions are written as numbered lists whose items are whole
   paragraphs. Left as a plain `<ol>` they are a wall: eight items, each six lines of prose,
   with nothing between them but a number in the margin. Inside a research document each item
   becomes its own card -- a numbered disc in the accent colour, the bold lead as a heading,
   the body under it -- so the eye can find the one it wants. */
.doc-body ol { counter-reset:find; padding-left:0; list-style:none; }
.doc-body ol > li {
  counter-increment:find; position:relative; margin:12px 0; padding:12px 16px 12px 52px;
  border:1px solid var(--line); border-left:3px solid var(--accent, var(--line));
  border-radius:var(--radius); background:var(--surface, #fff); max-width:none;
}
.doc-body ol > li::before {
  content:counter(find); position:absolute; left:14px; top:12px;
  width:24px; height:24px; display:grid; place-items:center; border-radius:999px;
  background:var(--accent, var(--ink-2)); color:#fff; font-size:11.5px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.doc-body ol > li > strong:first-child {
  display:block; margin-bottom:5px; color:var(--ink); font-size:16.5px; font-weight:680;
}
/* a list nested inside one of those cards is an ordinary list again */
.doc-body ol ol, .doc-body ol ul { list-style:revert; padding-left:22px; counter-reset:none; }
.doc-body ol ol > li, .doc-body ol ul > li {
  counter-increment:none; position:static; margin:6px 0; padding:0;
  border:0; border-radius:0; background:none;
}
.doc-body ol ol > li::before, .doc-body ol ul > li::before { content:none; }

/* A fenced block -- the database appendices -- is verbatim and long. It scrolls inside its own
   frame instead of setting the width of the page. */
.codewrap { max-height:460px; overflow:auto; border:1px solid var(--line);
            border-radius:var(--radius); background:var(--surface-2, #fafafa);
            margin:14px 0; }
.codewrap pre { margin:0; padding:12px 14px; }
.codewrap code { font-size:11.5px; line-height:1.55; white-space:pre; }