/* ==========================================================================
   Preview — the page embedded in the 16/9 frame of the component's reference
   page.

   The wheel, a background, nothing else: this framing is what serves as the
   poster, and it is also what produces the 700 x 350 thumbnail.
   ========================================================================== */

/* Without this, the inner padding adds to the 100 % height and the content
   drifts towards the bottom of the frame. */
html,
body {
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* The scale is driven by the width, with no ceiling: the layout is then the
   same at every frame size, so a single constant is enough for the framing to
   hold as well in the 700 x 350 thumbnail as in the full-screen frame of the
   reference page.

   96, because the reference was measured at 1440 px wide with a 15 px body
   copy: 1440 / 15 = 96. At that scale both clamp() calls of the component sit
   on their upper bound, exactly as on the original, and the wheel takes the
   full width — its first card grazes the left edge.

   The height plays no part: the block of text is placed by a max() whose
   "shoulder of the arc" branch wins as long as the frame is wider than it is
   tall. A min() or a clamp() on --wcar-font-size, on the other hand, would
   break the property — the scale would stop being proportional and the framing
   would drift with the size. */
.arc-carousel {
  --wcar-font-size: calc(100vw / 96);
  --wcar-height: 100vh;
}

/* The breakpoints of the component are neutralised: in a narrow frame — the
   reference page on a phone — they would reopen the arc differently and the
   thumbnail would no longer show the same drawing. Same specificity as the
   @container rules, but this file is loaded after them. */
.arc-carousel__stage {
  --wcar-span: 245;
  --wcar-radius: clamp(14.6667em, 72cqw, 48em);
  --wcar-card-width: clamp(9.6267em, 18.24cqw, 14.1867em);
  --wcar-content-bump: 0em;
  --wcar-dots-bottom: 1.2em;
}

/* Nobody can reach the wheel with the keyboard from inside a decorative
   frame; a focus ring there would only be a capture artefact. */
.arc-carousel__card:has(.arc-carousel__radio:focus-visible) {
  outline: none;
}