/* Accounts hero (accounts-hero.js): net worth on top, gross investments and Free Cash Flow under it,
   and the net worth panel that opens right below. Loaded after mix-theme.css in the app and the Sandbox. */
.hero-tri{gap:16px!important}
.account-hero>.account-grand-total.hero-tri::before{content:"Your money, in focus."}
.hero-networth,.hero-gross,.hero-fcf,.hero-fcf-static{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-align:center}
.hero-tri small,.hero-fcf .bp-cash-heading{font-family:var(--mix-cond)!important;font-weight:500;letter-spacing:.16em!important;text-transform:uppercase;font-size:11px!important;color:var(--muted)}
.hero-networth-open{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:4px;max-width:100%}
.hero-networth-open:focus-visible,.hero-tri [data-hero-gross]:focus-visible,.hero-fcf .bp-headline:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.hero-networth-value{font-family:var(--mix-mono)!important;font-variant-numeric:tabular-nums;font-weight:300!important;font-size:clamp(48px,7vw,96px)!important;line-height:1!important;letter-spacing:-.04em!important;color:var(--text);white-space:nowrap}
body:not(.light) .hero-networth-value{color:#eafbf2;text-shadow:0 1px 0 #6fae97,0 2px 0 #2c5547,0 0 2px rgba(191,247,220,.6),0 0 30px rgba(95,214,184,.32),0 0 90px rgba(95,214,184,.14)}
body.light .hero-networth-value{text-shadow:0 2px 14px rgba(15,138,79,.10)}
.hero-networth-value.bp-negative{color:var(--danger,#e06c75)!important}
.hero-tri[data-hero-mode="loading"] .hero-networth-value{opacity:.35}
.hero-networth-more{font:500 11px var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--gold) 80%,var(--text))}
.hero-networth-more>span{display:inline-block;transition:transform .2s}
/* Sandbox: ▶ Play mode sits on the Breakdown line, to its right, so the headline stays centered. */
.hero-networth:has(.hero-play){position:relative}
.hero-play.play-mode-btn{position:absolute;left:calc(50% + 62px);bottom:-5px;margin:0;padding:3px 9px;min-height:24px;font-size:10px!important}
.hero-tri.networth-open .hero-networth-more>span{transform:rotate(180deg)}
.hero-networth-open:hover .hero-networth-more{text-decoration:underline;text-underline-offset:3px}

/* Each label is one line, so the two amounts sit level. */
.hero-pair .hero-gross>small,.hero-pair .hero-fcf-static>small,.hero-fcf [data-help-label]{display:block;white-space:nowrap;line-height:14px}
.hero-pair .hero-gross[data-partial]>small{letter-spacing:0!important}
.hero-pair .directory-return-label[hidden]{display:none!important}
.hero-pair .directory-return.performance-unknown>.directory-return-label,.hero-pair .directory-return.performance-unknown>.directory-return-value{display:none!important}
/* The two numbers under net worth: half the size, side by side. */
.hero-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 48px;width:min(780px,100%);align-items:start}
.hero-pair .gross-total-value strong,.hero-pair strong.gross-amount,.hero-fcf .bp-headline{font-family:var(--mix-mono)!important;font-weight:300!important;font-size:clamp(26px,3.2vw,40px)!important;line-height:1.1!important;letter-spacing:-.02em!important}
.hero-pair .gross-total-value{justify-content:center}
.hero-tri [data-hero-gross],.hero-fcf .bp-headline,.hero-fcf .bp-hero{cursor:pointer}
.hero-gross>span:not([class]){display:none}
.hero-pair .directory-return-value{font-size:15px!important}
.hero-pair .directory-return-label{font-size:12px!important}
.hero-finish{all:unset;cursor:pointer;font:500 12px var(--mix-sans);color:color-mix(in srgb,var(--gold) 85%,var(--text));text-decoration:underline;text-underline-offset:3px}
.hero-finish:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Free Cash Flow: the Budget page's own headline, without its chart. */
.hero-fcf #budgetProfile{width:100%;margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important}
:is(body,body.light) .hero-fcf #budgetProfile .bp-flow-card{padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;transform:none!important;backdrop-filter:none!important}
:is(body,body.light) .hero-fcf #budgetProfile .bp-flow-card::before,:is(body,body.light) .hero-fcf #budgetProfile .bp-flow-card::after{display:none!important}
.hero-fcf #budgetProfile :is(.bp-chart,.bp-details,.bp-flow-adjustments,.bp-help-note,.bp-flow-note){display:none!important}
.hero-fcf #budgetProfile .bp-hero{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start;gap:6px!important;padding:0!important;border:0!important}
.hero-fcf #budgetProfile .bp-label{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.hero-fcf .bp-estimate{font:400 12px var(--mix-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--muted)!important;border:0!important;background:none!important;padding:0!important;margin:0!important}
body:not(.light) .hero-fcf .bp-headline{color:#eafbf2;text-shadow:0 0 1px rgba(191,247,220,.35),0 0 28px rgba(95,214,184,.18)}
.hero-fcf .bp-headline.bp-negative{color:var(--danger,#e06c75)!important}
.hero-fcf-static button{font-size:13px}

/* Across your accounts: phones show the bar, and the list opens from a small link. */
.account-distribution-toggle{display:none}

/* Net worth isn't complete yet: gross is the headline, Free Cash Flow under it. */
.hero-tri[data-hero-mode="gross"] .hero-networth{display:none}
.hero-tri[data-hero-mode="gross"] .hero-pair{grid-template-columns:minmax(0,1fr);gap:18px}
.hero-tri[data-hero-mode="gross"] .hero-pair .gross-total-value strong,.hero-tri[data-hero-mode="gross"] .hero-pair strong.gross-amount{font-size:clamp(48px,7vw,96px)!important;line-height:1!important;letter-spacing:-.04em!important}

/* The panel sits right under the hero, above the account bar. */
#content:has(>article.account-home) article.account-home>.networth-panel{order:1}
.networth-panel{position:relative;z-index:1;scroll-margin-top:84px}
.networth-panel [data-nw-own]{scroll-margin-top:84px}
.networth-panel .networth-card{display:block!important;padding:18px 22px!important}
.networth-panel .networth-head{position:relative;margin:0 0 12px;padding-right:96px}
.networth-close{all:unset;position:absolute;right:0;top:0;cursor:pointer;font:500 11px var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border:1px solid var(--border);border-radius:2px}
.networth-close:hover{color:var(--text)}.networth-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.networth-panel .networth-ranges{margin:0 0 10px}
.networth-panel .networth-parts{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.networth-have,.networth-owe{display:flex;flex-wrap:wrap;gap:4px 18px}
.nw-key-asset-debt{background:var(--chart-orange,#e7b37a)}.nw-key-margin{background:var(--chart-pink,#d58fb8)}

/* Small tablets: the range buttons fit their column, as on phones, and stay inside the page. */
@media (min-width:641px) and (max-width:800px){
 .hero-tri:not([data-hero-mode="gross"]) .hero-pair .performance-periods button{padding:3px 6px!important;font-size:11px!important;white-space:nowrap}
}

@media (max-width:640px){
 .hero-tri{gap:12px!important}
 .hero-networth-value{font-size:clamp(40px,12vw,56px)!important}
 .hero-pair{gap:10px 14px}
 .hero-pair .gross-total-value strong,.hero-pair strong.gross-amount,.hero-fcf .bp-headline{font-size:clamp(20px,6vw,26px)!important}
 .hero-tri small,.hero-fcf .bp-cash-heading,.hero-fcf .bp-hero .bp-cash-heading>.folio-help-target,.hero-fcf [data-help-label-text]{font-size:10px!important;letter-spacing:.1em!important}
 /* Phones: all eight time ranges under the gains figure, in two even rows of four. */
 .hero-tri .hero-pair .performance-periods{justify-self:center;max-width:100%;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .hero-tri .hero-pair .performance-periods button{padding:3px 4px!important;font-size:11px!important;white-space:nowrap}
 .hero-pair .directory-return{gap:2px 6px!important}
 .hero-pair .directory-return-value{font-size:13px!important}
 .hero-pair .directory-return-label{font-size:11px!important}
 .hero-fcf .bp-estimate{font-size:11px!important}
 .account-distribution-toggle{all:unset;box-sizing:border-box;display:block;cursor:pointer;margin:2px auto 0;padding:8px 14px;min-height:32px;font:500 11px var(--mix-cond);letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--gold) 85%,var(--text))}
 .account-distribution-toggle>span{display:inline-block;transition:transform .2s}
 .account-distribution-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
 .account-distribution.list-open .account-distribution-toggle>span{transform:rotate(180deg)}
 .account-distribution:not(.list-open) .account-distribution-key{display:none!important}
 .hero-tri[data-hero-mode="gross"] .hero-pair .gross-total-value strong,.hero-tri[data-hero-mode="gross"] .hero-pair strong.gross-amount{font-size:clamp(40px,12vw,56px)!important}
 .networth-panel .networth-card{padding:14px!important}
 .networth-panel .networth-head{padding-right:40px}
 .networth-close{font-size:0!important;padding:6px 9px}.networth-close>span{font-size:13px}
 /* The gains line stacks under the gross figure so it never breaks mid-word. */
 .hero-pair .directory-return{grid-template-columns:minmax(0,auto)!important;justify-items:center}
 .hero-pair .directory-return-label{grid-column:1!important;grid-row:2!important}
}