/* SM-471 -- shared canon PLAY/STOP button (the site's FIRST shared play/stop
   component -- foundation for the queued site-wide play/stop retrofit audit,
   see JASON-QUEUE.md). Colors are Jason's canonical site-wide values
   (2026-08-17): PLAY = bg #00b140, BLACK icon. STOP = bg #5e0909, border
   #df2020, WHITE icon. Uses the shared play-button.svg/stop-button.svg
   glyphs (icons/) -- both are already solid black fills, so PLAY needs no
   filter at all (native black) and STOP just inverts to white -- the EXACT
   technique exercise-viewer.css's own .ev-control-icon already uses
   (default filter:invert(1) = white, :hover filter:none = native black),
   applied here in the opposite default/state pairing. Generic .pps-* names
   (Play/Pause/Stop Button -- no feed-private namespace) so a future host can
   adopt this component directly; the Exercise Viewer's OWN .ev-play button is
   NOT refactored onto it in this task -- that is the separate queued task.

   SM-471 follow-up (PM ruling) -- .pps-pending is the loading state between a
   click and the engine/payload actually being ready to play (the engine now
   lazy-loads on first click, so this window is real). Layered on TOP of
   .pps-play (still the green PLAY button, same icon) rather than a new visual
   language -- a plain opacity pulse, zero new hex, so other surfaces inherit
   this state for free once they adopt the component. */
.pps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter .15s;
}
.pps-btn:hover { filter: brightness(1.12); }
.pps-btn .pps-icon { width: 15px; height: 15px; display: block; }

.pps-btn.pps-play { background: #00b140; border: 1px solid #00b140; }
/* Native black -- play-button.svg is already a solid black fill, no filter needed. */
.pps-btn.pps-play .pps-icon { filter: none; }

.pps-btn.pps-stop { background: #5e0909; border: 1px solid #df2020; }
/* Same black glyph, inverted to white -- see file header. */
.pps-btn.pps-stop .pps-icon { filter: invert(1); }

.pps-btn.pps-pending { cursor: wait; animation: pps-pulse 1s ease-in-out infinite; }
@keyframes pps-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}