/* ===================================================================
   Float — Learn module (stepped lesson)
   Builds on styles.css (loaded first): same tokens, header, scope and
   control styling. The scope and every tracing stay dark in both themes.
   =================================================================== */
.learn [hidden] { display: none !important; }

/* ---------------- header ---------------- */
a.brand { text-decoration: none; color: inherit; }
a.brand:hover .brand-name { color: var(--accent); }
.learn #topbar { flex-wrap: wrap; row-gap: 8px; }

/* ---------------- progress rail ---------------- */
#rail { max-width: 1040px; margin: 0 auto; padding: 14px 18px 0; }
#railList { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rail-part {
  flex: 1 1 0; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 8px 5px;
}
.rail-part.cap { flex: 0 0 auto; }
.rail-part.active { border-color: var(--accent-dim); box-shadow: inset 0 0 0 1px var(--accent-dim); }
.rp-head {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  text-decoration: none; color: var(--text-dim); font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
}
.rp-head:hover { color: var(--text); }
.rail-part.active .rp-head { color: var(--text-bright); }
.rp-n { color: var(--accent); font-family: var(--mono); }
.rp-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-part.done .rp-l::after { content: " ✓"; color: var(--good); }
.rp-dots { display: flex; flex-wrap: wrap; gap: 0; margin: 3px -4px 0; }
.rp-dot { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.rp-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--border-lt); background: transparent; box-sizing: border-box;
}
.rp-dot:hover::before { border-color: var(--accent-dim); }
.rp-dot.seen::before { background: var(--accent-dim); border-color: var(--accent-dim); }
.rp-dot.cur::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 158, 199, .28); }
.rp-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }

/* ---------------- stage ---------------- */
#stage { max-width: 1040px; margin: 0 auto; padding: 18px 18px 36px; min-height: 60vh; }
.step-kicker { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); }
.sk-step { color: var(--text-dim); letter-spacing: .6px; }
.step-title { font-size: 26px; line-height: 1.2; color: var(--text-bright); margin: 6px 0 14px; outline: none; }
.step-body > * { max-width: 100%; }

.prose { font-size: 15px; line-height: 1.62; color: var(--text); max-width: 760px; margin: 0 0 12px; }
.prose p { margin: 0 0 11px; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: var(--text-bright); }
.prose ul, .prose ol { margin: 0 0 11px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--accent-dim); }
.prose a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); }
.prose .lead { font-size: 16.5px; color: var(--text-bright); line-height: 1.55; }
.prose .fine, .fine { font-size: 12.5px; color: var(--text-dim); }
.fine a { color: var(--accent); }
.prose ol.three li { margin-bottom: 8px; }
.ref-h { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin: 26px 0 8px; }

/* try-it task + notes + equations */
.try {
  display: flex; gap: 12px; align-items: flex-start; max-width: 760px;
  background: rgba(255, 158, 199, .07); border: 1px solid var(--accent-dim); border-radius: 9px;
  padding: 10px 14px; margin: 12px 0; font-size: 14px; line-height: 1.55; color: var(--text);
}
.try b { color: var(--text-bright); }
.try-tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); border-radius: 4px; padding: 2px 6px; margin-top: 2px;
}
.note {
  max-width: 760px; font-size: 13.5px; line-height: 1.55; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--accent-dim);
  border-radius: 8px; padding: 10px 14px; margin: 14px 0;
}
.note-tag { font-weight: 700; color: var(--accent); margin-right: 4px; }
.eqn {
  max-width: 760px; font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--text-bright);
  background: var(--bg-panel2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 11px 15px; margin: 12px 0; overflow-x: auto;
}
.eqn-note { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }

/* inline figures — breathing schematic (theme tokens; the mini tracing stays dark) */
figure.fig { margin: 14px 0; max-width: 760px; }
figure.fig figcaption { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.bfig { display: flex; flex-wrap: wrap; gap: 12px; }
.bfig svg.bf { flex: 1 1 280px; max-width: 374px; height: auto; display: block; }
.bf-frame { fill: var(--bg-panel); stroke: var(--border); stroke-width: 1; }
.bf-title { font: 700 14px var(--sans); fill: var(--text-bright); text-anchor: middle; }
.bf-txt { font: 11.5px var(--sans); fill: var(--text); }
.bf-strong { font-weight: 700; fill: var(--accent-dim); }
.bf-dim { fill: var(--text-dim); }
.bf-mid { text-anchor: middle; }
.bf-box { fill: var(--bg-panel2); stroke: var(--border-lt); }
.bf-arrow { fill: none; stroke: var(--accent-dim); stroke-width: 2.5; stroke-linecap: round; }
.bf-head { fill: var(--accent-dim); }
.bf-chest { fill: none; stroke: var(--border-lt); stroke-width: 2.5; }
.bf-lung { fill: var(--bg-panel2); stroke: var(--text-dim); stroke-width: 1.2; }
.bf-airway { fill: none; stroke: var(--text-dim); stroke-width: 3; stroke-linecap: round; }
.bf-heart { fill: rgba(69, 200, 255, .2); stroke: var(--c-ra); stroke-width: 1.5; }
.bf-ra { font: 700 9px var(--mono); fill: var(--text-bright); }
.bf-dia { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; }
.bf-dia.old { stroke: var(--text-dim); stroke-width: 1.4; stroke-dasharray: 4 3; }
.bf-pill { fill: none; stroke: var(--accent-dim); stroke-width: 1.5; }
.bf-pill-t { font: 700 12px var(--mono); fill: var(--accent-dim); text-anchor: middle; }
.bf-scope { fill: var(--bg-scope); }
.bf-band { fill: rgba(255, 158, 199, .2); stroke: #ff9ec7; stroke-width: 1; stroke-dasharray: 3 3; }
.bf-trace { fill: none; stroke: #45c8ff; stroke-width: 2.2; stroke-linejoin: round; }
.bf-st { font: 10px var(--mono); fill: #c9d4e3; }
.bf-ra-c { fill: #45c8ff; font-weight: 700; }
.bf-pink { fill: #ff9ec7; font-weight: 700; }
.bf-dot { fill: #ff9ec7; }

/* tables */
.tbl-wrap { overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl thead th { font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; border-bottom-color: var(--border-lt); }
.tbl tbody th { color: var(--text-bright); font-weight: 600; }
.tbl td { color: var(--text); }
.tbl .mono, .mono { font-family: var(--mono); }
.tbl tr.on { background: rgba(255, 158, 199, .09); }
.tbl tr.on th { box-shadow: inset 3px 0 0 var(--accent); }

/* go-deeper drawers */
details.deeper {
  max-width: 760px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-panel2); margin: 10px 0; padding: 0 14px;
}
details.deeper > summary {
  cursor: pointer; list-style: none; padding: 10px 0; font-size: 13px; font-weight: 700; color: var(--text);
}
details.deeper > summary::-webkit-details-marker { display: none; }
details.deeper > summary::before { content: "▸ Go deeper — "; color: var(--accent); font-weight: 700; }
details.deeper[open] > summary::before { content: "▾ Go deeper — "; }
details.deeper > .prose { font-size: 14px; padding-bottom: 12px; }
details.deeper .tbl { font-size: 12.5px; }
.gloss dt { font-weight: 700; color: var(--text-bright); margin-top: 8px; }
.gloss dd { margin: 2px 0 0 0; }

/* intro part map */
.partmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.pm-card {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
  transition: border-color .12s;
}
.pm-card:hover { border-color: var(--accent-dim); }
.pm-n { font-family: var(--mono); font-weight: 700; color: var(--accent); font-size: 18px; }
.pm-t { font-weight: 700; color: var(--text-bright); font-size: 14px; }
.pm-d { font-size: 12.5px; color: var(--text); line-height: 1.45; flex: 1; }
.pm-p { font-size: 11px; color: var(--text-dim); font-family: var(--mono); }
.pm-card.done .pm-p::after { content: " ✓"; color: var(--good); }
.cta {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 14px;
  background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 10px 16px; margin: 4px 8px 4px 0;
}
.cta:hover { filter: brightness(1.06); }
.cta-sub { font-weight: 500; opacity: .8; font-size: 12.5px; }
.resume {
  display: inline-block; margin: 6px 0 2px; color: var(--accent); text-decoration: none; font-size: 14px;
  border-bottom: 1px solid var(--accent-dim);
}
.links { margin: 12px 0; }
.progress-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.progress-card > div { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.pc-n { display: block; font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text-bright); }
.pc-l { font-size: 12px; color: var(--text-dim); }
.reset-row { margin: 22px 0 4px; }

/* ---------------- bottom step navigation ---------------- */
#stepnav {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  max-width: 1040px; margin: 0 auto; padding: 10px 18px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--border);
}
#stepnav .m-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 13px; min-height: 42px; white-space: nowrap; }
#stepnav .next { flex: 0 1 auto; min-width: 0; }
#stepnav .m-btn:disabled { opacity: .4; cursor: default; }
#stepnav .next { background: var(--accent); color: var(--on-accent); border-color: var(--accent); display: flex; align-items: center; gap: 8px; max-width: 70%; }
#stepnav .next:disabled { background: var(--bg-panel2); color: var(--text-dim); border-color: var(--border-lt); }
.nx-l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .75; }
.nx-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.step-count { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }

/* =================================================================
   widgets
   ================================================================= */
.lw {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin: 14px 0; min-width: 0;
}
.lw .lw { margin: 0; }
.lw-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.lw-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 9px; }
.lw-bar.sm { margin-bottom: 6px; }
.lw-bar-l { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin-right: auto; }
.lw-cap { font-size: 13px; line-height: 1.55; color: var(--text-dim); margin: 9px 2px 0; }
.lw-cap b { color: var(--text); }
.lw-hint { font-size: 13px; color: var(--text); margin: 8px 2px 0; line-height: 1.5; }
.lw-hint b { color: var(--accent); }

.mini-btn {
  background: var(--bg-panel2); color: var(--text); border: 1px solid var(--border-lt);
  border-radius: 6px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 32px;
}
.mini-btn:hover { border-color: var(--accent-dim); }
.mini-btn.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mini-btn.frozen { background: var(--warn); color: #1a1205; border-color: var(--warn); }
.mini-btn.ghost { background: transparent; }
.mini-btn:disabled { opacity: .55; cursor: default; }
.mini-btn.num { min-width: 34px; padding: 4px 6px; font-size: 14px; }
.m-btn:focus-visible, .mini-btn:focus-visible, .quiz-choice:focus-visible, .tab:focus-visible, .lseg button:focus-visible,
.hs-btn:focus-visible, .row-btn:focus-visible, .cta:focus-visible, .pm-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* segmented toggle */
.lseg { display: inline-flex; border: 1px solid var(--border-lt); border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.lseg button {
  background: var(--bg-panel2); color: var(--text-dim); border: none; border-right: 1px solid var(--border-lt);
  padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 32px;
}
.lseg button:last-child { border-right: none; }
.lseg button:hover { color: var(--text); }
.lseg button.active { background: var(--accent); color: var(--on-accent); }

/* live readouts */
.ro-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ro {
  font-family: var(--mono); font-size: 12px; background: var(--bg-panel2);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; color: var(--text); white-space: nowrap;
}
.ro-l { color: var(--text-dim); }
.ro b { color: var(--text-bright); }
.ro-u { color: var(--text-dim); font-size: 10.5px; }
.ro.warn b { color: var(--warn); }
.ro.crit b { color: var(--crit); }
.ro-dir { font-style: normal; font-size: 9px; margin-left: 2px; }
.ro-row.big .ro { font-size: 14px; padding: 6px 10px; }

/* LiveScope */
.ls { min-width: 0; }
.ls .scope { padding: 4px 8px 4px 0; }
.ls .wave-row.ecg-row { height: 50px; }
.ls .wave-row.press-row { height: 190px; }
.ls .wave-label { width: 54px; flex: 0 0 54px; }
.ls .wave-canvas { min-width: 0; }   /* a canvas's intrinsic width tracks its backing store — don't let it push the row wider */
.ls-scope { touch-action: pan-y; }
.ls-tools { display: flex; align-items: center; gap: 8px 12px; margin-top: 7px; flex-wrap: wrap; }
.ls-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.ls-legend .sw {
  width: 22px; height: 14px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(rgba(255, 158, 199, .24), rgba(255, 158, 199, .24)), var(--bg-scope);   /* looks like the band on the dark scope */
  border-left: 1px dashed #ff9ec7; border-right: 1px dashed #ff9ec7;
}
.wl-scale.zoom { color: var(--accent); border-color: var(--accent-dim); }
.lw .wl-scale { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 700; font-family: var(--mono); color: #c9d4e3; background: var(--bg-scope); border: 1px solid #2f3a4d; border-radius: 4px; padding: 1px 6px; }
.lw .wl-scale.zoom { color: var(--accent); border-color: var(--accent-dim); }
.open-link { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 13px; text-decoration: none; border-bottom: 1px solid var(--accent-dim); }

/* MiniCath */
.mc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.mc-left { min-width: 0; }
.mc-map { display: flex; justify-content: center; background: var(--bg-panel2); border: 1px solid var(--border); border-radius: 8px; padding: 4px; }
.mc-heart { width: 100%; max-width: 230px; height: auto; display: block; }
.mc-depth { margin-top: 10px; }
.mc-zlabels { position: relative; height: 13px; }
.mc-zl { position: absolute; transform: translateX(-50%); font-size: 9px; font-family: var(--mono); color: var(--text-dim); }
.mc-track { position: relative; height: 24px; border-radius: 6px; background: var(--bg-panel2); border: 1px solid var(--border); }
.mc-zone { position: absolute; top: 6px; bottom: 6px; opacity: .55; border-radius: 3px; }
.mc-range {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize;
}
.mc-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.mc-range::-moz-range-track { height: 100%; background: transparent; }
.mc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 8px; height: 22px; margin-top: 0; border-radius: 3px;
  background: var(--text-bright); border: 1px solid #000; box-shadow: 0 0 0 2px rgba(255, 158, 199, .35);
}
.mc-range::-moz-range-thumb { width: 7px; height: 20px; border-radius: 3px; background: var(--text-bright); border: 1px solid #000; }
.mc-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.mc-btns { display: flex; gap: 8px; margin-top: 10px; }
.mc-btns .m-btn { min-height: 40px; }
.hold { touch-action: none; -webkit-user-select: none; user-select: none; }
.mc .auto-btn { width: 100%; margin-top: 8px; min-height: 40px; }
.mc-status { margin-top: 8px; font-size: 12px; font-family: var(--mono); color: var(--text-dim); min-height: 32px; line-height: 1.4; }
.mc-status.good { color: var(--good); }
.mc-status.warn { color: var(--warn); }
.mc-status.crit { color: var(--crit); }
.goal-chip {
  margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent);
  border: 1px dashed var(--accent-dim); border-radius: 6px; padding: 6px 9px;
}
.goal-chip.done { color: var(--good); border-color: var(--good); border-style: solid; background: rgba(53, 208, 127, .08); }
.beat-strip { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; min-height: 22px; }
.bs-l { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); }
.bs-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.bchip { font-family: var(--mono); font-size: 10.5px; font-weight: 700; border: 1px solid; border-radius: 4px; padding: 0 5px; background: var(--bg-scope); }

/* WaveLab */
.wlab-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.wlab-head .wl-title { font-size: 15px; font-weight: 700; font-family: var(--mono); }
.wlab-sub { font-size: 11px; color: var(--text-dim); font-family: var(--mono); margin-left: auto; }
.wlab-cv {
  display: block; width: 100%; height: 270px; background: var(--bg-scope);
  border: 1px solid var(--border); border-radius: 8px; cursor: crosshair; touch-action: manipulation;
}
.wlab-prompt { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--text); min-height: 22px; }
.wlab-prompt b { color: var(--text-bright); }
.wlab-prompt .good { color: var(--good); }
.wlab-prompt .good b { color: var(--good); }
.wlab-prompt .bad { color: var(--warn); }
.wlab-steps { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.wlab-steps i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--border-lt); display: inline-block; }
.wlab-steps i.cur { border-color: var(--accent); }
.wlab-steps i.ok { background: var(--good); border-color: var(--good); }
.wlab-choices { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.wlab-cl { font-size: 12px; color: var(--text-dim); margin-right: 2px; }
.wlab-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }

/* PullbackTable / PH fork canvases */
.pbt-cv { display: block; width: 100%; height: 190px; background: var(--bg-scope); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.row-btn {
  display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; margin: 0;
  color: var(--text-bright); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.row-btn .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pbt-tbl tbody tr { cursor: pointer; }
.pbt-tbl tbody tr:hover { background: var(--bg-panel2); }

/* Thermodilution */
.thermo-cv { display: block; width: 100%; height: 230px; background: var(--bg-scope); border: 1px solid var(--border); border-radius: 8px; }
.inj { flex: 0 0 auto; padding: 8px 12px; }

/* sliders (calculators, sandboxes) */
.ctl { margin: 10px 0 2px; }
.ctl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.ctl-label { font-size: 12px; color: var(--text-dim); }
.ctl-value { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text-bright); white-space: nowrap; }
.ctl-value small { font-size: 10.5px; color: var(--text-dim); font-weight: 400; }
.ctl input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none; height: 4px; margin: 10px 0;
  background: var(--border-lt); border-radius: 3px; outline: none;
}
.ctl input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg-panel);
}
.ctl input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg-panel); }
.ctl input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* calculators */
.calc-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.calc-grid, .phf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.calc-fields { min-width: 0; }
.calc-out { min-width: 0; }
.calc-eq {
  font-family: var(--mono); font-size: 13.5px; color: var(--text-bright); line-height: 1.55;
  background: var(--bg-panel2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 7px; padding: 9px 12px; margin: 10px 0 8px; overflow-wrap: anywhere;
}
.calc-note { display: block; font-family: var(--sans); font-size: 12px; color: var(--text-dim); margin-top: 5px; }
.calc-note.warn { color: var(--warn); }
.calc-tbl th { width: 38%; font-size: 12.5px; }
.calc-tbl td.num b { font-size: 15px; }
.calc-tbl td.num.warn b { color: var(--warn); }
.calc-tbl td.num.crit b { color: var(--crit); }
.calc-tbl td.sub { font-size: 11.5px; color: var(--text-dim); }
.flag { font-family: var(--sans); font-size: 10.5px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
.flag.warn { color: var(--warn); border: 1px solid var(--warn); }
.flag.crit { color: var(--crit); border: 1px solid var(--crit); }
.verdict {
  display: flex; flex-direction: column; gap: 3px; margin-top: 10px;
  border: 1px solid var(--border-lt); border-left-width: 4px; border-radius: 8px; padding: 10px 13px; background: var(--bg-panel2);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.verdict b { font-size: 15px; color: var(--text-bright); }
.verdict.v-none { border-left-color: var(--good); }
.verdict.v-pre, .verdict.v-cpc { border-left-color: var(--crit); }
.verdict.v-ipc, .verdict.v-unclass { border-left-color: var(--warn); }
.phf-right { min-width: 0; }

/* Hotspots — Swan diagram */
.hs-art { background: var(--bg-scope); border: 1px solid var(--border); border-radius: 8px; padding: 6px; overflow: hidden; }
.swan-svg { display: block; width: 100%; height: auto; }
.swan-svg .hub-line { fill: none; stroke: #39455a; stroke-width: 5; stroke-linecap: round; cursor: pointer; }
.swan-svg .cath-body { fill: none; stroke: #2b3546; stroke-width: 14; stroke-linecap: round; }
.swan-svg .cath-break { fill: none; stroke: var(--bg-scope); stroke-width: 4; }
.swan-svg .lumen { fill: none; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transition: opacity .15s; pointer-events: none; }
.swan-svg .lumen.on { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.swan-svg .lumen[data-id=distal] { stroke: #ffce4a; color: #ffce4a; }
.swan-svg .lumen[data-id=proximal] { stroke: #45c8ff; color: #45c8ff; }
.swan-svg .lumen[data-id=balloon] { stroke: #ff6b81; color: #ff6b81; }
.swan-svg .lumen[data-id=thermistor] { stroke: #c9d4e3; color: #c9d4e3; stroke-dasharray: 4 3; }
.swan-svg .hub rect { stroke-width: 1.5; cursor: pointer; }
.swan-svg .hub text { font: 700 11px var(--mono); text-anchor: middle; pointer-events: none; fill: #05070b; }
.swan-svg .hub[data-id=distal] rect { fill: #ffce4a; stroke: #ffce4a; }
.swan-svg .hub[data-id=proximal] rect { fill: #45c8ff; stroke: #45c8ff; }
.swan-svg .hub[data-id=balloon] rect { fill: #ff6b81; stroke: #ff6b81; }
.swan-svg .hub[data-id=thermistor] rect { fill: #c9d4e3; stroke: #c9d4e3; }
.swan-svg .hub.on rect { stroke: #fff; stroke-width: 2.5; }
.swan-svg .exit { cursor: pointer; }
.swan-svg .exit circle, .swan-svg .exit rect, .swan-svg .exit ellipse { fill: #1b2230; stroke: #56637a; stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.swan-svg .exit text { font: 600 10.5px var(--sans); fill: #7c8aa0; text-anchor: middle; transition: fill .15s; }
.swan-svg .exit text.sub { font-size: 9.5px; font-weight: 400; }
.swan-svg .exit text.r { text-anchor: end; }
.swan-svg .exit.on text { fill: #eef3fa; }
.swan-svg .exit[data-id=distal].on circle { fill: #ffce4a; stroke: #ffce4a; }
.swan-svg .exit[data-id=proximal].on circle { fill: #45c8ff; stroke: #45c8ff; }
.swan-svg .exit[data-id=balloon].on ellipse { fill: rgba(255, 107, 129, .45); stroke: #ff6b81; }
.swan-svg .exit[data-id=thermistor].on rect { fill: #c9d4e3; stroke: #fff; }
.swan-svg .ticks path { stroke: #56637a; stroke-width: 1.2; }
.swan-svg .ticks text { font: 9px var(--mono); fill: #56637a; text-anchor: middle; }
.hs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hs-btn {
  display: inline-flex; align-items: center; gap: 7px; background: var(--bg-panel2); color: var(--text);
  border: 1px solid var(--border-lt); border-radius: 7px; padding: 6px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; min-height: 34px;
}
.hs-btn:hover { border-color: var(--accent-dim); }
.hs-btn.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--text-bright); }
.hs-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 4px;
  border-radius: 4px; background: var(--accent); color: #05070b; font: 700 10px var(--mono);
}
.hs-info { margin-top: 10px; background: var(--bg-panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 13px; font-size: 14px; line-height: 1.55; min-height: 92px; }
.hs-info h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-bright); display: flex; align-items: center; gap: 8px; }
.hs-info p { margin: 0; }
.hs-info dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.hs-info dt { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--text-dim); padding-top: 2px; }
.hs-info dd { margin: 0; }

/* Hotspots — tour of the simulator */
.hs-tour .hs-art { padding: 8px; background: var(--bg); }
.tour { font-size: 11px; color: var(--text-dim); user-select: none; }
.tour-top { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 5px 7px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; }
.tour-brand { color: var(--text-bright); font-weight: 700; margin-right: 4px; }
.tour-sp { flex: 1; }
.tour-chip { border: 1px solid var(--border-lt); border-radius: 4px; padding: 2px 6px; cursor: pointer; background: var(--bg-panel2); white-space: nowrap; }
.tour-chip:hover { border-color: var(--accent-dim); }
.tour-chip.on { border-color: var(--accent); color: var(--accent); }
.tour-grid { display: grid; grid-template-columns: 1fr 1.7fr 0.9fr; gap: 6px; }
.tour-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tour-box {
  position: relative; display: flex; flex-direction: column; gap: 3px; cursor: pointer;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px 7px 30px; min-height: 46px;
}
.tour-box.tall { min-height: 92px; }
.tour-box:hover { border-color: var(--accent-dim); }
.tour-box.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tour-box i {
  position: absolute; left: 6px; top: 7px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 700 10.5px var(--mono); font-style: normal;
  display: flex; align-items: center; justify-content: center;
}
.tour-box span { color: var(--text-bright); font-weight: 700; font-size: 11.5px; }
.tour-box em { font-style: normal; font-size: 10px; }
.tour-box.scope { background: var(--bg-scope); }
.tour-box.scope svg { width: 100%; height: 54px; }
.tour-box.scope path { fill: none; stroke: #59e08a; stroke-width: 1.2; }
.tour-box.scope path.p { stroke: #45c8ff; stroke-width: 1.6; }
.tour-banner { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-family: var(--mono); font-size: 10px; }

/* Quiz */
.quiz {
  max-width: 760px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 14px; margin: 14px 0;
}
.quiz.predict { border-color: var(--accent-dim); }
.quiz-kicker { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.quiz-stem { font-size: 15px; line-height: 1.5; color: var(--text-bright); margin-bottom: 10px; }
.quiz-stem b { color: var(--accent); }
.quiz-choices, .myst-opts { display: flex; flex-direction: column; gap: 7px; }
.quiz-choice {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  background: var(--bg-panel2); color: var(--text); border: 1px solid var(--border-lt); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; line-height: 1.45; cursor: pointer; min-height: 42px;
}
.quiz-choice:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--text-bright); }
.quiz-choice:disabled { cursor: default; }
.qmark { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-lt); margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.quiz-choice.correct { border-color: var(--good); color: var(--text-bright); background: rgba(53, 208, 127, .09); }
.quiz-choice.correct .qmark { background: var(--good); border-color: var(--good); color: #04120a; }
.quiz-choice.correct .qmark::after { content: "✓"; }
.quiz-choice.incorrect { border-color: var(--crit); background: rgba(255, 77, 77, .08); }
.quiz-choice.incorrect .qmark { background: var(--crit); border-color: var(--crit); color: #1a0505; }
.quiz-choice.incorrect .qmark::after { content: "✗"; }
.quiz-choice.dim { opacity: .55; }
.quiz-why { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.quiz-why:empty { display: none; }
.quiz-why.good > b:first-child { color: var(--good); }
.quiz-why.bad > b:first-child { color: var(--crit); }
.quiz-retry { margin-top: 8px; }
.skip { margin: 0 0 10px; }

/* ThreeQ */
.tq-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; counter-reset: tq; }
.tq { background: var(--bg-panel2); border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px 9px 40px; position: relative; counter-increment: tq; }
.tq::before { content: counter(tq); position: absolute; left: 12px; top: 9px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 700 11px var(--mono); display: flex; align-items: center; justify-content: center; }
.tq-q { font-size: 14px; color: var(--text); }
.tq-q b { color: var(--text-bright); }
.tq-q .sub { font-size: 12px; color: var(--text-dim); font-family: var(--mono); }
.tq-a { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tq-res { font-size: 13px; font-family: var(--mono); }
.tq-res.good { color: var(--good); }
.tq-res.bad { color: var(--warn); }
.tq-sum { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--text); }
.tq-sum:empty { display: none; }
.tq-sum b { color: var(--text-bright); }
.tq-case { display: block; margin-top: 4px; color: var(--text-dim); }

/* Shock */
.shock-tbl tbody tr { cursor: pointer; }

/* Signatures */
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: -2px 0 12px; }
.tab {
  background: transparent; color: var(--text-dim); border: none; border-bottom: 2px solid transparent;
  padding: 8px 12px; font-size: 13px; font-weight: 700; cursor: pointer; margin-bottom: -1px; min-height: 38px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.sig-scopes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sig-scopes.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sig-cell { min-width: 0; }
.sig-text { margin-top: 12px; }

/* Mystery */
.myst-score { font-family: var(--mono); font-size: 12.5px; color: var(--text-dim); }
.myst-score b { color: var(--text-bright); }
.myst-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-top: 12px; }
.myst-reveal { margin-top: 10px; }
.myst-reveal .quiz-why { margin-top: 4px; }
.myst-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 10px; font-size: 13.5px; line-height: 1.5; }
.myst-cols h4 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; }
.myst-cols ul { margin: 0; padding-left: 18px; }
.myst-cols li { margin-bottom: 5px; }
.myst-cols b { color: var(--text-bright); }
.myst-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.myst-act .m-btn { flex: 0 0 auto; padding: 9px 16px; }
.myst-act .open-link { margin-top: 0; }

/* =================================================================
   responsive
   ================================================================= */
@media (max-width: 1000px) {
  .partmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc-grid, .phf-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 760px) {
  #rail { padding: 10px 16px 0; }
  .rail-part { padding: 5px 6px 4px; }
  .rail-part:not(.active) .rp-dots { display: none; }
  .rail-part:not(.active) .rp-l { display: none; }
  .rail-part:not(.active) { flex: 0 0 auto; }
  .rail-part.cap:not(.active) .rp-l { display: inline; }
  .rail-part.active { flex: 1 1 auto; }
  #stage { padding: 14px 16px 28px; }
  .step-title { font-size: 22px; }
  /* phones: tracing first, then a compact map beside the controls */
  .mc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mc-right { order: -1; }
  .mc-left { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 10px; align-items: start; }
  .mc-map { grid-column: 1; grid-row: 1 / span 6; padding: 2px; }
  .mc-left > :not(.mc-map) { grid-column: 2; }
  .mc-depth { margin-top: 0; }
  .mc-btns { margin-top: 8px; gap: 6px; }
  .mc-btns .m-btn { padding: 8px 4px; }
  .mc .auto-btn { margin-top: 6px; }
  .sig-scopes.two { grid-template-columns: minmax(0, 1fr); }
  .myst-opts, .myst-cols { grid-template-columns: minmax(0, 1fr); }
  .progress-card { grid-template-columns: minmax(0, 1fr); }
  .tour-grid { grid-template-columns: 1fr 1fr; }
  .tour-col.mid { grid-column: 1 / -1; order: -1; }
  #stepnav { padding: 8px 16px; gap: 8px; }
  #stepnav .next { max-width: 64%; }
  .wlab-cv { height: 240px; }
  .lw { padding: 10px; }
}
@media (max-width: 460px) {
  .learn .brand-sub, .learn .topbar-status { display: none; }
  .partmap { grid-template-columns: minmax(0, 1fr); }
  .nx-l, .step-count { display: none; }
  #stepnav .next { max-width: 74%; }
  .ls .wave-row.press-row { height: 160px; }
  .ls .wave-label { width: 48px; flex-basis: 48px; padding-right: 6px; }
  .ls .wl-scale { font-size: 10px; padding: 0 3px; }
  .try { flex-direction: column; gap: 6px; }
  .prose { font-size: 14.5px; }
  .hs-info dl { grid-template-columns: 1fr; }
}

/* =================================================================
   light theme — chrome goes light; scopes and tracings stay dark
   ================================================================= */
:root[data-theme="light"] .lw,
:root[data-theme="light"] .quiz,
:root[data-theme="light"] .rail-part,
:root[data-theme="light"] .pm-card,
:root[data-theme="light"] .progress-card > div { box-shadow: 0 1px 2px rgba(41, 16, 31, .05); }
:root[data-theme="light"] .try { background: #fff1f7; }
:root[data-theme="light"] .tbl tr.on { background: #ffe9f2; }
:root[data-theme="light"] .ro.warn b, :root[data-theme="light"] .calc-tbl td.num.warn b, :root[data-theme="light"] .flag.warn,
:root[data-theme="light"] .mc-status.warn, :root[data-theme="light"] .wlab-prompt .bad, :root[data-theme="light"] .tq-res.bad,
:root[data-theme="light"] .calc-note.warn { color: #9a5a00; border-color: #c27a00; }
:root[data-theme="light"] .mc-status.good, :root[data-theme="light"] .wlab-prompt .good, :root[data-theme="light"] .wlab-prompt .good b,
:root[data-theme="light"] .tq-res.good, :root[data-theme="light"] .goal-chip.done, :root[data-theme="light"] .quiz-why.good > b:first-child,
:root[data-theme="light"] .rail-part.done .rp-l::after, :root[data-theme="light"] .pm-card.done .pm-p::after { color: #1d7a48; }
:root[data-theme="light"] .ro.crit b, :root[data-theme="light"] .calc-tbl td.num.crit b, :root[data-theme="light"] .flag.crit { color: #c0261e; border-color: #c0261e; }
:root[data-theme="light"] .lw-hint b, :root[data-theme="light"] .quiz-stem b, :root[data-theme="light"] .note-tag,
:root[data-theme="light"] .step-kicker, :root[data-theme="light"] .ref-h, :root[data-theme="light"] .tab.active,
:root[data-theme="light"] .open-link, :root[data-theme="light"] .resume, :root[data-theme="light"] .prose a,
:root[data-theme="light"] .goal-chip, :root[data-theme="light"] .quiz-kicker, :root[data-theme="light"] .rp-n,
:root[data-theme="light"] .pm-n, :root[data-theme="light"] details.deeper > summary::before { color: #b0306a; }
:root[data-theme="light"] .hs-tour .hs-art { background: var(--bg); }
:root[data-theme="light"] input[type=range].mc-range { background: transparent; }   /* keep the depth zones visible */