/* ==========================================================================
   Player v2 — opt-in redesign for the legacy course/Q&A lesson players.
   Loaded only when the page is requested with ?player=v2.

   Every rule is scoped under `.audio-player-sticky-custom.pv2` so it outranks
   the ~1000 lines of inline <style> duplicated into each of the 542 custom
   player views (those selectors are single-class, this is two). Nothing here
   edits those files; the markup is restyled in place.
   ========================================================================== */

/* Sticky offset measured from the live header by player-v2.js (see
   alignToHeader). Three classes + !important so it outranks the hardcoded
   `top` guesses in audio-player.css and pwa-safe-area.css, including the
   `body.is-pwa-standalone` ones. Only applied once a fixed header is found. */
.audio-player-sticky-custom.pv2.pv2-aligned {
  top: var(--pv2-top) !important;
}

/* ---------- shell ---------- */
.audio-player-sticky-custom.pv2 {
  background: var(--thf-bg) !important;
  padding: 8px 10px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: padding .2s ease;
}

.audio-player-sticky-custom.pv2 .audio-player-content-custom {
  background: none !important;
  padding: 0 !important;
  max-width: none !important;
}

.audio-player-sticky-custom.pv2 .pv2-card {
  position: relative;
  overflow: hidden;
  background: var(--thf-surface);
  border: 1px solid var(--thf-border);
  border-radius: 14px;
  padding: 9px 11px 10px;
  transition: padding .2s ease, border-radius .2s ease;
}

/* ---------- title row ---------- */
.audio-player-sticky-custom.pv2 .pv2-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 8px;
  max-height: 30px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .2s ease, opacity .14s ease, margin-bottom .2s ease;
}

.audio-player-sticky-custom.pv2 .player-title-custom {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--thf-heading) !important;
  background: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- control row ---------- */
.audio-player-sticky-custom.pv2 .controls-row-custom {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  overflow: visible !important;
}

/* native bar is replaced by the custom scrubber below */
/* The native <audio> is hidden in favour of the custom transport, but it sits
   in an inline-block wrapper, so this block still reserved a full empty line
   box — a 41px white band under the player on phones. Collapse it without
   display:none, which would take the media element out of the render tree. */
.audio-player-sticky-custom.pv2 .audio-player-custom {
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.audio-player-sticky-custom.pv2 audio#audioPlayerCustom,
.audio-player-sticky-custom.pv2 audio#audioPlayer {
  display: none !important;
}

/* the three legacy speed affordances are superseded by the drawer */
.audio-player-sticky-custom.pv2 .speed-cycle-btn,
.audio-player-sticky-custom.pv2 .speed-controls-custom,
.audio-player-sticky-custom.pv2 .speed-dropdown-mobile {
  display: none !important;
}

/* ---------- buttons ---------- */
.audio-player-sticky-custom.pv2 .player-btn-custom,
.audio-player-sticky-custom.pv2 .mobile-menu-btn,
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct,
.audio-player-sticky-custom.pv2 .font-size-btn,
.audio-player-sticky-custom.pv2 .fullscreen-btn,
.audio-player-sticky-custom.pv2 .width-toggle-btn,
.audio-player-sticky-custom.pv2 .mobile-nav-btn,
.audio-player-sticky-custom.pv2 .pv2-btn {
  height: 34px;
  min-width: 34px;
  padding: 0 10px !important;
  border-radius: 9px !important;
  border: 1px solid var(--thf-border) !important;
  background: transparent !important;
  color: var(--thf-text-2) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  font-family: inherit;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* `display` is deliberately NOT set on .mobile-menu-btn / .mobile-nav-btn:
   the legacy stylesheet hides those at desktop widths and this file is more
   specific, so forcing a display here would resurrect mobile-only buttons. */
.audio-player-sticky-custom.pv2 .player-btn-custom,
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct,
.audio-player-sticky-custom.pv2 .font-size-btn,
.audio-player-sticky-custom.pv2 .fullscreen-btn,
.audio-player-sticky-custom.pv2 .width-toggle-btn,
.audio-player-sticky-custom.pv2 .pv2-btn {
  display: inline-flex;
}

/* The minimise toggle is a secondary control — quiet beside the transport.
   Legacy CSS gives fullscreen order:90 and playlist order:100, so it needs an
   order of its own to stay at the end of the row rather than landing among
   them. */
.audio-player-sticky-custom.pv2 .pv2-mini {
  min-width: 30px;
  padding: 0 7px !important;
  opacity: .7;
  order: 200;
}
.audio-player-sticky-custom.pv2 .pv2-mini:hover { opacity: 1; }

/* The nav dropdown is a panel, not a control. Keep it out of the flex flow or
   it eats the row and squeezes the scrubber to nothing. */
.audio-player-sticky-custom.pv2 #playerNavDropdown {
  position: absolute;
}

