/* Ridgewell Insurance: calculator pages under /tools (generated by scripts/build-articles.js).
   Builds on the calculator styles in custom.css (.calc-*) and the article column in article.css. */

.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; }

.tool-calc { margin: 2rem 0 1rem; }

/* Inputs: one column on phones, two from 640px. Labels sit above full-width fields. */
.tool-inputs { display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem; }
@media (min-width: 640px) { .tool-inputs { grid-template-columns: 1fr 1fr; } }
.tool-field { min-width: 0; }
.tool-field .calc-label { display: block; margin-bottom: 0.45rem; }
.tool-field .calc-num-wrap { display: flex; width: 100%; }
.tool-field .calc-num { flex: 1; width: 100%; min-width: 0; text-align: left; }
.tool-select { cursor: pointer; padding-right: 0.25rem; }
.tool-hint { margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-mute); }

/* Outputs: two columns at every width the article column allows; one on narrow phones. */
.tool-calc .tool-outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 479px) { .tool-calc .tool-outputs { grid-template-columns: 1fr; gap: 1.1rem; } }
.tool-calc .calc-out-value { font-size: clamp(1.4rem, 2.2vw, 1.75rem); overflow-wrap: anywhere; }
.tool-calc .tool-wide { grid-column: 1 / -1; margin-top: 0.25rem; }
.tool-out-note { margin-top: 0.35rem; font-size: 0.875rem; color: var(--ink-mute); }
.tool-calc [hidden] { display: none; }

.tool-message { padding: 1rem 1.25rem; border-radius: 12px; background: var(--action-tint); color: var(--ink); font-weight: 600; line-height: 1.5; }

/* Current vs. with extra payments */
.tool-compare-wrap { overflow-x: auto; margin-bottom: 1.75rem; border: 1px solid var(--rule); border-radius: 12px; }
.tool-compare { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tool-compare th, .tool-compare td { padding: 0.75rem 0.9rem; text-align: left; border-bottom: 1px solid var(--rule-soft); }
.tool-compare tr:last-child th, .tool-compare tr:last-child td { border-bottom: 0; }
.tool-compare thead th { background: var(--surface-tint); font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.tool-compare tbody th { font-weight: 500; color: var(--ink-soft); }
.tool-compare td { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--ink); font-size: 1.05rem; }
/* On phones all three columns fit without scrolling, so "With extra payments" stays in view. */
@media (max-width: 479px) {
  .tool-compare th, .tool-compare td { padding: 0.6rem 0.5rem; }
  .tool-compare td { font-size: 0.95rem; }
  .tool-compare thead th, .tool-compare tbody th { font-size: 0.8rem; }
}

/* CTA directly under the results */
.tool-cta { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: var(--surface-tint); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.tool-cta p { color: var(--ink); font-size: 1.05rem; }
.tool-cta .btn { max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 479px) { .tool-cta .btn { width: 100%; justify-content: center; } }