/* A complete listening card even when a third-party player is unavailable. */
.spotify-player{position:relative;overflow:hidden;border:1px solid #d6b66d40;border-radius:12px;background:linear-gradient(135deg,#21281c,#131b13);padding:24px}
.spotify-player-heading{display:flex;align-items:center;gap:17px;margin-bottom:20px}
.spotify-player-heading img{width:43px;height:50px;object-fit:contain;flex:0 0 auto}
.spotify-player-heading h3{font-size:26px;letter-spacing:-.025em}
.spotify-player-heading p{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.5}
.spotify-player-stage{height:0;overflow:hidden;visibility:hidden}
.spotify-player-stage iframe{display:block;width:100%;height:480px;border:0!important;border-radius:8px}
.spotify-player[data-state="ready"] .spotify-player-stage{height:480px;visibility:visible;margin:6px 0 18px}
.spotify-player-actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 20px;border-top:1px solid #d6b66d25;padding-top:16px}
.spotify-player-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;color:var(--gold);font-size:13px;border-bottom:1px solid #d6b66d65}
.spotify-player-retry{background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:9px 0;min-height:44px;color:var(--muted);font-size:11px}
.spotify-player-retry:hover{color:var(--gold)}
.spotify-player-status{font-size:11px;line-height:1.7;color:var(--muted);margin-top:14px;max-width:380px}
.spotify-player[data-state="loading"] .spotify-player-status::before{content:"";display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:9px;animation:spotify-pulse 1.4s ease-in-out infinite}
@keyframes spotify-pulse{50%{opacity:.3}}
@media(max-width:700px){.spotify-player{padding:20px}.spotify-player-heading h3{font-size:24px}.spotify-player-stage iframe,.spotify-player[data-state="ready"] .spotify-player-stage{height:420px}}
@media(prefers-reduced-motion:reduce){.spotify-player[data-state="loading"] .spotify-player-status::before{animation:none}}

/* Reserve the player's space from the start. The stage used to be 0px tall
   until Spotify reported ready and then jump to 480px (420px on phones),
   pushing everything below it down - and a reader who had just tapped Music
   could be carried past the player. The space is now held from first paint as
   a quiet placeholder panel; Spotify's own frame stays hidden until ready, as
   before. It only collapses if the player turns out to be unavailable.
   Scoped to has-js so a visitor without JavaScript gets no empty box. */
html.has-js .spotify-player-stage{height:480px;margin:6px 0 18px;visibility:visible;border-radius:8px;background:rgba(214,182,109,.06)}
html.has-js .spotify-player-stage iframe{visibility:hidden}
html.has-js .spotify-player[data-state="ready"] .spotify-player-stage{background:none}
html.has-js .spotify-player[data-state="ready"] .spotify-player-stage iframe{visibility:visible}
html.has-js .spotify-player[data-state="unavailable"] .spotify-player-stage{height:0;margin:0;background:none}
@media(max-width:700px){html.has-js .spotify-player-stage{height:420px}html.has-js .spotify-player[data-state="unavailable"] .spotify-player-stage{height:0}}