/* 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 demo-section components (components.mjs), copied from apps/pharmacy-site. Every value is a token of the
   pinned tokens.css (design/cliffordbernard/); no colour literal, no dark scheme. Colour language: --accent (violet) is
   the decision model and the automated path, --surface-emphasis (night) is people, --text-muted is code. */

.demo-head { display: grid; gap: var(--space-2); }
.demo-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--type-subhead); letter-spacing: -0.03em; line-height: var(--leading-headline); text-wrap: balance; }
.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; }
.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; }

/* tiles, as on the claims report */
.tiles { display: grid; margin-block: var(--space-4); border-block: var(--rule) solid var(--border-subtle); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.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 { color: var(--accent); font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile__value--plain { color: var(--text-primary); }
.tile__note { color: var(--text-secondary); font-size: 0.875rem; }
@media (max-width: 48rem) {
  .tiles--2, .tiles--3, .tiles--4 { 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); }
}

/* tables: the text alternative under every chart */
.table-scroll { overflow-x: auto; }
.demo-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.demo-table caption { padding-block-end: var(--space-2); color: var(--text-secondary); text-align: start; }
.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; }
/* after the numeric default, so it wins: the row header and any text column read from the start */
.demo-table thead th:first-child, .demo-table tbody th, .demo-table .demo-table__text { text-align: start; }
.demo-table tbody th { font-weight: 600; }

/* what it shows, and what it doesn't */
.shows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-block-start: var(--space-4); border-block-start: var(--rule) solid var(--border-subtle); }
.shows h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); }
.shows ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--space-2); color: var(--text-secondary); }
@media (max-width: 48rem) { .shows { grid-template-columns: minmax(0, 1fr); } }

/* charts: colour by class only */
.blueprint, .units, .run-rows { display: block; width: 100%; height: auto; }
/* the base for chart text, at zero specificity (:where), so every class rule below wins whatever its order; a plain
   `.blueprint text` (0,1,1) outranked them all and drew every label in the primary ink, even on the navy boxes */
:where(.blueprint, .run-rows) text { font-family: var(--font-body); fill: var(--text-primary); }
.blueprint__rule { stroke: var(--border-subtle); stroke-width: 1; }
.blueprint__lane, .run-rows__axis { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-muted); }
.blueprint__path { fill: none; stroke: var(--text-primary); stroke-width: 1.5; }
.blueprint__step { font-size: 13px; font-weight: 600; }
.blueprint__stop--people { fill: var(--surface-emphasis); }
.blueprint__stop--model { fill: var(--accent); }
.blueprint__stop--code { fill: var(--text-muted); }
.blueprint__end--auto { fill: var(--accent); }
.blueprint__end--people { fill: var(--surface-emphasis); }
.blueprint__end-title { font-size: 14px; font-weight: 700; fill: var(--text-on-emphasis); }
.blueprint__end-sub { font-size: 12px; fill: var(--text-muted-on-emphasis); }
/* on the violet (automated) box the muted tone is too faint at this size, so its sub-label (drawn right after the box
   and its title) takes the full tone */
.blueprint__end--auto + .blueprint__end-title + .blueprint__end-sub { fill: var(--text-on-emphasis); }
.units__hit { fill: var(--accent); }
.units__miss { fill: none; stroke: var(--surface-emphasis); stroke-width: 1.5; }
.run-rows__label { font-size: 14px; font-weight: 600; }
.run-rows__value { font-size: 14px; }
.run-rows__track { fill: var(--surface-quiet); }
/* a wrong run's bar keeps its hatch: CSS fill would outrank the SVG's fill="url(#…-hatch)" attribute */
.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); }

/* the age-rows chart: code's benchmark, so muted ink throughout; hatched = carried forward, solid = changed, tick =
   the explored period */
