/* EEG Fundamentals visual learning labs */

.page-eeg_lead_simulator .lesson-lead,
.page-eeg_lead_simulator .fundamentals-section > p,
.page-eeg_lead_simulator .fundamentals-section > h3,
.page-eeg_lead_simulator .fundamentals-section > h4 {
  width: min(100%, 82ch);
  margin-inline: auto;
}

.lesson-lead {
  color: var(--text-color, #243b53);
  font-size: 1.04rem;
  line-height: 1.72;
  margin-bottom: 1.4rem;
}

.lesson-lead p { margin: 0 0 0.8rem; }

.visual-lab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.visual-lab-header h3 {
  margin: 0.15rem 0 0;
  color: #173a59;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.visual-kicker {
  display: block;
  color: #0b6ab8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.visual-replay,
.sum-run {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  border: 1px solid #0b6ab8;
  border-radius: 10px;
  background: #fff;
  color: #0b5e9f;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
}

.visual-replay:hover,
.visual-replay:focus-visible,
.sum-run:hover,
.sum-run:focus-visible { background: #eef7ff; }

.visual-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.visual-segment {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border: 1px solid #cbd9e5;
  border-radius: 11px;
  overflow: hidden;
  background: #f4f8fb;
}

.visual-segment button {
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-right: 1px solid #cbd9e5;
  background: transparent;
  color: #415b70;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.visual-segment button:last-child { border-right: 0; }
.visual-segment button.is-active { background: #0b6ab8; color: #fff; }

#sharp-wave-real-pages .visual-segment {
  width: min(100%, 760px);
}
#sharp-wave-real-pages .visual-segment button {
  padding-inline: 0.55rem;
  white-space: nowrap;
}

/* Population summation */
.sum-population {
  --field-strength: 0.95;
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(280px, 1.5fr) minmax(130px, 0.55fr);
  gap: 1rem;
  align-items: center;
  min-height: 190px;
  margin: 0 0 1rem;
  padding: 1.1rem;
  overflow: hidden;
  border: 1px solid #ccdce9;
  border-radius: 16px;
  background: linear-gradient(145deg, #f7fbff, #edf5fb);
}

.sum-population::after {
  content: "";
  position: absolute;
  left: 33%;
  right: 14%;
  top: 5%;
  bottom: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(11,106,184,calc(var(--field-strength) * .24)), transparent 68%);
  opacity: 0;
  pointer-events: none;
}

.sum-population.is-running::after { animation: sum-field 1.35s ease-out both; }
.sum-population.is-spike::after { background: radial-gradient(ellipse, rgba(193,62,62,calc(var(--field-strength) * .2)), transparent 62%); }

.sum-population-copy { position: relative; z-index: 2; }
.sum-population-copy strong,
.sum-population-copy span { display: block; }
.sum-population-copy strong { color: #183e5d; line-height: 1.25; margin: 0.3rem 0; }
.sum-population-copy > span:last-child { color: #63788a; font-size: 0.82rem; line-height: 1.45; }
.sum-live-label { color: #0b6ab8; font-size: 0.68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.sum-neuron-field {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.4rem 0.7rem;
  align-items: end;
  min-height: 145px;
  padding: 0.6rem 0;
}

.sum-neuron {
  position: relative;
  display: block;
  height: 42px;
  opacity: 0.62;
  transform: translateY(calc((var(--n) % 3) * 4px));
}

.sum-dendrite,
.sum-axon {
  position: absolute;
  left: 50%;
  width: 2px;
  background: #7990a2;
  transform: translateX(-50%);
}

.sum-dendrite { top: 1px; height: 21px; }
.sum-dendrite::before,
.sum-dendrite::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 12px;
  height: 2px;
  background: #7990a2;
}
.sum-dendrite::before { right: 0; transform: rotate(35deg); transform-origin: right; }
.sum-dendrite::after { left: 0; transform: rotate(-35deg); transform-origin: left; }
.sum-soma { position: absolute; left: 50%; top: 20px; width: 13px; height: 15px; border-radius: 50% 50% 55% 55%; background: #89a2b6; transform: translateX(-50%); }
.sum-axon { top: 34px; height: 8px; }

.sum-population.is-running .sum-neuron { animation: sum-neuron-fire 850ms ease-out var(--fire-delay) both; }
.sum-population.is-spike .sum-neuron { animation-duration: 190ms; }

.sum-field-meter { position: relative; z-index: 2; color: #526b80; font-size: 0.75rem; font-weight: 750; }
.sum-meter-track { height: 112px; width: 24px; margin: 0.5rem auto 0; border-radius: 14px; background: #dbe5ec; overflow: hidden; transform: rotate(180deg); }
.sum-meter-track span { display: block; width: 100%; background: linear-gradient(#1c7ec5, #61b6e9); border-radius: 14px; transition: width .25s, height .25s; height: 100%; transform-origin: bottom; transform: scaleY(calc(var(--field-strength))); }
.sum-population.is-spike .sum-meter-track span { background: linear-gradient(#b93434, #ef7777); }
.sum-controls .sum-run { margin-left: auto; background: #0b6ab8; color: #fff; }

@keyframes sum-neuron-fire {
  0%, 100% { opacity: .55; filter: none; transform: translateY(calc((var(--n) % 3) * 4px)) scale(1); }
  38% { opacity: 1; filter: drop-shadow(0 0 10px #2f9ee8); transform: translateY(calc((var(--n) % 3) * 4px)) scale(1.14); }
}

@keyframes sum-field {
  0% { opacity: 0; transform: scale(.7); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* Ion current field */
.ion-lab,
.eye-lab,
.head-map-viewer {
  width: min(100%, 1160px);
  margin: 1.4rem auto;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid #cddbe6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(27,58,82,.08);
}

.ion-stage { margin: 0; border: 1px solid #d8e3eb; border-radius: 14px; overflow: hidden; background: linear-gradient(#f8fbfe, #eef5f9); }
.ion-stage svg { display: block; width: 100%; height: auto; }
.ion-stage figcaption { padding: 0.75rem 1rem 0.9rem; color: #50677a; font-size: 0.88rem; line-height: 1.5; background: #fff; }
.ion-scalp { fill: none; stroke: #dfe4e9; stroke-width: 20; stroke-linecap: round; }
.ion-electrode .ion-cup { fill: #e8f1f9; stroke: #0b6ab8; stroke-width: 4; stroke-linejoin: round; }
.ion-electrode .ion-rim { fill: #fff; stroke: #0b6ab8; stroke-width: 4; }
.ion-electrode .ion-lead { fill: none; stroke: #0b6ab8; stroke-width: 5; stroke-linecap: round; }
.ion-cell { fill: none; stroke: #a86330; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ion-cell-soma { fill: #f0d9c6; stroke: #a86330; stroke-width: 11; stroke-linejoin: round; }

/* The current loop. Marching dashes give it a direction, which is the whole
   argument: it is one circuit, so the end where charge leaves the extracellular
   space must read negative and the end where it returns must read positive.
   The direction reverses with the polarity — same circuit, running the other
   way — so the arrow of the animation always agrees with the badge. */
.ion-loop {
  fill: none;
  stroke: #2f7d4f;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 13 15;
  opacity: .92;
}

.ion-lab.is-flowing .ion-loop { animation: ion-march 1.5s linear infinite; }
.ion-lab.is-surface-positive.is-flowing .ion-loop { animation-direction: reverse; }
@keyframes ion-march { to { stroke-dashoffset: -64; } }

/* Charge accounting, stated in the extracellular space at each end. */
.ion-charge { font: 800 34px Inter, system-ui, sans-serif; }
.ion-charge-minus { fill: #287fbe; }
.ion-charge-plus { fill: #d55c49; }
.ion-synapse-dot { fill: #ffd37b; stroke: #b36d10; stroke-width: 4; }
.ion-label { fill: #334f66; font: 700 17px Inter, system-ui, sans-serif; }
#ion-field circle { stroke: none; }
.ion-lab.is-epsp.is-apical #ion-field circle:first-child,
.ion-lab.is-epsp.is-somatic #ion-field circle:last-child,
.ion-lab.is-ipsp.is-apical #ion-field circle:last-child,
.ion-lab.is-ipsp.is-somatic #ion-field circle:first-child { fill: url(#ion-neg-glow); }
.ion-lab.is-epsp.is-apical #ion-field circle:last-child,
.ion-lab.is-epsp.is-somatic #ion-field circle:first-child,
.ion-lab.is-ipsp.is-apical #ion-field circle:first-child,
.ion-lab.is-ipsp.is-somatic #ion-field circle:last-child { fill: url(#ion-pos-glow); }
.ion-return { fill: none; stroke: #6a7f90; stroke-width: 4; stroke-dasharray: 8 7; }
.ion-trace line { stroke: #aab8c3; stroke-width: 2; }
.ion-trace path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Blue up, red down — the same pair used for the sink, the source and the
   badge, so one colour convention carries the whole figure. */
.ion-lab #ion-wave { stroke: #287fbe; }
.ion-lab.is-surface-positive #ion-wave { stroke: #d55c49; }
.ion-trace-note { font: 800 14px Inter, system-ui, sans-serif; letter-spacing: .01em; }
.ion-trace-note.is-negative { fill: #287fbe; }
.ion-trace-note.is-positive { fill: #d55c49; }
.ion-trace text { fill: #607386; font: 700 14px Inter, system-ui, sans-serif; }
.ion-trace .ion-trace-title { fill: #8494a3; font: 800 13px Inter, system-ui, sans-serif; letter-spacing: .03em; }

/* The polarity the disc sees, stated on the disc. Colour follows the same
   convention as the field shading: blue negative, red positive. */
#ion-badge circle { stroke: #fff; stroke-width: 3; }
#ion-badge text { font: 800 22px Inter, system-ui, sans-serif; fill: #fff; }
#ion-badge.is-negative circle { fill: #287fbe; }
#ion-badge.is-positive circle { fill: #d55c49; }
.ion-particle circle { fill: #fff; stroke: #0b6ab8; stroke-width: 3; }
.ion-lab.is-ipsp .ion-particle circle { stroke: #7656b7; }
.ion-particle text { fill: #244963; font: 800 12px Inter, system-ui, sans-serif; }
.ion-lab.is-flowing .ion-particle { animation: ion-appear 1.2s ease-in-out var(--ion-delay) both; }
.ion-lab.is-flowing .ion-particle > * { animation: ion-in 1.2s ease-in-out var(--ion-delay) both; }
@keyframes ion-appear { 0% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes ion-in { 0% { transform: translate(0, 0); } 100% { transform: translate(var(--ion-dx, 0), var(--ion-dy, 0)); } }
.ion-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.8rem; }
.ion-readout div { padding: 0.75rem; border-radius: 10px; background: #f1f6fa; text-align: center; }
.ion-readout span, .ion-readout strong { display: block; }
.ion-readout span { color: #65798b; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ion-readout strong { color: #183c5b; margin-top: .25rem; font-size: .9rem; }
.visual-caveat { margin: .8rem 0 0; padding: .75rem .9rem; border-left: 4px solid #7656b7; background: #f7f4fc; color: #4d5360; font-size: .82rem; line-height: 1.52; }
.polarity-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; width: min(100%, 1100px); margin: 1rem auto; }
.polarity-rules div { padding: .85rem; border: 1px solid #d7e2ea; border-radius: 11px; background: #f8fbfd; }
.polarity-rules span, .polarity-rules strong, .polarity-rules em { display: block; }
.polarity-rules span { color: #0b6ab8; font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.polarity-rules strong { margin: .25rem 0; color: #1e3c54; }
.polarity-rules em { color: #607386; font-size: .8rem; }

/* Dipole center signal */
.dip-stage { position: relative; }
/* This was absolutely positioned at top:88px, left:50% — the exact centre of
   the plot, so the one number the reader wants sat on top of the generator,
   the overhead line and the dipole arrow it was describing. A readout should
   never cover its own subject. It now runs as a bar under the trace: same
   information, same colour coding, nothing obscured. */
.dip-strength { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: .5rem 0 0; padding: .5rem .75rem; border: 1px solid currentColor; border-left: 4px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.7); }
.dip-strength span, .dip-strength strong, .dip-strength small { display: inline-block; }
.dip-strength span { font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.dip-strength strong { font-size: 1.3rem; line-height: 1.05; margin: 0; font-variant-numeric: tabular-nums; }
.dip-strength small { color: #536979; font-size: .68rem; margin-left: auto; }
.dip-strength.is-strong { color: #177044; }
.dip-strength.is-reduced { color: #ba6714; }
.dip-strength.is-poor { color: #b33333; }

/* 10-20 map: facts occupy the unused columns beside the vertex figure. */
.head-map-layout {
  display: grid;
  grid-template-columns: minmax(10.5rem, 1fr) minmax(0, 32rem) minmax(10.5rem, 1fr);
  align-items: center;
  gap: 0.75rem 1rem;
}
.head-map-stage { margin: 0; text-align: center; min-width: 0; }
.head-map-stage img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(58vh, 540px);
  object-fit: contain;
  margin: 0 auto;
}
.head-map-stage figcaption { width: min(100%, 36ch); margin: .55rem auto 0; color: #536b7e; line-height: 1.45; font-size: .88rem; }
.map-facts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
  width: auto;
  margin: 0;
  min-width: 0;
}
.map-facts div { padding: .8rem .85rem; border: 1px solid #d5e1ea; border-radius: 11px; background: #f7fafc; text-align: left; }
.map-facts strong, .map-facts span { display: block; }
.map-facts strong { color: #0b6ab8; }
.map-facts span { margin-top: .2rem; color: #5b7082; font-size: .78rem; }

@media (max-width: 768px) {
  .head-map-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .head-map-stage { order: 1; }
  .map-facts-left,
  .map-facts-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    order: 2;
  }
}
.course-action { padding: .8rem 1rem; border-radius: 10px; background: #edf7ff; color: #214963; }
.board-link { margin-top: 1rem !important; padding: .75rem 1rem; border-left: 4px solid #0b6ab8; background: #f3f8fc; color: #405a6e; }
.board-link i { margin-right: .4rem; color: #0b6ab8; }
.board-link a { color: #075c9e; font-weight: 750; }

/* Montage figures and restyled technical lab */
.clinical-page-intro,
.phase-reversal-figure,
.montage-layout-figure,
.montage-reference-compare { width: min(100%, 1080px); margin: 1.1rem auto; }
.clinical-page-intro img,
.phase-reversal-figure img,
.montage-layout-figure img,
.montage-reference-compare img { display: block; width: 100%; height: auto; border: 1px solid #d5e0e8; border-radius: 13px; background: #fff; }
.clinical-page-intro figcaption,
.phase-reversal-figure figcaption,
.montage-layout-figure figcaption,
.montage-reference-compare figcaption { margin-top: .55rem; color: #576d7e; line-height: 1.5; font-size: .86rem; }

.banana-page-stage { position: relative; }
.banana-page-stage img { display: block; }
.banana-page-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 1.1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  list-style: none;
  color: #576d7e;
  font-size: 0.78rem;
  font-weight: 750;
}
.banana-page-key li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.banana-page-key li::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.banana-page-key .banana-lt { color: #c0392b; }
.banana-page-key .banana-rt { color: #0b6ab8; }
.banana-page-key .banana-lp { color: #d98324; }
.banana-page-key .banana-rp { color: #1f8a5c; }
.banana-page-key .banana-ml { color: #7b5ea7; }
.bipolar-logic-stack { display: block !important; }
.bipolar-logic-stack .fundamentals-text,
.bipolar-logic-stack .fundamentals-image { width: min(100%, 900px); max-width: none; margin-inline: auto; }
.interactive-component .component-header { background: linear-gradient(135deg, #0b5f9f, #183f62) !important; color: #fff !important; padding: .9rem 1.1rem; }
.medical-dashboard-wrapper { border: 1px solid #cbd9e4 !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 12px 34px rgba(27,58,82,.08) !important; overflow: hidden; }
.medical-dashboard-wrapper .dashboard-controls-grid { background: #f7fafc; gap: .8rem; padding: 1rem; }
.medical-dashboard-wrapper .control-panel-block { border: 1px solid #d4e0e9; border-radius: 12px; background: #fff; box-shadow: none; }
.medical-dashboard-wrapper .block-header { background: #173f61; color: #fff; }
.medical-dashboard-wrapper .knob { box-shadow: none; border-color: #9eb3c5; background: #e7eef4; }
.medical-dashboard-wrapper .digital-display { border-radius: 7px; background: #eef6fc; color: #163e5f; }

/* Eye artifact lab */
.eye-slider { display: grid; grid-template-columns: auto minmax(150px, 1fr) 62px; align-items: center; gap: .6rem; flex: 1 1 330px; color: #3f5a70; font-size: .8rem; font-weight: 750; }
.eye-slider output { text-align: center; color: #0b6ab8; }
.eye-lab-grid { display: grid; grid-template-columns: minmax(380px, 1.45fr) minmax(300px, 1fr); gap: 1rem; align-items: stretch; }
.eye-anatomy,
.eye-traces { margin: 0; border: 1px solid #d6e1e9; border-radius: 13px; overflow: hidden; background: #f8fbfd; }
.eye-anatomy-views {
  display: grid;
  grid-template-columns: minmax(210px, 0.75fr) minmax(280px, 1.25fr);
  align-items: stretch;
}
.eye-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f7fafc;
}
.eye-view-front { border-right: 1px solid #d6e1e9; }
.eye-view-chrome,
.eye-view-hint { margin: 0; text-align: center; }
.eye-view-chrome { padding: .55rem .65rem .2rem; }
.eye-view-title {
  margin: 0;
  color: #0b6ab8;
  font: 800 15px Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eye-view-sub,
.eye-view-hint {
  margin: 0;
  color: #536b7d;
  font: 650 13px Inter, system-ui, sans-serif;
  letter-spacing: .04em;
}
.eye-view-hint { padding: .2rem .65rem .55rem; }
.eye-anatomy svg { display: block; width: 100%; height: auto; }
.eye-front-svg { overflow: visible; }
/* Do not flex-grow the sagittal SVG: extra height would letterbox and
   drop the globe below the front almond. xMidYMin keeps leftover below. */
.eye-sagittal-svg { min-height: 340px; flex: 0 0 auto; }
.eye-anatomy figcaption,
.eye-traces p { margin: 0; padding: .7rem .85rem; color: #556d80; background: #fff; font-size: .82rem; line-height: 1.48; }
.eye-traces canvas { display: block; width: 100%; min-height: 300px; }
/* The old frontal view drew a filled face; the lateral view has no skin in it. */
.eye-head, .eye-orbit { display: none; }

/* Lateral view. transform-box:fill-box centres the rotation on the dipole's own
   box, which is what makes the globe pivot about itself rather than swinging
   round the SVG origin. */
.eye-cornea-bulge { fill: rgba(232,116,88,.20); stroke: #a94632; stroke-width: 4; stroke-linecap: round; }
.eye-scalp { fill: none; stroke: #b9c6d2; stroke-width: 3; stroke-dasharray: 7 7; stroke-linecap: round; }
.eye-nerve { fill: none; stroke: #9aa8b6; stroke-width: 7; stroke-linecap: round; }


.eye-electrodes circle { r: 9; fill: #fff; stroke: #0b6ab8; stroke-width: 4; }
.eye-electrodes text { fill: #173e60; font: 800 15px Inter, system-ui, sans-serif; text-anchor: middle; }
.eye-globe > circle { fill: #fff; stroke: #7791a6; stroke-width: 4; }
.eye-globe > circle.eye-sclera { fill: url(#eye-sclera-grad); }
.eye-dipole { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.eye-dipole path { stroke: #8195a5; stroke-width: 5; }
.eye-cornea { fill: #e87458; stroke: #a94632; stroke-width: 3; }
.eye-retina { fill: #4b78b6; stroke: #2e568a; stroke-width: 3; }
.eye-plus, .eye-minus { fill: #fff; font: 900 20px Inter, system-ui, sans-serif; text-anchor: middle; }
.eye-field-label { fill: #536b7d; font: 750 16px Inter, system-ui, sans-serif; }
/* Realistic cross-section parts. Paths inside .eye-dipole need the heavier
   selector to outrank the generic .eye-dipole path rule above. */
/* Front-view panel: carries horizontal gaze, which the profile cannot show.
   SVG type is bumped so F7/F8 render near the profile's 15px electrodes after
   the narrower column scales the viewBox. Titles and hints live in HTML. */
.eye-front-outline { fill: #fbfdff; stroke: #7f8fa0; stroke-width: 4; }
.eye-front-iris { transition: transform .18s ease; }
.eye-front-iris-disc { fill: #7c9fb8; stroke: #567b92; stroke-width: 3; }
.eye-front-pupil { fill: #22313d; }
.eye-front-glint { fill: #fff; opacity: .92; }
.eye-animators { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; }
.eye-front-svg .eye-electrodes circle { r: 11; }
.eye-front-svg .eye-electrodes text { font-size: 18px; }
.eye-dipole path.eye-iris { fill: none; stroke: #8a6a45; stroke-width: 7; stroke-linecap: round; }
.eye-dipole path.eye-cornea-dome { fill: rgba(186,224,235,.38); stroke: #7fa8bd; stroke-width: 2.5; }
.eye-dipole path.eye-axis { fill: none; stroke: #8195a5; stroke-width: 3.5; stroke-dasharray: 8 6; }
.eye-lens { fill: rgba(196,222,233,.55); stroke: #a3b8c4; stroke-width: 2; }
.eye-nerve-sheath { fill: none; stroke: #b7c3ce; stroke-width: 18; stroke-linecap: round; }
.eye-nerve { stroke-width: 11; }
.eye-brow-band { fill: #e6e6e6; opacity: .95; }

/* Stable Artifact Hunter controls */
.hunter-controls {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem !important;
  align-items: stretch;
}
.hunter-controls .btn-toggle {
  width: 100%;
  min-width: 0 !important;
  min-height: 54px;
  justify-content: flex-start;
  border-radius: 11px;
  padding: .65rem .75rem;
  line-height: 1.22;
  text-align: left;
}
.hunter-controls .btn-toggle::after { content: "Present"; margin-left: auto; padding: .16rem .38rem; border-radius: 999px; background: rgba(255,255,255,.7); font-size: .62rem; text-transform: uppercase; }
.hunter-controls .btn-toggle[data-state="resolved"]::after { content: "Resolved"; }

/* Digital recording: one-way acquisition chain + sampling lab */
.adc-lab {
  width: min(100%, 1080px);
  margin: 1.25rem auto 0;
  border: 1px solid #cddbe6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(27, 58, 82, 0.08);
  overflow: hidden;
}
.adc-lab-heading {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(280px, 1.2fr);
  gap: 1rem 1.4rem;
  align-items: end;
  padding: 1.2rem 1.35rem 1.1rem;
  border-bottom: 1px solid #d9e5ef;
  background: #f4f8fb;
}
.adc-lab-heading h3 {
  margin: 0.15rem 0 0;
  color: #16324a;
  font-size: 1.28rem;
}
.adc-kicker,
.adc-chain-label {
  margin: 0;
  color: #0b6ab8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adc-lab-heading > p {
  margin: 0;
  color: #4f6476;
  font-size: 0.92rem;
  line-height: 1.55;
}
.adc-chain {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(108px, 0.42fr) minmax(0, 0.95fr);
  gap: 0.75rem;
  align-items: stretch;
  padding: 1.1rem 1.2rem 0.2rem;
}
.adc-chain-side {
  padding: 0.85rem 0.9rem;
  border: 1px solid #d5e1ea;
  border-radius: 14px;
  background: #f7fafc;
}
.adc-chain-side.is-digital {
  background: #eef6fc;
  border-color: #c5d8e8;
}
.adc-chain-side ol {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.adc-chain-side li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}
.adc-chain-side li span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #173f61;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.adc-chain-side strong,
.adc-notes h4,
.adc-col h4,
.adc-nyquist-copy h3 {
  display: block;
  margin: 0 0 0.2rem;
  color: #16324a;
  font-size: 0.95rem;
}
.adc-chain-side em {
  display: block;
  font-style: normal;
  color: #53697b;
  font-size: 0.82rem;
  line-height: 1.45;
}
.adc-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.7rem 0.5rem;
  border-radius: 14px;
  background: #173f61;
  color: #fff;
  text-align: center;
}
.adc-door strong {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.adc-door span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d7e7f4;
}
.adc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 1rem 1.2rem 0.2rem;
}
.adc-col {
  padding: 0.85rem 1rem;
  border-radius: 12px;
}
.adc-col.is-lost {
  background: #fbf4f0;
  border: 1px solid #ecd4c6;
}
.adc-col.is-kept {
  background: #eef7f2;
  border: 1px solid #c4ddcf;
}
.adc-col ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  color: #4a5f70;
  font-size: 0.86rem;
  line-height: 1.45;
}
.adc-col.is-lost h4 { color: #9a3b1d; }
.adc-col.is-kept h4 { color: #1f6b48; }
.adc-nyquist {
  margin: 1rem 1.2rem;
  padding: 1rem 1rem 0.85rem;
  border: 1px solid #d5e1ea;
  border-radius: 14px;
  background: #fbfcfe;
}
.adc-nyquist-copy h3 { font-size: 1.05rem; }
.adc-nyquist-copy p {
  margin: 0.35rem 0 0;
  color: #4f6476;
  font-size: 0.9rem;
  line-height: 1.55;
}
.adc-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0.75rem;
}
.adc-rate {
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  border: 1px solid #c5d5e3;
  border-radius: 999px;
  background: #fff;
  color: #314b61;
  font: 750 0.82rem Inter, system-ui, sans-serif;
  cursor: pointer;
}
.adc-rate.is-active {
  background: #173f61;
  border-color: #173f61;
  color: #fff;
}
.adc-canvas-wrap {
  border: 1px solid #d7e2ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.adc-canvas-wrap svg {
  display: block;
  width: 100%;
  height: 200px;
}
.adc-plot-mid {
  stroke: #e4edf3;
  stroke-width: 1;
}
.adc-plot-true {
  stroke: #b7c4cf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.adc-plot-stored {
  stroke: #c0392b;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#adc-dots circle { fill: #0b6ab8; }
.adc-plot-label {
  fill: #607487;
  font: 700 11px Inter, system-ui, sans-serif;
}
.adc-readout {
  margin: 0.7rem 0 0;
  color: #314b61;
  font-size: 0.88rem;
  line-height: 1.45;
}
.adc-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
  margin: 0.55rem 0 0;
  color: #53697b;
  font-size: 0.78rem;
  font-weight: 700;
}
.adc-swatch {
  width: 1.1rem;
  height: 0.22rem;
  border-radius: 99px;
  background: #b7c4cf;
}
.adc-swatch.is-stored {
  height: 0.55rem;
  width: 0.55rem;
  border-radius: 50%;
  background: #0b6ab8;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #c0392b;
}
.adc-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding: 0 1.2rem 0.2rem;
}
.adc-notes > div {
  padding: 0.85rem 1rem;
  border: 1px solid #d5e1ea;
  border-radius: 12px;
  background: #f7fafc;
}
.adc-notes p {
  margin: 0;
  color: #4f6476;
  font-size: 0.86rem;
  line-height: 1.5;
}
.adc-rule {
  margin: 1rem 1.2rem 1.2rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #173f61;
  background: #f3f8fc;
  color: #314b61;
  font-size: 0.92rem;
  line-height: 1.5;
}

body.dark .adc-lab { background: #1d252d; border-color: #3b4b59; }
body.dark .adc-lab-heading { background: #202b34; border-bottom-color: #3b4b59; }
body.dark .adc-lab-heading h3,
body.dark .adc-chain-side strong,
body.dark .adc-notes h4,
body.dark .adc-nyquist-copy h3 { color: #e2edf6; }
body.dark .adc-lab-heading > p,
body.dark .adc-chain-side em,
body.dark .adc-nyquist-copy p,
body.dark .adc-notes p,
body.dark .adc-readout,
body.dark .adc-legend,
body.dark .adc-col ul { color: #b7c4cf; }
body.dark .adc-chain-side,
body.dark .adc-notes > div,
body.dark .adc-nyquist { background: #202b34; border-color: #3b4b59; }
body.dark .adc-chain-side.is-digital { background: #1b2833; }
body.dark .adc-col.is-lost { background: #2a2220; border-color: #5a3b32; }
body.dark .adc-col.is-kept { background: #1d2a24; border-color: #3d5c4c; }
body.dark .adc-col.is-lost h4 { color: #e7a48c; }
body.dark .adc-col.is-kept h4 { color: #8dceb0; }
body.dark .adc-rate { background: #1d252d; border-color: #3b4b59; color: #d5e0e8; }
body.dark .adc-rate.is-active { background: #4aa3e0; border-color: #4aa3e0; color: #102030; }
body.dark .adc-canvas-wrap { background: #161c22; border-color: #3b4b59; }
body.dark .adc-plot-mid { stroke: #2c3944; }
body.dark .adc-plot-true { stroke: #6d7f8d; }
body.dark .adc-plot-label { fill: #8ea0ae; }
body.dark .adc-rule { background: #202b34; color: #d5e0e8; border-left-color: #4aa3e0; }

@media (max-width: 860px) {
  .adc-lab-heading,
  .adc-chain,
  .adc-split,
  .adc-notes { grid-template-columns: 1fr; }
  .adc-door { min-height: 72px; }
}
body.dark .ion-lab,
body.dark .eye-lab,
body.dark .head-map-viewer,
body.dark .medical-dashboard-wrapper { background: #1d252d !important; border-color: #3b4b59 !important; }
body.dark .visual-lab-header h3,
body.dark .sum-population-copy strong,
body.dark .ion-readout strong { color: #e2edf6; }
body.dark .sum-population { background: #202b34; border-color: #3b4b59; }
body.dark .eye-view { background: #202b34; }
body.dark .eye-view-front { border-color: #3b4b59; }
body.dark .eye-view-title { color: #7eb7e8; }
body.dark .eye-view-sub,
body.dark .eye-view-hint { color: #b7c4cf; }
body.dark .ion-stage figcaption,
body.dark .eye-anatomy figcaption,
body.dark .eye-traces p { background: #1d252d; color: #b7c4cf; }
body.dark .dip-strength { background: rgba(29,37,45,.95); }
body.dark .map-facts div,
body.dark .polarity-rules div { background: #202b34; border-color: #3b4b59; }

@media (max-width: 860px) {
  .sum-population { grid-template-columns: 1fr; }
  .sum-neuron-field { min-height: 118px; }
  .sum-field-meter { display: none; }
  .polarity-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eye-lab-grid { grid-template-columns: 1fr; }
  .eye-anatomy-views { grid-template-columns: 1fr; }
  .eye-view-front { border-right: 0; border-top: 1px solid #d6e1e9; }
  body.dark .eye-view-front { border-top-color: #3b4b59; }
  .eye-view-profile { order: -1; }
  .eye-sagittal-svg { min-height: 320px; }
  .hunter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .visual-lab-header { align-items: stretch; flex-direction: column; }
  .visual-replay { width: 100%; }
  .visual-segment { width: 100%; grid-auto-flow: row; }
  .visual-segment button { border-right: 0; border-bottom: 1px solid #cbd9e5; }
  .visual-segment button:last-child { border-bottom: 0; }
  .ion-readout,
  .polarity-rules,
  .hunter-controls { grid-template-columns: 1fr; }
  .head-map-stage img { max-height: min(52vh, 420px); }
  .dip-strength small { margin-left: 0; }
  .dip-strength strong { font-size: 1.45rem; }
  .eye-slider { grid-template-columns: 1fr; }
  .eye-slider output { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sum-population.is-running .sum-neuron,
  .sum-population.is-running::after,
  .ion-lab.is-flowing .ion-particle { animation: none !important; }
  .eye-dipole { transition: none; }
  .eye-front-iris { transition: none; }
}