/* ───────────────────────────────────────────────────────────
   theme.css — Signal app-wide theme system v5
   Four themes:
     night     → navy-black + gold     (default, unchanged)
     graphite  → pure charcoal + silver (unchanged)
     midnight  → lighter navy + cyan   (unchanged)
     light     → warm paper + ink + gold (REBUILT — opaque, hairline borders, no glass)

   Design principles applied in v5:
   - Light mode uses OPAQUE surfaces (no glass/blur on panels).
   - Glass effects move to no-op variables in light.
   - Page bg = warm paper; surface bg = white. Clear figure/ground.
   - Body text near-black (#0e1420) for terminal-grade readability.
   - Aurora removed in light mode (--aurora-opacity: 0).
   - Signal colors darkened to meet WCAG AA on white.
   - Gold accent retained but darkened (#a8852e) and used sparingly.
   ─────────────────────────────────────────────────────────── */

/* ─── DEFAULT / NIGHT ─────────────────────────────────────── */
:root,
:root[data-theme="night"] {
  --bg:        #070c14;
  --bg2:       #0c1422;
  --bg3:       #101c2e;
  --bg4:       #152238;
  --surface:   #0c1422;
  --surface-2: rgba(16,28,46,.6);
  --panel:     rgba(16,28,46,.5);
  --panel-line:rgba(139,165,200,.10);

  --ink:       #e8edf5;
  --ink2:      #c5cbd6;
  --ink3:      #8fa3c0;
  --ink4:      #4a6080;

  --line:      rgba(139,165,200,.10);
  --line2:     rgba(139,165,200,.18);
  --border:    rgba(139,165,200,.10);
  --border2:   rgba(139,165,200,.18);

  --accent:    #c8a44a;
  --accent-2:  #e0bc5f;
  --accent-bg: rgba(200,164,74,.10);

  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,.10);
  --green-line:rgba(34,197,94,.30);
  --amber:     #f59e0b;
  --amber-bg:  rgba(245,158,11,.10);
  --amber-line:rgba(245,158,11,.30);
  --red:       #ef4444;
  --red-bg:    rgba(239,68,68,.10);
  --red-line:  rgba(239,68,68,.30);
  --blue:      #3b82f6;
  --teal:      #06b6d4;
  --purple:    #8b5cf6;

  --sb-bg:        rgba(10,10,10,.9);
  --sb-grad:      linear-gradient(180deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.02) 100%);
  --sb-border:    rgba(255,255,255,.08);
  --sb-shadow:    inset -1px 0 0 rgba(255,255,255,.04),1px 0 20px rgba(0,0,0,.4);
  --sb-text:      rgba(255,255,255,.45);
  --sb-text-2:    rgba(255,255,255,.3);
  --sb-text-dim:  rgba(255,255,255,.2);
  --sb-active-bg: rgba(255,255,255,.07);
  --sb-active-border: rgba(255,255,255,.11);
  --sb-active-text: #f0f0f0;
  --sb-hover-bg:  rgba(255,255,255,.055);
  --sb-hover-border: rgba(255,255,255,.09);
  --sb-input-bg:  rgba(255,255,255,.04);
  --sb-input-border: rgba(255,255,255,.06);
  --sb-logo-text: #eee;
  --sb-logo-dot:  #00d47b;
  --sb-logo-glow: rgba(0,212,123,.35);

  --gold:      #c8a44a;
  --gold2:     #e0bc5f;
  --gold3:     #7a5e22;
  --sage:      rgba(168,194,148,.10);
  --sage-line: rgba(168,194,148,.20);
  --sans:      "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:      "IBM Plex Mono",monospace;

  /* Role variables (home + briefing) */
  --accent-green:  #00d47b;
  --accent-blue:   #4d8eff;
  --accent-purple: #a78bfa;
  --accent-amber:  #f59e0b;

  --tape-bg:        rgba(10,16,28,.85);
  --topbar-bg:      rgba(10,16,28,.4);
  --topbar-border:  rgba(139,165,200,.06);
  --briefing-bg:    rgba(12,20,34,.55);
  --briefing-line:  rgba(255,255,255,.06);
  --briefing-hover: rgba(255,255,255,.1);
  --icon-btn-bg:    rgba(255,255,255,.04);
  --icon-btn-line:  rgba(255,255,255,.08);
  --signout-bg:     rgba(139,165,200,.06);

  --glass-bg:        rgba(16,28,46,.55);
  --glass-bg-active: rgba(20,34,56,.75);
  --glass-bg-2:      rgba(12,20,34,.55);
  --glass-bg-strong: rgba(16,28,46,.6);
  --folder-panel:    rgba(16,28,46,.75);
  --folder-edge:     rgba(255,255,255,.08);
  --folder-edge-strong: rgba(255,255,255,.16);
  --folder-sep:      rgba(139,165,200,.1);
  --folder-sep-soft: rgba(139,165,200,.08);

  --shadow-inset-light: rgba(255,255,255,.06);
  --shadow-inset-strong:rgba(255,255,255,.1);
  --shadow-inset-icon:  rgba(255,255,255,.2);
  --shadow-inset-dark:  rgba(0,0,0,.3);
  --shadow-drop-soft:   rgba(0,0,0,.25);
  --shadow-drop-mid:    rgba(0,0,0,.3);
  --shadow-drop-deep:   rgba(0,0,0,.4);
  --shadow-drop-deepest:rgba(0,0,0,.5);
  --shadow-tab-shine:   rgba(255,255,255,.12);
  --shadow-icon-shine:  rgba(255,255,255,.2);

  --settings-bg:    linear-gradient(180deg,rgba(12,20,34,.95),rgba(7,12,20,.95));
  --settings-row-bg:rgba(255,255,255,.02);
  --settings-row-line:rgba(255,255,255,.05);
  --settings-toggle-bg:rgba(255,255,255,.08);
  --settings-toggle-line:rgba(255,255,255,.1);
  --backdrop:       rgba(0,0,0,.5);

  --step-link-bg:    rgba(77,142,255,.1);
  --step-link-line:  rgba(77,142,255,.25);
  --step-link-text:  #7aa9ff;
  --step-link-bg-hover: rgba(77,142,255,.18);
  --step-link-text-hover:#b3d2ff;

  --step-ic-bg:     rgba(200,164,74,.12);
  --step-ic-line:   rgba(200,164,74,.3);
  --step-ic-num-bg: var(--bg);
  --step-ic-num-line:rgba(200,164,74,.4);

  --gold-soft-bg:   rgba(200,164,74,.1);
  --gold-soft-line: rgba(200,164,74,.3);
  --gold-soft-hover-bg: rgba(200,164,74,.08);

  --aurora-opacity: 1;

  /* Folder/quadrant tint colors */
  --tint-green-soft:  rgba(0,212,123,.14);
  --tint-green-mid:   rgba(0,212,123,.22);
  --tint-green-glow:  rgba(0,212,123,.28);
  --tint-green-glow-a:rgba(0,212,123,.55);
  --tint-blue-soft:   rgba(77,142,255,.14);
  --tint-blue-mid:    rgba(77,142,255,.22);
  --tint-blue-glow:   rgba(77,142,255,.28);
  --tint-blue-glow-a: rgba(77,142,255,.55);
  --tint-purple-soft: rgba(167,139,250,.14);
  --tint-purple-mid:  rgba(167,139,250,.22);
  --tint-purple-glow: rgba(167,139,250,.28);
  --tint-purple-glow-a:rgba(167,139,250,.55);
  --tint-amber-soft:  rgba(245,158,11,.14);
  --tint-amber-mid:   rgba(245,158,11,.22);
  --tint-amber-glow:  rgba(245,158,11,.28);
  --tint-amber-glow-a:rgba(245,158,11,.55);

  --spinner-track:  rgba(139,165,200,.2);

  /* Briefing-specific roles */
  --hero-bg:        rgba(12,20,34,.55);
  --sec-bg:         rgba(12,20,34,.55);
  --sec-head-bg:    rgba(16,28,46,.4);
  --sec-head-line:  rgba(255,255,255,.04);
  --pc-bg:          rgba(16,28,46,.5);
  --pc-line:        rgba(255,255,255,.06);
  --pcard-hover-line: rgba(200,164,74,.25);
  --hmetric-bg:     rgba(16,28,46,.5);
  --rlight-bg:      rgba(16,28,46,.3);
  --rlight-cmpt-bg: rgba(16,28,46,.35);
  --bmetric-bg:     rgba(16,28,46,.5);
  --breadth-chart-bg: rgba(16,28,46,.4);
  --breadth-narr-bg: rgba(16,28,46,.4);
  --pulse-cmpt-bg:  rgba(16,28,46,.5);
  --cs-item-bg:     rgba(16,28,46,.3);
  --mq-cell-bg:     rgba(16,28,46,.5);
  --sr-summary-bg:  rgba(16,28,46,.5);
  --sr-track-bg:    rgba(139,165,200,.06);

  /* State pill backgrounds (used by .badge-*, .chg-*, .pal-* etc.) */
  --pill-green-bg:  rgba(34,197,94,.12);
  --pill-green-mid: rgba(34,197,94,.15);
  --pill-green-soft:rgba(34,197,94,.08);
  --pill-green-line:rgba(34,197,94,.30);
  --pill-green-line-strong:rgba(34,197,94,.50);
  --pill-amber-bg:  rgba(245,158,11,.12);
  --pill-amber-mid: rgba(245,158,11,.15);
  --pill-amber-soft:rgba(245,158,11,.08);
  --pill-amber-line:rgba(245,158,11,.30);
  --pill-amber-line-strong:rgba(245,158,11,.50);
  --pill-red-bg:    rgba(239,68,68,.12);
  --pill-red-mid:   rgba(239,68,68,.15);
  --pill-red-soft:  rgba(239,68,68,.10);
  --pill-red-line:  rgba(239,68,68,.30);
  --pill-red-line-strong:rgba(239,68,68,.50);
  --pill-blue-bg:   rgba(59,130,246,.10);
  --pill-blue-mid:  rgba(59,130,246,.15);
  --pill-blue-soft: rgba(59,130,246,.08);
  --pill-blue-line: rgba(77,142,255,.30);
  --pill-blue-line-strong:rgba(77,142,255,.45);
  --pill-teal-bg:   rgba(6,182,212,.15);
  --pill-teal-soft: rgba(6,182,212,.08);
  --pill-teal-line: rgba(6,182,212,.25);
  --pill-teal-line-strong:rgba(6,182,212,.40);
  --pill-neutral-bg:rgba(139,165,200,.08);
  --pill-neutral-soft:rgba(139,165,200,.05);
  --pill-neutral-line:rgba(139,165,200,.15);
  --pill-gray-bg:   rgba(107,114,128,.15);
  --pill-gray-fg:   #9ca3af;

  --hero-glow-green:rgba(34,197,94,.22);
  --hero-glow-amber:rgba(245,158,11,.22);
  --hero-glow-red:  rgba(239,68,68,.26);
  --hero-glow-blue: rgba(77,142,255,.22);
  --hero-glow-gold: rgba(200,164,74,.18);
}

