/* Roof-build widget (homepage only; linked from index.html only).
   Mechanism shared with the roofer group (reference build: Exterior Plus). Words live in the page;
   colors and chrome here are The Reasonable Roofers' own (ink, sage, copper; Bricolage + Public Sans). */

.rb{
  --rb-vh:1vh; --rb-hdr:73px; --rb-bar:0px;
  --rb-text:var(--ink); --rb-muted:#4a4f40; --rb-line:var(--line); --rb-paper:#fff;
  --rb-ease:cubic-bezier(.22,1,.36,1);
  --rb-wood:#B07A45; --rb-ply:#D9B98A; --rb-seam:#B8935E; --rb-metal:#B9C0B8; --rb-metal-dk:#838b7f;
  --rb-ice:#23261f; --rb-felt:#CBCFC3; --rb-felt-line:#A9AE9D;
  --rb-shingle:#4B4540; --rb-shingle-dk:#3A3531; --rb-shingle-lt:#5F5852; --rb-ridge:#26221F;
  --rb-wall:#F3F4EE; --rb-wall-line:#CDD1C2; --rb-wall-side:#DDE0D3; --rb-trim:var(--ink);
  --rb-glass:var(--ink-3); --rb-door:var(--copper); --rb-brick:#98563F; --rb-mortar:#C99C87;
  --rb-ground:#D8DACF;
  --rb-now:var(--copper); --rb-done:var(--sage-dark);
  --rb-stage:min(calc(100 * var(--rb-vh) - var(--rb-hdr) - var(--rb-bar) - 1.5rem), 780px);
}
@supports (height:1svh){.rb{--rb-vh:1svh}}

.rb-head{max-width:64ch}
.rb-track{position:relative;height:calc(var(--rb-stage) + 210 * var(--rb-vh));margin-top:clamp(1.2rem,2vw,2rem)}
.rb-stage{position:sticky;top:calc(var(--rb-hdr) + .75rem);height:var(--rb-stage);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1rem,3vw,2.6rem);align-items:center}

.rb-draw{margin:0;background:var(--rb-paper);border-radius:var(--radius);box-shadow:var(--shadow-1);
  padding:clamp(.5rem,1.6vw,1.2rem);min-height:0}
.rb-draw svg{display:block;width:100%;height:auto;aspect-ratio:640/320;max-height:calc(var(--rb-stage) - 2.6rem)}

.rb-side{display:flex;flex-direction:column;gap:1rem;min-height:0}
.rb-zero{display:none;margin:0;color:var(--rb-muted)}
.rb-list{list-style:none;margin:0;padding:0;counter-reset:rb}
.rb-list li{position:relative;padding:.42rem 0 .42rem 2.2rem;border-top:1px solid var(--rb-line)}
.rb-list li:first-child{border-top:0}
.rb-list li::before{counter-increment:rb;content:counter(rb);position:absolute;left:0;top:.46rem;
  width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font:700 .8rem/1 "Public Sans",sans-serif;background:var(--rb-line);color:var(--rb-muted);
  transition:background-color .2s var(--rb-ease),color .2s var(--rb-ease)}
.rb-name{display:block;font:700 1.15rem/1.15 "Bricolage Grotesque","Arial Black",sans-serif;letter-spacing:-.01em;color:var(--rb-text)}
.rb-say{display:block;margin-top:.22rem;color:var(--rb-muted);font-size:.98rem;line-height:1.5;max-width:46ch}

.rb-ctl{display:grid;gap:.2rem}
.rb-ctl-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem}
.rb-ctl label{font-weight:700;color:var(--rb-text)}
.rb-out{color:var(--rb-muted);font-size:.95rem}
.rb-range{width:100%;height:44px;margin:0;accent-color:var(--rb-done);cursor:pointer}
.rb-cta{gap:.6rem}
.rb-cta .btn{min-height:44px}

.rb-layer{transition:transform .28s var(--rb-ease),opacity .28s var(--rb-ease)}

