/* ============================================================================
   FCR CHART CORE EXT — styles for the three extra renderers registered by
   fcr-chart-core-ext.js (column, donut, radar). Extends assets/css/
   fcr-chart-core.css without editing it: load that file first, this one
   right after it.

   Only ONE of the three new renderers needs styling that core does not
   already provide: column and radar are pure SVG, and core's existing
   generic rules already cover them —
     .qcard .chart svg { display:block; max-width:100%; overflow:visible; }
     .qcard .tipnode { cursor:default; }
     .qcard [data-emphasis="muted"].tipnode, .qcard polyline[data-emphasis="muted"] { opacity:.58; }
   apply to any SVG mark regardless of chart type, column/radar rects and
   circles included, so nothing here needs to repeat them.

   Donut returns its own small HTML legend alongside its SVG (see the
   renderer's comment for why: the legend is a category-keyed list, not the
   series-keyed list core's own .legend shell draws), so THAT needs a few
   rules. Same scoping discipline as core: everything below lives under
   .qcard, and every colour is a var() with a literal fallback — no raw
   brand hex, only the same tokens/plain-white overlays core already uses.
   Written 2026-08-21.
   ========================================================================== */

.qcard .donut-card {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px;
}
.qcard .donut-card svg { flex: none; }
.qcard .donut__legend {
  display: flex; flex-direction: column; gap: 6px; min-width: 170px; flex: 1 1 170px;
}
/* 2026-09-10, polish 4 (Ben): the donut's legend is HTML (the ring's SVG
   carries no text at all), so it takes the one chart label type through CSS
   — the same --chart-label-size / --chart-label-color every SVG renderer
   resolves for its own text. */
.qcard .donut__row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--chart-label-size, 13px); line-height: 1.35;
  color: var(--chart-label-color, var(--text-soft, #c4d2e8));
}
.qcard .donut__sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.qcard .donut__lab { flex: 1 1 auto; min-width: 0; }
/* Mirrors core's .bar__val / .n pattern: bold value first, gray base last,
   read as one unit. */
.qcard .donut__val {
  font-family: var(--font-display, system-ui, sans-serif); font-weight: 800;
  font-size: var(--chart-label-size, 13px);
  color: var(--chart-label-color, var(--text, #ffffff)); white-space: nowrap; margin-left: auto;
}
/* Like core's .bar__val .n: the one label SIZE, its own quieter ink. */
.qcard .donut__n {
  font-weight: 600; color: var(--muted, #93a6c4); font-size: var(--chart-label-size, 13px); margin-left: 4px;
}

/* ---- box (box-and-whisker) — 2026-09-02, Phase 2 WP4a --------------------
   Pure SVG, same as column/radar: core's generic rules already cover the
   marks (svg sizing, .tipnode cursor, muted-emphasis opacity), so this file
   only adds a keyboard-focus ring for the row's invisible hit rect — a
   `fill="transparent"` shape has no visible :focus-visible affordance of its
   own, unlike a filled bar or a stroked line, so without this a keyboard
   user tabbing through a box-plot card would not be able to tell which row
   is focused. */
.qcard [data-chart-svg="box"] rect[data-boxpart="hit"]:focus-visible {
  outline: 2px solid var(--chart-primary, #38bdf8);
  outline-offset: -2px;
}