/* Generic modal built on the native <dialog> element.
 *
 * Markup:
 *   <button data-modal-open="my-modal">Open</button>
 *   <dialog id="my-modal" class="modal" aria-labelledby="my-modal-title">
 *       <div class="modal__panel">
 *           <h2 id="my-modal-title" class="modal__title">…</h2>
 *           <div class="modal__body">…</div>
 *           <div class="modal__actions">
 *               <button class="btn btn--ghost" data-modal-close>Cancel</button>
 *               <button class="btn btn--danger" type="submit">Confirm</button>
 *           </div>
 *       </div>
 *   </dialog>
 *
 * The companion modal.js wires up:
 *   - [data-modal-open="id"]   click → open the matching <dialog>
 *   - [data-modal-close]       click → close the containing dialog
 *   - Click on the dialog's backdrop → close
 *
 * <dialog> gives us focus trapping, Escape-to-close, and proper
 * accessibility semantics for free.
 */

.modal {
    border: none;
    padding: 0;
    border-radius: 10px;
    width: min(90vw, 440px);
    max-width: 90vw;
    background: var(--surface-card);
    color: var(--content-fg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, var(--alpha-shadow-lg));
}

.modal::backdrop {
    background: var(--surface-modal-scrim);
}

.modal__panel {
    padding: 1.25rem 1.5rem 1.1rem;
}

.modal__title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal__body {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.95rem;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.4rem;
}

/* Subtle entry animation. */
.modal[open] {
    animation: modal-in 0.15s ease-out;
}

.modal[open]::backdrop {
    animation: backdrop-in 0.15s ease-out;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

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