/* BLE Radar Planet, the 3D Earth surface. Rebuilt 2026-09-07.
   Rules baked in here:
   - No backdrop-filter anywhere over the WebGL canvas. Android WebView paints a blurred empty slab
     when a large blurred panel sits over WebGL (seen on a real phone 2026-09-07). Surfaces are solid
     translucent navy instead.
   - No `inset` shorthand. Longhand top/right/bottom/left only (Samsung Internet compatibility).
   - Every control is at least 44 px tall and wide on a phone.
   - Coverage is drawn inside the Cesium scene (depth tested). The only HTML overlays are the live
     measurement beams, which are projected from real world points every rendered frame. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space_grotesk.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --pl-bg: #000614;
  --pl-panel: rgba(2, 12, 28, .94);
  --pl-panel-solid: #061224;
  --pl-line: #1A3748;
  --pl-line-strong: rgba(34, 211, 238, .55);
  --pl-text: #EAF6FB;
  --pl-muted: #8FA6BA;
  --pl-cyan: #22D3EE;
  --pl-green: #34D399;
  --pl-amber: #F59E0B;
  --pl-violet: #C084FC;
  --pl-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --pl-top: max(10px, env(safe-area-inset-top));
  --pl-bottom: max(12px, env(safe-area-inset-bottom));
  --pl-side: max(12px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--pl-bg); color: var(--pl-text); font-family: var(--pl-font); overflow: hidden; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }

.map-lab { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: var(--pl-bg); }

/* ---------------- Scene ---------------- */
.earth-surface { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#earth { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#earth .cesium-viewer, #earth .cesium-widget, #earth canvas { width: 100% !important; height: 100% !important; }
#earth .cesium-viewer-bottom, #earth .cesium-widget-credits { display: none !important; }
.earth-fallback { position: absolute; z-index: 3; top: 56%; left: 50%; width: min(92vw, 78vh, 820px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: center / contain no-repeat url('/assets/earth-fallback.webp'); box-shadow: 0 0 2px rgba(224,252,255,.9), 0 0 18px rgba(34,211,238,.42), 0 0 60px rgba(14,165,233,.18); opacity: 1; pointer-events: none; transition: opacity .6s ease; }
.earth-fallback.ready { opacity: 0; }
.signal-flow-layer { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.earth-vignette { position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: radial-gradient(circle at 50% 56%, transparent 30%, rgba(0,6,20,.05) 64%, rgba(0,6,20,.72) 112%); }

/* Loading: a thin cyan sweep at the top edge plus a quiet status line. */
.loading-state { position: absolute; z-index: 40; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; display: grid; align-content: end; justify-items: center; padding-bottom: calc(var(--pl-bottom) + 92px); transition: opacity .5s ease; }
.loading-state::before { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 40%; background: linear-gradient(90deg, transparent, var(--pl-cyan), transparent); animation: pl-sweep 1.4s ease-in-out infinite; }
.loading-state i { display: none; }
.loading-state span { padding: 7px 12px; border: 1px solid var(--pl-line); border-radius: 999px; background: var(--pl-panel); color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .16em; text-transform: uppercase; }
.loading-state.done { opacity: 0; }
@keyframes pl-sweep { 0% { left: -40%; } 100% { left: 100%; } }

/* ---------------- Legacy surfaces inside the shell ---------------- */
.legacy-surface { position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; left: 0; }
.legacy-surface iframe { width: 100%; height: 100%; border: 0; background: var(--pl-bg); }

/* ---------------- Top bar ---------------- */
.instrument-header { position: absolute; z-index: 20; top: var(--pl-top); left: var(--pl-side); right: var(--pl-side); height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; border: 1px solid var(--pl-line); border-radius: 18px; background: var(--pl-panel); box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.05); }
.instrument-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.instrument-brand img { width: 32px; height: 32px; flex: none; border-radius: 10px; }
.instrument-brand strong { display: block; font: 700 16px/1.05 var(--pl-display); letter-spacing: -.01em; white-space: nowrap; }
.instrument-brand strong em { font-style: normal; color: var(--pl-cyan); }
.instrument-brand small { display: block; margin-top: 3px; color: var(--pl-muted); font: 700 9px/1 var(--pl-display); letter-spacing: .2em; text-transform: uppercase; }
/* Same rule as the Explorer topbar: the longer name is clipped on a phone, so below 700px the
   lead word drops and the short form, Atlas, stands alone. */
@media (max-width: 700px) { .instrument-brand strong .brand-lead { display: none; } }
.network-readout { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; border: 1px solid var(--pl-line); border-radius: 13px; background: rgba(0,6,20,.7); color: var(--pl-muted); font: 700 12px/1 var(--pl-display); white-space: nowrap; }
.network-readout i { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #64748B; flex: none; }
.network-readout.live { color: #D7FBEA; border-color: rgba(52,211,153,.5); }
.network-readout.live i { background: var(--pl-green); box-shadow: 0 0 10px var(--pl-green); }
.network-readout.live i::after { content: ''; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; border-radius: 50%; border: 1px solid var(--pl-green); animation: pl-pulse 1.8s ease-out infinite; }
.network-readout.idle { color: var(--pl-muted); }
@keyframes pl-pulse { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }

/* ---------------- Right rail ---------------- */
/* Two tool groups (2026-09-08). "Show" is the right rail, five tools, centred on the screen.
   "Go" is a row under the header, right-aligned, ending with the fold chevron. */
.earth-tools { position: absolute; z-index: 20; display: flex; gap: 8px; }
.earth-tools-show { right: var(--pl-side); top: 50%; transform: translateY(-50%); flex-direction: column; }
.earth-tools-nav { right: var(--pl-side); top: calc(var(--pl-top) + 54px + 10px); flex-direction: row; align-items: center; }
@media (max-height: 820px), (max-width: 400px) { .earth-tools { gap: 6px; } .earth-tools button { width: 44px; height: 44px; border-radius: 13px; } .earth-tools button svg { width: 20px; height: 20px; } }
.earth-tools button, .pl-icon-btn { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--pl-line); border-radius: 15px; background: var(--pl-panel); color: #BFD5E6; cursor: pointer; box-shadow: 0 10px 26px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05); transition: border-color .18s, color .18s, box-shadow .18s, transform .18s; }
.earth-tools button svg, .pl-icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.earth-tools button:active { transform: scale(.94); }
.earth-tools button.on { color: #A5F3FC; border-color: var(--pl-line-strong); box-shadow: 0 0 0 1px rgba(34,211,238,.22), 0 0 26px rgba(34,211,238,.22), 0 10px 26px rgba(0,0,0,.4); }
.earth-tools button:focus-visible, .surface-switch button:focus-visible, .pl-icon-btn:focus-visible { outline: 2px solid #E0FCFF; outline-offset: 2px; }
.earth-tools button[disabled] { opacity: .5; cursor: progress; }
.earth-tools .tool-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pl-cyan); color: #00131A; font: 800 10px/18px var(--pl-display); }
.earth-tools button { position: relative; }

/* ---------------- Bottom: surface switch + credits ---------------- */
.surface-switch { position: absolute; z-index: 20; left: 50%; bottom: var(--pl-bottom); transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border: 1px solid var(--pl-line); border-radius: 18px; background: var(--pl-panel); box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.05); transition: opacity .18s ease; }
.surface-switch button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 13px; background: transparent; color: var(--pl-muted); cursor: pointer; font: 700 12px/1 var(--pl-display); letter-spacing: .01em; white-space: nowrap; }
.surface-switch button img { width: 20px; height: 20px; opacity: .72; }
.surface-switch button.on { color: #EAF8FF; background: rgba(34,211,238,.12); box-shadow: inset 0 0 0 1px rgba(103,232,249,.32), 0 0 18px rgba(34,211,238,.12); }
.surface-switch button.on img { opacity: 1; }
.planet-foot { position: absolute; z-index: 19; left: var(--pl-side); right: var(--pl-side); bottom: calc(var(--pl-bottom) + 62px); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.planet-foot .planet-status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.planet-foot > * { pointer-events: auto; }
.planet-status { min-height: 36px; display: flex; align-items: center; padding: 6px 11px; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-panel); color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.planet-status b { color: var(--pl-cyan); font-weight: 700; margin-right: 4px; }
.planet-credits { position: relative; }
.planet-credits button { width: 44px; height: 36px; padding: 0; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-panel); color: var(--pl-muted); font: 700 14px/1 var(--pl-display); cursor: pointer; }
.planet-credits button::before { content: ''; position: absolute; top: -6px; right: -4px; bottom: -6px; left: -4px; }
.planet-credits span { display: none; position: absolute; left: 0; bottom: 44px; width: min(calc(100vw - 24px), 420px); padding: 9px 12px; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-panel-solid); color: var(--pl-muted); font: 500 11px/1.45 var(--pl-font); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.planet-credits.open span { display: block; }
.planet-credits a { color: #BFD5E6; text-decoration: none; border-bottom: 1px solid rgba(191,213,230,.3); }

/* Replay readout: the real date and counts while the network's growth plays back. */
.replay-readout { position: absolute; z-index: 21; left: 50%; top: calc(var(--pl-top) + 66px); transform: translateX(-50%); width: min(92vw, 420px); padding: 9px 14px; border: 1px solid var(--pl-line-strong); border-radius: 14px; background: var(--pl-panel); text-align: center; box-shadow: 0 12px 34px rgba(0,0,0,.42); }
.replay-readout b { display: block; font: 700 18px/1.1 var(--pl-display); color: #EAF8FF; letter-spacing: .02em; }
.replay-readout span { display: block; margin-top: 3px; color: var(--pl-muted); font: 600 11px/1.35 var(--pl-font); }
.replay-sound { position: absolute; z-index: 22; left: 50%; top: calc(var(--pl-top) + 138px); transform: translateX(-50%); width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 1px solid var(--pl-line); border-radius: 14px; background: var(--pl-panel); color: #8FA6BA; cursor: pointer; }
.replay-sound svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.replay-sound.on { color: #A5F3FC; border-color: var(--pl-line-strong); }

/* ---------------- Hint toast and error ---------------- */
.map-hint { position: absolute; z-index: 30; left: 50%; bottom: calc(var(--pl-bottom) + 66px); transform: translateX(-50%); max-width: min(92vw, 420px); padding: 9px 13px; border: 1px solid var(--pl-line-strong); border-radius: 12px; background: var(--pl-panel); color: #D9FBFF; font: 600 12px/1.4 var(--pl-font); text-align: center; opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.map-hint.on { opacity: 1; }
.map-error { position: absolute; z-index: 30; top: auto; right: var(--pl-side); bottom: calc(var(--pl-bottom) + 66px); left: var(--pl-side); padding: 11px 13px; border: 1px solid rgba(245,158,11,.5); border-radius: 12px; background: rgba(20,14,4,.94); color: #FBD9A2; font: 600 12px/1.45 var(--pl-font); }

/* ---------------- Panels: layers and tile card ---------------- */
.pl-sheet { position: absolute; z-index: 35; right: var(--pl-side); bottom: var(--pl-bottom); left: var(--pl-side); max-height: min(72vh, 640px); overflow: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border: 1px solid var(--pl-line); border-radius: 22px; background: var(--pl-panel-solid); box-shadow: 0 -10px 40px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.05); }
.pl-sheet::before { content: ''; display: block; width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: #22324A; }
.pl-sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.pl-sheet-head > div { flex: 1; min-width: 0; }
.pl-sheet-head strong { display: block; font: 700 17px/1.15 var(--pl-display); }
.pl-sheet-head span { display: block; margin-top: 3px; color: var(--pl-muted); font: 500 12px/1.4 var(--pl-font); }
.pl-close { flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--pl-line); border-radius: 14px; background: rgba(0,6,20,.6); color: #BFD5E6; cursor: pointer; display: grid; place-items: center; }
.pl-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pl-eyebrow { color: var(--pl-cyan); font: 700 10px/1.2 var(--pl-display); letter-spacing: .18em; text-transform: uppercase; }

.layer-panel .layer-actions { display: flex; gap: 8px; margin: 12px 0 4px; }
.layer-panel .layer-actions button { flex: 1; min-height: 44px; border: 1px solid var(--pl-line); border-radius: 12px; background: rgba(0,6,20,.6); color: #D6E6F2; cursor: pointer; font: 700 12px/1 var(--pl-display); }
.layer-panel .layer-actions button:active { background: rgba(34,211,238,.12); }
.layer-family { margin-top: 12px; }
.layer-family h3 { margin: 0 0 6px; color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .16em; text-transform: uppercase; }
.layer-grid { display: block; }
.layer-family button { --accent: #22D3EE; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--pl-line); border-radius: 14px; background: rgba(0,6,20,.55); color: #D6E6F2; cursor: pointer; text-align: left; transition: border-color .18s, background .18s; }
.layer-family button i { --shape-size: 14px; --shape-color: var(--accent); flex: none; width: 14px; height: 14px; display: block; background: var(--shape-color); box-shadow: 0 0 10px var(--shape-color); }
.layer-family button img { flex: none; width: 30px; height: 30px; border-radius: 9px; }
.layer-family button span { flex: 1; min-width: 0; font: 700 13px/1.15 var(--pl-display); }
.layer-family button span small { display: block; margin-top: 2px; color: var(--pl-muted); font: 500 11px/1.3 var(--pl-font); }
.layer-family button b { flex: none; width: 24px; height: 24px; border: 1px solid var(--pl-line); border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: transparent; }
.layer-family button.on { border-color: var(--accent); background: rgba(0,6,20,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.layer-family button.on b { color: #00131A; background: var(--accent); border-color: var(--accent); }
.layer-note { margin: 12px 0 0; color: var(--pl-muted); font: 500 11.5px/1.45 var(--pl-font); }

.tile-card h2 { margin: 6px 0 4px; font: 700 20px/1.1 var(--pl-display); letter-spacing: -.01em; }
.tile-card p { margin: 0 0 10px; color: #B8CBDB; font: 500 13px/1.5 var(--pl-font); }
.tile-layer-list { display: grid; gap: 6px; }
.tile-layer-row { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 7px 11px; border: 1px solid var(--pl-line); border-radius: 12px; background: rgba(0,6,20,.55); }
.tile-layer-shape { --shape-size: 11px; flex: none; width: 11px; height: 11px; display: block; background: var(--shape-color); box-shadow: 0 0 8px var(--shape-color); }
.tile-layer-name { flex: 1; min-width: 0; font: 700 13px/1.2 var(--pl-display); }
.tile-layer-value { flex: none; max-width: 56%; text-align: right; color: #EAF6FB; font: 600 12px/1.25 var(--pl-font); }
.tile-metric { margin-top: 10px; color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .14em; text-transform: uppercase; }
.tile-actions { display: flex; gap: 8px; margin-top: 12px; }
.tile-actions a, .tile-actions button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--pl-line-strong); border-radius: 13px; background: rgba(34,211,238,.1); color: #D9FBFF; cursor: pointer; text-decoration: none; font: 700 13px/1 var(--pl-display); }
.tile-actions img { width: 18px; height: 18px; }

/* Panels hide the rail so nothing floats over the sheet on a phone. */
.map-lab.layers-open .earth-tools, .map-lab.tile-open .earth-tools, .map-lab.layers-open .surface-switch, .map-lab.tile-open .surface-switch, .map-lab.layers-open .planet-foot, .map-lab.tile-open .planet-foot { opacity: 0; pointer-events: none; }
.map-lab.layers-open .planet-foot > *, .map-lab.tile-open .planet-foot > * { pointer-events: none; }

/* ---------------- Layer shapes (shared with beams) ---------------- */
.signal-shape-circle { border-radius: 50%; }
.signal-shape-square { border-radius: 2px; }
.signal-shape-diamond { transform: rotate(45deg) scale(.72); }
.signal-shape-ring { border: max(1px, calc(var(--shape-size, 7px) * .22)) solid var(--shape-color); border-radius: 50%; background: transparent !important; }
.signal-shape-triangle { clip-path: polygon(50% 2%,98% 94%,2% 94%); }
.signal-shape-star { clip-path: polygon(50% 0,61% 35%,100% 50%,65% 61%,50% 100%,39% 65%,0 50%,35% 39%); }
.signal-shape-hexagon { clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }
.signal-shape-bars { clip-path: polygon(0 72%,18% 72%,18% 100%,0 100%,0 72%,27% 72%,27% 48%,45% 48%,45% 100%,27% 100%,54% 100%,54% 24%,72% 24%,72% 100%,81% 100%,81% 0,100% 0,100% 100%,81% 100%,0 100%); }
.signal-shape-aperture { border: max(1px, calc(var(--shape-size, 7px) * .18)) solid var(--shape-color); border-radius: 50%; background: conic-gradient(from 15deg, var(--shape-color) 0 12%, transparent 12% 25%, var(--shape-color) 25% 37%, transparent 37% 50%, var(--shape-color) 50% 62%, transparent 62% 75%, var(--shape-color) 75% 87%, transparent 87%) !important; }
.signal-shape-prism { clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); background: conic-gradient(from 30deg, var(--shape-color), #2563EB, #A855F7, var(--shape-color)) !important; }
.signal-shape-antenna { clip-path: polygon(42% 0,58% 0,58% 28%,82% 14%,90% 25%,61% 43%,72% 100%,56% 100%,50% 66%,44% 100%,28% 100%,39% 43%,10% 25%,18% 14%,42% 28%); }

/* ---------------- Live measurement beams (projected from world points, unchanged physics) ---------------- */
.signal-beam { position: absolute; left: 0; top: 0; width: 26px; height: var(--beam-length, 40px); transform-origin: 50% 100%; transform: translate(calc(var(--beam-x, 0px) - 50%), calc(var(--beam-y, 0px) - 100%)) rotate(var(--beam-angle, 0rad)); opacity: 0; animation: beam-life 1.9s linear forwards; will-change: transform, opacity; }
.signal-beam.off { visibility: hidden; }
.signal-beam i { position: absolute; left: calc(50% + var(--ray-x)); bottom: 0; width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(to top, var(--ray-color) 0%, var(--ray-color) 30%, rgba(255,255,255,.94) 72%, transparent 100%); box-shadow: 0 0 6px var(--ray-color), 0 0 16px var(--ray-color); transform: translateX(-50%) scaleY(var(--ray-strength)); transform-origin: 50% 100%; animation: beam-ray 1.9s cubic-bezier(.1,.82,.22,1) var(--ray-delay, 0ms) forwards; }
.signal-beam b { position: absolute; left: calc(50% + var(--ray-x)); bottom: 0; width: 9px; height: 100%; opacity: 0; background: radial-gradient(closest-side circle at 50% 100%, #fff 0%, var(--ray-color) 40%, transparent 74%); animation: beam-head 1.9s cubic-bezier(.12,.78,.24,1) var(--ray-delay, 0ms) forwards; }
.beam-symbol { --shape-size: 14px; position: absolute; left: calc(50% + var(--symbol-x)); bottom: 10%; width: var(--shape-size); height: var(--shape-size); margin: 0 0 calc(var(--shape-size) / -2) calc(var(--shape-size) / -2); opacity: 0; background: var(--shape-color); box-shadow: 0 0 9px var(--shape-color); filter: drop-shadow(0 0 5px var(--shape-color)); animation: field-symbol-rise 1.9s cubic-bezier(.16,.76,.22,1) var(--symbol-delay, 0ms) forwards; }
.beam-symbol-radio { animation-name: field-symbol-radio; border: 2px solid var(--shape-color); background: transparent !important; }
.beam-symbol-wifi { animation-name: field-symbol-wifi; }
.beam-symbol-cellular { animation-name: field-symbol-cellular; transform-origin: 50% 100%; }
.beam-symbol-gnss { animation-name: field-symbol-gnss; background-color: transparent !important; }
.beam-symbol-wifispec { animation-name: field-symbol-spectrum; }
.beam-symbol-cellspec { animation-name: field-symbol-antenna; transform-origin: 50% 100%; }
.beam-symbol-magnetic { animation-name: field-symbol-magnetic; }
.beam-symbol-pressure { animation-name: field-symbol-pressure; }
.beam-symbol-light { animation-name: field-symbol-light; }
.beam-symbol-noise { animation-name: field-symbol-noise; }
.signal-beam::before { content: ''; position: absolute; left: 50%; bottom: 0; width: 34px; height: 34px; margin: 0 0 -17px -17px; border-radius: 50%; background: radial-gradient(closest-side circle, var(--beam-color), transparent 78%); opacity: 0; animation: beam-flash 1.9s ease-out forwards; }
.signal-beam.multi-layer::before { background: var(--beam-spectrum); filter: blur(4px); }
.signal-beam::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 26px; height: 26px; margin: 0 0 -13px -13px; border: 1px solid var(--beam-color); border-radius: 50%; box-shadow: 0 0 10px var(--beam-color); opacity: 0; animation: beam-ring 1.9s cubic-bezier(.16,.7,.2,1) forwards; }
@keyframes beam-life { 0% { opacity: 0; } 4% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes beam-ray { 0% { opacity: 0; transform: translateX(-50%) scaleY(.04); } 8% { opacity: 1; } 34% { transform: translateX(-50%) scaleY(var(--ray-strength)); } 64% { opacity: .5; } 100% { opacity: 0; transform: translateX(-50%) scaleY(var(--ray-strength)); } }
@keyframes beam-head { 0% { opacity: 0; transform: translate(-50%, 6%); } 9% { opacity: 1; } 55% { opacity: .88; transform: translate(-50%, -78%); } 100% { opacity: 0; transform: translate(-50%, -104%); } }
@keyframes beam-flash { 0% { opacity: 0; transform: scale(.3) scaleY(var(--ring-flatten, 1)); } 7% { opacity: .7; } 100% { opacity: 0; transform: scale(1.1) scaleY(var(--ring-flatten, 1)); } }
@keyframes beam-ring { 0% { opacity: 0; transform: scale(.18) scaleY(var(--ring-flatten, 1)); } 12% { opacity: .82; } 100% { opacity: 0; transform: scale(1.55) scaleY(var(--ring-flatten, 1)); } }
@keyframes field-symbol-rise { 0%, 8% { opacity: 0; transform: translateY(0) scale(.35); } 28% { opacity: 1; } 76% { opacity: .86; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.72)) scale(1.18); } }
@keyframes field-symbol-radio { 0%, 7% { opacity: 0; transform: translateY(0) scale(.25); box-shadow: 0 0 0 0 var(--shape-color); } 24% { opacity: 1; box-shadow: 0 0 0 6px transparent; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.62)) scale(1.7); box-shadow: 0 0 0 10px transparent; } }
@keyframes field-symbol-wifi { 0%, 9% { opacity: 0; transform: translateY(0) rotate(45deg) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.78)) rotate(225deg) scale(1.2); } }
@keyframes field-symbol-cellular { 0%, 8% { opacity: 0; transform: translateY(0) scaleY(.1); } 34% { opacity: 1; transform: translateY(calc(var(--beam-length) * -.2)) scaleY(1); } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.76)) scaleY(1.35); } }
@keyframes field-symbol-gnss { 0%, 8% { opacity: 0; transform: translateY(0) rotate(0) scale(.3); } 28% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.84)) rotate(270deg) scale(1.15); } }
@keyframes field-symbol-spectrum { 0%, 8% { opacity: 0; transform: translateY(0) rotateY(0) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.7)) rotateY(360deg) scale(1.25); } }
@keyframes field-symbol-antenna { 0%, 8% { opacity: 0; transform: translateY(0) scaleY(.25); } 30% { opacity: 1; } 65% { filter: drop-shadow(0 0 9px var(--shape-color)); } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.82)) scaleY(1.2); } }
@keyframes field-symbol-magnetic { 0%, 8% { opacity: 0; transform: translateY(0) rotate(0) scale(.25); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.66)) rotate(540deg) scale(1.5); } }
@keyframes field-symbol-pressure { 0%, 8% { opacity: 0; transform: translateY(0) scale(.25,.08); } 34% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.58)) scale(1.7,.72); } }
@keyframes field-symbol-light { 0%, 8% { opacity: 0; transform: translateY(0) rotate(0) scale(.2); } 30% { opacity: 1; filter: drop-shadow(0 0 12px #fff); } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.88)) rotate(180deg) scale(1.8); } }
@keyframes field-symbol-noise { 0%, 8% { opacity: 0; transform: translateY(0) scale(.25); } 28% { opacity: 1; } 44% { transform: translateY(calc(var(--beam-length) * -.28)) scale(1.45); } 60% { transform: translateY(calc(var(--beam-length) * -.43)) scale(.72); } 100% { opacity: 0; transform: translateY(calc(var(--beam-length) * -.72)) scale(1.55); } }

/* ---------------- Embed mode: the planet inside the landing page ---------------- */
.map-lab.embed .instrument-header, .map-lab.embed .surface-switch, .map-lab.embed .planet-foot, .map-lab.embed .earth-tools-nav, .map-lab.embed .earth-tools-show > button:not(#earth-today):not(#replay-toggle), .map-lab.embed .replay-sound, .map-lab.embed #layer-panel, .map-lab.embed #events-panel { display: none !important; }
/* Embedded on the landing page (2026-09-08): only Replay and Earth today, one small row bottom-right. */
.map-lab.embed .earth-tools-show { display: flex !important; top: auto; bottom: 14px; right: 14px; transform: none; flex-direction: row; gap: 8px; }

.map-lab.embed .replay-readout { top: 12px; }
.map-lab.embed .replay-sound { top: 84px; }
.map-lab.embed .earth-vignette { background: radial-gradient(circle at 50% 56%, transparent 34%, rgba(0,6,20,.04) 66%, rgba(0,6,20,.6) 112%); }
.map-lab.embed .earth-fallback { top: 50%; }

/* ---------------- Frame mode: Live Map or Explorer inside the shell ---------------- */
/* Inside Live Map or Explorer the shell must not sit on the inner page's own header, so the switch
   collapses to one 48 px button on the right edge at mid height, the only edge both inner pages leave
   free. A tap expands the three choices vertically; choosing one or waiting collapses it again. */
.map-lab.frame-mode .instrument-header, .map-lab.frame-mode .earth-tools, .map-lab.frame-mode .planet-foot, .map-lab.frame-mode .earth-vignette, .map-lab.frame-mode .loading-state, .map-lab.frame-mode .map-hint { display: none !important; }
.map-lab.frame-mode .surface-switch { top: 44%; bottom: auto; left: auto; right: var(--pl-side); transform: translateY(-50%); flex-direction: column; gap: 6px; padding: 4px; border-radius: 16px; }
.map-lab.frame-mode .surface-switch button { width: 48px; min-height: 48px; padding: 0; justify-content: center; }
.map-lab.frame-mode .surface-switch button b { display: none; }
.map-lab.frame-mode .surface-switch button img { width: 22px; height: 22px; }
.map-lab.frame-mode .surface-switch:not(.expanded) button:not(.on) { display: none; }
.map-lab.frame-mode .surface-switch.expanded button b { display: none; }
.map-lab.frame-mode.surface-ui-open .surface-switch { visibility: hidden; opacity: 0; pointer-events: none; }

/* ---------------- Responsive ---------------- */
@media (min-width: 900px) {
  .pl-sheet { left: auto; right: 20px; bottom: auto; top: 84px; width: 380px; max-height: calc(100vh - 170px); }
  .pl-sheet::before { display: none; }
  .map-lab.layers-open .earth-tools, .map-lab.tile-open .earth-tools { opacity: 0; }
  .earth-tools { right: 20px; }
  .instrument-header { left: 20px; right: 20px; max-width: 1400px; margin: 0 auto; }
}
@media (max-width: 380px) {
  .instrument-brand small { display: none; }
  .surface-switch button { padding: 0 10px; font-size: 11px; }
  .surface-switch button img { width: 18px; height: 18px; }
}
@media (max-height: 520px) {
  .instrument-header { height: 46px; }
  .earth-tools { transform: translateY(-50%); gap: 7px; }
  .earth-tools button { width: 44px; height: 44px; }
  .planet-foot { display: none; }
  .pl-sheet { max-height: 88vh; }
}
@media (prefers-reduced-motion: reduce) {
  .signal-beam { display: none; }
  .network-readout.live i::after, .loading-state::before { animation: none; }
}

/* Space weather chip in the foot (2026-09-08): Kp value with NOAA's level colour. */
.planet-kp { pointer-events: auto; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--pl-line); border-radius: 12px; background: var(--pl-panel); color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.planet-kp i { width: 9px; height: 9px; border-radius: 50%; background: var(--kp-colour, #34D399); box-shadow: 0 0 10px var(--kp-colour, #34D399); }
.planet-kp b { color: #EAF8FF; font-weight: 700; }

/* Full-screen planet (2026-09-08, Sergiu): one chevron at the top of the rail folds every other tool,
   the foot and the hint away; the same chevron (now pointing up) brings them back. */
.rail-collapse { width: 30px !important; height: 44px !important; border-radius: 12px !important; opacity: .85; margin-left: 2px; }
.rail-collapse svg { width: 16px !important; height: 16px !important; transition: transform .25s ease; transform: rotate(-90deg); }
/* Folded: every tool, the foot and the panels go; only the chevron stays, pointing back in. */
body.rail-collapsed .earth-tools > button:not(.rail-collapse), body.rail-collapsed .planet-foot, body.rail-collapsed .earth-tools-show { display: none; }
body.rail-collapsed .rail-collapse { opacity: 1; width: 44px !important; }
body.rail-collapsed .rail-collapse svg { transform: rotate(90deg); }
.replay-readout { top: calc(var(--pl-top) + 118px); }
.replay-sound { top: calc(var(--pl-top) + 190px); }

/* Earth events panel (2026-09-08): NASA EONET list with a "what you can see" guide. */
.events-guide { margin: 4px 0 10px; border: 1px solid var(--pl-line); border-radius: 12px; background: rgba(2,12,28,.6); padding: 0 12px; }
.events-guide summary { cursor: pointer; padding: 10px 0; font: 700 12px/1.3 var(--pl-display); letter-spacing: .04em; text-transform: uppercase; color: var(--pl-cyan); list-style: none; }
.events-guide summary::-webkit-details-marker { display: none; }
.events-guide ul { margin: 0 0 6px; padding-left: 18px; color: #DCEBF5; font: 13px/1.5 var(--pl-text, system-ui, sans-serif); }
.events-guide li { margin: 0 0 6px; }
.events-guide p { margin: 6px 0 12px; color: var(--pl-muted); font: 12px/1.5 var(--pl-text, system-ui, sans-serif); }
.events-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.events-filters button { padding: 6px 10px; border: 1px solid var(--pl-line); border-radius: 999px; background: rgba(2,12,28,.7); color: #BFD5E6; font: 700 10px/1.2 var(--pl-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.events-filters button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, #BFD5E6); box-shadow: 0 0 8px var(--c, #BFD5E6); }
.events-filters button.on { color: #EAF8FF; border-color: var(--c, var(--pl-line-strong)); background: rgba(34,211,238,.08); }
.events-list { display: flex; flex-direction: column; gap: 6px; }
.events-list button { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid var(--pl-line); border-radius: 12px; background: rgba(2,12,28,.6); color: #EAF8FF; text-align: left; cursor: pointer; min-height: 48px; }
.events-list button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #BFD5E6); box-shadow: 0 0 10px var(--c, #BFD5E6); }
.events-list button strong { display: block; font: 600 14px/1.25 var(--pl-text, system-ui, sans-serif); }
.events-list button small { display: block; color: var(--pl-muted); font: 11px/1.3 var(--pl-text, system-ui, sans-serif); margin-top: 2px; }
.events-list button span.when { color: var(--pl-muted); font: 700 10px/1.2 var(--pl-display); letter-spacing: .04em; white-space: nowrap; }
.events-list button.on { border-color: var(--pl-line-strong); box-shadow: 0 0 0 1px rgba(34,211,238,.22); }
.events-empty { color: var(--pl-muted); font: 13px/1.5 var(--pl-text, system-ui, sans-serif); padding: 8px 2px; }
.events-list button img { width: 22px; height: 22px; display: block; }
.events-filters .events-markers { border-style: dashed; }
.events-filters .events-markers.on { border-style: solid; background: rgba(234,248,255,.08); }

/* Real-time rotation on: the global-view tool glows softly while the planet turns under a still camera. */
.map-lab.real-rotation #home-earth { color: #A5F3FC; border-color: var(--pl-line-strong); box-shadow: 0 0 0 1px rgba(34,211,238,.22), 0 0 22px rgba(34,211,238,.18); }
.planet-guide { margin: 0 0 10px; }
.planet-guide summary { color: #A5F3FC; }

/* ---------------- Colour key and tap-to-read (2026-09-09) ---------------- */
:root { --pl-key-h: 0px; }
.planet-key { position: absolute; z-index: 31; left: var(--pl-side); bottom: var(--pl-foot-h, calc(var(--pl-bottom) + 66px)); width: min(calc(100vw - 2 * var(--pl-side)), 360px); max-height: 46vh; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--pl-line); border-radius: 14px; background: var(--pl-panel); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.key-row { border-radius: 10px; }
.key-row.open { background: rgba(255,255,255,.04); }
.key-head { display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; min-height: 40px; padding: 4px 8px; border: 0; background: transparent; color: #EAF8FF; text-align: left; cursor: pointer; font: inherit; }
.key-head b { grid-row: 1 / span 2; font: 700 10px/1.2 var(--pl-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); }
.key-head b small { display: block; margin-top: 2px; font: 600 8.5px/1.1 var(--pl-font); letter-spacing: 0; text-transform: none; color: #8FB8C6; }
.key-bar { display: block; height: 10px; border-radius: 5px; border: 1px solid rgba(255,255,255,.18); background-color: rgba(0,0,0,.4); background-clip: padding-box; }
.key-ticks { position: relative; display: block; height: 13px; margin-top: 2px; font: 600 9.5px/1 var(--pl-font); color: #BFE9F5; }
.key-ticks i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; white-space: nowrap; }
.key-ticks i:first-child { transform: translateX(0); }
.key-ticks i:last-child { transform: translateX(-100%); }
.key-more { padding: 2px 10px 10px 10px; color: #D9FBFF; font: 500 12px/1.45 var(--pl-font); }
.key-more p { margin: 0 0 8px; }
.key-more ul { margin: 0 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.key-more li { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.key-more li i { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.25); background-clip: padding-box; }
.key-more .key-tap { color: #A5F3FC; font-weight: 700; }
.key-more small { display: block; color: var(--pl-muted); font-size: 10.5px; }
.map-hint { bottom: calc(var(--pl-foot-h, calc(var(--pl-bottom) + 66px)) + var(--pl-key-h)); white-space: pre-line; text-align: left; }
.map-hint.on { pointer-events: auto; }
.map-lab.frame-mode .planet-key { display: none !important; } /* frame mode shows the Live Map or Explorer, not the planet */
@media (max-width: 359px) { .planet-key { width: calc(100vw - 2 * var(--pl-side)); } .key-head { grid-template-columns: 50px 1fr; } }
/* Chips mode (compact) and the mode switch */
.planet-key.key-chips-mode { width: min(calc(100vw - 2 * var(--pl-side)), 420px); padding: 4px; gap: 0; }
.key-strip { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.key-strip-title { padding: 0 4px 0 10px; font: 700 10px/1.2 var(--pl-display); letter-spacing: .1em; text-transform: uppercase; color: var(--pl-muted); }
.key-strip-title span { flex: 1 1 auto; }
.key-chips { flex: 1 1 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.key-chips::-webkit-scrollbar { display: none; }
.key-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #D9FBFF; font: 700 10px/1.2 var(--pl-display); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.key-chip i { width: 26px; height: 10px; border-radius: 5px; border: 1px solid rgba(255,255,255,.2); background-color: rgba(0,0,0,.4); background-clip: padding-box; }
.key-chip.on { border-color: var(--pl-line-strong); background: rgba(255,255,255,.07); }
.key-mode { flex: 0 0 auto; width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--pl-line); border-radius: 10px; background: rgba(255,255,255,.04); color: #A5F3FC; cursor: pointer; }
.key-detail { border-top: 1px solid var(--pl-line); margin-top: 4px; padding-top: 2px; }
.planet-key.key-bars-mode { max-height: 42vh; }
.map-lab.embed .planet-key { bottom: 14px; left: 14px; width: min(calc(100vw - 148px), 420px); } /* leaves the two embed buttons free at bottom right */