/* Open Proof Network site (F04). One stylesheet, no external resources (R10).
   F04-T12: the Nocturne dark theme of the redesign handoff (site/docs/design_handoff_site_redesign),
   its tokens translated into variables. Headings are never bolder than 500; status is carried by a
   9px dot; every definition is a hover card that also opens on focus. */
:root {
  --bg: #161826;
  --surface: #232532;
  --text: #e9e9ed;
  --divider: rgba(233, 233, 237, 0.16);
  --accent: #9184d9;
  --accent-100: #f5f4ff;
  --accent-200: #e7e5fe;
  --accent-300: #d2cefd;
  --accent-700: #5d5294;
  --n100: #f3f5fe;
  --n200: #e4e7f5;
  --n300: #cfd3e5;
  --n400: #b2b6ca;
  --n500: #9397ab;
  --n600: #75798c;
  --n700: #595d6c;
  --n800: #3f424d;
  --section: #262a60;
  --section-glow: #353b80;
  --warn: #d9a441;
  --bad: #e07a7a;
  --select: #f2b544; /* F30-T10: a selected node or edge in the sufficient-sets tree */
  /* F04-T55 (D-25 v3.46): the refuting side — the trunk from a refutes variant into the root and
     the selector branch beneath it. A teal apart from the accent, the amber selection, the
     literature marks and the bad/warn reds, readable on this dark ground and on a white one.
     Statements never wear it: a statement is not refuting by itself. */
  --refute: #3bbfb2;
  /* F04-T54 (D-25 v3.45): the literature mark's three statuses — none a proof-status colour,
     each reading on this dark ground and on a white one. */
  --lit-open: #4fa3e3;
  --lit-known: #e8913a;
  --lit-elementary: #4dbd7a;
  --proved: var(--accent);
  --ready: var(--accent-300);
  --blocked: var(--n600);
  --speculative: #b5abfc;
  --s1: 2.8px; --s2: 5.6px; --s3: 8.4px; --s4: 11.2px; --s5: 14px; --s6: 16.8px; --s8: 22.4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
body { margin: 0; }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--s2); }
h1 { font-size: 46px; }
h2 { font-size: 22px; margin-top: var(--s8); }
h3 { font-size: 19px; }
h4 { font-size: 18px; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent-300); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(145, 132, 217, 0.3); }
code, pre, .mono { font-family: var(--mono); }
code { font-size: 0.92em; }
main { padding: 0 var(--s8) calc(var(--s8) * 2); max-width: 1440px; margin: 0 auto; }
.lead { font-size: 17px; line-height: 1.6; color: var(--n400); max-width: 60ch; }
.cue { color: var(--n400); }
.kicker { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.crumbs { font-size: 12.5px; color: var(--n500); margin: 0 0 var(--s3); }
main > .crumbs, main > h1:first-child { margin-top: calc(var(--s8) * 1.6); }
.crumbs a { color: var(--n500); }

/* — masthead — */
.masthead { display: flex; align-items: center; gap: var(--s8); padding: var(--s4) var(--s8); box-shadow: inset 0 -1px 0 var(--divider); max-width: 1440px; margin: 0 auto; }
.site-name { display: flex; align-items: center; gap: var(--s3); font-weight: 500; font-size: 18px; color: var(--text); margin-right: auto; }
.site-name:hover { text-decoration: none; }
.brand-mark { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); display: block; }
.site-nav { display: flex; align-items: center; gap: var(--s8); }
.site-nav a { color: var(--n400); font-size: 14px; }
.site-nav a:hover { color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent-300); }
.site-nav .nav-action { color: var(--accent); }
.nav-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.nav-burger { display: none; width: 36px; height: 36px; border: 1px solid var(--divider); border-radius: var(--radius-md); flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--text); }

/* — buttons, tags, inputs, cards — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--text); background: transparent; border: 1px solid transparent; padding: var(--s3) var(--s6); border-radius: var(--radius-md); white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn-primary { color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: rgba(145, 132, 217, 0.12); }
.btn-secondary { border-color: var(--n700); }
.btn-secondary:hover { background: rgba(233, 233, 237, 0.07); }
.btn-ghost { color: var(--accent-300); padding-inline: var(--s2); }
.btn-ghost:hover { background: rgba(145, 132, 217, 0.1); }
.btn-block { width: 100%; }
.tag { display: inline-flex; align-items: center; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--n800); color: var(--n200); white-space: nowrap; cursor: help; }
.tag-outline { background: transparent; border: 1px solid var(--n700); color: var(--n400); }
.input { min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--divider); border-radius: var(--radius-sm); caret-color: var(--accent); }
.input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n300); }
.card .btn { align-self: flex-start; }
.card .btn-block { align-self: stretch; }

/* — status dots, stage marks, steward line — */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; vertical-align: -1px; margin-right: var(--s2); border: 1.5px solid var(--n600); }
.dot-proved { background: var(--accent); border-color: var(--accent); }
.dot-open { border-color: var(--accent); }
.dot-needs-witness { border-color: var(--accent); border-style: dashed; }
/* F04-T14: the other statuses wear the node pages' colours — amber waits on a repair, red is off the route */
.dot-stale, .dot-disputed { border-color: var(--warn); }
.dot-superseded, .dot-abandoned, .dot-refuted, .dot-defective { border-color: var(--bad); }
/* F18-T2: the proof drawing's key swatches: a filled square for on the proof, a faint ring for
   not needed, a dashed bar for a used lemma's line, a dotted ring for a reading not measured. */
.dot-on-proof { background: var(--accent); border-color: var(--accent); border-radius: 2px; }
.dot-not-needed { border-color: var(--n600); opacity: .4; }
.dot-use { width: 16px; height: 0; border: 0; border-top: 2px dashed var(--n500); border-radius: 0; vertical-align: 3px; }
.dot-unmeasured { border-color: var(--n500); border-style: dotted; }
/* F04-T39: the dash-dot of a lemma's line, drawn as a gradient since a border cannot be one */
.dot-lemma { width: 16px; height: 2px; border: 0; border-radius: 0; vertical-align: 3px; background: repeating-linear-gradient(to right, var(--n400) 0 7px, transparent 7px 11px, var(--n400) 11px 12.5px, transparent 12.5px 16px); }
.stages { display: inline-flex; gap: var(--s3); flex-wrap: wrap; font-size: 12.5px; }
.stage { display: inline-flex; align-items: center; white-space: nowrap; }
.stage.on { color: var(--n100); }
.stage.off { color: var(--n500); }
.steward { font-size: 13.5px; color: var(--n400); }
.steward.has { color: var(--n300); }
.steward.wanted { color: var(--accent-300); }
.words { font-size: 13.5px; color: var(--n400); }
.words.wanted { color: var(--accent-300); }

/* — hover cards: the Glossary, on hover or focus, no pointer needed — */
.term { position: relative; display: inline-block; border-bottom: 1px dotted var(--n500); cursor: help; color: inherit; }
.term.tag { border-bottom: 0; }
.term.dot-term { border-bottom: 0; display: inline-flex; }
.term-card { display: none; position: absolute; left: 0; top: calc(100% + 8px); width: 300px; padding: var(--s4); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: 13px; line-height: 1.55; color: var(--n300); z-index: 5; font-weight: 400; font-family: var(--sans); text-align: left; white-space: normal; cursor: auto; }
.term.tag .term-card { width: 280px; }
.term.dot-term .term-card { width: 260px; font-size: 12.5px; }
.term:hover .term-card, .term:focus-within .term-card, .term:focus .term-card { display: block; }
.term-card .proto { display: block; margin-top: var(--s2); font-family: var(--mono); font-size: 11px; color: var(--n500); }
.term-card .why { display: block; margin-top: var(--s2); color: var(--n400); }
.hero-lead .term { color: var(--n100); }

