/* ============================================================================
   Dialog
   ----------------------------------------------------------------------------
   Native <dialog> styling for the shared confirmation dialog
   (shared/_confirm_dialog) that replaces window.confirm for
   data-turbo-confirm. The UA centers an open modal dialog on its own; this
   just skins the panel and backdrop with the design tokens.
   ============================================================================ */

@layer components {
  .confirm-dialog {
    width: min(380px, calc(100vw - var(--space-8)));
    padding: var(--space-5);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    /* Materialize, don't pop: scale and blur animate together so the panel
       reads as a surface arriving, and it leaves along the same path it came
       (allow-discrete keeps display/overlay around for the exit). The global
       reduced-motion rule collapses all of this to an instant change. */
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    transition: opacity var(--speed) var(--ease-out),
                transform var(--speed) var(--ease-out),
                filter var(--speed) var(--ease-out),
                overlay var(--speed) var(--ease-out) allow-discrete,
                display var(--speed) var(--ease-out) allow-discrete;
  }
  .confirm-dialog:not([open]) {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(4px);
  }
  @starting-style {
    .confirm-dialog[open] {
      opacity: 0;
      transform: scale(0.96);
      filter: blur(4px);
    }
  }

  .confirm-dialog::backdrop {
    background: rgba(20, 16, 10, 0.45);
    transition: opacity var(--speed) var(--ease-out),
                overlay var(--speed) var(--ease-out) allow-discrete,
                display var(--speed) var(--ease-out) allow-discrete;
    opacity: 1;
  }
  .confirm-dialog:not([open])::backdrop { opacity: 0; }
  @starting-style {
    .confirm-dialog[open]::backdrop { opacity: 0; }
  }

  .confirm-dialog p {
    margin: 0 0 var(--space-5);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-bottom: 0;
  }
}