#sources #traffic-prev,
#sources #traffic-next { display: none; }

/* Dashboard drawing starts when the panel enters the viewport, not on page
   load while it is still below the fold. */
#dash .dash-img { animation-play-state: paused; }
#dash.dash-visible .dash-img { animation-play-state: running; }

/* Desktop keeps the ambient, mouse-driven rail. */
#sources #traffic-row {
  cursor: grab;
  overflow-x: hidden;
  scroll-behavior: auto;
  scroll-snap-type: none;
  touch-action: pan-y;
  user-select: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 3.5%, #000 96.5%, transparent 100%);
}

#sources #traffic-row.is-dragging { cursor: grabbing; }
#sources #traffic-row img { -webkit-user-drag: none; user-select: none; }
#sources #traffic-row > li { scroll-snap-align: none; }

/* Phones/tablets: native momentum scrolling with the same seamless loop. */
@media (hover: none), (pointer: coarse) {
  #sources #traffic-row,
  #sources #traffic-row[data-marquee-mode="native-touch"],
  #sources #traffic-row[data-marquee-mode="touch-loop"] {
    cursor: auto;
    overflow-x: auto;
    scroll-behavior: auto;
    scroll-snap-type: none;
    scroll-padding-inline: 16px;
    /* Allow vertical page scrolling when a swipe starts on a card; the
       browser still keeps horizontal gestures available for this rail. */
    touch-action: pan-x pan-y;
    /* Keep iOS edge rubber-band from pulling the cloned rail backwards. */
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 98%, transparent 100%);
  }

  #sources #traffic-row > li { scroll-snap-align: none; scroll-snap-stop: normal; }
}

@media (prefers-reduced-motion: reduce) {
  #sources #traffic-row {
    cursor: auto;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-mask-image: none;
    mask-image: none;
  }
  #sources #traffic-row > li { scroll-snap-align: start; }
}