/* sheet: a bottom sheet. Colours, size, timing and the curve are custom properties on .sh; set them on .sh, or on a
   class you add to it, to theme every sheet or one. */

.sh {
  --sh-surface: #ffffff;
  --sh-text: inherit;
  --sh-backdrop: rgb(10 10 12 / 0.42);
  --sh-grabber: rgb(18 18 18 / 0.2);
  --sh-grabber-hover: rgb(18 18 18 / 0.36);
  --sh-radius: 10px;
  --sh-width: 640px;
  /* The space kept above the sheet at its tallest, so the page behind still shows. */
  --sh-gap: 24px;
  --sh-shadow: 0 0 0 1px rgb(18 18 18 / 0.05), 0 -18px 48px -18px rgb(0 0 0 / 0.28);
  --sh-z: 1000;
  /* Quick to start, long to settle, the way a sheet lands on iOS. */
  --sh-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sh-duration: 500ms;
  position: fixed;
  inset: 0;
  z-index: var(--sh-z);
  padding-top: max(var(--sh-gap), calc(env(safe-area-inset-top) + 10px));
  color: var(--sh-text);
  -webkit-tap-highlight-color: transparent;
}
.sh[hidden] { display: none; }
/* A sheet that leaves the page usable lets every touch outside it through. */
.sh-modeless { pointer-events: none; }

.sh-backdrop {
  position: absolute;
  inset: 0;
  background: var(--sh-backdrop);
  opacity: 0;
  touch-action: none;
}
.sh-animate .sh-backdrop { transition: opacity var(--sh-duration) var(--sh-ease); }

.sh-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, var(--sh-width));
  margin-inline: auto;
  border-radius: var(--sh-radius) var(--sh-radius) 0 0;
  background: var(--sh-surface);
  box-shadow: var(--sh-shadow);
  transform: translate3d(0, 100%, 0);
  touch-action: none;
  pointer-events: auto;
  will-change: transform;
}
.sh-panel:focus { outline: none; }
/* The surface carries on below the sheet, so pulling it up past its top never opens a gap underneath. */
.sh-panel::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 100vh;
  background: inherit;
  pointer-events: none;
}
.sh-animate .sh-panel { transition: transform var(--sh-duration) var(--sh-ease); }

/* The handle: a full-width strip to grab, with the pill that says so. It is also a button that moves the sheet
   between its stops, or closes a sheet with one stop. */
.sh-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--sh-radius) var(--sh-radius) 0 0;
  background: transparent;
  color: inherit;
  touch-action: none;
}
.sh-handle::before {
  content: "";
  width: 36px;
  height: 5px;
  border-radius: 999px;
  background: var(--sh-grabber);
  transition: background-color 160ms ease, scale 200ms var(--sh-ease);
}
.sh-handle:focus { outline: none; }
.sh-handle:focus-visible::before { outline: 2px solid currentColor; outline-offset: 3px; }
.sh[data-dragging] .sh-handle::before { background: var(--sh-grabber-hover); scale: 1.1 1; }
@media (hover: hover) and (pointer: fine) {
  .sh-handle { cursor: grab; }
  .sh-handle:hover::before { background: var(--sh-grabber-hover); }
  .sh[data-dragging],
  .sh[data-dragging] .sh-handle { cursor: grabbing; }
}

.sh-body {
  flex: 1;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Below the top stop the content does not scroll: a drag on it moves the sheet up instead. */
.sh-panel:not([data-top]) .sh-body,
.sh[data-dragging] .sh-body { overflow: hidden; }
.sh[data-dragging] { -webkit-user-select: none; user-select: none; }

/* Behind a sheet with `background`, the page steps back onto this colour. */
html.sh-stepped,
html.sh-stepped body { background-color: var(--sh-behind, #0b0b0c); }

/* Reduced motion: the sheet is where it ends up at once; it still follows a finger. */
@media (prefers-reduced-motion: reduce) {
  .sh { --sh-duration: 1ms; }
}