:root {
  --bg: #02060b;
  --bg2: #050d16;
  --panel: rgba(5, 16, 27, .82);
  --line: rgba(0, 229, 255, .22);
  --line-hi: rgba(0, 229, 255, .6);
  --cyan: #00e5ff;
  --cyan-dim: #4fb8c9;
  --text: #cfeaf2;
  --muted: #5f8696;
  --police: #2f8cff;
  --fire: #ff3b3b;
  --ems: #1fe57a;
  --utility: #ff8a1f;
  --other: #93a4b3;
  --air: #c77dff;
  --amber: #ffb300;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --disp: "Orbitron", var(--mono);
}
/* Command screens are dark by design; same palette in both schemes. */
:root[data-theme="light"], :root:not([data-theme="light"]) { color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13px/1.4 var(--mono); overflow-x: hidden; }
/* The desktop layout is exactly one screen: nothing should ever scroll the
   page itself (panels scroll inside). Phones (<=900px) scroll vertically. */
@media (min-width: 901px) { html, body { overflow: hidden; } }
button { font: inherit; }

#app {
  height: 100vh; height: 100dvh;
  display: grid;
  grid-template-rows: 60px 1fr 118px;
  /* one column exactly the window's width: without this the column grows to
     the header's full content (all the tiles) and pushes the clock off-screen */
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(0,229,255,.07), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(47,140,255,.06), transparent 50%),
    var(--bg);
}

