/* ──────────────────────────────────────────────────────────────
   MDS Carousel — a drop-in "real lessons, running live" widget.
   Cycles real page figures, each looping its own data-step reveal.
   Include this + carousel.js, then:
     MDSCarousel.mount(el, { label, ratio, wide, slides:[{file,href,name}] })
   Colors fall back to sane defaults, so it works on any page; where the
   host defines --accent / --v5-* tokens, it inherits them.
   ────────────────────────────────────────────────────────────── */
.mdsc { margin: 0 0 2.5rem; }
/* Optional: break out of a narrow text column on wide screens (opt-in via `wide`) */
@media (min-width: 1040px) { .mdsc.mdsc-wide { width: min(1140px, 94vw); margin-left: 50%; transform: translateX(-50%); } }
/* Headline on top: a small per-slide kicker over a prominent concept line.
   The blurb reserves two lines so the figure below never shifts as slides swap. */
.mdsc-head { margin-bottom: 0.7rem; }
.mdsc-head.is-in { animation: mdsc-head-in .5s ease; }
@keyframes mdsc-head-in { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.mdsc-kick { font-family: var(--v5-mono, ui-monospace, monospace); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent, #2563EB); margin-bottom: 0.34rem; }
.mdsc-blurb { font-family: var(--v5-serif, Georgia, serif); font-weight: 500; font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--v5-ink, #0E0E10); min-height: 2.6em; }
/* height is driven by an inline aspect-ratio the widget sets from opts.ratio */
.mdsc-stage { position: relative; display: block; border: 1px solid var(--v5-hairline, #E5E7EB); border-radius: var(--v5-r, 14px); overflow: hidden; min-height: 120px; background: #FBFBFC; transition: border-color .15s, box-shadow .15s; }
.mdsc-stage:hover { border-color: var(--accent, #2563EB); box-shadow: var(--v5-shadow-1, 0 6px 24px rgba(15, 23, 42, 0.06)); }
.mdsc-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .5s ease; }
.mdsc-slide.is-on { opacity: 1; }
.mdsc-slide svg { width: 100%; height: 100%; display: block; }   /* contain via the figure's own viewBox */
.mdsc-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.mdsc-dots { display: flex; gap: 7px; align-items: center; }
.mdsc-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: var(--v5-hairline-2, #D1D5DB); cursor: pointer; transition: background .15s, transform .15s; }
.mdsc-dot.on { background: var(--accent, #2563EB); transform: scale(1.3); }
.mdsc-open { font-size: 0.9rem; color: var(--accent, #2563EB); font-weight: 600; text-decoration: none; white-space: nowrap; }
.mdsc-open:hover { text-decoration: underline; }