/* The header owns the single audio element, so it survives public page swaps. */
body { padding-bottom: 0; }
.header-player {
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}
.radio-deck { min-height: 88px; }
.radio-deck .album-art { width: 64px; height: 64px; flex-basis: 64px; border-radius: 16px; box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.live-indicator { display: inline-flex; margin-left: 8px; padding: 3px 7px; border-radius: 999px; background: var(--ember); color: #fff; font-size: 9px; letter-spacing: .14em; }
.player-utility { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: rgba(255,255,255,.8); padding: 10px 12px; font: inherit; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.player-volume { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.6); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.player-volume input { width: 74px; padding: 0; accent-color: var(--ember); }

body.is-navigating main { opacity: 0.58; transition: opacity 120ms ease; }
body.is-navigating { cursor: progress; }

@media (max-width: 560px) {
  .header-player .player-row { flex-direction: column; }
  .header-player .player-actions { width: 100%; flex-direction: row; }
  .header-player .player-actions a { flex: 1; text-align: center; }
  .radio-deck .album-art { width: 58px; height: 58px; flex-basis: 58px; }
  .player-volume { width: 100%; justify-content: space-between; }
  .player-volume input { width: 72%; }
}