/* Fonts are served with the site (Fontsource 5.3.0, SIL Open Font License; see vendor/fonts),
   so pages render the same on networks that block font CDNs and no visitor data goes to a font host. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --bg: #0d1219;
  --bg-2: #121923;
  --panel: #151d28;
  --panel-2: #1b2532;
  --line: #263243;
  --line-strong: #344358;
  --text: #e6ebf2;
  --muted: #94a2b5;
  --faint: #7f8ea2; /* at least 4.6:1 on every panel background (WCAG 1.4.3) */
  --accent: #5eead4;
  --accent-ink: #062b27;
  --warm: #f6c35b;
  --danger: #f43f5e;
  --header-bg: rgba(13, 18, 25, 0.85);
  --wrong-ink: #fda4af;
  --radius: 14px;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Calibri where it is installed (Windows, Office), Roboto on Android and Chromebooks, Carlito (metric
     twin of Calibri) on Linux, then the system font. All local: nothing is downloaded. */
  --sans: Calibri, Roboto, Carlito, 'Segoe UI', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
/* Calibri's letters are small for their size: match the x-height of the other fonts so text stays as
   legible. On every element, because the font shorthand used throughout resets it. */
*, *::before, *::after { font-size-adjust: 0.52 !important; }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(94, 234, 212, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(116, 147, 234, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
}

a { color: var(--accent); }

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { left: 16px; }

/* ---------- Header / footer ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The mark is half MyDigiPulse blue, half MyDigiPulse orange (darker shades on the light theme for contrast). */
.brand svg .mark-a { stroke: #4bc8e8; }
.brand svg .mark-b { stroke: #e08a2e; }
:root[data-theme='light'] .brand svg .mark-a { stroke: #1d8fb3; }
:root[data-theme='light'] .brand svg .mark-b { stroke: #b8650f; }

.site-header nav { display: flex; gap: 4px; }
.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
}
.site-header nav a:hover { color: var(--text); background: var(--panel-2); }
.site-header nav a[aria-current='page'] { color: var(--text); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 24px clamp(16px, 4vw, 40px) 40px;
  color: var(--faint);
  font-size: 13px;
  border-top: 1px solid var(--line);
  margin-top: 32px;
}
.site-footer p { margin: 0; }
/* Who made the site, above the footer notes. */

/* ---------- Page ---------- */

main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 40px) 0;
}

.kicker {
  margin: 0 0 6px;
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 span { color: var(--muted); font-weight: 500; }

.workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.panel-head h2 { margin: 0; font-size: 16px; font-weight: 600; }

.chip {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 6px 10px;
  max-width: 100%;
  line-height: 1.35;
}
.chip.live { color: var(--accent); border-color: rgba(94, 234, 212, 0.4); display: inline-flex; gap: 7px; align-items: center; }
.chip.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.3; } }

.toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.toggles label, .check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  min-height: 32px;
}
input[type='checkbox'] { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }

.label-picker { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.label-picker summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 9px 0; }
.label-picker[open] summary { color: var(--text); }
.label-picker-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.label-picker-actions button { min-height: 30px; padding: 4px 10px; }
#label-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; padding-bottom: 10px; }
#label-options fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#label-options legend { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 6px 0 2px; }
#label-options label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); min-height: 28px; cursor: pointer; }

.slider-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 88px;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}
.slider-row output {
  font: 500 13px var(--mono);
  color: var(--text);
  text-align: right;
}
input[type='range'] { width: 100%; accent-color: var(--accent); height: 28px; margin: 0; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
button, select {
  font: 500 13px var(--sans);
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 8px 13px;
  min-height: 36px;
  cursor: pointer;
}
button:hover { border-color: var(--accent); }
button[aria-pressed='true'] { background: rgba(94, 234, 212, 0.14); border-color: var(--accent); color: var(--accent); }
button.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); margin-left: auto; }
button.accent:hover { filter: brightness(1.08); }
:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

/* ---------- Viewports ---------- */

.viewport {
  position: relative;
  aspect-ratio: 1 / 1;
  /* Capped to the window height so an image and the controls or caption under it fit on screen together. */
  width: min(100%, max(300px, 54vh));
  margin-inline: auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 40%, #1d2838, #0f151e 75%);
}
.viewport canvas { display: block; width: 100%; height: 100%; }
#view3d canvas { cursor: grab; }
#view3d canvas:active { cursor: grabbing; }

.biplane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.biplane.two { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.biplane.two .viewport { width: 100%; }
.biplane.two .fluoro-tag { top: auto; right: auto; bottom: 8px; left: 8px; font-size: 12px; padding: 3px 7px; }
.viewport[hidden], #quiz-both[hidden] { display: none; }
.fluoro { background: #c9c8c2; cursor: ew-resize; touch-action: none; }
.fluoro canvas { filter: contrast(1.08) blur(0.25px); }
.grain, .vignette { position: absolute; inset: 0; pointer-events: none; }
.grain { opacity: 0.16; mix-blend-mode: multiply; }
.vignette { background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.45) 100%); }

.fluoro-tag, .fluoro-foot {
  position: absolute;
  pointer-events: none;
  font: 500 13px var(--mono);
  color: #f4f4f0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.fluoro-tag {
  top: 12px;
  right: 14px;
  font-size: 15px;
  background: rgba(10, 12, 16, 0.55);
  padding: 4px 9px;
  border-radius: 6px;
}
.fluoro-foot { bottom: 10px; left: 14px; font-size: 11px; opacity: 0.85; }

.labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font: 600 12px var(--mono);
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.label.minor { color: #ffe3a3; font-weight: 500; font-size: 11px; }
.label.landmark, .label.tip {
  --c: var(--accent);
  background: rgba(10, 14, 20, 0.78);
  border: 1px solid var(--c);
  color: var(--c);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 11px;
  text-shadow: none;
}
.fluoro .label.tip { background: rgba(10, 14, 20, 0.82); }

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 13px var(--mono);
  color: #3b3b38;
  pointer-events: none;
}
.ready .loading { display: none; }
.loading.failed { color: #fff; background: rgba(120, 20, 30, 0.85); padding: 16px; text-align: center; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .chip.live i { animation: none; }
}

