/* =========================================================
   Loan Calculator – Stylesheet
   Aesthetic: Refined financial / editorial dark-on-cream
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ---------- Design tokens ---------- */
.lc-wrap {
    --lc-cream:   #f5f0e8;
    --lc-ink:     #1a1714;
    --lc-muted:   #7a736a;
    --lc-accent:  #b85c2a;       /* terracotta */
    --lc-accent2: #3d6b8f;       /* slate blue */
    --lc-card-bg: #ffffff;
    --lc-border:  #e0d9ce;
    --lc-radius:  12px;
    --lc-shadow:  0 4px 24px rgba(26,23,20,.09);
    --lc-font-head: 'DM Serif Display', Georgia, serif;
    --lc-font-body: 'DM Sans', system-ui, sans-serif;
    --lc-font-mono: 'DM Mono', 'Courier New', monospace;
}

/* ---------- Container ---------- */
.lc-wrap {
    font-family: var(--lc-font-body);
    color: var(--lc-ink);
    background: var(--lc-cream);
    border-radius: var(--lc-radius);
    padding: 32px;
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .lc-wrap {
        grid-template-columns: 1fr;
        padding: 20px;
    }
}

/* ---------- Cards ---------- */
.lc-card {
    background: var(--lc-card-bg);
    border-radius: var(--lc-radius);
    padding: 28px 24px;
    box-shadow: var(--lc-shadow);
    border: 1px solid var(--lc-border);
}

/* ---------- Heading ---------- */
.lc-heading {
    font-family: var(--lc-font-head);
    font-size: 1.65rem;
    font-weight: 400;
    margin: 0 0 24px 0;
    color: var(--lc-ink);
    letter-spacing: -.01em;
    line-height: 1.2;
}

/* ---------- Fields ---------- */
.lc-field {
    margin-bottom: 20px;
}
.lc-field:last-child { margin-bottom: 0; }

.lc-field label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lc-muted);
    margin-bottom: 8px;
}

.lc-input-row {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--lc-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--lc-cream);
    transition: border-color .2s;
}
.lc-input-row:focus-within {
    border-color: var(--lc-accent);
    box-shadow: 0 0 0 3px rgba(184,92,42,.12);
}

.lc-prefix, .lc-suffix {
    padding: 0 12px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--lc-muted);
    background: var(--lc-cream);
    flex-shrink: 0;
    line-height: 44px;
}

.lc-input-row input[type="number"] {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--lc-font-mono);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--lc-ink);
    padding: 10px 4px;
    outline: none;
    -moz-appearance: textfield;
    width: 0; /* allow flex to control width */
}
.lc-input-row input[type="number"]::-webkit-outer-spin-button,
.lc-input-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Down payment % badge */
.lc-down-pct {
    font-family: var(--lc-font-mono);
    font-size: .8rem;
    font-weight: 600;
    color: var(--lc-accent2);
    min-width: 38px;
    text-align: center;
}

/* Down payment error message */
.lc-field-error {
    margin: 6px 0 0 0;
    font-size: .78rem;
    font-weight: 600;
    color: #b85c2a;
    background: rgba(184,92,42,.08);
    border: 1px solid rgba(184,92,42,.25);
    border-radius: 6px;
    padding: 5px 10px;
    animation: lc-fadedown .2s ease;
}

/* Range sliders */
.lc-field input[type="range"] {
    width: 100%;
    margin-top: 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--lc-accent) 0%, var(--lc-accent) var(--range-pct, 50%), var(--lc-border) var(--range-pct, 50%));
    cursor: pointer;
    outline: none;
}
.lc-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lc-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(184,92,42,.35);
    transition: transform .15s;
}
.lc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
.lc-field input[type="range"]::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lc-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(184,92,42,.35);
    cursor: pointer;
}

/* ---------- Results ---------- */
.lc-monthly-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lc-border);
    margin-bottom: 20px;
}
.lc-monthly-label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lc-muted);
    margin-bottom: 6px;
}
.lc-monthly-value {
    font-family: var(--lc-font-head);
    font-size: 2.6rem;
    color: var(--lc-accent);
    letter-spacing: -.02em;
    line-height: 1;
    transition: opacity .2s;
}

/* Breakdown stats */
.lc-breakdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.lc-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .9rem;
}
.lc-stat-label { color: var(--lc-muted); }
.lc-stat-value {
    font-family: var(--lc-font-mono);
    font-size: .95rem;
    font-weight: 500;
    color: var(--lc-ink);
}
.lc-stat--total {
    border-top: 1px solid var(--lc-border);
    padding-top: 10px;
    font-weight: 600;
}
.lc-stat--total .lc-stat-label { color: var(--lc-ink); font-weight: 600; }
.lc-stat--total .lc-stat-value { color: var(--lc-accent2); font-size: 1rem; }

