/* ═══════════════════════════════════════════════════════════════════════════
   13F section -- one column, one type scale (DESIGN 2026-11-07)
   Spec: docs/board/audit/2026-11-07_DESIGN_13f_layout_type.md

   Linked LAST by templates/13f-{index,fund,security}.html, and every rule is
   scoped under the page class `.f13-page` on their <body>. The shared sheets
   these pages also load (stock-page.css, bdc-detail-extras.css,
   bdc-index-extras.css) serve six other page families and are not touched.

   OWNER 2026-11-05: "changes in widths and text sizes without consistency";
   measured (13B-F1..F8): four column grids, 17-31 text styles and 16 sizes a
   page (11.56..52px), H2 in two treatments, H3 in three.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. The role scale ──────────────────────────────────────────────────────
   The type roles, the prose measure and the rhythm steps are tokens.css :root
   tokens since the OWNER ruling of 2026-11-07 (one shared block for 13F, BDC,
   LEARN and the site chrome; the measure there is 54ch). This sheet consumes
   them and declares only the 13F column geometry below. */
.f13-page {
  --column-max: var(--page-max-width);
  --column-gutter: var(--space-5);
  --rule-accent: var(--gold-link);
}

/* ── 1. One content column ──────────────────────────────────────────────────
   main loses the stock page's 32px desktop padding (the 207/856 grid); every
   top-level block is the 960 container with 20px gutters (content 920). */
.f13-page main,
.f13-page .sp-main,
.f13-page .sp-main.sp-main--doc {
  display: block;
  max-width: none;
  /* No top padding: the breadcrumb sits at the same y on all three pages
     (the index's is outside <main>). */
  padding: 0;
}
.f13-page .sp-breadcrumb,
.f13-page .si-hero,
.f13-page .bd-hero,
.f13-page .si-controls,
.f13-page .si-content,
.f13-page .bd-content,
.f13-page main > .bd-section,
.f13-page main > .si-footer-note {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--column-max);
  margin-inline: auto;
  padding-inline: var(--column-gutter);
}
/* Bands stay full-bleed grounds; their CONTENT sits on the column. The shared
   breakout (margin-inline: calc(50% - 50vw)) and this padding are both centred
   on the container, so the edges agree with or without a classic scrollbar. */
.f13-page .bd-band {
  padding-inline: max(var(--column-gutter), calc(50vw - var(--column-max) / 2 + var(--column-gutter)));
  /* Rhythm: the ground reaches HALF the section gap past its content, so
     content-to-content stays one --rhythm-section (40) across a band edge:
     the previous section's 40px margin collapses with this -20px one. Two
     adjacent bands meet edge to edge and read as one ground. */
  padding-block: var(--space-5);
  margin-block: calc(-1 * var(--space-5)) var(--space-5);
}
.f13-page .bd-band:not(:has(*)) { display: none; }
.f13-page .bd-content > .bd-band:last-child { margin-bottom: 0; }
/* The breadcrumb is chrome above the column, on the same left edge. */
.f13-page .sp-breadcrumb {
  font-family: var(--font-ui);
  font-size: var(--type-small);
  padding-block: var(--space-2);
  border-bottom: 0;
  background: transparent;
  flex-wrap: wrap;
}
.f13-page .sp-breadcrumb-current { font-weight: 400; }
.f13-page .sp-breadcrumb a { display: inline-flex; align-items: center; min-height: var(--space-6); }

/* ── 2. Vertical rhythm ─────────────────────────────────────────────────── */
.f13-page .bd-section,
.f13-page section.bd-qoq {
  margin: 0 0 var(--rhythm-section);
}
.f13-page .bd-band > .bd-section:last-child,
.f13-page .bd-band > section.bd-qoq:last-child,
.f13-page .bd-band > .si-footer-note:last-child { margin-bottom: 0; }
.f13-page .si-content { padding-bottom: 0; }
.f13-page .bd-content { padding-bottom: 0; }

