/* Mizan Rx charts (js/charts.js). Loaded right after css/app.css; consumes its tokens (--ink, --ink2, --ink3, --line,
   --grid, --card, --bg, --blue, --teal, --err, --font, --fs-*) and adds the chart-only tokens below.

   Colour by job (design/dataviz method), every set validated with the dataviz palette validator
   (OKLab dE x100, Machado 2009 CVD at severity 1.0) against the card surface the charts render on:
     categorical  --vz-c1..c5  blue, teal, violet, magenta, sky, fixed order, never cycled. Avoids red/amber/green,
                  which mean the result group only (design/ui-spec.md principle 1).
                  light on #FFFFFF: band/chroma PASS, worst adjacent CVD dE 10.8, normal-vision 19.8; sky 2.77:1 (relief:
                  every chart has visible labels or a table view). dark on #111A29: all PASS, CVD 12.5, normal 18.0, >= 3:1.
                  Blue and violet collapse under deuteranopia when NOT adjacent, so all-pairs forms (scatter, small
                  multiples) use one hue only.
     status (QC)  --vz-pass/warn/fail  teal / slate / plum (never the severity palette); warn is always hatched and
                  every status carries an icon and a word, so the gray never carries meaning alone.
     ordinal      --vz-o1..o5  one plum hue, receivables age (not due -> over 90 days). PASS --ordinal both modes
                  (light end 2.56:1 light, 2.18:1 dark).
     sequential   --vz-q1..q7  one blue hue for heatmaps; near-zero recedes into the surface (allowed for sequential).
     diverging    --vz-dn2..dp2  plum (reduced function) <-> blue (increased), neutral slate midpoint ("normal");
                  each arm PASSes --ordinal; dark mode separates the midpoint by lightness (protan-safe).
   Dark values are selected for the dark surface, not inverted. */

