/* ARGUS — European Signal Monitor */

:root {
  --bg:        #05070a;
  --panel:     rgba(9, 13, 19, .92);
  --panel-brd: #16222e;
  --land:      #0e1620;
  --land-brd:  #2a415a;
  --grid:      #0d1720;
  --txt:       #c9d7e2;
  --dim:       #5b7284;
  --faint:     #33465a;
  --cyan:      #3fd2e8;
  --amber:     #f2a93b;
  --red:       #ff5149;
  --violet:    #a97df2;
  --green:     #43e08f;
  --steel:     #8fa8c0;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--mono);
  font-size: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */

#topbar {
  height: 46px;
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--panel-brd);
  background: linear-gradient(180deg, rgba(12,18,26,.95), rgba(7,10,15,.95));
  z-index: 30;
}

.brand { display: flex; align-items: baseline; gap: 14px; }

.brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .45em;
  color: #e8f2f8;
  text-shadow: 0 0 12px rgba(63, 210, 232, .35);
}

.brand-sub {
  font-size: 9px;
  letter-spacing: .28em;
  color: var(--dim);
}

.top-right { display: flex; align-items: center; gap: 18px; }

.panel-toggle {
  display: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--dim);
  background: none;
  border: 1px solid var(--panel-brd);
  padding: 5px 10px;
  cursor: pointer;
}
.panel-toggle.active { color: var(--cyan); border-color: var(--cyan); }

#mode-switch {
  display: flex;
  border: 1px solid var(--panel-brd);
}
#mode-switch button {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  padding: 5px 12px;
  background: none;
  border: none;
  color: var(--faint);
  cursor: pointer;
}
#mode-switch button.on {
  color: var(--cyan);
  background: rgba(63, 210, 232, .08);
  text-shadow: 0 0 8px rgba(63, 210, 232, .5);
}

.clock-block { display: flex; align-items: baseline; gap: 6px; }
#clock-utc { font-size: 13px; font-weight: 600; color: #dfeaf2; letter-spacing: .08em; }
.clock-label { font-size: 9px; color: var(--dim); letter-spacing: .2em; }

.status-block { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .18em; color: var(--dim); }

.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: blink 2.2s ease-in-out infinite;
}

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- stage ---------- */

#stage { position: relative; flex: 1; min-height: 0; }

#map-wrap { position: absolute; inset: 0; background: var(--bg); }

#map { position: absolute; inset: 0; }

/* tint the greyscale Dark Matter basemap toward the blue-black theme */
#map .maplibregl-canvas {
  filter: sepia(.45) hue-rotate(175deg) saturate(1.6) brightness(.82) contrast(1.06);
}

.maplibregl-ctrl-attrib {
  background: rgba(7, 11, 17, .82) !important;
  font-family: var(--mono);
  font-size: 9px;
}
.maplibregl-ctrl-attrib a { color: var(--dim) !important; }

/* scanlines + vignette */
#fx-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 3px);
  mix-blend-mode: multiply;
}
#fx-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(2,4,7,.85) 100%);
}

/* ---------- markers (DOM elements driven by MapLibre) ---------- */

.mk {
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mk::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pc, var(--cyan));
  box-shadow: 0 0 8px var(--pc, var(--cyan)), 0 0 1px 1px rgba(0,0,0,.55);
}
.mk:hover::before { box-shadow: 0 0 12px var(--pc, var(--cyan)), 0 0 2px 2px rgba(0,0,0,.55); }

.ping-el { width: 0; height: 0; pointer-events: none; }
.ping-el::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border: 1.5px solid var(--pc, var(--cyan));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pingx 1.8s cubic-bezier(.2,.7,.4,1) forwards;
}

@keyframes pingx {
  0%   { width: 8px;  height: 8px;  opacity: .95; }
  100% { width: 58px; height: 58px; opacity: 0; }
}

/* ---------- panels ---------- */

.panel {
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 252px;
  background: var(--panel);
  border: 1px solid var(--panel-brd);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  z-index: 20;
}

#panel-layers { left: 14px; }
#panel-feed   { right: 14px; width: 300px; }

