/* Touch screens, notches and small browser viewports. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-bottom:24px}
body{min-height:100vh;min-height:100dvh}
.cloud-bar [hidden]{display:none!important}
@media(max-width:720px){
 body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 .wrap{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
 input:not([type=checkbox]):not([type=radio]),textarea,select,.field input,.field select,.quiz-input,.language-control select{font-size:16px}
 button,.tabs button,.cloud-bar button,.cloud-bar a,.cloud-bar select{min-height:44px;touch-action:manipulation}
 .tabs{row-gap:5px}.tabs button{flex-shrink:0}
 .cloud-bar{gap:8px}.cloud-bar button,.cloud-bar a{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px}
 .cloud-status{line-height:1.7;overflow-wrap:anywhere}
 .row>*{min-width:0}.field{min-width:0;max-width:100%}
 input,textarea,select{max-width:100%}
 .rec,.corr,.note-sent,.sentence,.card p,.cloud-note{overflow-wrap:anywhere}
 .compare-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 main{margin-top:calc(20px + env(safe-area-inset-top));margin-bottom:calc(20px + env(safe-area-inset-bottom))}
 #password{font-size:16px}#submit{min-height:48px}
}
@media(max-width:380px){
 .language-control select{max-width:112px}
 header.top h1{font-size:18px;gap:8px}
 .card,#panel-practice>.card{padding:16px}
 .cloud-bar button{flex:1 1 auto}
 main{width:calc(100% - 28px);padding:24px 20px}
 main header{flex-wrap:wrap;gap:10px}main header strong{font-size:18px}main header select{max-width:112px}
}