/* Dialog · Firebird kit · components/chrome/dialog
   The native <dialog> is a transparent, full-viewport layer in the top layer; the glass panel sits centred
   in it, or along the bottom edge as a sheet on phones. The backdrop veils and blurs the page in the theme
   the dialog opened in. Tokens only. */

.dialog {
  --dialog-width: 640px;
  --dialog-pad: var(--space-7);
  --dialog-veil: color-mix(in srgb, var(--color-dawn-plum) 20%, transparent); /* a warm dim by day */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-5);
  border: 0;
  background: transparent;
  color: var(--ink);
  /* clip, not hidden: a clipped box can't be scrolled by script, so the browser's own focus on open can't
     shift a panel that is still mid-animation (the phone sheet starts below the screen). */
  overflow: hidden;
  overflow: clip;
}
.dialog[open] {
  display: grid;
  /* One cell exactly the size of the screen, so the panel's max-height and the page size's height resolve
     against it (an auto-sized row would grow with tall content and push the panel off the screen). */
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
}
.dialog--sm {
  --dialog-width: 480px;
}
.dialog--lg {
  --dialog-width: 960px;
}
/* A page: 80 % of the screen, and most of its height; the body scrolls inside. */
.dialog--page {
  --dialog-width: 80vw;
}
.dialog--page .dialog__panel {
  height: min(100%, 90vh);
}
@media (max-width: 1100px) {
  .dialog--page {
    --dialog-width: 92vw;
  }
}
.dialog[data-theme='dark'] {
  --dialog-veil: color-mix(in srgb, var(--color-night) 58%, transparent);
}

/* The veil: the page stays visible, dimmed and softly out of focus. */
.dialog::backdrop {
  background: var(--dialog-veil);
  -webkit-backdrop-filter: blur(var(--blur-veil));
  backdrop-filter: blur(var(--blur-veil));
}

.dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--dialog-width));
  max-height: 100%;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--radius-xl);
  outline: none; /* it takes focus as a container on open; the panel itself is the indication */
}

.dialog__body {
  min-height: 0;
  padding: var(--dialog-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.dialog__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-raised) 45%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-veil));
  backdrop-filter: blur(var(--blur-veil));
  color: var(--ink-muted);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.dialog__close .glyph {
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.dialog__close:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.dialog__close:hover .glyph {
  transform: rotate(90deg);
}
.dialog__close:focus-visible {
  border-radius: 50%;
}

/* ── Motion ── */

.dialog[open] .dialog__panel {
  animation: dialog-in var(--dur-base) var(--ease-out-expo) both;
}
.dialog[open]::backdrop {
  animation: dialog-veil-in var(--dur-base) var(--ease-out-expo) both;
}
.dialog[data-closing] .dialog__panel {
  animation: dialog-out calc(var(--dur-base) * 0.75) var(--ease-standard) both;
}
.dialog[data-closing]::backdrop {
  animation: dialog-veil-out calc(var(--dur-base) * 0.75) var(--ease-standard) both;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes dialog-out {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(6px); }
}
@keyframes dialog-veil-in {
  from { opacity: 0; }
}
@keyframes dialog-veil-out {
  to { opacity: 0; }
}

/* ── Phones: a bottom sheet ── */

@media (max-width: 599.98px) {
  .dialog {
    --dialog-pad: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    padding: var(--space-7) 0 0;
  }
  .dialog[open] {
    place-items: end stretch;
  }
  .dialog__panel {
    width: 100%;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .dialog__close {
    top: var(--space-3);
    right: var(--space-3);
  }
  /* A page takes almost the whole screen, leaving a sliver of the page above it. */
  .dialog--page {
    padding-top: var(--space-4);
  }
  .dialog--page .dialog__panel {
    height: 100%;
  }
  .dialog[open] .dialog__panel {
    animation: dialog-sheet-in var(--dur-slow) var(--ease-out-expo) both;
  }
  .dialog[data-closing] .dialog__panel {
    animation: dialog-sheet-out var(--dur-base) var(--ease-in-out-quart) both;
  }
}

@keyframes dialog-sheet-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes dialog-sheet-out {
  to { transform: translateY(100%); }
}

/* ── Reduced motion: a fade, nothing moves or blurs ──
   base.css shortens every animation to 0.01 ms; these !important rules win on specificity and keep the fade. */

@media (prefers-reduced-motion: reduce) {
  .dialog[open] .dialog__panel {
    animation: dialog-fade-in var(--dur-base) var(--ease-standard) both !important;
  }
  .dialog[data-closing] .dialog__panel {
    animation: dialog-fade-out var(--dur-fast) var(--ease-standard) both !important;
  }
  .dialog[data-closing]::backdrop {
    animation-duration: var(--dur-fast);
  }
  .dialog__close .glyph {
    transition: none;
  }
}

@keyframes dialog-fade-in {
  from { opacity: 0; }
}
@keyframes dialog-fade-out {
  to { opacity: 0; }
}