/* A GIF CAN BE STOPPED (gif-motion.js). One sheet wherever a GIF can be shown (the dashboard, the operator console, the claim
   and look pages, onboarding, the blog), so the button reads the same everywhere: the still is laid over the picture, and the
   button sits on its lower right corner. A page whose own chips sit there moves the button in its own
   sheet (the library's phone rule in staffiva-media-v2.css). */
.gif-motion-still { position: absolute; display: block; pointer-events: none; }
.gif-motion-btn { position: absolute; z-index: 2; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: rgba(15, 12, 24, .78); color: #fff; font: 600 12px/26px var(--font-body, system-ui, sans-serif); cursor: pointer; }
.gif-motion-btn:hover { background: rgba(15, 12, 24, .92); }
/* Focus is drawn on the picture's own pixels, so it must show on any of them: a white ring between two dark ones stands out from
   a light picture and a dark one alike (a white ring alone vanished on a white picture). It replaces the page's own ring. */
.gif-motion-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #0f0c18; }

/* Paper has no Play. A print lays the page out again at the paper's width, and a still is sized and placed in pixels for the
   screen, so it would land beside its picture: the picture prints instead (as a frame of itself) and the still and the button
   do not print at all. */
@media print {
  .gif-motion-btn,
  .gif-motion-still { display: none !important; }
  img[data-gif-motion-stopped="true"] { visibility: visible !important; }
}