/* ─────────────────────────────────────────────────────────────────────
   Shared component layer — boxed stat card grid.

   Promoted from the one-off `.ledger-stat-card` (+ `-grid`, `-label`, `-value`)
   that lived in account/ledger.css. This is the canonical BOXED stat component
   (surface card per stat), distinct from the inline `.kpi-strip` pattern in
   patterns.css. Use `.dv-stat-card-grid` when you want each KPI in its own
   bordered card (e.g. the Ledger day summary); use `.kpi-strip` for the flat
   inline stat strip.

   Values are matched BYTE-FOR-BYTE to the former `.ledger-stat-*` rules so the
   Ledger page renders identically. Token-driven; @imported from application.css
   after components/header_band.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── Grid ─────────────────────────────────────────────────────────────
   5-up by default (the Ledger day summary). Callers can override
   grid-template-columns inline / page-scoped for other counts. */
.dv-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* ── Card shell ─────────────────────────────────────────────────────── */
.dv-stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* ── Label (uppercase eyebrow) ──────────────────────────────────────── */
.dv-stat-card-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Value (mono numeric) ───────────────────────────────────────────── */
.dv-stat-card-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-2);
  line-height: 1;
}

/* ── Interactive variant (gear registry category filter cards) ────────
   A stat card that IS the interaction: rendered as an <a>, the whole
   card toggles a filter / navigates. Hover strengthens the border;
   `.is-active` carries the selected state (accent border + ultra-soft
   tint — mirrors the selected-row treatment). Focus ring per DESIGN.md
   accessibility rules. */
.dv-stat-card--interactive {
  display: block;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 150ms cubic-bezier(0, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0, 0, 0.2, 1);
}
.dv-stat-card--interactive:hover { border-color: var(--hairline-strong); }
.dv-stat-card--interactive:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
.dv-stat-card--interactive.is-active {
  border-color: var(--accent);
  background: var(--accent-softer);
}

/* ── Sub line (one line of supporting data under the value, e.g.
   "3 new this month"). NOT decorative — carries a secondary metric. ──── */
.dv-stat-card-sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.dv-stat-card-sub strong { font-weight: 600; color: var(--ink); }
.dv-stat-card-sub a { color: var(--accent); font-weight: 500; }
.dv-stat-card-sub a:hover { text-decoration: underline; }

/* ── Column modifiers ────────────────────────────────────────────────
   The base grid is 5-up (Ledger day summary). These give the common
   responsive 4-up / 3-up layouts without per-call inline overrides. The
   full-width modifier is for a single emphasis stat. */
.dv-stat-card-grid--full { grid-template-columns: 1fr; }
.dv-stat-card-grid--4 { grid-template-columns: 1fr; }
.dv-stat-card-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .dv-stat-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-stat-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dv-stat-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}