/* =========================================================================
   MERIDIAN CONTROL — base.css
   Tokens, reset, CRT room atmosphere, severity language (nominal, caution,
   warning, emergency), shared primitives.
   ========================================================================= */

:root {
  --bg0: #04070a;
  --bg1: #090f15;
  --panel: #0c141c;
  --panel2: #0f1922;
  --line: #1b2a37;
  --line2: #24384a;
  --ink: #cfe6df;
  --dim: #6f8b93;
  --faint: #3d5259;
  --phos: #6ff2c4;
  --green: #57e389;
  --amber: #ffb454;
  --red: #ff5f5f;
  --cyan: #6fd3ff;
  --violet: #b18cff;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --rad: 6px;
  --glow-phos: 0 0 8px rgba(111, 242, 196, 0.35);
  --glow-amber: 0 0 10px rgba(255, 180, 84, 0.45);
  --glow-red: 0 0 12px rgba(255, 95, 95, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: linear-gradient(180deg, #16232e, #101b24);
  border: 1px solid var(--line2);
  border-radius: var(--rad);
  padding: 6px 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.06s;
}
button:hover { border-color: var(--phos); box-shadow: var(--glow-phos); }
button:active { transform: translateY(1px); }
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 1px;
}
button:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { border-color: var(--line2); }

input[type="range"] { accent-color: var(--phos); cursor: pointer; }
select {
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  background: #101b24; border: 1px solid var(--line2); border-radius: var(--rad);
  padding: 4px 6px; cursor: pointer;
}

.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.good { color: var(--green); }
.warn { color: var(--amber); }
.bad { color: var(--red); }
.cool { color: var(--cyan); }

/* ---------- CRT room atmosphere ---------- */
#crt {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
#crt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 46%, rgba(120, 220, 200, 0.018) 50%, transparent 54%, transparent 100%);
  background-size: 100% 260%;
  animation: crtscan 9s linear infinite;
}
@keyframes crtscan { 0% { background-position: 0 -130%; } 100% { background-position: 0 130%; } }

/* ---------- severity language ----------
   nominal  : green accents, steady
   caution  : amber, steady glow, soft two-tone chime (audio)
   warning  : red, 1 Hz blink on lamps, triple chirp loop
   emergency: red strobe edges, klaxon, mast flash            */
body.sev-nominal   { --sev: var(--green); --sevglow: 0 0 8px rgba(87, 227, 137, 0.4); }
body.sev-caution   { --sev: var(--amber); --sevglow: var(--glow-amber); }
body.sev-warning   { --sev: var(--red);   --sevglow: var(--glow-red); }
body.sev-emergency { --sev: var(--red);   --sevglow: 0 0 18px rgba(255, 95, 95, 0.8); }

body.sev-warning #topbar, body.sev-emergency #topbar { border-bottom-color: var(--sev); }
body.sev-warning .sev-flash, body.sev-emergency .sev-flash { animation: sevblink 1s steps(2) infinite; }
body.sev-emergency .sev-flash { animation-duration: 0.42s; }

@keyframes sevblink { 50% { opacity: 0.25; } }

/* emergency: room-edge red pulse */
body.sev-emergency #room::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  box-shadow: inset 0 0 90px rgba(255, 60, 60, 0.28);
  animation: emergpulse 0.9s ease-in-out infinite;
}
@keyframes emergpulse { 50% { opacity: 0.35; } }
body.sev-warning #room::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 8000;
  box-shadow: inset 0 0 60px rgba(255, 150, 60, 0.12);
}

/* ---------- shared bits ---------- */
.lamp {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #22333f; border: 1px solid var(--line2); vertical-align: middle;
}
.lamp.on { background: var(--phos); box-shadow: var(--glow-phos); }
.lamp.amber-on { background: var(--amber); box-shadow: var(--glow-amber); }
.lamp.red-on { background: var(--red); box-shadow: var(--glow-red); }

.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--dim); text-transform: uppercase;
}

.readout {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}

.paneltitle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--dim); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding: 6px 10px; display: flex; justify-content: space-between; align-items: center;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg1); }
::-webkit-scrollbar-thumb { background: #22333f; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2d4354; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}