/* ============================================================================
   Mortgage calculator — financing.html ONLY.

   Loaded by that one page, exactly like assets/form.css is loaded only by
   start.html, so the four CMS-managed pages carry no regression risk from it.

   Everything here is built from the tokens already in style.css. No new colours,
   no new typefaces, no radii, no shadows — the calculator is a section of the
   Property Monograph, not a widget dropped onto it. The two ideas doing the
   visual work are the ones the rest of the site uses: hairlines instead of
   boxes, and type at scale instead of chrome.
   ========================================================================== */

.calc {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.6rem);
  align-items: start;
}
.calc-inputs { grid-column: 1 / 7; }
.calc-out    { grid-column: 7 / 13; }

/* The number stays put while she types. This is the whole point of the layout:
   change a figure on the left, watch the payment move on the right. */
@media (min-width: 981px) {
  .calc-out { position: sticky; top: clamp(6rem, 12vh, 8rem); }
}

/* ---------- the input ledger ------------------------------------------- */
/* Rows on hairlines, matching .dl and .lines elsewhere on the site. */

.led { border-top: 1px solid var(--line); }
.led-row {
  display: grid;
  grid-template-columns: 1fr minmax(7.5rem, 8.5rem);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(.95rem, 1.8vw, 1.35rem) 0;
  border-bottom: 1px solid var(--line);
  transition: border-color .5s var(--ease);
}
.led-row:focus-within { border-bottom-color: var(--gold); }

.led-row label {
  font-family: var(--body);
  font-size: var(--t-0);
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.35;
}
.led-row .hint {
  display: block;
  font-size: .74rem;
  color: var(--ink-mute);
  margin-top: .25rem;
  line-height: 1.5;
  max-width: 34ch;
}
.led-row .opt {
  font-family: var(--label);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-left: .55rem;
  vertical-align: .18em;
}

/* Input sits on its own hairline and is right-aligned so the numbers form a
   column you can read down, the way a settlement statement does. */
.led-in { position: relative; display: flex; align-items: baseline; justify-content: flex-end; }
.led-in .pre,
.led-in .suf {
  font-family: var(--label);
  font-size: .8rem;
  color: var(--ink-mute);
  flex: none;
}
.led-in .pre { margin-right: .15rem; }
.led-in .suf { margin-left: .2rem; }

.led-in input {
  width: 100%;
  min-width: 0;
  padding: .1rem 0 .35rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-family: var(--body);
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  text-align: right;
  transition: border-color .5s var(--ease);
  -moz-appearance: textfield;
}
.led-in input::-webkit-outer-spin-button,
.led-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.led-in input:hover { border-bottom-color: var(--ink-mute); }
.led-in input:focus { outline: none; border-bottom-color: var(--gold); }
.led-in input::placeholder { color: var(--ink-mute); opacity: .55; }
.led-in input[aria-invalid="true"] { border-bottom-color: var(--gold-deep); }

.calc-reset {
  margin-top: 1.6rem;
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: none;
  border: 0;
  padding: .4rem 0;
  cursor: pointer;
  position: relative;
  transition: color .45s var(--ease);
}
.calc-reset::after {
  content: ""; position: absolute; left: 0; bottom: .1rem; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .calc-reset:hover { color: var(--navy); }
  .calc-reset:hover::after { transform: scaleX(1); transform-origin: left; }
}
.calc-reset:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; color: var(--navy); }

/* ---------- the result panel -------------------------------------------- */

.calc-panel {
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(2rem, 4vw, 3.2rem) clamp(1.6rem, 3.2vw, 2.8rem) clamp(1.8rem, 3.2vw, 2.6rem);
  position: relative;
  overflow: hidden;
}
/* Bleeds off the right edge of the grid, like the hero figures do. */
@media (min-width: 981px) {
  .calc-panel { margin-right: calc(-1 * var(--gutter)); padding-right: clamp(2.4rem, 5vw, 4rem); }
}

.calc-panel .over { color: var(--on-navy-mute); }
.calc-panel .over .idx { color: var(--gold-light); }

.calc-fig {
  font-family: var(--display);
  font-size: var(--t-5);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--cream-warm);
  font-variant-numeric: tabular-nums lining-nums;
  margin: .5rem 0 .1rem;
  display: block;
  word-break: keep-all;
}
.calc-fig .cur { font-size: .44em; vertical-align: .52em; color: var(--gold); margin-right: .06em; letter-spacing: 0; }
.calc-per {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-navy-mute);
}

