/* Tokens first, roles not raw hex, and dark declared under BOTH the media query
   (OS setting) and the [data-theme] scope (an explicit choice), so the toggle
   wins in either direction.

   The three series colours are the validated categorical slots 1-3. They are
   capped at three deliberately: the storage map is a matrix, every cell adjacent
   to every other, which is the all-pairs case where only three hues clear the
   colourblind floors. Slot 3 (aqua) sits below 3:1 on the light surface, so the
   relief rule applies — every cell carries a visible glyph and the field table
   states the same fact as text. */
:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  /* the home page is plain white paper, the same as cprs-explorer's front
     page (operator, 2026-09-21); every other screen keeps the off-white. */
  --home-paper: #ffffff;
  --surface-2: #f2f1ee;
  --surface-3: #e7e6e1;
  --border: #d6d5cf;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #7a7975;
  /* Chart ink, deliberately more saturated than the page chrome: these marks
     are the content, and at 1-2 px they need chroma to read as anything at all.
     Validated against surface #fcfcfb — lightness band, chroma floor,
     normal-vision separation and 3:1 contrast all pass. */
  --series-value: #1668e3;
  --series-pointer: #f2600c;
  --series-elsewhere: #06a77d;
  --series-other: #9a9992;
  --accent: #1668e3;
  /* The resting web in the coupling circle. A cool slate rather than the text
     grey it borrowed: it reads as structure instead of as faded text, and it
     sits under the green/red highlight without competing with it. */
  --chart-web: #7c90b4;
  --out-hue: #1f8a3c;
  --in-hue: #d62f22;
  --row: 24px;
  /* The home page's two map scales (2026-09-17): records held, a blue ramp
     on the value series; distance from the patient file, an orange ramp on
     the pointer series. `--home-vu` is an absence — not counted — so it sits
     outside both hues. */
  --home-empty: #e2e1db;
  --home-v1: #bcd0f2;
  --home-v2: #7fa8ec;
  --home-v3: #1668e3;
  --home-v4: #0a2a66;
  --home-vu: #ecdccb;
  --home-p0: #f2600c;
  --home-p1: #f5925a;
  --home-p2: #f8bd93;
  --home-p3: #f6d9c3;
  --home-p4: #efe6dc;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --home-paper: #1a1a19;
    --surface-2: #232322;
    --surface-3: #2e2e2c;
    --border: #3d3d3a;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #8f8e86;
    --series-value: #4f9bff;
    --series-pointer: #ff8a3d;
    --series-elsewhere: #22c39a;
    --series-other: #6f6e68;
    --accent: #4f9bff;
    --chart-web: #6d80a3;
    --out-hue: #54c470;
    --in-hue: #ff6f61;
    --home-empty: #2f2f2c;
    --home-v1: #1f3c68;
    --home-v2: #2c62b5;
    --home-v3: #4f9bff;
    --home-v4: #cfe3ff;
    --home-vu: #3f352b;
    --home-p0: #ff8a3d;
    --home-p1: #d9702f;
    --home-p2: #9c5528;
    --home-p3: #6a3e22;
    --home-p4: #45352a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --home-paper: #1a1a19;
  --surface-2: #232322;
  --surface-3: #2e2e2c;
  --border: #3d3d3a;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8f8e86;
  --series-value: #4f9bff;
  --series-pointer: #ff8a3d;
  --series-elsewhere: #22c39a;
  --series-other: #6f6e68;
  --accent: #4f9bff;
  --chart-web: #6d80a3;
  --out-hue: #54c470;
  --in-hue: #ff6f61;
  --home-empty: #2f2f2c;
  --home-v1: #1f3c68;
  --home-v2: #2c62b5;
  --home-v3: #4f9bff;
  --home-v4: #cfe3ff;
  --home-vu: #3f352b;
  --home-p0: #ff8a3d;
  --home-p1: #d9702f;
  --home-p2: #9c5528;
  --home-p3: #6a3e22;
  --home-p4: #45352a;
}

* { box-sizing: border-box; }

/* Any `display` declaration beats the UA's [hidden] rule, so hiding an element
   that has one silently does nothing. The graph controls stayed on screen for
   every non-graph screen exactly this way: hidden=true, still displayed. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-1);
  color: var(--text-primary);
  font: 13px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  height: 100vh;
  display: grid;
  /* header · sub-tabs · the screen's one-line description · its summary ·
     main. Every row MUST be declared, and `main` MUST be the last: with
     `auto 1fr` the sub-tab strip took the flexible row, stretched to 529 px of
     empty space, and pushed `main` into an implicit auto row that then
     squeezed every screen below it. The second time, adding `#screen-line`
     left `main` implicit again and it did NOT look broken — a definite-height
     grid hands leftover space to auto rows, so the implicit row absorbed it.
     Gated now, on the child count in index.html. */
  grid-template-rows: auto auto auto auto 1fr;
  /* One column no wider than the window. An implicit `auto` column sized
     itself to the widest unbreakable thing in any row — the five top tabs at
     a 400 px phone width — so every screen scrolled sideways (measured
     2026-09-17: 470 px on home, 527 on schema & fields, 646 on provenance).
     Capped, wide content scrolls inside its own pane instead. */
  grid-template-columns: minmax(0, 1fr);
}

code, .mono, .num { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.num { font-variant-numeric: tabular-nums; }

/* ---- header ---- */
header {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;               /* the tab row must never clip a label */
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
header h1 { font-size: 13px; margin: 0; font-weight: 600; letter-spacing: .01em; }
/* The five top tabs are 445 px of segmented control, which forced every screen
   to 470 px at a 400 px phone width (measured 2026-09-17). On a narrow screen
   the row scrolls sideways inside itself instead; the menus it opens are
   fixed-position siblings, so nothing they show is clipped. */
header #tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
header h1 button {
  font: inherit; color: var(--text-primary); background: none; border: 0;
  padding: 0; cursor: pointer; letter-spacing: inherit;
}
header h1 button:hover { color: var(--accent); }
header h1 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
#q {
  flex: 1 1 200px;
  max-width: 380px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
}
#q:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- panes ---- */
/* The last row of the body grid, NAMED rather than auto-placed: the summary
   above it is `hidden` until the reader opens it, and a hidden child takes no
   grid slot, so an auto-placed `main` slides up into the summary's row and
   leaves the flexible one empty. */
main {
  display: grid;
  grid-row: 5;
  grid-template-columns: var(--rail-w) 1fr;
  min-height: 0;
}
:root {
  /* As wide as the widest FACET LABEL plus five characters (operator,
     2026-09-12). That label is now `CDW (BISL 2024-10)` at 18 — `package
     (namespace)` was 19 until it was renamed to `package` on 2026-09-14 — so
     23 characters of the 13 px sans the labels are set in, plus the arrow, the
     gaps, the rail's padding and its border. Both the face and the widest
     label are inputs here: a width derived from either is wrong the moment
     that one changes. */
  --rail-w: calc(23 * 6.6px + 37px);
}
#rail {
  border-right: 1px solid var(--border); background: var(--surface-2);
  display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0;
  position: relative;
}
/* The rail's right edge, draggable. Over the border rather than beside it, so
   it costs the rail no width — and `z-index` above the panels it overlaps, or
   the topmost one would swallow the grab. */
#rail-edge {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  z-index: 4; cursor: col-resize; background: none;
}
#rail-edge:hover, #rail-edge.dragging { background: var(--accent); opacity: .5; }
#rail-edge:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.no-rail #rail-edge, html.rail-collapsed #rail-edge { display: none; }
/* Nothing selects while the edge is moving. */
body:has(#rail-edge.dragging) { user-select: none; cursor: col-resize; }
/* search · the grain switch · filters · the splitter · the count · the list.
   The filters take whatever the drag set and the list takes the rest, so a
   resize cannot leave either sized for a window that is gone. Every row is
   DECLARED — this grid's children auto-place, and an undeclared one takes the
   `1fr` and leaves the list sized by its content. */
#rail.with-facets { grid-template-rows: auto auto var(--facets-h, auto) auto auto 1fr; }

/* Tables or the fields inside them. A segmented control, the same one the tabs
   wear, because it is the same gesture — pick one of two — and this estate has
   one look for that. */
#rail-grain { padding: 5px 8px 0; }
#rail-grain[hidden] { display: none; }
.grain-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.grain-switch > .k { color: var(--text-muted); }
.grain-switch .tabgroup { flex: 1 1 auto; min-width: 0; }
#rail.with-facets #rail-facets { max-height: none; }
#rail-split {
  height: 5px; cursor: row-resize; background: var(--border);
  border-top: 1px solid var(--surface-2); border-bottom: 1px solid var(--surface-2);
}
#rail-split:hover, #rail-split.dragging { background: var(--accent); }
#rail-split:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
#rail-split[hidden] { display: none !important; }
/* Nothing selects while the boundary is moving — a drag that highlights the
   facet names it passes over reads as a broken drag. */
#rail.with-facets:has(#rail-split.dragging) { user-select: none; }
#rail-count {
  margin: 0; padding: 3px 10px 4px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
#rail-count[hidden] { display: none !important; }
/* The facets scroll inside whatever height the splitter gave them. A stale
   `max-height: 45vh` sat below the `max-height: none` above and won by order,
   so the drag could not grow them past 45 % of the window. */
#rail-facets { overflow-y: auto; min-height: 0; padding: 6px 10px 10px; }
#rail-facets[hidden] { display: none !important; }

/* ---- the facet rail ------------------------------------------------------
   ONE value per row, no boxes, no rules, no space between rows. A filter list
   is read down as a single block: a border around part of it says "these are
   separate things", and every pixel between rows is a pixel of list nobody can
   see.

   This whole block was deleted by accident on 2026-09-12 — it sat inside the
   range cut when the `discover` screen's card CSS went — and the values fell
   back to the browser's own <button>: bordered, grey and INLINE, so nine of
   them sat across two lines like chips. Nothing warned, because a stylesheet
   has no missing symbol; it just renders the default. */
.discover-facets { display: flex; flex-direction: column; }

/* Two controls over the whole rail, right-aligned so they read as belonging to
   the rail rather than to the first facet under them. */
.facet-tools { display: flex; justify-content: flex-end; gap: 2px; margin-bottom: 1px; }
.facet-tool {
  width: 18px; height: 15px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; border: 0; border-radius: 3px;
  background: none; color: var(--text-muted); cursor: pointer;
  font: 600 11px ui-monospace, monospace; line-height: 1;
}
.facet-tool:hover:not(:disabled) { background: var(--surface-3); color: var(--text-primary); }
.facet-tool:disabled { opacity: .3; cursor: default; }
.facet-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.facet-group { border: 0; background: none; margin: 0; padding: 0; }
/* `margin: 0` beats the blanket `details > summary` rule, which puts 10 px above
   EVERY summary in the app — right for a roll-up inside prose, and the whole of
   the gap between these category names. */
