/* The site's visual language (website/STYLE.md): warm paper, one clay accent, Space Grotesk to read and IBM Plex Mono
   for what a machine would say, hairlines instead of shadows. The four plane colours mean their planes and nothing
   else; pass and fail are carried by the foreground and the accent, never by a new colour. */

:root {
  --sans: 'Space Grotesk', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --pill: 999px;
  --bg: oklch(0.985 0.004 90);
  --surface: oklch(0.955 0.005 90);
  --fg: oklch(0.20 0.010 80);
  --muted: oklch(0.52 0.010 80);
  --line: oklch(0.885 0.006 90);
  --accent: oklch(0.60 0.20 38);
  --accent-soft: oklch(0.94 0.035 45);
  --accent-ink: oklch(0.50 0.17 38);   /* the accent as small text on its soft fill, dark enough to read */
  --p-gov: oklch(0.58 0.17 38);
  --p-state: oklch(0.56 0.14 250);
  --p-evid: oklch(0.54 0.13 155);
  --p-inter: oklch(0.54 0.15 310);
}
html[data-theme="dark"] {
  --bg: oklch(0.175 0.008 80);
  --surface: oklch(0.215 0.008 80);
  --fg: oklch(0.955 0.004 90);
  --muted: oklch(0.68 0.010 85);
  --line: oklch(0.305 0.008 80);
  --accent: oklch(0.74 0.17 45);
  --accent-soft: oklch(0.30 0.045 45);
  --accent-ink: oklch(0.82 0.12 45);
  --p-gov: oklch(0.76 0.15 45);
  --p-state: oklch(0.76 0.12 250);
  --p-evid: oklch(0.76 0.13 155);
  --p-inter: oklch(0.76 0.13 310);
}
html { background: var(--bg); scroll-padding-top: 88px; }
html.redrawing { overflow-anchor: none; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.fg { color: var(--fg); }
.pass { color: var(--fg); }
.fail { color: var(--accent); font-weight: 600; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr-row { min-height: 68px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
/* The organization's logo, as the site sets it: one image per theme, the other hidden. The wordmark beside it says
   which of the site's pages this is. */
.brand { display: flex; align-items: center; gap: 14px; color: var(--fg); }
.logo { display: block; width: 108px; height: 40px; }
.logo.dark, html[data-theme="dark"] .logo.light { display: none; }
html[data-theme="dark"] .logo.dark { display: block; }
.wordmark { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); line-height: 28px; }
@media (max-width: 620px) { .logo { width: 81px; height: 30px; } }
.nav { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; font-weight: 500; }
.nav a { color: var(--muted); white-space: nowrap; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
/* See the Numbers: a menu among the links. It opens under its own name, over the page, and closes on a choice. */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu > summary:hover, .menu[open] > summary { color: var(--fg); }
.menu[data-current] > summary { color: var(--fg); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.menu-items { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 60; min-width: 220px; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); }
.menu-items a { padding: 12px 18px; min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.menu-items a:last-child { border-bottom: 0; }
.menu-items a:hover { background: var(--accent-soft); }
.nav .menu-items a[aria-current="page"] { border-bottom: 1px solid var(--line); padding-bottom: 12px; box-shadow: inset 3px 0 0 var(--accent); }
.nav .menu-items a.every { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; }
.spacer { flex: 1; }
.runpick { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* The browser's own arrow sits against the pill's curve, so it is replaced by a hairline chevron drawn from two
   diagonal strokes, in the theme's muted colour, well inside the edge. */
.runpick select { appearance: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--fg); background-color: var(--bg); border: 1px solid var(--line); border-radius: var(--pill); padding: 9px 44px 9px 16px; min-height: 40px; max-width: 72vw; cursor: pointer;
  --chevron: var(--muted);
  background-image:
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--chevron) calc(50% - 0.8px), var(--chevron) calc(50% + 0.8px), transparent calc(50% + 0.8px)),
    linear-gradient(-45deg, transparent calc(50% - 0.8px), var(--chevron) calc(50% - 0.8px), var(--chevron) calc(50% + 0.8px), transparent calc(50% + 0.8px));
  background-size: 6px 6px;
  background-position: right 24px center, right 18px center;
  background-repeat: no-repeat; }
.runpick select:hover { border-color: var(--fg); --chevron: var(--fg); }
.ghost { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--pill); padding: 8px 14px; min-height: 40px; cursor: pointer; }
a.ghost { display: inline-flex; align-items: center; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The site's two calls to action: the way in, filled with the accent, and the other one outlined. */
.cta { font: inherit; font-size: 16px; font-weight: 600; color: var(--fg); background: transparent; border: 1px solid var(--line); border-radius: var(--pill); padding: 14px 26px; cursor: pointer; }
.cta:hover { color: var(--fg); border-color: var(--fg); }
.cta.solid { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.cta.solid:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.hero { padding-top: 88px; padding-bottom: 72px; }
.hero h1 { max-width: 13ch; }
.hero .lede { max-width: 52ch; }
.hero .actions { margin-bottom: 28px; }
.hero .meta { margin-bottom: 0; }
.hair.doors { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 40px; }
.hair.doors .cell:hover { background: var(--accent-soft); }
.ghost:hover, .ghost[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); }
.ghost[aria-pressed="true"] { background: var(--fg); color: var(--bg); }

/* Page header */
.head { padding-top: 56px; padding-bottom: 48px; }
.crumb { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 28px; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.kicker.ruled { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.kicker.ruled::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
h1 { margin: 0 0 22px; font-size: clamp(38px, 5.4vw, 72px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.96; max-width: 18ch; text-wrap: balance; }
h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h2.case { font-size: clamp(24px, 3vw, 36px); line-height: 1.05; }
.lede { margin: 0 0 24px; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.body { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 70ch; text-wrap: pretty; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-bottom: 24px; }
.meta b { font-weight: 400; color: var(--fg); }

/* Bands */
.band { border-top: 1px solid var(--line); }
.band.surface { background: var(--surface); }
.band > .wrap { padding-top: 56px; padding-bottom: 72px; }

/* Callouts */
.note { border: 1px solid var(--accent); background: var(--accent-soft); padding: 18px 22px; max-width: 78ch; font-size: 15px; line-height: 1.55; text-wrap: pretty; margin-bottom: 24px; }
.emph { border: 1px solid var(--fg); background: var(--bg); padding: 30px 32px; margin-top: 40px; }

/* Hairline grids and cells */
/* Each cell draws its own right and bottom hairline, so a last row with empty slots shows no filled gap. */
.hair { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.hair > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hair.cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.hair.wide { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.hair.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell { background: var(--bg); padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; color: var(--fg); min-width: 0; }
a.cell:hover { background: var(--accent-soft); }
.cell.faded > .fade { opacity: 0.5; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.label.split { display: flex; justify-content: space-between; gap: 12px; }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; }
.card-copy { font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.card-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; line-height: 1.7; }
.big { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }

/* Panels and tables */
.panel { border: 1px solid var(--line); background: var(--bg); }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.panel-body { padding: 18px; }
.scroll { overflow-x: auto; }
.fitted .row > span { min-width: 0; overflow-wrap: anywhere; }  /* a name longer than its column breaks, figures never need to */
.row { display: grid; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: baseline; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.row.headrow { padding: 10px 18px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.row:last-child { border-bottom: 0; }
.row .sub { display: block; color: var(--muted); font-size: 11.5px; }
a.row { color: var(--fg); }
a.row:hover { background: var(--accent-soft); }
/* Numbers line up on their right edge, in figures of one width, so a column reads down as well as across. */
.row .num { text-align: right; font-variant-numeric: tabular-nums; }
.row.how { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); font-family: var(--sans); font-size: 14.5px; }
.row.how .fg { font-family: var(--mono); font-size: 12.5px; }
.row.group { background: var(--surface); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding-top: 10px; padding-bottom: 10px; }
/* The key to the example numbers, inverted so it stands out in either theme. */
.key { padding-top: 24px; }
.key-box { background: var(--fg); color: var(--bg); padding: 16px 22px; }
.key-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.key h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.4; }
.key-hide { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--bg); background: transparent; border: 1px solid currentColor; border-radius: var(--pill); padding: 8px 16px; min-height: 40px; cursor: pointer; }
.key-hide:hover { background: var(--bg); color: var(--fg); }
.key-hide:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.key ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px 28px; }
.key li { font-size: 14.5px; line-height: 1.45; }
.key li .mono { font-size: 13px; }
.key li .what { display: block; opacity: 0.85; }
.key p { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; max-width: 90ch; }
.key a { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }
.key a:hover { color: var(--bg); text-decoration-thickness: 2px; }

/* Models: a card a model in a hairline grid that reflows to one column, so nothing scrolls sideways. */
.order { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.order > .label { margin-right: 6px; }
.models { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.model { background: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.model-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.model-head > .label { white-space: nowrap; }
.model-name { font-family: var(--mono); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.model .unbroken { white-space: nowrap; }  /* a figure and its unit stay on one line */
.model .sub { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }
.stats > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.model-checks { display: flex; flex-direction: column; gap: 8px; }
.failed { display: flex; flex-wrap: wrap; gap: 6px; }
.failed span { font-family: var(--mono); font-size: 12px; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; }
.model-hosts { margin-top: auto; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 1.5; }
.model-hosts summary { cursor: pointer; }
.row .sort { all: unset; cursor: pointer; text-align: right; }
.row .sort:hover, .row .sort[aria-pressed="true"] { color: var(--fg); }
.row .sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.big .of { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
/* What a number means for CWA comes before how it is computed, in the foreground. */
.means { display: block; color: var(--fg); margin-bottom: 6px; }
.says { font-size: 15.5px; line-height: 1.6; }
.reading { margin: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.55; color: var(--fg); text-wrap: pretty; }
.reading li + li { margin-top: 10px; }
.reading li::marker { color: var(--accent); }
.pill[aria-current="page"], .pill[aria-current="page"]:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* A case's question. A long one shows about four lines in a list's cell, then scrolls; on a page, its first sentence
   is the heading and each block pasted into it sits in a panel that scrolls. */
.question { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; }
.clamped { align-self: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.clamped > .question { max-height: 6em; overflow-y: auto; overscroll-behavior: contain; padding-right: 10px; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px dashed var(--line); }
.asked { max-width: 1040px; margin-bottom: 24px; }
.asked > p { margin: 0 0 18px; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.asked > p.ask { color: var(--fg); }
.asked > .pasted { margin-bottom: 18px; }
.asked pre.raw { max-height: calc(14 * 1.65em + 36px); overscroll-behavior: contain; }
.asked.small > p { font-size: 16px; }
.asked.small pre.raw { font-size: 12px; max-height: calc(8 * 1.65em + 36px); }

/* The decision: budget, slot rows, what was left out */
.split-panel { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.split-panel > .main { flex: 999 1 560px; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); }
.split-panel > .side { flex: 1 1 340px; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.budget-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-bottom: 10px; font-family: var(--mono); font-size: 12.5px; }
.budget { position: relative; display: flex; height: 14px; border: 1px solid var(--line); background: var(--bg); }
.budget > span { flex: none; }
.budget > .margin { position: absolute; right: 0; top: 0; bottom: 0; border-left: 1px dashed var(--muted); background: var(--surface); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 8px; }
.swatch { width: 8px; height: 18px; flex: none; }
.slotrow { border: 1px solid var(--line); border-left: 3px solid var(--plane, var(--line)); background: var(--surface); padding: 10px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.slotname { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plane, var(--muted)); }
.slotid { font-family: var(--mono); font-size: 12.5px; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.slotmeta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.leftrow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-family: var(--mono); font-size: 12px; }
.struck { text-decoration: line-through; color: var(--muted); overflow-wrap: anywhere; }
.excerpt { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.box { border: 1px solid var(--line); padding: 12px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.7; }

/* Relevance against the route's threshold */
.relbar { position: relative; height: 22px; display: flex; align-items: center; }
.relbar > .track { position: relative; width: 100%; height: 8px; background: var(--surface); }
.relbar > .track > i { display: block; height: 8px; background: var(--p-evid); }
.relbar > .threshold { position: absolute; top: 0; width: 1px; height: 22px; background: var(--accent); }
.clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Before and after: each item with what each script did with it, then each model's two answers in a row */
.row.compare { border-left: 3px solid var(--plane, var(--line)); padding-left: 15px; }
.row.compare.total { border-left-color: transparent; background: var(--surface); font-size: 12px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
mark.left { background: var(--accent-soft); color: var(--fg); outline: 1px solid var(--accent); padding: 0 2px; }
details.full { margin-top: 18px; }
details.full > summary { cursor: pointer; padding: 14px 18px; min-height: 44px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
details.full[open] > summary { border-bottom: 0; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pairs { border-top: 1px solid var(--line); }
.pair { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.pair > * { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pair > :first-child { flex: 1 1 220px; }
.pair > :not(:first-child) { flex: 2 1 340px; }
.pair.head { padding: 10px 0; }
.pair .side-label { display: none; }
.pair blockquote.answer { max-height: 260px; }
.tallies { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; }
.tallies:empty { display: none; }
.box.refused { border-style: dashed; color: var(--fg); }
@media (max-width: 900px) {
  .pair.head { display: none; }
  .pair .side-label { display: block; }
}

/* A section's toolbar: what it applies to on the left, the run picker on the right, and between them, after a pick,
   a line saying what the section now shows, which fades out. The line has a column of its own whether it shows or
   not, so it never moves the picker. Where the three do not fit in a row, what the toolbar applies to takes a line of
   its own, and narrower still the line has a line of its own above the picker, kept free for it. */
.toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; margin: 0 0 18px; }
.toolbar > .label { grid-column: 1; }
.toolbar > .changed { grid-column: 2; justify-self: end; }
.toolbar > .runpick { grid-column: 3; min-width: 0; }
/* In a toolbar the drop-down takes the room the toolbar has, not the header's cap, so a phone shows a run's name whole. */
.toolbar .runpick select { max-width: none; min-width: 0; }
.changed { visibility: hidden; max-width: 100%; min-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--fg); }
.changed::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.changed.shown { visibility: visible; animation: changed 3.2s ease-out forwards; }
@keyframes changed { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .changed.shown { animation: none; } }
@media (max-width: 900px) {
  .toolbar > .label { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .toolbar { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .toolbar > .label, .toolbar > .changed, .toolbar > .runpick { grid-column: 1; }
  .toolbar > .changed { justify-self: start; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pills, run chips */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); border-radius: var(--pill); padding: 7px 14px; }
.pill:hover { border-color: var(--fg); color: var(--fg); }

/* Answers and checks */
blockquote.answer { margin: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto; }
.checks { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; font-family: var(--mono); font-size: 11.5px; line-height: 1.75; }
.checks .text { color: var(--muted); overflow-wrap: anywhere; }
.step { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-family: var(--mono); font-size: 12px; }
.loading { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 12px 0; }
pre.raw { margin: 0; padding: 18px; overflow: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; max-height: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* The guided tour: a hole the size of the part a step is about, whose shadow dims the rest of the window, and a card
   that says what the part is. A step about the whole site dims everything and centres its card. */
:root { --dim: oklch(0.17 0.01 80 / 0.62); }
html[data-theme="dark"] { --dim: oklch(0.06 0.005 80 / 0.74); }
.tour-shade { position: fixed; inset: 0; z-index: 90; background: var(--dim); }
.tour-hole { position: fixed; z-index: 90; pointer-events: none; outline: 1px solid var(--accent); box-shadow: 0 0 0 100vmax var(--dim); transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease; }
/* A card is never taller than the window: in a short one its text scrolls inside it, and the row with End tour stays
   at its top, so the tour can always be ended. The card itself does not scroll, so its arrow, outside its edge, shows. */
.tour-card { position: fixed; z-index: 100; width: min(420px, calc(100vw - 32px)); background: var(--bg); color: var(--fg); border: 1px solid var(--fg); }
.tour-body { max-height: calc(100dvh - 34px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; --pad: 20px; }
.tour-card:focus-visible { outline: none; }
.tour-card.alone { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); }
.tour-card.alone .tour-body { padding: 30px 32px 26px; --pad: 30px; }
.tour-card .kicker { margin: 0; }
.tour-card h2 { margin: 0; font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.tour-card.alone h2 { font-size: 34px; }
.tour-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.tour-top { position: sticky; top: calc(-1 * var(--pad)); z-index: 1; margin-top: calc(-1 * var(--pad)); padding-top: var(--pad); background: var(--bg); flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tour-body > * { flex: none; }
.tour-end { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); background: none; border: 0; padding: 0; min-height: 32px; cursor: pointer; }
.tour-end:hover { color: var(--fg); }
.tour-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--mono); font-size: 12px; }
.tour-progress { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.tour-progress span { height: 3px; background: var(--line); }
.tour-progress span.done { background: var(--accent); }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tour-nav .ghost { min-height: 44px; }
.tour-next { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--bg); background: var(--fg); border: 1px solid var(--fg); border-radius: var(--pill); padding: 0 20px; min-height: 44px; cursor: pointer; }
.tour-next:hover { background: var(--accent); border-color: var(--accent); }
/* The card's arrow points at the part from whichever side the card is on. */
.tour-card::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--bg); transform: rotate(45deg); display: none; }
.tour-card[data-arrow="up"]::before { display: block; top: -7px; left: var(--arrow, 28px); border-top: 1px solid var(--fg); border-left: 1px solid var(--fg); }
.tour-card[data-arrow="down"]::before { display: block; bottom: -7px; left: var(--arrow, 28px); border-bottom: 1px solid var(--fg); border-right: 1px solid var(--fg); }
.tour-card[data-arrow="left"]::before { display: block; left: -7px; top: 28px; border-bottom: 1px solid var(--fg); border-left: 1px solid var(--fg); }
@media (max-width: 620px) {
  .tour-card:not(.alone) { left: 0; right: 0; top: auto; bottom: 0; width: auto; border-width: 1px 0 0; }
  .tour-card:not(.alone) .tour-body { max-height: 60dvh; padding: 18px 20px 22px; --pad: 18px; }
  .tour-card:not(.alone)::before { display: none; }
  .tour-card.alone h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } }

/* Charts (charts.js). One ink for the data, a quiet grey for what it is set against, the clay accent for what a chart
   is about, and a plane's own colour for that plane; a model is never a colour. In dark the planes' fills take a step
   of their own, lightness 0.66: the tokens' 0.76 is for text and thin strokes, and glares as a fill. Both sets pass the
   checks for colours that must stay apart on their surface: lightness, chroma, separation for colour-blind readers,
   and contrast. */
:root { --c-quiet: var(--muted); --c-around: oklch(0.74 0.008 85); --c-gov: var(--p-gov); --c-state: var(--p-state); --c-evid: var(--p-evid); --c-inter: var(--p-inter); }
html[data-theme="dark"] { --c-around: oklch(0.46 0.008 85); --c-gov: oklch(0.66 0.15 45); --c-state: oklch(0.66 0.12 250); --c-evid: oklch(0.66 0.13 155); --c-inter: oklch(0.66 0.13 310); }
.charts { padding-bottom: 56px; }
.chart { margin: 0 0 56px; }
.chart:last-of-type { margin-bottom: 20px; }
.chart figcaption .case { margin-top: 0; }
.chart-plot { font-family: var(--mono); font-size: 12.5px; color: var(--muted); max-width: 100%; overflow-x: auto; }
.chart-plot svg { display: block; overflow: visible; }
.chart-legend, .chart-rules { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }
.chart-rules { margin: 14px 0 0; }
.chart-key { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.chart-note { margin: 14px 0 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--muted); font: 11px var(--mono); font-variant-numeric: tabular-nums; }
.chart .axis-label { fill: var(--muted); font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.chart .row-label { fill: var(--fg); font: 12.5px var(--mono); }
.chart .panel-title { fill: var(--fg); font: 600 12.5px var(--mono); }
.chart .ringed { stroke: var(--bg); stroke-width: 2; }
.chart .band { fill: transparent; }
.chart .hit { cursor: default; outline-offset: 1px; }
.chart .hit.opens { cursor: pointer; }
.chart .hit:hover .band, .chart .hit:focus .band { fill: var(--surface); }
.chart .cell-failed { fill: var(--accent-soft); }
.chart .hit:hover .cell-failed, .chart .hit:focus .cell-failed { fill: var(--accent); }
.chart .cell-count { fill: var(--fg); font: 600 11.5px var(--mono); font-variant-numeric: tabular-nums; }
.chart .hit:hover .cell-count, .chart .hit:focus .cell-count { fill: var(--bg); }
.chart .crosshair { stroke: var(--muted); stroke-width: 1; opacity: 0; }
.chart .crosshair:has(+ .hit:hover), .chart .crosshair:has(+ .hit:focus) { opacity: 1; }
.chart-tip { position: fixed; z-index: 70; max-width: 340px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--fg); font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); pointer-events: none; }
.chart-tip .tip-title { color: var(--fg); margin-bottom: 6px; overflow-wrap: anywhere; }
.chart-tip .tip-line { display: flex; align-items: baseline; gap: 8px; }
.chart-tip .tip-line i { flex: none; width: 10px; height: 2px; align-self: center; }
.chart-tip .tip-line b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Footer */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.foot .links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.foot-link { all: unset; cursor: pointer; color: var(--accent); padding: 12px 0; }
.foot-link:hover { color: var(--fg); }
.foot-link[hidden] { display: none; }  /* all: unset would otherwise show it */
.foot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 860px) {
  .hair.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-panel > .main { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .wrap { padding: 0 20px; }
  .hair.four { grid-template-columns: minmax(0, 1fr); }
  .hdr-row { padding-top: 12px; padding-bottom: 12px; }
}

/* A page's models as cards (numbers.js): a list that reads like a table when closed, and opens on one model. */
.mcards { border: 1px solid var(--line); background: var(--bg); }
.mcard-heads, .mcard > summary { position: relative; display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(var(--figures), minmax(0, 1fr)); gap: 14px; align-items: baseline; padding: 14px 44px 14px 18px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.mcard-heads { padding-top: 10px; padding-bottom: 10px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.mcards .num { text-align: right; font-variant-numeric: tabular-nums; }
.mcard { border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }  /* clear of the sticky header when a chart opens it */
.mcard:last-child { border-bottom: 0; }
.mcard > summary { list-style: none; cursor: pointer; min-height: 44px; overflow-wrap: anywhere; }
.mcard > summary::-webkit-details-marker { display: none; }
.mcard > summary::after { content: ""; position: absolute; right: 20px; top: 21px; width: 6px; height: 6px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); }
.mcard[open] > summary::after { top: 24px; transform: rotate(-135deg); }
.mcard > summary:hover, .mcard[open] > summary { background: var(--surface); }
.mcard > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mcard .mlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mcard-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 40px; padding: 20px 18px 26px; border-top: 1px solid var(--line); }
.mgroup > .label, .mslice > .label { margin-bottom: 6px; }
.mslice { min-width: 0; overflow-x: auto; }
.mslice.wide { grid-column: 1 / -1; }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; }
.mrow.head { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mrow .sub { display: block; color: var(--muted); font-size: 11px; }
@media (max-width: 720px) {
  .mcard-heads { display: none; }
  .mcard > summary { grid-template-columns: 1fr 1fr; gap: 8px 14px; }
  .mcard > summary > .fg:first-child { grid-column: 1 / -1; }
  .mcard > summary .num { text-align: left; }
  .mcard .mlabel { position: static; width: auto; height: auto; clip-path: none; white-space: normal; display: block; font-size: 11px; color: var(--muted); }
}

/* Watch an assembly (assembly.js): the home page's replay of one run's assemblies, a chapter an example. */
.asm-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 14px; }
.asm-chapters .asm-button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: 13px var(--sans); cursor: pointer; }
.asm-chapters .asm-button b { color: var(--fg); margin-right: 4px; }
.asm-chapters .asm-button[aria-pressed="true"] { border-color: var(--fg); color: var(--fg); }
.asm-adds { min-height: 3.2em; }
.asm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.asm-beat { font-size: 12.5px; color: var(--fg); overflow-wrap: anywhere; }
.asm-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.asm-pill { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.asm-pill[aria-current="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.asm-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; max-width: 100%; }
.asm-model { min-width: 0; max-width: 100%; flex: 1 1 auto; }
.asm-controls .asm-button, .asm-model { min-height: 34px; min-width: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font: 12.5px var(--mono); cursor: pointer; }
.asm-pill:focus-visible, .asm-button:focus-visible, .asm-model:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asm-plot svg { display: block; overflow: visible; }
.asm-plot .row-label { font-size: 11.5px; }
.asm-chip { stroke: var(--bg); stroke-width: 1; }
.asm-chip.squashed { stroke: var(--fg); stroke-dasharray: 2 2; }
.asm-track { fill: var(--surface); stroke: var(--line); }
.asm-track.refused { stroke: var(--accent); stroke-dasharray: 4 3; }
.asm-around { fill: var(--c-around); }
.asm-link { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.chart .asm-refused { fill: var(--accent); }
.asm-say { min-height: 3.2em; margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg); }

/* Compare: one scenario, two models side by side */
.scenarios { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line); padding-top: 22px; }
.scenario-row { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 10px 24px; align-items: baseline; }
.scenario-row > .label { line-height: 1.6; }
.scenario-row > .label b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.scenarios .pills { gap: 8px; }
.scenarios .pill { text-transform: none; letter-spacing: 0; font-size: 12px; }
.scenarios .pill[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.asked-line { margin: 4px 0 24px; max-width: 1040px; }
.asked-line > .question { margin: 6px 0 0; font-size: 19px; line-height: 1.5; color: var(--fg); }
.asked-line > .asked { margin: 12px 0 0; }
.hair.explain { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: 24px; }
.hair.explain .card-copy { margin: 0; color: var(--fg); font-size: 15.5px; }
.body.same { margin-bottom: 10px; }
.meta.built { margin-bottom: 0; }
.picks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 22px; }
.picks > .changed { flex: 1 0 100%; order: 9; }
.picks .vs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.picks .runpick select { max-width: min(72vw, 320px); }
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contender { background: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contender .sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: -8px; }
.contender .calls { display: flex; flex-direction: column; gap: 6px; }
.said { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px dashed var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.said li { display: flex; gap: 10px; color: var(--fg); font-weight: 400; }
.said li.aside { color: var(--muted); }
.said li.failed { color: var(--accent); font-weight: 600; }
.said .mark { flex: none; width: 1em; font-family: var(--mono); }
.said .mono { font-size: 12.5px; overflow-wrap: anywhere; }
details.without { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 12px; }
details.without > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
details.without[open] > * + * { margin-top: 12px; }
.reading-note { margin-top: 22px; }
@media (max-width: 760px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .scenario-row { grid-template-columns: minmax(0, 1fr); }
}