/* ============================================================
   Chart primitives. All charts are inline SVG built in js/charts.js.
   The SVG itself carries role/aria; a visually-hidden table or
   sentence always accompanies it for non-visual users.
   ============================================================ */

.chart {
  width: 100%;
  display: block;
  overflow: visible;
}
.chart__grid-line { stroke: var(--border); stroke-width: 1; }
.chart__axis-label {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.chart__bar { transition: opacity var(--dur-fast) var(--ease); }
.chart__bar--in  { fill: var(--pos); }
.chart__bar--out { fill: var(--neg); }
.chart__line {
  fill: none;
  stroke: var(--cat-4);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart__point { fill: var(--surface); stroke: var(--cat-4); stroke-width: 1.75; }
.chart__area { fill: var(--brand); opacity: 0.10; }
.chart__zero { stroke: var(--border-strong); stroke-width: 1; }

.chart-legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--text-2);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: var(--s-2); }

.donut { display: block; margin-inline: auto; }
.donut__seg { transition: opacity var(--dur-fast) var(--ease); }
.donut__track { fill: none; stroke: var(--track); }
.donut__center-label {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-anchor: middle;
}
.donut__center-value {
  fill: var(--text);
  font-size: 17px;
  font-weight: 600;
  text-anchor: middle;
}

.chart-frame {
  display: grid;
  gap: var(--s-4);
}
.chart-empty {
  display: grid;
  place-items: center;
  min-height: 160px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--s-5);
}