/* Stat
   A single metric: a large value with a label and an optional trend.
   Group stats in a .dp-stat-row. Status tone is set with data-tone on the
   trend. All colour and type come from tokens.css. */

.dp-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-6);
}

.dp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-1);
  min-width: 8rem;
}

.dp-stat-value {
  font-size: var(--dp-text-3xl);
  font-weight: var(--dp-weight-extrabold);
  line-height: 1;
  color: var(--dp-navy);
  font-variant-numeric: tabular-nums;
}

.dp-stat-label {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-muted);
}

.dp-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-1);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-text-muted);
}

.dp-stat-trend svg {
  width: 1em;
  height: 1em;
}

.dp-stat-trend[data-tone="up"] {
  color: var(--dp-success);
}

.dp-stat-trend[data-tone="down"] {
  color: var(--dp-danger);
}