.facet-group > summary {
  cursor: pointer; margin: 0; padding: 1px 2px 0;
  display: flex; align-items: baseline; gap: 4px;
  /* The size the rest of the left pane is set in — the tree rows and the search
     box are both 13 px sans (operator, 2026-09-12). Uppercase monospace at
     10 px was a different voice in the same column, and at 13 px it would not
     fit the rail's own width. Weight, not case, is what makes it a heading. */
  font: 400 13px/17px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text-secondary);
  /* `display: flex` on a summary drops the UA disclosure marker, so the arrow
     is drawn here. The webkit rule is belt and braces for the browsers that
     keep theirs anyway — two markers is worse than none. */
  list-style: none;
}
.facet-group > summary::-webkit-details-marker { display: none; }
/* The arrow says which way the facet will go, and costs the row no height: it
   sits in the 14 px line the name already occupies, at a fixed 8 px so every
   category name starts on the same column. */
.facet-group > summary::before {
  content: "\25B8";
  flex: 0 0 9px;
  font-size: 9px;
  line-height: 17px;
  color: var(--text-muted);
}
.facet-group[open] > summary::before { content: "\25BE"; }
.facet-group > summary:hover::before { color: var(--accent); }
.facet-group > summary:hover { color: var(--text-primary); }
.facet-group[open] > summary { color: var(--text-primary); }
.facet-group > summary > span:first-child {
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* Plain until a value is picked in THIS facet, then bold (operator,
   2026-09-17): the weight marks a narrowing in force, not a heading. */
.facet-group.picked > summary > span:first-child { font-weight: 600; color: var(--text-primary); }
/* What a CLOSED facet is doing: the value it picked and how many rows that
   leaves, so a rail of collapsed facets reads as the narrowings in force. */
.facet-picked {
  margin-left: auto; display: flex; gap: 5px; align-items: baseline;
  flex: 0 1 auto; min-width: 0; text-transform: none; letter-spacing: 0;
  font-weight: 600; color: var(--accent);
}
.facet-picked .what {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px;
}
.facet-picked .num { font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* This facet's own two controls, hard right of its label. They act on THIS
   facet where the rail's pair above acts on all of them — "show me everything
   here" against "start again". Quiet until pointed at, so eight facets do not
   read as sixteen buttons. */
.facet-row-tools { margin-left: auto; display: flex; gap: 1px; flex: 0 0 auto; }
.facet-tool.tiny {
  width: 14px; height: 14px; font-size: 10px; border-radius: 2px;
  color: var(--text-muted); opacity: .45;
}
.facet-group > summary:hover .facet-tool.tiny,
.facet-tool.tiny:focus-visible { opacity: 1; }
.facet-tool.tiny:hover { opacity: 1; background: var(--surface-3); color: var(--accent); }
/* With the tools taking the right, the picked indicator gives way first. */
.facet-picked { margin-left: auto; }
.facet-picked + .facet-row-tools { margin-left: 4px; }

/* The rows: full width, butted together, 15 px — the floor at which 12 px type
   keeps its descenders. */
.facet-value {
  display: flex; width: 100%; gap: 6px; align-items: baseline;
  justify-content: space-between;
  /* Indented two characters PAST the label's own text, so the list reads as
     belonging to the heading above it. The label starts 15 px in (arrow plus
     gap); two characters of this face is another 12. */
  padding: 0 2px 0 27px; margin: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
  font: inherit; font-size: 12px; line-height: 15px; color: var(--text-primary);
}
.facet-value:hover { color: var(--accent); }
.facet-value.on { font-weight: 600; color: var(--accent); }
.facet-value:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
/* The VALUE takes the room and the count keeps its own, so a long package name
   ellipses rather than pushing its number off the edge. */
.facet-value > .facet-label { flex: 1 1 auto; min-width: 0; }
/* One line of air before the NEXT facet's name — between groups, never between
   rows. */
.facet-group > .facet-value:last-child { margin-bottom: 2px; }

/* Numerator AND denominator, so a value reads as a proportion. The denominator
   is quieter: it repeats on every row and must not compete with the one that
   differs. */
.facet-count {
  font-variant-numeric: tabular-nums; font-size: 10.5px; flex: 0 0 auto;
  white-space: nowrap;
}
.facet-count .num { color: var(--text-secondary); }
.facet-count .of { color: var(--text-muted); opacity: .7; }
.facet-value.on .facet-count .num { color: var(--accent); }

#rail-search { padding: 8px; border-bottom: 1px solid var(--border); }
#rail-search #q { width: 100%; box-sizing: border-box; }

/* Collapsed: the rail is REMOVED from the grid, not merely hidden, so the
   charts get the whole width rather than a 320px hole with nothing in it. */
html.rail-collapsed main { grid-template-columns: 0 1fr; }
/* No rail at all on the planes that have no table list: the column has to
   collapse too, or every screen on them is inset by a rail that is not there. */
html.no-rail main { grid-template-columns: 0 1fr; }
html.rail-collapsed #rail { display: none; }

#rail-toggle {
  font: inherit; line-height: 1; cursor: pointer; padding: 3px 7px;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 5px;
}
#rail-toggle:hover { color: var(--text-primary); }
#rail-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#scroller { overflow-y: auto; overflow-x: hidden; }
/* grid-column is NOT optional here. #detail used to rely on auto-placement
   landing it after #rail — which holds only while the rail is in the flow. With
   the rail collapsed (display:none) it auto-placed into column 1, which the
   collapsed rule sizes to 0: the browse screen rendered at zero width and read
   as a blank page. Every other pane already declares column 2, which is exactly
   why none of them broke. */
#detail { grid-column: 2; overflow-y: auto; padding: 14px 18px 40px; min-width: 0; }

/* ---- tree ---- */
.row {
  height: var(--row);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  cursor: default;
  white-space: nowrap;
}
.row:hover { background: var(--surface-3); }
.row[aria-selected="true"] { background: var(--accent); color: #fff; }
.row[aria-selected="true"] .fnum, .row[aria-selected="true"] .kids { color: #fff; }
.twisty { width: 14px; text-align: center; color: var(--text-muted); cursor: pointer; user-select: none; }
.fnum { color: var(--text-secondary); font-family: ui-monospace, monospace; font-size: 12px; }
.kids { color: var(--text-muted); font-size: 11px; }
.hit { background: var(--surface-3); }

/* ---- detail ---- */
h2 { font-size: 17px; margin: 0 0 2px; }
.sub { color: var(--text-secondary); margin-bottom: 14px; font-size: 12px; }
section { margin-top: 22px; }
section > h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); margin: 0 0 8px; font-weight: 600;
}
/* Same face as a section's own h3, for a screen that prints its title above
   the lede instead of over the figure. */
.screen-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); margin: 0 0 8px; font-weight: 600;
}
.facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 4px; }
.fact { font-size: 12px; }
.fact b { color: var(--text-secondary); font-weight: 500; }

/* A measurement that was never taken is never a number and never a blank. */
.tok {
  font-size: 11px; padding: 0 5px; border-radius: 3px;
  border: 1px dashed var(--border); color: var(--text-muted);
  font-style: italic;
}
.tok-absent { border-style: solid; }

/* ---- storage map ---- */
.legend { display: flex; gap: 14px; margin-bottom: 8px; font-size: 12px; align-items: center; flex-wrap: wrap; }
.legend .key { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.swatch {
  width: 13px; height: 13px; border-radius: 3px; display: inline-grid; place-items: center;
  font-size: 9px; font-weight: 700; color: #fff; font-family: ui-monospace, monospace;
}
.grid-wrap { overflow: auto; max-height: 460px; border: 1px solid var(--border); border-radius: 6px; }
/* The adjacency matrix is square and now sized to the full width, so it needs
   the height to match or most of it sits below the fold of its own scroller. */
.grid-wrap.matrix-wrap { max-height: min(78vh, 1400px); }
table.grid { border-collapse: separate; border-spacing: 2px; font-size: 11px; }
table.grid th {
  color: var(--text-secondary); font-weight: 500; font-family: ui-monospace, monospace;
  padding: 2px 6px; position: sticky; background: var(--surface-1); text-align: right;
}
table.grid thead th { top: 0; z-index: 2; }
table.grid tbody th { left: 0; z-index: 1; }
table.grid td { padding: 0; }
.cell {
  width: 26px; height: 20px; border-radius: 4px; display: grid; place-items: center;
  color: #fff; font-size: 9px; font-weight: 700; font-family: ui-monospace, monospace;
  cursor: default;
}
.cell.empty { background: var(--surface-3); }
.cell.multi { box-shadow: inset 0 0 0 2px var(--surface-1); }

/* ---- field table ---- */
table.fields { border-collapse: collapse; width: 100%; font-size: 12px; }
table.fields th {
  text-align: left; color: var(--text-secondary); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border); padding: 4px 8px 4px 0; position: sticky; top: 0;
  background: var(--surface-1);
}
table.fields td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--surface-2); vertical-align: top; }
table.fields tr:hover td { background: var(--surface-2); }
.dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* ---- index chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--border); border-radius: 12px; padding: 2px 9px; font-size: 11.5px;
  background: var(--surface-2); color: var(--text-secondary);
}
.chip b { color: var(--text-primary); font-weight: 600; font-family: ui-monospace, monospace; }
.chip.unwalkable { border-style: dashed; }

