/* ==========================================================================
   viz.css  -  the shared chart module (js/viz.js), .vz-* only.

   EVERY COLOUR IS A CLASS CARRYING --c (.vz-c-eff, .vz-c-s2, .vz-c-gold ...), so a theme
   toggle repaints a chart with no JS and no re-animation. Company hues, the polarity
   pair and graphite live in tokens-ledger.css; the surfaces and ink are base.css's.

   THE LOOK: graphite marks with ONE gold mark (the latest or selected), dashed horizontal
   grid, 11px tabular axis text drawn inside the plot above its grid line, bars rounded 4px
   at the data end only and separated by 2px of surface, a glow on the hovered mark and
   never at rest.

   MOTION RULES (CLAUDE.md): nothing rests at opacity 0 (every entrance is a keyframe FROM
   the hidden state with backwards fill, so the natural state is the visible one); the
   entrance plays on the first paint of a box only (the figure carries .vz-enter, a refresh
   does not); reduced motion renders the final state; no SMIL anywhere.
   ========================================================================== */

/* ---------- colour keys: one class, one custom property ---------- */
.vz-c-co-eff       { --c: var(--vz-co-eff); }
.vz-c-co-messenger { --c: var(--vz-co-messenger); }
.vz-c-co-thumbies  { --c: var(--vz-co-thumbies); }
.vz-c-co-cemsites  { --c: var(--vz-co-cemsites); }
.vz-c-s1 { --c: var(--s1); }
.vz-c-s2 { --c: var(--s2); }
.vz-c-s3 { --c: var(--s3); }
.vz-c-s4 { --c: var(--s4); }
.vz-c-s5 { --c: var(--s5); }
.vz-c-s6 { --c: var(--s6); }
.vz-c-ink      { --c: var(--ink-700); }
.vz-c-ink-soft { --c: var(--ink-500); }
.vz-c-gold     { --c: var(--accent-fill); }
.vz-c-up       { --c: var(--vz-up); }
.vz-c-down     { --c: var(--vz-down); }
.vz-c-dim      { --c: var(--ink-300); }
/* state colours: a bar whose meaning is a state (over its limit, within it). The page ships the icon or word beside it. */
.vz-c-ok   { --c: var(--ok); }
.vz-c-warn { --c: var(--warn); }
.vz-c-bad  { --c: var(--bad); }

/* ---------- the frame ---------- */
.vz {
    --vz-ease: var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1));
    position: relative; display: block; margin: 0; min-width: 0;
    color: var(--text); font-size: var(--fs-sm); line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.vz-title { font-size: var(--fs-lg); font-weight: var(--fw-medium); margin: 0 0 .45rem; color: var(--text); }
