/* The debt page's own drawings: the four-field debt row, the budget summary, the two method cards,
   the principal-and-interest bars, the race chart, the payoff milestones and the tables.

   Everything else — the navy hero, the accent boxes, the buttons, the disclosures — comes from
   results.css and styles.css. Scoped to .debt-page, the body class this page opts into.

   Colour carries one meaning across every drawing: the snowball is the site's orange, the
   avalanche is the site's ink. The chart and the legend also differ by line style, and every bar
   has its figures written beside it, so nothing here is told by colour alone. */

/* ---------------------------------------------------------------- The debt rows */

/* A debt is a name, then three figures and the ✕. The name takes a line of its own at every
   width: "Interest rate (% p.a.)" is a long label and a fifth of a phone is not enough for it. */
.debt-page .debt-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 1.1fr) 38px; }
.debt-page .debt-row .field-name { grid-column: 1 / -1; }
.debt-page .debt-row .field-balance { grid-column: 1; }
.debt-page .debt-row .field-rate { grid-column: 2; }
.debt-page .debt-row .field-min { grid-column: 3; }
.debt-page .debt-row .remove { grid-column: 4; }
.debt-page .debt-row .field input { font-variant-numeric: tabular-nums; }
.debt-page .example-note { margin-bottom: 10px; }

/* ---------------------------------------------------------------- The budget */

.debt-page .budget-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.debt-page .budget-row .field { margin-bottom: 0; }
.debt-page .budget-row select { width: 100%; }

/* Minimums + extra = budget, on one tinted line. The three parts are named, so the sentence is
   still readable when it wraps into three on a phone. */
.debt-page .pay-summary {
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 14px 0 8px;
  overflow-wrap: anywhere;
}
.debt-page .pay-summary b { font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.debt-page .panel h2.spaced { margin-top: 26px; }

/* ---------------------------------------------------------------- Two routes */

.debt-page .hero-budget { font-size: 0.83rem; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }
.debt-page .method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.debt-page .method-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--highlight);
  border-radius: 12px;
  padding: 14px;
  background: var(--card);
  min-width: 0;
}
.debt-page .method-card h4 {
  font-size: 0.92rem;
  margin: 0 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 7px;
}
.debt-page .method-card .method-sub { font-size: 0.74rem; font-weight: 500; color: var(--muted); }
.debt-page #card-aval { border-top-color: var(--primary); }
.debt-page .method-mark { font-size: 0.95rem; line-height: 1; }

.debt-page .method-facts { margin: 8px 0 0; display: grid; gap: 0; }
.debt-page .method-facts > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--border);
}
.debt-page .method-facts dt { font-size: 0.76rem; color: var(--muted); }
.debt-page .method-facts dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Principal and interest */

.debt-page .split-bars { display: grid; gap: 14px; margin-top: 6px; }
.debt-page .split-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
}
.debt-page .split-name { font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.debt-page .split-track {
  display: flex;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--border);
}
.debt-page .split-fill { display: block; height: 100%; transition: width 200ms ease; }
.debt-page .split-fill.is-principal { background: var(--primary); }
.debt-page .split-fill.is-interest { background: var(--highlight); }
.debt-page .split-text {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.debt-page .bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.debt-page .bar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.debt-page .bar-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.debt-page .key-principal { background: var(--primary); }
.debt-page .key-interest { background: var(--highlight); }


/* ---------------------------------------------------------------- The race chart */

.debt-page .debt-chart { margin: 4px 0 0; }
.debt-page #race-chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;   /* a horizontal drag looks at a month, a vertical one still scrolls */
}
.debt-page .chart-axis { stroke: var(--border); stroke-width: 1; }
.debt-page .chart-grid { stroke: var(--border); stroke-width: 1; }
.debt-page .chart-tick { fill: var(--muted); font-size: 11px; }
.debt-page .chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.debt-page .chart-snow { stroke: var(--highlight); }
.debt-page .chart-aval { stroke: var(--primary); stroke-dasharray: 7 5; }
.debt-page .chart-marker line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.debt-page .chart-dot { stroke: var(--card); stroke-width: 1.5; }
.debt-page .chart-dot-snow { fill: var(--highlight); }
.debt-page .chart-dot-aval { fill: var(--primary); }
.debt-page .chart-caption { font-size: 0.84rem; line-height: 1.55; color: var(--muted); margin: 8px 0 0; }
.debt-page .chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 0.78rem;
  color: var(--muted);
  margin: 10px 0 0;
}
.debt-page .chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.debt-page .chart-legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.debt-page .key-snow { background: var(--highlight); }
.debt-page .key-aval { background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 10px); }

/* The month readout: the same numbers the chart draws, in words. The slider is the keyboard route
   through the series, and the line under it is what a tooltip would have said. */