.panel-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--steel);
  border-bottom: 1px solid var(--panel-brd);
}
.panel-head.accent { color: var(--cyan); text-shadow: 0 0 10px rgba(63,210,232,.4); }
.panel-head-dim { color: var(--faint); letter-spacing: .1em; font-weight: 400; }

/* layers list */

#layer-list { list-style: none; padding: 6px 0; overflow-y: auto; }

.layer-section {
  padding: 12px 12px 4px;
  font-size: 8px;
  letter-spacing: .24em;
  color: var(--faint);
  border-top: 1px solid var(--panel-brd);
  margin-top: 8px;
}

/* the canvas FLIR filter shifts the POI gold to ice-blue in events mode — swatch follows */
.poi-sw { background: #9fc2f0; }
body.aftermath .poi-sw { background: #c8a83a; }

.layer-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  border-left: 2px solid transparent;
}
.layer-row:hover { background: rgba(63,210,232,.04); }
.layer-row.off { opacity: .38; }

.layer-swatch {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  box-shadow: 0 0 7px currentColor;
}

.layer-name { flex: 1; font-size: 11px; letter-spacing: .12em; color: var(--txt); }

.layer-count {
  font-size: 10px;
  color: var(--dim);
  min-width: 26px;
  text-align: right;
}

.layer-sw {
  width: 26px; height: 13px;
  border: 1px solid var(--faint);
  border-radius: 8px;
  position: relative;
  flex: 0 0 26px;
}
.layer-sw::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dim);
  transition: transform .15s, background .15s;
}
.layer-row:not(.off) .layer-sw::after { transform: translateX(13px); background: currentColor; }

.panel-foot {
  margin-top: auto;
  border-top: 1px solid var(--panel-brd);
  padding: 9px 12px;
  display: grid;
  gap: 5px;
}
.foot-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--faint);
}
.foot-row .ok   { color: var(--green); }
.foot-row .warn { color: var(--amber); }

/* feed */

#feed-scroll { flex: 1; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: var(--faint) transparent; }

#feed-empty { padding: 16px 12px; color: var(--faint); font-size: 10px; letter-spacing: .1em; }

.feed-item {
  padding: 9px 12px 10px;
  border-bottom: 1px solid rgba(22,34,46,.7);
  border-left: 2px solid var(--cat, var(--dim));
  cursor: pointer;
  animation: feedin .35s ease-out;
}
.feed-item:hover { background: rgba(63,210,232,.05); }

@keyframes feedin {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.feed-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .14em;
  margin-bottom: 4px;
}
.feed-cat  { color: var(--cat, var(--dim)); font-weight: 600; }
.feed-sev  { color: var(--sev, var(--dim)); font-weight: 600; }
.feed-time { color: var(--faint); }

/* dual-voice feed: events voice by default, aftermath voice in white mode */
.f-cq { display: none; }
body.aftermath .f-ev { display: none; }
body.aftermath .f-cq { display: block; }
body.aftermath span.f-cq { display: inline; }
body.aftermath .feed-item { border-left-color: var(--sev, var(--dim)); }

.feed-title { font-size: 11px; line-height: 1.45; color: var(--txt); }

.feed-loc { margin-top: 4px; font-size: 9px; letter-spacing: .12em; color: var(--dim); }
.feed-loc::before { content: "▸ "; color: var(--faint); }

/* ---------- intercept dossier popup ---------- */

#leader {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 14;
  overflow: visible;
}
#leader path {
  fill: none;
  stroke-width: 1.2;
}
#leader .leader-dot { stroke: none; }

#popup {
  position: absolute;
  width: 282px;
  background: rgba(7, 11, 17, .97);
  border: 1px solid var(--acc, var(--cyan));
  box-shadow: 0 0 22px rgba(0,0,0,.75), 0 0 9px color-mix(in srgb, var(--acc, var(--cyan)) 22%, transparent);
  z-index: 15;
  animation: ppIn .22s ease-out;
}

@keyframes ppIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

#popup.snap { transition: left .18s ease-out, top .18s ease-out, width .18s ease-out; }