.audio-player-sticky-custom.pv2 .player-btn-custom:hover,
.audio-player-sticky-custom.pv2 .mobile-menu-btn:hover,
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct:hover,
.audio-player-sticky-custom.pv2 .font-size-btn:hover,
.audio-player-sticky-custom.pv2 .fullscreen-btn:hover,
.audio-player-sticky-custom.pv2 .width-toggle-btn:hover,
.audio-player-sticky-custom.pv2 .mobile-nav-btn:hover,
.audio-player-sticky-custom.pv2 .pv2-btn:hover {
  background: var(--thf-surface-2) !important;
  color: var(--thf-text) !important;
  border-color: var(--thf-border-strong) !important;
}

.audio-player-sticky-custom.pv2 .fullscreen-btn.active,
.audio-player-sticky-custom.pv2 .width-toggle-btn.active {
  background: var(--thf-surface-3) !important;
  color: var(--thf-text) !important;
}

/* play/pause promoted to the one filled control */
.audio-player-sticky-custom.pv2 #playPauseBtnCustom {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--thf-accent) !important;
  color: #fff !important;
  transition: width .2s ease, height .2s ease, min-width .2s ease;
}
.audio-player-sticky-custom.pv2 #playPauseBtnCustom:hover {
  background: var(--thf-bronze-hover, var(--thf-accent)) !important;
  color: #fff !important;
}
.audio-player-sticky-custom.pv2 #playPauseBtnCustom span { display: none; }
.audio-player-sticky-custom.pv2 #playPauseBtnCustom i { font-size: 1rem; margin: 0; }

/* labels collapse to icons where the icon is unambiguous */
.audio-player-sticky-custom.pv2 #stopBtnCustom span,
.audio-player-sticky-custom.pv2 .mobile-nav-btn span { display: none; }

/* The A- / A+ pair is superseded by the single Aa drawer. Kept in the DOM
   (their globals are what the drawer drives) but never shown. */
.audio-player-sticky-custom.pv2 .font-size-controls { display: none !important; }

/* Legacy CSS hides this label on desktop and pins the button to a 40px square,
   so "Playlist" rendered outside its own button and read as an empty box. Let
   it size to its content — the scrubber beside it is flex and gives up the
   width. */
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct {
  width: auto !important;
  gap: 6px;
}
/* Legacy paints these white for a filled bronze pill; on the outline button
   that is white-on-white in light mode. Inherit the button's own colour so it
   tracks both themes. */
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct .playlist-text {
  display: inline !important;
  color: inherit !important;
}
.audio-player-sticky-custom.pv2 .add-to-playlist-btn-direct .playlist-icon {
  color: inherit !important;
}

.audio-player-sticky-custom.pv2 .fullscreen-controls {
  display: inline-flex !important;
  gap: 5px;
  flex: none;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* ---------- scrubber ---------- */
.audio-player-sticky-custom.pv2 .pv2-mid {
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.audio-player-sticky-custom.pv2 .pv2-seek {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.audio-player-sticky-custom.pv2 .pv2-track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 99px;
  background: var(--thf-surface-3);
  overflow: hidden;
}
.audio-player-sticky-custom.pv2 .pv2-buf {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--thf-border-strong);
  border-radius: 99px;
}
.audio-player-sticky-custom.pv2 .pv2-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--thf-accent);
  border-radius: 99px;
}
.audio-player-sticky-custom.pv2 .pv2-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--thf-accent);
  border: 2px solid var(--thf-surface);
  transform: translateY(-50%) scale(0);
  transition: transform .14s ease;
  pointer-events: none;
}
.audio-player-sticky-custom.pv2 .pv2-seek:hover .pv2-knob,
.audio-player-sticky-custom.pv2 .pv2-seek.dragging .pv2-knob { transform: translateY(-50%) scale(1); }

