/* Krieger Sevac Engineering Tools — page-specific, CSP-compatible external styles */
.tools-page { background: #f4f7f9; color: #1c2d3c; }
.tools-hero { position: relative; overflow: hidden; padding: 64px 0 60px; background: linear-gradient(120deg, #0e2638 0%, #184360 56%, #1f6076 100%); color: #fff; }
.tools-hero::after { content: ''; position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, #000, transparent); }
.tools-hero .container { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 11px; color: #36d4ca; font: 700 .72rem/1.2 'Poppins', sans-serif; letter-spacing: .15em; }
.tools-hero h1 { margin: 0; font: 800 clamp(2rem, 4vw, 3.25rem)/1.1 'Poppins', sans-serif; letter-spacing: -.04em; }
.tools-workspace { padding: 48px 0 70px; }
.tools-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); align-items: start; gap: 24px; }
.tools-nav { position: sticky; top: 100px; display: grid; gap: 8px; padding: 18px; border: 1px solid #d7e0e6; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(16,57,78,.06); }
.tools-nav-label { margin: 0 0 6px; padding: 0 8px; color: #76909e; font: 700 .68rem/1.2 'Poppins', sans-serif; letter-spacing: .14em; }
.tools-nav-item { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; padding: 13px 10px; border: 1px solid transparent; border-radius: 9px; color: #375362; font: 600 .82rem/1.35 'Poppins', sans-serif; text-decoration: none; }
.tools-nav-item.is-active { border-color: #bfe5e3; background: #edf9f8; color: #135b67; }
.tools-nav-item.is-placeholder { color: #8499a4; cursor: default; }
.tools-nav-item small { display: block; margin-top: 3px; color: #94a5ad; font: 500 .68rem/1.2 'Inter', sans-serif; }
.tools-nav-number { color: #1a9ca0; font: 700 .69rem/1.4 'Poppins', sans-serif; }
.converter-shell { border: 1px solid #d7e0e6; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 50px rgba(16,57,78,.09); }
.converter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #e2e9ed; gap: 1px; }
.unit-card { min-width: 0; padding: 26px 18px; background: #fff; }
.unit-card-featured { background: linear-gradient(145deg, #f4fcfc, #fff); }
.unit-card h2 { margin: 0; color: #17394f; font: 700 .94rem/1.3 'Poppins', sans-serif; letter-spacing: -.01em; }
.unit-control { display: flex; align-items: center; gap: 6px; margin-top: 20px; }
.converter-input { min-width: 0; width: 100%; border: 1px solid #c9d8e0; border-radius: 7px; padding: 12px 8px; background: #fff; color: #143b54; font: 600 .98rem/1.2 'Inter', sans-serif; outline: none; }
.converter-input:focus { border-color: #15929a; box-shadow: 0 0 0 3px rgba(21,146,154,.13); }
.unit-symbol { min-width: 41px; color: #637987; font: 600 .72rem/1.2 'Poppins', sans-serif; text-align: right; }
.step-button { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 1px solid #c9d8e0; border-radius: 7px; background: #fff; color: #1b6670; cursor: pointer; font: 600 1.05rem/1 'Inter', sans-serif; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.step-button:hover { border-color: #15929a; background: #eaf7f6; }
.step-button:active { transform: scale(.97); }
.secondary-reading { margin: 10px 0 0; color: #647a88; font-size: .76rem; text-align: center; }
.secondary-reading strong { color: #1b6670; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1050px) { .tools-layout { grid-template-columns: 1fr; } .tools-nav { position: static; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: stretch; } .tools-nav-label { display: grid; align-items: center; margin: 0; } }
@media (max-width: 860px) { .converter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tools-hero { padding: 52px 0 48px; } .tools-workspace { padding: 34px 0 50px; } .tools-nav { grid-template-columns: 1fr; gap: 4px; padding: 12px; } .tools-nav-label { display: block; padding: 5px 8px; } .converter-grid { grid-template-columns: 1fr; } .unit-card { padding: 21px 20px; } .unit-card h2 { font-size: 1rem; } .unit-control { margin-top: 14px; } .converter-input { padding: 13px 12px; font-size: 1.04rem; } .unit-symbol { min-width: 49px; font-size: .8rem; } .step-button { width: 35px; height: 35px; flex-basis: 35px; } }