/* spots.radio — design system. Aviation glass-cockpit meets observatory. */
:root {
  /* dark (default) */
  --bg-void:#0A0C10; --bg-panel:#12151C; --bg-panel-2:#1A1E27; --line:#262B36;
  --ink:#E8EBF0; --ink-dim:#9AA3B2; --ink-faint:#5C6473;
  --accent:#5EE0C8; --good:#7CE38B; --warn:#FFB454; --bad:#E0683C;
  --hover:#222838; --accent-line:#2c5b52; --track:#0c0f16; --bandrow-hover:#1a1f2a; --table-line:#171b24;
  --scrim-rgb:10,12,16; --glass:rgba(12,15,22,.80); --shadow:rgba(0,0,0,.55);
  --radius:10px; --gap:8px;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Inter','Space Grotesk', system-ui, sans-serif;
  --disp:'Space Grotesk','Inter', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg-void:#F4F6FA; --bg-panel:#FFFFFF; --bg-panel-2:#EEF2F8; --line:#D5DCE6;
  --ink:#1A2230; --ink-dim:#53606F; --ink-faint:#8A94A3;
  --accent:#0E9C86; --good:#1F9E4A; --warn:#B5740A; --bad:#D2552E;
  --hover:#E4EAF2; --accent-line:#3E9E89; --track:#E3E9F1; --bandrow-hover:#EDF1F7; --table-line:#CBD3DE;
  --scrim-rgb:244,246,250; --glass:rgba(255,255,255,.82); --shadow:rgba(20,30,50,.16);
  color-scheme: light;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg-void); color:var(--ink);
  font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; overflow:hidden; }
#map { position:absolute; inset:0; background:var(--bg-void); }
.mono { font-family:var(--mono); letter-spacing:.04em; }
.dim { color:var(--ink-dim); } .faint { color:var(--ink-faint); }
.num { font-family:var(--disp); font-variant-numeric:tabular-nums; }
button { font-family:inherit; }

/* ── command bar ───────────────────────────────────────────────── */
#bar { position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; gap:10px 14px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(var(--scrim-rgb),.93) 30%, rgba(var(--scrim-rgb),0)); pointer-events:none; }
#bar::-webkit-scrollbar { display:none; }
#bar > * { pointer-events:auto; flex-shrink:0; }   /* keep natural width: single row, scroll when it overflows (the › chevron hints it), never squish text or wrap over the map */
/* right-edge fade + chevron hinting the bar is horizontally scrollable (mobile). JS toggles .show. */
#barfade { position:absolute; top:0; right:0; height:52px; width:46px; z-index:21; display:none;
  align-items:center; justify-content:flex-end; padding-right:9px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--scrim-rgb),0), rgba(var(--scrim-rgb),1) 72%); color:var(--accent); font-size:22px;
  font-weight:700; line-height:1; }
#barfade.show { display:flex; }
.brand { font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:.5px; }
.brand .d { color:var(--accent); }
.brand small { font-family:var(--sans); font-weight:400; font-size:11px; color:var(--ink-faint);
  margin-left:6px; letter-spacing:.08em; text-transform:uppercase; }
.searchwrap { position:relative; flex:0 1 320px; }
#search { width:100%; background:var(--bg-panel); border:1px solid var(--line); color:var(--ink);
  border-radius:8px; padding:8px 12px; font:inherit; }
#search:focus { outline:none; border-color:var(--accent); }
/* position:fixed (left/top/width set in JS from the search input) so it escapes the
   horizontally-scrolling #bar's overflow clip — otherwise the results are cut to bar height. */
#sresults { position:fixed; top:0; left:0; width:320px; z-index:30; max-height:62vh; overflow:auto;
  background:var(--bg-panel-2); border:1px solid var(--line); border-radius:8px; display:none; box-shadow:0 12px 32px var(--shadow); }
