styles.css

/*
 * @microcharts/react — shared stylesheet.
 * One artifact, imported once:  import '@microcharts/react/styles.css'
 * Not per-chart-split. Zero-specificity via :where() so consumer overrides win.
 * Theme by overriding --mc-* at any scope. Charts never paint a background.
 */

@layer microcharts.tokens, microcharts.base, microcharts.charts, microcharts.motion;

/* Inline-seat plumbing. NOT theme tokens — a chart writes these on its own root
   from its geometry (see `Seat` in shared/Chart.tsx) and the `.mc-inline` rule
   reads them back. They are registered rather than merely used because custom
   properties inherit by default, and inheriting is exactly wrong here: a seat
   belongs to ONE mark. Left unregistered, a `--mc-seat` set anywhere up the tree
   — a consumer who picked the same name, or a themed wrapper — would flow down
   into every unseated chart beneath it and shift marks that never asked for a
   seat (the `var(…, 0)` fallback can't help; it only applies when NOTHING in the
   cascade sets the property). `inherits: false` scopes each seat to its own
   element, and `initial-value` makes the unseated default guaranteed instead of
   incidental. Deliberately outside the layers: @property is not layer-scoped,
   and these are internal plumbing, not part of the themeable surface. */
@property --mc-seat {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --mc-seat-mid {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

@layer microcharts.tokens {
  :where(:root) {
    /* semantic color — matte finish, Okabe-Ito hue geometry (CVD-safe): the
       positive stays a bluish-green and the negative a warm vermillion so the
       pair survives deuteranopia, but every tone is deepened + slightly
       desaturated to read rich and editorial rather than bright/poppy. All
       clear ≥ 3:1 on the default white surface (deeper than the source hues). */
    --mc-stroke: #1a1917; /* primary data ink — warm graphite near-black */
    --mc-positive: #0e7a5f; /* up / good — deep viridian */
    --mc-negative: #bd4b2d; /* down / bad — burnt terracotta */
    --mc-neutral: #8a8986; /* no-valence data — warm gray */
    --mc-accent: #1f6091; /* emphasis: endpoint dot, active — deep steel blue */
    --mc-band: color-mix(in oklab, var(--mc-stroke) 8%, transparent);
    --mc-moon: #c1922f; /* warm moonlight (MoonPhase lit area) — rich amber */

    /* categorical (valence-free series) — matte jewel tones, hue-diverse and
       lightness-ordered for grayscale/CVD separation. Ochre omitted-of-yellow
       leads; the two blues split by lightness (cerulean light, sapphire deep). */
    --mc-cat-1: #d2982f; /* gold */
    --mc-cat-2: #5b9fd4; /* azure */
    --mc-cat-3: #2e8c66; /* emerald */
    --mc-cat-4: #285788; /* sapphire */
    /* Terracotta and mauve sat at L* 49.6 / 49.3 — dead mid-lightness, which is
       the one place NEITHER knockout ink clears 4.5:1 (they topped out at 4.33
       and 4.37). Darkened by ΔE 2.0 and 1.1 — at or under the just-noticeable
       threshold — which puts both on the light ink at 4.54/4.52, raises their
       contrast on a white page, and moves them further from cat-3's L* 52.2, so
       the lightness ordering separates better rather than worse. */
    --mc-cat-5: #bc5138; /* terracotta */
    --mc-cat-6: #a55a89; /* mauve */
    --mc-on-cat-1: rgba(0, 0, 0, 0.9); /* #d2982f 7.5:1 */
    --mc-on-cat-2: rgba(0, 0, 0, 0.9); /* #5b9fd4 6.71:1 */
    --mc-on-cat-3: rgba(0, 0, 0, 0.9); /* #2e8c66 4.71:1 */
    --mc-on-cat-4: rgba(255, 255, 255, 0.96); /* #285788 7.04:1 */
    --mc-on-cat-5: rgba(255, 255, 255, 0.96); /* #bc5138 4.56:1 */
    --mc-on-cat-6: rgba(255, 255, 255, 0.96); /* #a55a89 4.52:1 */

    /* geometry + type */
    --mc-stroke-width: 1.5;
    --mc-gap: 0.25em;
    /* Uniform scale for stroke weight, label size, and small-multiple gap — one
       lever for compact (< 1) vs comfortable (> 1) density. The box set by
       width/height props is unaffected; density tunes ink + type, not layout. */
    --mc-density: 1;
    --mc-font: inherit;
    /* Face for tabular figures + labels. Tracks --mc-font by default so digits
       match the page; override to give numbers a dedicated brand or mono face. */
    --mc-font-numeric: var(--mc-font);
    --mc-label-size: 0.75em;
    --mc-label-weight: 400;
    /* Extra optical shift for `.mc-inline` marks on top of the baseline seat
       (see .mc-inline). 0 by default — the seat is font-independent; override
       per face only if a typeface wants marks a hair off the line. */
    --mc-inline-nudge: 0em;
    /* Extra optical shift for centred marks only (glyphs, dials, strips) on top
       of the cap-band seat. Now 0 by default: the seat lands on the true cap
       midpoint, so there is nothing left to correct. It used to be -0.04em
       because the old seat was `vertical-align: middle`, which centres on the
       x-height and therefore read low beside cap-height digits. Kept as a token
       because a display face with an unusual cap ratio may still want a hair of
       adjustment; negative lifts. */
    --mc-glyph-nudge: 0em;

    /* interactive readout chip surface — a tooltip needs a legible backing, so
       this is the one place a mark sits on an opaque plane. Defaults to the
       system canvas so it adapts with no config; override to match a themed
       surface (the docs bind it to their panel tokens). */
    --mc-surface: Canvas;
    --mc-surface-ink: CanvasText;
    --mc-surface-edge: color-mix(in oklab, CanvasText 16%, transparent);
    /* The chip's drop shadow. Black, and NOT a `CanvasText` mix like the edge
       above — that was the bug: `CanvasText` inverts with the theme, so on dark
       the blur rendered as a white halo around the chip instead of a shadow.
       A shadow is occlusion; occlusion is dark whatever the surface is, which
       is also why this needs no dark twin. On dark it goes quiet and the 1px
       edge carries the separation, which is how the ring earns its place. */
    --mc-surface-shadow: color-mix(in oklab, #000 28%, transparent);
    /* Label ink on a SATURATED SEMANTIC fill (heat cells, progress fill, event
       spans) — the deep accent/positive/stroke end of the palette, where a light
       ink is the legible one. Measured against the default light tokens:
       accent 6.3:1, positive 5.0:1, stroke 16.2:1. It gets a dark twin below,
       because the dark palette is deliberately LIFTED — the same fills are the
       LIGHTER of the two there and white text drops to 2.7–3.0:1. */
    --mc-on-fill: rgba(255, 255, 255, 0.96);
    /* Label ink on a CATEGORICAL fill. A different token because the cats are
       MID-tone by construction (gold, azure, terracotta), not deep: the light
       ink that works on `--mc-accent` reads 2.1–3.7:1 on them in either theme,
       while this dark ink clears 4.5:1 on eleven of the twelve default cats
       (5.0–8.6:1). The twelfth — light-mode sapphire, the one deep cat — is
       exempted where it is used. Not theme-flipped: dark-mode cats are lifted
       further, so the dark ink only gets safer. */
    --mc-on-cat: rgba(0, 0, 0, 0.9);
    /* Label ink for a label that STEPS BACK from the on-fill treatment
       (TraceFold's non-critical spans). Its own token rather than the
       `--mc-surface` those rules used to borrow — that one is documented as the
       readout chip's backing plane, so retargeting the chip repainted in-chart
       text as a side effect. */
    --mc-on-fill-dim: var(--mc-stroke);

    /* motion */
    --mc-duration: 300ms;
    --mc-easing: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out */
  }
  /* Dark mode — hand-tuned, never auto-inverted. */
  @media (prefers-color-scheme: dark) {
    :where(:root) {
      /* Matte on dark — lifted for legibility but chroma held back so the tones
         read rich/muted, never neon-glow. Warm off-white ink softens the stark. */
      --mc-stroke: #eae9e6;
      --mc-positive: #45a385; /* sage-emerald */
      --mc-negative: #df7856; /* warm terracotta */
      --mc-accent: #5ea1cf; /* steel-sky */
      --mc-neutral: #9a9a97;
      --mc-moon: #e0be6f; /* warm amber on dark surfaces */
      /* Categorical is lifted on dark — deep light-mode jewels go muddy on
         near-black, so each cat gets a hand-tuned brighter twin (same hue). */
      --mc-cat-1: #e2b45c;
      --mc-cat-2: #6fb0e0;
      --mc-cat-3: #4fb08d;
      --mc-cat-4: #6e9bd1;
      --mc-cat-5: #e07e5e;
      --mc-cat-6: #c486b0;
      --mc-on-cat-1: rgba(0, 0, 0, 0.9); /* #e2b45c 9.69:1 */
      --mc-on-cat-2: rgba(0, 0, 0, 0.9); /* #6fb0e0 8.07:1 */
      --mc-on-cat-3: rgba(0, 0, 0, 0.9); /* #4fb08d 7.2:1 */
      --mc-on-cat-4: rgba(0, 0, 0, 0.9); /* #6e9bd1 6.63:1 */
      --mc-on-cat-5: rgba(0, 0, 0, 0.9); /* #e07e5e 6.68:1 */
      --mc-on-cat-6: rgba(0, 0, 0, 0.9); /* #c486b0 6.73:1 */
      /* Lifted fills flip the on-fill ink: white-on-accent falls to 2.7:1 here
         (2.96:1 on positive), while this dark ink reads 6.8:1 / 6.3:1. */
      --mc-on-fill: rgba(0, 0, 0, 0.9);
    }
  }
  /* Explicit LIGHT — the missing half of the contract. `[data-mc-theme="dark"]`
     below has always let a host force dark; there was no way to force light, so
     on a dark-OS machine the media query above won no matter what the host said.
     That is not a cosmetic mismatch: a host that pins light usually overrides
     the palette tokens too, and `--mc-on-fill` is the one nobody thinks to
     restate — so the FILLS came out light while their knockout ink stayed on the
     dark branch. Measured on the docs site in exactly that state: TraceFold's
     span labels 3.28:1, TimeInRange 3.59:1, PartitionStrip 3.76:1, all under the
     4.5:1 text floor, on a page whose every other token was correctly light.
     Placed after the media query, at the same zero specificity, so it simply
     wins on cascade order — the same shape as the dark block below. */
  :where([data-mc-theme="light"]) {
    --mc-stroke: #1a1917;
    --mc-positive: #0e7a5f;
    --mc-negative: #bd4b2d;
    --mc-accent: #1f6091;
    --mc-neutral: #8a8986;
    --mc-moon: #c1922f;
    --mc-cat-1: #d2982f;
    --mc-cat-2: #5b9fd4;
    --mc-cat-3: #2e8c66;
    --mc-cat-4: #285788;
    --mc-cat-5: #bc5138;
    --mc-cat-6: #a55a89;
    --mc-on-cat-1: rgba(0, 0, 0, 0.9); /* #d2982f 7.5:1 */
    --mc-on-cat-2: rgba(0, 0, 0, 0.9); /* #5b9fd4 6.71:1 */
    --mc-on-cat-3: rgba(0, 0, 0, 0.9); /* #2e8c66 4.71:1 */
    --mc-on-cat-4: rgba(255, 255, 255, 0.96); /* #285788 7.04:1 */
    --mc-on-cat-5: rgba(255, 255, 255, 0.96); /* #bc5138 4.56:1 */
    --mc-on-cat-6: rgba(255, 255, 255, 0.96); /* #a55a89 4.52:1 */
    --mc-on-fill: rgba(255, 255, 255, 0.96);
  }
  :where([data-mc-theme="dark"]) {
    --mc-stroke: #eae9e6;
    --mc-positive: #45a385;
    --mc-negative: #df7856;
    --mc-accent: #5ea1cf;
    --mc-neutral: #9a9a97;
    --mc-moon: #e0be6f;
    --mc-cat-1: #e2b45c;
    --mc-cat-2: #6fb0e0;
    --mc-cat-3: #4fb08d;
    --mc-cat-4: #6e9bd1;
    --mc-cat-5: #e07e5e;
    --mc-cat-6: #c486b0;
    --mc-on-cat-1: rgba(0, 0, 0, 0.9); /* #e2b45c 9.69:1 */
    --mc-on-cat-2: rgba(0, 0, 0, 0.9); /* #6fb0e0 8.07:1 */
    --mc-on-cat-3: rgba(0, 0, 0, 0.9); /* #4fb08d 7.2:1 */
    --mc-on-cat-4: rgba(0, 0, 0, 0.9); /* #6e9bd1 6.63:1 */
    --mc-on-cat-5: rgba(0, 0, 0, 0.9); /* #e07e5e 6.68:1 */
    --mc-on-cat-6: rgba(0, 0, 0, 0.9); /* #c486b0 6.73:1 */
    --mc-on-fill: rgba(0, 0, 0, 0.9);
  }
  /* Presets = token bundles. Visual only. */
  /* "editorial" — hairline, sharp, a single restrained red endpoint accent.
     Ink is left to the active theme (never pinned to a light value) so the
     preset stays legible on dark surfaces too — its identity is the weight and
     the accent, not a fixed grey. */
  /* Each preset also answers to [data-mc-preset] — the page-global form (a docs
     or app shell sets it on <html>) — so preset bundles have ONE source here and
     hosts never re-declare them. Per-instance [data-mc-theme] wins by proximity. */
  :where([data-mc-theme="editorial"], [data-mc-preset="editorial"]) {
    --mc-accent: #a32236; /* matte claret — restrained, not signal-red */
    --mc-stroke-width: 1;
  }
  :where([data-mc-theme="mono"], [data-mc-preset="mono"]) {
    --mc-positive: var(--mc-stroke);
    --mc-negative: var(--mc-stroke);
    --mc-accent: var(--mc-stroke);
    --mc-neutral: var(--mc-stroke);
    --mc-moon: var(--mc-stroke);
  }
  /* vivid never claims --mc-accent: the accent is the consumer's brand voice;
     the preset only turns up weight + valence. (editorial's red IS its identity,
     so that one keeps its pin.) */
  :where([data-mc-theme="vivid"], [data-mc-preset="vivid"]) {
    --mc-positive: #0f9e78; /* louder than default, still matte not neon */
    --mc-negative: #e24d2e;
    --mc-stroke-width: 2;
  }
  /* "print" — paper output: near-black ink at a hairline weight; valence
     deepened for CMYK so up/down survive a colour print; band barely there. */
  :where([data-mc-theme="print"], [data-mc-preset="print"]) {
    --mc-stroke: #1a1a1a;
    --mc-neutral: #666666;
    --mc-positive: #0c6249;
    --mc-negative: #a33f22;
    --mc-accent: #14507a;
    --mc-moon: #7a5a12;
    --mc-band: color-mix(in oklab, #1a1a1a 9%, transparent);
    --mc-stroke-width: 1.25;
  }
  /* "eink" — grayscale e-paper: no chroma (the panel can't show it), so sign
     rides lightness (positive black vs negative gray, mirroring forced-colors)
     and strokes thicken for low-DPI, low-refresh legibility. */
  :where([data-mc-theme="eink"], [data-mc-preset="eink"]) {
    --mc-stroke: #000000;
    --mc-positive: #000000;
    --mc-negative: #595959;
    --mc-neutral: #8c8c8c;
    --mc-accent: #000000;
    --mc-moon: #000000;
    --mc-band: color-mix(in oklab, #000000 14%, transparent);
    --mc-stroke-width: 2;
  }
  /* mono + eink are the two ACHROMATIC presets: mono collapses every semantic
     token onto `--mc-stroke`, and eink's own comment says "no chroma (the panel
     can't show it)". Neither remapped `--mc-cat-*`, so the nine categorical
     charts kept full jewel-tone colour inside a preset that had just declared it
     unavailable — a SegmentedBar in `eink` shipped six hues to a grayscale panel.
     Both now ride one lever, `--mc-stroke`, since each already pins that: six
     tints, lightness-ordered, so the series order survives.

     The range is deliberately narrow (16% → 5%). A tint of the ink over the page
     is mid-grey in the middle of a wider ramp, and there is then NO single label
     ink that clears 4.5:1 on every step — the light ink fails the dark steps and
     the dark ink fails the light ones. Keeping every step light means the
     ordinary `--mc-stroke` label ink stays legible on all six in both themes
     (measured: 4.6:1 on the darkest step against a dark page, 12:1 against a
     light one), which is why these presets take no `--mc-on-cat` override. A
     whisper of ordering is the honest reading anyway: in a one-ink preset the
     label is the identifier and colour is explicitly not carrying meaning.

     `print` keeps the chromatic palette on purpose — it is a COLOUR-output
     context (it only deepens valence for CMYK), not an achromatic one. */
  :where(
    [data-mc-theme="mono"],
    [data-mc-preset="mono"],
    [data-mc-theme="eink"],
    [data-mc-preset="eink"]
  ) {
    --mc-cat-1: color-mix(in oklab, var(--mc-stroke) 16%, transparent);
    --mc-cat-2: color-mix(in oklab, var(--mc-stroke) 13%, transparent);
    --mc-cat-3: color-mix(in oklab, var(--mc-stroke) 11%, transparent);
    --mc-cat-4: color-mix(in oklab, var(--mc-stroke) 9%, transparent);
    --mc-cat-5: color-mix(in oklab, var(--mc-stroke) 7%, transparent);
    --mc-cat-6: color-mix(in oklab, var(--mc-stroke) 5%, transparent);
    --mc-on-cat: var(--mc-stroke);
  }
  /* print/eink pin a fixed light-surface ink — right for paper, but on a dark
     viewer that ink sinks into the field. Give them hand-tuned dark twins: eink
     flips to true night-mode (light ink on black — a real e-paper mode), print
     lifts to a "dark paper" ink. Weight + band identity (set above) carry over;
     only the pinned colours are re-tuned. mono/vivid/editorial already leave ink
     to the active theme, so they need no twin. Both dark signals are covered —
     @media(prefers-color-scheme) and an explicit [data-mc-theme="dark"] scope —
     and each sits AFTER its light block so it wins at equal (zero) specificity. */
  @media (prefers-color-scheme: dark) {
    :where([data-mc-theme="print"], [data-mc-preset="print"]) {
      --mc-stroke: #e8e6e1;
      --mc-neutral: #9a958c;
      --mc-positive: #4aa588;
      --mc-negative: #e08a63;
      --mc-accent: #6aa9d3;
      --mc-moon: #e0be6f;
      --mc-band: color-mix(in oklab, #e8e6e1 9%, transparent);
    }
    :where([data-mc-theme="eink"], [data-mc-preset="eink"]) {
      --mc-stroke: #ffffff;
      --mc-positive: #ffffff;
      --mc-negative: #b0b0b0;
      --mc-neutral: #808080;
      --mc-accent: #ffffff;
      --mc-moon: #ffffff;
      --mc-band: color-mix(in oklab, #ffffff 14%, transparent);
    }
  }
  :where([data-mc-theme="dark"]) :where([data-mc-theme="print"], [data-mc-preset="print"]),
  :where([data-mc-theme="dark"][data-mc-preset="print"]) {
    --mc-stroke: #e8e6e1;
    --mc-neutral: #9a958c;
    --mc-positive: #4aa588;
    --mc-negative: #e08a63;
    --mc-accent: #6aa9d3;
    --mc-moon: #e0be6f;
    --mc-band: color-mix(in oklab, #e8e6e1 9%, transparent);
  }
  :where([data-mc-theme="dark"]) :where([data-mc-theme="eink"], [data-mc-preset="eink"]),
  :where([data-mc-theme="dark"][data-mc-preset="eink"]) {
    --mc-stroke: #ffffff;
    --mc-positive: #ffffff;
    --mc-negative: #b0b0b0;
    --mc-neutral: #808080;
    --mc-accent: #ffffff;
    --mc-moon: #ffffff;
    --mc-band: color-mix(in oklab, #ffffff 14%, transparent);
  }
}

@layer microcharts.base {
  :where(.mc-root) {
    display: inline-block;
    vertical-align: middle;
    overflow: visible;
    font: var(--mc-font);
    /* Let the drawing follow a CSS width instead of letterboxing inside it.
       `Chart` emits width AND height as presentation attributes, so a consumer
       `className="w-full"` beat the width attribute and left the height one
       standing: `preserveAspectRatio="xMidYMid meet"` then fitted an 80x6 mark
       into a 335x6 box at scale 1 and centred it, painting 127px of dead space
       each side. It read as a chart that failed to load.

       `height: auto` releases the second axis so the viewBox ratio drives it.
       It is a CSS declaration, so it outranks the presentation attribute; it is
       inside `:where()`, so any consumer rule still outranks it. With no
       consumer CSS at all the used height is unchanged — `auto` against a
       definite width resolves through the same ratio the attribute encoded.

       `max-width: 100%` stops a fixed-width mark overflowing a container
       narrower than itself, mirroring `[data-mc-host]` so the static entry and
       its interactive twin size identically. There is deliberately NO `align-self` here: it would
       defeat a parent's `align-items` outright rather than lose a specificity
       contest, so it broke this package's own `.mc-group { align-items: center }`
       and made a static chart align differently from its interactive twin in
       the same flex row — the "one component, two layouts" bug in a new axis. */
    height: auto;
    max-width: 100%;
    /* density-scaled stroke weight consumed by the ink + width roles below, so
       one --mc-density retunes every stroke without touching the base token.
       This is the token a MARK reads, in the stylesheet and in an inline
       `strokeWidth` alike — thirty inline declarations across twenty charts used
       to reach for the base `--mc-stroke-width` directly and so opted their
       primary mark out of `--mc-density` while every stroke around it scaled. A
       chart wants `--mc-stroke-width` only to declare a DELIBERATE exemption,
       and then it should say so (see the annotation hairlines). */
    --mc-sw: calc(var(--mc-stroke-width) * var(--mc-density));
  }
  /* Chart-only table cells: kill the font strut so a lone SVG seats the row
     height instead of a 1em line-box around an inline mark. The two HTML-text
     charts (Delta, TokenConfidence) are excluded: their marks ARE text, so the
     strut is load-bearing — and only their LIVE wrappers match these selectors,
     which made a hydrating cell 2px shorter than its server render (the
     "one component, two layouts" bug, in the row-height axis). */
  :where(td:has(> .mc-root:only-child)),
  :where(td:has(> [data-mc-host]:only-child:not(.mc-delta-live, .mc-token-confidence))),
  :where(td:has(> [class$="-live"]:only-child:not(.mc-delta-live, .mc-tc-live))),
  :where(td:has(> [class$="-interactive"]:only-child)) {
    line-height: 0;
  }
  :where(.mc-root text) {
    font-variant-numeric: tabular-nums;
    font-family: var(--mc-font-numeric);
    font-weight: var(--mc-label-weight);
    /* Density scales the label, but only up to 1.25 — past that the text outgrows
       the gutter the geometry reserved for it and paints outside the viewBox
       (`.mc-root` is overflow: visible, so it spills into the page rather than
       clipping). Gutters are computed server-side from a character-count
       estimate and cannot see a runtime CSS variable, so the cap is the only
       place this can be enforced. Measured on the worst case in the catalog
       (dot-plot, a caller-supplied all-caps row label, whose prose gutter has the
       least slack): no spill at 0.8 / 1 / 1.25, and 7.5 units of spill at 1.5.
       Compact density (< 1) is always safe — it shrinks the text inside a gutter
       already reserved for the larger size. Stroke and gap keep scaling
       unclamped below; neither is bounded by a reserved text box. */
    /* `--mc-label-px` is the CHART's own computed size, pinned on its host from
       geometry — the number the gutter was reserved for, so it is what has to
       paint. `--mc-label-size` is the APP's token and stands in only for a chart
       that pins nothing. They used to be one name, which meant an app setting
       the token silently overrode the geometry on exactly the charts that paint
       labels, and a chart's own pin overrode the app everywhere else. */
    font-size: calc(var(--mc-label-px, var(--mc-label-size)) * min(1.25, var(--mc-density)));
    fill: var(--mc-stroke);
  }
  /* Labels seated ON a solid mark (HeatCell upper steps, TimeInRange zones,
     EventTimeline spans) take the on-fill ink. A stylesheet rule, not an SVG
     `fill` attribute — the `.mc-root text` fill above is a CSS declaration and
     outranks any presentation attribute, which silently kept these labels in
     stroke ink (dark-on-dark on hot cells). Placed after it so source order
     decides between the two zero-specificity rules. */
  :where(.mc-root text[data-mc-on-fill]) {
    fill: var(--mc-on-fill);
  }
  /* small-multiples wrapper — layout-neutral by default */
  :where(.mc-group) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: calc(var(--mc-gap) * var(--mc-density));
    align-items: center;
  }
  /* Word-sized chart in running prose. Wraps any SVG mark next to digits;
     leave <Delta> bare — it owns baseline. Ships in styles.css so hosts only
     add className="mc-inline".

     Alignment is a baseline SEAT, not a middle+nudge: an inline-flex box whose
     only child is an SVG takes its baseline from the SVG's bottom edge, so
     `vertical-align: baseline` stands the mark ON the text baseline exactly
     like a glyph — bars sit where letters sit. Metric-independent: the old
     `vertical-align: middle` + fixed nudge drifted with every typeface
     (x-height decides where "middle" is; serif vs sans marks landed on
     different lines). --mc-inline-nudge remains as a pure optical extra. */
  :where(.mc-inline) {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
    margin-inline: 0.2em;
    translate: 0 var(--mc-inline-nudge);
  }
  /* The seat itself. The wrapper always baseline-seats (above); this rule then
     shifts the MARK to where it actually belongs on the line, using the two
     custom properties the chart emitted from its own geometry (see `Seat` in
     shared/Chart.tsx). No per-chart CSS, no `:has()` allowlist of class names —
     the numbers come from the same source as the drawing, so a chart whose
     padding changes cannot drift out of alignment.

     Two things make this work:

     - `100%` in a translate resolves against the element's OWN height, so one
       unitless fraction seats the mark at any rendered size — authored px, a CSS
       height override, or a fluid container. Nothing has to know the used size.
     - `translate` is its own property, not `transform`, so it composes with the
       motion engine's transforms instead of overwriting them.

     The shift is visual only: transforms don't affect layout, so the wrapper's
     baseline — and therefore the line box and the leading around it — is
     untouched. A seated mark never reflows the sentence it sits in.

     `--mc-seat-mid` is 0 for floor marks and 1 for centred ones; multiplying the
     cap term by it keeps both modes in a single declaration. Charts that don't
     emit a seat get 0 and keep the legacy baseline seat. */
  :where(.mc-inline .mc-root) {
    translate: 0
      calc(var(--mc-seat, 0) * 100% + var(--mc-seat-mid, 0) * (var(--mc-glyph-nudge) - 0.36em));
  }
  /* `cap` is exactly the half-cap-height this wants and needs no per-font
     tuning; `0.36em` above is the fallback for browsers without it (≈ half of a
     0.72em typical cap height). `.mc-root` carries `font: inherit`, so `cap`
     here resolves against the SURROUNDING PROSE — not `--mc-label-size`, which
     only ever applies to `.mc-root text`. */
  @supports (height: 1cap) {
    :where(.mc-inline .mc-root) {
      translate: 0
        calc(var(--mc-seat, 0) * 100% + var(--mc-seat-mid, 0) * (var(--mc-glyph-nudge) - 0.5cap));
    }
  }
  /* An INTERACTIVE wrapper hoists its chart's seat up to itself (see
     `useSeatHoist` in shared/live-region.tsx) and marks itself `data-mc-seated`.
     Seating the wrapper instead of the SVG moves the whole box — the mark AND
     the `.mc-spark-readout` chip the wrapper positions — so the chip stays
     pinned to the mark it annotates instead of floating a seat's worth above it.
     Identical declaration to the rule above: `100%` resolves against the
     wrapper's own height, which IS the SVG's height, and `cap` resolves against
     the same inherited prose font. The SVG then must NOT seat itself again. */
  :where(.mc-inline [data-mc-seated]) {
    translate: 0
      calc(var(--mc-seat, 0) * 100% + var(--mc-seat-mid, 0) * (var(--mc-glyph-nudge) - 0.36em));
  }
  :where(.mc-inline [data-mc-seated] > .mc-root) {
    translate: none;
  }
  @supports (height: 1cap) {
    :where(.mc-inline [data-mc-seated]) {
      translate: 0
        calc(var(--mc-seat, 0) * 100% + var(--mc-seat-mid, 0) * (var(--mc-glyph-nudge) - 0.5cap));
    }
  }
  :where(.mc-inline .mc-status) {
    align-self: center;
  }
  :where(.mc-inline .mc-trend) {
    width: 0.95em;
    height: 0.95em;
  }
  /* Focusable interactive charts never lose a visible ring.
     The tab stop is the WRAPPER span (`wrap()` stamps `data-mc-host`), never the
     `<svg>` — no static sets `tabIndex`, so a `.mc-root:focus-visible` rule can
     never match and every chart fell back to the UA outline. Keep `.mc-root`
     too: a consumer may make the SVG itself focusable in a custom host. */
  :where([data-mc-host]:focus-visible, .mc-root:focus-visible) {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
    /* the wrapper is line-height: 0 and hugs the mark; a hair of radius keeps
       the ring from reading as a hard box around a round glyph */
    border-radius: 0.2em;
  }

  /* <Delta> — inline text metric; glyph + number share the valence color via
     currentColor. Direction is double-encoded (triangle shape + color). */
  :where(.mc-delta) {
    display: inline-flex;
    /* Align to the text BASELINE, not the x-height middle: inline-flex +
       vertical-align:middle rode the box high beside running text ("Revenue
       ▲ +12.4%" sat above the line). align-items:baseline lets the number set
       the box baseline; vertical-align:baseline seats it on the sentence line.
       Metric-independent — scales with font-size, no magic numbers. */
    align-items: baseline;
    gap: var(--mc-gap);
    font: var(--mc-font);
    font-family: var(--mc-font-numeric);
    font-variant-numeric: tabular-nums;
    color: var(--mc-neutral);
    vertical-align: baseline;
    line-height: 1;
  }
  :where(.mc-delta[data-mc-valence="pos"]) {
    color: var(--mc-positive);
  }
  :where(.mc-delta[data-mc-valence="neg"]) {
    color: var(--mc-negative);
  }
  :where(.mc-delta .mc-delta-glyph) {
    fill: currentColor;
    flex: none;
    /* The NUMBER owns the box baseline (align-items:baseline on the parent); the
       glyph must not participate or the taller svg drags the baseline up and the
       whole delta rides high in a sentence. Center it on the number instead. */
    align-self: center;
  }
  :where(.mc-delta .mc-delta-num) {
    font-weight: 600;
  }
  /* interactive Delta wrapper: hosts the live region + pulse (see motion layer) */
  :where(.mc-delta-live) {
    position: relative;
    display: inline-flex;
    /* MUST match the static .mc-delta (baseline, not middle): the inline-flex
       takes its baseline from the inner .mc-delta's number, so this seats the
       live Delta on the same line as the static one — otherwise toggling
       interactive/animated shifts it vertically. */
    vertical-align: baseline;
  }
  /* interactive TrendArrow wrapper — same live/pulse pattern at glyph size */
  :where(.mc-trend-live) {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }
  /* interactive StatusDot wrapper — live region host */
  :where(.mc-status-live) {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
  }
  /* Data change — when the host sends new `data`, an interactive chart TRAVELS
     to the new reading instead of cutting to it. A mark that teleports on every
     update reads as a static image being replaced; a mark that moves is the same
     mark holding a new value, which is what actually happened.

     Three things make this one rule instead of a hundred:

       - `[data-mc-host]` scopes it to interactive wrappers (`src/shared/
         interactive.ts`). Static entries never carry it, so the static-first
         contract holds structurally rather than by convention.
       - `[data-mc-ink]`, or `[data-mc-cat]` for the categorical family and
         `[data-mc-cone]` for graded bands, is the discriminator, and it costs
         nothing because those attributes already mark every mark that encodes
         something. (A categorical segment travels
         on its WIDTH, which is a continuous quantity; its category is carried by
         the attribute, and that swaps outright.) A focus or selection ring
         carries `data-mc-active` and neither of these in ~100 entries — that is
         the house pattern, so rings fall out of this selector for free and keep
         SNAPPING to the unit they name. Mid-glide a
         ring encloses no unit while the screen reader has already announced the
         new one. `focus-ring-symmetry.browser.test.tsx` exists because a ring
         once inherited a geometry transition and lerped across a whole beam.
         Because the gate IS the role, a prop must never take a role away:
         `ink-role-stability.test.ts` fails a chart that drops `data-mc-ink` to
         `undefined` when a `color` prop is passed, which used to leave those
         marks out of this rule, out of the forced-colors remap, and out of every
         other rule keyed on a role.
       - `[data-mc-ui]` excludes the interaction overlay, whose own response
         motion is the transform glide further down and is timed to the pointer,
         not to the data.

     Interpolating between two readings paints values that are not in the data —
     a bar easing 5 to 8 passes through 6 and 7. That is admissible only for a
     CONTINUOUS quantity, where the reading is "this value is changing", and only
     for the mark's own geometry: label and readout TEXT is never transitioned,
     so the number on screen is always one the host actually sent. Charts whose
     mark names a discrete state rather than a quantity (dice pips, moon phase,
     tally marks, trend arrow, hourglass, status dot) have no wrapper here and
     swap outright.

     `d` is absent because no engine has ever had a CSS geometry property for it,
     so the ~60 path-based charts cut rather than travel. `x1`/`y1`/`x2`/`y2`
     are absent for the same reason and it is easy to miss: SVG2 specified them
     as geometry properties, no engine implemented them, and listing them here
     is inert — so a `<line>` NEVER travels, whatever role it carries. That is
     load-bearing when a chart mixes shapes: OHLC's bodies are rects and its
     wicks are lines, so its bodies deliberately take no ink role rather than
     glide away from their own high and low. `data-change-glide.browser.test.tsx`
     asserts the platform fact so this comment cannot rot. The properties that
     ARE listed became animatable in Safari 17.4 and Firefox 128 against a
     Safari 16.4 floor, so an older engine gets today's behaviour: it snaps.
     All stated degradations, not silent ones.

     200ms, not `--mc-duration`'s 300ms: a feed ticking faster than the
     transition would leave the mark permanently trailing its own data. Consumers
     opt out with one zero-specificity line —
     `.my-chart [data-mc-ink] { transition: none }` — and `prefers-reduced-motion`
     already strips it in the block below. */
  :where(
    [data-mc-host]
      .mc-root
      :is([data-mc-ink], [data-mc-cat], [data-mc-cone]):not([data-mc-ui], [data-mc-ui] *)
  ) {
    transition-property: x, y, width, height, cx, cy, r;
    transition-duration: 200ms;
    transition-timing-function: var(--mc-easing);
  }
  /* @mc-chart fill-word */
  /* interactive FillWord: the ink edge glides along the word. `clip-path` is not
     a geometry property, so this stays outside the shared data-change rule above
     and only borrows its 200ms. Reduced-motion is handled by the block below. */
  :where(.mc-fillword-live text[data-mc-ink="accent"]) {
    transition: clip-path 200ms var(--mc-easing);
  }
  /* @mc-chart-end */
  /* @mc-chart fat-digits */
  /* interactive FatDigits: the weight eases on variable fonts (snaps otherwise).
     A font axis is not a geometry property, so this stays outside the shared
     data-change rule and only borrows its 200ms. */
  :where(.mc-fat-live tspan) {
    transition: font-weight 200ms var(--mc-easing);
  }
  /* @mc-chart-end */
}

@layer microcharts.charts {
  /* ink roles — marks carry data-mc-ink; color/width come from tokens so a
     single --mc-* override retunes every chart. */
  :where(.mc-root [data-mc-ink="data"]) {
    fill: none;
    stroke: var(--mc-stroke);
    stroke-width: var(--mc-sw);
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  :where(.mc-root [data-mc-ink="accent"]) {
    fill: var(--mc-accent);
    stroke: none;
  }
  /* accent on stroked marks (now-line, focus guides) — element-split like ghost:
     an open polyline with a plain accent FILL would paint a wedge and lose its
     stroke, so line-shaped accents stroke instead. */
  :where(.mc-root :is(path, line, polyline)[data-mc-ink="accent"]) {
    fill: none;
    stroke: var(--mc-accent);
  }
  /* width roles — orthogonal to ink (color) roles, composable on any stroked
     mark. Ratios of the primary width so presets and prefers-contrast retune
     every stroke in a chart, not just the data line. At the default 1.5 these
     resolve to 1 / 0.75 / 0.5 — the weights the charts were hand-tuned to. */
  :where(.mc-root [data-mc-w="full"]) {
    stroke-width: var(--mc-sw);
  }
  :where(.mc-root [data-mc-w="support"]) {
    stroke-width: calc(var(--mc-sw) * 2 / 3);
  }
  :where(.mc-root [data-mc-w="tick"]) {
    stroke-width: calc(var(--mc-sw) / 2);
  }
  :where(.mc-root [data-mc-w="hair"]) {
    stroke-width: calc(var(--mc-sw) / 3);
  }
  /* interaction overlay — the mark that names the unit under the pointer or the
     keyboard cursor. `data-mc-active` is a marker, not a state: hover vs pin is
     already carried by `data-mc-w`, which ~20 charts tune deliberately in both
     directions (Constellation pins at `full`, ChangePoint inverts the pair), and
     one channel per job keeps that tuning intact.

     Three tokens, so the SHAPE of the active state is themeable and not only its
     color. Restyling used to mean hand-scoping rules onto `data-mc-*` attributes
     from outside the package, which is a private-API dependency:

       --mc-active-stroke        ring color              (default: --mc-accent)
       --mc-active-fill          wash inside the ring    (default: --mc-on-fill)
       --mc-active-fill-opacity  its strength            (default: 0.2; 0 = outline only)
       --mc-rest-opacity         every OTHER mark, while something is active (default: 1)

     The wash is not decoration, it is the fix for a real blind spot: an accent
     hairline over an accent-emphasized mark is invisible by construction, and 38
     charts paint exactly one mark `data-mc-ink="accent"` (SparkBar's endpoint
     bar, Pareto's leader, Thermometer's reading). `--mc-on-fill` resolves it
     without a second element per chart, because it is DEFINED as the ink that
     reads on a saturated data fill — `theming-contract.test.ts` already pins it
     at ≥ 4.5:1 on accent/positive/stroke in both themes — and it is near the
     page color by that same construction, so the wash stays invisible inside a
     ring that encloses empty plot rather than a mark.

     Closed primitives only. A `path`/`line`/`polyline` overlay is an open strand
     (EnsembleGhosts' member, MicroDonut's arc) and filling one paints a wedge —
     the same element split the ink roles make. This block sits BEFORE the muted
     role below on purpose: a chart whose hover crosshair is `muted` and whose
     pin is `accent` (DepthWedge, Seismogram) keeps the quiet half quiet, and
     only the accent half answers to `--mc-active-stroke`. */
  :where(.mc-root [data-mc-active]) {
    stroke: var(--mc-active-stroke, var(--mc-accent));
  }
  :where(.mc-root :is(rect, circle, ellipse, polygon)[data-mc-active]) {
    fill: var(--mc-active-fill, var(--mc-on-fill));
    fill-opacity: var(--mc-active-fill-opacity, 0.2);
  }
  /* "dim the rest" — the third shape a host asks for, and the one no consumer
     can write from outside, because only the chart knows which mark is active.
     `:has()` reads the overlay's own presence, so this costs no JS and no
     attribute on the wrapper. The overlay and the `data-mc-ui` response marks
     stay at full strength; the default of 1 leaves the rule inert until a host
     opts in. Pair it with `--mc-active-fill: var(--mc-accent)` +
     `--mc-active-fill-opacity: 1` to repaint the picked unit solid over its own
     dimmed self — that combination is the whole "lift one, dim the rest"
     treatment, in two declarations on the host.

     `:not([opacity])` is load-bearing, not tidiness. A CSS declaration beats a
     presentation attribute, so without it this rule would flatten a mark that
     encodes something IN its opacity the moment anything was picked —
     EventRaster dims a lane that way, and every dimmed lane would have snapped
     to full strength under the pointer. A mark that spells its own opacity out
     keeps it and opts out of the host's dim; a mark that does not is free to
     take one. */
  :where(
    .mc-root:has([data-mc-active])
      :is([data-mc-ink], [data-mc-cat]):not(
        [data-mc-active],
        [data-mc-ui],
        [data-mc-ui] *,
        [opacity]
      )
  ) {
    opacity: var(--mc-rest-opacity, 1);
  }
  :where(.mc-root [data-mc-ink="muted"]) {
    fill: none;
    stroke: var(--mc-neutral);
  }
  /* direct value labels — quieter than data ink, never the loudest mark */
  :where(.mc-root text[data-mc-ink="label"]) {
    fill: var(--mc-neutral);
    stroke: none;
  }
  /* filled marks (min/max endpoints) — solid data ink, no stroke */
  :where(.mc-root [data-mc-ink="point"]) {
    fill: var(--mc-stroke);
    stroke: none;
  }
  /* solid bars — neutral fill; valence variants encode sign (redundant with
     position, never color-alone) */
  :where(.mc-root [data-mc-ink="bar"]) {
    fill: var(--mc-stroke);
    stroke: none;
  }
  :where(.mc-root [data-mc-ink="positive"]) {
    fill: var(--mc-positive);
    stroke: none;
  }
  :where(.mc-root [data-mc-ink="negative"]) {
    fill: var(--mc-negative);
    stroke: none;
  }
  /* valence on stroked marks — AFTER the fill rules so cascade wins under
     `:where()` (zero specificity). Bare `path` is opt-in via [fill="none"] so
     filled wedges (DepthWedge, NetFlow) keep their fill. */
  :where(.mc-root :is(line, polyline)[data-mc-ink="positive"]) {
    fill: none;
    stroke: var(--mc-positive);
  }
  :where(.mc-root :is(line, polyline)[data-mc-ink="negative"]) {
    fill: none;
    stroke: var(--mc-negative);
  }
  :where(.mc-root path[data-mc-ink="positive"][fill="none"]) {
    stroke: var(--mc-positive);
  }
  :where(.mc-root path[data-mc-ink="negative"][fill="none"]) {
    stroke: var(--mc-negative);
  }
  /* filled no-valence marks (flat trend glyph, off states) */
  :where(.mc-root [data-mc-ink="neutral"]) {
    fill: var(--mc-neutral);
    stroke: none;
  }
  /* normal-range band + area fill — real data, lowest z, never decoration */
  :where(.mc-root [data-mc-ink="band"]) {
    fill: var(--mc-band);
    stroke: none;
  }
  :where(.mc-root [data-mc-ink="fill"]) {
    fill: var(--mc-stroke);
    fill-opacity: 0.12;
    stroke: none;
  }
  /* intensity cell (ActivityGrid/HeatCell) — color IS the variable; opacity per
     discrete level set inline. Paired with the numeric summary for a11y. */
  :where(.mc-root [data-mc-ink="cell"]) {
    fill: var(--mc-accent);
    stroke: none;
  }
  /* calibrated VALUE cells (HeatCell/HeatStrip): mix accent into the band per
     discrete step — the unitless --mc-cell-mix (0–100) is set inline by the
     chart. A mix ramp stays distinct on both light and dark surfaces where an
     opacity-only ramp collapses once --mc-accent is already dark. The fill
     lives HERE (not inline) so the forced-colors mapping below can override. */
  :where(.mc-root [data-mc-cell-mix]) {
    fill: color-mix(
      in oklab,
      var(--mc-cell-color, var(--mc-accent)) calc(var(--mc-cell-mix, 100) * 1%),
      var(--mc-band)
    );
  }
  /* ForecastCone uncertainty bands. Same move as the cell ramp above, for the
     same reason: the paint is dynamic (series accent, or the `color` prop), so
     the CHART sets a variable and the fill lives here. It used to set `fill`
     and `fill-opacity` inline under a `mc-cone-band` class that no rule ever
     matched, which put the chart's primary encoding out of reach of both the
     theming contract and the forced-colors mapping below — a 13%-opacity brand
     accent, preserved verbatim by `forced-color-adjust: none`, is not a visible
     cone in High Contrast Mode. */
  :where(.mc-root [data-mc-cone]) {
    fill: var(--mc-cone-color, var(--mc-accent));
    fill-opacity: var(--mc-cone-opacity, 0.13);
    stroke: none;
  }
  /* IconArray empty unit + CoverageStrip gap — a "measured nothing here" slot,
     never a void: faint band fill + hairline neutral outline. Static, so the
     color lives here (was inline) to earn a forced-colors mapping below. The
     FILLED unit stays inline: its fill is dynamic (accent/positive/negative by
     `positive`), so it can't move to a static ink-role rule. */
  :where(.mc-root [data-mc-ink="unit-off"]) {
    fill: var(--mc-band);
    stroke: var(--mc-neutral);
    stroke-opacity: 0.4;
    stroke-width: calc(var(--mc-sw) / 3);
  }
  :where(.mc-root [data-mc-ink="gap"]) {
    fill: var(--mc-band);
    stroke: var(--mc-neutral);
    stroke-opacity: 0.35;
    stroke-width: calc(var(--mc-sw) / 3);
  }
  /* Ghost = low-precision context behind the primary mark (RateVolume volume
     bars, QuadrantDot peer dots, CyclePlot slot lines, ChangePoint regime means,
     EnsembleGhosts member paths). ELEMENT-SPLIT: filled marks (bar/dot) take a
     faint fill; stroked marks (line/path) take a faint STROKE — a single role
     with a plain `fill: neutral` would fill an open polyline into a wedge and
     kill its stroke. Neutral lives here (not inline) to earn forced-colors. */
  :where(.mc-root :is(rect, circle, ellipse, polygon)[data-mc-ink="ghost"]) {
    fill: var(--mc-neutral);
    fill-opacity: 0.18;
    stroke: none;
  }
  :where(.mc-root :is(path, line, polyline)[data-mc-ink="ghost"]) {
    fill: none;
    stroke: var(--mc-neutral);
    stroke-opacity: 0.5;
  }
  /* QuadrantDot quadrant tint — a whisper of accent behind the focal's cell.
     Decorative: membership is carried by dot position + summary, so it drops out
     entirely under forced-colors (mapping below). */
  :where(.mc-root [data-mc-ink="region"]) {
    fill: var(--mc-accent);
    fill-opacity: 0.08;
    stroke: none;
  }
  /* PercentileLadder tail flag — the emphasised accent tick/dot. Element-split:
     the line strokes, the dot fills. `color` prop still overrides inline. */
  :where(.mc-root line[data-mc-ink="flag"]) {
    stroke: var(--mc-accent);
  }
  :where(.mc-root circle[data-mc-ink="flag"]) {
    fill: var(--mc-accent);
  }

  /* categorical fill roles — the --mc-cat-N palette as roles, so segment charts
     emit one short attribute instead of an inline var() string per mark. */
  :where(.mc-root [data-mc-cat="1"]) {
    fill: var(--mc-cat-1);
    stroke: none;
  }
  :where(.mc-root [data-mc-cat="2"]) {
    fill: var(--mc-cat-2);
    stroke: none;
  }
  :where(.mc-root [data-mc-cat="3"]) {
    fill: var(--mc-cat-3);
    stroke: none;
  }
  :where(.mc-root [data-mc-cat="4"]) {
    fill: var(--mc-cat-4);
    stroke: none;
  }
  :where(.mc-root [data-mc-cat="5"]) {
    fill: var(--mc-cat-5);
    stroke: none;
  }
  :where(.mc-root [data-mc-cat="6"]) {
    fill: var(--mc-cat-6);
    stroke: none;
  }

  /* TraceFold + PartitionStrip — dense span/segment strips. Shared presentation
     lives here (not per-mark attributes): these charts render 20–40 rects and
     the attribute count is their SSR hot path. Label ink over saturated fills
     = ON_FILL_INK (core/color.ts) — the one sanctioned on-fill literal. */
  :where(.mc-trace, .mc-partition) :where(rect) {
    shape-rendering: crispEdges;
    rx: 0.5;
  }

  /* A mark thinner than one viewBox unit gets its anti-aliasing back.
     `crispEdges` snaps every edge to the device pixel grid, so a rect whose
     extent rounds to zero device pixels paints NOTHING — and word-sized charts
     render at ~1 unit = 1 px, where "sub-unit" and "sub-pixel" are the same
     thing. Measured in Chromium at 1u = 1px, a 30x0.5 rect flush to the box
     bottom: `crispEdges` 0 ink, `auto` 7.1 ink, against 0 for a true zero.
     Several charts floor a magnitude at 0.5 units precisely so a tiny-but-real
     value stays visible (sparkbar/geometry.ts:201, funnel, event-timeline,
     streak-spark, net-flow, rate-volume) — the floor and the hint cancelled
     out, and a bin holding 4 events painted exactly what a bin holding 0
     painted. That is a lie factor above 1, so it is a bug, not a nicety.

     Sub-unit is the only safe trigger: below 1 unit whether a mark survives the
     snap depends on where its edges land on the grid, which nothing server-side
     can know. At and above 1 unit the mark always paints, so it keeps the crisp
     hint. A true zero is untouched — `height="0"` does not start with "0." —
     and it must stay untouched: zero and no-data part company deliberately
     (a null emits no rect at all).

     This is the last word on `shape-rendering` in the layer, so it also relaxes
     the TraceFold/PartitionStrip rule above for a sub-unit segment. Ordering,
     not specificity — both selectors are `:where()`, so keep this one last.
     Guarded by src/test/sub-pixel-ink.browser.test.tsx. */
  :where(.mc-root rect[width^="0."], .mc-root rect[height^="0."]) {
    shape-rendering: auto;
  }
  /* anchor/baseline stay SVG attributes on the marks — the craft gate computes
     text extents from raw attributes; only paint moves here.
     `--mc-on-fill` rather than the literal it used to repeat: the token gained a
     dark twin (see the tokens layer) precisely because these labels were the
     charts that needed it, and a rule that spells the value out cannot follow. */
  :where(.mc-trace, .mc-partition) :where(text) {
    font-weight: 600;
    fill: var(--mc-on-fill);
  }
  /* A label on a CATEGORICAL fill takes that fill's OWN ink.
     `--mc-on-cat-N` is generated per palette by scripts/gen-on-cat-ink.mjs,
     which picks whichever of the two inks has more contrast on that exact hex
     and fails the build if neither clears 4.5:1.

     This replaces a single `--mc-on-cat` plus a hand-written cat-4 exception and
     two dark-mode undo rules. That model could not be made correct: measured
     across the six accent palettes and three achromatic presets, 30 of 108
     categorical fills need the LIGHT ink, and they sit in the same scope as cats
     that need the DARK one — `print`'s cat-1 (#14507a) wants light at 8.0:1
     while the default cat-1 (#d2982f) wants dark. One token per palette cannot
     satisfy both, which is why these labels measured 3.76:1 on the live site.

     A label lands on a rect and is its next sibling (both charts emit
     `[rect, text]` per segment), so the fill it sits on is exactly what the
     selector can name. The `--mc-on-cat` fallback keeps the achromatic presets
     working: they derive their cats with `color-mix`, so there is no hex for the
     generator to measure and they keep the single token. */
  :where(.mc-partition, .mc-segbar) :where(text) {
    fill: var(--mc-on-cat);
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="1"] + text) {
    fill: var(--mc-on-cat-1, var(--mc-on-cat));
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="2"] + text) {
    fill: var(--mc-on-cat-2, var(--mc-on-cat));
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="3"] + text) {
    fill: var(--mc-on-cat-3, var(--mc-on-cat));
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="4"] + text) {
    fill: var(--mc-on-cat-4, var(--mc-on-cat));
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="5"] + text) {
    fill: var(--mc-on-cat-5, var(--mc-on-cat));
  }
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-cat="6"] + text) {
    fill: var(--mc-on-cat-6, var(--mc-on-cat));
  }
  /* An emphasis segment paints `--mc-accent`, a deep semantic fill, so it keeps
     the semantic on-fill ink rather than a categorical one. */
  :where(.mc-partition, .mc-segbar) :where(rect[data-mc-ink="accent"] + text) {
    fill: var(--mc-on-fill);
  }
  /* SegmentedBar's rollup sits on the neutral fill, not a cat. */
  :where(.mc-segbar) :where(rect[data-mc-ink="neutral"] + text) {
    fill: var(--mc-on-cat);
  }
  /* A label on a non-critical TraceFold span steps back to the ORDINARY label
     ink instead of the bold on-fill ink — its own token, not the borrowed
     `--mc-surface` these rules used to reach for. That borrow painted the label
     in the page colour, which on a 0.62-opacity neutral span is 1.4:1: not
     receding, disappearing. The stroke ink reads 8.7:1 light / 4.6:1 dark on the
     same span, and the weight drop (600 → the base label weight) is what carries
     "this one is context". */
  :where(.mc-trace) :where(text[data-mc-dim]) {
    fill: var(--mc-on-fill-dim);
    font-weight: var(--mc-label-weight);
  }

  /* @mc-chart sparkline */
  /* Interactive sparkline crosshair — a dashed guide reads as "measuring" the
     focused point rather than just crossing it. Scoped to the interactive
     wrapper (styled here so the client entry stays under its size budget). */
  :where(.mc-spark-interactive [data-mc-ink="muted"]) {
    stroke-dasharray: 1.5 2;
  }
  /* @mc-chart-end */

  /* @mc-chart token-confidence */
  /* TokenConfidence — the text IS the chart. Three discrete tiers
     as typographic underlines: tier = color AND thickness AND stroke style, so
     it is never color-alone. Confident tokens get NO mark (reading stays
     primary). The host is inline HTML, not SVG. */
  :where(.mc-token-confidence) {
    font: var(--mc-font);
    line-height: 1.7;
    position: relative;
  }
  :where(.mc-token-confidence .mc-tc-unsure) {
    text-decoration: underline solid var(--mc-cat-1);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  :where(.mc-token-confidence .mc-tc-guessing) {
    text-decoration: underline dotted var(--mc-negative);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  /* show="all": a hairline under confident tokens for audit completeness */
  :where(.mc-token-confidence .mc-tc-seen) {
    text-decoration: underline solid var(--mc-neutral);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    opacity: 0.55;
  }
  :where(.mc-token-confidence .mc-tc-legend) {
    color: var(--mc-neutral);
    font-size: 0.85em;
    white-space: nowrap;
  }
  :where(.mc-tc-live :is(.mc-tc-unsure, .mc-tc-guessing, .mc-tc-seen)) {
    cursor: default;
    border-radius: 2px;
  }
  :where(.mc-tc-live :is(.mc-tc-unsure, .mc-tc-guessing, .mc-tc-seen):focus-visible) {
    outline: 2px solid var(--mc-accent);
    outline-offset: 1px;
  }
  /* @mc-chart-end */

  /* Interactive hosts scrub on pointer drag. Claim the HORIZONTAL gesture so a
     touch drag reveals the readout chip the same way mouse hover does — without
     this, the page steals the gesture and labels never appear on phones. But
     keep vertical panning (and pinch-zoom) with the browser: these are
     word-sized marks inside scrolling pages, and `touch-action: none` would
     trap the whole page scroll under every chart a finger lands on. A vertical
     drag pans the page and fires pointercancel; the picker clears on it. */
  :where([data-mc-host]) {
    touch-action: pan-y pinch-zoom;
    /* Shrink-wrap the mark — a flex/grid parent would otherwise stretch the
       wrapper, and the SVG fills it. Here rather than in the wrapper's inline
       style because an inline width BEATS a consumer class: `className="w-full
       max-w-md"` sized the static entry to its container while the interactive
       twin stayed shrink-wrapped, so one component drew two different charts.
       Zero specificity, so any consumer rule still wins. */
    width: fit-content;
    max-width: 100%;
  }

  /* MinimapStrip is a range slider, not an image: it drags a window along the
     series, so it advertises a horizontal-resize cursor and opts out of the
     browser's touch panning. In CSS rather than an inline style so the client
     can route className/style through the shared `wrap` helper like every
     other interactive entry. */
  :where(.mc-minimap-live) {
    cursor: ew-resize;
    touch-action: none;
  }

  /* Interactive readout — the value revealed on hover/focus. A small chip on an
     opaque surface so the figure stays legible over any mark or content it
     floats above. Zero-specificity, so a component's inline position wins. */
  :where(.mc-spark-readout) {
    /* The chip carries `popover`, so the UA sheet for `[popover]` applies to it:
       `position: fixed; inset: 0; margin: auto; border: solid; padding: .25em;
       overflow: auto`. Every one of those has to be answered HERE, in the base
       rule, not only in the anchored block below — a browser with popover but
       without anchor positioning gets this rule and the UA's, nothing else.
       Measured before this reset: a 3px `currentColor` border on every chip,
       which swallowed the 1px `--mc-surface-edge` hairline meant to define it. */
    border: 0;
    /* The UA hides an un-opened popover (`[popover]:not(:popover-open)`), and
       the chip is only opened where anchor positioning exists. Without this it
       is invisible everywhere else — including in SERVER-RENDERED HTML, where a
       pinned chip ships `display: none` until hydration runs the ref. The rows
       form re-declares `display: grid` below and still wins. */
    display: block;
    position: absolute;
    inset: auto auto 100% 50%;
    /* Centred on the chart, not on the datum. The per-datum `left` these chips
       used to carry inline is what made them unclampable (see shared/
       interactive.ts) — and on word-sized marks the two placements differ by
       less than the chip's own width anyway. The crosshair keeps pointing at
       the datum. */
    transform: translateX(-50%);
    margin: 0 0 0.3em 0;
    padding: 0.05em 0.4em;
    border-radius: 0.4em;
    background: var(--mc-surface);
    color: var(--mc-surface-ink);
    box-shadow:
      0 0 0 1px var(--mc-surface-edge),
      0 2px 6px -2px var(--mc-surface-shadow);
    font: var(--mc-label-size, 0.75em) var(--mc-font, inherit);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    /* The chip is nowrap HTML floating over an SVG, so its width is its text's
       width — unbounded by the chart. Measured before this: a phase-trace
       readout 217px wide against a 44px chart, and stacked-area's grew with the
       series count, so it had no bound at all.

       The cap is `max(100%, 14em)`, not `100%`. This is a tooltip: overhanging
       its trigger is normal and expected, and these charts are word-sized — a
       40px-wide phase-trace clamped to its own width could not render even
       "30, 55" without an ellipsis, so `100%` would trade a runaway chip for
       silent truncation on every small chart. 14em (~28 characters at the chip's
       own size) bounds the runaway while leaving a terse readout room to render
       in full. Content is still trimmed per chart — readout-containment.browser
       .test.tsx fails any readout that ellipsizes at its chart's default size. */
    box-sizing: border-box;
    max-width: max(100%, 14em);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Escape the page. `position: absolute` above is clipped by ANY ancestor with
     `overflow` other than `visible`, and `bottom: 100%` opens upward
     unconditionally — so a chart in a scrolling rail showed a sliver of its
     chip, and a chart near the top of the viewport put the chip off-screen.
     Measured in a consumer app: seven nested clipping boxes above one strip.

     The upgrade is CSS anchor positioning, which needs no measurement, no
     portal and no scroll listener — the three things this package spends no
     bytes on:

       - `position: fixed` takes the chip out of every ancestor's overflow, and
         the top layer (`popover`, opened by the client entry) takes it out of
         the one case fixed positioning cannot escape: an ancestor with a
         `transform`/`filter`/`contain`, which becomes the containing block.
       - `anchor-scope` is what makes ONE anchor name safe for a whole page.
         Without it the name resolves to the last matching element in the
         document, so with two charts on a page both chips flew to the second
         one — measured, and the reason this is not just `anchor-name`. Scoping
         the name to the host's own subtree binds each chip to its own chart,
         and costs no per-instance id (a `useId` would be ~100 B x 100 entries).
       - `justify-self: anchor-center` inside a viewport-wide inset band centres
         the chip on its chart AND clamps it to the band, which is the
         "touch the right edge, expand to the left" behaviour a tooltip owes a
         reader. The engine does the clamping; nothing measures a rect.
       - `position-try-fallbacks` opens the chip downward when there is no room
         above it, via the `--mc-readout-below` block at the end of this rule.
       - `position-visibility: anchors-visible` hides the chip once its chart
         scrolls out of the rail, instead of leaving it floating in the top
         layer over unrelated UI.

     The `max(100%, 14em)` cap above is deliberately NOT restated here. It was
     written when the chip had no bound at all ("a phase-trace readout 217px
     wide against a 44px chart"); the band now bounds it — a chip physically
     cannot leave the viewport, which is the bound that was missing. Restating
     it as `max(anchor-size(width), 14em)` measured 4px TIGHTER than the rule it
     replaced and ellipsized trace-fold's readout at its default size, which
     readout-containment.browser.test.tsx caught. `100%` still resolves — now
     against the band — so the declaration above stays live and harmless.

     Firefox has no anchor positioning yet, so it keeps the rule above — today's
     behaviour exactly, not a regression. */
  @supports (anchor-name: --mc) and (position-area: block-start) {
    :where([data-mc-host]) {
      anchor-name: --mc-chart;
      anchor-scope: --mc-chart;
    }
    :where(.mc-spark-readout) {
      position: fixed;
      position-anchor: --mc-chart;
      /* the fallback rule's centring transform would shift the anchored box
         half its own width off the mark — alignment does the centring here */
      transform: none;
      /* band = the viewport minus a hair, so a clamped chip still shows its
         shadow rather than bleeding off the edge */
      inset: auto 2px anchor(top) 2px;
      /* `anchor-center` makes this an ALIGNED box, so it is already
         shrink-to-fit inside the band — it must not also be given an
         `inline-size: max-content`. Under the `box-sizing: border-box` above,
         that sizes the BORDER box to the content's max-content width and then
         subtracts the padding from the content area, so the text it was meant
         to fit ellipsizes by exactly the padding (measured: 4px on trace-fold,
         caught by readout-containment.browser.test.tsx). */
      justify-self: anchor-center;
      /* Restate the runaway cap. The `max(100%, 14em)` above now resolves its
         `100%` against the viewport-wide band, so it bounds the chip to the
         SCREEN — 736px measured on an 80px chart, 3x looser than the bound it
         was written to be. `anchor-size(width)` names the chart itself, which
         is what `100%` used to mean here. (The 4px ellipsis regression an
         earlier revision blamed on this cap came from `inline-size:
         max-content`, which is gone.) */
      max-inline-size: max(anchor-size(width), 14em);
      margin: 0 0 0.3em 0;
      /* NOT `flip-block`: the built-in flip mirrors the insets but carries the
         0.3em stand-off with them, so the chip lands ON the mark it names. The
         custom block below flips and re-hangs the margin on the other side.
         This used to be two declarations in two equal-specificity rules, where
         the later simply won and the `flip-block` was dead. */
      position-try-fallbacks: --mc-readout-below;
      position-visibility: anchors-visible;
    }
    @position-try --mc-readout-below {
      inset: anchor(bottom) 2px auto 2px;
      margin: 0.3em 0 0 0;
    }
  }

  /* Row form — for a datum that IS a composition (StackedArea's bands), where a
     readout naming one member answers a different question than the chart asks.
     Listing members on the single nowrap line above is what made the chip grow
     without bound; as rows, the chip's width is its widest ROW instead of the
     sum of its members, and the name column is capped so a long label
     ellipsizes inside the chip rather than widening it. Worst case is
     0.5em swatch + 7em name + gaps + share ≈ 11em, inside the 14em ceiling for
     any label and any series count. */
  :where(.mc-readout-rows) {
    display: grid;
    /* All three columns size to content. NOT `minmax(0, auto)` on the name: a
       zero minimum lets the grid's min-content collapse, and because the chip is
       absolutely positioned its shrink-to-fit width then follows the space left
       of the crosshair — so hovering the right half of a 130px chart squeezed
       "Mobile" down to "Mo…". The 7em cap below is the only thing allowed to
       truncate a name, and it does so on the LABEL's length, not the pointer's
       position. */
    grid-template-columns: auto auto auto;
    /* …and the box itself sizes to its CONTENT, not to the room left beside the
       crosshair. An absolutely-positioned box is shrink-to-fit, and a grid item
       with `overflow: hidden` (the ellipsis cell below) contributes a zero
       automatic minimum — so without this the chip collapsed toward the right
       edge of the chart and truncated names that fit perfectly well. `max-width`
       above still bounds it. */
    inline-size: max-content;
    align-items: center;
    gap: 0 0.4em;
    text-align: start;
  }
  :where(.mc-readout-rows > .mc-readout-key) {
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 0.15em;
    /* The chip is HTML outside `.mc-root`, so the `[data-mc-cat]` role rules
       (which paint `fill`, for SVG) can't reach it — the swatch carries its
       colour as an inline `background` instead, and keeps `data-mc-cat` for
       parity with the mark it mirrors. Mirroring a mark that keeps its palette
       under forced-colors (`.mc-root` sets `forced-color-adjust: none`), it
       keeps its own. The row is NAMED either way — the swatch never carries
       meaning alone. */
    forced-color-adjust: none;
  }
  :where(.mc-readout-rows > .mc-readout-name) {
    max-inline-size: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :where(.mc-readout-rows > .mc-readout-val) {
    justify-self: end;
  }
}

@layer microcharts.motion {
  /* Readout chip enter — 140ms strong ease-out rise (opacity + independent
     translate/scale, composing with the chip's inline centering transform).
     @starting-style is progressive: older engines show the chip instantly.
     Exit is unmount (instant) — deliberate enter/exit asymmetry. */
  :where(.mc-spark-readout) {
    translate: 0 0;
    scale: 1;
    transition:
      opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
      translate 140ms cubic-bezier(0.23, 1, 0.32, 1),
      scale 140ms cubic-bezier(0.23, 1, 0.32, 1);
    @starting-style {
      opacity: 0;
      translate: 0 2px;
      scale: 0.97;
    }
  }

  /* Scrub response — the focus mark TRAVELS to the datum it names instead of
     being repainted at the new one. Across a scrub the eye keeps hold of a mark
     that moves and has to re-find one that teleports, which is the whole reason
     this reads as a response rather than a redraw.

     `transform` is the ONLY transitioned property, and that is the whole policy
     — not an optimisation. A response mark travels if, and only if, it is
     positioned by a transform. Which mark deserves to travel is a real
     distinction:

       - A crosshair tracks a CONTINUUM. Mid-glide it sits between two samples,
         which is exactly where the pointer is, so it tells the truth the whole
         way across and may travel. These are already built on a transform,
         because `x1`/`y1`/`x2`/`y2` have no CSS geometry property in any engine
         and a line placed by them cannot animate at all.
       - A focus or selection RING names a DISCRETE UNIT — "this bar", "this
         cell". Mid-glide it encloses no unit, so it names nothing while the
         screen reader has already announced the new one. Rings are placed by
         `x`/`y`/`cx`/`cy`/`d`, none of which are listed here, so they snap.
         `focus-ring-symmetry.browser.test.tsx` exists because a ring once
         inherited a geometry transition and lerped across a whole beam,
         off-centre from the unit it named for the length of it.

     Keying on the positioning method rather than on an attribute is what makes
     this safe to apply library-wide: `data-mc-w` looked like a ring marker but
     is really a stroke-width role that crosshairs carry too, so excluding it
     would have stopped the very marks that should move. Transform also dodges
     an engine floor — `x`/`cx`/`cy` only became animatable CSS properties in
     Safari 17.4 and Firefox 128, while this package supports Safari 16.4+, so a
     geometry-driven glide would run on Chrome and snap on a supported Safari.

     120 ms is short on purpose. It has to finish inside the gap between two
     pointer samples, or the mark visibly trails the cursor and the reading lags
     the reader. The readout TEXT is never transitioned — the number swaps
     instantly, so the value on screen is never mid-way between two data
     points. */
  /* Response marks are built as an HTML string by the client entries, so every
     `vector-effect` they spell costs bytes in a subpath measured standalone.
     Pinning it here paints the identical stroke — these are overlay marks, not
     the `data-mc-ink="data"` marks `theming-contract.test.ts` audits, so the
     attribute was never the contract for them. */
  :where(.mc-root [data-mc-ui] :is(circle, line, path, rect)) {
    vector-effect: non-scaling-stroke;
  }
  :where(.mc-root [data-mc-ui], .mc-root [data-mc-ui] :is(g, rect, circle, line)) {
    transition-property: transform;
    transition-duration: 120ms;
    transition-timing-function: var(--mc-easing);
  }

  @keyframes mc-pulse {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(1.16);
    }
    100% {
      transform: scale(1);
    }
  }
  /* one-shot emphasis when an interactive Delta's value changes */
  :where(.mc-delta-live[data-pulse="1"] .mc-delta-num) {
    display: inline-block;
    animation: mc-pulse var(--mc-duration) var(--mc-easing);
  }
  /* mount entrance for the HTML number — the `pop` engine animates only the
     glyph svg, so the number gets its own lift+scale to arrive in step. */
  @keyframes mc-delta-num-in {
    from {
      opacity: 0;
      transform: translateY(2px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  :where(.mc-delta-live[data-enter="1"] .mc-delta-num) {
    display: inline-block;
    animation: mc-delta-num-in 200ms var(--mc-easing) backwards;
  }
  /* one-shot glyph pulse when an interactive TrendArrow's direction changes */
  :where(.mc-trend-live[data-pulse="1"] .mc-root) {
    transform-origin: center;
    animation: mc-pulse var(--mc-duration) var(--mc-easing);
  }

  /* Hourglass sand scales from the floor so the value cross-fade reads as
     draining (top settles down) / filling (bottom grows up) — see client.tsx.
     Declaring the box here keeps the interactive JS to a single animate call. */
  :where(.mc-hourglass-sand) {
    transform-box: fill-box;
    transform-origin: center bottom;
  }

  /* StatusDot "live now" halo — expands + fades from the mark. This is a state
     cue (monitoring), not decoration; it dies under reduced-motion below.
     Documented exemption from "no looping animation": the loop IS the reading.
     A monitoring dot that pulses says "this is live"; the same dot holding still
     says the feed stopped, which is the state a reader most needs to see. It is
     opt-in per instance (`pulse`, default off) and state-independent.

     The end scale is pinned by CONTAINMENT, not taste. The halo is r = 3 at the
     centre of an 8-unit box, so a scale of 4/3 lands its edge exactly on the
     viewBox and anything more paints into the page — `.mc-root` is
     `overflow: visible`, so there is nothing to clip it. The old 1.9 reached
     r = 5.7 and spilled 1.7 units on every side for the whole animation. The
     opacity fade carries the motion; the travel only has to start it. */
  @keyframes mc-status-pulse {
    0% {
      transform: scale(1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1.333);
      opacity: 0;
    }
  }
  :where(.mc-status .mc-status-halo) {
    transform-box: fill-box;
    transform-origin: center;
    animation: mc-status-pulse 1.8s var(--mc-easing) infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    /* static dot, no halo artifact left behind */
    :where(.mc-status .mc-status-halo) {
      display: none;
    }
  }

  /* <Marker celebrate> — one-shot burst from the marker to each particle's
     rest position. Under reduced-motion the animation is stripped (base rule
     above) and the particles sit still as a quiet starburst glyph. */
  @keyframes mc-burst {
    from {
      transform: var(--mc-burst-from);
      opacity: 0;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }
  :where(.mc-root .mc-celebrate) {
    transform-box: fill-box;
    transform-origin: center;
    animation: mc-burst 600ms var(--mc-easing) backwards;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.mc-root *),
    :where(.mc-root),
    :where(.mc-delta-live .mc-delta-num),
    :where(.mc-spark-readout) {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-contrast: more) {
    :where(.mc-root) {
      --mc-stroke-width: 2;
      --mc-band: color-mix(in oklab, var(--mc-stroke) 16%, transparent);
    }
  }

  @media (forced-colors: active) {
    :where(.mc-root) {
      forced-color-adjust: none;
    }
    /* The accent TOKEN, not just the accent role. Roughly a hundred interactive
       entries draw their focus/selection ring as a literal
       `stroke="var(--mc-accent)"` with no `data-mc-ink` — that is the house
       pattern, not a mistake in one chart — so the role mapping below never
       reached them and every focus ring kept the brand hex against the user's
       chosen Canvas (cobalt on black is about 2.5:1). Remapping the variable
       fixes all of them at once instead of editing a hundred client entries.
       Safe against `color-mix`: the one rule that mixes this token
       (`[data-mc-cell-mix]`) is itself overridden further down this block, and
       `--mc-surface-edge` already mixes `CanvasText` in the tokens layer. */
    :where(.mc-root) {
      --mc-accent: Highlight;
    }
    /* data ink → CanvasText, accent → Highlight, muted → GrayText */
    :where(.mc-root [data-mc-ink="data"]) {
      stroke: CanvasText;
    }
    :where(.mc-root [data-mc-ink="accent"]) {
      stroke: Highlight;
      fill: Highlight;
    }
    /* …and the element split, repeated. This block sits in
       `@layer microcharts.motion`, which outranks `microcharts.charts`, so the
       charts-layer split that keeps an accent LINE hollow is overridden in
       here — an open polyline gets `fill: Highlight` and paints as a solid
       wedge. The `[data-mc-ink="ghost"]` split is already repeated below for
       exactly this reason; accent was the one that was missed. The literal
       `fill="none"` safety net at the end of the block still covers marks that
       declare themselves hollow; this covers the role on its own, so a chart
       does not have to remember both. */
    :where(.mc-root :is(path, line, polyline)[data-mc-ink="accent"]) {
      fill: none;
      stroke: Highlight;
    }
    /* The interaction overlay, whatever a host themed it into. `--mc-accent` is
       already remapped above, so the DEFAULT ring would land on Highlight on its
       own — this covers the themed case: `--mc-active-stroke` is a brand hex a
       host chose against ITS palette, not the user's forced one, and an opacity
       dim is invisible here by definition (High Contrast Mode has two inks, not
       a ramp). So the treatment collapses back to the one thing that always
       reads: a system-accent outline on every picked mark. The wash needs no
       rule — every overlay keeps a literal `fill="none"`, and the blanket
       hollow-mark rule at the end of this block restores it. */
    :where(.mc-root [data-mc-active]) {
      stroke: Highlight;
    }
    :where(.mc-root) {
      --mc-rest-opacity: 1;
    }
    :where(.mc-root [data-mc-ink="muted"]) {
      stroke: GrayText;
      fill: GrayText;
    }
    :where(.mc-root [data-mc-ink="point"]),
    :where(.mc-root [data-mc-ink="bar"]) {
      fill: CanvasText;
    }
    /* win-loss / sign: keep up≠down distinguishable without color */
    :where(.mc-root [data-mc-ink="positive"]) {
      fill: CanvasText;
    }
    :where(.mc-root [data-mc-ink="negative"]) {
      fill: GrayText;
    }
    /* flat/off marks: shape already says "no direction" — quiet system ink */
    :where(.mc-root [data-mc-ink="neutral"]) {
      fill: GrayText;
    }
    /* band/fill are color-encoded surfaces — keep them, mapped to system ink */
    :where(.mc-root [data-mc-ink="band"]) {
      fill: GrayText;
    }
    :where(.mc-root [data-mc-ink="fill"]) {
      fill: CanvasText;
      fill-opacity: 0.2;
    }
    /* color-encoded cells keep their per-level opacity, mapped to system accent */
    :where(.mc-root [data-mc-ink="cell"]) {
      forced-color-adjust: none;
      fill: Highlight;
    }
    /* Uncertainty bands: system accent, and the two intervals stay ORDERED —
       the inner band has to keep reading as the denser one, or the cone stops
       saying which outcomes are likelier. The chart's own opacity var carries
       that ordering, so it is deliberately not flattened here. */
    :where(.mc-root [data-mc-cone]) {
      fill: Highlight;
      fill-opacity: calc(var(--mc-cone-opacity, 0.13) * 2.5);
    }
    /* mix-ramp cells (HeatCell/HeatStrip): same system accent; the discrete
       level survives as fill-opacity, driven by the same unitless mix var. */
    :where(.mc-root [data-mc-cell-mix]) {
      forced-color-adjust: none;
      fill: Highlight;
      fill-opacity: calc(var(--mc-cell-mix, 100) / 100);
    }
    /* empty/gap slots read as EMPTY (not filled): system background + a system
       outline, so they stay visibly distinct from filled units. (The filled
       IconArray unit keeps its inline dynamic fill under forced-color-adjust:
       none — the fill's presence vs. absence is the shape cue.) */
    :where(.mc-root [data-mc-ink="unit-off"]),
    :where(.mc-root [data-mc-ink="gap"]) {
      fill: Canvas;
      stroke: GrayText;
      stroke-opacity: 1;
    }
    /* ghost context → quiet system ink (element-split: fills fill, lines stroke) */
    :where(.mc-root :is(rect, circle, ellipse, polygon)[data-mc-ink="ghost"]) {
      fill: GrayText;
    }
    :where(.mc-root :is(path, line, polyline)[data-mc-ink="ghost"]) {
      stroke: GrayText;
    }
    /* Categorical series. `data-mc-cat` is kept on the mark for exactly two
       reasons — motion and this rule — and this rule was missing, so nine
       categorical charts sailed through High Contrast Mode painting their own
       hues (`.mc-root` sets `forced-color-adjust: none`, which PRESERVES them
       rather than mapping them). On a black forced background, `--mc-cat-4`
       (#285788) is all but invisible.

       Collapsing all six to one system ink would destroy the encoding instead —
       six segments reading identical — so the hue ramp becomes a LIGHTNESS ramp
       on the system ink, the same move `mono`/`eink` make with chroma they cannot
       show. Fill only: `[data-mc-cat]` already sets `stroke: none` in the charts
       layer, so a cat mark is always a closed shape.

       Two constraints pin the ramp's range from both ends, and they conflict. The
       LABELS that sit on these fills have to stay readable, and their only
       available ink here is a `Canvas` knockout, which needs the fill to stay
       dark — 0.62 is the floor at which knockout text still clears 4.5:1. That
       leaves too little room for six steps to separate from each other by fill
       alone, so separation is carried by a `Canvas` hairline between segments
       instead: a visible gap makes adjacent units distinct whatever their fills
       do. That is the honest trade — High Contrast Mode's contract is legibility
       against the system background, not categorical richness, and the direct
       labels are what identify a series. */
    :where(.mc-root [data-mc-cat]) {
      fill: CanvasText;
      stroke: Canvas;
      stroke-width: 0.5;
    }
    :where(.mc-root [data-mc-cat="2"]) {
      fill-opacity: 0.92;
    }
    :where(.mc-root [data-mc-cat="3"]) {
      fill-opacity: 0.85;
    }
    :where(.mc-root [data-mc-cat="4"]) {
      fill-opacity: 0.77;
    }
    :where(.mc-root [data-mc-cat="5"]) {
      fill-opacity: 0.7;
    }
    :where(.mc-root [data-mc-cat="6"]) {
      fill-opacity: 0.62;
    }
    /* Knockout labels, generalised. The two rules below already did this by
       class name; the ROLE needs it too. `text[data-mc-on-fill]` resolves to a
       literal rgba white/black, and `.mc-root` sets `forced-color-adjust: none`,
       so that literal survived verbatim — painted over marks this same block has
       just remapped to CanvasText / GrayText / Highlight, which is exactly the
       pairing the theming contract was verifying and no longer holds. A label
       sitting ON a mark takes the background colour, because every mark around
       it is now a foreground one. Covers EventTimeline spans, TimeInRange zone
       percents and HeatCell values. */
    :where(.mc-root text[data-mc-on-fill]) {
      fill: Canvas;
    }
    :where(.mc-trace, .mc-partition, .mc-segbar) :where(text) {
      fill: Canvas;
    }
    :where(.mc-trace) :where(text[data-mc-dim]) {
      fill: CanvasText;
    }
    /* quadrant tint is purely decorative → drop it entirely in high contrast */
    :where(.mc-root [data-mc-ink="region"]) {
      fill: transparent;
    }
    /* Direct value labels. This mapping was missing, and unlike a mark that
       merely loses its hue, a label that loses contrast loses its content:
       `--mc-neutral` (#8a8986) is a fixed warm gray, and `.mc-root` sets
       forced-color-adjust: none, so it PAINTED THAT GRAY against whatever
       background the user chose — 3.5:1 on a Canvas of white, under the 4.5:1
       text floor. Text takes the system foreground; the numeral is the whole
       point of the gutter it was given. */
    :where(.mc-root text[data-mc-ink="label"]) {
      fill: CanvasText;
    }
    /* tail flag keeps its emphasis, mapped to the system accent */
    :where(.mc-root line[data-mc-ink="flag"]) {
      stroke: Highlight;
    }
    :where(.mc-root circle[data-mc-ink="flag"]) {
      fill: Highlight;
    }
    :where([data-mc-host]:focus-visible, .mc-root:focus-visible) {
      outline-color: Highlight;
    }
    /* Delta: glyph shape already distinguishes direction; unify to system ink */
    :where(.mc-delta) {
      color: CanvasText;
    }
    /* StatusDot: silhouette carries state; map fills/strokes to system ink */
    :where(.mc-root [data-mc-status]) {
      fill: CanvasText;
    }
    :where(.mc-root circle[data-mc-status="ring"]),
    :where(.mc-root circle[data-mc-status="half"]) {
      fill: none;
      stroke: CanvasText;
    }
    /* LAST, and the reason the mappings above can stay one line each: a mark
       that DECLARED itself hollow stays hollow, whatever role fill it inherited.
       An ink role covers closed shapes and outlines alike, and an outline says so
       with a literal `fill="none"` attribute — the only signal CSS can read.
       Forcing a fill onto one is not a contrast adjustment, it is a change of
       meaning: `heat-strip`'s muted rect is its MISSING-DATA cell (`fill="none"`
       plus a 0.4 stroke) and it filled solid GrayText in High Contrast Mode,
       reading as a value that was never recorded. Expressed once here rather than
       as a `:not([fill="none"])` on nine fill mappings, so the role added next
       cannot forget it. (`unit-off`/`gap` still say `fill: Canvas` explicitly —
       those are FILLED with the background on purpose, an empty slot that has to
       stay visible as a slot.) */
    :where(.mc-root [fill="none"]) {
      fill: none;
    }
  }
}