/* ─── GRAPHITE ─────────────────────────────────────────────── */
:root[data-theme="graphite"] {
  --bg:        #0e0e10;
  --bg2:       #16161a;
  --bg3:       #1c1c20;
  --bg4:       #24242a;
  --surface:   #16161a;
  --surface-2: rgba(28,28,32,.7);
  --panel:     rgba(28,28,32,.65);
  --panel-line:rgba(180,180,190,.12);

  --ink:       #e0e0e3;
  --ink2:      #c0c0c5;
  --ink3:      #9a9aa0;
  --ink4:      #6a6a72;

  --line:      rgba(180,180,190,.12);
  --line2:     rgba(180,180,190,.22);
  --border:    rgba(180,180,190,.12);
  --border2:   rgba(180,180,190,.22);

  --accent:    #b8b8c0;
  --accent-2:  #d4d4dc;
  --accent-bg: rgba(184,184,192,.10);

  --green:     #7adc92;
  --green-bg:  rgba(120,200,140,.10);
  --green-line:rgba(120,200,140,.30);
  --amber:     #e8b558;
  --amber-bg:  rgba(232,181,88,.10);
  --amber-line:rgba(232,181,88,.30);
  --red:       #ef6464;
  --red-bg:    rgba(239,100,100,.10);
  --red-line:  rgba(239,100,100,.30);
  --blue:      #8ab0ff;
  --teal:      #6cd0e0;
  --purple:    #b8a8f0;

  --sb-bg:        rgba(14,14,16,.92);
  --sb-grad:      linear-gradient(180deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.02) 100%);
  --sb-border:    rgba(255,255,255,.08);
  --sb-shadow:    inset -1px 0 0 rgba(255,255,255,.05),1px 0 20px rgba(0,0,0,.5);
  --sb-text:      rgba(255,255,255,.5);
  --sb-text-2:    rgba(255,255,255,.32);
  --sb-text-dim:  rgba(255,255,255,.22);
  --sb-active-bg: rgba(255,255,255,.08);
  --sb-active-border: rgba(255,255,255,.14);
  --sb-active-text: #f4f4f6;
  --sb-hover-bg:  rgba(255,255,255,.06);
  --sb-hover-border: rgba(255,255,255,.10);
  --sb-input-bg:  rgba(255,255,255,.05);
  --sb-input-border: rgba(255,255,255,.08);
  --sb-logo-text: #f4f4f6;
  --sb-logo-dot:  #b8b8c0;
  --sb-logo-glow: rgba(184,184,192,.35);

  --gold:      #b8b8c0;
  --gold2:     #d4d4dc;
  --gold3:     #6e6e76;
  --sage:      rgba(184,184,192,.08);
  --sage-line: rgba(184,184,192,.18);
  --sans:      "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:      "IBM Plex Mono",monospace;

  --accent-green:  #7adc92;
  --accent-blue:   #8ab0ff;
  --accent-purple: #b8a8f0;
  --accent-amber:  #e8b558;

  --tape-bg:        rgba(14,14,16,.88);
  --topbar-bg:      rgba(14,14,16,.5);
  --topbar-border:  rgba(180,180,190,.10);
  --briefing-bg:    rgba(22,22,26,.6);
  --briefing-line:  rgba(255,255,255,.07);
  --briefing-hover: rgba(255,255,255,.12);
  --icon-btn-bg:    rgba(255,255,255,.05);
  --icon-btn-line:  rgba(255,255,255,.08);
  --signout-bg:     rgba(255,255,255,.05);

  --glass-bg:        rgba(28,28,32,.6);
  --glass-bg-active: rgba(36,36,42,.78);
  --glass-bg-2:      rgba(22,22,26,.6);
  --glass-bg-strong: rgba(28,28,32,.7);
  --folder-panel:   rgba(28,28,32,.78);
  --folder-edge:    rgba(255,255,255,.09);
  --folder-edge-strong:rgba(255,255,255,.18);
  --folder-sep:     rgba(180,180,190,.12);
  --folder-sep-soft:rgba(180,180,190,.08);

  --shadow-inset-light: rgba(255,255,255,.07);
  --shadow-inset-strong:rgba(255,255,255,.12);
  --shadow-inset-icon:  rgba(255,255,255,.22);
  --shadow-inset-dark:  rgba(0,0,0,.32);
  --shadow-drop-soft:   rgba(0,0,0,.28);
  --shadow-drop-mid:    rgba(0,0,0,.34);
  --shadow-drop-deep:   rgba(0,0,0,.45);
  --shadow-drop-deepest:rgba(0,0,0,.55);
  --shadow-tab-shine:   rgba(255,255,255,.13);
  --shadow-icon-shine:  rgba(255,255,255,.2);

  --settings-bg:    linear-gradient(180deg,rgba(22,22,26,.95),rgba(14,14,16,.95));
  --settings-row-bg:rgba(255,255,255,.03);
  --settings-row-line:rgba(255,255,255,.06);
  --settings-toggle-bg:rgba(255,255,255,.09);
  --settings-toggle-line:rgba(255,255,255,.12);
  --backdrop:       rgba(0,0,0,.55);

  --step-link-bg:    rgba(138,176,255,.10);
  --step-link-line:  rgba(138,176,255,.26);
  --step-link-text:  #b0c8ff;
  --step-link-bg-hover:rgba(138,176,255,.18);
  --step-link-text-hover:#d6e2ff;

  --step-ic-bg:     rgba(184,184,192,.12);
  --step-ic-line:   rgba(184,184,192,.3);
  --step-ic-num-bg: var(--bg);
  --step-ic-num-line:rgba(184,184,192,.4);

  --gold-soft-bg:   rgba(184,184,192,.12);
  --gold-soft-line: rgba(184,184,192,.3);
  --gold-soft-hover-bg: rgba(184,184,192,.10);

  --aurora-opacity: .85;

  --tint-green-soft:  rgba(122,220,146,.12);
  --tint-green-mid:   rgba(122,220,146,.20);
  --tint-green-glow:  rgba(122,220,146,.26);
  --tint-green-glow-a:rgba(122,220,146,.50);
  --tint-blue-soft:   rgba(138,176,255,.12);
  --tint-blue-mid:    rgba(138,176,255,.20);
  --tint-blue-glow:   rgba(138,176,255,.26);
  --tint-blue-glow-a: rgba(138,176,255,.50);
  --tint-purple-soft: rgba(184,168,240,.12);
  --tint-purple-mid:  rgba(184,168,240,.20);
  --tint-purple-glow: rgba(184,168,240,.26);
  --tint-purple-glow-a:rgba(184,168,240,.50);
  --tint-amber-soft:  rgba(232,181,88,.12);
  --tint-amber-mid:   rgba(232,181,88,.20);
  --tint-amber-glow:  rgba(232,181,88,.26);
  --tint-amber-glow-a:rgba(232,181,88,.50);

  --spinner-track:  rgba(180,180,190,.22);

  --hero-bg:        rgba(22,22,26,.6);
  --sec-bg:         rgba(22,22,26,.6);
  --sec-head-bg:    rgba(28,28,32,.45);
  --sec-head-line:  rgba(255,255,255,.05);
  --pc-bg:          rgba(28,28,32,.55);
  --pc-line:        rgba(255,255,255,.07);
  --pcard-hover-line: rgba(184,184,192,.30);
  --hmetric-bg:     rgba(28,28,32,.55);
  --rlight-bg:      rgba(28,28,32,.35);
  --rlight-cmpt-bg: rgba(28,28,32,.4);
  --bmetric-bg:     rgba(28,28,32,.55);
  --breadth-chart-bg: rgba(28,28,32,.45);
  --breadth-narr-bg: rgba(28,28,32,.45);
  --pulse-cmpt-bg:  rgba(28,28,32,.55);
  --cs-item-bg:     rgba(28,28,32,.35);
  --mq-cell-bg:     rgba(28,28,32,.55);
  --sr-summary-bg:  rgba(28,28,32,.55);
  --sr-track-bg:    rgba(180,180,190,.08);

  --pill-green-bg:  rgba(122,220,146,.14);
  --pill-green-mid: rgba(122,220,146,.18);
  --pill-green-soft:rgba(122,220,146,.10);
  --pill-green-line:rgba(122,220,146,.32);
  --pill-green-line-strong:rgba(122,220,146,.50);
  --pill-amber-bg:  rgba(232,181,88,.14);
  --pill-amber-mid: rgba(232,181,88,.18);
  --pill-amber-soft:rgba(232,181,88,.10);
  --pill-amber-line:rgba(232,181,88,.32);
  --pill-amber-line-strong:rgba(232,181,88,.50);
  --pill-red-bg:    rgba(239,100,100,.14);
  --pill-red-mid:   rgba(239,100,100,.18);
  --pill-red-soft:  rgba(239,100,100,.10);
  --pill-red-line:  rgba(239,100,100,.32);
  --pill-red-line-strong:rgba(239,100,100,.50);
  --pill-blue-bg:   rgba(138,176,255,.12);
  --pill-blue-mid:  rgba(138,176,255,.18);
  --pill-blue-soft: rgba(138,176,255,.08);
  --pill-blue-line: rgba(138,176,255,.30);
  --pill-blue-line-strong:rgba(138,176,255,.45);
  --pill-teal-bg:   rgba(108,208,224,.15);
  --pill-teal-soft: rgba(108,208,224,.08);
  --pill-teal-line: rgba(108,208,224,.28);
  --pill-teal-line-strong:rgba(108,208,224,.42);
  --pill-neutral-bg:rgba(180,180,190,.10);
  --pill-neutral-soft:rgba(180,180,190,.06);
  --pill-neutral-line:rgba(180,180,190,.18);
  --pill-gray-bg:   rgba(140,140,148,.18);
  --pill-gray-fg:   #b0b0b8;

  --hero-glow-green:rgba(122,220,146,.20);
  --hero-glow-amber:rgba(232,181,88,.20);
  --hero-glow-red:  rgba(239,100,100,.24);
  --hero-glow-blue: rgba(138,176,255,.20);
  --hero-glow-gold: rgba(184,184,192,.18);
}

