/* Scatter chart — dot colour driven by data-grade attribute so the
   grade palette follows the --g-* token tree without inline fill hex.
   Scoped to [data-plot="scatter"] so these rules only apply inside
   the container renderScatter stamps with that attribute.

   The [data-grade] selectors target Observable Plot's <circle>
   elements. CSS `fill` is a presentation property on SVG elements,
   so a CSS rule at this specificity wins over Plot's fill="" attribute
   fallback (which provides a same-phase colour in JSDOM / environments
   where this stylesheet isn't loaded).

   fill-opacity is kept here so it's co-located with the fill rule and
   not split across JS and CSS. */

[data-plot="scatter"] circle[data-grade="Exceptional"]       { fill: var(--g-exceptional); fill-opacity: 0.65; }
[data-plot="scatter"] circle[data-grade="Strong standard"]   { fill: var(--g-strong);      fill-opacity: 0.65; }
[data-plot="scatter"] circle[data-grade="Expected standard"] { fill: var(--g-expected);    fill-opacity: 0.65; }
[data-plot="scatter"] circle[data-grade="Needs attention"]   { fill: var(--g-attention);   fill-opacity: 0.65; }
[data-plot="scatter"] circle[data-grade="Urgent improvement"]{ fill: var(--g-urgent);      fill-opacity: 0.65; }

/* Stroke: same hue as fill, full opacity, hair-thin to separate
   overlapping dots without adding visual weight. */
[data-plot="scatter"] circle[data-grade="Exceptional"]       { stroke: var(--g-exceptional); stroke-width: 0.5; }
[data-plot="scatter"] circle[data-grade="Strong standard"]   { stroke: var(--g-strong);      stroke-width: 0.5; }
[data-plot="scatter"] circle[data-grade="Expected standard"] { stroke: var(--g-expected);    stroke-width: 0.5; }
[data-plot="scatter"] circle[data-grade="Needs attention"]   { stroke: var(--g-attention);   stroke-width: 0.5; }
[data-plot="scatter"] circle[data-grade="Urgent improvement"]{ stroke: var(--g-urgent);      stroke-width: 0.5; }

/* Click affordance when an onDotClick handler is wired. The cursor
   is set on the container so it covers both dots and the jitter
   padding around them. Only applied when the handler is active; JS
   toggles the data-clickable attribute on the container. */
[data-plot="scatter"][data-clickable] circle { cursor: pointer; }