/* ============================================================================
   Chartsmade (@lookgoodtools/chartsmade) — extends the design system's chart component (components/chart/chart.css).
   Load order: tokens/base.css → tokens/themes/<theme>.css → components/_base.css → chart/chart.css → this file.
   Scope: figures rendered by the library carry [data-charts]; nothing here touches a hand-written ds-chart.
   DS tokens only. New knobs a theme or site may set:
     --ds-chart-up    rising values, up candles      (default --ds-success)
     --ds-chart-down  falling values, down candles   (default --ds-danger)
     --ds-chart-total waterfall totals               (default --ds-ink-muted)
     --ds-chart-bg    the plane the chart sits on    (default --ds-surface; set it when the chart sits on the ground)
   New parts: __layer (HTML labels over the plot) · __panes / data-pane="upper" (stacked panes sharing x) ·
     __rect (bars, waterfall steps) · __candle · __wick · __tick-mark (OHLC) · __vol · __connector · __gridline ·
     __zero · __band (shaded x range) · __event (rule) · __ref (reference line) · __seam (stacked-area gap) ·
     __stem · __guide (slope verticals) · __event-label · __band-label · __ref-label · __end-label · __value ·
     __row-label · __slope-label · __col-title · __axis-title · __pane-label · __num · __notes · __caveat ·
     __subtitle · __source · __facets · __facet · __facet-title · .ds-spark (sparkline)
   ========================================================================== */

.ds-chart[data-charts] {
  position: relative;
  --_up:    var(--ds-chart-up, var(--ds-success));
  --_down:  var(--ds-chart-down, var(--ds-danger));
  --_total: var(--ds-chart-total, var(--ds-ink-muted));
  --_bg:    var(--ds-chart-bg, var(--ds-surface));
  --_series-4: var(--ds-data-2);
  --_series-5: var(--ds-data-6);
  --_series-6: var(--ds-data-7);
  --_series-7: var(--ds-data-5);
  --_series-8: var(--ds-data-8);
  --_xpad: calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2));
  --_pe: 0px;
  container-type: inline-size;
  gap: var(--ds-space-3);
}

/* ---- colour: every part reads --_c, set from its paint attribute (an inline --_c token wins) ---- */
.ds-chart[data-charts] [data-series="1"] { --_c: var(--_series-1); }
.ds-chart[data-charts] [data-series="2"] { --_c: var(--_series-2); }
.ds-chart[data-charts] [data-series="3"] { --_c: var(--_series-3); }
.ds-chart[data-charts] [data-series="4"] { --_c: var(--_series-4); }
.ds-chart[data-charts] [data-series="5"] { --_c: var(--_series-5); }
.ds-chart[data-charts] [data-series="6"] { --_c: var(--_series-6); }
.ds-chart[data-charts] [data-series="7"] { --_c: var(--_series-7); }
.ds-chart[data-charts] [data-series="8"] { --_c: var(--_series-8); }
.ds-chart[data-charts] [data-ramp="1"] { --_c: var(--ds-chart-ramp-1); }
.ds-chart[data-charts] [data-ramp="2"] { --_c: var(--ds-chart-ramp-2); }
.ds-chart[data-charts] [data-ramp="3"] { --_c: var(--ds-chart-ramp-3); }
.ds-chart[data-charts] [data-role="comparison"] { --_c: var(--ds-chart-comparison); }
.ds-chart[data-charts] [data-tone="up"] { --_c: var(--_up); }
.ds-chart[data-charts] [data-tone="down"] { --_c: var(--_down); }
.ds-chart[data-charts] [data-tone="total"] { --_c: var(--_total); }
.ds-chart[data-charts] [data-tone="muted"] { --_c: var(--ds-ink-faint); }
.ds-chart[data-charts] [data-tone="ink"] { --_c: var(--ds-ink); }
.ds-chart[data-charts] .ds-chart__line:is([data-series], [data-tone], [data-token], [data-ramp]) { stroke: var(--_c); }
.ds-chart[data-charts] .ds-chart__swatch:is([data-tone], [data-token]) { background: var(--_c); }

/* ---- head + foot ---- */
.ds-chart[data-charts] .ds-chart__heading { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ds-chart[data-charts] .ds-chart__title { display: block; text-wrap: balance; line-height: var(--ds-lh-tight, 1.25); }
.ds-chart__subtitle { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); line-height: var(--ds-lh-list); }
.ds-chart__source { display: flex; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); }
/* the badge (RenderOpts.badge): a small link at the end of the foot line, e.g. "Made with Chartsmade"; not printed */
.ds-chart__badge { margin-inline-start: auto; color: inherit; text-decoration: none; white-space: nowrap; border-radius: 2px; }
a.ds-chart__badge:hover { color: var(--ds-ink); text-decoration: underline; text-underline-offset: 2px; }
a.ds-chart__badge:focus-visible { outline: 2px solid var(--ds-focus-ring, var(--ds-ink)); outline-offset: 2px; color: var(--ds-ink); }
@media print { .ds-chart__badge { display: none; } }
/* the brand line (RenderOpts.footer, brand.logoSvg): the logo and the name under the foot line; the logo is 1.9 em of the foot text, the name 1.12 em at 650, as the image backend draws them */
.ds-chart__brandline { display: flex; align-items: center; gap: .55em; margin: 0; font-size: var(--ds-text-xs); color: var(--ds-ink); }
.ds-chart__logo { flex: none; height: 1.9em; width: auto; max-width: 11.4em; color: var(--ds-ink); }
.ds-chart__brandname { font-size: 1.12em; font-weight: 650; line-height: 1.3; }
.ds-chart__caveat { margin: 0; color: var(--ds-ink-2); font-size: var(--ds-text-xs); line-height: var(--ds-lh-list); padding-inline-start: var(--ds-space-3); border-inline-start: 2px solid var(--ds-rule-strong); }
.ds-chart[data-charts] .ds-chart__table caption { caption-side: top; text-align: start; color: var(--ds-ink-muted); font-size: var(--ds-text-xs); padding-block-end: var(--ds-space-2); }

/* ---- plot geometry: the SVG box is exactly --_h tall; x labels sit in --_xpad below it ---- */
.ds-chart[data-charts] .ds-chart__plot { box-sizing: border-box; height: calc(var(--_h) + var(--_xpad)); padding-block-end: var(--_xpad); padding-inline-end: var(--_pe); }
.ds-chart[data-charts] .ds-chart__plot[data-pane="upper"] { --_xpad: 0px; }
.ds-chart[data-charts] .ds-chart__plot[data-x="wrap"] { --_xpad: calc(var(--ds-text-xs) * 1.3 * 2 + var(--ds-space-2)); }
.ds-chart[data-charts] .ds-chart__plot[data-x="none"] { --_xpad: 0px; }
.ds-chart[data-charts] .ds-chart__plot[data-x="two"] { --_xpad: calc(var(--ds-text-xs) * 1.25 * 2 + var(--ds-space-2)); }
.ds-chart[data-charts] .ds-chart__plot[data-axis-y="wide"] { --_y-w: calc(max(72px, min(calc(var(--_ywe, 15) * var(--ds-text-sm) + var(--ds-space-3) + 4px), 44cqi)) + var(--_pn, 0px)); }
/* horizontal bars with negative values: their values get a column between the row names and the plot */
.ds-chart[data-charts] .ds-chart__plot[data-gutter-neg] { --_pn: calc(var(--_pne, 0) * var(--_lf, var(--ds-text-xs)) + var(--ds-space-2)); }
/* the y tick inset: the style's own (--_y-base), or wider when the longest tick needs it (--_yte: its width in em,
   from the web backend; --_ytf: the tick font size). Keeps '1,000' or '−20%' inside the figure at any width. */
.ds-chart[data-charts] .ds-chart__plot[data-axis-y] { --_y-base: 40px; }
.ds-chart[data-charts] .ds-chart__plot[data-axis-y="currency"] { --_y-base: 56px; }
.ds-chart[data-charts] .ds-chart__plot[data-axis-y]:not([data-axis-y="wide"]):not([data-gutter-start]) { --_y-w: max(var(--_y-base), calc(var(--_yte, 0) * var(--_ytf, var(--ds-text-xs)) + var(--ds-space-2) + 3px)); }
.ds-chart[data-charts] .ds-chart__plot[data-axis-y2] { --_pe: 52px; }
.ds-chart[data-charts] .ds-chart__y { inset-block: 0 var(--_xpad); }
.ds-chart[data-charts] .ds-chart__y[data-side="end"] { inset-inline: auto 0; width: var(--_pe); }
.ds-chart[data-charts] .ds-chart__y[data-side="end"] span { inset-inline: var(--ds-space-2) auto; }
.ds-chart[data-charts] .ds-chart__x { inset-inline: var(--_y-w, 0px) var(--_pe); }
.ds-chart__panes { display: flex; flex-direction: column; gap: var(--ds-space-3); }

/* tick labels in a series' text-safe ink (dual axis only) */
.ds-chart[data-charts] .ds-chart__y span[data-series="1"] { color: var(--ds-data-1-ink); }
.ds-chart[data-charts] .ds-chart__y span[data-series="2"] { color: var(--ds-data-4-ink); }
:where([data-theme="ledger"], [data-theme="jstov"]) .ds-chart[data-charts] .ds-chart__y span[data-series="1"] { color: var(--ds-ink); }

/* category labels under bars / waterfall steps: centred on the band, wrap to two lines */
.ds-chart[data-charts] .ds-chart__plot[data-x="wrap"] .ds-chart__x { height: calc(var(--ds-text-xs) * 1.3 * 2); }
.ds-chart[data-charts] .ds-chart__plot[data-x="wrap"] .ds-chart__x span { transform: translateX(-50%); text-align: center; white-space: normal; width: calc(var(--_bwe, var(--_bw, 10)) * 1%); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* columns kept upright (layout.autoHorizontal: false) whose names do not fit two lines on a phone: in a narrow
   container the names alternate between two rows, each two bands wide less a gap, and end in an ellipsis past that,
   so neighbours never run together. The first and last sit flush with the plot's edges. */
@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__plot[data-x-narrow="stagger"] .ds-chart__x span { display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: none; line-height: 1.3; width: calc(var(--_bw, 10) * 2% - 6px); }
  .ds-chart[data-charts] .ds-chart__plot[data-x-narrow="stagger"] .ds-chart__x span:nth-child(even) { inset-block-start: 1.3em; }
  .ds-chart[data-charts] .ds-chart__plot[data-x-narrow="stagger"] .ds-chart__x span:first-child { inset-inline-start: 0; transform: none; text-align: start; width: calc((var(--_x, 0) + var(--_bw, 10)) * 1% - 3px); }
  .ds-chart[data-charts] .ds-chart__plot[data-x-narrow="stagger"] .ds-chart__x span:last-child { inset-inline: auto 0; transform: none; text-align: end; width: calc((100 - var(--_x, 100) + var(--_bw, 10)) * 1% - 3px); }
}

