/* ─── All design tokens (colors, fonts, spacing, etc.) now live in
       /viewer/theme.css — edit there to change them globally.
       Legacy aliases (--bg-0, --text-1, --st-*, etc.) are kept in
       theme.css so existing rules in this file continue to work. ─────── */

* { box-sizing: border-box; }
/* min-height (not fixed height) so content longer than the viewport scrolls.
   Previously fixed at 100% — broke when the upload page got a subject form. */
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}

/* ─── Atmospheric background ──────────────────────────────────────────── */
.mesh {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 600px at 12% 0%, rgba(0, 153, 196, 0.06), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(91, 76, 224, 0.05), transparent 60%),
    radial-gradient(500px 400px at 50% 40%, rgba(15, 169, 124, 0.02), transparent 60%);
}
.grid-bg {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(13, 15, 20, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 15, 20, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 0%, transparent 80%);
}

/* ─── Topbar ──────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  border-bottom: 1px solid rgba(13, 15, 20, 0.05);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.7);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: block; }
.brand-text { display: flex; align-items: baseline; gap: 8px; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: var(--text-1); }
.brand-dot { color: var(--text-4); }
.brand-tag { font-size: 13px; color: var(--text-3); font-weight: 400; }
.topbar-right { display: flex; gap: 12px; align-items: center; }

.pill {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.pill-ok   { color: var(--ok);     border-color: rgba(15, 169, 124, 0.25); background: rgba(15, 169, 124, 0.06); }
.pill-warn { color: var(--warn);   border-color: rgba(214, 139, 0, 0.25);  background: rgba(214, 139, 0, 0.06); }
.pill-err  { color: var(--danger); border-color: rgba(214, 68, 63, 0.25);  background: rgba(214, 68, 63, 0.06); }

/* ─── Stage / state machine ───────────────────────────────────────────── */
.stage {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 24px 160px;  /* bottom padding clears the fixed footer */
}
.state { display: none; animation: fadeUp 0.5s ease both; }
.state.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero { text-align: center; margin-bottom: 36px; }
.hero h1 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  color: var(--text-1);
  background: linear-gradient(180deg, #0d0f14 0%, #3a4150 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lede { color: var(--text-3); font-size: 15px; margin: 0; font-weight: 400; }

/* ─── Dropzone ────────────────────────────────────────────────────────── */
.dropzone {
  display: block;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--border-strong);
  background: var(--surface-1);
  padding: 64px 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(.2,.7,.3,1);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.dropzone::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(600px 220px at 50% 100%, rgba(91, 76, 224, 0.06), transparent 60%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.dropzone:hover,
.dropzone.drag {
  border-color: var(--accent-2);
  background: linear-gradient(180deg, rgba(91, 76, 224, 0.02) 0%, rgba(0, 153, 196, 0.02) 100%);
  box-shadow: var(--shadow-glow);
}
.dropzone:hover::before,
.dropzone.drag::before { opacity: 1; }

.dz-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dz-icon { color: var(--text-3); transition: color 0.25s; }
.dropzone:hover .dz-icon { color: var(--accent-2); }
.dz-title { font-weight: 500; font-size: 16px; color: var(--text-1); }
.dz-sub { font-size: 13px; color: var(--text-3); }
.link { color: var(--accent-2); text-decoration: none; font-weight: 500; }

.legend {
  display: flex; justify-content: center; gap: 28px;
  margin-top: 32px;
  font-size: 12px;
  color: var(--text-3);
}
.legend > div { display: flex; align-items: center; gap: 8px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-4); }
.dot-1 { background: var(--accent); }
.dot-2 { background: var(--accent-2); }
.dot-3 { background: var(--ok); }

/* ─── File card ───────────────────────────────────────────────────────── */
.file-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.file-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: var(--accent-2);
}
.file-meta { flex: 1; min-width: 0; }
.file-name {
  font-weight: 500; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-1);
}
.file-stats {
  margin-top: 4px;
  font-size: 12px; color: var(--text-3);
  font-family: var(--font-mono);
}
.sep { color: var(--text-4); margin: 0 6px; }

.ghost-btn {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.ghost-btn:hover { color: var(--text-1); border-color: var(--accent-2); background: rgba(91, 76, 224, 0.04); }

/* ═══════════ Subject metadata form (upload state) ═══════════ */
.subject-form {
  margin-top: 22px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
.subject-form-head {
  margin-bottom: 16px;
}
.subject-form-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.subject-form-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-3);
}
.subject-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.sf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.sf-field-wide { grid-column: 1 / -1; }
.sf-field-eyes { grid-column: 1 / -1; }
.sf-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0;
}
.sf-field input[type="text"],
.sf-field input[type="date"],
.sf-field select {
  width: 100%;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.sf-field input:focus,
.sf-field select:focus {
  border-color: var(--accent-1, #00e0ff);
  background: rgba(0, 0, 0, 0.40);
}
.sf-field input::placeholder { color: rgba(255,255,255,0.30); }
.sf-hint {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}
.sf-radio-row {
  display: flex;
  gap: 22px;
  padding: 4px 0;
}
.sf-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
}
.sf-radio input { accent-color: var(--accent-1, #00e0ff); }
.subject-form-warn {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(248, 112, 96, 0.10);
  border: 1px solid rgba(248, 112, 96, 0.30);
  border-radius: 8px;
  color: #ffb3a8;
  font-size: 12.5px;
}

.actions { margin-top: 28px; text-align: center; }
.actions-sub { margin-top: 14px; font-size: 12px; color: var(--text-3); }

.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 500; font-size: 14px;
  color: #ffffff;
  background: var(--accent-grad);
  border: none;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.25s;
  box-shadow: 0 10px 28px -10px rgba(91, 76, 224, 0.5), 0 0 0 1px rgba(255,255,255,0.2) inset;
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -10px rgba(91, 76, 224, 0.6); }
.cta-btn:active { transform: translateY(0); }
.cta-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ─── Progress card ──────────────────────────────────────────────────── */
.progress-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  box-shadow: var(--shadow-1);
}
.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.step-label { font-weight: 500; font-size: 15px; color: var(--text-1); }
.step-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }

.progress-track {
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--accent-grad);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 10px rgba(0, 153, 196, 0.35);
}

.step-list {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 6px;
}
.step-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--text-3);
  padding: 8px 4px;
}
.step-list li .marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  background: var(--surface-1);
}
.step-list li.done { color: var(--text-1); }
.step-list li.done .marker { background: var(--ok); border-color: var(--ok); }
.step-list li.done .marker::after {
  content: ""; width: 5px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.step-list li.active { color: var(--text-1); }
.step-list li.active .marker {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(91, 76, 224, 0.1);
}
.step-list li.active .marker::after {
  content: ""; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.6); }
}
.step-list li .elapsed {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
}
.step-list li.done .elapsed { color: var(--text-3); }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; gap: 8px;
  padding: 16px;
  font-size: 11px; color: var(--text-4);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, transparent, rgba(251, 251, 253, 0.9) 60%);
  pointer-events: none;
}
.footer-sep { color: var(--text-4); }

/* ─── Results page ────────────────────────────────────────────────────── */

.subject-name {
  font-size: 32px; font-weight: 600;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #0d0f14 0%, #3a4150 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0;
}
.subject-meta {
  margin-top: 6px;
  font-size: 13px; color: var(--text-3);
  font-family: var(--font-mono);
}
.results-actions { display: flex; gap: 10px; align-items: center; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 22px;
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
}
.card-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.card-icon { color: var(--text-4); }
.card-big {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.card-sub { font-size: 12px; color: var(--text-3); }
.card-rows { display: grid; gap: 8px; font-size: 13px; }
.card-row { display: flex; justify-content: space-between; gap: 12px; }
.card-row .k { color: var(--text-3); }
.card-row .v { color: var(--text-1); font-family: var(--font-mono); font-size: 12px; }

.card-wide { grid-column: 1 / -1; }

.bar-row { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.bar-row .lbl { width: 56px; color: var(--text-3); font-family: var(--font-mono); }
.bar-row .bar-bg {
  flex: 1; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden;
}
.bar-row .bar {
  height: 100%; border-radius: 999px;
  background: var(--accent-grad);
}
.bar-row .val { color: var(--text-2); font-family: var(--font-mono); width: 60px; text-align: right; }

.quality-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.qtag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  color: var(--text-2);
  background: var(--surface-1);
}
.qtag-good { color: var(--ok); border-color: rgba(15, 169, 124, 0.3); background: rgba(15, 169, 124, 0.05); }
.qtag-poor { color: var(--warn); border-color: rgba(214, 139, 0, 0.3); background: rgba(214, 139, 0, 0.05); }
.qtag-disc { color: var(--danger); border-color: rgba(214, 68, 63, 0.3); background: rgba(214, 68, 63, 0.05); }

.skel { color: var(--text-4); font-size: 13px; }

/* small responsive */
@media (max-width: 600px) {
  .hero h1 { font-size: 28px; }
  .legend { flex-direction: column; gap: 10px; }
  .subject-name { font-size: 24px; }
}}

/* ═══ Timeline workspace (compact / clinical) ════════════════════════════ */
body.tl-body {
  background: var(--nm-color-bg);
  color: var(--nm-color-ink);
  /* page scrolls naturally when viewport is shorter than the workspace */
  overflow-y: auto;
  min-height: 100vh;
}
body.tl-body .footer { display: none; }
body.tl-body .topbar    { display: none; }    /* legacy topbar — superseded by shell sidebar */
body.tl-body .tl-subhead { display: none; }

/* The shell's main column on the timeline page stretches to at least viewport
   height. When the viewport is taller, the trace pane (flex:1) absorbs the
   extra space. When shorter, the trace pane keeps its min-height and the
   document scrolls. */
body.tl-body .nm-shell-main {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Inline page header (replaces removed topbar + subhead) */
.tl-page-head {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--nm-color-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: var(--nm-color-card);
  flex-shrink: 0;
}
.tl-page-head-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tl-page-title {
  margin: 0;
  font-family: var(--nm-font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--nm-color-ink);
  line-height: 1.1;
}
.tl-page-meta {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  color: var(--nm-color-ink-2);
  letter-spacing: 0;
}
.tl-page-head-r { display: flex; align-items: center; gap: 10px; }

.tl-app2 {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 10px 16px 12px;
  flex: 1;
  min-height: 0;
}

/* ─── Stats row (horizontal grid of small cards) ────────────────────── */
.tl-summary {
  display: flex; flex-direction: column; gap: 8px;
  flex-shrink: 0;
}
.tl-stats,
.tl-statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.tl-stat-card,
.tl-stat {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.tl-stat-card-head { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.tl-stat-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.tl-stat-name {
  font-size: 10.5px; font-weight: 500; color: var(--text-2);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-stat-num {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ─── Trace card ─────────────────────────────────────────────────────── */
/* Minimum trace area: 21 channels × ~22 px = 462 px, + axis (18) + meta (22)
   ≈ 502 px. Round to 520 px so EVERY channel is legible even on short laptops. */
.tl-trace-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 520px;
}
.tl-trace-wrap {
  position: relative;
  flex: 1;
  min-height: 462px;   /* fits 21 channels at 22 px each */
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(13,15,20,0.012) 6px 7px),
    linear-gradient(180deg, #faf9f0 0%, #fdfdf3 100%);
}
.tl-trace-wrap canvas { display: block; }
.tl-cursor {
  position: absolute; top: 0;
  width: 1px;
  background: var(--accent-2);
  pointer-events: none;
  display: none;
}
/* Sits at the top of the (scrollable) wrap and moves with the canvas via
   scrollTop: we apply position:absolute and set top dynamically on scroll. */
.tl-bandlayer {
  position: absolute; left: 0; right: 0; top: 0;
  pointer-events: none;
}
.tl-bandlayer > .tl-band { pointer-events: auto; }
.tl-band {
  position: absolute; top: 0; bottom: 0;
  pointer-events: auto;
  cursor: pointer;
}
.tl-band-fill {
  position: absolute; inset: 0;
  opacity: 0.14;
  transition: opacity 0.15s;
}
.tl-band-stripe {
  position: absolute; left: 0; right: 0; top: 0; height: 16px;
  display: flex; align-items: center;
  padding: 0 5px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0.92;
}
.tl-band:hover .tl-band-fill { opacity: 0.22; }
.tl-band.selected .tl-band-fill { opacity: 0.28; }
.tl-band.selected .tl-band-stripe { opacity: 1; }
.tl-band.selected {
  box-shadow: inset 0 0 0 1.5px var(--accent-2);
}

.tl-axis {
  position: relative;
  height: 18px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.tl-axis-tick {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding-left: 4px;
  border-left: 1px solid rgba(13, 15, 20, 0.08);
  pointer-events: none;
}
.tl-meta {
  padding: 4px 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ─── Scrubber ───────────────────────────────────────────────────────── */
.tl-scrubber-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: 4px 10px 2px;
}
.tl-scrubber-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--text-3);
  margin-bottom: 2px;
}
.tl-scrub-controls { display: flex; align-items: center; gap: 8px; }
.ghost-btn.small {
  padding: 3px 9px; font-size: 12px; min-width: 26px;
  height: 24px; line-height: 1; justify-content: center;
}
.tl-zoom-val {
  min-width: 38px; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
}
.tl-gain-wrap { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.tl-ctrl-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.tl-gain-wrap input[type="range"] {
  width: 90px; appearance: none; height: 3px; background: var(--surface-3);
  border-radius: 999px; outline: none;
}
.tl-gain-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-2); cursor: pointer;
}
.tl-gain-val { font-family: var(--font-mono); font-size: 10px; color: var(--text-2); width: 28px; }

.tl-scrubber {
  position: relative;
  height: 26px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: crosshair;
  overflow: hidden;
}
.tl-scrub-ticks { position: absolute; inset: 0 0 11px 0; pointer-events: none; }
.tl-scrub-tick {
  position: absolute; top: 4px; bottom: 4px;
  width: 2px;
  border-radius: 1px;
}
.tl-scrub-tick.selected {
  box-shadow: 0 0 0 1px var(--accent-2);
  background: var(--accent-2) !important;
  width: 3px;
}
.tl-viewport {
  position: absolute; top: 1px; bottom: 12px;
  background: rgba(13, 15, 20, 0.06);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: grab;
  transition: background 0.15s;
}
.tl-viewport:hover { background: rgba(13, 15, 20, 0.1); }
.tl-viewport:active { cursor: grabbing; }
.tl-vp-handle {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 14px;
  background: var(--text-3);
  opacity: 0.4;
  border-radius: 2px;
}
.tl-scrub-axis {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--text-3);
  pointer-events: none;
}
.tl-scrub-axis span {
  position: absolute; bottom: 1px;
  transform: translateX(-50%);
}

/* ─── Mark detail card ───────────────────────────────────────────────── */
.tl-detailcard {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
}
.tl-detail-body { padding: 4px 14px 4px; }
.tl-detail-empty {
  color: var(--text-3); font-size: 11px;
  text-align: center; padding: 2px 0;
}
.tl-detail-active { display: grid; gap: 8px; }
.tl-detail-head {
  display: grid;
  grid-template-columns: 16px auto 1fr;
  align-items: center; gap: 10px;
}
.tl-detail-swatch {
  width: 14px; height: 14px; border-radius: 4px;
}
.tl-detail-title { display: flex; align-items: baseline; gap: 12px; }
.tl-detail-type {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.tl-detail-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  justify-self: end;
}

.tl-detail-grid {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 2px 14px;
  padding-left: 26px;
  font-size: 12.5px;
  max-width: 540px;
}
.tl-detail-k { color: var(--text-3); padding: 2px 0; }
.tl-detail-v {
  color: var(--text-1);
  font-family: var(--font-mono); font-size: 12px;
  padding: 2px 0;
}

.tl-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.tl-nav-btn {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--nm-color-ink-2);
  background: var(--nm-color-card);
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.tl-nav-btn:hover { background: var(--nm-color-paper); color: var(--nm-color-ink); }
.tl-nav-btn:active { background: var(--nm-color-line); }
.tl-nav-btn:disabled { color: var(--nm-color-ink-4); cursor: not-allowed; background: var(--nm-color-card); }

/* ─── Pale-Stone overrides for buttons, chips, inputs, viewport, etc. ── */
body.tl-body .ghost-btn {
  background: var(--nm-color-card);
  border-color: var(--nm-color-line);
  color: var(--nm-color-ink-2);
}
body.tl-body .ghost-btn:hover {
  background: var(--nm-color-paper);
  border-color: var(--nm-color-ink);
  color: var(--nm-color-ink);
}
body.tl-body .ghost-btn.small {
  padding: 5px 11px;
  font-size: 12px;
  height: 28px;
}

body.tl-body .pill            { background: var(--nm-color-card); border-color: var(--nm-color-line); color: var(--nm-color-ink-2); }
body.tl-body .pill-ok         { color: var(--nm-color-good); border-color: rgba(90,122,52,0.30); background: rgba(90,122,52,0.06); }
body.tl-body .pill-err        { color: var(--nm-color-strong); border-color: rgba(108,28,28,0.30); background: rgba(108,28,28,0.06); }

/* Filter chips (search, type, severity) */
body.tl-body .tl-input {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  color: var(--nm-color-ink);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.tl-body .tl-input:focus {
  border-color: var(--nm-color-ink);
  box-shadow: 0 0 0 3px rgba(11,18,32,0.06);
}
body.tl-body .tl-chip-group {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 999px;
  padding: 3px;
  display: inline-flex;
  gap: 1px;
}
body.tl-body .chip {
  background: transparent;
  color: var(--nm-color-ink-3);
  font-family: var(--nm-font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  display: inline-flex; align-items: center; gap: 6px;
}
body.tl-body .chip:hover  { background: var(--nm-color-paper); color: var(--nm-color-ink); }
body.tl-body .chip.active {
  background: var(--nm-color-ink);
  color: var(--nm-color-card);
  box-shadow: 0 1px 2px rgba(11,18,32,0.15);
}

/* Scrubber viewport handle (the drag-rectangle on the overview strip) */
body.tl-body .tl-viewport {
  background: rgba(11,18,32,0.07);
  border: 1px solid var(--nm-color-line-2);
  border-radius: 4px;
}
body.tl-body .tl-viewport:hover  { background: rgba(11,18,32,0.12); }
body.tl-body .tl-vp-handle       { background: var(--nm-color-ink-3); opacity: 0.5; }
body.tl-body .tl-scrubber        { background: var(--nm-color-paper); border-color: var(--nm-color-line); }
body.tl-body .tl-scrub-axis      { color: var(--nm-color-ink-3); }

/* Gain slider */
body.tl-body .tl-gain-wrap {
  border-left: 1px solid var(--nm-color-line);
  padding-left: 12px; margin-left: 8px;
}
body.tl-body .tl-ctrl-label { color: var(--nm-color-ink-3); font-size: 10px; }
body.tl-body .tl-gain-wrap input[type="range"] {
  width: 90px; height: 4px; appearance: none; outline: none;
  background: var(--nm-color-line); border-radius: 999px;
}
body.tl-body .tl-gain-wrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--nm-color-ink);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(11,18,32,0.25);
}
body.tl-body .tl-zoom-val { color: var(--nm-color-ink); font-family: var(--nm-font-mono); }

/* Stat cards inner */
body.tl-body .tl-stat-name { color: var(--nm-color-ink-2); }
body.tl-body .tl-stat-num  { color: var(--nm-color-ink); }
body.tl-body .tl-stat-swatch { border-radius: 3px; }

/* Trace card + axis + meta */
body.tl-body .tl-axis  { background: var(--nm-color-card); border-top-color: var(--nm-color-line); color: var(--nm-color-ink-3); }
body.tl-body .tl-meta  { background: var(--nm-color-paper); border-top-color: var(--nm-color-line); color: var(--nm-color-ink-3); }

/* ─── Minimalist flat sections (no box wrappers) ────────────────────
   The summary / scrubber / detail rows used to have heavy card frames.
   On the new ov-min shell they read as cluttered boxes-inside-a-page.
   Stripped to flat groups separated by hairline rules so they breathe. */
body.tl-body .tl-summary {
  background: transparent;
  border: none;
  padding: 14px 0 6px;
  border-bottom: 1px solid #efece2;
  margin-bottom: 14px;
}
body.tl-body .tl-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 10px;
}

/* Scrubber row — no card, no top divider (the .tl-summary below the
   filter chips already supplies the hairline above this row, so a
   border-top here would render as a duplicate double-line). */
body.tl-body .tl-scrubber-card {
  background: transparent;
  border: none;
  flex-shrink: 0;
  padding: 4px 0 8px;
  margin-top: 0;
}
body.tl-body .tl-scrubber-head { color: var(--nm-color-ink-3); }

/* Detail row — flat, with subtle bottom action strip */
body.tl-body .tl-detailcard {
  background: transparent;
  border: none;
  flex-shrink: 0;
  padding: 12px 0 0;
  border-top: 1px solid #efece2;
  margin-top: 8px;
}
body.tl-body .tl-detail-empty    { color: var(--nm-color-ink-3); }
body.tl-body .tl-detail-actions  {
  background: transparent;
  border-top: 1px solid #efece2;
  padding-top: 10px;
  margin-top: 14px;
  display: flex; gap: 12px;
}
body.tl-body .tl-detail-type     { color: var(--nm-color-ink); font-family: var(--nm-font-mono); }
body.tl-body .tl-detail-counter  { color: var(--nm-color-ink-3); }

