/* Static HTML owns the dimensions and accessible value. These glyphs only
   paint over it during a finite roll; they cannot be selected or clicked. */
.od-odometer-host {
  --od-odometer-ready: 1;
  position: relative;
  font-variant-numeric: tabular-nums;
}

.od-odometer-result {
  flex: 1;
  min-inline-size: 0;
}

.od-odometer-visual {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  white-space: pre;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.od-odometer-literal::before {
  content: attr(data-od-text);
}

.od-odometer-wheel {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  /* Leave the inherited tight tracking intact while clipping vertical travel. */
  clip-path: inset(0 -.06em);
}

.od-odometer-wheel::before {
  content: attr(data-od-final);
  visibility: hidden;
}

.od-odometer-strip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  will-change: transform;
}

.od-odometer-cell {
  display: block;
  line-height: inherit;
}

.od-odometer-cell::before {
  content: attr(data-od-digit);
}

.od-odometer-host[data-odometer-running] > .od-odometer-truth {
  color: transparent;
}

.od-odometer-truth::selection {
  color: var(--od-black, #101011);
  background: var(--od-paper, #f6f0e4);
}

@media (prefers-reduced-motion: reduce) {
  .od-odometer-host[data-odometer-running] > .od-odometer-truth {
    color: inherit;
  }

  .od-odometer-visual {
    display: none;
  }
}