/* src/aa5obs/static/style.css */
:root { --bg:#0e1418; --panel:#131c22; --border:#243038; --fg:#cdd6dc; --dim:#7d8a92; --accent:#3fae7a;
  --warn:#b06a5a; /* the only non-palette color: signal-lost / stale radar state */ }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
  font-family:'SF Mono',Menlo,Consolas,monospace; font-size:14px; line-height:1.55; }
main { max-width:980px; margin:0 auto; padding:24px 20px 60px; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.site-head { display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--border); }
.brand { font-weight:700; letter-spacing:.12em; }
.site-head nav { color:var(--dim); font-size:12px; }
.site-foot { max-width:980px; margin:0 auto; padding:24px 20px; color:var(--dim);
  font-size:11px; border-top:1px solid var(--border); }
.kick { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin:0; }
h1 { font-size:24px; color:#eaf2f6; font-weight:600; margin:6px 0; }
.tagline { color:var(--dim); font-size:12px; }
.search { width:100%; padding:13px 14px; margin-top:10px; background:var(--panel);
  border:1px solid var(--accent); border-radius:6px; color:var(--fg); font:inherit; }
.facets { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }
.facet { background:var(--panel); border:1px solid var(--border); border-radius:20px;
  padding:4px 11px; font-size:12px; } .facet b { color:var(--accent); }
.label { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin:18px 0 6px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; color:var(--dim); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--border); padding:6px; }
td { padding:6px; border-bottom:1px dotted #1d262c; } .tl { font-weight:700; }
.crumb { font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); }
.tail { font-size:30px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin:6px 0 0; }
.nick { color:var(--fg); font-size:16px; }
.dossier { display:grid; grid-template-columns:1.1fr 1fr; gap:24px; margin-top:14px; }
@media (max-width:640px){ .dossier{ grid-template-columns:1fr; } }
.row { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px dotted #1d262c; }
.row span:first-child { color:var(--dim); }
.status { border:1px solid var(--border); border-left:3px solid #4a5862; background:var(--panel);
  padding:10px 12px; border-radius:4px; color:var(--dim); }
.status.live { border-left-color:var(--accent); }
.sister { display:inline-block; background:var(--panel); border:1px solid var(--border);
  border-radius:4px; padding:4px 9px; margin:3px 4px 0 0; }
.featured { border:1px solid var(--border); border-left:3px solid var(--accent);
  background:var(--panel); padding:12px 14px; border-radius:4px; margin:12px 0; }
#map { height:360px; border:1px solid var(--border); border-radius:6px; margin-top:8px; }

/* ── Radar scope (green phosphor) ─────────────────────────────────────── */
.radar { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; margin-top:10px;
  align-items:start; }
.radar-scope { position:relative; width:100%; max-width:560px; aspect-ratio:1/1;
  margin:0 auto; border:1px solid var(--border); border-radius:8px; overflow:hidden;
  background:#0a1014; box-shadow:inset 0 0 60px rgba(63,174,122,0.06); }
.radar-scope canvas { display:block; width:100%; height:100%; }
/* Parallel accessible text list — the a11y source of truth for the scope. */
.radar-side { min-width:0; }
.airborne-panel { border:1px solid var(--border); background:var(--panel); border-radius:6px;
  padding:10px 12px; }
.airborne-panel > .label { margin:0 0 6px; }
#airborne-list { list-style:none; margin:0; padding:0; font-size:12px; max-height:320px;
  overflow:auto; }
#airborne-list li { padding:3px 0; border-bottom:1px dotted #1d262c; color:var(--fg); }
#airborne-list li:last-child { border-bottom:0; }
.radar-list-summary { color:var(--dim) !important; font-size:11px; }
.radar-list-tail { font-weight:700; color:var(--accent); }
.radar-list-empty { color:var(--dim) !important; }
/* signal-lost / stale state hook (canvas dims itself; this dims the panel) */
.radar.is-stale .airborne-panel { border-color:var(--warn); }
.radar.is-stale .radar-list-tail { color:var(--warn); }

/* Replay scrubber (per-airframe): scrub/play the accrued track. */
.replay-controls { display:flex; align-items:center; gap:10px; margin-top:12px;
  max-width:560px; }
.replay-btn { background:var(--panel); color:var(--accent); border:1px solid var(--border);
  border-radius:6px; width:36px; height:36px; min-width:36px; cursor:pointer;
  font-size:12px; line-height:1; }
.replay-btn:hover { border-color:var(--accent); }
.replay-btn.replay-text { width:auto; min-width:0; padding:0 12px; font-size:11px;
  white-space:nowrap; }
.replay-scrub { flex:1; accent-color:var(--accent); height:36px; cursor:pointer; }
.replay-readout { font:11px 'SF Mono',Menlo,Consolas,monospace; color:var(--dim);
  min-width:52px; text-align:right; }

@media (max-width:760px){
  .radar { grid-template-columns:1fr; }
  .radar-scope { max-width:none; }
  /* keep tap targets comfortable on mobile if blips become interactive */
  #airborne-list li { padding:8px 0; min-height:44px; display:flex; align-items:center; }
  .replay-controls { max-width:none; }
  .replay-btn { width:44px; height:44px; min-width:44px; } /* 44px tap target */
}