/* ==========================================================================
   Baron Munchausen — the system built on tokens.css
   No shadows, no gradients, no card kit. Separation is a 1px line or a step
   of background. Every value comes from a token.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-variation-settings: "MONO" 0, "CASL" 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); color: var(--fg); }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-color: var(--line-firm); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-cell);
}

img, svg { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gutter);
}

/* 8 of 10 is the grounded threshold; 4 of 10 is the partial threshold. */
.col-primary   { grid-column: span 8; }
.col-secondary { grid-column: span 4; }
.col-full      { grid-column: 1 / -1; }
.col-half      { grid-column: span 5; }
.col-6         { grid-column: span 6; }

.section { padding-block: var(--s-32); border-top: var(--border) solid var(--line); }
.section:first-of-type { border-top: 0; padding-top: calc(var(--s-32) + var(--s-16)); padding-bottom: var(--s-32); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-8); }

/* Rhythm inside a section: the heading row, then the block it introduces,
   then the footnote that qualifies it. Set once here, never per element. */
.section > .grid + * { margin-top: var(--s-12); }
.section > .grid + .verdict, .section > .proofs + .verdict { margin-top: var(--s-16); }
.section > * + .note { margin-top: var(--s-6); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Type roles
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-bold);
  max-width: 15ch;
  text-wrap: balance;
}

.h2 {
  font-size: var(--t-xl);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  font-weight: var(--w-bold);
  max-width: 22ch;
  text-wrap: balance;
}

.h3 {
  font-size: var(--t-md);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  font-weight: var(--w-medium);
}

.lead {
  font-size: var(--t-md);
  line-height: 1.45;
  color: var(--fg-mid);
  max-width: 52ch;
}

.prose { max-width: var(--measure); color: var(--fg-mid); }
.prose strong { color: var(--fg); font-weight: var(--w-medium); }

.note { font-size: var(--t-sm); color: var(--fg-dim); max-width: var(--measure); }

.mono, code, pre, .num {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  letter-spacing: var(--ls-mono);
}

/* A path or an id is one long unbreakable word, and at 390 px it is what
   pushes a page sideways. Nothing in this system is allowed to scroll the
   body horizontally, so long tokens break where they must. */
code { font-size: 0.94em; color: var(--fg); overflow-wrap: anywhere; }

pre {
  font-size: var(--t-sm);
  line-height: var(--lh-mono);
  background: var(--bg-sink);
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-4);
  overflow-x: auto;
  color: var(--fg-mid);
}
pre b { color: var(--fg); font-weight: var(--w-regular); }

/* --------------------------------------------------------------------------
   The three pixel elements. Nothing else in the system uses --px-cell.
   1. .mark      the Baron, in the header and the footer
   2. .meter     the verdict, one cell per claim
   3. .working   the verifying state
   -------------------------------------------------------------------------- */
.pixels {
  display: grid;
  gap: var(--px-gap);
  grid-auto-flow: row;
  line-height: 0;
}
.pixels i {
  display: block;
  width: var(--px-cell);
  height: var(--px-cell);
  background: transparent;
}
.pixels i[data-on] { background: currentColor; }

.mark {
  color: var(--fg);
  --px-cell: 5px;
  transition: color var(--d-hover) var(--ease);
}
/* The mark grew from 9x6 to 13x8 in its second pass, so the cell shrinks where
   the row it sits in is fixed: the header bar and the phone rail. */
.top .mark { --px-cell: 4px; }
.mark[data-lit] i[data-on] { background: currentColor; }
a:hover > .mark, .brand:hover .mark { color: var(--proven); }

/* The meter is the rule under the verdict: one segment per sentence checked,
   as wide as its share of the answer. Discrete on purpose — a smooth bar would
   claim a precision the engine does not have. */