.empty-note { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* ---- screen tabs + graph controls ----
   ONE segmented control, worn by BOTH rows (operator, 2026-09-11). The plane
   tabs looked like this and the sub-tabs were borderless text with an
   underline, so a sub-tab read as a heading rather than as navigation and blended
   into the section beneath it. Two selectors for the same control is how that
   happened; `.tabgroup` is why it cannot happen again, and a test holds the
   line by refusing any `#tabs button` / `#subtabs button` rule. */
.tabgroup { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.tabgroup button {
  border: 0;
  white-space: nowrap; background: var(--surface-1); color: var(--text-secondary);
  font: inherit; padding: 4px 12px; cursor: pointer;
}
.tabgroup button + button { border-left: 1px solid var(--border); }
.tabgroup button:hover { background: var(--surface-2); color: var(--text-primary); }
.tabgroup button[aria-selected="true"] { background: var(--accent); color: #fff; }
.tabgroup button[aria-selected="true"]:hover { background: var(--accent); color: #fff; }
.tabgroup button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#gcontrols { display: inline-flex; gap: 12px; align-items: center; font-size: 12px; color: var(--text-secondary); }
#gcontrols select {
  font: inherit; padding: 2px 4px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface-1); color: var(--text-primary);
}
/* What the chart is, what it measures, what its knobs do — above the controls
   so the answer sits where the question gets asked. Constrained to a reading
   measure even though the charts run full width. */
.explain {
  max-width: 88ch; margin: 4px 0 8px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary);
}
.explain .measures { color: var(--text-muted); }
.explain .knob { display: block; margin-top: 3px; color: var(--text-muted); }
.explain .knob code {
  font-size: 11px; padding: 0 4px; margin-right: 4px; border-radius: 3px;
  background: var(--surface-3); color: var(--text-secondary);
}

/* Controls sit with their chart now, so they need to read as part of it. */
/* Search results replace the tree in the rail. */
.result-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.result-head .count { color: var(--text-primary); font-weight: 600; }
.result-head .clear {
  margin-left: auto; font: inherit; cursor: pointer; padding: 1px 7px;
  background: var(--surface-1); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 4px;
}
.result-head .clear:hover { color: var(--text-primary); }
.row.result {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; padding: 6px 10px; height: auto; line-height: 1.35;
}
.result-line { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.result-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-facets { display: flex; gap: 5px; flex-wrap: wrap; }
.result-key {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin: 0; padding: 7px 10px; border-bottom: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.result-key .facet { margin: 0; }
/* The facet badge: why this row is in the list at all. */
.facet {
  flex: none; font-size: 10.5px; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 99px; border: 1px solid currentColor;
}
.facet.name { color: var(--accent); }
/* A prefix-only hit is a weaker claim than a whole-word one, and reads as one. */
.facet.name.partial { color: var(--text-muted); border-style: dashed; }
.facet.field { color: var(--series-elsewhere); }
/* A description match is a weaker, different reason than a name match, and it
   reads as one: muted, dashed, never the accent a name hit gets. */
.facet.prose { color: var(--text-muted); border-style: dashed; }

/* "7 of 21 fields match" — the bridge from a search result to the fields that
   caused it. */
.field-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 2px 0 8px; font-size: 12.5px; color: var(--text-secondary);
}
.field-filter .only {
  font: inherit; cursor: pointer; padding: 1px 8px; border-radius: 4px;
  background: var(--surface-1); color: var(--text-secondary); border: 1px solid var(--border);
}
.field-filter .only:hover { color: var(--text-primary); }
table.fields tbody tr.match { background: var(--surface-3); }
table.fields tbody tr.match td:nth-child(3) { font-weight: 650; color: var(--text-primary); }

/* Sortable field headers: the whole header is the hit target, and the arrow
   only appears on the column actually doing the sorting. */
table.fields.sortable thead th { padding: 0; }
table.fields.sortable button.sort {
  display: flex; align-items: center; gap: 4px; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  padding: 4px 8px; background: none; border: 0; color: inherit;
}
table.fields.sortable button.sort:hover { color: var(--text-primary); background: var(--surface-3); }
table.fields.sortable button.sort.active { color: var(--accent); }
table.fields.sortable button.sort .arrow { font-size: 9px; }
/* Visible enough to read as a control, quiet enough not to compete with the
   column that is actually sorting. */
table.fields.sortable button.sort .arrow.idle { color: var(--text-muted); opacity: .55; }
table.fields.sortable button.sort:hover .arrow.idle { opacity: 1; color: var(--text-secondary); }
table.fields.sortable button.sort:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.chart-controls {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin: 2px 0 10px; font-size: 12px; color: var(--text-muted);
}
.chart-controls label { display: inline-flex; gap: 5px; align-items: center; }
.chart-controls select { font: inherit; }

/* The summary roll-up. A summary marker that looks clickable, and a heading
   that keeps the weight of the h3 it replaced. */
details.roll { border-bottom: 1px solid var(--border); padding: 2px 0 10px; }
details.roll > summary {
  cursor: pointer; list-style: none; padding: 9px 2px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary);
}
details.roll > summary::-webkit-details-marker { display: none; }
details.roll > summary::before { content: "▸ "; color: var(--text-muted); }
details.roll[open] > summary::before { content: "▾ "; }
details.roll > summary:hover { color: var(--text-primary); }
details.roll > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---- the hover panel ------------------------------------------------------
   What a tab leads to, shown under it on hover. It describes the CORPUS, not
   the selection, so as a permanent header it was prose to scroll past on every
   click — 300 px of it on `schema & fields`, far enough that a click read as
   doing nothing. Now no screen carries it at all: point at any tab or sub-tab
   and the same panel answers (operator, 2026-09-11). */
#megamenu {
  position: fixed;
  z-index: 60;
  /* A PLANE panel carries a paragraph and a list of screens, so it needs the
     measure. A SCREEN panel carries one sentence, and at 560 px that sentence
     was a single line in a box four times wider than it was tall — a banner,
     not a note. Screen panels went with the megamenu (2026-09-17). */
  width: min(560px, calc(100vw - 16px));
  padding: 14px 16px 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .16);
}
.about-panel-title {
  margin: 0 0 9px;
  font: 600 11px ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* The panel sets its own width, so the lede's reading measure is the panel. */
#megamenu .lede { margin: 0 0 11px; max-width: none; font-size: 13px; }
/* No bottom rule: the panel's own border already closes it, and two lines a few
   pixels apart read as a mistake. */
#megamenu .stat { margin: 0; padding-bottom: 0; border-bottom: 0; gap: 8px 20px; }
#megamenu .stat .v { font-size: 17px; }
#megamenu .empty-note { margin: 0; }
/* One plain sentence, set at reading size — the whole of what a sub-tab says. */
.panel-blurb { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
/* The megamenu's screens (operator, 2026-09-17). Until then a list, not a
   menu of links, because a control inside a panel that closes when you leave
   it is a target nobody can hit; the pointer may now cross from its tab into
   it (the bridge below), so every entry is a button that goes straight to its
   screen. A click on the tab itself goes to the section's main page. */
.panel-screens {
  margin: 10px 0 0;
  padding: 9px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.panel-screens li { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.panel-screens b { flex: 0 0 auto; min-width: 104px; color: var(--text-primary); }
.panel-screens span { color: var(--text-secondary); }
.panel-pick {
  display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  font: inherit; font-size: 12.5px; padding: 5px 8px; margin: 0 -8px;
  border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer;
}
.panel-pick:hover, .panel-pick:focus-visible { background: var(--surface-2); outline: none; }
.panel-pick:hover b, .panel-pick:focus-visible b { color: var(--accent); }
.panel-pick.current b { color: var(--accent); }
.panel-pick.current b::after { content: " \2022"; }
.panel-screens:has(.panel-pick) { gap: 1px; }
/* The menu's title and description are one control to the section's main
   page (operator, 2026-09-18), styled like the screen entries below it. */
.panel-open {
  display: block; width: 100%; box-sizing: content-box; text-align: left;
  font: inherit; color: inherit; padding: 6px 8px; margin: -6px -8px 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
}
.panel-open .about-panel-title { display: flex; justify-content: space-between; gap: 12px; }
.panel-open .panel-go { color: var(--accent); letter-spacing: .04em; }
.panel-open .lede { display: block; }
.panel-open:hover, .panel-open:focus-visible { background: var(--surface-2); outline: none; }
.panel-open:hover .about-panel-title > span:first-child,
.panel-open:focus-visible .about-panel-title > span:first-child { color: var(--accent); }
/* The pointer crosses the 6 px between the tab and the menu over this strip,
   which belongs to the menu, so the hover menu survives the trip. */
#megamenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }

/* A folded section keeps the bar's own spacing, not the 22 px gap a free-
   standing `section` leaves for the heading it no longer has. */
details.roll > section { margin-top: 0; }

/* ---- a left column you pick from, the chosen thing on the right ----------
   The shape `schema & fields` has, applied to the screens that were one long
   scroll of fixed sections. Picking beats scrolling for the same reason a rail
   beats a list: you keep your place while you change what you are reading. */
/* The view list lives in the rail now, so it is the rail's width and needs no
   grid of its own; the chart takes the whole pane. */
#rail-views { padding: 8px; overflow-y: auto; min-height: 0; }
#rail-views[hidden] { display: none !important; }
/* The volume view list: rows, not boxes — same voice as the facet rail beside
   it in the same column. 13 px sans like everything else in this pane. */
.picker { width: 100%; display: flex; flex-direction: column; }
.picker button {
  text-align: left; width: 100%;
  padding: 1px 4px; margin: 0; border: 0; border-radius: 3px;
  background: none; color: var(--text-primary);
  font: 13px/19px ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}
.picker button:hover { color: var(--accent); }
.picker button[aria-selected="true"] { font-weight: 600; color: var(--accent); }
.picker button:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
#rail-views { padding: 8px; overflow-y: auto; min-height: 0; }
#rail-views[hidden] { display: none !important; }
/* The segmented control turned on its side. Same borders, same padding, same
   accent fill when chosen — a list you navigate with reads as navigation
   whether it runs across the top or down the side. */
.tabgroup.stack { display: flex; flex-direction: column; align-items: stretch; }
.tabgroup.stack button { text-align: left; white-space: normal; }
.tabgroup.stack button + button { border-left: 0; border-top: 1px solid var(--border); }
.picker-pane { min-width: 0; }
.picker-pane > section:first-child { margin-top: 0; }

#homepage, #landing, #summary, #pointers, #pointergraph, #coupling, #prov, #behaviour, #interop, #standards { grid-column: 2; overflow-y: auto; padding: 14px 18px 60px; min-width: 0; }
#homepage { background: var(--home-paper); }
/* The screen whose whole content is one drawing keeps NO margin at all: every
   pixel of padding is a pixel the drawing does not get, and there is no prose
   here to give a reading measure to (operator, 2026-09-11). The drawing starts
   in the top-left corner of the pane. `#explore` was the other until the
   pointer graph became a section of the browser on 2026-09-14, where it takes
   the detail pane's padding like every section around it. */
#coupling { padding: 0; overflow-x: hidden; }
/* And no 22 px heading gap on a section with no heading: it carries one drawing
   and the control that drives it, nothing a gap separates. */
#coupling > section { margin-top: 0; }
/* The control row lives in the right column now, so it needs no margin of its
   own to clear a drawing it no longer sits above. */
#coupling .chart-controls { margin: 0; }

/* The circle is SQUARE, so "full width" on a wide window makes it taller than
   the viewport — and a shape whose point is being taken in at once is the wrong
   thing to make people scroll. Bound it by the height available instead, and
   centre it in the width it does not use. */
/* Scoped to the plot, NOT to every svg on the screen. `#coupling svg` also
   matched the 26 px line swatches in the key, stretched each to full width and
   pushed its label a hundred pixels away from it — a cascade collision that
   looked like a layout bug in the key. */
/* Full width of the page (operator). The plot is square, so at a wide window it
   is taller than the viewport and the pane scrolls — that is the trade for
   reading 194 rim labels at size. */
/* Plot + readout, side by side. The panel is the width of a short data list and
   no wider — it is a readout, not a sidebar. */
/* The readout strip: full width, ABOVE the drawing, sticky, one line deep.
   Used by the coupling circle and by the pointer graph — one implementation,
   because two screens that show "what you are pointing at" and drift apart is
   how a reader learns to read each screen separately (operator, 2026-08-26). A side panel is only in view when the
   window is wide enough to hold both; a strip is in view at every width. It is
   sticky, so a tall circle can scroll under it, and it is ONE LINE deep with a
   fixed min-height — a readout that grows when you hover moves the circle out
   from under the pointer. */
/* The expander (pointer graph) keeps the side-by-side readout: its drawing is
   sized by its neighbourhood and its readout never changes shape, so the
   reasons the coupling circle moved its own to a banner do not apply here. */
.readout-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 12px;
  align-items: start;
}
.readout-body { min-width: 0; }
.readout-panel {
  position: sticky;
  top: 8px;
  z-index: 2;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 15px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 5px 7px;
}
.panel-facts { display: flex; flex-direction: column; gap: 0; }
.panel-name { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.panel-empty { color: var(--text-muted); }
.panel-fact { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.readout-panel .panel-fact { display: flex; justify-content: space-between; gap: 8px; }
.panel-fact .k { color: var(--text-muted); font-size: 11px; }
.panel-fact .v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.panel-fact.out .k, .panel-fact.out .v { color: var(--out-hue, #1f8a3c); }
.panel-fact.in .k, .panel-fact.in .v { color: var(--in-hue, #d62f22); }
.panel-note { color: var(--text-muted); margin-left: auto; }
.readout-panel .panel-note { margin-left: 0; margin-top: 0; white-space: normal; }
@media (max-width: 900px) {
  .readout-stage { grid-template-columns: 1fr; }
  .readout-panel { align-self: start; top: 0; width: fit-content; max-width: min(100%, 280px); }
  .readout-body { max-width: 100%; }
}

/* ---- the coupling circle's banner column: width and alignment ------------ */
/* The banner and the control row are ONE BOX, 600 px wide, centred ON THE
   CIRCLE (operator, 2026-09-21) — not on the page, which is what it was. The
   circle is left-aligned when large and centred when small, so "the centre of
   the circle" is two different places and the rule has to be written per size.

   Both elements take the same width and the same margins, in one rule, so the
   controls line up with the banner's left edge BY CONSTRUCTION rather than by
   two numbers somebody has to keep equal. */
#coupling { --banner-w: 600px; }
/* The HEADER: one grid whose first track IS the distance from the pane's left
   edge to the circle's centre, so its column boundary lands exactly on the
   figure's midline (operator, 2026-09-21). Selectors left of the line and
   right-aligned onto it; the info box starting immediately right of it.
   Writing the split as a track rather than as two widths is what keeps it on
   the midline when the figure changes size or side. */
#coupling .coupling-header {
  display: grid;
  grid-template-columns: var(--centre) minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  margin-bottom: 6px;
}
/* Large: the circle starts at the pane's left edge, so its centre is half its
   own width in. Small: the circle is centred on the page, so the midline is
   the pane's. */
#coupling [data-size="large"] .coupling-header { --centre: calc(var(--plot-size, 800px) / 2); }
#coupling [data-size="small"] .coupling-header { --centre: 50%; }

/* LEFT of the line: the two selectors STACKED, attribution over size, their
   right edges on the midline. `width: auto` and no margins — the header track
   places this now, not the box rules that used to. */
#coupling .coupling-header .chart-controls {
  width: auto;
  margin: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  gap: 4px;
}
#coupling .coupling-header .chart-controls label { flex: none; }

/* The hint keeps the old box treatment: 600 px, centred on the same midline,
   below the header and directly above the figure. */
#coupling .chart-hint {
  width: var(--banner-w);
  max-width: 100%;
}
/* Large: the circle starts at the left edge, so its centre is half its own
   width in. `max(0px, …)` because a pane too narrow for the figure shrinks it
   and the offset would otherwise go negative and pull the box off-screen. */
#coupling [data-size="large"] .chart-hint {
  margin-left: max(0px, calc(var(--plot-size, 800px) / 2 - var(--banner-w) / 2));
  margin-right: 0;
}
/* Small: the circle is centred on the page, so the box is too. */
#coupling [data-size="small"] .chart-hint {
  margin-left: auto;
  margin-right: auto;
}

/* ---- the coupling circle's readout: a BANNER, three columns of two -------- */
/* Operator, 2026-09-21, superseding every side-of-the-circle arrangement this
   readout has had. What settles it: the circle now has TWO sizes and two
   alignments, and anything beside it would have to move for each. Above it,
   the banner's size and place stop depending on the figure's.

   SIX cells, filled COLUMN-MAJOR, which is why the drawing code appends name ·
   which-way · out · in · files · busiest and they land as

       name            points at N       files N
       which way       pointed at by N   busiest X

   Two rows of a fixed 16 px line and nothing else: `grid-template-rows` is
   explicit rather than `auto`, so a long `busiest` cannot grow the banner into
   a third line, and the figure below never moves as the pointer travels. */
#coupling .readout-panel {
  position: static;
  display: grid;
  /* The number columns are sized to their content rather than `1fr` each,
     which spread them across a wide pane and put a gap between a label and the
     value it belongs to. But the LAST one is CAPPED, and that cap is the whole
     point of this line: `busiest` runs to 48 characters, and as plain
     `max-content` it took 400 px and starved the name column down to 267 —
     measured, with `^DGBT — BENEFICIARY TRAVEL MODE OF TRANSPORTATION #392.4`
     (56 characters, needing 400) cut in the one box a reader is supposed to
     read the name from. Capped, `busiest` ellipsises instead and the name gets
     ~438 px. That is the correct loser: the name is the reading surface
     ([[the-rim-is-an-index-the-infobox-is-the-reading-surface]]), `busiest` is
     a glance. */
  grid-auto-flow: row;
  /* The first column HUGS its content and the gap is five characters wide
     (operator, 2026-09-21). Two equal `1fr` tracks put 282 px under
     `points at 5` and left a third of the box between that value and the
     label beside it, which read as two unrelated lists rather than one pair.
     `max-content` makes the left column as wide as its widest cell and no
     wider, and `ch` is literally five characters of this face — the unit the
     instruction was given in.

     The second column stays flexible rather than also hugging, for two
     reasons: the name spans BOTH tracks, so two hugging columns would size it
     to the facts and cut it; and the slack left over falls to `busiest`, which
     is the one value here long enough to want it. */
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: repeat(3, 16px);
  column-gap: 5ch;
  align-items: center;
  width: var(--banner-w);
  max-width: 100%;
  margin: 0;
  padding: 5px 9px;
  font-size: 12px;
  line-height: 16px;
}
/* The name is the reading surface, so it gets the flexible column and is the
   only thing here allowed to be large. ONE line, ellipsised: the banner is two
   lines tall by instruction, and the second belongs to the which-way note.
   Measured against the longest label in each attribution — see below. */
/* BOTH ROWS of the first column. One row of a 600 px banner gives this column
   333 px and the longest label needs 384, and cutting it is not available:
   this box is the only place a package name is read. Two rows of 333 is ample,
   and what it displaces — the which-way note — restated the two numbers in the
   next column anyway. Clamped at two lines so a longer name still cannot grow
   the banner. */
/* The whole top row. At 600 px that is ~582 px of measure against the 384 the
   longest label needs, so it prints whole on ONE line with room to spare —
   where the two-row shape had to spend both rows of a 333 px column on it. One
   line and ellipsised, so nothing can grow the box past three rows. */
#coupling .panel-name {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 12px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Label then value, close together, not pushed to opposite ends of a column. */
#coupling .readout-panel .panel-fact { display: flex; justify-content: flex-start; gap: 6px; }
#coupling .readout-panel .panel-fact .k { flex: none; }
#coupling .readout-panel .panel-fact .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The drawing is square (viewBox + width:100%), so its HEIGHT is whatever its
   WIDTH turns out to be — which is why it reached 1,549px in a 1,000px viewport
   and could only ever be read a third at a time. Bounding the width by VIEWPORT
   HEIGHT is therefore what bounds the height: `100vh` less the chrome above it,
   floored so a short window shrinks it to unreadable, and never wider than the
   column it sits in. */
#coupling svg.coupling-plot {
  display: block;
  /* Alignment follows the SIZE (operator, 2026-09-21): small centres, large
     runs from the left edge. The rule is below, on `#coupling[data-size]`, so
     the two cases are one selector each rather than a branch in the drawing
     code. Default here is the large case. */
  margin: 0;
  /* Size is DECLARED in `renderCircle` (700 px) and written inline, along with
     the `max-width: 100%` that lets a narrow pane shrink it. Nothing here sets
     either, so there is one place to change the number. */
}
/* Small CENTRES, large is LEFT. A small figure pinned to one edge of a wide
   pane reads as lost; a large one that nearly fills the pane has no slack to
   centre in, and centring it would only move the left edge the technical data
   and the banner are aligned to. */
#coupling [data-size="small"] svg.coupling-plot { margin: 0 auto; }
#coupling [data-size="large"] svg.coupling-plot { margin: 0; }
/* Stacked, the drawing is the whole width and centring is what looks right. */
/* The balancing track that page-centred the drawing is GONE with the centring
   it existed for: two tracks, figure left and readout right, which is what the
   stage was before and what "top left / top right" asks for. */

/* The technical data — attribution and both coverages — under the figure it
   qualifies (operator, 2026-09-21). Set quiet and small: it is what makes the
   numbers above it readable, not a thing to read first. */
/* Held to the drawing's own measure. It sits below the whole stage now, so
   without this the line would run the full width of the pane and stop reading
   as a caption on the figure above it. */
.tech-data { margin: 14px 0 0; max-width: var(--plot-size, 400px); }
.tech-data h3 {
  margin: 0 0 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tech-data p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.tech-data .frame-text { white-space: normal; }
#graph section, #size section, #prov section { margin-top: 26px; }
#graph section:first-child, #size section:first-child, #prov section:first-child { margin-top: 4px; }
#graph canvas, #size canvas { border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1); }
.chart-note { font-size: 12px; margin: 0 0 10px; color: var(--text-primary); }
.chart-note .muted { color: var(--text-muted); }
.swatch.ramp { width: 16px; height: 11px; border-radius: 2px; }

details > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); margin-top: 10px; }

/* Hover readout — an HTML chart IS interactive, so every form carries one. */
.tip {
  position: fixed; z-index: 40; pointer-events: none; max-width: 320px;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px;
  font-size: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.18);
}
.tip-title { font-weight: 600; margin-bottom: 2px; }
.tip-absent { color: var(--text-muted); font-style: italic; margin-top: 3px; }

