/* Shared styles for the free tools (loaded on every tool page and /tools/). Tool-specific CSS goes in /assets/css/tools/<slug>.css. */
.tool-hero .tool-badges { list-style: none; padding: 0; margin: 18px 0 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.tool-badges li { background: var(--yellow); color: var(--black); font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; }
.tool { background: var(--bg); padding: 64px 0; }
.tool.alt { background: var(--white); }
.tool .container > h2:first-child, .tool-block > h2:first-child { margin-top: 0; }
.tool-lead { font-size: 1.1rem; max-width: 70ch; }
.tool-panel { background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 30px 32px; margin: 0 6px 32px 0; }
.tool-panel h3 { margin-top: 0; }
.tool-grid { display: grid; gap: 28px; }
.tool-form { display: grid; gap: 20px; }
.tool-form .form-field { margin: 0; }
.tool-form .hint { display: block; font-size: .85rem; color: var(--muted); margin-top: 4px; font-weight: 400; }
.tool-form .row { display: grid; gap: 16px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 3px solid var(--ink); background: var(--white); cursor: pointer; font-weight: 600; }
.choice input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--red); }
.choice:has(input:checked) { background: #fff7d6; border-color: var(--red); }
.result { margin-top: 24px; background: var(--ink); color: var(--white); padding: 26px 28px; border-top: 8px solid var(--yellow); }
.result h3 { color: var(--yellow); margin-top: 0; }
.result p:last-child { margin-bottom: 0; }
.result .big { display: block; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; color: var(--yellow); line-height: 1.05; }
.result-ok { border-top-color: #38a169; }
.result-warn { border-top-color: var(--yellow); }
.result-stop { border-top-color: var(--red); }
.tool-note { background: #fff7d6; border-left: 8px solid var(--yellow); padding: 16px 20px; margin: 22px 0; font-weight: 600; }
.tool-disclaimer { border: 3px solid var(--ink); background: var(--white); padding: 18px 22px; margin-top: 24px; font-size: .95rem; }
.tool-meta { font-size: .9rem; color: var(--muted); }
.tool-sources { background: var(--surface); padding: 56px 0; }
.source-list { padding-left: 1.2em; }
.source-list li { margin-bottom: 8px; }
.zone-bar { display: grid; gap: 10px; margin: 24px 0; }
.zone { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; background: var(--white); border: 3px solid var(--ink); padding: 12px 16px; }
.zone b { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-weight: 900; color: var(--white); background: var(--ink); }
.tool-icon { width: 56px; height: 56px; flex: none; }
.tool-cards { display: grid; gap: 32px 28px; }
.tool-card { background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tool-card .card-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.tool-card h3 a { color: var(--ink); text-decoration: none; }
.tool-card h3 a:hover { color: var(--red-dark); }
.tool-card .group { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red-dark); margin-bottom: 8px; }
.tool-card .more { margin: auto 0 0; font-weight: 800; }
.tool-card .card-photo { aspect-ratio: 16 / 10; }
.print-btn { cursor: pointer; }
.print-only { display: none; }
@media (min-width: 700px) { .tool-form .row { grid-template-columns: 1fr 1fr; } .tool-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tool-cards { grid-template-columns: repeat(3, 1fr); } .tool-grid.two { grid-template-columns: 1fr 1fr; } }
@media print {
  .utility-bar, .site-header, .site-footer, .hero, .breadcrumb, .cta-band, .nearby, .faq, .locations-grid, .tool-related, .no-print, .print-btn, .tool-sources .eyebrow { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tool, .tool.alt { background: #fff; padding: 0; }
  .tool-panel, .tool-card, .result { box-shadow: none !important; border: 2px solid #000 !important; break-inside: avoid; }
  .result { background: #fff !important; color: #000 !important; }
  .result h3, .result .big { color: #000 !important; }
  .print-only { display: block; }
  a { color: #000; text-decoration: none; }
  .tool-sources { background: #fff; padding: 12px 0; }
}

.tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.btn-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.btn-yellow:hover { color: var(--black); box-shadow: 4px 4px 0 var(--black); }
.btn-outline-light { background: transparent; border-color: var(--white); color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--black); }
.tool-bookmark { font-size: .9rem; font-weight: 700; margin: 0; }
.now { outline: 4px solid var(--red); outline-offset: 2px; position: relative; }
.now-badge { display: inline-block; background: var(--red); color: var(--white); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; margin-bottom: 8px; }
progress { width: 100%; height: 14px; accent-color: var(--red); }
@media print { .tool-actions, .tool-bookmark { display: none !important; } }