/* (c) 2026 Wayne State University. All rights reserved. */
.sp {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  background: var(--sl-bg);
  padding: calc(var(--tm-pad-top) + var(--sl-space-3)) max(var(--tm-pad-right), calc((100% - 720px) / 2))
    calc(var(--tm-pad-bottom) + var(--sl-space-5) + 48px) max(var(--tm-pad-left), calc((100% - 720px) / 2));
}
.sp-cite {
  margin: var(--sl-space-3) 0 0;
  font-size: var(--sl-fs-2);
  line-height: var(--sl-lh-3);
  color: var(--sl-text-2);
}
.sp-cite a { color: var(--sl-link); }
.sp-rule { margin: var(--sl-space-2) 0 0; font-size: var(--sl-fs-4); line-height: var(--sl-lh-4); font-weight: 600; }

.sp-fig {
  margin: var(--sl-space-3) 0 0;
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: var(--sl-surface);
}
.sp-fig__eeg { display: block; width: 100%; height: auto; }
.sp-fig__hint { margin: var(--sl-space-1) 0 0; font-size: var(--sl-fs-2); color: var(--sl-text-2); }

.sp-axis { stroke: var(--sl-border); stroke-width: 1; }
.sp-chan { font: 600 12px ui-monospace, monospace; fill: var(--sl-text-2); }
.sp-trace { fill: none; stroke: var(--sl-text-1); stroke-width: 1.5; stroke-linejoin: round; }
.sp-cal path { fill: none; stroke: var(--sl-text-2); stroke-width: 1; }
.sp-cal text { font-size: 12px; fill: var(--sl-text-2); }

.sp-spot { cursor: pointer; }
.sp-spot circle { fill: var(--sl-surface); stroke: var(--sl-cursor); stroke-width: 1.6; }
.sp-spot text { font-weight: 700; font-family: system-ui, sans-serif; fill: var(--sl-cursor); text-anchor: middle; dominant-baseline: central; }
.sp-spot:focus { outline: none; }
.sp-spot:focus-visible circle, .sp-spot[aria-pressed="true"] circle { fill: var(--sl-cursor); }
.sp-spot:focus-visible text, .sp-spot[aria-pressed="true"] text { fill: var(--sl-surface); }
.sp-fig__map .sp-spot circle { stroke-width: .05; }

.sp-hl { display: none; }
.sp-fig.is-met-1 .sp-hl--1, .sp-fig.is-met-2 .sp-hl--2, .sp-fig.is-met-3 .sp-hl--3,
.sp-fig.is-met-4 .sp-hl--4, .sp-fig.is-met-5 .sp-hl--5, .sp-fig.is-met-6 .sp-hl--6 { display: inline; }
.sp-hl circle { fill: none; stroke: var(--sl-cursor); stroke-width: 1.6; }
.sp-hl rect { fill: var(--sl-cursor); fill-opacity: .08; stroke: none; }
.sp-bracket { fill: none; stroke: var(--sl-cursor); stroke-width: 1.6; }
.sp-limb { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sp-limb--rise { stroke: var(--sl-warning-ink); }
.sp-limb--fall { stroke: var(--sl-info-ink); }
.sp-limb--after { stroke: var(--sl-cursor); }

.sp-map__line { fill: none; stroke: var(--sl-text-3); stroke-width: .05; }
.sp-map__neg { stop-color: var(--sl-info-ink); }
.sp-map__pos { stop-color: var(--sl-cursor); }
.sp-map__sign { font-weight: 700; font-family: system-ui, sans-serif; fill: var(--sl-text-1); text-anchor: middle; }
.sp-map__ring { fill: none; stroke: var(--sl-cursor) !important; stroke-width: .07 !important; }

.sp-count {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sl-space-1) var(--sl-space-2);
  margin: var(--sl-space-2) 0 0; padding: var(--sl-space-2) var(--sl-space-3);
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface);
}
.sp-count.is-epileptiform { border-color: var(--sl-cursor); }
.sp-count__dots { display: inline-flex; gap: 4px; }
.sp-count__dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid var(--sl-cursor); }
.sp-count__dots i.is-on { background: var(--sl-cursor); }
.sp-count__text { flex: 1 1 12em; font-size: var(--sl-fs-3, 15px); line-height: var(--sl-lh-3); font-weight: 600; }
.sp-count__clear {
  padding: 4px var(--sl-space-2); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md);
  background: var(--sl-surface); color: var(--sl-link); font: inherit; font-size: var(--sl-fs-2); cursor: pointer;
}
.sp-count__clear[hidden] { display: none; }

.sp-panel:empty { display: none; }
.sp-panel {
  margin: var(--sl-space-2) 0 0;
  padding: var(--sl-space-2) var(--sl-space-3);
  border-left: 3px solid var(--sl-cursor);
  background: var(--sl-surface);
  border-radius: var(--sl-radius-sm, 6px);
}
.sp-panel__title { margin: 0; font-size: var(--sl-fs-4); }
.sp-panel__text { margin: var(--sl-space-1) 0 0; font-size: var(--sl-fs-4); line-height: var(--sl-lh-4); }
.sp-panel__here { margin: var(--sl-space-1) 0 0; font-size: var(--sl-fs-3, 15px); line-height: var(--sl-lh-3); }
.sp-panel__acc { margin: var(--sl-space-1) 0 0; font-size: var(--sl-fs-2); line-height: var(--sl-lh-3); color: var(--sl-text-2); }

.sp-list { list-style: none; margin: var(--sl-space-3) 0 0; padding: 0; display: grid; gap: var(--sl-space-1);
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-item {
  display: flex; align-items: center; gap: var(--sl-space-1); width: 100%; min-height: 44px;
  padding: var(--sl-space-1) var(--sl-space-2); border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md);
  background: var(--sl-surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.sp-item[aria-pressed="true"] { border-color: var(--sl-cursor); }
.sp-item__n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1.6px solid var(--sl-cursor); color: var(--sl-cursor); font-weight: 700; font-size: var(--sl-fs-2);
}
.sp-item[aria-pressed="true"] .sp-item__n { background: var(--sl-cursor); color: var(--sl-surface); }
.sp-item__title { font-size: var(--sl-fs-2); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }

.sp-acc { margin: var(--sl-space-4) 0 0; }
.sp-acc__title { margin: 0; font-size: var(--sl-fs-5, 18px); }
.sp-acc__rows { margin: var(--sl-space-2) 0 0; }
.sp-acc__rows div { padding: var(--sl-space-1) 0; border-bottom: 1px solid var(--sl-border); }
.sp-acc__rows dt { font-weight: 600; }
.sp-acc__rows dd { margin: 2px 0 0; }
.sp-acc__reminder {
  margin: var(--sl-space-3) 0 0; padding: var(--sl-space-2) var(--sl-space-3);
  border: 1px solid var(--sl-border); border-radius: var(--sl-radius-md); background: var(--sl-surface-sunken);
  font-size: var(--sl-fs-3, 15px); line-height: var(--sl-lh-3);
}
.sp-acc__reminder::before { content: 'Remember: '; font-weight: 700; }
.sp-acc__refs { margin: var(--sl-space-2) 0 0; padding-left: 1.4em; font-size: var(--sl-fs-2); color: var(--sl-text-2); }
.sp-acc__refs a { color: var(--sl-link); }