/* ──────────────────────────────────────────────────────────────
   Botty Design Tokens — v3  "Bold Data-Terminal"
   Dark-first. CI-rooted (BeratungTeam): BT-Blau #339ED6 · Türkis
   #33D6AA · Gelb #FBC117. Light theme = vollwertiger Toggle.
   ────────────────────────────────────────────────────────────── */

/* ── DARK (default / canonical) ─────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Surfaces — EspressoDoppio near-black → dark navy (#0A0E14 → #10161F) */
  --bg:          #0b1019;
  --bg-deep:     #0a0e14;
  --surface:     #121826;
  --surface-2:   #1a2230;
  --surface-3:   #232d3d;
  --surface-4:   #2e3a4c;
  --glass:       rgba(18, 24, 38, 0.72);

  /* Lines */
  --line:        #232d3d;
  --line-strong: #34425a;
  --line-accent: rgba(242, 179, 61, 0.40);

  /* Text */
  --text:        #eef2f7;
  --text-muted:  #a6b2c2;
  --text-subtle: #6c7a8d;
  --text-faint:  #495768;
  --text-on-accent: #0a0e14;

  /* Brand — EspressoDoppio crema gold (#F2B33D) */
  --brand:       #F2B33D;
  --brand-2:     #e0a32f;
  --brand-deep:  #c98e22;
  --brand-ink:   #0a0e14;
  --brand-soft:  #2a2410;
  --brand-tint:  #4a3d18;
  --brand-glow:  rgba(242, 179, 61, 0.35);

  /* Semantic — teal up, magenta down, gold warn (Neon-Palette) */
  --profit:      #1FB6A8;
  --profit-2:    #19a094;
  --profit-bg:   #0c2b29;
  --profit-glow: rgba(31, 182, 168, 0.32);
  --loss:        #FF2D95;
  --loss-2:      #e01f81;
  --loss-bg:     #340f23;
  --loss-glow:   rgba(255, 45, 149, 0.30);
  --warn:        #F2B33D;
  --warn-solid:  #F2B33D;
  --warn-bg:     #2a2410;
  --warn-glow:   rgba(242, 179, 61, 0.30);
  --neutral:     #7384a0;

  /* Chart palette (gelesen von botty-charts.js) — gold→teal Steam-to-Chart-Motiv */
  --chart-bg:        transparent;
  --chart-grid:      rgba(52, 66, 90, 0.45);
  --chart-text:      #6c7a8d;
  --chart-up:        #1FB6A8;
  --chart-down:      #FF2D95;
  --chart-line:      #F2B33D;
  --chart-line-2:    #FF2D95;
  --chart-area-top:  rgba(242, 179, 61, 0.26);
  --chart-area-bot:  rgba(242, 179, 61, 0.0);
  --chart-crosshair: #7384a0;
  --regime-trend:    rgba(31, 182, 168, 0.16);
  --regime-range:    rgba(242, 179, 61, 0.12);

  /* Elevation — Schatten + Glow */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 6px 22px rgba(0, 0, 0, 0.45);
  --shadow-lg:   0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow-pop:  0 10px 34px rgba(0, 0, 0, 0.66);
  --ring:        0 0 0 1px var(--line-strong);
}

