/* Installed Apple apps use the browser's contained safe viewport.
   No screen.height arithmetic, fixed root, or duplicate status-bar padding. */
html.ios-contained{height:100%!important;min-height:-webkit-fill-available;overflow:hidden!important;--reserved-top:0px!important;--reserved-bottom:0px!important;--navigation-height:64px!important;background:var(--bg)!important}
html.ios-contained body{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important;transform:none!important;background:var(--bg)!important}
html.ios-contained body::before,html.ios-contained body::after{display:none!important}
html.ios-contained body>header{position:relative!important;inset:auto!important;order:0;flex:0 0 64px!important;height:64px!important;min-height:64px!important;padding:0 5%!important;margin:0!important;z-index:30;background:var(--bg)!important;filter:none!important;mask:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
html.ios-contained header::before,html.ios-contained header::after{display:none!important}
html.ios-contained header .brand{filter:none!important;opacity:1!important}
html.ios-contained header :is(#settingsButton,#headerSearch,#headerFavourites){top:32px!important;filter:none!important}
html.ios-contained body>main,html.ios-contained body.panel-open>main{position:relative!important;inset:auto!important;order:1;flex:1 1 0!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0 auto!important;padding-top:12px!important;padding-bottom:calc(var(--player-height) + 24px)!important;overflow-x:hidden!important;overflow-y:auto!important;clip-path:inset(0)!important;mask:none!important;-webkit-mask:none!important;scroll-padding-top:12px!important}
html.ios-contained body>.bottom-nav{position:relative!important;inset:auto!important;order:2;flex:0 0 64px!important;width:100%!important;height:64px!important;min-height:64px!important;margin:0!important;padding:4px 5%!important;background:var(--bg)!important;z-index:20;align-items:stretch!important;overflow:visible!important}
html.ios-contained .bottom-nav button{height:56px!important;min-height:56px!important;padding:0!important;gap:4px!important;justify-content:center!important}
html.ios-contained .bottom-nav span{display:block!important;line-height:16px!important;flex:none!important}
html.ios-contained body>footer.player{position:absolute!important;top:auto!important;bottom:70px!important;z-index:25}
html.ios-contained #playerPanel,html.ios-contained[data-glass=true] #playerPanel{position:absolute!important;inset:0!important;height:100%!important;max-height:100%!important;width:100%!important;margin:0!important;padding-top:18px!important;padding-bottom:20px!important;z-index:100;clip-path:inset(0)!important}
html.ios-contained #playerPanel :is(#closePlayer,#playerFavourite){position:absolute!important;top:18px!important}
html.ios-contained #playerPanel .player-ambience{position:absolute!important;inset:0!important}
html.ios-contained dialog{margin-top:16px!important;max-height:calc(100% - 32px)!important}
html.ios-contained dialog::before{display:none!important}
html.ios-contained dialog::backdrop{background:#000b!important}

/* Header artwork is foreground, never part of a filtered/fading surface. */
header{isolation:isolate}
header::before,header::after{z-index:-1!important;pointer-events:none!important}
header>.brand{position:relative;z-index:2!important;filter:none!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
header>:is(#headerSearch,#headerFavourites,#settingsButton){z-index:2!important;filter:none!important;opacity:1!important;mask-image:none!important;-webkit-mask-image:none!important}
header .brand>svg,header>:is(#headerSearch,#headerFavourites,#settingsButton)>svg{filter:none!important;opacity:1!important}
header>:is(#headerSearch,#headerFavourites,#settingsButton):not([data-active]){color:var(--ink)}

/* Give the logo's upper arc clearance without cropping its SVG viewport. */
header>.brand{padding-top:6px;padding-bottom:2px;overflow:visible}
header .logo-symbol-svg{overflow:visible!important}
/* Place Apple-app foreground below the native top-edge blur band. */
html.ios-contained body>header{flex-basis:76px!important;height:76px!important;min-height:76px!important;padding-top:12px!important;box-sizing:border-box}
html.ios-contained header :is(#settingsButton,#headerSearch,#headerFavourites){top:44px!important}

/* Fade only the header surface, underneath the crisp foreground controls. */
html.ios-contained body>header{background:transparent!important;isolation:isolate}
html.ios-contained body>header::after{display:block!important;content:'';position:absolute;inset:0 0 -18px!important;height:auto!important;z-index:-1!important;pointer-events:none!important;background:linear-gradient(to bottom,var(--bg) 0%,var(--bg) 30%,color-mix(in srgb,var(--bg) 86%,transparent) 55%,transparent 100%);mask-image:none!important;-webkit-mask-image:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:0;transition:opacity .25s ease}
html.ios-contained body.is-scrolled>header::after{opacity:1}
/* Keep touch scrolling, without the desktop page-scrollbar gutter. */
@media(max-width:600px),(max-width:1366px) and (pointer:coarse){
 html,body,main{scrollbar-width:none!important;scrollbar-gutter:auto!important}
 html::-webkit-scrollbar,body::-webkit-scrollbar,main::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
}
html.ios-device main{scrollbar-width:none!important;scrollbar-gutter:auto!important}
html.ios-device main::-webkit-scrollbar{display:none!important;width:0!important}

/* Overlay the bar on the scroller so its transparent edge reveals real content. */
html.ios-contained body>header{position:absolute!important;inset:0 0 auto!important;width:100%!important;background:transparent!important;z-index:30}
html.ios-contained body>main,html.ios-contained body.panel-open>main{padding-top:88px!important;scroll-padding-top:88px!important}
html.ios-contained body>header::after{display:block!important;inset:0!important;height:100%!important;background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 75%,transparent) 35%,color-mix(in srgb,var(--bg) 35%,transparent) 70%,transparent 100%)!important;z-index:-1!important;mask:none!important;-webkit-mask:none!important;opacity:0;transition:opacity .25s ease}
html.ios-contained body.is-scrolled>header::after{opacity:1}

/* Scrolling turns the full identity into a compact symbol with a crisp shadow. */
header .brand .logo-wordmark-svg{max-width:130px;opacity:1;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
body.is-scrolled header .brand .logo-wordmark-svg{max-width:0;opacity:0;margin-left:-5px;overflow:hidden!important}
body.is-scrolled header>.brand,body.is-scrolled header>:is(#headerSearch,#headerFavourites,#settingsButton),html.ios-contained body.is-scrolled header .brand,html.ios-contained body.is-scrolled header :is(#headerSearch,#headerFavourites,#settingsButton){filter:drop-shadow(0 2px 3px #000b) drop-shadow(0 0 2px #0008)!important}
@media(prefers-reduced-motion:reduce){header .brand .logo-wordmark-svg{transition:none}}

/* Desktop logo gets real layout clearance as well as SVG overflow clearance. */
@media(min-width:1025px){header{padding-top:30px;min-height:96px}header .brand{overflow:visible!important}header :is(#settingsButton,#headerSearch,#headerFavourites){top:calc(50% + 10px)}}
header .logo-symbol-svg{overflow:visible!important}
/* Profile initials use the welcome card's tonal artwork, clipped to the avatar. */
.profile-avatar{position:relative;isolation:isolate;overflow:hidden;color:#fff;--avatar-deep:color-mix(in srgb,var(--accent) 28%,#000);background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 60%,var(--avatar-deep)),var(--avatar-deep))}
.profile-avatar::before{content:'';position:absolute;z-index:-1;pointer-events:none;width:110%;height:42%;top:-7%;right:-25%;background:#ffffff16;transform:rotate(27deg);box-shadow:0 14px 0 #ffffff0b}
.profile-avatar::after{content:'';position:absolute;z-index:-1;pointer-events:none;width:90%;height:90%;right:-44%;bottom:-45%;border:1px solid #ffffff18;border-radius:50%;box-shadow:0 0 0 13px #ffffff08,0 0 0 26px #ffffff05}

/* Export-only requested Light Mode refinement; Dark Mode keeps its stronger shadow. */
:root[data-theme=light] body.is-scrolled header>.brand,
:root[data-theme=light] body.is-scrolled header>:is(#headerSearch,#headerFavourites,#settingsButton),
html.ios-contained[data-theme=light] body.is-scrolled header .brand,
html.ios-contained[data-theme=light] body.is-scrolled header :is(#headerSearch,#headerFavourites,#settingsButton){filter:drop-shadow(0 2px 3px rgba(100,116,139,.18))!important}