/* ============================================================
   HVAC seasonal demand dashboard, all styles scoped to .vd-hvac
   ============================================================ */

.vd-hvac{
  --hvac-a:#ff8f4d;
  --hvac-a-soft:rgba(255,143,77,.12);
  --hvac-n:#55677a;
  position:relative;
  display:block;
  padding:clamp(16px,2.2vw,26px);
  background:var(--bg-surface,#0c141f);
  border:1px solid var(--line,rgba(0,229,192,0.12));
  border-radius:var(--r-lg,22px);
  color:var(--text,#c2ced8);
  font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.vd-hvac *{box-sizing:border-box;}

/* ---------- head ---------- */
.vd-hvac .hvac-eyebrow{
  display:flex;align-items:center;gap:9px;
  margin:0 0 10px;
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--hvac-a);
}
.vd-hvac .hvac-eyebrow::before{content:"";width:24px;height:1px;background:var(--hvac-a);opacity:.65;}
.vd-hvac .hvac-headline{
  margin:0 0 10px;max-width:30ch;
  font-family:var(--font-display,"Space Grotesk","Segoe UI",system-ui,sans-serif);
  font-weight:600;font-size:clamp(21px,2.7vw,31px);line-height:1.16;letter-spacing:-.018em;
  color:var(--text-hi,#eaf0f6);
}
.vd-hvac .hvac-sub{margin:0 0 18px;max-width:66ch;font-size:14.5px;color:var(--text,#c2ced8);}

/* ---------- KPI tiles ---------- */
.vd-hvac .hvac-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px;
}
.vd-hvac .hvac-kpi{
  padding:12px 13px 13px;
  background:var(--bg-raised,#121c29);
  border:1px solid var(--line,rgba(0,229,192,0.12));
  border-radius:var(--r-md,14px);
}
.vd-hvac .hvac-kpi dt{
  margin:0;
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-kpi dd{
  margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;
}
.vd-hvac .hvac-val{
  font-family:var(--font-display,"Space Grotesk","Segoe UI",system-ui,sans-serif);
  font-weight:600;font-size:clamp(23px,2.4vw,30px);line-height:1;letter-spacing:-.022em;
  color:var(--text-hi,#eaf0f6);
  font-variant-numeric:tabular-nums;
}
.vd-hvac .hvac-from{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11.5px;color:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-chip{
  margin-left:auto;white-space:nowrap;
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11px;color:var(--hvac-a);
  background:var(--hvac-a-soft);
  border:1px solid rgba(255,143,77,.26);
  border-radius:var(--r-pill,999px);
  padding:2px 8px;
}

/* ---------- chart grid ---------- */
.vd-hvac .hvac-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px;}
.vd-hvac .hvac-card{
  padding:14px;
  background:var(--bg-raised,#121c29);
  border:1px solid var(--line,rgba(0,229,192,0.12));
  border-radius:var(--r-md,14px);
}
.vd-hvac .hvac-card--full{grid-column:1 / -1;}
.vd-hvac .hvac-cardhead{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:8px 16px;margin-bottom:10px;
}
.vd-hvac .hvac-cardtitle{
  margin:0 0 3px;
  font-family:var(--font-display,"Space Grotesk","Segoe UI",system-ui,sans-serif);
  font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--text-hi,#eaf0f6);
}
.vd-hvac .hvac-cardnote{margin:0;max-width:58ch;font-size:12.5px;line-height:1.45;color:var(--text-lo,#8496a8);}
.vd-hvac .hvac-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.vd-hvac .hvac-key{display:flex;gap:12px;flex-wrap:wrap;}
.vd-hvac .hvac-key span{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11px;color:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-key i{width:15px;height:2px;border-radius:2px;background:var(--hvac-a);}
.vd-hvac .hvac-key i.base{background:var(--hvac-n);}
.vd-hvac .hvac-toggle{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-lo,#8496a8);
  background:transparent;
  border:1px solid var(--line,rgba(0,229,192,0.12));
  border-radius:var(--r-pill,999px);
  padding:5px 11px;cursor:pointer;
  transition:color .2s var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
             border-color .2s var(--ease-out,cubic-bezier(0.22,1,0.36,1)),
             background .2s var(--ease-out,cubic-bezier(0.22,1,0.36,1));
}
.vd-hvac .hvac-toggle:hover{color:var(--text-hi,#eaf0f6);border-color:var(--line-strong,rgba(0,229,192,0.30));}
.vd-hvac .hvac-toggle[aria-pressed="true"]{
  color:var(--text-hi,#eaf0f6);
  border-color:rgba(255,143,77,.30);
  background:var(--hvac-a-soft);
}
.vd-hvac .hvac-toggle:focus-visible{outline:2px solid var(--hvac-a);outline-offset:2px;}

/* ---------- plot containers ---------- */
.vd-hvac .hvac-plot{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.vd-hvac .hvac-svg{display:block;width:100%;height:auto;overflow:visible;}
.vd-hvac .hvac-svg--season{min-width:540px;}
.vd-hvac .hvac-svg--rank{min-width:420px;}
.vd-hvac .hvac-svg--mix{min-width:260px;}
.vd-hvac .hvac-plot::-webkit-scrollbar{height:6px;}
.vd-hvac .hvac-plot::-webkit-scrollbar-track{background:transparent;}
.vd-hvac .hvac-plot::-webkit-scrollbar-thumb{background:var(--line-strong,rgba(0,229,192,0.30));border-radius:var(--r-pill,999px);}

/* ---------- svg typography ---------- */
.vd-hvac .hvac-tick{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-axis{
  font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-guide-label{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10px;letter-spacing:.12em;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-callout{
  font-family:var(--font-display,"Space Grotesk","Segoe UI",system-ui,sans-serif);
  font-weight:600;font-size:13px;fill:var(--text-hi,#eaf0f6);
}
.vd-hvac .hvac-callout-sub{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-row{
  font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);
  font-size:12.5px;fill:var(--text,#c2ced8);
}
.vd-hvac .hvac-rank{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11.5px;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-rank-new{fill:var(--hvac-a);font-weight:700;}
.vd-hvac .hvac-mixlabel{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.14em;fill:var(--text-lo,#8496a8);
}
.vd-hvac .hvac-segnum text,
.vd-hvac .hvac-segnum{
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:11.5px;font-weight:600;fill:var(--text-hi,#eaf0f6);
}
.vd-hvac .hvac-segnum--dark{fill:#0a1219;}
.vd-hvac .hvac-legend text{
  font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);
  font-size:11px;fill:var(--text-lo,#8496a8);
}

/* ---------- svg geometry ---------- */
.vd-hvac .hvac-grid-line{stroke:var(--line,rgba(0,229,192,0.12));stroke-width:1;}
.vd-hvac .hvac-axis-line{stroke:var(--line-strong,rgba(0,229,192,0.30));stroke-width:1;}
.vd-hvac .hvac-guide{stroke:var(--line-strong,rgba(0,229,192,0.30));stroke-width:1;stroke-dasharray:3 5;}
.vd-hvac .hvac-track{stroke:var(--line,rgba(0,229,192,0.12));stroke-width:1;}
.vd-hvac .hvac-line{fill:none;stroke:var(--hvac-a);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.vd-hvac .hvac-line-base{fill:none;stroke:var(--hvac-n);stroke-width:1.8;stroke-linejoin:round;opacity:.85;}
.vd-hvac .hvac-area{fill:url(#hvac-grad-area);}
.vd-hvac .hvac-shimmer{fill:none;stroke:#ffcfae;stroke-width:2.6;stroke-linecap:round;opacity:0;pointer-events:none;}
.vd-hvac .hvac-pt{fill:var(--bg-raised,#121c29);stroke:var(--hvac-a);stroke-width:2;pointer-events:none;transition:r .16s var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.vd-hvac .hvac-pt--key{fill:var(--hvac-a);}
.vd-hvac .hvac-halo{fill:none;stroke:var(--hvac-a);stroke-width:1.8;opacity:.32;pointer-events:none;transform-box:fill-box;transform-origin:center;}
.vd-hvac .hvac-hit{fill:transparent;cursor:crosshair;}
.vd-hvac .hvac-hit:hover + .hvac-pt{r:6;}
.vd-hvac .hvac-bar{fill:url(#hvac-grad-bar);transform-box:fill-box;transform-origin:left center;}
.vd-hvac .hvac-start{fill:var(--hvac-n);}
.vd-hvac .hvac-end{fill:var(--hvac-a);}
.vd-hvac .hvac-seg--emg{fill:var(--hvac-n);opacity:.85;}
.vd-hvac .hvac-seg--pln{fill:var(--hvac-a);opacity:.42;}
.vd-hvac .hvac-seg--mnt{fill:var(--hvac-a);}
.vd-hvac .hvac-seg{transform-box:fill-box;transform-origin:left center;}
.vd-hvac .hvac-sw{transform:none;}
.vd-hvac .hvac-baseline{transition:opacity .35s var(--ease-out,cubic-bezier(0.22,1,0.36,1));}
.vd-hvac.is-base-off .hvac-baseline{opacity:0;pointer-events:none;}

/* ---------- tooltip ---------- */
.vd-hvac .hvac-tip{
  position:absolute;left:0;top:0;z-index:6;
  max-width:250px;padding:7px 10px;
  background:var(--bg-elevated,#182534);
  border:1px solid var(--line-strong,rgba(0,229,192,0.30));
  border-radius:var(--r-sm,8px);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
  pointer-events:none;opacity:0;transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease;
}
.vd-hvac .hvac-tip.is-on{opacity:1;transform:translateY(0);}
.vd-hvac .hvac-tip b{
  display:block;margin-bottom:2px;font-weight:400;
  font-family:var(--font-mono,"JetBrains Mono",ui-monospace,monospace);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--hvac-a);
}
.vd-hvac .hvac-tip span{
  display:block;
  font-family:var(--font-body,"Inter","Segoe UI",system-ui,sans-serif);
  font-size:13px;line-height:1.35;color:var(--text-hi,#eaf0f6);
}

/* ---------- caption ---------- */
.vd-hvac .hvac-note{
  margin:12px 0 0;font-size:11.5px;line-height:1.4;
  color:var(--text-faint,#55677a);
}

/* ============================================================
   MOTION, everything below is added on top of the static state
   ============================================================ */

/* start states, only once JS has measured the paths */
.vd-hvac.js-anim [data-draw]{stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len);}
.vd-hvac.js-anim .hvac-area{opacity:0;}
.vd-hvac.js-anim .hvac-pt{opacity:0;}
.vd-hvac.js-anim .hvac-halo{opacity:0;}
.vd-hvac.js-anim .hvac-callout-g{opacity:0;}
.vd-hvac.js-anim .hvac-kpi{opacity:0;transform:translateY(10px);}
.vd-hvac.js-anim .hvac-bar{transform:scaleX(0);}
.vd-hvac.js-anim .hvac-start,
.vd-hvac.js-anim .hvac-end,
.vd-hvac.js-anim .hvac-row,
.vd-hvac.js-anim .hvac-rank{opacity:0;}
.vd-hvac.js-anim .hvac-seg{transform:scaleX(0);}
.vd-hvac.js-anim .hvac-segnum text{opacity:0;}

/* live states */
.vd-hvac.js-anim.is-live [data-draw]{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease-out,cubic-bezier(0.22,1,0.36,1));
}
.vd-hvac.js-anim.is-live .hvac-line-base{transition-duration:1.15s;}
.vd-hvac.js-anim.is-live .hvac-area{
  opacity:1;transition:opacity .8s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) .8s;
}
.vd-hvac.js-anim.is-live .hvac-pt{
  opacity:1;
  transition:opacity .35s ease calc(1.25s + var(--i) * .045s),
             r .16s var(--ease-out,cubic-bezier(0.22,1,0.36,1));
}
.vd-hvac.js-anim.is-live .hvac-callout-g{
  opacity:1;transition:opacity .5s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) 1.75s;
}
.vd-hvac.js-anim.is-live .hvac-halo{
  animation:hvac-halo 2.8s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) 1.9s infinite;
}
.vd-hvac.js-anim.is-live .hvac-shimmer{
  animation:hvac-shine 9s linear 2.4s infinite;
}
.vd-hvac.js-anim.is-live .hvac-kpi{
  opacity:1;transform:translateY(0);
  transition:opacity .5s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) calc(var(--i) * .07s),
             transform .6s var(--ease-spring,cubic-bezier(0.34,1.56,0.64,1)) calc(var(--i) * .07s);
}
.vd-hvac.js-anim.is-live .hvac-val--hero{
  animation:hvac-breathe 6s ease-in-out 2.2s infinite;
}
.vd-hvac.js-anim.is-live .hvac-bar{
  transform:scaleX(1);
  transition:transform .9s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) calc(var(--i) * .07s);
}
.vd-hvac.js-anim.is-live .hvac-row,
.vd-hvac.js-anim.is-live .hvac-rank,
.vd-hvac.js-anim.is-live .hvac-start{
  opacity:1;transition:opacity .45s ease calc(var(--i) * .07s);
}
.vd-hvac.js-anim.is-live .hvac-end{
  opacity:1;transition:opacity .35s ease calc(.55s + var(--i) * .07s);
}
.vd-hvac.js-anim.is-live .hvac-seg{
  transform:scaleX(1);
  transition:transform .85s var(--ease-out,cubic-bezier(0.22,1,0.36,1)) calc(var(--i) * .07s);
}
.vd-hvac.js-anim.is-live .hvac-segnum text{
  opacity:1;transition:opacity .4s ease .75s;
}

@keyframes hvac-halo{
  0%{transform:scale(.75);opacity:.6;}
  70%{transform:scale(2.9);opacity:0;}
  100%{transform:scale(2.9);opacity:0;}
}
@keyframes hvac-shine{
  0%{stroke-dasharray:26 900;stroke-dashoffset:926;opacity:0;}
  8%{opacity:.5;}
  55%{opacity:.5;}
  70%{stroke-dasharray:26 900;stroke-dashoffset:0;opacity:0;}
  100%{stroke-dasharray:26 900;stroke-dashoffset:0;opacity:0;}
}
@keyframes hvac-breathe{
  0%,100%{text-shadow:0 0 16px rgba(255,143,77,.16);}
  50%{text-shadow:0 0 26px rgba(255,143,77,.38);}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .vd-hvac .hvac-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .vd-hvac .hvac-grid{grid-template-columns:minmax(0,1fr);}
  .vd-hvac .hvac-headline{max-width:none;}
  .vd-hvac .hvac-cardhead{flex-direction:column;}
}
@media (max-width:430px){
  .vd-hvac .hvac-kpis{grid-template-columns:minmax(0,1fr);}
  .vd-hvac .hvac-chip{margin-left:0;}
}

/* ---------- reduced motion, jump to the end state ---------- */
@media (prefers-reduced-motion:reduce){
  .vd-hvac.js-anim [data-draw]{stroke-dasharray:none;stroke-dashoffset:0;}
  .vd-hvac.js-anim .hvac-area,
  .vd-hvac.js-anim .hvac-pt,
  .vd-hvac.js-anim .hvac-callout-g,
  .vd-hvac.js-anim .hvac-kpi,
  .vd-hvac.js-anim .hvac-row,
  .vd-hvac.js-anim .hvac-rank,
  .vd-hvac.js-anim .hvac-start,
  .vd-hvac.js-anim .hvac-end,
  .vd-hvac.js-anim .hvac-segnum text{opacity:1;transform:none;}
  .vd-hvac.js-anim .hvac-halo{opacity:.32;}
  .vd-hvac.js-anim .hvac-bar,
  .vd-hvac.js-anim .hvac-seg{transform:none;}
  .vd-hvac .hvac-shimmer{display:none;}
  .vd-hvac *,
  .vd-hvac *::before,
  .vd-hvac *::after{transition:none !important;animation:none !important;}
}