/* Flow through the wrappers on phones; expand at tablet width. */
.workspace-content{position:relative;min-width:0}
.home-overview-layout,.home-bottom-layout,.home-goal-wrap,.budget-workspace,.budget-planning{display:contents}
.desktop-shortcuts{display:none}

@media(min-width:700px){
 :root{--club-width:1440px;--club-gutter:24px}
 .app{width:calc(100% - 32px);max-width:var(--club-width);margin:16px auto;min-height:calc(100dvh - 32px);padding:24px 24px 38px;border:2px solid #ffffff70;border-radius:32px;display:grid;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"header header" "nav content";gap:24px;align-items:start;box-shadow:0 16px 60px #203d5514}
 .app>header{grid-area:header;margin:0;padding:0 0 22px;border-bottom:1px solid #ffffff75;gap:20px}
 .brand{gap:13px}.brand img{width:60px;height:60px;border-radius:18px}.brand b{font-size:31px}.settings{width:48px;height:48px}
 .workspace-content{grid-area:content;padding-bottom:76px}
 .app>.dock{grid-area:nav;position:sticky;top:24px;left:auto;bottom:auto;transform:none;width:100%;max-height:calc(100dvh - 48px);overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:0;background:none;backdrop-filter:none;border:0;z-index:5;align-self:start}
 .dock button{flex:none;min-height:70px;width:100%;padding:10px 5px;border:1px solid transparent;border-radius:18px;font-size:12px;line-height:1.4;font-weight:700;transition:background .15s,transform .15s}
 .dock button>span{display:block;height:29px;margin:0 0 5px}.dock .custom-icon{width:28px;height:28px}
 .dock button:hover{background:#ffffff75}.dock button.selected{background:#fff0ab;border-color:#fff7;box-shadow:0 4px 0 #203d5510}
 .desktop-shortcuts{display:flex;flex-direction:column;gap:7px;margin-top:14px;padding-top:18px;border-top:1px solid #ffffff90}
 .sidebar-caption{font-size:9px;font-weight:800;letter-spacing:.7px;text-align:center;line-height:1.5;padding:0 3px 8px;color:#53628c}
 .month-nav{margin:0 0 24px;padding:7px 12px;max-width:440px;min-height:54px}.month-nav input{font-size:17px;max-width:250px}.month-nav button{min-width:40px;min-height:40px}
 .welcome{margin:0 0 26px;gap:24px}.welcome h1{font-size:clamp(36px,3.5vw,48px);line-height:1.06;letter-spacing:-.9px}.home-date{font-size:12px}.welcome>img{width:130px;height:130px;flex:none}
 .home-balance{padding:28px;border-radius:28px}.home-balance-top{font-size:11px;gap:16px}.live-chip{font-size:10px}.home-balance h2{font-size:25px}.home-amount{font-size:clamp(42px,4.3vw,60px)}.home-amount.no-income{font-size:clamp(31px,3vw,42px)}.home-balance p{font-size:12px;max-width:none;line-height:1.7}.home-balance button{font-size:13px;min-height:48px}.cycle-mini{font-size:12px}
 .home-grid{gap:18px;margin-top:24px}.home-card{padding:21px;border-radius:24px}.home-card-label{font-size:12px}.home-card strong{font-size:30px}.home-card small{font-size:11px}.home-card-link{font-size:11px}.home-card-icon .custom-icon{width:34px;height:34px}
 .home-bottom-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:26px;align-items:stretch}
 .home-savings{margin:0;height:100%;padding:22px;flex-wrap:wrap;align-content:center;gap:13px;min-width:0}.home-savings-art{width:54px;height:60px;flex:none}.home-savings-art .custom-icon{width:43px;height:43px}.home-savings small{font-size:11px}.home-savings strong{font-size:34px}.home-savings>span>span{font-size:12px}.home-savings>span:nth-child(2){flex:1 1 100px}
 .home-goal-wrap{display:flex;flex-direction:column;min-width:0}.home-section-title{margin-bottom:12px;gap:8px}.home-section-title h2{font-size:21px}.home-section-title button{font-size:12px;min-height:36px}.home-goal-card{flex:1;padding:22px}.home-goal-heading b{font-size:22px}.home-goal-heading small,.home-goal-card p{font-size:12px}.home-goal-money{font-size:31px}.home-goal-money span{font-size:13px}
 .home-nudge{font-size:12px;padding:16px;gap:13px}.home-nudge>button{font-size:12px;min-height:40px}.bill-reminder-banner{padding:22px}.manual-reminder-row b{font-size:14px}.manual-reminder-row small,.manual-reminder-row button{font-size:12px}.reminder-heading p{font-size:12px}
 .helper{font-size:12px;line-height:1.7;margin-top:25px}.page-title{text-align:left;padding:8px 0 24px}.page-title h1{font-size:42px;margin:16px 0 10px}.page-title p{font-size:14px;max-width:560px;margin-bottom:0}.page-doodle{width:60px;height:60px}
 .actions{max-width:580px;gap:16px}.actions button,.bonus-button{min-height:50px;font-size:14px}.bonus-button{padding:15px 18px}.bills-banner{padding:22px 26px;min-height:106px}.bills-banner span{font-size:13px}.bills-banner strong{font-size:36px}.bills-banner button{min-height:46px;font-size:13px}
 .row{min-height:88px;padding:21px 20px;gap:15px}.row-title{font-size:14px;min-width:0;overflow-wrap:anywhere}.row-title small{font-size:12px;line-height:1.6}.row-amount{font-size:15px;flex-shrink:0}.tick{width:38px;height:38px}.chevron{font-size:23px}.note{font-size:13px;padding:18px;line-height:1.6}.empty{font-size:14px}
 .balance-card{margin-top:30px;padding:22px 26px 26px}.balance-card h1{font-size:27px}.balance-card p{font-size:13px}.balance-card .balance{font-size:clamp(42px,4.5vw,62px)}.status{font-size:12px}.sticker{font-size:11px}.quick-totals{gap:18px}.quick-totals button{padding:24px}.quick-totals span{font-size:14px}.quick-totals strong{font-size:32px}.quick-totals small{font-size:12px}.pots summary,.pots summary b,.pots-content>p,.extra-row label{font-size:14px}.pots summary{padding:21px 18px}.pots-content{padding:0 20px 24px}.savings-launch b{font-size:21px}.savings-launch small{font-size:11px}.savings-launch>strong{font-size:14px}.setup{font-size:14px;padding:20px}.setup b{font-size:14px}.setup p,.setup button{font-size:12px}
 footer{font-size:11px;margin-top:30px;line-height:1.6}
 /* Windows use the extra space while keeping editing controls in reach. */
 dialog:not(#penelopeDialog){max-width:560px;width:calc(100% - 64px);padding:32px;max-height:calc(100dvh - 56px)}
 dialog:not(#penelopeDialog) h2{font-size:31px}dialog:not(#penelopeDialog) p{font-size:14px}dialog label{font-size:14px}dialog select{font-size:15px}dialog .footnote{font-size:12px!important}.close{min-width:44px;min-height:44px;right:12px;top:8px}
 #savingsDialog,#goalsDialog{max-width:860px;padding:34px}#accountRows,#goalRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}#accountRows>.savings-empty,#goalRows>.savings-empty{grid-column:1/-1}.account-card{min-width:0}.account-card b{font-size:15px}.account-card small{font-size:11px}.account-card strong{font-size:30px}.goal-card{min-width:0}.goal-top h3{font-size:23px}.goal-plan strong{font-size:22px}.goal-plan p{font-size:12px}.goal-top{flex-wrap:wrap}.goal-top>div{min-width:100px}.savings-total{margin-top:28px}.savings-total>span{font-size:14px}
 #cycleDialog,#cashDialog,#forecastDialog,#csvDialog,#debtDialog{max-width:780px}.cycle-totals>div{font-size:14px}.cycle-totals .cycle-final{font-size:17px}.cycle-dialog h3{font-size:24px}.cycle-allowance p{font-size:13px}.csv-entry{padding:20px 0}
 #settingsDialog{max-width:740px}#scheduleForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#scheduleForm>.schedule-box{margin:0;min-width:0}#scheduleForm>:not(.schedule-box){grid-column:1/-1}#scheduleForm>.primary{margin-top:0}#settingsDialog .tool-grid>*{min-height:48px}
 .pen-launcher{right:max(28px,calc((100vw - var(--club-width))/2 + 28px));bottom:24px;box-shadow:3px 5px 0 #203d5526;font-size:13px}.pen-launcher small{font-size:11px}.pen-launcher img{width:54px;height:54px}
 #penelopeDialog{width:430px;max-width:calc(100vw - 56px);height:min(730px,calc(var(--pen-viewport,100dvh) - 48px));max-height:calc(var(--pen-viewport,100dvh) - 48px);margin:auto 24px 24px auto;inset:0;border-radius:27px}.pen-message{font-size:14px}.pen-form{padding-bottom:12px}.pen-form>p{font-size:10px}.pen-header h2{font-size:27px}
 .toast{bottom:28px;max-width:min(600px,calc(100vw - 80px))}
}

@media(min-width:1024px){
 .home-overview-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:stretch}
 .home-overview-layout>.home-balance{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;min-height:345px}
 .home-overview-layout>.home-grid{grid-column:2;grid-row:1;grid-template-columns:1fr;margin:0;gap:18px}
 .home-overview-layout>.home-nudge,.home-overview-layout>.bill-reminder-banner{grid-column:1/-1;margin:0}
 .home-grid .home-card{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:center;padding:19px 22px}
 .home-grid .home-card-icon{grid-column:1;grid-row:1/5;align-self:start;margin:0;padding:5px}.home-grid .home-card-label,.home-grid .home-card strong,.home-grid .home-card small,.home-grid .home-card-link{grid-column:2;margin:0}.home-grid .home-card strong{font-size:30px}.home-grid .home-card small{min-height:0}.home-grid .home-card-link{margin-top:5px}
 .home-balance h2{margin-top:24px}.home-balance p{margin-bottom:16px}.home-balance button{margin-top:auto}
 .budget-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start;padding-top:10px}.budget-planning{display:block;min-width:0}.budget-workspace>.balance-card{margin-top:22px;position:sticky;top:32px}.budget-planning .quick-totals{margin-top:0;gap:12px}.budget-planning .quick-totals button{padding:19px}.budget-planning .quick-totals strong{font-size:28px}.budget-planning .pots{margin-top:24px}
 #billsPanel,#incomePanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);column-gap:24px;align-items:center}
 #billsPanel>.page-title,#incomePanel>.page-title{grid-column:1;grid-row:1/3}#billsPanel>.bills-banner{grid-column:2;grid-row:1/3;margin:0 0 24px;flex-wrap:wrap}
 #incomePanel>.actions{grid-column:2;grid-row:1;gap:10px;margin-bottom:14px;align-self:end}#incomePanel>.bonus-button{grid-column:2;grid-row:2;align-self:start;margin-bottom:24px}
 #billRows,#incomeRows,#billsPanel>.note,#incomePanel>.note{grid-column:1/-1}
 #billRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#ffffffb8;gap:1px}#billRows>.row{border:0;min-width:0;min-height:104px}#billRows>.empty{grid-column:1/-1}
}

@media(min-width:1200px){
 .app{grid-template-columns:190px minmax(0,1fr);padding:30px;gap:28px 32px}
 .app>.dock{gap:10px}.dock button{display:flex;align-items:center;gap:13px;text-align:left;padding:14px 16px;min-height:54px;font-size:14px}.dock button>span{display:flex;align-items:center;justify-content:center;margin:0;height:30px;flex:none}.desktop-shortcuts{gap:8px;margin-top:18px;padding-top:22px}.sidebar-caption{text-align:left;padding:0 16px 10px;font-size:10px}
 .home-bottom-layout{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:22px}.home-savings{padding:28px}.home-savings strong{font-size:42px}.home-savings-art{width:70px;height:76px}.home-savings-art .custom-icon{width:54px;height:54px}
 .home-grid .home-card strong{font-size:34px}.home-balance{padding:30px}.home-balance h2{font-size:27px}.home-amount{font-size:60px}
}

@media(min-width:1600px){.app{margin-top:30px;margin-bottom:30px;min-height:calc(100dvh - 60px);padding:36px}.welcome h1{font-size:50px}}
@media(hover:hover) and (pointer:fine){.home-card:hover,.home-savings:hover,.home-goal-card:hover{filter:brightness(1.025);box-shadow:0 7px 0 #203d5517}.row:hover{background:#eef6ff}.dock button:active{transform:translateY(1px)}}
