.modal {
    border: none;
    padding: 0;
    overflow: hidden;
    max-height: 100dvh;
    max-width: 100vw;
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 300ms ease;
}

.modal.is-open::backdrop {
    opacity: 1;
}


/* ── Toast (from bottom → center) ───────────────────────── */

.modal--bottom {
    inset: unset;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100vh);
    background: var(--color-primary-dark);
    color: var(--color-white);
    font-size: 20px;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-default);
    white-space: nowrap;
    opacity: 0;
    transition: transform 250ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity 200ms ease;
}

.modal--bottom.is-open {
    transform: translate(-50%, -50%);
    opacity: 1;
}


/* ── Drawer (slides in from the bottom on mobile, from the right on desktop) ──── */

.modal--right {
    background: var(--color-white);
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 1, 1);
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
}

.modal--right.is-open {
    transform: translateY(0);
    transition: transform 280ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* 768px is intentional here (not 1024px like other pages) — must stay in sync
   with board.css's .add-task-modal/.task-detail overrides. */
@media (min-width: 768px) {
    .modal--right {
        width: fit-content;
        height: fit-content;
        max-width: none;
        max-height: none;
        margin: auto;
        border-radius: var(--border-radius-lg);
        transform: translateX(100%);
    }

    .modal--right.is-open {
        transform: translateX(0);
    }
}

/* The edit-task drawer uses the >=768px rounded/backdrop-visible treatment
   at every width, unlike the regular Add Task modal which stays full-screen
   on mobile. Caps width below .modal's own 100vw (instead of clearing it
   like the >=768px block does above) so narrow phones keep a visible side
   margin/backdrop instead of the drawer touching both edges. */
.modal--right:has(.add-task-modal--edit) {
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 2 * var(--space-sm));
    margin: auto;
    border-radius: var(--border-radius-lg);
    transform: translateX(100%);
}

.modal--right:has(.add-task-modal--edit).is-open {
    transform: translateX(0);
}


/* ── Centered modal (scale + fade) ──────────────────────── */

.modal--center {
    border-radius: var(--border-radius-lg);
    background: var(--color-white);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity 150ms ease;
}

.modal--center.is-open {
    transform: scale(1);
    opacity: 1;
}


/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal::backdrop {
        transition-duration: 0s;
    }
}