/* Native modal presentation shared by server-rendered dialog instances. */
.app-dialog {
  width: fit-content;
  min-width: min(36rem, calc(100% - var(--space-7) - var(--space-7)));
  max-width: calc(100% - var(--space-7) - var(--space-7));
  max-height: min(80vh, 48rem);
  padding: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-3xl);
  background: var(--color-surface-strong);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-variant-numeric: normal;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-card);
}

.app-dialog::backdrop {
  background: var(--color-mask);
  backdrop-filter: blur(var(--space-1));
}

@scope (.app-dialog) {
  [data-dialog-frame] {
    position: relative;
    display: grid;
    max-height: inherit;
    grid-template-rows: auto minmax(0, 1fr);
  }

  [data-dialog-frame] > header {
    padding: var(--space-9) calc(var(--space-14) + var(--space-6)) var(--space-8) var(--space-9);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  [data-dialog-frame] > header h2 {
    margin: 0;
    text-wrap: balance;
  }

  [data-dialog-body] {
    padding: var(--space-9);
    overflow: auto;
  }

  [data-dialog-body] > p:first-child {
    color: var(--color-text-muted);
  }

  [data-dialog-body] > :last-child {
    margin-bottom: 0;
  }

  button[data-dialog-close] {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    display: grid;
    width: var(--control-height);
    min-height: var(--control-height);
    padding: 0;
    border-color: transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-heading);
    font-size: var(--font-size-h2);
    line-height: 1;
    place-items: center;
  }

  button[data-dialog-close]:hover {
    border-color: var(--color-flower);
    background: var(--color-flower-soft);
    color: var(--color-flower);
  }
}

@media (max-width: 640px) {
  .app-dialog {
    max-height: calc(100vh - var(--space-7) - var(--space-7));
  }
}