/* ═══════════════════════════════════════════
   retirement.css — Retirement Calculator specific styles
   Requires: calc-global.css
   ─────────────────────────────────────────
   Contains ONLY styles that do not exist in
   calc-global.css. Follows the FD calculator
   as the master reference implementation.
═══════════════════════════════════════════ */


/* ── Retirement-specific CSS variables ── */
:root {
    --ret-blue:        #1D4ED8;
    --ret-blue-soft:   #DBEAFE;
    --ret-green:       #10B981;
    --ret-green-soft:  #D1FAE5;
    --ret-purple:      #7C3AED;
    --ret-purple-soft: #EDE9FE;
    --ret-orange:      #EA580C;
    --ret-orange-soft: #FFEDD5;
}


/* ═══════════════════════════════════════════
   RETIREMENT-ONLY COLOUR UTILITIES
═══════════════════════════════════════════ */

.c-teal-r  { color: var(--ret-green); }
.c-slate-r { color: var(--slate); }

.hs-value.amber { color: #FDE68A; }


/* ═══════════════════════════════════════════
   GROUP LABELS — section headings within inputs
═══════════════════════════════════════════ */

.ret-group-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: var(--slate);
    text-transform: uppercase;
    margin-bottom: .65rem;
    margin-top: .1rem;
    padding-bottom: .3rem;
    border-bottom: 1.5px solid var(--slate-line);
}


/* ═══════════════════════════════════════════
   RETIREMENT READINESS STRIP
═══════════════════════════════════════════ */

.readiness-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--ret-blue-soft) 100%);
    border: 1.5px solid #BFDBFE;
    border-radius: var(--r-lg);
    padding: .9rem 1.1rem;
    margin-bottom: 1.2rem;
    gap: 1rem;
}

.readiness-left {
    flex: 1;
    min-width: 0;
}

.readiness-label {
    font-size: .65rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: .25rem;
}

.readiness-score-row {
    display: flex;
    align-items: baseline;
    gap: .2rem;
    margin-bottom: .2rem;
}

.readiness-score {
    font-size: 2rem;
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    font-family: var(--font-mono);
    transition: color .3s;
}

.readiness-max {
    font-size: .8rem;
    color: var(--slate);
    font-weight: 600;
}

.readiness-status {
    font-size: .72rem;
    font-weight: 700;
    color: var(--emerald);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Score-based status colours */
.readiness-status.poor     { color: #DC2626; }
.readiness-status.caution  { color: #D97706; }
.readiness-status.good     { color: #16A34A; }
.readiness-status.excellent{ color: #0D9488; }


/* SVG ring */
.readiness-ring-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
}
.readiness-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.rr-track {
    fill: none;
    stroke: var(--slate-line);
    stroke-width: 7;
}
.rr-fill {
    fill: none;
    stroke: var(--emerald);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dasharray .7s var(--ease), stroke .3s;
}
.rr-fill.poor     { stroke: #EF4444; }
.rr-fill.caution  { stroke: #F59E0B; }
.rr-fill.good     { stroke: #22C55E; }
.rr-fill.excellent{ stroke: #0D9488; }


/* ═══════════════════════════════════════════
   GAP / SURPLUS BANNERS (inside hero)
═══════════════════════════════════════════ */

.gap-banner,
.surplus-banner {
    margin-top: 10px;
    border-radius: 12px;
    padding: .55rem .85rem;
    display: none;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
}
.gap-banner {
    background: rgba(220,38,38,.12);
    border: 1px solid rgba(220,38,38,.22);
    color: #FCA5A5;
}
.gap-banner.show     { display: flex; }
.gap-banner i        { color: #FCA5A5; }

.surplus-banner {
    background: rgba(16,185,129,.12);
    border: 1px solid rgba(16,185,129,.3);
    color: #6EE7B7;
}
.surplus-banner.show { display: flex; }
.surplus-banner i    { color: #6EE7B7; }

/* Inline gap/surplus value spans */
.gap-val     { color: #FCA5A5; font-family: var(--font-mono); }
.surplus-val { color: #6EE7B7; font-family: var(--font-mono); }


/* ═══════════════════════════════════════════
   MONTHLY INCOME BOX (corpus drawdown)
═══════════════════════════════════════════ */

.ret-income-box {
    background: var(--ret-green-soft);
    border: 1.5px solid #6EE7B7;
    border-radius: var(--r-md);
    padding: .85rem 1rem;
    margin-bottom: 1.2rem;
}

.ret-income-hd {
    font-size: .7rem;
    font-weight: 700;
    color: #065F46;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.ret-income-hd i { color: var(--ret-green); }

.ret-income-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ret-income-item {
    background: var(--white);
    border-radius: 10px;
    padding: .55rem .7rem;
    border: 1px solid #A7F3D0;
    text-align: center;
}
.ret-income-lbl { font-size: .65rem; color: #065F46; font-weight: 500; margin-bottom: 3px; }
.ret-income-val { font-size: .88rem; font-weight: 800; color: #047857; }
.ret-income-val.green { color: var(--ret-green); }


/* ═══════════════════════════════════════════
   EMPTY FIELD PROMPT  (shown on blur)
═══════════════════════════════════════════ */

.field-empty-prompt {
    font-size: .7rem;
    color: var(--danger);
    margin-top: 5px;
    display: none;
    align-items: center;
    gap: 4px;
    background: var(--danger-soft);
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: .3rem .6rem;
}
.field-empty-prompt.show { display: flex; }


/* ═══════════════════════════════════════════
   INSIGHT CARD VARIANTS — teal, blue, orange
   Global defines amber (default), green, purple.
   Retirement adds teal, blue, orange variants.
═══════════════════════════════════════════ */

.insight-card.teal   { border-left-color: var(--ret-green); }
.insight-card.blue   { border-left-color: var(--ret-blue); }
.insight-card.orange { border-left-color: var(--ret-orange); }


/* ═══════════════════════════════════════════
   TABLE — investment column colour
═══════════════════════════════════════════ */

td.td-inv  { color: var(--ret-green); font-weight: 600; }
td.td-ret  { color: var(--ret-blue);  font-weight: 600; }
td.td-cls  { color: #C4A55A;          font-weight: 700; }


/* ═══════════════════════════════════════════
   RETIREMENT RESULT GRID — gap cell colours
═══════════════════════════════════════════ */

.r-val.gap-positive { color: #DC2626; font-weight: 800; }
.r-val.gap-negative { color: var(--ret-green); font-weight: 800; }


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

@media (max-width: 700px) {
    .ret-income-grid { grid-template-columns: 1fr; }
    .readiness-strip { flex-direction: row; gap: .75rem; }
    .readiness-ring-wrap { width: 60px; height: 60px; }
    .readiness-score { font-size: 1.65rem; }
}

@media (max-width: 480px) {
    .ret-income-grid { grid-template-columns: 1fr; }
    .readiness-strip { padding: .75rem .85rem; }
}