/* Manual desk — soft pastel neobrutalism. Hand-written, no build step (D5).
 *
 * THE DESIGN IS RATIFIED AND WRITTEN DOWN: docs/design-language.md carries the
 * provenance (emulating hister.org, tokens extracted 2026-08-24), what is
 * observed from the reference versus adapted by us, and the reasoning for the
 * one part that is genuinely ours — the semantic mapping in §3, where the pastel
 * accent family encodes the manual's epistemology.
 *
 * READ THAT FILE BEFORE CHANGING A COLOUR HERE. A status accent is a claim about
 * how much to trust a rule, not a decoration: `render.STATUS_ACCENT` is the
 * ratified mapping and a test pins it.
 *
 * Three rules that explain most of what follows:
 *   1. Borders are 2-3px SOLID INK. Never 1px, never grey.
 *   2. Shadows are HARD — zero blur, offset only. Ink, or the element's accent.
 *   3. A pastel surface always carries dark ink text. Never white on pastel.
 */

/* ── Fonts: self-hosted, latin subset, one variable file per family ──────────
 * OFL, vendored rather than linked. `ops/Caddyfile` sends `default-src 'self'`,
 * so a Google Fonts link would work on a developer's machine and be silently
 * blocked in production — the worst failure shape there is. A system stack is
 * declared on every family so a failed load degrades to a readable page. */

