/* ==========================================================================
   Section 3 — stacked column chart (chart.js).
   Editorial restraint: hairline gridlines, Graphik axis text, no chartjunk.
   Data colors come from the SVG fills set in JS; CSS only handles neutrals.
   ========================================================================== */

/* Legend row — Graphik, small, tracked slightly for the utility voice. */
.ef-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0 0 1rem;
  font-family: var(--ef-sans);
  font-size: 0.78rem;
  color: var(--ef-ink-soft);
}
.ef-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Plot holder — full width; SVG scales to it. */
.ef-chart-plot {
  position: relative;
  width: 100%;
}
.ef-chart-plot svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Axis text — Graphik, muted. */
.ef-axis text {
  font-family: var(--ef-sans);
  font-size: 0.72rem;
  fill: var(--ef-gray);
}

/* Horizontal gridlines — hairline rule color. */
.ef-gridline {
  stroke: var(--ef-rule);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

/* Bars — pointer + subtle hover feedback (opacity handled in JS per-column). */
.ef-bar {
  cursor: pointer;
  transition: opacity 0.12s ease;
}

/* Per-segment count — sits inside its colored segment near the top. */
.ef-bar-seg-label {
  font-family: var(--ef-sans);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  fill: #fff;
  pointer-events: none;
}

/* Bar grand total — bold, just above the bar, in ink. */
.ef-bar-total {
  font-family: var(--ef-sans);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: var(--ef-ink);
  pointer-events: none;
}

/* Honor reduced-motion: no bar opacity transition. */
@media (prefers-reduced-motion: reduce) {
  .ef-bar { transition: none; }
}