/* ── RECHENKERN — dunkler "Brain"-Raum ────────────────────────────────────────
   Scope: NUR #sub-rechenkern-wrapper. Der Rest der App bleibt hell (bewusst).
   Graph-Fläche ist ohnehin dunkel (#26201A); hier ziehen wir Graph + Formel-
   Explorer zu EINEM dunklen Ganzen zusammen. Monospace (Space Mono) für Zahlen
   und Formelteile, wie in der Referenz.

   KEINE @keyframes mit opacity-Grundwert auf sichtbaren Elementen (Projekt-Falle:
   der Animations-Startwert nagelt sonst opacity:0 fest, wenn ein Vorfahre erst
   von display:none sichtbar wird). Hier nur transitions. */

#sub-rechenkern-wrapper {
  /* Grund: warmes, dunkles Espresso-Braun/Taupe statt des frueheren isolierten
     Kuppel-Dunkelgruens (#0E1712/#16241C). Der Gruenton kam sonst nirgends in der
     App vor und stach zu hart heraus; Braun-Taupe traegt die Ocker-/Sand-Akzente
     ruhiger und ist einen Hauch heller. Deckungsgleich mit der Graph-Grundflaeche
     (graph-palette.js BG #26201A), damit Karten + Canvas EIN dunkles Ganzes sind. */
  --rk-bg: #211B15;
  --rk-surface: #2C251B;
  --rk-surface2: #241E16;
  --rk-line: #40372A;
  --rk-text: #EFEAE0;
  --rk-dim: #A79A85;
  --rk-accent: #D8A24E;   /* Ocker — passt zur Erdton-App */
  --rk-hl: #F0C878;       /* helles Sand-Gold fuers Hervorheben */
  --rk-chain: #E0A24A;    /* Bernstein (Kette) — war schon erdig, bleibt */
}

/* Karten im Rechenkern dunkel (Graph-Karte + Explorer-Karte). */
#sub-rechenkern-wrapper .card {
  background: var(--rk-surface);
  border-color: var(--rk-line);
  color: var(--rk-text);
  box-shadow: none;
}
#sub-rechenkern-wrapper .section-label { color: var(--rk-dim); }
#sub-rechenkern-wrapper .card-title { color: var(--rk-text); }
#sub-rechenkern-wrapper .card-title .badge {
  background: rgba(216,162,78,.14); color: var(--rk-accent); border: 1px solid rgba(216,162,78,.3);
}
#sub-rechenkern-wrapper code { color: var(--rk-accent); }

/* Graph-Bedienelemente dunkel einfärben (Achsen-Pillen, Chips, Statuszeile). */
#sub-rechenkern-wrapper .cg3d-axis,
#sub-rechenkern-wrapper .cg3d-chip {
  background: var(--rk-surface2); border-color: var(--rk-line); color: var(--rk-dim);
}
#sub-rechenkern-wrapper .cg3d-axis:hover,
#sub-rechenkern-wrapper .cg3d-chip:hover { color: var(--rk-text); border-color: var(--rk-accent); }
#sub-rechenkern-wrapper .cg3d-axis.active {
  background: var(--rk-accent); border-color: var(--rk-accent); color: #2A2012;
}
#sub-rechenkern-wrapper .cg3d-status {
  background: var(--rk-surface2); color: var(--rk-dim); border-left-color: var(--rk-line);
}
#sub-rechenkern-wrapper .cg3d-status.is-ok { border-left-color: var(--rk-accent); color: var(--rk-text); }
#sub-rechenkern-wrapper .cg-view-switch { background: var(--rk-surface2); border-color: var(--rk-line); }
#sub-rechenkern-wrapper .cg-view-btn { color: var(--rk-dim); }
#sub-rechenkern-wrapper .cg-view-btn:hover { color: var(--rk-text); }
#sub-rechenkern-wrapper .cg-view-btn.active { background: var(--rk-accent); color: #2A2012; }
#sub-rechenkern-wrapper .cg3d-tag { background: var(--rk-surface2); color: var(--rk-text); }
#sub-rechenkern-wrapper .cg3d-tag em { color: var(--rk-dim); }

/* Begriff/Formel-Umschalter im dunklen Rechenkern (Erdton-Akzent). */
#sub-rechenkern-wrapper .cg3d-labelmode-hint { color: var(--rk-dim); }
#sub-rechenkern-wrapper .cg3d-labelbtn {
  background: var(--rk-surface2); border-color: var(--rk-line); color: var(--rk-dim);
}
#sub-rechenkern-wrapper .cg3d-labelbtn:hover { color: var(--rk-text); border-color: var(--rk-accent); }
#sub-rechenkern-wrapper .cg3d-labelbtn.active {
  background: var(--rk-accent); border-color: var(--rk-accent); color: #241A08;
}

/* ── FORMEL-EXPLORER ─────────────────────────────────────────────────────── */
#cg-explorer { color: var(--rk-text); font-size: 13px; }
.fx-empty { color: var(--rk-dim); font-size: 13px; line-height: 1.7; }
.fx-empty strong { color: var(--rk-text); }
.fx-ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rk-accent); box-shadow: 0 0 6px rgba(216,162,78,.7); vertical-align: 1px; }

