/* ==========================================================================
   Redrawn Fundamentals figures: the ion-flow neuron (#ion-lab) and the dipole
   orientation explorer (.dip-explorer).

   Both used heavy 8–11 px strokes, saturated fills and oversized labels. They
   now share the drawing language of the newer figures: thin strokes, muted
   tissue colours, one sign convention (blue negative, red positive, green
   conventional current) and small, quiet labels. Loaded last so these rules
   replace the older ion and dipole rules without editing them.
   ========================================================================== */

#lead-simulator-container :is(#ion-lab, .dip-explorer, .nxc-fig) {
  --nx-ink: #24324a;
  --nx-muted: #5c6b7c;
  --nx-faint: #9aa7b5;
  --nx-grid: #e6eaf0;
  --nx-neg: #1f6fae;
  --nx-pos: #c0473a;
  --nx-neg-soft: rgba(31, 111, 174, 0.15);
  --nx-pos-soft: rgba(192, 71, 58, 0.14);
  --nx-neg-line: rgba(31, 111, 174, 0.38);
  --nx-pos-line: rgba(192, 71, 58, 0.36);
  --nx-current: #2e8a5f;
  --nx-tissue: #d9cde9;
  --nx-tissue-edge: #8a76a8;
  --nx-nucleus: #f4f0f9;
  --nx-skin: #efe2dd;
  --nx-skin-edge: #d8c3bb;
  --nx-bone: #e7e9ee;
  --nx-bone-edge: #c9ced8;
  --nx-metal: #dfe5ec;
  --nx-metal-edge: #4a5a6c;
  --nx-bouton: #f4c45a;
  --nx-bouton-edge: #b98522;
  --nx-stage: #fbfbfd;
  --nx-panel: #ffffff;
  --nx-csf: #eef3f8;
  --nx-wm: #f6f1e7;
  --nx-wm-edge: #e4dccb;
  --nx-gm: #e8def2;
}
body.dark #lead-simulator-container :is(#ion-lab, .dip-explorer, .nxc-fig) {
  --nx-ink: #ece7f5;
  --nx-muted: #bdb4d0;
  --nx-faint: #857a9c;
  --nx-grid: rgba(255, 255, 255, 0.08);
  --nx-neg: #82bdf0;
  --nx-pos: #f39686;
  --nx-neg-soft: rgba(130, 189, 240, 0.17);
  --nx-pos-soft: rgba(243, 150, 134, 0.16);
  --nx-neg-line: rgba(130, 189, 240, 0.42);
  --nx-pos-line: rgba(243, 150, 134, 0.42);
  --nx-current: #6fd3a2;
  --nx-tissue: #5b4b7a;
  --nx-tissue-edge: #b7a4dc;
  --nx-nucleus: #3b3054;
  --nx-skin: #5a4562;
  --nx-skin-edge: #6c5576;
  --nx-bone: #463d5f;
  --nx-bone-edge: #5c5274;
  --nx-metal: #4a4362;
  --nx-metal-edge: #d2cbe4;
  --nx-bouton: #e9b84e;
  --nx-bouton-edge: #f5d58e;
  --nx-stage: #2b2042;
  --nx-panel: #352a4f;
  --nx-csf: #31284d;
  --nx-wm: #3d3256;
  --nx-wm-edge: #4c406a;
  --nx-gm: #514272;
}

/* ---- Ion lab: frame -------------------------------------------------------- */
#lead-simulator-container #ion-lab .ion-stage {
  background: var(--nx-stage);
  border: 1px solid var(--border-color);
  border-radius: 14px;
}
#lead-simulator-container #ion-lab #ion-svg { max-width: 470px; width: 100%; }
#lead-simulator-container #ion-lab .ion-stage figcaption {
  background: transparent;
  border-top: 1px solid var(--border-color);
  color: var(--nx-muted);
  font-size: 0.86rem;
}
body.dark #lead-simulator-container #ion-lab .ion-stage figcaption { background: transparent; color: var(--nx-muted); }

