/* 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); }
/* a grid child is as wide as its longest word unless told it may shrink: without min-width 0, an opened details holding
   a run id or a wide table pushed the whole page sideways on a phone (the audit, 1 October) */
.report__section > *, .methods-section > * { margin-block: 0; min-width: 0; }
/* run ids and hashes are long unbroken words: let them break anywhere rather than widen their box */
.report__section details li, .methods-section details li { overflow-wrap: anywhere; }
.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); }