/* Pulse — visual system.
   Inherited wholesale from the sun app's "clear glass" language: a barely-there
   light film, low blur, crisp bright rim. The map reads THROUGH the glass.
   v2 borrows LCARS grammar from the TNG panels Blair asked for: chunky
   asymmetric pill blocks, wide letterspaced caps, amber chrome. The chrome is
   amber precisely so it can never be confused with the two accents that DO
   carry meaning (red = draining, green = filling). */

:root {
  --bg: #000;
  --surface: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.22);
  --border-strong: rgba(255, 255, 255, 0.34);
  --glass-blur: 5px;
  --sheen: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.12);
  --text: #f3f4f6;
  --text-dim: rgba(243,244,246,0.62);
  --text-faint: rgba(243,244,246,0.34);
  --out: #ff3d2e;      /* departures — draining, red */
  --in:  #2bff9a;      /* arrivals — filling, green */
  --amber: #ff9c00;    /* LCARS chrome accent; carries no data meaning */
  --radius: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --thumb: 26px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overflow: hidden; overscroll-behavior: none;
}

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

/* MapLibre's own chrome, toned down so it doesn't fight the glass */
.maplibregl-ctrl-attrib {
  background: rgba(0,0,0,0.42) !important;
  font-size: 8px !important;
}
/* Keep MapLibre's chrome under the dock rather than through it */
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 1 !important; }
.maplibregl-ctrl-attrib a { color: rgba(255,255,255,0.45) !important; }

#status {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); background: #000; z-index: 40;
  transition: opacity 0.6s ease;
}
#status.gone { opacity: 0; pointer-events: none; }

#ui {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.8s ease 0.15s;
}
#ui.ready { opacity: 1; }

/* ── header ─────────────────────────────────────────────── */
#head {
  position: absolute; top: calc(var(--safe-top) + 14px); left: 16px;
}
#title {
  font-size: 15px; font-weight: 600; letter-spacing: 0.34em;
  color: var(--text);
  text-shadow: 0 0 18px rgba(255,156,0,0.5), 0 1px 3px rgba(0,0,0,0.8);
}
#meta {
  margin-top: 3px; font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;          /* wrapping made this read as a second title */
}

/* ── dock ───────────────────────────────────────────────── */
#dock {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(var(--safe-bottom) + 26px);
  padding: 13px 15px 15px;
  pointer-events: auto;
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--sheen), 0 12px 36px rgba(0,0,0,0.55);
  max-width: 560px; margin: 0 auto;
}

#readout { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px;
           flex-wrap: wrap; row-gap: 1px; }
#t-big {
  font-size: 25px; font-weight: 600; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(255,255,255,0.18);
}
#t-small { font-size: 10px; color: var(--text-faint); letter-spacing: 0.03em;
           white-space: nowrap; }

#scrubrow { display: flex; align-items: center; gap: 11px; }

.glass {
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  box-shadow: var(--sheen);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.glass:active { border-color: var(--border-strong); }

#play {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius);
  font-size: 12px; line-height: 1; display: grid; place-items: center;
  padding: 0;
}

/* Range input: same thumb size as the sun app's, so the family resemblance is
   literal rather than approximate. */
#scrub {
  flex: 1 1 auto; -webkit-appearance: none; appearance: none;
  height: var(--thumb); background: transparent; margin: 0;
}
#scrub::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; margin-top: calc((var(--thumb) - 5px) / 2);
  background: linear-gradient(90deg, rgba(255,61,46,0.5), rgba(43,255,154,0.5));
  border: 1px solid rgba(255,255,255,0.14);
}
#scrub::-moz-range-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,61,46,0.5), rgba(43,255,154,0.5));
  border: 1px solid rgba(255,255,255,0.14);
}
#scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--thumb); height: var(--thumb); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #ffd9a0 42%, #ff9c00 100%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 0 16px rgba(255,156,0,0.75), 0 2px 6px rgba(0,0,0,0.6);
  margin-top: calc((5px - var(--thumb)) / 2);
}
#scrub::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb); border-radius: 50%; border: 1px solid rgba(255,255,255,0.55);
  background: radial-gradient(circle at 34% 30%, #fff, #ffd9a0 42%, #ff9c00 100%);
  box-shadow: 0 0 16px rgba(255,156,0,0.75);
}

#regs { display: flex; gap: 7px; margin-top: 11px; }
/* LCARS: flat blocks, one squared inner corner, wide caps. The squared corner
   is what makes a row of pills read as a console rather than as tabs. */
.reg {
  flex: 1 1 0; padding: 10px 0 9px; border-radius: var(--radius);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.20em;
  color: var(--text-dim);
}
#regs .reg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
#regs .reg:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.reg.active {
  color: #0b0b0b;
  border-color: rgba(255,156,0,0.9);
  background: var(--amber);
  box-shadow: 0 0 22px rgba(255,156,0,0.42);
  text-shadow: none;
}
.reg.busy { opacity: 0.45; }

#legend {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; margin-bottom: 1px;
  font-size: 9px; color: var(--text-faint); letter-spacing: 0.02em;
}
.sw { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.sw.out { background: var(--out); box-shadow: 0 0 9px var(--out); }
.sw.in  { background: var(--in);  box-shadow: 0 0 11px var(--in); margin-right: 3px; }
#legend-note { margin-left: 2px; }

#ver {
  position: absolute; left: calc(var(--safe-top) + 4px);
  bottom: calc(var(--safe-bottom) + 2px);
  font-size: 4pt; color: rgba(255,255,255,0.30);
  pointer-events: none; z-index: 50;
}

@media (max-width: 380px) {
  #t-big { font-size: 21px; }
  .reg { letter-spacing: 0.10em; }
}