/* ─── MIDNIGHT ─────────────────────────────────────────────── */
:root[data-theme="midnight"] {
  --bg:        #0a1428;
  --bg2:       #10203c;
  --bg3:       #162a4d;
  --bg4:       #1c355e;
  --surface:   #10203c;
  --surface-2: rgba(20,38,68,.65);
  --panel:     rgba(20,38,68,.55);
  --panel-line:rgba(120,160,220,.14);

  --ink:       #dde7f5;
  --ink2:      #b8c8de;
  --ink3:      #7fa0c8;
  --ink4:      #4d6e9c;

  --line:      rgba(120,160,220,.14);
  --line2:     rgba(120,160,220,.22);
  --border:    rgba(120,160,220,.14);
  --border2:   rgba(120,160,220,.22);

  --accent:    #5eb3d9;
  --accent-2:  #7fc8e8;
  --accent-bg: rgba(94,179,217,.12);

  --green:     #3edcaa;
  --green-bg:  rgba(50,200,150,.12);
  --green-line:rgba(50,200,150,.32);
  --amber:     #f0b860;
  --amber-bg:  rgba(240,184,96,.12);
  --amber-line:rgba(240,184,96,.32);
  --red:       #f06868;
  --red-bg:    rgba(240,104,104,.12);
  --red-line:  rgba(240,104,104,.32);
  --blue:      #5eb3d9;
  --teal:      #7fc8e8;
  --purple:    #a78bfa;

  --sb-bg:        rgba(10,20,40,.92);
  --sb-grad:      linear-gradient(180deg,rgba(120,160,220,.05) 0%,rgba(120,160,220,0) 30%,rgba(120,160,220,.02) 100%);
  --sb-border:    rgba(120,160,220,.14);
  --sb-shadow:    inset -1px 0 0 rgba(120,160,220,.06),1px 0 20px rgba(0,0,0,.45);
  --sb-text:      rgba(221,231,245,.55);
  --sb-text-2:    rgba(221,231,245,.4);
  --sb-text-dim:  rgba(221,231,245,.25);
  --sb-active-bg: rgba(94,179,217,.10);
  --sb-active-border: rgba(94,179,217,.22);
  --sb-active-text: #eaf3ff;
  --sb-hover-bg:  rgba(120,160,220,.07);
  --sb-hover-border: rgba(120,160,220,.12);
  --sb-input-bg:  rgba(120,160,220,.06);
  --sb-input-border: rgba(120,160,220,.10);
  --sb-logo-text: #eaf3ff;
  --sb-logo-dot:  #5eb3d9;
  --sb-logo-glow: rgba(94,179,217,.4);

  --gold:      #5eb3d9;
  --gold2:     #7fc8e8;
  --gold3:     #34607a;
  --sage:      rgba(94,179,217,.08);
  --sage-line: rgba(94,179,217,.18);
  --sans:      "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:      "IBM Plex Mono",monospace;

  --accent-green:  #3edcaa;
  --accent-blue:   #5eb3d9;
  --accent-purple: #a78bfa;
  --accent-amber:  #f0b860;

  --tape-bg:        rgba(10,20,40,.85);
  --topbar-bg:      rgba(10,20,40,.45);
  --topbar-border:  rgba(120,160,220,.10);
  --briefing-bg:    rgba(16,32,60,.6);
  --briefing-line:  rgba(120,160,220,.10);
  --briefing-hover: rgba(120,160,220,.18);
  --icon-btn-bg:    rgba(120,160,220,.06);
  --icon-btn-line:  rgba(120,160,220,.12);
  --signout-bg:     rgba(120,160,220,.06);

  --glass-bg:        rgba(20,38,68,.55);
  --glass-bg-active: rgba(28,53,94,.75);
  --glass-bg-2:      rgba(16,32,60,.55);
  --glass-bg-strong: rgba(20,38,68,.65);
  --folder-panel:    rgba(20,38,68,.78);
  --folder-edge:     rgba(120,160,220,.12);
  --folder-edge-strong:rgba(120,160,220,.20);
  --folder-sep:      rgba(120,160,220,.14);
  --folder-sep-soft: rgba(120,160,220,.09);

  --shadow-inset-light: rgba(255,255,255,.06);
  --shadow-inset-strong:rgba(255,255,255,.10);
  --shadow-inset-icon:  rgba(255,255,255,.2);
  --shadow-inset-dark:  rgba(0,0,0,.3);
  --shadow-drop-soft:   rgba(0,0,0,.25);
  --shadow-drop-mid:    rgba(0,0,0,.32);
  --shadow-drop-deep:   rgba(0,0,0,.42);
  --shadow-drop-deepest:rgba(0,0,0,.5);
  --shadow-tab-shine:   rgba(120,160,220,.18);
  --shadow-icon-shine:  rgba(255,255,255,.2);

  --settings-bg:    linear-gradient(180deg,rgba(16,32,60,.95),rgba(10,20,40,.95));
  --settings-row-bg:rgba(120,160,220,.04);
  --settings-row-line:rgba(120,160,220,.08);
  --settings-toggle-bg:rgba(120,160,220,.10);
  --settings-toggle-line:rgba(120,160,220,.14);
  --backdrop:       rgba(0,0,0,.55);

  --step-link-bg:    rgba(94,179,217,.12);
  --step-link-line:  rgba(94,179,217,.28);
  --step-link-text:  #95d2ee;
  --step-link-bg-hover:rgba(94,179,217,.22);
  --step-link-text-hover:#c2e5f5;

  --step-ic-bg:     rgba(94,179,217,.14);
  --step-ic-line:   rgba(94,179,217,.32);
  --step-ic-num-bg: var(--bg);
  --step-ic-num-line:rgba(94,179,217,.4);

  --gold-soft-bg:   rgba(94,179,217,.12);
  --gold-soft-line: rgba(94,179,217,.32);
  --gold-soft-hover-bg: rgba(94,179,217,.10);

  --aurora-opacity: .9;

  --tint-green-soft:  rgba(62,220,170,.14);
  --tint-green-mid:   rgba(62,220,170,.22);
  --tint-green-glow:  rgba(62,220,170,.28);
  --tint-green-glow-a:rgba(62,220,170,.55);
  --tint-blue-soft:   rgba(94,179,217,.14);
  --tint-blue-mid:    rgba(94,179,217,.22);
  --tint-blue-glow:   rgba(94,179,217,.28);
  --tint-blue-glow-a: rgba(94,179,217,.55);
  --tint-purple-soft: rgba(167,139,250,.14);
  --tint-purple-mid:  rgba(167,139,250,.22);
  --tint-purple-glow: rgba(167,139,250,.28);
  --tint-purple-glow-a:rgba(167,139,250,.55);
  --tint-amber-soft:  rgba(240,184,96,.14);
  --tint-amber-mid:   rgba(240,184,96,.22);
  --tint-amber-glow:  rgba(240,184,96,.28);
  --tint-amber-glow-a:rgba(240,184,96,.55);

  --spinner-track:  rgba(120,160,220,.2);

  --hero-bg:        rgba(16,32,60,.6);
  --sec-bg:         rgba(16,32,60,.6);
  --sec-head-bg:    rgba(22,42,77,.45);
  --sec-head-line:  rgba(120,160,220,.10);
  --pc-bg:          rgba(22,42,77,.55);
  --pc-line:        rgba(120,160,220,.10);
  --pcard-hover-line: rgba(94,179,217,.30);
  --hmetric-bg:     rgba(22,42,77,.55);
  --rlight-bg:      rgba(22,42,77,.35);
  --rlight-cmpt-bg: rgba(22,42,77,.4);
  --bmetric-bg:     rgba(22,42,77,.55);
  --breadth-chart-bg: rgba(22,42,77,.45);
  --breadth-narr-bg: rgba(22,42,77,.45);
  --pulse-cmpt-bg:  rgba(22,42,77,.55);
  --cs-item-bg:     rgba(22,42,77,.35);
  --mq-cell-bg:     rgba(22,42,77,.55);
  --sr-summary-bg:  rgba(22,42,77,.55);
  --sr-track-bg:    rgba(120,160,220,.08);

  --pill-green-bg:  rgba(62,220,170,.14);
  --pill-green-mid: rgba(62,220,170,.18);
  --pill-green-soft:rgba(62,220,170,.10);
  --pill-green-line:rgba(62,220,170,.32);
  --pill-green-line-strong:rgba(62,220,170,.50);
  --pill-amber-bg:  rgba(240,184,96,.14);
  --pill-amber-mid: rgba(240,184,96,.18);
  --pill-amber-soft:rgba(240,184,96,.10);
  --pill-amber-line:rgba(240,184,96,.32);
  --pill-amber-line-strong:rgba(240,184,96,.50);
  --pill-red-bg:    rgba(240,104,104,.14);
  --pill-red-mid:   rgba(240,104,104,.18);
  --pill-red-soft:  rgba(240,104,104,.10);
  --pill-red-line:  rgba(240,104,104,.32);
  --pill-red-line-strong:rgba(240,104,104,.50);
  --pill-blue-bg:   rgba(94,179,217,.12);
  --pill-blue-mid:  rgba(94,179,217,.18);
  --pill-blue-soft: rgba(94,179,217,.08);
  --pill-blue-line: rgba(94,179,217,.30);
  --pill-blue-line-strong:rgba(94,179,217,.45);
  --pill-teal-bg:   rgba(127,200,232,.15);
  --pill-teal-soft: rgba(127,200,232,.08);
  --pill-teal-line: rgba(127,200,232,.28);
  --pill-teal-line-strong:rgba(127,200,232,.42);
  --pill-neutral-bg:rgba(120,160,220,.10);
  --pill-neutral-soft:rgba(120,160,220,.06);
  --pill-neutral-line:rgba(120,160,220,.18);
  --pill-gray-bg:   rgba(127,160,200,.16);
  --pill-gray-fg:   #a8bdd6;

  --hero-glow-green:rgba(62,220,170,.20);
  --hero-glow-amber:rgba(240,184,96,.20);
  --hero-glow-red:  rgba(240,104,104,.24);
  --hero-glow-blue: rgba(94,179,217,.20);
  --hero-glow-gold: rgba(94,179,217,.18);
}