/* ---- Ion lab: drawing -------------------------------------------------------- */
.nx-ion text { font-family: inherit; }
#lead-simulator-container #ion-lab .nx-skin { fill: none; stroke: var(--nx-skin); stroke-width: 13; stroke-linecap: round; }
#lead-simulator-container #ion-lab .nx-bone { fill: none; stroke: var(--nx-bone); stroke-width: 10; stroke-linecap: round; }

#lead-simulator-container #ion-lab .nx-zone ellipse { transition: fill .25s ease, stroke .25s ease; }
#lead-simulator-container #ion-lab .nx-zone-core { stroke: none; fill: transparent; }
#lead-simulator-container #ion-lab .nx-zone-ring { fill: none; stroke-width: 1; stroke-dasharray: 2 4; stroke: transparent; }
#lead-simulator-container #ion-lab .nx-zone-ring-far { opacity: .55; }
#lead-simulator-container #ion-lab .nx-zone.is-neg .nx-zone-core { fill: var(--nx-neg-soft); }
#lead-simulator-container #ion-lab .nx-zone.is-pos .nx-zone-core { fill: var(--nx-pos-soft); }
#lead-simulator-container #ion-lab .nx-zone.is-neg .nx-zone-ring { stroke: var(--nx-neg-line); }
#lead-simulator-container #ion-lab .nx-zone.is-pos .nx-zone-ring { stroke: var(--nx-pos-line); }

#lead-simulator-container #ion-lab .nx-dendrite { fill: none; stroke: var(--nx-tissue-edge); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
#lead-simulator-container #ion-lab .nx-axon { fill: none; stroke: var(--nx-tissue-edge); stroke-width: 2.2; stroke-linecap: round; }
#lead-simulator-container #ion-lab :is(.nx-shaft, .nx-soma) { fill: var(--nx-tissue); stroke: var(--nx-tissue-edge); stroke-width: 1.4; stroke-linejoin: round; }
#lead-simulator-container #ion-lab .nx-nucleus { fill: var(--nx-nucleus); stroke: var(--nx-tissue-edge); stroke-width: 1; }

#lead-simulator-container #ion-lab .nx-current { fill: none; stroke: var(--nx-current); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 5; opacity: 1; }
#lead-simulator-container #ion-lab .nx-current-return { stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .85; }
#lead-simulator-container #ion-lab .nx-legend .nx-current { stroke-dasharray: none; }
#lead-simulator-container #ion-lab .nx-arrowhead { fill: var(--nx-current); }
#lead-simulator-container #ion-lab.is-flowing :is(.ion-loop, .ion-return) { animation: nx-march 1.1s linear infinite; animation-direction: normal; }
@keyframes nx-march { to { stroke-dashoffset: -22; } }

#lead-simulator-container #ion-lab .nx-charge-set text { font-size: 17px; font-weight: 700; text-anchor: middle; }
#lead-simulator-container #ion-lab .nx-charge-set.is-neg text { fill: var(--nx-neg); }
#lead-simulator-container #ion-lab .nx-charge-set.is-pos text { fill: var(--nx-pos); }
#lead-simulator-container #ion-lab .nx-hidden { display: none; }

#lead-simulator-container #ion-lab .nx-wire { fill: none; stroke: var(--nx-metal-edge); stroke-width: 1.6; stroke-linecap: round; }
#lead-simulator-container #ion-lab .nx-cup { fill: var(--nx-metal); stroke: var(--nx-metal-edge); stroke-width: 1.4; stroke-linejoin: round; }
#lead-simulator-container #ion-lab .nx-rim { fill: var(--nx-panel); stroke: var(--nx-metal-edge); stroke-width: 1.4; }

#lead-simulator-container #ion-lab #ion-badge circle { stroke: var(--nx-stage); stroke-width: 2; transition: fill .2s ease; }
#lead-simulator-container #ion-lab #ion-badge text { fill: #fff; font-size: 17px; font-weight: 700; }
#lead-simulator-container #ion-lab #ion-badge.is-negative circle { fill: var(--nx-neg); }
#lead-simulator-container #ion-lab #ion-badge.is-positive circle { fill: var(--nx-pos); }
body.dark #lead-simulator-container #ion-lab #ion-badge text { fill: #1d1530; }