/* ---- SVG marks (strokes never scale with the viewBox) ---- */
.ds-chart[data-charts] .ds-chart__svg :is(line, path, rect) { vector-effect: non-scaling-stroke; }
.ds-chart__gridline { stroke: var(--ds-chart-grid); stroke-width: 1; }
.ds-chart__zero { stroke: var(--ds-rule-strong); stroke-width: 1; }
.ds-chart__band { fill: color-mix(in srgb, var(--ds-ink) 4.5%, transparent); }
.ds-chart__event { stroke: var(--ds-ink-faint); stroke-width: 1; }
.ds-chart__ref { stroke: var(--ds-ink-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.ds-chart__connector { stroke: var(--ds-ink-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.ds-chart__guide { stroke: var(--ds-rule); stroke-width: 1; }
.ds-chart__seam { fill: none; stroke: var(--_bg); stroke-width: 1.5px; stroke-linejoin: round; }
.ds-chart[data-charts] .ds-chart__line[data-dash] { stroke-dasharray: 5 4; }
.ds-chart[data-charts] .ds-chart__area[data-fill="strong"] { --_area-alpha: 82%; }
.ds-chart[data-charts] .ds-chart__area[data-fill="mid"] { --_area-alpha: 40%; }
.ds-chart[data-charts] .ds-chart__area[data-fill="faint"] { --_area-alpha: 9%; }
.ds-chart[data-charts] .ds-chart__area:is([data-series], [data-token], [data-tone], [data-ramp]) { fill: color-mix(in srgb, var(--_c) var(--_area-alpha), transparent); }
.ds-chart__rect { fill: var(--_c, var(--_series-1)); }
.ds-chart__candle { fill: var(--_c); stroke: var(--_c); stroke-width: 1; }
.ds-chart__candle[data-hollow] { fill: var(--_bg); }
.ds-chart__wick { stroke: var(--_c); stroke-width: 1; }
.ds-chart__tick-mark { stroke: var(--_c); stroke-width: 1.5px; }
.ds-chart__vol { fill: color-mix(in srgb, var(--_c) 45%, transparent); }
.ds-chart__stem { stroke: var(--_c, var(--ds-rule-strong)); stroke-width: calc(2px * var(--_lw, 1)); stroke-linecap: round; }
:is(.ds-chart[data-kind="dumbbell"], .ds-chart__view[data-kind="dumbbell"]) .ds-chart__stem { stroke-width: calc(3px * var(--_lw, 1)); }
:is(.ds-chart[data-kind="dumbbell"], .ds-chart__view[data-kind="dumbbell"]) .ds-chart__stem:not([data-tone], [data-token]) { stroke: var(--ds-rule-strong); }

/* ---- the HTML layer: labels and dots placed by percent over the SVG box ---- */
.ds-chart__layer { position: absolute; inset-inline: var(--_y-w, 0px) var(--_pe); inset-block: 0 var(--_xpad); pointer-events: none; }
.ds-chart__layer > * { position: absolute; inset-inline-start: calc(var(--_x, 0) * 1%); inset-block-start: calc(var(--_y, 0) * 1%); translate: var(--_tx, 0) var(--_ty, 0); }
.ds-chart__layer > [data-anchor="middle"] { --_tx: -50%; }
.ds-chart__layer > [data-anchor="end"] { --_tx: -100%; }
/* a centred label near an edge (--_lwe: its width in em) stays inside the figure: its centre is clamped half its width
   in from the plot's start (less the y inset) and end (plus the end gutter) */
.ds-chart[data-charts] .ds-chart__layer > span[data-anchor="middle"][style*="--_lwe"] { inset-inline-start: clamp(calc(var(--_lwe) * 0.5em + 2px - var(--_y-w, 0px)), calc(var(--_x, 0) * 1%), calc(100% + var(--_pe, 0px) - var(--_lwe) * 0.5em - 2px)); }
.ds-chart__layer > [data-valign="middle"] { --_ty: -50%; }
.ds-chart__layer > [data-valign="bottom"] { --_ty: -100%; }
.ds-chart__layer > span { font-size: var(--ds-text-xs); line-height: 1.25; white-space: nowrap; color: var(--ds-ink-2); font-variant-numeric: tabular-nums; }
.ds-chart__layer > [data-ink="muted"] { color: var(--ds-ink-muted); }
.ds-chart__layer > [data-ink="ink"] { color: var(--ds-ink); }
.ds-chart__layer > [data-ink="strong"] { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-chart__layer .ds-chart__dot { inset-inline-start: calc(var(--_x, 0) * 1%); inset-block-start: calc(var(--_y, 0) * 1%); background: var(--_c, var(--_series-1)); border-color: var(--_bg); translate: none; }
.ds-chart__layer .ds-chart__dot[data-hollow] { background: var(--_bg); border: 2px solid var(--_c, var(--_series-1)); }
.ds-chart__layer .ds-chart__dot[data-size="4"] { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.ds-chart__layer .ds-chart__dot[data-size="5"] { width: 12px; height: 12px; margin: -6px 0 0 -6px; }

.ds-chart__event-label, .ds-chart__band-label { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding-inline: 2px; background: var(--_bg); border-radius: var(--ds-radius-xs); }
.ds-chart__band-label { background: transparent; color: var(--ds-ink-muted); font-style: normal; }
.ds-chart__num { display: none; place-items: center; min-width: 15px; height: 15px; padding-inline: 3px; border-radius: var(--ds-radius-pill); background: var(--ds-ink-2); color: var(--_bg); font-size: 10px; font-weight: var(--ds-weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.ds-chart__event-label:not(:has(> span)) .ds-chart__num { display: inline-grid; }
.ds-chart__ref-label { background: var(--_bg); padding-inline: 2px; }
.ds-chart__end-label { margin-inline-start: var(--ds-space-2); font-weight: var(--ds-weight-semibold); }
.ds-chart__end-label .ds-chart__swatch { display: none; }
.ds-chart__value { font-weight: var(--ds-weight-medium); }
/* a phone's dumbbell (spec.mobile) names each row above its dots */
.ds-chart__layer > .ds-chart__row-name { font-weight: var(--ds-weight-medium); }
.ds-chart__row-label { margin-inline-start: calc(-1 * var(--ds-space-3) - var(--_pn, 0px)); max-width: calc(var(--_y-w, 120px) - var(--_pn, 0px) - var(--ds-space-3) - 2px); overflow: hidden; text-overflow: ellipsis; font-size: var(--ds-text-sm) !important; }
.ds-chart__slope-label { max-width: min(var(--_max, 200px), var(--_maxp, 100%)); }
.ds-chart__slope-label[data-anchor="end"] { display: flex; justify-content: flex-end; }
/* the name gives way first; the value always shows */
.ds-chart__slope-label b { font-weight: var(--ds-weight-medium); color: var(--ds-ink); margin-inline-end: var(--ds-space-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-chart__slope-label[data-anchor="end"] { color: var(--ds-ink-2); }
.ds-chart__col-title { font-family: var(--ds-font-label); text-transform: var(--ds-label-case); letter-spacing: var(--ds-label-tracking); font-weight: var(--ds-weight-semibold); }
.ds-chart__pane-label { position: absolute; inset-inline-start: var(--ds-space-1); inset-block-start: var(--_lt, 0px); display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-xs); line-height: 1.25; color: var(--ds-ink-muted); background: var(--_bg); padding-inline-end: var(--ds-space-1); z-index: 1; translate: none; }
.ds-chart__axis-title { position: absolute; inset-block-start: 0; display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); color: var(--ds-ink-2); white-space: nowrap; }
.ds-chart__axis-title[data-side="start"] { inset-inline-start: 0; }
.ds-chart__axis-title[data-side="end"] { inset-inline-end: 0; }

.ds-chart__notes { display: none; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); margin: 0; padding: 0; list-style: none; font-size: var(--ds-text-xs); color: var(--ds-ink-2); }
.ds-chart__notes[data-always] { display: flex; }
.ds-chart__notes li { display: inline-flex; align-items: center; gap: var(--ds-space-2); }
.ds-chart__notes .ds-chart__num { display: inline-grid; }

/* hover layer inside __layer (the progressive script adds it) */
.ds-chart__layer .ds-chart__crosshair { inset-inline-start: calc(var(--_x, 0) * 1%); inset-block: 0; }
.ds-chart__layer .ds-chart__tooltip { inset-inline-start: calc(var(--_x, 0) * 1% + var(--ds-space-3)); inset-block-start: var(--ds-space-2); translate: none; white-space: normal; }
.ds-chart__layer .ds-chart__tooltip[data-side="start"] { inset-inline-start: auto; inset-inline-end: calc(100% - var(--_x, 0) * 1% + var(--ds-space-3)); }
/* the tooltip sizes to its content against the FIGURE (the chart is the inline-size container), not the plot it sits
   in: a small multiple's panel is too narrow for "Northbridge £11.6m" at 60% of it. A name takes the room its value
   leaves and wraps at spaces (a single word longer than that breaks); a value never wraps or shrinks, so it never
   runs past the box. charts-hover.js then keeps the box inside the figure (and the viewport). */
.ds-chart[data-charts] .ds-chart__layer .ds-chart__tooltip { box-sizing: border-box; width: max-content; min-width: min(140px, 100cqi); max-width: min(260px, 100cqi); }
.ds-chart[data-charts] .ds-chart__tooltip :is(b, .ds-chart__tooltip-src) { overflow-wrap: break-word; }
.ds-chart[data-charts] .ds-chart__tooltip-row { flex-wrap: wrap; column-gap: var(--ds-space-3); }
.ds-chart[data-charts] .ds-chart__tooltip-row > span:first-child { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.ds-chart[data-charts] .ds-chart__tooltip-row > span:last-child { flex: 0 0 auto; margin-inline-start: auto; white-space: nowrap; text-align: end; }
.ds-chart__tooltip-row > span:first-child { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-2); }
/* the keyboard's row in a column (up / down arrows) */
.ds-chart__tooltip-row[data-on] { box-shadow: inset 2px 0 0 var(--ds-ink); padding-inline-start: var(--ds-space-2); margin-inline-start: calc(-1 * var(--ds-space-2)); }
.ds-chart__tooltip-row[data-on] > span { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-chart__tooltip-src { display: block; margin-block-start: var(--ds-space-1); padding-block-start: var(--ds-space-1); border-block-start: 1px solid var(--ds-rule); color: var(--ds-ink-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-regular, 400); }
/* round marks (beeswarm and slope dots) are ringed, not boxed */
.ds-chart__layer > .ds-chart__hover-box[data-shape="round"] { width: var(--_d); height: var(--_d); border-radius: 50%; translate: -50% -50%; }
/* the runtime's live region (keyboard read-outs, toggles, zoom): read out, never seen */
.ds-chart[data-charts] > .ds-chart__live { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ---- legend toggles (charts-hover.js): each keyed item is a button; an off series keeps a hollow key ---- */
.ds-chart[data-charts] .ds-chart__toggle { display: inline-flex; align-items: center; gap: var(--ds-space-2, 8px); margin: -2px 0; padding: 2px 4px 2px 0; border: 0; border-radius: var(--ds-radius-xs); background: none; color: inherit; font: inherit; cursor: pointer; }
.ds-chart[data-charts] .ds-chart__toggle:hover { background: color-mix(in srgb, var(--ds-ink) 7%, transparent); }
.ds-chart[data-charts] .ds-chart__toggle:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 1px; }
.ds-chart[data-charts] .ds-chart__legend-item[data-off] { color: var(--ds-ink-muted); }
.ds-chart[data-charts] .ds-chart__legend-item[data-off] b { font-weight: var(--ds-weight-regular, 400); text-decoration: line-through; text-decoration-thickness: 1px; }
.ds-chart[data-charts] .ds-chart__legend-item[data-off] .ds-chart__swatch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--_c, var(--ds-ink-muted)); }
.ds-chart[data-charts] .ds-chart__legend-item[data-off] .ds-chart__swatch::after { display: none; }
.ds-chart[data-charts] .ds-chart__legend-item[data-off] .ds-chart__swatch[data-shape="line"] { height: 0; box-shadow: none; border-top: 2px dotted var(--_c, var(--ds-ink-muted)); }
.ds-chart[data-charts] .ds-chart__plot [data-series-off] { display: none; }
.ds-chart[data-charts][data-toggles] .ds-chart__layer > .ds-chart__end-label[data-toggle] { pointer-events: auto; cursor: pointer; }
.ds-chart[data-charts][data-toggles] .ds-chart__layer > .ds-chart__end-label[data-toggle]:hover b, .ds-chart[data-charts][data-toggles] .ds-chart__layer > .ds-chart__end-label[data-toggle]:hover { text-decoration: underline; text-underline-offset: 2px; }
/* a key that only shows on phones (names sit on the line ends) is still the keyboard's way to the toggles:
   off screen until a toggle has focus, then shown in place */
@container (min-width: 481px) {
  .ds-chart[data-charts][data-toggles] .ds-chart__legend[data-when="narrow"] { display: flex; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ds-chart[data-charts][data-toggles] .ds-chart__legend[data-when="narrow"]:focus-within { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}
/* ---- brush zoom (charts-hover.js): the band while dragging or pinching, and the chip while zoomed ---- */
.ds-chart[data-charts][data-zoomable] :is(.ds-chart__plot:not([data-view="narrow"] .ds-chart__plot)) { touch-action: pan-y; }
.ds-chart[data-charts][data-zoomable] .ds-chart__plot:not([data-view="narrow"] .ds-chart__plot) .ds-chart__svg { cursor: crosshair; }
.ds-chart[data-charts][data-brushing] { user-select: none; -webkit-user-select: none; }
.ds-chart__layer > .ds-chart__brush { position: absolute; inset-block: 0; inset-inline-start: calc(var(--_x, 0) * 1%); width: calc(var(--_bw, 0) * 1%); background: color-mix(in srgb, var(--ds-ink) 9%, transparent); border-inline: 1.5px solid var(--ds-ink-muted); pointer-events: none; }
.ds-chart[data-charts] > .ds-chart__zoombar { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-2); min-height: 28px; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
.ds-chart[data-charts] .ds-chart__zoom-reset { flex: none; padding: 3px 10px; border: 1px solid var(--ds-rule-strong, var(--ds-ink-faint)); border-radius: var(--ds-radius-pill); background: var(--_bg); color: var(--ds-ink); font: inherit; font-weight: var(--ds-weight-semibold, 600); cursor: pointer; }
.ds-chart[data-charts] .ds-chart__zoom-reset:hover { border-color: var(--ds-ink); }
.ds-chart[data-charts] .ds-chart__zoom-reset:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.ds-chart[data-charts] .ds-chart__plot[role="application"]:focus-visible { outline: 2px solid var(--ds-focus-ring, var(--ds-ink)); outline-offset: 4px; }
.ds-chart__swatch[data-hollow] { background: var(--_bg); box-shadow: inset 0 0 0 2px var(--_c); }

/* ---- small multiples ---- */
.ds-chart__facets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: var(--ds-space-5) var(--ds-space-5); }
.ds-chart__facet { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; }
.ds-chart__facet-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); }
.ds-chart__facet-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-chart__facet-title b { font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); font-variant-numeric: tabular-nums; }
.ds-chart__facet .ds-chart__x span:first-child { transform: none; }

/* ---- narrow containers (a 390 px phone): labels thin out, event labels become numbers ---- */
@container (max-width: 480px) {
  .ds-chart[data-charts] [data-thin="1"] { display: none; }
  .ds-chart__event-label > span { display: none; }
  .ds-chart__event-label .ds-chart__num { display: inline-grid; }
  .ds-chart__notes { display: flex; }
  .ds-chart[data-charts] .ds-chart__plot[data-axis-y2] { --_pe: 44px; }
  .ds-chart__axis-title { max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- sparkline: tiny, no axes; the SVG is decoration, the sentence carries the numbers ---- */
.ds-spark { display: inline-block; position: relative; inline-size: var(--ds-spark-w, 6em); block-size: var(--ds-spark-h, 1.5em); vertical-align: middle; }
.ds-spark svg { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.ds-spark__line { fill: none; stroke: var(--_c, var(--ds-data-primary, var(--ds-data-1))); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-spark__bar { fill: var(--_c, var(--ds-data-primary, var(--ds-data-1))); }
.ds-spark__bar[data-neg] { fill: var(--ds-chart-down, var(--ds-danger)); }
.ds-spark__sr { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (forced-colors: active) {
  .ds-chart__rect, .ds-chart__candle, .ds-spark__bar { fill: CanvasText; }
  .ds-chart__candle[data-hollow] { fill: Canvas; stroke: CanvasText; }
}

/* ---- fixed-size keys: chart swatches and dots do not scale with a theme's spacing unit ---- */
.ds-chart[data-charts] .ds-chart__swatch { width: 14px; height: 8px; }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="line"] { width: 16px; height: 2px; }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="line"]::after { width: 7px; height: 7px; }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="square"] { width: 10px; height: 10px; border-radius: 2px; }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="dot"] { width: 8px; height: 8px; }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="dot"][data-hollow] { width: 10px; height: 10px; background: var(--_bg); box-shadow: inset 0 0 0 2px var(--_c, var(--ds-ink-muted)); }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="line"][data-dash] { background: repeating-linear-gradient(to right, var(--_c) 0 4px, transparent 4px 7px); }
.ds-chart[data-charts] .ds-chart__swatch[data-shape="line"][data-dash]::after { display: none; }
.ds-chart[data-charts] .ds-chart__legend { gap: var(--ds-space-1) var(--ds-space-4); font-size: var(--ds-text-xs); }
.ds-chart__layer .ds-chart__dot { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-width: 2px; }
.ds-chart__band-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--ds-ink) 12%, transparent); }

/* x tick alignment is decided by the renderer (edge ticks align to their edge), not by :first/:last-child */
.ds-chart[data-charts] .ds-chart__x span[data-align] { transform: translateX(-50%); text-align: center; }
.ds-chart[data-charts] .ds-chart__x span[data-align="start"] { transform: none; text-align: start; }
.ds-chart[data-charts] .ds-chart__x span[data-align="end"] { transform: translateX(-100%); text-align: end; }
/* a centred first / last tick wider than its room sits flush with the plot's edge instead: on a phone, or at every
   width (data-edge-all) */
.ds-chart[data-charts] .ds-chart__x span[data-edge="start"][data-edge-all] { inset-inline-start: 0; transform: none; text-align: start; }
.ds-chart[data-charts] .ds-chart__x span[data-edge="end"][data-edge-all] { inset-inline: auto 0; transform: none; text-align: end; }
@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__x span[data-edge="start"] { inset-inline-start: 0; transform: none; text-align: start; }
  .ds-chart[data-charts] .ds-chart__x span[data-edge="end"] { inset-inline: auto 0; transform: none; text-align: end; }
}
@container (max-width: 480px) {
  .ds-chart__facets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-4) var(--ds-space-3); }
  .ds-chart__facet .ds-chart__plot[data-axis-y] { --_y-base: 34px; }
  .ds-chart__facet .ds-chart__plot[data-axis-y="currency"] { --_y-base: 40px; }
  .ds-chart__facet-title { font-size: var(--ds-text-xs); }
}

/* ---- editorial emphasis: highlighted series in colour and heavier; the rest a neutral grey underneath ---- */
.ds-chart[data-charts] [data-role="context"] { --_c: var(--ds-chart-comparison); }
.ds-chart[data-charts] .ds-chart__line[data-role="context"] { stroke: var(--_c); stroke-width: calc(1.5px * var(--_lw, 1)); stroke-dasharray: none; }
.ds-chart[data-charts] .ds-chart__line[data-emph] { stroke-width: calc(2.5px * var(--_lw, 1)); }
.ds-chart[data-charts] .ds-chart__rect[data-role="context"] { fill: color-mix(in srgb, var(--ds-chart-comparison) 55%, var(--_bg)); }
.ds-chart[data-charts] .ds-chart__stem[data-role="context"] { stroke: color-mix(in srgb, var(--ds-chart-comparison) 70%, var(--_bg)); }
.ds-chart[data-charts] .ds-chart__swatch[data-role="context"] { background: var(--ds-chart-comparison); }
.ds-chart[data-charts] .ds-chart__dot[data-role="context"] { background: var(--ds-chart-comparison); }
/* a hollow start marker stays hollow on context rows: the ring takes the row colour, the fill is the ground */
.ds-chart[data-charts] .ds-chart__layer .ds-chart__dot[data-hollow][data-role="context"] { background: var(--_bg); }
/* lgt: context marks are the palette swatch itself (stone on paper, line on ink), not a tint of it, so they keep 3:1 against
   the ground (WCAG 1.4.11). Only lgt; the doubled [data-charts] outranks the style and look rules above and below. */
[data-theme="lgt"] .ds-chart[data-charts][data-charts]:not([data-dial-contrast="high"]) :is(.ds-chart__rect, .ds-chart__ribbon)[data-role="context"] { fill: var(--ds-chart-comparison); }
[data-theme="lgt"] .ds-chart[data-charts][data-charts]:not([data-dial-contrast="high"]) .ds-chart__stem[data-role="context"] { stroke: var(--ds-chart-comparison); }
[data-theme="lgt"] .ds-chart[data-charts][data-charts]:not([data-dial-contrast="high"]) .ds-chart__line[data-role="context"] { stroke: var(--ds-chart-comparison); stroke-opacity: 1; opacity: 1; }

/* ---- direct labels: "Name 4.8%" at the line end; the name gives way in narrow containers ---- */
.ds-chart__end-label > span { font-weight: var(--ds-weight-regular, 400); }
.ds-chart__end-label[data-ink="muted"] > b { font-weight: var(--ds-weight-medium); }
.ds-chart[data-charts] .ds-chart__plot[data-gutter] { --_pe: max(var(--_pew, 0px), calc(var(--_pee, 0) * var(--_lf, var(--ds-text-xs)) + var(--ds-space-2) + 3px)); }

/* labels with a fixed px gap from their point (dumbbell values clear the dots at every width) */
.ds-chart__layer > [data-gap][data-anchor="start"] { --_tx: 11px; }
.ds-chart__layer > [data-gap][data-anchor="end"] { --_tx: calc(-100% - 11px); }

/* ---- callout: a note with a leader line at one point ---- */
.ds-chart__leader { stroke: var(--ds-ink-2); stroke-width: 1; }
.ds-chart__callout { padding: 1px 4px; background: var(--_bg); border-radius: var(--ds-radius-xs); }
.ds-chart__layer .ds-chart__dot[data-tone="ink"][data-hollow] { border-color: var(--ds-ink); }

/* ---- legend: top left, under the subtitle (the editorial convention; the image backend matches) ---- */
.ds-chart[data-charts] .ds-chart__legend { justify-content: flex-start; margin: 0; padding: 0; }
.ds-chart[data-charts] .ds-chart__legend[data-when="narrow"] { display: none; }

/* ---- two views of one chart: a narrow container swaps in the horizontal re-layout (no slanted labels) ---- */
.ds-chart__view[data-view="narrow"] { display: none; }
/* a phone's simpler kind (spec.mobile.swapKind): a line saying what it shows, its own key, then the plot, spaced as
   the figure spaces its parts; the wide view's key is hidden there */
.ds-chart__view-note { margin: 0; font-size: var(--ds-text-xs); line-height: 1.25; font-weight: var(--ds-weight-semibold); color: var(--ds-ink-2); }

@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__plot[data-gutter] { --_pe: max(var(--_pen, var(--_pew, 0px)), calc(var(--_pene, var(--_pee, 0)) * var(--_lf, var(--ds-text-xs)) + var(--ds-space-2) + 3px)); }
  .ds-chart[data-charts] .ds-chart__legend[data-when="narrow"] { display: flex; }
  .ds-chart__view[data-view="wide"] { display: none; }
  .ds-chart__view[data-view="narrow"] { display: block; }
  .ds-chart__view[data-view="narrow"][data-swapped] { display: flex; flex-direction: column; gap: inherit; }
  .ds-chart[data-charts] .ds-chart__legend[data-when="wide"] { display: none; }
  .ds-chart__callout { white-space: normal; max-width: 9em; }
}

/* ---- the data table: always in the markup, visually hidden unless data-table="visible". A <table> ignores
   width/height for overflow, so the hiding goes on a wrapper (otherwise it adds horizontal page scroll). ---- */
.ds-chart[data-charts]:not([data-table="visible"]) .ds-chart__table-wrap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ds-chart[data-charts]:not([data-table="visible"]) .ds-chart__table { position: static; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; }
.ds-chart[data-charts][data-table="visible"] .ds-chart__table-wrap { overflow-x: auto; }

/* ---- areabump: rank ribbons with names at both ends ---- */
.ds-chart[data-charts] .ds-chart__plot[data-gutter-start] { --_y-w: max(var(--_psw, 0px), calc(var(--_pse, 0) * var(--ds-text-xs) + 13px)); }
.ds-chart__ribbon { fill: color-mix(in srgb, var(--_c, var(--_series-1)) 90%, transparent); stroke: var(--_bg); stroke-width: 1.5px; stroke-linejoin: round; }
.ds-chart__ribbon[data-role="context"] { fill: color-mix(in srgb, var(--ds-chart-comparison) 45%, var(--_bg)); }
.ds-chart[data-kind="areabump"] .ds-chart__guide { stroke: var(--ds-chart-grid); }
.ds-chart__layer > .ds-chart__ribbon-label { font-weight: var(--ds-weight-semibold); color: color-mix(in oklab, var(--_c) 72%, var(--ds-ink)); }
.ds-chart__layer > .ds-chart__ribbon-label[data-ink="muted"] { color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); }
.ds-chart__layer > .ds-chart__ribbon-label[data-anchor="start"] { --_tx: 10px; }
.ds-chart__layer > .ds-chart__ribbon-label[data-anchor="end"] { --_tx: calc(-100% - 10px); }
.ds-chart__ribbon-label b { font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); }

