/* em-charts.css -- the Chart.js charts (partials/chart.html). Loaded only by
   pages that draw one, with em-charts.js (partials/chart-assets.html).

   THE PALETTE LIVES HERE. em-charts.js reads --chart-1..4 off the figure, so
   series colours are brand tokens rather than literals in a script, and a
   screen can restyle its charts by overriding them on a wrapper.
   --chart-2 is mint-dark, not mint: plain mint fails the lightness band on a
   white card (dataviz validator, 1 Oct 2026). Both pass the colour-blind
   separation check. The data table beside every chart is the relief for
   mint-dark's 2.1:1 contrast against white. */
.em-chart {
  --chart-1: var(--violet);
  --chart-1-hover: var(--violet-light);
  --chart-2: var(--mint-dark);
  --chart-2-hover: var(--mint);
  --chart-3: var(--lilac);
  --chart-4: var(--amber-dark);
  --chart-ink: rgba(27,27,47,0.6);
  --chart-grid: rgba(27,27,47,0.08);
  --chart-tip-bg: var(--deep-night);
  --chart-tip-ink: #ffffff;
  margin: 0;
}

/* Chart.js sizes the canvas to this box, so the box has the height. */
.em-chart-canvas { position: relative; height: 220px; }
.em-chart--tall .em-chart-canvas { height: 280px; }

.em-chart-legend {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
  margin: 0 0 8px; font-size: 13px; color: rgba(27,27,47,0.7);
}
.em-chart-legend-item { display: inline-flex; align-items: center; }
.em-chart-key {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 6px; vertical-align: -1px;
}
.em-chart-key--1 { background: var(--chart-1); }
.em-chart-key--2 { background: var(--chart-2); }
.em-chart-key--3 { background: var(--chart-3); }
.em-chart-key--4 { background: var(--chart-4); }

/* THE TABLE. Visually hidden while the chart is (or is about to be) drawn,
   so a screen reader always has it; shown only when the script could not
   draw, so a failed load still shows the numbers.

   THE WRAPPER IS HIDDEN, NOT THE TABLE. A <table> ignores height: 1px and
   grows to fit its rows, so the .sr-only rules on the table itself left an
   invisible block as tall as the data. It lengthened the page and, in the
   admin app, pushed the sticky rail up off the top of the screen. */
.em-chart { position: relative; }
.em-chart-data {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.em-chart.is-fallback .em-chart-canvas,
.em-chart.is-fallback .em-chart-legend { display: none; }
.em-chart.is-fallback .em-chart-data {
  position: static; width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}
.em-chart.is-fallback .em-chart-table { border-collapse: collapse; font-size: 13px; }
/* The card already has a heading; the caption stays for screen readers. */
.em-chart.is-fallback .em-chart-table caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.em-chart.is-fallback .em-chart-table th,
.em-chart.is-fallback .em-chart-table td {
  padding: 4px 12px 4px 0; text-align: right;
  border-bottom: 1px solid rgba(27,27,47,0.08);
}
.em-chart.is-fallback .em-chart-table th[scope="row"],
.em-chart.is-fallback .em-chart-table thead th:first-child { text-align: left; }

/* THE COPY MENU (analytics spec 4.3; em-charts.js addShareMenu). Top right of
   the figure, level with the legend; the legend leaves it room, and a chart
   with no legend drops its canvas a line so the button never sits on a bar.
   PADDING on the figure, not a margin on the canvas: the margin collapsed
   through the figure and carried the button down with it (12 Oct 2026). */
.em-chart-menu { position: absolute; top: -6px; right: 0; z-index: 3; }
.em-chart.has-menu .em-chart-legend { padding-right: 40px; }
.em-chart.has-menu-only { padding-top: 30px; }
.em-chart-menu > summary {
  list-style: none; cursor: pointer; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 18px; line-height: 1;
  color: rgba(27,27,47,0.6);
}
.em-chart-menu > summary::-webkit-details-marker { display: none; }
.em-chart-menu > summary:hover,
.em-chart-menu[open] > summary { background: rgba(91,75,212,0.08); color: var(--violet); }
.em-chart-menu > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.em-chart-menu-list {
  position: absolute; right: 0; top: 34px; min-width: 220px; padding: 6px;
  background: #ffffff; border: 1px solid rgba(27,27,47,0.1); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(27,27,47,0.12);
}
.em-chart-menu-list button {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px;
  background: none; font: inherit; font-size: 14px; color: var(--deep-night);
  text-align: left; cursor: pointer;
}
.em-chart-menu-list button:hover,
.em-chart-menu-list button:focus-visible { background: var(--ghost); outline: none; }
.em-chart-menu-list small {
  display: block; padding: 6px 10px 4px; font-size: 12px; line-height: 1.4;
  color: rgba(27,27,47,0.55);
}
.em-chart-toast {
  position: absolute; right: 0; top: 30px; z-index: 4; margin: 0;
  padding: 6px 10px; border-radius: 8px; font-size: 13px;
  background: var(--deep-night); color: #ffffff;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.em-chart-toast.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .em-chart-toast { transition: none; } }