/* ════════════════════════════════════════════════════════════════════════
   chartlab · theme.css — KANONISCHES DESIGN-SYSTEM (Stand 2026-07-10)
   ════════════════════════════════════════════════════════════════════════
   Nordstern: Linear-Präzision × Bloomberg-Dichte.
   Premium = Präzision unter Stress (Ausrichtung, Rhythmus, klare Zustände),
   NICHT Effekte.

   EINBINDUNG: <link rel="stylesheet" href="assets/theme.css"> als ERSTES
   Stylesheet — Seiten-CSS darf danach überschreiben (Kaskade gewinnt).

   VIA-NEGATIVA-REGELN (hart, für jeden Anwender):
   ▸ KEINE Box-Shadow-Hover-Lifts, keine translateY-Hover, keine Glows.
   ▸ KEINE Deko-Animationen (Puls, Shimmer, Fade-In-Kaskaden).
   ▸ Transitions ≤150ms und NUR color / background-color / border-color.
   ▸ Negative Werte NIE grün. Status IMMER Form+Farbe (WCAG 1.4.1):
     Badge-Glyphen ● ▲ ■ ◇ tragen die Bedeutung auch ohne Farbe.
   ▸ Mono-Schrift NUR für Zahlen/Codes/Ticker — Fließtext bleibt Sans.
   ▸ System-Font-Stack. KEINE externen Font-/CDN-Loads.
   ▸ Ein Akzent pro Fläche. Gold = Überschrift/Deckel, Grün = up/aktiv.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Flächen-Hierarchie (Basis: causalbet, kühles Blau-Schwarz) ──
     bg < panel < panel2/card — jede Stufe ~1 Blende heller.            */
  --bg:      #08090b;   /* Seiten-Grund */
  --panel:   #101217;   /* Sektionen, KPI-Kacheln */
  --panel2:  #141820;   /* Inputs, erhabene Blöcke */
  --card:    #0b0d11;   /* Karten IN Panels (eine Stufe zurück) */
  --line:    #252b35;   /* Standard-Hairline */
  --line2:   #3a4350;   /* Hover-/Fokus-Border, Trenner betont */
  --ink:     #06070a;   /* Text auf hellen Flächen (Tags) */

  /* ── Text-Stufen (AA auf --bg und --panel geprüft) ── */
  --txt:     #eceff4;   /* Primär ~15.6:1 */
  --sub:     #8f98a8;   /* Sekundär/Labels ~6.2:1 */
  --dim:     #737d8e;   /* Captions/Ghost ~4.5:1 — nie für Kernzahlen */

  /* ── P&L-Semantik: EIN Grün/Rot-Paar für die ganze Suite ──
     up  #39d98a auf #08090b ≈ 9.6:1 · down #ff6475 ≈ 6.0:1 (AA ok).   */
  --up:        #39d98a;
  --up-line:   #24593c;
  --up-bg:     #0b1c13;
  --down:      #ff6475;
  --down-line: #6b2631;
  --down-bg:   #21090d;

  /* ── Warn / Info / Neben-Akzente ── */
  --warn:      #f4bf45;  /* warmes Gold — auch h2/Deckel-Akzent */
  --warn-line: #66501d;
  --warn-bg:   #211906;
  --info:      #48c7d9;  /* Links, Quellen, Fokus */
  --info-line: #275763;
  --info-bg:   #0b1b20;
  --blue:      #79a7ff;  /* Baseline/Hedge */
  --blue-line: #2d426f;
  --blue-bg:   #0b1221;

  /* ── Akzent + Fokus ── */
  --acc:       var(--up);      /* aktiv/on-Zustand = up-Grün */
  --gold:      #f0d66c;        /* Marken-Gold (Hub-Logo) */
  --focus:     var(--info);    /* EIN Fokus-Ring überall */

  /* ── Typo (System-Stack, keine Loads) ── */
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Größen-Skala: 10 Caption · 11 Meta · 12 Tabelle · 13 Body ·
     15 Card-Titel · 18 KPI-Wert · 20 H1 · 25/42 Hero-Zahlen            */
  --fs-caption:10px; --fs-meta:11px; --fs-table:12px; --fs-body:13px;
  --fs-h3:15px; --fs-kpi:18px; --fs-h1:20px;

  /* ── Spacing-Rhythmus (4/8er-Raster — NUR diese Werte verwenden) ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* ── Radius-Skala ── */
  --r1:4px; --r2:7px; --r3:8px; --r-pill:999px;
}

/* ════════ BASIS (safe: greift nur, wo Seiten nichts überschreiben) ════ */
.theme-body{margin:0;background:var(--bg);color:var(--txt);
  font:var(--fs-body)/1.5 var(--sans)}

