/* HYPERPART: metrics */
/* Promoted VERBATIM from Dazzle regions.css (Tier C-a, fleet
 * convergence). The Dazzle emitter contract is unchanged. */

/* ─────────────────────────── metrics region ─────────────────────
 * Responsive 1/2/4-col grid of KPI tiles. Each tile is plain (no
 * border — the dashboard slot owns card chrome) with a soft
 * background tint, label / value, and optional delta row.
 * Per-tile tone tinting travels with the component (moved verbatim
 * from Dazzle dz-tones.css, keyed off data-dz-tone). */

.dz-metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 40rem) {
  .dz-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .dz-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dz-metric-tile {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--colour-bg) 60%, transparent);
}

/* Tone tints (moved from Dazzle dz-tones.css with the component, #894).
 * Keyed off data-dz-tone; the [attr] selector out-specifies the base
 * rule above. neutral falls back to the base background. */
.dz-metric-tile[data-dz-tone="positive"] {
  background: color-mix(in oklab, var(--colour-success) 10%, transparent);
}
.dz-metric-tile[data-dz-tone="warning"] {
  background: color-mix(in oklab, var(--colour-warning) 10%, transparent);
}
.dz-metric-tile[data-dz-tone="destructive"] {
  background: color-mix(in oklab, var(--colour-danger) 10%, transparent);
}
.dz-metric-tile[data-dz-tone="accent"] {
  background: color-mix(in oklab, var(--colour-brand) 10%, transparent);
}

.dz-metric-label {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
  letter-spacing: -0.01em;
}

.dz-metric-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--colour-text);
  margin-block-start: 0.125rem;
  font-variant-numeric: tabular-nums;
}

.dz-metric-delta {
  margin-block-start: var(--space-xs);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}