/* Shared styles for ONB Engineering tools — mirrors the main site's look */
:root{
  --cream:#F5F5F0;
  --ink:#101114;
  --cyan:#00C5E8;
  --orange:#FF5A43;
  --violet:#6248D9;
  --yellow:#FFE338;
  --gray:#E9E9EF;
  --muted:#5a5c66;
  --soft:#6b6d76;
  --line:#d8d8d0;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:15px/1.58 Arial, Helvetica, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px;margin:0 auto;padding:40px 24px 80px;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--cream);padding:8px 12px;z-index:10;}

/* site header */
.site-header{min-height:78px;background:var(--cream);border-bottom:2px solid var(--ink);display:flex;align-items:center;}
.header-inner{width:100%;max-width:1420px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:max-content;text-decoration:none;color:var(--ink);}
.brand img{width:39px;height:44px;object-fit:contain;}
.brand-copy{display:grid;}
.brand-copy strong{font-size:14px;line-height:1.15;}
.brand-copy small{margin-top:3px;font-size:8px;line-height:1.1;letter-spacing:.13em;text-transform:uppercase;}
.desktop-nav{display:flex;align-items:center;gap:24px;}
.desktop-nav a{font-size:14px;color:var(--ink);text-decoration:none;}
.desktop-nav a:hover{text-decoration:underline;}
.desktop-nav a.nav-cta{border:2px solid var(--ink);padding:9px 16px;font-weight:700;}
.desktop-nav a.nav-cta:hover{background:var(--ink);color:var(--cream);text-decoration:none;}
.mobile-cta{white-space:nowrap;display:none;border:2px solid var(--ink);padding:8px 12px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;}
@media (max-width:820px){ .desktop-nav{display:none;} .mobile-cta{display:inline-block;} }
@media (max-width:480px){ .header-inner{padding:0 16px;gap:12px;} .brand-copy small{display:none;} .wrap{padding-left:16px;padding-right:16px;} }

/* tool switcher bar (filled by tools.js) */
.toolbar{background:var(--ink);color:var(--cream);}
.toolbar-inner{position:relative;max-width:1420px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:thin;}
.toolbar .tb-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9aab2;padding:14px 10px 14px 0;white-space:nowrap;}
.toolbar a{color:var(--cream);text-decoration:none;font-size:13px;font-weight:700;padding:14px 12px;white-space:nowrap;border-bottom:4px solid transparent;}
.toolbar a:hover{border-bottom-color:#55565e;}
.toolbar a[aria-current="page"]{border-bottom-color:var(--tb-accent, var(--cyan));}
.toolbar a.tb-all{margin-left:auto;color:var(--yellow);}

.crumbs{font-size:12px;color:var(--muted);margin:0 0 18px;}
.crumbs a{color:var(--muted);}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;}
h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;line-height:1.08;margin:0 0 16px;max-width:20ch;}
.sub{font-size:16px;line-height:1.5;color:#4a4c55;max-width:60ch;margin:0 0 32px;}

/* option tiles (solve-for, tank shape, direction) */
.grid-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.tiles{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:3px;}
@media (max-width:720px){ .tiles{grid-template-columns:repeat(2,1fr);} }
.tile{position:relative;padding:18px 16px;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:0;text-align:left;font-family:inherit;color:var(--ink);}
.tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px;}
.tile .no{font:700 26px/1 Arial, Helvetica, sans-serif;opacity:.32;}
.tile .label{font-size:14px;font-weight:800;line-height:1.2;}
.tile .sym{font:600 13px/1.2 Arial, Helvetica, sans-serif;opacity:.75;}
.tile.active{box-shadow:inset 0 0 0 3px var(--ink);}
.tile.active .no{opacity:.55;}
.tile.dark{color:#fff;}

/* calculator panel */
.panel{background:#fff;border:2px solid var(--ink);margin-top:32px;}
.panel-strip{height:6px;background:var(--accent, var(--cyan));}
.panel-inner{padding:32px 28px;}
@media (max-width:640px){ .panel-inner{padding:24px 18px;} }
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
.panel-title{font-size:20px;font-weight:800;margin:0;}
.panel-note{font-size:12px;color:var(--soft);}

.inputs{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px;}
@media (max-width:640px){ .inputs{grid-template-columns:1fr;} }
.var{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:end;}
.var.single{grid-template-columns:1fr;}
.var[hidden], [hidden]{display:none !important;}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-bottom:8px;}
.field input, .field select{width:100%;height:48px;background:transparent;border:0;border-bottom:2px solid var(--line);color:var(--ink);font-family:inherit;font-size:20px;font-weight:700;padding:8px 2px;border-radius:0;}
.field select{cursor:pointer;font-size:15px;}
.field input:focus, .field select:focus{outline:none;border-bottom-color:var(--accent, var(--cyan));}
.field label .nc{text-transform:none;font-family:Arial, Helvetica, sans-serif;font-size:13px;}
.field .hint{font-size:12px;color:var(--soft);margin-top:6px;}

.result{margin-top:32px;padding-top:24px;border-top:1px solid #e3e3dc;}
.result .from-line{font-size:13px;color:var(--soft);margin-bottom:6px;}
.result .value{font:700 clamp(34px,4vw,58px)/1 Arial, Helvetica, sans-serif;word-break:break-word;}
.result .value .unit{font:700 clamp(15px,1.9vw,22px)/1.2 Arial, Helvetica, sans-serif;color:var(--ink);background:var(--accent, var(--cyan));padding:2px 6px;}
.result select{font:inherit;font-size:13px;border:2px solid var(--line);background:#fff;padding:4px 6px;}
.out-unit{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap;}
.out-unit .grid-label{margin:0;}
.error{color:#b3261e;font-weight:700;font-size:14px;}
.warn{margin-top:18px;padding:12px 14px;background:#fff8d6;border-left:4px solid var(--yellow);font-size:13px;}
.badge{display:inline-block;margin-top:14px;padding:6px 12px;font-weight:800;font-size:14px;border:2px solid var(--ink);}

.derived{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--ink);border:2px solid var(--ink);}
@media (max-width:640px){ .derived{grid-template-columns:1fr 1fr;} }
.derived > div{background:#fff;padding:14px 14px 16px;}
.derived .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);}
.derived .v{font:700 20px/1.25 Arial, Helvetica, sans-serif;margin-top:6px;word-break:break-word;}
.derived .v small{font:700 12px Arial, sans-serif;color:var(--soft);}

.steps{margin-top:24px;font-size:13px;color:#3a3c44;background:var(--gray);padding:14px 16px;font-family:Consolas, "Courier New", monospace;overflow-x:auto;white-space:pre;}

/* small buttons inside panels */
.btn-sm{font:inherit;font-size:13px;font-weight:700;background:#fff;border:2px solid var(--ink);padding:8px 12px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block;}
.btn-sm:hover{background:var(--yellow);}
.btn-x{font:inherit;font-size:18px;line-height:1;background:transparent;border:0;cursor:pointer;color:var(--soft);padding:10px 6px;}
.btn-x:hover{color:#b3261e;}

/* below the calculator */
article{margin-top:24px;}
article h2{font-size:26px;font-weight:800;line-height:1.15;margin:48px 0 12px;}
.notes{margin:0;padding-left:18px;font-size:13px;color:var(--soft);}
.cta{margin-top:40px;background:var(--ink);color:var(--cream);padding:32px 28px;}
.cta h2{margin:0 0 10px;color:var(--cream);}
.cta p{color:#d6d6d0;margin:0 0 20px;max-width:60ch;}
.cta a.btn{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:800;padding:12px 18px;text-decoration:none;margin:0 10px 10px 0;}
.cta a.btn.alt{background:transparent;color:var(--cream);border:2px solid var(--cream);}
.related{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:12px;}
@media (max-width:640px){ .related{grid-template-columns:1fr;} }
.related a{display:block;background:#fff;border:2px solid var(--ink);padding:14px 16px;color:var(--ink);text-decoration:none;font-weight:700;}
.related a:hover{background:var(--yellow);}
.related a span{display:block;font-weight:400;font-size:13px;color:var(--soft);margin-top:4px;}

footer{margin-top:40px;padding-top:20px;border-top:1px solid #dcdcd4;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
footer a{color:var(--ink);}
footer .tag{font-size:12px;color:var(--muted);}