/* Pulse — layout on top of the standard kit (/kit/ember-ui.css, vendored from
   /home/blair/ui-kit/kit). 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:
   /home/blair/shared/vm/UI-STANDARD-2026-09-22.md):
   - 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; }

/* Glass panes (v14, Blair: "glass cards like in the sun app"). js/glass.js draws real
   refraction under every [data-glass] pane and sets body.lg once its shader runs; the
   kit then gives the pane only a light smoke tint. Until then, or on a phone that
   cannot run the shader, the pane stays ordinary CSS glass so it is never bare. */
body:not(.lg) .e-pane[data-glass] {
  background: var(--e-pane);
  -webkit-backdrop-filter: var(--e-pane-blur); backdrop-filter: var(--e-pane-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* The daylight map (2026-10-09, Blair: the dark tint read as "very visibly gray"
   on the white map; "make that glass clear with just a very slight blur"). So the
   glass carries no tint here at all: the shader's refraction and its light frost are
   the whole pane. Text flips to black, the one raised control (play) flips to black
   with a white icon, and the wells are a faint shade instead of a dark one. */
body.map-google {
  --e-ink: #000; --e-ink-2: #000; --e-ink-3: #000;
  --e-on-ink: #fff;
  --e-well: rgba(0, 0, 0, 0.06);
  --e-well-deep: rgba(0, 0, 0, 0.12);
  --e-lip-dark: rgba(0, 0, 0, 0.16);
  --e-lip-light: rgba(255, 255, 255, 0.7);
  --e-pane: rgba(255, 255, 255, 0.35);
  --e-pane-blur: blur(4px);
}
body.map-google.lg .e-pane[data-glass] {
  background: transparent;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
body.map-google .e-btn--primary:active { background: #222; }

/* 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: one glass card. The globe is the clock, the day is the title. ────
   v15 (2026-10-09): the separate day card and the "Pulse" title are gone. */
#head {
  position: absolute; top: calc(var(--safe-top) + 12px); left: 12px;
  max-width: calc(100% - 24px);
  padding: 14px 18px 14px 14px;
  display: grid; grid-template-columns: 64px auto; column-gap: 14px; align-items: center;
  pointer-events: auto;
}
#globe { grid-row: 1 / 3; width: 64px; height: 64px; }
#h-big { margin: 0; min-width: 7.2em; white-space: nowrap; }  /* fits "Wednesday": no resize as the week turns */
#where { margin-top: 2px; }
#back { grid-column: 1 / -1; justify-self: start; margin-top: 14px;
  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: 360px) {
  #head { grid-template-columns: 52px auto; column-gap: 12px; }
  #globe { width: 52px; height: 52px; }
}

/* 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: #fff; }
#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: #fff; }