/* — home — */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: calc(var(--s8) * 3); padding: calc(var(--s8) * 3) 0 calc(var(--s8) * 2.5); align-items: start; }
.hero-copy { display: flex; flex-direction: column; gap: var(--s6); align-items: flex-start; }
.hero h1 { font-size: 60px; line-height: 1.05; max-width: 20ch; margin: 0; }
.hero-lead { font-size: 18px; line-height: 1.6; max-width: 56ch; color: var(--n300); margin: 0; }
.hero-actions { display: flex; gap: var(--s3); padding-top: var(--s2); flex-wrap: wrap; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s8); }
.section-head h2 { margin: 0; }
/* F04-T57: the home page — one column of bands under the hero */
.home-hero { grid-template-columns: minmax(0, 1fr); }
.home-hero h1 { max-width: 18ch; }
.home-band { display: flex; flex-direction: column; gap: var(--s6); padding: calc(var(--s8) * 1.8) 0; box-shadow: inset 0 1px 0 var(--divider); }
.home-band > h2 { margin: 0; }
.rule-pairs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--divider); border-radius: var(--radius-md); overflow: hidden; }
.rule-pair { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s8); background: var(--surface); }
.rule-pair s { font-size: 13px; color: var(--n500); }
.rule-pair span { font-size: 17px; line-height: 1.45; color: var(--text); }
.pulse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pulse-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--s6); align-items: baseline; padding: var(--s5) 0; box-shadow: inset 0 -1px 0 var(--divider); }
.pulse-kind { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-300); }
.pulse-text { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.pulse-row time { font-size: 13px; color: var(--n500); font-variant-numeric: tabular-nums; }
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.doors .card { padding: var(--s8); }
.doors .card h3 { margin: 0; }
.doors .card p { color: var(--n300); margin: 0; }
.doors .card > .btn { align-self: flex-start; }
.home-worked { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--s8) * 1.5); }
.worked-copy { flex: 1 1 280px; max-width: 380px; display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.worked-copy h2 { margin: 0; }
.worked-copy p { color: var(--n300); margin: 0; }
.worked-drawing { flex: 2 1 480px; min-width: 0; max-height: 640px; overflow: hidden; border-radius: var(--radius-md); background: var(--surface); padding: var(--s6); -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent); mask-image: linear-gradient(to bottom, #000 75%, transparent); }
.worked-drawing svg { display: block; width: 100%; height: auto; }

/* — provenance bar — */
.provenance { display: flex; gap: var(--s6); flex-wrap: wrap; padding: var(--s5) var(--s8); background: var(--surface); font-family: var(--mono); font-size: 12px; color: var(--n500); max-width: 1440px; margin: 0 auto; }
.provenance a, .provenance code { color: var(--n300); font-size: inherit; }
.provenance .links { margin-left: auto; }
.provenance .sources { flex: 1 1 100%; overflow-wrap: anywhere; }

/* — problems — */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s8); padding: calc(var(--s8) * 2) 0 var(--s6); }
.page-head h1 { margin: 0 0 var(--s3); }
.page-head .lead { margin: 0; }
.controls { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-end; flex: none; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; color: var(--text); white-space: nowrap; }
.seg-opt + .seg-opt { border-left: 1px solid var(--divider); }
.seg-opt:hover { background: rgba(233, 233, 237, 0.07); text-decoration: none; }
.seg-opt[aria-current="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-opt .n { color: var(--n500); }
.seg-opt[aria-current="true"] .n { color: var(--accent); }
.search { width: 280px; }
.legend { display: flex; align-items: center; gap: var(--s6); padding: 0 0 var(--s6); font-size: 12.5px; color: var(--n400); flex-wrap: wrap; }
.legend .kicker { font-size: 11px; color: var(--n500); }
.legend .term { padding-bottom: 2px; border-bottom-color: var(--n600); }
.legend-mobile { display: none; margin-bottom: var(--s4); }
.legend-mobile summary { list-style: none; justify-content: space-between; }
.legend-mobile summary::-webkit-details-marker { display: none; }
.legend-mobile .caret { color: var(--accent); }
.legend-mobile dl { margin: var(--s3) 0 0; font-size: 13px; }
.legend-mobile dt { color: var(--n100); margin-top: var(--s3); }
.legend-mobile dd { margin: 0; color: var(--n400); }
.problem-list { display: flex; flex-direction: column; gap: var(--s4); }
.card.problem { padding: var(--s6) var(--s8); gap: var(--s5); }
.problem-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: start; }
.problem-main { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.problem-id-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.problem-id-row .id { font-family: var(--mono); font-size: 17px; color: var(--accent-300); overflow-wrap: anywhere; }
.card.problem .informal { margin: 0; font-size: 20px; line-height: 1.45; max-width: 64ch; color: var(--text); }
.card.problem .source { font-size: 13px; color: var(--n500); }
.card.problem .source a { color: var(--n400); }
.problem-side { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-end; text-align: right; flex: none; min-width: 260px; }
.problem-side .btn { align-self: flex-end; }
.statements { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
.stmt { display: grid; grid-template-columns: 16px 260px minmax(0, 1fr) 150px 120px 160px; gap: var(--s4); align-items: center; padding: var(--s3) 0; box-shadow: inset 0 -1px 0 var(--divider); font-size: 13px; }
.stmt .node { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stmt .node a { color: var(--n200); }
.stmt .role, .stmt .state { color: var(--n400); }
.stmt .attempts { color: var(--n500); font-variant-numeric: tabular-nums; }
.stmt .act { justify-self: end; font-size: 12.5px; white-space: nowrap; }
/* F04-T34 (Q35): a card shows its own statement; the rest fold under one summary row. */
.statements details.more > summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s2) 0; font-size: 13px; color: var(--accent-300); cursor: pointer; list-style: none; }
.statements details.more > summary::-webkit-details-marker { display: none; }
.statements details.more > summary:hover { color: var(--text); }
.statements details.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.statements details.more > summary .caret { transition: transform 120ms ease; }
.statements details.more[open] > summary .caret { transform: rotate(180deg); }
.statements details.more[open] > summary { box-shadow: inset 0 -1px 0 var(--divider); }
.statements details.more:not([open]) > summary .hide,
.statements details.more[open] > summary .show { display: none; }
.act-open { color: var(--accent-300); }
.act-proved { color: var(--n300); }
.act-blocked { color: var(--n500); }
.list-note { font-size: 13px; color: var(--n500); margin: var(--s2) 0 0; }
.list-note code { color: var(--n400); }
.claims-note code { color: var(--n400); }

/* — problem page — */
.problem-head { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: calc(var(--s8) * 2); padding: calc(var(--s8) * 1.6) 0 var(--s8); align-items: start; }
.problem-head-main { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; }
.problem-head h1 { font-size: 34px; margin: 0; overflow-wrap: anywhere; }
.informal-big { margin: 0; font-size: 22px; line-height: 1.45; max-width: 52ch; }
.provenance-line { margin: 0; font-size: 14px; line-height: 1.6; max-width: 62ch; color: var(--n400); }
.provenance-line a { color: var(--n300); }
.problem-head .stages { font-size: 13px; gap: var(--s6); padding-top: var(--s2); }
.steward-card .names { font-size: 17px; }
.steward-card p { font-size: 13.5px; color: var(--n400); }
.statements-section { display: flex; flex-direction: column; gap: var(--s6); padding-bottom: calc(var(--s8) * 2); }
.statements-section .section-head { align-items: flex-end; }
.statements-section .cue { font-size: 14px; margin: 0; }
/* the graph's key sits inside its card; a hover card hangs from the key's left edge, so none leaves the card */
.dag-legend { position: relative; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 12.5px; color: var(--n400); align-items: center; }
.dag-legend .term { position: static; padding-bottom: 2px; border-bottom-color: var(--n600); white-space: nowrap; }
.dag-legend .term-card { width: min(300px, 100%); }
.graph-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: calc(var(--s8) * 2); align-items: start; }
.dag-wrap { position: relative; padding: var(--s6) var(--s6) calc(var(--s8) * 1.6); min-height: 380px; }
.dag-scroll { flex: 1; display: flex; align-items: center; overflow-x: auto; padding: var(--s6) 0; }
.dag { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.dag rect { fill: var(--bg); stroke: var(--divider); stroke-width: 1; }
.dag text { fill: var(--text); font-family: var(--mono); font-size: 13px; }
.dag .edge { stroke: var(--n700); stroke-width: 1.5; fill: none; transition: opacity .12s; }
.dag circle { fill: none; stroke: var(--n600); stroke-width: 1.5; }
.dag .status-proved circle { fill: var(--accent); stroke: var(--accent); }
.dag .status-ready circle, .dag .status-speculative circle { stroke: var(--accent); }
.dag .status-needs-witness circle { stroke: var(--accent); stroke-dasharray: 2 2; }
.dag .status-stale circle, .dag .status-disputed circle { stroke: var(--warn); }
.dag .status-superseded circle, .dag .status-abandoned circle, .dag .status-refuted circle, .dag .status-defective circle { stroke: var(--bad); }
.dag .status-superseded rect, .dag .status-abandoned rect { stroke-dasharray: 4 3; }
.dag .status-superseded text, .dag .status-abandoned text { fill: var(--n500); }
.dag a:hover rect, .dag a:focus-visible rect { stroke: var(--accent); }
.dag .selected rect { stroke: var(--accent); }
.dag .node .halo { display: none; fill: var(--accent); stroke: none; }
.dag .selected .halo { display: block; }
/* F18-T2: one proof of the problem at a time. The first is drawn without the script; the
   picker's buttons redraw from each mark's data-proofs. */
.proof-picker { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s2); font-size: 12.5px; color: var(--n400); }
.proof-picker-lead { margin-right: var(--s2); }
.proof-picker button { font: inherit; color: var(--n300); background: var(--bg); border: 1px solid var(--divider); border-radius: 999px; padding: 4px 12px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.proof-picker button:hover, .proof-picker button:focus-visible { border-color: var(--accent); }
.proof-picker button[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(145, 132, 217, .14); }
.proof-note { font-size: 12.5px; color: var(--n400); margin: 0 0 var(--s4); line-height: 1.5; }
.dag .off-proof { opacity: .32; }
.dag .node.on-proof rect { stroke: var(--accent); stroke-width: 1.5; }
.dag .edge.on-proof { stroke: var(--accent); stroke-width: 2; }
.dag .edge.use { stroke-dasharray: 7 4; }
.dag .outline-mark rect { fill: var(--bg); stroke: var(--accent-300); stroke-width: 1; }
.dag .outline-mark text { fill: var(--accent-300); font-family: var(--sans, inherit); font-size: 10px; text-anchor: middle; }
.panel-outlines { width: 100%; font-size: 13px; }
.panel-outlines ul, .panel-outlines ol { margin: var(--s2) 0; padding-left: 1.2em; line-height: 1.6; }
.panel-outlines li { margin-bottom: var(--s2); overflow-wrap: anywhere; }
.panel-outlines .untrusted-title { color: var(--n300); font-style: italic; }
.panel-outlines .note-kind { font-family: var(--mono, monospace); font-size: 11px; color: var(--n300); border: 1px solid var(--n300); border-radius: 3px; padding: 0 4px; }
/* F04-T46, T47: how a statement was split, at the top of its panel; a hole's origin line. */
.split-into { width: 100%; font-size: 13px; border-left: 2px solid var(--accent-300); padding-left: var(--s4); }
.split-into .split-by { font-size: 13px; color: var(--n300); margin: var(--s2) 0 0; overflow-wrap: anywhere; }
.split-holes { list-style: none; margin: var(--s3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.split-hole { overflow-wrap: anywhere; }
.split-hole .split-name { display: block; line-height: 1.6; }
.split-hole .split-gloss { margin-top: var(--s1); color: var(--n200); }
.split-hole .split-gloss p { margin: 0; font-size: 14px; }
.panel .split-hole pre.lean.split-stmt, .panel .split-lean pre.lean { margin: var(--s2) 0 0; padding: var(--s2) var(--s3); font-size: 11px; }
.split-lean { margin-top: var(--s2); }
.split-lean summary { cursor: pointer; color: var(--accent-300); font-size: 13px; }
.split-lean .split-link { margin: var(--s2) 0 0; font-size: 12px; }
.hole-of { width: 100%; font-size: 13px; color: var(--n300); margin: 0; border-left: 2px solid var(--accent-300); padding-left: var(--s4); overflow-wrap: anywhere; }
.dot-outline { border-radius: 3px; border-color: var(--accent-300); }
/* F30-T11 (D-14 v3.26 as amended by v3.46): the band of proposed statements under the drawing, a
   drawing of its own that no selection moves; the key's swatch is a small outlined pill. Its lines
   into the tree (.band-link, in an overlay over the card) exist only while lit: no d at rest. */
.dot-proposed-for { width: 16px; height: 9px; border: 1px solid var(--n500); border-radius: 5px; }
/* F30-T13 (the owner, 2026-10-21): the card's body is the selector and the drawing on the left
   and the column of proposed statements on the right, from the selector's top and flush with the
   card's right side. The selector stays sticky inside graph-main, which is as tall as the drawing. */
.graph-body { display: flex; align-items: flex-start; gap: var(--s5); }
.graph-main { flex: 1 1 auto; min-width: 0; }
.band-wrap { position: relative; flex: 0 0 auto; margin: var(--s4) 0 0 auto; padding: var(--s3) 0 0 var(--s4); border-left: 1px dashed var(--divider); max-width: 45%; }
.band-head { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s1); text-align: right; }
.band-head .kicker { color: var(--n400); }
.band-head .band-cue { margin: 0; max-width: 240px; font-size: 12px; line-height: 1.45; color: var(--n400); }
.band-scroll { padding: var(--s3) 0 0; text-align: right; }
.band-scroll svg.band { max-width: 100%; height: auto; }
@media (max-width: 700px) {
  .graph-body { flex-direction: column; }
  .graph-main { width: 100%; }
  .band-wrap { margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-left: 0; border-top: 1px dashed var(--divider); max-width: 100%; width: 100%; }
  .band-head { align-items: flex-start; text-align: left; }
  .band-scroll { text-align: left; }
}
.dag.band { margin: 0 auto; }
.band-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.band-link { display: none; fill: none; stroke: var(--accent-300); stroke-width: 2; }
.band-link.lit { display: block; }
.band-link.use { stroke-dasharray: 7 4; }
.band-link.lemma { stroke-dasharray: 7 4 1.5 4; stroke-linecap: round; }
/* F30-T15: a spec revised into a refuting variant keeps its trunk's colour when its line is lit. */
.band-link.relation.refutes { stroke: var(--refute); }
/* F30-T14: a pinned spec wears the selection's amber (F30-Q14), not the accent every proved pill wears. */
.dag.band .node.pinned rect.pill { stroke: var(--select); stroke-width: 2.5; }
/* F04-T39 (D-12 v3.38): a lemma's line is dash-dot — a dash, a gap, a dot, a gap — which neither the
   dashed use (7 4) nor the dotted pointer (1.5 4) draws, in either theme; the key's swatch repeats it. */
.dag .edge.lemma { stroke: var(--n500); stroke-dasharray: 7 4 1.5 4; stroke-linecap: round; }
/* F04-T33 (Q34): superseded statements faded, and hidden on request; hovering a statement
   lights its lines and dims the rest; the group no line joins has a label and a rule. */
.dag .node { transition: opacity .12s; }
.dag .node.status-superseded { opacity: .5; }
.dag.hovering .edge:not(.lit) { opacity: .12; }
.dag.hovering .node:not(.lit) { opacity: .35; }
.dag .edge.lit { stroke: var(--accent-300); stroke-width: 2; }
.dag .dag-group { fill: var(--n400); font-family: var(--sans, inherit); font-size: 12px; text-anchor: middle; }
.dag .dag-divider { stroke: var(--divider); stroke-dasharray: 2 4; }
.dot-depends-on { width: 16px; height: 0; border: 0; border-top: 2px solid var(--n500); border-radius: 0; vertical-align: 3px; }
.dag-toggle { font: inherit; font-size: 12px; color: var(--n300); background: var(--bg); border: 1px solid var(--divider); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.dag-toggle:hover, .dag-toggle:focus-visible { border-color: var(--accent); }
.dag-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.dag-caption { position: absolute; left: var(--s6); bottom: var(--s4); font-size: 11.5px; color: var(--n400); }
/* F30-T11: on a phone the caption wraps to three lines, taller than the card's bottom padding, and
   sat over the band's last row; there it flows under the drawing instead. */
@media (max-width: 700px) {
  .dag-wrap { padding-bottom: var(--s6); }
  .dag-caption { position: static; display: block; margin-top: var(--s4); }
}
.panels { display: flex; flex-direction: column; }
.panel { gap: var(--s4); align-items: flex-start; }
.panel-id { font-family: var(--mono); font-size: 18px; overflow-wrap: anywhere; }
/* F29-T5 (R9): the panel is headed by the statement's label (its id when that is all the record
   has, in mono as before); the id and the link to the gloss's controls sit beneath. */
.panel-title { font-size: 19px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.panel-title.mono { font-family: var(--mono); font-weight: 400; font-size: 18px; }
.panel-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin: calc(-1 * var(--s2)) 0 0; font-size: 13px; }
.panel-sub .panel-id { font-size: 13px; color: var(--n400); }
.panel-rename { font-size: 12.5px; color: var(--accent-300); white-space: nowrap; }
.node-head h1 + .panel-id { font-size: 15px; color: var(--n400); margin: 0 0 var(--s3); }
.panel-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s6); font-size: 13px; width: 100%; margin: 0; }
.panel-facts dt { color: var(--n500); }
.panel-facts dd { margin: 0; }
.panel-note { font-size: 14px; line-height: 1.6; color: var(--n400); margin: 0; }
/* F04-T48 (Q47): the panel as a summary — four sections, each under its kicker, then the
   record details. The claim's math is the headline; everything explanatory is folded. */
.panel-sec { width: 100%; display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--divider); }
.panel-sec > h3.kicker { margin: 0; font-weight: 500; }
.panel .claim-math { color: var(--text); font-size: 16px; overflow-x: auto; }
.panel .claim-math p { margin: 0; color: var(--text); font-size: 16px; }
.panel .claim-notes { font-size: 13px; color: var(--n300); }
.panel .claim-notes ul { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.panel .claim-notes p, .panel .claim-notes li { font-size: 13px; margin: 0 0 var(--s1); overflow-wrap: anywhere; }
.claim-mark, .claim-words, .explain, .how-line, .lit-line { font-size: 13px; }
.panel .claim-words { color: var(--n300); overflow-wrap: anywhere; }
.words-mark { font-size: 12px; color: var(--n400); border: 1px solid var(--divider); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.panel-lean summary, .panel-small summary { cursor: pointer; color: var(--accent-300); font-size: 13px; }
.panel-lean pre.lean { margin-top: var(--s2); }
.panel-small { width: 100%; font-size: 13px; }
.panel-small > *:not(summary) { margin-top: var(--s2); }
.panel .sub { font-size: 12px; color: var(--n500); margin: 0; }
.panel-list { margin: 0; padding-left: 1.2em; font-size: 13px; line-height: 1.6; color: var(--n300); }
.panel-list li { margin-bottom: var(--s1); overflow-wrap: anywhere; }
.record { width: 100%; }
.record[open] > *:not(summary) { margin-top: var(--s3); }
.how-to-read p { font-size: 13px; color: var(--n400); }
.panel pre.lean { width: 100%; margin: 0; background: var(--bg); border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: var(--s4); font-size: 11.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--n300); }
.record summary { font-size: 12.5px; color: var(--n400); cursor: pointer; border-bottom: 1px dotted var(--n600); padding-bottom: 2px; list-style: none; display: inline; }
.record summary::-webkit-details-marker { display: none; }
.record summary:hover { color: var(--accent-300); }
.record-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); font-family: var(--mono); font-size: 12px; color: var(--n400); margin: var(--s3) 0 0; overflow-wrap: anywhere; }
.record-grid dt { color: var(--n500); }
.record-grid dd { margin: 0; }
.detail { max-width: 80ch; }
/* F04-T49 (Q48): a source's URL is shown whole and has no break opportunity; it breaks anywhere
   rather than widening the page at 390 px (erdos-1094's was 98 characters). */