:root {
  --vz-c1: #1F66D1; --vz-c2: #12A38B; --vz-c3: #6250D6; --vz-c4: #C2489A; --vz-c5: #3BA4E0;
  --vz-other: #98A4B5;
  --vz-pass: #12A38B; --vz-warn: #66788F; --vz-fail: #9C2A5E;
  --vz-band-pass: #EDF8F4; --vz-band-warn: #F0F3F7; --vz-band-fail: #FBEEF4;
  --vz-o1: #D58BB5; --vz-o2: #C0619A; --vz-o3: #A33F7E; --vz-o4: #842A63; --vz-o5: #5E1A46;
  --vz-q0: #F1F4F8; --vz-q1: #DCE8FA; --vz-q2: #B9D1F5; --vz-q3: #8DB4EE; --vz-q4: #5F93E3; --vz-q5: #3574D6; --vz-q6: #1F58B0; --vz-q7: #143E80;
  --vz-dn2: #8E2A63; --vz-dn1: #D88FB9; --vz-d0: #CDD5E0; --vz-dp1: #8FB5EC; --vz-dp2: #1F58B0;
  --vz-dn2-ink: #FFFFFF; --vz-dn1-ink: #2A0F1F; --vz-d0-ink: #132238; --vz-dp1-ink: #0B2545; --vz-dp2-ink: #FFFFFF;
  --vz-total: #123A6B; --vz-inc: #1F66D1; --vz-dec: #9C2A5E;
  --vz-ink: #0F1B2D;
  --vz-surface: var(--card, #FFFFFF);
  --vz-gridc: var(--grid, #E5EAF1); --vz-axisc: #B9C3D0; --vz-text: var(--ink3, #5B677A); --vz-label: var(--ink2, #475569); --vz-value: var(--ink, #0F1B2D);
  --vz-hoverband: rgba(31, 102, 209, .06);
  --vz-wash: .12;
  --vz-up: var(--teal-ink, #0A6E5C); --vz-down: var(--err, #A6245C);
  --vz-tip-bg: #0F1B2D; --vz-tip-ink: #F4F7FC; --vz-tip-ink2: #B8C3D4;
}
/*@dark*/ :root[data-theme="dark"] {
  --vz-c1: #4C8EEB; --vz-c2: #17A288; --vz-c3: #9085E9; --vz-c4: #DD5A93; --vz-c5: #2E9BD9;
  --vz-other: #6B7A90;
  --vz-pass: #26B89B; --vz-warn: #7D8EAB; --vz-fail: #C2457F;
  --vz-band-pass: #0E2427; --vz-band-warn: #162133; --vz-band-fail: #2A1426;
  --vz-o1: #7E3767; --vz-o2: #A04C86; --vz-o3: #C068A4; --vz-o4: #DA8DC0; --vz-o5: #F0B6DA;
  --vz-q0: #0D1421; --vz-q1: #1A3254; --vz-q2: #22467A; --vz-q3: #2D5EA3; --vz-q4: #3F7BCB; --vz-q5: #6A9DE3; --vz-q6: #9DC0F0; --vz-q7: #D2E3FA;
  --vz-dn2: #F2B3D6; --vz-dn1: #C46A9E; --vz-d0: #3F4E66; --vz-dp1: #5A8FDB; --vz-dp2: #B9D3F7;
  --vz-dn2-ink: #2A0F1F; --vz-dn1-ink: #FFFFFF; --vz-d0-ink: #E6ECF5; --vz-dp1-ink: #FFFFFF; --vz-dp2-ink: #0B1A30;
  --vz-total: #B7D2F0; --vz-inc: #4C8EEB; --vz-dec: #C46A9E;
  --vz-ink: #E6ECF5;
  --vz-axisc: #3A4C68;
  --vz-hoverband: rgba(110, 164, 255, .08);
  --vz-wash: .16;
  --vz-tip-bg: #F4F7FC; --vz-tip-ink: #0F1B2D; --vz-tip-ink2: #475569;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vz-c1: #4C8EEB; --vz-c2: #17A288; --vz-c3: #9085E9; --vz-c4: #DD5A93; --vz-c5: #2E9BD9;
    --vz-other: #6B7A90;
    --vz-pass: #26B89B; --vz-warn: #7D8EAB; --vz-fail: #C2457F;
    --vz-band-pass: #0E2427; --vz-band-warn: #162133; --vz-band-fail: #2A1426;
    --vz-o1: #7E3767; --vz-o2: #A04C86; --vz-o3: #C068A4; --vz-o4: #DA8DC0; --vz-o5: #F0B6DA;
    --vz-q0: #0D1421; --vz-q1: #1A3254; --vz-q2: #22467A; --vz-q3: #2D5EA3; --vz-q4: #3F7BCB; --vz-q5: #6A9DE3; --vz-q6: #9DC0F0; --vz-q7: #D2E3FA;
    --vz-dn2: #F2B3D6; --vz-dn1: #C46A9E; --vz-d0: #3F4E66; --vz-dp1: #5A8FDB; --vz-dp2: #B9D3F7;
    --vz-dn2-ink: #2A0F1F; --vz-dn1-ink: #FFFFFF; --vz-d0-ink: #E6ECF5; --vz-dp1-ink: #FFFFFF; --vz-dp2-ink: #0B1A30;
    --vz-total: #B7D2F0; --vz-inc: #4C8EEB; --vz-dec: #C46A9E;
    --vz-ink: #E6ECF5;
    --vz-axisc: #3A4C68;
    --vz-hoverband: rgba(110, 164, 255, .08);
    --vz-wash: .16;
    --vz-tip-bg: #F4F7FC; --vz-tip-ink: #0F1B2D; --vz-tip-ink2: #475569;
  }
}
/* High contrast (Appearance menu): darker chart text and furniture, stronger grid. */
:root[data-contrast="more"] { --vz-gridc: #B4BECC; --vz-axisc: #4A5466; --vz-text: var(--ink2); }
:root[data-theme="dark"][data-contrast="more"] { --vz-gridc: #3E5170; --vz-axisc: #8396BA; }

/* ---------------------------------------------------------------- colour roles: each class sets --c */
.vz-c1 { --c: var(--vz-c1); } .vz-c2 { --c: var(--vz-c2); } .vz-c3 { --c: var(--vz-c3); } .vz-c4 { --c: var(--vz-c4); } .vz-c5 { --c: var(--vz-c5); }
.vz-other { --c: var(--vz-other); } .vz-ink { --c: var(--vz-ink); }
.vz-pass { --c: var(--vz-pass); } .vz-warn { --c: var(--vz-warn); } .vz-fail { --c: var(--vz-fail); }
.vz-act { --c: var(--act-dot); } .vz-cau { --c: var(--cau-dot); } .vz-std { --c: var(--std-dot); } .vz-und { --c: var(--und-dot); }
.vz-o1 { --c: var(--vz-o1); } .vz-o2 { --c: var(--vz-o2); } .vz-o3 { --c: var(--vz-o3); } .vz-o4 { --c: var(--vz-o4); } .vz-o5 { --c: var(--vz-o5); }
.vz-q0 { --c: var(--vz-q0); } .vz-q1 { --c: var(--vz-q1); } .vz-q2 { --c: var(--vz-q2); } .vz-q3 { --c: var(--vz-q3); } .vz-q4 { --c: var(--vz-q4); }
.vz-q5 { --c: var(--vz-q5); } .vz-q6 { --c: var(--vz-q6); } .vz-q7 { --c: var(--vz-q7); }
.vz-dn2 { --c: var(--vz-dn2); --ci: var(--vz-dn2-ink); } .vz-dn1 { --c: var(--vz-dn1); --ci: var(--vz-dn1-ink); } .vz-d0 { --c: var(--vz-d0); --ci: var(--vz-d0-ink); }
.vz-dp1 { --c: var(--vz-dp1); --ci: var(--vz-dp1-ink); } .vz-dp2 { --c: var(--vz-dp2); --ci: var(--vz-dp2-ink); }
.vz-total { --c: var(--vz-total); } .vz-inc { --c: var(--vz-inc); } .vz-dec { --c: var(--vz-dec); }

/* ---------------------------------------------------------------- figure */
.viz { margin: 0; min-width: 0; position: relative; }
.viz + .viz { margin-block-start: var(--s5, 24px); }
.vz-plot { position: relative; min-width: 0; border-radius: 8px; outline-offset: 4px; }
.vz-plot:focus { outline: none; }
.vz-plot:focus-visible { outline: 3px solid var(--focus, #2563EB); }
.vz-svg { display: block; overflow: visible; max-width: 100%; font-family: var(--font); -webkit-tap-highlight-color: transparent; touch-action: pan-y; }
.vz-svg text { font-family: var(--font-latin, var(--font)); font-size: 11px; fill: var(--vz-text); font-variant-numeric: tabular-nums; }
:lang(ar) .vz-svg text { font-family: var(--font); }
.vz-svg .vz-lab { font-size: 12.5px; fill: var(--vz-label); font-weight: 500; }
.vz-svg .vz-sub { font-size: 11.5px; fill: var(--vz-text); }
.vz-svg .vz-strong { font-weight: 600; fill: var(--vz-value); }
.vz-svg .vz-val, .vz-svg .vz-end { font-size: 11.5px; font-weight: 600; fill: var(--vz-value); }
.vz-svg .vz-unit { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; fill: var(--vz-text); text-transform: uppercase; }
.vz-svg .vz-xs { font-size: 10px; }
:lang(ar) .vz-svg .vz-lab { font-size: 13px; }
.vz-svg .vz-grid { stroke: var(--vz-gridc); stroke-width: 1; shape-rendering: crispEdges; }
.vz-svg .vz-axis { stroke: var(--vz-axisc); stroke-width: 1; shape-rendering: crispEdges; }
.vz-svg .vz-tickm { stroke: var(--vz-axisc); }
.vz-svg .vz-sep { stroke: var(--line); }
.vz-svg .vz-hit { fill: transparent; }
.vz-svg .vz-cat.vz-hot .vz-hit, .vz-svg .vz-x.vz-hot .vz-hit { fill: var(--vz-hoverband); }
.vz-svg .vz-bar { fill: var(--c); transition: opacity .15s; }
.vz-svg .vz-bar.vz-soft { opacity: .5; }
.viz.vz-hover .vz-cat:not(.vz-hot) .vz-bar { opacity: .42; }
.viz.vz-hover .vz-cat:not(.vz-hot) .vz-bar.vz-soft { opacity: .25; }
.vz-svg .vz-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.vz-svg .vz-line.vz-dash { stroke-dasharray: 5 4; }
.vz-svg .vz-area { fill: var(--c); opacity: var(--vz-wash); pointer-events: none; }
.vz-svg .vz-dot { fill: var(--c); stroke: var(--vz-surface); stroke-width: 2; pointer-events: none; }
.vz-svg .vz-hdot { fill: var(--c); stroke: var(--vz-surface); stroke-width: 2.5; opacity: 0; pointer-events: none; }
.vz-svg .vz-xhair { stroke: var(--vz-label); stroke-width: 1; opacity: 0; pointer-events: none; shape-rendering: crispEdges; }
.vz-svg .vz-x.vz-hot .vz-hdot, .vz-svg .vz-x.vz-hot .vz-xhair { opacity: 1; }
.vz-svg .vz-x.vz-hot .vz-hit { fill: transparent; }
.vz-svg .vz-ref { stroke: var(--vz-label); stroke-width: 1.25; stroke-dasharray: 4 3; pointer-events: none; }
.vz-svg .vz-refl { font-size: 11px; font-weight: 600; fill: var(--vz-label); }
.vz-svg .vz-band { stroke: none; }
.vz-svg .vz-band.vz-pass { fill: var(--vz-band-pass); } .vz-svg .vz-band.vz-warn { fill: var(--vz-band-warn); } .vz-svg .vz-band.vz-fail { fill: var(--vz-band-fail); }
.vz-svg .vz-bandl { font-size: 10.5px; font-weight: 600; fill: var(--vz-label); letter-spacing: .01em; }
.vz-svg .vz-hatch-bg { fill: var(--vz-warn); }
.vz-svg .vz-hatch-ln { fill: var(--vz-surface); opacity: .55; }
.vz-svg .vz-whisk { stroke: var(--vz-axisc); stroke-width: 2; stroke-linecap: round; }
.vz-svg .vz-iqr { fill: var(--c); opacity: .28; }
.vz-svg .vz-p90 { stroke: var(--c); stroke-width: 2.5; stroke-linecap: round; }
.vz-svg .vz-cat.vz-hot .vz-whisk { stroke: var(--vz-label); }
.vz-svg .vz-conn { stroke: var(--vz-axisc); stroke-width: 1; shape-rendering: crispEdges; }
.vz-svg .vz-c { fill: var(--c); }
.vz-svg [class^="vz-q"], .vz-svg [class*=" vz-q"] { fill: var(--c); }
.vz-svg .vz-cell.vz-hot .vz-c { stroke: var(--vz-value); stroke-width: 1.5; }
.vz-svg .vz-cv { font-size: 11px; font-weight: 600; fill: var(--vz-value); pointer-events: none; }
.vz-svg .vz-cv.vz-on { fill: #FFFFFF; }
:root[data-theme="dark"] .vz-svg .vz-cv.vz-on { fill: #0B1A30; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vz-svg .vz-cv.vz-on { fill: #0B1A30; } }
.vz-svg .vz-sline { fill: none; stroke: var(--vz-text); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.vz-svg .vz-sarea { fill: var(--vz-text); opacity: .08; }
.vz-svg .vz-sdot { fill: var(--c); stroke: var(--vz-surface); stroke-width: 2; }

/* ---------------------------------------------------------------- legend (above the plot) */
.vz-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 var(--s3, 12px); padding: 0; list-style: none; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--vz-label); }
.vz-legend li { display: inline-flex; align-items: center; gap: 7px; }
.vz-ico { font-weight: 700; color: var(--vz-value); font-size: 11px; }
.vz-key { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--c, var(--vz-other)); }
.vz-key.line { height: 2.5px; width: 16px; border-radius: 2px; }
.vz-key.dot { width: 10px; height: 10px; border-radius: 50%; }
.vz-key.tick { width: 2.5px; height: 12px; border-radius: 2px; }
.vz-key.range { height: 2px; width: 16px; background: var(--vz-axisc); }
.vz-key.hatch { background: repeating-linear-gradient(45deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 45%, var(--vz-surface)) 3px 5px); }
.vz-key.none { background: none; width: 0; margin-inline-end: -4px; }
.vz-legend .vz-key.band { width: 14px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--vz-axisc); }
.vz-key.band.vz-pass { background: var(--vz-band-pass); } .vz-key.band.vz-warn { background: var(--vz-band-warn); } .vz-key.band.vz-fail { background: var(--vz-band-fail); }
.vz-note { margin-block-start: var(--s2, 8px); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--vz-label); }
.viz details.data-tbl { margin-block-start: var(--s2, 8px); }
.viz details.data-tbl th[scope="row"] { font-weight: 500; text-align: start; }

/* ---------------------------------------------------------------- tooltip (one element, custom; values lead) */
.vz-tip { position: fixed; inset-block-start: 0; inset-inline-start: 0; left: 0; right: auto; z-index: 90; pointer-events: none; min-width: 150px; max-width: min(300px, calc(100vw - 16px));
  padding: 10px 12px; border-radius: 10px; background: var(--vz-tip-bg); color: var(--vz-tip-ink); box-shadow: 0 10px 30px rgba(10, 20, 40, .28);
  font-family: var(--font); font-size: 12.5px; line-height: 18px; }
.vz-tip[hidden] { display: none; }
.vz-th { font-weight: 600; margin-block-end: 6px; color: var(--vz-tip-ink); }
.vz-tr { display: grid; grid-template-columns: 16px auto 1fr; align-items: center; gap: 2px 8px; }
.vz-tr .vz-key { --vz-surface: var(--vz-tip-bg); width: 12px; }
.vz-tr .vz-key.bar, .vz-tr .vz-key.hatch { height: 8px; width: 12px; border-radius: 2px; }
.vz-tr .vz-key.line { height: 2.5px; width: 14px; }
.vz-tv { font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-latin, var(--font)); white-space: nowrap; }
:lang(ar) .vz-tv { font-family: var(--font); }
.vz-tl { color: var(--vz-tip-ink2); overflow-wrap: anywhere; }
.vz-tb { margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px solid color-mix(in srgb, var(--vz-tip-ink2) 30%, transparent); }
.vz-tn { margin-block-start: 6px; color: var(--vz-tip-ink2); font-size: 11.5px; }

/* ---------------------------------------------------------------- horizontal bars (HTML) */
.vz-hb { display: grid; gap: 10px; container-type: inline-size; }
.vz-hb.vz-dense { gap: 6px; }
.vz-hrow { display: grid; grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr) minmax(4.5rem, auto); gap: 4px 14px; align-items: center; font-size: var(--fs-sm); line-height: var(--lh-sm); border-radius: 8px; padding: 2px 4px; margin-inline: -4px; }
.vz-hrow.vz-hot { background: var(--vz-hoverband); }
.vz-hl { min-width: 0; overflow-wrap: anywhere; color: var(--vz-value); }
.vz-hl small { display: block; color: var(--vz-text); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.vz-hl:has(.sev) { overflow-wrap: normal; }
.vz-hl .sev { white-space: nowrap; }
.vz-strong .vz-hl { font-weight: 600; }
.vz-ht { position: relative; height: 14px; min-width: 0; }
.vz-hbar { position: relative; z-index: 1; display: flex; gap: 2px; height: 100%; min-width: 2px; }
.vz-seg { flex: 1 1 0; min-width: 2px; height: 100%; background: var(--c, var(--vz-c1)); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity .15s; }
.vz-seg:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.vz-seg.vz-hatch { background: repeating-linear-gradient(45deg, var(--c) 0 3px, color-mix(in srgb, var(--c) 45%, var(--vz-surface)) 3px 5px); }
.vz-seg em { font-style: normal; font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ci, #FFFFFF); white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--font-latin, var(--font)); padding-inline: 3px; }
.vz-hg { position: absolute; inset-block: -3px; inline-size: 1px; background: var(--vz-gridc); }
.vz-htick { position: absolute; z-index: 2; inset-block: -4px; inline-size: 2.5px; margin-inline-start: -1px; border-radius: 2px; background: var(--vz-value); }
.vz-hv { text-align: end; white-space: nowrap; font-size: var(--fs-xs); color: var(--vz-label); font-variant-numeric: tabular-nums; }
.vz-tall .vz-ht { height: 22px; }
.vz-tall .vz-seg:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; }
.vz-tall .vz-seg em { font-size: 11px; }
.viz.vz-hover .vz-hrow:not(.vz-hot) .vz-seg { opacity: .55; }
.vz-haxis { padding-block: 0; }
.vz-haxis .vz-ht { height: 14px; }
.vz-haxis .vz-ht span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--vz-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
[dir="rtl"] .vz-haxis .vz-ht span { transform: translateX(50%); }
@container (max-width: 460px) {
  .vz-hrow { grid-template-columns: minmax(0, 1fr) auto; }
  .vz-hrow .vz-hl { grid-column: 1 / -1; }
  .vz-haxis .vz-hl { display: none; }
}

/* ---------------------------------------------------------------- meter / bullet */
.vz-meter { display: grid; gap: 6px; min-width: 0; }
.vz-mhead { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--vz-label); }
.vz-mv { color: var(--vz-value); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vz-mtrack { position: relative; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--mc) 16%, var(--vz-surface)); overflow: visible; }
.vz-mfill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; background: var(--mc); }
.vz-mrange { position: absolute; inset-block: 0; }
.vz-mrange:first-child { border-start-start-radius: 999px; border-end-start-radius: 999px; }
.vz-mrange.vz-fail { background: var(--vz-band-fail); } .vz-mrange.vz-warn { background: var(--vz-band-warn); } .vz-mrange.vz-pass { background: var(--vz-band-pass); }
.vz-mmark { position: absolute; inset-block: -3px; inline-size: 1.5px; background: var(--vz-label); }
.vz-mmark span { position: absolute; inset-block-start: 13px; transform: translateX(-50%); font-size: 10px; font-style: normal; color: var(--vz-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
[dir="rtl"] .vz-mmark span { transform: translateX(50%); }
.vz-has-marks { padding-block-end: 12px; }
.vz-mtarget { position: absolute; inset-block: -4px; inline-size: 3px; border-radius: 2px; background: var(--vz-value); }
.vz-msub { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--vz-text); }
.vz-tone-accent { --mc: var(--vz-c1); } .vz-tone-good { --mc: var(--vz-pass); } .vz-tone-warn { --mc: var(--vz-warn); } .vz-tone-bad { --mc: var(--vz-fail); } .vz-tone-teal { --mc: var(--vz-c2); }

/* ---------------------------------------------------------------- stat-tile trend: sparkline + delta */
.vz-kt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; margin-block-start: 2px; }
.vz-spark { display: block; flex: 0 1 112px; min-width: 64px; height: 32px; }
.vz-spark .vz-plot { display: block; width: 100%; height: 32px; }
.vz-delta { display: inline-flex; align-items: baseline; gap: 4px; flex: 0 1 auto; min-width: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--vz-label); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.vz-delta .vz-darr { font-size: 9px; }
.vz-delta.good { color: var(--vz-up); } .vz-delta.bad { color: var(--vz-down); }
.vz-delta .vz-dl { font-weight: 400; color: var(--vz-text); }
.tile .vz-kt, .kpi .vz-kt { margin-block-start: auto; }

