/* hmi.css - look and feel for the PCG site. System fonts only; no external resources.
   Source of truth: design-system/MASTER.md. Colours are tokens in the two :root blocks and nowhere else.
   Sections: 1 tokens | 2 base | 3 layout and nav | 4 Monitor | 5 controls | 6 components | 7 tooltip
             8 diagrams | 9 PCG overlay | 10 focus and motion */

/* ---- 1. Tokens ------------------------------------------------------------------------------ */
:root {
  color-scheme: light dark;
  /* surfaces and text (existing) */
  --bg: #f5f7f9; --surface: #ffffff; --text: #16202a; --muted: #4b5866;
  --border: #d6dde4; --control-border: #5f6c79; --hover: #eaf0f4;
  /* new neutrals */
  --surface-2: #eef2f5;            /* sunken: table heads, code, placeholders, meter track */
  /* accent (existing + new) */
  --accent: #0b6b6b; --accent-hover: #095858; --on-accent: #ffffff; --focus: #0b57d0;
  --accent-text: #0b6b6b;          /* accent used AS TEXT: links, current nav, eyebrows */
  --accent-soft: #e3f1ef;          /* tinted background: current nav, step badge, chosen row, correct cells */
  /* status (existing warn/error + new info) */
  --warn-bg: #fff4d6; --warn-text: #6b4200; --warn-border: #8a5a00; --error: #a3200f;
  --info-bg: #e8f0fa; --info-text: #173f6e; --info-border: #2f6aad;
  /* tooltip */
  --tooltip-bg: #1f2a35; --tooltip-text: #f5f7f9; --tooltip-border: #1f2a35;
  /* plot (existing; read by plot.js, do not rename) */
  --plot-bg: #ffffff; --plot-grid: #e6ebef; --plot-axis: #5b6772;
  --plot-text: #16202a; --plot-trace: #0b6b6b; --plot-cursor: #b4441c;
  /* data colours (charts) */
  --series-1: #0b6b6b;             /* primary series: design response, feature bars, probability fill */
  --series-2: #b4441c;             /* secondary series: measured points */
  --band-fill: rgba(11, 107, 107, 0.10);   /* shaded passband 20-600 Hz */
  --towards-murmur: #b4441c; --towards-normal: #245f9e;
  --cm-hit-bg: #e3f1ef; --cm-miss-bg: #fbece6;
  --heat-neg-2: #1f5a96; --heat-neg-1: #8fb3d9; --heat-0: #f5f7f9; --heat-pos-1: #e9a578; --heat-pos-2: #a33e14;
  /* PCG annotation overlay */
  --band-sound: rgba(36, 95, 158, 0.16);   /* S1, S2 */
  --band-murmur: rgba(180, 68, 28, 0.16);  /* murmur hatch stripes */
  /* diagrams */
  --diagram-line: #4b5866; --path-injected: #b4441c;
  --lane-fixture: #6a4a9c;  --lane-fixture-bg: #f5f0fa;  --lane-fixture-hover: #e9dff6;
  --lane-frontend: #245f9e; --lane-frontend-bg: #ecf2fa; --lane-frontend-hover: #dae6f6;
  --lane-digital: #0b6b6b;  --lane-digital-bg: #e8f4f3;  --lane-digital-hover: #d3ecea;
  /* elevation */
  --shadow-1: 0 1px 2px rgba(22, 32, 42, 0.06);
  --shadow-2: 0 6px 20px rgba(22, 32, 42, 0.18), 0 1px 3px rgba(22, 32, 42, 0.12);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1318; --surface: #151c23; --text: #e7ecf1; --muted: #a4b0bd;
    --border: #2a3540; --control-border: #7d8c9b; --hover: #1d2731;
    --surface-2: #1b232c;
    --accent: #45d1c4; --accent-hover: #6fe0d5; --on-accent: #0e1318; --focus: #8ab4ff;
    --accent-text: #45d1c4; --accent-soft: #143130;
    --warn-bg: #2b2209; --warn-text: #ffd27a; --warn-border: #b88a2a; --error: #ff8f7a;
    --info-bg: #14233a; --info-text: #a9cbf5; --info-border: #5b8fd0;
    --tooltip-bg: #26313c; --tooltip-text: #eef2f6; --tooltip-border: #6b7886;
    --plot-bg: #151c23; --plot-grid: #1f2932; --plot-axis: #8393a3;
    --plot-text: #e7ecf1; --plot-trace: #45d1c4; --plot-cursor: #ff9b6a;
    --series-1: #45d1c4; --series-2: #ff9b6a;
    --band-fill: rgba(69, 209, 196, 0.12);
    --towards-murmur: #ff9b6a; --towards-normal: #8db8f0;
    --cm-hit-bg: #143130; --cm-miss-bg: #2e1e18;
    --heat-neg-2: #8db8f0; --heat-neg-1: #3d6390; --heat-0: #1b232c; --heat-pos-1: #94512f; --heat-pos-2: #ff9b6a;
    --band-sound: rgba(141, 184, 240, 0.18);
    --band-murmur: rgba(255, 155, 106, 0.18);
    --diagram-line: #a4b0bd; --path-injected: #ff9b6a;
    --lane-fixture: #c2a6ee;  --lane-fixture-bg: #1c1926;  --lane-fixture-hover: #2d2540;
    --lane-frontend: #8db8f0; --lane-frontend-bg: #141d29; --lane-frontend-hover: #1f2f45;
    --lane-digital: #45d1c4;  --lane-digital-bg: #112220;  --lane-digital-hover: #183a37;
    --shadow-1: none;
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.55);
  }
}
/* type, spacing, radii, motion (no colours) */
:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem;
  --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px; --radius-pill: 999px;
  --dur-fast: 150ms; --dur: 200ms;
}