/* ---- beeswarm: packed dots on one value axis ---- */
.ds-chart[data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot { width: calc(var(--_r) * 2); height: calc(var(--_r) * 2); margin: calc(var(--_r) * -1) 0 0 calc(var(--_r) * -1); box-sizing: border-box; border: 1px solid var(--_bg); border-radius: 50%; background: var(--_c, var(--_series-1)); }
.ds-chart[data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot[data-soft] { background: color-mix(in srgb, var(--_c, var(--_series-1)) 55%, var(--_bg)); }
.ds-chart[data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot[data-ring] { border: 1.5px solid var(--ds-ink); }
.ds-chart__median { stroke: var(--ds-ink-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.ds-chart__layer > .ds-chart__median-label { z-index: 1; padding-inline: 3px; background: var(--_bg); border-radius: var(--ds-radius-xs); }
.ds-chart__layer > .ds-chart__group-label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-chart__group-label b { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); margin-inline-end: var(--ds-space-1); }
.ds-chart__layer > .ds-chart__swarm-label { z-index: 1; color: var(--ds-ink-2); text-shadow: 0 0 2px var(--_bg), 0 0 2px var(--_bg), 0 0 3px var(--_bg), 0 0 4px var(--_bg); }
.ds-chart__swarm-label b { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }

@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__plot[data-gutter-start] { --_y-w: max(var(--_psn, 0px), min(calc(var(--_psne, 0) * var(--ds-text-xs) + 13px), 30cqi)); }
  .ds-chart__ribbon-label b { display: none; }
}

/* ---- small multiples: a set column count, shared axes named once, a highlighted panel ---- */
.ds-chart[data-charts] .ds-chart__facets[style*="--_cols"] { grid-template-columns: repeat(var(--_cols), minmax(0, 1fr)); gap: var(--ds-space-4) var(--ds-space-4); }
.ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-yw="off"] .ds-chart__y { visibility: hidden; }
.ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xw="off"] .ds-chart__plot.ds-chart__plot { --_xpad: 0px; }
.ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xw="off"] .ds-chart__x { display: none; }
.ds-chart__facet[data-hl] .ds-chart__facet-title span { color: color-mix(in oklab, var(--_series-1) 70%, var(--ds-ink)); }
.ds-chart__facet[data-hl] .ds-chart__facet-title b { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-chart__facet[data-hl] .ds-chart__facet-title::before { content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--_series-1); margin-inline-end: calc(-1 * var(--ds-space-1)); }
.ds-chart__facet[data-dim] .ds-chart__facet-title span { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium); }
@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__facets[style*="--_cols"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-4) var(--ds-space-3); }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-yw="off"] .ds-chart__y { visibility: visible; }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-yn="off"] .ds-chart__y { visibility: hidden; }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xw="off"] .ds-chart__plot.ds-chart__plot { --_xpad: calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xw="off"] .ds-chart__x { display: block; }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xn="off"] .ds-chart__plot.ds-chart__plot { --_xpad: 0px; }
  .ds-chart[data-charts][data-kind] .ds-chart__facets .ds-chart__facet[data-xn="off"] .ds-chart__x { display: none; }
}

/* ---- slope: highlighted rows named at both ends, heavier ---- */
.ds-chart[data-charts] .ds-chart__stem[data-emph] { stroke-width: 3px; }
.ds-chart__layer > .ds-chart__slope-label[data-hl] { display: flex; color: var(--ds-ink); }
.ds-chart__slope-label[data-hl] b { font-weight: var(--ds-weight-bold, 700); }
/* a phone: a highlighted name too long to share the line goes on a line above its value; the value line stays on the
   dot, and the name uses all the room to the plot's right edge before it shortens with "…" */
@container (max-width: 480px) {
  .ds-chart[data-charts] .ds-chart__layer > .ds-chart__slope-label[data-hl][data-when="narrow"] { display: flex; }
}
.ds-chart__layer > .ds-chart__slope-label[data-stack][data-valign] { flex-direction: column; max-width: var(--_maxp, var(--_max)); --_ty: calc(-100% + 0.625em); }
.ds-chart__slope-label[data-stack] b { margin-inline-end: 0; }

/* ---- waffle: units are fixed-size squares or dots in the layer; a key with swatches ---- */
.ds-chart[data-kind="waffle"] .ds-chart__layer > :not(.ds-chart__tooltip) { inset-inline-start: calc(var(--_x, 0) * min(1%, var(--_pw, 100) * 0.01px)); }
.ds-chart[data-kind="waffle"] .ds-chart__layer .ds-chart__dot { width: calc(var(--_r) * 2); height: calc(var(--_r) * 2); margin: calc(var(--_r) * -1) 0 0 calc(var(--_r) * -1); box-sizing: border-box; border: 0; border-radius: 50%; background: var(--_c, var(--_series-1)); }
.ds-chart[data-kind="waffle"] .ds-chart__layer .ds-chart__dot[data-shape="square"] { border-radius: min(3px, calc(var(--_r) * 0.3)); }
.ds-chart[data-kind="waffle"] .ds-chart__layer .ds-chart__dot[data-role="context"] { background: color-mix(in oklab, var(--ds-chart-comparison) 55%, var(--_bg)); }
.ds-chart__layer > .ds-chart__key-label { display: inline-flex; align-items: center; gap: 0; font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-chart__key-label > span { color: var(--ds-ink); }
.ds-chart__key-label[data-ink="muted"] > span { color: var(--ds-ink-muted); }
.ds-chart__key-label b { margin-inline-start: 0.5em; font-weight: var(--ds-weight-semibold); color: var(--ds-ink-2); }
.ds-chart__key-label > .ds-chart__swatch { margin-inline-end: var(--ds-space-2); }
.ds-chart[data-charts] .ds-chart__key-label .ds-chart__swatch[data-shape="dot"] { width: 10px; height: 10px; border-radius: 2px; }
.ds-chart[data-kind="waffle"][data-unit="dot"] .ds-chart__key-label .ds-chart__swatch { border-radius: 50%; }
.ds-chart__layer > .ds-chart__unit-note { font-size: var(--ds-text-xs); }

/* ---- calendar: five steps of one colour, mixed toward the ground; a faint cell for a zero day ---- */
.ds-chart__cell { fill: color-mix(in oklab, var(--_c, var(--_series-1)) var(--_lv, 100%), var(--_bg)); }
.ds-chart__cell[data-level="0"] { fill: color-mix(in oklab, var(--ds-ink) 7%, var(--_bg)); }
.ds-chart__cell[data-level="1"] { --_lv: 20%; }
.ds-chart__cell[data-level="2"] { --_lv: 38%; }
.ds-chart__cell[data-level="3"] { --_lv: 56%; }
.ds-chart__cell[data-level="4"] { --_lv: 76%; }
.ds-chart__cell[data-level="5"] { --_lv: 100%; }
.ds-chart__cell-ring { fill: none; stroke: var(--ds-ink); stroke-width: 1.5px; }
.ds-chart__layer > .ds-chart__day-label { --_tx: calc(-100% - 6px); font-size: 11px; }
.ds-chart__layer > .ds-chart__month-label { font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); }
.ds-chart__layer > .ds-chart__scale-label { font-size: 11px; }
.ds-chart__layer > .ds-chart__cal-note b { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); }

/* ---- treemap: tinted tiles with a solid cap, ink labels that show only where they fit ---- */
.ds-chart__tile { fill: color-mix(in oklab, var(--_c, var(--_series-1)) 22%, var(--_bg)); }
.ds-chart__tile[data-role="context"] { fill: color-mix(in oklab, var(--ds-chart-comparison) 18%, var(--_bg)); }
.ds-chart__tile-cap { fill: var(--_c, var(--_series-1)); }
.ds-chart__tile-cap[data-role="context"] { fill: color-mix(in oklab, var(--ds-chart-comparison) 60%, var(--_bg)); }
.ds-chart__group-frame { fill: color-mix(in oklab, var(--_c, var(--_series-1)) 7%, transparent); stroke: color-mix(in oklab, var(--_c, var(--_series-1)) 35%, transparent); stroke-width: 1; }
.ds-chart__layer > .ds-chart__tile-label { max-width: var(--_max, none); overflow: hidden; line-height: 1.3; color: var(--ds-ink-2); }
.ds-chart__tile-label b { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--ds-ink); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-sm); }
.ds-chart__tile-label[data-ink="muted"] b { color: var(--ds-ink-muted); }
.ds-chart__layer > .ds-chart__group-head { display: flex; max-width: var(--_max, none); overflow: hidden; font-weight: var(--ds-weight-semibold); }
.ds-chart__group-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; color: color-mix(in oklab, var(--_c, var(--ds-ink)) 72%, var(--ds-ink)); }
.ds-chart__group-head b { flex: none; font-weight: var(--ds-weight-medium); color: var(--ds-ink-2); }

/* ---- sankey: nodes, and links that run from their source colour to their target's ---- */
.ds-chart__node { fill: var(--_c, var(--_series-1)); }
.ds-chart__link { fill: color-mix(in srgb, var(--_c, var(--_series-1)) 42%, transparent); }
.ds-chart__link[data-role="context"] { fill: color-mix(in srgb, var(--ds-chart-comparison) 22%, transparent); }
.ds-chart__layer > .ds-chart__node-label { display: flex; max-width: var(--_max, none); overflow: hidden; color: var(--ds-ink-2); }
.ds-chart__node-label b { min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-inline-end: var(--ds-space-1); color: var(--ds-ink); font-weight: var(--ds-weight-semibold); }
.ds-chart__node-label[data-ink="muted"] b { color: var(--ds-ink-muted); }
.ds-chart__layer > .ds-chart__node-label[data-mid] { display: block; text-align: center; line-height: 1.3; text-shadow: 0 0 2px var(--_bg), 0 0 3px var(--_bg), 0 0 4px var(--_bg); }
.ds-chart__node-label[data-mid] b { display: block; margin: 0; }
/* hover over areas (treemap tiles, waffle runs, sankey nodes): the area is outlined in ink with a ground halo */
.ds-chart__layer > .ds-chart__hover-box { width: calc(var(--_bw, 0) * min(1%, var(--_pw, 1000000) * 0.01px)); height: calc(var(--_bh, 0) * 1%); border-radius: 3px; box-shadow: 0 0 0 2px var(--ds-ink), 0 0 0 4px var(--_bg); pointer-events: none; z-index: 3; }
/* their plot sits between label gutters: the tooltip may use the figure's width, not 60% of the plot's */
.ds-chart:is([data-kind="sankey"], [data-kind="treemap"], [data-kind="waffle"]) .ds-chart__layer .ds-chart__tooltip { max-width: min(240px, 80cqi); }
/* phone copies: name over value, aligned to the node side; a long name ellipsises */
.ds-chart__layer > .ds-chart__node-label[data-stack] { line-height: 1.25; text-align: end; }
.ds-chart__layer > .ds-chart__node-label[data-stack][data-anchor="start"] { text-align: start; }
.ds-chart__node-label[data-stack] b { display: block; margin: 0; }

/* ---- ridgeline: ridges that hide the one above, a line on each crest, names on the left ---- */
.ds-chart__ridge { fill: color-mix(in oklab, var(--_c, var(--_series-1)) 30%, var(--_bg)); }
.ds-chart__ridge[data-role="context"] { fill: color-mix(in oklab, var(--ds-chart-comparison) 22%, var(--_bg)); }
.ds-chart__ridge-line { fill: none; stroke: var(--_c, var(--_series-1)); stroke-width: 1.6px; stroke-linejoin: round; stroke-linecap: round; }
.ds-chart__ridge-line[data-emph] { stroke-width: 2.2px; }
.ds-chart__ridge-base { stroke: var(--ds-chart-grid); stroke-width: 1; }
.ds-chart__ridge-median { stroke: color-mix(in oklab, var(--_c, var(--_series-1)) 60%, var(--ds-ink)); stroke-width: 1.5px; }
.ds-chart__layer > .ds-chart__ridge-label { --_tx: calc(-100% - 10px); font-weight: var(--ds-weight-semibold); color: color-mix(in oklab, var(--_c, var(--ds-ink)) 70%, var(--ds-ink)); }
.ds-chart__layer > .ds-chart__ridge-label[data-ink="muted"] { color: var(--ds-ink-muted); font-weight: var(--ds-weight-medium); }
.ds-chart__layer > .ds-chart__ridge-value { --_tx: 10px; }
.ds-chart__ridge-value b { font-weight: var(--ds-weight-semibold); color: var(--ds-ink-2); }

/* @generated slot-order:start (tools/gen-themes.mjs; do not edit) */
/* Themes whose adjacent categorical hues are too close (OKLab ΔE < 12) get a re-stepped slot order. */
[data-theme="aiguideson-bench"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="aiguideson-bench"][data-mode="dark"], [data-theme="aiguideson-bench"] [data-mode="dark"], [data-theme="aiguideson-bench"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-7); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="aiguideson-bench"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="aiguideson-bench"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-7); } }
[data-theme="aithatsounds-mixing-desk"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-6); }
:is([data-theme="aithatsounds-mixing-desk"][data-mode="dark"], [data-theme="aithatsounds-mixing-desk"] [data-mode="dark"], [data-theme="aithatsounds-mixing-desk"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-6); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="aithatsounds-mixing-desk"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="aithatsounds-mixing-desk"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-6); --_series-8: var(--ds-data-8); } }
[data-theme="deadwriting-flatline"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-7); }
:is([data-theme="deadwriting-flatline"][data-mode="dark"], [data-theme="deadwriting-flatline"] [data-mode="dark"], [data-theme="deadwriting-flatline"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="deadwriting-flatline"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="deadwriting-flatline"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="forematter"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-7); --_series-8: var(--ds-data-8); }
:is([data-theme="forematter"][data-mode="dark"], [data-theme="forematter"] [data-mode="dark"], [data-theme="forematter"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-7); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="forematter"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="forematter"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-7); --_series-8: var(--ds-data-8); } }
[data-theme="isthereathing-shelf"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="isthereathing-shelf"][data-mode="dark"], [data-theme="isthereathing-shelf"] [data-mode="dark"], [data-theme="isthereathing-shelf"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="isthereathing-shelf"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="isthereathing-shelf"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="isthereathing-universe"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-7); --_series-8: var(--ds-data-8); }
:is([data-theme="isthereathing-universe"][data-mode="dark"], [data-theme="isthereathing-universe"] [data-mode="dark"], [data-theme="isthereathing-universe"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="isthereathing-universe"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="isthereathing-universe"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="iwantaito-maker-zine"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="iwantaito-maker-zine"][data-mode="dark"], [data-theme="iwantaito-maker-zine"] [data-mode="dark"], [data-theme="iwantaito-maker-zine"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="iwantaito-maker-zine"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="iwantaito-maker-zine"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="iwantaito-showroom"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
:is([data-theme="iwantaito-showroom"][data-mode="dark"], [data-theme="iwantaito-showroom"] [data-mode="dark"], [data-theme="iwantaito-showroom"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="iwantaito-showroom"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="iwantaito-showroom"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); } }
[data-theme="lgt"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-4); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="lgt"][data-mode="dark"], [data-theme="lgt"] [data-mode="dark"], [data-theme="lgt"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-3); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="lgt"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="lgt"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-3); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="paper"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="paper"][data-mode="dark"], [data-theme="paper"] [data-mode="dark"], [data-theme="paper"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="paper"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="paper"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
[data-theme="pps-darkroom"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="pps-darkroom"][data-mode="dark"], [data-theme="pps-darkroom"] [data-mode="dark"], [data-theme="pps-darkroom"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="pps-darkroom"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="pps-darkroom"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); } }
[data-theme="pps-portfolio"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="pps-portfolio"][data-mode="dark"], [data-theme="pps-portfolio"] [data-mode="dark"], [data-theme="pps-portfolio"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="pps-portfolio"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="pps-portfolio"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); } }
[data-theme="pps-red-carpet"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
:is([data-theme="pps-red-carpet"][data-mode="dark"], [data-theme="pps-red-carpet"] [data-mode="dark"], [data-theme="pps-red-carpet"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="pps-red-carpet"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="pps-red-carpet"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); } }
[data-theme="usingaias-board-pack"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-2); --_series-8: var(--ds-data-1); }
:is([data-theme="usingaias-board-pack"][data-mode="dark"], [data-theme="usingaias-board-pack"] [data-mode="dark"], [data-theme="usingaias-board-pack"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-2); --_series-8: var(--ds-data-1); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="usingaias-board-pack"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="usingaias-board-pack"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-2); --_series-8: var(--ds-data-1); } }
[data-theme="workbench"] .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-3); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="workbench"][data-mode="dark"], [data-theme="workbench"] [data-mode="dark"], [data-theme="workbench"] [data-band="dark"]) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
@media (prefers-color-scheme: dark) { :is(:root[data-theme="workbench"]:not([data-mode="light"]), :root:not([data-mode="light"]) [data-theme="workbench"]:not([data-mode="light"])) .ds-chart[data-charts] { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); } }
/* @generated slot-order:end */

/* @generated styles:start (tools/build.mjs concatenates css/styles/*.css; do not edit here) */
/* ---- css/styles/_bands.css ---- */
/* Shared parts (any style): y bands named in words, colorBy: band, the key metric card, the eyebrow. */

/* band tones: good = the DS success colour, ok = the data primary, warn = warning, bad = danger */
.ds-chart[data-charts] [data-tone="good"] { --_c: var(--ds-success); }
.ds-chart[data-charts] [data-tone="ok"] { --_c: var(--ds-data-primary, var(--ds-data-1)); }
.ds-chart[data-charts] [data-tone="warn"] { --_c: var(--ds-warning); }
.ds-chart[data-charts] [data-tone="bad"] { --_c: var(--ds-danger); }
.ds-chart[data-charts] [data-tone="neutral"] { --_c: var(--ds-ink-muted); }

/* the bands on the plot: a faint tint and a rule at each edge */
.ds-chart__yband { fill: color-mix(in srgb, var(--_c, var(--ds-ink)) 6%, transparent); }
.ds-chart__band-edge { stroke: var(--ds-chart-grid); stroke-width: 1; }

/* the band words on the right-hand axis (numbers at the edges, smaller) */
.ds-chart[data-charts] .ds-chart__y[data-side="end"] span[data-tone] { color: color-mix(in oklab, var(--_c) 72%, var(--ds-ink)); font-weight: var(--ds-weight-semibold); }
.ds-chart[data-charts] .ds-chart__y[data-side="end"] span[data-minor] { color: var(--ds-ink-muted); font-size: 0.92em; }

/* the eyebrow: a short kicker over the title */
.ds-chart__eyebrow { margin: 0 0 var(--ds-space-1); font-family: var(--ds-font-label, var(--ds-font-sans)); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold, 700); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ds-ink-muted); }
.ds-chart__eyebrow[data-tone] { color: color-mix(in oklab, var(--_c) 78%, var(--ds-ink)); }

