/* Pulse — layout on top of the standard kit (/kit/ember-ui.css, vendored from
   (internal path)). Controls, type and colour come from the kit; this file
   only places things.

   v12, 2026-09-22. What changed from v11 and why (research and audit:
   (internal path)):
   - Inter, tracked capitals ("P U L S E", "SPEED", "TYPICAL WEEK") and the amber
     glow on the title and slider thumb are gone. Each is a documented tell of
     generated UI, and the amber chrome competed with the only two colours here
     that mean something.
   - The legend dots no longer glow. A glow on a dot reads as a live status light.
   - The header is a pane now, so it stays legible over the light map variants.
   - The dock lost its duplicate clock. The time lives at the top with the globe,
     which is where Blair asked for it on 2026-09-14. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #000; color: var(--e-ink);
  font-family: var(--e-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden; overscroll-behavior: none;
}
#map { position: absolute; inset: 0; }

/* Over the pale daylight map the standard smoke pane washes to grey and the captions
   lose contrast, so the panes carry more ink there. */
body.map-google { --e-pane: rgba(18, 18, 22, 0.80); }

/* MapLibre's own chrome, kept quiet and under the dock */
.maplibregl-ctrl-attrib { background: rgba(0,0,0,0.42) !important; font-size: 8px !important; }
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 1 !important; }
.maplibregl-ctrl-attrib a { color: rgba(255,255,255,0.5) !important; }

#status {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 40;
  font: 400 var(--e-t-label)/1 var(--e-font); color: var(--e-ink-3); background: #000;
  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 pane: title, the clock the globe tells, and the numbers ───────── */
#head {
  position: absolute; top: calc(var(--safe-top) + 12px); left: 12px;
  max-width: calc(100% - 24px);
  padding: 12px 14px 12px 12px;
  pointer-events: auto;
}
#head .brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#head .brand .e-title { margin: 0; }
#clockrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
#globe { width: 48px; height: 48px; flex: 0 0 48px; }
#h-big { font-size: 28px; }
#h-small { margin-top: 3px; }
#stats { margin-top: 8px; }
#byline { display: block; margin-top: 4px; color: var(--e-ink-2); text-decoration: none; }
#byline:hover { text-decoration: underline; }
#back { margin-top: 10px; min-height: 34px; padding: 0 12px; font-size: 13px; text-decoration: none; }

/* ── dock ─────────────────────────────────────────────────────────────────── */
#dock {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(var(--safe-bottom) + 22px);
  max-width: 560px; margin: 0 auto;
  pointer-events: auto;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 12px;
  align-items: center;
}
#play svg { width: 18px; height: 18px; }
#dock .e-field { min-width: 0; }
#legend { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

#ver {
  position: absolute; left: 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) {
  #h-big { font-size: 24px; }
  #globe { width: 40px; height: 40px; flex-basis: 40px; }
}

/* Video capture (?capture=1): hide what only makes sense to a finger. */
body.capture #back, body.capture #ver { display: none; }

/* ?reel=1 — the vertical social cut. 432 x 768 CSS px at DPR 2.5 = 1080 x 1920.
   Top ~11% and bottom ~22% belong to the app's own furniture; so does the right edge.
   Everything here lives between them, left-aligned, on a gradient so it reads on any frame. */
body.reel #ui, body.reel #ver, body.reel #status, body.reel .maplibregl-ctrl { display: none !important; }
#reel { position: absolute; left: 0; right: 0; top: 0; padding: 84px 64px 0 22px; pointer-events: none;
  color: #fff; font-family: var(--e-font); z-index: 5;
  background: linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0) 100%);
  padding-bottom: 60px; }
#reel .r-hook { font: 700 26px/1.12 var(--e-font); letter-spacing: -0.01em; }
#reel .r-sub { margin-top: 6px; font: 400 17px/1.3 var(--e-font); color: rgba(255,255,255,0.82); }
#reel .r-clock { margin-top: 14px; font: 700 40px/1 var(--e-font); font-variant-numeric: tabular-nums; }
#reel .r-week { display: flex; gap: 5px; margin-top: 10px; max-width: 300px; }
#reel .r-week span { position: relative; flex: 1; height: 22px; border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,0.12); font: 700 12px/22px var(--e-font); text-align: center;
  color: rgba(255,255,255,0.55); }
#reel .r-week span b { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.28); }
#reel .r-week span.on { color: #fff; }
#reel .r-key { display: flex; align-items: center; gap: 9px; margin-top: 10px; font: 700 17px/1.2 var(--e-font); }
#reel .r-week + .r-key { margin-top: 16px; }
#reel .r-key i { flex: none; width: 15px; height: 15px; border-radius: 50%; }
#reel #r-note { margin-top: 14px; min-height: 26px; font: 700 21px/1.2 var(--e-font); }
#reel .r-credit { margin-top: 10px; font: 400 10px/1.3 var(--e-font); color: rgba(255,255,255,0.5); }