/* The site chrome every lab page shares with cliffordbernard.com: the base element rules, the skip link, the site
   header and the emphasis footer (packages/site-chrome/index.mjs renders the markup). Every value is a token of the
   pinned tokens.css (design/cliffordbernard/, loaded before this file); there is no colour literal here, and no dark
   scheme, because the site has none. A page's build prepends this file to its own stylesheet. */

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

html {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  min-width: 20rem;
  background: var(--surface-page);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin-block-start: 0; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; }
a:focus-visible, [tabindex]:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--focus-ring);
  outline-offset: 0.25rem;
}
main:focus { outline: none; }
code { font-family: var(--font-mono); }
::selection { background: var(--accent); color: var(--text-on-emphasis); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 100; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-emphasis); color: var(--text-on-emphasis); font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* header: cliffordbernard.com's own header. Seven destinations on a desktop; on a phone a fixed dock keeps four and
   the More sheet (a declarative popover, no script) holds the secondary three. */
.site-header { position: relative; z-index: 10; border-block-end: var(--rule) solid var(--border-subtle); background: var(--surface-page); }
.site-header__inner {
  display: flex; width: min(100%, calc(var(--content-wide) + 2 * var(--gutter))); min-height: 5rem;
  margin-inline: auto; padding-inline: var(--gutter);
  align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-brand {
  display: inline-flex; min-height: 2.75rem; align-items: center; flex: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.025em; text-decoration: none;
}
.site-navigation {
  display: flex; margin: 0; padding: 0; align-items: center;
  gap: clamp(var(--space-3), 2.5vw, var(--space-5)); list-style: none;
}
.site-navigation__link {
  display: inline-block; padding-block: var(--space-2);
  color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.site-navigation__link:hover, .site-navigation__link.is-active { color: var(--text-primary); }
.site-navigation__link.is-active { box-shadow: inset 0 calc(-1 * var(--rule)) 0 var(--accent); }
.site-navigation__label--mobile, .site-navigation__more { display: none; }
.site-navigation__more > button { width: 100%; border: 0; background: transparent; font-family: inherit; font-weight: 600; cursor: pointer; }
.site-navigation__sheet {
  inset: auto var(--space-2) calc(var(--mobile-nav-clearance) - var(--space-2));
  width: min(24rem, calc(100vw - 2 * var(--space-2)));
  max-height: calc(100svh - var(--mobile-nav-clearance) - var(--space-5));
  margin: 0 0 0 auto; padding: var(--space-4);
  border: var(--rule) solid var(--border-on-emphasis);
  background: var(--surface-emphasis); color: var(--text-on-emphasis);
  --focus-ring: var(--violet-400);
}
.site-navigation__sheet p { margin-block-end: var(--space-2); color: var(--text-muted-on-emphasis); font-size: 0.875rem; }
.site-navigation__sheet a, .site-navigation__sheet button {
  display: flex; min-height: 2.75rem; padding: var(--space-2); align-items: center; font: inherit; color: inherit;
}
.site-navigation__sheet button {
  margin-block-start: var(--space-3); border: var(--rule) solid var(--border-on-emphasis); background: transparent; cursor: pointer;
}

@media (max-width: 48rem) {
  :root { --mobile-nav-clearance: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-block: var(--space-4) var(--mobile-nav-clearance); }
  .site-header__inner { min-height: 4rem; }
  .site-header nav {
    position: fixed; z-index: 90; width: auto; max-width: calc(100vw - 2 * var(--space-2));
    border: var(--rule) solid var(--border-subtle); border-radius: 999px; background: var(--surface-emphasis);
    inset-block-end: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); inset-inline: var(--space-2);
    --focus-ring: var(--violet-400);
  }
  .site-navigation {
    display: grid; width: 100%; padding: var(--space-1);
    grid-template-columns: 1fr 1.65fr 0.8fr 1.1fr 0.8fr; gap: 0;
  }
  .site-navigation li { min-width: 0; }
  .site-navigation__link {
    display: flex; min-height: 3.5rem; padding-inline: 0.25rem; border-radius: 999px;
    align-items: center; justify-content: center;
    color: var(--text-muted-on-emphasis); font-size: 0.875rem; line-height: 1; text-align: center; white-space: nowrap;
    scroll-margin-block: var(--space-3);
  }
  .site-navigation__link:hover { color: var(--text-on-emphasis); }
  .site-navigation__link.is-active { background: var(--surface-page); color: var(--text-primary); box-shadow: none; }
  .site-navigation__label--desktop, .site-navigation__secondary { display: none; }
  .site-navigation__label--mobile, .site-navigation__more { display: block; }
}

/* footer: the site's emphasis surface and closing invitation */
.site-footer {
  border-block-start: var(--rule) solid var(--border-on-emphasis);
  background: var(--surface-emphasis); color: var(--text-on-emphasis);
}
.site-footer a:focus-visible { outline-color: var(--accent-on-emphasis); }
.site-footer__inner {
  width: min(100%, calc(var(--content-wide) + 2 * var(--gutter)));
  margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-5);
}
.site-footer__label {
  margin-block-end: var(--space-4);
  color: var(--text-muted-on-emphasis); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
}
.site-footer__title {
  max-width: 18ch; margin-block-end: var(--space-5);
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4.25rem); font-weight: 650;
  letter-spacing: var(--tracking-display); line-height: var(--leading-headline);
}
.site-footer__contact {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2);
  color: var(--text-on-emphasis); font-weight: 700; text-decoration-color: var(--accent-on-emphasis);
}
.site-footer__secondary {
  display: flex; margin-block-start: var(--space-8); padding-block-start: var(--space-4);
  border-block-start: var(--rule) solid var(--border-on-emphasis);
  align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-footer__secondary > nav { flex: 1 1 auto; min-width: 0; }
.site-footer__navigation { display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 0 var(--space-4); list-style: none; }
.site-footer__navigation a {
  display: inline-flex; min-height: 2.75rem; align-items: center;
  color: var(--text-muted-on-emphasis); font-size: 0.8125rem;
}
.site-footer__meta { display: grid; justify-items: end; gap: var(--space-2); text-align: end; }
.site-footer__coordinates {
  display: flex; margin: 0; justify-content: flex-end; flex-wrap: wrap; gap: 0 var(--space-4); font-style: normal;
}
.site-footer__utility-link {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2);
  color: var(--text-on-emphasis); font-size: 0.8125rem; font-weight: 700; text-decoration-color: var(--accent-on-emphasis);
}
.site-footer__note { margin: 0; color: var(--text-muted-on-emphasis); font-size: 0.8125rem; }
.site-footer__copyright { margin: 0; color: var(--text-muted-on-emphasis); font-family: var(--font-mono); font-size: var(--type-caption); }

