/* Shared calculator styles.
 *
 * Moved verbatim out of calculator.html's inline <style> so every calculator
 * page uses one definition instead of its own copy. Previously these 70
 * selectors existed only inside that one file and styles.css had none of
 * them, so a second calculator would have meant a second copy, and the two
 * would have drifted.
 *
 * Moved whole rather than split into shared vs loan-specific: one media query
 * mixes both, and a mis-partition silently breaks a page. The amortization
 * schedule rules (.calc-sch-*, .calc-legend-*) are unused on calculators that
 * have no schedule — about 2KB that costs nothing and can't break anything.
 */
/* ── Hero ──────────────────────────────────────────────────── */
    .calc-hero {
      padding: 120px 0 48px;
      border-bottom: 1px solid var(--border);
    }
    .calc-hero h1 {
      font-size: 40px;
      font-weight: 300;
      margin-bottom: 10px;
    }
    .calc-hero-sub {
      font-size: 15px;
      color: var(--muted);
      line-height: 1.6;
      max-width: 560px;
    }

    /* ── Body ──────────────────────────────────────────────────── */
    .calc-body {
      padding: 48px 0 80px;
    }
    .calc-body .container {
      max-width: 780px;
    }

    /* ── Panel ─────────────────────────────────────────────────── */
    .calc-panel {
      background: var(--surface);
      border: 1px solid var(--accent);
      border-radius: 16px;
      padding: 24px 26px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.07);
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    /* ── Type selector ────────────────────────────────────────── */
    .calc-type-select {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 10px;
      font-size: 14px;
      font-family: var(--font-body);
      color: var(--text);
      cursor: pointer;
      width: 100%;
      max-width: 280px;
    }
    .calc-type-select:focus { outline: none; border-color: var(--accent); }

    /* ── Inputs ────────────────────────────────────────────────── */
    .calc-inputs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .calc-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .calc-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .calc-input {
      width: 100%;
      padding: 8px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      outline: none;
      box-sizing: border-box;
      -moz-appearance: textfield;
    }
    .calc-input::-webkit-inner-spin-button,
    .calc-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    .calc-input:focus { border-color: var(--accent); }
    .calc-input::placeholder { color: var(--muted); font-weight: 400; }

    .amount-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .amount-prefix {
      position: absolute;
      left: 12px;
      font-size: 14px;
      color: var(--muted);
      pointer-events: none;
    }
    .amount-suffix {
      position: absolute;
      right: 12px;
      font-size: 14px;
      color: var(--muted);
      pointer-events: none;
    }
    .amount-input { padding-left: 26px; }
    .rate-input   { padding-right: 28px; }
    .calc-field-hint {
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    /* ── Advanced toggle ──────────────────────────────────────── */
    .calc-advanced-toggle {
      background: none;
      border: 1px dashed var(--border);
      border-radius: 10px;
      padding: 7px 14px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-body);
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      align-self: flex-start;
    }
    .calc-advanced-toggle:hover { color: var(--accent); border-color: var(--accent); }
    .calc-advanced-chevron {
      font-size: 10px;
      display: inline-block;
      transition: transform 0.2s;
    }
    .calc-advanced-chevron.open { transform: rotate(180deg); }
    .calc-advanced {
      border-top: 1px solid var(--border);
      padding-top: 16px;
    }
    .calc-advanced-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 14px;
    }

    /* ── Results ───────────────────────────────────────────────── */
    .calc-results {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .calc-stat {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 14px;
    }
    .calc-stat-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
    }
    .calc-stat-val {
      font-family: var(--font-display);
      font-size: 22px;
      line-height: 1;
      color: var(--text);
      margin-bottom: 3px;
    }
    .calc-stat-val--primary  { color: var(--accent); }
    .calc-stat-val--interest { color: var(--bad); }
    .calc-stat-sub {
      font-size: 11px;
      color: var(--muted);
    }

    /* ── Bar chart ─────────────────────────────────────────────── */
    .calc-bar-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .calc-bar {
      height: 10px;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      background: var(--border);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
    }
    .calc-bar-principal {
      background: var(--accent);
      background-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 100%);
      height: 100%;
      transition: width 0.4s cubic-bezier(.4,0,.2,1);
    }
    .calc-bar-interest {
      background: var(--bad);
      background-image: linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 100%);
      height: 100%;
      transition: width 0.4s cubic-bezier(.4,0,.2,1);
    }
    .calc-bar-legend {
      display: flex;
      gap: 20px;
      font-size: 12px;
      color: var(--muted);
    }
    .calc-legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .calc-legend-dot {
      width: 10px;
      height: 10px;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .calc-legend-dot--principal { background: var(--accent); }
    .calc-legend-dot--interest  { background: var(--bad); }

    /* ── Schedule toggle ──────────────────────────────────────── */
    .calc-schedule-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-body);
      color: var(--accent);
      cursor: pointer;
      align-self: flex-start;
    }
    .calc-schedule-toggle:hover { background: var(--accent-light); border-color: var(--accent); }
    .calc-schedule-chevron {
      font-size: 10px;
      display: inline-block;
      transition: transform 0.2s;
    }
    .calc-schedule-chevron.open { transform: rotate(180deg); }

    /* ── Schedule table ───────────────────────────────────────── */
    .calc-schedule {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }
    .calc-sch-row {
      display: grid;
      grid-template-columns: 36px 1fr 90px 80px 80px 90px;
      gap: 8px;
      align-items: center;
      padding: 8px 16px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
      color: var(--text);
    }
    .calc-sch-row:last-child { border-bottom: none; }
    .calc-sch-row--head {
      background: var(--surface2);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }
    .calc-sch-num      { color: var(--muted); font-size: 11px; }
    .calc-sch-date     { white-space: nowrap; }
    .calc-sch-payment  { font-weight: 600; }
    .calc-sch-interest { color: var(--muted); }
    .calc-sch-balance  { color: var(--muted); }
    .calc-sch-more {
      display: block;
      width: 100%;
      background: none;
      border: none;
      border-top: 1px solid var(--border);
      padding: 10px 16px;
      font-size: 12px;
      font-weight: 600;
      font-family: var(--font-body);
      color: var(--accent);
      cursor: pointer;
      text-align: left;
    }
    .calc-sch-more:hover { background: var(--surface2); }
    .calc-sch-more--collapse { color: var(--muted); }

    /* ── Empty / CTA ──────────────────────────────────────────── */
    .calc-empty {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      padding: 8px 0;
    }
    .calc-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 4px;
      border-top: 1px solid var(--border);
    }
    .calc-cta-text {
      font-size: 13px;
      color: var(--muted);
    }
    .calc-cta-btn {
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      font-family: var(--font-body);
      cursor: pointer;
      white-space: nowrap;
      text-decoration: none;
      display: inline-block;
    }
    .calc-cta-btn:hover { opacity: 0.85; }

    /* ── Disclaimer ────────────────────────────────────────────── */
    .calc-disclaimer {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.5;
      margin-top: 24px;
    }

    /* ── Responsive ────────────────────────────────────────────── */
    @media (max-width: 768px) {
      .calc-hero h1 { font-size: 30px; }
    }
    @media (max-width: 560px) {
      .calc-inputs { grid-template-columns: 1fr; }
      .calc-results { grid-template-columns: 1fr 1fr; }
      .calc-sch-row { grid-template-columns: 28px 1fr 70px 60px 60px 70px; gap: 4px; padding: 6px 10px; font-size: 11px; }
    }
    @media (max-width: 400px) {
      .calc-results { grid-template-columns: 1fr; }
    }