/* ── 3. Headings ────────────────────────────────────────────────────────── */
.f13-page .si-hero,
.f13-page .bd-hero { padding-block: var(--space-10) var(--rhythm-section); }
.f13-page .si-hero h1,
.f13-page .bd-hero h1 {
  font-family: var(--font-brand);
  font-size: var(--type-title);
  font-weight: 500;
  line-height: 1.06;
  margin: 0 0 var(--space-4);
}
.f13-page .si-hero-eyebrow,
.f13-page .bd-hero-ticker {
  font-family: var(--font-data);
  font-size: var(--type-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-link);
  margin-bottom: var(--space-4);
}
.f13-page .si-hero-rule,
.f13-page .bd-hero-rule { margin: 0 0 var(--space-5); }
.f13-page .si-hero-sub,
.f13-page .bd-hero-sub {
  font-family: var(--font-brand);
  font-size: var(--type-lede);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--space-4);
}
.f13-page .bd-hero-meta {
  font-family: var(--font-data);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-body);
  margin: 0 0 var(--space-3);
}
.f13-page .si-hero-sub a,
.f13-page .bd-hero-sub a { font-size: inherit; }

/* H2: one treatment. The change sections (.bd-qoq) were 24 bold; the rest
   20.8 regular. Now every section heading leads with the same rule. */
.f13-page .bd-section > h2,
.f13-page section.bd-qoq > h2 {
  font-family: var(--font-brand);
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 var(--rhythm-head);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.f13-page section.bd-qoq > h2 .bd-qoq-fresh { font-size: inherit; font-weight: inherit; }

/* H3: one treatment (was 18.72 bold, 16.8 medium, and 12 bold -- the 12px
   change-list heads were smaller than the rows under them). */
.f13-page .bd-section > h3,
.f13-page .bd-faq-item h3,
.f13-page .bd-qoq-col h3 {
  font-family: var(--font-brand);
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
  letter-spacing: 0;
  text-transform: none;
}
.f13-page .bd-section > h3:first-child,
.f13-page .bd-qoq-col h3 { margin-top: 0; }
.f13-page .bd-qoq-n {
  font-family: var(--font-data);
  font-size: var(--type-small);
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: var(--space-1);
}

/* ── 4. Body, small and notes ──────────────────────────────────────────── */
.f13-page .bdc-detail-explainer,
.f13-page .bdc-detail-explainer li,
.f13-page .bd-faq-item p,
.f13-page .bd-filer-meta dd {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--text-secondary);
}
.f13-page .bdc-detail-explainer,
.f13-page .bd-faq-item p { max-width: var(--measure-prose); }
.f13-page .bdc-detail-explainer { margin: 0 0 var(--rhythm-block); }
.f13-page ul.bdc-detail-explainer { padding-left: var(--space-5); }
/* FAQ answers carry .bdc-detail-explainer, so this one rule covers them. */
.f13-page .bdc-detail-explainer strong { color: var(--text-primary); font-weight: 700; }
.f13-page .bd-faq-item { padding: var(--space-5) 0; }
.f13-page .bd-faq-item p { margin: 0; }
.f13-page .bd-faq-item h3 { margin-top: 0; }
.f13-page .bd-faq-item:first-of-type { padding-top: 0; }

.f13-page .bd-section-note,
.f13-page .bd-section > .bd-quality-note,
.f13-page section.bd-qoq > .bd-quality-note,
.f13-page .si-footer-note {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: left;
  color: var(--text-secondary);
  max-width: var(--measure-prose);
  margin: 0 0 var(--rhythm-block);
}
.f13-page .si-footer-note { padding-block: 0 var(--rhythm-section); }
/* CHAOS 2026-11-07: the index's coverage footnote sits straight in <main>, so
   the one-column rule above (higher specificity) gave it the 960 container and
   it set 152 characters a line. Cap the box at the measure plus its gutters and
   hold its left edge on the column: the left margin is the same half of
   (viewport - column) that margin-inline:auto gives every other block. */