ul.sources, .evidence .label, .evidence li { overflow-wrap: anywhere; }
.detail h2 { padding-top: var(--s4); border-top: 1px solid var(--divider); }
.flag { border-left: 3px solid var(--warn); padding-left: var(--s4); color: var(--n300); }
.claimable { color: var(--n300); }
.registration { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n300); overflow-wrap: anywhere; }
.registration a { color: var(--accent-300); }
.why-not { color: var(--n300); }
ul.why-not { color: var(--n400); }

/* — about — */
.about { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: calc(var(--s8) * 3); padding: calc(var(--s8) * 2) 0 calc(var(--s8) * 2.5); }
.about-body { max-width: 68ch; display: flex; flex-direction: column; gap: var(--s8); }
.about h1 { font-size: 44px; line-height: 1.1; margin: 0; }
.about .lead { max-width: none; display: flex; flex-direction: column; gap: var(--s4); }
.about .lead p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--n300); }
.about .lead p + h3 { margin-top: var(--s4); }
.about .lead h3 { font-size: 24px; margin: 0; color: var(--text); }
.about .lead h3 + p { font-size: 16px; color: var(--n200); }
.about .lead a { color: var(--accent-300); text-decoration: underline; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--divider); }
.rule-item { display: flex; flex-direction: column; gap: var(--s2); }
.rule-item h4 { margin: 0; }
.rule-item p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--n400); }
.about-side { display: flex; flex-direction: column; gap: var(--s6); }
.about-side .card p { font-size: 13px; color: var(--n400); }
blockquote.commitment { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--n200); border-left: 1px solid var(--accent-700); padding-left: var(--s4); }
.on-page { display: flex; flex-direction: column; gap: var(--s3); font-size: 13px; }
.on-page a { color: var(--n500); }
.on-page a:first-of-type { color: var(--accent-300); }

