/* 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;
  --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;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #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;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #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;
}

* { 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 · main. The third row arrived with the plane navigation
     and MUST be declared: 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. */
  grid-template-rows: auto auto 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; }
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; }
header .prov { color: var(--text-muted); font-size: 12px; }
#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 ---- */
main { display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
#rail {
  border-right: 1px solid var(--border); background: var(--surface-2);
  display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0;
}
#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;
}
.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 ---- */
#tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
#tabs button {
  border: 0;
  white-space: nowrap; background: var(--surface-1); color: var(--text-secondary);
  font: inherit; padding: 4px 12px; cursor: pointer;
}
#tabs button + button { border-left: 1px solid var(--border); }
#tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
#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; }

#summary, #explore, #graphstats, #coupling, #prov, #behaviour, #interop { grid-column: 2; overflow-y: auto; padding: 14px 18px 60px; min-width: 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. */
.circle-stage { display: block; }
.readout-strip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  min-height: 32px;
  margin: 0 0 10px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 12.5px;
  /* A FIXED line box, not a ratio: the package name is set a point larger than
     the facts, and a ratio made the strip one pixel taller while hovering —
     which moved the circle one pixel under the pointer on every rim mark. */
  line-height: 18px;
}
.panel-name {
  font-size: 13.5px;
  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; }
.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; }
/* Narrow enough that the facts wrap to a second line, so the strip RESERVES
   one: the fixed line box stops it growing by a pixel on a wide window, and
   this stops it growing by a line on a narrow one. Both are the same defect —
   a readout that changes height moves the circle out from under the pointer —
   and nothing is hidden either way, only laid out on two lines. */
@media (max-width: 1100px) {
  .readout-strip { min-height: 54px; align-content: flex-start; }
  .panel-note { margin-left: 0; }
}

#coupling svg.coupling-plot { display: block; margin: 0 auto; width: 100%; max-width: none; }
#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; }

/* The coupling key. Placed BELOW the circle and above the hint, so the order
   reading down is: what the attribution is, the chart, what the colours mean. */
.circle-key { margin: 4px 0 10px; gap: 18px; }
/* nowrap + flex:none, or the flex parent shrinks each item until its label
   breaks across three lines and separates from the swatch it belongs to. */
.circle-key .key-item {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  white-space: nowrap; color: var(--text-secondary);
}
.circle-key svg { flex: none; }
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 {
  margin-left: auto;                /* pinned to the top-right corner */
  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)                  */
/* ------------------------------------------------------------------------ */

#subtabs {
  display: flex;
  gap: 2px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-1);
}
#subtabs[hidden] { display: none; }
#subtabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
}
#subtabs button:hover { color: var(--text-primary); }
#subtabs button[aria-selected="true"] {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

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 */
.catalogue {
  display: grid;
  grid-template-columns: 220px minmax(240px, 1fr) minmax(280px, 1.2fr);
  gap: 16px;
  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; }