/* ═══════════════════════════════════════════
   step-up-sip.css — Step-Up SIP Calculator
   Requires: calc-global.css
   ─────────────────────────────────────────
   Contains ONLY styles not in calc-global.css.
   Mirrors FD calculator structure and design
   language with SIP-specific colour variables.
═══════════════════════════════════════════ */


/* ── SIP-specific CSS variables ── */
:root {
    --sip-blue:        #2563EB;
    --sip-blue-soft:   #DBEAFE;
    --sip-blue-mid:    #93C5FD;
    --sip-indigo:      #4F46E5;
    --sip-indigo-soft: #EEF2FF;
    --sip-green:       #10B981;
    --sip-green-soft:  #D1FAE5;
}


/* ═══════════════════════════════════════════
   COLOUR UTILITIES
═══════════════════════════════════════════ */

.c-teal  { color: var(--sip-green); }
.hs-value.amber { color: #FDE68A; }


/* ═══════════════════════════════════════════
   RETURN PRESET CHIPS  (mirrors .bank-chip)
═══════════════════════════════════════════ */

.bank-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: .9rem;
}

.sip-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: .26rem .75rem;
    border-radius: 30px;
    border: 1.5px solid var(--slate-line);
    background: var(--white);
    font-size: .73rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: all .18s var(--ease);
    user-select: none;
}
.sip-chip:hover {
    border-color: var(--sip-blue);
    color: var(--sip-blue);
}
.sip-chip.active {
    background: var(--sip-blue-soft);
    border-color: var(--sip-blue);
    color: #1D4ED8;
}
.sip-chip .chip-rate {
    font-size: .68rem;
    color: var(--sip-green);
    font-weight: 700;
}


/* ═══════════════════════════════════════════
   STEP-UP NOTE — below step-up input
═══════════════════════════════════════════ */

.sip-stepup-note {
    margin-top: 6px;
    border-radius: 8px;
    padding: .35rem .65rem;
    font-size: .69rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 5px;
}
.sip-stepup-note.show     { display: flex; }
.sip-stepup-note.info     { background: var(--sip-blue-soft); color: #1D4ED8; border: 1px solid var(--sip-blue-mid); }
.sip-stepup-note.zero     { background: var(--amber-soft); color: #92400E; border: 1px solid #FDE68A; }


/* ═══════════════════════════════════════════
   EMPTY FIELD PROMPT
═══════════════════════════════════════════ */

.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; }


/* ═══════════════════════════════════════════
   STEP-UP IMPACT BANNER — inside hero
═══════════════════════════════════════════ */

.sip-stepup-banner {
    margin-top: 10px;
    background: rgba(37, 99, 235, .10);
    border: 1px solid rgba(37, 99, 235, .22);
    border-radius: 12px;
    padding: .55rem .85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 500;
    color: #1E40AF;
}
.sip-stepup-banner i { color: var(--sip-blue); font-size: .9rem; flex-shrink: 0; }
.su-amt { font-weight: 800; color: var(--sip-blue); }

/* Hide banner when step-up is 0 */
.sip-stepup-banner.hidden { display: none; }


/* ═══════════════════════════════════════════
   YEAR TABLE — colour for SIP & wealth columns
═══════════════════════════════════════════ */

td.td-sip      { color: var(--sip-blue); font-weight: 600; }
td.td-invested { color: var(--navy);     font-weight: 500; }
td.td-wealth   { color: #B45309;         font-weight: 600; }
td.td-value    { color: #C4A55A;         font-weight: 700; }

/* Highlight last (maturity) year row */
tr.yr-maturity td { background: var(--sip-blue-soft); font-weight: 700; }


/* ═══════════════════════════════════════════
   YEAR DETAIL PANEL — 4-col for SIP
   (global has 3; SIP adds Monthly SIP column)
═══════════════════════════════════════════ */

.ydp-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
}

@media (max-width: 600px) {
    .ydp-grid { grid-template-columns: 1fr 1fr !important; }
}


/* ═══════════════════════════════════════════
   INSIGHT CARD — SIP blue variant
═══════════════════════════════════════════ */

.insight-card.sip-blue {
    border-left-color: var(--sip-blue);
}
.insight-card.sip-indigo {
    border-left-color: var(--sip-indigo);
}


/* ═══════════════════════════════════════════
   BAR CHART — growth-phase column tint
   Columns where corpus exceeds 2× invested
   get a subtle gold tint for milestone clarity.
═══════════════════════════════════════════ */

.yr-col.milestone .yb-stack { opacity: .95; }
.yr-col.milestone .yr-lbl   { color: #92400E; font-weight: 700; }


/* ═══════════════════════════════════════════
   COMPARE SECTION — 4-field scenario grid
═══════════════════════════════════════════ */

.scenario-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: .7rem .8rem .9rem;
}

@media (max-width: 480px) {
    .scenario-body { grid-template-columns: 1fr; }
}


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

@media (max-width: 700px) {
    .sip-stepup-banner { font-size: .72rem; }
}

@media (max-width: 480px) {
    .bank-grid { gap: 5px; }
    .sip-chip  { font-size: .68rem; padding: .22rem .6rem; }
}