/* "My mix" theme, phase 1: Midnight Luxe sky and gold, Mission Control numbers and labels,
   Lunar Observatory boxes. Loaded last on every page so it layers over the older styles.
   Dark is the default; body.light is the ivory-paper, navy-ink daytime partner. */
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:300;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

/* ---------- colors ---------- */
:root,body{
 --mix-sans:'IBM Plex Sans',system-ui,sans-serif;--mix-cond:'IBM Plex Sans Condensed','IBM Plex Sans',system-ui,sans-serif;--mix-mono:'IBM Plex Mono',ui-monospace,monospace;
 --bg:#05060c;--panel:#0b0b13;--text:#ece6d8;--muted:#a29fae;--border:#22222e;--accent:#d8bd88;
 --gold:#d8bd88;--gold-hi:#efdcb4;--gold-ink:#1a1204;--corner:rgba(216,189,136,.55);--glow:#bff7dc;
 --chart-blue:#9d8cf0;--chart-red:#ff6b7d;--chart-gold:#f0a050;--return-gain:#45e3a0;--return-loss:#ff6b7d;
 --orbit-solid:#d8bd8826;--orbit-soft:#d8bd8814;--orbit-glow:#5fd6b812;
 --mix-sky:radial-gradient(60% 40% at 50% 0,rgba(124,100,236,.30),transparent 74%);
 --mix-lift:none
}
body.light{
 color-scheme:light;
 --bg:#f2eee4;--panel:#fcfbf6;--text:#141b2e;--muted:#5b6274;--border:#e2dbca;--accent:#9a7432;
 --gold:#a98235;--gold-hi:#c9a45a;--gold-ink:#2a1d05;--corner:rgba(169,130,53,.7);--glow:#0f8a4f;
 --chart-blue:#6a55c8;--chart-red:#c62f45;--chart-gold:#c0661a;--return-gain:#0f8a4f;--return-loss:#c62f45;
 --orbit-solid:#14213018;--orbit-soft:#1421300d;--orbit-glow:#a982350d;
 --mix-sky:linear-gradient(180deg,#dfe4ee 0%,#ece9e3 38%,#f1ebdd 72%,#eee3cc 100%);
 --mix-lift:0 1px 2px rgba(20,27,46,.05),0 12px 30px -14px rgba(20,27,46,.16)
}
/* The sky is a band across the top of the page over a solid ground, so long pages and every screen size match. */
html{background:#05060c}
body,body.ambient-ready{background:var(--mix-sky) center top/100% 1500px no-repeat,var(--bg);color:var(--text);font-family:var(--mix-sans);font-variant-numeric:tabular-nums}
html:has(body.light){background:#efe6d4}
body.light,body.light.ambient-ready{background:var(--mix-sky) center top/100% 1500px no-repeat,#efe6d4}

/* ---------- type: Mission Control numbers and labels ---------- */
.gross-amount,.gross-total-value strong,.snapshot-value,.account-value>b,.account-value>strong,.directory-return-value,.budget-value,.metric,.live-budget,
.bi-chart-gain,.bi-return,.account-summary-stats b,.calc-result strong,.mono{font-family:var(--mix-mono)!important;font-variant-numeric:tabular-nums}
.gross-amount,.gross-total-value strong,.snapshot-value,.account-value>b,.account-value>strong,.budget-value{font-weight:300!important;letter-spacing:-.01em!important}
.gross-amount,.gross-total-value strong,.snapshot-value{text-shadow:0 0 1px rgba(191,247,220,.35),0 0 28px rgba(95,214,184,.18)}
body.light .gross-amount,body.light .gross-total-value strong,body.light .snapshot-value{text-shadow:0 2px 14px rgba(15,138,79,.10)}
.eyebrow,.account-value>small,.account-grand-total>small,.account-distribution-title,.directory-return-label,.snapshot-label,.bi-period,.account-summary-stats span,
.lump-zone small:first-child,th{font-family:var(--mix-cond)!important;font-weight:500;letter-spacing:.16em!important;text-transform:uppercase;font-size:11px}
.eyebrow{color:var(--gold)}
/* Section titles: letterspaced capitals after a short gold rule. */
#content article>h2,#content section>h2,.overview-strategy-card h2,.public-guide h2{font-family:var(--mix-cond);font-weight:500;font-size:14px;letter-spacing:.2em;text-transform:uppercase;
 background:linear-gradient(var(--gold),var(--gold)) left center/22px 1px no-repeat;padding-left:34px}

/* ---------- boxes: Lunar Observatory with gold corners ---------- */
article,.overview-strategy-card,.account-entry.account-card,.account-hero,.account-small-stack,.lump-zone,.reserve-function,.calc-controls section,.loan-controls section,.lr-card,.landing-cta-final{
 border-radius:2px!important;border-color:var(--border)!important;background-color:var(--panel);box-shadow:var(--mix-lift);
 background-image:linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner))!important;
 background-size:10px 1px,1px 10px,10px 1px,1px 10px!important;background-position:left top,left top,right bottom,right bottom!important;
 background-repeat:no-repeat!important;background-origin:border-box!important}
body:not(.light) :is(article:not(.account-home),.overview-strategy-card,.account-entry.account-card,.account-hero,.lr-card,.landing-cta-final){background-color:rgba(9,9,16,.82)}
/* Page wrappers are not boxes. */
article.account-home,article.account-directory,body.light article.account-home,body.light article.account-directory{background:none!important;background-color:transparent!important;border:0!important;box-shadow:none!important;padding-left:0;padding-right:0}
body.light :is(article:not(.account-home),.overview-strategy-card,.account-entry.account-card,.account-hero){background-color:var(--panel)!important}
/* Inner boxes sit flat inside their card. */
:is(article,.overview-strategy-card) :is(.lump-zone,.reserve-function){background-color:transparent;box-shadow:none}
.account-entry.account-card:hover{border-color:color-mix(in srgb,var(--gold) 40%,var(--border))!important}

/* ---------- controls ---------- */
button,input,select,textarea{border-radius:2px!important}
input,select,textarea{border-color:var(--border);background-color:color-mix(in srgb,var(--panel) 70%,var(--bg))}
input[type=number],input[inputmode=decimal],input[inputmode=numeric]{font-family:var(--mix-mono)}
header button,.public-btn,.landing-btn,.review-clear,.lump-sim button,.strategy-settings button{font-family:var(--mix-cond);font-weight:500;letter-spacing:.08em;background:transparent;
 border:1px solid color-mix(in srgb,var(--gold) 30%,transparent);color:var(--text)}
header button:hover,.public-btn:hover,.landing-btn:hover{border-color:var(--gold)}
.public-btn-primary,.landing-btn-primary,.loan-primary,button.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;border-color:var(--gold)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
/* Period pickers: one segmented strip in mono, the chosen period a gold tab. */
.performance-periods,.bi-chart-tabs{display:inline-flex;gap:0;border:1px solid color-mix(in srgb,var(--gold) 22%,var(--border));border-radius:2px;background:color-mix(in srgb,var(--bg) 50%,transparent);width:max-content;max-width:100%;overflow-x:auto}
.performance-periods button,.bi-chart-tabs .bi-tab{font-family:var(--mix-mono)!important;font-weight:400!important;font-size:12px!important;color:var(--muted)!important;background:transparent!important;
 border:0!important;border-left:1px solid var(--border)!important;border-radius:0!important;padding:0 11px!important;min-height:32px}
.performance-periods button:first-child,.bi-chart-tabs .bi-tab:first-child{border-left:0!important}
.performance-periods button[aria-pressed=true],.bi-chart-tabs .bi-tab.active{color:var(--gold-ink)!important;background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.bi-chart-tabs .bi-tab.active::after{display:none}

/* ---------- navigation and header ---------- */
nav button,nav a{font-family:var(--mix-cond)!important;font-weight:500;font-size:12px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
nav button.active,nav a[aria-current=page],body.signed-in nav button.active{color:var(--gold-hi)!important;border-bottom-color:var(--gold)!important;background:transparent!important}
body.light nav button.active,body.light nav a[aria-current=page]{color:var(--text)!important}
header .brand strong{font-family:var(--mix-mono);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
header .brand span{font-family:var(--mix-cond);letter-spacing:.2em;text-transform:uppercase;font-size:10px}
body:not(.light)>header{background:rgba(5,6,12,.55);backdrop-filter:blur(6px);border-color:var(--border);color:var(--text)}
body.light>header{background:linear-gradient(180deg,#132648,#172d55)!important;border-color:rgba(214,179,108,.55)!important;color:#efe7d4!important}
body.light>header .brand span{color:#d6b36c}
body.signed-in nav{border-radius:0!important}
/* Sign in: a gold outline in both themes, like the buttons beside it. */
body:not(.light)>header :is(.public-actions .public-btn:not(.public-btn-primary),.signin-menu-btn){background:transparent;color:var(--text);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
body:not(.light)>header :is(.public-actions .public-btn:not(.public-btn-primary),.signin-menu-btn):hover{border-color:var(--gold)}

/* ---------- sky: aurora bands and stars (the old orbit swooshes are replaced) ---------- */
/* Public pages load neither account-style.css nor lump-preview.css, which hold the base of this layer. */
body.ambient-ready{isolation:isolate}
body.ambient-ready:before{content:"";position:fixed;z-index:-1;pointer-events:none}
body.ambient-ready:before{inset:0!important;animation:none!important;opacity:1!important;
 background:
  radial-gradient(1px 1px at 8% 12%,rgba(255,255,255,.75),transparent 70%),radial-gradient(1px 1px at 23% 31%,rgba(255,255,255,.5),transparent 70%),
  radial-gradient(1.4px 1.4px at 37% 9%,rgba(255,244,220,.8),transparent 70%),radial-gradient(1px 1px at 52% 24%,rgba(255,255,255,.45),transparent 70%),
  radial-gradient(1px 1px at 66% 14%,rgba(255,255,255,.6),transparent 70%),radial-gradient(1.4px 1.4px at 81% 28%,rgba(255,244,220,.7),transparent 70%),
  radial-gradient(1px 1px at 93% 7%,rgba(255,255,255,.55),transparent 70%),radial-gradient(1px 1px at 14% 47%,rgba(255,255,255,.35),transparent 70%),
  radial-gradient(1px 1px at 44% 41%,rgba(255,255,255,.4),transparent 70%),radial-gradient(1px 1px at 72% 45%,rgba(255,255,255,.35),transparent 70%),
  radial-gradient(1px 1px at 88% 52%,rgba(255,255,255,.3),transparent 70%),radial-gradient(1px 1px at 31% 63%,rgba(255,255,255,.25),transparent 70%),
  radial-gradient(30% 30% at 50% 0,rgba(242,214,156,.34),transparent 74%),radial-gradient(48% 58% at 50% 0,rgba(124,100,236,.60),transparent 74%),
  radial-gradient(75% 80% at 50% 0,rgba(36,150,138,.38),transparent 76%),radial-gradient(110% 100% at 50% 0,rgba(70,56,160,.26),transparent 80%),var(--bg)!important;
 animation:aura-breathe 14s ease-in-out infinite alternate!important}
/* The aura slowly breathes; the page underneath is plain so it only dims, never shows bands. */
@keyframes aura-breathe{from{opacity:.86}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.ambient-ready:before{animation:none!important}}
body.light.ambient-ready:before{background:
  radial-gradient(1.2px 1.2px at 9% 14%,rgba(20,27,46,.28),transparent 70%),radial-gradient(1.2px 1.2px at 27% 33%,rgba(20,27,46,.22),transparent 70%),
  radial-gradient(1.2px 1.2px at 63% 12%,rgba(20,27,46,.25),transparent 70%),radial-gradient(1.2px 1.2px at 84% 30%,rgba(20,27,46,.22),transparent 70%),
  radial-gradient(1.2px 1.2px at 47% 44%,rgba(20,27,46,.18),transparent 70%),
  linear-gradient(180deg,#dde3ee 0%,#ebe8e2 36%,#f1ebdd 70%,#eee2c9 100%)!important}
body.ambient-ready>header:before{display:none}

/* ---------- Accounts home: centered total in a moon ring, three boxes, simpler cards ---------- */
article.account-home{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:stretch}
article.account-home>*{grid-column:1/-1;min-width:0;margin:0}
article.account-home>.account-hero{display:contents}
.account-hero>.account-grand-total{grid-column:1/-1;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:46px 0 26px;min-width:0}
.account-hero>.account-grand-total::before{content:"Your portfolio, in focus.";order:-1;font:500 14px var(--mix-cond);letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 82%,var(--gold));
 padding:0 42px;background:linear-gradient(var(--gold),var(--gold)) left center/28px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) right center/28px 1px no-repeat}
/* The moon: a thin ring, a dotted inner ring and a softly lit half. */
.account-hero>.account-grand-total::after{content:"";position:absolute;z-index:-1;left:50%;top:-30px;width:min(560px,92vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
 border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
 background:linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--gold) 3.5%,transparent) 50%);
 box-shadow:inset 0 0 0 24px transparent,inset 0 0 0 25px color-mix(in srgb,var(--gold) 9%,transparent)}
.account-hero:before,.account-hero:after{display:none!important}
/* The page title moves into the moon on Accounts home. */
body:has(article.account-home)>header h1{display:none}
.account-grand-total>small{font-size:11px}
.account-grand-total .gross-total-value strong,.account-grand-total>strong.gross-amount{font-size:clamp(52px,8.4vw,112px)!important;line-height:1!important;letter-spacing:-.04em!important;color:var(--text)}
body:not(.light) .account-grand-total .gross-total-value strong,body:not(.light) .account-grand-total>strong.gross-amount{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)}
.account-grand-total>span:not([class]){display:none}
.account-grand-total .directory-return{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:8px 12px;margin:0}
.account-grand-total .directory-return-value{grid-column:1;grid-row:1;font-size:18px!important;font-weight:500}
body:not(.light) .account-grand-total .directory-return.performance-gain .directory-return-value{text-shadow:0 0 16px rgba(61,255,168,.25)}
.account-grand-total .directory-return-label{grid-column:2;grid-row:1;text-transform:none!important;letter-spacing:0!important;font:400 13px var(--mix-sans)!important;color:var(--muted)}
.account-grand-total .performance-periods{grid-column:1/-1;justify-self:center;margin-top:4px}
.account-grand-total .combined-composition,.account-grand-total .bi-split{width:100%;max-width:620px;margin:8px auto 0}
/* Three boxes under the total. */
.account-hero>.account-summary-stats,.account-hero>.account-budget-flow,article.account-home>.account-distribution{position:relative;border:1px solid var(--border);border-radius:2px;padding:20px 24px;margin:0;
 background-color:var(--panel);box-shadow:var(--mix-lift);
 background-image:linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner));
 background-size:10px 1px,1px 10px,10px 1px,1px 10px;background-position:left top,left top,right bottom,right bottom;background-repeat:no-repeat;background-origin:border-box}
body:not(.light) :is(.account-summary-stats,.account-budget-flow,.account-distribution){background-color:rgba(9,9,16,.82)}
.account-hero>.account-summary-stats{grid-column:span 3;display:flex;flex-direction:column;justify-content:center;gap:0;border-left:1px solid var(--border)}
.account-hero>.account-budget-flow{grid-column:1/-1;min-height:0}

.account-summary-stats>div{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border:0!important;border-bottom:1px solid var(--border)!important;min-width:0;width:100%;text-align:left;box-sizing:border-box}
.account-summary-stats>div>span{white-space:nowrap}
.account-summary-stats>div:last-child{border-bottom:0!important}
.account-summary-stats>div>span{text-transform:none!important;letter-spacing:0!important;font:400 14px var(--mix-sans)!important;color:var(--muted)}
.account-summary-stats>div>b{font-size:30px!important;font-weight:300!important}
.account-distribution-title{font-size:11px}
/* Section heading and the account cards. */
.account-list-heading h3{font:500 15px var(--mix-cond);letter-spacing:.22em;text-transform:uppercase;padding-left:42px;background:linear-gradient(var(--gold),var(--gold)) left center/28px 1px no-repeat}
.account-entry.account-card:before{display:none}
.account-entry.account-card{border-color:var(--border)!important}
.account-entry.account-card .account-value>b,.account-entry.account-card .account-value>strong{font-size:clamp(34px,3.4vw,46px)!important;line-height:1.05}
body:not(.light) .account-entry.account-card .account-value>b{color:#f3ead8;text-shadow:0 1px 0 #6b5a3a,0 0 20px rgba(216,189,136,.16)}
@media (max-width:900px){
 .account-hero>.account-summary-stats,.account-hero>.account-budget-flow,article.account-home>.account-distribution,article.account-home:not(:has(.account-budget-flow))>.account-distribution{grid-column:1/-1}
}

/* ---------- header: half-moon logo, FOLIO/VIP, tabs centered in the same bar ---------- */
header .brand{display:grid!important;grid-template-columns:auto auto;grid-auto-flow:column;justify-content:start;align-items:center;column-gap:12px;row-gap:3px}
header .brand::before{content:"";grid-row:1/span 2;width:26px;height:26px;border-radius:50%;box-sizing:border-box;
 border:1.5px solid color-mix(in srgb,var(--gold) 55%,transparent);background:linear-gradient(90deg,transparent 50%,var(--gold) 50%)}
header .brand>strong{grid-column:2;grid-row:1;font-size:18px!important;font-weight:500!important;letter-spacing:.08em!important;line-height:1}
header .brand>span{grid-column:2;grid-row:2;font-size:9px!important;letter-spacing:.28em!important;line-height:1}
header .brand .brand-slash{color:#5fd6b8;margin:0 .02em;font-family:inherit;font-size:inherit!important;letter-spacing:0!important;text-transform:none}
body.light header .brand .brand-slash{color:#0f8a4f}
header .brand>.holiday-badge{grid-row:1/span 2}
@media (min-width:1000px){
 /* One top bar: the tab strip stays fixed and centered; brand and buttons sit at its two ends. */
 body.signed-in{padding-top:0!important}
 body.signed-in nav{height:64px!important;padding:0 12px!important;align-items:center!important;background:rgba(5,6,12,.62)!important;backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--gold) 14%,transparent)!important;
  grid-template-columns:1fr auto 1fr}
 body.light.signed-in nav{background:linear-gradient(180deg,#132648,#172d55)!important;border-bottom-color:rgba(214,179,108,.55)!important}
 body.signed-in nav button{min-height:64px!important;padding:0 16px!important;border-bottom-width:1px!important}
 body.signed-in>header{position:relative;z-index:31;pointer-events:none;background:transparent!important;border:0!important;backdrop-filter:none!important;
  grid-template-rows:64px auto;row-gap:0!important;padding:0 24px 10px!important}
 body.signed-in>header>*{pointer-events:auto}
 body.signed-in>header #title{grid-row:2!important;grid-column:1/-1!important;justify-self:start;text-align:left;margin:14px 0 0}
 body.signed-in>header .brand{grid-row:1}
 body.signed-in>header :is(#theme,#logout,#connectionsLink,#lofiToggle,.public-actions){grid-row:1!important;align-self:center}
 body.signed-in>header::before{display:none}
}

/* ---------- account Overview ---------- */
/* Card titles: letterspaced capitals after a short gold rule. */
#content :is(h2,h3).folio-help-target:not(.calc-controls h3):not(:is(.calc-heading,.loan-heading) h2),#content .lump-row-heading h3,#content #sandboxLab>h3{font-family:var(--mix-cond)!important;font-weight:500!important;font-size:14px!important;letter-spacing:.2em;text-transform:uppercase;
 padding-left:34px;background:linear-gradient(var(--gold),var(--gold)) left center/22px 1px no-repeat}
/* Big numbers in mono, ink colored; gains keep their green and red. */
.snapshot-performance .snapshot-value{font-size:clamp(40px,4.2vw,60px)!important;line-height:1.05}
.snapshot-margin .snapshot-value{color:var(--text)!important;font-size:clamp(32px,3vw,42px)!important}
@media (min-width:761px) and (max-width:1066px){.snapshot-margin[data-margin-display-state=unavailable] .snapshot-value{font-size:clamp(22px,3vw,32px)!important}}
.snapshot-margin>.snapshot-label,.snapshot-performance>.snapshot-label{font:500 11px var(--mix-cond)!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--muted)!important}
.dip-summary .budget-value,.inline-dip-budget .budget-value,.reserve-budget-heading .budget-value{color:var(--text)!important;text-shadow:none!important;font-size:clamp(28px,2.6vw,36px)!important}
body:not(.light) .snapshot-performance .snapshot-value{text-shadow:0 0 1px rgba(191,247,220,.4),0 0 26px rgba(95,214,184,.2)}
/* Margin gauge: the percent in light mono ink, its caption as a small label. */
:is(.margin-gauge-number,.dial-percent){font-family:var(--mix-mono)!important;font-weight:300!important;fill:var(--text)!important}
:is(.margin-gauge-label,.dial-health-label){font-family:var(--mix-cond)!important;font-weight:500!important;letter-spacing:.16em;text-transform:uppercase;font-size:11px!important;fill:var(--muted)!important}
.margin-gauge-end{font-family:var(--mix-mono)!important;fill:var(--muted)!important}
/* Holdings tiles: soft tints of each holding's color with ink text and a hairline edge. */
.allocation-segment{background-image:linear-gradient(color-mix(in srgb,var(--panel) 74%,transparent),color-mix(in srgb,var(--panel) 74%,transparent))!important;
 color:var(--text)!important;border:1px solid color-mix(in srgb,var(--text) 10%,transparent)!important;border-radius:2px!important;box-shadow:none!important}
.allocation-segment,.allocation-segment *{color:var(--text)!important;text-shadow:none!important;opacity:1!important}
.allocation-segment b{font-family:var(--mix-mono);font-weight:500!important}
/* Dip levels: thin gold rings with mono figures. */
.lump-circle{font-family:var(--mix-mono)!important;font-weight:400!important;color:var(--text)!important;border:1px solid color-mix(in srgb,var(--zone,var(--gold)) 70%,transparent)!important;
 background:transparent!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--zone,var(--gold)) 8%,transparent)!important}
.lump-circle small{font-family:var(--mix-cond)!important;letter-spacing:.08em;font-size:8px!important;line-height:1.1;text-align:center}
.lump-circle{flex-shrink:0;min-width:44px;min-height:44px;font-size:13px!important;text-align:center;line-height:1.1;padding:2px}
/* Secondary actions: small uppercase buttons with a gold outline. */
#content :is(.review-clear,.purchase-check button,#refreshPortfolio,.strategy-actions button,.holding-details-toggle){font:500 11px var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;
 background:transparent!important;color:color-mix(in srgb,var(--gold) 80%,var(--text))!important;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)!important;border-radius:2px!important;padding:8px 14px!important}
#content :is(.review-clear,.purchase-check button,#refreshPortfolio,.strategy-actions button):hover{border-color:var(--gold)!important}

/* ---------- Strategies ---------- */
/* Each strategy is a flat section inside the card, split by a hairline, not a tinted box. */
#accountStrategySettings>section,#lumpConfig>.strategy-settings{background:transparent!important;border:0!important;border-top:1px solid var(--border)!important;border-radius:0!important;padding:22px 0!important;margin:0!important}
#lumpConfig>.strategy-settings:first-of-type,#accountStrategySettings>section:first-of-type{border-top:0!important;padding-top:6px!important}
.strategy-settings-heading h3,.strategy-settings>h3{font:600 17px var(--mix-sans)!important}
.strategy-holdings{border:0!important;padding:0!important;margin:6px 0 10px!important}
.strategy-holdings>legend,.slider-group>legend{font:500 11px var(--mix-cond)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)!important;padding:0}
.lump-symbols label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);padding:6px 10px;font:500 12px var(--mix-mono);border-radius:2px}
#content input[type=checkbox]{accent-color:var(--gold)}
/* Sliders: a gold fill and a white thumb with a gold ring. */
.percent-rail{height:4px!important;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 55%,transparent) 0%,var(--gold) var(--percent-fill,0%),color-mix(in srgb,var(--text) 12%,transparent) var(--percent-fill,0%))!important;box-shadow:none!important}
.percent-rail:focus-within,.percent-rail:hover{box-shadow:0 0 14px color-mix(in srgb,var(--gold) 35%,transparent)!important}
.percent-control .percent-rail input[type=range]{top:-12px!important}
.percent-rail input::-webkit-slider-thumb{width:18px!important;height:18px!important;margin-top:-7px!important;border:2px solid var(--gold)!important;background:#fffdf6!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 16%,transparent),0 2px 6px rgba(0,0,0,.25)!important}
.percent-rail input::-moz-range-thumb{border:2px solid var(--gold)!important;background:#fffdf6!important}
.percent-readout,.percent-control:not(.percent-slider){font-family:var(--mix-mono)!important;border-radius:2px!important}
/* Allocation summary: label, check line, one big ink figure, then the breakdown. */
.allocation-calculator{background:transparent!important;border:1px solid var(--border)!important;border-radius:2px!important;padding:20px 22px!important;text-align:left!important;justify-items:start}
.allocation-calculator h3{font:500 11px var(--mix-cond)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)!important;margin:0}
.allocation-calculator .allocation-sum{font-family:var(--mix-mono)}
.allocation-calculator strong{font-family:var(--mix-mono)!important;font-weight:300!important;font-size:clamp(36px,3.6vw,52px)!important;color:var(--text)!important;line-height:1.1}
body:not(.light) .allocation-calculator strong{text-shadow:0 0 24px rgba(95,214,184,.18)}
.allocation-calculator dl{width:100%}
.allocation-calculator dd{font-family:var(--mix-mono);color:var(--text)!important}
/* The main save action is the one gold button. */
#applyStrategySettings,#saveStrategySettings,form#lumpConfig>button[type=submit]{background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;border:1px solid var(--gold)!important;
 font:600 12px var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;padding:11px 20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
.custom-strategy-actions button,.strategy-holdings button{font:500 11px var(--mix-cond)!important;letter-spacing:.1em;text-transform:uppercase;background:transparent!important;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)!important;color:color-mix(in srgb,var(--gold) 80%,var(--text))!important}

