/* ============================================
   Dhi Money - /fi campaign page styles
   "When is your Financial Independence Day?"
   Layers on top of ds.css + common.css + tools.css.
   ============================================ */

/* ---------- Header: actions retract on scroll ----------
   Campaign page only (body.page-fi; fi.css is also loaded by the retirement
   calculator, which keeps the standard header). Once the reader is into the
   calculator, the theme toggle and "Get the app" CTA are noise competing with
   the in-page email/download CTA - so the whole actions capsule retracts and
   only the condensed logo mark stays. It comes back the moment you scroll to
   the top. Collapsed, not display:none, so it animates with the logo. */
body.page-fi .glx-header .glx-actions {
    transition: opacity var(--dur-fast) var(--ease-standard),
                transform var(--dur-med) var(--ease-standard),
                max-width var(--dur-med) var(--ease-standard),
                padding var(--dur-med) var(--ease-standard);
    max-width: 220px;
    overflow: hidden;
}
body.page-fi .glx-header.scrolled .glx-actions {
    opacity: 0;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    transform: translateX(12px);
    pointer-events: none;
}

/* ---------- Campaign hero ----------
   Compact by design: the calculator + chart are the product, so the hero is
   one line of framing, not a landing-page splash. The full "what is an FI
   day" detail lives in the emailed PDF, not on the page. */
.tool-page.fi-page {
    /* Tighter than the shared tools default (100px) - the fixed header is
       ~56px, so this clears it without a dead band. SCOPED to .fi-page: the
       retirement calculator loads this stylesheet too and keeps the default. */
    padding-top: 66px;
}

/* Dense, deliberate rhythm: both cards natural-height, rows tight.
   Desktop: the email card fills the left column under the inputs, so the
   (taller) result column never leaves a dead band of background. */
.fi-page .calculator-layout {
    align-items: stretch;
    gap: var(--space-lg);
}

/* Any grid child may shrink below its content (mono dates, lever rows) -
   without this the widest row inflates the column past the viewport on
   mobile and the whole page side-scrolls. */
.fi-page .calculator-layout > * {
    min-width: 0;
}

/* Email capture is a full-width row under the two cards. */
@media (min-width: 901px) {
    .fi-page .fi-report { grid-column: 1 / -1; margin-top: 0; }
}

.fi-page .calc-inputs,
.fi-page .calc-results {
    padding: 22px;
}

.fi-page .calc-inputs h3 {
    margin-bottom: 12px;
    padding-bottom: 10px;
}

/* The results heading owns a sub-line now - the shared card-heading hairline
   was slicing between them, so it moves BELOW the sub (the pair reads as one
   block, then the rule). */
.fi-page .calc-results h3 {
    margin-bottom: 4px;
    padding-bottom: 0;
    border-bottom: none;
}

.fi-page .slider-group {
    margin-bottom: 15px;
}

.fi-page .slider-group .slider-label {
    margin-bottom: 6px;
}

/* Two stats side by side rather than stacked: same information, ~100px
   shorter card - which keeps the equal-height pair (and therefore the
   sliders) within a 720px-tall laptop screen. */
.fi-page .result-cards {
    grid-template-columns: 1fr 1fr;
}

/* Tiles stay 2-up even on phones - stacked they cost ~120px of scroll for
   two numbers that belong side by side. Value font steps down instead. */
@media (max-width: 480px) {
    .fi-page .result-cards { gap: 10px; }
    .fi-page .result-card { padding: 12px; }
    .fi-page .result-card .result-value { font-size: 19px; }
}



.fi-hero {
    padding: var(--space-sm2) 0 var(--space-sm);
    text-align: center;
}

.fi-eyebrow {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.fi-hero h1 {
    font-size: clamp(23px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.2;
    max-width: 720px;
    margin: 0 auto 6px;
    text-wrap: balance;
}

.fi-hero h1 .accent { color: var(--primary); }

.fi-hero .fi-sub {
    color: var(--text-secondary);
    font-size: 13.5px;
    max-width: 780px;
    margin: 0 auto;
}

/* The verdict heading is two spans (label + the year/age answer). On desktop
   they are one sentence on one line - the default inline flow. Mobile stacks
   them: see the <=900px block, where the phrase would otherwise wrap
   mid-answer ("...Year is 2047" / "(Age 56)"). */

/* The card heading carries the verdict; the sub ties it to the goal. */
.fi-year-sub {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    line-height: 1.5;
}

/* ---------- Result panel ---------- */
.fi-inline-chart {
    margin: 6px 0 8px;
}

/* The graph is the hero of the result card (playground grammar) - sized in
   CSS, not inline, so it can breathe more on desktop than on phones. */
.fi-inline-chart canvas {
    width: 100%;
    height: 248px;
    display: block;
}

@media (max-width: 900px) {
    .fi-inline-chart canvas { height: 200px; }
}

/* Chart key. The second entry only exists while the dotted "keep going"
   line is on the canvas, so the key never names something you can't see. */
.fi-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.fi-legend { display: inline-flex; align-items: center; gap: 6px; }
.fi-legend[hidden] { display: none; }
.fi-legend .sw { width: 16px; height: 0; display: inline-block; }
.fi-legend .sw.solid { border-top: 2.5px solid var(--primary); }
.fi-legend .sw.dot { border-top: 2.5px dotted var(--primary); }

/* ---------- Email -> PDF report ---------- */
.fi-report {
    margin-top: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 22px;
    text-align: center;
}

.fi-report h3 {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 6px;
}

.fi-report > p {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 480px;
    margin: 0 auto var(--space-md);
}

.fi-report-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    max-width: 480px;
    margin: 0 auto;
}

.fi-report-form input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.15s;
}

