/* =========================================================
   Shed/Garage Builder - tabbed layout
   Left: Shed / Garage switch, then the controls in three tabs
   (Size & Roof, Doors & Windows, Colors), one open at a time.
   Right: the dimensioned drawing beside the 3D build, with the
   Send-for-quote button and the bookmarks under them.
   Only this page loads it; the controls inside the tabs keep
   their styles from configurator.css.
   ========================================================= */
.bld-page{background:var(--bg)}
.bld-page .callbar{display:none}
.bld{display:grid;grid-template-columns:390px minmax(0,1fr);align-items:stretch}
/* site.css pads every <section> for the marketing pages; not in here */
.bld section{padding:0}

/* ---------------- left: switch + tabs ---------------- */
.bld-side{border-right:1px solid var(--line);background:#fff;display:flex;flex-direction:column;min-width:0;position:relative}
.bld-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:22px 22px 16px;
}
.bld-eyebrow{
  font-family:'Inter',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);margin-bottom:6px;
}
.bld-title{font-size:clamp(1.5rem,1.8vw,1.8rem);line-height:1.05;white-space:nowrap}
.bld-reset{
  flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.74rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);background:#fff;
  border:1px solid var(--line-2);border-radius:8px;padding:9px 13px;transition:border-color .16s;
}
.bld-reset svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bld-reset:hover{border-color:var(--ink)}

/* Shed / Garage switch */
.bld-kind{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 22px 18px;border-bottom:1px solid var(--line)}
.bld-kind button{
  display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left;
  background:#fff;border:1.5px solid var(--line-2);border-radius:10px;padding:8px 10px;
  font-family:'Inter',sans-serif;font-size:.82rem;font-weight:700;color:var(--ink-2);
  transition:border-color .16s,box-shadow .16s;
}
.bld-kind button svg{width:36px;height:auto;flex:none}
.bld-kind button span{white-space:nowrap}
.bld-kind button:hover{border-color:var(--ink)}
.bld-kind button.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,106,31,.13);color:var(--ink)}

/* the tabs */
.bld .cfg-panel.bld-steps{
  display:block;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;flex:1;
}
.bld-step{border-bottom:1px solid var(--line);position:relative}
.bld-step.open::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.bld-step-head{
  width:100%;display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;
  background:none;border:0;padding:19px 22px;font-family:'Inter',sans-serif;color:var(--ink-2);
}
.bld-step-head:hover{background:var(--bg-2)}
.bld-step.open .bld-step-head:hover{background:none}
.bld-step-name{font-size:1.08rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.bld-step.open .bld-step-name{font-weight:800;color:var(--ink)}
.bld-step-val{
  margin-left:auto;font-style:normal;font-size:.8rem;color:var(--gray-2);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.bld-caret{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-2);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.bld-step.open .bld-caret{transform:rotate(180deg);margin-left:auto}

.bld-step-body{display:none;padding:0 22px 24px}
.bld-step.open .bld-step-body{display:block;animation:bldIn .22s ease}
@keyframes bldIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* the old groups keep their titles but lose their card chrome inside a tab */
.bld-step-body .grp{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.bld-step-body .grp+.grp{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.bld-step-body .tiles{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.bld-step-body .cfg-colors{border:0;box-shadow:none;padding:0;background:none;border-radius:0}
.bld-step-body .cfg-colors-head{display:none}
.bld-step-body .cfg-colors-row+.cfg-colors-row{margin-top:18px}
.bld-step-body .cfg-colors .sw{width:34px;height:34px;border-radius:8px}
.bld-step-body .cfg-colors .swatches{gap:8px}

.bld-more{
  display:flex;align-items:center;gap:8px;margin:18px 22px 24px;
  font-family:'Inter',sans-serif;font-size:.86rem;font-weight:700;color:var(--ink-2);
}
.bld-more:hover{color:var(--acc)}

/* ---------------- right: drawing + build, send + bookmarks ---------------- */
.bld-main{display:flex;flex-direction:column;min-width:0;background:var(--bg-2);padding:16px;gap:14px}
.bld-stage{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}

.bld-side .cfg-plan{
  display:flex;flex-direction:column;min-height:0;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-md);overflow:hidden;
}
.bld-side .cfg-plan-head{padding:9px 12px;display:flex;align-items:center;gap:8px}
.bld-side .cfg-plan-head>span{display:none}  /* the tab already says it */
.bld-side .cfg-plan-head em{display:none}
.bld-side .cfg-plan-btn span{display:none}
.bld-side .cfg-plan-btn{padding:6px 9px}
.bld-side .cfg-plan-body{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:6px 10px}
.bld-side .cfg-plan-body svg{width:100%;height:100%;max-height:none}

.bld-stage .cfg-canvas{position:relative;min-height:0;height:100%}
.bld-stage #cfgCanvas{height:100%}
.bld-stage #cfgCanvas.rb3d{aspect-ratio:auto;height:100%;max-height:none}
.bld-stage #cfgCanvas svg{width:100%;height:100%;max-height:none}
.bld-stage .cfg-live{display:none}

.bld-foot{display:grid;grid-template-columns:minmax(260px,auto) minmax(0,1fr);gap:14px;align-items:stretch}
.bld-send{
  display:flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);padding:14px 16px;
}
.bld-send .send-build-bar{margin:0;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.bld-send .send-build-btn{width:100%;padding:14px 20px;font-size:1rem}
.bld-send .send-build-note{display:block!important;text-align:center;font-size:.76rem}
.bld-marks .cfg-marks{height:100%;box-shadow:var(--shadow-sm);padding:12px 14px}
.bld-marks .cfg-marks-head{margin-bottom:8px}
.bld-marks .cfg-marks-list{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------------- wide screens: fill the window under the header ---------------- */
@media (min-width:1041px){
  .bld{height:calc(100vh - var(--hdr-h,88px));height:calc(100svh - var(--hdr-h,88px))}
  .bld-side{overflow-y:auto;scrollbar-width:thin}
}
@media (min-width:1041px) and (max-width:1400px){
  .bld{grid-template-columns:340px minmax(0,1fr)}
  .bld-side .cfg-plan-btn span{display:none}
  .bld-side .cfg-plan-btn{padding:6px 9px}
  .bld-side .cfg-plan-head em{display:none}
  .bld-marks .cfg-marks-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------------- phones + tablets: build on top, tabs below ---------------- */
@media (max-width:1040px){
  .bld{grid-template-columns:1fr}
  .bld-main{order:-1;padding:12px}
  .bld-stage{grid-template-columns:1fr}
  .bld-stage .cfg-canvas{order:-1;height:auto}
  .bld-stage #cfgCanvas.rb3d{height:44svh}
  .bld-foot{grid-template-columns:1fr}
  .bld-marks .cfg-marks-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .bld-side{border-right:0}
  .bld-head{padding:18px 16px 14px}
  .bld-kind{padding:0 16px 16px}
  .bld-step-head{padding:17px 16px}
  .bld-step-body{padding:0 16px 22px}
  .bld-more{margin:16px}
  .bld-page .callbar{display:flex}
}
@media (max-width:620px){
  .bld-step-val{display:none}
  .bld-side .cfg-plan-btn span{display:none}
}

/* full screen presentation still works: the tabs travel into its side panel */
.cfg-fs-body .bld-steps{display:block}