/* ══ ONE MUSIC STAGE — loaded after site.css / mobile.css (js/stage.js places the columns) ══
   Two faces: song titles and lyrics in the display serif, controls in the UI sans.
   One radius family: panels 24px · cover and video 18px · buttons pills/circles. */
:root{--theme:#d9aa55;--red:#d22730;--disp:'Work Sans','Didact Gothic','Inter','Heebo','Assistant',system-ui,sans-serif;--ui:'Work Sans','Inter','Assistant','Heebo',system-ui,sans-serif;--theme2:#f1c878;--gold:var(--theme);/* v2: gold retired — chrome follows the song */
    --song-text:color-mix(in srgb, var(--theme2) 72%, #fff);--cardmaxh:none;--navy:16,27,42;--navy-deep:12,20,34;--vvb:0px;--barH:0px;--dockH:0px;--tglow: color-mix(in srgb, var(--theme) 55%, transparent);--tedge: color-mix(in srgb, var(--theme) 70%, #ffffff);--trim:  color-mix(in srgb, var(--theme) 40%, rgba(255,255,255,.16));--dur:.26s;--dur-fast:.15s;--eyebrow:.28em;--ease: cubic-bezier(.38,.12,.24,1);--ease-calm: cubic-bezier(.42,0,.2,1);--ease-snap: cubic-bezier(.2,.8,.2,1);--lv-o:#fff;/* ONE surface for every panel = the player card's glass ramp (user call 2026-08-16) */
    --pan-bg:linear-gradient(180deg, rgba(var(--slate),calc(var(--glass)*.72)), rgba(var(--slate),calc(var(--glass)*.8)) 16%, rgba(var(--slate),calc(var(--glass)*.8)) 84%, rgba(var(--slate),calc(var(--glass)*.72)));--pan-blur:blur(18px);--bc-spotify:#1ED760;--bc-apple:#FA243C;--bc-yt:#FF0000;--bc-ig:#E1306C;--bc-bmc:#FFDD00;--k-disp:'Cormorant Garamond','GFS Didot','Frank Ruhl Libre',Georgia,serif}

@media (min-width:960px){
/* ── compact header ── */
html body.stage .wbar{padding:2px 0}
/* the bare header was washing out over the bright scene photos — it sits on a glass
   band that runs edge-to-edge and all the way to the top of the window */
html body.stage .wbar::before{content:'';position:fixed;top:0;left:0;right:0;z-index:-1;height:calc(env(safe-area-inset-top,0px) + 64px);border-radius:0;pointer-events:none;
  background:rgba(250,252,254,.92);border-bottom:1px solid rgba(16,48,79,.12);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 18px 44px -28px rgba(16,40,72,.55)}
html body.stage:not(.sky-day) .wbar::before{background:rgba(12,15,20,.9);border-color:rgba(255,255,255,.1);box-shadow:0 18px 44px -24px rgba(0,0,0,.7)}
html body.stage.no-borders .wbar::before{border-color:transparent}
/* Minimal panels (body.panels-bare) strips these too: header band and About card go bare */
html body.stage.panels-bare .wbar::before{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.panels-bare #stageAbout .sa-in{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  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 #stageAbout .sa-in{color:#0d2b47;text-shadow:0 0 2px rgba(255,255,255,.7),0 1px 16px rgba(255,255,255,.75)}
body.panels-bare #stageAbout .sa-pills a{background:rgba(255,255,255,.1);border-color:transparent}
body.sky-day.panels-bare #stageAbout .sa-pills a{background:rgba(16,48,79,.08)}
body.no-borders #stageAbout .sa-pills a{border-color:transparent}
body.no-borders #stageAbout .sa-in{border-color:transparent}
html body.stage .ed-script-r,html body.stage #sideRail{display:none!important}

/* ── the stage: the card column shifts left so card + right column sit centred as one ── */
html body.stage .showcase-center{position:relative;translate:calc(-1 * var(--st-shift,0px)) 0}
html body.stage #scroller{margin-bottom:var(--st-extra,0px);transition:margin .3s ease}
html body.stage #listenBar{margin-left:calc(2 * var(--st-shift,0px));width:var(--st-full,auto);max-width:none;box-sizing:border-box;translate:none;border-radius:24px}
html body.stage #showcase #startRail{position:absolute;inset:auto;left:var(--st-x,0px);top:var(--st-y,0px);width:var(--st-w,380px)!important;height:var(--st-h,auto);max-height:none;transform:none;translate:none;margin:0;z-index:12;display:flex!important;flex-direction:column;gap:14px}
html body.stage #showcase #startRail>aside{border-radius:24px}
html body.stage #showcase #startRail #hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
html body.stage #showcase #startRail #upnext{flex:0 0 auto}
html body.stage #showcase #startRail #lyricsPanel{flex:1 1 auto;height:auto;max-height:none;min-height:0}
html body.stage.grid-open #showcase #startRail,html body.stage.about-open #showcase #startRail{visibility:hidden}

/* ── player card: one polished surface in every state (also with Minimal panels) ── */
html body.stage #showcase .wcard.active:not(.lyr-open){border-radius:24px;background:rgba(250,252,254,.9);border:1px solid rgba(16,48,79,.12);box-shadow:0 28px 60px -34px rgba(16,40,72,.5);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
html body.stage:not(.sky-day) #showcase .wcard.active:not(.lyr-open){background:rgba(12,15,20,.9)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 28px 60px -30px rgba(0,0,0,.75)!important}
html body.stage #showcase .wcard.active:not(.lyr-open) .art{border-radius:23px;box-shadow:none}
html body.stage #showcase .wcard.active :is(.wtext,.card-player,.cp-title){text-shadow:none}
/* playing-video size (square, fills like the cover) lives in css/site.css → "VIDEO SIZE" (§14) */
html body.stage.sky-day .wcard.active.k-video:not(.k-pending):not(.lyr-open) .va-btn{background:#fff!important;border-color:rgba(16,48,79,.2)!important;color:#0b2742!important}
html body.stage.sky-day .wcard.active.k-video:not(.k-pending):not(.lyr-open) .va-btn:is(:hover,:focus-visible){background:#eef4f9!important}
html body.stage.sky-day .wcard.active.k-video:not(.k-pending):not(.lyr-open) .va-k{color:#3b5874!important}

/* ── lyrics: a consistent white surface, the sung line leads, translation quiet beneath ── */
html body.stage #startRail>:is(#lyricsPanel,#upnext){background:rgba(250,252,254,.92)!important;border:1px solid rgba(16,48,79,.12);box-shadow:0 22px 48px -30px rgba(16,40,72,.45)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;text-shadow:none;color:#0b2742}
html body.stage:not(.sky-day) #startRail>:is(#lyricsPanel,#upnext){background:rgba(12,15,20,.92)!important;border-color:rgba(255,255,255,.1)!important;box-shadow:0 22px 48px -26px rgba(0,0,0,.7)!important;color:#eef2f6}
/* the hero lyrics window (surface, type, live/idle states) lives in css/lyrics-follow.css — ONE copy shared by the stage and the phone home */
html body.stage #lyricsPanel .lp-o{font-family:var(--k-disp)}
/* titles share the lyrics' face */
html body.stage :is(.wcard .wtext h2,.cpt-name,#upnext .un-t,.va-t){font-family:var(--k-disp);letter-spacing:.01em}

/* ── scenery: stays, but softens behind the stage ── */
html body.stage #atmos::after{content:'';position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 64% at 50% 46%,rgba(246,249,252,.42),rgba(246,249,252,.12) 70%,transparent)}
html body.stage:not(.sky-day) #atmos::after{background:radial-gradient(ellipse 72% 64% at 50% 46%,rgba(6,10,16,.45),rgba(6,10,16,.15) 70%,transparent)}
/* dark scene = the phone's: top/bottom depth only (no 90deg side washes and their straight-edged
   lit column) + one soft oval vignette that follows the screen */
html body.stage:not(.sky-day) #bgTint{background:linear-gradient(180deg, rgba(4,7,11,.56) 0%, rgba(4,7,11,.4) 34%, rgba(4,7,11,.72) 100%)}
html body.stage:not(.sky-day) #vignette::before{background:radial-gradient(ellipse 78% 72% at 50% 46%, transparent 38%, rgba(3,9,18,.36) 72%, rgba(3,9,18,.64) 100%)}

/* ── About: its own section below the stage ── */
/* a full screen of its own: once scrolled to, nothing of the stage shows above it */
#stageAbout{position:relative;z-index:11;box-sizing:border-box;min-height:100vh;min-height:100dvh;padding:calc(64px + clamp(24px,5vh,64px)) clamp(24px,5vw,96px) calc(var(--dockH,0px) + 72px)}
#stageAbout .sa-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  padding:clamp(28px,3.4vw,48px);border-radius:24px;background:var(--pan-bg);border:1px solid var(--glass-bd);
  box-shadow:var(--pan-shadow);-webkit-backdrop-filter:var(--pan-blur);backdrop-filter:var(--pan-blur);color:#0b2742;
  font-family:var(--ui);-webkit-user-select:text;user-select:text}
body:not(.sky-day) #stageAbout .sa-in{color:#eef2f6}
#stageAbout .sa-brand{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;font-weight:600;letter-spacing:.42em}
#stageAbout .sa-brand img{width:28px;height:28px;display:block}
#stageAbout .sa-h{margin:0 0 14px;font-family:var(--k-disp);font-weight:400;font-size:clamp(34px,3vw,48px);line-height:1.1;letter-spacing:0}
#stageAbout .sa-bio{font-size:16px;line-height:1.65;max-width:58ch;text-wrap:pretty}
#stageAbout .sa-bio p{margin:0 0 12px}
#stageAbout .sa-k{margin:22px 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#1e5a96}
body:not(.sky-day) #stageAbout .sa-k{color:#9cc3ea}
#stageAbout .sa-k[hidden]{display:none}
#stageAbout .sa-links .sa-grp:first-child .sa-k{margin-top:4px}
#stageAbout .sa-script{margin:26px 0 0;font-family:'Caveat',cursive;font-size:30px;line-height:1.15;color:#0d2b47;opacity:.9}
body:not(.sky-day) #stageAbout .sa-script{color:#fff}
#stageAbout .sa-pills{display:flex;flex-direction:column;gap:6px}
#stageAbout .sa-pills a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 14px 6px 8px;border-radius:14px;
  color:inherit;text-decoration:none;font-size:15px;font-weight:600;background:rgba(16,48,79,.05);border:1px solid rgba(16,48,79,.1);transition:background .2s ease}
body:not(.sky-day) #stageAbout .sa-pills a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
#stageAbout .sa-pills a:is(:hover,:focus-visible){background:rgba(16,48,79,.1);outline:none}
body:not(.sky-day) #stageAbout .sa-pills a:is(:hover,:focus-visible){background:rgba(255,255,255,.12)}
#stageAbout .sa-pills a:focus-visible{box-shadow:0 0 0 2px var(--theme)}
#stageAbout .sa-pills .bi{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 auto}
#stageAbout .sa-pills .bi :is(svg,img){width:22px;height:22px;display:block}
#stageAbout .sa-pills .bi .k-ic{font-size:22px}
#stageAbout .sa-pills a::after{content:none!important}
#stageAbout .sa-pills a :is(.cn-sub,small){display:none}
}
#stageAbout{display:none}
@media (min-width:960px){ body.stage:not(.mos) #stageAbout{display:block} body.grid-open #stageAbout{visibility:hidden} }
@media (min-width:960px) and (max-width:1180px){ #stageAbout .sa-in{grid-template-columns:minmax(0,1fr)} }

/* gentle state changes only; none under reduced motion */
@media (prefers-reduced-motion:reduce){ html body.stage #scroller{transition:none} }
html.rm body.stage #scroller{transition:none}

@media (min-width:960px){
/* full lyrics panel: the same three columns, tight rows, start-aligned */
html body.stage #lyricsPanel :is(.lp-lines,.lyr-sec,.lyr-label){text-align:start}
html body.stage #lyricsPanel .lp-line{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(14px,1.5vw,26px);align-items:baseline;text-align:start;padding:3px 12px}
html body.stage.lv-ph:not(.lv-tr) #lyricsPanel .lp-line,
html body.stage.lv-tr:not(.lv-ph) #lyricsPanel .lp-line{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
html body.stage.lv-ph.lv-tr #lyricsPanel .lp-line{grid-template-columns:minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr)}
html body.stage #lyricsPanel .lp-o{font-size:clamp(17px,1.15vw,22px);line-height:1.3}
html body.stage #lyricsPanel .lp-ph{margin-top:0;font-size:clamp(12px,.85vw,15px);line-height:1.3}
html body.stage #lyricsPanel .lp-tr{margin-top:0;font-size:clamp(13px,.95vw,16px);line-height:1.35}


}

@media (min-width:960px){
html body.stage #startRail #upnext .un-item{grid-template-columns:22px auto minmax(0,1fr) auto}
}

/* dark theme surfaces = the phone lyrics drawer's solid ink-blue (#141a22), every panel and popover */
@media (min-width:960px){
  html body:not(.sky-day) :is(#hero,#lyricsPanel,#aboutSong,#upnext,#listenBar,#dock,#settingsMenu,#langMenu,#infoMenu,.cl-copy-menu,#startRail>#hero,#startRail>#lyricsPanel){background:#141a22!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}