/* lab.css: the lab's one stylesheet, for every issue demo (michaelevan.com/lab/impeccable/).
   A lab is a specimen bench set into the book: a toned ground told apart from the paper, where live specimens sit on paper
   plates. The book's voice (the serif) introduces it; instruments (the sans, and mono for measured numbers only) label it.
   One anatomy for every demo:
     head        the title (on its own only), the claim, the lab meta line (mark · Impeccable · command · proposal · issue)
     hero        the strongest before/after pair, live, before any text block; a one-line legend of the chips the page uses
     01 The problem            a compact index: a chip and a title per case, each linking to its pair
     02 What the proposal does  benches of before/after pairs, each with its own sticky instrument bar
     03 Where it shows up       ordinary compositions, same plate, chip and caption rules
     Probe notes               a ruled disclosure: method and the measurements behind the issue
   Light only, mouse first, no external requests (a demo adds its own font links if it tests a face).
   Two ways to be shown: opened on its own, the page is its own document; mounted inline on michaelevan.com's lab page
   (components/LabDemo.tsx), it lives in a shadow root under a .lab-doc wrapper that stands for <html> and <body>, only the site's
   page scrolls, and the sections are laid out as a rail (their words in a sticky column, their specimens on one bench).
   Every token is a --lab-* name that reads the site's token where there is one (custom properties cross into the shadow root)
   and falls back to the same value on its own, so the file never redefines a site token. */