.audio-player-sticky-custom.pv2 .pv2-times {
  display: flex;
  justify-content: space-between;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--thf-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- messenger ---------- */
/* The redesign carries its own messenger button in both states — in the title
   row at rest, inline once condensed — so the legacy floating shortcut is a
   second one. It is absolutely positioned over the player's top-right corner,
   where it sat on top of the Playlist button. */
.audio-player-sticky-custom.pv2 .player-messenger-shortcut-wrapper {
  display: none !important;
}

.audio-player-sticky-custom.pv2 .pv2-msg {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--thf-border);
  background: var(--thf-surface-2);
  color: var(--thf-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.audio-player-sticky-custom.pv2 .pv2-msg:hover { color: var(--thf-text); border-color: var(--thf-border-strong); }
.audio-player-sticky-custom.pv2 .pv2-msg .pv2-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--thf-accent-2);
  color: #2f2d2c;
  font-size: .55rem;
  font-weight: 800;
  display: none;
  place-items: center;
  border: 2px solid var(--thf-surface);
}
.audio-player-sticky-custom.pv2 .pv2-msg.has-unread .pv2-badge { display: grid; }
/* the row copy only exists while condensed */
.audio-player-sticky-custom.pv2 .pv2-msg-inline { display: none; }

/* ---------- condensed title/time stack + edge progress ---------- */
.audio-player-sticky-custom.pv2 .pv2-stack {
  display: none;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}
.audio-player-sticky-custom.pv2 .pv2-s1 {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--thf-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-player-sticky-custom.pv2 .pv2-s2 {
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--thf-text-muted);
  font-variant-numeric: tabular-nums;
}
.audio-player-sticky-custom.pv2 .pv2-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--thf-surface-3);
  opacity: 0;
  transition: opacity .16s ease;
}
.audio-player-sticky-custom.pv2 .pv2-edge i { display: block; height: 100%; width: 0; background: var(--thf-accent); }

/* ---------- PINNED: full-bleed and flush under the header ---------- */
.audio-player-sticky-custom.pv2.pv2-stuck { padding: 0 !important; }
.audio-player-sticky-custom.pv2.pv2-stuck .pv2-card {
  padding: 7px 13px 9px;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: 0 3px 10px -6px var(--thf-shadow);
}

/* ---------- MINIMISED ----------
   A deliberate choice by the reader via the minimise button, not something
   that happens to them on scroll. Independent of pinning, so the pinned
   player stays full size unless they ask for the slim bar. */
.audio-player-sticky-custom.pv2.pv2-min .pv2-head { max-height: 0; opacity: 0; margin-bottom: 0; }
.audio-player-sticky-custom.pv2.pv2-min .pv2-mid { display: none; }
.audio-player-sticky-custom.pv2.pv2-min .pv2-stack { display: flex; }
.audio-player-sticky-custom.pv2.pv2-min .pv2-edge { opacity: 1; }
.audio-player-sticky-custom.pv2.pv2-min .controls-row-custom { gap: 7px !important; }
.audio-player-sticky-custom.pv2.pv2-min .pv2-msg-inline { display: grid; }
.audio-player-sticky-custom.pv2.pv2-min #playPauseBtnCustom {
  width: 34px; height: 34px; min-width: 34px;
}
.audio-player-sticky-custom.pv2.pv2-min .player-btn-custom,
.audio-player-sticky-custom.pv2.pv2-min .mobile-menu-btn,
.audio-player-sticky-custom.pv2.pv2-min .add-to-playlist-btn-direct,
.audio-player-sticky-custom.pv2.pv2-min .font-size-btn,
.audio-player-sticky-custom.pv2.pv2-min .fullscreen-btn,
.audio-player-sticky-custom.pv2.pv2-min .width-toggle-btn,
.audio-player-sticky-custom.pv2.pv2-min .mobile-nav-btn,
.audio-player-sticky-custom.pv2.pv2-min .pv2-btn {
  height: 32px; min-width: 32px; padding: 0 8px !important;
}

/* ---------- overflow tray ----------
   Desktop: display:contents dissolves the wrapper so its buttons lay out as
   normal flex items. Mobile: the same element becomes a bottom sheet. One DOM
   position, two presentations, no reparenting on resize. */
