/* Modern player bar, md and up: artwork, title, version, transport, waveform, then the
 * full-screen / queue options and Autoplay. DOM order is unchanged (the
 * mobile bar depends on it), so flex order reorders the row; .hh-pl-info stops
 * being a box so its children join the bar. Revert: remove this file and its
 * enqueue in functions.php. */
@media (min-width:768px){
.hh-modern-ui #audioPlayer .hh-pl-info{display:contents}
.hh-modern-ui #audioPlayer .hh-pl-identity{order:0;width:auto;flex:none}
.hh-modern-ui #audioPlayer .hh-pl-transport{order:2;border-inline:0}
.hh-modern-ui #audioPlayer .hh-player-waveform{order:3}
.hh-modern-ui #audioPlayer .hh-pl-version{order:1;align-self:center;display:flex;align-items:center}
.hh-modern-ui #audioPlayer .hh-pl-expand{order:4}
.hh-modern-ui #audioPlayer .hh-pl-queue{order:5;margin-inline-start:-.75rem}
/* Autoplay lives in the queue panel; the bar's switch stays in the DOM because player.js reads it. */
.hh-modern-ui #audioPlayer .hh-pl-autoplay{display:none}
}
/* Cancels the bar's column gap so the full-screen and queue buttons sit together. */
@media (min-width:1280px){.hh-modern-ui #audioPlayer .hh-pl-queue{margin-inline-start:-1rem}}
/* Play/pause: same hit area as before, no fill; the icon is centred in the button. */
.hh-modern-ui #audioPlayer #play-pause[data-hh-play]{width:2.75rem;height:2.75rem;padding:0;flex:none;border-radius:9999px;background:transparent}
.hh-modern-ui #audioPlayer #play-pause[data-hh-play] .hh-osmo-playpause{inset:0;margin:auto;top:0;left:0}
/* Versions and queue drawers: no border, rounded only on top, the crate drawer's dark surface,
 * no horizontal scroll, and no fill on the playing row (its animation and label mark it). */
.hh-modern-ui .hh-drawer:is(:has(> #versions-container),:has(> #playlist-container)){border:0;border-radius:var(--hh-dialog-radius) var(--hh-dialog-radius) 0 0}
.dark .hh-modern-ui .hh-drawer:is(:has(> #versions-container),:has(> #playlist-container)){background:oklch(14.1% .005 285.823)}
.hh-modern-ui :is(#versions-container,#playlist-container) :is([data-hh-motion-group],ul){overflow-x:hidden}
.hh-modern-ui :is(#versions-container,#playlist-container) .result--main:is(.active,.open){background:transparent;box-shadow:none}
/* Title above artist, as in the release rows. */
.hh-modern-ui #audioPlayer #player-artist{order:2}
/* Drawer headings: capitalised, extra-light, untracked, 16px. */
.hh-modern-ui :is(#versions-container,#playlist-container) > div > h4{text-transform:capitalize;font-weight:200;letter-spacing:0;font-size:1rem}
/* `translate` is driven every frame by the drawers' timeline while the bar moves sideways, so it must
 * not transition (the bar would trail the drawer and land late). The first reveal gets its ease from a
 * keyframe animation instead, which only runs when the bar appears. */
.hh-modern-ui #audioPlayer{transition-property:transform}
@keyframes hh-player-rise{from{translate:0 100%}}
.hh-modern-ui #audioPlayer.translate-y-0{animation:hh-player-rise .5s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.hh-modern-ui #audioPlayer.translate-y-0{animation:none}}
/* Glass backdrop for the player bar (Osmo Supply "Glass Effect"): the bar itself turns transparent, the
 * .glass-effect layers blur and light whatever scrolls underneath. Dark mode stays dark: the fill is the
 * page canvas colour at partial opacity and the highlights are dialled down. */
.hh-modern-ui #audioPlayer,.hh-modern-ui #audioPlayer #player-container{background:transparent}
.hh-modern-ui #audioPlayer #player-container{position:relative;z-index:1}
.hh-modern-ui #audioPlayer .glass-effect{pointer-events:none;isolation:isolate;color:#201d1d;border-radius:inherit;position:absolute;inset:0;overflow:hidden;font-size:16px;z-index:0}
.hh-modern-ui #audioPlayer .glass-effect>div{position:absolute;inset:0;border-radius:inherit}
.hh-modern-ui #audioPlayer .glass-effect__fill{background-color:color-mix(in oklch,var(--hh-canvas) 78%,transparent)}
.hh-modern-ui #audioPlayer .glass-effect__fill-burn{opacity:.05;mix-blend-mode:color-burn;background-color:currentColor}
.hh-modern-ui #audioPlayer .glass-effect__highlight-soft{mix-blend-mode:overlay;box-shadow:inset -.28125em -.28125em .09375em -.328125em #ffffff80}
.hh-modern-ui #audioPlayer .glass-effect__highlight-strong{box-shadow:inset .28125em .28125em .09375em -.328125em #fffc}
.hh-modern-ui #audioPlayer .glass-effect__edge-light{mix-blend-mode:plus-lighter;box-shadow:inset .1875em .28125em .09375em -.1875em #b3b3b380}
.hh-modern-ui #audioPlayer .glass-effect__edge-dark{mix-blend-mode:overlay;box-shadow:inset -.1875em -.28125em .09375em -.1875em #b3b3b34d}
.hh-modern-ui #audioPlayer .glass-effect__inner-glow{mix-blend-mode:darken;box-shadow:inset 0 0 1.75em #f2f2f24d}
.dark .hh-modern-ui #audioPlayer .glass-effect{color:#fff}
.dark .hh-modern-ui #audioPlayer .glass-effect__fill{background-color:color-mix(in oklch,color-mix(in oklch,color-mix(in oklch,var(--hh-canvas) 82%,black) calc(100% - var(--hh-tint,10%)),oklch(.16 .07 262) var(--hh-tint,10%)) 95%,transparent)}
.dark .hh-modern-ui #audioPlayer .glass-effect__fill-burn{opacity:0}
.dark .hh-modern-ui #audioPlayer .glass-effect__highlight-soft{box-shadow:inset -.28125em -.28125em .09375em -.328125em #ffffff14}
.dark .hh-modern-ui #audioPlayer .glass-effect__edge-dark{box-shadow:inset -.1875em -.28125em .09375em -.1875em #00000066}
.dark .hh-modern-ui #audioPlayer .glass-effect__inner-glow{mix-blend-mode:normal;box-shadow:inset 0 0 1.75em #ffffff0a}
/* Progressive blur: four stacked backdrop blurs. The first covers the whole bar, so even the top edge is
 * softened (3px); the next three are masked to fade in toward the bottom and compound to about 12px there.
 * (The layers sit beside .glass-effect, not inside it: its isolation would hide the page from them.) */
.hh-modern-ui #audioPlayer .glass-blur>i{position:absolute;inset:0}
.hh-modern-ui #audioPlayer .glass-blur>i:nth-child(1){-webkit-backdrop-filter:saturate(120%) blur(3px);backdrop-filter:saturate(120%) blur(3px)}
.hh-modern-ui #audioPlayer .glass-blur>i:nth-child(2){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 60%);mask-image:linear-gradient(to bottom,transparent 0%,#000 60%)}
.hh-modern-ui #audioPlayer .glass-blur>i:nth-child(3){-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000 100%);mask-image:linear-gradient(to bottom,transparent 30%,#000 100%)}
.hh-modern-ui #audioPlayer .glass-blur>i:nth-child(4){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to bottom,transparent 60%,#000 100%);mask-image:linear-gradient(to bottom,transparent 60%,#000 100%)}
/* Dark mode: no lit top edge (the top highlights are off). */
.dark .hh-modern-ui #audioPlayer .glass-effect__highlight-strong,.dark .hh-modern-ui #audioPlayer .glass-effect__edge-light{box-shadow:none}
/* Light mode follows the Osmo glass effect as defined: one uniform saturate + .75em blur on the container, the
 * original fill and highlights above, and none of the progressive blur layers. */
html:not(.dark) .hh-modern-ui #audioPlayer .glass-effect{-webkit-backdrop-filter:saturate(120%) blur(.75em);backdrop-filter:saturate(120%) blur(.75em)}
html:not(.dark) .hh-modern-ui #audioPlayer .glass-blur{display:none}
.hh-modern-ui #audioPlayer .glass-blur{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit}
/* Version dropdown in the bar: a little narrower and shorter, with smaller text. */
@media (min-width:768px){
.hh-modern-ui #audioPlayer .hh-pl-version{width:7rem}
.hh-modern-ui #audioPlayer .hh-pl-version>button{padding:.25rem .5rem}
.hh-modern-ui #audioPlayer .hh-pl-version #player-version{min-width:4.25rem;font-size:.6875rem}
}
/* Compact player bar on phones/tablets (the bottom dock layout). */
@media (max-width:1023px){.hh-modern-ui #audioPlayer{height:48px}.hh-modern-ui #audioPlayer .hh-mobile-dock-blur,.hh-modern-ui .hh-mobile-dock-blur{height:calc(48px + 32px + 64px)}}
/* Nothing may widen the page on phones; clip (unlike hidden) keeps sticky/fixed children working. */
@media (max-width:1023px){html:has(body.hh-modern-ui),body.hh-modern-ui{overflow-x:clip}}
/* Footer clears the docked player (48px) plus the bottom nav (64px) on phones/tablets. */
@media (max-width:1023px){body.player-open .hh-site-footer>section{padding-bottom:calc(176px + env(safe-area-inset-bottom,0px))}}
/* Desktop player bar: 64px. */
@media (min-width:1024px){.hh-modern-ui #audioPlayer{height:64px}}
/* Overlays that sit above the desktop player follow its 64px height. */
@media (min-width:1024px){.hh-modern-ui .hh-full-player[class*="lg:bottom-[76px]"],.hh-modern-ui .z-\[100\][class*="lg:bottom-[76px]"]{bottom:64px}}
/* Artwork is square and matches the bar height: 64px on desktop, 48px on phones/tablets. */
.hh-modern-ui #audioPlayer .player-image{width:64px;height:64px}
@media (max-width:1023px){.hh-modern-ui #audioPlayer .player-image{width:48px;height:48px}}
/* Nudge the version dropdown toward the transport so its gap matches next-button to waveform. */
@media (min-width:1024px){.hh-modern-ui #audioPlayer .hh-pl-version{transform:translateX(12px)}}
/* Sidebar user block clears the 64px player (was 76px + 8px). */
.hh-modern-ui.player-open #sidebar-user{padding-block-end:72px}
.hh-modern-ui.player-open #sidebar-user #sidebar-user-menu{inset-block-end:72px}

/* Phones/tablets: fewer, lighter live-blur layers while scrolling. The bottom dock keeps its three
   gentlest blur layers (no 16px/36px ones), the player keeps two, and the glass highlight layers
   that use blend modes are dropped. */
@media (max-width:1023px){
	.hh-mobile-dock-blur__layer.is--4,.hh-mobile-dock-blur__layer.is--5{display:none}
	.hh-modern-ui #audioPlayer .glass-blur>i:nth-child(n+3){display:none}
	.hh-modern-ui #audioPlayer .glass-effect>div:not(.glass-effect__fill){display:none}
}

/* Phones/tablets: no glass at all. The player bar is a solid surface and the dock's blur fade is gone. */
@media (max-width:1023px){
	.hh-modern-ui #audioPlayer .glass-blur,.hh-modern-ui #audioPlayer .glass-effect,.hh-mobile-dock-blur{display:none!important}
	.hh-modern-ui #hh-mobile-dock>#audioPlayer{background:var(--hh-canvas)!important}
}

/* The member shell is isolated. Keep its sidebar popovers above the later footer. */
.hh-modern-ui .isolate:has(> .hh-sidebar){z-index:1}

/* Compact the mobile row actions without shrinking their tap targets. */
@media (max-width:767px){
    .hh-modern-ui .hh-track-actions{gap:2px}
    .hh-modern-ui .hh-track-title{font-size:.75rem;line-height:1rem}
    .hh-modern-ui .hh-version-crate{width:100%;min-height:36px;height:auto;padding:8px 10px;gap:10px}
}