/* Incidents by service — stacked bar chart.
   Tokens only. No transform anywhere: GSAP owns transforms on the segments,
   the tooltip and the totals. */

.chart {
  /* Plot height composed from the spacing scale so the chart keeps the kit's
     rhythm instead of inventing a magic number. */
  --plot-h: calc(var(--sp-7) * 4);
  --seg-gap: 2px;
  /* The per-column total sits above the plot, so the gridlines start below it
     or the zero line floats off the foot of the bars. */
  --total-h: calc(var(--sp-5) - var(--sp-1));
}

.chart__body { display: flex; flex-direction: column; gap: var(--sp-5); }

/* ---------- legend ---------- */

.chart__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chart__legend-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--control-h-sm); padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink-muted);
  cursor: pointer; font: inherit; font-size: var(--text-sm); white-space: nowrap;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.chart__legend-btn:hover { background: var(--surface-hover); color: var(--ink); }
.chart__legend-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart__legend-btn[aria-pressed="true"] { color: var(--ink); border-color: var(--line-strong); }
.chart__legend-btn[aria-pressed="false"] { color: var(--ink-faint); }
.chart__legend-btn[aria-pressed="false"] .chart__swatch { background: var(--line-strong); }
.chart__legend-btn[aria-pressed="false"] .chart__legend-name { text-decoration: line-through; }

.chart__swatch {
  width: 10px; height: 10px; flex: 0 0 auto;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) ease;
}
.chart__swatch--critical { background: var(--danger); }
.chart__swatch--major { background: var(--warn); }
.chart__swatch--minor { background: var(--info); }
.chart__swatch--low { background: var(--ok); }

.chart__legend-count {
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs);
}

/* ---------- plot ---------- */

.chart__plot { position: relative; padding-left: var(--sp-6); }

.chart__grid { position: absolute; top: var(--total-h); left: var(--sp-6); right: 0; height: var(--plot-h); }
.chart__tick {
  position: absolute; left: 0; right: 0;
  bottom: calc(var(--t) / var(--max) * var(--plot-h));
  border-top: 1px solid var(--line);
}
.chart__tick i {
  position: absolute; right: calc(100% + var(--sp-2));
  top: 50%; margin-top: -0.6em;
  color: var(--ink-faint);
  font-family: var(--font-mono); font-size: var(--text-xs); font-style: normal;
}

.chart__cols {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.chart__colwrap { display: flex; flex-direction: column; min-width: 0; }

.chart__total {
  order: -1;
  height: var(--total-h);
  color: var(--ink-muted); text-align: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
}

.chart__col {
  display: flex; flex-direction: column-reverse; justify-content: flex-start;
  gap: var(--seg-gap);
  height: var(--plot-h);
}

.chart__seg {
  display: block; width: 100%;
  /* Height is data, not decoration: value over axis max, of the plot height. */
  height: calc(var(--v) / var(--max) * var(--plot-h) - var(--seg-gap));
  min-height: 2px;
  padding: 0; border: 0;
  cursor: pointer; font: inherit;
  transition: filter var(--dur-fast) ease, outline-color var(--dur-fast) ease;
}
/* Rounded caps follow the VISIBLE ends of the stack, so the script re-stamps
   them after a legend toggle (:first-child ignores a hidden neighbour). */
.chart__seg.is-bottom { border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.chart__seg.is-top { border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm); }
.chart__seg:hover { filter: brightness(1.14); }
.chart__seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart__seg[hidden] { display: none; }

.chart__seg--critical { background: var(--danger); }
.chart__seg--major { background: var(--warn); }
.chart__seg--minor { background: var(--info); }
.chart__seg--low { background: var(--ok); }

.chart__xlabel {
  padding-top: var(--sp-2);
  color: var(--ink-muted); text-align: center;
  font-size: var(--text-xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- value tooltip ---------- */

.chart__tip {
  position: absolute; top: 0; left: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-overlay); color: var(--ink);
  box-shadow: var(--shadow-2);
  font-size: var(--text-xs); white-space: nowrap;
  pointer-events: none; opacity: 0;
}
.chart__tip-dot { width: 8px; height: 8px; border-radius: var(--radius-sm); background: var(--ink-faint); }
.chart__tip-text strong { font-family: var(--font-mono); }

@media (max-width: 700px) {
  .chart { --plot-h: calc(var(--sp-7) * 3); }
  .chart__cols { gap: var(--sp-2); }
  .chart__xlabel { font-size: var(--text-xs); }
}

@media (pointer: coarse) {
  .chart__legend-btn { min-height: var(--tap-min); }
}

/* The stacked segments are data, not controls: a 3px-tall button is an
   unusable touch target and axe is right to fail it. One full-height button
   per column carries the keyboard and touch affordance and announces the whole
   breakdown; the segments keep the pointer tooltip. */
.chart__col { position: relative; }
.chart__hit {
  position: absolute; inset: 0;
  width: 100%; padding: 0;
  border: 0; border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}
.chart__hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chart__seg { pointer-events: auto; }