/* ─────────────────────────────────────────────────────────────
   Honest material calculators — shared shell styles
   One copy, every page. Do not duplicate this into a page file.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#1c1a17; --ink-soft:#5b554d; --paper:#faf7f2; --card:#fff;
  --line:#e4ded3; --accent:#1f6f5c; --accent-soft:#e8f2ef; --accent-line:#cfe3dd;
  --warn:#8a5a12; --warn-soft:#fdf4e4; --warn-line:#e9d5ab;
  --bad:#96341f; --bad-soft:#fbeeea; --bad-line:#e8c4b8; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:780px;margin:0 auto;padding:0 18px 80px}

/* ── site header ── */
.sitehead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0 22px;border-bottom:1px solid var(--line);margin-bottom:26px}
.sitehead a.brand{font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.sitehead a.brand span{color:var(--accent)}
.sitehead nav{display:flex;gap:16px;font-size:14px}
.sitehead nav a{color:var(--ink-soft);text-decoration:none;font-weight:600}
.sitehead nav a:hover{color:var(--accent);text-decoration:underline}
@media print{.sitehead{display:none !important}}

/* ── related calculators ── */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.related a{display:block;border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  text-decoration:none;background:#fff}
.related a:hover{border-color:var(--accent);background:var(--accent-soft)}
.related a b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px}
.related a span{display:block;color:var(--ink-soft);font-size:13px;line-height:1.4}

/* ── hub index ── */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:10px}
.hubgrid a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  text-decoration:none;background:#fff}
.hubgrid a:hover{border-color:var(--accent);background:var(--accent-soft)}
.hubgrid a b{display:block;color:var(--ink);font-size:17px;margin-bottom:5px;letter-spacing:-.01em}
.hubgrid a span{display:block;color:var(--ink-soft);font-size:13.5px;line-height:1.45}
.hubgrid a i{display:block;font-style:normal;color:var(--accent);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.hubsection{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
  font-weight:700;margin:30px 0 14px}
h1{font-size:clamp(28px,5.4vw,40px);line-height:1.12;margin:0 0 12px;letter-spacing:-.02em}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin-bottom:10px}
.sub{font-size:17px;color:var(--ink-soft);margin:0;max-width:58ch}
.sub b{color:var(--ink);font-weight:600}

/* ── unit gate ── */
#gate{max-width:560px;margin:6vh auto 0;text-align:center}
#gate .sub{margin:0 auto 30px}
#gate .q{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin:34px 0 14px}
.unitPick{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left}
.unitPick button{font:inherit;cursor:pointer;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;text-align:left}
.unitPick button:hover{border-color:var(--accent);background:var(--accent-soft)}
.unitPick b{display:block;font-size:19px;margin-bottom:5px}
.unitPick span{display:block;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
#gate .tiny{font-size:12.5px;color:var(--ink-soft);margin-top:22px}

/* ── app chrome ── */
#app{display:none}
.unitbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-soft);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:11px 16px;margin-bottom:16px}
.unitbar b{color:var(--ink)}
.linkBtn{font:inherit;font-size:13.5px;font-weight:600;background:none;border:0;padding:0;
  color:var(--accent);cursor:pointer;text-decoration:underline}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.card h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 16px;font-weight:700}
.card h2 .opt{text-transform:none;letter-spacing:0;font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.grid+.grid{margin-top:14px}
label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.hint{font-weight:400;color:var(--ink-soft);font-size:12px;display:block;margin-top:3px;line-height:1.45}
input[type=number],input[type=text],select{width:100%;padding:9px 10px;font-size:15px;font-family:inherit;
  color:var(--ink);border:1px solid var(--line);border-radius:7px;background:#fff}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.check{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:14px}
.check input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent)}
.check label{margin:0;font-weight:500;font-size:14px}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.seg button{font:inherit;font-size:14px;font-weight:600;padding:7px 14px;border-radius:20px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft)}
.seg button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── results ── */
#out{margin-top:26px}
.total{background:var(--accent);color:#fff;border-radius:var(--radius);padding:24px;margin-bottom:12px}
.total .lab{font-size:12px;letter-spacing:.09em;text-transform:uppercase;opacity:.82;font-weight:700;margin-bottom:8px}
.total .big{font-size:clamp(30px,7vw,46px);line-height:1.06;font-weight:800;letter-spacing:-.025em}
.total .alt{margin-top:9px;font-size:15.5px;opacity:.92}
.total .rule{margin-top:15px;padding-top:13px;border-top:1px solid rgba(255,255,255,.28);font-size:15px;line-height:1.5}
.total.good{background:#14543f}

.verdict{border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;border:1px solid}
.verdict.ok{background:var(--accent-soft);border-color:var(--accent-line)}
.verdict.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.verdict.bad{background:var(--bad-soft);border-color:var(--bad-line)}
.verdict .vt{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin-bottom:7px;color:var(--accent)}
.verdict.warn .vt{color:var(--warn)}
.verdict.bad .vt{color:var(--bad)}
.verdict .vh{font-size:clamp(18px,3.3vw,23px);font-weight:700;line-height:1.28;letter-spacing:-.01em;margin-bottom:8px}
.verdict p{margin:0;font-size:15px;line-height:1.55}
.verdict p+p{margin-top:8px}

table.opts{width:100%;border-collapse:collapse;font-size:14.5px}
table.opts th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);font-weight:700;padding:0 10px 8px 0}
table.opts td{padding:10px 10px 10px 0;border-top:1px solid var(--line);vertical-align:top}
table.opts tr:first-child td{border-top:0}
table.opts .what{font-weight:700}
table.opts .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-soft)}

