/* V2.9.9 · Cross-device/PWA compatibility */
html{
  width:100%;
  min-width:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  touch-action:manipulation;
}
body{
  width:100%;
  min-width:0;
  max-width:100%;
  overscroll-behavior-x:none;
}
#app,.shell,.main,.calendar-shell,.card,.team-grid,.grid{min-width:0;max-width:100%}
img,svg,video,canvas{max-width:100%}
button,a,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea,button{max-width:100%}
.sheet :is(h1,h2,h3,p){min-width:0;max-width:100%;overflow-wrap:anywhere}

/* Prevent iOS/Safari from zooming the whole app when a form control receives focus. */
@media(max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px}
  .main{width:100%;max-width:100%}
  .table-wrap,.month-grid,.calendar-shell{max-width:100%}
}

/* WebKit can propagate the intrinsic width of a long native option beyond
   an otherwise correctly sized modal. Size these controls from their field. */
@media(max-width:1050px){
  .modal select{contain:layout inline-size}
  .modal .field select{width:0;min-width:100%;max-width:100%}
}

/* Respect notches, gesture areas and different standalone browser chrome. */
@supports(padding:max(0px)){
  .mobile-top{padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top))}
  .bottom-nav{left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom))}
  @media(max-width:1050px){.main{padding-bottom:calc(122px + env(safe-area-inset-bottom))}}
}

/* Browser engines sometimes inflate text in landscape; keep the same visual scale. */
@media(orientation:landscape) and (max-height:520px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}