.request-toggle,.request-close,.mobile-clock{display:none}
@media(max-width:700px){
 body:has(.workspace){overflow-x:hidden}
 body:has(.workspace) header{height:52px;padding:0 12px;gap:8px}
 body:has(.workspace) .brand{font-size:13px;white-space:nowrap}
 body:has(.workspace) .brand small,body:has(.workspace) #served{display:none}
 body:has(.workspace) header .stats{gap:5px;font-size:10px;flex-wrap:wrap;justify-content:flex-end}
 body:has(.workspace) header .mini{font-size:10px;padding:5px 3px}
 #app:has(.workspace){padding:8px 10px max(10px,env(safe-area-inset-bottom));max-width:560px}
 .worktop:has(+.workspace){margin:0 0 8px;display:block}
 .worktop:has(+.workspace)>div:first-child{display:none}
 .worktop .steps{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:5px;width:100%}
 .worktop .step{padding:10px 2px;font-size:12px;white-space:nowrap;letter-spacing:0}
 .workspace{position:relative;display:flex;flex-direction:column;gap:10px}
 .workspace .stage{width:100%;height:max(295px,calc(100dvh - 344px));min-height:295px;border-radius:24px;border-width:1px;box-shadow:none;background:#f2d5bf}
 .workspace .stage:after,.workspace .stage>.label,.workspace .stage>span:not(.mobile-clock){display:none}
 .workspace .stage .tea-hint{bottom:8px;font-size:10px;color:#97715a}
 .workspace .stage>button:not(.request-toggle){right:10px!important;top:10px!important;padding:8px 10px!important;font-size:11px!important;border-width:1px;box-shadow:none}
 .request-toggle{display:block;position:absolute;left:10px;top:10px;z-index:8;padding:8px 12px;font-size:12px;background:#fff7eab0;border:1px solid #bf977b77;box-shadow:none}
 .mobile-clock{display:block;position:absolute;left:14px;bottom:10px;z-index:7;color:#8b6654;font-size:11px;pointer-events:none}
 .workspace .ingredients{padding:11px 12px 9px;border:1px solid #dfbda2;border-radius:20px;background:#fff5e9;box-shadow:none;animation:none}
 .ingredients h2{font-size:16px;line-height:1.3;margin:0 0 7px}
 .ingredients>p.hint,.ingredients>.volume,.ingredients>div:last-child:not(.controls){display:none}
 .ingredients .grid{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:3px 2px 7px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .ingredients .item{flex:0 0 86px;min-height:100px;padding:9px 3px 6px;border-width:1px;border-radius:15px;box-shadow:none;scroll-snap-align:start}
 .ingredients .item .icon{margin:3px 0 4px}
 .ingredients .item .icon canvas{width:61px!important;height:46px!important}
 .ingredients .item .name{font-size:12px}
 .ingredients .item .qty{font-size:10px;top:2px;right:5px}
 .ingredients .item>small{display:none!important}
 .ingredients .controls{margin-top:7px;display:flex;flex-wrap:nowrap;align-items:center;gap:6px}
 .ingredients .controls button{font-size:12px;white-space:nowrap;padding:10px 12px;border-radius:16px;box-shadow:none;border-width:1px}
 .ingredients .controls .primary{margin-left:auto}
 .ingredients>fieldset{display:inline-block;vertical-align:top;margin:4px 0!important;padding:0!important;width:100%}
 .ingredients fieldset legend{font-size:12px}
 .ingredients fieldset>div{gap:5px!important;margin-top:4px!important}
 .ingredients fieldset button{padding:7px 10px!important;font-size:12px;border-width:1px;box-shadow:none}
 .workspace .receipt.request-drawer{position:absolute;display:block;top:48px;left:10px;width:min(310px,calc(100% - 20px));max-height:calc(100% - 90px);overflow:auto;padding:18px;z-index:12;border:1px solid #ba927f80;border-radius:22px;background:linear-gradient(135deg,#fff8eca6,#f2dbe480);box-shadow:0 8px 25px #805d4420;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transform:translateX(-15px);transition:opacity .16s,transform .16s,visibility .16s}
 .workspace .receipt.request-open{opacity:1;visibility:visible;transform:none}
 .request-close{display:block;position:absolute;right:8px;top:6px;background:transparent;font-size:26px;line-height:1;padding:5px 10px;color:#896451}
 .receipt h3{font-size:17px;padding-right:24px}.receipt small{display:block}.receipt hr{display:block;margin:12px 0}
 .receipt .orderline{font-size:14px;margin:10px 0}.receipt .note{font-size:11px;min-width:0;background:#fff4df80}.receipt .order-clock{background:#fff4df66}
 #app:has(.workspace)>.bottomtext{display:none}
}

.step-request-summary{font-size:12px;line-height:1.65;margin:6px 0 9px;color:#94664e;overflow-wrap:anywhere}
@media(max-width:700px){.ingredients>.step-request-summary{display:block!important;font-size:12px;margin:3px 0 7px}.workspace .receipt.request-drawer{max-height:min(440px,calc(100% - 90px))}.request-drawer .order-clock{margin-top:12px}}

/* Hide newly recreated receipts before drawer classes are attached. */
@media(max-width:700px){.workspace .receipt:not(.request-open){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}.workspace .receipt.request-open{transition:opacity .16s,transform .16s}}