/* Pill-style nav buttons — flat, minimal, matching the overview language */
body.tl-body .tl-nav-btn {
  background: transparent;
  border: 1px solid #e3dfc8;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--nm-font-sans);
  font-size: 13px;
  color: var(--nm-color-ink-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: -0.005em;
  flex: 0 0 auto;
}
body.tl-body .tl-nav-btn:hover {
  background: #f7f3e6;
  border-color: #d4ceb9;
  color: var(--nm-color-ink);
}

/* The trace pane is the ONLY card that keeps a subtle frame, since the
   EEG plot itself benefits from a contained background to read against. */
body.tl-body .tl-trace-card {
  background: transparent;
  border: none;
  padding: 0;
}

@media (max-width: 900px) {
  .tl-statbar { grid-template-columns: repeat(2, 1fr); }
  .tl-app2 { padding: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ASYMMETRY WORKSPACE — senior-grade clinical report design
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ax-blue-deep: #1e3a8a;
  --ax-blue: #3b6eff;
  --ax-red: #ef4444;
  --ax-red-deep: #991b1b;
  --ax-faa-normal: #14d49b;
  --ax-faa-mild:   #d68b00;
  --ax-faa-strong: #ef4444;
}

body.ax-body {
  background: #f4f5f8;
  font-family: var(--font-display);
}
body.ax-body .topbar { padding: 14px 28px; }
body.ax-topbar .brand-tag { color: var(--text-2); font-weight: 500; }

/* ─── HERO ────────────────────────────────────────────────────────────── */

.ax-hero-name {
  font-family: "Instrument Serif", "Inter", serif;
  font-size: 42px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin: 0;
  line-height: 1;
}
.ax-hero-meta {
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--text-2);
  letter-spacing: 0.02em;
  margin-top: 6px;
}
.ax-hero-status-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.ax-status-balanced .dot { background: var(--ax-faa-normal); box-shadow: 0 0 0 4px rgba(20,212,155,0.18); }
.ax-status-mild     .dot { background: var(--ax-faa-mild);   box-shadow: 0 0 0 4px rgba(214,139,0,0.18); }
.ax-status-strong   .dot { background: var(--ax-faa-strong); box-shadow: 0 0 0 4px rgba(239,68,68,0.18); }

@media (max-width: 1080px) {
  .ax-hero-inner { grid-template-columns: 1fr; gap: 18px; }
  .ax-hero-divider { display: none; }
}

/* ─── MAIN BENTO GRID ─────────────────────────────────────────────────── */


@media (max-width: 1080px) {
  .ax-card-topo, .ax-card-faa, .ax-card-hemi,
  .ax-card-pairs, .ax-card-spec, .ax-card-quad { grid-column: span 12; }
}

/* ─── Card base ───────────────────────────────────────────────────────── */


/* ─── Band picker ─────────────────────────────────────────────────────── */
.ax-band-picker {
  display: inline-flex;
  background: var(--border);
  padding: 2px;
  border-radius: 999px;
  gap: 1px;
}
.ax-band {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: var(--surface-1);
  border: none;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
  min-width: 32px;
}
.ax-band:hover { color: var(--text-1); }
.ax-band.active {
  background: linear-gradient(135deg, #0099c4 0%, #5b4ce0 100%);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(91, 76, 224, 0.4);
}

/* ─── TOPOMAP card ────────────────────────────────────────────────────── */

@media (max-width: 760px) { .ax-topo-stage { grid-template-columns: 1fr; } }
.ax-topo-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
.ax-topo-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 12px;
}
.ax-topo-wrap svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.ax-topo-meta {
  position: absolute;
  left: 50%; bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-3);
  background: rgba(255,255,255,0.9);
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border);
}

.ax-topo-side {
  display: flex; flex-direction: column;
  gap: 10px;
}
.ax-topo-stat .k {
  font-size: 9.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 4px;
}
.ax-topo-stat .v {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ax-topo-stat.is-pos .v { color: var(--ax-red); }
.ax-topo-stat.is-neg .v { color: var(--ax-blue); }

/* mini band thumbnails */

.ax-band-thumb.active {
  border-color: var(--accent-2);
  background: rgba(91,76,224,0.06);
  box-shadow: 0 0 0 2px rgba(91,76,224,0.10);
}

/* ─── FAA gauge card ──────────────────────────────────────────────────── */

.ax-faa-readout {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 4px;
}
.ax-faa-big {
  font-family: var(--font-mono);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-1);
}
.ax-faa-big.pos { color: var(--ax-red); }
.ax-faa-big.neg { color: var(--ax-blue); }
.ax-faa-sub {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  letter-spacing: 0.005em;
}

.ax-faa-gauge { display: flex; flex-direction: column; gap: 6px; }
.ax-faa-track {
  position: relative;
  height: 14px;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  overflow: visible;
  border: 1px solid var(--border);
}
.ax-faa-zone { position: relative; }
.ax-faa-zone-neg-strong { background: rgba(239,68,68,0.16); border-radius: 999px 0 0 999px; }
.ax-faa-zone-neg-mild   { background: rgba(214,139,0,0.16); }
.ax-faa-zone-normal     { background: rgba(20,212,155,0.18); }
.ax-faa-zone-pos-mild   { background: rgba(214,139,0,0.16); }
.ax-faa-zone-pos-strong { background: rgba(239,68,68,0.16); border-radius: 0 999px 999px 0; }
.ax-faa-center {
  position: absolute;
  left: 50%; top: -3px; bottom: -3px;
  width: 1px;
  background: var(--text-4);
}
.ax-faa-marker {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 4px;
  background: var(--accent-2);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 0.3s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 2px 8px rgba(91,76,224,0.4);
}
.ax-faa-marker::after {
  content: "";
  position: absolute;
  top: -4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--accent-2);
}
.ax-faa-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text-3);
  letter-spacing: 0.04em;
}
.ax-faa-labels span:first-child { text-align: left; }
.ax-faa-labels span:nth-child(2) { text-align: center; padding-left: 12px; }
.ax-faa-labels span:nth-child(3) { text-align: center; }
.ax-faa-labels span:nth-child(4) { text-align: center; padding-right: 12px; }
.ax-faa-labels span:last-child { text-align: right; }
.ax-faa-interp {
  margin-top: 4px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent-2);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ─── HEMISPHERIC POWER ───────────────────────────────────────────────── */
.ax-hemi-bars {
  display: grid;
  grid-template-columns: 60px 1fr 1fr 70px;
  gap: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  align-items: center;
}
.ax-hemi-row {
  display: contents;
}
.ax-hemi-band {
  color: var(--text-2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.ax-hemi-l, .ax-hemi-r {
  display: flex; align-items: center;
  height: 24px;
  position: relative;
}
.ax-hemi-l { justify-content: flex-end; }
.ax-hemi-bar {
  height: 10px;
  border-radius: 3px;
}
.ax-hemi-bar-l { background: linear-gradient(90deg, #3b6eff, #6b8eff); }
.ax-hemi-bar-r { background: linear-gradient(90deg, #ef4444, #f87171); }
.ax-hemi-bar-r { margin-left: 0; }
.ax-hemi-val {
  font-size: 10.5px;
  color: var(--text-3);
  margin: 0 8px;
}
.ax-hemi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  font-weight: 500;
}
.ax-hemi-delta.pos { color: var(--ax-red); }
.ax-hemi-delta.neg { color: var(--ax-blue); }

.ax-hemi-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 60px 1fr 1fr 70px;
  gap: 6px 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ax-hemi-header > div:nth-child(2) { text-align: right; padding-right: 8px; }
.ax-hemi-header > div:nth-child(3) { text-align: left; padding-left: 8px; }
.ax-hemi-header > div:nth-child(4) { text-align: right; }

.ax-hemi-summary {
  margin-top: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ─── PER-PAIR BARS ──────────────────────────────────────────────────── */

.ax-legend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-3);
}
.ax-line { display: inline-block; width: 16px; height: 2.5px; border-radius: 2px; }
.ax-line-l { background: #3b6eff; }
.ax-line-r { background: #ef4444; }
.ax-bar-row.selected {
  background: rgba(91,76,224,0.07);
  box-shadow: inset 2px 0 0 var(--accent-2);
}
.ax-bar-pair .sep { color: var(--text-4); margin: 0 2px; }

/* ─── PAIR SPECTRUM ───────────────────────────────────────────────────── */
.ax-spec-wrap {
  width: 100%;
  background:
    linear-gradient(180deg, var(--surface-2), transparent 60%);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--border);
}
.ax-spec-wrap svg {
  width: 100%;
  aspect-ratio: 600 / 280;
  display: block;
}
.ax-spec-legend {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  flex-wrap: wrap;
}
.ax-spec-pick { margin-left: auto; }
.ax-spec-pick span { color: var(--text-1); font-weight: 500; }

/* ─── MATRIX ──────────────────────────────────────────────────────────── */
.ax-matrix {
  display: grid;
  gap: 2px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ax-matrix-cell {
  background: var(--surface-1);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 9px 4px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 30px;
  cursor: pointer;
  transition: filter 0.1s, transform 0.12s;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ax-matrix-cell.header {
  background: var(--surface-2);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: 600;
  cursor: default;
}
.ax-matrix-cell.corner {
  background: var(--surface-1);
  cursor: default;
}
.ax-matrix-cell.band-label {
  background: var(--surface-2);
  color: var(--text-1);
  font-weight: 600;
  font-size: 11px;
}
.ax-matrix-cell.band-label .greek { color: var(--accent-2); margin-right: 4px; }
.ax-matrix-cell.data:hover {
  filter: brightness(0.95);
  outline: 2px solid var(--accent-2);
  outline-offset: -2px;
  z-index: 2;
}
.ax-matrix-cell.selected {
  outline: 2.5px solid var(--accent-2);
  outline-offset: -2.5px;
  z-index: 3;
}

/* ─── QUADRANT ────────────────────────────────────────────────────────── */
.ax-quad-stage {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 760px) { .ax-quad-stage { grid-template-columns: 1fr; } }

.ax-quad-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1.4 / 1;
}
.ax-quad {
  background: var(--surface-1);
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: default;
}
.ax-quad-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 600;
}
.ax-quad-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-1);
  line-height: 1;
}
.ax-quad-detail {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
.ax-quad-arrow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: var(--surface-1);
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-3);
  font-size: 16px;
  z-index: 5;
}

.ax-quad-meta {
  display: flex; flex-direction: column;
  gap: 10px;
}
.ax-quad-meta-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.ax-quad-meta-row .k {
  font-size: 9.5px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 3px;
}
.ax-quad-meta-row .v {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}

/* ─── FINDINGS ────────────────────────────────────────────────────────── */
.ax-findings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.ax-findings-footer {
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--text-4);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  line-height: 1.5;
}

/* ─── Footer ──────────────────────────────────────────────────────────── */


/* ─── Print ───────────────────────────────────────────────────────────────
   The comprehensive print stylesheet lives in nm-shell.css (one rule for
   every inner page). This stub is kept harmless. */
@media print {
  body.ax-body { background: white; }
}

/* ═══════════════════════════════════════════════════════════════════════
   NEUROMAP — "PALE STONE" brand v4
   Restrained editorial / pale stone background / slate-blue ↔ amber
   diverging. Clean Inter, mono numbers, no ornaments. Designed for the
   "looks like a real designer made this" feel.
   ═══════════════════════════════════════════════════════════════════════ */

/* --st-* tokens now defined in theme.css */

/* ─── Page chrome ─────────────────────────────────────────────────── */
body.ax-body {
  background: var(--st-bg);
  color: var(--st-ink);
  -webkit-font-smoothing: antialiased;
}
body.ax-body::before { display: none; }

body.ax-body .topbar {
  padding: 14px 28px;
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  backdrop-filter: none;
}
body.ax-body .brand-name { color: var(--st-ink); font-weight: 600; letter-spacing: -0.01em; }
body.ax-body .brand-dot  { color: var(--st-ink-4); }
body.ax-body .brand-tag  {
  color: var(--st-ink-3);
  font-family: var(--font-display);
  font-style: normal; font-weight: 400; font-size: 13px;
  letter-spacing: 0;
}
body.ax-body .ghost-btn {
  background: transparent;
  border-color: var(--st-line-2);
  color: var(--st-ink-2);
}
body.ax-body .ghost-btn:hover {
  background: var(--st-card);
  border-color: var(--st-ink);
  color: var(--st-ink);
}
body.ax-body .pill {
  background: var(--st-card);
  border-color: var(--st-line);
  color: var(--st-ink-2);
}
body.ax-body .pill-ok {
  color: #5a7a34;
  border-color: rgba(90, 122, 52, 0.30);
  background: rgba(90, 122, 52, 0.06);
}

/* ─── Header (no card — just title + meta) ─────────────────────── */
.nm-header {
  max-width: 1180px;
  margin: 0;
  padding: 56px 56px 0;
}
.nm-header-inner {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px;
}
.nm-header-l { flex: 1; min-width: 0; }
.nm-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--st-ink);
}
.nm-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--st-ink-2);
  letter-spacing: 0;
}
.nm-header-r { flex-shrink: 0; }
.nm-band-info {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--st-ink-3);
  letter-spacing: 0.04em;
}
.nm-rule {
  border: 0;
  border-top: 1px solid var(--st-line-2);
  margin: 22px 0 18px;
}
.nm-bands {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 22px;
}
.nm-band {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500;
  color: var(--st-ink-2);
  background: transparent;
  border: 1px solid var(--st-line-2);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  letter-spacing: -0.005em;
}
.nm-band:hover {
  background: var(--st-card);
  color: var(--st-ink);
}
.nm-band.active {
  background: var(--st-ink);
  color: var(--st-card);
  border-color: var(--st-ink);
}

/* ─── Main column ─────────────────────────────────────────────── */
.nm-main {
  max-width: 1180px;
  margin: 0;
  padding: 24px 56px 96px;
  display: flex; flex-direction: column;
  gap: 24px;
}

/* ─── Stats row (3 cream cards, no border, just lighter surface) ─ */
.nm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .nm-stats { grid-template-columns: 1fr; } }
.nm-stat {
  background: var(--st-card);
  border-radius: 12px;
  padding: 18px 22px;
}
.nm-stat-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--st-ink-2);
  font-weight: 400;
  margin-bottom: 6px;
}
.nm-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--st-ink);
  line-height: 1;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}
.nm-stat-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--st-ink-3);
  letter-spacing: 0;
}

/* ─── Main viz card (topomap + bars) ──────────────────────────── */
.nm-viewcard {
  background: var(--st-card);
  border-radius: 14px;
  padding: 28px 32px;
}
.nm-view-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 880px) { .nm-view-grid { grid-template-columns: 1fr; } }

.nm-view-l { display: flex; flex-direction: column; gap: 18px; }
.ax-topo-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.ax-topo-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
}
.ax-topo-wrap svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.nm-view-title {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--st-ink-2);
  letter-spacing: 0.02em;
  margin-top: -8px;
}
.nm-color-scale {
  max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 6px;
}
.nm-color-scale-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--st-ink-2);
  font-weight: 400;
  padding: 0 6px;
}
.nm-color-scale-bar {
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--st-l-deep) 0%,
    var(--st-l-mid) 25%,
    var(--st-cream) 50%,
    var(--st-r-mid) 75%,
    var(--st-r-deep) 100%);
}
.nm-color-scale-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--st-ink-3);
  padding: 0 2px;
}

/* Right side of main viz: bars + axis */
.nm-view-r {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 4px;
}
.nm-bars-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--st-ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.nm-bars-formula {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--st-ink-2);
  font-weight: 400;
}
.nm-bars { display: flex; flex-direction: column; gap: 8px; }
.nm-bar-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  padding: 4px 0;
  border-radius: 4px;
  transition: background 0.15s;
}
.nm-bar-row:hover { background: rgba(110, 72, 24, 0.04); }
.nm-bar-row.selected { background: rgba(110, 72, 24, 0.08); }
.nm-bar-label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--st-ink-2);
  text-align: right;
  letter-spacing: 0;
}
.nm-bar-track {
  position: relative;
  height: 22px;
}
.nm-bar-axis-line {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--st-line-2);
}
.nm-bar-fill {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 2px;
}
.nm-bar-val {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.nm-bars-axis {
  display: flex; justify-content: space-between;
  margin-left: 78px;
  padding-top: 6px;
  border-top: 1px solid var(--st-line-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--st-ink-3);
}

/* ─── Floating section divider arrow ──────────────────────────── */


/* ─── Section + card primitives ───────────────────────────────── */
.nm-section { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.nm-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding-bottom: 6px;
}
.nm-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--st-ink);
}
.nm-section-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--st-ink-3);
  letter-spacing: 0;
}
.nm-card {
  background: var(--st-card);
  border-radius: 14px;
  padding: 24px 28px;
}
.nm-card-head { margin-bottom: 16px; }
.nm-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--st-ink);
}
.nm-card-sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--st-ink-3);
  margin-top: 4px;
}
.nm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 880px) { .nm-two-col { grid-template-columns: 1fr; } }

/* ─── Override / re-skin all existing components in new palette ── */
body.ax-body .ax-matrix { background: var(--st-line); border-color: var(--st-line); border-radius: 10px; }
body.ax-body .ax-matrix-cell { background: var(--st-card); font-family: var(--font-mono); font-size: 11.5px; }
body.ax-body .ax-matrix-cell.header { background: var(--st-bg); color: var(--st-ink-3); }
body.ax-body .ax-matrix-cell.band-label { background: var(--st-bg); color: var(--st-ink); }
body.ax-body .ax-matrix-cell.band-label .greek { color: var(--st-r-mid); }
body.ax-body .ax-matrix-cell.selected { outline-color: var(--st-ink); }

/* hemi bars */
body.ax-body .ax-hemi-bars { font-family: var(--font-mono); font-size: 11.5px; }
body.ax-body .ax-hemi-header { color: var(--st-ink-3); border-bottom-color: var(--st-line); }
body.ax-body .ax-hemi-band { color: var(--st-ink-2); }
body.ax-body .ax-hemi-bar-l { background: linear-gradient(90deg, var(--st-l-mid), var(--st-l-deep)); }
body.ax-body .ax-hemi-bar-r { background: linear-gradient(90deg, var(--st-r-mid), var(--st-r-deep)); }
body.ax-body .ax-hemi-val   { color: var(--st-ink-3); }
body.ax-body .ax-hemi-delta.pos { color: var(--st-r-deep); }
body.ax-body .ax-hemi-delta.neg { color: var(--st-l-deep); }
body.ax-body .ax-hemi-summary {
  background: var(--st-paper);
  border-left: 2px solid var(--st-accent);
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--st-ink-2);
  margin-top: 12px;
  line-height: 1.5;
}

/* quadrants */
body.ax-body .ax-quad-stage { display: grid; grid-template-columns: 1fr 200px; gap: 18px; align-items: stretch; }
@media (max-width: 760px) { body.ax-body .ax-quad-stage { grid-template-columns: 1fr; } }
body.ax-body .ax-quad-grid { background: var(--st-line); border-radius: 10px; }
body.ax-body .ax-quad { background: var(--st-paper); padding: 16px; }
body.ax-body .ax-quad-label { color: var(--st-ink-3); font-size: 10px; }
body.ax-body .ax-quad-value {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--st-ink);
  font-feature-settings: "tnum";
}
body.ax-body .ax-quad-detail { color: var(--st-ink-3); font-size: 11px; font-family: var(--font-mono); }
body.ax-body .ax-quad-arrow {
  background: var(--st-card);
  border-color: var(--st-line-2);
  box-shadow: 0 2px 8px rgba(42, 38, 31, 0.08);
}
body.ax-body .ax-quad-meta-row { background: var(--st-paper); border-color: var(--st-line); }
body.ax-body .ax-quad-meta-row .k { color: var(--st-ink-3); font-size: 9.5px; }
body.ax-body .ax-quad-meta-row .v { color: var(--st-ink); font-family: var(--font-mono); font-size: 12px; }

/* FAA gauge */
body.ax-body .ax-faa-readout { margin-bottom: 12px; }
body.ax-body .ax-faa-big {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  letter-spacing: -0.035em;
  color: var(--st-ink);
  font-feature-settings: "tnum";
}
body.ax-body .ax-faa-big.pos { color: var(--st-r-deep); }
body.ax-body .ax-faa-big.neg { color: var(--st-l-deep); }
body.ax-body .ax-faa-sub { font-family: var(--font-mono); font-size: 11px; color: var(--st-ink-3); }
body.ax-body .ax-faa-track { border-color: var(--st-line-2); }
body.ax-body .ax-faa-zone-neg-strong { background: rgba(110, 72, 24, 0.18); }
body.ax-body .ax-faa-zone-neg-mild   { background: rgba(110, 72, 24, 0.10); }
body.ax-body .ax-faa-zone-normal     { background: rgba(90, 122, 52, 0.14); }
body.ax-body .ax-faa-zone-pos-mild   { background: rgba(110, 72, 24, 0.10); }
body.ax-body .ax-faa-zone-pos-strong { background: rgba(110, 72, 24, 0.18); }
body.ax-body .ax-faa-center { background: var(--st-line-2); }
body.ax-body .ax-faa-marker {
  background: var(--st-ink);
  box-shadow: 0 2px 6px rgba(42, 38, 31, 0.35);
}
body.ax-body .ax-faa-marker::after { border-bottom-color: var(--st-ink); }
body.ax-body .ax-faa-labels { color: var(--st-ink-3); }
body.ax-body .ax-faa-interp {
  background: var(--st-paper);
  border-left: 2px solid var(--st-accent);
  border-radius: 4px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--st-ink-2);
  margin-top: 12px;
}

/* spectrum */
body.ax-body .ax-spec-wrap {
  background: var(--st-paper);
  border: 1px solid var(--st-line);
  border-radius: 8px;
  padding: 10px;
}
body.ax-body .ax-spec-wrap svg {
  width: 100%;
  aspect-ratio: 600 / 280;
  display: block;
}
body.ax-body .ax-line-l { background: var(--st-l-mid); width: 16px; height: 2.5px; border-radius: 2px; display: inline-block; }
body.ax-body .ax-line-r { background: var(--st-r-mid); width: 16px; height: 2.5px; border-radius: 2px; display: inline-block; }
body.ax-body .ax-spec-legend {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--st-ink-3);
  margin-top: 8px;
  flex-wrap: wrap;
}
body.ax-body .ax-spec-pick { margin-left: auto; }
body.ax-body .ax-spec-pick span { color: var(--st-ink); font-weight: 500; }
body.ax-body .ax-legend-chip { display: inline-flex; gap: 6px; align-items: center; }