.anchor { font: 400 12px/1.5 var(--mono); color: var(--faint) !important; }

.hint { margin: 0; font-size: 12.5px; color: var(--faint); }
.hint.check { color: var(--muted); font-size: 14px; }

.note {
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
}
.note h3 { margin: 0 0 4px; font-size: 14.5px; }
.note p { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- Catheter list ---------- */

.catheters { margin-top: 20px; }
.group-head {
  margin: 6px 0 -2px;
  font: 600 11.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.group-head span { margin-left: 8px; font: 400 13px var(--sans); letter-spacing: 0; text-transform: none; }
/* Cards share four rows (header, description, disclosure, actions) through subgrid, so each row
   lines up across the cards beside it whatever the length of the text. */
.cath-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 12px;
}
.cath-card {
  --c: var(--accent);
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 12px;
  background: var(--bg-2);
  box-shadow: inset 0 3px 0 var(--line-strong);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cath-card:has(.switch:checked) {
  border-color: color-mix(in srgb, var(--c) 22%, var(--line));
  box-shadow: inset 0 3px 0 var(--c);
}
.cath-head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: 40px; }
.cath-head .swatch { flex-shrink: 0; margin-top: 7px; }
.cath-head .switch { margin-top: -1px; }
.cath-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cath-body { display: grid; gap: 10px; align-content: start; }
.cath-body p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.cath-card .how { margin: 0; align-self: start; }
.cath-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); align-self: end; }
.ins-one { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 11px; font-size: 12.5px; }
.ins-one svg { width: 10px; height: 10px; fill: currentColor; }
.ins-one[hidden] { display: none; }
.field { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.field select { width: 100%; }

/* An on/off switch: outline track when off, filled when on (WCAG 1.4.11 contrast on both). */
input[type='checkbox'].switch {
  appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 36px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--muted);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
input[type='checkbox'].switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background-color 0.15s;
}
input[type='checkbox'].switch:checked { background: var(--accent); border-color: var(--accent); }
input[type='checkbox'].switch:checked::after { transform: translateX(16px); background: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .cath-card, input[type='checkbox'].switch, input[type='checkbox'].switch::after { transition: none; }
}
.ins-caption {
  margin: 6px 0 10px;
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
}
.ins-caption[hidden] { display: none; }

.ins-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 4px; }
.ins-row button.accent { margin-left: 0; }
.ins-row input[type='range'] { flex: 1 1 180px; width: auto; }
.ins-row output { font: 500 13px var(--mono); color: var(--text); min-width: 150px; }
.catheters > .hint { margin-bottom: 14px; }
button:disabled { opacity: 0.45; cursor: default; }
button:disabled:hover { border-color: var(--line-strong); }
.swatch { width: 18px; height: 4px; border-radius: 2px; background: var(--c); }
.cath-name { font: 600 14px var(--mono); color: var(--c); }
.cath-full { font-size: 13px; color: var(--muted); }

/* The ablation target's notes, under the EP catheter cards and keyed to the ABL colour. */
.abl-detail {
  --c: var(--accent);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.abl-detail h3 { margin: 0; font-size: 15px; font-weight: 600; }
.abl-detail h3 .swatch { display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; }
.abl-detail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  align-items: start;
  font-size: 14px;
  color: var(--muted);
}
.abl-detail-body:has(> .safety[hidden]) { grid-template-columns: minmax(0, 1fr); }
.abl-notes { display: grid; gap: 10px; max-width: 72ch; }
.abl-detail p { margin: 0; font-size: 14px; line-height: 1.55; }
.abl-detail .how { margin: 0; }
.pvi-row { display: grid; grid-template-columns: auto minmax(0, 320px); align-items: center; gap: 6px 12px; }
.pvi-row[hidden] { display: none; }
.pvi-row p { grid-column: 1 / -1; }
.abl-detail .safety {
  max-width: 72ch;
  border-left: 3px solid var(--warm);
  background: rgba(246, 195, 91, 0.07);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
}
.abl-detail .safety[hidden] { display: none; }
.abl-detail .safety p { font-size: 13.5px; }
.abl-detail .safety .safety-tag { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--warm); }
.abl-detail .safety .safety-src { font: 400 12px var(--mono); color: var(--faint); }

/* ---------- Contact page ---------- */

.contact { max-width: 760px; }
.contact .lead { color: var(--muted); font-size: 16px; margin: -12px 0 28px; }
.contact-card { gap: 4px; padding: 24px; }
.contact-card .kicker { color: var(--faint); }
.contact-card h2 { margin: 0; font-size: 26px; letter-spacing: -0.01em; }
.contact-card address { font-style: normal; color: var(--muted); margin: 2px 0 12px; line-height: 1.6; }
.contact-creds { margin: 2px 0 0; color: var(--text); font-size: 15px; }
.contact-why { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }
.mail-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.08);
  border-radius: 10px;
  padding: 10px 16px;
  font: 500 14px var(--mono);
}
.mail-btn:hover { background: rgba(94, 234, 212, 0.16); }
.mail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.disclaimer { margin-top: 28px; color: var(--muted); font-size: 14px; }
.disclaimer h3 { color: var(--text); font-size: 15px; margin: 0 0 6px; }
.disclaimer p { margin: 0 0 10px; }
.disclaimer strong { color: var(--accent); font-weight: 500; }

/* ---------- References page ---------- */