@media (max-width: 48rem) {
  /* after the footer's own padding, so the phone dock never covers the last lines */
  .site-footer__inner { padding-block-end: calc(var(--mobile-nav-clearance) + var(--space-5)); }
  .site-footer__secondary { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { justify-items: start; text-align: start; }
  .site-footer__coordinates { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Drawings and dots shared by the lab pages. Line art in the engraved, ink-on-paper manner of cliffordbernard.com: one
   stroke weight, a violet accent for what the drawing is about, short hatching for shade. The dots are the lab's one
   encoding of who handles a claim, told apart by shape as well as colour: a filled violet dot (no person), a soft
   grey dot with a thin edge (a person, briefly), a filled navy dot (a person, in full). */
.art { display: block; width: 100%; height: auto; fill: none; stroke: var(--text-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.art .art__fill { fill: var(--surface-quiet); }
.art .art__paper { fill: var(--surface-page); }
.art .art__accent { stroke: var(--accent); }
.art .art__hatch { stroke: var(--text-muted); stroke-width: 1; }
.dots--none { fill: var(--accent); stroke: none; }
.dots--brief { fill: var(--paper-300); stroke: var(--text-muted); stroke-width: 1; }
.dots--full { fill: var(--surface-emphasis); stroke: none; }
/* a settlement that was wrong: an open violet ring, struck through, so it never reads as settled work */
.dots--wrong { fill: var(--surface-page); stroke: var(--accent); stroke-width: 1.2; }
.art .dots__strike { stroke: var(--accent); stroke-width: 1.2; }
/* the drawings' small labels: text, not strokes, in muted ink (5.04:1 on the page); the model's in violet, a person's in night */
.art .art__label { fill: var(--text-muted); stroke: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }
.art .art__label--model { fill: var(--accent); }
.art .art__label--person { fill: var(--surface-emphasis); }
/* where a decision goes, as a hollow marker: a fixed rule (muted), the model (violet), a person (night) */
.art .mark { fill: var(--surface-page); stroke-width: 1.8; }
.art .mark--code { stroke: var(--text-muted); }
.art .mark--model { stroke: var(--accent); }
.art .mark--person { stroke: var(--surface-emphasis); }

/* The claims lab in cliffordbernard.com's design. The header, footer and base rules are the shared site chrome
   (packages/site-chrome/chrome.css), which the build prepends; this file adds the lab's navigation and its pages.
   Every value is a token of the pinned tokens.css (design/cliffordbernard/): no colour literal, no dark scheme, and
   no inline style anywhere (the page policy forbids it), so charts are coloured by class. Square, ruled, shadowless. */

/* the lab's own navigation, under the site header */
.lab-nav { border-block-end: var(--rule) solid var(--border-subtle); background: var(--surface-quiet); }
.lab-nav__inner {
  display: flex; flex-wrap: wrap; width: min(100%, calc(var(--content-wide) + 2 * var(--gutter)));
  margin-inline: auto; padding: var(--space-2) var(--gutter);
  align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5);
}
.lab-nav__title { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.lab-nav__title a { color: var(--text-secondary); text-decoration: none; }
.lab-nav__title a:hover { color: var(--text-primary); }
.lab-nav__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.lab-nav__links a {
  display: inline-flex; min-height: 2.75rem; align-items: center;
  color: var(--text-secondary); font-size: 0.875rem; text-decoration: none;
  border-block-end: 0.125rem solid transparent;
}
.lab-nav__links a:hover { color: var(--text-primary); }
.lab-nav__links a[aria-current="page"] { color: var(--text-primary); font-weight: 700; border-block-end-color: var(--accent); }

/* sections, as on the site */
.section-shell {
  width: min(100%, calc(var(--content-wide) + 2 * var(--gutter)));
  margin-inline: auto;
  padding: var(--space-7) var(--gutter);
}
.page-intro-shell { padding-block: var(--space-7) var(--space-5); }
.section-shell--compact { padding-block: var(--space-5) var(--space-7); border-block-start: var(--rule) solid var(--border-subtle); }
.section-label {
  display: flex; margin-block-end: var(--space-4); align-items: center; gap: var(--space-3);
  color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700;
  letter-spacing: var(--tracking-caption); line-height: 1.4; text-transform: uppercase;
}
.section-label > span:first-child { color: var(--accent); }
.page-intro { display: grid; max-width: var(--content-wide); gap: var(--space-4); }
.page-intro .section-label { margin-block-end: 0; }
.page-intro h1 {
  max-width: 22ch; margin-block-end: 0;
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.75rem); font-weight: 650;
  letter-spacing: var(--tracking-display); line-height: var(--leading-headline);
}
.page-intro h1.thesis { max-width: 26ch; font-size: clamp(1.75rem, 3.6vw, 3rem); letter-spacing: -0.04em; line-height: 1.1; }
.page-intro > p:last-child { max-width: var(--content-reading); margin-block-end: 0; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
h2 {
  max-width: 30ch; margin-block-end: var(--space-4);
  font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1;
}
h2 a { text-decoration: none; }
h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
h4 { margin-block: 0 var(--space-2); font-size: 0.9375rem; font-weight: 700; }
.reading { max-width: var(--content-reading); color: var(--text-secondary); }
.small { font-size: 0.875rem; }
.muted { color: var(--text-muted); }
.subhead { margin-block-start: var(--space-6); }
data { font-variant-numeric: tabular-nums; }

.text-link {
  display: inline-flex; width: fit-content; min-height: 2.75rem; align-items: center; gap: var(--space-2);
  color: var(--text-primary); font-weight: 700; text-decoration-color: var(--accent);
  transition: gap var(--motion-fast) var(--ease-standard);
}
.text-link:hover { gap: var(--space-3); }

/* the result tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block: var(--space-5); border-block: var(--rule) solid var(--border-subtle); }
.tile { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-4) var(--space-4) 0; align-content: start; }
.tile + .tile { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.tile__label { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.tile__value { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.tile__note { color: var(--text-secondary); font-size: 0.875rem; }

/* claimants: the site's ledger rows */
.claimants, .part-map, .versions {
  display: grid; margin: 0; padding: 0; list-style: none;
  border-block-start: var(--rule) solid var(--border-subtle);
}
.claimants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.claimant { display: flex; padding: var(--space-4) var(--space-4) var(--space-5) 0; flex-direction: column; gap: var(--space-2); border-block-end: var(--rule) solid var(--border-subtle); }
.claimant:nth-child(even) { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.claimant h3 { margin: 0; }
.claimant h3 a { text-decoration: none; }
.claimant h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.claimant__meta, .case-meta { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.claimant__role { margin: 0; color: var(--text-secondary); }
.claimant__path { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; }
.claimant__path > div, .recommendation > div, .example dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-3); }
.claimant__path dt, .recommendation dt, .example dt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); line-height: 2; text-transform: uppercase; }
.claimant__path dd, .recommendation dd, .example dd { margin: 0; }
.claimant .text-link { margin-block-start: auto; }
.verdict {
  display: inline-block; padding: 0 var(--space-1); border: var(--rule) solid var(--border-subtle);
  font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); white-space: nowrap;
}
.verdict--wrong { border-color: var(--surface-emphasis); background: var(--surface-emphasis); color: var(--text-on-emphasis); }

/* the four parts */
.part-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.part-map > li { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5) 0; align-content: start; border-block-end: var(--rule) solid var(--border-subtle); }
.part-map > li + li { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.part-map__n { color: var(--accent); font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.part-map h3 { margin: 0; }
.part-map p { margin: 0; color: var(--text-secondary); }
.part-map__measure { color: var(--text-muted) !important; font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.part-measure { max-width: var(--content-reading); margin-block: var(--space-5) 0; padding: var(--space-3) var(--space-4); background: var(--surface-quiet); }

/* steps on a part page */
.steps { display: grid; gap: 0; }
.step { min-width: 0; padding-block: var(--space-6); scroll-margin-block-start: var(--space-4); }
.step + .step { border-block-start: var(--rule) solid var(--border-subtle); }
.step:first-child { padding-block-start: var(--space-2); }
.step__meta { display: flex; flex-wrap: wrap; margin-block-end: var(--space-2); align-items: center; gap: var(--space-2); }
.step__n { color: var(--accent); font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; }
.badge { padding: 0 var(--space-2); border: var(--rule) solid var(--border-subtle); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); }
.badge--verdict { border-color: var(--text-primary); color: var(--text-primary); }
.step h3 { margin-block-end: var(--space-3); font-size: var(--type-subhead); letter-spacing: -0.035em; }
.step__idea { max-width: var(--content-reading); font-size: 1.125rem; }
.step__change { max-width: var(--content-reading); color: var(--text-secondary); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--space-4) 0; border-block-start: var(--rule) solid var(--border-subtle); }
.figures > div { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-3) 0; border-block-end: var(--rule) solid var(--border-subtle); }
.figures dt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.figures dd { margin: 0; font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; }
.figures__note { color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; }
.step__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-4); }
.step__list ul, .limits, .rules { margin: 0; padding-inline-start: 1.1rem; color: var(--text-secondary); }
.step__list li + li, .limits li + li, .rules li + li { margin-block-start: var(--space-2); }
.step__note { max-width: var(--content-reading); padding: var(--space-3) var(--space-4); background: var(--surface-quiet); }
.example { margin: var(--space-5) 0 0; padding: var(--space-4); border: var(--rule) solid var(--border-subtle); max-width: var(--content-reading); }
.example figcaption { margin-block-end: var(--space-3); font-weight: 700; }
.example dl { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); }
.example > p { margin: 0; color: var(--text-secondary); }
.watch { display: grid; gap: var(--space-3); margin-block: var(--space-4); max-width: var(--content-wide); }
.watch ul { margin: 0; padding-inline-start: 1.1rem; }
.watch li + li { margin-block-start: var(--space-2); }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-block-start: var(--space-5); }

/* tables */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-block-end: var(--rule) solid var(--border-subtle); text-align: start; vertical-align: top; }
thead th { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 400; letter-spacing: var(--tracking-caption); text-transform: uppercase; vertical-align: bottom; }
tbody th { font-weight: 500; }
.num { padding-inline: var(--space-3) 0; font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
details > summary { min-height: 2.75rem; padding-block: var(--space-2); color: var(--text-secondary); cursor: pointer; }
details > summary:hover { color: var(--text-primary); }
.routing { max-width: 28rem; }

/* how it works */
.flow-list { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--rule) solid var(--border-subtle); }
.flow-list > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-block-end: var(--rule) solid var(--border-subtle); }
.flow-list--today > li { grid-template-columns: 6rem minmax(0, 1fr); }
.flow-list h3 { margin-block-end: var(--space-1); font-size: 1.0625rem; }
.flow-list p { max-width: var(--content-reading); margin: 0; color: var(--text-secondary); }
.rules { margin-block-start: var(--space-3); }
.who { font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: var(--tracking-caption); line-height: 2; text-transform: uppercase; }
.who--code { color: var(--text-primary); }
.who--ai { color: var(--accent); }
.who--people { color: var(--text-muted); }

/* a claimant's case */
.case-meta { margin-block-start: var(--space-4); }
.case-note { max-width: var(--content-reading); margin-block: var(--space-4) 0; padding: var(--space-3) var(--space-4); background: var(--surface-quiet); }
.submission { max-width: var(--content-reading); margin: var(--space-5) 0 0; }
.submission figcaption { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.submission blockquote { margin: var(--space-2) 0 0; padding-inline-start: var(--space-4); border-inline-start: 0.1875rem solid var(--accent); color: var(--text-secondary); }
.version { padding-block: var(--space-4); border-block-end: var(--rule) solid var(--border-subtle); scroll-margin-block-start: var(--space-4); }
.version__step { margin: 0 0 var(--space-1); font-weight: 700; }
.version__step a { text-decoration-color: var(--accent); }
.version__outcome { max-width: var(--content-reading); margin: 0; }
.trace-steps { margin: var(--space-2) 0 0; padding-inline-start: 1.25rem; color: var(--text-secondary); }
.trace-steps li { padding-block: var(--space-1); }
.trace-steps li.is-decisive { color: var(--text-primary); }
.trace-steps__who { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.trace-steps__mark { color: var(--accent); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }

/* methods */
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin-block-start: var(--space-5); }
.methods h3 { margin-block-end: var(--space-2); font-size: 1.0625rem; }
.methods p { margin: 0; color: var(--text-secondary); }
.levels { display: grid; margin: 0; padding: 0; list-style: none; border-block-start: var(--rule) solid var(--border-subtle); }
.levels > li { display: grid; grid-template-columns: 4.5rem 13rem minmax(0, 1fr) 8rem; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-block-end: var(--rule) solid var(--border-subtle); align-items: baseline; }
.levels__name { font-weight: 700; }
.levels__steps { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); text-align: end; }
.strength { display: inline-flex; gap: 0.1875rem; }
.strength i { display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--border-subtle); }
.strength i.on { background: var(--accent); }
.recommendation { display: grid; gap: var(--space-3); max-width: var(--content-wide); margin: 0 0 var(--space-3); }
.ledger th[scope="row"] { white-space: nowrap; }
.provenance { max-width: var(--content-reading); color: var(--text-muted); font-size: 0.875rem; }
.provenance code { font-size: 0.8125rem; }