/* the key metric card */
.ds-chart__km { display: flex; flex-direction: column; gap: var(--ds-space-2); padding: var(--ds-space-4) var(--ds-space-5); border-radius: var(--ds-radius-lg, 14px); background: color-mix(in oklab, var(--ds-ink) 4.5%, transparent); border: 1px solid color-mix(in oklab, var(--ds-ink) 8%, transparent); }
.ds-chart__km-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }
.ds-chart__km-label { font-weight: var(--ds-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; text-wrap: balance; }
.ds-chart__km-period { white-space: nowrap; }
/* a phone: the label over the period, both left-aligned (a wrapped row left the period hanging under it) */
@container (max-width: 480px) {
  .ds-chart__km { padding: var(--ds-space-4); }
  .ds-chart__km-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ds-chart__km-period { font-size: 0.95em; }
}
.ds-chart__km-value { display: flex; align-items: baseline; gap: var(--ds-space-3); margin: 0; }
.ds-chart__km-value b { font-family: var(--ds-font-display, var(--ds-font-sans)); font-size: var(--ds-text-3xl, 2rem); font-weight: var(--ds-weight-semibold); line-height: 1; letter-spacing: -0.02em; color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-chart__km-verdict { font-size: var(--ds-text-sm); font-weight: var(--ds-weight-bold, 700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-ink-2); }
.ds-chart__km[data-tone] .ds-chart__km-verdict { color: color-mix(in oklab, var(--_c) 78%, var(--ds-ink)); }
.ds-chart__km-bar { display: flex; gap: 6px; align-items: center; height: 18px; margin-block-start: var(--ds-space-1); }
.ds-chart__km-seg { position: relative; flex: var(--_w) 1 0; height: 5px; border-radius: 99px; background: color-mix(in oklab, var(--ds-ink-muted) 45%, var(--_bg)); }
.ds-chart__km-seg[data-active] { background: var(--_c); }
.ds-chart__km-marker { position: absolute; inset-inline-start: calc(var(--_x) * 1%); inset-block-start: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; box-sizing: border-box; border-radius: 50%; background: radial-gradient(circle, var(--_c) 0 3px, var(--_bg) 3.5px); border: 3px solid var(--_c); }
.ds-chart__km-ends { display: flex; justify-content: space-between; font-size: var(--ds-text-xs); color: var(--ds-ink-muted); }

/* ---- css/styles/_brand.css ---- */
/* Brand kits (src/brand.ts): a figure with data-brand carries its tokens twice in its style attribute, --_bl-* (light)
   and --_bd-* (dark). These rules point the DS tokens at one set by mode, so a brand needs no theme file and the page
   no <style> element. The figure paints its own surface, since the brand's ink is chosen for it (style files sort later and keep their own
   grounds). */
.ds-chart[data-charts][data-brand] { --ds-ground: var(--_bl-ground); --ds-surface: var(--_bl-surface); --ds-surface-2: var(--_bl-surface-2); --ds-ink: var(--_bl-ink); --ds-ink-2: var(--_bl-ink-2); --ds-ink-muted: var(--_bl-ink-muted); --ds-ink-faint: var(--_bl-ink-faint); --ds-rule-soft: var(--_bl-rule-soft); --ds-rule: var(--_bl-rule); --ds-rule-strong: var(--_bl-rule-strong); --ds-chart-grid: var(--_bl-chart-grid); --ds-chart-comparison: var(--_bl-chart-comparison); --ds-data-primary: var(--_bl-data-primary); --ds-data-1: var(--_bl-data-1); --ds-data-2: var(--_bl-data-2); --ds-data-3: var(--_bl-data-3); --ds-data-4: var(--_bl-data-4); --ds-data-5: var(--_bl-data-5); --ds-data-6: var(--_bl-data-6); --ds-data-7: var(--_bl-data-7); --ds-data-8: var(--_bl-data-8); --ds-data-1-ink: var(--_bl-data-1-ink); --ds-data-2-ink: var(--_bl-data-2-ink); --ds-data-3-ink: var(--_bl-data-3-ink); --ds-data-4-ink: var(--_bl-data-4-ink); --ds-data-5-ink: var(--_bl-data-5-ink); --ds-data-6-ink: var(--_bl-data-6-ink); --ds-data-7-ink: var(--_bl-data-7-ink); --ds-data-8-ink: var(--_bl-data-8-ink); --ds-chart-ramp-1: var(--_bl-chart-ramp-1); --ds-chart-ramp-2: var(--_bl-chart-ramp-2); --ds-chart-ramp-3: var(--_bl-chart-ramp-3); --ds-success: var(--_bl-success); --ds-danger: var(--_bl-danger); --ds-warning: var(--_bl-warning); --ds-success-ink: var(--_bl-success-ink); --ds-danger-ink: var(--_bl-danger-ink); --ds-chart-up: var(--_bl-chart-up); --ds-chart-down: var(--_bl-chart-down); background: var(--ds-surface); color: var(--ds-ink); padding: var(--ds-space-4, 16px); border-radius: var(--ds-radius-md, 10px); }
/* dark: an ancestor in dark mode (a theme page, a dark band), the figure itself (showpiece, the deep ground), or the
   reader's preference when nothing on the page says light */
:is([data-mode="dark"], [data-band="dark"]) .ds-chart[data-charts][data-brand],
.ds-chart[data-charts][data-brand][data-mode="dark"] { --ds-ground: var(--_bd-ground); --ds-surface: var(--_bd-surface); --ds-surface-2: var(--_bd-surface-2); --ds-ink: var(--_bd-ink); --ds-ink-2: var(--_bd-ink-2); --ds-ink-muted: var(--_bd-ink-muted); --ds-ink-faint: var(--_bd-ink-faint); --ds-rule-soft: var(--_bd-rule-soft); --ds-rule: var(--_bd-rule); --ds-rule-strong: var(--_bd-rule-strong); --ds-chart-grid: var(--_bd-chart-grid); --ds-chart-comparison: var(--_bd-chart-comparison); --ds-data-primary: var(--_bd-data-primary); --ds-data-1: var(--_bd-data-1); --ds-data-2: var(--_bd-data-2); --ds-data-3: var(--_bd-data-3); --ds-data-4: var(--_bd-data-4); --ds-data-5: var(--_bd-data-5); --ds-data-6: var(--_bd-data-6); --ds-data-7: var(--_bd-data-7); --ds-data-8: var(--_bd-data-8); --ds-data-1-ink: var(--_bd-data-1-ink); --ds-data-2-ink: var(--_bd-data-2-ink); --ds-data-3-ink: var(--_bd-data-3-ink); --ds-data-4-ink: var(--_bd-data-4-ink); --ds-data-5-ink: var(--_bd-data-5-ink); --ds-data-6-ink: var(--_bd-data-6-ink); --ds-data-7-ink: var(--_bd-data-7-ink); --ds-data-8-ink: var(--_bd-data-8-ink); --ds-chart-ramp-1: var(--_bd-chart-ramp-1); --ds-chart-ramp-2: var(--_bd-chart-ramp-2); --ds-chart-ramp-3: var(--_bd-chart-ramp-3); --ds-success: var(--_bd-success); --ds-danger: var(--_bd-danger); --ds-warning: var(--_bd-warning); --ds-success-ink: var(--_bd-success-ink); --ds-danger-ink: var(--_bd-danger-ink); --ds-chart-up: var(--_bd-chart-up); --ds-chart-down: var(--_bd-chart-down); }
:is([data-mode="dark"], [data-band="dark"]) [data-mode="light"] .ds-chart[data-charts][data-brand]:not([data-mode="dark"]) { --ds-ground: var(--_bl-ground); --ds-surface: var(--_bl-surface); --ds-surface-2: var(--_bl-surface-2); --ds-ink: var(--_bl-ink); --ds-ink-2: var(--_bl-ink-2); --ds-ink-muted: var(--_bl-ink-muted); --ds-ink-faint: var(--_bl-ink-faint); --ds-rule-soft: var(--_bl-rule-soft); --ds-rule: var(--_bl-rule); --ds-rule-strong: var(--_bl-rule-strong); --ds-chart-grid: var(--_bl-chart-grid); --ds-chart-comparison: var(--_bl-chart-comparison); --ds-data-primary: var(--_bl-data-primary); --ds-data-1: var(--_bl-data-1); --ds-data-2: var(--_bl-data-2); --ds-data-3: var(--_bl-data-3); --ds-data-4: var(--_bl-data-4); --ds-data-5: var(--_bl-data-5); --ds-data-6: var(--_bl-data-6); --ds-data-7: var(--_bl-data-7); --ds-data-8: var(--_bl-data-8); --ds-data-1-ink: var(--_bl-data-1-ink); --ds-data-2-ink: var(--_bl-data-2-ink); --ds-data-3-ink: var(--_bl-data-3-ink); --ds-data-4-ink: var(--_bl-data-4-ink); --ds-data-5-ink: var(--_bl-data-5-ink); --ds-data-6-ink: var(--_bl-data-6-ink); --ds-data-7-ink: var(--_bl-data-7-ink); --ds-data-8-ink: var(--_bl-data-8-ink); --ds-chart-ramp-1: var(--_bl-chart-ramp-1); --ds-chart-ramp-2: var(--_bl-chart-ramp-2); --ds-chart-ramp-3: var(--_bl-chart-ramp-3); --ds-success: var(--_bl-success); --ds-danger: var(--_bl-danger); --ds-warning: var(--_bl-warning); --ds-success-ink: var(--_bl-success-ink); --ds-danger-ink: var(--_bl-danger-ink); --ds-chart-up: var(--_bl-chart-up); --ds-chart-down: var(--_bl-chart-down); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .ds-chart[data-charts][data-brand]:not(:is([data-mode="light"] *)) { --ds-ground: var(--_bd-ground); --ds-surface: var(--_bd-surface); --ds-surface-2: var(--_bd-surface-2); --ds-ink: var(--_bd-ink); --ds-ink-2: var(--_bd-ink-2); --ds-ink-muted: var(--_bd-ink-muted); --ds-ink-faint: var(--_bd-ink-faint); --ds-rule-soft: var(--_bd-rule-soft); --ds-rule: var(--_bd-rule); --ds-rule-strong: var(--_bd-rule-strong); --ds-chart-grid: var(--_bd-chart-grid); --ds-chart-comparison: var(--_bd-chart-comparison); --ds-data-primary: var(--_bd-data-primary); --ds-data-1: var(--_bd-data-1); --ds-data-2: var(--_bd-data-2); --ds-data-3: var(--_bd-data-3); --ds-data-4: var(--_bd-data-4); --ds-data-5: var(--_bd-data-5); --ds-data-6: var(--_bd-data-6); --ds-data-7: var(--_bd-data-7); --ds-data-8: var(--_bd-data-8); --ds-data-1-ink: var(--_bd-data-1-ink); --ds-data-2-ink: var(--_bd-data-2-ink); --ds-data-3-ink: var(--_bd-data-3-ink); --ds-data-4-ink: var(--_bd-data-4-ink); --ds-data-5-ink: var(--_bd-data-5-ink); --ds-data-6-ink: var(--_bd-data-6-ink); --ds-data-7-ink: var(--_bd-data-7-ink); --ds-data-8-ink: var(--_bd-data-8-ink); --ds-chart-ramp-1: var(--_bd-chart-ramp-1); --ds-chart-ramp-2: var(--_bd-chart-ramp-2); --ds-chart-ramp-3: var(--_bd-chart-ramp-3); --ds-success: var(--_bd-success); --ds-danger: var(--_bd-danger); --ds-warning: var(--_bd-warning); --ds-success-ink: var(--_bd-success-ink); --ds-danger-ink: var(--_bd-danger-ink); --ds-chart-up: var(--_bd-chart-up); --ds-chart-down: var(--_bd-chart-down); }
}
/* the brand's slots are already in order: series n is data n (beats the per-theme re-stepped order; the accent dial
   still wins) */
.ds-chart.ds-chart.ds-chart[data-charts][data-brand]:not([data-dial-accent]) { --_series-1: var(--ds-data-1); --_series-2: var(--ds-data-2); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-4); --_series-5: var(--ds-data-5); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-7); --_series-8: var(--ds-data-8); }

/* ---- css/styles/_motion.css ---- */
/* Motion (plan-45 §3.5): the entrance. CSS only, keyed off data-animate on the figure, which ONLY the optional
   dist/charts-motion.js sets ("wait" until the chart is in view, then "in", then "done"). So:
     - no JS (or no motion script): the attribute never appears and nothing here applies: the final chart shows.
     - prefers-reduced-motion: reduce, or print: the media query below is false: the final chart shows.
     - "done": every rule here stops matching, so the style's own animations (instrument's breathing dot) resume.
   Nothing outside @keyframes may hide anything unless it is under [data-animate] (test/motion.test.ts checks).
   Timing tokens on the figure (a spec's motion: { duration, stagger } sets the first two inline):
     --_md       the main mark animation, ms (unitless)      --_ms   ms between one mark and the next
     --_mspread  the cap on the total stagger, ms            --_me   the main easing   --_mpop  the pop easing
   Each animated element computes --_S (its own stagger: --_i × --_ms, capped) and starts at
   var(--_m0) (a small multiple's panel offset) + a phase × --_D + --_S. */
/* timing tokens (they hide nothing on their own) */
.ds-chart[data-charts] {
  --_md: 650; --_ms: 22; --_mspread: 480;
  --_me: cubic-bezier(.25, .8, .25, 1); --_mpop: cubic-bezier(.34, 1.56, .64, 1); --_mrise: 10px;
}
/* kinds with many small marks: a fine stagger that still sweeps the whole set */
.ds-chart[data-charts]:is([data-kind="calendar"]) { --_ms: 1.6; --_mspread: 560; }
.ds-chart[data-charts]:is([data-kind="waffle"]) { --_ms: 5; --_mspread: 620; }
.ds-chart[data-charts]:is([data-kind="beeswarm"]) { --_ms: 4; --_mspread: 560; }
.ds-chart[data-charts]:is([data-kind="candlestick"]) { --_ms: 3; --_mspread: 520; }

/* the styles' characters */
.ds-chart[data-charts][data-style="instrument"] { --_md: 1300; --_ms: 26; --_mspread: 560; --_me: cubic-bezier(.62, 0, .3, 1); }
.ds-chart[data-charts][data-style="frontpage"] { --_md: 760; --_ms: 30; --_mspread: 420; --_me: cubic-bezier(.7, 0, .22, 1); }
.ds-chart[data-charts][data-style="verdict"] { --_md: 1150; --_ms: 34; --_mspread: 520; --_me: cubic-bezier(.45, 0, .18, 1); }
.ds-chart[data-charts][data-style="showpiece"] { --_md: 1550; --_ms: 55; --_mspread: 900; --_me: cubic-bezier(.16, 1, .3, 1); --_mrise: 22px; }
.ds-chart[data-charts][data-style]:is([data-kind="calendar"]) { --_ms: 2; }
.ds-chart[data-charts][data-style]:is([data-kind="waffle"], [data-kind="beeswarm"], [data-kind="candlestick"]) { --_ms: 6; }

