/* NRS // Reactor Sim — aesthetic flavor: TECHNICAL BLUEPRINT / DRAFTING PAPER.
   Distinct from cyberpunk (index), utilitarian dashboard (panel), terminal
   (healthlog), Swedish newspaper (aedln0d), engineering schematic (isotope-3d).
   Warm graph-paper field + navy drafting ink + drafting-red accents.
   Contrast: navy #13315c on paper #f4f1e8 ≈ 8.9:1 (WCAG-AA clear). */
:root {
  --paper:    #f4f1e8;   /* warm drafting paper */
  --paper-2:  #efe9da;   /* sunk panel */
  --grid:     #cfd8e6;   /* faint blueprint grid */
  --grid-hi:  #aebfd6;   /* major grid line */
  --ink:      #13315c;   /* navy drafting ink (body) */
  --ink-2:    #2c4a73;   /* secondary ink */
  --muted:    #5a6b81;   /* labels (≈5.3:1 on paper) */
  --rule:     #c3b9a3;   /* hairline rules */
  --red:      #b8431f;   /* drafting red / annotation (≈4.9:1 on paper) */
  --red-deep: #8f2f12;
  --teal:     #1f6f6a;   /* secondary plot trace */
  --good:     #2f7d4f;
  --warn:     #9a6a00;
  --font-disp: "Chakra Petch", monospace;
  --font-sans: "Familjen Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.sim {
  /* blueprint graph paper: fine grid + major grid every 5th line */
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-hi) 1.4px, transparent 1.4px),
    linear-gradient(90deg, var(--grid-hi) 1.4px, transparent 1.4px),
    var(--paper);
  background-size: 22px 22px, 22px 22px, 110px 110px, 110px 110px, auto;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- masthead ---- */
.sim-mast {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  padding: 14px 22px;
  border-bottom: 2px solid var(--ink);
  background: rgba(244, 241, 232, 0.86);
}
.sim-mast-l { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; }
.sim-seal { color: var(--red); font-size: 20px; line-height: 1; }
.sim-callsign { font-family: var(--font-disp); font-size: 17px; letter-spacing: 0.06em; color: var(--ink); }
.sim-callsign-tier { color: var(--red); }
.sim-slash { color: var(--muted); }
.sim-title { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.sim-mast-r { display: flex; gap: 16px; align-items: baseline; }
.sim-mast-link { font: 12px var(--font-mono); letter-spacing: 0.06em; color: var(--ink-2); }
.sim-mast-link:hover { color: var(--red); }

/* ---- demo-safe banner ---- */
.sim-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 16px 22px 0;
  padding: 12px 16px;
  border: 1.6px dashed var(--red);
  border-radius: 4px;
  background: rgba(184, 67, 31, 0.06);
}
.sim-banner-tag {
  font: 700 11px var(--font-mono); letter-spacing: 0.16em;
  color: var(--paper); background: var(--red-deep);
  padding: 4px 8px; border-radius: 3px; white-space: nowrap;
}
.sim-banner-body { margin: 0; font-size: 13.5px; color: var(--ink); flex: 1 1 280px; }
.sim-banner-body strong { color: var(--red-deep); }

/* ---- stage / cards ---- */
.sim-stage {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 1.45fr);
  gap: 18px;
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 22px 40px;
}
.sim-deck, .sim-plotcard, .sim-note {
  background: var(--paper);
  border: 1.4px solid var(--ink);
  border-radius: 5px;
  padding: 16px 18px;
  box-shadow: 3px 3px 0 rgba(19, 49, 92, 0.10);
}
.sim-note { grid-column: 1 / -1; }
.sim-h {
  margin: 0 0 4px;
  font: 600 13px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.sim-h-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }

/* ---- controls ---- */
.sim-controls { display: flex; flex-direction: column; gap: 14px; }
.sim-loading { font: 12px var(--font-mono); color: var(--muted); }
.sim-field { border: 0; margin: 0; padding: 0; }
.sim-field-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sim-field-label { font: 12px var(--font-mono); letter-spacing: 0.04em; color: var(--ink); }
.sim-field-unit { color: var(--muted); }
.sim-field-val {
  font: 600 13px var(--font-mono); color: var(--red-deep);
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 1px 7px; border-radius: 3px; min-width: 62px; text-align: right;
}
.sim-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin-top: 10px;
  background: var(--grid-hi); border-radius: 3px; cursor: pointer;
}
.sim-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink); cursor: pointer;
}
.sim-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink); cursor: pointer;
}
.sim-field-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

.sim-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.sim-btn {
  font: 600 12px var(--font-mono); letter-spacing: 0.08em;
  color: var(--ink); background: var(--paper);
  border: 1.4px solid var(--ink); border-radius: 4px;
  padding: 8px 14px; cursor: pointer;
}
.sim-btn:hover { background: var(--paper-2); }
.sim-btn-primary { color: var(--paper); background: var(--ink); }
.sim-btn-primary:hover { background: var(--ink-2); }
.sim-toggle { display: flex; align-items: center; gap: 7px; font: 12px var(--font-mono); color: var(--ink-2); cursor: pointer; }
.sim-toggle input { accent-color: var(--ink); width: 15px; height: 15px; }

/* ---- plot ---- */
.sim-plot-wrap { width: 100%; }
.sim-plot {
  width: 100%; height: auto; display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 4px;
}
.sim-plot .axis { stroke: var(--ink); stroke-width: 1.2; }
.sim-plot .gridline { stroke: var(--grid-hi); stroke-width: 0.8; }
.sim-plot .tick-txt { fill: var(--muted); font: 10px var(--font-mono); }
.sim-plot .axis-lbl { fill: var(--ink); font: 11px var(--font-mono); letter-spacing: 0.06em; }
.sim-plot .trace { fill: none; stroke: var(--red); stroke-width: 2.2; }
.sim-plot .trace-base { fill: none; stroke: var(--teal); stroke-width: 1; stroke-dasharray: 4 4; }
.sim-plot .promptmark { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; }

.sim-readout {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px; margin: 14px 0 0;
}
.sim-ro { display: flex; flex-direction: column; gap: 2px; }
.sim-ro dt { font: 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.sim-ro dd { margin: 0; font: 600 14px var(--font-mono); color: var(--ink); }

/* ---- explainer ---- */
.sim-note p { margin: 0 0 12px; font-size: 14px; }
.sim-eq {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--paper-2); border-left: 3px solid var(--red);
  font: 13px var(--font-mono); color: var(--ink); white-space: pre; overflow-x: auto;
}
.sim-map { margin: 0; padding-left: 18px; }
.sim-map li { margin: 0 0 8px; font-size: 13.5px; color: var(--ink); }

/* ---- footer ---- */
.sim-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 12px 22px; margin-top: 8px;
  border-top: 2px solid var(--ink);
  font: 11.5px var(--font-mono); letter-spacing: 0.06em; color: var(--muted);
}
.sim-sep { color: var(--rule); }

@media (max-width: 760px) {
  .sim-stage { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}