.f13-page main > .si-footer-note {
  max-width: calc(var(--measure-prose) + 2 * var(--column-gutter));
  margin-inline: max(0%, calc((100% - var(--column-max)) / 2)) auto;
}
.f13-page .bd-band > .si-footer-note { padding-bottom: 0; }
.f13-page .bd-section-note strong { color: var(--text-primary); }

/* Filer profile: a two-column definition list on the column. */
.f13-page .bd-filer-meta {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--rhythm-block);
  align-items: baseline;
}
.f13-page .bd-filer-meta dt {
  font-family: var(--font-data);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-body);
}
.f13-page .bd-filer-meta dd { margin: 0; color: var(--text-primary); }

/* ── 5. The as-of and callout treatment ──────────────────────────────────
   One device: a left hairline rule in the brand gold, no box, no italics,
   left aligned. As-of notes are Small; findings are Body. */
.f13-page .si-hero .bd-quality-note,
.f13-page .bd-hero .bd-quality-note,
.f13-page .bd-callout {
  font-family: var(--font-brand);
  font-style: normal;
  letter-spacing: 0;
  text-align: left;
  max-width: var(--measure-prose);
  padding: 0 0 0 var(--space-3);
  border: 0;
  border-left: 1px solid var(--rule-accent);
  border-radius: 0;
  background: transparent;
}
.f13-page .si-hero .bd-quality-note,
.f13-page .bd-hero .bd-quality-note,
.f13-page .bd-hero .bd-season-note {
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.f13-page .bd-callout {
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 var(--rhythm-block);
}
.f13-page .bd-hero .bd-cta-row { margin-top: var(--space-4); }

/* ── 6. Figures ─────────────────────────────────────────────────────────
   Hero and section stat values: one size, Geist Mono, left aligned in a
   ledger. The index's flex stats become the same ledger. */
.f13-page .si-hero .bi-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  margin: var(--space-6) 0 var(--space-5);
  border-top: 2px solid var(--text-primary);
  background: var(--bg-surface);
}
.f13-page .bi-stat,
.f13-page .bd-stats-ledger .bd-stat {
  text-align: left;
  padding: var(--space-4);
}
.f13-page .bi-stat + .bi-stat { border-left: 1px solid var(--border-subtle); }
.f13-page .bi-stat-value,
.f13-page .bd-stat-value {
  font-family: var(--font-data);
  font-size: var(--type-figure);
  font-weight: 600;
  font-variant-numeric: var(--tabular-nums);
  line-height: 1.2;
}
.f13-page .bi-stat-label,
.f13-page .bd-stat-label {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.4;
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.f13-page .bd-stat-note,
.f13-page .bd-pctile { font-size: var(--type-label); }
.f13-page .bd-hero .bd-stats { margin-top: var(--space-6); }

/* ── 7. Tables ──────────────────────────────────────────────────────────
   One density and one header for both table families (bd-table on the fund
   and security pages, bi-compare-table on the index). */
.f13-page .bd-table,
.f13-page .bi-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.4;
}
.f13-page .bd-table th,
.f13-page .bi-compare-table th {
  font-family: var(--font-ui);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  white-space: nowrap;
  vertical-align: bottom;
}
.f13-page .bd-table td,
.f13-page .bi-compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.f13-page .bd-table .bd-num,
.f13-page .bi-compare-table .bi-num {
  font-family: var(--font-data);
  font-variant-numeric: var(--tabular-nums);
  text-align: right;
  white-space: nowrap;
}
.f13-page .bd-table th.bd-num,
.f13-page .bi-compare-table th.bi-num { font-family: var(--font-ui); }
/* Long fund names wrap inside their cell instead of widening the table past
   the column at desktop (the index table measured 933 in a 918 box). */
