/* EEG Fundamentals refinement layer: brand, reading rhythm and box structure. Loaded last on the course page.
 *
 * The labs were written with a blue interface palette before the site adopted
 * the NeuroLogic app colors. This layer moves interface state (selected
 * controls, kickers, links, lesson badges and informational callouts) onto the
 * shared tokens in base.css. Waveform, polarity, laterality, answer-feedback
 * and clinical-urgency colors carry meaning and are intentionally untouched.
 * Rules are scoped to #lead-simulator-container so they outrank the older
 * class-only light and dark rules without !important.
 */

#lead-simulator-container {
  --fx-tint: color-mix(in srgb, var(--action-bg) 4%, var(--surface-1));
  --fx-tint-strong: color-mix(in srgb, var(--action-bg) 11%, var(--surface-1));
  --fx-tint-border: color-mix(in srgb, var(--action-bg) 16%, var(--border-color));
}
body.dark #lead-simulator-container {
  --fx-tint: color-mix(in srgb, var(--action-bg) 16%, var(--surface-1));
  --fx-tint-strong: color-mix(in srgb, var(--action-bg) 26%, var(--surface-1));
  --fx-tint-border: color-mix(in srgb, var(--action-bg) 42%, var(--border-color));
}

/* ---- Selected controls ------------------------------------------------- */
#lead-simulator-container :is(button, [role="tab"]):is(.is-active, .active, [aria-pressed="true"], [aria-selected="true"]):not(.btn-toggle, .freq-tab, .lab-step, .aq-chip, .teaching-option, .choice, [data-pdr-count]),
#lead-simulator-container .sum-run,
#lead-simulator-container .visual-replay[data-eye-preset].is-active,
#lead-simulator-container .bpm-tour-btn.is-primary {
  background: var(--action-bg);
  border-color: var(--action-bg);
  color: var(--action-ink);
}
#lead-simulator-container :is(button, [role="tab"]):is(.is-active, .active, [aria-pressed="true"], [aria-selected="true"]):not(.btn-toggle, .freq-tab, .lab-step, .aq-chip, .teaching-option, .choice, [data-pdr-count]) :is(span, small, em, strong):not([class*="swatch"], [class*="dot"]),
#lead-simulator-container .sum-run :is(span, small) {
  color: inherit;
}
#lead-simulator-container :is(button, [role="tab"]):is(.is-active, .active, [aria-pressed="true"], [aria-selected="true"]):not(.btn-toggle, .freq-tab, .lab-step, .aq-chip, .teaching-option, .choice, [data-pdr-count]):hover,
#lead-simulator-container .sum-run:hover,
#lead-simulator-container .bpm-tour-btn.is-primary:hover {
  background: var(--action-hover, var(--action-bg));
  border-color: var(--action-hover, var(--action-bg));
  color: var(--action-ink);
}

/* Quiet controls: a secondary action keeps the page surface and brand ink. */
#lead-simulator-container :is(.visual-replay:not(.is-active), .bpm-tour-start, .bpm-tour-btn:not(.is-primary), .head-map-expand) {
  border-color: var(--fx-tint-border);
  color: var(--accent-color);
}

/* Frequency band tabs and the placement steps use an underline, not a fill. */
/* Band tabs keep their band colour underline (a data key shared with the
   trace); the label no longer wraps. */
#lead-simulator-container .freq-tab-hz { white-space: nowrap; }
#lead-simulator-container .lab-step:is(.active, .completed) { color: var(--accent-color); }
#lead-simulator-container .lab-step.active { box-shadow: inset 0 -3px 0 var(--action-bg); }
#lead-simulator-container .bpm-tour-progress-fill { background: var(--action-bg); }
#lead-simulator-container .landmark-n { background: var(--action-bg); color: var(--action-ink); }

/* ---- Kickers, headings and links --------------------------------------- */
#lead-simulator-container :is(.visual-kicker, .adc-kicker, .adc-chain-label, .wave-lab-eyebrow, .waveform-intro-kicker, .eye-view-title, .step-kicker, .eyebrow) {
  color: var(--accent-color);
}
#lead-simulator-container .freq-explorer h4,
#lead-simulator-container .fr-course-time strong { color: var(--text-color); }
#lead-simulator-container :is(p, li, td, dd, figcaption, small) > a:not([class], [data-survey-link]),
#lead-simulator-container .board-link a {
  color: var(--accent-color);
  text-decoration-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  text-underline-offset: .18em;
}
#lead-simulator-container :is(p, li, td, dd, figcaption, small) > a:not([class], [data-survey-link]):hover,
#lead-simulator-container .board-link a:hover { text-decoration-color: currentColor; }