@font-face {
  font-family: "Outfit";
  src: url("/static/fonts/outfit-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fira Code";
  src: url("/static/fonts/firacode-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── The skeleton (observed) ─────────────────────────────────────────────── */
  --ink:        #2b2b2b;   /* never pure black */
  --ink-soft:   #55555a;
  --ink-faint:  #77777e;
  --paper:      #ededed;
  --paper-warm: #f7f7f5;
  --card:       #fafafa;
  --card-2:     #f5f5f5;
  --border:     #2b2b2b;
  --dark-band:  #18191b;
  --dark-ink:   #eef0f3;

  /* ── The pastel accent family (observed) ─────────────────────────────────── */
  --amber:  #efcc34;
  --coral:  #e18d72;
  --cyan:   #5ab7ec;
  --indigo: #bc86dd;
  --lime:   #add46c;
  --rose:   #e184a1;
  --teal:   #33c4aa;

  /* Fixed, and deliberately NOT theme-flipped. A pastel surface always carries
   * dark ink: `#2b2b2b` clears 4.5:1 on all seven, white clears 3:1 on none. */
  --on-accent: #2b2b2b;

  /* ── The semantic mapping (adapted — design-language.md §3) ──────────────── */
  --st-locked:             var(--teal);
  --st-ruled-by-reference: var(--cyan);
  --st-encoded:            var(--amber);
  --st-inferred:           var(--indigo);
  --st-contested:          var(--rose);
  /* Reserved for a human's correction (phase 5's ledger). Nothing else uses it. */
  --st-confirmed:          var(--lime);
  --fault:                 var(--coral);

  /* ── Structure ──────────────────────────────────────────────────────────── */
  --bw:       3px;          /* card and button border */
  --bw-thin:  2px;          /* chip border */
  --bar:      7px;          /* the callout / accent bar */
  --shadow:   3px 3px 0 var(--border);
  --shadow-sm: 2px 2px 0 var(--border);
  --shadow-lg: 6px 6px 0 var(--border);
  --measure: 66ch;

  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #eef0f3;
    --ink-soft:   #b4b9c2;
    --ink-faint:  #8c929c;
    --paper:      #18191b;
    --paper-warm: #1e2023;
    --card:       #202226;
    --card-2:     #262a2f;
    --border:     #464b54;
    --dark-band:  #101113;
    /* The accents are unchanged: they are pastel, they read on either ground,
     * and `--on-accent` stays dark on both — which is what keeps one contrast
     * rule instead of two. */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ── Type ───────────────────────────────────────────────────────────────────
 * Display is enormous, ultra-bold, all-caps, tight-leading, with ONE word
 * knocked out in an accent. One per page — a second cancels the first. */

.knock {
  font: 800 clamp(2.1rem, 5.5vw, 3.6rem)/0.98 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.knock em {
  font-style: normal;
  color: var(--indigo);
}

/* Knockout colours as classes, not inline styles: `ops/Caddyfile` sends
 * `style-src 'self'`, which blocks a `style=` attribute. A design that needed
 * one would work locally and be silently stripped in production. */
.kn-teal em   { color: var(--teal); }
.kn-cyan em   { color: var(--cyan); }
.kn-amber em  { color: var(--amber); }
.kn-rose em   { color: var(--rose); }
.kn-lime em   { color: var(--lime); }
.kn-coral em  { color: var(--coral); }

/* On a dark band the knockout goes amber, as the reference does. */
.band-dark .knock em { color: var(--amber); }

/* The reference CENTRES its display type inside accent and dark bands, and
 * left-aligns it on plain ones. Body copy stays left-aligned at a reading
 * measure — centred paragraphs at 66 characters are unreadable — so the block
 * is centred rather than the text. */
.knock.centred { text-align: center; }
.band-dark .page { max-width: 46rem; margin: 0 auto; }

h1 { font: 800 2rem/1.05 var(--display); text-transform: uppercase; letter-spacing: -0.015em; margin: 0 0 0.9rem; }
h2 { font: 700 1.15rem/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.005em; margin: 0 0 0.8rem; }
h3 { font: 700 1.1rem/1.3 var(--display); margin: 0; }

p { margin: 0 0 1.05rem; max-width: var(--measure); }

/* The mono eyebrow: small, dash-prefixed, muted, above a heading. */
.eyebrow {
  font: 500 0.72rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.55rem;
}

/* The reference marks its eyebrows with a small coloured square, not a dash. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.5em;
  background: var(--cyan);
  border: 1px solid var(--border);
  vertical-align: baseline;
}

.band-dark .eyebrow::before { background: var(--amber); }

.lede { font-size: 1.06rem; color: var(--ink-soft); margin-bottom: 1.6rem; }

.fine { font: 400 0.85rem/1.55 var(--sans); color: var(--ink-faint); margin-bottom: 0; }

a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--indigo); }

code {
  font: 400 0.85em/1.4 var(--mono);
  background: var(--card-2);
  border: 1px solid var(--border);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}

/* ── Bands ──────────────────────────────────────────────────────────────────
 * Pages are full-bleed horizontal bands rather than cards floating on one
 * background. Alternating paper → warm → accent → dark. */

.band { padding: 2.5rem 2rem; border-bottom: var(--bw) solid var(--border); }
.band-paper { background: var(--paper); }
.band-warm  { background: var(--paper-warm); }
.band-amber { background: var(--amber); color: var(--on-accent); }
.band-dark  { background: var(--dark-band); color: var(--dark-ink); }
.band-dark .lede, .band-dark .fine { color: #b9bec8; }
.band:last-child { border-bottom: 0; }

.bandinner { max-width: 68rem; margin: 0 auto; }

/* ── Chunky slab buttons ────────────────────────────────────────────────────
 * Pastel fill, ink border, ink text, hard shadow that collapses on press. No
 * ghost buttons and no thin outlines: they are the idiom this language rejects. */

/* RECONCILED AGAINST THE RENDERED REFERENCE, 2026-08-24. My first pass made
 * these pastel-filled. The reference's actual buttons are an INK-FILLED primary
 * with light text beside a light-filled secondary with an ink border — the
 * pastels are spent on chips, icons and bands, never on the button. Corrected,
 * and recorded in design-language.md §5.6. */
.btn,
button[type="submit"] {
  display: inline-block;
  font: 600 0.95rem/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: var(--bw) solid var(--border);
  border-radius: 4px;
  padding: 0.85rem 1.3rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.btn:hover,
button[type="submit"]:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-lg); }

.btn:active,
button[type="submit"]:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border); }

/* A disabled button is HELD DOWN, not grayed out: the hard shadow vanishes and
   the button sits in the space the shadow occupied -- the neobrutal grammar for
   "pressed and busy". Without this rule the disabled attribute changed nothing
   visually (found by Jake, first real session: the button worked, and looked
   like it didn't). cursor: wait says the machine is thinking, not refusing. */
.btn:disabled,
button[type="submit"]:disabled {
  transform: translate(3px, 3px);
  box-shadow: none;
  cursor: wait;
}

.btn:focus-visible,
button[type="submit"]:focus-visible { outline: var(--bw-thin) solid var(--indigo); outline-offset: 3px; }

.btn-2 { background: var(--card); color: var(--ink); }

/* On a dark band the fills invert, or the primary disappears into the ground. */
.band-dark .btn { background: var(--dark-ink); color: var(--dark-band); border-color: var(--dark-ink); }
.band-dark .btn-2 { background: transparent; color: var(--dark-ink); border-color: var(--dark-ink); }
.band-dark .btn:hover, .band-dark .btn-2:hover { box-shadow: 6px 6px 0 var(--amber); }

/* ── Inputs ─────────────────────────────────────────────────────────────────*/

label {
  display: grid;
  gap: 0.45rem;
  font: 600 0.72rem/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

input[type="email"],
input[type="password"],
input[type="search"],
input[type="text"] {
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: 4px;
  padding: 0.75rem 0.85rem;
  width: 100%;
  box-shadow: inset var(--shadow-sm);
  -webkit-appearance: none;
}

input:focus-visible { outline: var(--bw-thin) solid var(--indigo); outline-offset: 2px; }

.codebox {
  font: 500 1.6rem/1 var(--mono) !important;
  letter-spacing: 0.4em;
  text-align: center;
}

.stack { display: grid; gap: 1.1rem; margin: 0 0 1.6rem; }

.error {
  font: 500 0.92rem/1.5 var(--sans);
  color: var(--on-accent);
  background: var(--coral);
  border: var(--bw-thin) solid var(--border);
  border-left: var(--bar) solid var(--border);
  padding: 0.75rem 0.95rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.4rem;
}

/* ── The gate: one centred brutal card, the aesthetic's thesis statement ─────*/

body.centred { display: grid; place-items: center; min-height: 100vh; padding: 2rem 1.25rem; }

.gate {
  width: min(31rem, 100%);
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: 6px;
  padding: 2.5rem 2.25rem 2rem;
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* Garnish, and the only garnish on the page: two small rotated pastel squares.
 * The reference is disciplined about this, and the discipline is why it reads as
 * designed rather than decorated. */
.gate::before,
.gate::after {
  content: "";
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  border: var(--bw-thin) solid var(--border);
  z-index: -1;
}

.gate::before { top: -1.1rem; right: -1.1rem; background: var(--teal); transform: rotate(12deg); }
.gate::after { bottom: -1.1rem; left: -1.1rem; background: var(--rose); transform: rotate(-9deg); }

.gate .knock { font-size: clamp(1.9rem, 7vw, 2.6rem); }

/* ── Chrome ─────────────────────────────────────────────────────────────────*/

body.reader { display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.8rem 1.5rem;
  background: var(--card);
  border-bottom: var(--bw) solid var(--border);
  font: 400 0.9rem/1 var(--sans);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  font: 800 1rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.find { flex: 1; max-width: 20rem; }
.find input[type="search"] { padding: 0.45rem 0.7rem; font-size: 0.9rem; box-shadow: none; border-width: var(--bw-thin); }

.who { color: var(--ink-faint); font-family: var(--mono); font-size: 0.78rem; margin-left: auto; }

.linkish {
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linkish:hover { color: var(--ink); }

/* The dev-mode banner (A9). Loud on purpose: a bypassed session must never be
 * mistakable for a real one. */
.devbanner {
  background: var(--coral);
  color: var(--on-accent);
  border-bottom: var(--bw) solid var(--border);
  padding: 0.55rem 1.5rem;
  font: 500 0.82rem/1.4 var(--mono);
}

.devbanner strong { font-weight: 700; letter-spacing: 0.1em; }

/* ── The shell ──────────────────────────────────────────────────────────────*/

.shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); flex: 1; }

.sidenav {
  position: sticky;
  top: 3.1rem;
  align-self: start;
  max-height: calc(100vh - 3.1rem);
  overflow-y: auto;
  padding: 1.4rem 0.9rem 3rem;
  background: var(--paper-warm);
  border-right: var(--bw) solid var(--border);
  font: 400 0.87rem/1.35 var(--sans);
}

.navhead {
  font: 600 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 1.5rem 0 0.5rem 0.5rem;
}

.navhead::before { content: "— "; }

.domains { list-style: none; margin: 0; padding: 0; }

.navlink {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0.6rem;
  color: var(--ink-soft);
  text-decoration: none;
  border: var(--bw-thin) solid transparent;
  border-radius: 4px;
}

.navlink:hover { border-color: var(--border); background: var(--card); color: var(--ink); }

.navlink.here {
  background: var(--cyan);
  color: var(--on-accent);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.navlink.flag { background: var(--rose); color: var(--on-accent); border-color: var(--border); box-shadow: var(--shadow-sm); font-weight: 600; }
.navlink.flag:hover { box-shadow: var(--shadow); }

.dname { min-width: 0; overflow-wrap: break-word; }
.dcount { font: 500 0.74rem/1 var(--mono); flex: none; }

.reading { min-width: 0; }
.reading .band { padding: 2.25rem 2.25rem; }
.page { max-width: 52rem; }

/* ── The stat-chip strip: the desk's thesis rendered ────────────────────────
 * The five status counts as bordered chip-cards in their status colours,
 * doubling as the filter toggles. The amber card is bigger than all the others
 * put together, and that is the problem the desk exists for. */

.statstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.stat {
  display: block;
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: 5px;
  padding: 0.85rem 0.9rem 0.75rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 80ms ease, box-shadow 80ms ease;
}

.stat:hover { transform: translate(-1px, -1px); }

.stat .dot {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  margin-bottom: 0.6rem;
}

.stat .n {
  display: block;
  font: 800 1.85rem/1 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat .k {
  display: block;
  font: 500 0.66rem/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

/* Each stat card's accent is its status. The hover shadow is that colour too,
 * which is what makes the card read as belonging to the status rather than
 * merely mentioning it. */
.s-locked             .dot { background: var(--st-locked); }
.s-ruled-by-reference .dot { background: var(--st-ruled-by-reference); }
.s-encoded            .dot { background: var(--st-encoded); }
.s-inferred           .dot { background: var(--st-inferred); }
.s-contested          .dot { background: var(--st-contested); }

.stat.s-locked:hover             { box-shadow: 4px 4px 0 var(--st-locked); }
.stat.s-ruled-by-reference:hover { box-shadow: 4px 4px 0 var(--st-ruled-by-reference); }
.stat.s-encoded:hover            { box-shadow: 4px 4px 0 var(--st-encoded); }
.stat.s-inferred:hover           { box-shadow: 4px 4px 0 var(--st-inferred); }
.stat.s-contested:hover          { box-shadow: 4px 4px 0 var(--st-contested); }

.stat.on { box-shadow: var(--shadow-lg); }
.stat.s-locked.on             { background: var(--st-locked); color: var(--on-accent); }
.stat.s-ruled-by-reference.on { background: var(--st-ruled-by-reference); color: var(--on-accent); }
.stat.s-encoded.on            { background: var(--st-encoded); color: var(--on-accent); }
.stat.s-inferred.on           { background: var(--st-inferred); color: var(--on-accent); }
.stat.s-contested.on          { background: var(--st-contested); color: var(--on-accent); }
.stat.on .k { color: var(--on-accent); opacity: 0.8; }
.stat.on .dot { background: var(--card); }

/* ── The confidence chip: plain words lead, jargon trails (A12) ─────────────
 * Two halves in one bordered unit. The left half is what a staffer reads —
 * "nobody has confirmed this" — filled with the status accent, dark ink on
 * pastel. The right half is the manual's own word, in mono, quiet, for the
 * reader who has learned the vocabulary and wants it.
 *
 * FILLED rather than tinted-text, because pastel text on near-white is
 * illegible — see design-language.md §2. */

.verdict {
  display: inline-flex;
  align-items: stretch;
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  cursor: help;
  vertical-align: middle;
}

.v-plain {
  padding: 0.1em 0.5em;
  font: 500 0.74rem/1.5 var(--sans);
  color: var(--on-accent);
  white-space: nowrap;
}

.verdict.s-locked             .v-plain { background: var(--st-locked); }
.verdict.s-ruled-by-reference .v-plain { background: var(--st-ruled-by-reference); }
.verdict.s-encoded            .v-plain { background: var(--st-encoded); }
.verdict.s-inferred           .v-plain { background: var(--st-inferred); }
.verdict.s-contested          .v-plain { background: var(--st-contested); }

/* The formal tag. Also used on its own, inside a disclosure, for the class. */
.v-tag {
  padding: 0.1em 0.4em;
  font: 400 0.66rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: var(--card-2);
  white-space: nowrap;
}

.verdict .v-tag { border-left: var(--bw-thin) solid var(--border); }

p .v-tag, td .v-tag {
  border: 1px solid var(--border);
  border-radius: 3px;
}

/* ── Disclosures ───────────────────────────────────────────────────────────
 * Where the machinery goes. A file path and a line number are true, useful to
 * two people, and meaningless to a staffer with no copy of the software — so
 * D17's citation is SHOWN, one click away, rather than leading the rule. */

.provenance, .morefilters { margin: 0.35rem 0 0; }

.provenance > summary, .morefilters > summary {
  font: 500 0.74rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  cursor: pointer;
  list-style: none;
  display: inline-block;
  border-bottom: 1px dashed var(--border);
}

.provenance > summary::-webkit-details-marker,
.morefilters > summary::-webkit-details-marker { display: none; }

.provenance > summary::before, .morefilters > summary::before { content: "+ "; }
.provenance[open] > summary::before, .morefilters[open] > summary::before { content: "– "; }

.provenance > summary:hover, .morefilters > summary:hover { color: var(--ink); }

.provenance-body {
  margin-top: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.provenance-body p { margin: 0 0 0.5rem; }
.provenance-body p:last-child { margin-bottom: 0; }

.morefilters { margin-top: 0.9rem; }
.morefilters[open] > .filterset, .morefilters[open] > table { margin-top: 0.7rem; }

/* ── The epistemic ledger ───────────────────────────────────────────────────*/

.ledger { border-collapse: separate; border-spacing: 0 0.5rem; width: 100%; }

.ledger td {
  padding: 0.5rem 0.9rem 0.5rem 0;
  vertical-align: baseline;
  background: var(--card);
  border-top: var(--bw-thin) solid var(--border);
  border-bottom: var(--bw-thin) solid var(--border);
}

.ledger td:first-child { border-left: var(--bar) solid var(--border); padding-left: 0.8rem; }
.ledger td:last-child { border-right: var(--bw-thin) solid var(--border); padding-right: 0.8rem; }

.ledger tr.s-locked             td:first-child { border-left-color: var(--st-locked); }
.ledger tr.s-ruled-by-reference td:first-child { border-left-color: var(--st-ruled-by-reference); }
.ledger tr.s-encoded            td:first-child { border-left-color: var(--st-encoded); }
.ledger tr.s-inferred           td:first-child { border-left-color: var(--st-inferred); }
.ledger tr.s-contested          td:first-child { border-left-color: var(--st-contested); }

.l-chip { width: 1%; white-space: nowrap; }
.l-count { width: 1%; font: 700 1.05rem/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.l-count a { text-decoration: none; }
.l-count a:hover { text-decoration: underline; }
.l-mean { font: 400 0.88rem/1.45 var(--sans); color: var(--ink-soft); }

/* ── Filters ────────────────────────────────────────────────────────────────*/

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  padding: 1rem 1.1rem;
  background: var(--paper-warm);
  border: var(--bw) solid var(--border);
  border-radius: 5px;
  box-shadow: var(--shadow-sm);
  margin: 0 0 1.75rem;
}

.filterset { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.fslabel {
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.25rem;
}

.fchip {
  font: 500 0.75rem/1.5 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  padding: 0.14em 0.55em;
  text-decoration: none;
  white-space: nowrap;
}

.fchip:hover { box-shadow: var(--shadow-sm); color: var(--ink); }

.fcount { font-variant-numeric: tabular-nums; opacity: 0.7; }

/* An active filter is FILLED, not merely outlined — a toggle whose state you
 * have to squint at is a toggle people re-click by accident. */
.fchip.on { color: var(--on-accent); background: var(--indigo); box-shadow: var(--shadow-sm); font-weight: 600; }
.fchip.s-locked.on             { background: var(--st-locked); }
.fchip.s-ruled-by-reference.on { background: var(--st-ruled-by-reference); }
.fchip.s-encoded.on            { background: var(--st-encoded); }
.fchip.s-inferred.on           { background: var(--st-inferred); }
.fchip.s-contested.on          { background: var(--st-contested); }

.filterstate, .resultcount {
  font: 400 0.84rem/1.5 var(--mono);
  color: var(--ink-faint);
  margin: -0.9rem 0 1.5rem;
}

.clearfilters { margin-left: 0.6rem; }

/* ── Domain pages ───────────────────────────────────────────────────────────*/

.jumplist { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 2rem; }

.jumplist a {
  font: 500 0.75rem/1.5 var(--mono);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  padding: 0.14em 0.55em;
}

.jumplist a:hover { box-shadow: var(--shadow-sm); color: var(--ink); }

.jcount { opacity: 0.6; }

.sectionhead {
  font: 700 0.78rem/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 3rem 0 1.1rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--bw-thin) dashed var(--border);
}

/* ── A rule card: the atom ──────────────────────────────────────────────────
 * Status accent bar left, ID chip in mono top-left, class as the mono foot
 * label, hard shadow lifting on hover. */

.rule {
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-left: var(--bar) solid var(--border);
  border-radius: 0 5px 5px 0;
  padding: 1.15rem 1.3rem 1rem;
  margin: 0 0 1.1rem;
  box-shadow: var(--shadow-sm);
  /* The anchor is the point (D18): without this, landing on #GPS-OPS-403 puts
   * the card under the sticky top bar. */
  scroll-margin-top: 4.5rem;
  transition: box-shadow 90ms ease, transform 90ms ease;
}

.rule.s-locked             { border-left-color: var(--st-locked); }
.rule.s-ruled-by-reference { border-left-color: var(--st-ruled-by-reference); }
.rule.s-encoded            { border-left-color: var(--st-encoded); }
.rule.s-inferred           { border-left-color: var(--st-inferred); }
.rule.s-contested          { border-left-color: var(--st-contested); }

.rule:hover { transform: translate(-1px, -1px); }
.rule.s-locked:hover             { box-shadow: 5px 5px 0 var(--st-locked); }
.rule.s-ruled-by-reference:hover { box-shadow: 5px 5px 0 var(--st-ruled-by-reference); }
.rule.s-encoded:hover            { box-shadow: 5px 5px 0 var(--st-encoded); }
.rule.s-inferred:hover           { box-shadow: 5px 5px 0 var(--st-inferred); }
.rule.s-contested:hover          { box-shadow: 5px 5px 0 var(--st-contested); }

/* A rule arrived at by its anchor. Calm, but unmistakable: somebody following a
 * link from a finding has to know which of 146 rules they landed on. */
.rule:target { box-shadow: var(--shadow-lg); border-color: var(--border); }

.rule-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.rule-id {
  grid-area: 1 / 1;
  justify-self: start;
  font: 500 0.72rem/1.5 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--card-2);
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.45em;
}

.rule-id:hover { background: var(--cyan); color: var(--on-accent); }

.rule-head .tags { grid-area: 1 / 2; justify-self: end; margin: 0; }

.rule-head h3 {
  grid-area: 2 / 1 / 3 / 3;
  font: 700 1.16rem/1.3 var(--display);
  letter-spacing: -0.005em;
  max-width: var(--measure);
}

.rule-fields { margin: 0; }

.field { margin: 0 0 0.9rem; }

.field dt {
  font: 600 0.67rem/1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}

.field dt.unlabelled { color: transparent; }
.field dd { margin: 0; }
.field dd p { margin: 0 0 0.6rem; max-width: var(--measure); }
.field dd p:last-child { margin-bottom: 0; }
.field dd ul { margin: 0 0 0.6rem; padding-left: 1.2rem; max-width: var(--measure); }

/* The claim reads a step above its own evidence. Which field IS the claim is
 * decided in render.fields(), not here. */
.field.primary dd p { font-size: 1.04rem; }

/* ── Tables inside a rule ───────────────────────────────────────────────────*/

.tablewrap { overflow-x: auto; margin: 0 0 0.7rem; }
.tablewrap table { border-collapse: collapse; font: 400 0.85rem/1.5 var(--sans); }

.tablewrap th, .tablewrap td {
  text-align: left;
  padding: 0.35rem 0.85rem 0.35rem 0.5rem;
  border: 1px solid var(--border);
  vertical-align: top;
}

.tablewrap th { font: 600 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; background: var(--card-2); }

/* ── A rule as a compact list row ───────────────────────────────────────────
 * 856 rules cannot be 856 fat cards (design-language.md §5.5). List and search
 * views are compact rows; only the domain reading view renders full cards. */

.rulelist { list-style: none; margin: 0; padding: 0; }

.rule-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.85rem 0.9rem;
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: 0 4px 4px 0;
  margin-bottom: 0.5rem;
}

.rule-row:hover { box-shadow: var(--shadow-sm); }

.rule-row.s-locked             { border-left-color: var(--st-locked); }
.rule-row.s-ruled-by-reference { border-left-color: var(--st-ruled-by-reference); }
.rule-row.s-encoded            { border-left-color: var(--st-encoded); }
.rule-row.s-inferred           { border-left-color: var(--st-inferred); }
.rule-row.s-contested          { border-left-color: var(--st-contested); }

.rr-id { font: 500 0.72rem/1.7 var(--mono); letter-spacing: 0.05em; color: var(--ink-soft); text-decoration: none; }
.rr-id:hover { color: var(--ink); text-decoration: underline; }
.rr-body { min-width: 0; }
.rr-title { font: 700 0.98rem/1.35 var(--display); color: var(--ink); text-decoration: none; }
.rr-title:hover { text-decoration: underline; }
.rr-claim { font: 400 0.87rem/1.5 var(--sans); color: var(--ink-soft); margin: 0.25rem 0 0.4rem; max-width: var(--measure); }
.rr-meta { margin: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.rr-domain { font: 400 0.72rem/1.5 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; }
.rr-domain:hover { color: var(--ink); }

/* ── The domain grid ────────────────────────────────────────────────────────*/

.domaingrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
}

.domaingrid li {
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-top: 5px solid var(--border);
  border-radius: 0 0 4px 4px;
  padding: 0.85rem 0.95rem;
  box-shadow: var(--shadow-sm);
}

.domaingrid li:hover { box-shadow: var(--shadow); }
.dg-name { font: 700 1rem/1.25 var(--display); color: var(--ink); text-decoration: none; }
.dg-name:hover { text-decoration: underline; }
.dg-count { display: block; font: 500 0.7rem/1.7 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.dg-blurb { font: 400 0.85rem/1.45 var(--sans); color: var(--ink-soft); margin: 0.35rem 0 0; }

.starts { margin: 0; padding-left: 1.15rem; }
.starts li { margin-bottom: 0.75rem; max-width: var(--measure); }

/* ── Notices ────────────────────────────────────────────────────────────────
 * Every state that is not "here are your rules" renders through one of these,
 * and names its reason. An empty result with no explanation is the failure mode
 * this whole repo is about. */

.notice {
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-left: var(--bar) solid var(--border);
  border-radius: 0 5px 5px 0;
  padding: 1.15rem 1.3rem;
  box-shadow: var(--shadow-sm);
}

.notice h1, .notice h2 { margin-top: 0; }
.notice h1 { font-size: 1.45rem; }
.notice p:last-child { margin-bottom: 0; }
.notice.bad { border-left-color: var(--fault); }

.problems { font: 400 0.82rem/1.6 var(--mono); color: var(--ink-soft); margin: 0.6rem 0 0; padding-left: 1.1rem; }
.reconciled { margin-top: 2.25rem; }

/* ── The version stamp ──────────────────────────────────────────────────────*/

.stamp {
  border-top: var(--bw) solid var(--border);
  padding: 0.8rem 2rem;
  font: 400 0.75rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  background: var(--paper-warm);
}

.alarm { color: var(--on-accent); background: var(--coral); padding: 0.05em 0.4em; border: 1px solid var(--border); }

/* ── Narrow screens ─────────────────────────────────────────────────────────
 * No hamburger and no JavaScript: the nav becomes a wrapping strip above the
 * reading column. A build step to hide thirteen links would be the tax D5
 * refuses to pay. */

@media (max-width: 54rem) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidenav {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: var(--bw) solid var(--border);
    padding: 1rem 1.25rem;
  }

  .domains { display: flex; flex-wrap: wrap; gap: 0.35rem; }
  .navhead { margin-left: 0; }
  .band, .reading .band { padding: 1.6rem 1.25rem; }
  .stamp { padding: 0.8rem 1.25rem; }
  .find { max-width: none; }
  .rule-row { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .topbar { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:hover, button[type="submit"]:hover, .rule:hover, .stat:hover { transform: none; }
}

/* ── The chat (phase 3) ─────────────────────────────────────────────────────
 * A conversation about one rule, so the rule is on the page and the transcript
 * reads down the column beneath it. Deliberately not a support widget: this is
 * a document with a margin note being written into it. */

.chatrule { margin-bottom: 0; }

.wrongform { margin: 1rem 0 0; }

/* The one action on the reading surface, so it is allowed to be the loud thing.
 * Rose, because this is where a disagreement gets recorded. */
.btn-wrong {
  font-size: 0.82rem;
  padding: 0.6rem 0.95rem;
  background: var(--rose);
  color: var(--on-accent);
}

.transcript { list-style: none; margin: 0 0 1.75rem; padding: 0; }

.turn {
  border-left: var(--bar) solid var(--border);
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-left-width: var(--bar);
  border-radius: 0 5px 5px 0;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--shadow-sm);
}

/* Who is speaking is carried by colour as well as by the label, because a
 * transcript read months later has to be unambiguous about that. */
.turn-user { border-left-color: var(--cyan); }
.turn-assistant { border-left-color: var(--indigo); }

.who-said {
  font: 600 0.66rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.45rem;
}

.said p { margin: 0 0 0.6rem; max-width: var(--measure); }
.said p:last-child { margin-bottom: 0; }
.said.failed { color: var(--ink-soft); font-style: italic; }

.askbox {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  margin: 0 0 1.25rem;
}

.askbox label { width: 100%; }

.askbox textarea {
  font: 400 1rem/1.6 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: 4px;
  padding: 0.8rem 0.9rem;
  width: 100%;
  box-shadow: inset var(--shadow-sm);
  resize: vertical;
}

.askbox textarea:focus-visible { outline: var(--bw-thin) solid var(--indigo); outline-offset: 2px; }

/* A truncated reply says so, in the accent reserved for faults. */
.cutoff {
  font: 400 0.84rem/1.5 var(--sans);
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--coral) 18%, transparent);
  border-left: var(--bw-thin) solid var(--coral);
  padding: 0.45rem 0.7rem;
  margin: 0.6rem 0 0;
}

/* ── Commentary (phase 5) ───────────────────────────────────────────────────
 * What colleagues have said, beside the rule they said it about. LIME, reserved
 * since the design ruling for exactly this and spent on nothing else: a mark
 * that means a PERSON has been here. Being the only lime on the page is what
 * makes it findable. */

.commentary {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1rem;
  background: color-mix(in srgb, var(--lime) 12%, var(--card));
  border: var(--bw-thin) solid var(--border);
  border-left: var(--bar) solid var(--lime);
  border-radius: 0 4px 4px 0;
}

.commentary h4 {
  font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.7rem;
}

.comment + .comment { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--border); }

.comment-who {
  font: 400 0.8rem/1.5 var(--sans);
  color: var(--ink-soft);
  margin: 0 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

/* The vintage flag. Coral, because it is a caution about what you are reading. */
.vintage {
  font: 500 0.66rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: var(--on-accent);
  background: var(--coral);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.4em;
}

.comment-said {
  margin: 0;
  padding-left: 0.8rem;
  border-left: var(--bw-thin) solid var(--border);
}

.comment-said p { margin: 0 0 0.4rem; max-width: var(--measure); }
.comment-said p:last-child { margin-bottom: 0; }

.commented {
  font: 500 0.7rem/1.5 var(--mono);
  color: var(--on-accent);
  background: var(--lime);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.4em;
}

/* A system turn: the moment a colleague's account was put in front of the
 * desk. Lime, because a person is the reason it exists. */
.turn-system { border-left-color: var(--lime); }
.turn-system .said p, .turn-system .said { font-size: 0.9rem; color: var(--ink-soft); }

/* ── The confirm card ───────────────────────────────────────────────────────
 * The most consequential moment on the site, so it gets the loudest treatment
 * in the language: lifted, lime-barred, and impossible to scroll past. */

.confirm {
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-left: var(--bar) solid var(--lime);
  border-radius: 0 6px 6px 0;
  padding: 1.4rem 1.5rem 1.25rem;
  box-shadow: var(--shadow-lg);
  margin: 0 0 1.75rem;
}

.confirm h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.confirm-fields { margin: 0 0 1rem; }

.verbatim {
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--card-2);
  border: var(--bw-thin) solid var(--border);
  border-radius: 4px;
  font-size: 1.03rem;
}

.verbatim p { margin: 0 0 0.5rem; }
.verbatim p:last-child { margin-bottom: 0; }

.confirm-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.confirm-actions .btn { margin: 0; }

/* ── The working indicator ──────────────────────────────────────────────────
 * Shown by desk.js while a turn is in flight. A pulsing pastel square, which is
 * the grammar's own vocabulary — the same bordered square the stat cards and the
 * eyebrows use, breathing. */

.working {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 400 0.86rem/1.5 var(--sans);
  color: var(--ink-soft);
  margin: 0;
}

.pulse {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  background: var(--indigo);
  border: var(--bw-thin) solid var(--border);
  animation: deskpulse 1.1s ease-in-out infinite;
}

@keyframes deskpulse {
  0%,  100% { background: var(--indigo); transform: none; }
  50%       { background: var(--amber);  transform: scale(0.72); }
}

/* A disabled Send should look spent rather than broken. */
.askbox button[disabled] { opacity: 0.55; cursor: default; box-shadow: 1px 1px 0 var(--border); }
.askbox.is-working textarea { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; background: var(--amber); }
}

/* ── The basis question (A25) ───────────────────────────────────────────────
 * Two chunky choices on the confirm card. Bordered slabs like everything else
 * that asks for a decision; no custom control, because a styled radio that
 * behaves differently from a radio is a worse trade than a plain one. */

.basis {
  border: var(--bw-thin) solid var(--border);
  border-radius: 4px;
  padding: 0.8rem 0.95rem 0.9rem;
  margin: 0 0 1rem;
  background: var(--card-2);
}

.basis legend {
  font: 600 0.67rem/1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 0.35rem;
}

.basis-choice {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font: 400 0.95rem/1.5 var(--sans);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  padding: 0.3rem 0;
  cursor: pointer;
}

.basis-choice input { accent-color: var(--indigo); width: 1.05rem; height: 1.05rem; }

/* A comment that cannot be settled yet is NOT a confirmation, so it does not get
 * the lime that means a person vouched for something. Coral: the fault-and-
 * caution accent, which is the honest family for "the ground is moving". */
.comment.v-needs-revisit { border-left: var(--bar) solid var(--coral); padding-left: 0.8rem; }
.comment.v-needs-revisit .v-tag { background: var(--coral); color: var(--on-accent); }

/* ── The review metadata line (A26) ─────────────────────────────────────────
 * Two dates about a rule, not a claim in it: mono, small, quiet, the eyebrow
 * idiom without the eyebrow's coloured square. */

.metaline {
  font: 400 0.7rem/1.5 var(--mono);
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0.35rem 0 0;
  grid-area: 3 / 1 / 4 / 3;
}

/* Never reviewed is the state worth spotting from across the page — it is what
 * Jake described going to look for. Coral, because it is an absence to act on,
 * and never lime, which means a person HAS been here. */
.never {
  color: var(--on-accent);
  background: var(--coral);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.02em 0.35em;
  white-space: nowrap;
}

.rr-meta .never { font: 500 0.68rem/1.5 var(--mono); }

/* ── The rule page: the ledger, the verdicts, the aggregate (A27, A28) ──────
 * A staffer's landing spot from any shared link, so it carries the most
 * structure of any page here — and the structure says the same thing the copy
 * does: what the manual claims, then what people have said since. */

.ledgerhead {
  font: 700 0.74rem/1.4 var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: var(--bw-thin) dashed var(--border);
}

.verdicts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.9rem; }
.verdicts form { margin: 0; }
.verdicts .btn { margin: 0; }

/* Retire is a claim that a rule should not exist. Rose: the accent for a live
 * disagreement, which is what it is. */
.btn-retire { background: var(--rose); color: var(--on-accent); }

/* THE AGGREGATE, and never a badge. A count you read, not a state you trust —
 * A28's whole point is that a rule is never flipped to "verified". */
.tallyline { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 1rem; }

.tally {
  font: 500 0.78rem/1.6 var(--mono);
  color: var(--ink);
  background: var(--card);
  border: var(--bw-thin) solid var(--border);
  border-radius: 3px;
  padding: 0.1em 0.5em;
}

/* Lime marks individual confirmation EVENTS, never a whole-rule state. */
.tally.t-confirmed { border-left: 4px solid var(--lime); }
.tally.t-retire { border-left: 4px solid var(--rose); }
.tally.t-needs-revisit { border-left: 4px solid var(--coral); }

.ledger-events { list-style: none; margin: 0 0 1.4rem; padding: 0; }

.event {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.2rem 0.9rem;
  padding: 0.6rem 0 0.6rem 0.8rem;
  border-left: var(--bw-thin) solid var(--border);
  margin-left: 0.3rem;
}

.event.ev-extracted, .event.ev-revised { color: var(--ink-faint); }
.event.v-confirmed { border-left: 4px solid var(--lime); }
.event.v-retire { border-left: 4px solid var(--rose); }
.event.v-needs-revisit { border-left: 4px solid var(--coral); }

.ev-date { font: 400 0.72rem/1.7 var(--mono); color: var(--ink-faint); }
.ev-what { font: 400 0.9rem/1.55 var(--sans); }
.ev-said {
  grid-column: 2;
  margin: 0.35rem 0 0;
  padding-left: 0.7rem;
  border-left: var(--bw-thin) solid var(--border);
  font-size: 0.9rem;
}
.undoform { grid-column: 2; margin: 0.3rem 0 0; }

.disagreement { margin: 1.4rem 0; }
.disagreement h3 { font: 700 1rem/1.3 var(--display); margin: 0 0 0.6rem; }

/* A caveat is not a dispute (A31), so it does not borrow `.notice.bad`. Coral
 * because coral is `needs-revisit`'s ratified accent (A25) — the ground is
 * moving, which is a caution — and never lime, which would read as somebody
 * having vouched for the thing that is in flux. */
.caveat { margin: 1.4rem 0; border-left-color: var(--coral); }
.caveat h3 { font: 700 1rem/1.3 var(--display); margin: 0 0 0.6rem; }

select {
  font: 400 1rem/1.4 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: var(--bw) solid var(--border);
  border-radius: 4px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}