/* PriFi.info: the SVG chart kit (src/charts, DESIGN.md "Charts: SVG kit and glyphs"). Every class a kit chart uses, in
   both themes (colours come only from the tokens in web/style.css and web/dark.css, so nothing here changes at night),
   for print and for forced colours. Order: 1 inks and fills · 2 the figure, the svg and its text · 3 axes · 4 marks,
   hover, focus and highlighting · 5 the primitives · 6 legend, table and tip · 7 motion · 8 narrow charts and margin
   notes · 9 print and forced colours. */

/* ---- 1. Inks (--ck-c: the ink of a mark's rules, lines and dots) and fills (ck-f-<ink>-<pattern>) ---- */
.ck-c-ink { --ck-c: var(--ink); }
.ck-c-ink-2 { --ck-c: var(--ink-2); }
.ck-c-lapis { --ck-c: var(--lapis); }
.ck-c-vermilion { --ck-c: var(--vermilion); }
.ck-c-moss { --ck-c: var(--moss); }
.ck-c-ochre { --ck-c: var(--ochre); }
.ck-c-plum { --ck-c: var(--plum); }
.ck-c-slate { --ck-c: var(--slate); }
.ck-c-up { --ck-c: var(--up); }
.ck-c-down { --ck-c: var(--down); }
.ck-c-paper { --ck-c: var(--paper); }
/* the dots and hatch lines inside the shared patterns (src/charts/defs.mjs) */
.ck-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ck-defs circle, .ck-defs rect { fill: var(--ck-c); }
/* fills: s solid, d1 d2 d3 dots fine to coarse, h hatch rising, hb hatch falling; a flat tint when a page has no defs */
.ck-f-ink-s { --ck-c: var(--ink); fill: var(--ink); }
.ck-f-ink-d1 { --ck-c: var(--ink); fill: url(#ck-ink-d1) color-mix(in srgb, var(--ink) 22%, transparent); }
.ck-f-ink-d2 { --ck-c: var(--ink); fill: url(#ck-ink-d2) color-mix(in srgb, var(--ink) 20%, transparent); }
.ck-f-ink-d3 { --ck-c: var(--ink); fill: url(#ck-ink-d3) color-mix(in srgb, var(--ink) 22%, transparent); }
.ck-f-ink-h { --ck-c: var(--ink); fill: url(#ck-ink-h) color-mix(in srgb, var(--ink) 36%, transparent); }
.ck-f-ink-hb { --ck-c: var(--ink); fill: url(#ck-ink-hb) color-mix(in srgb, var(--ink) 36%, transparent); }
.ck-f-ink-2-s { --ck-c: var(--ink-2); fill: var(--ink-2); }
.ck-f-ink-2-d1 { --ck-c: var(--ink-2); fill: url(#ck-ink-2-d1) color-mix(in srgb, var(--ink-2) 22%, transparent); }
.ck-f-ink-2-d2 { --ck-c: var(--ink-2); fill: url(#ck-ink-2-d2) color-mix(in srgb, var(--ink-2) 20%, transparent); }
.ck-f-ink-2-d3 { --ck-c: var(--ink-2); fill: url(#ck-ink-2-d3) color-mix(in srgb, var(--ink-2) 22%, transparent); }
.ck-f-ink-2-h { --ck-c: var(--ink-2); fill: url(#ck-ink-2-h) color-mix(in srgb, var(--ink-2) 36%, transparent); }
.ck-f-ink-2-hb { --ck-c: var(--ink-2); fill: url(#ck-ink-2-hb) color-mix(in srgb, var(--ink-2) 36%, transparent); }
.ck-f-lapis-s { --ck-c: var(--lapis); fill: var(--lapis); }
.ck-f-lapis-d1 { --ck-c: var(--lapis); fill: url(#ck-lapis-d1) color-mix(in srgb, var(--lapis) 22%, transparent); }
.ck-f-lapis-d2 { --ck-c: var(--lapis); fill: url(#ck-lapis-d2) color-mix(in srgb, var(--lapis) 20%, transparent); }
.ck-f-lapis-d3 { --ck-c: var(--lapis); fill: url(#ck-lapis-d3) color-mix(in srgb, var(--lapis) 22%, transparent); }
.ck-f-lapis-h { --ck-c: var(--lapis); fill: url(#ck-lapis-h) color-mix(in srgb, var(--lapis) 36%, transparent); }
.ck-f-lapis-hb { --ck-c: var(--lapis); fill: url(#ck-lapis-hb) color-mix(in srgb, var(--lapis) 36%, transparent); }
.ck-f-vermilion-s { --ck-c: var(--vermilion); fill: var(--vermilion); }
.ck-f-vermilion-d1 { --ck-c: var(--vermilion); fill: url(#ck-vermilion-d1) color-mix(in srgb, var(--vermilion) 22%, transparent); }
.ck-f-vermilion-d2 { --ck-c: var(--vermilion); fill: url(#ck-vermilion-d2) color-mix(in srgb, var(--vermilion) 20%, transparent); }
.ck-f-vermilion-d3 { --ck-c: var(--vermilion); fill: url(#ck-vermilion-d3) color-mix(in srgb, var(--vermilion) 22%, transparent); }
.ck-f-vermilion-h { --ck-c: var(--vermilion); fill: url(#ck-vermilion-h) color-mix(in srgb, var(--vermilion) 36%, transparent); }
.ck-f-vermilion-hb { --ck-c: var(--vermilion); fill: url(#ck-vermilion-hb) color-mix(in srgb, var(--vermilion) 36%, transparent); }
.ck-f-moss-s { --ck-c: var(--moss); fill: var(--moss); }
.ck-f-moss-d1 { --ck-c: var(--moss); fill: url(#ck-moss-d1) color-mix(in srgb, var(--moss) 22%, transparent); }
.ck-f-moss-d2 { --ck-c: var(--moss); fill: url(#ck-moss-d2) color-mix(in srgb, var(--moss) 20%, transparent); }
.ck-f-moss-d3 { --ck-c: var(--moss); fill: url(#ck-moss-d3) color-mix(in srgb, var(--moss) 22%, transparent); }
.ck-f-moss-h { --ck-c: var(--moss); fill: url(#ck-moss-h) color-mix(in srgb, var(--moss) 36%, transparent); }
.ck-f-moss-hb { --ck-c: var(--moss); fill: url(#ck-moss-hb) color-mix(in srgb, var(--moss) 36%, transparent); }
.ck-f-ochre-s { --ck-c: var(--ochre); fill: var(--ochre); }
.ck-f-ochre-d1 { --ck-c: var(--ochre); fill: url(#ck-ochre-d1) color-mix(in srgb, var(--ochre) 22%, transparent); }
.ck-f-ochre-d2 { --ck-c: var(--ochre); fill: url(#ck-ochre-d2) color-mix(in srgb, var(--ochre) 20%, transparent); }
.ck-f-ochre-d3 { --ck-c: var(--ochre); fill: url(#ck-ochre-d3) color-mix(in srgb, var(--ochre) 22%, transparent); }
.ck-f-ochre-h { --ck-c: var(--ochre); fill: url(#ck-ochre-h) color-mix(in srgb, var(--ochre) 36%, transparent); }
.ck-f-ochre-hb { --ck-c: var(--ochre); fill: url(#ck-ochre-hb) color-mix(in srgb, var(--ochre) 36%, transparent); }
.ck-f-plum-s { --ck-c: var(--plum); fill: var(--plum); }
.ck-f-plum-d1 { --ck-c: var(--plum); fill: url(#ck-plum-d1) color-mix(in srgb, var(--plum) 22%, transparent); }
.ck-f-plum-d2 { --ck-c: var(--plum); fill: url(#ck-plum-d2) color-mix(in srgb, var(--plum) 20%, transparent); }
.ck-f-plum-d3 { --ck-c: var(--plum); fill: url(#ck-plum-d3) color-mix(in srgb, var(--plum) 22%, transparent); }
.ck-f-plum-h { --ck-c: var(--plum); fill: url(#ck-plum-h) color-mix(in srgb, var(--plum) 36%, transparent); }
.ck-f-plum-hb { --ck-c: var(--plum); fill: url(#ck-plum-hb) color-mix(in srgb, var(--plum) 36%, transparent); }
.ck-f-slate-s { --ck-c: var(--slate); fill: var(--slate); }
.ck-f-slate-d1 { --ck-c: var(--slate); fill: url(#ck-slate-d1) color-mix(in srgb, var(--slate) 22%, transparent); }
.ck-f-slate-d2 { --ck-c: var(--slate); fill: url(#ck-slate-d2) color-mix(in srgb, var(--slate) 20%, transparent); }
.ck-f-slate-d3 { --ck-c: var(--slate); fill: url(#ck-slate-d3) color-mix(in srgb, var(--slate) 22%, transparent); }
.ck-f-slate-h { --ck-c: var(--slate); fill: url(#ck-slate-h) color-mix(in srgb, var(--slate) 36%, transparent); }
.ck-f-slate-hb { --ck-c: var(--slate); fill: url(#ck-slate-hb) color-mix(in srgb, var(--slate) 36%, transparent); }

/* ---- 2. The figure, the svg and its text ---- */
figure.ck { position: relative; min-width: 0; margin: 0; container-type: inline-size; }
.ck-svg { display: block; width: 100%; max-width: 100%; overflow: visible; font-family: var(--font-text); }
.ck-svg text { font-family: var(--font-text); font-size: 13px; fill: var(--ink); font-variant-numeric: lining-nums; }
/* the label face: 11px capitals, never another size */
.ck-svg .ck-lb { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; fill: var(--ink-2); font-synthesis: none; }
.ck-svg .ck-lb.ck-ink { fill: var(--ink); }
.ck-svg .ck-name { font-size: 14px; }
.ck-svg .ck-rowl { font-size: 13px; fill: var(--ink); }
.ck-key { pointer-events: none; }
.ck-svg .ck-num { font-variant-numeric: tabular-nums lining-nums; }
.ck-svg .ck-strong { font-weight: 700; }
.ck-svg .ck-big { font-family: var(--font-display-35); font-size: 22px; }
/* text that sits on a rule or a fill keeps a halo of paper */
.ck-svg .ck-halo { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
/* a label over a fill sits on a plate of paper (plate() in core.mjs, treemap cells, swimlane states): the page's paper
   in either theme and white in print, so no dot runs through its letters */
.ck-plate { pointer-events: none; }
.ck-lbg { fill: var(--paper); stroke: none; }
.ck-empty { color: var(--ink-2); }

/* ---- 3. Axes: dotted hairlines as on the time-series charts (1px dots every 3px, ink at 42%), the zero line a strong
   rule, labels on the rules ---- */
.ck-axis { pointer-events: none; }
.ck-grid { stroke: color-mix(in srgb, var(--ink) 42%, transparent); stroke-width: 1px; stroke-dasharray: 1 2; shape-rendering: crispEdges; }
.ck-base { stroke: var(--ink); stroke-width: 1.25px; }
.ck-sep { stroke: var(--rule); stroke-width: 1px; shape-rendering: crispEdges; }
.ck-svg .ck-dots { stroke: var(--ink-2); stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 0 6; shape-rendering: auto; }
.ck-tick { stroke: var(--ink); stroke-width: 1px; }
.ck-now { stroke: var(--vermilion); stroke-width: 1px; }

/* ---- 4. Marks: a hit area larger than the mark, the marker pen on hover, the focus ring, highlighting ---- */
.ck-m { cursor: default; }
a.ck-m { cursor: pointer; text-decoration: none; }
.ck-hit { fill: transparent; }
.ck-m:hover > .ck-hit, .ck-m:focus-visible > .ck-hit { fill: var(--row-hover); }
.ck-m:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* single-element marks (dots and cells) take a wider invisible rim to be easier to hit */
circle.ck-m, .ck-m > circle.ck-dotm { stroke: transparent; stroke-width: 7px; paint-order: stroke; }
circle.ck-m:hover, circle.ck-m:focus-visible, .ck-m:hover > circle.ck-dotm, .ck-m:focus-visible > circle.ck-dotm { stroke: var(--highlight); stroke-width: 5px; }
/* while a mark or a legend entry with a key (data-k) is hovered or focused, whatever has another key steps back */
.ck-hl [data-k]:not(.is-hl) { opacity: 0.3; }
.ck [data-k] { transition: opacity var(--t-fast) linear; }
/* a row that links: its name is underlined like a link */
.ck-svg .ck-link-t { text-decoration: underline; text-decoration-color: var(--lapis); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.ck-m:hover .ck-link-t { text-decoration-color: var(--ink); }

/* ---- 5. The primitives ---- */
/* lines and dots */
.ck-line { fill: none; stroke: var(--ck-c, var(--ink)); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ck-line.ck-thin { stroke-width: 1.5px; }
.ck-dash { stroke-dasharray: 4 3; stroke-linecap: butt; }
.ck-dash2 { stroke-dasharray: 1 3; stroke-linecap: round; }
.ck-dot { fill: var(--ck-c, var(--ink)); stroke: var(--paper); stroke-width: 2px; paint-order: stroke; }
.ck-area { stroke: none; }
.ck-ring { fill: var(--paper); stroke: var(--ck-c, var(--ink)); stroke-width: 1.5px; }
.ck-ring.ck-dashed { stroke-dasharray: 2 2; }
.ck-end { stroke: var(--ck-c, var(--ink)); stroke-width: 2px; shape-rendering: crispEdges; }
.ck-zero { fill: var(--rule-2); }
/* sparkline: a fixed size, inline in tables and ledgers */
svg.ck-spark { display: inline-block; width: auto; vertical-align: middle; overflow: visible; }
/* ranked bars and columns */
.ck-barlist { max-width: 760px; }
.ck-bar { stroke: none; }
.ck-col { stroke: none; }
.ck-net { fill: var(--ink); stroke: var(--paper); stroke-width: 2px; paint-order: stroke; }
/* calendar and grids */
.ck-cal { max-width: 980px; }
/* a relative calendar's days under their usual level are rings in their own ink (the ring takes the hit rim's place) */
.ck-cal circle.ck-ring { stroke: var(--ck-c); stroke-width: 1.5px; paint-order: normal; }
.ck-cal circle.ck-ring:hover, .ck-cal circle.ck-ring:focus-visible { stroke: var(--highlight); stroke-width: 4px; }
.ck-heat { max-width: 820px; }
.ck-groups { pointer-events: none; }
.ck-cell { fill: var(--ck-c, var(--ink)); }
.ck-st-dot { fill: var(--ck-c); stroke: var(--ck-c); stroke-width: 1.5px; }
.ck-st-ring { fill: var(--paper); stroke: var(--ck-c); stroke-width: 1.5px; }
.ck-st-half { fill: var(--ck-c); stroke: none; }
.ck-st-hatch { fill: none; stroke: var(--ck-c); stroke-width: 1px; }
.ck-pin { overflow: visible; }
.ck-keydot { fill: var(--ck-c, var(--ink)); }
.ck-st-dashed { fill: var(--paper); stroke: var(--ck-c); stroke-width: 1px; stroke-dasharray: 2 1.6; }
.ck-st-none { fill: var(--rule-2); }
/* treemap: a paper gap between cells, a wider one between groups; a hovered cell is outlined in ink */
.ck-tree { max-width: 980px; }
.ck-tree .ck-cellr { stroke: var(--paper); stroke-width: 2px; }
.ck-tree .ck-grp { fill: none; stroke: var(--paper); stroke-width: 4px; }
.ck-tree .ck-m:hover .ck-cellr, .ck-tree .ck-m:focus-visible .ck-cellr { stroke: var(--ink); }
.ck-cell-t { pointer-events: none; }
/* unit chart: blocks side by side, wrapping */
.ck-units .ck-blocks { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); align-items: flex-start; }
.ck-units .ck-svg { width: auto; }
.ck-udots { fill: none; stroke: var(--ck-c, var(--ink)); stroke-linecap: round; }
.ck-ufrac { fill: var(--ck-c, var(--ink)); }
/* event axis, swimlanes, step chart */
.ck-ev-ring { fill: var(--paper); stroke: var(--ck-c, var(--ink)); stroke-width: 1.5px; stroke-dasharray: 2 2; }
.ck-evdot { stroke: var(--ck-c, var(--ink)); stroke-width: 1.25px; }
.ck-keyring { fill: none; stroke: var(--ink-2); stroke-width: 1px; }
.ck-note { pointer-events: none; }
.ck-stage { stroke: none; }
.ck-open { fill: none; stroke: var(--ck-c, var(--ink)); stroke-width: 2px; stroke-dasharray: 0 4; stroke-linecap: round; }
.ck-step-area { stroke: none; }
.ck-plot { overflow: visible; }
/* arcs between two groups */
.ck-arcs { max-width: 980px; }
.ck-svg .ck-node-t { font-size: 12px; }
.ck-link { fill: none; stroke: var(--ink-2); stroke-width: 1px; stroke-opacity: 0.55; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--t-fast) linear, stroke var(--t-fast) linear; }
.ck-link.is-hl { stroke: var(--lapis); stroke-opacity: 1; stroke-width: 2px; }
.ck-hl .ck-link:not(.is-hl) { stroke-opacity: 0.12; }
/* the dot-matrix world */
.ck-map .ck-svg { height: auto; }
.ck-map .ck-land { fill: none; stroke: var(--rule-2); stroke-linecap: round; }
.ck-map .ck-cty { fill: none; stroke: var(--ck-c, var(--ink-2)); stroke-linecap: round; transition: stroke var(--t-fast) linear; }
.ck-map .ck-cty-hit { fill: transparent; stroke: none; }
.ck-map .ck-m:hover .ck-cty, .ck-map .ck-m:focus-visible .ck-cty { stroke: var(--ink); }
.ck-map .ck-m:hover .ck-cty-hit, .ck-map .ck-m:focus-visible .ck-cty-hit { fill: var(--row-hover); }
.ck-mapsw { fill: var(--ck-c, var(--ink-2)); }
.ck-map .lv-crypto-ban { --ck-c: var(--lv-crypto-ban); }
.ck-map .lv-exchange-ban { --ck-c: var(--lv-exchange-ban); }
.ck-map .lv-scheduled-ban { --ck-c: var(--lv-scheduled-ban); }
.ck-map .lv-delisted-under-pressure { --ck-c: var(--lv-delisted-under-pressure); }
.ck-map .lv-mixers-targeted { --ck-c: var(--lv-mixers-targeted); }
.ck-map .lv-no-restriction-found { --ck-c: var(--lv-no-restriction-found); }
.ck-map .lv-none { --ck-c: var(--lv-none); }
.ck-sw .lv-crypto-ban, .ck-sw .lv-exchange-ban, .ck-sw .lv-scheduled-ban, .ck-sw .lv-delisted-under-pressure, .ck-sw .lv-mixers-targeted, .ck-sw .lv-no-restriction-found, .ck-sw .lv-none { stroke: none; }
/* glyphs and the dot field */
/* a seal's dots are zero-length strokes with round caps, a path per size (src/charts/seal.mjs); a half dot (optional
   privacy) is a thin ring, .ck-sxo, with its left half filled, .ck-sxh */
svg.ck-seal { display: inline-block; vertical-align: middle; overflow: visible; fill: none; stroke-linecap: round; }
.ck-seal .ck-sd { stroke: var(--ck-c, var(--ink)); }
.ck-seal .ck-sx, .ck-seal .ck-sxo { stroke: var(--vermilion); }
.ck-seal .ck-sxh { fill: var(--vermilion); }
.ck-seal-g > .ck-seal-n { margin-top: var(--s-2); }
.ck-seal-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-4) var(--s-6); margin: var(--s-4) 0 0; }
.ck-seal-g { min-width: 0; }
.ck-seal-key .ck-legend { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
.ck-seal-h { margin: 0 0 var(--s-2); padding-bottom: var(--s-1); border-bottom: 1px solid var(--ink); font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); }
.ck-seal-n { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font-size: var(--fs-note); }
svg.ck-field { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-fd { fill: none; stroke: var(--ck-c, var(--ink)); stroke-linecap: round; }
.ck-fd-e { stroke: var(--rule-2); }
.ck-fd-now { fill: var(--vermilion); }

/* ---- 6. Legend, the table of the figures and the tip ---- */
.ck-legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; font-size: var(--fs-note); line-height: 1.4; color: var(--ink); }
.ck-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ck-sw { flex: none; display: block; overflow: visible; }
.ck-lg-n { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--ink-2); }
.ck-cap { margin: var(--s-2) 0 0; color: var(--ink-2); font-size: var(--fs-note); }
.ck-data { margin-top: var(--s-3); }
.ck-data > summary { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-2); font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; list-style: none; cursor: pointer; }
.ck-data > summary::-webkit-details-marker { display: none; }
.ck-data > summary::before { content: ""; flex: none; width: 9px; height: 9px; background: linear-gradient(currentColor, currentColor) 50% 50% / 9px 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 9px no-repeat; transition: transform var(--t) var(--ease-out); }
.ck-data[open] > summary::before { transform: rotate(45deg); }
.ck-data > summary:hover { color: var(--ink); }
.ck-data .table-wrap { margin-top: var(--s-2); }
/* the one tooltip (web/chart-tip.js): the value first, in the display face, then what it is, the series, a note */
.ck-tip { position: absolute; left: 0; top: 0; z-index: 70; min-width: 7rem; max-width: 17.5rem; padding: 7px 10px 8px; background: var(--sheet); border: 1px solid var(--ink); color: var(--ink); font-family: var(--font-text); font-size: var(--fs-note); line-height: 1.35; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--t-fast) linear, visibility 0s linear var(--t-fast); }
.ck-tip.is-on { opacity: 1; visibility: visible; transition: opacity var(--t-fast) linear; }
.ck-tip-v { display: block; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; line-height: 1.1; font-variant-numeric: lining-nums; }
.ck-tip-l { display: block; margin-top: 3px; color: var(--ink-2); font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; }
.ck-tip-l:first-child { margin-top: 0; color: var(--ink); }
.ck-tip-r { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; margin-top: 4px; }
.ck-tip-r b { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ck-k { display: inline-block; width: 14px; height: 3px; background: var(--ck-c, var(--ink)); transform: translateY(-3px); }
.ck-tip-n { display: block; margin-top: 4px; color: var(--ink-2); }

/* ---- 7. Motion: a chart below the fold waits (.ck-wait, web/chart-tip.js) and draws once seen (.is-seen). Nothing waits
   without .mo and the script, under reduced motion or in print. --ck-d staggers marks in their order. ---- */
.ck-grow-x { transform-box: fill-box; transform-origin: 0 50%; }
.ck-grow-y { transform-box: fill-box; transform-origin: 50% 100%; }
.ck-grow-yd { transform-box: fill-box; transform-origin: 50% 0; }
.ck-pop { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .mo .ck-wait .ck-a { opacity: 0; }
  .mo .ck-wait .ck-grow-x { transform: scaleX(0); }
  .mo .ck-wait :is(.ck-grow-y, .ck-grow-yd) { transform: scaleY(0); }
  .mo .ck-wait .ck-pop { transform: scale(0); }
  .mo .ck-wait .ck-wipe { clip-path: inset(0 100% 0 0); }
  .mo .is-seen .ck-a { transition: opacity 300ms var(--ease-out) var(--ck-d, 0ms), transform 460ms var(--ease-out) var(--ck-d, 0ms), clip-path 820ms var(--ease-out) var(--ck-d, 0ms); }
  .mo .is-seen .ck-late { transition-delay: calc(var(--ck-d, 0ms) + 420ms); }
}

/* ---- 8. Narrow charts (the figure is a size container) and notes in the margin ---- */
.ck-xo { display: none; }
@container (max-width: 959px) {
  .ck-xw { display: none; }
}
@container (max-width: 759px) {
  .ck-xm { display: none; }
}
@container (max-width: 599px) {
  .ck-xn { display: none; }
  .ck-xo { display: inline; }
}
@media (min-width: 1100px) {
  .panel > .ck:has(+ .note) { grid-column: body-start / body-end; }
  .panel > .ck + .note { grid-column: margin-start / margin-end; align-self: start; margin-top: 0; padding-top: var(--s-2); border-top: 1px solid var(--ink); }
  .panel > .ck + .note::before { content: "Note"; display: block; margin-bottom: var(--s-1); font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); }
}

/* ---- 9. Print and forced colours ---- */
@media print {
  .ck-wait .ck-a { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .ck-tip { display: none !important; }
  figure.ck { break-inside: avoid; }
  .ck-hl .ck-m, .ck-hl .ck-legend [data-k] { opacity: 1 !important; }
}
@media (forced-colors: active) {
  .ck-svg, .ck-sw, .ck-defs, .ck-tip, .ck-k { forced-color-adjust: none; --ink: CanvasText; --ink-2: CanvasText; --lapis: CanvasText; --vermilion: CanvasText; --moss: CanvasText; --ochre: CanvasText; --plum: CanvasText; --slate: CanvasText; --up: CanvasText; --down: CanvasText; --paper: Canvas; --sheet: Canvas; --rule: GrayText; --rule-2: GrayText; --row-hover: Highlight; --highlight: Highlight; --focus: Highlight; --lv-crypto-ban: CanvasText; --lv-exchange-ban: CanvasText; --lv-scheduled-ban: CanvasText; --lv-delisted-under-pressure: CanvasText; --lv-mixers-targeted: CanvasText; --lv-no-restriction-found: CanvasText; --lv-none: GrayText; }
}