/* ---- 2. Base -------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* author display rules below would otherwise beat the hidden attribute */
body {
  display: flex; flex-direction: column; min-height: 100vh; margin: 0;
  background: var(--bg); color: var(--text);
  font: var(--fs-base)/1.5 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
h1 { font-size: var(--fs-xl); line-height: 1.2; font-weight: 700; }
h2 { font-size: var(--fs-lg); line-height: 1.3; font-weight: 600; }
h3 { font-size: var(--fs-md); line-height: 1.3; font-weight: 600; }
.card h2 { font-size: var(--fs-md); }
:where(a:any-link) { color: var(--accent-text); text-underline-offset: 0.15em; text-decoration-thickness: 1px; } /* visited keeps the colour */
:where(a:any-link):hover { text-decoration-thickness: 2px; }
code {
  padding: 0.1em 0.35em; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); font-family: var(--font-mono); font-size: 0.875em; overflow-wrap: anywhere;
}
.note { color: var(--muted); font-size: var(--fs-sm); }
.lede { font-size: var(--fs-md); font-weight: 400; color: var(--text); }

/* ---- 3. Layout and nav ---------------------------------------------------------------------- */
.frame { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .frame { padding-inline: var(--space-5); } }
main { flex: 1 0 auto; }

.skip-link { position: absolute; top: var(--space-2); left: -9999px; z-index: 1100; }
.skip-link:focus {
  left: var(--space-2); display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius); background: var(--surface); color: var(--accent-text); font-weight: 600; box-shadow: var(--shadow-2);
}

.app-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.brand-link {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--text);
  font-size: var(--fs-lg); font-weight: 600; text-decoration: none;
}
.brand-link:hover { color: var(--accent-text); }
.subtitle { margin-top: -4px; color: var(--muted); font-size: var(--fs-sm); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface);
  color: var(--muted); font-size: var(--fs-sm);
}
.chip span { min-width: 0; overflow-wrap: anywhere; }

.nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); margin: 0; padding: var(--space-2) 0; list-style: none; }
.nav a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius); color: var(--muted); font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.nav a:hover { background: var(--hover); color: var(--text); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 -3px 0 var(--accent); } /* the bar takes no space */
.nav-live { display: flex; align-items: center; } /* static site: the Monitor link and its info button sit side by side, not stacked */
@media (min-width: 600px) {
  .nav { display: flex; flex-wrap: wrap; padding-bottom: 0; }
  .nav a { justify-content: flex-start; border-radius: var(--radius) var(--radius) 0 0; }
}

.app-footer { padding-block: var(--space-4) var(--space-6); color: var(--muted); font-size: var(--fs-sm); }

/* info pages: one column; sections start with an h2 */
.page { padding-block: var(--space-6) var(--space-8); }
.page h1 { font-size: var(--fs-2xl); }
@media (min-width: 768px) { .page h1 { font-size: 2rem; } }
.page h1 + .lede { margin-top: var(--space-3); }
.page > section { margin-top: var(--space-7); }
@media (min-width: 1024px) { .page > section { margin-top: var(--space-8); } }
.page h2 { scroll-margin-top: var(--space-4); }
:where(.page) :is(p, ul, ol) { max-width: 70ch; } /* readable line length; figures, tables and diagrams use the full width */
:where(.page) :is(ul, ol) { padding-left: 1.25em; }
.page section > * + *, .page .step > * + *, .page .card > * + * { margin-top: var(--space-4); }
.page :is(h2, h3) + *, .page .card > * + * { margin-top: var(--space-3); }
.grid-2, .grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 768px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }

/* ---- 4. Monitor ----------------------------------------------------------------------------- */
.monitor-page { padding-block: var(--space-5) var(--space-6); }
.monitor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1024px) { .monitor { grid-template-columns: minmax(0, 1fr) 320px; } }
.monitor-head { grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--space-1); }
.more-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.more-link svg { flex: none; }
.side { display: grid; gap: var(--space-4); min-width: 0; }

/* status line: always present so the layout does not jump when a message appears */
#status, .noscript { grid-column: 1 / -1; min-height: 1.5em; color: var(--muted); }
#status[data-kind="error"] { padding-left: var(--space-3); border-left: 4px solid var(--error); color: var(--error); font-weight: 600; }

/* mode switch: one fieldset across the top; the Live radio is disabled when the server has no live source */
.mode-switch { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 4px var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.mode-switch legend { padding: 0 6px; color: var(--muted); font-size: var(--fs-sm); }
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-4); }
.choice { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-right: var(--space-2); cursor: pointer; }
.choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: inherit; }
.choice input:disabled + span { cursor: not-allowed; opacity: 0.55; }

.fields { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.fields dt { color: var(--muted); font-size: var(--fs-sm); }
.fields dd { overflow-wrap: anywhere; }
.fields .big { font-size: 1.75rem; line-height: 1.25; font-weight: 600; }
.scope { margin-top: var(--space-1); color: var(--muted); font-size: var(--fs-sm); }
.sub { display: block; color: var(--muted); font-size: var(--fs-sm); }
.result-note { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 4px solid var(--warn-border); font-size: var(--fs-sm); }
#info-split[data-split="train"] { color: var(--warn-text); font-weight: 600; } /* training files are not unseen data: make that hard to miss */

/* plot */
canvas {
  display: block; width: 100%; height: 360px; margin-top: var(--space-3); border-radius: var(--radius-sm);
  background: var(--plot-bg); cursor: crosshair; touch-action: pan-y; /* horizontal drag moves the cursor, vertical still scrolls */
}
/* Reserve the height of the wrapped hint (2 lines, 3 on phones), not of a reading, so showing or hiding the cursor never moves the controls. */
.readout { min-height: 3em; margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--fs-sm); }
@media (max-width: 600px) {
  canvas { height: 260px; }
  .readout { min-height: 4.5em; }
  .buttons #play-btn { flex-basis: 100%; } /* Play is first in the DOM and gets its own row; Previous and Next share the next one */
}

