/* The lab dashboard's page stylesheet — docs/design/2026-09-21-make_site.md, drawing every value
   from tokens.css (docs/DESIGN-SYSTEM.md). A template asset: lab/make_site.py links it. No colour
   value appears here; every colour is a token. */

/* ---- faces, shipped with the page so it works offline and in print (lab/fonts/, OFL; provenance in lab/fonts/README.md) ---- */
@font-face { font-family: "STIX Two Text"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/stix-two-text-400-normal.woff2) format("woff2"); }
@font-face { font-family: "STIX Two Text"; font-weight: 400; font-style: italic; font-display: swap; src: url(fonts/stix-two-text-400-italic.woff2) format("woff2"); }
@font-face { font-family: "STIX Two Text"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/stix-two-text-600-normal.woff2) format("woff2"); }
@font-face { font-family: "STIX Two Text"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/stix-two-text-700-normal.woff2) format("woff2"); }
/* STIX Two Math is second in the serif stack: it supplies the operators Text lacks (√ ≈ ≥ ≠ ⟨ ⟩ …). */
@font-face { font-family: "STIX Two Math"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/stix-two-math-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap; src: url(fonts/ibm-plex-mono-600-normal.woff2) format("woff2"); }

/* ---- page ---- */
html { background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/25px var(--font-serif); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }
code { font-family: var(--font-mono); font-size: 13px; }   /* the `code` style; no fill — mono is the signal */
strong { font-weight: 600; }

.page {
  box-sizing: border-box;
  /* The preview's 1000px frame, so the site shell's section row fits; the record columns keep
     their fixed widths (margin-col + measure), so text sits left in the frame as it did. */
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-6) var(--space-8);
}

.runhead {
  display: flex; justify-content: space-between;
  color: var(--ink-muted); border-bottom: 1px solid var(--rule);
  padding: var(--space-4) 0 var(--space-1);
}
.runhead a { color: var(--ink-muted); }
.masthead { padding-top: var(--space-8); }
.masthead h1 { margin: 0 0 var(--space-2); }
.masthead .quote { color: var(--ink-muted); max-width: var(--measure); margin-bottom: var(--space-2); }
.masthead .meta { color: var(--ink-muted); }

/* ---- SectionHead: name, total, breakdown by condition, rule-strong beneath ---- */
section.registry { margin-top: var(--space-7); }
.sechead { margin-bottom: var(--space-6); }
.sechead h2 { margin: 0 0 6px; }
.sechead .counts { border-top: 1.5px solid var(--rule-strong); padding-top: 6px; color: var(--ink-muted); }
.sechead .counts b { color: var(--ink); font-weight: 400; }
.sechead .counts .ret { color: var(--ink-faint); }
.sechead .none { color: var(--ink-muted); }

/* ---- Record: apparatus column, text column, a hairline. Not a card. ---- */
.register > .rec:last-child { border-bottom: 1.5px solid var(--rule-strong); }
.rec {
  display: grid; grid-template-columns: var(--margin-col) minmax(0, var(--measure));
  column-gap: var(--margin-gap);
  padding: calc(var(--space-5) / 2) 0;
  border-bottom: 1px solid var(--rule);
}
.register > .rec:first-child { padding-top: 0; }
.app { text-align: right; color: var(--ink-muted); overflow-wrap: anywhere; min-width: 0; }
.app > * { display: block; }                 /* each apparatus field is a block, one per line */
.app .rid { color: var(--link); }
.app .mark { display: flex; justify-content: flex-end; margin-top: 5px; }
.txt { min-width: 0; }
.txt > .title { margin: 0 0 var(--space-2); }
.txt > * + * { margin-top: var(--space-2); }
.bd > * + * { margin-top: var(--space-3); }
.bd h3, .bd h4, .bd h5 { margin: var(--space-4) 0 0; }
.bd ul, .bd ol { margin: 0; padding-left: 1.4em; }
.bd li + li { margin-top: var(--space-1); }

