/* SF Fog — a light map you can orient on. One permanent theme: the
   standard colorful basemap does the wayfinding, the satellite drapes over
   it, chrome floats as pale glass. Ink tokens from the reference palette's
   light column. (The owner tried the dark command-center look and called
   it: not helpful. The map is for finding places; it should look like a
   map.) */

:root {
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --glass: rgba(252, 252, 251, 0.82);
  --glass-line: rgba(11, 11, 11, 0.10);
  /* SF colors: the accent is the bridge — true international orange reads
     right on light glass. */
  --accent: #c0362c;
  --warn: #c98500;        /* status warning — stale feeds */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Live browser chrome (Safari's bottom bar) is not a safe-area inset.
     Fixed bottom:0 pins to the large viewport; lvh−dvh is that overlap. */
  --chrome-bottom: 0px;
  /* Timeline + pin row + credits + gaps. Legend sits on this shelf.
     Phone overrides for the 44px chips. */
  --bottom-stack: 124px;
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  background: #eef0f2;
  overflow: hidden;
  overscroll-behavior: none;
  /* Page never pinch-zooms. MapLibre's canvas is touch-action:none
     when both pinch and pan handlers are on; that is the only surface
     that should scale. iOS Safari ignores user-scalable=no in a tab. */
  touch-action: none;
}
body {
  position: fixed;
  inset: 0;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

#map { position: fixed; inset: 0; touch-action: none; }

/* HUD swallows pinch (manipulation still allows it). One-axis pan
   stays on the pin row and the search list so those can scroll. */
.hud, .hud *,
.credits, .credits *,
.reticle, .reticle *,
.cam-viewer, .cam-viewer *,
.sky-panel, .sky-panel *,
.maplibregl-popup, .maplibregl-popup * {
  touch-action: pan-x pan-y;
}
.places, .places * { touch-action: pan-x; }
.search-results, .search-results * { touch-action: pan-y; }
.maplibregl-marker, .maplibregl-marker * { touch-action: none; }
/* Range thumbs are not a pan. .hud * would steal the timeline drag. */
.frames, input[type="range"] { touch-action: none; }

.hud { position: fixed; z-index: 1000; }

.top {
  top: 0; left: 0; right: 0;
  padding: max(10px, var(--safe-top)) max(14px, var(--safe-right)) 0 max(14px, var(--safe-left));
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.top > * { pointer-events: auto; }
/* Search is a child so the two-row phone wrap stays in flow, but it
   must not steal map taps in the empty column under the box. */
.top > .search-hud { pointer-events: none; }

.wordmark {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.22em;
  padding: 6px 12px 6px 7px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}
.wordmark img {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: block; border-radius: 50%;
}

.stamp {
  display: flex; align-items: center; gap: 7px;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px; color: var(--ink-2);
  padding: 7px 11px; border-radius: 10px;
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #0ca30c;
}
.dot.stale { background: var(--warn); }
.dot.dead { background: #d03b3b; }

.bottom {
  left: 0; right: 0; bottom: 0;
  padding: 0 max(10px, var(--safe-right)) max(8px, var(--safe-bottom)) max(10px, var(--safe-left));
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.bottom > * { pointer-events: auto; }

.places {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px;
  scrollbar-width: none;
}
.places::-webkit-scrollbar { display: none; }
.place {
  flex: 0 0 auto; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 11px;
  padding: 6px 10px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.place[aria-current="true"] { border-color: var(--accent); }
.place b { display: block; font-size: 12px; font-weight: 650; white-space: nowrap; }
.place > span {
  display: block; font-size: 11.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.place .band {
  /* Same fill+ink as the disc and the open card. Child, not
     `.place span`, so the pill stays on one chip line. */
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--fog-fill, #8e8c88);
  color: var(--fog-ink, #f4f4f3);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.35);
}
.place .pct {
  /* Same fill as the map disc — one scale, two surfaces. */
  color: var(--fog-fill, var(--ink));
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.place .pct.is-empty {
  color: var(--muted);
  font-weight: 500;
}

/* Pin badge: the number is the instrument (the raster's alpha cannot
   be read by eye). 44px hit, ~38px disc. Dark hairline + light halo
   so the same chip survives blown-out fog and night satellite. */
.pin-badge {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pin-badge-disc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fog-fill, #8e8c88);
  color: var(--fog-ink, #f4f4f3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 1px rgba(11, 11, 11, 0.62),
    0 0 0 2px rgba(252, 252, 251, 0.72),
    0 2px 6px rgba(11, 11, 11, 0.28);
}
.pin-badge-disc.is-empty { font-size: 18px; font-weight: 600; }
/* Selection is a ring/lift. Fill still means fog. */
.pin-badge.is-selected .pin-badge-disc {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(11, 11, 11, 0.62),
    0 0 0 3px rgba(252, 252, 251, 0.92),
    0 0 0 6px var(--accent),
    0 3px 8px rgba(11, 11, 11, 0.35);
}
.maplibregl-marker:has(.pin-badge.is-selected) { z-index: 2; }

.deck {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: 13px;
  padding: 8px 12px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
#play {
  font: inherit; font-size: 12px; line-height: 1;
  width: 32px; height: 32px; cursor: pointer; color: var(--ink);
  background: none; border: 1px solid var(--glass-line); border-radius: 50%;
}
#play.playing { color: var(--accent); border-color: var(--accent); }

#fog-toggle {
  font: inherit; font-size: 14px; line-height: 1;
  width: 32px; height: 32px; cursor: pointer;
  color: var(--accent); background: none;
  border: 1px solid var(--accent); border-radius: 50%;
}
#fog-toggle.off { color: var(--muted); border-color: var(--glass-line); }
#fog-toggle.field {
  color: #185095;
  border-color: #185095;
}

/* Slider drives the 24 h loop for the photo and the measured field.
   Dim it only when the layer is off — play then switches back. */
.deck.no-sat #play,
.deck.no-sat .frames,
.deck.no-sat .frame-label { opacity: 0.4; }

/* Time-travel slider: one thumb over the full 24 h, not a cell per frame. */
.frames {
  flex: 1; min-width: 0; height: 18px; margin: 0; padding: 0;
  cursor: pointer; background: transparent;
  accent-color: var(--accent);
  -webkit-appearance: none; appearance: none;
}
.frames:focus { outline: none; }
.frames:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.frames::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: rgba(11, 11, 11, 0.12);
}
.frames::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px; height: 14px; margin-top: -4px;
  border: none; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.25);
}
.frames::-moz-range-track {
  height: 6px; border-radius: 3px; border: none;
  background: rgba(11, 11, 11, 0.12);
}
.frames::-moz-range-thumb {
  width: 10px; height: 14px; border: none; border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.25);
}

.frame-label {
  font-size: 12px; color: var(--ink-2); min-width: 98px; text-align: right;
  font-variant-numeric: tabular-nums;
}

.legend {
  right: max(10px, var(--safe-right));
  bottom: calc(var(--bottom-stack) + var(--safe-bottom));
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--muted);
  padding: 5px 9px; border-radius: 9px;
  background: var(--glass); border: 1px solid var(--glass-line);
}
.legend .ramp {
  width: 74px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(28, 92, 171, 0.08), rgba(37, 106, 191, 0.5) 55%, rgba(13, 54, 107, 0.95));
}
.legend.field { gap: 5px; }
.legend .legend-kicker {
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); margin-right: 2px;
}
.legend .swatch {
  font-size: 10px; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 4px; color: var(--ink);
}
.legend .swatch.s15 { background: rgba(28, 92, 171, 0.18); }
.legend .swatch.s30 { background: rgba(32, 99, 181, 0.32); }
.legend .swatch.s50 { background: rgba(37, 106, 191, 0.46); }
.legend .swatch.s70 { background: rgba(24, 79, 149, 0.60); color: #f4f4f3; }
.legend .swatch.s90 { background: rgba(13, 54, 107, 0.74); color: #f4f4f3; }

/* Quiet way back into the walkthrough. Sits just above the legend —
   at 390px there is no gap beside the ramp that does not cover it
   or the play deck, and this must not grow --bottom-stack. */
.tour-replay {
  right: max(10px, var(--safe-right));
  bottom: calc(var(--bottom-stack) + var(--safe-bottom) + 36px);
  font: inherit;
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--muted);
  padding: 5px 9px;
  border-radius: 9px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tour-replay:hover { color: var(--ink-2); }
.tour-replay:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
body.tour-on .tour-replay {
  visibility: hidden;
  pointer-events: none;
}

.credits {
  font-size: 9.5px; line-height: 1.3;
  color: rgba(137, 135, 129, 0.8);
  text-align: center;
  padding: 0 2px;
}
.credits a { color: inherit; text-decoration-color: rgba(137, 135, 129, 0.4); }

/* Centre mark only — the confirm lives in the pin row so the map
   stays readable. Dark hairline + light halo: ~50% on pale fog and
   on dark satellite, no glass pill. pointer-events stay off; pans
   can start on the centre. */
.reticle {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  z-index: 900;
  pointer-events: none;
}
.reticle-mark {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  background: none;
  border: 0;
  /* Opacity too: panning a dense pin field must fade, not strobe. */
  transition: transform 120ms ease, opacity 180ms ease;
}
.reticle-mark::before,
.reticle-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(11, 11, 11, 0.5);
  box-shadow: 0 0 0 1px rgba(252, 252, 251, 0.5),
              0 0 3px rgba(252, 252, 251, 0.45);
}
.reticle-mark::before {
  width: 1px;
  height: 22px;
  margin: -11px 0 0 -0.5px;
}
.reticle-mark::after {
  width: 22px;
  height: 1px;
  margin: -0.5px 0 0 -11px;
}
.reticle.moving .reticle-mark { transform: translateY(-6px); }
/* The disc already marks the cell; a cross through the number is noise. */
.reticle.is-pinned .reticle-mark {
  opacity: 0;
}

/* Confirm sits in the existing pin-row height so --bottom-stack
   does not grow. Name ellipsizes; the action stays visible. */
.pin-commit {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
.reticle-go {
  pointer-events: auto;
  flex: 1 1 11em;
  min-width: 0;
  max-width: min(220px, 58%);
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 0;
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  background: var(--glass);
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 120ms ease;
}
.reticle-go:focus { outline: none; }
.reticle-go:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}
.reticle-go.moving { opacity: 0.55; }
.reticle-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}
.reticle-name:empty { display: none; }
.reticle-action {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
}
.reticle-go.is-pinned .reticle-action { color: var(--ink-2); }
.pin-commit .places { flex: 1 1 auto; min-width: 0; }