/* — node page and the record's detail sections — */
pre.lean { background: var(--surface); padding: var(--s4) var(--s6); overflow-x: auto; white-space: pre; line-height: 1.6; margin: var(--s4) 0; border-radius: var(--radius-sm); font-size: 13px; }
/* F04-T15: a Lean artifact shown on the site, with the caption saying what was checked. */
.artifact { margin: var(--s4) 0 var(--s6); }
.artifact-cap { color: var(--n500); font-size: 13px; margin: 0; }
.artifact pre.lean { margin: var(--s2) 0 0; }
.prose-block pre.lean { margin: var(--s3) 0 var(--s2); }
pre.lean.statement { border-left: 3px solid var(--n700); }
pre.statement.st-proved { border-left-color: var(--proved); }
pre.statement.st-ready, pre.statement.st-open { border-left-color: var(--accent); }
pre.statement.st-speculative { border-left-color: var(--speculative); }
pre.statement.st-stale, pre.statement.st-disputed { border-left-color: var(--warn); }
pre.statement.st-superseded, pre.statement.st-abandoned { border-left-color: var(--bad); }
.status { white-space: nowrap; }
.status .mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: var(--s2); vertical-align: -1px; border: 1.5px solid var(--n600); }
.status-proved .mark { background: var(--accent); border-color: var(--accent); }
.status-ready .mark, .status-speculative .mark { border-color: var(--accent); }
.status-stale .mark, .status-disputed .mark { border-color: var(--warn); }
.status-superseded .mark, .status-abandoned .mark, .status-refuted .mark { border-color: var(--bad); }
.status-revoked { color: var(--bad); }
.result-pass { color: var(--accent-300); }
.result-fail { color: var(--bad); }
.result-skipped { color: var(--n500); }
main > h1 { font-size: 34px; margin: var(--s4) 0 var(--s3); overflow-wrap: anywhere; }
main > h1.mono { font-family: var(--mono); }
table { border-collapse: collapse; width: 100%; margin: var(--s3) 0 var(--s6); font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--divider); }
th { font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
.table-wrap { overflow-x: auto; }
table.glossary td:first-child { color: var(--n100); width: 20%; }
table.glossary td:nth-child(2) { color: var(--n300); font-size: 13.5px; line-height: 1.6; }
table.glossary td:last-child { width: 24%; }
table.glossary code { color: var(--n500); font-size: 12px; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s6); margin: var(--s3) 0 var(--s6); }
dl.facts dt { color: var(--n500); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
button { font: inherit; padding: var(--s2) var(--s4); border: 1px solid var(--n700); background: transparent; color: var(--text); border-radius: var(--radius-md); }

/* Contributor prose: always inside a labelled block, below the checked object (R4). */
.prose-block { margin: var(--s4) 0 var(--s6); border: 1px solid var(--divider); border-left-width: 3px; padding: var(--s3) var(--s6); border-radius: var(--radius-sm); }
.prose-block.unverified { border-left-color: var(--speculative); }
.prose-block.untrusted { border-left-color: var(--warn); }
.prose-block .label { color: var(--n500); font-size: 13px; margin: var(--s1) 0 var(--s3); }
pre.prose { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: 14px; margin: 0 0 var(--s3); }

/* F19-R11: every block says in words what it is; the bold phrase is the label, never a colour. */
.block-label { font-size: 13px; color: var(--n400); margin: var(--s2) 0; overflow-wrap: anywhere; }
.block-label strong { color: var(--n100); font-weight: 600; }
.statement-block, .attestation-block { margin: var(--s4) 0; }

/* F19-R9: a proof's outline, a tree of native <details> (keyboard and screen reader for free). */
.proof-outline { margin: var(--s4) 0 var(--s6); padding: var(--s3) var(--s6); border: 1px solid var(--divider); border-left: 3px solid var(--proved); border-radius: var(--radius-sm); }
.prose-block .proof-outline { border-left-color: var(--warn); padding: var(--s2) var(--s4); }
.proof-outline > .cue { font-size: 13px; }
.po-steps { list-style: none; margin: var(--s2) 0; padding: 0; }
.po-steps .po-steps { margin-left: var(--s2); padding-left: var(--s4); border-left: 1px solid var(--divider); }
.po-step { margin: var(--s1) 0; min-width: 0; }
.po-step > details > summary { cursor: pointer; padding: var(--s1) 0; line-height: 1.7; overflow-wrap: anywhere; }
.po-step > details > summary:focus-visible, .po-lean > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.po-id { color: var(--n500); font-size: 12.5px; }
.po-kind { font-size: 12px; color: var(--n500); }
.po-claim { color: var(--n100); white-space: pre-wrap; overflow-wrap: anywhere; }
.po-routine, .po-note, .po-tag { display: inline-block; font-size: 12px; line-height: 1.5; padding: 0 var(--s2); border: 1px solid var(--divider); border-radius: var(--radius-sm); color: var(--n400); }
.po-note { border-color: var(--warn); }
.po-body { padding: 0 0 var(--s2) var(--s5); font-size: 14px; }
.po-body p { margin: var(--s1) 0; }
.po-goal, .po-uses, .po-hole { color: var(--n300); overflow-wrap: anywhere; }
.po-lean > summary { cursor: pointer; font-size: 13px; color: var(--accent-300); padding: var(--s1) 0; }
.po-body pre.lean { margin: var(--s2) 0; padding: var(--s3) var(--s4); font-size: 12.5px; }
.po-at { font-size: 12.5px; overflow-wrap: anywhere; }
/* A file link names a path that may end in a 64-character hash (an annex, an explainer): it
   breaks anywhere, or a phone page scrolls sideways (found live 2026-10-05). */
a.file { overflow-wrap: anywhere; }
.po-cut { color: var(--warn); font-family: var(--sans); font-size: 12px; }
/* F19-R8, R10: the reading view — one proof, top-down. */
.rv-statement .informal { font-size: 16px; color: var(--n200); max-width: 70ch; }
.rv-statement .informal .kicker { margin-bottom: var(--s1); }
.rv-nodes { list-style: none; padding: 0; margin: var(--s4) 0; counter-reset: rv; }
.rv-node { padding: var(--s4) 0 var(--s6); border-top: 1px solid var(--divider); min-width: 0; }
.rv-node > h3 { font-family: var(--mono); font-size: 17px; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; }
.rv-state { font-family: var(--sans); font-size: 13px; color: var(--n400); }
.gloss-slot { font-size: 13px; }
.rv-lines { font-size: 13px; overflow-wrap: anywhere; }
table.correspondence td { font-size: 13px; overflow-wrap: anywhere; }
table.correspondence td:first-child { font-family: var(--mono); }
/* On a phone five columns crush the file path to a few characters a line and push the explainer
   column out of view (measured at 390px), so each row becomes a card with its column names. */
@media (max-width: 700px) {
  table.correspondence thead { display: none; }
  table.correspondence tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--divider); }
  table.correspondence td { display: block; border: 0; padding: var(--s1) 0; }
  table.correspondence td::before { content: attr(data-label); display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
}

/* The docstring card hangs from the "Uses" line, not the word, so on a phone it stays inside the
   viewport (measured: anchored to the word it ran 14px past 390px). */
.po-uses { position: relative; }
.term.const { position: static; border-bottom-color: var(--n600); }
.term.const .term-card { width: min(300px, 100%); }
.prose p { overflow-wrap: anywhere; }
.prose pre { background: var(--bg); padding: var(--s3) var(--s4); overflow-x: auto; border-radius: var(--radius-sm); }
.prose .fence-label { color: var(--n500); font-size: 12.5px; margin: -0.4rem 0 0.1rem; }
.prose pre.fence-output { background: transparent; border: 1px dashed var(--divider); }
table.doc { font-size: 13.5px; }
table.doc th, table.doc td { padding-right: var(--s6); }
table.qa { font-size: 13px; }
table.qa td.qa-pass { color: var(--accent-300); }
table.qa td.qa-fail { color: var(--bad); font-weight: 500; }
table.qa td.qa-inconclusive { color: var(--warn); }
table.qa td.qa-unrun { color: var(--n500); }
.pertinent { color: var(--accent-300); }
pre.diff { background: var(--bg); padding: var(--s3) var(--s4); overflow-x: auto; white-space: pre; font-size: 12.5px; border-radius: var(--radius-sm); }
.vouched { border-left: 3px solid var(--accent); padding-left: var(--s4); }
ul.stewards, ul.writeups { padding-left: 1.2rem; }
.calibration { border-left-color: var(--speculative); }
table.leiden td { font-size: 13.5px; }
table.ledger td, table.ledger th { padding-right: var(--s6); }
table.ledger a { color: var(--accent-300); }
.docs h2, .contributors h2 { padding-top: var(--s4); border-top: 1px solid var(--divider); }
main > h2 { padding-top: var(--s4); border-top: 1px solid var(--divider); }
.sources, ul.sources { color: var(--n400); font-size: 14px; }
.qa, .signatures, .attempts, .evidence, .drift { color: var(--n300); }
.note { color: var(--n500); }
/* F04-T13: KaTeX output inside a record's informal text sits on the prose's own size. */
.math .katex { font-size: 1.04em; }
.math .katex-display { margin: var(--s2) 0; overflow-x: auto; overflow-y: hidden; }
/* F04-T51 (Q50): a gloss's opening formula, shown under a statement, is inline math under
   \displaystyle so KaTeX breaks it after a top-level relation or operator; a formula with no
   break opportunity scrolls in its own box, and math.js marks the box .math-overflows when it does,
   so the bar shows (macOS hides an unstyled one until scrolled). */
.math-break { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; margin: var(--s2) 0; line-height: 1.9; }
.math-overflows { padding-bottom: 4px; }
.math-overflows::-webkit-scrollbar { height: 6px; }
.math-overflows::-webkit-scrollbar-thumb { background: var(--n600); border-radius: 3px; }
.math-overflows::-webkit-scrollbar-track { background: var(--n800); border-radius: 3px; }