.fi-report-form input[type="email"]:focus { border-color: var(--primary); }

.fi-report-form button {
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.fi-report-form button:hover { opacity: 0.9; }
.fi-report-form button:disabled { opacity: 0.55; cursor: default; }

.fi-report-fineprint {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 10px;
}

/* The not-advice line lives on its own, small, at the CARD's bottom-right
   with a * - never mixed into the email fineprint sentence. Written as
   .fi-report > .fi-report-disclaimer to out-rank `.fi-report > p`, whose
   centered 480px column would otherwise trap it in the middle. */
.fi-report > .fi-report-disclaimer {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    max-width: none;
    margin: 14px 0 0;
}

.fi-report-fineprint a { color: var(--text-secondary); text-decoration: underline; }

.fi-report-status {
    margin-top: var(--space-sm2);
    font-size: 14.5px;
    display: none;
}

.fi-report-status.ok { display: block; color: var(--success); }
.fi-report-status.err { display: block; color: var(--error); }

/* honeypot - invisible to humans, tempting to bots */
.fi-hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Assumptions ---------- */
.fi-assumptions {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
    background: var(--bg-card);
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                border-radius 0.18s ease;
}



.fi-assumptions summary {
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    /* wrap, don't clip: see .mono below */
    flex-wrap: wrap;
    row-gap: 2px;
}
/* NEVER ellipsize this: the tail is "plan till 85", so clipping drops the
   assumption most likely to be questioned. It fits one line on a full-width
   card; in any narrower box (a resized window, and the report's 940px
   snapshot viewport) it wraps to a second line instead of losing the age. */
.fi-assumptions summary .mono { font-size: 12px; white-space: normal; }
.fi-assumptions summary::after { margin-left: auto; }
._x_dead_rule_ {
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fi-assumptions summary::-webkit-details-marker { display: none; }
/* A chevron, not +/-: this is a disclosure, and an arrow says "there is more
   below" where a plus reads as "add something". Drawn as a rotating CSS
   caret so it animates with the popover instead of swapping glyphs. */
.fi-assumptions summary::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    border-radius: 1px;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}
/* .is-open ONLY - never [open]. The JS pins the <details> permanently open
   for a11y (fi.html: box.setAttribute('open','')) and drives the float with
   the class, so [open] is always true and would freeze the caret pointing
   up. .is-open is the state the user actually sees - hover-intent on
   desktop, tap on touch - so the caret follows the panel exactly. */
.fi-assumptions.is-open summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

/* The body FLOATS over the page instead of expanding the card. It is drawn
   as the CONTINUATION of the pill - flush against it (no gap), same border,
   top corners square, bottom rounded - so open reads as ONE card unfolding,
   not a second box appearing. display stays block (so it can animate);
   closed = invisible + unclickable. */
.fi-assumptions .fi-assumptions-body {
    position: absolute;
    left: -1px;
    right: -1px;
    top: 100%;
    z-index: 40;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 18px 36px -8px rgba(0,0,0,0.16);
    padding: 4px 16px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.fi-assumptions.is-open {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -2px 18px -6px rgba(0,0,0,0.10);
    z-index: 41;
}

.fi-assumptions.is-open .fi-assumptions-body {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    border-top: none;
}

@media (prefers-reduced-motion: reduce) {
    .fi-assumptions, .fi-assumptions .fi-assumptions-body { transition: none; }
}

.fi-assumptions .fi-assumptions-body ul { margin: 0 0 10px 18px; padding: 0; }
.fi-assumptions .fi-assumptions-body li { margin-bottom: 5px; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .fi-report-form { flex-direction: column; }
    .fi-report-form button { width: 100%; }
}


/* ---------- Vinay restructure (Aug 2026) ---------- */
.fi-eyebrow .mono { font-family: 'JetBrains Mono', monospace; letter-spacing: 0; }
.fi-eyebrow .fi-blank { color: var(--text-primary); }


/* Goal assessment - the ask, answered in words */
/* Step-up chips inside assumptions */
.fi-stepup { margin: 2px 0 14px; }
.fi-stepup-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fi-stepup-chips button {
    border: 1px solid var(--border); background: var(--bg-primary); border-radius: 999px;
    padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    cursor: pointer; font-family: inherit; transition: all .15s;
}
.fi-stepup-chips button.on, .fi-stepup-chips button:hover { border-color: var(--primary); color: var(--primary); }
.fi-stepup-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }


/* ---------- Mock adoptions (Aug 2026) ---------- */
/* Hero sits directly under the fixed glass header (main's own
   padding-top clears it); keep the hero band compact. */
.fi-page .fi-hero { padding: 14px 0 10px; }

/* Slider row icons */
.fi-ic {
    display: inline-flex;
    width: 30px; height: 30px;
    align-items: center; justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-primary));
    color: var(--primary);
    margin-right: 10px;
    flex: none;
}
.fi-ic svg { width: 16px; height: 16px; }
.slider-label { display: flex; align-items: center; }
.slider-label label { flex: 1 1 auto; }

