/* WealthTrace Design Tokens — colors, type, gradients, radii, shadows */ @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-Light.ttf") format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-Regular.ttf") format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-Medium.ttf") format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-SemiBold.ttf") format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-Bold.ttf") format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter Tight'; src: url("fonts/InterTight-ExtraBold.ttf") format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ---- Brand Blues ---- */ --wt-blue-700: #1F3FD1; --wt-blue-600: #1A4BEB; /* used in production code as primary CTA color */ --wt-blue-500: #2E5FFF; /* primary brand blue */ --wt-blue-300: #7290F1; --wt-blue-200: #A9B8FF; --wt-blue-100: #BAC9F9; /* chart line — taxable */ --wt-blue-25: #F5F7FF; /* ---- Greens ---- */ --wt-green-600: #076E33; /* badge text on green-50 */ --wt-green-500: #33B26A; --wt-green-400: #58DE92; /* chart line — deferred */ --wt-green-50: #DAF5E6; /* ---- Yellows ---- */ --wt-yellow-400: #D4AE46; --wt-yellow-300: #E6DD95; /* chart line — total */ --wt-yellow-200: #E9E5A1; --wt-yellow-50: #F4EEDC; /* ---- Reds ---- */ --wt-red-500: #FF4D5E; --wt-red-400: #FF7A85; --wt-red-50: #FCE1E3; /* ---- Neutrals (warm) ---- */ --wt-black: #303030; /* primary text — warm dark */ --wt-white: #FFFFFF; --wt-n-800: #303030; --wt-n-700: #4F4F4F; --wt-n-500: #6B6B6B; --wt-n-400: #888888; --wt-n-300: #B0B0B0; --wt-n-200: #DCDCDC; --wt-n-100: #E7E7E7; --wt-n-75: #ECEDF0; /* gray badge bg */ --wt-n-50: #F6F6F6; /* app shell */ --wt-n-40: #FAFAFA; /* card top stop */ /* ---- Semantic surfaces ---- */ --wt-bg-app: var(--wt-n-40); --wt-bg-card-top: #FAFAFA; --wt-bg-card-bot: #FFFFFF; --wt-bg-overlay: rgba(48,48,48,0.06); --wt-tooltip-bg: #303030; /* ---- Borders / dividers ---- */ --wt-border-card-top: #FFFFFF; --wt-border-card-bot: #E7E7E7; --wt-divider-1: rgba(48,48,48,0.10); /* primary */ --wt-divider-2: rgba(48,48,48,0.07); /* row hairline */ --wt-divider-3: #DCDCDC; /* vertical separators in KPI bars */ /* ---- Text ---- */ --wt-fg-1: #303030; /* primary text */ --wt-fg-2: rgba(48,48,48,0.7); /* secondary / body */ --wt-fg-3: rgba(48,48,48,0.55); /* tertiary */ --wt-fg-4: rgba(48,48,48,0.4); /* metadata */ --wt-fg-5: rgba(48,48,48,0.25); /* disabled */ --wt-fg-link: var(--wt-blue-600); /* ---- Signature gradients ---- */ --wt-grad-card: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%); --wt-grad-card-border: linear-gradient(180deg, #FFFFFF 0%, #E7E7E7 100%); --wt-grad-btn-blue: linear-gradient(180deg, #4974FF 0%, #1F3FD1 100%); --wt-grad-btn-blue-border: linear-gradient(180deg, #7290F1 0%, #1F3FD1 100%); --wt-grad-deluxe: linear-gradient(90.08deg, #58DE92 0%, #33B26A 99.55%); --wt-grad-text-blue: linear-gradient(124.43deg, #2E5FFF 3.45%, #1C3999 94.55%); /* ---- Shadows ---- */ --wt-shadow-card: 0 2px 8px -3px rgba(0,0,0,0.15); --wt-shadow-tooltip: 4px 4px 8px -4px rgba(48,48,48,0.30); --wt-shadow-btn: 0 4px 12px -2px rgba(8,49,180,0.19); /* ---- Radii ---- */ --wt-radius-xs: 6px; /* badges */ --wt-radius-sm: 8px; /* small buttons */ --wt-radius-md: 10px; /* tooltips, sm cards */ --wt-radius-lg: 12px; /* icon containers */ --wt-radius-xl: 22px; /* rounding/Large — primary card radius */ --wt-radius-pill: 41px; /* ---- Spacing scale (4px grid) ---- */ --wt-sp-1: 4px; --wt-sp-2: 8px; --wt-sp-3: 12px; --wt-sp-4: 16px; --wt-sp-5: 20px; --wt-sp-6: 24px; --wt-sp-7: 28px; --wt-sp-8: 32px; --wt-sp-9: 36px; --wt-sp-10: 40px; /* ---- Type scale ---- */ --wt-font: 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif; /* Display & headings */ --wt-fs-display: 36px; --wt-fs-h1: 28px; --wt-fs-h2: 24px; --wt-fs-h3: 20px; --wt-fs-h4: 18px; /* Body & data */ --wt-fs-body: 15px; --wt-fs-body-sm: 13px; --wt-fs-meta: 12px; --wt-fs-eyebrow: 13px; /* uppercase section label */ /* Letter-spacing */ --wt-ls-tight: -0.56px; /* large display */ --wt-ls-snug: -0.4px; /* numbers / values */ --wt-ls-body: 0.3px; /* default body */ --wt-ls-meta: 0.36px; /* small labels / badges */ --wt-ls-eyebrow: 0.65px; /* uppercase */ } /* -------- Utility classes for raw token use -------- */ html, body { font-family: var(--wt-font); color: var(--wt-fg-1); background: var(--wt-bg-app); } .wt-display { font: 700 var(--wt-fs-display)/1.1 var(--wt-font); letter-spacing: var(--wt-ls-tight); color: var(--wt-fg-1); } .wt-h1 { font: 600 var(--wt-fs-h1)/36px var(--wt-font); letter-spacing: var(--wt-ls-tight); color: var(--wt-fg-1); } .wt-h2 { font: 600 var(--wt-fs-h2)/30px var(--wt-font); letter-spacing: -0.48px; color: var(--wt-fg-1); } .wt-h3 { font: 600 var(--wt-fs-h3)/24px var(--wt-font); letter-spacing: -0.4px; color: var(--wt-fg-1); } .wt-h4 { font: 600 var(--wt-fs-h4)/22px var(--wt-font); color: var(--wt-fg-1); } .wt-eyebrow { font: 600 var(--wt-fs-eyebrow)/16px var(--wt-font); letter-spacing: var(--wt-ls-eyebrow); text-transform: uppercase; color: var(--wt-fg-1); } .wt-body { font: 400 var(--wt-fs-body)/20px var(--wt-font); letter-spacing: var(--wt-ls-body); color: var(--wt-fg-2); } .wt-body-sm { font: 400 var(--wt-fs-body-sm)/18px var(--wt-font); letter-spacing: var(--wt-ls-body); color: var(--wt-fg-2); } .wt-meta { font: 400 var(--wt-fs-meta)/16px var(--wt-font); letter-spacing: var(--wt-ls-meta); color: var(--wt-fg-4); } .wt-data { font: 600 var(--wt-fs-h3)/20px var(--wt-font); letter-spacing: var(--wt-ls-snug); color: var(--wt-fg-1); } .wt-data-lg { font: 600 26px/1.1 var(--wt-font); letter-spacing: -0.52px; color: var(--wt-fg-1); } .wt-data-xl { font: 700 var(--wt-fs-h1)/36px var(--wt-font); letter-spacing: var(--wt-ls-tight); color: var(--wt-fg-1); } /* Card surface — use as a class anywhere */ .wt-card { background: var(--wt-grad-card); border: 1.5px solid var(--wt-border-card-top); border-radius: var(--wt-radius-xl); box-shadow: var(--wt-shadow-card); /* gradient bottom-edge border via mask trick when needed */ position: relative; } /* Optional: gradient border replacement when single border color is too crude */ .wt-card-grad-border { background: linear-gradient(var(--wt-bg-card-top), var(--wt-bg-card-bot)) padding-box, var(--wt-grad-card-border) border-box; border: 1.5px solid transparent; border-radius: var(--wt-radius-xl); box-shadow: var(--wt-shadow-card); } /* ───────── */ /* Cash Flow Inputs styles — built on WealthTrace tokens */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-family: 'Inter Tight', system-ui, sans-serif; color: #303030; background: #F6F6F6; -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; } /* ── Global slim scrollbars — a bare thumb, no track box, 6px max. Any dark inverted surface (dropdown/menu popovers) gets a light thumb instead so it stays visible against #303030. ── */ html { color-scheme: light; } * { scrollbar-width: thin; scrollbar-color: rgba(48,48,48,.22) transparent; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(48,48,48,.22); border-radius: 999px; border: none; } ::-webkit-scrollbar-thumb:hover { background: rgba(48,48,48,.38); } .cfp-menu, .cfp-menu * { scrollbar-color: rgba(255,255,255,.30) transparent; } .cfp-menu ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.30); } .cfp-menu ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.46); } .app { display: flex; min-height: 100vh; } /* ---- SIDEBAR ---- */ .sb { width: 64px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 10px 14px; border-right: 1px solid rgba(48,48,48,.08); background: #F6F6F6; position: sticky; top: 0; height: 100vh; transition: width .25s cubic-bezier(.2,.7,.2,1); z-index: 30; } .sb.is-expanded { width: 232px; padding: 16px 14px 14px; } .sb__top { display: flex; align-items: center; justify-content: center; gap: 10px; height: 40px; margin-bottom: 8px; } .sb.is-expanded .sb__top { justify-content: flex-start; padding: 0 4px; } .sb__logo { display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: transparent; padding: 0; cursor: pointer; height: 40px; border-radius: 10px; transition: background .12s ease; } .sb:not(.is-expanded) .sb__logo { width: 100%; justify-content: center; } .sb__logo:hover { background: rgba(48,48,48,.04); } .sb__logo-mark { position: relative; width: 22px; height: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sb__logo-mark svg { transition: opacity .15s ease; } .sb__logo-toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; color: #1A4BEB; pointer-events: none; transition: opacity .15s ease; border-radius: 6px; background: rgba(246,246,246,.92); } .sb__logo:hover .sb__logo-toggle { opacity: 1; } .sb__logo:hover .sb__logo-mark svg { opacity: 0; } .sb__brand { font: 700 16px/1 'Inter Tight'; letter-spacing: -.2px; color: #303030; white-space: nowrap; } .sb__nav { display: flex; flex-direction: column; gap: 2px; } .sb__nav-secondary { gap: 0; } .sb__btn { width: 100%; height: 36px; border: 0; background: transparent; border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 0 10px; color: rgba(48,48,48,.7); transition: all .12s ease; text-align: left; position: relative; } .sb:not(.is-expanded) .sb__btn { padding: 0; justify-content: center; } .sb__btn-ic { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: rgba(48,48,48,.55); } .sb__btn-lab { font: 500 14px/1 'Inter Tight'; letter-spacing: .2px; color: rgba(48,48,48,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb__btn:hover { background: rgba(48,48,48,.04); color: #303030; } .sb__btn:hover .sb__btn-ic { color: #303030; } .sb__btn.is-on { background: linear-gradient(180deg,#FAFAFA,#fff); border: 1px solid #fff; box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); color: #303030; } .sb__btn.is-on .sb__btn-ic { color: #1A4BEB; } .sb__btn.is-on::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 2px; background: #1A4BEB; border-radius: 0 2px 2px 0; } .sb.is-expanded .sb__btn.is-on::before { left: -14px; } .sb__sep-h { height: 1px; background: rgba(48,48,48,.08); margin: 14px 0 12px; } /* Product-tour launcher — ghost row (no fill, no border) pinned to the bottom of the rail. It sits directly in .sb, so it shares the rail's own padding and lines up with the nav rows above it. */ .sb__tour { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; margin-top: auto; border: 0; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; transition: background .12s; } .sb__tour:hover { background: rgba(48,48,48,.04); } .sb__tour-ic { width: 22px; height: 22px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: transparent; color: #1A4BEB; } .sb__tour-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sb__tour-t { font: 600 13px/1 'Inter Tight'; letter-spacing: .1px; color: #303030; } .sb__tour-d { font: 400 12px/1 'Inter Tight'; letter-spacing: .1px; color: rgba(48,48,48,.5); } .sb__btn--tour { margin-top: auto; border: 0; background: transparent; } .sb__btn--tour:hover { background: rgba(48,48,48,.04); } .sb__btn--tour .sb__btn-ic { color: #1A4BEB; } .sb__sbtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 36px; padding: 0 10px; border: 0; background: transparent; border-radius: 8px; font: 500 14px/1 'Inter Tight'; letter-spacing: .2px; color: rgba(48,48,48,.85); } .sb__sbtn:hover { background: rgba(48,48,48,.04); } .sb__sbtn.is-accent { color: #1A4BEB; } .sb__sbtn.is-accent i { color: #1A4BEB !important; opacity: 1 !important; } /* Rail-edge collapse/expand toggle — sits on the sidebar's right border. Subtle by default, becomes prominent on sidebar hover. Provides a discoverable always-available affordance even though the logo also acts as a toggle. */ .sb__rail-toggle { position: absolute; top: 24px; right: -12px; width: 24px; height: 24px; border-radius: 999px; border: 1px solid #E7E7E7; background: linear-gradient(180deg,#FFFFFF 0%,#FAFAFA 100%); box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: rgba(48,48,48,.6); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease, background .12s ease, color .12s ease, box-shadow .12s ease; z-index: 2; padding: 0; } .sb:hover .sb__rail-toggle, .sb__rail-toggle:focus-visible { opacity: 1; transform: translateX(0); } .sb__rail-toggle:hover { background: linear-gradient(180deg,#4974FF 0%,#1F3FD1 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 12px -2px rgba(8,49,180,.28); } .sb__rail-toggle:active { transform: translateX(0) scale(.94); } /* Mobile drawer scrim */ .sb-scrim { display: none; position: fixed; inset: 0; background: rgba(48,48,48,.4); z-index: 25; animation: fadeIn .2s ease; } /* ---- MAIN ---- */ .main { flex: 1; min-width: 0; padding: 22px 32px 40px; display: flex; flex-direction: column; gap: 18px; transition: padding-right .32s cubic-bezier(.2,.7,.2,1); } /* HEADER */ .head { display: flex; align-items: center; justify-content: space-between; min-height: 44px; } .head__l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .head h1 { font: 700 30px/1.1 'Inter Tight'; letter-spacing: -.6px; color: #303030; } .deluxe { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 41px; border: 1px solid #fff; background: linear-gradient(90deg,#58DE92,#33B26A); color: #fff; font: 600 12px/1 'Inter Tight'; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 2px 8px -3px rgba(51,178,106,.5); } .head__r { display: flex; gap: 10px; align-items: center; } .pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #fff; background: linear-gradient(180deg,#FAFAFA,#fff); box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); font: 500 13px/1 'Inter Tight'; color: rgba(48,48,48,.8); } .icb { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #fff; background: linear-gradient(180deg,#FAFAFA,#fff); box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); display: flex; align-items: center; justify-content: center; color: rgba(48,48,48,.6); } /* TABS */ .tabs { display: flex; gap: 28px; align-items: center; border-bottom: 1px solid rgba(48,48,48,.08); } .tabs__t { padding: 12px 0; border: 0; background: transparent; font: 600 14px/1 'Inter Tight'; letter-spacing: .3px; color: rgba(48,48,48,.55); position: relative; } .tabs__t:hover { color: #303030; } .tabs__t.is-on { color: #1A4BEB; } .tabs__t.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1A4BEB; border-radius: 2px 2px 0 0; } /* WORKSPACE — always single-column. The editor side sheet is now a viewport-anchored overlay (see .editor below), so it no longer claims a grid column. The chart stays full-width underneath while editing so the ghost-preview line and KPI deltas remain legible behind the sheet. */ .work { display: grid; gap: 20px; grid-template-columns: 1fr; } .work.is-browse, .work.is-edit-nodraft, .work.is-edit { grid-template-columns: 1fr; } .work__left { display: flex; flex-direction: column; gap: 20px; min-width: 0; } /* Section picker tabs (visible only in edit mode) */ .sectabs { display: flex; gap: 6px; padding: 5px; background: linear-gradient(180deg,#ECEDF0,#FAFAFA); border: 1px solid #fff; border-radius: 14px; box-shadow: inset 0 1px 2px rgba(48,48,48,.04); align-self: flex-start; flex-wrap: wrap; } .sectab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; background: transparent; border-radius: 10px; font: 600 13px/1 'Inter Tight'; letter-spacing: .25px; color: rgba(48,48,48,.65); transition: all .12s ease; } .sectab:hover { color: #303030; background: rgba(255,255,255,.5); } .sectab i, .sectab svg { color: currentColor; opacity: .8; } .sectab__count { font: 600 11px/1 'Inter Tight'; padding: 3px 6px; border-radius: 6px; background: rgba(48,48,48,.08); color: rgba(48,48,48,.6); letter-spacing: .3px; } .sectab.is-on { background: #fff; color: #303030; box-shadow: 0 2px 8px -3px rgba(0,0,0,.12); border: 1px solid #fff; } .sectab.is-on i, .sectab.is-on svg { color: #1A4BEB; opacity: 1; } .sectab.is-on .sectab__count { background: rgba(30,80,255,.12); color: #1A4BEB; } /* CARD shell */ .card { background: #fff; border: 1.5px solid #fff; border-radius: var(--wt-radius-xl); box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); } .card__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid rgba(48,48,48,.08); gap: 12px; } .eyebrow { font: 600 13px/1.4 'Inter Tight'; letter-spacing: .65px; text-transform: uppercase; color: #303030; } .eyebrow--muted { color: rgba(48,48,48,.55); } .ddl { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 'Inter Tight'; letter-spacing: .3px; color: #303030; } .ddl-l { color: rgba(48,48,48,.55); margin-right: 2px; } .ddl-v { color: #303030; font-weight: 600; } .ddl--btn { position: relative; cursor: pointer; border-radius: 8px; padding: 5px 7px; margin: -5px -3px; user-select: none; outline: none; transition: background .12s ease; } .ddl--btn:hover { background: rgba(48,48,48,.05); } .ddl--btn.is-open { background: rgba(48,48,48,.07); } .ddl--btn:focus-visible { box-shadow: 0 0 0 2px rgba(26,75,235,.4); } .ddl-chev { display: inline-flex; transition: transform .16s ease; } .ddl--btn.is-open .ddl-chev { transform: rotate(180deg); } .ddl__menu { position: absolute; top: calc(100% + 7px); right: 0; min-width: 178px; background: #303030; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.6), 0 2px 10px -4px rgba(0,0,0,.45); padding: 6px; z-index: 60; animation: ddlIn .14s ease; } @keyframes ddlIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ddl__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; text-align: left; font: 500 13px/1.3 'Inter Tight'; letter-spacing: .3px; color: rgba(255,255,255,.86); cursor: pointer; } .ddl__opt:hover { background: rgba(255,255,255,.08); } .ddl__opt.is-on { background: rgba(159,182,255,.14); color: #A9B8FF; } .ddl__opt svg { flex-shrink: 0; } .vsep { width: 1px; height: 20px; background: #DCDCDC; } /* PROJECTION CARD */ .proj { padding-bottom: 4px; } .proj__kpis { display: flex; align-items: stretch; padding: 12px 22px 8px; gap: 16px; flex-wrap: wrap; } .kpi { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 4px; padding-right: 16px; border-right: 1px solid #DCDCDC; } .kpi:last-child { border-right: 0; } .kpi__l { font: 400 12px/1.25 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .3px; } .kpi__v { font: 600 19px/1.1 'Inter Tight'; letter-spacing: -.4px; color: #303030; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .kpi__v small { font: 600 11px/1 'Inter Tight'; padding: 3px 6px; border-radius: 6px; background: rgba(88,221,145,.18); color: #076E33; letter-spacing: .3px; } .kpi__v small.delta-blue { background: rgba(30,80,255,.1); color: #1A4BEB; } .kpi__v small.delta-red { background: rgba(255,77,94,.14); color: #C0392B; } .kpi__diff { font: 500 11px/1.2 'Inter Tight'; color: #076E33; letter-spacing: .3px; } .kpi__diff.is-down { color: #C0392B; } .proj__chart { padding: 0 14px 6px 8px; height: 220px; position: relative; } .chart-wrap { width: 100%; height: 100%; position: relative; } /* Never let the projection SVG push the page into horizontal scroll: cap it to the container width and let the viewBox scale it down on tight widths. */ .chart-wrap svg { max-width: 100%; } /* Milestone tooltip — DARK (design system: tooltips are inverted #303030) */ .ms-tip { position: absolute; background: #303030; border-radius: 10px; box-shadow: 4px 4px 8px -4px rgba(48,48,48,.3); z-index: 5; padding: 12px 14px; pointer-events: none; animation: msTipIn .14s ease-out; color: rgba(255,255,255,.92); } @keyframes msTipIn { from { opacity: 0; transform: translateY(calc(-100% - 4px)); } to { opacity: 1; } } .ms-tip__head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.10); } .ms-tip__ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(127,160,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ms-tip__title { flex: 1; min-width: 0; } .ms-tip__lab { font: 600 13px/1.2 'Inter Tight'; color: #FFFFFF; letter-spacing: .2px; margin-bottom: 2px; } .ms-tip__yr { font: 400 11px/1.2 'Inter Tight'; color: rgba(255,255,255,.55); letter-spacing: .3px; } .ms-tip__total { font: 700 14px/1.1 'Inter Tight'; color: #A9B8FF; letter-spacing: -.2px; white-space: nowrap; } .ms-tip__list { display: flex; flex-direction: column; gap: 5px; } .ms-tip__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 12px/1.3 'Inter Tight'; letter-spacing: .2px; } .ms-tip__nm { color: rgba(255,255,255,.85); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-tip__nm small { color: rgba(255,255,255,.5); font-weight: 400; font-size: 11px; } .ms-tip__amt { color: #FFFFFF; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ms-tip__more { padding-top: 4px; font: 400 11px/1.2 'Inter Tight'; color: rgba(255,255,255,.5); letter-spacing: .3px; text-align: center; } /* Year-hover tooltip — DARK */ .yr-tip { position: absolute; background: #303030; border-radius: 10px; box-shadow: 4px 4px 8px -4px rgba(48,48,48,.3); z-index: 5; padding: 11px 13px 10px; pointer-events: none; animation: msTipIn .12s ease-out; color: rgba(255,255,255,.92); } .yr-tip__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.10); } .yr-tip__year { font: 700 16px/1 'Inter Tight'; color: #A9B8FF; letter-spacing: -.2px; } .yr-tip__ages { display: flex; gap: 10px; } .yr-tip__age { font: 600 12px/1 'Inter Tight'; color: #FFFFFF; letter-spacing: .2px; display: inline-flex; gap: 4px; align-items: baseline; } .yr-tip__age em { font-style: normal; color: rgba(255,255,255,.55); font-weight: 400; } .yr-tip__retire { display: inline-flex; align-items: center; gap: 5px; font: 600 11px/1 'Inter Tight'; color: #A9B8FF; letter-spacing: .3px; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(127,160,255,.16); margin-bottom: 9px; } .yr-tip__rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; } .yr-tip__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 12px/1.3 'Inter Tight'; letter-spacing: .2px; } .yr-tip__nm { color: rgba(255,255,255,.78); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .yr-tip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .yr-tip__amt { color: #FFFFFF; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .yr-tip__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.10); font: 700 13px/1 'Inter Tight'; color: #FFFFFF; letter-spacing: .2px; font-variant-numeric: tabular-nums; } .proj__legend { display: flex; gap: 18px; padding: 0 22px 12px; align-items: center; flex-wrap: wrap; font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .3px; } .proj__legend .li { display: flex; align-items: center; gap: 7px; } .proj__legend .li em { font-style: normal; color: #B0B0B0; } .proj__legend .li__note { margin-left: -3px; color: rgba(48,48,48,.45); } .proj__legend .sq { width: 14px; height: 3px; border-radius: 2px; } .proj__legend .sq.dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); height: 2px; } .proj__legend .sq.band { width: 12px; height: 10px; border-radius: 3px; } /* PREVIEW BANNER (above chart in edit mode) */ .preview-banner { display: flex; align-items: center; gap: 14px; padding: 12px 20px; margin: 0 22px 0; border-radius: 12px; background: #F5F7FF; border: 1px solid rgba(30,80,255,.18); } .preview-banner__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: rgba(30,80,255,.12); display: flex; align-items: center; justify-content: center; color: #1A4BEB; } .preview-banner__txt { font: 400 13px/1.4 'Inter Tight'; color: rgba(48,48,48,.78); letter-spacing: .3px; } .preview-banner__txt strong { color: #303030; font-weight: 600; } /* PANELS ROW — browse mode shows the focused section as a wide table alongside narrow vertical strips for the other sections. Edit / add modes hide the strips and switch to section tabs above the table. */ .panels { display: flex; gap: 12px; align-items: stretch; min-height: 380px; } .panels.is-edit { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; min-height: 0; align-items: start; } .panels.is-edit-wide { display: block; min-height: 0; } .panels.is-edit-wide > .atable { width: 100%; } .panels.is-edit > .atable { min-width: 0; } .panels > .atable { flex: 1 1 0; min-width: 0; } .panels > .strip { flex: 0 0 92px; } @media (max-width: 1100px) { .panels > .strip { flex: 0 0 72px; } } @media (max-width: 900px) { .panels > .strip { flex: 0 0 56px; } } /* ---------- RAIL LAYOUT (replaces vertical strips on mid widths) ---------- Used when the .panels container is below the wide-info breakpoint (≈ <1200px) and not in edit mode. The left rail lists all five sections as a vertical menu; the right side renders the focused section as the full table — same surface as elsewhere, just with a different chooser. */ .panels.is-rail { display: grid; grid-template-columns: 304px minmax(0, 1fr); gap: 16px; align-items: start; min-height: 0; } .panels.is-rail > .atable { width: 100%; min-width: 0; } @media (max-width: 1100px) { .panels.is-rail { grid-template-columns: 272px minmax(0, 1fr); gap: 14px; } } @media (max-width: 980px) { .panels.is-rail { grid-template-columns: 240px minmax(0, 1fr); gap: 12px; } } /* The rail card itself — pure white surface, soft shadow, rounded corners. */ .srail { background: #FFFFFF; border: 1px solid rgba(48,48,48,.06); border-radius: 20px; box-shadow: 0 2px 8px -3px rgba(0,0,0,.10); padding: 14px 10px 10px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; align-self: start; } .srail__eyebrow { font: 600 11px/1 'Inter Tight'; letter-spacing: .65px; text-transform: uppercase; color: rgba(48,48,48,.45); padding: 4px 10px 8px; } .srail__list { display: flex; flex-direction: column; gap: 2px; } .srail__item { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border: 0; background: transparent; border-radius: 12px; text-align: left; cursor: pointer; color: #303030; transition: background .12s ease, box-shadow .12s ease, transform .08s ease; font-family: 'Inter Tight'; min-height: 52px; } .srail__item:hover { background: rgba(48,48,48,.035); } .srail__item:focus-visible { outline: 2px solid rgba(30,80,255,.4); outline-offset: 2px; } .srail__item:active { transform: scale(.995); } .srail__item.is-on { background: rgba(30,80,255,.05); border: 1px solid rgba(30,80,255,.12); box-shadow: 0 1px 2px rgba(30,80,255,.04); padding: 9px 9px 9px 11px; } .srail__item.is-on::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: -2px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #4974FF 0%, #1F3FD1 100%); box-shadow: 0 0 8px rgba(30,80,255,.35); } .srail__ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.75); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s ease, color .12s ease; } /* Accent tints — match the .strip / .infocard color coding. */ .srail__item--blue .srail__ic { background: rgba(30,80,255,.10); color: #1A4BEB; } .srail__item--green .srail__ic { background: rgba(88,221,145,.22); color: #0E7A3E; } .srail__item--red .srail__ic { background: rgba(255,77,94,.14); color: #C0392B; } .srail__item--purple .srail__ic { background: rgba(140,87,217,.16); color: #6E40C9; } .srail__item--amber .srail__ic { background: rgba(217,151,71,.18); color: #8A5A1A; } .srail__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .srail__nm { font: 600 14px/1.15 'Inter Tight'; color: #303030; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srail__sub { font: 400 12px/1.2 'Inter Tight'; color: rgba(48,48,48,.5); letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .srail__count { font: 600 11px/1 'Inter Tight'; letter-spacing: .3px; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: rgba(48,48,48,.08); color: rgba(48,48,48,.65); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .srail__item.is-on .srail__count { background: rgba(30,80,255,.12); color: #1A4BEB; } /* ---------- FOCUSED ACCOUNTS TABLE ---------- */ /* overflow: clip (not hidden) lets the sticky totals footer below stick against the page viewport instead of being trapped inside the card. */ .atable { background: #fff; border: 1.5px solid #fff; border-radius: 24px; box-shadow: 0 8px 28px -8px rgba(30,80,255,.18), 0 2px 8px -3px rgba(0,0,0,.12); display: flex; flex-direction: column; overflow: clip; } .atable__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 16px; gap: 16px; border-bottom: 1px solid rgba(48,48,48,.06); } .atable__head-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atable__title { font: 600 20px/24px 'Inter Tight'; letter-spacing: -.4px; color: #303030; white-space: nowrap; } .atable__count { font: 600 11px/1 'Inter Tight'; padding: 4px 7px; border-radius: 6px; background: rgba(30,80,255,.1); color: #1A4BEB; letter-spacing: .3px; } .atable__head-r { display: flex; align-items: center; gap: 10px; } .atable__add { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(180deg,#4974FF,#1F3FD1) padding-box, linear-gradient(180deg,#7290F1,#1F3FD1) border-box; color: #fff; font: 600 13px/1 'Inter Tight'; letter-spacing: .3px; box-shadow: 0 4px 12px -2px rgba(8,49,180,.3); transition: transform .12s ease; } .atable__add:hover { transform: translateY(-1px); } .atable__close { width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(48,48,48,.1); background: #fff; color: rgba(48,48,48,.55); display: flex; align-items: center; justify-content: center; transition: all .12s ease; } .atable__close:hover { background: #FAFAFA; color: #303030; } .atable__sub { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px 14px; border-bottom: 1px solid rgba(48,48,48,.06); flex-wrap: wrap; } .atable__fchips { padding: 0; margin-left: -10px; } .atable__sub-r { display: flex; align-items: center; gap: 14px; font: 400 13px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; } .atable__sub-r strong { color: #303030; font-weight: 600; } .atable__sub-sep { width: 1px; height: 14px; background: #DCDCDC; } /* Filter tabs inside an Accounts panel — same underline pattern as the chart tabs, but compact for use as a sub-header inside a table card. Active tab keeps the primary text color; the short blue underline is what reads as "selected". */ .atable__tabs { display: flex; align-items: center; gap: 28px; padding: 0 22px; border-bottom: 1px solid rgba(48,48,48,.08); } .atable__tab { padding: 11px 0; border: 0; background: transparent; font: 600 13px/1 'Inter Tight'; letter-spacing: .3px; color: rgba(48,48,48,.5); position: relative; cursor: pointer; transition: color .12s ease; } .atable__tab:hover { color: #303030; } .atable__tab.is-on { color: #303030; } .atable__tab.is-on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1A4BEB; border-radius: 2px 2px 0 0; } .atable__tab[disabled] { opacity: .5; cursor: not-allowed; } .atable__tab[disabled]:hover { color: rgba(48,48,48,.5); } /* Totals footer — pinned to the bottom of the viewport while the table extends below it. position:sticky pairs with overflow:clip on .atable so the footer sticks against page scroll, not against the card. */ .atable__foot { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 14px 22px; background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-top: 1px solid rgba(48,48,48,.08); font: 400 13px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; flex-wrap: wrap; } .atable__foot > span { display: inline-flex; align-items: baseline; gap: 8px; } .atable__foot strong { color: #303030; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: -.2px; } .atable__foot-k { color: rgba(48,48,48,.55); text-transform: uppercase; font: 500 11px/1 'Inter Tight'; letter-spacing: .65px; } .atable__foot-unit { color: rgba(48,48,48,.5); font-size: 12px; font-weight: 500; margin-left: 2px; letter-spacing: .3px; } .atable__foot-sep { width: 1px; height: 18px; background: #DCDCDC; } .atable__scroll { overflow-x: auto; } .atable__t { width: 100%; border-collapse: collapse; background: #fff; } .atable__th { font: 500 12px/1 'Inter Tight'; letter-spacing: .4px; color: rgba(48,48,48,.55); text-transform: none; text-align: left; padding: 14px 18px 12px; border-bottom: 1px solid rgba(48,48,48,.08); background: #FAFAFA; white-space: nowrap; } .atable__th--name { padding-left: 24px; } .atable__tr { transition: background .12s ease; } .atable__tr--clickable { cursor: pointer; } .atable__tr--clickable:focus-visible { outline: 2px solid rgba(30,80,255,.45); outline-offset: -2px; background: rgba(30,80,255,.04); } .atable__tr:hover { background: rgba(30,80,255,.025); } .atable__tr--clickable:hover { background: rgba(30,80,255,.045); } .atable__td { padding: 16px 18px; border-bottom: 1px solid rgba(48,48,48,.05); vertical-align: middle; font: 500 14px/1.2 'Inter Tight'; color: #303030; letter-spacing: .2px; } .atable__tr:last-child .atable__td { border-bottom: 0; } .atable__td--num { white-space: nowrap; } .atable__th--num, .atable__td--num { text-align: right; padding-right: 24px; } .atable__td--name { padding-left: 24px; } .atable__td--act { text-align: right; padding-right: 22px; } /* When the side editor is open, the work-grid splits to 1fr + 540px and the focused table column gets narrow. Tighten column padding inside that context so the 7-column Cash Inflows table fits without horizontal scrolling. */ .work.is-edit .atable__th, .work.is-edit .atable__td { padding-left: 10px; padding-right: 10px; } .work.is-edit .atable__th--name, .work.is-edit .atable__td--name { padding-left: 14px; } .work.is-edit .atable__td--act { padding-right: 12px; } .work.is-edit .atable__name-cell { gap: 10px; } .work.is-edit .atable__ic { width: 28px; height: 28px; } .work.is-edit .atable__nm { font-size: 14px; } .work.is-edit .atable__sub-t { font-size: 11px; } /* Compact "Edit" affordance to an icon-only button when the column is tight — the whole row is clickable anyway, so the trailing label is purely a visual reminder. */ .work.is-edit .atable__edit { padding: 0 8px; gap: 0; font-size: 0; } .work.is-edit .atable__edit i { font-size: initial; } .work.is-edit .atable__td--num { font-size: 13px; } .work.is-edit .atable__per { display: none; } .work.is-edit .atable__per-slot { display: none; } /* Group dividers — shown when the "All" filter is active to separate Tax-Advantaged / Qualified / Non-Qualified buckets while keeping the per-bucket account order. */ .atable__group { background: #FAFAFA; } .atable__group:hover { background: #FAFAFA; } .atable__group-cell { padding: 0; border-bottom: 1px solid rgba(48,48,48,.06); border-top: 1px solid rgba(48,48,48,.06); background: #FAFAFA; } .atable__group-inner { display: flex; align-items: center; gap: 14px; padding: 10px 22px 10px 24px; min-width: 0; } .atable__group-line { flex: 1 1 0; min-width: 0; height: 1px; background: linear-gradient(90deg, rgba(48,48,48,0), rgba(48,48,48,.12) 30%, rgba(48,48,48,.12) 70%, rgba(48,48,48,0)); } .atable__group-label { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 'Inter Tight'; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(48,48,48,.55); white-space: nowrap; flex-shrink: 0; } .atable__group-count { font: 600 10px/1 'Inter Tight'; padding: 3px 6px; border-radius: 5px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.55); letter-spacing: .3px; } /* First group divider sits flush against the column headers — drop the extra top border. */ .atable__t tbody > tr:first-child .atable__group-cell { border-top: 0; } /* Narrower table widths: tighten padding and let the leading rule shrink to zero. */ @media (max-width: 880px) { .atable__group-inner { gap: 10px; padding: 9px 16px 9px 18px; } .atable__group-label { letter-spacing: 1px; } } .atable__name-cell { display: flex; align-items: center; gap: 14px; min-width: 0; } .atable__ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(48,48,48,.04); color: rgba(48,48,48,.65); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .atable__name-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .atable__nm { font: 600 14px/1.1 'Inter Tight'; color: #303030; letter-spacing: .1px; } .atable__sub-t { font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; } .atable__owner { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 'Inter Tight'; color: rgba(48,48,48,.85); letter-spacing: .2px; } /* ---------------------------------------------------------- "WHEN" CELLS — Starts / Ends columns on cash inflows The owner of the milestone (Mary, Allison) is the meaningful anchor, so we lead the cell with the person's possessive and let the milestone read as a natural continuation: "Mary's age 65". The two-piece layout flows on one line when the column has room, then wraps to two lines on narrower viewports without truncating — the user explicitly asked for this to stay readable on phones. ---------------------------------------------------------- */ .atable__th--when { min-width: 120px; } .atable__td--when { vertical-align: middle; } .when-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 220px; } .when-cell__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 5px; min-width: 0; } .when-cell__who { font: 600 14px/1.15 'Inter Tight'; color: #303030; letter-spacing: .1px; white-space: nowrap; } .when-cell__when { font: 500 14px/1.15 'Inter Tight'; color: rgba(48,48,48,.78); letter-spacing: .15px; } .when-cell__sub { font: 400 12px/1.1 'Inter Tight'; color: rgba(48,48,48,.5); letter-spacing: .25px; } /* One-time inflows show a small neutral pill in the Ends column — there is no end concept so we don't want the column to read empty. */ .when-cell__pill { display: inline-flex; align-items: center; font: 600 11px/1 'Inter Tight'; padding: 5px 8px; border-radius: 6px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.65); letter-spacing: .35px; text-transform: uppercase; white-space: nowrap; } /* ---------------------------------------------------------- TAX-TREATMENT TAG Small neutral pill, color-tinted by tax bucket. Two text variants live inside the tag — long form for normal widths and a compact form ("Income", "Cap. gains") for tight columns / mobile. ---------------------------------------------------------- */ .atable__th--tax { min-width: 110px; } .atable__td--tax { white-space: nowrap; } .tax-tag { display: inline-flex; align-items: center; font: 600 12px/1 'Inter Tight'; padding: 5px 9px; border-radius: 999px; letter-spacing: .25px; border: 1px solid transparent; white-space: nowrap; } .tax-tag__short { display: none; } .tax-tag--ordinary { background: rgba(48,48,48,.05); color: rgba(48,48,48,.78); border-color: rgba(48,48,48,.08); } .tax-tag--capital { background: rgba(30,80,255,.07); color: #1A4BEB; border-color: rgba(30,80,255,.18); } .tax-tag--free { background: rgba(88,221,145,.18); color: #076E33; border-color: rgba(88,221,145,.35); } .tax-tag--custom { background: rgba(230,221,149,.30);color: #7A6300; border-color: rgba(230,221,149,.55); } .tax-tag--auto { background: rgba(48,48,48,.05); color: rgba(48,48,48,.72); border-color: rgba(48,48,48,.10); font-weight: 500; } /* When the editor is open OR the side panel is narrow, swap to the short labels so the tax column doesn't push the table into horizontal scroll. */ .work.is-edit .tax-tag__full, .panels.is-wide-info > .atable .tax-tag__full { display: none; } .work.is-edit .tax-tag__short, .panels.is-wide-info > .atable .tax-tag__short { display: inline; } .atable__bal { font: 600 14px/1 'Inter Tight'; color: #303030; letter-spacing: -.1px; margin-right: 1px; } .atable__bal + .atable__chip { margin-left: 8px; } .atable__chip { display: inline-flex; align-items: center; font: 600 11px/1 'Inter Tight'; padding: 4px 6px; border-radius: 6px; background: rgba(88,221,145,.22); color: #076E33; letter-spacing: .3px; } .atable__chip.is-down { background: rgba(255,77,94,.14); color: #C0392B; } .atable__per { color: rgba(48,48,48,.5); font-weight: 400; } .atable__per--once { margin-left: 6px; font-size: 12px; letter-spacing: .3px; } /* Reserve a fixed-width slot to the right of the number so the dollar value's right edge aligns across all rows regardless of whether "/yr" is present. */ .atable__num { display: inline-flex; align-items: baseline; font-variant-numeric: tabular-nums; } .atable__num .atable__bal { margin-right: 0; } .atable__per-slot { display: inline-block; width: 24px; text-align: left; padding-left: 3px; box-sizing: border-box; } .atable__muted { color: rgba(48,48,48,.35); } /* Stacked Current Balance cell — main number on top, compact daily $ change underneath. Right-aligned to match the column's tabular alignment. */ .atable__bal-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; min-width: 0; } .atable__bal-cell .atable__bal { margin-right: 0; font-variant-numeric: tabular-nums; } .atable__daily { font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; color: #1F8A5B; font-variant-numeric: tabular-nums; white-space: nowrap; } .atable__daily.is-down { color: #C0392B; } .atable__daily.is-flat { color: rgba(48,48,48,.4); font-weight: 400; } .atable__daily.is-manual { color: rgba(48,48,48,.45); font-weight: 400; } .atable__daily-k { color: rgba(48,48,48,.5); font-weight: 400; letter-spacing: .3px; } .atable__daily.is-down .atable__daily-k { color: rgba(48,48,48,.5); } .atable__edit { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(48,48,48,.1); background: #fff; color: rgba(48,48,48,.75); font: 500 13px/1 'Inter Tight'; letter-spacing: .3px; opacity: 0; transition: all .12s ease; } .atable__edit:hover { background: rgba(30,80,255,.06); color: #1A4BEB; border-color: rgba(30,80,255,.25); } /* ---------------------------------------------------------- WIDE-SCREEN INFO CARDS When the panels row has enough room, non-focused sections render as small info cards (icon + uppercase title + 4-5 item rows) instead of collapsing to a narrow vertical strip. The variant is toggled by .panels.is-wide-info (set from JS via ResizeObserver on the panels container, threshold ≈ 1200px). Below that, we fall back to .strip. ---------------------------------------------------------- */ .panels.is-wide-info { gap: 14px; } .panels.is-wide-info > .atable { flex: 3 2 600px; min-width: 520px; } .panels.is-wide-info > .infocard { flex: 1 1 150px; min-width: 124px; max-width: 200px; } /* Tighten cell padding inside the focused table when info cards sit alongside it, so the 5 accounts columns fit without horizontal overflow. Mirrors the compaction already in place when the editor sheet is open. */ .panels.is-wide-info > .atable .atable__th, .panels.is-wide-info > .atable .atable__td { padding-left: 10px; padding-right: 10px; } .panels.is-wide-info > .atable .atable__th--name, .panels.is-wide-info > .atable .atable__td--name { padding-left: 14px; } .panels.is-wide-info > .atable .atable__td--act { padding-right: 12px; } /* At very wide widths cards can grow generously; on tighter wide layouts they sit at their basis so the atable gets the slack. */ @media (min-width: 1800px) { .panels.is-wide-info > .infocard { max-width: 230px; } } .infocard { background: linear-gradient(180deg,#FAFAFA 0%,#FFFFFF 100%); border: 1.5px solid #fff; border-radius: 24px; box-shadow: 0 2px 8px -3px rgba(0,0,0,.12); padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; min-width: 0; min-height: 0; align-self: stretch; } .infocard:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(30,80,255,.18); border-color: rgba(30,80,255,.18); } .infocard:focus-visible { outline: 2px solid rgba(30,80,255,.4); outline-offset: 2px; } .infocard__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .infocard__ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.7); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .infocard__title { font: 600 12px/1 'Inter Tight'; letter-spacing: .65px; text-transform: uppercase; color: #303030; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .infocard__list { display: flex; flex-direction: column; min-width: 0; } .infocard__row { padding: 12px 0; border-bottom: 1px solid rgba(48,48,48,.07); display: flex; flex-direction: column; gap: 4px; min-width: 0; } .infocard__row:last-of-type { border-bottom: 0; } .infocard__nm { font: 500 14px/1.25 'Inter Tight'; color: #303030; letter-spacing: .1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .infocard__amt { font: 400 13px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; } .infocard__empty { padding: 12px 0; font: 400 12px/1.4 'Inter Tight'; color: rgba(48,48,48,.45); letter-spacing: .3px; } .infocard__more { padding-top: 10px; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.45); letter-spacing: .3px; } /* Accent tints to mirror .strip color coding */ .infocard--blue .infocard__ic { background: rgba(30,80,255,.10); color: #1A4BEB; } .infocard--green .infocard__ic { background: rgba(88,221,145,.20); color: #076E33; } .infocard--red .infocard__ic { background: rgba(255,77,94,.14); color: #C0392B; } .infocard--purple .infocard__ic { background: rgba(140,87,217,.16); color: #6E40C9; } .infocard--amber .infocard__ic { background: rgba(217,151,71,.18); color: #8A5A1A; } /* Collapsed strip: narrow vertical button */ .strip { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 8px 12px; border-radius: 20px; border: 1.5px solid #fff; background: linear-gradient(180deg,#FAFAFA,#fff); box-shadow: 0 2px 8px -3px rgba(0,0,0,.1); color: rgba(48,48,48,.7); cursor: pointer; transition: all .2s cubic-bezier(.2,.7,.2,1); opacity: .68; position: relative; overflow: hidden; min-height: 0; } .strip:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(30,80,255,.25); border-color: rgba(30,80,255,.2); } .strip__top { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; } .strip__ic { width: 32px; height: 32px; border-radius: 9px; background: rgba(48,48,48,.06); display: flex; align-items: center; justify-content: center; color: rgba(48,48,48,.7); flex-shrink: 0; } .strip__count { font: 600 10px/1 'Inter Tight'; padding: 3px 6px; border-radius: 5px; background: rgba(48,48,48,.08); color: rgba(48,48,48,.7); letter-spacing: .3px; } .strip__title { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 12px/1 'Inter Tight'; letter-spacing: .8px; text-transform: uppercase; color: rgba(48,48,48,.75); padding: 6px 0; white-space: nowrap; } .strip__total { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 11px/1 'Inter Tight'; color: rgba(48,48,48,.5); letter-spacing: .3px; } .strip__hint { margin-top: auto; padding-bottom: 4px; color: rgba(48,48,48,.3); transform: rotate(0deg); } .strip:hover .strip__hint { color: #1A4BEB; } /* Accent dots/icon tints for the 5 sections */ .strip--blue .strip__ic { background: rgba(30,80,255,.10); color: #1A4BEB; } .strip--green .strip__ic { background: rgba(88,221,145,.18); color: #076E33; } .strip--red .strip__ic { background: rgba(255,77,94,.12); color: #C0392B; } .strip--purple .strip__ic { background: rgba(140,87,217,.14); color: #6E40C9; } .strip--amber .strip__ic { background: rgba(217,151,71,.16); color: #8A5A1A; } /* Accent for table heading icon */ .atable__head-ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .atable__head-ic--blue { background: rgba(30,80,255,.10); color: #1A4BEB; } .atable__head-ic--green { background: rgba(88,221,145,.20); color: #076E33; } .atable__head-ic--red { background: rgba(255,77,94,.14); color: #C0392B; } .atable__head-ic--purple { background: rgba(140,87,217,.16); color: #6E40C9; } .atable__head-ic--amber { background: rgba(217,151,71,.18); color: #8A5A1A; } .atable__ic--green { color: #076E33 !important; background: rgba(88,221,145,.18) !important; } .atable__ic--red { color: #C0392B !important; background: rgba(255,77,94,.12) !important; } .atable__ic--purple { color: #6E40C9 !important; background: rgba(140,87,217,.14) !important; } .atable__ic--amber { color: #8A5A1A !important; background: rgba(217,151,71,.16) !important; } .atable__ic--blue { color: #1A4BEB !important; background: rgba(30,80,255,.10) !important; } /* Close X has been removed from table heads — navigation is handled by the section tabs. Belt-and-braces: hide any stray .atable__close that may still be rendered. */ .atable__close { display: none; } /* Smaller screens: shrink strip widths and hide the rotated total */ @media (max-width: 900px) { .strip__total { display: none; } .strip__count { display: none; } } @media (max-width: 1100px) { .atable__sub { padding: 10px 16px; } .atable__td, .atable__th { padding-left: 12px; padding-right: 12px; } .atable__td--name, .atable__th--name { padding-left: 16px; } } .panel { background: #fff; border: 1.5px solid #fff; border-radius: var(--wt-radius-xl); box-shadow: 0 2px 8px -3px rgba(0,0,0,.15); display: flex; flex-direction: column; min-width: 0; min-height: 280px; } .panel.is-active { box-shadow: 0 4px 16px -4px rgba(30,80,255,.25); border-color: rgba(30,80,255,.3); } .panel.is-secondary { opacity: .55; } .panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; gap: 8px; } .panel__head .eyebrow { font-size: 11px; } .panel__head-r { display: flex; gap: 6px; align-items: center; } .panel__count { font: 600 11px/1 'Inter Tight'; padding: 3px 6px; border-radius: 6px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.65); letter-spacing: .3px; } .panel__add { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(255,255,255,.6); background: linear-gradient(180deg,#4974FF,#1F3FD1); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -2px rgba(8,49,180,.25); transition: transform .12s ease; } .panel__add:hover { transform: translateY(-1px); } /* Filter chips inside Accounts panel */ .fchips { display: flex; gap: 4px; padding: 0 16px 10px; flex-wrap: wrap; } .fchip { height: 28px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; } .fchip:hover { background: rgba(48,48,48,.05); color: #303030; } .fchip.is-on { background: linear-gradient(180deg,#FAFAFA,#fff); border: 1px solid #fff; box-shadow: 0 2px 8px -3px rgba(0,0,0,.12); color: #303030; } /* Account row */ .acc-list { flex: 1; overflow-y: auto; min-height: 0; } .acc-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(48,48,48,.06); cursor: pointer; transition: background .12s ease; position: relative; } .acc-row:hover { background: rgba(48,48,48,.025); } .acc-row.is-selected { background: linear-gradient(90deg, rgba(30,80,255,.06), rgba(30,80,255,0)); } .acc-row.is-selected::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: #1A4BEB; } .acc-row.is-new::after { content: 'NEW'; position: absolute; right: 16px; top: 8px; font: 600 9px/1 'Inter Tight'; letter-spacing: .65px; padding: 3px 5px; border-radius: 4px; background: rgba(88,221,145,.25); color: #076E33; } .acc-row__ic { color: rgba(48,48,48,.55); display: flex; align-items: center; justify-content: center; } .acc-row__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .acc-row__nm { font: 600 14px/1 'Inter Tight'; color: #303030; letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acc-row__sub { display: flex; gap: 8px; align-items: center; font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; } .acc-row__sub .dot-sep { width: 2px; height: 2px; border-radius: 50%; background: rgba(48,48,48,.3); } .acc-row__bal { font: 600 14px/1 'Inter Tight'; color: #303030; letter-spacing: -.3px; text-align: right; } .acc-row__contrib { font: 400 11px/1.4 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; margin-top: 4px; } .acc-row__contrib .roi-up { color: #076E33; } /* Footer summary */ .acc-foot { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-top: 1px solid rgba(48,48,48,.08); flex-wrap: wrap; font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; } .acc-foot strong { color: #303030; font-weight: 600; } .acc-foot__sep { width: 1px; height: 14px; background: #DCDCDC; } /* Mini-list for compact panels (inflows, expenses, etc) */ .mini-row { padding: 11px 16px; border-bottom: 1px solid rgba(48,48,48,.06); display: flex; flex-direction: column; gap: 4px; } .mini-row:last-child { border-bottom: 0; } .mini-row__nm { font: 500 13px/1.2 'Inter Tight'; color: rgba(48,48,48,.85); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mini-row__amt { font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; } /* Empty state */ .empty-state { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; } .empty-state__ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(30,80,255,.07); color: #1A4BEB; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .empty-state__t { font: 600 14px/1.3 'Inter Tight'; color: #303030; letter-spacing: .3px; } .empty-state__d { font: 400 12px/1.5 'Inter Tight'; color: rgba(48,48,48,.55); max-width: 220px; } /* ---------- EDITOR SIDE SHEET ---------- A persistent workspace panel anchored to the viewport. It sits above page chrome (sidebar, header, tabs, sectabs, sticky elements) so it's never visually trapped under the page structure, but it does NOT behave like a blocking modal — there is no scrim, no blur, no pointer-lock. Instead, when the sheet is open, .app.is-sheet-open reserves a 564px right gutter on the main content, so the chart and tables shrink to fit and remain fully visible and interactive. This preserves the live-preview contract: the chart KPIs and ghost line stay readable while the user edits, and the user can click rows in the table behind to switch entities without first dismissing the sheet. */ .app.is-sheet-open .main { padding-right: calc(540px + 32px); } @media (max-width: 1200px) { .app.is-sheet-open .main { padding-right: calc(440px + 24px); } } .editor { background: #fff; border-radius: 24px; border: 1px solid rgba(48,48,48,.08); box-shadow: 0 16px 48px -12px rgba(15,30,80,.18), 0 4px 14px -6px rgba(0,0,0,.10); display: flex; flex-direction: column; position: fixed; top: 12px; right: 12px; bottom: 12px; width: 540px; max-width: calc(100vw - 24px); z-index: 60; overflow: hidden; animation: editorIn .28s cubic-bezier(.2,.7,.2,1); } @media (max-width: 1200px) { .editor { width: 440px; } } .editor--tall { top: 12px; bottom: 12px; } @keyframes editorIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .editor__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px 16px; border-bottom: 1px solid rgba(48,48,48,.08); gap: 12px; } .editor__head-l { display: flex; align-items: flex-start; gap: 12px; } .editor__head-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .editor__icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(30,80,255,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .editor__eyebrow { font: 600 10px/1 'Inter Tight'; letter-spacing: .8px; text-transform: uppercase; color: #1A4BEB; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; } .editor__title { font: 600 17px/1.2 'Inter Tight'; color: #303030; letter-spacing: -.2px; } .editor__close { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(48,48,48,.5); } .editor__close:hover { background: rgba(48,48,48,.05); color: #303030; } /* Compact type flag in the editor header (replaces the old full-width type chip). A quiet, readable type name + a small "Change type" pill, tucked just under the title so it stays discoverable without dominating. */ .editor__typeflag { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; } .editor__typeline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 5px; } .editor__typeline .editor__typeflag { margin-top: 0; } .editor__typeflag-lab { font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; color: rgba(48,48,48,.55); } .editor__typeflag-btn { background: none; border: 0; cursor: pointer; padding: 0; font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; color: rgba(48,48,48,.45); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(48,48,48,.24); transition: color .14s, text-decoration-color .14s; } .editor__typeflag-btn:hover { color: #1A4BEB; text-decoration-color: #1A4BEB; } .editor__typeflag-lock { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px; border-radius: 999px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.5); font: 600 10px/1 'Inter Tight'; letter-spacing: .3px; } /* Drawer-wide expand/collapse-all toggle. Lives in the editor header so the user can flip every collapsible section (required + optional) at once. */ .editor__expand-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(48,48,48,.10); padding: 0 10px; height: 30px; border-radius: 8px; cursor: pointer; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.72); letter-spacing: .15px; transition: color .15s ease, background .15s ease, border-color .15s ease; } .editor__expand-btn:hover { color: #303030; background: rgba(48,48,48,.04); border-color: rgba(48,48,48,.18); } .editor__expand-btn-ic { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: rgba(48,48,48,.55); } .editor__expand-btn:hover .editor__expand-btn-ic { color: #303030; } /* ============== EDITOR HIERARCHY ============== Two clearly-distinct levels only: L0 — editor body: cool neutral gray (the "container") L1 — section cards: solid white with thin border Inside a section: stays white. Sub-blocks that need callouts use FLAT tinted backgrounds (no gradients). This avoids the previous 3-level nesting with fading gradients that confused the hierarchy. */ /* Modal working surface — pure white, matching the rest of the dashboard's calm surface language. Hierarchy is built by giving each section container a subtle warm-gray fill (#FAFAFA — the dashboard's card-top-stop token), while inputs stay white with a visible hairline border. */ .editor__body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 28px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; } .editor__body > * { flex-shrink: 0; } /* Guidance tip — flat tinted callout */ .guidance-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; background: #E8EDFB; border: 1px solid rgba(30,80,255,.18); border-radius: 12px; } .guidance-tip__icon { width: 22px; height: 22px; border-radius: 6px; background: rgba(30,80,255,.12); color: #1A4BEB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guidance-tip__body { font: 400 13px/1.45 'Inter Tight'; color: rgba(48,48,48,.85); letter-spacing: .2px; flex: 1; } .guidance-tip__close { width: 20px; height: 20px; border: 0; background: transparent; color: rgba(48,48,48,.4); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guidance-tip__close:hover { background: rgba(48,48,48,.06); color: #303030; } /* Required block (kept) + parity for optional sections. Subtle warm-gray fill against the white sheet, so the block reads as a container without competing with the white input fields it holds. */ .editor__block { background: #FAFAFA; border-radius: 14px; padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px; border: 1px solid rgba(48,48,48,.07); } .editor__block-label { font: 700 11px/1 'Inter Tight'; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(48,48,48,.7); } .editor__block-sub { font: 600 11px/1 'Inter Tight'; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(48,48,48,.62); padding: 10px 4px 2px; } /* Optional-Settings header row — sits above the optional collapsible sections. Left label mirrors `.editor__block-sub` styling; right side carries a tiny "Expand all / Collapse all" toggle with a stacked-chevron icon. */ .opt-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 2px; } .opt-head--label-only { padding: 14px 4px 0; } .opt-head--label-only .opt-head__lab { opacity: .85; } .opt-head__lab { font: 500 13px/1.2 'Inter Tight'; color: rgba(48,48,48,.68); } .opt-head__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 6px 4px; cursor: pointer; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.75); letter-spacing: .3px; border-radius: 6px; transition: color .15s ease, background .15s ease; } .opt-head__btn:hover { color: #303030; background: rgba(48,48,48,.04); } .opt-head__btn-ic { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; color: rgba(48,48,48,.55); } .opt-head__btn:hover .opt-head__btn-ic { color: #303030; } /* Expand-all row — slim divider that sits between the loose required fields and the first collapsible card (Holdings on accounts, Timing on inflows). Right-aligned so the button reads as a utility control rather than a section header. */ .editor__expand-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 0; margin-top: -2px; gap: 12px; } /* Section-group label — names the block of collapsible sections below. Matches "Optional" divider below it so the two read as parallel section headings, but slightly heavier color since this is the first of the two and pairs with the Expand/Collapse-all toggle. */ .editor__expand-row-label { font: 500 13px/1.2 'Inter Tight'; color: rgba(48,48,48,.78); letter-spacing: .1px; } .editor__row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Field */ .field { display: flex; flex-direction: column; gap: 6px; } .field__lab { display: flex; align-items: center; gap: 6px; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .3px; } .field__req { color: #C0392B; margin-left: 2px; } .field__help { width: 14px; height: 14px; color: rgba(48,48,48,.35); cursor: help; position: relative; } .field__help:hover { color: #1A4BEB; } /* Tooltip bubble is now drawn by tooltip.js in a fixed-position element on (see .app-tip) so it can never be clipped by a scrolling drawer or an overflow:hidden section card. The old ::after bubble is disabled. */ .field__help[data-tip]::after { content: none; } .field__err { font: 400 11px/1.3 'Inter Tight'; color: #C0392B; letter-spacing: .3px; margin-top: 2px; } .field__sub { font: 400 12px/1.45 'Inter Tight'; color: rgba(48,48,48,.5); letter-spacing: .2px; margin-top: 2px; } /* Global tooltip bubble — rendered by tooltip.js as a single fixed element on , so it escapes every overflow-clipping ancestor. Replaces the old per-trigger ::after tooltips app-wide. */ .app-tip { position: fixed; left: 0; top: 0; z-index: 9999; max-width: 320px; white-space: pre-line; background: #303030; color: #fff; font: 400 12px/1.45 'Inter Tight'; letter-spacing: .2px; padding: 8px 10px; border-radius: 8px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.45); white-space: normal; text-align: left; pointer-events: none; opacity: 0; transition: opacity .12s ease; } /* When shown, the bubble accepts the pointer so users can move into it and click hyperlinks; a small close delay in tooltip.js bridges the gap. */ .app-tip.is-on { opacity: 1; pointer-events: auto; } .app-tip--rich b:first-child { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; } .app-tip a { color: #A9C0FF; text-decoration: underline; text-underline-offset: 2px; } .app-tip a:hover { color: #C9DCFF; } .app-tip::after { content: ''; position: absolute; left: var(--arrow-x, 50%); transform: translateX(-50%); border: 5px solid transparent; } .app-tip[data-pos="above"]::after { top: 100%; border-top-color: #303030; } .app-tip[data-pos="below"]::after { bottom: 100%; border-bottom-color: #303030; } .cur--placeholder .cur__suf { opacity: 0; } .cur__inp::placeholder { color: rgba(48,48,48,.42); font-weight: 400; letter-spacing: .2px; } .muted-help { font: 400 12px/1.5 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; margin: 4px 0 0; } /* Inputs — white fill with a clearly-visible hairline border so they pop against the warm-gray section containers they now sit inside. */ .inp { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(48,48,48,.18); background: #fff; font: 500 14px/1 'Inter Tight'; color: #303030; letter-spacing: .3px; transition: border-color .12s ease, box-shadow .12s ease; } .inp:focus { outline: 0; border-color: #1A4BEB; box-shadow: 0 0 0 3px rgba(30,80,255,.12); } .inp::placeholder { color: rgba(48,48,48,.35); font-weight: 400; } .cur { position: relative; } .cur__pre, .cur__suf { position: absolute; top: 50%; transform: translateY(-50%); font: 500 14px/1 'Inter Tight'; color: rgba(48,48,48,.55); pointer-events: none; } .cur__pre { left: 12px; } .cur__suf { right: 12px; } .cur__inp { padding-left: 26px; font-weight: 600; } /* House rule: no space between the "$" and the figure. The prefix sits at left:12px and the glyph is ~8px wide, so the value must start at 21px — 26px left a visible gap ("$ 854,000"). */ .cur:has(.cur__pre) .cur__inp { padding-left: 21px; } .cur:has(.cur__suf) .cur__inp { padding-left: 12px; padding-right: 28px; } /* Right-aligned money fields carry the "$" inside the value instead of as a left-pinned prefix, so nothing needs clearing on the left. */ .cur__inp--signed { padding-left: 12px; } /* Native date field — keep the typography consistent with the other inputs and nudge the picker indicator to match the field tint. */ .cur--date .cur__inp { font-weight: 600; font-family: 'Inter Tight'; } .cur--date .cur__inp::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; } .cur--date .cur__inp::-webkit-calendar-picker-indicator:hover { opacity: .85; } /* Segmented — track uses a semi-transparent dark fill (not a solid light grey) so the control reads as inset against ANY surface it sits on: white inputs/cards, warm-grey #FAFAFA blocks, AND the pale-blue inset bodies (.ptos__body / .ss-future__body etc) where a solid #ECEDF0 track would blend into the background. The active pill keeps the white fill but adds a 1px ring + slightly stronger shadow so it pops regardless of what's behind the track. */ .seg { display: flex; padding: 3px; background: rgba(48,48,48,.07); box-shadow: inset 0 0 0 1px rgba(48,48,48,.06); border-radius: 10px; } .seg__opt { flex: 1; height: 32px; border: 0; background: transparent; border-radius: 8px; font: 500 13px/1 'Inter Tight'; color: rgba(48,48,48,.62); letter-spacing: .3px; transition: color .12s ease; } .seg__opt:hover:not(.is-on) { color: rgba(48,48,48,.85); } .seg__opt.is-on { background: #fff; color: #303030; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(48,48,48,.10); } /* Custom select */ .select { position: relative; } .select__btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; } .select__btn span { font-weight: 500; color: #303030; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .select__btn svg { color: rgba(48,48,48,.5); flex-shrink: 0; } .select__menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 280px; overflow-y: auto; background: #fff; border-radius: 12px; border: 1px solid rgba(48,48,48,.1); box-shadow: 0 8px 24px -6px rgba(0,0,0,.18); z-index: 10; padding: 6px; } .select__group { padding: 4px 0 6px; } .select__glabel { font: 600 10px/1 'Inter Tight'; letter-spacing: .8px; text-transform: uppercase; color: rgba(48,48,48,.5); padding: 8px 10px 4px; } .select__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; text-align: left; font: 500 13px/1.3 'Inter Tight'; color: #303030; letter-spacing: .3px; } .select__opt svg { flex-shrink: 0; } .select__opt:hover { background: rgba(48,48,48,.04); } .select__opt.is-on { background: rgba(30,80,255,.08); color: #1A4BEB; } /* Inverted overlay surface — the open dropdown adopts the dark tooltip treatment (#303030) for contrast & clarity. The field button stays light. */ .select__menu { background: #303030; border-color: rgba(255,255,255,.08); box-shadow: 0 18px 44px -14px rgba(0,0,0,.6), 0 2px 10px -4px rgba(0,0,0,.45); } .select__glabel { color: rgba(255,255,255,.5); } .select__opt { color: rgba(255,255,255,.86); } .select__opt:hover { background: rgba(255,255,255,.08); } .select__opt.is-on { background: rgba(159,182,255,.14); color: #A9B8FF; } /* Sections (collapsible) — subtle warm-gray container against the white sheet. Inputs inside stay white so the form's two-tone hierarchy reads cleanly. */ .acc-section { background: #FAFAFA; border: 1px solid rgba(48,48,48,.07); border-radius: 14px; overflow: hidden; } .acc-section__head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 0; background: transparent; text-align: left; } .acc-section.is-open .acc-section__head { border-bottom: 1px solid rgba(48,48,48,.10); } .acc-section__ic { width: 18px; height: 18px; color: #1A4BEB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .acc-section__title { display: flex; align-items: center; gap: 8px; font: 700 11px/1 'Inter Tight'; color: #303030; letter-spacing: 1.1px; text-transform: uppercase; flex-wrap: wrap; } .acc-section__summary { font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .2px; margin-left: auto; margin-right: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; text-transform: none; } .acc-section__chev { color: rgba(48,48,48,.45); transition: transform .15s ease; flex-shrink: 0; margin-left: auto; } .acc-section.is-open .acc-section__chev { transform: rotate(90deg); } .acc-section__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: transparent; } /* Holdings card extends the section pattern: same chrome, plus an "input needed" outline state on the shell when there's no data. */ .acc-section.hcard-shell.needs-input:not(.is-open) { border-color: rgba(192,57,43,.28); background: #FDF4F3; } .acc-section.hcard-shell.needs-input .acc-section__ic { color: #C0392B; } .chip-edited { font: 600 10px/1 'Inter Tight'; letter-spacing: .65px; padding: 3px 5px; border-radius: 4px; background: rgba(30,80,255,.10); color: #1A4BEB; text-transform: uppercase; } .chip-edited.chip-defaults { background: rgba(140,87,217,.12); color: #6E40C9; } .chip-optional { font: 400 10px/1 'Inter Tight'; letter-spacing: .3px; padding: 2px 6px; border-radius: 4px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.5); text-transform: none; } .chip-needs { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 'Inter Tight'; letter-spacing: .55px; padding: 3px 6px; border-radius: 4px; background: rgba(192,57,43,.10); color: #C0392B; text-transform: uppercase; } .chip-needs__dot { width: 5px; height: 5px; border-radius: 50%; background: #E63946; box-shadow: 0 0 0 2px rgba(230,57,70,.18); flex-shrink: 0; } /* Editor footer */ .editor__danger { padding-top: 4px; display: flex; } .btn-text-danger { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #C0392B; font: 500 12px/1 'Inter Tight'; letter-spacing: .3px; padding: 8px 4px; border-radius: 8px; } .btn-text-danger:hover { background: rgba(192,57,43,.06); } .editor__foot { padding: 14px 20px; border-top: 1px solid rgba(48,48,48,.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; } .editor__foot-status { flex: 1; min-width: 0; } .btn-insights { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border: 0; background: transparent; border-radius: 10px; font: 600 13px/1 'Inter Tight'; color: #1A4BEB; letter-spacing: .2px; cursor: pointer; transition: background .15s; } .btn-insights:hover { background: rgba(26,75,235,.07); } .btn-insights svg { flex-shrink: 0; } .btn-insights__go { opacity: .5; } .editor__dirty { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.3 'Inter Tight'; color: #1A4BEB; letter-spacing: .3px; } .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot-blue { background: #1A4BEB; } .editor__foot-btns { display: flex; gap: 8px; flex-shrink: 0; } .btn-ghost { height: 36px; padding: 0 14px; border: 1px solid rgba(48,48,48,.15); background: #fff; border-radius: 10px; font: 500 13px/1 'Inter Tight'; color: rgba(48,48,48,.8); letter-spacing: .3px; } .btn-ghost:hover { background: #FAFAFA; } .btn-primary { height: 36px; padding: 0 16px; border: 1px solid transparent; background: linear-gradient(180deg,#4974FF,#1F3FD1) padding-box, linear-gradient(180deg,#7290F1,#1F3FD1) border-box; border-radius: 10px; color: #fff; font: 600 13px/1 'Inter Tight'; letter-spacing: .3px; box-shadow: 0 4px 12px -2px rgba(8,49,180,.3); } .btn-primary:hover { background: linear-gradient(180deg,#3A66F2,#1A38B8) padding-box, linear-gradient(180deg,#7290F1,#1F3FD1) border-box; } .btn-primary.is-disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; } /* Onboarding strip */ .onboard { background: #fff; border: 1px solid rgba(48,48,48,.08); border-radius: 16px; padding: 14px 18px 14px 20px; display: flex; align-items: center; gap: 20px; box-shadow: 0 2px 8px -3px rgba(0,0,0,.08); position: relative; } .onboard__bar { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; } .onboard__title { font: 600 13px/1.2 'Inter Tight'; color: #303030; display: flex; align-items: center; gap: 8px; letter-spacing: .2px; } .onboard__progress { display: flex; gap: 4px; } .onboard__step { flex: 1; height: 5px; border-radius: 3px; background: rgba(48,48,48,.08); position: relative; overflow: hidden; transition: background .2s ease; } .onboard__step.is-done { background: #33B26A; } .onboard__step.is-current { background: linear-gradient(90deg, #1A4BEB 0%, #1A4BEB 50%, rgba(48,48,48,.08) 50%, rgba(48,48,48,.08) 100%); } .onboard__copy { font: 400 12px/1.4 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .3px; } .onboard__cta { display: flex; gap: 8px; align-items: center; } .onboard__close { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(48,48,48,.45); flex-shrink: 0; transition: all .12s ease; } .onboard__close:hover { background: rgba(48,48,48,.06); color: #303030; } .btn-link { background: transparent; border: 0; color: #1A4BEB; font: 600 13px/1 'Inter Tight'; letter-spacing: .3px; padding: 8px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; } .btn-link:hover { background: rgba(30,80,255,.07); } /* delta chip on chart */ .proj__head-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .proj__today { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgba(30,80,255,.07); color: #1A4BEB; font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; white-space: nowrap; } .proj__today svg { flex-shrink: 0; opacity: .8; } .proj__delta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: rgba(88,221,145,.18); color: #076E33; font: 600 12px/1 'Inter Tight'; letter-spacing: .3px; } .proj__delta.is-down { background: rgba(255,77,94,.14); color: #C0392B; } /* Toast */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 14px 18px; border-radius: 12px; background: #303030; color: #fff; font: 500 13px/1.3 'Inter Tight'; letter-spacing: .3px; box-shadow: 0 8px 24px -6px rgba(0,0,0,.3); display: flex; align-items: center; gap: 10px; max-width: 360px; z-index: 100; animation: toastIn .25s ease-out; } .toast__ic { width: 22px; height: 22px; border-radius: 6px; background: rgba(88,221,145,.25); color: #58DE92; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @keyframes toastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Confirm dialog */ .modal-back { position: fixed; inset: 0; background: rgba(48,48,48,.4); display: flex; align-items: center; justify-content: center; z-index: 100; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { width: 380px; background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 16px 48px -12px rgba(0,0,0,.3); } .modal__t { font: 600 16px/1.3 'Inter Tight'; color: #303030; margin-bottom: 8px; } .modal__d { font: 400 13px/1.5 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .3px; margin-bottom: 18px; } .modal__btns { display: flex; gap: 8px; justify-content: flex-end; } /* Footer note */ .foot-note { text-align: center; font: 400 12px/1.5 'Inter Tight'; color: rgba(48,48,48,.4); letter-spacing: .3px; padding-top: 8px; } /* Page-level save bar shown while editing */ .work__savebar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; margin-top: 4px; background: linear-gradient(180deg, rgba(246,246,246,.8), #fff 70%); border: 1px solid #fff; border-radius: 16px; box-shadow: 0 -2px 12px -4px rgba(0,0,0,.1), 0 6px 18px -8px rgba(30,80,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .work__savebar-msg { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 'Inter Tight'; color: #1A4BEB; letter-spacing: .3px; min-width: 0; } .work__savebar-btns { display: flex; gap: 8px; flex-shrink: 0; } /* ============== Linked / Not-linked badge =================== Shared between the Accounts table row and the right-side AccountEditor drawer header so the affordance reads the same everywhere. Green pill with a pulsing dot when an account is connected via Plaid/MX/Yodlee; neutral pill when the user entered the account manually. Hovering or focusing the badge opens a popover (rendered in a portal — see linked_badge.jsx) with institution, provider and last-sync timestamp. ------------------------------------------------------------ */ .linked-badge { display: inline-flex; align-items: center; gap: 6px; height: 18px; padding: 0 8px; border-radius: 5px; font: 600 10px/1 'Inter Tight'; letter-spacing: .35px; text-transform: uppercase; vertical-align: middle; cursor: default; outline: none; white-space: nowrap; transition: background .12s ease; } .linked-badge:focus-visible { box-shadow: 0 0 0 2px rgba(30,80,255,.35); } .linked-badge.is-on { background: rgba(51,178,106,.12); color: #076E33; } .linked-badge.is-on:hover { background: rgba(51,178,106,.18); } .linked-badge.is-off { background: rgba(48,48,48,.06); color: rgba(48,48,48,.55); } .linked-badge.is-off:hover { background: rgba(48,48,48,.10); } .linked-badge__lab { display: inline-block; } .linked-badge__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; position: relative; } .linked-badge.is-on .linked-badge__dot { background: #33B26A; box-shadow: 0 0 0 2px rgba(51,178,106,.22); animation: linkedBadgePulse 2.2s ease-in-out infinite; } .linked-badge.is-off .linked-badge__dot { background: rgba(48,48,48,.35); box-shadow: 0 0 0 2px rgba(48,48,48,.08); } @keyframes linkedBadgePulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(51,178,106,.22); } 50% { box-shadow: 0 0 0 4px rgba(51,178,106,.06); } } @media (prefers-reduced-motion: reduce) { .linked-badge.is-on .linked-badge__dot { animation: none; } } /* Inside the editor drawer the eyebrow is uppercase 10px, sitting in a confined header — give the badge a touch more breathing room from the "EDITING" / "ADDING · STEP 2 OF 2" text. */ .editor__eyebrow .linked-badge { height: 18px; } /* In the table the badge follows the account name; nudge it away from the name text with a small left margin. */ .atable__nm .linked-badge { margin-left: 8px; } .atable__nm { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; } .atable__nm-text { display: inline; } /* ---- Popover (rendered in a portal under ) — DARK per design system ---- */ .linked-badge__pop { position: fixed; width: 256px; padding: 12px 14px; background: #303030; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(0,0,0,.45), 0 2px 8px -3px rgba(0,0,0,.25); z-index: 1200; display: flex; flex-direction: column; gap: 10px; text-transform: none; letter-spacing: .2px; font-family: 'Inter Tight', system-ui, sans-serif; color: rgba(255,255,255,.92); animation: linkedBadgePopIn .14s ease-out both; } @keyframes linkedBadgePopIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .linked-badge__pop--above { animation-name: linkedBadgePopInUp; } @keyframes linkedBadgePopInUp { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .linked-badge__pop-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.10); } .linked-badge__pop-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .linked-badge__pop-dot.is-on { background: #58DE92; box-shadow: 0 0 0 3px rgba(91,227,154,.20); } .linked-badge__pop-dot.is-off { background: rgba(255,255,255,.45); box-shadow: 0 0 0 3px rgba(255,255,255,.08); } .linked-badge__pop-title { font: 600 12px/1 'Inter Tight'; color: #FFFFFF; letter-spacing: .1px; } .linked-badge__pop-rows { display: flex; flex-direction: column; gap: 7px; } .linked-badge__pop-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .linked-badge__pop-k { font: 400 12px/1.2 'Inter Tight'; color: rgba(255,255,255,.55); letter-spacing: .2px; } .linked-badge__pop-v { font: 600 12px/1.2 'Inter Tight'; color: #FFFFFF; letter-spacing: .1px; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .linked-badge__pop-help { font: 400 12px/1.45 'Inter Tight'; color: rgba(255,255,255,.65); letter-spacing: .15px; } /* ============== NEW: Toggle ============== */ .toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #FAFAFA; border: 1px solid rgba(48,48,48,.06); border-radius: 10px; width: 100%; text-align: left; transition: all .12s ease; } .toggle:hover { background: #FAFAFA; border-color: rgba(30,80,255,.15); } .toggle__sw { width: 32px; height: 18px; border-radius: 20px; background: rgba(48,48,48,.18); position: relative; flex-shrink: 0; transition: background .15s ease; } .toggle__dot { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s ease; } .toggle.is-on .toggle__sw { background: #1A4BEB; } .toggle.is-on .toggle__dot { transform: translateX(14px); } .toggle__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .toggle__lab { font: 600 13px/1.2 'Inter Tight'; color: #303030; letter-spacing: .2px; } .toggle__sub { font: 400 12px/1.4 'Inter Tight'; color: rgba(48,48,48,.58); letter-spacing: .2px; } /* Toggle row with a trailing info icon — for the optional add-on sections (Roth portion, employer match, Roth conversions). The boxed Toggle keeps its original style; the info icon hover-reveals the longer explainer via the shared .field__help[data-tip] bubble (mirrors the SS toggle). */ .addon-toggle { display: flex; align-items: center; gap: 8px; } .addon-toggle > .toggle { flex: 1; min-width: 0; } .addon-toggle__tip { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: rgba(48,48,48,.4); cursor: help; border-radius: 50%; transition: all .12s ease; position: relative; } .addon-toggle__tip:hover, .addon-toggle__tip:focus-visible { color: #1A4BEB; background: rgba(30,80,255,.08); outline: none; } .addon-toggle__tip[data-tip]::after { max-width: 320px; text-align: left; } /* Reveal group under the toggle — plain stacked controls, no box and no left rail. */ .addon-reveal { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 2px; } /* ============== NEW: Holdings table ============== */ .hold { display: flex; flex-direction: column; gap: 10px; } .hold__linked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, rgba(30,80,255,.06), rgba(30,80,255,.02)); border: 1px solid rgba(30,80,255,.18); } .hold__linked-ic { width: 26px; height: 26px; border-radius: 7px; background: rgba(30,80,255,.14); color: #1A4BEB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hold__linked-body { flex: 1; min-width: 0; } .hold__linked-t { font: 600 13px/1.2 'Inter Tight'; color: #303030; letter-spacing: .2px; margin-bottom: 2px; } .hold__linked-d { font: 400 12px/1.45 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .2px; } .hold__linked-d strong { color: #1A4BEB; font-weight: 600; } .hold__linked .toggle { width: auto; max-width: 124px; padding: 6px 10px; background: #fff; } .hold__linked .toggle__txt { gap: 0; } .hold__linked .toggle__lab { font-size: 12px; } .hold__linked .toggle__sub { display: none; } .hold__t { display: grid; grid-template-columns: 1.1fr .9fr .8fr .9fr .9fr 24px; gap: 6px; padding: 0 4px 6px; border-bottom: 1px solid rgba(48,48,48,.08); } .hold__th { font: 500 11px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .55px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .hold__th--num { justify-content: flex-end; text-align: right; } .hold__th-tag { font: 600 9px/1 'Inter Tight'; padding: 2px 4px; border-radius: 3px; background: rgba(30,80,255,.1); color: #1A4BEB; letter-spacing: .4px; text-transform: uppercase; } .hold__r { display: grid; grid-template-columns: 1.1fr .9fr .8fr .9fr .9fr 24px; gap: 6px; padding: 4px 0; align-items: center; } .hold__cell { display: flex; align-items: center; position: relative; min-width: 0; } .hold__cell--num { justify-content: flex-end; } .hold__cell--val { font: 600 13px/1 'Inter Tight'; color: #303030; padding: 0 4px; letter-spacing: -.1px; } .inp--bare { height: 32px; padding: 0 8px; border-radius: 7px; border: 1px solid transparent; background: rgba(48,48,48,.025); font-size: 13px; font-weight: 500; } .inp--bare:hover:not(:disabled) { background: rgba(48,48,48,.05); } .inp--bare:focus { background: #fff; border-color: #1A4BEB; box-shadow: 0 0 0 2px rgba(30,80,255,.12); } .inp--bare.is-locked, .inp--bare:disabled { background: transparent; color: rgba(48,48,48,.55); cursor: not-allowed; padding-right: 18px; } .inp--num { text-align: right; font-variant-numeric: tabular-nums; } select.inp--bare { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 22px; } select.inp--bare:disabled { background-image: none; padding-right: 8px; } .hold__lock { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: rgba(48,48,48,.35); pointer-events: none; } .hold__rm { width: 22px; height: 22px; border-radius: 5px; border: 0; background: transparent; color: rgba(48,48,48,.4); display: flex; align-items: center; justify-content: center; } .hold__rm:hover { background: rgba(192,57,43,.1); color: #C0392B; } .hold__empty { display: flex; align-items: center; gap: 8px; padding: 16px 12px; border-radius: 8px; background: rgba(48,48,48,.025); color: rgba(48,48,48,.55); font: 400 12px/1.4 'Inter Tight'; letter-spacing: .2px; } .hold__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px 0; border-top: 1px solid rgba(48,48,48,.08); margin-top: 4px; flex-wrap: wrap; } .hold__add { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px dashed rgba(30,80,255,.4); background: transparent; color: #1A4BEB; font: 600 12px/1 'Inter Tight'; letter-spacing: .3px; } .hold__add:hover { background: rgba(30,80,255,.06); border-style: solid; } .hold__total { display: flex; align-items: center; gap: 8px; margin-left: auto; } .hold__total-l { font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; } .hold__total-v { font: 600 13px/1 'Inter Tight'; color: #303030; letter-spacing: -.2px; } /* ============== NEW: Contributions / Withdrawal / Return bodies ============== */ .contrib { display: flex; flex-direction: column; gap: 10px; } .contrib__change { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed rgba(48,48,48,.12); margin-top: 4px; } .contrib__change-body { padding: 10px 12px 12px; border-radius: 10px; background: rgba(30,80,255,.04); border: 1px solid rgba(30,80,255,.12); } /* Roth-portion split preview — Roth vs pre-tax dollar breakdown shown under the "Percent in Roth account" field. */ .rp-split { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(48,48,48,.14); } .rp-split__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rp-split__lab { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1.3 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .3px; } .rp-split__val { font: 600 13px/1 'Inter Tight'; color: #303030; letter-spacing: -.2px; } /* ─── Social Security: future-payment-change block ───────────────────── Mirrors the .contrib__change pattern used by investment-account contributions so the two surfaces feel like the same control. The tooltip-trigger sits to the right of the toggle and uses the existing .field__help tooltip styling so hover behaviour matches the inline field tooltips elsewhere in the editor. */ .ss-future { display: flex; flex-direction: column; gap: 10px; } .ss-future__row { display: flex; align-items: center; gap: 8px; } .ss-future__row .toggle { flex: 1; } .ss-future__tip { width: 16px; height: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: rgba(48,48,48,.45); cursor: help; border-radius: 50%; transition: color .12s ease, background .12s ease; } .ss-future__tip:hover, .ss-future__tip:focus-visible { color: #1A4BEB; background: rgba(30,80,255,.08); outline: none; } /* Tooltip bubble is positioned by the shared .field__help[data-tip] styles. The default bubble width is fine for the short explanatory sentence used here; widen modestly so the longer SS copy doesn't wrap into 6+ lines. */ .ss-future__tip[data-tip]::after { max-width: 280px; } .ss-future__body { padding: 10px 12px 12px; border-radius: 10px; background: rgba(30,80,255,.04); border: 1px solid rgba(30,80,255,.12); } /* Locked Inflow Type chip — used on Social Security where users can't swap type because the record is seeded per household member. Visually replaces the "Change" button with a quiet lock badge. */ .iftype-chip__locked { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(48,48,48,.06); color: rgba(48,48,48,.55); font: 600 11px/1 'Inter Tight'; letter-spacing: .4px; text-transform: uppercase; } /* Danger-zone variant that swaps the destructive Delete control for a read-only "can't delete this record" note. Same vertical rhythm as the regular .editor__danger so spacing at the bottom of the form stays consistent between deletable and non-deletable inflows. */ .editor__danger--locked { display: flex; align-items: flex-start; } .editor__locked-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(48,48,48,.04); border: 1px dashed rgba(48,48,48,.14); font: 400 12px/1.5 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .2px; } .editor__locked-note i { color: rgba(48,48,48,.45); margin-top: 1px; flex-shrink: 0; } .ret { display: flex; flex-direction: column; gap: 10px; } .ret__net { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: #E9F6EF; border: 1px solid rgba(88,221,145,.4); } /* Annuity income payments — vertical stack of fields under the mode toggle. */ .annu { display: flex; flex-direction: column; gap: 12px; } .annu .ss-future__tip[data-tip]::after { max-width: 300px; } .ret__net-l { font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .3px; } .ret__net-v { font: 700 16px/1 'Inter Tight'; color: #076E33; letter-spacing: -.2px; } .ret__net-v small { font: 500 11px/1 'Inter Tight'; color: rgba(7,110,51,.65); margin-left: 4px; } .wdraw { display: flex; flex-direction: column; gap: 6px; } .wdraw__opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(48,48,48,.08); background: #fff; text-align: left; transition: all .12s ease; } .wdraw__opt:hover { border-color: rgba(30,80,255,.25); background: rgba(30,80,255,.025); } .wdraw__opt.is-on { border-color: #1A4BEB; background: rgba(30,80,255,.05); box-shadow: 0 0 0 3px rgba(30,80,255,.08); } .wdraw__radio { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(48,48,48,.25); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: border-color .12s ease; } .wdraw__opt.is-on .wdraw__radio { border-color: #1A4BEB; } .wdraw__dot { width: 8px; height: 8px; border-radius: 50%; background: #1A4BEB; transform: scale(0); transition: transform .15s ease; } .wdraw__opt.is-on .wdraw__dot { transform: scale(1); } .wdraw__txt { flex: 1; min-width: 0; } .wdraw__lab { font: 600 13px/1.2 'Inter Tight'; color: #303030; letter-spacing: .2px; margin-bottom: 3px; } .wdraw__desc { font: 400 12px/1.45 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .2px; } /* ============================================================ HOLDINGS CARD — new redesign per Figma ============================================================ */ .hcard { background: #fff; border: 1px solid rgba(48,48,48,.08); border-radius: 14px; box-shadow: 0 1px 2px rgba(48,48,48,.03); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; } .hcard.is-open { box-shadow: 0 4px 16px -6px rgba(48,48,48,.12); border-color: rgba(48,48,48,.12); } .hcard.needs-input:not(.is-open) { border-color: rgba(192,57,43,.22); } .hcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 0; background: transparent; cursor: pointer; text-align: left; } .hcard__head-l { display: flex; align-items: center; gap: 8px; min-width: 0; } .hcard__eyebrow { font: 700 11px/1 'Inter Tight'; letter-spacing: 1.1px; text-transform: uppercase; color: #303030; } .hcard__pill { font: 600 10px/1 'Inter Tight'; letter-spacing: .55px; text-transform: uppercase; padding: 3px 6px; border-radius: 4px; } .hcard__pill.is-defaults { background: rgba(140,87,217,.14); color: #6E40C9; } .hcard__pill.is-edited { background: rgba(217,151,71,.18); color: #8A5A1A; } .hcard__chev { color: rgba(48,48,48,.45); transition: transform .15s ease; flex-shrink: 0; } .hcard.is-open .hcard__chev { transform: rotate(180deg); } .hcard__sub { padding: 0 16px 14px; font: 400 13px/1.3 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .2px; display: flex; align-items: center; gap: 8px; } .hcard__sub-need { display: inline-flex; align-items: center; gap: 7px; color: #C0392B; font-weight: 500; } .hcard__dot { width: 6px; height: 6px; border-radius: 50%; background: #E63946; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(230,57,70,.18); } .hcard__sub-info { color: rgba(48,48,48,.65); font-weight: 500; } .hcard__body { display: flex; flex-direction: column; gap: 14px; padding: 16px; background: #fff; } /* Allocation mini-chart inside Holdings — sits directly on white now, so use a subtle gray fill (no gradient) to differentiate it. */ .hchart { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: #FAFAFA; border-radius: 10px; border: 1px solid rgba(48,48,48,.06); } .hchart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .3px; } .hchart__l { font-weight: 500; } .hchart__r { font-weight: 500; color: rgba(48,48,48,.55); display: inline-flex; align-items: center; gap: 8px; } .hchart__r strong { color: #303030; font-weight: 600; } .hchart__sep { width: 4px; } .alloc-bar { display: flex; width: 100%; border-radius: 4px; overflow: hidden; background: rgba(48,48,48,.06); } .alloc-bar__seg { height: 100%; transition: width .25s ease; } .alloc-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 400 12px/1 'Inter Tight'; color: rgba(48,48,48,.65); letter-spacing: .2px; } .alloc-legend__i { display: inline-flex; align-items: center; gap: 5px; } .alloc-legend__sq { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .alloc-legend__l { color: rgba(48,48,48,.65); } .alloc-legend__i strong { color: #303030; font-weight: 600; } /* ----- Mode select ----- */ .hmode { display: flex; flex-direction: column; gap: 6px; } .hmode__lab { font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .2px; } .hmode__select { width: 100%; height: 38px; padding: 0 36px 0 12px; border-radius: 10px; border: 1px solid rgba(48,48,48,.15); background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center; font: 500 14px/1 'Inter Tight'; color: #303030; letter-spacing: .2px; appearance: none; -webkit-appearance: none; cursor: pointer; } .hmode__select:focus { outline: 0; border-color: #1A4BEB; box-shadow: 0 0 0 3px rgba(30,80,255,.12); } /* ----- Banner ----- */ .hbanner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; background: rgba(30,80,255,.06); border: 1px solid rgba(30,80,255,.18); color: rgba(48,48,48,.78); font: 500 12px/1.3 'Inter Tight'; letter-spacing: .2px; } .hbanner svg { color: #1A4BEB; flex-shrink: 0; } /* ----- Holdings table ----- */ .htable { border: 1px solid rgba(48,48,48,.09); border-radius: 10px; overflow: hidden; background: #fff; } .htable__head { display: grid; grid-template-columns: 1.4fr 1.3fr .8fr; gap: 8px; padding: 9px 14px; background: #FAFAFA; font: 600 11px/1 'Inter Tight'; letter-spacing: .8px; text-transform: uppercase; color: rgba(48,48,48,.55); border-bottom: 1px solid rgba(48,48,48,.06); } .htable__head--num { text-align: right; } .htable__rows { display: flex; flex-direction: column; } /* ----- Row (collapsed + expanded) ----- */ .hrow { border-bottom: 1px solid rgba(48,48,48,.06); } .hrow:last-child { border-bottom: 0; } .hrow.is-open { background: rgba(48,48,48,.02); } .hrow.is-new { background: rgba(30,80,255,.025); } .hrow__top { width: 100%; display: grid; grid-template-columns: 14px 1.4fr 1.3fr .8fr; gap: 8px; align-items: center; padding: 11px 14px; border: 0; background: transparent; text-align: left; cursor: pointer; } .hrow__top:hover:not(:disabled) { background: rgba(48,48,48,.015); } .hrow__chev { color: rgba(48,48,48,.4); transition: transform .15s ease; } .hrow.is-open .hrow__chev { transform: rotate(180deg); color: rgba(48,48,48,.7); } .hrow__name { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hrow__nm { font: 600 14px/1.1 'Inter Tight'; color: #303030; letter-spacing: -.1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrow__tk { font: 400 11px/1 'Inter Tight'; color: rgba(48,48,48,.5); letter-spacing: .3px; } .hrow__alloc { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; } .hrow__val { font: 600 14px/1 'Inter Tight'; color: #303030; letter-spacing: -.2px; text-align: right; white-space: nowrap; } .cls-chip { display: inline-flex; align-items: center; font: 600 11px/1 'Inter Tight'; padding: 3px 5px; border-radius: 4px; letter-spacing: .2px; white-space: nowrap; } .cls-chip--sm { font-size: 10px; padding: 2px 5px; } /* Row expanded body */ .hrow__body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; } .hrow__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .hfield { display: flex; flex-direction: column; gap: 5px; } .hfield__lab { font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .2px; } .hinp { width: 100%; height: 36px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(48,48,48,.15); background: #fff; font: 500 13px/1 'Inter Tight'; color: #303030; letter-spacing: .2px; transition: border-color .12s ease, box-shadow .12s ease; } .hinp:focus { outline: 0; border-color: #1A4BEB; box-shadow: 0 0 0 3px rgba(30,80,255,.12); } .hinp::placeholder { color: rgba(48,48,48,.35); font-weight: 400; } .hinp:disabled { background: rgba(48,48,48,.03); color: rgba(48,48,48,.5); cursor: not-allowed; } /* Holdings-no-ticker toggle row */ .htoggle { display: flex; align-items: center; gap: 10px; padding: 8px 4px; background: transparent; border: 0; text-align: left; width: 100%; cursor: pointer; } .htoggle__sw { width: 30px; height: 17px; border-radius: 12px; background: rgba(48,48,48,.18); position: relative; flex-shrink: 0; transition: background .15s ease; } .htoggle__dot { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .15s ease; } .htoggle.is-on .htoggle__sw { background: #1A4BEB; } .htoggle.is-on .htoggle__dot { transform: translateX(13px); } .htoggle__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .htoggle__lab { font: 500 13px/1.1 'Inter Tight'; color: #303030; letter-spacing: .2px; } .htoggle__sub { font: 400 12px/1.2 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .15px; } /* Asset class allocator */ .halloc { display: flex; flex-direction: column; gap: 8px; } .halloc__row { display: flex; flex-direction: column; gap: 5px; } .halloc__num { font: 500 12px/1 'Inter Tight'; color: rgba(48,48,48,.7); letter-spacing: .2px; } .halloc__num.is-hidden { display: none; } .halloc__ctrls { display: grid; grid-template-columns: minmax(0,1fr) 90px auto; gap: 8px; align-items: center; } .halloc__x { width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: rgba(48,48,48,.5); display: flex; align-items: center; justify-content: center; transition: all .12s ease; } .halloc__x:hover { background: rgba(192,57,43,.08); color: #C0392B; } .hcls__select { width: 100%; height: 36px; padding: 0 32px 0 12px; border-radius: 8px; border: 1px solid rgba(48,48,48,.15); background: #fff url("data:image/svg+xml;utf8,") no-repeat right 12px center; font: 500 13px/1 'Inter Tight'; color: #303030; appearance: none; -webkit-appearance: none; cursor: pointer; } .hcls__select:focus { outline: 0; border-color: #1A4BEB; box-shadow: 0 0 0 3px rgba(30,80,255,.12); } .hcls__select:disabled { background-color: rgba(48,48,48,.03); color: rgba(48,48,48,.5); cursor: not-allowed; } .pct-step { position: relative; height: 36px; border-radius: 8px; border: 1px solid rgba(48,48,48,.15); background: #fff; display: flex; align-items: center; transition: border-color .12s ease, box-shadow .12s ease; } .pct-step.is-disabled { background: rgba(48,48,48,.03); } .pct-step:focus-within { border-color: #1A4BEB; box-shadow: 0 0 0 3px rgba(30,80,255,.12); } .pct-step__inp { flex: 1; min-width: 0; border: 0; background: transparent; height: 100%; padding: 0 0 0 12px; font: 600 13px/1 'Inter Tight'; color: #303030; outline: 0; } .pct-step__inp:disabled { color: rgba(48,48,48,.5); } .pct-step__btns { display: flex; flex-direction: column; padding: 2px 6px 2px 0; gap: 1px; } .pct-step__btns button { width: 16px; height: 14px; border: 0; background: transparent; border-radius: 3px; color: rgba(48,48,48,.55); display: flex; align-items: center; justify-content: center; padding: 0; } .pct-step__btns button:hover:not(:disabled) { background: rgba(48,48,48,.06); color: #303030; } .pct-step__btns button:disabled { opacity: .4; cursor: not-allowed; } .halloc__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; flex-wrap: wrap; } .halloc__add { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 4px 0 2px; border: 0; background: transparent; color: rgba(48,48,48,.65); font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; border-radius: 6px; } .halloc__add:hover { background: rgba(30,80,255,.06); color: #1A4BEB; } .halloc__valid { display: inline-flex; align-items: center; gap: 5px; font: 500 12px/1 'Inter Tight'; letter-spacing: .2px; } .halloc__valid.is-ok { color: #1A8E47; } .halloc__valid.is-err { color: #C0392B; } /* Row actions */ .hrow__actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px dashed rgba(48,48,48,.1); margin-top: 4px; flex-wrap: wrap; } .hbtn-primary { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: #4974FF; color: #fff; font: 600 13px/1 'Inter Tight'; letter-spacing: .2px; box-shadow: 0 2px 6px -2px rgba(30,80,255,.4); transition: all .12s ease; } .hbtn-primary:hover:not(:disabled) { background: #3A66F2; transform: translateY(-1px); box-shadow: 0 4px 10px -2px rgba(30,80,255,.45); } .hbtn-primary.is-disabled, .hbtn-primary:disabled { background: rgba(73,116,255,.45); box-shadow: none; cursor: not-allowed; } .hbtn-ghost { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: rgba(48,48,48,.6); font: 500 13px/1 'Inter Tight'; letter-spacing: .2px; } .hbtn-ghost:hover { background: rgba(48,48,48,.06); color: #303030; } .hrow__val-foot { margin-left: auto; font: 500 13px/1 'Inter Tight'; color: rgba(48,48,48,.6); letter-spacing: .2px; } .hrow__val-foot strong { color: #303030; font-weight: 600; } /* Empty state */ .hempty { padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .hempty__t { font: 600 14px/1.2 'Inter Tight'; color: #303030; letter-spacing: -.1px; } .hempty__d { font: 400 12px/1.45 'Inter Tight'; color: rgba(48,48,48,.55); letter-spacing: .2px; margin-bottom: 10px; } .hadd-cta { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border: 0; border-radius: 8px; background: #4974FF; color: #fff; font: 600 13px/1 'Inter Tight'; letter-spacing: .2px; box-shadow: 0 2px 6px -2px rgba(30,80,255,.4); transition: all .12s ease; } .hadd-cta:hover { background: #3A66F2; transform: translateY(-1px); } .hadd-row { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 12px; border: 0; border-top: 1px solid rgba(48,48,48,.06); background: rgba(48,48,48,.015); color: #1A4BEB; font: 600 13px/1 'Inter Tight'; letter-spacing: .2px; } .hadd-row:hover { background: rgba(30,80,255,.06); } /* ===== Roth Conversions =================================================== Lives inside a GroupSwitch (.grp) in the Roth-conversions
. Reuses the warm-gray section shell; the source-account cards echo the Holdings table chrome (white card, gray header strip, add-row footer). */ .rc { display: flex; flex-direction: column; } /* Inline warning when there are no eligible source accounts. */ .rc-warn { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; border-radius: 10px; background: #FDF4F3; border: 1px solid rgba(192,57,43,.2); color: #9A3A2E; font: 500 12px/1.45 'Inter Tight'; letter-spacing: .2px; } .rc-warn svg { color: #C0392B; flex-shrink: 0; margin-top: 1px; } /* Account