/* ---- theme toggle ---- */
#theme {
  /* the top-right corner, a peer of the megamenu tabs on the same row
     (operator, 2026-09-17 — the instance-and-counts line that sat between
     them went, and with it the second header row it caused when it wrapped) */
  margin-left: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-1); color: var(--text-secondary);
  font: inherit; line-height: 1; padding: 4px 9px; cursor: pointer;
}
#theme:hover { background: var(--surface-3); color: var(--text-primary); }
#theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#theme-icon { font-size: 14px; }

/* ---- coverage ratios ---- */
.cov { margin: 14px 0 18px; max-width: 780px; }
.cov-head { display: flex; gap: 12px; align-items: baseline; font-size: 12.5px; }
.cov-head b { font-weight: 600; }
.cov-pct { margin-left: auto; color: var(--text-secondary); }
.meter {
  height: 8px; border-radius: 4px; background: var(--surface-3);
  margin-top: 5px; overflow: hidden;
}
.meter-fill { height: 100%; background: var(--accent); border-radius: 4px; }
.cov-note { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* ---- two registers, side by side ---- */
.registers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.reg {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 4px; padding: 3px 10px; font-size: 12px; color: var(--text-secondary);
}
.reg b { color: var(--text-primary); font-family: ui-monospace, monospace; }
.reg-unmeasured { border-left-color: var(--text-muted); border-style: dashed; }


/* ------------------------------------------------------------------------ */
/* the plane sub-tabs, and the screens the behaviour and interoperability    */
/* planes draw (added 2026-08-25 with the one-gallery port)                  */
/* ------------------------------------------------------------------------ */

/* The strip is the ROW; the control inside it is a `.tabgroup` like the plane
   row's, so the two are the same object at two levels rather than two designs. */
#subtabs {
  display: flex;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
}
#subtabs[hidden] { display: none; }

