/* A full-page listening view inside the browser; existing controls move here intact. */
.player-art-open { padding:0; cursor:pointer; transition:border-color .18s; }
.player-art-open:is(:hover,:focus-visible):not(:disabled) { border-color:var(--accent); }
 .player-art-affordance { position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:#fff; background:#0006; opacity:0; transition:opacity var(--transition); pointer-events:none; }
.player-art-open .player-art-affordance svg { width:28px; height:28px; stroke-width:2.4; filter:drop-shadow(0 1px 2px #0008); }
.player-art-open:is(:hover,:focus-visible):not(:disabled) .player-art-affordance { opacity:1; }
.now-playing-cover {
  inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0;
  border:0; border-radius:0; overflow:auto; overscroll-behavior:contain;
  background-color:var(--bg); background-image:var(--scene-image,none); background-size:var(--scene-size,auto); background-attachment:fixed;
}
.now-playing-cover[open] { display:flex; flex-direction:column; }
.now-playing-cover::backdrop { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
:root[data-player-cover="open"] body { overflow:hidden; }
:root[data-player-cover="open"] .player { visibility:hidden; }
.cover-header { position:sticky; top:0; z-index:3; flex:0 0 auto; background:transparent; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:clamp(1rem,2.5vw,2rem) clamp(1.25rem,4vw,4rem); }
.cover-brand { min-width:0; }
.cover-brand-logo { display:block; }

.cover-back { border:1px solid var(--border); background:var(--panel); }
.cover-back svg { width:24px; height:24px; stroke-width:2.4; }
.cover-stage {
  width:min(1400px,100%); min-height:0; flex:1 0 auto; margin:auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,6vw,6rem);
  padding:1.5rem clamp(1.25rem,5vw,5rem) clamp(2.5rem,5vh,5rem);
}
/* Keep the square and its caption slot the same size even while credits are hidden. */
.cover-figure { margin:0; min-width:0; width:100%; align-self:center; display:grid; grid-template-rows:auto 7rem; }
.cover-art-frame { position:relative; width:100%; aspect-ratio:1; border-radius:clamp(1.25rem,2.5vw,2rem); overflow:hidden; background:var(--art-bg); border:1px solid var(--art-border); box-shadow:0 28px 80px #0003; }
.cover-art-frame .station-art { width:100%; height:100%; border:0; border-radius:0; }
.cover-art-frame .station-art > svg { width:24%; height:24%; opacity:.65; }
.cover-art-frame .station-art img { object-fit:contain; }
.cover-art-retiring { position:absolute; inset:0; z-index:1; pointer-events:none; }
.cover-art-frame .cover-album-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; background:var(--art-bg); }
.cover-art-frame .cover-album-art.is-loaded { opacity:1; }
.cover-art-caption { grid-row:2; align-self:start; min-height:0; max-height:7rem; overflow:auto; overflow-wrap:anywhere; display:grid; padding:1rem .25rem 0; color:var(--muted); font-size:.8rem; }
.cover-caption-content { grid-area:1 / 1; min-width:0; display:flex; flex-wrap:wrap; align-content:start; gap:.5rem 1rem; justify-content:space-between; }
.cover-caption-content[aria-hidden="true"] { pointer-events:none; }
.cover-art-caption[hidden] { display:none; }
.cover-art-caption a { color:var(--accent); }
.cover-provider-note { flex-basis:100%; font-size:.8rem; line-height:1.5; }
/* Balance the visible controls with the image and its first caption line. */
.cover-info { min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(.875rem,1.8vh,1.25rem); padding-bottom:4rem; }
.cover-info > * { min-width:0; }
.cover-status { color:var(--muted); font-size:.8rem; font-weight:650; letter-spacing:.12em; margin-bottom:.75rem; }
.cover-status[data-state="playing"] { color:var(--accent); }
.cover-status[data-state="error"] { color:var(--danger); letter-spacing:normal; line-height:1.6; }
.cover-heading h1 { min-width:0; font-size:clamp(1.5rem,2.5vw,2.5rem); line-height:1.3; letter-spacing:-.045em; white-space:nowrap; overflow:hidden; }
.cover-heading h1[data-truncated="true"],.cover-song :is(h2,.cover-artist)[data-truncated="true"] { -webkit-mask-image:linear-gradient(to right,#000 max(0px,calc(100% - 300px)),transparent); mask-image:linear-gradient(to right,#000 max(0px,calc(100% - 300px)),transparent); }
.cover-location { margin-top:.8rem; color:var(--muted); line-height:1.6; font-size:.9rem; }
.cover-song { border-left:2px solid var(--accent); padding-left:1.15rem; }
.cover-song .eyebrow { color:var(--muted); font-size:.7rem; letter-spacing:.16em; }
.cover-song h2 { min-height:1.35em; margin-top:.5rem; font-size:clamp(1.15rem,2vw,1.8rem); line-height:1.35; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; }
.cover-artist { min-height:1.6em; margin-top:.3rem; color:var(--muted); font-size:.95rem; line-height:1.6; white-space:nowrap; overflow:hidden; }
.cover-song-links { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin-top:.85rem; }
.cover-song-link-placeholder { visibility:hidden; }
.cover-song-link { color:var(--muted); font-size:.8rem; padding-block:.35rem; }
.cover-song-link:is(:hover,:focus-visible) { color:var(--accent); text-decoration:underline; }
.cover-controls { display:grid; gap:1rem; justify-items:start; }
.now-playing-cover .transport { display:grid; grid-template-columns:44px 70px 44px; gap:1.15rem; justify-content:start; }
.now-playing-cover .transport > .icon-button { display:flex; }
.now-playing-cover .play-main { width:70px; height:70px; }
.now-playing-cover .play-main svg { width:30px; height:30px; }
.now-playing-cover .player-extras { display:flex; justify-content:flex-start; gap:.65rem; }
.now-playing-cover .player-control-widget { flex:0 0 40px; width:40px; max-width:40px; height:44px; border:0; padding-inline:2px; }
.now-playing-cover #player-volume { flex-basis:100px; width:100px; max-width:100px; padding-inline:4px; }
.now-playing-cover .player-extras input { width:90px; max-width:100%; }
.cover-meters { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; min-width:0; }
.now-playing-cover .player-equalizer,.now-playing-cover .player-visualizer { display:block; flex:0 1 250px; width:min(100%,250px); max-width:250px; min-width:0; translate:none; }
.now-playing-cover .eq-toggle,.now-playing-cover .visualizer-toggle { width:100%; max-width:none; min-width:0; padding:.65rem; border:1px solid var(--border); border-radius:var(--radius-small); background:color-mix(in srgb,var(--panel) 65%,transparent); cursor:pointer; }
.now-playing-cover .eq-toggle:is(:hover,:focus-visible),.now-playing-cover .visualizer-toggle:is(:hover,:focus-visible) { border-color:var(--accent); background:var(--panel); }
.now-playing-cover .cover-meters :is(.eq-toggle,.visualizer-toggle) { height:auto; aspect-ratio:var(--player-widget-ratio,200 / 62); min-height:0; grid-template-rows:minmax(0,1fr) auto; gap:3px; padding:2px 8px; align-content:stretch; overflow:hidden; }
.now-playing-cover .cover-meters :is(.visualizer-heading,.visualizer-status) { margin:0; line-height:1.2; font-size:inherit; }
.now-playing-cover .eq-toggle > .eq-curve { height:calc(100% - 4px); min-height:0; }
.now-playing-cover .visualizer-toggle canvas { height:100%; min-height:0; }


.now-playing-cover .eq-panel,.now-playing-cover .visualizer-picker { z-index:4; }
.cover-details { font-size:.8rem; }
.cover-details summary { width:fit-content; padding:.35rem 0; color:var(--muted); cursor:pointer; }
.cover-details summary:is(:hover,:focus-visible) { color:var(--accent); }
.cover-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.5rem; margin-top:1rem; }
.cover-facts dt { color:var(--muted); font-size:.8rem; margin-bottom:.25rem; }
.cover-facts dd { margin:0; overflow-wrap:anywhere; line-height:1.6; }
.cover-facts a { color:var(--accent); }
/* Cover display rules must never revive a widget or group hidden by preferences. */
.now-playing-cover[open] [hidden] { display:none; }
@media(min-width:1101px) and (max-height:850px) { .cover-figure { max-width:64vh; justify-self:center; } .cover-info { gap:1.1rem; } }
@media(max-width:900px) {
  .cover-stage { grid-template-columns:minmax(0,1fr); width:min(660px,100%); gap:.75rem; align-content:start; padding-top:.5rem; }
  .cover-figure { width:min(100%,420px); justify-self:center; grid-template-rows:auto 2.5rem; }
  .cover-art-caption { max-height:2.5rem; padding-top:.25rem; line-height:1.4; }
  .cover-status { font-size:.7rem; }
  .cover-info { padding-bottom:0; }
  .cover-controls { justify-items:center; }
  .cover-meters { flex-wrap:nowrap; }
  .cover-heading h1 { font-size:clamp(1.35rem,4vw,2rem); }
}
@media(max-width:480px) {
  .cover-stage { padding-inline:1.25rem; }
  .cover-meters { gap:.65rem; }
  .now-playing-cover .player-extras input { width:min(30vw,90px); }
  .cover-facts { grid-template-columns:minmax(0,1fr); }
}