/* Stable mobile modal scrolling: only the sheet scrolls, not the page behind it. */
.modal{
  overflow:hidden;
  overscroll-behavior:none;
}
.modal.open{
  align-items:flex-end;
}
.sheet{
  width:100%;
  max-height:calc(100dvh - 8px);
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  margin-top:0;
  border-radius:20px 20px 0 0;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
#projectModal .sheet-actions{
  position:sticky;
  bottom:0;
  z-index:6;
  background:#fff;
  padding-top:12px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
  margin-bottom:0;
}

/* Mobile app-shell treatment for New task only. */
@media(max-width:799px){
  #modal{
    align-items:stretch;
    background:#f4f7f9;
  }
  #modal .sheet{
    height:100dvh;
    max-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    border-radius:0;
    padding:0 16px;
    background:#f4f7f9;
  }
  #modal .sheet h2{
    position:sticky;
    top:0;
    z-index:8;
    margin:0 -16px 14px;
    padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
    background:#102a3a;
    color:#fff;
    box-shadow:0 1px 0 #ffffff18;
  }
  #modal .field{
    flex:0 0 auto;
  }
  #modal select,
  #modal input:not([type="checkbox"]){
    font-size:16px!important;
  }
  #modal .sheet-actions{
    position:sticky;
    bottom:0;
    z-index:8;
    margin:14px -16px 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:#102a3a;
    box-shadow:0 -1px 0 #ffffff18;
  }
  #modal .sheet-actions button{
    min-height:46px;
    touch-action:manipulation;
  }
  #modal .sheet-actions .cancel{
    background:#ffffff18;
    color:#fff;
  }
  #modal .sheet-actions .save{
    background:#fff;
    color:#102a3a;
  }
  #modal .sheet-actions .save:disabled{
    opacity:.72;
  }
}

@supports not (height:100dvh){
  .sheet{max-height:calc(100vh - 8px)}
  @media(max-width:799px){#modal .sheet{height:100vh;max-height:100vh}}
}