/* ── LIGHT (Toggle) ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #f4f7fa;
  --bg-deep:     #e9eff5;
  --surface:     #ffffff;
  --surface-2:   #f1f5f9;
  --surface-3:   #e6edf3;
  --surface-4:   #d9e3ec;
  --glass:       rgba(255, 255, 255, 0.78);

  --line:        #dde6ec;
  --line-strong: #c2d1dd;
  --line-accent: rgba(51, 158, 214, 0.35);

  --text:        #14222f;
  --text-muted:  #4a5a69;
  --text-subtle: #7d8b99;
  --text-faint:  #a7b4c0;
  --text-on-accent: #ffffff;

  --brand:       #B8851E;
  --brand-2:     #a8771a;
  --brand-deep:  #8f6414;
  --brand-ink:   #14222f;
  --brand-soft:  #fbf1d8;
  --brand-tint:  #f1e0b0;
  --brand-glow:  rgba(242, 179, 61, 0.24);

  --profit:      #138A80;
  --profit-2:    #0f756c;
  --profit-bg:   #d7f1ee;
  --profit-glow: rgba(31, 182, 168, 0.18);
  --loss:        #D11A6E;
  --loss-2:      #b3145d;
  --loss-bg:     #fbe0ee;
  --loss-glow:   rgba(255, 45, 149, 0.16);
  --warn:        #B8851E;
  --warn-solid:  #F2B33D;
  --warn-bg:     #fbf1d8;
  --warn-glow:   rgba(242, 179, 61, 0.22);
  --neutral:     #7d8b99;

  --chart-bg:        transparent;
  --chart-grid:      rgba(194, 209, 221, 0.6);
  --chart-text:      #7d8b99;
  --chart-up:        #138A80;
  --chart-down:      #D11A6E;
  --chart-line:      #B8851E;
  --chart-line-2:    #D11A6E;
  --chart-area-top:  rgba(242, 179, 61, 0.22);
  --chart-area-bot:  rgba(242, 179, 61, 0.0);
  --chart-crosshair: #7d8b99;
  --regime-trend:    rgba(19, 138, 128, 0.12);
  --regime-range:    rgba(242, 179, 61, 0.16);

  --shadow-sm:   0 1px 2px rgba(26, 58, 82, 0.05);
  --shadow-md:   0 4px 14px rgba(26, 58, 82, 0.08);
  --shadow-lg:   0 12px 32px rgba(26, 58, 82, 0.12);
  --shadow-pop:  0 10px 30px rgba(26, 58, 82, 0.16);
  --ring:        0 0 0 1px var(--line-strong);
}

:root {
  /* Radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 44px;

  /* Typography */
  --ff-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-mono: "JetBrains Mono", "IBM Plex Mono", "Consolas", monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: .14s;
  --t-med:  .26s;
  --t-slow: .5s;

  /* Layout */
  --nav-w: 240px;
  --nav-w-collapsed: 68px;
  --rail-w: 320px;
  --topbar-h: 60px;
}