/* charts: colour by class only */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin-block: var(--space-5) var(--space-3); }
.chart { margin: 0; }
.chart figcaption { display: grid; margin-block-end: var(--space-2); font-size: 0.9375rem; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__svg text { font-family: var(--font-body); }
.chart__band { fill: var(--surface-quiet); }
.chart__grid { stroke: var(--border-subtle); stroke-width: 1; }
.chart__zero { stroke: var(--text-muted); stroke-width: 1; }
.chart__bar { fill: var(--accent); }
.chart__bar--below { fill: var(--text-primary); }
.chart__ref { stroke: var(--text-primary); stroke-width: 1.5; }
.chart__tick, .chart__x { fill: var(--text-muted); font-size: 10px; }
.chart__x { font-family: var(--font-mono); }
.chart__reflabel { fill: var(--text-primary); font-size: 10.5px; }
.chart-table { max-width: var(--content-wide); }

@media (max-width: 60rem) {
  .part-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .part-map > li:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .tile:nth-child(n + 3) { border-block-start: var(--rule) solid var(--border-subtle); }
  .levels > li { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .levels > li > span:nth-child(3), .levels__steps { grid-column: 2; text-align: start; }
}
@media (max-width: 48rem) {
  .claimants, .part-map, .charts, .methods, .step__lists { grid-template-columns: minmax(0, 1fr); }
  .claimant:nth-child(even), .part-map > li + li { padding-inline-start: 0; border-inline-start: 0; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-list > li, .flow-list--today > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .claimant__path > div, .recommendation > div, .example dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lab-nav__inner { justify-content: flex-start; }
}
@media (max-width: 30rem) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile + .tile { padding-inline-start: 0; border-inline-start: 0; border-block-start: var(--rule) solid var(--border-subtle); }
}

/* the staffing model: inputs beside results; the results are complete before (and without) the script */
.staffing { display: grid; grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr); gap: var(--space-5) var(--space-6); margin-block-start: var(--space-4); padding: var(--space-4); border: var(--rule) solid var(--border-subtle); }
.staffing__inputs { display: grid; gap: var(--space-3); align-content: start; }
.staffing__out { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.field { display: grid; gap: var(--space-1); font-size: 0.875rem; font-weight: 500; }
.field input { width: 100%; min-height: 2.75rem; padding: var(--space-1) var(--space-2); border: var(--rule) solid var(--border-subtle); background: var(--surface-page); color: var(--text-primary); font: inherit; font-variant-numeric: tabular-nums; }
.field input:focus-visible { outline: 0.1875rem solid var(--focus-ring); outline-offset: 0.125rem; }
.field__note { color: var(--text-muted); font-size: 0.8125rem; font-weight: 400; }
.field-group { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) 0 0; border: 0; border-block-start: var(--rule) solid var(--border-subtle); }
.field-group legend { padding: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; }
.presets button { min-height: 2.75rem; padding: 0 var(--space-3); border: var(--rule) solid var(--border-subtle); background: var(--surface-page); color: var(--text-secondary); font: inherit; font-size: 0.8125rem; cursor: pointer; }
.presets button:hover { color: var(--text-primary); border-color: var(--text-primary); }
.presets button:focus-visible { outline: 0.1875rem solid var(--focus-ring); outline-offset: 0.125rem; }
.tiles--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.tiles--three .tile__value { font-size: clamp(1.5rem, 2.4vw, 2rem); white-space: nowrap; }
output { font-variant-numeric: tabular-nums; }
@media (max-width: 52rem) { .staffing { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); } }
@media (max-width: 36rem) { .tiles--three { grid-template-columns: minmax(0, 1fr); } .tiles--three .tile + .tile { padding-inline-start: 0; border-inline-start: 0; border-block-start: var(--rule) solid var(--border-subtle); } }

/* the held-out test: the one result on fresh claims; a failure is stated in the site's emphasis colours */
.held-out { display: grid; gap: var(--space-3); max-width: var(--content-reading); margin-block-start: var(--space-4); padding: var(--space-4); border: var(--rule) solid var(--border-subtle); }
.held-out--failed { border-color: var(--surface-emphasis); border-inline-start-width: 0.375rem; }
.held-out ul { margin: 0; padding-inline-start: 1.1rem; }
.held-out li + li { margin-block-start: var(--space-1); }
.held-out p { margin: 0; }
.held-out__status { justify-self: start; padding: var(--space-1) var(--space-2); background: var(--surface-emphasis); color: var(--text-on-emphasis); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.held-out--passed .held-out__status { background: var(--surface-quiet); color: var(--text-primary); }
.held-out-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-block: var(--space-4); }
.held-out-compare > div { min-width: 0; }
.held-out-compare .held-out { margin: 0; max-width: none; }
.held-out-compare h4 { margin-block-end: var(--space-2); font-size: 1.0625rem; }
.held-out-compare ul { margin: 0; padding-inline-start: 1.1rem; color: var(--text-secondary); }
.step__note--held-out { border-inline-start: 0.375rem solid var(--surface-emphasis); }
/* the home page: one block per attempt, side by side, the earlier failure beside the later result */
.held-out-attempts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); max-width: var(--content-wide); margin-block: var(--space-4); }
.held-out-attempts .held-out { margin: 0; max-width: none; }
@media (max-width: 48rem) { .held-out-compare { grid-template-columns: minmax(0, 1fr); } }

.held-out-table { max-width: var(--content-wide); margin-block: var(--space-4); }
.held-out-table__fresh { font-weight: 600; }

/* ---- visuals (visuals.mjs): every one drawn from the evidence at build time, coloured only by these classes ---- */

/* the home page's opening: the claim on the left, a thousand claims on the right */
.page-intro--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); max-width: none; column-gap: var(--space-7); align-items: center; }
.page-intro--split > .page-intro__words { display: grid; gap: var(--space-4); }
.hero-figure { display: grid; gap: var(--space-3); margin: 0; }
.hero-figure figcaption, .figure-caption { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
@media (max-width: 60rem) { .page-intro--split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); } }

