@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--bg:#f7f7f0;--paper:#fffefa;--ink:#283b31;--muted:#6c756b;--line:#e4e7dd;--olive:#344c3d;--soft:#edf0e5;--lime:#dbe5b2;--clay:#a9684e;--radius:22px;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);background:#e9ece4;font-synthesis:none;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button,a{color:inherit}button{cursor:pointer}button{border:0;background:none}button:disabled{opacity:.5;cursor:default}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #8b9a58;outline-offset:3px}input:focus,select:focus,textarea:focus{outline:2px solid #8b9a58;outline-offset:2px}svg.icon{width:20px;height:20px;display:block;flex-shrink:0;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}.app-shell{max-width:540px;min-height:100dvh;margin:auto;background:var(--bg);position:relative}.app-header{padding:calc(23px + env(safe-area-inset-top)) 25px 18px;display:flex;align-items:center;justify-content:space-between}.brand{font-family:'Manrope',sans-serif;letter-spacing:-1.5px;font-size:29px;font-weight:800;display:flex;align-items:center;gap:7px}.brand-mark{height:32px;width:32px;display:grid;place-items:center;background:var(--olive);border-radius:10px;color:var(--bg)}.brand-mark svg{width:22px;height:22px}.brand-dot{color:var(--clay);margin-left:-7px}.household{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:550;letter-spacing:.1px}.avatars{display:flex;padding-left:4px}.avatars b{display:grid;place-items:center;border:3px solid var(--bg);width:34px;height:34px;border-radius:50%;background:#e4e8d5;font-size:10px;font-weight:600;margin-left:-5px}.avatars b+ b{background:#eeddd1}main{padding:0 24px 120px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:1.65px;line-height:1.6}.icon-button{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:50%;padding:10px}.icon-button:hover{background:#ffffff16}.icon-button svg{width:18px;height:18px}.month-picker{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:500;min-height:44px;padding:0 10px;overflow:hidden}.month-picker svg{width:13px;height:13px;color:var(--muted)}.month-picker input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;font-size:16px}.month-picker input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;cursor:pointer}.month-picker:focus-within{outline:2px solid #8b9a58;border-radius:8px}.demo-banner{margin:17px 0 0;padding:12px 14px;border-radius:14px;background:#f3e4cd;font-size:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;line-height:1.6}.demo-banner button{font-size:11px;text-decoration:underline;min-height:44px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0 17px}.section-heading .eyebrow{color:var(--muted);font-size:8px;letter-spacing:1.5px}.section-heading :is(h1,h2){font-family:'Manrope',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.8px;margin:5px 0 0;display:flex;align-items:center;gap:9px}.section-heading :is(h1,h2)>span{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:0;background:#e9eddf;width:23px;height:23px;display:inline-grid;place-items:center;border-radius:50%}.subtle{background:#eaeede}.subtle:hover{background:#dce3cc}.search-wrap{display:flex;align-items:center;gap:10px;background:#eeefe7;border:1px solid transparent;padding:0 13px;border-radius:13px;color:#89907d;height:45px}.search-wrap svg{width:16px;height:16px}.search-wrap input{width:100%;min-width:0;border:0;background:transparent;height:44px;font-size:16px;color:var(--ink);outline:0}.search-wrap input::placeholder{font-size:12px;color:#747d6c}.search-wrap:focus-within{border-color:#8b9a58}.search-wrap input:focus{outline:0}.search-wrap kbd{font-size:16px;font-family:inherit;opacity:.6}.service-list{border-top:1px solid var(--line)}.service-row{display:flex;width:100%;text-align:left;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);min-height:89px}.service-row:hover .service-name{color:#718241}.service-icon{width:43px;height:46px;border-radius:15px;display:grid;place-items:center;flex-shrink:0;color:#667744;background:#eaf0db}.service-icon svg{width:21px;height:21px}.service-icon.care{background:#e7ede6;color:#5a7868}.service-icon.shopping{background:#f1e8da;color:#9a7753}.service-icon.taxes{background:#ecebe5;color:#797c6b}.service-info{min-width:0;flex:1}.service-name{display:block;font-weight:550;font-size:13px;line-height:1.4}.service-desc{display:block;font-size:10px;color:#727c6c;line-height:1.5;margin-top:3px}.service-money{margin-left:auto;text-align:right;max-width:105px;flex-shrink:0}.service-amount{font-size:12px;font-weight:550;font-variant-numeric:tabular-nums;display:block}.service-status{display:block;margin-top:5px;font-size:9px;line-height:1.4;color:#7a816f}.service-status.paid{color:#526c3f}.service-status.partial{color:#996c36}.row-chevron{color:#a4ac98;width:10px!important;height:15px!important}.section-description{font-size:12px;color:var(--muted);line-height:1.6}.empty-state{text-align:center;padding:38px 15px;line-height:1.6}.empty-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--soft);margin:0 auto 14px}.empty-state h3{font-family:'Manrope',sans-serif;font-size:15px;font-weight:600;margin:10px 0 5px}.empty-state p{font-size:12px;color:var(--muted);margin:0 auto;max-width:260px}.empty-state button{margin-top:16px}.page-footer{text-align:center;padding:34px 8px 0;color:var(--muted)}.footer-flower{display:block;font-size:24px;color:#a5af84}.page-footer p{font-size:11px;line-height:1.8;margin:8px 0 12px}.page-footer strong{font-weight:500;color:#626f56}.text-button{font-size:12px;padding:10px 3px;min-height:44px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c2c9b3}.page-footer .prototype-note{font-size:9px;line-height:1.8;color:#747e6b;margin-top:12px}.bottom-nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,540px);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 25px calc(13px + env(safe-area-inset-bottom));border-top:1px solid #e3e7da;background:#f9faf3f5;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.nav-item{min-width:60px;min-height:47px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;font-size:9px;color:#7b8572}.nav-item.active{color:var(--olive)}.nav-item.active svg{stroke-width:2.1}.nav-item svg{width:20px;height:20px}.pay-button{min-height:47px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:15px;padding:0 15px;background:var(--lime);font-size:11px;font-weight:600;box-shadow:0 3px 8px #6474420a}.pay-button:hover{background:#cddc9b}.pay-button svg{width:17px;height:17px}.history-row{display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--line);padding:18px 0}.history-copy{flex:1;min-width:0}.history-copy strong{font-size:13px;font-weight:550;display:block}.history-copy p{font-size:11px;line-height:1.7;color:var(--muted);margin:4px 0 0}.history-right{text-align:right;font-size:13px;font-weight:550}.history-right time{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:5px}.history-tag{display:inline-block;background:var(--soft);padding:3px 7px;border-radius:5px;margin-top:6px;font-size:9px;color:#657450}.remove-payment{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:44px;font-size:10px;color:#8b6e5c;margin-left:auto}.remove-payment svg{width:13px;height:13px}.sheet{padding:0;border:0;color:var(--ink);background:var(--bg);width:100%;max-width:540px;max-height:calc(100dvh - env(safe-area-inset-top));height:calc(100dvh - env(safe-area-inset-top));margin:auto auto 0;border-radius:26px 26px 0 0;box-shadow:0 -12px 70px #152b2426;overscroll-behavior:contain}.sheet::backdrop{background:#142c2773;backdrop-filter:blur(3px)}.sheet-handle{width:34px;height:4px;background:#cdd4c2;border-radius:4px;margin:11px auto 0}.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:11px 21px 14px;gap:12px;border-bottom:1px solid var(--line)}.sheet-header h2{font-size:16px;font-weight:600;letter-spacing:-.3px;margin:0}.sheet-header .icon-button{background:var(--soft)}.sheet-body{padding:24px 24px calc(30px + env(safe-area-inset-bottom))}.detail-hero{display:flex;align-items:center;gap:14px;margin-bottom:24px}.detail-hero .service-icon{width:58px;height:62px;border-radius:20px}.detail-hero .service-icon svg{width:29px;height:29px}.detail-hero h3{font-family:Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.6px;margin:0 0 4px;line-height:1.15;overflow-wrap:anywhere}.detail-hero p{font-size:12px;line-height:1.5;color:var(--muted);margin:0}.detail-amount{padding:19px 20px;border-radius:17px;background:var(--soft);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.detail-amount span{font-size:11px;color:#657450;display:block}.detail-amount strong{display:block;font-family:'Manrope',sans-serif;font-size:25px;font-weight:500;letter-spacing:-.7px;margin-top:7px}.small-action{display:flex;align-items:center;gap:5px;font-size:11px;min-height:44px;text-decoration:underline;text-underline-offset:4px}.small-action svg{width:14px;height:14px}.primary{background:var(--olive);color:var(--bg);border-radius:14px;min-height:51px;padding:14px 18px;display:flex;justify-content:center;align-items:center;gap:8px;font-weight:550;font-size:13px}.primary:hover{background:#45624d}.primary svg{width:18px;height:18px}.wide{width:100%}.secondary{background:var(--soft);color:var(--ink);border-radius:13px;min-height:48px;padding:12px 16px;font-size:12px;display:flex;justify-content:center;align-items:center;gap:8px}.detail-section{margin-top:27px}.detail-section h3{font-size:14px;font-weight:550;margin:0 0 13px}.detail-fields{margin:0}.detail-fields>div{padding:13px 0;border-bottom:1px solid var(--line);display:flex;gap:15px;justify-content:space-between;font-size:12px;line-height:1.6}.detail-fields dt{color:var(--muted)}.detail-fields dd{text-align:right;margin:0;max-width:60%;overflow-wrap:anywhere}.detail-fields a{text-decoration:underline;text-underline-offset:3px}.not-set{color:#7b846f;font-style:normal}.edit-details{margin-top:15px}.detail-note{font-size:10px;line-height:1.7;color:var(--muted);margin:16px 0}.form-intro{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field.full{grid-column:1/-1}.field>span{font-size:12px;font-weight:500}.field small{font-size:10px;color:var(--muted);line-height:1.6}.field input,.field select,.field textarea{width:100%;min-width:0;max-width:100%;height:49px;border:1px solid #dce2d2;border-radius:12px;background:var(--paper);padding:11px 12px;color:var(--ink);font-size:16px}.field input[type=date],.field input[type=month]{display:block;-webkit-appearance:none;appearance:none}.field textarea{min-height:85px;resize:vertical}.field .amount-input{font-size:27px;height:63px;letter-spacing:-1px}.form-grid .primary{margin-top:8px}.payer-options{display:flex;gap:10px}.payer-choice{flex:1;position:relative}.payer-choice input{position:absolute;opacity:0;width:100%;height:100%;margin:0;inset:0;cursor:pointer}.payer-choice>span{display:flex;align-items:center;gap:9px;justify-content:center;min-height:49px;border:1px solid #dce2d2;border-radius:12px;font-size:13px;background:var(--paper)}.payer-choice input:checked+span{background:#e4ebd4;border-color:#82945f}.payer-choice input:focus-visible+span{outline:2px solid #82945f;outline-offset:2px}.payer-choice b{font-size:10px;display:grid;place-items:center;width:24px;height:24px;background:var(--soft);border-radius:50%}.form-error{font-size:12px;line-height:1.6;color:#a04430;background:#fae8de;padding:12px 14px;border-radius:10px;margin:0}.form-note{font-size:10px;color:var(--muted);line-height:1.7;text-align:center;margin:0}.success-check{background:#e7eed9;border-radius:50%;width:75px;height:75px;display:grid;place-items:center;margin:20px auto;color:var(--olive)}.success-check svg{width:35px;height:35px}.success{text-align:center;padding:16px 0}.success h3{font-family:Georgia,serif;font-size:32px;font-weight:400;letter-spacing:-1px;margin:20px 0 12px}.success p{font-size:13px;color:var(--muted);line-height:1.8}.success .primary{margin-top:30px}.success .secondary{margin-top:12px;width:100%}#toast{position:fixed;z-index:100;bottom:calc(93px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,20px);width:max-content;max-width:calc(100% - 35px);padding:13px 20px;border-radius:14px;background:#283b31;color:#fffef4;font-size:12px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 4px 20px #10201820}#toast.visible{opacity:1;transform:translate(-50%,0)}.storage-warning{padding:12px;background:#fae8de;color:#8e4130;font-size:12px;line-height:1.6}.sheet[open]{animation:sheet-in .22s ease-out}@keyframes sheet-in{from{transform:translateY(50px);opacity:.5}to{transform:translateY(0);opacity:1}}@media(min-width:600px){.app-shell{box-shadow:0 0 70px #23382c0b}.app-header{padding-top:27px}.sheet{height:min(850px,calc(100dvh - 30px));max-height:calc(100dvh - 30px);margin:auto;border-radius:26px}.service-row{padding:20px 0}.service-name{font-size:14px}.service-desc{font-size:11px}}@media(max-width:375px){main{padding-left:19px;padding-right:19px}.app-header{padding-left:19px;padding-right:19px}.service-row{gap:9px}.service-icon{width:38px;height:43px}.bottom-nav{padding-left:18px;padding-right:18px}.household{gap:5px}.service-money{max-width:89px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Mobile rhythm: leave room for services in the first screen. */
@media(max-width:599px){.app-header{padding-top:calc(17px + env(safe-area-inset-top));padding-bottom:12px}.section-heading{margin:24px 0 14px}.section-heading .eyebrow{font-size:9px}.service-row{min-height:83px;padding:15px 0}.service-name{font-size:14px}.service-desc{font-size:11px}.service-status{font-size:10px}.service-amount{font-size:13px}.service-money{max-width:106px}.nav-item{font-size:10px}.pay-button{font-size:12px}.eyebrow{letter-spacing:1.3px}.demo-banner{margin-top:13px;padding:9px 12px}.demo-banner br{display:none}.demo-banner b{display:block}.page-footer .prototype-note{font-size:10px}.field small,.form-note,.detail-note{font-size:11px}}

