/* web-design-elements kit: dialog.css v1 */
/* Native <dialog class="kit-dlg"> styled to the site: the browser's default box (thick border, padding, centred
   max sizes) is reset, the backdrop is the site's overlay colour, and motion runs only without a reduced-motion
   preference. Map the --kit-dlg-* custom properties to your tokens on the dialog or an ancestor; do not edit this file.
   Never give a dialog an unconditional display value: author display overrides the browser's closed-state
   display:none. Use .your-class[open]{display:flex} instead. */
dialog.kit-dlg {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  margin: var(--kit-dlg-top, 6vh) auto auto;
  padding: 0;
  width: calc(100% - 2 * var(--kit-dlg-gutter, 1rem));
  max-width: var(--kit-dlg-width, 42rem);
  height: fit-content;
  max-height: var(--kit-dlg-max-h, 86vh);
  overflow: auto;
  overscroll-behavior: contain; /* scrolling inside the dialog never scrolls the page */
  border: 1px solid var(--kit-dlg-border, CanvasText);
  border-radius: var(--kit-dlg-radius, 1rem);
  background: var(--kit-dlg-bg, Canvas);
  color: var(--kit-dlg-fg, CanvasText);
  box-shadow: var(--kit-dlg-shadow, none);
}
dialog.kit-dlg::backdrop {
  background: var(--kit-dlg-backdrop, rgb(0 0 0 / .5));
  overflow: hidden; /* with overscroll-behavior, wheel and touch over the backdrop do not scroll the page */
  overscroll-behavior: contain;
}
dialog.kit-dlg:focus-visible { outline: none; } /* the dialog box itself takes focus only as a fallback */
@media (prefers-reduced-motion: no-preference) {
  dialog.kit-dlg[open] { animation: kit-dlg-pop .2s ease-out; }
  dialog.kit-dlg[open]::backdrop { animation: kit-dlg-fade .2s ease-out; }
}
@keyframes kit-dlg-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes kit-dlg-fade { from { opacity: 0; } }
@media (forced-colors: active) {
  dialog.kit-dlg { border-color: CanvasText; }
}