/* Heater list builder. Layered on mockup.css, same tokens. */

.builder{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:var(--s7);align-items:start}
/* grid children must be allowed to shrink below their content width */
.builder > *{min-width:0}
.steps{min-width:0}

/* The right rail holds the drawing and the list, one above the other, and stays
   put while you work down the steps. Everything you change is visible as you
   change it, which is the whole point of the tool. */
.rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:var(--s5);
  max-height:calc(100vh - 104px);min-width:0}
.rail > .viz-panel{flex:0 0 auto}
.rail > .cart{flex:1 1 auto;min-height:120px}

@media (max-width:1040px){
  /* One column, and the rail stops being a column of its own: the drawing goes
     above the steps and stays on screen while you work down them, the list
     drops to the bottom. Flex, not grid: a sticky grid item can only stick
     inside its own row, which is exactly its own height, so it never moves. */
  .builder{display:flex;flex-direction:column;gap:var(--s6);align-items:stretch}
  .rail{display:contents}
  /* flex items default to min-width:auto, which lets a tile grid push the
     whole column wider than the viewport */
  .steps,.viz-panel,.cart{min-width:0;max-width:100%}
  .viz-panel{order:-1;position:sticky;top:var(--header-offset);z-index:6;transition:top .22s ease}
  .steps{order:0}
  .cart{order:1}
}

.step{margin-bottom:var(--s8)}
.step-head{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)}
.step-head .n{font-family:"Archivo Narrow",sans-serif;font-size:1.6rem;line-height:1;color:var(--heat-400)}
.step-head h2{margin:0}
.step > p.hint{color:var(--ink-600);font-size:.92rem;margin-bottom:var(--s5)}

/* choice tiles, the "toppings" */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);list-style:none;padding:0;margin:0}
.tiles li{margin:0}
.tile{position:relative;display:flex;flex-direction:column;gap:var(--s2);width:100%;text-align:left;
  background:var(--surface);border:1.5px solid var(--ink-200);border-radius:var(--radius);
  padding:var(--s4);cursor:pointer;font:inherit;color:var(--ink-800);min-height:44px}
.tile:hover{border-color:var(--heat-400)}
.tile[aria-pressed="true"]{border-color:var(--heat-500);background:var(--heat-100);
  box-shadow:inset 0 0 0 1px var(--heat-500)}
.tile[aria-pressed="true"]::after{content:"";position:absolute;top:8px;right:8px;width:16px;height:16px;
  border-radius:50%;background:var(--heat-600);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tile .code{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;font-weight:600;color:var(--ink-500);letter-spacing:.04em}
.tile[aria-pressed="true"] .code{color:var(--heat-700)}
.tile .t{font-family:"Archivo Narrow",sans-serif;font-weight:700;font-size:1.02rem;color:var(--ink-900);line-height:1.2}
.tile .d{font-size:.8rem;color:var(--ink-600);line-height:1.4}
.tile svg{align-self:flex-start}

.tiles-fam{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.tile-fam{align-items:flex-start;gap:var(--s3);padding:var(--s4)}
.tile-fam svg{width:72px;height:44px}

/* plain labelled field, used by the quantity, note and customer boxes */
.spec{display:flex;flex-direction:column;gap:var(--s2)}
.spec label{font-size:.82rem;font-weight:600;color:var(--ink-800)}
.spec .u{font-weight:400;color:var(--ink-500)}
.spec input,.spec select{background:var(--surface);border:1.5px solid var(--ink-200);border-radius:var(--radius);
  padding:var(--s3);font:inherit;font-size:.95rem;min-height:44px;color:var(--ink-900);width:100%}
.spec input:focus-visible,.spec select:focus-visible{border-color:var(--heat-500)}
.spec .range{font-size:.75rem;color:var(--ink-500)}
.spec.bad input{border-color:var(--heat-700)}
.spec .err{font-size:.75rem;color:var(--heat-700);font-weight:600}

/* live drawing panel, top of the rail */
.viz-panel{background:var(--surface);border:1px solid var(--ink-200);border-radius:var(--radius);
  padding:var(--s4) var(--s5) var(--s5);box-shadow:0 1px 2px hsl(214 32% 11% / .05)}
.viz-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3)}
.viz-head h2{margin:0;font-size:1.05rem}
.viz-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.viz-fold{display:none;align-items:center;justify-content:center;min-height:44px;
  padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--ink-300);
  border-radius:var(--radius);font:inherit;font-size:.8rem;font-weight:600;color:var(--ink-700);
  cursor:pointer;white-space:nowrap}
