/* Age Calculator
   Layered on top of loan-calculator.css, which the view loads first for the
   shared page-header / calculator-container / result-card shell. Everything
   here is specific to the age page. */

/* ---------------------------------------------------------- main result --- */

.age-hero-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
}

.age-hero-sub {
    font-size: .8rem;
    opacity: .8;
    margin-top: .15rem;
}

/* One line, sized to the viewport, never a full screen of digits. */
.age-hero-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .9rem;
    margin: .1rem 0;
    line-height: 1.15;
}

.age-unit {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
}

.age-unit .age-num {
    font-size: clamp(1.5rem, 4.2vw, 2.1rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.age-unit .age-lbl {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    opacity: .85;
}

/* ------------------------------------------------------------ stat grid --- */

.age-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: .6rem;
}

.age-stat-card {
    background: #fff;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    padding: .7rem .5rem;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.age-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .07);
}

.age-stat-icon {
    color: var(--calculator-color, #6366f1);
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.age-stat-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.age-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #212529;
    font-variant-numeric: tabular-nums;
    /* Long second counts must not blow the card out on narrow screens. */
    overflow-wrap: anywhere;
    line-height: 1.2;
    margin: .15rem 0;
}

.age-stat-sub {
    font-size: .68rem;
    color: #6c757d;
}

/* ------------------------------------------------------------ fact cards --- */

.age-fact {
    background: #f8f9fa;
    border-radius: .6rem;
    padding: .9rem 1rem;
}

.age-fact-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .2rem;
}

.age-fact-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #212529;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.age-fact-note {
    font-size: .75rem;
    color: #6c757d;
    margin-top: .15rem;
}

/* --------------------------------------------------- day-count milestones --- */

.age-day-milestone {
    height: 100%;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .6rem;
    padding: .85rem .75rem;
    text-align: center;
}

.age-day-milestone.is-passed {
    background: #f8f9fa;
    color: #6c757d;
}

.age-day-num {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--calculator-color, #6366f1);
    font-variant-numeric: tabular-nums;
}

.age-day-milestone.is-passed .age-day-num {
    color: #6c757d;
}

.age-day-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
}

.age-day-date {
    font-size: .8rem;
    font-weight: 600;
    margin-top: .3rem;
}

.age-day-status {
    font-size: .72rem;
    color: #6c757d;
    margin-top: .15rem;
}

/* ---------------------------------------------------------------- planets --- */

.planet-glyph {
    font-size: 1.05rem;
    color: var(--calculator-color, #6366f1);
}

/* -------------------------------------------------------------- controls --- */

#advancedToggle {
    color: var(--calculator-color, #6366f1);
}

#advancedToggle:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------- print --- */

@media print {

    .calculator-header .btn,
    #calculatorApp .calculate-button-section,
    .related-calculators-plain,
    .c4n-methodology,
    .loan-faq {
        display: none !important;
    }

    .age-stat-card,
    .age-day-milestone,
    .card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .result-card {
        color: #000 !important;
        background: none !important;
        border: 2px solid #000 !important;
    }
}

/* ------------------------------------------------------ date select group --- */

/* Day / Month / Year as three selects. Month gets the extra width because
   localized month names are far longer than two digits. */
.age-date-group {
    display: grid;
    grid-template-columns: 1fr 1.7fr 1.1fr;
    gap: .5rem;
}

.age-date-field {
    min-width: 0;
}

.age-date-label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    margin-bottom: .2rem;
}

.age-date-group .form-select {
    width: 100%;
}

@media (max-width: 400px) {
    .age-date-group {
        grid-template-columns: 1fr 1.5fr 1fr;
        gap: .35rem;
    }

    .age-date-group .form-select {
        padding-left: .5rem;
        padding-right: 1.4rem;
        font-size: .9rem;
    }
}