/* ════════════════════════════════════════════════════════════════ CS3 Final UI — design system (single source in code) Documented in design.md; this file is the running mirror. DIRECTION v1 — "calm / frosted" (Perplexity-inspired): content-first, lots of negative space, minimal chrome; surfaces are translucent frosted glass over a soft background gradient; muted warm palette (warm off-white light / warm near-black dark); teal accent used sparingly; light-weight type. Typeface still Inter (placeholder — a distinctive face comes later). Default theme = light; .dark = dark mode. ════════════════════════════════════════════════════════════════ */ /* 1a · Colour primitives (only place hex lives) */ :root{ /* paper — light surfaces (neutral grey + white) */ --paper-0:#FFFFFF; --paper-50:#FAFAF8; --paper-100:#F5F5F3; --paper-150:#ECECE9; --paper-200:#DEDDD8; /* ink — text on light (neutral) */ --ink-950:#191917; --ink-900:#222220; --ink-700:#3E3E3B; --ink-500:#6C6C67; --ink-400:#8E8D88; --ink-300:#B4B3AE; /* coal — dark-mode surfaces (warm charcoal) */ --coal-950:#0A0B0A; --coal-900:#0E100E; --coal-850:#151713; --coal-800:#1C1E19; --coal-700:#282A24; /* chalk — warm off-white text on dark */ --chalk-50:#ECE9E0; --chalk-300:#9A968B; --chalk-500:#6E6A61; /* accent — deep pine green (used sparingly) */ --pine-700:#25312A; --pine-600:#2E3C32; --pine-500:#3B4C40; --pine-450:#516356; --pine-400:#677A6D; --pine-300:#93A99A; --pine-200:#A9BFAF; --pine-100:#BCCFC2; /* teal (on hold) */ --teal-600:#186E78; --teal-500:#20808D; --teal-400:#3AA0AD; --teal-300:#63BCC6; /* savings / positive — muted sage */ --sage-500:#4F8A6C; --sage-400:#6AA588; /* alert — muted rust */ --rust-500:#B25548; /* spacing / radius / motion primitives */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; --space-8:44px; --radius-sm:12px; --radius-md:18px; --radius-lg:26px; --radius-full:999px; /* subtle film grain for accent surfaces (inline SVG turbulence, self-contained) */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E"); --blur:28px; /* 22 → 28: softer glass over the atmospheric background */ /* Inter — same face Linear uses; the Linear look comes from the OpenType features on below. Fallback stack mirrors Linear's. */ --font-sans:'InterVariable','Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; --font-size-xs:11px; --font-size-sm:13px; --font-size-base:15px; --font-size-md:18px; --font-size-lg:20px; --font-size-xl:24px; --font-size-2xl:28px; --duration-fast:200ms; --duration-base:320ms; --easing-standard:ease; --easing-decelerate:cubic-bezier(0.16,1,0.3,1); } /* 1b · Semantic tokens — LIGHT (default) */ :root{ --bg:#FEFCF9; --elevated:var(--paper-50); --nav:#E7E7E6; /* content bg = warm off-white; nav = light neutral grey */ --glass:rgba(255,255,255,.48); --glass-strong:rgba(255,255,255,.64); /* lowered from .60/.80 so the atmosphere tints the glass */ --card:var(--glass); --surface:rgba(20,20,19,.05); --line:rgba(20,20,19,.08); --hairline:rgba(20,20,19,.07); --handle:rgba(20,20,19,.16); --btn-secondary:rgba(20,20,19,.06); --ink:var(--ink-900); --ink-2:var(--ink-500); --ink-3:var(--ink-400); --hint:var(--ink-300); --strike:var(--ink-400); --accent:#74AFD0; --accent-hover:#86BDDB; --accent-pressed:#5E9EC3; --accent-ink:#fff; /* accent as a material: top-light → deeper-bottom gradient; --grain goes over it */ --accent-grad:linear-gradient(180deg,#86BDDB,#5E9EC3); --slider:var(--accent); --positive:var(--sage-500); --red:var(--rust-500); --avatar-bg:rgba(46,60,50,.10); --avatar-ink:var(--pine-600); --overlay:rgba(20,20,19,.30); --shadow-card:0 2px 22px rgba(22,22,20,.07), 0 1px 3px rgba(22,22,20,.05); --shadow-card-hover:0 12px 36px rgba(22,22,20,.11), 0 2px 6px rgba(22,22,20,.06); --shadow-fab:0 12px 32px rgba(22,22,20,.12); /* aliases + composite tokens (theme-independent) */ --r-sm:var(--radius-sm); --r-md:var(--radius-md); --r-lg:var(--radius-lg); --r-full:var(--radius-full); --pad:var(--space-4); --gap:var(--space-6); --font:var(--font-sans); --t-h1:600 var(--font-size-lg)/1.3 var(--font); --t-h2:600 var(--font-size-md)/1.35 var(--font); --t-body:400 var(--font-size-base)/1.55 var(--font); --t-body-m:500 var(--font-size-base)/1.5 var(--font); --t-sm:400 var(--font-size-sm)/1.45 var(--font); --t-xs:500 var(--font-size-xs)/1.3 var(--font); --t-display:600 var(--font-size-2xl)/1.2 var(--font); --t-lede:400 16px/1.55 var(--font); --ease:var(--duration-fast) var(--easing-standard); --ease-out:var(--duration-base) var(--easing-decelerate); } /* 1c · Semantic tokens — DARK (.dark on ) */ .dark{ --bg:var(--coal-900); --elevated:var(--coal-800); --nav:var(--coal-950); --glass:rgba(255,255,255,.045); --glass-strong:rgba(255,255,255,.075); --card:var(--glass); --surface:rgba(255,255,255,.055); --line:rgba(255,255,255,.09); --hairline:rgba(255,255,255,.08); --handle:rgba(255,255,255,.18); --btn-secondary:rgba(255,255,255,.07); --ink:var(--chalk-50); --ink-2:var(--chalk-300); --ink-3:var(--chalk-500); --hint:#5C594F; --strike:var(--chalk-500); /* darker accent in dark mode */ --accent:#3F7093; --accent-hover:#4E84A8; --accent-pressed:#325B78; --accent-ink:#fff; --accent-grad:linear-gradient(180deg,#4C82A8,#345E7C); --slider:var(--accent); --positive:var(--sage-400); --avatar-bg:rgba(169,191,175,.14); --avatar-ink:var(--pine-200); --overlay:rgba(0,0,0,.55); --shadow-card:0 4px 30px rgba(0,0,0,.34), 0 1px 2px rgba(0,0,0,.30); --shadow-card-hover:0 16px 44px rgba(0,0,0,.46); --shadow-fab:0 14px 36px rgba(0,0,0,.5); } /* ════════════════════ Base ════════════════════ */ *{box-sizing:border-box} html,body{height:100%;margin:0} body{ background:var(--bg);color:var(--ink);font:var(--t-body);font-family:var(--font); -webkit-font-smoothing:antialiased; /* the "Linear" treatment of Inter: single-story a (cv11), tailed l (cv05), round quotes (ss03), contextual + kerning on, optical sizing for large display text */ font-optical-sizing:auto; font-feature-settings:'cv11' 1,'cv05' 1,'ss03' 1,'calt' 1,'kern' 1,'liga' 1; } /* dark keeps a whisper of neutral depth (no colour tint) */ .dark body{ background-image: radial-gradient(85% 85% at 82% -12%, rgba(255,255,255,.05), transparent 55%), radial-gradient(90% 90% at 0% 118%, rgba(255,255,255,.03), transparent 52%); } button{font-family:var(--font);cursor:pointer} .app{display:flex;position:fixed;inset:0;overflow:hidden} /* ── Full-page atmosphere: the showcase photo bleeds softly into the whole canvas; a bg-tinted veil keeps it subtle-but-present and text-safe. The .app is fixed (content scrolls inside .panel), so the blur avoids the Chromium window-scroll bug (Decision 56). Veil % is the master subtlety dial; blur px controls shape definition. */ .app::before{content:"";position:absolute;inset:-8%; background:url("images/card-bg.png") center / 100% 100% no-repeat; /* fit full height: sky at top → green grass always at the bottom (blur hides the stretch) */ filter:blur(10px) saturate(.9);z-index:0} .app::after{content:"";position:absolute;inset:0; background:color-mix(in srgb, var(--bg) 75%, transparent);z-index:0} /* white wash over the photo */ /* dark needs a much heavier veil — the photo is bright, so at 36% the page goes murky and mid-grey text drowns; ~82% keeps just a whisper of the meadow */ .dark .app::after{background:color-mix(in srgb, var(--bg) 82%, transparent)} /* dark mode uses its own night photo (silhouetted meadow + starry sky) — see card-bg-dark.png */ .dark .app::before{background:url("images/card-bg-dark.png") center / 100% 100% no-repeat} .dark .preview__box{background: radial-gradient(170% 140% at 48% 40%, transparent 58%, rgba(0,0,0,.42)), linear-gradient(180deg, rgba(8,12,20,.10), rgba(8,12,20,.42) 92%), url("images/card-bg-dark.png") center/cover no-repeat, #0C1018} .dark .solo-box{background: linear-gradient(180deg, rgba(20,28,36,.18), rgba(20,28,36,.34)), url("images/card-bg-dark.png") center/cover no-repeat, #26323C} .rail,.main{position:relative;z-index:1} /* ── App nav rail (minimal, blended chrome — frosted so the atmosphere runs behind it) ── */ .rail{width:76px;flex-shrink:0;background:color-mix(in srgb, var(--nav) 55%, transparent); backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur)); display:flex;flex-direction:column; align-items:center;padding:var(--space-5) 0;gap:var(--space-3);border-right:1px solid var(--hairline)} .rail__me{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:var(--space-5); color:var(--ink-2);font:var(--t-xs);font-size:9px} .rail__avatar{width:38px;height:38px;border-radius:var(--r-full);object-fit:cover;box-shadow:inset 0 0 0 1px var(--hairline)} .rail__item{width:52px;height:52px;border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center; justify-content:center;gap:1px;color:var(--ink-3);font:var(--t-xs);font-size:9px;font-weight:700;background:transparent;border:0;transition:color var(--ease),background var(--ease)} .rail__item:hover{color:var(--ink-2)} .rail__item.is-active{background:var(--surface);color:var(--ink)} .rail__ico{width:19px;height:19px;border-radius:8px;border:1.5px solid currentColor;opacity:.85} /* rail icons: viewBox is cropped tight so the box hugs the glyph. Inactive icons are muted to match the ink-3 labels (full black only on the active item — else they read as selected). Per-icon width tunes the two different glyph aspects to look the same size. */ .rail__img{height:auto;object-fit:contain;opacity:.42;transition:opacity var(--ease)} .rail__img[src$="shared.svg"]{width:26px} .rail__img[src$="personal.svg"]{width:17px} .rail__item:hover .rail__img{opacity:.65} .rail__item.is-active .rail__img{opacity:1} .rail__foot{margin-top:auto} .rail__gear{width:20px;height:20px} /* ── Settings popover (anchored to the rail's Settings button) ── */ .popover{position:fixed;left:84px;bottom:16px;z-index:70;min-width:190px; background:var(--glass-strong);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card-hover);padding:var(--space-4)} .popover[hidden]{display:none} .pop__lab{font:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-3)} /* ── Main column ── */ .main{flex:1;display:flex;flex-direction:column;min-width:0} .avatar{width:26px;height:26px;border-radius:var(--r-full);background:var(--avatar-bg);color:var(--avatar-ink); display:flex;align-items:center;justify-content:center;font:var(--t-xs);font-weight:600;flex-shrink:0} img.avatar{object-fit:cover;box-shadow:inset 0 0 0 1px var(--hairline)} /* photo avatars: crop to the circle, hairline ring */ .modebtn{background:var(--surface);color:var(--ink-2);border:1px solid var(--hairline);border-radius:var(--r-full); padding:6px 14px;font:var(--t-xs);transition:color var(--ease)} .modebtn:hover{color:var(--ink)} /* ── Content row: decision panel + preview ── */ .row{flex:1;display:flex;min-height:0} .panel{flex:1.3;min-width:0;overflow-y:auto;padding:var(--space-8) clamp(28px,4.5vw,72px); display:flex;flex-direction:column} .panel>*{max-width:620px;flex-shrink:0} /* calm measure: content holds a readable column, the rest stays white space */ /* the wizard nav (Back+Next) sits at the bottom so it doesn't shift between steps; a solo button (no secondary) stays close to the content above instead */ .panel>.cta-row:not(.cta-row--solo){margin-top:auto;padding-top:var(--space-7)} /* right pane = a padded stage holding a dark, floating showcase box */ .preview{flex:1;min-width:420px;max-width:560px;padding:var(--space-6);display:flex} .preview__box{position:relative;flex:1;display:flex;flex-direction:column;border-radius:30px;padding:var(--space-5);overflow:hidden; box-shadow:var(--shadow-card-hover);color:var(--ink); /* dark-green atmosphere from a background image (images/card-bg.png), with a soft vignette + top→bottom darken over it for depth, and a fallback base colour */ background: radial-gradient(170% 140% at 48% 40%, transparent 55%, rgba(0,0,0,.42)), /* gentle corner vignette */ linear-gradient(180deg, rgba(18,26,21,.10), rgba(18,26,21,.55) 92%), /* top→bottom darken for the empty lower area */ url("images/card-bg.png") center/cover no-repeat, /* the photo */ #1C241E; /* fallback base */ /* light-on-dark token context so the content reads on the box */ --ink:#F6F6F2; --ink-2:#E3E4DD; --ink-3:#C6C9BF; --line:rgba(255,255,255,.14); --hairline:rgba(255,255,255,.18); --surface:rgba(255,255,255,.12); --accent:#F6F6F2; --hint:#8F938A; --glass:rgba(255,255,255,.11); --glass-strong:rgba(255,255,255,.15)} /* faint film grain over the green */ .preview__box::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px 200px;} /* the "whole picture" as a frosted-glass panel floating on the green — reference-style: barely-there fill (the blur does the work), a crisp luminous rim brightest along the top, big radius, almost no drop shadow */ .preview__card{position:relative;z-index:1; /* white sheen for the glass rim, over a soft dark tint that grounds the text so it stays legible no matter how bright the photo variant behind the glass is */ background:linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.06)), linear-gradient(180deg, rgba(15,23,17,.30), rgba(15,23,17,.46)); backdrop-filter:blur(52px) saturate(1.4);-webkit-backdrop-filter:blur(52px) saturate(1.4); border:0;border-radius:34px;padding:var(--space-6);color:var(--ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), /* even 1px rim */ inset 0 1.5px 0 rgba(255,255,255,.32), /* brighter top edge highlight */ 0 6px 22px rgba(0,0,0,.12)} /* very soft lift */ /* ── Typography helpers ── */ .eyebrow{font:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--space-3)} h1.title{font:var(--t-display);letter-spacing:-.02em;margin:0 0 var(--space-4)} .lede{font:var(--t-lede);color:var(--ink-2);margin:0 0 var(--space-7);max-width:60ch} .lab{font:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:var(--space-6) 0 var(--space-3)} /* ── Buttons ── */ .btn{appearance:none;border:0;border-radius:16px;padding:13px 38px;font:var(--t-body-m); background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-card); transition:transform var(--ease),filter var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease)} /* primary (the accent-gradient fill overrides background-color, so states use brightness/lift/press) */ .btn:not(.btn--secondary):not(.btn--ghost):hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:var(--shadow-card-hover)} .btn:not(.btn--secondary):not(.btn--ghost):active{transform:translateY(0) scale(.98);filter:brightness(.93);box-shadow:var(--shadow-card)} .btn[disabled]{background:var(--surface);color:var(--ink-3);box-shadow:none;filter:none;transform:none;cursor:not-allowed} .btn--ghost{background:transparent;color:var(--ink-2);padding:13px 10px;box-shadow:none} .btn--ghost:hover{color:var(--ink);transform:none} .cta-row{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-7)} .spacer{display:none} /* was flex:1 (pushed buttons apart); now the button group centres */ /* ── Segmented control (calm elevated chip, not coloured) ── */ /* concentric rounding: inner radius (12) = outer radius (16) − padding gap (4) — kept under half the button height so ends stay flat, not pill */ .seg{display:inline-flex;background:var(--surface);border-radius:16px;padding:4px;gap:4px; box-shadow:0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)} .seg__opt{border:0;background:transparent;color:var(--ink-2);padding:6px 34px;border-radius:12px;font:var(--t-sm);font-weight:500;transition:color var(--ease);display:inline-flex;align-items:center;justify-content:center} .seg__opt svg{width:19px;height:19px;display:block} .seg__opt.is-active{background:var(--accent);color:var(--accent-ink); box-shadow:0 2px 6px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.12)} /* ── Cards / rows (frosted glass, floating) ── */ .card{background:var(--glass);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--space-5);box-shadow:var(--shadow-card)} .opt-card{display:flex;gap:var(--space-4);align-items:flex-start;background:var(--glass); backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--space-5);margin-bottom:var(--space-3);box-shadow:var(--shadow-card)} .opt-card__body{flex:1;min-width:0} .opt-card__t{font:var(--t-body-m);margin:0} .opt-card__d{font:var(--t-sm);color:var(--ink-2);margin:4px 0 0} .amt{font:var(--t-body-m);font-variant-numeric:tabular-nums;white-space:nowrap} /* selectable option card (pillar picker) + check circle */ .opt-card--select{cursor:pointer;transition:border-color var(--ease),background var(--ease)} /* unchecked reads a touch darker/recessed; selecting it brightens back to full glass */ .opt-card--select:not(.is-on){background:linear-gradient(rgba(20,20,19,.05),rgba(20,20,19,.05)),var(--glass)} .opt-card--select:hover{border-color:var(--line)} .opt-card--select.is-on{border-color:var(--handle)} /* trailing category glyph on a pillar card */ .opt-card__icon{flex-shrink:0;align-self:center;display:flex;color:var(--ink-3)} .opt-card__icon svg{width:26px;height:26px} /* orientation step card (what's-coming): non-interactive preview of an upcoming step, icon on the left */ .opt-card--step{align-items:center} /* base savings account card: plain/calm (goal cards are the colourful ones) */ .acct{display:flex;align-items:center;gap:var(--space-4);background:var(--glass-strong);border:1px solid var(--hairline); border-radius:var(--r-lg);padding:var(--space-5);box-shadow:var(--shadow-card);margin-bottom:var(--space-4)} .acct__ic{flex-shrink:0;width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center; background:var(--surface);color:var(--accent-pressed)} .check{width:26px;height:26px;border-radius:var(--r-full);border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;transition:background var(--ease),border-color var(--ease)} .check svg{width:14px;height:14px;opacity:0;transition:opacity var(--ease)} .check.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .check.is-on svg{opacity:1} /* gateway tick badge + quiet inline note */ .tickbig{width:48px;height:48px;border-radius:var(--r-full);background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5)} .tickbig svg{width:22px;height:22px} .note{font:var(--t-sm);color:var(--ink-2);margin-top:var(--space-4)} /* ── List rows (bills, review) ── */ .row-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:1px solid var(--hairline)} .row-item:last-child{border-bottom:0} /* whole-row click target (bills) — subtle hover, rounded so it reads as one hit area */ .row-item--click{cursor:pointer;border-radius:12px;transition:background var(--ease)} .row-item--click:hover{background:var(--surface)} /* bleed the clickable rows past the .focus card padding so the hover fill reaches the card edges (square, not rounded) */ .focus .row-item--click{margin-inline:calc(-1 * var(--space-6));padding-inline:var(--space-6);border-radius:0} /* unticked bill rows read muted — logo dimmed, name softened to ink-2 */ .row-item--off .bill-logo{opacity:.5;transition:opacity var(--ease)} .row-item--off .row-item__t{color:var(--ink-2);transition:color var(--ease)} .row-item__main{flex:1;min-width:0} .row-item__t{font:600 16px/1.35 var(--font);letter-spacing:-.005em} .row-item__d{font:var(--t-sm);color:var(--ink-2)} .recap{display:flex;gap:var(--space-4)} /* rounded-square provider thumbnail on a bill row (fallback: lettered tile until an image exists) */ .bill-logo{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0; background:#fff;box-shadow:inset 0 0 0 1px var(--hairline); filter:brightness(.95) saturate(.85)} /* tone the vivid brand colours down a touch, even when checked */ .bill-logo--fb{display:flex;align-items:center;justify-content:center;background:var(--surface); color:var(--ink-2);font:var(--t-sm);font-weight:600} /* bills rows: dial the check, logo and title down a notch — less bold/cartoonie */ .focus .row-item--click .check{width:22px;height:22px;border-width:1.25px} .focus .row-item--click .check svg{width:12px;height:12px} .focus .row-item--click .bill-logo{width:32px;height:32px;border-radius:8px} .focus .row-item--click .row-item__t{font:500 15px/1.35 var(--font);letter-spacing:0} .focus .row-item--click .row-item__d{font:var(--t-xs);color:var(--ink-3)} .result{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);border:1px solid var(--hairline); border-radius:var(--r-md);padding:var(--space-4);margin-top:var(--space-4)} /* ── Switch (auto-pay) ── */ /* fixed-width right-aligned slot so every row's switch lines up regardless of tag width */ .bill-pay{width:104px;display:flex;justify-content:flex-end;flex-shrink:0;margin-right:8px} .switch{width:42px;height:24px;border-radius:var(--r-full);background:var(--handle);position:relative;flex-shrink:0;border:0;transition:background var(--ease)} .switch.is-on{background:var(--accent)} .switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:var(--ease-out)} .switch.is-on::after{transform:translateX(18px)} /* ── Chips ── */ .chips{display:flex;flex-wrap:wrap;gap:var(--space-3)} .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-full); padding:8px 16px;font:var(--t-sm);font-weight:500;transition:border-color var(--ease)} .chip:hover{border-color:var(--accent)} .chip--ghost{background:transparent;color:var(--ink-2);border-style:dashed} /* ── Fields / inputs ── */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)} .field>span{font:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px; color:var(--ink);font:var(--t-body);outline:0;transition:border-color var(--ease)} .input:focus,.input:focus-within{border-color:var(--accent)} /* outline secondary — border-defined, no accent fill (like the reference "Compare plans") */ .btn--secondary{background:transparent;color:var(--ink);border:1px solid var(--handle);box-shadow:none} .btn--secondary:hover{background:var(--surface);border-color:var(--ink-3)} .btn--secondary:active{background:var(--handle);border-color:var(--ink-3);transform:scale(.98)} .linkish{background:none;border:0;color:var(--ink);font:var(--t-sm);font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--handle)} .linkish:hover{text-decoration-color:var(--ink)} /* ── Spending pots ── */ .pot-name{font:var(--t-body-m);color:var(--ink);background:transparent;border:0;border-bottom:1px dashed transparent;padding:1px 2px;width:100%;max-width:240px;outline:0} .pot-name:hover{border-bottom-color:var(--handle)} .pot-name:focus{border-bottom-color:var(--accent)} .pot-name::placeholder{color:var(--ink-3)} .pot-desc{width:100%;margin-top:12px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:8px 11px;color:var(--ink-2);font:var(--t-sm);outline:0} .pot-desc:focus{border-color:var(--accent);color:var(--ink)} .pot-desc::placeholder{color:var(--ink-3)} .pot-del{flex-shrink:0;width:30px;height:30px;border:0;background:transparent;color:var(--ink-3);font-size:20px;line-height:1;border-radius:var(--r-sm);transition:color var(--ease)} .pot-del:hover{color:var(--red);background:var(--surface)} .pot-hint{font:var(--t-xs);color:var(--red);margin-top:9px;display:flex;align-items:center;gap:5px} /* ── Big slider (goal modal) ── */ input[type=range].slider-lg{height:14px} input[type=range].slider-lg::-webkit-slider-thumb{width:34px;height:34px;border-width:4px} input[type=range].slider-lg::-moz-range-thumb{width:34px;height:34px;border-width:4px} input[type=range].slider-lg::-moz-range-track{height:14px} input[type=range].slider-lg::-moz-range-progress{height:14px} /* ── Interest breakdown table ── */ .brk{width:100%;border-collapse:collapse;margin-top:var(--space-2)} .brk th{text-align:right;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10px;padding:6px 8px;border-bottom:1px solid var(--line)} .brk th:first-child,.brk td:first-child{text-align:left} .brk td{text-align:right;padding:6px 8px;color:var(--ink-2);border-bottom:1px solid var(--hairline);font:var(--t-sm);font-variant-numeric:tabular-nums} .brk__int{color:var(--positive)} .brk__sum{margin-top:var(--space-2);font:var(--t-sm);color:var(--ink-2)} /* ── Modal (goal creation) ── */ .overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center; z-index:80;animation:fade .18s ease} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--shadow-card-hover); width:min(880px,92vw);max-height:88vh;display:flex;overflow:hidden;animation:rise .22s var(--ease-out, ease)} @keyframes rise{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} .modal__card{flex:1.1;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);border-right:1px solid var(--hairline)} .modal__rail{flex:1;padding:var(--space-6);overflow-y:auto;display:flex;flex-direction:column} .goalcard{border-radius:var(--r-lg);padding:var(--space-5);min-height:200px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden} .goalcard__top,.goalcard__bot{position:relative;z-index:1} .swatches{display:flex;gap:var(--space-2)} .swatch{width:30px;height:30px;border-radius:var(--r-full);border:2px solid transparent;cursor:pointer; transition:transform var(--ease),box-shadow var(--ease)} .swatch:hover{transform:scale(1.12)} .swatch:active{transform:scale(.94)} /* selected ring is set inline per-colour in syncPreview so the ring matches the swatch */ /* photo background choices for a goal card */ .imgswatches{display:flex;gap:var(--space-2);flex-wrap:wrap} .imgswatch{width:46px;height:34px;border-radius:8px;border:2px solid transparent;background-size:cover;background-position:center; box-shadow:inset 0 0 0 1px var(--hairline);cursor:pointer;transition:transform var(--ease),box-shadow var(--ease)} .imgswatch:hover{transform:scale(1.07)} .imgswatch:active{transform:scale(.97)} .imgswatch.is-on{box-shadow:0 0 0 2px var(--elevated),0 0 0 4px var(--accent)} /* clickable goal card (whole card edits; trash sits top-right) */ .goalrow{transition:transform var(--ease),box-shadow var(--ease)} .goalrow:hover{transform:translateY(-1px);box-shadow:var(--shadow-card-hover)} .goalrow__del{opacity:.8;transition:opacity var(--ease),background var(--ease)} .goalrow__del:hover{opacity:1;background:rgba(255,255,255,.16)} /* ── Onboarding overlay: three-card "what's coming" walkthrough shown over the Bills step ── */ .onb-overlay{padding:var(--space-5);background:rgba(15,17,15,.5)} /* darker veil so the card pops */ .onb-card{position:relative;background:var(--elevated);border:1px solid var(--hairline); border-radius:var(--r-lg);box-shadow:var(--shadow-card-hover); width:min(492px,94vw);max-height:92vh;overflow:hidden;display:flex;flex-direction:column; animation:rise .24s var(--ease-out,ease)} .onb-skip{position:absolute;top:12px;right:12px;z-index:2;background:transparent;border:0;cursor:pointer; font:var(--t-sm);color:var(--ink-3);padding:6px 11px;border-radius:var(--r-sm); transition:color var(--ease),background var(--ease)} .onb-skip:hover{color:var(--ink-2);background:var(--surface)} html.locked .onb-skip{display:none} /* case-study embeds pin the intro — no skip/leave */ /* hero: a cropped peek at the step's REAL components, pinned to the top of the frame */ .onb-hero{position:relative;height:228px;display:flex;align-items:flex-start;justify-content:center;overflow:hidden; padding-top:22px;border-bottom:1px solid var(--hairline); background:radial-gradient(130% 120% at 50% -10%,color-mix(in srgb,var(--accent) 15%,var(--surface)),var(--surface))} .onb-hero>*,.onb-body>*{animation:onbIn .42s var(--ease-out,ease) both} @keyframes onbIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} .onb-body{padding:var(--space-6) var(--space-6) var(--space-5)} .onb-title{font:var(--t-h2);font-size:22px;color:var(--ink);margin:var(--space-3) 0 var(--space-3)} .onb-lead{font:var(--t-body);color:var(--ink-2);margin:0} .onb-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3); padding:var(--space-4) var(--space-5);border-top:1px solid var(--hairline)} .onb-pager{display:flex;align-items:center;gap:var(--space-2)} .onb-count{font:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:30px;text-align:center} .onb-chev{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-full); border:1px solid var(--hairline);background:var(--elevated);color:var(--ink-2);cursor:pointer; transition:color var(--ease),border-color var(--ease),transform var(--ease)} .onb-chev:hover:not(:disabled){color:var(--ink);border-color:color-mix(in srgb,var(--accent) 42%,var(--hairline))} .onb-chev:active:not(:disabled){transform:scale(.9)} .onb-chev:disabled{opacity:.3;cursor:default} .onb-next{padding:11px 20px} .onb-go{padding:11px 22px} /* hero peek — real components sized to the frame; overflow is cropped by .onb-hero */ .onb-peek{width:300px;max-width:88%} /* bills: real .row-item rows inside a .focus card, zoomed out so more of the list shows. scale lives on .focus (not the animated .onb-peek child) so it doesn't fight onbIn's transform */ /* wide base + a smaller scale => a wider card zoomed further out (more rows visible) */ .onb-peek--bills{width:600px;max-width:none;flex-shrink:0} .onb-peek--bills .focus{width:100%;margin:0;padding:2px var(--space-6);transform:scale(.69);transform-origin:top center} .onb-peek--bills .row-item{padding:13px 0} /* spending: the real wallet, cropped at the bottom */ .onb-peek--wallet{width:260px} .onb-peek--wallet .wallet{margin-top:0} /* savings: real goal cards, second one cropped at the bottom */ .onb-peek--save{width:346px;display:flex;flex-direction:column;gap:var(--space-3)} .onb-goalcard{margin:0;border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);overflow:hidden;min-height:0;box-shadow:var(--shadow-card)} /* ── Wallet: a black-leather holder; named cards tuck into a notched front pocket ── */ .wallet{position:relative;width:100%;margin-top:var(--space-3);border-radius:20px;overflow:hidden; height:max(226px, calc((var(--n) - 1) * 30px + 166px)); background:var(--grain), linear-gradient(160deg,#24323B,#0E161B); background-size:160px 160px,auto;background-blend-mode:overlay,normal; box-shadow:0 14px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.06)} .wallet__card{position:absolute;left:12px;right:12px;top:calc(12px + var(--i) * 30px);height:150px; border-radius:12px;color:#fff;z-index:calc(var(--i) + 1); box-shadow:0 -1px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.05)} .wallet__row{display:flex;align-items:center;justify-content:space-between;padding:11px 16px} .wallet__num{font:600 12px/1 var(--font);letter-spacing:.05em;color:rgba(255,255,255,.78); font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgba(0,0,0,.28)} .wallet__name{font:700 14px/1 var(--font);letter-spacing:.01em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.32)} /* front pocket — same black leather, scooped notch so the front card peeks through the middle */ .wallet__pocket{position:absolute;left:0;right:0;bottom:0;height:116px;z-index:60;border-radius:20px; background:var(--grain), linear-gradient(165deg,#1D2930,#080D10); background-size:160px 160px,auto;background-blend-mode:overlay,normal; box-shadow:0 -8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px; -webkit-mask:radial-gradient(110px 26px at 50% 0, transparent 99%, #000 100%); mask:radial-gradient(110px 26px at 50% 0, transparent 99%, #000 100%)} .wallet__lbl{font:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5)} .wallet__amt{font:700 22px/1 var(--font);color:#fff;font-variant-numeric:tabular-nums;margin-top:5px} /* ── Preview extras (wizard whole-picture) ── */ .bar__seg--bills{background:var(--ink-3)} .bar__seg--spend{background:var(--hint)} .bar__seg--save{background:var(--positive)} .bar--tall{height:22px} .bar--tall .bar__seg{display:flex;align-items:center;justify-content:center;font:700 10px/1 var(--font);letter-spacing:.02em} .submod{background:var(--surface);border-radius:var(--r-md);padding:var(--space-4);margin-top:var(--space-4)} .submod .wp-row{padding:9px 0} .wp-row--click{margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:var(--r-sm);transition:background var(--ease)} .wp-row--click:hover{background:var(--surface)} .center{text-align:center} /* accent material: gradient fill + grainy texture on every accent-filled surface (slider thumb carries it in its own rules) */ .btn:not(.btn--ghost):not(.btn--secondary):not([disabled]), .seg__opt.is-active, .tickbig, .check.is-on, .slider__bubble{ background-image:var(--grain),var(--accent-grad); background-size:160px 160px,auto; background-blend-mode:overlay,normal} .bignum{font:600 32px/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .tag{display:inline-flex;align-items:center;gap:4px;font:var(--t-xs);background:var(--surface);color:var(--ink-2); border-radius:var(--r-full);padding:4px 11px} .tag--accent{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)} .tag--success{background:color-mix(in srgb,var(--positive) 16%,transparent);color:var(--positive)} /* confirmed / done */ .tag svg{width:13px;height:13px} /* icon-only tag (e.g. the confirmation tick) sits in a circle, not a pill — vertically centred in its row card */ .tag:has(> svg:only-child){width:34px;height:34px;padding:0;justify-content:center;align-self:center;flex-shrink:0} .tag:has(> svg:only-child) svg{width:16px;height:16px} /* ── Focus panel (the primary decision surface — a touch more solid) ── */ .focus{background:var(--glass-strong);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--space-4) var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-card)} /* ── Amount input + slider ── */ .amount-input{display:inline-flex;align-items:baseline;gap:6px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-md);padding:10px 16px;transition:border-color var(--ease)} .amount-input:focus-within{border-color:var(--accent)} .amount-input input{border:0;background:transparent;color:var(--ink);font:600 30px/1.1 var(--font);font-variant-numeric:tabular-nums;width:130px;outline:0;padding:0} .amount-input__cur{font:500 20px/1 var(--font);color:var(--ink-2)} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-full);background:var(--surface);outline:0;cursor:grab;touch-action:none;margin:0} input[type=range]:active{cursor:grabbing} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%; background-image:var(--grain),var(--accent-grad);background-size:160px 160px,auto;background-blend-mode:overlay,normal; border:3px solid var(--elevated);box-shadow:var(--shadow-card);cursor:grab} input[type=range]::-moz-range-thumb{width:24px;height:24px;border:3px solid var(--elevated);border-radius:50%; background-image:var(--grain),var(--accent-grad);background-size:160px 160px,auto;background-blend-mode:overlay,normal; box-shadow:var(--shadow-card);cursor:grab} input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-full);background:var(--surface)} input[type=range]::-moz-range-progress{height:6px;border-radius:var(--r-full);background:var(--slider)} .slider{position:relative;margin-top:var(--space-6);padding-top:34px} .slider__bubble{position:absolute;top:0;transform:translateX(-50%);background:var(--slider);color:var(--accent-ink);font-family:var(--font);font-size:var(--font-size-sm);font-weight:600;padding:4px 10px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-card)} .slider__bubble::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--slider)} /* ── savings "satisfying-to-save" bar: fill deepens→brightens→turns gold, glows and sparkles as savings climbs ── */ /* --gold ramps in over the top half of the range so the reward shifts blue → gold the further you save. Currently OFF (held at 0%) — restore the clamp below to bring the gold back: --gold:clamp(0%,calc((var(--f) - .5) * 200%),100%); */ /* --g is the effect intensity: a STEEP ramp of --f so glow/sparkle peak early and hit hard */ .savebar{--p:0;--f:0;--gold:0%;--g:clamp(0,calc(var(--f) * 2.6),1);position:relative;height:24px} .savebar__track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:var(--r-full);background:var(--surface)} .savebar__fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;width:calc(var(--p) * 1%);border-radius:var(--r-full);z-index:1; --brt:color-mix(in srgb,#C4EFFF calc(var(--g) * 100%),#4C8CBE); background:linear-gradient(90deg,#2E5A82 0%,color-mix(in srgb,#FFC766 var(--gold),var(--brt)) 100%); box-shadow:0 0 calc(10px + var(--g) * 52px) color-mix(in srgb,#FFC24A var(--gold),rgba(130,215,255,calc(.34 + var(--g) * .60))), 0 0 calc(3px + var(--g) * 22px) color-mix(in srgb,#FFE7A8 var(--gold),rgba(215,246,255,calc(.28 + var(--g) * .72))); transition:box-shadow .14s ease-out} /* glowing orb — anchored to the thumb's centre and sitting BEHIND it, so the thumb looks lit */ .savebar__orb{position:absolute;top:50%;left:calc(12px + (var(--p) / 100) * (100% - 24px));transform:translate(-50%,-50%); width:calc(14px + var(--g) * 26px);height:calc(14px + var(--g) * 26px);border-radius:50%;filter:blur(1px);z-index:2;pointer-events:none; opacity:calc(.4 + var(--g) * .6); background:radial-gradient(circle,rgba(224,249,255,1) 0%,rgba(150,220,255,.6) 45%,transparent 72%); animation:orbpulse 1.2s ease-in-out infinite} @keyframes orbpulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.22)}} /* sparkles ride the filled area — on early, but a touch softer */ .savebar__spark{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 1%);overflow:hidden;z-index:2;pointer-events:none; opacity:clamp(0,calc(var(--f) * 3.4),1)} .savebar__spark i{position:absolute;width:3px;height:3px;border-radius:50%; background:color-mix(in srgb,#FFDE86 var(--gold),#f0faff); box-shadow:0 0 5px 1px color-mix(in srgb,rgba(255,206,110,.9) var(--gold),rgba(198,238,255,.85)); animation:sparkle 1.3s ease-in-out infinite} @keyframes sparkle{0%,100%{opacity:.12;transform:scale(.4)}50%{opacity:.85;transform:scale(1.25)}} /* the real input sits on top: transparent track, its thumb stays draggable/visible */ input[type=range].savebar__input{position:absolute;inset:0;width:100%;height:100%;background:transparent;margin:0;z-index:3} input[type=range].savebar__input::-webkit-slider-runnable-track{background:transparent} input[type=range].savebar__input::-moz-range-track{background:transparent} input[type=range].savebar__input::-moz-range-progress{background:transparent} @media (prefers-reduced-motion:reduce){.savebar__spark i,.savebar__orb{animation:none}} .slider__ends{display:flex;justify-content:space-between;margin-top:12px} .slider__end{display:flex;flex-direction:column;gap:5px;font:var(--t-xs);color:var(--ink-3)} .slider__end:last-child{align-items:flex-end;text-align:right} .slider__end i{width:2px;height:8px;background:var(--handle);border-radius:2px} /* ── Right-panel "whole picture" ── */ .wp__eyebrow{font:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--space-3)} .wp__total{font:600 30px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .wp__sub{font:var(--t-sm);color:var(--ink-2);margin-top:6px} .bar{display:flex;height:12px;border-radius:var(--r-full);overflow:hidden;background:var(--surface);margin:var(--space-6) 0 var(--space-5);gap:3px} .bar__seg{height:100%;border-radius:var(--r-full)} .bar__seg--you{background:var(--accent)} .bar__seg--alex{background:var(--hint)} .wp-row{display:flex;align-items:center;gap:var(--space-3);padding:12px 0;border-bottom:1px solid var(--hairline)} .wp-row:last-child{border-bottom:0} .dot{width:9px;height:9px;border-radius:var(--r-full);flex-shrink:0} .dot--spend{background:var(--hint)}.dot--save{background:var(--positive)} .dot--bills{background:var(--ink-3)} .dot--ghost{background:transparent;border:1.5px dashed var(--line)} .dot--you{background:var(--accent)}.dot--alex{background:var(--hint)} .wp-row__t{flex:1;font:var(--t-sm)} /* pillar-row states in the shared-pot card (muted = not reached, active = the step you're on) */ .wp-row--muted{opacity:.5} /* active (current) row: no fill, just brighter/bolder text — a subtle "you are here" */ .wp-row--active .wp-row__t{font-weight:600} .preview__box .wp-row--active .wp-row__t,.preview__box .wp-row--active .amt{color:#fff} .wp-amt--todo{color:var(--ink-3)} .wp-row__t small{display:block;color:var(--ink-3);font-size:11px;margin-top:1px} .wp-cap{font:var(--t-xs);color:var(--ink-3);margin-top:var(--space-5);line-height:1.6} /* ── Toast (transient confirmation) ── */ .toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none; background:var(--glass-strong);backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3); border:1px solid var(--hairline);box-shadow:var(--shadow-card-hover);border-radius:var(--r-full); padding:11px 20px;font:var(--t-sm);color:var(--ink);display:flex;align-items:center;gap:8px;transition:var(--ease-out);z-index:60} .toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)} .toast svg{width:15px;height:15px} /* ── Spending screen: savings-first "divide the pot" split (Decisions 66–71) ── */ .app{--save-blue:#2E9BE6} /* savings reads sky-blue on this flow (both themes) */ .split{--f:0;background:var(--glass-strong);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:var(--space-4) var(--space-5);margin-bottom:var(--space-5);box-shadow:var(--shadow-card); backdrop-filter:blur(var(--blur)) saturate(1.3);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.3)} .split__ends{display:flex;justify-content:space-between;align-items:flex-end} .split__end{display:flex;flex-direction:column;gap:2px} .split__end--r{text-align:right} .split__lab{font:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700} .split__amt{font:700 clamp(23px,2.8vw,27px)/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .split__amt.is-save{color:var(--accent)} .splitbar-wrap{position:relative;padding-top:30px} .splitbar{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--r-full);outline:0; cursor:grab;touch-action:none;margin:0;border:1px solid var(--hairline); box-shadow:0 0 calc(4px + var(--f) * 30px) rgba(90,195,255,calc(.06 + var(--f) * .65));transition:box-shadow .2s ease} .splitbar:active{cursor:grabbing} .splitbar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%; background-image:var(--grain),var(--accent-grad);background-size:160px 160px,auto;background-blend-mode:overlay,normal; border:3px solid var(--elevated);box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 calc(4px + var(--f) * 22px) rgba(90,195,255,calc(.1 + var(--f) * .95));cursor:grab} .splitbar::-moz-range-thumb{width:26px;height:26px;border-radius:50%; background-image:var(--grain),var(--accent-grad);background-size:160px 160px,auto;background-blend-mode:overlay,normal; border:3px solid var(--elevated);box-shadow:0 2px 8px rgba(0,0,0,.22),0 0 calc(4px + var(--f) * 22px) rgba(90,195,255,calc(.1 + var(--f) * .95));cursor:grab} .split__bubble{position:absolute;top:2px;left:calc(13px + var(--f) * (100% - 26px));transform:translateX(-50%); background:var(--accent);color:var(--accent-ink);font:700 12px/1 var(--font);font-variant-numeric:tabular-nums; padding:6px 10px;border-radius:var(--r-sm);box-shadow:var(--shadow-card);pointer-events:none;white-space:nowrap;transition:left .05s linear} .split__bubble::after{content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%); border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--accent)} /* "left to put on a card" meter */ .spend-head{margin-bottom:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--hairline)} .spend-head__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3)} .spend-head__lab{font:var(--t-sm);color:var(--ink-2);font-weight:600} .spend-head__amt{font:700 22px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em} .spend-head__amt.is-zero{color:var(--ink-3)} .spend-head__bar{height:6px;border-radius:var(--r-full);background:var(--surface);margin-top:10px;overflow:hidden} .spend-head__fill{height:100%;border-radius:var(--r-full);background:var(--ink-3);transition:width .18s ease} .spend-head__sub{font:var(--t-xs);color:var(--ink-3);margin-top:6px} /* "the rest" quick-fill — shows while a card input is focused and money is left */ .rest-btn{display:none;border:0;background:var(--surface);color:var(--ink);font:600 12px/1 var(--font); padding:8px 11px;border-radius:var(--r-full);cursor:pointer;white-space:nowrap} .rest-btn:hover{background:var(--line)} .pot-line:focus-within .rest-btn:not(.is-empty){display:inline-flex} /* savings reads blue in the right-pane summary + a highlighted savings row on the spending step */ .preview__box .dot--save{background:var(--save-blue)} .preview__box .wp-row--hero{background:color-mix(in srgb,var(--save-blue) 22%,transparent); margin:0 calc(-1 * var(--space-4));padding-left:var(--space-4);padding-right:var(--space-4);border-radius:var(--r-sm);border-bottom:0} .preview__box .wp-row--hero .wp-row__t{font-weight:700} /* ── Contribution screen (single column; right pane deferred — Decisions 72/73) ── */ .solo{flex:1;min-width:0;overflow-y:auto;padding:var(--space-8) clamp(24px,5vw,72px)} .solo__col{max-width:600px;margin:0 auto} .solo .focus{box-shadow:var(--shadow-card-hover);border:1px solid color-mix(in srgb,var(--accent) 34%,var(--hairline))} .mc-lab{font:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700} .th__row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)} .th__num{font:700 30px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:6px} .th-divider{height:1px;background:var(--hairline);margin:var(--space-5) 0} /* info icon — privacy moved off-screen to a hover (F1) */ .info{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:5px;color:var(--ink-3);cursor:help;vertical-align:-2px;outline:0} .info:hover,.info:focus-visible{color:var(--ink)} .info svg{width:15px;height:15px} .info__pop{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:240px;background:#1C241E;color:#F6F6F2;font:var(--t-sm);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.45;padding:10px 13px;border-radius:var(--r-sm);box-shadow:var(--shadow-card-hover);text-align:left;opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;z-index:20} .info__pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1C241E} .info:hover .info__pop,.info:focus-visible .info__pop{opacity:1;visibility:visible} /* shared-pot showcase card — same photo box + frosted card it becomes on the right pane later */ .solo-box{flex:none;border-radius:var(--r-lg);padding:var(--space-3);margin-bottom:var(--space-4); background:linear-gradient(180deg,rgba(96,120,130,.16),rgba(78,102,110,.28)),url("images/card-bg.png") center/cover no-repeat,#90A6AD} .solo-box .preview__card{padding:var(--space-4) var(--space-5);position:relative; background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.14)),linear-gradient(180deg,rgba(34,52,58,.08),rgba(34,52,58,.18))} .solo-box .wp__eyebrow{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(28,42,48,.25)} .solo-box .wp__total{font-size:24px;margin-top:2px} .pot-line{font:var(--t-sm);color:var(--ink-2);margin-top:var(--space-3)} .pot-avs{position:absolute;top:var(--space-4);right:var(--space-5);display:flex;align-items:center} .pot-av{width:32px;height:32px;border-radius:var(--r-full);object-fit:cover;border:2px solid rgba(255,255,255,.4)} .pot-avs > :first-child{margin-right:-10px} .pot-av-wrap{position:relative;display:flex} .pot-tick{position:absolute;right:-2px;bottom:-2px;width:15px;height:15px;border-radius:var(--r-full);background:var(--positive);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.5)} .pot-tick--l{right:auto;left:-2px} /* tick on the outer corner so an overlapped avatar's tick stays visible */ .pot-tick svg{width:8px;height:8px} /* ── Entrance motion (runs once on navigation via .is-enter — Decision 75) ── */ @keyframes settleIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes expandDown{from{max-height:0;opacity:0}to{max-height:260px;opacity:1}} /* left column settles in as a few grouped beats (not one item at a time) */ .panel.is-enter > *,.solo__col.is-enter > *{animation:settleIn .72s cubic-bezier(.16,1,.3,1) both} .panel.is-enter > :nth-child(-n+3),.solo__col.is-enter > :nth-child(-n+3){animation-delay:0s} /* header block together */ .panel.is-enter > :nth-child(n+4),.solo__col.is-enter > :nth-child(n+4){animation-delay:.16s} /* the cards together */ .panel.is-enter > :last-child,.solo__col.is-enter > :last-child{animation-delay:.3s} /* the CTA last */ /* right pane: the pot card fades in, then grows from the small card into the full one */ .preview.is-enter .preview__card{animation:settleIn 1.35s cubic-bezier(.16,1,.3,1) both;animation-delay:.15s} .preview.is-enter .wp-expand{overflow:hidden;animation:expandDown 1.5s cubic-bezier(.16,1,.3,1) both;animation-delay:.8s} /* ── Locked / showcase mode (?nav=off) ── Used by the case-study embeds: the screen stays scrollable and interactive, but the flow-nav buttons (Back / Next / Skip / Save & send) are inert so a reader can't navigate away from the screen the case study is describing. */ html.locked #contentRow .cta-row{pointer-events:none}