/* ---------------------------------------------------------------- page helpers for chart panels */
.vz-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-block-end: var(--s3, 12px); }
.vz-panel-h h2, .vz-panel-h h3 { margin: 0; }
.vz-panel-h p { margin: 0; color: var(--vz-text); font-size: var(--fs-xs); line-height: var(--lh-xs); }
.vz-big { font-family: var(--font-latin, var(--font)); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--heading, var(--vz-value)); letter-spacing: -.02em; }
.vz-split { display: grid; gap: var(--s5, 24px); }
@container page (min-width: 700px) { .vz-split.vz-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vz-meters { display: grid; gap: var(--s4, 16px); }

/* ---------------------------------------------------------------- entrance motion (first view only) */
@keyframes vz-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes vz-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vz-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.vz-in .vz-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: vz-rise .55s cubic-bezier(.2, .75, .25, 1) both; }
.vz-in .vz-bar.vz-neg { transform-origin: 50% 0; }
.vz-in .vz-line { stroke-dasharray: 1; animation: vz-draw .8s cubic-bezier(.3, .6, .2, 1) both; }
.vz-in .vz-line.vz-dash { stroke-dasharray: none; animation: vz-fade .6s both; }
.vz-in .vz-area, .vz-in .vz-end, .vz-in .vz-val { animation: vz-fade .7s .25s both; }
.vz-in .vz-dot { transform-box: fill-box; transform-origin: center; animation: vz-pop .4s .3s both; }
.vz-in .vz-iqr, .vz-in .vz-c { animation: vz-fade .5s both; }
.vz-in .vz-hbar { transform-origin: left center; animation: vz-grow .6s cubic-bezier(.2, .75, .25, 1) both; }
[dir="rtl"] .vz-in .vz-hbar { transform-origin: right center; }
.vz-in .vz-mfill { transform-origin: left center; animation: vz-grow .7s cubic-bezier(.2, .75, .25, 1) both; }
[dir="rtl"] .vz-in .vz-mfill { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
  .vz-in .vz-bar, .vz-in .vz-line, .vz-in .vz-area, .vz-in .vz-end, .vz-in .vz-val, .vz-in .vz-dot, .vz-in .vz-iqr, .vz-in .vz-c, .vz-in .vz-hbar, .vz-in .vz-mfill { animation: none; }
  .vz-svg .vz-bar, .vz-seg { transition: none; }
}

/* ---------------------------------------------------------------- forced colours and print: texture/outline carry identity */
@media (forced-colors: active) {
  .vz-svg .vz-bar, .vz-seg, .vz-svg .vz-c, .vz-mfill { forced-color-adjust: none; stroke: CanvasText; stroke-width: 1; }
  .vz-svg .vz-line { stroke: CanvasText; }
  .vz-tip { border: 1px solid CanvasText; }
}
@media print {
  .vz-tip { display: none; }
  .viz details.data-tbl { display: none; }
}
.vz-sub-h { margin: 0 0 var(--s2, 8px); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--vz-label); }