/* ---------------------------------------------------------------- header */
#hud-top {
  display: flex; align-items: center; gap: 24px; padding: 0 18px; min-width: 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,229,255,.06), transparent);
  position: relative;
}
#hud-top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .6; animation: sweep 6s linear infinite;
  background-size: 40% 100%; background-repeat: no-repeat;
}
@keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.clock { flex: none; }
.brand-mark {
  width: 30px; height: 30px; border: 1.5px solid var(--cyan); transform: rotate(45deg);
  display: grid; place-items: center; box-shadow: 0 0 14px rgba(0,229,255,.5), inset 0 0 8px rgba(0,229,255,.4);
}
.brand-mark span { width: 8px; height: 8px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 2s infinite; }
.brand-title { font-family: var(--disp); font-weight: 900; letter-spacing: .18em; font-size: 17px; color: #e8fbff; text-shadow: 0 0 12px rgba(0,229,255,.55); white-space: nowrap; }
.brand-title b { color: var(--cyan); }
.brand-sub { font-size: 9px; letter-spacing: .32em; color: var(--muted); white-space: nowrap; }

.top-stats { display: flex; gap: 10px; flex: 1; justify-content: safe center; align-items: center; min-width: 0;
  overflow-x: auto; scrollbar-width: none; }
.top-stats::-webkit-scrollbar { display: none; }
.stat { flex: none; }
.stat {
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 9px; min-width: 96px;
  border: 1px solid var(--line); background: rgba(0,20,30,.5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.stat i { width: 4px; height: 26px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.stat b { display: block; font-family: var(--disp); font-size: 17px; line-height: 1.05; color: #fff; }
.stat span { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.s-police { color: var(--police); } .s-fire { color: var(--fire); } .s-ems { color: var(--ems); }
.s-utility { color: var(--utility); } .s-calls { color: var(--amber); }
.s-loc { color: var(--amber); } .s-node { color: var(--cyan); }
.s-air, .s-atc { color: var(--air); }
button.stat { font: inherit; text-align: left; cursor: pointer; }
.stat.toggle { transition: filter .2s, opacity .2s, border-color .2s; }
.stat.toggle:hover { border-color: var(--line-hi); }
.stat.toggle:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }
.stat.toggle.off { color: #56616a; filter: grayscale(1); opacity: .5; }
.stat.toggle.off i { box-shadow: none; }
.stat.toggle.off b { color: #7b858c; }
.stat-note { font-size: 9px; color: var(--muted); letter-spacing: .2em; writing-mode: vertical-rl; transform: rotate(180deg); }

.clock { display: flex; align-items: center; gap: 14px; }
.times { text-align: right; font-family: var(--disp); white-space: nowrap; flex: none; contain: layout paint; }
/* Orbitron's digits are proportional ("1" is much narrower than "8"), so each
   character sits in its own fixed-width cell: the clock is the same width at
   every second and nothing else in the header moves. */
.times i { font-style: normal; display: inline-block; width: .86em; text-align: center; }
.times i.sep { width: .42em; }
.times i.sp { width: .4em; }
#clk-local { font-size: 16px; color: #fff; }
#clk-utc { font-size: 10px; color: var(--muted); }
.mode { display: flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid; font-family: var(--disp); font-size: 11px; letter-spacing: .2em; }
.mode.live { color: var(--ems); border-color: rgba(31,229,122,.5); }
.mode.history { color: var(--amber); border-color: rgba(255,179,0,.5); }
.mode.offline { color: var(--fire); border-color: rgba(255,59,59,.5); }
.blip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------------------------------------------------------------- stage */
#stage { display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
#map-wrap { position: relative; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { background: var(--bg); font: inherit; }
.leaflet-tile-pane { filter: brightness(.95) contrast(1.3) sepia(.5) hue-rotate(150deg) saturate(2.2); }
.map-labels { filter: sepia(.6) hue-rotate(150deg) saturate(2) brightness(1.3); opacity: .8; }
.leaflet-control-attribution { background: rgba(2,6,11,.7) !important; color: var(--muted) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--cyan-dim) !important; }
.leaflet-bar a { background: rgba(5,16,27,.9); color: var(--cyan); border-color: var(--line) !important; }
.leaflet-bar a:hover { background: rgba(0,229,255,.15); color: #fff; }

.fx-grid, .fx-scan, .fx-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 400; }
.fx-grid {
  background-image:
    linear-gradient(rgba(0,229,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
}
.fx-scan {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.fx-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 140px;
  background: linear-gradient(180deg, transparent, rgba(0,229,255,.06), transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { from { top: -140px; } to { top: 100%; } }
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%); }
.corner { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cyan); z-index: 401; pointer-events: none; opacity: .7; }
.corner.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.corner.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

#legend {
  position: absolute; left: 18px; bottom: 18px; z-index: 450; padding: 9px 12px;
  background: var(--panel); border: 1px solid var(--line); font-size: 10px; letter-spacing: .14em;
  backdrop-filter: blur(4px);
}
#legend div { display: flex; align-items: center; gap: 8px; line-height: 1.9; }
#legend i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; background: currentColor; }
.lg-police { color: var(--police); } .lg-fire { color: var(--fire); } .lg-ems { color: var(--ems); } .lg-utility { color: var(--utility); } .lg-other { color: var(--other); } .lg-air { color: var(--air); }
#legend .lg-check { display: flex; align-items: center; gap: 6px; margin-top: 4px; cursor: pointer; color: var(--air); }
#legend .lg-check input { accent-color: var(--air); margin: 0; }
#legend { max-width: 230px; }
#legend .lg-note { white-space: normal; line-height: 1.5;  color: var(--muted); font-size: 9px; letter-spacing: .08em; margin-top: 3px; }

/* NEXRAD weather overlay control (top right of the map) */
#map-panels { position: absolute; top: 16px; right: 18px; z-index: 450; width: 250px; display: grid; gap: 8px; }
#wx-panel, #eq-panel {
  padding: 8px 11px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(4px);
  font-size: 10px; letter-spacing: .14em;
}
#wx-panel.on { border-color: rgba(0,229,255,.45); }
#eq-panel.on { border-color: rgba(255,179,0,.45); }
.eq-toggle { color: var(--amber); }
.eq-toggle input { accent-color: var(--amber); }
.eq-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 6px; }
#eq-window, #eq-mag {
  width: 100%; background: #04111b; color: var(--text); border: 1px solid var(--line);
  font: 11px var(--mono); padding: 4px 5px; letter-spacing: 0;
}
#eq-info { color: var(--muted); letter-spacing: .08em; }
#eq-info b { color: var(--text); font-weight: 600; }
.eq-key { display: flex; flex-wrap: wrap; gap: 4px 9px; color: var(--muted); font-size: 9px; letter-spacing: .04em; align-items: center; }
.eq-key span { display: inline-flex; align-items: center; gap: 4px; }
.eq-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.6); }
.eq-key .a0, .eq-a0 { background: #ff2d2d; } .eq-key .a1 { background: #ff8c1a; }
.eq-key .a2 { background: #ffd23a; } .eq-key .a3 { background: #b7c2cc; }
.eq-key .eq-size { margin-left: auto; }
.eq-pulse i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #ff2d2d; box-shadow: 0 0 12px #ff2d2d; animation: ping 1.6s ease-out 4 forwards; }
.wx-toggle { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--cyan); font-family: var(--disp); }
.wx-toggle input, .wx-op input { accent-color: var(--cyan); margin: 0; }
.wx-body { margin-top: 8px; display: grid; gap: 7px; }
.wx-body[hidden] { display: none; }
#wx-product {
  width: 100%; background: #04111b; color: var(--text); border: 1px solid var(--line);
  font: 11px var(--mono); padding: 4px 5px; letter-spacing: 0;
}
#wx-product optgroup { color: var(--muted); font-style: normal; }
.wx-op { display: grid; grid-template-columns: auto 1fr 3.2em; align-items: center; gap: 8px; color: var(--muted); }
#wx-op-val { text-align: right; color: var(--text); }
#wx-time { color: var(--muted); letter-spacing: .08em; }
#wx-time b { color: var(--text); font-weight: 600; }
#wx-time.stale b { color: var(--amber); }
#wx-legend { max-width: 100%; justify-self: start; background: #fff; padding: 2px; border-radius: 2px; }
#wx-scale .bar { height: 9px; border: 1px solid rgba(255,255,255,.25); }
#wx-scale .ticks { position: relative; height: 12px; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: 0; }
#wx-scale .ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
#wx-scale .ticks span:first-child { transform: none; }
#wx-scale .ticks span:last-child { transform: translateX(-100%); }
#wx-scale .note { color: var(--muted); font-size: 9px; letter-spacing: .04em; margin-top: 1px; }
.leaflet-wx-pane { pointer-events: none; }

#window-label {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 450;
  font-family: var(--disp); font-size: 11px; letter-spacing: .2em; color: var(--cyan);
  padding: 5px 14px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap;
}
#window-label.history { color: var(--amber); border-color: rgba(255,179,0,.4); }
#window-label { display: flex; align-items: center; gap: 10px; }
#window-label .win-title { color: var(--muted); font-size: 9px; letter-spacing: .22em; }
#win-text { min-width: 150px; }
#win-slider { -webkit-appearance: none; appearance: none; width: 180px; height: 16px; background: transparent; cursor: pointer; margin: 0; }
#win-slider::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--line-hi), var(--line)); }
#win-slider::-moz-range-track { height: 3px; background: linear-gradient(90deg, var(--line-hi), var(--line)); }
#win-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 0;
  transform: rotate(45deg); background: currentColor; box-shadow: 0 0 8px currentColor; }