.meter {
  display: flex;
  gap: 2px;
  padding: 0 var(--s-4) var(--s-4);
}
.meter b {
  flex: 1 1 0;
  height: 7px;
  border-radius: var(--r-cell);
  border: var(--border) solid var(--line-firm);
  background: transparent;
  font-size: 0; /* the word inside is for screen readers only */
  transition: background var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.meter b[data-v="supported"] { background: var(--proven); border-color: var(--proven); }
.meter b[data-v="partial"]   { background: linear-gradient(to top, var(--partial) 50%, transparent 50%); border-color: var(--partial); }
.meter b[data-v="unsupported"], .meter b[data-v="refuted"] { border-color: var(--unproven); background: transparent; }
/* A segment that has not been checked yet is still data, so it has to be
   visible: --line is a separator weight and disappears on both grounds. */
.meter b[data-v="pending"] { border-color: var(--line-firm); }

.working {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.working i {
  width: 5px; height: 5px;
  background: var(--fg-dim);
  border-radius: var(--r-cell);
  animation: pixel-step 720ms steps(1, end) infinite;
}
.working i:nth-child(2) { animation-delay: 120ms; }
.working i:nth-child(3) { animation-delay: 240ms; }
.working i:nth-child(4) { animation-delay: 360ms; }
.working i:nth-child(5) { animation-delay: 480ms; }
.working i:nth-child(6) { animation-delay: 600ms; }
@keyframes pixel-step { 0%, 49% { background: var(--proven); } 50%, 100% { background: var(--line-firm); } }

/* --------------------------------------------------------------------------
   Verdict
   -------------------------------------------------------------------------- */
.verdict {
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  background: var(--bg-raise);
  overflow: hidden;
}

.verdict__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-4);
  border-bottom: var(--border) solid var(--line);
}

.verdict__word {
  font-size: var(--t-lg);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-head);
  line-height: 1;
}
.verdict__word[data-v="grounded"]   { color: var(--proven); }
.verdict__word[data-v="partial"]    { color: var(--partial); }
.verdict__word[data-v="ungrounded"] { color: var(--unproven); }
.verdict__word[data-v="checking"]   { color: var(--fg-dim); }

.verdict__ratio {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-size: var(--t-base);
  color: var(--fg-mid);
}

.verdict__body { padding: var(--s-4); background: var(--bg-sink); display: grid; gap: var(--s-2); }
.answer { font-size: var(--t-sm); color: var(--fg); max-width: 78ch; }

.claims { border-top: var(--border) solid var(--line); }
.claims li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--border) solid var(--line);
  font-size: var(--t-sm);
}
.claims li:last-child { border-bottom: 0; }
.claims .dot {
  width: 14px; height: 14px; margin-top: 4px;
  border-radius: var(--r-cell);
  border: var(--border) solid var(--line-firm);
}
.claims .dot[data-v="supported"] { background: var(--proven); border-color: var(--proven); }
.claims .dot[data-v="partial"]   { background: linear-gradient(to top, var(--partial) 50%, transparent 50%); border-color: var(--partial); }
.claims .dot[data-v="unsupported"], .claims .dot[data-v="refuted"] { border-color: var(--unproven); }
.claims .why { color: var(--fg-dim); display: block; margin-top: var(--s-1); }
.claims .why a { color: var(--fg-mid); }
.claims .cov {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  color: var(--fg-mid);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: var(--w-medium);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-panel);
  border: var(--border) solid transparent;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
/* Brass belongs to the verdict, not to buttons. It appears on a call to
   action only while the pointer is on it — an answer to the visitor, not a
   permanent claim on their attention. */
.btn:hover { background: var(--proven); }

.btn--quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-firm);
}
.btn--quiet:hover { background: transparent; border-color: var(--fg); }

.verdict__head .choice { margin-left: auto; }
.choice {
  display: inline-flex;
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--bg-sink);
}
.choice button {
  font: inherit;
  font-size: var(--t-sm);
  padding: var(--s-2) var(--s-4);
  background: transparent;
  color: var(--fg-mid);
  border: 0;
  border-right: var(--border) solid var(--line);
  cursor: pointer;
  transition: color var(--d-hover) var(--ease), background var(--d-hover) var(--ease);
}
.choice button:last-child { border-right: 0; }
.choice button:hover { color: var(--fg); }
.choice button[aria-pressed="true"] { background: var(--bg-raise); color: var(--fg); }


/* --------------------------------------------------------------------------
   Structure that carries information, not decoration
   -------------------------------------------------------------------------- */

/* Three proofs under the hero. The measured reference pages (Vercel, Warp,
   Zep, 2026-09-08) all put the number next to the promise rather than under a
   heading of its own; this is that strip. The lead line is monospaced because
   it is a measurement, and the brass of a verdict is deliberately not used —
   brass means "proven by the engine", and these are proven by a document. */
.proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  padding-top: var(--s-8);
  border-top: var(--border) solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg-mid);
}
.proofs > li { display: grid; gap: var(--s-2); align-content: start; }
.proofs__n {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-weight: var(--w-medium);
  color: var(--fg);
}
.proofs a { color: var(--fg-mid); white-space: nowrap; }
.proofs a:hover { color: var(--fg); }