/* ───────────────────────────────────────────────────────────
   LIGHT — warm paper, opaque surfaces, near-black ink, no glass.
   This palette is tuned for terminal-grade readability:
   - Page bg = warm paper (#f6f5f0). Surfaces = white (#ffffff).
   - Body text = near-black (#0e1420) for high contrast on white.
   - All glass/blur removed (variables resolve to opaque whites).
   - Aurora opacity = 0 (no tinted blobs on white).
   - Inner highlight shadows zeroed (they smudge on white).
   - Drop shadows present but very soft (no glow, just depth).
   - Signal colors darkened: green#15803d, red#b91c1c, amber#b45309.
   - Gold retained as accent but darkened (#a8852e) for contrast.
   ─────────────────────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:        #f6f5f0;     /* warm paper page background */
  --bg2:       #ffffff;     /* primary surface */
  --bg3:       #efece4;     /* slightly recessed (tape, sec-head) */
  --bg4:       #e6e1d3;     /* input wells */
  --surface:   #ffffff;
  --surface-2: #ffffff;
  --panel:     #ffffff;
  --panel-line:#d8d3c4;

  --ink:       #0e1420;     /* near-black slate — main body text */
  --ink2:      #3a4456;     /* strong slate — labels, captions */
  --ink3:      #6b7585;     /* mid grey — secondary text, hints */
  --ink4:      #9ca3b0;     /* faint — disabled text only */

  --line:      #e2dccc;     /* hairline border, warm */
  --line2:     #cfc8b3;     /* stronger hairline */
  --border:    #e2dccc;
  --border2:   #cfc8b3;

  --accent:    #a8852e;     /* darkened gold (3.4:1 against white) */
  --accent-2:  #c39a3a;
  --accent-bg: rgba(168,133,46,.08);

  --green:     #15803d;     /* 5.0:1 on white */
  --green-bg:  rgba(21,128,61,.08);
  --green-line:rgba(21,128,61,.28);
  --amber:     #b45309;     /* 4.7:1 on white */
  --amber-bg:  rgba(180,83,9,.08);
  --amber-line:rgba(180,83,9,.28);
  --red:       #b91c1c;     /* 5.9:1 on white */
  --red-bg:    rgba(185,28,28,.08);
  --red-line:  rgba(185,28,28,.28);
  --blue:      #1d4ed8;     /* 6.7:1 on white */
  --teal:      #0e7490;     /* 5.4:1 on white */
  --purple:    #6d28d9;     /* 5.6:1 on white */

  /* Sidebar — paper bg, dark ink, brand gold for active state */
  --sb-bg:        #f1ede0;
  --sb-grad:      linear-gradient(180deg,rgba(0,0,0,.02) 0%,transparent 30%,rgba(0,0,0,.01) 100%);
  --sb-border:    #d8d3c4;
  --sb-shadow:    inset -1px 0 0 #d8d3c4, 1px 0 16px rgba(14,20,32,.06);
  --sb-text:      rgba(14,20,32,.70);
  --sb-text-2:    rgba(14,20,32,.55);
  --sb-text-dim:  rgba(14,20,32,.38);
  --sb-active-bg: rgba(168,133,46,.12);
  --sb-active-border: rgba(168,133,46,.40);
  --sb-active-text: #0e1420;
  --sb-hover-bg:  rgba(14,20,32,.05);
  --sb-hover-border: rgba(14,20,32,.10);
  --sb-input-bg:  #ffffff;
  --sb-input-border: #d8d3c4;
  --sb-logo-text: #0e1420;
  --sb-logo-dot:  #15803d;
  --sb-logo-glow: rgba(21,128,61,.25);

  --gold:      #a8852e;
  --gold2:     #c39a3a;
  --gold3:     #d4b86b;     /* lighter — used as 'subtle' border in dark; here it's accent-bg */
  --sage:      rgba(120,140,90,.06);
  --sage-line: rgba(120,140,90,.18);
  --sans:      "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:      "IBM Plex Mono",monospace;

  --accent-green:  #15803d;
  --accent-blue:   #1d4ed8;
  --accent-purple: #6d28d9;
  --accent-amber:  #b45309;

  /* Tape: warm sand band, dark text — distinct from page bg */
  --tape-bg:        #efece4;
  --topbar-bg:      #ffffff;
  --topbar-border:  #e2dccc;
  --briefing-bg:    #ffffff;
  --briefing-line:  #e2dccc;
  --briefing-hover: #cfc8b3;
  --icon-btn-bg:    #ffffff;
  --icon-btn-line:  #d8d3c4;
  --signout-bg:     #ffffff;

  /* Glass roles → all opaque white. backdrop-filter rules don't render
     anything since the underlying color is opaque; harmless leftover. */
  --glass-bg:        #ffffff;
  --glass-bg-active: #ffffff;
  --glass-bg-2:      #ffffff;
  --glass-bg-strong: #ffffff;
  --folder-panel:    #ffffff;
  --folder-edge:     #e2dccc;
  --folder-edge-strong: #cfc8b3;
  --folder-sep:      #e2dccc;
  --folder-sep-soft: #ece7d8;

  /* Inset shadows zeroed (smudgy on white). Drop shadows: very soft, no glow. */
  --shadow-inset-light: transparent;
  --shadow-inset-strong:transparent;
  --shadow-inset-icon:  transparent;
  --shadow-inset-dark:  transparent;
  --shadow-drop-soft:   rgba(14,20,32,.04);
  --shadow-drop-mid:    rgba(14,20,32,.06);
  --shadow-drop-deep:   rgba(14,20,32,.08);
  --shadow-drop-deepest:rgba(14,20,32,.12);
  --shadow-tab-shine:   transparent;
  --shadow-icon-shine:  rgba(255,255,255,.35);

  --settings-bg:    #ffffff;
  --settings-row-bg:#f6f5f0;
  --settings-row-line:#e2dccc;
  --settings-toggle-bg:#e2dccc;
  --settings-toggle-line:#cfc8b3;
  --backdrop:       rgba(14,20,32,.30);

  --step-link-bg:    rgba(29,78,216,.08);
  --step-link-line:  rgba(29,78,216,.30);
  --step-link-text:  #1d4ed8;
  --step-link-bg-hover:rgba(29,78,216,.14);
  --step-link-text-hover:#1e3a8a;

  --step-ic-bg:     rgba(168,133,46,.10);
  --step-ic-line:   rgba(168,133,46,.32);
  --step-ic-num-bg: #ffffff;
  --step-ic-num-line:rgba(168,133,46,.42);

  --gold-soft-bg:   rgba(168,133,46,.10);
  --gold-soft-line: rgba(168,133,46,.32);
  --gold-soft-hover-bg: rgba(168,133,46,.16);

  --aurora-opacity: 0;

  /* Folder tints — softer, work as subtle washes over white */
  --tint-green-soft:  rgba(21,128,61,.06);
  --tint-green-mid:   rgba(21,128,61,.12);
  --tint-green-glow:  rgba(21,128,61,.14);
  --tint-green-glow-a:rgba(21,128,61,.22);
  --tint-blue-soft:   rgba(29,78,216,.06);
  --tint-blue-mid:    rgba(29,78,216,.12);
  --tint-blue-glow:   rgba(29,78,216,.14);
  --tint-blue-glow-a: rgba(29,78,216,.22);
  --tint-purple-soft: rgba(109,40,217,.06);
  --tint-purple-mid:  rgba(109,40,217,.12);
  --tint-purple-glow: rgba(109,40,217,.14);
  --tint-purple-glow-a:rgba(109,40,217,.22);
  --tint-amber-soft:  rgba(180,83,9,.06);
  --tint-amber-mid:   rgba(180,83,9,.12);
  --tint-amber-glow:  rgba(180,83,9,.14);
  --tint-amber-glow-a:rgba(180,83,9,.22);

  --spinner-track:  #e2dccc;

  /* Briefing surfaces — all white, varied only by hairline border */
  --hero-bg:        #ffffff;
  --sec-bg:         #ffffff;
  --sec-head-bg:    #f6f5f0;
  --sec-head-line:  #e2dccc;
  --pc-bg:          #ffffff;
  --pc-line:        #e2dccc;
  --pcard-hover-line: rgba(168,133,46,.40);
  --hmetric-bg:     #fbfaf5;
  --rlight-bg:      #fbfaf5;
  --rlight-cmpt-bg: #fbfaf5;
  --bmetric-bg:     #fbfaf5;
  --breadth-chart-bg: #fbfaf5;
  --breadth-narr-bg: #fbfaf5;
  --pulse-cmpt-bg:  #fbfaf5;
  --cs-item-bg:     #fbfaf5;
  --mq-cell-bg:     #fbfaf5;
  --sr-summary-bg:  #fbfaf5;
  --sr-track-bg:    #e2dccc;

  /* Pills — soft tinted backgrounds, darker text */
  --pill-green-bg:  rgba(21,128,61,.10);
  --pill-green-mid: rgba(21,128,61,.14);
  --pill-green-soft:rgba(21,128,61,.07);
  --pill-green-line:rgba(21,128,61,.30);
  --pill-green-line-strong:rgba(21,128,61,.45);
  --pill-amber-bg:  rgba(180,83,9,.10);
  --pill-amber-mid: rgba(180,83,9,.14);
  --pill-amber-soft:rgba(180,83,9,.07);
  --pill-amber-line:rgba(180,83,9,.30);
  --pill-amber-line-strong:rgba(180,83,9,.45);
  --pill-red-bg:    rgba(185,28,28,.10);
  --pill-red-mid:   rgba(185,28,28,.14);
  --pill-red-soft:  rgba(185,28,28,.07);
  --pill-red-line:  rgba(185,28,28,.30);
  --pill-red-line-strong:rgba(185,28,28,.45);
  --pill-blue-bg:   rgba(29,78,216,.08);
  --pill-blue-mid:  rgba(29,78,216,.12);
  --pill-blue-soft: rgba(29,78,216,.06);
  --pill-blue-line: rgba(29,78,216,.28);
  --pill-blue-line-strong:rgba(29,78,216,.42);
  --pill-teal-bg:   rgba(14,116,144,.10);
  --pill-teal-soft: rgba(14,116,144,.06);
  --pill-teal-line: rgba(14,116,144,.28);
  --pill-teal-line-strong:rgba(14,116,144,.42);
  --pill-neutral-bg:#f1ede0;
  --pill-neutral-soft:#f6f5f0;
  --pill-neutral-line:#cfc8b3;
  --pill-gray-bg:   #f1ede0;
  --pill-gray-fg:   #6b7585;

  /* Hero glow → soft border tint only (no actual glow on white) */
  --hero-glow-green:rgba(21,128,61,.18);
  --hero-glow-amber:rgba(180,83,9,.18);
  --hero-glow-red:  rgba(185,28,28,.20);
  --hero-glow-blue: rgba(29,78,216,.18);
  --hero-glow-gold: rgba(168,133,46,.18);
}

