/* Shared styling for the standalone calculator pages:
   volume-calculator.html, bottleneck-analysis.html, ffmi-calculator.html.

   These are entry points from search, so they must stand on their own, but they
   are the same brand as index.html: black and white, hard edges, no radius. */
:root{--ink:#0b0b0b;--paper:#fff;--muted:#6e6e6e;--grid:#e8e8e6;--panel:#f3f3f1;}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0!important;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
.wrap{max-width:820px;margin:0 auto;padding:0 clamp(16px,4vw,32px);}

nav.th{border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:50;}
nav.th .in{max-width:820px;margin:0 auto;padding:0 clamp(16px,4vw,32px);height:60px;display:flex;align-items:center;justify-content:space-between;gap:14px;}
nav.th .logo{font-family:'Anton',sans-serif;font-size:18px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
nav.th .logo .gg{background:var(--ink);color:var(--paper);padding:2px 6px;}
nav.th .logo a{text-decoration:none;}
nav.th .cta{background:var(--ink);color:var(--paper);text-decoration:none;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12px;letter-spacing:.07em;padding:10px 14px;white-space:nowrap;}

.hd{border-bottom:2px solid var(--ink);padding:clamp(30px,5vw,54px) 0 clamp(24px,4vw,40px);margin-bottom:clamp(26px,4vw,40px);}
.kick{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
h1{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(30px,6.4vw,58px);line-height:.94;margin-bottom:16px;}
.lede{font-size:clamp(15px,1.7vw,17.5px);max-width:56ch;border-left:3px solid var(--ink);padding-left:15px;}
h2{font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;font-size:clamp(18px,2.4vw,23px);letter-spacing:.03em;margin:38px 0 12px;padding-top:16px;border-top:1.5px solid var(--ink);}
h3{font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;font-size:15px;letter-spacing:.04em;margin:20px 0 8px;}
p,li{font-size:15px;margin-bottom:12px;}
ul,ol{padding-left:22px;margin-bottom:14px;}
.note{background:var(--panel);border-left:3px solid var(--ink);padding:14px 16px;margin:18px 0;font-size:14px;}
.note p:last-child,.note ul:last-child{margin-bottom:0;}

/* form */
.tool{border:2px solid var(--ink);padding:clamp(18px,3vw,28px);margin:22px 0;}
.tool h2{margin-top:0;border-top:none;padding-top:0;}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px 20px;}
.f label{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.f input,.f select{width:100%;background:var(--paper);border:none;border-bottom:1.5px solid var(--ink);color:var(--ink);font-family:'Oswald',sans-serif;font-size:17px;padding:7px 0;outline:none;text-transform:uppercase;}
.f input:focus,.f select:focus{border-bottom-width:3px;}
.seg{display:flex;gap:6px;flex-wrap:wrap;}
.seg button{flex:1;min-width:48px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:9px 4px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;cursor:pointer;}
.seg button.sel{background:var(--ink);color:var(--paper);}
.go{margin-top:20px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);padding:13px 24px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600;font-size:13px;letter-spacing:.08em;cursor:pointer;}
.go:hover{background:var(--paper);color:var(--ink);}
.err{font-family:'Space Mono',monospace;font-size:11.5px;margin-top:10px;min-height:15px;}

/* output */
.out{display:none;margin-top:24px;}
.out.on{display:block;}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1.5px solid var(--ink);margin-bottom:16px;}
.stat div{padding:14px 16px;border-left:1px solid var(--ink);}
.stat div:first-child{border-left:none;}
.stat .k{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.stat .v{font-family:'Anton',sans-serif;font-size:clamp(22px,3.2vw,30px);line-height:1.05;margin-top:6px;}
.stat .n{font-family:'Space Mono',monospace;font-size:10px;color:var(--muted);margin-top:4px;line-height:1.4;}
table.t{width:100%;border-collapse:collapse;font-size:13.5px;}
table.t th{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 8px 8px 0;border-bottom:1.5px solid var(--ink);}
table.t td{padding:7px 8px 7px 0;border-bottom:1px solid var(--grid);vertical-align:middle;}
table.t tr.hi td{font-weight:700;}
.bar{height:7px;background:var(--grid);min-width:54px;}
.bar i{display:block;height:100%;background:var(--ink);}
.bar.over i{background:repeating-linear-gradient(90deg,var(--ink) 0 3px,#fff 3px 6px);}
.chip{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.12em;background:var(--ink);color:var(--paper);padding:2px 5px;margin-left:5px;white-space:nowrap;}
.scroller{overflow-x:auto;}

.cta{border:2px solid var(--ink);padding:22px 24px;margin:38px 0 0;}
.cta h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(20px,3vw,27px);margin:0 0 8px;letter-spacing:.01em;}
.cta .b{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 22px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:12.5px;letter-spacing:.08em;margin:12px 10px 0 0;}
.cta .b.alt{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);}

footer.tf{border-top:2px solid var(--ink);margin-top:52px;padding:22px 0 44px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);}
footer.tf a{color:var(--muted);margin-right:14px;text-decoration:none;}
footer.tf a:hover{color:var(--ink);}

@media(max-width:430px){
  table.t{font-size:12px;}
  table.t th:nth-child(3),table.t td:nth-child(3){display:none;}
  .stat .v{font-size:21px;}
  .tool{padding:14px;}
}