.debt-page .chart-month-wrap { display: grid; gap: 4px; margin-top: 12px; }
.debt-page .chart-month-wrap label { font-size: 0.78rem; font-weight: 600; }
.debt-page input[type="range"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  accent-color: var(--highlight);
  cursor: pointer;
}
.debt-page input[type="range"]:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 5px;
}
.debt-page #chart-month-out {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.debt-page .chart-data summary,
.debt-page .schedule summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 6px 0;
}
.debt-page .chart-data { margin-top: 12px; }
.debt-page .chart-data table { margin-top: 6px; }


/* ---------------------------------------------------------------- The tables */

.debt-page .table-scroll { overflow-x: auto; margin: 4px 0 10px; }
.debt-page table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.debt-page thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  text-align: right;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.debt-page thead th:first-child { text-align: left; }
.debt-page tbody th { text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.debt-page tbody td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.debt-page .schedule h4 { font-size: 0.85rem; margin: 14px 0 6px; }

/* ---------------------------------------------------------------- Payoffs */

/* The two payoff lists, one under the other. The results panel is only the right-hand column of the
   page, so side-by-side tracks left roughly 240px each and squeezed the names; stacked, every row
   has the panel's full width and the order, account and month stay on one line.
   The names are this page's own (payoff-*). The site already has a .milestone strip in styles.css —
   a four-across row of centred cards — and reusing that name here is what turned this list into a
   column of slivers, so this component deliberately shares nothing with it. */
.debt-page .payoff-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.debt-page .payoff-track {
  min-width: 0;
  background: var(--accent);
  border-radius: 12px;
  padding: 12px 14px 6px;
}
.debt-page .payoff-track h4 {
  font-size: 0.8rem;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.debt-page .payoff-list { list-style: none; margin: 0; padding: 0; }
/* A row: the order, the account, the month. Flex rather than a grid, and allowed to wrap, so a long
   name pushes the month onto a second line instead of squeezing the name into a column of letters. */
.debt-page .payoff-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.debt-page .payoff-item:first-child { border-top: 0; padding-top: 6px; }
.debt-page .payoff-count {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--primary);
}
.debt-page .payoff-body { flex: 1 1 160px; min-width: 0; }
/* break-word, not anywhere: "anywhere" also shrinks the column's minimum width to a single
   character, which is the other half of how a row ends up reading top-to-bottom. */
.debt-page .payoff-body strong { display: block; font-size: 0.84rem; line-height: 1.35; overflow-wrap: break-word; }
.debt-page .payoff-detail { display: block; font-size: 0.73rem; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.debt-page .payoff-month {
  flex: none;
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.debt-page .payoff-none { font-size: 0.82rem; line-height: 1.5; color: var(--muted); padding: 6px 0; }

/* ---------------------------------------------------------------- Paying a little more */

.debt-page .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.debt-page .preset-row .chip { min-height: 36px; }
.debt-page .explorer-answer { font-size: 0.88rem; line-height: 1.55; font-weight: 600; margin: 12px 0 0; }
.debt-page .explorer-answer:empty { display: none; }
.debt-page #explorer-feedback { margin-top: 8px; }
.debt-page #explorer-feedback:empty { display: none; }
.debt-page .estimate-note { font-size: 0.8rem; line-height: 1.55; }
.debt-page .schedule { margin-top: 18px; }

/* ---------------------------------------------------------------- The prose sections */

.debt-page .fact-list { display: grid; gap: 12px; }
.debt-page .fact { background: var(--accent); border-radius: 12px; padding: 14px 16px; }
.debt-page .fact h3 { font-size: 0.95rem; margin: 0 0 6px; }
.debt-page .fact p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.debt-page .how-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.6; }
/* .calc-info gives list items a 6px bottom margin of their own; the grid already spaces them. */
.debt-page .how-list li { margin-bottom: 0; }
.debt-page .formula-wrap { display: grid; gap: 8px; margin: 12px 0; }
.debt-page .formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  background: var(--accent);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 700px) {
  .debt-page .method-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .debt-page .budget-row { grid-template-columns: minmax(0, 1fr); }
  .debt-page .debt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 38px; }
  .debt-page .debt-row .field-name { grid-column: 1 / -1; grid-row: 1; }
  .debt-page .debt-row .field-balance { grid-column: 1; grid-row: 2; }
  .debt-page .debt-row .field-rate { grid-column: 2; grid-row: 2; }
  .debt-page .debt-row .field-min { grid-column: 1 / 3; grid-row: 3; }
  .debt-page .debt-row .remove { grid-column: 3; grid-row: 3; }
  .debt-page .split-row { grid-template-columns: minmax(0, 1fr); }
  .debt-page .split-name { font-size: 0.78rem; }
}

@media (max-width: 380px) {
  .debt-page .method-facts > div { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .debt-page .split-fill { transition: none; }
}