:root, .lab-doc {
  /* the site's materials */
  --lab-ink: var(--ink, #1b1b1a);
  --lab-plate: var(--paper, #fbfaf7);
  --lab-muted: var(--muted, #6b6a66);
  --lab-edge: var(--rule, #e4e1da);
  --lab-serif: var(--font-text, "Iowan Old Style", Literata, "Palatino Linotype", Palatino, Georgia, serif);
  --lab-sans: var(--font-ui, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --lab-mono: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --lab-link-hover: var(--link-hover, oklch(0.5525 0.2233 23.64));
  --lab-enter: var(--dur-enter, 180ms);

  /* the bench: every tint is the ink mixed into the paper (the Mixed Tint Rule) */
  --lab-ground: color-mix(in oklab, var(--lab-ink) 5%, var(--lab-plate));
  --lab-bar: var(--lab-ground);
  --lab-ink-2: color-mix(in oklab, var(--lab-ink) 80%, var(--lab-plate));
  --lab-edge-2: color-mix(in oklab, var(--lab-ink) 22%, var(--lab-plate));
  --lab-code: color-mix(in oklab, var(--lab-ink) 6%, var(--lab-plate));
  --lab-link-line: color-mix(in oklab, var(--lab-ink) 35%, var(--lab-plate));
  /* what a bench sits on: the paper on its own, the bench's own ground inline (the rail's stage) */
  --lab-behind: var(--lab-plate);

  /* one left edge, three radii */
  --lab-inset: var(--space-4, 24px);
  --lab-r-s: 4px; --lab-r-m: 8px; --lab-r-l: 12px;

  /* type: five sizes off the site's scale, and the readout */
  --lab-size-micro: 12px;
  --lab-size-text: var(--step--1, 0.9rem);
  --lab-size-body: var(--step-0, 1.125rem);
  --lab-size-lede: var(--step-1, 1.406rem);
  --lab-size-h: var(--step-2, 1.758rem);
  --lab-size-title: var(--step-3, 2.197rem);
  --lab-text: 400 var(--lab-size-text) / 1.5 var(--lab-sans);
  --lab-body: 400 var(--lab-size-body) / 1.55 var(--lab-serif);
  --lab-h: 400 var(--lab-size-h) / 1.2 var(--lab-serif);
  --lab-micro: 600 var(--lab-size-micro) / 1 var(--lab-sans);
  --lab-readout: 600 13px / 1.4 var(--lab-mono);

  /* verdict chips: brick, green, grey, amber; brick is never the site's crimson accent */
  --lab-problem: oklch(0.50 0.13 35);  --lab-problem-bg: color-mix(in oklab, var(--lab-problem) 10%, var(--lab-plate));
  --lab-fix: oklch(0.50 0.10 150);     --lab-fix-bg: color-mix(in oklab, var(--lab-fix) 10%, var(--lab-plate));
  --lab-none: var(--lab-muted);        --lab-none-bg: color-mix(in oklab, var(--lab-ink) 6%, var(--lab-plate));
  --lab-side: oklch(0.47 0.09 75);     --lab-side-bg: color-mix(in oklab, var(--lab-side) 12%, var(--lab-plate));
  --lab-base: var(--lab-ink-2);        --lab-base-bg: var(--lab-plate);

  /* guide colours (type demos): instrument colours, never "read here" (DESIGN.md, Lab guide colours) */
  --lab-guide-box: #1b1b1d;    /* box center, dashed */
  --lab-guide-edge: #9a9aa2;   /* box edges */
  --lab-guide-cap: #d0312d;    /* cap top */
  --lab-guide-capc: #d0312d;   /* cap center, dashed */
  --lab-guide-base: #23894a;   /* baseline */
  --lab-guide-x: #2f6fd6;      /* x-height center */
  --lab-guide-icon: #e07a00;   /* icon center */
  --lab-guide-ink: #9b38b5;    /* ink bounds / ink center, dotted */
  --lab-guide-lab: #0f8f8f;    /* label box edges */

  /* a type row's plate keeps this much room right of the magnified button for a bracket and its reading ("−10.81 px") */
  --lab-readout-room: 92px;
  --lab-wrap: 1240px;
  --lab-bar-h: 52px;
}

* { box-sizing: border-box; }
/* No site nav or branding here, and no fixed or viewport-height layout. Sticky bars stick to whichever page scrolls: this one
   on its own, the site's when inline. */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
/* Inline: the host takes nothing from the site's page (inherited type would change the measured text), and the bars stick
   right under the site's pinned header (--lab-pin, set on the host by the page). */
:host { all: initial; display: block; }
.lab-doc { --lab-behind: var(--lab-ground); }
.lab-doc .group-bar { top: var(--lab-pin, 0px); }
/* The pinned header's solid bar ends above the pin: its feathered foot (lib/hl-pin) is the last stretch of the pin. A bar's
   ground reaches up from its top edge to the page's top, under the header, so a pinned bar's group never shows above it there.
   The group clips it: in flow, above its group's top, it is not drawn; pinned, the group's top has gone up and it covers just
   that group's own page, in the bench's ground. Sticky carries it with the bar, on the compositor. */
.lab-doc .group { overflow: clip; }
.lab-doc .group-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--lab-pin, 0px); background: var(--lab-behind); }
body, .lab-doc { margin: 0; background: var(--lab-plate); color: var(--lab-ink); font: var(--lab-text); -webkit-font-smoothing: antialiased; }
.wrap { max-width: var(--lab-wrap); margin: 0 auto; padding: 0 40px; }
/* Links in the site's way: ink, a hairline underline at rest, the link colour and a heavier line under the pointer. */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--lab-link-line); text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: color 100ms ease-in, text-decoration-color 100ms ease-in; }
a:hover { color: var(--lab-link-hover); text-decoration-color: var(--lab-link-hover); text-decoration-thickness: 2px;
  transition-duration: var(--lab-enter); transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
code { font: 0.86em var(--lab-mono); background: var(--lab-code); padding: 1px 5px; border-radius: var(--lab-r-s); }
:is(p, h3, li, .fig-cap) code { white-space: nowrap; }
pre { font: 12.5px/1.6 var(--lab-mono); background: var(--lab-code); border-radius: var(--lab-r-m); padding: 12px 14px; white-space: pre-wrap; margin: 10px 0; }
p { margin: 0 0 10px; max-width: 70ch; color: var(--lab-ink-2); text-wrap: pretty; }
b, strong { color: var(--lab-ink); font-weight: 600; }
::selection { background: color-mix(in oklab, var(--lab-ink) 14%, var(--lab-plate)); }

/* ---------- head: the title (on its own only), the claim, the lab meta line; nothing above a heading ---------- */
.lab-head { padding: 40px 0 28px; }
.lab-head :is(h1, h2) { font: 400 var(--lab-size-title) / 1.15 var(--lab-serif); letter-spacing: -0.015em; margin: 0 0 14px; max-width: 30em; text-wrap: balance; }
/* Inline, the site's piece header holds the page's one title: the demo's own title is not shown, and the claim follows the header. */
.lab-doc .lab-head :is(h1, h2) { display: none; }
.claim { font: 400 var(--lab-size-lede) / 1.4 var(--lab-serif); color: var(--lab-ink); max-width: 44em; margin: 0 0 12px; text-wrap: pretty; }
.claim code { font-size: 0.72em; }
.lab-meta { font: var(--lab-text); color: var(--lab-muted); max-width: none; margin: 0; }
.lab-meta b { color: inherit; font-weight: 600; }
.lab-meta code { white-space: nowrap; }
/* The lab mark: a specimen pin, the chips' dot in ink turned a quarter, before the word. */
.lab-mark { display: inline-flex; align-items: baseline; gap: 7px; color: var(--lab-ink); font-weight: 600; }
.lab-mark::before { content: ""; width: 7px; height: 7px; background: var(--lab-ink); rotate: 45deg; align-self: baseline; translate: 0 -1.6px; }
.issue-link { white-space: nowrap; color: var(--lab-ink); }
.banner { display: none; margin: 14px 0 0; padding: 8px 12px; background: var(--lab-side-bg); border-radius: var(--lab-r-m); font: var(--lab-text); color: var(--lab-ink); }

/* ---------- the legend strip: the chips this page uses, one line, at the top of the hero's body under its bar ---------- */
.legend-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 18px; font: var(--lab-text); color: var(--lab-muted); max-width: none; }
.legend-strip > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend-strip > .legend-note { margin-left: auto; }

/* ---------- sections ---------- */
.lab-section { padding: 40px 0 8px; }
.lab-hero { padding-top: 0; }
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.sec-num { font: 600 var(--lab-size-text) / 1 var(--lab-sans); color: var(--lab-muted); font-variant-numeric: tabular-nums; }
.lab-section > .wrap > h2, .sec-head h2 { font: var(--lab-h); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.sec-lede { font: var(--lab-body); color: var(--lab-ink-2); margin: 0 0 22px; max-width: 62ch; }
.sec-lede code { font-size: 0.78em; }

/* problem section: the case index, one ruled row per case, a chip and a title that links to its pair */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lab-edge); max-width: 62rem; }
.index li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--lab-edge); }
.index li > .chip { justify-self: start; }
.index a { font: 400 var(--lab-size-body) / 1.4 var(--lab-serif); color: var(--lab-ink); text-wrap: pretty; }
.index a code { font-size: 0.78em; }

