dialog.cleaning-flow{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;background:var(--paper);color:var(--ink);overflow:hidden;border-radius:0;z-index:1000}
dialog.cleaning-flow[open]{display:flex;flex-direction:column}
.cleaning-flow::backdrop{background:#101d16b3}
.flow-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 12px max(18px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--stone);flex-shrink:0}
.flow-header strong{font-size:14px}.flow-header p{margin:4px 0 0;font-size:12px}
.flow-content{overflow:auto;flex:1;min-height:0;padding:20px max(18px,env(safe-area-inset-right,0px)) 24px max(18px,env(safe-area-inset-left,0px));overscroll-behavior:contain}
.flow-content>*{max-width:850px;margin-inline:auto}.flow-content h2{font-size:clamp(23px,4vw,34px);line-height:1.3}.flow-content textarea{font-size:16px;min-height:150px}
.flow-confirm{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:14px;border:1px solid var(--stone);border-radius:10px;margin-top:18px;font-size:15px}.flow-confirm input{flex-shrink:0}
.flow-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px max(18px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));border-top:1px solid var(--stone);background:var(--paper);flex-shrink:0}.flow-footer .btn,.flow-header .btn{min-height:48px}.flow-footer #flow-next{margin-inline-start:auto}.flow-error{padding:12px;border:1px solid var(--rust);border-radius:8px;color:var(--rust)}
@media(max-width:600px){.flow-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px}.flow-footer #flow-next{grid-column:1/-1;width:100%;margin:0;min-height:54px}.flow-header .btn{font-size:12px;padding-inline:10px}.flow-header strong{font-size:12px}.flow-content{padding-top:16px}}
/* Landscape keeps context alongside preparation, with rooms in reading order. */
@media(min-width:900px) and (orientation:landscape){
 .flow-content{padding:18px 24px}.flow-content>*{max-width:1100px}
 .flow-overview{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);column-gap:28px;align-content:start;align-items:start}
 .flow-overview>h2,.flow-overview>p,.flow-overview>.flow-confirm{grid-column:1;margin:0 0 16px}
 .flow-overview>h2{font-size:28px}.flow-overview>.staff-preparation{grid-column:2;grid-row:1/span 6;margin:0}
 .flow-overview>.flow-confirm{align-self:start;line-height:1.5}
 .cleaning-flow .bedroom-grid{grid-template-columns:minmax(0,1fr)}
 .flow-header{padding-top:10px;padding-bottom:10px}.flow-footer{padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
}