@media screen and (prefers-reduced-motion: no-preference) {
  /* before the runtime arms a chart (no flash of the final chart on load): html.js-motion is set by the runtime
     loaded in <head>, or by a one-line snippet there, before the first paint. The plot holds back with an animation
     that ENDS on its own (no fill), so if the runtime never runs the chart still appears after 2.5 s. */
  html.js-motion .ds-chart[data-charts]:not([data-animate], [data-motion="none"]) :is(.ds-chart__plot, .ds-chart__facets, .ds-chart__legend, .ds-chart__hero, .ds-chart__km, .ds-chart__notes, .ds-chart__caveat) {
    animation: ds-m-pending 2.5s linear;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) { --_D: calc(var(--_md) * 1ms); }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) :is(.ds-chart__svg > *, .ds-chart__layer > *, .ds-chart__facet) {
    --_S: min(var(--_i, 0) * var(--_ms) * 1ms, var(--_mspread) * 1ms);
  }
  /* small multiples: each panel starts a beat after the one before */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__facet { --_m0: min(var(--_i, 0) * 90ms, 720ms); }
  /* out of view: hold every animation at its first frame */
  .ds-chart[data-charts][data-animate="wait"] *, .ds-chart[data-charts][data-animate="wait"] *::before { animation-play-state: paused !important; }

  /* ---- the frame: grid, axes, bands, legend fade in first and fast ---- */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) :is(.ds-chart__gridline, .ds-chart__zero, .ds-chart__baseline, .ds-chart__band, .ds-chart__yband, .ds-chart__band-edge, .ds-chart__event, .ds-chart__ref, .ds-chart__guide, .ds-chart__ridge-base, .ds-chart__group-frame, .ds-chart__median),
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) :is(.ds-chart__x, .ds-chart__y, .ds-chart__axis-title, .ds-chart__pane-label, .ds-chart__legend, .ds-chart__facet-title, .ds-chart__hero-label) {
    animation: ds-m-fade calc(var(--_D) * .5) ease-out var(--_m0, 0ms) both;
  }

  /* ---- lines draw on (pathLength="1"), dashed / comparison lines fade ---- */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__line, .ds-chart__ridge-line, .ds-chart__stem)[pathLength] {
    stroke-dasharray: 1 2;
    animation: ds-m-draw var(--_D) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .08 + var(--_S)) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__line, .ds-chart__seam):not([pathLength]) {
    animation: ds-m-fade calc(var(--_D) * .6) ease-out calc(var(--_m0, 0ms) + var(--_D) * .15) both;
  }
  /* areas fade and rise under their line */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__area, .ds-chart__vfill, .ds-chart__splight) {
    animation: ds-m-rise var(--_D) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .2 + var(--_S)) both;
  }

  /* ---- bars and columns grow from their baseline, one after another ---- */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__rect, .ds-chart__vol, .ds-chart__candle, .ds-chart__node) {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: ds-m-growy calc(var(--_D) * .9) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .06 + var(--_S)) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__rect, .ds-chart__vol)[data-grow="up"],
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__vol { transform-origin: 50% 100%; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__rect[data-grow="down"] { transform-origin: 50% 0; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__rect:is([data-grow="right"], [data-grow="left"]) { animation-name: ds-m-growx; transform-origin: 0 50%; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__rect[data-grow="left"] { transform-origin: 100% 50%; }
  /* waterfall: a floating step (no baseline of its own) unfolds from its middle; connectors follow */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__connector, .ds-chart__wick, .ds-chart__tick-mark) {
    animation: ds-m-fade calc(var(--_D) * .5) ease-out calc(var(--_m0, 0ms) + var(--_D) * .3 + var(--_S)) both;
  }

  /* ---- dots, beeswarm and waffle units pop in ---- */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__layer .ds-chart__dot {
    animation: ds-m-pop calc(var(--_D) * .5 + 120ms) var(--_mpop) calc(var(--_m0, 0ms) + var(--_D) * .95 + var(--_S)) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]):is([data-kind="beeswarm"], [data-kind="waffle"]) .ds-chart__layer .ds-chart__dot {
    animation-delay: calc(var(--_m0, 0ms) + var(--_D) * .05 + var(--_S));
  }
  /* slope and dumbbell: the stem draws from the first value, then its dots land */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]):is([data-kind="slope"], [data-kind="dumbbell"]) .ds-chart__layer .ds-chart__dot {
    animation-delay: calc(var(--_m0, 0ms) + var(--_D) * .55 + var(--_S));
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]):is([data-kind="slope"], [data-kind="dumbbell"]) .ds-chart__layer .ds-chart__dot[data-hollow] {
    animation-delay: calc(var(--_m0, 0ms) + var(--_S));
  }

  /* ---- the shape kinds ---- */
  /* areabump ribbons and sankey links sweep in left to right, one after another; sankey nodes first */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__ribbon, .ds-chart__link) {
    animation: ds-m-wipe calc(var(--_D) * 1.1) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .12 + var(--_S)) both;
  }
  /* sankey: one sweep across the whole plot (a wipe per link would open every column at once); nodes rise first */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"])[data-kind="sankey"] .ds-chart__svg { animation: ds-m-wipe calc(var(--_D) * 1.1) var(--_me) calc(var(--_D) * .1) both; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"])[data-kind="sankey"] .ds-chart__svg .ds-chart__link { animation: none; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"])[data-kind="sankey"] .ds-chart__svg .ds-chart__node { animation-delay: calc(var(--_D) * .05); }
  /* treemap tiles settle into place, biggest first */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__tile, .ds-chart__tile-cap) {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: ds-m-tile calc(var(--_D) * .9) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .05 + var(--_S)) both;
  }
  /* calendar cells sweep across the weeks; the ring lands last */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__cell {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: ds-m-cell calc(var(--_D) * .6) var(--_me) calc(var(--_m0, 0ms) + var(--_S)) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__cell-ring {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: ds-m-pop calc(var(--_D) * .5 + 120ms) var(--_mpop) calc(var(--_D) * .6 + var(--_mspread) * 1ms) both;
  }
  /* ridgelines rise out of their baselines, back to front */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__ridge {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: ds-m-ridge var(--_D) var(--_me) calc(var(--_m0, 0ms) + var(--_D) * .05 + var(--_S)) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__ridge-median {
    animation: ds-m-fade calc(var(--_D) * .4) ease-out calc(var(--_D) * .8 + var(--_S)) both;
  }

  /* ---- labels and annotations fade in after the marks ---- */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__layer > :not(.ds-chart__dot, .ds-chart__tooltip, .ds-chart__crosshair, .ds-chart__bloom, .ds-chart__pane-label),
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__leader, .ds-chart__cursor) {
    animation: ds-m-label calc(var(--_D) * .35 + 160ms) ease-out calc(var(--_m0, 0ms) + var(--_D) * .85) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) :is(.ds-chart__notes, .ds-chart__caveat, .ds-chart__km) {
    animation: ds-m-fade calc(var(--_D) * .4 + 120ms) ease-out calc(var(--_D) * .7) both;
  }
  /* the hero: the number counts up (charts-motion.js), the pill lands when it gets there */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__hero-value { animation: ds-m-fade 240ms ease-out both; }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) :is(.ds-chart__delta, .ds-chart__hero-note) {
    animation: ds-m-pop calc(var(--_D) * .4 + 120ms) var(--_mpop) calc(var(--_D) * .9) both;
  }

  /* ======== the styles ======== */

  /* instrument: the line traces with a glowing head (the glow path runs as a short bright dash at the tip), the
     area is uncovered under it, then the glow flares and settles and the end dot blooms */
  .ds-chart[data-charts][data-style="instrument"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__glow[pathLength] {
    stroke-dasharray: .06 3;
    animation: ds-m-comet var(--_D) var(--_me) calc(var(--_D) * .08) both, ds-m-glowon 700ms ease-out calc(var(--_D) * 1.08) forwards;
  }
  .ds-chart[data-charts][data-style="instrument"][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__area, .ds-chart__vfill) {
    animation: ds-m-wipe var(--_D) var(--_me) calc(var(--_D) * .08) both;
  }
  .ds-chart[data-charts][data-style="instrument"][data-animate]:not([data-animate="done"]) .ds-chart__layer .ds-chart__dot[data-glow] {
    animation: ds-m-bloom 900ms cubic-bezier(.2, .9, .3, 1.2) calc(var(--_D) * 1.02) both;
  }
  .ds-chart[data-charts][data-style="instrument"][data-animate]:not([data-animate="done"]) .ds-chart__layer > .ds-chart__pin {
    animation-delay: calc(var(--_D) * 1.05);
  }

  /* frontpage: decisive. The grey crowd draws first and fast, the named lines cut through it, and the labels
     land on the data after the lines, with a small drop */
  .ds-chart[data-charts][data-style="frontpage"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__line[pathLength][data-role="context"] {
    animation-duration: calc(var(--_D) * .55); animation-delay: calc(var(--_m0, 0ms) + var(--_S) * .3);
  }
  .ds-chart[data-charts][data-style="frontpage"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__line[pathLength]:not([data-role="context"]) {
    animation-delay: calc(var(--_m0, 0ms) + var(--_D) * .3 + var(--_S));
  }
  .ds-chart[data-charts][data-style="frontpage"][data-animate]:not([data-animate="done"]) .ds-chart__layer > :not(.ds-chart__dot, .ds-chart__tooltip, .ds-chart__crosshair, .ds-chart__bloom, .ds-chart__pane-label) {
    animation: ds-m-land 380ms cubic-bezier(.3, 1.45, .55, 1) calc(var(--_m0, 0ms) + var(--_D) * 1.28) both;
  }
  .ds-chart[data-charts][data-style="frontpage"][data-animate]:not([data-animate="done"]) .ds-chart__layer .ds-chart__dot { animation-delay: calc(var(--_m0, 0ms) + var(--_D) * 1.25 + var(--_S)); }
  .ds-chart[data-charts][data-style="frontpage"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__leader { animation-delay: calc(var(--_m0, 0ms) + var(--_D) * 1.2); }

  /* verdict: the bands are laid down first, the line draws through them, then the key metric bar fills and its
     marker lands on the verdict */
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__svg :is(.ds-chart__yband, .ds-chart__band-edge) { animation-duration: calc(var(--_D) * .45); }
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__layer > .ds-chart__band-label {
    animation: ds-m-label calc(var(--_D) * .4) ease-out calc(var(--_D) * .12) both;
  }
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__line[pathLength] { animation-delay: calc(var(--_m0, 0ms) + var(--_D) * .32 + var(--_S)); }
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__vfill { animation-delay: calc(var(--_D) * .9); }
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__layer .ds-chart__dot { animation-delay: calc(var(--_m0, 0ms) + var(--_D) * 1.3 + var(--_S)); }
  .ds-chart[data-charts][data-style="verdict"][data-animate]:not([data-animate="done"]) .ds-chart__km { animation-delay: calc(var(--_D) * .9); }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__km-bar {
    animation: ds-m-wipe calc(var(--_D) * .6) var(--_me) calc(var(--_D) * 1.25) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__km-marker {
    animation: ds-m-pop 520ms var(--_mpop) calc(var(--_D) * 1.75) both;
  }
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__km-verdict {
    animation: ds-m-label 400ms ease-out calc(var(--_D) * 1.8) both;
  }

  /* showpiece: luscious. Long expo-out curves, wide staggers, areas rising further, labels coming into focus */
  .ds-chart[data-charts][data-style="showpiece"][data-animate]:not([data-animate="done"]) .ds-chart__layer > :not(.ds-chart__dot, .ds-chart__tooltip, .ds-chart__crosshair, .ds-chart__bloom, .ds-chart__pane-label) {
    animation: ds-m-focus calc(var(--_D) * .45) cubic-bezier(.2, .7, .2, 1) calc(var(--_m0, 0ms) + var(--_D) * .7) both;
  }
  /* ribbons sit after the year guides in mark order, so their own index is large: a third of the stagger */
  .ds-chart[data-charts][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__ribbon { animation-delay: calc(var(--_m0, 0ms) + var(--_D) * .05 + var(--_S) * .3); }
  .ds-chart[data-charts][data-style="showpiece"][data-animate]:not([data-animate="done"]) .ds-chart__svg .ds-chart__ribbon { animation-duration: calc(var(--_D) * 1.2); }
}

@keyframes ds-m-pending { from, to { visibility: hidden; } }
@keyframes ds-m-fade { from { opacity: 0; } }
@keyframes ds-m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ds-m-rise { from { opacity: 0; transform: translateY(var(--_mrise, 10px)); } }
@keyframes ds-m-growy { from { transform: scaleY(0); } }
@keyframes ds-m-growx { from { transform: scaleX(0); } }
@keyframes ds-m-pop { from { opacity: 0; scale: .2; } 40% { opacity: 1; } }
@keyframes ds-m-wipe { from { clip-path: inset(-20px 100% -20px -20px); } to { clip-path: inset(-20px -20px -20px -20px); } }
@keyframes ds-m-tile { from { opacity: 0; transform: scale(.82); } }
@keyframes ds-m-cell { from { opacity: 0; transform: scale(.3); } }
@keyframes ds-m-ridge { from { opacity: 0; transform: scaleY(.05); } 30% { opacity: 1; } }
@keyframes ds-m-label { from { opacity: 0; transform: translateY(5px); } }
@keyframes ds-m-land { from { opacity: 0; transform: translateY(-9px); } 55% { opacity: 1; } }
@keyframes ds-m-focus { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
@keyframes ds-m-comet { from { stroke-dashoffset: .06; opacity: 1; } to { stroke-dashoffset: -.94; opacity: 1; } }
@keyframes ds-m-glowon { 0% { stroke-dasharray: .06 3; stroke-dashoffset: -.94; opacity: 1; } 1% { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 1; } to { stroke-dasharray: none; stroke-dashoffset: 0; } }
@keyframes ds-m-bloom { 0% { opacity: 0; scale: 0; } 45% { opacity: 1; scale: 1.7; } 100% { scale: 1; } }

/* ---- css/styles/_shared.css ---- */
/* Shared parts any style (calm included) can use: per-figure gradient fills / strokes, gradient stops, the
   reference series, the hero number + delta pill, glowing dots, big inline numbers. */

/* effects: a gradient fill / stroke from the figure's own <defs> (the url travels in --_fxf / --_fxs) */
.ds-chart[data-charts] .ds-chart__svg [data-fx~="fill"][data-fx] { fill: var(--_fxf); }
.ds-chart[data-charts] .ds-chart__svg [data-fx~="stroke"][data-fx] { stroke: var(--_fxs); }
.ds-chart__stop { stop-color: var(--_c, var(--_series-1)); }
.ds-chart__stop[data-stop="ink"] { stop-color: var(--ds-ink); }
.ds-chart__stop[data-stop="bg"] { stop-color: var(--_bg); }
.ds-chart__stop[data-stop="grid"] { stop-color: var(--ds-chart-grid); }

/* series role: reference — a dashed ink line (overall CPI, a benchmark everyone knows) */
.ds-chart[data-charts] [data-role="reference"] { --_c: var(--ds-ink); }
.ds-chart[data-charts] .ds-chart__line[data-role="reference"] { stroke: var(--ds-ink); stroke-width: calc(2.5px * var(--_lw, 1)); stroke-dasharray: 5 4; }
.ds-chart[data-charts] .ds-chart__swatch[data-role="reference"] { background: repeating-linear-gradient(to right, var(--ds-ink) 0 4px, transparent 4px 7px); }

/* hero: the number you read first, and its change */
.ds-chart__hero { display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ds-chart__hero-label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.ds-chart__hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); }
.ds-chart__hero-value { font-family: var(--ds-font-display, var(--ds-font-sans)); font-size: clamp(1.9rem, 1.2rem + 3.2cqi, 2.9rem); font-weight: var(--ds-weight-bold, 700); letter-spacing: var(--ds-display-tracking, -0.02em); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ds-ink); }
.ds-chart__delta { --_d: var(--ds-ink-muted); display: inline-flex; align-items: center; gap: .4em; padding: .25em .7em; border-radius: var(--ds-radius-pill, 999px); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold, 600); line-height: 1.2; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--_d) 72%, var(--ds-ink)); background: color-mix(in oklab, var(--_d) 16%, transparent); }
.ds-chart__delta[data-dir="up"] { --_d: var(--_up); }
.ds-chart__delta[data-dir="down"] { --_d: var(--_down); }
.ds-chart__delta i { font-style: normal; font-size: .78em; }
.ds-chart__delta b { font-weight: inherit; }
.ds-chart__hero-note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }

/* a dot that glows (an instrument's live end point) */
.ds-chart__layer .ds-chart__dot[data-glow] { box-shadow: 0 0 0 4px color-mix(in oklab, var(--_c, var(--_series-1)) 30%, transparent), 0 0 18px 5px color-mix(in oklab, var(--_c, var(--_series-1)) 45%, transparent); }

