/**
 * Live dashboard KPI grid — equal-height tile rows only.
 *
 * Apply ONLY on inner KPI/tile containers (.rmc-dh-tiles, .rmc-tiles, .metrics-grid).
 * Never on page roots (role-home shells, container-fluid, onboarding surfaces):
 * display:grid there turns every direct child into a grid cell and collapses layout.
 *
 * SSE binding uses data-rmc-live-surface on a stable page ancestor (see rmc-dashboard-live.js).
 */

.rmc-dashboard-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3, 0.75rem);
  align-items: stretch;
}

.rmc-dashboard-live-grid .kpi,
.rmc-dashboard-live-grid .rmc-metric-ticker__card,
.rmc-dashboard-live-grid .rmc-tile {
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rmc-dashboard-live-grid .value,
.rmc-dashboard-live-grid .rmc-tile__value,
[data-rmc-live-key] {
  min-height: 1.75rem;
  line-height: 1.75rem;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-fast, 150ms) var(--ease-standard, ease);
}

[data-rmc-live-key].rmc-live-updated {
  color: var(--brand-accent, var(--school-accent, #10b981));
}

.rmc-live-refreshed {
  font-size: var(--type-size-xs, 0.75rem);
  color: var(--text-muted, var(--color-text-muted));
}

@media (prefers-reduced-motion: reduce) {
  [data-rmc-live-key].rmc-live-updated {
    transition: none;
  }
}