/* ============================================================
   components/radar-chart.css
   Radar chart container
   ============================================================ */

.radar-chart {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.radar-chart canvas { width: 100% !important; height: 100% !important; }

.radar-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--font-sm);
  color: var(--text-mid);
}
.radar-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.radar-chart__legend-swatch { width: 12px; height: 12px; background: var(--primary); border-radius: var(--radius-sm); }

.radar-scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.radar-scores__item {
  text-align: center;
  padding: var(--space-3);
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.radar-scores__label { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: var(--space-1); }
.radar-scores__value { font-size: var(--font-xl); font-weight: 900; color: var(--primary); }