/* findings */
body.ax-body .ax-findings { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
body.ax-body .ax-finding {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--st-paper);
  border: 1px solid var(--st-line);
  border-radius: 10px;
  border-left-width: 3px;
}
body.ax-body .ax-finding-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: #fff;
}
body.ax-body .ax-finding.balanced { border-left-color: #5a7a34; }
body.ax-body .ax-finding.balanced .ax-finding-icon { background: #5a7a34; }
body.ax-body .ax-finding.balanced .ax-finding-value { color: #5a7a34; }
body.ax-body .ax-finding.mild     { border-left-color: var(--st-r-mid); }
body.ax-body .ax-finding.mild     .ax-finding-icon { background: var(--st-r-mid); }
body.ax-body .ax-finding.mild     .ax-finding-value { color: var(--st-r-mid); }
body.ax-body .ax-finding.strong   { border-left-color: var(--st-r-deep); }
body.ax-body .ax-finding.strong   .ax-finding-icon { background: var(--st-r-deep); }
body.ax-body .ax-finding.strong   .ax-finding-value { color: var(--st-r-deep); }
body.ax-body .ax-finding.note     { border-left-color: var(--st-l-deep); }
body.ax-body .ax-finding.note     .ax-finding-icon { background: var(--st-l-deep); }
body.ax-body .ax-finding.note     .ax-finding-value { color: var(--st-l-deep); }
body.ax-body .ax-finding-title {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  color: var(--st-ink);
  letter-spacing: -0.01em;
}
body.ax-body .ax-finding-detail { color: var(--st-ink-2); font-size: 12.5px; line-height: 1.5; }
body.ax-body .ax-finding-value {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 600;
  font-feature-settings: "tnum";
}
body.ax-body .ax-findings-footer {
  color: var(--st-ink-4);
  border-top: 1px solid var(--st-line);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 11.5px;
  margin-top: 12px;
  padding-top: 12px;
  line-height: 1.5;
}

body.ax-body .ax-footer { display: none; }

/* hide legacy v3 ornament elements */
body.ax-body .ax-card-eyebrow,
body.ax-body .ax-band-thumbs,
body.ax-body .ax-band-picker,
body.ax-body .ax-topo-side,
body.ax-body .ax-topo-meta,
body.ax-body .ax-scale { display: none !important; }

/* ─── Clinical findings — quiet tabular layout ─────────────────── */
body.ax-body .ax-findings {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--st-line);
}
body.ax-body .nm-finding-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1.4fr);
  gap: 22px;
  padding: 14px 4px;
  align-items: baseline;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--st-line);
  border-radius: 0;
  border-left: none !important;
}
body.ax-body .nm-finding-row:last-child { border-bottom: none; }
body.ax-body .nm-finding-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--st-ink);
  letter-spacing: -0.005em;
}
body.ax-body .nm-finding-val {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--st-ink);
  text-align: right;
  font-feature-settings: "tnum";
}
body.ax-body .nm-finding-row.sev-1 .nm-finding-val { color: var(--st-r-mid); }
body.ax-body .nm-finding-row.sev-2 .nm-finding-val { color: var(--st-r-deep); }
body.ax-body .nm-finding-note {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--st-ink-3);
  font-style: normal;
  text-align: left;
}

/* override any legacy AX finding styles so they look like the new clean rows */
body.ax-body .ax-finding {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--st-line) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border-left: none !important;
}
body.ax-body .ax-finding-icon { display: none !important; }

/* findings footer — quieter */
body.ax-body .ax-findings-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--st-line);
  color: var(--st-ink-4);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESULTS / OVERVIEW page — inside the shared shell
   ═══════════════════════════════════════════════════════════════════════ */
body.results-body {
  background: var(--nm-color-bg);
  color: var(--nm-color-ink);
  overflow-y: auto;
  min-height: 100vh;
}
body.results-body .footer { display: none; }
body.results-body .mesh,
body.results-body .grid-bg { display: none; }

body.results-body .nm-shell-main {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.rp-page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  padding: 36px 36px 22px;
  border-bottom: 1px solid var(--nm-color-line);
  background: var(--nm-color-card);
  flex-shrink: 0;
}
.rp-page-head-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-page-title {
  margin: 0;
  font-family: var(--nm-font-sans);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.030em;
  line-height: 1.05;
  color: var(--nm-color-ink);
}
.rp-page-meta {
  font-family: var(--nm-font-mono);
  font-size: 12px;
  color: var(--nm-color-ink-2);
  letter-spacing: 0;
}
.rp-page-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.rp-main {
  flex: 1;
  padding: 24px 36px 80px;
  max-width: 1280px;
}

body.results-body .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
body.results-body .card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
body.results-body .card-title {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
body.results-body .card-big {
  font-family: var(--nm-font-sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.030em;
  color: var(--nm-color-ink);
  font-feature-settings: "tnum";
}
body.results-body .card-sub {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  color: var(--nm-color-ink-3);
}
body.results-body .card-row {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px;
}
body.results-body .card-row .k { color: var(--nm-color-ink-3); }
body.results-body .card-row .v {
  color: var(--nm-color-ink);
  font-family: var(--nm-font-mono);
  font-size: 12px;
}
body.results-body .card-wide { grid-column: 1 / -1; }
body.results-body .qtag {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--nm-color-line);
  background: var(--nm-color-paper);
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink-2);
}
body.results-body .qtag-good { color: var(--nm-color-good);   border-color: rgba(90,122,52,0.30);  background: rgba(90,122,52,0.06); }
body.results-body .qtag-poor { color: var(--nm-color-warn);   border-color: rgba(184,136,56,0.30); background: rgba(184,136,56,0.06); }
body.results-body .qtag-disc { color: var(--nm-color-strong); border-color: rgba(108,28,28,0.30);  background: rgba(108,28,28,0.06); }

body.results-body .ghost-btn {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  color: var(--nm-color-ink-2);
}
body.results-body .ghost-btn:hover {
  background: var(--nm-color-paper);
  border-color: var(--nm-color-ink);
  color: var(--nm-color-ink);
}
body.results-body .pill {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  color: var(--nm-color-ink-2);
}
body.results-body .pill-ok {
  color: var(--nm-color-good);
  border-color: rgba(90,122,52,0.30);
  background: rgba(90,122,52,0.06);
}
body.results-body .bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
body.results-body .bar-row .lbl { width: 56px; color: var(--nm-color-ink-3); font-family: var(--nm-font-mono); }
body.results-body .bar-row .bar-bg {
  flex: 1; height: 6px; background: var(--nm-color-line); border-radius: 999px; overflow: hidden;
}
body.results-body .bar-row .bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--nm-color-l-mid), var(--nm-color-r-mid));
}
body.results-body .bar-row .val {
  width: 60px; text-align: right;
  font-family: var(--nm-font-mono); font-size: 12px; color: var(--nm-color-ink-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   COHERENCE page — inside the shared shell
   ═══════════════════════════════════════════════════════════════════════ */
body.coh-body {
  background: var(--nm-color-bg);
  color: var(--nm-color-ink);
  overflow-y: auto;
  min-height: 100vh;
}
body.coh-body .nm-shell-main {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

.coh-view-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) { .coh-view-grid { grid-template-columns: 1fr; } }
.coh-view-l { display: flex; flex-direction: column; gap: 14px; }
.coh-view-r { display: flex; flex-direction: column; gap: 18px; }

.coh-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.coh-card-head > div:first-child { min-width: 0; }

/* Right-cluster of controls (functional-label toggle + threshold pill) */
.coh-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* Functional-label toggle · subtle checkbox styled as a pill */
.coh-func-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nm-font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #8a7e63; cursor: pointer; user-select: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #ddd1b3;
  background: #fbf5e0;
  transition: background 0.15s, color 0.15s;
}
.coh-func-toggle:hover { background: #f7eecf; color: #6a4d18; }
.coh-func-toggle input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 13px; height: 13px;
  border-radius: 3px;
  border: 1.5px solid #b08a3a;
  background: #fff;
  cursor: pointer; margin: 0;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.coh-func-toggle input[type="checkbox"]:checked {
  background: radial-gradient(circle at 35% 30%, #fff7d8 0%, #d4a94a 55%, #8a6420 100%);
  border-color: #6a4d18;
}
.coh-func-toggle input[type="checkbox"]:checked::after {
  content: ""; position: absolute;
  left: 3px; top: 0px;
  width: 4px; height: 7px;
  border-right: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(45deg);
}
.coh-func-toggle:has(input:checked) {
  background: #f7eecf; color: #6a4d18; border-color: #b08a3a;
}
/* Threshold control · refined "lab-instrument" pill with gold accent thumb.
   Replaces the default-looking range input. */
.coh-thresh-wrap {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #fbf5e0 0%, #f3ead2 100%);
  padding: 7px 14px 7px 14px;
  border-radius: 999px;
  border: 1px solid #ddd1b3;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 1px 2px rgba(120, 100, 60, 0.08);
}
.coh-thresh-label {
  font-family: var(--nm-font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #8a7e63;
  font-weight: 600;
}
.coh-thresh-wrap input[type="range"] {
  width: 130px; appearance: none; -webkit-appearance: none; height: 4px;
  background: linear-gradient(90deg, #d8cca8 0%, #b08a3a 60%, #8b6520 100%);
  border-radius: 999px; outline: none;
}
.coh-thresh-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7d8 0%, #d4a94a 55%, #8a6420 100%);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(80, 56, 12, 0.45), inset 0 1px 0 rgba(255,255,255,0.45);
  border: 1px solid #6a4d18;
}
.coh-thresh-wrap input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff7d8 0%, #d4a94a 55%, #8a6420 100%);
  cursor: pointer; border: 1px solid #6a4d18;
  box-shadow: 0 1px 3px rgba(80, 56, 12, 0.45);
}
.coh-thresh-val {
  font-family: var(--nm-font-mono); font-size: 12.5px; font-weight: 700;
  color: #6a4d18; font-variant-numeric: tabular-nums;
  min-width: 36px; text-align: right;
}

.coh-brain-wrap {
  position: relative; width: 100%;
  max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto;
  /* leave room for functional-channel labels (Monitor / Auditory / etc.)
     that extend slightly past the SVG viewBox when the toggle is on  */
  padding: 0 12px;
}
.coh-brain-wrap svg {
  width: 100%; height: 100%; display: block;
  overflow: visible;   /* let func labels extend past viewBox */
}
.coh-brain-wrap svg .coh-electrode { cursor: pointer; transition: filter 0.15s; }
.coh-brain-wrap svg .coh-electrode:hover { filter: brightness(0.85); }
.coh-brain-wrap svg text { pointer-events: none; user-select: none; }

/* Legend strip · two zones separated by a hairline divider:
     (a) connection-KIND chips · what each colour means
     (b) intensity gradient bar · how line weight/opacity map to coherence */
.coh-legend {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  justify-content: center;
  font-family: var(--nm-font-mono); font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #6a6358;
  padding: 12px 14px 4px;
  border-top: 1px dashed #e2d8b8;
}
.coh-legend-group { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.coh-legend-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.coh-legend-line {
  display: inline-block; width: 26px; height: 3px; border-radius: 999px;
  box-shadow: 0 0 4px rgba(0,0,0,0.04);
}
/* Legacy kind-based line colors (kept for chord/circular diagram) */
.coh-line-intra-l  { background: #3d6a8f; }
.coh-line-intra-r  { background: #b85a3f; }
.coh-line-cross    { background: #7a5fa6; }
.coh-line-midline  { background: #7d7163; }
/* Traffic-light line tier colors (main brain network legend) */
.coh-line-green    { background: #5cb46a; }
.coh-line-lime     { background: #a8d472; }
.coh-line-amber    { background: #f0d566; }
.coh-line-orange   { background: #f3a557; }
.coh-line-red      { background: #e85838; }
.coh-legend-mono {
  font-family: var(--nm-font-mono); font-size: 9px;
  color: #948977; margin-left: 3px;
  font-variant-numeric: tabular-nums;
}

.coh-legend-divider {
  display: inline-block; width: 1px; height: 18px;
  background: #d8cba8; opacity: 0.6;
}

.coh-intensity-legend {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--nm-font-mono); font-size: 10px;
  color: #8a8170; letter-spacing: 0.06em;
}
.coh-intensity-bar {
  display: inline-block; width: 110px; height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(125, 113, 99, 0.20)   0%,
    rgba(125, 113, 99, 0.45)  30%,
    rgba(184, 90,  63, 0.70)  65%,
    rgba(184, 90,  63, 0.95) 100%);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(160, 145, 110, 0.18);
}
.coh-intensity-tick {
  font-variant-numeric: tabular-nums; color: #948977;
}

.coh-legend-eyebrow {
  font-family: var(--nm-font-mono); font-size: 9.5px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #968a72; font-weight: 600;
  margin-right: 2px;
}

/* Electrode-degree legend · clinical traffic-light tiers (green→red)
   matching the results-page palette EEG clinicians already read. */
.coh-degree-legend {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nm-font-mono); font-size: 10px;
  color: #6a6358; letter-spacing: 0.06em;
}
.coh-degree-bar {
  display: inline-block; width: 112px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #6b7280 0%,    #6b7280 12%,
    #5cb46a 14%,   #5cb46a 30%,
    #a8d472 32%,   #a8d472 48%,
    #f0d566 50%,   #f0d566 66%,
    #f3a557 68%,   #f3a557 82%,
    #e85838 84%,   #e85838 100%);
  box-shadow: inset 0 0 0 1px rgba(60, 60, 60, 0.20);
}
.coh-degree-tick {
  font-variant-numeric: tabular-nums; color: #2a2a2a; font-weight: 700;
}
.coh-degree-label { color: #6a6358; }

.coh-side-block {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 12px;
  padding: 16px 18px;
}
.coh-side-eyebrow {
  font-family: var(--nm-font-mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--nm-color-ink-3); margin-bottom: 10px;
}
.coh-side-electrode {
  font-family: var(--nm-font-sans); font-size: 28px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--nm-color-ink); margin-bottom: 4px;
}
.coh-side-detail {
  font-family: var(--nm-font-mono); font-size: 11.5px;
  color: var(--nm-color-ink-3); line-height: 1.55;
}

.coh-top-list { display: flex; flex-direction: column; gap: 6px; }
.coh-top-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  align-items: center; gap: 12px;
  font-size: 12.5px; cursor: pointer;
  padding: 5px 6px; border-radius: 4px;
}
.coh-top-row:hover { background: var(--nm-color-bg); }
.coh-top-row.selected { background: rgba(11, 18, 32, 0.08); }
.coh-top-pair { font-family: var(--nm-font-mono); font-weight: 500; color: var(--nm-color-ink); }
.coh-top-bar { height: 6px; background: var(--nm-color-line); border-radius: 999px; overflow: hidden; }
.coh-top-bar-fill { height: 100%; border-radius: 999px; }
.coh-top-val {
  font-family: var(--nm-font-mono); font-size: 12px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--nm-color-ink);
}

.coh-band-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 980px) { .coh-band-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .coh-band-grid { grid-template-columns: repeat(2, 1fr); } }

.coh-band-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.coh-band-card:hover {
  border-color: var(--nm-color-line-2);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.coh-band-card.active {
  border-color: var(--nm-color-ink);
  box-shadow: 0 0 0 1px var(--nm-color-ink);
}
.coh-band-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.coh-band-card-name { font-family: var(--nm-font-sans); font-size: 13px; font-weight: 600; color: var(--nm-color-ink); }
.coh-band-card-greek { color: var(--nm-color-ink-3); margin-right: 4px; }
.coh-band-card-mean {
  font-family: var(--nm-font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--nm-color-ink-2); font-variant-numeric: tabular-nums;
}
.coh-band-card-svg { aspect-ratio: 1 / 1; width: 100%; }
.coh-band-card-svg svg { width: 100%; height: 100%; display: block; }
.coh-band-card-foot {
  font-family: var(--nm-font-mono); font-size: 10.5px;
  color: var(--nm-color-ink-3); text-align: center;
}

.coh-pairs { display: flex; flex-direction: column; gap: 8px; }
.coh-pair-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center; gap: 14px;
  padding: 6px 0;
}
.coh-pair-label { font-family: var(--nm-font-mono); font-size: 12.5px; color: var(--nm-color-ink); font-weight: 500; }
.coh-pair-track {
  position: relative; height: 14px;
  background: var(--nm-color-line);
  border-radius: 3px; overflow: hidden;
}
.coh-pair-zone {
  position: absolute; top: 0; bottom: 0;
  background: rgba(90, 122, 52, 0.16);
}
.coh-pair-fill {
  position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--nm-color-l-mid), var(--nm-color-r-mid));
}
.coh-pair-marker {
  position: absolute; top: -2px; bottom: -2px;
  width: 3px; background: var(--nm-color-ink); border-radius: 2px;
  transform: translateX(-50%);
}
.coh-pair-val {
  font-family: var(--nm-font-mono); font-size: 12.5px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--nm-color-ink);
}

.coh-chord-wrap {
  width: 100%; max-width: 440px; aspect-ratio: 1 / 1; margin: 0 auto;
}
.coh-chord-wrap svg { width: 100%; height: 100%; display: block; }

.coh-matrix-wrap {
  position: relative; width: 100%;
  max-width: 520px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.coh-matrix-wrap canvas { width: 100%; height: 100%; display: block; }
.coh-matrix-overlay { position: absolute; inset: 0; pointer-events: none; }
.coh-matrix-scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  max-width: 480px; margin: 16px auto 0;
  font-family: var(--nm-font-mono); font-size: 10.5px; color: var(--nm-color-ink-3);
}
.coh-matrix-bar {
  height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,
    var(--nm-color-paper),
    var(--nm-color-l-soft) 25%,
    var(--nm-color-l-mid) 60%,
    var(--nm-color-l-deep));
  border: 1px solid var(--nm-color-line);
}

.coh-bandbars { display: flex; flex-direction: column; gap: 6px; }
.coh-bandbar-row {
  display: grid;
  grid-template-columns: 70px 1fr 60px;
  align-items: center; gap: 12px; padding: 4px 0;
}
.coh-bandbar-name { font-family: var(--nm-font-mono); font-size: 12px; color: var(--nm-color-ink-2); }
.coh-bandbar-track { height: 10px; border-radius: 999px; background: var(--nm-color-line); overflow: hidden; }
.coh-bandbar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--nm-color-l-mid), var(--nm-color-l-deep));
}
.coh-bandbar-val {
  font-family: var(--nm-font-mono); font-size: 12px; font-weight: 600;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--nm-color-ink);
}