/* callout.big: a big inline number */
.ds-chart__layer > .ds-chart__callout[data-big] { font-family: var(--ds-font-display, var(--ds-font-sans)); font-size: var(--ds-text-2xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }

/* parts laid out twice, for the wide plot and for a phone: each shows at its own width */
.ds-chart[data-charts] [data-when="narrow"]:not(.ds-chart__legend) { display: none; }
@container (max-width: 480px) {
  .ds-chart[data-charts] [data-when="wide"] { display: none; }
  .ds-chart[data-charts] [data-when="narrow"]:not(.ds-chart__legend) { display: revert; }
  /* narrow copies that lay out as a row (a name that ellipsises before its total) */
  .ds-chart[data-charts] .ds-chart__layer > .ds-chart__group-head[data-when="narrow"] { display: flex; }
}

/* labels drawn over the data (names on lines, pins, reference and ghost labels; callouts have their own plate): a solid ground-coloured
   halo, so grey crowd lines and gridlines behind them break cleanly around the letters. The stroke is painted under
   the fill (paint-order), so the glyphs keep their weight. Styled charts only; calm is unchanged. */
.ds-chart[data-charts][data-style]:not([data-style="calm"]) .ds-chart__layer > :is(.ds-chart__on-label, .ds-chart__pin, .ds-chart__ref-label, .ds-chart__ghost-label) {
  -webkit-text-stroke: 4px var(--_bg, var(--ds-surface));
  paint-order: stroke fill;
  stroke-linejoin: round;
}

/* ---- css/styles/frontpage.css ---- */
/* frontpage: newsroom confidence. A heavy, tight headline in the theme's display face over a deck; names on the
   data in the series colour; a grey crowd; a dashed ink reference; big left-hand y labels; bars with one lit. */

.ds-chart[data-charts][data-style="frontpage"] { gap: var(--ds-space-3); }
.ds-chart[data-style="frontpage"] .ds-chart__heading { gap: var(--ds-space-2); }
/* a short heavy rule over the headline, in ink */
.ds-chart[data-style="frontpage"] .ds-chart__heading::before { content: ""; display: block; width: 44px; height: 5px; background: var(--ds-ink); margin-block-end: var(--ds-space-2); }
.ds-chart[data-style="frontpage"] .ds-chart__title {
  font-family: var(--ds-font-display, var(--ds-font-sans));
  font-size: clamp(1.35rem, 1.05rem + 1.5cqi, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--ds-ink);
}
.ds-chart[data-style="frontpage"] .ds-chart__subtitle { font-size: var(--ds-text-base); line-height: 1.35; color: var(--ds-ink-2); max-width: 60ch; }
.ds-chart[data-style="frontpage"] .ds-chart__source { color: var(--ds-ink-muted); border-block-start: 1px solid var(--ds-rule); padding-block-start: var(--ds-space-2); }

/* axes: y on the left, large; the grid is the only structure */
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__plot[data-axis-y]:not([data-axis-y="wide"]) { --_y-base: 44px; --_ytf: var(--ds-text-sm); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__plot[data-axis-y="currency"] { --_y-base: 60px; }
.ds-chart[data-style="frontpage"] .ds-chart__y span { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-chart[data-style="frontpage"] .ds-chart__x span { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-chart[data-style="frontpage"] .ds-chart__x span small { color: var(--ds-ink-muted); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__plot[data-x="two"] { --_xpad: calc(var(--ds-text-sm) * 1.25 * 2 + var(--ds-space-2)); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__plot:not([data-x], [data-pane="upper"]) { --_xpad: calc(var(--ds-text-sm) * var(--ds-lh-list) + var(--ds-space-2)); }
.ds-chart[data-style="frontpage"] .ds-chart__gridline { stroke: var(--ds-rule); }
.ds-chart[data-style="frontpage"] .ds-chart__zero { stroke: var(--ds-ink-2); stroke-width: 1.25px; }

/* lines: named ones heavy, the crowd thin grey, the reference a dashed ink rule */
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__line[data-emph] { stroke-width: calc(2.75px * var(--_lw, 1)); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__line[data-role="context"] { stroke: color-mix(in oklab, var(--ds-chart-comparison) 70%, var(--_bg)); stroke-width: calc(1.25px * var(--_lw, 1)); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__line[data-role="reference"] { stroke: var(--ds-ink); stroke-width: calc(2.5px * var(--_lw, 1)); stroke-dasharray: 5 4; stroke-linecap: butt; }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__area:is([data-series], [data-token]) { --_area-alpha: 14%; }

/* names on the data: bold, in the series colour pulled toward ink (text-safe), with a surface halo */
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__on-label {
  font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: -0.005em;
  color: color-mix(in oklab, var(--_c, var(--ds-ink)) 78%, var(--ds-ink));
  text-shadow: 0 0 3px var(--_bg), 0 0 3px var(--_bg), 0 0 2px var(--_bg);
}
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__on-label[data-role="reference"] { color: var(--ds-ink); }
.ds-chart[data-style="frontpage"] .ds-chart__leader[data-arrow] { stroke: var(--ds-ink-2); stroke-width: 1px; }
.ds-chart__layer > .ds-chart__arrowhead { width: 8px; height: 6px; background: var(--ds-ink-2); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ds-chart__layer > .ds-chart__arrowhead[data-dir="up"] { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ds-chart[data-style="frontpage"] .ds-chart__layer .ds-chart__dot[data-size="4"] { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-width: 2px; }

/* big inline numbers (callout.big) */
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__callout[data-big] { font-size: clamp(1.4rem, 1rem + 2cqi, 2rem); background: transparent; color: var(--ds-ink); }

/* events: hairline rules, labels in ink-2 */
.ds-chart[data-style="frontpage"] .ds-chart__event { stroke: var(--ds-ink-muted); stroke-dasharray: 2 3; }
.ds-chart[data-style="frontpage"] .ds-chart__event-label { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium, 500); }

/* bars: flat, direct values, one lit bar; the rest a quiet grey */
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__value { font-size: var(--ds-text-sm); color: var(--ds-ink-2); font-weight: 600; }
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__value[data-lit] { color: var(--ds-ink); font-weight: 800; font-size: var(--ds-text-base); }
.ds-chart[data-charts][data-style="frontpage"] .ds-chart__rect[data-role="context"] { fill: color-mix(in oklab, var(--ds-chart-comparison) 45%, var(--_bg)); }
.ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__row-label { color: var(--ds-ink); font-weight: 500; }
.ds-chart[data-style="frontpage"] .ds-chart__plot[data-x="wrap"] .ds-chart__x span { font-size: var(--ds-text-xs); color: var(--ds-ink); }

/* the hero, when a spec asks for one: the display face, heavy */
.ds-chart[data-style="frontpage"] .ds-chart__hero-value { font-weight: 800; letter-spacing: -0.035em; }

@container (max-width: 480px) {
  .ds-chart[data-charts][data-style="frontpage"] .ds-chart__plot[data-axis-y]:not([data-axis-y="wide"]) { --_y-base: 38px; --_ytf: var(--ds-text-xs); }
  .ds-chart[data-style="frontpage"] .ds-chart__y span, .ds-chart[data-style="frontpage"] .ds-chart__x span { font-size: var(--ds-text-xs); }
  .ds-chart[data-style="frontpage"] .ds-chart__layer > .ds-chart__on-label { font-size: 12px; }
}

/* ---- css/styles/instrument.css ---- */
/* instrument: a premium finance device — a lit line on a deep ground derived from the theme.
   The ground is the theme's ink mixed with a little of its data primary, set to a fixed deep lightness, so it
   belongs to the theme and looks the same in light and dark mode. Text and data colours are re-derived for it
   (lightness clamped up, hue and chroma kept). The figure computes --_i-* from the page's tokens; its children
   re-point the DS tokens at them, so every calm part (ticks, labels, legend, tooltip) repaints itself. */

.ds-chart[data-charts][data-style="instrument"] {
  --_deep: color-mix(in oklab, var(--ds-ink) 86%, var(--ds-data-primary));
  --_i-ink: var(--ds-surface); --_i-ink-2: var(--ds-surface-2); --_i-muted: var(--ds-ink-faint); --_i-faint: var(--ds-ink-muted);
  --_i-grid: color-mix(in oklab, var(--_i-ink) 9%, transparent); --_i-rule: color-mix(in oklab, var(--_i-ink) 16%, transparent);
  --_i-up: var(--_up); --_i-down: var(--_down);
  --_i-s1: var(--_series-1); --_i-s2: var(--_series-2); --_i-s3: var(--_series-3); --_i-s4: var(--_series-4);
  --_i-s5: var(--_series-5); --_i-s6: var(--_series-6); --_i-s7: var(--_series-7); --_i-s8: var(--_series-8);
  --_i-comparison: color-mix(in oklab, var(--_i-ink) 42%, var(--_deep));
  position: relative;
  isolation: isolate;
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-radius: var(--ds-radius-lg, 16px);
  color: var(--_i-ink);
  color-scheme: dark;
  background:
    radial-gradient(90% 70% at 85% -10%, color-mix(in oklab, var(--_i-s1) 26%, transparent), transparent 70%),
    linear-gradient(to bottom, transparent 55%, color-mix(in oklab, var(--_deep) 70%, black 30%)),
    var(--_deep);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--_i-ink) 10%, transparent), 0 0 0 1px color-mix(in oklab, var(--_i-ink) 7%, transparent);
  --_bg: var(--_deep);
  --_up: var(--_i-up);
  --_down: var(--_i-down);
}
@supports (color: oklch(from red l c h)) {
  .ds-chart[data-charts][data-style="instrument"] {
    --_deep: oklch(from color-mix(in oklab, var(--ds-ink) 82%, var(--ds-data-primary)) 0.2 min(calc(c * 0.8), 0.07) h);
    --_i-ink: oklch(from var(--_deep) 0.96 0.012 h);
    --_i-ink-2: oklch(from var(--_deep) 0.85 0.02 h);
    --_i-muted: oklch(from var(--_deep) 0.7 0.025 h);
    --_i-faint: oklch(from var(--_deep) 0.5 0.03 h);
    --_i-grid: oklch(from var(--_deep) 0.26 0.03 h);
    --_i-rule: oklch(from var(--_deep) 0.33 0.03 h);
    --_i-comparison: oklch(from var(--_deep) 0.46 0.025 h);
    --_i-up: oklch(from var(--ds-chart-up, var(--ds-success)) clamp(0.74, l, 0.9) c h);
    --_i-down: oklch(from var(--ds-chart-down, var(--ds-danger)) clamp(0.74, l, 0.9) c h);
    --_i-s1: oklch(from var(--_series-1) clamp(0.74, l, 0.9) c h);
    --_i-s2: oklch(from var(--_series-2) clamp(0.74, l, 0.9) c h);
    --_i-s3: oklch(from var(--_series-3) clamp(0.74, l, 0.9) c h);
    --_i-s4: oklch(from var(--_series-4) clamp(0.74, l, 0.9) c h);
    --_i-s5: oklch(from var(--_series-5) clamp(0.74, l, 0.9) c h);
    --_i-s6: oklch(from var(--_series-6) clamp(0.74, l, 0.9) c h);
    --_i-s7: oklch(from var(--_series-7) clamp(0.74, l, 0.9) c h);
    --_i-s8: oklch(from var(--_series-8) clamp(0.74, l, 0.9) c h);
  }
}
/* token-painted series (an accent dial's later series, colour tokens in a spec) relit for the deep ground too,
   as the image backend does (instrumentTheme); paper and soft grounds keep the page's tokens */
@supports (color: oklch(from red l c h)) {
  .ds-chart[data-charts][data-style="instrument"]:not([data-dial-ground="paper"], [data-dial-ground="soft"]) {
    --_d0: var(--ds-data-primary, var(--ds-data-1)); --_d1: var(--ds-data-1); --_d2: var(--ds-data-2); --_d3: var(--ds-data-3); --_d4: var(--ds-data-4);
    --_d5: var(--ds-data-5); --_d6: var(--ds-data-6); --_d7: var(--ds-data-7); --_d8: var(--ds-data-8);
  }
  .ds-chart[data-charts][data-style="instrument"]:not([data-dial-ground="paper"], [data-dial-ground="soft"]) > * {
    --ds-data-primary: oklch(from var(--_d0) clamp(0.74, l, 0.9) c h);
    --ds-data-1: oklch(from var(--_d1) clamp(0.74, l, 0.9) c h); --ds-data-2: oklch(from var(--_d2) clamp(0.74, l, 0.9) c h);
    --ds-data-3: oklch(from var(--_d3) clamp(0.74, l, 0.9) c h); --ds-data-4: oklch(from var(--_d4) clamp(0.74, l, 0.9) c h);
    --ds-data-5: oklch(from var(--_d5) clamp(0.74, l, 0.9) c h); --ds-data-6: oklch(from var(--_d6) clamp(0.74, l, 0.9) c h);
    --ds-data-7: oklch(from var(--_d7) clamp(0.74, l, 0.9) c h); --ds-data-8: oklch(from var(--_d8) clamp(0.74, l, 0.9) c h);
  }
}
/* the children see the instrument's tokens */
.ds-chart[data-charts][data-style="instrument"] > * {
  --ds-ink: var(--_i-ink); --ds-ink-2: var(--_i-ink-2); --ds-ink-muted: var(--_i-muted); --ds-ink-faint: var(--_i-faint);
  --ds-chart-grid: var(--_i-grid); --ds-rule: var(--_i-rule); --ds-rule-soft: var(--_i-grid); --ds-rule-strong: var(--_i-rule);
  --ds-chart-comparison: var(--_i-comparison); --ds-surface: var(--_deep); --ds-surface-raised: var(--_deep);
  --_series-1: var(--_i-s1); --_series-2: var(--_i-s2); --_series-3: var(--_i-s3); --_series-4: var(--_i-s4);
  --_series-5: var(--_i-s5); --_series-6: var(--_i-s6); --_series-7: var(--_i-s7); --_series-8: var(--_i-s8);
}
/* the lit colour follows the trend, and while scrubbing, the direction under the cursor */
.ds-chart[data-style="instrument"] { --_lit: var(--_up); }
.ds-chart[data-style="instrument"][data-trend="down"] { --_lit: var(--_down); }
.ds-chart[data-style="instrument"][data-dir="up"] { --_lit: var(--_up); }
.ds-chart[data-style="instrument"][data-dir="down"] { --_lit: var(--_down); }

/* head: the name is quiet, the number is the headline */
.ds-chart[data-style="instrument"] .ds-chart__title { font-size: var(--ds-text-base); font-weight: var(--ds-weight-medium, 500); letter-spacing: 0; color: var(--_i-ink); }
.ds-chart[data-style="instrument"] .ds-chart__subtitle { color: var(--_i-muted); font-size: var(--ds-text-xs); }
.ds-chart[data-style="instrument"] .ds-chart__hero { margin-block-start: calc(-1 * var(--ds-space-1)); }
.ds-chart[data-style="instrument"] .ds-chart__hero-label { color: var(--_i-muted); font-size: var(--ds-text-xs); letter-spacing: .02em; }
.ds-chart[data-style="instrument"] .ds-chart__hero-value { font-size: clamp(2.2rem, 1.4rem + 4cqi, 3.4rem); font-weight: 600; letter-spacing: -0.03em; color: var(--_i-ink); text-shadow: 0 0 28px color-mix(in oklab, var(--_lit) 22%, transparent); transition: color .15s; }
.ds-chart[data-style="instrument"] .ds-chart__delta { color: var(--_d); background: color-mix(in oklab, var(--_d) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_d) 30%, transparent); }
.ds-chart[data-style="instrument"] .ds-chart__hero-note { color: var(--_i-muted); }
.ds-chart[data-style="instrument"] .ds-chart__source { color: var(--_i-faint); }

/* plot: near-invisible grid, quiet ticks */
.ds-chart[data-style="instrument"] .ds-chart__gridline { stroke: var(--_i-grid); stroke-dasharray: 1 5; stroke-linecap: round; }
.ds-chart[data-style="instrument"] .ds-chart__zero { stroke: var(--_i-rule); }
.ds-chart[data-style="instrument"] :is(.ds-chart__y, .ds-chart__x) span { color: var(--_i-faint); }
.ds-chart[data-style="instrument"] .ds-chart__x span small { color: var(--_i-faint); }
.ds-chart[data-style="instrument"] .ds-chart__event { stroke: var(--_i-rule); stroke-dasharray: 2 4; }
.ds-chart[data-style="instrument"] .ds-chart__event-label { color: var(--_i-muted); background: transparent; }
.ds-chart[data-style="instrument"] .ds-chart__band { fill: color-mix(in oklab, var(--_i-ink) 4%, transparent); }
.ds-chart[data-style="instrument"] .ds-chart__baseline { stroke: var(--_i-faint); stroke-width: 1px; stroke-dasharray: 1.5 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; fill: none; }

/* the lit line: a soft halo under a crisp stroke; the rest of the crowd recedes */
.ds-chart[data-style="instrument"] .ds-chart__glow { fill: none; stroke-width: calc(3.5px * var(--_lw, 1)); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-chart[data-style="instrument"] .ds-chart__line[data-lit] { stroke-width: calc(2.4px * var(--_lw, 1)); }
.ds-chart[data-style="instrument"] .ds-chart__line[data-role="context"] { stroke-width: 1px; }
.ds-chart[data-style="instrument"] .ds-chart__line[data-role="reference"] { stroke-width: calc(1.4px * var(--_lw, 1)); stroke-dasharray: 3 4; }
.ds-chart[data-style="instrument"] .ds-chart__line[data-role="comparison"] { stroke: var(--_i-comparison); }

/* candles: lit, with the up candles hollow on the deep ground */
.ds-chart[data-style="instrument"] .ds-chart__candle[data-hollow] { fill: color-mix(in oklab, var(--_c) 14%, var(--_deep)); }
.ds-chart[data-style="instrument"] .ds-chart__vol { fill: color-mix(in oklab, var(--_c) 38%, transparent); }
.ds-chart[data-style="instrument"] .ds-chart__end-label { color: var(--_i-ink); }
.ds-chart[data-style="instrument"] .ds-chart__ref, .ds-chart[data-style="instrument"] .ds-chart__ref-label { stroke: var(--_i-faint); color: var(--_i-muted); background: transparent; }

/* bars: one lit, the rest dimmed (the gradient comes from the figure's defs) */
.ds-chart[data-style="instrument"] .ds-chart__value { color: var(--_i-muted); }
.ds-chart[data-style="instrument"] .ds-chart__value[data-lit] { color: var(--_i-ink); font-weight: 600; text-shadow: 0 0 14px color-mix(in oklab, var(--_lit) 40%, transparent); }

/* pins: min and max, small and quiet; a named series' name in its own colour */
.ds-chart[data-style="instrument"] .ds-chart__layer > .ds-chart__pin { font-size: 11px; color: var(--_i-muted); font-weight: var(--ds-weight-medium, 500); }
.ds-chart[data-style="instrument"] .ds-chart__layer > .ds-chart__pin[data-series] { color: color-mix(in oklab, var(--_c) 80%, var(--_i-ink)); }
.ds-chart[data-style="instrument"] .ds-chart__layer > .ds-chart__pin[data-role="reference"] { color: var(--_i-muted); }

/* the live end: a glowing dot */
.ds-chart[data-style="instrument"] .ds-chart__layer .ds-chart__dot[data-glow] { border-color: var(--_deep); box-shadow: 0 0 0 4px color-mix(in oklab, var(--_c) 28%, transparent), 0 0 22px 6px color-mix(in oklab, var(--_c) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .ds-chart[data-style="instrument"] .ds-chart__layer .ds-chart__dot[data-glow] { animation: ds-chart-breathe 2.8s ease-in-out infinite; }
}
@keyframes ds-chart-breathe { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--_c) 14%, transparent), 0 0 28px 8px color-mix(in oklab, var(--_c) 42%, transparent); } }
.ds-chart[data-style="instrument"][data-scrub] .ds-chart__layer .ds-chart__dot[data-glow] { opacity: 0.3; animation: none; }

/* scrub: horizontal drags scrub, vertical ones still scroll the page */
.ds-chart[data-style="instrument"] .ds-chart__plot { touch-action: pan-y; cursor: crosshair; }
.ds-chart[data-style="instrument"] .ds-chart__plot:focus-visible { outline: 2px solid color-mix(in oklab, var(--_lit) 70%, transparent); outline-offset: 6px; }
.ds-chart[data-style="instrument"] .ds-chart__layer .ds-chart__crosshair { width: 1px; background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--_lit) 70%, transparent) 30%, color-mix(in oklab, var(--_lit) 20%, transparent)); border: 0; }
.ds-chart[data-style="instrument"]:not([data-kind="waffle"]) .ds-chart__layer .ds-chart__dot:not([data-glow]) { --_c: var(--_lit); background: var(--_i-ink); border: 3px solid var(--_lit); width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; z-index: 2; }
.ds-chart__layer .ds-chart__bloom { position: absolute; inset-inline-start: calc(var(--_x, 0) * 1%); inset-block-start: calc(var(--_y, 0) * 1%); width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--_lit) 55%, transparent), color-mix(in oklab, var(--_lit) 14%, transparent) 38%, transparent 68%); pointer-events: none; translate: none; mix-blend-mode: screen; }
/* the glass tooltip */
.ds-chart[data-style="instrument"] .ds-chart__layer .ds-chart__tooltip {
  min-width: 0; padding: 8px 12px; border-radius: 12px; color: var(--_i-ink);
  background: color-mix(in oklab, var(--_i-ink) 9%, color-mix(in oklab, var(--_deep) 55%, transparent));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--_i-ink) 18%, transparent), 0 10px 30px color-mix(in oklab, var(--_deep) 80%, transparent);
  font-variant-numeric: tabular-nums;
}
.ds-chart[data-style="instrument"] .ds-chart__tooltip b { color: var(--_i-muted); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium, 500); margin: 0; }
.ds-chart[data-style="instrument"] .ds-chart__tooltip-row { font-size: var(--ds-text-base); font-weight: 600; }
.ds-chart[data-style="instrument"] .ds-chart__tooltip-row > span:first-child { display: none; }
.ds-chart[data-style="instrument"] .ds-chart__tooltip-delta { display: block; font-size: var(--ds-text-xs); font-weight: 600; color: var(--_lit); }
.ds-chart[data-style="instrument"][data-kind="candlestick"] .ds-chart__tooltip-row { font-size: var(--ds-text-xs); font-weight: 500; }
.ds-chart[data-style="instrument"][data-kind="candlestick"] .ds-chart__tooltip-row > span:first-child { display: inline-flex; color: var(--_i-muted); }
.ds-chart[data-style="instrument"] .ds-chart__table { color: var(--_i-ink); }

/* ---- css/styles/showpiece.css ---- */
/* showpiece: texture, light and new forms. The figure is a dark island of its own theme (data-mode="dark" on the
   figure, so the DS restates the theme's dark tokens), on a deep ground tinted with its data primary, with a
   wash of light and film grain. Fills carry gradients and grain (SVG filters, set per mark); lines and key dots
   glow. Same in light and dark mode: the dark ground is the design. */