/* where it shows up: sketches on their plates, side by side */
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

/* ---------- benches with sticky instrument bars ---------- */
.group { margin: 0 0 40px; background: var(--lab-ground); border-radius: var(--lab-r-l); }
/* the bar must be a direct child of .group so it sticks only while its group is on screen; no ancestor may set overflow */
.group-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: var(--lab-bar-h);
  padding: 8px var(--lab-inset); background: var(--lab-bar); border-bottom: 1px solid var(--lab-edge); border-radius: var(--lab-r-l) var(--lab-r-l) 0 0; }
/* A pinned bar is square-cornered: its two rounded cutouts would show the group's content scrolling under it. A container
   cannot restyle itself, so while the bar is stuck (CSS scroll-state, no script) its ::after paints what the bench sits on into
   just the cutouts. In flow the bar keeps its rounded top and the group's own curve behind it. */
.group-bar { container-type: scroll-state; }
@container scroll-state(stuck: top) {
  .group-bar::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; pointer-events: none;
    background: radial-gradient(circle at 12px 12px, transparent 11.5px, var(--lab-behind) 12px) left top / 12px 12px no-repeat,
                radial-gradient(circle at 0 12px, transparent 11.5px, var(--lab-behind) 12px) right top / 12px 12px no-repeat; }
}
.group-bar .gtitle { font: 600 var(--lab-size-text) / 1.3 var(--lab-sans); color: var(--lab-ink); margin-right: 6px; }
.group-bar .gtitle small { font-weight: 400; font-size: 1em; color: var(--lab-muted); margin-left: 8px; }
.ctl { display: inline-flex; align-items: center; gap: 6px; font: var(--lab-text); color: var(--lab-ink-2); white-space: nowrap; }
.ctl input[type=number] { width: 62px; padding: 3px 6px; font: 400 var(--lab-size-text) var(--lab-sans); font-variant-numeric: tabular-nums; color: var(--lab-ink); border: 1px solid var(--lab-edge-2); border-radius: var(--lab-r-s); background: var(--lab-plate); }
.ctl input[type=checkbox] { margin: 0; accent-color: var(--lab-ink); }
.switch { display: inline-flex; align-items: center; gap: 7px; font: var(--lab-text); color: var(--lab-ink-2); cursor: pointer; user-select: none; padding: 3px 10px 3px 5px; border: 1px solid var(--lab-edge-2); border-radius: 999px; background: var(--lab-plate); white-space: nowrap; }
.switch input { appearance: none; width: 26px; height: 15px; border-radius: 999px; background: var(--lab-edge-2); position: relative; margin: 0; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--lab-plate); transition: transform .15s; }
.switch input:checked { background: var(--lab-ink); }
.switch input:checked::after { transform: translateX(11px); }
.btn { font: var(--lab-text); padding: 4px 11px; border: 1px solid var(--lab-edge-2); border-radius: var(--lab-r-s); background: var(--lab-plate); color: var(--lab-ink); cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--lab-ink-2); }
.btn:disabled { opacity: .6; cursor: default; }
.spacer { flex: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 var(--lab-size-micro) / 1.4 var(--lab-sans); color: var(--lab-muted); }
.legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend i { width: 18px; height: 0; border-top: 2px solid; display: inline-block; }
.group.guides-off .legend { opacity: .35; }