/* corner brackets */
#popup .c {
  position: absolute;
  width: 9px; height: 9px;
  border: 0 solid var(--acc, var(--cyan));
  pointer-events: none;
}
#popup .c.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
#popup .c.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
#popup .c.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
#popup .c.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.pp-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--panel-brd);
  background: color-mix(in srgb, var(--acc, var(--cyan)) 7%, transparent);
}
.pp-id { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #e8f2f8; }
.pp-cat { font-size: 9px; font-weight: 600; letter-spacing: .2em; color: var(--acc, var(--cyan)); }
.pp-max {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--dim);
  background: none; border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.pp-max svg { width: 11px; height: 11px; display: block; }
.pp-max:hover { color: var(--acc, var(--cyan)); }

.pp-x {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  background: none; border: none;
  cursor: pointer;
  padding: 2px 4px;
}
.pp-x:hover { color: var(--txt); }

/* expanded reading mode */
#popup.expanded { width: min(460px, 92vw); }
#popup.expanded .pp-photo { height: 200px; }
#popup.expanded .pp-title { font-size: 13px; padding: 11px 12px 10px; }
#popup.expanded .pp-grid { padding: 9px 12px 12px; gap: 7px; }
#popup.expanded .pp-row { font-size: 11px; }
#popup.expanded .pp-k { flex: 0 0 112px; font-size: 9.5px; }
#popup.expanded .pp-id { font-size: 11.5px; }
#popup.expanded .pp-cat { font-size: 10px; }

.pp-photo {
  position: relative;
  height: 128px;
  overflow: hidden;
  border-bottom: 1px solid var(--panel-brd);
  background: #08101a;
}
.pp-photo svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.pp-photo .frame-cross   { stroke: var(--acc, var(--cyan)); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .8; }
.pp-photo .frame-ring    { fill: none; stroke: var(--acc, var(--cyan)); stroke-width: 1; vector-effect: non-scaling-stroke; }

.pp-noise {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.22) 2px 3px),
    repeating-linear-gradient(90deg, rgba(63,210,232,.02) 0 3px, transparent 3px 7px);
}
.pp-scan {
  position: absolute; left: 0; right: 0; height: 26px; top: -30px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc, var(--cyan)) 14%, transparent), transparent);
  animation: ppscan 3.2s linear infinite;
  pointer-events: none;
}
@keyframes ppscan { to { transform: translateY(190px); } }

.pp-photo-label {
  position: absolute;
  left: 7px; bottom: 5px;
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--dim);
  text-shadow: 0 1px 3px #000;
}
.pp-photo-rec {
  position: absolute;
  right: 7px; top: 5px;
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--red);
  animation: blink 1.4s ease-in-out infinite;
}

.pp-title {
  padding: 9px 10px 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #dce8f1;
  border-bottom: 1px solid var(--panel-brd);
}

.pp-grid { padding: 7px 10px 9px; display: grid; gap: 5px; }
.pp-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 9.5px;
}
.pp-k { flex: 0 0 84px; color: var(--faint); letter-spacing: .18em; font-size: 8.5px; }
.pp-v { color: var(--steel); letter-spacing: .06em; }
.pp-v.hot { color: var(--acc, var(--cyan)); }

.pp-bar {
  flex: 1;
  height: 4px;
  background: #12202e;
  position: relative;
  align-self: center;
}
.pp-bar i {
  position: absolute; inset: 0 auto 0 0;
  background: var(--acc, var(--cyan));
  box-shadow: 0 0 6px var(--acc, var(--cyan));
}
.pp-conf { color: var(--acc, var(--cyan)); font-size: 9.5px; min-width: 30px; text-align: right; }

@media (max-width: 980px) {
  #popup { width: min(282px, 80vw); }
}

@media (prefers-reduced-motion: reduce) {
  #popup { animation: none; }
  .pp-scan, .pp-photo-rec { animation: none; }
  #leader path { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------- bottom bar ---------- */

#bottombar {
  height: 30px;
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 16px;
  border-top: 1px solid var(--panel-brd);
  background: rgba(8, 12, 17, .96);
  font-size: 10px;
  letter-spacing: .1em;
  z-index: 30;
}