.vz-plot { position: relative; border-radius: 8px; }
.vz-plot:focus { outline: none; }
.vz-plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vz-svg { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.vz-body { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.vz-t-donut .vz-plot { flex: 0 0 auto; }
.vz-t-donut .vz-svg { width: auto; }
.vz-side { flex: 1 1 200px; min-width: 0; }

/* visually hidden, still read by a screen reader */
.vz-sr, .vz-live {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- axis, grid, reference ---------- */
.vz-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; opacity: .85; }
.vz-base { stroke: var(--ink-300); stroke-width: 1; }
.vz-svg text { font-size: .6875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.vz-yt, .vz-lbl, .vz-cat-l {
    fill: var(--text-dim);
    paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.vz-xt { fill: var(--text-dim); }
.vz-cat-l { fill: var(--text-soft); }
.vz-ref { stroke: var(--ink-500); stroke-width: 1; stroke-dasharray: 5 4; }
.vz-cov { stroke: var(--ink-500); stroke-width: 1; stroke-dasharray: 3 3; }
.vz-band { fill: var(--accent-weak); }
.vz-nm { opacity: .5; }
.vz-nmb { opacity: .7; }
.vz-ph { fill: var(--c); opacity: .6; }

/* ---------- gradients ---------- */
.vz-gs0 { stop-color: var(--c); stop-color: color-mix(in srgb, var(--c) 84%, #fff); }
.vz-gs1 { stop-color: var(--c); }
.vz-as0 { stop-color: var(--c); stop-opacity: .26; }
.vz-as1 { stop-color: var(--c); stop-opacity: 0; }

/* ---------- lines and areas ---------- */
.vz-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-line.is-dash { stroke-dasharray: 4 4; }
.vz-area { stroke: none; }
.vz-dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.vz-dot.is-hollow { fill: var(--surface); stroke: var(--c); }
.vz-whisk { fill: none; stroke: var(--c); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
.vz-halo { fill: none; stroke: var(--c); stroke-width: 2; stroke-opacity: 0; transform-box: fill-box; transform-origin: center; }
.vz-leader { fill: none; stroke: var(--ink-300); stroke-width: 1; }
.vz-dlab { fill: var(--text-soft); font-weight: 600; }
.vz-dkey { fill: var(--c); }
.vz-dval { fill: var(--text); font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }

/* ---------- crosshair and hover ---------- */
.vz-xh { visibility: hidden; pointer-events: none; }
.vz-xh.is-on { visibility: visible; }
.vz-xline { stroke: var(--ink-500); stroke-width: 1; opacity: .7; }
.vz-xdot { fill: var(--c); stroke: var(--surface); stroke-width: 2; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 45%, transparent)); }
.vz-xdot.is-off { visibility: hidden; }
.vz-hover { fill: transparent; pointer-events: all; }
.vz-hit { fill: transparent; pointer-events: all; }

/* ---------- bars ---------- */
.vz-bar { transform-box: fill-box; transition: filter var(--dur-1, 140ms) var(--vz-ease), opacity var(--dur-1, 140ms) var(--vz-ease); }
.vz-bar-up, .vz-bar-down { transform-origin: 50% 100%; }
.vz-bar-down { transform-origin: 50% 0; }
.vz-bar-right { transform-origin: 0 50%; }
.vz-bar-left { transform-origin: 100% 50%; }
.vz-bar.is-ghost { opacity: .22; }
.vz-bar.is-partial { opacity: 1; }
.vz-cat { outline: none; }
.vz-cat.is-drill .vz-hit { cursor: pointer; }
.vz-cat.is-hot .vz-bar { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--c) 42%, transparent)); }
.vz-bgrp:has(.is-hot) .vz-cat:not(.is-hot) .vz-bar { opacity: .55; }
.vz-vl { fill: var(--text-soft); font-weight: 600; }
.vz-vl.is-hl { fill: var(--text); font-weight: 700; }

/* ---------- bridge ---------- */
.vz-brhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.8rem; margin: 0 0 .5rem; }
.vz-brt small { display: block; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.vz-brt b { font-size: 1.2rem; font-weight: 600; color: var(--text); font-variant-numeric: proportional-nums; }

/* ---------- donut ---------- */
.vz-slice { transition: transform var(--dur-2, 220ms) var(--vz-ease), filter var(--dur-2, 220ms) var(--vz-ease), opacity var(--dur-2, 220ms) var(--vz-ease); }
.vz-slice.is-hot { transform: scale(1.035); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 40%, transparent)); }
.vz-t-donut .vz-plot:has(.vz-slice.is-hot) .vz-slice:not(.is-hot) { opacity: .6; }
.vz-cv { fill: var(--text); font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.vz-cc { fill: var(--text-dim); font-size: .6875rem; }
.vz-base-note { margin: .5rem 0 0; font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- legend and keys ---------- */
.vz-legend { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; list-style: none; margin: .55rem 0 0; padding: 0; font-size: var(--fs-xs); color: var(--text-soft); }
.vz-legend.is-rows { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0 .7rem; margin: 0; align-items: center; }
.vz-lg { display: flex; align-items: center; gap: .4rem; }
.vz-legend.is-rows .vz-lg { display: contents; }
.vz-legend.is-rows .vz-lg > * { padding: .32rem 0; border-bottom: 1px solid var(--border-soft); }
.vz-lg.is-hot > * { color: var(--text); }
.vz-lg-n { min-width: 0; overflow-wrap: anywhere; }
.vz-lg-v { color: var(--text); font-weight: 600; text-align: right; }
.vz-lg-p { color: var(--text-dim); text-align: right; min-width: 2.6em; }
.vz-key { display: inline-block; flex: none; background: var(--c); }
.vz-key.is-box { width: 9px; height: 9px; border-radius: 2.5px; }
.vz-key.is-line { width: 14px; height: 3px; border-radius: 2px; }
.vz-key.is-dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.vz-key.is-none { display: none; }
/* legend hover lifts one series: the rest step back */
.vz[data-vz-focus="0"] [data-vz-s]:not([data-vz-s="0"]) { opacity: .28; }
.vz[data-vz-focus="1"] [data-vz-s]:not([data-vz-s="1"]) { opacity: .28; }
.vz[data-vz-focus="2"] [data-vz-s]:not([data-vz-s="2"]) { opacity: .28; }
.vz[data-vz-focus="3"] [data-vz-s]:not([data-vz-s="3"]) { opacity: .28; }
.vz[data-vz-focus="4"] [data-vz-s]:not([data-vz-s="4"]) { opacity: .28; }
.vz[data-vz-focus="5"] [data-vz-s]:not([data-vz-s="5"]) { opacity: .28; }

/* ---------- heat ---------- */
.vz-cells { isolation: isolate; }
.vz-cell { transition: filter var(--dur-1, 140ms) var(--vz-ease); }
.vz-hc { --k: .5; fill: var(--surface-3); fill: color-mix(in srgb, var(--c) calc(var(--k, .5) * 100%), var(--surface)); }
.vz-hc.is-up { --c: var(--vz-up); }
.vz-hc.is-down { --c: var(--vz-down); }
.vz-cell.is-hot { stroke: var(--text); stroke-width: 1.5; }
.vz-cell.is-null { opacity: .7; }
/* not applicable (the blank diagonal of a symmetric matrix): an outline, never the not-measured hatch */
.vz-cell.is-na { fill: transparent; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.vz-scale { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: var(--fs-2xs); color: var(--text-dim); }
.vz-scale-bar { display: block; width: 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--ink-700)) 12%, var(--surface)), var(--c, var(--ink-700))); }
.vz-scale-bar.is-div { background: linear-gradient(90deg, var(--vz-down), var(--surface-3), var(--vz-up)); }

