/* Engineer Tools: loaded only on /tools pages, after styles.css, so it reuses
   the same tokens and adds only what a calculator needs. Mobile first: the
   inputs are 17px (16px or more stops iPhones zooming the page on focus) and
   every button and field is at least 44px tall. */

[hidden] { display:none !important; }

.tool-hero { padding-bottom:8px; }
.tool-hero h1 { font-size:clamp(30px, 6.5vw, 46px); }
.tool-hero .lead { font-size:17px; }
@media (max-width:640px) { .tool-hero { padding-top:28px; } .tool-panel { padding:18px 16px; } }
.tool-section { padding:20px 0 72px; }

/* ---------- hub: one sub-menu per discipline ---------- */
.hub-controls { display:flex; gap:10px; margin:0 0 16px; }
.hub-toggle { font:inherit; font-size:14.5px; font-weight:600; color:var(--accent); background:transparent; border:1px solid var(--line-strong); border-radius:var(--radius-sm); min-height:44px; padding:0 16px; cursor:pointer; }
.hub-toggle:hover { border-color:var(--accent); }
.hub-toggle:focus-visible { outline:none; box-shadow:var(--ring); }
.hub-list { display:grid; gap:12px; }
.hub-group { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); scroll-margin-top:88px; }
.hub-group summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:64px; padding:0 20px; cursor:pointer; list-style:none; }
.hub-group summary::-webkit-details-marker { display:none; }
.hub-group summary h2 { font-size:19px; margin:0; letter-spacing:-0.01em; }
.hub-group summary:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius); }
.hub-count { margin-left:auto; font-size:14px; color:var(--steel); white-space:nowrap; }
.hub-group summary::after { content:""; flex:none; width:9px; height:9px; margin-left:4px; border-right:2px solid var(--steel); border-bottom:2px solid var(--steel); transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.hub-group[open] summary::after { transform:rotate(-135deg) translateY(-2px); }
.hub-group[open] summary { border-bottom:1px solid var(--line); }
.hub-cards { display:grid; grid-template-columns:1fr; gap:10px; padding:16px 20px 20px; }
@media (min-width:720px) { .hub-cards { grid-template-columns:1fr 1fr; } }
.tool-card { display:flex; flex-direction:column; gap:4px; padding:14px 16px; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); min-height:44px; }
.tool-card:hover { border-color:var(--accent); background:#fff; }
.tool-card:focus-visible { outline:none; box-shadow:var(--ring); border-color:var(--accent); }
.tool-card-name { font-weight:700; font-size:16px; color:var(--ink); }
.tool-card-blurb { font-size:14.5px; color:var(--steel); line-height:1.45; }
.tool-card-meta { margin-top:auto; padding-top:6px; font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--muted); letter-spacing:0.02em; }
@media (prefers-reduced-motion:reduce) { .hub-group summary::after { transition:none; } }

/* ---------- layout: inputs, then result; side by side on a wide screen ---------- */
.tool-layout { display:grid; grid-template-columns:1fr; gap:22px; align-items:start; }
@media (min-width:900px) {
  .tool-layout { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; }
  .tool-side { position:sticky; top:88px; }
}
.tool-side { display:grid; gap:16px; min-width:0; }
.tool-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow-sm); min-width:0; }
.tool-panel h2 { font-size:19px; margin:0 0 14px; letter-spacing:-0.01em; }

