/* charts.css
   Styling for the inline SVG charts shared by the paid worksheet
   (worksheet.html) and the public sample preview (sample.html).

   The charts always render on paper white, in both light and dark mode, on
   purpose: they are a preview of a printed document, so showing them as
   anything else would misrepresent what the buyer receives. That also keeps
   every label a fixed dark-on-light pair, which is why none of the rules
   below need a .dark variant.

   Colour vars are scoped to .chart rather than :root so this file can drop
   onto any page without touching that page's own palette. worksheet.html
   defines the same names at :root for the rest of its document design; the
   values here match it. */

.chart {
    --c-ink: #1e2433;
    --c-muted: #5b6472;
    --c-accent: #4c1d95;
    --c-rule: #d7dae0;
    margin: 12px 0 14px;
    max-width: 6.6in;
}

.chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart .cap {
    font-size: 8pt;
    color: var(--c-muted);
    margin-top: 3px;
}

/* Value sitting above or beside a bar, painted on paper. */
.bar-val { font: 700 9.5pt Georgia, serif; fill: var(--c-ink); }

/* Axis and unit labels, painted on paper. */
.bar-lab { font: 8pt -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: var(--c-muted); }

/* Labels painted on top of a saturated bar rather than on paper. Kept as its
   own class so nothing has to guess: a blanket `svg text { fill }` rule would
   also repaint the dark-on-paper labels above and make them disappear. */
.bar-on { font: 700 9pt Georgia, serif; fill: #ffffff; }

/* Row keys in a ranking chart, and the visitor's own row. The `me` variant
   has to be a separate class rather than a font-weight presentation
   attribute, because the `font:` shorthand in .bar-key would win against it. */
.bar-key { font: 8pt -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: var(--c-ink); }
.bar-key-me { font: 700 8pt -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; fill: var(--c-accent); }

/* Sample preview only: the paper card the charts sit on, so they read as a
   document page in both colour schemes. */
.chart-paper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
}
.dark .chart-paper { border-color: #4b5563; }
.chart-paper .chart { max-width: none; margin: 0; }