/* — mobile — */
@media (max-width: 900px) {
  main, .masthead, .provenance { padding-left: var(--s6); padding-right: var(--s6); }
  .masthead { gap: var(--s4); padding-top: var(--s3); padding-bottom: var(--s3); flex-wrap: wrap; }
  .site-name { font-size: 15px; }
  .nav-burger { display: flex; }
  .site-nav { display: none; flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s3) 0; }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  h1 { font-size: 34px; }
  .hero { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s8) 0 0; }
  .hero h1 { font-size: 34px; line-height: 1.08; }
  .hero-lead { font-size: 16px; }
  .hero-more { display: none; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; padding: var(--s4); }
  .hero-actions .btn-ghost { display: none; }
  .rule-pairs, .doors { grid-template-columns: 1fr; }
  .rule-pair, .doors .card { padding: var(--s6); }
  .pulse-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); }
  .pulse-text { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .home-band { padding: calc(var(--s8) * 1.2) 0; }
  .page-head { flex-direction: column; align-items: flex-start; gap: var(--s4); padding-top: var(--s8); padding-bottom: var(--s5); }
  .controls { align-items: flex-start; }
  .seg-opt[data-filter="unstewarded"], .search, .seg-opt .long, .problems-head .lead { display: none; }
  .legend { display: none; }
  .legend-mobile { display: block; }
  .card.problem { padding: var(--s5); gap: var(--s3); }
  .problem-top { grid-template-columns: 1fr; gap: var(--s3); }
  .problem-side { align-items: flex-start; text-align: left; min-width: 0; }
  .problem-side .btn { display: none; }
  .card.problem .informal { font-size: 16.5px; }
  .card.problem .source { display: none; }
  .stmt { display: flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: 12.5px; }
  .stmt .node { flex: 1; }
  .stmt .role, .stmt .state, .stmt .attempts { display: none; }
  .problem-head, .graph-grid, .about { grid-template-columns: 1fr; gap: var(--s6); }
  .rules { grid-template-columns: 1fr; }
  .provenance .links { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* F04-T18: a superseded statement's way forward, and a revision's way back. */
.revision-note { border-left: 2px solid var(--bad); padding-left: var(--s4); color: var(--n300); font-size: 14px; }
.closing-note { border-left: 2px solid var(--n600); padding-left: var(--s4); color: var(--n300); font-size: 14px; }
.closing-note code { overflow-wrap: anywhere; }
/* F04-T38 (D-25 v3.35): a literature status — a fact in the neutral rule; no colour by status. */
.literature { border-left: 2px solid var(--n600); padding-left: var(--s4); margin: var(--s4) 0; color: var(--n300); font-size: 14px; width: 100%; }
.literature .kicker { color: var(--n500); }
.literature-fact, .literature-later { margin: var(--s2) 0; overflow-wrap: anywhere; }
.literature-fact strong { color: var(--n200); font-weight: 500; }
.literature-refs { margin: var(--s2) 0; padding-left: 1.2em; line-height: 1.6; }
.literature-refs li { overflow-wrap: anywhere; }
.literature .prose-block { margin: var(--s3) 0 var(--s2); }
.literature-waiting { padding-left: 1.2em; }
.literature-waiting .lit-row { margin-bottom: var(--s2); overflow-wrap: anywhere; }
/* F04-T54 (D-25 v3.45): the dispute sentence, and the node page's confirm/dispute slot. */
.literature-dispute { margin: var(--s2) 0; overflow-wrap: anywhere; }
/* F31-T11 (D-14 v3.47): the shelving controls — a slot on a statement's page, one per drawn
   route beside the sets table — and the routes list itself. */
.shelve-act, .retire-act { font-size: 14px; color: var(--n300); }
.shelve-act { display: block; margin: var(--s4) 0; }
.shelve-act .shelve-form, .retire-act .shelve-form { margin-top: var(--s2); }
.retire-act .shelve-form { display: flex; }
.shelved-note { margin: var(--s4) 0; }
.routes-table .set-routes { font-size: 13px; }
.routes-table .set-route { display: block; margin-bottom: var(--s1); overflow-wrap: anywhere; }
.routes-table .set-route .retire-act { margin-left: var(--s2); }
.routes-table .route-state { color: var(--n500); font-style: italic; }
.lit-act { margin: var(--s4) 0; font-size: 14px; color: var(--n300); }
.lit-act .cue { margin: 0 0 var(--s2); font-size: 13px; }
.lit-act .literature-waiting { margin: 0; }
.lit-dispute { margin-top: var(--s3); max-width: 60ch; }
.lit-dispute textarea { min-height: 5em; }
.defect-claims { border-left: 2px dashed var(--bad); padding-left: var(--s4); color: var(--n300); font-size: 14px; }
.defect-claims a.file { overflow-wrap: anywhere; }
.revision-note .why { display: block; margin-top: var(--s2); color: var(--n500); font-size: 12.5px; overflow-wrap: anywhere; }
/* F04-T20: wayfinding lines. */
.wayfinding, .jump { font-size: 13.5px; color: var(--n400); }

/* — Docs: how a statement and a problem change state (F04-T21) — */
.states { display: flex; flex-direction: column; gap: var(--s6); }
.states h3 { margin-top: var(--s4); }
.states ol.rules-order { margin: 0; padding-left: 1.4em; max-width: 72ch; color: var(--n300); font-size: 14px; line-height: 1.6; }
.states ol.rules-order li { margin-bottom: var(--s2); }
.states ol.rules-order strong { color: var(--n100); font-weight: 500; }
.smap-wrap { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); }
.smap-key { position: relative; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 12.5px; color: var(--n400); align-items: center; }
.smap-key .kicker { display: inline; font-size: 11px; color: var(--n500); }
.smap-key .term { position: static; padding-bottom: 2px; border-bottom-color: var(--n600); white-space: nowrap; }
.smap-key .term.tag { padding-bottom: 2px; }
.smap-key .term-card { width: min(300px, 100%); }
.smap-scroll { overflow-x: auto; }
.smap { display: block; width: 100%; min-width: 760px; height: auto; }
.smap text { fill: var(--text); font-family: var(--sans); font-size: 11.5px; }
.smap .name { font-size: 14px; font-weight: 500; }
.smap .sub { font-size: 10.5px; fill: var(--n400); }
.smap .proto { font-family: var(--mono); font-size: 10px; fill: var(--n500); }
.smap .lbl { font-size: 11px; fill: var(--n300); }
.smap .lbl.mech { fill: var(--accent-300); }
.smap .lbl.cur { fill: var(--warn); }
.smap .lbl.head { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--n500); }
.smap .code { font-family: var(--mono); font-size: 10px; }
.smap .box { fill: var(--bg); stroke: var(--n600); stroke-width: 1.2; }
.smap .box.st-open { stroke: var(--accent); }
.smap .box.st-needs-witness { stroke: var(--accent); stroke-dasharray: 2 2; }
.smap .box.st-proved { fill: rgba(145, 132, 217, 0.22); stroke: var(--accent); }
.smap .box.st-stale, .smap .box.st-disputed { stroke: var(--warn); }
.smap .box.st-refuted, .smap .box.st-defective { stroke: var(--bad); }
.smap .box.st-superseded, .smap .box.st-abandoned { stroke: var(--bad); stroke-dasharray: 4 3; }
.smap .box.chip { stroke: var(--n700); }
.smap .frontier { fill: rgba(145, 132, 217, 0.07); stroke: var(--accent-700); stroke-dasharray: 6 4; }
.smap .mech { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.smap .cur { stroke: var(--warn); stroke-width: 1.6; fill: none; stroke-dasharray: 6 4; }
.smap .thin { stroke: var(--divider); stroke-width: 1; fill: none; }
.smap .junction { fill: var(--accent); }
.smap marker .m-mech { fill: var(--accent); }
.smap marker .m-cur { fill: var(--warn); }
.smap-caption { font-size: 12.5px; color: var(--n400); margin: 0; max-width: 84ch; line-height: 1.6; }
table.actions { font-size: 13.5px; }
table.actions td.who { white-space: nowrap; color: var(--n300); }
table.actions td:first-child { color: var(--n100); }
table.actions code { color: var(--n400); font-size: 12px; }

/* F16-T6: the Docs page's connector cards, one per harness in gate/clients/registry.yaml. */
.connector { border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: var(--s3) var(--s6); margin: var(--s4) 0; }
.connector h3 { margin-top: var(--s2); }
.connector-status { color: var(--n700); font-size: 14px; }
.snippet-title { font-weight: 600; margin: var(--s3) 0 var(--s1); }
pre.snippet { background: var(--surface); padding: var(--s3) var(--s4); overflow-x: auto; white-space: pre; margin: 0 0 var(--s3); border-radius: var(--radius-sm); font-size: 13px; }
/* — F20-T8: glosses beside the Lean, explainer versions, history and diffs (R13, R14) — */
.gloss-slot { margin: var(--s2) 0 var(--s5); font-size: 14px; min-width: 0; }
.gloss-slot > .cue { font-size: 13px; margin: var(--s2) 0; }
.gloss, .informal-block { margin: var(--s2) 0; padding: var(--s1) var(--s5) var(--s2); border: 1px solid var(--divider); border-left: 3px solid var(--speculative); border-radius: var(--radius-sm); min-width: 0; }
.informal-block { border-left-color: var(--accent); }
.informal-block .informal { font-size: 15px; color: var(--n200); max-width: 72ch; margin: var(--s1) 0; }
.gloss-prose { max-width: 72ch; color: var(--n200); line-height: 1.6; }
.gloss-prose p { margin: var(--s1) 0 var(--s2); }
.gloss-foot { font-size: 12.5px; color: var(--n500); margin: var(--s1) 0; overflow-wrap: anywhere; }
details.history { margin: var(--s2) 0; font-size: 13px; color: var(--n300); min-width: 0; }
details.history > summary, details.version-text > summary, details.diff > summary { cursor: pointer; color: var(--accent-300); padding: var(--s1) 0; }
details.history > summary { min-height: 32px; display: list-item; }
.chain-head { margin: var(--s3) 0 var(--s1); color: var(--n400); font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
ol.versions { margin: var(--s1) 0 var(--s3); padding-left: 1.4em; }
li.version { margin: var(--s2) 0; }
.version-facts { margin: 0; overflow-wrap: anywhere; }
.version-facts .withdrawn { color: var(--bad); font-weight: 500; }
.version-facts .earlier { color: var(--warn); font-weight: 500; }
details.version-text .prose { border-left: 1px solid var(--divider); padding-left: var(--s4); color: var(--n300); }
details.version-text h4 { font-size: 14px; margin: var(--s3) 0 var(--s1); }
details.diff { margin: var(--s2) 0; }
pre.diff .diff-add { color: var(--accent-300); background: rgba(145, 132, 217, 0.14); }
pre.diff .diff-del { color: var(--bad); background: rgba(224, 122, 122, 0.12); }
pre.diff .diff-hunk { color: var(--n500); }
.history-foot { margin: var(--s2) 0 0; font-size: 12.5px; color: var(--n500); }
.deps { font-size: 14px; color: var(--n300); }
.deps ul { margin: var(--s1) 0 var(--s3); padding-left: 1.2em; }
.deps li { margin: var(--s1) 0; overflow-wrap: anywhere; }
.deps .gloss-line { color: var(--n300); }
.lemmas { font-size: 14px; color: var(--n300); }
.lemmas ul { margin: var(--s1) 0 var(--s3); padding-left: 1.2em; }
.lemmas li { margin: var(--s1) 0; overflow-wrap: anywhere; }
.lemmas .lemma-state { color: var(--n400); }
.explainer-of { margin: var(--s5) 0 var(--s1); color: var(--n400); font-size: 13.5px; overflow-wrap: anywhere; }
/* An anchored section: the outline steps it names beside its words; on a phone the steps first,
   the words directly under them. */
.ex-section { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: var(--s3) var(--s8); padding: var(--s3) 0; border-top: 1px solid var(--divider); }
.ex-section:first-of-type { border-top: 0; }
.ex-section[data-steps=""] { grid-template-columns: minmax(0, 1fr); }
.ex-steps { font-size: 13px; color: var(--n400); min-width: 0; }
.ex-steps ul { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.ex-steps li { margin: var(--s1) 0; overflow-wrap: anywhere; }
.ex-prose { min-width: 0; max-width: 72ch; }
.ex-prose h3 { font-size: 16px; margin: 0 0 var(--s2); }
.ex-prose p { overflow-wrap: anywhere; }
/* A statement row's words: its gloss's first sentence on a line of its own, under the id. */
.stmt .gloss-line { grid-column: 2 / -1; margin-top: calc(var(--s3) * -1); color: var(--n400); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .ex-section { grid-template-columns: minmax(0, 1fr); }
  /* F22-T18 (R): on a phone a section's words come before its steps column. */
  .ex-prose { order: -1; }
  .graph-grid { grid-template-columns: minmax(0, 1fr); }
  /* The statement graph keeps its drawn size and scrolls sideways, so its labels stay legible. */
  .dag { max-width: none; flex: none; }
  .gloss, .informal-block { padding-left: var(--s4); padding-right: var(--s4); }
  /* F04-T49 (Q48): on a phone a panel's Lean keeps its lines and scrolls inside its block, so a
     hypothesis is not broken mid-token and a proof's indentation stays readable; on a wider
     screen it wraps, so the whole statement is in sight without scrolling. */
  .panel pre.lean { white-space: pre; overflow-wrap: normal; overflow-x: auto; }
}
@media (max-width: 900px) {
  .stmt { flex-wrap: wrap; }
  .stmt .gloss-line { flex: 1 1 100%; order: 9; margin: calc(var(--s2) * -1) 0 var(--s1) calc(9px + var(--s3)); font-size: 12.5px; }
}
/* A version's file is named by its 64-character hash: let the path break, and let a prose diff
   wrap rather than scroll (measured at 390px: the unbroken path pushed the page to 738px). */
.explainer-version .label, .vouched { overflow-wrap: anywhere; }
details.diff pre.diff { white-space: pre-wrap; overflow-wrap: anywhere; }
/* — F21-T12: words by section (R14). Each section's state is said in text; the border only
   repeats it. An edit awaiting review sits beneath the words it would change, as a diff. — */
.words-state { display: inline-block; max-width: 100%; margin: 0 0 var(--s2); padding: 1px var(--s3); font-size: 12.5px; color: var(--n300); border: 1px solid var(--divider); border-radius: 999px; overflow-wrap: anywhere; }
.words-state[data-state="drafted"] { border-style: dashed; }
.words-state[data-state="verified"] { border-color: var(--accent); color: var(--accent-200); }
.pending-edit { margin: var(--s2) 0 var(--s4); padding: var(--s2) var(--s4); border: 1px dashed var(--warn); border-radius: var(--radius-sm); font-size: 13px; color: var(--n300); min-width: 0; }
.pending-head { margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.pending-head strong { color: var(--warn); }
.pending-edit pre.diff { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* — F22-T18: what a reader of a proof page needed (feature requests I, J, M-S). — */
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }
.sorry-note { margin: var(--s1) 0 var(--s3); font-size: 12.5px; color: var(--n400); overflow-wrap: anywhere; }
.thm-name, .po-name { font-size: .9em; color: var(--n400); overflow-wrap: anywhere; }
.dep-unused { color: var(--n500); }
.ex-steps-fold summary { cursor: pointer; color: var(--n300); }
.rv-toc { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px solid var(--divider); border-radius: var(--radius-sm); font-size: 13.5px; }
.rv-toc ol { margin: var(--s1) 0 0; padding-left: var(--s6); }
.rv-toc li { overflow-wrap: anywhere; }
.rv-order { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0 0 var(--s4); font-size: 12.5px; color: var(--n400); }
.proved-in-words { padding-bottom: calc(var(--s8) * 2); max-width: 80ch; }
.rv-order .chip[aria-current="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* F22-T19: words in review, written by in-review.js under the words they would change. */
.in-review { margin: var(--s2) 0; padding: var(--s1) var(--s3); border: 1px dashed var(--warn); border-radius: var(--radius-sm); font-size: 13px; color: var(--n300); }
.in-review p { margin: var(--s1) 0; overflow-wrap: anywhere; }
/* F22-T15: words now carry lists and headings; they wrap like the paragraphs (a long code span
   in a list item pushed a 390px page to 398px). */
.prose li, .prose h4, .prose h5, .prose h6, .ex-prose li { overflow-wrap: anywhere; }
/* F22-T15: a gloss's first sentence can carry display math; it scrolls inside the row rather than
   widening the page (measured: /problems/ at 390px was 671px wide before this rule). */
.gloss-line { min-width: 0; max-width: 100%; }
.gloss-line .math:has(.katex-display), .gloss-line .katex-display { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.rv-order .chip { padding: 2px var(--s3); border: 1px solid var(--divider); border-radius: 999px; color: var(--n300); text-decoration: none; }
h1 .thm-name { font-size: .55em; }
/* F23-T8: the header's session slot, filled by session.js once the service answers (R1, R15). */
.session-slot { display: inline-flex; align-items: center; gap: var(--s3); font-size: 14px; }
.session-slot .session-login { color: var(--text); font-family: var(--mono); font-size: 13px; }
/* F23-R14: how a steward came in, beside their name. */
.admitted { font-size: 12px; color: var(--n500); white-space: nowrap; }
/* F23-T8: /steward/ and /steward/<target>/. */
.steward-list { list-style: none; margin: var(--s6) 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.steward-row { display: flex; align-items: center; gap: var(--s6); padding: var(--s4) var(--s5); background: var(--surface); border-radius: var(--radius-md); }
.steward-row .id { font-family: var(--mono); font-size: 14px; flex: none; }
.steward-row .informal { flex: 1; min-width: 0; color: var(--n300); overflow-wrap: anywhere; }
.steward-head h1 { margin: var(--s2) 0 var(--s3); }
.steward-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s6); margin-top: var(--s6); }
.steward-asks ul { margin: 0; padding-left: var(--s6); line-height: 1.6; }
.steward-form { display: flex; flex-direction: column; gap: var(--s3); }
.steward-form-card:has(.steward-form:empty) { display: none; }
.steward-fields { display: flex; flex-direction: column; gap: var(--s2); }
.steward-fields label { font-size: 13.5px; color: var(--n400); }
.steward-fields .input { width: 100%; max-width: 100%; box-sizing: border-box; }
.steward-fields .tick { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s3) 0; color: var(--text); font-size: 14.5px; line-height: 1.5; }
.tick input { margin-top: 4px; flex: none; }
.form-error { color: var(--warn); margin: 0; overflow-wrap: anywhere; }
.form-error:empty { display: none; }
.receipt { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .steward-grid { grid-template-columns: minmax(0, 1fr); }
  .steward-row { flex-wrap: wrap; gap: var(--s3); }
}
/* F24-T6 (R9): the panel, its motions, the write-up ladder and their controls; the rules page. */
.panel-writeup h3 { font-size: 16px; margin-top: var(--s5); color: var(--n300); }
ul.panel-members, ul.motions, ul.writeups-other { padding-left: 1.2rem; }
ul.motions li, ul.writeups-other li { margin-bottom: var(--s3); overflow-wrap: anywhere; }
.panel-lapsed { color: var(--n400); font-size: 14px; }
.motion-n { font-family: var(--mono); color: var(--n500); }
.motion-meta { color: var(--n400); font-size: 13.5px; }
.outcome { font-weight: 500; }
.outcome.passed { color: var(--accent-300); }
.outcome.failed { color: var(--bad); }
.writeup-official { max-width: 900px; margin-bottom: var(--s5); }
.writeup-official p { margin: 0; overflow-wrap: anywhere; }
.writeup-title { font-size: 17px; }
.writeup-kind, .stage { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--n500); }
/* The ladder: every rung, the reached one marked, so a reader sees what comes next. */
ol.ladder { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: var(--s2) 0; counter-reset: rung; }
ol.ladder .rung { counter-increment: rung; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--n700); color: var(--n500); }
ol.ladder .rung::before { content: counter(rung) ". "; }
ol.ladder .rung.passed { color: var(--n300); border-color: var(--n600); }
ol.ladder .rung.reached { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 500; }
.panel-ctl, .writeup-ctl { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s4); max-width: 640px; }
.ctl-box { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.ctl-box h3 { margin: 0; font-size: 16px; color: var(--text); overflow-wrap: anywhere; }
.ctl-box summary { cursor: pointer; color: var(--accent-300); }
.ctl-field { display: flex; flex-direction: column; gap: 4px; }
.ctl-field label { font-size: 13.5px; color: var(--n400); }
.ctl-field .input { width: 100%; max-width: 100%; }
.ctl-act { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--divider); }
.ctl-box .btn, .ctl-act .btn { align-self: flex-start; white-space: normal; text-align: left; }
.ctl-box .tick { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14px; }
.vote-ctl { display: inline-flex; gap: var(--s2); margin-left: var(--s3); vertical-align: middle; }
.btn-small { padding: 3px 12px; font-size: 13px; }
ul.me-votes, ul.me-invitations { padding-left: 1.2rem; }
table.rules { font-size: 13.5px; }
table.rules td { vertical-align: top; overflow-wrap: anywhere; }
table.rules td:first-child { width: 22%; }
table.rules code { color: var(--n500); font-size: 12px; }
@media (max-width: 700px) {
  table.rules thead { display: none; }
  table.rules tr { display: block; padding: var(--s3) 0; border-bottom: 1px solid var(--divider); }
  table.rules td { display: block; width: auto !important; border: 0; padding: var(--s1) 0; }
  table.rules td::before { content: attr(data-label); display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500); }
  .vote-ctl { display: flex; margin: var(--s2) 0 0; }
}