.audio-player-sticky-custom.pv2 .pv2-tray { display: contents; }
.audio-player-sticky-custom.pv2 .pv2-tray-hd,
.audio-player-sticky-custom.pv2 .pv2-more { display: none; }

/* ---------- drawers: dropped from the player's own bottom edge ----------
   Not a bottom-of-screen sheet. The player is pinned to the top of the
   viewport, so the pointer is already there; sending it to the far edge of the
   screen and back for a two-second adjustment is the wrong trade. No scrim
   either, so play/pause stays live while a drawer is open. */
.audio-player-sticky-custom.pv2 .pv2-pop {
  position: absolute;
  top: calc(100% - 3px);
  left: 0;
  width: min(320px, calc(100vw - 16px));
  background: var(--thf-surface);
  border: 1px solid var(--thf-border);
  border-radius: 14px;
  padding: 10px 14px 14px;
  box-shadow: 0 20px 42px -20px var(--thf-shadow), 0 3px 10px -6px var(--thf-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 100001;
}
.audio-player-sticky-custom.pv2 .pv2-pop.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* caret is positioned onto the button that opened it by makePop() */
.audio-player-sticky-custom.pv2 .pv2-pop::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--pv2-caret, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--thf-surface);
  border-left: 1px solid var(--thf-border);
  border-top: 1px solid var(--thf-border);
  transform: rotate(45deg);
}

