/* Values from the live site's .tt-stat-item (research/stat-staging.md):
   number in the serif (Tobias) italic 300, 3rem (2.5rem at 479px and below),
   line height 1.2, gradient #6e7dff → #d65d87; label 0.8rem / 600 with a 1rem
   icon, 0.4rem apart; 0.75rem (0.5rem) between number and label.

   The live site blends the number with multiply / darken, which only works on
   light backgrounds. Here the gradient has a lighter set for dark backgrounds
   instead, picked with the --tt-dark space toggle (see Button.module.css). */
.yVjhsKRBVFaXxEA7QaA1 {
  --_number: 3rem;
  --_number-mobile: 2.5rem;
  --_label: 0.8rem;
  --_d-g: var(--tt-dark) linear-gradient(135deg, #a3adff, #f08bad 66%);
  --_g: var(--_d-g, linear-gradient(135deg, #6e7dff, #d65d87 66%));

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.yVjhsKRBVFaXxEA7QaA1 *,
.yVjhsKRBVFaXxEA7QaA1 *::before,
.yVjhsKRBVFaXxEA7QaA1 *::after {
  box-sizing: border-box;
}

.yVjhsKRBVFaXxEA7QaA1[data-size="small"] {
  --_number: 2rem;
  --_number-mobile: 1.75rem;
  --_label: 0.75rem;
}

.yVjhsKRBVFaXxEA7QaA1[data-size="large"] {
  --_number: 4rem;
  --_number-mobile: 3.25rem;
  --_label: 0.9rem;
}

/* ---------- Number ----------
   The value and the counting copy share one box: the copy sits on top
   (absolute), so the box always has the final value's width and nothing
   moves while counting. The copy is centered, so a shorter running number
   doesn't hug one side. */

.yVjhsKRBVFaXxEA7QaA1 [data-part="number"] {
  position: relative;
  margin: 0;
  font-family: var(--tt-font-serif, var(--_text-sizes---text-serif-ff, "Tobias", Georgia, serif));
  font-size: var(--_number);
  line-height: 1.2;
  font-weight: 300;
  font-style: italic;
  /* No tabular-nums: Tobias sets digits and the decimal point very wide with
     it. The width comes from the hidden final value instead. */
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="value"],
.yVjhsKRBVFaXxEA7QaA1 [data-part="count"] {
  display: inline-block;
  /* Room for the italic's overhang, so the gradient doesn't cut the last
     glyph; the negative margin keeps the layout width. */
  padding: 0 0.12em;
  margin: 0 -0.12em;
}

.yVjhsKRBVFaXxEA7QaA1[data-color="gradient"] [data-part="value"],
.yVjhsKRBVFaXxEA7QaA1[data-color="gradient"] [data-part="count"]:not([data-roll]) {
  background-image: var(--_g);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="count"] {
  position: absolute;
  inset: 0;
  text-align: center;
}

/* Hidden, not removed: it keeps the width, and screen readers and copy &
   paste still get the real number. */
.yVjhsKRBVFaXxEA7QaA1[data-play] [data-part="value"] {
  opacity: 0;
}

/* ---------- Roll (RollNumber.tsx) ----------
   Every character is a one-line box at the measured spot of its twin in the
   real value (--_x), with its own slice of the gradient. A digit box is a
   window: the final digit (invisible) sets its width, the strip sits in the
   same grid cell with no width of its own and moves up one line per step.
   Side padding leaves room for the italic. */
.yVjhsKRBVFaXxEA7QaA1 [data-part="char"] {
  --_pad: 0.15em;
  position: absolute;
  top: 0;
  left: calc(var(--_x, 0px) - var(--_pad));
  display: grid;
  height: 1.2em;
  padding: 0 var(--_pad);
}

.yVjhsKRBVFaXxEA7QaA1[data-color="gradient"] [data-part="char"] {
  background-image: var(--_g);
  background-size: var(--_w, 100%) 100%;
  background-position: calc(var(--_pad) - var(--_x, 0px)) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fades the rolling digits out at the window's edges. Tobias digits are
   inked from 16.5% to 81% of the line, so the landed digit stays whole. */
.yVjhsKRBVFaXxEA7QaA1 [data-part="char"][data-digit] {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 82%, transparent);
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="digit-end"],
.yVjhsKRBVFaXxEA7QaA1 [data-part="strip"] {
  grid-area: 1 / 1;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="digit-end"] {
  visibility: hidden;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="strip"] {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: 0;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="strip"] > span {
  display: block;
  height: 1.2em;
}

.yVjhsKRBVFaXxEA7QaA1[data-play="playing"] [data-part="strip"] {
  top: calc(var(--_steps) * -1.2em);
  transition: top var(--_duration) cubic-bezier(0.22, 1, 0.36, 1) var(--_delay);
}

/* ---------- Label ---------- */

.yVjhsKRBVFaXxEA7QaA1 [data-part="label"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--_label);
  line-height: 1;
  font-weight: 600;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="icon"] {
  display: flex;
  flex: none;
  width: 1rem;
  height: 1rem;
  align-items: center;
  justify-content: center;
}

.yVjhsKRBVFaXxEA7QaA1 [data-part="icon"] :is(svg, img) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Link ---------- */

.yVjhsKRBVFaXxEA7QaA1:is(a):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.4rem;
  border-radius: 0.5rem;
}

@media (hover: hover) {
  .yVjhsKRBVFaXxEA7QaA1:is(a):hover [data-part="number"] {
    transform: translateY(-0.06em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yVjhsKRBVFaXxEA7QaA1 [data-part="number"] {
    transition: none;
  }
}

@media (max-width: 479px) {
  .yVjhsKRBVFaXxEA7QaA1 {
    gap: 0.5rem;
  }

  .yVjhsKRBVFaXxEA7QaA1 [data-part="number"] {
    font-size: var(--_number-mobile);
  }
}