.coh-region { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coh-region-cell {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.coh-region-name {
  font-family: var(--nm-font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--nm-color-ink-3);
}
.coh-region-val {
  font-family: var(--nm-font-sans); font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em; color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.coh-region-sub { font-family: var(--nm-font-mono); font-size: 10.5px; color: var(--nm-color-ink-3); }

/* ─── Electrode connectivity atlas ─── */
.coh-atlas-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) { .coh-atlas-grid { grid-template-columns: 1fr; } }

.coh-atlas-l { display: flex; flex-direction: column; gap: 14px; }
.coh-atlas-brain-wrap {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.coh-atlas-brain-wrap svg { width: 100%; height: 100%; display: block; }

.coh-atlas-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  justify-content: center;
  padding-top: 6px;
}
.coh-tier-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.coh-tier-dot { width: 11px; height: 11px; border-radius: 50%; }
/* Clinical traffic-light palette (matches results page severity tiers) */
.coh-tier-chip.coh-tier-hub  .coh-tier-dot { background: #e85838; }   /* red */
.coh-tier-chip.coh-tier-well .coh-tier-dot { background: #f3a557; }   /* orange */
.coh-tier-chip.coh-tier-mod  .coh-tier-dot { background: #f0d566; }   /* amber */
.coh-tier-chip.coh-tier-low  .coh-tier-dot { background: #a8d472; }   /* lime */
.coh-tier-chip.coh-tier-iso  .coh-tier-dot {
  background: #6b7280;
  box-shadow: 0 0 0 2px rgba(107,114,128,0.25);
}

/* Right rail (detail panel) */
.coh-atlas-r {
  display: flex; flex-direction: column; gap: 14px;
}

.coh-atlas-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.coh-atlas-electrode-name {
  font-family: var(--nm-font-sans);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--nm-color-ink);
  line-height: 1;
}
.coh-atlas-tier-pill {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.coh-atlas-subtitle {
  font-family: var(--nm-font-mono);
  font-size: 12px;
  color: var(--nm-color-ink-3);
}
.coh-atlas-subtitle b { color: var(--nm-color-ink); font-weight: 600; }

.coh-atlas-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
.coh-atlas-stat {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.coh-atlas-stat-k {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.coh-atlas-stat-v {
  font-family: var(--nm-font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.coh-atlas-stat-s {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-color-ink-3);
  letter-spacing: 0;
}
.coh-pow-abs { font-weight: 700; }
.coh-pow-rel { color: var(--nm-color-ink-3); font-weight: 500; font-size: 12.5px; }

.coh-atlas-conns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.coh-atlas-conns-block {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 10px;
  padding: 10px 12px;
}
.coh-atlas-conns-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 8px;
}
.coh-atlas-conn {
  display: grid;
  grid-template-columns: 36px 1fr 42px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}
.coh-atlas-conn-name {
  font-family: var(--nm-font-mono);
  font-weight: 600;
  color: var(--nm-color-ink);
}
.coh-atlas-conn-bar {
  height: 5px;
  background: var(--nm-color-line);
  border-radius: 999px;
  overflow: hidden;
}
.coh-atlas-conn-fill { display: block; height: 100%; border-radius: 999px; }
.coh-atlas-conn-val {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--nm-color-ink);
}
.coh-atlas-conn-val-weak { color: var(--nm-color-ink-3); font-weight: 500; }

.coh-atlas-note {
  background: var(--nm-color-paper);
  border-left: 3px solid var(--nm-color-ink);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 6px;
}
.coh-atlas-note-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.coh-atlas-note p {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  color: var(--nm-color-ink);
  line-height: 1.5;
  margin: 4px 0 0;
}

/* ─── Electrode card grid (21-electrode rank) ─── */
.coh-electrode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.coh-electrode-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
}
.coh-electrode-card:hover {
  border-color: var(--nm-color-line-2);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.coh-electrode-card.selected {
  border-color: var(--nm-color-ink);
  box-shadow: 0 0 0 1px var(--nm-color-ink);
}
.coh-elec-rank {
  position: absolute; top: 8px; right: 12px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-color-ink-4);
  letter-spacing: 0.08em;
}
.coh-elec-head { display: flex; align-items: center; gap: 8px; }
.coh-elec-name {
  font-family: var(--nm-font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--nm-color-ink);
}
.coh-elec-tier {
  font-family: var(--nm-font-mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.coh-elec-region {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  letter-spacing: 0.04em;
}
.coh-elec-stats { display: flex; gap: 14px; }
.coh-elec-stat { display: flex; flex-direction: column; gap: 2px; }
.coh-elec-stat-k {
  font-family: var(--nm-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--nm-color-ink-3);
}
.coh-elec-stat-v {
  font-family: var(--nm-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.coh-elec-bar {
  height: 4px;
  background: var(--nm-color-line);
  border-radius: 999px;
  overflow: hidden;
}
.coh-elec-bar-fill { height: 100%; border-radius: 999px; }

/* ── Node-degree topomap ── */
.coh-degree-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 880px) { .coh-degree-grid { grid-template-columns: 1fr; } }

.coh-hubs {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.coh-hub-list { display: flex; flex-direction: column; gap: 6px; }
.coh-hub-row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center; gap: 12px;
  font-size: 12.5px;
}
.coh-hub-name {
  font-family: var(--nm-font-mono);
  font-weight: 600;
  color: var(--nm-color-ink);
}
.coh-hub-bar {
  height: 8px; border-radius: 999px;
  background: var(--nm-color-line);
  overflow: hidden;
}
.coh-hub-bar-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--nm-color-l-mid), var(--nm-color-l-deep));
}
.coh-hub-degree {
  font-family: var(--nm-font-mono); font-size: 11.5px;
  text-align: right; color: var(--nm-color-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── Metrics grid ── */
.coh-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.coh-metric-cell {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.coh-metric-cell.warn   { border-left: 3px solid var(--nm-color-warn);   }
.coh-metric-cell.strong { border-left: 3px solid var(--nm-color-strong); }
.coh-metric-label {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.coh-metric-value {
  font-family: var(--nm-font-sans);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.coh-metric-cell.warn   .coh-metric-value { color: var(--nm-color-warn); }
.coh-metric-cell.strong .coh-metric-value { color: var(--nm-color-strong); }
.coh-metric-note {
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-ink-3);
  line-height: 1.4;
}

/* ── Three-column overview ── */
.coh-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 980px) { .coh-3col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .coh-3col { grid-template-columns: 1fr; } }

/* ── Histogram ── */
.coh-hist-wrap {
  display: flex; flex-direction: column; gap: 8px;
}
.coh-hist-wrap svg {
  width: 100%; height: auto; display: block;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 6px;
}
.coh-hist-meta {
  font-family: var(--nm-font-mono); font-size: 11px;
  color: var(--nm-color-ink-3); text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONNECTIVITY page — extends atlas + adds hubs, isolated, region matrix
   ═══════════════════════════════════════════════════════════════════════ */
body.cn-body {
  background: var(--nm-color-bg);
  color: var(--nm-color-ink);
  overflow-y: auto;
  min-height: 100vh;
}
body.cn-body .nm-shell-main {
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* Card head shared with coherence */
.cn-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px;
}

/* Node-degree wrap (single-card, no side rail) */
.cn-degree-wrap {
  width: 100%; max-width: 460px;
  aspect-ratio: 1 / 1; margin: 0 auto;
}
.cn-degree-wrap svg { width: 100%; height: 100%; display: block; }

/* Hub spotlight cards */
.cn-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.cn-hub-empty, .cn-iso-empty {
  font-family: var(--nm-font-mono); font-size: 12.5px;
  color: var(--nm-color-ink-3); padding: 24px 0;
  text-align: center;
  font-style: italic;
}
.cn-hub-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-left: 3px solid #1a2d50;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cn-hub-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.cn-hub-name {
  font-family: var(--nm-font-sans);
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.035em; color: var(--nm-color-ink);
}
.cn-hub-badge {
  background: #1a2d50; color: #fefdf9;
  font-family: var(--nm-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 9px; border-radius: 999px;
}
.cn-hub-loc {
  font-family: var(--nm-font-mono); font-size: 11.5px;
  color: var(--nm-color-ink-3); letter-spacing: 0.02em;
}
.cn-hub-stats { display: flex; gap: 18px; }
.cn-hub-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cn-hub-k {
  font-family: var(--nm-font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--nm-color-ink-3);
}
.cn-hub-v {
  font-family: var(--nm-font-mono); font-size: 14px; font-weight: 600;
  color: var(--nm-color-ink); font-variant-numeric: tabular-nums;
}
.cn-hub-top {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--nm-color-line);
}
.cn-hub-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--nm-color-ink-3);
  margin-right: 4px;
}
.cn-hub-partner {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--nm-font-mono); font-size: 11px;
  color: var(--nm-color-ink);
}
.cn-hub-partner-v {
  color: var(--nm-color-ink-3); font-weight: 600;
}
.cn-hub-note {
  font-family: var(--nm-font-sans); font-size: 12.5px;
  color: var(--nm-color-ink-2);
  line-height: 1.5;
}

/* Isolated electrode cards */
.cn-iso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.cn-iso-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-left: 3px solid var(--nm-color-warn);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.cn-iso-card.cn-iso-card-iso {
  border-left-color: #b44844;
}
.cn-iso-card:hover {
  box-shadow: var(--shadow-1);
}
.cn-iso-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.cn-iso-name {
  font-family: var(--nm-font-sans);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em; color: var(--nm-color-ink);
}
.cn-iso-tier {
  font-family: var(--nm-font-mono);
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.10em;
  padding: 3px 8px; border-radius: 999px;
}
.cn-iso-loc {
  font-family: var(--nm-font-mono); font-size: 11px;
  color: var(--nm-color-ink-3);
}
.cn-iso-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.cn-iso-stats > div { display: flex; flex-direction: column; gap: 2px; }
.cn-iso-k {
  font-family: var(--nm-font-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--nm-color-ink-3);
}
.cn-iso-v {
  font-family: var(--nm-font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--nm-color-ink); font-variant-numeric: tabular-nums;
}
.cn-iso-note {
  font-family: var(--nm-font-sans); font-size: 11.5px;
  color: var(--nm-color-ink-2); line-height: 1.5;
}

/* Region-to-region matrix */
.cn-region-matrix {
  display: flex; flex-direction: column;
  background: var(--nm-color-line);
  border-radius: 8px; overflow: hidden;
  gap: 1px; padding: 1px;
}
.cn-rm-row { display: grid; grid-template-columns: 80px repeat(4, 1fr); gap: 1px; }
.cn-rm-corner, .cn-rm-h, .cn-rm-l, .cn-rm-cell {
  background: var(--nm-color-card);
  font-family: var(--nm-font-mono);
  font-size: 11px;
  padding: 10px 6px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.cn-rm-h { color: var(--nm-color-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 500; }
.cn-rm-l { color: var(--nm-color-ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9.5px; font-weight: 500; justify-content: flex-end; padding-right: 12px; }
.cn-rm-cell {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Hemispheric balance */
.cn-hemi { display: flex; flex-direction: column; gap: 8px; }
.cn-hemi-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center; gap: 12px;
  padding: 6px 0;
}
.cn-hemi-name {
  font-family: var(--nm-font-mono); font-size: 11.5px;
  color: var(--nm-color-ink-2);
}
.cn-hemi-bar {
  height: 10px; border-radius: 999px;
  background: var(--nm-color-line);
  overflow: hidden;
}
.cn-hemi-fill { height: 100%; border-radius: 999px; }
.cn-hemi-val {
  font-family: var(--nm-font-mono); font-size: 12px; font-weight: 600;
  text-align: right; color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.cn-hemi-foot {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--nm-color-line);
  display: flex; flex-direction: column; gap: 4px;
}
.cn-hemi-foot > div:first-child { display: flex; justify-content: space-between; }
.cn-hemi-foot-k {
  font-family: var(--nm-font-mono); font-size: 11px;
  color: var(--nm-color-ink-3); letter-spacing: 0.06em; text-transform: uppercase;
}
.cn-hemi-foot-v {
  font-family: var(--nm-font-mono); font-size: 16px; font-weight: 700;
  color: var(--nm-color-ink); font-variant-numeric: tabular-nums;
}
.cn-hemi-foot-note {
  font-family: var(--nm-font-sans); font-size: 12px;
  color: var(--nm-color-ink-3); font-style: italic;
}

/* Per-electrode × band heatmap */
.cn-elec-band-grid {
  display: flex; flex-direction: column;
  background: var(--nm-color-line);
  border-radius: 8px; overflow: hidden;
  gap: 1px; padding: 1px;
}
.cn-eb-row {
  display: grid;
  grid-template-columns: 60px repeat(6, 1fr) 60px;
  gap: 1px;
  cursor: pointer;
  transition: filter 0.1s;
}
.cn-eb-row:not(.cn-eb-head):hover .cn-eb-l { filter: brightness(0.92); }
.cn-eb-row.selected .cn-eb-l { background: rgba(11, 18, 32, 0.10); }
.cn-eb-l, .cn-eb-h, .cn-eb-cell {
  background: var(--nm-color-card);
  font-family: var(--nm-font-mono);
  font-size: 11px;
  padding: 7px 4px;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.cn-eb-l { color: var(--nm-color-ink); font-weight: 600; }
.cn-eb-h { color: var(--nm-color-ink-3); font-size: 10px; letter-spacing: 0.06em; }
.cn-eb-h-avg { color: var(--nm-color-ink-2); font-weight: 600; }
.cn-eb-cell {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cn-eb-cell-avg {
  background: var(--nm-color-paper) !important;
  color: var(--nm-color-ink) !important;
}

.coh-findings { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; border-top: 1px solid var(--nm-color-line); }
.coh-find-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 100px minmax(0, 1.4fr);
  gap: 22px; padding: 14px 4px;
  align-items: baseline; border-bottom: 1px solid var(--nm-color-line);
}
.coh-find-row:last-child { border-bottom: none; }
.coh-find-name {
  font-family: var(--nm-font-sans); font-size: 13.5px; font-weight: 500; color: var(--nm-color-ink);
}
.coh-find-val {
  font-family: var(--nm-font-mono); font-size: 15px; font-weight: 600;
  text-align: right; color: var(--nm-color-ink); font-variant-numeric: tabular-nums;
}
.coh-find-row.warn .coh-find-val { color: var(--nm-color-warn); }
.coh-find-row.strong .coh-find-val { color: var(--nm-color-strong); }
.coh-find-note { font-family: var(--nm-font-sans); font-size: 12.5px; color: var(--nm-color-ink-3); }
.coh-findings-footer {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--nm-color-line);
  font-family: var(--nm-font-sans); font-size: 11.5px; color: var(--nm-color-ink-4);
}

/* ─── Cleaning provenance badge ────────────────────────────────────────
 * Compact chip in every analysis-page header that announces what
 * preprocessing was applied to the signal feeding the page.
 * Click toggles a popover with the full audit trail. */

.nm-clean-host {
  position: relative;
  display: inline-block;
}

.nm-clean-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--nm-color-ink);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  user-select: none;
}
.nm-clean-badge:hover { background: var(--nm-color-card); border-color: var(--nm-color-line-2); }
.nm-clean-badge:focus { outline: 2px solid var(--nm-color-info); outline-offset: 2px; }

.nm-clean-ok { color: var(--nm-color-good); border-color: var(--nm-color-good); }
.nm-clean-ok .nm-clean-badge-dot { background: var(--nm-color-good); }
.nm-clean-warn { color: var(--nm-color-warn); border-color: var(--nm-color-warn); }
.nm-clean-warn .nm-clean-badge-dot { background: var(--nm-color-warn); }
.nm-clean-off { color: var(--nm-color-ink-3); }
.nm-clean-off .nm-clean-badge-dot { background: var(--nm-color-ink-4); }

.nm-clean-badge-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  color: var(--nm-color-white);
  font-size: 10px; font-weight: 700;
  line-height: 1;
}
.nm-clean-badge-label { letter-spacing: 0.02em; font-weight: 600; }
.nm-clean-badge-counts { /* deprecated · counts moved into popover */ display: none; }

/* Chevron · made more prominent so it reads as a clickable affordance.
   Sits in its own little circle so it visually says "expandable". */
.nm-clean-badge-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(180, 160, 110, 0.14);
  color: var(--nm-color-ink-2, #5a5546);
  font-size: 9px;
  line-height: 1;
  transition: background 120ms, transform 120ms;
}
.nm-clean-badge:hover .nm-clean-badge-caret {
  background: rgba(180, 160, 110, 0.28);
  transform: translateY(1px);
}

/* ─── Popover ──────────────────────────────────────────────────────── */
.nm-clean-popover {
  position: absolute;
  top: calc(100% + 8px);
  /* Anchor to the RIGHT edge of the badge host so the popover opens
     leftward — required when the host sits in the right column of the
     header (otherwise the popover overflows the viewport). */
  right: 0;
  width: 460px;
  max-width: 92vw;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line-2);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(20, 16, 8, 0.18);
  padding: 16px 18px;
  z-index: 200;
}
.nm-clean-pop-head { margin-bottom: 10px; }
.nm-clean-pop-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.nm-clean-pop-title {
  font-family: var(--nm-font-sans);
  font-size: 15px; font-weight: 600;
  color: var(--nm-color-ink);
  margin-top: 2px;
}
.nm-clean-pop-sub {
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-ink-3);
  line-height: 1.45;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--nm-color-line);
  padding-bottom: 10px;
}

/* Summary row · the at-a-glance counts that used to sit inline in the
   header badge ("0 interpolated · 2 ICA removed · avg ref"). Now lives
   at the top of the popover so a clinician opens the chip + immediately
   sees the headline numbers before any text. */
.nm-clean-pop-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  background: rgba(45, 138, 60, 0.06);
  border-radius: 6px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink-2, #5a5546);
}
.nm-clean-pop-summary strong {
  font-weight: 700;
  color: var(--nm-color-ink, #0c0c0c);
  font-variant-numeric: tabular-nums;
}

.nm-clean-pop-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.nm-clean-row {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 12px;
  align-items: baseline;
}
.nm-clean-row-k {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  letter-spacing: 0.02em;
}
.nm-clean-row-v {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink);
}
.nm-clean-row-muted { color: var(--nm-color-ink-3); font-style: italic; }

.nm-clean-chiplist { display: flex; flex-wrap: wrap; gap: 4px; }
.nm-clean-chip {
  display: inline-block;
  padding: 2px 7px;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--nm-color-ink-2);
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 4px;
}

.nm-clean-ica-list { display: flex; flex-direction: column; gap: 4px; }
.nm-clean-ica-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
}
.nm-clean-ica-idx {
  color: var(--nm-color-ink-3);
  font-weight: 600;
  min-width: 28px;
}
.nm-clean-ica-label {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nm-clean-ica-eye    { background: var(--nm-color-l-soft); color: var(--nm-color-l-deep); }
.nm-clean-ica-muscle { background: var(--nm-color-r-soft); color: var(--nm-color-r-deep); }
.nm-clean-ica-heart  { background: var(--nm-color-r-soft); color: var(--nm-color-r-deep); }
.nm-clean-ica-conf, .nm-clean-ica-var {
  color: var(--nm-color-ink-3);
}
.nm-clean-ica-var { margin-left: auto; }

.nm-clean-warn {
  background: rgba(184, 136, 56, 0.12);
  border: 1px solid var(--nm-color-warn);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-warn);
  margin-bottom: 10px;
}
.nm-clean-warn-soft {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-warn);
  line-height: 1.4;
}

.nm-clean-refs {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--nm-color-line);
}
.nm-clean-refs-head {
  font-family: var(--nm-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 6px;
}
.nm-clean-refs-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.nm-clean-refs-list li {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  line-height: 1.4;
}

/* ═════════════════════════════════════════════════════════════════════
 * EPILEPTIFORM page
 * Advanced paroxysmal event analytics — 13 categories, 4 detector layers
 * ═════════════════════════════════════════════════════════════════════ */

.ep-body .nm-shell-main { padding: 0; }

/* ── disclaimer banner ────────────────────────────────────────────── */
.ep-disclaimer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0 0;
  padding: 10px 14px;
  background: rgba(184, 136, 56, 0.12);
  border: 1px solid var(--nm-color-warn);
  border-radius: 7px;
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  color: var(--nm-color-warn);
  line-height: 1.4;
}
.ep-disclaimer-icon {
  font-size: 16px;
  font-weight: 700;
}

/* ── hero burden colour states ────────────────────────────────────── */
.nm-stat-value.ep-burden-ok    { color: var(--nm-color-good); }
.nm-stat-value.ep-burden-mid   { color: var(--nm-color-warn); }
.nm-stat-value.ep-burden-warn  { color: var(--nm-color-strong); }

/* ── category grid (all 13 categories) ────────────────────────────── */
.ep-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ep-cat-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: var(--nm-font-sans);
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.ep-cat-card:hover { transform: translateY(-1px); border-color: var(--nm-color-line-2); }
.ep-cat-card.has-events { background: var(--nm-color-paper); border-color: var(--nm-color-line-2); }
.ep-cat-swatch {
  width: 12px; height: 12px; border-radius: 3px;
  flex-shrink: 0;
}
.ep-cat-label {
  flex: 1;
  font-size: 12.5px; font-weight: 500;
  color: var(--nm-color-ink);
}
.ep-cat-count {
  font-family: var(--nm-font-mono);
  font-size: 15px; font-weight: 600;
  color: var(--nm-color-ink-2);
  font-variant-numeric: tabular-nums;
}
.ep-cat-card.has-events .ep-cat-count { color: var(--nm-color-r-mid); }

/* ── focus map (uses brain svg + side panel) ──────────────────────── */
.ep-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  padding: 8px 0;
}
.ep-focus-l { display: flex; flex-direction: column; gap: 10px; }
.ep-focus-r { padding: 4px 0 0 8px; }
.ep-focus-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  vertical-align: middle;
}
.ep-focus-dot-active { background: var(--nm-color-r-deep); }
.ep-focus-dot-passive { background: var(--nm-color-r-mid); }
.ep-focus-dot-none { background: var(--nm-color-line); }

.ep-focus-eyebrow {
  font-family: var(--nm-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin: 10px 0 4px 0;
}
.ep-focus-channel {
  font-family: var(--nm-font-sans);
  font-size: 36px; font-weight: 700;
  color: var(--nm-color-ink);
  line-height: 1;
}
.ep-focus-region {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  color: var(--nm-color-ink-3);
  margin-top: 4px;
}
.ep-focus-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
  margin: 14px 0 0 0;
  padding: 10px 0;
  border-top: 1px solid var(--nm-color-line);
}
.ep-focus-stats div {
  display: flex; justify-content: space-between;
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-ink-2);
}
.ep-focus-stats .k { color: var(--nm-color-ink-3); }
.ep-focus-stats .v {
  font-family: var(--nm-font-mono);
  font-weight: 600;
  color: var(--nm-color-ink);
}
.ep-focus-toplist {
  display: flex; flex-direction: column; gap: 4px;
}
.ep-focus-toprow {
  display: grid;
  grid-template-columns: 40px 1fr 32px;
  gap: 8px;
  align-items: center;
  font-family: var(--nm-font-mono);
  font-size: 11px;
}
.ep-focus-toprow .ch { color: var(--nm-color-ink-2); }
.ep-focus-toprow .bar {
  height: 6px;
  background: var(--nm-color-paper);
  border-radius: 3px;
  overflow: hidden;
}
.ep-focus-toprow .fill {
  height: 100%;
  background: var(--nm-color-r-mid);
}
.ep-focus-toprow .n {
  text-align: right;
  color: var(--nm-color-ink);
  font-weight: 600;
}
.ep-focus-empty {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  color: var(--nm-color-ink-3);
  font-style: italic;
}

/* ── event timeline strip ─────────────────────────────────────────── */
.ep-strip-wrap {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
}
.ep-strip-axis {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--nm-font-sans);
}
.ep-strip-row-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--nm-color-ink-2);
  padding: 6px 0;
  height: 22px;
}
.ep-strip-row-label .sw {
  width: 10px; height: 10px; border-radius: 2px;
}
.ep-strip-row-label .n {
  margin-left: auto;
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink-3);
  font-size: 10.5px;
}
.ep-strip {
  display: flex; flex-direction: column; gap: 4px;
}
.ep-strip-row {
  display: contents;
}
.ep-strip-lane {
  position: relative;
  height: 22px;
  background: var(--nm-color-paper);
  border-radius: 3px;
}
.ep-strip-tick {
  position: absolute;
  top: 2px; bottom: 2px;
  width: 2px;
  background: var(--nm-color-r-mid);
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 1px;
  opacity: 0.85;
  transition: opacity 0.1s ease, transform 0.1s ease, width 0.1s ease;
}
.ep-strip-tick:hover {
  opacity: 1;
  width: 4px;
  transform: scaleY(1.1);
}
.ep-strip-tick.emph {
  width: 4px;
  box-shadow: 0 0 8px var(--nm-color-r-deep);
}
.ep-strip-time-axis {
  position: relative;
  grid-column: 1 / -1;
  height: 14px;
  margin-top: 6px;
  border-top: 1px dashed var(--nm-color-line);
}
.ep-strip-time-tick {
  position: absolute;
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  color: var(--nm-color-ink-3);
  transform: translateX(-50%);
  padding-top: 2px;
}
.ep-strip-empty {
  padding: 40px;
  text-align: center;
  color: var(--nm-color-ink-3);
  font-style: italic;
}

/* ── event browser table ──────────────────────────────────────────── */
.ep-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px 0 14px 0;
  border-bottom: 1px solid var(--nm-color-line);
  margin-bottom: 12px;
}
.ep-filter-label {
  font-family: var(--nm-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-right: 6px;
}
.ep-chip {
  padding: 4px 10px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-2);
  cursor: pointer;
  transition: background 0.1s ease;
}
.ep-chip:hover { background: var(--nm-color-card); }
.ep-chip.active {
  background: var(--nm-color-ink);
  color: var(--nm-color-white);
  border-color: var(--nm-color-ink);
}

.ep-event-table-wrap { overflow-x: auto; }
.ep-event-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nm-font-sans);
  font-size: 12px;
}
.ep-event-table th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--nm-color-line);
}
.ep-event-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--nm-color-line);
  color: var(--nm-color-ink);
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.ep-event-table .ep-t-time {
  cursor: pointer;
  color: var(--nm-color-info);
}
.ep-event-table .ep-t-time:hover { text-decoration: underline; }
.ep-event-table .ep-t-ch { color: var(--nm-color-ink); font-weight: 500; }
.ep-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--nm-color-white);
  text-transform: lowercase;
}
.ep-event-pagination {
  padding: 10px 0 0 0;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  text-align: right;
}
.ep-event-empty {
  text-align: left;
  font-style: italic;
}

/* ── waveform gallery ─────────────────────────────────────────────── */
.ep-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.ep-gal-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.1s ease, transform 0.1s ease;
}
.ep-gal-card:hover {
  border-color: var(--nm-color-r-mid);
  transform: translateY(-1px);
}
.ep-gal-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--nm-color-white);
  border-radius: 4px;
}
.ep-gal-meta { margin-top: 8px; }
.ep-gal-time {
  font-family: var(--nm-font-mono);
  font-size: 12px;
  color: var(--nm-color-info);
  font-weight: 600;
}
.ep-gal-detail, .ep-gal-detail2 {
  display: flex; gap: 8px; align-items: baseline;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  margin-top: 4px;
}
.ep-gal-detail .ch { color: var(--nm-color-ink); font-weight: 600; }
.ep-gal-detail .amp { color: var(--nm-color-r-mid); font-weight: 600; }
.ep-gal-detail2 .ifcn { color: var(--nm-color-ink); font-weight: 500; }
.ep-gal-detail2 .cnn { color: var(--nm-color-info); font-weight: 500; }
.ep-gal-detail2 .field { color: var(--nm-color-ink-3); font-size: 10px; margin-left: auto; }
.ep-gallery-empty {
  grid-column: 1 / -1;
  padding: 30px;
  text-align: center;
  color: var(--nm-color-ink-3);
  font-style: italic;
}