/* ── Zahlen-Disziplin: JEDE Zahlen-Zelle/-Anzeige bekommt .num ── */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}

/* ── P&L-Utilities: Vorzeichen gehört ins Markup, Farbe hierher ── */
.pnl-up{color:var(--up)}
.pnl-down{color:var(--down)}
.pnl-flat{color:var(--sub)}

/* ════════ FOKUS-RINGE — ein Ring, überall identisch ════ */
:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
/* in randlosen Leisten (Nav): outline-offset:-2px lokal setzen */

/* ════════ UTILITIES ════ */

/* Karte: Hairline + Fläche. KEIN Shadow, KEIN Hover-Lift. */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s3);min-width:0}
.card>h3{margin:0 0 var(--s2);font-size:var(--fs-h3)}

/* Panel-Sektion mit Kopfzeile (Muster aus causalbet) */
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r3);min-width:0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:10px var(--s3);border-bottom:1px solid var(--line)}
.panel-head h2{margin:0;font-size:var(--fs-table);text-transform:uppercase;
  color:var(--warn);font-family:var(--mono);letter-spacing:.06em}
.panel-hint{color:var(--sub);font-size:var(--fs-caption)}

/* KPI-Kachel: Label oben (Caption), Wert groß (Mono), Fußnote dim */
.kpi{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);padding:9px;min-width:0;text-align:left;
  color:var(--txt)}
.kpi .k{display:block;color:var(--sub);font-size:var(--fs-caption);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kpi b,.kpi .v{display:block;margin-top:3px;font-size:var(--fs-kpi);
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  /* lange Code-Werte (z.B. balanced_autopilot) sauber kappen statt überlaufen */
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .so{display:block;color:var(--dim);font-size:var(--fs-caption);
  margin-top:var(--s1);line-height:1.3}
button.kpi{cursor:pointer;width:100%;height:auto;
  transition:border-color .12s ease}
button.kpi:hover{border-color:var(--line2)}
button.kpi.on{border-color:var(--acc)}

/* Pille: neutrale Kapsel für Label/Meta */
.pill{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s1);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 7px;font-size:var(--fs-caption);white-space:nowrap;
  color:var(--sub)}

/* Status-Badges: Form+Farbe (WCAG 1.4.1). Glyph trägt die Bedeutung
   auch monochrom: ● ok · ▲ warn · ■ bad · ◇ neutral/info.              */
.badge{display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:3px 8px;font-size:var(--fs-caption);white-space:nowrap}
.badge::before{font-size:8px;line-height:1}
.badge-ok{color:var(--up);border-color:var(--up-line);background:var(--up-bg)}
.badge-ok::before{content:"●"}
.badge-warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.badge-warn::before{content:"▲"}
.badge-bad{color:var(--down);border-color:var(--down-line);background:var(--down-bg)}
.badge-bad::before{content:"■"}
.badge-info{color:var(--info);border-color:var(--info-line);background:var(--info-bg)}
.badge-info::before{content:"◇"}
.badge-neutral{color:var(--sub)}
.badge-neutral::before{content:"◇"}

/* Ruhiger Button: Standard-Aktion ohne Gewicht */
.btn-quiet{height:36px;background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:var(--r2);padding:var(--s2) 10px;
  font:inherit;cursor:pointer;
  transition:border-color .12s ease,color .12s ease}
.btn-quiet:hover{border-color:var(--line2)}
.btn-quiet.on{border-color:var(--acc);color:var(--acc);background:var(--up-bg)}

/* Saubere Tabelle: sticky Kopf, Zebra, Hover — Dichte wie causalbet */
.table-clean{width:100%;border-collapse:collapse;font-size:var(--fs-table)}
.table-clean th{position:sticky;top:0;z-index:2;background:#0d1015;
  color:var(--sub);font-size:var(--fs-caption);text-align:left;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;
  border-bottom:1px solid var(--line);padding:var(--s2)}
.table-clean td{border-bottom:1px solid #1a1e27;padding:var(--s2);
  vertical-align:top;transition:background-color .12s ease}
.table-clean tbody tr:nth-child(even) td{background:#0c0e13}
.table-clean tbody tr:hover td,
.table-clean tbody tr.sel td{background:#151a22}
/* Zahlen-Spalten: <td class="num right"> */
.right{text-align:right}

/* ════════ SCROLLBAR-POLITUR (dezent, systemnah) ════ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}
/* Firefox */
@supports (scrollbar-width:thin){ *{scrollbar-width:thin;scrollbar-color:var(--line) transparent} }

/* ════════ MOTION-DISZIPLIN ════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}