/* 15-listen-on.css — every Listen on rule (the platform pills under the player: Spotify · Apple Music · YouTube …)
   gathered from 06/08/09/10/11/13/14 in their original cascade order. Shared hover/brand-colour rules for ALL pills
   (.ln-plat together with .card-plat, .lf-pills a, #dock …) stay in 10-logo-rtl-motion.css and 12-phone-passes.css. */
@media (min-width:960px){
body.panels-bare #listenBar{background:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body .ln-head{position:relative;display:block;width:100%;text-align:center;padding:0 0 6px}
body .ln-head::before, body .ln-head::after{content:'';position:absolute;top:.55em;width:calc(50% - 60px);height:1px;background:currentColor;opacity:.55}
body .ln-head::before{left:0}
body .ln-head::after{right:0}
body #listenBar{flex-direction:column;gap:4px;border-radius:22px}

}
/* baked glass (08) must follow the bare-panel rule above but precede the day-sky surface below */
@media (min-width:960px){body.baked-glass :is(#hero, #lyricsPanel, #aboutSong, #upnext, #listenBar){background:none;-webkit-backdrop-filter:none;backdrop-filter:none}}
#listenBar{display:flex;max-width:min(92vw,760px);padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,13,20,.5)}
.ln-head{padding-inline:14px 8px;font-family:var(--ui);font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--song-text);opacity:.9;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.ln-head:lang(he), .ln-head:lang(ar){letter-spacing:.08em}
.ln-head:lang(ja){letter-spacing:.14em}
/* desktop size only: on phones the shared 13px label floor in 10-logo-rtl-motion.css sets it */
@media (min-width:960px){.ln-head{font-size:10px}}
.ln-plats{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.ln-plat{position:relative;display:inline-flex;min-height:38px;padding:9px 15px;border:0;background:none;text-decoration:none;color:rgba(255,255,255,.9);white-space:nowrap;animation:lnIn .5s var(--ease) both}
.ln-ic{color:rgba(255,255,255,.92)}
.ln-ic svg{width:100%;height:100%;fill:currentColor}
.ln-plat:hover, .ln-plat:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb, var(--theme) 65%, transparent)}
.ln-plat:active{opacity:.7}
.ln-plat:focus-visible{outline:2px solid color-mix(in srgb, var(--theme) 70%, #fff);outline-offset:2px}
.ln-plat[data-platform="spotify"] .ln-ic{color:#1ED760}
.ln-plat[data-platform="apple"] .ln-ic{color:#FA455C}
.ln-plat[data-platform="youtube"] .ln-ic, .ln-plat[data-platform="ytmusic"] .ln-ic{color:#ff0000}
.ln-plat[data-platform="youtube"] .yt-tri{fill:#fff}
@media (hover:none){
.ln-plat{min-height:44px}
}
@media (prefers-reduced-motion:reduce){
.ln-plat{animation:none}
}
#listenBar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;margin-top:clamp(8px,1.2vh,14px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px -14px rgba(0,0,0,.5)}
body.sky-day #listenBar{background:rgba(255,255,255,.78);border-color:rgba(24,74,128,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 26px -14px rgba(16,40,72,.45)}
body.sky-day .ln-head{text-shadow:none}
body.sky-day .ln-plat{color:#10304f}
body.sky-day .ln-plat:hover, body.sky-day .ln-plat:focus-visible{color:#06283f;text-decoration-color:color-mix(in srgb, var(--theme) 70%, #10304f)}
body.sky-day .ln-plat:focus-visible{outline-color:color-mix(in srgb, var(--theme) 55%, #0b2a47)}
@media (max-width:959px){
#listenBar{flex-direction:column;border-radius:22px;max-width:min(92vw,520px);width:min(92vw,520px)}
.ln-head{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:0}
.ln-head::before, .ln-head::after{content:'';flex:0 1 72px;height:1px;background:currentColor;opacity:.35}
.ln-plats{width:100%}
.ln-plat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.ln-plat:hover, .ln-plat:focus-visible{text-decoration:none;background:rgba(255,255,255,.15)}
body.sky-day .ln-plat{background:rgba(255,255,255,.62);border-color:rgba(24,74,128,.16)}
body.sky-day .ln-plat:hover, body.sky-day .ln-plat:focus-visible{background:rgba(255,255,255,.9)}
}
@media (max-width:959px) and (max-height:740px){
#listenBar{gap:7px;padding:9px 12px 10px}
.ln-plats{display:flex;justify-content:center;gap:10px}
.ln-plat{width:48px;min-height:48px;padding:0;flex:0 0 auto}
.ln-plat .ln-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ln-plat .ln-ic{width:22px;height:22px}
}
@media (min-width:960px){
body.sky-day.panels-bare #listenBar{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.sky-day.panels-bare .ln-plat{background:none;border-color:transparent;box-shadow:none}
body.sky-day.panels-bare .ln-plat:hover, body.sky-day.panels-bare .ln-plat:focus-visible{background:none}

}
body.panels-bare :is(#listenBar, .ln-head, .ln-plat){color:rgba(255,255,255,.96); text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 18px rgba(0,0,0,.35)}
body.sky-day.panels-bare #listenBar{position:relative;isolation:isolate}
body.sky-day.panels-bare #listenBar::before{content:'';position:absolute;inset:-10px -40px;z-index:-1;pointer-events:none; border-radius:999px;filter:none; background:radial-gradient(70% 100% at 50% 50%,rgba(255,255,255,.42) 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 82%)}
body.sky-day.panels-bare :is(#listenBar, .ln-head, .ln-plat){color:#0d2b47;text-shadow:none}
body.sky-day.panels-bare .ln-head{opacity:.7}
body.sky-day.panels-bare :is(.ln-plat:hover, .ln-plat:focus-visible){color:#08203a}
.ln-ic{width:20px;height:20px}
.ln-plat{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.04em;transition:color .2s var(--ease),opacity .15s var(--ease);border-radius:10px}
@media (max-width:959px){
#listenBar{gap:6px;padding:8px 12px 10px}
.ln-plats{grid-template-columns:1fr 1fr;display:flex;justify-content:center;gap:clamp(8px,2.6vw,12px)}
.ln-plat{font-size:clamp(12.5px,3.4vw,14.5px);width:48px;min-height:48px;padding:0;border-radius:50%;flex:0 0 auto;justify-content:center}
.ln-plat .ln-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ln-plat .ln-ic{width:22px;height:22px}
body.panels-bare :is(#listenBar), body:not(.panels-bare) :is(#listenBar), body.sky-day.panels-bare :is(#listenBar){background:var(--pan-bg,rgba(14,15,18,.72));border:1px solid var(--glass-bd); -webkit-backdrop-filter:var(--pan-blur,blur(18px));backdrop-filter:var(--pan-blur,blur(18px));box-shadow:0 10px 26px -14px rgba(0,0,0,.5)}
body.sky-day.panels-bare #listenBar::before{content:none}
body.panels-bare :is(.ln-plat, .ln-head, #listenBar){color:#e8eef5;text-shadow:none}
body.sky-day.panels-bare :is(.ln-plat, .ln-head, #listenBar){color:#10304f;text-shadow:none}
body.panels-bare #listenBar .ln-plat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
body.sky-day.panels-bare #listenBar .ln-plat{background:rgba(16,48,79,.06);border-color:rgba(16,48,79,.18)}
.ln-head, #lnHead{opacity:1}
}
#listenBar:not(.enter) .ln-plat{animation:none}
@media (min-width:960px){
body.stage #listenBar{transition:opacity .25s var(--ease),visibility 0s linear 0s}
body.stage.lb-away #listenBar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s var(--ease),visibility 0s linear .25s}
}
@media (prefers-reduced-motion:no-preference){
.ln-plat{animation-delay:calc(var(--i,0) * 50ms)}
#listenBar.nudge .ln-plat{animation:lnNudge 1.1s var(--ease-calm) both;animation-delay:calc(var(--i,0) * .09s)}
#listenBar.nudge .ln-head{animation:lnHead 1.4s var(--ease-calm) both}
}
@media (min-width:960px) and (max-height:760px){
#listenBar{margin-top:6px;padding:8px 10px 9px}
}
@media (min-width:960px){
html body.lyrics-focus #listenBar{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2px; width:max-content;max-width:var(--cardw,92vw);margin:10px auto 0;padding:3px 6px 3px 4px;border-radius:999px;--gr:999px}
html body.lyrics-focus #listenBar .ln-head{display:inline-block;width:auto;padding:0 8px 0 12px;font-size:10px;white-space:nowrap}
html body.lyrics-focus #listenBar .ln-head::before, html body.lyrics-focus #listenBar .ln-head::after{content:none}
html body.lyrics-focus #listenBar .ln-plats{display:flex;flex-wrap:nowrap;gap:0}
html body.lyrics-focus #listenBar .ln-plat{width:36px;min-height:36px;padding:0;justify-content:center;border-radius:50%}
html body.lyrics-focus #listenBar .ln-plat .ln-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html body.lyrics-focus #listenBar .ln-plat:hover, html body.lyrics-focus #listenBar .ln-plat:focus-visible{text-decoration:none;background:rgba(255,255,255,.1)}
html body.sky-day.lyrics-focus #listenBar .ln-plat:hover{background:rgba(16,48,79,.08)}
html body:not(.panels-bare):is(.vid-aligned,.lyrics-focus) #listenBar{background:rgba(12,15,20,.92)!important;border:1px solid rgba(255,255,255,.1)!important; -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 32px -20px rgba(0,0,0,.7)}
html body.sky-day:not(.panels-bare):is(.vid-aligned,.lyrics-focus) #listenBar{background:rgba(250,252,254,.95)!important;border-color:rgba(16,48,79,.12)!important;box-shadow:0 14px 32px -22px rgba(16,40,72,.45)}
html body.vid-aligned #listenBar{margin-top:10px}
html body:is(.vid-aligned,.lyrics-focus) #listenBar .ln-plat{color:inherit;letter-spacing:normal}
html body.sky-day:is(.vid-aligned,.lyrics-focus) #listenBar{color:#0b2742}
html body.sky-day:is(.vid-aligned,.lyrics-focus) #listenBar .ln-head{color:#3b5874}
html body.panels-bare:is(.vid-aligned,.lyrics-focus) #listenBar{background:none!important;border-color:transparent!important;box-shadow:none!important}
html body.panels-bare #listenBar .ln-plat{background:rgba(12,15,20,.86);border-radius:999px;text-shadow:none}
html body.sky-day.panels-bare #listenBar .ln-plat{background:rgba(255,255,255,.96);color:#0b2742}
html body.panels-bare #listenBar .ln-head{text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.5)}
html body.sky-day.panels-bare #listenBar .ln-head{text-shadow:0 0 2px #fff,0 0 12px rgba(255,255,255,.9)}
}

/* ── state overrides from shared rules ──
   These repeat declarations from shared rules in the topic files that used to come AFTER the rules above
   and win on equal specificity. Kept here so moving the rules into this file changes nothing. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){.ln-plat:hover{text-shadow:0 0 14px color-mix(in srgb,var(--hb) 55%,transparent)}}
@media (hover:hover){:is(.ln-plat,.un-item,.gcard,.mi,.lang-item):hover :is(.ln-ic,.bi,[class*="-ic"]){color:inherit}}