/* intro2ekg: a bedside monitor. Black screen, phosphor-green traces, parameter
   colors for the vitals (green, cyan, amber, violet), red for alarms.
   Layout: status bar on top; the screen with an alarm line under it; vitals and
   hardware keys in the right rail; the lesson in a drawer under the screen. */

:root {
  --bezel: #070a0c;
  --panel: #0d1418;
  --panel-2: #121b20;
  --line: #1f2d34;
  --line-2: #2c3e47;
  --ink: #dbe6e8;
  --ink-2: #93a7ad;
  --ink-3: #5f747b;

  --ecg: #46f08a;
  --cyan: #38d6f5;
  --amber: #ffb43a;
  --violet: #b99bff;
  --alarm: #ff5468;

  /* names the figures read */
  --accent: var(--cyan);
  --accent-tint: rgba(56, 214, 245, 0.16);
  --flag: var(--alarm);
  --flag-tint: rgba(255, 84, 104, 0.2);
  --warn: var(--amber);
  --paper-2: var(--panel);
  --ecg-paper: #020605;
  --ecg-minor: rgba(70, 240, 138, 0.07);
  --ecg-major: rgba(70, 240, 138, 0.17);
  --ecg-trace: #46f08a;
  --trace-glow: 6;

  --sans: "Barlow", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --serif: var(--cond);
  --mono: "JetBrains Mono", ui-monospace, Consolas, Menlo, monospace;

  --rail: clamp(300px, 26vw, 380px);
  --drawer: 38vh;
  --gap: 10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bezel);
  color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
b, strong { font-weight: 600; }

/* ------------------------------------------------------------------ layout */
.app {
  height: 100%;
  display: grid;
  gap: var(--gap);
  padding: 0 var(--gap) var(--gap);
  grid-template-columns: minmax(0, 1fr) var(--rail);
  grid-template-rows: auto auto minmax(0, 1fr) auto var(--drawer);
  grid-template-areas:
    "status status"
    "screen vitals"
    "screen keys"
    "alarm  keys"
    "lesson keys";
}
.app[data-lesson="closed"] { --drawer: 52px; }
/* each chapter's parts land in the app grid */
.panel { display: contents; }
.chapter { display: none; }
.chapter.is-active { display: contents; }
.stage { grid-area: screen; position: relative; min-height: 0; }
.readouts { grid-area: vitals; }
.controls { grid-area: keys; }
.live { grid-area: alarm; }
.lesson { grid-area: lesson; }

/* -------------------------------------------------------------- status bar */
.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0 calc(-1 * var(--gap));
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ecg);
  text-decoration: none;
  font: 700 1.375rem/1 var(--cond);
  letter-spacing: 0.02em;
}
.brand svg { width: 30px; height: 19px; filter: drop-shadow(0 0 4px rgba(70, 240, 138, 0.6)); }
.brand span { color: var(--ink); }
.crumb {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line-2);
  font: 600 1rem/1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.crumb [data-crumb-num] { color: var(--cyan); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; }
.tabs { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: auto; }
.chips { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  padding: 6px 9px;
  border-radius: 4px;
  color: var(--ink-2);
  font: 600 0.875rem/1 var(--cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.chip span { font: 500 0.6875rem/1 var(--mono); color: var(--ink-3); letter-spacing: 0; }
.chip:hover { color: var(--ink); background: var(--panel-2); }
.chip[aria-current="true"] { color: var(--bezel); background: var(--ecg); }
.chip[aria-current="true"] span { color: var(--bezel); }
.step-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
}
.step-btn:disabled { opacity: 0.35; cursor: default; }
.step-btn svg { width: 14px; height: 14px; }
.tools { display: flex; gap: 6px; }
.tool {
  white-space: nowrap;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  font: 600 0.8125rem/1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tool:hover { color: var(--ink); border-color: var(--ink-3); }

/* ------------------------------------------------------------------ screen */
.fig { position: absolute; inset: 0; margin: 0; display: none; flex-direction: column; gap: 8px; }
.fig.is-active { display: flex; }
.fig-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ecg-paper);
  box-shadow: 0 0 0 1px var(--line), inset 0 0 60px rgba(0, 0, 0, 0.8);
}
.fig-canvas canvas, .fig-canvas svg.full { position: absolute; inset: 0; display: block; }
.fig-canvas svg.full { width: 100%; height: 100%; }
.fig-note { margin: 0; padding: 0 2px; font: 400 0.875rem/1.4 var(--sans); color: var(--ink-2); }
.fig-note b { color: var(--ink); }

