/* Inline-SVG charts (js/charts.js), coloured from the --chart-* variables. The legend and tooltip use Basecoat's
   chart markup (.chart-legend, .chart-tooltip); these rules add the SVG parts Basecoat's Chart.js wrapper does not have. */
@layer components {
  /* A chart shrinks with its area down to --chart-min-scale of its drawn width (charts.svg), which keeps its smallest
     text, 11 px, at 10 px or more; narrower, its .out-chart area scrolls sideways (components.css) instead. Chart
     text is never set below 0.6875rem. */
  .chart-svg { --chart-min-scale: 0.92; display: block; max-width: 100%; min-width: calc(var(--chart-width, 0px) * var(--chart-min-scale)); height: auto; overflow: visible; }
  .out-chart { overflow-x: auto; }
  .chart-svg text { font-family: var(--font-sans); font-size: var(--text-label); fill: var(--foreground); }
  .chart-svg .chart-axis { fill: var(--muted-foreground); font-size: var(--text-micro); }
  .chart-svg .chart-note { fill: var(--muted-foreground); font-size: var(--text-micro); }
  .chart-svg .chart-value { fill: var(--muted-foreground); font-size: var(--text-micro); font-variant-numeric: tabular-nums; }
  .chart-grid { stroke: var(--border); }
  .chart-axis-line { stroke: var(--muted-foreground); }
  .chart-reference { stroke: var(--foreground); stroke-dasharray: 4 3; }
  .chart-hatch-line { stroke: var(--background); stroke-width: 2; opacity: 0.6; }
  .chart-hit { fill: transparent; }
  [data-chart-mark] { outline: none; cursor: default; }
  [data-chart-mark]:focus-visible .chart-hit, rect[data-chart-mark]:focus-visible, circle[data-chart-mark]:focus-visible { stroke: var(--ring); stroke-width: 2; }
  /* Any mark drawn as a group over a hit area (a bar row, a waterfall column, a week of the trend) is shaded. */
  [data-chart-mark]:is(:hover, :focus-visible) > .chart-hit { fill: color-mix(in oklab, var(--muted) 70%, transparent); }
  .chart-bar-row:is(:hover, :focus-visible) .chart-label { font-weight: 600; }

  /* Legend: Basecoat's, left-aligned above a chart, with line, dash, dot and hatch swatches. */
  .chart-legend { justify-content: flex-start; padding-top: 0; padding-bottom: 0.5rem; }
  .chart-legend[data-align="center"] { justify-content: center; }
  .chart-legend-indicator[data-kind="line"] { width: 1rem; height: 3px; }
  .chart-legend-indicator[data-kind="dash"] { width: 1rem; height: 0; background: none; border-top: 3px dashed var(--chart-indicator-color); border-radius: 0; }
  .chart-legend-indicator[data-kind="dot"] { border-radius: 9999px; }
  .chart-legend-indicator[data-kind="ring"] { border-radius: 9999px; background: none; border: 2px solid var(--chart-indicator-color); }
  .chart-legend-indicator[data-kind="hatch"] { background: repeating-linear-gradient(45deg, var(--chart-indicator-color) 0 3px, var(--border) 3px 5px); }
  .chart-tooltip-footer { border-top: 1px solid var(--border); padding-top: 0.25rem; color: var(--muted-foreground); }

  /* Tiny charts (charts.tiny*): a list row's picture of a result. */
  .tiny-chart { display: block; flex: none; overflow: visible; }
  .tiny-line { fill: none; stroke: var(--chart-current); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .tiny-dot { fill: var(--chart-current); }
  .tiny-dot[data-side="below"] { fill: var(--chart-comparison); }
  .tiny-bar { fill: var(--chart-current); }
  .tiny-bar[data-side="below"] { fill: var(--chart-muted); }
  .tiny-bar[data-kind="gain"] { fill: var(--chart-positive); }
  .tiny-bar[data-kind="loss"] { fill: var(--chart-negative); }
  .tiny-bar[data-kind="sum"] { fill: var(--chart-comparison); }
  .tiny-base { stroke: var(--muted-foreground); stroke-dasharray: 2 2; stroke-width: 1; }
}