/* Phones only: the answer stays pinned to the bottom of the screen while the fields are filled in. */
.result-strip { position:sticky; bottom:8px; z-index:5; display:flex; justify-content:space-between; align-items:baseline; gap:12px; background:var(--ink); color:#fff; border-radius:var(--radius-sm); padding:12px 16px; box-shadow:0 -4px 16px rgba(40,53,42,.18); }
.result-strip .rs-value { font-size:18px; font-weight:700; white-space:nowrap; }
.result-strip .rs-next { font-size:14px; opacity:.85; text-align:right; }
@media (min-width:900px) { .result-strip { display:none !important; } }

/* ---------- fields ---------- */
.tool-field { margin-bottom:16px; }
.tool-field label, .tool-field legend { display:block; font-weight:600; font-size:15px; margin-bottom:7px; padding:0; }
.tool-field select, .tool-field input[type="date"], .tool-field input[type="search"], .tool-field textarea, .tool-input input {
  width:100%; min-height:48px; font-family:inherit; font-size:17px; color:var(--ink); background:#fff;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 14px;
}
.tool-input { display:flex; align-items:stretch; }
.tool-input input { flex:1; min-width:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.tool-input .unit {
  display:flex; align-items:center; justify-content:center; min-width:56px; padding:0 12px; font-size:14px; color:var(--steel);
  background:var(--sage); border:1px solid var(--line-strong); border-left:none; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.tool-field select:focus, .tool-field input[type="date"]:focus, .tool-field input[type="search"]:focus, .tool-field textarea:focus, .tool-input input:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.tool-input input[aria-invalid="true"] { border-color:var(--alarm); }
.field-error { color:var(--alarm); font-size:14.5px; font-weight:600; margin:6px 0 0; }
.tool-field .field-hint, .standby-note { font-size:14px; color:var(--steel); margin:6px 0 0; }
.standby-note { margin:-8px 0 16px; min-height:0; font-family:"IBM Plex Mono", monospace; }
.standby-note:empty { display:none; }
.segmented-field { border:none; margin:0 0 16px; padding:0; min-width:0; }
.segmented { display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius-sm); overflow:hidden; background:#fff; }
.segmented label { position:relative; display:block; margin:0; cursor:pointer; }
.segmented input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.segmented span { display:flex; align-items:center; justify-content:center; min-width:72px; min-height:48px; padding:0 18px; font-weight:600; font-size:16px; color:var(--steel); }
.segmented label + label span { border-left:1px solid var(--line-strong); }
.segmented input:checked + span { background:var(--ink); color:#fff; }
.segmented input:focus-visible + span { box-shadow:inset var(--ring); }
.tool-advanced { margin-top:4px; border-top:1px solid var(--line); padding-top:14px; }
.tool-advanced summary { cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center; }

.poe-group { margin:0 0 6px; }
.poe-group-title { font-weight:600; font-size:15px; margin:0 0 8px; color:var(--steel); }
.poe-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px) { .poe-row { grid-template-columns:1fr; gap:0; } }

/* ---------- result ---------- */
.result-waiting { color:var(--steel); margin:0; }
.result-value { font-size:clamp(38px, 11vw, 56px); font-weight:700; line-height:1.05; margin:0 0 4px; letter-spacing:-0.02em; }
.result-caption { color:var(--steel); font-size:14.5px; margin:0 0 14px; }
.result-next { font-weight:700; font-size:18px; margin:0 0 4px; }
.result-check { color:var(--steel); font-size:14.5px; margin:0 0 12px; }
.result-warning { color:#92400E; background:var(--caution-bg); border-radius:8px; padding:8px 12px; font-size:14px; margin:0 0 10px; }
.result-status { display:inline-block; font-weight:700; font-size:16px; border-radius:8px; padding:8px 12px; margin:0 0 12px; }
.result-status.result-ok { background:var(--go-bg); color:var(--go); }
.result-status.result-fail { background:var(--alarm-bg); color:var(--alarm); }
.tool-note a { color:var(--accent); font-weight:600; }
.result-cite { font-size:13px; color:var(--muted); margin:0; }
.tool-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tool-actions .btn { min-height:48px; }
.tool-actions .btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.copy-status { font-size:14.5px; font-weight:600; color:var(--go); min-height:1em; }

/* ---------- working ---------- */
.working-formula { font-size:15px; font-weight:600; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; margin:0 0 12px; overflow-wrap:anywhere; }
.working-intro { font-size:14.5px; color:var(--steel); }
.working-key { margin:0 0 8px; padding-left:20px; }
.working-key li { margin-bottom:4px; }
.working-steps { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:0; }
.working-steps li { display:grid; grid-template-columns:1fr; gap:2px; padding:10px 0; border-top:1px solid var(--line); }
.working-steps .w-label { font-size:13.5px; color:var(--steel); font-weight:600; }
.working-steps .w-text { font-size:14.5px; overflow-wrap:anywhere; }
@media (min-width:640px) { .working-steps li { grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.4fr); gap:14px; } }

.tool-note, .battery-marking-note { margin:20px 0 0; font-size:15px; color:var(--steel); max-width:70ch; }
.tool-disclaimer { margin-top:28px; }
.tool-disclaimer p { margin:0; }
.kerova-note { margin:28px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--steel); }
.kerova-note a { color:var(--accent); font-weight:600; }


/* ---------- printable sheets: log books and checklists ---------- */
.print-actions { margin:0 0 14px; }
.sheet-hint { color:var(--steel); font-size:14.5px; margin:0 0 16px; }
.print-sheet { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.sheet-title { display:none; font-size:22px; margin:0 0 14px; }
.sheet-section { padding:0; margin:0 0 30px; }
.sheet-section h2 { font-size:18px; margin:0 0 6px; letter-spacing:-0.01em; }
.sheet-note { font-size:14px; color:var(--steel); margin:0 0 10px; }
.sheet-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin:10px 0 0; }
@media (max-width:640px) { .sheet-fields { grid-template-columns:1fr; } .print-sheet { padding:16px; } }
.sheet-fields dt { font-size:13px; font-weight:600; color:var(--steel); margin:0 0 4px; }
.sheet-fields dd { margin:0; border-bottom:1px solid #8a8f8a; height:26px; }
.sheet-signoff { margin-top:8px; }
.sheet-signoff dd { height:42px; }
.print-scroll { overflow-x:auto; }
.print-table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.print-table th, .print-table td { border:1px solid #8a8f8a; padding:6px 8px; text-align:left; vertical-align:top; }
.print-table th { background:var(--sage); font-size:13px; }
.print-table td { height:34px; }
.check-table td:first-child { height:auto; min-height:34px; }
.check-table .tick { width:52px; text-align:center; }

.ref-table th[scope="row"] { background:transparent; font-size:14px; white-space:nowrap; }
.glossary { margin:14px 0 0; display:grid; gap:0; }
.glossary-item { padding:12px 0; border-top:1px solid var(--line); }
.glossary-item dt { font-weight:700; margin:0 0 3px; }
.glossary-item dd { margin:0; color:var(--steel); max-width:70ch; }
.gl-search { max-width:420px; }

/* ---------- quick reference guides ---------- */
.tool-field textarea { min-height:180px; resize:vertical; line-height:1.5; }
.ref-plain { display:none; }
[data-ref-mode="plain"] .ref-plain { display:block; }
[data-ref-mode="plain"] .ref-tech { display:none; }
.ref-head { margin:0 0 20px; max-width:75ch; }
.ref-edition { font-size:15px; color:var(--steel); margin:0 0 10px; }
.ref-covers { margin:0; }
.ref-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 28px; margin:0 0 14px; }
.ref-search { flex:1 1 280px; margin:0; }
.ref-mode { border:none; margin:0; padding:0; min-width:0; }
.ref-mode-label { display:block; font-weight:600; font-size:15px; margin:0 0 7px; padding:0; }
.ref-legend { font-size:14px; color:var(--steel); margin:0 0 14px; max-width:80ch; }
.ref-count { font-size:14.5px; color:var(--steel); margin:0 0 12px; min-height:1.3em; }
.ref-badge { display:inline-block; font-size:12.5px; font-weight:700; line-height:1; letter-spacing:0.02em; padding:5px 9px; border-radius:20px; }
.ref-confirmed { background:var(--go-bg); color:var(--go); }
.ref-check { background:var(--caution-bg); color:#92400E; }
.ref-entries, .ref-results { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ref-entry, .ref-result { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; box-shadow:var(--shadow-sm); scroll-margin-top:88px; }
.ref-entry:target { border-color:var(--accent); box-shadow:var(--ring); }
.ref-entry h2 { font-size:18px; margin:0 0 8px; letter-spacing:-0.01em; }
.ref-anchor { color:inherit; text-decoration:none; }
.ref-anchor:hover { text-decoration:underline; }
.ref-text { margin:0 0 10px; max-width:72ch; }
.ref-note { background:var(--caution-bg); color:#92400E; border-radius:8px; padding:8px 12px; font-size:14.5px; margin:0 0 10px; max-width:72ch; }
.ref-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0; }
.ref-tool { font-weight:600; font-size:14.5px; color:var(--accent); }
.ref-result-q { display:block; font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; margin:0 0 6px; }
.ref-result-q:hover { text-decoration:underline; }
.ref-result-text { margin:0 0 8px; color:var(--steel); font-size:15px; max-width:72ch; }
.ref-result-meta { margin:0; font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.ref-guides h2 { font-size:22px; margin:8px 0 14px; }
.ref-guides .hub-cards { padding:0; margin:0 0 16px; }
.ref-none { color:var(--steel); }
.ex-simplified { white-space:pre-wrap; font-size:16px; line-height:1.55; margin:0 0 10px; overflow-wrap:anywhere; }
.ex-changes { font-size:14px; color:var(--steel); margin:0 0 12px; }
.hub-feature { display:flex; flex-direction:column; gap:4px; padding:16px 20px; margin:0 0 14px; text-decoration:none; color:inherit; background:var(--ink); border-radius:var(--radius); }
.hub-feature-title { font-weight:700; font-size:18px; color:#fff; }
.hub-feature-text { font-size:14.5px; color:rgba(255,255,255,.82); }
.hub-feature:hover { background:#1f2a21; }
.hub-feature:focus-visible { outline:none; box-shadow:var(--ring); }

/* ---------- diagrams in the quick reference guides ---------- */
.ref-visual { margin:6px 0 14px; max-width:560px; }
.ref-visual svg { display:block; width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); }
.ref-visual figcaption { font-size:13.5px; color:var(--steel); margin-top:6px; max-width:64ch; }
@media (max-width:560px) { .ref-entry, .ref-result { padding:16px 14px; } .ref-visual { margin-left:-4px; margin-right:-4px; } }
.vz-t { font-family:"IBM Plex Sans", system-ui, sans-serif; font-size:12px; fill:var(--ink); }
.vz .vz-s { font-size:10.5px; }
.vz .vz-xs { font-size:8.5px; }
.vz .vz-b { font-weight:700; }
.vz .vz-m { fill:var(--steel); }
.vz .vz-on-accent { fill:#fff; }
.vz .vz-accent-text { fill:var(--accent); }
.vz .vz-brass-text { fill:var(--brass); }
.vz-line { stroke:var(--ink); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.vz .vz-thin { stroke-width:1; }
.vz .vz-thick { stroke-width:3; }
.vz .vz-dash { stroke-dasharray:4 3; }
.vz .vz-accent { stroke:var(--accent); }
.vz .vz-brass { stroke:var(--brass); }
.vz .vz-alarm { stroke:var(--alarm); stroke-width:2; }
.vz .vz-fillnone { fill:none; }
.vz .vz-fill-ink { fill:var(--ink); stroke:none; }
.vz .vz-fill-accent { fill:var(--accent); }
.vz .vz-fill-accent-soft { fill:var(--go-bg); }
.vz .vz-fill-brass { fill:var(--brass); }
.vz .vz-fill-brass-soft { fill:var(--brass-soft); }
.vz .vz-fill-soft { fill:var(--sage); }
.vz .vz-fill-paper, .vz .vz-fill-white { fill:#fff; }
.vz .vz-fill-alarm { fill:var(--alarm); }
.vz .vz-fill-red { fill:#C8102E; }
.vz .vz-fill-grey { fill:#B9BEC2; }
.vz .vz-fill-grey-soft { fill:#DADFDA; }
.vz .vz-band { stroke:var(--ink); stroke-width:1; }

/* ---------- print: the result and its working on a clean page ---------- */
@media print {
  @page { size:A4; margin:14mm; }
  html, body { background:#fff !important; }
  body { font-size:11pt; color:#000; }
  .skip-link, .site-header, .site-footer, .crumbs, .tool-actions, .tool-form, .result-strip, .kerova-note, .nav-toggle, noscript { display:none !important; }
  .tool-hero, .tool-section { padding:0 !important; }
  .tool-hero .lead { max-width:none; font-size:11pt; color:#000; }
  .tool-layout { display:block; }
  .tool-side { position:static; display:block; }
  .tool-panel { border:1px solid #999; box-shadow:none; background:#fff; break-inside:avoid; margin:0 0 10mm; padding:5mm; }
  .working-steps li { break-inside:avoid; }
  .result-value { font-size:30pt; }
  .callout { border:1px solid #999; background:#fff; }
  .tool-disclaimer { break-inside:avoid; }
  a { text-decoration:none; color:#000; }
  .print-actions, .sheet-hint, .tool-note, .ref-toolbar, .ref-legend, .hub-feature { display:none !important; }
  body:has(.print-sheet) .tool-hero { display:none !important; }
  .print-sheet { border:none; padding:0; border-radius:0; }
  .sheet-title { display:block; }
  .sheet-section { padding:0; margin:0 0 8mm; }
  .sheet-section h2 { break-after:avoid; }
  .print-scroll { overflow:visible; }
  .print-table { min-width:0; font-size:10pt; }
  .print-table th, .print-table td { border:1px solid #000; padding:2mm; }
  .print-table th { background:#eee !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .print-table thead { display:table-header-group; }
  .print-table tr { break-inside:avoid; }
  .print-table td { height:9mm; }
  .check-table td:first-child { height:auto; }
  .ref-table td, .ref-table th { height:auto; }
  .glossary-item { break-inside:avoid; }
  .glossary-item dd { color:#000; }
  .sheet-fields dd { border-bottom:1px solid #000; }
}

/* ---------- diagram drawn under a calculator result ---------- */
.result-visual-wrap { margin:4px 0 14px; }
.result-visual-wrap .ref-visual { margin:0; }

/* ---------- use offline (tools page) ---------- */
.offline-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:18px 20px; margin:0 0 16px; }
.offline-card h2 { font-size:19px; margin:0 0 6px; letter-spacing:-0.01em; }
.offline-status { margin:0 0 12px; color:var(--ink); max-width:64ch; }
.offline-actions { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
.offline-actions[hidden], .offline-actions:not(:has(:not([hidden]))) { display:none; }
.offline-ios { margin:0 0 10px; font-weight:600; max-width:64ch; }
.offline-note { margin:0; font-size:14px; color:var(--steel); max-width:64ch; }
@media (max-width:560px) { .offline-card { padding:16px 14px; } }

/* ---------- "use with no signal" strip on every tool page ---------- */
.offline-strip { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; background:var(--sage); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 14px; margin:0 0 18px; font-size:14.5px; }
.offline-strip-text { margin:0; color:var(--ink); flex:1 1 320px; max-width:70ch; }
.offline-strip-actions { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
.offline-strip-actions a { color:var(--accent); font-weight:600; min-height:44px; display:inline-flex; align-items:center; }
.offline-strip-install { font:inherit; font-size:14.5px; font-weight:600; color:var(--accent); background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius-sm); min-height:44px; padding:0 14px; cursor:pointer; }
.offline-strip-install[hidden] { display:none; }
.offline-strip-install:focus-visible, .offline-strip-actions a:focus-visible { outline:none; box-shadow:var(--ring); }
.offline-strip-ios { flex-basis:100%; margin:0; font-weight:600; }
.offline-strip-ios[hidden] { display:none; }
@media print { .offline-strip, .offline-card { display:none !important; } }