#lead-simulator-container #ion-lab .nx-kicker { fill: var(--nx-muted); font-size: 12.5px; font-weight: 500; }
#lead-simulator-container #ion-lab .nx-label { fill: var(--nx-ink); font-size: 15px; font-weight: 700; }
#lead-simulator-container #ion-lab .nx-label.is-neg { fill: var(--nx-neg); }
#lead-simulator-container #ion-lab .nx-label.is-pos { fill: var(--nx-pos); }
#lead-simulator-container #ion-lab .nx-leader { fill: none; stroke: var(--nx-faint); stroke-width: 1; }
#lead-simulator-container #ion-lab .nx-legend text { fill: var(--nx-muted); font-size: 12px; }

#lead-simulator-container #ion-lab .nx-synapse-halo { fill: var(--nx-bouton); fill-opacity: .14; stroke: var(--nx-bouton-edge); stroke-width: 1; stroke-dasharray: 2 3; }
#lead-simulator-container #ion-lab .nx-presyn { fill: none; stroke: var(--nx-bouton-edge); stroke-width: 2; stroke-linecap: round; }
#lead-simulator-container #ion-lab .nx-bouton { fill: var(--nx-bouton); stroke: var(--nx-bouton-edge); stroke-width: 1.3; }

#lead-simulator-container #ion-lab .nx-ion-particle circle { fill: var(--nx-panel); stroke: var(--nx-neg); stroke-width: 1.5; }
#lead-simulator-container #ion-lab.is-ipsp .nx-ion-particle circle { stroke: #7656b7; }
body.dark #lead-simulator-container #ion-lab.is-ipsp .nx-ion-particle circle { stroke: #c3a8f2; }
#lead-simulator-container #ion-lab .nx-ion-particle text { fill: var(--nx-ink); font-size: 8px; font-weight: 700; }

/* ---- Ion lab: the EEG result ---------------------------------------------- */
#lead-simulator-container #ion-lab .nx-signal {
  background: var(--nx-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.9rem 0.9rem 0.8rem;
}
body.dark #lead-simulator-container #ion-lab .nx-signal { background: var(--nx-panel); }
#lead-simulator-container #ion-lab .nx-signal h4 { font-size: 1.05rem; color: var(--nx-ink); }
#lead-simulator-container #ion-lab .nx-signal p { color: var(--nx-muted); font-size: 0.82rem; }
#lead-simulator-container #ion-lab .nx-signal-svg { display: block; width: 100%; max-width: 260px; margin: 0.35rem auto 0.2rem; }
#lead-simulator-container #ion-lab .nx-signal-svg text { font-family: inherit; }
#lead-simulator-container #ion-lab .nx-trace-grid path { fill: none; stroke: var(--nx-grid); stroke-width: 1; }
#lead-simulator-container #ion-lab .nx-axis path { fill: none; stroke: var(--nx-faint); stroke-width: 1.2; }
#lead-simulator-container #ion-lab .nx-axis-arrow { fill: var(--nx-faint); }
#lead-simulator-container #ion-lab .nx-axis text { fill: var(--nx-muted); font-size: 13px; font-weight: 700; }
#lead-simulator-container #ion-lab .nx-baseline { stroke: var(--nx-faint); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
#lead-simulator-container #ion-lab #ion-wave { fill: none; stroke: var(--nx-neg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#lead-simulator-container #ion-lab.is-surface-positive #ion-wave { stroke: var(--nx-pos); }
#lead-simulator-container #ion-lab .nx-trace-note { font-size: 12.5px; font-weight: 700; }
#lead-simulator-container #ion-lab .nx-trace-note.is-negative { fill: var(--nx-neg); }
#lead-simulator-container #ion-lab .nx-trace-note.is-positive { fill: var(--nx-pos); }

@media (max-width: 650px) {
  #lead-simulator-container #ion-lab .nx-label { font-size: 16px; }
  #lead-simulator-container #ion-lab .nx-kicker { font-size: 13.5px; }
  #lead-simulator-container #ion-lab .nx-signal { padding: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  #lead-simulator-container #ion-lab :is(.ion-loop, .ion-return) { animation: none !important; }
}