#sresults .r { display:flex; gap:10px; align-items:center; padding:8px 12px; cursor:pointer; }
#sresults .r:hover, #sresults .r.sel { background:var(--hover); }
#sresults .r .cs { font-family:var(--mono); font-weight:600; }
#sresults .r .meta { margin-left:auto; color:var(--ink-faint); font-size:12px; }
.seg { display:flex; flex-shrink:0; background:var(--bg-panel); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.seg button { background:none; border:0; color:var(--ink-dim); padding:7px 10px; cursor:pointer; font-size:12px; }
.seg button.on { background:var(--hover); color:var(--ink); }
.chip { background:var(--bg-panel); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  cursor:pointer; font-size:12px; display:inline-flex; gap:6px; align-items:center; }
.chip.you, .chip.on { border-color:var(--accent-line); color:var(--accent); }
a.chip { text-decoration:none; color:inherit; }
/* "your call" chip — inline editable */
#mecall.editing { padding-top:3px; padding-bottom:3px; }
.mecall-go { font-family:var(--mono); font-weight:600; }
.mecall-edit { color:var(--ink-faint); font-size:11px; }
#mecall:hover .mecall-edit { color:var(--accent); }
.mecall-input { width:7.5ch; background:none; border:0; outline:none; padding:0; margin:0;
  color:var(--accent); font:600 12px var(--mono); text-transform:uppercase; }
.mecall-input::placeholder { color:var(--ink-faint); text-transform:none; font-weight:400; }
.mecall-input.bad { color:var(--bad); }
#bar select { background:var(--bg-panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; cursor:pointer; font-size:12px; color:var(--ink); font-family:inherit; }
#bar select:hover { border-color:var(--accent-line); }
.spacer { margin-left:auto; }
/* all-time profile strip */
.profstrip { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:11.5px; margin:8px 0 4px; }
.profstrip .pi { color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; }
.profstrip .pi b { color:var(--ink); font-family:var(--disp); font-size:13px; font-weight:600;
  text-transform:none; letter-spacing:0; font-variant-numeric:tabular-nums; }
.tabs.sub { margin:8px 0 4px; }
.tabs.sub button { font-size:12px; }
#live { display:inline-flex; gap:6px; align-items:center; color:var(--ink-faint); font-size:12px; }
#live .led { width:8px; height:8px; border-radius:50%; background:var(--ink-faint); }
#live.on .led { background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ── conditions rail (left) ────────────────────────────────────── */
#rail { position:absolute; left:14px; top:60px; z-index:15; width:212px; max-height:calc(100vh - 80px);
  overflow:auto; background:var(--glass); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:var(--radius); padding:8px; }
#rail h3 { margin:2px 6px 8px; font:600 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.bandrow { display:grid; grid-template-columns:14px 36px 1fr auto; align-items:center; gap:8px;
  padding:6px; border-radius:8px; cursor:pointer; }
.bandrow:hover { background:var(--bandrow-hover); } .bandrow.on { background:var(--hover); outline:1px solid var(--line); }
.bandrow .sw { width:10px; height:10px; border-radius:3px; }
.bandrow .bn { font-family:var(--mono); font-size:12px; }
.bandrow .spark { height:18px; }
.bandrow .st { font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.bandrow .gl { font-size:13px; }
.gl.up{color:var(--good);} .gl.dn{color:var(--bad);} .gl.flat{color:var(--ink-faint);}

/* ── contextual panel (right) / bottom sheet (mobile) ──────────── */
#panel { position:absolute; right:14px; top:60px; z-index:16; width:380px; max-height:calc(100vh - 80px);
  overflow-y:auto; overflow-x:hidden; background:var(--bg-panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 16px 48px var(--shadow); display:none; }
#panel.show { display:block; }
.phead { display:flex; align-items:center; gap:10px; padding:14px 16px 10px; position:sticky; top:0;
  background:var(--bg-panel); border-bottom:1px solid var(--line); }
.phead .x { margin-left:auto; cursor:pointer; color:var(--ink-faint); background:none; border:0; font-size:16px; }
.pbody { padding:14px 16px 18px; }
.callbig { font-family:var(--mono); font-weight:700; font-size:26px; letter-spacing:.04em; }
.verdict { font-family:var(--disp); font-size:17px; margin:8px 0 4px; }
.verdict.ok { color:var(--good); } .verdict.no { color:var(--ink-dim); }
.stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:14px 0; }
.stat { background:var(--bg-panel-2); border:1px solid var(--line); border-radius:8px; padding:10px; }
.stat .v { font-family:var(--disp); font-size:22px; font-variant-numeric:tabular-nums; }
.stat .l { font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }
.sectionh { font:600 11px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 8px; }

