/* ============================================================
   SignalFlow – dark "control-room" theme
   No external fonts / assets. System font stack only.
   ============================================================ */

:root{
  --bg:        #0b0f14;
  --bg-2:      #0e141b;
  --panel:     #121a23;
  --panel-2:   #16202b;
  --line:      #223040;
  --line-soft: #1a2632;
  --txt:       #e6edf3;
  --muted:     #8b98a7;
  --faint:     #63707e;
  --accent:    #2dd4bf;   /* adaptive / teal */
  --accent-2:  #38bdf8;   /* cyan */
  --fixed:     #64748b;   /* fixed baseline / slate */
  --green:     #22c55e;
  --yellow:    #f59e0b;
  --red:       #ef4444;
  --good:      #22c55e;
  --bad:       #ef4444;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --cell-bg: #0a0e13;   /* Canvas-"Monitor" je Theme (Karten/Kreuzungen) */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
/* the hidden attribute must always win, even over `display:grid` etc. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,.07), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(56,189,248,.06), transparent 60%),
    var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------- light theme -------------------------------- */
/* Toggled via body[data-theme]; the canvases keep their dark "monitor"
   look either way. */
body[data-theme="light"]{
  --bg:#eef2f7; --bg-2:#e7edf4; --panel:#ffffff; --panel-2:#f1f5fa;
  --line:#d3dce7; --line-soft:#e3e9f1;
  --txt:#182430; --muted:#5b6b7d; --faint:#8798aa;
  --accent:#0d9488; --accent-2:#0369a1; --fixed:#64748b;
  --cell-bg:#f6f4ef;
  --shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(23,42,64,.10);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(13,148,136,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(3,105,161,.05), transparent 60%),
    var(--bg);
}
body[data-theme="light"] .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
}
body[data-theme="light"] .btn:hover{ border-color:#b9c6d6; background:#e9eef5; }
body[data-theme="light"] .btn.primary:hover{ background: linear-gradient(180deg, #128f83, #0e7c70); }
body[data-theme="light"] .decision-item:hover{ border-color:#b9c6d6; }
body[data-theme="light"] .answer-box,
body[data-theme="light"] .ask-steps{ background:#f4f7fb; }
body[data-theme="light"] input[type=range]{
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill,50%), #cbd5e1 var(--fill,50%), #cbd5e1 100%);
}

h1,h2,h3{ margin:0; font-weight:650; letter-spacing:.2px; }
code{ font-family: var(--mono); font-size:.9em; color: var(--accent-2); }
.hidden{ display:none !important; }
.mono{ font-family: var(--mono); }

/* ------------------------------ header ------------------------------ */
.topbar{
  position: sticky; top:0; z-index:20;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(11,15,20,.96), rgba(11,15,20,.82));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Inhalt der Topbar so breit wie der Seiteninhalt -> 'SignalFlow' steht
   ungefaehr ueber dem Simulieren-Button statt am linken Rand */
.topbar-inner{
  width:100%; max-width:1760px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.logo{ display:grid; place-items:center; filter: drop-shadow(0 0 10px rgba(56,189,248,.25)); }
.brand-text h1{ font-size:20px; letter-spacing:.5px; }
.sub{ margin:1px 0 0; color: var(--muted); font-size:12.5px; }

.status{ display:flex; gap:10px; flex-wrap:wrap; }
.badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:999px;
  background: var(--panel); border:1px solid var(--line);
  font-size:12.5px; color: var(--muted); white-space:nowrap;
}
.badge b{ color: var(--txt); font-weight:600; }
.badge .dot{ width:8px; height:8px; border-radius:50%; background: var(--faint); box-shadow:0 0 0 0 transparent; transition:.2s; }
.badge.ok  .dot{ background: var(--green); box-shadow:0 0 10px rgba(34,197,94,.8); }
.badge.off .dot{ background: var(--yellow); box-shadow:0 0 10px rgba(245,158,11,.7); }
.badge.err .dot{ background: var(--red); box-shadow:0 0 10px rgba(239,68,68,.7); }
.badge.ok  b{ color: var(--green); }
.badge.off b{ color: var(--yellow); }
.badge.err b{ color: var(--red); }

/* ------------------------------ buttons ----------------------------- */
.btn{
  font:inherit; color:var(--txt); background: var(--panel-2);
  border:1px solid var(--line); border-radius:9px;
  padding:9px 15px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:8px;
}
a.btn{ text-decoration:none; }   /* Topbar-Links nicht unterstreichen */
.btn:hover{ border-color:#2f4256; background:#1b2837; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.primary{
  background: linear-gradient(180deg, #1e6f66, #17564f);
  border-color:#2b8a7d; color:#eafffb; font-weight:600;
}
.btn.primary:hover{ background: linear-gradient(180deg, #238376, #1a6158); }
.btn.ghost{ background:transparent; }
.btn.icon{ padding:8px 13px; font-size:15px; min-width:44px; justify-content:center; }
.btn.busy .btn-label::after{ content:" …"; }
.btn.active{ border-color:var(--accent); color:var(--accent); }

/* --------------------------- layout blocks -------------------------- */
#main{ max-width:1760px; margin:0 auto; padding:18px 20px 40px; display:flex; flex-direction:column; gap:16px; }

.panel{
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px 18px;
}
.panel h2{ font-size:15px; }
.panel-sub{ margin:3px 0 12px; color:var(--faint); font-size:12px; }

/* ------------------------------ notices ----------------------------- */
.notice{ border-radius:10px; padding:11px 14px; font-size:13px; border:1px solid; }
.notice.warn{ background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.4); color:#fcd9a0; }
.notice.error{ background:rgba(239,68,68,.09); border-color:rgba(239,68,68,.45); color:#ffc4c4; }

/* ----------------------------- controls ----------------------------- */
/* grouped settings: prominent run button + Nachfrage / Szenerie / Experten */
.controls{ display:flex; flex-direction:column; gap:14px; }
.sim-row{ display:flex; align-items:center; gap:12px; }
.sim-run{ align-self:flex-start; font-size:15px; padding:12px 34px; border-radius:10px; box-shadow:0 4px 18px rgba(45,212,191,.22); }
.sim-run.dirty{ box-shadow:0 0 0 2px rgba(245,196,81,.55), 0 4px 18px rgba(245,196,81,.25); }
.run-hint{ color:var(--yellow,#f5c451); font-size:12px; }
.sim-run:hover{ box-shadow:0 4px 22px rgba(45,212,191,.35); }
.sim-run.busy{ opacity:.6; pointer-events:none; }
.ctl-group{
  border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px 14px;
  background:rgba(255,255,255,.012);
}
.ctl-group h3{
  font-size:11.5px; color:var(--muted); margin:0 0 10px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase;
}
.ctl-group h3 .grp-sub, .ctl-group summary .grp-sub{
  color:var(--faint); font-weight:500; text-transform:none; letter-spacing:0; margin-left:8px;
}
.ctl-group .ctl-grid{ display:grid; grid-template-columns:repeat(3, minmax(170px,1fr)); gap:14px; align-items:end; }
.ctl-group.expert summary{
  cursor:pointer; list-style:none; display:flex; align-items:center;
  font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.5px; text-transform:uppercase;
}
.ctl-group.expert summary::-webkit-details-marker{ display:none; }
.ctl-group.expert summary::before{ content:'▸'; color:var(--faint); margin-right:8px; }
.ctl-group.expert[open] summary::before{ content:'▾'; }
.ctl-group.expert .ctl-grid{ margin-top:12px; }
.control{ display:grid; grid-template-columns: 1fr auto; gap:6px 10px; align-items:center; }
.control label{ grid-column:1 / -1; color:var(--muted); font-size:12.5px; font-weight:550; }
.control .desc{ grid-column:1 / -1; font-size:11px; color:var(--faint); line-height:1.35; }
.control output{
  font-family:var(--mono); font-size:13px; color:var(--accent);
  background:var(--panel-2); border:1px solid var(--line); border-radius:7px;
  padding:3px 9px; min-width:52px; text-align:center;
}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:4px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill,50%), #24313f var(--fill,50%), #24313f 100%);
  outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:#e6edf3; border:2px solid var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.5); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:#e6edf3; border:2px solid var(--accent); cursor:pointer;
}
select{
  font:inherit; color:var(--txt); background:var(--panel-2);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; cursor:pointer;
}

/* -------------------------------- KPIs ------------------------------ */
.kpi-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:14px; }
.kpi{
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border:1px solid var(--line); border-radius: var(--radius);
  padding:13px 14px; box-shadow: var(--shadow);
  display:flex; flex-direction:column; gap:9px; min-width:0;
}
.kpi header{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.kpi h3{ font-size:12.5px; color:var(--muted); font-weight:550; }
.kpi .unit{ font-size:11px; color:var(--faint); font-family:var(--mono); }
.kpi-rows{ display:flex; flex-direction:column; gap:6px; }
.kpi .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi .tag{ font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.6px; }
.kpi .row b{ font-family:var(--mono); font-size:16px; font-weight:600; }
.kpi .row.fixed b{ color:#aab6c4; }
.kpi .row.adaptive b{ color:var(--accent); }
/* delta pills: base styling is context-free so table and cards look identical */
.delta{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  padding:2px 8px; border-radius:999px; border:1px solid var(--line);
  display:inline-block;
}
.kpi .delta{ margin-top:auto; align-self:flex-start; }
/* cards with several badges (network: adaptive + green wave) keep them in one row */
.kpi .deltas{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.kpi .deltas .delta{ margin-top:0; }
.delta.good{ color:var(--good); border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08); }
.delta.bad{ color:var(--bad); border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); }
.delta.neutral{ color:var(--muted); }
.delta.mid{ color:var(--yellow); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }

/* Karten-Zeilen: Label | Δ (Zeilenfarbe) | Wert — bester Wert fett */
.kpi .row{ display:grid; grid-template-columns:1fr auto minmax(64px, auto); gap:8px; align-items:baseline; }
.kpi .row b{ justify-self:end; }
.kpi .row.fixed b, .kpi .row.pol-fixed b{ color:#aab6c4; }
.kpi .row.adaptive b, .kpi .row.pol-adaptive b{ color:var(--accent); }
.kpi .row.pol-coordinated b{ color:#f5c451; }
.kpi .row.pol-tuned b{ color:#a78bfa; }
.kpi .row.fixed .dlt{ color:#8d9aad; }
.kpi .row.adaptive .dlt{ color:var(--accent); opacity:.85; }

/* ------------- KPI panel: cards ⇄ compact matrix table ----------------- */
.kpi-panel{ }
.kpi-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.kpi-head h2{ font-size:15px; }
.kpi-view{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.kpi-view-btn{
  font:inherit; font-size:12px; color:var(--muted); background:var(--panel-2);
  border:0; border-right:1px solid var(--line); padding:6px 12px; cursor:pointer;
}
.kpi-view-btn:last-child{ border-right:0; }
.kpi-view-btn:hover{ color:var(--txt); }
.kpi-view-btn.active{ background:rgba(45,212,191,.14); color:var(--accent); }
.kpi-table-wrap{ overflow-x:auto; }
table.kpi-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.kpi-table th, table.kpi-table td{ padding:9px 12px; border-bottom:1px solid var(--line-soft); text-align:right; }
table.kpi-table tr:last-child th, table.kpi-table tr:last-child td{ border-bottom:0; }
table.kpi-table th:first-child, table.kpi-table td:first-child{ text-align:left; }
table.kpi-table thead th{
  color:var(--muted); font-weight:550; font-size:12px; white-space:nowrap;
}
table.kpi-table thead th.sub{
  color:var(--faint); font-size:10.5px; font-weight:500; padding-top:0; padding-bottom:6px;
}
table.kpi-table td.dltc{
  font-family:var(--mono); font-size:11.5px; padding-left:4px; white-space:nowrap;
}
table.kpi-table tr.pol-fixed td.dltc{ color:#8d9aad; }
table.kpi-table tr.pol-adaptive td.dltc{ color:var(--accent); }
table.kpi-table tr.pol-coordinated td.dltc{ color:#f5c451; }
table.kpi-table tr.pol-tuned td.dltc{ color:#a78bfa; }
table.kpi-table thead th .unit{ color:var(--faint); font-family:var(--mono); font-size:10.5px; }
table.kpi-table tbody th.pol{ color:var(--muted); font-weight:550; font-size:12.5px; white-space:nowrap; cursor:help; }
table.kpi-table tbody th.pol-adaptive{ color:var(--accent); }
table.kpi-table td.v{ font-family:var(--mono); font-size:13.5px; }
table.kpi-table td.v.adaptive-v{ color:var(--accent); }
table.kpi-table td.d{ white-space:nowrap; }
/* Strategie-Wertfarben — identisch zur Kartenansicht */
table.kpi-table tr.pol-fixed td.v{ color:#aab6c4; }
table.kpi-table tr.pol-adaptive td.v{ color:var(--accent); }
/* Koord./Tuned-Zeilen (nur Netzwerk) */
table.kpi-table tr.pol-coordinated td.v{ color:#f5c451; }
table.kpi-table tr.pol-tuned td.v{ color:#a78bfa; }
/* Δ gegenüber Fixed-Time: schlichte kleine Zahl statt Pill */
.dlt{
  font-style:normal; font-family:var(--mono); font-size:11px;
  color:var(--muted); white-space:nowrap;
}
.dlt.good{ color:var(--good); }
.dlt.mid{ color:var(--yellow); }
.dlt.bad{ color:var(--bad); }
/* Karten: Wert + Δ übereinander rechtsbündig */
.kpi .val{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.3; }
/* Gewinner je Kennzahl: fettester Wert der Spalte (Tabelle + Karten) */
table.kpi-table .best{ font-weight:800; }
table.kpi-table td.v.best{ text-shadow:0 0 10px rgba(230,237,243,.22); }
.kpi .row b.best{ font-weight:800; text-shadow:0 0 12px rgba(45,212,191,.35); }

/* ------------------------------ viewer ------------------------------ */
.viewer{ padding-bottom:14px; }
/* eine Zeile, kein Springen: Uhren/Labels sind kurz genug gehalten */
.viewer-bar{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; margin-bottom:12px; overflow:hidden; }
.transport{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.readouts{ display:flex; gap:8px; margin-left:auto; flex:0 0 auto; }
.speeds{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.speed-btn{
  font:inherit; font-family:var(--mono); font-size:12px; color:var(--muted);
  background:var(--panel-2); border:0; border-right:1px solid var(--line);
  padding:8px 10px; cursor:pointer;
}
.speed-btn:last-child{ border-right:0; }
.speed-btn:hover{ color:var(--txt); }
.speed-btn.active{ background: rgba(45,212,191,.14); color:var(--accent); }

.modes{ display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-left:auto; }
.mode-btn{
  font:inherit; font-size:12.5px; color:var(--muted); background:var(--panel-2);
  border:0; border-right:1px solid var(--line); padding:8px 14px; cursor:pointer;
}
.mode-btn:last-child{ border-right:0; }
.mode-btn:hover{ color:var(--txt); }
.mode-btn.active{ background: rgba(56,189,248,.14); color:var(--accent-2); font-weight:600; }

/* Strategie-Toggles (Viewer) + Protokoll-Reiter */
.transport .modes{ margin-left:2px; }
.pdot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; }
.policy-modes .pol-btn:disabled{ opacity:.35; cursor:not-allowed; }
.dec-tabs{ margin-left:0; margin-bottom:12px; }

/* Verlauf-Panel: Metrik-Chips + Zoom-Zeile */
.chart-tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.chart-metrics{ margin-left:0; }
.chart-metrics .met-btn{ font-size:11.5px; padding:6px 11px; }
.zoom-row{ display:flex; align-items:center; gap:6px; }
.zoom-row .k{ color:var(--faint); font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; }
.zoom-row input[type=time]{
  font:inherit; font-size:12px; color:var(--txt); background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; padding:4px 6px; color-scheme:dark;
}
body[data-theme="light"] .zoom-row input[type=time]{ color-scheme:light; }
.zoom-row .btn{ font-size:11.5px; padding:4px 10px; }

/* Frag-SignalFlow: Vorschlags-Chips */
.ask-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.ask-chip{
  font:inherit; font-size:11.5px; color:var(--muted); background:var(--panel-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer;
  text-align:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ask-chip:hover{ color:var(--accent-2); border-color:rgba(56,189,248,.5); }
/* lokal berechnete Antwort (kein LLM beteiligt) */
.source-pill.local{ color:#7fd1a8; border-color:rgba(127,209,168,.45); background:rgba(127,209,168,.08); }

.readouts{ display:flex; gap:8px; }
.pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}
.pill .k{ color:var(--faint); text-transform:uppercase; font-size:10.5px; letter-spacing:.7px; }
.pill b{ color:var(--txt); }

.canvas-wrap{ display:grid; grid-template-columns:1fr; gap:14px; }
.canvas-wrap[data-n="2"], .canvas-wrap[data-n="3"], .canvas-wrap[data-n="4"]{
  grid-template-columns:1fr 1fr;
}
.canvas-cell{
  position:relative; border:1px solid var(--line-soft); border-radius:10px;
  background:var(--cell-bg, #0a0e13); overflow:hidden; aspect-ratio: 5 / 4;
}
.canvas-cell canvas{ display:block; width:100%; height:100%; }
.canvas-title{
  position:absolute; top:10px; left:12px; z-index:2;
  font-size:11.5px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted);
  background:rgba(9,13,18,.7); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
}
#cell-fixed .canvas-title{ color:#aab6c4; }
#cell-adaptive .canvas-title{ color:var(--accent); }
#cell-coordinated .canvas-title{ color:#f5c451; }
#cell-tuned .canvas-title{ color:#a78bfa; }

.scrubber{ margin-top:12px; }
.scrubber input[type=range]{
  background: linear-gradient(90deg, var(--accent-2) 0%, var(--accent-2) var(--fill,0%), #24313f var(--fill,0%), #24313f 100%);
}
.legend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; color:var(--faint); font-size:11.5px; }
.legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

/* ------------------------------ charts ------------------------------ */
.charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-panel canvas{ display:block; width:100%; height:280px; }

/* ------------------------- bottom two panels ------------------------ */
.bottom{ display:grid; grid-template-columns: 1.15fr 1fr; gap:16px; }
/* außen block: der Adaptiv-View darf die volle Kartenbreite nutzen — die
   zweite Grid-Spur gehört allein den (ausgeblendeten) Plan-Karten */
.decisions-body{ display:block; }
.dec-view{ display:grid; grid-template-columns: 1.4fr 1fr; gap:14px; align-items:stretch; width:100%; }
/* Plan-Karten (Fixed/Koord./Tuned) nutzen die volle Kartenbreite */
.dec-view .plan-box, .decisions-body .plan-box{ grid-column: 1 / -1; }
.dec-view .dec-list-col{ grid-column:1; min-width:0; position:relative; }
/* Scrollbalken unsichtbar, Wheel-Scroll bleibt; Fade deutet mehr Inhalt an */
.dec-list-col.scrollable::after{
  content:''; position:absolute; left:10px; right:1px; bottom:0; height:30px;
  background:linear-gradient(180deg, transparent, var(--panel));
  pointer-events:none;
}
.decision-list{ scrollbar-width:none; -ms-overflow-style:none; }
.decision-list::-webkit-scrollbar{ width:0; height:0; display:none; }
.dec-view .pressure-box{ grid-column:2; display:flex; flex-direction:column; }
.dec-view .adaptive-stats{ margin-top:auto; padding-top:14px; }
/* Protokoll-Legende: Umschalt-Kategorien mit echten Anzahlungen */
.decision-legend{ display:flex; flex-wrap:wrap; gap:6px 12px; margin:0 0 10px; align-items:center; }
.decision-legend .lg{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.decision-legend .lg.faint{ color:var(--faint); font-size:10.5px; }
.decision-legend .lg i{ width:9px; height:12px; border-radius:3px; display:inline-block; }
.decision-legend .lg i.cat-pressure{ background:var(--accent); }
.decision-legend .lg i.cat-empty{ background:var(--yellow); }
.decision-legend .lg i.cat-max{ background:var(--red); }
.decision-legend .lg i.cat-tsp{ background:var(--accent-2); }
/* Kategorie-Streifen + Chip je Decision-Item */
.decision-item{ position:relative; }
.decision-item::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px; width:3px;
  border-radius:2px; background:var(--faint); opacity:.7;
}
.decision-item.cat-pressure::before{ background:var(--accent); opacity:1; }
.decision-item.cat-empty::before{ background:var(--yellow); opacity:1; }
.decision-item.cat-max::before{ background:var(--red); opacity:1; }
.decision-item.cat-tsp::before{ background:var(--accent-2); opacity:1; }
.decision-item .cat{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.6px;
  padding:2px 8px; border-radius:999px; border:1px solid; margin-left:auto;
}
.decision-item .cat.cat-pressure{ color:var(--accent); border-color:rgba(45,212,191,.4); }
.decision-item .cat.cat-empty{ color:var(--yellow); border-color:rgba(245,158,11,.4); }
.decision-item .cat.cat-max{ color:var(--red); border-color:rgba(239,68,68,.4); }
.decision-item .cat.cat-tsp{ color:var(--accent-2); border-color:rgba(56,189,248,.4); }
/* Plan-Karte (Fixed / Koord. / Tuned im Protokoll-Reiter) */
.plan-box{ padding:2px 0; }
.plan-box[hidden]{ display:none; }
.plan-box .plan-line{ font-size:12.5px; color:var(--muted); margin:0 0 10px; }
.plan-box .plan-line b{ color:var(--txt); }
.plan-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.plan-table th, .plan-table td{ text-align:left; padding:7px 10px; border-bottom:1px solid var(--line-soft); }
.plan-table th{
  color:var(--faint); font-weight:550; font-size:11px;
  text-transform:uppercase; letter-spacing:.5px;
}
.plan-table td{ font-family:var(--mono); color:var(--txt); }
.plan-src{ font-size:11.5px; color:var(--faint); margin:10px 0 0; }
.plan-why{
  font-size:12px; color:var(--muted); line-height:1.5;
  margin:10px 0 0; padding:10px 12px;
  border:1px solid var(--line-soft); border-left:3px solid #a78bfa; border-radius:8px;
}
.plan-why b{ color:var(--txt); }
/* Adaptive-Statistik unter der Drucktabelle */
.adaptive-stats{ margin-top:14px; }
.dec-view .adaptive-stats{ margin-top:auto; }
.adaptive-stats h3{ font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:550; }
.stats-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.stats-table td{ padding:6px 8px; border-bottom:1px solid var(--line-soft); color:var(--muted); }
.stats-table td:last-child{ text-align:right; font-family:var(--mono); color:var(--txt); }
.stats-table tr:last-child td{ border-bottom:0; }
.decision-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:440px; overflow:auto; }
.foot .foot-note{ display:block; margin-top:4px; color:var(--faint); font-size:11.5px; }
.foot .foot-note a{ color:var(--muted); }
.decision-item{
  border:1px solid var(--line-soft); border-radius:8px; padding:7px 10px 7px 14px;
  background:var(--panel-2); cursor:pointer; transition:.15s;
}
.decision-item:hover{ border-color:#2f4256; }
.decision-item .head{ margin-bottom:2px; }
.decision-item .head .t{ background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.25); border-radius:6px; padding:1px 7px; }
.decision-item .swap{ font-weight:600; font-size:11.5px; }
.decision-item .why{ font-size:11.5px; line-height:1.4; }
.decision-item.active{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(45,212,191,.35) inset; }
.decision-item .head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
.decision-item .t{ font-family:var(--mono); font-size:11.5px; color:var(--accent-2); }
.decision-item .swap{ font-family:var(--mono); font-size:12px; color:var(--txt); }
.decision-item .swap .arrow{ color:var(--faint); margin:0 4px; }
.decision-item .why{ font-size:12px; color:var(--muted); }
.empty{ color:var(--faint); font-size:12.5px; padding:8px 2px; }

.pressure-box h3{ font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:550; }
table.pressures{ width:100%; border-collapse:collapse; font-size:12px; }
table.pressures th, table.pressures td{ padding:6px 6px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.pressures th{ color:var(--faint); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
table.pressures td.p{ font-family:var(--mono); text-align:right; }
table.pressures td.w{ font-family:var(--mono); color:var(--muted); text-align:right; }
table.pressures .bar{
  height:8px; border-radius:4px; opacity:.85;
  background:linear-gradient(90deg, rgba(45,212,191,.45), var(--accent));
}

/* -------------------------------- ask ------------------------------ */
.ask-row{ display:flex; gap:9px; }
.ask-row input{
  flex:1; font:inherit; color:var(--txt); background:var(--panel-2);
  border:1px solid var(--line); border-radius:9px; padding:10px 12px; outline:none;
}
.ask-row input:focus{ border-color:var(--accent-2); }
.ask-actions{ display:flex; gap:9px; margin-top:10px; }
.answer-box{ margin-top:12px; border:1px solid var(--line-soft); border-radius:10px; background:#0c1219; padding:12px 14px; }
.answer-head{ display:flex; margin-bottom:6px; }
.source-pill{
  font-size:11px; font-family:var(--mono); color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:2px 10px;
}
.source-pill.featherless{ color:var(--green); border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08); }
.source-pill.fallback{ color:var(--yellow); border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.answer-text{ margin:0; font-size:13.5px; color:#d7e0ea; white-space:pre-wrap; }

/* Chat: Verlauf mit Follow-up-Kontext (Frage rechts, Antwort links) */
.chat-box{
  display:flex; flex-direction:column; gap:8px;
  max-height:320px; overflow:auto; margin-top:10px; padding-right:2px;
  scrollbar-width:thin;
}
.chat-box::-webkit-scrollbar{ width:6px; }
.chat-box::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.chat-box .chat-hint{ color:var(--faint); font-size:12px; text-align:center; margin:8px 0; }
.msg{
  border:1px solid var(--line-soft); border-radius:10px; padding:8px 11px;
  font-size:13px; line-height:1.45; white-space:pre-wrap; word-break:break-word;
}
.msg.user{
  background:rgba(56,189,248,.08); border-color:rgba(56,189,248,.35);
  align-self:flex-end; max-width:85%; color:var(--txt); font-weight:550;
}
.msg.bot{ background:#0c1219; align-self:stretch; color:#d7e0ea; }
body[data-theme="light"] .msg.bot{ background:#f4f7fb; color:var(--txt); }
.msg.chat-thinking{ color:var(--faint); font-style:italic; }
.answer-head{ justify-content:space-between; }
#ask-clear{ font-size:11.5px; padding:3px 9px; }

/* collapsible agent tool trace (above the answer) */
.ask-mode{ margin:12px 0 0; }
.ask-steps{ margin-top:12px; border:1px solid var(--line-soft); border-radius:10px;
  background:#0c1219; padding:8px 12px; }
.ask-steps summary{ cursor:pointer; font-size:12px; color:var(--muted); user-select:none; }
.ask-steps summary:hover{ color:var(--txt); }
.ask-steps-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.ask-step{ border:1px solid var(--line-soft); border-radius:8px; padding:7px 9px;
  background:var(--panel-2); }
.ask-step-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ask-step-tool{ font-family:var(--mono); font-size:11px; color:var(--accent);
  border:1px solid rgba(45,212,191,.35); border-radius:999px; padding:1px 8px; }
.ask-step-head code{ font-size:11px; color:var(--muted); word-break:break-all; }
.ask-step-digest{ margin-top:4px; font-size:12px; color:#c4d0dc; }
.ask-step.step-error{ border-color:rgba(239,68,68,.4); }
.ask-step.step-error .ask-step-digest{ color:var(--red); }
.ask-step-note{ font-size:11.5px; color:var(--yellow); }

/* ------------------------- dashboard split -------------------------- */
/* Simulation flow on the left, "Frag SignalFlow" as a sticky companion on
   the right (junction page). The network page mirrors this via .net-top. */
.dash{ display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:16px; align-items:start; }
.dash-main{ display:flex; flex-direction:column; gap:16px; min-width:0; }
.dash-side{ position:sticky; top:74px; }
@media (max-width:1400px){
  .dash{ grid-template-columns:1fr; }
  .dash-side{ position:static; }
}

/* ------------------------------ footer ----------------------------- */
.foot{ color:var(--faint); font-size:11.5px; text-align:center; padding:6px 0 0; font-family:var(--mono); }

/* --------------------------- loading bar --------------------------- */
.loading-bar{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:50;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow:0 0 12px rgba(45,212,191,.7);
  transition: width .25s ease, opacity .4s ease;
}
.loading-bar.running{ width:70%; }
.loading-bar.done{ width:100%; opacity:0; }

/* ---------------------------- responsive --------------------------- */
@media (max-width:1100px){
  .ctl-group .ctl-grid{ grid-template-columns: repeat(2, 1fr); }
  .kpi-grid{ grid-template-columns: repeat(3, 1fr); }
  .charts{ grid-template-columns:1fr; }
  .bottom{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .ctl-group .ctl-grid{ grid-template-columns: 1fr; }
  .kpi-grid{ grid-template-columns: repeat(2, 1fr); }
  .canvas-wrap[data-n="2"], .canvas-wrap[data-n="3"], .canvas-wrap[data-n="4"]{
    grid-template-columns:1fr;
  }
  .decisions-body, .dec-view{ grid-template-columns:1fr; }
  .modes{ margin-left:0; }
  .brand-text h1{ font-size:18px; }
}

/* Tageszeit-Fenster (junction): wählt Szenario + Last automatisch */
.time-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; grid-column:1 / -1; }
.time-row select, .time-row input[type=time]{
  font:inherit; font-size:12.5px; color:var(--txt); background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; padding:5px 7px;
  color-scheme:dark;
}
.time-sep{ color:var(--faint); }
.time-hol{ display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); white-space:nowrap; }
.time-hint{ grid-column:1 / -1; font-size:11.5px; color:var(--accent); font-family:var(--mono); }

/* scenario preset buttons in the control bar */
.presets{ display:flex; flex-wrap:wrap; gap:6px; }
.presets .preset{ font-size:12px; padding:4px 9px; }
.presets .preset.active{ border-color:var(--accent,#38bdf8); color:var(--accent,#38bdf8); }