/* ── HFO grid ─────────────────────────────────────────────────────── */
.ep-hfo-head {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ep-hfo-head div {
  display: flex; flex-direction: column;
  font-family: var(--nm-font-sans);
}
.ep-hfo-head .k {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.ep-hfo-head .v {
  font-size: 16px;
  font-weight: 600;
  color: var(--nm-color-ink);
}
.ep-hfo-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
}
.ep-hfo-table th {
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  padding: 6px 10px;
  border-bottom: 1px solid var(--nm-color-line);
}
.ep-hfo-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--nm-color-line);
  color: var(--nm-color-ink);
}
.ep-hfo-empty {
  padding: 18px;
  text-align: center;
  color: var(--nm-color-ink-3);
  font-style: italic;
}
.ep-hfo-empty-head {
  font-weight: 600;
  color: var(--nm-color-ink-2);
  margin-bottom: 4px;
}

/* ── patterns of concern cards ────────────────────────────────────── */
.ep-concern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.ep-concern-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 7px;
  padding: 12px 14px;
}
.ep-concern-card.has-events {
  background: var(--nm-color-paper);
  border-color: var(--nm-color-warn);
}
.ep-concern-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.ep-concern-title {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--nm-color-ink);
  flex: 1;
}
.ep-concern-count {
  font-family: var(--nm-font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--nm-color-ink-3);
  margin-left: 8px;
}
.ep-concern-card.has-events .ep-concern-count {
  color: var(--nm-color-warn);
}
.ep-concern-sub {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  line-height: 1.4;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--nm-color-line);
  margin-bottom: 8px;
}
.ep-concern-list {
  display: flex; flex-direction: column; gap: 4px;
}
.ep-concern-row {
  display: grid;
  grid-template-columns: 64px 1fr 80px auto;
  gap: 8px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  align-items: baseline;
}
.ep-concern-row .t { color: var(--nm-color-ink-3); }
.ep-concern-row .d { color: var(--nm-color-ink-2); }
.ep-concern-row .ch { color: var(--nm-color-ink); }
.ep-concern-row .lbl {
  font-size: 9.5px;
  padding: 1px 6px;
  background: var(--nm-color-warn);
  color: var(--nm-color-white);
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ep-concern-empty {
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-ink-3);
  font-style: italic;
}

/* ── clinical narrative ───────────────────────────────────────────── */
.ep-narrative-banner {
  background: rgba(184, 136, 56, 0.10);
  border-left: 3px solid var(--nm-color-warn);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-warn);
}
.ep-narrative-text {
  font-family: var(--nm-font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--nm-color-ink);
}
.ep-narrative-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--nm-color-line);
}
.ep-refs-head {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 6px;
}
.ep-refs {
  list-style: decimal;
  list-style-position: inside;
  margin: 0; padding: 0;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  line-height: 1.5;
}
.ep-refs li {
  padding: 2px 0;
}

/* ═════════════════════════════════════════════════════════════════════
 * ASYMMETRY · Direction vectors map
 * Arrows from non-dominant to dominant electrode, z-score severity
 * coded by color + thickness, Brodmann labels below electrodes.
 * ═════════════════════════════════════════════════════════════════════ */
.ax-vec-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1.6fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: start;
}
.ax-vec-c {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.ax-vec-c svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  /* SVG text labels need normal kerning + no negative tracking so the
     channel names (Fp1/Fpz/Fp2) stay tight and readable. */
  letter-spacing: 0;
  font-kerning: normal;
}
.ax-vec-c svg text { letter-spacing: 0; }

.ax-vec-legend {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-2);
}
.ax-vec-legend-head {
  font-family: var(--nm-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin: 8px 0 4px 0;
}
.ax-vec-legend-head:first-child { margin-top: 0; }
.ax-vec-legend-row {
  display: flex; align-items: center; gap: 8px;
}
.ax-vec-arr {
  display: inline-block;
  width: 28px; height: 0;
  border-top: 2.5px solid;
  position: relative;
}
.ax-vec-arr::after {
  content: ""; position: absolute;
  right: -2px; top: -4px;
  border: 4px solid transparent;
  border-left-color: currentColor;
}
.ax-vec-arr-critical    { color: var(--nm-color-r-deep); }
.ax-vec-arr-significant { color: var(--nm-color-warn); }
.ax-vec-arr-trending    { color: var(--nm-color-l-mid); }
.ax-vec-arr-within      { color: var(--nm-color-ink-4); border-top-width: 1.5px; }
.ax-vec-halo-swatch {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--nm-color-r-soft);
  opacity: 0.6;
}
.ax-vec-dash-swatch {
  display: inline-block;
  width: 28px; height: 0;
  border-top: 1.5px dashed var(--nm-color-line-2);
}

/* ── right-side detail (top-pair table) ──────────────────────────── */
.ax-vec-r {
  font-family: var(--nm-font-sans);
}
.ax-vec-r-head {
  font-family: var(--nm-font-mono);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 8px;
}
.ax-vec-rowhead {
  display: grid;
  grid-template-columns: 60px 16px 50px 60px 78px 1fr;
  gap: 6px;
  padding: 4px 0;
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  border-bottom: 1px solid var(--nm-color-line);
  margin-bottom: 4px;
}
.ax-vec-row {
  display: grid;
  grid-template-columns: 60px 16px 50px 60px 78px 1fr;
  gap: 6px;
  align-items: baseline;
  padding: 6px 0;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  border-bottom: 1px dashed var(--nm-color-line);
}
.ax-vec-row:last-child { border-bottom: none; }
.ax-vec-row-pair { color: var(--nm-color-ink); font-weight: 600; }
.ax-vec-row-dir  { color: var(--nm-color-ink-2); font-size: 14px; line-height: 1; text-align: center; }
.ax-vec-row-pct  { color: var(--nm-color-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ax-vec-row-z    { color: var(--nm-color-ink-2); font-variant-numeric: tabular-nums; }
.ax-vec-row-sev  { font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.ax-vec-row-ba   { color: var(--nm-color-ink-3); font-size: 10.5px; }

.ax-vec-row-critical    .ax-vec-row-sev { color: var(--nm-color-r-deep); }
.ax-vec-row-significant .ax-vec-row-sev { color: var(--nm-color-warn); }
.ax-vec-row-trending    .ax-vec-row-sev { color: var(--nm-color-l-mid); }
.ax-vec-row-within_range .ax-vec-row-sev { color: var(--nm-color-ink-4); }

.ax-vec-empty {
  font-style: italic;
  color: var(--nm-color-ink-3);
  font-size: 11.5px;
}

/* ─── Global rule for every brain / scalp SVG label ───────────────────
 * Channel names like "Fp1", "Fpz", "Fp2" must render with normal
 * kerning so they stay readable at the small font sizes used on the
 * scalp views. Theme-wide negative tracking is overridden here. */
.coh-brain-wrap svg text,
.cn-degree-wrap svg text,
.coh-atlas-brain-wrap svg text,
#ax-vec-svg text,
#ep-focus-svg text,
.ax-topo-wrap svg text {
  letter-spacing: 0 !important;
  font-kerning: normal;
}

/* ═════════════════════════════════════════════════════════════════════
 * NORMATIVE comparison page
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Z-score topomap grid (six little heads) ────────────────────────── */
.nv-topo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.nv-topo-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 12px 12px 8px;
}
.nv-topo-title {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--nm-color-ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.nv-topo-svg-wrap { width: 100%; aspect-ratio: 1; }
.nv-topo-svg-wrap svg {
  width: 100%; height: 100%; display: block;
  letter-spacing: 0 !important; font-kerning: normal;
}

/* ── Deviation matrix ──────────────────────────────────────────────── */
.nv-matrix-wrap { overflow-x: auto; }
.nv-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--nm-font-mono);
  font-size: 11px;
}
.nv-matrix-table th {
  text-align: center;
  font-family: var(--nm-font-sans);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--nm-color-line);
  letter-spacing: 0.02em;
}
.nv-matrix-table th.nv-mx-ch { text-align: left; }
.nv-matrix-table td {
  text-align: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--nm-color-line);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.nv-mx-ch {
  text-align: left !important;
  font-family: var(--nm-font-mono);
  font-weight: 600;
  color: var(--nm-color-ink);
  white-space: nowrap;
}
.nv-mx-ba {
  margin-left: 6px;
  color: var(--nm-color-ink-3);
  font-size: 10px;
  font-weight: 400;
}
.nv-mx-cell { color: var(--nm-color-ink); }
.nv-mx-within_range  { background: var(--nm-color-paper); color: var(--nm-color-ink-3); }
.nv-mx-trending      { background: rgba(74,108,140,0.18); color: var(--nm-color-ink); }
.nv-mx-significant   { background: rgba(180,72,68,0.22); color: var(--nm-color-r-deep); font-weight: 600; }
.nv-mx-critical      { background: rgba(108,28,28,0.34); color: var(--nm-color-white); font-weight: 700; }

/* legend */
.nv-matrix-legend {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 12px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
}
.nv-leg {
  padding: 3px 8px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.nv-leg-critical-low { background: rgba(26,45,80,0.34); color: var(--nm-color-white); }
.nv-leg-sig-low { background: rgba(74,108,140,0.34); color: var(--nm-color-l-deep); }
.nv-leg-trend-low { background: rgba(74,108,140,0.18); color: var(--nm-color-ink); }
.nv-leg-within { background: var(--nm-color-paper); color: var(--nm-color-ink-3); }
.nv-leg-trend-high { background: rgba(180,72,68,0.18); color: var(--nm-color-ink); }
.nv-leg-sig-high { background: rgba(180,72,68,0.34); color: var(--nm-color-r-deep); }
.nv-leg-critical-high { background: rgba(108,28,28,0.50); color: var(--nm-color-white); }

/* ── Clinical marker cards ─────────────────────────────────────────── */
.nv-marker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.nv-marker-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 14px 16px;
}
.nv-marker-card.nv-marker-trending     { border-color: var(--nm-color-l-mid); }
.nv-marker-card.nv-marker-significant  { border-color: var(--nm-color-warn); background: var(--nm-color-paper); }
.nv-marker-card.nv-marker-critical     { border-color: var(--nm-color-r-deep); background: rgba(180,72,68,0.08); }
.nv-marker-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.nv-marker-name {
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--nm-color-ink);
}
.nv-marker-sev {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.nv-marker-sev-within_range { background: var(--nm-color-paper); color: var(--nm-color-ink-3); }
.nv-marker-sev-trending     { background: rgba(74,108,140,0.20); color: var(--nm-color-l-deep); }
.nv-marker-sev-significant  { background: rgba(184,136,56,0.25); color: var(--nm-color-warn); font-weight: 600; }
.nv-marker-sev-critical     { background: var(--nm-color-r-deep); color: var(--nm-color-white); font-weight: 700; }

.nv-marker-value {
  font-family: var(--nm-font-sans);
  font-size: 28px;
  font-weight: 600;
  color: var(--nm-color-ink);
  line-height: 1;
  margin: 6px 0;
}
.nv-marker-unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--nm-color-ink-3);
  margin-left: 4px;
}
.nv-marker-detail {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  margin-bottom: 8px;
}
.nv-marker-interp {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink-2);
  line-height: 1.45;
  border-top: 1px dashed var(--nm-color-line);
  padding-top: 8px;
}

/* ── IAF curve ─────────────────────────────────────────────────────── */
.nv-iaf-wrap {
  width: 100%; max-width: 720px; margin: 0 auto;
}
.nv-iaf-wrap svg {
  width: 100%; height: auto; display: block;
  letter-spacing: 0;
}
.nv-iaf-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px 18px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--nm-color-line);
}
.nv-iaf-stat {
  display: flex; justify-content: space-between;
}
.nv-iaf-stat span:first-child { color: var(--nm-color-ink-3); }
.nv-iaf-stat span:last-child {
  font-family: var(--nm-font-mono);
  font-weight: 600;
  color: var(--nm-color-ink);
}
.nv-iaf-interp {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--nm-color-ink-2);
  margin-top: 6px;
  font-style: italic;
}

/* ── Z-score chip / coloring used in tables ────────────────────────── */
.nv-z { font-family: var(--nm-font-mono); font-variant-numeric: tabular-nums; }
.nv-z-within_range  { color: var(--nm-color-ink-3); }
.nv-z-trending      { color: var(--nm-color-l-deep); }
.nv-z-significant   { color: var(--nm-color-warn); font-weight: 600; }
.nv-z-critical      { color: var(--nm-color-r-deep); font-weight: 700; }

.nv-sev {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.nv-sev-within_range { background: var(--nm-color-paper); color: var(--nm-color-ink-3); }
.nv-sev-trending     { background: rgba(74,108,140,0.18); color: var(--nm-color-l-deep); }
.nv-sev-significant  { background: rgba(184,136,56,0.18); color: var(--nm-color-warn); font-weight: 600; }
.nv-sev-critical     { background: var(--nm-color-r-deep); color: var(--nm-color-white); font-weight: 700; }
.nv-ba { color: var(--nm-color-ink-3); font-size: 10.5px; }

/* ═════════════════════════════════════════════════════════════════════
 * SPECTRAL page
 * ═════════════════════════════════════════════════════════════════════ */
.sp-toggle-wrap {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nm-font-sans);
}
.sp-toggle {
  padding: 4px 10px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-2);
  cursor: pointer;
}
.sp-toggle:hover { background: var(--nm-color-card); }
.sp-toggle.active {
  background: var(--nm-color-ink);
  color: var(--nm-color-white);
  border-color: var(--nm-color-ink);
}

/* PSD chart */
.sp-psd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: start;
}
.sp-psd-chart-wrap svg {
  width: 100%; height: auto; display: block;
  background: var(--nm-color-paper);
  border-radius: 6px;
  letter-spacing: 0;
}
.sp-psd-legend {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
  padding-right: 4px;
}
.sp-psd-leg-item {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px;
  background: transparent;
  border: none;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-2);
  text-align: left;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.1s ease;
}
.sp-psd-leg-item:hover { background: var(--nm-color-paper); }
.sp-psd-leg-item.dim   { opacity: 0.35; }
.sp-psd-leg-item .sw   { width: 12px; height: 4px; border-radius: 1px; }
.sp-psd-leg-reset {
  margin-top: 6px;
  padding: 4px 8px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 4px;
  font-family: var(--nm-font-sans); font-size: 10.5px;
  color: var(--nm-color-ink-2);
  cursor: pointer;
}

/* Band chips strip */
.sp-band-strip {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--nm-color-line);
}
.sp-band-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  background: var(--nm-color-paper);
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-2);
}
.sp-band-chip .sw { width: 10px; height: 10px; border-radius: 2px; }
.sp-band-chip .rng {
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink-3);
  margin-left: 4px;
}

/* IAF + aperiodic two-column layouts */
.sp-iaf-grid, .sp-aper-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.sp-iaf-l svg, .sp-aper-l svg {
  width: 100%; max-width: 540px; height: auto; display: block;
  letter-spacing: 0;
}
.sp-iaf-scale, .sp-aper-scale {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
}
.sp-bar {
  flex: 1; height: 8px; border-radius: 4px;
}
.sp-bar-iaf {
  background: linear-gradient(to right,
    rgb(180,72,68) 0%, rgb(245,239,219) 50%, rgb(26,45,80) 100%);
}
.sp-bar-aper {
  background: linear-gradient(to right,
    rgb(245,239,219) 0%, rgb(184,136,56) 50%, rgb(108,28,28) 100%);
}
.sp-side-head {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 8px;
}
.sp-side-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--nm-color-line);
  font-family: var(--nm-font-mono);
  font-size: 11px;
}
.sp-side-row:last-child { border-bottom: none; }
.sp-side-row .ch { font-weight: 600; color: var(--nm-color-ink); }
.sp-side-row .ba { color: var(--nm-color-ink-3); font-size: 10px; }
.sp-side-row .v  { color: var(--nm-color-ink); text-align: right; }

/* Spectrogram heatmap rows */
.sp-spectro-wrap { overflow-x: auto; }
.sp-spectro-rows {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--nm-font-sans);
}
.sp-spectro-head, .sp-spectro-axis {
  display: grid;
  grid-template-columns: 56px 1fr 80px;
  gap: 8px;
  align-items: center;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-color-ink-3);
}
.sp-spectro-head .sp-spectro-h-label { font-weight: 600; }
.sp-spectro-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: center;
}
.sp-spectro-row-label {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nm-color-ink);
}
.sp-spectro-canvas {
  width: 100%;
  height: 36px;
  display: block;
  image-rendering: pixelated;
  border-radius: 3px;
}
.sp-spectro-axis {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--nm-color-line);
  grid-template-columns: 56px 1fr;
}
.sp-spectro-axis-line {
  position: relative;
  height: 14px;
}
.sp-spectro-tick {
  position: absolute;
  transform: translateX(-50%);
}

/* Band-power matrix cells */
.sp-mx-cell {
  font-family: var(--nm-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--nm-color-ink);
  font-weight: 500;
}
.sp-mx-wrap { overflow-x: auto; }

/* ═════════════════════════════════════════════════════════════════════
 * COHERENCE — connectivity-metric toggle (MSC | iCoh | PLI | wPLI)
 * ═════════════════════════════════════════════════════════════════════ */
.coh-metric-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
}
.coh-metric-eyebrow {
  font-family: var(--nm-font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.coh-metric-toggle {
  display: inline-flex; gap: 4px;
  background: var(--nm-color-paper);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--nm-color-line);
}
.coh-metric-btn {
  padding: 4px 12px;
  background: transparent; border: none;
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px; font-weight: 500;
  color: var(--nm-color-ink-2);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}
.coh-metric-btn:hover { background: var(--nm-color-card); }
.coh-metric-btn.active {
  background: var(--nm-color-ink);
  color: var(--nm-color-white);
}
.coh-metric-note {
  font-family: var(--nm-font-sans);
  font-size: 11.5px;
  color: var(--nm-color-ink-3);
  font-style: italic;
  flex: 1; min-width: 0;
}

/* ═════════════════════════════════════════════════════════════════════
 * CONNECTIVITY — Functional modules (community detection + force layout)
 * ═════════════════════════════════════════════════════════════════════ */
.cn-modules-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.cn-mod-eyebrow {
  font-family: var(--nm-font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.cn-mod-metric, .cn-mod-thresh {
  display: inline-flex; gap: 4px;
  background: var(--nm-color-paper);
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--nm-color-line);
}

.cn-modules-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.cn-modules-l svg {
  width: 100%; max-width: 540px; height: auto; display: block;
  letter-spacing: 0;
}

.cn-mod-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  font-family: var(--nm-font-sans); font-size: 11.5px;
  margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--nm-color-line);
}
.cn-mod-meta div { display: flex; justify-content: space-between; }
.cn-mod-meta .k { color: var(--nm-color-ink-3); }
.cn-mod-meta .v {
  font-family: var(--nm-font-mono);
  font-weight: 600; color: var(--nm-color-ink);
}
.cn-mod-comm-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 320px; overflow-y: auto;
}
.cn-mod-comm-row {
  display: grid;
  grid-template-columns: 14px 50px 1fr;
  gap: 8px; align-items: center;
  font-family: var(--nm-font-mono); font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--nm-color-line);
}
.cn-mod-comm-row:last-child { border-bottom: none; }
.cn-mod-comm-row .sw {
  width: 12px; height: 12px; border-radius: 3px;
}
.cn-mod-comm-row .sz {
  color: var(--nm-color-ink-3); font-size: 10px;
}
.cn-mod-comm-row .mb { color: var(--nm-color-ink); }
.cn-mod-footnote {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--nm-color-line);
  font-family: var(--nm-font-sans);
  font-size: 11px; color: var(--nm-color-ink-3); font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════
 * CONNECTIVITY — Phase-amplitude coupling
 * ═════════════════════════════════════════════════════════════════════ */
.cn-pac-pair-head {
  margin: 14px 0 8px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nm-color-line);
}
.cn-pac-pair-head:first-child { margin-top: 0; }
.cn-pac-matrix-wrap { overflow-x: auto; margin-bottom: 22px; }
.cn-pac-matrix { width: 100%; }
.cn-pac-cell {
  text-align: center;
  font-family: var(--nm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--nm-color-ink);
  font-weight: 500;
  padding: 5px 8px !important;
}

.cn-comod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.cn-comod-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 7px;
  padding: 12px 12px 8px;
}
.cn-comod-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--nm-font-sans);
  font-size: 12px; margin-bottom: 8px;
}
.cn-comod-head .ch {
  font-family: var(--nm-font-mono);
  font-weight: 700; color: var(--nm-color-ink);
}
.cn-comod-head .peak {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  color: var(--nm-color-ink-3);
}
.cn-comod-svg {
  width: 100%; height: auto; display: block;
  border-radius: 3px; background: var(--nm-color-white);
}
.cn-pac-refs { margin-top: 18px; }

/* ═════════════════════════════════════════════════════════════════════
 * SOURCE LOCALIZATION page
 * ═════════════════════════════════════════════════════════════════════ */
.src-band-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 999px;
  width: fit-content;
}


/* Lobe summary grid */
.src-lobe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.src-lobe-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.src-lobe-title {
  font-family: var(--nm-font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--nm-color-ink);
  text-transform: capitalize;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nm-color-line);
}
.src-lobe-row {
  display: grid;
  grid-template-columns: 40px 1fr 60px;
  gap: 8px; align-items: center;
  font-family: var(--nm-font-mono); font-size: 11px;
  padding: 3px 0;
}
.src-lobe-row .b {
  color: var(--nm-color-ink-3);
}
.src-lobe-row .v {
  text-align: right; color: var(--nm-color-ink);
  font-variant-numeric: tabular-nums;
}
.src-lobe-bar {
  height: 6px; border-radius: 3px;
  background: var(--nm-color-card);
  overflow: hidden;
}
.src-lobe-fill {
  height: 100%; background: var(--nm-color-r-mid);
  transition: width 0.2s ease;
}

/* Source connectivity */
.src-conn-controls {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.src-conn-band {
  display: inline-flex; gap: 4px;
  background: var(--nm-color-paper);
  padding: 4px; border-radius: 999px;
  border: 1px solid var(--nm-color-line);
}
.src-conn-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
.src-conn-wrap canvas {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
  border: 1px solid var(--nm-color-line);
  border-radius: 4px;
}

/* Method block */
.src-method {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px 18px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--nm-color-line);
}
.src-method-row {
  display: flex; justify-content: space-between;
  font-family: var(--nm-font-sans); font-size: 11.5px;
  padding: 4px 0;
}
.src-method-row .k { color: var(--nm-color-ink-3); }
.src-method-row .v {
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink); font-weight: 500;
  text-align: right;
}

