/* Chartsmade: the design-system layer the web markup sits on. design-system 077aa7e: tokens/base.css, components/_base.css, components/chart/chart.css.
   Generated by tools/gen-themes.mjs; do not edit. Load it first, then a theme (themeCss), then charts.css. */
/* ---- design-system tokens/base.css ---- */
/* ============================================================================
   JSTOV design system — tokens/base.css
   The neutral baseline. Implements the whole contract (tokens/CONTRACT.md) so
   that ANY module renders correctly with no theme file loaded.

   Load order (mandatory):  tokens/base.css → tokens/themes/<name>.css (optional)
                           → components/_base.css → components/<id>/<id>.css

   Layers in this file
     1. Skin tokens, light defaults          :root, [data-mode="light"]      (0,1,0)
     2. Structure knobs + constants           :root                            (0,1,0)
     3. Derived tokens (calc / var chains)    the RE-DERIVE HOSTS rule         (0,1,0)
     4. Dark remap                            :root[data-mode="dark"],
                                              :not(:root)[data-mode="dark"]   (0,2,0)
                                              + guarded prefers-color-scheme
     5. Policy attributes                     :root[data-x="v"],
                                              :not(:root)[data-x="v"]         (0,2,0)
        + band islands (data-band)            [data-band="v"][data-band]      (0,2,0)
     6. Reduced motion, grid-snapping (@supports round())

   Specificity ladder — why the selectors look the way they do
     • Theme LIGHT blocks are [data-theme="x"] (0,1,0) and load after this file,
       so they beat the defaults in 1–3 by source order.
     • Dark blocks (4) and policy attributes (5) are written at (0,2,0) so that
       (a) a theme's light block can never leak a colour into dark mode, and
       (b) an EXPLICIT attribute on the page beats a theme's CSS-only fallback
       for that policy (a theme's fallback is (0,1,0)).
     • Theme DARK blocks are [data-theme="x"][data-mode="dark"] (0,2,0) and load
       later, so they beat the neutral dark remap.
     • The guarded media form for a theme is :root[data-theme="x"]:not([data-mode="light"])
       (0,3,0) so it beats the neutral guarded form (0,2,0).

   Re-derive hosts
     Custom properties that contain var()/calc() are substituted on the element
     that DECLARES them, and descendants inherit the finished value. If a theme
     scoped to <section data-theme="paper"> sets --ds-space-unit:8px, a
     --ds-space-4 declared only on :root would still be 16px inside the section.
     So every derived token is declared on the HOST LIST — :root plus every
     element that can carry a theme/policy attribute, and every data-band
     island — and recomputes wherever a knob can change. Keep that list in sync
     with CONTRACT.md §3.

   Islands (batch 12, 2026-09-20)
     data-mode="dark|light" and data-band="tint|dark|accent" are section-level
     islands. Base defines all three bands theme-agnostically (§5 below); a
     theme's dark block also lists [data-theme="x"] [data-mode="dark"] and
     [data-theme="x"] [data-band="dark"] so an island inside a themed page gets
     THE THEME's dark, not this file's neutral one. The accent band reads the
     page's accent through the --ds-band-* snapshots (declared on every host
     except the accent band itself, because a custom property cannot reference
     its own redefinition on the same element). Put data-band on a <section>,
     never on the root and never on the same element as data-theme/data-mode —
     the root is where the snapshot is taken from.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. LIGHT SKIN DEFAULTS — everything that changes between light and dark
   (colours, shadows, glass, texture). [data-mode="light"] is in the list so a
   light island inside a dark page works without resetting structure.
   ------------------------------------------------------------------------- */
:root,
[data-mode="light"] {
  color-scheme: light;

  /* ---- Surfaces (§7.1) — pure-neutral ramp, surfaces lighter than ground --- */
  --ds-ground:            #fafafa;   /* page / chrome background                */
  --ds-ground-2:          #f4f4f4;   /* second chrome plane: sidebar, rail, canvas */
  --ds-surface:           #ffffff;   /* cards, inputs, popovers                 */
  --ds-surface-2:         #f3f3f3;   /* inset: nested fields, chips, wells      */
  --ds-surface-3:         #ececec;   /* deeper inset / disabled fill            */
  --ds-skeleton:          #e2e2e2;   /* loading placeholder fill — visible on ground AND surface (batch-1 finding) */
  --ds-surface-raised:    #ffffff;   /* overlay fill (popover, modal) — NEUTRAL even in themed planes */
  --ds-surface-hover:     #f0f0f0;   /* one tint step for hover                 */
  --ds-surface-pressed:   #ebebeb;   /* pressed fill — hover < pressed < selected in distance from surface (batch-12) */
  --ds-surface-selected:  #e6e6e6;   /* selected nav / row / tab (neutral)      */
  --ds-surface-inverse:   #111111;   /* dark chrome, inverse cards              */
  --ds-surface-inverse-hover: #262626; /* hover step for inverse fills (batch-2 finding) */
  --ds-surface-polarity:  1;         /* 1 = surface lighter than ground, -1 = darker (informational) */
  --ds-scrim:             rgba(0, 0, 0, .40);
  --ds-scrim-filter:      none;      /* none | blur(6px) | grayscale(.5)        */

  /* ---- Ink (§7.2) ---------------------------------------------------------- */
  --ds-ink:               #111111;   /* primary text                            */
  --ds-ink-2:             #3d3d3d;   /* secondary text, body inside cards, nav  */
  --ds-ink-muted:         #6b6b6b;   /* labels, placeholders, meta — READABLE, ≥ 4.5:1 on ground/surface/surface-2 */
  --ds-ink-faint:         #a3a3a3;   /* DECORATIVE only: disabled, indices, hints */
  --ds-ink-inverse:       #fafafa;   /* text on --ds-surface-inverse            */
  --ds-ink-on-primary:    #ffffff;   /* text on --ds-primary-fill               */
  --ds-ink-on-accent:     #ffffff;   /* text on --ds-accent fill                */
  /* --ds-ink-link and --ds-ink-code are derived (see hosts rule)               */

  /* ---- Lines (§7.3) — three hairline grades + control borders --------------- */
  --ds-rule-soft:         #ededed;   /* in-content / row dividers (1.17:1)      */
  --ds-rule-faint:        #f4f4f4;   /* table COLUMN rules, fainter than rows (batch-2 finding) */
  --ds-rule:              #e5e5e5;   /* structural hairline: dividers, card edges (≥ 1.15:1 — 1.26 here) */
  --ds-rule-strong:       #d4d4d4;   /* column / section rules, the control lip */
  --ds-border:            #d9d9d9;   /* control borders: inputs, buttons, chips */
  --ds-border-strong:     #bdbdbd;   /* darker fields when a brand wants them; hover border */
  /* --ds-ring, --ds-border-selected are derived                                */

  /* ---- Action & accent (§7.4) ---------------------------------------------- */
  --ds-primary-fill:        #111111; /* THE one filled button; ink-black here   */
  --ds-primary-fill-hover:  #2a2a2a;
  --ds-primary-border:      transparent;   /* optional 1px darker edge          */
  --ds-primary-highlight:   transparent;   /* optional 1px inner top highlight  */
  --ds-accent:              #2563eb; /* links, active state, badges, dots, CTA if hue */
  --ds-accent-hover:        #1d4fd8;
  --ds-accent-ink:          #1e40af; /* accent darkened for text on tint        */
  --ds-accent-tint:         #e9effd; /* accent at ~10% for chips / selected rows */
  --ds-accent-soft:         #93b4f5; /* ~45% — open triggers, soft borders      */
  --ds-accent-2:            #7c5ee4; /* second accent: selection | data | sub-brand | AI */
  --ds-accent-2-ink:        #5b3fc4;
  --ds-accent-2-tint:       #eee9fb;
  /* --ds-accent-line derived                                                   */

  /* ---- Semantic (§7.5) — fill / tint / ink triplets ------------------------- */
  --ds-success:       #15803d;  --ds-success-tint:  #e3f0e8;  --ds-success-ink:  #14703a;
  --ds-danger:        #dc2626;  --ds-danger-tint:   #fbe5e5;  --ds-danger-ink:   #b91c1c;
  --ds-warning:       #d97706;  --ds-warning-tint:  #faefe1;  --ds-warning-ink:  #9a4f00;
  --ds-info:          #0369a1;  --ds-info-tint:     #e1edf4;  --ds-info-ink:     #075985;
  /* same-hue hairlines for tinted callouts / validation outlines (batch-5 finding); themes may tune */
  --ds-success-line:  color-mix(in srgb, var(--ds-success) 35%, transparent);
  --ds-danger-line:   color-mix(in srgb, var(--ds-danger)  35%, transparent);
  --ds-warning-line:  color-mix(in srgb, var(--ds-warning) 35%, transparent);
  --ds-info-line:     color-mix(in srgb, var(--ds-info)    35%, transparent);
  --ds-ink-on-semantic: #ffffff;    /* text on a semantic FILL (warning fill needs ink — see CONTRACT) */
  --ds-ink-on-warning:  #1a1200;    /* text on a warning FILL — dark in BOTH modes (batch-2 finding) */
  /* --ds-live, --ds-presence, --ds-selection-graph derived                     */

  /* ---- Data (§7.6) — 8-hue categorical set, distinguishable in both modes ---
     Hue order: blue · violet · green · orange · pink · amber · teal · umber.
     Adjacent hues are ≥ 40° apart; every light mark is ≥ 3:1 on #ffffff AND on
     --ds-ground, so a 1 px chart line passes on either plane (amber was 2.98 /
     2.85 — darkened to #ad861b = 3.39 / 3.24, batch-12; its ink #7d6218 stays
     darker than the fill and 5.2:1 on the tint). Dark amber #e2c04e is 10:1
     on the dark surface — untouched. Amber is still a fill/badge hue: text
     uses its ink.                                                             */
  --ds-data-1: #2f6fed;  --ds-data-1-tint: #e2ebfc;  --ds-data-1-ink: #2455bd;
  --ds-data-2: #7c5ee4;  --ds-data-2-tint: #ede8fb;  --ds-data-2-ink: #6248b8;
  --ds-data-3: #0f9d6b;  --ds-data-3-tint: #ddf1ea;  --ds-data-3-ink: #0b7751;
  --ds-data-4: #da6c36;  --ds-data-4-tint: #fbebe4;  --ds-data-4-ink: #a6542c;   /* orange 2.87 → 3.06 on surface-2 (the tint band's ground), batch-12 */
  --ds-data-5: #d23f7a;  --ds-data-5-tint: #f9e4ec;  --ds-data-5-ink: #b53669;
  --ds-data-6: #ad861b;  --ds-data-6-tint: #f7f2e1;  --ds-data-6-ink: #7d6218;
  --ds-data-7: #0e9aa7;  --ds-data-7-tint: #ddf1f3;  --ds-data-7-ink: #0b757f;
  --ds-data-8: #8a6a4b;  --ds-data-8-tint: #efeae6;  --ds-data-8-ink: #7f6245;
  --ds-chart-ramp-1: #1e40af; --ds-chart-ramp-2: #2f6fed; --ds-chart-ramp-3: #93b4f5;  /* one hue, dark→light */
  /* --ds-chart-grid, --ds-chart-comparison derived                             */

  /* ---- Elevation (§7.7) — shadow recipes; card-* derived from data-depth ---- */
  --ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .05);                    /* pressable controls */
  --ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .08);                    /* inert unless data-depth="shadow" */
  --ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .12), 0 0 0 1px rgba(0, 0, 0, .04);   /* popover / toast */
  --ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .04);
  --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .12);                   /* physical objects: covers, task cards */
  /* --ds-shadow-lip derived                                                    */

  /* ---- Imagery & ornament (§7.12) ------------------------------------------ */
  --ds-overlay-fill:   rgba(0, 0, 0, .60);   /* chrome on images                 */
  --ds-ink-on-overlay: #ffffff;              /* ink on --ds-overlay-fill / over media — light in BOTH modes (batch-2 finding) */
  --ds-glass-fill:     rgba(255, 255, 255, .35);
  --ds-glass-border:   rgba(255, 255, 255, .55);
  --ds-texture-color:  rgba(0, 0, 0, .06);
  --ds-illustration-ground: #eef2f7;         /* shared tint behind illustrations */
  /* --ds-line-art, --ds-media-radius derived                                   */
}

/* ---------------------------------------------------------------------------
   2. STRUCTURE DEFAULTS — system-owned knobs and constants. Declared on :root
   ONLY (a light/dark island must not reset them). Themes SCALE these
   (--ds-radius-scale, --ds-density-scale, --ds-space-unit, --ds-text-base) or
   point lane families at their own stacks; they do not redefine the steps.
   ------------------------------------------------------------------------- */
