/* Each route owns the viewport. Painted assets remain the source for controls/cards. */
:root{background:#fff9f3}
.screen{inset:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#fff9f3}
#preparation{display:flex;justify-content:center;align-items:stretch}
#preparation .prep-panel{width:min(1280px,100%);height:100%;max-height:none;padding:0;gap:12px;background:none}
#preparation .prep-panel::before{display:none}
#preparation .panel-head{flex:0 0 auto;gap:16px}
#preparation .prep-heading{align-items:center;gap:6px 20px}
#preparation .panel-head h1{font-size:clamp(20px,2.5vw,28px)}
#preparation .prep-head-actions{gap:12px}
#preparation .prep-tabs{flex:0 0 auto;gap:12px}
#preparation .prep-tabs button{min-height:48px}
#preparation .prep-body{flex:1;min-height:0;padding:0 2px;gap:0}
#preparation .products{gap:10px;margin:4px 0 10px}
#preparation .product{min-height:78px;padding:10px;grid-template-columns:38px minmax(0,1fr) 90px}
#preparation .product>img{width:36px;height:48px}
#preparation .product strong{font-size:14px}
#preparation .product .stock{font-size:12px}
#preparation .brew-columns{grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr);gap:20px}
#preparation .menu-paper{padding:14px 20px}
#preparation .menu-paper-head{margin-bottom:10px}
#preparation .menu-items{padding:4px 4px 4px 2px}
#preparation .menu-row{min-height:50px}
#preparation .batch-section:has(#batch-empty:not([hidden])) #batch-list{display:none}
#preparation .batch-empty{flex:1;min-height:0;margin:0;overflow:auto;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:8px 4px}
#preparation .batch-empty p{margin:0;font-size:13px;line-height:1.35}
#preparation .batch-empty button{min-height:44px;flex-shrink:0}
#preparation .prep-foot{min-height:52px;gap:12px;padding:0}
#preparation .prep-tools{gap:8px;flex:0 0 auto}
#preparation .prep-foot #prep-readiness{flex:1;text-align:center}
#preparation .prep-foot>button{min-height:48px}
.home-screen:has(.home-v23){display:flex;align-items:center;justify-content:center;background-color:#d6eee3}
.home-screen .home-v23{width:min(1000px,100%);max-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);column-gap:50px;row-gap:12px;text-align:left;padding:28px 36px}
.home-v23 .home-heading{grid-column:1;grid-row:1/4;align-content:center;gap:14px}
.home-v23 .home-heading h1{font-size:clamp(30px,4.8vw,56px);line-height:1.1}
.home-v23 .home-heading .home-mark{justify-content:flex-start}
.home-v23>section,.home-v23>nav,.home-v23>.home-feedback,.home-v23>#home-save-status{grid-column:2}
.home-v23[data-view=load] .home-heading,.home-v23[data-view=confirm] .home-heading{display:none}
.home-v23[data-view=load],.home-v23[data-view=confirm]{grid-template-columns:minmax(0,1fr);width:min(680px,100%)}
.home-v23[data-view=load]>section,.home-v23[data-view=confirm]>section,.home-v23[data-view=load]>.home-feedback,.home-v23[data-view=confirm]>.home-feedback,.home-v23[data-view=load]>#home-save-status,.home-v23[data-view=confirm]>#home-save-status{grid-column:1}
dialog.utility-page[open]{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;z-index:25;display:flex;flex-direction:column;gap:12px;padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:#fff9f3;overflow:auto}
dialog.utility-page::before{display:none}
dialog.utility-page>.dialog-head,dialog.utility-page>.debt-head{flex:0 0 auto;position:sticky;top:0;padding:0 0 10px;background:#fff9f3;margin:0;min-height:44px}
dialog.utility-page>.dialog-head h2,dialog.utility-page>.debt-head h2{font-size:24px;margin:0}
dialog.utility-page .guide-body,dialog.utility-page .settings-body,dialog.utility-page .pricing-body,dialog.utility-page .debt-body{flex:1;min-height:0;overflow:auto;max-height:none;overscroll-behavior:contain;touch-action:pan-y}
dialog.utility-page .settings-body{padding:0;max-width:960px;width:100%;align-self:center}
dialog.utility-page .guide-body{max-width:1100px;width:100%;align-self:center}
dialog.utility-page .pricing-body{flex:0 1 auto;width:min(660px,100%);align-self:center;padding:24px 0}
dialog.utility-page .pricing-actions{justify-content:flex-end;max-width:660px;width:100%;align-self:center}
dialog.utility-page .debt-body,dialog.utility-page .debt-tabs,dialog.utility-page .debt-foot{max-width:1280px;width:100%;align-self:center}
dialog.utility-page .sound-controls{gap:16px 36px}
dialog.utility-page .dose-table{max-width:900px}
body[data-view]:not([data-view=selling]) .orientation-note{display:none}
#summary{background:#fff9f3}
#summary .summary-panel{width:min(900px,100%);height:100%;max-height:none;background:none;padding:0}
#summary .summary-panel::before{display:none}
#summary .panel-body{flex:1}
#summary .panel-foot{min-height:48px}
#summary-closure:empty{display:none}
#close-day-dialog{width:min(520px,calc(100% - 24px))}
#close-day-details{line-height:1.5;margin:16px 0}
#close-day-dialog .dialog-actions{justify-content:flex-end}
@media(max-height:440px){
 .screen{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 #preparation .prep-panel{gap:8px}
 #preparation .panel-head h1{font-size:21px}
 #preparation .prep-tabs button,#preparation .prep-foot>button{min-height:44px}
 #preparation .prep-foot{min-height:44px;gap:8px}
 #preparation .products{gap:8px}
 #preparation .product{min-height:66px;padding:6px;grid-template-columns:30px minmax(0,1fr) 76px}
 #preparation .product>img{width:28px;height:38px}
 #preparation .product strong{font-size:13px}
 #preparation .brew-columns{gap:14px}
 #preparation .menu-paper{padding:8px 12px}
 #preparation .menu-paper-head{margin-bottom:4px}
 #preparation .menu-row{min-height:44px}
 .home-screen .home-v23{gap:10px 24px;padding:16px 24px}
 .home-v23 .home-heading{gap:8px}
 .home-v23 .home-heading h1{font-size:clamp(28px,4.5vw,42px)}
 dialog.utility-page[open]{gap:8px;padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 dialog.utility-page>.dialog-head h2,dialog.utility-page>.debt-head h2{font-size:21px}
}
@media(max-width:690px){
 #preparation .prep-heading{gap:4px 8px}
 #preparation .prep-heading h1{font-size:18px}
 #preparation .prep-head-actions{gap:6px}
 #preparation .prep-wallet{font-size:14px}
 #preparation .prep-forecast{font-size:11px}
 #preparation .prep-forecast img{width:20px;height:20px}
 #preparation .brew-columns{gap:10px;grid-template-columns:minmax(0,0.85fr) minmax(0,1.5fr)}
 #preparation .products{grid-template-columns:repeat(2,minmax(0,1fr))}
 #preparation .prep-foot{flex-wrap:wrap}
 #preparation .prep-foot #prep-readiness{order:3;flex-basis:100%;font-size:11px;margin:0;line-height:1.2}
 .home-screen .home-v23{grid-template-columns:minmax(0,1fr) minmax(230px,1fr);column-gap:16px;padding:16px}
 .home-v23 .home-heading h1{font-size:28px}
}
@media(orientation:portrait){
 .home-screen .home-v23{display:flex;flex-direction:column;width:min(460px,100%);text-align:center}
 .home-v23 .home-heading{display:grid;flex-shrink:0}
 .home-v23>section{width:100%}
 .home-v23 .home-heading .home-mark{justify-content:center}
 #preparation .panel-head{align-items:flex-start}
 #preparation .prep-heading{display:block}
 #preparation .brew-columns{grid-template-columns:minmax(0,1fr);overflow:auto}
 #preparation .batch-section,#preparation .menu-section{min-height:220px}
}