/* ═════════════════════════════════════════════════════════════════════
 * SOURCE LOCALIZATION — clinician-readable redesign
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Schematic brain views ──────────────────────────────────────── */
.src-brain-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
  gap: 18px;
  align-items: start;
}
.src-brain-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.src-brain-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 10px 12px 6px;
}
.src-brain-title {
  font-family: var(--nm-font-sans);
  font-size: 12px; font-weight: 600;
  color: var(--nm-color-ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.src-brain-svg {
  width: 100%; height: auto; display: block;
  letter-spacing: 0;
}
.src-brain-side {
  font-family: var(--nm-font-sans);
}
.src-section-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 10px;
}
.src-lobe-rank {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.src-lobe-rank-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 8px; align-items: center;
  font-family: var(--nm-font-sans); font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--nm-color-line);
}
.src-lobe-rank-row:last-child { border-bottom: none; }
.src-lobe-sw {
  width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--nm-color-ink-3);
}
.src-lobe-name {
  color: var(--nm-color-ink);
  text-transform: capitalize;
}
.src-lobe-val {
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink-3);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.src-lobe-note {
  font-family: var(--nm-font-sans);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--nm-color-line);
}

.src-brain-scale {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--nm-color-line);
  font-family: var(--nm-font-mono);
  font-size: 10.5px; color: var(--nm-color-ink-3);
}
.src-brain-scale-bar {
  width: 220px; height: 8px; border-radius: 4px;
  background: linear-gradient(to right,
    rgb(245,239,219) 0%, rgb(184,136,56) 50%, rgb(108,28,28) 100%);
}
.src-brain-scale-note {
  margin-left: 12px; font-style: italic;
}

/* ── Lobe-level connectivity matrix ─────────────────────────────── */
.src-lobe-conn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.src-lobe-matrix {
  width: 100%;
}
.src-lobe-matrix th, .src-lobe-matrix td {
  padding: 8px 10px;
  text-align: center;
  text-transform: capitalize;
}
.src-lobe-matrix th.src-lobe-h {
  font-family: var(--nm-font-sans);
  font-size: 10.5px; font-weight: 600;
  color: var(--nm-color-ink-3);
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--nm-color-line);
}
.src-lobe-cell {
  font-family: var(--nm-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--nm-color-paper);
  border-radius: 3px;
  min-width: 50px;
}

/* ── Top ROI connections list ───────────────────────────────────── */
.src-top-conn-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 540px; overflow-y: auto;
  padding-right: 4px;
}
.src-top-conn-row {
  padding: 8px 10px;
  background: var(--nm-color-paper);
  border-radius: 6px;
  border: 1px solid var(--nm-color-line);
}
.src-top-conn-pair {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  color: var(--nm-color-ink);
}
.src-top-conn-pair .ch {
  font-weight: 600;
}
.src-top-conn-pair .ch small {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  color: var(--nm-color-ink-3);
  margin-left: 2px;
}
.src-top-conn-pair .link {
  color: var(--nm-color-ink-3);
  font-size: 14px;
}
.src-top-conn-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-color-ink-3);
  margin-top: 3px;
  text-transform: capitalize;
}
.src-top-conn-intra_hemi { color: var(--nm-color-l-mid); }
.src-top-conn-inter_hemi { color: var(--nm-color-r-mid); }
.src-top-conn-bar {
  position: relative;
  height: 14px;
  background: var(--nm-color-card);
  border-radius: 3px;
  margin-top: 5px;
  overflow: hidden;
}
.src-top-conn-fill {
  height: 100%;
  border-radius: 3px;
}
.src-top-conn-val {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--nm-font-mono);
  font-size: 10.5px; font-weight: 600;
  color: var(--nm-color-ink);
}

/* Collapsible detail */
.src-detail-collapse summary {
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink-2);
  border-radius: 6px;
  user-select: none;
}
.src-detail-collapse summary:hover {
  background: var(--nm-color-paper);
}
.src-conn-wrap-detail {
  margin-top: 14px;
}
.src-conn-wrap-detail canvas {
  display: block; width: 100%; max-width: 540px; margin: 0 auto;
  image-rendering: pixelated;
  border: 1px solid var(--nm-color-line);
  border-radius: 4px;
}

.src-empty {
  padding: 24px; text-align: center;
  color: var(--nm-color-ink-3); font-style: italic;
}

@media (max-width: 900px) {
  .src-brain-grid { grid-template-columns: 1fr; }
  .src-brain-views { grid-template-columns: 1fr; }
  .src-lobe-conn-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
 * MICROSTATES page
 * ═════════════════════════════════════════════════════════════════════ */
.ms-maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.ms-map-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 10px;
  padding: 14px;
  display: flex; flex-direction: column;
}
.ms-map-head {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 10px;
}
.ms-map-letter {
  width: 44px; height: 44px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nm-color-white);
  font-family: var(--nm-font-sans);
  font-size: 22px; font-weight: 700;
  flex-shrink: 0;
}
.ms-map-text { min-width: 0; }
.ms-map-title {
  font-family: var(--nm-font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--nm-color-ink);
}
.ms-map-interp {
  font-family: var(--nm-font-sans);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  line-height: 1.35;
  margin-top: 2px;
}
.ms-map-svg-wrap {
  width: 100%; aspect-ratio: 1;
  background: var(--nm-color-paper);
  border-radius: 8px;
  margin-bottom: 10px;
}
.ms-map-svg-wrap svg {
  width: 100%; height: 100%; display: block;
  letter-spacing: 0;
}
.ms-map-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
}
.ms-map-stats div { display: flex; justify-content: space-between; }
.ms-map-stats .k { color: var(--nm-color-ink-3); }
.ms-map-stats .v {
  font-family: var(--nm-font-mono);
  color: var(--nm-color-ink);
  font-weight: 600;
}

/* ── Parameter bars ───────────────────────────────────────────────── */
.ms-bars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.ms-bar-card {
  background: var(--nm-color-card);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 14px;
}
.ms-bar-title {
  font-family: var(--nm-font-sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--nm-color-ink);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--nm-color-line);
}
.ms-bar-list { display: flex; flex-direction: column; gap: 6px; }
.ms-bar-row {
  display: grid; grid-template-columns: 28px 1fr 60px;
  align-items: center; gap: 8px;
}
.ms-bar-row .lbl {
  width: 24px; height: 24px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--nm-color-white);
  font-family: var(--nm-font-sans); font-size: 12px; font-weight: 600;
}
.ms-bar-row .bar {
  height: 16px;
  background: var(--nm-color-paper);
  border-radius: 4px; overflow: hidden;
}
.ms-bar-row .fill {
  height: 100%;
}
.ms-bar-row .val {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  color: var(--nm-color-ink);
  text-align: right;
}

/* ── Transition matrix ──────────────────────────────────────────── */
.ms-trans-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
}
.ms-trans-table {
  font-family: var(--nm-font-mono);
  font-size: 12.5px;
  text-align: center;
}
.ms-trans-table th, .ms-trans-table td {
  padding: 10px 14px;
  font-weight: 600;
  border: 1px solid var(--nm-color-paper);
  border-radius: 3px;
  min-width: 60px;
}
.ms-trans-table th {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  background: transparent;
}
.ms-trans-cell.self { opacity: 0.4; }
.ms-trans-note {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink-2);
  line-height: 1.5;
  padding-top: 8px;
}
.ms-trans-note strong { color: var(--nm-color-ink); }

/* ── GFP timeseries + ribbon ──────────────────────────────────── */
.ms-gfp-wrap {
  display: flex; flex-direction: column;
  gap: 4px;
  width: 100%;
}
.ms-gfp-wrap canvas {
  width: 100%; height: 160px;
  background: var(--nm-color-paper);
  border-radius: 4px;
  border: 1px solid var(--nm-color-line);
}
.ms-ribbon {
  display: flex;
  width: 100%; height: 22px;
  border-radius: 4px; overflow: hidden;
}
.ms-ribbon-seg {
  display: block; min-width: 0;
  cursor: pointer;
  transition: opacity 0.1s ease;
}
.ms-ribbon-seg:hover { opacity: 0.7; }
.ms-time-axis {
  position: relative;
  height: 16px;
  width: 100%;
  border-top: 1px dashed var(--nm-color-line);
  margin-top: 4px;
}
.ms-time-tick {
  position: absolute;
  transform: translateX(-50%);
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  color: var(--nm-color-ink-3);
  padding-top: 2px;
}