:root {
  /* ---- Lines: widths ------------------------------------------------------- */
  --ds-border-width:      1px;
  --ds-ring-width:        2px;
  --ds-ring-offset:       2px;
  --ds-ring-outset:       0px;       /* 0 | 3px — highlight ring drawn outside the box (Jasper) */

  /* ---- Elevation: the control lip ------------------------------------------- */
  --ds-control-lip:   0px;                                             /* 0 | 1px — darker bottom edge on pressables */

  /* ---- Shape (§7.8) — steps derive from --ds-radius-scale ------------------ */
  --ds-radius-scale:  1;             /* 0 drafting · 1 tool · 2 soft (any number works) */
  --ds-radius-pill:   9999px;
  /* xs/sm/md/lg/xl + --ds-radius-button derived                                */

  /* ---- Typography (§7.9) --------------------------------------------------- */
  --ds-font-sans:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ds-font-serif:    ui-serif, Georgia, "Times New Roman", serif;
  --ds-font-mono:     ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  /* lane families — a theme points a lane at one of the families above:      */
  --ds-font-display:  var(--ds-font-sans);   /* display / hero lane              */
  --ds-font-label:    var(--ds-font-sans);   /* label / metadata lane            */
  --ds-font-body-alt: var(--ds-font-sans);   /* explanatory / "writing" lane     */
  --ds-font-sign:     var(--ds-font-display); /* signage lane: place names, wayfinding, posters (2026-10-11) */
  --ds-text-base:     14px;          /* 14 app · 16 forms/marketing/consumer      */
  /* scale ratios (flat by default; a theme may re-shape them)                  */
  --ds-scale-xs: .786;  --ds-scale-sm: .857;  --ds-scale-lg: 1.143;  --ds-scale-xl: 1.429;
  --ds-scale-2xl: 1.714; --ds-scale-3xl: 2.286; --ds-scale-display: 3.429;
  --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700;
  --ds-display-weight: 600;          /* 400–500 editorial · 600–800 punch          */
  --ds-heading-weight: 600;
  --ds-display-tracking: -0.02em;
  --ds-heading-tracking: -0.01em;
  --ds-label-tracking: 0;            /* sentence-case tracking (set by data-labels) */
  --ds-label-tracking-upper: .08em;  /* the tracking uppercase labels take; a theme sets ITS value here and
                                        data-labels="upper" reads it (batch-12: the attribute no longer pins .08em) */
  --ds-label-case:     none;         /* none | uppercase  (set by data-labels)   */
  --ds-control-case:   none;         /* none | capitalize (set by data-controls) */
  --ds-lh-tight: 1.05; --ds-lh-heading: 1.2; --ds-lh-body: 1.45; --ds-lh-prose: 1.6; --ds-lh-list: 1.25;
  --ds-numeric:        tabular-nums; /* font-variant-numeric for numbers          */
  --ds-measure:        65ch;         /* reading measure for prose                  */

  /* ---- Space & density (§7.10) -------------------------------------------- */
  --ds-space-unit:     4px;          /* 4 apps · 8 marketing                     */
  --ds-density-scale:  1;            /* .85 compact · 1 default · 1.2 comfortable */
  --ds-control-h-base: 36px;         /* system-owned; themes scale via density   */
  --ds-field-gap:      8px;          /* label → control                          */
  --ds-gutter-page:    clamp(16px, 4vw, 72px);
  --ds-container-max:  1152px;
  --ds-container-narrow: 640px;
  --ds-container-prose:  720px;
  --ds-container-content: 1088px;    /* app content column (.ds-content, C-03) — theme-tunable (batch-12) */
  --ds-section-gap-units: 12;        /* marketing region gap in space units (C-01 house = 12–16) */
  --ds-rail-inset:     24px;         /* C-03 drawn rails: inset from the page edge, NOT a space step (48 px at unit 8 was wrong) — theme-tunable (batch-12) */
  --ds-rail-w:         64px;         /* labelled icon rail                        */
  --ds-sidebar-w:      256px;
  --ds-inspector-w:    320px;
  --ds-topbar-h:       56px;
  --ds-sheet-inset:    12px;         /* inset sheet gap from the chrome edge (house shell) */
  --ds-icon-size:      16px;         /* inline                                   */
  --ds-icon-size-row:  20px;         /* list / nav rows                          */
  --ds-icon-size-rail: 24px;         /* rails                                    */
  --ds-icon-stroke:    1.5px;
  --ds-tap-target-min: 40px;

  /* ---- Motion (§7.11) ------------------------------------------------------ */
  --ds-motion-scale:   1;            /* 0 under prefers-reduced-motion           */
  --ds-ease-standard:  cubic-bezier(.2, 0, 0, 1);
  --ds-ease-out:       cubic-bezier(0, 0, .2, 1);
  --ds-ease-in:        cubic-bezier(.4, 0, 1, 1);
  --ds-ambient-play:   running;      /* animation-play-state for marketing blobs / marquee / parallax:
                                        running | paused — paused under data-ambient="off" and reduced motion.
                                        Consume as `animation-play-state: var(--ds-ambient-play)` (batch-12) */
  --ds-ambient-motion: 1;            /* DEPRECATED alias of --ds-ambient-play (1 | 0) — nothing should read it; kept so
                                        old references resolve until they are re-pointed */
  /* --ds-dur-* derived                                                         */

  /* ---- Imagery: geometry --------------------------------------------------- */
  --ds-glass-blur:     12px;
  --ds-media-aspect:   16 / 9;
  --ds-mock-fade:      96px;                 /* fade-mask length on product frames */

  /* ---- Z-index ladder ------------------------------------------------------
     Transient layers sit ABOVE the scrim + modal pair (DESK-326, CONTRACT §15): a popover or dropdown
     opened over a scrimmed page, or portalled out of a modal, must be on top. Page-level popovers are
     light-dismissed when a modal opens, so a page popover never ends up over a modal.            */
  --ds-z-sticky:   100;
  --ds-z-scrim:    200;
  --ds-z-modal:    210;
  --ds-z-dropdown: 300;
  --ds-z-popover:  310;
  --ds-z-toast:    500;
  --ds-z-tooltip:  600;
}

/* ---------------------------------------------------------------------------
   3. DERIVED TOKENS — declared on every RE-DERIVE HOST (see header).
   A theme sets the knobs (unit, scales, seed, families); these follow.
   [data-band] is a host too (batch-12), so a band block sets planes and
   accent roles only — card-*, selected-*, hover-*, link / ring / lines
   re-derive from them on the band element itself.
   ------------------------------------------------------------------------- */
:root,
[data-theme], [data-mode], [data-density], [data-depth], [data-selection],
[data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
[data-band] {
  /* ink chains */
  --ds-ink-link:          var(--ds-accent);
  --ds-ink-code:          var(--ds-ink-2);
  --ds-ring:              var(--ds-accent);
  --ds-border-selected:   var(--ds-accent);
  --ds-accent-line:       var(--ds-accent);
  --ds-live:              var(--ds-danger);
  --ds-presence:          var(--ds-success);
  --ds-selection-graph:   var(--ds-accent);
  --ds-data-primary:      var(--ds-data-1);   /* a chart's default / single series; themes whose data-1 IS the accent re-point it (CONTRACT §15.2) */
  --ds-chart-grid:        var(--ds-rule-soft);
  --ds-chart-comparison:  var(--ds-ink-faint);
  --ds-line-art:          var(--ds-rule-strong);

  /* elevation: card-* follow data-depth (defaults = tint-hairline) */
  --ds-card-bg:           var(--ds-surface);
  --ds-card-border:       var(--ds-rule);
  --ds-card-shadow:       0 0 0 0 transparent;   /* composable 'none' — `none` would invalidate a comma-joined box-shadow */
  --ds-shadow-lip:        inset 0 calc(-1 * var(--ds-control-lip)) 0 0 var(--ds-border-strong);
  --ds-hover-bg:          var(--ds-surface-hover);   /* data-hover="tint" */
  --ds-hover-shadow:      0 0 0 0 transparent;

  /* selection primitives (defaults = data-selection="tint") */
  --ds-selected-bg:       var(--ds-surface-selected);
  --ds-selected-ink:      var(--ds-ink);
  --ds-selected-line:     transparent;
  --ds-selected-weight:   var(--ds-weight-medium);

  /* shape */
  --ds-radius-xs:   calc(4px  * var(--ds-radius-scale));
  --ds-radius-sm:   calc(6px  * var(--ds-radius-scale));
  --ds-radius-md:   calc(8px  * var(--ds-radius-scale));
  --ds-radius-lg:   calc(12px * var(--ds-radius-scale));
  --ds-radius-xl:   calc(20px * var(--ds-radius-scale));
  --ds-radius-button: var(--ds-radius-sm);          /* data-buttons="pill" → pill */
  --ds-media-radius:  var(--ds-radius-lg);

  /* type scale */
  --ds-text-xs:      calc(var(--ds-text-base) * var(--ds-scale-xs));
  --ds-text-sm:      calc(var(--ds-text-base) * var(--ds-scale-sm));
  --ds-text-md:      var(--ds-text-base);
  --ds-text-lg:      calc(var(--ds-text-base) * var(--ds-scale-lg));
  --ds-text-xl:      calc(var(--ds-text-base) * var(--ds-scale-xl));
  --ds-text-2xl:     calc(var(--ds-text-base) * var(--ds-scale-2xl));
  --ds-text-3xl:     calc(var(--ds-text-base) * var(--ds-scale-3xl));
  --ds-text-display: calc(var(--ds-text-base) * var(--ds-scale-display));
  /* the house hero formula — one fluid display size instead of a clamp() per recipe (batch-12):
     never below 3xl, grows with the viewport, never past 1.4 × display */
  --ds-text-display-fluid: clamp(var(--ds-text-3xl), calc(var(--ds-text-xl) + 3vw), calc(var(--ds-text-display) * 1.4));
  /* title sizes by ROLE — components read these, never pick a step themselves (batch-12).
     Values = the built house: page-header 2xl · section-header (in-page shelf title) lg ·
     card md · chapter-header (marketing) 3xl. A theme may move a role one step. */
  --ds-text-title-page:    var(--ds-text-2xl);
  --ds-text-title-section: var(--ds-text-lg);
  --ds-text-title-card:    var(--ds-text-md);
  --ds-text-title-chapter: var(--ds-text-3xl);

  /* space steps (unit × n) — unit-based, NOT density-scaled */
  --ds-space-0-5: calc(var(--ds-space-unit) * .5);
  --ds-space-1:  calc(var(--ds-space-unit) * 1);
  --ds-space-1-5: calc(var(--ds-space-unit) * 1.5);   /* 6px half-step: kbd chips, 42px rows (batch-1 finding) */
  --ds-space-2:  calc(var(--ds-space-unit) * 2);
  --ds-space-2-5: calc(var(--ds-space-unit) * 2.5);   /* 10px: favicon rows, board wells (batch-2 finding) */
  --ds-space-3:  calc(var(--ds-space-unit) * 3);
  --ds-space-4:  calc(var(--ds-space-unit) * 4);
  --ds-space-5:  calc(var(--ds-space-unit) * 5);
  --ds-space-6:  calc(var(--ds-space-unit) * 6);
  --ds-space-7:  calc(var(--ds-space-unit) * 7);      /* 28px: 72px card rows, board gutters (batch-2 finding) */
  --ds-space-8:  calc(var(--ds-space-unit) * 8);
  --ds-space-10: calc(var(--ds-space-unit) * 10);
  --ds-space-12: calc(var(--ds-space-unit) * 12);
  --ds-space-16: calc(var(--ds-space-unit) * 16);
  --ds-space-20: calc(var(--ds-space-unit) * 20);
  --ds-space-24: calc(var(--ds-space-unit) * 24);
  --ds-section-gap: calc(var(--ds-space-unit) * var(--ds-section-gap-units));

  /* density-scaled sizes — snapped to the 4px grid by the @supports block below */
  --ds-control-h:    calc(var(--ds-control-h-base) * var(--ds-density-scale));
  --ds-control-h-sm: calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale));
  --ds-control-h-lg: calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale));
  --ds-row-h:        calc(var(--ds-control-h) + 4px);
  --ds-card-pad:     calc(16px * var(--ds-density-scale));
  --ds-card-gap:     calc(16px * var(--ds-density-scale));
  --ds-field-pitch:  calc(16px * var(--ds-density-scale));   /* control → next label */
  --ds-control-pad-x: calc(12px * var(--ds-density-scale));

  /* current-element size hooks (components/_base.css remaps them under data-size) */
  --ds-size-h:      var(--ds-control-h);
  --ds-size-text:   var(--ds-text-md);
  --ds-size-pad-x:  var(--ds-control-pad-x);

  /* motion */
  --ds-dur-fast: calc(120ms * var(--ds-motion-scale));
  --ds-dur-base: calc(180ms * var(--ds-motion-scale));
  --ds-dur-slow: calc(280ms * var(--ds-motion-scale));
}

