/* ==========================================================================
   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.4; opacity: 1; }

.eegp-callout rect { fill: rgba(var(--accent-rgb), 0.06); stroke: var(--accent-color); stroke-width: 1.2; stroke-dasharray: 4 3; }
.eegp-callout text {
  font-size: 12px;
  font-weight: 700;
  fill: var(--accent-color);
  paint-order: stroke;
  stroke: var(--surface-1);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.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; }
}