/* ═══════════════════════════════════════════
   epf.css — trimmed
   Requires: calc-global.css (updated with ADDITIONS)
   MARKUP CHANGES:
     .ppf-stat-cards → .stat-cards ; .ppf-stat-card.card-* → .stat-card
       style="--sc-fg:...;--sc-bg:..." using --epf-teal/--epf-blue/--epf-gold/#7C3AED
     .psc-* → .sc-*
     .lockin-box → .note-box.note-box--info.show (uses --epf-blue tones already close to info)
     id="epfDonutTip" → add class="donut-tip"
   REMOVED: .field-empty-prompt, stat card block, donut tip block,
     .donut-arc, .dl-item states, .lockin-box block
═══════════════════════════════════════════ */

:root {
    --epf-teal:       #0D9488;
    --epf-blue:        #1D4ED8;
    --epf-blue-soft:   #DBEAFE;
    --epf-gold:        #B45309;
    --epf-gold-soft:   #FEF3C7;
}

/* Locked contribution rate display — unique to EPF */
.ig-locked-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--slate-light);
    border: 1.5px solid var(--slate-line);
    border-radius: var(--r-md);
    padding: .55rem .85rem;
    margin-top: .35rem;
    cursor: not-allowed;
}
.ig-locked-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--navy);
    letter-spacing: -.02em;
}
.ig-locked-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--epf-blue-soft);
    border: 1px solid #93C5FD;
    border-radius: 20px;
    padding: .2rem .65rem;
    font-size: .68rem;
    font-weight: 700;
    color: var(--epf-blue);
}
.ig-locked-badge i { font-size: .62rem; }

.hero-tax-banner {
    /* EPF's hero tax banner uses white-on-navy hero, not a status color —
       kept custom since it doesn't map to a hero-banner modifier */
    margin-top: 10px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 12px;
    padding: .55rem .85rem;
    display: flex; align-items: center; gap: 8px;
    font-size: .78rem; font-weight: 600; color: #fff; flex-wrap: wrap;
}
.hero-tax-banner i { color: #6EE7B7; }
.tax-badge {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    padding: .12rem .5rem;
    font-size: .7rem; font-weight: 700; color: #fff;
}