/* ─── Light theme: kill all backdrop-filters globally ─────── */
/* Glass effects look like smudges on opaque white surfaces.
   Targeting the common class patterns used across home + briefing. */
:root[data-theme="light"] .tape,
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .vix-box,
:root[data-theme="light"] .sec,
:root[data-theme="light"] .sec-head,
:root[data-theme="light"] .pc,
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .briefing-wrap,
:root[data-theme="light"] .folder-tab,
:root[data-theme="light"] .folder-panel,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .skip-btn,
:root[data-theme="light"] .hero-framed,
:root[data-theme="light"] .settings-panel{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* ─── Theme picker (floating) ─────────────────────────────── */
.st-theme-picker{
  display:inline-flex;gap:5px;padding:4px 6px;border-radius:99px;
  background:var(--sb-input-bg,rgba(255,255,255,.04));
  border:1px solid var(--sb-input-border,rgba(255,255,255,.08));
  align-items:center;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
:root[data-theme="light"] .st-theme-picker{
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.st-theme-sw{
  width:14px;height:14px;border-radius:50%;cursor:pointer;
  border:1.5px solid transparent;transition:all .12s;padding:0;
  background-clip:padding-box;
}
.st-theme-sw[data-theme="night"]{background:#0e1420;border-color:#2a3447}  /* SWATCH_NIGHT_BLACK_V1 — was #c8a44a (gold) */
.st-theme-sw[data-theme="graphite"]{background:#b8b8c0}
.st-theme-sw[data-theme="midnight"]{background:#5eb3d9}
.st-theme-sw[data-theme="light"]{background:#ffffff;border-color:#cfc8b3}
.st-theme-sw.on{border-color:var(--ink,#fff);transform:scale(1.05)}

.st-theme-floater{
  position:fixed;
  top:48px;right:16px;
  z-index:10000;
}
@media (max-width:768px){
  .st-theme-floater{top:44px;right:10px}
}

/* ─────────────────────────────────────────────────────────────
   v6 — Darker ink + blunt-force light overrides for unconverted
   pages. Pages with their own hardcoded :root{} dark blocks will
   still resolve to local dark vars, but these rules sit at the
   end and override the common surface/text patterns we see across
   macro.html, regime.html, dashboard.html, stock.html, technical.html
   and others that we haven't yet converted to /theme.css.

   When a page IS properly converted (home, briefing, sector_rotation),
   these rules are no-ops because the page's local hardcoded values
   are already gone — the role variables take over.
   ───────────────────────────────────────────────────────────── */

/* Darker ink on light theme for everyone (immediate fix to "text bolder") */
:root[data-theme="light"]{
  --ink2: #2a3344;   /* was #3a4456 — meaningfully darker */
  --ink3: #525a6a;   /* was #6b7585 — stronger for hints/secondary */
  --ink4: #8088a0;   /* mid-grey for truly disabled text only */
}

/* Global font weight bump in light mode — IBM Plex 450 reads sharp on white */
:root[data-theme="light"] body{
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="light"] .ink2,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .neu,
:root[data-theme="light"] .ink3{
  font-weight: 500;
}
/* Bold things should actually be bold */
:root[data-theme="light"] strong,
:root[data-theme="light"] b,
:root[data-theme="light"] .bold,
:root[data-theme="light"] .sec-title,
:root[data-theme="light"] .panel-header,
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .hero-verdict{
  font-weight: 700;
}

/* ── BLUNT-FORCE: kill dark surface backgrounds on unconverted pages ──
   These selectors target class names that consistently receive
   dark backgrounds in the legacy CSS. We override them with light
   surfaces in light mode so text on top becomes readable.
   
   Pages we know use these: macro.html, regime.html, dashboard.html,
   stock.html, technical.html, futures.html, dcf.html, screener_v2.html,
   compare.html (centaur.html), value_screen.html, vix.html, washout.html,
   forensic.html, zbt.html, etc.
   ────────────────────────────────────────────────────────────── */

:root[data-theme="light"] body,
:root[data-theme="light"] .main,
:root[data-theme="light"] .container,
:root[data-theme="light"] .wrap,
:root[data-theme="light"] .page,
:root[data-theme="light"] .content{
  background: #f6f5f0 !important;
  color: #0e1420 !important;
}

/* Panels, cards, sections — common class names used across pages */
:root[data-theme="light"] .sec,
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .box,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .pcard,
:root[data-theme="light"] .pc,
:root[data-theme="light"] .ocard,
:root[data-theme="light"] .ccard,
:root[data-theme="light"] .vix-box,
:root[data-theme="light"] .hero,
:root[data-theme="light"] .hero-framed,
:root[data-theme="light"] .hmetric,
:root[data-theme="light"] .mq-cell,
:root[data-theme="light"] .bmetric,
:root[data-theme="light"] .pulse-compact,
:root[data-theme="light"] .rlight,
:root[data-theme="light"] .rlight-compact,
:root[data-theme="light"] .quad-card,
:root[data-theme="light"] .pillar-card,
:root[data-theme="light"] .pillar,
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .info-card,
:root[data-theme="light"] .briefing-wrap,
:root[data-theme="light"] .section,
:root[data-theme="light"] .widget,
:root[data-theme="light"] .module{
  background: #ffffff !important;
  border-color: #e2dccc !important;
  color: #0e1420 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(14,20,32,.04), 0 2px 8px rgba(14,20,32,.04) !important;
}

/* Section heads — slightly recessed sand */
:root[data-theme="light"] .sec-head,
:root[data-theme="light"] .card-head,
:root[data-theme="light"] .panel-head,
:root[data-theme="light"] .section-head,
:root[data-theme="light"] .pillar-head{
  background: #efece4 !important;
  border-bottom-color: #e2dccc !important;
  color: #0e1420 !important;
}

/* Page-level "hero" / dashboard banner sections */
:root[data-theme="light"] .dashboard-hero,
:root[data-theme="light"] .page-hero,
:root[data-theme="light"] .quad-hero,
:root[data-theme="light"] .regime-hero{
  background: #ffffff !important;
  border: 1px solid #e2dccc !important;
  color: #0e1420 !important;
}

/* Inputs and form controls */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  background: #ffffff !important;
  color: #0e1420 !important;
  border-color: #cfc8b3 !important;
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder{
  color: #6b7585 !important;
}

/* Buttons — keep the page's button colors but ensure text is readable */
:root[data-theme="light"] button:not([class*="green"]):not([class*="red"]):not([class*="amber"]):not([class*="blue"]):not([class*="active"]):not(.tape *):not(.tab-icon){
  color: #0e1420;
}

/* Tables */
:root[data-theme="light"] table,
:root[data-theme="light"] .table{
  background: #ffffff !important;
  color: #0e1420 !important;
}
:root[data-theme="light"] th,
:root[data-theme="light"] thead td{
  background: #efece4 !important;
  color: #2a3344 !important;
  border-bottom-color: #cfc8b3 !important;
}
:root[data-theme="light"] td{
  border-bottom-color: #ece7d8 !important;
}
:root[data-theme="light"] tr:hover td,
:root[data-theme="light"] tr:hover th{
  background: #fbfaf5 !important;
}

/* Tooltips — fix the white-on-white tooltip seen on heatmap */
:root[data-theme="light"] .tooltip,
:root[data-theme="light"] .tip,
:root[data-theme="light"] [class*="tooltip"],
:root[data-theme="light"] [class*="popover"]{
  background: #0e1420 !important;
  color: #f6f5f0 !important;
  border: 1px solid #2a3344 !important;
  box-shadow: 0 4px 16px rgba(14,20,32,.20) !important;
}

/* Sidebar in light mode — already styled, but enforce here too in case
   a page's local CSS tries to dark-paint it */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] [class*="sidebar"]{
  background: var(--sb-bg) !important;
  color: var(--ink) !important;
}

/* Light-mode body / page text — catch-all for any element that
   inherited an explicit light-color from dark theme intent */
:root[data-theme="light"] [style*="color:#e8edf5"],
:root[data-theme="light"] [style*="color:#dde7f5"],
:root[data-theme="light"] [style*="color:#fff"]{
  color: #0e1420 !important;
}

/* Catch the common "white-ish text" classes pages tend to define */
:root[data-theme="light"] .ink,
:root[data-theme="light"] .text-ink,
:root[data-theme="light"] .text-white,
:root[data-theme="light"] .text-light{
  color: #0e1420 !important;
}

/* Make sure muted/hint text is the new darker grey */
:root[data-theme="light"] .ink2,
:root[data-theme="light"] .text-ink2,
:root[data-theme="light"] .label,
:root[data-theme="light"] .caption{
  color: #2a3344 !important;
}
:root[data-theme="light"] .ink3,
:root[data-theme="light"] .text-ink3,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .hint,
:root[data-theme="light"] .neu,
:root[data-theme="light"] .secondary{
  color: #525a6a !important;
}

/* Tape stays distinct in light — warm sand band, dark text */
:root[data-theme="light"] .tape{
  background: #efece4 !important;
  border-bottom-color: #cfc8b3 !important;
}
:root[data-theme="light"] .tape-sym,
:root[data-theme="light"] .tape-price{
  color: #0e1420 !important;
}

/* Topbar — solid white */
:root[data-theme="light"] .topbar{
  background: #ffffff !important;
  border-bottom-color: #e2dccc !important;
}

/* Common "dark background" patterns at body or main level. Some pages
   apply background-color: #070c14 etc. directly to body. The body
   override above handles this, but some use a wrapper class. */
:root[data-theme="light"] [class*="dark-bg"],
:root[data-theme="light"] .bg-dark{
  background: #f6f5f0 !important;
}

/* Pages that use D3 / canvas tooltips often have a .tooltip-content
   child. Make sure that inherits the dark surface. */
:root[data-theme="light"] .tooltip *,
:root[data-theme="light"] .tip *{
  color: inherit !important;
}

/* Aurora — already controlled by --aurora-opacity, but some pages
   reference it directly. Make sure it's hidden. */
:root[data-theme="light"] .aurora,
:root[data-theme="light"] .aurora-mid{
  opacity: 0 !important;
}

/* Chart canvases / SVGs — most chart libraries inherit background
   from parent. Force their parent to white so charts read on light. */
:root[data-theme="light"] .chart-wrap,
:root[data-theme="light"] .chart-container,
:root[data-theme="light"] [class*="chart-wrap"]{
  background: #ffffff !important;
}

/* "Coming soon" / placeholder pills — readable on white */
:root[data-theme="light"] .cs-item,
:root[data-theme="light"] .coming-soon{
  background: #fbfaf5 !important;
  border-color: #d8d3c4 !important;
  color: #2a3344 !important;
}

/* Specific to Market Terminal / macro.html — the .pillar-card pattern */
:root[data-theme="light"] .pillar-card,
:root[data-theme="light"] [class*="pillar"]{
  background: #ffffff !important;
  border: 1px solid #e2dccc !important;
  color: #0e1420 !important;
}

/* Final safety net: any class containing "card", "panel", "section",
   "box" that's painted via class-prefix selectors. Light mode forces
   them to white if no inline style overrides them. */

/* End of v6 blunt-force overrides */


/* ─────────────────────────────────────────────────────────────
   v8 — Typography system + agent widget styles

   USER-SELECTABLE TYPOGRAPHY
   The site exposes 3 user preferences via cookies, mirrored on
   <html> as data-attributes. The pre-paint bootstrap in
   app_shell.js sets these before any CSS applies.

     data-font="inter" | "plex" | "source" | "system"
     data-size="s" | "m" | "l"
     data-emphasis="italic" | "normal"   (controls <em>/<i>/.italic)

   The default if no cookie present: data-font="inter", data-size="m",
   data-emphasis="italic". Inter is the new brand-default body font.
   IBM Plex Mono stays the mono font for numbers/labels everywhere
   (--mono var unchanged — this is intentional, mono numerics matter).
   ───────────────────────────────────────────────────────────── */

/* Font family — defaults to Inter */
:root,
:root[data-font="inter"]{
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root[data-font="plex"]{
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
:root[data-font="source"]{
  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
}
:root[data-font="system"]{
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* TYPOGRAPHY_V2: "Book" — Crimson Pro serif, rendered fully italic.
   Reading-feels-like-a-novel option. Body italic is uncommon for UI but
   Crimson's italic is genuinely book-like and beloved for long reading. */
:root[data-font="book"]{
  --font-body: "Crimson Pro", "Crimson Text", "EB Garamond", Georgia, serif;
}
:root[data-font="book"] body{
  font-style: italic;
  font-weight: 450;  /* Crimson italic at 450 reads warm without being heavy */
  letter-spacing: 0.005em;
}
:root[data-font="book"] body, 
:root[data-font="book"] p, 
:root[data-font="book"] div, 
:root[data-font="book"] span:not(.mono):not(.mono-num),
:root[data-font="book"] button,
:root[data-font="book"] label,
:root[data-font="book"] li,
:root[data-font="book"] td:not(.mono):not(.mono-num),
:root[data-font="book"] th{
  font-style: italic;
}
/* Mono numerics stay upright even in Book mode — tabular numbers matter */
:root[data-font="book"] .mono,
:root[data-font="book"] .mono-num,
:root[data-font="book"] code,
:root[data-font="book"] kbd,
:root[data-font="book"] pre,
:root[data-font="book"] [class*="-num"]{
  font-style: normal !important;
}

/* Size scale — capped tight so layouts don't break */
:root,
:root[data-size="m"]{
  --font-scale: 1;
}
:root[data-size="s"]{
  --font-scale: 0.92;
}
:root[data-size="l"]{
  --font-scale: 1.08;
}

/* Emphasis (italic) — affects <em>, <i>, and .italic */
:root,
:root[data-emphasis="italic"]{
  --emphasis-style: italic;
}
:root[data-emphasis="normal"]{
  --emphasis-style: normal;
}

/* Apply font-body globally. The --sans variable stays as fallback for
   any page that uses var(--sans) directly — point it at --font-body. */
:root{
  --sans: var(--font-body);
}

/* Apply font scale to body. Pages use 13px or 13.5px base — multiplying
   by 0.92 / 1.08 gives ~12.0 / 14.6 — well within typographic safety. */
html{
  font-size: calc(13.5px * var(--font-scale, 1));
}
body{
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--font-scale, 1));
}

/* Override sans-serif specifications on common element types so
   font-family flips across the app when the user changes it. */
body, p, div, span, button, input, textarea, select, label, li, td, th{
  font-family: var(--font-body);
}
/* Keep mono on numerics, code, and existing .mono classes */
.mono, .mono-num, code, kbd, samp, pre,
.tape-item, .tape-sym, .tape-price,
.dr-val, .score-number, .score-mini-val, .panel-score,
[class*="-num"], [class*="num-"]{
  font-family: var(--mono) !important;
}

/* Emphasis style */
em, i, .italic{
  font-style: var(--emphasis-style);
}

/* ─────────────────────────────────────────────────────────────
   Typography popover — small "Aa" gear next to the theme picker
   that opens a tiny preferences panel.
   ───────────────────────────────────────────────────────────── */

.st-typo-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--sb-input-bg,rgba(255,255,255,.04));
  border:1px solid var(--sb-input-border,rgba(255,255,255,.08));
  color:var(--ink2);
  cursor:pointer;
  font-family:Georgia,serif;
  font-size:11px;font-weight:600;
  font-style:italic;
  line-height:1;
  padding:0;
  transition:background .12s, color .12s, border-color .12s;
}
.st-typo-trigger:hover{
  background:var(--gold-soft-bg);
  color:var(--gold);
  border-color:var(--gold-soft-line);
}
:root[data-theme="light"] .st-typo-trigger{
  background:#ffffff;
  border-color:var(--line2);
  color:var(--ink2);
}

.st-typo-pop{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:260px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:10px;
  padding:12px 14px;
  box-shadow:0 12px 32px var(--shadow-drop-deepest);
  z-index:10001;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .15s, transform .15s;
}
.st-typo-pop.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
:root[data-theme="light"] .st-typo-pop{
  background:#ffffff;
  border-color:var(--line2);
  box-shadow:0 12px 32px rgba(14,20,32,.16);
}

.st-typo-section{
  margin-bottom:10px;
}
.st-typo-section:last-child{margin-bottom:0}
.st-typo-label{
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink3);
  margin-bottom:6px;
}

/* Font picker — pills (5 items: last spans both columns) */
.st-typo-fonts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.st-typo-font[data-font="book"]{grid-column:1 / -1}
.st-typo-font{
  background:var(--icon-btn-bg);
  border:1px solid var(--icon-btn-line);
  border-radius:6px;
  padding:6px 8px;
  cursor:pointer;
  font-size:11.5px;
  color:var(--ink2);
  text-align:center;
  transition:background .12s, border-color .12s, color .12s;
}
.st-typo-font[data-font="inter"]   {font-family:"Inter",sans-serif}
.st-typo-font[data-font="plex"]    {font-family:"IBM Plex Sans",sans-serif}
.st-typo-font[data-font="source"]  {font-family:"Source Sans 3",sans-serif}
.st-typo-font[data-font="system"]  {font-family:system-ui,sans-serif}
.st-typo-font[data-font="book"]    {font-family:"Crimson Pro",Georgia,serif;font-style:italic}
.st-typo-font:hover{
  background:var(--gold-soft-bg);
  border-color:var(--gold-soft-line);
  color:var(--gold);
}
.st-typo-font.on{
  background:var(--gold-soft-bg);
  border-color:var(--gold-soft-line);
  color:var(--gold);
  font-weight:600;
}
:root[data-theme="light"] .st-typo-font{
  background:#fbfaf5;
  border-color:var(--line);
}

/* Size controls — A− / A / A+ */
.st-typo-sizes{
  display:flex;gap:5px;
  background:var(--icon-btn-bg);
  border:1px solid var(--icon-btn-line);
  border-radius:6px;
  padding:2px;
}
:root[data-theme="light"] .st-typo-sizes{
  background:#fbfaf5;
  border-color:var(--line);
}
.st-typo-size{
  flex:1;
  background:transparent;
  border:none;
  color:var(--ink2);
  font-family:var(--font-body);
  cursor:pointer;
  padding:5px 0;
  border-radius:4px;
  transition:background .12s, color .12s;
}
.st-typo-size[data-size="s"]{font-size:10px}
.st-typo-size[data-size="m"]{font-size:12px}
.st-typo-size[data-size="l"]{font-size:14px}
.st-typo-size:hover{color:var(--gold)}
.st-typo-size.on{
  background:var(--bg2);
  color:var(--gold);
  font-weight:600;
}
:root[data-theme="light"] .st-typo-size.on{
  background:#ffffff;
  color:var(--gold);
  box-shadow:0 1px 3px rgba(14,20,32,.06);
}

/* Italic toggle */
.st-typo-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 8px;
  background:var(--icon-btn-bg);
  border:1px solid var(--icon-btn-line);
  border-radius:6px;
}
:root[data-theme="light"] .st-typo-toggle-row{
  background:#fbfaf5;
  border-color:var(--line);
}
.st-typo-toggle-label{
  font-size:11.5px;
  color:var(--ink);
  font-style:italic;
}
.st-typo-toggle{
  width:30px;height:18px;
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:10px;
  position:relative;
  cursor:pointer;
  transition:background .14s, border-color .14s;
}
.st-typo-toggle::after{
  content:"";
  position:absolute;
  top:1px;left:1px;
  width:14px;height:14px;
  border-radius:50%;
  background:var(--ink3);
  transition:left .14s, background .14s;
}
.st-typo-toggle.on{
  background:var(--gold-soft-bg);
  border-color:var(--gold-soft-line);
}
.st-typo-toggle.on::after{
  left:13px;
  background:var(--gold);
}

/* ─────────────────────────────────────────────────────────────
   AGENT WIDGET (signal assistant) — full theme-aware stylesheet
   Markup contract (from agent_widget.js):
     .sgt-agent-bubble       — fixed bottom-right floating button
     .sgt-agent-panel        — slide-up panel (off-screen by default)
     .sgt-agent-panel.open   — when visible
     .sgt-ag-head            — panel header strip
       .sgt-ag-title           — gold dot + text
       .sgt-ag-dot             — small breathing dot
       .sgt-ag-close           — × button
     .sgt-ag-body            — scrollable message list
       .sgt-ag-welcome         — first-load welcome block
       .sgt-ag-welcome-h
       .sgt-ag-welcome-sub
       .sgt-ag-suggests        — chip row
       .sgt-ag-chip            — suggestion chip
       .sgt-ag-msg             — message row, modifiers .sgt-ag-msg-user / -model
         .sgt-ag-msg-bubble    — the bubble itself
         .sgt-ag-msg-text      — the text content
         .sgt-ag-msg-status    — "thinking..." or tool-call indicator
     .sgt-ag-foot            — input row at the bottom
       #sgt-ag-input           — textarea
       #sgt-ag-send / .sgt-ag-send — send button
     .sgt-ag-disclaimer      — tiny line at the bottom
   ───────────────────────────────────────────────────────────── */

/* ─── Bubble (visible on every page) ──────────────────────── */
.sgt-agent-bubble{
  position:fixed;
  bottom:24px;right:24px;
  width:52px;height:52px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  z-index:9998;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold);
  color:var(--bg);
  box-shadow:
    0 4px 16px var(--shadow-drop-deep),
    0 0 0 1px var(--gold-soft-line),
    0 0 24px var(--gold-soft-line);
  transition:transform .15s ease, box-shadow .2s ease;
}
.sgt-agent-bubble:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 20px var(--shadow-drop-deepest),
    0 0 0 1px var(--accent-2),
    0 0 32px var(--gold-soft-line);
}
.sgt-agent-bubble.open{
  transform:scale(0.9);
  opacity:.85;
}
.sgt-agent-bubble svg{display:block}

/* Light theme — bubble uses dark ink on gold (current is fine, dark themes use --bg) */
:root[data-theme="light"] .sgt-agent-bubble{
  color:#ffffff;  /* white spark on darkened gold */
  box-shadow:
    0 4px 16px rgba(14,20,32,.15),
    0 0 0 1px rgba(168,133,46,.40),
    0 0 0 4px rgba(168,133,46,.10);
}
:root[data-theme="light"] .sgt-agent-bubble:hover{
  box-shadow:
    0 6px 20px rgba(14,20,32,.22),
    0 0 0 1px rgba(168,133,46,.55),
    0 0 0 4px rgba(168,133,46,.15);
}

/* ─── Panel (chat window) ─────────────────────────────────── */
.sgt-agent-panel{
  position:fixed;
  bottom:88px;right:24px;
  width:min(420px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 120px));
  z-index:9999;
  display:flex;
  flex-direction:column;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:14px;
  box-shadow:0 16px 48px var(--shadow-drop-deepest);
  overflow:hidden;
  font-family:var(--sans);
  /* hidden by default */
  transform:translateY(20px) scale(0.96);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
}
.sgt-agent-panel.open{
  transform:translateY(0) scale(1);
  opacity:1;
  pointer-events:auto;
}
@media (max-width:640px){
  .sgt-agent-panel{
    right:12px;left:12px;width:auto;
    bottom:80px;
    height:min(560px, calc(100vh - 100px));
  }
  .sgt-agent-bubble{bottom:16px;right:16px;width:48px;height:48px}
}

:root[data-theme="light"] .sgt-agent-panel{
  background:#ffffff;
  border:1px solid var(--line2);
  box-shadow:
    0 16px 48px rgba(14,20,32,.16),
    0 4px 12px rgba(14,20,32,.06);
}

/* ─── Header ──────────────────────────────────────────────── */
.sgt-ag-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
  background:var(--bg);
}
:root[data-theme="light"] .sgt-ag-head{
  background:var(--bg3);  /* slight recess so header reads as chrome */
  border-bottom-color:var(--line);
}
.sgt-ag-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.sgt-ag-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-soft-line);
  animation:sgt-ag-pulse 2.4s ease-in-out infinite;
}
@keyframes sgt-ag-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.55;transform:scale(.86)}
}
.sgt-ag-close{
  background:transparent;border:none;
  color:var(--ink3);
  font-size:22px;line-height:1;
  width:28px;height:28px;
  border-radius:6px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s, color .12s;
}
.sgt-ag-close:hover{
  background:var(--icon-btn-bg);
  color:var(--ink);
}
:root[data-theme="light"] .sgt-ag-close:hover{
  background:var(--gold-soft-bg);
  color:var(--gold);
}