/* The first line of every screen: the `summary` control, then what the screen
   is, in one sentence. It carries the sub-tab strip's side padding
   because it sits directly under it and reads as the same column of text —
   flush at 0 it hung 12 px to the left of everything above and below it. The
   sentence is one line by construction: a description that wrapped would push
   the screen down by a variable amount every time the window changed. */
#screen-line {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
}
#screen-line[hidden] { display: none; }
.screen-blurb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-secondary);
}
/* A glyph rather than a word, because a word here read as another tab back when
   this sat in the strip. It is now the smaller half of a line whose subject is
   the sentence beside it: sized DOWN to the sentence's own 13 px and resting in
   the muted ink, so it reads as an offer rather than as the thing to look at.
   It was a 25x32 control against 13 px text and dominated the line. */
.info-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-1);
  color: var(--text-muted);
  font: inherit;
  padding: 2px 4px;
  cursor: pointer;
}
.info-icon { font-size: 13px; line-height: 1; }
.info-toggle:hover { background: var(--surface-2); color: var(--text-primary); }
.info-toggle.on { background: var(--surface-3); color: var(--text-primary); border-color: var(--text-muted); }
.info-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The block it opens: between the tabs and the pane, so it pushes the screen
   down while it is open and leaves no trace when it is shut. */
#screen-info {
  grid-row: 4;
  padding: 14px 18px 4px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
  max-height: 42vh;
  overflow-y: auto;
}
#screen-info[hidden] { display: none; }
.about-detail .lede { margin-bottom: 12px; }
.about-detail .stat { margin-bottom: 10px; padding-bottom: 10px; }

html.no-rail #rail { display: none; }

#behaviour .screen-body, #interop .screen-body { max-width: 1180px; min-width: 0; }

canvas.icicle { display: block; margin: 6px 0 10px; cursor: pointer; }

.trail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; margin: 0 0 6px; }
.crumb {
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  padding: 1px 2px;
}
.crumb:hover { text-decoration: underline; }

/* the RPC catalogue: facets | list | signature */
/* The list and the procedure it opens. The 220 px facet column that led this
   grid went on 2026-09-12 with the facets themselves. */
