@scope (chart-ui) {
  :where(:scope) {
    /* ── Tokens ── */
    --chart-font:           var(--a-font-family);
    --chart-font-size:      var(--a-ui-sm);
    /* NOTE — `--chart-currency-prefix` is intentionally NOT declared here.
       Declaring a default at `:where(:scope)` would shadow ancestor values
       via the cascade (the child's explicit declaration wins over an
       inherited ancestor value, regardless of specificity). Instead,
       chart.js's `#fmtValue()` falls back to `'$'` when the computed
       value is empty — so ancestors can set `--chart-currency-prefix: "€"`
       and the chart inherits that value naturally. To register the
       default formally (and enable transitions), add an `@property` rule
       at `:root` in a global stylesheet. */
    --chart-fg:             var(--a-fg);
    --chart-bar:            var(--a-accent);
    --chart-bar-hover:      var(--a-accent-bg-hover);
    --chart-line:           var(--a-accent);
    --chart-dot:            var(--a-accent);
    --chart-grid:           var(--a-border-subtle);
    --chart-axis:           var(--a-fg-muted);
    --chart-label:          var(--a-fg-subtle);
    --chart-value:          var(--a-fg);
    --chart-avg:            var(--a-warning);
    --chart-area-opacity:   0.15;
    --chart-line-width:     2;
    --chart-radius:         4;

    /* Layout */
    --chart-border:         var(--a-border-subtle);
    --chart-space-sm:       var(--a-space-1);
    --chart-space-md:       var(--a-space-2);
    --chart-space-lg:       var(--a-space-3);
    --chart-dot-stroke:     var(--a-bg);
    --chart-max-height:     28rem;

    /* Legend */
    --chart-legend-size:    var(--a-ui-tiny);
    --chart-legend-dot-size: var(--a-space-2-5);

    /* Gap between slices. Read from JS at render time (getComputedStyle) — intentional cross-layer parameter. */
    --chart-segments-gap:   2px;
    --chart-pie-gap:        1.25px;

    /* Transitions */
    --chart-duration:       var(--a-duration-fast);
    --chart-easing:         var(--a-easing);

    /* ── Categorical palette (10 slots) ──
       All 10 slots alias the shared data palette in tokens.css. See
       `--a-data-*` for the rationale behind theme-stable data colors. */
    --chart-0:  var(--a-data-0);
    --chart-1:  var(--a-data-1);
    --chart-2:  var(--a-data-2);
    --chart-3:  var(--a-data-3);
    --chart-4:  var(--a-data-4);
    --chart-5:  var(--a-data-5);
    --chart-6:  var(--a-data-6);
    --chart-7:  var(--a-data-7);
    --chart-8:  var(--a-data-8);
    --chart-9:  var(--a-data-9);
  }

  /* ── Base ── */

  :scope {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: var(--chart-max-height);
    min-height: 0;
    font-family: var(--chart-font);
    position: relative;
    container-type: inline-size;
    container-name: chart;
    /* Suppress default focus ring — we paint our own via [data-a11y-focused]
       below so the ring only shows when the chart has a focused datum
       (keyboard-only indicator, not just "the chart is tabindex=0"). */
    outline: none;
  }

  /* OD-CHART-06 — keyboard a11y focus ring. Painted on the host when a
     datum is focused via keyboard. Uses the canonical --a-focus-ring
     recipe so it matches every other focusable primitive. */
  :scope[data-a11y-focused]:focus-visible {
    box-shadow: var(--a-focus-ring);
    border-radius: var(--a-radius-sm);
  }

  /* Per-datum focus indicator — marks the currently-focused datum
     via a data-a11y-focus attr set by chart.js on keyboard nav.
     SVG paintable elements can't take box-shadow, so use a stroke
     + drop-shadow filter to approximate a ring. */
  [data-a11y-focus] {
    stroke: var(--a-focus-color);
    stroke-width: 2;
    paint-order: stroke fill;
    filter: drop-shadow(0 0 2px var(--a-focus-color));
  }

  /* Title + legend are fixed-height siblings; SVG gets the remaining
     vertical budget. min-height:0 lets the SVG wrapper shrink to fit
     inside the max-height envelope instead of pushing the legend out. */
  [data-legend]      { flex: 0 0 auto; }

  /* Empty-state slot — author places <empty-state-ui slot="empty"> inside
     chart-ui. CSS toggles visibility on [data-has-data] (set by chart.js
     when .data is non-empty). No data ⇒ empty-state visible; data ⇒ hidden. */
  & > [slot="empty"] { display: none; }
  :scope:not([data-has-data]) > [slot="empty"] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 0;
  }

  :scope > div:not([data-legend]) {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Aspect ratio — height is computed in JS from width, CSS is just a hint.
     NOTE: size="sm|md|lg" used to cap max-width (25/50/100%) which was a bug:
     a chart in a 160px grid cell would be clamped to 40px wide. Size now
     only tunes typography/padding/density inside #dims(); layout is the
     responsibility of the consumer. */

  /* Debug resize handle */
  :scope[resize] {
    resize: both;
    overflow: hidden;
    border: 1px dashed var(--chart-border);
    padding: var(--chart-space-md);
  }

  /* ── SVG ── */

  svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: visible;
  }

  /* ── Grid lines ── */

  [data-grid] {
    stroke: var(--chart-grid);
    stroke-width: 1;
    fill: none;
  }

  /* ── Y-axis labels ── */

  [data-y-label] {
    font-size: var(--chart-font-size);
    fill: var(--chart-axis);
    font-family: var(--chart-font);
  }

  /* ── X-axis labels ── */

  [data-x-label] {
    font-size: var(--chart-font-size);
    fill: var(--chart-label);
    font-family: var(--chart-font);
  }

  /* ── Value labels ── */

  [data-value] {
    font-size: var(--chart-font-size);
    font-weight: 600;
    fill: var(--chart-value);
    font-family: var(--chart-font);
  }

  /* ── Bar ── */

  [data-bar] {
    fill: var(--chart-bar);
    transition: opacity var(--chart-duration) var(--chart-easing);
  }

  [data-bar]:hover {
    opacity: 0.92;
  }

  /* ── Line ── */

  [data-line] {
    stroke: var(--chart-line);
    stroke-width: var(--chart-line-width);
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  /* ── Area fill ──
     Enabled by default for line / multi-line charts. Fades from the top
     (most visible, tinted by --chart-area-opacity) to transparent at the
     bottom. The mask controls the gradient shape; the opacity token
     controls the top stop's strength. */

  [data-area] {
    fill: var(--chart-line);
    stroke: none;
    opacity: var(--chart-area-opacity);
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  }

  /* ── Dots ── */

  [data-dot] {
    fill: var(--chart-dot);
    stroke: var(--chart-dot-stroke);
    stroke-width: 2;
    r: 3;
    transition: r var(--chart-duration) var(--chart-easing);
  }

  [data-dot]:hover {
    r: 5;
  }

  /* ── Average line ── */

  [data-avg] {
    stroke: var(--chart-avg);
    stroke-dasharray: 6 3;
    stroke-width: 1.5;
  }

  [data-avg-label] {
    fill: var(--chart-avg);
    font-family: var(--chart-font);
    font-weight: 600;
  }

  /* ── Radar ── */

  [data-radar-fill] {
    fill: var(--chart-line);
    opacity: var(--chart-area-opacity);
    stroke: none;
  }

  [data-radar-line] {
    stroke: var(--chart-line);
    stroke-width: var(--chart-line-width);
    fill: none;
    stroke-linejoin: round;
  }

  /* ═══════ Pie / Donut slices ═══════ */

  [data-slice="0"] { fill: var(--chart-0); }
  [data-slice="1"] { fill: var(--chart-1); }
  [data-slice="2"] { fill: var(--chart-2); }
  [data-slice="3"] { fill: var(--chart-3); }
  [data-slice="4"] { fill: var(--chart-4); }
  [data-slice="5"] { fill: var(--chart-5); }
  [data-slice="6"] { fill: var(--chart-6); }
  [data-slice="7"] { fill: var(--chart-7); }
  [data-slice="8"] { fill: var(--chart-8); }
  [data-slice="9"] { fill: var(--chart-9); }

  path[data-slice],
  circle[data-slice] {
    stroke: none;
    transition: opacity var(--chart-duration) var(--chart-easing);
  }

  path[data-slice]:hover,
  circle[data-slice]:hover {
    opacity: 0.92;
  }

  /* Slice-colored bars (stacked/grouped) */
  rect[data-slice] {
    transition: opacity var(--chart-duration) var(--chart-easing);
  }

  rect[data-slice]:hover {
    opacity: 0.92;
  }

  /* Slice-colored lines (multi-line) */
  [data-line][data-slice="0"] { stroke: var(--chart-0); }
  [data-line][data-slice="1"] { stroke: var(--chart-1); }
  [data-line][data-slice="2"] { stroke: var(--chart-2); }
  [data-line][data-slice="3"] { stroke: var(--chart-3); }
  [data-line][data-slice="4"] { stroke: var(--chart-4); }
  [data-line][data-slice="5"] { stroke: var(--chart-5); }
  [data-line][data-slice="6"] { stroke: var(--chart-6); }
  [data-line][data-slice="7"] { stroke: var(--chart-7); }
  [data-line][data-slice="8"] { stroke: var(--chart-8); }
  [data-line][data-slice="9"] { stroke: var(--chart-9); }

  [data-line][data-slice] {
    fill: none;
    stroke-width: var(--chart-line-width);
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  /* Slice-colored areas (multi-line) */
  [data-area][data-slice="0"] { fill: var(--chart-0); }
  [data-area][data-slice="1"] { fill: var(--chart-1); }
  [data-area][data-slice="2"] { fill: var(--chart-2); }
  [data-area][data-slice="3"] { fill: var(--chart-3); }
  [data-area][data-slice="4"] { fill: var(--chart-4); }
  [data-area][data-slice="5"] { fill: var(--chart-5); }
  [data-area][data-slice="6"] { fill: var(--chart-6); }
  [data-area][data-slice="7"] { fill: var(--chart-7); }
  [data-area][data-slice="8"] { fill: var(--chart-8); }
  [data-area][data-slice="9"] { fill: var(--chart-9); }

  [data-area][data-slice] {
    opacity: var(--chart-area-opacity);
    stroke: none;
  }

  /* Slice-colored dots (multi-line) */
  circle[data-slice="0"] { fill: var(--chart-0); }
  circle[data-slice="1"] { fill: var(--chart-1); }
  circle[data-slice="2"] { fill: var(--chart-2); }
  circle[data-slice="3"] { fill: var(--chart-3); }
  circle[data-slice="4"] { fill: var(--chart-4); }
  circle[data-slice="5"] { fill: var(--chart-5); }
  circle[data-slice="6"] { fill: var(--chart-6); }
  circle[data-slice="7"] { fill: var(--chart-7); }
  circle[data-slice="8"] { fill: var(--chart-8); }
  circle[data-slice="9"] { fill: var(--chart-9); }

  circle[data-dot][data-slice] {
    stroke: var(--chart-dot-stroke);
    stroke-width: 2;
  }

  /* Pie / donut slice gaps — stroke in bg color reads as negative space
     between slices. Same knob shape as --chart-segments-gap. */
  :scope[type="pie"]   [data-slice]:not([data-dot]):not([data-hit]),
  :scope[type="donut"] [data-slice]:not([data-dot]):not([data-hit]) {
    stroke: var(--chart-dot-stroke);
    stroke-width: var(--chart-pie-gap);
    stroke-linejoin: round;
  }

  /* Hit-target overlays must never be filled by the slice palette —
     they're meant to be invisible pointer-event surfaces. */
  circle[data-hit] {
    fill: transparent !important;
    stroke: none;
  }

  /* ── Donut center text ── */

  [data-donut-total] {
    font-weight: 700;
    fill: var(--chart-fg);
    font-family: var(--chart-font);
    /* font-size set by JS on the element — scales with donut radius */
  }

  [data-donut-label] {
    fill: var(--chart-axis);
    font-family: var(--chart-font);
    /* font-size set by JS on the element — scales with donut radius */
  }

  /* ── Legend ── */

  [data-legend] {
    display: flex;
    flex-flow: row wrap;
    gap: var(--chart-space-md) var(--chart-space-lg);
    font-size: var(--chart-legend-size);
    color: var(--chart-fg);
    margin-top: var(--chart-space-md);
    font-family: var(--chart-font);
  }

  /* Container query — the chart element provides `container-type: inline-size`
     + `container-name: chart` (above). Hide the internal legend at small
     widths where the rows would dominate the chart visual. Consumers who
     want a legend at small sizes should place an external chart-legend-ui
     adjacent in a larger container. */
  @container chart (max-width: 200px) {
    [data-legend] { display: none; }
  }

  [data-legend-item] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--chart-space-sm);
  }

  [data-legend-dot] {
    width: var(--chart-legend-dot-size);
    height: var(--chart-legend-dot-size);
    border-radius: var(--chart-radius);
    flex-shrink: 0;
  }

  [data-legend-dot][data-slice="0"] { background: var(--chart-0); }
  [data-legend-dot][data-slice="1"] { background: var(--chart-1); }
  [data-legend-dot][data-slice="2"] { background: var(--chart-2); }
  [data-legend-dot][data-slice="3"] { background: var(--chart-3); }
  [data-legend-dot][data-slice="4"] { background: var(--chart-4); }
  [data-legend-dot][data-slice="5"] { background: var(--chart-5); }
  [data-legend-dot][data-slice="6"] { background: var(--chart-6); }
  [data-legend-dot][data-slice="7"] { background: var(--chart-7); }
  [data-legend-dot][data-slice="8"] { background: var(--chart-8); }
  [data-legend-dot][data-slice="9"] { background: var(--chart-9); }

  /* ── Area chart ──
     Reuses #renderLine() but emphasizes the filled region. Overrides the
     default `[data-area]` opacity of 0.15 (line-chart aesthetic) to 0.35
     so the fill becomes the dominant visual. The `--chart-area-fill-opacity`
     token is the knob for consumers to tune; bump for more presence, dial
     down for subtler. */
  :scope[type="area"] {
    --chart-area-fill-opacity: 0.35;
  }
  :scope[type="area"] [data-area] {
    fill: var(--chart-line);
    opacity: var(--chart-area-fill-opacity);
    stroke: none;
  }
  :scope[type="area"] [data-line] {
    stroke-width: var(--chart-line-width);
  }

  /* ── Scatter ──
     Only dots emitted (no line/area paths). Dots are slightly larger than
     line-chart dots by default for readability. */
  :scope[type="scatter"] [data-dot][data-scatter] {
    fill: var(--chart-dot);
    stroke: var(--chart-dot-stroke);
    stroke-width: 1.5;
  }

  /* ── Radial bar ──
     Concentric rings — each ring stroked with bandwidth. Track is the
     faint backing, filled arc is accent. Stroke-linecap:round in the path
     gives rounded end-caps on the arcs.

     Element-qualified `circle[data-radial-*]` selectors (specificity 0,1,1)
     are required to override the generic `circle[data-slice="N"] { fill }`
     rule above, which would otherwise fill the ring circles solid and
     produce a solid-disc render. The inline `fill="none"` attribute on the
     SVG element loses to any CSS rule that names `fill`. */
  circle[data-radial-track] {
    stroke: var(--a-border-subtle);
    fill: none;
  }
  circle[data-radial-bar] {
    stroke: var(--chart-bar);
    fill: none;
  }
  circle[data-radial-bar][data-slice="0"] { stroke: var(--chart-0); }
  circle[data-radial-bar][data-slice="1"] { stroke: var(--chart-1); }
  circle[data-radial-bar][data-slice="2"] { stroke: var(--chart-2); }
  circle[data-radial-bar][data-slice="3"] { stroke: var(--chart-3); }
  circle[data-radial-bar][data-slice="4"] { stroke: var(--chart-4); }
  circle[data-radial-bar][data-slice="5"] { stroke: var(--chart-5); }
  circle[data-radial-bar][data-slice="6"] { stroke: var(--chart-6); }
  circle[data-radial-bar][data-slice="7"] { stroke: var(--chart-7); }
  circle[data-radial-bar][data-slice="8"] { stroke: var(--chart-8); }
  circle[data-radial-bar][data-slice="9"] { stroke: var(--chart-9); }

  /* ── Gauge ──
     Half-donut — track is faint backing, fill reads as primary accent. */
  :scope[type="gauge"] [data-radial-track] {
    fill: var(--a-border-subtle);
    stroke: none;
  }
  :scope[type="gauge"] [data-gauge-fill] {
    fill: var(--chart-bar);
    stroke: none;
  }
  [data-gauge-value] {
    font-weight: var(--a-weight-semibold);
    fill: var(--chart-fg);
  }
  [data-gauge-max] {
    fill: var(--chart-label);
    font-family: var(--chart-font);
  }

  /* ── Funnel ──
     Stages stacked top-to-bottom. Trapezoid paths carry data-slice so
     the data palette colors each stage. Labels live outside the
     funnel body — left (stage name) and right (value + drop %). */
  [data-funnel-stage] {
    fill: var(--chart-bar);
  }
  [data-funnel-stage][data-slice="0"] { fill: var(--chart-0); }
  [data-funnel-stage][data-slice="1"] { fill: var(--chart-1); }
  [data-funnel-stage][data-slice="2"] { fill: var(--chart-2); }
  [data-funnel-stage][data-slice="3"] { fill: var(--chart-3); }
  [data-funnel-stage][data-slice="4"] { fill: var(--chart-4); }
  [data-funnel-stage][data-slice="5"] { fill: var(--chart-5); }
  [data-funnel-stage][data-slice="6"] { fill: var(--chart-6); }
  [data-funnel-stage][data-slice="7"] { fill: var(--chart-7); }
  [data-funnel-stage][data-slice="8"] { fill: var(--chart-8); }
  [data-funnel-stage][data-slice="9"] { fill: var(--chart-9); }

  [data-funnel-label] {
    fill: var(--chart-fg);
    font-weight: var(--a-weight-medium);
  }
  [data-funnel-value] {
    fill: var(--chart-fg);
    font-weight: var(--a-weight-semibold);
  }
  [data-funnel-drop] {
    fill: var(--chart-label);
  }

  /* ── Treemap ──
     Flat tiles — each rect filled by the data palette. Labels +
     values appear only on tiles large enough to fit them (size
     check done in JS). Rounded corners pick up the standard
     --a-radius via #resolveRadius(). */
  [data-treemap-tile] {
    stroke: var(--chart-dot-stroke);
    stroke-width: 0;
  }
  [data-treemap-tile][data-slice="0"] { fill: var(--chart-0); }
  [data-treemap-tile][data-slice="1"] { fill: var(--chart-1); }
  [data-treemap-tile][data-slice="2"] { fill: var(--chart-2); }
  [data-treemap-tile][data-slice="3"] { fill: var(--chart-3); }
  [data-treemap-tile][data-slice="4"] { fill: var(--chart-4); }
  [data-treemap-tile][data-slice="5"] { fill: var(--chart-5); }
  [data-treemap-tile][data-slice="6"] { fill: var(--chart-6); }
  [data-treemap-tile][data-slice="7"] { fill: var(--chart-7); }
  [data-treemap-tile][data-slice="8"] { fill: var(--chart-8); }
  [data-treemap-tile][data-slice="9"] { fill: var(--chart-9); }

  [data-treemap-label] {
    fill: var(--a-canvas-0);
    font-weight: var(--a-weight-semibold);
  }
  [data-treemap-value] {
    fill: var(--a-canvas-0);
    opacity: 0.85;
  }

  /* ── Sankey ──
     Left + right column nodes, curved bezier flows between. Flow
     bands render semi-transparent so overlapping routes remain
     distinguishable. Nodes adopt the data palette. */
  [data-sankey-node] {
    fill: var(--chart-bar);
  }
  [data-sankey-node][data-slice="0"] { fill: var(--chart-0); }
  [data-sankey-node][data-slice="1"] { fill: var(--chart-1); }
  [data-sankey-node][data-slice="2"] { fill: var(--chart-2); }
  [data-sankey-node][data-slice="3"] { fill: var(--chart-3); }
  [data-sankey-node][data-slice="4"] { fill: var(--chart-4); }
  [data-sankey-node][data-slice="5"] { fill: var(--chart-5); }
  [data-sankey-node][data-slice="6"] { fill: var(--chart-6); }
  [data-sankey-node][data-slice="7"] { fill: var(--chart-7); }
  [data-sankey-node][data-slice="8"] { fill: var(--chart-8); }
  [data-sankey-node][data-slice="9"] { fill: var(--chart-9); }

  [data-sankey-link] {
    fill: var(--a-fg-subtle);
    opacity: 0.35;
  }
  [data-sankey-link]:hover {
    opacity: 0.6;
  }
  [data-sankey-label] {
    fill: var(--chart-fg);
    font-weight: var(--a-weight-medium);
  }

  /* ── Composed (bar + line overlay) ──
     The bar uses slot 0 + the line uses slot 1 by default via the
     --color-{key} injection in chart.js. CSS here just makes sure
     the line reads over the bar visually — the line's data-line
     element already picks up existing [data-line] styling. */
  :scope[type="composed"] [data-line] {
    stroke-width: calc(var(--chart-line-width) + 1);
  }
  :scope[type="composed"] [data-dot] {
    stroke: var(--chart-dot-stroke);
    stroke-width: 2;
  }

  /* ── Sparkline container ──
     `height: 100%` fills an explicit parent height (e.g. when the
     containing section is a flex-grow item inside card-ui). Falls
     back to `min-height: 2rem` when the parent has no explicit height. */
  :scope[type="sparkline"] {
    height: 100%;
    min-height: 2rem;
  }

  /* ── Segments chart ──
     Single horizontal stacked bar — render at a fixed compact height
     unless the host explicitly sizes it. */
  :scope[type="segments"] svg {
    height: 1.5rem;
  }
  [data-sparkline] {
    display: block;
    width: 100%;
    height: 100%;
  }
  [data-sparkline] svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ═══════ Color variants ═══════ */

  :scope[color="success"] {
    --chart-bar:      var(--a-success-strong);
    --chart-bar-hover: var(--a-success-bg-hover);
    --chart-line:     var(--a-success-strong);
    --chart-dot:      var(--a-success-strong);
  }

  :scope[color="warning"] {
    --chart-bar:      var(--a-warning-strong);
    --chart-bar-hover: var(--a-warning-bg-hover);
    --chart-line:     var(--a-warning-strong);
    --chart-dot:      var(--a-warning-strong);
  }

  :scope[color="danger"] {
    --chart-bar:      var(--a-danger-strong);
    --chart-bar-hover: var(--a-danger-bg-hover);
    --chart-line:     var(--a-danger-strong);
    --chart-dot:      var(--a-danger-strong);
  }

  :scope[color="info"] {
    --chart-bar:      var(--a-info);
    --chart-bar-hover: var(--a-info-bg-hover);
    --chart-line:     var(--a-info);
    --chart-dot:      var(--a-info);
  }

  :scope[color="accent"] {
    --chart-bar:      var(--a-accent);
    --chart-bar-hover: var(--a-accent-bg-hover);
    --chart-line:     var(--a-accent);
    --chart-dot:      var(--a-accent);
  }

  /* ── Tooltip hit-target cursor ──
     Invisible circles in line/sparkline/multi-line/radar renderers carry
     data-hit; give them a pointer cursor so the affordance is discoverable. */
  [data-hit] { cursor: default; }
}

