/* Storm Lab — Kai's retry-storm / metastable-failure lab.
   Self-contained stylesheet (Kai's CSP forbids inline styles). Palette keys
   off Kai's landing tokens; chart series colors are the validated dark-mode
   categorical set (see crates/stormlab-web + the dataviz palette notes). */

:root {
  --ink: #070d16;
  --ink-2: #0b1420;
  --panel: #101a28;
  --line: #26384f;
  --muted: #93a3b8;
  --text: #e5edf7;
  --mint: #60a5fa;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --mono: "DM Mono", monospace;
  --sans: Inter, system-ui, sans-serif;
  /* Validated categorical series colors (dark surface #101a28). */
  --s-offered: #3987e5;
  --s-goodput: #199e70;
  --s-wasted: #d95926;
  --s-4: #c98500;
  --s-5: #d55181;
  /* Reserved status colors. */
  --st-bad: #e66767;
  --st-warn: #c98500;
  --st-good: #199e70;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { margin-top: 0; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---- nav ---- */
.nav { border-bottom: 1px solid var(--line); background: rgba(7, 13, 22, 0.92); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); }
.nav-in { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.kai-mark { width: 34px; height: 34px; }
.kai-mark .kai-ship { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linejoin: round; }
.kai-mark .kai-mast, .kai-mark .kai-wave { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.brand-lockup { display: grid; line-height: 1; }
.brand-lockup b { font-size: 21px; letter-spacing: -0.5px; }
.brand-lockup small { font-size: 9px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--muted); margin-top: 5px; }
.nav-links { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.nav-links a { text-decoration: none; color: #c7d1cc; }
.nav-links a:hover { color: #fff; }
.nav-links a.cta { border: 1px solid var(--line); border-radius: 3px; padding: 9px 14px; font-weight: 600; }
.nav-links a.cta:hover { border-color: var(--mint); }

/* ---- hero ---- */
.hero { padding: 54px 0 10px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--mint); display: flex; align-items: center; gap: 10px; }
.eyebrow > span { display: inline-block; width: 26px; height: 1px; background: var(--mint); }
.hero h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -1.2px; margin: 14px 0 12px; }
.hero p { color: var(--muted); max-width: 760px; line-height: 1.55; margin-bottom: 8px; }
.hero .fine { font-size: 12.5px; font-family: var(--mono); color: #6b7a8f; }
.hero .fine a { color: var(--muted); }

/* ---- controls ---- */
.lab { padding: 26px 0 8px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); }
.control-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin-right: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: transparent; border-radius: 20px; padding: 6px 13px; font-size: 12.5px; color: #c7d1cc; transition: 0.15s ease; }
.chip:hover { border-color: var(--mint); color: #fff; }
.chip[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: #071a33; font-weight: 600; }
.toggle { border: 1px solid var(--line); background: transparent; border-radius: 3px; padding: 7px 12px; font-size: 12.5px; color: #c7d1cc; display: inline-flex; gap: 7px; align-items: center; }
.toggle i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.toggle[aria-pressed="true"] { border-color: var(--mint); color: #fff; }
.toggle[aria-pressed="true"] i { background: var(--mint); box-shadow: 0 0 8px rgba(96, 165, 250, 0.6); }
.knob { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.knob input[type="range"] { width: 110px; accent-color: var(--mint); }
.knob output { font-family: var(--mono); color: var(--text); min-width: 4ch; text-align: right; }
.knob input[type="number"] { width: 74px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 5px 8px; font-family: var(--mono); font-size: 12.5px; }
.spacer { flex: 1; }
.runmeta { font-family: var(--mono); font-size: 11px; color: #6b7a8f; }

/* ---- stats ---- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.stat { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 13px 15px 11px; }
.stat .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); }
.stat .v { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .u { font-size: 12px; color: var(--muted); font-weight: 400; }
.stat.verdict .v { font-size: 19px; display: inline-flex; align-items: center; gap: 8px; }
.stat.verdict .v i { width: 10px; height: 10px; border-radius: 50%; }
.verdict-metastable .v { color: var(--st-bad); }
.verdict-metastable .v i { background: var(--st-bad); box-shadow: 0 0 10px rgba(230, 103, 103, 0.7); }
.verdict-degraded .v { color: var(--st-warn); }
.verdict-degraded .v i { background: var(--st-warn); }
.verdict-recovered .v { color: var(--st-good); }
.verdict-recovered .v i { background: var(--st-good); }
.verdict-steady .v { color: var(--text); }
.verdict-steady .v i { background: var(--muted); }

/* ---- panels: graph + charts ---- */
.panels { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(380px, 7fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (max-width: 940px) { .panels { grid-template-columns: 1fr; } }
.panel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 14px 16px; min-width: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.panel-head h3 { font-size: 13.5px; margin: 0; letter-spacing: 0.2px; }
.panel-head .sub { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.legend li { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.legend { padding-left: 0; margin-top: 0; }
.legend i { width: 9px; height: 9px; border-radius: 2px; }
.legend .val { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.chart + .chart { margin-top: 14px; }

/* Chart internals (SVG classes; presentation attributes stay off inline styles). */
.grid-line { stroke: #1b2a3d; stroke-width: 1; }
.axis-text { fill: #6b7a8f; font-family: "DM Mono", monospace; font-size: 10px; }
.fault-band { fill: rgba(230, 103, 103, 0.07); }
.fault-edge { stroke: rgba(230, 103, 103, 0.45); stroke-width: 1; stroke-dasharray: 3 3; }
.series { fill: none; stroke-width: 2; stroke-linejoin: round; }
.scrub-line { stroke: #e5edf7; stroke-width: 1; opacity: 0.65; }
.scrub-halo { fill: rgba(229, 237, 247, 0.06); }

/* Categorical slots (validated order: blue, orange, aqua, yellow, magenta).
   Series identity: offered=cat1, wasted=cat2, goodput=cat3; node i → cat(i+1). */
.stroke-cat1 { stroke: #3987e5; }
.stroke-cat2 { stroke: #d95926; }
.stroke-cat3 { stroke: #199e70; }
.stroke-cat4 { stroke: #c98500; }
.stroke-cat5 { stroke: #d55181; }
.fill-cat1 { fill: #3987e5; }
.fill-cat2 { fill: #d95926; }
.fill-cat3 { fill: #199e70; }
.fill-cat4 { fill: #c98500; }
.fill-cat5 { fill: #d55181; }
.sw-cat1 { background: #3987e5; }
.sw-cat2 { background: #d95926; }
.sw-cat3 { background: #199e70; }
.sw-cat4 { background: #c98500; }
.sw-cat5 { background: #d55181; }

/* ---- topology graph ---- */
.graph-box svg { display: block; width: 100%; height: auto; }
.g-node-box { fill: #16233699; stroke: var(--line); stroke-width: 1.2; rx: 6; }
.g-node-dead .g-node-box { stroke: var(--st-bad); fill: rgba(230, 103, 103, 0.10); }
.g-node-name { fill: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 13px; font-weight: 600; }
.g-node-sub { fill: #93a3b8; font-family: "DM Mono", monospace; font-size: 9.5px; }
.g-dead-tag { fill: var(--st-bad); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 1px; }
.g-queue-track { fill: #0b1420; stroke: #1b2a3d; stroke-width: 1; }
.g-queue-fill { fill: var(--s-4); }
.g-busy-fill { fill: var(--s-offered); }
.g-edge { stroke: #3a5473; stroke-width: 1.6; fill: none; }
.g-edge-dead { stroke: var(--st-bad); stroke-dasharray: 5 4; }
.g-edge-open { stroke: var(--st-warn); stroke-dasharray: 5 4; }
.g-arrow { fill: #3a5473; }
.g-edge-label { fill: #93a3b8; font-family: "DM Mono", monospace; font-size: 9px; }
.g-badge-open { fill: var(--st-warn); font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 1px; }
.g-client { fill: #93a3b8; font-family: "DM Mono", monospace; font-size: 10.5px; }
.graph-time { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.playbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.playbar button { border: 1px solid var(--line); background: transparent; border-radius: 3px; padding: 6px 12px; font-size: 12px; }
.playbar button:hover { border-color: var(--mint); }
.playbar input[type="range"] { flex: 1; accent-color: var(--mint); }

/* ---- tour ---- */
.tour { padding: 30px 0 6px; }
.tour h2 { font-size: 21px; letter-spacing: -0.4px; }
.tour-steps { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.tour-note { border: 1px solid var(--line); border-left: 3px solid var(--mint); border-radius: 4px; background: var(--ink-2); padding: 14px 16px; color: var(--muted); line-height: 1.55; max-width: 900px; }
.tour-note b { color: var(--text); }

/* ---- model your own system ---- */
.advanced { padding: 22px 0 60px; }
.advanced h2 { font-size: 21px; letter-spacing: -0.4px; }
.model-hint { color: var(--muted); line-height: 1.55; max-width: 860px; }
.pane { margin-top: 14px; }
.advanced textarea { width: 100%; min-height: 230px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 12px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; resize: vertical; }
.dsl-help { margin-top: 8px; }
.dsl-help code { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; font-size: 11px; color: var(--muted); }
.fine { font-size: 12.5px; font-family: var(--mono); color: #6b7a8f; }
.tbl-details { margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); }
.tbl-details summary { padding: 11px 15px; font-size: 13px; cursor: pointer; color: #c7d1cc; }
.tbl-details .tbl { margin: 0 15px 14px; }

/* Builder */
.builder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.b-col { border: 1px solid var(--line); border-radius: 6px; background: var(--ink-2); padding: 13px 14px 14px; min-width: 0; }
.b-col h4 { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); font-weight: 500; }
.b-head { color: #6b7a8f; font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.b-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.b-svc-grid { display: grid; grid-template-columns: 1fr 62px 70px 70px 26px; gap: 6px; align-items: center; }
.b-call-grid { display: grid; grid-template-columns: 1fr 1fr 66px 52px 30px 30px 30px 26px; gap: 5px; align-items: center; }
.b-wl-grid { display: grid; grid-template-columns: 1fr 64px 1fr 66px 52px 26px; gap: 6px; align-items: center; }
.b-fault-grid { display: grid; grid-template-columns: 1fr 70px 70px 46px 26px; gap: 6px; align-items: center; }
.b-rows input, .b-rows select { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 6px 7px; font-family: var(--mono); font-size: 12px; min-width: 0; }
.b-rows input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--mint); justify-self: center; }
.b-x { background: none; border: 0; color: #6b7a8f; font-size: 15px; padding: 2px; justify-self: center; }
.b-x:hover { color: var(--st-bad); }
.b-add { padding: 7px 12px; font-size: 12px; }
.b-dur { margin-top: 12px; display: flex; }
.b-dur input { width: 76px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 5px 8px; font-family: var(--mono); font-size: 12.5px; }
.adv-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.button { border: 1px solid var(--line); border-radius: 3px; padding: 10px 16px; background: transparent; font-weight: 600; font-size: 13px; transition: 0.2s ease; text-decoration: none; }
.button:hover { border-color: var(--mint); transform: translateY(-1px); }
.button-primary { background: var(--mint); color: #071a33; border-color: var(--mint); }
.err { color: var(--st-bad); font-family: var(--mono); font-size: 12px; }
.tbl { border-collapse: collapse; font-size: 12.5px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 6px 12px; text-align: right; }
.tbl th { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.tbl td:first-child, .tbl th:first-child { text-align: left; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; color: #6b7a8f; font-size: 12.5px; }
footer .wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
footer a { color: var(--muted); }

@media (max-width: 640px) {
  .controls { padding: 12px; }
  .knob input[type="range"] { width: 84px; }
  .stat .v { font-size: 20px; }
}