/* ---------- One-screen mweb ----------
   The whole product - sliders, then date + graph - fits a phone screen.
   Card headings, the hero sub, the mini readout and the download bar are
   all gone on mobile; the assessment + tiles ride BELOW the graph. */
@media (max-width: 900px) {
    .fi-page .calculator-layout { gap: 10px; }
    .fi-page .calc-inputs, .fi-page .calc-results { padding: 12px 14px; }
    .fi-page .calc-inputs h3 { display: none; }
    .fi-page .calc-results h3 { font-size: 15px; }
    /* The verdict sentence does not fit one phone line, and wrapping it mid-
       answer ("...Year is 2047" / "(Age 56)") buries the thing the visitor
       came for. Stack it deliberately instead: a quiet label row, then the
       year and age together, larger - the answer reads first. */
    .fi-page .calc-results h3 .fi-year-lead {
        display: block;
        font-size: 13px;
        /* Same weight + ink as the answer below: the two lines are ONE
           heading that happens to wrap, not a caption over a value. */
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.01em;
        line-height: 1.3;
    }
    .fi-page .calc-results h3 .fi-year-val {
        display: block;
        font-size: 19px;
        line-height: 1.25;
        margin-top: 1px;
    }
    .fi-hero h1 { font-size: 20px; margin-bottom: 2px; }
    .fi-page .fi-hero { padding: 8px 0 6px; }
    .fi-hero .fi-sub { display: none; }
    /* The fixed glass header owns the top ~74px on phones (taller than the
       ~56px the base padding-top was sized for), so the page needs a bit
       more clearance here or the hero tucks under the glass. */
    .tool-page.fi-page { padding-top: 74px; }
    /* The collapsed summary ellipsized its tail on phones ("...plan till 8" -
       the age was the first casualty). On mobile it becomes TWO tidy lines
       instead: "Assumptions" as a title row (with the chevron), then the
       values on their own full-width row. The " · " separator is dropped so
       the title row doesn't end mid-sentence. The body is a floating popover,
       so the taller summary changes nothing underneath. */
    .fi-assumptions summary .fi-asm-sep { display: none; }
    .fi-assumptions summary::after { order: 1; }   /* chevron stays on the title row */
    .fi-assumptions summary .mono {
        order: 2;
        flex-basis: 100%;
        font-size: 11px;
    }
    .fi-page .slider-group { margin-bottom: 9px; }
    .fi-page .slider-group .slider-label { margin-bottom: 2px; }
    .fi-page .slider-label label { font-size: 12.5px; }
    .fi-ic { width: 24px; height: 24px; }
    .fi-ic svg { width: 13px; height: 13px; }
    .fi-stepup { margin: 0 0 8px; }
    .fi-stepup-chips button { padding: 4px 10px; font-size: 11.5px; }
    .fi-assumptions summary { padding: 8px 10px; }
    .result-cards { margin-top: 8px; }

    /* order: graph -> tiles */
    .fi-page .calc-results { display: flex; flex-direction: column; }
    .fi-page .fi-inline-chart { order: 1; }
    .fi-page .result-cards { order: 2; }
}




/* The calculator section already ends on a card; the site-wide xxl+xxl gap
   before the download CTA reads as dead space on this page. */
.fi-page .calculator-section { padding-bottom: 0; }
.fi-page .download-cta { padding: var(--space-md) 0 var(--space-xl); }
/* Compact CTA: this page ends on a dense calculator, so the site's tall
   marketing block (64px padding, 44px headline) reads as a second page.
   The 2px gradient rule the shared block draws on top is dropped too - on a
   page whose accent is already everywhere it just looks like a stray border. */
.fi-page .download-cta-box { padding: 26px var(--space-lg); }
.fi-page .download-cta-box::before { display: none; }
.fi-page .download-cta-box h2 { font-size: clamp(20px, 2.2vw, 26px); margin-bottom: 6px; }
.fi-page .download-cta-box p { font-size: 14.5px; max-width: 460px; margin-bottom: var(--space-md); }
.fi-page .download-cta-box .store-badges.large .store-badge img { height: 42px; }


/* The graph fills the card's height. Safe to flex again: the Assumptions
   body floats as a popover now, so nothing changes the left card's height
   underneath the equal-height pair. */
@media (min-width: 901px) {
    .fi-page .calc-results { display: flex; flex-direction: column; }
    .fi-page .fi-inline-chart { flex: 1 1 auto; display: flex; flex-direction: column; }
    .fi-page .fi-inline-chart canvas { flex: 1 1 auto; height: auto; min-height: 240px; }
}


/* ---------- Share ---------- */
.fi-share {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.fi-share button {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fi-share button:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }