/* Every app popup uses the visible area above the on-screen keyboard. */
.modal.on,.host-modal{
  height:var(--mobile-visible-height,100dvh);
  top:var(--mobile-viewport-top,0px);
  bottom:auto;
  overflow:hidden;
}
.modal .dialog:has(>.dialog-content){
  display:flex;
  flex-direction:column;
  max-height:100%;
  min-height:0;
  overflow:hidden;
  padding:0;
  scrollbar-gutter:auto;
}
.modal .dialog:has(>.dialog-content)>.dialog-content{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-padding-top:12px;
}
.modal .dialog:has(>.dialog-content)>h2,
.modal .dialog:has(>.dialog-content)>.head{
  flex:none;
  margin:0;
  padding:15px 58px 12px var(--dialog-gutter,21px);
  border-bottom:1px solid var(--line);
  background:var(--p);
}
.modal .dialog:has(>.dialog-content)>.head{min-height:55px}
.modal .dialog:has(>.dialog-content)>.actions,
.modal .dialog:has(>.dialog-content)>.confirm-actions{
  position:relative;
  flex:none;
  margin:0;
  z-index:2;
  background:var(--p);
}
.modal .dialog-close{top:10px;right:12px}
.host-modal{place-items:center;overscroll-behavior:contain}
.host-modal-card{
  max-height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-padding-top:12px;
}
.host-modal-card>h2{
  position:sticky;
  top:0;
  z-index:4;
  padding-right:48px;
  background:var(--card,var(--p));
}
.host-modal-card .host-modal-actions{
  position:sticky;
  bottom:0;
  z-index:3;
  background:var(--card,var(--p));
}
.host-modal-card input,.host-modal-card select,.host-modal-card textarea{font-size:max(16px,1em)}
@media(max-width:680px){
  .modal.on{align-items:flex-start}
  .modal .dialog:has(>.dialog-content)>.head,
  .modal .dialog:has(>.dialog-content)>h2{padding:13px 52px 11px var(--dialog-gutter,16px)}
  .host-modal{place-items:start center}
}