/* ---- Dipole explorer: panels ---------------------------------------------- */
#lead-simulator-container .dip-explorer :is(.dip-anatomy, .dip-stage) {
  background: var(--nx-stage);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.8rem 0.85rem 0.75rem;
}
body.dark #lead-simulator-container .dip-explorer :is(.dip-anatomy, .dip-stage) { background: var(--nx-stage); border-color: var(--border-color); }
#lead-simulator-container .dip-explorer .dip-panel-title { font-size: 0.95rem; font-weight: 650; color: var(--nx-ink); }
#lead-simulator-container .dip-explorer .dip-panel-subtitle { color: var(--nx-muted); margin: 0.2rem 0 0.55rem; }
#lead-simulator-container .dip-explorer .dip-negative { color: var(--nx-neg); }
#lead-simulator-container .dip-explorer .dip-positive { color: var(--nx-pos); }
#lead-simulator-container .dip-explorer .dip-panels figcaption { color: var(--nx-muted); border-top-color: var(--border-color); padding-top: 0.6rem; }
#lead-simulator-container .dip-explorer .dip-fold { padding: 0.15rem 0 0.7rem; }
#lead-simulator-container .dip-explorer .dip-fold-svg { max-height: 320px; border-radius: 8px; }
#lead-simulator-container .dip-explorer .dip-slider-row output {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--nx-ink);
}

/* ---- Dipole explorer: the fold -------------------------------------------- */
.dip-fold-svg text { font-family: inherit; }
#lead-simulator-container .dip-explorer .dip-bg { fill: var(--nx-stage); }
#lead-simulator-container .dip-explorer .dip-csf { fill: var(--nx-csf); }
#lead-simulator-container .dip-explorer .dip-wm { fill: var(--nx-wm); stroke: none; }
#lead-simulator-container .dip-explorer .dip-cortex { fill: none; stroke: var(--nx-gm, #e9e0f2); stroke-linejoin: round; stroke-linecap: butt; }
#lead-simulator-container .dip-explorer .dip-pial-edge { fill: none; stroke: var(--nx-tissue-edge); stroke-width: 1.1; stroke-linejoin: round; }
#lead-simulator-container .dip-explorer .dip-gw-edge { fill: none; stroke: var(--nx-wm-edge); stroke-width: 1; stroke-linejoin: round; }
#lead-simulator-container .dip-explorer .dip-scalp { stroke: var(--nx-skin); stroke-width: 11; stroke-linecap: butt; }
#lead-simulator-container .dip-explorer .dip-skull { stroke: var(--nx-bone); stroke-width: 11; stroke-linecap: butt; }

#lead-simulator-container .dip-explorer .dipcell :is(.dipcell-apical, .dipcell-basal) { fill: none; stroke: var(--nx-tissue-edge); stroke-width: 1; stroke-linecap: round; opacity: .85; }
#lead-simulator-container .dip-explorer .dipcell .dipcell-soma { fill: var(--nx-tissue); stroke: var(--nx-tissue-edge); stroke-width: .9; stroke-linejoin: round; }
#lead-simulator-container .dip-explorer .dipcell.is-hidden { opacity: 0; }
#lead-simulator-container .dip-explorer .dipcell.is-active :is(.dipcell-apical, .dipcell-basal) { stroke: var(--nx-ink); stroke-width: 1.1; opacity: 1; }
#lead-simulator-container .dip-explorer .dipcell.is-active .dipcell-soma { fill: var(--nx-tissue-edge); stroke: var(--nx-ink); stroke-width: .9; }

#lead-simulator-container .dip-explorer .dip-active-halo { fill: var(--nx-bouton); fill-opacity: .16; stroke: var(--nx-bouton-edge); stroke-width: 1; stroke-dasharray: 2 3; }
#lead-simulator-container .dip-explorer .dip-axis { stroke: var(--nx-ink); stroke-width: 1.4; stroke-linecap: round; }
#lead-simulator-container .dip-explorer .dip-arrow { stroke: var(--nx-neg); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; }
#lead-simulator-container .dip-explorer .dip-arrow-head { fill: var(--nx-neg); }
#lead-simulator-container .dip-explorer .dip-pole text { fill: var(--nx-stage); font-size: 10px; font-weight: 700; }
#lead-simulator-container .dip-explorer .dip-pole.is-neg circle { fill: var(--nx-neg); }
#lead-simulator-container .dip-explorer .dip-pole.is-pos circle { fill: var(--nx-pos); }