/* ---- 5. Controls ---------------------------------------------------------------------------- */
.controls { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.field { display: flex; flex: 1 1 170px; flex-direction: column; gap: var(--space-1); min-width: 0; }
/* The first field (Recording) holds the longest text, so it gets more room. All three share one row from about 650 px up. */
.row .field:first-child { flex: 2 1 220px; }
.field label, .slider-head { color: var(--muted); font-size: var(--fs-sm); }
.slider-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.slider-head span { color: var(--text); font-weight: 600; }
.label-row { display: flex; align-items: center; gap: var(--space-1); min-height: 24px; } /* a label and its info button side by side */
select, button {
  min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--control-border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
select { width: 100%; }
.buttons button { flex: 1 1 140px; }
button:hover:not(:disabled), select:hover:not(:disabled) { background: var(--hover); }
button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
:disabled { cursor: not-allowed; opacity: 0.55; }

/* ---- 6. Components -------------------------------------------------------------------------- */
.card, .figure, .step {
  min-width: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-1);
}
@media (min-width: 768px) { .page .card, .figure, .step { padding: var(--space-5); } }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* tags: .tag is the warning style (Placeholder); variants say simulated, chosen/measured, not measured */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--warn-border);
  border-radius: var(--radius-pill); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-xs); font-weight: 600;
}
.tag.info { border-color: var(--info-border); background: var(--info-bg); color: var(--info-text); }
.tag.accent { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.tag.neutral { border: 1px dashed var(--control-border); background: var(--surface-2); color: var(--muted); }

/* info button: a 20 px icon in a 44 px hit area; the negative margin keeps label rows from growing */
.info-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; margin-block: -10px;
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--muted); vertical-align: middle;
}
.info-btn svg { display: block; pointer-events: none; }
.info-btn:hover, .info-btn.is-active { background: var(--hover); color: var(--accent-text); }
.explain { cursor: pointer; }

/* figure + caption; .figure-scroll holds anything wider than the screen, so the page never scrolls sideways */
.figure-body canvas { margin-top: 0; }
.figure figcaption { max-width: 70ch; margin-top: var(--space-3); color: var(--muted); font-size: var(--fs-sm); }
.figure-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.scroll-hint { margin-top: var(--space-2); color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 768px) { .scroll-hint { display: none; } }
.slot {
  display: grid; place-items: center; align-content: center; gap: var(--space-2); aspect-ratio: 4 / 3; padding: var(--space-4);
  border: 2px dashed var(--control-border); border-radius: var(--radius-lg); background: var(--surface-2);
  color: var(--muted); text-align: center;
}
.slot strong { color: var(--text); }

/* callout / status banner */
.callout {
  --callout-bg: var(--info-bg); --callout-edge: var(--info-border); --callout-ink: var(--info-text); /* info unless .warning */
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4);
  border-left: 4px solid var(--callout-edge); border-radius: var(--radius-lg); background: var(--callout-bg);
}
.callout.info { --callout-bg: var(--info-bg); --callout-edge: var(--info-border); --callout-ink: var(--info-text); }
.callout.warning { --callout-bg: var(--warn-bg); --callout-edge: var(--warn-border); --callout-ink: var(--warn-text); }
.callout-icon { width: 24px; height: 24px; color: var(--callout-ink); }
.callout-title { color: var(--callout-ink); font-weight: 600; }
.callout p + p { margin-top: var(--space-1); }