/* ---- Lesson-type badges ------------------------------------------------ */
/* One quiet pill; a coloured dot distinguishes the lesson type. */
#lead-simulator-container :is(.section-badge, .section-badge-interactive) {
  --badge-dot: var(--action-bg);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: auto;
  padding: .28rem .7rem .28rem .6rem;
  border: 1px solid var(--fx-tint-border);
  border-radius: 999px;
  background: var(--fx-tint);
  color: var(--text-color);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: none;
}
#lead-simulator-container :is(.section-badge, .section-badge-interactive)::before {
  content: "";
  width: .5rem;
  height: .5rem;
  flex: none;
  border-radius: 50%;
  background: var(--badge-dot);
}
#lead-simulator-container :is(.section-badge--lab, .section-badge-interactive) { --badge-dot: #6b3fa0; }
#lead-simulator-container .section-badge--practice { --badge-dot: #0f7b6c; }
#lead-simulator-container .section-badge--board { --badge-dot: #56607a; }
#lead-simulator-container .section-badge--caution { --badge-dot: #c2410c; }
body.dark #lead-simulator-container :is(.section-badge--lab, .section-badge-interactive) { --badge-dot: #c3a0f0; }
body.dark #lead-simulator-container .section-badge--practice { --badge-dot: #5fd3bf; }
body.dark #lead-simulator-container .section-badge--board { --badge-dot: #aab4cc; }
body.dark #lead-simulator-container .section-badge--caution { --badge-dot: #fb9b5c; }
body.dark #lead-simulator-container .section-badge { --badge-dot: #f29ac9; }
/* The two late labs floated their badge over the card edge; align it with
   every other lesson's badge instead. */
#lead-simulator-container .fundamentals-section > .section-badge-interactive {
  position: static;
  margin: 0 0 1rem max(0px, calc((100% - var(--lesson-measure, 44rem)) / 2));
}
#lead-simulator-container .interactive-module .section-badge-interactive { margin-bottom: .75rem; }

/* Spot-check tag */
#lead-simulator-container .aq-tag {
  background: var(--fx-tint-strong);
  color: var(--accent-color);
}

/* ---- Callouts ---------------------------------------------------------- */
/* Soft tinted panels replace the thick coloured side stripes. */
#lead-simulator-container :is(.important-note.info, .rule, .freq-seen, .instrument-guidance, .amplitude-equation, .adc-rule),
#lead-simulator-container .analogy-box:not(.secondary) {
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-md, 16px);
  background: var(--fx-tint);
  color: var(--text-color);
}
#lead-simulator-container :is(.important-note.info, .analogy-box:not(.secondary)) :is(p, strong, li) { color: var(--text-color); }
#lead-simulator-container .important-note.info > i { color: var(--accent-color); }
#lead-simulator-container .board-link { color: var(--text-secondary); }
#lead-simulator-container .cortical-layers .layers-eeg-link {
  border-left: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--fx-tint);
}
/* Cautions keep their amber meaning, in the same rounded shape. */
#lead-simulator-container .important-note:not(.info) {
  border: 1px solid #efd28b;
  border-radius: var(--radius-md, 16px);
  background: #fff8e6;
}
body.dark #lead-simulator-container .important-note:not(.info) {
  border-color: rgba(240, 194, 116, .38);
  background: rgba(240, 194, 116, .1);
}
/* Quiz cards are already framed; the extra stripe only added noise. */
#lead-simulator-container .atlas-quiz { border-left-width: 1px; border-left-color: var(--border-color); }
#lead-simulator-container .aq-explain { border-left-color: var(--fx-tint-border); }

/* ---- Lab headers ------------------------------------------------------- */
/* The bipolar simulator used a navy gradient banner unlike every other lab. */
#lead-simulator-container .interactive-component > .component-header {
  background: var(--fx-tint);
  border-bottom: 1px solid var(--fx-tint-border);
  color: var(--text-color);
  font-size: 1.05rem;
  font-weight: 700;
}
#lead-simulator-container .interactive-component > .component-header i { color: var(--accent-color); }

/* Bipolar presets: polarity keeps its colour as a marker, not a loud fill. */
#lead-simulator-container .math-sim-buttons .btn-primary-small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border: 1px solid var(--border-color);
  background: var(--surface-1);
  color: var(--text-color);
  box-shadow: none;
  font-weight: 600;
}
#lead-simulator-container .math-sim-buttons .btn-primary-small:hover {
  border-color: var(--fx-tint-border);
  background: var(--fx-tint);
  color: var(--text-color);
}
#lead-simulator-container .math-sim-buttons .btn-primary-small[data-polarity]::before {
  content: "";
  width: .55rem;
  height: .55rem;
  flex: none;
  border-radius: 50%;
  background: var(--polarity, #6b7280);
}
#lead-simulator-container .math-sim-buttons [data-polarity="negative"] { --polarity: #1f6fd0; }
#lead-simulator-container .math-sim-buttons [data-polarity="positive"] { --polarity: #c2410c; }
#lead-simulator-container .math-sim-buttons [data-polarity="artifact"] { --polarity: #6b7280; }
body.dark #lead-simulator-container .math-sim-buttons [data-polarity="negative"] { --polarity: #6fb4ea; }
body.dark #lead-simulator-container .math-sim-buttons [data-polarity="positive"] { --polarity: #fb9b5c; }
#lead-simulator-container .math-sim-buttons .btn-primary-small.is-reset {
  border-style: dashed;
  color: var(--text-secondary);
}

/* When a lesson opens with a text-and-figure layout rather than a reading
   column, start the badge at the same edge as that text. */
#lead-simulator-container .fundamentals-section > :is(.section-badge, .section-badge-interactive):has(+ .fundamentals-layout .sum-intuition) {
  margin-left: 0;
}

