/* Themes (2026-09-26): the picker, and the few things a color swap alone can't do. Colors themselves are tokens (compass-theme-tokens.css, generated by tools/theme/build.py); this file uses them too. Three parts, in this order (2026-10-03; checked with tests/visual-check/style-diff.js): 1. unlayered — the theme picker and --gold-ink; 2. @layer compassAppRefresh — Vivid's page, sidebar, tiles and buttons (deliberately weaker: compassNavTop rules from other files may override them); 3. @layer compassNavTop — every other theme rule, in ONE block. compassNavTop is declared first (index.html), so its !important rules outrank every other layer: add new theme rules at the end of this block. */ .th-pick { display:flex; flex-wrap:wrap; gap:6px; } .th-opt { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:4px 10px 4px 5px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); color:var(--c-slate-35); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .th-opt.on { border-color:var(--c-teal-45); box-shadow:0 0 0 1px var(--c-teal-45) inset; color:var(--c-teal-45); } /* Swatches show each theme as it looks, whatever theme is active (fixed colors on purpose). */ .th-sw { display:inline-flex; width:26px; height:22px; border-radius:999px; overflow:hidden; border:1px solid rgba(0,0,0,.12); } .th-sw i { flex:1; } .th-sw-classic i:nth-child(1) { background:#f4f7f7; } .th-sw-classic i:nth-child(2) { background:#0f6b67; } .th-sw-classic i:nth-child(3) { background:#c68a1e; } .th-sw-minimal i:nth-child(1) { background:#f3f4f8; } .th-sw-minimal i:nth-child(2) { background:#ffffff; } .th-sw-minimal i:nth-child(3) { background:#2563eb; } .th-sw-vivid i:nth-child(1) { background:#f6f4ff; } .th-sw-vivid i:nth-child(2) { background:#00a3a3; } .th-sw-vivid i:nth-child(3) { background:#ff8a3d; } .th-sw-dark i:nth-child(1) { background:#0e1522; } .th-sw-dark i:nth-child(2) { background:#14b8a6; } .th-sw-dark i:nth-child(3) { background:#1e2a3d; } .th-sw-dusk i:nth-child(1) { background:#2B2D3B; } .th-sw-dusk i:nth-child(2) { background:#DDDE68; } .th-sw-dusk i:nth-child(3) { background:#A5B2EB; } .th-sw-fresh i:nth-child(1) { background:#e6efe3; } .th-sw-fresh i:nth-child(2) { background:#ffffff; } .th-sw-fresh i:nth-child(3) { background:#f2b31b; } .th-sw-focus i:nth-child(1) { background:#f6f5f2; } .th-sw-focus i:nth-child(2) { background:#ffffff; } .th-sw-focus i:nth-child(3) { background:#1f5f5b; } .th-sw-bold i:nth-child(1) { background:#0f2a3d; } .th-sw-bold i:nth-child(2) { background:#ffffff; } .th-sw-bold i:nth-child(3) { background:#4ec9b0; } /* sidebar: six compact swatches, three to a row */ .sb-theme { margin:0 0 10px; } .sb-theme .th-pick { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; } .sb-theme .th-opt { flex:1; justify-content:center; padding:4px; min-height:30px; } .sb-theme .th-opt span:last-child { display:none; } .plan-file-theme .plan-file-hd, .mts-theme strong { display:block; margin:0 0 6px; font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-55); } .mts-theme { padding:10px 4px 4px; } /* Gold used as TEXT (QA 2026-09-27): --gold is a light accent (2.2:1 on white; dark brown on black in Dark). Text uses --gold-ink, a deeper gold that the Dark theme turns light. */ :root { --gold-ink: var(--c-amber-45); } /* Everything below sits in the theme's first cascade layer: compass-app-theme.css (and two later layers) set these properties with layered !important, which an unlayered rule can't beat. */ @layer compassAppRefresh { /* Dark: the logo swaps to its white version (js/00-theme.js); other images drawn for a light page sit on a light chip; form controls use the dark scheme. */ :root[data-theme="dark"] img[src^="data:image/png"] { background:#f4f7f7; border-radius:10px; padding:2px; } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color-scheme:dark; } :root[data-theme="dark"] ::selection { background:var(--c-teal-45); color:var(--c-gray-99); } :root[data-theme="dusk"] img[src^="data:image/png"] { background:#f4f7f7; border-radius:10px; padding:2px; } :root[data-theme="dusk"] input, :root[data-theme="dusk"] select, :root[data-theme="dusk"] textarea { color-scheme:dark; } :root[data-theme="dusk"] ::selection { background:#A5B2EB; color:#22232e; } /* ---------------------------------------------------------------- Vivid: the colorful dashboard look A soft multi-color backdrop, a dark slate sidebar, white cards, and stat tiles filled with gradients. The gradient stops are fixed colors on purpose: they are this theme's own palette. */ :root[data-theme="vivid"] body { background: radial-gradient(1100px 650px at 0% 0%, rgba(90,170,250,.38), transparent 62%), radial-gradient(900px 700px at 100% 0%, rgba(170,140,250,.36), transparent 60%), radial-gradient(900px 700px at 100% 100%, rgba(250,120,180,.26), transparent 60%), radial-gradient(900px 700px at 0% 100%, rgba(60,210,190,.26), transparent 60%), #eef2f8 !important; background-attachment:fixed !important; } :root[data-theme="vivid"] .wrap, :root[data-theme="vivid"] .flow, :root[data-theme="vivid"] main { background:transparent !important; } /* sidebar (computer) */ :root[data-theme="vivid"] #mainToolNavigation.global-nav { background:linear-gradient(180deg,#2f3c4e 0%,#26313f 100%) !important; border-color:transparent !important; box-shadow:0 18px 40px -18px rgba(20,30,60,.55) !important; } :root[data-theme="vivid"] #mainToolNavigation .global-tab, :root[data-theme="vivid"] #mainToolNavigation .sb-steps button, :root[data-theme="vivid"] #mainToolNavigation .sb-steps strong { color:#d5deea !important; background:transparent !important; } :root[data-theme="vivid"] #mainToolNavigation .global-tab svg { color:#8fd0ff !important; stroke:currentColor; } :root[data-theme="vivid"] #mainToolNavigation .sb-hd, :root[data-theme="vivid"] #mainToolNavigation small { color:#8d9bb0 !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-num { background:rgba(255,255,255,.1) !important; color:#d5deea !important; border-color:transparent !important; } :root[data-theme="vivid"] #mainToolNavigation .global-tab:hover { background:rgba(255,255,255,.07) !important; } :root[data-theme="vivid"] #mainToolNavigation .global-tab.active { background:linear-gradient(120deg,#2b84cf,#6d5ce6) !important; color:#fff !important; box-shadow:0 8px 18px -8px rgba(63,120,245,.8) !important; } :root[data-theme="vivid"] #mainToolNavigation .global-tab.active svg { color:#fff !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-status, :root[data-theme="vivid"] #mainToolNavigation .sb-guide { background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.14) !important; color:#e7eef7 !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-status * { color:inherit !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-status strong, :root[data-theme="vivid"] #mainToolNavigation .sb-status b { color:#7ee0b5 !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-status .sb-btn { background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.22) !important; color:#fff !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-status .sb-btn-primary { background:linear-gradient(120deg,#2b84cf,#6d5ce6) !important; border-color:transparent !important; } :root[data-theme="vivid"] #mainToolNavigation .sb-bottom { background:#26313f !important; border-color:rgba(255,255,255,.1) !important; box-shadow:none !important; } :root[data-theme="vivid"] #mainToolNavigation .th-opt { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); } :root[data-theme="vivid"] #mainToolNavigation .th-opt.on { border-color:#8fd0ff; box-shadow:0 0 0 1px #8fd0ff inset; } /* stat tiles: gradients with white numbers (sky → periwinkle, mint → teal, pink → coral, lilac → purple) */ :root[data-theme="vivid"] { --vv-g1:linear-gradient(135deg,#2b84cf 0%,#5b6ad9 100%); --vv-g2:linear-gradient(135deg,#17907a 0%,#127a74 100%); --vv-g3:linear-gradient(135deg,#d64a78 0%,#d4503f 100%); --vv-g4:linear-gradient(135deg,#8a5fd6 0%,#6d48c9 100%); } /* deep enough for white numbers (2026-10-03 visual check) */ :root[data-theme="vivid"] #toolView #acctTiles > div, :root[data-theme="vivid"] #cashflowView .cf-sk-chip, :root[data-theme="vivid"] #taxesView .tx-chip { border:0 !important; color:#fff !important; box-shadow:0 10px 24px -12px rgba(40,50,100,.55) !important; } :root[data-theme="vivid"] #toolView #acctTiles > div *, :root[data-theme="vivid"] #cashflowView .cf-sk-chip *, :root[data-theme="vivid"] #taxesView .tx-chip * { color:#fff !important; border-color:rgba(255,255,255,.35) !important; } :root[data-theme="vivid"] #toolView #acctTiles > div:nth-child(4n+1), :root[data-theme="vivid"] #cashflowView .cf-sk-chip:nth-child(4n+1), :root[data-theme="vivid"] #taxesView .tx-chip:nth-child(4n+1) { background:var(--vv-g1) !important; } :root[data-theme="vivid"] #toolView #acctTiles > div:nth-child(4n+2), :root[data-theme="vivid"] #cashflowView .cf-sk-chip:nth-child(4n+2), :root[data-theme="vivid"] #taxesView .tx-chip:nth-child(4n+2) { background:var(--vv-g2) !important; } :root[data-theme="vivid"] #toolView #acctTiles > div:nth-child(4n+3), :root[data-theme="vivid"] #cashflowView .cf-sk-chip:nth-child(4n+3), :root[data-theme="vivid"] #taxesView .tx-chip:nth-child(4n+3) { background:var(--vv-g3) !important; } :root[data-theme="vivid"] #toolView #acctTiles > div:nth-child(4n+4), :root[data-theme="vivid"] #cashflowView .cf-sk-chip:nth-child(4n+4), :root[data-theme="vivid"] #taxesView .tx-chip:nth-child(4n+4) { background:var(--vv-g4) !important; } /* primary buttons and the active chips: the same sky → violet gradient */ :root[data-theme="vivid"] .runbtn, :root[data-theme="vivid"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="vivid"] .xb-btn-primary, :root[data-theme="vivid"] .pchg-go, :root[data-theme="vivid"] .lb-btn.lb-primary, :root[data-theme="vivid"] .mf-ab-primary, :root[data-theme="vivid"] .preset-btn.active-scenario { background-image:linear-gradient(120deg,#2b84cf 0%,#6d5ce6 100%) !important; border-color:transparent !important; color:#fff !important; } /* phone: the tab bar's active tab */ :root[data-theme="vivid"] .mobile-tabbar button.active, :root[data-theme="vivid"] .mobile-tabbar [aria-current="page"] { background:linear-gradient(120deg,rgba(63,169,245,.16),rgba(139,124,246,.18)) !important; } } /* Vivid, Results stat tiles (js/13 colors the values inline as var(--dash-tone, ), so --dash-tone turns them white): compass-dashboard.css styles these cards in the compassNavTop layer, which is declared first (index.html) and so outranks compassAppRefresh for !important. Each card gets a fixed gradient by what it shows (some cards are hidden, so position-based colors would shift). */ @layer compassNavTop { :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) { border:0 !important; color:#fff !important; box-shadow:0 10px 24px -12px rgba(40,50,100,.55) !important; --dash-tone:#fff; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) *, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) * { color:#fff !important; stroke:#fff; border-color:rgba(255,255,255,.35) !important; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) .dash-card-iconwrap, :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) .dash-card-iconwrap { background:rgba(255,255,255,.22) !important; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) { background:var(--vv-g1) !important; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) { background:var(--vv-g2) !important; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) { background:var(--vv-g3) !important; } :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure), :root[data-theme="vivid"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) { background:var(--vv-g4) !important; } /* ---------------------------------------------------------------- Dark: navy dashboard (2026-09-27) From the user's references: deep navy page, darker cards with a hairline border and 16px corners, one bright teal accent, a teal-gradient hero card, tinted icon chips, tinted status pills, teal table headers. The tokens already turn every color navy/teal (tools/theme/build.py); these rules add what a color swap can't. Fixed colors on purpose: they are this theme's own palette. In compassNavTop (declared first in index.html), the only layer whose !important outranks the page's own layered styles. */ @media screen { /* printing always uses Classic */ :root[data-theme="dark"] { --dk-page:#0e1522; --dk-side:#0f1725; --dk-panel:#141d2d; --dk-card:#111a29; --dk-card2:#162133; --dk-input:#0c1320; --dk-line:rgba(148,163,184,.12); --dk-line2:rgba(148,163,184,.2); --dk-text:#e6edf6; --dk-muted:#94a3b8; --dk-teal:#14b8a6; --dk-teal-hi:#2dd4bf; --dk-teal-lo:#0d9488; --dk-hero:linear-gradient(135deg,#155e75 0%,#0f766e 55%,#0d9488 100%); /* deeper ends: white text stays readable (2026-10-03 visual check) */ --dk-hero-warn:linear-gradient(135deg,#78350f 0%,#92400e 55%,#b45309 100%); --dk-hero-risk:linear-gradient(135deg,#881337 0%,#be123c 60%,#e11d48 100%); --dk-shadow:0 14px 32px -20px rgba(0,0,0,.9); } /* page and frame */ :root[data-theme="dark"] body { background:radial-gradient(900px 520px at 100% 0%, rgba(20,184,166,.10), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(59,130,246,.07), transparent 60%), var(--dk-page) !important; background-attachment:fixed !important; } :root[data-theme="dark"] .wrap, :root[data-theme="dark"] #toolView, :root[data-theme="dark"] #resultsView, :root[data-theme="dark"] [id$="View"] { background-color:transparent !important; } :root[data-theme="dark"] .wrap { border-color:var(--dk-line) !important; box-shadow:none !important; } :root[data-theme="dark"] .app-topbar, :root[data-theme="dark"] .compass-topbar, :root[data-theme="dark"] header.top { background:transparent !important; border-color:var(--dk-line) !important; } /* sidebar */ :root[data-theme="dark"] #mainToolNavigation.global-nav { background:var(--dk-side) !important; border-right:1px solid var(--dk-line) !important; } :root[data-theme="dark"] #mainToolNavigation .global-tab { color:#cbd5e1 !important; } :root[data-theme="dark"] #mainToolNavigation .global-tab svg { color:var(--dk-muted) !important; } :root[data-theme="dark"] #mainToolNavigation .global-tab:hover { background:rgba(148,163,184,.08) !important; } :root[data-theme="dark"] #mainToolNavigation .global-tab.active { background:linear-gradient(120deg,#0f766e,#0d9488) !important; color:#fff !important; box-shadow:0 10px 22px -12px rgba(20,184,166,.9) !important; } :root[data-theme="dark"] #mainToolNavigation .global-tab.active svg { color:#fff !important; } :root[data-theme="dark"] #mainToolNavigation .sb-hd { color:#8a99ae !important; } :root[data-theme="dark"] #mainToolNavigation .sb-status, :root[data-theme="dark"] #mainToolNavigation .sb-guide { background:var(--dk-card) !important; border-color:var(--dk-line) !important; } /* surfaces */ :root[data-theme="dark"] .panel, :root[data-theme="dark"] #planBar, :root[data-theme="dark"] .compass-plan-steps { background:var(--dk-panel) !important; border:1px solid var(--dk-line) !important; box-shadow:none !important; } :root[data-theme="dark"] .dash-card, :root[data-theme="dark"] .acct-card, :root[data-theme="dark"] .po-row, :root[data-theme="dark"] #acctTiles > div, :root[data-theme="dark"] .fan-chart-shell, :root[data-theme="dark"] .pc-card, :root[data-theme="dark"] .nw-card, :root[data-theme="dark"] .tx-card, :root[data-theme="dark"] .cf-card, :root[data-theme="dark"] .rn-input-check { background:linear-gradient(180deg,var(--dk-card2) 0%,var(--dk-card) 100%) !important; border:1px solid var(--dk-line) !important; border-radius:16px !important; box-shadow:var(--dk-shadow) !important; } :root[data-theme="dark"] .dash-card:hover, :root[data-theme="dark"] .acct-card:hover, :root[data-theme="dark"] .po-row:hover { border-color:var(--dk-line2) !important; } /* the hero: result banner (and the first account tile) as a teal gradient card with white type */ :root[data-theme="dark"] #resultsPanel .dash-banner { border:0 !important; border-radius:18px !important; background:var(--dk-hero) !important; box-shadow:0 22px 44px -22px rgba(20,184,166,.75) !important; } :root[data-theme="dark"] #resultsPanel .dash-banner.warn { background:var(--dk-hero-warn) !important; box-shadow:0 22px 44px -22px rgba(245,158,11,.6) !important; } :root[data-theme="dark"] #resultsPanel .dash-banner.risk { background:var(--dk-hero-risk) !important; box-shadow:0 22px 44px -22px rgba(244,63,94,.6) !important; } :root[data-theme="dark"] #resultsPanel .dash-banner, :root[data-theme="dark"] #resultsPanel .dash-banner * { color:#fff !important; } :root[data-theme="dark"] #toolView #acctTiles > div:first-child { background:var(--dk-hero) !important; border:0 !important; box-shadow:0 18px 36px -20px rgba(20,184,166,.7) !important; } :root[data-theme="dark"] #toolView #acctTiles > div:first-child * { color:#fff !important; } /* stat tiles: white numbers, tinted icon chips */ :root[data-theme="dark"] #resultsPanel .dash-grid .dash-card { --dash-tone:#f1f5f9; } :root[data-theme="dark"] #resultsPanel .dash-card-value { color:var(--dash-tone) !important; letter-spacing:-.01em; } :root[data-theme="dark"] #resultsPanel .dash-card-label { color:#cbd5e1 !important; border-color:transparent !important; } :root[data-theme="dark"] #resultsPanel .dash-card-sub { color:var(--dk-muted) !important; } :root[data-theme="dark"] #resultsPanel .dash-card-iconwrap { background:rgba(20,184,166,.14) !important; border:1px solid rgba(45,212,191,.22) !important; border-radius:12px !important; } :root[data-theme="dark"] #resultsPanel .dash-card-iconwrap svg { stroke:var(--dk-teal-hi) !important; } :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap, :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap { background:rgba(244,63,94,.14) !important; border-color:rgba(251,113,133,.25) !important; } :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg, :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg { stroke:#fb7185 !important; } :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap { background:rgba(245,158,11,.14) !important; border-color:rgba(251,191,36,.25) !important; } :root[data-theme="dark"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg { stroke:#fbbf24 !important; } /* buttons */ :root[data-theme="dark"] .runbtn, :root[data-theme="dark"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="dark"] .xb-btn-primary, :root[data-theme="dark"] .pchg-go, :root[data-theme="dark"] .lb-btn.lb-primary, :root[data-theme="dark"] .sb-btn-primary, :root[data-theme="dark"] .preset-btn.active, :root[data-theme="dark"] .toggle-btn.active:not(.adv-check-card) { background:linear-gradient(120deg,#0f766e,#0d9488) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 10px 22px -14px rgba(20,184,166,.9) !important; } :root[data-theme="dark"] .preset-btn:not(.active) { background:rgba(148,163,184,.06) !important; border-color:var(--dk-line2) !important; color:var(--dk-teal-hi) !important; } :root[data-theme="dark"] .preset-btn:not(.active):hover { background:rgba(20,184,166,.12) !important; border-color:rgba(45,212,191,.45) !important; } /* inputs */ :root[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background:var(--dk-input) !important; border:1px solid var(--dk-line2) !important; border-radius:10px !important; color:var(--dk-text) !important; } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color:var(--dk-teal) !important; box-shadow:0 0 0 3px rgba(20,184,166,.22) !important; outline:none !important; } :root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color:#5b6b82 !important; } /* tables: the teal header band */ :root[data-theme="dark"] table thead th, :root[data-theme="dark"] table thead td { background:#0f766e !important; color:#ecfeff !important; border-color:#0f766e !important; } :root[data-theme="dark"] table thead th *, :root[data-theme="dark"] table thead td * { color:#ccfbf1 !important; } :root[data-theme="dark"] table thead tr > :first-child { border-top-left-radius:10px; } :root[data-theme="dark"] table thead tr > :last-child { border-top-right-radius:10px; } :root[data-theme="dark"] table tbody tr:hover > * { background:rgba(148,163,184,.05); } :root[data-theme="dark"] table td, :root[data-theme="dark"] table th { border-color:var(--dk-line) !important; } /* pills and chips: tinted fill + hairline border */ :root[data-theme="dark"] .acct-pill, :root[data-theme="dark"] .acct-badge, :root[data-theme="dark"] .pill, :root[data-theme="dark"] .badge { border:1px solid rgba(45,212,191,.3) !important; background:rgba(20,184,166,.12) !important; color:var(--dk-teal-hi) !important; border-radius:8px !important; } /* segmented switches (Today's $ / Future $, Every year …): the selected half in teal, not green */ :root[data-theme="dark"] button[aria-pressed="true"], :root[data-theme="dark"] [role="tab"][aria-selected="true"], :root[data-theme="dark"] .nw-seg.is-on { background:linear-gradient(120deg,#0f766e,#0d9488) !important; border-color:transparent !important; color:#fff !important; } /* the live bar and sheets: glass */ :root[data-theme="dark"] #liveBar.lb, :root[data-theme="dark"] .mobile-tools-sheet .mts-panel { background:rgba(15,23,37,.97) !important; box-shadow:0 18px 40px -16px rgba(0,0,0,.9) !important; border:1px solid var(--dk-line2) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* phone tab bar */ :root[data-theme="dark"] .mobile-tabbar { background:rgba(15,23,37,.94) !important; border-top:1px solid var(--dk-line) !important; } :root[data-theme="dark"] .mobile-tabbar button.active, :root[data-theme="dark"] .mobile-tabbar [aria-current="page"] { background:rgba(20,184,166,.16) !important; color:var(--dk-teal-hi) !important; } } /* ---------------------------------------------------------------- Light (id "minimal"): clean white dashboard (2026-09-27) From the user's light references (Flowdex, Revenlo, Markets): a soft cool-gray page with a faint lavender wash, white cards with hairline borders and big corners, one royal-blue accent, a solid blue hero card, white icon chips, gray-track segmented switches with a white selected pill, and quiet gray table headers. Replaces the old white-and-gray Minimal look. Fixed colors on purpose: this theme's own palette. */ @media screen { :root[data-theme="minimal"] { --lt-page:#f3f4f8; --lt-card:#ffffff; --lt-line:#e8eaf0; --lt-line2:#dde1e8; --lt-ink:#0f172a; --lt-muted:#667085; --lt-blue:#2563eb; --lt-blue2:#3b82f6; --lt-track:#f1f2f6; --lt-hero:linear-gradient(135deg,#1d4ed8 0%,#2563eb 55%,#3b82f6 100%); --lt-hero-warn:linear-gradient(135deg,#92400e 0%,#a34a0b 55%,#b45309 100%); --lt-hero-risk:linear-gradient(135deg,#9f1239 0%,#be123c 60%,#e11d48 100%); --lt-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 28px -18px rgba(16,24,40,.18); } :root[data-theme="minimal"] body { background:radial-gradient(900px 480px at 85% -5%, rgba(167,139,250,.16), transparent 62%), radial-gradient(900px 520px at 10% -10%, rgba(96,165,250,.14), transparent 60%), var(--lt-page) !important; background-attachment:fixed !important; } :root[data-theme="minimal"] .wrap, :root[data-theme="minimal"] [id$="View"] { background-color:transparent !important; } :root[data-theme="minimal"] .wrap { border-color:var(--lt-line) !important; box-shadow:none !important; } /* sidebar: white, solid blue active item */ :root[data-theme="minimal"] #mainToolNavigation.global-nav { background:rgba(255,255,255,.86) !important; border-right:1px solid var(--lt-line) !important; } :root[data-theme="minimal"] #mainToolNavigation .global-tab { color:#344054 !important; } :root[data-theme="minimal"] #mainToolNavigation .global-tab svg { color:#667085 !important; } :root[data-theme="minimal"] #mainToolNavigation .global-tab:hover { background:var(--lt-track) !important; } :root[data-theme="minimal"] #mainToolNavigation .global-tab.active { background:var(--lt-blue) !important; color:#fff !important; box-shadow:0 8px 18px -10px rgba(37,99,235,.7) !important; } :root[data-theme="minimal"] #mainToolNavigation .global-tab.active svg { color:#fff !important; } :root[data-theme="minimal"] #mainToolNavigation .sb-status, :root[data-theme="minimal"] #mainToolNavigation .sb-guide { background:var(--lt-card) !important; border-color:var(--lt-line) !important; box-shadow:var(--lt-shadow) !important; } /* surfaces */ :root[data-theme="minimal"] .panel, :root[data-theme="minimal"] #planBar, :root[data-theme="minimal"] .compass-plan-steps { background:rgba(255,255,255,.7) !important; border:1px solid var(--lt-line) !important; border-radius:22px !important; box-shadow:none !important; } :root[data-theme="minimal"] .dash-card, :root[data-theme="minimal"] .acct-card, :root[data-theme="minimal"] .po-row, :root[data-theme="minimal"] #acctTiles > div, :root[data-theme="minimal"] .fan-chart-shell, :root[data-theme="minimal"] .pc-card, :root[data-theme="minimal"] .nw-card, :root[data-theme="minimal"] .tx-card, :root[data-theme="minimal"] .cf-card, :root[data-theme="minimal"] .rn-input-check { background:var(--lt-card) !important; border:1px solid var(--lt-line) !important; border-radius:18px !important; box-shadow:var(--lt-shadow) !important; } :root[data-theme="minimal"] .dash-card:hover, :root[data-theme="minimal"] .acct-card:hover, :root[data-theme="minimal"] .po-row:hover { border-color:var(--lt-line2) !important; } /* the hero (2026-10-08, the user: no harsh blue): a white card like the rest, the verdict in the status color */ :root[data-theme="minimal"] #resultsPanel .dash-banner { border:1px solid var(--lt-line) !important; border-radius:20px !important; background:var(--lt-card) !important; box-shadow:var(--lt-shadow) !important; --lt-st:var(--lt-blue); --lt-st-rgb:37,99,235; } :root[data-theme="minimal"] #resultsPanel .dash-banner.warn { --lt-st:#b45309; --lt-st-rgb:180,83,9; } :root[data-theme="minimal"] #resultsPanel .dash-banner.risk { --lt-st:#be123c; --lt-st-rgb:190,18,60; } :root[data-theme="minimal"] #resultsPanel .dash-banner, :root[data-theme="minimal"] #resultsPanel .dash-banner * { color:var(--lt-ink) !important; } :root[data-theme="minimal"] #toolView #acctTiles > div:first-child { background:var(--lt-hero) !important; border:0 !important; box-shadow:0 16px 32px -18px rgba(37,99,235,.7) !important; } :root[data-theme="minimal"] #toolView #acctTiles > div:first-child * { color:#fff !important; } /* stat tiles: big dark numbers, white icon chips with a hairline border */ :root[data-theme="minimal"] #resultsPanel .dash-grid .dash-card { --dash-tone:var(--lt-ink); } :root[data-theme="minimal"] #resultsPanel .dash-card-value { color:var(--dash-tone) !important; letter-spacing:-.015em; } :root[data-theme="minimal"] #resultsPanel .dash-card-label { color:#475467 !important; border-color:transparent !important; } :root[data-theme="minimal"] #resultsPanel .dash-card-sub { color:var(--lt-muted) !important; } :root[data-theme="minimal"] #resultsPanel .dash-card-iconwrap { background:#fff !important; border:1px solid var(--lt-line2) !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(16,24,40,.06) !important; } :root[data-theme="minimal"] #resultsPanel .dash-card-iconwrap svg { stroke:var(--lt-blue) !important; } :root[data-theme="minimal"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg, :root[data-theme="minimal"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg { stroke:#e11d48 !important; } :root[data-theme="minimal"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg { stroke:#d97706 !important; } /* buttons: solid blue primary; quiet white secondary */ :root[data-theme="minimal"] .runbtn, :root[data-theme="minimal"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="minimal"] .xb-btn-primary, :root[data-theme="minimal"] .pchg-go, :root[data-theme="minimal"] .lb-btn.lb-primary, :root[data-theme="minimal"] .sb-btn-primary, :root[data-theme="minimal"] .preset-btn.active, :root[data-theme="minimal"] .toggle-btn.active:not(.adv-check-card) { background:var(--lt-blue) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 8px 18px -12px rgba(37,99,235,.8) !important; } :root[data-theme="minimal"] .preset-btn:not(.active) { background:#fff !important; border-color:var(--lt-line2) !important; color:#1e3a8a !important; box-shadow:0 1px 2px rgba(16,24,40,.05) !important; } :root[data-theme="minimal"] .preset-btn:not(.active):hover { background:#f5f8ff !important; border-color:#bfd0fb !important; } /* segmented switches: gray track, white selected pill (the references' Price / Market / News) */ :root[data-theme="minimal"] .fan-dollar-switch, :root[data-theme="minimal"] .yb-seg, :root[data-theme="minimal"] .cf-sk-dollars, :root[data-theme="minimal"] .nw-segs { background:var(--lt-track) !important; border-color:var(--lt-line) !important; } :root[data-theme="minimal"] button[aria-pressed="true"], :root[data-theme="minimal"] .nw-seg.is-on { background:#fff !important; color:var(--lt-ink) !important; border-color:var(--lt-line2) !important; box-shadow:0 1px 3px rgba(16,24,40,.12) !important; } /* inputs */ :root[data-theme="minimal"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="minimal"] select, :root[data-theme="minimal"] textarea { background:#fff !important; border:1px solid var(--lt-line2) !important; border-radius:10px !important; color:var(--lt-ink) !important; } :root[data-theme="minimal"] input:focus, :root[data-theme="minimal"] select:focus, :root[data-theme="minimal"] textarea:focus { border-color:var(--lt-blue) !important; box-shadow:0 0 0 3px rgba(37,99,235,.16) !important; outline:none !important; } /* tables: quiet gray header band */ :root[data-theme="minimal"] table thead th, :root[data-theme="minimal"] table thead td { background:#f6f7f9 !important; color:#475467 !important; border-color:var(--lt-line) !important; } :root[data-theme="minimal"] table thead tr > :first-child { border-top-left-radius:10px; } :root[data-theme="minimal"] table thead tr > :last-child { border-top-right-radius:10px; } :root[data-theme="minimal"] table tbody tr:hover > * { background:#f9fafb; } :root[data-theme="minimal"] table td, :root[data-theme="minimal"] table th { border-color:var(--lt-line) !important; } /* pills */ :root[data-theme="minimal"] .acct-pill, :root[data-theme="minimal"] .acct-badge, :root[data-theme="minimal"] .pill, :root[data-theme="minimal"] .badge { border:1px solid #d6e2fd !important; background:#eff4ff !important; color:#1d4ed8 !important; border-radius:8px !important; } /* live bar, sheets, phone tab bar */ :root[data-theme="minimal"] #liveBar.lb, :root[data-theme="minimal"] .mobile-tools-sheet .mts-panel { background:rgba(255,255,255,.97) !important; border:1px solid var(--lt-line) !important; box-shadow:0 16px 36px -18px rgba(16,24,40,.35) !important; } :root[data-theme="minimal"] .mobile-tabbar { background:rgba(255,255,255,.96) !important; border-top:1px solid var(--lt-line) !important; } :root[data-theme="minimal"] .mobile-tabbar button.active, :root[data-theme="minimal"] .mobile-tabbar [aria-current="page"] { background:#eff4ff !important; color:var(--lt-blue) !important; } } /* ---------------------------------------------------------------- Dusk: the reading-app dark look (2026-10-01) From the user's reference (Black Rock #2B2D3B, Blue Suede #494C65, Daemonette #676386, Succulent Lime #DDDE68, Wondrous Wisteria #A5B2EB, Persian Orange #DA935D). Built from the Dark rules with that palette; fixed colors on purpose. */ @media screen { /* printing always uses Classic */ :root[data-theme="dusk"] { --du-page:#2B2D3B; --du-side:#262835; --du-panel:#313345; --du-card:#383b51; --du-card2:#3f4259; --du-input:#2a2c3b; --du-line:rgba(165,178,235,.14); --du-line2:rgba(165,178,235,.26); --du-text:#eef0fb; --du-muted:#b4b8d4; --du-teal:#DDDE68; --du-teal-hi:#e6e78c; --du-teal-lo:#c9ca4f; --du-lime:#DDDE68; --du-wis:#A5B2EB; --du-orange:#DA935D; --du-violet:#676386; --du-hero:linear-gradient(135deg,#dddE68 0%,#e6e889 100%); --du-hero-warn:linear-gradient(135deg,#d7884d 0%,#e6a676 100%); --du-hero-risk:linear-gradient(135deg,#e88a8a 0%,#f2b0a8 100%); --du-shadow:0 14px 30px -20px rgba(8,8,20,.9); } /* page and frame */ :root[data-theme="dusk"] body { background:radial-gradient(900px 520px at 100% 0%, rgba(165,178,235,.16), transparent 62%), radial-gradient(800px 600px at 0% 100%, rgba(218,147,93,.07), transparent 60%), var(--du-page) !important; background-attachment:fixed !important; } :root[data-theme="dusk"] .wrap, :root[data-theme="dusk"] #toolView, :root[data-theme="dusk"] #resultsView, :root[data-theme="dusk"] [id$="View"] { background-color:transparent !important; } :root[data-theme="dusk"] .wrap { border-color:var(--du-line) !important; box-shadow:none !important; } :root[data-theme="dusk"] .app-topbar, :root[data-theme="dusk"] .compass-topbar, :root[data-theme="dusk"] header.top { background:transparent !important; border-color:var(--du-line) !important; } /* sidebar */ :root[data-theme="dusk"] #mainToolNavigation.global-nav { background:var(--du-side) !important; border-right:1px solid var(--du-line) !important; } :root[data-theme="dusk"] #mainToolNavigation .global-tab { color:#d9dcf5 !important; } :root[data-theme="dusk"] #mainToolNavigation .global-tab svg { color:var(--du-muted) !important; } :root[data-theme="dusk"] #mainToolNavigation .global-tab:hover { background:rgba(165,178,235,.08) !important; } :root[data-theme="dusk"] #mainToolNavigation .global-tab.active { background:linear-gradient(120deg,#d2d35a,#dddE68) !important; color:#22232e !important; box-shadow:0 10px 22px -12px rgba(221,222,104,.9) !important; } :root[data-theme="dusk"] #mainToolNavigation .global-tab.active svg { color:#22232e !important; } :root[data-theme="dusk"] #mainToolNavigation .sb-hd { color:#9ea3c4 !important; } :root[data-theme="dusk"] #mainToolNavigation .sb-status, :root[data-theme="dusk"] #mainToolNavigation .sb-guide { background:var(--du-card) !important; border-color:var(--du-line) !important; } /* surfaces */ :root[data-theme="dusk"] .panel, :root[data-theme="dusk"] #planBar, :root[data-theme="dusk"] .compass-plan-steps { background:var(--du-panel) !important; border:1px solid var(--du-line) !important; box-shadow:none !important; } :root[data-theme="dusk"] .dash-card, :root[data-theme="dusk"] .acct-card, :root[data-theme="dusk"] .po-row, :root[data-theme="dusk"] #acctTiles > div, :root[data-theme="dusk"] .fan-chart-shell, :root[data-theme="dusk"] .pc-card, :root[data-theme="dusk"] .nw-card, :root[data-theme="dusk"] .tx-card, :root[data-theme="dusk"] .cf-card, :root[data-theme="dusk"] .rn-input-check { background:linear-gradient(180deg,var(--du-card2) 0%,var(--du-card) 100%) !important; border:1px solid var(--du-line) !important; border-radius:16px !important; box-shadow:var(--du-shadow) !important; } :root[data-theme="dusk"] .dash-card:hover, :root[data-theme="dusk"] .acct-card:hover, :root[data-theme="dusk"] .po-row:hover { border-color:var(--du-line2) !important; } /* the hero: result banner (and the first account tile) as a teal gradient card with white type */ :root[data-theme="dusk"] #resultsPanel .dash-banner { border:0 !important; border-radius:18px !important; background:var(--du-hero) !important; box-shadow:0 22px 44px -22px rgba(221,222,104,.75) !important; } :root[data-theme="dusk"] #resultsPanel .dash-banner.warn { background:var(--du-hero-warn) !important; box-shadow:0 22px 44px -22px rgba(218,147,93,.6) !important; } :root[data-theme="dusk"] #resultsPanel .dash-banner.risk { background:var(--du-hero-risk) !important; box-shadow:0 22px 44px -22px rgba(242,163,163,.6) !important; } :root[data-theme="dusk"] #resultsPanel .dash-banner, :root[data-theme="dusk"] #resultsPanel .dash-banner * { color:#22232e !important; } :root[data-theme="dusk"] #toolView #acctTiles > div:first-child { background:var(--du-hero) !important; border:0 !important; box-shadow:0 18px 36px -20px rgba(221,222,104,.7) !important; } :root[data-theme="dusk"] #toolView #acctTiles > div:first-child * { color:#22232e !important; } /* stat tiles: white numbers, tinted icon chips */ :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card { --dash-tone:#22232e; } :root[data-theme="dusk"] #resultsPanel .dash-card-value { color:var(--dash-tone) !important; letter-spacing:-.01em; } :root[data-theme="dusk"] #resultsPanel .dash-card-label { color:#d9dcf5 !important; border-color:transparent !important; } :root[data-theme="dusk"] #resultsPanel .dash-card-sub { color:var(--du-muted) !important; } :root[data-theme="dusk"] #resultsPanel .dash-card-iconwrap { background:rgba(221,222,104,.14) !important; border:1px solid rgba(221,222,104,.22) !important; border-radius:12px !important; } :root[data-theme="dusk"] #resultsPanel .dash-card-iconwrap svg { stroke:var(--du-teal-hi) !important; } :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap { background:rgba(242,163,163,.14) !important; border-color:rgba(242,163,163,.25) !important; } :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg { stroke:#f2a3a3 !important; } :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap { background:rgba(218,147,93,.14) !important; border-color:rgba(218,147,93,.25) !important; } :root[data-theme="dusk"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg { stroke:#DA935D !important; } /* buttons */ :root[data-theme="dusk"] .runbtn, :root[data-theme="dusk"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="dusk"] .xb-btn-primary, :root[data-theme="dusk"] .pchg-go, :root[data-theme="dusk"] .lb-btn.lb-primary, :root[data-theme="dusk"] .sb-btn-primary, :root[data-theme="dusk"] .preset-btn.active, :root[data-theme="dusk"] .toggle-btn.active:not(.adv-check-card) { background:linear-gradient(120deg,#d2d35a,#dddE68) !important; border-color:transparent !important; color:#22232e !important; box-shadow:0 10px 22px -14px rgba(221,222,104,.9) !important; } :root[data-theme="dusk"] .preset-btn:not(.active) { background:rgba(165,178,235,.06) !important; border-color:var(--du-line2) !important; color:var(--du-teal-hi) !important; } :root[data-theme="dusk"] .preset-btn:not(.active):hover { background:rgba(221,222,104,.12) !important; border-color:rgba(221,222,104,.45) !important; } /* inputs */ :root[data-theme="dusk"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="dusk"] select, :root[data-theme="dusk"] textarea { background:var(--du-input) !important; border:1px solid var(--du-line2) !important; border-radius:10px !important; color:var(--du-text) !important; } :root[data-theme="dusk"] input:focus, :root[data-theme="dusk"] select:focus, :root[data-theme="dusk"] textarea:focus { border-color:var(--du-teal) !important; box-shadow:0 0 0 3px rgba(221,222,104,.22) !important; outline:none !important; } :root[data-theme="dusk"] input::placeholder, :root[data-theme="dusk"] textarea::placeholder { color:#8a8fb0 !important; } /* tables: the teal header band */ :root[data-theme="dusk"] table thead th, :root[data-theme="dusk"] table thead td { background:#494C65 !important; color:#eef0fb !important; border-color:#494C65 !important; } :root[data-theme="dusk"] table thead th *, :root[data-theme="dusk"] table thead td * { color:#e3e6fa !important; } :root[data-theme="dusk"] table thead tr > :first-child { border-top-left-radius:10px; } :root[data-theme="dusk"] table thead tr > :last-child { border-top-right-radius:10px; } :root[data-theme="dusk"] table tbody tr:hover > * { background:rgba(165,178,235,.05); } :root[data-theme="dusk"] table td, :root[data-theme="dusk"] table th { border-color:var(--du-line) !important; } /* pills and chips: tinted fill + hairline border */ :root[data-theme="dusk"] .acct-pill, :root[data-theme="dusk"] .acct-badge, :root[data-theme="dusk"] .pill, :root[data-theme="dusk"] .badge { border:1px solid rgba(221,222,104,.3) !important; background:rgba(221,222,104,.12) !important; color:var(--du-teal-hi) !important; border-radius:8px !important; } /* segmented switches (Today's $ / Future $, Every year …): the selected half in teal, not green */ :root[data-theme="dusk"] button[aria-pressed="true"], :root[data-theme="dusk"] [role="tab"][aria-selected="true"], :root[data-theme="dusk"] .nw-seg.is-on { background:linear-gradient(120deg,#d2d35a,#dddE68) !important; border-color:transparent !important; color:#22232e !important; } /* the live bar and sheets: glass */ :root[data-theme="dusk"] #liveBar.lb, :root[data-theme="dusk"] .mobile-tools-sheet .mts-panel { background:rgba(38,40,54,.97) !important; box-shadow:0 18px 40px -16px rgba(0,0,0,.9) !important; border:1px solid var(--du-line2) !important; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } /* phone tab bar */ :root[data-theme="dusk"] .mobile-tabbar { background:#262835 !important; border-top:1px solid var(--du-line) !important; } :root[data-theme="dusk"] .mobile-tabbar button.active, :root[data-theme="dusk"] .mobile-tabbar [aria-current="page"] { background:rgba(221,222,104,.16) !important; color:var(--du-teal-hi) !important; } } /* Dusk extras: the reading app's colored stat cards (dark ink on lime / orange / wisteria / lilac / sky), wisteria links */ @media screen { :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) { --dash-tone:#22232e; border:0 !important; opacity:1 !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure) *, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) * { color:#22232e !important; opacity:1 !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure) .dash-card-iconwrap, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) .dash-card-iconwrap { background:rgba(34,35,46,.1) !important; border:0 !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure) .dash-card-iconwrap svg, :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) .dash-card-iconwrap svg { stroke:#22232e !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashYearsFunded), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBadLuck) { background:#DA935D !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashAtRetirement), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashGoodLuck) { background:#c9e07a !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetMargin), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashLowPoint) { background:#c8a8f0 !important; } :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashBudgetFailure), :root[data-theme="dusk"] #resultsPanel .dash-grid .dash-card:has(#dashEndBalance) { background:#8fd3ec !important; } :root[data-theme="dusk"] a:not(.preset-btn):not(.runbtn) { color:#A5B2EB; } :root[data-theme="dusk"] .mf-need { background:rgba(218,147,93,.2) !important; color:#f0b98d !important; } :root[data-theme="dusk"] .mf-row.has-missing:not(.is-open) { border-color:rgba(218,147,93,.55) !important; } :root[data-theme="dusk"] .mobile-tabbar button.active svg, :root[data-theme="dusk"] .mobile-tabbar [aria-current="page"] svg { stroke:#DDDE68; } } /* ---------------------------------------------------------------- Fresh: phone-first light (2026-10-01) From the user's health / finance app references: mint-to-cream wash, white 24px cards with a soft lift, black pill actions, a pastel lime-to-sun hero, a floating tab bar. Built from the Light rules; fixed colors on purpose. */ @media screen { :root[data-theme="fresh"] { --fr-page:#e7eee5; --fr-card:#ffffff; --fr-line:#e7ebe2; --fr-line2:#d9dfd2; --fr-ink:#1c1d1a; --fr-muted:#62665d; --fr-blue:#1c1d1a; --fr-blue2:#3a3c36; --fr-track:#eef1ea; --fr-leaf:#4f8a2b; --fr-sun:#f2b31b; --fr-hero:linear-gradient(120deg,#cfe7b4 0%,#e9ee9f 48%,#f6d48c 100%); --fr-hero-warn:linear-gradient(120deg,#f8dcb6 0%,#f6c58e 100%); --fr-hero-risk:linear-gradient(120deg,#f9d2cf 0%,#f3aaa4 100%); --fr-shadow:0 1px 2px rgba(40,60,40,.05), 0 16px 36px -18px rgba(40,60,40,.28); } :root[data-theme="fresh"] body { background:radial-gradient(900px 480px at 85% -5%, rgba(180,222,165,.55), transparent 62%), radial-gradient(900px 520px at 10% -10%, rgba(246,226,170,.35), transparent 60%), var(--fr-page) !important; background-attachment:fixed !important; } :root[data-theme="fresh"] .wrap, :root[data-theme="fresh"] [id$="View"] { background-color:transparent !important; } :root[data-theme="fresh"] .wrap { border-color:var(--fr-line) !important; box-shadow:none !important; } /* sidebar: white, solid blue active item */ :root[data-theme="fresh"] #mainToolNavigation.global-nav { background:rgba(255,255,255,.86) !important; border-right:1px solid var(--fr-line) !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab { color:#2a2b27 !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab svg { color:#6b6f66 !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab:hover { background:var(--fr-track) !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab.active { background:var(--fr-blue) !important; color:#fff !important; box-shadow:0 8px 18px -10px rgba(28,29,26,.7) !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab.active svg { color:#fff !important; } :root[data-theme="fresh"] #mainToolNavigation .sb-status, :root[data-theme="fresh"] #mainToolNavigation .sb-guide { background:var(--fr-card) !important; border-color:var(--fr-line) !important; box-shadow:var(--fr-shadow) !important; } /* surfaces */ :root[data-theme="fresh"] .panel, :root[data-theme="fresh"] #planBar, :root[data-theme="fresh"] .compass-plan-steps { background:rgba(255,255,255,.7) !important; border:1px solid var(--fr-line) !important; border-radius:22px !important; box-shadow:none !important; } :root[data-theme="fresh"] .dash-card, :root[data-theme="fresh"] .acct-card, :root[data-theme="fresh"] .po-row, :root[data-theme="fresh"] #acctTiles > div, :root[data-theme="fresh"] .fan-chart-shell, :root[data-theme="fresh"] .pc-card, :root[data-theme="fresh"] .nw-card, :root[data-theme="fresh"] .tx-card, :root[data-theme="fresh"] .cf-card, :root[data-theme="fresh"] .rn-input-check { background:var(--fr-card) !important; border:1px solid var(--fr-line) !important; border-radius:24px !important; box-shadow:var(--fr-shadow) !important; } :root[data-theme="fresh"] .dash-card:hover, :root[data-theme="fresh"] .acct-card:hover, :root[data-theme="fresh"] .po-row:hover { border-color:var(--fr-line2) !important; } /* the hero: solid blue result card with white type (amber / red when the plan needs work) */ :root[data-theme="fresh"] #resultsPanel .dash-banner { border:0 !important; border-radius:20px !important; background:var(--fr-hero) !important; box-shadow:0 20px 40px -22px rgba(28,29,26,.75) !important; } :root[data-theme="fresh"] #resultsPanel .dash-banner.warn { background:var(--fr-hero-warn) !important; box-shadow:0 20px 40px -22px rgba(217,119,6,.6) !important; } :root[data-theme="fresh"] #resultsPanel .dash-banner.risk { background:var(--fr-hero-risk) !important; box-shadow:0 20px 40px -22px rgba(225,29,72,.6) !important; } :root[data-theme="fresh"] #resultsPanel .dash-banner, :root[data-theme="fresh"] #resultsPanel .dash-banner * { color:#1c1d1a !important; } :root[data-theme="fresh"] #toolView #acctTiles > div:first-child { background:var(--fr-hero) !important; border:0 !important; box-shadow:0 16px 32px -18px rgba(28,29,26,.7) !important; } :root[data-theme="fresh"] #toolView #acctTiles > div:first-child * { color:#1c1d1a !important; } /* stat tiles: big dark numbers, white icon chips with a hairline border */ :root[data-theme="fresh"] #resultsPanel .dash-grid .dash-card { --dash-tone:var(--fr-ink); } :root[data-theme="fresh"] #resultsPanel .dash-card-value { color:var(--dash-tone) !important; letter-spacing:-.015em; } :root[data-theme="fresh"] #resultsPanel .dash-card-label { color:#4d5148 !important; border-color:transparent !important; } :root[data-theme="fresh"] #resultsPanel .dash-card-sub { color:var(--fr-muted) !important; } :root[data-theme="fresh"] #resultsPanel .dash-card-iconwrap { background:#fff !important; border:1px solid var(--fr-line2) !important; border-radius:12px !important; box-shadow:0 1px 2px rgba(40,60,40,.06) !important; } :root[data-theme="fresh"] #resultsPanel .dash-card-iconwrap svg { stroke:var(--fr-blue) !important; } :root[data-theme="fresh"] #resultsPanel .dash-card:has(#dashBadLuck) .dash-card-iconwrap svg, :root[data-theme="fresh"] #resultsPanel .dash-card:has(#dashLowPoint) .dash-card-iconwrap svg { stroke:#e11d48 !important; } :root[data-theme="fresh"] #resultsPanel .dash-card:has(#dashGoodLuck) .dash-card-iconwrap svg { stroke:#d97706 !important; } /* buttons: solid blue primary; quiet white secondary */ :root[data-theme="fresh"] .runbtn, :root[data-theme="fresh"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="fresh"] .xb-btn-primary, :root[data-theme="fresh"] .pchg-go, :root[data-theme="fresh"] .lb-btn.lb-primary, :root[data-theme="fresh"] .sb-btn-primary, :root[data-theme="fresh"] .preset-btn.active, :root[data-theme="fresh"] .toggle-btn.active:not(.adv-check-card) { background:var(--fr-blue) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 8px 18px -12px rgba(28,29,26,.8) !important; } :root[data-theme="fresh"] .preset-btn:not(.active) { background:#fff !important; border-color:var(--fr-line2) !important; color:#1c1d1a !important; box-shadow:0 1px 2px rgba(40,60,40,.05) !important; } :root[data-theme="fresh"] .preset-btn:not(.active):hover { background:#f6f8f1 !important; border-color:#cfd8bf !important; } /* segmented switches: gray track, white selected pill (the references' Price / Market / News) */ :root[data-theme="fresh"] .fan-dollar-switch, :root[data-theme="fresh"] .yb-seg, :root[data-theme="fresh"] .cf-sk-dollars, :root[data-theme="fresh"] .nw-segs { background:var(--fr-track) !important; border-color:var(--fr-line) !important; } :root[data-theme="fresh"] button[aria-pressed="true"], :root[data-theme="fresh"] .nw-seg.is-on { background:#fff !important; color:var(--fr-ink) !important; border-color:var(--fr-line2) !important; box-shadow:0 1px 3px rgba(40,60,40,.12) !important; } /* inputs */ :root[data-theme="fresh"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="fresh"] select, :root[data-theme="fresh"] textarea { background:#fff !important; border:1px solid var(--fr-line2) !important; border-radius:10px !important; color:var(--fr-ink) !important; } :root[data-theme="fresh"] input:focus, :root[data-theme="fresh"] select:focus, :root[data-theme="fresh"] textarea:focus { border-color:var(--fr-blue) !important; box-shadow:0 0 0 3px rgba(28,29,26,.16) !important; outline:none !important; } /* tables: quiet gray header band */ :root[data-theme="fresh"] table thead th, :root[data-theme="fresh"] table thead td { background:#f3f5ef !important; color:#4d5148 !important; border-color:var(--fr-line) !important; } :root[data-theme="fresh"] table thead tr > :first-child { border-top-left-radius:10px; } :root[data-theme="fresh"] table thead tr > :last-child { border-top-right-radius:10px; } :root[data-theme="fresh"] table tbody tr:hover > * { background:#f8faf5; } :root[data-theme="fresh"] table td, :root[data-theme="fresh"] table th { border-color:var(--fr-line) !important; } /* pills */ :root[data-theme="fresh"] .acct-pill, :root[data-theme="fresh"] .acct-badge, :root[data-theme="fresh"] .pill, :root[data-theme="fresh"] .badge { border:1px solid #dce8bf !important; background:#eef5dc !important; color:#1d4ed8 !important; border-radius:8px !important; } /* live bar, sheets, phone tab bar */ :root[data-theme="fresh"] #liveBar.lb, :root[data-theme="fresh"] .mobile-tools-sheet .mts-panel { background:rgba(255,255,255,.97) !important; border:1px solid var(--fr-line) !important; box-shadow:0 16px 36px -18px rgba(40,60,40,.35) !important; } :root[data-theme="fresh"] .mobile-tabbar { background:rgba(255,255,255,.96) !important; border-top:1px solid var(--fr-line) !important; } :root[data-theme="fresh"] .mobile-tabbar button.active, :root[data-theme="fresh"] .mobile-tabbar [aria-current="page"] { background:#eef5dc !important; color:var(--fr-blue) !important; } } /* Fresh extras: phone-first. Cards lift clearly off the mint wash; black pill buttons; a floating tab bar; "what's next" (the step list, the Next button, missing fields) is the darkest, boldest thing on screen. */ @media screen { :root[data-theme="fresh"] .runbtn, :root[data-theme="fresh"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="fresh"] .xb-btn-primary, :root[data-theme="fresh"] .pchg-go, :root[data-theme="fresh"] .lb-btn.lb-primary, :root[data-theme="fresh"] .sb-btn-primary, :root[data-theme="fresh"] .mf-ab-primary { border-radius:999px !important; } /* 22px, not 999px (2026-10-05): still a full pill on a one-line button, but a two-line one ("Itemize my expenses / Build it in the Expense Planner") became a capsule whose curved ends cut off its text. */ :root[data-theme="fresh"] .preset-btn, :root[data-theme="fresh"] .toggle-btn { border-radius:22px !important; } :root[data-theme="fresh"] .toggle-btn.adv-check-card { border-radius:18px !important; } :root[data-theme="fresh"] .panel { border-radius:24px !important; } :root[data-theme="fresh"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="fresh"] select, :root[data-theme="fresh"] textarea { background:#f7f8f4 !important; border-color:#e1e6da !important; border-radius:14px !important; } :root[data-theme="fresh"] input:focus, :root[data-theme="fresh"] select:focus, :root[data-theme="fresh"] textarea:focus { background:#fff !important; border-color:#4f8a2b !important; box-shadow:0 0 0 3px rgba(79,138,43,.18) !important; } :root[data-theme="fresh"] #mainToolNavigation .global-tab.active svg, :root[data-theme="fresh"] .mobile-tabbar button.active svg, :root[data-theme="fresh"] .mobile-tabbar [aria-current="page"] svg { color:#f2b31b !important; stroke:#f2b31b; } :root[data-theme="fresh"] .mobile-tabbar { left:10px !important; right:10px !important; bottom:calc(8px + env(safe-area-inset-bottom, 0px)) !important; border:1px solid rgba(255,255,255,.9) !important; border-radius:26px !important; background:#fff !important; box-shadow:0 18px 40px -16px rgba(40,60,40,.35) !important; } :root[data-theme="fresh"] .mobile-tabbar button.active, :root[data-theme="fresh"] .mobile-tabbar [aria-current="page"] { background:transparent !important; color:#1c1d1a !important; font-weight:800 !important; } /* the phone flow: each group is its own white card; open / missing / done read at a glance */ :root[data-theme="fresh"] .mf-row, :root[data-theme="fresh"] .mf-step { background:#fff !important; border:1px solid #e7ebe2 !important; border-radius:20px !important; box-shadow:0 1px 2px rgba(40,60,40,.05), 0 10px 24px -16px rgba(40,60,40,.3) !important; } :root[data-theme="fresh"] .mf-row.is-open { border-color:#cfd8bf !important; } :root[data-theme="fresh"] .mf-row.is-done .mf-check, :root[data-theme="fresh"] .mf-step.is-done .mf-step-num { background:#e3f0d2 !important; color:#3d6e1f !important; } :root[data-theme="fresh"] .mf-row.has-missing:not(.is-open) { border-color:#f2c78f !important; box-shadow:0 0 0 3px rgba(242,179,27,.14), 0 10px 24px -16px rgba(40,60,40,.3) !important; } :root[data-theme="fresh"] .mf-need { background:#fff1d6 !important; color:#8a5a00 !important; } :root[data-theme="fresh"] .mf-chip { background:#1c1d1a !important; color:#fff !important; } :root[data-theme="fresh"] .mf-progress span.is-done { background:#4f8a2b !important; } :root[data-theme="fresh"] .mf-progress span.is-current { background:#f2b31b !important; } :root[data-theme="fresh"] .mf-actionbar { background:rgba(255,255,255,.92) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } :root[data-theme="fresh"] .rd-group, :root[data-theme="fresh"] .po-row { border-color:#e7ebe2 !important; } :root[data-theme="fresh"] .mf-ab-primary, :root[data-theme="fresh"] .runbtn { background:#1c1d1a !important; border-color:#1c1d1a !important; color:#fff !important; box-shadow:0 12px 24px -12px rgba(28,29,26,.6) !important; } :root[data-theme="fresh"] button[aria-pressed="true"], :root[data-theme="fresh"] .nw-seg.is-on { background:#1c1d1a !important; color:#fff !important; border-color:#1c1d1a !important; } :root[data-theme="fresh"] .mf-step:not(.is-done) .mf-step-num { background:#1c1d1a !important; color:#fff !important; } } /* Verdict inside a colored banner (2026-10-03: Minimal, Dark, Dusk, Fresh). The banner sets one ink color (white or dark); the verdict follows it: dots that last are solid ink, dots that run out are ink rings, and the boxes are a tint of the ink, so it reads on blue, teal, yellow, amber and red alike. Same layer as the themes' banner rules (compassNavTop), so these win. */ :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner .dv-plot .dv-ok { fill:currentColor; } :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner .dv-plot .dv-out { fill:none; stroke:currentColor; stroke-width:1.7px; } :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner .dv-plot .dv-t { fill:currentColor; } /* 2026-10-04 accessibility check: the banner's small print at full ink — faded to 75–85% it measured 2.6–3.0:1 on the lighter end of Dark's and Minimal's teal "On Track" gradient (small text needs 4.5:1). */ :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner :is(.dv-key, .dash-card-sub, #mortalityWeightedRate, #dashVerdictFacts small) { opacity:1 !important; color:inherit !important; } :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner .dv-facts > div { background:color-mix(in srgb, currentColor 13%, transparent) !important; border-color:transparent !important; box-shadow:none !important; } :root:is([data-theme="dark"],[data-theme="minimal"],[data-theme="dusk"],[data-theme="fresh"],[data-theme="bold"]) #resultsPanel .dash-banner .dv-facts b.dv-bad { color:inherit !important; } /* ========================================================================================================== Focus and Bold (2026-10-03, from the "premium directions" mock-ups A and B). Both: clear card levels (tinted page, white cards, one accent ring on the card you're in), status tags on the phone flow's rows, and the exact field still needed highlighted (.is-needed, js/20). Focus is calm and warm; Bold has navy chrome. ========================================================================================================== */ @media screen { /* ---------------- Focus ---------------- */ :root[data-theme="focus"] { --fo-page:#f6f5f2; --fo-card:#ffffff; --fo-line:#e7e4dd; --fo-line2:#d8d4cb; --fo-ink:#17202b; --fo-muted:#6b7380; --fo-acc:#1f5f5b; --fo-tint:#e3efed; --fo-track:#efede8; --fo-shadow:0 1px 2px rgba(23,32,43,.06), 0 14px 30px -18px rgba(23,32,43,.28); } :root[data-theme="focus"] body { background:var(--fo-page) !important; } :root[data-theme="focus"] .wrap, :root[data-theme="focus"] [id$="View"] { background-color:transparent !important; } :root[data-theme="focus"] .wrap { border-color:var(--fo-line) !important; box-shadow:none !important; } :root[data-theme="focus"] #mainToolNavigation.global-nav { background:#fff !important; border-right:1px solid var(--fo-line) !important; } :root[data-theme="focus"] #mainToolNavigation .global-tab:hover { background:var(--fo-track) !important; } :root[data-theme="focus"] #mainToolNavigation .global-tab.active { background:var(--fo-acc) !important; color:#fff !important; box-shadow:0 8px 18px -10px rgba(31,95,91,.7) !important; } :root[data-theme="focus"] #mainToolNavigation .global-tab.active svg { color:#fff !important; stroke:#fff; } :root[data-theme="focus"] .panel, :root[data-theme="focus"] #planBar, :root[data-theme="focus"] .compass-plan-steps { background:var(--fo-card) !important; border:1px solid var(--fo-line) !important; border-radius:20px !important; box-shadow:var(--fo-shadow) !important; } :root[data-theme="focus"] .dash-card, :root[data-theme="focus"] .acct-card, :root[data-theme="focus"] .po-row, :root[data-theme="focus"] #acctTiles > div, :root[data-theme="focus"] .fan-chart-shell, :root[data-theme="focus"] .pc-card, :root[data-theme="focus"] .nw-card, :root[data-theme="focus"] .tx-card, :root[data-theme="focus"] .cf-card, :root[data-theme="focus"] .rn-input-check, :root[data-theme="focus"] .dd-card, :root[data-theme="focus"] .dh-card, :root[data-theme="focus"] details.rv-sec { background:var(--fo-card) !important; border:1px solid var(--fo-line) !important; border-radius:18px !important; box-shadow:var(--fo-shadow) !important; } :root[data-theme="focus"] .po-row.is-on, :root[data-theme="focus"] details.rv-sec[open] { border-color:var(--fo-line2) !important; } /* result: a white answer card with a status strip on top */ :root[data-theme="focus"] #resultsPanel .dash-banner { background:#fff !important; border:1px solid var(--fo-line) !important; border-radius:22px !important; box-shadow:inset 0 5px 0 var(--fo-acc), 0 1px 2px rgba(23,32,43,.06), 0 22px 40px -26px rgba(23,32,43,.4) !important; } :root[data-theme="focus"] #resultsPanel .dash-banner.warn { box-shadow:inset 0 5px 0 #d97706, 0 1px 2px rgba(23,32,43,.06), 0 22px 40px -26px rgba(23,32,43,.4) !important; } :root[data-theme="focus"] #resultsPanel .dash-banner.risk { box-shadow:inset 0 5px 0 #c2410c, 0 1px 2px rgba(23,32,43,.06), 0 22px 40px -26px rgba(23,32,43,.4) !important; } :root[data-theme="focus"] #resultsPanel .dash-card-value { letter-spacing:-.015em; } /* buttons: one deep-teal primary; quiet white secondary */ :root[data-theme="focus"] .runbtn, :root[data-theme="focus"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="focus"] .xb-btn-primary, :root[data-theme="focus"] .pchg-go, :root[data-theme="focus"] .lb-btn.lb-primary, :root[data-theme="focus"] .sb-btn-primary, :root[data-theme="focus"] .mf-ab-primary, :root[data-theme="focus"] .dh-btn { background:var(--fo-acc) !important; border-color:var(--fo-acc) !important; color:#fff !important; border-radius:14px !important; box-shadow:0 10px 20px -12px rgba(31,95,91,.75) !important; } :root[data-theme="focus"] .aw-btn:not(.aw-btn-q):disabled { background:var(--fo-tint) !important; border-color:var(--fo-tint) !important; color:var(--fo-muted) !important; box-shadow:none !important; cursor:not-allowed; } /* a button that can't be pressed yet looks it (2026-10-10: it was dark gray) */ :root[data-theme="focus"] .preset-btn:not(.active) { background:#fff !important; border-color:var(--fo-line2) !important; color:var(--fo-ink) !important; border-radius:12px !important; } :root[data-theme="focus"] .preset-btn.active, :root[data-theme="focus"] .toggle-btn.active:not(.adv-check-card) { background:var(--fo-acc) !important; border-color:var(--fo-acc) !important; color:#fff !important; border-radius:12px !important; } :root[data-theme="focus"] .fan-dollar-switch, :root[data-theme="focus"] .yb-seg, :root[data-theme="focus"] .cf-sk-dollars, :root[data-theme="focus"] .nw-segs { background:var(--fo-track) !important; border-color:var(--fo-line) !important; } :root[data-theme="focus"] button[aria-pressed="true"], :root[data-theme="focus"] .nw-seg.is-on { background:#fff !important; color:var(--fo-acc) !important; border-color:var(--fo-line2) !important; box-shadow:0 1px 3px rgba(23,32,43,.14) !important; } /* inputs, and the one still needed */ :root[data-theme="focus"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="focus"] select, :root[data-theme="focus"] textarea { background:#fbfaf8 !important; border:1.5px solid var(--fo-line2) !important; border-radius:12px !important; color:var(--fo-ink) !important; } :root[data-theme="focus"] input:focus, :root[data-theme="focus"] select:focus, :root[data-theme="focus"] textarea:focus { background:#fff !important; border-color:var(--fo-acc) !important; box-shadow:0 0 0 4px rgba(31,95,91,.14) !important; outline:none !important; } :root[data-theme="focus"] input.is-needed:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="focus"] select.is-needed, :root[data-theme="focus"] textarea.is-needed { background:#fff !important; border:2px solid var(--fo-acc) !important; box-shadow:0 0 0 5px rgba(31,95,91,.16) !important; } :root[data-theme="focus"] table thead th, :root[data-theme="focus"] table thead td { background:#f3f1ec !important; color:#3b4350 !important; border-color:var(--fo-line) !important; } :root[data-theme="focus"] #liveBar.lb, :root[data-theme="focus"] .mobile-tools-sheet .mts-panel { background:rgba(255,255,255,.97) !important; border:1px solid var(--fo-line) !important; box-shadow:0 14px 30px -18px rgba(23,32,43,.3) !important; } :root[data-theme="focus"] .mobile-tabbar { background:rgba(255,255,255,.97) !important; border-top:1px solid var(--fo-line) !important; } :root[data-theme="focus"] .mobile-tabbar button.active, :root[data-theme="focus"] .mobile-tabbar [aria-current="page"] { background:var(--fo-tint) !important; color:var(--fo-acc) !important; } /* the phone flow: done rows quiet, the open one ringed, missing ones tagged */ :root[data-theme="focus"] .mf-row, :root[data-theme="focus"] .mf-step { background:#fff !important; border:1px solid var(--fo-line) !important; border-radius:16px !important; box-shadow:0 1px 2px rgba(23,32,43,.06) !important; } :root[data-theme="focus"] .mf-row.is-open { border-color:transparent !important; box-shadow:0 0 0 2px var(--fo-acc), 0 14px 30px -14px rgba(31,95,91,.45) !important; } :root[data-theme="focus"] .mf-row.is-done .mf-check, :root[data-theme="focus"] .mf-step.is-done .mf-step-num { background:var(--fo-tint) !important; color:var(--fo-acc) !important; } :root[data-theme="focus"] .mf-row.has-missing:not(.is-open) { border-color:#ecd59a !important; } :root[data-theme="focus"] .mf-need { background:#fff1d6 !important; color:#8a5a00 !important; border-radius:999px !important; } :root[data-theme="focus"] .mf-chip { background:var(--fo-tint) !important; color:var(--fo-acc) !important; } :root[data-theme="focus"] .mf-progress span { background:#dcd9d2 !important; } :root[data-theme="focus"] .mf-progress span.is-done { background:var(--fo-acc) !important; } :root[data-theme="focus"] .mf-progress span.is-current { background:#7fa9a5 !important; } :root[data-theme="focus"] .mf-actionbar { background:rgba(246,245,242,.94) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } :root[data-theme="focus"] .mf-step:not(.is-done) .mf-step-num { background:var(--fo-acc) !important; color:#fff !important; } /* ---------------- Bold ---------------- */ :root[data-theme="bold"] { --bo-page:#f3f5f7; --bo-card:#ffffff; --bo-line:#e6eaef; --bo-line2:#d5dde5; --bo-ink:#132233; --bo-muted:#55687a; --bo-navy:#0f2a3d; --bo-navy2:#16384f; --bo-mint:#4ec9b0; --bo-mint-ink:#11795f; --bo-track:#eef1f4; --bo-shadow:0 2px 0 rgba(15,42,61,.03), 0 12px 26px -16px rgba(15,42,61,.35); } :root[data-theme="bold"] body { background:var(--bo-page) !important; } :root[data-theme="bold"] .wrap, :root[data-theme="bold"] [id$="View"] { background-color:transparent !important; } :root[data-theme="bold"] .wrap { border-color:var(--bo-line) !important; box-shadow:none !important; } /* navy chrome: header and sidebar */ :root[data-theme="bold"] .site-header { background:radial-gradient(420px 160px at 92% -40%, rgba(78,201,176,.35), transparent 60%), var(--bo-navy) !important; border-color:transparent !important; } :root[data-theme="bold"] .site-header, :root[data-theme="bold"] .site-header * { color:#fff !important; } /* 2026-10-04: the File menu now sits in the top bar — a light outline on navy, and its menu keeps its own colors */ :root[data-theme="bold"] .site-header .plan-file-toggle { background:transparent !important; border-color:rgba(var(--c-gray-99-rgb), 0.55) !important; } :root[data-theme="bold"] .site-header .plan-file-pop { color:var(--c-slate-30) !important; } :root[data-theme="bold"] .site-header .plan-file-pop * { color:inherit !important; } :root[data-theme="bold"] .site-header .plan-file-pop .plan-file-danger span { color:var(--c-red-55b) !important; } :root[data-theme="bold"] .site-header .site-header-tag, :root[data-theme="bold"] .mf-app-title small, :root[data-theme="bold"] .mf-app-title span { color:#a9c3d3 !important; } :root[data-theme="bold"] #mainToolNavigation.global-nav { background:linear-gradient(180deg,var(--bo-navy) 0%,#0c2232 100%) !important; border-color:transparent !important; box-shadow:0 18px 40px -18px rgba(15,42,61,.55) !important; } :root[data-theme="bold"] #mainToolNavigation .global-tab, :root[data-theme="bold"] #mainToolNavigation .sb-steps button, :root[data-theme="bold"] #mainToolNavigation .sb-steps strong { color:#d6e2ea !important; background:transparent !important; } :root[data-theme="bold"] #mainToolNavigation .global-tab svg { color:var(--bo-mint) !important; stroke:currentColor; } :root[data-theme="bold"] #mainToolNavigation .sb-hd, :root[data-theme="bold"] #mainToolNavigation small { color:#8fa8b9 !important; } :root[data-theme="bold"] #mainToolNavigation .sb-num { background:rgba(255,255,255,.1) !important; color:#d6e2ea !important; border-color:transparent !important; } :root[data-theme="bold"] #mainToolNavigation .global-tab:hover { background:rgba(255,255,255,.07) !important; } :root[data-theme="bold"] #mainToolNavigation .global-tab.active { background:var(--bo-mint) !important; color:var(--bo-navy) !important; box-shadow:0 8px 18px -8px rgba(78,201,176,.7) !important; } :root[data-theme="bold"] #mainToolNavigation .global-tab.active svg { color:var(--bo-navy) !important; } :root[data-theme="bold"] #mainToolNavigation .sb-status, :root[data-theme="bold"] #mainToolNavigation .sb-guide { background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.14) !important; color:#e7eef3 !important; } :root[data-theme="bold"] #mainToolNavigation .sb-status * { color:inherit !important; } /* the sidebar's bottom (theme swatches, Guide, your result): navy like the rest of it, not the light default */ :root[data-theme="bold"] #mainToolNavigation .sb-bottom { background:#0c2232 !important; border-color:rgba(255,255,255,.1) !important; box-shadow:0 -12px 18px -10px #0c2232 !important; } :root[data-theme="bold"] #mainToolNavigation .th-opt { background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.16) !important; color:#d6e2ea !important; } :root[data-theme="bold"] #mainToolNavigation .th-opt.on { border-color:var(--bo-mint) !important; box-shadow:0 0 0 1px var(--bo-mint) inset !important; } :root[data-theme="bold"] #mainToolNavigation .sb-guide, :root[data-theme="bold"] #mainToolNavigation .sb-guide * { color:#e7eef3 !important; } :root[data-theme="bold"] #mainToolNavigation .sb-guide > span:first-child { color:var(--bo-mint) !important; } :root[data-theme="bold"] #mainToolNavigation .sb-status strong, :root[data-theme="bold"] #mainToolNavigation .sb-status b { color:#fff !important; } :root[data-theme="bold"] #mainToolNavigation .sb-status .sb-btn { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.24) !important; color:#fff !important; } :root[data-theme="bold"] #mainToolNavigation .sb-status .sb-btn-primary { background:var(--bo-mint) !important; border-color:transparent !important; color:var(--bo-navy) !important; } /* surfaces */ :root[data-theme="bold"] .panel, :root[data-theme="bold"] #planBar, :root[data-theme="bold"] .compass-plan-steps { background:var(--bo-card) !important; border:1px solid var(--bo-line) !important; border-radius:22px !important; box-shadow:var(--bo-shadow) !important; } :root[data-theme="bold"] .dash-card, :root[data-theme="bold"] .acct-card, :root[data-theme="bold"] .po-row, :root[data-theme="bold"] #acctTiles > div, :root[data-theme="bold"] .fan-chart-shell, :root[data-theme="bold"] .pc-card, :root[data-theme="bold"] .nw-card, :root[data-theme="bold"] .tx-card, :root[data-theme="bold"] .cf-card, :root[data-theme="bold"] .rn-input-check, :root[data-theme="bold"] .dd-card, :root[data-theme="bold"] .dh-card, :root[data-theme="bold"] details.rv-sec { background:var(--bo-card) !important; border:1px solid var(--bo-line) !important; border-radius:18px !important; box-shadow:var(--bo-shadow) !important; } /* result: navy card with white type (colored-banner verdict rules apply) */ :root[data-theme="bold"] #resultsPanel .dash-banner { border:0 !important; border-radius:22px !important; background:radial-gradient(520px 240px at 95% -20%, rgba(78,201,176,.32), transparent 60%), var(--bo-navy) !important; box-shadow:0 22px 44px -22px rgba(15,42,61,.7) !important; } :root[data-theme="bold"] #resultsPanel .dash-banner.warn { background:radial-gradient(520px 240px at 95% -20%, rgba(245,158,11,.35), transparent 60%), var(--bo-navy) !important; } :root[data-theme="bold"] #resultsPanel .dash-banner.risk { background:radial-gradient(520px 240px at 95% -20%, rgba(244,63,94,.35), transparent 60%), var(--bo-navy) !important; } :root[data-theme="bold"] #resultsPanel .dash-banner, :root[data-theme="bold"] #resultsPanel .dash-banner * { color:#fff !important; } /* buttons: navy primary, rounded; quiet white secondary */ :root[data-theme="bold"] .runbtn, :root[data-theme="bold"] .aw-btn:not(.aw-btn-q):not(:disabled), :root[data-theme="bold"] .xb-btn-primary, :root[data-theme="bold"] .pchg-go, :root[data-theme="bold"] .lb-btn.lb-primary, :root[data-theme="bold"] .sb-btn-primary, :root[data-theme="bold"] .mf-ab-primary, :root[data-theme="bold"] .dh-btn { background:var(--bo-navy) !important; border-color:var(--bo-navy) !important; color:#fff !important; border-radius:16px !important; box-shadow:0 12px 22px -12px rgba(15,42,61,.75) !important; } :root[data-theme="bold"] .preset-btn:not(.active) { background:#fff !important; border-color:var(--bo-line2) !important; color:var(--bo-ink) !important; border-radius:12px !important; } :root[data-theme="bold"] .preset-btn.active, :root[data-theme="bold"] .toggle-btn.active:not(.adv-check-card) { background:var(--bo-navy) !important; border-color:var(--bo-navy) !important; color:#fff !important; border-radius:12px !important; } :root[data-theme="bold"] .fan-dollar-switch, :root[data-theme="bold"] .yb-seg, :root[data-theme="bold"] .cf-sk-dollars, :root[data-theme="bold"] .nw-segs { background:var(--bo-track) !important; border-color:var(--bo-line) !important; } :root[data-theme="bold"] button[aria-pressed="true"], :root[data-theme="bold"] .nw-seg.is-on { background:#fff !important; color:var(--bo-navy) !important; border-color:var(--bo-line2) !important; box-shadow:0 1px 3px rgba(15,42,61,.16) !important; } /* inputs, and the one still needed (mint ring) */ :root[data-theme="bold"] input:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="bold"] select, :root[data-theme="bold"] textarea { background:#fff !important; border:1.5px solid var(--bo-line2) !important; border-radius:12px !important; color:var(--bo-ink) !important; } :root[data-theme="bold"] input:focus, :root[data-theme="bold"] select:focus, :root[data-theme="bold"] textarea:focus { border-color:var(--bo-mint) !important; box-shadow:0 0 0 4px rgba(78,201,176,.22) !important; outline:none !important; } :root[data-theme="bold"] input.is-needed:not([type=checkbox]):not([type=radio]):not([type=range]), :root[data-theme="bold"] select.is-needed, :root[data-theme="bold"] textarea.is-needed { background:#fff !important; border:2px solid var(--bo-mint) !important; box-shadow:0 0 0 5px rgba(78,201,176,.26) !important; } :root[data-theme="bold"] table thead th, :root[data-theme="bold"] table thead td { background:#eef2f6 !important; color:#334a5e !important; border-color:var(--bo-line) !important; } :root[data-theme="bold"] #liveBar.lb, :root[data-theme="bold"] .mobile-tools-sheet .mts-panel { background:rgba(255,255,255,.97) !important; border:1px solid var(--bo-line) !important; box-shadow:0 14px 30px -18px rgba(15,42,61,.35) !important; } :root[data-theme="bold"] .mobile-tabbar { background:rgba(255,255,255,.97) !important; border-top:1px solid var(--bo-line) !important; } :root[data-theme="bold"] .mobile-tabbar button.active, :root[data-theme="bold"] .mobile-tabbar [aria-current="page"] { background:#e2f6f1 !important; color:var(--bo-navy) !important; font-weight:800 !important; } /* the phone flow: status tags — "N to fill" yellow, "Done" green — and a mint ring on the open card */ :root[data-theme="bold"] .mf-row, :root[data-theme="bold"] .mf-step { background:#fff !important; border:1px solid var(--bo-line) !important; border-radius:18px !important; box-shadow:var(--bo-shadow) !important; } :root[data-theme="bold"] .mf-row.is-open { border:2px solid var(--bo-mint) !important; } :root[data-theme="bold"] .mf-row.is-done .mf-check, :root[data-theme="bold"] .mf-step.is-done .mf-step-num { background:#dff5ee !important; color:var(--bo-mint-ink) !important; } :root[data-theme="bold"] .mf-row.has-missing:not(.is-open) { border-color:#f1d56c !important; } :root[data-theme="bold"] .mf-need { background:#ffe08a !important; color:#4a3700 !important; border-radius:999px !important; font-weight:800 !important; } :root[data-theme="bold"] .mf-chip { background:var(--bo-navy) !important; color:#fff !important; } :root[data-theme="bold"] .mf-progress span { background:#dbe3ea !important; } :root[data-theme="bold"] .mf-progress span.is-done { background:var(--bo-mint-ink) !important; } :root[data-theme="bold"] .mf-progress span.is-current { background:var(--bo-mint) !important; } :root[data-theme="bold"] .mf-actionbar { background:rgba(243,245,247,.94) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } :root[data-theme="bold"] .mf-step:not(.is-done) .mf-step-num { background:var(--bo-navy) !important; color:#fff !important; } } /* Small print on a tinted result card (2026-10-03 visual check): the page's light-grey sub text was 1.8:1 on the amber / red cards in Classic and Vivid. Themes with a coloured card set their own ink above. */ /* Last readability items from the visual check (2026-10-03). */ :root[data-theme="dark"] #runSimBtn .mc-cta-subtitle { color:#fff !important; opacity:.9 !important; } :root[data-theme="vivid"] .footnote, :root[data-theme="vivid"] .footnote strong, :root[data-theme="vivid"] #methodologyFull, :root[data-theme="vivid"] #methodologyToggleHint { color:#3a4a5e !important; } /* Phones: the open section is one card (2026-10-03). js/20 puts each section's title row directly before its fields, so the open row and the block after it share one outline, background and shadow. Each theme sets the card's colors; Focus and Bold keep their accent ring around the whole card, not just the title row. */ @media (max-width:700px){ html.mf-on { --mf-card-bg:var(--c-gray-99); --mf-card-line:var(--c-sage-85); --mf-card-w:1px; --mf-card-r:14px; --mf-card-shadow:0 10px 24px -18px rgba(var(--c-shadow-rgb), 0.35); } :root[data-theme="fresh"].mf-on { --mf-card-bg:#fff; --mf-card-line:#cfd8bf; --mf-card-r:20px; --mf-card-shadow:0 1px 2px rgba(40,60,40,.05), 0 12px 26px -16px rgba(40,60,40,.3); } :root[data-theme="focus"].mf-on { --mf-card-bg:#fff; --mf-card-line:var(--fo-acc); --mf-card-w:2px; --mf-card-r:16px; --mf-card-shadow:0 14px 30px -16px rgba(31,95,91,.4); } :root[data-theme="bold"].mf-on { --mf-card-bg:#fff; --mf-card-line:var(--bo-mint); --mf-card-w:2px; --mf-card-r:18px; --mf-card-shadow:0 12px 26px -16px rgba(15,42,61,.35); } html.mf-on body .mf-row.is-open:not([hidden]) { border:var(--mf-card-w) solid var(--mf-card-line) !important; border-bottom:0 !important; border-radius:var(--mf-card-r) var(--mf-card-r) 0 0 !important; margin-bottom:0 !important; background:var(--mf-card-bg) !important; box-shadow:none !important; } html.mf-on body .mf-row.is-open:not([hidden]) + * { border:var(--mf-card-w) solid var(--mf-card-line) !important; border-top:0 !important; border-radius:0 0 var(--mf-card-r) var(--mf-card-r) !important; background:var(--mf-card-bg) !important; padding:4px 14px 16px !important; margin:0 0 12px !important; box-shadow:var(--mf-card-shadow) !important; } } /* First visit (2026-10-03, js/19 .plan-bar-new): the bar is just File, with no box around it, in every theme. */ :root #planBar.plan-bar-new { background:transparent !important; border-color:transparent !important; box-shadow:none !important; } } /* Text size (js/00-text-size.js, 2026-10-05): four A's under each color-theme picker. */ .ts-pick { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin:8px 0 2px; } .ts-lbl { margin-right:4px; font-size:12px; font-weight:700; color:var(--c-slate-55); } html body .ts-opt { min-width:30px; min-height:30px; padding:0 6px; border:1px solid var(--c-gray-90); border-radius:8px; background:var(--c-gray-99); color:var(--c-slate-35); font-family:inherit; font-weight:800; line-height:1; cursor:pointer; box-shadow:none; } html body .ts-opt[data-ts-step="0"] { font-size:11px; } html body .ts-opt[data-ts-step="1"] { font-size:13px; } html body .ts-opt[data-ts-step="2"] { font-size:15px; } html body .ts-opt[data-ts-step="3"] { font-size:17px; } html body .ts-opt.on { border-color:var(--c-teal-50); color:var(--c-teal-50); box-shadow:inset 0 0 0 1px var(--c-teal-50); } .sb-theme + .ts-pick { margin:0 0 10px; } .sb-theme + .ts-pick .ts-lbl { flex-basis:100%; margin:0 0 2px; }