/* a bottom sheet on phones, a centred dialog from 768px (Rekaz storefront values) */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 1.5rem);       /* browsers without dvh */
  max-height: calc(100dvh - 1.5rem);      /* 24px of the page stays visible above the sheet */
  padding: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-block-end: 0;
  border-radius: 2rem 2rem 0 0;
  background: #fff;
  color: inherit;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  translate: 0 100%;
  transition: translate 500ms cubic-bezier(0.32, 0.72, 0, 1), overlay 500ms allow-discrete, display 500ms allow-discrete;
}
.sheet[open] { display: flex; translate: 0 0; }
@starting-style { .sheet[open] { translate: 0 100%; } }
.sheet::backdrop { background: rgb(0 0 0 / 0.2); }

.sheet__header { flex-shrink: 0; padding: 28px 20px 16px; touch-action: none; } /* the drag handle */
.sheet__body {
  flex: 1 1 auto;
  min-height: 0;                          /* lets the body shrink and scroll instead of pushing the footer out */
  overflow-y: auto;
  overscroll-behavior: contain;           /* scrolling the sheet never scrolls the page behind it */
  padding: 0 20px 20px;
}
.sheet__footer {
  flex-shrink: 0;
  margin-block-start: auto;
  border-block-start: 1px solid #e5e5e5;
  padding: 16px 20px max(1rem, env(safe-area-inset-bottom));
}
.sheet__body:last-child { padding-block-end: max(1rem, env(safe-area-inset-bottom)); } /* no footer */
.sheet__close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 1; width: 32px; height: 32px; }

/* a sheet that fills the screen even when its content is short: a map, staff, a long list */
.sheet--full { height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); }
.sheet--tall { height: calc(100vh - 1rem); height: calc(100dvh - 1rem); }
/* sign-in: never taller than the small viewport, whatever the bars do */
.sheet--form { max-height: min(92dvh, 100svh); }

@media (min-width: 48rem) {
  .sheet {
    inset: 0;
    margin: auto;
    width: calc(100% - 3rem);
    max-width: 45rem;                     /* compact 30rem, wide 56rem */
    max-height: calc(100dvh - 3rem);
    border-block-end: 1px solid #e5e5e5;
    border-radius: 2rem;
    box-shadow: 0 2px 8px rgb(19 19 19 / 0.08), 0 4px 20px rgb(19 19 19 / 0.12);
    translate: none;
    opacity: 1;
    scale: 1;
    transition: opacity 150ms ease, scale 150ms ease, overlay 150ms allow-discrete, display 150ms allow-discrete;
  }
  .sheet:not([open]) { opacity: 0; scale: 0.95; }
  @starting-style { .sheet[open] { opacity: 0; scale: 0.95; } }
  .sheet--compact { max-width: 30rem; }
  .sheet--wide { max-width: 56rem; }
  .sheet--full, .sheet--tall { height: min(48rem, calc(100dvh - 3rem)); }
  .sheet--form { max-height: calc(100dvh - 3rem); }
  .sheet__header { padding: 48px 48px 28px; }
  .sheet__body, .sheet__footer { padding-inline: 48px; }
}

html:has(.sheet[open]) { overflow: hidden; } /* the page behind does not scroll */
@media (prefers-reduced-motion: reduce) { .sheet { transition-duration: 0.01ms; } }