/* Let native selects and date inputs shrink inside the form grid. */
dialog{max-width:min(580px,calc(100vw - 24px));overflow-x:hidden;overflow-y:auto}
dialog form,dialog .modal-body,dialog .modal-footer,dialog .form-grid,
dialog .field,dialog .access-field,dialog .account-row,dialog label{min-width:0;max-width:100%}
dialog .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
dialog input,dialog select,dialog textarea{box-sizing:border-box;min-width:0;min-inline-size:0;max-width:100%}
dialog .field input,dialog .field select,dialog .field textarea{width:100%;inline-size:100%}
dialog .field small,dialog .notice,dialog .modal-subtitle,dialog label{overflow-wrap:anywhere}
dialog .modal-header h2{min-width:0;overflow-wrap:anywhere}
dialog .modal-header>button{flex-shrink:0}
dialog .modal-footer{flex-wrap:wrap}
@media screen and (max-width:760px){
  dialog .form-grid{grid-template-columns:minmax(0,1fr)}
  dialog input,dialog select,dialog textarea{font-size:16px}
  dialog input[type="date"]{-webkit-appearance:none;appearance:none;display:block}
}