/* ══════════════════════════════════════════════════════════
   Charts — Visualization containers
   ══════════════════════════════════════════════════════════ */

.chart-section {
  margin-bottom: var(--s4);
}
.chart-section .chart-title {
  font-size: 0.88rem; font-weight: 600; color: var(--text);
  margin-bottom: var(--s1);
}
.chart-section .chart-subtitle {
  font-size: 0.78rem; color: var(--text-3); margin-bottom: var(--s4);
}

.chart-container {
  position: relative;
  width: 100%;
}
.chart-container canvas {
  width: 100% !important;
  height: auto !important;
}

/* Gauge row — two side by side */
.gauge-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-bottom: var(--s4);
}
@media (max-width: 600px) { .gauge-row { grid-template-columns: 1fr; } }

.gauge-wrapper {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s5) var(--s4);
  text-align: center;
}
.gauge-wrapper .gauge-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3); margin-bottom: var(--s2);
}
.gauge-wrapper .gauge-value {
  font-size: 1.6rem; font-weight: 800; color: var(--text);
  margin-top: var(--s1);
}

/* Heatmap — 3x3 category matrix */
.heatmap-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  grid-template-rows: auto repeat(3, 1fr);
  gap: 3px;
  max-width: 400px;
  margin: 0 auto;
}

.heatmap-header {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s2);
}
.heatmap-header.corner { background: transparent; }

.heatmap-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  font-size: 1.1rem; font-weight: 800; color: var(--text-inv);
  transition: all var(--dur) var(--ease);
  cursor: default;
  position: relative;
}
.heatmap-cell.c1 { background: var(--green); }
.heatmap-cell.c2 { background: var(--amber); }
.heatmap-cell.c3 { background: var(--orange); }
.heatmap-cell.c4 { background: var(--red); }

.heatmap-cell.active {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px currentColor;
  z-index: 2;
}
.heatmap-cell.active::after {
  content: '';
  position: absolute; inset: -6px;
  border: 2px solid currentColor;
  border-radius: calc(var(--r-sm) + 4px);
  animation: heatmapPulse 1.5s infinite;
}
@keyframes heatmapPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.15); }
}