/* Definition list with a hanging term — used where content is term/meaning,
   not a sequence, so no numbered markers. */
.defs { display: grid; gap: var(--s-6); }
.defs > div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-6); align-items: baseline; }
.defs dt { color: var(--fg); font-weight: var(--w-medium); text-wrap: balance; }
.defs dd { color: var(--fg-mid); max-width: var(--measure); }

/* The three verdicts and the thresholds behind them. Sits in the hero's
   secondary columns so the free space carries information, not air. */
.legend { display: grid; gap: var(--s-6); align-content: end; }
.legend > div { display: grid; gap: var(--s-1); }
.legend dt {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}
.legend dt[data-v="grounded"]   { color: var(--proven); }
.legend dt[data-v="partial"]    { color: var(--partial); }
.legend dt[data-v="ungrounded"] { color: var(--unproven); }
.legend dd { font-size: var(--t-sm); color: var(--fg-dim); max-width: 34ch; }
.legend .bar { display: flex; gap: 2px; margin-bottom: var(--s-2); max-width: 34ch; }
.legend .bar i { height: 5px; flex: 1 1 0; border-radius: var(--r-cell); border: var(--border) solid var(--line-firm); }
.legend .bar[data-v="grounded"]   { color: var(--proven); }
.legend .bar[data-v="partial"]    { color: var(--partial); }
.legend .bar[data-v="ungrounded"] { color: var(--unproven); }
.legend .bar i[data-on] { border-color: currentColor; background: currentColor; }
.legend .bar i[data-half] { border-color: currentColor; background: linear-gradient(to top, currentColor 50%, transparent 50%); }

/* Steps — used only where the content really is a sequence (installing). */
.steps { counter-reset: step; display: grid; gap: var(--s-8); }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-4); }
.steps > li::before {
  content: counter(step);
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  color: var(--fg-dim);
  border-top: var(--border) solid var(--line-firm);
  padding-top: var(--s-1);
}

.facts { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.facts__caption { text-align: left; margin-bottom: var(--s-4); }
.facts th, .facts td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: var(--border) solid var(--line); vertical-align: top; }
.facts th { color: var(--fg); font-weight: var(--w-medium); width: 34%; }
.facts td { color: var(--fg-mid); }
.facts .num { color: var(--fg); white-space: nowrap; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.plan {
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  background: var(--bg-raise);
}
.plan--paid { background: transparent; border-color: var(--line-firm); }
.plan h3 { margin-bottom: var(--s-3); }
.plan ul { display: grid; gap: var(--s-2); color: var(--fg-mid); font-size: var(--t-sm); }
.plan li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--s-2); }
.plan li::before { content: ""; width: 6px; height: 6px; margin-top: 0.55em; border-radius: var(--r-cell); background: var(--line-firm); }
.plan--paid li::before { background: var(--proven); }
.price {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-size: var(--t-md);
  color: var(--fg);
  display: block;
  margin-bottom: var(--s-2);
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  /* Opaque first: a browser without backdrop-filter, and a page scrolled far
     enough that dark text sits under a light bar, both need a real ground
     rather than a tint. The translucency is an enhancement, not the floor. */
  background: var(--bg);
  border-bottom: var(--border) solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
  .top {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(10px);
  }
}
.top__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding-block: var(--s-3); }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand__name { font-weight: var(--w-bold); letter-spacing: var(--ls-head); white-space: nowrap; }
.brand__ver { font-family: var(--font-mono); font-variation-settings: "MONO" 1; font-size: var(--t-xs); color: var(--fg-dim); }
.top nav { display: flex; gap: var(--s-6); font-size: var(--t-sm); }
.top nav a { color: var(--fg-mid); text-decoration: none; }
.top nav a:hover { color: var(--fg); }

.theme-toggle {
  font: inherit; font-size: var(--t-xs);
  background: transparent; border: var(--border) solid var(--line);
  color: var(--fg-mid); border-radius: var(--r-panel);
  padding: var(--s-1) var(--s-3); cursor: pointer;
}
.theme-toggle:hover { color: var(--fg); border-color: var(--line-firm); }

.mini {
  font: inherit; font-size: var(--t-xs);
  background: transparent; border: var(--border) solid var(--line);
  color: var(--fg-mid); border-radius: var(--r-panel);
  padding: var(--s-1) var(--s-3); cursor: pointer;
  transition: color var(--d-hover) var(--ease), border-color var(--d-hover) var(--ease);
}
.mini:hover { color: var(--fg); border-color: var(--line-firm); }