/* ---------- Budget ---------- */
/* Free cash flow leads: a small label, then one big ink figure with an EST tag. */
.bp-hero .bp-cash-heading{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:6px 12px}
.bp-hero .bp-cash-heading>.folio-help-target{flex:1 0 100%;font:500 11px var(--mix-cond)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bp-hero .bp-headline{font-family:var(--mix-mono)!important;font-weight:300!important;font-size:clamp(48px,6vw,84px)!important;line-height:1!important;letter-spacing:-.03em;color:var(--text)!important}
body:not(.light) .bp-hero .bp-headline{text-shadow:0 1px 0 #6fae97,0 0 2px rgba(191,247,220,.5),0 0 30px rgba(95,214,184,.26)!important}
.bp-hero .bp-estimate{font:500 10px var(--mix-mono)!important;letter-spacing:.08em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);color:var(--gold)!important;padding:3px 6px;border-radius:2px;margin-bottom:8px;background:transparent!important}
:is(.bp-flow-desktop,.bp-flow-mobile) text{font-family:var(--mix-sans)!important}
:is(.bp-flow-desktop,.bp-flow-mobile) :is(.bp-svg-value,.bp-svg-total,[class*=value],[class*=amount]){font-family:var(--mix-mono)!important}
:is(.bp-flow-desktop,.bp-flow-mobile) .bp-svg-kicker{font-family:var(--mix-cond)!important;letter-spacing:.16em}
body.light #budgetProfile .bp-cash-positive{color:var(--return-gain)!important}
#budgetProfile .bp-cash-positive{font-family:var(--mix-mono)}
/* Section and panel titles. */
#budgetProfile :is(h3.folio-help-target,.bp-try-change>summary,.bp-details-heading,details.bp-profile>summary,.bp-transaction-history>summary),.bp-plan-top h3{font-family:var(--mix-cond)!important;font-weight:500!important;font-size:14px!important;letter-spacing:.2em;text-transform:uppercase}
#budgetProfile :is(h3.folio-help-target,.bp-try-change>summary,.bp-details-heading),.bp-plan-top h3{padding-left:34px;background:linear-gradient(var(--gold),var(--gold)) left center/22px 1px no-repeat}
.bp-try-change>summary{list-style:none}.bp-try-change>summary::-webkit-details-marker{display:none}
#budgetProfile .bp-control-title label{font-weight:400!important;color:var(--muted)}
/* Allocation presets: outlined gold, the chosen one filled. */
.bp-allocation-presets{gap:8px!important}
.bp-allocation-presets button{font:600 11px var(--mix-cond)!important;letter-spacing:.14em;text-transform:uppercase;background:transparent!important;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent)!important;color:color-mix(in srgb,var(--gold) 80%,var(--text))!important;padding:9px 14px!important;border-radius:2px!important}
.bp-allocation-presets button:is([aria-pressed=true],.active,.selected){background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;border-color:var(--gold)!important}
#budgetProfile .bp-plan-actions button,#budgetProfile .bp-control-actions button{font:500 11px var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;background:transparent!important;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)!important;color:color-mix(in srgb,var(--gold) 80%,var(--text))!important;border-radius:2px!important;padding:8px 14px!important}
#budgetProfile input[type=range]{accent-color:var(--gold)}
#budgetProfile .bp-plan-amounts strong,#budgetProfile .bp-upcoming strong,#budgetProfile dd{font-family:var(--mix-mono)}

/* ---------- remaining pages ---------- */
/* The older blue orbit arcs behind headers give way to the new sky. */
body>header:before{display:none!important}
/* Activity: one event per row in a single list rather than a box each. */
#content>article:has(>small:first-child+p:last-child){display:grid;grid-template-columns:200px 1fr;align-items:baseline;gap:4px 18px;margin:0!important;padding:14px 24px!important;
 box-shadow:none!important;background-image:none!important;border-top-width:0!important}
