/* ============================================================
   ALITHOS — calculator visualizations (js/calc-viz.js adds the markup).
   Loaded after guide.css on calculators/*.html. Every chart is
   aria-hidden decoration; the real numbers stay in .ct-out.
   Nothing is hidden unless JS ran; no motion under reduced motion.
   ============================================================ */

/* ---------- inputs: focus glow + paired range sliders ---------- */
.calc-tool .cv-field label{transition:color .25s}
.calc-tool .cv-field:focus-within label{color:var(--teal-deep)}
.calc-tool input:not(.cv-range), .calc-tool select{transition:border-color .25s, box-shadow .3s}
.calc-tool input:not(.cv-range):focus, .calc-tool select:focus{box-shadow:0 0 0 3px rgba(46,159,232,.2), 0 6px 22px rgba(46,159,232,.22)}
.calc-tool input:not(.cv-range):hover, .calc-tool select:hover{border-color:#9FBCD0}

.cv-slide{position:relative; --p:0; margin:2px 0 -6px}
.calc-tool input.cv-range{-webkit-appearance:none; appearance:none; display:block; width:100%; height:44px; min-height:44px; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; cursor:pointer; touch-action:pan-y}
.calc-tool input.cv-range:focus{outline:none; box-shadow:none}
.cv-range::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--teal-deep), var(--teal) calc(var(--p) * 100%), #D5DEE5 calc(var(--p) * 100%))}
.cv-range::-moz-range-track{height:4px; border-radius:2px; background:#D5DEE5}
.cv-range::-moz-range-progress{height:4px; border-radius:2px; background:linear-gradient(90deg, var(--teal-deep), var(--teal))}
.cv-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:#fff; border:2px solid var(--teal); box-shadow:0 0 0 4px rgba(46,159,232,.14), 0 2px 6px rgba(14,34,51,.22); transition:transform .2s, box-shadow .25s}
.cv-range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--teal); box-shadow:0 0 0 4px rgba(46,159,232,.14), 0 2px 6px rgba(14,34,51,.22); transition:transform .2s, box-shadow .25s}
.cv-slide:hover .cv-range::-webkit-slider-thumb, .cv-slide.cv-act .cv-range::-webkit-slider-thumb{transform:scale(1.12); box-shadow:0 0 0 7px rgba(46,159,232,.18), 0 0 18px rgba(46,159,232,.45)}
.cv-slide:hover .cv-range::-moz-range-thumb, .cv-slide.cv-act .cv-range::-moz-range-thumb{transform:scale(1.12); box-shadow:0 0 0 7px rgba(46,159,232,.18), 0 0 18px rgba(46,159,232,.45)}
.cv-bubble{position:absolute; bottom:34px; left:clamp(34px, calc(11px + var(--p) * (100% - 22px)), calc(100% - 34px)); transform:translate(-50%, 6px); opacity:0; pointer-events:none; white-space:nowrap; background:var(--ink); color:#fff; font:600 .7rem/1 var(--mono); letter-spacing:.04em; padding:6px 8px; border-radius:4px; box-shadow:0 6px 16px rgba(14,34,51,.25); transition:opacity .2s, transform .25s cubic-bezier(.2,.7,.2,1); z-index:3}
.cv-bubble::after{content:""; position:absolute; left:50%; top:100%; margin-left:-4px; border:4px solid transparent; border-top-color:var(--ink)}
.cv-slide:hover .cv-bubble, .cv-slide.cv-act .cv-bubble{opacity:1; transform:translate(-50%, 0)}

/* ---------- outputs: count overlay + soft pulse + DSCR color shift ---------- */
.calc-tool .ct-out div{transition:background .4s, box-shadow .4s}
.calc-tool .ct-out b{transition:color .4s}
.calc-tool .ct-out b.cv-tw{position:relative; -webkit-text-fill-color:transparent}
.calc-tool .ct-out b.cv-tw::after{content:attr(data-cv); position:absolute; left:0; right:0; top:0; -webkit-text-fill-color:currentColor}
.calc-tool .ct-out div.cv-z-ok{background:#E8F3FC; box-shadow:inset 3px 0 0 var(--teal)}
.calc-tool .ct-out div.cv-z-ok b{color:var(--teal-deep)}
.calc-tool .ct-out div.cv-z-near{background:#FBF5E3; box-shadow:inset 3px 0 0 var(--gold)}
.calc-tool .ct-out div.cv-z-near b{color:#7A5C0C}
.calc-tool .ct-out div.cv-z-low{background:#FBEDEA; box-shadow:inset 3px 0 0 #D2553B}
.calc-tool .ct-out div.cv-z-low b{color:#9E3A23}

/* ---------- the dark live panel ---------- */
.cv-panel{position:relative; margin:20px 0 0; padding:16px 18px 18px; border-radius:8px; overflow:hidden; color:var(--light);
  background:radial-gradient(130% 120% at 85% -10%, #12365A 0%, #0A1C2C 45%, var(--void) 100%); border:1px solid rgba(92,188,245,.22);
  box-shadow:0 18px 40px rgba(6,18,29,.2), inset 0 1px 0 rgba(255,255,255,.04)}
.cv-panel::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background-image:linear-gradient(rgba(159,180,196,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(159,180,196,.07) 1px, transparent 1px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000, transparent 80%); mask-image:radial-gradient(ellipse at 70% 30%, #000, transparent 80%)}
.cv-panel::after{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, rgba(92,188,245,.7), transparent); opacity:0; pointer-events:none}
html.cv-on .cv-panel.cv-in::after{animation:cvScan 6s ease-in-out infinite}
@keyframes cvScan{0%{top:0; opacity:0} 10%{opacity:.7} 50%{top:100%; opacity:.4} 60%{opacity:0} 100%{top:100%; opacity:0}}
.cv-panel > *{position:relative}
.cv-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px}
.cv-k, .cv-sub, .cv-hb-k, .cv-sq-read span, .cv-ti-gap span, .cv-179-fx span, .cv-hero-k{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist)}
.cv-k{color:var(--teal-hi)}
.cv-live{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist)}
.cv-live i{width:7px; height:7px; border-radius:50%; background:#3ED29A; box-shadow:0 0 8px #3ED29A}
html.cv-on .cv-live i{animation:cvBlink 2.2s ease-in-out infinite}
@keyframes cvBlink{50%{opacity:.35}}
.cv-sub{margin:0 0 8px; max-width:none}
.cv-sub b{color:var(--light); font-family:var(--body); font-size:.95rem; letter-spacing:0; text-transform:none; margin-left:6px; font-variant-numeric:tabular-nums}
.cv-panel b{font-variant-numeric:tabular-nums}
html.cv-on .cv-panel .cv-body{opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
html.cv-on .cv-panel.cv-in .cv-body{opacity:1; transform:none}

/* legends + swatches */
.cv-leg{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font-size:.82rem; color:var(--mist)}
.cv-leg-row{display:flex; flex-wrap:wrap; gap:6px 18px}
.cv-leg li{display:flex; align-items:center; gap:8px; margin:0}
.cv-leg b{color:var(--light); margin-left:2px}
.cv-sw{width:10px; height:10px; border-radius:2px; flex:none; display:inline-block}
.cv-sw-p{background:linear-gradient(135deg, var(--teal), var(--teal-hi)); box-shadow:0 0 6px rgba(46,159,232,.6)}
.cv-sw-g{background:var(--gold); box-shadow:0 0 6px rgba(212,167,44,.55)}
.cv-sw-o{border:1.5px dashed var(--teal-hi); background:rgba(92,188,245,.1)}
.cv-sw-c{background:#4F6D86}
.cv-sw-k{background:#8BA3B6}
.cv-sw-d{background:rgba(92,188,245,.28); border:1px solid rgba(92,188,245,.5)}

/* ---------- gauge (DSCR + hub hero) ---------- */
.cv-gauge{display:block; width:100%; height:auto; overflow:visible}
.cv-g-ring{fill:none; stroke:rgba(159,180,196,.16); stroke-width:1; stroke-dasharray:2 4}
.cv-g-z{fill:none; stroke-width:15; opacity:.28}
.cv-g-low{stroke:#E8694F} .cv-g-near{stroke:var(--gold)} .cv-g-ok{stroke:var(--teal)}
.cv-g-prog{fill:none; stroke:var(--teal-hi); stroke-width:15; transition:stroke .5s; filter:drop-shadow(0 0 6px rgba(92,188,245,.55))}
.cv-z-near .cv-g-prog{stroke:var(--gold); filter:drop-shadow(0 0 6px rgba(212,167,44,.55))}
.cv-z-low .cv-g-prog{stroke:#E8694F; filter:drop-shadow(0 0 6px rgba(232,105,79,.55))}
.cv-g-tick{stroke:rgba(159,180,196,.35); stroke-width:1}
.cv-g-maj{stroke:rgba(159,180,196,.7); stroke-width:1.5}
.cv-g-tl{fill:var(--mist); font:600 10px var(--mono); text-anchor:middle}
.cv-g-line{stroke:var(--gold); stroke-width:2.5; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(212,167,44,.8))}
.cv-g-ll{fill:var(--gold); font:700 9.5px var(--mono); letter-spacing:.14em; text-anchor:middle}
.cv-g-needle path{fill:#F6F8F9; filter:drop-shadow(0 0 5px rgba(92,188,245,.9))}
.cv-g-hub{fill:#0A1C2C; stroke:var(--teal-hi); stroke-width:2}
.cv-g-hub2{fill:var(--teal-hi)}
.cv-g-val{fill:var(--light); font:800 34px var(--display); text-anchor:middle; letter-spacing:-.02em; transition:fill .5s}
.cv-z-ok .cv-g-val{fill:var(--teal-hi)} .cv-z-near .cv-g-val{fill:#F0C855} .cv-z-low .cv-g-val{fill:#F08A73}

/* ---------- DSCR panel ---------- */
.cv-dscr-grid{display:grid; gap:18px; align-items:center}
@media (min-width:700px){ .cv-dscr-grid{grid-template-columns:1.05fr 1fr; gap:26px} }
.cv-dscr-g{max-width:380px; margin:0 auto; width:100%}
.cv-g-status{display:flex; justify-content:center; align-items:center; gap:8px; margin:6px 0 0; max-width:none; font-size:.86rem; color:var(--light); text-align:center}
.cv-dot{width:8px; height:8px; border-radius:50%; background:var(--mist); flex:none; transition:background .4s, box-shadow .4s}
.cv-z-ok .cv-dot{background:var(--teal-hi); box-shadow:0 0 10px var(--teal-hi)}
.cv-z-near .cv-dot{background:var(--gold); box-shadow:0 0 10px var(--gold)}
.cv-z-low .cv-dot{background:#E8694F; box-shadow:0 0 10px #E8694F}
.cv-hb{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px; margin-bottom:14px}
.cv-hb-v{font-size:1.02rem; color:var(--light)}
.cv-hb-t{grid-column:1 / -1; display:block; position:relative; height:8px; border-radius:4px; background:rgba(159,180,196,.13); overflow:hidden}
.cv-hb-f{position:absolute; inset:0; display:block; border-radius:4px; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--teal-deep), var(--teal-hi)); box-shadow:0 0 10px rgba(92,188,245,.5)}
.cv-hb-ob .cv-hb-f{background:linear-gradient(90deg, #3D5A73, #8BA3B6); box-shadow:none}
.cv-hb-nd .cv-hb-f{background:linear-gradient(90deg, #8A6A12, var(--gold)); box-shadow:0 0 10px rgba(212,167,44,.45)}
.cv-chip{display:inline-flex; align-items:baseline; gap:8px; margin:4px 0 0; padding:8px 12px; border:1px solid rgba(159,180,196,.22); border-radius:999px; font-size:.82rem; color:var(--mist); max-width:none; transition:border-color .4s}
.cv-chip-v{color:var(--light); font-size:.98rem}
.cv-z-ok .cv-chip{border-color:rgba(92,188,245,.55)} .cv-z-near .cv-chip, .cv-z-low .cv-chip{border-color:rgba(212,167,44,.55)}

/* ---------- Loan panel ---------- */
.cv-loan-grid{display:grid; gap:20px; align-items:center}
@media (min-width:700px){ .cv-loan-grid{grid-template-columns:minmax(200px, .8fr) 1.3fr} }
.cv-donut-w{display:grid; justify-items:center}
.cv-donut{width:100%; max-width:210px; height:auto; display:block}
.cv-dn-track{fill:none; stroke:rgba(159,180,196,.12); stroke-width:20}
.cv-dn-p, .cv-dn-i{fill:none; stroke-width:20; stroke-dasharray:0 100}
.cv-dn-p{stroke:var(--teal); filter:drop-shadow(0 0 6px rgba(46,159,232,.55))}
.cv-dn-i{stroke:var(--gold); filter:drop-shadow(0 0 6px rgba(212,167,44,.5))}
.cv-dn-k{fill:var(--mist); font:600 8.5px var(--mono); letter-spacing:.14em; text-anchor:middle}
.cv-dn-v{fill:var(--light); font:800 19px var(--display); text-anchor:middle}
.cv-dn-s{fill:var(--gold); font:600 10.5px var(--mono); text-anchor:middle; letter-spacing:.06em}
.cv-donut-w .cv-leg{justify-items:start}
.cv-curve{display:block; width:100%; height:auto; overflow:visible}
.cv-grid{stroke:rgba(159,180,196,.12); stroke-width:1}
.cv-axis{stroke:rgba(159,180,196,.4)}
.cv-io{fill:rgba(212,167,44,.12); stroke:none}
.cv-io-t{fill:var(--gold); font:600 8px var(--mono); letter-spacing:.12em}
.cv-line{fill:none; stroke:var(--teal-hi); stroke-width:2.5; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(92,188,245,.7))}
.cv-area{stroke:none}
.cv-m5{stroke:rgba(212,167,44,.6); stroke-width:1; stroke-dasharray:3 3}
.cv-dot5{fill:var(--void); stroke:var(--gold); stroke-width:2.5; filter:drop-shadow(0 0 5px rgba(212,167,44,.9))}
.cv-dot5-t{fill:var(--gold); font:700 9.5px var(--mono); letter-spacing:.06em}
.cv-yl{fill:var(--mist); font:600 9px var(--mono); text-anchor:end}
.cv-xl{fill:var(--mist); font:600 9px var(--mono); text-anchor:middle}

/* ---------- Square footage panel ---------- */
.cv-sq-read{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:12px}
.cv-sq-read div{border:1px solid rgba(159,180,196,.18); border-radius:6px; padding:10px 12px; background:rgba(6,18,29,.45)}
.cv-sq-read span{display:block; margin-bottom:4px}
.cv-sq-read b{display:block; font-size:1.12rem; color:var(--light); line-height:1.2}
.cv-sq-read div:first-child b{color:var(--teal-hi)}
@media (max-width:480px){ .cv-sq-read{gap:6px} .cv-sq-read div{padding:8px} .cv-sq-read b{font-size:.92rem} .cv-sq-read span{font-size:.54rem; letter-spacing:.1em} }
.cv-plan{display:block; width:100%; height:auto}
.cv-suite{fill:rgba(46,159,232,.04); stroke:var(--teal-hi); stroke-width:2; filter:drop-shadow(0 0 6px rgba(46,159,232,.45))}
.cv-op rect{fill:rgba(46,159,232,.14); stroke:var(--teal-hi); stroke-width:1.3; transition:fill .4s, stroke .4s}
.cv-op ellipse{fill:none; stroke:rgba(92,188,245,.7); stroke-width:1.2}
.cv-op .cv-door{fill:none; stroke:rgba(159,180,196,.55); stroke-width:1}
.cv-op text, .cv-core text{fill:var(--light); font:700 9px var(--mono); letter-spacing:.06em; text-anchor:middle}
.cv-op-opt rect{fill:rgba(92,188,245,.05); stroke-dasharray:4 3}
.cv-op-opt text{fill:var(--mist)}
.cv-op-ri rect{fill:rgba(212,167,44,.1); stroke:var(--gold); stroke-dasharray:4 3}
.cv-op-ri ellipse{stroke:rgba(212,167,44,.5); stroke-dasharray:2 3}
.cv-op-ri text{fill:var(--gold)}
.cv-core rect{fill:rgba(159,180,196,.05); stroke:rgba(159,180,196,.45); stroke-width:1}
.cv-core text{fill:var(--mist); font-size:8.5px}
.cv-corr{stroke:rgba(159,180,196,.35); stroke-dasharray:6 5}
.cv-dim{stroke:rgba(212,167,44,.75); stroke-width:1.2; fill:none}
.cv-dim-t{fill:var(--gold); font:700 10px var(--mono); letter-spacing:.1em; text-anchor:middle}
.cv-sq .cv-leg{margin-top:6px}

/* ---------- stacked bars (TI + Section 179) ---------- */
.cv-stack{position:relative; height:34px; border-radius:6px; background:rgba(159,180,196,.1); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(159,180,196,.16)}
.cv-stack.cv-thin{height:10px; border-radius:5px}
.cv-seg{position:absolute; top:0; bottom:0; left:0; width:0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.cv-seg em{font:700 .62rem var(--mono); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:#06121D; white-space:nowrap; transition:opacity .3s}
.cv-seg.cv-nolbl em{opacity:0}
.cv-seg-a{background:linear-gradient(90deg, var(--teal-deep), var(--teal-hi)); box-shadow:0 0 14px rgba(92,188,245,.55)}
.cv-seg-g{background:repeating-linear-gradient(-45deg, #D4A72C 0 10px, #C0951F 10px 20px); background-size:28.28px 28.28px; box-shadow:0 0 16px rgba(212,167,44,.5)}
html.cv-on .cv-panel.cv-in .cv-seg-g{animation:cvStripe 1.4s linear infinite}
@keyframes cvStripe{to{background-position:28.28px 0}}
.cv-ti .cv-seg-g{box-shadow:0 0 0 2px rgba(240,200,85,.9) inset, 0 0 18px rgba(212,167,44,.55)}
.cv-seg-c{background:#4F6D86}
.cv-seg-k{background:#8BA3B6}
.cv-ticks{display:flex; justify-content:space-between; margin:6px 0 14px; font:600 .6rem var(--mono); color:var(--mist); letter-spacing:.08em}
.cv-ti-top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:12px}
.cv-ti-big{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.cv-ti-big b{font-size:2.1rem; line-height:1; font-weight:800; color:var(--teal-hi); text-shadow:0 0 18px rgba(92,188,245,.45)}
.cv-ti-big span{font-size:.86rem; color:var(--mist); max-width:22ch}
.cv-ti-gap{text-align:right; padding:8px 12px; border:1px solid rgba(212,167,44,.55); border-radius:6px; background:rgba(212,167,44,.08)}
.cv-ti-gap span{display:block; color:var(--gold)}
.cv-ti-gap b{font-size:1.25rem; color:#F0C855}
.cv-ti.cv-full .cv-ti-gap{border-color:rgba(92,188,245,.5); background:rgba(46,159,232,.08)}
.cv-mix{border-top:1px solid rgba(159,180,196,.14); padding-top:12px}

.cv-179-row{margin-bottom:18px}
.cv-limit{position:relative; height:16px; margin:34px 0 30px; border-radius:8px; background:rgba(159,180,196,.1); box-shadow:inset 0 0 0 1px rgba(159,180,196,.16)}
.cv-lim-bar, .cv-lim-use{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:8px}
.cv-lim-bar{background:rgba(92,188,245,.22); box-shadow:inset 0 0 0 1px rgba(92,188,245,.5)}
.cv-lim-use{background:linear-gradient(90deg, var(--teal-deep), var(--teal-hi)); box-shadow:0 0 12px rgba(92,188,245,.6); min-width:0}
.cv-lim-mk{position:absolute; top:-5px; bottom:-5px; width:0; border-left:1.5px dashed var(--gold)}
.cv-lim-mk em{position:absolute; top:calc(100% + 4px); right:4px; font:600 .58rem var(--mono); font-style:normal; letter-spacing:.06em; color:var(--gold); white-space:nowrap}
.cv-lim-pin{position:absolute; top:-8px; bottom:-8px; width:2px; margin-left:-1px; background:#F6F8F9; box-shadow:0 0 8px rgba(246,248,249,.8)}
.cv-lim-pin em{position:absolute; bottom:calc(100% + 4px); left:-2px; font:600 .6rem var(--mono); font-style:normal; letter-spacing:.06em; color:var(--light); white-space:nowrap}
.cv-lim-pin.cv-pin-r em{left:auto; right:-2px}
.cv-lim-pin em b{color:var(--teal-hi)}
.cv-179-fx{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px; padding:12px 14px; border:1px solid rgba(92,188,245,.35); border-radius:6px; background:rgba(46,159,232,.07)}
.cv-179-fx b{font-size:1.5rem; color:var(--teal-hi); text-shadow:0 0 16px rgba(92,188,245,.4)}

/* ---------- calculators hub: card previews + hero gauge ---------- */
.cv-mini-w{display:block; position:relative; width:96px; height:44px; margin:0 0 16px; pointer-events:none; z-index:1}
.cv-mini{display:block; width:100%; height:100%; overflow:visible}
.cv-mini .cv-d{fill:none; stroke:rgba(159,180,196,.6); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.cv-mini .cv-mh{stroke:var(--teal-hi); filter:drop-shadow(0 0 3px rgba(92,188,245,.8))}
.cv-mini .cv-mg{stroke:var(--gold)}
.cv-mini .cv-mt{stroke-width:5}
.cv-mini .cv-ma{stroke:rgba(159,180,196,.3); stroke-width:1}
.cv-mini .cv-dash{stroke-dasharray:3 3}
.cv-mini .cv-mf{fill:var(--teal-hi)}
.cv-mini .cv-mo{fill:none; stroke:rgba(159,180,196,.35)}
.cv-mini .cv-mfb{fill:var(--teal)}
.cv-mini .cv-mgb{fill:var(--gold)}
.cv-mini .cv-b{transform-box:fill-box; transform-origin:left center}
.cv-mini .cv-b.cv-v{transform-origin:center bottom}
html.cv-on .cv-card .cv-mini .cv-d:not(.cv-dash){stroke-dasharray:1; stroke-dashoffset:1}
html.cv-on .cv-card .cv-mini .cv-b{transform:scaleX(0)}
html.cv-on .cv-card .cv-mini .cv-b.cv-v{transform:scaleY(0)}
html.cv-on .cv-card .cv-mini .cv-mf{opacity:0}
html.cv-on .cv-card.cv-play .cv-mini .cv-d{stroke-dashoffset:0; transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1)}
html.cv-on .cv-card.cv-play .cv-mini .cv-mh{transition-delay:.25s}
html.cv-on .cv-card.cv-play .cv-mini .cv-mg{transition-delay:.45s}
html.cv-on .cv-card.cv-play .cv-mini .cv-b{transform:none; transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s}
html.cv-on .cv-card.cv-play .cv-mini .cv-b2{transition-delay:.3s}
html.cv-on .cv-card.cv-play .cv-mini .cv-b3{transition-delay:.45s}
html.cv-on .cv-card.cv-play .cv-mini .cv-mf{opacity:1; transition:opacity .4s ease .7s}
.cv-card:hover .cv-mini .cv-d{stroke:rgba(159,180,196,.85)}
.cv-card:hover .cv-mini .cv-mh{stroke:#8FD3FA}

.cv-hero-gauge{position:absolute; right:max(24px, calc((100vw - 1200px) / 2)); top:50%; width:min(29vw, 380px); transform:translateY(-38%); pointer-events:none; display:none}
@media (min-width:960px){ .cv-hero-gauge{display:block} }
.cv-hero-k{text-align:center; margin:0 0 6px; max-width:none; color:var(--teal-hi)}
.cv-hero-cap{display:flex; justify-content:center; align-items:center; gap:8px; margin:4px 0 0; max-width:none; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--light)}
.cv-hero-cap b{font-weight:600}
html.cv-on .cv-hero-gauge{opacity:0; animation:cvHeroIn 1.2s cubic-bezier(.2,.7,.2,1) .35s forwards}
@keyframes cvHeroIn{from{opacity:0; transform:translateY(-32%) scale(.96)} to{opacity:1; transform:translateY(-38%)}}

/* ---------- field alignment: inputs line up across a row even when one label wraps ---------- */
@media (min-width:700px){
  .calc-tool .ct-grid > div > label:first-child:not(:has(input)){min-height:calc(2 * 1.55em + 2px); display:flex; align-items:flex-end; line-height:1.55}
}

/* ---------- phones: SVG labels scale down with the chart, so draw them larger ---------- */
@media (max-width:560px){
  .cv-g-tl{font-size:14px} .cv-g-ll{font-size:13px; letter-spacing:.1em}
  .cv-xl, .cv-yl{font-size:13px} .cv-dot5-t{font-size:13px} .cv-io-t{font-size:12px}
  .cv-op text{font-size:17px} .cv-core text{font-size:15px} .cv-dim-t{font-size:18px}
  .cv-limit{margin-bottom:46px}
  .cv-lim-end em{top:calc(100% + 20px)}
}

/* ---------- reduced motion: final state, no movement ---------- */
@media (prefers-reduced-motion: reduce){
  .cv-panel::after, .cv-live i, .cv-seg-g, .cv-hero-gauge{animation:none!important}
  .cv-panel .cv-body, .cv-hero-gauge{opacity:1!important; transform:none!important; transition:none!important}
  .cv-hero-gauge{transform:translateY(-38%)!important}
  .cv-bubble, .cv-range::-webkit-slider-thumb, .calc-tool .ct-out div, .calc-tool .ct-out b, .cv-g-prog, .cv-g-val, .cv-op rect, .cv-dot{transition:none!important}
  .cv-mini .cv-d{stroke-dashoffset:0!important; transition:none!important}
  .cv-mini .cv-b{transform:none!important; transition:none!important}
  .cv-mini .cv-mf{opacity:1!important}
}

/* article-body paragraph colors must not leak into the dark panel */
.article-body .cv-panel p{color:var(--light)}
.article-body .cv-panel p.cv-sub, .article-body .cv-panel .cv-chip{color:var(--mist)}
.article-body .cv-panel .cv-ti-big span{color:var(--mist)}
.article-body .cv-hero-gauge p{color:var(--light)}