/* ---- Apply-it cards and plain lab buttons ------------------------------ */
#lead-simulator-container .teaching-card {
  border-color: var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-2);
  color: var(--text-color);
}
#lead-simulator-container :is(.teaching-card, .teaching-controls) :is(button:not([aria-pressed="true"]), select),
#lead-simulator-container #pdr-assess {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
  color: var(--text-color);
  font-weight: 600;
}
#lead-simulator-container :is(.teaching-card, .teaching-controls) button:not([aria-pressed="true"], :disabled):hover,
#lead-simulator-container #pdr-assess:hover {
  border-color: var(--fx-tint-border);
  background: var(--fx-tint);
}
#lead-simulator-container .teaching-card button[aria-pressed="true"] :is(span, strong) { color: inherit; }

/* The "where to measure" note hugs its text instead of stretching to the
   height of the neighbouring EEG page with the text floating mid-box. */
#lead-simulator-container .teaching-split-map .teaching-split-callout {
  flex: 0 0 auto;
  justify-content: flex-start;
  min-height: 0;
  color: var(--text-secondary);
}

/* ======================================================================
 * Reading rhythm
 * Measured against published education design systems (Khan Academy Wonder
 * Blocks 16/24, Canvas 16/1.5, Open edX Paragon 18/1.56, GOV.UK 19/25 with a
 * 20px paragraph gap and a ~640px text column) and WCAG 1.4.8/1.4.12.
 * The earlier 16px text in a 44rem column set ~100 characters per line with
 * paragraph gaps smaller than one line. Larger text in a slightly narrower
 * column brings reading lines to roughly 80 characters.
 * ====================================================================== */
body.has-fundamentals-reader .page-eeg_lead_simulator { --lesson-measure: 39rem; }

/* Notes inside full-width labs keep a readable line length too (these ran
   to 150-199 characters per line). */
#lead-simulator-container :is(.component-footer, .instrument-guidance, .teaching-assumption, .adc-readout,
  .amplitude-grid-note, .img-caption, .bpm-tour-body > p, .freq-body > p, .dip-model-notes > p,
  .eye-model-notes > p, .cortical-layers > p, .artifact-hunter > p, .mc-more > p, .aq-ask) {
  max-width: 42em;
}
#lead-simulator-container .artifact-hunter > p { margin-inline: auto; }

/* Main lesson prose: 18px, 1.6 leading, paragraph gap a little over one em. */
body.has-fundamentals-reader #lead-simulator-container :is(
  .fundamentals-section > p, .fundamentals-text > p, .fundamentals-card > p,
  .lesson-lead > p, .var-panel > p, .clinical-reading > p, .sum-intuition-copy > p,
  .bg-organization-panel > p, .fr-course-overview-heading > p
) {
  max-width: var(--lesson-measure);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1.1em;
}
body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-text) > :is(ul, ol) {
  max-width: var(--lesson-measure);
  font-size: 1.125rem;
  line-height: 1.6;
}
body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-text) > :is(ul, ol) > li { margin-bottom: .45em; }

/* Supporting text (primers, questions, callouts, cards) one step down. */
body.has-fundamentals-reader #lead-simulator-container :is(.aq-primer, .aq-section-primer, .aq-explain > p, .teaching-card > p, .important-note p, .golden-rule p, .pro-tip p, .analogy-box p) {
  font-size: 1rem;
  line-height: 1.6;
}
body.has-fundamentals-reader #lead-simulator-container :is(.aq-primer, .aq-section-primer) { max-width: var(--lesson-measure); }

/* Subheadings sit closer to the text they introduce than to the text above. */
#lead-simulator-container :is(.fundamentals-section, .fundamentals-text, .var-panel, .clinical-reading) > h3 { margin-top: 2rem; margin-bottom: .5rem; }
#lead-simulator-container :is(.fundamentals-section, .fundamentals-text) > h4 { margin-top: 1.6rem; margin-bottom: .4rem; }

/* ---- Small labels -------------------------------------------------------- */
/* 12px floor, as in every reference system; labels read in sentence case. */
#lead-simulator-container :is(th, .dip-k, .readout-label, .freq-tab-hz, .var-step, .bpm-ch-n, .ion-panel-kicker, .stage-jump, .adc-chain-label, .teaching-split-label, .eye-view-sub, .eye-view-hint, .freq-readout) {
  font-size: .75rem;
}
#lead-simulator-container :is(.visual-kicker, .adc-kicker, .waveform-intro-kicker, .wave-lab-eyebrow, .eyebrow, .analogy-header, .teaching-split-label, .ion-panel-kicker, .step-kicker) {
  font-size: .8125rem !important;
  font-weight: 700;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
#lead-simulator-container :is(.readout-label, .dip-k, th, .mc-gutter-head, .adc-chain-label, .stage-jump) {
  letter-spacing: .02em;
}

/* ---- Remaining side stripes ------------------------------------------------ */
#lead-simulator-container .fr-course-time {
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--fx-tint);
}
#lead-simulator-container .pro-tip {
  border: 1px solid #b9dcc4;
  border-radius: var(--radius-md, 16px);
  background: #f1f9f3;
}
body.dark #lead-simulator-container .pro-tip { border-color: rgba(76, 175, 80, .35); background: rgba(76, 175, 80, .1); }
#lead-simulator-container .var-tell {
  padding: .75rem .9rem;
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--fx-tint);
  color: var(--text-color);
}
body.dark #lead-simulator-container .var-tell { color: var(--text-color); }
#lead-simulator-container .clinical-feedback { border-left-width: 1px; border-radius: var(--radius-sm, 10px); }

