/* KSK – Diagramréteg (radar, jelmagyarázat, táblázatos alternatíva).
   Minden szín tokenből jön, ezért a diagram témát vált és nyomtatásban is
   látszik. A rajzoló kód (js/charts/radar.js) soha nem ír ki nyers hexet. */

.chart-block{display:flex;flex-direction:column;gap:12px}
.radar-svg{display:block;margin:0 auto;max-width:100%;height:auto}

/* A radar rétegei – az SVG csak osztályt kap, a színt itt adjuk. */
.radar-web{fill:none;stroke:var(--chart-grid);stroke-width:1}
.radar-axis{stroke:var(--chart-axis);stroke-width:1}
.radar-area{fill:var(--chart-series-fill);stroke:var(--chart-series-line);stroke-width:1.5}
.radar-dot{fill:var(--chart-series-line)}
.radar-dot.nodata{fill:none;stroke:var(--chart-nodata);stroke-width:1;stroke-dasharray:2 2}
.radar-label{fill:var(--chart-label);font-size:9px;font-family:var(--font-mono)}
.radar-label.nodata{fill:var(--chart-nodata);font-style:italic}
.radar-ring-val{fill:var(--chart-label);opacity:.65;font-size:7.5px;font-family:var(--font-mono)}

/* Jelmagyarázat */
.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.75rem;color:var(--text-muted);justify-content:center}
.chart-legend-item{display:flex;align-items:center;gap:5px}
.chart-legend-swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.chart-legend-swatch.line{background:var(--chart-series-line)}
.chart-legend-swatch.nodata{background:repeating-linear-gradient(45deg,var(--chart-nodata) 0 2px,transparent 2px 4px)}
.chart-scale-note{font-size:.72rem;color:var(--text-muted);text-align:center;font-family:var(--font-mono)}

/* Táblázatos alternatíva – minden ábrához kötelező (terv 8.5) */
.chart-table-toggle{
  background:none;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  color:var(--text-muted);font-size:.75rem;padding:4px 10px;align-self:center;
  font-family:var(--font-body);transition:var(--transition);
}
.chart-table-toggle:hover{border-color:var(--accent);color:var(--accent)}
.chart-table{width:100%;border-collapse:collapse;font-size:.79rem;margin-top:4px}
.chart-table th{text-align:left;color:var(--text-muted);font-weight:600;padding:4px 6px;border-bottom:1px solid var(--border-subtle);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.chart-table td{padding:4px 6px;border-bottom:1px solid var(--border-subtle);color:var(--text-secondary)}
.chart-table td.num{text-align:right;font-family:var(--font-mono)}
.chart-table .nodata{color:var(--text-muted);font-style:italic}