/* Search + my-location: sits in the gap between wordmark and stamp on
   desktop, drops under the header chrome on a phone so it doesn't fight
   either pill. */
.search-hud {
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 280px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.search-hud > * { pointer-events: auto; }

.search-row { display: flex; gap: 6px; align-items: stretch; }

.search-box, .search-loc, .search-results, .search-status, .search-pin {
  background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.search-box {
  flex: 1; min-width: 0; border-radius: 10px;
}
#search-q {
  width: 100%; border: 0; background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; padding: 8px 12px; outline: none;
}
#search-q::placeholder { color: var(--muted); }

.search-loc {
  flex: 0 0 38px; width: 38px; border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 16px; line-height: 1;
  cursor: pointer;
}
.search-loc:hover { color: var(--accent); border-color: var(--accent); }
.search-loc:disabled { opacity: 0.5; cursor: wait; }

.search-results {
  list-style: none; margin: 0; padding: 4px 0; border-radius: 10px;
  max-height: min(280px, 45vh); overflow-y: auto;
}
.search-results li { padding: 7px 12px; cursor: pointer; }
.search-results li:hover,
.search-results li[aria-selected="true"] { background: rgba(11, 11, 11, 0.05); }
.search-results b { display: block; font-size: 13px; font-weight: 650; }
.search-results .sub {
  display: block; font-size: 11.5px; color: var(--muted);
}

.search-status {
  font-size: 12px; color: var(--ink-2);
  padding: 6px 11px; border-radius: 10px;
}

.search-pin { border-radius: 10px; overflow: hidden; }
.search-pin[hidden] { display: none; }

.search-card {
  position: relative;
  padding: 8px 32px 8px 12px;
  background: none; border: 0;
}
.search-card .name {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.search-card .reading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.search-card .band {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--fog-fill, #8e8c88);
  color: var(--fog-ink, #f4f4f3);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.35);
}
.search-card .reading .pct {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.search-card .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.search-card .temp { font-variant-numeric: tabular-nums; }
.search-card .age {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}
.search-card .card-err {
  margin-top: 4px;
  font-size: 12px;
  color: var(--warn);
  line-height: 1.3;
}
.search-card .card-err[hidden] { display: none; }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 14px;
  padding: 0 12px 8px;
}
.search-pin .sky-near,
.search-pin .push-watch {
  align-self: auto;
  margin: 0;
}

/* Destructive, but quiet: labelled and right-aligned so it cannot
   be mistaken for the × that only closes the card. */
.pin-remove-row {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.pin-remove-row[hidden] { display: none; }
.pin-remove {
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--accent);
  background: none;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
}
.pin-remove:hover,
.pin-remove.armed { border-color: var(--accent); }
.pin-remove-cancel {
  font: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 8px;
}
.pin-remove-cancel:hover { color: var(--ink); }
.pin-remove-cancel[hidden] { display: none; }

.search-clear {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; padding: 0;
  border: 0; background: none; color: var(--ink-2);
  font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
.search-clear:hover { color: var(--ink); }

@media (max-width: 759px) {
  :root {
    /* Safari's toolbar sits on the large viewport; lift every bottom HUD
       by the live gap so the places/timeline decks stay tappable. */
    --chrome-bottom: max(0px, calc(100lvh - 100dvh));
    /* Timeline + 44px pin chips + credits + gaps. Padding and Safari
       chrome are added at the use site so the legend sits on the shelf. */
    --bottom-stack: 150px;
  }

  .top { flex-wrap: wrap; }

  .search-hud {
    /* Own row under the wordmark/stamp, in the header's flow so a
       wrapping stamp cannot slide the box over the first row. left+right
       + static, not 100vw-and-center: the 280px reservation is a
       desktop-row number and 100vw overflows iOS. */
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    transform: none;
    margin-top: 8px;
    flex: 1 0 100%;
  }

  .wordmark {
    font-size: 13px;
    letter-spacing: 0.12em;
    padding: 8px 10px 8px 8px;
    min-height: 40px;
    gap: 6px;
  }
  .wordmark img {
    width: 22px; height: 22px;
  }

  .stamp {
    flex: 1 1 auto;
    justify-content: flex-end;
    font-size: 11px;
    line-height: 1.2;
    padding: 8px 10px;
    min-height: 40px;
    gap: 6px;
  }
  /* Time + age stay visible; a short Photo/Fog word may wrap first
     on a 320px row. Status strings ("connecting…") are short. */
  .stamp-text { min-width: 0; }

  .bottom {
    bottom: var(--chrome-bottom, 0px);
    padding: 0 max(10px, var(--safe-right))
             max(8px, var(--safe-bottom))
             max(10px, var(--safe-left));
  }
  .deck { gap: 8px; padding: 8px 10px; }
  .frame-label { min-width: 72px; font-size: 11px; }

  #play, #fog-toggle {
    width: 44px;
    height: 44px;
  }

  .place {
    padding: 8px 12px;
    min-height: 44px;
  }

  #search-q {
    /* 16px: iOS zooms the document if an input is smaller. */
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }
  .search-loc {
    flex-basis: 44px;
    width: 44px;
    min-height: 44px;
  }
  .search-clear {
    width: 44px;
    height: 44px;
    top: 2px;
    right: 2px;
  }
  .search-card { padding-right: 48px; }
  .push-hint-x {
    width: 44px;
    height: 44px;
  }
  .search-results { max-height: min(280px, 45dvh); }
  .search-results li {
    min-height: 44px;
    padding: 10px 12px;
  }
  .reticle-go {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }
  .reticle-name,
  .reticle-action { font-size: 13px; }
  .search-pin .sky-near,
  .search-pin .push-watch {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .pin-remove,
  .pin-remove-cancel {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .legend {
    right: max(10px, var(--safe-right));
    bottom: calc(var(--bottom-stack) + var(--chrome-bottom, 0px) + max(8px, var(--safe-bottom)));
  }
  .tour-replay {
    right: max(10px, var(--safe-right));
    bottom: calc(var(--bottom-stack) + var(--chrome-bottom, 0px) + max(8px, var(--safe-bottom)) + 36px);
  }

  /* Pinch-zoom works; the +/- cluster fights the stamp and the search
     row on every phone width we ship. */
  .maplibregl-ctrl-top-right { display: none; }
}

/* Station popup */
.maplibregl-popup-content {
  background: var(--glass); color: var(--ink);
  border: 1px solid var(--glass-line); border-radius: 10px;
  padding: 9px 12px; font: 12px/1.5 system-ui, sans-serif;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.maplibregl-popup-tip { border-top-color: var(--glass) !important; }
.maplibregl-popup-content b { font-size: 13px; }
.maplibregl-popup-content .sub { color: var(--ink-2); }
.maplibregl-popup-content .age { color: var(--muted); font-size: 11px; }

@media (min-width: 760px) {
  .bottom { left: 50%; right: auto; transform: translateX(-50%); width: 700px; }
  .legend { bottom: 14px; right: max(12px, var(--safe-right)); }
  .tour-replay { bottom: 50px; right: max(12px, var(--safe-right)); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Sky cameras — not weather. Quiet pins, a glass still, required credit. */

/* Quiet dashed link under the card: a drawing, not a photograph. */
.sky-near {
  align-self: flex-start;
  margin: 0 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted);
}
.sky-near:hover { color: var(--ink); }

/* Same slot as .sky-near — a quiet line under the search card. */
.push-watch {
  align-self: flex-start;
  margin: 0 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent);
}
.push-watch:hover { color: var(--accent); }
.push-watch[aria-pressed="true"] { color: var(--accent); }
.push-watch:disabled { opacity: 0.5; cursor: wait; }
.push-hint {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-2);
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.push-hint:not([hidden]) { display: flex; }
.push-hint-x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.push-hint-x:hover { color: var(--ink); }

/* Keep the search HUD and timeline deck above the still if a short
   phone viewport squeezes the sheet. */
.search-hud { z-index: 1001; }
.bottom { z-index: 1001; }

.cam-viewer {
  position: fixed;
  z-index: 1000;
  left: max(14px, var(--safe-left));
  top: calc(max(10px, var(--safe-top)) + 52px);
  width: min(70vw, 520px);
  min-width: min(260px, calc(100% - 28px));
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cam-viewer:not([hidden]) { display: flex; flex-direction: column; }

.cam-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--glass);
  color: var(--ink-2);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cam-close:hover { color: var(--ink); }

.cam-frame {
  display: block;
  width: 100%;
  max-height: 50vh;
  min-height: 72px;
  object-fit: contain;
  background: var(--ink);
  flex: 1 1 auto;
  -webkit-user-drag: none;
  user-select: none;
}

.cam-chrome {
  flex: 0 0 auto;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.cam-close {
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
/* Photos / YouTube: chrome is a visitor. Instant under reduced-motion
   (the global * { transition:none } rule). */
.cam-viewer.chrome-off .cam-chrome,
.cam-viewer.chrome-off .cam-close {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cam-deck {
  align-items: center;
  gap: 10px;
  padding: 4px 12px 0;
}
.cam-deck[hidden] { display: none !important; }
.cam-deck:not([hidden]) { display: flex; }
#cam-play {
  font: inherit; font-size: 12px; line-height: 1;
  width: 32px; height: 32px; flex: 0 0 auto;
  cursor: pointer; color: var(--ink);
  background: none; border: 1px solid var(--glass-line); border-radius: 50%;
}
#cam-play.playing { color: var(--accent); border-color: var(--accent); }

/* Video-player scrubber: 48px lane, 4px track. Native range thumbs
   are the only hit on iOS; the whole lane starts a drag here. */
.scrub {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 48px;
  touch-action: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
/* .cam-viewer * is pan-x pan-y (higher specificity than .scrub). */
.cam-viewer .scrub,
.cam-viewer .scrub * { touch-action: none; }
.scrub:focus { outline: none; }
.scrub:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.scrub-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: rgba(11, 11, 11, 0.14);
  pointer-events: none;
}
.scrub-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--accent);
}
.scrub-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(11, 11, 11, 0.25);
  pointer-events: none;
}

.cam-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 12px 10px;
  flex-shrink: 0;
}
.cam-meta { flex: 1 1 auto; min-width: 0; }
.cam-name { font-size: 13px; font-weight: 650; }
.cam-age {
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cam-age.stale { color: var(--warn); }
.cam-attr {
  margin-top: 3px;
  min-height: 1.3em;
  font-size: 10.5px;
  color: var(--muted);
  /* credit is a license condition, not chrome we can tuck away */
}
.cam-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.cam-step, .cam-refresh {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  cursor: pointer;
  color: var(--ink);
  background: none;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
}
.cam-step:hover, .cam-refresh:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 759px) {
  .cam-viewer {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: #0b0b0b;
    z-index: 4000;
    overflow: hidden;
  }
  .cam-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    object-fit: contain;
    touch-action: none;
  }
  .cam-chrome {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px max(12px, var(--safe-right))
             max(8px, calc(var(--safe-bottom) + var(--chrome-bottom, 0px) + 6px))
             max(12px, var(--safe-left));
    /* Thin scrim behind the bar only — not a 40% veil over the still. */
    background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.42) 55%, rgba(11,11,11,0.58) 100%);
    color: #f4f4f3;
  }
  .cam-bar { padding: 0; align-items: center; }
  .cam-deck { padding: 0; }
  .cam-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    line-height: 1.35;
  }
  .cam-meta .cam-name,
  .cam-meta .cam-age,
  .cam-meta .cam-attr {
    display: inline;
    margin: 0;
    min-height: 0;
    font-size: inherit;
  }
  .cam-meta .cam-name::after,
  .cam-meta .cam-age:not(:empty)::after {
    content: " · ";
    font-weight: 400;
    color: #b0aea8;
  }
  .cam-close {
    top: max(8px, var(--safe-top));
    right: max(8px, var(--safe-right));
    width: 44px;
    height: 44px;
    z-index: 2;
    background: rgba(11, 11, 11, 0.5);
    color: #f4f4f3;
  }
  .cam-name { color: #f4f4f3; }
  .cam-age { color: #c8c6c0; }
  .cam-age.stale { color: #f0c060; }
  .cam-attr { color: #b0aea8; }
  .cam-chrome .frame-label { color: #e8e6e1; }
  .cam-step, .cam-refresh, #cam-play {
    width: 44px;
    height: 44px;
    min-width: 44px;
    color: #f4f4f3;
    border-color: rgba(252, 252, 251, 0.28);
  }
  #cam-play.playing { color: var(--accent); border-color: var(--accent); }
  .cam-step:hover, .cam-refresh:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  .scrub-track { background: rgba(252, 252, 251, 0.22); }
  .scrub-thumb { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.45); }
}

/* Landscape phones are often >=760px wide; pinch still works, and the
   +/- cluster would sit on the stamp in the notch-side corner. */
@media (pointer: coarse) {
  .maplibregl-ctrl-top-right { display: none; }
}

/* JS class + Fullscreen API: same cinema layout as the phone sheet,
   including landscape phones that miss max-width:759px. */
.cam-viewer.media-fs,
.cam-viewer:fullscreen,
.cam-viewer:-webkit-full-screen {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #0b0b0b;
  z-index: 4000;
  overflow: hidden;
}
.cam-viewer.media-fs .cam-frame,
.cam-viewer:fullscreen .cam-frame,
.cam-viewer:-webkit-full-screen .cam-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  object-fit: contain;
  touch-action: none;
}
.cam-viewer.media-fs .cam-chrome,
.cam-viewer:fullscreen .cam-chrome,
.cam-viewer:-webkit-full-screen .cam-chrome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px max(12px, var(--safe-right))
           max(8px, calc(var(--safe-bottom) + var(--chrome-bottom, 0px) + 6px))
           max(12px, var(--safe-left));
  background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.42) 55%, rgba(11,11,11,0.58) 100%);
  color: #f4f4f3;
}
.cam-viewer.media-fs .cam-bar,
.cam-viewer:fullscreen .cam-bar,
.cam-viewer:-webkit-full-screen .cam-bar { padding: 0; align-items: center; }
.cam-viewer.media-fs .cam-deck,
.cam-viewer:fullscreen .cam-deck,
.cam-viewer:-webkit-full-screen .cam-deck { padding: 0; }
.cam-viewer.media-fs .cam-meta,
.cam-viewer:fullscreen .cam-meta,
.cam-viewer:-webkit-full-screen .cam-meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.35;
}
.cam-viewer.media-fs .cam-meta .cam-name,
.cam-viewer.media-fs .cam-meta .cam-age,
.cam-viewer.media-fs .cam-meta .cam-attr,
.cam-viewer:fullscreen .cam-meta .cam-name,
.cam-viewer:fullscreen .cam-meta .cam-age,
.cam-viewer:fullscreen .cam-meta .cam-attr,
.cam-viewer:-webkit-full-screen .cam-meta .cam-name,
.cam-viewer:-webkit-full-screen .cam-meta .cam-age,
.cam-viewer:-webkit-full-screen .cam-meta .cam-attr {
  display: inline;
  margin: 0;
  min-height: 0;
  font-size: inherit;
}
.cam-viewer.media-fs .cam-meta .cam-name::after,
.cam-viewer.media-fs .cam-meta .cam-age:not(:empty)::after,
.cam-viewer:fullscreen .cam-meta .cam-name::after,
.cam-viewer:fullscreen .cam-meta .cam-age:not(:empty)::after,
.cam-viewer:-webkit-full-screen .cam-meta .cam-name::after,
.cam-viewer:-webkit-full-screen .cam-meta .cam-age:not(:empty)::after {
  content: " · ";
  font-weight: 400;
  color: #b0aea8;
}
.cam-viewer.media-fs .cam-close,
.cam-viewer:fullscreen .cam-close,
.cam-viewer:-webkit-full-screen .cam-close {
  top: max(8px, var(--safe-top));
  right: max(8px, var(--safe-right));
  width: 44px;
  height: 44px;
  z-index: 2;
  background: rgba(11, 11, 11, 0.5);
  color: #f4f4f3;
}
.cam-viewer.media-fs .cam-name,
.cam-viewer:fullscreen .cam-name,
.cam-viewer:-webkit-full-screen .cam-name { color: #f4f4f3; }
.cam-viewer.media-fs .cam-age,
.cam-viewer:fullscreen .cam-age,
.cam-viewer:-webkit-full-screen .cam-age { color: #c8c6c0; }
.cam-viewer.media-fs .cam-age.stale,
.cam-viewer:fullscreen .cam-age.stale,
.cam-viewer:-webkit-full-screen .cam-age.stale { color: #f0c060; }
.cam-viewer.media-fs .cam-attr,
.cam-viewer:fullscreen .cam-attr,
.cam-viewer:-webkit-full-screen .cam-attr { color: #b0aea8; }
.cam-viewer.media-fs .frame-label,
.cam-viewer:fullscreen .frame-label,
.cam-viewer:-webkit-full-screen .frame-label { color: #e8e6e1; }
.cam-viewer.media-fs .cam-step,
.cam-viewer.media-fs .cam-refresh,
.cam-viewer.media-fs #cam-play,
.cam-viewer:fullscreen .cam-step,
.cam-viewer:fullscreen .cam-refresh,
.cam-viewer:fullscreen #cam-play,
.cam-viewer:-webkit-full-screen .cam-step,
.cam-viewer:-webkit-full-screen .cam-refresh,
.cam-viewer:-webkit-full-screen #cam-play {
  width: 44px;
  height: 44px;
  min-width: 44px;
  color: #f4f4f3;
  border-color: rgba(252, 252, 251, 0.28);
}
.cam-viewer.media-fs .scrub-track,
.cam-viewer:fullscreen .scrub-track,
.cam-viewer:-webkit-full-screen .scrub-track { background: rgba(252, 252, 251, 0.22); }

/* Simulated sky — an illustration, never a still. Orange hairline so it
   cannot be mistaken for the camera sheet sitting next to it. */
.sky-panel {
  position: fixed;
  z-index: 1002;
  left: max(14px, var(--safe-left));
  top: calc(max(10px, var(--safe-top)) + 52px);
  width: min(72vw, 440px);
  min-width: min(260px, calc(100% - 28px));
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-top: 2px solid var(--accent);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sky-panel:not([hidden]) { display: flex; flex-direction: column; }

.sky-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--glass);
  color: var(--ink-2);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sky-close:hover { color: var(--ink); }

.sky-canvas {
  display: block;
  flex: 0 1 auto;
  width: 100%;
  height: auto;
  min-height: 72px;
  aspect-ratio: 8 / 5;
  max-height: 36vh;
  background: #c8cac8;
}

.sky-body {
  flex: 0 0 auto;
  padding: 8px 12px 12px;
  overflow-y: auto;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.sky-panel.chrome-off .sky-body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sky-title { font-size: 13px; font-weight: 650; }
.sky-state {
  font-size: 12px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sky-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--warn);
  line-height: 1.35;
}

.sky-facts {
  display: grid;
  grid-template-columns: 6.2em 1fr;
  gap: 2px 8px;
  margin: 8px 0 0;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.sky-facts dt {
  margin: 0;
  color: var(--muted);
}
.sky-facts dd {
  margin: 0;
  color: var(--ink);
}
.sky-facts dd.unknown { color: var(--muted); font-style: italic; }

.sky-fixtures {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.sky-fixtures button {
  font: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--ink-2);
  background: none;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
}
.sky-fixtures button:hover,
.sky-fixtures button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 759px) {
  .sky-panel {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background: #0b0b0b;
    z-index: 4000;
    overflow: hidden;
  }
  .sky-close {
    top: max(6px, var(--safe-top));
    right: max(6px, var(--safe-right));
    width: 44px;
    height: 44px;
    z-index: 3;
    background: rgba(11, 11, 11, 0.5);
    color: #f4f4f3;
  }
  .sky-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
    touch-action: none;
  }
  .sky-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(36dvh, 240px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px max(12px, var(--safe-right))
             max(8px, calc(var(--safe-bottom) + var(--chrome-bottom, 0px) + 6px))
             max(12px, var(--safe-left));
    background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.42) 45%, rgba(11,11,11,0.58) 100%);
    color: #f4f4f3;
  }
  .sky-title { color: #f4f4f3; font-size: 12px; display: inline; }
  .sky-state { color: #c8c6c0; font-size: 12px; display: inline; }
  .sky-title::after { content: " · "; font-weight: 400; color: #b0aea8; }
  .sky-facts { font-size: 11px; margin-top: 4px; }
  .sky-facts dt { color: #b0aea8; }
  .sky-facts dd { color: #f4f4f3; }
  .sky-note { font-size: 12px; }
  .sky-fixtures button {
    min-height: 44px;
    padding: 8px 12px;
  }
}

.sky-panel.media-fs,
.sky-panel:fullscreen,
.sky-panel:-webkit-full-screen {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  border: 0;
  border-top: 0;
  border-radius: 0;
  background: #0b0b0b;
  z-index: 4000;
  overflow: hidden;
}
.sky-panel.media-fs .sky-close,
.sky-panel:fullscreen .sky-close,
.sky-panel:-webkit-full-screen .sky-close {
  top: max(6px, var(--safe-top));
  right: max(6px, var(--safe-right));
  width: 44px;
  height: 44px;
  z-index: 3;
  background: rgba(11, 11, 11, 0.5);
  color: #f4f4f3;
}
.sky-panel.media-fs .sky-canvas,
.sky-panel:fullscreen .sky-canvas,
.sky-panel:-webkit-full-screen .sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
  touch-action: none;
}
.sky-panel.media-fs .sky-body,
.sky-panel:fullscreen .sky-body,
.sky-panel:-webkit-full-screen .sky-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(36dvh, 240px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px max(12px, var(--safe-right))
           max(8px, calc(var(--safe-bottom) + var(--chrome-bottom, 0px) + 6px))
           max(12px, var(--safe-left));
  background: linear-gradient(180deg, rgba(11,11,11,0) 0%, rgba(11,11,11,0.42) 45%, rgba(11,11,11,0.58) 100%);
  color: #f4f4f3;
}
.sky-panel.media-fs .sky-title,
.sky-panel:fullscreen .sky-title,
.sky-panel:-webkit-full-screen .sky-title { color: #f4f4f3; font-size: 12px; display: inline; }
.sky-panel.media-fs .sky-state,
.sky-panel:fullscreen .sky-state,
.sky-panel:-webkit-full-screen .sky-state { color: #c8c6c0; font-size: 12px; display: inline; }
.sky-panel.media-fs .sky-title::after,
.sky-panel:fullscreen .sky-title::after,
.sky-panel:-webkit-full-screen .sky-title::after {
  content: " · ";
  font-weight: 400;
  color: #b0aea8;
}
.sky-panel.media-fs .sky-facts,
.sky-panel:fullscreen .sky-facts,
.sky-panel:-webkit-full-screen .sky-facts { font-size: 11px; margin-top: 4px; }
.sky-panel.media-fs .sky-facts dt,
.sky-panel:fullscreen .sky-facts dt,
.sky-panel:-webkit-full-screen .sky-facts dt { color: #b0aea8; }
.sky-panel.media-fs .sky-facts dd,
.sky-panel:fullscreen .sky-facts dd,
.sky-panel:-webkit-full-screen .sky-facts dd { color: #f4f4f3; }
.sky-panel.media-fs .sky-fixtures button,
.sky-panel:fullscreen .sky-fixtures button,
.sky-panel:-webkit-full-screen .sky-fixtures button {
  min-height: 44px;
}

/* Landscape: keep the frame, not the chrome, as the tall thing. */
@media (orientation: landscape) and (max-height: 540px) {
  .cam-chrome,
  .cam-viewer.media-fs .cam-chrome,
  .cam-viewer:fullscreen .cam-chrome,
  .cam-viewer:-webkit-full-screen .cam-chrome {
    padding-top: 6px;
    padding-bottom: max(6px, calc(var(--safe-bottom) + var(--chrome-bottom, 0px) + 4px));
  }
  .sky-body,
  .sky-panel.media-fs .sky-body,
  .sky-panel:fullscreen .sky-body,
  .sky-panel:-webkit-full-screen .sky-body {
    max-height: min(32dvh, 150px);
    padding-top: 6px;
  }
}

/* Karl is commentary, not a measurement. Top-right, under the stamp,
   never in the places strip (those are fog percentages). Hidden on
   the phone HUD — that layout was just un-crowded, and this is the
   first thing that gives way. */
.karl {
  top: calc(max(10px, var(--safe-top)) + 52px);
  right: max(14px, var(--safe-right));
  max-width: min(280px, calc(100vw - 28px));
  pointer-events: auto;
}
.karl[hidden] { display: none; }

.karl-link {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: 11px;
  padding: 7px 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.karl-link:hover { border-color: var(--accent); }

.karl-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  flex: 0 0 auto;
  background: rgba(11, 11, 11, 0.06);
}
.karl-thumb[hidden] { display: none; }

.karl-body { min-width: 0; }
.karl-meta {
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.karl-name { font-weight: 650; color: var(--ink); }
.karl-age { color: var(--ink-2); }
.karl-text {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karl-attr {
  margin-top: 2px;
  font-size: 10px;
  color: var(--muted);
}

@media (max-width: 759px) {
  .karl { display: none !important; }
}