/* Franklin Direct — move-up calculator
   The waterfall is the point of this page: start at the number that scares
   people, subtract what they stop paying, land on the truth. Everything else
   here is deliberately quiet so the descent is the thing you look at.
   Colours are brand.css tokens; the dark-panel values match .result. */

/* ---------- the waterfall ---------- */
.wf { position: relative; z-index: 1; margin: 26px 0 0; }
.wf-row { margin-bottom: 15px; }
.wf-row:last-child { margin-bottom: 0; }

.wf-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px;
}
.wf-label span { font-size: .85rem; color: #9FC0DC; }
.wf-label b {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: #fff;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.wf-track { height: 16px; border-radius: 8px; background: rgba(255,255,255,.08); overflow: hidden; }
.wf-fill { height: 100%; border-radius: 8px; transition: width .45s cubic-bezier(.22,.68,.36,1); }
.wf-bad     { background: linear-gradient(90deg,#B4715F,#8A5040); }
.wf-good    { background: linear-gradient(90deg,#63B0EC,#3F8FD4); }
.wf-neutral { background: linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.18)); }

.wf-note { margin: 7px 0 0; font-size: .78rem; line-height: 1.5; color: #7FA3C4; }

/* Subtotals: the three moments where the number means something. */
.wf-total {
  margin-top: 20px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.16);
}
.wf-total .wf-label span {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: #C8DDF0;
}
.wf-total .wf-label b { font-size: 1.32rem; letter-spacing: -.02em; }
.wf-total .wf-track { height: 20px; }
.wf-total .wf-note { color: #93B6D4; }

/* ---------- the standalone result panel ----------
   The waterfall lives full-width at the end of the questions rather than
   beside step one, so its bars would otherwise stretch past 950px and the
   label and figure would sit too far apart to read as a pair. Holding the
   content to a comfortable measure keeps the descent scannable. */
.result-final { padding: 42px 34px 36px; }
.result-final > *:not(.peaks) { max-width: 780px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .result-final { padding: 30px 22px 26px; } }

/* ---------- plain-language read on the result ---------- */
.verdict {
  position: relative; z-index: 1; margin: 24px 0 0; padding: 17px 19px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  border-left: 3px solid var(--sky-2); border-radius: 13px;
  font-size: .92rem; line-height: 1.62; color: #D6E7F6;
}
.verdict b { color: #fff; font-weight: 700; }

/* ---------- agent tools under the result ---------- */
.agent-row { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-copy {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .88rem;
  padding: 12px 18px; border-radius: 11px; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26);
  transition: background .18s, transform .18s;
}
.btn-copy:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }

/* ---------- debt rows ----------
   brand.css sizes .cardrow-grid for the blended-rate calculator, which has
   three fields per row (balance, rate, minimum). This page has two, so they
   were landing in mismatched tracks with a dead third column on the right.
   Even columns fix the width; pinning the inputs to the bottom keeps them in
   line when a label wraps to two lines at narrow widths. */
#debts .cardrow-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
#debts .cardrow-grid label { display: flex; flex-direction: column; }
#debts .cardrow-grid input { margin-top: auto; }
#debts .cardrow-grid label:last-child { grid-column: auto; }
@media (max-width: 380px) {
  #debts .cardrow-grid { grid-template-columns: 1fr; }
}

/* ---------- Prop 19 opt-in ---------- */
.toggle {
  display: flex; align-items: flex-start; gap: 13px; cursor: pointer;
  padding: 15px 16px; border-radius: 14px;
  background: var(--tint-2); border: 1px solid #DCE9F4;
}
.toggle input { margin: 2px 0 0; width: 19px; height: 19px; flex: none; accent-color: var(--franklin); cursor: pointer; }
.toggle-txt b {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: .93rem; color: var(--ink); margin-bottom: 3px;
}
.toggle-txt span { display: block; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* Revealed only when the box is checked. */
.reveal { display: none; }
.reveal.show { display: block; animation: reveal .28s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- running totals carried between steps ---------- */
.tally {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 18px 0 0;
}
.tally div {
  background: var(--white); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px;
}
.tally span {
  display: block; font-size: .73rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--muted-2); margin-bottom: 5px;
}
.tally b {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.24rem;
  color: var(--franklin-deep); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* ---------- small helper button next to the down payment ---------- */
.linkbtn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .78rem;
  color: var(--franklin); border-bottom: 1px solid var(--tint);
}
.linkbtn:hover { border-color: var(--franklin); }

@media (max-width: 560px) {
  .wf-label { gap: 8px; }
  .wf-label span { font-size: .8rem; }
  .wf-total .wf-label b { font-size: 1.15rem; }
  .agent-row .btn-copy, .agent-row .cta { width: 100%; justify-content: center; }
}