/* ==========================================================================
   Synthetic EEG pages (components/eeg-pages.js)

   Drawn in the theme's ink on the page's own surface, like the teaching
   figures, rather than on white paper. The channels carrying the finding are
   in the accent color, and the montage chips re-derive the same field.
   ========================================================================== */

.eegp {
  --eegp-grid: #efebf3;
  --eegp-grid-major: #ddd6e5;
  position: relative;
  color: var(--text-color);
}

body.dark .eegp {
  --eegp-grid: rgba(255, 255, 255, 0.07);
  --eegp-grid-major: rgba(255, 255, 255, 0.16);
}

.eegp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.4rem;
}

.eegp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.eegp-chip {
  appearance: none;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-color);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.eegp-chip:hover { border-color: var(--accent-color); }
.eegp-chip:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.eegp-chip.is-active { border-color: var(--action-bg); background: var(--action-bg); color: var(--action-ink, #fff); }

.eegp-key {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.eegp-swatch { display: inline-block; width: 18px; border-top: 2px solid var(--accent-color); }

.eegp-rule {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.eegp-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.eegp-svg { display: block; width: 100%; min-width: 640px; height: auto; overflow: visible; }
.eegp-svg text { font-family: inherit; }

.eegp-grid { stroke: var(--eegp-grid); stroke-width: 1; }
.eegp-grid.is-major { stroke: var(--eegp-grid-major); }
.eegp-tick { font-size: 11px; fill: var(--text-secondary); text-anchor: middle; font-variant-numeric: tabular-nums; }
.eegp-ch { font-size: 11.5px; font-weight: 600; fill: var(--text-secondary); text-anchor: end; }
.eegp-ch.is-key { fill: var(--accent-color); font-weight: 700; }

.eegp-trace { fill: none; stroke: var(--text-color); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; opacity: 0.88; }
.eegp-trace.is-key { stroke: var(--accent-color); stroke-width: 1.6; opacity: 1; }

/* technologist notes and the ECG channel, on the drawn page */
.eegp-note line { stroke: var(--accent-color); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.eegp-note text {
  font-size: 11.5px;
  font-weight: 700;
  fill: var(--accent-color);
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.eegp-trace.is-ecg { stroke: #c0392b; opacity: 0.85; }
body.dark .eegp-trace.is-ecg { stroke: #ff8a7a; }
/* As in the narrated videos: when a page has a finding, the channels that do
   not carry it step back, so the eye goes to the magenta ones. */
.eegp-svg.has-keys .eegp-trace:not(.is-key):not(.is-ecg) { stroke: #a39bb0; opacity: 1; }
.eegp-svg.has-keys .eegp-ch:not(.is-key) { fill: #8d859a; }
body.dark .eegp-svg.has-keys .eegp-trace:not(.is-key):not(.is-ecg) { stroke: #77708a; }
body.dark .eegp-svg.has-keys .eegp-ch:not(.is-key) { fill: #8d859a; }

.eegp-callout rect { fill: rgba(var(--accent-rgb), 0.06); stroke: var(--accent-color); stroke-width: 1.3; stroke-dasharray: 4 3; }
.eegp-callout .eegp-pill { fill: var(--accent-color); stroke: none; stroke-dasharray: none; }
.eegp-callout text {
  font-size: 12px;
  font-weight: 700;
  fill: #fff;
}
body.dark .eegp-callout text { fill: #1f1424; }

.eegp-cal path { fill: none; stroke: var(--text-color); stroke-width: 1.4; }
.eegp-cal text { font-size: 11px; fill: var(--text-secondary); }
.eegp-inset-mark { fill: none; stroke: var(--accent-color); stroke-width: 1.4; }
.eegp-cursor { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.eegp-hit { fill: transparent; cursor: crosshair; }

.eegp-inset { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--border-color); }
.eegp-inset-title { margin: 0 0 0.35rem; font-size: 0.8125rem; line-height: 1.45; color: var(--text-secondary); }
.eegp-inset-title strong { color: var(--text-color); }

.eegp-tip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-1);
  box-shadow: 0 6px 18px rgba(20, 12, 30, 0.14);
  pointer-events: none;
  font-size: 0.8125rem;
  line-height: 1.35;
  white-space: nowrap;
}

.eegp-tip[hidden] { display: none; }
.eegp-tip strong { color: var(--text-color); font-variant-numeric: tabular-nums; }
.eegp-tip span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.eegp-swipe { display: none; margin: 0 0 0.35rem; font-size: 0.8125rem; color: var(--text-secondary); }
.eegp.is-scrolling .eegp-swipe { display: block; }

/* In the Fundamentals explorer the page replaces the picture in the stage. */
.var-live[hidden] { display: none; }
.var-stage.is-live { padding: 0.85rem 0.95rem 0.5rem; background: var(--surface-1); overflow: visible; }
.var-stage.is-live .var-caption { margin-top: 0.6rem; color: var(--text-secondary); font-size: 0.8125rem; }

@media (max-width: 620px) {
  .var-stage.is-live { padding: 0.7rem 0.5rem 0.4rem; }
  .eegp-key { display: none; }
}