/* The award chart's own styling, kept in one file because two very different
   consumers need it:

   1. the product pages, which link this stylesheet and inline the SVG into the
      page, and
   2. the article cards on the homepage, which point an <img> at a standalone
      .svg file. An SVG loaded through <img> gets no stylesheet from the page it
      sits on, so the same rules are inlined into that file at build time by the
      `chartSvg` filter.

   The variables are declared here rather than inherited from style.css because
   inside a standalone SVG there is no page palette to inherit from — `:root`
   matches the <svg> element itself, so these are the only definitions that reach
   the chart in both places. Without them the bars render default black. */

:root {
  --pp-ink-soft: #213147;
  --pp-ink-mute: #5d6a77;
  --pp-navy: #05192d;
  --pp-sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --pp-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pp-chart { width: 100%; height: auto; display: block; }
.pp-axis { stroke: #b9c0c9; stroke-width: 1; }
.pp-grid { stroke: #e6e9ed; stroke-width: 1; }
.pp-bar { fill: #3d6ea8; }
.pp-bar:hover { fill: var(--pp-navy); }
.pp-median { stroke: #b26a00; stroke-width: 1.4; stroke-dasharray: 4 3; }
.pp-tick { fill: var(--pp-ink-mute); font-family: var(--pp-mono); font-size: 10px; }
.pp-title { fill: var(--pp-ink-soft); font-family: var(--pp-sans); font-size: 11px; font-weight: 600; }
.pp-median-label { fill: #b26a00; font-family: var(--pp-mono); font-size: 10px; }