.age-rows { display: block; width: 100%; height: auto; }
:where(.age-rows) text { font-family: var(--font-body); fill: var(--text-primary); }
.age-rows__label { font-size: 15px; font-weight: 600; }
.age-rows__value { font-size: 15px; }
.age-rows__axis { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--text-muted); }
.age-rows__track { fill: var(--surface-quiet); }
.age-rows__hatch { stroke: var(--text-muted); stroke-width: 2.5; }
.age-rows__changed { fill: var(--text-muted); }
.age-rows__tick { stroke: var(--text-primary); stroke-width: 2.5; }
.age-rows-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 0.8125rem; }
.age-rows-key li { display: flex; gap: var(--space-2); align-items: center; }
.age-rows-key__carried, .age-rows-key__changed { display: inline-block; width: 1.75rem; height: 0.75rem; }
.age-rows-key__carried { background: repeating-linear-gradient(45deg, var(--text-muted) 0 2px, transparent 2px 5px); }
.age-rows-key__changed { background: var(--text-muted); }
.age-rows-key__tick { display: inline-block; width: 2.5px; height: 1rem; background: var(--text-primary); }

/* the flow page's ladder: four actors told apart by shape as well as colour. Code a muted-ink square, Jev a solid
   violet circle, the wide model a solid violet diamond with a thin night outline (so it parts from the circle at
   small sizes), a person a night triangle. Hollow means "not measured" in this lab, so every mark here is solid. */
.ladder { display: block; width: 100%; height: auto; }
:where(.ladder) text { font-family: var(--font-body); fill: var(--text-primary); }
.ladder__rule { stroke: var(--border-subtle); stroke-width: 1; }
.ladder__rung-code { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.1em; fill: var(--text-muted); }
.ladder__rung { font-size: 16px; font-weight: 700; }
.ladder__step { font-size: 16px; font-weight: 600; }
.ladder__mark--code { fill: var(--text-muted); }
.ladder__mark--jev { fill: var(--accent); }
.ladder__mark--model { fill: var(--accent); stroke: var(--surface-emphasis); stroke-width: 1.5; }
.ladder__mark--person { fill: var(--surface-emphasis); }
.ladder-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: 0.875rem; }
.ladder-key li { display: flex; gap: var(--space-2); align-items: center; }
.ladder-key__mark { width: 1.25rem; height: 1.25rem; flex: none; }

/* the flow page's blueprint of one load: lanes per actor, stops in the actors' shapes (the ladder's marks) */
.flow-blueprint, .phases { display: block; width: 100%; height: auto; }
:where(.flow-blueprint, .phases) text { font-family: var(--font-body); fill: var(--text-primary); }
.flow-blueprint__rule { stroke: var(--border-subtle); stroke-width: 1; }
.flow-blueprint__lane { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-muted); }
.flow-blueprint__path { fill: none; stroke: var(--text-primary); stroke-width: 1.5; }
.flow-blueprint__step { font-size: 15px; font-weight: 600; }
.flow-blueprint__end--auto { fill: var(--accent); }
.flow-blueprint__end--people { fill: var(--surface-emphasis); }
.flow-blueprint__end-title { font-size: 16px; font-weight: 700; fill: var(--text-on-emphasis); }
.flow-blueprint__end-sub { font-size: 13px; fill: var(--text-muted-on-emphasis); }
/* on the violet (automated) box the muted tone is too faint, so its sub-label takes the full tone */
.flow-blueprint__end--auto + .flow-blueprint__end-title + .flow-blueprint__end-sub { fill: var(--text-on-emphasis); }
/* where the demo stands: done filled ink, the open phase ink inside a ring (current, not the model's violet), later hollow */
.phases__line { stroke: var(--border-subtle); stroke-width: 2; }
.phases__node--done { fill: var(--text-primary); }
.phases__node--open { fill: var(--text-primary); }
.phases__ring { fill: none; stroke: var(--text-primary); stroke-width: 2; }
.phases__node--later { fill: var(--surface-page); stroke: var(--text-muted); stroke-width: 2; }
.phases__code { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: 0.08em; }
.phases__state { font-size: 18px; fill: var(--text-secondary); }
.chart-scroll > svg.flow-blueprint { min-width: 56rem; }
.chart-scroll > svg.phases { min-width: 40rem; }
/* one load's steps, joined left to right */
.journey { display: block; width: 100%; height: auto; }
:where(.journey) text { font-family: var(--font-body); fill: var(--text-primary); }
.journey__box { fill: var(--surface-quiet); stroke: var(--border-subtle); stroke-width: 1; }
.journey__label { font-size: 17px; font-weight: 700; }
.journey__link { stroke: var(--text-muted); stroke-width: 2; }
.journey__arrow { fill: var(--text-muted); }
.chart-scroll > svg.journey { min-width: 40rem; }

