/* Overlay (desktop) that becomes a bottom sheet or full screen on mobile. See <Dialog>. */
.dialog {
  width: min(560px, calc(100vw - 48px));
  max-height: min(86vh, 860px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dialog[open] {
  display: flex;
  flex-direction: column;
  animation: dialog-in var(--duration-slow) var(--ease-out);
}
.dialog.sm {
  width: min(420px, calc(100vw - 48px));
}
.dialog.lg {
  width: min(880px, calc(100vw - 48px));
}
.dialog::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fade-in var(--duration) var(--ease-out);
}
.dialog.is-closing {
  animation: dialog-out var(--duration) var(--ease-in-out) forwards;
}
.dialog.is-closing::backdrop {
  animation: fade-out var(--duration) var(--ease-in-out) forwards;
}
.dialog-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.dialog-head h2 {
  flex: 1;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-title);
}
.dialog-head form {
  margin: 0;
}
.sheet-handle {
  display: none;
}
.dialog-body {
  flex: 1;
  padding: var(--space-6);
  overflow: auto;
  overscroll-behavior: contain;
}
.dialog-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  background: var(--surface-sunken);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
@keyframes dialog-out {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 767.98px) {
  .dialog.sheet-mobile {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: var(--safe-bottom);
    transform: translateY(var(--drag, 0));
  }
  .dialog.sheet-mobile[open] {
    animation: sheet-up var(--duration-slow) var(--ease-out);
  }
  .dialog.sheet-mobile.is-closing {
    animation: sheet-down var(--duration) var(--ease-in-out) forwards;
  }
  .sheet-mobile .sheet-handle {
    display: block;
    position: absolute;
    top: 7px;
    left: 50%;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: var(--radius-pill);
    background: var(--line-strong);
  }
  .sheet-mobile .dialog-head {
    padding-top: var(--space-5);
    touch-action: none;
  }
  .dialog.full-mobile {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: var(--safe-top) 0 var(--safe-bottom);
  }
  .dialog-body {
    padding: var(--space-5);
  }
  .dialog-foot {
    padding-inline: var(--space-5);
  }
  .dialog-foot > * {
    flex: 1;
  }
}
@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
}
@keyframes sheet-down {
  to {
    transform: translateY(100%);
  }
}