/* P54 — Key and BPM on a YouTube song (decision 70, DESIGN-CHANGES 4.42).

   While the song's audio is on its way, a stepper keeps the value that plays
   and shows the change asked for on its bottom edge: "→ +2" (Key) or "→ 120"
   (BPM), with a pulsing dot (header/stepper.ts). Out of flow, like the badge
   on its top edge: the stepper keeps its size and the header's fit.

   Once the Studio's audio plays it, the video pauses and a note takes its
   place in the mini player card, docked or floating (yt-player/studio-note.ts). */

.hd-stepper__pending {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 0 5px;
  border-radius: 5px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-surface);
  color: var(--st-text-dim);
  font: 600 10px/16px var(--st-font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, 50%);
  pointer-events: none;
}
.hd-stepper__pending[hidden] { display: none; }
.hd-stepper__pending-dot {
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--st-accent);
  animation: hd-pending-pulse 1s ease-in-out infinite alternate;
}
@keyframes hd-pending-pulse { from { opacity: 1; } to { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .hd-stepper__pending-dot { animation: none; }
}

/* ---- "Playing the Studio's audio" in the video's place ------------------------ */

.yt-note {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  background: var(--st-panel);
  text-align: center;
}
.yt-note[hidden] { display: none; }
.yt-mini[data-mode='dock'] .yt-note {
  border-radius: 10px;
  background: var(--st-surface-2);
  box-shadow: inset 0 0 0 1px var(--st-line);
}
.yt-note__title { margin: 0; color: var(--st-text); font-size: 14px; font-weight: 600; line-height: 20px; }
.yt-note__values {
  margin: 0;
  color: var(--st-text-dim);
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.yt-note__back {
  margin-top: 8px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--st-accent-ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.yt-note__back:hover { background: color-mix(in srgb, var(--st-text) 8%, transparent); }