/* =========================================================
   Refi Calculator – Additional Stylesheet
   Builds on top of loan-calculator.css tokens
   ========================================================= */

/* ── Layout override for refi wrap ── */
.rc-wrap {
    --lc-cream:   #f5f0e8;
    --lc-ink:     #1a1714;
    --lc-muted:   #7a736a;
    --lc-accent:  #b85c2a;
    --lc-accent2: #3d6b8f;
    --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;

    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;
    gap: 24px;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .rc-wrap { grid-template-columns: 1fr; padding: 20px; }
}

/* ── Section labels inside input card ── */
.rc-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lc-accent2);
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--lc-accent2);
}

/* ═══════════════════════════════════════
   SCORE GAUGE
═══════════════════════════════════════ */
.rc-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.rc-gauge {
    width: 180px;
    height: 110px;
    overflow: visible;
}

.rc-gauge-bg,
.rc-gauge-fill { display: none; } /* replaced by zone paths */

.rc-zone-red, .rc-zone-yellow, .rc-zone-green {
    opacity: 0.9;
}

.rc-needle-tri {
    fill: #c0392b;
    transition: fill .4s ease;
}

.rc-needle-base {
    fill: #c0392b;
    stroke: #fff;
    stroke-width: 2;
    transition: fill .4s ease;
}

.rc-score-number {
    font-family: var(--lc-font-head);
    font-size: 3rem;
    line-height: 1;
    color: var(--lc-ink);
    margin-top: -8px;
    letter-spacing: -.03em;
}

.rc-score-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--lc-muted);
    margin-top: 2px;
}

.rc-score-verdict {
    font-size: .9rem;
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: .01em;
    min-height: 1.2em;
    transition: color .4s ease;
}

/* ═══════════════════════════════════════
   KEY METRICS ROW
═══════════════════════════════════════ */
.rc-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--lc-border);
}

.rc-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--lc-cream);
    border-radius: 10px;
    padding: 12px 6px 10px;
    border: 1px solid var(--lc-border);
}

.rc-metric-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
    line-height: 1;
}

.rc-metric-value {
    font-family: var(--lc-font-mono);
    font-size: .92rem;
    font-weight: 700;
    color: var(--lc-ink);
    transition: color .3s ease;
    margin-bottom: 2px;
}

.rc-metric-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--lc-muted);
}

/* ── Breakdown in results card ── */
.rc-breakdown { margin-top: 0; }

/* ── Rate Watch CTA button ── */
.rc-ratewatch-btn {
    display: block;
    margin-top: 16px;
    background: var(--lc-accent2);
    color: #fff !important;
    text-decoration: none;
    text-align: center;
    border-radius: 8px;
    padding: 13px 20px;
    font-family: var(--lc-font-body);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background .2s, transform .1s;
}
.rc-ratewatch-btn:hover  { background: #325d7a; }
.rc-ratewatch-btn:active { transform: scale(.98); }