/* defcon.css — shared DEFCON-aesthetic base for radar.html and band.html.
 * Vignette, scanlines, HUD positioning, top bar, ctl-row toggles, counters,
 * corner brackets, overlays, prompt-form base, mobile breakpoints.
 *
 * Page-specific palette (radar's tx/rx, band's mode colours) stays in each
 * page's own <style> block. The generic --accent / --accent-2 vars below are
 * used by ctl-row .on, top-bar .live/.warn so both pages share them. */

:root {
  --bg-deep:    #050810;
  --coast:      rgba(120, 200, 220, 0.45);
  --coast-glow: rgba(80, 180, 220, 0.30);
  --txt:        #b8d0d8;
  --txt-mute:   #5a7480;
  --txt-bright: #e6f4f8;
  --line-h:     1.55;

  /* Generic accent slots — pages may override if they want a different hue. */
  --accent:        #f7a82e;
  --accent-soft:   rgba(247, 168, 46, 0.55);
  --accent-2:      #4ddca8;
  --accent-2-soft: rgba(77, 220, 168, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg-deep); }
body {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-weight: 300;
  color: var(--txt);
  overflow: hidden;
  position: relative;
  text-rendering: geometricPrecision;
}

/* Radial vignette + faint horizontal scanlines (CRT phosphor feel). */
body::before, body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 25;
}
body::before {
  background: radial-gradient(ellipse at center,
    transparent 28%,
    rgba(0,0,0,0.55) 100%);
}
body::after {
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.018) 0,
    rgba(255,255,255,0.018) 1px,
    transparent 1px,
    transparent 3px);
  mix-blend-mode: overlay;
  opacity: 0.7;
}

/* Map */
#map {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(ellipse at center,
    #0e1a25 0%,
    #050810 75%);
  opacity: 0;
  transition: opacity 800ms ease-out;
}
#map.ready { opacity: 1; }

#coastlines path {
  fill: none;
  stroke: var(--coast);
  stroke-width: 0.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.2px var(--coast-glow));
  vector-effect: non-scaling-stroke;
}

/* Spot lines + endpoint dots — base only; colours per page. */
.spot {
  fill: none;
  stroke-width: 0.7;
  stroke-linecap: round;
  pointer-events: none;
  will-change: opacity;
}
.endpoint {
  pointer-events: none;
  will-change: opacity;
}

/* HUD */
.hud {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: var(--line-h);
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.hud.ready { opacity: 1; }
.hud .row    { display: block; white-space: nowrap; }
.hud .label  { color: var(--txt-mute); margin-right: 10px; }
.hud .val    { color: var(--txt-bright); font-weight: 400; }
.hud .dim    { color: var(--txt-mute); }

.hud-tl { top: 22px; left:  26px; }
.hud-tr { top: 22px; right: 26px; text-align: right; }
.hud-bl { bottom: 22px; left:  26px; }
.hud-br { bottom: 22px; right: 26px; text-align: right; }

.meta-block { margin-bottom: 6px; }
.meta-block .label { display: block; font-size: 9px; }

/* Toggle stack */
.ctl-row {
  pointer-events: auto;
  display: inline-flex;
  border: 1px solid rgba(120, 200, 220, 0.30);
  background: rgba(8, 16, 22, 0.75);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 16px;
  backdrop-filter: blur(2px);
}
.ctl-row + .ctl-row { margin-top: 8px; }
.ctl-row button {
  background: transparent;
  border: none;
  color: var(--txt-mute);
  padding: 8px 16px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: color 200ms, background 200ms, text-shadow 200ms;
}
.ctl-row button:hover { color: var(--txt); }
.ctl-row button.on {
  background: rgba(247, 168, 46, 0.16);
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-soft);
}

/* Counters */
.counter-row { display: flex; gap: 28px; margin-top: 10px; }
.counter-row > div { line-height: 1; }
.counter {
  font-size: 32px;
  font-weight: 200;
  letter-spacing: 0.04em;
  color: var(--txt-bright);
  display: block;
  font-variant-numeric: tabular-nums;
}
.counter-row .lbl {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--txt-mute);
  display: block;
  margin-top: 8px;
}

/* Top bar (breadcrumb + connection state) */
.top-bar {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: var(--txt-mute);
  padding: 7px 22px 6px;
  background: linear-gradient(180deg,
    rgba(120, 200, 220, 0.06),
    rgba(120, 200, 220, 0.02));
  border-bottom: 1px solid rgba(120, 200, 220, 0.20);
  z-index: 35;
  pointer-events: auto;
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: calc(100vw - 24px);
}
.top-bar > * { white-space: nowrap; }
.top-bar a { color: var(--txt); text-decoration: none; transition: color 150ms; }
.top-bar a:hover { color: var(--accent); }
.top-bar .sep   { opacity: 0.4; }
.top-bar .live  { color: var(--accent-2); text-shadow: 0 0 6px var(--accent-2-soft); }
.top-bar .warn  { color: var(--accent); }
.top-bar .dead  { color: #d04040; }
.top-bar .acq   { color: var(--accent); animation: blink 1.4s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Decorative L-bracket corners */
.corner {
  position: fixed;
  width: 14px; height: 14px;
  border: 1px solid rgba(120, 200, 220, 0.18);
  z-index: 28;
  pointer-events: none;
}
.corner.tl { top: 14px; left: 14px;  border-right: none; border-bottom: none; }
.corner.tr { top: 14px; right: 14px; border-left:  none; border-bottom: none; }
.corner.bl { bottom: 14px; left: 14px;  border-right: none; border-top: none; }
.corner.br { bottom: 14px; right: 14px; border-left:  none; border-top: none; }

/* Overlays */
.overlay {
  position: fixed;
  z-index: 40;
  text-align: center;
  pointer-events: none;
}
.overlay.standby {
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--txt-mute);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* Prompt form (base — page adds its own input/button styling) */
.prompt {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 50;
  background: radial-gradient(ellipse at center,
    #0e1a25 0%,
    #050810 75%);
  text-align: center;
  padding: 40px;
}
.prompt h1 {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: clamp(34px, 7vw, 64px);
  letter-spacing: 0.04em;
  color: var(--txt-bright);
  margin: 0 0 12px;
  text-shadow: 0 0 18px rgba(180, 220, 230, 0.22);
}
.prompt h1 .accent { color: var(--accent); text-shadow: 0 0 14px var(--accent-soft); }
.prompt .lede {
  color: var(--txt-mute);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 30px;
  max-width: 600px;
  line-height: 1.6;
}

/* Mobile breakpoints (base — pages add per-element overrides) */
@media (max-width: 700px) {
  .counter { font-size: 22px; }
  .top-bar { font-size: 9px; gap: 10px; padding: 6px 12px; letter-spacing: 0.30em; }

  .hud-tl, .hud-tr { top: 50px; }
  .hud-tl { left: 16px; }
  .hud-tr { right: 16px; }
  .hud-bl { left: 16px; bottom: 18px; }
  .hud-br { right: 16px; bottom: 18px; }

  .meta-block { margin-bottom: 4px; }
  .hud { font-size: 10px; letter-spacing: 0.14em; }

  .ctl-row { font-size: 9px; letter-spacing: 0.16em; margin-top: 10px; }
  .ctl-row + .ctl-row { margin-top: 6px; }
  .ctl-row button { padding: 6px 10px; }

  .hud-bl .counter-row { gap: 18px; }
}
@media (max-width: 380px) {
  .top-bar { font-size: 8px; letter-spacing: 0.22em; gap: 8px; }
  .counter { font-size: 20px; }
}