.rows{font-size:14.5px}
.rows .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid var(--line)}
.rows .row:first-child{border-top:0}
.rows .row span:first-child{color:var(--ink-soft)}
.rows .row span:last-child{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.notes{list-style:none;padding:0;margin:0;font-size:14.5px}
.notes li{padding:9px 0 9px 26px;border-top:1px solid var(--line);position:relative;color:var(--ink-soft)}
.notes li:first-child{border-top:0}
.notes li::before{content:"";position:absolute;left:6px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.notes li b{color:var(--ink);font-weight:600}
.notes li.warn::before{background:var(--warn)}

.printbar{display:none;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0 6px}
.btn{font:inherit;font-size:15px;font-weight:700;padding:12px 20px;border-radius:8px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:#fff}
.btn:hover{background:#195a4a}
.printbar .why{font-size:13.5px;color:var(--ink-soft);flex:1 1 220px;min-width:200px}
.foot{margin-top:34px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;border-top:1px solid var(--line);padding-top:18px}
.foot b{color:var(--ink)}
.hidden{display:none !important}

/* ── ad slots ──────────────────────────────────────────────────
   Reserved in the shell so 45 pages never need retrofitting, and
   sized to standard IAB units.

   The min-heights are not decoration: an ad that loads after the
   page and pushes content down is cumulative layout shift, which
   Google measures and which counts against ranking. Reserving the
   exact space up front costs nothing and protects Core Web Vitals.

     top     728×90 leaderboard  →  320×100 on mobile
     inline  336×280 rectangle   →  300×250 on mobile
   ─────────────────────────────────────────────────────────────── */
.ad{margin:22px auto;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);border-radius:var(--radius);color:#bdb5a8;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;overflow:hidden}
.ad[data-slot=top]{min-height:100px;max-width:320px}
.ad[data-slot=inline]{min-height:250px;max-width:300px}
@media (min-width:768px){
  .ad[data-slot=top]{min-height:90px;max-width:728px}
  .ad[data-slot=inline]{min-height:280px;max-width:336px}
}
@media print{.ad{display:none !important}}

/* ── print sheet ── */
#sheet{display:none}
@media print{
  body{background:#fff;font-size:11.5pt}
  .wrap>*:not(#sheet){display:none !important}
  #sheet{display:block}
  @page{margin:16mm}
  #sheet h1{font-size:19pt;margin:0 0 2px}
  #sheet .psub{font-size:9.5pt;color:#555;margin:0 0 14px}
  #sheet .headline{border:2px solid #000;padding:12px 14px;margin-bottom:8px}
  #sheet .headline small{display:block;font-size:8.5pt;text-transform:uppercase;letter-spacing:.09em;color:#555;margin-bottom:3px}
  #sheet .headline b{font-size:22pt;line-height:1.1}
  #sheet .headline i{font-style:normal;font-size:9.5pt;color:#555;display:block;margin-top:3px}
  #sheet .callout{border:1px solid #000;padding:9px 12px;margin-bottom:8px;font-size:10pt}
  #sheet h3{font-size:8.5pt;letter-spacing:.09em;text-transform:uppercase;color:#555;
    margin:16px 0 7px;border-bottom:1px solid #000;padding-bottom:4px}
  #sheet table{width:100%;border-collapse:collapse;font-size:10.5pt}
  #sheet th{text-align:left;font-size:8pt;text-transform:uppercase;letter-spacing:.05em;color:#555;
    padding:0 6px 5px 0;border-bottom:1px solid #999}
  #sheet td{padding:9px 6px 9px 0;border-bottom:1px solid #ddd;vertical-align:top}
  #sheet td.fill{border-bottom:1px solid #999}
  #sheet .qty{font-weight:700;white-space:nowrap}
  #sheet .spec td{border:0;padding:3px 12px 3px 0;width:50%}
  #sheet .spec td span{color:#555}
  #sheet ul{margin:6px 0 0;padding-left:16px;font-size:9.5pt;color:#333}
  #sheet li{margin-bottom:4px}
  #sheet .pfoot{margin-top:18px;font-size:8.5pt;color:#666;border-top:1px solid #ccc;padding-top:8px}
}