/* ─────────────────────────────────────────────────────────────────
   Chart tooltip (top-layer, outside @scope)

   Rendered via the Popover API, so inherits from :root, not <chart-ui>.
   Content is assembled from data-tip-* attrs by chart.js at pointer
   events. Structure:
     <span data-tip-role="series">Series name</span>   (optional)
     <span data-tip-role="label">X-axis label</span>
     <span data-tip-role="value">45 (33.3%)</span>
   ───────────────────────────────────────────────────────────────── */

.chart-tooltip-popup {
  --chart-tooltip-bg:       var(--a-fg);
  --chart-tooltip-fg:       var(--a-bg);
  --chart-tooltip-px:       var(--a-space-2-5);
  --chart-tooltip-py:       var(--a-space-1-5);
  --chart-tooltip-radius:   var(--a-radius-sm);
  --chart-tooltip-shadow:   var(--a-shadow-md);
  --chart-tooltip-gap:      var(--a-space-0-5);

  box-sizing: border-box;
  margin: 0;
  padding: var(--chart-tooltip-py) var(--chart-tooltip-px);
  background: var(--chart-tooltip-bg);
  color: var(--chart-tooltip-fg);
  font-family: var(--a-font-family);
  font-size: var(--a-ui-sm);
  line-height: 1.35;
  border: none;
  border-radius: var(--chart-tooltip-radius);
  box-shadow: var(--chart-tooltip-shadow);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--chart-tooltip-gap);
  min-width: 0;
  max-width: 20rem;
  position: fixed;
  inset: unset;
}

.chart-tooltip-popup:popover-open {
  display: flex;
}

.chart-tooltip-popup [data-tip-role="series"] {
  font-size: var(--a-ui-tiny);
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart-tooltip-popup [data-tip-role="label"] {
  font-weight: 500;
}

.chart-tooltip-popup [data-tip-role="value"] {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

.chart-tooltip-popup [data-tip-role="pct"] {
  opacity: 0.6;
}
