.modal-overlay {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, black 40%, transparent);
    display: none;            /* toggled by aria-hidden */
    place-items: center;
    z-index: 1000;
}

.modal-overlay[aria-hidden="false"] {
    display: grid;
}

/* Reuse card visual, just constrain size and add a subtle entrance */
.modal,
.card.modal {
    position: relative; /* Ensure it doesn't shift */
    width: min(520px, 92vw);
    max-width: 520px;
    outline: none;
    animation: modal-pop 120ms ease-out;
    background: var(--panel);
    /* Prevent any shifting by locking dimensions */
    box-sizing: border-box;
}

/* Prevent hover effects from changing modal position */
.modal:hover,
.card.modal:hover,
.modal:focus,
.card.modal:focus,
.modal:focus-within,
.card.modal:focus-within {
    transform: none !important;
    margin: 0 !important;
    padding: inherit !important;
}

.modal__header,
.card.modal .modal__header {
    margin-bottom: 0.25rem;
}

.modal__actions,
.card.modal .modal__actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

/* Buttons inherit base button styles; add semantic accents */
button.danger {
    background: #5e1414 !important;
    color: #fdf5eb;
}
button.danger:hover {
    background: #a93226;
}
button.secondary {
    background: transparent;
    border: 1px solid currentColor;
}

/* Prevent button hover/focus from affecting modal position */
.modal button:hover,
.modal button:focus {
    transform: none !important;
}

@keyframes modal-pop {
    from { transform: translateY(6px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}