/* Dock playback panels beside the page, with a shared opening/closing rhythm. */
:root{--panel-width:310px;--panel-gap:16px;--panel-motion:250ms cubic-bezier(.22,.68,0,1)}
#right-panel{transition:transform var(--panel-motion),opacity 200ms ease;overscroll-behavior:contain;scrollbar-width:thin}
@media(min-width:1024px){
 #main{transition:right var(--panel-motion)}
 body:has(#right-panel.panel-open:not([hidden])) #main{right:calc(var(--panel-width) + var(--panel-gap))}
 #right-panel{width:var(--panel-width);right:var(--panel-gap);box-shadow:none}
 #right-panel .panel-head{gap:12px}
 #right-panel .panel-head h2{min-width:0}
 #right-panel .lib-row{width:100%;text-align:left}
 /* Use the available page width rather than squeezing desktop cards too far. */
 body:has(#right-panel.panel-open:not([hidden])) .cards:not(.grid):not(.artist-cards){grid-auto-columns:minmax(132px,calc((100% - 64px)/4.5))}
}
@media(min-width:1024px) and (max-width:1279px){
 :root{--panel-width:280px;--panel-gap:12px}
 body:has(#right-panel.panel-open:not([hidden])) #main{padding-inline:20px}
 body:has(#right-panel.panel-open:not([hidden])) .cards.grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){#main,#right-panel{transition:none}}

/* Full-height dock; keep the floating player inside the remaining page. */
@media(min-width:1024px){
 body #right-panel,body.signed-in #right-panel,body.zamar-free #right-panel{top:0;bottom:0;right:0;max-height:none;border-radius:0;border-width:0 0 0 1px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}
 #player{transition:left var(--panel-motion),width var(--panel-motion)}
 body:has(#right-panel.panel-open:not([hidden])) #player{left:calc(var(--side) + (100% - var(--side) - var(--panel-width) - var(--panel-gap))/2);width:min(668px,calc(100% - var(--side) - var(--panel-width) - var(--panel-gap) - 40px))}
}
@media(prefers-reduced-motion:reduce){#player{transition:none}}