/* ═══════════════════════════════════════════════════════════════════════
   NeuroMap · MASTER THEME
   ─────────────────────────────────────────────────────────────────────────
   Single source of truth for the entire NeuroMap front-end.
   Every colour, font size, spacing value, border-radius and shadow lives
   here. Change any token below and the value propagates everywhere this
   file is loaded.

   How to use in a new page:
     <link rel="stylesheet" href="/static/theme.css" />
     <link rel="stylesheet" href="/static/style.css" />   ← optional

   Token naming convention:
     --nm-{category}-{name}
     e.g. --nm-color-ink, --nm-text-lg, --nm-space-4, --nm-radius-md
   ═══════════════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────────────────────────────
     COLOUR · Surfaces (Pale Stone palette)
     The neutral paper-feel base of every NeuroMap page.
     ───────────────────────────────────────────────────────────────────── */
  --nm-color-bg:        #e6e1d0;   /* page background (warm stone)        */
  --nm-color-card:      #f0ebda;   /* primary card surface                */
  --nm-color-paper:     #f7f3e6;   /* inner viz / paper-feel surface      */
  --nm-color-white:     #fbf8ec;   /* highlight white                     */

  /* ─── COLOUR · Ink (text & lines on the stone palette) ─────────────── */
  --nm-color-ink:       #2a261f;   /* primary text (deep warm coffee)     */
  --nm-color-ink-2:     #595447;   /* secondary text                      */
  --nm-color-ink-3:     #8c8676;   /* muted text                          */
  --nm-color-ink-4:     #b6b09e;   /* faintest text / hairline            */
  --nm-color-line:      #d4ceb9;   /* primary border / divider            */
  --nm-color-line-2:    #b9b297;   /* stronger border                     */

  /* ─────────────────────────────────────────────────────────────────────
     COLOUR · Diverging asymmetry (Prussian-navy ↔ cream ↔ Bordeaux)
     Clinically intuitive: red = elevated/right-dominant, blue = left.
     Deep tones — designed, not MNE-default primary.
     ───────────────────────────────────────────────────────────────────── */
  --nm-color-l-deep:    #1a2d50;   /* far left-dominant                   */
  --nm-color-l-mid:     #4a6c8c;   /* mid left                            */
  --nm-color-l-soft:    #b4c5d8;   /* soft left                           */
  --nm-color-mid:       #f5efdb;   /* zero / balanced                     */
  --nm-color-r-soft:    #f5b7a1;   /* soft right                          */
  --nm-color-r-mid:     #b44844;   /* mid right                           */
  --nm-color-r-deep:    #6c1c1c;   /* far right-dominant                  */

  /* ─── COLOUR · Semantic ────────────────────────────────────────────── */
  --nm-color-good:      #5a7a34;   /* within range / balanced             */
  --nm-color-warn:      #b88838;   /* mild deviation                      */
  --nm-color-strong:    #6c1c1c;   /* marked deviation                    */
  --nm-color-info:      #4a6c8c;   /* informational                       */
  --nm-color-accent:    #2a261f;   /* selection / primary action (ink)    */

  /* ─── COLOUR · Clinical traffic-light (SEVERITY vs age-matched norm) ─
     Single source of truth used across the entire platform: overview
     callouts, coherence lines, connectivity tiers, normative bars, etc.
     |z| < 1 → within norm · 1–2 mild · 2 trending · 2–3 significant · ≥3 critical
     ─────────────────────────────────────────────────────────────────── */
  --nm-tier-norm:       #5cb46a;   /* green   · within norm                */
  --nm-tier-mild:       #a8d472;   /* lime    · mild deviation             */
  --nm-tier-trend:      #f0d566;   /* amber   · trending                   */
  --nm-tier-sig:        #f3a557;   /* orange  · significant                */
  --nm-tier-crit:       #e85838;   /* red     · critical                   */
  --nm-tier-quiet:      #6b7280;   /* grey    · no finding / no signal     */

  /* Contrasting text colours for each tier (use as fill on tier backgrounds) */
  --nm-tier-norm-text:  #ffffff;
  --nm-tier-mild-text:  #2a3a18;
  --nm-tier-trend-text: #5a4218;
  --nm-tier-sig-text:   #ffffff;
  --nm-tier-crit-text:  #ffffff;
  --nm-tier-quiet-text: #ffffff;

  /* ─── COLOUR · MNE-Python colormaps (DATA layers) ──────────────────
     Use these for raw data visualizations (topomaps, coherence lines,
     spectrograms, source maps). Universal across MNE / EEGLAB / Brainstorm
     / FieldTrip — every EEG clinician recognises them at a glance.
     ─────────────────────────────────────────────────────────────────── */
  /* RdBu_r — SIGNED / DIVERGING (asymmetry, ERPs, z-scores) */
  --nm-cmap-rdbu:    linear-gradient(90deg,
                       #2166ac 0%, #67a9cf 18%, #d1e5f0 38%,
                       #f7f7f7 50%, #fddbc7 62%, #ef8a62 82%, #b2182b 100%);
  /* viridis — UNSIGNED / SEQUENTIAL (power, coherence, spectrograms) */
  --nm-cmap-viridis: linear-gradient(90deg,
                       #440154 0%, #404387 25%, #29788e 50%,
                       #79d151 75%, #fde725 100%);
  /* hot — alt unsigned sequential (source-localization, statistical maps) */
  --nm-cmap-hot:     linear-gradient(90deg,
                       #000000 0%, #800000 20%, #ff0000 40%,
                       #ff8000 60%, #ffff00 80%, #ffffff 100%);

  /* ─────────────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────────────────── */
  --nm-font-sans:  "Inter", -apple-system, BlinkMacSystemFont,
                   "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --nm-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono",
                   Menlo, Consolas, monospace;
  --nm-font-serif: "Instrument Serif", "Georgia", serif;

  /* Type scale (display) */
  --nm-text-xs:    10px;
  --nm-text-sm:    11px;
  --nm-text-base:  12px;
  --nm-text-md:    13px;
  --nm-text-lg:    14px;
  --nm-text-xl:    17px;
  --nm-text-2xl:   22px;
  --nm-text-3xl:   28px;
  --nm-text-4xl:   36px;
  --nm-text-5xl:   48px;
  --nm-text-6xl:   64px;

  /* Weights */
  --nm-weight-regular:  400;
  --nm-weight-medium:   500;
  --nm-weight-semibold: 600;
  --nm-weight-bold:     700;

  /* Letter-spacing */
  --nm-tracking-display: -0.030em;   /* hero titles                       */
  --nm-tracking-tight:   -0.018em;   /* card titles                       */
  --nm-tracking-snug:    -0.010em;   /* body emphasis                     */
  --nm-tracking-normal:   0;
  --nm-tracking-mono:     0;
  --nm-tracking-loose:    0.02em;
  --nm-tracking-eyebrow:  0.18em;    /* small-caps / eyebrow text         */

  /* Line-heights */
  --nm-leading-tight:    1.05;
  --nm-leading-snug:     1.30;
  --nm-leading-normal:   1.50;
  --nm-leading-relaxed:  1.60;

  /* OpenType features */
  --nm-feat-tabular: "tnum", "cv11", "ss01";

  /* ─────────────────────────────────────────────────────────────────────
     SPACING SCALE (4-px base)
     ───────────────────────────────────────────────────────────────────── */
  --nm-space-1:  4px;
  --nm-space-2:  8px;
  --nm-space-3:  12px;
  --nm-space-4:  16px;
  --nm-space-5:  20px;
  --nm-space-6:  24px;
  --nm-space-7:  28px;
  --nm-space-8:  32px;
  --nm-space-9:  36px;
  --nm-space-10: 40px;
  --nm-space-12: 48px;
  --nm-space-14: 56px;
  --nm-space-16: 64px;
  --nm-space-20: 80px;

  /* ─────────────────────────────────────────────────────────────────────
     BORDER · radius
     ───────────────────────────────────────────────────────────────────── */
  --nm-radius-xs:   4px;
  --nm-radius-sm:   6px;
  --nm-radius-md:   8px;
  --nm-radius-lg:   12px;
  --nm-radius-xl:   14px;
  --nm-radius-2xl:  18px;
  --nm-radius-3xl:  22px;
  --nm-radius-full: 999px;

  /* ─── BORDER · width ──────────────────────────────────────────────── */
  --nm-border-hair:  1px;
  --nm-border-thin:  1.5px;
  --nm-border-mid:   2px;
  --nm-border-thick: 3px;

  /* ─────────────────────────────────────────────────────────────────────
     SHADOW
     ───────────────────────────────────────────────────────────────────── */
  --nm-shadow-1: 0 1px 2px rgba(42, 38, 31, 0.04);
  --nm-shadow-2: 0 2px 6px rgba(42, 38, 31, 0.06),
                 0 8px 24px rgba(42, 38, 31, 0.08);
  --nm-shadow-3: 0 4px 12px rgba(42, 38, 31, 0.10),
                 0 18px 36px rgba(42, 38, 31, 0.12);
  --nm-shadow-glow: 0 0 0 3px rgba(74, 108, 140, 0.15);

  /* ─────────────────────────────────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────────────────────────────────── */
  --nm-layout-max:   1400px;
  --nm-layout-pad:   48px;
  --nm-layout-pad-y: 38px;
  --nm-topbar-h:     52px;

  /* ─── Z-INDEX layers ─────────────────────────────────────────────── */
  --nm-z-base:     1;
  --nm-z-canvas:   2;
  --nm-z-overlay:  10;
  --nm-z-sticky:   100;
  --nm-z-modal:    1000;
  --nm-z-tooltip:  10000;

  /* ─── MOTION ─────────────────────────────────────────────────────── */
  --nm-ease-out:   cubic-bezier(.2, .7, .3, 1);
  --nm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --nm-dur-fast:   120ms;
  --nm-dur-mid:    250ms;
  --nm-dur-slow:   400ms;

  /* ═══════════════════════════════════════════════════════════════════
     LEGACY ALIASES
     These keep older page CSS working without breakage.
     Prefer the --nm-* tokens above in new code.
     ═══════════════════════════════════════════════════════════════════ */
  --st-bg:        var(--nm-color-bg);
  --st-card:      var(--nm-color-card);
  --st-paper:     var(--nm-color-paper);
  --st-white:     var(--nm-color-white);
  --st-ink:       var(--nm-color-ink);
  --st-ink-2:     var(--nm-color-ink-2);
  --st-ink-3:     var(--nm-color-ink-3);
  --st-ink-4:     var(--nm-color-ink-4);
  --st-line:      var(--nm-color-line);
  --st-line-2:    var(--nm-color-line-2);
  --st-l-deep:    var(--nm-color-l-deep);
  --st-l-mid:     var(--nm-color-l-mid);
  --st-l-soft:    var(--nm-color-l-soft);
  --st-cream:     var(--nm-color-mid);
  --st-r-soft:    var(--nm-color-r-soft);
  --st-r-mid:     var(--nm-color-r-mid);
  --st-r-deep:    var(--nm-color-r-deep);
  --st-accent:    var(--nm-color-accent);

  --font-display: var(--nm-font-sans);
  --font-mono:    var(--nm-font-mono);

  --bg-0:         var(--nm-color-bg);
  --bg-1:         var(--nm-color-card);
  --surface-1:    var(--nm-color-card);
  --surface-2:    var(--nm-color-paper);
  --surface-3:    var(--nm-color-line);
  --border:       var(--nm-color-line);
  --border-strong:var(--nm-color-line-2);
  --text-1:       var(--nm-color-ink);
  --text-2:       var(--nm-color-ink-2);
  --text-3:       var(--nm-color-ink-3);
  --text-4:       var(--nm-color-ink-4);
  --accent:       var(--nm-color-info);
  --accent-2:     var(--nm-color-accent);
  --ok:           var(--nm-color-good);
  --warn:         var(--nm-color-warn);
  --danger:       var(--nm-color-strong);
  --radius-sm:    var(--nm-radius-md);
  --radius-md:    var(--nm-radius-xl);
  --radius-lg:    var(--nm-radius-3xl);
  --shadow-1:     var(--nm-shadow-1);
  --shadow-2:     var(--nm-shadow-2);
  --shadow-glow:  var(--nm-shadow-glow);
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE — minimal global defaults that apply to every page
   ═══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--nm-font-sans);
  color: var(--nm-color-ink);
  background: var(--nm-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--nm-tracking-snug);
  font-feature-settings: var(--nm-feat-tabular);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES (optional — use only where they save time)
   ═══════════════════════════════════════════════════════════════════════ */

.nm-mono       { font-family: var(--nm-font-mono); }
.nm-tabular    { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.nm-eyebrow    {
  font-family: var(--nm-font-mono);
  font-size:   var(--nm-text-sm);
  letter-spacing: var(--nm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
}
.nm-mute       { color: var(--nm-color-ink-3); }
.nm-mute-2     { color: var(--nm-color-ink-4); }
.nm-rule       { border: 0; border-top: var(--nm-border-hair) solid var(--nm-color-line-2); margin: 0; }
.nm-hidden     { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SHELL — fixed left sidebar + scrolling main column.
   Used on any page that wants the persistent app-shell navigation.
   Add class="nm-shell" to <body> to opt in.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --nm-sidebar-w: 256px;
}

body.nm-shell {
  background: var(--nm-color-bg);
  overflow-x: hidden;
}

/* ── Sidebar ── */
.nm-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nm-sidebar-w);
  background: var(--nm-color-card);
  border-right: var(--nm-border-hair) solid var(--nm-color-line);
  padding: 22px 18px 20px;
  display: flex; flex-direction: column;
  gap: 22px;
  overflow-y: auto;
  z-index: var(--nm-z-sticky);
  /* hide scrollbar but keep scroll */
  scrollbar-width: thin;
}
.nm-sidebar::-webkit-scrollbar { width: 6px; }
.nm-sidebar::-webkit-scrollbar-thumb { background: var(--nm-color-line); border-radius: 3px; }

/* ── Brand · NeuroMap logo (transparent PNG, cropped to content) ── */
.nm-sb-brand {
  display: flex; align-items: center;
  padding: 4px 6px 12px;
  border-bottom: var(--nm-border-hair) solid var(--nm-color-line);
  text-decoration: none;
}
.nm-sb-brand-logo {
  display: block;
  /* Logo aspect ratio is ~5.14:1 (1359 × 264). At height 30px, width ≈ 154px. */
  height: 30px;
  width: auto;
  max-width: 100%;
  /* Preserve crisp edges on hi-DPI displays + smooth scaling on standard */
  image-rendering: -webkit-optimize-contrast;
  object-fit: contain;
}

/* ── Patient block ── */
.nm-sb-patient {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 12px;
  background: var(--nm-color-paper);
  border-radius: var(--nm-radius-md);
}
.nm-sb-patient-name {
  font-family: var(--nm-font-sans);
  font-size: var(--nm-text-lg);
  font-weight: var(--nm-weight-semibold);
  letter-spacing: var(--nm-tracking-tight);
  color: var(--nm-color-ink);
  line-height: 1.2;
}
.nm-sb-patient-meta {
  font-family: var(--nm-font-mono);
  font-size: var(--nm-text-sm);
  color: var(--nm-color-ink-3);
}

/* ── Sections of links ── */
.nm-sb-section { display: flex; flex-direction: column; gap: 2px; }
.nm-sb-section-head {
  font-family: var(--nm-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nm-color-ink-3);
  padding: 0 8px;
  margin-bottom: 8px;
}

.nm-sb-link {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--nm-radius-sm);
  font-family: var(--nm-font-sans);
  font-size: var(--nm-text-md);
  color: var(--nm-color-ink-2);
  text-decoration: none;
  letter-spacing: var(--nm-tracking-snug);
  transition:
    background var(--nm-dur-fast) var(--nm-ease-out),
    color var(--nm-dur-fast) var(--nm-ease-out);
  cursor: pointer;
  position: relative;
}
.nm-sb-link:hover {
  background: var(--nm-color-paper);
  color: var(--nm-color-ink);
}
.nm-sb-link.is-active {
  background: var(--nm-color-paper);
  color: var(--nm-color-ink);
  font-weight: var(--nm-weight-medium);
}
.nm-sb-link .nm-sb-link-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--nm-color-ink-4);
  opacity: 0;
  transition: opacity var(--nm-dur-fast) var(--nm-ease-out);
  flex-shrink: 0;
}
.nm-sb-link.is-active .nm-sb-link-dot {
  background: var(--nm-color-accent);
  opacity: 1;
}

.nm-sb-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: var(--nm-border-hair) solid var(--nm-color-line);
  display: flex; flex-direction: column; gap: 2px;
}

/* ── Main column ── */
.nm-shell-main {
  margin-left: var(--nm-sidebar-w);
  min-height: 100vh;
}

@media (max-width: 880px) {
  .nm-sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: var(--nm-border-hair) solid var(--nm-color-line);
    height: auto;
  }
  .nm-shell-main { margin-left: 0; }
}