/* 20-console.css — the transmitter strip (signature element) + Console section.
   The ON AIR lamp is the ONLY glowing/animated decoration on the page. */

/* ================= transmitter strip ================= */
.strip{
  position:sticky;
  top:var(--chrome-bar);
  z-index:30;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
  background:#1B1C21;
  border-bottom:1px solid var(--line);
  padding:10px 18px;
  min-height:64px;
}

/* left: lamp + wordmark + station */
.strip-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.lamp{
  width:22px; height:22px; border-radius:50%;
  background:#3A2224;               /* dull dark red disc when off-air */
  border:1px solid #4A2C2E;
  flex:none;
}
.lamp.on{
  background:var(--live);
  border-color:var(--live);
  box-shadow:0 0 10px 2px rgba(229,72,77,.55);
  animation:lamp-breathe 3s ease-in-out infinite;
}
@keyframes lamp-breathe{
  0%,100%{ box-shadow:0 0 10px 2px rgba(229,72,77,.55); opacity:1; }
  50%    { box-shadow:0 0 18px 5px rgba(229,72,77,.8);  opacity:.88; }
}
@media (prefers-reduced-motion: reduce){
  .lamp.on{ animation:none; }
}
.strip-id{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:24px;
  letter-spacing:.1em;
  color:var(--text);
}
.strip-station{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.strip-station .air-state.on{ color:var(--live); font-weight:600; }

/* center: run state */
.strip-center{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.strip-now{
  display:flex; align-items:baseline; gap:8px; min-width:0;
  font-size:15px; font-weight:600;
}
.strip-now .now-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kind-tag{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 5px;
  color:var(--muted);
  flex:none;
}
.kind-tag.track{ color:var(--accent); border-color:#4A3D1B; }
.kind-tag.spot { color:var(--blue);   border-color:#39414E; }
.kind-tag.say  { color:var(--ok);     border-color:#2C4A36; }
.strip-next{
  font-size:12px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.strip-next b{ color:var(--muted); font-weight:600; letter-spacing:.08em; font-size:11px; }
.strip-spotin{ font-size:11.5px; color:var(--muted); font-family:var(--font-mono); }

/* right: telemetry */
.strip-right{ display:flex; align-items:center; gap:16px; flex:none; }
.strip-listeners{ display:flex; align-items:center; gap:8px; }
.spark{ display:block; }
.spark polyline{ fill:none; stroke:var(--accent); stroke-width:1.5; }
.listeners-n{
  font-family:var(--font-display);
  font-weight:700;
  font-size:22px;
  min-width:2ch;
  text-align:right;
}
.listeners-cap{ font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; display:block; text-align:right; }
.keeper-dot{
  width:9px; height:9px; border-radius:50%;
  background:#3A3D45; flex:none;
}
.keeper-dot.ok{ background:var(--ok); }
.keeper-dot.stale{ background:var(--warn); }
.strip-clock{
  font-family:var(--font-mono);
  font-size:17px;
  color:var(--text);
  letter-spacing:.04em;
}

@media (max-width:900px){
  .strip{ grid-template-columns:auto 1fr; gap:10px; padding:8px 12px; min-height:0; }
  .strip-center{ grid-column:1 / -1; order:3; }
  .strip-right{ justify-self:end; gap:10px; }
  .listeners-n{ font-size:18px; }
  .strip-clock{ font-size:14px; }
  .wordmark{ font-size:19px; }
  .lamp{ width:17px; height:17px; }
}
@media (max-width:480px){
  .spark{ display:none; }
}

/* ================= console section ================= */
.console-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:14px;
  align-items:start;
}

/* transport */
.transport-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:6px 0;
}
.transport-row + .transport-row{ border-top:1px solid var(--line); }
.transport-row label{ flex:none; min-width:88px; }
.vol-row{ display:flex; align-items:center; gap:10px; flex:1; min-width:180px; }
.vol-row input[type=range]{ flex:1; min-width:100px; }
.vol-val{ font-family:var(--font-mono); font-size:12.5px; min-width:4ch; text-align:right; color:var(--muted); }

/* on/off toggle switch */
.switch{
  position:relative; display:inline-block;
  width:44px; height:24px; flex:none;
}
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .knob{
  position:absolute; inset:0;
  background:#1B1D22;
  border:1px solid var(--line);
  border-radius:12px;
  pointer-events:none;
  transition:background .12s, border-color .12s;
}
.switch .knob::after{
  content:"";
  position:absolute; top:3px; left:3px;
  width:16px; height:16px; border-radius:50%;
  background:var(--muted);
  transition:transform .12s, background .12s;
}
.switch input:checked + .knob{ background:#3A2F12; border-color:var(--accent); }
.switch input:checked + .knob::after{ transform:translateX(20px); background:var(--accent); }
.switch input:focus-visible + .knob{ outline:2px solid var(--accent); outline-offset:2px; }

/* say now */
.say-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.say-note{ font-size:12px; color:var(--muted); margin-top:8px; }

/* reactions */
.react-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
}
.react-btn{
  font-size:22px;
  padding:10px 0;
  background:#1E2026;
  border:1px solid var(--line);
  border-radius:var(--radius);
  cursor:pointer;
  line-height:1;
}
.react-btn:hover{ border-color:var(--accent); }
.react-btn:active{ transform:translateY(1px); }
.react-btn[disabled]{ opacity:.35; cursor:not-allowed; }