/* Shared positioning for native modal dialogs. Component widths remain intact. */
html body dialog:modal {
  position: fixed;
  inset: 0;
  margin: auto !important;
  box-sizing: border-box;
  max-width: calc(100vw - 32px) !important;
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}
html body dialog:modal::backdrop { background: rgb(7 17 32 / .58); }
html body dialog.cmd-modal > .cmd { padding: 24px; }
html body dialog.cmd-modal header { align-items: flex-start; }
html body dialog.cmd-modal header h2 { margin: 0; }
html body dialog.cmd-modal header > button { flex-shrink: 0; }
html body dialog:modal form { min-width: 0; }
@media (max-width: 600px) {
  html body dialog:modal { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; max-height: calc(100dvh - 24px) !important; }
  html body dialog.cmd-modal > .cmd { padding: 16px; }
  html body dialog:modal input, html body dialog:modal select, html body dialog:modal textarea { font-size: 16px; }
}