/* ============================================================
   ★ THE SHOWPIECE  ·  Affordability Engine → Neighborhood Atlas
   One continuous moment: a number becomes a place.
   Fully functional with zero motion and by keyboard alone.
   ============================================================ */

.engine {
  position: relative;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--color-surface-base), var(--color-surface-sunken) 55%, var(--color-surface-base));
  overflow: hidden;
}
.engine::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(56rem 32rem at 78% 18%, var(--color-brand-pink-wash), transparent 66%);
  pointer-events: none;
}
.engine__inner { position: relative; }

.engine__grid { display: grid; gap: var(--section-gap-sm); align-items: start; }
@media (min-width: 64rem) {
  .engine__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-24); }
}

/* --- CONTROLS ---------------------------------------------- */

.controls { padding: var(--space-8); display: grid; gap: var(--space-8); }
@media (min-width: 40rem) { .controls { padding: var(--space-12); } }

.field { display: grid; gap: var(--space-4); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
}

/* The primary control is deliberately oversized. It is the hero
   interaction of the entire page — it should feel physical. */
.field__readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  color: var(--color-ink-900);
  line-height: var(--leading-none);
}
.field__currency { font-size: var(--text-2xl); color: var(--color-ink-300); }
.field__amount { font-size: var(--text-5xl); letter-spacing: var(--tracking-tighter); }
.field__per { font-size: var(--text-base); font-family: var(--font-body); color: var(--color-ink-300); }

/* --- RANGE INPUT · custom, accessible, 44px target ---------- */

.range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.range:focus { outline: none; }
.range:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-full); }

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to right,
    var(--color-brand-pink) 0%,
    var(--color-brand-pink) var(--fill, 50%),
    var(--color-line-strong) var(--fill, 50%),
    var(--color-line-strong) 100%
  );
}
.range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-line-strong);
}
.range::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-brand-pink);
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: -0.625rem;
  border-radius: var(--radius-full);
  background: var(--color-ink-900);
  border: 3px solid var(--color-brand-pink);
  box-shadow: var(--shadow-glow);
  transition: transform var(--duration-fast) var(--ease-spring);
}
.range::-webkit-slider-thumb:active { transform: scale(1.18); }
.range::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-ink-900);
  border: 3px solid var(--color-brand-pink);
  box-shadow: var(--shadow-glow);
}

/* --- TERM TOGGLE ------------------------------------------- */

.term { display: grid; gap: var(--space-3); }
.term__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.term__option {
  position: relative;
  display: grid;
  gap: var(--space-1);
  min-height: 4.5rem;
  padding: var(--space-4);
  border: 1px solid var(--color-line-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-expo);
}
.term__option:has(input:checked) {
  border-color: var(--color-brand-pink);
  background: var(--color-brand-pink-wash);
}
.term__option:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.term__option input { position: absolute; opacity: 0; pointer-events: none; }

.term__name { font-weight: var(--weight-medium); color: var(--color-ink-900); }
.term__note { font-size: var(--text-xs); color: var(--color-ink-300); line-height: var(--leading-snug); }

/* --- RESULT ------------------------------------------------- */

.result { display: grid; gap: var(--space-8); }

.result__headline { padding: var(--space-8); text-align: center; }
@media (min-width: 40rem) { .result__headline { padding: var(--space-12); } }

.result__caption {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-ink-300);
  margin-bottom: var(--space-6);
}
.result__price {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-ink-900);
  display: block;
}
.result__payment {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-ink-500);
}
.result__payment strong { color: var(--color-brand-pink-glow); font-weight: var(--weight-medium); }

/* --- BREAKDOWN ---------------------------------------------- */

.breakdown { display: grid; gap: var(--space-3); }
.breakdown__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line-subtle);
  font-size: var(--text-base);
}
.breakdown__row:last-child { border-bottom: 0; }
.breakdown__label { color: var(--color-ink-500); }
.breakdown__value { color: var(--color-ink-900); font-variant-numeric: tabular-nums; }

