/* Native dialogs keep their existing focus, Escape and close-button behavior.
   Only their presentation changes on desktop; page sections remain in flow. */
@media (min-width: 720px) {
  html[data-viewport="desktop"] {
    --modal-radius: 32px;
    --desktop-popup-height: calc(100dvh - 64px);
  }

  html[data-viewport="desktop"] dialog {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(520px, calc(100vw - 64px));
    min-width: 0;
    max-width: calc(100vw - 64px);
    height: fit-content;
    max-height: var(--desktop-popup-height);
    margin: auto;
    padding: 32px;
    border: 1px solid #ffffff1f;
    border-radius: 32px;
    background: #242424;
    box-shadow: 0 24px 80px #0006;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #ffffff3d transparent;
  }

  html[data-viewport="desktop"] dialog::backdrop,
  html[data-viewport="desktop"] .lists-dialog::backdrop,
  html[data-viewport="desktop"] .lists-film-sheet::backdrop,
  html[data-viewport="desktop"] .movie-save-dialog::backdrop,
  html[data-viewport="desktop"] .list-create-sheet::backdrop,
  html[data-viewport="desktop"] .library-dialog::backdrop {
    background: #0009;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Explicit selectors override the mobile sheets' fixed bottom anchoring. */
  html[data-viewport="desktop"] .lists-dialog,
  html[data-viewport="desktop"] .lists-film-sheet,
  html[data-viewport="desktop"] .board-dialog,
  html[data-viewport="desktop"] .movie-save-dialog,
  html[data-viewport="desktop"] .list-create-sheet,
  html[data-viewport="desktop"] .library-dialog {
    inset: 0;
    width: min(520px, calc(100vw - 64px));
    max-width: calc(100vw - 64px);
    height: fit-content;
    max-height: var(--desktop-popup-height);
    margin: auto;
    border: 1px solid #ffffff1f;
    border-radius: 32px;
  }

  html[data-viewport="desktop"] .lists-dialog,
  html[data-viewport="desktop"] .lists-film-sheet,
  html[data-viewport="desktop"] .movie-save-dialog {
    padding: 28px;
  }

  html[data-viewport="desktop"] .lists-film-sheet-close {
    top: 24px;
    right: 24px;
  }

  /* Keep form actions visible while long author-search results scroll. */
  html[data-viewport="desktop"] .list-create-sheet {
    padding: 0;
    overflow: hidden;
  }

  html[data-viewport="desktop"] .list-create-sheet .create-list-form,
  html[data-viewport="desktop"] .list-create-sheet .create-authors-panel {
    max-height: calc(var(--desktop-popup-height) - 2px);
  }

  html[data-viewport="desktop"] .agent-name-sheet[open] {
    display: flex;
    flex-direction: column;
  }

  html[data-viewport="desktop"] .list-create-sheet .create-authors-panel .create-sheet-body {
    min-height: 0;
  }

  html[data-viewport="desktop"] .list-create-sheet .create-sheet-header {
    padding: 24px 28px;
  }

  html[data-viewport="desktop"] .list-create-sheet .create-sheet-body {
    padding-inline: 28px;
  }

  html[data-viewport="desktop"] .list-create-sheet .create-sheet-footer {
    padding: 24px 28px;
  }

  html[data-viewport="desktop"] .agent-name-sheet .create-sheet-body {
    padding-bottom: 28px;
  }

  /* Movie details are a bounded reading popup rather than a full-screen sheet. */
  html[data-viewport="desktop"] .library-dialog {
    width: min(760px, calc(100vw - 64px));
    padding: 0;
    background: #181818;
  }

  html[data-viewport="desktop"] .library-dialog .library-sheet {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 28px;
  }

  html[data-viewport="desktop"] .library-dialog .library-film-backdrop {
    width: calc(100% + 56px);
    height: 320px;
    margin-inline: -28px;
    margin-top: -76px;
  }

  html[data-viewport="desktop"] .library-dialog .library-detail-hero {
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 24px;
  }

  html[data-viewport="desktop"] .library-dialog .library-detail-poster {
    width: 144px;
    height: 216px;
  }

  html[data-viewport="desktop"] .library-dialog .cinema-collection-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
  }

  html[data-viewport="desktop"] .library-dialog .library-film-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
  }

  html[data-viewport="desktop"] .movie-save-toast,
  html[data-viewport="desktop"] .board-toast {
    bottom: 28px;
    max-width: min(480px, calc(100vw - 64px));
  }
}