.ov-nowplaying { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--ap-gray-800); }
.ov-nowplaying__scroll { overflow-x: auto; padding-bottom: 8px; }
.ov-nowplaying__table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ov-nowplaying__table th { padding: 0 10px 8px; text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ap-text-secondary); white-space: nowrap; }
.ov-nowplaying__table td { padding: 10px; vertical-align: middle; background: rgba(var(--ap-white-rgb), .09); border-top: 1px solid rgba(var(--ap-white-rgb), .18); border-bottom: 1px solid rgba(var(--ap-white-rgb), .18); color: var(--ap-text-primary); }
.ov-nowplaying__table td:first-child { border-left: 2px solid rgba(var(--ap-amber-rgb), .55); border-radius: 12px 0 0 12px; }
.ov-nowplaying__table td:last-child { border-right: 1px solid rgba(var(--ap-white-rgb), .18); border-radius: 0 12px 12px 0; }
.ov-nowplaying__table tr:hover td { background: rgba(var(--ap-white-rgb), .13); }
.ov-nowplaying__last, .ov-nowplaying__number, .ov-nowplaying__duration { font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-nowplaying__last span { display: inline; }
.ov-nowplaying__last span + span { margin-left: 8px; }
.ov-nowplaying__table .ov-nowplaying__last, .ov-nowplaying__table .ov-nowplaying__number, .ov-nowplaying__table .ov-nowplaying__duration { color: var(--ap-text-secondary); }
.ov-nowplaying__artist, .ov-nowplaying__title { min-width: 110px; }
.ov-nowplaying__number { text-align: right; }
.ov-nowplaying__controls { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.ov-nowplaying__divider { width: 1px; height: 14px; margin: 0 7px; background: var(--ap-gray-600); flex-shrink: 0; }
.ov-nowplaying__duration { text-align: right; font-weight: 700; letter-spacing: .06em; }
.ov-nowplaying__open { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--ap-text-secondary); cursor: pointer; }
.ov-nowplaying__open svg { width: 16px; height: 16px; }
.ov-nowplaying__preview[hidden] { display: none; }
/* Replaces the POP value on a first spin, where the score is 91 % prior (see
   parts/nowplaying_card.php). Secondary text token, not the amber accent: the
   accent is reserved for POP, and this chip exists precisely because there is
   no POP to show. */
.ov-nowplaying__firstspin {
  display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 7px;
  border: 1px solid rgba(var(--ap-text-secondary-rgb), .45); border-radius: 4px;
  color: var(--ap-text-secondary); font-size: .78em; font-weight: 700;
  letter-spacing: .06em; white-space: nowrap; flex-shrink: 0;
}
.ov-nowplaying__open.ov-nowplaying__preview { border-radius: 50%; color: var(--ap-green); background: none; }
.ov-nowplaying__open.ov-nowplaying__preview:hover { color: var(--ap-green); background: none; }
.ov-nowplaying__preview circle { fill: rgba(var(--ap-green-rgb), .12); }
.ov-nowplaying__preview:hover circle { fill: rgba(var(--ap-green-rgb), .2); }
.ov-nowplaying__preview svg { width: 19px; height: 19px; }
.ov-nowplaying__open.ov-nowplaying__preview[aria-pressed="true"] { color: var(--ap-red); }
.ov-nowplaying__preview[aria-pressed="true"] circle { fill: rgba(var(--ap-red-rgb), .14); }
.ov-nowplaying__preview[aria-pressed="true"]:hover circle { fill: rgba(var(--ap-red-rgb), .22); }
.ov-nowplaying__preview[aria-pressed="true"] svg { animation: ovPreviewFade 3s ease-in-out infinite; }
@keyframes ovPreviewFade { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .ov-nowplaying__preview[aria-pressed="true"] svg { animation: none; } }
.ov-nowplaying__open:hover { color: var(--ap-text-primary); background: rgba(var(--ap-white-rgb), .07); }
.ov-nowplaying__open:focus-visible, .ov-nowplaying__scroll:focus-visible { outline: 2px solid var(--ap-text-primary); outline-offset: 2px; }
.ov-nowplaying__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: rgba(var(--ap-red-rgb), .95); animation: ovNowplayingPulse 1.25s ease-in-out infinite; }
.ov-nowplaying figcaption { margin-top: 12px; }
@keyframes ovNowplayingPulse {
  0% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(var(--ap-red-rgb), .55); }
  55% { transform: scale(1); box-shadow: 0 0 0 10px rgba(var(--ap-red-rgb), 0); }
  100% { transform: scale(.85); box-shadow: 0 0 0 0 rgba(var(--ap-red-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .ov-nowplaying__dot { animation: none; } }

.ov-nowplaying .ov-nowplaying__caption {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 11px; font-weight: 400; line-height: 1.6;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ap-text-secondary);
}
.ov-nowplaying__caption-icon {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
}