:root{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#102b35;background:#edf2f4;font-synthesis:none;font-size:16px;--ink:#102b35;--green:#145e55;--line:#d9e2e6}*{box-sizing:border-box}body{margin:0}header{max-width:640px;margin:auto;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:24px 20px 18px;padding-top:max(24px,env(safe-area-inset-top))}.brand{font-weight:750;font-size:1.05rem;display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}.brandmark{background:var(--ink);color:#c0f2d3;font-size:1.1rem;border-radius:12px;padding:8px 12px}#month-label{font-size:.875rem;color:#50616a;text-align:right}main{max-width:600px;margin:auto;padding:0 20px 115px}.card{background:white;border:1px solid var(--line);border-radius:22px;padding:22px;margin-bottom:16px}.hero{background:var(--ink);color:white;border:0;padding:28px 24px}.hero small{color:#c1d6dc}.hero .amount{color:#baf5d1;font-size:clamp(2.3rem,11vw,4.1rem);font-weight:650;letter-spacing:-.04em;margin:12px 0}.hero p{color:#d7e4e7}.eyebrow{font-size:.875rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600}h1{font-size:1.65rem;letter-spacing:-.035em;margin:12px 0 20px}h2{font-size:1.12rem;margin:0 0 14px}h3{font-size:1rem;margin:0 0 6px}p{line-height:1.5;margin:8px 0 16px}.muted,small{color:#546973;font-size:.875rem;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer;border:0;border-radius:13px;padding:13px 18px;font-weight:650;min-height:46px;background:var(--green);color:white}button:disabled{opacity:.5;cursor:default}button.secondary{color:var(--ink);background:#e9f0f3}button.danger{background:#a83228;color:white}button.link{background:none;color:var(--green);padding:8px 0;text-align:left}button.full{width:100%}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #438ab4;outline-offset:3px}label{display:block;font-weight:600;font-size:.9375rem;margin:18px 0 8px}input:not([type=checkbox]),select{width:100%;padding:14px 13px;border:1px solid #afc0c9;border-radius:12px;min-height:48px;background:white;color:var(--ink)}input[type=checkbox]{width:22px;height:22px;accent-color:var(--green);flex-shrink:0}form .full{margin-top:22px}.row{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.row:last-child{border:0}.row strong{font-variant-numeric:tabular-nums}.row .description{min-width:0;overflow-wrap:anywhere}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.actions button{padding:10px 12px;font-size:.875rem}.badge{font-size:.875rem;color:var(--green);font-weight:650}.warning{border:1px solid #e4af74;background:#fff4e4;color:#663b17;border-radius:16px;padding:16px;margin-bottom:16px}.warning p:last-child{margin-bottom:0}.critical{background:#fff0ed;border-color:#e6a89d;color:#8b3022}.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.split .card{padding:18px}.split strong{display:block;font-size:1.3rem;margin-top:8px;overflow-wrap:anywhere}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}.chips button{background:#e5edf0;color:var(--ink);padding:10px 13px}.chips button[aria-pressed=true]{background:var(--green);color:white}nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:4px;background:#ffffffed;border-top:1px solid var(--line);padding:10px 8px max(12px,env(safe-area-inset-bottom));backdrop-filter:blur(12px);z-index:5}nav button{color:#526770;background:none;padding:12px 10px;min-width:0;font-size:.875rem}nav button.active{color:var(--ink);background:#e1efeb}details summary{cursor:pointer;font-weight:600;padding:8px 0}dl{margin:12px 0}dt{color:#546973}dd{margin:6px 0 16px;font-weight:600}.check{display:flex;align-items:center;gap:12px;font-weight:500}.check small{display:block}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:15px 18px;border-radius:14px;z-index:20;max-width:calc(100% - 32px);width:max-content;box-shadow:0 6px 24px #102b3530}dialog{border:1px solid var(--line);border-radius:22px;padding:24px;max-width:calc(100% - 32px);width:480px;color:var(--ink);max-height:85dvh;overflow:auto}dialog::backdrop{background:#102b3570}dialog h2{font-size:1.3rem}.empty{padding:18px 0;color:#546973}.error{color:#a83228;font-size:.9375rem;margin:12px 0}hr{border:0;border-top:1px solid var(--line);margin:20px 0}.note{margin-top:20px}a{color:var(--green)}@media(min-width:750px){header{padding-top:40px}main{padding-top:12px}nav button{min-width:120px}}@media(prefers-reduced-motion:no-preference){.card{animation:in .18s ease-out}@keyframes in{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}@media(max-width:340px){main{padding-left:12px;padding-right:12px}.split{grid-template-columns:1fr}.hero{padding:22px 18px}header{padding:20px 12px}nav button{padding:12px 7px}} .savings-button{margin-top:12px}nav button{flex:1;max-width:120px;padding:12px 4px;font-size:.8rem}@media(min-width:750px){nav button{min-width:0}} /* Matching pastel colours for each destination. */ body{--pastel:#AACDDC;--page:#f1f7fd;--edge:#9abbd7;background:var(--page)} body[data-view="spend"]{--pastel:#C7EABB;--page:#f0faf4;--edge:#8bbda0} body[data-view="commitments"]{--pastel:#FBC3C1;--page:#fff6ef;--edge:#CF8F91} body[data-view="month"]{--pastel:#BDA6CE;--page:#f7f3fd;--edge:#b5a2d5} body[data-view="savings"]{--pastel:#AACDDC;--page:#f1f7fd;--edge:#9abbd7} .card:not(.hero){background:linear-gradient(135deg,var(--pastel),#fff 78%);border-color:var(--edge)} .hero{background:#AACDDC;color:var(--ink);border:1px solid #9abbd7} .hero small,.hero p{color:#365469}.hero .amount{color:#174d70} nav button[data-view="home"]{--tab:#AACDDC;--tab-edge:#799fbe} nav button[data-view="spend"]{--tab:#C7EABB;--tab-edge:#6d9f82} nav button[data-view="commitments"]{--tab:#FBC3C1;--tab-edge:#B57578} nav button[data-view="month"]{--tab:#BDA6CE;--tab-edge:#9781b8} nav button[data-view="savings"]{--tab:#AACDDC;--tab-edge:#799fbe} nav button,nav button.active{background:var(--tab);color:var(--ink);border:2px solid transparent;padding:10px 2px;font-size:clamp(.65rem,2.8vw,.8rem)} nav button.active{border-color:var(--tab-edge);box-shadow:0 2px 5px #102b351a} nav button:focus-visible{outline:3px solid #174d70;outline-offset:2px} /* Dark Home gives the daily allowance a clear focal point. */ body[data-view="home"]{--page:#171b20;--pastel:#252c34;--edge:#46525e;color:#f5f7fa} body[data-view="home"] .brand,body[data-view="home"] h1,body[data-view="home"] h2{color:#f5f7fa} body[data-view="home"] #month-label,body[data-view="home"] .muted,body[data-view="home"] small,body[data-view="home"] dt{color:#c4ced8} body[data-view="home"] .card:not(.hero){background:#252c34;border-color:#46525e} body[data-view="home"] .hero{background:#0c1015;color:#f5f7fa;border-color:#46525e} body[data-view="home"] .hero small,body[data-view="home"] .hero p{color:#c4ced8} body[data-view="home"] .hero .amount{color:#baf5d1} body[data-view="home"] .row,body[data-view="home"] hr{border-color:#46525e} body[data-view="home"] button.link,body[data-view="home"] a:not(.brand){color:#baf5d1} body[data-view="home"] dialog{color:#102b35} body[data-view="home"] dialog h2{color:#102b35} nav button[data-view="home"],nav button[data-view="home"].active{--tab:#171b20;--tab-edge:#c4ced8;color:#f5f7fa} /* Pastel navigation names on the dark Home screen. */ body[data-view="home"] nav{background:#171b20ed;border-top-color:#46525e} body[data-view="home"] nav button{background:var(--tab);color:var(--tab-ink)} body[data-view="home"] nav button[data-view="home"]{background:#0c1015;color:#ffffff} body[data-view="home"] nav button.active{border-color:#c4ced8} body[data-view="home"] nav button:focus-visible{outline-color:#c4ced8} nav button[data-view="spend"]{--tab-ink:#245d40} nav button[data-view="commitments"]{--tab-ink:#763D42} nav button[data-view="month"]{--tab-ink:#49345F} nav button[data-view="savings"]{--tab-ink:#285779} /* Black page backdrop frames each section's pastel cards. */ body,body[data-view]{background:#0c1015} header .brand{color:#f5f7fa} #month-label{color:#c4ced8} main>h1,main>.welcome{color:#f5f7fa} main>p.muted{color:#c4ced8} .welcome{margin:0 0 22px} .welcome h1{font-size:1.45rem;line-height:1.3;margin:4px 0 8px} .welcome p{font-size:1rem;color:#c4ced8;margin:0;line-height:1.5} nav{background:#0c1015ed;border-top-color:#46525e} nav button,nav button.active{color:var(--tab-ink,var(--ink))} nav button[data-view="home"],nav button[data-view="home"].active{background:#0c1015;color:#fff} /* Keep the longest navigation label on one line on smaller phones. */ nav button[data-view="commitments"]{font-size:clamp(.6rem,2.5vw,.75rem);white-space:nowrap} /* Give the longest label more room without rotating the navigation. */ nav{display:grid;grid-template-columns:.75fr 1fr 1.4fr .75fr 1fr;gap:4px} nav button{width:100%;max-width:none;min-width:0;white-space:nowrap} @media(min-width:750px){nav{grid-template-columns:90px 120px 168px 90px 120px}} /* A soft cloud-shaped explanation, with readable space for the full guidance. */ body[data-view="home"] .card.explanation-cloud:not(.hero){position:relative;background:#edf5fa;color:#102b35;border:2px solid #aacddc;border-radius:42px 52px 44px 28px;padding:26px 24px;margin:8px 0 30px;box-shadow:0 5px 0 #aacddc26} body[data-view="home"] .explanation-cloud::after{content:"";position:absolute;bottom:-12px;left:40px;width:22px;height:22px;background:#edf5fa;border-right:2px solid #aacddc;border-bottom:2px solid #aacddc;transform:rotate(45deg);border-radius:0 0 5px 0} body[data-view="home"] .explanation-cloud h2{color:#102b35} body[data-view="home"] .explanation-cloud .muted{color:#455d6b} .explanation-cloud .cake{margin-bottom:0} body[data-view="home"] .card.explanation-cloud:not(.hero) p,body[data-view="home"] .card.explanation-cloud:not(.hero) h2{color:#102b35} body[data-view="home"] .card.explanation-cloud:not(.hero) p.muted{color:#455d6b} /* v8 — friendlier Home money compass */ .home-welcome{padding:4px 2px 0}.hello-pill{display:inline-block;background:#ffe8a8;color:#5b4712;border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:800;letter-spacing:.02em;margin-bottom:8px}.home-welcome h1{margin-bottom:7px}.spend-compass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 10px}.compass-card{min-width:0;border-radius:22px;padding:16px 11px 15px;text-align:center;color:#102b35;box-shadow:0 5px 16px #00000022;border:2px solid #ffffff80}.compass-card.month-card{background:#bfe2f2}.compass-card.week-card{background:#f7d7a7}.compass-card.today-card{background:#c7eabb}.compass-icon{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 9px;border-radius:50%;background:#ffffffa8;font-weight:850;font-size:.9rem}.compass-label{display:block;font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.045em;opacity:.7}.compass-card h2{color:#102b35!important;font-size:.88rem;margin:4px 0 10px}.compass-card strong{display:block;font-size:clamp(1.05rem,5vw,1.55rem);letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.compass-card small{display:block;color:#405762!important;font-size:.67rem;line-height:1.25;margin-top:8px}.compass-note{text-align:center;color:#cbd6df;font-size:.84rem;margin:8px 8px 13px}.quick-spend{background:#f4f7f9;color:#102b35;margin-bottom:16px;box-shadow:0 3px 10px #00000020}.home-mini .card{border-radius:18px}.home-mini .card:first-child{background:#d7c8ed!important;color:#102b35}.home-mini .card:last-child{background:#fbc3c1!important;color:#102b35}.home-mini small{color:#405762!important}.home-mini strong{color:#102b35}@media(max-width:390px){.spend-compass{gap:7px}.compass-card{padding:14px 7px}.compass-card strong{font-size:clamp(.95rem,4.7vw,1.35rem)}.compass-card h2{font-size:.78rem}.compass-card small{font-size:.61rem}} /* v9 — Confident Spending: light, airy pages with soft currency confetti. */ body,body[data-view]{background:#fff;color:var(--ink)} header,.brand,#month-label,main,nav{position:relative;z-index:2} header .brand,body[data-view="home"] .brand,main>h1,main>.welcome,body[data-view="home"] h1,body[data-view="home"] h2{color:var(--ink)} #month-label,body[data-view="home"] #month-label,main>p.muted,.welcome p,body[data-view="home"] .muted,body[data-view="home"] small,body[data-view="home"] dt,.compass-note{color:#546973} body[data-view="home"] .card:not(.hero){background:linear-gradient(135deg,var(--pastel),#fff 78%);border-color:var(--edge);color:var(--ink)} body[data-view="home"] nav,nav{background:#ffffffed;border-top-color:#d9e2e6} body[data-view="home"] nav button[data-view="home"],nav button[data-view="home"],nav button[data-view="home"].active{background:#102b35;color:#fff} .heading-explainer{display:block;margin-top:.22rem;font-size:.46em;font-weight:650;color:#647780;letter-spacing:.01em} .inline-explainer{font-size:.82em;font-weight:650;color:#4e6570} .currency-confetti{position:fixed;inset:-12vh 0 0;overflow:hidden;pointer-events:none;z-index:0;color:#8fd0ed;opacity:.32} .currency-confetti i{position:absolute;top:-12vh;font-style:normal;font-weight:800;line-height:1;animation:currency-fall 5.8s linear infinite;will-change:transform} .currency-confetti i:nth-child(1){left:4%;font-size:48px;--r:-18deg;animation-delay:0s;animation-duration:5.15s} .currency-confetti i:nth-child(2){left:17%;font-size:26px;--r:13deg;animation-delay:-2.1s;animation-duration:5.50s} .currency-confetti i:nth-child(3){left:32%;font-size:61px;--r:-9deg;animation-delay:-4.7s;animation-duration:5.85s} .currency-confetti i:nth-child(4){left:49%;font-size:20px;--r:22deg;animation-delay:-1.3s;animation-duration:6.20s} .currency-confetti i:nth-child(5){left:67%;font-size:39px;--r:-15deg;animation-delay:-3.8s;animation-duration:4.80s} .currency-confetti i:nth-child(6){left:82%;font-size:56px;--r:18deg;animation-delay:-0.6s;animation-duration:5.15s} .currency-confetti i:nth-child(7){left:94%;font-size:29px;--r:-12deg;animation-delay:-5.1s;animation-duration:5.50s} .currency-confetti i:nth-child(8){left:10%;font-size:34px;--r:24deg;animation-delay:-3s;animation-duration:5.85s} .currency-confetti i:nth-child(9){left:25%;font-size:52px;--r:-20deg;animation-delay:-0.9s;animation-duration:6.20s} .currency-confetti i:nth-child(10){left:41%;font-size:28px;--r:11deg;animation-delay:-4.2s;animation-duration:4.80s} .currency-confetti i:nth-child(11){left:58%;font-size:66px;--r:-24deg;animation-delay:-2.6s;animation-duration:5.15s} .currency-confetti i:nth-child(12){left:74%;font-size:23px;--r:17deg;animation-delay:-5.5s;animation-duration:5.50s} .currency-confetti i:nth-child(13){left:89%;font-size:45px;--r:-8deg;animation-delay:-1.8s;animation-duration:5.85s} .currency-confetti i:nth-child(14){left:2%;font-size:22px;--r:15deg;animation-delay:-4.9s;animation-duration:6.20s} .currency-confetti i:nth-child(15){left:20%;font-size:68px;--r:-17deg;animation-delay:-2.9s;animation-duration:4.80s} .currency-confetti i:nth-child(16){left:37%;font-size:37px;--r:21deg;animation-delay:-0.2s;animation-duration:5.15s} .currency-confetti i:nth-child(17){left:53%;font-size:49px;--r:-11deg;animation-delay:-3.4s;animation-duration:5.50s} .currency-confetti i:nth-child(18){left:70%;font-size:31px;--r:25deg;animation-delay:-1.1s;animation-duration:5.85s} .currency-confetti i:nth-child(19){left:86%;font-size:63px;--r:-21deg;animation-delay:-4.4s;animation-duration:6.20s} .currency-confetti i:nth-child(20){left:97%;font-size:36px;--r:9deg;animation-delay:-2.2s;animation-duration:4.80s} .currency-confetti i:nth-child(21){left:13%;font-size:57px;--r:-25deg;animation-delay:-5.7s;animation-duration:5.15s} .currency-confetti i:nth-child(22){left:29%;font-size:24px;--r:16deg;animation-delay:-1.6s;animation-duration:5.50s} .currency-confetti i:nth-child(23){left:46%;font-size:43px;--r:-14deg;animation-delay:-3.6s;animation-duration:5.85s} .currency-confetti i:nth-child(24){left:64%;font-size:54px;--r:20deg;animation-delay:-0.8s;animation-duration:6.20s} .currency-confetti i:nth-child(25){left:79%;font-size:27px;--r:-19deg;animation-delay:-4.6s;animation-duration:4.80s} @keyframes currency-fall{0%{transform:translate3d(0,-12vh,0) rotate(var(--r));opacity:.15}12%{opacity:1}100%{transform:translate3d(24px,122vh,0) rotate(calc(var(--r) + 95deg));opacity:.75}} @media(prefers-reduced-motion:reduce){.currency-confetti i{animation:none}} /* v13: currency particles float freely rather than falling */ .currency-confetti{inset:0;overflow:hidden} .currency-confetti i{top:var(--y,50%);animation-name:currency-float;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} .currency-confetti i:nth-child(1){--y:8%;--dx:52px;--dy:28px} .currency-confetti i:nth-child(2){--y:21%;--dx:-42px;--dy:-34px} .currency-confetti i:nth-child(3){--y:38%;--dx:36px;--dy:-26px} .currency-confetti i:nth-child(4){--y:61%;--dx:-55px;--dy:24px} .currency-confetti i:nth-child(5){--y:79%;--dx:46px;--dy:-38px} .currency-confetti i:nth-child(6){--y:14%;--dx:-35px;--dy:42px} .currency-confetti i:nth-child(7){--y:46%;--dx:30px;--dy:36px} .currency-confetti i:nth-child(8){--y:72%;--dx:-48px;--dy:-25px} .currency-confetti i:nth-child(9){--y:88%;--dx:40px;--dy:-42px} .currency-confetti i:nth-child(10){--y:30%;--dx:-30px;--dy:48px} .currency-confetti i:nth-child(11){--y:55%;--dx:58px;--dy:-30px} .currency-confetti i:nth-child(12){--y:93%;--dx:-40px;--dy:-32px} .currency-confetti i:nth-child(13){--y:18%;--dx:34px;--dy:44px} .currency-confetti i:nth-child(14){--y:68%;--dx:48px;--dy:-34px} .currency-confetti i:nth-child(15){--y:42%;--dx:-52px;--dy:28px} .currency-confetti i:nth-child(16){--y:84%;--dx:38px;--dy:-46px} .currency-confetti i:nth-child(17){--y:26%;--dx:-44px;--dy:36px} .currency-confetti i:nth-child(18){--y:51%;--dx:42px;--dy:30px} .currency-confetti i:nth-child(19){--y:75%;--dx:-36px;--dy:-40px} .currency-confetti i:nth-child(20){--y:10%;--dx:-50px;--dy:32px} .currency-confetti i:nth-child(21){--y:63%;--dx:56px;--dy:38px} .currency-confetti i:nth-child(22){--y:35%;--dx:-32px;--dy:-44px} .currency-confetti i:nth-child(23){--y:90%;--dx:45px;--dy:-28px} .currency-confetti i:nth-child(24){--y:5%;--dx:-38px;--dy:46px} .currency-confetti i:nth-child(25){--y:57%;--dx:50px;--dy:-36px} @keyframes currency-float{0%{transform:translate3d(calc(var(--dx) * -.45),calc(var(--dy) * -.55),0) rotate(var(--r));opacity:.45}35%{transform:translate3d(calc(var(--dx) * .3),calc(var(--dy) * -.15),0) rotate(calc(var(--r) + 28deg));opacity:.9}70%{transform:translate3d(calc(var(--dx) * -.2),calc(var(--dy) * .45),0) rotate(calc(var(--r) - 20deg));opacity:.65}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(calc(var(--r) + 55deg));opacity:.85}} /* Currency selection stays available on every screen. */ .header-tools{display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0} .currency-picker{display:flex;align-items:center;gap:7px} .currency-picker label{margin:0;font-size:.75rem;color:#546973;font-weight:500} .currency-picker select{width:auto;min-height:44px;padding:8px 10px;border-radius:12px;font-size:.875rem;background:#eef8ee} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:360px){header{gap:8px}.brand{gap:6px;font-size:.95rem}.currency-picker label{display:none}#month-label{font-size:.75rem}} /* Two independent selectors, with room for translated navigation. */ header{flex-wrap:wrap}.header-tools{flex:1;min-width:150px}.preference-pickers{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .language-picker{display:flex;align-items:center;gap:7px}.language-picker label{margin:0;font-size:.75rem;color:#546973;font-weight:500} .language-picker select{width:auto;max-width:135px;min-height:44px;padding:8px 10px;border-radius:12px;font-size:.875rem;background:#eef8ee} nav button{overflow-wrap:anywhere;hyphens:auto} @media(max-width:430px){.preference-pickers label{display:none}.header-tools{flex-basis:100%;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.language-picker select{max-width:120px}#month-label{font-size:.8rem}header{row-gap:10px}nav button{font-size:.75rem}} nav button{white-space:normal;line-height:1.2} /* App-owned dropdown lists avoid iPhone native picker overlays. */ .picker-button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:44px;padding:8px 10px;border:1px solid #afc0c9;border-radius:12px;background:#eef8ee;color:var(--ink);font-size:.875rem;font-weight:600} .preference-menu{display:grid;gap:8px;margin:16px 0}.preference-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;min-height:48px;background:#edf2f4;color:var(--ink);border:2px solid transparent;text-align:left} .preference-option[aria-pressed="true"]{background:#d8efdf;border-color:#145e55}.preference-help{margin:14px 0} @media(max-width:340px){.picker-button{font-size:.8rem;padding:8px}.preference-pickers{gap:5px}} .backup-tools{max-width:960px;margin:0 auto;padding:0 20px;text-align:right}.backup-tools button{min-height:44px} /* Confident Spending additions */ .essential-suggestions{margin:12px 0;display:flex;flex-wrap:wrap;gap:8px}.essential-suggestions button{width:auto;max-width:100%;font-size:.88rem;padding:9px 12px}.preview-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.preview-results>div{background:#e8f4f2;border-radius:12px;padding:12px 6px;text-align:center;min-width:0}.preview-results small{display:block;font-size:.75rem}.preview-results strong{display:block;font-size:clamp(.9rem,3.5vw,1.4rem);overflow-wrap:anywhere}.preview-danger{color:#92391b;font-weight:700}.preview-safe{color:#246448;font-weight:700} /* v25: readable, consistent calculation explanation */ body[data-view="home"] .card:has(details summary){background:#eaf5fb!important;border:2px solid #b4d5e3!important;color:#102b35!important;} body[data-view="home"] .card:has(details summary) dt,body[data-view="home"] .card:has(details summary) .muted{color:#405b67!important;} body[data-view="home"] .card:has(details summary) dd,body[data-view="home"] .card:has(details summary) summary{color:#102b35!important;} .essential-groups{display:grid;gap:14px;margin:16px 0}.essential-group{background:#f2f7f8;border:1px solid #d4e4e8;border-radius:14px;padding:14px}.essential-group h3{margin:0 0 12px;font-size:1rem}.essential-group .chips{margin-bottom:0}.essential-group .chips button{background:#fff;border:1px solid #b6d0d3;color:#123440}.essential-group .chips button:focus-visible{outline:3px solid #438ab4} /* v26: first-time guided setup; does not affect established users */ .setup-guide{background:#fff4d8;border:2px solid #efcf84;border-radius:22px;padding:20px;margin:0 0 18px;color:#102b35;box-shadow:0 3px 12px #00000012} .setup-guide h2{margin:8px 0}.setup-guide p{color:#344f58}.guide-step{font-weight:800;color:#6a4c13;font-size:.85rem}.guide-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.guide-actions button{flex:1;min-width:130px} /* v28 — Confident Spending comic-page visual refresh. Presentation only. */ :root{--comic-ink:#203748;--comic-shadow:#203748;--comic-paper:#fffdf8} body,body[data-view],body[data-view="home"]{background:#fff9ec;color:var(--comic-ink)} .currency-confetti{opacity:.10!important;filter:saturate(.65)} header{background:#fff9eced;border-bottom:3px solid var(--comic-ink);max-width:100%;padding-left:max(20px,calc((100% - 600px)/2));padding-right:max(20px,calc((100% - 600px)/2))} .brand,header .brand,body[data-view="home"] .brand{color:var(--comic-ink);font-weight:900;letter-spacing:-.035em} .brandmark{border:2px solid var(--comic-ink);border-radius:9px;background:#ffe08b;color:var(--comic-ink);box-shadow:3px 3px 0 var(--comic-ink);transform:rotate(-4deg)} main{padding-top:20px}main h1,.welcome h1{font-weight:900;letter-spacing:-.045em;line-height:1.12} main>h1,body[data-view="home"] h1,body[data-view="home"] h2,main>.welcome,.welcome p{color:var(--comic-ink)} .card,.card:not(.hero),body[data-view="home"] .card:not(.hero){border:2px solid var(--comic-ink);border-radius:18px;box-shadow:4px 5px 0 #20374820;background:#fffdf8;color:var(--comic-ink)} .card h2,.card h3{font-weight:850} .hero,body[data-view="home"] .hero{background:#c5e9f5;border:2px solid var(--comic-ink);color:var(--comic-ink)} .hero .amount,body[data-view="home"] .hero .amount{color:#194c64} .hero small,.hero p,body[data-view="home"] .hero small,body[data-view="home"] .hero p{color:#35576a} .spend-compass{gap:9px} .compass-card{border:2px solid var(--comic-ink);border-radius:16px;box-shadow:4px 5px 0 #20374845;transform:none} .compass-card.month-card{background:#bfe8f7}.compass-card.week-card{background:#ffe0a5}.compass-card.today-card{background:#c7efcb} .compass-card strong{font-weight:900;letter-spacing:-.05em} .compass-card h2{font-weight:900} .compass-icon{border:1.5px solid #20374880} .quick-spend,.home-mini .card{border:2px solid var(--comic-ink);box-shadow:4px 5px 0 #20374824;border-radius:15px} button{border:2px solid var(--comic-ink);border-radius:11px;box-shadow:2px 3px 0 #20374840;transition:transform .1s ease,box-shadow .1s ease} button:active{transform:translate(1px,2px);box-shadow:1px 1px 0 #20374840} button.link{border:0;box-shadow:none} button.secondary,.chips button{background:#fff0bd;color:var(--comic-ink)} nav,body[data-view="home"] nav{background:#fffdf8;border-top:3px solid var(--comic-ink);gap:5px} nav button,body[data-view="home"] nav button{border:2px solid var(--comic-ink);border-radius:9px;color:var(--comic-ink);box-shadow:none;font-weight:800} nav button[data-view="home"],body[data-view="home"] nav button[data-view="home"]{background:#c5e9f5;color:var(--comic-ink)} nav button.active,body[data-view="home"] nav button.active{box-shadow:inset 0 -4px 0 #20374830;outline:2px solid var(--comic-ink);outline-offset:1px} body[data-view="home"] .card.explanation-cloud:not(.hero){background:#eaf6fd;color:var(--comic-ink);border:2px solid var(--comic-ink);box-shadow:4px 5px 0 #20374820} body[data-view="home"] .explanation-cloud::after{border-color:var(--comic-ink)} body[data-view="home"] .card:has(details summary){background:#eaf6fd!important;border:2px solid var(--comic-ink)!important} .warning,.setup-guide,.essential-group,.preview-results>div{border:2px solid var(--comic-ink);border-radius:14px;box-shadow:3px 4px 0 #2037481c} .setup-guide{background:#fff0bd} .essential-group{background:#fff5e4} .essential-group .chips button{background:#fffdf8;border:2px solid var(--comic-ink)} input:not([type=checkbox]),select,.picker-button{border:2px solid #667c87;background:#fffefa} dialog{border:3px solid var(--comic-ink);border-radius:18px;box-shadow:6px 7px 0 #20374845;background:#fffdf8} body[data-view="home"] .muted,body[data-view="home"] small,body[data-view="home"] dt,.compass-note{color:#516672} @media(max-width:390px){.spend-compass{gap:6px}.compass-card{padding:12px 5px}.compass-card strong{font-size:clamp(.92rem,4.5vw,1.25rem)}nav{gap:3px}nav button{padding:10px 1px}} @media(prefers-reduced-motion:reduce){button{transition:none}} /* v29: vintage printed-comic art direction — styling only; no financial logic changes. */ :root{--comic-ink:#171e27;--comic-red:#f04c40;--comic-blue:#8edaf1;--comic-yellow:#ffdf65;--comic-green:#a9e6a9;--comic-paper:#fff9e9} body,body[data-view],body[data-view="home"]{background-color:#fff9e9!important;background-image:radial-gradient(#17233016 .8px,transparent 1px)!important;background-size:7px 7px!important;color:var(--comic-ink)} .currency-confetti{display:none!important} header{background:#ffdf65!important;border-bottom:4px solid #171e27;box-shadow:0 5px 0 #171e2720;position:relative;z-index:2} .brand,header .brand{font-size:clamp(1.05rem,4vw,1.55rem);font-weight:1000;font-style:italic;text-transform:uppercase;letter-spacing:-.065em;text-shadow:2px 2px 0 #ffffff} .brandmark{background:#f04c40;color:#fff;border:3px solid #171e27;box-shadow:4px 4px 0 #171e27;transform:rotate(-7deg)} #month-label{color:#171e27!important;font-weight:900} .picker-button{background:#fff9e9;border:2px solid #171e27;box-shadow:2px 2px 0 #171e27;border-radius:8px} main{padding-top:23px} .welcome.home-welcome{background:#fffef8;border:3px solid #171e27;padding:16px 17px 12px;box-shadow:5px 5px 0 #171e27;position:relative;margin:4px 4px 25px} .welcome h1,main>h1{font-style:italic;text-transform:uppercase;font-weight:1000;letter-spacing:-.055em;font-size:clamp(1.7rem,7vw,2.45rem);line-height:1.03} .welcome.home-welcome h1{margin:0 0 12px} .welcome.home-welcome p{color:#253541;font-weight:550} .welcome.home-welcome button.link{color:#164f82!important;background:#fff0a6;border:2px solid #171e27;padding:8px 10px;margin:5px 6px 7px 0;box-shadow:2px 2px 0 #171e27;font-weight:800;border-radius:5px} .card,.card:not(.hero),body[data-view="home"] .card:not(.hero),.setup-guide{border:3px solid #171e27;border-radius:6px;background:#fffef7;box-shadow:5px 5px 0 #171e27;position:relative} .card h2,.card h3{font-weight:950} main>h1{display:table;background:#f7a5b7;border:3px solid #171e27;box-shadow:5px 5px 0 #171e27;padding:12px 18px;transform:rotate(-1deg);margin-bottom:26px} body[data-view="commitments"] main>h1{background:#ffdf65} body[data-view="savings"] main>h1{background:#a9e6a9} body[data-view="month"] main>h1{background:#8edaf1} .spend-compass{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 5px 20px} .compass-card{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 10px;text-align:left;padding:18px 20px;border:3px solid #171e27;border-radius:6px;box-shadow:5px 5px 0 #171e27;min-height:120px;position:relative;overflow:hidden} .compass-card::before{content:"";position:absolute;inset:0 0 0 auto;width:40%;opacity:.18;background-image:radial-gradient(#171e27 1.2px,transparent 1.5px);background-size:7px 7px;pointer-events:none} .compass-card.month-card{background:#8edaf1}.compass-card.week-card{background:#ffdf65}.compass-card.today-card{background:#a9e6a9} .compass-card h2{grid-column:1;grid-row:1;font-size:clamp(1.05rem,4.5vw,1.5rem);text-transform:uppercase;font-style:italic;margin:0;line-height:1.15} .compass-card strong{grid-column:1;grid-row:2;font-size:clamp(2rem,9vw,3.3rem);line-height:1.05;letter-spacing:-.06em;white-space:nowrap} .compass-card small{grid-column:1;grid-row:3;color:#283c43!important;font-size:.84rem;font-weight:650} .compass-card .compass-icon{grid-column:2;grid-row:1 / span 3;border:3px solid #171e27;border-radius:50%;width:58px;height:58px;background:#fffef8;font-size:1.55rem;box-shadow:3px 3px 0 #171e27;display:grid;place-items:center;z-index:1} .compass-note{color:#253541!important;font-weight:650} button:not(.link),.quick-spend{border:3px solid #171e27;border-radius:7px;box-shadow:3px 4px 0 #171e27;font-weight:900} button.full:not(.secondary):not(.danger){background:#f04c40;color:#fff;text-shadow:1px 1px 0 #171e27} button.secondary,.chips button{background:#ffdf65;color:#171e27} button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #171e27} input:not([type=checkbox]),select{border:2px solid #171e27;border-radius:5px;background:#fffef8} .preview-results>div{border:3px solid #171e27;border-radius:5px;box-shadow:2px 3px 0 #171e27;background:#aee4f1} .preview-results>div:nth-child(2){background:#ffdf65}.preview-results>div:nth-child(3){background:#a9e6a9} .essential-group{background:#fff0bd;border:3px solid #171e27;border-radius:6px;box-shadow:3px 3px 0 #171e27} .row{border-bottom:2px dashed #171e2750} .warning,.setup-guide{background:#ffecaa;border:3px solid #171e27;border-radius:6px;box-shadow:4px 4px 0 #171e27} .critical{background:#ffc8bd} body[data-view="home"] .card.explanation-cloud:not(.hero){background:#fffef8;border:3px solid #171e27;border-radius:15px 15px 15px 4px;box-shadow:5px 5px 0 #171e27} body[data-view="home"] .explanation-cloud::after{border-color:#171e27} body[data-view="home"] .card:has(details summary){background:#e4f7ff!important;border:3px solid #171e27!important} nav,body[data-view="home"] nav{background:#fff9e9!important;border-top:4px solid #171e27;gap:4px;padding:8px 7px max(12px,env(safe-area-inset-bottom))} nav button,body[data-view="home"] nav button{border:2px solid #171e27;border-radius:5px;box-shadow:none;text-shadow:none;color:#171e27!important;font-weight:900;font-size:clamp(.61rem,2.65vw,.78rem)} nav button[data-view="home"],body[data-view="home"] nav button[data-view="home"]{background:#8edaf1} nav button[data-view="spend"],body[data-view="home"] nav button[data-view="spend"]{background:#f7a5b7} nav button[data-view="commitments"],body[data-view="home"] nav button[data-view="commitments"]{background:#ffdf65} nav button[data-view="savings"],body[data-view="home"] nav button[data-view="savings"]{background:#a9e6a9} nav button[data-view="month"],body[data-view="home"] nav button[data-view="month"]{background:#b8dafa} nav button.active,body[data-view="home"] nav button.active{outline:3px solid #171e27;outline-offset:-5px;box-shadow:inset 0 -4px 0 #171e2740} dialog{border:3px solid #171e27;border-radius:8px;box-shadow:6px 7px 0 #171e27;background:#fff9e9} @media(max-width:360px){.compass-card{padding:14px}.compass-card .compass-icon{width:47px;height:47px}.compass-card strong{font-size:clamp(1.9rem,9vw,2.8rem)}} @media(prefers-reduced-motion:reduce){.card{animation:none}} /* v30 — functional comic lettering: only questions, directions, and alerts use call-outs. */ .comic-speech,.comic-directive{display:table;max-width:calc(100% - 14px);position:relative!important;isolation:isolate;padding:13px 16px!important;margin:15px 7px 23px 2px!important;border:3px solid #171e27!important;border-radius:22px 22px 22px 9px!important;background:#fffef8!important;color:#171e27!important;box-shadow:4px 4px 0 #171e27!important;transform:none!important;font-style:normal!important;line-height:1.25!important;overflow:visible!important} .comic-speech::after{content:"";position:absolute;bottom:-15px;left:23px;width:20px;height:20px;background:#fffef8;border-left:3px solid #171e27;border-bottom:3px solid #171e27;transform:skewY(-28deg) rotate(-15deg);z-index:-1} .comic-directive{background:#ffdf65!important;border-radius:8px!important;font-weight:900!important;text-transform:none!important;transform:rotate(-1deg)!important} .comic-directive::after{content:"";position:absolute;bottom:-13px;right:22px;width:18px;height:18px;background:#ffdf65;border-right:3px solid #171e27;border-bottom:3px solid #171e27;transform:skewY(30deg) rotate(15deg);z-index:-1} .comic-alert{position:relative!important;border:3px solid #171e27!important;background:#ffe3a0!important;box-shadow:5px 5px 0 #171e27!important;margin:12px 7px 24px 2px!important} .comic-alert::before{content:"!";position:absolute;top:-14px;right:-9px;display:grid;place-items:center;width:31px;height:31px;border:3px solid #171e27;border-radius:50%;background:#f04c40;color:white;font-size:22px;font-weight:1000;transform:rotate(10deg)} .comic-alert.critical{background:#ffc8bd!important} /* Prompts must never visually masquerade as balances or transaction cards. */ .compass-card,.preview-results>div,.row{transform:none} @media(max-width:380px){.comic-speech,.comic-directive{padding:11px 12px!important;font-size:clamp(1rem,4.8vw,1.3rem)}} /* v31: traditional comic-book bursts for page headings; no decorative figure circles. */ .compass-card .compass-icon{display:none!important} .compass-card{grid-template-columns:minmax(0,1fr)!important} .compass-card h2,.compass-card strong,.compass-card small{grid-column:1!important} main>h1{display:block;width:fit-content;max-width:100%;padding:25px 26px!important;margin:8px 0 31px!important;transform:rotate(-2deg)!important;clip-path:polygon(0% 27%,13% 27%,9% 0%,28% 15%,38% 1%,49% 15%,63% 0%,69% 17%,88% 5%,84% 26%,100% 34%,90% 49%,100% 68%,83% 70%,90% 100%,67% 86%,55% 100%,43% 87%,23% 100%,21% 81%,0 83%,10% 56%);border:0!important;box-shadow:none!important;text-shadow:2px 2px 0 #fff!important;text-align:center;line-height:1.1} body[data-view="commitments"] main>h1{background:#ffdf65} body[data-view="spend"] main>h1{background:#f7a5b7} body[data-view="month"] main>h1{background:#8edaf1} body[data-view="savings"] main>h1{background:#a9e6a9} /* Questions speak, directions point, and warnings burst. Figures stay ordinary. */ .comic-speech{max-width:100%;font-weight:800!important} .comic-directive{max-width:100%;font-weight:900!important} .comic-alert{border-radius:12px!important} /* Avoid oversized comic decorations on small phones. */ @media(max-width:390px){main>h1{font-size:clamp(1.35rem,6.2vw,2rem);padding:23px 19px!important}} /* v32: Actual reusable blank illustrated SVG art with live HTML lettering on top. */ main>h1{background:transparent!important;background-image:url('./comic-burst.svg')!important;background-size:100% 100%!important;background-repeat:no-repeat!important;clip-path:none!important;border:0!important;box-shadow:none!important;transform:rotate(-1deg)!important;display:flex!important;align-items:center;justify-content:center;min-height:112px;min-width:min(100%,260px);width:max-content;max-width:100%;padding:29px 42px!important;margin:4px 0 25px!important;text-align:center;text-shadow:2px 2px 0 white!important;overflow-wrap:anywhere} body[data-view="spend"] main>h1{filter:hue-rotate(295deg)} body[data-view="month"] main>h1{filter:hue-rotate(155deg)} body[data-view="savings"] main>h1{filter:hue-rotate(75deg)} .comic-speech,.comic-directive{box-sizing:border-box!important;display:block!important;width:fit-content!important;max-width:100%!important;min-width:min(100%,200px);background-color:transparent!important;background-image:url('./comic-speech.svg')!important;background-repeat:no-repeat!important;background-size:100% 100%!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;margin:8px 0 15px!important;padding:21px 30px 36px!important;color:#171e27!important;line-height:1.25!important;overflow-wrap:break-word} .comic-speech::after,.comic-directive::after{display:none!important} .comic-directive{background-image:url('./comic-directive.svg')!important;padding:21px 29px 32px!important;transform:rotate(-.5deg)!important} .comic-alert{background-image:url('./comic-alert.svg')!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-color:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:24px 27px 35px!important;margin:10px 0 16px!important} .comic-alert::before{display:none!important} @media(max-width:390px){main>h1{font-size:clamp(1.25rem,5.6vw,1.8rem)!important;padding:28px 31px!important;min-height:100px}.comic-speech,.comic-directive{padding-left:23px!important;padding-right:23px!important;font-size:1rem!important}} /* v33 — illustrated, straight-edged comic-strip Home; financial figures remain live HTML */ body[data-view="home"]{background:#fff5dc!important} body[data-view="home"] #main{max-width:820px;margin-inline:auto} body[data-view="home"] .comic-cover{position:relative;overflow:hidden;text-align:center;padding:20px 12px 23px;margin:4px 0 12px;background:linear-gradient(160deg,#ffdb59 0%,#ffeaaa 55%,#ffc663 100%);border:4px solid #172431;box-shadow:5px 5px 0 #172431} body[data-view="home"] .comic-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ab542a 1.1px,transparent 1.5px);background-size:9px 9px;opacity:.18;pointer-events:none} .comic-cover-kicker,.comic-cover-sub{position:relative;font-size:clamp(1.1rem,5vw,1.55rem);font-weight:1000;letter-spacing:.13em;color:#173e57} body[data-view="home"] .comic-cover h1{position:relative;margin:3px auto!important;font-size:clamp(2.55rem,12vw,5.7rem)!important;line-height:.94!important;font-weight:1000!important;letter-spacing:-.06em;color:#e73d36;-webkit-text-stroke:1.3px #172431;text-shadow:3px 4px 0 #fff7df,6px 7px 0 #172431;transform:none!important;background:none!important;clip-path:none!important;padding:4px 0 8px!important;display:block!important;min-height:0!important;width:auto!important;filter:none!important} .comic-cover-tag{position:relative;margin:12px 0 0;font-size:.9rem;font-weight:900;color:#18364b} body[data-view="home"] .comic-frame{position:relative;border:4px solid #172431;border-radius:0;background:#fff9e9;overflow:hidden;margin:12px 0;box-shadow:4px 4px 0 #172431} .comic-strip-intro{min-height:220px;display:flex;flex-direction:column;justify-content:space-between;padding:14px!important} .comic-scene{position:absolute;inset:0;background-position:center;background-size:cover;pointer-events:none} .comic-scene-welcome{background-image:url('./comic-home-scene.svg')} .comic-scene-spending{background-image:url('./comic-spend-scene.svg')} .comic-hello{position:relative;align-self:flex-start;max-width:80%;background:#fffdf4;border:3px solid #172431;border-radius:45% 42% 38% 40% / 35% 40% 38% 35%;padding:17px 22px;font-size:clamp(1.25rem,5vw,1.7rem);font-weight:1000;line-height:1.2;box-shadow:2px 3px 0 #172431} .comic-hello::after{content:"";position:absolute;bottom:-16px;left:27px;width:21px;height:21px;background:#fffdf4;border-bottom:3px solid #172431;border-right:3px solid #172431;transform:skew(-18deg) rotate(29deg)} .comic-hello span{display:block;font-size:.75rem;font-weight:750;margin-top:5px} .comic-account{position:relative;align-self:flex-end;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;background:#fff9e9ec;padding:5px;border:2px solid #172431} .comic-account button{font-size:.78rem!important} .comic-chapter{font-size:clamp(1.1rem,4.9vw,1.65rem);line-height:1.15;margin:0;padding:12px 14px;text-align:center;color:#172431;background:#ffe07b;border:4px solid #172431;font-weight:1000;letter-spacing:.015em} .comic-budget-panels{margin:0!important;gap:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important} body[data-view="home"] .comic-budget-panels .compass-card{border:4px solid #172431!important;border-top:0!important;border-radius:0!important;box-shadow:none!important;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center!important;min-height:215px;padding:80px 5px 12px!important;gap:7px;overflow:hidden;background:#bce7fa!important} body[data-view="home"] .comic-budget-panels .compass-card:not(:last-child){border-right:0!important} .comic-panel-art{position:absolute;inset:0 0 42%;background-size:cover;background-position:center;opacity:.9;pointer-events:none} .comic-panel-month{background:linear-gradient(165deg,transparent 45%,#6ca9d4 46% 56%,transparent 57%),radial-gradient(circle at 77% 30%,#ffdd69 0 25px,transparent 26px),linear-gradient(#b7e9fb,#9ed5e4)} .comic-panel-week{background:repeating-linear-gradient(90deg,transparent 0 22px,#233442 23px 25px,transparent 26px 48px),linear-gradient(150deg,#ffdd7c,#fff3c0)} .comic-panel-today{background:radial-gradient(circle at 65% 30%,#fff0a1 0 30px,transparent 31px),linear-gradient(155deg,#a2dfc5,#74c7d5)} body[data-view="home"] .comic-budget-panels .compass-card h2{font-size:clamp(.73rem,2.8vw,1.15rem)!important;line-height:1.1;margin:0!important;position:relative;z-index:1} body[data-view="home"] .comic-budget-panels .compass-card strong{font-size:clamp(1.05rem,4.4vw,2.5rem)!important;letter-spacing:-.05em!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;position:relative;z-index:1} body[data-view="home"] .comic-budget-panels .compass-card small{font-size:clamp(.6rem,2vw,.8rem)!important;line-height:1.2;position:relative;z-index:1} body[data-view="home"] .comic-budget-panels .compass-card::before{display:none!important} body[data-view="home"] .comic-budget-panels .week-card{background:#ffe5a2!important} body[data-view="home"] .comic-budget-panels .today-card{background:#b3e7c4!important} .comic-action-scene{padding:20px 14px 15px!important;min-height:230px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px} .comic-action-scene .comic-question{position:relative;background:#fffdf2;border:3px solid #172431;border-radius:40% 38% 42% 40%;padding:14px 20px;margin:0;max-width:90%;font-size:1.1rem;font-weight:1000;z-index:1} .comic-action-scene p{position:relative;background:#fff9e9f0;padding:4px 8px;margin:0;font-weight:800;z-index:1} .comic-action-scene button{position:relative;z-index:1;margin:4px 0 0} body[data-view="home"] .comic-protected{padding:0 12px 12px!important} body[data-view="home"] .comic-protected .comic-chapter{margin:0 -12px 12px;background:#a5e6bb} body[data-view="home"] .comic-protected .home-mini{margin:0} body[data-view="home"] .comic-protected .card{box-shadow:none!important;border:3px solid #172431!important;border-radius:0!important;min-width:0} .comic-strapline{font-weight:1000;text-align:center;margin:13px 0 0} body[data-view="home"] .comic-details{margin-bottom:22px} @media(max-width:390px){body[data-view="home"] .comic-budget-panels .compass-card{padding:67px 3px 9px!important;min-height:200px}.comic-cover-tag{font-size:.75rem}.comic-hello{max-width:92%;padding:14px}} /* v34: readable, illustrated comic panels; functional data remains HTML */ body[data-view="home"] .comic-strip-intro{min-height:270px;padding:12px!important} body[data-view="home"] .comic-hello{max-width:75%;padding:13px 18px;font-size:clamp(1.1rem,4.3vw,1.55rem);border-radius:48% 44% 40% 46% / 39% 45% 42% 41%} body[data-view="home"] .comic-account{align-self:flex-end;max-width:95%;background:#fffdf3;border:3px solid #172431;padding:7px;gap:7px;box-shadow:3px 3px 0 #172431} body[data-view="home"] .comic-account button{color:#172431!important;background:#ffe07b!important;border:2px solid #172431!important;border-radius:4px!important;box-shadow:none!important;padding:9px 10px!important;font-weight:900!important;text-decoration:none!important;line-height:1.25} body[data-view="home"] .comic-panel-art{inset:4px 0 43%;background-repeat:no-repeat;background-size:contain;background-position:center;opacity:1} body[data-view="home"] .comic-panel-month{background-image:url('./comic-figure-month.svg');background-color:#a6dcf2} body[data-view="home"] .comic-panel-week{background-image:url('./comic-figure-week.svg');background-color:#ffe1a1} body[data-view="home"] .comic-panel-today{background-image:url('./comic-figure-today.svg');background-color:#a8e2ca} body[data-view="home"] .comic-budget-panels .compass-card{padding-top:106px!important;min-height:225px;gap:5px!important} body[data-view="home"] .comic-action-scene{min-height:310px;justify-content:space-between;padding:12px!important} body[data-view="home"] .comic-action-scene .comic-question{font-size:clamp(.95rem,3.9vw,1.3rem);max-width:74%;padding:12px 17px;background:#fffdf3} body[data-view="home"] .comic-action-scene p{max-width:75%;font-size:.9rem;border:2px solid #172431;background:#fffdf3;padding:7px 10px;margin-left:auto} body[data-view="home"] .comic-action-scene button{margin-top:auto} body[data-view="home"] .comic-details{margin-bottom:12px} body[data-view="home"] .comic-details details{padding:0!important} @media(max-width:390px){body[data-view="home"] .comic-strip-intro{min-height:245px}body[data-view="home"] .comic-budget-panels .compass-card{padding-top:86px!important;min-height:208px}} /* v35 — single comic masthead and illustration-led Home. All amounts remain live HTML. */ body[data-view="home"] header{padding:10px 14px 12px!important;min-height:0!important;background:#ffe27b!important} body[data-view="home"] header .brand{display:none!important} body[data-view="home"] header .header-tools{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} body[data-view="home"] header .preference-pickers{margin-left:auto} body[data-view="home"] .backup-tools .link{color:#1a4f56!important;font-weight:800!important} body[data-view="home"] .comic-cover{background:linear-gradient(100deg,#ffda55,#ffe69b);isolation:isolate;padding-right:12px} body[data-view="home"] .comic-cover::after{content:"";position:absolute;right:-28px;bottom:-20px;width:32%;height:68%;background:url('./comic-character-cover.jpg') center 28%/cover no-repeat;border:3px solid #172431;transform:rotate(3deg);opacity:.94;z-index:-1;mask-image:linear-gradient(90deg,transparent 0%,black 28%)} body[data-view="home"] .comic-cover h1{font-size:clamp(2.4rem,11vw,5.7rem)!important} body[data-view="home"] .comic-strip-intro{min-height:250px;background:linear-gradient(130deg,#9fe1e8,#ffdf9a)!important} body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#c7f1e4 0%,#c7f1e4a0 24%,transparent 55%),url('./comic-character-welcome.jpg');background-position:center,right center;background-size:cover,auto 100%;background-repeat:no-repeat} body[data-view="home"] .comic-hello{max-width:72%;font-size:clamp(1.05rem,4.4vw,1.6rem);background:#fffdf5f5} body[data-view="home"] .comic-action-scene{background:#fbd0c2!important;min-height:285px} body[data-view="home"] .comic-scene-spending{background-image:linear-gradient(90deg,transparent 0%,#fbd0c255 60%),url('./comic-character-spend.jpg');background-position:left center,left center;background-size:cover,auto 100%;background-repeat:no-repeat} body[data-view="home"] .comic-action-scene .comic-question{margin-left:auto;max-width:75%} body[data-view="home"] .comic-action-scene p{max-width:70%;margin-left:auto} body[data-view="home"] .comic-details{margin-bottom:8px} body[data-view="home"] .comic-details details{min-height:0!important} @media(max-width:430px){body[data-view="home"] .comic-cover::after{opacity:.27;width:40%;right:-8px}body[data-view="home"] .comic-strip-intro{min-height:225px}body[data-view="home"] .comic-action-scene{min-height:260px}} /* v37: editorial comic composition — reserve clear reading zones for live UI */ body[data-view="home"] .comic-cover{padding:24px 15px 28px!important;background:radial-gradient(circle at 82% 72%,#ffeab3 0,#ffeab3 12%,transparent 44%),linear-gradient(120deg,#ffda55,#ffecab)!important} body[data-view="home"] .comic-cover::after{z-index:0!important;opacity:.24!important;right:0!important;bottom:0!important;width:35%!important;height:65%!important;border:0!important;transform:none!important;mask-image:linear-gradient(90deg,transparent,#000 65%)!important} body[data-view="home"] .comic-cover > *{position:relative;z-index:1} body[data-view="home"] .comic-strip-intro{min-height:295px!important;padding:14px!important;justify-content:space-between!important;background:#bce8e1!important} body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#d5f5e5 0%,#d5f5e5a6 33%,transparent 70%),url('./comic-character-welcome.jpg')!important;background-position:center,right center!important;background-size:cover,auto 100%!important} body[data-view="home"] .comic-hello{max-width:66%!important;padding:14px 16px!important;line-height:1.18!important} body[data-view="home"] .comic-account{max-width:100%!important;align-self:stretch!important;justify-content:center!important;background:#fffaf0f5!important} body[data-view="home"] .comic-action-scene{min-height:320px!important;justify-content:space-between!important;background:#f7c8b7!important} body[data-view="home"] .comic-scene-spending{background-image:linear-gradient(90deg,transparent 0%,transparent 45%,#f7c8b7b8 68%,#f7c8b7 100%),url('./comic-character-spend.jpg')!important;background-position:left center,left center!important;background-size:cover,auto 100%!important} body[data-view="home"] .comic-action-scene .comic-question{max-width:67%!important;margin-left:auto!important;font-size:clamp(.96rem,3.7vw,1.28rem)!important} body[data-view="home"] .comic-action-scene p{max-width:64%!important;margin-left:auto!important;font-size:clamp(.78rem,3vw,.95rem)!important;background:#fffdf3f5!important} body[data-view="home"] .comic-action-scene button{width:100%!important;align-self:stretch!important;background:#f0493f!important} body[data-view="home"] .comic-details{background:#e3f5fb!important} body[data-view="home"] .comic-details details{border-radius:0!important} @media(max-width:430px){body[data-view="home"] .comic-strip-intro{min-height:275px!important}body[data-view="home"] .comic-hello{max-width:73%!important}body[data-view="home"] .comic-action-scene{min-height:300px!important}body[data-view="home"] .comic-action-scene .comic-question{max-width:72%!important}body[data-view="home"] .comic-action-scene p{max-width:68%!important}} /* v38 — mobile comic-page polish: real UI lives in deliberately clear panels */ body[data-view="home"] .comic-cover::after{opacity:.38!important;width:31%!important;height:58%!important;right:0!important;bottom:0!important;mask-image:linear-gradient(90deg,transparent 0%,#000 72%)!important} body[data-view="home"] .comic-cover h1{max-width:95%;margin-inline:auto!important} body[data-view="home"] .comic-strip-intro{min-height:305px!important;padding:14px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:space-between!important} body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#d5f5e5c9 0%,transparent 55%),url('./comic-character-welcome.jpg')!important;background-position:center,right center!important;background-size:cover,auto 100%!important} body[data-view="home"] .comic-hello{max-width:73%!important;margin:0!important;padding:13px 16px!important;background:#fffdf5f2!important} body[data-view="home"] .comic-account{position:relative!important;margin-top:auto!important;align-self:flex-end!important;width:auto!important;max-width:96%!important;padding:8px!important;background:#fffaf0f5!important} body[data-view="home"] .comic-action-scene{min-height:335px!important;padding:14px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:12px!important;background:#f7c8b7!important} body[data-view="home"] .comic-scene-spending{background-image:linear-gradient(90deg,transparent 0%,transparent 47%,#f7c8b7c9 80%,#f7c8b7 100%),url('./comic-character-spend.jpg')!important;background-size:cover,auto 100%!important;background-position:center,left center!important} body[data-view="home"] .comic-action-scene .comic-question{position:relative!important;margin:0 0 0 auto!important;width:67%!important;max-width:67%!important;padding:12px!important;font-size:clamp(.95rem,3.7vw,1.2rem)!important} body[data-view="home"] .comic-action-scene p{position:relative!important;margin:0 0 0 auto!important;width:62%!important;max-width:62%!important;padding:10px!important;background:#fffdf5f5!important;font-size:clamp(.78rem,3vw,.96rem)!important} body[data-view="home"] .comic-action-scene .quick-spend{position:relative!important;margin-top:auto!important;z-index:2!important} body[data-view="home"] .comic-details{padding:13px 16px!important;min-height:0!important} body[data-view="home"] .comic-details details{min-height:0!important;margin:0!important;padding:0!important} body[data-view="home"] .comic-details summary{padding:12px 15px!important;margin:0!important;font-size:clamp(1rem,4vw,1.2rem)!important;line-height:1.25!important} @media(max-width:390px){body[data-view="home"] .comic-hello{max-width:78%!important}body[data-view="home"] .comic-action-scene .comic-question{width:72%!important;max-width:72%!important}body[data-view="home"] .comic-action-scene p{width:69%!important;max-width:69%!important}} /* v39 — Home-only refinements: clearer cover illustration, richer welcome scene, tighter explainer */ body[data-view="home"] .comic-cover::after{opacity:.64!important;width:36%!important;height:70%!important;right:0!important;bottom:0!important;background-position:center 24%!important;mask-image:linear-gradient(90deg,transparent 0%,#000 78%)!important} body[data-view="home"] .comic-cover h1{position:relative!important;z-index:2!important;text-shadow:3px 4px 0 #fff7df,6px 7px 0 #172431!important} body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#d5f5e5a6 0%,#d5f5e544 30%,transparent 66%),url('./comic-character-welcome.jpg')!important;background-position:center,right center!important;background-size:cover,auto 100%!important} body[data-view="home"] .comic-hello{background:#fffdf5f5!important;z-index:2!important} body[data-view="home"] .comic-account{z-index:2!important;background:#fffaf0f5!important} body[data-view="home"] .comic-details{padding:9px 12px!important;margin-bottom:9px!important;min-height:0!important} body[data-view="home"] .comic-details details{min-height:0!important;padding:0!important;margin:0!important} body[data-view="home"] .comic-details summary{padding:9px 12px!important;font-size:clamp(.98rem,3.8vw,1.13rem)!important;line-height:1.2!important} body[data-view="home"] .comic-details details:not([open]){height:auto!important} @media(max-width:430px){body[data-view="home"] .comic-cover::after{width:39%!important;opacity:.56!important}body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#d5f5e599 0%,transparent 58%),url('./comic-character-welcome.jpg')!important}} /* v40 — Spending chapter. Illustration stays decorative; all live inputs and handlers remain unchanged. */ body[data-view="spend"]{background:#fff5df!important;color:#172431!important} body[data-view="spend"] #main{max-width:820px!important} body[data-view="spend"] main>h1{margin:6px auto 22px!important;min-height:125px!important;filter:none!important;font-weight:1000!important;font-style:italic!important} body[data-view="spend"] #main>.card{border:4px solid #172431!important;border-radius:0!important;background:#fffaf0!important;box-shadow:5px 6px 0 #172431!important;padding:18px!important;margin:14px 0 24px!important;overflow:hidden} body[data-view="spend"] #main>.card:first-of-type{position:relative;padding-top:172px!important} body[data-view="spend"] #main>.card:first-of-type::before{content:"";position:absolute;top:0;left:0;right:0;height:160px;background:linear-gradient(90deg,#ffddaa12 0%,#ffe9c8bb 72%),url('./comic-character-spend.jpg') left 34%/auto 235px no-repeat,#f9d0c1;border-bottom:4px solid #172431;pointer-events:none} body[data-view="spend"] #main>.card:first-of-type>h2{position:absolute;top:17px;right:12px;left:42%;z-index:1;padding:11px;background:#fffdf5f0;border:3px solid #172431;border-radius:35% 40% 33% 38%/25% 27% 30% 28%;font-size:clamp(.95rem,3.5vw,1.25rem)!important;line-height:1.22;text-align:center} body[data-view="spend"] #to-savings{background:#a6e2ba!important;color:#172431!important;border:3px solid #172431!important;box-shadow:4px 4px 0 #172431!important;margin:0 0 24px!important} body[data-view="spend"] #spend-form{padding:14px;background:#fff4d8;border:3px solid #172431} body[data-view="spend"] #spend-form>label:first-child{display:block;background:#fffdf5;border:3px solid #172431;border-radius:32px;padding:16px 18px;margin:0 0 22px;font-size:clamp(1.04rem,4vw,1.3rem)!important;font-weight:900;line-height:1.25} body[data-view="spend"] #spend-form .chips{gap:9px;margin-bottom:23px} body[data-view="spend"] #spend-form .chips button{background:#ffdf74!important;color:#172431!important;border:3px solid #172431!important;box-shadow:3px 4px 0 #172431!important;padding:12px 14px!important} body[data-view="spend"] #spend-form .chips button[aria-pressed="true"]{background:#32746a!important;color:#fff!important} body[data-view="spend"] #spend-form input{border:3px solid #172431!important;border-radius:4px!important;background:#fffdf6!important;min-height:56px!important} body[data-view="spend"] #check-before-spending{background:#ffe07a!important;color:#172431!important;border:3px solid #172431!important;box-shadow:4px 5px 0 #172431!important;margin-top:28px!important} body[data-view="spend"] #spend-form button[type="submit"],body[data-view="spend"] #spend-form>button.full:last-child{background:#f04b40!important;color:white!important;border:3px solid #172431!important;box-shadow:4px 5px 0 #172431!important} body[data-view="spend"] #main>.card:last-of-type{min-height:0!important;background:#e6f5f7!important} body[data-view="spend"] #main>.card:last-of-type h2{background:#ffe07a;border:3px solid #172431;padding:12px;font-size:clamp(1.05rem,4vw,1.35rem)!important} body[data-view="spend"] #main>.card:last-of-type .empty{margin:0!important;padding:8px 4px!important} @media(max-width:390px){body[data-view="spend"] #main>.card{padding:12px!important}body[data-view="spend"] #main>.card:first-of-type{padding-top:160px!important}body[data-view="spend"] #main>.card:first-of-type::before{height:150px;background-size:auto 205px}body[data-view="spend"] #main>.card:first-of-type>h2{left:39%;font-size:.93rem!important}body[data-view="spend"] #spend-form{padding:10px}} /* v41: Home-only comic composition refinement. No financial UI or event changes. */ body[data-view="home"] .comic-cover{isolation:isolate!important;overflow:hidden!important} body[data-view="home"] .comic-cover::after{width:34%!important;height:67%!important;right:0!important;bottom:0!important;opacity:.74!important;background-position:52% 20%!important;mask-image:linear-gradient(90deg,transparent 0%,#000 58%)!important} body[data-view="home"] .comic-cover h1{max-width:100%!important;position:relative!important;z-index:2!important} body[data-view="home"] .comic-strip-intro{min-height:275px!important;overflow:hidden!important} body[data-view="home"] .comic-scene-welcome{background-image:linear-gradient(90deg,#d5f5e5e8 0%,#d5f5e56b 35%,transparent 62%),url('./comic-character-welcome.jpg')!important;background-position:center,right center!important;background-size:cover,auto 100%!important} body[data-view="home"] .comic-hello{max-width:66%!important;padding:13px!important;line-height:1.18!important} body[data-view="home"] .comic-account{max-width:100%!important;gap:6px!important} body[data-view="home"] .comic-action-scene{min-height:300px!important;overflow:hidden!important} body[data-view="home"] .comic-scene-spending{background-image:linear-gradient(90deg,transparent 0%,transparent 45%,#f7c8b7b8 83%,#f7c8b7),url('./comic-character-spend.jpg')!important;background-position:left center!important;background-size:auto 100%!important} body[data-view="home"] .comic-action-scene .comic-question{max-width:61%!important;width:61%!important;padding:11px 12px!important} body[data-view="home"] .comic-action-scene p{max-width:61%!important;width:61%!important;padding:8px!important} body[data-view="home"] .comic-details{padding:8px 12px!important;margin-bottom:10px!important} body[data-view="home"] .comic-details summary{padding:9px 12px!important} @media(max-width:390px){body[data-view="home"] .comic-cover::after{width:38%!important;opacity:.65!important}body[data-view="home"] .comic-hello{max-width:71%!important}body[data-view="home"] .comic-action-scene .comic-question,body[data-view="home"] .comic-action-scene p{max-width:65%!important;width:65%!important}} /* v42 — Home composition: keep faces and all lettering unobstructed on phones. */ body[data-view="home"] .comic-action-scene{display:flex!important;flex-direction:column!important;justify-content:flex-end!important;min-height:440px!important;padding:226px 13px 13px!important;gap:9px!important;background:#f7c8b7!important} body[data-view="home"] .comic-scene-spending{inset:0 0 auto 0!important;height:218px!important;background-image:url('./comic-character-spend.jpg')!important;background-size:auto 100%!important;background-position:left center!important;background-repeat:no-repeat!important;background-color:#f7c8b7!important;border-bottom:3px solid #172431} body[data-view="home"] .comic-action-scene .comic-question{align-self:stretch!important;width:100%!important;max-width:100%!important;margin:0!important;padding:10px 16px!important;text-align:center!important;font-size:clamp(1rem,4vw,1.25rem)!important;line-height:1.2!important;border-radius:22px 22px 18px 22px!important} body[data-view="home"] .comic-action-scene p{align-self:stretch!important;width:100%!important;max-width:100%!important;margin:0!important;padding:9px 12px!important;text-align:center!important;font-size:clamp(.9rem,3.5vw,1rem)!important;line-height:1.3!important} body[data-view="home"] .comic-action-scene .quick-spend{margin-top:3px!important} body[data-view="home"] .comic-details{padding:12px 13px!important} body[data-view="home"] .comic-details summary{padding:12px 15px!important;line-height:1.35!important;overflow-wrap:anywhere!important} body[data-view="home"] .comic-cover::after{width:33%!important;height:57%!important;opacity:.82!important;background-position:center 17%!important;mask-image:linear-gradient(90deg,transparent 0%,#000 48%)!important} body[data-view="home"] .comic-cover-tag{font-size:clamp(.72rem,2.9vw,.9rem)!important;line-height:1.4!important;padding:0 4px!important} /* v43 — consistent, deliberate comic ink on the Home page only */ body[data-view="home"] .comic-question, body[data-view="home"] .comic-hello, body[data-view="home"] .comic-details summary { background-color:#fffdf5!important; background-image:none!important; border:3px solid #172431!important; border-radius:24px!important; box-shadow:3px 3px 0 #172431!important; transform:none!important; outline:none!important; box-sizing:border-box!important; } body[data-view="home"] .comic-question::before, body[data-view="home"] .comic-question::after, body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-details summary::before, body[data-view="home"] .comic-details summary::after{display:none!important} body[data-view="home"] .comic-details summary{display:block!important;width:100%!important;max-width:100%!important;text-align:center!important;padding:14px 18px!important;line-height:1.4!important;overflow-wrap:normal!important;font-size:clamp(.9rem,3.55vw,1.14rem)!important} body[data-view="home"] .comic-details{padding:15px!important} body[data-view="home"] .comic-action-scene{padding-top:226px!important} body[data-view="home"] .comic-scene-spending{background-size:cover!important;background-position:center 42%!important} body[data-view="home"] .comic-action-scene p{border:3px solid #172431!important;box-shadow:none!important} body[data-view="home"] .comic-cover{padding-bottom:38px!important} body[data-view="home"] .comic-cover-tag{position:relative!important;z-index:3!important;display:block!important;max-width:70%!important;margin:10px auto 0 10px!important;text-align:left!important;font-size:clamp(.72rem,2.7vw,.9rem)!important;line-height:1.35!important} body[data-view="home"] .comic-cover::after{height:53%!important;width:33%!important;opacity:.88!important} /* v44 — tidy, equal-weight speech tails and shorter shopping illustration. */ body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-hello, body[data-view="home"] .comic-details summary{position:relative!important;isolation:isolate!important;overflow:visible!important;margin-bottom:13px!important} /* Nested solid triangles produce a clean 3px comic ink edge, without skewed borders. */ body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-details summary::before{content:""!important;display:block!important;position:absolute!important;left:27px!important;bottom:-18px!important;width:27px!important;height:19px!important;background:#172431!important;clip-path:polygon(0 0,100% 0,18% 100%)!important;z-index:2!important} body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-details summary::after{content:""!important;display:block!important;position:absolute!important;left:32px!important;bottom:-10px!important;width:15px!important;height:12px!important;background:#fffdf5!important;clip-path:polygon(0 0,100% 0,14% 100%)!important;z-index:3!important} body[data-view="home"] .comic-action-scene{min-height:395px!important;padding-top:191px!important} body[data-view="home"] .comic-scene-spending{height:183px!important} /* v45 — rounder Home speech call-outs; keep equal-weight ink and matching tails. */ body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary{ border-radius:999px!important; border-width:3px!important; padding-left:19px!important; padding-right:19px!important; } body[data-view="home"] .comic-details summary{padding-top:17px!important;padding-bottom:17px!important} body[data-view="home"] .comic-details{padding-bottom:23px!important} /* v46 — fuller oval Home bubbles, with softly rounded tails. */ body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary{ border-radius:50% / 48%!important; padding:22px 24px!important; min-height:76px!important; box-shadow:3px 3px 0 #172431!important; } body[data-view="home"] .comic-hello{padding:22px 25px!important;min-height:110px!important;max-width:72%!important} body[data-view="home"] .comic-action-scene .comic-question{padding:22px 20px!important;min-height:82px!important} body[data-view="home"] .comic-details summary{width:94%!important;max-width:94%!important;margin-left:auto!important;margin-right:auto!important;padding:23px 17px!important;min-height:86px!important} /* Curved teardrop tail: identical ink weight on all three callouts. */ body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-details summary::before{ left:31px!important;bottom:-14px!important;width:22px!important;height:22px!important; background:#172431!important;clip-path:none!important;border-radius:2px 2px 2px 75%!important; transform:rotate(-37deg)!important;z-index:-1!important; } body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-details summary::after{ left:34px!important;bottom:-7px!important;width:14px!important;height:14px!important; background:#fffdf5!important;clip-path:none!important;border-radius:2px 2px 2px 75%!important; transform:rotate(-37deg)!important;z-index:1!important; } body[data-view="home"] .comic-action-scene{min-height:415px!important} @media(max-width:390px){body[data-view="home"] .comic-hello{max-width:77%!important}body[data-view="home"] .comic-details summary{font-size:.9rem!important;padding-left:10px!important;padding-right:10px!important}} /* v47: approved thinner, consistent comic ink and larger integrated tails on Home. */ body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary{ border:2px solid #172431!important; border-radius:50% / 48%!important; box-shadow:2px 2px 0 #172431!important; margin-bottom:29px!important; } /* Each tail is a larger curved wedge; inner shape creates a slim, consistent outline. */ body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-details summary::before{ display:block!important;content:""!important;position:absolute!important; left:39px!important;bottom:-27px!important;width:49px!important;height:39px!important; background:#172431!important; clip-path:polygon(0 0,100% 0,8% 100%)!important; border-radius:0 0 0 65%!important;transform:none!important;z-index:0!important; } body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-details summary::after{ display:block!important;content:""!important;position:absolute!important; left:43px!important;bottom:-21px!important;width:37px!important;height:31px!important; background:#fffdf5!important; clip-path:polygon(0 0,100% 0,9% 100%)!important; border-radius:0 0 0 65%!important;transform:none!important;z-index:1!important; } body[data-view="home"] .comic-details{padding-bottom:30px!important} /* v48 — fine, consistent ink on every Home panel; no changes to other pages or calculations. */ body[data-view="home"] .comic-frame, body[data-view="home"] .comic-cover, body[data-view="home"] .comic-details {border:2px solid #172431!important;box-shadow:2px 2px 0 #172431!important;} body[data-view="home"] .comic-chapter {border:2px solid #172431!important;} body[data-view="home"] .comic-budget-panels .compass-card {border-width:2px!important;} body[data-view="home"] .comic-protected .card {border:2px solid #172431!important;} body[data-view="home"] .comic-account {border:2px solid #172431!important;box-shadow:2px 2px 0 #172431!important;} body[data-view="home"] .comic-account button {border:1.5px solid #172431!important;} body[data-view="home"] .comic-action-scene p {border:2px solid #172431!important;} body[data-view="home"] .comic-action-scene .quick-spend {border:2px solid #172431!important;box-shadow:2px 2px 0 #172431!important;} body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary {border:2px solid #172431!important;box-shadow:1px 1px 0 #172431!important;} /* v49: clean, uniformly inked comic speech tails and friendlier lettering. */ body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary { border:2px solid #172431!important; box-shadow:none!important; isolation:isolate!important; overflow:visible!important; } /* One vector outline, rather than two mismatched clipped polygons. */ body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-details summary::before { content:""!important;display:block!important; position:absolute!important;left:42px!important;bottom:-29px!important; width:62px!important;height:43px!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 43'%3E%3Cpath d='M 5 0 L 56 0 C 44 8 29 25 14 39 C 7 35 5 25 5 0 Z' fill='%23fffdf5' stroke='%23172431' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M 7 0 L 54 0' stroke='%23fffdf5' stroke-width='5'/%3E%3C/svg%3E") center/100% 100% no-repeat!important; clip-path:none!important;border-radius:0!important;transform:none!important; z-index:2!important;pointer-events:none!important; } body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-details summary::after {content:none!important;display:none!important;} body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary {margin-bottom:33px!important;} /* Comic-inspired lettering, but precise and readable currency amounts. */ body {font-family:'Trebuchet MS','Arial Rounded MT Bold',Verdana,sans-serif!important;} body h1,body h2,body h3,body .comic-chapter,body .eyebrow, body button,body nav button,body details summary {font-family:'Trebuchet MS','Arial Rounded MT Bold',Verdana,sans-serif!important;letter-spacing:.005em;font-weight:800;} body .amount,body .compass-card strong,body .comic-budget-panels strong, body .split strong,body .row strong {font-variant-numeric:tabular-nums;letter-spacing:0!important;font-weight:800;} body .muted,body small,body label,body .row,body p {letter-spacing:.005em;} /* v50 — bolder, larger comic-book lettering. Financial values stay live. */ :root { --comic-letter: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', ui-rounded, system-ui, sans-serif; } body[data-view="home"] .comic-cover-kicker, body[data-view="home"] .comic-cover h1, body[data-view="home"] .comic-cover-sub, body[data-view="home"] .comic-chapter, body[data-view="home"] .comic-hello, body[data-view="home"] .comic-question, body[data-view="home"] .comic-strapline, body[data-view="home"] .comic-details summary, body[data-view="home"] .compass-card h2, body[data-view="home"] .comic-protected small, body[data-view="home"] .quick-spend { font-family:var(--comic-letter)!important; font-weight:900!important; letter-spacing:.015em!important; } body[data-view="home"] .comic-chapter {font-size:clamp(1.38rem,5.4vw,1.85rem)!important;line-height:1.15!important;} body[data-view="home"] .comic-hello {font-size:clamp(1.13rem,4.7vw,1.45rem)!important;line-height:1.25!important;} body[data-view="home"] .comic-hello span {font-family:var(--comic-letter)!important;font-size:clamp(.96rem,3.9vw,1.13rem)!important;line-height:1.3!important;} body[data-view="home"] .comic-action-scene .comic-question {font-size:clamp(1.28rem,5.2vw,1.75rem)!important;line-height:1.19!important;} body[data-view="home"] .comic-action-scene p {font-family:var(--comic-letter)!important;font-size:clamp(1.03rem,4.2vw,1.3rem)!important;line-height:1.3!important;font-weight:750!important;} body[data-view="home"] .comic-action-scene .quick-spend {font-size:clamp(1.08rem,4.4vw,1.35rem)!important;line-height:1.25!important;padding-top:14px!important;padding-bottom:14px!important;} body[data-view="home"] .comic-budget-panels .compass-card h2 {font-size:clamp(.95rem,3.65vw,1.22rem)!important;line-height:1.18!important;} body[data-view="home"] .comic-budget-panels .compass-card strong {font-family:var(--comic-letter)!important;font-size:clamp(1.3rem,5vw,1.85rem)!important;font-weight:900!important;font-variant-numeric:tabular-nums!important;letter-spacing:-.025em!important;} body[data-view="home"] .comic-budget-panels .compass-card small {font-family:var(--comic-letter)!important;font-size:clamp(.76rem,2.9vw,.98rem)!important;line-height:1.25!important;} body[data-view="home"] .comic-protected .card small {font-size:clamp(.94rem,3.6vw,1.12rem)!important;line-height:1.22!important;} body[data-view="home"] .comic-protected .card strong {font-family:var(--comic-letter)!important;font-size:clamp(1.45rem,5.6vw,1.9rem)!important;} body[data-view="home"] .comic-strapline {font-size:clamp(1.05rem,4.25vw,1.35rem)!important;line-height:1.3!important;} body[data-view="home"] .comic-details summary {font-size:clamp(1.03rem,4.05vw,1.3rem)!important;line-height:1.3!important;padding:24px 19px!important;} body[data-view="home"] .comic-details dl,body[data-view="home"] .comic-details p {font-family:var(--comic-letter)!important;font-size:1.02rem!important;line-height:1.4!important;} body[data-view="home"] .comic-account button {font-family:var(--comic-letter)!important;font-size:1rem!important;font-weight:800!important;} /* Prevent bolder typography from colliding with the edges of money cards. */ body[data-view="home"] .comic-budget-panels .compass-card {min-width:0!important;overflow-wrap:anywhere!important;} @media(max-width:390px){body[data-view="home"] .comic-budget-panels .compass-card strong {font-size:clamp(1.13rem,4.6vw,1.45rem)!important;}body[data-view="home"] .comic-budget-panels .compass-card h2{font-size:.94rem!important;}} /* v51 — unified comic-cover yellow for actions; selected navigation is blue. Presentation only: no changes to budgeting, storage, or event logic. */ :root { --cs-action-yellow:#ffda55; --cs-selected-blue:#8edaf1; } body[data-view="home"] .comic-chapter {background:#8edaf1!important;} body[data-view="home"] .comic-budget-panels .week-card {background:#ded0ef!important;} body[data-view="home"] .comic-account button, body[data-view="home"] .comic-action-scene .quick-spend, body[data-view="home"] .comic-action-scene p, body[data-view="home"] .comic-details summary {background:var(--cs-action-yellow)!important;color:#172431!important;} /* The question is interactive via the native details/summary element. */ body nav button,body[data-view="home"] nav button, body nav button[data-view="home"],body nav button[data-view="spend"], body nav button[data-view="commitments"],body nav button[data-view="month"], body nav button[data-view="savings"] {background:var(--cs-action-yellow)!important;color:#172431!important;} body nav button.active,body[data-view="home"] nav button.active, body[data-view="home"] nav button[data-view="home"] {background:var(--cs-selected-blue)!important;color:#172431!important;} /* Keep actual actions visually consistent throughout the other chapters. */ body[data-view="spend"] #check-before-spending, body[data-view="spend"] #spend-form button[type="submit"], body[data-view="spend"] #spend-form>button.full:last-child, body[data-view="spend"] #spend-form .chips button:not([aria-pressed="true"]), body button.full:not(.secondary):not(.danger),body button.secondary {background:var(--cs-action-yellow)!important;color:#172431!important;text-shadow:none!important;} /* v52: visible, continuous fine-ink tails. The tail is placed above the surrounding panel (not behind its opaque background), with a matching fill. */ body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary { position:relative!important; overflow:visible!important; isolation:isolate!important; margin-bottom:34px!important; } body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-details summary::before { content:""!important;display:block!important; position:absolute!important; left:32px!important; bottom:-24px!important; width:54px!important;height:36px!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 36'%3E%3Cpath d='M 4 1 C 13 10 13 24 9 33 C 27 28 41 16 50 1' fill='%23fffdf5' stroke='%23172431' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M 5 0 H 51' fill='none' stroke='%23fffdf5' stroke-width='5'/%3E%3C/svg%3E")!important; background-color:transparent!important;background-repeat:no-repeat!important; background-position:center!important;background-size:100% 100%!important; clip-path:none!important;border:0!important;border-radius:0!important; transform:none!important;box-shadow:none!important; z-index:3!important;pointer-events:none!important; } body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-details summary::after {content:none!important;display:none!important;} /* The question's tail should visually match its own white speech bubble. */ body[data-view="home"] .comic-details {overflow:visible!important;} body[data-view="home"] .comic-details details {overflow:visible!important;} /* v53: real SVG speech tails, not fragile CSS pseudo-elements. */ body[data-view="home"] .comic-hello::before, body[data-view="home"] .comic-hello::after, body[data-view="home"] .comic-action-scene .comic-question::before, body[data-view="home"] .comic-action-scene .comic-question::after, body[data-view="home"] .comic-details summary::before, body[data-view="home"] .comic-details summary::after {content:none!important;display:none!important;} body[data-view="home"] .comic-hello, body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-details summary {overflow:visible!important;position:relative!important;isolation:auto!important;} body[data-view="home"] .cs-visible-tail {display:block!important;position:absolute!important;width:64px!important;height:43px!important;left:32px!important;bottom:-36px!important;z-index:10!important;overflow:visible!important;pointer-events:none!important;--tail-fill:#fffdf5;} body[data-view="home"] .comic-details summary .cs-visible-tail {--tail-fill:#ffdf68;} body[data-view="home"] .comic-strip-intro,body[data-view="home"] .comic-action-scene,body[data-view="home"] .comic-details,body[data-view="home"] .comic-details details {overflow:visible!important;} /* v54: seamless integrated speech tails. The filled upper portion overlaps and masks the oval's bottom stroke; only the curved side edges are inked. */ body[data-view="home"] .cs-visible-tail {width:64px!important;height:52px!important;left:32px!important;bottom:-40px!important;z-index:20!important;--tail-fill:#fffdf5!important;} body[data-view="home"] .comic-details summary .cs-visible-tail {--tail-fill:#ffdf68!important;} /* v55 — elongated, slender comic tails; overlap conceals the oval border at the join. */ body[data-view="home"] .cs-visible-tail {width:58px!important;height:98px!important;left:37px!important;bottom:-82px!important;z-index:20!important;overflow:visible!important;pointer-events:none!important;} body[data-view="home"] .comic-details summary .cs-visible-tail {--tail-fill:#ffdf68!important;} /* v56: classic comic speech tails — narrow 20px throat, short tapered point. */ body[data-view="home"] .cs-visible-tail {width:40px!important;height:54px!important;left:43px!important;bottom:-42px!important;} /* v57: subtle final adjustment: slimmer throat and shorter curved point. */ body[data-view="home"] .cs-visible-tail{width:40px!important;height:46px!important;left:43px!important;bottom:-34px!important;} /* v58 — Spending chapter: spending-themed panels, same approved comic grammar. All changes below are scoped to Spending; Home styling is preserved. */ body[data-view="spend"] main>h1 {background:#8edaf1!important;color:#172431!important;min-height:0!important;padding:24px 12px!important;margin:8px 0 18px!important;border:4px solid #172431!important;box-shadow:4px 5px 0 #172431!important;filter:none!important;font-family:var(--comic-letter)!important;font-style:normal!important;font-size:clamp(1.75rem,7vw,2.65rem)!important;letter-spacing:.02em!important;text-transform:uppercase!important} body[data-view="spend"] #main>.card:first-of-type {padding-top:240px!important;background:#fffaf0!important;} body[data-view="spend"] #main>.card:first-of-type::before {height:224px!important;background-image:url('./comic-character-spend.jpg')!important;background-size:cover!important;background-position:center 43%!important;background-color:#f7c8b7!important} body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech {top:0!important;left:7%!important;right:7%!important;position:relative!important;margin:0 auto 43px!important;padding:17px 23px!important;background:#fffdf5!important;border:3px solid #172431!important;border-radius:50% / 43%!important;font-family:var(--comic-letter)!important;font-size:clamp(1.02rem,4vw,1.35rem)!important;line-height:1.3!important;transform:none!important;} body[data-view="spend"] .spend-tail {position:absolute;display:block;width:48px;height:48px;left:14%;bottom:-39px;overflow:visible;pointer-events:none;z-index:2} body[data-view="spend"] #to-savings {background:var(--cs-action-yellow)!important;color:#172431!important;margin-top:4px!important;margin-bottom:24px!important;font-family:var(--comic-letter)!important} body[data-view="spend"] #spend-form {background:#f9cfc2!important;padding:20px 15px!important} body[data-view="spend"] #spend-form>label.spend-prompt {display:block!important;position:relative!important;overflow:visible!important;background:#fffdf5!important;border:3px solid #172431!important;border-radius:50% / 40%!important;text-align:center!important;padding:22px 20px!important;margin-bottom:54px!important;font-family:var(--comic-letter)!important} body[data-view="spend"] #spend-form .chips button {background:var(--cs-action-yellow)!important;color:#172431!important;font-family:var(--comic-letter)!important} body[data-view="spend"] #spend-form .chips button[aria-pressed="true"] {background:#8edaf1!important;color:#172431!important;outline:3px solid #172431!important;outline-offset:1px!important} body[data-view="spend"] #check-before-spending,body[data-view="spend"] #spend-form>button.full:last-child {background:var(--cs-action-yellow)!important;color:#172431!important;font-family:var(--comic-letter)!important;font-size:1.12rem!important;padding:15px 10px!important} body[data-view="spend"] #check-before-spending {margin-bottom:14px!important} body[data-view="spend"] #main>.card.spend-history {background:#e3f3f8!important;} body[data-view="spend"] #main>.card.spend-history h2 {background:#8edaf1!important;color:#172431!important;font-family:var(--comic-letter)!important} body[data-view="spend"] nav button[data-view="spend"] {background:var(--cs-selected-blue)!important} body[data-view="spend"] nav button:not([data-view="spend"]) {background:var(--cs-action-yellow)!important} @media(max-width:390px){body[data-view="spend"] #main>.card:first-of-type{padding-top:210px!important}body[data-view="spend"] #main>.card:first-of-type::before{height:194px!important}body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech{top:0!important}} /* v59: Spending page — yellow is reserved for interactive controls. Home and financial application logic are intentionally untouched. */ body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech, body[data-view="spend"] #spend-form>label.spend-prompt {background:#fffdf5!important;color:#172431!important;} body[data-view="spend"] #main>.card.spend-history h2 {background:#8edaf1!important;} body[data-view="spend"] #spend-form {background:#f9cfc2!important;} body[data-view="spend"] #main>.card {background:#fffaf0!important;} body[data-view="spend"] #main>.card.spend-history {background:#e3f3f8!important;} body[data-view="spend"] #spend-form .chips button:not([aria-pressed="true"]), body[data-view="spend"] #to-savings, body[data-view="spend"] #check-before-spending, body[data-view="spend"] #spend-form button[type="submit"], body[data-view="spend"] #spend-form>button.full:last-child, body[data-view="spend"] .spend-history button[data-remove-spend] {background:var(--cs-action-yellow)!important;color:#172431!important;} body[data-view="spend"] #spend-form .chips button[aria-pressed="true"] {background:var(--cs-selected-blue)!important;} body[data-view="spend"] nav button[data-view="spend"] {background:var(--cs-selected-blue)!important;} body[data-view="spend"] nav button:not([data-view="spend"]) {background:var(--cs-action-yellow)!important;} /* v60 — Spending chapter only. Home page remains approved and untouched. */ body[data-view="spend"] #spend-form {padding:15px 13px!important;} body[data-view="spend"] #spend-form>label.spend-prompt {margin-bottom:40px!important;padding:18px 14px!important;} body[data-view="spend"] #spend-form .chips {margin-bottom:14px!important;gap:8px!important;} body[data-view="spend"] #spend-form .chips button {padding:10px 12px!important;} body[data-view="spend"] #spend-form .chips button[aria-pressed="true"] {outline:0!important;outline-offset:0!important;box-shadow:3px 4px 0 #172431!important;border:3px solid #172431!important;} body[data-view="spend"] #spend-form>label:not(.spend-prompt) {margin-top:12px!important;margin-bottom:6px!important;} body[data-view="spend"] #spend-form input {min-height:49px!important;margin-bottom:9px!important;} body[data-view="spend"] #check-before-spending,body[data-view="spend"] #spend-form>button.full:last-child {padding:12px 9px!important;min-height:54px!important;} body[data-view="spend"] #check-before-spending {margin-top:8px!important;margin-bottom:10px!important;} body[data-view="spend"] #main>.card.spend-history {padding:15px!important;} body[data-view="spend"] #main>.card.spend-history .spend-history-title {background:#8edaf1!important;color:#172431!important;text-align:center!important;font-family:var(--comic-letter)!important;font-size:clamp(1.13rem,5vw,1.5rem)!important;line-height:1.25!important;padding:14px 10px!important;margin:0 0 12px!important;border:3px solid #172431!important;} body[data-view="spend"] .spend-history-total {background:#d8ccef!important;color:#172431!important;font-family:var(--comic-letter)!important;font-size:1.12rem!important;font-weight:800!important;padding:11px 13px!important;border:3px solid #172431!important;margin-bottom:13px!important;} body[data-view="spend"] .spend-history .empty {margin:8px 0!important;} /* v61 — Spending page only: finer outlines to match the approved Home page. */ body[data-view="spend"] main>h1, body[data-view="spend"] #main>.card, body[data-view="spend"] #spend-form, body[data-view="spend"] #spend-form input, body[data-view="spend"] #spend-form .chips button, body[data-view="spend"] #to-savings, body[data-view="spend"] #check-before-spending, body[data-view="spend"] #spend-form button[type="submit"], body[data-view="spend"] #spend-form>button.full:last-child, body[data-view="spend"] #main>.card.spend-history .spend-history-title, body[data-view="spend"] .spend-history-total, body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech, body[data-view="spend"] #spend-form>label.spend-prompt {border-width:2px!important;} body[data-view="spend"] main>h1, body[data-view="spend"] #main>.card {box-shadow:2px 3px 0 #172431!important;} body[data-view="spend"] #spend-form .chips button, body[data-view="spend"] #spend-form .chips button[aria-pressed="true"], body[data-view="spend"] #to-savings, body[data-view="spend"] #check-before-spending, body[data-view="spend"] #spend-form button[type="submit"], body[data-view="spend"] #spend-form>button.full:last-child {box-shadow:2px 3px 0 #172431!important;} body[data-view="spend"] #main>.card:first-of-type::before {border-bottom-width:2px!important;} /* v62: spending artwork and Home-matched speech bubbles, Spending only */ body[data-view="spend"] #main>.card:first-of-type::before { background-image:url('./comic-spending-shopping.jpg')!important; background-size:cover!important;background-position:center 40%!important; } body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech, body[data-view="spend"] #spend-form>label.spend-prompt { border-radius:50% / 48%!important; padding:18px 20px!important; text-align:center!important; box-shadow:none!important; } body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech {max-width:90%!important;} body[data-view="spend"] .spend-tail {width:40px!important;height:46px!important;left:15%!important;bottom:-34px!important;} /* v63: Approved family cast on Home welcome illustration only. Financial UI remains live. */ body[data-view="home"] .comic-scene-welcome{ background-image:linear-gradient(90deg,#d5f5e5bb 0%,#d5f5e54d 32%,transparent 65%),url('./comic-family-home.jpg')!important; background-position:center,center center!important; background-size:cover,cover!important; background-repeat:no-repeat!important; } /* v64: approved family artwork, scoped to the two illustrated panels only. */ body[data-view="home"] .comic-scene-spending{ background-image:url('./comic-family-home.jpg')!important; background-size:cover!important; background-position:center center!important; } body[data-view="spend"] #main>.card:first-of-type::before{ background-image:url('./comic-family-checkout.jpg')!important; background-size:cover!important; background-position:center center!important; } /* v65: Spending chapter finishing polish. No changes to Home, money calculations or transaction logic. */ body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech, body[data-view="spend"] #spend-form>label.spend-prompt { border-radius:46% 48% 45% 47% / 49% 46% 50% 47%!important; border-width:2px!important; box-shadow:none!important; } body[data-view="spend"] #spend-form>label.spend-prompt {margin-bottom:34px!important;} body[data-view="spend"] #spend-form .chips {margin-top:0!important;margin-bottom:11px!important;} body[data-view="spend"] #spend-form input {margin-bottom:5px!important;} body[data-view="spend"] #check-before-spending {margin-top:3px!important;margin-bottom:8px!important;} body[data-view="spend"] #spend-form>button.full:last-child {margin-top:4px!important;} body[data-view="spend"] .spend-history .empty { background:#fffdf5!important;border:2px dashed #849ca8!important; border-radius:12px!important;padding:14px 12px!important; text-align:center!important;font-family:var(--comic-letter)!important; color:#526672!important; } /* v66: consistent spending page spacing, controls and empty history. */ body[data-view="spend"] #main>.card:first-of-type>h2.spend-speech {margin-bottom:28px!important;} body[data-view="spend"] #to-savings {margin-top:0!important;margin-bottom:15px!important;} body[data-view="spend"] #spend-form>label.spend-prompt {margin-bottom:31px!important;} body[data-view="spend"] #spend-form .chips {margin-bottom:9px!important;} body[data-view="spend"] #check-before-spending {margin-bottom:8px!important;} body[data-view="spend"] #spend-form>button.full:last-child {margin-top:0!important;} body[data-view="spend"] .spend-history p.empty { background:#fffdf5!important;border:2px dashed #849ca8!important; border-radius:12px!important;padding:14px 12px!important; text-align:center!important;font-family:var(--comic-letter)!important; color:#526672!important;margin:8px 0!important; } /* Keep the existing checkout cast while cropping the printed speech balloon away from the top edge; live speech stays in HTML below the picture. */ body[data-view="spend"] #main>.card:first-of-type::before { background-size:auto 153%!important;background-position:center bottom!important; } /* v67: final polish to the Spending page's How much? speech balloon only. Replace the irregular background SVG with a smooth, clean comic outline. */ body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech { display:block!important;position:relative!important;isolation:isolate!important; width:min(64%,235px)!important;min-width:0!important;max-width:100%!important; box-sizing:border-box!important;margin:18px 0 30px 4px!important; padding:14px 18px!important;min-height:0!important; background:#fffdf5!important;background-image:none!important; border:2px solid #172431!important;border-radius:28px 30px 28px 29px!important; box-shadow:none!important;transform:none!important; font-family:var(--comic-letter)!important;text-align:left!important; font-size:1rem!important;line-height:1.35!important; } body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::before { content:""!important;display:block!important;position:absolute!important; left:22px!important;bottom:-18px!important;width:29px!important;height:21px!important; background:#fffdf5!important; clip-path:polygon(12% 0,95% 0,0 100%)!important;z-index:1!important; } body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::after { content:""!important;display:block!important;position:absolute!important; left:19px!important;bottom:-22px!important;width:34px!important;height:24px!important; background:#172431!important; clip-path:polygon(12% 0,95% 0,0 100%,10% 100%,100% 0)!important; z-index:0!important;transform:none!important;border:0!important; } /* v68: a single smooth, attached comic tail for the amount question. White bridge conceals the oval's lower border; one SVG draws the two curved sides. */ body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::before { content:""!important;position:absolute!important;display:block!important; left:20px!important;bottom:-3px!important;width:39px!important;height:9px!important; background:#fffdf5!important;clip-path:none!important;z-index:2!important; border:0!important;transform:none!important; } body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::after { content:""!important;position:absolute!important;display:block!important; left:20px!important;bottom:-27px!important;width:43px!important;height:33px!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 43 33'%3E%3Cpath d='M 5 0 L 38 0 C 31 9 17 20 3 30 C 9 18 12 9 13 0 Z' fill='%23fffdf5'/%3E%3Cpath d='M 13 0 C 12 9 9 18 3 30 C 17 20 31 9 38 0' fill='none' stroke='%23172431' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat!important; clip-path:none!important;z-index:1!important;transform:none!important;border:0!important; } /* v69: keep the amount tail ABOVE the balloon's own paint layer. In v68 the fill bridge showed but the SVG tail sat behind the label. */ body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::before { z-index:8!important; } body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::after { z-index:9!important; } /* v70: render the amount tail as an actual child SVG above the label surface. It overlaps the bottom border, so the white fill and curved ink sides stay joined. */ body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::before, body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech::after {content:none!important;display:none!important;} body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech {overflow:visible!important;isolation:auto!important;} body[data-view="spend"] #spend-form label[for="spend-amount"] .cs-amount-tail {position:absolute!important;display:block!important;width:70px!important;height:48px!important;left:17px!important;bottom:-35px!important;z-index:15!important;overflow:visible!important;pointer-events:none!important;} /* v71: pastel blue amount question, matching its attached SVG tail. */ body[data-view="spend"] #spend-form label[for="spend-amount"].comic-speech {background:#bfeaf8!important;} /* v72: Essentials chapter; Home and Spending remain untouched. */ body[data-view="commitments"] #main>.essentials-heading{display:inline-block;background:#8edaf1;color:#172431;border:3px solid #172431;box-shadow:3px 4px 0 #172431;padding:16px 20px;margin:22px 0 14px;font-family:var(--comic-letter);font-size:clamp(1.5rem,6vw,2.15rem);line-height:1.15;transform:rotate(-1deg)} body[data-view="commitments"] #main>.essentials-intro{background:#fff6dd;border:3px solid #172431;box-shadow:3px 4px 0 #172431;padding:18px 17px;margin-bottom:22px;font-family:var(--comic-letter);line-height:1.45} body[data-view="commitments"] .essentials-intro p{margin:6px 0 10px} body[data-view="commitments"] .essentials-tagline{font-weight:900;font-size:1.15rem;text-align:center;color:#172431} body[data-view="commitments"] #main>.card.essentials-list{background:#e4f4f9!important;border:3px solid #172431!important;box-shadow:3px 4px 0 #172431!important;padding:14px!important} body[data-view="commitments"] .essentials-list>.row{background:#fffdf5;border:2px solid #172431;padding:13px 10px;margin:0 0 12px;box-shadow:2px 2px 0 #172431;gap:8px;flex-wrap:wrap} body[data-view="commitments"] .essentials-list>.row .description{min-width:0;flex:1 1 180px} body[data-view="commitments"] .essentials-list>.row .actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} body[data-view="commitments"] .essentials-list>.row .actions button{border:2px solid #172431!important;background:#ffe06c!important;color:#172431!important;box-shadow:2px 3px 0 #172431!important;border-radius:8px;font-family:var(--comic-letter);font-weight:700;padding:8px 10px} body[data-view="commitments"] .essentials-list>.row.essentials-reserved{background:#f9c5c5;justify-content:center;text-align:center;margin-bottom:0} body[data-view="commitments"] .essentials-reserved h2{font-family:var(--comic-letter);font-size:clamp(1.1rem,4.5vw,1.45rem)} body[data-view="commitments"] #add-payment.essentials-add{background:#ffe06c!important;color:#172431!important;border:3px solid #172431!important;box-shadow:3px 5px 0 #172431!important;font-family:var(--comic-letter);font-weight:800;font-size:1.2rem;margin:20px 0 14px;padding:17px 12px} /* v73: align Essentials with approved Home and Spending comic chapter */ body[data-view="commitments"] #main>.essentials-heading{display:block;width:max-content;max-width:100%;background:#8edaf1;border:3px solid #172431;box-shadow:4px 5px 0 #172431;transform:rotate(-1deg);font-size:clamp(1.35rem,5.8vw,2rem);margin:18px 0 16px;padding:17px 19px} body[data-view="commitments"] .essentials-family-panel{border:3px solid #172431;background:#fff9ea;overflow:hidden;margin-bottom:0} body[data-view="commitments"] .essentials-family-panel img{display:block;width:100%;height:auto;aspect-ratio:16/8.4;object-fit:cover;object-position:center 47%} body[data-view="commitments"] #main>.essentials-intro{background:#f8cdbf!important;border:3px solid #172431!important;border-top:0!important;box-shadow:4px 5px 0 #172431!important;padding:17px 14px 23px!important;margin-bottom:22px!important} body[data-view="commitments"] .essentials-comic-bubble{background:#fffdf6;border:2.5px solid #172431;border-radius:46% / 24%;padding:22px 22px 28px;position:relative;text-align:center;font-family:var(--comic-letter);font-size:clamp(.92rem,3.8vw,1.15rem);line-height:1.4;margin:4px 2px 14px} body[data-view="commitments"] .essentials-comic-bubble:before{content:"";position:absolute;bottom:-23px;left:18%;width:0;height:0;border-left:15px solid transparent;border-right:5px solid transparent;border-top:27px solid #172431;transform:rotate(13deg)} body[data-view="commitments"] .essentials-comic-bubble:after{content:"";position:absolute;bottom:-16px;left:calc(18% + 3px);width:0;height:0;border-left:10px solid transparent;border-right:4px solid transparent;border-top:22px solid #fffdf6;transform:rotate(13deg)} body[data-view="commitments"] .essentials-comic-bubble p{margin:5px 0 9px} body[data-view="commitments"] .essentials-list .description h3{font-family:var(--comic-letter);font-size:1.18rem} body[data-view="commitments"] .essentials-list .description small{font-size:.92rem} body[data-view="commitments"] #main>.muted{font-size:.86rem;line-height:1.45} /* Essentials form: compact, scrollable, same comic palette and button discipline */ .modal:has(#payment-form),dialog:has(#payment-form),[role="dialog"]:has(#payment-form){max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain} .essential-modal-heading{display:block;background:#8edaf1;border:3px solid #172431;box-shadow:3px 4px 0 #172431;padding:13px 15px;font:800 clamp(1.25rem,5vw,1.75rem)/1.2 var(--comic-letter);margin:0 0 14px;width:max-content;max-width:100%} .essential-modal-intro{font:700 1.05rem/1.35 var(--comic-letter);margin:0 0 12px} #payment-form .essential-groups{display:grid;gap:10px;margin:12px 0} #payment-form .essential-group{padding:12px!important;background:#fff0bf!important;border:3px solid #172431!important;box-shadow:2px 3px 0 #172431!important} #payment-form .essential-group h3{font-family:var(--comic-letter);font-size:1.05rem;margin:0 0 10px} #payment-form .essential-suggestions{gap:7px} #payment-form .essential-suggestions button{font-family:var(--comic-letter);font-size:.93rem;padding:9px 10px;border:2px solid #172431;border-radius:8px;box-shadow:2px 3px 0 #172431} #payment-form .actions button{background:#ffe06c!important;color:#172431!important;border:3px solid #172431!important;box-shadow:3px 4px 0 #172431!important;font-family:var(--comic-letter);font-weight:800} #payment-form label{font-family:var(--comic-letter);font-weight:800} @media(max-width:400px){body[data-view="commitments"] .essentials-comic-bubble{border-radius:32% / 15%;padding:17px 15px 25px}#payment-form .essential-suggestions button{font-size:.88rem;padding:8px 9px}} /* v74: electricity-story artwork in the Essentials chapter */ body[data-view="commitments"] .essentials-family-panel img{aspect-ratio:1296/385;object-fit:cover;object-position:center} /* v75 — lighter, consistent comic outlines throughout Essentials only. */ body[data-view="commitments"] #main>.essentials-heading, body[data-view="commitments"] .essentials-family-panel, body[data-view="commitments"] #main>.essentials-intro, body[data-view="commitments"] #main>.card.essentials-list, body[data-view="commitments"] .essentials-list>.row, body[data-view="commitments"] #add-payment.essentials-add { border-width:2px!important; box-shadow:1px 2px 0 #172431!important; } body[data-view="commitments"] .essentials-comic-bubble{border-width:2px!important;} body[data-view="commitments"] .essentials-list>.row .actions button{ border-width:1.5px!important;box-shadow:1px 2px 0 #172431!important; } body[data-view="commitments"] .essentials-list>.row.essentials-reserved{border-width:2px!important;} .essential-modal-heading, #payment-form .essential-group, #payment-form .essential-suggestions button, #payment-form .actions button{ border-width:2px!important;box-shadow:1px 2px 0 #172431!important; } #payment-form input,#payment-form select,#payment-form textarea{border-width:2px!important;box-shadow:none!important;} /* Keep the popup panel itself from casting a heavy doubled comic edge. */ .modal:has(#payment-form),dialog:has(#payment-form),[role="dialog"]:has(#payment-form){border-width:2px!important;box-shadow:2px 3px 0 #172431!important;} /* v76: one coherent fine-line treatment for the Essentials chapter. */ body[data-view="commitments"] #main>h1.essentials-heading{ display:flex!important;align-items:center!important;justify-content:center!important; width:min(100%,560px)!important;max-width:100%!important; min-height:108px!important;margin:0 auto 12px!important; padding:22px 35px!important;background:transparent url('./comic-burst.svg') center/100% 100% no-repeat!important; border:0!important;box-shadow:none!important;outline:0!important; transform:none!important;filter:none!important; } body[data-view="commitments"] .essentials-family-panel{ border:1.5px solid #172431!important;box-shadow:none!important;margin-top:0!important; } body[data-view="commitments"] #main>.essentials-intro{ border:1.5px solid #172431!important;border-top:0!important; box-shadow:none!important;padding:15px 12px 21px!important;margin-bottom:20px!important; } body[data-view="commitments"] .essentials-comic-bubble{border:1.5px solid #172431!important;box-shadow:none!important;} body[data-view="commitments"] #main>.card.essentials-list{ border:1.5px solid #172431!important;box-shadow:none!important; } body[data-view="commitments"] .essentials-list>.row, body[data-view="commitments"] .essentials-list>.row.essentials-reserved{ border:1.5px solid #172431!important;box-shadow:none!important; } body[data-view="commitments"] .essentials-list>.row .actions button, body[data-view="commitments"] #add-payment.essentials-add{ border:1.5px solid #172431!important;box-shadow:1px 1px 0 #172431!important; } body[data-view="commitments"] nav button{border-width:1.5px!important;box-shadow:1px 1px 0 #172431!important;} body[data-view="commitments"] nav button.active{outline-width:1.5px!important;box-shadow:none!important;} .essential-modal-heading,#payment-form .essential-group, #payment-form .essential-suggestions button,#payment-form .actions button{ border-width:1.5px!important;box-shadow:1px 1px 0 #172431!important; } #payment-form input,#payment-form select,#payment-form textarea{ border-width:1.5px!important;box-shadow:none!important; } .modal:has(#payment-form),dialog:has(#payment-form),[role="dialog"]:has(#payment-form){ border-width:1.5px!important;box-shadow:none!important; } /* v77: render the burst as an independent decoration, not a bordered heading box. This removes Safari's stray bottom/right hairline around the heading. */ body[data-view="commitments"] #main>h1.essentials-heading{ position:relative!important;isolation:isolate!important; background:none!important;background-image:none!important; border:none!important;outline:none!important;box-shadow:none!important; filter:none!important;clip-path:none!important; overflow:visible!important; } body[data-view="commitments"] #main>h1.essentials-heading::before{ content:""!important;display:block!important;position:absolute!important; inset:0!important;z-index:-1!important;pointer-events:none!important; background:url('./comic-burst.svg') center/100% 100% no-repeat!important; border:0!important;outline:0!important;box-shadow:none!important; } body[data-view="commitments"] #main>h1.essentials-heading::after{content:none!important;display:none!important;} /* v78: focused iPhone tidy-up for Add an Essential only. */ dialog:has(#payment-form){ width:min(94vw,540px)!important;max-height:calc(100dvh - 72px)!important; padding:18px 18px 22px!important;overflow-y:auto!important; overscroll-behavior:contain;scroll-padding-bottom:30px; } .essential-modal-heading{padding:10px 12px!important;margin-bottom:9px!important;line-height:1.15!important;} .essential-modal-intro{margin:0 0 8px!important;line-height:1.3!important;} #payment-form{padding-bottom:12px;} #payment-form>label:not(.check){display:block;margin:12px 0 5px!important;} #payment-form>input,#payment-form>select{margin-top:0!important;margin-bottom:7px!important;} #payment-form>.muted{margin:9px 0!important;line-height:1.4!important;} #payment-form .essential-groups{gap:8px!important;margin:9px 0!important;} #payment-form .essential-group{padding:10px!important;} #payment-form .essential-group h3{margin:0 0 8px!important;} #payment-form .essential-suggestions{gap:6px!important;margin:0!important;} #payment-form .essential-suggestions button{padding:7px 9px!important;font-size:.88rem!important;line-height:1.2!important;} #payment-form .actions{margin-top:12px!important;padding-bottom:6px!important;gap:9px!important;} #payment-form .actions button{padding:10px 12px!important;} @media(max-width:400px){dialog:has(#payment-form){padding:14px 14px 20px!important;}#payment-form .essential-suggestions button{padding:7px 8px!important;}} /* v79: keep the actual form accessible; optional suggestions expand only on demand. */ dialog:has(#payment-form){max-height:min(86dvh,780px)!important;overflow-y:auto!important;padding:16px 17px 18px!important;scrollbar-gutter:stable;} #payment-form .essential-pick-details{margin:8px 0 12px;border:2px solid #172431;border-radius:9px;background:#fff0bd;padding:3px 10px 7px;} #payment-form .essential-pick-details>summary{cursor:pointer;font:700 .96rem/1.3 var(--comic-letter);padding:10px 2px;list-style-position:inside;} #payment-form .essential-pick-details[open]>summary{border-bottom:1px solid #172431;margin-bottom:8px;} #payment-form .essential-pick-details>.muted{margin:8px 0!important;} #payment-form .essential-pick-details .essential-groups{margin:8px 0!important;} #payment-form .actions{position:sticky;bottom:-18px;z-index:2;background:#fff9e9;border-top:1px solid #172431;padding:12px 0 max(10px,env(safe-area-inset-bottom))!important;margin:12px 0 0!important;} #payment-form .actions button{min-height:44px;} @media(max-width:400px){dialog:has(#payment-form){padding:12px 12px 15px!important;}#payment-form .actions{bottom:-15px;}} /* v81: suggestions open in a separate chooser, never displacing payment fields. */ dialog:has(#payment-form){position:relative!important;overflow-y:auto!important;} #payment-form .essential-ideas-trigger{width:100%;text-align:left;background:#fff0bd;color:#172431;border:1.5px solid #172431;box-shadow:none;border-radius:10px;padding:13px 12px;margin:9px 0 12px;font-weight:700;} #payment-form .essential-ideas-overlay[hidden]{display:none!important;} #payment-form .essential-ideas-overlay{position:absolute;inset:0;z-index:15;background:#fff9e9;overflow-y:auto;padding:18px 15px 24px;border-radius:10px;} #payment-form .essential-ideas-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;color:#172431;} #payment-form .essential-ideas-top button{background:#ffe070;border:1.5px solid #172431;border-radius:8px;padding:9px 12px;color:#172431;} #payment-form .essential-ideas-overlay .essential-group{margin:10px 0!important;} #payment-form .essential-ideas-overlay .essential-suggestions button{min-height:42px;} /* v82: fine outline for the chooser instruction bubble. */ #payment-form .essential-ideas-overlay .comic-directive{ background-image:url('./comic-essential-directive.svg')!important; } /* v83: oval chooser speech bubble with room for its joined tail. */ #payment-form .essential-ideas-overlay .comic-directive{ padding:30px 32px 46px!important; } /* v84: use the established action yellow for the invitation to browse ideas. */ #payment-form .essential-ideas-trigger{background:#ffe070!important;} /* v85: let the oval grow naturally with wrapped text, with generous inner space. */ body[data-view="commitments"] #payment-form #essential-ideas-overlay > p.comic-directive{ width:100%!important;max-width:100%!important;min-width:0!important; background:#ffdf65!important;background-image:none!important; border:1.5px solid #172431!important;border-radius:50% / 30%!important; padding:30px 34px 34px!important;margin:10px 0 34px!important; text-align:center!important;line-height:1.4!important;box-shadow:none!important; } body[data-view="commitments"] #payment-form #essential-ideas-overlay > p.comic-directive::after{ content:""!important;display:block!important;position:absolute!important; left:38px!important;right:auto!important;bottom:-22px!important; width:34px!important;height:27px!important;z-index:1!important; border:0!important;transform:none!important; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 27'%3E%3Cpath d='M2 0 L33 0 L3 25 Z' fill='%23ffdf65'/%3E%3Cpath d='M2 0 L3 25 L33 0' fill='none' stroke='%23172431' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important; } body[data-view="commitments"] #payment-form button#essential-ideas-open.essential-ideas-trigger{ background:#ffe06c!important;background-image:none!important;opacity:1!important; padding:16px 14px!important;line-height:1.4!important; } /* v86: Month and Savings share the approved fine-line chapter design. */ body:is([data-view="month"],[data-view="savings"]){--chapter-ink:#172431;--chapter-yellow:#ffe06c;} body:is([data-view="month"],[data-view="savings"]) #main>h1{ background:#8edaf1!important;background-image:none!important;filter:none!important; border:1.5px solid var(--chapter-ink)!important;box-shadow:1px 1px 0 var(--chapter-ink)!important; border-radius:0!important;transform:none!important;min-height:0!important; padding:18px 16px!important;margin:18px 0!important; font:800 clamp(1.4rem,6vw,2rem)/1.25 var(--comic-letter)!important;text-align:center; } body[data-view="savings"] #main>h1{background:#cdebdc!important;} body:is([data-view="month"],[data-view="savings"]) #main>h1::before, body:is([data-view="month"],[data-view="savings"]) #main>h1::after{display:none!important;} body:is([data-view="month"],[data-view="savings"]) #main>.card{ background:#fff9e9!important;border:1.5px solid var(--chapter-ink)!important; box-shadow:none!important;border-radius:10px!important;padding:16px!important;margin:0 0 20px!important; } body:is([data-view="month"],[data-view="savings"]) #main>.card>h2{ background:#f8cdbf!important;border:1.5px solid var(--chapter-ink)!important; padding:12px!important;margin:0 0 16px!important;font:800 1.12rem/1.35 var(--comic-letter)!important; box-shadow:none!important;border-radius:6px!important; } body:is([data-view="month"],[data-view="savings"]) #main .row{ background:#e4f4f9!important;border:1.5px solid var(--chapter-ink)!important; box-shadow:none!important;padding:14px!important;gap:12px!important;border-radius:6px!important; } body:is([data-view="month"],[data-view="savings"]) #main p{line-height:1.5!important;} body:is([data-view="month"],[data-view="savings"]) #main button:not(.link), body:is([data-view="month"],[data-view="savings"]) #dialog button:not(.danger){ background:#ffe06c!important;background-image:none!important;color:#172431!important; border:1.5px solid #172431!important;box-shadow:1px 1px 0 #172431!important; border-radius:8px!important;padding:12px 14px!important;min-height:44px; white-space:normal!important;line-height:1.35!important;font-family:var(--comic-letter)!important; } body:is([data-view="month"],[data-view="savings"]) #main button.full{margin:10px 0!important;} body:is([data-view="month"],[data-view="savings"]) nav button{border-width:1.5px!important;box-shadow:1px 1px 0 #172431!important;} body:is([data-view="month"],[data-view="savings"]) nav button.active{outline-width:1.5px!important;box-shadow:none!important;} body:is([data-view="month"],[data-view="savings"]) dialog{ width:min(94vw,540px)!important;max-height:86dvh!important;overflow-y:auto!important; padding:18px!important;background:#fff9e9!important;border:1.5px solid #172431!important;box-shadow:none!important; overscroll-behavior:contain;scroll-padding-bottom:24px; } body:is([data-view="month"],[data-view="savings"]) #dialog-content>h2{ background:#8edaf1!important;border:1.5px solid #172431!important; padding:12px!important;line-height:1.3!important;font-family:var(--comic-letter)!important; } body:is([data-view="month"],[data-view="savings"]) #dialog input, body:is([data-view="month"],[data-view="savings"]) #dialog select{border-width:1.5px!important;box-shadow:none!important;} body:is([data-view="month"],[data-view="savings"]) #dialog .actions{display:flex;flex-wrap:wrap;gap:10px;} body:is([data-view="month"],[data-view="savings"]) :is(#main,#dialog) :is(.comic-speech,.comic-directive){ background:#ffe06c!important;background-image:none!important;border:1.5px solid #172431!important; border-radius:50% / 25%!important;box-shadow:none!important;transform:none!important; padding:28px 30px!important;text-align:center!important;line-height:1.45!important; width:100%!important;max-width:100%!important;min-width:0!important;margin:16px 0 24px!important; } body:is([data-view="month"],[data-view="savings"]) :is(#main,#dialog) .comic-speech{background:#bfeaf8!important;} @media(max-width:380px){ body:is([data-view="month"],[data-view="savings"]) #main>.card{padding:13px!important;} body:is([data-view="month"],[data-view="savings"]) :is(#main,#dialog) :is(.comic-speech,.comic-directive){padding:26px 24px!important;} } /* v87: one Home comic font across every app surface and control. */ :root,body{font-family:var(--comic-letter)!important;} body :is(header,nav,#main,#dialog,#toast,.backup-tools), body :is(header,nav,#main,#dialog,#toast,.backup-tools) *{ font-family:var(--comic-letter)!important; } body :is(input,textarea,select,option,button,summary){font-family:var(--comic-letter)!important;} body :is(input,textarea)::placeholder{font-family:var(--comic-letter)!important;} /* Allow longer comic text to wrap cleanly without reducing its size. */ body :is(#main,#dialog) :is(p,label,small,.muted,.description,button){overflow-wrap:break-word;} body :is(#main,#dialog) :is(input,textarea,select){font-size:max(16px,1rem);} /* v88: lower the weekly text only, preserving the calendar artwork. */ body[data-view="home"] .comic-budget-panels .week-card :is(h2,strong,small){ top:10px!important; } body[data-view="home"] .comic-budget-panels .week-card{overflow:visible!important;} /* v89: welcome-tour panels, confirmations and Savings follow the fine-line comic style. */ body .setup-guide{ background:#fff0bd!important;border:1.5px solid #172431!important; border-radius:0!important;box-shadow:none!important;padding:18px!important; } body .setup-guide .guide-actions button, body #dialog .actions button{ border:1.5px solid #172431!important;border-radius:4px!important; box-shadow:1px 1px 0 #172431!important;white-space:normal!important; } body .setup-guide .guide-actions button{background:#ffe06c!important;color:#172431!important;} body #dialog{ border:1.5px solid #172431!important;border-radius:0!important; box-shadow:none!important;padding:18px!important; } body:is([data-view="month"],[data-view="savings"]) #main>.card, body:is([data-view="month"],[data-view="savings"]) #main>.card>h2, body:is([data-view="month"],[data-view="savings"]) #main .row{border-radius:0!important;} body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive), body .setup-guide>h2, body[data-view="commitments"] .essentials-comic-bubble{ background-color:transparent!important;background-image:url('./comic-tour-speech.svg')!important; background-repeat:no-repeat!important;background-size:100% 100%!important; border:0!important;border-radius:0!important;box-shadow:none!important; transform:none!important;display:block!important;box-sizing:border-box!important; width:100%!important;max-width:100%!important;min-width:0!important; padding:24px 28px 47px!important;margin:10px 0 12px!important; text-align:center!important;line-height:1.4!important;overflow:visible!important; } body :is(.setup-guide,#dialog-content) .comic-directive{ background-image:url('./comic-tour-directive.svg')!important; } body[data-view="commitments"] .essentials-comic-bubble{margin:0!important;padding:27px 25px 48px!important;} body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive)::before, body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive)::after, body .setup-guide>h2::before,body .setup-guide>h2::after, body[data-view="commitments"] .essentials-comic-bubble::before, body[data-view="commitments"] .essentials-comic-bubble::after{content:none!important;display:none!important;} @media(max-width:380px){ body .setup-guide{padding:14px!important;} body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive), body .setup-guide>h2{padding:22px 22px 43px!important;} } /* Reserve clear space inside long balloons, above the tail. */ body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive), body .setup-guide>h2{padding:30px 35px 65px!important;} body .setup-guide>p.comic-directive{font-size:1rem!important;} body[data-view="commitments"] .essentials-comic-bubble{padding:34px 32px 76px!important;} body #dialog #dialog-content :is(.comic-speech,.comic-directive){ background:transparent url('./comic-tour-speech.svg') center/100% 100% no-repeat!important; border:0!important;border-radius:0!important;box-shadow:none!important; padding:30px 35px 65px!important; } body #dialog #dialog-content .comic-directive{ background-image:url('./comic-tour-directive.svg')!important; } body #dialog #dialog-content :is(.comic-speech,.comic-directive){ font-size:1rem!important;padding:42px 46px 80px!important; } /* v90: Home's exact oval/tail construction on the newly polished call-outs. */ body :is(.setup-guide,#dialog-content) :is(.comic-speech,.comic-directive), body .setup-guide>h2, body[data-view="commitments"] .essentials-comic-bubble, body #dialog #dialog-content :is(.comic-speech,.comic-directive){ position:relative!important;background:#fffdf5!important;background-image:none!important; border:1.5px solid #172431!important;border-radius:50% / 48%!important; padding:26px 32px!important;margin:16px 0 48px!important; overflow:visible!important;isolation:auto!important; } body :is(.setup-guide,#dialog-content) .comic-directive, body #dialog #dialog-content .comic-directive{background:#ffe06c!important;} body .tour-home-tail{ display:block!important;position:absolute!important;width:40px!important;height:46px!important; left:43px!important;bottom:-34px!important;z-index:20!important;overflow:visible!important; pointer-events:none!important;--tail-fill:#fffdf5; } body .comic-directive>.tour-home-tail{--tail-fill:#ffe06c;} /* No blue autofocus ring on the replay-tour button; keyboard focus uses text emphasis. */ body #dialog #tour-start:focus{outline:none!important;} body #dialog #tour-start:focus-visible{text-decoration:underline;text-underline-offset:4px;} /* Anchor the Home tail on the oval itself, including taller text balloons. */ body .tour-home-tail{left:calc(35% - 20px)!important;bottom:calc(2.2% - 34px)!important;} /* v91: one comic panel and balloon style across setup, pages and dialogs. */ body :is(#main,#dialog-content) :is(.card,.setup-guide,.essential-group,.preview-results>div), body #dialog{ border:1.5px solid #172431!important;box-shadow:none!important;border-radius:0!important; } body :is(#main,#dialog-content) button:not(.link), body :is(#main,#dialog-content) :is(input:not([type="checkbox"]),select,textarea){ border:1.5px solid #172431!important;box-shadow:1px 1px 0 #172431!important; border-radius:4px!important; } body :is(#main,#dialog-content) button:focus{outline:none!important;} body :is(#main,#dialog-content) button:focus-visible{text-decoration:underline;text-underline-offset:4px;} body :is(#main,#dialog-content) :is(input,select,textarea):focus-visible{ outline:2px solid #172431!important;outline-offset:3px!important; } body[data-view] #main .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon, body[data-view] #dialog #dialog-content .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon{ display:block!important;position:relative!important;box-sizing:border-box!important; background:#fffdf5!important;background-image:none!important;color:#172431!important; border:1.5px solid #172431!important;border-radius:50% / 48%!important; box-shadow:none!important;transform:none!important;filter:none!important; padding:26px 32px!important;margin:16px 0 48px!important; width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important; top:auto!important;left:auto!important;right:auto!important;bottom:auto!important; text-align:center!important;line-height:1.4!important;overflow:visible!important;isolation:auto!important; font-family:var(--comic-letter)!important; } body[data-view] #main .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon.comic-directive, body[data-view] #dialog #dialog-content .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon.comic-directive{ background-color:#ffe06c!important; } body[data-view] :is(#main,#dialog-content) .unified-balloon::before, body[data-view] :is(#main,#dialog-content) .unified-balloon::after{ content:none!important;display:none!important; } body .unified-balloon .tour-home-tail{ display:block!important;position:absolute!important;width:40px!important;height:46px!important; left:calc(35% - 20px)!important;bottom:calc(2.2% - 34px)!important;top:auto!important; z-index:20!important;overflow:visible!important;pointer-events:none!important;--tail-fill:#fffdf5; } body .unified-balloon.comic-directive .tour-home-tail{--tail-fill:#ffe06c!important;} body[data-view] #dialog #dialog-content .unified-balloon{font-size:1rem!important;} @media(max-width:380px){ body[data-view] #main .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon, body[data-view] #dialog #dialog-content .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon{ padding:24px 27px!important; } } body[data-view] #main .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon::before, body[data-view] #main .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon::after, body[data-view] #dialog #dialog-content .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon::before, body[data-view] #dialog #dialog-content .unified-balloon.unified-balloon.unified-balloon.unified-balloon.unified-balloon::after{ content:none!important;display:none!important; } /* Fine ink on chapter frames and controls as well as speech balloons. */ body[data-view] #main :is(.card.card.card,.setup-guide.setup-guide,.comic-frame.comic-frame,.comic-money.comic-money,.essential-group.essential-group,.preview-results>div), body[data-view] #dialog #dialog-content :is(.essential-group.essential-group,.preview-results>div){ border:1.5px solid #172431!important;box-shadow:none!important;border-radius:0!important; } body[data-view] #main>h1:not(.essentials-heading){border-width:1.5px!important;box-shadow:none!important;transform:none!important;} body[data-view] #main button:not(.link):not(.link):not(.link), body[data-view] #dialog #dialog-content button:not(.link):not(.link):not(.link){ border:1.5px solid #172431!important;box-shadow:1px 1px 0 #172431!important;border-radius:4px!important; } body[data-view] #main :is(input,select,textarea):not([type="checkbox"]), body[data-view] #dialog #dialog-content :is(input,select,textarea):not([type="checkbox"]){ border:1.5px solid #172431!important;box-shadow:none!important;border-radius:4px!important; } body[data-view] nav button{border-width:1.5px!important;box-shadow:1px 1px 0 #172431!important;} body[data-view] nav button.active{outline:1.5px solid #172431!important;box-shadow:none!important;} /* v92: lower the shared tail 5px so its ink starts at the oval edge. */ body .unified-balloon .tour-home-tail{bottom:calc(2.2% - 39px)!important;} /* v93: greeting above the complete family image; remove the cover portrait. */ body[data-view="home"] .comic-cover::after{content:none!important;display:none!important;} body[data-view="home"] .comic-strip-intro{ min-height:0!important;padding:14px!important;background:#fff9e9!important; display:flex!important;flex-direction:column!important;gap:0!important; } body[data-view="home"] .comic-welcome-family{ display:block;width:100%;height:auto;position:relative;object-fit:contain; border:1.5px solid #172431;box-sizing:border-box; } body[data-view="home"] .comic-account{ width:100%!important;max-width:100%!important;margin:12px 0 0!important; align-self:stretch!important;box-sizing:border-box;justify-content:center!important; } body[data-view] #main .setup-guide>h2.guide-white{background:#fffdf5!important;} body[data-view] #main .setup-guide>p.guide-copy{ background:none!important;border:0!important;border-radius:0!important; box-shadow:none!important;padding:0!important;margin:0 0 16px!important; text-align:left!important;line-height:1.5!important;color:#172431!important; } .setup-budget-step{display:block;margin-top:20px;} /* v95: one uninterrupted lavender weekly panel for translated text. */ body[data-view="home"] .comic-budget-panels .week-card, body[data-view="home"] .comic-budget-panels .week-card::after {background-color:#ded0ef!important;} body[data-view="home"] .comic-budget-panels .week-card{overflow-wrap:anywhere!important;} /* v96: continuous lavender for all of the middle card, including calendar art */ body[data-view="home"] .comic-budget-panels .week-card, body[data-view="home"] .comic-budget-panels .week-card::before, body[data-view="home"] .comic-budget-panels .week-card::after, body[data-view="home"] .comic-budget-panels .week-card .comic-panel-art {background-color:#ded0ef!important;} body[data-view="home"] .comic-budget-panels .week-card .comic-panel-art{background-image:url('./comic-figure-week.svg')!important;} body[data-view="home"] .comic-budget-panels .week-card :is(h2,strong,small){background:transparent!important;} /* v97: image element prevents missing family art when background styles are overridden. */ body[data-view="home"] .comic-scene-spending > img {display:block;width:100%;height:100%;object-fit:cover;object-position:center center;} body[data-view="home"] .comic-scene-spending {overflow:hidden!important;} body[data-view="home"] .comic-details details:not([open]) {min-height:0!important;} body[data-view="home"] .comic-details details[open] {height:auto!important;} body[data-view="home"] .comic-details dl,body[data-view="home"] .comic-details p {overflow-wrap:anywhere;} /* v98: the family illustration is a normal, full-width image, not an absolutely positioned background. Earlier conflicting rules left only its top strip visible. */ body[data-view="home"] .comic-action-scene { display:flex!important;flex-direction:column!important;align-items:stretch!important; justify-content:flex-start!important;gap:16px!important; min-height:0!important;height:auto!important;padding:0 13px 17px!important; background:#f7c8b7!important;overflow:visible!important; } body[data-view="home"] .comic-action-scene .comic-scene-spending { position:relative!important;inset:auto!important;display:block!important; width:calc(100% + 26px)!important;height:auto!important;min-height:0!important; margin:0 -13px 8px!important;overflow:hidden!important; background:none!important;border-bottom:3px solid #172431!important; flex:0 0 auto!important; } body[data-view="home"] .comic-action-scene .comic-scene-spending > img { display:block!important;width:100%!important;height:auto!important; max-height:none!important;object-fit:contain!important;object-position:center!important; } body[data-view="home"] .comic-action-scene .comic-question, body[data-view="home"] .comic-action-scene p { align-self:stretch!important;width:100%!important;max-width:100%!important; margin-left:0!important;margin-right:0!important; } body[data-view="home"] .comic-action-scene .quick-spend{margin-top:4px!important;} /* v100: Home calculation panel fits translated content, open or closed. */ body[data-view="home"] .comic-details {height:auto!important;min-height:0!important;max-height:none!important;padding-bottom:16px!important;} body[data-view="home"] .comic-details details {height:auto!important;min-height:0!important;max-height:none!important;} body[data-view="home"] .comic-details details[open] {padding-bottom:0!important;} body[data-view="home"] .comic-details details:not([open]) {padding-bottom:0!important;} body[data-view="home"] .comic-details dl {margin-bottom:12px!important;} body[data-view="home"] .comic-details p:last-child {margin-bottom:0!important;} /* v101: breathing room for longer translated seven-day headings and captions. Keep the three columns, calendar illustration and financial figures unchanged. */ body[data-view="home"] .comic-budget-panels .week-card{gap:7px!important;} body[data-view="home"] .comic-budget-panels .week-card h2{ font-size:clamp(.78rem,2.95vw,1.05rem)!important; line-height:1.12!important; letter-spacing:-.025em!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:auto; } body[data-view="home"] .comic-budget-panels .week-card small{ font-size:clamp(.66rem,2.35vw,.84rem)!important; line-height:1.18!important; letter-spacing:-.015em!important; overflow-wrap:normal!important; word-break:normal!important; hyphens:auto; } /* v102: multilingual preview labels may wrap without crowding the figures. */ .preview-results small{overflow-wrap:break-word;hyphens:auto;line-height:1.25;min-height:2.5em;display:flex;align-items:center;justify-content:center} .preview-results>div{min-width:0;padding-inline:5px} /* v104: Essentials-only multilingual speech bubble: extra room for German copy. */ body[data-view="commitments"] #main .essentials-comic-bubble{ border-radius:42% / 35%!important; padding:30px 25px 43px!important; font-size:clamp(.87rem,3.35vw,1.02rem)!important; line-height:1.32!important; } body[data-view="commitments"] #main .essentials-comic-bubble p{margin:4px 0 8px!important;} body[data-view="commitments"] #main .essentials-comic-bubble .essentials-tagline{font-size:1.03em!important;} @media(max-width:390px){body[data-view="commitments"] #main .essentials-comic-bubble{padding:26px 22px 42px!important;}} /* v107: accessible, translated backup file chooser */ .restore-picker{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding:.9rem;border:2px solid #172431;border-radius:6px;background:#fffdf8;min-height:4rem} .restore-picker-button{display:inline-block;cursor:pointer;background:#e7e8eb;border-radius:999px;padding:.25rem .8rem;color:#172431;font:inherit;line-height:1.3} .restore-picker-button:focus-within{outline:3px solid #2474ac;outline-offset:3px} .restore-file-native{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip-path:inset(50%)} .restore-picker:focus-within{outline:3px solid #2474ac;outline-offset:2px} #restore-file-name{overflow-wrap:anywhere;min-width:0;flex:1} /* v108: Keep the Backup & Restore file selector compact in every language. Scoped to this dialog only; override inherited comic speech-bubble styles. */ #dialog .restore-picker { display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:.5rem!important; min-height:4rem!important; } #dialog .restore-picker > label.restore-picker-button { display:inline-flex!important; position:static!important; width:auto!important; height:auto!important; flex:0 0 auto!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:.25rem .8rem!important; border:0!important; border-radius:999px!important; background:#e7e8eb!important; color:#172431!important; box-shadow:none!important; transform:none!important; clip-path:none!important; font:inherit!important; font-size:inherit!important; line-height:1.3!important; text-align:center!important; text-decoration:none!important; cursor:pointer!important; } #dialog .restore-picker > label.restore-picker-button::before, #dialog .restore-picker > label.restore-picker-button::after {content:none!important;display:none!important;} #dialog .restore-picker > #restore-file-name { flex:1 1 8rem; min-width:0; overflow-wrap:anywhere; } /* Experimental, non-financial voice helper */ #cs-voice-helper{position:fixed;right:12px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:50;max-width:min(340px,calc(100vw - 24px));font-family:inherit}#cs-voice-open{border-radius:30px;background:#ffdc42;color:#172431;border:2px solid #172431;padding:10px 15px;font-weight:800;box-shadow:2px 3px 0 #172431}#cs-voice-panel{margin-top:8px;padding:14px;border:2px solid #172431;border-radius:16px;background:#fffdf5;color:#172431;box-shadow:3px 4px 0 #172431;max-height:55vh;overflow:auto}#cs-voice-panel[hidden]{display:none}#cs-voice-panel button{margin:4px 2px;padding:8px;font-size:14px}#cs-voice-panel select{display:block;width:100%;margin:6px 0}#cs-voice-panel .cs-voice-choices{display:grid;grid-template-columns:1fr 1fr}#cs-voice-panel .cs-voice-disclaimer{font-size:12px;line-height:1.4}