/* ==========================================================================
   SEEYOUSOON — slide to act (js/core/slide.js; driver-test plan 2026-10-18, D13, the contract C-SLIDE)
   [data-slide] is the design's pill (CF1's «Svep för att gå online», CF8's «Till förarläget»); its classes keep their look.
   Its [data-part="slide-track"] lies over the pill's padding box (both pills have p-1) and scrolls across, right to left:
   the knob starts at the left with nothing set from JS, and a finger moves it by native scrolling. The track keeps
   touch-action: auto, so the browser locks the axis: across moves the knob, along the page moves the sheet under it.
   A space the knob's size stands where the knob stood in the pill's row, so a label in that row (CF8's) stays where the
   design put it. The label fades as the knob goes (a scroll-driven animation); where the browser has none, it stays.
   ========================================================================== */
[data-slide] {
  --slide-knob: 3rem;   /* both knobs are h-12 w-12 */
  timeline-scope: --slide;
}
[data-slide]::before {
  content: '';
  flex: none;
  width: var(--slide-knob);
  height: var(--slide-knob);
}
[data-slide] > [data-part="slide-track"] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.25rem;
  right: 0.25rem;
  z-index: 10;
  display: flex;
  align-items: center;
  direction: rtl;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: auto;
  -webkit-tap-highlight-color: transparent;
  scroll-timeline: --slide inline;
}
[data-slide] > [data-part="slide-track"]::-webkit-scrollbar { display: none; }
/* the travel: the knob's start is the track's right end (scrollLeft 0), its end the track's left end */
[data-slide] > [data-part="slide-track"]::before,
[data-slide] > [data-part="slide-track"]::after {
  content: '';
  flex: none;
  align-self: stretch;
  width: calc(100% - var(--slide-knob));
}
[data-slide] [data-part="slide-knob"] {
  flex: none;
  direction: ltr;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
@supports (animation-timeline: scroll()) {
  [data-slide] [data-part="slide-label"] {
    animation: slide-label-fade linear both;
    animation-timeline: --slide;
    animation-range: 0% 70%;
  }
}
@keyframes slide-label-fade {
  to { opacity: 0; }
}