/* ═══════════════════════════════════════════
   lumpsum.css – Lumpsum Calculator overrides
   Only styles not already in calc-global.css
═══════════════════════════════════════════ */

/* ── Hero real‑value banner (orange, similar to TDS banner) ── */
.hero-real-banner {
    margin-top: 10px;
    background: rgba(234,88,12,.12);
    border: 1px solid rgba(234,88,12,.22);
    border-radius: 12px;
    padding: .55rem .85rem;
    display: none;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: #fbbf24;
}
.hero-real-banner.show { display: flex; }
.hero-real-banner i    { color: #f97316; }

.real-amt { color: #fbbf24; font-family: var(--font-mono); }

/* ── Canvas line chart wrapper ── */
.chart-canvas-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Result grid colour utility for teal (already exists in FD, define if missing) ── */
.c-teal { color: #0d9488; }   /* match FD's .c-teal */

/* ── Field‑empty prompt (copied from FD’s fd.css to ensure consistency) ── */
.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; }

/* ── Ensure bar‑chart bars use same structure as FD ── */
/* (yr-col, yb-stack, yb-p, yb-i already in calc-global.css, but we need to override colours) */
.yb-p { background: #1E4A7A; }   /* invested */
.yb-i { background: #15803d; }   /* returns */

/* ── Override for growth table real value column ── */
td.td-real { color: #ea580c; font-weight: 600; }