/* Figure keys, gutters and readouts: same 12px floor. */
#lead-simulator-container :is(.eye-trace-heading span, .mc-peak, .mc-peak strong, .mc-row-name, .mc-group-label, .mc-heatmap-label span,
  .mc-heatmap-legend, .tsc-label, .tsc-tag, .mc-gap span, .calc-result, .math-row, .deflection-monitor, .bpm-tour-step span,
  .banana-page-key li, .sum-intuition-fig figcaption, .ion-readout span, .mc-gutter-head) {
  font-size: .75rem;
}
/* Answer choices read as text, not as bold buttons. */
#lead-simulator-container .teaching-card button:not(:last-of-type) { font-weight: 500; }

/* Answer annotations drawn on quiz pages, and small chain/readout labels. */
#lead-simulator-container .aq-mark-tag { font-size: .75rem; line-height: 1.35; }
#lead-simulator-container :is(.mc-group-label, .mc-gap span, .bpm-tour-step span, .ion-readout span) { letter-spacing: .02em; }
#lead-simulator-container :is(.var-tab, .mc-chip, .polarity-rules span) { font-size: .75rem; }
@media (max-width: 600px) {
  /* 18px on a phone gives ~37 characters per line; 17px keeps ~40. */
  body.has-fundamentals-reader #lead-simulator-container :is(
    .fundamentals-section > p, .fundamentals-text > p, .fundamentals-card > p,
    .lesson-lead > p, .var-panel > p, .clinical-reading > p, .sum-intuition-copy > p,
    .bg-organization-panel > p, .fr-course-overview-heading > p,
    .fundamentals-section > :is(ul, ol), .fundamentals-text > :is(ul, ol)
  ) { font-size: 1.0625rem; }
  body.has-fundamentals-reader .page-eeg_lead_simulator .fundamentals-content > h2.section-header { line-height: 1.25; }
}

/* Glossary tables: the term column reads as a heading, not as code. */
#lead-simulator-container .code-table td:first-child { color: var(--text-color); font-family: inherit; font-weight: 700; }
/* Variability / reactivity checks: same quiet panel as other callouts. */
#lead-simulator-container .bg-check {
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--fx-tint);
}
#lead-simulator-container .bg-check-n { background: var(--action-bg); color: var(--action-ink); }
#lead-simulator-container .pdr-stage-readout + .pdr-count-challenge { margin-top: .75rem; }

/* ======================================================================
 * Dark theme surfaces
 * The labs kept the site's former navy dark palette after the move to the
 * app's purple surfaces. Map them onto the shared tokens: lab frames on
 * surface-1, inner panels on surface-2, figure stages on the page colour.
 * White EEG pages and trace/polarity colours are unchanged.
 * ====================================================================== */
body.dark #lead-simulator-container :is(.adc-lab, .dip-explorer, .eye-lab, .freq-explorer, .head-map-viewer, .instrument-lab,
  .ion-lab, .montage-compare, .sum-lab, .var-explorer, .wave-lab, .clinical-viewer, .eeg-report-sheet, .atlas-quiz,
  .cortical-layers, .bpm-tour, .teaching-card, .interactive-component, .interactive-module) {
  background: var(--surface-1);
  border-color: var(--border-color);
}
body.dark #lead-simulator-container :is(.adc-lab-heading, .adc-nyquist, .adc-chain-side, .adc-notes > div, .clinical-stage, .clinical-tabs,
  .freq-stage, .mc-stage, .mc-heatmap, .mc-gutter, .pdr-count-challenge, .pdr-stage-readout, .var-tabs, .landmark, .pdr-reference,
  .eye-view, .aq-primer, .aq-section-primer, .clinical-feedback, .sum-snapshot, .component-footer, .ion-signal-panel, .course-action,
  .polarity-rules > div, .bpm-tour-start, .clinical-choice, .clinical-tab:not(.is-active), .ion-readout > div, .adc-rule, .adc-col) {
  background: var(--surface-2);
  border-color: var(--border-color);
}
body.dark #lead-simulator-container .adc-chain-side.is-digital { background: var(--surface-3); }
body.dark #lead-simulator-container .adc-door { background: var(--action-bg); color: var(--action-ink); }
body.dark #lead-simulator-container .adc-col.is-kept { background: color-mix(in srgb, #2ea86a 12%, var(--surface-2)); }
body.dark #lead-simulator-container .adc-col.is-lost { background: color-mix(in srgb, #e2705f 12%, var(--surface-2)); }
body.dark #lead-simulator-container :is(.dip-stage, .dip-anatomy, .ion-stage, .sum-stage, .eye-traces, .amplitude-canvas-wrap,
  .pdr-canvas-wrap, .adc-canvas-wrap, figure.ion-stage figcaption, .eye-lab figcaption) {
  background: #2b2042;
  border-color: var(--border-color);
}
body.dark #lead-simulator-container :is(.teaching-card, .teaching-controls) :is(button:not([aria-pressed="true"]), select) {
  background: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark #lead-simulator-container :is(.instrument-experiments button, .instrument-view button):not([aria-pressed="true"]),
body.dark #lead-simulator-container :is(.map-facts > div, .amplitude-takeaways > p, #eye-explain) {
  background: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-color);
}
/* Lab headings, step numbers and quiet selector buttons. */
#lead-simulator-container .wave-lab-heading { background: var(--fx-tint); border-bottom-color: var(--fx-tint-border); }
#lead-simulator-container .adc-chain-side li span { background: var(--action-bg); color: var(--action-ink); }
body.dark #lead-simulator-container :is(.pdr-stage-buttons button:not(.is-active), .adc-rate:not(.is-active), #pdr-case, .mc-chip:not(.is-active), .var-tab:not(.is-active), .dip-chip:not(.is-active), .stage-jump:not(.is-active)) {
  background: var(--surface-2);
  border-color: var(--border-color);
  color: var(--text-color);
}
body.dark #lead-simulator-container [data-pdr-count]:not(.is-correct, .is-wrong, [aria-pressed="true"]) { background: var(--surface-2); border-color: var(--border-color); color: var(--text-color); }
#lead-simulator-container [data-pdr-count][aria-pressed="true"]:not(.is-correct, .is-wrong) { border-color: var(--action-bg); box-shadow: inset 0 0 0 1px var(--action-bg); }

/* ======================================================================
 * Box system (September 26 pass)
 * An audit of all 42 lessons found about 90 distinct box treatments: blue-gray
 * and lavender surfaces, radii from 6 to 18 px, some with shadows, and
 * callouts at three different widths. Every box now belongs to one of four
 * kinds, and only the kind decides its surface, border, corner and width.
 *
 *   Note     a short aside in the reading column. Brand tint, 10 px corners.
 *   Caution  the same shape in amber, kept for warnings.
 *   Panel    a practice or course card in the reading column. Neutral
 *            surface, 16 px corners.
 *   Frame    a lab, figure or quiz, which may run wider than the text.
 *            Page surface, 16 px corners, no shadow. Inner readouts and
 *            feedback inside a frame use the neutral surface at 10 px.
 *
 * Trace, polarity, answer-feedback and clinical-urgency colours are unchanged.
 * ====================================================================== */
#lead-simulator-container {
  --fx-note-pad: .875rem 1.125rem;
  --fx-panel-pad: 1.25rem 1.5rem;
}

/* ---- Note ---------------------------------------------------------------- */
#lead-simulator-container :is(.important-note.info, .rule, .freq-seen, .instrument-guidance, .amplitude-equation,
  .adc-rule, .analogy-box, .var-tell, .bg-check, .fr-course-time, .pro-tip, .golden-rule, .layers-eeg-link, .concept-item) {
  border: 1px solid var(--fx-tint-border);
  border-radius: var(--radius-sm, 10px);
  background: var(--fx-tint);
  box-shadow: none;
  color: var(--text-color);
}
#lead-simulator-container :is(.important-note, .analogy-box, .pro-tip, .golden-rule, .concept-item) {
  padding: var(--fx-note-pad);
}
body.dark #lead-simulator-container :is(.pro-tip, .analogy-box.secondary) {
  border-color: var(--fx-tint-border);
  background: var(--fx-tint);
}
#lead-simulator-container :is(.important-note, .analogy-box, .pro-tip, .golden-rule, .concept-item) :is(p, li, strong):not(.analogy-header) { color: inherit; }
#lead-simulator-container :is(.important-note, .analogy-box, .pro-tip, .golden-rule, .concept-item) > i { color: var(--accent-color); }

/* ---- Caution --------------------------------------------------------------- */
#lead-simulator-container .important-note:not(.info) {
  border: 1px solid #efd28b;
  border-radius: var(--radius-sm, 10px);
  background: #fff8e6;
}
#lead-simulator-container .important-note:not(.info) > i { color: #a45b00; }
body.dark #lead-simulator-container .important-note:not(.info) > i { color: #f0c274; }

/* ---- Panel --------------------------------------------------------------- */
#lead-simulator-container :is(.teaching-card, .fr-course-overview, .fr-report-practice, .fr-finish) {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-2);
  box-shadow: none;
}
#lead-simulator-container .teaching-card { padding: var(--fx-panel-pad); }

/* Notes and panels in the reading column share its edges exactly. Previously
   notes were 3 rem wider than the text, practice cards 2.5 rem wider, and
   some notes matched it, so no two boxes lined up. */
body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-text, .fundamentals-card, .lesson-lead, .clinical-reading, .var-panel, .bg-organization-panel, .sum-intuition-copy)
  > :is(.important-note, .board-link, .analogy-box, .pro-tip, .golden-rule, .course-action, .teaching-card, .label-breakdown, .concept-item, .rule-strip),
