/* Interactive tools (/tools/<slug>/), built by scripts/build-tools.mjs. Tokens: styles.css. A copy lives in dist/.
   Loaded AFTER blog.css (build-tools passes it as extraCss), so these rules win over .post-body defaults.
   Class names are used in content/tools/*.md and *.js: restyle, don't rename. Buttons use the shared .btn / .btn--ghost;
   .tool-btn stays on the markup as a hook. */
.tool-card { border: 1.5px solid var(--text); border-radius: var(--r-doc); padding: clamp(1.25rem, .8rem + 2vw, 2rem); background: var(--surface); margin: 1.75em 0; box-shadow: var(--stack); font-size: 1rem; }
.tool-card > * + * { margin-top: var(--s-4); }
.post-body .tool-card h2, .post-body .tool-card h3, .tool-card h2, .tool-card h3 { margin-top: 0; border: 0; padding: 0; }
.tool-card fieldset { border: 0; padding: 0; margin: 0; }
.tool-card legend, .tool-label { display: block; font-weight: 650; color: var(--text); margin-bottom: var(--s-2); font-size: 1rem; }
.tool-hint { font-size: .875rem; color: var(--text-muted); margin-top: var(--s-1); }
.tool-opt { font-weight: 450; color: var(--text-muted); font-size: .875rem; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } }
.tool-card select, .tool-card input[type="number"], .tool-card input[type="text"], .tool-card input[type="date"] {
  width: 100%; min-height: 48px; border: 2px solid var(--rule-strong); border-radius: var(--r-ctl); padding: .6rem .8rem; font-size: 1rem; background-color: var(--surface); color: var(--text); }
.tool-card select { padding-right: 2.5rem; }
/* Text-like controls get the border + halo focus; checkboxes and radios keep the site-wide :focus-visible ring. */
.tool-card select:focus, .tool-card input:is([type="number"], [type="text"], [type="date"]):focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 4px var(--tint-2); }
.tool-card select:focus-visible, .tool-card input:is([type="number"], [type="text"], [type="date"]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tool-card [aria-invalid="true"] { border-color: var(--danger); }
.tool-error { color: var(--danger); font-size: .875rem; font-weight: 600; margin-top: var(--s-1); }
.tool-summary { color: var(--danger); font-weight: 600; border: 1.5px solid var(--danger); background: var(--danger-bg); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); }
.tool-options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tool-option { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .45rem .85rem; border: 1.5px solid var(--rule-strong); border-radius: var(--r-ctl); cursor: pointer; font-size: .9375rem; background: var(--surface); transition: border-color var(--t-hover), background-color var(--t-hover); }
.tool-option:hover { border-color: var(--accent-text); background: var(--tint); }
.tool-option:has(input:checked) { border-color: var(--accent-text); background: var(--tint-2); color: var(--on-tint); font-weight: 650; }
.tool-option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tool-option input[type="radio"] { accent-color: var(--teal-600); width: 1.1rem; height: 1.1rem; }
/* Button rows: a real gap, so the pairs never touch (and are easy to hit on a phone). */
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.post-body a.btn, .post-body a.tool-btn { color: var(--btn-text); text-decoration: none; }
.post-body a.btn:hover, .post-body a.tool-btn:hover { color: var(--btn-text); }
.post-body a.btn--ghost { color: var(--text); }
.post-body a.btn--ghost:hover { color: var(--bg); }
.tool-result { border-top: 2px solid var(--text); background: var(--tint); color: var(--on-tint); padding: var(--s-4) var(--s-5); border-radius: 0; }
.tool-result[hidden] { display: none; }
.tool-result > * + * { margin-top: var(--s-3); }
.tool-result ul { padding-left: 1.2em; }
.tool-big { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); font-stretch: 116%; font-weight: 800; letter-spacing: -.015em; color: var(--on-tint); line-height: 1.15; font-variant-numeric: tabular-nums lining-nums; }
.tool-flag { color: var(--caution); }
.tool-ok { color: var(--ok); }
.tool-bar { height: 10px; background: var(--tint-2); overflow: hidden; }
.tool-bar > span { display: block; height: 100%; background: var(--accent-text); }
.tool-lines { list-style: none; padding: 0 !important; }
.tool-lines li + li { margin-top: var(--s-3); }
.tool-js-only { display: none; }
.tool-js .tool-js-only { display: block; }
.tool-js .tool-nojs { display: none; }
@media print {
  header, footer, nav, aside, .tool-noprint { display: none !important; }
  .tool-card { border: 1px solid #000; box-shadow: none; }
}
.tool-js tfoot.tool-js-only { display: table-footer-group; }
.tool-js button.tool-js-only, .tool-js a.tool-js-only { display: inline-flex; }
.tool-js p.tool-actions.tool-js-only, .tool-js .tool-actions { display: flex; }

/* ---------------------------------------------------------------- agreement checklist (3 offers side by side) */
.tool-compare th[scope="row"] { font-weight: 450; min-width: 14rem; }
.tool-compare thead input[type="text"] { margin-top: .3rem; font-weight: 450; min-width: 7rem; }
/* Each checkbox sits in a label that fills its cell: a 44 px target, and tapping the cell ticks it. */
.ac-cell { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; gap: .25rem; }
.ac-offer { font-size: .8125rem; font-weight: 650; color: var(--text-muted); }
@media (min-width: 701px) { .ac-offer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ac-empty { color: var(--text-muted); }
/* Phones: one line per block, with the three offers as labelled toggles under it (no sideways scrolling). */
@media (max-width: 700px) {
  .tool-compare .table-wrap { overflow: visible; background: none; }
  .tool-compare table, .tool-compare thead, .tool-compare tbody, .tool-compare tfoot, .tool-compare tr { display: block; width: 100%; }
  .tool-compare caption { display: block; text-align: left; }
  .tool-compare thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); border-bottom: 2px solid var(--text); padding-bottom: var(--s-3); }
  .tool-compare thead th:first-child { display: none; }
  .tool-compare thead th { background: none; border: 0; padding: 0; font-size: .875rem; }
  .tool-compare thead input[type="text"] { min-width: 0; }
  .tool-compare tbody tr, .tool-compare tfoot tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
  .tool-compare tbody th[scope="row"], .tool-compare tfoot th[scope="row"] { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; position: static; background: none; }
  .tool-compare tbody td, .tool-compare tfoot td { padding: 0; border: 0; position: static; background: none; }
  .tool-compare .ac-cell { border: 1.5px solid var(--rule-strong); border-radius: var(--r-ctl); padding: var(--s-2); min-height: 56px; grid-template-columns: auto auto; justify-content: center; gap: .5rem; }
  .tool-compare .ac-cell:has(input:checked) { border-color: var(--accent-text); background: var(--tint-2); }
  .tool-compare tfoot td { font-weight: 650; text-align: center; }
  .tool-compare tfoot td::before { content: attr(data-offer) ": "; font-weight: 450; color: var(--text-muted); }
}

/* ---------------------------------------------------------------- switch planner: the notice letter, printable on its own */
.vs-letter { background: var(--surface); color: var(--text); border: 1.5px solid var(--rule-strong); border-radius: var(--r-ctl); padding: var(--s-4) var(--s-5); }
.vs-letter p { margin: 0 0 .7em; }
@media print {
  .vs-printing body > *:not(:has(#vs-letter)), .vs-printing main *:not(:has(#vs-letter)):not(#vs-letter):not(#vs-letter *) { display: none !important; }
  .vs-printing main, .vs-printing main *:has(#vs-letter) { margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .vs-printing #vs-letter { border: 0; padding: 0; color: #000; background: #fff; }
}