/* Direction: Signal Room — a dark broadcast control panel, near-black slate, signal red, mono readouts */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0a0d12;
  --surface: #121720;
  --surface-2: #1a212c;
  --border: #283142;
  --border-strong: #545659;
  --ink: #e8ecf2;
  --muted: #94a0b2;
  --accent: #d93a40;
  --accent-hover: #df585d;
  --accent-ink: #ffffff;
  --accent-text: #ff8a8e;
  --accent-strong: #e2656a;
  --accent-soft: #38171c;
  --accent-border: #672127;
  --success: #3ddc97;
  --success-ink: #ffffff;
  --success-soft: #153b2f;
  --success-strong: #3ddc97;
  --warning: #f5b94a;
  --warning-ink: #ffffff;
  --warning-soft: #3e331e;
  --warning-strong: #f5b94a;
  --danger: #ff6b70;
  --danger-ink: #ffffff;
  --danger-soft: #402227;
  --danger-strong: #ff6b70;
  --chart-1: #d93a40;
  --chart-2: #be9024;
  --chart-3: #039b1c;
  --chart-4: #16a5b0;
  --chart-5: #4077f3;
  --chart-6: #cd63d8;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --radius-card: 12px;
  --radius-btn: 10px;
  --x-band: #05070a;
  --x-on-photo: #ffffff;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f3;
  --border: #ddddde;
  --border-strong: #b6b6b8;
  --ink: #0a0d12;
  --muted: #6c6e71;
  --accent: #d93a40;
  --accent-hover: #b83136;
  --accent-ink: #ffffff;
  --accent-text: #c8353b;
  --accent-strong: #b83136;
  --accent-soft: #fae3e4;
  --accent-border: #eea6a9;
  --success: #3ddc97;
  --success-ink: #0a0d12;
  --success-soft: #e8fbf3;
  --success-strong: #227955;
  --warning: #f5b94a;
  --warning-ink: #0a0d12;
  --warning-soft: #fef7e9;
  --warning-strong: #886629;
  --danger: #ff6b70;
  --danger-ink: #0a0d12;
  --danger-soft: #ffedee;
  --danger-strong: #a8464a;
  --chart-1: #d93a40;
  --chart-2: #b88a1a;
  --chart-3: #047c15;
  --chart-4: #009faa;
  --chart-5: #2457d0;
  --chart-6: #cd63d8;
}

.live-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--danger); display: inline-block; animation: livepulse 1.6s ease-in-out infinite; }
.live-dot.ok { background: var(--success); }
.live-dot.idle { background: var(--muted); animation: none; }
@keyframes livepulse { 0%,100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 18%, transparent); transform: scale(1.12); } }

.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 28px; }
.eq i { width: 4px; background: var(--accent-text); border-radius: 2px; height: 10px; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; }
.eq i:nth-child(4) { animation-delay: -.2s; } .eq i:nth-child(5) { animation-delay: -.8s; }
@keyframes eq { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(2.4); } }

.progress { height: .5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }

.grid-bg { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%); opacity: .3; }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
pre.code { background: var(--x-band); color: var(--x-on-photo); border: 1px solid var(--border); border-radius: 10px; padding: 1rem; overflow-x: auto; font-family: var(--font-mono); font-size: .78rem; line-height: 1.55; max-height: 28rem; }
nav.strip { scrollbar-width: none; }
nav.strip::-webkit-scrollbar { display: none; }

html.reduced-motion .live-dot, html.reduced-motion .eq i { animation: none; }