.f13-page .bi-compare-table td:nth-child(2) { white-space: normal; }
.f13-page .bd-table a,
.f13-page .bi-compare-table a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-weight: 600;
}
.f13-page .bd-qoq-sub {
  display: block;
  font-family: var(--font-brand);
  font-size: var(--type-label);
  color: var(--text-secondary);
}
.f13-page .bd-chip {
  font-family: var(--font-data);
  font-size: var(--type-label);
  letter-spacing: 0.04em;
}
.f13-page .bi-compare-wrap { border-radius: 0; }

/* ── 8. Change lists (.bd-qoq-grid): the column count follows the item
   count, so no column sits alone on a row (13B-F7: 4 lists in 3 columns). */
.f13-page .bd-qoq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  margin-top: var(--rhythm-block);
}
.f13-page .bd-qoq-grid:has(> .bd-qoq-col:only-child) { grid-template-columns: minmax(0, 1fr); }
.f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(3):last-child),
.f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(5):last-child),
.f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* CHAOS 2026-11-07: a token with no space in it (a long issuer or fund name,
   measured with a 45-character one) widened the page at 375 to 487px, cut off
   by the body's overflow clip. Prose breaks it at the line; a change-list row
   is a flex container whose text is an anonymous item sized by min-content,
   which only `anywhere` lowers. */
.f13-page main { overflow-wrap: break-word; }
.f13-page .bd-qoq-col li {
  overflow-wrap: anywhere;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--space-8);
  padding: var(--space-1) 0;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-subtle);
}
.f13-page .bd-qoq-col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-data);
  font-weight: 600;
}
.f13-page .bd-qoq-fv {
  font-family: var(--font-data);
  font-variant-numeric: var(--tabular-nums);
  text-align: right;
  color: var(--text-secondary);
}
/* The fund page's tenure list (ul.bd-qoq in a section) reads as body copy,
   its markers inside the column. */
.f13-page .bd-section > ul.bd-qoq {
  font-size: var(--type-body);
  line-height: 1.6;
  max-width: var(--measure-prose);
  margin: 0 0 var(--rhythm-block);
  padding-left: var(--space-5);
}
.f13-page .bd-section > .bd-stats-ledger { margin: var(--space-3) 0 var(--rhythm-block); }
.f13-page .bd-trend-legend { font-size: var(--type-label); }

/* ── 9. Cards: kicker/meta (Label) -> title (Body 600) -> body (Small). */
.f13-page .si-ticker-grid,
.f13-page .bd-lesson-grid,
.f13-page .bd-peer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: stretch;
}
.f13-page .bd-peer-grid:has(> :nth-child(4):last-child),
.f13-page .bd-peer-grid:has(> :nth-child(7):last-child),
.f13-page .bd-peer-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f13-page .bd-peer-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ds-ok-selector: no new name -- the existing BDC lesson and peer cards
   (exempted at their definition, bdc-detail-extras.css), restyled to the
   13F card hierarchy on these three pages only. */
.f13-page .bi-card,
.f13-page .bd-lesson-card,
.f13-page .bd-peer-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-4);
  border-radius: 2px;
}
.f13-page .bi-card-name,
.f13-page .bd-lesson-title,
.f13-page .bd-peer-name {
  font-family: var(--font-brand);
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  white-space: normal;
  overflow: visible;
}
.f13-page .bd-lesson-title { color: var(--gold-link); }
/* The featured card's first meta line carries figures (label); the second is
   the description (small body). */
