/* Page-specific styles for mortgage-calculator-app.html.
   Shared layout, colours and components live in brand-shared.css (the
   whole site) and calculator-shared.css (every calculator) — this file
   only holds what's unique to this calculator. The page uses the shared
   single-column layout (.layout-single). */

  /* ---------- mortgage-calculator (scoped) ---------- */

  /* Colours only this calculator uses: equity (green) and debt (orange). */
  .calc-shell {
    --equity: #0b6b4f;
    --equity-soft: #e6f4ee;
    --debt: #c0562f;
    --debt-soft: #fbeee7;
  }
  @media (prefers-color-scheme: dark) {
    .calc-shell {
      --equity: #2dd4a0;
      --equity-soft: #123227;
      --debt: #f0906a;
      --debt-soft: #2f1d15;
    }
  }

  /* Equity spotlight */
  .calc-shell .equity-card {
    background: linear-gradient(160deg, var(--equity-soft), var(--surface));
    border-color: color-mix(in srgb, var(--equity) 30%, var(--line));
  }
  .calc-shell .equity-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .calc-shell .equity-figure { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; color: var(--equity); letter-spacing: -0.02em; }
  .calc-shell .equity-pct {
    font-size: 0.85rem; font-weight: 700; color: var(--equity);
    background: color-mix(in srgb, var(--equity) 16%, transparent);
    padding: 4px 10px; border-radius: 999px;
  }
  .calc-shell .bar {
    background: var(--debt-soft);
  }
  /* Default split before calc() runs on load (it runs immediately, then
     JS takes over via el.style.width on every recalculation). */
  .calc-shell .bar .seg-equity { width: 20%; background: linear-gradient(180deg, var(--brand-2), var(--equity)); }
  .calc-shell .bar .seg-debt { width: 80%; background: repeating-linear-gradient(45deg, var(--debt), var(--debt) 8px, color-mix(in srgb, var(--debt) 78%, #000) 8px, color-mix(in srgb, var(--debt) 78%, #000) 16px); }
  .calc-shell .dot.eq { background: var(--equity); }
  .calc-shell .dot.dt { background: var(--debt); }
  .calc-shell table.proj td.eq { color: var(--equity); font-weight: 700; }

  /* ---------- overpayment impact ---------- */
  .calc-shell .overpay-card {
    background: linear-gradient(160deg, var(--equity-soft), var(--surface));
    border-color: color-mix(in srgb, var(--equity) 30%, var(--line));
  }
  .calc-shell .overpay-card .v.saved { color: var(--equity); }
  .calc-shell .op-warn {
    color: var(--debt);
    font-weight: 500;
  }