/* ─── Body (scrollable) ───────────────────────────────────── */
.sgt-ag-body{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;
  scrollbar-color:var(--line2) transparent;
}
.sgt-ag-body::-webkit-scrollbar{width:6px}
.sgt-ag-body::-webkit-scrollbar-track{background:transparent}
.sgt-ag-body::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}

/* Welcome block */
.sgt-ag-welcome{
  padding:8px 4px 4px;
}
.sgt-ag-welcome-h{
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
  letter-spacing:-.005em;
}
.sgt-ag-welcome-sub{
  font-size:12.5px;
  color:var(--ink2);
  line-height:1.55;
  margin-bottom:14px;
}

/* Suggestion chips */
.sgt-ag-suggests{
  display:flex;flex-wrap:wrap;gap:8px;
}
.sgt-ag-chip{
  background:var(--icon-btn-bg);
  border:1px solid var(--icon-btn-line);
  color:var(--ink2);
  padding:7px 12px;
  border-radius:18px;
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.sgt-ag-chip:hover{
  background:var(--gold-soft-bg);
  border-color:var(--gold-soft-line);
  color:var(--gold);
}
:root[data-theme="light"] .sgt-ag-chip{
  background:#fbfaf5;
  border-color:var(--line);
  color:var(--ink);
}
:root[data-theme="light"] .sgt-ag-chip:hover{
  background:var(--gold-soft-bg);
  border-color:var(--gold-soft-line);
  color:var(--gold);
}

/* ─── Messages ────────────────────────────────────────────── */
.sgt-ag-msg{
  display:flex;
  max-width:100%;
}
.sgt-ag-msg-user{justify-content:flex-end}
.sgt-ag-msg-model{justify-content:flex-start}

.sgt-ag-msg-bubble{
  max-width:88%;
  padding:9px 13px;
  border-radius:12px;
  font-size:13px;
  line-height:1.55;
  word-wrap:break-word;
}
.sgt-ag-msg-user .sgt-ag-msg-bubble{
  background:var(--gold-soft-bg);
  border:1px solid var(--gold-soft-line);
  color:var(--ink);
  border-bottom-right-radius:4px;
}
.sgt-ag-msg-model .sgt-ag-msg-bubble{
  background:var(--icon-btn-bg);
  border:1px solid var(--icon-btn-line);
  color:var(--ink);
  border-bottom-left-radius:4px;
}
:root[data-theme="light"] .sgt-ag-msg-model .sgt-ag-msg-bubble{
  background:#fbfaf5;
  border-color:var(--line);
}

.sgt-ag-msg-text{
  white-space:pre-wrap;
}
.sgt-ag-msg-text a{
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:2px;
}
.sgt-ag-msg-text a:hover{color:var(--accent-2)}

.sgt-ag-msg-status{
  font-size:11px;
  color:var(--ink3);
  margin-top:4px;
  font-style:italic;
  font-family:var(--mono);
}

/* ─── Footer (input row) ─────────────────────────────────── */
.sgt-ag-foot{
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--bg);
  flex-shrink:0;
}
:root[data-theme="light"] .sgt-ag-foot{
  background:var(--bg3);
  border-top-color:var(--line);
}