/* ---------- rank ---------- */
.vz-rk-list { --vw: auto; display: flex; flex-direction: column; }
.vz-rk {
    display: grid; grid-template-columns: 28px minmax(0, 1.3fr) minmax(48px, 1fr) var(--vw, auto); align-items: center; column-gap: .75rem;
    min-height: 44px; padding: .4rem .25rem; border-bottom: 1px solid var(--border-soft); border-radius: 6px;
    transition: background-color var(--dur-1, 140ms) var(--vz-ease);
}
.vz-rk-list.has-share .vz-rk { grid-template-columns: 28px minmax(0, 1.3fr) minmax(48px, 1fr) var(--vw, auto) 3rem; }
.vz-rk.is-link { color: inherit; text-decoration: none; }
.vz-rk.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the narrow variant (a sidebar, a drawer): the bar drops under the name and spans to the value */
.vz-rk-list.is-narrow .vz-rk { grid-template-columns: 28px minmax(0, 1fr) var(--vw, auto); row-gap: .3rem; padding-top: .5rem; padding-bottom: .5rem; }
.vz-rk-list.is-narrow.has-share .vz-rk { grid-template-columns: 28px minmax(0, 1fr) var(--vw, auto) 3rem; }
.vz-rk-list.is-narrow .vz-rk-bar { grid-column: 2 / -1; grid-row: 2; }
.vz-rk.is-sel { cursor: pointer; }
.vz-rk.is-hot { background: color-mix(in srgb, currentColor 6%, transparent); }
.vz-rk-m { display: flex; align-items: center; justify-content: center; width: 28px; }
.vz-rk-n { font-size: var(--fs-xs); color: var(--text-dim); }
.vz-rk-img { width: 28px; height: 28px; object-fit: contain; }
.vz-av { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: .6875rem; font-weight: 700; color: var(--text);
         background: color-mix(in srgb, var(--c, var(--ink-700)) 16%, var(--surface)); }
