/* stop "jp" (12:30): owned by its own workstream. Scope every rule under #stop-jp. */

/* the readout tally sits under the readout line, not announced (the readout itself is the live region) */
#stop-jp .jp-tally { margin: 0; font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* the picture: a small swap, skipped under reduced motion */
#stop-jp .stop__art img { position: relative; z-index: 0; }
#stop-jp .stop__art img.is-swap { animation: jp-swap 360ms var(--ease); }
@keyframes jp-swap { from { opacity: 0.25; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* music notes sticker above his head; the sprite sheet cycles inside, this wrapper floats */
#stop-jp .jp-notes {
  position: absolute; top: 3%; right: 5%; width: 40%; aspect-ratio: 1; z-index: 2; pointer-events: none;
  animation: jp-float 3.2s ease-in-out infinite alternate;
}
#stop-jp .jp-notes[hidden] { display: none; }
#stop-jp .jp-notes .jp-sprite { inset: 0; }
@keyframes jp-float { from { transform: translate(0, 0) rotate(-4deg); } to { transform: translate(-6px, -10px) rotate(4deg); } }

/* chips: visible keyboard focus (the 44px height comes from the shared .chip) */
#stop-jp .stop__controls .chip { overflow-wrap: anywhere; }
#stop-jp .chip:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #stop-jp .stop__art img.is-swap { animation: none; }
  #stop-jp .jp-notes { animation: none; }
}