/* DEAD RECKONING — "the quiet instrument"
   Dark ops-room. Charcoal ground, hairline chrome, monospace data.
   The map is the hero; everything else recedes. */

:root {
  --bg:        #0a0c0f;   /* deep charcoal ground, not pure black */
  --bg-panel:  #10141a;
  --bg-panel2: #151b22;
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.12);
  --ink:       #e6ebf0;   /* primary text */
  --ink-dim:   #8b96a3;   /* secondary text */
  --ink-faint: #5a6473;   /* tertiary / captions */
  --phosphor:  #35e0d0;   /* single cold accent — used sparingly */
  --phosphor-dim: #1c6b66;
  --warn:      #ffcf5c;
  --extreme:   #ff5a48;   /* reserved for extreme anomaly only */

  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* spacing scale — 4px base (C2). Use these on new/redesigned components. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --pad: 16px;
  /* radius scale — 3 steps (C1): data chips / panels / cards */
  --radius-1: 2px; --radius: 4px; --radius-2: 8px;
  --focus: var(--phosphor);   /* keyboard focus ring (C4) */
}

/* ===== LIGHT THEME =====
   A per-theme REBUILD, not a variable flip: the data ramps invert (dark/
   saturated high ends so the signal survives a light ground), the carpet/
   hatch/violet/glow recalibrate, and CVD is re-verified per theme. Dark stays
   the default identity; light is an accommodation. Map ramp/layer colors live
   in js/color.js (DR_COLOR.setTheme) and js/app.js (THEME map palette). */
html[data-theme="light"] {
  --bg:        #e9edf2;   /* soft paper-slate, not pure white */
  --bg-panel:  #ffffff;
  --bg-panel2: #f2f5f9;
  --line:      rgba(22,32,46,0.12);
  --line-2:    rgba(22,32,46,0.20);
  --ink:       #182430;   /* dark slate */
  --ink-dim:   #45525e;
  --ink-faint: #667381;   /* meets AA on white panels */
  --phosphor:  #0c8478;   /* darker teal — readable accent on light */
  --phosphor-dim: #0c8478;/* active-fill (paired with near-white text) */
  --warn:      #9a6410;
  --extreme:   #cf3323;   /* reserved extreme, darkened for the light ground */
}

/* light-theme component overrides: the legend ramp previews + swatches + loader
   poster must match the light DATA ramps (see js/color.js light set). */