/* ------------------------------------------------------------ alarm line */
.live {
  margin: 0;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--panel);
  border-left: 3px solid var(--ecg);
  font: 400 0.9375rem/1.45 var(--sans);
  color: var(--ink-2);
}
.live:empty { border-left-color: var(--line-2); }
.live b { color: var(--ink); }
.live .flag { color: var(--alarm); font-weight: 600; }
.live:has(.flag) { border-left-color: var(--alarm); }

/* Brugada steps in the side rail */
.brugada { margin: 0; padding-left: 1.3em; font: 400 0.875rem/1.4 var(--sans); }
.brugada li { margin: 0 0 6px; color: var(--ink-2); }
.brugada li b { color: var(--ink); font-weight: 600; }
.brugada li span { font: 600 0.8125rem/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.brugada li.hit { color: var(--ink); }
.brugada li.hit span { color: var(--alarm); }
.brugada li.hit::marker { color: var(--alarm); }
.brugada li.skip { opacity: 0.45; }

/* unknown-ECG drill panel */
.drill { gap: 10px; }
.drill-dots { display: flex; gap: 6px; }
.drill-dots span { width: 22px; height: 6px; border-radius: 3px; background: var(--line-2); }
.drill-dots span.now { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.drill-dots span.ok { background: var(--ecg); }
.drill-dots span.bad { background: var(--alarm); }
.drill-step { margin: 0; font: 600 0.8125rem/1.2 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.drill-q { margin: 0; font: 500 1.0625rem/1.35 var(--sans); color: var(--ink); }
.drill-sub { font: 600 0.8125rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.drill-hint { margin: 0; font: 400 0.875rem/1.45 var(--sans); color: var(--ink-3); }
.drill-num {
  width: 140px;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--ecg-paper);
  color: var(--cyan);
  font: 500 1.5rem/1 var(--cond);
}
.drill-final { display: grid; gap: 6px; }
.drill-final button {
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink);
  font: 400 0.875rem/1.4 var(--sans);
  cursor: pointer;
}
.drill-final button[aria-pressed="true"] { border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); }
.drill-opts button:disabled, .drill-final button:disabled { cursor: default; opacity: 0.7; }
.drill-opts button[aria-pressed="true"]:disabled, .drill-final button[aria-pressed="true"]:disabled { opacity: 1; }
.drill-reveal {
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--ecg);
  background: rgba(70, 240, 138, 0.07);
  font: 400 0.9375rem/1.45 var(--sans);
  color: var(--ink-2);
}
.drill-reveal b { color: var(--ecg); }
.drill-reveal.bad { border-left-color: var(--alarm); background: rgba(255, 84, 104, 0.08); }
.drill-reveal.bad b { color: var(--alarm); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* ------------------------------------------------------------------ vitals */
.readouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
}
.readouts:empty { display: none; }
.readouts > div { position: relative; padding: 9px 12px 10px; background: var(--ecg-paper); min-width: 0; }
.readouts > div:last-child:nth-child(odd) { grid-column: span 2; }
.readouts dt {
  font: 600 0.75rem/1.1 var(--cond);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c, var(--ecg));
  opacity: 0.85;
}
.readouts dd {
  margin: 4px 0 0;
  font: 500 1.875rem/1 var(--cond);
  color: var(--c, var(--ecg));
  text-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--ecg)) 45%, transparent);
  overflow-wrap: anywhere;
}
.readouts .long dd { font-size: 1.0625rem; line-height: 1.2; font-weight: 500; }
.readouts > div:nth-child(4n + 1) { --c: var(--ecg); }
.readouts > div:nth-child(4n + 2) { --c: var(--cyan); }
.readouts > div:nth-child(4n + 3) { --c: var(--amber); }
.readouts > div:nth-child(4n + 4) { --c: var(--violet); }
.readouts > div.flag { --c: var(--alarm); }
.readouts .flag::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alarm);
  box-shadow: 0 0 8px var(--alarm);
  animation: blink 1s steps(2, start) infinite;
}
.readouts > div.warn { --c: var(--amber); }
.readouts > div.ok { --c: var(--ecg); }
@keyframes blink { to { visibility: hidden; } }

