/* Colour-blind-safe palette: every state also carries a non-colour cue (icon / dash). */
:root {
  --bg: #0f1420;
  --panel: #161d2e;
  --ink: #e8edf7;
  --muted: #93a0b8;
  --green: #2e9e5b;
  --amber: #d68a1a;
  --red: #e0463a;
  --line: #3a4666;
  --ok-contrast: #06210f;
  --accent: #4c8dff;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f4f6fb; --panel: #ffffff; --ink: #15203a; --muted: #5a6783; --line: #c4cce0; --ok-contrast: #06210f; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { padding: 1rem 1.5rem 3rem; }

.topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.topbar h1 { font-size: 1.25rem; margin: 0; }
.topbar h1 small { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.status { display: flex; gap: 0.75rem; align-items: center; }

.stale { display: inline-flex; gap: 0.4rem; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.stale .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--green); }
.stale[data-stale="true"] { border-color: var(--amber); }
.stale[data-stale="true"] .dot { background: var(--amber); }
.stale[data-stale="true"] > span:nth-child(2)::before { content: "stale "; }
.stale .age { color: var(--muted); }
.idle-banner:empty { display: none; }
.idle-banner { color: var(--amber); font-weight: 600; }

main { margin-top: 1rem; }
.topology { width: 100%; max-width: 1000px; height: auto; display: block; }
.topology[data-idle="true"] { opacity: 0.55; }

.node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.node text { fill: var(--ink); text-anchor: middle; font-size: 13px; }
.node .title { font-weight: 700; font-size: 15px; }
.node .big { font-size: 22px; font-weight: 700; }
.node .cap { fill: var(--muted); font-size: 11px; }
.node .muted { fill: var(--muted); }
.node { transition: opacity 0.2s; }

.health-badge { fill: var(--green); stroke: rgba(0, 0, 0, 0.25); }
.health-icon { font-size: 12px; font-weight: 800; fill: var(--ok-contrast); }
.bank[data-health="degraded"] .health-badge { fill: var(--amber); }
.bank[data-health="degraded"] rect { stroke: var(--amber); }
.bank[data-health="unreachable"] .health-badge { fill: var(--red); }
.bank[data-health="unreachable"] rect { stroke: var(--red); stroke-dasharray: 6 4; }

.breaker { font-weight: 800; letter-spacing: 0.04em; fill: var(--muted); }
.breaker.throttling { fill: var(--amber); }
.breaker.halted { fill: var(--red); }
.bank[data-breaker="throttling"] .breaker, .bank[data-breaker="halted"] .breaker { font-size: 14px; }

/* ---- per-bank on/off toggle (FR-TS-124) ---- */
.node.bank { cursor: pointer; }
.node.bank:hover rect { stroke: var(--accent); }
.bank-toggle { font-size: 11px; font-weight: 800; letter-spacing: 0.05em; fill: var(--green); }
.bank[data-enabled="false"] .bank-toggle { fill: var(--muted); }
.bank[data-enabled="false"] { opacity: 0.4; }
.bank[data-enabled="false"] rect { stroke-dasharray: 4 4; }

.edge { fill: none; stroke: var(--green); stroke-linecap: round; }
.edge[data-band="amber"] { stroke: var(--amber); }
.edge[data-band="red"] { stroke: var(--red); }
.arrow { fill: var(--line); }

.lanes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; align-items: center; }
.lanes-hint { color: var(--muted); font-size: 0.72rem; margin-right: 0.3rem; }
.lane { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font: inherit; }
button.lane { cursor: pointer; }
button.lane:hover { border-color: var(--accent); }
.lane .count { font-weight: 700; }
.lane[data-active="true"] { color: var(--ink); border-color: var(--green); }
/* a disabled transaction type: dimmed, name struck through */
.lane[data-enabled="false"] { opacity: 0.45; }
.lane[data-enabled="false"] .name { text-decoration: line-through; }
.lane[data-enabled="false"][data-active="true"] { border-color: var(--line); }


.legend { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 1rem; color: var(--muted); }
.legend ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.legend li { margin: 0.2rem 0; }
.swatch { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--ok-contrast); vertical-align: middle; }
.swatch.h-healthy { background: var(--green); }
.swatch.h-degraded { background: var(--amber); }
.swatch.h-unreachable { background: var(--red); }
.line { display: inline-block; width: 2rem; height: 0; border-top: 4px solid var(--green); vertical-align: middle; }
.line.amber { border-color: var(--amber); border-top-style: dashed; }
.line.red { border-color: var(--red); border-top-style: dashed; }

/* ---- run phase pill ---- */
.phase { font-weight: 800; letter-spacing: 0.04em; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); }
.control[data-phase="running"] ~ * .phase, .phase { }
[data-control][data-phase="running"] { border-color: var(--green); }
[data-control][data-phase="paused"] { border-color: var(--amber); }
[data-control][data-phase="halted"] { border-color: var(--red); }
.topbar .phase { color: var(--ink); }

