/* HeroUI Toast, adapted for the server-rendered HTMX application.
   The DOM follows HeroUI's region / toast / indicator / content / close anatomy. */
.hui-toast-region {
    position: fixed;
    inset: auto 20px 20px auto;
    z-index: var(--z-toast, 1000);
    display: grid;
    gap: 10px;
    width: min(460px, calc(100vw - 40px));
    pointer-events: none;
}

.hui-toast-region--dialog {
    position: absolute;
    inset: auto 16px 16px auto;
    z-index: 2;
    width: min(420px, calc(100% - 32px));
}

.hui-toast {
    --hui-toast-accent: var(--brand, var(--cp-brand, #256d56));
    --hui-toast-indicator-bg: var(--brand-soft, var(--cp-brand-soft, #e8f4ef));
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 11px;
    min-height: 58px;
    padding: 13px 12px 13px 14px;
    border-radius: 14px;
    background: var(--card, var(--cp-card, #fff));
    color: var(--ink, var(--cp-ink, #1f2925));
    box-shadow: 0 12px 36px rgb(18 35 28 / 18%), 0 2px 8px rgb(18 35 28 / 8%);
    pointer-events: auto;
    transform-origin: bottom right;
    animation: hui-toast-enter 240ms cubic-bezier(.16, 1, .3, 1) both;
}

.hui-toast[data-variant="success"] {
    --hui-toast-accent: var(--ok-ink, var(--cp-ok-ink, #176c4b));
    --hui-toast-indicator-bg: var(--ok-bg, var(--cp-ok-bg, #e6f6ee));
}

.hui-toast[data-variant="warning"] {
    --hui-toast-accent: var(--warn, #8a5a12);
    --hui-toast-indicator-bg: var(--warn-bg, #fff4d6);
}

.hui-toast[data-variant="danger"] {
    --hui-toast-accent: var(--err, var(--cp-danger, #ad352f));
    --hui-toast-indicator-bg: var(--danger-soft, var(--cp-danger-soft, #fff0ef));
}

.hui-toast__indicator {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hui-toast-indicator-bg);
    color: var(--hui-toast-accent);
}

.hui-toast__indicator svg,
.hui-toast__close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hui-toast__content {
    display: grid;
    align-self: center;
    gap: 3px;
    min-width: 0;
    padding-block: 3px;
}

.hui-toast__title {
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.hui-toast__description {
    overflow-wrap: anywhere;
    color: var(--muted, var(--cp-muted, #66736d));
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: 13px;
    line-height: 1.4;
}

.hui-toast__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: currentColor;
    opacity: .58;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease;
}

.hui-toast__close:hover {
    background: rgb(20 35 28 / 7%);
    opacity: 1;
}

.hui-toast__close:focus-visible {
    outline: 2px solid var(--hui-toast-accent);
    outline-offset: 1px;
    opacity: 1;
}

.hui-toast.is-leaving {
    animation: hui-toast-leave 180ms cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes hui-toast-enter {
    from { opacity: 0; transform: translate3d(18px, 6px, 0) scale(.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hui-toast-leave {
    to { opacity: 0; transform: translate3d(14px, 0, 0) scale(.98); }
}

@media (max-width: 640px) {
    .hui-toast-region,
    .hui-toast-region--dialog {
        inset: auto 12px 12px;
        width: auto;
    }

    .hui-toast {
        grid-template-columns: 28px minmax(0, 1fr) 32px;
        min-height: 56px;
        padding: 12px 10px 12px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hui-toast,
    .hui-toast.is-leaving {
        animation-duration: 1ms;
    }
}