/* /calc/ — hero with the valve render, and the frame the inlined Heat Explorer widget
   sits in. Loaded after plant-inventory-inline.css, which carries the widget's own rules
   rewritten under .he-scope; everything here is the join between the two designs.
   Rules are ordered: hero, then the calculator band. */

/* ── HERO ───────────────────────────────────────────────────────────────── */
/* claude-integration.css owns the old one-column hero: it sets background:#fff and caps
   .rule / h1 / .meta at 58% of the column. This file loads after it and undoes all three,
   because the hero is now black and two-column. */
.calc-hero{background:var(--dark);color:#fff;padding:92px 0 0}
.calc-hero .meta{padding-bottom:16px;max-width:none;gap:12px 28px}
.calc-hero .meta .mono{color:rgba(255,255,255,.46)}
.calc-hero .meta .mono b{color:#fff;font-weight:400}
.calc-hero .rule{background:rgba(255,255,255,.16);max-width:none}
.calc-hero h1{color:#fff;max-width:none;margin:20px 0 0}

/* One screen: the render is a full-height panel bleeding off the right edge, the copy has
   its own column on the left. Nothing is laid over the pipework — a scrim wide enough to
   carry text would have covered the fittings, which start at 17% of the frame.
   Height is measured from the viewport, not from a max-width, so the hero cannot run past
   the fold; 64px is the fixed nav. */
.calc-hero{display:flex;flex-direction:column;justify-content:center;
  min-height:min(calc(100svh - 64px),700px);position:relative}
.hstage{position:absolute;top:0;right:0;bottom:0;left:auto;width:59%;z-index:0;
  display:flex;flex-direction:column;background:#08090b}
.he-scope.hstage{color:#fff}
.hstage .stage.stage-full{flex:1 1 auto;min-height:0;width:100%;height:auto;
  aspect-ratio:auto;max-height:none}
/* The panel is taller than 16/9, so cover crops the sides: hold the fittings in frame. */
.hstage .stage-full picture,.hstage .stage-full img{object-fit:cover;object-position:50% 52%}
/* Only a soft left edge, so the panel does not cut the page in half with a hard line. */
.hstage::before{content:"";position:absolute;inset:0 auto 0 0;width:120px;z-index:4;
  pointer-events:none;background:linear-gradient(90deg,#0a0a0a,rgba(10,10,10,0))}
/* The copy sits in a full-width container above the render, so it was swallowing
   mousedown across the whole hero and the before/after divider would not drag. Only the
   copy blocks itself take the pointer; the rest of the hero belongs to the stage. */
/* .wrap carries margin:0 auto. As a flex item in this column, those auto margins beat
   stretch, so the block shrank to its content and centred itself over the render. */
.hwrap{position:relative;z-index:6;width:100%;align-self:stretch;
  padding-top:clamp(12px,1.4vw,20px);
  padding-bottom:clamp(14px,1.6vw,24px);pointer-events:none}
.hcopy,.hwrap .meta>*{pointer-events:auto}
/* ch would be sized by the page's 12.4px base font, so this is in px. */
.hcopy{max-width:520px}
.calc-hero h1{font-size:48px}
@media(max-width:900px){.calc-hero h1{font-size:36px}}
.hcopy p.sub{font-size:15.2px;line-height:1.6;color:rgba(255,255,255,.82);
  margin-top:clamp(14px,1.5vw,22px)}
.hcopy .hmeta{color:rgba(255,255,255,.44);margin-top:18px}
.hcopy .links2{display:flex;gap:26px;margin-top:22px;flex-wrap:wrap}
.calc-hero .ulink{border-color:rgba(255,255,255,.5);color:#fff}
.calc-hero .ulink:hover{color:var(--gold);border-color:var(--gold)}

/* Controls stay on the render: state switch at its foot, camera strip along the bottom.
   The foot is a full-width absolute strip, so it was swallowing mousedown along the whole
   bottom of the frame and the divider would not drag there. Only its buttons take the
   pointer. */
.hstage .stage-foot{padding-bottom:16px;z-index:5;pointer-events:none}
.hstage .stage-foot .wrap{width:calc(100% - 44px);justify-content:space-between;gap:16px}
.hstage .stage-foot .view-switch{pointer-events:auto}
.hstage .view-switch{background:rgba(18,21,23,.9)}
.hstage .angles{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
  overscroll-behavior-inline:contain;scrollbar-width:none;min-height:54px;
  padding:9px 22px;background:rgba(12,13,16,.92);
  border-top:1px solid rgba(255,255,255,.1)}
.hstage .angles::-webkit-scrollbar{display:none}
.hstage .angles button{white-space:nowrap}
/* The top 64px of the panel sits under the fixed nav, so the state chips start below it
   and the DN50 caption goes: the hero's own meta row already carries the size range. */
.hstage .state-label{top:78px;bottom:auto}
.hstage .stage-marks{display:none}
/* /calc carries no rounded corners; the explorer's knob arrives round. */
.hstage .handle{border-radius:0}

/* Under 1080px the copy column gets too narrow to read beside the panel, so the render
   becomes a full-width band above it. */
@media(max-width:1080px){
  .calc-hero{min-height:0;padding-top:64px;justify-content:flex-start}
  .hstage{position:static;width:auto;order:-1;margin-bottom:clamp(20px,3vw,30px)}
  /* The band is capped by viewport height, not only by 16/9: on a 1024x768 laptop a
     full 16/9 band would push the h1 off the first screen. */
  .hstage .stage.stage-full{aspect-ratio:16/9;max-height:46svh;flex:0 0 auto}
  .hstage::before{display:none}
  .hwrap{padding-bottom:clamp(30px,4vw,48px)}
  .hcopy{max-width:none}
  .hstage .stage-marks{justify-content:space-between}
}
@media(max-width:760px){
  .calc-hero{padding-top:56px}
  .hstage .angles{padding:8px 16px;min-height:48px}
  .hstage .stage-foot .wrap{width:calc(100% - 24px);justify-content:center}
}

/* ── CALCULATOR BAND ────────────────────────────────────────────────────── */
/* The widget's stylesheet carries body{background:var(--graphite)} rewritten onto
   .he-scope, which would paint this band black. It is a white section. */
/* The calculator's own heading is the section heading: a second one above it left an
   empty screen between the hero and the first input. */
.pi-band{border-bottom:1px solid var(--line);
  padding:clamp(22px,2.2vw,34px) 0 clamp(30px,3.2vw,52px)}
.he-scope.pi-scope{background:#fff;color:var(--ink)}
.pi-scope .section{max-width:var(--max);margin:0 auto;border-bottom:0;
  padding:0 clamp(20px,3.2vw,56px);scroll-margin-top:80px}
.pi-scope .pi-intro{align-items:flex-end;margin-bottom:clamp(18px,2vw,28px)}
/* .pi-intro p{font-size:16px} outranks .eyebrow{font-size:10.1px} inside the widget, so
   the section label came out at 16px against 10.1px everywhere else on the page. */
.pi-scope .pi-intro .mono{font-size:10.1px;line-height:1.5;color:var(--faint);
  max-width:none;margin-bottom:12px}
.pi-scope .pi-intro .mono .idx{color:var(--ink)}
/* explorer-add carries a second .he-scope h2{font-size:22px} after kettle's clamp, so this
   section heading came out at 22px against 40.5px for "Every calculator" below it. */
.pi-scope .pi-intro h2{font-size:40.5px;line-height:1.1;letter-spacing:0}
@media(max-width:900px){.pi-scope .pi-intro h2{font-size:30px}}
/* Said in the result panel, because that is where the number is read. */
.pi-scope .pi-model-note{font-size:12.4px;line-height:1.55;color:var(--dim);
  margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.pi-scope .result-card{top:80px}
/* The widget went to one column at 760px, when it had a 1280px container of its own.
   In this page's container two columns stop working at about 1000px. */
@media(max-width:1000px){
  .pi-scope .calc-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .pi-scope .result-card{position:static;border-left:0;border-top:1px solid var(--line);
    padding:26px 0 0}
}

/* claude-integration.css flattens tracking page-wide with
   *,*::before,*::after{letter-spacing:0!important}. That is right for the page's own type
   and wrong for the widget's mono labels, which are set in caps. */
.he-scope .eyebrow,.he-scope .angles .lbl{letter-spacing:.12em!important}
.he-scope .stage-marks{letter-spacing:.1em!important}
.he-scope .state-label{letter-spacing:.08em!important}
.he-scope h2,.he-scope h3,.he-scope .result-main strong,
.he-scope .annual-metrics strong{letter-spacing:-.025em!important}

/* ── PRINT / SAVE AS PDF ────────────────────────────────────────────────── */
/* The widget's own print rules are scoped to .he-scope, so they never reached this page's
   chrome: a print used to start with a full black page of the render, then carry the
   ribbon, the tool index, the methodology, the quote form and the footer. A printed sheet
   is the equipment table, the settings it was computed with, and the result. */
.pi-printhead{display:none}
@media print{
  nav.top,.navmenu,.calc-hero,#explorer,#index,#method,#quote,#tool,footer,
  .cc,.vbadge,.mobile-result-nav{display:none!important}
  .pi-printhead{display:block;font-family:var(--mono);font-size:9.7px;
    text-transform:uppercase;color:#444;border-bottom:1px solid #999;
    padding-bottom:6px;margin-bottom:12px}
  .pi-band{padding:0;border-bottom:0}
  .pi-scope .section{padding:0;max-width:none}
  .pi-scope .pi-intro{display:block;margin-bottom:10px;gap:0}
  .pi-scope .pi-intro h2{font-size:19px}
  .pi-scope .pi-intro .mono{margin-bottom:4px}
  .pi-scope .pi-intro>p{font-size:11px;margin-top:4px}
  /* The thumbnails are dark renders on black: four solid blocks of ink that tell a reader
     of the sheet nothing the Equipment column does not. The column goes with them. */
  .pi-scope .pi-thumb{display:none}
  .pi-scope .pi-head,.pi-scope .pi-row{grid-template-columns:minmax(0,1.5fr) 104px 96px
    minmax(0,1.45fr) 150px minmax(0,1.25fr)}
  .pi-scope .pi-head span:first-child,.pi-scope .pi-head span:last-child{display:none}
  .pi-scope .pi-head{break-inside:avoid}
  .pi-scope .pi-advanced,.pi-scope .pi-status{display:none}
  .pi-scope .section-heading{display:block}
  .pi-scope .section-heading>p{max-width:40em;margin-top:6px}
  @page{margin:14mm}
}

/* ── ALL-CALCULATORS INDEX: the ten home tools behind one button ────────── */
.catbtn{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);flex-wrap:wrap;
  padding:0 0 clamp(26px,3vw,44px)}
.catbtn>span{font-size:12.4px;color:var(--dim);max-width:44em}
.bigbtn{display:inline-flex;align-items:center;gap:14px;min-height:54px;
  padding:14px 24px;background:var(--ink);color:#fff;font-size:12.9px;font-weight:600;
  transition:background .2s}
.bigbtn:hover{background:var(--gold-d)}
@media(max-width:760px){
  .catbtn{gap:14px}
  .bigbtn{width:100%;justify-content:space-between}
}

/* The /calc type scale, section 2 of CALC_DEPLOY_RULES: the widget arrives on the page
   with the Heat Explorer's own sizes, which are a different scale. */
.pi-scope .result-main strong{font-size:37px}
.pi-scope .annual-metrics strong{font-size:31.3px}
.pi-scope .pi-out strong{font-size:20px}
.pi-scope .pi-head span,.pi-scope .pi-row label,.pi-scope .field-heading>label{font-size:9.7px}
.pi-scope .pi-h3,.pi-scope .result-card h3{font-size:18.4px}
@media(max-width:900px){
  .pi-scope .result-main strong{font-size:31.3px}
}