:root{
  /* Coffman web brand tokens (coffman.com / Toolbox palette). */
  --c-blue:#005EB8; --c-blue-dark:#004A92; --c-orange:#DD5927; --c-body:#383838;
  --c-lt-blue:#E5F0FA; --c-lt-gray:#F3F3F3; --c-ok:#2E7D32; --c-ng:#B3261E;
  --c-ok-bg:#DDEAD6; --c-ng-bg:#FBE3E1; --c-border:#D7D7D7;
  /* Muted text and SVG hatching. --c-warn-text is the darkened warn tone that
     clears AA on the #FFF7E6 disclaimer scrim; --c-warn itself does not. */
  --c-muted:#6B6D70; --c-warn:#B25C00; --c-warn-text:#8a4500;
  --c-hatch-nut:#7a9cc4; --c-hatch-bolt:#b9bcc0;
  /* Numeric readouts stay monospace so limit dimensions align column-wise. */
  --font-num:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:Rubik,Arial,Helvetica,sans-serif;color:var(--c-body);background:#fff;font-size:14px;line-height:1.45}
header{background:#fff;border-bottom:1px solid var(--c-border);padding:10px 22px;
  display:flex;align-items:center;gap:0;flex-wrap:wrap;position:sticky;top:0;z-index:50}
header .tool{font-size:13px;font-weight:700;color:var(--c-blue);letter-spacing:.3px}

main{display:grid;grid-template-columns:minmax(360px,460px) 1fr;gap:18px;padding:14px 22px 18px;max-width:1500px;margin:0 auto}
@media(max-width:900px){main{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--c-border);margin-bottom:16px;overflow:hidden}
.card h2{margin:0;padding:8px 14px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--c-blue);border-bottom:1px solid var(--c-border);background:#fff}
.card .bd{padding:12px 14px}
.row{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.row label{flex:0 0 190px;font-size:12.5px}
.row .in{flex:1;min-width:110px}
input[type=number]{font-family:var(--font-num)}
input[type=number],input[type=text],select{width:100%;padding:5px 8px;border:1px solid var(--c-border);border-radius:4px;font-size:13px;color:#222;background:#fff}
input[type=number]:focus,select:focus{outline:2px solid var(--c-lt-blue);border-color:var(--c-blue)}
.unit{font-size:11.5px;color:var(--c-muted);flex:0 0 58px}
.seg{display:flex;border:1px solid var(--c-blue);border-radius:4px;overflow:hidden;width:100%}
.seg button{flex:1;border:none;background:#fff;color:var(--c-blue);padding:6px 4px;font-size:12.5px;cursor:pointer;font-weight:600}
.seg button.on{background:var(--c-blue);color:#fff}
.hint{font-size:11.5px;color:var(--c-muted);margin:2px 0 8px}
.chk{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:6px}
table.res{width:100%;border-collapse:collapse;font-size:12.8px}
table.res td,table.res th{padding:5px 8px;border-bottom:1px solid #EEF0F2;text-align:left;vertical-align:top}
table.res td.v{text-align:right;font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap;color:#222;font-weight:600}
table.res td.u{color:var(--c-muted);font-size:11.5px;white-space:nowrap;width:62px}
table.res tr.hl td{background:var(--c-lt-blue)}
.big{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.bigbox{flex:1;min-width:170px;border:1px solid var(--c-border);border-left:4px solid var(--c-blue);border-radius:5px;padding:10px 12px;background:#fff}
.bigbox .lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted)}
.bigbox .val{font-size:21px;font-weight:700;color:var(--c-blue-dark);margin-top:2px;font-family:var(--font-num);font-variant-numeric:tabular-nums}
.bigbox .sub{font-size:11.5px;color:var(--c-muted)}
.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11.5px;font-weight:700}
.badge.ok{background:var(--c-ok-bg);color:var(--c-ok)} .badge.ng{background:var(--c-ng-bg);color:var(--c-ng)}
.warn{border-left:4px solid var(--c-orange);background:#FDF3EE;padding:8px 12px;border-radius:4px;font-size:12.5px;margin-bottom:8px}
.warn.red{border-left-color:var(--c-ng);background:var(--c-ng-bg)}
.formulas{font-family:var(--font-num);font-size:11.8px;white-space:pre-wrap;color:#444;background:var(--c-lt-gray);border-radius:4px;padding:10px 12px;overflow-x:auto}
footer{padding:14px 22px 26px;font-size:11.5px;color:var(--c-muted);max-width:1500px;margin:0 auto}
.src{font-size:11px;color:var(--c-muted)}
@media print{
  body{background:#fff;font-size:11.5px}
  .page-head{padding:0 10px}
  .h1{font-size:17px;margin-bottom:2px}
  .h1-sub{font-size:11px;margin-bottom:8px}
  header{position:static;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  main{grid-template-columns:1fr 1fr;gap:10px;padding:10px}
  .card{break-inside:avoid}
  input,select{border:none;padding:2px}
  .seg{display:none}
  .formulas{font-size:9.5px}
}

/* ---------- Coffman brand components ---------- */

/* Toolbar lockup: real logo asset, hairline pipe, tool name.
   Height only — the logo is 2000x416 (4.81:1) and must scale on its own. */
header .brand-logo{height:36px;display:block;object-fit:contain}
header .brand-logo{margin-right:14px}
header .brand-pipe{color:var(--c-border);margin:0 9px;font-size:13px}

/* Static label for a control group that is not a single form element
   (the unit-system segmented control), matching .row label metrics. */
.row .lab-static{flex:0 0 190px;font-size:12.5px}

/* Page title block: black-weight italic uppercase blue title, orange explainer
   line, then the disclaimer. Shares main's gutter and max-width so the title,
   banner and cards all align to one left edge. */
.page-head{max-width:1500px;margin:0 auto;padding:22px 22px 0}
.h1{font-size:26px;font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:.5px;color:var(--c-blue);margin:0 0 6px}
.h1-sub{color:var(--c-orange);font-size:13px;margin-bottom:18px}

/* Verification disclaimer — required on every calculation tool. */
.disclaimer{background:#FFF7E6;border:1px solid #F0D9A5;color:var(--c-warn-text);
  padding:9px 14px;font-size:12px;display:flex;gap:10px;align-items:flex-start}
.disclaimer svg{flex:0 0 16px;margin-top:1px}
.disclaimer b{color:var(--c-warn-text)}
@media print{ .disclaimer{-webkit-print-color-adjust:exact;print-color-adjust:exact} }