/* ---- a record page: the same components, one record, nothing left out ---- */
.masthead.detail { padding-top: var(--space-7); }
.masthead.detail .recid { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); }
.masthead.detail .recid .rid { color: var(--ink-muted); }
.masthead.detail.is-retired .recid .rid { color: var(--ink-faint); text-decoration: line-through; }
.masthead.detail h1 { margin: 0; max-width: var(--measure); }

/* The apparatus, as the index sets it: keys right-aligned in the margin column so they form the
   same vertical edge, values in the text column. Each field is a block (the mockup's item 10). */
.apparatus {
  display: grid; grid-template-columns: var(--margin-col) minmax(0, var(--measure));
  column-gap: var(--margin-gap); row-gap: var(--space-1);
  margin: var(--space-6) 0 0; padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.apparatus dt { text-align: right; color: var(--ink-muted); overflow-wrap: anywhere; }
.apparatus dd { margin: 0; overflow-wrap: anywhere; }
.page > .callout, .page > figure, .page > .bd { margin-top: var(--space-5); }
.page > .bd { max-width: var(--measure); }

/* ---- StatusMark: glyph in the state ink, word in ink ---- */
.mark { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.mark .label { color: var(--ink); }
.glyph { display: block; flex: none; }
.is-open      .glyph { color: var(--state-open); }
.is-running   .glyph { color: var(--state-running); }
.is-settled   .glyph { color: var(--state-settled); }
.is-falsified .glyph { color: var(--state-falsified); }
.is-held      .glyph { color: var(--state-held); }
.is-retired   .glyph { color: var(--state-retired); }
.is-retired .rid { color: var(--ink-faint); text-decoration: line-through; }

/* ---- Callout: the one filled block — words the page is quoting ---- */
.callout {
  background: var(--paper-sunk); border-radius: var(--radius-1);
  padding: var(--space-3); max-width: var(--measure); box-sizing: border-box;
}
.callout > * + * { margin-top: var(--space-1); }
.callout .label { margin-right: 7px; }

/* ---- amended: an annotation on the sealed pair, set as apparatus so it cannot be read as part
   of it. A hairline separates it from the sealed lines; the date is `meta`; the note is serif
   (it carries mathematics) at `caption` size, in ink-muted. ---- */
.callout .amended { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-1) 0; margin: var(--space-2) 0; color: var(--ink-muted); }
.callout .amended .label { display: block; color: var(--ink-muted); margin: 0 0 2px; }
.callout .amended p { font: 400 13.5px/19px var(--font-serif); margin: 0; }
.callout .amended p + p { margin-top: var(--space-1); }
.callout .amended .meta { margin-right: var(--space-2); }

/* ---- Confidence: figure plus a five-step dial, in ink ---- */
.conf { white-space: nowrap; }
.conf svg { display: inline-block; vertical-align: -1px; margin-left: var(--space-1); color: var(--ink); }

/* ---- DataTable ---- */
.bd table { border-collapse: collapse; border-top: 1.5px solid var(--rule-strong); border-bottom: 1.5px solid var(--rule-strong); }
.bd th, .bd td { padding: var(--space-1) var(--space-3); text-align: right; border-top: 1px solid var(--rule); vertical-align: baseline; }
.bd th:first-child, .bd td:first-child { text-align: left; padding-left: 0; }
.bd th { font: 400 11.5px/17px var(--font-mono); color: var(--ink-muted); border-top: 0; }
.bd td { font: 400 15px/22px var(--font-serif); }

/* ---- figure rule: measure width, caption beneath ---- */
figure { margin: var(--space-4) 0 0; max-width: var(--measure); }
figure img { display: block; width: 100%; }
figcaption { color: var(--ink-muted); margin-top: var(--space-2); }

/* ---- index density: full width, no apparatus indent, one right-aligned cross-reference ---- */
.rec.ix { display: block; padding: var(--space-2) 0; }
.ixrow { display: flex; align-items: baseline; gap: 10px; }
.ixrow .glyph { position: relative; top: 1px; }
.ixrow .rid { flex: none; width: 8.5ch; color: var(--link); }
.ixrow .q { flex: 1 1 auto; min-width: 0; }
/* break-word, not anywhere: a one-word cross-reference reserves its own width and stays
   whole ("identity", not "iden/tity"); a long settles: line still wraps. */
.ixrow .xref { flex: 0 1 auto; max-width: 30%; text-align: right; color: var(--ink-muted); overflow-wrap: break-word; }
.rec.ix .callout { margin: var(--space-2) 0 0 calc(9px + 10px + 8.5ch + 10px); }
.divider { display: flex; gap: var(--space-2); align-items: baseline; padding: var(--space-4) 0 var(--space-1); border-bottom: 1px solid var(--rule); }
.divider .meta { color: var(--ink-muted); }
.register > .divider:first-child { padding-top: 0; }

/* ---- the stamp ---- */
.stamp { color: var(--ink-faint); margin-top: var(--space-8); border-top: 1px solid var(--rule); padding-top: var(--space-1); display: flex; justify-content: space-between; }

/* ---- TabStrip: right edge, touches it; the current section filled solid ink ---- */
.tabstrip { position: fixed; top: var(--space-8); right: 0; display: flex; flex-direction: column; gap: var(--tab-gap); }
.tabstrip a {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: var(--tab-w); height: var(--tab-h);
  background: var(--paper-edge); color: var(--ink-muted);
  border: 0.5pt solid var(--rule); border-right: 0;
  writing-mode: vertical-rl; text-orientation: sideways;
  text-decoration: none;
}
.tabstrip a[aria-current] { background: var(--ink); color: var(--ink-reverse); border-color: var(--ink); }
body { padding-right: var(--tab-w); }

/* ---- the fold: the only responsive rule. Apparatus folds above the title as one line ---- */
@media (max-width: 42rem) {
  .page { padding-left: var(--space-4); padding-right: var(--space-4); }
  .rec { display: block; }
  .app { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 var(--space-3); text-align: left; margin-bottom: var(--space-2); }
  .app .mark { margin-top: 0; justify-content: flex-start; }
  .apparatus { display: block; }
  .apparatus dt { text-align: left; margin-top: var(--space-2); }
  .ixrow { flex-wrap: wrap; }
  .ixrow .q { flex-basis: 60%; }
  .ixrow .xref { flex-basis: 100%; text-align: left; padding-left: calc(9px + 10px); }
  .rec.ix .callout { margin-left: 0; }
}

/* ---- print and the PDF (docs/DESIGN-SYSTEM.md §7). The HTML carries the hooks; no PDF is built here. ---- */
@page {
  size: 509pt 679pt;
  margin: 26pt 64pt 26pt 26pt;
  @bottom-left  { content: string(section); font: 7.1pt "IBM Plex Mono"; color: var(--ink-faint); }
  @bottom-right { content: counter(page); font: 7.1pt "IBM Plex Mono"; color: var(--ink-faint); }
}
h2.section { string-set: section content(); bookmark-level: 1; }
article.rec { bookmark-level: 2; bookmark-label: attr(data-id); }
@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { padding-right: 0; }
  .page { max-width: none; padding: 0; }
  .masthead { padding-top: 0; }
  .tabstrip { position: fixed; top: 0; right: 0; width: var(--tab-w); height: var(--page-h); gap: var(--tab-gap); }
  a:hover { text-decoration: none; }
  .rec { break-inside: avoid; }
  .sechead { break-after: avoid; }
}

