/* SunFlow v2: installation page, exploded blueprint. Uses the tokens in site.css. Dennis, Oct 27 2026. */
.bp{padding:0;position:relative;background-color:var(--night);
  background-image:linear-gradient(rgba(71,195,163,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(71,195,163,.09) 1px,transparent 1px),
    linear-gradient(rgba(71,195,163,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(71,195,163,.035) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.bp-track{position:relative}
.bp-stage{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,460px);gap:clamp(24px,4vw,72px);align-items:center;
  width:min(100% - 2*var(--gutter),1680px);margin-inline:auto;padding-block:clamp(32px,5vw,72px)}
.bp-draw{min-width:0}
.bp-svg{width:100%;height:auto;overflow:visible}
.bp-copy{position:relative;min-width:0}
.bp-copy h1{font-size:var(--step-3);max-width:13ch}
.bp-copy .lede{margin-top:var(--s-5)}
.bp-calls{list-style:none;margin:0;padding:0}
.bp-call{position:relative}
.bp-n{font-family:var(--font-display);font-size:var(--step-2);line-height:1;color:var(--green);margin:0 0 .25em}
.bp-name{font-family:var(--font-display);font-size:var(--step-2);line-height:1.1;margin:0 0 .45em;color:var(--snow)}
.bp-what{color:var(--snow);font-size:var(--step-0);line-height:1.55;margin:0 0 .8em}
.bp-spec{color:var(--slate-2);font-size:.95rem;line-height:1.5;margin:0 0 .6em;padding-left:12px;border-left:2px solid var(--mint)}
.bp-src{color:var(--slate-2);font-size:var(--step--1);margin:0}
.bp-note{color:var(--slate-2);font-size:var(--step--1)}
.bp-end .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s-5)}
.bp-end h2{font-size:var(--step-3)}
.bp-cue{display:flex;align-items:center;gap:10px;color:var(--slate-2);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;margin-top:var(--s-6)}
.bp-cue span{width:1px;height:36px;background:linear-gradient(var(--green),transparent)}
.bp-h2{max-width:20ch;margin-bottom:var(--s-7)}
.bp-sources{padding-block:clamp(48px,6vw,80px)}
.bp-sources ul{margin:var(--s-4) 0 0;padding-left:1.1em;max-width:90ch}
.bp-sources li{margin-bottom:14px;font-size:1rem;line-height:1.75}

/* drawing */
.bp-svg text{font-family:var(--font-body)}
.bp-svg .face{stroke:#9FB0C2;stroke-opacity:.6;stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.bp-svg .hatch,.bp-svg .tex{stroke:none;pointer-events:none}
/* material textures sit under a translucent blueprint tint, so the drawing stays line first */
.bp-svg .face{fill-opacity:.58}
.bp-svg .face.top{fill-opacity:.5}
.bp-svg [data-layer=subgrade] .face{fill-opacity:.28}
.bp-svg [data-layer=surface] .face,.bp-svg [data-layer=concrete] .face{fill-opacity:.42}
.bp-svg .pex-warm{fill:#47C3A3;stroke:none;opacity:calc(.04 + var(--warm,var(--heat,0)) * .2);pointer-events:none}
.bp-svg .plane{fill:rgba(71,195,163,.035);stroke:#9FB0C2;stroke-opacity:.45;stroke-dasharray:5 4;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .edge{fill:#0F2236;stroke:#9FB0C2;stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .wire line{stroke:#C9D6E2;stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .pex{fill:none;stroke:#47C3A3;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bp-svg .pex-glow{fill:none;stroke:#47C3A3;stroke-opacity:calc(.16 + var(--warm,var(--heat,0)) * .34);stroke-width:10;stroke-linejoin:round;stroke-linecap:round}
.bp-svg .seam{stroke:#47C3A3;stroke-opacity:.35;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .brk{stroke:#9FB0C2;stroke-opacity:.5;stroke-dasharray:10 4 2 4;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .brush{stroke:#C9D6E2;stroke-opacity:.14;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .joint{stroke:#C9D6E2;stroke-opacity:.55;stroke-dasharray:6 4;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .heat{fill:#47C3A3;opacity:calc(var(--heat,0) * .2)}
.bp-svg .snow{opacity:calc(var(--snow,0) * (1 - var(--melt,0)));transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(1 - var(--melt,0) * .85))}
.bp-svg .snow polygon{fill:#F5F7F6}
.bp-svg .snow .snow-edge{fill:#C9D6E2}
.bp-svg .snow .snow-edge2{fill:#AFBDCB}
.bp-svg .snow .snow-top{fill:#FFFFFF}
.bp-svg .snow .drift{fill:none;stroke:#C9D6E2;stroke-width:1.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bp-svg .vap path{fill:none;stroke:#C9D6E2;stroke-width:2;stroke-linecap:round;opacity:var(--vap,0)}
.bp-svg .post{stroke:#9FB0C2;stroke-width:2;vector-effect:non-scaling-stroke}
.bp-svg .sens{fill:#59C47A}
.bp-svg .ping{fill:none;stroke:#59C47A;stroke-width:1.6;vector-effect:non-scaling-stroke}
.bp-svg .puck{fill:#59C47A;stroke:#07182B;stroke-width:1.5}
.bp-svg .room{fill:rgba(245,247,246,.025);stroke:#9FB0C2;stroke-opacity:.45;stroke-dasharray:6 5;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .room-e{stroke:#9FB0C2;stroke-opacity:.35;stroke-dasharray:6 5;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .pipe{fill:none;stroke-width:3;stroke-linecap:round}
.bp-svg .sup{stroke:#59C47A} .bp-svg .ret{stroke:#47C3A3}
.bp-svg .b-top{fill:#185493;stroke:#47C3A3;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .b-side{fill:#0C427B;stroke:#47C3A3;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .b-side2{fill:#09345F;stroke:#47C3A3;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .m-top{fill:#2A4865;stroke:#C9D6E2;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .m-side{fill:#1D3A55;stroke:#C9D6E2;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .m-side2{fill:#173149;stroke:#C9D6E2;stroke-width:1.2;vector-effect:non-scaling-stroke}
.bp-svg .port{fill:#59C47A}
.bp-svg .pt{fill:#9FB0C2;font-size:15px;font-weight:500}
.bp-svg .dl,.bp-svg .tick{stroke:#C9D6E2;stroke-width:1.1;vector-effect:non-scaling-stroke}
.bp-svg .ext{stroke:#C9D6E2;stroke-opacity:.45;stroke-width:1;vector-effect:non-scaling-stroke}
.bp-svg .dt{fill:#C9D6E2;font-size:16px;font-weight:600;letter-spacing:.02em}
.bp-svg .tblock rect{fill:rgba(7,24,43,.6);stroke:#9FB0C2;stroke-opacity:.55;vector-effect:non-scaling-stroke}
.bp-svg .tblock line{stroke:#9FB0C2;stroke-opacity:.55;vector-effect:non-scaling-stroke}
.bp-svg .tblock text{fill:#9FB0C2;font-size:12.5px;font-weight:500}
.bp-svg .tblock .tb1{fill:#C9D6E2;font-weight:700;letter-spacing:.14em;font-size:11.5px}
.bp-svg .bln-dot{fill:#59C47A}
.bp-svg .bln-tag circle{fill:#07182B;stroke:#59C47A;stroke-width:1.5;vector-effect:non-scaling-stroke}
.bp-svg .bln-tag text{fill:#F5F7F6;font-size:14px;font-weight:700}
.bp-svg .bln-tag{transform:translate(22px,-20px)}
.bp-flakes circle{fill:#F5F7F6;opacity:0}
/* explode: --e is 1 (open) unless the motion version sets it */
.bp-svg .bp-all{transform:translateY(calc((1 - var(--e,1)) * -172px))}
.bp-svg .bp-l{transform:translateY(calc(var(--off) * var(--e,1)))}

/* leaders (motion only) */
.bp-leaders{display:none}
.bp-progress{display:none}

/* ---------- motion version: pinned, full viewport ---------- */
@media (prefers-reduced-motion:no-preference){
  .bp-track{height:940vh}
  .bp-stage{position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100svh - 68px);padding-block:clamp(16px,3vh,40px)}
  .bp-draw{height:100%;display:flex;align-items:center;justify-content:center}
  .bp-svg{width:100%;height:100%}
  .bp-copy{display:grid;align-items:center;padding-bottom:36px}
  .bp-intro,.bp-calls,.bp-end{grid-area:1/1}
  .bp-calls{display:grid;align-items:center}
  .bp-call{grid-area:1/1}
  /* outgoing text clears in 150 ms before incoming text starts, so two callouts never share the space */
  .bp-intro>*,.bp-call>*,.bp-end>*{opacity:0;transform:translateY(16px);transition:opacity 150ms ease,transform 150ms ease}
  .bp-intro.is-on>*,.bp-call.is-on>*,.bp-end.is-on>*{opacity:1;transform:none;transition:opacity 420ms ease 170ms,transform 640ms var(--ease-out) 170ms}
  .is-on>:nth-child(2){transition-delay:240ms}
  .is-on>:nth-child(3){transition-delay:330ms}
  .is-on>:nth-child(4){transition-delay:420ms}
  .is-on>:nth-child(5){transition-delay:500ms}
  .bp-intro.is-on>*{transition:none}
  .bp-call:not(.is-on),.bp-end:not(.is-on),.bp-intro:not(.is-on){pointer-events:none}
  .bp-end:not(.is-on) .actions{visibility:hidden}
  .bp-progress{display:flex;gap:5px;position:absolute;left:0;right:0;bottom:4px}
  .bp-progress span{height:3px;flex:1;background:var(--line-dark);border-radius:2px;overflow:hidden}
  .bp-progress i{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(var(--f,0))}

  .bp-svg{--e:0;--snow:1}
  .bp-svg .bp-l{transition:opacity 420ms ease}
  .bp-svg .bp-l.is-future,.bp-svg .bp-part.is-future{opacity:.13}
  .bp-svg .bp-part{transition:opacity 420ms ease}
  .bp-svg .bp-l.is-on .face,.bp-svg .bp-l.is-on .plane,.bp-svg .bp-l.is-on .edge{stroke:#59C47A;stroke-opacity:1}
  .bp-svg .bp-l.is-on .pex-glow{stroke-opacity:.42}
  .bp-svg .bp-l[data-layer=pex].is-on{--warm:1}
  .bp-svg .pex-warm{transition:opacity 600ms ease}
  .bp-svg .bp-part.is-on .m-top,.bp-svg .bp-part.is-on .m-side,.bp-svg .bp-part.is-on .m-side2{stroke:#59C47A}
  .bp-svg .bp-dim{opacity:0;transition:opacity 420ms ease}
  .bp-open .bp-svg .bp-dim{opacity:.55}
  .bp-open .bp-svg .is-on .bp-dim{opacity:1}
  .bp-svg .bln{opacity:0;transition:opacity 300ms ease}
  .bp-svg .bln.is-on{opacity:1}
  .bp-svg .bln-tag{display:none}
  .bp-flakes circle{animation:bpfall 3.6s linear infinite;animation-delay:calc(var(--d) * -1);animation-play-state:paused}
  .bp-snowing .bp-flakes circle{animation-play-state:running}
  @keyframes bpfall{0%{transform:translate(0,0);opacity:0}15%{opacity:.85}80%{opacity:.85}100%{transform:translate(var(--x),190px);opacity:0}}
  .bp-flakes{opacity:0;transition:opacity 500ms ease}
  .bp-snowing .bp-flakes{opacity:1}

  .bp-leaders{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;transition:opacity 200ms ease}
  .bp-l1{fill:none;stroke:#59C47A;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
  .bp-l2{fill:none;stroke:#C9D6E2;stroke-opacity:.75;stroke-width:1.3;stroke-dasharray:3 5}
  .bp-l2m{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:1}
  .bp-l2end{fill:#07182B;stroke:#C9D6E2;stroke-width:1.3;opacity:0}
  .draw .bp-l1{stroke-dashoffset:0;transition:stroke-dashoffset 520ms var(--ease-out) 120ms}
  .draw .bp-l2m{stroke-dashoffset:0;transition:stroke-dashoffset 640ms var(--ease-in-out) 640ms}
  .draw .bp-l2end{opacity:1;transition:opacity 200ms ease 1200ms}
}

/* phone and small tablet: drawing on top, text below, both inside the pinned viewport */
@media (max-width:899px){
  .bp-svg .dt,.bp-svg .pt,.bp-svg .tblock{display:none}
  .bp-name{font-size:var(--step-1)}
  .bp-n{font-size:var(--step-1)}
  .bp-what{font-size:1rem;line-height:1.5}
  .bp-spec{font-size:.9rem}
}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .bp-track{height:860vh}
  .bp-stage{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:12px;padding-block:8px 28px}
  .bp-draw{min-height:0}
  .bp-copy{align-self:end;align-items:end}
  .bp-calls{align-items:end}
  .bp-copy h1{font-size:var(--step-3)}
  .bp-cue{margin-top:var(--s-4)}
  .bp-end h2{font-size:var(--step-2)}
  .bp-end .lede{font-size:1rem}
  .bp-copy{padding-bottom:22px}
  .bp-progress{bottom:0}
}
/* phones and small tablets (Oct 27 mobile pass): tap-through. Nothing pinned: drawing, then the step bar
   (stepper.js), then the callout. Callouts stack in one grid cell so the block never changes height. */
@media (max-width:899px) and (prefers-reduced-motion:no-preference){
  .bp-track{height:auto}
  .bp-stage{position:relative;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;padding-block:16px 48px}
  .bp-draw{height:auto;display:block;touch-action:pan-y}
  .bp-svg{height:auto;width:100%}
  .bp-track[data-stepper] .bp-copy,.bp-copy{padding-bottom:0;align-self:stretch}
  .bp-track:not(.has-stepper) .bp-draw{margin-bottom:96px}
  .bp-copy>.stepper{position:static}
  .bp-cue{display:none}
  .bp-l1{display:none}
  .bp-progress{display:none!important}
  .bp-what{font-size:1rem}
  .bp-spec,.bp-src{font-size:1rem}
}
@media (min-width:600px) and (max-width:899px) and (prefers-reduced-motion:no-preference){
  .bp-copy{max-width:640px}
}

/* ---------- reduced motion: static exploded diagram, every callout visible ---------- */
@media (prefers-reduced-motion:reduce){
  .bp-stage{display:block}
  .bp-draw{max-width:1040px;margin:0 auto var(--s-6)}
  .bp-cue,.bp-flakes,.bp-svg .snow,.bp-svg .vap{display:none}
  .bp-svg{--heat:1}
  .bp-intro{max-width:760px;margin:0 auto var(--s-6);text-align:left}
  .bp-calls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6) var(--s-8);max-width:1040px;margin:0 auto var(--s-8)}
  .bp-end{max-width:1040px;margin:0 auto}
  .bp-svg .bln-tag{transform:translate(22px,-20px)}
}
@media (prefers-reduced-motion:reduce) and (max-width:899px){
  .bp-calls{grid-template-columns:1fr}
  .bp-svg .bln-tag{transform:translate(30px,-34px) scale(2.3)}
  .bp-svg .bln-dot{transform:scale(2)}
}

/* lede wording per mode: "scroll" on the pinned version, "swipe" on the phone tap-through */
.on-tap{display:none}
@media (max-width:899px) and (prefers-reduced-motion:no-preference){.on-pin{display:none}.on-tap{display:inline}}