/* Buydown Calculator (/tools/buydown-calculator). Builds on time-machine.css and report.css tokens. */

.bd-layout { display: grid; grid-template-columns: 300px 1fr; gap: 56px; padding-top: 48px; padding-bottom: 64px; align-items: start; }
.bd-inputs { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 88px; }
.bd-results { min-width: 0; }
.bd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bd-field-label { display: block; font: var(--label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; }
.bd-select { width: 100%; border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 10px 0; font-family: var(--font-body); font-size: 1rem; color: var(--ink); border-radius: 0; }
.bd-check { display: flex; gap: 10px; align-items: center; font-size: 0.95rem; color: var(--ink); cursor: pointer; }
.bd-check input { width: 18px; height: 18px; accent-color: var(--ink); }
.bd-btn { appearance: none; border: 1px solid var(--ink); background: var(--bond); color: var(--ink); font: var(--label); text-transform: uppercase; letter-spacing: 0.12em; padding: 13px 18px; min-height: 44px; cursor: pointer; }
.bd-btn:hover { background: var(--ink); color: var(--bond); }

/* Segmented controls on white bond (the cover version is on ink) */
.bd .bd-seg { border-color: var(--ink); flex-wrap: wrap; }
.bd .bd-seg button { color: var(--ink); border-right-color: var(--ink); padding: 11px 14px; }
.bd .bd-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bond); }
.bd .bd-seg button:focus-visible { outline-color: var(--stamp); }

.bd-block { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--rule-light); }
.bd-block h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin: 10px 0 20px; }
.bd-block .tm-kicker { color: var(--stamp); }
.bd-toolbar { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 16px; }
.bd-note { color: var(--muted); font-size: 0.9rem; margin: 0 0 16px; }

.bd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bd-scroll:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }
.bd .tm-table { min-width: 640px; }
.bd .tm-table th.num, .bd .tm-table td.num { padding-right: 0; padding-left: 16px; }
.bd .tm-table td.num small { display: block; font-family: var(--font-body); font-size: 0.78rem; color: var(--muted); white-space: normal; margin-top: 3px; }
.bd .tm-table td.num .is-save { color: var(--positive); }
.bd .tm-table thead th.num button { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; border-bottom: 1px dotted currentColor; }
.bd .tm-table thead th.is-picked { color: var(--ink); }
.bd .tm-table tr.is-total th, .bd .tm-table tr.is-total td { border-top: 1px solid var(--ink); font-weight: 600; }
.bd .tm-table tr.is-total td.num { color: var(--ink); }
.bd .tm-table .tm-stamp { font-size: 0.66rem; padding: 2px 6px; }
.bd .tm-stamp.is-ok { color: var(--positive); }
.bd .tm-stamp.is-over { color: var(--stamp); }
.bd-types-table { table-layout: fixed; }
.bd-types-table th:first-child { width: 22%; }
.bd-flag { color: var(--stamp); }

.bd-vs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.bd-vs div { border-top: 2px solid var(--ink); padding-top: 14px; }
.bd-vs .tm-figure { color: var(--ink); display: block; margin: 8px 0; }
.bd-vs p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.bd-vs-lede { max-width: 64ch; color: var(--muted); margin: 0 0 24px; }

@media (max-width: 900px) {
  .bd-layout { grid-template-columns: 1fr; gap: 40px; }
  .bd-inputs { position: static; }
  .bd-vs { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .bd-layout { padding-top: 32px; }
  .bd .tm-table .tm-measure small { display: block; }
}
@media print {
  #public-nav, .bd-inputs .bd-btn, .tm-cta, footer { display: none !important; }
  .bd-layout { grid-template-columns: 1fr; }
  .bd-inputs { position: static; }
}