/* ================================================================
   Resayil — Number counter (Phase 24.12 Plan 11)
   ----------------------------------------------------------------
   Styling shell for `[data-rs-count]` tweened KPI numbers.

   Goals:
     1. Tabular-nums so the element width doesn't jitter while the
        digit count climbs (0 -> 1,247,892 would otherwise reflow the
        card header on every frame).
     2. Optional `.rs-count-counting` hook for mid-tween CSS effects
        (consumers can add a subtle sheen, glow, etc.).
     3. Prefix / suffix span normalisation — when rs-count.js emits
        `<span class="rs-count-prefix">$</span>` or similar inline
        decorators, they should inherit weight and colour from the
        parent KPI value so they don't look out of place.
     4. Reduced-motion safety — redundant belt-and-braces to the JS
        bail-out; ensures any transition/animation author-defined on
        `[data-rs-count]` is neutralised when the OS prefers reduced
        motion.
   ================================================================ */

[data-rs-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: inherit;
}

/* Applied by rs-count.js while the tween is in flight; consumers may
   layer subtle visual effects here (e.g. a shimmer) without touching
   the JS. Intentionally empty in the base stylesheet. */
[data-rs-count].rs-count-counting {
  /* Optional styling hook for mid-tween state */
}

.rs-count-prefix,
.rs-count-suffix {
  display: inline-block;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Respect OS-level reduced-motion preference. The JS already skips
   the tween in that case, but if any parent stylesheet attaches a
   CSS transition to `[data-rs-count]`, neutralise it here too. */
@media (prefers-reduced-motion: reduce) {
  [data-rs-count] {
    transition: none !important;
    animation: none !important;
  }
}