.fx-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fx-proc { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: rgba(216,162,78,.14); color: var(--rk-accent); border: 1px solid rgba(216,162,78,.28); }
.fx-title { font-size: 17px; font-weight: 700; color: var(--rk-text); margin: 0; }

.fx-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.fx-pill { font-size: 9px; font-weight: 700; font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 8px; white-space: nowrap; border: 1px solid; }

.fx-desc { font-size: 12.5px; color: var(--rk-dim); line-height: 1.6; margin: 0 0 14px; max-width: 90ch; }

.fx-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rk-dim); margin: 16px 0 6px; }
.fx-pretty { text-align: center; padding: 14px; background: var(--rk-surface2); border: 1px dashed var(--rk-line); border-radius: 8px; overflow-x: auto; color: var(--rk-text); }
.fx-rule { font-family: var(--mono); font-size: 12px; text-align: left; line-height: 1.7; }
.fx-rule strong { color: var(--rk-accent); }

/* Badges: Live (grün) vs. Kette (bernstein). */
.fx-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; margin: 14px 0 10px; line-height: 1.4; }
.fx-badge--live { background: rgba(216,162,78,.12); color: var(--rk-accent); border: 1px solid rgba(216,162,78,.3); }
.fx-badge--chain { background: rgba(224,162,74,.12); color: var(--rk-chain); border: 1px solid rgba(224,162,74,.32); }

/* Interaktive Formelzeile — Zahlen stehen IN der Formel (enerbolt-Prinzip). */
.fx-interactive { font-family: var(--mono); font-size: 15px; line-height: 2.4; padding: 12px 14px; background: var(--rk-surface2); border: 1px solid var(--rk-line); border-radius: 10px; overflow-x: auto; }
.fx-lhs { color: var(--rk-text); font-weight: 700; }
.fx-eq { color: var(--rk-dim); margin: 0 6px; }
.fx-op { color: var(--rk-dim); margin: 0 5px; }
.fx-paren { color: var(--rk-dim); }
.fx-num { color: #D8CBB2; }
.fx-result { color: var(--rk-accent); font-weight: 700; font-size: 17px; }

/* Variablen-Chip in der Formel: Name + Live-Wert, hover-highlightbar. */
.fx-var { display: inline-flex; align-items: baseline; gap: 5px; padding: 1px 8px; border-radius: 7px; border: 1px solid transparent; background: rgba(140,163,148,.1); transition: background .15s, border-color .15s, box-shadow .15s; cursor: default; }
.fx-var-name { color: #E6CB98; }
.fx-var-val { color: #EAF6EE; font-weight: 700; }

.fx-chainval { font-size: 12.5px; color: var(--rk-dim); margin: 4px 0 6px; }
.fx-chainval b { color: var(--rk-text); font-family: var(--mono); }

/* ── REGLER ───────────────────────────────────────────────────────────────── */
.fx-slider-note { font-size: 11.5px; color: var(--rk-dim); margin-bottom: 10px; line-height: 1.5; }
.fx-sliders { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fx-slider { padding: 10px 12px; background: var(--rk-surface2); border: 1px solid var(--rk-line); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
.fx-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.fx-slider-label { font-size: 12.5px; color: var(--rk-text); font-weight: 600; }
.fx-slider-val { font-size: 12px; color: var(--rk-dim); font-family: var(--mono); white-space: nowrap; }
.fx-slider-val b { color: var(--rk-accent); font-weight: 700; }
.fx-unit { color: var(--rk-dim); font-size: 10px; }
.fx-src { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 5px; margin-left: 4px; }
.fx-src--run { color: var(--rk-accent); background: rgba(216,162,78,.14); }
.fx-src--preview { color: var(--rk-dim); background: rgba(140,163,148,.12); }
.fx-range { width: 100%; accent-color: var(--rk-accent); cursor: pointer; }

/* Ein-/Ausgaenge, Engine, Achsen. */
.fx-io { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.fx-none { color: var(--rk-dim); font-size: 12px; }
.fx-engine { font-size: 11px; color: var(--rk-dim); font-family: var(--mono); }
#sub-rechenkern-wrapper .cg-chip.cg-in { background: rgba(216,162,78,.12); color: #E6CB98; border-color: rgba(216,162,78,.28); }
#sub-rechenkern-wrapper .cg-chip.cg-out { background: rgba(224,196,130,.14); color: #E6D2A6; border-color: rgba(224,196,130,.3); }

/* ── HOVER-HIGHLIGHT: alle Vorkommen eines data-var leuchten zugleich auf ─── */
.fx-hl.fx-var,
.fx-hl.cg-chip { background: rgba(240,200,120,.28) !important; border-color: var(--rk-hl) !important; box-shadow: 0 0 0 1px var(--rk-hl); }
.fx-hl.fx-var .fx-var-val { color: #FFFFFF; }
.fx-slider.fx-hl { border-color: var(--rk-hl); box-shadow: 0 0 0 1px var(--rk-hl), 0 0 12px rgba(240,200,120,.25); }
/* der data-var-Wert am <b> im Regler-Kopf: hebt den Zahlwert mit hervor */
b.fx-hl { color: var(--rk-hl) !important; }

@media (max-width: 720px) { .fx-io { grid-template-columns: 1fr; } }