#sgt-ag-input{
  flex:1;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:13px;
  line-height:1.45;
  resize:none;
  outline:none;
  max-height:100px;
  min-height:36px;
  transition:border-color .12s;
}
#sgt-ag-input:focus{
  border-color:var(--gold-soft-line);
  box-shadow:0 0 0 3px var(--gold-soft-bg);
}
#sgt-ag-input::placeholder{color:var(--ink3)}
:root[data-theme="light"] #sgt-ag-input{
  background:#ffffff;
  border-color:var(--line2);
}
:root[data-theme="light"] #sgt-ag-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft-bg);
}

.sgt-ag-send{
  background:var(--gold);
  border:none;
  color:var(--bg);
  width:36px;
  height:36px;
  border-radius:8px;
  cursor:pointer;
  font-size:18px;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .12s, transform .1s;
}
.sgt-ag-send:hover{background:var(--accent-2)}
.sgt-ag-send:active{transform:translateY(1px)}
.sgt-ag-send:disabled{
  opacity:.45;
  cursor:not-allowed;
}
:root[data-theme="light"] .sgt-ag-send{color:#ffffff}

/* ─── Disclaimer ──────────────────────────────────────────── */
.sgt-ag-disclaimer{
  font-size:10.5px;
  color:var(--ink3);
  text-align:center;
  padding:8px 14px 10px;
  background:var(--bg);
  border-top:1px solid var(--line);
  font-family:var(--sans);
  letter-spacing:.01em;
  flex-shrink:0;
}
:root[data-theme="light"] .sgt-ag-disclaimer{
  background:var(--bg3);
  border-top-color:var(--line);
}

/* end agent widget */

/* ─────────────────────────────────────────────────────────────
   v9 — Override page-local :root vars in light mode
   ─────────────────────────────────────────────────────────────
   Many pages still define their own :root{ --bg/--ink/... }
   block with hardcoded dark values, written before light mode
   existed. In light mode those vars resolve to dark blue-greys
   that produce washed-out, hard-to-read text on white surfaces.

   The trick: <body> is more specific than :root. We re-declare
   the role vars on body[data-theme... wait, data-theme is on
   <html>] — so we use :root[data-theme="light"] body, which beats
   any local :root{} block because (a) it has the same specificity
   as :root, but (b) it cascades to the body scope where the page's
   own var definitions get re-shadowed.

   This affects ANY page with a local :root{} that hasn't been
   converted yet: screener_v2, screener_pro, guide, state,
   valuation, thesis, council, nymo, methodology-backtest, etc.
   Converted pages (home, briefing, macro, technical) are
   unaffected because they no longer have local :root{} blocks.
   ───────────────────────────────────────────────────────────── */

:root[data-theme="light"] body{
  /* Surface backgrounds */
  --bg:        #f6f5f0 !important;
  --bg2:       #ffffff !important;
  --bg3:       #efece4 !important;
  --bg4:       #e6e1d3 !important;
  --bg5:       #ece7d8 !important;

  /* Text — Paper Feel ink hierarchy */
  --ink:       #0e1420 !important;
  --ink2:      #2a3344 !important;
  --ink3:      #525a6a !important;
  --ink4:      #8088a0 !important;

  /* Some pages use --text/--text2 aliases */
  --text:      #0e1420 !important;
  --text2:     #2a3344 !important;
  --muted:     #525a6a !important;
  --card:      #ffffff !important;

  /* Borders — warm hairlines */
  --border:    #e2dccc !important;
  --border2:   #cfc8b3 !important;

  /* Gold accent — darkened for legibility on white */
  --gold:      #a8852e !important;
  --gold2:     #c39a3a !important;
  --gold3:     #d4b86b !important;

  /* Signal colors — darkened to meet contrast on white */
  --green:     #15803d !important;
  --green2:    #166534 !important;
  --green3:    rgba(21,128,61,.10) !important;
  --amber:     #b45309 !important;
  --amber2:    #92400e !important;
  --amber3:    rgba(180,83,9,.10) !important;
  --red:       #b91c1c !important;
  --red2:      #991b1b !important;
  --red3:      rgba(185,28,28,.10) !important;
  --blue:      #1d4ed8 !important;
  --blue2:     #1e40af !important;
  --teal:      #0e7490 !important;
  --teal3:     rgba(14,116,144,.10) !important;
  --purple:    #6d28d9 !important;
}

/* Catch pages that use direct hex color on body (no var) */
:root[data-theme="light"] body{
  background: #f6f5f0 !important;
  color: #0e1420 !important;
}

/* ─────────────────────────────────────────────────────────────
   Plotly chart surfaces — these need targeted overrides because
   Plotly draws an opaque <rect> as the plot background. We hide
   it; the page's own div bg shows through (which is now white).
   ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] .plotly .main-svg .bg,
:root[data-theme="light"] .plotly .plot .nsewdrag,
:root[data-theme="light"] .js-plotly-plot .plot-container{
  fill: #ffffff !important;
}
:root[data-theme="light"] .js-plotly-plot .plotly .modebar{
  background: rgba(255,255,255,.85) !important;
}
/* Plotly axis text fights us less if we force fill via SVG style.
   Many Plotly tick labels render as <text fill="#7d8590">.
   We can re-fill them via CSS attribute selector — does work in modern browsers. */
:root[data-theme="light"] .plotly .xtick text,
:root[data-theme="light"] .plotly .ytick text,
:root[data-theme="light"] .plotly .gtitle,
:root[data-theme="light"] .plotly .annotation-text{
  fill: #2a3344 !important;
}
:root[data-theme="light"] .plotly .gridlayer path{
  stroke: #e2dccc !important;
}
:root[data-theme="light"] .plotly .zerolinelayer path{
  stroke: #cfc8b3 !important;
}

/* ─────────────────────────────────────────────────────────────
   Tables — alternating row colors that come out 'very light' in
   light mode. Common patterns: tbody tr:nth-child(even), tr.alt,
   tr.odd-row, etc. We force a sand recess on even rows and a
   slightly darker hairline on borders.
   ───────────────────────────────────────────────────────────── */
:root[data-theme="light"] tbody tr:nth-child(even),
:root[data-theme="light"] tr.alt,
:root[data-theme="light"] tr.odd-row,
:root[data-theme="light"] tr:nth-child(2n) > td,
:root[data-theme="light"] tr:nth-child(2n) > th{
  background: #fbfaf5 !important;
}
:root[data-theme="light"] td, :root[data-theme="light"] th{
  color: #0e1420 !important;
}
:root[data-theme="light"] th{
  color: #2a3344 !important;
  border-bottom-color: #cfc8b3 !important;
}

/* Council page member cards (and similar "card" containers that
   stayed dark because their local CSS hardcoded a dark hex). */
:root[data-theme="light"] [class*="member-card"],
:root[data-theme="light"] [class*="council-card"],
:root[data-theme="light"] [class*="panel-card"]{
  background: #ffffff !important;
  border: 1px solid #e2dccc !important;
  color: #0e1420 !important;
}

/* end v9 overrides */

/* ─────────────────────────────────────────────────────────────
   v10 — Targeted fixes for elements that use literal hex colors
   (not CSS vars). These can't be reached by v9's var redefinition.

   Issues addressed:
   - screener_v2: .sdp-verdict-row .name uses var(--ink1) which is
     undefined everywhere; fallback #e4ecf7 is light blue-grey.
   - dashboard: .method-btn uses GitHub-dark hex literals
     (#0d1117, #21262d, #8b949e, #e6edf3) for bg/border/text.
   - guide: .feature:hover uses rgba(18,21,26,.9) — dark on white.
   ───────────────────────────────────────────────────────────── */

/* ───── screener_v2: verdict rows in distribution panel ───── */
:root[data-theme="light"] .sdp-verdict-row .name,
:root[data-theme="light"] .sdp-verdict-row .count{
  color: #0e1420 !important;
}
:root[data-theme="light"] .sdp-verdict-row .pct{
  color: #525a6a !important;
}
:root[data-theme="light"] .sdp-verdict-row:hover{
  background: #f1ede0 !important;
}
:root[data-theme="light"] .sdp-verdict-row.active{
  background: #efece4 !important;
  border-left-color: #a8852e !important;
}
/* Sector matrix on the same page */
:root[data-theme="light"] .sdp-sector-table th{
  background: #efece4 !important;
  color: #2a3344 !important;
  border-bottom-color: #cfc8b3 !important;
}
:root[data-theme="light"] .sdp-sector-table td{
  color: #0e1420 !important;
  border-bottom-color: #ece7d8 !important;
}

/* ───── dashboard: GitHub-dark methodology pills ──────────── */
:root[data-theme="light"] .method-btn{
  background: #ffffff !important;
  border-color: #cfc8b3 !important;
  color: #2a3344 !important;
}
:root[data-theme="light"] .method-btn:hover{
  background: #fbfaf5 !important;
  color: #0e1420 !important;
}
:root[data-theme="light"] .method-btn.active{
  background: #efece4 !important;
  color: #0e1420 !important;
  border-color: #a8852e !important;
}

/* dashboard: quadrant filter buttons use similar GitHub-dark pattern */
:root[data-theme="light"] .filter-btn{
  background: #ffffff !important;
  border-color: #cfc8b3 !important;
  color: #2a3344 !important;
}
:root[data-theme="light"] .filter-btn:hover{
  background: #fbfaf5 !important;
}
:root[data-theme="light"] .filter-btn.active{
  background: #efece4 !important;
  color: #0e1420 !important;
}

/* dashboard: the "card" with literal #0d1117 bg + #21262d border */
:root[data-theme="light"] .card{
  background: #ffffff !important;
  border-color: #e2dccc !important;
}

/* dashboard: tab row (top nav inside dashboard) */
:root[data-theme="light"] .tab{
  background: #ffffff !important;
  border-color: #cfc8b3 !important;
  color: #2a3344 !important;
}
:root[data-theme="light"] .tab:hover{
  background: #fbfaf5 !important;
}
:root[data-theme="light"] .tab.active{
  background: #efece4 !important;
  color: #0e1420 !important;
  border-color: #a8852e !important;
}

/* dashboard: table-row hover on the stocks table (#table-body tr:hover) */
:root[data-theme="light"] tbody tr:hover{
  background: #fbfaf5 !important;
}

/* dashboard: any element whose inline color uses GitHub greys */
:root[data-theme="light"] [style*="color:#7d8590"],
:root[data-theme="light"] [style*="color: #7d8590"],
:root[data-theme="light"] [style*="color:#8b949e"],
:root[data-theme="light"] [style*="color: #8b949e"],
:root[data-theme="light"] [style*="color:#6e7681"],
:root[data-theme="light"] [style*="color:#5f6470"]{
  color: #525a6a !important;
}
:root[data-theme="light"] [style*="color:#c9d1d9"],
:root[data-theme="light"] [style*="color: #c9d1d9"],
:root[data-theme="light"] [style*="color:#e6edf3"],
:root[data-theme="light"] [style*="color: #e6edf3"]{
  color: #0e1420 !important;
}

/* dashboard: any element whose inline background uses GitHub-dark */
:root[data-theme="light"] [style*="background:#0d1117"],
:root[data-theme="light"] [style*="background: #0d1117"],
:root[data-theme="light"] [style*="background:#161b22"],
:root[data-theme="light"] [style*="background:#1c2128"]{
  background: #ffffff !important;
}

/* ───── guide: hover state + disclaimer ──────────────────── */
:root[data-theme="light"] .feature:hover{
  background: #fbfaf5 !important;
  border-color: #cfc8b3 !important;
}
:root[data-theme="light"] .feature.open{
  /* Make opened state distinguishable from closed in light mode */
  border-color: #a8852e !important;
}
:root[data-theme="light"] .disclaimer{
  background: #fbfaf5 !important;
  border-color: #e2dccc !important;
  color: #525a6a !important;
}
/* guide-nav pills: rgba(255,255,255,.03) is invisible on white */
:root[data-theme="light"] .guide-nav a{
  background: #ffffff !important;
  border-color: #cfc8b3 !important;
  color: #2a3344 !important;
}
:root[data-theme="light"] .guide-nav a:hover{
  background: #fbfaf5 !important;
  color: #0e1420 !important;
  border-color: #a8852e !important;
}
/* guide .tip uses blue tint — fine but bump contrast on white */
:root[data-theme="light"] .tip{
  background: rgba(29,78,216,.06) !important;
  border-color: rgba(29,78,216,.20) !important;
  color: #1d4ed8 !important;
}
/* guide .try-btn — green button with black text. In light mode the green
   becomes darker (#15803d via v9). Black text on dark green is still readable,
   but enforce explicitly. */
:root[data-theme="light"] .try-btn{
  background: #15803d !important;
  color: #ffffff !important;
}

/* end v10 targeted overrides */