#content>article:not(:has(>small:first-child+p:last-child))+article:has(>small:first-child+p:last-child){border-top-width:1px!important;margin-top:18px!important}
#content>article:has(>small:first-child+p:last-child)>small{font-family:var(--mix-mono);font-size:12px}
#content>article:has(>small:first-child+p:last-child)>p{margin:0;color:var(--text)}
#content>article:has(>h2:only-child),#content>article:has(>h2:first-child):has(+article>small:first-child){margin-bottom:0!important}
@media (max-width:560px){#content>article:has(>small:first-child+p:last-child){grid-template-columns:1fr}}
/* Calculators: results in light mono like the rest of the site. */
:is(#loanHeadValue,#calcEquity,#calcCushion strong){font-family:var(--mix-mono)!important;font-weight:300!important;letter-spacing:-.02em}
:is(#loanHeadValue,#calcEquity){font-size:clamp(40px,4.4vw,58px)!important;line-height:1.05}
.loan-headline~div strong,.calc-results strong,.calc-more strong,.calc-result-grid strong,.loan-summary strong{font-family:var(--mix-mono)!important;font-weight:400!important}
.calc-presets button,.loan-schedule-head button,.loan-view button{font:500 11px var(--mix-cond)!important;letter-spacing:.1em;text-transform:uppercase;border-radius:2px!important}
/* Square corners everywhere the old rounded cards remain. */
:is(.landing-tool,.landing-shot,.landing-feature,.public-guide-grid>section,.public-guide-grid>div,.loan-special,.loan-view,.calc-presets,.allocation-calculator,.exposure-stats>div,.overlap-detail,#priceReadout,.visitor-feedback-list li,.watchlist-chips>span,.account-small-stack,.public-cross,.public-hero){border-radius:2px!important}
.landing-shot img,.landing-tool img{border-radius:0!important}
.landing h2,#landingToolsHeading,#landingFeaturesHeading{font:500 15px var(--mix-cond)!important;letter-spacing:.22em;text-transform:uppercase;padding-left:42px;background:linear-gradient(var(--gold),var(--gold)) left center/28px 1px no-repeat}
.landing h1{font-family:var(--mix-sans);font-weight:500;letter-spacing:-.02em}

/* ---------- holidays: the season's color takes over the gold accents ---------- */
html[data-holiday] header .brand .brand-slash{color:var(--hero-glow)!important}
html[data-holiday] .account-hero>.account-grand-total::before{background:linear-gradient(var(--hero-glow),var(--hero-glow)) left center/28px 1px no-repeat,linear-gradient(var(--hero-glow),var(--hero-glow)) right center/28px 1px no-repeat}
html[data-holiday] .account-hero>.account-grand-total::after{border-color:color-mix(in srgb,var(--hero-glow) 32%,transparent);
 background:radial-gradient(closest-side,color-mix(in srgb,var(--hero-glow) 9%,transparent),transparent 70%),linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--hero-glow) 5%,transparent) 50%)}
html[data-holiday] body:not(.light) .account-grand-total .gross-total-value strong{text-shadow:0 1px 0 color-mix(in srgb,var(--hero-glow) 70%,#000),0 0 2px color-mix(in srgb,var(--hero-glow) 60%,transparent),0 0 30px color-mix(in srgb,var(--hero-glow) 34%,transparent),0 0 90px color-mix(in srgb,var(--hero-glow-2,var(--hero-glow)) 18%,transparent)!important}
html[data-holiday] body.light .account-grand-total .gross-total-value strong{text-shadow:0 2px 16px color-mix(in srgb,var(--hero-glow) 22%,transparent)!important}
html[data-holiday] :is(.performance-periods button[aria-pressed=true],.bi-chart-tabs .bi-tab.active,.bp-allocation-presets button[aria-pressed=true]){background:linear-gradient(180deg,color-mix(in srgb,var(--hero-glow) 55%,#fff),var(--hero-glow))!important;color:#1a0d02!important}
html[data-holiday] body.signed-in nav button.active,html[data-holiday] nav button.active{border-bottom-color:var(--hero-glow)!important}
html[data-holiday] :is(#content :is(h2,h3).folio-help-target:not(.calc-controls h3):not(:is(.calc-heading,.loan-heading) h2),.account-list-heading h3,#budgetProfile h3.folio-help-target,.bp-plan-top h3){background-image:linear-gradient(var(--hero-glow),var(--hero-glow))!important}
html[data-holiday] .account-hero>.account-budget-flow{border-color:color-mix(in srgb,var(--hero-glow) 40%,var(--border))!important}

/* ---------- phones and tablets: the header stacks (logo, then the buttons, then the page title) ---------- */
@media (max-width:999px){
 body>header{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px!important}
 body>header>.brand{flex:1 1 100%;min-width:0}
 body>header>:is(#lofiToggle,#connectionsLink,#theme,#logout,.public-actions,.lofi-toggle){flex:0 1 auto;min-width:0;grid-column:auto!important;grid-row:auto!important}
 body>header>:is(#lofiToggle,#connectionsLink,#theme,#logout){font-size:12px!important;padding:7px 10px!important;min-height:36px;white-space:nowrap}
 body>header>#title{flex:1 1 100%;grid-column:auto!important;grid-row:auto!important;margin:4px 0 0!important}
}
/* Tablets: the logo row on top, then the tabs, then the page title. The tabs stay pinned: as the 64px logo row scrolls
   away they rise to the top of the screen (--tabs-lift, account-ui.js). The header's ::after holds their place. */
@media (min-width:641px) and (max-width:999px){
 body.signed-in{padding-top:0!important}
 body.signed-in nav{top:max(0px,calc(64px - var(--tabs-lift,0px)))!important;border-radius:0!important}
 body.signed-in>header{padding-top:0!important;padding-bottom:0!important;row-gap:0!important}
 body.signed-in>header>.brand{min-height:64px;align-content:center}
 body.signed-in:not(.play-mode)>header::after{content:"";order:1;flex:1 1 100%;height:46px}
 body.signed-in>header>#title{order:2;margin:12px 0 10px!important}
}

/* ---------- Accounts home extras: net worth, setup, weekly summary, since your last visit ---------- */
:is(.networth-card,.setup-card,.weekly-summary,.since-visit){border-radius:2px!important;border-color:var(--border)!important;background-color:var(--panel)!important;box-shadow:var(--mix-lift);
 background-image:linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner)),linear-gradient(var(--corner),var(--corner))!important;
 background-size:10px 1px,1px 10px,10px 1px,1px 10px!important;background-position:left top,left top,right bottom,right bottom!important;background-repeat:no-repeat!important;background-origin:border-box!important}
body:not(.light) :is(.networth-card,.setup-card,.weekly-summary,.since-visit){background-color:rgba(9,9,16,.82)!important}
.networth-value{font-family:var(--mix-mono)!important;font-weight:300!important;font-size:clamp(30px,3.4vw,44px)!important;letter-spacing:-.02em}
body:not(.light) .networth-value{text-shadow:0 0 22px rgba(95,214,184,.18)}
.networth-change,.networth-parts b,.nw-own-nums b,.nw-own-nums strong,.since-visit-item b{font-family:var(--mix-mono)!important;font-weight:400!important}
.networth-ranges{border-radius:2px!important;padding:0!important;gap:0!important;border-color:color-mix(in srgb,var(--gold) 22%,var(--border))!important}
.networth-ranges button{font-family:var(--mix-mono)!important;font-size:12px!important;border-radius:0!important;border-left:1px solid var(--border)!important;padding:6px 12px!important}
.networth-ranges button:first-child{border-left:0!important}
.networth-ranges button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;font-weight:500!important}
html[data-holiday] .networth-ranges button[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-glow) 55%,#fff),var(--hero-glow))!important;color:#1a0d02!important}
:is(.nw-own-add,.nw-own-actions button,.setup-go,.setup-skip,.weekly-toggle){border-radius:2px!important;font:500 11px var(--mix-cond)!important;letter-spacing:.1em;text-transform:uppercase}
.nw-own-head h3,.setup-head h3{font:500 14px var(--mix-cond)!important;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Accounts home order: total first, then the accounts, then the smaller details ---------- */
#content:has(>article.account-home){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-items:stretch}
#content:has(>article.account-home)>*{grid-column:1/-1;order:8;min-width:0;margin:0}
#content>article.account-home,#content>.home-extras{display:contents}
article.account-home>*,.home-extras>*{order:8;grid-column:1/-1;min-width:0}
#content:has(>article.account-home) .account-hero>.account-grand-total{order:1}
/* Across your accounts sits right under the total, as the hero's bar (the Holdings/Cash bar is retired). */
#content:has(>article.account-home) article.account-home>.account-distribution{order:1!important;margin-top:-6px!important}
#content:has(>article.account-home)>.since-visit{order:2}
#content:has(>article.account-home) .home-extras>[data-setup-slot]{order:3}
#content:has(>article.account-home) .account-list-heading{order:4}
#content:has(>article.account-home) .account-list{order:5}
#content:has(>article.account-home) .home-extras>[data-networth-slot]{order:6}
#content:has(>article.account-home) :is(.account-hero>.account-summary-stats,.account-hero>.account-budget-flow){order:7}
/* A shorter hero so the accounts show on the first screen. */
.account-hero>.account-grand-total{padding:30px 0 14px!important;gap:10px!important}
.account-hero>.account-grand-total::after{width:min(440px,86vw)!important;top:-24px!important}
.account-grand-total .gross-total-value strong,.account-grand-total>strong.gross-amount{font-size:clamp(48px,7vw,96px)!important}
.account-list-heading{margin-top:6px!important}
/* Account cards: tighter, with the strategy lines as one small row. */
.account-entry.account-card .account-value{padding-top:12px!important;padding-bottom:10px!important}
.account-entry.account-card .account-strategy-block{padding-top:10px!important;padding-bottom:10px!important}
.account-entry.account-card .account-strategy-block .account-strategies{margin-top:6px!important;gap:4px 12px}
@media (max-width:640px){
 .account-hero>.account-grand-total{padding:18px 0 6px!important}
 .account-hero>.account-grand-total::before{font-size:11px!important;padding:0 34px!important;background-size:22px 1px,22px 1px!important}
 .account-entry.account-card .account-strategy-block>small:first-child{display:none}
}
/* Net worth: one quiet line (label, figure, change) with a small Details toggle. */
.networth-card{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:14px 22px!important}
.networth-card>.networth-head{flex:1 1 auto;margin:0}
.networth-headline{display:flex!important;flex-wrap:wrap;align-items:baseline!important;column-gap:14px!important}
.networth-headline h2{margin:0!important;font-size:12px!important}
.networth-value{font-size:clamp(22px,2.2vw,28px)!important}
.networth-more{flex:1 1 100%;order:2}
.networth-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:500 11px var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;
 color:color-mix(in srgb,var(--gold) 80%,var(--text));border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);padding:6px 10px;border-radius:2px}
.networth-more>summary::-webkit-details-marker{display:none}
.networth-more>summary::after{content:"+";font-family:var(--mix-mono);font-size:13px;line-height:1}
.networth-more[open]>summary::after{content:"−"}
.networth-card:has(.networth-more:not([open])){flex-wrap:nowrap}
.networth-card:has(.networth-more:not([open]))>.networth-more{flex:0 0 auto}
.networth-more[open]>summary{margin-bottom:14px}
.networth-more .networth-ranges{margin:0 0 6px}
/* Phones: the three counts sit side by side, number over label. */
@media (max-width:640px){
 .account-hero>.account-summary-stats{flex-direction:row!important;justify-content:space-between;padding:14px 18px!important;gap:8px}
 .account-summary-stats>div{flex-direction:column-reverse!important;align-items:flex-start!important;justify-content:flex-start!important;border-bottom:0!important;padding:0!important;width:auto!important;gap:2px!important}
 .account-summary-stats>div>b{font-size:26px!important}
 .account-summary-stats>div>span{font-size:12px!important;white-space:normal}
 .networth-card{flex-wrap:wrap!important}
}

/* ---------- signed-out landing: Sign in at the top right ---------- */
/* Styled as the Sandbox's Sign in (.public-btn). */
body.signed-in .signin-menu-btn,body:has(#login[hidden]) .signin-menu-btn{display:none!important}
body:not(.signed-in)>header{display:flex;align-items:center;gap:10px}
body:not(.signed-in)>header>.brand{margin-right:auto}
/* The member sign-in block leaves the page and becomes the panel. */
/* Hidden only once signin-menu.js has added the button, so sign-in never disappears if the script fails. */
body.has-signin-menu:not(.signin-open) #login .landing-signin{display:none}
body.signin-open #login .landing-signin{display:flex;position:fixed;z-index:2001;top:72px;right:24px;width:min(360px,calc(100vw - 32px));margin:0;flex-direction:column;align-items:stretch;gap:12px;
 padding:22px 22px 18px;border:1px solid var(--border);border-radius:2px;background:var(--panel);box-shadow:0 24px 60px -18px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.18);max-width:none}
body.signin-open #login .landing-signin::before{content:"";position:absolute;top:-1px;left:-1px;width:10px;height:10px;border-top:1px solid var(--corner);border-left:1px solid var(--corner)}
#login .landing-signin .landing-signin-label{font:500 12px var(--mix-cond);letter-spacing:.16em;text-transform:uppercase;color:var(--text);padding-right:30px}
#login .landing-signin #signin{width:100%;min-height:44px;font:600 13px var(--mix-cond)!important;letter-spacing:.1em;text-transform:uppercase;
 background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;border:1px solid var(--gold)!important;border-radius:2px!important}
#login .landing-signin .remember-device{font-size:13px;color:var(--muted)}
/* Sign-in progress and passkey trouble, in plain words right under the button. */
#login .landing-signin #signinNote{flex-basis:100%;margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
#login .landing-signin #signinNote:empty{display:none}
#login .landing-signin #signinNote.is-trouble{color:var(--text);padding:9px 11px;border-left:3px solid var(--return-loss,#e5484d);background:color-mix(in srgb,var(--return-loss,#e5484d) 10%,transparent);border-radius:2px}
.signin-close{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0!important;border:0!important;background:none!important;color:var(--muted)!important;font-size:20px;line-height:1}
.signin-close:hover{color:var(--text)!important}
.signin-shade{position:fixed;inset:0;z-index:2000;background:transparent}
body.signed-in .signin-shade,body:has(#login[hidden]) .signin-shade,body:not(.signin-open) .signin-shade{display:none!important}
@media (max-width:640px){
 /* Phones: a sheet from the bottom with a dimmed page behind it. */
 body.signin-open #login .landing-signin{top:auto;bottom:0;left:0;right:0;width:auto;padding:22px 20px calc(22px + env(safe-area-inset-bottom));border-left:0;border-right:0;border-bottom:0}
 .signin-shade{background:rgba(5,6,12,.5)}
 body:not(.signed-in)>header{flex-wrap:nowrap!important}
 body:not(.signed-in)>header>.brand{flex:1 1 auto!important;min-width:0}
 body:not(.signed-in)>header{gap:8px!important;padding-left:16px!important;padding-right:16px!important}
 body:not(.signed-in)>header .brand>strong{font-size:17px!important;letter-spacing:.04em!important}
 body:not(.signed-in)>header .brand>.holiday-badge{display:none}
 body:not(.signed-in)>header>#theme{font-size:11px!important;padding:8px 9px!important;white-space:nowrap}
 .signin-menu-btn{white-space:nowrap;padding:8px 12px!important;font-size:11px!important}
}

/* ---------- streak and trophy badges: small icons at the top left of the portfolio total ---------- */
/* Badges: a small row in the top-left corner of the Accounts page. */
.account-grand-total>.fun-badges{position:absolute;z-index:5;left:0;top:0;display:flex;flex-direction:row;gap:8px;margin:0}
.fun-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0!important;border-radius:50%!important;min-height:0;
 background:color-mix(in srgb,var(--panel) 70%,transparent)!important;border:1px solid color-mix(in srgb,var(--hero-glow,var(--gold)) 55%,transparent)!important;box-shadow:0 0 12px color-mix(in srgb,var(--hero-glow,var(--gold)) 18%,transparent)!important;
 color:var(--hero-glow,var(--gold));cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
:root:not([data-holiday]) .fun-badge{--hero-glow:var(--gold)}
.fun-ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fun-badge:hover,.fun-badge.open{border-color:var(--hero-glow)!important;box-shadow:0 0 18px color-mix(in srgb,var(--hero-glow) 35%,transparent)!important}
.fun-badge-card{white-space:normal!important;position:absolute;left:0;top:calc(100% + 8px);transform:scale(.96);transform-origin:top left;width:max-content;max-width:min(260px,calc(100vw - 80px));
 display:flex;flex-direction:column;gap:4px;padding:10px 12px;text-align:left;border:1px solid color-mix(in srgb,var(--hero-glow) 45%,var(--border));border-radius:2px;background:var(--panel);
 box-shadow:0 14px 34px -12px rgba(0,0,0,.55);font:400 12px/1.45 var(--mix-sans);color:var(--muted);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s}
.account-grand-total .fun-badge-card strong,.fun-badge-card strong{font:500 12px/1.3 var(--mix-cond)!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--text)!important;white-space:nowrap;text-shadow:none!important}
.account-grand-total .fun-badge-card>span{font:400 12px/1.45 var(--mix-sans)!important;color:var(--muted)!important;letter-spacing:0!important;text-transform:none!important}
.fun-badge.open>.fun-badge-card{opacity:1;visibility:visible;transform:scale(1);pointer-events:auto}
@media (hover:hover){.fun-badge:hover>.fun-badge-card,.fun-badge:focus-visible>.fun-badge-card{opacity:1;visibility:visible;transform:scale(1)}}
/* First sight of a new badge: it pops out with a glow, then settles back into the icon. */
.fun-badge.celebrate{animation:fun-pop 1.1s cubic-bezier(.2,.9,.3,1.2)}
.fun-badge.celebrate::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--hero-glow);animation:fun-ring 1.6s ease-out 2;pointer-events:none}
.fun-badge.celebrate>.fun-badge-card{border-color:var(--hero-glow);box-shadow:0 0 30px color-mix(in srgb,var(--hero-glow) 35%,transparent),0 14px 34px -12px rgba(0,0,0,.55);animation:fun-card-pop .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes fun-pop{0%{transform:scale(.6)}40%{transform:scale(1.35)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes fun-ring{from{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(2.2)}}
@keyframes fun-card-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.fun-badge.celebrate,.fun-badge.celebrate::after,.fun-badge.celebrate>.fun-badge-card{animation:none}}
@media (max-width:640px){
 .account-hero>.account-grand-total{padding-top:50px!important}
 .account-grand-total>.fun-badges{flex-direction:row;top:0}
 .fun-badge-card{left:0;top:calc(100% + 8px);transform:scale(.96);transform-origin:top left}
 .fun-badge.open>.fun-badge-card{transform:scale(1)}
 @keyframes fun-card-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
}

/* ---------- holiday touches: clean line icons and holiday-styled numbers ---------- */
.fun-ico-fill path{fill:currentColor;stroke:none}
.holiday-badge{display:inline-flex!important;align-items:center;justify-content:center;width:30px;height:30px;padding:0!important;color:var(--hero-glow)!important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hero-glow) 45%,transparent))!important}
.holiday-badge .holiday-ico{width:20px;height:20px;stroke-width:1.4}
/* Ornaments around the portfolio total. */
.holiday-ornaments{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--hero-glow)}
/* The older dot speckles behind the numbers are replaced by the patterns below. */
html[data-holiday] .hero-number::after{display:none!important}
.holiday-ornament{position:absolute;display:block;width:38px;height:38px;opacity:.8;animation:hol-float 8s ease-in-out infinite}
.holiday-ornament .fun-ico{width:100%;height:100%;stroke-width:1.3;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--hero-glow) 55%,transparent))}
.holiday-ornament.o1{left:16%;top:22%}
.holiday-ornament.o2{right:15%;top:14%;width:30px;height:30px;animation-delay:-2s;animation-duration:9s}
.holiday-ornament.o3{right:20%;top:58%;width:34px;height:34px;animation-delay:-4s}
.holiday-ornament.o4{left:20%;top:62%;width:26px;height:26px;animation-delay:-6s;animation-duration:10s}
.account-grand-total .holiday-ornament{color:var(--hero-glow)!important}
.account-grand-total .holiday-ornament:nth-child(even){color:var(--hero-glow-2)!important}
/* Fireworks holidays: line bursts that bloom and fade in turn. */
.holiday-ornament.firework{width:96px;height:96px;opacity:0;animation:hol-burst 4.2s ease-out infinite}
.holiday-ornament.firework .fun-ico{stroke-width:.9}
.holiday-ornament.firework.o1{left:10%;top:6%}
.holiday-ornament.firework.o2{right:8%;top:2%;width:74px;height:74px;animation-delay:1.4s}
.holiday-ornament.firework.o3{right:16%;top:42%;width:64px;height:64px;animation-delay:2.8s}
@keyframes hol-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes hol-burst{0%{opacity:0;transform:scale(.25)}18%{opacity:.85;transform:scale(1)}55%{opacity:.35;transform:scale(1.08)}100%{opacity:0;transform:scale(1.12)}}
@media (max-width:640px){.holiday-ornament{width:26px;height:26px}.holiday-ornament.firework{width:60px;height:60px}.holiday-ornament.firework.o2,.holiday-ornament.firework.o3{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.holiday-ornament{animation:none}.holiday-ornament.firework{opacity:.45}}
/* Budget flow: the holiday icons riding the streams. */
#budgetProfile .fun-flow-item path{fill:none;stroke:var(--hero-glow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#budgetProfile .fun-flow-item.fun-flow-fill path{fill:var(--hero-glow);stroke:none}
#budgetProfile .fun-flow-item{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--hero-glow) 60%,transparent))!important}

/* Holiday numbers: the big totals take on the season. */
html[data-holiday] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){transition:text-shadow .4s,filter .4s}
/* Halloween: neon orange. */
html[data-holiday="halloween"] body:not(.light) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){color:#fff1df!important;
 text-shadow:0 0 1px #ffd0a0,0 0 6px #ff9a3c,0 0 16px rgba(255,138,31,.85),0 0 38px rgba(255,120,20,.55),0 0 80px rgba(162,89,255,.25)!important}
html[data-holiday="halloween"] body.light :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){color:#c25000!important;text-shadow:0 0 14px rgba(255,138,31,.35)!important}
/* Gradient numbers: candy cane, flag, gold, rose, emerald, harvest. */
html:is([data-holiday="christmas"],[data-holiday="independence"],[data-holiday="new-year"],[data-holiday="valentines"],[data-holiday="st-patricks"],[data-holiday="thanksgiving"]) body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent;text-shadow:none!important;-webkit-text-stroke:.6px rgba(0,0,0,.18)}
html[data-holiday="christmas"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:repeating-linear-gradient(115deg,#ff3b4f 0 .18em,#fff7f2 .18em .36em)!important;filter:drop-shadow(0 0 10px rgba(255,59,79,.4))}
html[data-holiday="christmas"] body.light :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){-webkit-text-stroke:.8px rgba(150,0,20,.45);filter:none}
html[data-holiday="independence"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:radial-gradient(circle,#fff 0 .045em,transparent .06em),linear-gradient(#2846b8,#2846b8),repeating-linear-gradient(180deg,#ff4058 0 .12em,#fff 0 .24em)!important;
 background-size:.22em .22em,36% 54%,100% 100%!important;background-repeat:repeat,no-repeat,no-repeat!important;background-position:0 0,0 0,0 0!important;filter:drop-shadow(0 0 10px rgba(77,141,255,.35))}
html[data-holiday="independence"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){-webkit-mask:none}
html[data-holiday="independence"] body.light :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){-webkit-text-stroke:.8px rgba(20,30,90,.4);filter:none}
html[data-holiday="new-year"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:linear-gradient(180deg,#fff6d6 0%,#ffd36b 42%,#c8901c 58%,#ffe9a8 100%)!important;filter:drop-shadow(0 0 12px rgba(255,211,107,.45))}
html[data-holiday="valentines"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:linear-gradient(180deg,#ffd1e4 0%,#ff5fa2 55%,#e0245e 100%)!important;filter:drop-shadow(0 0 12px rgba(255,95,162,.45))}
html[data-holiday="st-patricks"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:linear-gradient(180deg,#b9ffd6 0%,#19e07a 50%,#0b8f4d 78%,#ffd36b 100%)!important;filter:drop-shadow(0 0 12px rgba(25,224,122,.4))}
html[data-holiday="thanksgiving"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:linear-gradient(180deg,#ffe2a3 0%,#ffb547 45%,#d9622b 75%,#8c4a1f 100%)!important;filter:drop-shadow(0 0 12px rgba(255,181,71,.4))}
html[data-holiday] body.light :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){filter:none}

/* Net worth chart readout: compact on phones so the tapped day stays visible. */
.networth-tip{border-radius:2px!important;font-family:var(--mix-sans)}
.networth-tip .nw-tip-total{font-family:var(--mix-mono)!important;font-weight:400!important}
.networth-tip dd{font-family:var(--mix-mono)}
@media (max-width:640px){
 .networth-tip{min-width:0!important;max-width:58%!important;padding:6px 8px!important;font-size:11px!important}
 .networth-tip .nw-tip-total{font-size:15px!important;margin:2px 0!important}
 .networth-tip dl{gap:1px 8px!important}
}

.nw-own-sold{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.nw-own-sold>summary{cursor:pointer;font:500 11px var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nw-own-sold ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.nw-own-sold li{display:flex;justify-content:space-between;align-items:center;gap:12px}
.nw-own-sold li span{display:flex;flex-direction:column;gap:2px;min-width:0}
.nw-own-sold li small{color:var(--muted);font-size:12px}
.nw-own-sold .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Choosing a sold date: the controls take their own full-width row. */
.nw-own-item:has(.nw-own-sold-date)>.nw-own-actions{grid-area:auto!important;grid-column:1/-1!important;grid-row:3!important;flex-wrap:wrap!important;justify-content:flex-start}
.nw-own-sold-date{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.nw-own-sold-date input{min-height:34px}

/* ---------- area boxes: the design's hover (computers only) ---------- */
/* Tilt toward the pointer, lift the big numbers, grow and brighten the corner marks, glow behind. */
:root{--box-glow:var(--gold)}
html[data-holiday]{--box-glow:var(--hero-glow)}
:is(#content>article:not(.account-home),.account-hero>.account-summary-stats,.account-hero>.account-budget-flow,article.account-home>.account-distribution,.account-entry.account-card,.networth-card,.overview-strategy-card,#budgetProfile .bp-card,#budgetProfile article){
 transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .5s ease,background-size .45s ease!important}
:is(.gross-total-value strong,.account-value>b,.account-summary-stats b,.networth-value,.snapshot-value,.bp-headline,.allocation-calculator strong,.budget-value){display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1),text-shadow .5s ease}
@media (hover:hover) and (pointer:fine){
 :is(#content>article:not(.account-home),.account-hero>.account-summary-stats,.account-hero>.account-budget-flow,article.account-home>.account-distribution,.account-entry.account-card,.networth-card,.overview-strategy-card):hover{
  transform:perspective(1000px) rotateX(1.6deg) rotateY(-2deg) translateY(-4px)!important;border-color:color-mix(in srgb,var(--text) 18%,var(--border))!important;
  box-shadow:0 34px 60px -24px rgba(0,0,0,.9),0 0 46px -14px color-mix(in srgb,var(--box-glow) 45%,transparent)!important;
  background-size:22px 1px,1px 22px,22px 1px,1px 22px!important;--corner:var(--box-glow)}
 body.light :is(#content>article:not(.account-home),.account-hero>.account-summary-stats,.account-hero>.account-budget-flow,article.account-home>.account-distribution,.account-entry.account-card,.networth-card,.overview-strategy-card):hover{
  box-shadow:0 26px 44px -22px rgba(20,27,46,.35),0 0 40px -14px color-mix(in srgb,var(--box-glow) 40%,transparent)!important}
 /* Big boxes (charts, long forms) tilt less so nothing feels seasick. */
 /* Strategy boxes are full width and sit inside a bigger section: they lift without tilting, and the section around them stays still. */
 #content .overview-strategy-card.overview-strategy-card:hover{transform:translateY(-3px)!important}
 #content>article:not(.account-home):hover{transform:perspective(2400px) rotateX(.5deg) rotateY(-.6deg) translateY(-3px)!important}
 #content>article:has(.overview-strategy-card):hover{transform:none!important;box-shadow:var(--mix-lift)!important;background-size:10px 1px,1px 10px,10px 1px,1px 10px!important;--corner:inherit}
 :is(.account-entry.account-card,.account-summary-stats,.networth-card,.overview-strategy-card,.strategy-display,.snapshot-grid>section,#content>article:not(.account-home):not(:has(.snapshot-grid,.overview-strategy-card,.strategy-display))):hover :is(.account-value>b,.account-summary-stats b,.networth-value,.snapshot-value,.allocation-calculator strong,.budget-value){transform:translateY(-3px) scale(1.04)}
 body:not(.light) :is(.account-entry.account-card,.account-summary-stats,.networth-card,.overview-strategy-card,.strategy-display,.snapshot-grid>section,#content>article:not(.account-home):not(:has(.snapshot-grid,.overview-strategy-card,.strategy-display))):hover :is(.account-value>b,.networth-value,.snapshot-value){text-shadow:0 1px 0 rgba(0,0,0,.4),0 10px 24px rgba(0,0,0,.55),0 0 22px color-mix(in srgb,var(--box-glow) 30%,transparent)!important}
}
/* The cards' fade-in must let go once it ends, or it pins their position and the hover snaps instead of gliding. */
.account-entry.account-card{animation-fill-mode:backwards!important}
/* Account cards have a full border, which painted over the gold corner marks: draw them just inside it. */
.account-entry.account-card{background-origin:padding-box!important;background-clip:padding-box!important}
/* Card numbers grow from their left edge so they stay inside the card. */
:is(.account-value>b,.networth-value,.snapshot-performance .snapshot-value){transform-origin:0 100%}
@media (prefers-reduced-motion:reduce){:is(#content>article,.account-entry.account-card,.networth-card,.account-summary-stats,.account-budget-flow,.account-distribution):hover{transform:none!important}}

/* Across your accounts as the hero bar: no box, centered under the total. */
.account-grand-total .combined-composition{display:none!important}
article.account-home>.account-distribution{grid-column:1/-1!important;width:100%;max-width:640px;justify-self:center;background:none!important;background-image:none!important;border:0!important;box-shadow:none!important;padding:0!important;transform:none!important}
article.account-home>.account-distribution .account-distribution-title{justify-content:center;gap:12px}
article.account-home>.account-distribution .account-distribution-title>span:last-child{display:none}
article.account-home>.account-distribution .account-distribution-key{justify-content:center;flex-wrap:wrap;gap:6px 16px}
.account-distribution .tone-cash{--account-color:#ffb062}
.light .account-distribution .tone-cash{--account-color:#c06a12}
@media (max-width:900px){#content:has(>article.account-home) article.account-home>.account-distribution{grid-column:1/-1!important}}

/* ---------- phones ---------- */
header .brand strong{white-space:nowrap}
@media (max-width:560px){
 .performance-periods,.bi-chart-tabs{display:flex;width:100%;min-width:0;overflow:hidden}
 .account-grand-total,.directory-return,.account-value{min-width:0;max-width:100%}
 .account-hero>.account-grand-total{flex:1 1 100%;width:100%}
 .performance-periods button,.bi-chart-tabs .bi-tab{flex:1 1 auto;padding:0 4px!important;font-size:11px!important;min-width:0}
 header .brand strong{letter-spacing:.06em;font-size:20px}
 header .brand>span{display:none}
 /* Tabs fit the screen: tighter spacing, smaller type. */
 nav button,nav a{letter-spacing:.06em!important;font-size:11px!important}
 body.signed-in nav button{padding:6px 7px!important}
 /* Buy the Dip and Build Cash Reserve levels stack instead of three narrow columns. */
 .lump-zones{grid-template-columns:1fr!important}
 /* The small demo tag sits above the card's own top-right links. */
 .lump-zone .review-clear,#content .lump-zone :is(.review-clear){letter-spacing:.04em!important;padding:6px 8px!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- light theme: navy and classy gold accents ---------- */
body.light{--navy:#14284b;--text:#13213d;--gold:#b08a3e;--gold-hi:#d6b36c;--accent:#b08a3e;--corner:rgba(176,138,62,.85);--mix-sky:linear-gradient(180deg,#d3dbea 0%,#e6e6e6 34%,#f2ece0 70%,#efe5cf 100%)}
body.light>header .brand strong{color:#f3ead6!important}
body.light header .brand .brand-slash{color:#d6b36c}
body.light>header>:is(button,a),body.light>header .public-actions>*{color:#e9e1cf!important;border-color:rgba(214,179,108,.45)!important;background:transparent!important}
body.light>header>:is(button,a):hover,body.light>header .public-actions>*:hover{border-color:#d6b36c!important;color:#f6ecd2!important}
body.light>header .public-actions>a:last-child,body.light>header>.landing-get{background:linear-gradient(180deg,#e2c27e,#c29a4c)!important;color:#13213d!important;border-color:#d6b36c!important}
body.light.signed-in nav button{color:#e3dccb!important}
body.light.signed-in nav button:hover{color:#f6ecd2!important}
body.light.signed-in nav button.active{color:#f0d79a!important;border-color:#d6b36c!important}
body.light .performance-periods button[aria-pressed=true],body.light .bi-chart-tabs .bi-tab.active{background:#14284b!important;color:#f0d79a!important;border-color:#14284b!important}
body.light :is(.account-list-heading h3,.account-grand-total small){color:#14284b!important}
body.light .reorder-accounts{background:#14284b!important;color:#f3ead6!important;border-color:#14284b!important}
body.light .account-entry.account-card{border-color:rgba(20,40,75,.16)!important}
body.light .account-hero>.account-summary-stats{background:linear-gradient(180deg,#152a4f,#112342)!important;border-color:rgba(214,179,108,.5)!important;color:#e9e1cf!important}
body.light .account-hero>.account-summary-stats :is(span,small){color:#c9cfdb!important}
body.light .account-hero>.account-summary-stats b{color:#e8c77f!important}
html:not([data-holiday]) body.light .gross-total-value strong{color:#13213d!important}

/* ---------- holiday scenes (folio-fun.js): modern and minimal ---------- */
.holiday-ornaments.holiday-scene{inset:-40px -24px 0;overflow:hidden;--hx-a:rgba(124,92,220,.30);--hx-b:rgba(255,138,31,.20);--hx-line:#d8bd88;--hx-p:#ffb35c;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 76%,transparent 100%)}
.holiday-scene[data-scene=thanksgiving]{--hx-a:rgba(214,120,50,.26);--hx-b:rgba(176,72,48,.18);--hx-p:#d9792b}
.holiday-scene[data-scene=christmas]{--hx-a:rgba(110,150,235,.24);--hx-b:rgba(216,189,136,.16);--hx-p:#ffffff}
.hx-aura{position:absolute;left:4%;bottom:-20%;width:42%;height:120%;border-radius:50%;background:radial-gradient(closest-side,var(--hx-a),transparent);filter:blur(10px);animation:hx-breathe 12s ease-in-out infinite alternate}
.hx-aura.two{left:auto;right:4%;background:radial-gradient(closest-side,var(--hx-b),transparent);animation-delay:-6s}
@keyframes hx-breathe{from{opacity:.65;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.hx-motif{position:absolute;right:11%;top:26px;width:92px;height:92px;opacity:.9;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--hx-line) 45%,transparent));animation:hx-float 9s ease-in-out infinite alternate}
.holiday-scene[data-scene=thanksgiving] .hx-motif{top:auto;bottom:38px;width:120px;height:120px}
.hx-motif svg{width:100%;height:100%;overflow:visible}
.hx-line{fill:none;stroke:var(--hx-line);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hx-line.faint{opacity:.35}
@keyframes hx-float{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.holiday-scene[data-scene=christmas] .hx-motif{animation:hx-float 9s ease-in-out infinite alternate,hx-star 4s ease-in-out infinite}
@keyframes hx-star{0%,100%{filter:drop-shadow(0 0 8px rgba(242,207,116,.45))}50%{filter:drop-shadow(0 0 18px rgba(242,207,116,.8))}}
.hx-horizon{position:absolute;left:0;right:0;bottom:6px;height:80px;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 22%,transparent 34%,transparent 66%,#000 78%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 22%,transparent 34%,transparent 66%,#000 78%,#000 94%,transparent 100%)}
.hx-horizon svg{position:absolute;inset:0;width:100%;height:100%}
.hx-horizon .hx-line{stroke-width:1}
.hx-shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--hx-line) 55%,transparent) 50%,transparent 100%);background-size:30% 100%;background-repeat:no-repeat;mix-blend-mode:screen;opacity:.5;
 -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 60%,transparent 90%);mask-image:linear-gradient(180deg,transparent 30%,#000 60%,transparent 90%);animation:hx-shimmer 9s ease-in-out infinite}
@keyframes hx-shimmer{from{background-position:-40% 0}to{background-position:140% 0}}
.hx-fog{position:absolute;left:-20%;right:-20%;bottom:-10px;height:90px;border-radius:50%;filter:blur(12px);animation:hx-drift 40s ease-in-out infinite alternate;
 background:radial-gradient(45% 60% at 25% 60%,rgba(190,180,220,.09),transparent 70%),radial-gradient(40% 55% at 78% 70%,rgba(190,180,220,.07),transparent 70%)}
.hx-fog.two{bottom:16px;opacity:.6;animation-duration:54s;animation-direction:alternate-reverse}
@keyframes hx-drift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
/* Particles: embers rise, leaves fall and turn, snow falls with depth. Kept to the outer thirds. */
.holiday-scene :is(.hx-ember,.hx-leaf,.hx-flake){position:absolute;display:block;pointer-events:none;opacity:0}
.holiday-scene .p1{left:4%}.holiday-scene .p2{left:9%;animation-delay:-1.4s!important}.holiday-scene .p3{left:14%;animation-delay:-2.9s!important}.holiday-scene .p4{left:20%;animation-delay:-4.3s!important}
.holiday-scene .p5{left:26%;animation-delay:-5.6s!important}.holiday-scene .p6{left:74%;animation-delay:-.7s!important}.holiday-scene .p7{left:80%;animation-delay:-2.2s!important}.holiday-scene .p8{left:86%;animation-delay:-3.6s!important}
.holiday-scene .p9{left:91%;animation-delay:-5s!important}.holiday-scene .p10{left:96%;animation-delay:-6.3s!important}.holiday-scene .p11{left:7%;animation-delay:-7.1s!important}.holiday-scene .p12{left:17%;animation-delay:-8s!important}
.holiday-scene .p13{left:23%;animation-delay:-9.2s!important}.holiday-scene .p14{left:77%;animation-delay:-7.7s!important}.holiday-scene .p15{left:83%;animation-delay:-8.6s!important}.holiday-scene .p16{left:89%;animation-delay:-9.9s!important}
.holiday-scene .p17{left:94%;animation-delay:-10.8s!important}.holiday-scene .p18{left:12%;animation-delay:-11.5s!important}
.hx-ember{bottom:30px;width:2px;height:2px;border-radius:50%;background:var(--hx-p);box-shadow:0 0 6px 1px color-mix(in srgb,var(--hx-p) 70%,transparent);animation:hx-rise 11s ease-in infinite}
@keyframes hx-rise{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}100%{opacity:0;transform:translate(12px,-170px)}}
.hx-leaf{top:-10px;width:8px;height:5px;border-radius:0 80% 0 80%;background:var(--hx-p);animation:hx-leaf 14s linear infinite}
.holiday-scene .hx-leaf:nth-of-type(3n){background:#b8432a}.holiday-scene .hx-leaf:nth-of-type(3n+1){background:#d6a24a}
@keyframes hx-leaf{0%{opacity:0;transform:translate(0,0) rotate(0)}12%{opacity:.75}50%{transform:translate(26px,130px) rotate(200deg)}88%{opacity:.6}100%{opacity:0;transform:translate(-8px,270px) rotate(380deg)}}
.hx-flake{top:-6px;width:3px;height:3px;border-radius:50%;background:var(--hx-p);animation:hx-fall 12s linear infinite}
.holiday-scene .hx-flake:nth-of-type(odd){width:2px;height:2px;filter:blur(.6px);animation-duration:18s}
@keyframes hx-fall{0%{opacity:0;transform:translate(0,0)}10%{opacity:.85}100%{opacity:0;transform:translate(16px,280px)}}
/* Light mode: navy line work, gold accent, softer glow. */
.light .holiday-ornaments.holiday-scene{--hx-line:#14284b;--hx-a:rgba(124,92,220,.14);--hx-b:rgba(255,138,31,.12)}
.light .holiday-scene[data-scene=thanksgiving]{--hx-a:rgba(214,120,50,.14);--hx-b:rgba(176,72,48,.10)}
.light .holiday-scene[data-scene=christmas]{--hx-a:rgba(110,150,235,.14);--hx-b:rgba(216,189,136,.14);--hx-p:#9fb3d6}
.light .hx-motif{filter:drop-shadow(0 0 8px rgba(176,138,62,.35))}
.light .hx-shimmer{mix-blend-mode:normal;background-image:linear-gradient(90deg,transparent 0,rgba(176,138,62,.45) 50%,transparent 100%)}
.light .hx-fog{opacity:.5}
@media (max-width:700px){.hx-motif{width:40px;height:40px;right:30px;top:42px;opacity:.75}.holiday-scene[data-scene=thanksgiving] .hx-motif{width:70px;height:70px;bottom:auto;top:24px}.hx-horizon{display:none}.hx-aura{width:60%}}
@media (prefers-reduced-motion:reduce){.holiday-scene *{animation:none!important}.holiday-scene :is(.hx-ember,.hx-leaf,.hx-flake){display:none}}
body.light.signed-in nav,body.light.signed-in>nav{background:linear-gradient(180deg,#132648,#172d55)!important;border-bottom-color:rgba(214,179,108,.55)!important}

/* ---------- settings menu (settings-menu.js): one ⚙ in the header ---------- */
.settings-btn{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px!important;border-radius:999px!important}
.settings-gear{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.settings-btn:hover .settings-gear,.settings-btn[aria-expanded=true] .settings-gear{transform:rotate(60deg)}
.settings-eq{display:none;align-items:flex-end;gap:2px;height:12px}
.settings-eq i{display:block;width:2px;height:5px;border-radius:1px;background:var(--hero-glow,var(--gold));animation:lofi-eq 1.1s ease-in-out infinite}
.settings-eq i:nth-child(2){animation-delay:-.4s}.settings-eq i:nth-child(3){animation-delay:-.8s}
.settings-btn.is-playing .settings-eq{display:inline-flex}
.settings-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff8a3d;color:#1a0d02;font:600 11px/18px var(--mix-sans);text-align:center}
.settings-badge[hidden]{display:none}
.settings-panel{position:fixed;z-index:70;width:300px;max-width:calc(100vw - 16px);padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 24px 50px -18px rgba(0,0,0,.65);pointer-events:auto}
.settings-panel[hidden]{display:none}
.settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.settings-head strong{font:500 12px/1 var(--mix-cond);letter-spacing:.2em;text-transform:uppercase}
.settings-close{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:2px 6px;color:var(--muted)}
.settings-label{display:block;margin:2px 0 8px;font-size:12px;color:var(--muted)}
.settings-music{padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.settings-music[hidden]{display:none}
.settings-seg{display:flex;gap:4px;padding:3px;border:1px solid var(--border);border-radius:8px}
.settings-seg button{all:unset;flex:1;box-sizing:border-box;padding:8px 6px;border-radius:6px;text-align:center;font:500 13px/1.1 var(--mix-sans);color:var(--muted);cursor:pointer}
.settings-seg button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink)}
html[data-holiday] .settings-seg button[aria-pressed=true][data-music=holiday]{background:linear-gradient(180deg,color-mix(in srgb,var(--hero-glow) 55%,#fff),var(--hero-glow));color:#1a0d02}
.settings-items{display:flex;flex-direction:column;gap:2px}
.settings-items>#lofiToggle{display:none!important}
.settings-items>:is(button,a){all:unset;box-sizing:border-box;display:flex!important;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 10px!important;border-radius:6px;font:500 14px/1.2 var(--mix-sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--text)!important;background:none!important;border:0!important;cursor:pointer}
.settings-items>:is(button,a):hover,.settings-items>:is(button,a):focus-visible{background:color-mix(in srgb,var(--text) 8%,transparent)!important}
.settings-items>#logout{color:var(--muted)!important;margin-top:4px;border-top:1px solid var(--border)!important;border-radius:0 0 6px 6px}
.settings-shade{position:fixed;inset:0;z-index:69;background:rgba(3,4,10,.45)}
.settings-shade[hidden]{display:none}
@media (min-width:641px){.settings-shade{background:transparent}}
@media (min-width:1000px){body.signed-in>header>#settingsMenu{grid-row:1!important;grid-column:-2/-1!important;justify-self:end;align-self:center}}
@media (max-width:999px){body>header:has(>#settingsMenu)>.brand{flex:1 1 auto}body>header>#settingsMenu{flex:none}}
/* Phones: the menu is a sheet from the bottom. */
@media (max-width:640px){
 .settings-panel{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto;max-width:none;border-radius:16px 16px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom))}
 .settings-items>:is(button,a){min-height:50px;font-size:16px!important}
}

/* ---------- phones: Accounts · Budget · Sandbox as a bottom tab bar ---------- */
@media (max-width:640px){
 body.signed-in:not(.sandbox-mode){padding-top:0!important;padding-bottom:calc(64px + env(safe-area-inset-bottom))!important}
 body.signed-in:not(.sandbox-mode)>section>nav,body.signed-in:not(.sandbox-mode) nav:has(>.nav-center){position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important;height:auto!important;min-height:0!important;z-index:40!important;
  display:block!important;padding:0 6px env(safe-area-inset-bottom)!important;border-top:1px solid color-mix(in srgb,var(--gold) 22%,transparent)!important;border-bottom:0!important;border-radius:0!important;transform:none!important}
 body.signed-in:not(.sandbox-mode) nav>.nav-center{display:flex!important;justify-content:space-around;align-items:stretch;gap:0;overflow:visible!important;width:100%}
 body.signed-in:not(.sandbox-mode) nav>.nav-center>:is(button,a){flex:1 1 0;display:flex!important;align-items:center;justify-content:center;gap:6px;min-height:58px!important;padding:0 4px!important;font-size:12px!important;border-bottom:0!important;border-top:2px solid transparent!important;text-decoration:none}
 body.signed-in:not(.sandbox-mode) nav>.nav-center>.active{border-top-color:var(--gold)!important}
 html[data-holiday] body.signed-in:not(.sandbox-mode) nav>.nav-center>.active{border-top-color:var(--hero-glow)!important}
}
/* Floating buttons sit above the phone tab bar. */
@media (max-width:640px){
 body.signed-in:not(.sandbox-mode) .folio-chat{bottom:calc(74px + env(safe-area-inset-bottom))!important;--chat-gap:12px}
 body.signed-in:not(.sandbox-mode) .folio-sound{bottom:calc(76px + env(safe-area-inset-bottom))!important}
}
body.light.signed-in nav a.sandbox-link{color:#e3dccb!important}
body.light.signed-in>header>#title{color:var(--text)!important}
@media (max-width:999px){body.light.signed-in>header>#title{color:#f3ead6!important}}

/* ---------- tidy pages (folio-tidy.js): caveats and dates live behind ⓘ ---------- */
.folio-tucked{display:none!important}
.tidy-host{position:relative}
.tidy-info{all:unset;box-sizing:border-box!important;display:inline-flex!important;align-items:center;justify-content:center;width:18px!important;height:18px!important;min-height:0!important;padding:0!important;margin-left:8px;vertical-align:middle;background:none!important;border:1px solid color-mix(in srgb,var(--muted) 60%,transparent)!important;border-radius:50%!important;
 font:italic 600 11px/1 Georgia,serif;color:var(--muted);cursor:pointer;opacity:.7;transition:opacity .2s,border-color .2s,color .2s;text-transform:none;letter-spacing:0}
.tidy-info:hover,.tidy-info:focus-visible,.tidy-info[aria-expanded=true]{opacity:1;color:var(--gold);border-color:var(--gold)}
.tidy-host>.tidy-info{position:absolute;top:10px;right:10px;margin:0;z-index:2}
.tidy-pop{position:fixed;z-index:75;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 20px 44px -18px rgba(0,0,0,.6);max-height:min(60vh,420px);overflow:auto}
.tidy-pop strong{display:block;margin-bottom:6px;font:500 11px/1 var(--mix-cond);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tidy-pop p,.tidy-notes p{margin:6px 0 0;font:400 13px/1.5 var(--mix-sans);color:var(--text)}
.tidy-pop.tidy-sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;border-radius:16px 16px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
.tidy-notes{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.tidy-notes h3{margin:0;font:500 11px/1 var(--mix-cond)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Landing: a quiet "with an account" note instead of a button-like pill. */
.landing-tool em.landing-pill{all:unset;display:block;margin-top:auto;font:500 12px/1.4 var(--mix-sans);letter-spacing:.04em;color:var(--muted)}
/* "Select an account…" is said by each card's ↗; the heading keeps the title and Rearrange order. */
.account-list-heading>span:not([class]){display:none}
/* Sandbox Budget is a demo: no Start fresh. */
:is(body.sandbox-mode,.public-budget) :has(>[data-budget-start-fresh]),:is(body.sandbox-mode,.public-budget) [data-budget-start-fresh]{display:none!important}
.sandbox-budget-loading{padding:40px 0;color:var(--muted);text-align:center}

/* ---------- account switcher (account-switcher.js): themed list; swipe on phones ---------- */
.acct-upgraded>select.account-switch{position:absolute!important;inset:0;opacity:0;pointer-events:none;width:1px;height:1px}
.acct-upgraded::after{display:none!important}
.acct-switch-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;max-width:min(70vw,560px);padding:4px 6px;border-radius:8px;cursor:pointer;color:var(--text);font:600 26px/1.15 var(--mix-sans);letter-spacing:-.4px}
.acct-switch-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-switch-chev{width:9px;height:9px;flex:none;margin-top:-5px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s}
.acct-switch-btn[aria-expanded=true] .acct-switch-chev{transform:rotate(225deg);margin-top:4px}
.acct-switch-btn:hover,.acct-switch-btn:focus-visible{background:color-mix(in srgb,var(--text) 6%,transparent)}
.acct-switch-btn:disabled{cursor:default;background:none}
.acct-strip{display:none}
.acct-menu{position:fixed;z-index:72;min-width:260px;max-width:calc(100vw - 16px);max-height:min(70vh,520px);overflow:auto;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 24px 50px -18px rgba(0,0,0,.65)}
.acct-menu-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border-radius:6px;font:500 15px/1.3 var(--mix-sans);color:var(--text);cursor:pointer}
.acct-menu-item::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:transparent}
.acct-menu-item[aria-selected=true]{color:var(--gold-hi)}
.light .acct-menu-item[aria-selected=true]{color:var(--gold)}
.acct-menu-item[aria-selected=true]::before{background:var(--gold);box-shadow:0 0 8px var(--gold)}
.acct-menu-item:hover,.acct-menu-item:focus-visible{background:color-mix(in srgb,var(--text) 8%,transparent)}
.title-rename{display:none}
.settings-items>.title-rename{display:flex!important}
@media (max-width:640px){
 .acct-switch-btn{font-size:21px;max-width:78vw}
 .acct-menu.acct-sheet{left:0;right:0;bottom:0;top:auto;max-width:none;border-radius:16px 16px 0 0;padding:10px 10px calc(14px + env(safe-area-inset-bottom))}
 .acct-sheet .acct-menu-item{min-height:52px;font-size:17px}
 html[data-swipe=next] #content{animation:acct-in-right .38s ease-out}
 html[data-swipe=prev] #content{animation:acct-in-left .38s ease-out}
}
@keyframes acct-in-right{from{opacity:.3;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes acct-in-left{from{opacity:.3;transform:translateX(-28px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html[data-swipe] #content{animation:none!important}}
body.settings-open .folio-chat,body:has(.acct-sheet) .folio-chat,body:has(.tidy-sheet) .folio-chat{display:none!important}


/* Phones: account names across the top (account-switcher.js). */
@media (max-width:640px){
 .acct-upgraded{display:none!important}
 body>header>#title.account-title{min-width:0;max-width:100%;overflow:hidden}
 .acct-strip{display:flex;align-items:baseline;gap:22px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:2px 0 4px;padding:4px 2px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
 .acct-strip::-webkit-scrollbar{display:none}
 .acct-strip[hidden]{display:none}
 .acct-strip-item{all:unset;flex:none;scroll-snap-align:center;cursor:pointer;white-space:nowrap;font:600 16px/1.3 var(--mix-sans);letter-spacing:-.2px;color:color-mix(in srgb,var(--text) 45%,transparent);transition:color .25s,font-size .25s}
 .acct-strip-item[aria-current=true]{color:var(--text);font-size:20px}
 .acct-strip-item:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
 .light .acct-strip-item[aria-current=true]{color:#f3ead6}
 .light .acct-strip-item{color:rgba(243,234,214,.5)}
 body.account-switching #content{opacity:.55}
 #content{will-change:auto}
}
/* Light mode: the account strip and account tabs sit on the navy header, so no white button boxes. */
body.light>header #title :is(.acct-strip-item,.account-tabs button,.acct-switch-btn){background:transparent!important;border-color:transparent!important;box-shadow:none!important}
/* Phones and tablets: the account name and tabs sit inside the navy header. */
@media (max-width:999px){
 body.light>header #title :is(.acct-strip-item,.account-tabs button){color:rgba(243,234,214,.62)!important}
 body.light>header #title .acct-strip-item[aria-current=true],body.light>header #title .acct-switch-btn{color:#f3ead6!important}
 body.light>header #title .account-tabs button.active{color:#f0d79a!important;border-bottom:2px solid #d6b36c!important}
 body.light>header #title :is(.home-tour-btn,.play-mode-btn){color:#f0d79a!important;border-color:#d6b36c!important;background:rgba(214,179,108,.12)!important}
 body.light>header #title .home-tour-btn:hover,body.light>header #title .home-tour-btn:focus-visible{background:rgba(214,179,108,.24)!important}
}
/* Computers: they sit on the light page under the navy bar, so navy text and a gold underline. */
@media (min-width:1000px){
 body.light>header #title .acct-switch-btn{color:#14284b!important}
 body.light>header #title .account-tabs button{color:#5b6274!important}
 body.light>header #title .account-tabs button:hover{color:#14284b!important}
 body.light>header #title .account-tabs button.active{color:#14284b!important;border-bottom:2px solid #b08a3e!important}
 body.light .overlap-panel .map-tile{color:#fff!important}
}

/* Landing previews: light screenshots in light mode. */
body:not(.light) img[data-theme-img=light]{display:none!important}
body.light img:has(+img[data-theme-img=light]){display:none!important}
/* Sandbox tabs: computers show each calculator as a tab; phones fold them into a Calculators menu. */
nav .nav-calcs{display:none!important}
.calc-menu{position:fixed;z-index:72;width:min(320px,calc(100vw - 16px));padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 24px 50px -18px rgba(0,0,0,.65)}
.calc-menu :is(button,a){display:block;box-sizing:border-box;text-decoration:none;width:100%;margin:0!important;padding:10px 12px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--text)!important;text-align:left!important;cursor:pointer;text-transform:none!important;letter-spacing:0!important}
.calc-menu :is(button,a)+:is(button,a){border-top:1px solid var(--border)!important;border-radius:0!important}
.calc-menu :is(button,a):is(:hover,:focus-visible){background:color-mix(in srgb,var(--gold) 12%,transparent)!important;outline:none}
.calc-menu strong{display:block;font:600 14px/1.3 var(--mix-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.calc-menu [aria-current] strong{color:var(--gold)}
.calc-menu small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted)}
nav a.loan-link{text-decoration:none;color:inherit}

/* ---------- light theme: more navy and gold ---------- */
body.light{--navy:#14284b;--navy-2:#1f3a66;--gold-line:#c9a45a}
/* Section titles: navy text, gold rule */
body.light #content :is(h2,h3).folio-help-target:not(:is(.calc-heading,.loan-heading) h2),body.light .account-list-heading h3,body.light #landingToolsHeading,body.light #landingFeaturesHeading,body.light .bp-flow-card h3,body.light .landing h2{color:#14284b!important}
/* Cards: hairline gold top edge, navy-tinted shadow */
body.light :is(.account-entry.account-card,#content>article:not(.account-home),.landing-tool,.networth-card,.bp-flow-card,.bp-plan-card,.margin-calculator section){border-top:2px solid var(--gold-line)!important;box-shadow:0 1px 0 rgba(20,40,75,.05),0 18px 36px -24px rgba(20,40,75,.45)!important}
/* Account initials: navy chip, gold letters */
body.light .account-card-top :is(.account-avatar,.account-initials,[class*=initial]),body.light .account-entry .account-card-top>span:first-child{background:#14284b!important;color:#e8c77f!important;border-color:#14284b!important}
/* Secondary buttons: navy outline; primary stays gold */
body.light #content button:not(.landing-btn-primary):not([aria-pressed=true]):not(.active):not(.account-share):not(.tidy-info):not(.folio-help-trigger):not(.account-card):not(.reorder-accounts):not(.account-entry):not([class*=tile]):not(.account-share),body.light main .landing-btn:not(.landing-btn-primary),body.light main .public-btn:not(.public-btn-primary){border-color:#14284b!important;color:#14284b!important}
/* Sliders: navy fill, gold thumb ring */
body.light input[type=range]{accent-color:#14284b}
body.light input[type=range]::-webkit-slider-thumb{background:#14284b!important;border:3px solid #e2c27e!important;box-shadow:0 0 0 1px #14284b!important;border-radius:50%!important}
/* Info icons gold */
body.light :is(.folio-help-trigger,.tidy-info){color:#a8822f!important;border-color:#c9a45a!important}
/* Invite box and footer: navy band with gold accents */
body.light .landing-cta-final{background:linear-gradient(180deg,#14284b,#112342)!important;border-color:#c9a45a!important;color:#e9e1cf!important}
body.light .lr-card{background:linear-gradient(180deg,#152a4f,#112342)!important;border-color:#c9a45a!important;box-shadow:0 1px 0 rgba(20,40,75,.05),0 18px 36px -24px rgba(20,40,75,.45)}
body.light .landing-cta-final :is(h2,p,label){color:#e9e1cf!important}
body.light .landing-cta-final .public-btn:not(.public-btn-primary){border-color:#c9a45a!important;color:#f0d79a!important;background:transparent!important}
body.light .public-footer{background:#14284b!important;color:#c9cfdb!important;border-top:2px solid #c9a45a!important;border-radius:2px;padding:18px 24px!important}
body.light .public-footer a{color:#e8c77f!important}
/* Gross total: navy with a soft gold underline glow */
body.light .gross-total-value strong{color:#14284b!important;text-shadow:0 10px 30px rgba(201,164,90,.28)!important}
/* Margin calculator headline and pinned box */
body.light #calcEquity{color:#14284b!important}

/* Phones: like the app, Sandbox · Calculators ▾ is a bar at the bottom of the screen. Inside a demo account its own
   tabs (Home · Activity) join that bar (home-bar.css). */
@media (max-width:640px){
 body.sandbox-mode nav,body.sandbox-mode nav>.nav-center{display:flex!important;flex-wrap:wrap!important;justify-content:stretch!important;gap:0!important;overflow:hidden!important}
 body.sandbox-mode nav{top:auto!important;bottom:0!important;height:auto!important;transform:none!important;padding:0 6px env(safe-area-inset-bottom)!important;border-bottom:0!important;border-top:1px solid color-mix(in srgb,var(--gold) 22%,transparent)!important}
 body.sandbox-mode nav>.nav-center{flex:1 1 auto;width:100%}
 body.sandbox-mode nav .nav-calc{display:none!important}
 body.sandbox-mode nav .nav-calcs{display:block!important}
 body.sandbox-mode nav :is(button,a){flex:1 1 50%!important;box-sizing:border-box!important;min-width:0!important;min-height:56px;padding:6px 2px!important;text-align:center!important;justify-content:center;border-bottom:0!important;border-top:2px solid transparent!important}
 body.sandbox-mode nav :is(button,a).active:not(.nav-sub){border-top-color:var(--gold)!important}
 body.sandbox-mode nav .nav-sub{order:-1;flex-basis:25%!important;min-height:42px;font-size:12px!important;padding:5px 2px!important;border-top:0!important;border-bottom:2px solid transparent!important;opacity:.92}
 body.sandbox-mode nav .nav-sub.active{opacity:1;border-bottom-color:var(--gold)!important}
 body.sandbox-mode{padding-top:0!important;padding-bottom:calc(60px + env(safe-area-inset-bottom))!important}
 body.sandbox-mode:has(nav .nav-sub){padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
}

/* ---------- floating result boxes on phones: one look everywhere ----------
   Margin and Loan: a box above the first inputs that sticks to the top while scrolling.
   Budget: the same box appears once Free Cash Flow scrolls away (pinned-results.js).
   Each sits below the Sandbox tab bar whenever that bar is showing (--pin-top). */
.budget-pinned{display:none}
@media (max-width:800px){
 :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned){display:flex!important;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px!important;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border))!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--panel) 97%,transparent)!important;backdrop-filter:blur(10px);box-shadow:0 12px 28px -14px rgba(0,0,0,.6)!important;pointer-events:auto;color:var(--text)}
 :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned) small{display:block;font:500 10px/1.3 var(--mix-cond)!important;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)!important}
 :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned) strong{display:block;font:400 24px/1.15 var(--mix-mono)!important;color:var(--text)!important}
 :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned)>span:last-child{text-align:right}
 .margin-calculator>.calc-mobile-result small.calc-mobile-hint{text-transform:none!important;letter-spacing:.03em!important;font-size:11px!important}
 .margin-calculator>.calc-mobile-result strong.calc-mobile-alert{color:var(--return-loss)!important}
 /* Sticky boxes (in the page) */
 :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar){position:sticky!important;top:max(var(--pin-top,0px),env(safe-area-inset-top))!important;bottom:auto!important;left:auto!important;right:auto!important;
  z-index:20!important;margin:6px -4px 14px!important;transform:none!important;transition:top .25s ease}
 /* Budget: fixed, fully hidden until Free Cash Flow has scrolled off */
 .budget-pinned{position:fixed!important;z-index:25!important;left:12px;right:12px;top:calc(max(var(--pin-top,0px),env(safe-area-inset-top)) + 6px);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s linear .25s,top .25s ease}
 .budget-pinned.pin-on{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1),visibility 0s,top .25s ease}
 .budget-pinned .bpin-fcf strong{color:var(--return-gain)!important}
}
/* Light mode: navy box, gold labels, cream numbers. */
@media (max-width:800px){
 body.light :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned){background:linear-gradient(180deg,#152a4f,#112342)!important;border-color:#c9a45a!important;box-shadow:0 14px 30px -14px rgba(20,40,75,.6)!important}
 body.light :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned) small{color:#e8c77f!important}
 body.light :is(.margin-calculator>.calc-mobile-result,.loan-calc>.loan-mobile-bar,.budget-pinned) strong{color:#f3ead6!important}
 body.light .budget-pinned .bpin-fcf strong{color:#7ee0b0!important}
}
@media (prefers-reduced-motion:reduce){.budget-pinned{transition:none!important}}

/* ---------- Budget on phones/tablets: Try a change sits right under Free Cash Flow, as a card ---------- */
@media (max-width:1050px){
 :not([data-account-budget])>#budgetProfile .bp-layout{display:flex!important;flex-direction:column;gap:14px}
 :not([data-account-budget])>#budgetProfile .bp-main{display:contents}
 :not([data-account-budget])>#budgetProfile .bp-main>*{order:3}
 :not([data-account-budget])>#budgetProfile .bp-main>.bp-flow-card{order:1}
 :not([data-account-budget])>#budgetProfile .bp-layout>.bp-controls{order:2}
 :not([data-account-budget])>#budgetProfile .bp-layout>.bp-controls{width:100%;align-self:stretch}
 #budgetProfile .bp-try-change{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:7px;background:var(--panel);box-shadow:var(--mix-lift)}
 #budgetProfile .bp-try-change>summary{display:flex!important;align-items:center;gap:10px;min-height:56px;padding:13px 20px 13px 54px!important;background-position:20px center!important}
 #budgetProfile .bp-try-change>summary::after{content:'+';margin-left:auto;color:var(--muted);font:400 20px/1 var(--mix-sans);transition:transform .15s ease}
 #budgetProfile .bp-try-change[open]>summary::after{transform:rotate(45deg)}
 #budgetProfile .bp-try-change[open]>summary{border-bottom:1px solid var(--border)}
 #budgetProfile .bp-try-change>section{margin:10px!important}
}

/* ---------- Buy the Dip review: tap a recorded buy to use it ---------- */
button.purchase-evidence-row.purchase-pickable{all:unset;box-sizing:border-box;display:flex!important;justify-content:space-between;align-items:center;gap:14px;width:100%;margin:7px 0;padding:12px 14px;
 border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text);transition:border-color .2s,background .2s}
button.purchase-pickable>div{flex:1;min-width:0}
button.purchase-pickable b{font-size:21px;white-space:nowrap}
button.purchase-pickable .purchase-pick-hint{flex:none;padding:5px 9px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:999px;font:500 10px/1 var(--mix-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
button.purchase-pickable:hover,button.purchase-pickable:focus-visible{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.purchase-pick-confirm{margin:4px 0 12px;padding:14px;border:1px solid var(--gold);border-radius:10px;background:color-mix(in srgb,var(--gold) 9%,var(--panel))}
.purchase-pick-confirm p{margin:0 0 10px;font-weight:600;color:var(--text)}
.purchase-pick-actions{display:flex;gap:10px;flex-wrap:wrap}
.purchase-pick-actions button{min-height:44px;padding:0 16px}
.purchase-pick-actions .purchase-pick-yes{background:linear-gradient(180deg,var(--gold-hi),var(--gold))!important;color:var(--gold-ink)!important;border-color:var(--gold)!important}
.purchase-pick-error:empty{display:none}
.purchase-pick-error{margin:8px 0 0!important;color:var(--return-loss)!important;font-weight:400!important}
body.light .purchase-pick-actions .purchase-pick-yes{background:#14284b!important;color:#f0d79a!important;border-color:#14284b!important}

/* Light mode: gains/losses read crisply on cream (deeper green/red, medium weight). */
body.light{--return-gain:#06663a;--return-loss:#a3162c}
body.light :is(.directory-return-value,.bi-return,.bi-chart-gain,.snapshot-value.performance-gain,.snapshot-value.performance-loss){font-weight:500!important;-webkit-font-smoothing:antialiased}
body.light .directory-return-value .bi-mark,body.light .directory-return-value button{opacity:1}

/* ---------- landing: a holiday horizon band under the hero ---------- */
.landing-holiday-band{position:relative;height:190px;margin:-10px calc(50% - 50vw) 10px;overflow:hidden;pointer-events:none;
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 80%,transparent 100%)}
.landing-holiday-band>.holiday-scene{inset:0!important;-webkit-mask-image:none!important;mask-image:none!important;z-index:0}
.landing-holiday-band .hx-fog{bottom:-30px}
@media (max-width:700px){.landing-holiday-band{height:130px}}
/* The band is 100vw wide, which counts the scrollbar where one takes up space; it must not scroll the page sideways. */
html:has(.landing-holiday-band){overflow-x:clip}
/* Phones: sideways swipes move the account, never the whole page. */
@media (max-width:640px){
 html,body{overflow-x:clip}
 body.signed-in #content{touch-action:pan-y}
}

/* Overlap map tiles keep white labels on their colored fills. */
body.light .map-tile,body.light .map-tile :is(strong,small,span,b){color:#fff!important}
/* Christmas big number: a quiet gold-to-frost gradient instead of candy-cane stripes. */
html[data-holiday="christmas"] body:is(.light,:not(.light)) :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){
 background-image:linear-gradient(180deg,#fff6e0 0%,#efd9a4 45%,#c9a45a 100%)!important;filter:drop-shadow(0 0 14px rgba(216,189,136,.35));-webkit-text-stroke:0}
html[data-holiday="christmas"] body.light :is(.account-grand-total .gross-total-value strong,.hero-number,.bp-hero .bp-headline){background-image:linear-gradient(180deg,#1f3a66 0%,#14284b 55%,#8a6a2c 100%)!important;filter:none;-webkit-text-stroke:0}

/* ---------- Halloween night scene (folio-fun.js), detailed; scoped to [data-night] ---------- */
.holiday-ornaments.holiday-scene[data-night]{inset:-40px -24px 0;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 72%,transparent 100%)}
.holiday-scene[data-night] .hx-sky{position:absolute;inset:0;background:radial-gradient(40% 55% at 87% 10%,rgba(255,150,60,.10),transparent 70%),radial-gradient(70% 60% at 50% 105%,rgba(110,60,160,.18),transparent 70%)}
.holiday-scene[data-night] .hx-moon{position:absolute;right:13%;top:34px;width:74px;height:74px;border-radius:50%;opacity:.9;
 background:radial-gradient(circle at 38% 36%,#fff6e2 0,#f4dcaa 42%,#d7aa62 78%,#b9853f 100%);
 box-shadow:0 0 34px 6px rgba(255,196,120,.26),0 0 120px 40px rgba(255,150,60,.10),inset -8px -6px 18px rgba(120,70,20,.35);animation:hn-moon 9s ease-in-out infinite alternate}
.holiday-scene[data-night] .hx-moon:before,.holiday-scene[data-night] .hx-moon:after{content:"";position:absolute;border-radius:50%;background:rgba(150,100,40,.18)}
.holiday-scene[data-night] .hx-moon:before{width:14px;height:14px;left:40px;top:18px}.holiday-scene[data-night] .hx-moon:after{width:9px;height:9px;left:22px;top:44px}
.holiday-scene[data-night] .hx-land{position:absolute;left:0;right:0;bottom:0;height:300px;
 -webkit-mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 39%,transparent 61%,#000 76%,#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 24%,transparent 39%,transparent 61%,#000 76%,#000 100%)}
.holiday-scene[data-night] .hx-land svg{position:absolute;inset:0;width:100%;height:100%}
.holiday-scene[data-night] .hx-far{fill:#120f1d;opacity:.9}.holiday-scene[data-night] .hx-near{fill:#06050a}
.holiday-scene[data-night] .hx-rim{fill:none;stroke:rgba(255,170,90,.38);stroke-width:1;vector-effect:non-scaling-stroke}
.holiday-scene[data-night] .hx-twig{fill:none;stroke:#06050a;stroke-linecap:round}.holiday-scene[data-night] .hx-twig.w1{stroke-width:1.4}.holiday-scene[data-night] .hx-twig.w2{stroke-width:1.6}.holiday-scene[data-night] .hx-twig.w3{stroke-width:3.2}.holiday-scene[data-night] .hx-twig.w7{stroke-width:7}.holiday-scene[data-night] .hx-twig.w9{stroke-width:9}
.holiday-scene[data-night] .hx-win{fill:#ffb35c;filter:url(#hx-glow);animation:hn-flicker 6s infinite steps(1)}
.holiday-scene[data-night] .hx-win.b{animation-duration:8.5s;animation-delay:-3s}.holiday-scene[data-night] .hx-win.c{animation-duration:5s;animation-delay:-1.4s}
.holiday-scene[data-night] .hx-fog{position:absolute;left:-20%;right:-20%;bottom:-10px;height:110px;border-radius:50%;filter:blur(10px);animation:hn-drift 38s ease-in-out infinite alternate;
 background:radial-gradient(45% 60% at 30% 60%,rgba(190,180,220,.10),transparent 70%),radial-gradient(40% 55% at 72% 70%,rgba(190,180,220,.08),transparent 70%)}
.holiday-scene[data-night] .hx-fog.two{bottom:20px;opacity:.6;animation-duration:52s;animation-direction:alternate-reverse}
.holiday-scene[data-night] .hx-bat{position:absolute;top:70px;left:-40px;width:18px;height:8px;animation:hn-fly 34s linear infinite}
.holiday-scene[data-night] .hx-bat.b2{top:110px;width:12px;height:6px;animation-duration:46s;animation-delay:-20s;opacity:.7}
.holiday-scene[data-night] .hx-bat svg{display:block;width:100%;height:100%;overflow:visible;fill:#0a0810;animation:hn-flap .22s ease-in-out infinite alternate;transform-origin:center}
.holiday-scene[data-night] .hx-ember{position:absolute;bottom:40px;width:2px;height:2px;border-radius:50%;background:#ffbe73;box-shadow:0 0 6px 1px rgba(255,170,80,.7);opacity:0;--dx:14px;animation:hn-rise 11s ease-in infinite}
.holiday-scene[data-night] .hx-ember.e1{left:7%}.holiday-scene[data-night] .hx-ember.e2{left:16%;animation-delay:-1.9s;--dx:-12px}.holiday-scene[data-night] .hx-ember.e3{left:24%;animation-delay:-3.8s}
.holiday-scene[data-night] .hx-ember.e4{left:77%;animation-delay:-5.7s;--dx:-12px}.holiday-scene[data-night] .hx-ember.e5{left:85%;animation-delay:-7.6s}.holiday-scene[data-night] .hx-ember.e6{left:92%;animation-delay:-9.5s;--dx:-12px}
@keyframes hn-flicker{0%,100%{opacity:.95}41%{opacity:.45}43%{opacity:.95}77%{opacity:.7}79%{opacity:.95}}
@keyframes hn-drift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
@keyframes hn-moon{to{box-shadow:0 0 40px 8px rgba(255,196,120,.34),0 0 150px 50px rgba(255,150,60,.15),inset -8px -6px 18px rgba(120,70,20,.35)}}
@keyframes hn-fly{0%{transform:translate(0,0)}30%{transform:translate(32vw,-26px)}60%{transform:translate(64vw,12px)}100%{transform:translate(110vw,-18px)}}
@keyframes hn-flap{from{transform:scaleY(1)}to{transform:scaleY(.25)}}
@keyframes hn-rise{0%{opacity:0;transform:translate(0,0)}20%{opacity:.8}100%{opacity:0;transform:translate(var(--dx),-180px)}}
.light .holiday-scene[data-night] .hx-far{fill:#1f3a66;opacity:.12}.light .holiday-scene[data-night] .hx-near{fill:#14284b;opacity:.32}.light .holiday-scene[data-night] .hx-twig{stroke:#14284b;opacity:.32}.light .holiday-scene[data-night] .hx-sky{display:none}
.light .holiday-scene[data-night] .hx-rim{stroke:rgba(176,138,62,.55)}.light .holiday-scene[data-night] .hx-bat svg{fill:#14284b}.light .holiday-scene[data-night] .hx-fog{opacity:.5}
.light .holiday-scene[data-night] .hx-moon{opacity:.75;box-shadow:0 0 40px 10px rgba(214,179,108,.35)}
@media (max-width:700px){.holiday-scene[data-night] .hx-land{display:none}.holiday-scene[data-night] .hx-moon{width:44px;height:44px;right:8%;top:20px}.holiday-scene[data-night] .hx-moon:before,.holiday-scene[data-night] .hx-moon:after{display:none}}
@media (prefers-reduced-motion:reduce){.holiday-scene[data-night] .holiday-scene *{animation:none!important}}
.holiday-scene[data-night] .hx-rim.faint{opacity:.5}
.holiday-scene[data-night] .hx-iron{fill:none;stroke:#06050a;stroke-width:1.8;stroke-linecap:round}
.holiday-scene[data-night] circle.hx-iron{stroke-width:3}
.holiday-scene[data-night] .hx-dark-win{fill:#0e0b16;stroke:rgba(255,170,90,.25);stroke-width:1;vector-effect:non-scaling-stroke}
.holiday-scene[data-night] .hx-mullion{fill:none;stroke:#06050a;stroke-width:1.5}
.holiday-scene[data-night] .hx-door{fill:#ff9f45;opacity:.32;filter:url(#hx-glow);animation:hn-flicker 9s infinite steps(1)}
.holiday-scene[data-night] .hx-pumpkin{fill:#ff8a1f;filter:url(#hx-glow)}
.holiday-scene[data-night] .hx-face{fill:#2a0f02}
.light .holiday-scene[data-night] .hx-iron,.light .holiday-scene[data-night] .hx-mullion{stroke:#14284b;opacity:.32}
.light .holiday-scene[data-night] .hx-dark-win{fill:rgba(20,40,75,.18);stroke:rgba(176,138,62,.5)}
.light .holiday-scene[data-night] .hx-rim.faint{opacity:.7}
/* Landing band: Halloween panorama fills the band. */
.landing-holiday-band .holiday-scene[data-night] .hx-land{height:100%;-webkit-mask-image:none;mask-image:none}
.landing-holiday-band .holiday-scene[data-night] .hx-moon{right:16%;top:18px;width:58px;height:58px}
.landing-holiday-band .holiday-scene[data-night] .hx-moon:before{width:11px;height:11px;left:31px;top:14px}.landing-holiday-band .holiday-scene[data-night] .hx-moon:after{width:7px;height:7px;left:17px;top:34px}
.landing-holiday-band .holiday-scene[data-night] .hx-bat{top:40px}.landing-holiday-band .holiday-scene[data-night] .hx-bat.b2{top:70px}
@media (max-width:700px){.landing-holiday-band .holiday-scene[data-night] .hx-land{display:block}.landing-holiday-band .holiday-scene[data-night] .hx-moon{width:40px;height:40px;right:10%;top:10px}}
/* Light mode: solid silhouette colors so overlapping shapes don't show seams. */
.light .holiday-scene[data-night] .hx-far{fill:#d3d7df;opacity:1}
.light .holiday-scene[data-night] .hx-near{fill:#a6adbb;opacity:1}
.light .holiday-scene[data-night] .hx-twig{stroke:#a6adbb;opacity:1}
.light .holiday-scene[data-night] :is(.hx-iron,.hx-mullion){stroke:#8c94a5;opacity:1}

/* ---------- Thanksgiving harvest dusk (detailed scene, [data-night][data-scene=thanksgiving]) ---------- */
.holiday-scene[data-night][data-scene=thanksgiving] .hx-sky{background:radial-gradient(55% 70% at 84% 70%,rgba(255,140,60,.26),transparent 70%),radial-gradient(80% 60% at 40% 105%,rgba(200,90,60,.18),transparent 70%)}
.holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{right:15%;top:auto;bottom:74px;width:92px;height:92px;opacity:.95;
 background:radial-gradient(circle at 50% 42%,#ffe6b0 0,#ffb862 52%,#e2742f 100%);box-shadow:0 0 44px 12px rgba(255,160,80,.34),0 0 160px 70px rgba(255,120,50,.16);animation:none}
.holiday-scene[data-night][data-scene=thanksgiving] .hx-moon:before,.holiday-scene[data-night][data-scene=thanksgiving] .hx-moon:after{display:none}
.holiday-scene[data-night][data-scene=thanksgiving] .hx-rim{stroke:rgba(255,176,96,.45)}
.holiday-scene[data-night][data-scene=thanksgiving] .hx-fog{background:radial-gradient(45% 60% at 25% 60%,rgba(255,190,140,.07),transparent 70%),radial-gradient(40% 55% at 78% 70%,rgba(255,190,140,.06),transparent 70%)}
.holiday-scene[data-night] .hx-geese{width:54px;height:24px;top:52px}
.holiday-scene[data-night] .hx-geese svg{animation:none}
.landing-holiday-band .holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{width:64px;height:64px;bottom:44px;top:auto}
.light .holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{opacity:.8;box-shadow:0 0 40px 12px rgba(255,170,90,.3)}
.light .holiday-scene[data-night][data-scene=thanksgiving] .hx-sky{display:block;opacity:.55}
.light .holiday-scene[data-night] .hx-geese svg{fill:#14284b}
@media (max-width:700px){.holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{width:46px;height:46px;right:6%;top:18px;bottom:auto}.landing-holiday-band .holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{top:6px;width:38px;height:38px}}
@media (max-width:700px){.holiday-scene[data-night] .hx-leaf:not(.p1):not(.p2):not(.p9):not(.p10){display:none}}
.holiday-scene[data-night] .hx-mid{fill:#1a1420}
.holiday-scene[data-night] .hx-gourd.l1{fill:#5a2a0e}.holiday-scene[data-night] .hx-gourd.l2{fill:#74370f}.holiday-scene[data-night] .hx-gourd.l3{fill:#8a4614}
.holiday-scene[data-night] .hx-stem{fill:#2e2412}
.holiday-scene[data-night] .hx-carve{fill:#ffd27a;filter:url(#hx-glow);animation:hn-flicker 7s infinite steps(1)}
.holiday-scene[data-night] .hx-pk-glow{fill:rgba(255,150,60,.28);filter:url(#hx-soft)}
.holiday-scene[data-night] .hx-wattle{fill:#8f2c20}
.holiday-scene[data-night] .hx-straw{fill:#6e5626}
.holiday-scene[data-night] .hx-twine{fill:none;stroke:rgba(214,170,100,.5);stroke-width:1;vector-effect:non-scaling-stroke}
.light .holiday-scene[data-night] .hx-mid{fill:#959dad}
.light .holiday-scene[data-night] .hx-gourd.l1{fill:#cf7d3e}.light .holiday-scene[data-night] .hx-gourd.l2{fill:#dd8d4c}.light .holiday-scene[data-night] .hx-gourd.l3{fill:#e89d5c}
.light .holiday-scene[data-night] .hx-stem{fill:#6b5a3a}
.light .holiday-scene[data-night] .hx-carve{fill:#5a2508;filter:none;animation:none}
.light .holiday-scene[data-night] .hx-pk-glow{display:none}
.light .holiday-scene[data-night] .hx-wattle{fill:#b8432a}
.light .holiday-scene[data-night] .hx-straw{fill:#c9a45c}
.light .holiday-scene[data-night] .hx-twine{stroke:rgba(140,104,40,.6)}
.holiday-scene[data-night] .hx-shock{fill:#3b2d14}.holiday-scene[data-night] .hx-hay{fill:#2e2310}.holiday-scene[data-night] .hx-hay.face{fill:#4a3a1a}
.holiday-scene[data-night] .hx-stalk{fill:none;stroke:rgba(10,6,2,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.light .holiday-scene[data-night] .hx-shock{fill:#cfae6a}.light .holiday-scene[data-night] .hx-hay{fill:#bf9d58}.light .holiday-scene[data-night] .hx-hay.face{fill:#d8bb78}
.light .holiday-scene[data-night] .hx-stalk{stroke:rgba(110,80,30,.55)}
.holiday-scene[data-night] .hx-shock.top{fill:#2a2010}.light .holiday-scene[data-night] .hx-shock.top{fill:#b4945a}

/* ---------- Wealth calculator: retirement spending, and tighter controls on phones ---------- */
.calc-spend{margin:6px 0 16px;padding:12px 14px;border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:4px}
.calc-spend>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.calc-spend small{flex-basis:100%;font:500 10px/1.3 var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.calc-spend strong{font:400 26px/1.15 var(--mix-mono)!important;color:var(--text)}
.calc-spend strong span,.calc-spend-month{font:400 13px var(--mix-mono);color:var(--muted)}
.calc-spend p{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.calc-spend b{font-weight:600;color:var(--text)}.calc-spend b.calc-goal-met{color:var(--return-gain)}
.margin-calculator .calc-mobile-health[hidden]{display:none!important}
@media (max-width:800px){
 .calc-controls{gap:10px!important}
 .calc-controls section{padding:12px 14px!important}
 .calc-controls h3{margin:0 0 4px!important}
 .margin-calc-control{margin:8px 0 12px!important}
 .margin-calc-control>span{flex-wrap:nowrap!important;line-height:1.3}
 .calc-exact>.calc-dollar-arrows{display:flex!important;width:auto!important;gap:4px}
 .calc-dollar-arrows button{min-width:30px!important;min-height:30px!important}
 .margin-calc-control input[type=range]{margin:10px 0 2px!important}
 .calc-choice{margin:6px 0!important}
 .calc-input-help{margin:6px 0!important}
}
@media (max-width:520px){.calc-exact input{width:92px!important}}
.margin-calculator .calc-cushion[hidden],.calc-legend>span[hidden]{display:none!important}
#calcGraph.calc-no-margin .calc-debt{display:none}
/* Every box has its own ▲▼ buttons, so the browser's built-in number arrows are hidden. */
.calc-exact input[type=number]{appearance:textfield;-moz-appearance:textfield}
.calc-exact input[type=number]::-webkit-inner-spin-button,.calc-exact input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Utilize Margin: every margin setting in one section, closed until margin is in use. */
.calc-controls>.calc-margin{grid-column:1/-1;margin:0 0 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.calc-margin>summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:16px 18px;cursor:pointer;list-style:none}
.calc-margin>summary::-webkit-details-marker{display:none}
.calc-margin>summary::after{content:'▾';margin-left:auto;color:var(--gold);transition:transform .2s}
.calc-margin[open]>summary::after{transform:rotate(180deg)}
.calc-margin>summary h3{margin:0!important}
.calc-margin-hint{font-size:12px;color:var(--muted)}
.calc-margin>section{margin:0 12px 12px!important}
@media (max-width:800px){.calc-margin>summary{padding:12px 14px}.calc-margin>section{margin:0 8px 8px!important}}
/* Plans: the chosen one stays highlighted until you change an input. */
.calc-presets button[aria-pressed=true]{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--gold-ink)!important}
/* Wealth-Calc on computers: the headline, spending and graph float beside the controls until the last
   section ends, in short windows too (a 720px-tall cut-off made it scroll away in Firefox, 2026-11-03);
   contributions, the market-drop check and the yearly table sit below, full width. */
@media (min-width:801px){
 .margin-calculator .calc-results{align-self:stretch;position:static!important}
 .margin-calculator .calc-float{position:sticky;top:calc(var(--pin-top,0px) + 16px);transition:top .25s ease}
 .margin-calculator .calc-controls section{padding:12px 16px!important;margin-bottom:10px!important}
 .margin-calculator .calc-controls h3{margin:0 0 6px!important}
 .margin-calculator .margin-calc-control{margin:6px 0 10px!important}
 .margin-calculator .margin-calc-control input[type=range]{margin:8px 0 2px!important}
 .margin-calculator .calc-choice{margin:6px 0!important}
 .margin-calculator .calc-input-help{margin:6px 0!important}
}
.calc-more{margin-top:24px}
.calc-more>*+*{margin-top:16px}
/* Wealth-Calc: spending turns green once it meets the yearly goal, red while short. */
.calc-spend strong.calc-goal-met,.margin-calculator>.calc-mobile-result strong.calc-goal-met{color:var(--return-gain)!important}
.calc-spend strong.calc-goal-short,.margin-calculator>.calc-mobile-result strong.calc-goal-short{color:var(--return-loss)!important}
body.light .margin-calculator>.calc-mobile-result strong.calc-goal-met{color:#5fd6a0!important}
body.light .margin-calculator>.calc-mobile-result strong.calc-goal-short{color:#ff8a8a!important}
/* Phones: margin health (lowest – highest) in a smaller box at the bottom while the calculator is on screen. */
.calc-margin-float{display:none}
@media (max-width:800px){
 .margin-calculator:not(.calc-offscreen)>.calc-margin-float:not([hidden]){position:fixed;z-index:34;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;
  padding:8px 14px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--panel) 97%,transparent);backdrop-filter:blur(10px);box-shadow:0 -10px 26px -14px rgba(0,0,0,.6)}
 .calc-margin-float>small:first-child{grid-row:1/3;font:500 10px/1.3 var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);max-width:84px}
 .calc-margin-float>strong{justify-self:end;font:400 18px/1.15 var(--mix-mono);color:var(--return-gain)}
 .calc-margin-float>strong.calc-mobile-alert{color:var(--return-loss)}
 .calc-margin-float>.calc-mobile-hint{justify-self:end;font-size:11px;color:var(--muted)}
 body.light .calc-margin-float{background:linear-gradient(180deg,#152a4f,#112342)!important;border-color:#c9a45a!important}
 body.light .calc-margin-float>small:first-child{color:#e8c77f}
 body.light .calc-margin-float>strong{color:#7fe0b4}
 body.light .calc-margin-float>.calc-mobile-hint{color:#c9cfdb}
}
/* Refresh saved data: a small round ↻ button (its name is in the label and tooltip). */
#content #refreshPortfolio.refresh-icon{width:34px;height:34px;min-width:34px;padding:0!important;border-radius:50%!important;display:inline-grid;place-items:center;line-height:0;letter-spacing:0}
#content #refreshPortfolio.refresh-icon svg{display:block}
/* Phones: the projected total stays on one line. Margin health already shows in the bottom box there,
   so the cushion box beside the headline is left out and the number scales to fit. */
@media (max-width:800px){
 .margin-calculator #calcCushion{display:none!important}
 .margin-calculator .calc-result-top .calc-result-heading>strong#calcEquity{white-space:nowrap;overflow-wrap:normal;font-size:clamp(24px,9vw,48px)!important}
}
/* ---------- public pages (Sandbox, calculators, legal): one header row ----------
   FolioVIP on the left; a sun / moon light-dark button, Sign in and Get FolioVIP on the right. */
#theme.theme-icon{display:inline-grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0!important;border-radius:50%!important;line-height:0;color:var(--gold)!important}
#theme.theme-icon svg{display:block}
#theme.theme-icon .theme-moon,body.light #theme.theme-icon .theme-sun{display:none}
body.light #theme.theme-icon .theme-moon{display:block}
body.light>header>#theme.theme-icon{color:#f0d79a!important}
@media (max-width:999px){
 body>header:has(>.public-actions){flex-wrap:wrap!important;align-items:center!important}
 body>header:has(>.public-actions)>.brand{flex:1 1 auto!important;min-width:0}
 body>header:has(>.public-actions)>#theme.theme-icon{flex:none;padding:0!important;min-height:36px}
 body>header:has(>.public-actions)>.public-actions{flex:none;display:flex;gap:6px}
 body>header:has(>.public-actions)>#title{flex:1 1 100%}
}
@media (max-width:640px){
 body>header:has(>.public-actions){gap:8px 6px!important}
 body>header:has(>.public-actions) .brand>strong{font-size:16px!important;letter-spacing:.06em!important}
 body>header:has(>.public-actions) .brand>span{display:none}
 body>header:has(>.public-actions) .public-actions .public-btn{padding:8px 10px!important;font-size:11px!important;min-height:36px;white-space:nowrap}
 body>header:has(>.public-nav)>.brand{flex:1 1 auto!important}
}
/* Price & alert levels for an account with no priced tickers (a plan-fund 401(k)): the title, ticker choice and one note. */
.dashboard-chart.market-empty :is(.market-summary,.chart-scroll,.market-timeline,.market-footer){display:none!important}
/* Overlap: one slim row under the map for funds whose holdings aren't available (their dollars and names). */
.overlap-blind[hidden]{display:none!important}
.overlap-blind{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;width:100%;margin:8px 0 0;padding:7px 12px;border:1px dashed rgba(170,178,194,.45);border-radius:0;background:rgba(120,128,145,.12);color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.overlap-blind strong{font-weight:650}
.overlap-blind span{font-variant-numeric:tabular-nums}
.overlap-blind small{opacity:.75;min-width:0;overflow-wrap:anywhere}
.overlap-blind:hover,.overlap-blind.is-selected{border-color:var(--gold,#d4af37);border-style:solid}
body.light .overlap-blind{background:rgba(29,43,77,.06);border-color:rgba(29,43,77,.3)}
#industryBlind{margin-bottom:10px}
/* Overlap maps: mid-size tiles show their dollar amount under the name. */
.map-tile .map-tile-value{font-size:12px!important;margin-top:2px!important;opacity:.95;font-variant-numeric:tabular-nums;white-space:nowrap}
.map-tile .map-tile-value.tight{font-size:10.5px!important;margin-top:0!important;letter-spacing:-.2px}
/* ---------- Overlap: tap a tile, a card opens right under the map ---------- */
#overlapDetail[hidden]{display:none!important}
#overlapDetail{margin:12px 0 4px;padding:0!important;border:0!important;background:none!important;min-height:0!important}
.ov-card{position:relative;padding:16px 18px 14px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--gold) 8%),var(--panel));box-shadow:0 18px 36px -22px rgba(0,0,0,.65)}
.ov-card::before{content:'';position:absolute;top:-7px;left:32px;width:12px;height:12px;transform:rotate(45deg);background:color-mix(in srgb,var(--panel) 92%,var(--gold) 8%);border-left:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));border-top:1px solid color-mix(in srgb,var(--gold) 45%,var(--border))}
.ov-pop{animation:ov-pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ov-pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ov-pop{animation:none}}
.ov-close{position:absolute;top:8px;right:8px;width:32px;height:32px;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--muted)!important;font-size:22px!important;line-height:1}
.ov-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-right:30px}
.ov-head strong{font:600 20px/1.2 var(--mix-cond);letter-spacing:.04em;color:var(--text)}
.ov-head span{font-size:13px;color:var(--muted)}
.ov-total{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.ov-total b{font:400 28px/1.1 var(--mix-mono);color:var(--text)}
.ov-total span{font-size:12px;color:var(--gold)}
.ov-label{margin:0 0 6px!important;font:500 10px/1.3 var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ov-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--border);margin-bottom:10px}
.ov-bar i{display:block;height:100%}
.ov-src{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ov-src li{display:grid;grid-template-columns:10px 1fr auto;align-items:center;column-gap:8px;font-size:14px}
.ov-src small{grid-column:2/4;margin-top:-3px;font-size:11px;color:var(--muted)}
.ov-dot{width:10px;height:10px;border-radius:50%}
.ov-src-amt{font-family:var(--mix-mono);font-variant-numeric:tabular-nums}
.map-tile.is-selected{outline:3px solid var(--gold);outline-offset:-3px;z-index:3}
/* Find a stock and the Shared only switch on one line. */
.overlap-controls{display:flex!important;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:12px}
.overlap-controls .overlap-find{flex:1 1 200px}
.overlap-shared{min-height:42px;padding:0 14px!important;border-radius:21px!important;white-space:nowrap}
.overlap-shared span{margin-left:4px;opacity:.75;font-family:var(--mix-mono)}
.overlap-shared[aria-pressed=true]{background:var(--gold)!important;border-color:var(--gold)!important;color:var(--gold-ink)!important}
details.overlap-notes>summary{cursor:pointer;font:500 13px var(--mix-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
details.overlap-notes[open]>summary{margin-bottom:10px}
/* Industry map: the tapped industry reads like the stock card. */
#industryDetail[hidden]{display:none!important}
#industryDetail{margin:12px 0 4px;padding:0!important;border:0!important;background:none!important;min-height:0!important}
.ov-more{margin:8px 0 0!important;font-size:12px;color:var(--muted)}
.ov-card{max-width:560px}
.ov-card::before{left:var(--ov-arrow,32px)}
.overlap-controls .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overlap-controls{flex-wrap:nowrap!important;align-items:center}
.overlap-controls .overlap-find{flex:1 1 auto;min-width:0;margin:0!important}
.overlap-controls .overlap-find input{width:100%!important;margin:0!important}
/* Totals as one slim strip of three. */
.overlap-panel .exposure-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:12px 0 0!important}
.overlap-panel .exposure-stats>div{padding:10px 12px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:2px}
.overlap-panel .exposure-stats small{font:500 10px/1.3 var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.overlap-panel .exposure-stats strong{font:400 16px/1.2 var(--mix-mono)!important}
/* Tile names never break mid-word; the fitting step shrinks them instead. */
.map-tile .map-tile-content strong{overflow-wrap:normal;word-break:normal;hyphens:manual}

/* ---------- public pages and the signed-out landing: the Sandbox's header ----------
   One 64px bar: FolioVIP on the left, Sandbox · Budget-Calc · Wealth-Calc · Loan-Calc in the middle, and a sun / moon,
   Sign in and Get FolioVIP on the right. Phones: the same row without the tabs, plus the Sandbox's bottom bar
   (Sandbox · Calculators ▾). The landing's header is also the app's, so every rule here stops once signed in. */
:is(body.public-page,body.site-landing:not(.signed-in))>header{position:sticky!important;top:0;z-index:31!important;display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important;
 box-sizing:border-box;height:64px!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0 24px!important;border:0!important;border-radius:0!important;
 background:rgba(5,6,12,.62)!important;backdrop-filter:blur(8px);border-bottom:1px solid color-mix(in srgb,var(--gold) 14%,transparent)!important;box-shadow:0 3px 12px rgba(0,0,0,.13)!important}
body.light:is(.public-page,.site-landing:not(.signed-in))>header{background:linear-gradient(180deg,#132648,#172d55)!important;border-bottom-color:rgba(214,179,108,.55)!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.brand{flex:0 1 auto!important;margin:0 auto 0 0!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>:is(#theme,.public-actions,.signin-menu-btn,.landing-get){flex:none!important;order:0!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-actions{display:flex;gap:8px}
:is(body.public-page,body.site-landing:not(.signed-in))>header>:is(.signin-menu-btn,.landing-get){display:inline-flex;align-items:center;box-sizing:border-box;height:36px;min-height:36px;padding:6px 12px!important;border-radius:10px!important;font:500 13px/19.5px var(--mix-cond)!important;letter-spacing:.08em!important;text-transform:none!important;text-decoration:none}
:is(body.public-page,body.site-landing:not(.signed-in))>header>#theme .theme-label{display:none}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex!important;flex-wrap:nowrap!important;gap:6px!important;height:64px;margin:0!important;padding:0!important;width:auto!important;border:0!important;background:none!important;order:0!important;overflow:visible!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>:is(a,button){display:flex;align-items:center;gap:.4em;height:64px;min-height:0;box-sizing:border-box;margin:0!important;padding:0 16px!important;
 font:500 12px/22px var(--mix-cond)!important;letter-spacing:.18em!important;text-transform:uppercase!important;text-decoration:none!important;white-space:nowrap;opacity:1!important;
 color:var(--muted)!important;background:transparent!important;border:0!important;border-bottom:1px solid transparent!important;border-radius:2px!important;box-shadow:none!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>:is(a,button):hover{color:var(--text)!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>:is([aria-current=page],.active){color:var(--gold-hi)!important;border-bottom-color:var(--gold)!important}
body.light:is(.public-page,.site-landing:not(.signed-in))>header>.public-nav>:is(a,button){color:#e3dccb!important}
body.light:is(.public-page,.site-landing:not(.signed-in))>header>.public-nav>:is(a,button):hover{color:#f6ecd2!important}
body.light:is(.public-page,.site-landing:not(.signed-in))>header>.public-nav>:is([aria-current=page],.active){color:#f0d79a!important;border-bottom-color:#d6b36c!important}
:is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>.nav-calcs{display:none!important}
.public-nav .nav-icon{display:none}
/* Signed in: the landing's tabs and Get FolioVIP leave; the light / dark button moves into ⚙ as a text item. */
body.site-landing.signed-in>header>:is(.public-nav,.landing-get){display:none!important}
.settings-items>#theme.theme-icon{display:flex!important;width:100%!important;height:auto!important;min-width:0!important;min-height:44px!important;padding:0 10px!important;border-radius:6px!important;line-height:1.2;color:var(--text)!important}
.settings-items>#theme.theme-icon svg{display:none!important}
/* Computers too narrow for the tabs in the middle: they get a row of their own under the bar. */
@media (min-width:641px) and (max-width:1079px){
 :is(body.public-page,body.site-landing:not(.signed-in))>header{height:auto!important;flex-wrap:wrap!important;padding:10px 24px 0!important;row-gap:4px!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav{position:static;transform:none;order:5!important;flex:1 1 100%!important;justify-content:center;height:44px}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>:is(a,button){height:44px}
}
@media (max-width:640px){
 :is(body.public-page,body.site-landing:not(.signed-in))>header{position:relative!important;height:auto!important;min-height:57px!important;padding:10px!important;gap:6px!important;backdrop-filter:none;background:rgba(5,6,12,.55)!important;box-shadow:none!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header .brand>strong{font-size:16px!important;letter-spacing:.06em!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>#theme.theme-icon{padding:0!important;font-size:0!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header .brand>:is(span:not(.brand-slash),.holiday-badge){display:none!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header :is(.public-btn,.signin-menu-btn){padding:8px 10px!important;font-size:11px!important;min-height:36px;white-space:nowrap}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav{position:fixed;left:0;right:0;top:auto;bottom:0;transform:none;z-index:30;height:auto;gap:0!important;padding:0 6px env(safe-area-inset-bottom)!important;
  background:#05060c!important;border-top:1px solid color-mix(in srgb,var(--gold) 22%,transparent)!important;box-shadow:0 3px 12px rgba(0,0,0,.13)!important}
 body.light:is(.public-page,.site-landing:not(.signed-in))>header>.public-nav{background:linear-gradient(180deg,#132648,#172d55)!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>.nav-calc{display:none!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>:is(.nav-home,.nav-calcs){display:flex!important;flex:1 1 50%;flex-direction:column;align-items:center;gap:2px;justify-content:center;height:auto;min-height:56px;padding:6px 2px 4px!important;line-height:1;
  font-size:10px!important;letter-spacing:.03em!important;border-bottom:0!important;border-top:2px solid transparent!important;border-radius:0!important}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav .nav-icon{display:block}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>.nav-calcs>span{display:none}
 :is(body.public-page,body.site-landing:not(.signed-in))>header>.public-nav>.active{border-top-color:var(--gold)!important}
 body.light:is(.public-page,.site-landing:not(.signed-in))>header>.public-nav>.active{border-top-color:#b08a3e!important}
 body:is(.public-page,.site-landing:not(.signed-in)){padding-bottom:calc(60px + env(safe-area-inset-bottom))!important}
 body.site-landing:not(.signed-in) .folio-chat{bottom:calc(74px + env(safe-area-inset-bottom))!important;--chat-gap:12px}
 body.public-page .margin-calculator:not(.calc-offscreen)>.calc-margin-float:not([hidden]){bottom:calc(68px + env(safe-area-inset-bottom))!important}
}
/* Sandbox accounts: on computers the tabs sit in a row under the account name (the bar keeps the four Sandbox tabs). */
.sandbox-account-tabs{justify-content:flex-start!important;margin:10px 0 0;font:inherit}
#title .sandbox-account-tabs button{font-family:var(--mix-cond)!important;font-size:13px!important;letter-spacing:.08em!important;text-transform:uppercase}
@media (min-width:641px){body.sandbox-mode nav .nav-sub{display:none!important}}
@media (max-width:640px){.sandbox-account-tabs{display:none!important}}

/* ---------- buttons: normal capitals everywhere (tabs, headings and small labels keep their capitals) ---------- */
:is(#content :is(.review-clear,.purchase-check button,#refreshPortfolio,.strategy-actions button,.holding-details-toggle),#applyStrategySettings,#saveStrategySettings,form#lumpConfig>button[type=submit],
 .custom-strategy-actions button,.strategy-holdings button,.bp-allocation-presets button,#budgetProfile .bp-plan-actions button,#budgetProfile .bp-control-actions button,.calc-presets button,
 .loan-schedule-head button,.loan-view button,.nw-own-add,.nw-own-actions button,.setup-go,.setup-skip,.weekly-toggle,#login .landing-signin #signin,.loan-primary){text-transform:none!important;letter-spacing:.03em!important;font-size:12px!important}
/* Sandbox holiday badge (folio-fun.js): phones leave it out so the header stays one row, as on the landing page. */
@media (max-width:640px){body.sandbox-mode>header .holiday-badge{display:none!important}}

/* ---------- Christmas village night (detailed scene, [data-night][data-scene=christmas]) ---------- */
.holiday-scene[data-night][data-scene=christmas] .hx-sky{background:radial-gradient(45% 60% at 84% 12%,rgba(170,200,255,.16),transparent 70%),radial-gradient(80% 60% at 45% 105%,rgba(60,90,170,.2),transparent 70%)}
.holiday-scene[data-night][data-scene=christmas] .hx-moon{background:radial-gradient(circle at 44% 40%,#ffffff 0,#e6edf8 55%,#b9c7de 100%);box-shadow:0 0 40px 10px rgba(190,210,255,.28),0 0 140px 60px rgba(120,150,230,.12)}
.holiday-scene[data-night][data-scene=christmas] .hx-moon:before,.holiday-scene[data-night][data-scene=christmas] .hx-moon:after{background:rgba(140,155,185,.22)}
.holiday-scene[data-night][data-scene=christmas] .hx-rim{stroke:rgba(200,220,255,.42)}
.holiday-scene[data-night][data-scene=christmas] .hx-fog{background:radial-gradient(45% 60% at 25% 60%,rgba(210,225,255,.07),transparent 70%),radial-gradient(40% 55% at 78% 70%,rgba(210,225,255,.06),transparent 70%)}
.holiday-scene[data-night] .hx-snowfield{fill:#141a2a}
.holiday-scene[data-night] .hx-snowedge{fill:none;stroke:rgba(220,232,255,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.holiday-scene[data-night] .hx-snow{fill:#d7e2f3;opacity:.86}
.holiday-scene[data-night] .hx-icicle{fill:#c8d6ee;opacity:.7}
.holiday-scene[data-night] .hx-snowball{fill:#cdd8ea}
.holiday-scene[data-night] .hx-scarf{fill:#b3263a}
.holiday-scene[data-night] .hx-coal{fill:#06050a}
.holiday-scene[data-night] .hx-carrot{fill:#e0752a}
.holiday-scene[data-night] .hx-wreath{fill:none;stroke:#2f6b3a;stroke-width:2.6}
.holiday-scene[data-night] .hx-ribbon{fill:none;stroke:rgba(255,226,160,.85);stroke-width:1;vector-effect:non-scaling-stroke}
.holiday-scene[data-night] .hx-ribbon.red{fill:#c42d3f;stroke:none}
.holiday-scene[data-night] .hx-wire{fill:none;stroke:#06050a;stroke-width:1;vector-effect:non-scaling-stroke}
.holiday-scene[data-night] .hx-bulb{filter:url(#hx-glow);animation:hx-twinkle 2.6s ease-in-out infinite}
.holiday-scene[data-night] .hx-bulb.b1{fill:#ff4d5e}.holiday-scene[data-night] .hx-bulb.b2{fill:#4fe08a;animation-delay:-.65s}
.holiday-scene[data-night] .hx-bulb.b3{fill:#ffd36b;animation-delay:-1.3s}.holiday-scene[data-night] .hx-bulb.b4{fill:#7fb6ff;animation-delay:-1.95s}
@keyframes hx-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
.holiday-scene[data-night] .hx-smoke{fill:rgba(205,215,235,.16);filter:url(#hx-soft);transform-box:fill-box;transform-origin:center;animation:hx-smoke 7s ease-out infinite}
.holiday-scene[data-night] .hx-smoke.s2{animation-delay:-2.3s}.holiday-scene[data-night] .hx-smoke.s3{animation-delay:-4.6s}
@keyframes hx-smoke{0%{opacity:0;transform:translate(-4px,14px) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.4)}}
.holiday-scene[data-night] .hx-star{fill:#ffd36b;filter:url(#hx-glow)}
.holiday-scene[data-night] .hx-star-glow{fill:rgba(255,210,110,.32);filter:url(#hx-soft);transform-box:fill-box;transform-origin:center;animation:hx-glowpulse 3.4s ease-in-out infinite}
@keyframes hx-glowpulse{0%,100%{opacity:.55}50%{opacity:1}}
.holiday-scene[data-night] .hx-gift.g1{fill:#b3263a}.holiday-scene[data-night] .hx-gift.g2{fill:#2f7a48}.holiday-scene[data-night] .hx-gift.g3{fill:#b08a3e}
.holiday-scene[data-night] .hx-lamp-glow{fill:rgba(255,190,100,.26);filter:url(#hx-soft)}
.holiday-scene[data-night] .hx-win.small{filter:none;animation:none;opacity:.85}
.holiday-scene[data-night] .hx-sleigh{width:96px;height:24px;top:54px;animation-duration:52s}
.holiday-scene[data-night] .hx-sleigh svg{fill:#0a0d18;animation:none}
.holiday-scene[data-night] .hx-sleigh .hx-sleigh-line{fill:none;stroke:#0a0d18;stroke-width:.9}
.holiday-scene[data-night][data-scene=christmas] .hx-flake{background:#e6eefb}
/* Light mode: pale navy silhouettes, white snow, the same warm windows and colored lights. */
.light .holiday-scene[data-night] .hx-snowfield{fill:#ffffff;opacity:.85}
.light .holiday-scene[data-night] .hx-snowedge{stroke:rgba(20,40,75,.2)}
.light .holiday-scene[data-night] :is(.hx-snow,.hx-icicle,.hx-snowball){fill:#ffffff;opacity:1;stroke:rgba(20,40,75,.18);stroke-width:.6;vector-effect:non-scaling-stroke}
.light .holiday-scene[data-night] .hx-wire{stroke:#8c94a5}
.light .holiday-scene[data-night] .hx-smoke{fill:rgba(120,130,150,.18)}
.light .holiday-scene[data-night] .hx-sleigh svg,.light .holiday-scene[data-night] .hx-sleigh .hx-sleigh-line{fill:#14284b;stroke:#14284b}
.light .holiday-scene[data-night] .hx-sleigh .hx-sleigh-line{fill:none}
.light .holiday-scene[data-night][data-scene=christmas] .hx-rim{stroke:rgba(176,138,62,.55)}
.light .holiday-scene[data-night][data-scene=christmas] .hx-flake{background:#9fb3d6}
.light .holiday-scene[data-night][data-scene=christmas] .hx-sky{display:block;opacity:.5}
.holiday-scene[data-night][data-scene=christmas] .hx-moon{right:72%}
.landing-holiday-band .holiday-scene[data-night][data-scene=christmas] .hx-moon{right:44%}
@media (max-width:700px){.holiday-scene[data-night][data-scene=christmas] .hx-moon{right:8%}}

/* ---------- "Quick tour" guided tour (calc-tour.js) ---------- */
/* ▶ Quick tour sits beside each calculator's page title (under it on phones), gold so new visitors see it. */
.calc-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin:0 0 10px}.calc-title h1{margin:0!important}
.calc-title .calc-tour-btn,.home-tour-btn{flex:none;margin:0;padding:9px 16px;min-height:38px;font:600 13px var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--gold)!important;border-radius:2px!important;color:var(--gold)!important;background:color-mix(in srgb,var(--gold) 12%,transparent)!important;cursor:pointer}
.calc-title .calc-tour-btn:hover,.calc-title .calc-tour-btn:focus-visible,.home-tour-btn:hover,.home-tour-btn:focus-visible{background:color-mix(in srgb,var(--gold) 22%,transparent)!important}
.calc-title .calc-tour-btn span,.home-tour-btn span{font-size:.8em;margin-right:3px}
body.light .home-tour-btn,body.light .calc-title .calc-tour-btn{color:#7a5d1f!important;border-color:#b08a3e!important;background:rgba(176,138,62,.12)!important}
body.light .calc-title .calc-tour-btn:hover,body.light .calc-title .calc-tour-btn:focus-visible,body.light .home-tour-btn:hover,body.light .home-tour-btn:focus-visible{background:rgba(176,138,62,.22)!important}
@media (max-width:640px){.calc-title h1{flex:1 1 100%}}
.loan-heading-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
/* Phones: Reset sits under the title, as Wealth-Calc's buttons do. */
@media (max-width:640px){.loan-calc .loan-heading{flex-wrap:wrap;gap:10px}.loan-calc .loan-heading>div:first-child{flex:1 1 100%}.loan-heading-actions{justify-content:flex-start}}
.ftour{position:fixed;inset:0;z-index:90;pointer-events:none}
.ftour-spot{position:fixed;border-radius:14px;box-shadow:0 0 0 200vmax rgba(5,8,18,.58),0 0 0 2px var(--gold),0 0 24px 2px color-mix(in srgb,var(--gold) 45%,transparent);transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .2s}
body.light .ftour-spot{box-shadow:0 0 0 200vmax rgba(20,40,75,.42),0 0 0 2px #b08a3e,0 0 24px 2px rgba(176,138,62,.45)}
.ftour-card{position:fixed;width:min(340px,calc(100vw - 24px));padding:16px 18px 14px;pointer-events:auto;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--border));border-radius:14px;
 background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,var(--gold) 10%),var(--panel));color:var(--text);box-shadow:0 24px 50px -18px rgba(0,0,0,.7);transition:left .35s ease,top .35s ease}
body.light .ftour-card{background:linear-gradient(180deg,#152a4f,#112342);border-color:#c9a45a;color:#f3ead6}
.ftour-pop{animation:ov-pop .28s cubic-bezier(.2,.8,.2,1)}
.ftour-head{display:flex;align-items:center;gap:10px;margin:0 30px 6px 0}
.ftour-count{font:500 10px/1.3 var(--mix-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
body.light .ftour-count{color:#e8c77f}
.ftour-dots{display:flex;gap:4px}.ftour-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,currentColor 25%,transparent)}.ftour-dots i.on{background:var(--gold)}
body.light .ftour-dots i.on{background:#e8c77f}
.ftour-title{display:block;font:600 18px/1.25 var(--mix-sans);margin:0 0 4px}
.ftour-text{margin:0 0 14px!important;font-size:14px;line-height:1.45;color:color-mix(in srgb,currentColor 82%,transparent)}
.ftour-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 12px}.ftour-links[hidden]{display:none}
.ftour-link{font-size:14px;color:var(--gold);text-underline-offset:3px}
body.light .ftour-link{color:#e8c77f}
.ftour-actions{display:flex;justify-content:flex-end;gap:8px}
.ftour-actions button{min-height:38px;padding:0 16px!important;border-radius:20px!important;font-size:14px!important}
.ftour-next{background:linear-gradient(180deg,#e2c27e,#c29a4c)!important;border-color:#d6b36c!important;color:#13213d!important}
.ftour-back{background:transparent!important;color:inherit!important;border-color:color-mix(in srgb,currentColor 35%,transparent)!important}
.ftour-close{position:absolute;top:8px;right:8px;width:32px;height:32px;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;opacity:.7;font-size:22px!important;line-height:1}
.ftour-card.ftour-sheet{left:12px!important;right:12px;top:auto!important;bottom:calc(72px + env(safe-area-inset-bottom));width:auto}
@media (prefers-reduced-motion:reduce){.ftour-spot,.ftour-card{transition:none}.ftour-pop{animation:none}}
.ftour-card.ftour-sheet.ftour-sheet-top{bottom:auto}
/* The one-time offer of Home's tour, out of the way of the page. */
.home-tour-btn{margin:0 0 0 12px;padding:6px 12px;min-height:32px;font-size:11px!important;vertical-align:middle}
/* Sandbox: ▶ Play mode beside Quick tour on an account's Home and beside Breakdown in the overview hero; opens /sandbox?mode=play. */
.play-mode-btn{display:inline-flex;align-items:center;box-sizing:border-box;margin:0 0 0 8px;padding:6px 12px;min-height:32px;font:600 11px var(--mix-cond)!important;letter-spacing:.12em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap;vertical-align:middle;border:1px solid var(--gold)!important;border-radius:2px!important;color:var(--gold)!important;background:color-mix(in srgb,var(--gold) 12%,transparent)!important}
.play-mode-btn:hover,.play-mode-btn:focus-visible{background:color-mix(in srgb,var(--gold) 22%,transparent)!important}
.play-mode-btn span{font-size:.8em;margin-right:3px}
body.light .play-mode-btn{color:#7a5d1f!important;border-color:#b08a3e!important;background:rgba(176,138,62,.12)!important}
.home-tour-offer{right:16px;bottom:16px;z-index:80}
@media (max-width:640px){.home-tour-btn{margin:0}.home-tour-offer{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));width:auto}}
/* Public Wealth-Calc on computers: the floating results stop below the pinned top bar, not under it. */
@media (min-width:801px){body.public-page .margin-calculator .calc-float{top:calc(var(--public-header,64px) + 16px)}}
/* Loan-Calc's floating results do the same: below the pinned top bar (public pages) or the Sandbox tab bar. */
@media (min-width:861px){.loan-calc .loan-results{top:calc(var(--pin-top,0px) + 16px);transition:top .25s ease}body.public-page .loan-calc .loan-results{top:calc(var(--public-header,64px) + 16px)}}

/* ---------- Thanksgiving and Christmas behind the Accounts hero, laptop and tablet widths ----------
   The panorama fades out behind the hero's two text columns (they sit 390px left and 300px right of center). Laptops see
   the whole panorama, smaller, and Thanksgiving's moon rises to the top, just left of Plan risk. Below that the scenery steps aside, as it
   does on phones. */
@media (min-width:961px){
 .account-grand-total .holiday-scene[data-night]:is([data-scene=thanksgiving],[data-scene=christmas]) .hx-land{-webkit-mask-image:linear-gradient(90deg,#000 calc(50% - 430px),transparent calc(50% - 392px),transparent calc(50% + 300px),#000 calc(50% + 350px));mask-image:linear-gradient(90deg,#000 calc(50% - 430px),transparent calc(50% - 392px),transparent calc(50% + 300px),#000 calc(50% + 350px))}
}
@media (min-width:701px) and (max-width:1280px){
 .account-grand-total .holiday-scene[data-night]:is([data-scene=thanksgiving],[data-scene=christmas]) .hx-land{height:18.75vw}
 .account-grand-total .holiday-scene[data-night][data-scene=thanksgiving] .hx-moon{top:34px;bottom:auto;right:124px;width:64px;height:64px}
}
@media (min-width:701px) and (max-width:960px){
 .account-grand-total .holiday-scene[data-night]:is([data-scene=thanksgiving],[data-scene=christmas]) .hx-land{display:none}
}
/* On phones Plan risk fills the hero's top right corner, so the moon crosses to the top left. */
@media (max-width:700px){
 .account-grand-total .holiday-scene[data-night] .hx-moon{right:auto;left:6%}
}
/* Computers (2026-11-02): less empty space at the top. The Accounts page and the Sandbox overview start the hero
   closer to the header; an account's title band (name, Quick tour, Home/Activity) sits tight above the Strategy row.
   The moon ring and holiday scenes keep their size; phones and tablets are unchanged. */
@media (min-width:1000px){
 body:has(article.account-home)>main{margin-top:6px!important}
 body:has(article.account-home) .sandbox-public-hero{margin-bottom:6px!important}
 body:has(.home-strategy-row)>header{padding-bottom:2px!important}
 body:has(.home-strategy-row)>header #title{margin-top:8px!important}
 body:has(.home-strategy-row)>main{margin-top:10px!important}
}