/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — SIGNAL READOUT
   The infographic / figure library. Every way the site shows a number, on one
   base. One base (.wr-stat) + composable variant modifiers — numerals, plates,
   meters, trends, comparisons and broadcast-native readouts.
   Sora · #0D0A07 #FFD800 #F04923 #F2F2F2 · gradient yellow→orange, never reversed.
   Built on Signal Core tokens in global.css.
   ============================================================================ */

/* Angle / progress drivers for the conic meters and lapping edges. */
@property --wr-stat-arc  { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --wr-stat-fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ----------------------------------------------------------------------------
   BASE — .wr-stat
   A figure block. Surface-agnostic: reads --stat-* theme vars set by the host
   so the same readout sits on light or dark. --stat-stage = the colour of the
   surface behind it (used to punch the hole in rings / gauges).
   -------------------------------------------------------------------------- */
.wr-stat {
  --stat-fg:     var(--wr-black);
  --stat-soft:   #0D0A07A6;
  --stat-muted:  #0D0A0773;
  --stat-line:   var(--wr-black-15);
  --stat-track:  #0D0A0714;
  --stat-stage:  var(--wr-white);
  --stat-accent: var(--wr-orange);
  position: relative;
  font-family: var(--wr-font);
  color: var(--stat-fg);
  line-height: 1;
  text-align: left;
}
.wr-stat--center { text-align: center; }

/* The big figure */
.wr-stat__num {
  display: inline-flex;
  align-items: flex-start;
  font-weight: 800;
  font-size: 64px;
  letter-spacing: -0.035em;
  line-height: 0.86;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.wr-stat__suffix { font-size: 0.5em; font-weight: 800; margin-left: 0.04em; transform: translateY(0.08em); }
.wr-stat__pre    { font-size: 0.5em; font-weight: 800; margin-right: 0.06em; transform: translateY(0.08em); }

/* The wide-tracked label, broadcast voice. Sits as its own block so a figure
   and its label read as one unit of equal width; balanced wrapping. */
.wr-stat__label {
  display: block;
  margin-top: 18px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.13em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--stat-muted);
  text-wrap: balance;
}
.wr-stat--center .wr-stat__label { margin-left: auto; margin-right: auto; }

/* Shared lead row — the figure sits BESIDE its graphic; the label then spans
   the full width underneath. Keeps number↔visual paired and labels balanced. */
.wr-stat__lead { display: flex; align-items: flex-end; gap: 20px; }
/* A small kicker above the figure */
.wr-stat__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px var(--drop-mono);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--stat-muted); margin-bottom: 16px;
}
.wr-stat__kicker::before { content: ''; width: 22px; height: 2px; background: var(--wr-grad); }

