/* Stephanie Radio: persistent bar, on-air dot, and listening-room bits.
   Tokens come from css/site.css (Vesper Plum, Rose Ash, Porcelain). */

:root{--radio-h:96px}

body.has-radio{
  padding-bottom:calc(var(--radio-h) + env(safe-area-inset-bottom, 0px));
}

/* Pulsing dot in the header lockup. Hidden until audio is actually playing. */
.on-air{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;margin-right:.15rem;
}
.on-air[hidden]{display:none!important}
.on-air-dot{
  width:.55rem;height:.55rem;border-radius:50%;background:#e2556a;flex:none;
  box-shadow:0 0 0 0 rgba(226,85,106,.55);
  animation:on-air-pulse 1.8s infinite;
}
.on-air-text{
  font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#c4485c;line-height:1;
}
@keyframes on-air-pulse{
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
@media(max-width:720px){
  .on-air-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
  .on-air-dot{animation:none}
}

body.is-swapping main,
body.is-swapping .shop-grid{
  opacity:.55;
}

/* Keep the open mobile menu above the bar. */
.site-header:has(#nav.open){z-index:90}

#ytSlot{
  position:fixed;width:1px;height:1px;left:-9999px;bottom:0;overflow:hidden;
  opacity:0;pointer-events:none;
}

.radio-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  min-height:var(--radio-h);
  padding:0 clamp(.85rem,3vw,1.6rem) env(safe-area-inset-bottom, 0px);
  background:rgba(46,36,51,.96);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  display:grid;
  grid-template-columns:minmax(180px,1.15fr) minmax(220px,1.25fr) minmax(200px,1fr);
  gap:.75rem 1rem;
  align-items:center;
}
.radio-left{display:flex;align-items:center;gap:.8rem;min-width:0}
.radio-art{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#1a1520;flex:none}
.radio-copy{min-width:0}
.radio-copy .onair{
  font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rosedark);margin-bottom:.12rem;
}
.radio-copy .title{
  font-family:var(--font-display);font-weight:500;font-size:1.02rem;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.radio-copy .station-name{
  font-size:.78rem;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.radio-center{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0}
.radio-bar .controls{display:flex;align-items:center;gap:.2rem}
.radio-bar .controls button{
  appearance:none;border:0;background:transparent;color:#fff;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;padding:0;
}
.radio-bar .controls button:hover{background:rgba(255,255,255,.1)}
.radio-bar .controls .play{width:46px;height:46px;background:var(--rose);color:var(--ink)}
.radio-bar .controls .play:hover{background:var(--rosedark)}
.radio-bar .progress{
  display:flex;align-items:center;gap:.5rem;width:min(420px,100%);
  font-family:var(--font-mono);font-weight:300;font-size:.68rem;opacity:.85;
}
.radio-bar .progress input{flex:1;accent-color:var(--rose);min-width:0}
.radio-right{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;min-width:0;flex-wrap:wrap}
.station-pick select{
  appearance:none;background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  font:inherit;font-size:.72rem;font-weight:500;
  padding:.4rem .7rem;max-width:9.5rem;cursor:pointer;
}
.station-pick select option{color:var(--ink)}
.radio-bar .eq{display:flex;align-items:flex-end;gap:3px;height:18px;flex:none}
.radio-bar .eq span{
  width:3px;height:4px;background:var(--rosedark);border-radius:2px;
  transform-origin:bottom;animation:radio-eq 1s ease-in-out infinite;
}
.radio-bar .eq span:nth-child(2){animation-delay:.15s}
.radio-bar .eq span:nth-child(3){animation-delay:.3s}
.radio-bar .eq span:nth-child(4){animation-delay:.45s}
.radio-bar .eq span:nth-child(5){animation-delay:.05s}
.radio-bar .eq.is-paused span{animation:none;height:4px}
@keyframes radio-eq{0%,100%{height:4px}50%{height:16px}}
.dsp-links{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
.dsp-link,.yt-link{
  font-size:.72rem;font-weight:500;color:#fff;text-decoration:none!important;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:.4rem .65rem;white-space:nowrap;min-height:32px;
  display:inline-flex;align-items:center;
}
.dsp-link:hover,.yt-link:hover{border-color:rgba(255,255,255,.5);text-decoration:none}

@media(max-width:860px){
  :root{--radio-h:156px}
  .radio-bar{
    grid-template-columns:1fr;
    gap:.25rem;
    padding:.65rem .85rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    height:auto;
  }
  .radio-right{justify-content:space-between}
  .radio-center{align-items:stretch}
  .radio-bar .controls{justify-content:center}
  .radio-bar .progress{width:100%}
}

/* Play controls dropped onto song and album pages. */
.radio-jump{
  appearance:none;cursor:pointer;font:inherit;font-weight:500;font-size:.9rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--hairline);background:var(--rose);color:var(--ink);
}
.radio-jump:hover{background:#BF7280}
.listen-row .radio-jump{margin-right:.15rem}
.stream-icons .radio-jump-icon{
  width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;
}
.radio-album-play{margin:.35rem 0 1rem}

/* /radio-demo/ listening room */
.station-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.station{
  appearance:none;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);
  font:inherit;font-size:.88rem;font-weight:500;padding:.6rem 1rem;border-radius:999px;cursor:pointer;
}
.station:hover{border-color:var(--plum)}
.station[aria-pressed="true"]{background:var(--plum);color:#fff;border-color:var(--plum)}
.radio-tracklist{
  list-style:none;margin:1rem 0 2rem;border:1px solid var(--hairline);border-radius:1.1rem;
  overflow:hidden;background:var(--surface);
}
.radio-tracklist li{border-bottom:1px solid var(--hairline)}
.radio-tracklist li:last-child{border-bottom:0}
.radio-tracklist li.is-current,
.radio-tracklist li:hover{background:var(--rosewash)}
.radio-tracklist button{
  appearance:none;border:0;background:transparent;font:inherit;color:inherit;
  width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.85rem 1.05rem;
}
.radio-tracklist .num{font-variant-numeric:tabular-nums;color:var(--grey);font-size:.85rem}
.radio-tracklist .t-title{font-weight:500}
.radio-tracklist .t-sub{display:block;font-size:.82rem;color:var(--grey);margin-top:.1rem}
.radio-note{color:var(--grey);max-width:46rem;margin:0 0 2.5rem}