/* Background playback on the watch page (SPEC 26): the Mini player (picture-in-picture) and Listen buttons, and the
   Listen panel over the player. The player box is black in both themes, so the panel is light text on a dark scrim
   (like bunny.css's player messages); its buttons keep the site's style and a white focus ring. */

.btn[data-pip][aria-pressed="true"], .btn[data-listen-toggle][aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }

.listen-panel {
  position: absolute; inset: 0; z-index: 3; overflow: hidden;
  display: grid; place-items: center; padding: 14px;
  background: #0b0b0d; color: #fff;
}
.listen-art {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: blur(18px) brightness(0.45); transform: scale(1.12);
}
.listen-body {
  position: relative; display: grid; justify-items: center; gap: 10px;
  width: min(520px, 100%); text-align: center;
}
.listen-label {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.listen-title {
  max-width: 100%; font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.listen-audio { display: block; width: 100%; height: 44px; color-scheme: dark; }
.listen-back { background: rgba(255, 255, 255, 0.14); color: #fff; }
.listen-back:hover { background: rgba(255, 255, 255, 0.24); }
.listen-panel .btn:focus-visible, .listen-audio:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 480px) {
  .listen-panel { padding: 8px 10px; }
  .listen-body { gap: 6px; }
  .listen-title { font-size: 14px; -webkit-line-clamp: 1; }
  .listen-label { font-size: 11px; padding: 2px 10px; }
  .listen-audio { height: 40px; }
  .listen-back { height: 34px; padding: 0 12px; font-size: 13px; }
}
@media (max-width: 360px) {
  .listen-title { display: none; }
}
@media (forced-colors: active) {
  .listen-panel { background: Canvas; color: CanvasText; }
  .listen-art { display: none; }
}