/* StatCard — tone, link, and the mono/tabular value contract.
 *
 * Base `.card` / `.card-label` / `.card-value` look lives in styles.css; this
 * file only adds rules styles.css does not already have. Colour, type, spacing,
 * radius and motion come only from tokens.css custom properties. No hex,
 * rgb(), hsl() or named colour literal lives here (transparent, currentColor
 * and inherit are allowed).
 */

.stat-card-label {
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.stat-card-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.card.tone-up .stat-card-value {
  color: var(--pos);
}

.card.tone-down .stat-card-value {
  color: var(--neg);
}

.card.tone-neutral .stat-card-value {
  color: var(--muted);
}

.card-link {
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-decoration: none;
  align-self: flex-start;
  margin-top: var(--space-1);
}

.card-link:hover {
  text-decoration: underline;
}

.card-link:visited {
  color: var(--accent);
}

/* ---- phone (MOBILE_PLAN.md §2.11 / P6) ------------------------------------
   StatCards stay two columns at every phone width: the auto-fit track fits
   two 136px columns inside the 320 content box (304px) and never lets one
   blow past its container (`min(136px, 100%)`). The value reads at
   --fs-value-phone (18px mono). Per-view stat grids (.wl2-stats,
   .hld-stats, .settings-live) are set by their wave-2 owners.

   `.cards.cards` (0,2,0) rather than `.cards` (0,1,0): views/dashboard.css
   paints the same element as `.dashboard-cards` with equal specificity and
   loads later, so a bare `.cards` phone rule would lose to its
   `minmax(0, 1fr)`. Wave D still owns `.dashboard-cards` and can win with a
   selector of its own if it needs a different track. */

@media (max-width: 767.98px) {
  .cards.cards {
    grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr));
  }

  .stat-card-value {
    font-size: var(--fs-value-phone);
  }
}