/* counter
   Split from the single v22 stylesheet. Everything here is scoped to
   .card.counter and this form's own class prefix (rule 14: a change made for one
   card form is scoped to that form, by class). */
/* ------------------------------------------------------------------ *
   The Counter
 * ------------------------------------------------------------------ */
.card.counter .vizsec{padding:22px 0}
.ctr{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:0 15px}

/* The live total, the largest thing on the card. Sat 25px lower than centre:
   the label above it and the two methodology lines below are not symmetrical
   weights, and optically centring the group means sitting it below the
   geometric middle. */
.ctr-live{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;
  gap:9px;padding-top:50px}
.ctr-runlab{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;text-transform:none}
/* Sized against the widest value it can reach, not the value it starts at.
   A counter gains digits while you watch it, so the ceiling is measured: at
   58px "$12,345,678" sets on one line in the 336px the panel gives it, and at
   60px it does not. The vw term only scales for narrower devices -- the size
   never changes because a digit was added, so the number cannot shrink or
   reflow mid-count.

   The element is a full-width block in a stretch column, so its box does not
   resize as the string grows and nothing around it can move. tabular-nums
   equalises the digits; the comma is narrower than a digit, which is what
   font-feature-settings pins. */
.ctr-acc{display:block;width:100%;
  font-size:clamp(40px,14.7vw,58px);font-weight:700;line-height:1;letter-spacing:-.03em;
  white-space:nowrap;color:var(--stance);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}
/* A brief lift as it starts, on the number only -- the card behind it does not
   move, and nothing here loops. */
.ctr-acc.accruing{animation:ctrwake .9s cubic-bezier(.22,.9,.3,1) both}
.ctr-rate{margin-top:5px;font-size:16px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ctr-day{font-size:14px;color:var(--muted);letter-spacing:0;text-transform:none}

/* Where the figure comes from, and that it is an average. */
.ctr-foot{padding-top:18px;display:flex;flex-direction:column;gap:3px}
.ctr-basis{font-size:12.5px;color:var(--muted);letter-spacing:0;text-transform:none}
.ctr-note{font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .ctr-acc.accruing{animation:none}
}