/* Band snapshots — the page's accent pair as seen from OUTSIDE an accent band (batch-12).
   [data-band="accent"] redefines --ds-accent to the ink; a custom property cannot reference
   the value it is replacing on the same element (inherit() is not shipped), so the band reads
   these instead. Declared on every host EXCEPT the accent band, so the band inherits them from
   its nearest host ancestor — the page root, a themed wrapper, a dark island.
   --ds-band-ink-away is the ink's sRGB inverse: the direction a plane steps to GAIN contrast.
   Plumbing — components never read --ds-band-*. */
:is(:root, [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
    [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
    [data-band]):not([data-band="accent"]) {
  --ds-band-accent:   var(--ds-accent);
  --ds-band-ink:      var(--ds-ink-on-accent);
  --ds-band-ink-away: rgb(from var(--ds-ink-on-accent) calc(255 - r) calc(255 - g) calc(255 - b));
}

/* Snap density-scaled sizes to the 4px grid where round() exists
   (Chromium 125+, Firefox 118+, Safari 15.4+). Fallback above is unsnapped. */
@supports (width: round(1px, 1px)) {
  :root,
  [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
  [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
  [data-band] {
    --ds-control-h:    round(calc(var(--ds-control-h-base) * var(--ds-density-scale)), 4px);
    --ds-control-h-sm: round(calc((var(--ds-control-h-base) - 4px) * var(--ds-density-scale)), 4px);
    --ds-control-h-lg: round(calc((var(--ds-control-h-base) + 8px) * var(--ds-density-scale)), 4px);
    --ds-card-pad:     round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-card-gap:     round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-field-pitch:  round(calc(16px * var(--ds-density-scale)), 4px);
    --ds-control-pad-x: round(calc(12px * var(--ds-density-scale)), 2px);
  }
}

/* ---------------------------------------------------------------------------
   4. DARK REMAP — §7.1–7.3 + primary + accent + semantic + data + shadows.
   Neutral ramp inversion with P5's in-hue surface step (surfaces step UP from
   ground). Explicit data-mode wins; the guarded media form applies only when no
   data-mode is set on :root.
   ------------------------------------------------------------------------- */
:root[data-mode="dark"],
:not(:root)[data-mode="dark"],
:not(:root)[data-band="dark"] {      /* data-band="dark" IS the dark island (batch-12) — one source of truth, no alias copies */
  color-scheme: dark;
  --ds-ground:            #0f0f10;
  --ds-ground-2:          #141416;
  --ds-surface:           #18181a;
  --ds-surface-2:         #1f1f22;
  --ds-surface-3:         #26262a;
  --ds-skeleton:          #2e2e33;
  --ds-surface-raised:    #1f1f22;   /* popovers step up, not down, in dark      */
  --ds-surface-hover:     #222226;
  --ds-surface-pressed:   #26262a;
  --ds-surface-selected:  #2a2a2e;
  --ds-surface-inverse:   #fafafa;
  --ds-surface-inverse-hover: #e6e6e8;
  --ds-scrim:             rgba(0, 0, 0, .60);

  --ds-ink:               #f4f4f5;
  --ds-ink-2:             #c9c9cc;
  --ds-ink-muted:         #9d9da3;   /* 6.6:1 on surface                         */
  --ds-ink-faint:         #5e5e64;
  --ds-ink-inverse:       #111111;
  --ds-ink-on-primary:    #111111;
  --ds-ink-on-accent:     #0b0b0c;

  --ds-rule-soft:         #222226;
  --ds-rule-faint:        #1c1c1f;
  --ds-rule:              #2a2a2e;   /* 1.24:1 on surface                        */
  --ds-rule-strong:       #38383d;
  --ds-border:            #303035;
  --ds-border-strong:     #45454b;

  --ds-primary-fill:        #f4f4f5;
  --ds-primary-fill-hover:  #e2e2e4;
  --ds-accent:              #6b9cff;
  --ds-accent-hover:        #86adff;
  --ds-accent-ink:          #b9ccff;
  --ds-accent-tint:         #273043;
  --ds-accent-soft:         #3b5fb8;
  --ds-accent-2:            #a48cf5;
  --ds-accent-2-ink:        #c7b8fa;
  --ds-accent-2-tint:       #342f46;

  --ds-success: #34c57f;  --ds-success-tint: #1e3b2e;  --ds-success-ink: #5fd79b;
  --ds-danger:  #f26a6a;  --ds-danger-tint:  #44282a;  --ds-danger-ink:  #f58d8d;
  --ds-warning: #f2b04a;  --ds-warning-tint: #443624;  --ds-warning-ink: #f6c473;
  --ds-info:    #4fb3f0;  --ds-info-tint:    #233745;  --ds-info-ink:    #7ec8f5;
  --ds-ink-on-semantic: #0b0b0c;

  --ds-data-1: #6b9cff;  --ds-data-1-tint: #293248;  --ds-data-1-ink: #9dbcff;
  --ds-data-2: #a48cf5;  --ds-data-2-tint: #342f46;  --ds-data-2-ink: #c1b1f8;
  --ds-data-3: #3ecf95;  --ds-data-3-tint: #203d33;  --ds-data-3-ink: #6fdcb2;
  --ds-data-4: #f5915b;  --ds-data-4-tint: #443027;  --ds-data-4-ink: #f8ac84;
  --ds-data-5: #f06fa4;  --ds-data-5-tint: #432936;  --ds-data-5-ink: #f596bd;
  --ds-data-6: #e2c04e;  --ds-data-6-tint: #403a24;  --ds-data-6-ink: #ebd07e;
  --ds-data-7: #3fc7d4;  --ds-data-7-tint: #203b3f;  --ds-data-7-ink: #7cdae3;
  --ds-data-8: #c3a184;  --ds-data-8-tint: #3a332f;  --ds-data-8-ink: #d6bda8;
  --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;

  --ds-shadow-lift:   0 1px 2px rgba(0, 0, 0, .40);
  --ds-shadow-card:   0 1px 3px rgba(0, 0, 0, .50);
  --ds-shadow-float:  0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-modal:  0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
  --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);

  --ds-overlay-fill:   rgba(0, 0, 0, .65);
  --ds-glass-fill:     rgba(24, 24, 26, .55);
  --ds-glass-border:   rgba(255, 255, 255, .14);
  --ds-texture-color:  rgba(255, 255, 255, .06);
  --ds-illustration-ground: #1c2129;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --ds-ground: #0f0f10; --ds-ground-2: #141416; --ds-surface: #18181a; --ds-surface-2: #1f1f22;
    --ds-surface-3: #26262a; --ds-skeleton: #2e2e33; --ds-surface-raised: #1f1f22; --ds-surface-hover: #222226;
    --ds-surface-pressed: #26262a; --ds-surface-selected: #2a2a2e; --ds-surface-inverse: #fafafa; --ds-surface-inverse-hover: #e6e6e8; --ds-scrim: rgba(0, 0, 0, .60);
    --ds-ink: #f4f4f5; --ds-ink-2: #c9c9cc; --ds-ink-muted: #9d9da3; --ds-ink-faint: #5e5e64;
    --ds-ink-inverse: #111111; --ds-ink-on-primary: #111111; --ds-ink-on-accent: #0b0b0c;
    --ds-rule-soft: #222226; --ds-rule-faint: #1c1c1f; --ds-rule: #2a2a2e; --ds-rule-strong: #38383d; --ds-border: #303035; --ds-border-strong: #45454b;
    --ds-primary-fill: #f4f4f5; --ds-primary-fill-hover: #e2e2e4;
    --ds-accent: #6b9cff; --ds-accent-hover: #86adff; --ds-accent-ink: #b9ccff; --ds-accent-tint: #273043; --ds-accent-soft: #3b5fb8;
    --ds-accent-2: #a48cf5; --ds-accent-2-ink: #c7b8fa; --ds-accent-2-tint: #342f46;
    --ds-success: #34c57f; --ds-success-tint: #1e3b2e; --ds-success-ink: #5fd79b;
    --ds-danger: #f26a6a; --ds-danger-tint: #44282a; --ds-danger-ink: #f58d8d;
    --ds-warning: #f2b04a; --ds-warning-tint: #443624; --ds-warning-ink: #f6c473;
    --ds-info: #4fb3f0; --ds-info-tint: #233745; --ds-info-ink: #7ec8f5; --ds-ink-on-semantic: #0b0b0c;
    --ds-data-1: #6b9cff; --ds-data-1-tint: #293248; --ds-data-1-ink: #9dbcff;
    --ds-data-2: #a48cf5; --ds-data-2-tint: #342f46; --ds-data-2-ink: #c1b1f8;
    --ds-data-3: #3ecf95; --ds-data-3-tint: #203d33; --ds-data-3-ink: #6fdcb2;
    --ds-data-4: #f5915b; --ds-data-4-tint: #443027; --ds-data-4-ink: #f8ac84;
    --ds-data-5: #f06fa4; --ds-data-5-tint: #432936; --ds-data-5-ink: #f596bd;
    --ds-data-6: #e2c04e; --ds-data-6-tint: #403a24; --ds-data-6-ink: #ebd07e;
    --ds-data-7: #3fc7d4; --ds-data-7-tint: #203b3f; --ds-data-7-ink: #7cdae3;
    --ds-data-8: #c3a184; --ds-data-8-tint: #3a332f; --ds-data-8-ink: #d6bda8;
    --ds-chart-ramp-1: #b9ccff; --ds-chart-ramp-2: #6b9cff; --ds-chart-ramp-3: #3b5fb8;
    --ds-shadow-lift: 0 1px 2px rgba(0, 0, 0, .40); --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50);
    --ds-shadow-float: 0 8px 24px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    --ds-shadow-modal: 0 24px 80px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06);
    --ds-shadow-object: 0 4px 12px rgba(0, 0, 0, .50);
    --ds-overlay-fill: rgba(0, 0, 0, .65); --ds-glass-fill: rgba(24, 24, 26, .55); --ds-glass-border: rgba(255, 255, 255, .14);
    --ds-texture-color: rgba(255, 255, 255, .06); --ds-illustration-ground: #1c2129;
  }
}

/* ---------------------------------------------------------------------------
   5. POLICY ATTRIBUTES — root (or any ancestor) data-* switches.
   Each sets the derived tokens components consume; components ALSO select on
   the attribute where geometry changes (tabs underline vs pill, etc.).
   Written at (0,2,0) so an explicit attribute beats a theme's CSS-only fallback.
   ------------------------------------------------------------------------- */

/* data-density — compact | default | comfortable  (D1 / D2 / D3) */
:root[data-density="compact"],     :not(:root)[data-density="compact"]     { --ds-density-scale: .85; }
:root[data-density="default"],     :not(:root)[data-density="default"]     { --ds-density-scale: 1; }
:root[data-density="comfortable"], :not(:root)[data-density="comfortable"] { --ds-density-scale: 1.2; }

