/* =========== Retirement Calculator — page-specific styles ================ */

/* ---------- Split layout (left/right columns) ---------- */


/* ---------- Column pair layout ---------- */
.col-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; margin-top: 8px;}

/* ---------- Mini fields (page-specific overrides) ---------- */
.field-mini { display: flex; flex-direction: column; gap: 10px;}
.field-mini .field-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 4px 12px;}
.field-mini .num {
    font-size: 32px; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; cursor: pointer;
    border-bottom: 1px dashed transparent; transition: border-color 0.2s; min-width: 40px; display: inline-block;
}

.field-mini .num:hover { border-bottom-color: var(--ink-3, #999);}
.field-mini .num:focus { outline: none; border-bottom-color: var(--ink, #1a1a1a);}

.field-mini .verb { font-size: 18px; color: var(--ink-2, #666); font-weight: 600;}
.field-mini .unit { font-size: 14px; color: var(--ink-2, #666); font-weight: 300;}

.field-mini .meta { font-size: 11px; color: var(--ink-3, #999); letter-spacing: 0.04em;}

/* ---------- Timeline viz ---------- */
.lifewrap { position: relative; padding-top: 6px;}

svg.life { display: block; width: 100%; height: auto; overflow: visible;}

.lf-zone { stroke: none;}
.lf-axis { stroke: var(--rule-2, #d0d0d0); stroke-width: 1;}
.lf-tick { stroke: var(--ink-3, #999); stroke-width: 1;}

.lf-label { fill: var(--ink-3, #999); font-size: 11px; letter-spacing: .04em; 
    font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; text-transform: uppercase;}

.lf-zone-lbl { fill: #fff; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-weight: 500;}

.lf-marker { fill: #fff; stroke: var(--ink, #1a1a1a); stroke-width: 2;}
.lf-marker.drag { cursor: grab;}
.lf-marker.drag:active { cursor: grabbing;}
.lf-marker-lbl { font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; fill: var(--ink, #1a1a1a); font-size: 14px;}
.lf-cost { fill: none; stroke: url(#gCost); stroke-width: 2;}
.lf-cost-fill { fill: url(#gCostFill); opacity: .18;}
.lf-corpus-lbl { font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; fill: var(--ink, #1a1a1a); font-size: 14px;}
.lf-corpus-num {
    font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-weight: 400; font-size: 36px;
    letter-spacing: -0.025em; fill: var(--ink, #1a1a1a); font-variant-numeric: tabular-nums;
}

/* ---------- Results (page-specific) ---------- */
.ret-result {
    margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; 
    gap: 48px 64px; border-top: 1px solid var(--rule, #e5e5e5); padding-top: 34px;
}

.ret-result .cell { display: flex; flex-direction: column; gap: 8px;}
.ret-result .v { font-size: 32px; font-weight: 300; letter-spacing: -0.025em; font-variant-numeric: tabular-nums;}
.ret-result .v.navy { color: var(--navy-1, #0a2a4a);}
.ret-result .v.mag { color: var(--magenta-2, #d4145a);}

.ret-hero { margin-top: 34px; border-top: 1px solid var(--rule, #e5e5e5); padding-top: 34px;}
.ret-hero .hero-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;}
.ret-hero .hero-num { white-space: nowrap;}
.ret-hero .hero-abbr { font-family: 'Neue Montreal', 'Plus Jakarta Sans', sans-serif; font-size: 22px; color: var(--ink-2, #666);}


@media (max-width: 1600px) {

}

@media (max-width: 1280px) {

}

@media (max-width: 1100px) {

}

@media (max-width: 900px) {
    .col-pair { grid-template-columns: 1fr; gap: 24px; }

    .field-mini .num { font-size: 28px; }
    .field-mini .verb { font-size: 18px; }

    .ret-result { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
    .ret-result .v { font-size: 28px; }
    .ret-hero .hero-abbr { font-size: 18px; }

    svg.life { height: 240px; }
}

@media (max-width: 600px) {
    .ret-result { grid-template-columns: 1fr; gap: 32px; }
}

/* NEW: Add these styles */
@media (max-width: 480px) {
    .field-mini .num { font-size: 24px; }
    .field-mini .verb { font-size: 16px; }
    .lf-corpus-num { font-size: 28px; }
    .lf-zone-lbl { font-size: 10px; }
    .lf-label { font-size: 10px; }
}

@media(max-width:375px){
    #corp-when { text-align: right; }
    .lf-corpus-lbl { font-size: 12px; }
    .lf-corpus-num { font-size: 24px; }
}