/*
 * The snapping card carousel (Carousel.js) — the Preview tab's polls and player
 * comparisons, and the Predictions tab's SureSCOUT cards.
 *
 * The track owns the geometry and nothing else: how wide a card is, where it
 * snaps, how the dots under it count. What is *in* a card is the caller's, and
 * every caller's cards are styled in that caller's own stylesheet. Two
 * carousels of different cards must not be able to disagree about how they
 * swipe, which is the whole reason this is one file rather than a copy per tab.
 */

.carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/*
 * The scroller. One card per view, snapped to the start of the card: no peek,
 * so nothing of the next market bleeds into the one being answered — the dots
 * under the row are what says there is more.
 *
 * `padding-block` is not decoration — `.u-scroll-x` clips the vertical axis,
 * and without it every card's shadow would be sliced off top and bottom.
 */
.carousel__track {
  display: flex;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  padding-block: var(--space-1) var(--space-3);
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--space-4);
}

/*
 * Every card in a track, whatever is in it: exactly the width of the row it
 * scrolls in, and snapped to its start.
 *
 * A percentage inside a flex container resolves against the content box, so
 * 100% here is the viewport minus the track's own gutters — a card lines up
 * with the ones above and below it on both edges, and the next one is a full
 * swipe away rather than half-showing.
 *
 * On the track rather than on each kind of card, because it is the track's
 * geometry: two carousels of different cards must not be able to disagree
 * about how wide a card is.
 */
.carousel__track > * {
  flex: none;
  width: 100%;
  scroll-snap-align: start;
}

/*
 * The peeking row (Carousel.js, `peek: true`) — the Catch-Up tab's recaps.
 *
 * Cards at 88% of the row, so a sliver of the next one shows past the edge:
 * that sliver is what says "swipe" on a row that is browsed rather than
 * answered, and the polls above deliberately do without it. The last card
 * snaps to the row's *end* instead of its start — at 88% there is no scroll
 * position that aligns its start with the port and still reaches it, so
 * without this the row could never show the final card in full and would
 * spring back off it. The card before it then peeks on the left, which is
 * also how the reference reads mid-row.
 */
.carousel[data-peek="true"] .carousel__track > * {
  width: 88%;
}

.carousel[data-peek="true"] .carousel__track > :last-child {
  scroll-snap-align: end;
}

/*
 * How many markets there are and which one is showing. An indicator, not a
 * control — the cards are the thing to touch, and six-pixel targets under a
 * card someone is already swiping would be four ways to miss.
 */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.carousel__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border-strong);
  opacity: 0.4;
  transform: scale(0.8);
  transition:
    opacity var(--duration) var(--easing),
    transform var(--spring-duration) var(--spring),
    background-color var(--duration) var(--easing);
}

.carousel__dot[data-active="true"] {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.15);
}