/* ============================================================================
   ANIMATED NUMBER (`.num`) — shared value-transition for UTILITY counts
   (toolbar "Nalezeno N dokumentů", facet counts, the pager label). The number
   changes as a REACTION to user action, so the vocabulary is a short, quiet
   transition — never a long count-up from zero.

   MOTION ⊥ EFFECT (JS enums, see _num.js / _num.config.js — and ⊥ timing):
     motions   none · roll (vertical odometer) · slide (horizontal) ·
               digits (per-digit roll, paired from the right) · digits-slide
               (per-digit horizontal, staggered from the entering edge) ·
               count (1/2/5 ladder) · count-1 (strict ±1)
     effects   none · fade · blur · heat (directional colour flash + slower
               cooldown; intensity follows the change size unless
               --num-heat-scale: off; colours per consumer via tokens)

   GEOMETRY: `.num__in` (content wrapper) carries the clip AND the width glide
   oldW → newW — content-relative, NEVER host-box-relative (hosts can be
   blockified flex items far wider than the digits; see notes/pitfalls.md).
   Consumers that reserve their slot (min-width ghost sizer) simply don't move.

   TOKEN DEFAULTS live on :root (NOT on .num): custom props inherit, so a
   consumer can tune a whole region from an ANCESTOR — deliberate inverse of
   the --qt-* on-the-element pattern (Num hosts are many tiny spans).

   Resting state = plain committed text (end-state-as-base rule): scaffolding
   exists only while `.is-numming`. clip-path (not overflow) does the clipping
   — no scroll container, no baseline shift. Load _num.js after this file.
   See notes/decisions.md "Animated number".
   ============================================================================ */

@layer tokens {
  :root {
    /* SETTLED DEFAULTS (Jun 2026) — mirror the `deliberate` preset: utility
       counts across the system default to per-digit + fade at this pace. */
    --num-dur: 560ms;  /* @kind other */         /* roll / slide / fade / glide duration */
    --num-dy: auto;                              /* vertical travel; auto = the line box height */
    --num-ease: cubic-bezier(0.22, 1, 0.36, 1);  /* smooth out */
    --num-stag: 70ms;  /* @kind other */         /* per-digit stagger */
    --num-count-dur: 1500ms;                     /* count / count-1: ladder duration */
    --num-count-pow: 3.5;                        /* count: ease-out exponent */
    --num-heat-dur: 1600ms;                      /* heat: flash + cooldown total */
    --num-heat-up: #c0392b;                      /* heat: colour for increases (hot) */
    --num-heat-down: #2563c4;                    /* heat: colour for decreases (cold) */
    --num-heat-scale: on;                        /* 'off' = full blend regardless of Δ */
    --num-limit-color: var(--gov-color-error-500, #b3261e);  /* limit/threshold state colour */
    --num-limit-dur: 1100ms;                     /* limit flash + cooldown total */
    --num-limit-amp: 4px;                        /* limit motion amplitude (shake peak; elastic apex = 2×) */
    --num-limit-ease: auto;                      /* limit motion easing — shake profile / elastic RETURN; auto = per-motion default */
  }
}

@layer components {
  .num {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    vertical-align: baseline;
  }

  /* Scaffolding root — exists only while animating. Carries the clip and the
     width glide, so clipping is CONTENT-relative even on block/flex hosts. */
  .num__in {
    display: inline-block; position: relative;
    white-space: pre; clip-path: inset(0);
  }
  /* whole-number mover (roll / slide / fade-in-place) */
  .num__txt { display: inline-block; white-space: pre; }
  .num__ghost {
    position: absolute; top: 0;
    white-space: pre; pointer-events: none;
  }

  /* digits: the paired (least-significant) columns live in one in-flow tail
     wrapper — on a length change _num.js slides it from the old layout to the
     new one while the width glides. Cells self-clip so horizontal per-digit
     travel never overlaps the neighbouring column. */
  .num__tail { display: inline-block; position: relative; white-space: pre; }
  .num__cell {
    display: inline-block; position: relative;
    white-space: pre; clip-path: inset(0);
  }
  .num__cv { display: inline-block; white-space: pre; }
  .num__cg {
    position: absolute; left: 0; top: 0;
    white-space: pre; pointer-events: none;
  }

  /* exiting leading segment (old number was longer) — glued to the tail's
     left edge, rides its slide and exits while the box narrows over it. */
  .num__lead {
    position: absolute; right: 100%; top: 0;
    white-space: pre; pointer-events: none;
  }

  /* limit / threshold ("zero animation") — hold state classes managed by
     _num.js: .num--limited arms the colour transition on configured hosts,
     .num--limit / .num--limit-w persist while the condition holds. !important
     is deliberate (alarm state): host colour is usually owned by component or
     page rules (.nx-tile__fig, .filter-item .ct) that would otherwise win. */
  .num--limited { transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1); }
  .num--limit { color: var(--num-limit-color, #b3261e) !important; }
  .num--limit-w { font-weight: 700 !important; }
}