/* =========================================================================
   Server-rendered charts (components/charts.html): radar, gauge, bar list,
   distribution bar, heat grid. Values are always printed as text — colour is
   never the only carrier of meaning.
   ========================================================================= */

.chart { margin: 0; min-width: 0; }
.chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.chart__title { margin: 0; font-size: var(--fs-lg); }
.chart__desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-muted); }
.chart svg { display: block; overflow: visible; }
.chart text { font-family: var(--font-sans); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); list-style: none; padding: 0; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__line { width: 22px; height: 0; border-top: 3px solid var(--chart-1); border-radius: 2px; }
.chart-legend__line--2 { border-top: 3px dashed var(--chart-2); }
.chart-legend__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--sw, var(--chart-1)); flex: none; }

/* ---------- Sequential fills 0..5 ---------- */
.seq-0 { --sq: var(--seq-0); --sq-ink: var(--ink); }
.seq-1 { --sq: var(--seq-1); --sq-ink: var(--ink); }
.seq-2 { --sq: var(--seq-2); --sq-ink: var(--ink); }
.seq-3 { --sq: var(--seq-3); --sq-ink: #fff; }
.seq-4 { --sq: var(--seq-4); --sq-ink: #fff; }
.seq-5 { --sq: var(--seq-5); --sq-ink: #fff; }
.seq-unknown { --sq: repeating-linear-gradient(135deg, #dcdde3 0 4px, #f1f1f2 4px 8px); --sq-ink: var(--ink-2); }
.seq-empty { --sq: var(--surface-2); --sq-ink: var(--ink-muted); }

/* ---------- Radar ---------- */
.radar { width: 100%; max-width: var(--radar-max, 560px); margin-inline: auto; }
.radar__grid { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.radar__grid--outer { stroke: var(--line); }
.radar__band { fill: var(--surface-2); }
.radar__axis { stroke: var(--line-soft); stroke-width: 1; }
.radar__tick { font-size: 12px; fill: var(--ink-muted); }
.radar__label { font-size: 15px; font-weight: 600; fill: var(--ink); }
.radar__value { font-size: 14px; font-weight: 700; fill: var(--chart-1); font-variant-numeric: tabular-nums; }
.radar__value--2 { fill: var(--risk-high-ink); }
.radar__area { fill: var(--chart-1); fill-opacity: .16; stroke: var(--chart-1); stroke-width: 2.5; stroke-linejoin: round; }
.radar__area--2 { fill: var(--chart-2); fill-opacity: .06; stroke: var(--chart-2); stroke-dasharray: 6 4; }
.radar__dot { fill: var(--surface); stroke: var(--chart-1); stroke-width: 2.5; }
.radar__dot--2 { stroke: var(--chart-2); }

/* ---------- Gauge / donut ---------- */
.gauge { display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.gauge__svg { width: var(--gauge-size, 200px); height: auto; }
.gauge__track { fill: none; stroke: var(--surface-3); }
.gauge__value { fill: none; stroke: var(--rb, var(--chart-1)); stroke-linecap: round; }
.gauge__pct { font-size: 40px; font-weight: 800; fill: var(--heading); font-variant-numeric: tabular-nums; letter-spacing: -1px; }
[data-theme="capgemini"] .gauge__pct { font-weight: 500; }
.gauge__unit { font-size: 20px; font-weight: 600; fill: var(--ink-muted); }
.gauge__sub { font-size: 12px; fill: var(--ink-muted); }

/* ---------- Bar list ---------- */
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bar-list__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--sp-3); align-items: center; }
.bar-chart { --bar-value-w: 4.5rem; }
.bar-chart--bands { --bar-value-w: 14rem; }
@media (min-width: 720px) { .bar-list__item { grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) var(--bar-value-w); } }
.bar-list__label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); min-width: 0; overflow-wrap: break-word; line-height: 1.3; }
.bar-list__label a { color: inherit; text-decoration: none; }
.bar-list__label a:hover { color: var(--action); text-decoration: underline; }
.bar-list__sub { display: block; font-weight: 400; color: var(--ink-muted); font-size: var(--fs-xs); }
.bar-list__track {
  grid-column: 1 / -1; height: 14px; border-radius: 4px; background: var(--surface-3); position: relative; overflow: hidden;
}
.bar-list__track--ticks { background:
  linear-gradient(90deg, transparent calc(20% - 1px), rgba(255,255,255,.95) calc(20% - 1px) 20%, transparent 20%) ,
  linear-gradient(90deg, transparent calc(40% - 1px), rgba(255,255,255,.95) calc(40% - 1px) 40%, transparent 40%) ,
  linear-gradient(90deg, transparent calc(60% - 1px), rgba(255,255,255,.95) calc(60% - 1px) 60%, transparent 60%) ,
  linear-gradient(90deg, transparent calc(80% - 1px), rgba(255,255,255,.95) calc(80% - 1px) 80%, transparent 80%) ,
  var(--surface-3); }
@media (min-width: 720px) { .bar-list__track { grid-column: auto; } }
.bar-list__fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--rb, var(--chart-1)); min-width: 3px; }
.bar-list__value { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); white-space: nowrap; color: var(--heading); grid-row: 1; grid-column: 2; }
.bar-list__num { min-width: 3.5rem; text-align: right; }
@media (min-width: 720px) { .bar-list__value { grid-row: auto; grid-column: auto; justify-content: flex-start; } }
.bar-list__value .badge { font-weight: 600; }
.bar-list--compact { gap: var(--sp-2); }
.bar-list--compact .bar-list__track { height: 10px; }
.bar-list__scale { display: none; }
@media (min-width: 720px) {
  .bar-list__scale { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) var(--bar-value-w); gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-muted); margin-top: calc(var(--sp-2) * -1); }
  .bar-list__scale-ticks { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
}