.vz-rk-t { display: flex; flex-direction: column; min-width: 0; }
.vz-rk-l { font-size: var(--fs-md); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.vz-rk-s { font-size: var(--fs-xs); color: var(--text-dim); }
.vz-rk-bar { display: block; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.vz-rk-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 3px; transform-origin: 0 50%;
              background: var(--c); background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 84%, #fff)); }
.vz-rk-v { font-size: var(--fs-md); font-weight: 700; color: var(--text); text-align: right; }
.vz-rk-v.is-nm { font-weight: 500; color: var(--text-dim); }
.vz-rk-p { font-size: var(--fs-xs); color: var(--text-dim); text-align: right; }
.vz-rk-more { padding: .5rem .25rem 0; font-size: var(--fs-xs); color: var(--text-soft); }

/* ---------- ladder (chevrons and funnel) ---------- */
.vz-lad { display: flex; flex-wrap: wrap; row-gap: 6px; list-style: none; margin: 0; padding: 0; }
.vz-st {
    position: relative; flex: 1 1 5.5rem; min-width: 0; min-height: 50px; margin-left: -10px; padding: .55rem 1.1rem .55rem 1.5rem;
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .1rem;
    background: var(--surface-3); color: var(--text-soft);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    transition: background-color var(--dur-1, 140ms) var(--vz-ease);
}
.vz-st:first-child { margin-left: 0; padding-left: 1.1rem; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.vz-st.is-past { background: color-mix(in srgb, var(--ink-700) 16%, var(--surface)); color: var(--text); }
.vz-st.is-now { background: var(--accent-fill); color: var(--accent-on); }
.vz-st.is-hot { background: color-mix(in srgb, var(--ink-700) 24%, var(--surface)); }
.vz-st.is-now.is-hot { background: var(--accent-fill); filter: brightness(1.06); }
.vz-st-a { position: static; display: flex; flex-direction: column; align-items: inherit; justify-content: inherit; gap: inherit; color: inherit; text-decoration: none; }
.vz-st-a::after { content: ""; position: absolute; inset: 0; }
.vz-st-a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.vz-st-l { font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vz-st-v { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: proportional-nums; }
.vz-st-n { font-size: var(--fs-3xs); opacity: .85; line-height: 1.2; }
.vz-lad.is-v { flex-direction: column; gap: 6px; }
.vz-lad.is-v .vz-st, .vz-lad.is-funnel .vz-st { clip-path: none; margin-left: 0; border-radius: 8px; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: .55rem .9rem; }
.vz-lad.is-funnel { flex-direction: column; gap: 4px; }
.vz-lad.is-funnel .vz-st { flex: none; width: max(var(--w, 100%), 13rem); max-width: 100%; align-self: center; }

/* ---------- meter ---------- */
.vz-mt { width: 100%; }
.vz-mt-h { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.vz-mt-l { font-size: var(--fs-xs); color: var(--text-soft); }
.vz-mt-v { font-size: var(--fs-md); font-weight: 700; color: var(--text); font-variant-numeric: proportional-nums; }
.vz-mt-track { position: relative; display: flex; gap: 2px; height: 8px; border-radius: 4px; background: var(--surface-3); }
.vz-mt-fill { flex: 0 0 var(--w, 0%); height: 100%; border-radius: 4px; background: var(--c); transform-origin: 0 50%; }
.vz-mt-nm { flex: 1; height: 100%; border-radius: 4px; background: repeating-linear-gradient(45deg, var(--ink-300) 0 2px, transparent 2px 6px); opacity: .55; }
.vz-mt-tick { --x: 0%; position: absolute; top: -3px; bottom: -3px; left: var(--x, 0%); width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.vz.is-light .vz-tbl-s, .vz.is-light .vz-title { color: var(--shell-dim); }
.vz.is-light .vz-tbl-s:hover { color: var(--shell-ink); }
.vz-mt.is-light .vz-mt-l, .vz-mt.is-light .vz-mt-b { color: var(--shell-dim); }
.vz-mt.is-light .vz-mt-v, .vz-mt.is-light .vz-mt-f { color: var(--shell-ink); }
.vz-mt.is-light .vz-mt-track { background: color-mix(in srgb, #fff 14%, transparent); }
.vz-mt.is-light .vz-mt-tick { background: var(--shell-ink); }
.vz-mt-f { display: flex; flex-wrap: wrap; gap: .1rem .5rem; margin-top: .4rem; font-size: var(--fs-xs); color: var(--text); font-weight: 600; }
.vz-mt-b { color: var(--text-soft); font-weight: 400; }

/* ---------- stat: what a line becomes when it has fewer than three dated points ---------- */
.vz-stat-row { display: flex; flex-wrap: wrap; gap: .6rem 2rem; }
.vz-stat { display: flex; flex-direction: column; gap: .15rem; min-width: 7rem; }
.vz-stat-l { font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.vz-stat-v { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1.05; color: var(--text); font-variant-numeric: proportional-nums; }
.vz-stat-c { font-size: var(--fs-xs); color: var(--text-dim); }
.vz-stat-d { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--text-soft); }
.vz-stat-n { margin: .55rem 0 0; font-size: var(--fs-xs); color: var(--text-dim); }

/* ---------- spark ---------- */
.vz-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.vz-sp-draw { overflow: visible; }
.vz-sp-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vz-sp-line.is-dash { stroke-dasharray: 3 3; }
.vz-sp-area { fill: var(--c); opacity: .14; }
.vz-sp-bar { fill: var(--c); opacity: .55; }
.vz-sp-bar.vz-c-gold, .vz-sp-bar.vz-c-up, .vz-sp-bar.vz-c-down { opacity: 1; }
.vz-sp-bar.is-partial { opacity: .3; }
.vz-sp-end { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.vz-sp-end.is-hollow { fill: var(--surface); stroke: var(--c); }
.vz-sp-nm { stroke: var(--ink-300); stroke-width: 1.5; stroke-dasharray: 2 3; }
.vz-sp-x { stroke: var(--ink-500); stroke-width: 1; visibility: hidden; pointer-events: none; }
.vz-sp-d { fill: var(--c); stroke: var(--surface); stroke-width: 2; visibility: hidden; pointer-events: none; }
.vz-sp-x.is-on, .vz-sp-d.is-on { visibility: visible; }
/* tone:'light' for a dark band: graphite would vanish, so the line goes pale and the ring takes the band's own ink */
.vz-spark.is-light.vz-c-ink-soft { --c: var(--shell-ink); }
.vz-spark.is-light .vz-sp-end, .vz-spark.is-light .vz-sp-d { stroke: var(--shell-800); }
.vz-spark.is-light .vz-sp-end.vz-c-gold, .vz-spark.is-light .vz-sp-d.vz-c-gold { --c: var(--gold-300); }
.vz-spark.is-light .vz-sp-end.is-hollow { fill: var(--shell-800); stroke: var(--c); }
.vz-spark.is-light .vz-sp-x { stroke: var(--shell-dim); }
.vz-spark.is-light .vz-sp-nm { stroke: var(--shell-dim); }

/* ---------- empty / unavailable: the Bond, a sentence, never a zero chart ---------- */
.vz-empty-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; padding: 1.4rem 1rem; text-align: center;
                 border: 1px dashed var(--border); border-radius: var(--r-card, 14px); }
.vz-bond { display: block; flex: none; }
.vz-bn { fill: var(--text-soft); }
.vz-bl { stroke: var(--accent-fill); stroke-width: 1.5; stroke-linecap: round; }
.vz-bl.is-dot { stroke-dasharray: 1.5 4; }
.vz-empty-h { margin: .2rem 0 0; font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; color: var(--text); }
.vz-empty-t { margin: 0; max-width: 36ch; font-size: var(--fs-sm); color: var(--text-soft); }

/* ---------- view as table ---------- */
.vz-tbl { margin-top: .5rem; font-size: var(--fs-xs); }
.vz-tbl-s { display: inline-block; cursor: pointer; color: var(--text-soft); border-radius: 4px; padding: .1rem .25rem; margin-left: -.25rem; }
.vz-tbl-s:hover { color: var(--text); }
.vz-tbl-s:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vz-tbl-b { max-height: 14rem; overflow: auto; }
.vz-vt { width: 100%; border-collapse: collapse; margin-top: .3rem; }
.vz-vt caption { text-align: left; color: var(--text-dim); padding-bottom: .2rem; }
.vz-vt th, .vz-vt td { padding: .22rem .5rem; border-bottom: 1px solid var(--border-soft); text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.vz-vt th[scope="col"] { color: var(--text-soft); font-weight: 600; }
.vz-vt th[scope="row"] { text-align: left; font-weight: 500; color: var(--text-soft); }

/* ---------- the tooltip: ONE card, a child of <body>, dark like the app's own ---------- */
.vz-tip {
    position: fixed; left: 0; top: 0; z-index: 2000; visibility: hidden; pointer-events: none;
    min-width: 7.5rem; max-width: 19rem; padding: .55rem .7rem; border-radius: 9px;
    background: var(--shell-800); color: var(--shell-ink); border: 1px solid rgba(201, 165, 95, .42);
    box-shadow: var(--vz-tip-lift);
    font-size: var(--fs-sm); line-height: 1.35; font-variant-numeric: tabular-nums;
    transition: transform 90ms var(--ease-out-expo, ease-out);
}
.vz-tip.is-on { visibility: visible; animation: vzTipIn 120ms var(--ease-out-expo, ease-out) backwards; }
.vz-tip-h { margin-bottom: .3rem; font-size: var(--fs-xs); font-weight: 600; color: var(--shell-dim); overflow-wrap: anywhere; }
.vz-tip-r { display: flex; align-items: baseline; gap: .45rem; padding: .08rem 0; }
.vz-tip-r.is-total { margin-top: .2rem; padding-top: .3rem; border-top: 1px solid rgba(255, 255, 255, .12); }
.vz-tip .vz-c-ink, .vz-tip .vz-c-ink-soft { --c: var(--shell-ink); }
.vz-tip .vz-key { align-self: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22); }
.vz-tip-v { color: #fff; font-weight: 700; }
.vz-tip-v.is-nm { color: var(--shell-dim); font-weight: 500; }
.vz-tip-n { color: var(--shell-dim); }
.vz-tip-d { margin-left: auto; padding-left: .5rem; font-style: normal; font-size: var(--fs-xs); color: var(--shell-ink); opacity: .75; }
.vz-tip-note { margin-top: .15rem; font-size: var(--fs-xs); color: var(--shell-dim); }

/* ---------- selectable charts ---------- */
.vz.is-sel .vz-hit, .vz.is-sel .vz-hover, .vz.is-sel .vz-slice { cursor: pointer; }

/* ==================== FIRST-PAINT ENTRANCES ====================
   Each keyframe animates FROM the hidden state, with `backwards` fill: the resting
   state is the visible one, so an animation that never gets a frame loses nothing. */
@keyframes vzGrowY { from { transform: scaleY(0); } }
@keyframes vzGrowX { from { transform: scaleX(0); } }
@keyframes vzReveal { from { transform: scaleX(0); } }
@keyframes vzFade { from { opacity: 0; } }
@keyframes vzPop { from { opacity: 0; transform: scale(.4); } }
@keyframes vzBloom { from { opacity: 0; transform: scale(.6); } }
@keyframes vzRise { from { opacity: 0; transform: translateY(6px); } }
@keyframes vzTipIn { from { opacity: 0; } }
@keyframes vzHalo { from { stroke-opacity: .55; transform: scale(1); } to { stroke-opacity: 0; transform: scale(2.8); } }

.vz-enter .vz-bar-up, .vz-enter .vz-bar-down { animation: vzGrowY var(--dur-3, 620ms) var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 15) * 24ms); }
.vz-enter .vz-bar-left, .vz-enter .vz-bar-right { animation: vzGrowX var(--dur-3, 620ms) var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 15) * 24ms); }
.vz-enter .vz-reveal { transform-box: fill-box; transform-origin: 0 50%; animation: vzReveal var(--dur-4, 900ms) var(--vz-ease) backwards; }
.vz-enter .vz-area { animation: vzFade 600ms ease-out 300ms backwards; }
.vz-enter .vz-dot { transform-box: fill-box; transform-origin: center; animation: vzPop 420ms var(--vz-ease) 700ms backwards; }
.vz-enter .vz-halo { animation: vzHalo 1.6s ease-out 1.1s backwards; }
.vz-enter .vz-vl, .vz-enter .vz-dlab, .vz-enter .vz-dval { animation: vzFade 420ms ease-out 480ms backwards; }
.vz-enter .vz-slice { animation: vzBloom 700ms var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 12) * 40ms); }
.vz-enter .vz-cell { animation: vzFade 520ms ease-out backwards; animation-delay: calc(min(var(--d, 0), 33) * 12ms); }
.vz-enter .vz-rk { animation: vzRise 420ms var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }
.vz-enter .vz-rk-fill, .vz-enter .vz-mt-fill { animation: vzGrowX var(--dur-3, 620ms) var(--vz-ease) 120ms backwards; }
.vz-enter .vz-stat { animation: vzRise 420ms var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 6) * 60ms); }
.vz-enter .vz-st { animation: vzRise 420ms var(--vz-ease) backwards; animation-delay: calc(min(var(--i, 0), 14) * 40ms); }
.vz-spark.vz-enter .vz-sp-reveal { transform-box: fill-box; transform-origin: 0 50%; animation: vzReveal 700ms var(--vz-ease) backwards; }
.vz-spark.vz-enter .vz-sp-end { animation: vzFade 300ms ease-out 600ms backwards; }

@media (prefers-reduced-motion: reduce) {
    .vz *, .vz-spark *, .vz-tip { animation: none !important; transition: none !important; }
}