/* Playit — the SLIDER (a shared component; driven by static/js/slider.js): one slide at a time, a
   row of dots + arrows under it, moving on by itself forever.
   Markup: .slider[data-slider] > .slider-slides > .slider-slide (one .is-active) + .slider-nav
   (arrows [data-slider-prev|next], dots [data-slider-dot] each holding a .slider-dot-fill).

   The slides are STACKED in one grid cell, so the slider is always as tall as its tallest slide —
   switching never makes the page below jump — and moving from the last slide back to the first is
   just another crossfade, which is what makes it loop forever with no rewind. (A crossfade, not a
   sideways slide: a slide waiting off to one side would widen a phone's page.)

   The TIMER is the active dot itself: its fill grows across the dot over --slider-interval, and
   when that animation ends slider.js shows the next slide. So pausing the fill (hover, keyboard
   focus, a finger on it) pauses the slider too, and the player can SEE how long is left. */

.slider {
  --slider-interval: 7s;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.slider-slides {
  display: grid;
  touch-action: pan-y;               /* a sideways swipe is ours (slider.js); scrolling stays the page's */
}
.slider-slide {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.97);             /* a crossfade with a slight zoom — never reaches past the edges */
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.slider-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

/* ---- the nav row: ◀  ● ● ●  ▶ ---- */
.slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--color-text-dim);
  background: var(--color-panel);
  border: 3px solid var(--color-line);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--color-well);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s, border-color .1s, color .1s;
}
.slider-arrow:hover {
  color: var(--color-text);
  border-color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--color-well);
}
.slider-arrow:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-well); }
.slider-arrow:focus-visible,
.slider-dot:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 3px; }
.slider-arrow-icon { display: inline-flex; }
.slider-arrow-icon svg { width: 16px; height: 16px; display: block; }
.slider-arrow-back { transform: scaleX(-1); }   /* the one play triangle, pointing back */

.slider-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* A dot: a 44px tap target around a small pill; the active pill is long, and fills as its timer. */
.slider-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.slider-dot::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--color-line-2);
  border: 2px solid var(--color-ink);
  border-radius: 3px;
  transition: width .3s ease, background .3s ease;
}
.slider-dot:hover::before { background: var(--color-muted); }
.slider-dot.is-active::before {
  width: 44px;
  background: var(--color-well);
}
.slider-dot { position: relative; }
.slider-dot-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 10px;
  margin: -5px 0 0 -20px;
  border-radius: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.slider-dot.is-active .slider-dot-fill {
  animation: slider-timer var(--slider-interval) linear forwards;
}
@keyframes slider-timer { to { transform: scaleX(1); } }

/* Pause: the pointer is over the slider, a finger is on it (slider.js sets .is-held), or KEYBOARD
   focus is inside it — a tap focuses the dot it lands on too, so plain focus would keep the slider
   paused long after the finger left. The fill stops, and with it the timer. */
.slider:hover .slider-dot-fill,
.slider:has(:focus-visible) .slider-dot-fill,
.slider.is-held .slider-dot-fill { animation-play-state: paused; }

/* Reduced motion: no timer (the active dot just shows full) and no sliding — a slide swaps
   instantly, and only when the player asks. */
@media (prefers-reduced-motion: reduce) {
  .slider-slide,
  .slider-slide.is-active { transition: none; transform: none; }
  .slider-dot.is-active .slider-dot-fill { animation: none; transform: scaleX(1); }
}