/* Blog interactives (docs/runbooks/blog-interactives.md). Everything reads the page tokens, so it flips with the blog theme:
   --topic-accent / --topic-text / --topic-ink come from src/styles/blog-topics.css (gold, cyan, emerald); --watt-r-* are the HUD inks and panels.
   The hero scenes (.viz-hero) are fixed-dark stages in every theme, like the databases themselves. */
.viz{--vz-btn:var(--topic-accent);--vz-btn-ink:var(--topic-ink);--vz-line:color-mix(in srgb,var(--topic-accent) 38%,transparent);
  margin:1.75rem 0 2.25rem;padding:clamp(14px,3.5vw,24px);border-radius:18px;background:var(--watt-r-panel);border:1px solid var(--vz-line);
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--topic-accent) 55%,transparent);color:var(--watt-r-ink);position:relative;overflow:visible;overflow-wrap:anywhere;font-size:1rem;line-height:1.5}
/* reserve the piece's height before its script mounts, so the fallback text swapping for the piece does not shift the page (CLS). Values sit a little under the measured heights at 390px wide; they are floors, never caps. */
.viz[data-viz]{min-height:300px}
.viz[data-viz="lux-grade-swipe"]{min-height:380px}.viz[data-viz="lux-clear-quiz"]{min-height:340px}.viz[data-viz="lux-cost-stack"]{min-height:380px}.viz[data-viz="lux-red-flags"]{min-height:340px}
.viz[data-viz="cn-duty-explorer"]{min-height:380px}.viz[data-viz="cn-cltc-race"]{min-height:380px}.viz[data-viz="cn-range-reveal"]{min-height:360px}.viz[data-viz="cn-decision-path"]{min-height:260px}
/* light page: the gold fill is too pale for white text, use the deeper topic text value for button fills */
html.theme-light .topic-luxury-database .viz{--vz-btn:var(--topic-text);--vz-btn-ink:#fff}
@media (prefers-color-scheme:light){:root:not(.theme-dark):not(.theme-light) .topic-luxury-database .viz{--vz-btn:var(--topic-text);--vz-btn-ink:#fff}}
.viz *{box-sizing:border-box}
.viz p{margin:0 0 .7rem;color:var(--watt-r-ink-2)}
.viz h4{margin:0 0 .5rem;font-size:1.15rem;font-weight:900;color:var(--watt-r-ink);letter-spacing:-.01em;line-height:1.2}
.viz-eyebrow{font:800 .75rem/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--topic-text);margin-bottom:.55rem}
.viz-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:.75rem 0}
.viz-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:0}
.viz-lab{font:700 .75rem/1.2 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--watt-r-muted)}
.viz input[type=month],.viz input[type=date],.viz input[type=number],.viz input[type=text],.viz select{min-height:44px;width:100%;padding:8px 12px;border-radius:10px;
  border:1px solid var(--vz-line);background:var(--watt-r-panel-2);color:var(--watt-r-ink);font:600 1rem/1.2 inherit}
.viz input[type=range]{width:100%;min-height:36px;accent-color:var(--vz-btn)}
.viz :focus-visible{outline:3px solid var(--topic-accent);outline-offset:2px}
.viz button{font:inherit;cursor:pointer;touch-action:manipulation}
.viz-chip{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--vz-line);background:transparent;color:var(--watt-r-ink-2);font-weight:700}
.viz-chip[aria-pressed=true]{background:var(--vz-btn);color:var(--vz-btn-ink);border-color:transparent}
.viz-btn{min-height:44px;padding:10px 18px;border-radius:12px;border:0;background:var(--vz-btn);color:var(--vz-btn-ink);font-weight:800;letter-spacing:.03em}
.viz-btn.ghost{background:transparent;color:var(--topic-text);border:1px solid var(--vz-line)}
.viz-card{background:var(--watt-r-panel-2);border:1px solid var(--vz-line);border-radius:14px;padding:14px;min-width:0}
.viz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px}
.viz-small{font-size:.8rem;color:var(--watt-r-muted)}
.viz-foot{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--vz-line);font-size:.78rem;color:var(--watt-r-muted)}
.viz-ok{color:var(--topic-text);font-weight:900}.viz-no{color:var(--watt-warn);font-weight:900}
.viz-bar{height:10px;border-radius:99px;background:color-mix(in srgb,var(--watt-r-ink) 12%,transparent);overflow:hidden}
.viz-bar>i{display:block;height:100%;width:0;border-radius:99px;background:var(--topic-accent);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.viz-ring{--p:0;width:64px;height:64px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--topic-accent) calc(var(--p)*1%),color-mix(in srgb,var(--watt-r-ink) 14%,transparent) 0)}
.viz-ring::after{content:attr(data-t);width:48px;height:48px;border-radius:50%;background:var(--watt-r-panel-2);display:grid;place-items:center;font:800 .75rem/1 ui-monospace,Consolas,monospace;color:var(--watt-r-ink)}
.viz-ring.warn{background:conic-gradient(var(--watt-warn) calc(var(--p)*1%),color-mix(in srgb,var(--watt-r-ink) 14%,transparent) 0)}
/* THE RESULT IS THE HERO: the output panel is the loudest thing in a piece and sits right next to the control that changes it. */
.viz-out{background:color-mix(in srgb,var(--topic-accent) 14%,var(--watt-r-panel-2));border:2px solid var(--topic-accent);border-radius:16px;padding:16px 18px;margin:.75rem 0;font-size:1.125rem;line-height:1.5;color:var(--watt-r-ink)}
.viz-out p{font-size:1.0625rem;color:var(--watt-r-ink);margin:0 0 .5rem}
.viz-out .big{display:block;font-size:clamp(2rem,9vw,2.9rem);font-weight:900;letter-spacing:-.03em;line-height:1.05;color:var(--topic-text)}
.viz-out .sub{font-weight:800;font-size:1.2rem;color:var(--watt-r-ink);margin:.1rem 0 .5rem}
.viz-out ul{margin:.3rem 0 0;padding-left:1.2rem;font-size:1rem;color:var(--watt-r-ink-2)}.viz-out li{margin:.25rem 0}
.viz-out.warn{background:color-mix(in srgb,var(--watt-warn) 16%,var(--watt-r-panel-2));border-color:var(--watt-warn)}
.viz-out.warn .big{color:var(--watt-warn)}
.viz-out.flash{animation:viz-flash .7s ease-out}
@keyframes viz-flash{0%{transform:translateY(10px);box-shadow:0 0 0 0 var(--topic-accent);filter:brightness(1.35)}60%{box-shadow:0 0 0 8px transparent}100%{transform:none;filter:none}}
.viz-sticky{position:sticky;top:var(--viz-sticky-top,72px);z-index:5;background:var(--watt-r-panel);padding:6px 0 8px;margin:0 0 6px;border-bottom:1px solid var(--vz-line)}
.viz-hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* confetti in the topic colours */
.viz-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.viz-conf i{position:absolute;top:-10px;width:8px;height:12px;border-radius:2px;animation:viz-fall 1.6s ease-in forwards}
@keyframes viz-fall{to{transform:translate3d(var(--dx),420px,0) rotate(540deg);opacity:0}}

