/*
 * A modal <dialog> opened with showModal() or an invoker command
 * (command="show-modal"). base.css keeps inline <dialog open> static.
 *
 * The <dialog> itself is a transparent, full-viewport overlay that scrolls;
 * the visible card is .dialog__panel inside it, which grows with its content.
 * So a long dialog runs past the bottom of the screen and scrolls like the
 * page does, instead of scrolling inside a fixed box.
 */
@layer components {
  .dialog:modal {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100%;
    max-block-size: none;
    margin: 0;
    padding: var(--space-8) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .dialog::backdrop {
    background: var(--color-backdrop);
  }

  /* The page underneath stops scrolling; only the overlay's scrollbar shows. */
  html:has(.dialog:modal) {
    overflow: hidden;
  }

  /* Fills the overlay behind the panel, so clicking beside the panel closes. */
  .dialog__dismiss {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: default;

    &:hover {
      background: transparent;
    }
  }

  .dialog__panel {
    position: relative;
    inline-size: 80vw;
    margin-inline: auto;
    border: var(--border);
    border-radius: var(--radius-l);
    background: var(--color-paper);
    box-shadow: var(--shadow-overlay);
  }

  /* Scrolls away with the panel; it does not pin to the viewport. */
  .dialog__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-7);
    border-block-end: var(--border);
    border-start-start-radius: var(--radius-l);
    border-start-end-radius: var(--radius-l);
    background: var(--color-paper);
  }

  .dialog__close {
    margin-inline-start: auto;
  }

  .dialog__meta {
    font: var(--text-small);
    color: var(--color-muted);
  }

  /* A short dialog (one form): narrow, and set down from the top. */
  .dialog__panel--narrow {
    inline-size: min(40rem, 80vw);
    margin-block-start: 12vh;
  }

  .dialog__title {
    font: var(--text-title);
    color: var(--color-ink);
  }

  .dialog__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-7) var(--space-7);

    & > * {
      margin: 0;
    }
  }
}