/* F26-T12 (R16, R17; D-9 v3.39): the review page. Exhibits (kernel-checked) and judgements (a
   person's or a model's) wear two distinct section styles; the state tag sits beside the grade.
   F04-T52 (Q51): unlike the one-word status pills, the state line carries counts and can be
   longer than a phone is wide, so it wraps (the base .tag is nowrap) and never exceeds its row. */
.review-state { text-decoration: none; cursor: pointer; color: var(--accent-300); border-color: var(--accent-300); white-space: normal; max-width: 100%; }
.review-state:hover, .review-state:focus-visible { background: var(--n800); }
.review-words { font-style: italic; overflow-wrap: anywhere; }
.review-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s6); }
.review-stats .stat { padding: var(--s3) var(--s4); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); }
.review-stats .stat b { display: block; font-size: 22px; font-weight: 600; color: var(--n100); }
.review-stats .stat span { font-size: 13px; color: var(--n400); }
.review-cases ul { margin: var(--s2) 0 var(--s4); padding-left: 1.2em; }
.review-section { margin: var(--s6) 0; padding: var(--s4) var(--s6); border-radius: var(--radius-md); border: 1px solid var(--divider); border-left-width: 4px; }
.review-section h2 { margin-top: 0; }
.review-section.exhibits { border-left-color: var(--proved); background: var(--surface); }
.review-section.judgements { border-left-color: var(--speculative); border-style: dashed; border-left-style: solid; background: transparent; }
.review-section .section-kind { font-size: 13.5px; color: var(--n400); margin: 0 0 var(--s4); }
.review-section.exhibits .section-kind::before { content: "Kernel-checked"; display: inline-block; margin-right: var(--s2); padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--proved); color: var(--bg); }
.review-section.judgements .section-kind::before { content: "A judgement"; display: inline-block; margin-right: var(--s2); padding: 1px 8px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--speculative); color: var(--bg); }
.review-section details { margin: var(--s2) 0; }
.review-section details > summary { cursor: pointer; font-size: 13px; color: var(--n400); }
.review-section pre.lean { margin: var(--s2) 0 0; max-width: 60ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-section td { overflow-wrap: anywhere; }
table.review-candidates, table.review-tests, table.review-screens, table.review-matrix { min-width: 640px; }
.review-section th { white-space: normal; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-ok { background: var(--n800); color: var(--accent-300); }
.pill-bad { background: var(--n800); color: var(--bad); }
.pill-warn { background: var(--n800); color: var(--warn); }
.exhibit-detail { margin-top: var(--s2); font-size: 13px; color: var(--n300); }
.review-pairs { padding-left: 1.2em; }
.review-pairs > li { margin: var(--s2) 0; }
.review-pairs ul { padding-left: 1.2em; margin: var(--s1) 0; }
.pair-direction.proved { color: var(--accent-300); }
.pair-direction.refuted { color: var(--bad); }
.pair-direction.open { color: var(--warn); }
.review-questions { padding-left: 1.2em; }
.review-questions > li { margin: var(--s3) 0 var(--s5); }
.question-text { margin: 0; font-size: 15.5px; color: var(--n100); }
.answer { border-left: 2px solid var(--speculative); padding-left: var(--s4); margin: var(--s2) 0; }
.answer-text { margin: var(--s2) 0; font-style: italic; overflow-wrap: anywhere; }
.flag-inline { color: var(--warn); font-weight: 600; }
.waiting { color: var(--warn); }
.review-answer-ctl { display: flex; flex-direction: column; gap: var(--s3); margin: var(--s4) 0; }
.review-answer-ctl textarea.input { width: 100%; max-width: 100%; min-height: 96px; resize: vertical; }
table.review-matrix td.cell { text-align: center; }
table.review-matrix td.pass { color: var(--accent-300); }
table.review-matrix td.fail { color: var(--bad); }
table.review-matrix td.error { color: var(--warn); }
table.review-matrix td.not-run { color: var(--n500); }
.mutants { color: var(--n200); }
aside.judgement { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); border: 1px dashed var(--speculative); border-left: 4px solid var(--speculative); border-radius: var(--radius-sm); }
aside.judgement .kicker { color: var(--speculative); }
aside.judgement p { margin: var(--s2) 0 0; font-size: 14px; color: var(--n300); }
.signature-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s4); }
.signature-slot { padding: var(--s4); border-radius: var(--radius-sm); border: 1px dashed var(--divider); }
.signature-slot.filled { border-style: solid; border-color: var(--accent-300); }
.signature-slot p { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .review-section { padding: var(--s3) var(--s4); }
  .review-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* F04-T50 (Q49): a statement's page reads top down — the claim, the explainer's overview, how it
   was proved, what is known, work on it, the record folded — with a column of facts beside it. */
.node-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "head facts" "body facts"; column-gap: calc(var(--s8) * 2); align-items: start; }
.node-head { grid-area: head; display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.node-head > .crumbs { margin-top: calc(var(--s8) * 1.6); }
.node-head h1 { font-size: 36px; margin: 0; overflow-wrap: anywhere; }
.node-status { margin: 0; font-size: 15px; }
.node-head .hole-of, .node-head .panel-note, .node-head .revision-note { margin: 0; font-size: 14px; color: var(--n400); max-width: 70ch; }
.node-claim { display: flex; flex-direction: column; gap: var(--s3); max-width: 80ch; }
.node-claim .claim-math, .node-claim .claim-math p { margin: 0; font-size: 19px; line-height: 1.5; color: var(--text); overflow-x: auto; }
.node-claim .claim-notes { font-size: 14px; color: var(--n300); }
.node-claim .claim-notes ul { margin: 0; padding-left: 1.2em; line-height: 1.6; }
.node-claim .claim-mark, .node-claim .explain, .node-claim .claim-words { margin: 0; }
.node-claim pre.lean { margin: var(--s2) 0 0; }
.node-facts { grid-area: facts; position: sticky; top: var(--s8); margin-top: calc(var(--s8) * 1.6); font-size: 13px; }
.facts-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s5); margin: 0; }
.facts-list dt { color: var(--n500); white-space: nowrap; }
.facts-list dd { margin: 0; color: var(--n300); overflow-wrap: anywhere; }
.node-body { grid-area: body; min-width: 0; }
.node-sec { margin-top: calc(var(--s8) * 1.4); padding-top: var(--s5); border-top: 1px solid var(--divider); max-width: 90ch; }
.node-sec > h2.kicker { margin: 0 0 var(--s4); font-weight: 500; }
.node-sec > p, .node-sec .how-line { font-size: 15px; line-height: 1.6; margin: 0 0 var(--s3); }
.node-sec .wayfinding { font-size: 13px; color: var(--n400); margin-top: var(--s4); }
details.fold { margin: var(--s2) 0; }
details.fold > summary, details.ex-more > summary, details.sorry-fold > summary { cursor: pointer; color: var(--accent-300); font-size: 14px; padding: var(--s1) 0; }
details.fold > .fold-body { margin-top: var(--s3); }
details.ex-more { margin: var(--s4) 0 var(--s2); }
details.ex-more[open] > summary { margin-bottom: var(--s3); }
details.sorry-fold > summary { font-size: 12.5px; color: var(--n400); }
.record-list { display: flex; flex-direction: column; border-top: 1px solid var(--divider); }
details.rec { margin: 0; padding: var(--s3) 0; border-bottom: 1px solid var(--divider); }
details.rec > summary { color: var(--n300); }
details.rec[open] > summary { color: var(--text); }
@media (max-width: 900px) {
  .node-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "facts" "body"; }
  .node-facts { position: static; margin-top: var(--s6); }
  .node-head h1 { font-size: 28px; }
}
.node-claim pre.lean, .node-sec .split-into pre.lean { white-space: pre-wrap; overflow-wrap: anywhere; }
.node-sec .split-into { margin: var(--s4) 0; }
@media (max-width: 700px) {
  /* F04-Q48's rule on the page too: on a phone a Lean line stays whole and its block scrolls. */
  .node-claim pre.lean, .node-sec .split-into pre.lean { white-space: pre; overflow-x: auto; overflow-wrap: normal; }
}
/* — F27-T3 (R10, R11): the Routes section. Eight set hues, chosen to read on the one (dark)
   theme's --surface and --bg and to stay apart from each other; a ninth set on is grey. Proved and
   open are a second channel, never a hue: proved is solid, open is pale with a dashed ring. — */
