/* THE snap carousel (views/ui/carousel.js): the scroller's behaviour and its position strip.
   Each screen keeps only its card width, on its own class beside .car-scroll.

   The [data-carousel] half is what gives these rules (0,2,0): components link BEFORE screens, so
   a bare .car-scroll would lose `display: flex` to each screen's own (0,1,0) grid rule. Card-width
   rules in a screen sheet are (0,2,0) too and win on order, which is what they need to do. */

.car-strip { display: none; }

/* ONE strip everywhere: prev / position / next. Dots were the second rendering of the same
   control, and a 26-item shelf wrapped them into rows on a phone. */
.car-arrow {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  font: inherit; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.car-arrow:hover { border-color: var(--bronze); color: var(--bronze-2); }
/* Set by _paint at either end. aria-disabled rather than disabled, so a keyboard walk keeps focus. */
.car-arrow[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.car-arrow[aria-disabled="true"]:hover { border-color: var(--border); color: var(--ink-2); }
.car-pos {
  min-width: 6ch; text-align: center;
  color: var(--ink-3); font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.car-arrow:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: -2px; border-radius: 999px; }

@media (max-width: 1024px) {
  .car-scroll[data-carousel] {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Load-bearing: overflow-x promotes overflow-y to auto, which would clip a card's
       overhanging badge and the selected card's ring. */
    padding: 14px 4px 8px;
    /* Matches the side padding, so a snapped card rests at scrollLeft 0 rather than 4px in. */
    scroll-padding-inline: 4px;
    margin-inline: -4px;
    -webkit-overflow-scrolling: touch;
  }
  /* start, not center: the strip counts the LEADING card, and centring is unreachable for the
     first and last card of a shelf several cards wide — the arrow would read as dead. */
  .car-scroll[data-carousel] > * { scroll-snap-align: start; }
  /* A lift inside a scroller nudges the snap position; the border already marks hover. */
  .car-scroll[data-carousel] > *:hover { transform: none; }
  .car-strip { display: flex; align-items: center; justify-content: center; gap: 2px; }
}