/* ============================================================
   Shared layout for the free tool pages added 2026-10-21
   (repair allowance, fastener, flux bath, kettle envelope,
   specification clause builder, zinc reconciliation).
   Same tg- classes and site tokens as the earlier tool pages,
   which still carry their own inline copies. Element rules are
   scoped to .tg-wrap so nothing leaks into the shared header,
   footer or chat widget.
   ============================================================ */
.tg-wrap{max-width:1000px;margin-inline:auto}
.tg-crumb{display:flex;flex-wrap:wrap;gap:8px;color:var(--text-3);font-size:.85rem;padding-top:26px}
.tg-crumb a{color:var(--text-3)}.tg-crumb a:hover{color:var(--accent-hot)}
.tg-hero{padding-block:clamp(22px,4vh,40px) 8px}
.tg-hero .eyebrow{margin-bottom:14px}
.tg-hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,5vw,3.4rem);line-height:.95;margin-bottom:14px}
.tg-hero h1 .hl{color:var(--accent)}
.tg-hero p{color:var(--text-2);font-size:1.1rem;max-width:66ch;line-height:1.55}

/* draft gate: shown while a tool's figures wait for verification */
.tg-draft{margin-top:22px;background:rgba(232,99,10,.1);border:1px solid var(--accent);border-radius:var(--r-lg);padding:18px 22px;color:var(--text-2);font-size:.92rem;line-height:1.6}
.tg-draft b{color:var(--accent-hot)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;margin-top:30px;align-items:start}
.calc-in,.calc-out{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.calc-out{background:linear-gradient(160deg,#0D1117,#1a2535);border-color:var(--zinc-dim);position:sticky;top:84px}
.calc.wide{grid-template-columns:1fr}
.calc.wide .calc-out{position:static}
.fld{margin-bottom:18px}
.fld:last-child{margin-bottom:0}
.fld label,.fld .lbl{display:block;color:var(--text);font-weight:600;font-size:.95rem;margin-bottom:8px}
.fld .hint{display:block;color:var(--text-3);font-weight:400;font-size:.8rem;margin-top:2px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.ip{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:#0b0e13;overflow:hidden}
.ip span{padding:0 11px;color:var(--text-3);font-size:.86rem;background:#11161f;align-self:stretch;display:flex;align-items:center;border-right:1px solid var(--line);min-width:52px;justify-content:center}
.ip input{flex:1;min-width:0;background:none;border:none;color:#fff;font:inherit;font-size:1.05rem;padding:11px 12px;width:100%;outline:none}
.ip:focus-within,.sel:focus{border-color:var(--accent)}
.sel{width:100%;background:#0b0e13;border:1px solid var(--line);border-radius:9px;color:#fff;font:inherit;font-size:.96rem;padding:11px 12px;outline:none}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.seg.three{grid-template-columns:1fr 1fr 1fr}
.seg button{padding:11px 6px;border-radius:9px;border:1px solid var(--line);background:#0b0e13;color:var(--text-2);font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;line-height:1.25}
.seg button.on{border-color:var(--accent);background:rgba(232,99,10,.14);color:#fff}
.seg button:focus-visible{outline:2px solid var(--accent-hot);outline-offset:2px}
.chk{display:flex;gap:10px;align-items:flex-start;color:var(--text-2);font-size:.9rem;line-height:1.45;cursor:pointer}
.chk input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.err{display:none;color:#ff8a3d;background:rgba(232,99,10,.1);border:1px solid rgba(232,99,10,.35);border-radius:9px;padding:10px 13px;font-size:.88rem;margin-top:10px}
.err.show{display:block}
.fld-note{color:var(--text-3);font-size:.82rem;line-height:1.55;margin:12px 0 0}

/* results */
.o-lbl{color:var(--zinc);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.verdict{border-radius:12px;padding:16px 18px;margin-bottom:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.verdict h3{font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1.05;color:#fff;margin:6px 0 8px}
.verdict p{color:var(--text-2);font-size:.92rem;line-height:1.6;margin:0}
.verdict p+p{margin-top:8px}
.verdict b{color:#fff}
.verdict.ok{border-color:rgba(200,216,168,.55);background:rgba(200,216,168,.07)}
.verdict.ok .o-lbl{color:var(--zinc)}
.verdict.warn{border-color:rgba(255,138,61,.6);background:rgba(255,138,61,.08)}
.verdict.warn .o-lbl{color:var(--accent-hot)}
.verdict.bad{border-color:#f87171;background:rgba(248,113,113,.09)}
.verdict.bad .o-lbl{color:#fca5a5}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.kpi{border:1px solid var(--line);border-radius:10px;padding:13px 14px;background:rgba(255,255,255,.02)}
.kpi .k-l{color:var(--text-3);font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.kpi .k-v{font-family:var(--font-display);font-size:1.75rem;line-height:1.05;color:#fff;margin:5px 0 3px}
.kpi .k-v small{font-family:var(--font-body);font-size:.85rem;color:var(--text-3)}
.kpi .k-s{color:var(--text-2);font-size:.8rem;line-height:1.45}
.kpi.ok{border-color:rgba(200,216,168,.45)}.kpi.ok .k-v{color:var(--zinc)}
.kpi.warn{border-color:rgba(255,138,61,.55)}.kpi.warn .k-v{color:var(--accent-hot)}
.kpi.bad{border-color:#f87171}.kpi.bad .k-v{color:#fca5a5}
.checks{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:8px;color:var(--text-2);font-size:.88rem;line-height:1.5}
.checks li i{font-style:normal;font-weight:800;text-align:center}
.checks li.ok i{color:var(--zinc)}.checks li.bad i{color:#fca5a5}.checks li.warn i{color:var(--accent-hot)}.checks li.na i{color:var(--text-3)}
.checks li b{color:#fff;font-weight:600}
.o-note{margin-top:14px;background:rgba(200,216,168,.06);border:1px solid var(--zinc-dim);border-radius:9px;padding:11px 13px;color:var(--text-2);font-size:.82rem;line-height:1.55}
.o-note b{color:#fff;font-weight:600}
.o-note a,.verdict a,.checks a{color:var(--accent-hot)}
.o-cite{margin-top:12px;color:var(--text-3);font-size:.78rem;line-height:1.5}
.xlinks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.xlinks a{display:block;border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text-2);font-size:.9rem;font-weight:600;transition:border-color .15s,color .15s}
.xlinks a:hover{border-color:var(--accent);color:#fff}

/* long-form sections */
.tg-sec{max-width:820px;margin:clamp(48px,8vh,80px) auto 0}
.tg-sec h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1;margin-bottom:16px}
.tg-sec h2 .hl{color:var(--accent)}
.tg-sec p,.tg-sec li{color:var(--text-2);font-size:1.02rem;line-height:1.7}
.tg-sec p+p{margin-top:12px}
.tg-sec ul,.tg-sec ol{padding-left:22px;margin:14px 0}
.tg-sec li{margin-bottom:8px}
.tg-sec strong{color:var(--text)}
.tg-sec a{color:var(--accent-hot)}

.tg-upsell{max-width:820px;margin:clamp(40px,6vh,64px) auto 0;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center}
.tg-upsell h3{font-size:1.3rem;color:var(--text);margin-bottom:10px}
.tg-upsell p{color:var(--text-2);font-size:.95rem;line-height:1.6}
.tg-upsell ul{list-style:none;padding:0;margin:0}
.tg-upsell li{display:flex;gap:10px;color:var(--text-2);font-size:.95rem;margin-bottom:9px;line-height:1.4}
.tg-upsell li svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:3px}
.tg-upsell .card{background:#0b0e13;border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.tg-upsell .card .amt{font-family:var(--font-display);font-size:2.4rem;color:#fff;line-height:1}
.tg-upsell .card .amt small{font-size:1rem;color:var(--text-3)}
.tg-upsell .card .sub{color:var(--text-3);font-size:.85rem;margin-top:4px}
.tg-upsell .card a.btn{width:100%;justify-content:center;margin-top:14px;padding:12px}

.tg-faq{max-width:820px;margin:clamp(48px,8vh,80px) auto 0}
.tg-faq h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:20px}
.tg-faq details{border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-bottom:12px;background:var(--bg-2)}
.tg-faq summary{cursor:pointer;font-weight:700;color:var(--text);list-style:none;display:flex;justify-content:space-between;gap:12px}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;line-height:1}
.tg-faq details[open] summary::after{content:"\2212"}
.tg-faq p{color:var(--text-2);margin-top:12px;font-size:.96rem;line-height:1.65}
.tg-faq a{color:var(--accent-hot)}

.tg-rel{max-width:820px;margin:clamp(40px,6vh,64px) auto 0}
.tg-rel h2{font-family:var(--font-display);font-weight:400;font-size:1.6rem;margin-bottom:16px}
.tg-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tg-rel a{display:block;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:16px 18px;transition:border-color .15s,transform .15s}
.tg-rel a:hover{border-color:var(--accent);transform:translateY(-2px)}
.tg-rel a b{color:var(--text);display:block;margin-bottom:3px;font-size:.98rem}
.tg-rel a span{color:var(--text-3);font-size:.85rem}

@media(max-width:760px){
  .calc{grid-template-columns:1fr}.calc-out{position:static}
  .tg-upsell{grid-template-columns:1fr}
  .fld-row3{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.fld-row,.fld-row3{grid-template-columns:1fr}.seg.three{grid-template-columns:1fr}}
@media print{.hh-nav,.hh-drawer,.hf,.tg-upsell,.tg-rel,.tg-faq,.no-print{display:none!important}.calc-out{position:static}}