/* ============================================================================
   The Better Veteran — TSP at Separation: Roll / Roth-Convert Optimizer
   tools.thebetterveteran.com/tsp/
   Matches TBV design system (tokens shared with /stay-or-separate/, /benefits-quiz/).
   ============================================================================ */

:root {
    --primary: #1a365d;
    --primary-light: #2b6cb0;
    --accent: #e53e3e;
    --accent-gold: #C4A55A;
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-light: #ffffff;
    --bg-page: #edf2f7;
    --bg-surface: #f7fafc;
    --bg-card: #ffffff;
    --border-color: #cbd5e0;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --green: #276749;
    --green-light: #38a169;
    --red: #c53030;
    --warning-bg: #fffaf0;
    --warning-border: #ed8936;
    --info-bg: #ebf8ff;
    --info-border: #4299e1;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--bg-page);
    color: var(--text-primary);
    margin: 0 auto;
    padding: 24px;
    max-width: 1100px;
    line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.header-container { text-align: center; margin-bottom: 28px; }
.brand-header { margin-bottom: 8px; position: relative; min-height: 36px; }
.home-btn {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    display: inline-block; padding: 8px 20px;
    background-color: var(--primary); color: var(--text-light);
    text-decoration: none; font-weight: 600; font-size: 0.85em;
    border-radius: var(--radius-sm); letter-spacing: 0.03em;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.home-btn:hover { background-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.brand-name { font-size: 1.6em; font-weight: 800; letter-spacing: -0.02em; }
.brand-the, .brand-better { color: var(--primary); }
.brand-veteran { color: var(--accent-gold); }
/* Phones: stack the Home button above the brand so it doesn't overlap the
   absolutely-positioned button (which collides with the centered name on narrow screens). */
@media (max-width: 560px) {
    .brand-header { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; }
    .home-btn { position: static; transform: none; align-self: flex-start; }
    .brand-name { font-size: 1.4em; }
}

h1 { text-align: center; color: var(--primary); margin: 16px 0 8px; font-size: 1.75em; letter-spacing: -0.02em; }
.tool-subtitle { font-size: 1em; color: var(--text-secondary); margin: 0 auto; max-width: 720px; line-height: 1.45; }
h2 { color: var(--primary); border-bottom: 2px solid var(--primary-light); padding-bottom: 12px; margin-top: 0; font-size: 1.1em; letter-spacing: -0.01em; }
h3 { color: var(--primary); margin-top: 0; font-size: 1.05em; letter-spacing: -0.01em; }

/* ── Section containers ─────────────────────────────────────────────────── */
.section-container {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-md);
}
.intro-section p { font-size: 1em; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.section-subtitle { color: var(--text-secondary); font-size: 0.9em; margin: 0 0 14px; line-height: 1.45; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form-section-heading {
    color: var(--primary); font-size: 1.05em; margin: 22px 0 12px;
    padding-bottom: 6px; border-bottom: 1px solid var(--border-color);
}
.form-section-heading:first-child { margin-top: 0; }
.form-section-sub { font-weight: 400; font-size: 0.8em; color: var(--text-secondary); }
.form-section-hint { color: var(--text-secondary); font-size: 0.85em; margin: 0 0 12px; }

.quiz-question { margin-bottom: 18px; }
.quiz-question h2 { font-size: 0.95em; margin-bottom: 2px; border-bottom: none; padding-bottom: 0; }
.optional-tag { color: var(--text-secondary); font-weight: 400; font-size: 0.85em; margin-left: 6px; }
.question-hint { color: var(--text-secondary); font-size: 0.82em; margin: 2px 0 8px 0; line-height: 1.35; }
.va-amount-display { padding: 10px 12px; border: 2px solid var(--green-light); border-radius: var(--radius-md); background: #e6fffa; color: var(--green); font-weight: 800; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.custom-amount { margin-top: 8px; }
.howto-list { margin: 0 0 14px; padding-left: 22px; }
.howto-list li { font-size: 0.92em; color: var(--text-secondary); line-height: 1.5; margin-bottom: 10px; }
.howto-list li strong { color: var(--text-primary); }
.chart-wrap { position: relative; height: 300px; margin: 6px 0 8px; }
.chart-caption { font-size: 0.85em; color: var(--text-secondary); text-align: center; margin: 0 0 14px; }
/* Bracket-fill bar */
.bracket-bar-wrap { margin: 6px 0 4px; }
.bracket-bar { display: flex; height: 30px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); font-size: 0.72em; font-weight: 700; color: #fff; }
.bracket-bar .seg { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.bracket-bar .seg-income { background: var(--text-secondary); }
.bracket-bar .seg-convert { background: var(--green-light); }
.bracket-bar .seg-room { background: #cbd5e0; color: var(--text-secondary); }
.bracket-bar-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78em; color: var(--text-secondary); margin-top: 6px; }
.bracket-bar-legend span::before { content: "■ "; }
.bracket-bar-legend .l-income::before { color: var(--text-secondary); }
.bracket-bar-legend .l-convert::before { color: var(--green-light); }
/* Lifetime-impact stat */
.impact-stat { margin: 12px 0 0; padding: 12px 16px; background: #e6fffa; border: 2px solid var(--green-light); border-radius: var(--radius-md); }
.impact-stat .impact-num { font-size: 1.3em; font-weight: 800; color: var(--green); }
.impact-stat .impact-sub { font-size: 0.82em; color: var(--text-secondary); }
/* "Avoid" option (e.g. cash out) — de-emphasized, not highlighted */
.compare-card.avoid { opacity: 0.6; background: var(--bg-page); border-style: dashed; }
.avoid-tag { display: inline-block; font-size: 0.62em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); border: 1px solid var(--red); border-radius: 10px; padding: 1px 7px; vertical-align: middle; margin-left: 4px; }

.form-row { display: grid; gap: 16px; }
.form-row-2col { grid-template-columns: 1fr 1fr; }
.form-row-3col { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) {
    .form-row-2col, .form-row-3col { grid-template-columns: 1fr; gap: 0; }
}

select, input[type="text"], input[type="email"], input[type="number"] {
    width: 100%; padding: 11px 12px; font-size: 0.95em; font-family: inherit;
    border: 2px solid var(--border-color); border-radius: var(--radius-md);
    background-color: var(--bg-surface); color: var(--text-primary);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
/* Native single dropdown arrow on selects; combo inputs keep their native
   datalist arrow AND allow free typing. No custom chevron (avoids double arrows). */
select { cursor: pointer; }
input[list] { cursor: text; }
select:focus, input:focus { outline: none; border-color: var(--primary-light); background-color: #fff; box-shadow: 0 0 0 3px rgba(43,108,176,0.12); }
.combo-hint { color: var(--text-secondary); font-size: 0.78em; font-style: italic; }

/* ── Option grids (radios as cards) ─────────────────────────────────────── */
.option-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.option-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.option-card {
    position: relative; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 10px 12px; border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm); background-color: var(--bg-surface);
    cursor: pointer; font-size: 0.9em; font-weight: 500; transition: all 0.15s ease;
}
.option-card span { display: flex; flex-direction: column; gap: 2px; }
.option-card small { font-weight: 400; font-size: 0.82em; color: var(--text-secondary); }
.option-card input { position: absolute; opacity: 0; }
.option-card:hover { border-color: var(--primary-light); }
.option-card:has(input:checked) {
    border-color: var(--primary); background-color: #ebf2fb;
    box-shadow: 0 0 0 1px var(--primary);
}
.option-card:has(input:checked) small { color: var(--primary-light); }
.mode-grid .option-card { padding: 14px 12px; }

@media (max-width: 700px) {
    .option-grid, .mode-grid { grid-template-columns: 1fr 1fr; }
}

.advanced-details { margin: 8px 0 4px; border: 1px dashed var(--border-color); border-radius: var(--radius-sm); padding: 8px 14px; }
.advanced-details summary { cursor: pointer; font-weight: 600; font-size: 0.9em; color: var(--primary-light); }
.advanced-details[open] summary { margin-bottom: 12px; }

/* ── Submit ─────────────────────────────────────────────────────────────── */
.submit-row { text-align: center; margin-top: 22px; }
.action-btn {
    background-color: var(--primary); color: var(--text-light); border: none;
    padding: 13px 28px; font-size: 1em; font-weight: 700; border-radius: var(--radius-sm);
    cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease;
}
.action-btn:hover { background-color: var(--primary-light); }
.action-btn:active { transform: translateY(1px); }
.action-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.action-btn-secondary { background-color: var(--bg-surface); color: var(--primary); border: 1.5px solid var(--primary); }
.action-btn-secondary:hover { background-color: #ebf2fb; }
.form-error { color: var(--red); font-size: 0.9em; margin: 10px 0 0; min-height: 1em; }

/* ── Results ────────────────────────────────────────────────────────────── */
.results-title-row { display: flex; justify-content: space-between; align-items: center; }
.retake-btn {
    background: none; border: 1px solid var(--border-color); color: var(--text-secondary);
    padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85em;
}
.retake-btn:hover { border-color: var(--primary-light); color: var(--primary); }

/* Hero answer — the single focal point */
#bottom-line { margin: 18px 0 8px; }
.banner {
    border-radius: var(--radius-md); padding: 26px 28px; margin-bottom: 6px;
    border: 2px solid var(--primary-light); border-left: 8px solid var(--primary);
    background: linear-gradient(135deg, #ebf2fb 0%, #f7fafc 100%);
}
.banner.good { border-color: var(--green-light); border-left-color: var(--green); background: linear-gradient(135deg, #e6fffa 0%, #f7fafc 100%); }
.banner.warn { border-color: var(--warning-border); border-left-color: var(--warning-border); background: var(--warning-bg); }
.banner-eyebrow { font-size: 0.78em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-light); margin: 0 0 6px; }
.banner-headline { font-size: 1.6em; font-weight: 800; color: var(--primary); margin: 0 0 10px; letter-spacing: -0.02em; line-height: 1.2; }
.banner-sub { font-size: 1em; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.banner-next { margin-top: 14px; font-size: 0.95em; font-weight: 600; color: var(--primary); }
.banner-mistake {
    margin-top: 14px; padding: 10px 14px; background: rgba(229,62,62,0.08);
    border-radius: var(--radius-sm); font-size: 0.9em; color: var(--red); font-weight: 600;
}

/* Collapsible secondary result sections (de-emphasized depth) */
.result-details { border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-top: 16px; background: var(--bg-surface); }
.result-details > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--primary); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.result-details > summary::-webkit-details-marker { display: none; }
.result-details > summary::after { content: "▸ tap to expand"; font-weight: 400; font-size: 0.8em; color: var(--text-secondary); }
.result-details[open] > summary::after { content: "▾ tap to collapse"; }
.result-details[open] > summary { border-bottom: 1px solid var(--border-color); }
.result-details .rd-body { padding: 4px 18px 18px; }
.rd-sub { font-size: 0.85em; font-weight: 400; color: var(--text-secondary); }

/* Result blocks */
.result-block { margin-top: 22px; }
.result-block > h3 { font-size: 1.1em; margin-bottom: 10px; }
.block-intro { font-size: 0.88em; color: var(--text-secondary); margin: 0 0 14px; }

/* Needs breakdown */
.needs-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.needs-table td { padding: 7px 4px; border-bottom: 1px solid var(--bg-page); }
.needs-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.needs-table tr.subtract td:last-child { color: var(--green); }
.needs-table tr.total td { border-top: 2px solid var(--primary); border-bottom: none; padding-top: 12px; font-weight: 800; font-size: 1.05em; }
.needs-table tr.total td { color: var(--primary); }

/* Comparison cards */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.compare-card {
    border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
    padding: 16px; background: var(--bg-surface); position: relative;
}
.compare-card.recommended { border-color: var(--green-light); box-shadow: 0 0 0 1px var(--green-light); }
.compare-card.cheapest { border-color: var(--text-secondary); box-shadow: 0 0 0 1px var(--text-secondary); }
.compare-card .ribbon {
    position: absolute; top: -10px; right: 12px; background: var(--green-light); color: #fff;
    font-size: 0.7em; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.03em;
}
.compare-card .ribbon.neutral { background: var(--text-secondary); }
.compare-card h4 { margin: 0 0 4px; color: var(--primary); font-size: 1em; }
.compare-card .price { font-size: 1.5em; font-weight: 800; color: var(--text-primary); }
.compare-card .price small { font-size: 0.5em; font-weight: 500; color: var(--text-secondary); }
.compare-card .note { font-size: 0.82em; color: var(--text-secondary); margin: 8px 0 0; line-height: 1.4; }
.compare-card .unavailable { color: var(--red); font-weight: 700; }

/* Survivor income panel */
.survivor-panel { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: var(--radius-md); padding: 18px; }
.survivor-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(66,153,225,0.2); font-size: 0.92em; }
.survivor-row.total { font-weight: 800; color: var(--primary); border-bottom: none; border-top: 2px solid var(--info-border); margin-top: 6px; padding-top: 10px; }
.survivor-row .amt { font-variant-numeric: tabular-nums; }

/* Rating + info callouts */
.callout { border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 12px; font-size: 0.92em; line-height: 1.5; }
.callout.info { background: var(--info-bg); border-left: 5px solid var(--info-border); }
.callout.good { background: #e6fffa; border-left: 5px solid var(--green-light); }
.callout.warn { background: var(--warning-bg); border-left: 5px solid var(--warning-border); }
.callout strong { color: var(--primary); }

/* Deadline timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
    position: relative; padding: 10px 0 10px 28px; border-left: 2px solid var(--border-color);
    margin-left: 8px; font-size: 0.9em;
}
.timeline li::before {
    content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--border-color);
}
.timeline li.open::before { background: var(--green-light); }
.timeline li.closed::before { background: var(--red); }
.timeline li.pending::before { background: var(--accent-gold); }
.timeline li.closed { color: var(--text-secondary); text-decoration: line-through; }
.timeline .when { font-weight: 700; color: var(--primary); }
.timeline .status-open { color: var(--green); font-weight: 700; }
.timeline .status-closed { color: var(--red); font-weight: 700; }
.timeline .status-pending { color: var(--accent-gold); font-weight: 700; }

/* Warnings list */
.warn-list { list-style: none; padding: 0; margin: 0; }
.warn-list li { padding: 8px 0 8px 26px; position: relative; font-size: 0.9em; line-height: 1.45; border-bottom: 1px solid var(--bg-page); }
.warn-list li::before { content: "⚠️"; position: absolute; left: 0; top: 8px; }

/* ── Email capture ──────────────────────────────────────────────────────── */
.inline-email-capture { background: #ebf2fb; border: 1px solid var(--primary-light); border-radius: var(--radius-md); padding: 16px 18px; margin: 18px 0; }
.inline-email-text { font-size: 0.92em; margin-bottom: 10px; }
.inline-email-row, .email-form-row { display: flex; gap: 10px; }
.inline-email-row input, .email-form-row input {
    flex: 1; padding: 11px 14px; font-size: 0.95em; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.email-results-form { margin-top: 6px; }
.email-status { font-size: 0.85em; margin: 8px 0 0; min-height: 1em; }
.email-status.success { color: var(--green); }
.email-status.error { color: var(--red); }
.input-hint { font-size: 0.78em; color: var(--text-secondary); margin: 6px 0 0; }
@media (max-width: 560px) { .inline-email-row, .email-form-row { flex-direction: column; } }

/* ── Disclosure sections (How it works / FAQ / Sources) ─────────────────── */
.how-it-works-details summary, .faq-item summary, .sources-details summary { cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
.how-it-works-details summary::-webkit-details-marker, .sources-details summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.how-it-works-summary-sub, .sources-summary-sub { font-weight: 400; font-size: 0.82em; color: var(--text-secondary); margin-left: 6px; }
.how-it-works-details p { font-size: 0.92em; color: var(--text-secondary); line-height: 1.6; }
.faq-section h2 { margin-bottom: 14px; }
.faq-item { padding: 12px 0; border-bottom: 1px solid var(--bg-page); }
.faq-item summary { font-size: 0.95em; }
.faq-item p { font-size: 0.9em; color: var(--text-secondary); line-height: 1.55; margin: 10px 0 0; }
.sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 12px; }
.sources-group h3 { font-size: 0.9em; margin-bottom: 6px; }
.sources-group ul { margin: 0; padding-left: 18px; }
.sources-group li { font-size: 0.82em; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.sources-note { font-size: 0.8em; color: var(--text-secondary); font-style: italic; margin-top: 14px; }
a { color: var(--primary-light); }

/* ── More tools + footer ────────────────────────────────────────────────── */
.more-tools {
    background-color: var(--bg-card); border-radius: var(--radius-lg);
    padding: 20px 24px; margin-bottom: 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.more-tools h3 { font-size: 1rem; color: #999; margin-top: 0; margin-bottom: 0.75rem; font-weight: 500; }
.tools-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.tools-links a { color: var(--accent-gold); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.tools-links a:hover { color: #e0c675; text-decoration: underline; }
footer { text-align: center; font-size: 0.8em; color: var(--text-secondary); padding: 20px; line-height: 1.5; }

/* ── Action bar ─────────────────────────────────────────────────────────── */
.action-bar { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .no-print, .home-btn, #mode-fork, #calculator-form, .more-tools, footer,
    #email-results-container, #how-it-works, #faq, #sources { display: none !important; }
    body { padding: 0; max-width: none; }
    .section-container { box-shadow: none; border: 1px solid #ccc; }
    .banner { border: 1px solid #999; }
}