body.has-fundamentals-reader #lead-simulator-container .teaching-card {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lesson-measure);
  margin-left: auto;
  margin-right: auto;
}
body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-text, .fundamentals-card, .lesson-lead, .clinical-reading, .var-panel, .bg-organization-panel, .sum-intuition-copy)
  > :is(.important-note, .board-link, .analogy-box, .pro-tip, .golden-rule, .course-action, .teaching-card, .concept-item) {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Text inside notes and panels: one size, one leading, one paragraph gap. */
body.has-fundamentals-reader #lead-simulator-container :is(.important-note, .board-link, .analogy-box, .pro-tip, .golden-rule, .course-action, .concept-item, .var-tell, .bg-check, .rule) :is(p, li) ,
body.has-fundamentals-reader #lead-simulator-container :is(p.board-link, p.course-action, p.var-tell) {
  font-size: 1rem;
  line-height: 1.6;
  max-width: none;
}
body.has-fundamentals-reader #lead-simulator-container :is(.important-note, .analogy-box, .pro-tip, .golden-rule, .concept-item, .teaching-card) > p {
  margin: 0 0 .6em;
}
body.has-fundamentals-reader #lead-simulator-container :is(.important-note, .analogy-box, .pro-tip, .golden-rule, .concept-item, .teaching-card) > p:last-child {
  margin-bottom: 0;
}
#lead-simulator-container .analogy-header {
  margin: 0 0 .35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-color);
}
#lead-simulator-container .analogy-box p { font-style: normal; }

/* ---- Frame --------------------------------------------------------------- */
#lead-simulator-container :is(.sum-lab, .dip-explorer, .ion-lab, .eye-lab, .head-map-viewer, .montage-compare, .instrument-lab,
  .adc-nyquist, .freq-explorer, .wave-lab, .interactive-module, .interactive-component, .clinical-viewer, .var-explorer, .atlas-quiz,
  .cortical-layers, .waveform-course-intro, .eeg-report-sheet) {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
  box-shadow: none;
}
/* Figure crops keep their tight corners; only their edge colour changes. */
#lead-simulator-container :is(.sum-stage, .dip-stage, .dip-anatomy, .sum-intuition-fig, .seizure-canvas-wrap, .hunter-canvas-wrap, .mc-heatmap, .cortex-figure, .teaching-split-stage) {
  border-color: var(--border-color);
  box-shadow: none;
}
/* Inner readouts, feedback and tab strips inside a frame. */
#lead-simulator-container :is(.readout, .clinical-feedback, .hunter-feedback, .pdr-stage-readout, .pdr-count-challenge, .sum-snapshot,
  .component-footer, .adc-chain-side:not(.is-digital), .adc-lab-heading, .var-tabs, .clinical-tabs, .landmark, .aq-primer, .aq-section-primer,
  .ion-signal-panel, .wave-lab-heading, .interactive-component > .component-header) {
  border-color: var(--border-color);
  background: var(--surface-2);
  box-shadow: none;
}
#lead-simulator-container :is(.readout, .clinical-feedback, .hunter-feedback, .pdr-stage-readout, .pdr-count-challenge, .sum-snapshot,
  .adc-chain-side, .landmark, .aq-primer, .aq-section-primer, .ion-signal-panel) {
  border-radius: var(--radius-sm, 10px);
}
#lead-simulator-container .adc-chain-side.is-digital { border-color: var(--fx-tint-border); background: var(--fx-tint); }
#lead-simulator-container :is(.clinical-stage, .freq-stage, figure.var-stage) { background: var(--surface-1); }
#lead-simulator-container .aq-scroll { border-color: var(--border-color); }
#lead-simulator-container .atlas-quiz th,
#lead-simulator-container .cortical-layers th { background: var(--surface-2); }

/* ---- Term rows ------------------------------------------------------------ */
/* Each row reads as a run-in label followed by its text. The fixed 9.5 rem
   label column left a wide gap after short labels ("Duration:") and then
   wrapped the text back under the label. */
body.has-fundamentals-reader #lead-simulator-container .label-breakdown li {
  display: block;
  padding: .6rem 0;
  font-size: 1.125rem;
  line-height: 1.6;
}
body.has-fundamentals-reader #lead-simulator-container .label-breakdown li > strong:first-child {
  display: inline;
  min-width: 0;
  margin-right: .3em;
}
body.has-fundamentals-reader #lead-simulator-container .label-breakdown { margin-top: 1rem; margin-bottom: 1.25rem; }

/* ---- Headings inside reading panels align with the text column. ---------- */
body.has-fundamentals-reader #lead-simulator-container :is(.bg-organization-panel, .clinical-reading, .var-panel, .sum-intuition-copy) > :is(h3, h4) {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--lesson-measure);
  margin-left: auto;
  margin-right: auto;
}
/* Remaining blue-gray surfaces from the old lab palette. */
#lead-simulator-container :is(.ion-readout > div, .polarity-rules > div, .map-facts > div, .adc-notes > div, .pdr-reference-grid > p,
  .var-meta li, .eye-anatomy, .eye-view, .gallery-item p.fr-align-left, .amplitude-takeaways > p) {
  border-color: var(--border-color);
  background: var(--surface-2);
}
#lead-simulator-container :is(.map-facts > div, .polarity-rules > div, .adc-notes > div, .eye-anatomy) { border-radius: var(--radius-sm, 10px); }
#lead-simulator-container :is(.bpm-page-labels, .mc-gutter) { background: var(--surface-2); }
#lead-simulator-container :is(.calculations-column.bpm-page, .adc-canvas-wrap, .code-table-wrap) { border-color: var(--border-color); }
#lead-simulator-container :is(.code-table, .report-phrase-table) th { background: var(--surface-2); color: var(--text-color); }
#lead-simulator-container details.teaching-details {
  border-color: var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
}

