/* hz-dataviz.css - single-shot data-vis reveals. Animates transform/opacity/stroke-dashoffset/clip-path only. No infinite loops. Reduced motion = final state (no hidden state is ever applied). Colours: existing tokens + one pink accent. */
html[data-rd]{--dv-bar:var(--hz-bar,var(--bar,#4C9AFF));--dv-ink2:var(--hz-ink2,var(--ink-2,color-mix(in srgb,currentColor 72%,transparent)));--dv-pt:var(--pink-text,var(--hz-pink,#FE81D1))}
:root{--dv-pink:#FE81D1;--dv-e:cubic-bezier(.16,1,.3,1);--dv-bk:cubic-bezier(.34,1.56,.64,1);--dv-grey:color-mix(in srgb,var(--ink,currentColor) 26%,transparent);--dv-grey2:color-mix(in srgb,var(--ink,currentColor) 14%,transparent)}
[data-dv=count],.dv-big,.dv-tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
[data-dv=count]{display:inline-block}
html.dv-js [data-dv=count]:not(.dv-armed){visibility:hidden}
/* delay = index stagger + per-element offset; resolved on each mark so --dv-i is its own */
.dv-gx,.dv-gy,.dv-dr,.dv-sw,.dv-wp,.dv-pp,.dv-nt,.dv-fd,.dv-rs{--dv-dl:calc(var(--dv-i,0)*var(--dv-s,60ms) + var(--dv-d,0ms))}

/* ---- marks (always-on, static look) ---- */
.dv-bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.dv-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.dv-bars .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dv-ink2)}
.dv-bars .v{font-size:.875rem;color:var(--dv-ink2)}
.dv-bars li[data-dv-hi] .k,.dv-bars li[data-dv-hi] .v{color:var(--ink);font-weight:600}
.dv-m{grid-column:1/-1;display:block;height:8px;border-radius:99px;background:var(--dv-grey2);overflow:hidden}
.dv-m i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--dv-grey);transform-origin:0 50%}
.dv-bars li[data-dv-hi] .dv-m i{background:var(--dv-bar)}