/* data table */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table caption { padding-bottom: var(--space-2); color: var(--text); font-weight: 600; text-align: left; }
.data-table th, .data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table th { background: var(--surface-2); color: var(--text); font-weight: 600; text-align: left; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table tr.chosen > * { background: var(--accent-soft); } /* the first cell also carries a "Chosen" tag: colour is never the only marker */

/* stat tile */
.stat { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.stat-label { color: var(--muted); font-size: var(--fs-sm); }
.stat-value { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.stat-detail { color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.stat.pending { border: 1px dashed var(--control-border); background: var(--surface-2); }
.stat.pending .stat-value { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em; }

/* confusion matrix: a real table whose cells are explain buttons */
.cm { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cm caption { padding-bottom: var(--space-2); font-size: var(--fs-sm); font-weight: 600; text-align: left; }
.cm th, .cm td { padding: var(--space-1); }
.cm th { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; text-align: center; }
.cm tr:first-child > :first-child { width: 34%; } /* the empty corner cell sets the row-header column; the other two share the rest */
.cm th[scope="row"] { text-align: left; }
.cm-cell {
  display: grid; place-content: center; gap: 2px; width: 100%; min-height: 88px; padding: var(--space-2);
  border-radius: var(--radius); color: var(--text); text-align: center;
}
.cm-cell.hit, .cm-cell.hit:hover:not(:disabled) { background: var(--cm-hit-bg); }
.cm-cell.miss, .cm-cell.miss:hover:not(:disabled) { background: var(--cm-miss-bg); }
.cm-cell:hover:not(:disabled), .cm-cell.is-active { box-shadow: inset 0 0 0 1px var(--text); } /* the edge reads twice as thick; nothing shifts */
.cm-count { font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; }
.cm-name { color: var(--muted); font-size: var(--fs-xs); }

/* "where to look in the code", step markers */
.code-refs { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.step-head { display: flex; align-items: center; gap: var(--space-3); }
.step-num {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 600;
}

/* meter: window probability against the threshold. Set --p and --at (0 to 1) on .meter from the page script. */
.meter-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.meter { position: relative; flex: 1 1 auto; min-width: 0; padding: 4px 0 30px; }
.meter-track { position: relative; height: 12px; border: 1px solid var(--control-border); border-radius: var(--radius-pill); background: var(--surface-2); }
.meter-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--series-1); }
.meter-mark { position: absolute; top: -5px; left: calc(var(--at, 0) * 100%); width: 2px; height: 20px; margin-left: -1px; background: var(--text); }
.meter-label { /* centred under the mark, but kept inside the track */
  position: absolute; top: 24px; left: clamp(4.5em, calc(var(--at, 0) * 100%), calc(100% - 4.5em)); width: 9em; margin-left: -4.5em;
  color: var(--muted); font-size: var(--fs-xs); text-align: center;
}
.meter-value { font-size: var(--fs-md); font-weight: 600; }

/* heatmap colour scale (the heatmap itself is a canvas that reads the same tokens) */
.heat-bar {
  height: 12px; border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--heat-neg-2), var(--heat-neg-1), var(--heat-0), var(--heat-pos-1), var(--heat-pos-2));
}
.heat-scale { display: flex; justify-content: space-between; margin-top: var(--space-1); color: var(--muted); font-size: var(--fs-xs); }

/* legend: swatch + label. A swatch is an area (default), a line, or a dot; modifiers pick its colour. */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; list-style: none; font-size: var(--fs-sm); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
button.legend-item { gap: var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-sm); }
button.legend-item:hover:not(:disabled), button.legend-item.is-active { background: var(--hover); }
.swatch { --c: var(--text); flex: none; width: 12px; height: 12px; border: 1.5px solid var(--c); border-radius: var(--radius-sm); }
.swatch.line { width: 16px; height: 0; border-width: 2px 0 0; border-radius: 0; }
.swatch.line.dashed { border-top-style: dashed; }
.swatch.dot { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--c); }
.swatch.series-1 { --c: var(--series-1); }
.swatch.series-2 { --c: var(--series-2); }
.swatch.axis { --c: var(--plot-axis); }
.swatch.band { --c: var(--series-1); background: var(--band-fill); }
.swatch.sound { --c: var(--towards-normal); background: var(--band-sound); }
.swatch.murmur { --c: var(--towards-murmur); background: repeating-linear-gradient(135deg, var(--band-murmur) 0 3px, transparent 3px 6px); }
.swatch.systole { --c: var(--control-border); border-width: 1px; background: var(--surface-2); }
.swatch.diastole { --c: var(--control-border); border: 1px dashed var(--c); background: var(--surface); }