/* One-line cross-links ("Continue in Board Review", "Test the map now") read
   as a closing line of text, not as another box. Three stacked tinted boxes
   closed several lessons. */
#lead-simulator-container :is(p.board-link, p.course-action) {
  padding: .9rem 0 0;
  border: 0;
  border-top: 1px solid var(--border-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
}
#lead-simulator-container :is(p.board-link, p.course-action) > i { margin-right: .35rem; color: var(--accent-color); }
#lead-simulator-container p.course-action + p.board-link { padding-top: .25rem; border-top: 0; }

/* Lab titles and key facts use the text colour; the old navy and blue belonged
   to the former interface palette. */
#lead-simulator-container .visual-lab-header h3,
#lead-simulator-container :is(.freq-explorer, .instrument-lab, .adc-lab, .wave-lab, .dip-explorer, .sum-lab, .ion-lab, .eye-lab, .montage-compare) :is(h3, h4) {
  color: var(--text-color);
}
#lead-simulator-container .map-facts strong { color: var(--text-color); }
#lead-simulator-container .map-facts span { color: var(--text-secondary); font-size: .8125rem; }
#lead-simulator-container .cortical-layers .layers-eeg-link { margin-bottom: .75rem; }

/* Practice lessons open with a paragraph, not a box. */
body.has-fundamentals-reader #lead-simulator-container .aq-section-primer {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-color);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.1em;
}
#lead-simulator-container :is(.aq-section-primer, .aq-primer, .aq-ask) strong { color: inherit; }
/* Inside a quiz, the question and hint start at the same edge as its answers
   instead of floating in a centred column above left-aligned choices. */
body.has-fundamentals-reader #lead-simulator-container .atlas-quiz :is(.aq-ask, .aq-primer) {
  margin-left: 0 !important;
  margin-right: auto !important;
}
#lead-simulator-container .adc-door { background: var(--action-bg); color: var(--action-ink); }
#lead-simulator-container .eeg-report-row dt { color: var(--text-color); }
#lead-simulator-container .eeg-report-kicker, #lead-simulator-container .eeg-report-sheet > :is(p, span):first-child { color: var(--accent-color); }
#lead-simulator-container .eeg-report-row.is-day dt { color: var(--accent-color); }
body.dark #lead-simulator-container .eeg-report-row { border-bottom-color: var(--border-color); }
body.dark #lead-simulator-container .eeg-report-row dd { color: var(--text-secondary); }

/* Quiz chips, segmented toggles and quiet buttons on the brand surfaces in
   both themes (they kept the old blue-gray light and near-black dark styles). */
#lead-simulator-container .aq-chip:not(.is-correct, .is-chosen) {
  border-color: var(--border-color);
  background: var(--surface-1);
  color: var(--text-color);
}
#lead-simulator-container .aq-chip:not(.is-correct, .is-chosen):hover:not(:disabled) { border-color: var(--fx-tint-border); background: var(--fx-tint); }
#lead-simulator-container .aq-chip:focus-visible { outline-color: var(--accent-color); }
body.dark #lead-simulator-container .aq-chip:not(.is-correct, .is-chosen) { background: var(--surface-2); }
#lead-simulator-container .visual-segment button:not(.is-active, [aria-pressed="true"]),
#lead-simulator-container .visual-replay:not(.is-active) {
  background: var(--surface-1);
  color: var(--text-color);
}
body.dark #lead-simulator-container .visual-segment button:not(.is-active, [aria-pressed="true"]),
body.dark #lead-simulator-container .visual-replay:not(.is-active) { background: var(--surface-2); }
#lead-simulator-container .visual-replay:not(.is-active) { color: var(--accent-color); }
#lead-simulator-container .polarity-rules span { color: var(--accent-color); text-transform: none; font-size: .75rem; letter-spacing: .01em; }
#lead-simulator-container :is(p.course-action, p.board-link) strong { color: var(--text-color); }

/* ======================================================================
 * One left edge (September 28, 2026)
 * The reading column used to be centered inside the lesson card while
 * figures, labs and frames filled the card. That gave every lesson two left
 * edges, 155px apart at 1280px: text looked centered in some places and
 * not in others, and much narrower than the figures around it.
 * Now everything starts at the card's content edge. Prose keeps a reading
 * measure of about 80 characters; figures and labs run on to the right.
 * ====================================================================== */
body.has-fundamentals-reader .page-eeg_lead_simulator { --lesson-measure: 41.5rem; }

body.has-fundamentals-reader #lead-simulator-container :is(
  .fundamentals-section, .fundamentals-text, .fundamentals-card, .lesson-lead,
  .bg-organization-panel, .var-panel, .clinical-reading, .sum-intuition-copy,
  .fr-course-overview-heading, .fundamentals-image, .course-syllabus
) > :is(p, ul, ol, dl, h3, h4, .section-badge, .teaching-card, .important-note,
  .golden-rule, .pro-tip, .aq-primer, .aq-section-primer, .aq-ask, .lesson-lead,
  .lesson-features, .label-breakdown, .course-syllabus, .img-caption, .board-link,
  .teaching-assumption, .course-action, .lab-closing, .fr-divider, img,
  .analogy-box, .concept-item, .rule-strip, .var-tell, .bg-check, .fr-course-time,
  .layers-eeg-link, .fr-course-overview, .fr-report-practice, .fr-finish, .course-test,
  .lab-mode-switcher, .section-badge-interactive, .eeg-report-sheet) {
  margin-left: 0 !important;
  margin-right: auto !important;
}

