/* docs/DESIGN_SYSTEM.md Section 10.5: a Card variant for a single
   headline number. .stat-tile itself needs no box-model rule of its
   own for the default (Secondary tier) -- statTileSpec builds that
   path via cardSpec (stat-tile.js), so card.css's .card already
   supplies background/border/radius/padding. Phase G.3
   (docs/DESIGN_SYSTEM_V2.md Section 5): the "supporting" tier skips
   cardSpec entirely (no individual chrome, see .stat-tile--supporting
   below), and block-progress-panel.js's own tiles share these exact
   classes with no tier modifier, so they inherit the Secondary-tier
   look below unchanged, by design (docs/DESIGN_SYSTEM_V2.md Section 0
   grounding note). */

.stat-tile__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
}

.stat-tile__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-data);
  margin-top: var(--space-1);
}

.stat-tile--landing .stat-tile__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.stat-tile__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--letter-spacing-data);
}

.stat-tile__trend--up {
  color: var(--color-success-text);
}

.stat-tile__trend--down {
  color: var(--color-danger-text);
}

/* Supporting tier (docs/DESIGN_SYSTEM_V2.md Section 5): dense,
   individually chrome-less -- the shared .supporting-strip container
   (supporting-strip.css) supplies the one border for the whole group. */
.stat-tile--supporting {
  flex: 1 1 150px;
  max-width: 280px;
  padding: var(--space-2);
}

.stat-tile--supporting .stat-tile__label {
  font-size: var(--font-size-xs);
}

.stat-tile--supporting .stat-tile__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

/* Phase G.3 Stage 5 (docs/DESIGN_SYSTEM_V2.md Section 8): one-shot
   value-update flash. Every page fully rebuilds its DOM on every poll
   (replaceChildren), so a freshly inserted node with this class
   already present DOES run the keyframe on insertion -- unlike a
   `transition`, which needs an existing element and a subsequent
   property change to animate from. If a future refactor changes
   rendering to a real DOM diff/patch (reusing nodes instead of
   recreating them), this animation-based approach will silently stop
   re-triggering for any reused node -- worth remembering if the flash
   ever appears to "stop working" after such a refactor. */
@keyframes stat-tile-flash {
  from {
    background-color: color-mix(in srgb, var(--color-live-accent) 25%, var(--color-surface));
  }
  to {
    background-color: var(--color-surface);
  }
}

.stat-tile--flash {
  animation: stat-tile-flash var(--duration-base) var(--ease-standard);
}