/* data-depth — tint | hairline | shadow | tint-hairline | shadow-hairline  (§3.2.1; shadow-hairline = quicktunnels, batch-12) */
:root[data-depth="tint"],            :not(:root)[data-depth="tint"]            { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="hairline"],        :not(:root)[data-depth="hairline"]        { --ds-card-bg: var(--ds-ground);  --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow"],          :not(:root)[data-depth="shadow"]          { --ds-card-bg: var(--ds-surface); --ds-card-border: transparent;   --ds-card-shadow: var(--ds-shadow-card); }
:root[data-depth="tint-hairline"],   :not(:root)[data-depth="tint-hairline"]   { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; }
:root[data-depth="shadow-hairline"], :not(:root)[data-depth="shadow-hairline"] { --ds-card-bg: var(--ds-surface); --ds-card-border: var(--ds-rule); --ds-card-shadow: var(--ds-shadow-card); }

/* data-selection — tint | accent | accent-fill | underline | bar | invert  (§2.2.6; accent-fill = a brand theme's solid chip, batch-12) */
:root[data-selection="tint"],        :not(:root)[data-selection="tint"]        { --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink);           --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent"],      :not(:root)[data-selection="accent"]      { --ds-selected-bg: var(--ds-accent-tint);      --ds-selected-ink: var(--ds-accent-ink);    --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="accent-fill"], :not(:root)[data-selection="accent-fill"] { --ds-selected-bg: var(--ds-accent);           --ds-selected-ink: var(--ds-ink-on-accent); --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="underline"],   :not(:root)[data-selection="underline"]   { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="bar"],         :not(:root)[data-selection="bar"]         { --ds-selected-bg: transparent;                --ds-selected-ink: var(--ds-ink);           --ds-selected-line: var(--ds-accent-line); --ds-selected-weight: var(--ds-weight-medium); }
:root[data-selection="invert"],      :not(:root)[data-selection="invert"]      { --ds-selected-bg: var(--ds-surface-inverse);  --ds-selected-ink: var(--ds-ink-inverse);   --ds-selected-line: transparent;           --ds-selected-weight: var(--ds-weight-medium); }

/* data-buttons — sm | pill  (§7.8 radius-button) */
:root[data-buttons="sm"],   :not(:root)[data-buttons="sm"]   { --ds-radius-button: var(--ds-radius-sm); }
:root[data-buttons="pill"], :not(:root)[data-buttons="pill"] { --ds-radius-button: var(--ds-radius-pill); }

/* data-labels — sentence | upper  (§7.9 label-case; upper implies tracking — the THEME's own value
   via --ds-label-tracking-upper, .08em in base; batch-12: the attribute no longer pins .08em over paper's .1em) */
:root[data-labels="sentence"], :not(:root)[data-labels="sentence"] { --ds-label-case: none;      --ds-label-tracking: 0; }
:root[data-labels="upper"],    :not(:root)[data-labels="upper"]    { --ds-label-case: uppercase; --ds-label-tracking: var(--ds-label-tracking-upper); }

/* data-controls — sentence | title  (§7.9 control-case) */
:root[data-controls="sentence"], :not(:root)[data-controls="sentence"] { --ds-control-case: none; }
:root[data-controls="title"],    :not(:root)[data-controls="title"]    { --ds-control-case: capitalize; }

/* data-accent-scope — state | action | all | none  (§7.4 policy).
   Only "none" changes CSS: links, rings and selection lines fall back to ink.
   state/action/all are enforced by review + the "one filled button" rule. With
   no attribute this file BEHAVES as "state": the primary above is ink-black and
   the accent is information only (links, rings, dots). A theme whose filled
   button is the hue declares "action" (workbench) or "all" (seeded,
   quicktunnels) in its header and sets --ds-primary-fill to the accent. */
:root[data-accent-scope="none"], :not(:root)[data-accent-scope="none"] {
  --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-accent-line: var(--ds-ink);
  --ds-border-selected: var(--ds-ink); --ds-selection-graph: var(--ds-ink);
}

/* data-hover — tint | lift  (§7.11 hover-mode) */
:root[data-hover="tint"], :not(:root)[data-hover="tint"] { --ds-hover-bg: var(--ds-surface-hover); --ds-hover-shadow: 0 0 0 0 transparent; }
:root[data-hover="lift"], :not(:root)[data-hover="lift"] { --ds-hover-bg: var(--ds-surface);       --ds-hover-shadow: var(--ds-shadow-lift); }

/* data-ambient — off  (§7.11 ambient motion: marquee, blobs, parallax). One value: the page (or a
   region) parks its ambient animations. Reduced motion (§6) parks them too. The deprecated
   --ds-ambient-motion follows for anything that still reads it. (batch-12) */
:root[data-ambient="off"], :not(:root)[data-ambient="off"] { --ds-ambient-play: paused; --ds-ambient-motion: 0; }

/* ---- data-band — tint | dark | accent  (§7.1 islands; batch-12) --------------------------
   Section-level islands, defined here for EVERY theme; a theme may hand-tune its own at the
   same (0,2,0) — it loads later and wins (quicktunnels' accent band). Written as
   [data-band="v"][data-band] rather than :root[…], :not(:root)[…] on purpose: same (0,2,0),
   but a band never sits on the root (the root is where the accent band's snapshot is read
   from), so the :root form would be a lie. A band is a re-derive host (§3), so only planes and
   accent roles are set here; card-*, selected-*, hover-*, link / ring / lines follow. A theme's
   CSS-only fallbacks reach inside a band through the theme's own host rule (see any theme file,
   "restated for every host ISLAND").
   Put data-band on a <section> of its own — never on the root, never beside data-theme /
   data-mode on one element (a theme's island selector at the same specificity would win).
   data-band="dark" is NOT here: it is a selector on the dark remap (§4) and on every theme's
   dark block — one source of truth. */

/* tint — one plane step: the section sits on surface-2, its second plane on surface-3; cards
   (surface) and everything else keep the page's values. Available under any theme. */
[data-band="tint"][data-band] {
  --ds-ground:   var(--ds-surface-2);
  --ds-ground-2: var(--ds-surface-3);
  --ds-rule:     var(--ds-rule-strong);   /* one grade up: the structural hairline is 1.14:1 on surface-2 (R2 wants 1.15); card edges re-derive from it */
}

/* accent — the accent IS the ground. Generic recipe over the --ds-band-* snapshots (§3): holds
   for any hue and either ink polarity (white ink on a blue, dark ink on an orange / terracotta /
   white). Every plane steps AWAY from the ink (contrast can only rise — the theme's own
   ink-on-accent : accent pair, ≈ 5:1 on most brands, is the whole budget), so cards read as a
   deeper plane on a dark accent and a lighter one on a light accent; insets step further.
   Ink tiers collapse toward the ink (96 / 94 / 60 %) for the same reason — on a band, hierarchy
   is weight and size. Rules are the ink at 12 / 18 / 26 % over the accent. The ONE filled
   control inverts (ink fill, accent text); every accent role becomes the ink; semantic tints
   become a deeper accent step and semantic inks the ink, so a callout still reads; shadows
   soften to the ink at low alpha. Overlays (surface-raised, scrim) stay the page's — R6. */
[data-band="accent"][data-band] {
  /* planes */
  --ds-ground:                var(--ds-band-accent);
  --ds-ground-2:              color-mix(in srgb, var(--ds-band-accent) 96%, var(--ds-band-ink-away));
  --ds-surface:               color-mix(in srgb, var(--ds-band-accent) 90%, var(--ds-band-ink-away));
  --ds-surface-2:             color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));
  --ds-surface-3:             color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
  --ds-surface-hover:         color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
  --ds-surface-pressed:       color-mix(in srgb, var(--ds-band-accent) 82%, var(--ds-band-ink-away));
  --ds-surface-selected:      color-mix(in srgb, var(--ds-band-accent) 76%, var(--ds-band-ink-away));
  --ds-skeleton:              color-mix(in srgb, var(--ds-band-accent) 86%, var(--ds-band-ink-away));
  --ds-surface-inverse:       var(--ds-band-ink);
  --ds-surface-inverse-hover: color-mix(in srgb, var(--ds-band-ink) 90%, var(--ds-band-accent));
  /* ink */
  --ds-ink:                   var(--ds-band-ink);
  --ds-ink-2:                 color-mix(in srgb, var(--ds-band-ink) 96%, var(--ds-band-accent));
  --ds-ink-muted:             color-mix(in srgb, var(--ds-band-ink) 94%, var(--ds-band-accent));
  --ds-ink-faint:             color-mix(in srgb, var(--ds-band-ink) 60%, var(--ds-band-accent));
  --ds-ink-inverse:           var(--ds-band-accent);
  --ds-ink-on-primary:        var(--ds-band-accent);
  --ds-ink-on-accent:         var(--ds-band-accent);
  /* lines: the ink over the accent at 8 / 12 / 18 / 26 %; borders 22 / 34 % */
  --ds-rule-faint:            color-mix(in srgb, var(--ds-band-ink)  8%, var(--ds-band-accent));
  --ds-rule-soft:             color-mix(in srgb, var(--ds-band-ink) 12%, var(--ds-band-accent));
  --ds-rule:                  color-mix(in srgb, var(--ds-band-ink) 18%, var(--ds-band-accent));
  --ds-rule-strong:           color-mix(in srgb, var(--ds-band-ink) 26%, var(--ds-band-accent));
  --ds-border:                color-mix(in srgb, var(--ds-band-ink) 22%, var(--ds-band-accent));
  --ds-border-strong:         color-mix(in srgb, var(--ds-band-ink) 34%, var(--ds-band-accent));
  /* action: the one filled control inverts; every accent role is the ink */
  --ds-primary-fill:          var(--ds-band-ink);
  --ds-primary-fill-hover:    color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
  --ds-primary-border:        transparent;
  --ds-primary-highlight:     transparent;
  --ds-accent:                var(--ds-band-ink);
  --ds-accent-hover:          color-mix(in srgb, var(--ds-band-ink) 88%, var(--ds-band-accent));
  --ds-accent-ink:            var(--ds-band-ink);
  --ds-accent-tint:           color-mix(in srgb, var(--ds-band-accent) 84%, var(--ds-band-ink-away));   /* chips: a deeper accent step, ink text */
  --ds-accent-soft:           color-mix(in srgb, var(--ds-band-ink) 45%, var(--ds-band-accent));
  --ds-ink-link:              var(--ds-band-ink);
  --ds-ring:                  var(--ds-band-ink);
  --ds-border-selected:       var(--ds-band-ink);
  --ds-accent-line:           var(--ds-band-ink);
  --ds-selection-graph:       var(--ds-band-ink);
  /* semantic on the band: tint = a deeper accent step, ink = the ink, line = the ink at 35 % (fills keep their hue for dots / badges) */
  --ds-success-tint:          var(--ds-accent-tint);  --ds-success-ink: var(--ds-band-ink);  --ds-success-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-danger-tint:           var(--ds-accent-tint);  --ds-danger-ink:  var(--ds-band-ink);  --ds-danger-line:  color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-warning-tint:          var(--ds-accent-tint);  --ds-warning-ink: var(--ds-band-ink);  --ds-warning-line: color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  --ds-info-tint:             var(--ds-accent-tint);  --ds-info-ink:    var(--ds-band-ink);  --ds-info-line:    color-mix(in srgb, var(--ds-band-ink) 35%, transparent);
  /* depth + imagery: the ink at low alpha */
  --ds-shadow-lift:           0 1px 2px  color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-shadow-card:           0 1px 3px  color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-float:          0 8px 24px color-mix(in srgb, var(--ds-band-ink) 25%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-modal:          0 24px 80px color-mix(in srgb, var(--ds-band-ink) 35%, transparent), 0 0 0 1px color-mix(in srgb, var(--ds-band-ink) 12%, transparent);
  --ds-shadow-object:         0 4px 12px color-mix(in srgb, var(--ds-band-ink) 25%, transparent);
  --ds-illustration-ground:   var(--ds-accent-tint);
  --ds-texture-color:         color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-glass-fill:            color-mix(in srgb, var(--ds-band-ink) 10%, transparent);
  --ds-glass-border:          color-mix(in srgb, var(--ds-band-ink) 20%, transparent);
}

/* data-texture / data-ornament / data-illustration / data-emoji / data-avatar
   are DESCRIPTIVE — no tokens change; patterns select on them
   (e.g. [data-texture="dot"] .ds-hero::before). See CONTRACT.md §3. */

/* ---------------------------------------------------------------------------
   6. REDUCED MOTION — durations collapse to 0 through --ds-motion-scale.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme], [data-mode], [data-density], [data-depth], [data-selection],
  [data-buttons], [data-labels], [data-controls], [data-accent-scope], [data-hover],
  [data-band] {
    --ds-motion-scale: 0;
    --ds-ambient-play: paused;
    --ds-ambient-motion: 0;   /* deprecated alias — see §2 */
  }
}

/* ---- design-system components/_base.css ---- */
/* ============================================================================
   JSTOV design system — components/_base.css
   The shared layer every component file assumes. Loads AFTER tokens/base.css
   (+ an optional theme) and BEFORE any components/<id>/<id>.css.

   Contents
     1. Reset (minimal)                    5. Universal focus ring
     2. Body ground / ink / font           6. Hairline grades
     3. Type lanes (.ds-display … .ds-mono) 7. Layout helpers (.ds-stack/.ds-row/.ds-grid/.ds-container)
     4. Control-height + data-size hooks   8. .ds-demo wrapper, .ds-sr-only, reduced motion

   Only --ds-* tokens for colour, radius, shadow, family, control height and
   spacing (tools/lint-tokens.mjs enforces it). This file is the ONE component
   file allowed to (re)declare --ds-size-* hooks.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. RESET — the minimum that makes components predictable
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre, fieldset, legend { margin: 0; }
ul, ol { padding: 0; }
ul[class], ol[class] { list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, canvas, picture { display: block; max-width: 100%; height: auto; }
svg { fill: currentColor; }
button, input, select, textarea, optgroup {
  font: inherit;            /* controls inherit family, size, weight, lh    */
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}
button, [role="button"], summary { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
textarea { resize: vertical; }
a { color: var(--ds-ink-link); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .15em; }
a:hover { text-decoration-color: currentColor; }
hr { border: 0; height: 0; }
table { border-collapse: collapse; border-spacing: 0; }
:where(th) { text-align: inherit; font-weight: inherit; }
code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: .93em; }
::placeholder { color: var(--ds-ink-muted); opacity: 1; }
::selection { background: var(--ds-accent-tint); color: var(--ds-ink); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   2. BODY — ground, ink, family, line-height, numerals
   ------------------------------------------------------------------------- */
body {
  background: var(--ds-ground);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  line-height: var(--ds-lh-body);
  font-weight: var(--ds-weight-regular);
  font-variant-numeric: var(--ds-numeric);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  overflow-x: clip;   /* the mobile rule: a page never scrolls sideways */
}
/* a themed island paints its own ground so the theme boundary is visible */
[data-theme]:not(:root), [data-mode]:not(:root) { background: var(--ds-ground); color: var(--ds-ink); }

/* ---------------------------------------------------------------------------
   3. TYPE LANES — hierarchy by weight + ink at one or two sizes (T1);
      display and metadata are the only lanes that change family.
   ------------------------------------------------------------------------- */
.ds-display {
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-display);
  font-weight: var(--ds-display-weight);
  letter-spacing: var(--ds-display-tracking);
  line-height: var(--ds-lh-tight);
  text-wrap: balance;
}
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-weight: var(--ds-heading-weight);
  letter-spacing: var(--ds-heading-tracking);
  line-height: var(--ds-lh-heading);
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-h1 { font-size: var(--ds-text-2xl); }   /* 24 @14 · 27 @16 — the "title" jump   */
.ds-h2 { font-size: var(--ds-text-xl); }    /* 20 · 23                               */
.ds-h3 { font-size: var(--ds-text-lg); }    /* 16 · 18                               */
.ds-h4 { font-size: var(--ds-text-md); }    /* body size, semibold — a group title  */
.ds-h1 { letter-spacing: var(--ds-display-tracking); }