body.has-fundamentals-reader #lead-simulator-container .fundamentals-section > .section-badge {
  margin-left: 0;
}

/* The lesson title lines up with the text under it. */
body.has-fundamentals-reader .page-eeg_lead_simulator .fundamentals-content > h2.section-header {
  margin-left: 0;
  margin-right: auto;
}

/* Section dividers read left to right like the text: label first, then the
   rule, instead of a centered label between two rules. */
body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-layout, .fundamentals-text) > h3::before,
body.has-fundamentals-reader #lead-simulator-container .fr-divider::before {
  content: none;
  display: none;
}

body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-layout, .fundamentals-text) > h3,
body.has-fundamentals-reader #lead-simulator-container .fr-divider {
  max-width: none;
  justify-content: flex-start;
  text-align: left;
}

body.has-fundamentals-reader #lead-simulator-container :is(.fundamentals-section, .fundamentals-layout) > .fundamentals-text {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ======================================================================
 * One box per lesson, and the lesson fills it (September 29, 2026)
 * Starting everything at one left edge removed the double edge but left the
 * right third of the lesson card empty: the card grew with the window (932px
 * of content at 1280, 1152px at 1600) while the text stayed at ~42rem. The
 * lesson was also three boxes deep before any content (white course card,
 * gray panel, white section card with its own border and shadow), and labs
 * added two more, so every level took padding from the figures.
 * Now the course card is the lesson's only box: the gray panel and the
 * section card are gone, and labs sit directly in the card. The column is
 * capped at the width the labs were built for (about 930px of content), and
 * text, figures, labs, notes and pagers all fill that one width. The 10-20
 * placement lab keeps the full width it needs.
 * ====================================================================== */
body.has-fundamentals-reader .page-eeg_lead_simulator {
  --lesson-measure: 58rem;
  --lesson-gutter: 1.75rem;
}
@media (max-width: 700px) {
  body.has-fundamentals-reader .page-eeg_lead_simulator { --lesson-gutter: 1rem; }
}

body.has-fundamentals-reader #lead-simulator-container > .tab-content {
  padding: .25rem var(--lesson-gutter) 1.5rem !important;
}
body.has-fundamentals-reader .page-eeg_lead_simulator .fundamentals-content {
  padding: 0;
  background: transparent;
}
body.has-fundamentals-reader .page-eeg_lead_simulator .fundamentals-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.has-fundamentals-reader #lead-simulator-container:not(:has(#practice-tab:not([hidden]))) {
  max-width: calc(var(--lesson-measure) + 2 * var(--lesson-gutter));
  margin-left: auto;
  margin-right: auto;
}

/* Beside the contents rail, the rail and the lesson center as one group, so
   the pair lines up under the header instead of the lesson floating in the
   space to the right of the rail. */
@media (min-width: 1200px) {
  body.has-fundamentals-reader .fr-row { justify-content: center; }
  /* !important because eeg-lead-simulator.css centers the container with one. */
  body.has-fundamentals-reader .fr-row > #lead-simulator-container:not(:has(#practice-tab:not([hidden]))) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Lesson leads and section paragraphs had their own 82ch cap (about 730px),
   which stopped them short of the card edge. The measure is the card now. */
body.has-fundamentals-reader .page-eeg_lead_simulator :is(.lesson-lead, .fundamentals-section > p, .fundamentals-section > h3, .fundamentals-section > h4) {
  width: auto;
}

/* The four stage buttons on the seizure timeline cannot wrap their labels, so
   below ~500px the fourth ("Postictal") ran past the card edge. Two by two. */
@media (max-width: 500px) {
  #lead-simulator-container .seizure-timeline .stage-labels {
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem;
  }
}

/* One edge per figure inside a lab. The artifact and seizure canvases drew
   their own border 6px inside a framed wrap, the sampling plot was framed
   inside a framed card inside the lab, and the ion lab's result panel was
   framed inside its framed stage. */
body.has-fundamentals-reader #lead-simulator-container :is(.hunter-canvas-wrap, .seizure-canvas-wrap) canvas {
  border: 0;
  border-radius: 0;
}
body.has-fundamentals-reader #lead-simulator-container .adc-nyquist .adc-canvas-wrap {
  border: 0;
  border-radius: 0;
}
body.has-fundamentals-reader #lead-simulator-container .ion-stage .ion-signal-panel {
  border-color: transparent;
}

/* Lab intros and status lines start at the lab's left edge like every other
   paragraph; the artifact hunter's intro was centered at 42em and its status
   line and the seizure feedback were centered. */
body.has-fundamentals-reader #lead-simulator-container .artifact-hunter > p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
body.has-fundamentals-reader #lead-simulator-container .hunter-feedback {
  text-align: left;
}

/* The placement lab's phone bleed reached through the old section padding
   (1.25rem); it now matches the lesson gutter so the head meets the card edge. */
@media (max-width: 760px) {
  body.has-fundamentals-reader .lead-lab .lab-workspace {
    margin-inline: calc(-1 * min(1.25rem, var(--lesson-gutter, 1.25rem)));
  }
}