/* Sheet Metal Gauge Chart — "The Caliper" design system.
   Machined dark steel + safety amber on blueprint paper. All numerals mono/tabular. */
:root{--ink:#182230;--mut:#52657c;--line:#ccd7e1;--bg:#f4f7fa;--accent:#0b5fa5;
--amber:#ffb000;--amber-d:#8a5f00;--dark:#14181d;--dark2:#1e242c;--lcd:#0a0d10;
--mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
--macc:#476b8a;--macct:#e9eff5}
body.mat-steel{--macc:#476b8a;--macct:#e9eff5}
body.mat-stainless{--macc:#22746a;--macct:#e4f1ef}
body.mat-aluminum{--macc:#1f6fb4;--macct:#e7f1fa}
body.mat-galvanized{--macc:#5d7a52;--macct:#edf2ea}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.55;
background:#f6f9fb;background-image:linear-gradient(#e7eff6 1px,transparent 1px),linear-gradient(90deg,#e7eff6 1px,transparent 1px);background-size:28px 28px}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:3px}
.wrap{max-width:960px;margin:0 auto;padding:0 1rem}
/* ---------- header ---------- */
header.site{background:linear-gradient(180deg,#1b2129,var(--dark));color:#fff;padding:.65rem 1rem;border-bottom:3px solid var(--amber);box-shadow:0 2px 10px rgba(16,20,25,.35)}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
header.site a{color:#fff;text-decoration:none}
.logo{font-weight:700;font-size:1.12rem;display:inline-flex;align-items:center;gap:.55rem;letter-spacing:.01em}
.logo .mark{flex:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
nav.main a{margin-left:1rem;font-size:.93rem;opacity:.92}
nav.main a:hover{opacity:1;text-decoration:underline}
/* ---------- type ---------- */
main{padding:1.2rem 0 2rem}
h1{font-size:1.7rem;line-height:1.25;margin:.4rem 0 .8rem}
h2{font-size:1.25rem;margin:1.6rem 0 .5rem}
h3{font-size:1.05rem;margin:1.1rem 0 .35rem}
p{margin:.55rem 0}
.crumbs{font-size:.85rem;color:var(--mut);margin-top:.6rem}
.crumbs a{color:var(--mut)}
.micro{font:600 .68rem var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--mut)}
.small{font-size:.88rem;color:var(--mut)}
/* ---------- answer box: etched plate ---------- */
.answer{position:relative;background:#fff;border:1px solid var(--line);border-left:5px solid var(--macc);border-radius:6px;
padding:.95rem 1.15rem;margin:1rem 0;box-shadow:0 1px 2px rgba(20,24,29,.07),0 10px 26px rgba(20,24,29,.06)}
.answer::before,.answer::after{content:"";position:absolute;width:13px;height:13px;border:0 solid var(--amber)}
.answer::before{top:-2px;right:-2px;border-top-width:3px;border-right-width:3px;border-top-right-radius:6px}
.answer::after{bottom:-2px;left:-2px;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:6px}
.answer p{margin:.25rem 0}
.answer .big{font-size:1.12rem}
/* ---------- panels ---------- */
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;margin:1rem 0;
box-shadow:0 1px 2px rgba(20,24,29,.06),0 10px 26px rgba(20,24,29,.05)}
.panel label{font-weight:600;display:block;margin:.4rem 0 .2rem}
.panel select,.panel input{font-size:1rem;padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;min-width:180px}
.result{margin-top:.8rem;font-size:1.05rem;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:.7rem .9rem}
/* ---------- the caliper converter ---------- */
.panel.caliper{background:linear-gradient(180deg,var(--dark2),var(--dark));color:#e8edf2;border:1px solid #0b0e11;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 4px rgba(16,20,25,.3),0 16px 34px rgba(16,20,25,.28)}
.panel.caliper h2{color:#fff;margin-bottom:.6rem}
.tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .9rem}
.tabs button{font:600 .82rem var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
background:#262e37;color:#c7d2dd;border:1px solid #39434e;border-radius:6px;padding:.5rem .8rem}
.tabs button:hover{border-color:var(--amber);color:#fff}
.tabs button.on{background:var(--amber);border-color:var(--amber);color:#14181d}
.gaugein{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.gaugein label{margin:0;font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:#9fb0c0}
.panel.caliper input[type=number]{min-width:0;width:5.2rem;background:var(--lcd);border:1px solid #39434e;color:var(--amber);
font:700 1.15rem var(--mono);text-align:center;padding:.5rem .3rem}
.panel.caliper input[type=range]{flex:1 1 180px;min-width:150px;accent-color:var(--amber);height:2rem;cursor:pointer;background:transparent;border:0;padding:0}
.lcd{background:var(--lcd);border:1px solid #2b333c;border-radius:8px;padding:.8rem 1rem;margin-top:.9rem;
box-shadow:inset 0 2px 12px rgba(0,0,0,.85),inset 0 0 42px rgba(255,176,0,.05)}
.lcd-mat{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.18em;color:#8fa3b8}
.lcd-main{font:700 2.7rem/1.1 var(--mono);color:var(--amber);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(255,176,0,.35)}
.lcd-unit{font-size:1.25rem;color:#d99a06}
.lcd-sub{font:600 1.18rem var(--mono);color:#f3c44e;font-variant-numeric:tabular-nums}
.panel.caliper .result{background:#171d23;border-color:#2b333c;color:#dbe4ec;font-size:1rem}
/* ---------- chart tools ---------- */
.charttools{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.9rem 0 .45rem}
.utools{display:inline-flex;align-items:center;gap:.55rem}
.utoggle{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.utoggle button{font:600 .8rem var(--mono);cursor:pointer;background:#fff;color:var(--mut);border:0;padding:.42rem .75rem}
.utoggle button.on{background:var(--dark);color:var(--amber)}
.printbtn{font:600 .78rem var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer;background:#fff;
color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:.42rem .7rem}
.printbtn:hover{border-color:var(--amber-d);color:var(--amber-d)}
/* ---------- tables ---------- */
.tblwrap{overflow:auto;max-height:76vh;border:1px solid var(--line);border-radius:8px;background:#fff;margin:.4rem 0 .9rem;
box-shadow:0 1px 2px rgba(20,24,29,.05)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:.4rem .6rem;text-align:right;font-variant-numeric:tabular-nums}
td{font-family:var(--mono);font-size:.92rem}
th{background:var(--dark);color:#fff;text-align:right;font-size:.86rem;letter-spacing:.02em}
table.chart thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--line)}
body[class*="mat-"] table.chart th{background:var(--macc)}
th:first-child,td:first-child{text-align:left}
td:first-child{font-weight:700;position:relative}
tbody tr:nth-child(even){background:var(--bg)}
tbody tr:hover td{background:#fdf2d3}
tbody tr.sel td{background:#ffe6a3}
table.chart td.v{white-space:nowrap}
td.none{color:var(--mut)}
td.barcell{width:22%;min-width:90px;text-align:left;vertical-align:middle}
.bar{display:block;height:9px;border-radius:2px;background:var(--macc);box-shadow:inset 0 -2px 3px rgba(0,0,0,.18);transition:width .25s ease}
/* most-used gauges get an amber dot — rows are gauges 7..30 in order, so 10/12/14/16/18/20 are rows 4/6/8/10/12/14 */
table.chart tbody tr:nth-child(4) td:first-child::after,table.chart tbody tr:nth-child(6) td:first-child::after,
table.chart tbody tr:nth-child(8) td:first-child::after,table.chart tbody tr:nth-child(10) td:first-child::after,
table.chart tbody tr:nth-child(12) td:first-child::after,table.chart tbody tr:nth-child(14) td:first-child::after{
content:"";position:absolute;right:.5rem;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 1px rgba(138,95,0,.35)}
/* ---------- cards, faq, misc ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.9rem;margin:1rem 0}
.card{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;background:#fff;
box-shadow:0 1px 2px rgba(20,24,29,.05),0 8px 20px rgba(20,24,29,.04)}
.card h3{margin:.1rem 0 .35rem}
.card p{color:var(--mut);font-size:.92rem;margin:.2rem 0 .5rem}
.card p strong{color:var(--ink);font-family:var(--mono)}
ul{margin:.4rem 0 .8rem;padding-left:1.25rem}
li{margin:.25rem 0}
.faq h3{margin-bottom:.15rem}
.src{font:500 .76rem var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mut);
border-top:1px solid var(--line);margin-top:1.8rem;padding-top:.7rem}
.hero{background:var(--dark);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
background-size:28px 28px;color:#d7e0e9;border-bottom:3px solid var(--amber);padding:1.3rem 0 .5rem}
.hero h1{margin-top:.2rem;color:#fff}
.hero a{color:#ffcf5c}
footer.site{background:var(--dark);color:#c3cedb;padding:1.4rem 0;margin-top:2rem;font-size:.9rem}
footer.site a{color:#9fc3e8}
/* ---------- small screens ---------- */
@media (max-width:560px){
h1{font-size:1.45rem}
nav.main a{margin-left:.7rem}
.lcd-main{font-size:2.15rem}
.lcd-sub{font-size:1.02rem}
.gaugein{gap:.6rem}
.panel.caliper input[type=range]{flex-basis:100%;order:3}
th,td{padding:.38rem .45rem}
td.barcell{min-width:64px}
}
/* ---------- print: the workshop-wall chart ---------- */
@media print{
@page{margin:14mm}
body{background:#fff}
header.site{background:none;color:#000;border:0;box-shadow:none;padding:0 0 4mm}
header.site a{color:#000}
.logo .mark{display:none}
nav.main,.panel,.charttools,.crumbs,.faq,.cards,footer.site,.hero .panel{display:none!important}
.hero{background:none;color:#000;border:0;padding:0}
.hero h1{color:#000}
main{padding:0}
.tblwrap{overflow:visible;max-height:none;border:0;box-shadow:none;margin:0}
table{font-size:10pt}
th{background:#fff!important;color:#000;border-bottom:2pt solid #000}
td{border-bottom:1px solid #999}
tbody tr:nth-child(even){background:#fff}
tbody tr.sel td{background:#fff}
.bar{background:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.answer{box-shadow:none;border:1pt solid #000}
.answer::before,.answer::after{display:none}
.src{color:#000;border-top:1pt solid #000}
a{color:#000;text-decoration:none}
}