.ds-body    { font-size: var(--ds-text-md); line-height: var(--ds-lh-body); font-weight: var(--ds-weight-regular); }
.ds-body-sm { font-size: var(--ds-text-sm); line-height: var(--ds-lh-body); }
.ds-body-lg { font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }

/* label lane: family + case + tracking are theme knobs */
.ds-label {
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: var(--ds-label-tracking);
  text-transform: var(--ds-label-case);
  color: var(--ds-ink-muted);
}
/* marketing eyebrow: ALWAYS uppercase mono-ish, regardless of data-labels (house rule) */
.ds-eyebrow {
  font-family: var(--ds-font-label);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-lh-list);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ds-ink-muted);
}
/* mono lane: metadata, IDs, timestamps, code, tabular numbers */
.ds-mono {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-code);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.ds-numeric { font-variant-numeric: tabular-nums; }

/* prose: the reading measure; body-alt family (serif in paper) */
.ds-prose {
  font-family: var(--ds-font-body-alt);
  font-size: var(--ds-text-lg);
  line-height: var(--ds-lh-prose);
  max-width: var(--ds-measure);
  color: var(--ds-ink-2);
}
.ds-prose > * + * { margin-block-start: 1em; }
.ds-prose :is(h1, h2, h3, h4) { font-family: var(--ds-font-sans); color: var(--ds-ink); line-height: var(--ds-lh-heading); }
.ds-prose a { color: var(--ds-ink-link); }
.ds-prose :is(ul, ol) { padding-inline-start: 1.4em; }
.ds-prose ul { list-style: disc; }
.ds-prose ol { list-style: decimal; }
.ds-quote { font-family: var(--ds-font-body-alt); font-style: italic; font-size: var(--ds-text-lg); line-height: var(--ds-lh-prose); }

/* two-tone heading / lead: first clause ink, tail muted — inside ONE element.
   <h2 class="ds-h1 ds-two-tone">Ship the plan. <span class="ds-muted">Then measure it.</span></h2> */
.ds-two-tone { color: var(--ds-ink); }
.ds-two-tone .ds-muted { color: var(--ds-ink-muted); font-weight: inherit; }

/* ink utilities */
.ds-ink       { color: var(--ds-ink); }
.ds-ink-2     { color: var(--ds-ink-2); }
.ds-muted     { color: var(--ds-ink-muted); }     /* readable secondary */
.ds-faint     { color: var(--ds-ink-faint); }     /* decorative only — never content */
.ds-strong    { font-weight: var(--ds-weight-semibold); }
.ds-medium    { font-weight: var(--ds-weight-medium); }
.ds-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tnum      { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   4. CONTROL HEIGHT + data-size HOOKS
      Components read --ds-size-h / --ds-size-text / --ds-size-pad-x instead
      of --ds-control-h so data-size on the element (or an ancestor toolbar)
      steps the whole family together: sm = h−4 · md = h · lg = h+8.
   ------------------------------------------------------------------------- */
[data-size="sm"] { --ds-size-h: var(--ds-control-h-sm); --ds-size-text: var(--ds-text-sm); --ds-size-pad-x: calc(var(--ds-control-pad-x) - 2px); }
[data-size="md"] { --ds-size-h: var(--ds-control-h);    --ds-size-text: var(--ds-text-md); --ds-size-pad-x: var(--ds-control-pad-x); }
[data-size="lg"] { --ds-size-h: var(--ds-control-h-lg); --ds-size-text: var(--ds-text-lg); --ds-size-pad-x: calc(var(--ds-control-pad-x) + 4px); }

/* the generic control box every input / button / select / chip starts from */
.ds-control {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-height: var(--ds-size-h);
  padding-inline: var(--ds-size-pad-x);
  font-size: var(--ds-size-text);
  line-height: var(--ds-lh-list);
  border-radius: var(--ds-radius-sm);
  border: var(--ds-border-width) solid var(--ds-border);
  background: var(--ds-surface);
  color: var(--ds-ink);
  text-transform: var(--ds-control-case);
  transition: background-color var(--ds-dur-fast) var(--ds-ease-standard),
              border-color var(--ds-dur-fast) var(--ds-ease-standard),
              box-shadow var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-control:hover { border-color: var(--ds-border-strong); }
.ds-control:disabled, .ds-control[aria-disabled="true"] { color: var(--ds-ink-faint); background: var(--ds-surface-3); border-color: var(--ds-rule); }

/* ---------------------------------------------------------------------------
   5. UNIVERSAL FOCUS RING — --ds-ring at --ds-ring-width, offset, everywhere.
      No reference showed one (0 of 51); the contract defines it.
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: var(--ds-ring-width) solid var(--ds-ring);
  outline-offset: var(--ds-ring-offset);
  border-radius: inherit;
}
:focus:not(:focus-visible) { outline: none; }
/* inputs draw the ring INSIDE their box (offset 0) so toolbars stay aligned */
:is(input, textarea, select, .ds-control):focus-visible { outline-offset: calc(-1 * var(--ds-border-width)); }
/* ring-outset: draw the highlight OUTSIDE the box when the theme asks (Jasper) */
[data-ring="outset"]:focus-visible { outline-offset: var(--ds-ring-outset); }

/* ---------------------------------------------------------------------------
   6. HAIRLINES — three grades. <hr class="ds-hairline"> or as a block edge.
   ------------------------------------------------------------------------- */
.ds-hairline          { border-block-start: var(--ds-border-width) solid var(--ds-rule); }
.ds-hairline--soft    { border-block-start-color: var(--ds-rule-soft); }
.ds-hairline--strong  { border-block-start-color: var(--ds-rule-strong); }
.ds-hairline--dashed  { border-block-start-style: dashed; }   /* empty slot / optional */
.ds-hairline--dotted  { border-block-start-style: dotted; }   /* editable inline setting */
hr.ds-hairline        { width: 100%; }
.ds-hairline-v        { border-inline-start: var(--ds-border-width) solid var(--ds-rule); align-self: stretch; }

/* ---------------------------------------------------------------------------
   7. LAYOUT HELPERS — gaps from the space scale; override per instance with
      style="--_gap: var(--ds-space-8)" (private --_ props are allowed inline).
   ------------------------------------------------------------------------- */
.ds-stack { display: flex; flex-direction: column; gap: var(--_gap, var(--ds-space-4)); }
.ds-row   { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_gap, var(--ds-space-2)); }
.ds-row--between { justify-content: space-between; }
.ds-row--end     { justify-content: flex-end; }
.ds-row--nowrap  { flex-wrap: nowrap; }
.ds-grid  {
  display: grid;
  gap: var(--_gap, var(--ds-card-gap));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--_min, 240px), 100%), 1fr));
}
.ds-grid[data-cols="2"] { --_min: 320px; }
.ds-grid[data-cols="3"] { --_min: 240px; }
.ds-grid[data-cols="4"] { --_min: 200px; }
.ds-spacer { flex: 1 1 auto; }

.ds-container {
  width: 100%;
  max-width: var(--ds-container-max);
  margin-inline: auto;
  padding-inline: var(--ds-gutter-page);
}
.ds-container--narrow { max-width: var(--ds-container-narrow); }
.ds-container--prose  { max-width: var(--ds-container-prose); }

/* app content column (C-03): centred, max-width ALWAYS set (--ds-container-content, theme-tunable), page gutters */
.ds-content { width: 100%; max-width: var(--ds-container-content); margin-inline: auto; padding-inline: var(--ds-gutter-page); }

/* card surface derived from data-depth (tint / hairline / shadow / tint-hairline) */
.ds-surface {
  background: var(--ds-card-bg);
  border: var(--ds-border-width) solid var(--ds-card-border);
  box-shadow: var(--ds-card-shadow);
  border-radius: var(--ds-radius-md);
}
.ds-well { background: var(--ds-surface-2); border-radius: var(--ds-radius-md); }   /* inset tint */

/* ---------------------------------------------------------------------------
   8. DEMO WRAPPER, SR-ONLY, REDUCED MOTION
   ------------------------------------------------------------------------- */
/* <section class="ds-demo" data-component="button" data-variant="vercel-ink" data-title="…">
   The showcase generator concatenates these; the title is drawn from data-title. */
.ds-demo {
  padding: var(--ds-space-6) var(--ds-gutter-page);
  border-block-end: var(--ds-border-width) solid var(--ds-rule);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  min-width: 0;
}
.ds-demo::before {
  content: attr(data-component) " · " attr(data-variant) " — " attr(data-title);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  color: var(--ds-ink-muted);
  letter-spacing: 0;
  text-transform: none;
}
.ds-demo[data-title=""]::before, .ds-demo:not([data-title])::before { content: attr(data-component) " · " attr(data-variant); }
.ds-demo > * { min-width: 0; }
.ds-demo__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); }
.ds-demo__note { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: var(--ds-measure); }

.ds-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- section rhythm (2026-09-20, from the Cloudflare recreation) ----------------------------------
   Every recipe pads --ds-section-gap on both sides, so two adjacent PLAIN sections would stack two gaps
   (the recreation ran 13 % taller than the page). Plain-after-plain drops its top padding: the gap between
   two sections is one --ds-section-gap. Bands (a data-mode or data-band island paints its own ground) keep
   both paddings, and a plain section after a band keeps its top padding, so content never touches a band edge. */
.ds-sec:not([data-mode]):not([data-band]) + .ds-sec:not([data-mode]):not([data-band]) { padding-block-start: 0; }

/* ---- .ds-accent-word — the last word (or a term) in the accent, inside a heading or a paragraph.
   Five recipes defined this scoped; promoted to a base utility (2026-09-20). Rationed like any accent. */
.ds-accent-word { color: var(--ds-accent); }

/* ---- design-system components/chart/chart.css ---- */
/* ============================================================================
   chart — chart                                       (taxonomy §D · common · S1)
   Root: <figure class="ds-chart" data-kind="line|area|donut|pie|stacked-bar">
   Parts: __head (title row: __title + __info ⓘ + __tools: a compare select / ⋮) · __stats (stat strip / stat block
          ABOVE the plot: __stat > __stat-label + __stat-value + __stat-legend) · __plot (positioned box, height --_h)
          · __svg (viewBox 600×240, preserveAspectRatio="none", strokes non-scaling) · __grid (horizontal gridlines ONLY)
          · __baseline · __area · __line[data-series="1…8" | data-ramp="1…3" | data-role="comparison"] ·
          __dot (HTML marker at --_x/--_y %) · __y / __x (HTML tick labels at % positions) · __crosshair + __tooltip
          (hover layer) · __legend > __legend-item > __swatch · __arc (donut) · __wedge (pie) · __centre (donut total) ·
          __bar-segment (stacked status bar) · __table (the data table — always present, hidden unless data-table="visible")
          · __message (error / empty line)
   Variants (data-variant): retool-monochrome-series-ramp · origin-current-vs-ghost · quicken-quiet-area ·
     origin-semi-donut · attio-semantic-trio · retool-pie
   Calm defaults (unmarked root): horizontal gridlines only, no axis lines, no plot frame, legend centred below,
     the year written once on the first tick, UI face for every label (never the chart library's font).
   Colour rules: the FIRST series reads --ds-data-primary (= --ds-data-1 unless the theme's data-1 is its accent — ledger
     points it at ink), then categorical series take --ds-data-N in the FIXED order 1 → 4 → 3 → 2 → 6 → 7 → 5 → 8 (validated:
     adjacent pairs clear the CVD floor; blue/violet and green/pink are never neighbours); ORDERED series take
     --ds-chart-ramp-1…3 (dark → light); a comparison/ghost series is --ds-chart-comparison, dashed; status
     breakdowns take --ds-success / --ds-warning / --ds-danger and always carry a label + count. Text never wears a
     series colour. One enum = one hue everywhere (the retool-pie weakness).
   Private knobs: --_h --_series-1…3 --_area-alpha --_stroke --_x --_y (instance-set, % positions) --_w (segment width)
   ========================================================================== */

