/* Powermix-only rules, layered on ../common.css.
 *
 * Everything this page shares with the four annual charts -- the token block, the
 * filter row, the card, the legend, the tooltip, the table -- now comes from
 * common.css. What is left here is the one structural difference: this chart paints
 * its fills to a <canvas> with the axes in an <svg> on top, so both layers have to
 * be absolutely positioned inside the .plot box, and it is the only page with a
 * brushable context strip.
 *
 * Series colours are NOT here: they come from data/powermix/manifest.json, written
 * by powermix.py, so the palette has exactly one source of truth.
 */

/* Fixed, unlike the annual charts, whose height is a function of their row count. */
.plot { height: 420px; }
.plot.is-stale canvas { opacity: 0.45; }   /* hold the frame while detail loads */
.context { position: relative; height: 64px; margin-top: 2px; }
.plot canvas, .context canvas { position: absolute; }
.plot svg, .context svg { position: absolute; left: 0; top: 0; overflow: visible; }

.brush .selection { fill: var(--accent); fill-opacity: 0.14; stroke: var(--accent); stroke-width: 1; }
.brush .handle { fill: var(--accent); fill-opacity: 0.5; }

/* The two date inputs sit in one .field, so "Dates" labels the pair rather than each
   half. Height comes from --control-h like every other control; date inputs are the
   one place where a UA stylesheet would otherwise impose its own. */
.daterange { display: inline-flex; align-items: center; gap: 6px; }
.daterange input[type="date"] {
  font: inherit; font-size: 13px; height: var(--control-h); padding: 0 8px;
  color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--grid); border-radius: 7px;
}
.daterange input[type="date"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.daterange span { font-size: 12px; color: var(--ink-muted); }