/* ---- 7. Tooltip (made by explain.js) -------------------------------------------------------- */
.explain-tip {
  position: fixed; top: 0; left: 0; z-index: 1000; max-width: min(320px, calc(100vw - 32px)); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--tooltip-border); border-radius: var(--radius); background: var(--tooltip-bg); color: var(--tooltip-text);
  box-shadow: var(--shadow-2); font-size: var(--fs-sm); line-height: 1.45;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) ease-out, visibility 0s linear var(--dur-fast);
}
.explain-tip.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.explain-tip strong { display: block; }
.explain-defs { display: none; } /* the descriptions the triggers point at; also marked hidden in the markup */

/* ---- 8. Diagrams (inline SVG; markup rules in MASTER.md section 6) -------------------------- */
.dg { display: block; width: 100%; max-width: 960px; height: auto; margin-inline: auto; font-family: inherit; }
.lane-fixture { --lane: var(--lane-fixture); --lane-bg: var(--lane-fixture-bg); --lane-hover: var(--lane-fixture-hover); }
.lane-frontend { --lane: var(--lane-frontend); --lane-bg: var(--lane-frontend-bg); --lane-hover: var(--lane-frontend-hover); }
.lane-digital { --lane: var(--lane-digital); --lane-bg: var(--lane-digital-bg); --lane-hover: var(--lane-digital-hover); }
.dg-lane-bg { fill: var(--lane-bg); }
.dg-lane-label { fill: var(--lane); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.dg-block { user-select: none; }
.dg-box { fill: var(--surface); stroke: var(--lane); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dg-title { fill: var(--text); font-size: 14px; font-weight: 600; }
.dg-sub { fill: var(--muted); font-size: 13px; font-weight: 400; }
.dg-ring { fill: none; stroke: var(--focus); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--dur-fast); }
.dg-arrow { fill: none; stroke: var(--diagram-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dg-arrow.injected { stroke: var(--path-injected); stroke-dasharray: 6 4; } /* dashes + a label, so the path never relies on colour alone */
.dg-head { fill: var(--diagram-line); }
.dg-head.injected { fill: var(--path-injected); }
.dg-label { fill: var(--muted); font-size: 13px; }
.dg-label.injected { fill: var(--path-injected); font-weight: 600; }
.dg-symbol { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dg-symbol.line { fill: none; }
.dg .explain { cursor: pointer; outline: none; } /* the ring replaces the outline */
.dg .explain .dg-box { transition: fill var(--dur-fast); }
.dg .explain:hover .dg-box, .dg .explain.is-active .dg-box { fill: var(--lane-hover); }
.dg .explain:focus-visible .dg-ring { opacity: 1; }

/* ---- 9. PCG annotation overlay (Data & AI; the page script places the pieces) --------------- */
.pcg-annotated { position: relative; }
.pcg-annotated canvas { margin-top: 0; }
.pcg-strip { position: relative; z-index: 3; height: 44px; background: var(--surface); }
.pcg-seg, .pcg-band { position: absolute; }
.pcg-seg { top: 0; bottom: 0; display: grid; place-items: center; overflow: hidden; color: var(--text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pcg-seg.s1, .pcg-seg.s2 { background: var(--band-sound); }
.pcg-seg.systole { border: 1px solid var(--control-border); background: var(--surface-2); }
.pcg-seg.diastole { border: 1px dashed var(--control-border); background: var(--surface); }
.pcg-band { z-index: 2; }
.pcg-band.murmur { z-index: 1; background: repeating-linear-gradient(135deg, var(--band-murmur) 0 6px, transparent 6px 12px); } /* hatch: told apart without colour */
.pcg-band.sound { background: var(--band-sound); }
.pcg-seg:hover, .pcg-band:hover, .pcg-seg.is-active, .pcg-band.is-active { box-shadow: inset 0 0 0 2px var(--text); }
.pcg-annotated canvas:focus-visible { outline-offset: -3px; } /* the strip above would paint over the top of an outside ring */

/* ---- 10. Focus and motion ------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* keyboard focus must always be visible */
.figure-scroll:focus-visible, .table-scroll:focus-visible { outline-offset: -3px; } /* clipped by their own box: draw the ring inside */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}