.ds-chart svg[fill="none"] { fill: none; }

.ds-chart {
  --_h:          240px;
  --_stroke:     2px;
  --_area-alpha: 20%;
  --_series-1:   var(--ds-data-primary, var(--ds-data-1));   /* the theme's chart primary — never the accent (CONTRACT §15.2) */
  --_series-2:   var(--ds-data-4);
  --_series-3:   var(--ds-data-3);
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  margin: 0;
  min-width: 0;
  max-width: 100%;
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);         /* the UI face, never the chart library's */
  font-size: var(--ds-text-sm);
  line-height: var(--ds-lh-list);
  font-variant-numeric: tabular-nums;
}

/* ---- head: title · ⓘ · tools ---- */
.ds-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2) var(--ds-space-4); min-width: 0; }
.ds-chart__title { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; font-size: var(--ds-text-lg); font-weight: var(--ds-heading-weight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); min-width: 0; }
.ds-chart__title.ds-eyebrow { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); letter-spacing: .06em; }   /* origin: the title IS the mono-caps label lane */
.ds-chart__info { display: inline-flex; align-items: center; justify-content: center; width: var(--ds-space-5); height: var(--ds-space-5); border: 0; background: transparent; color: var(--ds-ink-muted); border-radius: var(--ds-radius-pill); cursor: pointer; padding: 0; }
.ds-chart__info svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: currentColor; stroke-width: var(--ds-icon-stroke); }
.ds-chart__info:hover { color: var(--ds-ink); background: var(--ds-hover-bg); }
.ds-chart__tools { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-muted); white-space: nowrap; }

/* ---- stats above the plot (retool strip / origin block) ---- */
.ds-chart__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--ds-space-4) var(--ds-space-6); align-items: end; }
.ds-chart__stat { display: flex; flex-direction: column; gap: var(--ds-space-2); min-width: 0; }
.ds-chart__stat-label { font-family: var(--ds-font-label); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); }
.ds-chart__stat-value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); line-height: var(--ds-lh-tight); letter-spacing: var(--ds-heading-tracking); color: var(--ds-ink); }
.ds-chart__stat-legend { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-ink-2); }
.ds-chart__stats[data-layout="block"] { grid-template-columns: minmax(0, 1fr) auto; }   /* origin: stat left, "Compare with:" right on the same baseline */

/* ---- plot ---- */
.ds-chart__plot { position: relative; height: var(--_h); min-width: 0; max-width: 100%; padding-inline-start: var(--_y-w, 0px); padding-block-end: calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); }
.ds-chart__plot[data-axis-y] { --_y-w: 40px; }                                   /* retool: ≈40 px inset for y ticks */
.ds-chart__plot[data-axis-y="currency"] { --_y-w: 56px; }
.ds-chart__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ds-chart__grid line, .ds-chart__baseline { stroke: var(--ds-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ds-chart__baseline { stroke: var(--ds-rule-strong); }
.ds-chart__line { fill: none; stroke-width: var(--_stroke); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-chart__line[data-series="1"], .ds-chart__swatch[data-series="1"], .ds-chart__dot[data-series="1"], .ds-chart__wedge[data-series="1"], .ds-chart__arc[data-series="1"] { stroke: var(--_series-1); --_c: var(--_series-1); }
.ds-chart__line[data-series="2"], .ds-chart__swatch[data-series="2"], .ds-chart__dot[data-series="2"], .ds-chart__wedge[data-series="2"], .ds-chart__arc[data-series="2"] { stroke: var(--_series-2); --_c: var(--_series-2); }
.ds-chart__line[data-series="3"], .ds-chart__swatch[data-series="3"], .ds-chart__dot[data-series="3"], .ds-chart__wedge[data-series="3"], .ds-chart__arc[data-series="3"] { stroke: var(--_series-3); --_c: var(--_series-3); }
.ds-chart__line[data-series="4"], .ds-chart__swatch[data-series="4"], .ds-chart__wedge[data-series="4"], .ds-chart__arc[data-series="4"] { stroke: var(--ds-data-2); --_c: var(--ds-data-2); }
.ds-chart__line[data-series="5"], .ds-chart__swatch[data-series="5"], .ds-chart__wedge[data-series="5"], .ds-chart__arc[data-series="5"] { stroke: var(--ds-data-6); --_c: var(--ds-data-6); }
.ds-chart__line[data-series="6"], .ds-chart__swatch[data-series="6"], .ds-chart__wedge[data-series="6"], .ds-chart__arc[data-series="6"] { stroke: var(--ds-data-7); --_c: var(--ds-data-7); }
.ds-chart__line[data-series="7"], .ds-chart__swatch[data-series="7"], .ds-chart__wedge[data-series="7"], .ds-chart__arc[data-series="7"] { stroke: var(--ds-data-5); --_c: var(--ds-data-5); }
.ds-chart__line[data-series="8"], .ds-chart__swatch[data-series="8"], .ds-chart__wedge[data-series="8"], .ds-chart__arc[data-series="8"] { stroke: var(--ds-data-8); --_c: var(--ds-data-8); }
/* ordered series: the one-hue ramp, dark → light */
.ds-chart__line[data-ramp="1"], .ds-chart__swatch[data-ramp="1"], .ds-chart__wedge[data-ramp="1"] { stroke: var(--ds-chart-ramp-1); --_c: var(--ds-chart-ramp-1); }
.ds-chart__line[data-ramp="2"], .ds-chart__swatch[data-ramp="2"], .ds-chart__wedge[data-ramp="2"] { stroke: var(--ds-chart-ramp-2); --_c: var(--ds-chart-ramp-2); }
.ds-chart__line[data-ramp="3"], .ds-chart__swatch[data-ramp="3"], .ds-chart__wedge[data-ramp="3"] { stroke: var(--ds-chart-ramp-3); --_c: var(--ds-chart-ramp-3); }
/* comparison / ghost series */
.ds-chart__line[data-role="comparison"], .ds-chart__swatch[data-role="comparison"], .ds-chart__dot[data-role="comparison"] { stroke: var(--ds-chart-comparison); --_c: var(--ds-chart-comparison); stroke-dasharray: 4 4; stroke-width: 1.5px; }
.ds-chart__area { fill: color-mix(in srgb, var(--_c, var(--_series-1)) var(--_area-alpha), transparent); stroke: none; }
.ds-chart__area[data-series="1"] { --_c: var(--_series-1); }
.ds-chart__area[data-series="2"] { --_c: var(--_series-2); }
.ds-chart__area[data-series="3"] { --_c: var(--_series-3); }

/* HTML markers and axis labels — positioned by percent so they never distort with the SVG */
.ds-chart__dot {
  position: absolute;
  inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100);
  inset-block-start: calc((100% - var(--ds-text-xs) * var(--ds-lh-list) - var(--ds-space-2)) * var(--_y, 0) / 100);
  width: var(--ds-space-3); height: var(--ds-space-3);
  margin: calc(-1 * var(--ds-space-1-5)) 0 0 calc(-1 * var(--ds-space-1-5));
  border-radius: var(--ds-radius-pill);
  background: var(--_c, var(--_series-1));
  border: 2px solid var(--ds-surface);             /* the 2 px surface ring so a dot never merges with a line */
}
.ds-chart__dot[data-role="comparison"] { background: var(--ds-chart-comparison); }
.ds-chart__y { position: absolute; inset-inline-start: 0; inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: var(--_y-w, 0px); pointer-events: none; }
.ds-chart__y span { position: absolute; inset-inline-end: var(--ds-space-2); inset-block-start: calc(var(--_y, 0) * 1%); transform: translateY(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; }
.ds-chart__x { position: absolute; inset-inline: var(--_y-w, 0px) 0; inset-block-end: 0; height: calc(var(--ds-text-xs) * var(--ds-lh-list)); pointer-events: none; }
.ds-chart__x span { position: absolute; inset-inline-start: calc(var(--_x, 0) * 1%); transform: translateX(-50%); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); white-space: nowrap; text-align: center; line-height: var(--ds-lh-list); }
.ds-chart__x span:first-child { transform: none; text-align: start; }
.ds-chart__x span:last-child { transform: translateX(-100%); text-align: end; }
.ds-chart__x span small { display: block; font-size: inherit; color: var(--ds-ink-muted); }   /* the year, written once on the first tick */
.ds-chart__x[data-lane="mono"] span { font-family: var(--ds-font-mono); letter-spacing: .04em; }

/* ---- hover layer: crosshair + tooltip (the demo shows it as a data-state="hover" twin) ---- */
.ds-chart__crosshair { position: absolute; inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100); inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); width: 0; border-inline-start: var(--ds-border-width) dashed var(--ds-rule-strong); pointer-events: none; }
.ds-chart__tooltip {
  position: absolute;
  inset-inline-start: calc(var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100 + var(--ds-space-3));
  inset-block-start: var(--ds-space-2);
  z-index: var(--ds-z-tooltip);
  min-width: 140px; max-width: min(240px, 60%);
  padding: var(--ds-space-2) var(--ds-space-3);
  background: var(--ds-surface-raised);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-float);
  color: var(--ds-ink);
  font-size: var(--ds-text-sm);
  pointer-events: none;
}
.ds-chart__tooltip[data-side="start"] { inset-inline-start: auto; inset-inline-end: calc(100% - (var(--_y-w, 0px) + (100% - var(--_y-w, 0px)) * var(--_x, 0) / 100) + var(--ds-space-3)); }
.ds-chart__tooltip b { display: block; font-weight: var(--ds-weight-semibold); margin-block-end: var(--ds-space-1); color: var(--ds-ink-2); }
.ds-chart__tooltip-row { display: flex; align-items: center; gap: var(--ds-space-2); justify-content: space-between; }
.ds-chart__tooltip-row span:last-child { font-weight: var(--ds-weight-medium); }
.ds-chart__plot:not([data-state="hover"]) .ds-chart__crosshair,
.ds-chart__plot:not([data-state="hover"]) .ds-chart__tooltip { display: none; }
.ds-chart__plot:focus-visible { border-radius: var(--ds-radius-sm); }

/* ---- legend: centred below, swatch = line+dot for lines, square for fills; text in ink, never the series colour ---- */
.ds-chart__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2) var(--ds-space-5); margin: 0; padding: 0; list-style: none; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }
.ds-chart__legend[data-align="start"] { justify-content: flex-start; }
.ds-chart__legend-item { display: inline-flex; align-items: center; gap: var(--ds-space-2); white-space: nowrap; }
.ds-chart__legend-item b { color: var(--ds-ink); font-weight: var(--ds-weight-medium); }
.ds-chart__swatch { display: inline-block; width: var(--ds-space-4); height: var(--ds-space-2); border-radius: var(--ds-radius-pill); background: var(--_c); flex: 0 0 auto; }
.ds-chart__swatch[data-shape="line"] { height: 2px; border-radius: 0; position: relative; }
.ds-chart__swatch[data-shape="line"]::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; width: var(--ds-space-2); height: var(--ds-space-2); transform: translate(-50%, -50%); border-radius: var(--ds-radius-pill); background: var(--_c); }
.ds-chart__swatch[data-shape="square"] { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); }
.ds-chart__swatch[data-shape="dot"] { width: var(--ds-space-2); height: var(--ds-space-2); }
.ds-chart__swatch[data-role="comparison"] { background: repeating-linear-gradient(to right, var(--ds-chart-comparison) 0 3px, transparent 3px 6px); height: 2px; border-radius: 0; }
.ds-chart__swatch[data-tone="success"] { --_c: var(--ds-success); background: var(--_c); }
.ds-chart__swatch[data-tone="warning"] { --_c: var(--ds-warning); background: var(--_c); }
.ds-chart__swatch[data-tone="danger"]  { --_c: var(--ds-danger);  background: var(--_c); }

