/* Adaptive layouts: narrow screens, touch input and browser zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select,textarea{touch-action:manipulation}
img,video,canvas{max-width:100%}
@media(pointer:coarse){button,input,select{min-height:44px}button:disabled{cursor:default}}
@media(max-width:720px){input,select,textarea{font-size:16px}dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}button,a{overflow-wrap:anywhere}}

.app,.workspace,.editor-area,.header-right,.header-left{min-width:0;min-height:0}
header{padding-top:env(safe-area-inset-top)}
#modal{max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto}
@media(max-width:720px){
header{gap:8px}.header-right{margin-left:auto;gap:6px}.header-divider,.pill{display:none}
.workspace-toolbar{flex-wrap:wrap;height:auto;min-height:52px;padding-block:8px}
.crumb{flex:1;min-width:70px}.run-controls{margin-left:auto}
.tabs{overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
.bottom-tabs{min-height:48px}.bottom-tabs>div{flex-shrink:0}
#fallbackEditor{font-size:16px!important}
#modal input,#modal select{font-size:16px}
.statusbar{padding-bottom:env(safe-area-inset-bottom);height:auto;min-height:25px}
}
@media(max-height:500px) and (orientation:landscape){header{height:48px}.app{height:calc(100dvh - 48px)}.workspace-toolbar{min-height:42px}.bottom-panel{height:28dvh;min-height:80px}.editor-area{min-height:70px}aside{top:48px}}