/* ---------- Donut chart ---------- */
.lc-chart-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.lc-donut {
    width: 110px; height: 110px;
    transform: rotate(-90deg);
}
.lc-donut-bg {
    fill: none;
    stroke: var(--lc-border);
    stroke-width: 18;
}
.lc-donut-principal {
    fill: none;
    stroke: var(--lc-accent2);
    stroke-width: 18;
    stroke-linecap: butt;
    transition: stroke-dasharray .5s ease;
}
.lc-donut-interest {
    fill: none;
    stroke: var(--lc-accent);
    stroke-width: 18;
    stroke-linecap: butt;
    transition: stroke-dasharray .5s ease, stroke-dashoffset .5s ease;
}
.lc-donut-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--lc-muted);
    align-items: center;
}
.lc-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
}
.lc-legend-dot--p { background: var(--lc-accent2); }
.lc-legend-dot--i { background: var(--lc-accent); }

/* ---------- Toggle button ---------- */
.lc-toggle-amort {
    width: 100%;
    background: transparent;
    border: 1.5px solid var(--lc-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--lc-font-body);
    font-size: .85rem;
    font-weight: 600;
    color: var(--lc-muted);
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.lc-toggle-amort:hover {
    border-color: var(--lc-accent);
    color: var(--lc-accent);
    background: rgba(184,92,42,.04);
}

/* ---------- Amortization table ---------- */
.lc-amort-wrap {
    grid-column: 1 / -1;
    background: var(--lc-card-bg);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow);
    overflow: hidden;
    animation: lc-fadedown .3s ease;
}
@keyframes lc-fadedown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lc-amort-scroll {
    overflow-x: auto;
}
.lc-amort-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    font-family: var(--lc-font-mono);
}
.lc-amort-table thead {
    background: var(--lc-ink);
    color: #fff;
}
.lc-amort-table th {
    padding: 12px 18px;
    text-align: right;
    font-family: var(--lc-font-body);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.lc-amort-table th:first-child { text-align: left; }
.lc-amort-table td {
    padding: 11px 18px;
    text-align: right;
    border-bottom: 1px solid var(--lc-border);
    color: var(--lc-ink);
}
.lc-amort-table td:first-child {
    text-align: left;
    font-family: var(--lc-font-body);
    font-weight: 600;
}
.lc-amort-table tbody tr:nth-child(even) {
    background: var(--lc-cream);
}
.lc-amort-table tbody tr:last-child td { border-bottom: none; }
.lc-amort-table tbody tr:hover { background: rgba(184,92,42,.06); }

/* ---------- Rate compare toggle button ---------- */
.lc-toggle-compare {
    width: 100%;
    background: transparent;
    border: 1.5px solid var(--lc-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--lc-font-body);
    font-size: .85rem;
    font-weight: 600;
    color: var(--lc-muted);
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.lc-toggle-compare:hover {
    border-color: var(--lc-accent2);
    color: var(--lc-accent2);
    background: rgba(61,107,143,.05);
}

/* ---------- Rate comparison panel ---------- */
.lc-compare-wrap {
    grid-column: 1 / -1;
    background: var(--lc-card-bg);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow);
    padding: 24px;
    animation: lc-fadedown .3s ease;
}
.lc-compare-heading {
    font-family: var(--lc-font-head);
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0 0 6px 0;
    color: var(--lc-ink);
}
.lc-compare-note {
    font-size: .82rem;
    color: var(--lc-muted);
    margin: 0 0 16px 0;
}
.lc-compare-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.lc-compare-controls label {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--lc-muted);
    white-space: nowrap;
}
.lc-compare-controls select {
    border: 1.5px solid var(--lc-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-family: var(--lc-font-body);
    font-size: .9rem;
    color: var(--lc-ink);
    background: var(--lc-cream);
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}
.lc-compare-controls select:focus {
    border-color: var(--lc-accent2);
    box-shadow: 0 0 0 3px rgba(61,107,143,.12);
}
.lc-compare-scroll { overflow-x: auto; }
.lc-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    font-family: var(--lc-font-mono);
}
.lc-compare-table thead {
    background: var(--lc-ink);
    color: #fff;
}
.lc-compare-table th {
    padding: 11px 16px;
    text-align: right;
    font-family: var(--lc-font-body);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}
.lc-compare-table th:first-child { text-align: left; }
.lc-compare-table td {
    padding: 10px 16px;
    text-align: right;
    border-bottom: 1px solid var(--lc-border);
    color: var(--lc-ink);
}
.lc-compare-table td:first-child { text-align: left; }
.lc-compare-table tbody tr:last-child td { border-bottom: none; }

/* Current row highlight */
.lc-compare-current td {
    background: rgba(61,107,143,.07);
    font-weight: 600;
}
.lc-compare-scenario {
    font-family: var(--lc-font-body);
    font-weight: 600;
    color: var(--lc-muted);
}
.lc-compare-current .lc-compare-scenario {
    color: var(--lc-accent2);
}

/* Delta cells */
.lc-diff--better { color: #2e7d5e; font-weight: 600; }
.lc-diff--worse  { color: #b85c2a; font-weight: 600; }

/* ---------- Branding logo ---------- */
.lc-card { position: relative; }

.lc-brand-logo {
    display: block;
    position: absolute;
    top: 14px;
    right: 16px;
    opacity: 0.5;
    transition: opacity .2s, transform .2s;
    line-height: 0;
}
.lc-brand-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}
.lc-brand-logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(26,23,20,.18);
}