/* =============================================================================
   AltSounds Playbar v1.4 (post-feedback fixes)
   =============================================================================
   Two visual contexts:

   SINGLE-GALLERY (.alts-playbar--single-gallery)
     - TRANSPARENT: no bar shell, no pill backgrounds, no dividers.
     - Bare SVG icons float over the video. Legibility via drop-shadow.
     - Left edge aligns with theme title cluster (left: var(--as-chrome-pad-x))
     - Right edge aligns with theme UP NEXT (right: var(--as-chrome-pad-x-right))
     - Fades with title when body.ui-hidden.

   MOTHERSHIP (.alts-playbar--mothership)
     - Solid glass bar, always visible (no auto-hide).
     - FLUSH to bottom of the Mothership panel (gap = 0 — they touch).
     - Shares transport + scrubber + volume layout.

   Both contexts use the same DOM. Layout inside .alts-playbar__inner:
   LEFT   = flavor pills + label
   CENTER = transport buttons (top row) + scrubber (bottom row)
   RIGHT  = PiP/FS (top row) + volume slider (bottom row, aligned w/ scrubber)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   SHELL — shared
   ----------------------------------------------------------------------------- */

.alts-playbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9400;

	height: var(--alts-playbar-h, 72px);
	min-height: 60px;

	color: var(--alts-text, #fff);
	font-family: var(--alts-font-sans, Inter, system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.3;

	contain: layout style;

	transform: translateY(0);
	/* v1.5.8.1 — Morph the playbar from floating-single-gallery to
	   solid-Mothership-glass when alts-guide-open flips. The morph
	   ties the bar's appearance to the panel's slide-in.
	   v1.5.8.5 — TRIMMED transition list to compositor-friendly
	   properties only: opacity, transform, height, min-height. The
	   previous list also animated background, backdrop-filter,
	   border-top-color, and box-shadow — all PAINT-driven properties
	   that force the rasterizer to recompute the bar (and anything
	   it overlays) per animation frame. On the playbar specifically
	   that produced visible "flickering between two states" during
	   the 320ms morph as the rasterizer fell behind. With paint
	   properties dropped, those values now snap-change at the start
	   of the morph and stay stable while opacity/height/transform
	   handle the visible motion. Reads as the same coordinated morph
	   at a fraction of the GPU cost. */
	transition:
		opacity        var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		transform      var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		height         var(--alts-trans-med, 320ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		min-height     var(--alts-trans-med, 320ms) var(--alts-ease, cubic-bezier(.4,0,.2,1));
}

/* v1.5.8.6 — REMOVED transitions on padding + gap. These are layout
   properties — every animated frame triggers a layout-shift entry.
   PerformanceObserver-instrumented scrolling captured 53 of 77 total
   layout shifts (CLS 0.266) coming from these clusters during scroll.
   AltsPlayer state ticks (is-playing toggle, scrubber updates) were
   re-firing the 320ms transitions repeatedly, producing visible
   "tearing" — the playbar children physically jittering mid-frame.
   Snap-changes of padding/gap are imperceptible visually; the
   sustained layout instability was very perceptible. */
.alts-playbar__inner,
.alts-playbar__center,
.alts-playbar__flavor,
.alts-playbar__right {
	/* transition intentionally removed — see comment above */
}

.alts-playbar.is-loading .alts-playbar__controls,
.alts-playbar.is-loading .alts-playbar__right,
.alts-playbar.is-loading .alts-playbar__scrubber,
.alts-playbar.is-loading .alts-playbar__flavor {
	opacity: 0.45;
	pointer-events: none;
}

.alts-playbar.is-empty .alts-playbar__controls,
.alts-playbar.is-empty .alts-playbar__right .alts-playbar__btn,
.alts-playbar.is-empty .alts-playbar__scrubber {
	opacity: 0.35;
	pointer-events: none;
}

/* ============================================================================
   CONTEXT: SINGLE-GALLERY  (floating, transparent, centered in lower-third)
   ----------------------------------------------------------------------------
   The single-gallery playbar is NOT a traditional bottom-anchored bar.
   It's a floating control cluster that sits vertically CENTERED in the 
   space between the song title (at bottom-left of the frame) and the 
   bottom of the viewport. Transparent background — only the icons and 
   pills are visible, floating over the video.

   Height is taller than the Mothership bar (~170px) to give breathing 
   room for vertical centering. Outer container is `pointer-events: none` 
   so clicks pass through to the video below everywhere EXCEPT on the 
   actual controls, which re-enable pointer events on themselves.
   ---------------------------------------------------------------------------- */

.alts-playbar--single-gallery {
	height: 170px;
	min-height: 170px;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-top: 0;
	box-shadow: none;
	/* Clicks pass through the empty bar area to the video. */
	pointer-events: none;
	/* Fade timing matches theme title's .as-chrome-cluster — so bar and 
	   title appear/disappear in sync (not sequentially). */
	transition:
		opacity   0.55s cubic-bezier(0.2, 0.8, 0.25, 1.0),
		transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1.0);
}

/* Re-enable clicks on the actual interactive controls only.
   IMPORTANT: do NOT include the layout containers (__inner, __flavor,
   __center, __right) here — they are full-width and would block clicks
   for the NP widget, taunt button, and artist-station button which sit
   in the same screen region but BELOW the playbar in z-order. We only
   reclaim pointer-events on the actual hit targets the user interacts
   with: buttons, scrubber track, volume track, flavor pills.
   
   Cluster spacers (controls/right/flavor) and the inner grid stay 
   pointer-events: none so non-button areas are click-through.

   The flavor LABEL (chili icon + "FLAVOR" text) is also given auto so
   the label area doesn't visually hide click-through but it's tiny
   anyway. */
.alts-playbar--single-gallery .alts-playbar__btn,
.alts-playbar--single-gallery .alts-playbar__track,
.alts-playbar--single-gallery .alts-playbar__scrubber,
.alts-playbar--single-gallery .alts-playbar__vol-track,
.alts-playbar--single-gallery .alts-playbar__flavor-pill,
.alts-playbar--single-gallery .alts-playbar__flavor-label {
	pointer-events: auto;
}

/* Inner layout: 3-column grid like Mothership, BUT:
   - padding-left = 2 × chrome-pad-x (matches title position — title sits
     inside a floating-header that already offsets by chrome-pad-x, and
     the cluster absolutely-positions by chrome-pad-x again inside it,
     stacking to ~138px at 2308vw)
   - padding-right = chrome-pad-x-right + 48px breathing room so the
     right cluster (volume/PiP/fs) doesn't sit flush with the NP widget
     right edge — user requested more space there.
   - vertically centered in the 170px tall bar
   - scrubber is CAPPED in width so it doesn't stretch viewport-wide */
.alts-playbar--single-gallery .alts-playbar__inner {
	max-width: none;
	padding-left:  calc(2 * var(--as-chrome-pad-x, clamp(24px, 3vw, 96px)));
	padding-right: calc(var(--as-chrome-pad-x-right, calc(var(--as-chrome-pad-x, 96px) + 64px)) + 48px);
	align-items: center;                 /* vertically center all 3 cells */
}

/* v1.5.8 — Bottom-align all three clusters in the single-gallery
   playbar. The bar is 170px tall to accommodate the corner NP widget
   in its upper zone (~76px). Below the NP widget there's roughly 94px
   of usable space. We bottom-align the LEFT (flavor pills), CENTER
   (transport + scrubber), and RIGHT (volume/PiP/fs/info) clusters with
   matching 30px bottom-padding so all three sit in the same horizontal
   band. Previously LEFT and CENTER were center-aligned in the full
   170px while RIGHT was bottom-aligned — they didn't line up and the
   bar looked staggered. */
.alts-playbar--single-gallery .alts-playbar__center {
	width: min(640px, 100%);
	max-width: 640px;
	justify-self: center;
	justify-content: center;
	align-self: flex-end;
	padding: 0 0 30px 0;
}

/* Flavor pills cluster bottom-aligns alongside center + right. */
.alts-playbar--single-gallery .alts-playbar__flavor {
	align-self: flex-end;
	align-items: center;
	padding-bottom: 30px;
}
.alts-playbar--single-gallery .alts-playbar__right {
	/* Vertically center between the NP widget bottom and the viewport
	   bottom. The NP widget reserves the upper ~76px of this 170px bar,
	   leaving roughly 94px of usable space below it. align-self:flex-end
	   plus 30px bottom-padding lands the cluster centered in that lower
	   zone. */
	align-self: flex-end;
	align-items: center;
	padding-bottom: 30px;
}

/* Drop-shadow legibility for bare icons/text over any video frame.
   Mirrors the floating AltSounds logo (.tvlogo2) treatment: a soft 
   3-layer glow rather than a tight box shadow. The wide spread reads
   as a "presence" — you don't see a sharp edge but the icon stays 
   legible against any video frame. */
.alts-playbar--single-gallery .alts-playbar__btn:not(.is-primary) i,
.alts-playbar--single-gallery .alts-playbar__flavor-label-icon i,
.alts-playbar--single-gallery .alts-playbar__flavor-label-text {
	filter:
		drop-shadow(0 0 24px rgba(0, 0, 0, 0.55))
		drop-shadow(0 0 8px  rgba(0, 0, 0, 0.45))
		drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.alts-playbar--single-gallery .alts-playbar__btn.is-primary i {
	filter: none;
}
/* v1.6.31 — Active-pill chrome buttons kill the legibility drop-shadow
   on their icon. The shadow gives the black icon a dark halo that
   reads as a printing error against the lime accent fill (the
   pressed-state bg). Same canon as "no text-shadow on pills" — once
   the chip carries its own filled background, any shadow that was
   helping legibility against the underlying video frame is now
   competing with the chip's own contrast.

   Universal: ANY aria-pressed="true" chrome button on single-gallery
   drops the shadow. Was scoped narrowly to repeat / info in v1.6.24;
   now covers mute, fullscreen, pip, and any future toggle that ships
   with an aria-pressed state. */
.alts-playbar--single-gallery .alts-playbar__btn[aria-pressed="true"] i {
	filter: none;
}
.alts-playbar--single-gallery .alts-playbar__time {
	text-shadow:
		0 0 24px rgba(0, 0, 0, 0.55),
		0 0 8px  rgba(0, 0, 0, 0.45),
		0 2px 6px rgba(0, 0, 0, 0.55);
}

/* Flavor pill TEXT legibility shadow (cleared on active pill below). */
.alts-playbar--single-gallery .alts-playbar__flavor-pill {
	text-shadow:
		0 0 16px rgba(0, 0, 0, 0.55),
		0 0 6px  rgba(0, 0, 0, 0.45),
		0 2px 4px rgba(0, 0, 0, 0.55);
}

/* Active flavor pill: nuke all shadows/filters on green chip. */
.alts-playbar--single-gallery .alts-playbar__flavor-pill[aria-pressed="true"],
.alts-playbar--single-gallery .alts-playbar__flavor-pill[aria-pressed="true"]::before,
.alts-playbar--single-gallery .alts-playbar__flavor-pill[aria-pressed="true"]::after,
.alts-playbar--single-gallery .alts-playbar__flavor-pill[aria-pressed="true"] * {
	filter: none !important;
	text-shadow: none !important;
	-webkit-text-stroke: 0 !important;
}

/* Fade with theme idle-hide (single-gallery only — Mothership bar never 
   fades, guarded separately). Duration/easing MATCH the theme's title 
   fade exactly (see .as-chrome-cluster) so controls and title disappear 
   in sync, not sequentially. Lower specificity than the alts-guide-open
   override below so that when Mothership opens over a single-gallery 
   page, the bar stays visible. */
body.single-gallery.ui-hidden .alts-playbar--single-gallery {
	opacity: 0;
	pointer-events: none;
	transform: translateY(20%);
	transition:
		opacity   0.55s cubic-bezier(0.2, 0.8, 0.25, 1.0),
		transform 0.35s cubic-bezier(0.2, 0.8, 0.25, 1.0);
}

/* v1.5.9.1 — Pause-shows-chrome override.
   When the YT player is paused, the theme's pause-watcher IIFE adds
   .alts-paused to body. While paused, the playbar must stay visible
   even if the cinema-mode timer would otherwise have hidden it (e.g.
   user paused while idle, mouse hasn't moved in 8s). Pairs with the
   AS_Cinema.hold() / .release() ref-count which keeps the rest of
   the chrome (title, eyebrow, menu) visible — same intent here for
   the playbar specifically. Higher specificity than the .ui-hidden
   rule above (3 body classes vs 2) so this wins. */
html body.single-gallery.alts-paused .alts-playbar--single-gallery {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* v1.5.8.1 — Info modal stays the playbar visible.
   When the user opens the info modal, the theme adds .as-modal-open to
   the body — and a second later, the cinema ui-hide timer adds .ui-hidden
   on top, fading the playbar away beneath the modal. The user sees the
   modal but loses access to play/pause/scrub from the bar. We force the
   bar back into view here. Specificity wins over the .ui-hidden rule
   above (html prefix + 3 body classes vs. 2). */
html body.single-gallery.as-modal-open .alts-playbar--single-gallery {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* ---- Mothership-open-over-single-gallery overrides ----
   When the user opens Mothership on top of a single-gallery page, the bar
   should: (a) revert to the SOLID glass Mothership treatment,
   (b) shrink back down to Mothership height (72px) so the panel shell
   sits right on top of it flush, (c) stay visible even if the theme's
   cinema ui-hidden class is also on the body, (d) reclaim pointer-events.

   Specificity note: the rule has THREE classes on the body ancestor 
   (html body.alts-guide-open) combined with the element class, so it 
   beats `body.single-gallery.ui-hidden .alts-playbar--single-gallery` 
   (which has 3 classes total) by one more via the html prefix. */
html body.alts-guide-open .alts-playbar--single-gallery {
	/* v1.5.8.1 → v1.5.8.3 — match the Mothership-context bar
	   height (104px) and padding (14px top/bottom). See the
	   .alts-playbar--mothership notes — same constraints apply
	   here (this rule fires when the Mothership panel opens
	   over a single-gallery page). */
	--alts-playbar-h: 104px;
	height: 104px;
	min-height: 104px;
	/* v1.5.8.4 — backdrop-filter dropped, opacity bumped from 0.82
	   to 0.96. Cross-origin YouTube iframe pixels were leaking
	   through the bar via backdrop-filter sampling, causing the
	   live video to flicker behind the playbar. Near-opaque solid
	   surface = nothing to sample, no flicker. */
	background: rgba(12, 12, 14, 0.96);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	/* v2.16.29 — box-shadow blur 40px → 16px. A 40px blur on a
	   fixed element forces Safari to repaint the full 40px shadow
	   band whenever any pixel underneath changes (every scroll
	   tick). The visible flicker "halfway down the bar" was that
	   shadow blinking as the compositor fell behind. 16px reads
	   as the same dark lift at a fraction of the cost. translateZ
	   locks the playbar's compositor layer so Safari doesn't evict
	   it mid-scroll (which was making the controls disappear). */
	box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.55);
	transform: translateZ(0) !important;
	will-change: transform;
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__inner {
	padding: 14px 48px;
	align-items: center;
}
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__flavor,
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__right {
	align-self: center;
	align-items: center;
	padding-bottom: 0;
}
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__center {
	width: auto;
	max-width: none;
	justify-self: stretch;
	align-self: center;
	flex: 1 1 auto;
	justify-content: center;
	gap: 6px;
	padding: 0;
}
/* v1.5.1: Mothership-open mode caps the scrubber at 50% of its column
   so it doesn't stretch absurdly wide on big displays. The CENTER
   column still stretches (it holds scrubber + transport), but the
   scrubber inside is margin-auto centered at half width. */
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__scrubber {
	width: 50%;
	margin: 0 auto;
}
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__btn i,
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__flavor-label-icon i,
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__flavor-label-text,
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__flavor-pill,
html body.alts-guide-open .alts-playbar--single-gallery .alts-playbar__time {
	filter: none;
	text-shadow: none;
}

/* ============================================================================
   CONTEXT: MOTHERSHIP (solid glass, flush-to-panel, always visible)
   ---------------------------------------------------------------------------- */

.alts-playbar--mothership {
	/* v1.5.8.1 → v1.5.8.3 — Bumped to 104px (from 96px). With
	   box-sizing: border-box on inner (see base rule), the 14px top +
	   14px bottom padding is subtracted from this height, leaving 76px
	   of content area. The 60px center cluster (38 transport + 6 gap +
	   16 scrubber) sits centered with 8px above and 8px below — breathing
	   room on both sides instead of the previous 4px which was too tight
	   and made the bottoms of the volume slider / scrubber handle look
	   crammed against the bar's bottom edge. The 14px top/bottom padding
	   continues to mirror the panel header's 14px vertical padding so
	   the playbar reads as the header's "twin" at the bottom edge. */
	--alts-playbar-h: 104px;
	height: 104px;
	min-height: 104px;
	/* v1.5.8.4 / v2.16.29 — see twin rule above. Solid 0.96 instead
	   of 0.82 + backdrop-filter, smaller box-shadow blur, and a
	   translateZ-locked compositor layer to stop Safari evicting
	   the playbar mid-scroll. */
	background: rgba(12, 12, 14, 0.96);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.55);
	transform: translateZ(0);
	will-change: transform;
}
/* v1.5.8.4 — Previous @supports block applied
       backdrop-filter: blur(22px) saturate(1.3)
   to .alts-playbar--mothership when the browser supported it.
   That filter was sampling cross-origin iframe pixels + the
   static-poster layer below the bar, causing per-frame re-blurs
   and visible flicker. The near-opaque 0.96 background above
   already gives the dark-glass read; the @supports block is
   intentionally gone, not commented out, so a future read of the
   file doesn't re-add it. */

/* Mothership inner: align flavor-cluster left to the AltSounds logo 
   (48px from viewport) and right cluster to the stage container 
   right edge (48px from viewport right). The Mothership shell itself 
   has 16px inset + ~32px inner padding, totaling 48px.
   
   v1.5.8.1 — align-items: center so all 3 clusters share a vertical
   centerline. Without this they'd still inherit 'stretch' from the
   grid base + their own flex-end alignment, producing the staggered
   look where each cluster sat on a different vertical line.
   
   v1.5.8.2 — top/bottom padding 14px to mirror the Mothership panel
   header's vertical padding. Visually, the playbar is "mirror twin"
   of the header — same edge insets, same internal breathing room. */
.alts-playbar--mothership .alts-playbar__inner {
	padding: 14px 48px;
	max-width: none;
	align-items: center;
}
/* Mothership-specific cluster alignment: every cluster centers
   vertically. The center column drops its space-between-driven
   transport/scrubber split in favor of a centered transport row
   with the scrubber tucked just beneath it — much less cramped. */
.alts-playbar--mothership .alts-playbar__flavor {
	align-self: center;
	align-items: center;
	padding-bottom: 0;
}
.alts-playbar--mothership .alts-playbar__right {
	align-self: center;
	align-items: center;
	padding-bottom: 0;
}
/* Mothership center column takes its grid cell, but the scrubber/transport
   cluster inside is CAPPED at 50% so it doesn't stretch absurdly wide on
   large displays. Cluster stays horizontally centered within the cell. */
.alts-playbar--mothership .alts-playbar__center {
	width: auto;
	max-width: none;
	justify-self: stretch;
	align-self: center;
	flex: 1 1 auto;
	/* v1.5.8.1 — center the transport+scrubber stack instead of
	   space-between (which forced transport to the top edge of the
	   bar and scrubber to the bottom). Now they sit together
	   vertically centered with a small gap. */
	justify-content: center;
	gap: 6px;
	padding: 0;
}
.alts-playbar--mothership .alts-playbar__scrubber {
	width: 50%;
	margin: 0 auto;
}

/* Mothership playbar is ALWAYS visible — never fades with cinema timer,
   never fades on idle. Defensive against any external ui-hidden / 
   cursor-hidden rules that might target the bar. */
.alts-playbar--mothership,
body.ui-hidden .alts-playbar--mothership,
body.as-cursor-hidden .alts-playbar--mothership {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* Mothership panel + backdrop sit FLUSH on top of the playbar (no gap).
   When the playbar is present we:
     1. lift the panel/backdrop bottom to sit on top of the playbar
     2. square the bottom corners so the join is seamless (otherwise the
        backdrop's 20px radius would leave V-shaped gaps at the corners) */
body.has-alts-playbar .alts-guide__backdrop,
body.has-alts-playbar .alts-guide__panel {
	bottom: var(--alts-playbar-h, 72px);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
body.has-alts-playbar .alts-guide__backdrop {
	/* Drop the bottom portion of the drop-shadow since the bar is
	   covering it anyway — avoids a shadow smudge on top of the bar. */
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================================
   INNER LAYOUT
   ---------------------------------------------------------------------------- */

.alts-playbar__inner {
	height: 100%;
	max-width: 1720px;
	margin: 0 auto;
	padding: 0 16px;
	/* v1.5.8.3 — border-box so when the Mothership context applies
	   padding: 14px 48px, the 14px top + 14px bottom are subtracted
	   from the playbar's height instead of added to it. Without this,
	   the inner overflowed below the playbar by 28px and the clusters
	   weren't actually visually centered (they just sat lower than
	   they should have). */
	box-sizing: border-box;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: stretch;
	gap: 24px;
}

/* ============================================================================
   LEFT — FLAVOR PILLS + LABEL
   ---------------------------------------------------------------------------- */

.alts-playbar__flavor {
	display: flex;
	align-items: flex-end;               /* sit on scrubber baseline */
	align-self: stretch;
	padding-bottom: 4px;
	gap: 10px;
	min-width: 0;
	/* Smooth fade in/out when the page's "applies" state changes
	   (e.g. user toggles artist station on a genre page). The cluster
	   stays in layout but goes transparent + non-interactive. */
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity   var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		transform var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1));
}
.alts-playbar__flavor.is-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
}
.alts-playbar__flavor[hidden] { display: none; }

.alts-playbar__flavor-label {
	color: rgba(255, 255, 255, 0.75);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1;
}
.alts-playbar__flavor-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--alts-color-accent, #bfff00);   /* lime chili */
	line-height: 1;
}
.alts-playbar__flavor-label-icon i {
	font-size: 13px;
	line-height: 1;
}
.alts-playbar__flavor-label-text {
	line-height: 1;
}

.alts-playbar__flavor-pills {
	display: flex;
	gap: 2px;
	align-items: center;
}

.alts-playbar__flavor-pill {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 1px solid transparent;
	color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	padding: 6px 12px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 999px;
	line-height: 1;
	transition:
		color        var(--alts-trans-fast, 160ms) ease,
		background   var(--alts-trans-fast, 160ms) ease,
		border-color var(--alts-trans-fast, 160ms) ease,
		transform    var(--alts-trans-fast, 160ms) ease;
	position: relative;
	white-space: nowrap;
}
.alts-playbar__flavor-pill:hover:not([disabled]),
.alts-playbar__flavor-pill:focus-visible:not([disabled]) {
	color: #fff;
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.22);
	outline: none;
}
.alts-playbar__flavor-pill:active:not([disabled]) {
	transform: scale(0.96);
}
.alts-playbar__flavor-pill:focus-visible {
	outline: 2px solid var(--alts-color-accent, #bfff00);
	outline-offset: 2px;
}
.alts-playbar__flavor-pill[aria-pressed="true"] {
	color: #0b0b10;
	background: var(--alts-color-accent, #bfff00);
	border-color: var(--alts-color-accent, #bfff00);
}
.alts-playbar__flavor-pill[aria-pressed="true"]:hover,
.alts-playbar__flavor-pill[aria-pressed="true"]:focus-visible {
	color: #0b0b10;
	background: var(--alts-color-accent, #bfff00);
	filter: brightness(1.06);
}
.alts-playbar__flavor-pill[disabled],
.alts-playbar__flavor-pill[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
}

/* Busy state on flavor group (scope fetch in flight) */
.alts-playbar__flavor[data-busy="1"] .alts-playbar__flavor-pill {
	pointer-events: none;
}
.alts-playbar__flavor[data-busy="1"] .alts-playbar__flavor-pill[aria-pressed="true"]::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 50%;
	border: 1.5px solid rgba(0, 0, 0, 0.35);
	border-top-color: transparent;
	animation: alts-playbar-spin 0.7s linear infinite;
}
@keyframes alts-playbar-spin {
	to { transform: rotate(360deg); }
}

/* ============================================================================
   CENTER — transport row (top) + scrubber row (bottom, aligned w/ volume)
   ---------------------------------------------------------------------------- */

.alts-playbar__center {
	display: flex;
	flex-direction: column;              /* icons on top, scrubber below */
	align-items: stretch;
	justify-content: space-between;      /* push icons up, scrubber down */
	align-self: stretch;
	padding: 6px 0 4px;
	gap: 4px;
	min-width: 0;
}

.alts-playbar__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* ============================================================================
   BUTTONS — shared
   ---------------------------------------------------------------------------- */

.alts-playbar__btn {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255, 255, 255, 0.88);
	cursor: pointer;
	padding: 8px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* v1.5.8.2 — Fixed square hit-target so border-radius:999px paints
	   a circle, not an oval. FA glyph widths vary (the skip-forward
	   step icon is wider than the play triangle, etc.), and with
	   `padding: 8px` on an inline-flex box, that intrinsic icon width
	   leaked into the button width — buttons came out 36px wide × 32px
	   tall and the hover halo read as an ellipse. The fixed 34×34
	   target lands the icon centered with consistent visual weight
	   across the whole transport row. */
	width: 34px;
	height: 34px;
	transition:
		color       var(--alts-trans-fast, 160ms) ease,
		background  var(--alts-trans-fast, 160ms) ease,
		transform   var(--alts-trans-fast, 160ms) ease;
	position: relative;
	flex: 0 0 auto;
	font-size: 16px;                   /* FA icon size inside */
	line-height: 1;
}
.alts-playbar__btn i {
	font-size: inherit;
	line-height: 1;
	display: inline-block;
}
.alts-playbar__btn:hover:not([disabled]),
.alts-playbar__btn:focus-visible:not([disabled]) {
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
}
.alts-playbar__btn:active:not([disabled]) {
	transform: scale(0.92);
}
.alts-playbar__btn:focus-visible {
	outline: 2px solid var(--alts-color-accent, #bfff00);
	outline-offset: 2px;
}
.alts-playbar__btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Primary (play/pause) — white circle. Hover = accent green with black icon. */
.alts-playbar__btn.is-primary {
	color: #0b0b10;
	background: #fff;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0 4px;
	font-size: 15px;
}
.alts-playbar__btn.is-primary:hover:not([disabled]) {
	background: var(--alts-color-accent, #bfff00);
	color: #000;
	transform: scale(1.06);
}
.alts-playbar__btn.is-primary:active:not([disabled]) {
	transform: scale(0.96);
}

/* Play/pause icon swap */
.alts-playbar__icon-pause { display: none; }
.alts-playbar.is-playing .alts-playbar__btn--play .alts-playbar__icon-play  { display: none; }
.alts-playbar.is-playing .alts-playbar__btn--play .alts-playbar__icon-pause { display: inline-flex; }

/* Active state for shuffle/repeat (future — shuffle is now an action, not
   a toggle; this rule is harmless no-op until a toggle returns). */
.alts-playbar__btn[aria-pressed="true"]:not(.is-primary) {
	color: var(--alts-color-accent, #bfff00);
}

/* v1.5.8.2 — Info button: when modal is open, give it an accent pill so
   the user has a clear "yes, that opened" affordance. The icon was
   already green via the base aria-pressed rule above; this adds a
   subtle accent-tinted background ring matching the way flavor pills
   indicate their pressed state.
   v3 (April 2026) — Repeat button is now a simple 2-state on/off toggle.
   When 'on' (data-mode="all" / aria-pressed="true") the same active-pill
   treatment as Info applies. When 'off' both attributes go away and the
   rule no longer matches → pill disappears. The legacy 'one' mode CSS
   (with the "1" badge) was removed when the mode itself was retired. */
/* v1.6.23 — Pressed-state visuals bumped to a full accent fill +
   black icon, matching the canonical .alts-action-circle--play
   recipe used everywhere else on the site for active states. The
   prior subtle tint read in single-gallery (where the playbar is
   floating + transparent) but not on Mothership context where the
   playbar bg is already dark and a low-alpha lime fill blended
   into nothing. Solid lime is unambiguous on every background. */
/* v1.7.10 (2026-05-22) — !important on the active-state visuals.
   repeat-click diag confirmed aria-pressed="true" IS being
   written to the live button on first click (liveAttr: 'true',
   sameNode: true).  Yet the button doesn't paint green until a
   second click.  That means another rule with higher specificity
   or with !important is winning the cascade.  Brute-force this
   rule to !important so it can't lose. */
.alts-playbar__btn--info[aria-pressed="true"],
.alts-playbar__btn--repeat[aria-pressed="true"] {
	background: var(--alts-color-accent, #BFFF00) !important;
	box-shadow: 0 2px 8px rgba(191, 255, 0, 0.35) !important;
	color: #0a0a0a !important;
}
.alts-playbar__btn--info[aria-pressed="true"] i,
.alts-playbar__btn--repeat[aria-pressed="true"] i {
	color: #0a0a0a !important;
	
	text-shadow: none !important;
	filter: none !important;
}
/* v1.7.13 — Universal: ANY aria-pressed="true" playbar button drops
   icon shadow / filter so the active state always reads clean.
   Existing rule at line ~236 zeros the filter on single-gallery
   chrome only; this extends to every context. */
.alts-playbar__btn[aria-pressed="true"] i,
.alts-playbar__btn.is-repeat-on i {
	text-shadow: none !important;
	filter: none !important;
}

/* v1.7.14 — Class-based active state mirroring the aria-pressed
   rule.  Set by cycleRepeatTo via classList.toggle('is-repeat-on').
   Belt-and-suspenders: if anything in the cascade beats the
   [aria-pressed="true"] selector, the class selector still wins. */
.alts-playbar__btn--repeat.is-repeat-on {
	background: var(--alts-color-accent, #BFFF00) !important;
	box-shadow: 0 2px 8px rgba(191, 255, 0, 0.35) !important;
	color: #0a0a0a !important;
}
.alts-playbar__btn--repeat.is-repeat-on i {
	color: #0a0a0a !important;
}
.alts-playbar__btn--repeat.is-repeat-on:hover {
	background: var(--alts-color-accent, #BFFF00) !important;
	box-shadow: 0 4px 12px rgba(191, 255, 0, 0.5) !important;
	color: #0a0a0a !important;
}
/* v1.6.23 — Hover-over-pressed keeps the solid lime fill so the
   button doesn't flicker between treatments mid-click. Slight
   scale + brighter shadow communicates the affordance.
   v1.7.10 — also !important per above. */
.alts-playbar__btn--info[aria-pressed="true"]:hover,
.alts-playbar__btn--repeat[aria-pressed="true"]:hover {
	background: var(--alts-color-accent, #BFFF00) !important;
	box-shadow: 0 4px 12px rgba(191, 255, 0, 0.5) !important;
	color: #0a0a0a !important;
}

/* Button busy/loading indicator. Used for prev/next/shuffle while the
   navigation is resolving. Spinner ring overlays the glyph. JS sets
   data-busy="1" on click, clears on navigation or after safety timeout.
   v1.6.23 — Three changes so the loading state reads instantly:
   (1) data-busy forces opacity:1 + a visible accent-tinted background
       so the button doesn't visually disappear during the moment between
       click and first spinner paint;
   (2) spinner ring made larger + higher-contrast border so it pops
       against any playbar bg (single-gallery transparent, Mothership
       dark, etc);
   (3) spinner pseudo gets z-index above the hidden icon so it can't
       be visually buried.
   Pre-v1.6.21 the button disappearing was "goes black" — that
   was the `[disabled] { opacity: 0.35 }` rule dimming the whole button
   while the icon was hidden via the rule below. Forcing opacity:1 +
   the bg fill keeps the button present at all times. */
.alts-playbar__btn[data-busy="1"] {
	pointer-events: none;
	opacity: 1;
	background: rgba(191, 255, 0, 0.16);
	box-shadow: inset 0 0 0 1px rgba(191, 255, 0, 0.35);
}
.alts-playbar__btn[data-busy="1"] i {
	/* v1.5.8.3 — fully hide the icon so only the spinner ring shows.
	   0.25 opacity left a faint glyph behind the spinner that read as
	   "broken" rather than "loading." */
	opacity: 0;
}
.alts-playbar__btn[data-busy="1"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: var(--alts-color-accent, #bfff00);
	animation: alts-playbar-spin 0.7s linear infinite;
	z-index: 2;
}

/* Repeat button is currently disabled (waiting for Phase 2 unified NP
   widget to own the next-track decision). Mark visually. */
.alts-playbar__btn--repeat[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* ============================================================================
   SCRUBBER — accent-green fill (always)
   ---------------------------------------------------------------------------- */

.alts-playbar__scrubber {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: rgba(255, 255, 255, 0.65);
}
.alts-playbar__time {
	font-family: var(--alts-font-mono, "IBM Plex Mono", ui-monospace, monospace);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	min-width: 36px;
	text-align: center;
	flex: 0 0 auto;
	color: rgba(255, 255, 255, 0.75);
}
.alts-playbar__time--elapsed { text-align: right; }
.alts-playbar__time--total   { text-align: left;  }

.alts-playbar__track {
	position: relative;
	flex: 1 1 auto;
	height: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	outline: none;
}
.alts-playbar__track-bg {
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.20);
	border-radius: 2px;
	transition: height var(--alts-trans-fast, 160ms) ease;
}
.alts-playbar__track-buffered {
	position: absolute;
	left: 0;
	height: 4px;
	width: 0%;
	background: rgba(255, 255, 255, 0.32);
	border-radius: 2px;
	transition: width 300ms linear;
}
.alts-playbar__track-fill {
	position: absolute;
	left: 0;
	height: 4px;
	width: 100%;
	background: var(--alts-color-accent, #bfff00);
	border-radius: 2px;
	transform-origin: left center;
	transform: scaleX(0);
}
@media (prefers-reduced-motion: reduce) {
	.alts-playbar__track-fill { transition: none; }
}
.alts-playbar__track-handle {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	background: var(--alts-color-accent, #bfff00);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--alts-trans-fast, 160ms) ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
	pointer-events: none;
	left: 0%;
}

.alts-playbar__track:hover .alts-playbar__track-bg,
.alts-playbar__track:focus-visible .alts-playbar__track-bg,
.alts-playbar__track.is-scrubbing .alts-playbar__track-bg {
	height: 6px;
}
.alts-playbar__track:hover .alts-playbar__track-fill,
.alts-playbar__track:focus-visible .alts-playbar__track-fill,
.alts-playbar__track.is-scrubbing .alts-playbar__track-fill {
	height: 6px;
}
.alts-playbar__track:hover .alts-playbar__track-buffered,
.alts-playbar__track:focus-visible .alts-playbar__track-buffered,
.alts-playbar__track.is-scrubbing .alts-playbar__track-buffered {
	height: 6px;
}
.alts-playbar__track:hover .alts-playbar__track-handle,
.alts-playbar__track:focus-visible .alts-playbar__track-handle,
.alts-playbar__track.is-scrubbing .alts-playbar__track-handle {
	transform: translate(-50%, -50%) scale(1);
}

.alts-playbar__scrubber:hover .alts-playbar__time,
.alts-playbar__track.is-scrubbing ~ .alts-playbar__time {
	color: #fff;
}

/* ============================================================================
   RIGHT — top row: PiP, fullscreen  |  bottom row: volume (aligned w/ scrubber)
   ---------------------------------------------------------------------------- */

.alts-playbar__right {
	display: flex;
	flex-direction: row;
	align-items: flex-end;           /* sit on scrubber baseline */
	align-self: stretch;
	padding-bottom: 4px;
	justify-content: flex-end;
	gap: 6px;
}
/* Legacy row-split containers — unused by current PHP, kept for backwards compat */
.alts-playbar__right-top {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
}
.alts-playbar__right-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 16px;
}

.alts-playbar__volume {
	display: flex;
	align-items: center;
	gap: 6px;
}
.alts-playbar__vol-track {
	position: relative;
	width: 96px;
	height: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	outline: none;
}
.alts-playbar__vol-bg {
	position: absolute;
	left: 0; right: 0;
	height: 4px;
	background: rgba(255, 255, 255, 0.20);
	border-radius: 2px;
}
.alts-playbar__vol-fill {
	position: absolute;
	left: 0;
	height: 4px;
	width: 80%;
	background: var(--alts-color-accent, #bfff00);
	border-radius: 2px;
}
.alts-playbar__vol-handle {
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	background: var(--alts-color-accent, #bfff00);
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0);
	transition: transform var(--alts-trans-fast, 160ms) ease;
	pointer-events: none;
	left: 80%;
}
.alts-playbar__vol-track:hover .alts-playbar__vol-handle,
.alts-playbar__vol-track:focus-visible .alts-playbar__vol-handle,
.alts-playbar__vol-track.is-dragging .alts-playbar__vol-handle {
	transform: translate(-50%, -50%) scale(1);
}

/* Volume icon swap */
.alts-playbar__icon-vol-mid,
.alts-playbar__icon-vol-low,
.alts-playbar__icon-vol-mute { display: none; }
.alts-playbar__btn--mute[data-level="high"] .alts-playbar__icon-vol-high { display: inline-flex; }
.alts-playbar__btn--mute[data-level="high"] .alts-playbar__icon-vol-mid,
.alts-playbar__btn--mute[data-level="high"] .alts-playbar__icon-vol-low,
.alts-playbar__btn--mute[data-level="high"] .alts-playbar__icon-vol-mute { display: none; }

.alts-playbar__btn--mute[data-level="mid"]  .alts-playbar__icon-vol-high,
.alts-playbar__btn--mute[data-level="mid"]  .alts-playbar__icon-vol-low,
.alts-playbar__btn--mute[data-level="mid"]  .alts-playbar__icon-vol-mute { display: none; }
.alts-playbar__btn--mute[data-level="mid"]  .alts-playbar__icon-vol-mid { display: inline-flex; }

.alts-playbar__btn--mute[data-level="low"]  .alts-playbar__icon-vol-high,
.alts-playbar__btn--mute[data-level="low"]  .alts-playbar__icon-vol-mid,
.alts-playbar__btn--mute[data-level="low"]  .alts-playbar__icon-vol-mute { display: none; }
.alts-playbar__btn--mute[data-level="low"]  .alts-playbar__icon-vol-low { display: inline-flex; }

.alts-playbar__btn--mute[data-level="mute"] .alts-playbar__icon-vol-high,
.alts-playbar__btn--mute[data-level="mute"] .alts-playbar__icon-vol-mid,
.alts-playbar__btn--mute[data-level="mute"] .alts-playbar__icon-vol-low { display: none; }
.alts-playbar__btn--mute[data-level="mute"] .alts-playbar__icon-vol-mute { display: inline-flex; }

.alts-playbar__icon-fs-exit { display: none; }
.alts-playbar__btn--fs[aria-pressed="true"] .alts-playbar__icon-fs-enter { display: none; }
.alts-playbar__btn--fs[aria-pressed="true"] .alts-playbar__icon-fs-exit  { display: inline-flex; }

/* ============================================================================
   PIP — PARKED (v1.5.14.17). Feature is hidden from the UI but all PHP, JS,
   and CSS below remain intact so we can un-park by deleting just these two
   rules. The keyboard "P" shortcut still toggles state internally but the
   floating element stays display:none so nothing is visible.
   ---------------------------------------------------------------------------- */
.alts-playbar__btn--pip { display: none !important; }
.alts-pip               { display: none !important; }

/* ============================================================================
   PIP FLOATING MINI-PLAYER — unchanged from v1.3
   ---------------------------------------------------------------------------- */

.alts-pip {
	position: fixed;
	z-index: 9500;
	width: 320px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--alts-radius-md, 10px);
	overflow: hidden;
	box-shadow: 0 18px 60px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
	bottom: calc(var(--alts-playbar-h, 72px) + 16px);
	right: 16px;
	display: grid;
	grid-template-rows: 1fr auto;
	user-select: none;
	transform: scale(0.9);
	opacity: 0;
	transition:
		transform var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		opacity   var(--alts-trans-med, 260ms) var(--alts-ease, cubic-bezier(.4,0,.2,1)),
		box-shadow var(--alts-trans-fast, 160ms) ease;
	/* CLICK-EATING FIX (April 2026):
	   The PIP element has `display: grid`, which overrides the [hidden]
	   attribute's default `display: none`. So even when the PIP is
	   "hidden" (opacity 0, transform scale 0.9), it still has a
	   320×180 hit area at z-index 9500 — sitting in the bottom-right
	   corner of the viewport. That hit area:
	     (a) ate clicks meant for the NP corner widget's × button when
	         the widget was positioned in the same region, and
	     (b) showed a phantom fullscreen icon on hover-over of up-next
	         rows because the invisible PIP was catching the hover.
	   The fix: pointer-events: none in the base rule (no hits when
	   hidden), then pointer-events: auto in the :not([hidden])
	   selector below to restore interactivity when the PIP is shown
	   for real. */
	pointer-events: none;
}
.alts-pip:not([hidden]) {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
.alts-pip.is-dragging {
	cursor: grabbing;
	box-shadow: 0 28px 80px rgba(0,0,0,0.75), 0 4px 12px rgba(0,0,0,0.5);
	transition: box-shadow var(--alts-trans-fast, 160ms) ease;
}
.alts-pip__drag-handle {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 28px;
	cursor: grab;
	z-index: 2;
}
.alts-pip:hover .alts-pip__drag-handle {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
}
.alts-pip__frame { position: relative; overflow: hidden; }
.alts-pip__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.alts-pip__bar {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	gap: 6px;
	background: rgba(0,0,0,0.85);
}
.alts-pip__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px;
	color: rgba(255,255,255,0.85);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: var(--alts-font-sans, Inter, system-ui, sans-serif);
}
.alts-pip__ctrls { display: flex; gap: 2px; flex: 0 0 auto; }
.alts-pip__btn {
	appearance: none;
	background: transparent;
	border: 0;
	color: rgba(255,255,255,0.7);
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color var(--alts-trans-fast, 160ms) ease, background var(--alts-trans-fast, 160ms) ease;
}
.alts-pip__btn:hover, .alts-pip__btn:focus-visible {
	color: #fff; background: rgba(255,255,255,0.08); outline: none;
}
.alts-pip__btn--close:hover {
	background: rgba(255, 60, 60, 0.25);
	color: #ff9a9a;
}

/* ============================================================================
   RESPONSIVE
   ---------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.alts-playbar__inner { gap: 16px; }
	.alts-playbar__volume .alts-playbar__vol-track { width: 72px; }
}

@media (max-width: 860px) {
	.alts-playbar__inner {
		gap: 10px;
		padding: 0 10px;
	}
	.alts-playbar--single-gallery .alts-playbar__inner {
		padding-left: 10px;
		padding-right: 10px;
	}
	.alts-playbar__flavor-label-text { display: none; }
	.alts-playbar__flavor-pill { padding: 5px 9px; font-size: 10px; }
}

@media (max-width: 640px) {
	.alts-playbar { height: 62px; --alts-playbar-h: 62px; }
	.alts-playbar__inner {
		grid-template-columns: 1fr auto;
		gap: 6px;
	}
	.alts-playbar__flavor,
	.alts-playbar__btn--shuffle,
	.alts-playbar__btn--repeat,
	.alts-playbar__btn--prev,
	.alts-playbar__btn--next,
	.alts-playbar__volume,
	.alts-playbar__btn--fs {
		display: none;
	}
	.alts-playbar__center { display: contents; }
	.alts-playbar__controls { order: 2; gap: 2px; }
	.alts-playbar__scrubber {
		order: 1;
		position: absolute;
		top: 0; left: 0; right: 0;
		max-width: none;
		gap: 0;
	}
	.alts-playbar__scrubber .alts-playbar__time { display: none; }
	.alts-playbar__scrubber .alts-playbar__track { height: 4px; }
	.alts-playbar__scrubber .alts-playbar__track-bg,
	.alts-playbar__scrubber .alts-playbar__track-fill,
	.alts-playbar__scrubber .alts-playbar__track-buffered {
		height: 3px;
	}
	.alts-playbar__scrubber .alts-playbar__track-handle { display: none; }
	.alts-pip { width: 240px; }
}

/* ============================================================================
   BODY PADDING RESERVATION
   ---------------------------------------------------------------------------- */

/* Only Mothership context reserves space. Single-gallery hovers. */
body.has-alts-playbar.has-alts-playbar--mothership {
	padding-bottom: calc(var(--alts-playbar-h, 72px) + env(safe-area-inset-bottom));
}

/* v1.5.8 — Info button visibility. The info button opens the single-
   gallery info modal. Hide it in Mothership context (no modal target)
   AND whenever the Mothership panel is open over the video (Mothership
   IS the info surface in that state — showing both would be redundant
   and visually noisy). */
/* v1.5.8 — Info button is a single-gallery construct: opens the single-
   gallery info modal. Hide it in Mothership context (no modal target)
   AND whenever the Mothership panel is open over the video (Mothership
   IS the info surface in that state — showing both would be redundant
   and visually noisy).

   v1.5.8.5 — Same treatment for the new Mothership-opener button: it's
   redundant inside the Mothership context (you're already there), and
   would compete with the panel's own close affordance when the panel
   is open. */
.alts-playbar--mothership .alts-playbar__btn--info,
.alts-playbar--mothership .alts-playbar__btn--mship,
body.alts-guide-open .alts-playbar__btn--info,
body.alts-guide-open .alts-playbar__btn--mship {
	display: none !important;
}

/* v1.5.9.4 — Defensive interactivity guarantee for the playbar UFO.
   The button was reported as non-functional in production. Static
   analysis didn't find a smoking gun, but as belt-and-braces hardening
   we explicitly assert pointer-events: auto and a slight z-index lift
   so nothing in this stacking context can swallow the click. The
   playbar root sits at z-index 9400 (far above the #as-mousemove-catcher
   at z:5), but if any future overlay lands inside the playbar's tree
   without explicit z-index management, this rule keeps the UFO above
   it. The `position: relative` is required for z-index to take effect. */
.alts-playbar__btn--mship {
	position: relative;
	z-index: 1;
	pointer-events: auto !important;
	cursor: pointer;
}

body.alts-fs-active {
	padding-bottom: 0 !important;
}

/* v1.5.14.4 — Fullscreen toggle button highlights when fullscreen is
   active. aria-pressed=true is already wired by onFsChange in
   altsounds-playbar.js. Visual: solid accent-green chip + dark icon,
   matching the lit-button language used by repeat / mute / station
   when active. Makes the fullscreen state obvious at a glance.

   Selector class is --fs (set in class-playbar.php line 326). The
   pre-existing rules at line 1017-1018 only swap the enter/exit
   icon glyphs; we add the fill + colour here. */
.alts-playbar__btn.alts-playbar__btn--fs[aria-pressed="true"] {
	background: var(--alts-color-accent, #BFFF00) !important;
	border-color: var(--alts-color-accent, #BFFF00) !important;
	color: var(--alts-color-bg, #0a0b0a) !important;
}
.alts-playbar__btn.alts-playbar__btn--fs[aria-pressed="true"] i,
.alts-playbar__btn.alts-playbar__btn--fs[aria-pressed="true"] svg,
.alts-playbar__btn.alts-playbar__btn--fs[aria-pressed="true"] .alts-playbar__icon-fs-exit {
	color: var(--alts-color-bg, #0a0b0a) !important;
	fill: var(--alts-color-bg, #0a0b0a) !important;
}

/* ============================================================================
   REDUCED MOTION
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.alts-playbar,
	.alts-pip,
	.alts-playbar__btn {
		transition: none !important;
	}
	.alts-playbar__btn.is-primary:hover:not([disabled]) {
		transform: none;
	}
}