/* ng-livenum.css — AURORA-X live numeric readouts (odometer / count-up / delta flash)
   Owned by ng-livenum.js. Purely additive: never touches ng-skins / ng-boot / brands.
   All colour comes from theme tokens (--ok / --crit / --x-cyan) so skins retint it. */

/* Every wired readout gets tabular figures so digit widths never jitter. */
.lnv{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* One rolling digit cell.
   clip-path (not overflow:hidden) is used deliberately: overflow!=visible moves an
   inline-block's baseline to its bottom margin edge, which would shift the whole
   readout vertically. clip-path clips descendants without touching baseline. */
.lnv-d{
  position: relative;
  display: inline-block;
  clip-path: inset(0 0);
}
/* The strip that slides. position:relative makes it the containing block for .lnv-b. */
.lnv-w{
  display: inline-block;
  position: relative;
}
.lnv-a{ display: inline-block; }
/* The incoming digit, parked one line above or below (top set inline by JS). */
.lnv-b{
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

/* ---- delta flash -------------------------------------------------------- */
/* Only colour + text-shadow are animated: both are layout-free, so the element's
   box cannot change size mid-flash. filter is left alone so the existing
   .tickers .grad-text drop-shadow survives. */
/* -up / -up-b are identical; ng-livenum.js alternates them so a back-to-back
   flash restarts the animation without a forced reflow. */
.lnv-up, .lnv-up-b{ animation: lnv-flash-up .5s ease-out 1; }
.lnv-dn, .lnv-dn-b{ animation: lnv-flash-dn .5s ease-out 1; }

@keyframes lnv-flash-up{
  0%   { color: var(--ok, #3ecf8e); text-shadow: 0 0 9px var(--ok, #3ecf8e); }
  22%  { color: var(--ok, #3ecf8e); text-shadow: 0 0 7px var(--ok, #3ecf8e); }
  100% { color: inherit;            text-shadow: none; }
}
@keyframes lnv-flash-dn{
  0%   { color: var(--crit, #ff4d6b); text-shadow: 0 0 9px var(--crit, #ff4d6b); }
  22%  { color: var(--crit, #ff4d6b); text-shadow: 0 0 7px var(--crit, #ff4d6b); }
  100% { color: inherit;              text-shadow: none; }
}

/* ---- sparkline draw-on -------------------------------------------------- */
/* A compositor-level wipe over the canvas. It does not touch the 2d context, so
   it never fights drawSpark()'s per-frame repaint. Runs once. */
.lnv-spark-in{
  animation: lnv-spark-wipe .7s cubic-bezier(.2,0,0,1) 1 both;
}
@keyframes lnv-spark-wipe{
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---- reduced motion ----------------------------------------------------- */
/* Non-negotiable: no motion at all. ng-livenum.js additionally short-circuits to
   plain-text writes, so nothing animates; this is the belt-and-braces half. */
@media (prefers-reduced-motion: reduce){
  .lnv-up, .lnv-dn, .lnv-up-b, .lnv-dn-b, .lnv-spark-in{ animation: none !important; }
  .lnv-b{ display: none !important; }
  .lnv-w{ transform: none !important; }
}