.lab-hero .group { margin-bottom: 0; }
.group-body { padding: 22px var(--lab-inset) 24px; }
/* a case: its claim, its live figures, then the words that walk through them (live demo first) */
.case + .case { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--lab-edge); }
.case > h3 { font: 600 var(--lab-size-body) / 1.35 var(--lab-sans); color: var(--lab-ink); margin: 0 0 14px; text-wrap: balance; }
.case > p { margin: 16px 0 0; max-width: 64ch; }
/* a lede that introduces a pair sits clear of the pair's heads */
.case > p:has(+ :is(.pair, .spec-row, .cases)) { margin: 0 0 18px; }

/* ---------- plates (figures) ---------- */
.chip { display: inline-flex; align-items: baseline; gap: 5px; font: var(--lab-micro); letter-spacing: .04em; text-transform: uppercase; padding: 4px 7px 4px 6px; border-radius: var(--lab-r-s); white-space: nowrap; vertical-align: 1px; }
/* The dot shares the caps' baseline, so the chip's own baseline is its words' (a flex item with no text would hand the chip its bottom edge), and it rises to the caps' centre. */
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; align-self: baseline; translate: 0 -1.26px; }
.chip.problem { color: var(--lab-problem); background: var(--lab-problem-bg); }
.chip.fix { color: var(--lab-fix); background: var(--lab-fix-bg); }
.chip.none { color: var(--lab-none); background: var(--lab-none-bg); }
.chip.side { color: var(--lab-side); background: var(--lab-side-bg); }
.chip.base { color: var(--lab-base); background: var(--lab-base-bg); box-shadow: inset 0 0 0 1px var(--lab-edge-2); }

.fig { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.fig-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 22px; }
.fig-head .ftitle { font: 600 var(--lab-size-text) / 1.3 var(--lab-sans); color: var(--lab-ink); }
.fig-cap { margin-top: 10px; font: var(--lab-text); color: var(--lab-ink-2); text-wrap: pretty; max-width: 72ch; }
/* the readout: a measured value and its unit together, tabular, signed with U+2212, ranges with an en dash */
.fig-cap .v, .readout { font: var(--lab-readout); color: var(--lab-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a readout inside a sans caption: half a pixel under the words around it, so its bold does not outweigh them */
.fig-cap .v { font-size: 12.5px; }
.fig-stage { position: relative; background: var(--lab-plate); border-radius: var(--lab-r-m); box-shadow: inset 0 0 0 1px var(--lab-edge); }
.fig.problem .fig-stage { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lab-problem) 38%, var(--lab-plate)); }
.fig.fix .fig-stage { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lab-fix) 38%, var(--lab-plate)); }
.fig.side .fig-stage { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lab-side) 45%, var(--lab-plate)); }
.fig.none .fig-stage { box-shadow: inset 0 0 0 1px var(--lab-edge-2); }

