/**
 * cm-alpha ui-carousel - the row rules (plan 05.1-06; from cm-yt-playlist 1.2.0's centralized.css). The viewport scrolls the row (whole cards,
 * snapped); its padding and negative margin leave room for a card's focus ring (--cm-carousel-ring) without moving the row; the scrollbar is
 * thin, and hidden while the engine runs. The track is one flex row; every card is 1/N of the width, N = --cm-carousel-visible: one card, two
 * from a 523px container, the block's --cm-carousel-across from 950px (cm-alpha's zm and zt tiers); auto margins on the end cards centre a short
 * row and collapse to zero when the row overflows. The Pause button shows only while the engine runs (the ONLY place its visibility lives).
 * --cm-carousel-gap and --cm-carousel-ring are set by each block on its own wrapper (never here, never at :root); no colour, no font.
 */
.cm-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--cm-carousel-ring);
    margin: calc(var(--cm-carousel-ring) * -1);
    scroll-snap-type: x mandatory;
    scroll-padding: var(--cm-carousel-ring);
    scrollbar-width: thin;
}
.cm-carousel--running { scrollbar-width: none; }
.cm-carousel--running::-webkit-scrollbar { display: none; }
.cm-carousel__track {
    --cm-carousel-visible: 1;
    display: flex;
    align-items: stretch;
    gap: var(--cm-carousel-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cm-carousel__card {
    flex: 0 0 calc((100% - (var(--cm-carousel-visible) - 1) * var(--cm-carousel-gap)) / var(--cm-carousel-visible));
    min-width: 0;
    scroll-snap-align: start;
}
.cm-carousel__card:first-child { margin-left: auto; }
.cm-carousel__card:last-child { margin-right: auto; }
.cm-carousel__pause { display: none; }
.cm-carousel--running + .cm-carousel__pause { display: block; }
@container (min-width: 523px) {
    .cm-carousel__track { --cm-carousel-visible: 2; }
}
@container (min-width: 950px) {
    .cm-carousel__track { --cm-carousel-visible: var(--cm-carousel-across); }
}