:root {
  --bg: #07111f; --bg-deep: #050b14; --surface: #0d1b2b; --raised: #14283d;
  --text: #f5f9fc; --text-2: #d8e5ee; --muted: #8fa6b7; --border: rgba(216, 229, 238, 0.12);
  --signal: #22d3ee; --indigo: #6366f1; --ok: #22c55e; --warning: #f59e0b; --danger: #ef4444; --unknown: #64748b;
  --band: var(--unknown); --band-text: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* .facts and .meter set display: a hidden one must not show */
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.4 Inter, system-ui, sans-serif;
  display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.muted { color: var(--muted); }

header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-2); }
.brand img { width: 22px; height: 22px; }
.brand b { color: var(--signal); font-weight: 600; }
.feed { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.feed i { width: 8px; height: 8px; border-radius: 50%; background: var(--unknown); }
.feed.live i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.feed.stale i { background: var(--warning); }
.feed.offline i { background: var(--danger); }

main { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 8px; min-height: 0; }

/* red is reserved for take_cover (design.md) */
body { --heat: 0; }
body[data-level="clear"] { --band: var(--raised); --band-text: var(--text); }
/* a step below warning: close enough to be worth waiting a bit, not an alert */
body[data-level="caution"] { --band: linear-gradient(160deg, color-mix(in oklab, #5a3d12, #8a5a0e calc(var(--heat) * 100%)) 0%, #5a3d12 60%, #3a2a14 100%); --band-text: #fff3dc; }
body[data-level="warning"] { --band: color-mix(in oklab, #c27c0e, var(--warning) calc(var(--heat) * 100%)); --band-text: #1a1204; }
body[data-level="take_cover"] { --band: color-mix(in oklab, #b91c1c, var(--danger) calc(var(--heat) * 100%)); --band-text: #fff; }
/* the heads-up (#45): calm, not a level — the field's indigo, never amber or red */
body[data-level="heads_up"] { --band: linear-gradient(160deg, #2e2a78 0%, #24205e 60%, #1a1846 100%); --band-text: #e6e8ff; }
body[data-level="out_of_coverage"], body[data-level="no_field"], body[data-level="catching_up"], body[data-level="offline"], body[data-level="connecting"] { --band: var(--raised); --band-text: var(--text-2); }

.band {
  background: var(--band); color: var(--band-text); border-radius: 18px; padding: 22px 16px; text-align: center;
  border: 1px solid var(--border); transition: background .6s;
}
body[data-level="take_cover"] .band { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, .25); } }
.headline { font-size: clamp(24px, 8vw, 38px); font-weight: 700; letter-spacing: .02em; line-height: 1.1; text-transform: uppercase; }
.countdown { font: 500 clamp(56px, 22vw, 104px)/1 "JetBrains Mono", ui-monospace, monospace; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.sub { font-size: 15px; opacity: .9; margin-top: 6px; }

.facts { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.arrow-wrap { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--raised); display: grid; place-items: center; color: var(--signal); }
#arrow { width: 30px; height: 30px; transition: transform .25s; }
.fact-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#fact-miss { font-weight: 600; font-size: 16px; }
#fact-where { font-size: 12.5px; }

.mapbox { position: relative; flex: 1; min-height: 190px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); }
#map { position: absolute; inset: 0; background: var(--bg-deep); }
.leaflet-tile-pane { filter: saturate(0.45) brightness(0.9); }
.leaflet-control-attribution { font-size: 9px; background: rgba(7, 17, 31, .6) !important; color: var(--muted); }
.leaflet-control-attribution a { color: var(--muted); }
.map-hint { position: absolute; left: 8px; top: 8px; z-index: 500; font-size: 11.5px; color: var(--text-2); background: rgba(13, 27, 43, .85); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; pointer-events: none; }

.controls { display: flex; gap: 10px; }
.controls > * { flex: 1; height: 46px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 15px Inter, system-ui, sans-serif; padding: 0 12px; }
button.primary { background: var(--signal); color: #04222a; border-color: transparent; font-weight: 600; }
button.primary.armed { background: var(--surface); color: var(--signal); border-color: var(--signal); }

footer { text-align: center; font-size: 11px; color: var(--muted); padding: 4px 16px 10px; display: flex; flex-direction: column; gap: 1px; }
#picture { color: var(--text-2); }
.facts.no-arrow .arrow-wrap { display: none; }

.meter { margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(7, 17, 31, .32); color: var(--text); text-align: left; }
.meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.meter-head b { font-size: 15px; letter-spacing: 0; text-transform: none; }
.meter-track { position: relative; height: 8px; margin: 8px 0 3px; border-radius: 4px; background: linear-gradient(90deg, rgba(79,70,229,.35), #6366f1 33%, #a855f7 60%, #c4b5fd 80%, #eef2ff); }
.meter-track i { position: absolute; top: -5px; width: 4px; height: 18px; margin-left: -2px; border-radius: 2px; background: #f5f9fc; box-shadow: 0 0 0 2px #07111f; transition: left .4s; }