/* before/after pair: the two figures share one stage row so guides can span both */
/* three small sketches share one row: they shrink with their column instead of running into the next plate */
.where-fig .mini { min-width: 0; flex: 0 1 110px; }
.where-fig .fig-stage { overflow: hidden; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair > .vs { display: none; }
/* Figures side by side (a pair, the cases, the between row) take the same three rows (head, plate, caption) from their grid, so a
   head that wraps in one lowers the plates of all of them and the plates share a top edge. */
:is(.pair, .cases, .between) > .fig { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }

/* type specimen rows: guide lines are drawn in .row-guides across the whole row */
.spec-row { position: relative; display: flex; gap: 28px; align-items: stretch; }
.spec-row .fig { flex: 0 0 auto; }
.spec-row .fig-stage { display: flex; align-items: center; justify-content: center; padding: 22px var(--lab-readout-room) 22px 22px; }
.spec-row.anchor-top .fig-stage { align-items: flex-start; }
.loupe { position: relative; flex: none; }
.loupe > * { transform-origin: 0 0; position: absolute; left: 0; top: 0; }
.loupe.cropped { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.scale-tag { position: absolute; right: 8px; top: 6px; font: 400 var(--lab-size-micro) / 1.3 var(--lab-mono); color: var(--lab-muted); }
.actual { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 var(--lab-size-micro) / 1.3 var(--lab-mono); color: var(--lab-muted); }
.row-guides { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.group.guides-off .row-guides { display: none; }
.row-guides i { position: absolute; height: 0; border-top: 1.6px solid; }
.row-guides i.dash { border-top-style: dashed; }
.row-guides i.dot { border-top-style: dotted; border-top-width: 2px; }
.row-guides i.local { border-top-width: 3px; opacity: .85; }
.row-guides .brk { position: absolute; width: 7px; border: 1.5px solid var(--lab-ink); border-left: 0; }
.row-guides .brk-t { position: absolute; font: 600 var(--lab-size-micro) / 1.3 var(--lab-mono); color: var(--lab-ink); background: color-mix(in oklab, var(--lab-plate) 90%, transparent); padding: 0 3px; border-radius: var(--lab-r-s); white-space: nowrap; transform: translateY(-50%); }
.row-guides .gl { position: absolute; font: 400 var(--lab-size-micro) / 1.3 var(--lab-mono); transform: translateY(-50%); padding: 0 3px; background: var(--lab-plate); }

/* tables: words in the sans, measured columns in the readout's mono */
table.data { border-collapse: collapse; font: var(--lab-text); width: 100%; margin: 12px 0 4px; }
table.data th, table.data td { text-align: left; padding: 7px 16px 7px 0; border-bottom: 1px solid var(--lab-edge); vertical-align: top; }
table.data th { color: var(--lab-muted); font-weight: 400; }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.data td.n { font: 400 13px / 1.5 var(--lab-mono); color: var(--lab-ink); }
/* inside a plate the plate's own edge closes the table */
.fig-stage table.data { margin-bottom: 0; }
.fig-stage table.data tr:last-child :is(td, th) { border-bottom: 0; }
/* a table a run fills shows nothing until it has a row */
table.data:has(> tbody:empty), table.data:empty { display: none; }

/* probe notes: a ruled disclosure, as the site's ruled lists, not a card */
details.notes { margin: 8px 0 32px; border-top: 1px solid var(--lab-ink); border-bottom: 1px solid var(--lab-edge); }
details.notes > summary { cursor: pointer; padding: 14px 0; font: 400 var(--lab-size-lede) / 1.3 var(--lab-serif); color: var(--lab-ink); list-style: none; display: flex; gap: 12px; align-items: baseline; }
details.notes > summary::-webkit-details-marker { display: none; }
details.notes > summary::before { content: "+"; font: 400 var(--lab-size-body) / 1 var(--lab-sans); color: var(--lab-muted); width: 12px; }
details.notes[open] > summary::before { content: "−"; }
details.notes > summary small { font: var(--lab-text); color: var(--lab-muted); }
details.notes .notes-body { padding: 0 0 24px; }
details.notes .notes-body :is(p, li) { font: var(--lab-text); color: var(--lab-ink-2); }
details.notes ul { padding-left: 20px; max-width: 90ch; }
details.notes li { margin-bottom: 6px; }
.env { margin-top: 10px; font: 400 var(--lab-size-micro) / 1.5 var(--lab-mono); color: var(--lab-muted); }

.foot { padding: 0 0 40px; font: var(--lab-text); color: var(--lab-muted); }

/* ======================================================================================================================
   Inline on the site's lab page: the rail. The head runs full width on the paper; under it, each section becomes two cells,
   its words (number, title, lede; the hero's legend) in a sticky rail cell on the paper, its live specimens on one continuous
   bench to the right (components/LabDemo moves the DOM before the demo's scripts run). The cell beside the window's middle
   takes the ink rule and an ink numeral, the rest the hairline. Every lab block starts on the wide track's edge. */
/* Inline, the site's piece header carries the claim and the meta line (app/lab/impeccable/[slug], lib/lab-head.ts), so the page lands on the
   bench itself. What stays in the head is the notice that reduced motion is on (it holds the demo's "ignore" switch). */
.lab-doc .lab-head :is(.claim, .lab-meta) { display: none; }
.lab-doc .lab-head { padding: 0; }
.lab-doc .lab-head .banner { margin: 0 0 20px; }
.lab-doc .lab-head > .wrap { max-width: none; padding: 0; }
.lab-doc .lab-section { padding: 0; }
.lab-doc .lab-section > .wrap { max-width: none; padding: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr); column-gap: 32px; }
.lab-doc .rail-cell { position: sticky; top: calc(var(--lab-pin, 68px) + 20px); align-self: start; padding: 24px 0; }
.lab-doc .rail-words { border-top: 1px solid var(--lab-edge); padding-top: 12px; transition: border-color var(--lab-enter) ease-out; }
.lab-doc .wrap[data-here] .rail-words { border-top-color: var(--lab-ink); }
.lab-doc .rail-words .sec-head { flex-direction: column; gap: 6px; margin: 0 0 10px; }
.lab-doc .rail-words .sec-head:last-child { margin-bottom: 0; }
.lab-doc .rail-words .sec-head h2 { font-size: var(--lab-size-lede); line-height: 1.2; }
.lab-doc .rail-words .sec-num { transition: color var(--lab-enter) ease-out; }
.lab-doc .wrap[data-here] .sec-num { color: var(--lab-ink); }
.lab-doc .rail-words .sec-lede { font: 400 var(--lab-size-text) / 1.5 var(--lab-serif); font-size: 1rem; margin: 0; }
.lab-doc .rail-stage { background: var(--lab-ground); padding: var(--lab-inset); min-width: 0; }
.lab-doc .lab-section:first-of-type .rail-stage { border-radius: var(--lab-r-l) var(--lab-r-l) 0 0; }
.lab-doc .lab-section:last-of-type .rail-stage { border-radius: 0 0 var(--lab-r-l) var(--lab-r-l); }
.lab-doc .lab-section + .lab-section .rail-stage { padding-top: 32px; }
/* a bench on the bench: the group spans the stage's width so its bar covers it all when pinned, and sits on the same ground */
.lab-doc .rail-stage > .group { margin: 0 calc(-1 * var(--lab-inset)) 32px; border-radius: 0; background: transparent; }
.lab-doc .rail-stage > .group:first-child { margin-top: calc(-1 * var(--lab-inset)); }
.lab-doc .lab-section + .lab-section .rail-stage > .group:first-child { margin-top: -32px; }
.lab-doc .rail-stage > .group:last-child { margin-bottom: calc(-1 * var(--lab-inset)); }
.lab-doc .rail-stage > .group > .group-bar { border-radius: 0; }
.lab-doc .lab-section:first-of-type .rail-stage > .group:first-child, .lab-doc .lab-section:first-of-type .rail-stage > .group:first-child > .group-bar { border-radius: var(--lab-r-l) var(--lab-r-l) 0 0; }
.lab-doc .rail-stage > .group + .group { border-top: 1px solid var(--lab-edge); }
.lab-doc .index { max-width: none; }
.lab-doc details.notes { margin: 0 0 16px; }
.lab-doc .foot { padding-bottom: 0; margin: 0; }
/* 1280: a narrower rail keeps the bench wide enough for a type row's magnified figures */
@media (max-width: 1319px) {
  .lab-doc .lab-section > .wrap { grid-template-columns: 208px minmax(0, 1fr); column-gap: 24px; }
}

/* A phone: one column. The rail's words sit above their bench instead of beside it, the pairs stack, and the bars' controls wrap. */
@media (max-width: 760px) {
  .lab-doc .lab-section > .wrap { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .lab-doc .rail-cell { position: static; padding: 16px 0; }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  table.data :is(th, td) { padding-right: 8px; overflow-wrap: anywhere; }
  table.data td.n { font-size: 12px; }
  /* the magnified specimens keep their size (the numbers are measured on them): a figure takes the row and clips what runs past its plate */
  .spec-row { flex-wrap: wrap; gap: 16px; }
  .spec-row .fig { flex: 1 1 100% !important; min-width: 0 !important; } /* over the script's inline equal-width sizing */
  .spec-row .fig-stage { overflow: clip; justify-content: flex-start; padding-right: 22px; }
  .fig-head { flex-wrap: wrap; }
  .fig-head :is(.ftitle, code), :is(p, h3, li, .fig-cap) code { white-space: normal; overflow-wrap: anywhere; }
}