/* The page behind holds still while the sheet is up (sheet.js sets the class). */
:root.has-open-sheet,
:root.has-open-sheet body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* A form sheet like iPadOS's: centered on wide screens, rising from the bottom edge on phones. */
.sheet {
  --sheet-enter: 0 var(--space-6);
  --sheet-scale: 0.96;

  inline-size: min(var(--size-sheet), calc(100% - 2 * var(--space-gutter)));
  max-block-size: calc(100dvh - 2 * var(--space-gutter));
  padding: 0;
  margin: auto;
  overflow: hidden auto;
  color: var(--color-label);
  background: var(--color-sheet);
  border: 0;
  border-radius: var(--radius-sheet);
  outline: none;
  box-shadow: var(--shadow-sheet);
  overscroll-behavior: contain;
}

.sheet[open] {
  animation: sheet-in var(--duration-sheet) var(--easing-spring);
}

.sheet.is-closing {
  animation: sheet-out var(--duration-fade) var(--easing-standard) forwards;
}

.sheet::backdrop {
  background: var(--color-sheet-backdrop);
  -webkit-backdrop-filter: var(--blur-sheet-backdrop);
  backdrop-filter: var(--blur-sheet-backdrop);
  animation: backdrop-in var(--duration-sheet) var(--easing-standard);
}

.sheet.is-closing::backdrop {
  animation: backdrop-out var(--duration-fade) var(--easing-standard) forwards;
}

.sheet__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-card-blank);
}

.sheet__art {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.sheet__art.is-smooth {
  image-rendering: auto;
}

.sheet__close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
}

.sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.sheet__title,
.sheet__meta,
.sheet__description,
.sheet__label,
.sheet__chips {
  margin: 0;
}

.sheet__title {
  font-size: var(--font-size-apple-title-1);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-apple-title);
  letter-spacing: var(--tracking-title);
}

.sheet__meta {
  font-size: var(--font-size-apple-subheadline);
  font-weight: var(--font-weight-medium);
  color: var(--color-label-muted);
}

.sheet__description {
  font-size: var(--font-size-apple-body);
  line-height: var(--leading-apple-body);
  color: var(--color-label-secondary);
}

.sheet__label {
  padding-block-start: var(--space-2);
  font-size: var(--font-size-apple-footnote);
  font-weight: var(--font-weight-semibold);
  color: var(--color-label-muted);
}

.sheet__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.sheet__chip {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-apple-footnote);
  font-weight: var(--font-weight-medium);
  background: var(--color-chip);
  border-radius: var(--radius-pill);
}

.sheet__play {
  margin-block-start: var(--space-3);
}

@media (max-width: 40rem) {
  .sheet {
    --sheet-enter: 0 100%;
    --sheet-scale: 1;

    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: calc(100dvh - var(--space-10));
    margin-block-end: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  .sheet__body {
    padding-block-end: max(var(--space-8), env(safe-area-inset-bottom));
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    translate: var(--sheet-enter);
    scale: var(--sheet-scale);
  }
}

@keyframes sheet-out {
  to {
    opacity: 0;
    translate: var(--sheet-enter);
    scale: var(--sheet-scale);
  }
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes backdrop-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open],
  .sheet.is-closing,
  .sheet::backdrop,
  .sheet.is-closing::backdrop {
    animation: none;
  }
}