/* ---- note and probe pages (ADDENDUM B; previews B1-note-*.html, B2-probe-*.html). The record
   layout at full density: apparatus column, then the title at `title`, not `display`. ---- */
.thread-page { border-bottom: 0; }
.thread-page .app .struck, .idref .struck { color: var(--ink-faint); text-decoration: line-through; }
.thread-page .app .nw { white-space: nowrap; }
.thread-page .txt > h1.title { margin: 0 0 6px; }
.thread-page .tags { color: var(--ink-muted); margin: 0 0 var(--space-1); }
.absent { color: var(--ink-muted); }
.is-unanticipated .glyph { color: var(--ink); }          /* §10: the one data mark set in ink */
.idref { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-2); }
.idref .id { color: var(--link); }
/* A resolved probe opens with its resolution, in the record's own words. */
.resolution { display: flex; gap: 10px; padding: 10px 0; margin: var(--space-3) 0;
  border-top: 1px solid var(--rule); border-bottom: 1.5px solid var(--rule-strong); }
.resolution > span { flex: none; padding-top: 3px; }
.resolution p { margin: 0; }
.became { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.standing { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: var(--space-4) 0; }
.standing .srow { display: flex; gap: var(--space-4); padding: 6px 0; align-items: baseline; }
.standing .srow > .label { width: 120px; flex: none; }
.standing .caption { display: block; color: var(--ink-muted); margin-top: 2px; }
/* An unsealed prediction: §10's unsealed treatment — dashed ink-faint edge, no fill, no seal bar. */
.callout.provisional { background: transparent; border: 1px dashed var(--ink-faint); }
.callout.provisional > .label { color: var(--ink-muted); display: block; margin-bottom: var(--space-2); }
.private-only { border-left: 1px solid var(--rule); padding-left: var(--space-3); }
.private-only > .meta { color: var(--ink-muted); }
.addenda { margin-top: var(--space-6); }
.addenda h2 { margin: 0 0 var(--space-2); }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule-strong); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 5px; width: 7px; height: 7px; background: var(--ink); }
.timeline .when { display: block; color: var(--ink-muted); }
.thread-page .foot { color: var(--ink-muted); margin-top: var(--space-5); }
@media (max-width: 42rem) {
  .standing .srow { display: block; }
}

