:root {
  --dialog-canvas: #050708;
  --dialog-panel: #0d131a;
  --dialog-raised: #111922;
  --dialog-border: #36434e;
  --dialog-text: #eef3f7;
  --dialog-muted: #8996a3;
  --dialog-focus: #b5c7d4;
  --dialog-brand: #ff3b30;
}

html:has(dialog.app-dialog[open]) { overflow: hidden; }

dialog.app-dialog {
  width: min(calc(100% - 2rem), 680px);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dialog-border);
  border-radius: 12px;
  color: var(--dialog-text);
  background: var(--dialog-panel);
  box-shadow: 0 24px 72px #000b;
}

dialog.app-dialog[open] { display: grid; }
dialog.app-dialog[data-dialog-size="confirm"] { width: min(calc(100% - 2rem), 560px); }
dialog.app-dialog[data-dialog-size="workspace"] { width: min(calc(100% - 2rem), 1080px); }
dialog.app-dialog[data-dialog-size="sheet"] {
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: min(520px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  border-block: 0;
  border-inline-end: 0;
  border-radius: 12px 0 0 12px;
}

dialog.app-dialog::backdrop {
  background: #020507d9;
  backdrop-filter: blur(3px);
}

.app-dialog > form,
.app-dialog > .dialog-surface {
  display: grid;
  min-height: 0;
  max-height: inherit;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.dialog-heading,
.app-dialog .dialog-heading {
  display: flex;
  min-height: 64px;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-block-end: 1px solid var(--dialog-border);
  background: var(--dialog-panel);
}

.dialog-heading :is(h2, h3), .app-dialog .dialog-heading :is(h2, h3) { margin: 0; }
.dialog-heading button, .app-dialog .dialog-heading button { width: auto; min-width: 44px; min-height: 44px; }

[data-dialog-scroll] {
  min-width: 0;
  min-height: 0;
  padding: 1.25rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app-dialog .dialog-actions {
  position: static;
  display: flex;
  justify-content: end;
  gap: .75rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid var(--dialog-border);
  background: var(--dialog-panel);
}

.app-dialog .dialog-actions > * { width: auto; min-width: 120px; min-height: 48px; }
.app-dialog :is(button,input,select,textarea):focus-visible { outline: 3px solid var(--dialog-focus); outline-offset: 2px; }
.app-dialog [aria-busy="true"] { cursor: progress; }

@media (max-width: 620px) {
  dialog.app-dialog:not([data-dialog-size="confirm"]) {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  dialog.app-dialog[data-dialog-size="confirm"] { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }
  .app-dialog .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .app-dialog .dialog-actions > * { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.app-dialog, [data-dialog-scroll] { scroll-behavior: auto; }
}