.viz-fold:hover{border-color:var(--heat-500);color:var(--ink-900)}
.viz-panel #vizArt svg{width:100%;height:auto;display:block}
.viz-panel .cap{font-size:.78rem;color:var(--ink-600);margin:var(--s3) 0 0;line-height:1.45}
@media (max-width:1040px){
  .viz-panel{width:100%;padding:var(--s3) var(--s4) var(--s4);box-shadow:0 6px 14px hsl(214 32% 11% / .10)}
  .viz-panel #vizArt svg{max-height:min(22dvh,168px)}
  .viz-panel .cap{display:none}
  .viz-fold{display:inline-flex}
  .viz-head h2{font-size:.95rem}
  .viz-panel.is-folded{padding:var(--s2) var(--s4);background:var(--surface)}
  .viz-panel.is-folded .viz-head{margin-bottom:0;flex-wrap:nowrap;gap:var(--s2)}
  .viz-panel.is-folded .viz-head h2{flex:1 1 auto;min-width:0}
  .viz-panel.is-folded #vizArt,
  .viz-panel.is-folded .viewtoggle{display:none}
  .dimfield input,.dimfield select,.spec input,.who input{
    scroll-margin-top:72px;scroll-margin-bottom:16px}
  #builderView{padding-bottom:var(--builder-kb,0px)}
}
@media (max-width:700px){
  #builderView > .hero{padding:var(--s5) 0}
  #builderView > .hero h1{font-size:1.85rem}
  #builderView > .hero .lede{font-size:1rem}
  #builderView > .band{padding:var(--s6) 0}
  .step{margin-bottom:var(--s6)}
}

.partcode{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin-top:var(--s5);
  background:var(--ink-900);border-radius:var(--radius);padding:var(--s4) var(--s5)}