.refs { max-width: 920px; }
.refs .lead { color: var(--muted); font-size: 16px; margin: -12px 0 28px; }
.refs section { margin-bottom: 36px; }
.refs h2 { font-size: 19px; margin: 0 0 12px; letter-spacing: -0.01em; }
.refs p { color: var(--muted); margin: 0 0 12px; }
.refs strong { color: var(--text); font-weight: 600; }
.refs code { font: 12.5px var(--mono); color: var(--text); background: var(--panel-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.ref-list { margin: 0; padding-left: 22px; display: grid; gap: 14px; }
.ref-list li { color: var(--text); font-weight: 500; }
.ref-list li p { font-weight: 400; margin: 4px 0 0; font-size: 14px; }
.attribution { border-left: 3px solid var(--accent); background: var(--panel-2); padding: 10px 14px; border-radius: 0 8px 8px 0; color: var(--text) !important; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.refs table { width: 100%; border-collapse: collapse; font-size: 13px; }
.refs th, .refs td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.refs th { color: var(--text); font-weight: 600; background: var(--panel); position: sticky; top: 0; }
.refs tr:last-child td { border-bottom: 0; }
.refs td:first-child code { white-space: nowrap; overflow-wrap: normal; }

/* ---------- Workflow page ---------- */

.wf { max-width: 1180px; }
.wf .lead { color: var(--muted); font-size: 16px; margin: -12px 0 28px; max-width: 760px; }
.wf-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.wf-toc { position: sticky; top: 76px; }
.wf-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: wf; border-left: 1px solid var(--line); }
.wf-toc li { counter-increment: wf; }
.wf-toc li:last-child { counter-increment: none; }
.wf-toc a {
  display: block;
  padding: 7px 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
  margin-left: -1px;
}
.wf-toc li:not(:last-child) a::before { content: counter(wf) '  '; font: 500 12px var(--mono); color: var(--faint); }
.wf-toc a:hover { color: var(--text); border-left-color: var(--accent); }

.wf-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
.step {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  scroll-margin-top: 80px;
}
.step-num { margin: 0 0 4px; font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.step h2 { margin: 0 0 14px; font-size: 21px; letter-spacing: -0.01em; }
.step h3 { margin: 20px 0 8px; font-size: 15.5px; }
.step p, .step li, .step dd { color: var(--muted); font-size: 14.5px; }
.step ul, .step ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; }
.step b, .step strong { color: var(--text); font-weight: 600; }
.step em { color: var(--text); font-style: italic; }
.step table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.step th, .step td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
.step th { color: var(--text); font-weight: 600; background: var(--panel); }
.step tr:last-child td { border-bottom: 0; }
.step caption { caption-side: top; text-align: left; padding: 8px 10px; font-size: 12.5px; color: var(--faint); }
.step .table-wrap { margin: 8px 0 12px; }
.step td:last-child { min-width: 0; }

/* Numbered citations: [n] raised beside the text, opening a card with the full reference. */
.cite {
  font: 500 0.72em/0 var(--mono);
  color: var(--accent);
  text-decoration: none;
  vertical-align: super;
  white-space: nowrap;
  padding: 3px 1px;
  margin: 0 1px;
  border-radius: 4px;
}
.cite:hover, .cite:focus-visible { text-decoration: underline; background: rgba(94, 234, 212, 0.14); }
.cite-card {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font: 400 13px/1.5 var(--sans);
  white-space: normal;
  text-align: left;
  vertical-align: baseline;
}
.cite-card a { color: var(--accent); }
.cite-card-head { font: 600 12px var(--mono); color: var(--text); }
.cite-card-ref { color: var(--muted); }
.cite-card-loc { color: var(--text); font-weight: 500; }
.cite-card-all { font-weight: 500; }
.ref-note { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.sources .ref-note { display: inline; }

.callout {
  border-left: 3px solid var(--warm);
  background: rgba(246, 195, 91, 0.07);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  color: var(--text) !important;
}
.callout a:not(.cite) { color: var(--warm); }

.proto { counter-reset: p; list-style: none; padding-left: 0 !important; }
.proto li { counter-increment: p; position: relative; padding-left: 34px; }
.proto li::before {
  content: counter(p);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 12px var(--mono);
  color: var(--accent-ink);
  background: var(--accent);
}

.manoeuvres { margin: 0; display: grid; gap: 4px; }
.manoeuvres dt { color: var(--text); font-weight: 600; margin-top: 10px; font-size: 14.5px; }
.manoeuvres dd { margin: 0; }

.c-hra { color: #f5a524 !important; font-family: var(--mono); }
.c-his { color: #34d399 !important; font-family: var(--mono); }
.c-cs { color: #b07cf0 !important; font-family: var(--mono); }
.c-rv { color: #38bdf8 !important; font-family: var(--mono); }

/* Workflow: the study at a glance, and the fixed parts of every step. */
.wf-toc li.toc-extra { counter-increment: none; }
.wf-toc li.toc-extra a::before { content: none !important; }
.step-q {
  margin: -4px 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 500;
}
.step-q span, .mentor-tag, .trap-tag, .moveon-tag {
  display: block;
  margin: 0 0 4px;
  font: 500 11px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.step-q span { color: var(--accent); }
.mentor {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 6px;
}
.mentor p:not(.mentor-tag) { margin: 0; color: var(--text); }
.mentor-tag { color: var(--accent) !important; }
.trap {
  margin-top: 16px;
  border-left: 3px solid var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
}
.trap-tag { color: var(--wrong-ink) !important; }
.trap ul, .moveon ul { margin: 0; }
.trap li { color: var(--text); }
.moveon {
  margin-top: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 10px 14px;
}
.moveon-tag { color: var(--faint) !important; }
.moveon ul { list-style: none; padding-left: 0; }
.moveon li { position: relative; padding-left: 24px; color: var(--text); }
.moveon li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 13px;
  height: 13px;
  border: 1.5px solid var(--accent);
  border-radius: 3px;
}
/* Workflow infographic: the eight steps in four phases; it is also the step picker. */
.journey {
  margin: 0 0 28px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
}
.journey-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.journey-title { margin: 0; font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.wf-mode { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px; }
.wf-mode button {
  font: 500 13px var(--sans);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 32px;
  cursor: pointer;
}
.wf-mode button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }
.journey-phases { display: grid; grid-template-columns: 2fr 3fr 1fr 2fr; gap: 12px; }
.phase { --ph: var(--accent); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.phase-prepare { --ph: #94a3b8; }
.phase-measure { --ph: #38bdf8; }
.phase-diagnose { --ph: #f6c35b; }
.phase-act { --ph: #34d399; }
:root[data-theme='light'] .phase-prepare { --ph: #475569; }
:root[data-theme='light'] .phase-measure { --ph: #0369a1; }
:root[data-theme='light'] .phase-diagnose { --ph: #855300; }
:root[data-theme='light'] .phase-act { --ph: #046b4c; }
.phase-name {
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--ph);
  font: 600 12px var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ph);
}
.phase ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; flex: 1; }
.phase li { position: relative; min-width: 0; }
/* Arrow from each card to the next, across phases too. */
.journey-phases > .phase:not(:last-child) li:last-child::after,
.phase li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -11px;
  top: 26px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-left: 6px solid var(--line-strong);
  z-index: 1;
}
.j-step {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ph);
  border-radius: 10px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.j-step:hover, .j-step:focus-visible { border-color: var(--ph); }
.j-step[aria-current='step'] { border-color: var(--ph); background: color-mix(in srgb, var(--ph) 12%, var(--bg)); }
.j-top { display: flex; align-items: center; justify-content: space-between; }
.j-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 12px var(--mono);
  color: var(--bg);
  background: var(--ph);
}
.j-icon { width: 24px; height: 24px; fill: none; stroke: var(--ph); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.j-t { color: var(--text); font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.j-q { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.j-out { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); color: var(--text); font-size: 12px; line-height: 1.35; }
.j-out-tag { display: block; font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.j-check {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}
.j-check[aria-current='step'], .j-check:hover { border-style: solid; border-color: var(--accent); }

/* One step at a time: only the chosen step shows, the side contents are not needed. */
.wf-guided .wf-layout { grid-template-columns: minmax(0, 1fr); }
.wf-guided .wf-toc { display: none; }
.wf-guided .wf-steps > .step.is-off { display: none; }
body:not(.wf-guided) .step-pager { display: none; }

/* Tabs inside a step (guided mode); the whole-page mode shows every part. */
.step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.step-tab {
  font: 500 13px var(--sans);
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  min-height: 34px;
  cursor: pointer;
}
.step-tab:hover { color: var(--text); border-color: var(--line-strong); }
.step-tab[aria-selected='true'] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.step-tab.is-traps:not([aria-selected='true']) { color: var(--wrong-ink); }
.step-tab.is-traps[aria-selected='true'] { background: var(--danger); border-color: var(--danger); color: #fff; }
.outcome { margin: -6px 0 12px !important; font-size: 14px !important; color: var(--text) !important; }
.outcome span { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.tab-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 500 10px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.step-tab.is-further:not([aria-selected='true']) { border-style: dashed; }
.step-tab.is-wrong:not([aria-selected='true']) { color: var(--warm); }
.step-tab.is-wrong[aria-selected='true'] { background: var(--warm); border-color: var(--warm); color: var(--bg); }
.step-tab.is-case:not([aria-selected='true']) { color: #b07cf0; }
:root[data-theme='light'] .step-tab.is-case:not([aria-selected='true']) { color: #6d28d9; }
.case, .wrong { margin-top: 16px; padding: 10px 14px; border-radius: 0 8px 8px 0; }
.case { border-left: 3px solid #b07cf0; background: color-mix(in srgb, #b07cf0 7%, transparent); }
:root[data-theme='light'] .case { border-left-color: #6d28d9; }
.case ul { margin: 0; }
.case li { color: var(--text); }
.case-tag, .wrong-tag {
  margin: 0 0 6px !important;
  font: 500 11px var(--mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.case-tag { color: #b07cf0 !important; }
:root[data-theme='light'] .case-tag { color: #6d28d9 !important; }
.wrong { border-left: 3px solid var(--warm); background: color-mix(in srgb, var(--warm) 7%, transparent); }
.wrong-tag { color: var(--warm) !important; }
.wrong dl { margin: 0; display: grid; gap: 2px; }
.wrong dt { color: var(--text); font-weight: 600; font-size: 14.5px; margin-top: 8px; }
.wrong dt:first-child { margin-top: 0; }
.wrong dd { margin: 0; color: var(--muted); font-size: 14.5px; }
.quiz-link { margin: 10px 0 0 !important; }
.quiz-link a { color: var(--accent); font-weight: 500; }
.report-sample {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
  font-family: var(--mono);
}
.report-sample p { font: 400 13px/1.6 var(--mono) !important; margin: 0 0 8px; }
.report-sample p:last-child { margin-bottom: 0; }
.j-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.j-extra .j-check { margin-top: 0; }
.step-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.step-panel > h3:first-child { margin-top: 12px; }
body:not(.wf-guided) .step-tabs { display: none; }
body:not(.wf-guided) .step-panel[hidden] { display: block; }

.step-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.step-pager a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 48%;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}
.step-pager a:hover { border-color: var(--accent); }
.step-pager span { font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.pager-next { margin-left: auto; text-align: right; }

/* Schematic tracings (js/egm.js). HRA, CS and RVA keep their explorer catheter colours; the His channel is
   red, the convention on many recording systems, so its A, H and V stand out. */
.egm {
  --egm-sfc: var(--text); --egm-hra: #f5a524; --egm-his: #ff5a5a; --egm-cs: #b07cf0; --egm-rv: #38bdf8;
  --egm-halo: #2dd4bf; --egm-abl: #f43f5e; --egm-pv: #a3e635;
  margin: 14px 0 18px;
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
:root[data-theme='light'] .egm { --egm-hra: #a8480a; --egm-his: #c81e1e; --egm-cs: #6d28d9; --egm-rv: #0369a1; --egm-halo: #0f766e; --egm-abl: #be123c; --egm-pv: #4d7c0f; }
.egm-sub { margin: 4px 0 6px; font: 500 13px var(--sans); color: var(--text); }
.egm-sub + .egm-scroll { margin-bottom: 8px; }
.egm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.egm-svg { display: block; width: 100%; height: auto; }
.egm figcaption { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.egm figcaption .egm-note { display: block; margin-top: 4px; font-size: 12px; color: var(--faint); }
.egm-tr { fill: none; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.egm-tr.egm-sfc { stroke: var(--egm-sfc); }
.egm-tr.egm-hra { stroke: var(--egm-hra); }
.egm-tr.egm-his { stroke: var(--egm-his); }
.egm-tr.egm-cs { stroke: var(--egm-cs); }
.egm-tr.egm-rv { stroke: var(--egm-rv); }
.egm-tr.egm-halo { stroke: var(--egm-halo); }
.egm-tr.egm-abl { stroke: var(--egm-abl); }
.egm-tr.egm-pv { stroke: var(--egm-pv); }
.egm-lab.egm-halo, .egm-ann-t.egm-halo { fill: var(--egm-halo); }
.egm-lab.egm-abl, .egm-ann-t.egm-abl { fill: var(--egm-abl); }
.egm-lab.egm-pv, .egm-ann-t.egm-pv { fill: var(--egm-pv); }
.egm-grp.egm-halo { fill: var(--egm-halo); opacity: 0.7; }
.egm-grp.egm-pv { fill: var(--egm-pv); opacity: 0.7; }
.egm-lab { font: 500 12px var(--mono); }
.egm-lab.egm-sfc { fill: var(--muted); }
.egm-lab.egm-hra { fill: var(--egm-hra); }
.egm-lab.egm-his { fill: var(--egm-his); }
.egm-lab.egm-cs { fill: var(--egm-cs); }
.egm-lab.egm-rv { fill: var(--egm-rv); }
.egm-grid { stroke: var(--line); stroke-width: 1; }
.egm-stimline { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.egm-stim { stroke: var(--text); stroke-width: 1.4; }
.egm-guide { stroke: var(--warm); stroke-width: 1; stroke-dasharray: 3 3; }
.egm-cal { fill: none; stroke: var(--warm); stroke-width: 1.4; }
.egm-cal-t, .egm-mark-t, .egm-top { font: 600 12.5px var(--mono); paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
.egm-cal-t { fill: var(--warm); }
.egm-mark { fill: var(--accent); }
.egm-mark-t { fill: var(--accent); }
.egm-top { fill: var(--text); }
.egm-scale { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.egm-scale-t { font: 500 11px var(--mono); fill: var(--muted); }
.egm-swipe { display: none; margin: 2px 0 0; font-size: 12px; color: var(--faint); }
@media (max-width: 700px) { .egm-swipe { display: block; } }
.egm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.egm-tool { min-height: 36px; padding: 6px 12px; border-radius: 999px; font: 500 13px var(--sans); }
@media (pointer: coarse) { .egm-tool { min-height: 44px; padding: 8px 16px; } }
.egm-tool[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.egm-readout { font: 600 13px var(--mono); color: var(--warm); }
.egm.is-measuring .egm-svg { cursor: crosshair; touch-action: none; }
.egm.ann-off .egm-ann { display: none; }
.egm-band { fill: var(--accent); fill-opacity: 0.08; stroke: var(--accent); stroke-opacity: 0.55; stroke-width: 1; }
.egm-band-t { font: 700 12.5px var(--mono); fill: var(--accent); }
.egm-grp.egm-sfc { fill: var(--line-strong); }
.egm-grp.egm-cs { fill: var(--egm-cs); opacity: 0.7; }
.egm-grp.egm-his { fill: var(--egm-his); opacity: 0.7; }
/* Catheter-position key beside its strip. */
.egm-pair { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 14px; align-items: center; }
.egm-key-wrap { min-width: 0; }
.egm-key { display: block; width: 100%; height: auto; max-width: 300px; margin: 0 auto; }
.egm-k-heart { fill: color-mix(in srgb, var(--danger) 9%, var(--panel-2)); stroke: var(--line-strong); stroke-width: 1.5; }
.egm-k-vessel { fill: var(--panel-2); stroke: var(--line-strong); stroke-width: 1.2; }
.egm-k-wall { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.egm-k-annulus { fill: none; stroke: var(--faint); stroke-width: 1.3; stroke-dasharray: 2 3; }
.egm-k-node { fill: var(--warm); }
.egm-k-ch { font: 600 15px var(--sans); fill: var(--faint); }
.egm-k-note { font: 500 10.5px var(--sans); fill: var(--faint); }
.egm-k-cath { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.egm-k-cath.egm-hra { stroke: var(--egm-hra); } .egm-k-cath.egm-his { stroke: var(--egm-his); }
.egm-k-cath.egm-cs { stroke: var(--egm-cs); } .egm-k-cath.egm-rv { stroke: var(--egm-rv); }
.egm-k-behind { stroke-dasharray: 5 4; stroke-width: 2.4; }
.egm-k-pole { fill: var(--text); stroke-width: 1.2; }
.egm-k-pole.egm-hra { stroke: var(--egm-hra); } .egm-k-pole.egm-his { stroke: var(--egm-his); }
.egm-k-pole.egm-cs { stroke: var(--egm-cs); } .egm-k-pole.egm-rv { stroke: var(--egm-rv); }
.egm-k-lab { font: 700 13px var(--mono); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.egm-k-lab.egm-hra { fill: var(--egm-hra); } .egm-k-lab.egm-his { fill: var(--egm-his); }
.egm-k-lab.egm-cs { fill: var(--egm-cs); } .egm-k-lab.egm-rv { fill: var(--egm-rv); }
.egm-k-lead { stroke: var(--faint); stroke-width: 1; }
@media (max-width: 800px) { .egm-pair { grid-template-columns: 1fr; } .egm-key { max-width: 260px; } }
.egm-ann-t { font: 700 11px var(--mono); paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.egm-ann-t.egm-sfc { fill: var(--text); }
.egm-ann-t.egm-hra { fill: var(--egm-hra); }
.egm-ann-t.egm-his { fill: var(--egm-his); }
.egm-ann-t.egm-cs { fill: var(--egm-cs); }
.egm-ann-t.egm-rv { fill: var(--egm-rv); }
.egm-meas-v { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.egm-meas-h { stroke: var(--accent); stroke-width: 1.6; }
.egm-meas-t { font: 700 13px var(--mono); fill: var(--accent); paint-order: stroke; stroke: var(--bg-2); stroke-width: 4px; stroke-linejoin: round; }
@media print { .egm-tools, .egm-swipe { display: none !important; } .egm.ann-off .egm-ann { display: inline; } }
.quiz-figure { margin: 12px 0 4px; }
.quiz-figure .egm { margin: 0; }

@media (max-width: 1000px) {
  .journey-phases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .journey { padding: 14px; }
  .journey-phases { grid-template-columns: minmax(0, 1fr); }
  .phase ol { grid-auto-flow: row; }
  .phase li::after, .journey-phases > .phase:not(:last-child) li:last-child::after { display: none; }
  .j-step { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; }
  .j-top { grid-row: span 3; flex-direction: column; justify-content: flex-start; gap: 6px; }
  .j-out { grid-column: 2; }
}
@media print {
  .journey, .step-tabs, .step-pager { display: none !important; }
  .step.is-off, .step-panel[hidden] { display: block !important; }
}

/* Wide tables become one labelled card per row on phones. */
@media (max-width: 640px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: auto; }
  table.stack tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.stack tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 4px 10px; }
  table.stack td::before {
    content: attr(data-label);
    display: block;
    font: 500 11px var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 2px;
  }
  table.stack td:first-child { color: var(--text); }
}
@media print {
  .site-header, .wf-toc, .site-footer, .skip { display: none !important; }
  .wf-layout { display: block; }
  .step { break-inside: avoid-page; background: none; }
}

.todo {
  margin-top: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px;
}
.todo-tag { margin: 0 0 6px !important; font: 500 11px var(--mono) !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm) !important; }
.src-drop > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; list-style: none; }
.src-drop > summary::-webkit-details-marker { display: none; }
.src-drop > summary::before {
  content: '';
  align-self: center;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform 0.15s;
}
.src-drop[open] > summary::before { transform: rotate(45deg); }
.src-drop > summary h2 { margin: 0; }
.src-count { color: var(--faint); font-size: 13px; }
.src-drop > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.src-drop[open] > summary { margin-bottom: 12px; }
.sources .ref-list li { font-weight: 400; color: var(--muted); font-size: 13.5px; scroll-margin-top: 80px; }
.sources .ref-list li:target { color: var(--text); }

@media (max-width: 900px) {
  .wf-layout { grid-template-columns: minmax(0, 1fr); }
  .wf-toc { position: static; }
  .wf-toc ol { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .wf-toc a { border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; margin: 0; }
  .step { padding: 18px 16px; }
}

/* ---------- Quiz ---------- */

.fluoro.still { cursor: default; }
.fluoro.placing { cursor: crosshair; }
/* The learner's marker on a click-to-place question: a ring with a centre dot. */
.place-mark {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #f6c35b;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.place-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #f6c35b;
}
.place-mark[hidden] { display: none; }
.workspace.quiz { align-items: start; }
/* Text-only questions (SVT findings) have no image: the question card stands alone. */
body.text-only .workspace.quiz { grid-template-columns: minmax(0, 760px); justify-content: center; }
body.text-only .workspace.quiz > .panel:first-child { display: none; }
.quiz-card { gap: 14px; }
.quiz-type { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.quiz-prompt { margin: 4px 0 0; font-size: 20px; letter-spacing: -0.01em; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.quiz-options button { text-align: left; min-height: 44px; font-size: 14px; }
.quiz-options button.right, .quiz-match.right select { border-color: var(--accent); background: rgba(94, 234, 212, 0.14); color: var(--accent); opacity: 1; }
.quiz-options button.wrong, .quiz-match.wrong select { border-color: var(--danger); background: rgba(244, 63, 94, 0.12); color: var(--wrong-ink); opacity: 1; }
.quiz-match { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px 10px; grid-column: 1 / -1; }
.quiz-match select { width: 100%; }
.quiz-num { font: 600 14px var(--mono); color: var(--text); text-align: center; border: 1px solid var(--line-strong); border-radius: 6px; padding: 4px 0; }
.quiz-mark { grid-column: 2; font: 500 12.5px var(--mono); color: var(--muted); }
.quiz-mark:empty { display: none; }
.quiz-match.right .quiz-mark { color: var(--accent); }
.quiz-match.wrong .quiz-mark { color: var(--wrong-ink); }
.quiz-feedback { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 10px 10px 0; padding: 12px 14px; font-size: 14px; color: var(--muted); }
.quiz-feedback.wrong { border-left-color: var(--danger); }
.quiz-feedback[hidden] { display: none; }
.quiz-feedback p { margin: 0 0 8px; }
.quiz-feedback p:last-child { margin-bottom: 0; }
.quiz-feedback ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.quiz-feedback b { color: var(--text); font-weight: 600; }
.quiz-verdict { font: 600 13px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.quiz-feedback.wrong .quiz-verdict { color: var(--wrong-ink); }
.quiz-card .btn-row button.accent[hidden], #quiz-other[hidden] { display: none; }



/* ---------- Progressive disclosure, playback, abbreviations ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.more { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; }
.more > summary, .how > summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 9px 0; }
.more[open] > summary, .how[open] > summary { color: var(--text); }
.more[open] { padding-bottom: 12px; }
.more[open] > :not(summary) { margin-top: 10px; }
.more .toggles { margin-top: 2px; }
.how { margin: 4px 0; }
.how > summary { font-size: 13px; padding: 4px 0; }
.how p { margin: 4px 0 6px; }
.player { display: flex; flex-direction: column; gap: 6px; }
.player .ins-row { margin: 0; }
.player .ins-caption { margin: 0; }
.player .how { margin: 0; }
.label.cue { background: var(--c); color: #0a0e14; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
abbr.gl { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
abbr.gl:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 2px; }
.gloss-tip {
  position: absolute; z-index: 20; max-width: min(280px, calc(100vw - 16px));
  background: var(--text); color: var(--bg); font: 500 13px/1.4 var(--sans);
  padding: 6px 10px; border-radius: 8px; pointer-events: none;
}
.gloss-tip[hidden] { display: none; }
.glossary-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.glossary-list dt { font: 600 13px var(--mono); color: var(--text); }
.glossary-list dd { margin: 0; color: var(--muted); }

/* ---------- Course, checks and review ---------- */

.quiz-progress { margin: 0; font: 500 13px var(--mono); color: var(--text); }
.quiz-options.long { grid-template-columns: 1fr; }
.quiz-options.long button { line-height: 1.45; padding: 10px 14px; }
.inset-wrap { display: flex; flex-direction: column; gap: 6px; }
.inset-wrap[hidden] { display: none; }
.inset-wrap h3 { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.viewport.inset { width: min(100%, 300px); margin-inline: 0; }
.quiz-result { margin: 0; font: 600 18px var(--sans); }
.quiz-result.right { color: var(--accent); }
.quiz-result.wrong { color: var(--wrong-ink); }
.quiz-summary { display: flex; flex-direction: column; gap: 12px; }
.quiz-summary[hidden], #quiz-body[hidden] { display: none; }
a.button-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 8px 13px;
  font: 500 13px var(--sans); color: var(--text); text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 9px;
}
a.button-link:hover { border-color: var(--accent); }

/* Course page */
.course { max-width: 860px; }
.course .lead { color: var(--muted); font-size: 16px; margin: -12px 0 24px; }
.course-summary { margin-bottom: 20px; }
.course-summary h2 { margin: 0; font-size: 18px; }
.course-summary p { margin: 0; color: var(--muted); }
progress { width: 100%; height: 10px; accent-color: var(--accent); }
.module-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 16px; }
.module { scroll-margin-top: 80px; }
.module.current { border-color: var(--accent); }
.module-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.module-head h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.module-num {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 14px var(--mono); border: 1px solid var(--line-strong); color: var(--text);
}
.status { font: 500 12px var(--mono); color: var(--muted); }
.status.done { color: var(--accent); }
.status.tried { color: var(--warm); }
.module-goal { margin: 0; color: var(--text); }
.module h3 { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 500; font-family: var(--mono); }
.module-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--muted); }
.module-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
a.accent-link { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* ---------- Light theme ---------- */
/* Page chrome flips; the 3D and fluoroscopy viewports stay dark and grey, like the monitors they imitate.
   Text colours measure at least 5:1 on every panel background. */

:root[data-theme='light'] {
  --bg: #f3f6fa;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #e9eef5;
  --line: #d3dbe6;
  --line-strong: #b4c0d0;
  --text: #16202e;
  --muted: #445267;
  --faint: #566579;
  --accent: #0b6b63;
  --accent-ink: #ffffff;
  --warm: #855300;
  --danger: #b4123a;
  --header-bg: rgba(243, 246, 250, 0.9);
  --wrong-ink: #9f1239;
  color-scheme: light;
}
:root[data-theme='light'] body { background: var(--bg); }
:root[data-theme='light'] .cath-name { color: color-mix(in srgb, var(--c) 55%, #000); }
:root[data-theme='light'] .c-hra { color: #a8480a !important; }
:root[data-theme='light'] .c-his { color: #046b4c !important; }
:root[data-theme='light'] .c-cs { color: #6d28d9 !important; }
:root[data-theme='light'] .c-rv { color: #0369a1 !important; }
.theme-toggle { order: 2; min-height: 34px; padding: 6px 12px; }

/* ---------- Small screens ---------- */

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .abl-detail-body { grid-template-columns: minmax(0, 1fr); }
  .pvi-row { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .panel { padding: 14px; }
  .slider-row { grid-template-columns: 1fr 76px; }
  .slider-row label { grid-column: 1 / -1; }
  .slider-row input { grid-column: 1; }
  button.accent { margin-left: 0; }
}

/* ---------- Menu on phones and tablets ---------- */

.nav-toggle { display: none; }
@media (max-width: 1080px) {
  .site-header { flex-wrap: wrap; gap: 10px; padding-block: 10px; }
  .brand { margin-right: auto; }
  .theme-toggle { order: 2; }
  .nav-toggle {
    order: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    font: 500 14px var(--sans);
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
  }
  .nav-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-header nav {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 4px;
    border-top: 1px solid var(--line);
  }
  .site-header.nav-open nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .site-header nav a { padding: 12px; font-size: 15px; }
  .site-header nav a[aria-current='page'] { background: var(--panel-2); color: var(--text); }
  .theme-toggle { min-height: 40px; }
}
@media (max-width: 420px) {
  .theme-toggle, .nav-toggle { padding-inline: 10px; }
}

/* ---------- Explorer tabs on phones and portrait tablets ---------- */

.explore-tabs { display: none; }
@media (max-width: 900px) {
  .explore-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    position: sticky;
    top: 70px;
    z-index: 4;
  }
  .explore-tab {
    min-height: 42px;
    font: 500 14px var(--sans);
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
  }
  .explore-tab[aria-selected='true'] { color: var(--accent-ink); background: var(--accent); }
  .explore-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  section.panel.xt-off { display: none; }
}

/* Click-to-place with both views: the image that takes the marker is outlined. */
#quizFluoro.mark-here { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Live lab (lab.html, js/lab.js): a scrolling schematic recording with calls. */
.lab .lead { color: var(--muted); font-size: 16px; margin: -12px 0 20px; max-width: 760px; }

/* Choosing an exercise: one card per exercise, in three groups. Native radio buttons, so arrow keys and
   screen readers work as for any radio group; the card shows the focus ring. */
.lab-pick { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lab-pick-group { display: grid; gap: 8px; align-content: start; min-width: 0; }
.lab-pick-h { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.lab-card { position: relative; display: grid; gap: 3px; min-height: 64px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.lab-card:hover { border-color: var(--accent); }
.lab-card:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); box-shadow: inset 4px 0 0 var(--accent); }
.lab-card:has(input:focus-visible) { outline: 2px solid var(--warm); outline-offset: 2px; }
.lab-card-t { font-size: 15px; font-weight: 600; color: var(--text); }
.lab-card-d { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 760px) {
  .lab-pick { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lab-pick-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-pick-h { grid-column: 1 / -1; }
  .lab-card { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .lab-card { transition: none; } }

/* The brief: what the exercise asks, what to watch for, its tools and keys. */
.lab-panel { margin-bottom: 18px; }
.lab-brief h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; }
.lab-brief dl { margin: 0; display: grid; gap: 8px; }
.lab-brief dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.lab-brief dt { padding-top: 2px; font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.lab-brief dd { margin: 0; max-width: 92ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 560px) { .lab-brief dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.lab-brief kbd, .lab-help kbd, .lab-call kbd { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 5px; font: 600 11px var(--mono); color: var(--muted); background: var(--panel-2); }

/* The catheter set for an exercise (CTI ablation): a small radio group. */
.lab-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.lab-setup[hidden] { display: none; }
.lab-setup legend { float: left; width: 100%; margin-bottom: 2px; padding: 0; }
.lab-opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel-2); font-size: 14px; color: var(--muted); cursor: pointer; }
.lab-opt b { color: var(--text); font-weight: 600; }
.lab-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.lab-opt input { accent-color: var(--accent); margin: 0; }

/* Controls, in labelled groups. Every control in the lab is at least 44 px tall, to be easy to hit
   (WCAG 2.5.5). */
.lab-panel button, .lab-panel select { min-height: 44px; }
.lab-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lab-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lab-group-h { flex-basis: 100%; margin: 0; font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.lab-actions { padding: 10px 12px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.lab-actions[hidden] { display: none; }
.lab-field { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font: 500 13px var(--sans); color: var(--muted); }
.lab-field select { min-width: 0; max-width: 100%; }
.lab-go { min-width: 96px; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.lab-go[aria-pressed='true'] { background: var(--panel-2); color: var(--accent); }
.lab-drug { border-color: color-mix(in srgb, var(--warm) 55%, var(--line-strong)); }
.lab-drug[aria-pressed='true'] { background: color-mix(in srgb, var(--warm) 14%, transparent); border-color: var(--warm); color: var(--warm); }
.lab-drugs { margin: 0; max-width: 900px; padding: 10px 14px; border-left: 3px solid var(--warm); border-radius: 0 10px 10px 0; background: var(--panel-2); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.lab-drugs:empty { display: none; }

/* The monitor, with the rhythm and pacing written in a status bar along its top. */
.lab-screen { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.lab-stim { margin: 0; min-height: 1.4em; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); font: 600 13px var(--mono); color: var(--warm); }
.lab-monitor { margin: 0; padding: 6px 0 4px; border: 0; border-radius: 0; background: var(--bg-2); overflow: hidden; }
.lab-monitor canvas { display: block; width: 100%; }

/* Calls and score. */
.lab-callbar { display: grid; gap: 8px; }
.lab-calls { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-call { flex: 1 1 140px; min-height: 52px !important; padding: 10px 16px; font-size: 15px; font-weight: 600; }
.lab-call kbd { margin-left: 6px; }
@media (pointer: coarse) { .lab-call kbd { display: none; } }
.lab-feedback { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--text); }
.lab-score { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lab-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); font: 500 12.5px var(--mono); color: var(--muted); }
.lab-chip b { font-weight: 700; color: var(--text); }
.lab-chip.is-good b { color: var(--accent); }
.lab-chip.is-warn b { color: var(--warm); }

/* What a pause shows. */
.lab-explain { max-width: 1100px; }
.lab-result, .lab-summary { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; background: var(--panel); }
.lab-result.is-missed { border-left-color: var(--warm); }
.lab-result h3, .lab-summary h3 { margin: 0 0 8px; font-size: 16px; }
.lab-result p { line-height: 1.55; }
.lab-cont { margin: 10px 0 0; }

.lab-help { max-width: 900px; margin: 0 0 14px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.lab-help summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 14px; font-weight: 600; }
.lab-help summary::-webkit-details-marker { display: none; }
.lab-help summary::before { content: ''; width: 0; height: 0; margin-right: 10px; border: 5px solid transparent; border-left: 7px solid var(--muted); transition: transform 0.15s; transform-origin: 3px 50%; }
.lab-help[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .lab-help summary::before { transition: none; } }
.lab-help summary:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; border-radius: 6px; }
.lab-help ul { margin: 0 0 14px; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.lab-note { margin: 0 0 32px; font-size: 13px; color: var(--faint); max-width: 820px; }

/* ---------- Touch sizing ----------
   On phones and touch screens every control is at least 44 x 44 px (WCAG 2.5.5).
   Selectors repeat the specificity of the rules they enlarge. */
@media (max-width: 760px), (pointer: coarse) {
  button, select,
  .label-picker-actions button,
  .theme-toggle, .nav-toggle, .explore-tab, .step-tab, .wf-mode button,
  a.button-link, .mail-btn { min-height: 44px; }
  .brand, .skip { display: inline-flex; align-items: center; min-height: 44px; }
  .skip { padding-block: 0; }
  .toggles label, .check, .cath-head, #label-options label { min-height: 44px; }
  .j-check { display: inline-flex; align-items: center; min-height: 44px; }
  .wf-toc a { display: flex; align-items: center; gap: 0.4em; min-height: 44px; }
  .label-picker summary, .more > summary, .how > summary { padding-block: 12px; }
  .how > summary { font-size: 14px; }
  .theme-toggle, .nav-toggle { min-width: 44px; }
  input[type='range'] { height: 44px; }
  .src-drop > summary { min-height: 44px; align-items: center; }
}