/* ---- control panel ---- */
.control { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 0.9rem; padding: 0.85rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.control .group { display: flex; flex-direction: column; gap: 0.35rem; }
.control .buttons { flex-direction: row; align-items: center; gap: 0.5rem; }
.control .lbl, .control label { color: var(--muted); font-size: 0.82rem; }
.control .slider { min-width: 230px; }
.control .slider label { color: var(--ink); }
.control .slider strong { color: var(--accent); }
.control .hint { color: var(--muted); font-size: 0.72rem; }
.control input[type="range"] { width: 100%; accent-color: var(--accent); }
.control .model label { color: var(--ink); display: inline-flex; gap: 0.3rem; align-items: center; margin-right: 0.6rem; }
.control .elapsed { color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }

.btn { cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 0.4rem 0.8rem; border-radius: 7px; font-weight: 600; font-size: 0.9rem; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger:hover:not(:disabled) { border-color: var(--red); }

.chip { cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--muted); padding: 0.28rem 0.6rem; border-radius: 999px; font-size: 0.8rem; }
.chip[data-on="true"] { color: #fff; background: var(--amber); border-color: var(--amber); }
.chip.clear { color: var(--muted); }
.faults { flex-direction: row; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* ---- animated flow packets ---- */
.flow .packet { fill: var(--accent); opacity: 0; transition: opacity 0.3s; }
.flow[data-active="true"] .packet { opacity: 0.95; }
.flow[data-band="amber"] .packet { fill: var(--amber); }
.flow[data-band="red"] .packet { fill: var(--red); }
.topology[data-idle="true"] .flow .packet { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .flow .packet { opacity: 0; }
}

/* ---- source badge ---- */
.src { font-weight: 800; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
[data-control][data-source="live"] ~ * .src, .topbar .src { }
.topbar .src { background: var(--panel); }
[data-control][data-source="live"] { border-left: 4px solid var(--red); }
/* hide the fault chips in live mode (faults are a simulated-only concept) */
[data-control][data-source="live"] .faults { display: none; }

/* ---- feed + conservation panels ---- */
.panels { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 240px; gap: 1rem; margin: 1rem 0; align-items: start; }
@media (max-width: 1080px) { .panels { grid-template-columns: minmax(0, 1fr) 240px; } .inspectorwrap { grid-column: 1 / -1; } }
@media (max-width: 820px) { .panels { grid-template-columns: 1fr; } .inspectorwrap { grid-column: auto; } }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.panel-head h2 { font-size: 0.95rem; margin: 0; }
.panel-head .hint { color: var(--muted); font-size: 0.72rem; }
.panel-head code { background: var(--bg); padding: 0 0.25rem; border-radius: 3px; }
.feed-pause { font-size: 0.72rem; padding: 0.2rem 0.5rem; }

.feedwrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.78rem; }
.feed .ev { border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); cursor: pointer; }
.feed .ev-row { display: grid; grid-template-columns: 52px 50px 1fr 52px; gap: 0.5rem; align-items: center; padding: 0.22rem 0.35rem; border-left: 3px solid transparent; }
.feed .ev:hover .ev-row { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.feed .ev[data-selected] .ev-row { background: color-mix(in srgb, var(--accent) 16%, transparent); border-left-color: var(--accent); }
.feed .ev:first-child .ev-row { animation: feedin 0.4s ease; }
@keyframes feedin { from { background: color-mix(in srgb, var(--accent) 25%, transparent); } to { background: transparent; } }
.feed .bank { font-weight: 700; }
.feed .b-evaris_es { color: var(--green); }
.feed .b-evairi_com { color: var(--accent); }
.feed .desc { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .lat { color: var(--muted); text-align: right; }
.feed .oc { font-weight: 700; }
.feed .ev[data-outcome="client_error"] .oc { color: var(--amber); }
.feed .ev[data-outcome="server_error"] .oc { color: var(--red); }
.feed .ev[data-outcome="transient_error"] .oc { color: var(--amber); }
.feed .ev[data-outcome="success"] .oc { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .feed .ev:first-child { animation: none; } }

/* ---- pinned request inspector (FR-TS-123) ---- */
.inspectorwrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; }
.inspector { min-height: 120px; }
.inspector-empty { color: var(--muted); font-size: 0.8rem; }
.inspector-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.4rem; }
.inspector-desc { font-weight: 600; font-size: 0.85rem; }
.inspector-cid { color: var(--muted); font-size: 0.7rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-all; }
.inspector-pre { margin: 0; padding: 0.5rem 0.6rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.72rem; max-height: 320px; overflow: auto; }

.conservation { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem 1rem; }
.conservation .bal { display: flex; justify-content: space-between; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
.conservation .bal span { color: var(--muted); font-size: 0.82rem; }
.conservation .bal strong { font-variant-numeric: tabular-nums; }
.conservation .bal.total strong { font-size: 1.05rem; }
.conservation .bal.drift[data-drift="ok"] strong { color: var(--green); }
.conservation .bal.drift[data-drift="moved"] strong { color: var(--amber); }
.conservation .hint { color: var(--muted); font-size: 0.72rem; margin: 0.5rem 0 0; }