.catalogue {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.3fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .catalogue { grid-template-columns: 1fr; } }
.facets h4, .signature h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin: 12px 0 4px;
}
.facet-bar {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  background:
    linear-gradient(to right, var(--series-pointer) var(--bar, 0%), transparent var(--bar, 0%));
  background-color: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  padding: 3px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  text-align: left;
}
.facet-bar.on { outline: 2px solid var(--accent); }
.facet-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.facet-n { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cat-list input { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.cat-list .rows { max-height: 62vh; overflow: auto; }
.signature { border-left: 1px solid var(--rule); padding-left: 16px; }

/* the HL7 flow */
.flow-node { cursor: pointer; }
.flow-node:hover { opacity: .8; }
.flow-label { font: 600 11px ui-monospace, monospace; pointer-events: none; }
.col-title { font: 600 11px ui-monospace, monospace; letter-spacing: .04em; }
.readout { min-height: 1.2em; }

/* a pointer target you can travel to */
.goto {
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--accent);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  padding: 0;
}
.goto:hover { border-bottom-style: solid; }


/* ------------------------------------------------------------------------ */
/* the domain header — the atlas's format, adopted 2026-08-25: what this      */
/* domain IS, then the numbers that are its whole size, then the views        */
/* ------------------------------------------------------------------------ */

.lede {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 78ch;
}
.lede b { color: var(--text-primary); font-weight: 600; }
.lede code { font-size: 12px; }

.stat {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.stat .k {
  color: var(--text-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.stat .v {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin-top: 2px;
}
/* an unmeasured headline is a word, never a number */
.stat .v.tok { font-size: 13px; color: var(--text-secondary); font-style: italic; }

/* ---- the discovery plane -------------------------------------------------
   A facet rail beside a card list. Cards rather than a table because a browse
   result is SCANNED, not read in order, and a card can lead with the sentence
   that decides the click where a row of columns cannot. */
/* ---- the basket ----------------------------------------------------------
   The pick control sits BESIDE the card rather than inside it: a button within
   a button is invalid, and the click that adds would also navigate away from
   the list being picked from. */
.pick {
  align-self: stretch; padding: 0 12px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-1);
  font: 600 12px ui-monospace, monospace; color: var(--text-secondary);
}
.pick:hover { border-color: var(--accent); color: var(--text-primary); }
.pick.on { background: var(--surface-3); color: var(--text-primary); border-color: var(--accent); }

/* The basket's controls. The bar itself is `#extract-bar`, pinned at the top
   of the pane since ruling 6 (2026-09-17); it lived in the rail before. */
.basket-go, .basket-clear, .basket-add {
  font: inherit; font-size: 11px; padding: 1px 7px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface-1); color: var(--text-secondary);
}
.basket-go { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.basket-go:hover, .basket-clear:hover, .basket-add:hover { color: var(--text-primary); }
/* `+ all 93` rides the narrowing count, because the number it adds IS that
   count — narrowing to 93 and taking them in one move is the whole reason the
   filters and the basket are on one screen now. */
#rail-count { display: flex; align-items: baseline; gap: 8px; }
/* The answer the filters produced, top right and bold — the control beside it
   is what you do next, and the two must not read as the same kind of thing. */
.rail-total {
  margin-left: auto; font-weight: 700; font-size: 11.5px;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.basket-go, .basket-clear {
  padding: 4px 10px; cursor: pointer; border: 1px solid var(--border);
  border-radius: 5px; background: var(--surface-1); font: inherit;
}
.basket-go { border-color: var(--accent); font-weight: 600; }
.basket-go:hover, .basket-clear:hover { background: var(--surface-3); }

/* Beside a sentence rather than a row of tabs, and BEFORE it: the 8 px that
   separated it from the last tab now separates it from the sentence, on the
   other side. It must not shrink when the sentence is long — the sentence's
   ellipsis is what gives way instead. */
#screen-line .info-toggle { flex: 0 0 auto; margin: 0 8px 0 0; }
/* On `schema & fields` the same line rides the tab row, right of `guide`
   (operator, 2026-09-18). It takes the rest of the row and gives way by its
   ellipsis, exactly as it does on its own line. */
.subtab-line { display: flex; align-items: center; flex: 1 1 0; min-width: 0; margin-left: 14px; }
#subtabs:has(.subtab-line) > .tabgroup, #subtabs:has(.subtab-line) > .guide-toggle { flex: 0 0 auto; }
.subtab-line .info-toggle { flex: 0 0 auto; margin: 0 8px 0 0; }

/* ---- field prose ---- */
/* The column the text shards were written for. Clamped to two lines because a
   description can run a paragraph and a table whose rows are five lines tall is
   a list nobody can scan; `more` opens the rest in place. Given a reading
   measure of its own — the other columns are numbers and names, this one is
   sentences, and sentences set to the full width of a wide pane are unreadable. */
.prose { max-width: 46em; }
.prose-lead {
  margin: 0;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: pre-wrap;
}
.prose-lead.full { -webkit-line-clamp: unset; overflow: visible; }
.prose-more {
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.prose-more:hover { text-decoration: underline; }
.prose-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prose-rest { margin-top: 5px; }
.prose-rest[hidden] { display: none; }
/* Each kind NAMED: four voices wrote these and a reader must know which is
   speaking — the VA's note to a maintainer is not advice to someone typing. */
.prose-part { margin: 0 0 5px; white-space: pre-wrap; color: var(--text-secondary); }
.prose-part b { color: var(--text-muted); font-weight: 600; }

/* The one line saying how to drive a drawing, ABOVE it rather than inside the
   readout that changes (operator, 2026-09-14). Static text does not belong in a
   box whose whole job is to answer the pointer. */
.chart-hint {
  margin: 0 0 6px;
  padding: 0 0 0 1px;
  font-size: 11.5px;
}
/* Centred over the DRAWING, not over the pane (operator, 2026-09-21). It is an
   instruction for the circle, so it is held to the circle's own measure and
   centred in it; across the full pane it was a line of text starting at the far
   left with nothing under most of it. Same `--plot-size` the grid track and the
   technical-data caption use, so all three follow the one declared size. */
/* Under the info bar now, so it takes the BOX's measure rather than the
   figure's: it is the caption of the thing above it, not a heading over the
   drawing below. */
#coupling .chart-hint {
  padding: 0;
  text-align: center;
}

/* The field result's header: reason left, count right and bold — the same rule
   the table list's count follows, because it answers the same question. */
.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 12px;
}
.field-head .rail-total { white-space: nowrap; }

/* Said once per facet, only while it is open: the values of a multi-valued
   facet overlap and do not sum to its denominator. Set quietly — it is a
   caveat on numbers already stated, not a number itself. */
.facet-note {
  margin: 1px 0 3px 2ch;
  font-size: 10.5px;
  line-height: 1.3;
}

/* Type-to-find inside a long facet. Sized to the rail, not to its content: the
   rail is as narrow as its widest LABEL and a box that set its own width would
   be the thing that widened it. */
.facet-search {
  display: block;
  width: calc(100% - 2ch);
  margin: 2px 0 3px 2ch;
  padding: 2px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface-1);
  color: var(--text-primary);
  font: inherit;
  font-size: 11.5px;
  min-width: 0;
}
.facet-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }


/* the terminology-mapping gap (interfaces plane, 2026-09-16). One block per
   carrier; the bar is the mapped share, the line under the heading the gap. */
.mappings-note { font-size: 12.5px; color: var(--text-secondary); max-width: 72ch; margin: 0 0 4px; }
.carrier { max-width: none; }
.carrier > .body { max-width: 72ch; }
.carrier > summary b { font-size: 13px; }
.gap-headline { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.exec-track .gap-mapped, .board-key .sw.gap-mapped { background: var(--lane-national); }
.exec-track .gap-unmapped, .board-key .sw.gap-unmapped { background: var(--lane-stop); }
.carrier h3 small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 12px; }
.gap-line { font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.gap-line .tok { font-size: 12px; font-weight: 400; vertical-align: middle; }
.maps-with { font-size: 12.5px; color: var(--text-secondary); margin: 8px 0 0; }
.maps-with code { font-size: 12px; }
.unmapped { margin-top: 6px; font-size: 12.5px; }
.unmapped summary { cursor: pointer; color: var(--text-secondary); }
.unmapped-list { columns: 3 200px; column-gap: 18px; margin: 6px 0 0; padding-left: 2.6em; font-size: 12px; line-height: 1.5; }
.unmapped-list li { break-inside: avoid; }
.unmapped-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.unmapped-list .ien { color: var(--text-muted); }
.src { font-size: 11px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 6px 0 0; }

/* the field grain's per-row basket pick (proposal §6.3, 2026-09-16): a
   glyph-sized button, the same family as the rail's `+ all N` */
.basket-pick {
  font: inherit; font-size: 11px; line-height: 1; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 3px; background: transparent;
  color: var(--text-muted); cursor: pointer;
}
.basket-pick:hover { color: var(--text-primary); border-color: var(--accent); }
.basket-pick.on { color: var(--accent); border-color: var(--accent); }

/* the facet tiers (2026-09-17): one list, three folds — the heading is the
   control, and it carries its own marker so a closed tier reads as closed.
   Bold, uppercase and BLUE (operator, 2026-09-18), on the tables rail and the
   fields rail alike: the tier headings are where facet browsing starts, so
   they are drawn as the controls they are rather than as grey labels. */
.facet-tier-group { border: 0; margin: 0; padding: 0; }
.facet-tier-group > summary.facet-tier {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0 2px; padding-bottom: 3px; border-bottom: 1px solid var(--accent);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent);
  cursor: pointer; list-style: none;
}
.facet-tier-group > summary.facet-tier::-webkit-details-marker { display: none; }
.facet-tier-group > summary.facet-tier > span:first-child::before {
  content: "\25B8"; display: inline-block; width: 12px; color: var(--accent);
}
.facet-tier-group[open] > summary.facet-tier > span:first-child::before { content: "\25BE"; }
.facet-tier-group > summary.facet-tier .muted { font-weight: 600; letter-spacing: .02em; }
.facet-tier-group > summary.facet-tier:hover > span:first-child { text-decoration: underline; text-underline-offset: 2px; }
.facet-tier-group:first-of-type > summary.facet-tier { margin-top: 2px; }

/* `guide` — directly after the screen tabs, on the same row (operator,
   2026-09-17: next to `volume`, not pushed to the far right). */
.guide-toggle {
  margin-left: 10px; align-self: center; font: inherit; font-size: 12px; padding: 2px 10px;
  border: 1px solid var(--accent); border-radius: 12px; background: transparent;
  color: var(--accent); cursor: pointer;
}
.guide-toggle:hover, .guide-toggle.on { background: var(--accent); color: var(--surface-1, #fff); }
#guide {
  /* a pane of main, in the content column like every other (operator,
     2026-09-17): the rail stays beside it, so a starting point applied from
     here is seen narrowing the list it narrows */
  grid-column: 2; overflow-y: auto; padding: 14px 18px 40px; min-width: 0;
}
#guide h2 { font-size: 15px; margin: 0 0 4px; }
#guide h3 { font-size: 13px; margin: 14px 0 6px; }
#guide h4 { font-size: 12px; margin: 10px 0 4px; color: var(--text-muted); }
.guide-steps { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.5; }
.guide-steps li { margin-bottom: 4px; }
.guide-recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.guide-recipe { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; background: var(--surface-1, transparent); }
.guide-recipe.on { border-color: var(--accent); }
.guide-recipe p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.guide-recipe-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.guide-apply {
  font: inherit; font-size: 12px; white-space: nowrap; padding: 2px 8px;
  border: 1px solid var(--accent); border-radius: 3px; background: transparent; color: var(--accent); cursor: pointer;
}
.guide-apply:hover { background: var(--accent); color: var(--surface-1, #fff); }
.guide-glossary { margin: 0 0 6px; font-size: 12px; }
.guide-glossary dt { font-weight: 600; margin-top: 4px; }
.guide-glossary dt.guide-tier { color: var(--text-muted); text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; margin-top: 6px; }
.guide-glossary dd { margin: 0 0 2px 0; color: var(--text-secondary, inherit); line-height: 1.4; }

/* The size line under a records band (ruling 5, 2026-09-17): what the tables
   in that band mostly weigh, read from the same rows the count is. */
.facet-sub { display: block; font-size: 10.5px; line-height: 12px; color: var(--text-muted); font-weight: 400; }
.facet-value { align-items: flex-start; }
.facet-value > .facet-count { padding-top: 0; }

/* A field-only facet on the table rail (ruling 2): a column question, marked
   as one, and picking a value switches the grain. */
.facet-group.lifted > summary > span:first-child { font-style: italic; }
.facet-lift-hint { font-size: 10px; color: var(--text-muted); margin-left: 6px; white-space: nowrap; }

/* The goal, pinned at the top of the pane (ruling 6). */
#extract-bar {
  position: sticky; top: -14px; z-index: 2;
  margin: -14px -18px 12px; padding: 7px 18px 6px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.extract-line { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.extract-line > b { color: var(--text-primary); }
.extract-nav { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 3px; color: var(--text-muted); }
.extract-link {
  font: inherit; font-size: 11.5px; padding: 0; border: 0; background: none;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}
.extract-link:hover { color: var(--text-primary); }


/* ---- the home page (2026-09-17) ------------------------------------------
   The highlights as an infographic: a masthead, the map of every table, the
   ledger, one chapter per finding. The explorer's own tokens throughout; the
   condensed stack is fonts a system already has, so the page fetches none. */
.home {
  --home-display: "Sofia Sans Extra Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Liberation Sans Narrow", "Nimbus Sans Narrow", sans-serif;
  --home-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  max-width: 1160px; margin: 0 auto; padding-block: 8px 48px;
  font-size: 14.5px; line-height: 1.55;
}
.home h1, .home h2, .home h3 { text-wrap: balance; margin: 0; }
.home p { margin: 0; }
.home-eyebrow { font: 500 11.5px/1.3 var(--home-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.home-mast { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 48px; align-items: end; padding-block: 26px 24px; }
.home-mast h1 { font: 800 clamp(52px, 7.6vw, 100px)/.9 var(--home-display); font-stretch: condensed; letter-spacing: -.01em; margin-top: 10px; color: var(--text-primary); }
.home-mast h1 .comma { color: var(--text-muted); }
.home-mast h1 em { font-style: normal; color: var(--accent); }
.home-dek { font-size: 16.5px; line-height: 1.5; color: var(--text-secondary); max-width: 58ch; margin-top: 16px; }
.home-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; padding-top: 12px; border-top: 2px solid var(--text-primary); font-size: 13.5px; }
.home-facts dt { font: 500 11px/1.9 var(--home-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.home-facts dd { margin: 0; color: var(--text-primary); }

.home-plate { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px 16px; }
.home-plate-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 14px; }
.home-plate-head h2 { font: 700 clamp(21px, 2.4vw, 28px)/1.15 var(--home-display); font-stretch: condensed; max-width: 44ch; color: var(--text-primary); }
.home-note { font-size: 12.5px; color: var(--text-muted); margin-top: 4px !important; }
.home-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--surface-1); }
.home-toggle button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; }
.home-toggle button[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); }
.home-toggle button:focus-visible, .home-ledger button:focus-visible, .home-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.home-map-box { position: relative; }
.home-map { display: block; width: 100%; cursor: crosshair; }
.home-readout { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; min-height: 22px; margin-top: 10px !important; font: 400 12.5px/1.5 var(--home-mono); color: var(--text-secondary); }
.home-readout b { font-weight: 600; color: var(--text-primary); }
.home-readout .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.home-legend { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 16px; }
.home-legend li { display: grid; grid-template-columns: 12px 1fr; gap: 2px 8px; align-items: baseline; font-size: 12.5px; color: var(--text-secondary); }
.home-legend .sw { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.home-legend .n { grid-column: 2; font: 700 21px/1 var(--home-display); font-stretch: condensed; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.home-ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 30px; border-top: 2px solid var(--text-primary); }
.home-ledger button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 14px 0; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.home-ledger b { font: 800 clamp(32px, 3.8vw, 46px)/.95 var(--home-display); font-stretch: condensed; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.home-ledger b.absent { font: italic 400 13px/1.4 inherit; color: var(--text-muted); }
.home-ledger span { font-size: 12.5px; color: var(--text-secondary); }
.home-ledger button:hover b { color: var(--accent); }

.home-chapter { margin-top: 56px; }
.home-chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 48px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.home-chapter-head h2 { font: 700 clamp(26px, 3.3vw, 40px)/1.05 var(--home-display); font-stretch: condensed; margin-top: 8px !important; color: var(--text-primary); }
.home-chapter-side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.home-chapter-side p { color: var(--text-secondary); max-width: 62ch; }
.home-open { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; }
.home-open:hover { text-decoration: underline; }
.home-chapter > .empty-note { margin-top: 16px; }
.home-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; margin-top: 22px; }
.home-figs.one { grid-template-columns: minmax(0, 1fr); }
.home-fig .home-figs { margin-top: 0; gap: 18px 28px; }
.home-fig { margin: 0; min-width: 0; }
.home-fig figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.home-fig figcaption b { font: 700 16.5px/1.25 var(--home-display); font-stretch: condensed; color: var(--text-primary); }
.home-fig figcaption span { font-size: 12.5px; color: var(--text-muted); }
.home-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.home-bars { display: flex; flex-direction: column; gap: 7px; }
.home-bar { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 5.2rem; gap: 12px; align-items: center; font-size: 13px; }
.home-bar .lab { min-width: 0; line-height: 1.25; color: var(--text-primary); }
.home-bar .lab .id, .home-pair .lab .id { font: 400 11px/1 var(--home-mono); color: var(--text-muted); margin-right: 6px; }
.home-bar .lab .sub, .home-pair .lab .sub { display: block; font: 400 10.5px/1.3 var(--home-mono); color: var(--text-muted); }
.home-bar .track { height: 14px; background: var(--surface-3); border-radius: 2px; overflow: hidden; display: flex; }
.home-bar .fill { display: block; height: 100%; background: var(--series-value); }
.home-bar .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12.5px; color: var(--text-primary); }
.home-bar.patient .fill { background: var(--series-pointer); }
.home-bar.patient .lab { color: var(--series-pointer); font-weight: 600; }
.home-pair { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 6.5rem; gap: 12px; align-items: center; font-size: 13px; }
.home-pair .track { height: 18px; display: flex; gap: 2px; }
.home-pair .track i { display: block; height: 100%; }
.home-pair .val { text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-secondary); }
.home-pair .val b { color: var(--text-primary); }

.home-strip { display: flex; height: 32px; border-radius: 4px; overflow: hidden; gap: 2px; }
.home-strip i { display: block; height: 100%; min-width: 2px; }
.home-keys { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 20px; }
.home-keys li { display: grid; grid-template-columns: 11px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.home-keys .sw { width: 11px; height: 11px; border-radius: 2px; }
.home-keys .v { font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 600; }
.home-waffle { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 440px; }
.home-waffle i, .home-dots i { display: block; aspect-ratio: 1; max-width: 100%; }
.home-waffle i { border-radius: 2px; }
.home-dots { display: grid; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); gap: 5px; max-width: 520px; }
.home-dots i { border-radius: 50%; }
.home-callout { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 2px solid var(--text-primary); min-width: 0; }
.home-callout b { font: 800 clamp(44px, 5.4vw, 66px)/.92 var(--home-display); font-stretch: condensed; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.home-callout b.orange { color: var(--series-pointer); }
.home-callout span { color: var(--text-secondary); font-size: 13.5px; max-width: 42ch; }

.home-timeline .bar { display: flex; height: 42px; gap: 2px; }
.home-timeline .bar i { display: block; height: 100%; min-width: 1px; }
.home-timeline .labels { position: relative; height: 36px; margin-top: 6px; }
.home-timeline .labels span { position: absolute; top: 0; transform: translateX(-50%); font: 400 11px/1.3 var(--home-mono); color: var(--text-secondary); white-space: nowrap; text-align: center; }
.home-timeline .labels span b { display: block; font-weight: 600; color: var(--text-primary); }
.home-timeline .axis { position: relative; height: 22px; border-top: 1px solid var(--border); margin-top: 4px; }
.home-timeline .axis span { position: absolute; top: 5px; transform: translateX(-50%); font: 400 10.5px/1 var(--home-mono); color: var(--text-muted); }
.home-timeline .axis span:first-child { transform: none; }

.home-foot { margin-top: 64px; padding-top: 18px; border-top: 2px solid var(--text-primary); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; }
.home-foot h3 { font: 700 16.5px/1.25 var(--home-display); font-stretch: condensed; margin-bottom: 8px !important; color: var(--text-primary); }
.home-foot ul { margin: 0; padding-left: 18px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 6px; }
.home-foot > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.home-foot p { color: var(--text-secondary); }
.home-mono { font: 400 12px/1.5 var(--home-mono); }

/* A section's landing page (operator, 2026-09-18): its description, a
   diagram of how its parts connect, and its screens. The diagram's inks are
   the theme's own tokens, so it follows light and dark without a redraw. */
.landing-head { padding-block: 22px 8px; max-width: 78ch; }
.landing-head h1 { font: 800 clamp(44px, 6vw, 76px)/.95 var(--home-display); font-stretch: condensed; margin-top: 8px; color: var(--text-primary); }
.landing-lede { margin-top: 14px !important; font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.landing-lede b { color: var(--text-primary); font-weight: 600; }
.landing-diagram { margin: 26px 0 0; padding: 16px 18px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.landing-diagram figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-bottom: 12px; }
.landing-diagram figcaption b { font: 700 19px/1.2 var(--home-display); font-stretch: condensed; color: var(--text-primary); }
.landing-diagram figcaption span { font-size: 12px; color: var(--text-muted); }
.landing-scroll { overflow-x: auto; }
.dg { display: block; width: 100%; min-width: 600px; max-width: 980px; height: auto; font-family: inherit; }
.dg-edge { stroke: var(--text-muted); stroke-width: 1.5; }
.dg-arrow { fill: var(--text-muted); }
.dg-elabel { font-size: 11.5px; fill: var(--text-secondary); paint-order: stroke; stroke: var(--surface-1); stroke-width: 5px; stroke-linejoin: round; }
.dg-shape { stroke-width: 1.25; }
.dg-part .dg-shape { fill: var(--surface-2); stroke: var(--border); }
.dg-actor .dg-shape { fill: var(--surface-1); stroke: var(--text-muted); stroke-dasharray: 5 4; }
.dg-store .dg-shape, .dg-store .dg-rim { fill: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); stroke: var(--accent); }
.dg-group .dg-shape { fill: var(--surface-1); stroke: var(--border); }
.dg-span .dg-shape { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.dg-title { font-size: 14px; font-weight: 700; fill: var(--text-primary); }
.dg-detail { font: 600 12.5px var(--home-mono); fill: var(--accent); }
.dg-note { font-size: 12px; fill: var(--text-secondary); }
.dg-fig { font-size: 12.5px; fill: var(--text-secondary); }
.dg-fig .v { font-weight: 700; fill: var(--text-primary); }
.dg-fig .tok { font-style: italic; fill: var(--text-muted); }
.dg-dot { fill: var(--home-v2); }
.dg-hot { cursor: pointer; }
.dg-hot .dg-title { fill: var(--accent); }
.dg-hot:hover .dg-shape, .dg-hot:focus-visible .dg-shape { stroke: var(--accent); stroke-width: 2.5; }
.dg-hot:hover .dg-title, .dg-hot:focus-visible .dg-title { text-decoration: underline; }
.dg-hot:focus { outline: none; }
.landing-screens { margin-top: 30px; padding-bottom: 20px; }
.landing-screens h2 { font: 700 22px/1.2 var(--home-display); font-stretch: condensed; padding-bottom: 8px; border-bottom: 2px solid var(--text-primary); color: var(--text-primary); }
.landing-screens-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.landing-screens-list button {
  display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.landing-screens-list b { font-size: 14px; font-weight: 700; color: var(--accent); }
.landing-screens-list b::after { content: " \2192"; }
.landing-screens-list span { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.landing-screens-list button:hover, .landing-screens-list button:focus-visible { border-color: var(--accent); background: var(--surface-2); outline: none; }

/* The SITE home (operator, 2026-09-18; compacted the same day): what the
   wordmark opens. A brief paragraph, one compact card per section right up
   front — name, one sentence, headline figures, a thin strip, its screens —
   and the summary statistics at the foot with the way into the database
   summary that was the home page until then. */
/* The name, then what this is on its own full-width line under it, then a rule
   that separates the masthead from the figures (operator, 2026-09-21). It was
   a two-column row: the sentence rode at the title's baseline in a 70ch column
   with the rest of the width empty. */
.site-intro { padding-block: 0 12px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
/* the wordmark and the card headings are all blue (operator, 2026-09-19) */
.site-intro h1 { font: 800 clamp(34px, 3.6vw, 46px)/1 var(--home-display); font-stretch: condensed; color: var(--accent); }
.site-dek { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }

.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.site-card {
  display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 12px 14px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
}
.site-card:hover { border-color: var(--text-muted); }
.site-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding: 0 0 6px; border: 0; border-bottom: 2px solid var(--text-primary); background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.site-num { font: 500 11px/1 var(--home-mono); color: var(--text-muted); }
.site-head h2 { font: 800 clamp(22px, 1.9vw, 27px)/1 var(--home-display); font-stretch: condensed; color: var(--accent); }
.site-go { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.site-head:hover h2, .site-card:has(.site-lede:hover) .site-head h2 { text-decoration: underline; text-underline-offset: 3px; }
.site-head:hover .site-go { text-decoration: underline; }
.site-lede {
  display: block; width: 100%; box-sizing: content-box; padding: 4px 6px; margin: -4px -6px;
  border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary);
}
.site-lede:hover, .site-lede:focus-visible { background: var(--surface-2); color: var(--text-primary); outline: none; }
.site-figs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 10px; }
.site-figs button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 0 3px;
  border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.site-figs b { font: 800 22px/1 var(--home-display); font-stretch: condensed; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.site-figs b.absent { font: italic 400 12px/1.5 inherit; color: var(--text-muted); }
.site-figs span { font-size: 11.5px; line-height: 1.25; color: var(--text-secondary); }
.site-figs button:hover b { color: var(--accent); }
.site-viz { margin: 0; min-width: 0; }
.site-viz figcaption { margin-bottom: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.site-viz .home-strip { height: 10px; border-radius: 3px; gap: 1px; }
.site-viz .empty-note { margin: 0; font-size: 12px; }
.site-key { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--text-secondary); }
.site-key li { display: inline-flex; align-items: center; gap: 4px; }
.site-key .sw { width: 8px; height: 8px; border-radius: 2px; }
.site-key b { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.site-screens { list-style: none; margin: auto 0 0; padding: 7px 0 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 4px 6px; }
.site-screens button {
  padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1);
  font: inherit; font-size: 12px; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.site-screens button::after { content: " \2192"; }
.site-screens button:hover, .site-screens button:focus-visible { border-color: var(--accent); background: var(--surface-2); outline: none; }

.site-summary { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.site-summary-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 24px; }
.site-summary h2 { font: 700 24px/1.1 var(--home-display); font-stretch: condensed; color: var(--text-primary); }
.site-summary-head p { margin-top: 4px !important; font-size: 13px; color: var(--text-secondary); max-width: 60ch; }
.home-dbsummary {
  padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--surface-1);
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent); cursor: pointer; white-space: nowrap;
}
.home-dbsummary:hover { background: var(--accent); color: var(--surface-1); }
.site-facts { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 12px 0 0; font-size: 12.5px; }
.site-facts div { display: flex; gap: 6px; align-items: baseline; }
.site-facts dt { font: 500 10.5px/1.6 var(--home-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.site-facts dd { margin: 0; color: var(--text-primary); }
.site-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 14px; margin-top: 10px; }
.site-counts button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 0 6px;
  border: 0; border-top: 1px solid var(--border); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.site-counts b { font: 800 26px/1 var(--home-display); font-stretch: condensed; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.site-counts b.absent { font: italic 400 12px/1.6 inherit; color: var(--text-muted); }
.site-counts span { font-size: 12px; color: var(--text-secondary); }
.site-counts button:hover b { color: var(--accent); }
.home-back { display: inline-block; margin-top: 8px; }
.site-head:focus-visible, .site-figs button:focus-visible, .site-counts button:focus-visible, .home-dbsummary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1180px) { .site-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .site-grid { grid-template-columns: minmax(0, 1fr); } .site-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .home-mast, .home-chapter-head, .home-foot, .home-figs { grid-template-columns: minmax(0, 1fr); }
  .home-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .home-plate { padding: 14px 12px 12px; }
  .home-bar { grid-template-columns: minmax(0, 1fr) 4.6rem; }
  .home-bar .lab { grid-column: 1 / -1; }
  .home-pair { grid-template-columns: minmax(0, 1fr) 6rem; }
  .home-pair .lab { grid-column: 1 / -1; }
  .home-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-timeline .labels span.minor { display: none; }
}

/* ---- the reach board (standards plane, 2026-09-18) ----------------------- */
/* Three colours carry the whole meaning and are mid-tones that read on both
   grounds: teal is national and the world, ochre the site's own work, brick
   where meaning stops. A dashed segment is a stretch the bundle cannot see. */
/* the board's four colours: national teal (meaning that arrived), local violet (the site's own
   work in flight), a rose stop (where meaning ends), a cool grey hollow (what the bundle cannot
   see). One definition for both themes: each holds ≥ 4:1 on white and on the dark ground. */
:root { --lane-national: #1E8C8C; --lane-local: #6F5BD9; --lane-stop: #D2455C; --lane-hollow: #8A97A5; }
#standards .screen-body { max-width: 1320px; min-width: 0; }
.board-note { font-size: 12.5px; color: var(--text-secondary); max-width: 80ch; margin: 0 0 10px; }
.board { display: grid; gap: 6px; font-size: 12.5px; }
.board-head, .board-row, .board-axis { display: grid; grid-template-columns: 1.2fr 2.4fr 92px 1.5fr 1.05fr 1.5fr; gap: 12px; align-items: center; }
.board-head { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0 10px 4px; border-bottom: 1px solid var(--border); }
.board-head .r { text-align: right; }
.board-row { padding: 8px 10px; border-radius: 5px; border: 1px solid var(--border); }
.board-row.hot { border-color: var(--lane-local); }
.board-lane { font-weight: 600; font-size: 14px; line-height: 1.15; }
.board-lane small { display: block; font-family: var(--mono, ui-monospace, monospace); font-weight: 400; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.board-track { position: relative; height: 20px; background: var(--surface-3); border-radius: 3px; overflow: hidden; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; }
.board-track .seg { position: absolute; top: 0; bottom: 0; line-height: 20px; padding-left: 6px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-track .record, .exec-track .record, .board-key .sw.record { background: var(--text-muted); } .board-track .local, .exec-track .local, .board-key .sw.local { background: var(--lane-local); } .board-track .national, .exec-track .national, .board-key .sw.national { background: var(--lane-national); }
.board-track .stop, .exec-track .stop, .board-key .sw.stop { background: var(--lane-stop); } .board-track .hollow, .exec-track .hollow, .board-key .sw.hollow { background: transparent; border: 1.5px dashed var(--lane-hollow); color: var(--lane-hollow); }
.board-reach { text-align: right; font-weight: 600; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.board-reach small { display: block; font-family: var(--mono, ui-monospace, monospace); font-weight: 400; font-size: 10.5px; color: var(--text-muted); margin-top: 3px; white-space: normal; }
.board-reach.r { color: var(--lane-stop); } .board-reach.l { color: var(--lane-local); } .board-reach.n { color: var(--lane-national); } .board-reach.h { color: var(--lane-hollow); }
.board-behind { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; line-height: 1.5; }
.board-owner { font-size: 12px; color: var(--text-secondary); line-height: 1.35; } .board-owner b { font-weight: 500; color: var(--text-primary); }
.board-st { display: inline-block; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; padding: 1px 7px; border-radius: 3px; margin-bottom: 3px; border: 1px solid transparent; }
.board-st.direct, .board-st.done { color: var(--lane-national); border-color: var(--lane-national); }
.board-st.progress { color: var(--lane-local); border-color: var(--lane-local); }
.board-st.seeded { color: var(--lane-hollow); border-style: dashed; border-color: var(--lane-hollow); }
.board-st.un { color: var(--text-muted); border-color: var(--border); }
.board-key { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 11.5px; align-items: center; margin: 2px 0 12px; }
.board-key .item { display: inline-flex; align-items: center; gap: 6px; }
.board-key .sw { display: inline-block; width: 16px; height: 10px; border-radius: 2px; box-sizing: border-box; }
.board-key .gap { flex-basis: 8px; }
.board-key .board-st { margin: 0; cursor: help; }
.board-section { border: 1px solid var(--border); border-radius: 6px; margin-top: 10px; background: var(--surface-1, transparent); }
.board-section > summary { cursor: pointer; padding: 9px 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
.board-section > summary::-webkit-details-marker { display: none; }
.board-section > summary::before { content: "▸"; font-size: 12px; color: var(--text-muted); width: 12px; }
.board-section[open] > summary::before { content: "▾"; }
.board-section > summary b { font-size: 13px; }
.board-section > summary small { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); }
.board-section > summary:hover { background: var(--surface-2); }
.board-section > .body { padding: 4px 12px 12px; }
.board-section > .body .board-note { margin-top: 4px; }
.exec { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; margin-bottom: 14px; }
.exec-tile { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 5px; text-decoration: none; color: inherit; background: var(--surface-1, transparent); }
.exec-tile:hover, .exec-tile:focus-visible { border-color: var(--accent); background: var(--surface-2); outline: none; }
.exec-tile b { font-size: 12.5px; line-height: 1.15; }
.exec-tile .w { font-weight: 600; font-size: 16px; line-height: 1; font-variant-numeric: tabular-nums; }
.exec-tile .w.r { color: var(--lane-stop); } .exec-tile .w.l { color: var(--lane-local); } .exec-tile .w.n { color: var(--lane-national); } .exec-tile .w.h { color: var(--lane-hollow); }
.exec-tile small { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); line-height: 1.3; }
.exec-track { position: relative; height: 10px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.exec-track .seg { position: absolute; top: 0; bottom: 0; }
.board-else { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.board-else b { color: var(--text-secondary); font-weight: 600; }
.board-standards { margin-top: 4px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; font-size: 12px; align-items: baseline; }
.board-standards .k { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.board-standards .v { overflow-wrap: anywhere; }
.record-bar { display: flex; height: 14px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.record-bar i { display: block; height: 100%; }
.record-bar .reaching { background: var(--lane-national); } .record-bar .unlinked { background: var(--lane-stop); } .record-bar .unresolved { background: var(--lane-hollow); } .record-bar .blank { background: var(--text-muted); }
.record-legend { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text-muted); }
.lane-breakdown { display: grid; gap: 3px; font-size: 12px; margin-top: 4px; }
.lane-breakdown h5 { margin: 0 0 2px; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.lane-breakdown .row { display: grid; grid-template-columns: 62px 1fr; gap: 10px; }
.lane-breakdown .root { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text-secondary); }
.board-axis { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-muted); padding: 2px 10px 0; }
.board-axis .lbl { grid-column: 2; display: flex; justify-content: space-between; }
@media (max-width: 900px) { .board-head, .board-axis { display: none; } .board-row { grid-template-columns: 1fr; } .board-reach { text-align: left; } }

/* level 2: a lane opened under its row */
.board-row[role="button"] { cursor: pointer; }
.board-row[role="button"]:hover { background: var(--surface-2); }
.board-row.open { border-color: var(--accent); }
.lane-panel { border: 1px solid var(--accent); border-top: 0; border-radius: 0 0 6px 6px; margin: -6px 0 6px; padding: 14px 12px 12px; display: grid; gap: 14px; background: var(--surface-1, transparent); }
.lane-path { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; align-items: start; overflow-x: auto; }
.lane-node { border-radius: 5px; padding: 8px 10px; border: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 3px; font-size: 12px; min-width: 0; }
.lane-node b { font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.lane-node i { font-style: normal; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text-secondary); }
.lane-node .m { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.lane-node .m span { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-muted); }
.lane-node .m span.at { border-color: var(--lane-national); color: var(--lane-national); }
.lane-node .m span.key { border-color: var(--lane-local); color: var(--lane-local); }
.lane-node .m span.open, .lane-node .m span.warn { border-color: var(--lane-stop); color: var(--lane-stop); }
.lane-node.local { border-color: var(--lane-local); } .lane-node.national { border-color: var(--lane-national); } .lane-node.world { border-style: dashed; }
.lane-hop { display: grid; gap: 2px; padding: 8px 6px 0; min-width: 120px; font-size: 11px; color: var(--text-secondary); text-align: center; position: relative; }
.lane-hop::before { content: "›"; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font-size: 18px; color: var(--text-muted); line-height: 1; }
.lane-hop em { font-style: normal; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 500; color: var(--text-primary); }
.lane-hop.text em, .lane-hop.code em { color: var(--lane-stop); }
.lane-hop small { display: block; font-size: 10.5px; color: var(--text-muted); }
.lane-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lane-funnel { display: grid; gap: 6px; }
.lane-funnel .step { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; font-size: 12px; }
.lane-funnel .step .k { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--text-secondary); text-align: right; }
.lane-funnel .step .b { height: 22px; border-radius: 3px; background: var(--lane-national); color: #fff; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 22px; padding-left: 8px; white-space: nowrap; }
.lane-funnel .step:first-child .b, .lane-funnel .step:nth-child(3) .b { background: var(--lane-local); }
.lane-funnel .leak { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; color: var(--lane-stop); padding-left: 140px; }
.lane-facts { display: grid; gap: 6px; font-size: 12.5px; align-content: start; }
.lane-facts .fact { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.lane-facts .k { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.lane-unlinked { font-size: 12.5px; }
.lane-unlinked summary { cursor: pointer; color: var(--text-secondary); }
.lane-unlinked ol { columns: 3 200px; column-gap: 18px; margin: 6px 0 0; padding-left: 2.6em; font-size: 12px; line-height: 1.5; }
.lane-unlinked li { break-inside: avoid; }
.unlinked-name { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }
@media (max-width: 900px) { .lane-two { grid-template-columns: 1fr; } .lane-path { grid-auto-flow: row; grid-auto-columns: auto; } .lane-hop::before { content: "⌄"; } }

/* level 3: a node opened inside its lane */
.lane-node[role="button"] { cursor: pointer; }
.lane-node[role="button"]:hover { filter: brightness(.97); }
.lane-node.open { outline: 2px solid var(--accent); outline-offset: 1px; }
.node-panel { border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px 12px; display: grid; gap: 8px; }
.node-panel h4 { margin: 0; font-size: 13px; font-weight: 600; }
.node-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.node-card { border: 1px solid var(--border); border-radius: 5px; padding: 9px 11px; display: grid; gap: 4px; align-content: start; font-size: 12px; min-width: 0; }
.node-card h5 { margin: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.node-card .big { font-weight: 600; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.node-card p { margin: 0; color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; max-width: none; }
.node-bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 3px 8px; align-items: center; font-size: 11px; margin-top: 4px; }
.node-bars .lab, .node-bars .val { font-family: var(--mono, ui-monospace, monospace); color: var(--text-secondary); }
.node-bars .bar { height: 9px; background: var(--surface-3); border-radius: 2px; position: relative; min-width: 60px; }
.node-bars .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lane-national); border-radius: 2px; }