/* Plectis Atlas: one stylesheet for every page.
   Palette adapted from Will Cook's Plectis maths site (4 October 2026): one flat
   ground, cream paper by day and violet-black by night, two mature inks (brick
   and steel), each moved only in lightness. Brick marks what the papers state and
   the citations between them; steel marks Lean. No glows, washes or gradients
   behind text. */

/* Self-hosted type, copied from the Plectis site (ai_workflow
   sites/microcosm/assets/fonts at 4b1ebab611): subsets of STIX Two Text and
   Source Sans 3 under the SIL Open Font License, renamed as the Reserved Font
   Name rules require, with metric-matched fallbacks so nothing shifts as they
   load. No third-party font requests. */
@font-face { font-family: "Plectis Serif"; src: url("fonts/plectis-serif.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plectis Serif"; src: url("fonts/plectis-serif-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Plectis Sans"; src: url("fonts/plectis-sans.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Plectis Sans"; src: url("fonts/plectis-sans-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Plectis Math"; src: url("fonts/plectis-math.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+2190-21FF, U+2200-2211, U+2213-22FF; }
@font-face { font-family: "Plectis Math"; src: url("fonts/plectis-math.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+2190-21FF, U+2200-2211, U+2213-22FF; }
@font-face { font-family: "Plectis Math"; src: url("fonts/plectis-math-extra.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+2300-23FF, U+25A0-25FF, U+27C0-27FF, U+2980-29FF, U+2A00-2AFF; }
@font-face { font-family: "Plectis Math"; src: url("fonts/plectis-math-extra.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+2300-23FF, U+25A0-25FF, U+27C0-27FF, U+2980-29FF, U+2A00-2AFF; }
@font-face { font-family: "Plectis MathML"; src: url("fonts/plectis-mathml.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plectis Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"); size-adjust: 105.63%; ascent-override: 72.14%; descent-override: 22.53%; line-gap-override: 23.67%; }
@font-face { font-family: "Plectis Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 94.72%; ascent-override: 108.11%; descent-override: 42.23%; line-gap-override: 0%; }
math { font-family: "Plectis MathML", math; }
/* KaTeX paints its HTML tree. Its clipped, accessible MathML does not need a
   second mathematical font; native MathML elsewhere keeps the font above. */
.katex-mathml math { font-family: inherit; }

:root {
  --page: #f8f0e2;
  --surface: #fffdf7;
  --sunk: #f1e7d4;
  --ink: #191520;
  --ink-soft: #342d3d;
  --muted: #544d5d;
  --faint: #6d6473;
  --rule: #eaddc9;
  --rule-strong: #d9c7ae;
  --rule-control: #96836a;
  --brick: #9a322c;
  --steel: #2a5982;
  --brick-text: #9a322c;
  --steel-text: #29527b;
  --steel-strong: #1b3f65;
  --accent: var(--steel-text);
  --link-ext: #8f6212;
  --code-bg: #f4ecdc;
  --select: #f6e2b2;
  --on-ink: #fffdf7;
  --tile-line: rgba(25, 21, 32, 0.16);
  --tile-hover: #191520;
  --edge-cites: #9a322c;
  --edge-cited: #2a5982;
  --steel-fill: #2a5982;
  --brick-fill: #9a322c;

  --serif: "Plectis Serif", "Plectis Math", "Plectis Serif Fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Plectis Sans", "Plectis Math", "Plectis Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --fs-micro: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-meta: 0.875rem;
  --fs-body: 0.9375rem;
  --fs-base: 1rem;
  --fs-lede: 1.125rem;
  --lh: 1.6;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --frame: min(1600px, calc(100% - 48px));
  --top-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  /* Motion (DESIGN.md "Motion and hover"): pointing and pressing answer in --t-hover,
     a change of state in --t-state, an opening panel in --t-open. */
  --t-hover: 120ms;
  --t-state: 180ms;
  --t-open: 240ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #1c1526;
    --surface: #272132;
    --sunk: #2f2839;
    --ink: #f2e6d4;
    --ink-soft: #ddcdbb;
    --muted: #bcb8c6;
    --faint: #a6a2b1;
    --rule: #363040;
    --rule-strong: #484251;
    --rule-control: #757080;
    --brick: #b84e45;
    --steel: #4d7fa9;
    --brick-text: #e18a79;
    --steel-text: #97c1df;
    --steel-strong: #bdd8ec;
    --link-ext: #e6b264;
    --code-bg: #221c2c;
    --select: #58411b;
    --on-ink: #1c1526;
    --tile-line: rgba(242, 230, 212, 0.13);
    --tile-hover: #f2e6d4;
    --edge-cites: #e18a79;
    --edge-cited: #97c1df;
    --steel-fill: #3e6890;
    --brick-fill: #a3443c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #1c1526;
  --surface: #272132;
  --sunk: #2f2839;
  --ink: #f2e6d4;
  --ink-soft: #ddcdbb;
  --muted: #bcb8c6;
  --faint: #a6a2b1;
  --rule: #363040;
  --rule-strong: #484251;
  --rule-control: #757080;
  --brick: #b84e45;
  --steel: #4d7fa9;
  --brick-text: #e18a79;
  --steel-text: #97c1df;
  --steel-strong: #bdd8ec;
  --link-ext: #e6b264;
  --code-bg: #221c2c;
  --select: #58411b;
  --on-ink: #1c1526;
  --tile-line: rgba(242, 230, 212, 0.13);
  --tile-hover: #f2e6d4;
  --edge-cites: #e18a79;
  --edge-cited: #97c1df;
  --steel-fill: #3e6890;
  --brick-fill: #a3443c;
  color-scheme: dark;
}

/* Tile fills, by meaning. Steel is Lean; brick is citation and exposition. */
:root {
  --t-none: var(--surface);
  --t-main: var(--steel-fill);
  --t-sup: color-mix(in oklab, var(--steel) 42%, var(--surface));
  --t-s1: color-mix(in oklab, var(--steel) 28%, var(--surface));
  --t-s2: color-mix(in oklab, var(--steel) 58%, var(--surface));
  --t-s3: var(--steel-fill);
  --t-r1: color-mix(in oklab, var(--brick) 30%, var(--surface));
  --t-r2: color-mix(in oklab, var(--brick) 60%, var(--surface));
  --t-r3: var(--brick-fill);
  --t-x1: color-mix(in oklab, var(--brick) 40%, var(--surface));
  --t-x2: var(--brick-fill);
  --hatch: color-mix(in oklab, var(--ink) 30%, var(--surface));
  --hatch-steel: color-mix(in oklab, var(--steel) 75%, var(--surface));
}
/* By night the light tints sit closer to the ground, so they take more ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --t-sup: color-mix(in oklab, var(--steel) 56%, var(--surface)); --t-s1: color-mix(in oklab, var(--steel) 38%, var(--surface)); --t-r1: color-mix(in oklab, var(--brick) 40%, var(--surface)); }
}
:root[data-theme="dark"] { --t-sup: color-mix(in oklab, var(--steel) 56%, var(--surface)); --t-s1: color-mix(in oklab, var(--steel) 38%, var(--surface)); --t-r1: color-mix(in oklab, var(--brick) 40%, var(--surface)); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  font-kerning: normal;
}
:root[data-theme="dark"] body { line-height: 1.64; }
::selection { background: var(--select); }
img, svg { display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--steel-strong); text-decoration: underline; text-underline-offset: 0.18em; }
a.ext::after { content: "\2009\2197"; color: var(--link-ext); font-family: var(--sans); font-size: 0.86em; white-space: nowrap; }
/* Long file paths and identifiers in running text wrap on a phone instead of widening the page. */
p a, li a, .phead a, p code, li code { overflow-wrap: anywhere; }
.prose a, .lede a, .intro a, p > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
.btn, .btn:hover, .nav a, .brand, .trail a, .leanc__title a, .ms__title a, .rel__title, .work__h a, .vocab a, .idx a, .nums a, .tbl a, .chip, .seg__b { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd { font-family: var(--mono); font-size: 0.88em; }
:where(a, button, input, summary, [tabindex]):where(:focus-visible) { outline: 2px solid var(--steel-text); outline-offset: 2px; border-radius: 3px; }
main:focus { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--ink); color: var(--page); padding: 8px 12px; border-radius: var(--r-sm); }
.skip:focus { top: 8px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.count { font-family: var(--sans); font-size: 0.8em; font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; margin-left: 0.25em; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0 0 0.8em; text-wrap: pretty; }

.frame { width: var(--frame); margin-inline: auto; }

/* ---- Header ----------------------------------------------------------- */
.top { border-bottom: 1px solid var(--rule); background: var(--page); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: var(--top-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--serif); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.mark { width: 22px; height: 22px; flex: none; }
.mark rect { stroke: var(--page); stroke-width: 0.8; }
.mk-a { fill: var(--brick); }
.mk-b { fill: var(--steel); }
.mk-c { fill: color-mix(in oklab, var(--steel) 40%, var(--surface)); }
.mk-d { fill: color-mix(in oklab, var(--brick) 40%, var(--surface)); }
.nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; font-size: var(--fs-body); line-height: 1.4; }
.nav a:hover { color: var(--ink); background: var(--sunk); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--sunk); font-weight: 600; }
.top__tools { display: flex; align-items: center; gap: 10px; }
.search-open { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 10px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); font-size: var(--fs-meta); cursor: pointer; }
.search-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.search-open kbd { font-size: 0.75rem; border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0 5px; color: var(--faint); }
.search-open:hover { color: var(--ink); }
.theme-toggle { position: relative; width: 46px; height: 26px; border-radius: 999px; border: 1px solid var(--rule-control); background: var(--sunk); cursor: pointer; padding: 0; }
.theme-toggle__thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform 160ms var(--ease-move); }
:root[data-theme="dark"] .theme-toggle__thumb { transform: translateX(20px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__thumb { transform: translateX(20px); } }
.no-transitions, .no-transitions * { transition: none !important; }
/* Pointing previews and pressing commits; both answer at once, in colour and border
   only, so no reading text moves. The theme switch turns these off for its two frames. */
a, .btn, .nav a, .seg__b, .chip, .trail a, .idx a, .nums a { transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out),
  border-color var(--t-hover) var(--ease-out), text-decoration-color var(--t-hover) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Search dialog ---------------------------------------------------- */
/* Statement Map's exact-word search (atlas.js). Results grouped by kind, each with its
   count; each family says what it holds in words. */
.search { width: min(720px, calc(100% - 24px)); max-height: min(78vh, 760px); margin: 9vh auto auto; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.22); overflow: hidden; }
.search[open] { display: flex; flex-direction: column; }
.search::backdrop { background: rgba(20, 14, 28, 0.45); }
.search__form { padding: 14px 16px 10px; border-bottom: 1px solid var(--rule); }
.search__label { display: block; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.search__bar { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule-control); border-radius: var(--r-md); background: var(--page); padding: 0 6px 0 12px; }
.search__bar:focus-within { outline: 2px solid var(--steel-text); outline-offset: 1px; }
.search__bar svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.search__input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 1.0625rem; outline: none; }
.search__input::placeholder { color: var(--faint); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__close { flex: none; min-height: 30px; padding: 2px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); font-size: var(--fs-small); cursor: pointer; }
.search__close:hover { color: var(--ink); border-color: var(--rule-control); }
.search__help { margin: 8px 2px 0; font-size: var(--fs-small); color: var(--muted); max-width: 64ch; line-height: 1.45; }
.search__status { margin: 0; padding: 10px 18px 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.search__status:empty { display: none; }
.search[data-state="empty"] .search__status, .search[data-state="failed"] .search__status { padding-bottom: 14px; }
.search__results { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 8px 8px; }
.search__results:empty { display: none; }
.search[aria-busy="true"] .search__results { opacity: 0.6; }
.search__keys { margin: 0; padding: 8px 18px; border-top: 1px solid var(--rule); font-size: var(--fs-micro); color: var(--faint); }
.search__keys kbd { font-size: 0.72rem; border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0 4px; color: var(--muted); background: var(--page); }
.sr-group { padding: 8px 0 4px; }
.sr-group + .sr-group { border-top: 1px solid var(--rule); }
.sr-group__h { display: flex; align-items: baseline; gap: 2px; margin: 0 0 2px; padding: 0 10px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.sr { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; font-size: var(--fs-body); }
.sr:hover, .sr[aria-selected="true"] { background: var(--sunk); text-decoration: none; color: var(--ink); }
.sr[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--steel-text); }
.sr__t { display: grid; min-width: 0; line-height: 1.35; }
.sr__name { font-family: var(--serif); font-size: 1rem; overflow-wrap: anywhere; }
.sr__code { font-family: var(--mono); font-size: 0.86rem; color: var(--steel-text); }
code.sr__name { font-size: 0.86rem; }
.sr__k { font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.sr--more { color: var(--steel-text); font-weight: 600; font-size: var(--fs-meta); min-height: 32px; }
.sr-note { margin: 6px 10px; font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 640px) {
  .search { width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .search__keys { display: none; }
}

/* ---- Buttons ---------------------------------------------------------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; align-items: center; }
.btn { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 16px; border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; border: 1px solid transparent; cursor: pointer; background: none; }
.btn--primary { background: var(--ink); color: var(--page); }
.btn--primary:hover { background: var(--ink-soft); color: var(--page); }
.btn--ghost { border-color: var(--rule-control); color: var(--ink); background: var(--surface); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--quiet { color: var(--muted); padding-inline: 6px; }
.btn--quiet:hover { color: var(--ink); }
.btn--small { min-height: 28px; padding: 3px 10px; font-size: var(--fs-small); border: 1px solid var(--rule-control); color: var(--ink); background: var(--surface); }
.btn.ext::after { color: var(--link-ext); }
.btn--primary.ext::after { color: inherit; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) { .btn:active { transform: scale(0.97); transition: transform 120ms var(--ease-out); } }

/* ---- Page skeleton ---------------------------------------------------- */
.page { padding-block: 28px 64px; }
.page--narrow { width: min(820px, calc(100% - 48px)); }
.trail { display: block; font-size: var(--fs-meta); line-height: 1.55; color: var(--muted); margin-bottom: 18px; }
.trail a { color: var(--muted); }
.trail a:hover { color: var(--ink); }
.trail [aria-current] { color: var(--ink-soft); }
.trail__sep { color: var(--faint); margin-inline-end: 0.45em; }
/* The previous and next row under the breadcrumb (build_site.sibling_nav): the neighbouring
   family, Lean statement or paper by name, this page's place between them. One line on a
   wide screen; stacked on a phone. Names wrap rather than truncate, so nothing is hidden. */
.sib { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "prev pos next"; align-items: baseline; gap: 4px 20px; max-width: 64rem; margin: -6px 0 22px; padding-block: 8px; border-block: 1px solid var(--rule); font-size: var(--fs-meta); line-height: 1.45; color: var(--muted); }
.sib__pos { grid-area: pos; margin: 0; color: var(--faint); text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sib__a { display: inline-flex; align-items: baseline; gap: 0.45em; min-height: 24px; min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.sib__a--prev { grid-area: prev; justify-self: start; }
.sib__a--next { grid-area: next; justify-self: end; text-align: end; }
a.sib__a:hover { color: var(--ink); }
.sib__arr { flex: none; color: var(--faint); }
.sib__t { text-wrap: pretty; }
.sib__st { color: var(--faint); }
@media (max-width: 640px) {
  .sib { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pos" "prev" "next"; gap: 6px; }
  .sib__pos { text-align: start; white-space: normal; }
  .sib__a--next { justify-self: start; text-align: start; }
  span.sib__a { display: none; }
}
.phead { margin-bottom: 24px; max-width: 64rem; }
.phead__kicker { font-size: var(--fs-meta); color: var(--muted); margin: 0 0 6px; }
.phead__kicker code { color: var(--ink-soft); }
.phead__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.012em; margin-bottom: 12px; }
.phead__facts { color: var(--muted); font-size: var(--fs-body); }
/* A Lean page's source line (build_site.build_statement): the file as one typed link and
   the map as another, each wrapping as a whole unit, then the family number and the
   catalogue's word in the muted metadata voice. The file's full path is in the link's
   title and in the facts list lower down. */
.page--lean .phead__where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0; font-size: var(--fs-meta); line-height: 1.5; }
.page--lean .phead__where > a { overflow-wrap: normal; }
.page--lean .phead__src code { overflow-wrap: anywhere; font-size: 0.92em; color: inherit; }
.page--lean .phead__meta { margin: 0; color: var(--muted); max-width: 72ch; text-wrap: pretty; }
.lede { font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.55; max-width: 44em; color: var(--ink-soft); }
.intro { color: var(--muted); max-width: 42em; font-size: var(--fs-body); }
.band { padding-block: 36px 8px; border-top: 1px solid var(--rule); }
.band--tight { padding-block: 22px 4px; }
.band--card { padding-block: 4px 8px; }
.h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.25; margin-bottom: 10px; letter-spacing: -0.005em; }
.h3 { font-family: var(--serif); font-weight: 600; font-size: 1.125rem; line-height: 1.3; margin-bottom: 8px; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; }
@media (max-width: 860px) { .cols2 { grid-template-columns: minmax(0, 1fr); } }
.prose, .prose-page p { font-family: var(--serif); font-size: 1.0625rem; max-width: 37em; }

.quote { margin: 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--rule-strong); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); max-width: 38em; }
.quote--lead { font-size: 1.125rem; max-width: 36em; }
.quote footer { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); margin-top: 6px; }
.quote footer a { color: var(--muted); }
.note { border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: 12px 16px; margin: 12px 0; background: var(--surface); max-width: 52em; font-size: var(--fs-body); }
.note--warn { border-color: color-mix(in oklab, var(--brick) 55%, var(--rule)); }
.note__h { font-weight: 600; margin-bottom: 4px; }
.pill { display: inline-block; font-size: var(--fs-micro); font-weight: 600; padding: 1px 8px; border-radius: 999px; line-height: 1.6; white-space: nowrap; }
.pill--main { background: var(--steel-fill); color: #fffdf7; }
.pill--support { background: var(--t-sup); color: var(--ink); }

/* ---- Home: the atlas -------------------------------------------------- */
.main--home { }
.atlas { width: var(--frame); margin: 0 auto; display: grid; grid-template-columns: minmax(330px, 380px) minmax(0, 1fr); gap: 0 28px; height: calc(100vh - var(--top-h) - 1px); height: calc(100svh - var(--top-h) - 1px); min-height: 600px; max-height: 1100px; padding-block: 20px 14px; }
.atlas__panel > * { flex-shrink: 0; }
.atlas__panel { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.atlas__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 8px; }
.atlas__lede { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 0; }
.atlas__intro .actions { margin-top: 12px; }
.atlas__controls { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.msearch { position: relative; }
.msearch__input { width: 100%; height: 38px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); padding: 0 12px; font-size: var(--fs-body); }
.msearch__input::placeholder { color: var(--faint); }
.msearch__list { position: absolute; left: 0; right: 0; top: 42px; z-index: 5; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); max-height: 320px; overflow: auto; }
.msearch__list li { padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-body); line-height: 1.35; }
.msearch__list li .k { display: block; font-size: var(--fs-small); color: var(--muted); }
.msearch__list li[aria-selected="true"], .msearch__list li:hover { background: var(--sunk); }
.seg__label { display: block; font-size: var(--fs-small); color: var(--muted); margin-bottom: 4px; }
.seg__row { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--rule-control); border-radius: 17px; background: var(--surface); width: fit-content; max-width: 100%; }
.seg__b { border: 0; background: none; padding: 4px 11px; min-height: 28px; border-radius: 999px; font-size: var(--fs-meta); color: var(--ink-soft); cursor: pointer; transition: background-color 140ms var(--ease-out), color 140ms var(--ease-out); }
.seg__b:hover { color: var(--ink); }
.seg__b[aria-pressed="true"] { background: var(--ink); color: var(--page); font-weight: 600; }
.legend { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--ink-soft); }
.legend__row { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.legend__n { margin-left: auto; color: var(--faint); font-variant-numeric: tabular-nums; }
.legend__note { color: var(--muted); font-size: var(--fs-small); margin: 2px 0 0; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid var(--tile-line); }
.sw--none { background: var(--t-none); }
.sw--main { background: var(--t-main); }
.sw--sup { background: var(--t-sup); }
.sw--s0 { background: var(--t-none); box-shadow: inset 0 0 0 2px var(--steel); }
.sw--s1 { background: var(--t-s1); }
.sw--s2 { background: var(--t-s2); }
.sw--s3 { background: var(--t-s3); }
.sw--r1 { background: var(--t-r1); }
.sw--r2 { background: var(--t-r2); }
.sw--r3 { background: var(--t-r3); }
.sw--x0 { background: var(--t-none); box-shadow: inset 0 0 0 2px var(--brick); }
.sw--x1 { background: var(--t-x1); }
.sw--x2 { background: var(--t-x2); }
.sw.ring-steel { box-shadow: inset 0 0 0 2px var(--steel), inset 0 0 0 3px var(--surface); }
.sw.ring-brick { box-shadow: inset 0 0 0 1.5px var(--brick); }
.sw--hatch { background: repeating-linear-gradient(135deg, var(--t-none) 0 3px, var(--hatch) 3px 4.5px); }
.sw--hatch-steel { background: repeating-linear-gradient(45deg, var(--t-none) 0 2.5px, var(--hatch-steel) 2.5px 4px); }
.sw--line { width: 22px; height: 0; border: 0; border-top: 2px solid var(--edge-cites); border-radius: 0; }
.sw--line-b { width: 22px; height: 0; border: 0; border-top: 2px dashed var(--edge-cited); border-radius: 0; }

.where { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: var(--fs-meta); color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule); min-height: 34px; }
.where button { border: 0; background: none; padding: 2px 4px; min-height: 24px; color: var(--accent); cursor: pointer; font-size: inherit; border-radius: 4px; }
.where button:hover { text-decoration: underline; }
.where__cur { color: var(--ink); font-weight: 600; }
.where__sep { color: var(--faint); }

.card { border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface); padding: 16px 16px 14px; }
.card__kicker { font-size: var(--fs-small); color: var(--muted); margin: 0 0 4px; }
.card__title { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.25; margin-bottom: 6px; }
.card__fact { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 0; }
.card__ex { font-size: var(--fs-small); color: var(--brick-text); margin: 0 0 10px; }
.card h3 { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 12px 0 4px; }
.card ul { list-style: none; margin: 0; padding: 0; }
.card li { padding: 4px 0; border-top: 1px solid var(--rule); font-size: var(--fs-meta); line-height: 1.35; }
.card li:first-child { border-top: 0; }
.card li .k { display: block; color: var(--muted); font-size: var(--fs-small); }
.card li button.lnk { border: 0; padding: 0; background: none; color: var(--accent); cursor: pointer; text-align: left; font-size: inherit; line-height: inherit; }
.card li button.lnk:hover { text-decoration: underline; }
.card__none { color: var(--muted); font-size: var(--fs-meta); }
.card .actions { margin-top: 14px; }
.ms-date { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }

.atlas__stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.field { position: relative; flex: 1; min-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--page); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.field__noscript { padding: 24px; color: var(--muted); }
.caption__area { margin: 8px 0 0; font-size: var(--fs-small); color: var(--muted); }
.caption { margin: 2px 0 0; min-height: 2.9em; font-size: var(--fs-meta); color: var(--ink-soft); line-height: 1.45; }
.caption strong { font-family: var(--serif); font-weight: 600; font-size: 1rem; }

.reg { position: absolute; border: 1px solid var(--rule-strong); border-radius: 4px; transition: opacity 260ms var(--ease-out); }
.reg__label { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: baseline; gap: 6px; padding: 3px 7px 0; border: 0; background: none; color: var(--ink); text-align: left; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reg__label .count { margin-left: 0; font-weight: 500; }
.reg__label--two { white-space: normal; display: block; line-height: 16px; padding-top: 3px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.reg__label--vert { right: auto; bottom: 0; width: 20px; padding: 6px 0 0; writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; }
.reg__probe { position: absolute; visibility: hidden; pointer-events: none; left: 0; top: 0; right: auto; }
.reg__label--two .count { margin-left: 4px; }
.reg__label:hover { color: var(--steel-text); }
.reg.is-dim { opacity: 0.35; }
.reg.is-hidden { opacity: 0; pointer-events: none; }

.tile { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border: 0; border-radius: 3px; background: var(--fill, var(--t-none)); box-shadow: inset 0 0 0 1px var(--tile-line); cursor: pointer; transform-origin: 0 0; overflow: hidden; color: var(--ink); text-align: left; font: inherit; }
.tile:hover, .tile.is-hot { box-shadow: inset 0 0 0 2px var(--tile-hover); z-index: 2; }
.tile.is-sel { box-shadow: inset 0 0 0 2.5px var(--tile-hover), 0 0 0 2px var(--page); z-index: 3; }
.tile.is-dim { opacity: 0.18; }
.tile.is-hidden { opacity: 0; pointer-events: none; }
.tile.ring-steel { box-shadow: inset 0 0 0 2px var(--steel), inset 0 0 0 3px var(--surface); }
.tile.ring-brick { box-shadow: inset 0 0 0 1.5px var(--brick); }
/* A category ring stays visible under hover and selection: the hover or selection
   mark is drawn outside the tile, the category ring inside it. */
.tile.ring-steel:hover, .tile.ring-steel.is-hot { box-shadow: inset 0 0 0 2px var(--steel), inset 0 0 0 3px var(--surface), 0 0 0 2px var(--tile-hover); z-index: 2; }
.tile.ring-brick:hover, .tile.ring-brick.is-hot { box-shadow: inset 0 0 0 1.5px var(--brick), 0 0 0 2px var(--tile-hover); z-index: 2; }
.tile.ring-steel.is-sel { box-shadow: inset 0 0 0 2px var(--steel), inset 0 0 0 3px var(--surface), 0 0 0 2.5px var(--tile-hover), 0 0 0 4.5px var(--page); z-index: 3; }
.tile.ring-brick.is-sel { box-shadow: inset 0 0 0 1.5px var(--brick), 0 0 0 2.5px var(--tile-hover), 0 0 0 4.5px var(--page); z-index: 3; }
.tile:focus-visible { outline: 2px dashed var(--steel-text); outline-offset: 3px; z-index: 4; }
/* A family whose statements differ in scope class, or are not all classified. */
.tile.is-mixed::after, .sw--mixed::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 9px solid var(--ink-soft); border-left: 9px solid transparent; border-top-right-radius: 3px; }
.sw--mixed { position: relative; overflow: hidden; }
.sw--mixed::after { border-top-width: 7px; border-left-width: 7px; }
.tile__t { position: absolute; inset: 0; padding: 7px 8px 6px 9px; display: flex; flex-direction: column; gap: 3px; opacity: 0; transition: opacity 200ms var(--ease-out); pointer-events: none; }
.field.is-zoomed .tile__t { opacity: 1; }
.tile__title { font-family: var(--serif); font-size: 14px; line-height: 1.25; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 3); }
.tile__t--narrow { padding: 5px 5px 5px 6px; }
.tile__t--narrow .tile__title { font-size: 12.5px; line-height: 1.28; }
.tile__meta { font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: auto; }
.tile--ink .tile__title { color: #fffdf7; }
.tile--ink .tile__t--narrow { padding: 5px 5px 5px 6px; }
.tile--ink .tile__meta { color: rgba(255, 253, 247, 0.84); }
:root[data-theme="dark"] .tile--ink .tile__title { color: #fffaf2; }
.tile__mark { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.edges path { fill: none; stroke-width: 2; }
.edges .e-cites { stroke: var(--edge-cites); }
.edges .e-cited { stroke: var(--edge-cited); stroke-dasharray: 5 4; }
.edges circle { fill: var(--page); stroke-width: 2; }
.edges .n-cites { stroke: var(--edge-cites); }
.edges .n-cited { stroke: var(--edge-cited); }
.field.is-anim .tile { transition: transform 460ms var(--ease-move), opacity 300ms var(--ease-out); }
.field.is-anim .reg { transition: transform 460ms var(--ease-move), opacity 300ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .field.is-anim .tile, .field.is-anim .reg, .tile__t { transition: none !important; }
}

@media (max-width: 980px) {
  .atlas { grid-template-columns: minmax(0, 1fr); height: auto; max-height: none; min-height: 0; }
  .atlas__panel { overflow: visible; padding-right: 0; }
  .atlas__stage { height: 72vh; min-height: 460px; }
}

/* Home bands */
.nums { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.nums li { border-bottom: 1px solid var(--rule); }
.nums li:not(:nth-child(4n)) { border-right: 1px solid var(--rule); }
.nums a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 0; padding-left: 16px; color: var(--ink); height: 100%; }
.nums li:nth-child(4n+1) a { padding-left: 0; }
.nums a:hover { background: var(--sunk); }
.num__v { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
.num__l { font-size: var(--fs-meta); color: var(--muted); line-height: 1.35; }
@media (max-width: 860px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nums li { border-right: 0 !important; } .nums a { padding-left: 0 !important; } }
.idx__grid { columns: 3 300px; column-gap: 40px; margin-top: 12px; }
.idx__d { break-inside: avoid; margin-bottom: 22px; }
.idx__d ul { list-style: none; margin: 0; padding: 0; }
.idx__d li { font-family: var(--serif); font-size: 0.95rem; line-height: 1.35; padding: 3px 0; }
.idx__d a { color: var(--ink-soft); }
.idx__d a:hover { color: var(--steel-text); }

/* ---- Result (family) page -------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 44px; border-top: 1px solid var(--rule); padding-top: 30px; margin-top: 28px; }
.split__side .sticky { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding-bottom: 16px; scrollbar-width: thin; }
@media (max-width: 1080px) { .split { grid-template-columns: minmax(0, 1fr); } .split__side .sticky { position: static; max-height: none; } }
.ms { padding: 4px 0 26px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); }
.ms:last-child { border-bottom: 0; }
.ms__title { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin-bottom: 6px; }
.ms__title a { color: var(--ink); }
.ms__title a:hover { color: var(--steel-text); }
.ms__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-meta); color: var(--muted); align-items: baseline; }
.ms__status { color: var(--ink-soft); }
.pdflink { font-weight: 600; }
.ms__abstract { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); max-width: 42em; margin: 10px 0 8px; }
.ms__prev { font-size: var(--fs-meta); color: var(--muted); }
.ms__sub { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 18px 0 8px; }

.stmt { margin: 0 0 16px; padding: 14px 18px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--surface); scroll-margin-top: 16px; }
.stmt__head { font-family: var(--serif); font-size: 1.05rem; margin-bottom: 6px; }
.stmt__kind { font-weight: 700; color: var(--brick-text); }
.stmt__title { font-style: italic; color: var(--ink-soft); }
.stmt__body { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: anywhere; }
.stmt__body p { margin: 0 0 0.55em; }
.stmt__body em { font-style: italic; }
.m-d { margin: 0.55em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.m-d .katex-display { margin: 0; }
.m.m-fail, .m-d .m.m-fail { font-family: var(--mono); font-size: 0.85em; color: var(--ink-soft); background: var(--code-bg); border-radius: 3px; padding: 0 3px; white-space: pre-wrap; }
.m-d .m.m-fail { display: block; padding: 6px 8px; }
.tex-raw { font-family: var(--mono); font-size: 0.82em; color: var(--muted); }
.tex-fallback { font-family: var(--mono); font-size: 0.82em; background: var(--code-bg); padding: 8px 10px; border-radius: var(--r-sm); overflow-x: auto; white-space: pre-wrap; }
.tex-list { list-style: none; margin: 0.4em 0; padding: 0; }
.tex-list li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 4px; margin: 0.25em 0; }
.li-lab { text-align: right; padding-right: 6px; }
.li-body p:last-child { margin-bottom: 0; }
.tex-env { margin: 0.4em 0 0.4em 1em; }
.sc { font-variant: small-caps; }
.cite { color: var(--ink-soft); }
.cite a { color: var(--accent); }
.xref { font-family: var(--sans); font-size: 0.86em; color: var(--steel-text); border-bottom: 1px dotted currentColor; cursor: help; }
.fn { font-size: 0.9em; color: var(--muted); }
.stmt__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
.stmt__foot a { color: var(--muted); }
.stmt__foot a:hover { color: var(--ink); }
.texsrc { margin-left: auto; }
.texsrc summary { cursor: pointer; color: var(--steel-text); list-style: none; min-height: 24px; display: inline-flex; align-items: center; }
.texsrc summary::-webkit-details-marker { display: none; }
.texsrc summary::before { content: "TeX\2009"; display: none; }
.texsrc[open] { flex-basis: 100%; margin-left: 0; }
.texsrc__box { position: relative; margin-top: 6px; }
.texsrc__box pre { margin: 0; padding: 10px 12px; padding-right: 72px; background: var(--code-bg); border-radius: var(--r-sm); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; color: var(--ink-soft); max-height: 420px; overflow: auto; }
.copy { position: absolute; right: 6px; top: 6px; border: 1px solid var(--rule-control); background: var(--surface); color: var(--ink); border-radius: 5px; font-size: var(--fs-small); padding: 2px 9px; min-height: 26px; cursor: pointer; }
.card-tools .copy, .btn.copy { position: static; }
.card-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 12px; }
.card-tools .small { max-width: 44em; }

.leanc { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.leanc__title { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.leanc__title a { color: var(--ink); }
.leanc__title a:hover { color: var(--steel-text); }
.leanc__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-small); color: var(--muted); margin-bottom: 8px; }
.leanc__file { color: var(--ink-soft); font-size: 0.8rem; }
.leanc__note { font-size: var(--fs-small); color: var(--muted); margin: 8px 0 4px; line-height: 1.45; max-width: 36em; }
.leanc__go { font-size: var(--fs-meta); font-weight: 600; margin: 0; }

.lean { margin: 0; background: var(--code-bg); border: 1px solid var(--rule); border-radius: var(--r-md); padding: 10px 0; overflow-x: auto; font-size: 0.8rem; line-height: 1.55; tab-size: 2; }
.lean code { display: block; min-width: max-content; font-size: inherit; }
.lean .ln { display: block; padding: 0 14px 0 0; white-space: pre; }
.lean .ln::before { content: attr(data-n); display: inline-block; width: calc(5ch + 1em); padding-right: 1em; white-space: pre; text-align: right; color: var(--faint); opacity: 0.75; user-select: none; -webkit-user-select: none; }
.lean .ln--gap { color: var(--faint); padding-left: calc(5ch + 1em); }
.lean .ln--gap::before { content: none; }
.lean--file .ln:target { background: color-mix(in oklab, var(--steel) 18%, transparent); }
.lean .k { color: var(--steel-text); font-weight: 600; }
.lean .d { color: var(--ink); font-weight: 700; }
.lean .c { color: var(--faint); font-style: italic; }
.lean .c.d { font-weight: 400; color: var(--muted); }
.lean .s { color: var(--brick-text); }
.lean .a { color: var(--muted); }
.lean .n { color: var(--ink-soft); }
.lean .x { color: var(--brick-text); font-weight: 700; }
.lean--snippet { font-size: 0.78rem; }
.lean--snippet .ln, .lean--card .ln { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc(5ch + 1em); text-indent: calc(-5ch - 1em); padding-right: 10px; }
.lean--snippet .ln::before { text-indent: 0; }
.lean--snippet code { min-width: 0; }
.lean--file { font-size: 0.8rem; scroll-margin-top: 16px; }
.lean--file .ln { scroll-margin-top: 80px; }

.rel { list-style: none; margin: 0; padding: 0; }
.rel li { padding: 9px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; }
.rel__title { font-family: var(--serif); font-size: 1rem; color: var(--ink); line-height: 1.35; }
.rel__title:hover { color: var(--steel-text); }
.rel__meta, .rel__fam { font-size: var(--fs-small); color: var(--muted); }
.builds { margin: 8px 0; border-top: 1px solid var(--rule); padding-top: 8px; }
.builds summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); min-height: 28px; }
.refs { margin: 8px 0 12px; padding-left: 1.6em; font-size: var(--fs-meta); }
.ref { padding: 4px 0; line-height: 1.45; }
.ref__au { color: var(--ink); }
.ref__ti { font-family: var(--serif); font-style: italic; color: var(--ink); }
.ref__ve, .ref__tx { color: var(--ink-soft); }
.ref__use { display: block; color: var(--muted); font-size: var(--fs-small); }
.explain-box { margin-top: 36px; }
.explain-box__text { font-family: var(--serif); font-size: 1.0625rem; max-width: 38em; }

/* ---- Statement page -------------------------------------------------- */
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; margin: 0; }
.dl div { padding: 8px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.dl dt { font-size: var(--fs-small); color: var(--muted); }
.dl dd { margin: 2px 0 0; font-size: var(--fs-body); overflow-wrap: anywhere; }
.dl__note { display: block; font-size: var(--fs-small); color: var(--muted); }
.sbs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; margin-top: 12px; }
.sbs .sticky { position: sticky; top: 16px; }
@media (max-width: 980px) { .sbs { grid-template-columns: minmax(0, 1fr); } .sbs .sticky { position: static; max-height: none; } }
.sbs__paper { margin-bottom: 18px; }
.vocab { list-style: none; margin: 10px 0 0; padding: 0; columns: 2 380px; column-gap: 32px; }
.vocab li { break-inside: avoid; padding: 5px 0; border-top: 1px solid var(--rule); font-size: var(--fs-meta); }
.vocab a { color: var(--ink); display: block; }
.vocab a:hover code { color: var(--steel-text); }
.vocab__kind { color: var(--muted); display: inline-block; min-width: 8.5em; }
.vocab__ns { color: var(--faint); }
.vocab__line { color: var(--faint); font-size: var(--fs-small); }
.vocab__doc { display: block; color: var(--ink-soft); font-size: var(--fs-small); padding-left: 8.5em; }
@media (max-width: 600px) { .vocab__kind { min-width: 0; margin-right: 6px; } .vocab__doc { padding-left: 0; } }

/* Receipt card: designed at 1200 x 675 and scaled by container units. */
.rc-wrap { container-type: inline-size; width: 100%; max-width: 1100px; }
.rc { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: 3cqw 3.4cqw 2.4cqw; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.6cqw; overflow: hidden; color: var(--ink); }
.rc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title brand" "fam brand"; gap: 0.3cqw 2cqw; align-items: start; }
.rc__brand { grid-area: brand; display: flex; align-items: center; gap: 0.7cqw; font-family: var(--serif); font-size: 1.35cqw; color: var(--ink-soft); margin: 0; white-space: nowrap; }
.rc__brand .mark { width: 1.9cqw; height: 1.9cqw; }
.rc__title { grid-area: title; font-family: var(--serif); font-weight: 500; font-size: 2.55cqw; line-height: 1.15; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.rc__fam { grid-area: fam; font-size: 1.3cqw; color: var(--muted); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rc__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.6cqw; min-height: 0; }
.rc__paper, .rc__lean { display: flex; flex-direction: column; min-height: 0; }
.rc__lean { border-left: 1px solid var(--rule-strong); padding-left: 2.6cqw; }
.rc__label { font-size: 1.15cqw; font-weight: 700; margin: 0 0 0.5cqw; letter-spacing: 0.01em; }
.rc__paper .rc__label { color: var(--brick-text); }
.rc__lean .rc__label { color: var(--steel-text); }
.rc__kind { font-family: var(--serif); font-weight: 700; font-size: 1.45cqw; margin: 0 0 0.4cqw; }
.rc__sttitle { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.rc__fit { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.rc__body { font-family: var(--serif); font-size: calc(1.55cqw * var(--fit, 1)); line-height: 1.5; }
.rc__body p { margin: 0 0 0.45em; }
.rc__body .m-d { overflow: hidden; margin: 0.35em 0; }
.rc__fit.is-clipped::after { content: "\2026"; position: absolute; right: 0; bottom: 0; padding-left: 1em; background: var(--surface); font-family: var(--serif); font-size: 1.6cqw; color: var(--muted); }
.rc__src { font-size: 1.05cqw; color: var(--muted); margin: 0.6cqw 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rc__loc { font-size: 1.05cqw; color: var(--muted); margin: 0.2cqw 0 0; overflow-wrap: anywhere; }
.lean--card { border: 0; background: none; padding: 0; overflow: hidden; font-size: calc(1.12cqw * var(--fit, 1)); line-height: 1.5; }
.lean--card .ln { white-space: pre-wrap; padding-left: calc(5ch + 0.6em); text-indent: calc(-5ch - 0.6em); padding-right: 0; }
.lean--card .ln::before { width: calc(5ch + 0.6em); padding-right: 0.6em; text-indent: 0; }
.lean--card code { min-width: 0; }
.rc__note { font-size: 1.02cqw; line-height: 1.4; color: var(--muted); margin: 0.6cqw 0 0; }
.rc__foot { display: flex; flex-direction: column; gap: 0.5cqw; padding-top: 1.2cqw; border-top: 1px solid var(--rule-strong); font-size: 1.15cqw; color: var(--ink-soft); }
.rc__fact strong { font-weight: 700; color: var(--ink); }
.rc__status, .rc__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3cqw 2.2cqw; margin: 0; width: 100%; }
.rc__none { color: var(--muted); font-style: italic; }
.rc__url { margin-left: auto; color: var(--muted); font-size: 1.05cqw; }
body.card-only { background: var(--page); margin: 0; }
.rc-wrap--solo { width: 1200px; max-width: none; }
.rc-wrap--solo .rc { width: 1200px; height: 675px; border-radius: 0; border: 0; }

/* ---- Tables, filters ---------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; margin: 8px 0 18px; }
.filters__g { min-width: 0; }
.filters__h { font-size: var(--fs-small); color: var(--muted); margin: 0 0 6px; }
.filters__n { margin: 0; font-size: var(--fs-meta); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--rule-control); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 3px 11px; min-height: 28px; font-size: var(--fs-meta); cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.chip[aria-pressed="true"] .count { color: inherit; opacity: 0.75; }
.filter-input { width: min(420px, 100%); height: 38px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); padding: 0 12px; }
.table-wrap { position: relative; overflow-x: auto; border-top: 1px solid var(--rule-strong); } /* relative: hidden labels and KaTeX's MathML stay inside the scroll box */
.tbl { border-collapse: collapse; width: 100%; font-size: var(--fs-meta); }
.tbl th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-small); padding: 10px 10px 8px; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; vertical-align: bottom; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tbl tr:hover td { background: color-mix(in oklab, var(--sunk) 60%, transparent); }
.tbl .t-title { font-family: var(--serif); font-size: 0.97rem; min-width: 16em; }
/* Wrapped catalogue titles remain one target, including the space between lines. */
.tbl .t-title > a, #stmt-table td > a { display: inline-block; }
.tbl .t-title a { color: var(--ink); }
.tbl .t-title a:hover { color: var(--steel-text); }
.t-id { display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--faint); margin-top: 1px; }
.t-num { text-align: right; font-variant-numeric: tabular-nums; }
.t-c { text-align: center; }
.tbl--narrow { width: auto; min-width: 280px; }
.tbl--narrow td:first-child { text-transform: capitalize; }
.sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; min-height: 24px; }
.sort::after { content: "\2002\2195"; color: var(--faint); }
th[aria-sort="ascending"] .sort::after { content: "\2002\2191"; color: var(--ink); }
th[aria-sort="descending"] .sort::after { content: "\2002\2193"; color: var(--ink); }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--ink); }
.st { font-size: var(--fs-small); font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.st--none { box-shadow: inset 0 0 0 1.5px var(--brick); color: var(--brick-text); }
.st--progress { background: var(--t-x1); color: var(--ink); }
.st--reviewed { background: var(--brick); color: #fffdf7; }

/* ---- Numbers, credit pages ------------------------------------------- */
.numrow { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0 28px; padding: 16px 0; border-top: 1px solid var(--rule); scroll-margin-top: 12px; }
.numrow:first-child { border-top: 0; }
.numrow:target { background: color-mix(in oklab, var(--steel) 9%, transparent); }
.numrow__v { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin: 0; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.numrow__t p { max-width: 50em; font-size: var(--fs-body); }
.numrow__k { font-weight: 600; color: var(--ink-soft); }
@media (max-width: 640px) { .numrow { grid-template-columns: minmax(0, 1fr); } .numrow__v { text-align: left; } }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; padding: 18px 0; border-top: 1px solid var(--rule); }
.pair__k { font-size: var(--fs-small); color: var(--muted); margin: 0 0 2px; font-weight: 600; }
.pair__v { font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; margin-bottom: 8px; font-variant-numeric: tabular-nums lining-nums; }
.pair__b p { max-width: 40em; }
@media (max-width: 760px) { .pair { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.changelog .quote { max-width: 52em; }
.changelog .quote ul { padding-left: 1.2em; }
.work { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 18px; padding: 16px 0; border-top: 1px solid var(--rule); }
.work:first-child { border-top: 0; }
.work__rank { font-family: var(--serif); font-size: 1.5rem; color: var(--faint); text-align: right; margin: 0; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.work__h { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.3; margin-bottom: 4px; }
.work__h a { color: var(--ink); }
.work__ti { font-style: italic; }
.work__au { font-style: normal; color: var(--ink-soft); font-size: 0.92em; }
.work__yr { color: var(--muted); font-size: 0.9em; }
.work__tx { font-size: 0.95em; overflow-wrap: anywhere; }
.work__n { font-size: var(--fs-meta); color: var(--muted); margin-bottom: 6px; }
.work__list { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: 28px; }
.work__list li { break-inside: avoid; font-family: var(--serif); font-size: 0.92rem; line-height: 1.35; padding: 3px 0; }
.work__list a { color: var(--ink-soft); }
.work__list a:hover { color: var(--steel-text); }
.ways { padding-left: 1.2em; }
.ways li { margin: 6px 0; font-size: 1.0625rem; }

/* ---- Footer ------------------------------------------------------------ */
.foot { border-top: 1px solid var(--rule); margin-top: 40px; padding: 28px 0 40px; font-size: var(--fs-meta); color: var(--muted); }
.foot__in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 48px; }
.foot__name { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.foot__lead p { max-width: 46em; }
.foot__links { list-style: none; margin: 0; padding: 0; columns: 2 180px; }
.foot__links li { padding: 3px 0; }
.foot__links a { color: var(--ink-soft); }
@media (max-width: 760px) { .foot__in { grid-template-columns: minmax(0, 1fr); } }

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 1180px) {
  .search-open__label, .search-open kbd { display: none; }
}
@media (max-width: 900px) {
  :root { --frame: calc(100% - 32px); }
  .top__in { flex-wrap: wrap; gap: 6px 12px; padding-block: 8px; }
  .nav { order: 3; width: 100%; margin-left: -10px; }
  .top__tools { margin-left: auto; }
  .page--narrow { width: calc(100% - 32px); }
}
/* The site menu: a button on phones once JavaScript runs, so the header is one row. */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  :root.js .top__in { flex-wrap: nowrap; position: relative; min-height: 56px; padding-block: 0; }
  :root.js .nav-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-soft); font-size: var(--fs-meta); cursor: pointer; }
  :root.js .nav-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
  :root.js .nav { display: none; position: absolute; top: 100%; right: 0; left: auto; z-index: 40; width: min(260px, 100%); margin: 0; flex-direction: column; gap: 0; padding: 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-md); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
  :root.js .nav.nav--open { display: flex; }
  :root.js .nav a { border-radius: var(--r-sm); padding: 10px 12px; min-height: 40px; }
  :root.js .brand { font-size: 1.125rem; }
  :root.js .top__tools { gap: 8px; }
}
/* At 320 to 380 px the header's row ran 9 px past the screen: the menu button keeps its
   icon and its name for screen readers, and drops the visible word. */
@media (max-width: 380px) {
  :root.js .nav-toggle { padding: 0 9px; }
  :root.js .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :root.js .top__in { gap: 8px; }
}
.filters__reset[hidden] { display: none; }
@media (max-width: 1500px) { .tbl--families .t-disc { display: none; } .t-disc-inline { display: block; } }
@media (max-width: 760px) {
  .filters--families { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .filters--families .select { max-width: none; width: 100%; }
  .filters--families .filters__g--q, .filters--families .filters__n { grid-column: 1 / -1; }
}

/* ---- Social card (rendered to PNG) ------------------------------------- */
body.social { margin: 0; width: 1200px; height: 675px; overflow: hidden; background: var(--page); }
.social__card { position: relative; width: 1200px; height: 675px; }
.social__text { position: absolute; left: 64px; top: 64px; width: 450px; }
.social__brand .mark { width: 44px; height: 44px; margin-bottom: 26px; }
.social__text h1 { font-family: var(--serif); font-weight: 500; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 22px; }
.social__text p { font-size: 22px; line-height: 1.45; color: var(--ink-soft); }
.social__key { display: grid; gap: 10px; font-size: 17px !important; color: var(--muted) !important; margin-top: 40px; line-height: 1.35 !important; }
.social__key span.k { display: grid; grid-template-columns: 26px 1fr; align-items: start; }
.social__key .sw { width: 16px; height: 16px; margin-top: 2px; }
.social__map { position: absolute; inset: 0; }
.sc-reg { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.sc-main { fill: var(--t-main); }
.sc-sup { fill: var(--t-sup); }
.sc-none { fill: var(--surface); stroke: var(--tile-line); stroke-width: 1; }

@media (forced-colors: active) {
  .tile { border: 1px solid CanvasText; }
  .sw { border: 1px solid CanvasText; }
}
@media print {
  .top, .foot, .atlas__stage, .actions { display: none; }
}

/* Community: everyone else's work, credited */
.ceffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem 1.5rem; }
.ceff { border-top: 1px solid var(--rule); padding-top: .75rem; overflow-wrap: anywhere; }
.ceff .h3 { margin: 0 0 .25rem; }
.ceff p { margin: .25rem 0; }
.cfinds { list-style: none; padding: 0; margin: .5rem 0 0; }
.cfind { padding: .5rem 0; border-top: 1px solid var(--rule); }
.cfind .pill { margin-right: .35rem; }

.phead__facets { margin: .25rem 0 0; color: var(--ink-2, inherit); }
.phead__facets .sep { margin: 0 .5rem; opacity: .6; }

/* Where this result stands: one cell per kind of check. Colour belongs to evidence:
   steel for Lean, brick for re-runs outside OpenAI, neutral for the rest. */
.standing__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.standing__item a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.standing__item a:hover, .standing__item a:focus-visible { border-color: var(--rule-control); }
.standing__k { font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.standing__v { font-family: var(--sans); font-size: 0.95rem; line-height: 1.3; }
.standing__item--lean a { border-left: 3px solid var(--steel-fill); }
.standing__item--run a { border-left: 3px solid var(--brick-fill); }
.standing__item--none .standing__v { color: var(--muted); }

/* ---- Map list, legend scope, card -------------------------------------- */
.legend__scope { font-size: var(--fs-small); color: var(--muted); margin: 0 0 2px; font-weight: 600; }
.legend__note--lead { margin: 0 0 4px; color: var(--ink-soft); }
.card__go { margin: 4px 0 10px; }
.card:focus { outline: none; }
.card:focus-visible { outline: 2px solid var(--steel-text); outline-offset: 2px; }
.card li .k + .k { margin-top: 1px; }
.mlist { border-top: 1px solid var(--rule); padding-top: 12px; }
.mlist__h { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.mlist__h:focus { outline: none; }
.mlist__h:focus-visible { outline: 2px solid var(--steel-text); outline-offset: 2px; }
.mlist__ul { list-style: none; margin: 0; padding: 0; }
.mlist__ul li { border-top: 1px solid var(--rule); }
.mlist__ul li:first-child { border-top: 0; }
.mlist__b { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 4px; min-height: 32px; cursor: pointer; color: var(--ink); font-size: var(--fs-meta); line-height: 1.35; border-radius: 4px; }
.mlist__b:hover { background: var(--sunk); }
.mlist__b[aria-current="true"] { background: var(--sunk); box-shadow: inset 3px 0 0 var(--ink); }
.mlist__t { display: block; font-family: var(--serif); font-size: 0.98rem; }
.mlist__b .k { display: block; color: var(--muted); font-size: var(--fs-small); }
.mlist__none { color: var(--muted); font-size: var(--fs-meta); padding: 6px 0; }
.msearch__info { color: var(--muted); font-size: var(--fs-small) !important; cursor: default !important; }
.msearch__info:hover { background: none !important; }
.field__failed { max-width: 36em; }
.copy-fallback { width: min(36em, 100%); height: 34px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); padding: 0 10px; font-family: var(--mono); font-size: var(--fs-small); }

/* ---- Reading sections: claim, scope, definitions ------------------------ */
.claim .stmt { max-width: 52em; }
.claim__label { font-size: var(--fs-small); font-weight: 700; color: var(--brick-text); margin: 0 0 4px; }
.claim__src { font-size: var(--fs-meta); color: var(--muted); }
.lean--read { max-width: 60rem; }
.scope { max-width: 52em; margin: 6px 0 10px; }
.scope__src { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.scope__k { font-weight: 600; color: var(--ink-soft); }
.scope__reading { font-size: var(--fs-body); color: var(--ink-soft); margin-top: 8px; }
.pill--scope { background: var(--t-sup); color: var(--ink); }
.pill--headline { background: var(--steel-fill); color: #fffdf7; }
.pill--unclear, .pill--none, .pill--plain { background: none; box-shadow: inset 0 0 0 1.5px var(--rule-control); color: var(--ink-soft); }
.pill--supporting { background: none; box-shadow: inset 0 0 0 2px var(--steel); color: var(--ink); }
.pill--explained { background: var(--brick); color: #fffdf7; }
.dl--status { margin-top: 8px; max-width: 52em; }
.dl--meta { margin: 6px 0 4px; }
.dl--receipt { grid-template-columns: minmax(0, 1fr); }
.decls { list-style: none; margin: 8px 0 12px; padding: 0; max-width: 60rem; }
.decl { margin: 0 0 12px; }
.decl__name { font-size: var(--fs-meta); margin: 0 0 4px; }
.decl__more { margin-top: 4px; }
.decl__more summary, .more > summary, .receipt summary { cursor: pointer; color: var(--steel-text); min-height: 28px; font-size: var(--fs-meta); }
.more { margin: 10px 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.more > summary .h3, .more > summary .h2 { display: inline; }
.more--inline { border-top: 0; padding-top: 0; margin: 6px 0 0; }
.h2--inline { display: inline; }
.supporting .more:first-of-type { border-top: 0; }
.receipt { margin: 4px 0 0; }
.receipt dl { margin-top: 4px; }
.choose { position: relative; display: inline-block; }
.choose > summary { list-style: none; }
.choose > summary::-webkit-details-marker { display: none; }
.choose__box { position: absolute; z-index: 6; margin-top: 6px; min-width: min(28rem, 86vw); max-height: 60vh; overflow: auto; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.choose__list { list-style: none; margin: 0; padding: 0; }
.choose__list li { padding: 5px 0; border-top: 1px solid var(--rule); font-size: var(--fs-meta); }
.choose__list li:first-child { border-top: 0; }
.exrec { padding: 8px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.exdrafts { padding-left: 1.2em; font-size: var(--fs-body); }
.explain-body { max-width: 44em; }
.explain-body .md-h { font-family: var(--serif); font-weight: 500; margin: 1.2em 0 0.4em; }
.explain-body h2.md-h { font-size: 1.4rem; }
.explain-body h3.md-h { font-size: 1.15rem; }
.explain-body .m-d { overflow-x: auto; }
.md-code { background: var(--code-bg); padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto; font-size: 0.82rem; }
.md-img { max-width: 100%; height: auto; margin: 12px 0; }
.rq { list-style: none; margin: 10px 0; padding: 0; max-width: 60rem; }
.rq li { padding: 8px 0; border-top: 1px solid var(--rule); }
.rq__why { margin: 2px 0 0; padding-left: 1.2em; font-size: var(--fs-meta); color: var(--ink-soft); }
/* Prose around the Families list and the reading queue keeps a reading measure. */
.rq__why li, #careful-reading > p, [aria-labelledby="h-list"] > p { max-width: 62ch; }
#explain-table .btn, #explain-table [class^="rd-"] { white-space: nowrap; }
/* While no family has an explanation recorded, that status is the quiet default; only
   work in progress and reviewed explanations carry colour. */
#families-table .st--none { box-shadow: none; padding: 0; font-weight: 400; color: var(--muted); }

/* ---- Statement comparison on a narrow screen ---------------------------- */
/* The inline comparison stops being a 16:9 picture: sections stack, text uses
   readable rem sizes, height follows the content, and long formulae or Lean
   lines scroll sideways inside their own box. The 1200 x 675 export is unchanged. */
@media (max-width: 760px) {
  .rc-wrap:not(.rc-wrap--solo) { container-type: normal; }
  .rc-wrap:not(.rc-wrap--solo) .rc { aspect-ratio: auto; height: auto; overflow: visible; padding: 16px 16px 14px; gap: 14px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "title" "fam"; gap: 4px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__brand { font-size: 0.875rem; gap: 6px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__brand .mark { width: 18px; height: 18px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__title { font-size: 1.35rem; -webkit-line-clamp: unset; display: block; }
  .rc-wrap:not(.rc-wrap--solo) .rc__fam { font-size: 0.875rem; -webkit-line-clamp: unset; display: block; }
  .rc-wrap:not(.rc-wrap--solo) .rc__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__lean { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule-strong); padding-top: 12px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__label { font-size: 0.8125rem; }
  .rc-wrap:not(.rc-wrap--solo) .rc__kind { font-size: 1rem; }
  .rc-wrap:not(.rc-wrap--solo) .rc__fit { overflow: visible; flex: none; }
  .rc-wrap:not(.rc-wrap--solo) .rc__body { font-size: 1rem; }
  .rc-wrap:not(.rc-wrap--solo) .rc__body .m-d { overflow-x: auto; overflow-y: hidden; }
  .rc-wrap:not(.rc-wrap--solo) .lean--card { font-size: 0.8rem; overflow-x: auto; }
  .rc-wrap:not(.rc-wrap--solo) .lean--card .ln { white-space: pre; padding-left: 0; text-indent: 0; }
  .rc-wrap:not(.rc-wrap--solo) .lean--card code { min-width: max-content; }
  .rc-wrap:not(.rc-wrap--solo) .rc__src, .rc-wrap:not(.rc-wrap--solo) .rc__loc, .rc-wrap:not(.rc-wrap--solo) .rc__note { font-size: 0.8125rem; -webkit-line-clamp: unset; display: block; }
  .rc-wrap:not(.rc-wrap--solo) .rc__foot { font-size: 0.8125rem; padding-top: 10px; }
  .rc-wrap:not(.rc-wrap--solo) .rc__url { margin-left: 0; font-size: 0.75rem; overflow-wrap: anywhere; }
  .rc-wrap:not(.rc-wrap--solo) .rc__fit.is-clipped::after { content: none; }
  .lean--snippet .ln { overflow-wrap: anywhere; }
  .choose__box { position: static; min-width: 0; box-shadow: none; }
}

/* Glossary terms and their previews (assets/atlas.js), after Plectis. */
a.term { color: inherit; text-decoration: underline dotted; text-decoration-color: var(--rule-control); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a.term:hover, a.term:focus-visible { text-decoration-color: currentColor; }
.term-pop { position: absolute; z-index: 60; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--sans); font-size: 0.9rem; line-height: 1.45; }
.term-pop__h { margin: 0 0 4px; font-weight: 600; }
.term-pop__b { margin: 0; color: var(--ink-soft); }
.gloss { margin: 0; }
.gloss__row { padding: 12px 0; border-top: 1px solid var(--rule); scroll-margin-top: 90px; }
.gloss__row:target { background: var(--select); }
.gloss dt { font-family: var(--serif); font-size: 1.0625rem; font-weight: 600; margin-bottom: 4px; }
.gloss dd { margin: 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; color: var(--ink-soft); max-width: 40em; }
.gloss__group + .gloss__group { margin-top: 18px; }

/* Lean statement page: the AI draft is one quiet line, never a verdict */
.scope__draft { font-size: var(--fs-small); color: var(--muted); max-width: 62ch; margin: 10px 0 0; }
.readers-link, .review-status { max-width: 62ch; }
.review-status { color: var(--ink-soft); margin: 6px 0 0; }

/* About: each essay's question beside what the atlas does about it */
.approach { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 20px; }
.approach__item { border-left: 2px solid var(--rule); padding-left: 16px; }
.approach__item p { margin: 0; }
.approach__who { font-weight: 600; }
.approach__item .approach__so { margin-top: 6px; color: var(--ink-soft); }
.adds { margin-top: 10px; }
.adds li + li { margin-top: 4px; }

/* ---- The Families list (explain.html) ------------------------------------ */
/* Every family as a row, each state in words; filters combine and live in the URL. */
.filters--families { align-items: flex-end; gap: 10px 14px; padding: 12px 0 8px; margin: 0; }
:root:not(.js) .filters--families { display: none; }  /* shown before first paint when scripts run, so nothing shifts */
.filters--families .filters__h { display: block; margin: 0 0 4px; }
.filters--families .select { width: auto; min-width: 12.5rem; max-width: 100%; }  /* the longest discipline reads whole */
.filters__g--q { flex: 0 1 12rem; }
.filters__g--q .filter-input { width: 100%; min-height: 34px; padding: 4px 10px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-meta); }
/* The count sentence takes its own row under the controls and wraps, so a long list of
   criteria never pushes the page sideways. */
.filters--families .filters__n { flex: 1 0 100%; min-width: 0; align-self: flex-end; margin: 0 0 6px; color: var(--ink-soft); font-size: var(--fs-meta); }
.filters__reset { align-self: flex-end; min-height: 32px; flex-shrink: 0; white-space: nowrap; }
.filters__empty { margin: 16px 0; color: var(--ink-soft); }
.select { min-height: 34px; padding: 4px 30px 4px 10px; border: 1px solid var(--rule-control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--fs-meta); }
.tbl--families th { position: sticky; top: 0; z-index: 1; background: var(--page); }
.tbl--families td { padding: 9px 10px; }
.tbl--families .t-id { display: table-cell; font-family: var(--sans); font-size: inherit; margin: 0; color: var(--faint); font-variant-numeric: tabular-nums; width: 3.5em; }
.tbl--families .t-title { min-width: 22em; max-width: 34em; line-height: 1.35; }
.tbl--families .t-disc { color: var(--ink-soft); min-width: 9em; }
.tbl--families .t-reader { min-width: 8.5em; }
.tbl--families .t-action { white-space: nowrap; }
.cell__sub { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--muted); font-family: var(--sans); font-weight: 400; }
a.cell__sub { color: var(--steel-text); }
.cell__warn, a.cell__warn { color: var(--brick-text); }
.cell__none { color: var(--muted); }
.cell__flag { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--brick-text); }
.t-disc-inline { display: none; }
/* On a phone each family is a block: the name first, then each state with its label. */
@media (max-width: 760px) {
  .tbl--families thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl--families, .tbl--families tbody, .tbl--families tr, .tbl--families td { display: block; width: 100%; }
  .tbl--families tr { padding: 12px 0; border-bottom: 1px solid var(--rule-strong); }
  .tbl--families tr[hidden] { display: none; }
  .tbl--families td { border: 0; padding: 2px 0; min-width: 0; max-width: none; text-align: left; }
  .tbl--families td:empty { display: none; }
  .tbl--families .t-id { display: block; width: auto; font-size: var(--fs-small); }
  .tbl--families .t-title { min-width: 0; max-width: none; font-size: 1.0625rem; padding-bottom: 6px; }
  .tbl--families td[data-label] { display: grid; grid-template-columns: minmax(8.5em, 40%) 1fr; gap: 8px; font-size: var(--fs-meta); }
  .tbl--families td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-small); }
  .tbl--families td[data-label] .cell__sub { margin-top: 0; }
  .tbl--families td.t-reader[data-label] > * { grid-column: 2; }
  .tbl--families td[data-label]:has(> :only-child:empty) { display: none; }
  .tbl--families .t-action { padding-top: 6px; }
  .tbl tr:hover td { background: none; }
}

/* ---- Numbers (numbers.html) ---------------------------------------------- */
.numtoc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 10px 0 0; padding: 0; font-size: var(--fs-meta); }
.numrow__v--unknown { font-family: var(--sans); font-size: var(--fs-body); color: var(--muted); padding-top: 4px; }
.numrow .h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.numrow__t p { margin-bottom: 4px; }
.numrow__unit { color: var(--ink-soft); }
.numrow__state { color: var(--muted); }
.numrow__state--reported, .numrow__state--incomplete, .numrow__state--unavailable { color: var(--brick-text); }
.numrow__rule, .numrow__credit { font-size: var(--fs-meta) !important; color: var(--ink-soft); }
.receipt__body { margin: 6px 0 0; padding: 8px 0 4px 14px; border-left: 2px solid var(--rule-strong); }
.receipt__facts { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: var(--fs-small); color: var(--muted); }
.receipt__members { margin: 4px 0 8px; padding-left: 1.2em; columns: 2 18rem; column-gap: 28px; font-size: var(--fs-small); }
.receipt__members li { break-inside: avoid; overflow-wrap: anywhere; }

/* Families: a compact head, then the controls directly above the table. */
.phead--compact { margin-bottom: 8px; }
.phead--compact .phead__title { margin-bottom: 4px; }
.phead__lede { font-family: var(--serif); font-size: var(--fs-lede); color: var(--ink-soft); margin: 0; max-width: 96ch; }
.band--table { padding-top: 6px; }
.page--families .filters--families { padding: 6px 0 6px; }
.filters__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; flex: 1 1 12rem; min-height: 34px; align-self: flex-end; padding-bottom: 6px; }
.filters__status .filters__n { margin: 0; flex: 1 1 auto; }
.filters__note { flex: 1 1 100%; margin: 0; font-size: var(--fs-small); color: var(--muted); max-width: 80ch; }
.cell__plain { display: block; color: var(--ink); }
.tbl--families td.t-num { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .filters__status { grid-column: 1 / -1; } .filters__note { grid-column: 1 / -1; } }
.tbl--families .cell__none { color: var(--faint); }
.tbl--families th { white-space: normal; }
.filters__panel { display: contents; }
.filters__toggle { display: none; }
.tbl--families th.t-num:first-child, .tbl--families th:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .filters__toggle { display: inline-flex; grid-column: 1 / -1; justify-self: start; }
  .filters--families:not(.is-open) .filters__panel { display: none; }
  .filters--families.is-open .filters__panel { display: contents; }
  .filters--families:not(.is-open) .filters__note { display: none; }
}
a.cell__sub { min-height: 24px; padding: 2px 0; }
.stmt__diagram { display: block; margin: 0.4em 0; padding: 6px 10px; border-left: 2px solid var(--rule-strong); font-family: var(--sans); font-size: var(--fs-meta); color: var(--muted); }
/* Later rules win: below 1500px the discipline moves under the family name. */
@media (max-width: 1500px) { .tbl--families .t-disc { display: none; } .tbl--families .t-disc-inline { display: block; } }
code.path { overflow-wrap: normal; word-break: normal; }
.approach__then { margin-top: 18px; }
@media (max-width: 640px) { .actions .btn--quiet { padding-inline: 0; } }

/* Families list: one invitation to explain for the page, under its lede; a quiet dash in
   an empty cell (its meaning is read out); on a phone a dash-only state is left out of the
   card except the Lean count, and a Sort menu stands in for the hidden column heads, whose
   buttons leave the tab order with them. */
.phead__invite { margin: 6px 0 0; max-width: 80ch; font-size: var(--fs-small); color: var(--muted); }
.filters__g--sort { display: none; }
@media (max-width: 760px) {
  .tbl--families thead { visibility: hidden; }
  .filters__g--sort { display: block; grid-column: 1 / -1; }
  .filters--families .filters__g--sort .select { min-width: 0; }
  .tbl--families td[data-label]:not(.t-lean):has(> .cell__dash:only-child) { display: none; }
}

/* family page: usability pass */
/* Under the family title: the outside readers' verdict in words (the meaning the map's
   colour carries) and the count of current, withdrawn and replaced papers, as the lede. */
.fx .fx-fact--lede { margin-top: 10px; }
.fx .fx-fact--lede + .fx-fact--lede { margin-top: 4px; }
.fx .fx-verdict { color: var(--ink); }
/* Connections: each row names the family paper on the other end of the citation. */
.rel__by { font-size: var(--fs-small); color: var(--ink-soft); }
.fx-within { margin: 0 0 18px; }
.fx-within li { margin: 4px 0; max-width: 70ch; }
.fx .fx-intro--comparator { margin-top: 6px; }

/* map + search: usability pass */
.sr__name, .sr__k { overflow-wrap: break-word; }
.sr__x { display: block; margin-top: 2px; font: 400 var(--fs-small)/1.45 var(--serif); color: var(--ink-soft); overflow-wrap: break-word; }
.sr__x:empty { display: none; }
.sr__x code { font: 400 0.75rem/1.45 var(--mono); white-space: normal; overflow-wrap: anywhere; }
.sr__x mark { background: color-mix(in oklab, var(--steel-text) 22%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.sr__x .katex { font-size: 1em; }
.sr-suggest { margin: 0; padding: 4px 18px 14px; font-size: var(--fs-meta); color: var(--ink-soft); }
.sr-suggest__w { min-height: 28px; padding: 2px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--steel-text); font-size: var(--fs-small); cursor: pointer; }

/* statements: lean pairing pass */
.phead__thms { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.phead__thmk { color: var(--muted); font-size: var(--fs-small); }
.phead__thm { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.phead__thm code { overflow-wrap: anywhere; }
.phead__thm .copy, .lean__tools .copy { min-height: 28px; padding: 2px 10px; font-size: var(--fs-small); }
.lean__tools { position: relative; }
.lean__tools > .copy { display: block; margin: 0 0 6px auto; }
.lean--cont { margin-top: 0; }
.pair__target { margin: 0 0 18px; }
.pair__method { margin-top: 14px; max-width: 72ch; }
.tbl--stmts .t-lid { display: block; font-size: var(--fs-small); color: var(--faint); overflow-wrap: anywhere; }
.tbl--stmts .t-pair { min-width: 14em; max-width: 22em; }
.tbl--stmts .t-pair .cell__sub { display: block; }
.tbl--stmts .t-notes { min-width: 10em; max-width: 16em; }
.tbl--stmts .t-notes .cell__sub { display: block; }
@media (max-width: 767px) {
  .tbl--stmts .t-pair, .tbl--stmts .t-notes { min-width: 0; max-width: none; }
  .tbl--stmts td.t-pair[data-label] > *, .tbl--stmts td.t-notes[data-label] > * { grid-column: 2; }
  .tbl--stmts td.t-notes:not(:has(*)) { display: none; }
}
/* The header row stays in view: the list scrolls inside its own box, so the sticky
   heads have a scrolling ancestor to stick to (the box also scrolls sideways). */
@media (min-width: 768px) {
  .page--stmts .table-wrap { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; }
  .tbl--stmts th { position: sticky; top: 0; z-index: 2; background: var(--page); box-shadow: 0 1px 0 var(--rule-strong); }
  .tbl--stmts .t-title { min-width: 15em; max-width: 24em; }
}

/* round 2: list pages */
/* A head that names a glossary term: the words link the term, the arrow beside them sorts. */
th > a.term + .sort--arrow { min-width: 24px; min-height: 24px; margin-left: 2px; vertical-align: baseline; }
th > a.term + .sort--arrow::after { content: "\2195"; }
th[aria-sort="ascending"] > a.term + .sort--arrow::after { content: "\2191"; }
th[aria-sort="descending"] > a.term + .sort--arrow::after { content: "\2193"; }
.filters__h a.term { color: inherit; }
/* "Search all text": the site search with the same words, under the family-name box. */
.filters__all { display: inline-block; margin-top: 4px; font-size: var(--fs-small); color: var(--ink-soft); }
.filters__g--q { flex-basis: 14rem; }