/* the units of loads that should reach a person: filled night when one did, an open violet ring when no person did */
.units--person .units__hit { fill: var(--surface-emphasis); }
.units--person .units__miss { stroke: var(--accent); }

/* The logistics demo page in cliffordbernard.com's design. The build prepends the shared site chrome
   (packages/site-chrome/chrome.css) and the demo components (components.css); this file adds the lab's navigation and
   the page's layout. 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). Square, ruled, shadowless. */

/* the lab's own navigation, under the site header, as on /claims/ */
.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); min-height: 2.75rem; align-items: center;
}
.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); }

/* sections */
.section-shell { width: min(100%, calc(var(--content-wide) + 2 * var(--gutter))); margin-inline: auto; padding: var(--space-7) var(--gutter); }
.demo-section { display: grid; gap: var(--space-5); border-block-start: var(--rule) solid var(--border-subtle); }
.demo-section > * { margin-block: 0; }
.demo-section h3 { margin: var(--space-3) 0 0; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; }
.reading { max-width: var(--content-reading); margin: 0; color: var(--text-secondary); }

/* the page top */
.page-intro-shell { display: grid; gap: var(--space-5); padding-block: var(--space-7) var(--space-6); }
.page-intro { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); }
.page-intro__main { display: grid; gap: var(--space-4); align-content: start; }
.page-intro h1 { max-width: 22ch; margin: 0; font-family: var(--font-display); font-size: var(--type-headline); letter-spacing: -0.05em; line-height: 0.98; text-wrap: balance; }
.lead { max-width: var(--content-reading); margin: 0; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.updated { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.contents { padding-block-start: var(--space-6); }
.contents__title { margin: 0 0 var(--space-2); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.contents ol { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.contents a { display: flex; gap: var(--space-2); text-decoration: none; }
.contents a span { color: var(--accent); font-family: var(--font-mono); }
.stand-head { margin: 0; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; }
@media (max-width: 48rem) {
  .page-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .contents { padding-block-start: 0; }
}

/* a chart beside its reading, a table cell's second line, the deployment list, a string from the evidence */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.split__text { display: grid; gap: var(--space-3); }
.split__text h3 { margin: 0; }
.units-figure { display: grid; gap: var(--space-2); margin: 0; }
.units-figure .units { max-width: 28rem; }
.units-figure figcaption { color: var(--text-secondary); font-size: 0.875rem; }
@media (max-width: 48rem) { .split { grid-template-columns: minmax(0, 1fr); } }
.cell-note { display: block; color: var(--text-secondary); font-size: 0.8125rem; text-align: start; }
.demo-table td .cell-note { max-width: 22rem; }
.needs { display: grid; gap: var(--space-2); max-width: var(--content-reading); margin: 0; padding-inline-start: 1.25rem; color: var(--text-secondary); }
.ev { font-size: 0.8125rem; overflow-wrap: anywhere; }

/* charts keep a readable size on a phone and scroll sideways instead of shrinking */
.chart-scroll { overflow-x: auto; }
.chart-scroll > svg { min-width: 40rem; }
/* the ladder's labels stay at twelve pixels or more on a phone: it is wider, so it scrolls further rather than shrinks */
.chart-scroll > svg.ladder { min-width: 56rem; }

/* the one sentence a reader must not miss, and the owner's disclosure at the page's end */
.verdict { max-width: var(--content-reading); margin: 0; padding-inline-start: var(--space-3); border-inline-start: 0.25rem solid var(--surface-emphasis); color: var(--text-primary); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); font-weight: 600; }
.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; }

/* a prediction's result: shape and word, never colour alone */
.verdict-mark { display: inline-flex; gap: var(--space-1); align-items: baseline; font-weight: 600; white-space: nowrap; }
.verdict-mark--pending { color: var(--text-muted); font-weight: 400; }

/* the moved-page line on /logistics/rates/ */
.moved { margin: 0; color: var(--text-muted); font-size: 0.875rem; }

/* the flow page: a cell whose run has not happened, a phase's state, the ladder key's heading */
.pending { color: var(--text-muted); font-style: italic; }
.phase { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }
.phase--done { color: var(--text-primary); font-weight: 700; }
.phase--next, .phase--running, .phase--review { color: var(--accent); font-weight: 700; }
.phase--later { color: var(--text-muted); }
.ladder-key__head { margin: 0; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; }