/* Gradient figure — the brand fill, reused by many variants */
.wr-stat__num--grad {
  background: var(--wr-grad-diag);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   01–03 · NUMERALS — the hero big-number, elevated
   ════════════════════════════════════════════════════════════════════════ */

/* 01 · Gradient Slab — the brand's house big number (elevates the reference).
   Number, label and the gradient rule form one left-aligned block of equal
   width; the rule spans the full width beneath the text. */
.wr-stat--slab { display: inline-flex; flex-direction: column; align-items: stretch; }
.wr-stat--slab .wr-stat__num {
  font-size: 84px;
  background: var(--wr-grad-diag);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wr-stat--slab .wr-stat__label { margin-top: 15px; }
.wr-stat--slab .wr-stat__rule {
  display: block; margin-top: 16px; height: 3px; width: 100%;
  background: var(--wr-grad); border-radius: 999px;
}

/* 02 · Bracket — camera framing corners around a centred figure */
.wr-stat--bracket { display: inline-flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 30px; }
.wr-stat--bracket .wr-stat__num { color: var(--stat-fg); }
.wr-stat--bracket::before, .wr-stat--bracket::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  border: 2.5px solid var(--wr-orange);
}
.wr-stat--bracket::before { top: 0; left: 0; border-width: 2.5px 0 0 2.5px; }
.wr-stat--bracket::after  { top: 0; right: 0; border-width: 2.5px 2.5px 0 0; }
.wr-stat--bracket .wr-stat__label { position: static; }
.wr-stat--bracket .wr-stat__frame-bl,
.wr-stat--bracket .wr-stat__frame-br { position: absolute; width: 18px; height: 18px; border: 2.5px solid var(--wr-orange); }
.wr-stat--bracket .wr-stat__frame-bl { bottom: 0; left: 0; border-width: 0 0 2.5px 2.5px; }
.wr-stat--bracket .wr-stat__frame-br { bottom: 0; right: 0; border-width: 0 2.5px 2.5px 0; }

/* 03 · Marquee — oversized figure scaled so the number matches the label
   width; the label sits as an equal-width block directly beneath. */
.wr-stat--marquee { display: inline-flex; flex-direction: column; align-items: stretch; }
.wr-stat--marquee .wr-stat__num {
  font-size: 88px; letter-spacing: -0.05em; line-height: 0.8;
  background: var(--wr-grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wr-stat--marquee .wr-stat__label { margin-top: 14px; font-size: 13px; }

/* ════════════════════════════════════════════════════════════════════════
   04–08 · PLATES & CARDS — framed figures, broadcast surfaces
   ════════════════════════════════════════════════════════════════════════ */
.wr-stat--glass, .wr-stat--spark, .wr-stat--frame,
.wr-stat--bcard, .wr-stat--spotlight {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; min-width: 230px; min-height: 176px;
  padding: 28px; border-radius: var(--wr-radius-card);
}

/* 04 · Glass — frosted figure for image / dark surfaces */
.wr-stat--glass {
  --stat-fg: var(--wr-white); --stat-muted: var(--wr-white-45);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--wr-glass-border);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.wr-stat--glass .wr-stat__num {
  background: var(--wr-grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 05 · Edge Spark — dark card carrying the lapping logo arc */
.wr-stat--spark {
  --stat-fg: var(--wr-white); --stat-muted: var(--wr-white-45);
  background: #0A0705; border: 1px solid #FFFFFF14; isolation: isolate;
}
.wr-stat--spark .wr-stat__num {
  background: var(--wr-grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wr-stat--spark::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--wr-stat-arc),
    transparent 0 56%, var(--wr-yellow) 72%, #FFF1B8 79%, var(--wr-orange) 87%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: wrStatArc 3.4s linear infinite;
}
.wr-stat--spark::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  box-shadow: 0 0 26px -6px #F0492359, 0 0 13px -4px #FFD80044;
}

/* 06 · Gradient Frame — hairline gradient border, hollow centre */
.wr-stat--frame {
  border: 1.6px solid transparent;
  background:
    linear-gradient(var(--stat-stage), var(--stat-stage)) padding-box,
    var(--wr-grad-diag) border-box;
}
.wr-stat--frame .wr-stat__num { color: var(--stat-fg); }

/* 07 · Bracket Card — broadcast corner brackets that snap in on hover */
.wr-stat--bcard {
  border: 1px solid var(--stat-line); background: transparent;
}
.wr-stat--bcard .wr-stat__num { color: var(--stat-fg); }
.wr-stat--bcard::before, .wr-stat--bcard::after {
  content: ''; position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--wr-orange);
  opacity: 0; transition: opacity 0.3s var(--wr-ease-out), transform 0.4s var(--wr-ease-spring);
}
.wr-stat--bcard::before { top: -1px; left: -1px; border-width: 2.5px 0 0 2.5px; border-top-left-radius: var(--wr-radius-card); transform: translate(8px,8px); }
.wr-stat--bcard::after  { bottom: -1px; right: -1px; border-width: 0 2.5px 2.5px 0; border-bottom-right-radius: var(--wr-radius-card); transform: translate(-8px,-8px); }
.wr-stat--bcard:hover::before, .wr-stat--bcard:hover::after { opacity: 1; transform: translate(0,0); }

/* 08 · Spotlight — radial brand glow blooms behind the figure on dark */
.wr-stat--spotlight {
  --stat-fg: var(--wr-white); --stat-muted: var(--wr-white-45);
  background: #0A0705; border: 1px solid #FFFFFF12; overflow: hidden;
}
.wr-stat--spotlight::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 60% at 50% 52%, #F0492359, #FFD8001F 44%, transparent 72%);
  filter: blur(6px);
}
.wr-stat--spotlight .wr-stat__num { position: relative; color: var(--wr-white); }

/* ════════════════════════════════════════════════════════════════════════
   09–15 · METERS — progress & proportion
   ════════════════════════════════════════════════════════════════════════ */
.wr-stat--ring, .wr-stat--gauge, .wr-stat--arc { display: inline-flex; flex-direction: column; align-items: center; }

/* 09 · Ring — conic gradient progress ring, value in the core */
.wr-stat__ring {
  position: relative; width: 138px; height: 138px; border-radius: 50%;
  background: conic-gradient(from -90deg, var(--wr-yellow), var(--wr-orange) var(--wr-stat-fill), var(--stat-track) 0);
  display: grid; place-items: center;
  transition: --wr-stat-fill 1.1s var(--wr-ease-out);
}
.wr-stat__ring-hole { position: absolute; inset: 14px; border-radius: 50%; background: var(--stat-stage); }
.wr-stat__ring-val { position: relative; z-index: 1; font-weight: 800; font-size: 34px; letter-spacing: -0.03em; color: var(--stat-fg); font-variant-numeric: tabular-nums; }
.wr-stat--ring .wr-stat__label { margin-top: 16px; text-align: center; }
/* Shimmer — a gradient sheen sweeps across once as the ring fills (not a loop) */
.wr-stat__ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  background-size: 230% 100%; background-position: 175% 0;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
          mask: radial-gradient(closest-side, transparent calc(100% - 14px), #000 calc(100% - 14px));
  mix-blend-mode: screen;
}
.wr-stat.is-live .wr-stat__ring::before { animation: wrStatSheen 1.2s var(--wr-ease-out) 0.35s both; }

/* 10 · Gauge — broadcast semicircle meter */
.wr-stat__gauge {
  position: relative; width: 168px; height: 90px; overflow: hidden;
  border-radius: 168px 168px 0 0;
  background: conic-gradient(from 270deg at 50% 100%,
    var(--wr-yellow), var(--wr-orange) calc(var(--wr-stat-fill) * 1.8), var(--stat-track) 0 180deg, transparent 0);
  transition: --wr-stat-fill 1.1s var(--wr-ease-out);
}
.wr-stat__gauge-hole { position: absolute; inset: 20px 20px 0; border-radius: 168px 168px 0 0; background: var(--stat-stage); }
.wr-stat__gauge-val { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; z-index: 1; font-weight: 800; font-size: 30px; letter-spacing: -0.03em; color: var(--stat-fg); }
.wr-stat--gauge .wr-stat__label { margin-top: 14px; text-align: center; }
/* Shimmer — a gradient sheen sweeps across once as the gauge fills */
.wr-stat__gauge::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  background-size: 230% 100%; background-position: 175% 0;
  -webkit-mask: radial-gradient(84px at 50% 100%, transparent 63px, #000 64px);
          mask: radial-gradient(84px at 50% 100%, transparent 63px, #000 64px);
  mix-blend-mode: screen;
}
.wr-stat.is-live .wr-stat__gauge::before { animation: wrStatSheen 1.2s var(--wr-ease-out) 0.35s both; }

/* 11 · Bar — big figure on the left; a right column stacks the track and a
   one-line label of the same width. */
.wr-stat--bar { min-width: 286px; }
.wr-stat--bar .wr-stat__lead { display: flex; align-items: center; gap: 20px; }
.wr-stat--bar .wr-stat__num { font-size: 58px; color: var(--stat-fg); line-height: 0.9; flex: none; }
.wr-stat__barcol { flex: 1; display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.wr-stat--bar .wr-stat__track { height: 10px; border-radius: 999px; background: var(--stat-track); overflow: hidden; }
.wr-stat--bar .wr-stat__track i { display: block; height: 100%; width: var(--pct, 70%); background: var(--wr-grad); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--wr-ease-out); }
.wr-stat.is-live.wr-stat--bar .wr-stat__track i { transform: scaleX(1); }
.wr-stat--bar .wr-stat__label { margin-top: 0; white-space: nowrap; }

/* 12 · Dots — figure and proportion grid at the same scale, pinned to the two
   ends so the row spans the label width. */
.wr-stat--dots { display: inline-flex; flex-direction: column; align-items: stretch; }
.wr-stat--dots .wr-stat__lead { align-items: center; justify-content: space-between; gap: 18px; }
.wr-stat--dots .wr-stat__num { font-size: 60px; color: var(--stat-fg); flex: none; }
.wr-stat__dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 72px; flex: none; }
.wr-stat__dots span { aspect-ratio: 1; border-radius: 50%; background: var(--stat-track); }
.wr-stat--dots .wr-stat__label { margin-top: 18px; }

/* 13 · Signal — figure scaled to the bars' height; bars flex to fill the row. */
.wr-stat--signal { display: inline-flex; flex-direction: column; align-items: stretch; }
.wr-stat--signal .wr-stat__lead { gap: 18px; align-items: flex-end; }
.wr-stat__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; flex: 1; }
.wr-stat__bars i { flex: 1; border-radius: 999px; background: var(--stat-track); }
.wr-stat__bars i.is-on { background: var(--wr-grad-vert); }
.wr-stat__bars i:nth-child(1) { height: 28%; }
.wr-stat__bars i:nth-child(2) { height: 46%; }
.wr-stat__bars i:nth-child(3) { height: 64%; }
.wr-stat__bars i:nth-child(4) { height: 82%; }
.wr-stat__bars i:nth-child(5) { height: 100%; }
.wr-stat--signal .wr-stat__num { font-size: 56px; color: var(--stat-fg); line-height: 0.92; flex: none; }
.wr-stat--signal .wr-stat__label { margin-top: 18px; }

/* 14 · Column — figure scaled toward the thermometer height; pinned to the
   two ends so the row spans the label width. */
.wr-stat--column { display: inline-flex; flex-direction: column; align-items: stretch; }
.wr-stat--column .wr-stat__lead { gap: 18px; align-items: flex-end; justify-content: space-between; }
.wr-stat__col { position: relative; width: 26px; height: 70px; border-radius: 999px; background: var(--stat-track); overflow: hidden; }
.wr-stat__col i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--pct, 60%); background: var(--wr-grad-vert); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--wr-ease-out); }
.wr-stat.is-live .wr-stat__col i { transform: scaleY(1); }
.wr-stat--column .wr-stat__num { font-size: 58px; color: var(--stat-fg); line-height: 0.92; }
.wr-stat--column .wr-stat__label { margin-top: 18px; }