.foot { border-top: var(--border) solid var(--line); padding-block: var(--s-24); color: var(--fg-dim); font-size: var(--t-sm); }
.foot a { color: var(--fg-mid); }
.foot__co { font-weight: var(--w-bold); letter-spacing: 0.16em; color: var(--fg-mid); }

.skip {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--bg-raise); color: var(--fg);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-panel);
  border: var(--border) solid var(--line-firm);
  transition: top var(--d-state) var(--ease);
  z-index: 20;
}
.skip:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   Hub — thread, verdicts, state. No roles, no agents.

   The page has no shell of its own: the header, the grid and the footer are
   the ones every other page uses. Until 8 September 2026 the hub lived in its
   own frame with a vertical rail down the left. It read as a separate product
   rather than a section of this one, and there was no way out of it: the frame
   carried no navigation at all.
   -------------------------------------------------------------------------- */
.hub__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-8); }

.tabs { display: flex; gap: var(--s-6); border-bottom: var(--border) solid var(--line); margin-bottom: var(--s-8); }
.tabs button {
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-medium);
  background: transparent; border: 0; color: var(--fg-dim);
  padding: var(--s-3) 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--d-hover) var(--ease);
}
.tabs button:hover { color: var(--fg-mid); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }

.panel { display: grid; gap: var(--s-8); }
.panel[hidden] { display: none; }

.thread { display: grid; gap: 0; border: var(--border) solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.thread > li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s-6); padding: var(--s-4); border-bottom: var(--border) solid var(--line); }
.thread > li:last-child { border-bottom: 0; }
.thread .when { font-family: var(--font-mono); font-variation-settings: "MONO" 1; font-size: var(--t-xs); color: var(--fg-dim); }
.thread .when b { display: block; font-weight: var(--w-medium); margin-top: var(--s-1); }
.thread .when b[data-v="grounded"]   { color: var(--proven); }
.thread .when b[data-v="partial"]    { color: var(--partial); }
.thread .when b[data-v="ungrounded"] { color: var(--unproven); }
.hub__head h1 { max-width: none; }
.hub__head .last b { font-family: var(--font-mono); font-variation-settings: "MONO" 1; font-weight: var(--w-regular); color: var(--proven); }
.thread .what { font-size: var(--t-sm); }
.thread .what b { font-weight: var(--w-medium); }
.thread .what p { color: var(--fg-mid); margin-top: var(--s-1); max-width: var(--measure); }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.tile { border: var(--border) solid var(--line); border-radius: var(--r-panel); padding: var(--s-4); }
.tile .k { font-size: var(--t-xs); color: var(--fg-dim); }
.tile .v { font-family: var(--font-mono); font-variation-settings: "MONO" 1; font-size: var(--t-lg); color: var(--fg); line-height: 1.2; margin-top: var(--s-2); }
.tile .v small { font-size: var(--t-sm); color: var(--fg-dim); }

