/* DEC-153: one shell for ordinary dialogs; confirmation and exception dialogs keep their own layout. */
:root{
  --app-modal-surface:#e8edf2;
  --app-modal-border:#c9d2dc;
  --app-modal-radius:8px;
  --app-modal-backdrop:rgba(0,17,65,.68);
  --app-modal-mobile-gap:16px;
}

dialog:is(.catalog-dialog,.catalog-coach-dialog,.admin-reg-dialog,.s6-dialog,.work-dialog,.s7-qr-dialog):not(.app-modal-exception){
  border:1px solid var(--app-modal-border);
  border-radius:var(--app-modal-radius);
  background:var(--app-modal-surface);
  color:#172332;
}
dialog:is(.catalog-dialog,.catalog-coach-dialog,.admin-reg-dialog,.s6-dialog,.work-dialog,.s7-qr-dialog):not(.app-modal-exception)::backdrop{
  background:var(--app-modal-backdrop);
}
.athlete-dialog:not(.athlete-dialog--confirm) .athlete-dialog__surface{
  border:1px solid var(--app-modal-border);
  border-radius:var(--app-modal-radius);
  background:var(--app-modal-surface);
}
.athlete-dialog:not(.athlete-dialog--confirm).is-visible::backdrop{
  background:var(--app-modal-backdrop);
  backdrop-filter:none;
}
.catalog-filter-dialog__surface{
  border:1px solid var(--app-modal-border);
  border-radius:var(--app-modal-radius);
  background:var(--app-modal-surface);
}

@media(max-width:720px){
  dialog:is(.catalog-dialog,.catalog-coach-dialog,.admin-reg-dialog,.s6-dialog,.work-dialog,.s7-qr-dialog):not(.app-modal-exception){
    position:fixed;
    inset:auto 0 0;
    width:100vw;
    max-width:100vw;
    max-height:88dvh;
    margin:0 auto;
    border:1px solid var(--app-modal-border);
    border-width:1px 0 0;
    border-radius:22px 22px 0 0;
  }
  .catalog-filter-dialog[open]{box-sizing:border-box;width:100vw;height:100dvh;place-items:end center;padding:0}
  .catalog-filter-dialog__surface{width:100%;max-height:88dvh;border:1px solid var(--app-modal-border);border-width:1px 0 0;border-radius:22px 22px 0 0}
  .athlete-dialog:not(.athlete-dialog--confirm)[open]{box-sizing:border-box;width:100vw;height:100dvh;place-items:end center;padding:0}
  .athlete-dialog:not(.athlete-dialog--confirm) .athlete-dialog__surface{
    width:100%;
    max-width:100%;
    max-height:88dvh;
    margin:0;
    border:1px solid var(--app-modal-border);
    border-width:1px 0 0;
    border-radius:22px 22px 0 0;
  }
  .athlete-dialog:not(.athlete-dialog--confirm) .athlete-sheet-handle{display:block}
}