/* ═══════════════════════════════════════════
   compound-interest.css — trimmed
   Requires: calc-global.css (updated with ADDITIONS)
   MARKUP CHANGES NEEDED:
     .ppf-stat-cards → .stat-cards
     .ppf-stat-card.card-invested → .stat-card style="--sc-fg:var(--ci-teal);--sc-bg:#CCFBF1"
     .ppf-stat-card.card-interest → style="--sc-fg:var(--ci-gold);--sc-bg:var(--ci-gold-soft)"
     .ppf-stat-card.card-tax      → style="--sc-fg:#7C3AED;--sc-bg:#EDE9FE"
     .ppf-stat-card.card-lockin   → style="--sc-fg:#047857;--sc-bg:#D1FAE5"
     .psc-icon/.psc-body/.psc-label/.psc-value/.psc-sub → .sc-icon/.sc-body/.sc-label/.sc-value/.sc-sub
     id="ciDonutTip" → add class="donut-tip" (keep id if JS needs it)
   REMOVED (now in global): .field-empty-prompt, .ppf-stat-cards block,
     .psc-* block, #ciDonutTip block, .donut-arc, .dl-item states,
     .yr-chart-wrap/#ciBars layout-shift block (kept #ciBars specific
     id below since it's not the standard #yrBars), .chart-legend/.cl-*
═══════════════════════════════════════════ */

:root {
    --ci-teal:       #0D9488;
    --ci-gold:       #B45309;
    --ci-gold-soft:  #FEF3C7;
}

/* Frequency buttons — 2x2 grid, unique to this calculator */
.freq-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.freq-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.25;
    white-space: normal;
    padding: .45rem .5rem;
}

/* Frequency comparison table — highlight matching row */
#freqCompareTbody tr.current-freq {
    background: var(--ci-gold-soft);
    font-weight: 700;
}
#freqCompareTbody tr.current-freq td { color: var(--navy); }

/* #ciBars uses a non-standard id (not #yrBars), needs its own lock */
.yr-chart-wrap { min-height: 320px; position: relative; }
#ciBars {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 260px;
    box-sizing: border-box;
    position: relative;
}
#vChart { min-height: 360px; }

@media (max-width: 700px) {
    .psc-value { font-size: .9rem; }
}