/* Wind Ride — the radio, shared by the intro film, the sign-in page and the app.
   Two variants: --corner (glass, bottom right, over the film and the sign-in
   page) and --map (solid ink, top centre, sitting between the username chip and
   the wind compass, so it reads as one of the map's own controls). */

.wr-radio {
  position: absolute;
  z-index: 72;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 9px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s linear, transform .5s cubic-bezier(.16, 1, .3, 1),
              bottom .9s cubic-bezier(.16, 1, .3, 1);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.wr-radio.wr-up { opacity: 1; transform: none; }

/* Hold every property a host page might have set on bare elements. The intro
   page styles `canvas` globally for its full-bleed scene layers (position
   absolute, inset 0, 100%/100%) — without these the equalizer inherits that and
   lies across the track title. The module has to be immune to the page it is
   dropped into. */
.wr-eq {
  position: static; inset: auto;
  display: block; width: 34px; height: 22px; flex: none;
  margin: 0; padding: 0; border: 0; background: none;
}
.wr-meta { min-width: 0; }
.wr-title {
  font-weight: 600; font-size: 12px; line-height: 1.25; color: #e8edf4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-artist {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px; color: #8a93a6; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.wr-ctl button {
  background: none; border: 0; padding: 5px; cursor: pointer; color: #8a93a6;
  display: grid; place-items: center; border-radius: 5px;
  transition: color .15s, background .15s;
}
.wr-ctl button:hover { color: #e8edf4; background: rgba(255, 255, 255, .07); }
.wr-ctl button svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.wr-ctl .wr-play { color: #ff7a1a; }
.wr-ctl .wr-play:hover { color: #e56a10; }
.wr-ctl .wr-play svg { width: 18px; height: 18px; }

.wr-seek {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  border-radius: 0 0 9px 9px; background: rgba(255, 255, 255, .09); overflow: hidden;
}
.wr-seek i { display: block; height: 100%; width: 0; background: #ff7a1a; opacity: .8; }

/* Autoplay refused: a gesture does not survive a navigation, so say so and let
   the next click anywhere be the gesture. */
.wr-hint {
  position: absolute; right: 0; bottom: calc(100% + 8px);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; color: #ff7a1a;
  opacity: 0; pointer-events: none; white-space: nowrap; transition: opacity .4s linear;
}
.wr-radio.wr-blocked .wr-hint { opacity: 1; }
.wr-radio.wr-blocked {
  border-color: rgba(255, 122, 26, .55);
  animation: wr-pulse 1.9s ease-in-out infinite;
}
@keyframes wr-pulse {
  0%, 100% { box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8); }
  50% { box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8), 0 0 0 3px rgba(255, 122, 26, .16); }
}

/* ── corner: over the film and the sign-in page ──────────────────────────── */
.wr-radio--corner {
  position: fixed;
  right: 22px; bottom: 18px;
  padding: 9px 13px 9px 11px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(12, 18, 26, .72);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, .8);
}
.wr-radio--corner .wr-meta { width: clamp(96px, 11vw, 164px); }

/* ── map: top centre, between the username chip and the compass ──────────── */
/* Matches .user-chip / .compass exactly — same ink, radius and shadow — so it
   reads as a third control of the same family rather than a floating widget. */
.wr-radio--map {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: 10px 12px;
  background: var(--ink, #16212e);
  box-shadow: 0 2px 10px rgba(22, 33, 46, .35);
  z-index: 1000;
  max-width: min(340px, calc(100vw - 320px));
}
.wr-radio--map.wr-up { transform: translateX(-50%); }
.wr-radio--map .wr-meta { width: clamp(84px, 12vw, 150px); }
.wr-radio--map .wr-seek { background: rgba(255, 255, 255, .07); }
.wr-radio--map .wr-hint { right: auto; left: 50%; transform: translateX(-50%); }

/* On a narrow map the chip and compass already crowd the top row; drop the
   track text and keep the equalizer plus the controls. */
@media (max-width: 900px) {
  .wr-radio--map .wr-meta { display: none; }
  .wr-radio--map { padding: 8px 10px; gap: 8px; }
}

/* ── phones ───────────────────────────────────────────────────────────────────
   The map radio is NOT mounted on a phone at all — see the mount guard in
   App.vue. There is no third slot in that top row (a username can run to ~210px
   and the compass another ~110px, the whole width of a 375px screen), and music
   is not what anyone opened a route planner for.

   These rules still earn their place: a desktop window dragged narrow keeps the
   radio it mounted with, and this is what stops it landing on the compass. */
@media (max-width: 660px) {
  .wr-radio--map {
    /* Above Leaflet's zoom stack, which sits at bottom 27..91 on the right, and
       clear of the timeline (bottom 18) and the attribution strip. Measured on
       a 375px viewport where the map is 365px tall — not guessed. */
    top: auto; bottom: 100px;
    left: auto; right: 12px;
    transform: none; max-width: none;
    gap: 0; padding: 7px;
  }
  .wr-radio--map.wr-up { transform: none; }
  .wr-radio--map .wr-eq { cursor: pointer; }
  /* above the map's own overlays (all z-index 1000) so the panel a rider just
     opened reads as on top rather than clipped by the start-point hint */
  .wr-radio--map.wr-open { z-index: 1001; }
  /* collapsed: the equalizer alone, doubling as the tap target */
  .wr-radio--map .wr-meta,
  .wr-radio--map .wr-ctl,
  .wr-radio--map .wr-seek { display: none; }
  /* opened by tapping it, growing leftward into the map */
  .wr-radio--map.wr-open { gap: 10px; padding: 8px 10px; }
  .wr-radio--map.wr-open .wr-ctl { display: flex; }
  .wr-radio--map.wr-open .wr-seek { display: block; }
  .wr-radio--map.wr-open .wr-meta { display: block; width: clamp(88px, 34vw, 150px); }
  .wr-radio--map .wr-hint { left: auto; right: 0; transform: none; }
}
@media (max-width: 560px) {
  .wr-radio--corner { right: 12px; padding: 8px 10px; }
  .wr-radio--corner .wr-meta { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .wr-radio { transition: none; }
  .wr-radio.wr-blocked { animation: none; }
}