/* ---- donut / pie ---- */
.ds-chart__plot[data-kind="donut"], .ds-chart__plot[data-kind="pie"] { height: auto; padding: 0; display: grid; place-items: center; }
.ds-chart__plot[data-kind="donut"] .ds-chart__svg { width: min(100%, 320px); height: auto; aspect-ratio: 200 / 110; }
.ds-chart__plot[data-kind="pie"] .ds-chart__svg { width: min(100%, 220px); height: auto; aspect-ratio: 1; }
.ds-chart__arc { fill: none; stroke-width: 18; stroke-linecap: butt; }
.ds-chart__arc[data-track] { stroke: var(--ds-surface-2); }
.ds-chart__arc:not([data-track]) { paint-order: stroke; }
.ds-chart__wedge { fill: var(--_c); stroke: var(--ds-surface); stroke-width: 2; }       /* 2 px surface gap between fills */
.ds-chart__wedge-label { font-family: var(--ds-font-sans); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-semibold); fill: var(--ds-ink-on-accent); pointer-events: none; }    /* on the darkest ramp step only */
.ds-chart__wedge-label[data-on="light"] { fill: var(--ds-ink); }
.ds-chart__centre { position: absolute; inset-inline: 0; inset-block-end: 0; text-align: center; display: flex; flex-direction: column; gap: var(--ds-space-0-5); pointer-events: none; }
.ds-chart__centre b { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-bold); letter-spacing: var(--ds-heading-tracking); line-height: var(--ds-lh-tight); color: var(--ds-ink); }
.ds-chart__centre span { color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }
.ds-chart__plot[data-kind="donut"] { position: relative; }

/* ---- stacked status bar (attio semantic trio) ---- */
.ds-chart__bar { display: flex; gap: 2px; height: var(--ds-space-3); border-radius: var(--ds-radius-pill); overflow: hidden; background: var(--ds-surface-2); }
.ds-chart__bar-segment { flex: 0 0 auto; width: var(--_w, 0%); background: var(--_c); }
.ds-chart__bar-segment[data-tone="success"] { --_c: var(--ds-success); }
.ds-chart__bar-segment[data-tone="warning"] { --_c: var(--ds-warning); }
.ds-chart__bar-segment[data-tone="danger"]  { --_c: var(--ds-danger); }
.ds-chart__bar-segment:first-child { border-start-start-radius: var(--ds-radius-pill); border-end-start-radius: var(--ds-radius-pill); }
.ds-chart__bar-segment:last-child { border-start-end-radius: var(--ds-radius-pill); border-end-end-radius: var(--ds-radius-pill); }
.ds-chart__legend[data-kind="status"] { justify-content: flex-start; gap: var(--ds-space-3) var(--ds-space-6); }
.ds-chart__legend[data-kind="status"] .ds-chart__legend-item svg { width: var(--ds-icon-size); height: var(--ds-icon-size); stroke: var(--_c); stroke-width: var(--ds-icon-stroke); }

/* ---- the data table: always in the DOM, hidden unless asked for ---- */
.ds-chart__table { width: 100%; font-size: var(--ds-text-sm); border-collapse: collapse; }
.ds-chart__table th, .ds-chart__table td { padding: var(--ds-space-1) var(--ds-space-2); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); text-align: end; }
.ds-chart__table th:first-child, .ds-chart__table td:first-child { text-align: start; }
.ds-chart__table thead th { font-family: var(--ds-font-label); font-size: var(--ds-text-xs); color: var(--ds-ink-muted); letter-spacing: var(--ds-label-tracking); text-transform: var(--ds-label-case); font-weight: var(--ds-weight-medium); }
.ds-chart:not([data-table="visible"]) .ds-chart__table { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ds-chart__table-toggle { align-self: flex-start; border: 0; background: transparent; color: var(--ds-ink-2); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); min-height: var(--ds-control-h-sm); padding-inline: var(--ds-space-2); border-radius: var(--ds-radius-button); cursor: pointer; }
.ds-chart__table-toggle:hover { background: var(--ds-hover-bg); color: var(--ds-ink); }

/* ---- states on the root ---- */
.ds-chart[aria-busy="true"] .ds-chart__plot { background: var(--ds-skeleton); border-radius: var(--ds-radius-md); }
.ds-chart[aria-busy="true"] .ds-chart__plot > * { visibility: hidden; }
.ds-chart[aria-busy="true"] .ds-chart__stat-value, .ds-chart[aria-busy="true"] .ds-chart__legend { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); }
.ds-chart[data-state="empty"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-rule); border-radius: var(--ds-radius-md); display: grid; place-items: center; }
.ds-chart[data-state="empty"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; }
.ds-chart__message { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--ds-space-4); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }
.ds-chart__message a { color: var(--ds-ink-link); }
.ds-chart[data-state="error"] .ds-chart__plot { border: var(--ds-border-width) dashed var(--ds-danger); border-radius: var(--ds-radius-md); }
.ds-chart[data-state="error"] .ds-chart__plot > :not(.ds-chart__message) { visibility: hidden; }
.ds-chart[data-state="error"] .ds-chart__message { color: var(--ds-danger-ink); }
.ds-chart[data-state="error"] .ds-chart__message code { font-family: var(--ds-font-mono); color: var(--ds-ink-2); }
/* zero rendered as data (origin): a flat line at the baseline with the stat reading 0 — no special state needed */

/* =========================================================================
   Designer variants
   ========================================================================= */
/* retool: 3 ordered series on the one-hue ramp, y ticks 0/10/20, weekly x ticks with the year once, legend centred below, stat strip above */
.ds-chart[data-variant="retool-monochrome-series-ramp"] { --_stroke: 2px; }

/* origin: solid current series to "today" with an end dot vs a dashed neutral comparison to month end; NO y-axis, NO gridlines, mono x ticks over a 1 px baseline */
.ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__grid { display: none; }
.ds-chart[data-variant="origin-current-vs-ghost"] .ds-chart__x span { font-family: var(--ds-font-mono); letter-spacing: .04em; }

/* quicken: single series, 2 px line + 20 % fill that STOPS at the last datum, currency y ticks, gridlines only, no legend, no markers */
.ds-chart[data-variant="quicken-quiet-area"] { --_area-alpha: 20%; }
.ds-chart[data-variant="quicken-quiet-area"] .ds-chart__legend { display: none; }

/* origin semi-donut: 4 categorical arcs (18 px stroke) + centre total and caption */
.ds-chart[data-variant="origin-semi-donut"] .ds-chart__legend { justify-content: center; }

/* attio: Healthy / Watch / At risk on the reserved status colours, always with icon + label + count */
.ds-chart[data-variant="attio-semantic-trio"] .ds-chart__plot { height: auto; padding: 0; }

/* retool pie: full pie, 3 slices, % labels inside — pinned to the SAME ramp mapping as the line chart (the reference used a different one) */
.ds-chart[data-variant="retool-pie"] .ds-chart__legend .ds-chart__swatch { width: var(--ds-space-3); height: var(--ds-space-3); border-radius: var(--ds-radius-xs); }

/* =========================================================================
   DESK-446 gap 5 — ranking chart (data-kind="rank"): horizontal bars as a list
   Root: <figure class="ds-chart" data-kind="rank" data-variant="seline-row-fill | replit-inline-track | apollo-ranked-share">
   Parts: __plot[data-kind="rank"] > __rank (<ol>) > __row (<li>, --_value: NN% inline, data-series="1…8" optional, data-role="other", aria-current="true")
          > __row-rank · __row-label (text or <a>; title="" carries the full name when it truncates) · __row-bar > <i> (aria-hidden)
          · __row-value · __row-share.   Numbers are text in the list, bars are aria-hidden decoration.
   Knobs: --_value (per row, a percentage) --_c (row colour) --_tint (row-fill strength) --_bar-h --_label-w
   ========================================================================= */
.ds-chart[data-kind="rank"] { container-type: inline-size; }
.ds-chart__rank { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; }
.ds-chart__row {
  --_c: var(--_series-1);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--ds-space-3);
  min-height: var(--ds-row-h);
  padding-inline: var(--ds-space-2);
  border-radius: var(--ds-radius-md);
  min-width: 0;
  transition: background var(--ds-dur-fast) var(--ds-ease-standard);
}
.ds-chart__row[data-series="2"] { --_c: var(--_series-2); }
.ds-chart__row[data-series="3"] { --_c: var(--_series-3); }
.ds-chart__row[data-series="4"] { --_c: var(--ds-data-2); }
.ds-chart__row[data-series="5"] { --_c: var(--ds-data-6); }
.ds-chart__row[data-series="6"] { --_c: var(--ds-data-7); }
.ds-chart__row[data-series="7"] { --_c: var(--ds-data-5); }
.ds-chart__row[data-series="8"] { --_c: var(--ds-data-8); }
.ds-chart__row[data-role="other"] { --_c: var(--ds-chart-comparison); }                 /* the "Other" remainder is neutral, never a 9th hue */
.ds-chart__row[data-role="other"] .ds-chart__row-label { color: var(--ds-ink-muted); }
.ds-chart__row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-ink); font-weight: var(--ds-weight-medium); }
.ds-chart__row-label:is(a) { text-decoration: none; border-radius: var(--ds-radius-xs); }
.ds-chart__row-label:is(a):hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-chart__row-bar { display: block; height: var(--_bar-h, var(--ds-space-2)); border-radius: var(--ds-radius-pill); background: var(--ds-surface-2); overflow: hidden; min-width: 0; }
.ds-chart__row-bar > i { display: block; height: 100%; width: var(--_value, 0%); border-radius: var(--ds-radius-pill); background: var(--_c); }
.ds-chart__row-value { color: var(--ds-ink); font-weight: var(--ds-weight-semibold); text-align: end; white-space: nowrap; }
.ds-chart__row-share { color: var(--ds-ink-muted); text-align: end; white-space: nowrap; min-width: 4ch; }
.ds-chart__row-rank { color: var(--ds-ink-muted); min-width: 2ch; text-align: end; }
.ds-chart__row-share, .ds-chart__row-rank { display: none; }
.ds-chart__row:hover, .ds-chart__row:focus-within, .ds-chart__row[data-state="hover"] { background: var(--ds-hover-bg); }
.ds-chart__row[aria-current="true"] { background: var(--ds-selected-bg); }
.ds-chart__row[aria-current="true"] .ds-chart__row-label { color: var(--ds-selected-ink); font-weight: var(--ds-selected-weight, var(--ds-weight-semibold)); }

/* seline: the bar IS the row background — label sits inside a tinted bar, value stays outside on the right */
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row { --_tint: 16%; padding-inline: 0; min-height: var(--ds-control-h-sm); }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row:hover, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row:focus-within, .ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-state="hover"] { background: transparent; --_tint: 28%; }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar { grid-area: 1 / 1; align-self: stretch; height: auto; background: transparent; border-radius: var(--ds-radius-sm); overflow: visible; }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-sm); background: color-mix(in srgb, var(--_c) var(--_tint), transparent); }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row-label { grid-area: 1 / 1; position: relative; z-index: 1; padding-inline: var(--ds-space-3); }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row-value { grid-area: 1 / 2; padding-inline-end: var(--ds-space-2); }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row[aria-current="true"] { background: transparent; --_tint: 28%; }
.ds-chart[data-variant="seline-row-fill"] .ds-chart__row[data-role="other"] { --_tint: 22%; }

/* replit: label | thin track | value on one line; stacks (label above the track, value right) when the card is narrow */
.ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, var(--_label-w, 11rem)) minmax(0, 1fr) auto; }
.ds-chart[data-variant="replit-inline-track"] { --_bar-h: var(--ds-space-1-5); }
@container (max-width: 440px) {
  .ds-chart[data-variant="replit-inline-track"] .ds-chart__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); }
  .ds-chart[data-variant="replit-inline-track"] .ds-chart__row-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* apollo: rank number · label · bar · value · share % — a leaderboard; bar drops under the label when narrow */
.ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-rank, .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-share { display: block; }
.ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) minmax(0, 1fr) auto 5ch; border-radius: var(--ds-radius-sm); border-block-end: var(--ds-border-width) solid var(--ds-rule-soft); }
.ds-chart[data-variant="apollo-ranked-share"] .ds-chart__rank { gap: 0; }
.ds-chart[data-variant="apollo-ranked-share"] { --_bar-h: var(--ds-space-3); }
.ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { border-radius: var(--ds-radius-xs); }
.ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar > i { border-radius: var(--ds-radius-xs); }
@container (max-width: 520px) {
  .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row { grid-template-columns: 2ch minmax(0, 1fr) auto 5ch; row-gap: var(--ds-space-1); padding-block: var(--ds-space-2); }
  .ds-chart[data-variant="apollo-ranked-share"] .ds-chart__row-bar { grid-column: 2 / -1; grid-row: 2; }
}

/* =========================================================================
   DESK-446 gap 6 — empty / awaiting-data states that keep the frame
   Orthogonal to data-variant (a quicken area chart can be empty too), so a second root attribute:
     data-state="empty" + data-placeholder="savvycal-bare-axes" | "mixpanel-ghost-series"
     aria-busy="true"   + data-placeholder="square-skeleton-frame"            (loading is NOT empty)
   No data-placeholder = the original dashed footprint above. Parts: __message (centred line), __skeleton (>i bars, --_value
   heights), series elements with data-role="placeholder" (the ghost line / area / ring / wedge). Real series stay hidden.
   Works for line, area, donut, pie, stacked-bar and rank (rank ships ghost rows: <li data-ghost aria-hidden="true">).
   ========================================================================= */