#win-slider::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 0; transform: rotate(45deg);
  background: currentColor; box-shadow: 0 0 8px currentColor; }
#window-label.history #win-slider { color: var(--amber); }
#win-slider:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
@media (max-width: 900px) {
  #window-label { max-width: calc(100% - 32px); }
  #win-slider { width: 110px; }
  #win-text { min-width: 0; }
}

#toast {
  position: absolute; top: 56px; left: 50%; transform: translate(-50%, -10px); z-index: 460; opacity: 0;
  transition: .35s; padding: 8px 16px; font-family: var(--disp); font-size: 12px; letter-spacing: .14em;
  background: rgba(40,0,0,.85); border: 1px solid var(--fire); color: #fff; box-shadow: 0 0 24px rgba(255,59,59,.4);
  pointer-events: none; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* map markers: call-type icon badge in the service colour */
.mk-wrap { background: none; border: 0; transition: opacity .6s; }
.mk {
  --c: var(--other);
  width: var(--sz); height: var(--sz); border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--c); background: radial-gradient(circle at 50% 45%, rgba(4,14,22,.92) 55%, rgba(4,14,22,.75));
  border: 2px solid var(--c);
  box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 12px var(--c), inset 0 0 10px color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform .15s;
}
.mk .ico { width: 58%; height: 58%; filter: drop-shadow(0 0 3px var(--c)); }
.mk-police { --c: var(--police); } .mk-fire { --c: var(--fire); } .mk-ems { --c: var(--ems); }
.mk-utility { --c: var(--utility); } .mk-other { --c: var(--other); }

