/*
 * requirement/25-Test-Reporting-And-Matrices.md — the one shape nothing
 * else in this app renders: a color-coded grid/heatmap table. Extends
 * .data-table's look (tables.css) rather than replacing it — matrix-grid
 * only adds the per-cell coloring and centering a heatmap needs.
 */
.matrix-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.matrix-grid th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.matrix-grid td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.matrix-grid .matrix-cell {
  text-align: center;
  font-weight: 600;
  border-radius: var(--radius-sm);
}