/* ---- a fenced block: mono, no fill (§2 — mono is the signal), scrolls rather than wraps ---- */
.bd pre.code { margin: 0; font: 400 13px/20px var(--font-mono); white-space: pre; overflow-x: auto; max-width: var(--measure); }

/* ---- arcs (ADDENDUM C; preview C1-arc-*.html). The gutter is a depth rail: a hairline to the
   record's depth and a tick there; a bar one step back marks more than one parent. ---- */
body:not(:has(.tabstrip)) { padding-right: 0; }
.arc { border-top: 1.5px solid var(--rule-strong); margin-top: var(--space-3); }
.arow { display: flex; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.arow .gutter { flex: none; display: block; margin-right: var(--space-2); }
.gutter .rail { stroke: var(--rule); stroke-width: 1; }
.gutter .two { stroke: var(--rule-strong); stroke-width: 1; }
.gutter .tick { fill: var(--ink-muted); }
.gutter .tick.ret { fill: var(--ink-faint); }
.arow .aglyph { width: 26px; flex: none; padding-top: 2px; }
.arow .abody { flex: 1; max-width: 36rem; min-width: 0; }
.arow .abody .lead { margin-top: 2px; }
.arow .abody .seal { font: 400 13.5px/19px var(--font-serif); color: var(--ink-muted); margin-top: 2px; }
.arow .abody .chg { margin-top: 2px; }
.arow .aside { width: 156px; flex: none; text-align: right; padding-left: var(--space-3); }
.arow .aside > * { display: block; }
.id.struck, a.id.struck { color: var(--ink-faint); text-decoration: line-through; }
.masthead .callout { margin-top: var(--space-3); max-width: 44rem; }
.foot { color: var(--ink-muted); margin-top: var(--space-4); max-width: 44rem; }
@media (max-width: 42rem) {
  .arow { flex-wrap: wrap; }
  .arow .gutter { display: none; }
  .arow .aside { width: 100%; box-sizing: border-box; text-align: left; padding: var(--space-1) 0 0 26px; }
}

/* ---- waiting (ADDENDUM E; previews E-waiting-*.html) and stale citations (G) ---- */
.wgroup .rule { color: var(--ink-muted); margin: 0 0 var(--space-1); max-width: 44rem; }
.wlist { border-top: 1.5px solid var(--rule-strong); }
.wrow { display: flex; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--rule); }
.wrow .age { width: 104px; flex: none; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding-right: 14px; align-self: center; }
.wrow .age .num { color: var(--ink-muted); }
.age .track { stroke: var(--rule); stroke-width: 1; }
.age .fill { fill: var(--ink-muted); }
.age .fill.full { fill: var(--ink); }
.wrow .wglyph { width: 22px; flex: none; align-self: center; }
.wrow .wid { width: 8.5ch; flex: none; }
.wrow .wid .id { color: var(--link); }
.wrow .wlead { flex: 1; max-width: 28rem; min-width: 0; }
.wrow .wwait { flex: 1; max-width: 22rem; padding-left: var(--space-4); color: var(--ink-muted); }
.srow2 { padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.srow2 .shead { display: flex; gap: var(--space-2); align-items: center; }
.srow2 blockquote { margin: var(--space-1) 0; padding-left: var(--space-3); border-left: 1px solid var(--rule-strong); max-width: var(--measure); }
.wgroup h3 { margin: var(--space-5) 0 var(--space-1); }
.stale-line { color: var(--ink); }
@media (max-width: 42rem) {
  .wrow { flex-wrap: wrap; }
  .wrow .age { width: auto; padding-right: var(--space-2); }
  .wrow .wlead { flex-basis: 70%; }
  .wrow .wwait { flex-basis: 100%; padding-left: 0; }
}

/* ---- frontier (ADDENDUM-2 F; previews F-frontier*.html): one rail, three readings, no colour ---- */
.flist .divider:first-child { padding-top: 0; }
.frow { display: flex; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.frow .fage { width: 88px; flex: none; text-align: right; padding-right: 14px; padding-top: 1px; color: var(--ink-muted); }
.frow .fglyph { width: 24px; flex: none; padding-top: 4px; }
.frow .fid { width: 150px; flex: none; }
.frow .ftext { flex: 1; max-width: var(--measure); min-width: 0; }
.frow .fnext { margin-top: var(--space-1); }
.frow .fsig { padding-top: 2px; width: 196px; flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 7px; padding-left: 14px; flex-wrap: wrap; }
.prop { font: 600 10.5px/14px var(--font-mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-muted); }
.rail2 .hair { stroke: var(--rule); stroke-width: 1; }
.rail2 .barrier { stroke: var(--ink); stroke-width: 2; }
.rail2 .terminus, .rail2 .comb { fill: var(--ink-muted); }
.rules { max-width: 44rem; }
.rules ol { padding-left: 1.4em; }
.rules li + li { margin-top: var(--space-1); }
@media (max-width: 42rem) {
  .frow { flex-wrap: wrap; }
  .frow .fage { width: auto; }
  .frow .ftext { flex-basis: 100%; }
  .frow .fsig { width: 100%; justify-content: flex-start; padding-left: 0; }
}

/* ---- dictionary (ADDENDUM D; preview D-dictionary.html). Letters are a taxonomy: mono, no colour ---- */
.dfilter { display: flex; flex-wrap: wrap; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: var(--space-3) 0 var(--space-1); }
.dfilter a { padding: 6px 11px 5px; color: var(--ink-muted); border-right: 1px solid var(--rule); }
.dfilter a:first-child { border-left: 1px solid var(--rule); }
.dfilter a[aria-current] { background: var(--ink); color: var(--ink-reverse); }
.dfilter .num { font-size: 9.5px; }
.drow .app .dsec, .drow .dsec { color: var(--ink); }
.dletter { font: 600 12px/16px var(--font-mono); color: var(--ink); }
.dletter.micro { font: 500 9.5px/13px var(--font-mono); color: var(--ink-faint); text-transform: none; }
.drow.is-finding { box-shadow: inset 2px 0 0 var(--ink); padding-left: var(--space-2); }
.dtest { display: flex; align-items: center; gap: var(--space-1); }
.drow.ix { display: flex; align-items: baseline; gap: 10px; padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.drow.ix .dsec { width: 7ch; flex: none; }
.drow.ix .dletter { width: 7ch; flex: none; }
.drow.ix .dmap { flex: 1; min-width: 0; }
.drow.ix .xref { flex: none; }

/* ---- citations and bibliography (ADDENDUM-2 H; preview H-citations.html) ---- */
.crow { display: flex; align-items: baseline; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.crow .cid { width: 8ch; flex: none; }
.crow .cpin { width: 17ch; flex: none; overflow-wrap: anywhere; }
.crow .ctext { flex: 1; min-width: 0; max-width: var(--measure); }
.crow .cwhy { width: 14rem; flex: none; color: var(--ink-muted); }
.crow .cwhere { flex: none; max-width: 16rem; text-align: right; color: var(--ink-muted); overflow-wrap: anywhere; }
@media (max-width: 42rem) {
  .crow { flex-wrap: wrap; }
  .crow .ctext { flex-basis: 70%; }
  .crow .cwhy, .crow .cwhere { width: auto; text-align: left; flex-basis: 100%; }
}

/* ---- indexes (ADDENDUM-2 I; preview I-indexes.html) ---- */
.irow { display: flex; align-items: baseline; gap: 10px; padding: var(--space-1) 0; border-bottom: 1px solid var(--rule); }
.irow .iglyph { width: 9px; flex: none; position: relative; top: 1px; }
.irow > .id, .irow > .code { flex: none; min-width: 8.5ch; }
.irow .iq { flex: 1; min-width: 0; }
.irow .ix { flex: none; color: var(--ink-muted); text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: var(--space-5); }
.chip { font: 400 11.5px/17px var(--font-mono); border: 1px solid var(--rule); padding: 2px 7px; }
.chip .num { font-size: 11px; color: var(--ink-muted); }
.singles { color: var(--ink-muted); }
.toc { margin-bottom: var(--space-5); max-width: 44rem; }
.marks { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0; }

/* ---- programmes (K; previews 2026-10-01-make_site.previews/K-programme*.html) ---- */
.pgsec { margin-top: var(--space-6); }
.pgsec > h2 { margin: 0 0 var(--space-1); }
.pgsec > .meta { color: var(--ink-muted); border-bottom: 1.5px solid var(--rule-strong); padding-bottom: 4px; }
.lrow { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); }
.lrow .lid { width: 4ch; flex: none; color: var(--ink-muted); }
.lrow .lbody { flex: 1; min-width: 0; }
.lrow .ids, .pgsec > .ids { margin-top: var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-1); }
.srow3 { display: flex; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.srow3 > .meta { width: 10ch; flex: none; color: var(--ink-muted); }
.wb { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.wb li + li { margin-top: var(--space-1); }

/* ---- running board (L; previews L-running-*.html). 390 px first: one card per run, the fields
   stacked with their labels above them; from 30rem a label column, nothing rearranged. ---- */
.board { max-width: 44rem; }
.bcard { border-top: 1.5px solid var(--rule-strong); padding: var(--space-3) 0 var(--space-4); }
.bcard + .bcard { margin-top: var(--space-3); }
.bhead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.bhead > .id { font-size: 15px; }
.blead { margin: var(--space-2) 0; }
.bf { padding: 6px 0; border-top: 1px solid var(--rule); }
.bf > .label { display: block; color: var(--ink-muted); margin-bottom: 2px; }
.bf .src { color: var(--ink-muted); }
.bcard > .meta { margin-top: var(--space-2); color: var(--ink-muted); }
.tt { border-collapse: collapse; margin-top: var(--space-2); border-top: 1.5px solid var(--rule-strong); border-bottom: 1.5px solid var(--rule-strong); }
.tt th { font: 400 11.5px/17px var(--font-mono); color: var(--ink-muted); text-align: right; padding: 3px 10px; }
.tt td { font: 400 13.5px/20px var(--font-mono); text-align: right; padding: 3px 10px; border-top: 1px solid var(--rule); }
.tt th:first-child, .tt td:first-child { text-align: left; padding-left: 0; }
.brow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 30rem) {
  .bf { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--space-3); }
  .bf > .label { margin: 3px 0 0; }
}

/* ---- hubs (one-site §2.1; lab/hubs.py and the Lab hub's boards): a label column, then what the page holds ---- */
.hub-boards .irow > .label { flex: none; min-width: 11ch; color: var(--link); }
.hub-list a { white-space: nowrap; }
/* on a phone a hub row's right field (programme · scored day, modules, …) takes its own line under the row's text */
@media (max-width: 42rem) {
  .hub-rows .irow { flex-wrap: wrap; row-gap: 0; }
  .hub-rows .irow .ix { flex-basis: 100%; box-sizing: border-box; text-align: left; padding-left: calc(9px + 8.5ch + 20px); }
  .hub-rows .irow > a.iq + .ix { padding-left: 0; }
}

/* one look at 390 px (one-site §2.1): a record body's table scrolls inside itself, never the page, and a long
   inline code span or id breaks rather than pushing the column wide */
.page table { display: block; max-width: 100%; overflow-x: auto; }
.page code, .page .app, .page .meta, .page .bd { overflow-wrap: anywhere; }
.page .srow3 > * { min-width: 0; overflow-wrap: anywhere; }

/* ---- reading pages (one-site §2.4; lab/make_reading.py): a markdown note rendered, set as a record body ---- */
.eyebrow { color: var(--ink-muted); margin-bottom: var(--space-2); }
.bd.reading h2 { font: 600 20px/26px var(--font-serif); margin: var(--space-6) 0 0; }
.bd.reading h3 { font: 600 17px/23px var(--font-serif); margin: var(--space-5) 0 0; }
.bd.reading h4, .bd.reading h5, .bd.reading h6 { margin: var(--space-4) 0 0; }
.bd.reading ul, .bd.reading ol { margin-top: var(--space-2); }
.bd.reading pre { font: 400 13px/20px var(--font-mono); overflow-x: auto; margin: var(--space-3) 0 0; padding: 0; white-space: pre; }
.bd.reading blockquote { margin: var(--space-3) 0 0; padding-left: var(--space-3); border-left: 1px solid var(--rule-strong); color: var(--ink-muted); }
.bd.reading th, .bd.reading td { text-align: left; }
.tscroll { overflow-x: auto; max-width: 100%; margin-top: var(--space-3); }
.tscroll table { display: table; min-width: 100%; }
/* a raster figure was drawn for paper: at night it sits on a paper plate, never inverted (its greys are its meaning) */
.plate { background: var(--plate); max-width: 100%; height: auto; }
.bd.reading figure img { max-width: 100%; }
.fig-svg svg { display: block; max-width: 100%; height: auto; }
/* MathML: a display equation wider than a phone column scrolls inside itself, never the page. Inline maths stays
   inline: a scroll box would move its baseline to its bottom edge and drop it below the line. */
.bd.reading math[display="block"] { display: block; overflow-x: auto; overflow-y: hidden; margin: var(--space-3) 0; padding-bottom: 4px; }
.bd.reading math { font-family: "STIX Two Math", var(--font-serif); }

/* ---- the codifier's lead on a run page (owner's ruling D5): private build only, after scoring, closed ---- */
.lead-fold { margin-top: var(--space-5); border-top: 1px solid var(--rule); padding-top: var(--space-2); }
.lead-fold > summary { cursor: pointer; color: var(--ink-muted); }
.lead-note { margin-top: var(--space-4); }
.masthead.reading { padding-top: var(--space-2); }