/* ═══════════════════════════════════════════
   cgt.css  v1.0
   Capital Gains Tax Calculator – specific styles
   Extends calc-global.css — everything else (cards, sliders,
   hero, result-grid, donut mechanics, insights) is shared.
═══════════════════════════════════════════ */

/* Date inputs — match the .ig-num styling used elsewhere */
input[type="date"].ig-num {
    text-align: left;
    font-weight: 600;
    cursor: pointer;
}

.fee-lbl {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--slate);
    margin-bottom: .35rem;
}

/* Small helper caption under an input — used throughout this calculator's
   markup. Only defined in it.css (income-tax-calculator) in the shared
   system, not in calc-global.css, so it must be defined locally here. */
.ded-note {
    font-size: .68rem;
    color: var(--slate);
    margin-top: 4px;
    margin-bottom: .5rem;
    line-height: 1.4;
    padding: 0 2px;
}

/* Donut tooltip — same shape as it.css's #itDonutTip, scoped to this calc */
#cgtDonutTip {
    position: absolute;
    bottom: 105%;
    left: 50%;
    transform: translateX(-50%);
    background: #0D2545;
    border-radius: 16px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s;
    z-index: 20;
    width: 192px;
    box-shadow: 0 20px 40px rgba(13,37,69,.35), 0 4px 12px rgba(13,37,69,.2);
}

/* Result grid: Taxable Gain + Rate side-by-side, Exemption spans full width */
.card .result-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
}
.card .result-grid .result-item.full { grid-column: 1 / -1 !important; }
@media (max-width: 420px) {
    .card .result-grid { grid-template-columns: 1fr !important; }
}