/* by-band bars */
.bbar { display:grid; grid-template-columns:38px 1fr 52px; align-items:center; gap:8px; margin:4px 0; font-size:12px; }
.bbar .track { height:8px; background:var(--track); border-radius:4px; overflow:hidden; }
.bbar .fill { height:100%; border-radius:4px; }

/* analytics rows that can hold long country names (no overflow) */
.dxrow { margin:7px 0; }
.dxrow .top { display:flex; justify-content:space-between; gap:8px; font-size:12px; align-items:baseline; }
.dxrow .top .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dxrow .top .mx { flex:none; color:var(--ink-faint); font-size:11px; }
.dxrow .track { height:7px; background:var(--track); border-radius:4px; margin-top:3px; overflow:hidden; }
table.spots td.trunc { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* heard-by table */
table.spots { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
table.spots th { text-align:left; color:var(--ink-faint); font-weight:500; padding:4px 6px; position:sticky; top:0; background:var(--bg-panel); border-bottom:1px solid var(--line); }
table.spots td { padding:4px 6px; border-bottom:1px solid var(--table-line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
table.spots td.r { text-align:right; font-variant-numeric:tabular-nums; }
table.spots th.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
table.spots th.sortable:hover { color:var(--accent); }
.bc { display:inline-block; padding:1px 6px; border-radius:4px; font-family:var(--mono); font-size:11px; color:#0a0c10; font-weight:600; }
.callink { font-family:var(--mono); color:var(--ink); cursor:pointer; text-decoration:none; }
.callink:hover { color:var(--accent); }
.qrg { color:var(--warn); cursor:help; }
.lotw { display:inline-block; font-size:9px; font-weight:700; color:var(--good); border:1px solid var(--accent-line);
  border-radius:3px; padding:0 2px; margin-left:4px; vertical-align:middle; cursor:help; line-height:1.3; }
.shack { font-size:11.5px; color:var(--ink-dim); margin:4px 0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.shack .lotwtag { color:var(--good); border:1px solid var(--accent-line); border-radius:4px; padding:0 5px; font-size:10.5px; }

/* bearing rose */
.rose { display:block; margin:6px auto 2px; }
.legendchip { position:absolute; left:14px; bottom:12px; z-index:15; background:var(--glass); border:1px solid var(--line);
  border-radius:8px; padding:5px 10px; font-size:11px; color:var(--ink-dim); }

/* tabs */
.tabs { display:flex; gap:4px; margin:6px 0 2px; }
.tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-dim);
  padding:6px 8px; cursor:pointer; font-size:12px; }
.tabs button.on { color:var(--ink); border-color:var(--accent); }

a.q { color:var(--accent); text-decoration:none; font-size:12px; }

/* ── time scrubber ─────────────────────────────────────────────── */
#timebar { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:17;
  display:flex; align-items:center; gap:10px; width:min(660px,72vw);
  background:var(--glass); backdrop-filter:blur(6px); border:1px solid var(--line);
  border-radius:999px; padding:6px 14px; }
#timebar #play { background:none; border:0; color:var(--ink); cursor:pointer; font-size:14px; }
#timebar #scrub { flex:1; accent-color:var(--accent); }
#datepick, #playstep { background:var(--bg-panel-2); border:1px solid var(--line); border-radius:6px;
  color:var(--ink); font-family:var(--mono); font-size:11px; padding:2px 6px; cursor:pointer; }
#tlabel { min-width:96px; text-align:right; font-size:12px; color:var(--accent); cursor:pointer; }
#tlabel.past { color:var(--warn); }
@media (max-width:720px) {
  #legend { display:none; }
  #timebar { bottom:auto; top:52px; left:8px; right:8px; width:auto; transform:none; }
}

/* ── mobile ────────────────────────────────────────────────────── */
@media (max-width:720px) {
  #rail { display:none; }
  /* the single-row scroll is now the default (see base #bar); mobile just tightens spacing. */
  #bar { gap:8px; padding:8px; }
  .brand small { display:none; }
  .spacer { display:none; }
  .searchwrap { flex:0 0 150px; }
  #panel { right:0; left:0; top:auto; bottom:0; width:auto; max-height:72vh; border-radius:16px 16px 0 0; }
  .stats { grid-template-columns:1fr 1fr 1fr; }
}