/* ==========================================================================
   The control under a draggable figure.

   Four classes, and they are deliberately few: the slider, the number it is
   currently showing, an optional line saying what to watch for, and the row
   that holds them. Everything else about the figure — its border, its caption
   type, its colours — is the site's, and this file must not touch it.

   The tokens are the ones every site in the fleet defines in its own
   `main.css`: `--c-a` for the site's first accent, `--ink-2` and `--ink-3` for
   the two quiet inks, `--font-ui` for the interface face. A site that adopts
   the drag and defines none of them still gets a working control, because
   `accent-color` and `color` fall back to the browser's own.

   Promoted out of the fifteen private copies on 2026-08-22 alongside
   `js/drag.js`. The rules below are those copies' rules unchanged; the
   `prefers-reduced-motion` block is new, and is here because a slider is the
   one place on these sites where a reader drives an animation.
   ========================================================================== */

.drag-row { margin: 0.6rem 0 0; display: grid; gap: 0.35rem; }

.drag-slider {
  width: min(28rem, 100%);
  accent-color: var(--c-a);
  cursor: ew-resize;
}
.drag-slider:focus-visible { outline: 2px solid var(--c-a); outline-offset: 3px; }

.drag-readout {
  margin: 0;
  font: 0.8rem/1.4 var(--font-ui);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.drag-note { margin: 0; font: 0.74rem/1.4 var(--font-ui); color: var(--ink-3); }

/* The handle stays draggable; what goes is the pointer-cursor hint that invites
   a reader to sweep it. Nothing here animates, so there is nothing to disable —
   this only stops the control advertising motion to a reader who asked for
   less of it. */
@media (prefers-reduced-motion: reduce) {
  .drag-slider { cursor: pointer; }
}