.ds-chart__line[data-role="placeholder"], .ds-chart__area[data-role="placeholder"], .ds-chart__wedge[data-role="placeholder"], .ds-chart__skeleton { display: none; }
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__plot,
.ds-chart[aria-busy="true"][data-placeholder] .ds-chart__plot { border: 0; background: transparent; border-radius: 0; display: block; }
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__plot > :not(.ds-chart__message),
.ds-chart[aria-busy="true"][data-placeholder] .ds-chart__plot > :not(.ds-chart__message) { visibility: visible; }
/* real series never draw while there is no data */
.ds-chart[data-placeholder] :is(.ds-chart__line, .ds-chart__area, .ds-chart__wedge, .ds-chart__dot, .ds-chart__crosshair, .ds-chart__tooltip, .ds-chart__centre b):not([data-role="placeholder"]):not([data-track]) { visibility: hidden; }
.ds-chart[data-placeholder] .ds-chart__wedge-label { visibility: hidden; }
.ds-chart[data-placeholder] .ds-chart__plot[data-kind="donut"] .ds-chart__message { place-items: end center; }
.ds-chart[data-placeholder] .ds-chart__arc:not([data-track]):not([data-role="placeholder"]) { visibility: hidden; }
.ds-chart[data-placeholder] :is(.ds-chart__y, .ds-chart__x) { opacity: .7; }
.ds-chart[data-placeholder] .ds-chart__message { z-index: 1; pointer-events: none; }
.ds-chart[data-placeholder] .ds-chart__message > span { background: var(--ds-surface); padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-sm); max-width: 32ch; }
.ds-chart[data-placeholder] .ds-chart__message > span b { display: block; color: var(--ds-ink-2); font-weight: var(--ds-weight-semibold); }
.ds-chart[data-placeholder] .ds-chart__message > span a { pointer-events: auto; }
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__legend,
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__bar-segment { visibility: hidden; }
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__stat-value { color: var(--ds-ink-muted); }

/* savvycal: axes + gridlines drawn exactly as at rest, no series; one centred plain line over the grid */
.ds-chart[data-state="empty"][data-placeholder="savvycal-bare-axes"] .ds-chart__arc[data-track] { stroke-dasharray: 2 3; }
.ds-chart[data-state="empty"][data-placeholder="savvycal-bare-axes"] .ds-chart__bar { background: transparent; border: var(--ds-border-width) solid var(--ds-rule-soft); }

/* mixpanel: the shape of a chart, dashed and neutral, behind the message — it carries no values */
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__line[data-role="placeholder"] { display: inline; stroke: var(--ds-chart-comparison); stroke-dasharray: 4 5; opacity: .8; }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__area[data-role="placeholder"] { display: inline; fill: color-mix(in srgb, var(--ds-chart-comparison) 14%, transparent); }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__wedge[data-role="placeholder"] { display: inline; fill: none; stroke: var(--ds-chart-comparison); stroke-dasharray: 4 5; }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__arc[data-track] { stroke: var(--ds-surface-2); stroke-dasharray: 3 4; }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__bar { background: repeating-linear-gradient(to right, var(--ds-surface-2) 0 12px, transparent 12px 16px); }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__row[data-ghost] .ds-chart__row-bar > i { width: var(--_value, 0%); background: color-mix(in srgb, var(--ds-chart-comparison) 10%, transparent); outline: 1px dashed var(--ds-chart-comparison); outline-offset: -1px; opacity: .8; }
.ds-chart[data-state="empty"][data-placeholder="mixpanel-ghost-series"] .ds-chart__plot .ds-chart__message > span { box-shadow: var(--ds-shadow-lip); }

/* square: awaiting data — frame kept, grid + ticks ghosted, shimmering skeleton bars in the TRUE footprint; message is a quiet status line */
@keyframes ds-chart-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__skeleton > i, .ds-chart__row[data-ghost] .ds-chart__row-bar > i, .ds-chart__row[data-ghost] .ds-chart__row-label, .ds-chart__row[data-ghost] .ds-chart__row-value) {
  background: linear-gradient(90deg, var(--ds-skeleton) 0 40%, var(--ds-surface-2) 50%, var(--ds-skeleton) 60% 100%) 0 0 / 300% 100%;
  animation: ds-chart-shimmer 1.6s linear infinite;
  color: transparent;
}
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__skeleton { display: flex; align-items: flex-end; gap: var(--ds-space-2); position: absolute; inset-inline: var(--_y-w, 0px) 0; inset-block: 0 calc(var(--ds-text-xs) * var(--ds-lh-list) + var(--ds-space-2)); padding-inline: var(--ds-space-2); }
.ds-chart__skeleton > i { flex: 1 1 0; min-width: 0; height: var(--_value, 40%); border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__line, .ds-chart__area, .ds-chart__wedge, .ds-chart__arc:not([data-track]), .ds-chart__bar-segment, .ds-chart__centre) { visibility: hidden; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] :is(.ds-chart__y, .ds-chart__x) { opacity: .45; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__stat-value { color: transparent; background: var(--ds-skeleton); border-radius: var(--ds-radius-xs); min-width: 6ch; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__legend { background: none; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__message > span { background: transparent; color: var(--ds-ink-muted); }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__bar { background: linear-gradient(90deg, var(--ds-skeleton) 0 40%, var(--ds-surface-2) 50%, var(--ds-skeleton) 60% 100%) 0 0 / 300% 100%; animation: ds-chart-shimmer 1.6s linear infinite; }
.ds-chart[data-placeholder] .ds-chart__row[data-ghost] { pointer-events: none; }
.ds-chart[data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-label, .ds-chart[data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-value { min-height: 1em; }
.ds-chart[aria-busy="true"][data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-label { width: var(--_label-skel, 70%); border-radius: var(--ds-radius-xs); }
.ds-chart[aria-busy="true"][data-placeholder] .ds-chart__row[data-ghost] .ds-chart__row-value { width: 5ch; border-radius: var(--ds-radius-xs); }
.ds-chart__plot[data-kind="rank"] { height: auto; padding: 0; min-height: calc(var(--ds-row-h) * 4); }   /* rank: the list lives in a plot box so empty / busy / message reuse the same frame */
.ds-chart[data-state="empty"]:not([data-placeholder]) .ds-chart__plot[data-kind="rank"] { display: block; }
.ds-chart[data-state="empty"][data-placeholder] .ds-chart__row[data-ghost] { border-block-end: var(--ds-border-width) dashed var(--ds-rule-soft); border-radius: 0; }
.ds-chart[data-variant="seline-row-fill"][aria-busy="true"] .ds-chart__row[data-ghost] .ds-chart__row-label { background: none; animation: none; }
.ds-chart__plot[data-kind="rank"] > .ds-chart__rank { width: 100%; justify-self: stretch; }
.ds-chart[data-placeholder] .ds-chart__message { visibility: visible; }
.ds-chart[aria-busy="true"][data-placeholder="square-skeleton-frame"] .ds-chart__arc[data-track] { visibility: visible; stroke: var(--ds-skeleton); }
.ds-chart[data-placeholder] .ds-chart__plot:has(> .ds-chart__bar) { display: block; width: 100%; }

/* Chartsmade theme "noir" (auto): themeCss() from the design-system token files. */
[data-theme="noir"], [data-theme="noir"] [data-mode="light"] { color-scheme: light; --ds-ground: #131217; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-selected: #2e2a37; --ds-skeleton: #2a2731; --ds-ink: #ffffff; --ds-ink-2: #ededf0; --ds-ink-muted: #a9a6b3; --ds-ink-faint: #605c6b; --ds-ink-on-accent: #131217; --ds-ink-code: #ededf0; --ds-rule-soft: #232129; --ds-rule: #2e2c35; --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; --ds-accent: #ffffff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-success: #34c57f; --ds-danger: #f26a6a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-data-1: #6b9cff; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-3: #3ecf95; --ds-data-4: #f5915b; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-6: #e2c04e; --ds-data-7: #3fc7d4; --ds-data-8: #c3a184; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-radius-scale: 0; --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; --ds-font-label: var(--ds-font-mono); --ds-text-base: 16px; --ds-display-weight: 500; --ds-display-tracking: -0.03em; --ds-heading-weight: 500; --ds-label-case: uppercase; --ds-label-tracking-upper: .06em; --ds-label-tracking: var(--ds-label-tracking-upper); --ds-space-unit: 8px; --ds-density-scale: 1.2; --ds-container-max: 1464px; --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); }
[data-theme="noir"][data-mode="dark"], [data-theme="noir"] [data-mode="dark"] { color-scheme: dark; --ds-ground: #0f0e12; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-skeleton: #2a2731; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-selected: #2e2a37; --ds-surface-inverse: #fafafa; --ds-ink: #ffffff; --ds-ink-2: #ededf0; --ds-ink-muted: #a9a6b3; --ds-ink-faint: #605c6b; --ds-ink-inverse: #111111; --ds-ink-on-accent: #131217; --ds-rule-soft: #232129; --ds-rule: #2e2c35; --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; --ds-primary-fill: #f4f4f5; --ds-accent: #ffffff; --ds-accent-ink: #b9ccff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-success: #34c57f; --ds-danger: #f26a6a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-data-1: #6b9cff; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-3: #3ecf95; --ds-data-4: #f5915b; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-6: #e2c04e; --ds-data-7: #3fc7d4; --ds-data-8: #c3a184; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-ink-code: #ededf0; --ds-radius-scale: 0; --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; --ds-font-label: var(--ds-font-mono); --ds-text-base: 16px; --ds-display-weight: 500; --ds-display-tracking: -0.03em; --ds-heading-weight: 500; --ds-label-case: uppercase; --ds-label-tracking-upper: .06em; --ds-label-tracking: var(--ds-label-tracking-upper); --ds-space-unit: 8px; --ds-density-scale: 1.2; --ds-container-max: 1464px; --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); }
@media (prefers-color-scheme: dark) { [data-theme="noir"]:not([data-mode="light"]) { color-scheme: dark; --ds-ground: #0f0e12; --ds-surface: #1c1a22; --ds-surface-2: #242129; --ds-surface-3: #2c2933; --ds-skeleton: #2a2731; --ds-surface-raised: #242129; --ds-surface-hover: #221f28; --ds-surface-selected: #2e2a37; --ds-surface-inverse: #fafafa; --ds-ink: #ffffff; --ds-ink-2: #ededf0; --ds-ink-muted: #a9a6b3; --ds-ink-faint: #605c6b; --ds-ink-inverse: #111111; --ds-ink-on-accent: #131217; --ds-rule-soft: #232129; --ds-rule: #2e2c35; --ds-rule-strong: #3a3743; --ds-border: #353240; --ds-border-strong: #4a4657; --ds-primary-fill: #f4f4f5; --ds-accent: #ffffff; --ds-accent-ink: #b9ccff; --ds-accent-tint: rgba(255, 255, 255, .08); --ds-success: #34c57f; --ds-danger: #f26a6a; --ds-danger-ink: #f58d8d; --ds-warning: #f2b04a; --ds-data-1: #6b9cff; --ds-data-1-ink: #9dbcff; --ds-data-2: #a48cf5; --ds-data-3: #3ecf95; --ds-data-4: #f5915b; --ds-data-4-ink: #f8ac84; --ds-data-5: #f06fa4; --ds-data-6: #e2c04e; --ds-data-7: #3fc7d4; --ds-data-8: #c3a184; --ds-chart-ramp-1: #ffffff; --ds-chart-ramp-2: #a9a6b3; --ds-chart-ramp-3: #605c6b; --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, .50); --ds-shadow-float: 0 16px 40px rgba(0, 0, 0, .60), 0 0 0 1px rgba(255, 255, 255, .10); --ds-ink-code: #ededf0; --ds-radius-scale: 0; --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; --ds-font-label: var(--ds-font-mono); --ds-text-base: 16px; --ds-display-weight: 500; --ds-display-tracking: -0.03em; --ds-heading-weight: 500; --ds-label-case: uppercase; --ds-label-tracking-upper: .06em; --ds-label-tracking: var(--ds-label-tracking-upper); --ds-space-unit: 8px; --ds-density-scale: 1.2; --ds-container-max: 1464px; --ds-card-bg: var(--ds-ground); --ds-card-border: var(--ds-rule); --ds-card-shadow: 0 0 0 0 transparent; --ds-ink-link: var(--ds-ink); --ds-ring: var(--ds-ink); --ds-selected-bg: var(--ds-surface-selected); --ds-selected-ink: var(--ds-ink); } }


/* ============================================================================
   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 */