.empty { border: var(--border) dashed var(--line-firm); border-radius: var(--r-panel); padding: var(--s-12) var(--s-6); text-align: center; color: var(--fg-mid); }
.empty p { max-width: 44ch; margin-inline: auto; }
.empty .btn { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .split { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .defs > div { grid-template-columns: 1fr; gap: var(--s-2); }
  .proofs { grid-template-columns: 1fr; gap: var(--s-6); }
}

@media (max-width: 48rem) {
  .col-primary, .col-secondary, .col-half, .col-6 { grid-column: 1 / -1; }
  .section { padding-block: var(--s-16); }
  .section:first-of-type { padding-top: var(--s-12); padding-bottom: var(--s-16); }
  .display { max-width: 18ch; }
  /* The bar carries a mark, a name, six destinations and a theme switch, and
     at 390 px that is 456 px of content. Rather than hide half the site from a
     phone, the row wraps: identity and switch on one line, the whole navigation
     on the next. Nothing is dropped and nothing scrolls sideways. */
  .top__in { gap: var(--s-3); flex-wrap: wrap; }
  .brand { gap: var(--s-2); }
  .brand__name { font-size: var(--t-sm); }
  .brand__ver { display: none; }
  .top nav {
    order: 3;
    width: 100%;
    gap: var(--s-3);
    font-size: var(--t-xs);
    justify-content: space-between;
    border-top: var(--border) solid var(--line);
    padding-top: var(--s-2);
    margin-top: var(--s-1);
  }
  .top nav a[data-secondary] { display: inline; }
  .hero-actions .btn { display: block; text-align: center; }
  .hero-actions .btn + .btn { margin-top: var(--s-3); }
  .thread > li { grid-template-columns: 1fr; gap: var(--s-2); }
  .hub__head h1 { font-size: var(--t-lg); }
  .facts th { width: 42%; }
  .claims li { grid-template-columns: 14px minmax(0, 1fr); }
  .claims .cov { grid-column: 2; }
  .verdict__head { gap: var(--s-3); }
  .verdict__head .choice { margin-left: 0; width: 100%; }
  .choice button { flex: 1 1 0; padding-inline: var(--s-2); }
  .btn { padding-inline: var(--s-4); }
  .section > .grid + *, .section > .grid + .verdict { margin-top: var(--s-8); }
}

@media (max-width: 30rem) {
  .tiles { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the one automatic sequence renders as its final state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media print {
  .top, .theme-toggle, .choice { display: none; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Catalogue, console, docs — the pages that carry lists rather than an
   argument. Same tokens, same two radii, no new colour.
   -------------------------------------------------------------------------- */

.top nav a[aria-current="page"] { color: var(--fg); }

/* A filter bar is a form, and a form is a container: r-panel, one line. */
.filters {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-4);
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-4);
  background: var(--bg-raise);
}
.field { display: grid; gap: var(--s-2); min-width: 0; }
.field label { font-size: var(--t-xs); color: var(--fg-dim); }
.field input, .field select {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--bg-sink);
  border: var(--border) solid var(--line);
  border-radius: var(--r-cell);
  padding: var(--s-2) var(--s-3);
  min-width: 0;
  width: 100%;
}
.field input::placeholder { color: var(--fg-dim); }
.field input:hover, .field select:hover { border-color: var(--line-firm); }
.field textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--fg);
  background: var(--bg-sink);
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-3);
  width: 100%;
  min-height: 7rem;
  resize: vertical;
}

/* A long list is a table, because it is one: four columns of the same shape
   repeated. Rows are separated by the same 1px line as everything else. */
.rows { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.rows th, .rows td {
  text-align: left;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: var(--border) solid var(--line);
  vertical-align: top;
}
.rows thead th {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--fg-dim);
  border-bottom-color: var(--line-firm);
  position: sticky;
  top: 3rem; /* clears the sticky page header, which is 48px tall */
  background: var(--bg);
}
.rows td { color: var(--fg-mid); }
.rows td:first-child { color: var(--fg); padding-right: var(--s-6); }
.rows .dim { color: var(--fg-dim); }
.rows .cov {
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  color: var(--fg-dim);
  white-space: nowrap;
}
.rows td .cov { display: block; margin-top: var(--s-1); }

/* Used in a claim row and in a catalogue row alike: the qualifier under the
   thing it qualifies. */
.why { color: var(--fg-dim); display: block; margin-top: var(--s-1); font-size: var(--t-xs); }

/* A chip is data, so it takes the data radius and one of the three verdict
   colours — alive backs the record, needs-a-key backs it partly, dead does
   not, and "could not check" gets no colour at all. */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-variation-settings: "MONO" 1;
  font-size: var(--t-xs);
  border-radius: var(--r-cell);
  border: var(--border) solid var(--line-firm);
  padding: 1px var(--s-2);
  white-space: nowrap;
  color: var(--fg-mid);
}
.chip[data-v="supported"]   { color: var(--proven); border-color: var(--proven); }
.chip[data-v="partial"]     { color: var(--partial); border-color: var(--partial); }
.chip[data-v="unsupported"] { color: var(--unproven); border-color: var(--unproven); }
.chip[data-v="pending"]     { color: var(--fg-dim); border-color: var(--line-firm); }

.more { margin-top: var(--s-6); }
.section > .filters + .note { margin-top: var(--s-6); }
.section > .note + .rows { margin-top: var(--s-4); }

@media (max-width: 60rem) {
  .filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 48rem) {
  .filters { grid-template-columns: 1fr; }
  .rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rows tr { display: grid; gap: var(--s-1); padding-block: var(--s-3); border-bottom: var(--border) solid var(--line); }
  .rows td { border-bottom: 0; padding: 0; }
  .rows td:first-child { padding-right: 0; }
}

/* A table of contents is a list of destinations, not a menu: it gets no
   bullets and no chrome, only the same hanging rule the steps use. */
.toc ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.toc a { color: var(--fg-mid); font-size: var(--t-sm); text-decoration: none; }
.toc a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-firm); }

