/* HouseHackers — calculator page */

.calc-head { padding: 56px var(--page-x) 24px; }
.calc-head h1 {
  font: 400 48px/1.1 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.calc-head .kicker { margin-bottom: 14px; }
.calc-head p { font: 400 16.5px/1.6 var(--sans); color: var(--muted); margin: 14px 0 0; max-width: 62ch; }

/* control strip */
.calc-controls {
  display: flex; gap: 44px; flex-wrap: wrap;
  padding: 20px var(--page-x) 36px; align-items: flex-start;
}
.calc-controls .mi-note { font: 400 12.5px/1.4 var(--sans); color: var(--faint); margin-top: 8px; }

/* Two independent columns so each stacks to its own height — no forced row
   alignment, no dead vertical space. Left: inputs + itemized math. Right:
   the headline result, equity, and save. */
.calc {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  padding: 0 var(--page-x) 72px;
}
.calc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.calc-col { min-width: 0; }
.calc-col--a { flex: 1 1 0; }
.calc-col--b { flex: 0 1 480px; }

.calc .card__title { font: 400 21px/1 var(--serif); color: var(--ink); margin-bottom: 20px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; min-width: 0; }
/* grid/flex children must be allowed to shrink, or the controls overflow the
   card in the mid-width two-column range */
.field { min-width: 0; }
.control { min-width: 0; }
.calc-fine { font: 400 12.5px/1.6 var(--sans); color: var(--faint); padding: 0 6px; }

/* result summary panel */
.summary-panel {
  background: var(--cream-25);
  border: 1px solid var(--line-12);
  border-radius: var(--r-panel);
  padding: 32px;
  box-shadow: var(--shadow-panel);
}
.summary-panel__label {
  font: 600 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.summary-panel__cost {
  font: 400 74px/1 var(--serif); color: var(--ink); margin: 14px 0 6px;
  font-variant-numeric: tabular-nums;
}
.summary-panel__cost small { font-size: 26px; color: var(--faint); }
.summary-panel__cap { font: 500 14.5px/1.3 var(--sans); color: var(--forest); min-height: 1.3em; }

.score-block { text-align: center; margin-top: 16px; }
.badge-paid {
  display: inline-block;
  font: 600 10.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--terracotta); padding: 4px 12px; border-radius: 20px; margin-bottom: 8px;
}
.score-label { font: italic 400 20px/1.2 var(--serif); color: var(--ink); }
.score-sub { font: 400 13px/1.3 var(--sans); color: var(--faint); margin-top: 4px; }
.score-warn { font: 500 12.5px/1.3 var(--sans); color: var(--danger); margin-top: 8px; }

.stat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  border-top: 1px solid var(--line-12); margin-top: 24px; padding-top: 22px;
}
.stat__k { font: 600 10.5px/1.2 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.stat__v { font: 600 20px/1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.stat__v.pos { color: var(--forest); }
.stat__v.neg { color: var(--danger); }

/* line-by-line math */
.math-list { display: flex; flex-direction: column; gap: 9px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.math-list .li { display: flex; justify-content: space-between; }
.math-list .li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.math-list .li b.pos { color: var(--forest); }
.math-list .li--total { border-top: 1px solid var(--line-12); padding-top: 9px; }
.math-list .li--total span { color: var(--ink); font-weight: 600; }

/* equity chart + bars */
.eq-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.eq-head .v { font: 600 16px/1 var(--sans); color: var(--forest); font-variant-numeric: tabular-nums; }
.eq-note { font: 400 12.5px/1.4 var(--sans); color: var(--faint); margin-bottom: 14px; }
.eq-chart { width: 100%; display: block; }
.eq-axis { display: flex; justify-content: space-between; font: 400 11.5px/1 var(--sans); color: var(--faint); margin-top: 6px; }

.vs-block { border-top: 1px solid var(--line-12); margin-top: 22px; padding-top: 20px; }
.vs-bars { display: flex; flex-direction: column; gap: 12px; }
.vs-bar__top { display: flex; justify-content: space-between; font: 400 13px/1.2 var(--sans); color: var(--muted); margin-bottom: 5px; }
.vs-bar__top b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.vs-bar__track { background: rgba(42, 36, 26, .07); border-radius: 5px; }
.vs-bar__fill { height: 24px; border-radius: 5px; transition: width .35s ease; }

/* keep-these-numbers (forest email card) */
.keep {
  background: var(--forest);
  border-radius: var(--r-panel);
  padding: 28px;
}
.keep__h { font: 400 21px/1 var(--serif); color: var(--cream-50); }
.keep__p { font: 400 14px/1.6 var(--sans); color: var(--on-forest-70); margin: 8px 0 18px; }
.keep__form { display: flex; gap: 10px; }
.keep__input {
  flex: 1; min-width: 0;
  border: 1px solid rgba(247, 242, 231, .3);
  background: rgba(247, 242, 231, .08);
  border-radius: var(--r-btn);
  outline: none;
  font: 500 15px/1 var(--sans); color: var(--cream-50);
  padding: 0 16px; height: 50px;
}
.keep__input::placeholder { color: rgba(247, 242, 231, .5); }
.keep__input:focus { border-color: rgba(247, 242, 231, .6); }
.keep__send {
  border: none; cursor: pointer; background: var(--cream-50); color: var(--forest);
  font: 600 14.5px/1 var(--sans); border-radius: var(--r-btn); padding: 0 22px; white-space: nowrap;
}
.keep__send:hover { background: var(--cream-100); }
.keep__err { font: 500 12.5px/1.3 var(--sans); color: #E8B98A; margin-top: 9px; }
.keep__sent {
  display: flex; align-items: center; gap: 10px;
  background: rgba(247, 242, 231, .1); border: 1px solid rgba(247, 242, 231, .25);
  border-radius: var(--r-btn); padding: 15px 18px;
}
.keep__sent .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sand-warm); flex: none; }
.keep__sent span { font: 500 14.5px/1.3 var(--sans); color: var(--cream-50); }
.keep__copy {
  width: 100%; margin-top: 12px;
  border: 1px solid rgba(247, 242, 231, .28); cursor: pointer; background: transparent;
  color: var(--cream-50); font: 600 13.5px/1 var(--sans); border-radius: var(--r-btn); height: 44px;
}
.keep__copy:hover { background: rgba(247, 242, 231, .08); }
.keep__fine { font: 400 11.5px/1.4 var(--sans); color: var(--on-forest-50); margin-top: 14px; }

.is-hidden { display: none !important; }

/* — Responsive — */
@media (max-width: 1080px) {
  /* collapse to a single flow; dissolve the column boxes so their panels
     become direct flex items we can reorder — result first, then inputs,
     the math, equity, save, and finally the disclaimer */
  .calc { flex-direction: column; align-items: stretch; gap: 20px; }
  .calc-col { display: contents; }
  .calc-col--b .summary-panel { order: 0; }
  .calc-col--a .card:nth-child(1) { order: 10; } /* home */
  .calc-col--a .card:nth-child(2) { order: 11; } /* loan */
  .calc-col--a .card:nth-child(3) { order: 12; } /* rental */
  .calc-col--a .card:nth-child(4) { order: 20; } /* math */
  .calc-col--b .card { order: 30; }              /* equity */
  .calc-col--b .keep { order: 40; }
  .calc-col--a .calc-fine { order: 50; }
  .calc-head h1 { font-size: 40px; }
}

@media (max-width: 640px) {
  .calc-head { padding: 32px var(--page-x) 8px; }
  .calc-head h1 { font-size: 34px; }
  .calc-controls { flex-direction: column; gap: 18px; padding: 12px var(--page-x) 20px; }
  .summary-panel { padding: 24px; }
  .summary-panel__cost { font-size: 52px; }
  .summary-panel__cost small { font-size: 21px; }
  .card { padding: 22px; }
  .keep__form { flex-direction: column; }
  .keep__send { height: 48px; padding: 0; }
}

/* Phones: stack the paired inputs so each field is full-width and easy to tap,
   and let the segmented controls fill the row. */
@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .calc-controls .seg { width: 100%; }
  .calc-controls .seg button { flex: 1 1 auto; text-align: center; }
}