/* FORSPEC calculators: /calculators/ and the embeddable calculator block. Owned by chat 06. Phone first.
   Pattern (James, 11 Nov 2026): the TWS product pages' visual calculator (inputs panel with sliders, result panel with the
   drawn job, big number, pack icons, tiles), in the FORSPEC design.
   Colours: only the shared tokens (--bg, --panel, --panel2, --line, --text, --dim, --red, --redT, --tbc) from forspec-site.css, look A.
   .fc* = one calculator (also used by the embed on product pages). .pgc* = the /calculators/ page only. Tokens come from forspec-site.css. */
.fc,.fcEmbed{--amber:var(--tbc)}
.fc{display:block}.fc[hidden]{display:none}
.fcHead h2,.fcHead h3{font:800 clamp(24px,3vw,38px)/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,system-ui,sans-serif;font-stretch:68%;text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.fcHead p{color:var(--dim);font-size:15px;margin-top:4px}
.fcGrid{display:grid;gap:12px;margin-top:14px}
.fcIn{display:grid;gap:12px;align-content:start;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.fcSeg{border:0;min-width:0}
.fcSeg legend,.fcNum label,.pgcPick label{display:block;font:700 12px/1.3 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fcNum label i{font-style:normal;color:var(--text);text-transform:none}
.fcSeg>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}
.fcSeg.n3>div,.fcSeg.n6>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.fcSeg.n4>div{grid-template-columns:repeat(4,minmax(0,1fr))}
.fcSeg label{position:relative;display:block;cursor:pointer;min-width:0}
.fcSeg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.fcSeg span{display:flex;flex-direction:column;justify-content:center;min-height:50px;height:100%;padding:6px 6px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel2);line-height:1.2;text-align:center}
.fcSeg b{font-weight:700;font-size:15px}
.fcSeg small{font-size:12px;color:var(--dim);margin-top:2px}
.fcSeg input:checked+span{border-color:var(--red);background:rgba(221,36,43,.22)}
.fcSeg input:checked+span small{color:var(--text)}
.fcSeg input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.fcNums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fcNums.n1{grid-template-columns:minmax(0,1fr)}
.fcNum{min-width:0}
.fcStep{display:grid;grid-template-columns:50px minmax(0,1fr) 50px;height:50px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel2);overflow:hidden}
.fcStep button{border:0;background:rgba(255,255,255,.07);color:var(--text);font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation}
.fcStep button:hover{background:rgba(255,255,255,.14)}
.fcStep input{width:100%;min-width:0;height:100%;border:0;padding:0;margin:0;background:none;color:var(--text);font:700 20px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,system-ui,sans-serif;text-align:center;border-radius:0;appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none}
.fcStep input::-webkit-outer-spin-button,.fcStep input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.fcStep input:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}
.fcRange{display:block;width:100%;height:28px;margin:4px 0 0;padding:0;accent-color:var(--red);cursor:pointer;background:none}
.fcNote{display:none;font-size:14px;line-height:1.5;color:var(--dim)}
.fcOut{display:grid;gap:10px;align-content:start;min-width:0}
.fcRes{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:12px;padding:12px 14px 14px;display:grid;gap:10px;min-width:0}
.fcLab{font:700 12px/1.3 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.fcBig{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font:800 26px/1 "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,system-ui,sans-serif;font-stretch:68%;text-transform:uppercase;color:var(--redT);margin-top:2px}
.fcBig b{font-size:60px;color:var(--text);font-weight:800}
.fcSub{font-size:15px;font-weight:600;min-height:23px;color:var(--text)}
.fcStage{background:var(--panel2);border-radius:10px;aspect-ratio:600/240;overflow:hidden}
.fcSvg{display:block;width:100%;height:100%;color:var(--text)}
.fcIcons{display:flex;align-items:flex-end;gap:3px;height:26px;overflow:hidden}
.fcIcons svg{width:20px;height:24px;flex:none;fill:var(--red);stroke:var(--text)}
.fcIcons i{font:700 13px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;font-style:normal;color:var(--dim);margin-left:4px;align-self:center}
.fcRows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-height:78px}
.fcRows div{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:8px;min-width:0;display:flex;flex-direction:column;gap:3px}
.fcRows dt{font:700 12px/1.25 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.fcRows dd{font-weight:700;font-size:15px;line-height:1.25;color:var(--text);overflow-wrap:anywhere}
.fcWarn{display:none;font-size:14px;line-height:1.4;padding:10px 12px;border-radius:10px;border:1.5px solid var(--redT);color:var(--text);background:rgba(221,36,43,.16)}
.fcWarn.on{display:block}
.fcWarn.amber{border-color:var(--amber);background:rgba(255,209,102,.1)}
.fcAct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.fcAct .btn.red{grid-column:1/-1}
.fcAct .btn{width:100%;min-height:50px;padding:8px 6px;font-size:13px;letter-spacing:.04em;white-space:nowrap}
.fcSrc{margin-top:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.fcSrc summary{cursor:pointer;padding:13px 14px;font-weight:700;font-size:15px;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
.fcSrc summary::-webkit-details-marker{display:none}
.fcSrc summary::after{content:"+";font:700 20px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;color:var(--redT)}
.fcSrc[open] summary::after{content:"−"}
.fcSrc p,.fcSrc ul{padding:0 14px 12px;color:var(--dim);font-size:15px;line-height:1.5}
.fcSrc ul{list-style:none;display:grid;gap:6px}
.fcSrc li b{color:var(--text);font-weight:600}
.fcSrc em{font-style:normal;font:500 12.5px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;color:var(--text)}
.fcSrc .fcUsed a,.pgcMore a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.fcEmbed{padding-block:8px}
.fcSeg.n1{display:none}
.fcAll{margin-top:10px}
.fcAll a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:15px;color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---- the /calculators/ page ---- */
.pgc{padding-top:68px}
.pgcHero{padding-block:16px 14px}
.pgcCrumb{font:500 13px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;color:var(--dim)}
.pgcCrumb a{text-decoration:underline;text-underline-offset:3px}
.pgcHero h1{font-size:clamp(38px,4.6vw,68px);margin:10px 0 8px;max-width:22ch}
.pgcHero h1 span,.pgc h2.cond span{color:var(--redT)}
.pgcHero .lead{font-size:16px}
.pgcTool{padding-block:4px 30px}
.pgcPick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}
.pgcPick select{width:100%;height:50px;padding:0 26px 0 10px;border:1.5px solid var(--text);border-radius:10px;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 9px center;color:var(--text);font:700 16px "Archivo","Archivo Fallback",Arial,Helvetica,sans-serif,system-ui,sans-serif;appearance:none;-webkit-appearance:none;cursor:pointer}
.pgcPick select option{background:var(--panel);color:var(--text)}
.pgc h2.cond{font-size:clamp(30px,4.4vw,60px);margin:10px 0 14px;text-wrap:balance}
.pgcAll,.pgcFaq{padding-block:30px;border-top:1px solid var(--line)}
.pgcGrps{display:grid;gap:14px;max-width:1100px}
.pgcGrp h3{font:700 12px/1.3 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--redT);margin-bottom:6px}
.pgcGrp h3 small{font:inherit;color:var(--dim);margin-left:6px}
.pgcGrp ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pgcGrp a{display:flex;align-items:center;min-height:44px;padding:0 14px;font-weight:600;font-size:15px;line-height:1.2;border:1.5px solid var(--line);border-radius:10px;background:var(--panel)}
.pgcGrp a:hover{border-color:var(--red)}
.pgcQs{display:grid;gap:8px;max-width:900px}
.pgcQ{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pgcQ summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:16px;line-height:1.3;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
.pgcQ summary::-webkit-details-marker{display:none}
.pgcQ summary::after{content:"+";font:700 20px "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;color:var(--redT);flex:none}
.pgcQ[open] summary::after{content:"−"}
.pgcQ p{padding:0 14px 14px;color:var(--dim);font-size:15px;line-height:1.55}
.pgcMore{margin-top:14px;color:var(--dim);font-size:15px;line-height:1.9}
.pgcJob{padding-block:34px 44px;border-top:1px solid var(--line);display:grid;gap:18px;background:radial-gradient(ellipse at 10% 120%,rgba(221,36,43,.2),transparent 55%)}
.pgcJob p{color:var(--dim);max-width:560px}
.pgcJobBtns{display:grid;gap:8px}
.pgcJobBtns .btn{width:100%;padding-inline:10px;font-size:13px;white-space:nowrap}

/* ---- the hub block under the calculator: explainer (when there is one), documents, drawings, pages ---- */
.pgcHub{padding-block:26px 30px;border-top:1px solid var(--line)}
.fcHub h3{font:700 12px/1.3 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--redT);margin-bottom:10px}
.fcHubIn{display:grid;gap:12px}
.fcCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start}
.fcCard{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:8px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.fcCard:hover{border-color:var(--red)}
.fcCard small{font:700 12px/1.25 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.fcCard b{font-size:15px;line-height:1.2;font-weight:700;overflow-wrap:anywhere}
.fcVid{display:grid;grid-template-columns:128px minmax(0,1fr);gap:12px;align-items:stretch;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px;min-width:0}
.fcPlay{position:relative;display:block;padding:0;border:0;background:#000;border-radius:8px;overflow:hidden;cursor:pointer;width:100%}
.fcPlay img{display:block;width:100%;height:auto}
.fcPlay span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:18px;padding-left:3px}
.fcVidTx{display:flex;flex-direction:column;justify-content:center;min-width:0}
.fcVidTx small{display:block;font:700 12px/1.3 "JetBrains Mono","JetBrains Mono Fallback","Courier New",monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.fcVidTx b{font-size:17px;line-height:1.25}
.fcVid.on{grid-template-columns:minmax(0,1fr);padding:0;border:0;background:none}
.fcVid.on .fcVidTx{display:none}
.fcVid video{display:block;width:100%;height:auto;border-radius:10px;background:#000}
.fcVid.tall{margin-inline:calc(-1 * max(16px,4vw))}
.fcVid.tall video{border-radius:0;aspect-ratio:9/16;max-height:calc(100vh - 150px);object-fit:contain}
.fcVid.wide video{aspect-ratio:16/9}
@media (min-width:701px){
  .fcVid{grid-template-columns:minmax(0,1fr);padding:0;border:0;background:none;align-content:start}
  .fcVidTx{padding:2px 2px 0}
  .fcPlay span{width:64px;height:64px;font-size:22px}
  .fcHub.hasVid .fcHubIn{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:22px;align-items:stretch}
  .fcHub.hasVid .fcCards{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;align-content:stretch}
  .fcVidTx{display:block}
  .fcHub:not(.hasVid) .fcCards{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px}
  .fcCard{min-height:64px}
}
@media (min-width:900px){.pgcHub{padding-block:44px 48px}.fcHub.hasVid .fcHubIn{max-width:1200px}}

@media (max-width:599px){
  .fcSeg.n4>div,.fcSeg.n6>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pgcWide,.pgc .fcHead p{display:none}
  .pgc .fcHead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pgcHero{padding-block:10px 8px}
  .pgcHero h1{font-size:32px;margin:6px 0 4px}
  .pgcPick{margin-bottom:10px}
  .pgc .fcGrid{margin-top:0;gap:10px}
  .fcIn{gap:9px;padding:12px}
  .fcSeg legend,.fcNum label,.pgcPick label{margin-bottom:4px}
  .fcRange{height:20px;margin-top:2px}
  .fcRes{padding:10px 12px 12px;gap:6px}
  .fcIcons{height:22px}.fcIcons svg{width:17px;height:21px}
  .fcBig b{font-size:52px}
  .fcRows dd{font-size:14px}
}
@media (max-width:399px){.fcStep{grid-template-columns:44px minmax(0,1fr) 44px}}
@media (min-width:600px){
  .pgcJobBtns{grid-template-columns:repeat(2,minmax(0,280px))}
  .pgcPick{max-width:640px}
}
@media (min-width:900px){
  .fcGrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"in out" "act act";gap:16px 22px}
  .fcIn{grid-area:in;gap:18px;padding:22px;align-content:space-between}
  .fcOut{grid-area:out;grid-template-rows:1fr auto;align-content:stretch}
  .fcAct{grid-area:act}
  .fcStage{aspect-ratio:auto;height:clamp(170px,15vw,230px)}
  .fcNote{display:block}
  .fcSeg span{min-height:60px}
  .fcSeg b{font-size:16px}.fcSeg small{font-size:13px}
  .fcStep{height:58px;grid-template-columns:58px minmax(0,1fr) 58px}
  .fcStep input{font-size:24px}
  .fcRes{padding:18px 22px 20px;gap:12px;align-content:start}
  .fcBig b{font-size:76px}
  .fcBig{font-size:34px}
  .fcSub{font-size:17px}
  .fcRows dd{font-size:17px}
  .pgc{padding-top:76px}
  .pgcHero{padding-block:22px 14px}
  .pgc .fcHead h2{font-size:clamp(22px,2vw,30px)}
  .pgcTool{padding-block:8px 48px}
  .pgcAll,.pgcFaq{padding-block:52px}
  .pgcJob{grid-template-columns:1fr auto;align-items:end;padding-block:56px 64px}
}
@media (min-width:900px) and (max-width:1199px){.fcSeg.n4>div{grid-template-columns:repeat(2,minmax(0,1fr))}.fcStep{grid-template-columns:46px minmax(0,1fr) 46px}.fcStep input{font-size:22px}}
@media (min-width:1100px){.fcAct{grid-template-columns:repeat(3,minmax(0,1fr))}.fcAct .btn.red{grid-column:auto}}
@media (min-width:1700px){.pgc>section{max-width:1680px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.fcStep button{transition:none}}