@media (max-width: 720px) {
  .ms-trans-wrap { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════════
 * CLINICAL BIOMARKERS page
 * ═════════════════════════════════════════════════════════════════════ */

/* Background grading cards */
.bm-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.bm-bg-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.bm-bg-k {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 4px;
}
.bm-bg-v {
  font-family: var(--nm-font-sans);
  font-size: 22px; font-weight: 600;
  color: var(--nm-color-ink);
}
.bm-bg-sub {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  margin-top: 4px;
  line-height: 1.35;
}

/* Eyes-open / eyes-closed strip */
.bm-eo-ec-strip { margin-top: 14px; }
.bm-eoec-head {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  margin-bottom: 6px;
}
.bm-eoec-lane {
  position: relative;
  height: 22px;
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 4px;
  overflow: hidden;
}
.bm-eoec-seg {
  position: absolute;
  top: 0; height: 100%;
  opacity: 0.7;
}
.bm-eoec-seg.bm-eoec-eo { background: var(--nm-color-l-mid); }
.bm-eoec-seg.bm-eoec-ec { background: var(--nm-color-r-mid); }
.bm-eoec-legend {
  display: flex; gap: 14px;
  margin-top: 6px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: var(--nm-color-ink-3);
}
.bm-eoec-legend span { display: flex; align-items: center; gap: 4px; }
.bm-eoec-legend .sw { width: 12px; height: 12px; border-radius: 2px; }

/* Flag banner block (re-used by background + vigilance sections) */
.bm-flags { margin-top: 12px; }
.bm-flags-head {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-color-warn);
  margin-bottom: 6px;
}
.bm-flag-row {
  padding: 8px 12px;
  background: rgba(184,136,56,0.12);
  border: 1px solid var(--nm-color-warn);
  border-radius: 6px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: var(--nm-color-ink);
  margin-bottom: 6px;
  line-height: 1.45;
}

/* Complexity time series cards */
.bm-complexity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.bm-cmx-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.bm-cmx-head { margin-bottom: 8px; }
.bm-cmx-name {
  font-family: var(--nm-font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--nm-color-ink);
}
.bm-cmx-sub {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: var(--nm-color-ink-3);
  margin-top: 2px;
}
.bm-cmx-canvas {
  width: 100%; height: 220px;
  display: block;
  background: var(--nm-color-paper);
  border-radius: 4px;
  border: 1px solid var(--nm-color-line);
}

/* Vigilance index cards */
.bm-vig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
.bm-vig-card {
  background: var(--nm-color-paper);
  border: 1px solid var(--nm-color-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.bm-vig-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.bm-vig-name {
  font-family: var(--nm-font-sans);
  font-size: 12.5px; font-weight: 600;
  color: var(--nm-color-ink);
}
.bm-vig-trend {
  font-family: var(--nm-font-mono);
  font-size: 11.5px; font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
}
.bm-vig-trend-stable { color: var(--nm-color-ink-3); background: var(--nm-color-card); }
.bm-vig-trend-strong { color: var(--nm-color-r-deep); background: rgba(180,72,68,0.15); }
.bm-vig-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  margin: 6px 0;
}
.bm-vig-stats div { display: flex; gap: 4px; }
.bm-vig-stats .k { color: var(--nm-color-ink-3); }
.bm-vig-stats .v { color: var(--nm-color-ink); font-weight: 600; }
.bm-vig-interp {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  font-style: italic;
  padding-top: 6px;
  border-top: 1px dashed var(--nm-color-line);
  margin-bottom: 6px;
}
.bm-vig-canvas {
  width: 100%; height: 120px; display: block;
  background: var(--nm-color-paper);
  border-radius: 4px;
  border: 1px solid var(--nm-color-line);
}

.bm-empty {
  padding: 24px; text-align: center;
  color: var(--nm-color-ink-3); font-style: italic;
}

/* Complexity-card interpretation line (LZ / SampEn / PE / DFA / etc.) */
.bm-cmx-interp {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: var(--nm-color-ink-3);
  font-style: italic;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   OVERVIEW · MINIMAL CLINICAL (v2)
   ─────────────────────────────────────────────────────────────────────
   Scoped to body.ov-min so we don't disturb the other 10 pages while
   the language is being approved. Once signed off, lift these tokens
   into theme.css and remove the old .results-body rules.
   ═════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   OVERVIEW · EDITORIAL HERO (v5)
   Built around one focal element (the brain) with floating data
   callouts and editorial sections. Award-winning minimalist clinical.
   ═════════════════════════════════════════════════════════════════════ */

body.ov-min {
  background: #fbfaf6;
  color: #0c0c0c;
  font-family: var(--nm-font-sans);
  letter-spacing: -0.004em;
  -webkit-font-smoothing: antialiased;
  animation: ovFadeIn 600ms ease-out;
}
@keyframes ovFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* sidebar harmonised */
body.ov-min .nm-sidebar {
  background: #fbfaf6;
  border-right: 1px solid #efece2;
}
body.ov-min .nm-sb-patient { background: #f3f0e6; }
body.ov-min .nm-sb-link:hover,
body.ov-min .nm-sb-link.is-active {
  background: #f3f0e6;
  color: #0c0c0c;
}
body.ov-min .nm-shell-main { background: transparent; }

/* SVG label letter-spacing reset (inherited from body crashes SVG text) */
body.ov-min svg text {
  letter-spacing: 0;
  font-feature-settings: normal;
}

/* ═══════════════════ PAGE LAYOUT ═══════════════════ */
.ov-page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 48px 80px;
  box-sizing: border-box;
}

/* ═══════════════════ TOP IDENTITY BAR ═══════════════════
   Two-column layout:
   LEFT  · patient name + clinical meta strip
   RIGHT · stacked compliance + Cleaned pill (chevron-expandable)
   The right column stays compact + always top-right so it doesn't
   wrap below the name even on narrower screens. */
.ov-id {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: nowrap;          /* keep R column to the right · no wrapping below */
  padding-bottom: 22px;
  border-bottom: 1px solid #efece2;
  margin-bottom: 0;
}
.ov-id-l {
  min-width: 0;
  flex: 1 1 auto;
}
.ov-id-name {
  margin: 0;
  font-size: 28px; font-weight: 700; letter-spacing: -0.025em;
  color: #0c0c0c;
  line-height: 1.05;
}
.ov-id-meta {
  margin-top: 6px;
  font-size: 13px; color: #6e6e6e;
  letter-spacing: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  align-items: center;
}
.ov-id-meta .dot { color: #c8c4b5; }
.ov-id-meta .ov-id-age { color: #8a8576; font-size: 12px; margin-left: 2px; }

/* Secondary technical-meta strip used on inner pages (timeline, etc.)
   sits BELOW the .ov-id identity bar, monospace tech details. */
.tl-secondary-meta {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  color: #8a8576;
  letter-spacing: 0.01em;
  margin: 6px 0 18px;
  padding: 0;
}

.ov-id-r {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* stack right-aligned */
  gap: 8px;
  margin-top: 2px;
  white-space: nowrap;
  text-align: right;
}
.ov-id-r .ov-confirm {
  display: block;              /* full width of the column so text-align works */
  text-align: right;
  font-size: 10.5px;
  color: #5a5546;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
}
/* The cleaning-badge host wraps the pill itself.  Ensure it sits flush
   right (matching the GDPR line above) rather than centred within the
   right column. */
.ov-id-r .nm-clean-host {
  display: inline-block;
  margin-left: auto;
}

/* Responsive · on small screens the right column slides under the name
   instead of squeezing horizontally. Keeps headers readable on tablets. */
@media (max-width: 720px) {
  .ov-id { flex-wrap: wrap; }
  .ov-id-r { align-items: flex-start; margin-top: 4px; }
}
.ov-btn-ghost {
  display: inline-flex; align-items: center;
  padding: 7px 13px;
  border: 1px solid #d8d4c5; border-radius: 999px;
  font-size: 12px; color: #2a2a2a; background: #ffffff;
  cursor: pointer; text-decoration: none;
  letter-spacing: 0;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.ov-btn-ghost:hover { background: #fafaf3; border-color: #c0bcab; transform: translateY(-1px); }

/* ═══════════════════ HERO ZONE ═══════════════════ */
.ov-hero {
  position: relative;
  padding: 56px 0 64px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(440px, 540px) minmax(180px, 1fr);
  gap: 40px;
  align-items: center;
}
.ov-hero::before {
  /* soft radial backdrop behind the brain — adds atmospheric depth */
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  background: radial-gradient(circle at center,
    rgba(255, 200, 190, 0.18) 0%,
    rgba(248, 112, 96, 0.04) 30%,
    transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ov-hero-headline {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: -8px;
  position: relative; z-index: 1;
}
.ov-hero-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a5546;
  margin-bottom: 14px;
}
.ov-hero-title {
  margin: 0;
  font-size: 44px; font-weight: 800; letter-spacing: -0.030em;
  color: #0c0c0c;
  line-height: 1.05;
  max-width: 740px; margin-inline: auto;
}
.ov-hero-title .coral { color: #f87060; }
.ov-hero-title .warn  { color: #c97b3a; }
.ov-hero-title .trend { color: #c9a13a; }
.ov-hero-title .pos   { color: #2d8a3c; }
.ov-hero-title .mute  { color: #5a5546; font-weight: 600; }

/* Clinical at-a-glance hints line below the main headline · smaller,
   sans-serif, with key numbers in the same severity palette as the
   callouts so a clinician's eye lands on the same red/amber/green cues
   in both places. */
.ov-hero-clinhints {
  margin-top: 14px;
  font-family: var(--nm-font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #2a2a2a;
  line-height: 1.4;
  text-align: center;
}
.ov-hero-clinhints .coral { color: #c33823; font-weight: 700; }
.ov-hero-clinhints .warn  { color: #b85a18; font-weight: 700; }
.ov-hero-clinhints .trend { color: #a8761a; font-weight: 700; }
.ov-hero-clinhints .pos   { color: #2d8a3c; font-weight: 700; }
.ov-hero-clinhints .mute  { color: #6e6e6e; font-weight: 500; font-family: var(--nm-font-mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ov-hero-dot {
  display: inline-block;
  margin: 0 14px;
  color: rgba(180, 160, 110, 0.50);
  font-weight: 400;
}

/* ── callouts on the left & right ── */
.ov-callouts {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 36px;
}
.ov-callouts-l { align-items: flex-end; text-align: right; }
.ov-callouts-r { align-items: flex-start; text-align: left; }

.ov-callout {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.ov-callout-l {
  font-family: var(--nm-font-mono);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #5a5546;
}

/* ── Two-line callout label · big clinical name + small technical descriptor.
   The clinical name is what a non-clinician reads ("Attention Index").
   The technical descriptor is what a clinician verifies ("theta ÷ beta at Cz · IFCN…"). */
.ov-callout-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  max-width: 260px;
}
.ov-callouts-l .ov-callout-name { align-items: flex-end; text-align: right; margin-left: auto; }
.ov-callouts-r .ov-callout-name { align-items: flex-start; text-align: left; margin-right: auto; }
.ov-callout-name-main {
  font-family: var(--nm-font-sans);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: #0c0c0c;
  line-height: 1.2;
}
.ov-callout-name-tech {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #6e6e6e;
  line-height: 1.4;
}
.ov-callout-name-tech sub {
  font-size: 9px;
}
.ov-callout-v {
  font-size: 32px; font-weight: 700; letter-spacing: -0.028em;
  color: #0c0c0c;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
}
.ov-callout-v .unit {
  font-size: 15px; font-weight: 600; color: #5a5546;
  letter-spacing: -0.008em;
  margin-left: 3px;
}
.ov-callout-v.coral { color: #c33823; }
.ov-callout-v.warn  { color: #b85a18; }
.ov-callout-v.trend { color: #a8761a; }
.ov-callout-v.pos   { color: #2d8a3c; }
.ov-callout-v.neutral { color: #0c0c0c; }
.ov-callout-sub {
  font-size: 11.5px; color: #5a5546; letter-spacing: 0;
  margin-top: 2px;
}

/* ── Status pill · the instant-readability badge ─────────────────────────
   Sits directly under the big value. Colour + arrow gives the at-a-glance
   verdict; the word gives the plain-English label. Right-aligned callouts
   on the left side, left-aligned on the right side (mirrors the .ov-callouts
   alignment). */
.ov-callout-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: var(--status-align, flex-start);
  padding: 4px 11px;
  margin-top: 8px;
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ov-callouts-l .ov-callout-status { align-self: flex-end; }
.ov-callouts-r .ov-callout-status { align-self: flex-start; }
.ov-callout-status .ov-cs-arrow {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}
.ov-callout-status.pill-pos     { background: rgba(45, 138, 60, 0.10); color: #1d6a28; border-color: rgba(45, 138, 60, 0.22); }
.ov-callout-status.pill-trend   { background: rgba(240, 213, 102, 0.22); color: #6a4a10; border-color: rgba(216, 180, 0, 0.30); }
.ov-callout-status.pill-warn    { background: rgba(184, 90, 24, 0.10); color: #8a4012; border-color: rgba(184, 90, 24, 0.28); }
.ov-callout-status.pill-coral   { background: rgba(195, 56, 35, 0.10); color: #8a1a10; border-color: rgba(195, 56, 35, 0.28); }
.ov-callout-status.pill-neutral { background: rgba(180, 160, 110, 0.10); color: #5a5546; border-color: rgba(180, 160, 110, 0.22); }

/* ── Plain-English meaning line · the "what does this actually mean" copy.
   Larger than the technical reference, smaller than the value, sans-serif
   for readability over a long sentence. */
.ov-callout-meaning {
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: #2a2a2a;
  margin-top: 8px;
  max-width: 240px;
}
.ov-callouts-l .ov-callout-meaning { text-align: right; margin-left: auto; }
.ov-callouts-r .ov-callout-meaning { text-align: left; margin-right: auto; }

/* ── Technical reference · norms, z-score, units · for the curious clinician.
   Smallest text, mono, muted — present but doesn't compete with the verdict. */
.ov-callout-tech {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: #8a8576;
  margin-top: 4px;
  line-height: 1.4;
  max-width: 260px;
}
.ov-callouts-l .ov-callout-tech { text-align: right; margin-left: auto; }
.ov-callouts-r .ov-callout-tech { text-align: left; margin-right: auto; }
/* thin connector line — points inward toward the brain */
.ov-callouts-l .ov-callout::after {
  content: "";
  position: absolute; top: 50%;
  right: -28px;  width: 20px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, #c8c4b5 100%);
}
.ov-callouts-r .ov-callout::before {
  content: "";
  position: absolute; top: 50%;
  left: -28px; width: 20px; height: 1px;
  background: linear-gradient(90deg, #c8c4b5 0%, transparent 100%);
}

/* ── the brain itself ── */
.ov-brain {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1 / 1;
}
.ov-brain svg {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 12px 24px rgba(40, 30, 20, 0.10));
}
/* Data-source footnote · sits below the brain so clinicians know exactly
   what the electrode colours mean and that every brain view on the page
   is reading from the same number. */
.ov-brain-source {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #6e6e6e;
  text-align: center;
  padding: 0 16px;
  max-width: 520px;
  margin: 4px auto 0;
}

/* Severity colour scale — the 5-tier mapping from |z| to electrode fill
   colour. Sits below the brain so a clinician glancing at a red electrode
   can read off exactly what z-score range produces that colour. */
.ov-brain-scale {
  margin-top: -8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px;
}
.ov-bs-label {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e6e;
  text-align: center;
}
.ov-bs-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40,30,20,0.08);
}
.ov-bs-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 4px;
  color: #ffffff;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}
.ov-bs-tier-name {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ov-bs-tier-z {
  font-size: 9px;
  opacity: 0.88;
  font-weight: 500;
}

/* Connection-quality legend · matches the three visual states clinicians
   see on the brain (good / poor / disconnected). */
.ov-brain-legend {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #5a5546;
  letter-spacing: 0;
}
.ov-bl-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ov-bl-sw {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ov-bl-high {
  background: #5cb46a;
  /* brighter halo for excellent contact */
  box-shadow:
    0 0 0 2px rgba(92,180,106,0.35),
    0 0 0 4px rgba(92,180,106,0.18);
  position: relative;
}
.ov-bl-chev {
  position: absolute;
  top: -3px; right: -3px;
  width: 8px; height: 8px;
  background: #fff;
  border: 1px solid #2d8a3c;
  border-radius: 50%;
  color: #2d8a3c;
  font-size: 7px;
  line-height: 6px;
  text-align: center;
  font-weight: 700;
}
.ov-bl-good { background: #f0d566; box-shadow: 0 0 0 2px rgba(240,213,102,0.25); }
.ov-bl-low {
  background: #e85838;
  box-shadow: 0 0 0 2px #fbfaf6, 0 0 0 3px #b85a18;
  border: 1px dashed transparent;
}
.ov-bl-poor {  /* legacy alias kept for any pages still using old class */
  background: #e85838;
  box-shadow: 0 0 0 2px #fbfaf6, 0 0 0 3px #b85a18;
}
.ov-bl-disc {
  background: #fbfaf6;
  border: 1.5px solid #a83520;
  position: relative;
}
.ov-bl-disc::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(135deg,
    transparent 42%, #a83520 42%, #a83520 58%, transparent 58%);
}
/* The brain image's white background is removed by the SVG filter
   #brainWhiteToAlpha (luminance → alpha). No CSS blend needed. */
/* the head outline gets a soft inner fill suggesting cortical surface */
.ov-brain .head-fill {
  fill: url(#headGradient);
}
.ov-brain .e-dot { transition: r 200ms; }
.ov-brain .e-dot-flag {
  animation: ovPulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ovPulse {
  0%, 100% { opacity: 0.35; r: 0.075; }
  50%      { opacity: 0.10; r: 0.115; }
}

/* ── auxiliary channels panel · spans hero full width ── */
.ov-aux {
  grid-column: 1 / -1;
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px dashed #e0d8c5;
}
.ov-aux-label {
  font-family: var(--nm-font-mono);
  font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a5546;
  text-align: center;
}
.ov-aux-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.ov-aux-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e8e0cd;
  font-family: var(--nm-font-mono);
  font-size: 12px; color: #2a2a2a;
  letter-spacing: 0; font-weight: 500;
  box-shadow: 0 1px 2px rgba(40, 30, 20, 0.04);
}
.ov-aux-chip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f3eedd; color: #5a5546;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}
.ov-aux-chip-name { color: #0c0c0c; font-weight: 600; }
.ov-aux-chip-kind {
  font-family: var(--nm-font-sans);
  font-size: 10.5px;
  color: #5a5546;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

/* ── below-hero clinical summary line ── */
.ov-hero-foot {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 14px; color: #6e6e6e;
  letter-spacing: -0.002em;
  line-height: 1.6;
  max-width: 720px; margin: 8px auto 0;
  position: relative; z-index: 1;
}
.ov-hero-foot .coral { color: #f87060; font-weight: 600; }
.ov-hero-foot strong { color: #0c0c0c; font-weight: 600; }

/* ═══════════════════ EDITORIAL SECTIONS ═══════════════════ */
.ov-section {
  padding: 48px 0;
  border-top: 1px solid #efece2;
}
.ov-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.ov-section-eyebrow {
  font-family: var(--nm-font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a5546;
}
.ov-section-title {
  margin: 6px 0 0;
  font-size: 28px; font-weight: 700; letter-spacing: -0.022em;
  color: #0c0c0c;
  line-height: 1.1;
}
.ov-section-aside {
  font-size: 13px; color: #5a5546; letter-spacing: 0;
  font-family: var(--nm-font-mono);
}

/* ═══════════ Spectral signature ═══════════ */
.ov-spectrum {
  display: flex; flex-direction: column;
  gap: 18px;
}
.ov-spectrum-row {
  display: grid; grid-template-columns: 80px 1fr 80px 96px;
  gap: 16px; align-items: center;
}
.ov-spectrum-row .lbl {
  font-size: 14px; color: #5a5546;
  letter-spacing: -0.005em;
}
.ov-spectrum-row .bar {
  position: relative;
  height: 16px; background: #f3f0e6; border-radius: 999px;
  overflow: hidden;
}
.ov-spectrum-row .fill {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, #f87060 0%, #ffa494 100%);
  border-radius: 999px;
  width: 0;
  animation: ovBarGrow 800ms cubic-bezier(.25,.8,.25,1) forwards;
}
/* Direction-aware fill colours · UP (elevated) = warm red, DOWN (reduced)
   = cool blue, MUTE (within typical range) = neutral cream. This stops
   the previous bug where low-alpha shared the red of high-delta. */
.ov-spectrum-row .fill { /* default = up = warm */
  background: linear-gradient(90deg, #f87060 0%, #ffa494 100%);
}
.ov-spectrum-row .fill.up {
  background: linear-gradient(90deg, #f87060 0%, #ffa494 100%);
}
.ov-spectrum-row .fill.down {
  background: linear-gradient(90deg, #5b8fc4 0%, #94b8dd 100%);
}
.ov-spectrum-row .fill.mute {
  background: linear-gradient(90deg, #d8d4c5 0%, #ebe7d8 100%);
}
.ov-spec-z { text-align: right; }
.ov-spec-tag {
  display: inline-block;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f0e6;
  color: #5a5546;
  letter-spacing: 0;
}
.ov-spec-tag.up   { background: rgba(248, 112, 96, 0.14); color: #b8412e; }
.ov-spec-tag.down { background: rgba(91, 143, 196, 0.16); color: #2f5b8c; }
@keyframes ovBarGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.ov-spectrum-row .val {
  text-align: right;
  font-size: 20px; font-weight: 700; color: #0c0c0c;
  letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.ov-spectrum-row .val .unit {
  font-size: 12px; color: #5a5546; font-weight: 600;
  margin-left: 1px;
}

/* ═══════════ Recording details + Subject ═══════════ */
.ov-2col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
}
@media (max-width: 760px) { .ov-2col { grid-template-columns: 1fr; gap: 32px; } }
.ov-kv-list {
  display: grid; grid-template-columns: 160px 1fr;
  row-gap: 14px; column-gap: 24px;
  font-size: 14px;
  letter-spacing: -0.004em;
}
.ov-kv-list .k { color: #5a5546; letter-spacing: 0; font-size: 12.5px; padding-top: 1px; }
.ov-kv-list .v { color: #0c0c0c; font-weight: 600; }
.ov-kv-list .v.mute { color: #5a5546; font-weight: 400; }
.ov-2col-h {
  font-family: var(--nm-font-mono);
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5a5546;
  margin: 0 0 16px;
}

/* ═══════════ Channels ═══════════ */
.ov-channels {
  display: flex; flex-direction: column; gap: 24px;
}
.ov-channels-summary {
  font-size: 16px; color: #5a5546;
  letter-spacing: -0.005em;
  display: flex; flex-direction: column; gap: 10px;
}
.ov-ch-summary-row {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: baseline;
}
.ov-ch-summary-row-aux {
  font-size: 13px; color: #6e6e6e;
  padding-top: 8px;
  border-top: 1px dashed rgba(180, 160, 110, 0.30);
}
.ov-ch-summary-label {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6e6e6e;
  min-width: 140px;
}
.ov-ch-summary-note {
  font-size: 11px;
  color: #8a8576;
  font-style: italic;
}
.ov-channels-summary strong {
  font-size: 24px; color: #0c0c0c; font-weight: 700;
  letter-spacing: -0.018em;
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
}
.ov-ch-summary-row-aux strong {
  font-size: 16px; color: #5a5546; font-weight: 600;
}
.ov-channels-summary .coral strong { color: #f87060; }
.ov-ch-pill.aux {
  background: #ece7d6;
  color: #6e6e6e;
}
.ov-ch-pill.aux::before { background: #a8a293; }
.ov-ch-pill.aux.flag,
.ov-ch-pill.aux.disc {
  background: #efe6d4;
  color: #8a6a3a;
  box-shadow: none;
}
.ov-ch-pill.aux.flag::before,
.ov-ch-pill.aux.disc::before { background: #b88838; }

/* "Not used in reports" treatment for aux channels — strikethrough line
   across the pill text + reduced opacity. Clinicians glancing at the
   inventory see "this electrode exists in the file but isn't part of any
   analysis we ran." Hover tooltip explains in full. */
.ov-ch-pill.not-used {
  opacity: 0.7;
  position: relative;
}
.ov-ch-pill.not-used::after {
  content: "";
  position: absolute;
  left: 18px;       /* clear of the leading dot */
  right: 10px;
  top: 50%;
  height: 1.5px;
  background: rgba(138, 106, 58, 0.55);
  pointer-events: none;
  border-radius: 1px;
}
.ov-channels-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ov-ch-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #f3f0e6;
  font-family: var(--nm-font-mono);
  font-size: 12px; color: #2a2a2a;
  letter-spacing: 0; font-weight: 500;
}
.ov-ch-pill::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #5a5546;
}
.ov-ch-pill.excellent {
  background: rgba(92, 180, 106, 0.14);
  color: #2a7a36;
  box-shadow: inset 0 0 0 1px rgba(92, 180, 106, 0.25);
}
.ov-ch-pill.excellent::before { background: #5cb46a; }
.ov-ch-pill.flag {
  background: rgba(248, 112, 96, 0.10);
  color: #b8412e;
}
.ov-ch-pill.flag::before { background: #f87060; }
.ov-ch-pill.disc {
  background: linear-gradient(180deg, #ff7d6d 0%, #f87060 100%);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(248, 112, 96, 0.25);
}
.ov-ch-pill.disc::before { background: #ffffff; }

/* ═══════════ Pipeline ═══════════ */
.ov-pipeline {
  display: flex; flex-direction: column;
  gap: 22px;
}
.ov-pipeline-bar {
  display: flex; height: 10px; border-radius: 999px;
  overflow: hidden;
  background: #f3f0e6;
}
.ov-pipeline-seg {
  height: 100%;
  border-right: 1px solid #fbfaf6;
}
.ov-pipeline-list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px 32px;
  font-size: 12.5px;
}
@media (max-width: 760px) { .ov-pipeline-list { grid-template-columns: 1fr 1fr; } }
.ov-pipeline-row {
  display: grid; grid-template-columns: 8px 1fr auto;
  gap: 10px; align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f3f0e6;
}
.ov-pipeline-row .swatch {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--swatch, #cfcfcf);
}
.ov-pipeline-row .step { color: #2a2a2a; letter-spacing: -0.003em; }
.ov-pipeline-row .val {
  text-align: right; color: #5a5546;
  font-variant-numeric: tabular-nums;
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
}

/* ═══════════ Cleaning provenance strip (replaces footer cleaning-badge styling) ═══════════ */
body.ov-min .nm-clean-host { display: inline-flex; }

/* ═══════════ Responsive ═══════════ */
@media (max-width: 1020px) {
  .ov-hero { grid-template-columns: 1fr; gap: 32px; }
  .ov-callouts-l, .ov-callouts-r {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    text-align: center; gap: 28px;
  }
  .ov-callouts-l { align-items: flex-start; }
  .ov-callouts-l .ov-callout::after,
  .ov-callouts-r .ov-callout::before { display: none; }
  .ov-brain { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .ov-page { padding: 24px 20px 60px; }
  .ov-hero-title { font-size: 32px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CLINICAL EDITORIAL SECTIONS · "sneak preview" pattern (v6)
   Each section is a self-contained clinical reading with:
   ─ § NN / NAME eyebrow at top right
   ─ Serif display title
   ─ Mono uppercase sub-tags row
   ─ Big serif display value with unit
   ─ Severity context line (BELOW/ABOVE NORM · norm · z-score)
   ─ Mini-visualization (bell curve, gauge, hemisphere viz)
   ─ Reference table where applicable
   ─ Italic caption with interpretation
   ═════════════════════════════════════════════════════════════════════ */

.ov-clin {
  padding: 56px 0;
  border-top: 1px solid #e8e2d0;
}
.ov-clin-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8e2d0;
  margin-bottom: 26px;
}
.ov-clin-title {
  margin: 0;
  font-family: var(--nm-font-sans);
  font-size: 32px; font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.024em;
  line-height: 1.05;
}
.ov-clin-ref {
  font-family: var(--nm-font-mono);
  font-size: 12px; color: #5a5546;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ov-clin-tags {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  color: #5a5546;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* ── Side-by-side layout (left: display+context, right: chart/table) ── */
.ov-clin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 880px) {
  .ov-clin-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Big display value (Inter sans bold, matching the hero headline) */
.ov-clin-display {
  font-family: var(--nm-font-sans);
  font-size: 72px;
  font-weight: 800;
  color: #0c0c0c;
  letter-spacing: -0.032em;
  line-height: 1;
  margin: 4px 0 14px;
  font-variant-numeric: tabular-nums;
}
.ov-clin-display .unit {
  font-family: var(--nm-font-sans);
  font-style: normal;
  font-size: 24px;
  color: #5a5546;
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.ov-clin-display.coral { color: #c33823; }
.ov-clin-display.warn  { color: #d77e3a; }
.ov-clin-display.good  { color: #2d8a3c; }

/* Context: a fact list (full-sentence label + value rows). No more cryptic
   mono-uppercase "M 10.4 · Σ 0.60 · z = -4.4" — clinicians read this fast. */
.ov-clin-context {
  display: flex; flex-direction: column;
  gap: 0;
  margin-bottom: 24px;
  max-width: 520px;
}
.ov-clin-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #f0eadc;
}
.ov-clin-fact:last-child { border-bottom: none; }
.ov-clin-fact-l {
  font-family: var(--nm-font-sans);
  font-size: 13.5px; font-weight: 400;
  color: #5a5546;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.ov-clin-fact-v {
  font-family: var(--nm-font-sans);
  font-size: 17px; font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.014em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ov-clin-fact-v.sev-critical    { color: #c33823; }
.ov-clin-fact-v.sev-significant { color: #d77e3a; }
.ov-clin-fact-v.sev-trending    { color: #b88838; }
.ov-clin-fact-v.sev-within      { color: #2d8a3c; }
.ov-clin-fact-v .sev-critical    { color: #c33823; font-weight: 700; }
.ov-clin-fact-v .sev-significant { color: #d77e3a; font-weight: 700; }
.ov-clin-fact-v .sev-trending    { color: #b88838; font-weight: 700; }
.ov-clin-fact-v .sev-within      { color: #2d8a3c; font-weight: 700; }

/* ── Interpretation / caption block ── */
.ov-clin-interp {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed #d8cdb8;
  font-style: italic;
  font-size: 14px;
  color: #5a5546;
  line-height: 1.55;
  letter-spacing: -0.002em;
  max-width: 720px;
}

/* ── Bell-curve distribution (matches the reference IAF chart) ── */
.ov-distrib {
  width: 100%;
  max-width: 560px;
}
.ov-distrib svg { width: 100%; height: auto; display: block; }

/* ── Band-edge reference table (δ θ α β1 β2) ── */
.ov-bandref {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 14px;
  max-width: 560px;
}
.ov-bandref-cell {
  border: 1px solid #d8cdb8;
  border-radius: 6px;
  padding: 14px 6px 12px;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  background: #fbf8f0;
}
.ov-bandref-cell.active {
  background: #f5edd5;
  border-color: #c5b890;
  box-shadow: inset 0 0 0 1px #c5b890;
}
.ov-bandref-greek {
  font-family: var(--nm-font-sans);
  font-size: 24px;
  font-weight: 600;
  color: #0c0c0c;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ov-bandref-name {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  color: #5a5546;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}
.ov-bandref-range {
  font-family: var(--nm-font-sans);
  font-size: 11px;
  color: #5a5546;
  letter-spacing: -0.002em;
  font-weight: 400;
}

/* ── Gauge (for ratios like theta/beta) ── */
.ov-gauge {
  width: 100%;
  max-width: 560px;
}
.ov-gauge svg { width: 100%; height: auto; display: block; }

/* ── Hemisphere asymmetry viz ── */
.ov-asym {
  width: 100%;
  max-width: 560px;
}
.ov-asym svg { width: 100%; height: auto; display: block; }

/* ── Auto-narrative summary block (matches hero headline style) ── */
/* Data-caveats banner · honest disclosure when material inputs are missing
   or inferred. Sits above the narrative so clinicians see caveats first. */
.ov-caveats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}
.ov-caveat {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid;
  background: #fffaf2;
}
.ov-caveat-warn {
  border-color: rgba(184, 90, 24, 0.30);
  background: #fff5e8;
}
.ov-caveat-info {
  border-color: rgba(91, 143, 196, 0.30);
  background: #f1f6fb;
}
.ov-caveat-icon {
  font-size: 18px;
  line-height: 1.3;
  text-align: center;
  font-weight: 700;
}
.ov-caveat-warn .ov-caveat-icon { color: #b85a18; }
.ov-caveat-info .ov-caveat-icon { color: #2f5b8c; }
.ov-caveat-title {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 3px;
}
.ov-caveat-warn .ov-caveat-title { color: #8a4012; }
.ov-caveat-info .ov-caveat-title { color: #234870; }
.ov-caveat-text {
  font-family: var(--nm-font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: #2a2a2a;
}
.ov-caveat-text strong { font-weight: 700; color: #0c0c0c; }

.ov-narrative {
  font-family: var(--nm-font-sans);
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.55;
  letter-spacing: -0.014em;
  /* Span the full section width — the old 820px cap created a wide empty
     gutter on the right which made the section look unbalanced. */
  max-width: 100%;
  margin: 8px 0 0;
}
.ov-narrative .em { color: #c33823; font-weight: 700; }
.ov-narrative .pos { color: #2d8a3c; font-weight: 700; }
.ov-narrative .warn { color: #b85a18; font-weight: 700; }
.ov-narrative .trend { color: #a8761a; font-weight: 700; }
.ov-narrative .mute { color: #6e6e6e; font-weight: 400; }

/* ═════════════════════════════════════════════════════════════════════
   § 07 · Analysis findings · v2 visual redesign
   ─ Power: heatmap (band × lobe) + per-band clinical cards w/ severity meters
   ─ Asymmetry: diverging L|R power bars per pair, status pill, clinical note
   ════════════════════════════════════════════════════════════════════ */
.ov-find-subhead {
  margin: 28px 0 4px;
  font-family: var(--nm-font-sans);
  font-size: 17px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.012em;
}
.ov-find-subtags {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #6e6e6e;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.ov-find-empty {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  color: #2d6a36;
  padding: 14px 16px;
  background: rgba(45, 138, 60, 0.06);
  border-radius: 8px;
  border-left: 3px solid #5cb46a;
}

/* ── 07a · Compact severity strip · 6 bands × 6 lobes in one glance ── */
.ov-pwr-heatmap {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}
/* shared grid template so header / rows / foot stay perfectly column-aligned.
   Findings column widened to 220px so chips like "3 critical · 1 sig. · 2 mild"
   stay on a single line. Inner columns slightly narrower to compensate. */
.ov-strip-head,
.ov-strip-row {
  display: grid;
  grid-template-columns: 64px repeat(6, 1fr) 240px;
  align-items: center;
  gap: 0 12px;
}
.ov-strip-head {
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(180, 160, 110, 0.18);
  margin-bottom: 4px;
}
.ov-strip-lobe-hd,
.ov-strip-summary-hd {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8576;
  text-align: center;
}
.ov-strip-summary-hd { text-align: right; padding-right: 4px; }
.ov-strip-row {
  padding: 6px 4px;
}
.ov-strip-row:hover { background: rgba(180, 160, 110, 0.04); border-radius: 6px; }
.ov-strip-band-col {
  font-family: var(--nm-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.005em;
}
.ov-strip-dot {
  width: 100%;
  max-width: 36px;
  justify-self: center;
  height: 10px;
  border-radius: 3px;
  cursor: help;
  transition: transform 120ms, height 120ms;
}
.ov-strip-dot:hover { transform: scaleY(1.6); }
/* Severity tier colours (elevated = warm, reduced = cool) */
.ov-strip-dot.tier-norm           { background: #ece7d6; }
.ov-strip-dot.tier-mild.dir-ele   { background: #f0d566; }
.ov-strip-dot.tier-sig.dir-ele    { background: #f3a557; }
.ov-strip-dot.tier-crit.dir-ele   { background: #e85838; }
.ov-strip-dot.tier-mild.dir-red   { background: #b6c8da; }
.ov-strip-dot.tier-sig.dir-red    { background: #7da6cf; }
.ov-strip-dot.tier-crit.dir-red   { background: #5b8fc4; }
/* Per-band summary chips (right column).
   nowrap + a smaller font keep "3 critical · 1 sig. · 2 mild" on one line. */
.ov-strip-summary {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.ov-strip-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-family: var(--nm-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.ov-strip-chip.crit { background: rgba(232, 88, 56, 0.14);  color: #8a1a10; }
.ov-strip-chip.sig  { background: rgba(243, 165, 87, 0.18); color: #8a4012; }
.ov-strip-chip.mild { background: rgba(240, 213, 102, 0.22); color: #6a4a10; }
.ov-strip-chip.ok   { background: rgba(45, 138, 60, 0.10);  color: #1d6a28; }
/* Foot legend */
.ov-strip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(180, 160, 110, 0.18);
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #6e6e6e;
}
.ov-strip-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ov-strip-foot .ov-strip-dot { width: 14px; height: 6px; cursor: default; }
.ov-strip-foot .ov-strip-dot:hover { transform: none; }
.ov-strip-foot-sep { color: rgba(180, 160, 110, 0.50); }

/* ── 07a · Per-band clinical narrative cards ─────────────────────── */
.ov-pwr-narrative {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.ov-pwr-card {
  background: #ffffff;
  border: 1px solid rgba(180, 160, 110, 0.20);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(40,30,20,0.04);
}
.ov-pwr-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 6px;
}
.ov-pwr-band-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ov-pwr-band-name {
  font-family: var(--nm-font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #0c0c0c;
  line-height: 1;
}
.ov-pwr-band-tag {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #6e6e6e;
  letter-spacing: 0.04em;
}
.ov-pwr-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ov-pwr-pill.tier-critical    { background: rgba(195, 56, 35, 0.12); color: #8a1a10; }
.ov-pwr-pill.tier-significant { background: rgba(243, 165, 87, 0.18); color: #8a4012; }
.ov-pwr-pill.tier-trending    { background: rgba(240, 213, 102, 0.22); color: #6a4a10; }
.ov-pwr-pill.tier-normal      { background: rgba(45, 138, 60, 0.10); color: #1d6a28; }
.ov-pwr-clinical-note {
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  font-style: italic;
  color: #5a5546;
  margin: 4px 0 12px;
  line-height: 1.45;
}
.ov-pwr-lobes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ov-pwr-lobe-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #fbfaf6;
  border-radius: 8px;
}
.ov-pwr-lobe-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ov-pwr-lobe-name {
  font-family: var(--nm-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #0c0c0c;
}
.ov-pwr-lobe-verdict {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ov-pwr-lobe-verdict.tier-critical    { color: #8a1a10; }
.ov-pwr-lobe-verdict.tier-significant { color: #8a4012; }
.ov-pwr-lobe-verdict.tier-trending    { color: #6a4a10; }
.ov-pwr-meter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ov-pwr-meter {
  position: relative;
  flex: 1;
  height: 8px;
  background: #ece7d6;
  border-radius: 4px;
  overflow: hidden;
}
.ov-pwr-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  transition: width 600ms cubic-bezier(.25, .8, .25, 1);
}
.ov-pwr-meter-fill.tier-critical    { background: linear-gradient(90deg, #f87060 0%, #c33823 100%); }
.ov-pwr-meter-fill.tier-significant { background: linear-gradient(90deg, #f3a557 0%, #b85a18 100%); }
.ov-pwr-meter-fill.tier-trending    { background: linear-gradient(90deg, #f0d566 0%, #a8761a 100%); }
.ov-pwr-meter-tick {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.60);
}
.ov-pwr-meter-val {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: #5a5546;
  white-space: nowrap;
}
.ov-pwr-chans {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ov-pwr-chan-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: help;
}
.ov-pwr-chan-chip.tier-critical    { background: rgba(195, 56, 35, 0.14); color: #8a1a10; border: 1px solid rgba(195, 56, 35, 0.30); }
.ov-pwr-chan-chip.tier-significant { background: rgba(243, 165, 87, 0.18); color: #8a4012; border: 1px solid rgba(243, 165, 87, 0.35); }
.ov-pwr-chan-chip.tier-trending    { background: rgba(240, 213, 102, 0.22); color: #6a4a10; border: 1px solid rgba(240, 213, 102, 0.40); }

/* Clinical implication line under each lobe row · concise + plain language */
.ov-pwr-lobe-impact {
  font-family: var(--nm-font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: #5a4a30;
  padding: 6px 10px;
  background: rgba(255, 252, 240, 0.75);
  border-radius: 6px;
  margin-top: 2px;
}
.ov-pwr-lobe-impact::before {
  content: "↳ ";
  color: #a8a293;
  font-weight: 600;
}

/* Asymmetry summary banner */
.ov-asym-summary {
  margin: 12px 0 14px;
}
.ov-asym-sum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.ov-asym-sum-card {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid;
}
.ov-asym-sum-card.high     { background: rgba(195, 56, 35, 0.06); border-color: rgba(195, 56, 35, 0.25); }
.ov-asym-sum-card.moderate { background: rgba(184, 90, 24, 0.06); border-color: rgba(184, 90, 24, 0.25); }
.ov-asym-sum-card.normal   { background: rgba(45, 138, 60, 0.06); border-color: rgba(45, 138, 60, 0.25); }
.ov-asym-sum-n {
  font-family: var(--nm-font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0c0c0c;
}
.ov-asym-sum-card.high   .ov-asym-sum-n { color: #c33823; }
.ov-asym-sum-card.moderate .ov-asym-sum-n { color: #b85a18; }
.ov-asym-sum-card.normal .ov-asym-sum-n { color: #2d8a3c; }
.ov-asym-sum-lbl {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e6e;
  margin-top: 4px;
}
.ov-asym-sum-sub {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  color: #2a2a2a;
  margin-top: 6px;
  line-height: 1.4;
}

/* ── 07b · Per-band asymmetry · diverging L|R bar cards ─────────────── */
.ov-find-asym {
  display: flex;
  flex-direction: column;
  gap: 32px;        /* more space between bands so they read as sections */
  margin-top: 14px;
}
.ov-asym-band {
  background: transparent;
  padding: 0;
}
.ov-asym-band-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 0 0 12px 0;
  border-bottom: 2px solid rgba(180, 160, 110, 0.35);
  margin-bottom: 14px;
}
.ov-asym-band-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov-asym-band-name {
  font-family: var(--nm-font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: #0c0c0c;
  line-height: 1;
}
.ov-asym-band-tag {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #6e6e6e;
}
.ov-asym-band-count {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  color: #5a5546;
  background: rgba(180, 160, 110, 0.10);
  border: 1px solid rgba(180, 160, 110, 0.22);
}
.ov-asym-band-count strong {
  font-weight: 800;
  color: #0c0c0c;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ov-asym-band-count.sev-high {
  background: rgba(195, 56, 35, 0.08);
  border-color: rgba(195, 56, 35, 0.25);
  color: #8a1a10;
}
.ov-asym-band-count.sev-high strong { color: #c33823; }
.ov-asym-band-count.sev-moderate {
  background: rgba(184, 90, 24, 0.08);
  border-color: rgba(184, 90, 24, 0.25);
  color: #8a4012;
}
.ov-asym-band-count.sev-moderate strong { color: #b85a18; }
.ov-asym-band-count.sev-normal {
  background: rgba(45, 138, 60, 0.08);
  border-color: rgba(45, 138, 60, 0.22);
  color: #1d6a28;
}
.ov-asym-band-count.sev-normal strong { color: #2d8a3c; }
.ov-asym-band-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ov-asym-pair-card {
  background: #ffffff;
  border: 1px solid rgba(180, 160, 110, 0.20);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ov-asym-pair-card.sev-normal   { opacity: 0.78; }
.ov-asym-pair-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.ov-asym-pair-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ov-asym-pair-name {
  font-family: var(--nm-font-sans);
  font-size: 14px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.005em;
}
.ov-asym-pair-region {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #6e6e6e;
  letter-spacing: 0.04em;
}
.ov-asym-pair-status {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ov-asym-pair-ai {
  font-family: var(--nm-font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  font-variant-numeric: tabular-nums;
}
.ov-asym-pair-pill {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}
/* Diverging L|R bars */
.ov-asym-bars {
  display: grid;
  grid-template-columns: 1fr 22px 1fr;
  gap: 6px;
  align-items: center;
}
.ov-asym-side {
  display: grid;
  grid-template-columns: 50px 1fr 60px;
  align-items: center;
  gap: 6px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
}
.ov-asym-side.left  { grid-template-columns: 50px 1fr 60px; }
.ov-asym-side.right { grid-template-columns: 60px 1fr 50px; }
.ov-asym-side-label {
  font-weight: 700;
  color: #0c0c0c;
}
.ov-asym-side.left .ov-asym-side-label  { text-align: left; }
.ov-asym-side.right .ov-asym-side-label { text-align: right; }
.ov-asym-side-val {
  color: #5a5546;
  font-variant-numeric: tabular-nums;
}
.ov-asym-side.left .ov-asym-side-val  { text-align: right; }
.ov-asym-side.right .ov-asym-side-val { text-align: left; }
.ov-asym-bar-track {
  position: relative;
  height: 14px;
  background: #f3f0e6;
  border-radius: 4px;
  overflow: hidden;
}
.ov-asym-bar-track.right-align .ov-asym-bar {
  left: auto;
  right: 0;
}
.ov-asym-bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  background: linear-gradient(90deg, #c8c4b5 0%, #b09870 100%);
  border-radius: 4px;
  transition: width 600ms cubic-bezier(.25, .8, .25, 1);
}
.ov-asym-bar-track.right-align .ov-asym-bar {
  background: linear-gradient(270deg, #c8c4b5 0%, #b09870 100%);
}
/* The dominant side gets a stronger colour */
.sev-high .ov-asym-bar.dominant     { background: linear-gradient(90deg, #e85838 0%, #c33823 100%); }
.sev-high .ov-asym-bar-track.right-align .ov-asym-bar.dominant
                                    { background: linear-gradient(270deg, #e85838 0%, #c33823 100%); }
.sev-moderate .ov-asym-bar.dominant { background: linear-gradient(90deg, #f3a557 0%, #b85a18 100%); }
.sev-moderate .ov-asym-bar-track.right-align .ov-asym-bar.dominant
                                    { background: linear-gradient(270deg, #f3a557 0%, #b85a18 100%); }
.sev-normal .ov-asym-bar.dominant   { background: linear-gradient(90deg, #a8d472 0%, #5cb46a 100%); }
.sev-normal .ov-asym-bar-track.right-align .ov-asym-bar.dominant
                                    { background: linear-gradient(270deg, #a8d472 0%, #5cb46a 100%); }
.ov-asym-dominant {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.sev-high     .ov-asym-dominant { color: #c33823; }
.sev-moderate .ov-asym-dominant { color: #b85a18; }
.sev-normal   .ov-asym-dominant { color: #6e6e6e; }
.ov-asym-finding {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  margin-top: 2px;
}
.ov-asym-finding.sev-high     { background: rgba(195, 56, 35, 0.07); color: #8a1a10; }
.ov-asym-finding.sev-moderate { background: rgba(184, 90, 24, 0.07); color: #8a4012; }
.ov-asym-finding.sev-normal   { background: rgba(180, 160, 110, 0.10); color: #5a5546; }

/* ── Section 05 · Primary-pair label + Secondary-pairs panel ───────────
   Below the F3-F4 primary, we render F7-F8 and Fp1-Fp2 as triangulation
   pairs. The label above the primary makes it explicit which pair the
   big number refers to; the secondary panel reuses the diverging L|R
   bars from §07 so the visual grammar matches. */
.ov-asym-primary-label {
  margin-top: 14px;
  margin-bottom: 10px;
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5546;
}
.ov-asym-secondary-head {
  margin: 28px 0 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(180, 160, 110, 0.25);
}
.ov-asym-secondary-title {
  font-family: var(--nm-font-sans);
  font-size: 17px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.012em;
  margin-bottom: 3px;
}
.ov-asym-secondary-sub {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  color: #6e6e6e;
  letter-spacing: 0.04em;
}
.ov-asym-secondary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* "PRIMARY" tag chip in the F3-F4 pair card title — marks the Davidson clinical primary */
.ov-asym-primary-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #0c0c0c;
  color: #ffffff;
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 2px;
}
/* Subtle elevation on the primary card so it visually anchors the group */
.ov-asym-pair-card.is-primary {
  box-shadow: 0 2px 6px rgba(40, 30, 20, 0.06);
  border-width: 1.5px;
}

/* Technical-reference row in the F3-F4 fact list · smaller + mono so the
   Davidson log-asym value reads as "supporting detail" not as another
   primary stat that could be confused with the AI% above. */
.ov-clin-fact.ov-clin-fact-tech {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(180, 160, 110, 0.30);
  opacity: 0.85;
}
.ov-clin-fact.ov-clin-fact-tech .ov-clin-fact-l,
.ov-clin-fact.ov-clin-fact-tech .ov-clin-fact-v {
  font-family: var(--nm-font-mono);
  font-size: 11.5px;
  color: #5a5546;
}

/* Small mono caption above the brain SVG to clue the reader that the
   visualisation now shows all 3 pairs (not just F3-F4 as before). */
.ov-asym-viz-label {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #6e6e6e;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.4;
}

/* ── Deviation list · Brodmann regions exceeding |z| > 2 ── */
.ov-devs {
  display: flex; flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid #efece2;
}
.ov-dev-row {
  display: grid;
  grid-template-columns: 56px 110px 90px 1fr 72px;
  gap: 16px; align-items: center;
  padding: 14px 4px;
  font-size: 14px;
  border-bottom: 1px solid #efece2;
}
.ov-dev-channel {
  font-family: var(--nm-font-sans);
  font-size: 15px;
  font-weight: 700; color: #0c0c0c;
  letter-spacing: -0.01em;
}
.ov-dev-band {
  font-family: var(--nm-font-sans);
  font-weight: 500;
  color: #5a5546;
  letter-spacing: -0.005em;
}
.ov-dev-band .greek {
  font-size: 17px; font-weight: 600;
  color: #0c0c0c;
  margin-right: 4px;
}
.ov-dev-ba {
  font-family: var(--nm-font-mono);
  font-size: 11px; color: #5a5546;
  letter-spacing: 0.05em;
}
.ov-dev-bar-wrap {
  position: relative;
  height: 4px;
  background: #f0eadc;
  border-radius: 999px;
  overflow: visible;
}
.ov-dev-bar-zero {
  position: absolute; left: 50%; top: -3px; bottom: -3px;
  width: 1px; background: #c5b890;
}
.ov-dev-bar {
  position: absolute; top: 0; bottom: 0;
  border-radius: 999px;
}
.ov-dev-bar.pos { background: #c33823; left: 50%; }
.ov-dev-bar.neg { background: #2d8a3c; right: 50%; }
.ov-dev-z {
  font-family: var(--nm-font-sans);
  font-size: 17px; font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.012em;
}
.ov-dev-z.pos { color: #c33823; }
.ov-dev-z.neg { color: #2d8a3c; }
.ov-dev-z.warn { color: #d77e3a; }
.ov-dev-z.trend { color: #b88838; }

/* ── Vigilance grid (5 indices) ── */
.ov-vig-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 880px) { .ov-vig-grid { grid-template-columns: repeat(2, 1fr); } }
.ov-vig {
  padding: 16px 14px;
  background: #fbf8f0;
  border-radius: 10px;
}
.ov-vig-label {
  font-family: var(--nm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5a5546;
  margin-bottom: 6px;
}
.ov-vig-value {
  font-family: var(--nm-font-sans);
  font-size: 26px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.0;
}
.ov-vig-sub { font-size: 11.5px; color: #5a5546; margin-top: 4px; letter-spacing: 0; }

/* ── Vigilance card status pill + plain-English meaning ──
   Mirrors the hero-callout treatment so any number in the page
   gets the same instant-readability treatment. */
.ov-vig-status {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--nm-font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1;
  border: 1px solid transparent;
}
.ov-vig-status.pill-pos     { background: rgba(45, 138, 60, 0.12);  color: #1d6a28; border-color: rgba(45, 138, 60, 0.25); }
.ov-vig-status.pill-trend   { background: rgba(240, 213, 102, 0.25); color: #6a4a10; border-color: rgba(216, 180, 0, 0.30); }
.ov-vig-status.pill-warn    { background: rgba(184, 90, 24, 0.12);  color: #8a4012; border-color: rgba(184, 90, 24, 0.28); }
.ov-vig-status.pill-coral   { background: rgba(195, 56, 35, 0.12);  color: #8a1a10; border-color: rgba(195, 56, 35, 0.28); }
.ov-vig-status.pill-neutral { background: rgba(180, 160, 110, 0.10); color: #5a5546; border-color: rgba(180, 160, 110, 0.22); }
.ov-vig-meaning {
  font-family: var(--nm-font-sans);
  font-size: 12px;
  line-height: 1.42;
  color: #2a2a2a;
  margin-top: 8px;
}
/* Card-level severity tint · subtle left-edge accent that doesn't shout */
.ov-vig.pill-pos     { background: #f4faf3; }
.ov-vig.pill-trend   { background: #fbf6df; }
.ov-vig.pill-warn    { background: #fbeede; }
.ov-vig.pill-coral   { background: #fbe5e0; }
.ov-vig.pill-neutral { background: #fbf8f0; }

/* ── Recording parameters grid ── */
.ov-rec-params {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 880px) { .ov-rec-params { grid-template-columns: repeat(2, 1fr); } }
.ov-param-l {
  font-family: var(--nm-font-mono);
  font-size: 11px; letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #5a5546;
  margin-bottom: 4px;
}
.ov-param-v {
  font-family: var(--nm-font-sans);
  font-size: 20px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.020em;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   BRAIN FUNCTIONS · § 06
   Side-view brain SVG with 6 lobes color-coded by patient status,
   each lobe paired with a function-impact card.
   ════════════════════════════════════════════════════════════════════ */
/* Full-width brain on top, lobe cards in a grid below */
.ov-bf {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ov-bf-brain {
  display: flex; flex-direction: column;
  gap: 14px;
  background: #fbf8f0;
  border-radius: 14px;
  padding: 22px;
  width: 100%;
}
.ov-bf-brain svg {
  width: 100%; height: auto;
  display: block;
}
/* Lobe cards in a 2-row grid (3 columns) below the brain */
.ov-bf-lobes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) {
  .ov-bf-lobes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ov-bf-lobes { grid-template-columns: 1fr; }
}

/* Severity palette (matches the diverging scale used elsewhere) */
.ov-bf-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #5a5546; }
.ov-bf-leg .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ov-bf-leg.ok    .dot { background: #5cb46a; }
.ov-bf-leg.trend .dot { background: #f0d566; }
.ov-bf-leg.warn  .dot { background: #f3a557; }
.ov-bf-leg.crit  .dot { background: #c33823; }
.ov-bf-leg.na    .dot { background: #cdc3a8; border: 1px dashed #a8a293; }
.ov-bf-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding-top: 6px; border-top: 1px solid #ecdfc5;
}

/* Lobe label tags ON the brain SVG (positioned via JS).
   CRITICAL: do NOT set font-size in px here — inside an SVG, CSS px on
   text gets reinterpreted relative to the viewBox user units in some
   render paths, producing huge glyphs that paint over the whole SVG.
   Sizing is handled by the inline `font-size` attribute (user units). */
.ov-bf-svg-label {
  font-family: var(--nm-font-sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #2a2418;
}

/* Lobe function cards — one per lobe (grid layout defined above) */
.ov-bf-lobe {
  background: #ffffff;
  border: 1px solid #ecdfc5;
  border-radius: 10px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px; align-items: flex-start;
}
.ov-bf-lobe-rail {
  align-self: stretch;
  border-radius: 4px;
  background: #cdc3a8;
  min-height: 100%;
}
.ov-bf-lobe.sev-ok    .ov-bf-lobe-rail { background: #5cb46a; }
.ov-bf-lobe.sev-trend .ov-bf-lobe-rail { background: #f0d566; }
.ov-bf-lobe.sev-warn  .ov-bf-lobe-rail { background: #f3a557; }
.ov-bf-lobe.sev-crit  .ov-bf-lobe-rail { background: #c33823; }
.ov-bf-lobe.sev-na    .ov-bf-lobe-rail { background: #cdc3a8; }

.ov-bf-lobe-body { min-width: 0; }
.ov-bf-lobe-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.ov-bf-lobe-name {
  font-family: var(--nm-font-sans);
  font-size: 14px; font-weight: 700;
  color: #0c0c0c;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ov-bf-lobe-status {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
.ov-bf-lobe.sev-ok    .ov-bf-lobe-status { color: #2d6a36; }
.ov-bf-lobe.sev-trend .ov-bf-lobe-status { color: #8a6a1a; }
.ov-bf-lobe.sev-warn  .ov-bf-lobe-status { color: #b85a18; }
.ov-bf-lobe.sev-crit  .ov-bf-lobe-status { color: #c33823; }
.ov-bf-lobe.sev-na    .ov-bf-lobe-status { color: #5a5546; }

.ov-bf-lobe-meta {
  font-family: var(--nm-font-mono);
  font-size: 11px;
  color: #5a5546;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.ov-bf-lobe-funcs {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 4px 10px;
}
.ov-bf-lobe-funcs li {
  font-size: 12.5px;
  color: #2a2a2a;
  letter-spacing: -0.002em;
  position: relative;
  padding-left: 12px;
}
.ov-bf-lobe-funcs li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 4px; height: 4px; border-radius: 50%;
  background: #b09870;
}
.ov-bf-lobe.sev-crit .ov-bf-lobe-funcs li::before { background: #c33823; }
.ov-bf-lobe.sev-warn .ov-bf-lobe-funcs li::before { background: #f3a557; }
.ov-bf-lobe.sev-trend .ov-bf-lobe-funcs li::before { background: #d8b400; }
.ov-bf-lobe.sev-ok    .ov-bf-lobe-funcs li::before { background: #5cb46a; }
.ov-bf-lobe.sev-na .ov-bf-lobe-funcs li { color: #8a8576; }
.ov-bf-lobe.sev-na .ov-bf-lobe-funcs li::before { background: #cdc3a8; }

/* Driving channels block — same data shown on the hero brain + deviations list */
.ov-bf-lobe-devs {
  margin: 4px 0 10px;
  padding: 8px 10px;
  background: rgba(255, 252, 244, 0.72);
  border: 1px solid rgba(180, 160, 110, 0.22);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ov-bf-lobe-devs-label {
  font-family: var(--nm-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #6e6e6e;
  margin-bottom: 2px;
}
.ov-bf-lobe-dev {
  display: grid;
  grid-template-columns: 56px 64px 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-family: var(--nm-font-mono);
  font-size: 11px;
  color: #2a2a2a;
}
.ov-bf-lobe-dev-chan { font-weight: 700; color: #0c0c0c; }
.ov-bf-lobe-dev-band { color: #5a5546; }
.ov-bf-lobe-dev-z    { font-weight: 600; }
.ov-bf-lobe-dev-ba   { color: #6e6e6e; font-size: 10px; letter-spacing: 0.04em; }
.ov-bf-lobe-dev.sev-critical    .ov-bf-lobe-dev-z { color: #a83520; }
.ov-bf-lobe-dev.sev-significant .ov-bf-lobe-dev-z { color: #b85a18; }
.ov-bf-lobe-dev.sev-trending    .ov-bf-lobe-dev-z { color: #a8761a; }
.ov-bf-lobe-dev.sev-within_range .ov-bf-lobe-dev-z { color: #2d6a36; }