@layer components {
  /* Dialog / Modal
   * Native <dialog> element styling with backdrop.
   * Pairs with modal_controller.js, turbo_confirm_controller.js,
   * and confirmation_controller.js.
   * Entry/exit animation via @starting-style (no JavaScript).
   */

  dialog {
    --dialog-max-width: min(90vw, 32rem);

    position: relative;
    max-width: var(--dialog-max-width);
    padding: var(--space-6) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-canvas);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);

    /* Entry animation */
    opacity: 1;
    scale: 1;
    transition:
      opacity var(--transition-base),
      scale var(--transition-base),
      overlay var(--transition-base) allow-discrete,
      display var(--transition-base) allow-discrete;

    @starting-style {
      opacity: 0;
      scale: 0.95;
    }

    /* Exit animation (when closing) */
    &:not([open]) {
      opacity: 0;
      scale: 0.95;
    }
  }

  dialog::backdrop {
    background: oklch(0% 0 0 / 0.4);
    transition:
      background var(--transition-base),
      overlay var(--transition-base) allow-discrete,
      display var(--transition-base) allow-discrete;

    @starting-style {
      background: oklch(0% 0 0 / 0);
    }
  }

  /* --- Size variants --- */

  dialog.dialog--sm { --dialog-max-width: min(90vw, 24rem); }
  dialog.dialog--lg { --dialog-max-width: min(90vw, 48rem); }
  dialog.dialog--full {
    --dialog-max-width: min(95vw, 72rem);
    min-height: 80dvh;
  }

  /* --- Sub-components --- */

  dialog header,
  dialog .dialog__header {
    margin-block-end: var(--space-4);
    font-weight: 600;
  }

  dialog .dialog__body {
    overflow-y: auto;
    max-height: 60dvh;
  }

  dialog footer,
  dialog .dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-block-start: var(--space-6);
  }

  /* Close button (top-right) */
  dialog .dialog__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-1);
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius);
    transition: color var(--transition-fast), background var(--transition-fast);

    &:hover {
      color: var(--color-text);
      background: var(--color-surface);
    }
  }
}