/* Optional bank account: one quiet row until its details are needed. */
.bank-details{border-bottom:1px solid var(--line)}
.bank-details summary,.bank-fields summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;cursor:pointer;list-style:none;font-size:12px;line-height:1.6}
.bank-details summary::-webkit-details-marker,.bank-fields summary::-webkit-details-marker{display:none}
.bank-details summary>span:first-child{color:var(--muted)}
.bank-summary{display:flex;align-items:center;justify-content:flex-end;gap:8px;text-align:right;max-width:60%;overflow-wrap:anywhere}
.bank-summary svg,.bank-fields summary>svg{width:15px;height:15px;flex-shrink:0;transition:transform .15s}
.bank-details[open] .bank-summary svg,.bank-fields[open] summary>svg{transform:rotate(180deg)}
.bank-details .detail-fields{padding:0 12px 8px;background:var(--soft);border-radius:12px;margin-bottom:12px}
.bank-details .detail-fields>div:last-child{border-bottom:0}
.bank-number{font-variant-numeric:tabular-nums;user-select:all}
.bank-fields{padding:0 14px;border:1px solid var(--line);border-radius:14px}
.bank-fields summary{font-weight:500;min-height:52px}
.bank-fields summary small{font-weight:400}
.bank-fields>.form-grid{padding:0 0 18px}
.bank-help{font-size:11px;color:var(--muted);line-height:1.7;margin:0}
.bank-details summary:focus-visible,.bank-fields summary:focus-visible{outline:2px solid #8b9a58;outline-offset:3px;border-radius:8px}

.period-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.period-toolbar .icon-button:hover{background:var(--soft)}

/* All services share one directory; cadence stays visible on each row. */
#service-list{margin-top:14px}





.service-frequency{font-size:10px;line-height:1.5;color:var(--muted);padding:5px 8px;border-radius:7px;background:var(--soft);max-width:92px;text-align:center;flex-shrink:0}
#payments-view .period-toolbar{margin-top:8px}
#payments-list .empty-state .primary{margin-left:auto;margin-right:auto}

/* Continuous payment feed and shared balance. */
.payment-balance{background:#e9eedf;border:1px solid #dfe6d3;border-radius:20px;padding:19px 18px;margin:19px 0 25px}
.balance-currency+.balance-currency{border-top:1px solid #d2dbc6;margin-top:18px;padding-top:18px}
.balance-label{font-size:12px;font-weight:550;color:#526448;line-height:1.6}
.balance-amount{display:block;font-family:'Manrope',sans-serif;font-size:30px;letter-spacing:-1px;line-height:1.4;margin:5px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.balance-breakdown>p,.balance-empty p{font-size:12px;line-height:1.65;color:var(--muted);margin:4px 0 15px}
.balance-totals{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.balance-totals span{font-size:11px;color:var(--muted)}.balance-totals strong{display:block;font-size:13px;color:var(--ink);margin-top:4px;font-weight:550;overflow-wrap:anywhere}
.payment-balance .balance-note{font-size:10px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.balance-empty strong{font-size:15px;font-weight:550}.balance-empty p{margin-bottom:0}
.feed-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}.feed-heading h2{font-size:14px;font-weight:550;margin:0}.feed-heading>span{font-size:10px;color:var(--muted);text-align:right}
.payer-tag{display:inline-block;border-radius:6px;font-size:10px;padding:4px 7px;margin-top:6px}.payer-nacho{background:#e4e8d5;color:#50633b}.payer-ale{background:#eeddd1;color:#795e48}
#payments-list .history-right{max-width:110px;overflow-wrap:anywhere}#payments-list .history-right time{line-height:1.5}
.payments-more{padding-top:19px}.payments-progress{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:15px 0 0}

.balance-details{margin-top:8px;border-top:1px solid #d2dbc6}
.balance-details summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;font-size:12px;font-weight:550;color:#526448}
.balance-details summary::-webkit-details-marker{display:none}.balance-details summary .icon{width:15px;height:15px}
.balance-details .balance-less-label{display:none}.balance-details[open] .balance-more-label{display:none}.balance-details[open] .balance-less-label{display:inline}.balance-details[open] summary .icon{transform:rotate(180deg)}
.balance-details summary:focus-visible{outline:2px solid #8b9a58;outline-offset:2px;border-radius:5px}
.balance-breakdown h2{font-size:12px;font-weight:600;margin:5px 0 8px}.balance-breakdown+.balance-breakdown{margin-top:18px;padding-top:13px;border-top:1px solid #d2dbc6}

.payment-actions{display:flex;flex-direction:column;align-items:center;gap:5px;margin:-9px 0 23px}.payment-actions:has([hidden]+[hidden]){display:none}.settled-summary{display:flex;align-items:center;gap:12px;padding:4px 0 10px}.settled-summary strong{font-size:19px;font-weight:550;letter-spacing:-.5px}.settled-check{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#d9e4c8;color:var(--olive)}.settlement-totals{margin-top:15px}.settlement-preview{font-size:12px;line-height:1.65;padding:13px;border-radius:12px;background:var(--soft);margin:0}.settlement-icon{background:#e4e8d5;color:#526448}

.receipt-picker{position:relative;display:block;border:1px dashed #b6c4a2;border-radius:13px;background:var(--soft);overflow:hidden}.receipt-picker>span{display:flex;align-items:center;justify-content:center;gap:8px;min-height:49px;font-size:12px}.receipt-picker input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}.receipt-picker:focus-within{outline:2px solid #8b9a58;outline-offset:2px}.receipt-selection{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:11px;line-height:1.5}.receipt-selection>span{overflow-wrap:anywhere;min-width:0}.receipt-selection button{flex-shrink:0;font-size:11px}.receipt-link{display:flex;align-items:center;gap:5px;min-height:44px;text-decoration:underline;text-underline-offset:3px;font-size:11px;padding:7px 0;color:var(--olive);text-align:left}.receipt-link .icon{width:14px;height:14px}.receipt-name{font-size:14px;font-weight:550;overflow-wrap:anywhere;margin:0}.receipt-actions{display:flex;gap:10px;margin:18px 0}.receipt-actions a{flex:1}.receipt-image{display:block;max-width:100%;height:auto;border-radius:10px;margin:auto}.receipt-pdf{display:block;width:100%;height:60dvh;border:1px solid var(--line);border-radius:10px;background:white}

.identifier-fields{margin:2px 0;padding:17px 14px;border:1px solid var(--line);border-radius:14px;gap:16px}.identifier-fields legend{font-size:12px;font-weight:550;padding:0 5px}.service-identifier dd{font-variant-numeric:tabular-nums;white-space:pre-wrap}

/* Calendar: the effective payment date, including closed cycles. */
.bottom-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-left:14px;padding-right:14px;gap:6px}
.bottom-nav .nav-item{min-width:0;font-size:10px}
.bottom-nav .pay-button{flex-direction:column;gap:4px;padding:7px 3px;font-size:10px;line-height:1.3;min-height:54px}
.calendar-card{border:1px solid var(--line);border-radius:22px;padding:12px;background:var(--paper);margin:20px 0 25px}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:16px}
.calendar-month-picker{position:relative;font-size:15px;font-weight:600;min-width:0;text-align:center;padding:12px 4px}
.calendar-month-picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.calendar-month-picker:focus-within{outline:2px solid #8b9a58;border-radius:8px}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}
.calendar-weekdays{font-size:11px;color:var(--muted);padding-bottom:8px}
.calendar-grid{row-gap:5px}
.calendar-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:44px;border-radius:12px;font-size:13px;position:relative;padding:5px 0}
.calendar-day.is-today>span:first-child{text-decoration:underline;text-underline-offset:4px}
.calendar-day:hover{background:var(--soft)}
.calendar-day[aria-pressed=true]{background:var(--olive);color:var(--paper)}
.calendar-dot{width:5px;height:5px;border-radius:50%;background:transparent}
.calendar-dot.has-payments{background:var(--olive)}
.calendar-day[aria-pressed=true] .has-payments{background:var(--lime)}
.calendar-legend{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--muted);font-size:10px;margin:16px 0 3px}
.calendar-legend>span{width:5px;height:5px;border-radius:50%;background:var(--olive)}
.calendar-day-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.calendar-day-heading h2{font-size:14px;font-weight:550;margin:0}.calendar-day-heading>span{font-size:11px;color:var(--muted);white-space:nowrap}
.calendar-empty{font-size:12px;color:var(--muted);line-height:1.7;padding:22px 16px;border-radius:15px;background:var(--soft);text-align:center}
.calendar-payment{display:flex;align-items:center;text-align:left;gap:10px;width:100%;padding:17px 0;border-bottom:1px solid var(--line)}
.calendar-payment-copy{flex:1;min-width:0}.calendar-payment-copy strong{display:block;font-size:13px;font-weight:550;overflow-wrap:anywhere}.calendar-payment-copy>span{display:block;font-size:11px;color:var(--muted);margin-top:6px}
.calendar-payment-amount{font-size:13px;font-weight:550;max-width:30%;overflow-wrap:anywhere}.calendar-payment .row-chevron{flex-shrink:0;width:12px;height:12px}
.calendar-payment .service-icon{width:38px;height:43px;flex-shrink:0}

#calendar-month-label{display:block}#calendar-month-label::first-letter{text-transform:uppercase}

/* Screen-first views: paginate content instead of hiding overflowing data. */
.app-header{gap:8px}.app-info{margin-left:auto;font-family:Georgia,serif;font-size:16px;color:var(--muted);min-width:44px;min-height:44px}
body:not([data-view=payments]) .app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column}
body:not([data-view=payments]) .app-header{flex:none;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:7px}
body:not([data-view=payments]) main{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:0}
body:not([data-view=payments]) .bottom-nav{position:static;transform:none;flex:none;margin-top:8px}
body:not([data-view=payments]) .section-heading{margin:10px 0 12px;flex:none}
body:not([data-view=payments]) .demo-banner{margin:0 0 8px;padding:4px 10px;flex:none}
#services-view:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
#services-view .search-wrap{flex:none}
#service-list{flex:1;min-height:0;margin-top:10px}
#service-list .service-row{padding:12px 0;min-height:76px}
.service-name,.service-desc{overflow-wrap:anywhere}
.list-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;flex:none;padding:2px 0}
.list-pagination>span{font-size:11px;color:var(--muted);text-align:center}
#calendar-view .calendar-card{margin:0 0 10px;padding:10px}
#calendar-view .calendar-toolbar{margin-bottom:6px}
#calendar-view .calendar-grid{row-gap:2px}
#calendar-view .calendar-legend{margin:8px 0 2px}
#calendar-view .calendar-empty{margin:0;padding:8px;line-height:1.5}
.calendar-day-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--soft);border-radius:14px;padding:10px 12px;min-height:56px}
.calendar-day-summary strong{font-size:12px;font-weight:550}.calendar-day-summary small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.calendar-day-summary>span:last-child{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}.calendar-day-summary svg{width:14px;height:14px}
.calendar-payment{min-height:76px}.history-copy{min-width:0;overflow-wrap:anywhere}.sheet-body{min-width:0}.sheet .detail-amount strong{overflow-wrap:anywhere}
@media(max-height:700px){body:not([data-view=payments]) .app-header{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:2px}body:not([data-view=payments]) .section-heading{margin:4px 0 8px}body:not([data-view=payments]) .section-heading .eyebrow{display:none}}

/* One global action, independent of the three navigation destinations. */
/* 47px touch targets + 4px above/below + 1px border; iOS safe area stays separate. */
:root{--nav-height:56px}
.bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr));height:calc(var(--nav-height) + env(safe-area-inset-bottom));padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
body:not([data-view=payments]) .bottom-nav{margin-top:0}
body:not([data-view=payments]) main{padding-bottom:72px}
body[data-view=payments] main{padding-bottom:calc(var(--nav-height) + 90px + env(safe-area-inset-bottom))}
.floating-pay{position:fixed;z-index:11;right:max(20px,calc((100vw - 540px)/2 + 20px));bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px);width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;font-size:12px;box-shadow:0 5px 18px #344c3d24;border:1px solid #cddba2;gap:8px}
body:has(.sheet[open]) .floating-pay{visibility:hidden}
#toast{bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + 74px)}
/* Short viewports keep the six-week grid clear of the global action.
   A marked day already opens its payments directly. */
@media(max-height:700px){
  #calendar-day-payments{display:none}
  #calendar-view .calendar-card{padding:6px}
  #calendar-view .calendar-toolbar{margin-bottom:0}
  #calendar-view .calendar-weekdays{padding-bottom:4px}
  #calendar-view .calendar-grid{row-gap:0}
  #calendar-view .calendar-legend{margin-top:6px}
}

.floating-pay svg{width:22px;height:22px}

/* All services together: two columns, no page controls. */
#service-list.service-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--service-rows,7),minmax(46px,1fr));gap:7px;border:0;margin-top:12px;overflow-y:auto;overflow-x:hidden;padding:3px}
.service-tile{display:flex;align-items:center;gap:9px;text-align:left;width:100%;min-width:0;min-height:46px;padding:9px;border:1px solid #e3e7da;border-radius:15px;background:var(--paper);transition:background .15s,border-color .15s}
.service-tile:hover{background:#eef2e5;border-color:#bdcbaa}
.service-tile .service-icon{width:32px;height:34px;border-radius:11px}.service-tile .service-icon svg{width:18px;height:18px}
.service-tile .service-name{font-size:13px;line-height:1.3;font-weight:550;overflow-wrap:normal}
.tile-frequency{display:block;font-size:10px;color:var(--muted);line-height:1.4;margin-top:4px}
.service-tiles>.empty-state{grid-column:1/-1;grid-row:1/-1;align-self:center}
body[data-view=services] main{padding-bottom:64px}
@media(max-height:760px){#service-list.service-tiles{gap:6px;margin-top:8px}.service-tile{padding:6px;gap:7px;border-radius:12px}.service-tile .tile-frequency{display:none}.service-tile .service-icon{width:28px;height:30px}.service-tile .service-name{font-size:13px}}

.service-heading-actions{display:flex;align-items:center;gap:4px}
#toggle-service-search{display:none}
/* Keep eighteen services visible when Safari reduces the available height. */
@media(max-height:760px){
 #toggle-service-search{display:inline-grid}
 #services-view:not(.search-open) #service-search{display:none}
 #service-list.service-tiles{grid-template-rows:repeat(var(--service-rows,9),minmax(44px,1fr));gap:4px;margin-top:2px}
 .service-tile{min-height:44px;padding:5px}
 body[data-view=services] main{padding-bottom:58px}
}

.dense-services .tile-frequency{display:none}
@media(max-height:700px){
 body[data-view=services] .app-header{padding-top:env(safe-area-inset-top);padding-bottom:0}
 body[data-view=services] .section-heading{margin:0}
 body[data-view=services] main{padding-bottom:66px}
}

.cloud-access{width:min(100% - 40px,400px);margin:12dvh auto;color:var(--ink,#293d32)}.cloud-access h1{font-size:2.2rem}.cloud-access form{display:grid;gap:20px;margin-top:32px}.cloud-access .field{display:grid;gap:8px}

.login-account {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.login-account legend { padding: 0 0 8px; }
.login-account-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.login-account-options label { position: relative; cursor: pointer; }
.login-account-options input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.login-account-options span {
  display: grid;
  place-items: center;
  min-height: 66px;
  border: 2px solid #dce2d2;
  border-radius: 12px;
  background: var(--paper);
  font-size: 34px;
  line-height: 1.2;
}
.login-account-options input:checked + span {
  background: #e4ebd4;
  border-color: var(--olive);
}
.login-account-options input:focus-visible + span {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

#code-form input[name=code]{font-size:1.7rem;letter-spacing:.35em;text-align:center;min-width:0;width:100%}
.code-help{font-size:.88rem;line-height:1.45;margin:0;color:var(--muted)}
#code-form{gap:14px;margin-top:24px}