/* ── Base resets ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
}

body.botty-root {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
  background-image:
    radial-gradient(1200px 600px at 78% -10%, var(--brand-soft), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, var(--profit-bg), transparent 55%);
  background-attachment: fixed;
}
[data-theme="light"] body.botty-root { background-image: none; }

::selection { background: var(--brand-glow); color: var(--text); }

/* Scrollbars (dark terminal) */
* { scrollbar-width: thin; scrollbar-color: var(--surface-4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: padding-box; }

.mono, code, .num {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: 0;
}

.profit-text { color: var(--profit); }
.loss-text   { color: var(--loss); }
.warn-text   { color: var(--warn); }
.muted       { color: var(--text-muted); }
.subtle      { color: var(--text-subtle); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* Utility: aufwärts gerichtete Akzentlinie (CI-Leitmotiv) */
.botty-uparrow-line {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand) 38%, var(--profit) 100%);
  opacity: 0.75;
  border-radius: 1px;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ── Pill / badge ───────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-muted);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
  line-height: 1.7;
  text-decoration: none;
  white-space: nowrap;
  /* Schutz: ein zu langer Wert (z.B. ganzer Satz im evidence_strength-Feld) darf
     die Box nicht sprengen — auf Containerbreite kappen statt überlaufen. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill.brand  { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-tint); }
.pill.profit { background: var(--profit-bg); color: var(--profit); border-color: transparent; }
.pill.loss   { background: var(--loss-bg); color: var(--loss); border-color: transparent; }
.pill.warn   { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.solid  { background: var(--brand); color: var(--text-on-accent); border-color: transparent; }

/* Evidence strength variants (Wissen/Strategien) */
.pill.ev-very_strong { background: var(--profit-bg); color: var(--profit); border-color: transparent; }
.pill.ev-strong      { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-tint); }
.pill.ev-moderate    { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.pill.ev-weak        { background: var(--surface-3); color: var(--text-subtle); border-color: transparent; }

/* ── Status dots ────────────────────────────────────────────── */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.dot-live {
  background: var(--profit);
  animation: botty-pulse 2.2s ease-out infinite;
}
.dot-warn { background: var(--warn-solid); }
.dot-loss { background: var(--loss); }
.dot-muted { background: var(--text-subtle); }
@keyframes botty-pulse {
  0%   { box-shadow: 0 0 0 0 var(--profit-glow); }
  70%  { box-shadow: 0 0 0 7px rgba(51, 214, 170, 0); }
  100% { box-shadow: 0 0 0 0 rgba(51, 214, 170, 0); }
}

/* Section label */
.section-label {
  font-size: 11px; font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

/* Number count-up helper hook */
.tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ════════════════════════════════════════════════════════════════
   EXTRA THEMES — pure token swaps (+ a few per-theme refinements).
   Placed after the :root font/radii block so per-theme --ff-* wins.
   Every theme redefines the FULL set so no var falls back to dark.
   ════════════════════════════════════════════════════════════════ */

/* ── NEWSPAPER — classic broadsheet: newsprint, black ink, serif, hairlines ── */
[data-theme="newspaper"] {
  --bg:#f5f2ea; --bg-deep:#ebe7dc; --surface:#fbf9f3; --surface-2:#f1ede3;
  --surface-3:#e7e2d5; --surface-4:#d8d2c2; --glass:rgba(251,249,243,0.86);
  --line:#d8d2c2; --line-strong:#b3ab97; --line-accent:rgba(26,24,20,0.28);
  --text:#1a1814; --text-muted:#4a463d; --text-subtle:#76705f; --text-faint:#a39c89; --text-on-accent:#f5f2ea;
  --brand:#7a1f1f; --brand-2:#6a1a1a; --brand-deep:#581515; --brand-ink:#f5f2ea;
  --brand-soft:#efe3df; --brand-tint:#e3d6d2; --brand-glow:rgba(122,31,31,0.16);
  --profit:#2f5d3a; --profit-2:#274d30; --profit-bg:#e3ebe0; --profit-glow:rgba(47,93,58,0.12);
  --loss:#9a2b22; --loss-2:#821f18; --loss-bg:#f1e2df; --loss-glow:rgba(154,43,34,0.12);
  --warn:#8a6d1f; --warn-solid:#8a6d1f; --warn-bg:#efe8d3; --warn-glow:rgba(138,109,31,0.14); --neutral:#76705f;
  --chart-bg:transparent; --chart-grid:rgba(120,112,95,0.28); --chart-text:#76705f;
  --chart-up:#2f5d3a; --chart-down:#9a2b22; --chart-line:#1a1814; --chart-line-2:#9a2b22;
  --chart-area-top:rgba(26,24,20,0.10); --chart-area-bot:rgba(26,24,20,0); --chart-crosshair:#76705f;
  --regime-trend:rgba(47,93,58,0.10); --regime-range:rgba(138,109,31,0.10);
  --shadow-sm:0 1px 0 rgba(26,24,20,0.10); --shadow-md:0 1px 0 rgba(26,24,20,0.12);
  --shadow-lg:0 2px 0 rgba(26,24,20,0.12); --shadow-pop:0 6px 22px rgba(26,24,20,0.18); --ring:0 0 0 1px var(--line-strong);
  --ff-sans:Georgia,"Times New Roman","Iowan Old Style",serif;
  --ff-display:Georgia,"Times New Roman","Iowan Old Style",serif;
  --ff-mono:"Courier New",Courier,monospace;
}
[data-theme="newspaper"] body.botty-root { background-image:none; }
[data-theme="newspaper"] h1,[data-theme="newspaper"] h2,[data-theme="newspaper"] h3,[data-theme="newspaper"] h4 { letter-spacing:0; font-weight:700; }
[data-theme="newspaper"] a { text-decoration:underline; text-underline-offset:2px; }

/* ── SEPIA / E-INK — warm cream paper, sienna ink, serif (softer than newspaper) ── */
[data-theme="sepia"] {
  --bg:#f4ecd8; --bg-deep:#ece2c9; --surface:#faf3e2; --surface-2:#f1e8d2;
  --surface-3:#e8dcc1; --surface-4:#d8c9a8; --glass:rgba(250,243,226,0.86);
  --line:#ddd0b3; --line-strong:#c3b48f; --line-accent:rgba(138,90,43,0.30);
  --text:#3a2f1e; --text-muted:#5e5034; --text-subtle:#877349; --text-faint:#ab9a72; --text-on-accent:#faf3e2;
  --brand:#8a5a2b; --brand-2:#784d24; --brand-deep:#63401d; --brand-ink:#faf3e2;
  --brand-soft:#ece0c8; --brand-tint:#ddcaa6; --brand-glow:rgba(138,90,43,0.20);
  --profit:#4a6b3a; --profit-2:#3d5a30; --profit-bg:#e3ecd6; --profit-glow:rgba(74,107,58,0.14);
  --loss:#9a3b2b; --loss-2:#843123; --loss-bg:#f0ddd2; --loss-glow:rgba(154,59,43,0.14);
  --warn:#8a6a2b; --warn-solid:#8a6a2b; --warn-bg:#ece0c8; --warn-glow:rgba(138,106,43,0.16); --neutral:#877349;
  --chart-bg:transparent; --chart-grid:rgba(135,115,73,0.28); --chart-text:#877349;
  --chart-up:#4a6b3a; --chart-down:#9a3b2b; --chart-line:#8a5a2b; --chart-line-2:#9a3b2b;
  --chart-area-top:rgba(138,90,43,0.14); --chart-area-bot:rgba(138,90,43,0); --chart-crosshair:#877349;
  --regime-trend:rgba(74,107,58,0.10); --regime-range:rgba(138,106,43,0.12);
  --shadow-sm:0 1px 2px rgba(80,60,30,0.06); --shadow-md:0 4px 14px rgba(80,60,30,0.10);
  --shadow-lg:0 12px 30px rgba(80,60,30,0.14); --shadow-pop:0 10px 28px rgba(80,60,30,0.18); --ring:0 0 0 1px var(--line-strong);
  --ff-sans:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --ff-display:Georgia,"Iowan Old Style","Palatino Linotype",serif;
}
[data-theme="sepia"] body.botty-root { background-image:none; }

/* ── BLOOMBERG AMBER — amber phosphor on black, mono, CRT scanlines ── */
[data-theme="amber"] {
  --bg:#0a0700; --bg-deep:#060400; --surface:#14100a; --surface-2:#1d1810;
  --surface-3:#2a2316; --surface-4:#3a301d; --glass:rgba(20,16,10,0.82);
  --line:#2a2316; --line-strong:#4a3d22; --line-accent:rgba(255,176,0,0.40);
  --text:#ffb000; --text-muted:#c98a0e; --text-subtle:#8f6410; --text-faint:#5e440e; --text-on-accent:#0a0700;
  --brand:#ff8800; --brand-2:#e67a00; --brand-deep:#cc6d00; --brand-ink:#0a0700;
  --brand-soft:#2a1c08; --brand-tint:#4a3210; --brand-glow:rgba(255,136,0,0.38);
  --profit:#ffcc00; --profit-2:#e6b800; --profit-bg:#2a2400; --profit-glow:rgba(255,204,0,0.30);
  --loss:#ff4422; --loss-2:#e63a1c; --loss-bg:#2a0e08; --loss-glow:rgba(255,68,34,0.30);
  --warn:#ff8800; --warn-solid:#ff8800; --warn-bg:#2a1c08; --warn-glow:rgba(255,136,0,0.30); --neutral:#8f6410;
  --chart-bg:transparent; --chart-grid:rgba(255,176,0,0.14); --chart-text:#8f6410;
  --chart-up:#ffcc00; --chart-down:#ff4422; --chart-line:#ff8800; --chart-line-2:#ff4422;
  --chart-area-top:rgba(255,136,0,0.24); --chart-area-bot:rgba(255,136,0,0); --chart-crosshair:#c98a0e;
  --regime-trend:rgba(255,204,0,0.12); --regime-range:rgba(255,136,0,0.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.6); --shadow-md:0 6px 22px rgba(0,0,0,0.6);
  --shadow-lg:0 18px 48px rgba(0,0,0,0.7); --shadow-pop:0 10px 34px rgba(0,0,0,0.75); --ring:0 0 0 1px var(--line-strong);
  --ff-sans:"JetBrains Mono","IBM Plex Mono",Consolas,monospace;
  --ff-display:"JetBrains Mono","IBM Plex Mono",Consolas,monospace;
}

/* ── MATRIX GREEN — green phosphor on black, mono, CRT scanlines ── */
[data-theme="matrix"] {
  --bg:#020a02; --bg-deep:#010601; --surface:#051a0c; --surface-2:#07220f;
  --surface-3:#0a2e14; --surface-4:#0f3d1c; --glass:rgba(5,20,12,0.82);
  --line:#0a2e14; --line-strong:#15522a; --line-accent:rgba(51,255,102,0.40);
  --text:#33ff66; --text-muted:#1fc94e; --text-subtle:#149a3a; --text-faint:#0e5e26; --text-on-accent:#020a02;
  --brand:#00cc44; --brand-2:#00b33c; --brand-deep:#009933; --brand-ink:#020a02;
  --brand-soft:#08220f; --brand-tint:#103d1c; --brand-glow:rgba(51,255,102,0.38);
  --profit:#66ff99; --profit-2:#4de685; --profit-bg:#052a14; --profit-glow:rgba(102,255,153,0.30);
  --loss:#ff3355; --loss-2:#e62a4a; --loss-bg:#2a060e; --loss-glow:rgba(255,51,85,0.30);
  --warn:#aaff33; --warn-solid:#aaff33; --warn-bg:#18220a; --warn-glow:rgba(170,255,51,0.28); --neutral:#149a3a;
  --chart-bg:transparent; --chart-grid:rgba(51,255,102,0.14); --chart-text:#149a3a;
  --chart-up:#66ff99; --chart-down:#ff3355; --chart-line:#33ff66; --chart-line-2:#ff3355;
  --chart-area-top:rgba(51,255,102,0.22); --chart-area-bot:rgba(51,255,102,0); --chart-crosshair:#1fc94e;
  --regime-trend:rgba(102,255,153,0.12); --regime-range:rgba(170,255,51,0.10);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.6); --shadow-md:0 6px 22px rgba(0,0,0,0.6);
  --shadow-lg:0 18px 48px rgba(0,0,0,0.7); --shadow-pop:0 10px 34px rgba(0,0,0,0.75); --ring:0 0 0 1px var(--line-strong);
  --ff-sans:"JetBrains Mono","IBM Plex Mono",Consolas,monospace;
  --ff-display:"JetBrains Mono","IBM Plex Mono",Consolas,monospace;
}

/* CRT scanline overlay for the phosphor themes (subtle, fixed, behind content) */
[data-theme="amber"] body.botty-root,
[data-theme="matrix"] body.botty-root {
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0, rgba(0,0,0,0.16) 1px, transparent 1px, transparent 3px);
  background-attachment:fixed;
}

/* ── Theme picker popover (shared by sidebar toggle + map SPA button) ── */
.botty-theme-menu {
  position:fixed; z-index:10000; min-width:194px;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-pop);
  padding:6px; display:none;
}
.botty-theme-menu.open { display:block; }
.botty-theme-menu button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:7px 9px; background:none; border:none; border-radius:var(--r-sm);
  color:var(--text); font-family:var(--ff-sans); font-size:13px;
  cursor:pointer; text-align:left;
}
.botty-theme-menu button:hover { background:var(--surface-3); }
.botty-theme-menu button.active { color:var(--brand); }
.botty-theme-menu .sw {
  width:15px; height:15px; border-radius:4px; flex-shrink:0;
  border:1px solid var(--line-strong);
}
.botty-theme-menu .nm { flex:1; }
.botty-theme-menu .ck { color:var(--brand); opacity:0; font-weight:700; }
.botty-theme-menu button.active .ck { opacity:1; }