/* live states (set by main.js once the widget initializes, before it scrolls into view) */
.rb-live .rb-list li.is-done::before{content:"\2713";background:var(--rb-done);color:#fff}
.rb-live .rb-list li.is-now::before{background:var(--rb-now);color:#fff}
.rb-live .rb-list li.is-next .rb-name{color:var(--rb-muted)}
.rb-scroll .rb-list li:not(.is-now) .rb-say{display:none}
.rb-scroll.is-zero .rb-zero{display:block}

@media (max-width:860px){
  .rb-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;gap:.8rem}
  .rb-draw{padding:.4rem}
  .rb-draw svg{max-height:calc(var(--rb-stage) * .44)}
  .rb-side{gap:.7rem}
  .rb-list{position:relative}
  /* out of flow but still rendered, so the CSS counter keeps each layer's real number */
  .rb-scroll .rb-list li:not(.is-now){position:absolute;inset:0 0 auto 0;visibility:hidden}
  .rb-scroll .rb-list li{border-top:0;padding-block:0}
  .rb-scroll .rb-list li::before{top:.05rem}
  .rb-cta .btn{flex:1 1 auto}
}

/* short laptop screens: tighten the list so nine layers, the slider and the buttons fit the stage */
@media (min-width:861px) and (max-height:760px){
  .rb-list li{padding-block:.26rem}
  .rb-list li::before{top:.3rem}
  .rb-name{font-size:1.1rem}
  .rb-say{font-size:.94rem;line-height:1.45}
  .rb-side{gap:.75rem}
}

/* phones: the fixed bottom bar (Call / Text / Estimate, 54px) sits over the stage, so leave room for it;
   on short phones the drawing gives up height. */
@media (max-width:760px){.rb{--rb-bar:calc(54px + env(safe-area-inset-bottom))}}
@media (max-width:760px) and (max-height:760px){
  .rb-draw svg{max-height:calc(var(--rb-stage) * .36)}
  .rb-say{font-size:.94rem;line-height:1.45}
}

/* Static fallback: reduced motion, or a screen too short for the sticky stage. The finished
   roof and the full list show; the slider still steps through the layers, instantly. */
@media (prefers-reduced-motion:reduce),(max-height:540px),(max-width:760px) and (max-height:600px){
  .rb-track{height:auto}
  .rb-stage{position:static;height:auto}
  .rb-draw svg{max-height:none}
  .rb-layer,.rb-list li::before{transition:none}
}

/* drawing colors. Roof planes are drawn in feet and scaled onto the house, so strokes keep a
   fixed screen width (non-scaling). */
.rb svg .w{fill:var(--rb-wall)} .rb svg .ws{fill:var(--rb-wall-side)} .rb svg .wl{stroke:var(--rb-wall-line);stroke-width:1}
.rb svg .tr{fill:var(--rb-trim)} .rb svg .gl{fill:var(--rb-glass)} .rb svg .dr{fill:var(--rb-door)}
.rb svg .gr{fill:var(--rb-ground)} .rb svg .br{fill:url(#rbBrick)} .rb svg .brs{fill:var(--rb-brick);filter:brightness(.8)}
.rb svg .cap{fill:#B7BFC7} .rb svg .pipe{fill:#E7EBEF;stroke:#9AA6B2;stroke-width:1}
.rb svg .wd,.rb svg .sm,.rb svg .icl,.rb svg .fel,.rb svg .rvl,.rb svg .rgl,.rb svg .mt,.rb svg .vm,.rb svg .vml{vector-effect:non-scaling-stroke}
.rb svg .wd{stroke:var(--rb-wood);stroke-width:3.2;stroke-linecap:round;fill:none}
.rb svg .ply{fill:var(--rb-ply)} .rb svg .sm{stroke:var(--rb-seam);stroke-width:1.1;fill:none}
.rb svg .slot{fill:#1B1F26}
.rb svg .mt{fill:var(--rb-metal);stroke:var(--rb-metal-dk);stroke-width:.8}
.rb svg .ice{fill:var(--rb-ice)} .rb svg .icl{stroke:#3B424D;stroke-width:1;fill:none}
.rb svg .fe{fill:var(--rb-felt)} .rb svg .fel{stroke:var(--rb-felt-line);stroke-width:1;fill:none}
.rb svg .shm{fill:url(#rbShH)} .rb svg .shw{fill:url(#rbShV)} .rb svg .shd{fill:var(--rb-shingle-dk)}
.rb svg .vm{stroke:#E6EBF0;fill:none;stroke-linecap:butt} .rb svg .vseam{stroke:var(--rb-shingle-dk);stroke-width:1.6;fill:none;vector-effect:non-scaling-stroke} .rb svg .vml{stroke:#7F8C99;stroke-width:1.2;fill:none}
.rb svg .rv{fill:#2E343D} .rb svg .rvl{stroke:#76818F;stroke-width:1;fill:none}
.rb svg .rg{fill:var(--rb-ridge)} .rb svg .rgl{stroke:#6B7686;stroke-width:1.2;fill:none}