/* The comparison is the honest moment — it shows the real cost of
   the 30-year, which is the entire point of the Ramsey rule. */
.compare {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-accent-warm-wash);
  border: 1px solid rgba(255, 158, 94, 0.24);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink-700);
}
.compare strong { color: var(--color-accent-warm); font-weight: var(--weight-medium); }

.assumptions {
  font-size: var(--text-sm);
  color: var(--color-ink-300);
  line-height: var(--leading-normal);
}
.assumptions summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-500);
  list-style: none;
}
.assumptions summary::-webkit-details-marker { display: none; }
.assumptions summary::before {
  content: '+';
  color: var(--color-brand-pink-glow);
  font-size: var(--text-lg);
}
.assumptions[open] summary::before { content: '−'; }
.assumptions__body { padding-top: var(--space-3); display: grid; gap: var(--space-2); }

/* ============================================================
   THE ATLAS  ·  the payoff — a number becomes a place
   ============================================================ */

.atlas { margin-top: var(--section-gap-md); }

.atlas__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.atlas__count { font-size: var(--text-sm); color: var(--color-ink-300); }

.atlas__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.place {
  position: relative;
  overflow: hidden;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 12rem;
  /* Cards animate in when they enter reach and out when they leave.
     The state change IS the payoff — it must feel physical. */
  transition:
    opacity var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo),
    border-color var(--duration-base) var(--ease-out-expo),
    filter var(--duration-slow) var(--ease-out-expo);
}

.place--reachable { border-color: rgba(224, 19, 132, 0.34); }
.place--reachable::after {
  content: '';
  position: absolute;
  inset-inline: 0; top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--color-brand-pink), transparent);
}

/* Out of reach stays visible and readable — never hidden. Honesty is
   the product here; a tool that flatters is worthless. */
.place--stretch { opacity: 0.42; filter: saturate(0.3); }

.place__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
}
.place__price {
  font-size: var(--text-sm);
  color: var(--color-brand-pink-glow);
  font-variant-numeric: tabular-nums;
}
.place--stretch .place__price { color: var(--color-ink-300); }
.place__fact { font-size: var(--text-sm); color: var(--color-ink-500); line-height: var(--leading-normal); }

.place__status {
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
  border-top: 1px solid var(--color-line-subtle);
}

/* --- The ask, calibrated to what they just did --------------- */

.engine__ask {
  margin-top: var(--section-gap-sm);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-6);
  text-align: center;
  justify-items: center;
}
@media (min-width: 40rem) { .engine__ask { padding: var(--space-12); } }

.engine__ask-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--color-ink-900);
  max-width: 24ch;
  text-wrap: balance;
}
.engine__ask-note { font-size: var(--text-sm); color: var(--color-ink-300); max-width: 46ch; }

.disclaimer {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border-left: 2px solid var(--color-line-strong);
  font-size: var(--text-sm);
  color: var(--color-ink-300);
  line-height: var(--leading-normal);
  max-width: 60ch;
}

/* --- Atlas map frame ---------------------------------------- */
.atlas__sub {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-ink-300);
  max-width: 46ch;
}
.atlas__map {
  position: relative;
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-line-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(36rem 20rem at 30% 40%, rgba(224, 19, 132, 0.07), transparent 70%),
    var(--color-surface-sunken);
  box-shadow: var(--edge-light);
}
.atlas__map canvas { display: block; width: 100%; height: clamp(20rem, 44vw, 30rem); }

.atlas__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-5);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-300);
}
.lg { display: inline-flex; align-items: center; gap: var(--space-2); }
.lg::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.lg--in::before   { background: var(--color-brand-pink-glow); box-shadow: 0 0 10px var(--color-brand-pink); }
.lg--out::before  { background: rgba(255, 255, 255, 0.22); }
.lg--base::before { border-radius: 0; border: 1px solid var(--color-focus); }
.lg--peak::before { border-radius: 0; background: var(--color-accent-warm); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.sigmark-wrap { margin-top: var(--space-6); }