html[data-theme="light"] .ramp.raw  { background: linear-gradient(90deg,#f5ead3,#f3c877,#ec8a2f,#d8531c,#a82814,#6e1108); }
html[data-theme="light"] .ramp.anom { background: linear-gradient(90deg,#efe6ee,#c99fca,#9c4a9c,#6a1f6b,#37103c); }
html[data-theme="light"] .ramp.cov  { background: linear-gradient(90deg,#dbe6f0,#9fbdd8,#5f8fbe,#356199,#183a63); }
html[data-theme="light"] .swatch.quiet { background-color:#3f9184; }
html[data-theme="light"] .swatch.outlined { border-color:#6d4fb0; }
html[data-theme="light"] .swatch.insufficient {
  background-color:#dfe4ea;
  background-image: repeating-linear-gradient(45deg, rgba(40,52,68,.5) 0 1px, transparent 1px 4px);
}
html[data-theme="light"] .loader::before {
  background:
    linear-gradient(rgba(233,237,242,0.30), rgba(233,237,242,0.55)),
    url("../assets/og-image-light.jpg") center / cover no-repeat;
}
/* on light, the MapLibre control icons are already dark — do NOT invert them
   (the dark-theme invert made them near-invisible on the white control). */
html[data-theme="light"] .maplibregl-ctrl-icon,
html[data-theme="light"] .maplibregl-ctrl-attrib-button { filter: none !important; }
/* first-run orientation key must match the LIGHT map (R1): light swatches +
   a dark hatch (the white hatch was invisible on the white intro card). */
html[data-theme="light"] .intro-how .k-quiet { background:#3f9184; }
html[data-theme="light"] .intro-how .k-degraded { background:#a82814; }
html[data-theme="light"] .intro-how .k-outlined { background:#6d4fb0; }
html[data-theme="light"] .intro-how .k-coverage { background:#356199; }
html[data-theme="light"] .intro-how .k.hatch {
  background-color:#dfe4ea;
  background-image:repeating-linear-gradient(45deg,rgba(40,52,68,.5) 0 1px,transparent 1px 4px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--phosphor); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- data typography: monospace, tabular ---- */
.mono, .val, .coord, .ts {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ================= app shell ================= */
#app { position: fixed; inset: 0; display: grid;
  grid-template-rows: auto 1fr auto; }

/* ---- top bar ---- */
header.topbar {
  position: relative;
  display: flex; align-items: baseline; gap: 18px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0,0,0,0.4), transparent);
  z-index: 5;
}
/* always-on UTC date, centered IN the top bar (independent of the timeline,
   so it stays visible when the scrubber is fully collapsed). */
.topbar-date {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--ink); white-space: nowrap;
  background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 3px 12px; pointer-events: none;
}
.brand {
  font-family: var(--mono);
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  font-size: 13px; color: var(--ink);
}
.brand .dot { color: var(--phosphor); }
.tagline { color: var(--ink-faint); font-size: 12px; letter-spacing: 0.02em; }
.topbar .spacer { flex: 1; }
.topbar nav a { color: var(--ink-dim); font-size: 12px; margin-left: 16px;
  text-transform: uppercase; letter-spacing: 0.12em; }
.topbar nav a:hover { color: var(--phosphor); text-decoration: none; }
.byline { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.04em; }
.byline:hover { color: var(--phosphor); text-decoration: none; }
@media (max-width: 760px) { .byline { display: none; } }

/* ---- map ---- */
#map { position: relative; width: 100%; height: 100%; background: var(--bg); }
.maplibregl-ctrl-bottom-right { z-index: 2; }
/* Dark-mode the MapLibre controls (zoom +/- and attribution) to match the
   instrument, and keep attribution collapsed to the "i" by default. */
.maplibregl-ctrl-group {
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important;
  backdrop-filter: blur(8px); border-radius: var(--radius) !important;
}
.maplibregl-ctrl-group button { background: transparent !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl-group button:hover { background: rgba(255,255,255,0.06) !important; }
.maplibregl-ctrl-icon { filter: invert(1) brightness(0.85) !important; }
.maplibregl-ctrl-attrib {
  font-size: 10px !important;
  background: color-mix(in srgb, var(--bg-panel) 85%, transparent) !important;
  color: var(--ink-faint) !important; backdrop-filter: blur(6px);
  border-radius: var(--radius) !important;
}
.maplibregl-ctrl-attrib a { color: var(--ink-dim) !important; }
/* the "i" button carries the info icon as its OWN background, so invert must run
   on a transparent button (else it flips the dark chip to grey). The dark chip
   comes from the compact container below. */
.maplibregl-ctrl-attrib-button {
  background-color: transparent !important;
  filter: invert(0.92) !important;
}
/* collapsed compact state: a dark rounded chip holding just the "i" */
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent) !important;
  border: 1px solid var(--line) !important; min-height: 24px; min-width: 24px;
  box-shadow: none !important;
}

/* legend + mode controls float over the map */
.map-overlay {
  position: absolute; z-index: 3; pointer-events: none;
}
.map-overlay > * { pointer-events: auto; }

.controls {
  top: 14px; left: 14px;
  display: flex; flex-direction: column; gap: 10px; max-width: 250px;
}
.panel {
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px;
}
.panel h3 {
  margin: 0 0 8px; font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  font-family: var(--mono);
}

/* segmented toggle */
.seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; }
.seg button {
  flex: 1; background: transparent; color: var(--ink-dim);
  border: 0; padding: 6px 8px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; cursor: pointer; transition: background .15s, color .15s;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--phosphor-dim); color: #eafffb; }
.seg-hint { margin: 6px 0 0; font-size: 10px; line-height: 1.4; color: var(--ink-faint); }

.check { display: flex; align-items: center; gap: 8px; margin-top: 9px;
  font-size: 12px; color: var(--ink-dim); cursor: pointer; user-select: none; }
.check input { accent-color: var(--phosphor); }
.check.basemap-check { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }

/* right-hand column: legend stacked over the watch-regions box (keeps the
   bottom-right corner free for the zoom control) */
.right-stack { top: 14px; right: 14px; display: flex; flex-direction: column;
  gap: 10px; align-items: flex-end; max-height: calc(100% - 28px); }
/* legend ramp */
.legend { position: relative; width: 190px; }
.ramp { height: 9px; border-radius: 2px; margin: 6px 0 4px;
  border: 1px solid var(--line); }
.ramp.anom { background: linear-gradient(90deg,#000004,#3b0f70,#8c2981,#de4968,#fe9f6d,#fcfdbf); }
.ramp.raw  { background: linear-gradient(90deg,#150c0a,#4a1710,#8f2214,#cc3d18,#ef6f1c,#f9a838,#fbd66b,#fdf1b8); }
.ramp.cov  { background: linear-gradient(90deg,#111c28,#25415c,#3a6690,#6098c0,#a6cbe4); }
.ramp-labels { display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.legend .swatch-row { display:flex; align-items:center; gap:8px; margin-top:9px;
  font-size:11px; color:var(--ink-dim); }
.swatch { width:16px; height:12px; border-radius:2px; border:1px solid var(--line-2); }
.swatch.quiet { background-color:#3d726a; }
.swatch.outlined { background:transparent; border:1px dashed #b39ddb; }
.swatch.insufficient {
  background-color:#232a33;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.16) 0 1px, transparent 1px 4px);
}

/* ---- readout (hover) ---- */
/* top gutter reserves room for the collapse chip (top-left) + × close (top-right)
   so neither overlaps the big percent value below them. */
.readout { bottom: 14px; left: 14px; min-width: 210px; padding-top: 28px; }
.readout.pinned { min-width: 292px; }   /* roomier when the flights list is shown */
.readout .big { font-family: var(--mono); font-size: 26px; font-weight: 600;
  line-height: 1.1; margin: 0 0 2px; }
.readout .row { display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px; color: var(--ink-dim); font-family: var(--mono); margin-top: 3px; }
.readout .conf { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
.conf.high { color: var(--phosphor); }
.conf.medium { color: var(--warn); }
.conf.insufficient { color: var(--ink-faint); }
.readout.empty .big { color: var(--ink-faint); }

/* pinned affected-aircraft list (click a degraded cell).
   The readout is already position:absolute (via .map-overlay), so it is the
   containing block for the close button — do not override its positioning. */
.ro-close { position: absolute; top: 6px; right: 8px; background: none; border: 0;
  color: var(--ink-dim); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.ro-close:hover { color: var(--phosphor); }
.ro-flights { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
  max-height: 300px; overflow-y: auto; padding-right: 5px; }
.ro-flights .fl-head { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
  display: flex; flex-direction: column; gap: 2px; }
.ro-flights .fl-key { text-transform: none; letter-spacing: 0.02em; opacity: 0.8; }
.ro-flights .fl { display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-dim); padding: 2px 0;
  font-variant-numeric: tabular-nums; }
.ro-flights .fl-cs { color: var(--ink); }
.ro-flights .fl-win { color: var(--ink-faint); }
.ro-flights .fl-nd { color: var(--warn); text-align: right; min-width: 1.4em; }
.ro-flights .fl-empty { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* ================= region panel (right drawer) ================= */
.drawer {
  position: absolute; top: 0; right: 0; height: 100%; width: 360px;
  max-width: 88vw; z-index: 6;
  background: var(--bg-panel); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.drawer.open { transform: translateX(0); }
.drawer header { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.drawer h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; }
.drawer .rid { font-family: var(--mono); font-size: 10px; color: var(--phosphor);
  letter-spacing: 0.16em; text-transform: uppercase; }
.drawer .close { background: none; border: 0; color: var(--ink-dim); font-size: 20px;
  cursor: pointer; line-height: 1; }
.drawer .body { overflow-y: auto; padding: 14px 18px 24px; }
.drawer .draft-tag { display:inline-block; margin-bottom:12px; font-family:var(--mono);
  font-size:10px; letter-spacing:.1em; color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 40%, transparent);
  border-radius:2px; padding:2px 7px; }
.section-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 6px; }
.drawer p { margin: 0 0 8px; color: var(--ink-dim); line-height: 1.55; font-size: 13px; }
.spark { width: 100%; height: 68px; margin: 4px 0 2px; }
.spark-axis { display:flex; justify-content:space-between; font-family:var(--mono);
  font-size:10px; color:var(--ink-faint); }
.events-list { list-style: none; margin: 0; padding: 0; }
.events-list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.events-list .e-date { font-family: var(--mono); font-size: 11px; color: var(--phosphor); }
.events-list .e-type { font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line-2);
  border-radius:2px; padding:1px 5px; margin-left:6px; }
.events-list .e-title { display:block; margin-top:3px; color:var(--ink); font-size:13px; }
.events-list .e-one { color: var(--ink-dim); font-size:12px; }
.src-list { list-style: none; margin: 6px 0 0; padding: 0; }
.src-list li { font-size: 12px; margin-bottom: 5px; color: var(--ink-faint); }
.needs-source { color: var(--warn); font-family: var(--mono); font-size: 11px; }

/* watch-regions box: docked under the legend in the right-hand column */
.region-box { position: relative; width: 196px; min-height: 0; max-height: 300px;
  display: flex; flex-direction: column; }
.region-list { display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto; margin-top: 2px; }
.chip { cursor:pointer; font-family:var(--mono); font-size:11px; text-align:left;
  color:var(--ink-dim); background: transparent;
  border:1px solid var(--line); border-radius:var(--radius); padding:5px 9px;
  transition: border-color .15s, color .15s, background .15s;
  /* wrap long watch-region names to a second line instead of clipping them */
  white-space:normal; overflow-wrap:anywhere; line-height:1.3; }
.chip:hover, .chip.active { color: var(--phosphor); border-color: var(--phosphor-dim);
  background: rgba(255,255,255,0.03); }

/* ---- collapsible overlay panels (fold each box to a small arrow tab) ---- */
/* NOTE: do NOT set position on .collapsible globally — the map-overlay boxes are
   already position:absolute (which anchors them to their corner AND is the
   containing block for the collapse button). Only the two collapsibles that are
   otherwise static need an explicit containing block: */
#controlsPanel, .scrubber.collapsible { position: relative; }
/* The toggle is a clearly-visible bordered chip in BOTH states (the earlier
   bare glyph was almost invisible when a box was folded). */
.collapse-btn { position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 22px; height: 22px; padding: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg-panel2) 94%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: 12px;
  transition: color .15s, border-color .15s, background .15s; }
.collapse-btn:hover { color: var(--phosphor); border-color: var(--phosphor);
  background: var(--bg-panel2); }
.collapse-btn::before { content: "\25BE"; }               /* ▾ expanded: click to fold */
.collapsible.collapsed .collapse-btn::before { content: "\25B8"; }  /* ▸ folded: click to open */
.readout-collapse { right: auto; left: 6px; }
.collapsible > h3 { padding-right: 28px; }
/* folded: the box becomes just the chip — an obvious, sized tab you can find */
.collapsible.collapsed { min-width: 0 !important; width: auto !important;
  max-height: none !important; padding: 0 !important; border: none !important;
  background: none !important; backdrop-filter: none !important; }
.collapsible.collapsed > *:not(.collapse-btn) { display: none !important; }
.collapsible.collapsed .collapse-btn { position: static; width: 32px; height: 28px;
  font-size: 13px; }
/* the timeline collapses ALL the way to a single corner chip. It goes
   position:absolute so it leaves the grid flow entirely — otherwise its (empty)
   grid row stays ~36px tall and shows the page background as a full-width strip.
   Out of flow, the map row fills the space and only the chip floats in the corner. */
.scrubber .collapse-btn { top: 8px; right: 16px; }
.scrubber.collapsed { position: absolute; right: 12px; bottom: 12px; left: auto;
  width: auto; display: block; padding: 0 !important; }
.scrubber.collapsed .collapse-btn { position: static; width: 32px; height: 28px; }

/* ================= scrubber ================= */
.scrubber {
  border-top: 1px solid var(--line);
  background: linear-gradient(0deg, rgba(0,0,0,0.45), transparent);
  padding: 12px 18px 14px; z-index: 5;
}
.scrub-head { display:flex; align-items:baseline; gap:16px; margin-bottom:8px; }
.scrub-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.scrub-row { display: flex; align-items: center; gap: 14px; }
.play {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg-panel2); color: var(--ink);
  cursor: pointer; font-size: 13px; display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.play:hover { border-color: var(--phosphor); color: var(--phosphor); }
.track-wrap { position: relative; flex: 1; height: 30px; }
.track { position:absolute; top:50%; left:0; right:0; height:3px; transform:translateY(-50%);
  background: var(--line-2); border-radius: 2px; }
.track .fill { position:absolute; top:0; left:0; height:100%; background:var(--phosphor-dim);
  border-radius:2px; }
.ticks { position:absolute; top:0; left:0; right:0; height:100%; }
.tick { position:absolute; top:50%; width:2px; height:12px; transform:translate(-50%,-50%);
  background: var(--ink-faint); border-radius:1px; }
.tick.nodata { background: repeating-linear-gradient(0deg,var(--ink-faint) 0 2px,transparent 2px 4px);
  opacity:.5; }
.tick.event { height:18px; width:2px; background: var(--warn); cursor:pointer; }
.tick.event:hover { background:#fff; }
input.slider { position:absolute; top:0; left:0; width:100%; height:100%;
  -webkit-appearance:none; appearance:none; background:transparent; margin:0; cursor:pointer; }
input.slider::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px;
  border-radius:50%; background:var(--phosphor); border:2px solid var(--bg);
  box-shadow:0 0 0 1px var(--phosphor-dim); cursor:grab; }
input.slider::-moz-range-thumb { width:14px; height:14px; border-radius:50%;
  background:var(--phosphor); border:2px solid var(--bg); cursor:grab; }

/* event hover card */
.event-card {
  position:absolute; z-index:9; bottom:56px; max-width:280px;
  background:var(--bg-panel2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:11px 13px; box-shadow:0 8px 30px rgba(0,0,0,.55); pointer-events:none;
  opacity:0; transform:translateY(6px); transition:opacity .15s, transform .15s;
}
.event-card.show { opacity:1; transform:translateY(0); }
.event-card .e-date { font-family:var(--mono); font-size:11px; color:var(--phosphor); }
.event-card .e-title { font-weight:600; margin:3px 0; font-size:13px; }
.event-card .e-one { color:var(--ink-dim); font-size:12px; }
.event-card .e-tag {
  margin-left:6px; padding:1px 6px; border-radius:3px; font-size:9.5px;
  letter-spacing:.04em; text-transform:uppercase; vertical-align:middle;
  background:rgba(210,150,70,.18); color:#e0a869; border:1px solid rgba(210,150,70,.35);
}
.event-card .e-tag.draft {
  background:rgba(150,155,165,.18); color:#aab3bf; border:1px solid rgba(150,155,165,.35);
}
.event-card .e-tag.approx {
  background:rgba(210,150,70,.12); color:#c8a06e; border:1px dashed rgba(210,150,70,.4);
  text-transform:none; letter-spacing:0;
}
/* spatial event marker — minimal amber ring, matches the timeline event ticks;
   dashed when the event is still draft (preview only). */
.event-pin {
  width:11px; height:11px; border-radius:50%; box-sizing:border-box;
  background:transparent; border:2px solid var(--warn); cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 6px rgba(255,207,92,.3);
  transition:transform .1s;
}
.event-pin:hover { transform:scale(1.3); }
.event-pin.draft { border-style:dashed; opacity:.85; box-shadow:0 0 0 1px rgba(0,0,0,.5); }
/* approximate-date events read as softer/hollow on both the timeline and the map. */
.event-pin.approx { border-style:dotted; opacity:.6; }
.tick.event.approx { opacity:.5; }
.event-card .e-note {
  margin-top:7px; padding-top:7px; border-top:1px solid var(--line);
  color:var(--ink-dim); font-size:11px; font-style:italic; line-height:1.45;
}

/* ---- airspace-context zone card (pinned on click) ---- */
.zone-card {
  position:absolute; z-index:17; max-width:320px; background:var(--bg-panel);
  border:1px solid rgba(179,157,219,.4); border-radius:6px; padding:12px 30px 12px 14px;
  box-shadow:0 8px 30px rgba(0,0,0,.55); opacity:0; pointer-events:none;
  transform:translateY(6px); transition:opacity .15s, transform .15s;
}
.zone-card.show { opacity:1; pointer-events:auto; transform:translateY(0); }
.zone-card .zc-close {
  position:absolute; top:6px; right:8px; background:none; border:none;
  color:var(--ink-dim); font-size:17px; line-height:1; cursor:pointer;
}
.zone-card .zc-title { font-weight:600; font-size:14px; margin:0 0 4px; color:var(--ink); }
.zone-card .zc-lead { color:#c6b1e6; font-size:12.5px; font-weight:600; line-height:1.4; margin-bottom:6px; }
.zone-card .zc-note { color:var(--ink-dim); font-size:12px; line-height:1.5; }
.zone-card .zc-src {
  margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:4px;
}
.zone-card .zc-src a { color:var(--phosphor); font-size:11px; text-decoration:none; }
.zone-card .zc-src a:hover { text-decoration:underline; }
.zone-card .zc-region {
  display:block; margin-top:8px; padding:0; background:none; border:none;
  color:#c6b1e6; font-size:11.5px; cursor:pointer; text-align:left;
}
.zone-card .zc-region:hover { text-decoration:underline; }

/* ================= intro / orientation ================= */
.intro-scrim { position:absolute; inset:0; z-index:18; display:grid; place-items:center;
  padding:20px; background:radial-gradient(120% 90% at 50% 30%,
    rgba(10,12,15,.72), rgba(10,12,15,.93)); backdrop-filter:blur(3px);
  animation:fade .35s ease; }
.intro-scrim[hidden] { display:none; }
.intro-card { max-width:560px; width:100%; background:var(--bg-panel);
  border:1px solid var(--line-2); border-radius:8px; padding:26px 28px 22px;
  box-shadow:0 24px 80px rgba(0,0,0,.6); }
.intro-kicker { font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--phosphor); margin-bottom:12px; }
.intro-card h2 { margin:0 0 10px; font-size:24px; font-weight:600; letter-spacing:.01em; }
.intro-card p { margin:0 0 16px; color:var(--ink-dim); line-height:1.6; font-size:14.5px; }
.intro-card em { color:var(--ink); font-style:normal; }
.intro-how { display:flex; flex-direction:column; gap:7px; margin:0 0 18px;
  font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
.intro-how .k { display:inline-block; width:15px; height:11px; border-radius:2px;
  vertical-align:middle; margin-right:9px; border:1px solid var(--line-2); }
.intro-how .k.hatch { background-color:#232a33;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 1px,transparent 1px 4px); }
/* orientation-key swatches — theme-aware so the briefing matches the live map
   (dark defaults here; light overrides in the light block). */
.intro-how .k-quiet { background:#245f58; }
.intro-how .k-degraded { background:#e0673a; }
.intro-how .k-outlined { background:#b39ddb; }
.intro-how .k-coverage { background:#3a6690; }
.intro-guide { border-top:1px solid var(--line); padding-top:15px; margin-bottom:20px; }
.intro-guide-title { font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--ink); margin-bottom:9px; }
.intro-guide ul { margin:0; padding-left:16px; }
.intro-guide li { color:var(--ink-dim); line-height:1.55; font-size:13px; margin-bottom:6px; }
.intro-guide b { color:var(--ink); font-weight:600; }
.intro-actions { display:flex; align-items:center; gap:18px; }
.intro-go { background:var(--phosphor-dim); color:#eafffb; border:1px solid var(--phosphor);
  border-radius:4px; padding:9px 18px; font-family:var(--mono); font-size:13px;
  letter-spacing:.04em; cursor:pointer; transition:background .15s; }
.intro-go:hover { background:var(--phosphor); color:#04110f; }
.intro-actions a { font-family:var(--mono); font-size:12px; color:var(--ink-dim); }
/* "what is this?" lives in the top bar next to the nav (was a floating overlay
   button that collided with the bottom-left readout). */
.nav-help { margin-left:16px; width:22px; height:22px; padding:0; line-height:1;
  border-radius:50%; border:1px solid var(--line-2); background:transparent;
  color:var(--ink-dim); font-family:var(--mono); font-size:12px; cursor:pointer;
  vertical-align:middle; transition:color .15s, border-color .15s; }
.nav-help:hover { color:var(--phosphor); border-color:var(--phosphor); }
@keyframes fade { from { opacity:0 } to { opacity:1 } }
@media (max-width:760px){ .intro-card{padding:20px} .intro-card h2{font-size:20px} }

/* ================= loading / states ================= */
.loader { position:absolute; inset:0; z-index:20; display:grid; place-items:center;
  background:var(--bg); transition:opacity .4s; overflow:hidden; }
/* Signature frame behind the loader: the acquiring-signal sweep runs over the
   poster (the Degraded% Baltic bloom), not over black. Same asset is the OG
   card. Falls back gracefully to the dark ground if the poster is absent. */
.loader::before { content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(rgba(10,12,15,0.30), rgba(10,12,15,0.55)),
    url("../assets/og-image.jpg") center / cover no-repeat;
}
.loader.hide { opacity:0; pointer-events:none; }
.loader .core { position:relative; z-index:1; text-align:center; }
.loader .sweep { width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--phosphor); animation:spin 1s linear infinite; }
.loader .msg { font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  color:var(--ink-dim); text-transform:uppercase; }
@keyframes spin { to { transform:rotate(360deg); } }

.toast { position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  z-index:15; background:var(--bg-panel2); border:1px solid var(--line-2);
  color:var(--ink-dim); font-family:var(--mono); font-size:12px;
  padding:8px 14px; border-radius:var(--radius); opacity:0; transition:opacity .3s; }
.toast.show { opacity:1; }

/* ================= content pages (methodology / about) ================= */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; }
.doc h1 { font-family: var(--mono); font-size: 26px; letter-spacing: 0.02em;
  font-weight: 600; margin: 0 0 6px; }
.doc .lede { color: var(--ink-dim); font-size: 16px; line-height: 1.6; margin: 0 0 30px; }
.doc h2 { font-size: 15px; font-family: var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--phosphor); margin: 34px 0 10px;
  border-top: 1px solid var(--line); padding-top: 22px; }
.doc h3 { font-size: 14px; margin: 20px 0 6px; color: var(--ink); }
.doc p, .doc li { color: var(--ink-dim); line-height: 1.7; font-size: 14.5px; }
.doc code { font-family: var(--mono); background: var(--bg-panel2); padding: 1px 5px;
  border-radius: 3px; font-size: 12.5px; color: var(--ink); }
.doc table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 13px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 6px 10px; text-align: left;
  font-family: var(--mono); }
.doc th { color: var(--ink-faint); font-weight: 600; text-transform: uppercase;
  font-size: 11px; letter-spacing: 0.08em; }
.callout { border-left: 2px solid var(--phosphor-dim); background: var(--bg-panel);
  padding: 12px 16px; margin: 16px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.callout.warn { border-left-color: var(--warn); }
.backlink { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }

/* ================= footer ================= */
footer.site-footer { border-top: 1px solid var(--line); padding: 20px 24px;
  color: var(--ink-faint); font-size: 12px; display:flex; flex-wrap:wrap; gap:6px 18px;
  align-items:center; }
footer.site-footer .mono { color: var(--ink-dim); }
footer.site-footer .footer-note { flex-basis:100%; color:var(--ink-faint);
  font-size:11px; font-style:italic; opacity:.85; }

/* ================= responsive ================= */
@media (max-width: 760px) {
  .controls { max-width: 44vw; }
  /* Legend + watch-regions stay accessible on phones but start folded to their
     arrow tabs (JS) so they never cover the map. */
  .right-stack { top: 10px; right: 8px; max-width: 60vw; }
  .legend, .region-box { width: auto; max-width: 60vw; }
  .region-box { max-height: 30vh; }
  .drawer { width: 100%; }
  .readout { min-width: 150px; }
  .readout.pinned { min-width: 62vw; }
  .topbar-date { font-size: 12px; padding: 2px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}