:root {
  --set-1: #7fb0ff;
  --set-2: #f2a65a;
  --set-3: #5fd0a0;
  --set-4: #ee8cc0;
  --set-5: #d9c75a;
  --set-6: #63d3e6;
  --set-7: #c4a6ff;
  --set-8: #e8836a;
  --set-more: var(--n600);
}
.routes-section { display: flex; flex-direction: column; gap: var(--s6); padding-bottom: calc(var(--s8) * 2); }
.routes-section .cue { font-size: 14px; margin: 0; max-width: 92ch; }
.routes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: calc(var(--s8) * 1.5); align-items: start; }
.routes-wrap { padding: var(--s6); min-width: 0; }
.routes-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 12.5px; color: var(--n400); align-items: center; }
.routes-key-item { display: inline-flex; align-items: center; gap: var(--s2); }
.routes-key-mark { flex: none; }
.routes-key-note { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--n400); }
.routes-scroll { overflow-x: auto; padding: var(--s6) 0 0; }
.routes-svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.routes-svg text { fill: var(--text); font-family: var(--mono); font-size: 13px; }
.routes-svg .pill { fill: var(--bg); stroke: var(--divider); stroke-width: 1; }
.routes-svg a:hover .pill, .routes-svg a:focus-visible .pill { stroke: var(--accent); }
.routes-svg .rline { stroke: var(--n600); stroke-width: 1.5; fill: none; }
.routes-svg .rline.dead { stroke-dasharray: 4 3; stroke: var(--n700); }
.routes-svg .rnode, .routes-svg .rline, .routes-svg .junction, .routes-svg .wedge { transition: opacity .12s; }
.routes-svg .st-dead text { fill: var(--n500); text-decoration: line-through; }
.routes-svg .st-dead .pill { stroke-dasharray: 4 3; }
/* the wedges, the ring and the marks — shared by the drawing and its key */
.wedge.set-1 { fill: var(--set-1); } .wedge.set-2 { fill: var(--set-2); }
.wedge.set-3 { fill: var(--set-3); } .wedge.set-4 { fill: var(--set-4); }
.wedge.set-5 { fill: var(--set-5); } .wedge.set-6 { fill: var(--set-6); }
.wedge.set-7 { fill: var(--set-7); } .wedge.set-8 { fill: var(--set-8); }
.wedge.set-more { fill: var(--set-more); }
.wedge { stroke: var(--bg); stroke-width: 1; }
.core { fill: var(--bg); stroke: none; }
.ring { fill: none; stroke: var(--text); stroke-width: 1.5; }
.st-open .ring { stroke: var(--n400); stroke-dasharray: 3 2; }
.st-dead .ring { stroke: var(--bad); stroke-dasharray: 3 2; }
/* F28: closable — still open (the ring stays dashed), drawn in the accent: the closing proof is pending */
.closable .asm { fill: var(--accent-300); }
.closable .ring { stroke: var(--accent-300); }
.routes-svg .closable .pill { stroke: var(--accent-300); }
.stem { stroke: var(--n600); stroke-width: 1.5; }
.stem.dead, .junction.dead .stem { stroke-dasharray: 4 3; stroke: var(--n700); }
.and-mark { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.or-mark { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.dead-mark { fill: var(--bg); stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 2 2; }
.dead-cross { stroke: var(--bad); stroke-width: 1.5; }
/* a set lit, everything else dimmed; nothing moves */
.routes-svg.picking .rnode:not(.lit), .routes-svg.picking .junction:not(.lit) { opacity: .25; }
.routes-svg.picking .rline:not(.lit) { opacity: .12; }
.routes-svg.picking .rline.lit { stroke: var(--accent-300); stroke-width: 2.25; }
.routes-svg .wedge.off { opacity: .15; }
/* the table */
.routes-table-wrap { min-width: 0; position: sticky; top: var(--s6); }
.routes-closable { font-size: 13.5px; color: var(--n300); margin: var(--s3) 0 0; }
.routes-count { font-size: 13.5px; color: var(--n400); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.routes-fewest { font: inherit; font-size: 12.5px; color: var(--n300); background: var(--bg); border: 1px solid var(--divider); border-radius: 999px; padding: 2px 12px; cursor: pointer; }
.routes-fewest:hover, .routes-fewest:focus-visible { border-color: var(--accent); }
.routes-fewest[aria-pressed="true"] { border-color: var(--accent); color: var(--text); background: rgba(145, 132, 217, .14); }
.routes-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.routes-table th { padding: var(--s2); white-space: nowrap; }
.routes-table td { padding: var(--s2); border-bottom: 1px solid var(--divider); vertical-align: top; overflow-wrap: anywhere; }
.routes-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
.routes-table td:first-child { white-space: nowrap; overflow-wrap: normal; }
.routes-table th[data-col="1"], .routes-table th[data-col="2"], .routes-table th[data-col="3"], .routes-table th[data-col="4"], .routes-table th[data-col="5"] { text-align: right; }
.routes-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.routes-sort:hover { color: var(--text); }
th[aria-sort="ascending"] .routes-sort::after { content: " ↑"; }
th[aria-sort="descending"] .routes-sort::after { content: " ↓"; }
.set-row { cursor: pointer; }
.set-row:hover, .set-row.previewed { background: rgba(233, 233, 237, 0.05); }
.set-row[aria-selected="true"] { background: rgba(145, 132, 217, .16); }
.set-swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: var(--s2); vertical-align: -1px; }
.set-swatch.set-1 { background: var(--set-1); } .set-swatch.set-2 { background: var(--set-2); }
.set-swatch.set-3 { background: var(--set-3); } .set-swatch.set-4 { background: var(--set-4); }
.set-swatch.set-5 { background: var(--set-5); } .set-swatch.set-6 { background: var(--set-6); }
.set-swatch.set-7 { background: var(--set-7); } .set-swatch.set-8 { background: var(--set-8); }
.set-swatch.set-more { background: var(--set-more); }
.set-which { font-size: 12px; color: var(--n400); }
.set-which summary { cursor: pointer; color: var(--accent-300); }
.set-which p { margin: var(--s2) 0 0; color: var(--n500); }
.set-which ul { margin: 0; padding-left: 1.1em; }
.routes-hint { font-size: 12.5px; color: var(--n400); margin-top: var(--s3); }
@media (max-width: 1100px) {
  .routes-grid { grid-template-columns: minmax(0, 1fr); }
  .routes-table-wrap { position: static; }
}
@media (max-width: 700px) {
  /* the drawing keeps its drawn size and scrolls in its own box, as the statement graph does */
  .routes-svg { max-width: none; }
  .routes-wrap { padding: var(--s4); }
  .routes-table-wrap { overflow-x: auto; }
}
/* F27-T7, F29-T6: the "Sufficient sets" box inside the routes drawing, down its left edge: the
   selector tree, one row per branch or set. A pressed row is outlined; a row whose sets are all
   lit (a hover, or a leaf under a pressed branch) is tinted. */
.routes-svg .selector-box { fill: var(--bg); stroke: var(--divider); stroke-width: 1; }
.routes-svg .selector-head { font-family: var(--sans, inherit); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: var(--n400); }
.routes-svg .sel-row { cursor: pointer; }
.routes-svg .sel-row rect { fill: var(--bg); stroke: var(--divider); stroke-width: 1; transition: fill .12s, stroke .12s; }
.routes-svg .sel-row text { font-family: var(--sans, inherit); font-size: 13px; }
.routes-svg .sel-row.branch text { fill: var(--n300); }
.routes-svg .sel-row .sel-words { font-size: 11.5px; fill: var(--n400); }
.routes-svg .sel-row:hover rect, .routes-svg .sel-row:focus-visible rect { stroke: var(--accent); }
.routes-svg .sel-row:focus { outline: none; }
.routes-svg .sel-row.previewed rect { fill: rgba(145, 132, 217, .10); }
.routes-svg .sel-row.selected rect { stroke: var(--accent); stroke-width: 2; fill: var(--n800, var(--bg)); }
.routes-svg .sel-row.selected text { font-weight: 600; fill: var(--text); }
.routes-svg .sel-row.selected .sel-words { font-weight: 400; }
.routes-svg .swatch.set-1 { fill: var(--set-1); } .routes-svg .swatch.set-2 { fill: var(--set-2); }
.routes-svg .swatch.set-3 { fill: var(--set-3); } .routes-svg .swatch.set-4 { fill: var(--set-4); }
.routes-svg .swatch.set-5 { fill: var(--set-5); } .routes-svg .swatch.set-6 { fill: var(--set-6); }
.routes-svg .swatch.set-7 { fill: var(--set-7); } .routes-svg .swatch.set-8 { fill: var(--set-8); }
.routes-svg .swatch.set-more { fill: var(--set-more); }

/* F30-T2: one statement graph. Proved is a filled pill (R2); the route junctions and the OR
   diamond come from the routes drawing; what the opening layout does not show is off-view; the
   selector is drawn as pills and lines below the drawing beside the sets table (R5, R9). */
.dag .node.proved rect.pill { fill: var(--accent); fill-opacity: .22; stroke: var(--accent); stroke-width: 1.5; }
.dag .node.proved text { fill: var(--text); }
.dag .node.proved circle:not(.halo) { fill: var(--accent); stroke: var(--accent); }
.dag .off-view { display: none; }
.dag .junction .stem { stroke: var(--n600); stroke-width: 1.5; }
.dag .junction.dead .stem { stroke-dasharray: 4 3; stroke: var(--n700); }
.dag .and-mark { fill: var(--text); stroke: var(--bg); stroke-width: 1.5; }
.dag .or-mark { fill: var(--bg); stroke: var(--text); stroke-width: 1.5; }
.dag .dead-mark { fill: var(--bg); stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 2 2; }
.dag .dead-cross { stroke: var(--bad); stroke-width: 1.5; fill: none; }
.dag .node.closable rect.pill { stroke: var(--accent-300); }
.dag .node .asm { fill: var(--accent-300); stroke: none; }
.dag .node.closable circle:not(.halo):not(.asm) { display: none; }
.dot-route-and { border: 0; background: var(--text); width: 9px; height: 9px; border-radius: 50%; }
.dot-route-or { border: 1.5px solid var(--text); border-radius: 1px; transform: rotate(45deg); width: 8px; height: 8px; }
.dot-route-dead { border: 1.5px dashed var(--bad); }
.dot-closable { border: 0; background: var(--accent-300); border-radius: 1px; width: 8px; height: 8px; }
/* F31-T10 (D-14 v3.47): a shelved statement is a mark, not a status — the pill keeps its status
   colour and is dimmed, its outline dotted; the key's swatch is the same dotted ring. */
.dag .node.shelved { opacity: .45; }
.dag .node.shelved rect.pill { stroke-dasharray: 2 3; }
.dot-shelved { border-style: dotted; border-color: var(--n500); opacity: .7; }
/* F04-T55 (D-30 v3.46): the relation trunks from a variant into the root — solid and a little
   heavier than a dependency; the refuting one in --refute, with the selector branch beneath it. */
.dag .edge.relation.resolves { stroke: var(--n500); stroke-width: 2; }
.dag .edge.relation.refutes { stroke: var(--refute); stroke-width: 2; }
.dag .edge.relation.refutes.lit { stroke: var(--refute); }
.dot-relation-resolves { width: 16px; height: 0; border: 0; border-top: 2px solid var(--n500); border-radius: 0; vertical-align: 3px; }
.dot-relation-refutes { width: 16px; height: 0; border: 0; border-top: 2px solid var(--refute); border-radius: 0; vertical-align: 3px; }
/* F30-T16: a partial variant's line into the problem: dashed, since it proves only a weaker version. */
.dag .edge.relation.partial { stroke: var(--n500); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dot-relation-partial { width: 16px; height: 0; border: 0; border-top: 2px dashed var(--n500); border-radius: 0; vertical-align: 3px; }
.selector .side-refutes .dot { stroke: var(--refute); }
.selector .sel-edge.side-refutes { stroke: var(--refute); }
.selector .sel-node.side-refutes.lit .dot, .selector .sel-edge.side-refutes.lit { stroke: var(--refute); }
.set-side { display: inline-block; margin-left: var(--s2); padding: 0 6px; font-size: 11px; line-height: 16px; border-radius: 999px; color: var(--refute); border: 1px solid var(--refute); vertical-align: 1px; }
/* F04-T54 (D-25 v3.45): the literature mark — a small square inside a pill's top-right corner and
   the same square inline as a badge (the key, the listing row, the node page's head). The colour
   is the status (--lit); hollow and dashed while only proposed, filled once confirmed. It never
   touches the pill's own status: no rule here keys on .node.lit-*, nothing is muted. */
.lit-open { --lit: var(--lit-open); }
.lit-known { --lit: var(--lit-known); }
.lit-elementary { --lit: var(--lit-elementary); }
.dag .lit-mark rect { fill: none; stroke: var(--lit); stroke-width: 1.5; }
.dag .lit-mark.proposed rect { stroke-dasharray: 2 1.5; }
.dag .lit-mark.confirmed rect { fill: var(--lit); }
.lit-badge { display: inline-block; width: 8px; height: 8px; border-radius: 1.5px; border: 1.5px solid var(--lit); vertical-align: 0; margin-left: var(--s2); flex: none; }
.lit-badge.proposed { border-style: dashed; }
.lit-badge.confirmed { background: var(--lit); }
.dag-legend .lit-term .lit-badge { margin: 0 var(--s2) 0 0; }
.node-status .lit-badge { margin-left: var(--s3); }
.view-toggle { font: inherit; font-size: 12px; color: var(--n300); background: var(--bg); border: 1px solid var(--divider); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.view-toggle:hover, .view-toggle:focus-visible { border-color: var(--accent); }
.view-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.sets-grid { margin-top: var(--s6); }
/* T7: the selector is a small tree pinned at the top of the drawing's card, so it is in view
   while the drawing scrolls past; words on hover only (the tooltip), a dot per node. */
.selector-wrap { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: var(--s4); margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-sm); width: max-content; max-width: 100%; overflow-x: auto; }
.selector-wrap .sel-head { max-width: 220px; }
.selector-wrap .kicker { margin: 2px 0 0; white-space: nowrap; }
.selector-wrap .kicker .term { color: inherit; border-bottom-color: var(--accent-300); }
.selector-wrap .sel-cue { margin: var(--s2) 0 0; font-size: 12px; line-height: 1.45; color: var(--n400); }
/* F27-R13: the "Stop at proved statements" toggle, in the panel that holds the tree; unticked, the
   sets table shows its followed reading (.v-follow in place of .v-stop) and each set view is its
   follow/ twin. */
.selector-wrap .sel-follow { display: block; margin: var(--s2) 0 0; font-size: 12px; line-height: 1.45; color: var(--n300); cursor: pointer; white-space: nowrap; }
.selector-wrap .sel-follow input { margin: 0 var(--s2) 0 0; vertical-align: -1px; accent-color: var(--accent); }
.sets-grid .v-follow { display: none; }
.sets-grid.follow-proved .v-follow { display: inline; }
.sets-grid.follow-proved ul.v-follow { display: block; }
.sets-grid.follow-proved .v-stop { display: none; }
.selector { display: block; flex: none; }
.selector .dot { fill: var(--bg); stroke: var(--n500); stroke-width: 1.5; }
.selector text { fill: var(--text); font-family: var(--sans, inherit); font-size: 9.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.selector .sel-node { cursor: pointer; }
.selector .kind-node .dot { fill: var(--bg); stroke: var(--n400); }  /* T9, T10: a hollow square, neither proved nor a statement */
.selector .kind-root .dot { stroke-dasharray: 2 2; }
.selector .kind-leaf .dot { stroke: var(--accent-300); }
.selector .kind-proof .dot { fill: var(--accent); fill-opacity: .25; stroke: var(--accent); }
.selector .sel-node:hover .dot, .selector .sel-node:focus-visible .dot, .selector .sel-node.previewed .dot { stroke: var(--accent); stroke-width: 2.5; }
.selector .sel-node[aria-pressed="true"] .dot { fill: var(--select); stroke: var(--select); }
.selector .sel-node[aria-pressed="true"] text { fill: var(--bg); }
.selector .sel-edge { stroke: var(--n600); stroke-width: 1.5; fill: none; cursor: pointer; }
.selector .sel-edge[data-view]:hover, .selector .sel-edge:focus-visible, .selector .sel-edge.previewed { stroke: var(--accent); stroke-width: 3; }
.selector .sel-edge[aria-pressed="true"] { stroke: var(--select); stroke-width: 3.5; }
/* T8: the selector's own hover — the node, its lines and their other ends lit, the rest dimmed */
.selector .sel-node, .selector .sel-edge { transition: opacity .12s; }
.selector.hovering .sel-node:not(.lit) { opacity: .3; }
.selector.hovering .sel-edge:not(.lit) { opacity: .2; }
.selector .sel-edge.lit { stroke: var(--accent-300); stroke-width: 2.5; }
.selector .sel-node.lit .dot { stroke: var(--accent-300); }
.sel-tip { position: absolute; z-index: 4; margin: 0; max-width: 320px; padding: var(--s2) var(--s3); font-size: 12.5px; line-height: 1.45; color: var(--text); background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); pointer-events: none; }
.selector-wrap .proof-note { flex: 1 1 100%; margin: 0; }

/* F30-T3 */
/* The script's states (R7, R8): a preview lights a view's nodes and lines and dims the rest
   without moving anything; a transition fades what leaves (200 ms), slides what stays, and
   fades in what arrives (200 ms); a table row previews and selects like a selector leaf. */
.dag .node, .dag .edge, .dag .junction { transition: opacity .2s; }
.dag .fading { opacity: 0 !important; }
.dag.picking .node:not(.lit), .dag.picking .junction:not(.lit) { opacity: .25; }
.dag.picking .edge:not(.lit) { opacity: .12; }
.dag.hovering .junction:not(.lit) { opacity: .35; }
tr.set-row { cursor: pointer; }
tr.set-row.previewed td { background: rgba(128, 128, 128, .12); }