@media (max-width:650px){
  body.add-course-screen-open{overflow:hidden;}
  #add-dialog[open]{
    box-sizing:border-box;
    width:100vw;
    max-width:none;
    height:100vh;
    height:100dvh;
    max-height:none;
    margin:0;
    border:0;
    border-radius:0;
    padding:calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  #add-dialog::backdrop{background:transparent;}
  #add-dialog .dialog-head{
    position:sticky;
    top:calc(-14px - env(safe-area-inset-top));
    z-index:4;
    margin:-14px -16px 12px;
    padding:calc(14px + env(safe-area-inset-top)) 16px 12px;
    background:var(--surface,#fff);
  }
  #add-dialog .form-grid{grid-template-columns:1fr;}
  #add-dialog .dialog-actions{padding-bottom:env(safe-area-inset-bottom);}
}