/* Clearer controls within FinEZ's existing warm palette. Kept out of PDF styling. */
.app{font-family:Inter,system-ui,Arial,sans-serif}
.app .nav-group,.app .baseline-caption,.app .baseline-caption:after,.app .about-kicker,.app .report-sheet .report-label{font-size:12px}
.app .account-shortcuts{margin-top:16px;padding-top:10px;border-top:1px solid #b6a475}
.app .account-shortcut{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:12px 0}
.app .account-shortcut label{display:grid;gap:6px;min-width:0;flex:1 1 220px;font-size:14px;font-weight:600}
.app .account-shortcut select{width:100%;min-width:0;padding:10px;border:1px solid #9c8857;border-radius:8px;background:#fffefa;font-size:16px}
.app .account-shortcut button{max-width:100%;white-space:normal}
.app .savings-ideas{border:1px solid #b8a46e;border-radius:12px;background:#fffaf0;margin:16px 0;overflow:hidden}
.app .available-reference{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px 10px;width:max-content;max-width:100%;margin:0 0 14px;padding:7px 11px;border-left:3px solid #b8a46e;border-radius:5px;background:#f8f5ed;color:#51482f;font-size:13px;line-height:1.35}
.app .available-reference strong{font-size:14px;color:#315f49}
.app .available-reference small{color:#706b5d;font-size:12px}
.app .available-reference.is-shortfall{border-left-color:#b45a50}
.app .available-reference.is-shortfall strong{color:#9c4038}
.app .toolbar.period-switch[role="group"][aria-label$="view"]{width:max-content;max-width:100%;padding:5px;background:#e3edf5;border:1px solid #9cb7cc;border-radius:12px}
.app .toolbar.period-switch[role="group"][aria-label$="view"] button{min-height:42px;padding:9px 16px;border:1px solid transparent;border-radius:9px;font-weight:650}
.app .toolbar.period-switch[role="group"][aria-label$="view"] button.selected{background:#356a9a;color:#fff;box-shadow:0 2px 5px #224f7830}
.app .toolbar.period-switch[role="group"][aria-label$="view"] button:not(.selected):hover{background:#d2e2ee;color:#244b68}
.app .savings-ideas summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;padding:14px;font-weight:700;color:#604b21;background:#eee3c9}
.app .savings-ideas p{margin:14px;line-height:1.55}
.app .savings-ideas ul{padding:0 20px 0 36px;line-height:1.7}
.app button.secondary,.mobile-sheet button.secondary{background:#e9ddb9;color:#493710;border:1px solid #8d753c;box-shadow:0 1px 2px #35290018}
.app button.secondary:hover,.mobile-sheet button.secondary:hover{background:#dfcc95;border-color:#594619}
.app button:focus-visible,.app summary:focus-visible{outline:3px solid #27654d;outline-offset:3px}
.app .info-help{font-size:14px;margin:4px 0}
.app .info-help summary{display:flex;align-items:center;min-height:44px;padding:6px 10px;border:1px solid #9c8857;border-radius:8px;background:#eee4c9;color:#493710;font-weight:600}
.app .info-help summary span{font-size:22px}
.app .account-links:has(.info-help){gap:8px}
.app .account-links .info-help{grid-row:1;grid-column:1/-1}
.app .ideas-guidance summary{border-bottom:1px solid #bba07c;min-height:48px}
.app .ideas-guidance summary>span:first-child{order:-1;display:flex;align-items:center;flex:1 1 230px;min-width:0}
.app .ideas-guidance summary>span:last-child{order:1;flex:0 0 auto;white-space:nowrap}
.app .ideas-guidance{margin-top:16px!important}
.app .frequency-guidance{font-size:14px;line-height:1.5;margin:14px 0 8px}
.app main[data-section='dashboard'] #content>.welcome-card{order:-2}
.app .editor-card>.new{margin-top:8px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #b9aa82}
.app .cash-new{margin:16px 0 24px;padding-bottom:20px;border-bottom:1px solid #c9bc9a}
.app .section-totals{padding:14px 16px;background:#eee6d2;border:1px solid #b5a16c;border-radius:10px;line-height:1.8;color:#403718}
.app .card:has(.compact-total){position:relative}
.app .compact-total{display:flex;align-items:baseline;justify-content:space-between;gap:10px;width:max-content;max-width:calc(100% - 40px);padding:8px 12px;background:#f7f2e6;border:1px solid #c6b98f;border-radius:999px;color:#403718;font-size:13px;line-height:1.25}
.app .compact-total strong{font-size:18px;white-space:nowrap}
.app .section-flow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:14px;margin:24px 0 8px;padding:14px 0 0;border-top:1px solid #d5cdb8}
.app .section-flow button{min-height:40px;padding:9px 14px;box-shadow:none}
.app .flow-back{justify-self:start}.app .flow-forward{justify-self:end;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.app button.flow-back-button,.app button.flow-alternate{background:#efe7d2;color:#4e401d;border:1px solid #9f8c59}
.app button.flow-next{background:#315f49;color:#fff;border:1px solid #214936;font-weight:750}
.app button.flow-next:hover{background:#244a38}
.app button.secondary.report-button,.app button.secondary[onclick="openReport()"],.app button[onclick="downloadReportPdf()"]{background:#356a9a!important;color:#fff!important;border:1px solid #224f78!important;font-weight:750;box-shadow:0 2px 6px #224f7830}
.app button.secondary.report-button:hover,.app button.secondary[onclick="openReport()"]:hover,.app button[onclick="downloadReportPdf()"]:hover{background:#28577f!important}
.app .scenario-edit-top{margin-left:14px;margin-right:10px;background:#315f49;color:#fff;font-weight:750}
.app .allocation-flow{grid-template-columns:1fr 1fr;align-items:start}
.app .allocation-flow .flow-back{grid-column:1}
.app .allocation-flow .flow-forward{grid-column:2;flex-direction:column;align-items:flex-end;justify-self:end}
.app .allocation-flow .flow-forward>button{display:flex;align-items:center;justify-content:center;width:190px;max-width:100%;min-height:44px;text-align:center;line-height:1.25}
.app main[data-mode="example-scenario"],.app main[data-mode="scenario"]{background:#f2eafb;border-radius:18px}
.app main[data-mode="example-scenario"] .banner,.app main[data-mode="scenario"] .banner{background:#eadcf8;border-color:#9a76c4;color:#533879}
.app main[data-mode="example-scenario"] .scenario-toggle,.app main[data-mode="scenario"] .scenario-toggle{border-color:#a98bc8}
.app .start-options{padding:16px;margin:24px 0;background:#f7f2e6;border:1px solid #c6b98f;border-radius:12px}.app .start-options h3{margin-bottom:8px}.app .start-options p{margin:0}
@media(min-width:1100px){.app .card:has(.compact-total)>.compact-total{position:absolute;top:18px;right:20px}.app .card:has(.compact-total)>h3{padding-right:350px}}
.app .scenario-baseline{border:1px solid #b8ad8d;border-radius:10px;padding:12px;margin:16px 0}
.app .scenario-baseline>summary{cursor:pointer;font-weight:700;line-height:1.5;padding:8px 0}
.app .scenario-edits>h4{color:#235c40;margin-bottom:12px}
.app .results-callout{position:static;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:none}
.app .results-callout h3{font-size:16px;margin:0}
.app .results-callout p{display:none}
.app .results-callout .results-primary{font-size:16px;padding:11px 16px}
.app .welcome-card{margin:20px 0;border:2px solid #9b803e}
.app .welcome-card h2{margin-top:0}
.app .example-banner{border:2px solid #a57b2c}
.app .about-page button{margin:6px 6px 6px 0}
@media(max-width:600px){
 .app .ideas-guidance summary{align-items:center!important;flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
 .app .account-balance-copy{min-width:0;width:100%}
 .app .account-summary>button{margin-left:auto}
 .app .compact-total{width:100%;max-width:none;border-radius:10px;padding:10px 12px;margin:12px 0}
 .app .section-flow{gap:8px;margin-top:18px}
 .app .allocation-flow{grid-template-columns:1fr 1fr}
 .app .allocation-flow .flow-back{grid-column:1}
 .app .allocation-flow .flow-forward{grid-column:2;justify-self:end;align-items:flex-end}
 .app .allocation-flow .flow-forward>button{width:100%;min-width:0}
 .app .flow-forward{max-width:72%}
 .app .section-flow button{font-size:14px;padding:8px 10px}
 .app .scenario-baseline{padding:10px}
 .app .results-callout{padding:12px}
 .app .results-callout .results-primary{width:auto!important;min-width:0}
 .app .info-help summary{width:100%;line-height:1.35}
}
.app .account-summary{gap:16px;margin:12px 0 20px;padding:14px 16px;background:#f7f2e6;border:1px solid #d0bf9a;border-radius:12px}
.app .account-balance-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;min-width:250px}
.app .account-balance-label{font-weight:700;color:#493710}
.app .account-balance-copy>strong{font-size:23px;line-height:1.2;color:#252522}
.app .account-balance-copy>small{line-height:1.45}
.app .account-summary>button{flex:none}

/* Period/view choices remain legible without relying on a subtle shadow. */
.app .period-switch{background:#e8dfca;border:1px solid #a58f5b;color-scheme:light}
.app .period-switch button{background:#fffaf0;color:#493710;border:1px solid #b7a375;font-weight:650}
.app .period-switch button.selected{background:#315f49;color:#fff;border:2px solid #214936;box-shadow:0 1px 4px #21493630}
.app .period-switch button:not(.selected):hover{background:#f0e3bd;color:#372807}
.app .period-switch button:focus-visible{outline:3px solid #276b9b;outline-offset:2px}
@media screen and (max-width:850px){
 .app .scenario-edit-top{margin-left:0;margin-right:0}
}
@media screen and (prefers-color-scheme:dark){
 .app .period-switch,.app .toolbar.period-switch[role="group"][aria-label$="view"]{background:#18252d;border-color:#8da2af;color-scheme:dark}
 .app .period-switch button,.app .toolbar.period-switch[role="group"][aria-label$="view"] button{background:#293b47;color:#fff7e6;border:1px solid #91a5b2}
 .app .period-switch button.selected,.app .toolbar.period-switch[role="group"][aria-label$="view"] button.selected{background:#efd58f;color:#24210f;border:2px solid #fff0ba;box-shadow:none}
 .app .period-switch button:not(.selected):hover,.app .toolbar.period-switch[role="group"][aria-label$="view"] button:not(.selected):hover{background:#3b5060;color:#fff}
 .app .period-switch button:focus-visible{outline-color:#8fcaff}
}
