/* Persistent host, independent of authentication and module network requests. */
:root { color-scheme: dark; --shell-width: 264px; --shell-motion: 270ms; }
html,body { margin:0; min-height:100%; background:#111113; color:#f4f4f5; overflow-x:clip; }
body { --shell-offset:var(--shell-width); }
body[data-shell-mode="compact"] { --shell-width:80px; }
body[data-shell-mode="direct"],body[data-shell-hidden="true"],body.auth-view { --shell-offset:0px; }
#shell-navigation { position:fixed; inset:0 auto 0 0; width:var(--shell-width); z-index:110; pointer-events:none; }
#module-viewport { margin-left:var(--shell-offset); min-height:100dvh; min-width:0; background:#111113; transition:margin-left var(--shell-motion) ease,transform var(--shell-motion) ease,border-radius var(--shell-motion) ease; }
body #module-viewport .shell { box-sizing:border-box; width:100%; max-width:1200px; min-height:100dvh; margin:0 auto; padding:calc(28px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
body[data-shell-mode="direct"] #module-viewport .shell,body[data-shell-hidden="true"] #module-viewport .shell { padding-top:calc(76px + env(safe-area-inset-top)); }
body.auth-view #shell-navigation { display:none; }
body.auth-view #module-viewport .shell { padding-top:32px; }
.shell-placeholder { padding:28px 20px; display:grid; gap:24px; }
.shell-avatar-placeholder { display:block; width:40px; height:40px; border-radius:50%; background:#29292d; }
.shell-line,.shell-block { display:block; height:14px; max-width:260px; border-radius:8px; background:#252529; }
.shell-line:nth-child(2) { width:65%; }
.shell-block { height:180px; max-width:none; }
.viewport-placeholder { display:grid; gap:24px; max-width:800px; padding-top:16px; }
body .account-layout { display:grid; gap:24px; min-width:0; }
/* Classic fixed controls must respect the shell's usable width. */
body.g-radio-view .radio-player-portal .radio-sticky-player,
body.g-radio-view .radio-player-sub-island { left:calc(var(--shell-offset) + 16px); right:16px; width:calc(100vw - var(--shell-offset) - 32px); max-width:1160px; }
body[data-shell-active="true"] .radio-player-portal { display:none; }
body.g-radio-view .radio-controls { max-width:calc(100vw - var(--shell-offset) - 48px); left:calc(50% + var(--shell-offset)/2); }
@media(max-width:767px) {
  html,body.dist-shell-view { background:#19191d; }
  body { --shell-offset:0px; --shell-width:min(280px, calc(100vw - 64px)); }
  body[data-shell-mode="compact"] { --shell-width:min(280px, calc(100vw - 64px)); }
  /* The host has no stacking context: sidebar and foreground controls have stable levels. */
  #shell-navigation { position:static; height:0; width:100%; z-index:auto; }
  /* Mobile motion has one owner, including cancellation and the final frame. */
  #module-viewport { position:relative; z-index:1; isolation:isolate; transition:none; backface-visibility:hidden; border-radius:calc(44px * var(--drawer-progress,0)) 0 0 calc(44px * var(--drawer-progress,0)); }
  body #module-viewport .shell { padding:calc(76px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  body[data-shell-active="true"] { overflow:hidden; }
  body[data-shell-active="true"] #module-viewport { transform:translate3d(var(--drawer-x,0px),0,0); box-shadow:-6px 0 20px #0003; overflow:hidden; will-change:transform; }
  body[data-shell-active="true"] #module-viewport::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 1px 0 0 #ffffff26; pointer-events:none; z-index:120; }
  /* Input shield is a body portal: it does not lift the visible sidebar above the app. */
  .shell-dismiss { position:fixed; inset:0 auto 0 0; z-index:112; width:100vw; height:100dvh; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; touch-action:none; visibility:hidden; pointer-events:none; transition:none; transform:translate3d(var(--drawer-x,0px),0,0); }
  .shell-dismiss:hover,.shell-dismiss:active { background:transparent; transform:translate3d(var(--drawer-x,0px),0,0); }
  .shell-dismiss[data-active="true"] { visibility:visible; pointer-events:auto; will-change:transform; }
  html,body { overscroll-behavior-x:none; }
  body.g-radio-route #module-viewport .shell { padding-top:env(safe-area-inset-top); }
  .shell-placeholder { display:none; }
  body.g-radio-view .radio-controls { max-width:calc(100vw - 32px); }
}
@media(prefers-reduced-motion:reduce) { :root { --shell-motion:0ms; } }

.shell-refresh { position:fixed; top:calc(12px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:112; padding:10px 18px; border-radius:24px; background:#29292e; font-size:12px; pointer-events:none; }
html { overscroll-behavior-y:contain; }

/* Secondary catalog controls now live in the shared HeroUI menu. */
body.g-radio-view .radio-controls,body.g-radio-view .radio-top-blur,body.g-radio-view .radio-top-islands,body.g-radio-view .radio-interface { display:none!important; }
body.g-radio-view .radio-page::before { display:none; }

body.g-radio-view::before { display:none; }
body.g-radio-view .radio-sticky { height:0!important; }
.bootstrap-diagnostics { position:fixed; bottom:0; left:0; right:0; z-index:200; max-height:45dvh; overflow:auto; background:#19191d; padding:12px; }
[data-bootstrap-error] pre,.bootstrap-diagnostics pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }

/* Only decorative G-Radio costs are suppressed during drag + settle. */
@media(max-width:767px) {
  body[data-drawer-dragging="true"] :is(.radio-episode,.radio-episode::before,.radio-episode::after) { box-shadow:none!important; filter:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  body[data-drawer-dragging="true"] :is(.radio-episode,.radio-episode *,.radio-episode::before,.radio-episode::after) { transition:none!important; animation-play-state:paused!important; }
}

/* Two views share the engine; the bottom view exists only on Music/Radio routes. */
#dist-module-audio-player{position:fixed;bottom:0;left:var(--shell-offset);right:0;z-index:45;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));pointer-events:none}
#dist-module-audio-player>*{pointer-events:auto}
body.dist-module-audio-visible #module-viewport .shell{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
body[data-shell-active="true"] #dist-module-audio-player{visibility:hidden}
@media(prefers-reduced-motion:reduce){#dist-module-audio-player{transition:none}}

/* Static equivalent of React Aria usePress, compatible with style-src self. */
@layer { [data-react-aria-pressable] { touch-action:pan-x pan-y pinch-zoom; } }