/* 15 · Arc — three-quarter dashboard dial */
.wr-stat__arc {
  position: relative; width: 150px; height: 150px; display: grid; place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 135deg,
    var(--wr-yellow), var(--wr-orange) calc(var(--wr-stat-fill) * 2.7), var(--stat-track) 0 270deg, transparent 0 360deg);
  transition: --wr-stat-fill 1.1s var(--wr-ease-out);
}
.wr-stat__arc-hole { position: absolute; inset: 16px; border-radius: 50%; background: var(--stat-stage); }
.wr-stat__arc-val { position: relative; z-index: 1; font-weight: 800; font-size: 30px; color: var(--stat-fg); letter-spacing: -0.03em; }
.wr-stat--arc .wr-stat__label { margin-top: 12px; text-align: center; }
/* Shimmer — a gradient sheen sweeps across once as the dial fills */
.wr-stat__arc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(120deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  background-size: 230% 100%; background-position: 175% 0;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
          mask: radial-gradient(closest-side, transparent calc(100% - 16px), #000 calc(100% - 16px));
  mix-blend-mode: screen;
}
.wr-stat.is-live .wr-stat__arc::before { animation: wrStatSheen 1.2s var(--wr-ease-out) 0.35s both; }

/* ════════════════════════════════════════════════════════════════════════
   16–19 · TRENDS — figure + live data
   ════════════════════════════════════════════════════════════════════════ */
.wr-stat--sparkline, .wr-stat--area, .wr-stat--wave, .wr-stat--pulse { min-width: 232px; }
.wr-stat--sparkline .wr-stat__num,
.wr-stat--area .wr-stat__num,
.wr-stat--wave .wr-stat__num,
.wr-stat--pulse .wr-stat__num { font-size: 44px; color: var(--stat-fg); }

/* 16 · Sparkline — figure + mini gradient line */
.wr-stat__chart { display: block; width: 100%; height: 56px; margin-top: 16px; overflow: visible; }
.wr-stat__chart .wr-stat__line { fill: none; stroke: url(#wrStatGrad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wr-stat__chart .wr-stat__fillarea { fill: url(#wrStatArea); stroke: none; }
.wr-stat__chart .wr-stat__dot-end { fill: var(--wr-orange); }

/* 18 · Wave — live audio meter (animated bars) */
.wr-stat__vu { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 16px; }
.wr-stat__vu i { flex: 1; height: 100%; border-radius: 999px; background: var(--wr-grad-vert); transform-origin: bottom; transform: scaleY(0.4); animation: wrStatVU 1.1s var(--wr-ease-out) infinite; }

/* 19 · Pulse — broadcast ECG line, live */
.wr-stat--pulse .wr-stat__row { display: flex; align-items: center; gap: 12px; }
.wr-stat__live { display: inline-flex; align-items: center; gap: 7px; font: 600 10px var(--drop-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--stat-muted); }
.wr-stat__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-orange); box-shadow: 0 0 0 0 #F0492399; animation: wrStatRec 1.6s var(--wr-ease-out) infinite; }
.wr-stat__ecg { display: block; width: 100%; height: 50px; margin-top: 14px; }
.wr-stat__ecg path { fill: none; stroke: url(#wrStatGrad); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: wrStatTrace 2.6s var(--wr-ease-out) infinite; }

/* ════════════════════════════════════════════════════════════════════════
   20–22 · COMPARISON & GROUPS
   ════════════════════════════════════════════════════════════════════════ */

/* 20 · Pair — two figures + centre divider */
.wr-stat--pair { display: flex; align-items: center; gap: 28px; }
.wr-stat--pair .wr-stat__cell { flex: 1; }
.wr-stat--pair .wr-stat__num { font-size: 46px; color: var(--stat-fg); }
.wr-stat--pair .wr-stat__cell:first-child .wr-stat__num {
  background: var(--wr-grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wr-stat--pair .wr-stat__div { width: 1px; align-self: stretch; background: var(--stat-line); }
.wr-stat--pair .wr-stat__label { margin-top: 12px; font-size: 11px; }

/* 21 · Range — number + label share the top line; min–max track below */
.wr-stat--range { min-width: 252px; }
.wr-stat__rangetop { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.wr-stat--range .wr-stat__num { font-size: 42px; color: var(--stat-fg); flex: none; }
.wr-stat--range .wr-stat__label { margin-top: 0; }
.wr-stat__range { position: relative; height: 6px; border-radius: 999px; background: var(--stat-track); }
.wr-stat__range::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 50%); background: var(--wr-grad); border-radius: 999px; }
.wr-stat__range i { position: absolute; top: 50%; left: var(--pct, 50%); width: 16px; height: 16px; border-radius: 50%; background: var(--wr-white); border: 3px solid var(--wr-orange); transform: translate(-50%,-50%); box-shadow: var(--wr-shadow-sm); }
.wr-stat__ends { display: flex; justify-content: space-between; margin-top: 10px; font: 600 10.5px var(--drop-mono); letter-spacing: 0.08em; color: var(--stat-muted); }
.wr-stat--range .wr-stat__label { margin-top: 14px; }

/* 22 · Stack — labelled rows with mini bars */
.wr-stat--stack { min-width: 252px; display: flex; flex-direction: column; gap: 14px; }
.wr-stat__line-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.wr-stat__line-row .k { font: 600 11.5px var(--drop-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stat-muted); }
.wr-stat__line-row .v { font-weight: 800; font-size: 17px; color: var(--stat-fg); font-variant-numeric: tabular-nums; }
.wr-stat__line-row .t { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--stat-track); overflow: hidden; }
.wr-stat__line-row .t i { display: block; height: 100%; width: var(--pct, 60%); background: var(--wr-grad); border-radius: 999px; }

/* ════════════════════════════════════════════════════════════════════════
   23–24 · BROADCAST-NATIVE
   ════════════════════════════════════════════════════════════════════════ */

/* 23 · Scoreboard — segmented arena readout */
.wr-stat--scoreboard {
  --stat-fg: var(--wr-white);
  display: inline-flex; align-items: stretch; border-radius: 12px; overflow: hidden;
  background: #0A0705; border: 1px solid #FFFFFF14;
}
.wr-stat__score-cell { padding: 26px 32px; display: flex; flex-direction: column; gap: 12px; }
.wr-stat__score-cell + .wr-stat__score-cell { border-left: 1px solid #FFFFFF14; }
.wr-stat__score-cell .k { font: 600 9.5px var(--drop-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--wr-white-45); }
.wr-stat__score-cell .v { font: 800 40px var(--drop-mono); letter-spacing: 0.02em; color: var(--wr-yellow); line-height: 1; }
.wr-stat__score-cell.is-accent .v { color: var(--wr-orange); }

/* 24 · Timecode — live ticking SMPTE readout */
.wr-stat--timecode { display: inline-flex; flex-direction: column; }
.wr-stat__tc {
  display: inline-flex; align-items: center; gap: 4px;
  font: 800 38px var(--drop-mono); letter-spacing: 0.02em; color: var(--stat-fg);
}
.wr-stat__tc .ff { color: var(--wr-orange); }
.wr-stat__tc .sep { color: var(--stat-muted); }
.wr-stat--timecode .wr-stat__label { margin-top: 16px; }

/* ════════════════════════════════════════════════════════════════════════
   SHARED KEYFRAMES
   ════════════════════════════════════════════════════════════════════════ */
@keyframes wrStatArc  { to { --wr-stat-arc: 360deg; } }
@keyframes wrStatSheen { 0% { opacity: 0; background-position: 175% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: -45% 0; } }
@keyframes wrStatRec  { 0% { box-shadow: 0 0 0 0 #F0492399; } 70% { box-shadow: 0 0 0 8px #F0492300; } 100% { box-shadow: 0 0 0 0 #F0492300; } }
@keyframes wrStatTrace { 0% { stroke-dashoffset: 400; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes wrStatVU    { 0%,100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }

/* ── Reduced motion: hold the end state, drop the loops ── */
@media (prefers-reduced-motion: reduce) {
  .wr-stat--spark::before, .wr-stat__live i, .wr-stat__ecg path, .wr-stat__vu i,
  .wr-stat__ring::before, .wr-stat__gauge::before, .wr-stat__arc::before { animation: none !important; }
  .wr-stat__ring::before, .wr-stat__gauge::before, .wr-stat__arc::before { opacity: 0; }
  .wr-stat__ecg path { stroke-dashoffset: 0; }
  .wr-stat__vu i { transform: scaleY(0.8); }
  .wr-stat__ring, .wr-stat__gauge, .wr-stat__arc { transition: none; }
}