/* ADS-B aircraft */
.ac-wrap { pointer-events: auto; }
.ac { position: relative; width: 26px; height: 26px; color: var(--air); }
.ac .ico { width: 26px; height: 26px; fill: rgba(199,125,255,.28); filter: drop-shadow(0 0 4px var(--air)); transition: transform .8s linear; }
.ac.ground .ico { opacity: .6; }
.ac.stale { opacity: .35; }
.ac.emerg { color: #ff3b3b; }
.ac.emerg .ico { fill: rgba(255,59,59,.4); filter: drop-shadow(0 0 6px #ff3b3b); }
.ac.atc .ico { animation: ac-atc 1s ease-in-out 6; }
@keyframes ac-atc { 50% { filter: drop-shadow(0 0 12px #fff); color: #fff; } }
.ac-label {
  position: absolute; left: 24px; top: 14px; white-space: nowrap; font-size: 9.5px; line-height: 1.25;
  color: #e6ccff; text-shadow: 0 0 3px #000, 0 0 6px #000; pointer-events: none; letter-spacing: .04em;
}
.ac-label small { color: var(--muted); font-size: 9px; }
.ac-wrap.hover .ac .ico { transform-origin: center; filter: drop-shadow(0 0 10px var(--air)); }
.ac-trail { pointer-events: none; }
.call-addr .ac-chip { cursor: pointer; color: var(--air); border: 1px solid var(--air); padding: 1px 6px;
  font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; }
.call-addr .ac-chip.partial { border-style: dashed; }
.call-addr .ac-chip:hover { background: rgba(199,125,255,.15); }
.mk.prio { outline: 2px solid #fff; outline-offset: 2px; }
.mk-wrap.hover .mk { transform: scale(1.18); }
.ico { width: 1.25em; height: 1.25em; vertical-align: -.28em; flex: none; }
.t-type .ico, .call-type .ico { margin-right: 6px; }
.pulse { pointer-events: none; }
.pulse i {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid currentColor; box-shadow: 0 0 12px currentColor;
  animation: ping 1.6s ease-out 4 forwards;
}
.pulse i + i { animation-delay: .5s; }
@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(5); opacity: 0; } }
.station-icon div {
  width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid var(--cyan);
  background: rgba(0,229,255,.2); box-shadow: 0 0 12px var(--cyan);
}

/* hover card */
.hud-tip {
  position: fixed; z-index: 2000; width: 360px; max-width: calc(100vw - 24px); pointer-events: none;
  background: rgba(3, 12, 20, .94); border: 1px solid var(--line-hi);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 10px 40px rgba(0,0,0,.6), 0 0 24px rgba(0,229,255,.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 12px 14px 10px; font-size: 12px;
}
.hud-tip .t-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chip { font-family: var(--disp); font-size: 10px; letter-spacing: .14em; padding: 2px 7px; border: 1px solid currentColor; white-space: nowrap; }
.chip.solid { color: #000 !important; border: 0; font-weight: 700; }
.c-police { color: var(--police); } .c-fire { color: var(--fire); } .c-ems { color: var(--ems); } .c-utility { color: var(--utility); } .c-other { color: var(--other); } .c-air { color: var(--air); }
.chip.solid.c-police { background: var(--police); } .chip.solid.c-fire { background: var(--fire); }
.chip.solid.c-ems { background: var(--ems); } .chip.solid.c-utility { background: var(--utility); } .chip.solid.c-other { background: var(--other); } .chip.solid.c-air { background: var(--air); }
.t-type { font-family: var(--disp); font-size: 14px; color: #fff; letter-spacing: .05em; }
.t-addr { font-size: 15px; color: var(--cyan); margin: 2px 0 1px; font-weight: 600; }
.t-matched { color: var(--muted); font-size: 10px; margin-bottom: 8px; }
.t-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 11px; margin-bottom: 8px; }
.t-grid dt { color: var(--muted); letter-spacing: .12em; font-size: 9.5px; padding-top: 2px; }
.t-grid dd { margin: 0; color: var(--text); }
.t-codes span { display: inline-block; margin: 0 4px 3px 0; padding: 1px 5px; background: rgba(0,229,255,.08); border: 1px solid var(--line); font-size: 10px; }
.t-recent { border-top: 1px dashed var(--line); padding-top: 6px; }
.t-recent div { margin-bottom: 5px; color: #b6d3dc; }
.t-recent time { color: var(--muted); margin-right: 6px; font-size: 10px; }
.prio { color: var(--amber); letter-spacing: .1em; }

/* ---------------------------------------------------------------- side */
#side { display: flex; flex-direction: column; min-height: 0; background: linear-gradient(180deg, rgba(0,20,30,.35), transparent); }
.panel-head {
  display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 9px;
  border-bottom: 1px solid var(--line); font-family: var(--disp);
}
.panel-head.small { padding-top: 9px; }
.ph-title { font-size: 12px; letter-spacing: .24em; color: var(--cyan); font-weight: 700; }
.ph-sub { font-size: 9px; letter-spacing: .2em; color: var(--muted); }
.ph-toggle { margin-left: auto; font-size: 9px; letter-spacing: .2em; color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 5px; }
.ph-toggle input { accent-color: var(--cyan); margin: 0; }
#feed { flex: 1; overflow-y: auto; padding: 10px 12px; min-height: 0; }
#feed::-webkit-scrollbar, #nodes::-webkit-scrollbar { width: 6px; }
#feed::-webkit-scrollbar-thumb, #nodes::-webkit-scrollbar-thumb { background: var(--line); }
.call {
  position: relative; margin-bottom: 9px; padding: 9px 11px 9px 14px; cursor: default;
  background: rgba(5, 18, 28, .78); border: 1px solid rgba(0,229,255,.12);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.call.has-loc { cursor: pointer; }
.call.has-loc:hover { border-color: var(--line-hi); background: rgba(0,40,55,.7); }
.call::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.call.new { box-shadow: inset 0 0 30px rgba(0,229,255,.12); transition: box-shadow 1.2s; }
.call.enter { animation: slidein .45s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
.call-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 10.5px; }
.call-top time { color: var(--muted); }
.call-top .tg { color: var(--cyan-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.call-top .rx { color: var(--muted); font-size: 9.5px; }
.call-type { font-family: var(--disp); font-size: 11.5px; color: #fff; letter-spacing: .06em; margin-bottom: 3px; }
.call-text { color: #a9c7d1; font-size: 12px; word-wrap: break-word; }
.call-text .tw-rest { color: transparent; }
.call-text .caret { margin-right: -7px; position: relative; z-index: 1; }
.call-text .caret { display: inline-block; width: 7px; height: 12px; background: var(--cyan); vertical-align: -1px; animation: blink .8s infinite; }
.call-addr { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 5px; }
.call-addr span { font-size: 10.5px; color: var(--amber); padding: 1px 6px; border: 1px solid rgba(255,179,0,.35); }
.call-addr span.unloc { color: var(--muted); border-color: var(--line); }
.call-addr span.pending { border-style: dashed; }
.call-top .agency, .t-head .agency { color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.call-top .who { color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.call-top .who.console { color: var(--cyan-dim); letter-spacing: .1em; }
.call-units { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.call-units[hidden], .call-addr[hidden], .call-type[hidden], .call-meta[hidden], .call-inc[hidden] { display: none; }
.unit { font-size: 10px; padding: 0 5px; color: var(--text); border: 1px solid var(--line); background: rgba(0,229,255,.05); white-space: nowrap; }
.unit.st-assigned { border-color: var(--amber); color: var(--amber); }
.unit.st-enroute { border-color: var(--police); color: #8cc0ff; }
.unit.st-onscene { border-color: var(--ems); color: var(--ems); }
.unit.st-clear, .unit.st-reassigned { color: var(--muted); text-decoration: line-through; opacity: .7; }
.status { font-family: var(--disp); font-size: 9px; letter-spacing: .14em; padding: 1px 6px; border: 1px solid currentColor; }
.status.st-clear { color: var(--muted); } .status.st-onscene { color: var(--ems); } .status.st-enroute { color: #8cc0ff; }
.inc-link {
  margin-top: 6px; padding: 2px 7px; background: transparent; cursor: pointer; color: var(--muted);
  border: 1px solid var(--line); font-family: var(--disp); font-size: 9px; letter-spacing: .14em;
}
.inc-link.open { color: var(--amber); border-color: rgba(255,179,0,.45); }
.inc-link:hover { color: #fff; border-color: var(--line-hi); }
.call.inc { cursor: pointer; }
.call.inc.closed { opacity: .62; }
.call.inc.open { border-color: rgba(255,179,0,.3); }
.thread-head { padding: 4px 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.thread-head .back { background: transparent; color: var(--cyan); border: 1px solid var(--line); cursor: pointer;
  font-family: var(--disp); font-size: 9px; letter-spacing: .16em; padding: 3px 8px; margin-bottom: 8px; }
.ph-tabs { display: flex; gap: 4px; }
.ph-tabs button {
  background: transparent; color: var(--muted); border: 1px solid var(--line); cursor: pointer; padding: 3px 10px;
  font-family: var(--disp); font-size: 10px; letter-spacing: .22em; font-weight: 700;
}
.ph-tabs button.on { color: #000; background: var(--cyan); border-color: var(--cyan); }
.ph-toggle[hidden] { display: none; }
.call-meta { margin-top: 4px; font-size: 10px; color: var(--muted); }
.empty { color: var(--muted); padding: 26px 10px; text-align: center; font-size: 11px; letter-spacing: .1em; line-height: 1.8; }

#nodes { max-height: 132px; overflow-y: auto; padding: 8px 12px 10px; }
.node { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 11px; }
.node i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.node.on i { background: var(--ems); box-shadow: 0 0 8px var(--ems); animation: blink 2s infinite; }
.node b { color: var(--text); font-weight: 600; }
.node span { color: var(--muted); margin-left: auto; font-size: 10px; white-space: nowrap; }

/* ---------------------------------------------------------------- timeline */
#timeline { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--line); background: rgba(2,10,16,.9); min-width: 0; }
.tl-controls { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-right: 1px solid var(--line); }
.tl-controls button {
  background: transparent; color: var(--cyan-dim); border: 1px solid var(--line); padding: 4px 8px; cursor: pointer;
  font-family: var(--disp); font-size: 10px; letter-spacing: .14em;
}
.tl-controls button:hover { color: #fff; border-color: var(--line-hi); }
.tl-controls button.on { color: #000; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0,229,255,.4); }
.tl-controls > button { width: 100%; }
#btn-play { font-size: 12px; }
.tl-range { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.tl-range button { padding: 3px 0; font-family: var(--mono); font-weight: 600; }
#tl-canvas-wrap { position: relative; min-width: 0; cursor: crosshair; }
#tl { position: absolute; inset: 0; width: 100%; height: 100%; }
#tl-brush {
  position: absolute; top: 6px; bottom: 18px; border: 1px solid var(--cyan); cursor: grab;
  background: linear-gradient(180deg, rgba(0,229,255,.16), rgba(0,229,255,.04));
  box-shadow: 0 0 18px rgba(0,229,255,.25), inset 0 0 12px rgba(0,229,255,.15);
}
#tl-brush.drag { cursor: grabbing; }
#tl-brush.history { border-color: var(--amber); background: linear-gradient(180deg, rgba(255,179,0,.18), rgba(255,179,0,.04)); box-shadow: 0 0 18px rgba(255,179,0,.25); }
#tl-brush span { position: absolute; top: -1px; right: -1px; width: 3px; bottom: -1px; background: currentColor; color: var(--cyan); box-shadow: 0 0 10px currentColor; }
#tl-brush.history span { color: var(--amber); }
#tl-hover { position: absolute; top: 4px; pointer-events: none; font-size: 10px; color: #fff; background: rgba(0,0,0,.75); padding: 2px 6px; border: 1px solid var(--line); white-space: nowrap; display: none; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  #app { grid-template-rows: auto 1fr 110px; height: auto; min-height: 100dvh; }
  #hud-top { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  .top-stats { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; }
  .stat { min-width: 84px; }
  .stat-note { display: none; }
  .clock { margin-left: auto; }
  #stage { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  #map-wrap { border-right: 0; border-bottom: 1px solid var(--line); }
  #side { max-height: none; }
  #feed { max-height: 60vh; }
  #timeline { grid-template-columns: 1fr; grid-template-rows: auto 80px; }
  .tl-controls { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 16px; }
  .tl-controls > button { width: auto; }
  .tl-range { flex: 1; }
  #legend { display: none; }
  #map-panels { top: auto; bottom: 12px; right: 12px; width: 210px; }
}

/* recording playback (clips are streamed from the station that heard them) */
.play {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 18px;
  margin-left: auto; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--cyan);
  cursor: pointer; border-radius: 2px;
}
.call-top .who + .play, .call-top .tg + .play { margin-left: 2px; }
.thread-head .call-type .play { margin-left: 8px; vertical-align: middle; }
.play svg { width: 13px; height: 13px; display: block; }
.play .x { display: none; }
.play:hover { border-color: var(--cyan); background: rgba(0, 229, 255, .12); }
.play.playing { border-color: var(--cyan); background: rgba(0, 229, 255, .18); }
.play.playing .w1 { animation: spk 1s ease-in-out infinite; }
.play.playing .w2 { animation: spk 1s ease-in-out .25s infinite; }
.play.loading { opacity: .7; animation: blink 0.9s linear infinite; cursor: progress; }
.play.off { color: var(--muted); opacity: .55; cursor: not-allowed; border-style: dashed; }
.play.off:hover { background: transparent; border-color: var(--line); }
.play.off .x { display: inline; }
.play.off .w1, .play.off .w2 { opacity: .35; }
@keyframes spk { 50% { opacity: .15; } }

/* radio system a transmission was heard on (TACN, MTRS, ...) */
.call-top .sys { flex: none; padding: 0 4px; border: 1px solid var(--line); color: var(--muted);
  font-size: 9px; letter-spacing: .08em; line-height: 14px; white-space: nowrap; }