/* Keep the document's natural scrolling on phones and touch devices. */
#appWrap>.topbar,#app>.topbar,#s-main>.topbar{position:static}
/* Fixed application frame only for wide browsers with a mouse/trackpad. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){
 html:has(#appWrap.chrono-shell-active),body:has(#appWrap.chrono-shell-active),html:has(#app.chrono-shell-active),body:has(#app.chrono-shell-active){height:100%;min-height:0;overflow:hidden}
 #appWrap.chrono-shell-active,#app.chrono-shell-active{display:flex!important;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden}
 #appWrap>.topbar,#appWrap>.tb-tabs,#app>.topbar,#app>.tabs{flex:0 0 auto}
 #appWrap>.main,#chrono-ma-content{flex:1 1 0;min-height:0;width:100%;overflow-y:auto;overscroll-behavior-y:contain}
 html:has(#s-main.active),body:has(#s-main.active){height:100vh;height:100dvh;min-height:0;overflow:hidden}
 .offline-banner{flex-shrink:0}
 #s-main.active{flex:1 1 0;min-height:0;overflow:hidden}
 #s-main>.topbar{flex:0 0 auto}
 #chrono-stamping,#chrono-page{flex:1 1 0;min-height:0;overflow-y:auto;overscroll-behavior-y:contain}
 #chrono-stamping>*{flex-shrink:0}
}
@media print{
 html,body,#appWrap.chrono-shell-active,#app.chrono-shell-active,#s-main.active,#appWrap>.main,#chrono-ma-content,#chrono-stamping,#chrono-page{height:auto!important;min-height:0;overflow:visible!important}
 #appWrap.chrono-shell-active,#app.chrono-shell-active,#s-main.active{display:block!important}
}