/* ---------- Distribution (stacked) bar ---------- */
.dist__bar { display: flex; gap: 2px; height: 28px; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.dist__seg { background: var(--sq); color: var(--sq-ink); min-width: 0; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; overflow: hidden; white-space: nowrap; }
.dist__seg:first-child { border-radius: 6px 0 0 6px; }
.dist__seg:last-child { border-radius: 0 6px 6px 0; }
.dist__legend { display: grid; gap: 4px var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); list-style: none; padding: 0; margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.dist__legend li { display: flex; align-items: flex-start; gap: var(--sp-2); min-width: 0; }
.dist__legend .chart-legend__swatch { background: var(--sq); margin-top: 4px; border: 1px solid rgba(31,30,47,.08); }
.dist__legend-label { flex: 1; min-width: 0; color: var(--ink-2); }
.dist__legend-count { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dist--compact .dist__bar { height: 16px; }
.dist--compact .dist__seg { font-size: 0; }

/* ---------- Heat grid (question × respondent) ---------- */
.heat-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line-soft); border-radius: var(--r-m); background: var(--surface); }
.heat { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-xs); min-width: 100%; }
.heat th { font-weight: 600; color: var(--ink-2); text-align: left; padding: 4px 8px; white-space: nowrap; background: var(--surface); }
.heat thead th { vertical-align: bottom; text-align: center; max-width: 64px; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; }
.heat tbody th { position: sticky; left: 0; z-index: 1; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.heat__cell { width: 40px; min-width: 40px; height: 32px; text-align: center; border-radius: 4px; background: var(--sq); color: var(--sq-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.heat__avg { font-weight: 800; color: var(--heading); text-align: center; padding: 0 8px; font-variant-numeric: tabular-nums; }
.heat-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-muted); margin-top: var(--sp-3); }
.heat-legend__scale { display: inline-flex; gap: 2px; align-items: center; }
.heat-legend__scale span { width: 24px; height: 16px; border-radius: 3px; background: var(--sq); color: var(--sq-ink); display: grid; place-items: center; font-weight: 700; font-size: 10px; }

/* ---------- Score / maturity scale (0–5 dots) ---------- */
.score-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.score-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); }
.score-dots i.on { background: var(--chart-1); box-shadow: none; }
.score-dots i.half { background: linear-gradient(90deg, var(--chart-1) 50%, var(--surface-3) 50%); }

/* ---------- Risk legend (bands) ---------- */
.risk-scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 2px; border-radius: 6px; overflow: hidden; font-size: var(--fs-xs); }
.risk-scale__band { background: var(--rb-bg); color: var(--rb-ink); padding: 6px 8px; border-top: 4px solid var(--rb); min-width: 0; }
.risk-scale__band strong { display: block; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-scale__band.is-current { box-shadow: inset 0 0 0 2px var(--rb); }
.risk-scale--vertical { grid-template-columns: 1fr; text-align: left; }
.risk-scale--vertical .risk-scale__band { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-top: 0; border-left: 4px solid var(--rb); padding: 6px 10px; }
.risk-scale--vertical .risk-scale__range { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 599.98px) { .radar__label { font-size: 18px; } .radar__value { font-size: 17px; } .radar__tick { font-size: 14px; } }