/* carousel.css — a list as a carousel in small windows (carousel.js; owner 2026-10-31): one card at a time, swipe or ‹ › and dots.
   The cards keep their own look; this gives the track, the snap and the controls. Identical copy in friendly-apps-home and site.
   1.1.0: the pause button of a timed carousel.
   version: 1.3.0 · created 2026-10-31 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS */
[data-carousel].is-carousel{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s3);margin-inline:calc(-1 * var(--s4));
  padding:var(--s1) var(--s4) var(--s2);scroll-padding-inline:var(--s4);scrollbar-width:none;overscroll-behavior-x:contain}
[data-carousel].is-carousel::-webkit-scrollbar{display:none}
[data-carousel].is-carousel:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[data-carousel].is-carousel>*{flex:0 0 min(84%,20rem);scroll-snap-align:start;min-width:0}
.carousel-bar{display:flex;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s3)}
.carousel-bar[hidden]{display:none}
.carousel-prev,.carousel-next{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);font:inherit;font-size:1.2rem;line-height:1;cursor:pointer}
.carousel-prev:disabled,.carousel-next:disabled{opacity:.35;cursor:default}
.carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:70%}
.carousel-dot{width:24px;height:24px;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.carousel-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--border);transition:width var(--dur),background var(--dur)}
.carousel-dot[aria-current="true"]::before{width:18px;border-radius:4px;background:var(--accent)}
.carousel-bar button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.carousel-play{position:relative;width:36px;height:36px;margin-left:var(--s1);border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer}
.carousel-play::before,.carousel-play::after{content:"";position:absolute;top:12px;width:3px;height:12px;border-radius:1px;background:currentColor}
.carousel-play::before{left:13px}.carousel-play::after{left:19px}
.carousel-play[aria-pressed="true"]::before{left:14px;width:0;height:0;border-radius:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.carousel-play[aria-pressed="true"]::after{display:none}
/* 1.2.0 (1018c-Q752 b): whole sections as cards — one per view, each as tall as it is */
[data-carousel-full].is-carousel{align-items:flex-start;overflow-y:hidden;transition:height .25s ease}
@media (prefers-reduced-motion:reduce){[data-carousel-full].is-carousel{transition:none}}
[data-carousel-full].is-carousel>*{flex:0 0 100%;padding-inline:var(--s4);box-sizing:border-box}
/* 1.3.0 (owner 2026-11-01): the controls float above the footer while their carousel is on screen — a small pill in the thumb zone that
   stays reachable however tall the card is; it rests at its own place once the carousel's end scrolls into view */
.carousel-bar{position:sticky;bottom:calc(var(--g-foot-h,0px) + 10px);z-index:30;width:fit-content;margin-inline:auto;padding:6px 10px;
  border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb,var(--surface,#fff) 92%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgb(16 42 67 / .14)}
[data-view="text"] .carousel-bar,[data-view="print"] .carousel-bar{position:static}