.audio-player-sticky-custom.pv2 .pv2-pop-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.audio-player-sticky-custom.pv2 .pv2-pop-hd h3 {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--thf-text-muted);
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-x {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  border: 1px solid var(--thf-border);
  background: transparent;
  color: var(--thf-text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-x:hover {
  background: var(--thf-surface-2);
  color: var(--thf-text);
}

.audio-player-sticky-custom.pv2 .pv2-pop .pv2-readout {
  text-align: center;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--thf-heading);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 12px;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-readout-sm { font-size: 1.15rem; }

.audio-player-sticky-custom.pv2 .pv2-pop .pv2-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-nudge {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  border: 1px solid var(--thf-border);
  background: var(--thf-surface-2);
  color: var(--thf-text);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-nudge:hover { background: var(--thf-surface-3); }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-nudge-a { font-size: .78rem; }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-nudge-lg { font-size: 1.15rem; }
.audio-player-sticky-custom.pv2 .pv2-pop input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--thf-accent);
  height: 4px;
}

.audio-player-sticky-custom.pv2 .pv2-pop .pv2-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-presets button {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--thf-border);
  background: transparent;
  color: var(--thf-text-2);
  font-size: .82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-presets button:hover {
  background: var(--thf-surface-2);
  color: var(--thf-text);
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-presets button.active {
  background: var(--thf-accent);
  border-color: var(--thf-accent);
  color: #fff;
}

/* live preview of the transcript size; sizes are declared here rather than
   borrowed from the transcript's own font-size-N rules, which are scoped to
   #transcriptCustom and would not reach this node */
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample {
  margin: 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--thf-surface-2);
  color: var(--thf-text-2);
  line-height: 1.45;
}
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-1 { font-size: .74rem; }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-2 { font-size: .84rem; }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-3 { font-size: .95rem; }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-4 { font-size: 1.08rem; }
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-5 { font-size: 1.22rem; }
/* the library reader goes one step further than the lesson transcript */
.audio-player-sticky-custom.pv2 .pv2-pop .pv2-sample.font-size-6 { font-size: 1.36rem; }

/* only ever shown inside the mobile drawer */
.audio-player-sticky-custom.pv2 .pv2-lbl { display: none; }

/* the Aa glyph that replaced the A- / A+ pair */
.audio-player-sticky-custom.pv2 .pv2-aa {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}
.audio-player-sticky-custom.pv2 .pv2-aa b { font-size: .96rem; font-weight: 700; }
.audio-player-sticky-custom.pv2 .pv2-aa i { font-size: .7rem; font-weight: 700; font-style: normal; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
  .audio-player-sticky-custom.pv2 { padding: 8px 9px 0 !important; }
  .audio-player-sticky-custom.pv2 .pv2-card { padding: 9px 11px 10px; }
  .audio-player-sticky-custom.pv2 .player-title-custom { font-size: .9rem !important; }
  .audio-player-sticky-custom.pv2 .controls-row-custom { gap: 6px !important; }

  /* The library reader ships the v2 shell in its HTML (work/_audio_player.php)
     and player-v2.js adds .pv2-narrow unconditionally at this width. Until it
     has run, give a phone the same layout it will choose - tray hidden, More
     shown, scrubber allowed to shrink - so nothing changes at first paint. */
  .audio-player-sticky-custom.pv2:not(.pv2-narrow) .pv2-tray { display: none; }
  .audio-player-sticky-custom.pv2:not(.pv2-narrow) .pv2-more { display: inline-flex !important; }
  .audio-player-sticky-custom.pv2:not(.pv2-narrow) .pv2-mid { min-width: 48px; }
}

/* Narrow layout. Driven by a class rather than a viewport media query: the
   player also sits in a ~460px column on the YouTube channel pages, where a
   desktop viewport is no guide to how much room the controls actually have.
   player-v2.js adds .pv2-narrow whenever the row cannot fit its contents. */

/* The 140px floor keeps the scrubber usable beside the widened Playlist
   button where there is room. In a narrow player it is wider than the space
   left after the transport buttons, so the row overflowed and .pv2-card
   silently clipped the play and More buttons. Let it shrink. */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-mid { min-width: 48px; }

/* The overflow tray is the same kind of drawer as speed and text size: it
   hangs off the player's bottom edge. position:fixed (coordinates set by
   wireTray) because it stays inside the controls row, which .pv2-card clips. */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-more { display: inline-flex !important; }
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: min(320px, calc(100vw - 16px));
  background: var(--thf-surface);
  border: 1px solid var(--thf-border);
  border-radius: 14px;
  padding: 10px 14px 14px;
  box-shadow: 0 20px 42px -20px var(--thf-shadow), 0 3px 10px -6px var(--thf-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-7px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 100001;
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--pv2-caret, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--thf-surface);
  border-left: 1px solid var(--thf-border);
  border-top: 1px solid var(--thf-border);
  transform: rotate(45deg);
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray-hd { display: block; }
/* the grab handle signalled a bottom sheet; this is not one any more */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .pv2-grab { display: none; }
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .pv2-sheet-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray h3 {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--thf-text-muted);
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .pv2-x {
  width: 26px; height: 26px; min-width: 26px; flex: none;
  border-radius: 7px; border: 1px solid var(--thf-border);
  background: transparent; color: var(--thf-text-2);
  display: grid; place-items: center; cursor: pointer;
}

/* inside the sheet the controls become full-width rows */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .mobile-menu-btn,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .add-to-playlist-btn-direct,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray #stopBtnCustom,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray #restartBtnCustom,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .mobile-nav-btn {
  /* !important because the legacy sheet pins these to a 36px square, which
     left the label spilling outside its own button. max-width has to be
     cleared too: legacy caps it at 36px, which clamps width:100% straight
     back down to a square. */
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 14px !important;
  margin-bottom: 8px;
  font-size: .92rem !important;
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .mobile-menu-btn span,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .add-to-playlist-btn-direct span,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .mobile-nav-btn span { display: inline !important; }
/* the legacy button shouts PLAYLIST next to title-case neighbours */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .playlist-text { text-transform: none !important; }
/* Whether these buttons appear at all depends on the template, so the
   spacing lives on the buttons: an empty group then collapses to nothing
   instead of leaving a gap at the foot of the drawer. */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .fullscreen-controls {
  display: grid !important;
  grid-auto-flow: row;
  gap: 0;
  margin-bottom: 0;
}
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .fullscreen-btn,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .width-toggle-btn {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 10px;
  padding: 0 14px !important;
  margin-bottom: 8px;
  font-size: .92rem !important;
}

/* tooltip text promoted to a visible label inside the drawer */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .pv2-lbl { display: inline; }
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .fullscreen-btn,
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .width-toggle-btn {
  height: 46px !important;
}

/* the nav dropdown is anchored to a button that now lives in the sheet */
.audio-player-sticky-custom.pv2.pv2-narrow .pv2-tray .player-nav-dropdown { position: static !important; }

/* very narrow phones: drop the restart label-less button into the sheet too */
/* At 380px and below the restart control is moved into the More drawer by
   player-v2.js rather than hidden, so it stays reachable. */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .audio-player-sticky-custom.pv2,
  .audio-player-sticky-custom.pv2 *,
  .pv2-sheet,
}