/* a field of one dot per claim */
.dot-field { display: block; width: 100%; height: auto; }
.dots__ceiling { fill: none; stroke: var(--text-primary); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hero-figure .dot-field, .ceiling-figure .dot-field { max-width: 24rem; }
.dot-legend { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 0.875rem; }
.dot-legend li { display: flex; gap: var(--space-2); align-items: baseline; }
.dot-legend strong { color: var(--text-primary); font-weight: 650; }
.swatch { flex: none; width: 0.85rem; height: 0.85rem; transform: translateY(0.1rem); }

/* a result tile's before-and-after bars: grey is by hand, violet is now, and the large figure is violet too */
.tile__value { color: var(--accent); }
.tiles > .tile { display: flex; flex-direction: column; }
.ba { display: grid; gap: 0.35rem; margin-block-start: auto; padding-block-start: var(--space-3); }
.ba__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.ba__k { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.ba__track { display: block; width: 100%; height: 0.55rem; background: var(--surface-quiet); }
.ba__v { min-width: 4.5rem; font-size: 0.8125rem; font-variant-numeric: tabular-nums; text-align: right; }
.ba__row--before .ba__v { color: var(--text-muted); }
.ba__row--after .ba__v { color: var(--accent); font-weight: 650; }
.ba__bar--before { fill: var(--text-muted); }
.ba__bar--after { fill: var(--accent); }

/* one full-width navy band: the site's emphasis, as on cliffordbernard.com */
.band { background: var(--surface-emphasis); color: var(--text-on-emphasis); }
.band .section-shell--compact { border-block-start: 0; }
.band h2 { color: var(--text-on-emphasis); }
.band .reading, .band p { color: var(--text-muted-on-emphasis); }
.band .section-label, .band .section-label > span { color: var(--text-muted-on-emphasis); }
.band .section-label > span:first-child { color: var(--accent-on-emphasis); }
.band a { color: var(--text-on-emphasis); text-decoration-color: var(--accent-on-emphasis); }
.band .held-out { background: var(--surface-page); color: var(--text-primary); border-color: var(--surface-page); }
.band .held-out p, .band .held-out li { color: var(--text-primary); }
.band .held-out .held-out__status { color: var(--text-on-emphasis); }
.band .held-out--passed .held-out__status { color: var(--text-primary); }

/* accuracy on fresh claims, attempt by attempt, against the bar */
.ranges { display: grid; max-width: var(--content-wide); margin: var(--space-5) 0 var(--space-4); }
.ranges__axis, .ranges__row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 5.5rem; column-gap: var(--space-4); align-items: center; }
.ranges__row { border-block-start: var(--rule) solid var(--border-on-emphasis); }
.ranges__track { display: block; width: 100%; height: 3.75rem; overflow: visible; }
.ranges__track--axis { height: 2.25rem; }
.ranges__tick { fill: var(--text-muted-on-emphasis); font-family: var(--font-mono); font-size: 11px; }
.ranges__barlabel { fill: var(--accent-on-emphasis); font-family: var(--font-mono); font-size: 11px; }
.ranges__bar { stroke: var(--accent-on-emphasis); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ranges__range, .ranges__cap { stroke: var(--text-on-emphasis); stroke-width: 2; }
.ranges__point--pass { fill: var(--text-on-emphasis); }
.ranges__point--fail { fill: var(--surface-emphasis); stroke: var(--text-on-emphasis); stroke-width: 2; }
.ranges__name { color: var(--text-on-emphasis); font-weight: 650; }
.ranges__name small { display: block; color: var(--text-muted-on-emphasis); font-size: 0.8125rem; font-weight: 400; }
.ranges__status { justify-self: end; padding: 0.15rem 0.5rem; font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.ranges__status--pass { background: var(--accent-on-emphasis); color: var(--surface-emphasis); }
.ranges__status--fail { border: var(--rule) solid var(--text-muted-on-emphasis); color: var(--text-on-emphasis); }
.ranges figcaption { margin-block-start: var(--space-2); color: var(--text-muted-on-emphasis); font-size: 0.8125rem; }
@media (max-width: 48rem) {
  .ranges__axis, .ranges__row { grid-template-columns: minmax(0, 1fr) auto; }
  .ranges__axis > span, .ranges__row .ranges__track { grid-column: 1 / -1; }
  .ranges__axis > span { display: none; }
  .ranges__row { padding-block-start: var(--space-2); }
}

/* a claimant: the drawing beside the name, the three moments as dots */
.claimant__head { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.claimant__head .art { width: 5rem; }
.claimant__head > div { display: grid; gap: var(--space-1); }
.journey { display: block; width: 100%; height: 3.75rem; margin-block: var(--space-2) 0; overflow: visible; }
.journey__line { stroke: var(--border-subtle); stroke-width: 2; }
.journey .dots--brief { stroke-width: 1.25; }
.journey__label { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.journey__mark--wrong { fill: var(--text-primary); font-size: 11px; font-weight: 700; }

/* a process as a flow read top to bottom: markers coloured by who does each step (people navy, code grey, the decision model
   violet), joined by a line; claims that leave the automated path branch off to the right */
.steps { display: grid; gap: var(--space-3); max-width: var(--content-wide); margin: var(--space-4) 0 var(--space-5); }
.steps__takeaway { font-family: var(--font-display); font-size: 1.375rem; font-weight: 650; letter-spacing: -0.02em; }
.steps__split { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.steps__bar { display: block; width: 100%; height: 0.75rem; }
.steps__seg--people { fill: var(--surface-emphasis); }
.steps__seg--code { fill: var(--text-muted); }
.steps__seg--ai { fill: var(--accent); }
.steps__key { display: flex; gap: var(--space-3); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 0.8125rem; }
.steps__key li { display: flex; gap: 0.35rem; align-items: center; }
.steps__chip { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--text-muted); }
.steps__chip--people { background: var(--surface-emphasis); }
.steps__chip--ai { background: var(--accent); }
@media (max-width: 48rem) { .steps__split { grid-template-columns: minmax(0, 1fr); } }

.ceiling-figure { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; max-width: var(--content-wide); margin: var(--space-4) 0 0; }
@media (max-width: 48rem) { .ceiling-figure { grid-template-columns: minmax(0, 1fr); } }

/* one measure across a part's steps */
.step-bars { display: grid; gap: 0.35rem; max-width: var(--content-wide); margin: var(--space-4) 0; }
.step-bars figcaption { margin-block-end: var(--space-2); }
.step-bars__row { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 6.5rem; gap: var(--space-3); align-items: center; }
.step-bars__label { font-size: 0.9375rem; }
.step-bars__track { display: block; width: 100%; height: 1.6rem; overflow: visible; }
.step-bars__bar { fill: var(--accent); }
.step-bars__bar--below { fill: var(--text-primary); }
.step-bars__room { fill: var(--surface-quiet); }
.step-bars__value { font-weight: 650; text-align: right; }
.step-bars__note { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.8125rem; }
@media (max-width: 48rem) { .step-bars__row { grid-template-columns: minmax(0, 1fr) auto; } .step-bars__track { grid-column: 1 / -1; grid-row: 2; } }

/* where a step's claims went */
.route-bar { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.route-bar__track { display: block; width: 100%; height: 1.4rem; }
.route-bar__seg--none { fill: var(--accent); }
.route-bar__seg--brief { fill: var(--surface-page); stroke: var(--text-secondary); stroke-width: 1.3; }
.route-bar__track { overflow: visible; }
.route-bar__seg--full { fill: var(--surface-emphasis); }
/* the recommended design's routes: asked as an outline of the paid colour, a fixed rule muted beside a person's doubt */
.route-bar__seg--asked { fill: var(--surface-page); stroke: var(--accent); stroke-width: 1.5; }
.route-bar__seg--rule { fill: var(--text-muted); }
/* the light fraud check beside the quick confirmation: both brief checks by a person, told apart by a dashed outline */
.route-bar__seg--check { fill: var(--surface-page); stroke: var(--text-secondary); stroke-width: 1.3; stroke-dasharray: 2.5 1.5; }
.swatch--route { width: 1rem; height: 0.75rem; flex: none; }
.design-routes { display: grid; gap: var(--space-3); margin: var(--space-5) 0; max-width: var(--content-wide); }
.design-routes figcaption { display: grid; gap: var(--space-1); font-size: 0.9375rem; }
.design-routes__row { display: grid; gap: var(--space-1); }
.design-routes__name, .design-routes__note { margin: 0; font-size: 0.875rem; }
.design-routes__note { color: var(--text-secondary); }
.design-routes__table th[scope="row"] { display: flex; gap: var(--space-1); align-items: center; font-weight: 400; }
.route-bar__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 0.8125rem; }
.route-bar__legend li { display: flex; gap: var(--space-1); align-items: baseline; }

/* paired bars: by hand against recommended */
.paired { display: grid; gap: 0.4rem; max-width: var(--content-wide); }
.paired__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.paired__label { font-size: 0.875rem; }
.paired__track { display: block; width: 100%; height: 1.5rem; }
.paired__key { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; color: var(--text-muted); font-size: 0.8125rem; }

/* a process as a service blueprint: time left to right, a row per actor, a line through the steps. The vertical flow
   below it carries the same steps in words; on a wide screen it folds into a list, on a phone it replaces the drawing */
.bp { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--space-3); margin-block: var(--space-2) var(--space-3); }
.bp__lanes { display: grid; grid-template-rows: repeat(3, 5.25rem) 6rem; }
.bp__lane { display: flex; align-items: center; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; border-block-start: var(--rule) solid var(--border-subtle); }
.bp__grid { position: relative; display: grid; grid-template-rows: repeat(3, 5.25rem) 6rem; background: linear-gradient(var(--surface-quiet) 0 24.4%, transparent 24.4% 48.8%, var(--surface-quiet) 48.8% 73.2%, transparent 73.2%); border-block-end: var(--rule) solid var(--border-subtle); }
.bp__trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp__link { stroke: var(--text-primary); stroke-width: 2; }
.bp__node { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 0.2rem; padding-inline: 0.25rem; text-align: center; }
.bp__node--people { grid-row: 1; }
.bp__node--ai { grid-row: 2; }
.bp__node--code { grid-row: 3; }
.bp__n { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: var(--text-muted); color: var(--white); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; box-shadow: 0 0 0 3px var(--surface-page); }
.bp__node--people .bp__n { background: var(--surface-emphasis); }
.bp__node--ai .bp__n { background: var(--accent); }
.bp__label { padding: 0.1rem 0.3rem; background: var(--surface-page); font-size: 0.75rem; font-weight: 600; line-height: 1.25; }
.bp__c1 { grid-column: 1; }
.bp__c2 { grid-column: 2; }
.bp__c3 { grid-column: 3; }
.bp__c4 { grid-column: 4; }
.bp__c5 { grid-column: 5; }
.bp__c6 { grid-column: 6; }
.bp__c7 { grid-column: 7; }
.bp__c8 { grid-column: 8; }
.bp__c9 { grid-column: 9; }
.bp__c10 { grid-column: 10; }
.bp__c11 { grid-column: 11; }
.bp__c12 { grid-column: 12; }
.bp--n2 .bp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bp--n3 .bp__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bp--n4 .bp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bp--n5 .bp__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bp--n6 .bp__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bp--n7 .bp__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.bp--n8 .bp__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.bp--n9 .bp__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.bp--n10 .bp__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.bp--n11 .bp__grid { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.bp--n12 .bp__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.bp__steps { display: contents; margin: 0; padding: 0; list-style: none; }
/* the end lane: where claims end up, each outcome under the step it leaves from */
.bp__lane--end { border-block-start: 2px solid var(--text-primary); line-height: 1.3; }
.bp__drop { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.bp__drop--auto { stroke: var(--accent); stroke-dasharray: none; stroke-width: 2; }
.bp__end { position: relative; z-index: 1; grid-row: 4; align-self: center; justify-self: center; display: grid; justify-items: center; max-width: 100%; padding: 0.3rem 0.4rem; background: var(--surface-page); border: var(--rule) solid var(--border-subtle); color: var(--text-secondary); font-size: 0.7rem; line-height: 1.25; text-align: center; }
.bp__end strong { color: var(--text-primary); font-size: 0.95rem; }
.bp__end--auto { border-color: var(--accent); }
.bp__end--auto strong { color: var(--accent); }
.bp__end--person { border-color: var(--surface-emphasis); }
.steps__more summary { cursor: pointer; color: var(--text-secondary); font-size: 0.875rem; }
.steps__list { display: grid; gap: var(--space-1); margin: var(--space-2) 0 0; padding-inline-start: 1.25rem; color: var(--text-secondary); font-size: 0.875rem; }
.steps__list strong { color: var(--text-primary); }
/* the blueprint turns when its own width is too narrow for a column per step, not the screen's: a row per step, a
   column per actor; the line and the hanging counts give way to the count written in the step. A diagram of nine
   steps or more (bp--wide) needs a wider figure before its labels stop overlapping, so it turns sooner. The
   same rules serve both. */
.bp-frame { container: blueprint / inline-size; }
/* stacked, the exits no longer hang under their steps: each names its step, under the lane's heading */
.bp__ends-title, .bp__end-step { display: none; }
@container blueprint (max-width: 40rem) {
  .bp {
    & .bp__ends-title { display: block; grid-column: 1 / -1; margin: var(--space-2) 0 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
    & .bp__end-step { display: inline; color: var(--text-primary); }
    & { grid-template-columns: minmax(0, 1fr); }
    & .bp__lanes { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & .bp__lane { justify-content: center; border-block-start: 0; padding-block-end: var(--space-1); }
    & .bp__grid { grid-template-rows: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto; row-gap: var(--space-2); background: linear-gradient(90deg, var(--surface-quiet) 0 33.33%, transparent 33.33% 66.67%, var(--surface-quiet) 66.67%); }
    & :is(.bp__trace, .bp__lane--end) { display: none; }
    & .bp__grid .bp__end { display: block; grid-row: auto !important; grid-column: 1 / -1 !important; justify-self: stretch; justify-items: start; text-align: left; }
    & .bp__grid { border-block-end: 0; }
    & .bp__node--people { grid-column: 1 !important; }
    & .bp__node--ai { grid-column: 2 !important; }
    & .bp__node--code { grid-column: 3 !important; }
    & .bp__c1 { grid-row: 1 !important; }
    & .bp__c2 { grid-row: 2 !important; }
    & .bp__c3 { grid-row: 3 !important; }
    & .bp__c4 { grid-row: 4 !important; }
    & .bp__c5 { grid-row: 5 !important; }
    & .bp__c6 { grid-row: 6 !important; }
    & .bp__c7 { grid-row: 7 !important; }
    & .bp__c8 { grid-row: 8 !important; }
    & .bp__c9 { grid-row: 9 !important; }
    & .bp__c10 { grid-row: 10 !important; }
    & .bp__c11 { grid-row: 11 !important; }
    & .bp__c12 { grid-row: 12 !important; }
  }
}
@container blueprint (max-width: 72rem) {
  .bp--wide {
    & .bp__ends-title { display: block; grid-column: 1 / -1; margin: var(--space-2) 0 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
    & .bp__end-step { display: inline; color: var(--text-primary); }
    & { grid-template-columns: minmax(0, 1fr); }
    & .bp__lanes { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    & .bp__lane { justify-content: center; border-block-start: 0; padding-block-end: var(--space-1); }
    & .bp__grid { grid-template-rows: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto; row-gap: var(--space-2); background: linear-gradient(90deg, var(--surface-quiet) 0 33.33%, transparent 33.33% 66.67%, var(--surface-quiet) 66.67%); }
    & :is(.bp__trace, .bp__lane--end) { display: none; }
    & .bp__grid .bp__end { display: block; grid-row: auto !important; grid-column: 1 / -1 !important; justify-self: stretch; justify-items: start; text-align: left; }
    & .bp__grid { border-block-end: 0; }
    & .bp__node--people { grid-column: 1 !important; }
    & .bp__node--ai { grid-column: 2 !important; }
    & .bp__node--code { grid-column: 3 !important; }
    & .bp__c1 { grid-row: 1 !important; }
    & .bp__c2 { grid-row: 2 !important; }
    & .bp__c3 { grid-row: 3 !important; }
    & .bp__c4 { grid-row: 4 !important; }
    & .bp__c5 { grid-row: 5 !important; }
    & .bp__c6 { grid-row: 6 !important; }
    & .bp__c7 { grid-row: 7 !important; }
    & .bp__c8 { grid-row: 8 !important; }
    & .bp__c9 { grid-row: 9 !important; }
    & .bp__c10 { grid-row: 10 !important; }
    & .bp__c11 { grid-row: 11 !important; }
    & .bp__c12 { grid-row: 12 !important; }
  }
}

/* the ceiling's share, large, beside its dots */
.ceiling-figure__key { display: grid; gap: var(--space-2); align-content: center; }
.ceiling-figure__big { margin: 0; color: var(--accent); font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ceiling-figure__say { max-width: 22rem; margin: 0 0 var(--space-2); color: var(--text-secondary); font-size: 1.0625rem; }

/* the fixed rules, quoted from the engine */
.rules-callout { display: grid; gap: var(--space-2); max-width: var(--content-reading); margin-block: var(--space-3) 0; padding: var(--space-4); background: var(--surface-quiet); }
.rules-callout h3 { margin: 0; font-size: 1.0625rem; }
.rules-callout p { margin: 0; color: var(--text-secondary); font-size: 0.9375rem; }
.rules-callout .rules { margin: 0; }

/* a part at a glance, and a case page's drawing and trail */
.glance .step-bars + .step-bars { margin-block-start: var(--space-5); }
.case-art { justify-self: center; width: min(100%, 18rem); }
.journey--long { height: 4rem; }
.dot-legend--row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.subhead--tight { margin-block: var(--space-4) var(--space-2); font-size: 1.0625rem; }

/* the home page's headcount, pointing to the people page */
.people-teaser { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; max-width: var(--content-wide); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-quiet); color: var(--text-secondary); }
.people-teaser__n { color: var(--accent); font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.people-teaser .text-link { margin-inline-start: var(--space-2); padding: 0; min-height: 0; }

/* the people page: the headcount as people, one figure each */
/* Top-aligned: the two figures share one caption row and one icon row (subgrid), so the numbers sit level, the icons
   start on one line whatever the captions' wrap, and the smaller crowd simply ends higher. */
.crowds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--space-6); row-gap: var(--space-2); max-width: var(--content-wide); margin-block-start: var(--space-5); align-items: start; }
.crowd { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-2); margin: 0; }
.crowd figcaption { color: var(--text-secondary); }
.crowd__n { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.crowd__n--hand { color: var(--text-primary); }
.crowd__n--rec { color: var(--accent); }
.crowd__svg { display: block; width: 100%; max-width: 26rem; height: auto; }
.crowd__people--hand { fill: var(--text-muted); }
.crowd__people--rec { fill: var(--accent); }
@media (max-width: 48rem) { .crowds { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-2); } .crowd + .crowd { margin-block-start: var(--space-4); } }

/* a figure is never broken across lines, whatever its sign */
data { white-space: nowrap; }

/* ---- the report and the methods page: a sticky contents list beside the sections ---- */
.report {
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); column-gap: var(--space-7);
  width: min(100%, calc(var(--content-wide) + 2 * var(--gutter))); margin-inline: auto;
  padding: var(--space-6) var(--gutter) var(--space-7);
}
.report__toc { position: sticky; top: var(--space-4); align-self: start; display: grid; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 2px solid var(--text-primary); }
.report__toc-title { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.report__toc ol { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.report__toc a { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.35; text-decoration: none; }
.report__toc a:hover { color: var(--text-primary); }
.report__toc a[aria-current] { color: var(--text-primary); font-weight: 600; }
.report__toc a[aria-current] span { font-weight: 700; }
.report__toc a[aria-current]::before { position: absolute; inset-block: 0.15em; inset-inline-start: -0.75rem; width: 2px; background: var(--accent); content: ""; }
.report__toc a span { color: var(--accent); font-family: var(--font-mono); font-size: 0.8125rem; }
.report__body { display: grid; gap: var(--space-7); min-width: 0; }
.report__section, .methods-section { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-block-start: var(--space-4); }
.report__section > *, .methods-section > * { margin-block: 0; }
.report__section h2, .methods-section h2 { max-width: 30ch; }
.report__opening { gap: var(--space-3); }
.report__opening h1, .methods-section--intro h1 {
  max-width: 21ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance;
}
.methods-section--intro h1 { max-width: 24ch; font-size: clamp(2rem, 3.4vw, 2.6rem); }
.updated { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.report__lede { max-width: var(--content-reading); margin: 0; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.kicker { margin: 0; color: var(--accent); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.methods-section .staffing-shell, .methods-section > .section-shell { width: 100%; padding-inline: 0; }

/* the three numbers under the headline */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block-start: var(--space-2); border-block-start: 2px solid var(--text-primary); border-block-end: var(--rule) solid var(--border-subtle); }
.stat { display: grid; gap: 0.375rem; align-content: start; margin: 0; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.stat + .stat { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.stat strong { font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.stat span { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.45; }

/* every test on fresh claims: violet is the claims settled with no person; a pass is solid, a failure hatched */
.tests { display: grid; margin: 0; }
.tests__group { margin: var(--space-4) 0 0; padding-block-end: 0.5rem; border-block-end: var(--rule) solid var(--text-primary); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.tests__group:first-of-type { margin-block-start: 0; }
.tests__row, .ladder__row { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr) minmax(12rem, 15rem); column-gap: var(--space-4); row-gap: 0.25rem; align-items: center; padding-block: 0.75rem; border-block-end: var(--rule) solid var(--border-subtle); }
.tests__name, .ladder__name { display: grid; gap: 0.15rem; margin: 0; }
.tests__name strong, .ladder__name strong { font-weight: 650; line-height: 1.3; }
.tests__name span { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.35; }
.tests__track, .ladder__track { display: block; width: 100%; height: 1.9rem; background: var(--surface-quiet); }
.tests__bar { fill: var(--accent); }
.tests__row--fail .tests__bar { fill: color-mix(in srgb, var(--accent) 35%, var(--surface-page)); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tests__figures, .tests__verdict { margin: 0; font-size: 0.875rem; }
.tests__figures { grid-column: 3; grid-row: 1; }
.tests__figures strong { font-family: var(--font-display); font-size: 1.125rem; }
.tests__verdict { grid-column: 3; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; color: var(--text-muted); }
.tests__row .tests__name { grid-row: 1 / span 2; }
.tests__row .tests__track { grid-row: 1 / span 2; }
.tests figcaption, .ladder figcaption, .lane__note, .against-key { max-width: 48rem; margin-block-start: var(--space-3); color: var(--text-muted); font-size: 0.875rem; }
.verdict-mark { display: inline-flex; gap: 0.3rem; align-items: center; padding: 0.15rem 0.5rem; font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.verdict-mark--pass { box-shadow: inset 0 0 0 1.5px var(--text-primary); color: var(--text-primary); }
.verdict-mark--fail { box-shadow: inset 0 0 0 1.5px var(--border-subtle); color: var(--text-muted); }
.verdict-mark__icon { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* the swimlanes: the fixed rules are marked on the lane itself */
.lane { display: grid; gap: var(--space-2); margin: 0; }
.lane figcaption { color: var(--text-secondary); font-size: 0.9375rem; }
.lane figcaption strong { color: var(--text-primary); font-family: var(--font-display); }
.bp__node--rule::before { order: -1; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; content: "fixed rule"; }
.lane__note { margin-block-start: 0; }
.lane__rule-key { margin-inline-end: 0.35rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* the problem: the question, the bar, and what stays with people */
.brief { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-block-start: 2px solid var(--text-primary); }
.brief > div { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4) var(--space-4) 0 0; }
.brief > div + div { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.brief__question { margin: 0; font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.brief ul, .shows ul { display: grid; gap: 0.4rem; margin: 0; padding-inline-start: 1.1rem; color: var(--text-secondary); font-size: 0.9375rem; }

/* W0 to W3 */
.example-claim { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); background: var(--surface-quiet); }
.example-claim__words { display: grid; gap: var(--space-2); }
.example-claim__words > * { margin: 0; max-width: 40rem; }
.example-claim h3 { font-size: 1.375rem; }
.example-claim .journey { max-width: 26rem; }

/* the real test, on the navy band */
.report__band { padding: var(--space-6); background: var(--surface-emphasis); color: var(--text-on-emphasis); }
.report__band h2 { color: var(--text-on-emphasis); }
.report__band .reading, .report__band p { color: var(--text-muted-on-emphasis); }
.report__band .section-label, .report__band .section-label > span { color: var(--text-muted-on-emphasis); }
.report__band .section-label > span:first-child, .report__band .kicker { color: var(--accent-on-emphasis); }
.report__band a { color: var(--text-on-emphasis); text-decoration-color: var(--accent-on-emphasis); }
.flip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--rule) solid var(--border-on-emphasis); }
.flip p { margin: 0; }
.flip strong { color: var(--text-on-emphasis); font-family: var(--font-display); font-size: 1.25rem; }

/* going further: the three designs after W3 */
.tried-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block-start: 2px solid var(--text-primary); }
.tried { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4) var(--space-4) var(--space-4) 0; }
.tried + .tried { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.tried h3 { color: var(--accent); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.tried > * { margin: 0; font-size: 0.9375rem; }
.tried__added, .tried__why { color: var(--text-secondary); }
.tried__policy { color: var(--text-primary); }
.tried__result { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tried__result strong { font-family: var(--font-display); font-size: 1.0625rem; }
.tried__why { padding-block-start: var(--space-2); border-block-start: var(--rule) solid var(--border-subtle); }
.against { display: block; width: 100%; height: 0.9rem; overflow: visible; background: var(--surface-quiet); }
.against__bar { fill: color-mix(in srgb, var(--accent) 35%, var(--surface-page)); stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.against__w3 { stroke: var(--text-primary); stroke-width: 2; }
.against-key { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; }
.against-key__bar { display: inline-block; width: 1.5rem; height: 0.6rem; background: color-mix(in srgb, var(--accent) 35%, var(--surface-page)); box-shadow: inset 0 0 0 1.5px var(--accent); }
.against-key__line { display: inline-block; width: 2px; height: 0.9rem; margin-inline-start: var(--space-3); background: var(--text-primary); }
.risk { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--surface-quiet); }
.risk > * { margin: 0; max-width: 48rem; }
.risk__big { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

/* people are navy wherever a claim's handling is drawn */
.report .crowd__people--rec { fill: var(--surface-emphasis); }
.report .crowd__n--rec { color: var(--surface-emphasis); }

/* what it shows, and the questions */
.shows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-block-start: var(--space-4); border-block-start: 2px solid var(--text-primary); }
.shows h3 { margin: 0 0 var(--space-2); }
.faq { display: grid; border-block-start: 2px solid var(--text-primary); }
.faq details { padding-block: var(--space-3); border-block-end: var(--rule) solid var(--border-subtle); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 650; }
.faq details p { max-width: var(--content-reading); margin: var(--space-2) 0 0; color: var(--text-secondary); }

/* methods: every version, each one's detail folded under its row */
.versions th, .versions td { padding-inline-end: var(--space-4); }
.versions td:last-child { white-space: nowrap; }
.versions__lead th, .versions__lead td { background: color-mix(in srgb, var(--accent) 10%, var(--surface-page)); }
.versions-detail { display: grid; border-block-start: var(--rule) solid var(--border-subtle); }
details.step { padding-block: var(--space-3); border-block-end: var(--rule) solid var(--border-subtle); scroll-margin-block-start: var(--space-4); }
details.step > summary { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; cursor: pointer; }
details.step > summary .step__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; }
details.step[open] > summary { margin-block-end: var(--space-3); }

/* the cases index */
.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block-start: 2px solid var(--text-primary); }
.case-card { display: grid; gap: 0.5rem; align-content: start; padding: var(--space-4) var(--space-4) var(--space-5) 0; border-block-end: var(--rule) solid var(--border-subtle); }
.case-card:not(:nth-child(3n + 1)) { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
.case-card > * { margin: 0; }
.case-card h2 { font-size: 1.25rem; }
.case-card__art { width: 6rem; }
.case-card__role { color: var(--text-secondary); font-size: 0.9375rem; }
.case-card__w3 { padding-block-start: 0.5rem; border-block-start: var(--rule) solid var(--border-subtle); font-size: 0.875rem; }
.case-card__label { margin-inline-end: 0.25rem; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.case-card__w3 .swatch { margin-inline-end: 0.25rem; vertical-align: -1px; }
.case-card__tag { padding: 0.1rem 0.4rem; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

@media (max-width: 60rem) {
  .report { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .report__toc { position: static; }
  .report__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tried-list, .brief, .shows { grid-template-columns: minmax(0, 1fr); }
  .tried + .tried, .brief > div + div { padding-inline-start: 0; border-inline-start: 0; border-block-start: var(--rule) solid var(--border-subtle); }
  .case-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card:not(:nth-child(3n + 1)) { padding-inline-start: 0; border-inline-start: 0; }
  .case-card:nth-child(2n) { padding-inline-start: var(--space-4); border-inline-start: var(--rule) solid var(--border-subtle); }
}
@media (max-width: 40rem) {
  .report { padding-block-start: var(--space-4); }
  .report__toc { display: none; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat, .stat + .stat { grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; border-inline-start: 0; }
  .stat + .stat { border-block-start: var(--rule) solid var(--border-subtle); }
  .stat strong { font-size: 2.1rem; }
  .tests__row { grid-template-columns: minmax(0, 1fr); }
  .tests__row .tests__name, .tests__row .tests__track, .tests__figures, .tests__verdict { grid-column: 1; grid-row: auto; }
  .tests__track { height: 1rem; }
  .example-claim { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .example-claim__art { max-width: 9rem; }
  .flip { grid-template-columns: minmax(0, 1fr); }
  .report__band { padding: var(--space-4); }
  .case-cards { grid-template-columns: minmax(0, 1fr); }
  .case-card:nth-child(2n) { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---- how it's built and how each version decides: the two models, the tree, the strips and the cards ---- */
.note { max-width: var(--content-reading); margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-quiet); color: var(--text-secondary); font-size: 0.9375rem; }
.note strong { color: var(--text-primary); }
.k { display: inline-block; width: 1.1rem; height: 0.8rem; margin-inline-end: 0.4rem; border: 1.5px solid var(--text-primary); vertical-align: -1px; }
.k--dm { border-color: var(--accent); background: var(--accent); }
.k--lm { border: 2px solid var(--accent); background: var(--surface-page); }
.two-models table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.two-models th, .two-models td { padding: 0.7rem 1rem 0.7rem 0; border-block-end: 1px solid var(--border-subtle); text-align: left; vertical-align: top; }
.two-models table thead th { border-block-end: 2px solid var(--text-primary); color: var(--text-primary); font-family: var(--font-display); font-size: 1rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.two-models tbody th { width: 10rem; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.tree { display: grid; gap: var(--space-3); margin: 0; }
.tree__svg { display: block; width: 100%; height: auto; }
.tree__svg text { font-family: var(--font-body); }
.tree__row { fill: var(--text-muted); font-family: var(--font-mono) !important; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; }
.tree__link { fill: none; stroke: var(--text-primary); stroke-width: 1.6; }
.tree__link--dash { stroke-dasharray: 6 5; }
.tree__arrowhead { fill: var(--text-primary); }
.tree__fix { fill: var(--text-muted); font-size: 11px; }
.tree__hatch-bg { fill: var(--surface-page); }
.tree__hatch { stroke: color-mix(in srgb, var(--accent) 28%, var(--surface-page)); stroke-width: 3; }
.tn rect { fill: var(--surface-page); stroke: var(--text-primary); stroke-width: 1.5; }
.tn__code { fill: var(--text-primary); font-family: var(--font-display) !important; font-size: 22px; font-weight: 700; }
.tn__name { fill: var(--text-primary); font-size: 14px; font-weight: 600; }
.tn__model { fill: var(--accent); font-family: var(--font-mono) !important; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; }
.tn__status { fill: var(--text-muted); font-family: var(--font-mono) !important; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tn--pass rect { fill: var(--accent); stroke: var(--accent); }
.tn--pass text { fill: var(--text-on-emphasis); }
.tn--fail rect { fill: url(#tree-hatch); stroke: var(--accent); stroke-dasharray: 5 3; }
.tn--experiment rect { stroke-dasharray: 7 5; }
.tn--unbuilt rect { fill: var(--surface-quiet); stroke: var(--border-subtle); stroke-dasharray: 2 3; }
.tn--unbuilt text { fill: var(--text-muted); }
.tree-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; color: var(--text-secondary); font-size: 0.875rem; list-style: none; }
.tree-key li { display: flex; gap: 0.5rem; align-items: center; }
.tree-key__models { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.tk { display: inline-block; width: 1.5rem; height: 0.9rem; border: 1.5px solid var(--text-primary); }
.tk--pass { border-color: var(--accent); background: var(--accent); }
.tk--fail { border: 1.5px dashed var(--accent); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 45%, var(--surface-page)) 0 3px, var(--surface-page) 3px 6px); }
.tk--experiment { border-style: dashed; }
.tk--unbuilt { border: 1.5px dotted var(--border-subtle); background: var(--surface-quiet); }
.tk-model { color: var(--accent); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
/* on a phone the tree is three lists: the same workflows, in the order the drawing reads */
.tree-list { display: none; gap: var(--space-4); }
.tree-list__title { margin: 0 0 var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.tree-list ol { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.tree-list__item { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: var(--space-2); padding: 0.55rem 0.75rem; border: 1.5px solid var(--text-primary); }
.tree-list__code { grid-row: span 2; font-family: var(--font-display); font-weight: 700; }
.tree-list .tk-model { display: block; }
.tree-list__status { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.tree-list__item--pass { border-color: var(--accent); background: var(--accent); color: var(--text-on-emphasis); }
.tree-list__item--pass .tree-list__status { color: var(--text-on-emphasis); }
.tree-list__item--fail { border: 1.5px dashed var(--accent); }
.tree-list__item--experiment { border-style: dashed; }
.tree-list__item--unbuilt { border: 1.5px dotted var(--border-subtle); background: var(--surface-quiet); color: var(--text-muted); }

.as { display: flex; align-items: center; gap: 0.2rem; margin-block-start: 1.35rem; }
.as__box { position: relative; flex: 1 1 0; min-width: 0; padding: 0.4rem 0.25rem; border: 1.5px solid var(--border-subtle); color: var(--text-muted); font-size: 0.6875rem; font-weight: 600; line-height: 1.2; text-align: center; }
.as__box--dm { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-page)); color: var(--text-primary); }
.as__box--lm { border-color: var(--accent); background: var(--surface-page); color: var(--accent); }
.as__box--code { border-color: var(--text-muted); background: var(--surface-quiet); color: var(--text-secondary); }
.as__box--changed, .as__box--keyed { box-shadow: 0 0 0 2.5px var(--text-primary); color: var(--text-primary); font-weight: 700; }
.as__box--changed::before, .as__box--planned::before { position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.as__box--changed::before { color: var(--text-primary); content: "changed"; }
.as__box--planned { outline: 2px dotted var(--text-muted); outline-offset: 1px; color: var(--text-secondary); }
.as__box--planned::before { color: var(--text-muted); content: "would change"; }
.as__box--extra { flex-grow: 1.3; }
.as__arrow { color: var(--text-muted); font-size: 0.75rem; }
.as-key { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0; color: var(--text-secondary); font-size: 0.875rem; }
.as-key .as__box { flex: none; padding: 0.2rem 0.5rem; }

.wcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.wc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; padding: var(--space-4) var(--space-5) var(--space-5); border-block-start: 3px solid var(--text-primary); background: var(--surface-page); box-shadow: inset 0 0 0 1px var(--border-subtle); scroll-margin-block-start: var(--space-4); }
.wc > * { margin: 0; }
.wc--pass { border-block-start-color: var(--accent); }
.wc--fail { border-block-start-color: color-mix(in srgb, var(--accent) 45%, var(--surface-page)); }
.wc--experiment { border-block-start-style: dashed; }
.wc--unbuilt { border-block-start-color: var(--border-subtle); background: var(--surface-quiet); }
.wc__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: baseline; }
.wc__code { grid-row: span 2; color: var(--accent); font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.wc--unbuilt .wc__code { color: var(--text-muted); font-size: 1.5rem; }
.wc__head h3 { margin: 0; font-size: 1.25rem; }
.wc__status { justify-self: start; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wc__status--pass { color: var(--accent); }
.wc__lead { display: grid; gap: var(--space-2); }
.wc__lead dt, .wc__facts dt, .wc__example > span:first-child, .wc__result > span:first-child { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.wc__lead dd { margin: 0.15rem 0 0; color: var(--text-secondary); font-size: 0.9375rem; }
.wc__lead .wc__idea { color: var(--text-primary); font-family: var(--font-display); font-size: 1.125rem; font-weight: 650; line-height: 1.35; }
.wc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-subtle); }
.wc__facts dd { margin: 0.1rem 0 0; font-size: 0.875rem; }
.wc__example, .wc__result { display: grid; gap: 0.15rem; font-size: 0.9375rem; }
.wc__result .verdict-mark { margin-inline-start: 0.35rem; vertical-align: 1px; }
.wc__result { font-weight: 600; }
.wc__ex { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ex { font-weight: 600; }
.ex--paid { color: var(--accent); }
.ok, .bad { padding: 0.05rem 0.35rem; box-shadow: inset 0 0 0 1px var(--border-subtle); font-family: var(--font-mono); font-size: 0.6875rem; font-style: normal; }
.bad { background: var(--surface-emphasis); color: var(--text-on-emphasis); box-shadow: none; }
.wc__rule summary { color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; }
.wc__rule p { margin: 0.4rem 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.wc__lesson { padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9375rem; }

.vrows__title { margin: var(--space-3) 0 0; font-size: 1.125rem; }
.vrows { display: grid; border-block-start: 2px solid var(--text-primary); }
.vrow { border-block-end: 1px solid var(--border-subtle); }
.vrow > summary { display: grid; grid-template-columns: 3rem 14rem minmax(0, 1fr) 12rem; gap: var(--space-3); align-items: baseline; padding: 0.85rem 0; list-style: none; cursor: pointer; }
.vrow > summary::-webkit-details-marker { display: none; }
.vrow__code { color: var(--accent); font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; }
.vrow__name { font-weight: 650; }
.vrow__idea { color: var(--text-secondary); font-size: 0.9375rem; }
.vrow__result { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.06em; text-align: right; text-transform: uppercase; }
.vrow__result--pass { color: var(--accent); }
.vrow[open] > .wc { margin-block-end: var(--space-4); }

.lab { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--space-4); }
.lab__group { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1.5px dashed var(--border-subtle); }
.lab__group--paid { border: 1.5px solid var(--accent); }
.lab__group--shot { border: 1.5px solid var(--surface-emphasis); }
.lab__name { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.lab ol { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ls { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.6rem; }
.ls__n { display: grid; grid-row: span 2; width: 1.75rem; height: 1.75rem; place-items: center; border-radius: 50%; background: var(--text-primary); color: var(--text-on-emphasis); font-family: var(--font-display); font-size: 0.875rem; font-weight: 700; }
.lab__group--paid .ls__n { background: var(--accent); }
.ls b { font-family: var(--font-display); font-size: 1rem; }
.ls > span:last-child { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.4; }

.measured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-5); align-items: start; }
.measured__facts { display: grid; gap: var(--space-3); margin: 0; }
.measured__facts dt { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.measured__facts dd { margin: 0.15rem 0 0; }
.reliability { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); min-width: 0; margin: 0; }
.reliability figcaption { color: var(--text-secondary); font-size: 0.8125rem; }
.reliability__svg { display: block; width: 100%; max-width: 20rem; height: auto; }
.reliability__frame { fill: none; stroke: var(--border-subtle); }
.reliability__diag { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.reliability__gap { stroke: color-mix(in srgb, var(--accent) 45%, var(--surface-page)); stroke-width: 2; }
.reliability__dot { fill: var(--accent); stroke: var(--surface-page); stroke-width: 2; }
.reliability__tick, .reliability__axis { fill: var(--text-muted); font-family: var(--font-body); font-size: 11px; }
.reliability__table thead th { white-space: normal; }
.reliability__table summary { color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; }

@media (max-width: 60rem) {
  .wcs, .lab, .measured { grid-template-columns: minmax(0, 1fr); }
  .vrow > summary { grid-template-columns: 3rem minmax(0, 1fr); }
  .vrow__idea { grid-column: 2; }
  .vrow__result { grid-column: 2; text-align: left; }
}
@media (max-width: 48rem) {
  .tree__svg { display: none; }
  .tree-list { display: grid; }
  .wc { padding: var(--space-3); }
  .wc__facts { grid-template-columns: minmax(0, 1fr); }
  .as { flex-wrap: wrap; row-gap: 1.3rem; }
  .as__box { flex-basis: 28%; }
  .as__arrow { display: none; }
  .two-models tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); border-block-end: 1px solid var(--border-subtle); }
  .two-models th, .two-models td { padding: 0.5rem 0; border-block-end: 0; }
  .two-models tbody th { grid-column: 1 / -1; width: auto; padding-block-end: 0; }
  .two-models thead th:first-child { display: none; }
  .two-models table thead th { font-size: 0.875rem; }
}

/* ---- what the research says: each point with its sources ---- */
.research { display: grid; gap: var(--space-3); max-width: var(--content-reading); margin: 0; }
.research > div { padding-inline-start: var(--space-3); border-inline-start: 3px solid var(--accent); }
.research--against > div { border-inline-start-color: var(--surface-emphasis); }
.research dt { font-family: var(--font-display); font-weight: 650; }
.research dd { margin: 0.2rem 0 0; color: var(--text-secondary); }
.research__sources { display: block; margin-block-start: 0.3rem; color: var(--text-muted); font-size: 0.8125rem; }

.cost-break { display: block; margin-block-start: 0.3rem; color: var(--text-primary); font-weight: 600; }

/* ---- every set of fresh claims, pooled (methods) ---- */
.fresh-table caption { padding-block-end: var(--space-2); color: var(--text-primary); font-family: var(--font-display); font-weight: 650; text-align: start; }
.fresh-table tfoot th, .fresh-table tfoot td { border-block-start: 2px solid var(--text-primary); font-weight: 650; }

/* ---- what changed, and when (/claims/changes/) ---- */
.change { display: grid; max-width: var(--content-wide); gap: var(--space-3); }
.change > * { margin: 0; }
.change h2 { font-size: 1.375rem; }
.change__table th[scope="row"] { font-weight: 500; }
.updated a { color: var(--text-secondary); }

/* ---- the owner's disclosure (report end, methods) ---- */
.disclosure { max-width: var(--content-reading); margin: 0; padding-block-start: var(--space-3); border-block-start: var(--rule) solid var(--border-subtle); color: var(--text-secondary); font-size: 0.9375rem; }

/* ---- the short version (/claims/demo/): the pharmacy page's components, by the same class names ---- */
.demo { display: grid; max-width: var(--content-wide); gap: var(--space-4); }
.demo > * { margin: 0; }
.demo-head { display: grid; gap: var(--space-2); }
.demo-head h1 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -0.03em; line-height: var(--leading-headline); text-wrap: balance; }
.demo-stamp { justify-self: start; margin: 0; padding: 0.15rem 0.6rem; box-shadow: inset 0 0 0 1.5px var(--text-primary); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.demo-flow li { position: relative; padding: var(--space-3); border-block-start: 3px solid var(--text-primary); background: var(--surface-page); box-shadow: inset 0 0 0 1px var(--border-subtle); font-size: 0.9375rem; counter-increment: flow; }
.demo-flow li::before { display: block; margin-block-end: var(--space-1); color: var(--accent); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700; content: counter(flow); }
.demo .tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile__value--plain { color: var(--text-primary); }
.demo .tile__note { color: var(--text-secondary); font-size: 0.875rem; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.demo-table thead th { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-block-end: var(--rule) solid var(--text-primary); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 500; letter-spacing: 0.1em; text-align: end; text-transform: uppercase; }
.demo-table td, .demo-table tbody th { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-block-end: var(--rule) solid var(--border-subtle); text-align: end; vertical-align: top; }
.demo-table thead th:first-child, .demo-table tbody th { font-weight: 600; text-align: start; }
.demo-chart { margin: 0; display: grid; gap: var(--space-2); }
.run-rows { display: block; width: 100%; height: auto; }
.run-rows text { font-family: var(--font-body); fill: var(--text-primary); }
.run-rows__label { font-size: 14px; font-weight: 600; }
.run-rows__axis { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-muted); }
.run-rows__track { fill: var(--surface-quiet); }
/* a wrong set's bar takes its hatch from the fill attribute, which any CSS fill would override */
.run-rows__bar:not(.run-rows__bar--wrong) { fill: var(--accent); }
.run-rows__hatch { stroke: var(--accent); stroke-width: 2.5; }
.run-rows-key { display: flex; gap: var(--space-2); align-items: center; margin: 0; color: var(--text-muted); font-size: 0.8125rem; }
.run-rows-key__swatch { display: inline-block; width: 1.75rem; height: 0.75rem; background: repeating-linear-gradient(45deg, var(--accent) 0 2px, transparent 2px 5px); }
.demo-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.demo-short { margin: 0; }
@media (max-width: 48rem) {
  .demo-flow { grid-template-columns: minmax(0, 1fr); }
  .demo .tiles--2 { grid-template-columns: minmax(0, 1fr); }
}
.demo-chart__note { color: var(--text-muted); font-size: 0.875rem; }

/* ---- methods: what the claims are made of ---- */
.datasheet caption { padding-block-end: var(--space-2); color: var(--text-muted); font-size: 0.875rem; text-align: start; caption-side: top; }
.datasheet .datasheet__group th { padding-block-start: var(--space-3); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 500; letter-spacing: 0.1em; text-align: start; text-transform: uppercase; }
.datasheet { width: 100%; }
.datasheet tbody th[scope="row"] { width: 50%; font-weight: 500; }
/* the set headers are long: they wrap, so the rates' names keep half the width */
.datasheet thead th.num { width: 25%; white-space: normal; }
.datasheet__judged { display: grid; gap: var(--space-2); margin: 0; }
.datasheet__judged div { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-2); border-block-start: var(--rule) solid var(--border-subtle); }
.datasheet__judged dt { font-weight: 600; }
.datasheet__judged dd { margin: 0; }
.datasheet__seeds { display: grid; gap: var(--space-2); max-width: var(--content-reading); padding-inline-start: 1.25rem; }
@media (max-width: 48rem) { .datasheet__judged div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* the report's tiles once the settled share is split: paid, asked for documents beside it, wrong, net */
.stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat--beside strong { color: var(--text-secondary); }
@media (max-width: 64rem) { .stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats--4 .stat:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; } }
/* a phone keeps one tile per row, as for three */
@media (max-width: 40rem) { .stats--4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- methods: accuracy against coverage ---- */
.coverage { max-width: var(--content-wide); margin-block: var(--space-4); }
.coverage__band { fill: var(--accent); fill-opacity: 0.14; }
.coverage__held { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.coverage__dev { fill: none; stroke: var(--text-primary); stroke-width: 1.75; stroke-dasharray: 6 4; }
.coverage__frozen { fill: var(--text-primary); stroke: var(--surface-page); stroke-width: 2; }
.coverage-table { max-width: var(--content-wide); }
/* long column heads wrap, as the datasheet's do */
.coverage-table thead th.num { width: 27%; white-space: normal; }
.coverage-table caption { padding-block-end: var(--space-2); color: var(--text-muted); font-size: 0.875rem; text-align: start; caption-side: top; }
.coverage__notes { display: grid; gap: var(--space-2); max-width: var(--content-reading); padding-inline-start: 1.25rem; color: var(--text-secondary); font-size: 0.9375rem; }

/* ---- /claims/mistakes/: one card per wrong decision ---- */
.mistakes { display: grid; gap: var(--space-5); max-width: var(--content-wide); }
.mistake { display: grid; gap: var(--space-2); padding: var(--space-4); border-block-start: 3px solid var(--text-primary); background: var(--surface-page); box-shadow: inset 0 0 0 1px var(--border-subtle); }
.mistake > * { margin: 0; }
.mistake h3 { font-family: var(--font-display); font-size: 1.25rem; }
.mistake__steps { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: 1.25rem; max-width: var(--content-reading); }
.mistake__step { font-weight: 600; }
.mistake__answers dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: 0.875rem; }
.mistake__answers dl div { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-1); border-block-end: var(--rule) solid var(--border-subtle); }
.mistake__answers dd { margin: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 48rem) { .mistake__answers dl { grid-template-columns: minmax(0, 1fr); } }

/* how far each test cleared or missed each bar (#172), beside its verdict */
.tests__margins { grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 0.8125rem; }
.margins { color: var(--text-secondary); }

/* ---- the Summary's hundred dots ---- */
.ceiling { display: grid; gap: var(--space-2); max-width: var(--content-wide); margin: 0; }
.ceiling figcaption { display: grid; gap: var(--space-1); }
.ceiling__svg { display: block; width: 100%; max-width: 34rem; height: auto; }
.ceiling__dot--paid { fill: var(--accent); }
.ceiling__dot--asked { fill: var(--surface-page); stroke: var(--accent); stroke-width: 2.5; }
.ceiling__dot--doubt { fill: var(--text-primary); }
.ceiling__dot--rule { fill: var(--text-muted); }
.ceiling__key { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.ceiling__key li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-2); align-items: start; }
.ceiling__swatch { display: inline-block; width: 0.9rem; height: 0.9rem; margin-top: 0.25rem; border-radius: 50%; }
.ceiling__swatch.ceiling__dot--paid { background: var(--accent); }
.ceiling__swatch.ceiling__dot--asked { background: var(--surface-page); box-shadow: inset 0 0 0 2.5px var(--accent); }
.ceiling__swatch.ceiling__dot--doubt { background: var(--text-primary); }
.ceiling__swatch.ceiling__dot--rule { width: 0.55rem; height: 0.55rem; margin: 0.4rem 0.18rem 0; background: var(--text-muted); }