/* ── Shared additions for the budget / savings / debt calculators ──
 * Appended rather than interleaved so the loan calculator's original block
 * above stays byte-identical to what it shipped with. Tokens only — these
 * reuse the same --accent/--good/--warn/--bad set as the rest of the site.
 */

.calc-body--tail { padding-top: 0; }

/* Helper text under an input. */
.calc-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

/* A single full-width field where .calc-inputs would otherwise make columns. */
.calc-inputs--single { grid-template-columns: 1fr; }

/* Callout band. Tinted, with the status colour carrying the meaning and the
 * text staying dark enough to read — the tints are light so body copy keeps
 * its contrast. */
.calc-note {
  margin: 20px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, #f9f8f5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #1a1814);
}
.calc-note strong { font-weight: 600; }
.calc-note--good { border-color: #9fd0b8; background: #eef6f2; }
.calc-note--warn { border-color: #f0c98a; background: #fdf4e7; }
.calc-note--bad  { border-color: #f5b4ad; background: #fdf0ee; }

/* Two-up comparison (debt: avalanche vs snowball). */
.calc-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}
/* The recommended side gets a ring rather than a different colour, so the
 * figures stay comparable at a glance. */
.calc-stat--pick { box-shadow: inset 0 0 0 2px var(--accent); }

/* Proportional needs/wants/savings bar. */
.calc-split-bar {
  display: flex;
  height: 14px;
  margin: 22px 0 10px;
  border-radius: 7px;
  overflow: hidden;
  background: #e8e5de;
}
.calc-split-seg { display: block; height: 100%; }
.calc-split-seg--needs { background: #456fae; }
.calc-split-seg--wants { background: #c97b22; }
.calc-split-seg--save  { background: #2e9468; }
.calc-split-key {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
}
.calc-split-key span { display: inline-flex; align-items: center; gap: 6px; }
.calc-split-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.calc-split-dot--needs { background: #456fae; }
.calc-split-dot--wants { background: #c97b22; }
.calc-split-dot--save  { background: #2e9468; }

/* Result tables. Horizontally scrollable so a wide table never pushes the
 * page sideways on a phone. */
.calc-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.calc-table-wrap { margin-top: 24px; overflow-x: auto; }
.calc-tables .calc-table-wrap { margin-top: 0; }
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.calc-table caption {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
}
.calc-table th,
.calc-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.calc-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.calc-table .num { text-align: right; }
.calc-table tbody tr.total td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  background: #f9f8f5;
}

.calc-footnote {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* Debt rows: four aligned inputs per debt, collapsing to stacked on mobile
 * where the column headers are hidden. */
.calc-debt-head,
.calc-debt-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr 1fr;
  gap: 10px;
  align-items: center;
}
.calc-debt-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 2px 8px;
}
.calc-debt-list { display: flex; flex-direction: column; gap: 10px; }
.calc-debt-name { min-width: 0; }

/* Cross-links to the other calculators and to related articles. */
.calc-more { margin-top: 30px; }
.calc-more-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.calc-xlinks { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-xlink {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1a1814);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.calc-xlink:hover { border-color: var(--accent); background: #f9f8f5; }

@media (max-width: 640px) {
  .calc-compare { grid-template-columns: 1fr; }
  .calc-debt-head { display: none; }
  .calc-debt-row {
    grid-template-columns: 1fr 1fr;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .calc-debt-name { grid-column: 1 / -1; }
}

/* ── Calculators hub (/calculators) ──
 * The nav used to point straight at the loan calculator, so the other three
 * were reachable only by typing the URL. One nav link to this hub keeps the
 * nav markup (duplicated across every static page) from growing per tool.
 */
.calc-hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
.calc-hub-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: var(--text, #1a1814);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.calc-hub-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
  transform: translateY(-2px);
}
/* The question leads, because that is how people arrive — they have a
   question, not a preference about which tool to open. */
.calc-hub-q {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
}
.calc-hub-name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.calc-hub-desc { font-size: 13.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.calc-hub-go { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 4px; }