.f13-page .bi-card > .bi-card-meta {
  font-family: var(--font-data);
  font-size: var(--type-label);
  letter-spacing: 0.02em;
  color: var(--text-muted-body);
  gap: var(--space-2);
}
.f13-page .bi-card > .bi-card-meta + .bi-card-meta,
.f13-page .bd-lesson-desc {
  font-family: var(--font-brand);
  font-size: var(--type-small);
  font-style: normal;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-secondary);
}
.f13-page .bd-lesson-kicker,
.f13-page .bd-peer-holdings {
  font-family: var(--font-data);
  font-size: var(--type-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-body);
}
.f13-page .bd-peer-top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.f13-page .bd-peer-aum {
  font-family: var(--font-data);
  font-size: var(--type-small);
  font-variant-numeric: var(--tabular-nums);
  color: var(--gold-link);
}
.f13-page .bd-peer-holdings { margin-top: auto; }

/* ── 10. Directory lists and the filter ─────────────────────────────── */
.f13-page .si-sec-index { gap: var(--space-2); }
.f13-page .si-sec-index a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-8);
  padding: 0 var(--space-2-5);
  font-family: var(--font-data);
  font-size: var(--type-small);
  border-radius: 0;
  /* CHAOS 2026-11-07: the shared pill colour (--oxford-blue-vivid #3d79b8 on
     --bg-surface) is 3.89:1 in the default dark theme, under AA for 14px text,
     on all 300 directory links. --text-link is the theme-aware link ink
     (dark #66aaff; light = --oxford-blue-bright, the shared light override). */
  color: var(--text-link);
}
.f13-page .si-filer-list a { font-family: var(--font-brand); }
.f13-page .si-controls { margin-bottom: var(--rhythm-section); }
.f13-page .si-controls { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.f13-page .si-search { box-sizing: border-box; width: 100%; flex: 0 0 auto; font-size: var(--type-body); }
.f13-page .si-filter-hint {
  width: 100%;
  margin: var(--space-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--text-secondary);
}
.f13-page .si-filter-hint a,
.f13-page .si-empty a { font-weight: 600; }
.f13-page .si-empty {
  padding: var(--space-6) 0;
  text-align: left;
  font-family: var(--font-brand);
  font-size: var(--type-body);
  color: var(--text-secondary);
}
.f13-page .si-filter-hit[hidden],
.f13-page .si-empty[hidden] { display: none; }
.f13-page .si-filter-hit {
  margin: var(--space-2) 0 0;
  font-family: var(--font-brand);
  font-size: var(--type-small);
  color: var(--text-primary);
}
/* The status line stays in the accessibility tree once the script runs (a
   live region added or unhidden at the moment it speaks is often not read);
   empty, it takes no space. */
.f13-page .si-filter-hit:empty { margin: 0; }

/* The last block of a section owns no bottom margin: the section's own 40px
   is the only gap below it. CHAOS 2026-11-07: moved here, after every rule
   that sets a child's bottom margin. Up in section 2 it lost on source order
   to the note rule of equal specificity, so a section ending in an as-of note
   (Notable moves, with its left-out note) measured 56 to the next section,
   not 40. The ul:last-child line outranks `.bd-section > ul.bd-qoq`. */
.f13-page .bd-section > :last-child,
.f13-page .bd-section > ul:last-child,
.f13-page section.bd-qoq > :last-child { margin-bottom: 0; }

/* ── 11. Signup wedge ─────────────────────────────────────────────────── */
.f13-page .bd-signup-wedge { padding: var(--space-6); border-radius: 2px; margin: 0 0 var(--rhythm-section); }
.f13-page .bd-signup-lede { font-size: var(--type-body); line-height: 1.5; color: var(--text-primary); }
.f13-page .bd-cta,
.f13-page .bd-cta-secondary { font-family: var(--font-ui); font-size: var(--type-small); font-weight: 500; }

/* ── 12. Phones and tablets ───────────────────────────────────────────── */
@media (max-width: 719px) {
  .f13-page .si-hero h1,
  .f13-page .bd-hero h1 { font-size: var(--type-title-sm); }
  .f13-page .si-hero,
  .f13-page .bd-hero { padding-block: var(--space-6) var(--space-6); }
  .f13-page .si-ticker-grid,
  .f13-page .bd-lesson-grid,
  .f13-page .bd-peer-grid,
  .f13-page .bd-peer-grid:has(> :nth-child(4):last-child),
  .f13-page .bd-peer-grid:has(> :nth-child(2):last-child),
  .f13-page .bd-qoq-grid,
  .f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(3):last-child),
  .f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(5):last-child),
  .f13-page .bd-qoq-grid:has(> .bd-qoq-col:nth-child(6):last-child) { grid-template-columns: minmax(0, 1fr); }
  /* Index ledger: two up, an odd last tile spans the row (the shared ledger's rule). */
  .f13-page .si-hero .bi-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f13-page .bi-stat + .bi-stat { border-left: 0; }
  .f13-page .bi-stat:nth-child(2n) { border-left: 1px solid var(--border-subtle); }
  .f13-page .bi-stat:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
  .f13-page .bi-stat:nth-child(2n+1):last-child { grid-column: 1 / -1; }
  .f13-page .bd-filer-meta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .f13-page .bd-filer-meta dd { margin-bottom: var(--space-2); }
  /* Tables: one phone density. The shared sheet scrolled the WHOLE section
     at <= 640 (an unnamed, unfocusable scroller); the named wrapper is the
     scroller now, and the identifying column stays pinned. */
  .f13-page .bd-section:has(> .bd-table),
  .f13-page .bd-section:has(> .bd-table-wrap) { overflow-x: visible; }
  .f13-page .bd-table th,
  .f13-page .bd-table td,
  .f13-page .bi-compare-table th,
  .f13-page .bi-compare-table td { padding: var(--space-2); }
  .f13-page .bd-table,
  .f13-page .bi-compare-table { font-size: var(--type-small); }
  .f13-page .bd-table-wrap[role="region"],
  .f13-page .bi-compare-wrap[role="region"] { overflow-x: auto; }
  .f13-page [role="region"] .bd-table th:first-child,
  .f13-page [role="region"] .bd-table td:first-child,
  .f13-page [role="region"] .bi-compare-table th:first-child,
  .f13-page [role="region"] .bi-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: var(--z-base);
    background: var(--bg-base);
  }
  .f13-page [role="region"] th:first-child { background: var(--bg-elevated); }
  /* Ranked tables (#, name, ...): the rank and the name are both pinned. */
  .f13-page [role="region"] .f13-ranked th:first-child,
  .f13-page [role="region"] .f13-ranked td:first-child {
    width: var(--space-8);
    min-width: var(--space-8);
    max-width: var(--space-8);
    box-sizing: border-box;
  }
  .f13-page [role="region"] .f13-ranked th:nth-child(2),
  .f13-page [role="region"] .f13-ranked td:nth-child(2) {
    position: sticky;
    left: var(--space-8);
    z-index: var(--z-base);
    background: var(--bg-base);
  }
  .f13-page [role="region"] .f13-ranked th:nth-child(2) { background: var(--bg-elevated); }
  /* A hairline on the pinned column's right edge, drawn as a 1px gradient: a
     collapsed-table border does not travel with a sticky cell. */
  .f13-page [role="region"] .f13-ranked td:nth-child(2),
  .f13-page [role="region"] .bd-table:not(.f13-ranked) td:first-child {
    background-image: linear-gradient(to left, var(--border-default) 1px, transparent 1px);
  }
  /* The pinned name column wraps rather than widening the table. CHAOS
     2026-11-07: a name with no space in it (a 60-character token) overflowed
     its 11rem cell and painted over the columns sliding under it (measured,
     496px of text in a 176px cell). `anywhere` lets it break; `break-word`
     does not in a table cell, whose width comes from its min-content. The
     9rem floor keeps ordinary words whole. */
  .f13-page [role="region"] .f13-ranked td:nth-child(2),
  .f13-page [role="region"] .bd-table:not(.f13-ranked) td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 9rem;
    max-width: 11rem;
  }
}