#lead-simulator-container .dip-explorer .dip-lbl { fill: var(--nx-ink); font-family: inherit; font-size: 11.5px; font-weight: 600; }
#lead-simulator-container .dip-explorer .dip-lbl-quiet { fill: var(--nx-muted); font-weight: 500; font-size: 10.5px; }
#lead-simulator-container .dip-explorer .dip-label-leader { stroke: var(--nx-faint); stroke-width: 1; fill: none; }

/* ---- Bipolar chain: the shared electrode reverses -------------------------- */
#lead-simulator-container .bipolar-logic-stack .nxc-fig {
  display: block;
  width: min(100%, 520px);
  margin: 0.5rem auto 0;
  padding: 0.85rem 0.9rem 0.75rem;
  background: var(--nx-stage);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-sizing: border-box;
}
#lead-simulator-container .nxc-fig .nxc-title { margin: 0; font-size: 0.95rem; font-weight: 650; line-height: 1.4; color: var(--nx-ink); }
#lead-simulator-container .nxc-fig .nxc-subtitle { margin: 0.15rem 0 0.4rem; font-size: 0.8rem; line-height: 1.45; color: var(--nx-muted); }
#lead-simulator-container .nxc-fig figcaption {
  margin: 0.4rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--nx-muted);
}
.nxc-svg { display: block; width: 100%; height: auto; }
.nxc-svg text { font-family: inherit; }
.nxc-fig .nxc-key { fill: var(--nx-muted); font-size: 11px; }
.nxc-fig .nxc-link { fill: none; stroke: var(--nx-faint); stroke-width: 2; opacity: .6; }
.nxc-fig .nxc-joint { fill: var(--nx-faint); }
.nxc-fig .nxc-leader { fill: none; stroke: var(--nx-faint); stroke-width: 1; stroke-dasharray: 1.5 3; }
.nxc-fig .nxc-guide { fill: none; stroke: var(--nx-neg); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.nxc-fig .nxc-base { stroke: var(--nx-grid); stroke-width: 1; }
.nxc-fig .nxc-trace { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nxc-fig .nxc-trace.is-neg { stroke: var(--nx-neg); }
.nxc-fig .nxc-trace.is-pos { stroke: var(--nx-pos); }
.nxc-fig .nxc-trace.is-quiet { stroke: var(--nx-muted); stroke-width: 1.6; }
.nxc-fig .nxc-ch { fill: var(--nx-ink); font-size: 12px; font-weight: 700; }
.nxc-fig .nxc-math { fill: var(--nx-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.nxc-fig .nxc-result { font-weight: 700; }
.nxc-fig .nxc-result.is-neg { fill: var(--nx-neg); }
.nxc-fig .nxc-result.is-pos { fill: var(--nx-pos); }
.nxc-fig .nxc-result.is-quiet { fill: var(--nx-ink); }
.nxc-fig .nxc-note { fill: var(--nx-ink); font-size: 11px; font-weight: 700; }
.nxc-fig .nxc-disc { fill: var(--nx-stage); stroke: var(--nx-neg); stroke-width: 1.3; }
.nxc-fig .nxc-fill { fill: var(--nx-neg); }
.nxc-fig .nxc-electrode text { fill: var(--nx-ink); font-size: 10px; font-weight: 700; }
.nxc-fig .nxc-electrode.is-max text { fill: var(--nx-stage); }
.nxc-fig .nxc-electrode.is-max .nxc-disc { stroke-width: 2; }
.nxc-fig .nxc-volt { fill: var(--nx-neg); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nxc-fig .nxc-volt.is-max { font-weight: 800; }
@media (max-width: 650px) {
  #lead-simulator-container .bipolar-logic-stack .nxc-fig { padding: 0.7rem 0.55rem 0.65rem; }
  .nxc-fig .nxc-ch { font-size: 13px; }
  .nxc-fig :is(.nxc-math, .nxc-volt, .nxc-note, .nxc-key) { font-size: 11.5px; }
  .nxc-fig .nxc-electrode text { font-size: 10.5px; }
}