/* THE SIGNATURE — one hairline rule that re-weights itself.
   Not a pie chart, not a stacked bar with rounded corners: the same 1px rule
   used everywhere else on this site, split into segments whose widths ARE the
   proportions of her payment. It moves as she types. */
.calc-rule {
  display: flex;
  height: 4px;
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0;
  background: var(--line-navy);
  overflow: hidden;
}
.calc-rule span {
  display: block;
  height: 100%;
  width: 0;
  transition: width .55s var(--ease), background-color .35s var(--ease);
}
/* Distinct TONES, not opacity steps of one colour. At 4px tall, five shades of
   the same gold are indistinguishable — the segmentation has to be legible at a
   glance or the rule is just a gold line pretending to be information. Each
   tone is mirrored exactly by its tick in the ledger below, which is what makes
   the two read as one object. */
.calc-rule [data-seg="pi"]        { background: var(--gold); }
.calc-rule [data-seg="taxes"]     { background: var(--cream-warm); }
.calc-rule [data-seg="insurance"] { background: var(--on-navy-mute); }
.calc-rule [data-seg="pmi"]       { background: var(--gold-deep); }
.calc-rule [data-seg="hoa"]       { background: rgba(241,234,220,.34); }
.calc-rule span.lit { background: var(--gold-light); }

/* The breakdown ledger, keyed to the rule above it. */
.calc-break { border-top: 0; margin-top: .2rem; }
.calc-break .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line-navy);
  transition: color .4s var(--ease);
}
.calc-break .row:last-child { border-bottom: 0; }
.calc-break .row[hidden] { display: none; }
.calc-break .k {
  font-family: var(--label); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--on-navy-mute);
  display: flex; align-items: center; gap: .6rem;
  transition: color .4s var(--ease);
}
/* The tick carries its segment's exact tone from the rule above — that colour
   match IS the legend, so the breakdown needs no key of its own. */
.calc-break .k::before {
  content: ""; width: 14px; height: 3px; flex: none;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.calc-break [data-part="pi"]        .k::before { background: var(--gold); }
.calc-break [data-part="taxes"]     .k::before { background: var(--cream-warm); }
.calc-break [data-part="insurance"] .k::before { background: var(--on-navy-mute); }
.calc-break [data-part="pmi"]       .k::before { background: var(--gold-deep); }
.calc-break [data-part="hoa"]       .k::before { background: rgba(241,234,220,.34); }
.calc-break .v {
  font-family: var(--body); font-size: var(--t-0);
  font-variant-numeric: tabular-nums; color: var(--cream-warm);
}
@media (hover: hover) {
  .calc-break .row:hover .k { color: var(--gold-light); }
  .calc-break .row:hover .k::before { transform: scaleX(1.5); transform-origin: left; }
}

.calc-loan {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line-navy);
  font-family: var(--label); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-navy-mute);
}
.calc-loan b {
  font-family: var(--body); font-weight: 500; font-size: var(--t--1);
  letter-spacing: 0; text-transform: none; color: var(--cream-warm);
  font-variant-numeric: tabular-nums;
}

/* Shown instead of the figure until there is enough to compute one. */
.calc-empty {
  font-family: var(--body); font-size: var(--t--1); line-height: 1.6;
  color: var(--on-navy-mute); max-width: 34ch; margin-top: .9rem;
}
.calc-panel[data-state="ready"] .calc-empty { display: none; }
.calc-panel[data-state="empty"] .calc-rule,
.calc-panel[data-state="empty"] .calc-break,
.calc-panel[data-state="empty"] .calc-loan { display: none; }
.calc-panel[data-state="empty"] .calc-fig { color: var(--on-navy-mute); opacity: .38; }

.calc-note { margin-top: clamp(1.6rem, 3vw, 2.2rem); }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 980px) {
  .calc-inputs, .calc-out { grid-column: 1 / 13; }
  .calc-panel { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
}
@media (max-width: 520px) {
  .led-row { grid-template-columns: 1fr; gap: .5rem; }
  .led-in { justify-content: flex-start; }
  .led-in input { text-align: left; }
  .calc-fig { font-size: var(--t-4); }
}

@media (prefers-reduced-motion: reduce) {
  .calc-rule span { transition: none; }
}