.dv-cols{list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;gap:4px;height:140px}
.dv-cols li{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.dv-cols i{display:block;width:100%;height:calc(var(--h)*100%);border-radius:3px 3px 0 0;background:var(--dv-grey);transform-origin:50% 100%}
.dv-cols li[data-dv-hi] i{background:var(--dv-pink)}
.dv-ref{position:relative;border-bottom:1px solid var(--line)}
.dv-note{font-size:.8125rem;color:var(--ink)}
.dv-note b{color:var(--dv-pt);font-weight:600}

.dv-spark{display:block;width:100%;height:56px;overflow:visible}
.dv-spark .l{fill:none;stroke:var(--dv-bar);stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1}
.dv-spark .p{fill:var(--dv-pink);transform-box:fill-box;transform-origin:center}
.dv-ring{display:block;width:100%;max-width:200px;aspect-ratio:1;overflow:visible}
.dv-ring .seg{fill:none;stroke-width:12;transform:rotate(-90deg);transform-origin:50% 50%}
.dv-ring .s1{stroke:var(--dv-bar)}.dv-ring .s2{stroke:var(--dv-grey)}.dv-ring .s3{stroke:color-mix(in srgb,var(--ink,currentColor) 20%,transparent)}.dv-ring .s4,.dv-ring .s5{stroke:var(--dv-grey2)}
.dv-ring .sw{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:100;transform:rotate(-90deg);transform-origin:50% 50%}

.dv-band{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dv-band li{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr auto;gap:12px;align-items:center}
.dv-band .k{color:var(--dv-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-band li[data-dv-hi] .k{color:var(--ink);font-weight:600}
.dv-trk{position:relative;height:12px;border-radius:99px;background:var(--dv-grey2)}
.dv-trk .rng{position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);border-radius:99px;background:var(--dv-grey)}
.dv-trk .mid{position:absolute;top:50%;left:var(--m);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--dv-ink2)}
.dv-band li[data-dv-hi] .rng{background:var(--dv-bar)}
.dv-band li[data-dv-hi] .mid{background:var(--dv-pink)}
.dv-band .v{font-size:.875rem;color:var(--dv-ink2);min-width:5.5rem;text-align:right}
.dv-band li[data-dv-hi] .v{color:var(--ink);font-weight:600}

/* ---- real pages: rd-datavis.php markup (rules sit under html[data-rd] to beat the site layer; highlight one, grey the rest) ---- */
html[data-rd]{--dv-grey:color-mix(in srgb,var(--hz-ink,var(--ink,currentColor)) 30%,transparent);--dv-grey2:color-mix(in srgb,var(--hz-ink,var(--ink,currentColor)) 14%,transparent)}
html[data-rd] [data-dv=count]{display:inline-block}
html[data-rd] .rd-spark-dv{display:block;margin-top:12px}
html[data-rd] .rd-spark-dv .dv-spark{height:auto;max-width:240px}
html[data-rd] [data-dv-root] .rd-tl li>i{background:var(--dv-grey);opacity:1;transform-origin:50% 100%}
html[data-rd] [data-dv-root] .rd-tl li.is-pk>i{background:var(--dv-pink)}
html[data-rd] [data-dv-root] .rd-ringv .seg{stroke:var(--dv-grey);opacity:1}
html[data-rd] [data-dv-root] .rd-ringv .s1{stroke:var(--dv-bar)}
html[data-rd] [data-dv-root] .rd-ringv .s3{stroke:color-mix(in srgb,var(--hz-ink,currentColor) 20%,transparent)}
html[data-rd] [data-dv-root] .rd-ringv .s4,html[data-rd] [data-dv-root] .rd-ringv .s5{stroke:var(--dv-grey2)}
html[data-rd] [data-dv-root] .rd-hv__bars .rd-bar>i{background:var(--dv-grey);transform-origin:0 50%}
html[data-rd] [data-dv-root] .rd-hv__bars li[data-dv-hi] .rd-bar>i{background:var(--dv-bar)}
html[data-rd] [data-dv-root] .rd-hv__bars li[data-dv-hi] .k{color:var(--hz-ink);font-weight:600}
html[data-rd] .rd-bd__trk .rng{background:var(--dv-grey)}
html[data-rd] .rd-bd li[data-dv-hi] .rd-bd__trk .rng{background:linear-gradient(90deg,var(--hz-link,var(--dv-bar)),var(--dv-bar))}
html[data-rd] .rd-bd__trk .mid{top:50%;bottom:auto;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--dv-ink2)}
html[data-rd] .rd-bd li:first-child .rd-bd__trk .mid{background:var(--dv-ink2)}
html[data-rd] .rd-bd li[data-dv-hi] .rd-bd__trk .mid{background:var(--dv-pink)}
html[data-rd] .rd-bd li:not([data-dv-hi]) .rd-bd__lab b,html[data-rd] .rd-bd li:not([data-dv-hi]) .rd-bd__val b{font-weight:500}
html[data-rd] .rd-bd__trk .rng{transform-origin:0 50%}
/* down-delta text: the site pink-text token is 3.58:1 on night glass; ink keeps 4.5:1 and the triangle still carries direction */
html[data-rd] [data-dv-root] .rd-stat__delta.is-down{color:var(--hz-ink)}

/* ---- motion (only when the user has not asked for less; hidden states exist only under .dv-js) ---- */
@media (prefers-reduced-motion:no-preference){
 html.dv-js [data-dv-root]:not(.dv-in) .dv-gx{transform:scaleX(0)}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-gy{transform:scaleY(0)}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-dr{stroke-dashoffset:1}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-sw{stroke-dashoffset:100}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-wp{clip-path:inset(0 100% 0 0)}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-pp{transform:scale(.4);opacity:0}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-nt{opacity:0}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-fd{opacity:0}
 html.dv-js [data-dv-root]:not(.dv-in) .dv-rs{opacity:0;transform:translateY(10px)}
 [data-dv-root].dv-in .dv-gx{animation:dv-gx 900ms var(--dv-e) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-gy{animation:dv-gy 900ms var(--dv-e) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-dr{animation:dv-dr 1100ms var(--dv-e) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-sw{animation:dv-sw 1600ms var(--dv-e) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-wp{animation:dv-wp 800ms var(--dv-e) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-pp{animation:dv-pp 360ms var(--dv-bk) var(--dv-dl) both}
 [data-dv-root].dv-in .dv-nt{animation:dv-nt 500ms ease-out var(--dv-dl) both}
 [data-dv-root].dv-in .dv-fd{animation:dv-nt 600ms ease-out var(--dv-dl) both}
 [data-dv-root].dv-in .dv-rs{animation:dv-rs 700ms var(--dv-e) var(--dv-dl) both}
 @keyframes dv-rs{from{opacity:0;transform:translateY(10px)}}
 @keyframes dv-gx{from{transform:scaleX(0)}}
 @keyframes dv-gy{from{transform:scaleY(0)}}
 @keyframes dv-dr{from{stroke-dashoffset:1}}
 @keyframes dv-sw{from{stroke-dashoffset:100}}
 @keyframes dv-wp{from{clip-path:inset(0 100% 0 0)}}
 @keyframes dv-pp{from{transform:scale(.4);opacity:0}}
 @keyframes dv-nt{from{opacity:0}}
}
/* fixed line box so a web-font swap cannot change the height of a landed metric (CLS 0) */
[data-dv-root] .dv-big{height:1.15em;line-height:1.15}
[data-dv-root] .ringw .dv-big{height:auto}
/* print / failsafe: final state, never a hidden start state */
@media print{
 html.dv-js [data-dv=count]{visibility:visible!important}
 [data-dv-root] .dv-gx,[data-dv-root] .dv-gy,[data-dv-root] .dv-pp{animation:none!important;transform:none!important}
 [data-dv-root] .dv-pp{opacity:1!important}
 [data-dv-root] .dv-dr,[data-dv-root] .dv-sw{animation:none!important;stroke-dashoffset:0!important}
 [data-dv-root] .dv-wp{animation:none!important;clip-path:none!important}
 [data-dv-root] .dv-nt,[data-dv-root] .dv-fd,[data-dv-root] .dv-rs{animation:none!important;opacity:1!important;transform:none!important}
}
/* home live example (rdDvLiveExample): static layout, fixed track height, no new motion beyond the shared gx/pp reveal */
html[data-rd] .hzx-live{padding:clamp(24px,5vw,56px) 0}
html[data-rd] .hzx-live__card{display:grid;gap:14px;max-width:880px;margin:0 auto;padding:clamp(20px,4vw,36px)}
html[data-rd] .hzx-live__eyebrow{font:600 12px/1 var(--hz-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hz-ink2)}
html[data-rd] .hzx-live__h{margin:0;font:400 clamp(26px,4.4vw,40px)/1.12 var(--hz-serif);color:var(--hz-ink)}
html[data-rd] .hzx-live__sub{margin:0;font:400 15px/1.5 var(--hz-sans);color:var(--hz-ink2)}
html[data-rd] .hzx-live__vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:6px 0 0}
html[data-rd] .hzx-live__c{display:grid;gap:4px;min-width:0}
html[data-rd] .hzx-live__c dt{font:500 12px/1.2 var(--hz-mono);color:var(--hz-ink2)}
html[data-rd] .hzx-live__c dd{margin:0;font:600 clamp(17px,3.6vw,24px)/1.1 var(--hz-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--hz-ink);white-space:nowrap}
html[data-rd] .hzx-live__bar{display:grid;gap:6px}
html[data-rd] .hzx-live__bar .rd-bd li{grid-template-columns:minmax(0,1fr)}
html[data-rd] .hzx-live__ax{display:flex;justify-content:space-between;gap:8px;font:400 11px/1.3 var(--hz-mono);color:var(--hz-ink2)}
html[data-rd] .hzx-live__ax span:nth-child(2){text-align:center}
html[data-rd] .hzx-live__meta{margin:0;font:400 12px/1.6 var(--hz-mono);color:var(--hz-ink2)}
html[data-rd] .hzx-live__meta strong{color:var(--hz-ink);font-weight:600}
html[data-rd] .hzx-live__meta .tvx-fresh{color:var(--hz-ink2)!important;font-size:inherit!important;white-space:normal!important}
html[data-rd] .hzx-live__cta{justify-self:start;margin-top:4px}
@media (max-width:640px){html[data-rd] .hzx-live__vals{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-rd] .hzx-live__ax span:nth-child(2){display:none}html[data-rd] .hzx-live__cta{justify-self:stretch;text-align:center}}