.ds-chart[data-charts][data-style="showpiece"] {
  --_deep: color-mix(in oklab, var(--_series-1) 10%, color-mix(in oklab, var(--ds-ground, var(--ds-surface)) 38%, #000));
  --_bg: var(--_deep);
  --ds-chart-bg: var(--_deep);
  --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 10%, var(--_deep));
  --_area-alpha: 30%;
  color: var(--ds-ink);
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-radius: var(--ds-radius-lg, 16px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(110% 75% at 10% 0%, color-mix(in oklab, var(--_series-1) 26%, transparent), transparent 62%),
    radial-gradient(80% 70% at 100% 100%, color-mix(in oklab, var(--ds-data-2) 14%, transparent), transparent 70%),
    var(--_deep);
  gap: var(--ds-space-4);
}

/* the head: the display face, heavy and tight */
.ds-chart[data-charts][data-style="showpiece"] .ds-chart__title {
  font-family: var(--ds-font-display, var(--ds-font-sans));
  font-weight: var(--ds-weight-bold, 700);
  font-size: clamp(1.4rem, 1rem + 2.4cqi, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--ds-ink);
}
.ds-chart[data-charts][data-style="showpiece"] .ds-chart__subtitle { color: var(--ds-ink-2); max-width: 54ch; margin-block-start: var(--ds-space-1); }

/* lines: brighter and a touch thicker (the glow filter is on the path) */
.ds-chart[data-charts][data-style="showpiece"] .ds-chart__line:not([data-role]) { stroke-width: calc(2.6px * var(--_lw, 1)); }
.ds-chart[data-style="showpiece"] .ds-chart__gridline { stroke: color-mix(in oklab, var(--ds-ink) 9%, transparent); }

/* light under a line chart's lead series (the gradient comes from the mark's own fx) */
.ds-chart__splight { stroke: none; fill: color-mix(in srgb, var(--_c, var(--_series-1)) 20%, transparent); }

/* bars: a lit top edge */
.ds-chart[data-style="showpiece"] .ds-chart__rect { stroke: color-mix(in oklab, var(--_c, var(--_series-1)) 60%, white); stroke-width: 0; }

/* ribbons: separated by the deep ground, with a hairline of light on each edge */
.ds-chart[data-style="showpiece"] .ds-chart__ribbon { stroke: var(--_deep); stroke-width: 2px; }
.ds-chart[data-style="showpiece"] .ds-chart__ribbon[data-role="context"] { fill: color-mix(in oklab, var(--ds-ink) 24%, var(--_deep)); }
.ds-chart[data-style="showpiece"] .ds-chart__layer > .ds-chart__ribbon-label { color: color-mix(in oklab, var(--_c) 55%, white); text-shadow: 0 0 12px color-mix(in oklab, var(--_c) 45%, transparent); }
.ds-chart[data-style="showpiece"] .ds-chart__layer > .ds-chart__ribbon-label[data-role="context"] { color: var(--ds-ink-muted); text-shadow: none; }

/* beeswarm: lit dots on the dark, the highlighted ones glowing and ringed in light */
.ds-chart[data-style="showpiece"][data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot { border-color: color-mix(in oklab, var(--_deep) 70%, transparent); }
.ds-chart[data-style="showpiece"][data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot[data-glow] { box-shadow: 0 0 10px 1px color-mix(in oklab, var(--_c, var(--_series-1)) 55%, transparent); }
.ds-chart[data-style="showpiece"][data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot[data-soft] { background: color-mix(in oklab, var(--_c, var(--_series-1)) 68%, var(--_deep)); box-shadow: 0 0 6px color-mix(in oklab, var(--_c, var(--_series-1)) 28%, transparent); }
.ds-chart[data-style="showpiece"][data-kind="beeswarm"] .ds-chart__layer .ds-chart__dot[data-ring] { border: 2px solid color-mix(in oklab, var(--_c, var(--_series-1)) 35%, white); box-shadow: 0 0 0 3px color-mix(in oklab, var(--_c, var(--_series-1)) 25%, transparent), 0 0 22px 4px color-mix(in oklab, var(--_c, var(--_series-1)) 60%, transparent); }
.ds-chart[data-style="showpiece"] .ds-chart__layer > :is(.ds-chart__swarm-label, .ds-chart__median-label) { text-shadow: 0 0 3px var(--_deep), 0 0 6px var(--_deep), 0 0 10px var(--_deep); }
.ds-chart[data-style="showpiece"] .ds-chart__layer > .ds-chart__median-label { background: transparent; }

/* the table and buttons stay readable on the island */
.ds-chart[data-style="showpiece"] .ds-chart__source { color: var(--ds-ink-muted); }

@container (max-width: 480px) {
  .ds-chart[data-charts][data-style="showpiece"] { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-3); }
}

/* ---- css/styles/verdict.css ---- */
/* verdict: meaning first. A soft ground tinted by the verdict, a sentence headline in the theme's serif, bands
   named in words on the right, a lead line that changes colour through them, a quiet ghost of the comparison
   period, the latest reading pinned with a rule and a pill, and a key metric card. Light and dark both work:
   every colour is a theme token, mixed. */

.ds-chart[data-charts][data-style="verdict"] {
  --_vt: var(--ds-data-primary, var(--ds-data-1));
  --_bg: var(--ds-chart-bg, var(--ds-surface));
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-radius: var(--ds-radius-lg, 16px);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--_vt) 16%, var(--_bg)) 0%,
      color-mix(in oklab, var(--_vt) 5%, var(--_bg)) 45%,
      var(--_bg) 100%);
  gap: var(--ds-space-4);
}
.ds-chart[data-style="verdict"][data-verdict-tone="good"] { --_vt: var(--ds-success); }
.ds-chart[data-style="verdict"][data-verdict-tone="warn"] { --_vt: var(--ds-warning); }
.ds-chart[data-style="verdict"][data-verdict-tone="bad"] { --_vt: var(--ds-danger); }
.ds-chart[data-style="verdict"][data-verdict-tone="neutral"] { --_vt: var(--ds-ink-muted); }

/* the headline: a sentence, in the serif, regular weight, large */
.ds-chart[data-charts][data-style="verdict"] .ds-chart__title {
  font-family: var(--ds-font-serif, var(--ds-font-display, var(--ds-font-sans)));
  font-weight: 400;
  font-size: clamp(1.45rem, 1.05rem + 2.6cqi, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-chart[data-charts][data-style="verdict"] .ds-chart__subtitle { color: var(--ds-ink-2); font-size: var(--ds-text-base, 1rem); line-height: 1.45; max-width: 46ch; }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__heading { gap: var(--ds-space-2); }
.ds-chart[data-style="verdict"] .ds-chart__eyebrow { margin-block-end: var(--ds-space-1); }

/* the plot: no grid but the band edges; gridlines (no bands) as quiet dashes */
.ds-chart[data-style="verdict"] .ds-chart__gridline { stroke: color-mix(in oklab, var(--ds-chart-grid) 80%, transparent); stroke-dasharray: 3 5; }
.ds-chart[data-style="verdict"][data-bands] .ds-chart__gridline { display: none; }
.ds-chart[data-style="verdict"] .ds-chart__yband { fill: color-mix(in srgb, var(--_c, var(--ds-ink)) 3%, transparent); }
.ds-chart[data-style="verdict"] .ds-chart__band-edge { stroke: color-mix(in oklab, var(--ds-ink) 10%, transparent); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__y[data-side="end"] span { font-size: var(--ds-text-sm); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__y[data-side="end"] span[data-tone] { color: var(--ds-ink-2); font-weight: var(--ds-weight-medium, 500); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__y[data-side="end"] span[data-minor] { font-size: var(--ds-text-xs); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__x span { font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__plot[data-x="two"] { --_xpad: calc(var(--ds-text-sm) * 1.25 * 2 + var(--ds-space-2)); }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__plot { --_xpad: calc(var(--ds-text-sm) * var(--ds-lh-list) + var(--ds-space-3)); }

/* lines: the lead thick and round; the comparison a wide soft ghost (solid, not dashed) */
.ds-chart[data-charts][data-style="verdict"] .ds-chart__line[data-lead] { stroke-width: calc(3px * var(--_lw, 1)); stroke-linecap: round; stroke-linejoin: round; }
.ds-chart[data-charts][data-style="verdict"] .ds-chart__line[data-ghost] { stroke: var(--ds-chart-comparison); stroke-opacity: 0.55; stroke-width: calc(3px * var(--_lw, 1)); stroke-dasharray: none; stroke-linecap: round; }
.ds-chart__vfill { stroke: none; }
.ds-chart[data-style="verdict"] .ds-chart__layer > .ds-chart__ghost-label { font-size: var(--ds-text-xs); color: var(--ds-ink-2); text-shadow: 0 0 3px var(--_bg), 0 0 3px var(--_bg), 0 0 6px var(--_bg); }

/* the latest reading: a rule and an inverted pill */
.ds-chart__cursor { stroke: var(--ds-ink-2); stroke-width: 1.2px; }
.ds-chart__layer > .ds-chart__pill { z-index: 1; padding: 0.3em 0.85em; border-radius: 99px; background: var(--ds-ink); color: var(--_bg) !important; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); letter-spacing: 0.01em; box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--ds-ink) 60%, transparent); }
.ds-chart[data-style="verdict"] .ds-chart__layer .ds-chart__dot[data-lead] { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--_bg); box-shadow: 0 0 0 1px color-mix(in oklab, var(--_c) 40%, transparent), 0 0 14px 2px color-mix(in oklab, var(--_c) 35%, transparent); }

/* the key metric card sits on the ground like a panel */
.ds-chart[data-style="verdict"] .ds-chart__km { background: color-mix(in oklab, var(--ds-ink) 5%, var(--_bg)); border-color: color-mix(in oklab, var(--ds-ink) 7%, transparent); padding: var(--ds-space-4) var(--ds-space-5); gap: var(--ds-space-2); }
.ds-chart[data-style="verdict"] .ds-chart__km-value b { font-size: clamp(2.2rem, 1.6rem + 3cqi, 3rem); font-weight: 400; }


@container (max-width: 480px) {
  .ds-chart[data-charts][data-style="verdict"] { padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-3); }
  .ds-chart[data-style="verdict"] .ds-chart__km { padding: var(--ds-space-4); }
  .ds-chart[data-style="verdict"] .ds-chart__layer > .ds-chart__ghost-label { display: none; }
}

/* ---- css/styles/zz-dials.css ---- */
/* Dials (src/dials.ts, docs/STYLES.md "Dials"): settings inside each style, set on the figure as data-dial-<name>.
   A dial left out leaves the style as designed. The file sorts last (zz-) so a dial wins a tie with the style it
   turns. Colours come only from DS tokens, mixed. The DS reserves data-density and data-labels as host attributes,
   hence the data-dial- prefix. */

/* ================================================================ accent: which DS data token leads (slot 1).
   The figure re-points --_series-1 (grounds and glows tint with it); its children re-point it again, because a
   theme's slot-order rule on the figure can outrank this one. Instrument relights it (below). */
.ds-chart.ds-chart[data-charts][data-dial-accent="primary"] { --_acc: var(--ds-data-primary, var(--ds-data-1)); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-1"] { --_acc: var(--ds-data-1); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-2"] { --_acc: var(--ds-data-2); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-3"] { --_acc: var(--ds-data-3); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-4"] { --_acc: var(--ds-data-4); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-5"] { --_acc: var(--ds-data-5); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-6"] { --_acc: var(--ds-data-6); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-7"] { --_acc: var(--ds-data-7); }
.ds-chart.ds-chart[data-charts][data-dial-accent="data-8"] { --_acc: var(--ds-data-8); }
.ds-chart.ds-chart[data-charts][data-dial-accent] { --_series-1: var(--_acc); }
.ds-chart[data-charts][data-dial-accent]:not([data-style="instrument"]) > * { --_series-1: var(--_acc); }

/* ================================================================ ground */
/* deep: any style becomes a dark island of its own theme (the figure carries data-mode="dark", so the DS restates
   the theme's dark tokens on it), on showpiece's deep ground with a little light from the top left */
.ds-chart[data-charts][data-dial-ground="deep"]:not([data-style="instrument"], [data-style="showpiece"]) {
  --_deep: color-mix(in oklab, var(--_series-1) 10%, color-mix(in oklab, var(--ds-ground, var(--ds-surface)) 38%, #000));
  --_bg: var(--_deep);
  --ds-chart-bg: var(--_deep);
  --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 10%, var(--_deep));
  color: var(--ds-ink);
  color-scheme: dark;
}
/* soft: a tinted mid ground, the surface with a little ink and a little of the lead colour; muted text is pulled a
   fifth toward ink so it keeps its contrast on the tint */
.ds-chart[data-charts][data-dial-ground="soft"] {
  --_soft: color-mix(in oklab, var(--_series-1) 6%, color-mix(in oklab, var(--ds-ink) 3%, var(--ds-surface)));
  --_muted0: var(--ds-ink-muted);
  --_bg: var(--_soft);
  --ds-chart-bg: var(--_soft);
}
.ds-chart[data-charts][data-dial-ground="soft"] > * {
  --ds-ink-muted: color-mix(in oklab, var(--_muted0) 80%, var(--ds-ink));
  --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 9%, var(--_soft));
  --ds-rule-soft: color-mix(in oklab, var(--ds-ink) 7%, var(--_soft));
  --ds-rule: color-mix(in oklab, var(--ds-ink) 12%, var(--_soft));
}
/* a ground that is not the page's becomes a card (verdict draws its own wash over --_bg) */
.ds-chart[data-charts]:is([data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-style="instrument"], [data-style="showpiece"]) {
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-4);
  border-radius: var(--_r-card, var(--ds-radius-lg, 16px));
}
.ds-chart[data-charts][data-dial-ground="deep"]:not([data-style="instrument"], [data-style="showpiece"], [data-style="verdict"]) {
  background: radial-gradient(110% 75% at 10% 0%, color-mix(in oklab, var(--_series-1) 22%, transparent), transparent 62%), var(--_deep);
}
.ds-chart[data-charts][data-dial-ground="soft"]:not([data-style="instrument"], [data-style="showpiece"], [data-style="verdict"]) {
  background: radial-gradient(110% 80% at 8% 0%, color-mix(in oklab, var(--_series-1) 12%, transparent), transparent 60%), var(--_soft);
}

/* instrument off its island: the theme's own inks and data colours (no relighting) on paper or the soft ground */
.ds-chart[data-charts][data-style="instrument"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) {
  --_deep: var(--ds-surface);
  --_i-ink: var(--ds-ink); --_i-ink-2: var(--ds-ink-2); --_i-muted: var(--ds-ink-muted); --_i-faint: var(--ds-ink-muted);
  --_i-grid: var(--ds-chart-grid); --_i-rule: var(--ds-rule); --_i-comparison: var(--ds-chart-comparison);
  --_i-up: var(--ds-chart-up, var(--ds-success)); --_i-down: var(--ds-chart-down, var(--ds-danger));
  --_i-s1: var(--_series-1); --_i-s2: var(--_series-2); --_i-s3: var(--_series-3); --_i-s4: var(--_series-4);
  --_i-s5: var(--_series-5); --_i-s6: var(--_series-6); --_i-s7: var(--_series-7); --_i-s8: var(--_series-8);
  color-scheme: normal;
  background: radial-gradient(90% 70% at 85% -10%, color-mix(in oklab, var(--_i-s1) 9%, transparent), transparent 70%), var(--_deep);
  box-shadow: 0 0 0 1px var(--ds-rule);
}
.ds-chart[data-charts][data-style="instrument"][data-dial-ground="soft"] {
  --_deep: var(--_soft);
  --_i-muted: color-mix(in oklab, var(--ds-ink-muted) 80%, var(--ds-ink)); --_i-faint: var(--_i-muted);
  --_i-grid: color-mix(in oklab, var(--ds-ink) 9%, var(--_soft)); --_i-rule: color-mix(in oklab, var(--ds-ink) 12%, var(--_soft));
  background: radial-gradient(90% 70% at 85% -10%, color-mix(in oklab, var(--_i-s1) 16%, transparent), transparent 70%), var(--_deep);
  box-shadow: none;
}
.ds-chart[data-style="instrument"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) .ds-chart__gridline { stroke-dasharray: none; }
.ds-chart[data-style="instrument"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) .ds-chart__layer .ds-chart__bloom { mix-blend-mode: multiply; opacity: .5; }
/* the accent lights instrument's line: relit for the deep ground, as it is on paper */
.ds-chart[data-charts][data-style="instrument"][data-dial-accent] { --_i-s1: var(--_acc); --_lit: var(--_i-s1); }
@supports (color: oklch(from red l c h)) {
  .ds-chart[data-charts][data-style="instrument"][data-dial-accent]:not([data-dial-ground="paper"], [data-dial-ground="soft"]) { --_i-s1: oklch(from var(--_acc) clamp(0.74, l, 0.9) c h); }
}

/* showpiece off its island: the mode's tokens on paper or the soft ground; light labels go back to ink */
.ds-chart[data-charts][data-style="showpiece"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) {
  --_deep: var(--ds-surface);
  --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 9%, var(--_deep));
  background: radial-gradient(110% 75% at 10% 0%, color-mix(in oklab, var(--_series-1) 9%, transparent), transparent 62%), var(--_deep);
  box-shadow: 0 0 0 1px var(--ds-rule);
}
.ds-chart[data-charts][data-style="showpiece"][data-dial-ground="soft"] {
  --_deep: var(--_soft);
  background: radial-gradient(110% 75% at 10% 0%, color-mix(in oklab, var(--_series-1) 16%, transparent), transparent 62%), var(--_deep);
  box-shadow: none;
}
.ds-chart[data-style="showpiece"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) .ds-chart__layer > .ds-chart__ribbon-label { color: color-mix(in oklab, var(--_c) 72%, var(--ds-ink)); text-shadow: none; }
.ds-chart[data-style="showpiece"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) .ds-chart__ribbon[data-role="context"] { fill: color-mix(in oklab, var(--ds-chart-comparison) 45%, var(--_deep)); }
.ds-chart[data-style="showpiece"][data-kind="beeswarm"]:is([data-dial-ground="paper"], [data-dial-ground="soft"]) .ds-chart__layer .ds-chart__dot[data-ring] { border-color: var(--ds-ink); }

/* ================================================================ density: margins, line widths, type sizes, tick
   counts (the layout picks the ticks and the plot height; CSS scales text and strokes) */
.ds-chart[data-charts][data-dial-density] { --_t-xs: var(--ds-text-xs); --_t-sm: var(--ds-text-sm); --_t-base: var(--ds-text-base); }
.ds-chart[data-charts][data-dial-density] > * {
  --ds-text-xs: calc(var(--_t-xs) * var(--_fs, 1));
  --ds-text-sm: calc(var(--_t-sm) * var(--_fs, 1));
  --ds-text-base: calc(var(--_t-base) * var(--_fs, 1));
}
.ds-chart[data-charts][data-dial-density="airy"] { --_lw: 1.15; --_fs: 1.08; --_stroke: 2.3px; gap: var(--ds-space-5); }
.ds-chart[data-charts][data-dial-density="tight"] { --_lw: 0.85; --_fs: 0.92; --_stroke: 1.7px; gap: var(--ds-space-2); }
/* a carded figure breathes with it (vw keeps a phone's plot wide enough) */
.ds-chart[data-charts][data-dial-density="airy"]:is([data-style="instrument"], [data-style="showpiece"], [data-style="verdict"], [data-dial-ground="deep"], [data-dial-ground="soft"]) {
  padding: min(var(--ds-space-7, 32px), 6vw) min(var(--ds-space-7, 32px), 6vw) min(var(--ds-space-6, 28px), 5vw);
}
.ds-chart[data-charts][data-dial-density="tight"]:is([data-style="instrument"], [data-style="showpiece"], [data-style="verdict"], [data-dial-ground="deep"], [data-dial-ground="soft"]) {
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3);
}
.ds-chart[data-charts][data-dial-density="tight"] .ds-chart__heading { gap: 2px; }
.ds-chart[data-charts][data-dial-density="airy"] .ds-chart__heading { gap: var(--ds-space-2); }

/* ================================================================ type: the headline / number face pairing, from the
   theme's DS font tokens (condensed has no token: a stack of common condensed faces, then the display face) */
.ds-chart[data-charts][data-dial-type="sans"] { --_hf: var(--ds-font-sans); --_hw: 650; --_ht: -0.015em; }
.ds-chart[data-charts][data-dial-type="serif"] { --_hf: var(--ds-font-serif, ui-serif, Georgia, serif); --_hw: 500; --_ht: -0.012em; }
.ds-chart[data-charts][data-style="verdict"][data-dial-type="serif"] { --_hw: 400; }
.ds-chart[data-charts][data-dial-type="condensed"] { --_hf: "Barlow Condensed", "Roboto Condensed", "Archivo Narrow", "Arial Narrow", "Liberation Sans Narrow", var(--ds-font-display, var(--ds-font-sans)); --_hw: 700; --_ht: 0; }
.ds-chart[data-charts][data-dial-type="mono"] { --_hf: var(--ds-font-mono); --_hw: 500; --_ht: -0.02em; }
.ds-chart[data-charts][data-dial-type] .ds-chart__title { font-family: var(--_hf); letter-spacing: var(--_ht); }
.ds-chart[data-charts][data-dial-type="condensed"] :is(.ds-chart__title, .ds-chart__hero-value, .ds-chart__km-value b) { font-stretch: condensed; }
.ds-chart[data-charts][data-dial-type]:not([data-style="instrument"]) .ds-chart__title { font-weight: var(--_hw); }
.ds-chart[data-charts][data-dial-type="mono"]:not([data-style="instrument"]) .ds-chart__title { font-size: 0.9em; }
.ds-chart[data-charts][data-dial-type="mono"][data-style]:not([data-style="instrument"], [data-style="calm"]) .ds-chart__title { font-size: clamp(1.15rem, 0.95rem + 1.6cqi, 1.6rem); }
.ds-chart[data-charts][data-dial-type="condensed"][data-style]:not([data-style="instrument"], [data-style="calm"]) .ds-chart__title { font-size: clamp(1.6rem, 1.2rem + 2.6cqi, 2.4rem); line-height: 1.02; }
.ds-chart[data-charts][data-dial-type] :is(.ds-chart__hero-value, .ds-chart__km-value b, .ds-chart__layer > .ds-chart__callout[data-big]) { font-family: var(--_hf); }
.ds-chart[data-charts][data-dial-type="condensed"] .ds-chart__hero-value { letter-spacing: 0; font-weight: 700; }
/* mono: the numbers you scan are mono too (ticks, values, pins, the tooltip), a touch smaller for the wider face */
.ds-chart[data-charts][data-dial-type="mono"] :is(.ds-chart__y span, .ds-chart__x span, .ds-chart__layer > .ds-chart__value, .ds-chart__layer > .ds-chart__pin, .ds-chart__end-label b, .ds-chart__tooltip, .ds-chart__delta) { font-family: var(--ds-font-mono); font-size-adjust: 0.5; }
.ds-chart[data-charts][data-dial-type="mono"] .ds-chart__eyebrow { font-family: var(--ds-font-mono); letter-spacing: 0.08em; }

/* ================================================================ corners: card, bar ends, tooltip and pills. Fixed
   radii, so the dial reads the same in a theme with square corners (radius-scale 0) */
.ds-chart[data-charts][data-dial-corners="sharp"] { --_r-card: 0px; --_r-tip: 2px; --_r-pill: 3px; --_r-km: 2px; --_r-seg: 0px; --_r-key: 0px; }
.ds-chart[data-charts][data-dial-corners="soft"] { --_r-card: 10px; --_r-tip: 8px; --_r-pill: 6px; --_r-km: 10px; --_r-seg: 2px; --_r-key: 3px; }
.ds-chart[data-charts][data-dial-corners="round"] { --_r-card: 24px; --_r-tip: 16px; --_r-pill: 999px; --_r-km: 20px; --_r-seg: 99px; --_r-key: 50%; }
.ds-chart[data-charts][data-dial-corners] { border-radius: var(--_r-card); }
.ds-chart[data-charts][data-dial-corners] .ds-chart__layer .ds-chart__tooltip { border-radius: var(--_r-tip); }
.ds-chart[data-charts][data-dial-corners] :is(.ds-chart__delta, .ds-chart__layer > .ds-chart__pill) { border-radius: var(--_r-pill); }
.ds-chart[data-charts][data-dial-corners] .ds-chart__layer > :is(.ds-chart__callout, .ds-chart__event-label, .ds-chart__median-label) { border-radius: min(var(--_r-pill), 6px); }
.ds-chart[data-charts][data-dial-corners] .ds-chart__km { border-radius: var(--_r-km); }
.ds-chart[data-charts][data-dial-corners] .ds-chart__km-seg { border-radius: var(--_r-seg); }
.ds-chart[data-charts][data-dial-corners] .ds-chart__swatch[data-shape="square"] { border-radius: var(--_r-key); }
/* round columns: pill ends. rx is in plot units (exact); ry is in px and follows the plot's real width */
.ds-chart[data-charts] .ds-chart__rect[data-pill] { ry: calc(var(--_rr) * (100cqi - var(--_y-w, 0px) - var(--_pe, 0px)) / 600); }

/* ---- css/styles/zzz-contrast.css ---- */
/* High contrast (the contrast dial, docs/STYLES.md). Written once against [data-dial-contrast="high"]; tools/build.mjs emits it for
   data-dial-contrast="high" and again inside @media (prefers-contrast: more) for charts that leave the dial unset.
   Text is ink (7:1 or better on every theme's surface, test/contrast.test.ts), strokes are heavier, nothing is
   translucent, and series past the first differ by dash or hatch as well as colour. */
.ds-chart[data-charts][data-dial-contrast="high"] {
  --ds-ink-muted: var(--ds-ink); --ds-ink-faint: var(--ds-ink); --ds-ink-2: var(--ds-ink);
  --_i-muted: var(--_i-ink); --_i-faint: var(--_i-ink);
  --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 32%, var(--_bg));
  --_stroke: 3px; --_lw: 1.45;
}
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__layer > :not(.ds-chart__dot), .ds-chart__layer > * *, .ds-chart__legend, .ds-chart__x, .ds-chart__y, .ds-chart__delta, .ds-chart__delta *, .ds-chart__key-label *, .ds-chart__facet-title *) { color: var(--ds-ink); opacity: 1; text-shadow: none; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__delta { background: var(--_bg); box-shadow: inset 0 0 0 1.5px var(--ds-ink); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__gridline { stroke-width: 1.2px; stroke-dasharray: none; opacity: 1; }
/* context lines: solid, a firm grey at 3:1 or better, thinner than the series so they stay behind */
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[data-role="context"] { stroke: color-mix(in oklab, var(--ds-ink) 52%, var(--_bg)); stroke-width: 1.5px; stroke-opacity: 1; opacity: 1; }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__line, .ds-chart__ridge-line)[data-ghost] { stroke-opacity: 1; }
/* lines: pathLength="1", so dashes are shares of the path */
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="2"] { stroke-dasharray: .024 .01; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="3"] { stroke-dasharray: .004 .008; stroke-linecap: round; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="4"] { stroke-dasharray: .024 .008 .004 .008; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="5"] { stroke-dasharray: .05 .012; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="6"] { stroke-dasharray: .012 .012; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="7"] { stroke-dasharray: .036 .008 .004 .008 .004 .008; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__line[pathLength][data-series="8"] { stroke-dasharray: .004 .02; stroke-linecap: round; }
/* fills: opaque, edged in the ground so neighbours part, and hatched where the pane defines a hatch */
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__area:is([data-series], [data-token], [data-tone], [data-ramp]) { fill: color-mix(in srgb, var(--_c) var(--_area-alpha, 30%), var(--_bg)); fill-opacity: 1; opacity: 1; }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon, .ds-chart__tile) { stroke: var(--_bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; fill-opacity: 1; opacity: 1; filter: none; }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="2"] { fill: var(--_hc2, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="3"] { fill: var(--_hc3, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="4"] { fill: var(--_hc4, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="5"] { fill: var(--_hc5, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="6"] { fill: var(--_hc6, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="7"] { fill: var(--_hc7, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="8"] { fill: var(--_hc8, var(--_c)); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__hatch rect { fill: var(--_c); stroke: none; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__hatch path { fill: var(--_bg); stroke: var(--_bg); stroke-width: 1.6px; }
/* keys and dots: the same marks in HTML */
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch[data-shape="line"]:is([data-series="2"], [data-series="4"], [data-series="5"], [data-series="6"], [data-series="7"]) { background: repeating-linear-gradient(to right, var(--_c) 0 5px, transparent 5px 7px); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch[data-shape="line"]:is([data-series="3"], [data-series="8"]) { background: repeating-linear-gradient(to right, var(--_c) 0 2px, transparent 2px 4px); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch:not([data-shape="line"]):is([data-series="2"], [data-series="6"]) { background: repeating-linear-gradient(to right, var(--_c) 0 2px, var(--_bg) 2px 3px); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch:not([data-shape="line"]):is([data-series="3"], [data-series="7"]) { background: repeating-linear-gradient(to bottom, var(--_c) 0 2px, var(--_bg) 2px 3px); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch:not([data-shape="line"]):is([data-series="4"], [data-series="5"], [data-series="8"]) { background: repeating-linear-gradient(to right, transparent 0 2px, var(--_bg) 2px 3px), repeating-linear-gradient(to bottom, var(--_c) 0 2px, var(--_bg) 2px 3px); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__swatch { box-shadow: 0 0 0 1px var(--ds-ink); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__layer .ds-chart__dot { border: 2px solid var(--ds-ink); opacity: 1; }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__tooltip { border: 2px solid var(--ds-ink); background: var(--_bg); color: var(--ds-ink); }
.ds-chart[data-charts][data-dial-contrast="high"] .ds-chart__plot:focus-visible { outline: 3px solid var(--ds-ink); outline-offset: 3px; }
.ds-chart[data-charts][data-dial-contrast="high"] :is(.ds-chart__layer, .ds-chart__notes) .ds-chart__num.ds-chart__num { color: var(--_bg); background: var(--ds-ink); }
@media (prefers-contrast: more) {
  .ds-chart[data-charts]:not([data-dial-contrast]) {
    --ds-ink-muted: var(--ds-ink); --ds-ink-faint: var(--ds-ink); --ds-ink-2: var(--ds-ink);
    --_i-muted: var(--_i-ink); --_i-faint: var(--_i-ink);
    --ds-chart-grid: color-mix(in oklab, var(--ds-ink) 32%, var(--_bg));
    --_stroke: 3px; --_lw: 1.45;
  }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__layer > :not(.ds-chart__dot), .ds-chart__layer > * *, .ds-chart__legend, .ds-chart__x, .ds-chart__y, .ds-chart__delta, .ds-chart__delta *, .ds-chart__key-label *, .ds-chart__facet-title *) { color: var(--ds-ink); opacity: 1; text-shadow: none; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__delta { background: var(--_bg); box-shadow: inset 0 0 0 1.5px var(--ds-ink); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__gridline { stroke-width: 1.2px; stroke-dasharray: none; opacity: 1; }
  /* context lines: solid, a firm grey at 3:1 or better, thinner than the series so they stay behind */
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[data-role="context"] { stroke: color-mix(in oklab, var(--ds-ink) 52%, var(--_bg)); stroke-width: 1.5px; stroke-opacity: 1; opacity: 1; }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__line, .ds-chart__ridge-line)[data-ghost] { stroke-opacity: 1; }
  /* lines: pathLength="1", so dashes are shares of the path */
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="2"] { stroke-dasharray: .024 .01; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="3"] { stroke-dasharray: .004 .008; stroke-linecap: round; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="4"] { stroke-dasharray: .024 .008 .004 .008; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="5"] { stroke-dasharray: .05 .012; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="6"] { stroke-dasharray: .012 .012; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="7"] { stroke-dasharray: .036 .008 .004 .008 .004 .008; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__line[pathLength][data-series="8"] { stroke-dasharray: .004 .02; stroke-linecap: round; }
  /* fills: opaque, edged in the ground so neighbours part, and hatched where the pane defines a hatch */
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__area:is([data-series], [data-token], [data-tone], [data-ramp]) { fill: color-mix(in srgb, var(--_c) var(--_area-alpha, 30%), var(--_bg)); fill-opacity: 1; opacity: 1; }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon, .ds-chart__tile) { stroke: var(--_bg); stroke-width: 1.5px; vector-effect: non-scaling-stroke; fill-opacity: 1; opacity: 1; filter: none; }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="2"] { fill: var(--_hc2, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="3"] { fill: var(--_hc3, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="4"] { fill: var(--_hc4, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="5"] { fill: var(--_hc5, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="6"] { fill: var(--_hc6, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="7"] { fill: var(--_hc7, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__rect, .ds-chart__area, .ds-chart__ribbon)[data-series="8"] { fill: var(--_hc8, var(--_c)); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__hatch rect { fill: var(--_c); stroke: none; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__hatch path { fill: var(--_bg); stroke: var(--_bg); stroke-width: 1.6px; }
  /* keys and dots: the same marks in HTML */
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch[data-shape="line"]:is([data-series="2"], [data-series="4"], [data-series="5"], [data-series="6"], [data-series="7"]) { background: repeating-linear-gradient(to right, var(--_c) 0 5px, transparent 5px 7px); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch[data-shape="line"]:is([data-series="3"], [data-series="8"]) { background: repeating-linear-gradient(to right, var(--_c) 0 2px, transparent 2px 4px); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch:not([data-shape="line"]):is([data-series="2"], [data-series="6"]) { background: repeating-linear-gradient(to right, var(--_c) 0 2px, var(--_bg) 2px 3px); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch:not([data-shape="line"]):is([data-series="3"], [data-series="7"]) { background: repeating-linear-gradient(to bottom, var(--_c) 0 2px, var(--_bg) 2px 3px); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch:not([data-shape="line"]):is([data-series="4"], [data-series="5"], [data-series="8"]) { background: repeating-linear-gradient(to right, transparent 0 2px, var(--_bg) 2px 3px), repeating-linear-gradient(to bottom, var(--_c) 0 2px, var(--_bg) 2px 3px); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__swatch { box-shadow: 0 0 0 1px var(--ds-ink); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__layer .ds-chart__dot { border: 2px solid var(--ds-ink); opacity: 1; }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__tooltip { border: 2px solid var(--ds-ink); background: var(--_bg); color: var(--ds-ink); }
  .ds-chart[data-charts]:not([data-dial-contrast]) .ds-chart__plot:focus-visible { outline: 3px solid var(--ds-ink); outline-offset: 3px; }
  .ds-chart[data-charts]:not([data-dial-contrast]) :is(.ds-chart__layer, .ds-chart__notes) .ds-chart__num.ds-chart__num { color: var(--_bg); background: var(--ds-ink); }
}
/* @generated styles:end */

/* @generated showpiece-slots:start (tools/gen-themes.mjs; do not edit) */
/* Showpiece, and deep / soft grounds: every slot a real data colour (see showpieceOrder in tools/gen-themes.mjs). */
.ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="aiguideson-bench"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-7); }
:is([data-theme="aiguideson-syllabus"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="aiguideson-trail"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="aiguideson"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-4); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-6); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: color-mix(in oklab, var(--ds-data-2) 45%, white); --_series-8: color-mix(in oklab, var(--ds-data-3) 45%, white); }
:is([data-theme="aithatsounds-mixing-desk"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-6); --_series-8: color-mix(in oklab, var(--ds-data-3) 45%, white); }
:is([data-theme="aithatsounds-recital"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="aithatsounds-split-lab"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="ape"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="canyouuseai"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="deadwriting-courtroom"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-1); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="deadwriting-flatline"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-2); --_series-3: var(--ds-data-6); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-5); --_series-6: var(--ds-data-8); --_series-7: color-mix(in oklab, var(--ds-data-2) 45%, white); --_series-8: color-mix(in oklab, var(--ds-data-primary) 45%, white); }
:is([data-theme="deadwriting-obituary"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="deadwriting-specimen"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-1); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="forematter"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: color-mix(in oklab, var(--ds-data-3) 45%, white); }
:is([data-theme="isthereathing-departures"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="isthereathing-shelf"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: color-mix(in oklab, var(--ds-data-5) 45%, white); }
:is([data-theme="isthereathing-universe"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="iwantaito-blueprint"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="iwantaito-maker-zine"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="iwantaito-showroom"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
:is([data-theme="ledger"], [data-theme="jstov"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-1); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="lgt-bento"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="lgt"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-2); --_series-3: color-mix(in oklab, var(--ds-data-2) 60%, white); --_series-4: color-mix(in oklab, var(--ds-data-primary) 45%, white); --_series-5: var(--ds-data-primary, var(--ds-data-1)); --_series-6: var(--ds-data-2); --_series-7: var(--ds-showpiece-tint-1); --_series-8: var(--ds-showpiece-tint-2); }
:is([data-theme="noir"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="paper"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-4); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-6); --_series-7: var(--ds-data-5); --_series-8: color-mix(in oklab, var(--ds-data-3) 45%, white); }
:is([data-theme="pps-darkroom"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
:is([data-theme="pps-portfolio"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-4); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-6); --_series-5: var(--ds-data-7); --_series-6: var(--ds-data-5); --_series-7: color-mix(in oklab, var(--ds-data-7) 45%, white); --_series-8: color-mix(in oklab, var(--ds-data-2) 45%, white); }
:is([data-theme="pps-red-carpet"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-8); --_series-8: var(--ds-data-5); }
:is([data-theme="quicktunnels"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="reviewnudge"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="reviewsnot-blank"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="reviewsnot-manual"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="reviewsnot-triage"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="seeded"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="usingaias-board-pack"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-1); --_series-8: color-mix(in oklab, var(--ds-data-1) 45%, white); }
:is([data-theme="usingaias-control-room"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="usingaias-field-manual"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-primary, var(--ds-data-1)); --_series-2: var(--ds-data-4); --_series-3: var(--ds-data-3); --_series-4: var(--ds-data-2); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-7); --_series-7: var(--ds-data-5); --_series-8: var(--ds-data-8); }
:is([data-theme="workbench"]) .ds-chart[data-charts]:is([data-style="showpiece"][data-mode="dark"], [data-dial-ground="deep"], [data-dial-ground="soft"]):not([data-dial-accent]) { --_series-1: var(--ds-data-4); --_series-2: var(--ds-data-3); --_series-3: var(--ds-data-2); --_series-4: var(--ds-data-7); --_series-5: var(--ds-data-6); --_series-6: var(--ds-data-5); --_series-7: var(--ds-data-8); --_series-8: color-mix(in oklab, var(--ds-data-7) 45%, white); }
/* @generated showpiece-slots:end */