.bb-group { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bb-label { color: var(--faint); letter-spacing: .2em; font-size: 9px; }
#bb-coords, #bb-signals, #bb-zoom { color: var(--steel); }
#bb-country { color: var(--cyan); }
.bb-fill { flex: 1; }
.bb-brand { color: var(--faint); font-size: 9px; letter-spacing: .16em; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .panel-toggle { display: block; }
  .brand-sub { display: none; }
  .panel { top: 10px; bottom: 40px; transition: transform .25s ease, opacity .25s ease; }
  #panel-layers { transform: translateX(-115%); opacity: 0; }
  #panel-feed   { transform: translateX(115%);  opacity: 0; }
  #panel-layers.open, #panel-feed.open { transform: none; opacity: 1; }
  #bb-country-wrap, .bb-brand { display: none; }
  #bottombar { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ping-el::before { animation: none; opacity: 0; }
  .status-dot { animation: none; }
  .feed-item { animation: none; }
}

/* ============ AFTERMATH — white forensic layer ============ */

body.aftermath {
  --bg:        #e9ecec;
  --panel:     rgba(249, 250, 249, .94);
  --panel-brd: #c3ccd2;
  --txt:       #1b2830;
  --dim:       #586b76;
  --faint:     #8b9ca6;
  --steel:     #2e4356;
  --cyan:      #a41224;   /* accent flips to forensic red */
}

body.aftermath #topbar {
  background: linear-gradient(180deg, rgba(252,253,252,.97), rgba(240,243,243,.97));
  border-bottom-color: var(--panel-brd);
}
body.aftermath .brand-name { color: #131f28; text-shadow: 0 0 12px rgba(164,18,36,.25); }
body.aftermath #clock-utc { color: #16232c; }

body.aftermath #mode-switch button.on {
  color: #a41224;
  background: rgba(164, 18, 36, .07);
  text-shadow: none;
}

body.aftermath #map-wrap { background: var(--bg); }
body.aftermath #map .maplibregl-canvas {
  filter: saturate(.75) contrast(1.03);
}
body.aftermath .maplibregl-ctrl-attrib { background: rgba(250,251,250,.85) !important; }

body.aftermath #fx-scanlines {
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(30,40,48,.05) 2px 3px);
  mix-blend-mode: normal;
}
body.aftermath #fx-vignette {
  background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 55%, rgba(214,220,222,.8) 100%);
}

body.aftermath .panel-head.accent { color: #a41224; text-shadow: none; }
body.aftermath .feed-item:hover { background: rgba(164,18,36,.04); }
body.aftermath .feed-item { border-bottom-color: rgba(195,204,210,.6); }
body.aftermath .layer-row:hover { background: rgba(164,18,36,.04); }

body.aftermath #bottombar {
  background: rgba(246, 248, 247, .97);
  border-top-color: var(--panel-brd);
}
body.aftermath #bb-country { color: #a41224; }

/* markers & pings recolored by severity on the white layer */
body.aftermath .mk::before {
  background: var(--sc, #a41224);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc, #a41224) 18%, transparent), 0 0 1px 1px rgba(0,0,0,.25);
}
body.aftermath .mk:hover::before {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc, #a41224) 25%, transparent), 0 0 1px 1px rgba(0,0,0,.25);
}
body.aftermath .ping-el::before { border-color: var(--sc, #a41224); }

/* dossier goes paper-white */
body.aftermath #popup {
  background: rgba(252, 253, 252, .98);
  box-shadow: 0 4px 26px rgba(20, 32, 40, .28), 0 0 9px color-mix(in srgb, var(--acc, #a41224) 16%, transparent);
}
body.aftermath .pp-id { color: #16232c; }
body.aftermath .pp-title { color: #22323e; border-bottom-color: var(--panel-brd); }
body.aftermath .pp-top { border-bottom-color: var(--panel-brd); }
body.aftermath .pp-x { color: var(--dim); }
body.aftermath .pp-x:hover { color: #16232c; }
body.aftermath .pp-bar { background: #dde4e7; }
body.aftermath .pp-photo { border-bottom-color: var(--panel-brd); }