/* Two columns of equal blocks. Used where the content really is parallel —
   four clients, four plans — and never as a card kit for prose. */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.card {
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  background: var(--bg-raise);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.card pre { background: var(--bg-sink); }
.card .note { max-width: none; }

@media (max-width: 60rem) {
  .cards { grid-template-columns: 1fr; }
}

/* The visitor's own sentence, inside the verdict panel it will fill in. It is
   part of the panel, not a second card: same sunk ground, one dividing line. */
.own {
  border-top: var(--border) solid var(--line);
  background: var(--bg-sink);
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.own__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.own__go .note { max-width: 42ch; }
.own .btn:disabled { opacity: 0.6; cursor: progress; }

/* A control that answers the field beside it needs no label of its own; an
   empty one would be read out as a label. */
.field--go { align-self: end; }
.field--go .btn { width: 100%; }
.tile .note { margin-top: var(--s-2); font-size: var(--t-xs); }
.verdict__body .rows th { color: var(--fg-mid); font-weight: var(--w-regular); width: 34%; }
.verdict__body .rows tr:last-child th, .verdict__body .rows tr:last-child td { border-bottom: 0; }

/* The one drawn image in the system. It is not a fourth pixel element in the
   sense §7 forbids — it carries no measurement and it never appears beside
   the meter or the mark; it lives in its own section, and the rule that keeps
   it honest is the colour rule: four shades of ink, nothing saturated. */
.scene { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.scene svg { width: 100%; max-width: 22rem; height: auto; }
.scene figcaption { max-width: 34ch; }
.own textarea:disabled { color: var(--fg-dim); cursor: not-allowed; }

/* A tab panel keeps its height while its data is on the way: the hub reads a
   live server, and a panel that grows from nothing when the answer lands
   moves the whole page under the reader's eyes. */
.panel { min-height: 22rem; }

@media (max-width: 48rem) {
  /* The head is a wrapping flex row, and the last-verdict line starts as a
     placeholder that fits beside the title and ends as a sentence that does
     not. The row then re-wrapped and pushed the tabs and the whole panel 65 px
     down — measured as the hub's entire layout shift, 0.26. On a phone the two
     never share a line to begin with. */
  .hub__head { display: block; }
  .hub__head .last { margin-top: var(--s-3); }
}

/* Both lines in the hub's head are written by the server, and both are longer
   than the placeholder they replace. Each keeps room for its long form from
   the first frame, so a one-line answer never becomes a two-line one. */
.hub__head .note { min-height: 2.9em; }
.thread .what .working { margin-right: var(--s-2); }

/* The pending row is taken out of the flow on purpose. Rows arriving into
   space that was empty are not a layout shift; rows arriving where a pending
   row stood push it out of the way, and that is. Out of flow, its removal
   moves nothing at all — measured CLS on the hub went 0.26 -> 0. */
.panel > .thread { position: relative; }
.thread > [data-pending] {
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-bottom: 0;
  align-content: start;
}
.tile .v.path { font-size: var(--t-xs); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Graph block on the front page.

   The only saturated colour on this site is a verdict (--proven), and the
   comet borrows it deliberately: the point the pulse stands on is the one
   thing here that was just checked. The trail fades through --fg-dim to the
   line colour, so it reads as motion and never competes with the text beside
   it.
   -------------------------------------------------------------------------- */
.graph {
  margin: var(--s-8) 0 0;
  border: var(--border) solid var(--line);
  border-radius: var(--r-panel);
  padding: var(--s-6);
  background: var(--bg-sink);
}
.graph svg { display: block; width: 100%; height: auto; }
.graph figcaption { margin-top: var(--s-3); }
.graph .tiles { margin-top: var(--s-6); }
.graph > .note:last-child { margin-top: var(--s-3); }

.graph__edges line { stroke: var(--line-firm); stroke-width: 1; }
.graph__nodes circle {
  fill: var(--fg-dim);
  transition: fill 600ms linear, r 600ms linear;
}
.graph__nodes circle:hover { fill: var(--fg); }
.graph__nodes circle.is-trail { fill: var(--fg); }
.graph__nodes circle.is-trail-old { fill: var(--fg-dim); }
.graph__now {
  fill: var(--proven);
  transition: cx 700ms ease-in-out, cy 700ms ease-in-out;
}

@media (max-width: 60rem) {
  .graph .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .graph { padding: var(--s-4); }
  .graph .tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .graph__now, .graph__nodes circle { transition: none; }
}