/* -------------------------------------------------------------------- keys */
.controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 14px;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.controls::before {
  content: "Controls";
  font: 600 0.75rem/1 var(--cond);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.control { display: grid; gap: 7px; }
.control label, .control .label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 600 0.875rem/1.2 var(--cond);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.control output { font: 500 0.875rem/1.2 var(--mono); color: var(--cyan); letter-spacing: 0; text-transform: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ticks { display: flex; justify-content: space-between; font: 400 0.6875rem/1 var(--mono); color: var(--ink-3); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-2); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--cyan); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; margin-top: -6px;
  border-radius: 3px;
  background: var(--ink);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(56, 214, 245, 0.6);
}
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 3px; background: var(--ink); border: 2px solid var(--cyan); }
input[type="range"]:disabled { opacity: 0.4; cursor: default; }

.seg { display: flex; flex-wrap: wrap; gap: 5px; }
.seg button, .btn {
  position: relative;
  padding: 8px 11px 8px 22px;
  border: 1px solid #000;
  border-radius: 4px;
  background: linear-gradient(180deg, #1c272d, #131b20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.6);
  color: var(--ink);
  font: 600 0.875rem/1.1 var(--cond);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn { padding-left: 11px; }
/* the key's indicator light */
.seg button::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #26343b;
}
.seg button:hover, .btn:hover { background: linear-gradient(180deg, #223038, #172126); }
.seg button:active, .btn:active { transform: translateY(1px); }
.seg button[aria-pressed="true"] { color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(56, 214, 245, 0.5), 0 0 12px -4px var(--cyan); }
.seg button[aria-pressed="true"]::before { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.toggles { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  justify-content: flex-start !important;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  font: 500 0.9375rem/1.2 var(--cond) !important;
  color: var(--ink) !important;
}
.check input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 30px;
  height: 16px;
  margin: 0;
  border-radius: 8px;
  background: var(--line-2);
  cursor: pointer;
  transition: background 0.15s;
}
.check input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink-2);
  transition: transform 0.15s;
}
.check input:checked { background: rgba(70, 240, 138, 0.35); }
.check input:checked::after { transform: translateX(14px); background: var(--ecg); box-shadow: 0 0 6px var(--ecg); }

.play {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #000;
  border-radius: 4px;
  background: linear-gradient(180deg, #1c272d, #131b20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--ecg);
  cursor: pointer;
}
.play svg { width: 14px; height: 14px; }
.play .i-pause, .play[aria-pressed="false"] .i-play { display: block; }
.play .i-play, .play[aria-pressed="false"] .i-pause { display: none; }

/* ------------------------------------------------------------------ lesson */
.lesson {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line);
}
.lesson-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}
.ch-head { display: flex; gap: 12px; align-items: baseline; min-width: 0; margin-right: auto; }
.ch-num { font: 500 0.8125rem/1 var(--mono); color: var(--cyan); }
.ch-head > div { display: flex; gap: 12px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.ch-title { margin: 0; font: 700 1.375rem/1.1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.ch-kicker { margin: 0; font: 400 0.9375rem/1.2 var(--sans); color: var(--ink-2); }
.drawer-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-2);
  font: 600 0.8125rem/1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.drawer-btn::after { content: "▾"; font-size: 0.75rem; }
.drawer-btn[aria-expanded="false"]::after { content: "▴"; }
.drawer-btn:hover { color: var(--ink); }
.app[data-lesson="closed"] .lesson-body { display: none; }
.app[data-lesson="closed"] .lesson-head { border-bottom: 0; }
.lesson-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.lesson-body > * { max-width: 78ch; }
.dek { margin: 0 0 6px; font: 500 1.1875rem/1.45 var(--sans); color: var(--ink); }

.prose h3 {
  margin: 22px 0 6px;
  font: 700 0.9375rem/1.2 var(--cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ecg);
}
.prose p, .prose li, .prose dd { font-size: 1rem; color: #c3d0d3; }
.prose b { color: var(--ink); }
.prose p { margin: 0 0 10px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 1.2em; }
.prose li { margin: 0 0 5px; }
.prose li::marker { color: var(--ink-3); }
.prose .eq {
  padding: 9px 12px;
  border-radius: 4px;
  background: var(--ecg-paper);
  border: 1px solid var(--line);
  font: 400 0.875rem/1.5 var(--mono);
  color: var(--cyan);
}
.prose dl { margin: 0 0 12px; }
.prose dt { margin-top: 10px; font: 600 1.0625rem/1.3 var(--cond); letter-spacing: 0.03em; color: var(--ink); }
.prose dd { margin: 2px 0 4px; }
.steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.steps li { counter-increment: s; position: relative; padding-left: 34px; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font: 600 0.8125rem/1.6 var(--mono);
  color: var(--ecg);
}
.caution {
  margin: 14px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  background: rgba(255, 180, 58, 0.07);
  font: 400 0.9375rem/1.45 var(--sans) !important;
}

/* -------------------------------------------------------------------- quiz */
.quiz { margin: 26px 0 8px; }
.quiz h3 {
  margin: 0 0 10px;
  font: 700 0.9375rem/1.2 var(--cond);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.quiz .score { float: right; font: 500 0.8125rem/1.6 var(--mono); color: var(--ink-2); letter-spacing: 0; }
.q { margin: 0 0 10px; padding: 12px 14px; border-radius: 6px; background: var(--ecg-paper); border: 1px solid var(--line); }
.q p { margin: 0 0 10px; font-size: 1rem; }
.q .opts { display: grid; gap: 6px; }
.q .opts button {
  text-align: left;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--panel);
  color: var(--ink);
  font: 400 0.9375rem/1.35 var(--sans);
  cursor: pointer;
}
.q .opts button:hover:not(:disabled) { border-color: var(--cyan); }
.q .opts button:disabled { cursor: default; opacity: 0.75; }
.q .opts button.right { opacity: 1; border-color: var(--ecg); color: var(--ecg); box-shadow: inset 3px 0 0 var(--ecg); }
.q .opts button.wrong { opacity: 1; border-color: var(--alarm); color: var(--alarm); box-shadow: inset 3px 0 0 var(--alarm); }
.q .why { margin: 10px 0 0; font: 400 0.9375rem/1.45 var(--sans); color: var(--ink-2); }
.q .why b { color: var(--ink); }

/* ----------------------------------------------------------------- dialogs */
dialog {
  width: min(700px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog h2 { margin: 0 0 14px; font: 700 1.5rem/1.1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
dialog .close { position: absolute; top: 16px; right: 16px; }
dialog ol { padding-left: 1.2em; }
dialog li { margin-bottom: 8px; font-size: 0.9375rem; color: #c3d0d3; }
dialog p { font-size: 0.9375rem; color: var(--ink-2); }
table.norms { width: 100%; border-collapse: collapse; font: 400 0.9375rem/1.4 var(--sans); }
table.norms th, table.norms td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.norms th { font: 600 0.75rem/1.2 var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
table.norms td:nth-child(2) { font-family: var(--mono); font-size: 0.8125rem; color: var(--ecg); white-space: nowrap; }

/* ------------------------------------------------------- conduction figure */
.heart .chamber { fill: #08100f; stroke: var(--ink-3); stroke-width: 1.6; }
.heart .wash { fill: var(--ecg); opacity: 0; }
.heart .path { fill: none; stroke: #1d2c2a; stroke-width: 2.4; stroke-linecap: round; }
.heart .fire { fill: none; stroke: var(--ecg); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--ecg)); }
.heart .node { fill: var(--ecg-paper); stroke: var(--cyan); stroke-width: 2; }
.heart .node-glow { fill: var(--cyan); opacity: 0; }
.heart .lbl { font: 600 13px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-2); }
.heart .lbl-big { font: 600 16px var(--cond); fill: var(--ink-3); }
.heart .leader { stroke: var(--ink-3); stroke-width: 0.8; fill: none; }
.heart.no-labels .lbl, .heart.no-labels .leader { display: none; }
.phases { display: flex; gap: 4px; flex-wrap: wrap; }
.phases span {
  padding: 5px 10px;
  border-radius: 3px;
  background: var(--panel);
  font: 600 0.8125rem/1.1 var(--cond);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.phases span.on { background: var(--ecg); color: var(--bezel); box-shadow: 0 0 12px -2px var(--ecg); }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 1600px) {
  .crumb { display: none; }
}
@media (max-width: 900px) {
  html, body { height: auto; }
  .app {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "status" "screen" "alarm" "vitals" "keys" "lesson";
  }
  .status { flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; }
  .tabs { order: 3; width: 100%; margin-left: 0; }
  .tools { margin-left: auto; }
  .stage {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 46vh;
    min-height: 280px;
    margin: 0 calc(-1 * var(--gap));
    padding: 6px var(--gap);
    background: var(--bezel);
  }
  .fig { inset: 6px var(--gap); }
  .controls { overflow: visible; }
  .lesson-body { overflow: visible; }
  .app[data-lesson="closed"] .lesson-body { display: block; }
  .drawer-btn { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .heart .lbl { font-size: 17px; }
  .heart .lbl-big { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .readouts .flag::after { animation: none; }
}