/* hero scenes: fixed-dark stage in every theme */
.viz-hero{--s1:#0B0906;--s2:#15110A;--sa:#E2BE6A;--sh:#FFF1C9;margin:1.5rem 0 2rem;border-radius:18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--sa) 45%,transparent);
  background:linear-gradient(160deg,var(--s2),var(--s1));box-shadow:0 22px 50px -26px var(--sa)}
.viz-hero.cn{--s1:#061015;--s2:#0A1A21;--sa:#22d3ee;--sh:#67e8f9}
.viz-hero.em{--s1:#050E12;--s2:#0C2429;--sa:#3BF0C8;--sh:#8BFFE4}
.viz-hero svg{display:block;width:100%;height:auto}
.viz-hero figcaption{padding:.55rem .9rem .75rem;font-size:.78rem;color:var(--sh);opacity:.92}
.vh-glow{animation:vh-pulse 3.2s ease-in-out infinite}
.vh-sweep{animation:vh-sweep 5s linear infinite}
.vh-wheel{animation:vh-spin 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
.vh-scan{animation:vh-scan 3.6s ease-in-out infinite}
.vh-road{animation:vh-road 1.1s linear infinite}
.vh-drift{animation:vh-drift 9s ease-in-out infinite alternate}
@keyframes vh-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes vh-sweep{from{transform:translateX(-160px)}to{transform:translateX(760px)}}
@keyframes vh-spin{to{transform:rotate(360deg)}}
@keyframes vh-scan{0%,100%{transform:translateY(0)}50%{transform:translateY(120px)}}
@keyframes vh-road{to{transform:translateX(-60px)}}
@keyframes vh-drift{from{transform:translateX(-18px)}to{transform:translateX(18px)}}
@media (prefers-reduced-motion:reduce){.vh-glow,.vh-sweep,.vh-wheel,.vh-scan,.vh-road,.vh-drift,.viz-conf i,.viz-out.flash{animation:none!important}.viz-bar>i,.viz *{transition:none!important}}
@media (max-width:420px){.viz-chip{padding:8px 11px}}

/* turntable supercar hero (docs/drafts/pillars/hero-kit/supercar-hero.cjs): 4 views (side, front, side mirrored, rear), each held ~3 s, squash-turn of ~0.5 s between them (never more than two visible at once); the rings spin; static side view when motion is reduced */
.viz-hero.sc svg{max-height:380px}
.viz-hero.sc figcaption{padding:.4rem .8rem .5rem;font-size:.75rem;line-height:1.3}
.sc-pose{opacity:0}.sc-pose.p0{opacity:1}
@keyframes sc-pose{0%{opacity:0;transform:scaleX(.08)}3%{opacity:1;transform:scaleX(1)}22%{opacity:1;transform:scaleX(1)}25%{opacity:0;transform:scaleX(.08)}100%{opacity:0;transform:scaleX(.08)}}
@keyframes sc-dash-a{to{stroke-dashoffset:-1000}}
@keyframes sc-dash-b{to{stroke-dashoffset:1000}}
@media (prefers-reduced-motion:no-preference){
.sc-pose{animation:sc-pose 14s ease-in-out infinite;animation-delay:calc(var(--i) * 3.5s - 14s);transform-box:fill-box;transform-origin:50% 100%}
.sc-ring.a{animation:sc-dash-a 40s linear infinite}.sc-ring.b{animation:sc-dash-b 28s linear infinite}
.sc-sweep{animation-duration:7s}
}
@media (prefers-reduced-motion:reduce){.sc-ring,.sc-sweep{animation:none!important}.sc-sweep{display:none}}