.mortgage-calculator__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 1.25rem; align-items: start; }
.mortgage-calculator__inputs { display: grid; gap: 1rem; min-width: 0; }
.mortgage-calculator__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.mortgage-calculator__fields .calculator-field { margin: 0; }
.mortgage-calculator__fields .calculator-field__control { min-width: 0; }
.mortgage-calculator__fields input { min-width: 0; width: 100%; }
.mortgage-calculator__wide { grid-column: 1 / -1; }
.mortgage-calculator__hint { margin: .9rem 0 0; font-size: .83rem; line-height: 1.65; color: var(--muted); }
.mortgage-calculator__results { position: sticky; top: 6.5rem; min-width: 0; }
.mortgage-calculator__hero { padding: 1.5rem; border-radius: .65rem; background: #111; color: #fff; }
.mortgage-calculator__hero > span { display: block; color: #d0d0d0; font-size: .83rem; font-weight: 750; }
.mortgage-calculator__hero > output { display: block; margin: .3rem 0; font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 700; letter-spacing: -.07em; line-height: 1.12; overflow-wrap: anywhere; }
.mortgage-calculator__hero > small { color: #c7c7c7; line-height: 1.5; }
.mortgage-calculator__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.mortgage-calculator__metrics .calculator-result { padding: .9rem; }
.mortgage-calculator__metrics output { font-size: 1.15rem; }
.mortgage-calculator__bar { display: flex; height: .8rem; margin: 1rem 0 .75rem; border-radius: 999px; overflow: hidden; background: #b8b8b8; }
.mortgage-calculator__bar > span { display: block; height: 100%; background: #151515; transition: width 180ms ease; }
.mortgage-calculator__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; font-size: .75rem; line-height: 1.5; color: var(--muted); }
.mortgage-calculator__legend span::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: #151515; }
.mortgage-calculator__legend span + span::before { background: #b8b8b8; }
.mortgage-calculator__extra { margin-top: .85rem; padding: .9rem; border: 1px solid var(--line); border-radius: .5rem; font-size: .83rem; line-height: 1.65; }
.mortgage-calculator__extra p { margin: 0; }
.mortgage-calculator__extra output { font-weight: 850; }
.mortgage-calculator__budget { margin-top: 1rem; }
.mortgage-calculator__budget h3 { margin: 0; font-size: 1rem; color: var(--navy); }
.mortgage-calculator__budget p { margin-bottom: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.mortgage-calculator__budget .mortgage-budget--negative { color: #a32b1d; }
.mortgage-calculator__error { padding: 1rem; margin: 0 0 1rem; border: 1px solid #ba5849; border-radius: .5rem; background: #fff4f1; color: #86281b; line-height: 1.65; }
.mortgage-calculator input[aria-invalid="true"] { outline: 2px solid #ba5849; outline-offset: 2px; }
.mortgage-calculator__plan { margin-top: 1.25rem; }
.mortgage-calculator__plan summary { cursor: pointer; color: var(--navy); font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; }
.mortgage-calculator__table-wrap { margin-top: 1rem; overflow: auto; max-height: 31rem; border: 1px solid var(--line); border-radius: .5rem; }
.mortgage-calculator__table { width: 100%; min-width: 35rem; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.mortgage-calculator__table th, .mortgage-calculator__table td { padding: .85rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mortgage-calculator__table th:first-child { text-align: left; }
.mortgage-calculator__table thead th { position: sticky; top: 0; background: var(--blue-soft); color: var(--navy); font-size: .76rem; }
.mortgage-calculator__table tr:last-child > * { border-bottom: 0; }
.mortgage-calculator__notes { margin-top: 1.25rem; color: var(--muted); font-size: .82rem; line-height: 1.75; }
.mortgage-calculator__notes a { color: inherit; text-underline-offset: .18em; }
.mortgage-calculator [hidden] { display: none !important; }
html.dark-mode .mortgage-calculator__hero { background: #f5f5f5; color: #111; }
html.dark-mode .mortgage-calculator__hero > span, html.dark-mode .mortgage-calculator__hero > small { color: #505050; }
html.dark-mode .mortgage-calculator__budget h3, html.dark-mode .mortgage-calculator__plan summary, html.dark-mode .mortgage-calculator__table thead th { color: #f5f5f5; }
html.dark-mode .mortgage-calculator__bar > span, html.dark-mode .mortgage-calculator__legend span:first-child::before { background: #f5f5f5; }
html.dark-mode .mortgage-calculator__bar, html.dark-mode .mortgage-calculator__legend span + span::before { background: #777; }
html.dark-mode .mortgage-calculator__table thead th { background: #292929; }
html.dark-mode .mortgage-calculator__budget .mortgage-budget--negative { color: #ffb5a9; }
@media (max-width: 900px) { .mortgage-calculator__grid { grid-template-columns: minmax(0, 1fr); } .mortgage-calculator__results { position: static; } }
@media (max-width: 480px) { .mortgage-calculator__fields { grid-template-columns: minmax(0, 1fr); } .mortgage-calculator__metrics { gap: .5rem; } .mortgage-calculator__metrics .calculator-result { padding: .7rem; } .mortgage-calculator__metrics output { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .mortgage-calculator__bar > span { transition: none; } }