─ */ .ov-page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 48px 80px; box-sizing: border-box; } @media (max-width: 720px) { .ov-page { padding: 24px 20px 60px; } } /* ─── Top identity bar (patient name + meta + GDPR / Cleaned pill) ──── */ .ov-id { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: nowrap; padding-bottom: 22px; border-bottom: 1px solid #efece2; margin-bottom: 0; } .ov-id-l { flex: 1 1 auto; min-width: 0; } .ov-id-name { font-family: var(--nm-font-sans); font-size: 28px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; /* matches /results/ EXACTLY (was -0.02em → -0.56px; this is -0.025em → -0.7px at 28px) */ color: #0c0c0c; margin: 0; } .ov-id-meta { margin-top: 6px; font-size: 13px; color: #6e6e6e; 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; } .ov-id-r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; } .ov-id-r .ov-confirm { /* MATCH /results/ EXACTLY — Inter, darker brown, lighter tracking. Was JetBrains Mono + light brown + heavy tracking (didn't match overview). */ font-family: var(--nm-font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; /* 0.42px at 10.5px = same as overview */ text-transform: uppercase; color: #5a5546; } /* ═══ CANONICAL COMPONENT SIZES ════════════════════════════════════════ * Every shared component on inner pages uses these sizes so the design * feels like one family. Page-specific selectors can extend but should * NOT shrink below these. * ════════════════════════════════════════════════════════════════════ */ /* ─── Pills (status, counter, info) ─────────────────────────────────── */ body.ov-min .nm-pill, body.ov-min .pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; background: #f7f3e6; border: 1px solid #e3dfc8; font-family: var(--nm-font-sans); font-size: 13px; font-weight: 500; color: var(--nm-color-ink-2); letter-spacing: -0.005em; } body.ov-min .nm-pill .dot, body.ov-min .pill .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nm-color-ink-3); } /* ─── Chips (filter / toggle controls) — slightly taller + breathier ─ */ body.ov-min .chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1px solid transparent; font-family: var(--nm-font-sans); font-size: 13px; font-weight: 500; color: var(--nm-color-ink-2); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; letter-spacing: -0.005em; } body.ov-min .chip:hover { background: #f7f3e6; color: var(--nm-color-ink); } body.ov-min .chip.active { background: var(--nm-color-ink); color: var(--nm-color-white); border-color: var(--nm-color-ink); } body.ov-min .chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } /* ─── Stat cards (counter blocks in summary rows) ───────────────────── */ body.ov-min .nm-stat-card, body.ov-min .tl-stat-card { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 18px; border-radius: 14px; background: #f7f3e6; border: 1px solid #ece6d2; font-family: var(--nm-font-sans); } body.ov-min .tl-stat-card-head { font-size: 14px; font-weight: 500; color: var(--nm-color-ink-2); letter-spacing: -0.005em; } /* Numeric value on the right of each stat pill — both the canonical .tl-stat-card-val selector and the actual rendered class .tl-stat-num so this works whether the markup is updated or not. */ body.ov-min .tl-stat-card-val, body.ov-min .tl-stat-num { font-size: 22px !important; font-weight: 700 !important; color: var(--nm-color-ink) !important; letter-spacing: -0.02em !important; line-height: 1 !important; margin-left: auto; font-variant-numeric: tabular-nums; } /* ─── Inputs (search field etc.) ────────────────────────────────────── */ body.ov-min .tl-input { height: 34px; padding: 0 14px; border-radius: 999px; background: transparent; border: 1px solid #e3dfc8; font-family: var(--nm-font-sans); font-size: 13px; color: var(--nm-color-ink-2); letter-spacing: -0.005em; } body.ov-min .tl-input:focus { outline: none; border-color: var(--nm-color-ink-3); background: #fffaea; } body.ov-min .tl-input::placeholder { color: var(--nm-color-ink-3); } /* ─── Pill-style nav buttons (Previous / Next / Play etc.) ──────────── */ body.ov-min .tl-nav-btn, body.ov-min .nm-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 28px; border-radius: 999px; background: transparent; border: 1px solid #d8d2bd; font-family: var(--nm-font-sans); font-size: 15px; font-weight: 500; color: #2a261f; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; letter-spacing: -0.005em; } body.ov-min .tl-nav-btn:hover, body.ov-min .nm-btn-ghost:hover { background: #f7f3e6; border-color: #b8b09a; color: #0c0c0c; } /* ═══ TIMELINE PAGE — inline stat strip + bigger trace + better contrast ══ * Lives here (in the shared shell) so future pages that adopt the same * "inline meta + counters" pattern inherit the same look. */ /* Inline event-counter strip appended to the tech-meta line */ body.ov-min .tl-secondary-meta { font-family: var(--nm-font-mono); font-size: 12px; color: #5a5447; /* darker, readable contrast */ letter-spacing: 0.01em; margin: 8px 0 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } body.ov-min .tl-secondary-meta .tl-stats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } body.ov-min .tl-stat-inline { display: inline-flex; align-items: center; gap: 6px; color: #2a261f; /* darker for readability */ font-family: var(--nm-font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; } body.ov-min .tl-stat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } body.ov-min .tl-stat-inline .tl-stat-name { color: #5a5447; font-weight: 500; } body.ov-min .tl-stat-inline .tl-stat-num { font-weight: 700; color: #0c0c0c; font-variant-numeric: tabular-nums; margin-left: 2px; } body.ov-min .tl-stat-sep { color: #c8c4b5; font-family: var(--nm-font-sans); font-size: 12px; } /* Filters row — tight gap so the next section (scrubber) sits close */ body.ov-min .tl-summary { padding: 4px 0 10px !important; margin-bottom: 4px !important; border-bottom: 1px solid #efece2 !important; } body.ov-min .tl-filters { gap: 14px !important; margin-top: 0 !important; } body.ov-min .tl-chip-group { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ─── Trace pane · MUCH bigger so traces are readable ─────────────── */ body.ov-min .tl-trace-card { min-height: 700px !important; /* was 520 — give more vertical room */ } body.ov-min .tl-trace-wrap { min-height: 640px !important; /* was 462 — fits 22 ch at 28 px */ background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(20, 16, 8, 0.018) 8px 9px), #ffffff !important; /* clean white plot bg for readability */ } body.ov-min .tl-axis { height: 26px !important; font-size: 12px !important; background: transparent !important; border-top: 1px solid #efece2 !important; color: #5a5447 !important; } body.ov-min .tl-meta { padding: 8px 14px !important; font-size: 12px !important; color: #5a5447 !important; background: transparent !important; border-top: 1px solid #efece2 !important; letter-spacing: 0.01em; } /* ─── Scrubber — bigger header + bigger controls + readable colors ── */ body.ov-min .tl-scrubber-head { font-size: 13px !important; color: #2a261f !important; font-weight: 500; margin-bottom: 10px !important; letter-spacing: -0.005em; } body.ov-min .tl-scrub-controls { gap: 12px !important; } body.ov-min .ghost-btn.small { height: 36px !important; min-width: 38px !important; padding: 0 14px !important; font-size: 16px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid #d8d2bd !important; color: #2a261f !important; display: inline-flex; align-items: center; justify-content: center; } body.ov-min .ghost-btn.small:hover { background: #f7f3e6 !important; border-color: #b8b09a !important; } body.ov-min .tl-zoom-val { min-width: 50px !important; font-size: 13px !important; color: #2a261f !important; font-weight: 500; } body.ov-min .tl-gain-wrap { margin-left: 12px !important; padding-left: 16px !important; border-left: 1px solid #efece2 !important; gap: 10px !important; } body.ov-min .tl-ctrl-label { font-size: 11px !important; color: #5a5447 !important; } body.ov-min .tl-gain-wrap input[type="range"] { width: 120px !important; height: 4px !important; background: #d8d2bd !important; } body.ov-min .tl-gain-wrap input[type="range"]::-webkit-slider-thumb { width: 14px !important; height: 14px !important; background: #2a261f !important; } body.ov-min .tl-gain-val { font-size: 12px !important; color: #2a261f !important; width: 36px !important; } body.ov-min .tl-scrubber { height: 36px !important; /* was 26 — bigger scrub bar */ background: #faf6e8 !important; border-color: #e3dfc8 !important; } /* ─── (6) Navigation row — Prev / Play / Next directly UNDER trace ── */ body.ov-min .tl-nav-row { display: flex; justify-content: center; gap: 14px; padding: 18px 0 6px; margin-bottom: 6px; } /* ─── (7) Mark detail card — bigger text + better contrast ───────── */ /* CRITICAL: respect the `hidden` attribute. The legacy stylesheet had `.tl-detail-active { display: grid }` which OVERRODE the HTML `hidden` attribute — causing the placeholder "BAD_" + "mark — of —" text to show even when no artefact was selected. */ body.ov-min .tl-detail-active[hidden] { display: none !important; } body.ov-min .tl-detailcard { padding: 8px 0 0 !important; border-top: 1px solid #efece2 !important; margin-top: 4px !important; } body.ov-min .tl-detail-empty { font-size: 14px !important; color: #5a5447 !important; text-align: center; padding: 18px 0 !important; } body.ov-min .tl-detail-type { font-size: 18px !important; font-weight: 600 !important; color: #0c0c0c !important; font-family: var(--nm-font-mono); } body.ov-min .tl-detail-counter { font-size: 12px !important; color: #5a5447 !important; } body.ov-min .tl-detail-actions { display: none !important; } /* now lives in .tl-nav-row */ /* ═══════════════════════════════════════════════════════════════════════ * FLATTEN cards across inner pages — match /results/ minimalist language. * The legacy .nm-stat / .nm-viewcard / .nm-section .nm-card used cream * fills and borders that read as heavy boxes against the cream-paper page. * On ov-min pages we strip the fill, keep the hairline rule between * sections, and let typography do the carrying. */ /* Hero stat row — 4-column fluid grid (was rigid 3-col forcing 4th to wrap) */ body.ov-min .nm-stats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; margin: 22px 0 28px !important; } @media (max-width: 900px) { body.ov-min .nm-stats { grid-template-columns: repeat(2, 1fr) !important; } } /* Individual stat — FLAT (no card background / no border) */ body.ov-min .nm-stat { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.ov-min .nm-stat-label { font-family: var(--nm-font-sans); font-size: 13px !important; font-weight: 500 !important; color: #5a5447 !important; letter-spacing: -0.005em; margin-bottom: 4px; } body.ov-min .nm-stat-value { font-family: var(--nm-font-sans); font-size: 34px !important; font-weight: 700 !important; color: #0c0c0c !important; letter-spacing: -0.025em !important; line-height: 1.05 !important; font-variant-numeric: tabular-nums; margin: 2px 0 6px; } body.ov-min .nm-stat-sub { font-family: var(--nm-font-mono); font-size: 11px !important; color: #8a8576 !important; letter-spacing: 0.01em; line-height: 1.45; } /* View-card sections — FLAT, just a hairline rule above */ body.ov-min .nm-viewcard { background: transparent !important; border: none !important; box-shadow: none !important; padding: 24px 0 8px !important; border-top: 1px solid #efece2 !important; margin-top: 8px !important; } /* Section blocks — same flat treatment */ body.ov-min .nm-section { margin-top: 32px; } body.ov-min .nm-section-head { margin-bottom: 14px; } body.ov-min .nm-section-title { font-family: var(--nm-font-sans); font-size: 22px !important; font-weight: 700 !important; color: #0c0c0c !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; margin: 0 !important; } body.ov-min .nm-section-sub { font-family: var(--nm-font-sans); font-size: 13px !important; color: #5a5447 !important; margin-top: 4px; } body.ov-min .nm-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } body.ov-min .nm-card-head { margin-bottom: 12px; } body.ov-min .nm-card-title { font-family: var(--nm-font-sans); font-size: 16px !important; font-weight: 600 !important; color: #0c0c0c !important; letter-spacing: -0.015em !important; margin: 0 !important; } body.ov-min .nm-card-sub { font-family: var(--nm-font-sans); font-size: 12.5px !important; color: #5a5447 !important; margin-top: 3px; } /* ─── Topomap grid (used on spectral / normative / asymmetry) ─────── 3 per row · bigger cells · cards are flat (no cream box). */ body.ov-min .nv-topo-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-top: 14px; } @media (max-width: 900px) { body.ov-min .nv-topo-grid { grid-template-columns: repeat(2, 1fr) !important; } } body.ov-min .nv-topo-card { background: transparent !important; border: none !important; padding: 8px 4px 4px !important; } body.ov-min .nv-topo-title { font-size: 15px !important; font-weight: 600 !important; color: #0c0c0c !important; letter-spacing: -0.005em !important; margin-bottom: 8px !important; } body.ov-min .nv-topo-svg-wrap { width: 100%; aspect-ratio: 1 / 1; } /* PSD chart wrapper — strip the tinted background. The legacy rule `.sp-psd-chart-wrap svg { background: var(--nm-color-paper) }` put a cream fill on the SVG element itself; we force it transparent here. */ body.ov-min .sp-psd-chart-wrap, body.ov-min .sp-psd-chart-wrap svg { background: transparent !important; background-color: transparent !important; } body.ov-min .sp-psd-chart-wrap svg rect[fill]:not([fill="none"]) { fill: transparent !important; } /* Band labels behind PSD (delta/theta/alpha/beta1/beta2/gamma stripes) sit on the SVG as semi-tinted rectangles — keep but tone way down */ body.ov-min .sp-psd-chart-wrap svg .sp-band-stripe { opacity: 0.20 !important; } /* Spectrogram + matrix wrappers also flat */ body.ov-min .sp-spectro-wrap, body.ov-min .sp-bandmatrix, body.ov-min #sp-bandmatrix { background: transparent !important; } /* Tables across all sections — flat, with subtle row dividers */ body.ov-min .ep-event-table, body.ov-min .nv-matrix-table { background: transparent !important; } body.ov-min .ep-event-table thead th, body.ov-min .nv-matrix-table thead th { background: transparent !important; border-bottom: 1px solid #e3dfc8 !important; color: #5a5447 !important; font-weight: 600 !important; font-family: var(--nm-font-mono) !important; font-size: 11.5px !important; letter-spacing: 0.04em !important; text-transform: uppercase; padding: 8px 12px !important; } body.ov-min .ep-event-table tbody td, body.ov-min .nv-matrix-table tbody td { border-bottom: 1px solid #f0ecd9 !important; padding: 8px 12px !important; font-size: 12.5px !important; color: #2a261f !important; } /* ─── Severity legend chips (used on asymmetry arrow legend etc.) ── Force the shared clinical traffic-light. Legacy classes pointed to --nm-color-r-deep / --nm-color-warn / --nm-color-l-mid / --nm-color-ink-4 which fight the rest of the platform. */ body.ov-min .ax-vec-arr-critical { color: var(--nm-tier-crit) !important; } body.ov-min .ax-vec-arr-significant { color: var(--nm-tier-sig) !important; } body.ov-min .ax-vec-arr-trending { color: var(--nm-tier-trend) !important; } body.ov-min .ax-vec-arr-within { color: var(--nm-tier-quiet) !important; border-top-width: 1.5px !important; } /* Cluster halo swatch also uses critical-red */ body.ov-min .ax-vec-halo-swatch { background: var(--nm-tier-crit) !important; opacity: 0.35 !important; } /* Asymmetry vector cluster halos (the round behind dominant electrodes) */ body.ov-min #ax-vec-svg circle[fill="var(--nm-color-r-soft)"] { fill: var(--nm-tier-crit) !important; fill-opacity: 0.18 !important; } /* ─── Quadrant analysis grid (asymmetry) — fix overlap ──────────────── Legacy `.ax-quad-grid { aspect-ratio: 1.4/1 }` forced a fixed aspect that crushed the inner 2×2 grid; combined with negative margins from the legacy `.ax-quad-stage` background it visually overlapped. Reset to natural sizing so each card has its own row/column. */ body.ov-min .ax-quad-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) 200px !important; gap: 18px !important; align-items: start !important; } body.ov-min .ax-quad-grid { position: relative; display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; gap: 14px !important; background: transparent !important; border-radius: 12px; aspect-ratio: auto !important; overflow: visible !important; } body.ov-min .ax-quad { background: transparent !important; border: 1px solid #efece2 !important; border-radius: 14px !important; padding: 18px 20px !important; display: flex; flex-direction: column; gap: 6px; min-height: 120px; } body.ov-min .ax-quad-label { font-size: 10.5px !important; font-family: var(--nm-font-mono); text-transform: uppercase; letter-spacing: 0.14em !important; color: #5a5447 !important; font-weight: 600; } body.ov-min .ax-quad-value { font-family: var(--nm-font-sans) !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #0c0c0c !important; line-height: 1 !important; font-variant-numeric: tabular-nums; margin-top: 2px; } body.ov-min .ax-quad-detail { font-size: 12px !important; color: #5a5447 !important; font-family: var(--nm-font-mono); } /* ─── Asymmetry vector brain — legend + top-pair table ───────────── Bump from 10–11 px to 12–13 px so they're easy to read at a glance. Also rebalance the 3-column grid so the right-hand "top pair" table has enough room for full-length SEV labels (e.g. "SIGNIFICANT") next to the cortex code (e.g. "BA21"). */ body.ov-min .ax-vec-grid { grid-template-columns: 168px minmax(0, 1fr) 400px !important; gap: 18px !important; } body.ov-min .ax-vec-legend { font-size: 13px !important; gap: 6px !important; color: var(--nm-color-ink-2) !important; } body.ov-min .ax-vec-legend-head { font-size: 12.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: #5a5447 !important; font-weight: 700 !important; margin-top: 16px !important; } body.ov-min .ax-vec-legend-head:first-child { margin-top: 0 !important; } body.ov-min .ax-vec-legend-row { font-size: 14px !important; color: var(--nm-color-ink-2) !important; align-items: center; gap: 10px !important; line-height: 1.45 !important; } body.ov-min .ax-vec-arr { font-size: 16px !important; } body.ov-min .ax-vec-r { font-size: 14px !important; } body.ov-min .ax-vec-r-head { font-size: 12.5px !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: #5a5447 !important; font-weight: 700 !important; padding-bottom: 10px !important; } body.ov-min .ax-vec-rowhead { font-size: 12px !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #8a8576 !important; padding: 8px 2px !important; font-weight: 600 !important; grid-template-columns: 50px 18px 60px 76px minmax(0, 1fr) 46px !important; column-gap: 12px !important; border-bottom-color: rgba(0,0,0,0.08) !important; } body.ov-min .ax-vec-row { font-size: 14px !important; padding: 10px 2px !important; grid-template-columns: 50px 18px 60px 76px minmax(0, 1fr) 46px !important; column-gap: 12px !important; align-items: center !important; } body.ov-min .ax-vec-row-z { white-space: nowrap !important; } body.ov-min .ax-vec-row-sev { white-space: nowrap !important; text-align: right !important; } body.ov-min .ax-vec-row-ba { white-space: nowrap !important; text-align: right !important; } body.ov-min .ax-vec-row-pair { font-size: 14px !important; font-weight: 600 !important; } body.ov-min .ax-vec-row-dir { font-size: 18px !important; } body.ov-min .ax-vec-row-pct { font-size: 14px !important; font-weight: 600 !important; } body.ov-min .ax-vec-row-z { font-size: 13.5px !important; } body.ov-min .ax-vec-row-sev { font-size: 12px !important; letter-spacing: 0.06em !important; font-weight: 600 !important; } body.ov-min .ax-vec-row-ba { font-size: 13px !important; color: #5a5447 !important; } /* ─── MNE viridis gradient bar (used in coherence legend etc.) ──────── Pulls from the shared --nm-cmap-viridis token in theme.css so any palette tweak applies platform-wide. */ body.ov-min .coh-viridis-bar { display: inline-block; width: 130px; height: 8px; border-radius: 999px; background: var(--nm-cmap-viridis); box-shadow: inset 0 0 0 1px rgba(80, 70, 50, 0.12); } /* RdBu_r diverging bar variant for asymmetry-style legends */ body.ov-min .coh-rdbu-bar { display: inline-block; width: 130px; height: 8px; border-radius: 999px; background: var(--nm-cmap-rdbu); box-shadow: inset 0 0 0 1px rgba(80, 70, 50, 0.12); } /* ═══════════════════════════════════════════════════════════════════════ * 6. PAGE-APP WRAPPERS + SHARED DISCLAIMER + FLAT-CARD PRIMITIVE * Consolidated from per-page duplicates so every page picks them up * from one rule. * ═══════════════════════════════════════════════════════════════════════ */ /* App wrappers on every page — ax-app, sp-app, coh-app, cn-app, ep-app, nv-app, src-app, ms-app, bm-app. All collapse to a simple block container so they don't interfere with the .ov-page max-width. */ body.ov-min .ax-app, body.ov-min .sp-app, body.ov-min .coh-app, body.ov-min .cn-app, body.ov-min .ep-app, body.ov-min .nv-app, body.ov-min .src-app, body.ov-min .ms-app, body.ov-min .bm-app { display: block; } /* Decision-support disclaimer (used by ep / nv / src / ms / bm) — amber, low-emphasis. ONE rule for the whole platform. */ body.ov-min .ep-disclaimer { background: var(--ds-warn-bg) !important; border: 1px solid var(--ds-warn-border) !important; color: var(--ds-warn-ink) !important; margin: var(--ds-gap-5) 0 var(--ds-gap-7) !important; border-radius: var(--ds-radius-md) !important; padding: var(--ds-gap-3) var(--ds-gap-5) !important; font-size: var(--ds-text-md) !important; line-height: 1.55 !important; } /* Flat-card primitive — the canonical "card on cream paper" look used by nearly every panel across every page. Borders subtle, background transparent, no shadow. Page-specific selectors that wrap data tiles should match this signature. */ body.ov-min .coh-band-card, body.ov-min .coh-electrode-card, body.ov-min .coh-region-cell, body.ov-min .coh-side-block, body.ov-min .coh-atlas-r, body.ov-min .coh-atlas-r .coh-side-block, body.ov-min .cn-hub-card, body.ov-min .cn-iso-card, body.ov-min .cn-modules-r, body.ov-min .ep-cat-card, body.ov-min .ep-focus-r, body.ov-min .ep-gallery > *, body.ov-min .ep-hfo-grid > *, body.ov-min .ep-concern-grid > *, body.ov-min .nv-marker-card, body.ov-min .src-lobe-card, body.ov-min .src-top-conn-row, body.ov-min .ms-map-card, body.ov-min .ms-bar-card, body.ov-min .bm-bg-card, body.ov-min .bm-cmx-card, body.ov-min .bm-vig-card, body.ov-min .ax-quad { background: var(--ds-card-bg) !important; border: 1px solid var(--ds-line) !important; box-shadow: none !important; border-radius: var(--ds-radius-md) !important; } /* Hover treatment for clickable flat cards */ body.ov-min .coh-band-card:hover, body.ov-min .coh-electrode-card:hover, body.ov-min .cn-hub-card:hover, body.ov-min .cn-iso-card:hover, body.ov-min .ep-cat-card:hover { border-color: var(--ds-line-strong) !important; background: var(--ds-card-hover) !important; box-shadow: none !important; transform: none !important; } /* Active / selected state */ body.ov-min .coh-band-card.active, body.ov-min .coh-electrode-card.selected { border-color: var(--nm-color-ink) !important; box-shadow: 0 0 0 1px var(--nm-color-ink) !important; background: transparent !important; } /* Chart hosts (canvas + svg) — universally transparent so the page paper shows through. ONE rule for every chart wrapper across every page. */ body.ov-min .coh-matrix-wrap, body.ov-min .coh-matrix-wrap canvas, body.ov-min .coh-hist-wrap, body.ov-min .coh-hist-wrap svg, body.ov-min .coh-chord-wrap, body.ov-min .coh-chord-wrap svg, body.ov-min .coh-brain-wrap, body.ov-min .coh-brain-wrap svg, body.ov-min .coh-atlas-brain-wrap, body.ov-min .coh-atlas-brain-wrap svg, body.ov-min .cn-degree-wrap, body.ov-min .cn-degree-wrap svg, body.ov-min .cn-region-matrix, body.ov-min .cn-elec-band-grid, body.ov-min .cn-pac-matrix-wrap, body.ov-min .cn-pac-matrix, body.ov-min .cn-comod-grid, body.ov-min #cn-modules-svg, body.ov-min .ms-gfp-wrap, body.ov-min .ms-gfp-wrap canvas, body.ov-min .ms-ribbon, body.ov-min .ms-map-svg-wrap svg, body.ov-min .nv-iaf-wrap, body.ov-min .nv-iaf-wrap svg, body.ov-min .src-lobe-conn-matrix, body.ov-min .src-lobe-matrix, body.ov-min .src-conn-wrap-detail, body.ov-min .src-conn-wrap-detail canvas, body.ov-min .bm-cmx-card canvas, body.ov-min .bm-vig-card canvas, body.ov-min .bm-eo-ec-strip canvas, body.ov-min .ep-strip-wrap { background: transparent !important; } /* Eyebrow text — every uppercase mono mini-heading across every page. ONE definition for "PUTATIVE FOCUS / TOP CONNECTIONS / SELECTED ELECTRODE / FLAGGED FINDINGS / TOP PAIR · CURRENT BAND / LOBE POWER · A ALPHA" etc. */ body.ov-min .coh-side-eyebrow, body.ov-min .coh-metric-eyebrow, body.ov-min .src-section-eyebrow, body.ov-min .bm-flags-head, body.ov-min .ax-quad-label, body.ov-min .ax-vec-r-head, body.ov-min .ax-vec-legend-head, body.ov-min .ms-bar-title, body.ov-min .coh-region-name { font-family: var(--nm-font-mono); font-size: var(--ds-eyebrow-size) !important; letter-spacing: var(--ds-eyebrow-track) !important; text-transform: uppercase; font-weight: 700 !important; color: var(--ds-ink-faint) !important; } /* MNE colormap gradient bars — shared everywhere a legend needs to label a viridis / RdBu_r / hot scale. */ body.ov-min .coh-viridis-bar, body.ov-min .coh-matrix-bar, body.ov-min .src-brain-scale-bar { display: inline-block; height: 8px; border-radius: var(--ds-radius-pill); background: var(--nm-cmap-viridis); border: 1px solid var(--ds-line) !important; } body.ov-min .coh-viridis-bar { width: 130px; } body.ov-min .coh-matrix-bar { flex: 1; min-width: 120px; } body.ov-min .coh-rdbu-bar { display: inline-block; width: 130px; height: 8px; border-radius: var(--ds-radius-pill); background: var(--nm-cmap-rdbu); border: 1px solid var(--ds-line); } /* ═══════════════════════════════════════════════════════════════════════ * 7. PAGE-SPECIFIC OVERRIDES (kept narrow — only genuinely unique layouts) * ═══════════════════════════════════════════════════════════════════════ */ /* ─── COHERENCE PAGE ────────────────────────────────────────────────── */ /* Top metric toggle row – tighten typography to match design system */ body.ov-min.coh-body .coh-metric-row { margin: var(--ds-gap-3) 0 var(--ds-gap-2) !important; display: flex; align-items: center; gap: var(--ds-gap-3); font-size: var(--ds-text-base); color: var(--nm-color-ink-2); } /* Six mini-brain band cards — page-specific padding (otherwise inherits from the shared flat-card primitive above). */ body.ov-min.coh-body .coh-band-card { padding: var(--ds-gap-4) var(--ds-gap-4) var(--ds-gap-5) !important; } body.ov-min.coh-body .coh-band-card-name { font-size: var(--ds-text-lg) !important; } body.ov-min.coh-body .coh-band-card-mean { font-size: var(--ds-text-md) !important; } body.ov-min.coh-body .coh-band-card-foot { font-size: var(--ds-text-sm) !important; } /* Side panel typography */ body.ov-min.coh-body .coh-side-block { padding: var(--ds-gap-4) var(--ds-gap-4) var(--ds-gap-3) !important; } body.ov-min.coh-body .coh-side-electrode { font-size: var(--ds-text-3xl) !important; } body.ov-min.coh-body .coh-side-detail { font-size: var(--ds-text-base) !important; line-height: 1.55 !important; } /* Matrix scale legend size */ body.ov-min.coh-body .coh-matrix-scale { font-size: var(--ds-text-sm) !important; gap: var(--ds-gap-3); } /* Regional connectivity tiles — inherit flat-card; just typography */ body.ov-min.coh-body .coh-region-cell { padding: var(--ds-gap-4) var(--ds-gap-5) !important; } body.ov-min.coh-body .coh-region-val { font-size: 24px !important; } body.ov-min.coh-body .coh-region-sub { font-size: var(--ds-text-sm) !important; } /* Band bars — viridis fill so strongest bands = bright yellow */ body.ov-min.coh-body .coh-bandbar-fill { background: var(--nm-cmap-viridis) !important; } body.ov-min.coh-body .coh-bandbar-track { background: rgba(0,0,0,0.06) !important; } body.ov-min.coh-body .coh-bandbar-name { font-size: var(--ds-text-base) !important; } body.ov-min.coh-body .coh-bandbar-val { font-size: var(--ds-text-base) !important; } /* ─── CONNECTIVITY PAGE ─────────────────────────────────────────────── */ /* Modules detail card padding */ body.ov-min.cn-body .cn-modules-r { padding: var(--ds-gap-4) !important; } /* ─── PAROXYSMAL EVENTS PAGE ───────────────────────────────────────── */ /* 13-category card "has-events" tint stays for emphasis */ body.ov-min .ep-cat-card.has-events { background: rgba(196, 60, 50, 0.04) !important; border-color: rgba(196, 60, 50, 0.25) !important; } /* Focus-map legend chip colours (clinical traffic-light) */ body.ov-min .ep-focus-dot-active { background: var(--nm-tier-crit) !important; } body.ov-min .ep-focus-dot-passive { background: var(--nm-tier-sig) !important; } body.ov-min .ep-focus-dot-none { background: var(--nm-tier-quiet) !important; } /* Focus-detail panel padding */ body.ov-min.ep-body .ep-focus-r { padding: var(--ds-gap-4) !important; } /* Filter chips */ body.ov-min .ep-chip { background: transparent !important; border: 1px solid var(--ds-line-mid) !important; font-size: var(--ds-text-sm) !important; padding: 5px var(--ds-gap-3) !important; } body.ov-min .ep-chip:hover { background: rgba(0,0,0,0.04) !important; } body.ov-min .ep-chip.active { background: var(--nm-color-ink) !important; color: var(--ds-ink-on-tier) !important; border-color: var(--nm-color-ink) !important; } /* Event table */ body.ov-min .ep-event-table { font-size: var(--ds-text-base) !important; } body.ov-min .ep-event-table th { font-size: var(--ds-text-xs) !important; letter-spacing: 0.10em !important; color: var(--ds-ink-faint) !important; padding: var(--ds-gap-3) var(--ds-gap-3) !important; text-transform: uppercase; } /* Narrative interpretation */ body.ov-min .ep-narrative { font-size: var(--ds-text-lg) !important; line-height: 1.65 !important; color: var(--nm-color-ink) !important; } body.ov-min .ep-narrative-foot { font-size: var(--ds-text-sm) !important; color: var(--ds-ink-faint) !important; } /* ─── NORMATIVE COMPARISON PAGE ──────────────────────────────────── */ /* Matrix legend — bigger chips with traffic-light semantic colours */ body.ov-min.nv-body .nv-matrix-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; } body.ov-min.nv-body .nv-leg { font-size: 11.5px !important; font-family: var(--nm-font-mono); letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px !important; padding: 5px 11px !important; border: 1px solid rgba(0,0,0,0.08) !important; } body.ov-min.nv-body .nv-leg-critical-low { background: rgba(33,102,172,0.55) !important; color: #ffffff !important; } body.ov-min.nv-body .nv-leg-sig-low { background: rgba(67,147,195,0.45) !important; color: #163e6c !important; } body.ov-min.nv-body .nv-leg-trend-low { background: rgba(146,197,222,0.40) !important; color: #163e6c !important; } body.ov-min.nv-body .nv-leg-within { background: rgba(247,247,247,0.85) !important; color: var(--ds-ink-muted) !important; } body.ov-min.nv-body .nv-leg-trend-high { background: rgba(244,165,130,0.40) !important; color: #6a1b14 !important; } body.ov-min.nv-body .nv-leg-sig-high { background: rgba(214,96,77,0.50) !important; color: #ffffff !important; } body.ov-min.nv-body .nv-leg-critical-high { background: rgba(178,24,43,0.65) !important; color: #ffffff !important; } /* Clinical-marker cards — inherit flat-card; just adjust padding + severity-keyed border */ body.ov-min.nv-body .nv-marker-card { padding: var(--ds-card-pad) !important; } body.ov-min.nv-body .nv-marker-card.nv-marker-trending { border-color: var(--nm-tier-trend) !important; } body.ov-min.nv-body .nv-marker-card.nv-marker-significant { border-color: var(--nm-tier-sig) !important; background: rgba(217,135,21,0.05) !important; } body.ov-min.nv-body .nv-marker-card.nv-marker-critical { border-color: var(--nm-tier-crit) !important; background: rgba(178,24,43,0.05) !important; } /* IAF detail under curve */ body.ov-min.nv-body .nv-iaf-detail { margin-top: var(--ds-gap-3) !important; font-size: var(--ds-text-base) !important; } /* ─── SOURCE LOCALIZATION PAGE ──────────────────────────────────── */ /* Brain-scale legend layout (the bar itself styled via shared rule above) */ body.ov-min.src-body .src-brain-scale { font-size: var(--ds-text-sm) !important; border-top: 1px solid var(--ds-line) !important; margin-top: var(--ds-gap-5) !important; } /* Band tab buttons — readable */ body.ov-min.src-body .coh-metric-btn, body.ov-min.src-body .src-band-tabs button { font-size: var(--ds-text-md) !important; padding: 6px var(--ds-gap-3) !important; } /* Lobe cards — inherit flat-card */ body.ov-min.src-body .src-lobe-card { padding: var(--ds-card-pad) !important; } /* Top-ROI list rows — flat divider */ body.ov-min.src-body .src-top-conn-list > * { background: transparent !important; border-bottom: 1px solid var(--ds-line) !important; } /* Method rows */ body.ov-min.src-body .src-method-row { font-size: var(--ds-text-base) !important; padding: var(--ds-gap-2) 0 !important; border-bottom: 1px dashed var(--ds-line) !important; } /* Detail-collapse summary */ body.ov-min.src-body .src-detail-collapse summary { background: transparent !important; border: 1px solid var(--ds-line) !important; border-radius: 10px !important; padding: var(--ds-gap-3) var(--ds-gap-4) !important; font-size: var(--ds-text-md) !important; } /* Source-space connectivity · lobe level — fixed-table layout so the matrix never overflows into the right-hand "Top 15 connections" column. */ body.ov-min.src-body .src-lobe-conn-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: var(--ds-gap-8) !important; align-items: start; } body.ov-min.src-body .src-lobe-conn-l { min-width: 0 !important; overflow: hidden; } body.ov-min.src-body .src-lobe-conn-r { min-width: 0 !important; } body.ov-min.src-body .src-lobe-matrix { width: 100% !important; table-layout: fixed !important; border-collapse: collapse !important; } body.ov-min.src-body .src-lobe-matrix th, body.ov-min.src-body .src-lobe-matrix td { padding: 6px var(--ds-gap-1) !important; font-size: var(--ds-text-xs) !important; min-width: 0 !important; text-align: center !important; } body.ov-min.src-body .src-lobe-matrix th.src-lobe-h { font-size: 10.5px !important; letter-spacing: 0.04em !important; text-transform: uppercase; font-weight: 600 !important; color: var(--ds-ink-faint) !important; } body.ov-min.src-body .src-lobe-cell { font-family: var(--nm-font-mono); font-variant-numeric: tabular-nums; border: 1px solid #ffffff !important; border-radius: 3px !important; } /* Top-ROI connection cards — inherit flat-card; just padding + sizes */ body.ov-min.src-body .src-top-conn-row { padding: var(--ds-gap-3) var(--ds-gap-3) !important; } body.ov-min.src-body .src-top-conn-pair { font-size: var(--ds-text-base) !important; } body.ov-min.src-body .src-top-conn-meta { font-size: var(--ds-text-xs) !important; } body.ov-min.src-body .src-top-conn-val { font-size: var(--ds-text-sm) !important; } /* ─── MICROSTATES PAGE ────────────────────────────────────────────── */ /* 4 canonical maps — inherit flat-card; padding + sizes here */ body.ov-min.ms-body .ms-map-card { padding: var(--ds-gap-4) !important; } body.ov-min.ms-body .ms-map-letter { font-size: 20px !important; font-weight: 700 !important; border-radius: var(--ds-radius-sm) !important; width: 36px !important; height: 36px !important; display: inline-flex; align-items: center; justify-content: center; color: var(--ds-ink-on-tier) !important; } body.ov-min.ms-body .ms-map-title { font-size: var(--ds-text-xl) !important; font-weight: 600 !important; } body.ov-min.ms-body .ms-map-interp { font-size: var(--ds-text-md) !important; color: var(--nm-color-ink-2) !important; } body.ov-min.ms-body .ms-map-stats { font-size: var(--ds-text-md) !important; gap: var(--ds-gap-1) !important; } body.ov-min.ms-body .ms-map-svg-wrap { aspect-ratio: 1/1; width: 100%; } /* Parameter bar cards */ body.ov-min.ms-body .ms-bar-card { padding: var(--ds-card-pad) !important; } body.ov-min.ms-body .ms-bar-row .lbl { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-sm); font-size: var(--ds-text-md); font-weight: 700; color: var(--ds-ink-on-tier); } body.ov-min.ms-body .ms-bar-row .bar { background: rgba(0,0,0,0.06) !important; } body.ov-min.ms-body .ms-bar-row .val { font-size: var(--ds-text-md) !important; } /* ─── CLINICAL BIOMARKERS PAGE ────────────────────────────────────── */ /* All three card classes inherit flat-card; padding here */ body.ov-min.bm-body .bm-bg-card, body.ov-min.bm-body .bm-cmx-card, body.ov-min.bm-body .bm-vig-card { padding: var(--ds-card-pad) !important; } /* Flags chip group */ body.ov-min.bm-body .bm-flags { margin-top: var(--ds-gap-4) !important; } /* Narrative text on biomarkers */ body.ov-min.bm-body .ep-narrative-text, body.ov-min.bm-body #bm-narrative { font-size: var(--ds-text-lg) !important; line-height: 1.65 !important; color: var(--nm-color-ink) !important; } /* ─── TIME-FREQUENCY PAGE polish ──────────────────────────────────── */ body.ov-min.tf-body .tf-app { display: block; } body.ov-min.tf-body .tf-spectro-wrap { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto 22px; gap: 0; position: relative; } body.ov-min.tf-body #tf-spectro-y { grid-column: 1; grid-row: 1; /* pin to the LEFT column, top row */ position: relative; border-right: 1px solid var(--ds-line); overflow: hidden; } body.ov-min.tf-body .tf-spectro-y-lbl { padding-right: 6px; display: flex; align-items: center; justify-content: flex-end; font-family: var(--nm-font-mono); font-size: 10.5px; color: var(--ds-ink-muted); } body.ov-min.tf-body #tf-spectro-canvas { display: block; grid-column: 2; grid-row: 1; background: transparent; } body.ov-min.tf-body #tf-spectro-x { grid-column: 2; grid-row: 2; position: relative; height: 22px; } body.ov-min.tf-body .tf-spectro-x-tick { position: absolute; top: 4px; font-family: var(--nm-font-mono); font-size: 10px; color: var(--ds-ink-faint); transform: translateX(-50%); } body.ov-min.tf-body .tf-scale { display: flex; align-items: center; gap: var(--ds-gap-3); margin-top: var(--ds-gap-3); font-family: var(--nm-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } body.ov-min.tf-body .tf-scale-unit { color: var(--ds-ink-faint); margin-left: auto; } body.ov-min.tf-body .tf-trace-wrap { width: 100%; aspect-ratio: 1000 / 280; } body.ov-min.tf-body .tf-trace-wrap svg { width: 100%; height: auto; background: transparent; } body.ov-min.tf-body .tf-trace-legend, body.ov-min.tf-body .tf-dom-legend { display: flex; flex-wrap: wrap; gap: var(--ds-gap-3); margin-top: var(--ds-gap-3); font-family: var(--nm-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); } body.ov-min.tf-body .tf-leg-chip { display: inline-flex; align-items: center; gap: 6px; } body.ov-min.tf-body .tf-leg-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } body.ov-min.tf-body .tf-dombar { display: flex; align-items: stretch; height: 30px; width: 100%; border-radius: var(--ds-radius-sm); overflow: hidden; border: 1px solid var(--ds-line); } body.ov-min.tf-body .tf-dombar-seg { flex: 1; min-width: 0; } body.ov-min.tf-body .tf-topo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ds-gap-8); margin-top: var(--ds-gap-4); } @media (max-width: 900px) { body.ov-min.tf-body .tf-topo-grid { grid-template-columns: repeat(2, 1fr); } } /* ─── CLEANING & COMPONENTS PAGE polish ──────────────────────────── */ body.ov-min.cl-body .cl-app { display: block; } body.ov-min.cl-body .cl-quality-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--ds-gap-3); } body.ov-min.cl-body .cl-q-card { background: transparent !important; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } body.ov-min.cl-body .cl-q-name { font-size: var(--ds-text-lg); font-weight: 600; color: var(--ds-ink); } body.ov-min.cl-body .cl-q-tier { font-family: var(--nm-font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; padding: 2px 8px; border-radius: var(--ds-radius-pill); align-self: flex-start; background: rgba(0,0,0,0.06); color: var(--ds-ink-muted); } body.ov-min.cl-body .cl-q-tier.high { background: rgba(92,180,106,0.18); color: #2a5d34; } body.ov-min.cl-body .cl-q-tier.good { background: rgba(168,212,114,0.20); color: #38561a; } body.ov-min.cl-body .cl-q-tier.low { background: rgba(240,213,102,0.30); color: #6a5018; } body.ov-min.cl-body .cl-q-tier.disconnected { background: rgba(232,88,56,0.22); color: #7a1f10; } body.ov-min.cl-body .cl-report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-gap-5); margin-bottom: var(--ds-gap-7); } @media (max-width: 900px) { body.ov-min.cl-body .cl-report-grid { grid-template-columns: repeat(2, 1fr); } } body.ov-min.cl-body .cl-ica-row { display: grid; grid-template-columns: 70px 100px 130px 1fr 110px; gap: var(--ds-gap-4); align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--ds-line-soft); font-family: var(--nm-font-sans); font-size: var(--ds-text-md); } body.ov-min.cl-body .cl-ica-row.head { font-family: var(--nm-font-mono); font-size: var(--ds-eyebrow-size); letter-spacing: var(--ds-eyebrow-track); text-transform: uppercase; color: var(--ds-ink-faint); border-bottom: 1px solid var(--ds-line); } body.ov-min.cl-body .cl-ica-idx { font-family: var(--nm-font-mono); color: var(--ds-ink); font-weight: 600; } body.ov-min.cl-body .cl-ica-pill { display: inline-flex; padding: 2px 10px; border-radius: var(--ds-radius-pill); font-family: var(--nm-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; background: rgba(0,0,0,0.06); color: var(--ds-ink-muted); } body.ov-min.cl-body .cl-ica-pill.brain { background: rgba(92,180,106,0.18); color: #2a5d34; } body.ov-min.cl-body .cl-ica-pill.muscle { background: rgba(232,88,56,0.18); color: #7a1f10; } body.ov-min.cl-body .cl-ica-pill.eye { background: rgba(74,108,140,0.18); color: #2d4865; } body.ov-min.cl-body .cl-ica-pill.heart { background: rgba(180,72,68,0.18); color: #722420; } body.ov-min.cl-body .cl-ica-pill.line_noise, body.ov-min.cl-body .cl-ica-pill.channel_noise { background: rgba(140,134,118,0.22); color: #4a4636; } body.ov-min.cl-body .cl-ica-pill.other { background: rgba(0,0,0,0.07); color: var(--ds-ink-muted); } body.ov-min.cl-body .cl-ica-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: var(--ds-radius-pill); position: relative; overflow: hidden; } body.ov-min.cl-body .cl-ica-bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ds-ink); border-radius: var(--ds-radius-pill); } body.ov-min.cl-body .cl-ica-status { font-family: var(--nm-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; text-align: right; } body.ov-min.cl-body .cl-ica-status.removed { color: var(--nm-tier-crit); font-weight: 700; } body.ov-min.cl-body .cl-ica-status.kept { color: var(--ds-ink-faint); } body.ov-min.cl-body .cl-donut-wrap { display: flex; align-items: center; gap: var(--ds-gap-7); } body.ov-min.cl-body .cl-donut { width: 200px; height: 200px; flex-shrink: 0; } body.ov-min.cl-body .cl-donut-legend { display: flex; flex-direction: column; gap: 8px; font-family: var(--nm-font-sans); font-size: var(--ds-text-base); } body.ov-min.cl-body .cl-donut-legend > span { display: inline-flex; align-items: center; gap: 10px; } body.ov-min.cl-body .cl-donut-sw { width: 14px; height: 14px; border-radius: 3px; } /* ─── REACTIVITY PAGE polish ──────────────────────────────────────── */ body.ov-min.rx-body .rx-app { display: block; } body.ov-min.rx-body .rx-trace-wrap { width: 100%; aspect-ratio: 1000 / 220; } body.ov-min.rx-body .rx-trace-wrap svg { width: 100%; height: auto; background: transparent; } body.ov-min.rx-body .rx-state-bar { display: flex; align-items: stretch; height: 30px; width: 100%; border-radius: var(--ds-radius-sm); overflow: hidden; border: 1px solid var(--ds-line); } body.ov-min.rx-body .rx-state-seg.ec { background: rgba(243,165,87,0.55); } body.ov-min.rx-body .rx-state-seg.eo { background: rgba(92,180,106,0.55); } body.ov-min.rx-body .rx-state-seg.un { background: rgba(0,0,0,0.06); } body.ov-min.rx-body .rx-state-seg { flex: 1; min-width: 0; } body.ov-min.rx-body .rx-topo-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-gap-7); margin-top: var(--ds-gap-4); } body.ov-min.rx-body .rx-topo-card { background: transparent; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: var(--ds-gap-5); } body.ov-min.rx-body .rx-topo-card-title { font-family: var(--nm-font-sans); font-size: var(--ds-text-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--ds-ink); margin-bottom: var(--ds-gap-3); display: flex; align-items: center; gap: var(--ds-gap-3); flex-wrap: wrap; } body.ov-min.rx-body .rx-na-pill { font-family: var(--nm-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; padding: 3px 10px; border-radius: var(--ds-radius-pill); background: rgba(140, 134, 118, 0.18); color: #5a5447; white-space: nowrap; } body.ov-min.rx-body .rx-topo-card.rx-topo-empty { background: rgba(0,0,0,0.015); border-style: dashed; } body.ov-min.rx-body .rx-topo-card.rx-topo-empty .rx-topo-card-title { color: var(--ds-ink-faint); } body.ov-min.rx-body .rx-topo-card.rx-topo-empty .rx-topo-svg-wrap svg { opacity: 0.55; } body.ov-min.rx-body .rx-attn-card.rx-attn-empty { opacity: 0.5; } body.ov-min.rx-body .rx-attn-card.rx-attn-empty .rx-attn-pct { color: var(--ds-ink-faint); } body.ov-min.rx-body .rx-topo-svg-wrap { aspect-ratio: 1/1; width: 100%; max-width: 380px; margin: 0 auto; } body.ov-min.rx-body .rx-attn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ds-gap-3); } body.ov-min.rx-body .rx-attn-card { background: transparent; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; } body.ov-min.rx-body .rx-attn-name { font-size: var(--ds-text-lg); font-weight: 600; color: var(--ds-ink); } body.ov-min.rx-body .rx-attn-pct { font-family: var(--nm-font-mono); font-variant-numeric: tabular-nums; font-size: var(--ds-text-xl); font-weight: 700; } body.ov-min.rx-body .rx-attn-pct.high { color: var(--nm-tier-norm); } body.ov-min.rx-body .rx-attn-pct.mid { color: var(--nm-tier-trend); } body.ov-min.rx-body .rx-attn-pct.low { color: var(--nm-tier-crit); } body.ov-min.rx-body .rx-attn-bar { height: 6px; background: rgba(0,0,0,0.06); border-radius: var(--ds-radius-pill); overflow: hidden; } body.ov-min.rx-body .rx-attn-bar > span { display: block; height: 100%; border-radius: var(--ds-radius-pill); } /* ─── Effective Connectivity + Source Dynamics sub-sections ────── */ body.ov-min.cn-body .cn-effconn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-gap-7); align-items: start; } @media (max-width: 980px) { body.ov-min.cn-body .cn-effconn-grid { grid-template-columns: 1fr; } } body.ov-min.cn-body .cn-effconn-matrix { width: 100%; border-collapse: collapse; font-family: var(--nm-font-mono); table-layout: fixed; } body.ov-min.cn-body .cn-effconn-matrix th, body.ov-min.cn-body .cn-effconn-matrix td { text-align: center; padding: 3px; font-size: 9.5px; border: 1px solid #ffffff; } body.ov-min.cn-body .cn-effconn-matrix th { font-weight: 600; color: var(--ds-ink-faint); } body.ov-min.src-body .src-dyn-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ds-gap-7); align-items: start; } @media (max-width: 980px) { body.ov-min.src-body .src-dyn-grid { grid-template-columns: 1fr; } } body.ov-min.src-body .src-dyn-roi-list { display: flex; flex-direction: column; gap: 4px; max-height: 540px; overflow-y: auto; padding-right: 6px; } body.ov-min.src-body .src-dyn-roi-row { display: grid; grid-template-columns: 1fr 60px 1fr; gap: var(--ds-gap-3); padding: 8px 10px; border-bottom: 1px solid var(--ds-line-soft); align-items: center; font-size: var(--ds-text-md); } body.ov-min.src-body .src-dyn-roi-name { font-weight: 600; color: var(--ds-ink); } body.ov-min.src-body .src-dyn-roi-lobe { font-family: var(--nm-font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink-faint); } body.ov-min.src-body .src-dyn-roi-spark { width: 100%; height: 18px; } body.ov-min.src-body .src-dyn-roi-spark svg { width: 100%; height: 100%; display: block; } body.ov-min.src-body .src-dyn-lobe-bar { display: flex; align-items: stretch; height: 26px; border-radius: var(--ds-radius-sm); overflow: hidden; border: 1px solid var(--ds-line); margin-top: var(--ds-gap-3); } body.ov-min.src-body .src-dyn-lobe-seg { flex: 1; min-width: 0; } /* Cortical activation map — hide the 4 lobe-schematic cards (Lateral L/R, Dorsal, Ventral). The lobe-power side ranking still carries the same information without the cartoonish brain illustrations. Re-flow the surrounding grid to a single column. */ body.ov-min.src-body .src-brain-views { display: none !important; } body.ov-min.src-body .src-brain-grid { grid-template-columns: 1fr !important; } body.ov-min.src-body .src-brain-side { max-width: 560px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ * 9. PRINT / PDF — universal stylesheet for ALL inner pages * ───────────────────────────────────────────────────────────────────────── * Goal: a printed page (Cmd-P → Save as PDF) shows the NeuroMap logo at * the top of every page and then the report content directly underneath. * The left-hand analysis sidebar, the search box, the patient-table * action buttons, threshold sliders, toggle controls — every piece of * interactive UI chrome — is hidden from print. * ═══════════════════════════════════════════════════════════════════════ */ @media print { /* ─── PAGE setup ─────────────────────────────────────────────────── */ @page { size: A4; margin: 14mm 12mm 16mm 12mm; } /* Pure-white background, dark text — printer-friendly. Force colour printing of viridis / RdBu_r / traffic-light fills so MNE colormaps survive the PDF. */ html, body, body.ov-min, body.ov-min .nm-shell-main { background: #ffffff !important; color: #0c0c0c !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* ─── Hide the entire left sidebar in print. The logo is reattached at the top of the printable page via the .nm-print-header below. */ body.ov-min .nm-sidebar { display: none !important; } body.ov-min .nm-shell-main { margin-left: 0 !important; } body.ov-min .ov-page { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* ─── Logo at the top of the printed page ──────────────────────────── `.nm-print-header` is appended to by the shared sidebar.js bootstrap so it's available on every page that loads the sidebar. It's hidden in the screen UI and ONLY shown by the print stylesheet. */ body.ov-min .nm-print-header { display: flex !important; align-items: center; justify-content: flex-start; padding: 0 0 12px 0; margin: 0 0 16px 0; border-bottom: 1px solid #d4ceb9; page-break-after: avoid; break-after: avoid; } body.ov-min .nm-print-header img { height: 30px; width: auto; display: block; } /* Avoid splitting headings / table rows / cards across pages. */ h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; } tr, .nm-card, .nm-stat, .nm-section, .pt-table tbody tr { page-break-inside: avoid; break-inside: avoid; } /* ─── Hide every interactive chrome element ──────────────────────── */ body.ov-min .ov-id-r, /* GDPR pill + Cleaned pill */ body.ov-min .ov-confirm, /* GDPR badge */ body.ov-min .pt-actions, /* Sign-out + New analysis */ body.ov-min .pt-logout, body.ov-min .pt-new-btn, body.ov-min .pt-toolbar, /* Patients search box */ body.ov-min .pt-pager, /* Patients pagination */ body.ov-min .pt-view-btn, /* Patients eye icon column */ body.ov-min th:last-child, body.ov-min td:last-child, body.ov-min .up-back, /* "← Patients" back link */ body.ov-min .up-cta, /* "Start full analysis" */ body.ov-min .up-actions-sub, body.ov-min .up-btn-ghost, /* "Change file" */ body.ov-min .up-dropzone, /* upload drop zone */ body.ov-min .up-progress, /* progress UI */ body.ov-min .nm-bands, /* band picker pills */ body.ov-min .coh-controls, /* threshold sliders */ body.ov-min .coh-thresh-wrap, body.ov-min .coh-metric-row, body.ov-min .coh-func-toggle, body.ov-min .ep-filters, /* epileptiform filter chips */ body.ov-min .ep-event-pagination, body.ov-min .src-band-tabs, body.ov-min .cn-modules-controls, body.ov-min .ax-band-picker, body.ov-min .tl-scrub-controls, body.ov-min .tl-zoom-val, body.ov-min .tl-gain-wrap, body.ov-min .tl-secondary-meta, body.ov-min .ghost-btn, body.ov-min .nm-btn-ghost, body.ov-min .tl-nav-btn, body.ov-min #ep-search, body.ov-min input[type="range"], body.ov-min button:not(.nm-print-keep), body.ov-min .up-footer, body.ov-min footer { display: none !important; } /* The Patients-page Report column was hidden via "td:last-child" above — restore the patient name & data cells which are NOT the last col. (last-child only targets the report column because Report is column 7.) */ /* Don't break links across lines / make them readable on paper. */ a { color: #0c0c0c !important; text-decoration: none !important; } /* Tables: remove hover affordances + tighten for printing. */ body.ov-min .pt-table tbody tr { background: transparent !important; } body.ov-min .pt-table th, body.ov-min .pt-table td { padding: 8px 10px !important; } /* Cards: lose the subtle border so the printed page is calmer. */ body.ov-min .nm-card, body.ov-min .nm-stat { border: none !important; box-shadow: none !important; background: transparent !important; } }