.partcode .lab{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:hsl(214 14% 62%)}
.partcode .val{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;color:#fff;font-weight:600;word-break:break-all}

.addrow{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:flex-end;margin-top:var(--s5)}
.addrow .spec{max-width:150px}
.addrow .spec-note{max-width:260px}
@media (max-width:700px){
  .addrow{flex-direction:column;align-items:stretch}
  .addrow .spec,.addrow .spec-note{max-width:none}
  .addrow .btn{width:100%;text-align:center}
}

/* the list, second in the rail */
.cart{background:var(--surface);border:1px solid var(--ink-200);
  border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.cart-head{flex:0 0 auto;background:var(--ink-900);color:#fff;padding:var(--s4) var(--s5);display:flex;
  justify-content:space-between;align-items:center;gap:var(--s3)}
.cart-head h2{color:#fff;margin:0;font-size:1.15rem}
.badge{background:var(--heat-500);color:var(--ink-900);font-weight:700;font-size:.82rem;
  border-radius:20px;padding:2px var(--s3);font-family:Inter,sans-serif;min-width:26px;text-align:center}
.cart-body{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (max-width:1040px){.cart-body{max-height:50vh}}
.cart-empty{padding:var(--s7) var(--s5);text-align:center;color:var(--ink-500);font-size:.9rem}
.cart-empty svg{opacity:.5;margin-bottom:var(--s3)}
.line{padding:var(--s4) var(--s5);border-bottom:1px solid var(--ink-100);display:grid;
  grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
.line:last-child{border-bottom:0}
.line .pc{font-family:ui-monospace,Menlo,monospace;font-size:.76rem;color:var(--heat-700);font-weight:600;word-break:break-all}
.line .nm{font-family:"Archivo Narrow",sans-serif;font-weight:700;color:var(--ink-900);font-size:1rem}
.line .sp{font-size:.78rem;color:var(--ink-600);grid-column:1/-1;line-height:1.5}
.line .q{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-900);white-space:nowrap}
.line .rm{background:none;border:0;color:var(--ink-600);cursor:pointer;font-size:.76rem;
  padding:var(--s2);text-decoration:underline;justify-self:end;min-height:44px}
.line .rm:hover{color:var(--heat-700)}
.cart-foot{flex:0 0 auto;padding:var(--s5);border-top:1px solid var(--ink-200);background:var(--surface-sunk);
  display:flex;flex-direction:column;gap:var(--s3)}
.cart-foot .btn{width:100%;text-align:center}
.cart-foot .tot{display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink-700)}
.cart-foot .tot b{color:var(--ink-900);font-variant-numeric:tabular-nums}

.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s4);margin-top:var(--s5)}

/* document preview */
.docwrap{background:var(--ink-900);padding:var(--s7) 0}
.doc{background:#fff;max-width:820px;margin:0 auto;padding:var(--s8);border-radius:var(--radius);
  box-shadow:0 12px 40px hsl(214 32% 5% / .4)}
.doc h1,.doc .dochead{font-size:1.9rem;margin-bottom:var(--s2)}
.doc .docmeta{display:flex;flex-wrap:wrap;gap:var(--s5);font-size:.85rem;color:var(--ink-600);
  border-bottom:2px solid var(--ink-900);padding-bottom:var(--s4);margin-bottom:var(--s5)}
.doc .docmeta b{display:block;color:var(--ink-900);font-weight:600}
.doc table{min-width:0;font-size:.82rem}
.doc thead th{background:var(--ink-900);color:#fff}
.doc .foot{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--ink-200);
  font-size:.8rem;color:var(--ink-600)}
.docbar{max-width:820px;margin:0 auto var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.docbar .btn{flex:0 0 auto}
.docbar .spacer{flex:1 1 auto}
.docbar .back{background:none;border:0;color:hsl(214 16% 78%);text-decoration:underline;cursor:pointer;
  font:inherit;font-size:.9rem;min-height:44px;padding:0 var(--s2)}
.docbar .back:hover{color:#fff}

.wa{background:#15803d} /* darkened from the brand green for AA on white text */
.wa:hover{background:#116331}

[hidden]{display:none !important}

@media print{
  body{background:#fff}
  .mockbar,.topbar,.masthead,.docbar,.builder,.crumb,footer.site,.jump{display:none !important}
  .docwrap{background:#fff;padding:0}
  .doc{box-shadow:none;max-width:none;padding:0;border-radius:0}
  .doc thead th{background:#000 !important;color:#fff !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
}

/* ---------- size fields: plain grid, numbered to match the drawing ---------- */
.dimfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:var(--s4)}
.dimfield{display:flex;flex-direction:column;gap:4px;min-width:0}
.dimfield label{font-size:.82rem;font-weight:600;color:var(--ink-900);line-height:1.3;
  display:flex;align-items:center;gap:var(--s2)}
.dimfield .sym{font-family:"Archivo Narrow",sans-serif;color:var(--heat-700);font-size:.92rem}
.dimfield input,.dimfield select{background:var(--surface);border:1.5px solid var(--ink-300);
  border-radius:var(--radius);padding:var(--s2) var(--s3);font:inherit;font-size:.95rem;
  min-height:44px;color:var(--ink-900);width:100%;font-variant-numeric:tabular-nums}
.dimfield input:focus-visible,.dimfield select:focus-visible{border-color:var(--heat-500);outline:3px solid var(--focus);outline-offset:1px}
.dimfield .range{font-size:.75rem;color:var(--ink-600);line-height:1.3}
.dimfield.bad input{border-color:var(--heat-700);background:var(--heat-100)}
.dimfield .err{font-size:.75rem;color:var(--heat-700);font-weight:600;line-height:1.3}
.dimfield .num{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:var(--heat-600);color:#fff;font-size:.76rem;font-weight:700;
  font-family:Inter,sans-serif;flex:0 0 auto}
/* a size field the drawing is currently answering to */
.dimfield.live input,.dimfield.live select{border-color:var(--heat-500)}

/* electrical values are not dimensions, so they sit apart from the sizes */
.elecfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--s4);margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--ink-200)}
.elecfields:empty{display:none}

/* ---------- flat / isometric toggle ---------- */
.viewtoggle{display:inline-flex;gap:2px;background:var(--surface-sunk);border:1px solid var(--ink-200);
  border-radius:var(--radius);padding:3px}
.viewtoggle button{background:none;border:0;border-radius:2px;font:inherit;font-size:.8rem;
  font-weight:600;color:var(--ink-600);padding:var(--s2) var(--s3);min-height:44px;cursor:pointer}
.viewtoggle button:hover{color:var(--ink-900)}
.viewtoggle button[aria-pressed="true"]{background:var(--ink-900);color:#fff}
.viewtoggle[hidden]{display:none}