/* ==========================================================================
   Tools / Engineering Calculators Page
   ========================================================================== */
.page-hero { position: relative; color: #fff; background: var(--navy-900); overflow: hidden; padding: calc(var(--header-h) + 3rem) 0 2.5rem; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 0%, rgba(59,120,196,.4), transparent 55%); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin: 0.5rem 0 0.6rem; }
.page-hero p { color: rgba(255,255,255,.78); max-width: 62ch; }
.crumbs { font-size: 0.85rem; color: rgba(255,255,255,.6); display: flex; gap: 0.5rem; }
.crumbs a { color: #9dc4f0; }

.tools-toolbar { display: flex; justify-content: center; margin-bottom: 2rem; }
.tools-search { position: relative; width: min(480px, 100%); }
.tools-search input { width: 100%; padding: 0.9rem 1.2rem; border-radius: var(--r-pill); border: 1px solid var(--steel-200); background: #fff; box-shadow: var(--shadow-sm); }

.tool-cat-title { font-family: var(--font-head); font-size: 1.3rem; color: var(--navy-900); margin: 2.2rem 0 1.2rem; display: flex; align-items: center; gap: 0.7rem; }
.tool-cat-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
@media (max-width: 900px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tool-grid { grid-template-columns: 1fr; } }

.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); transition: box-shadow var(--t) var(--ease); }
.tool-card:hover { box-shadow: var(--shadow-md); }
.tool-card h3 { font-size: 1.08rem; margin-bottom: 0.2rem; }
.tool-card .desc { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 1rem; }
.tool-row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.tool-row label { font-size: 0.85rem; color: var(--text-soft); }
.tool-row input, .tool-row select { width: 110px; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); border: 1px solid var(--steel-200); background: var(--bg-alt); text-align: right; }
.tool-row select { text-align: left; }
.tool-result { margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--r-md); background: var(--grad-navy); color: #fff; display: flex; justify-content: space-between; align-items: baseline; }
.tool-result .val { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.tool-result .val small { font-size: 0.8rem; font-weight: 500; opacity: 0.8; }
.tool-formula { margin-top: 0.7rem; font-size: 0.75rem; color: var(--text-muted); font-family: ui-monospace, 'Cascadia Code', monospace; }
.tool-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.tool-actions button { flex: 1; padding: 0.5rem; font-size: 0.8rem; border-radius: var(--r-sm); border: 1px solid var(--steel-200); background: #fff; color: var(--text-soft); transition: all var(--t-fast); }
.tool-actions button:hover { border-color: var(--navy-500); color: var(--navy-700); }
.tools-empty { text-align: center; padding: 3rem; color: var(--text-muted); }

@media print { .site-header, .site-footer, .to-top, .tools-toolbar, .page-hero, .tool-actions { display: none !important; } }