/* Popups: native dialogs. */
.mq-popup { width: min(var(--mq-popup-width, 560px), calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--kit-radius, 12px); background: var(--kit-surface, Canvas); color: inherit; box-shadow: 0 24px 64px rgb(0 0 0 / .35); overflow: auto; }
.mq-popup::backdrop { background: rgb(0 0 0 / .55); }
.mq-popup--bottom { margin-block-end: 1rem; margin-block-start: auto; }
.mq-popup--corner { margin: auto 1rem 1rem auto; }
.mq-popup__body { padding: 1.5rem; }
.mq-popup__close-form { position: sticky; top: 0; display: flex; justify-content: flex-end; height: 0; z-index: 2; }
.mq-popup__close { margin: .5rem; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 0; background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.mq-popup[open] { animation: mq-popup-in .25s ease-out; }
@keyframes mq-popup-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Entrances: hidden only when a script is there to reveal them, and never
   for someone who asked for less motion. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .mq-anim { transition: opacity var(--mq-anim-duration, 600ms) ease var(--mq-anim-delay, 0ms), transform var(--mq-anim-duration, 600ms) cubic-bezier(.2, .7, .2, 1) var(--mq-anim-delay, 0ms); }
  .mq-anim:not(.is-in) { opacity: 0; }
  .mq-anim--up:not(.is-in) { transform: translateY(32px); }
  .mq-anim--down:not(.is-in) { transform: translateY(-32px); }
  .mq-anim--left:not(.is-in) { transform: translateX(-32px); }
  [dir="rtl"] .mq-anim--left:not(.is-in) { transform: translateX(32px); }
  .mq-anim--zoom:not(.is-in) { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .mq-popup[open] { animation: none; }
}