/* portal-feedback.css — the corner region portal-toast.js lifts success
   messages into. Same token strategy as portal-tagfield.css: a public
   theme's semantic tokens first, then the Tailwind palette vars the
   control panel (and its dark skin) define, then literal hexes.

   A toast is rendered inside the page but styled as a fixed corner card
   from the first paint, so it never appears in the flow and then jumps.
   The script's job is stacking, timing and dismissal — not placement.
   Without it the message simply sits in the corner and stays. */

.toast-region {
    position: fixed;
    z-index: 60;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    position: fixed;
    z-index: 60;
    right: 1rem;
    bottom: 1rem;
    width: min(24rem, calc(100vw - 2rem));
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.18);
    border: 1px solid var(--success-border, var(--color-emerald-200, #a7f3d0));
    border-left-width: 3px;
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--success-soft, var(--color-emerald-50, #ecfdf5));
    color: var(--success, var(--color-emerald-800, #065f46));
    font-size: 0.875rem;
    line-height: 1.4;
}

/* in the region the stack owns the placement, so each toast goes back
   to being an ordinary block inside it */
.toast-region .toast {
    position: static;
    width: auto;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease;
}

.toast-region .toast--in {
    opacity: 1;
    transform: translateY(0);
}

.toast-region .toast--leaving {
    opacity: 0;
    transform: translateY(0.5rem);
}

.toast--error {
    border-color: var(--danger-border, var(--color-red-200, #fecaca));
    background: var(--danger-soft, var(--color-red-50, #fef2f2));
    color: var(--danger, var(--color-red-800, #991b1b));
}

.toast__close {
    flex: none;
    margin-left: auto;
    padding: 0 0.125rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1.2;
    opacity: 0.6;
    cursor: pointer;
}

.toast__close:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .toast-region .toast {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .toast-region .toast--leaving {
        opacity: 0;
    }
}

/* ---- inline status, beside the button ---------------------------------
   No box, no background: a line of text in the button row, so a save
   confirmation costs no layout and reads as part of the control it
   belongs to. The error variant is the same line in red and does not
   fade. */

.form-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--success, var(--color-emerald-700, #047857));
    transition: opacity 300ms ease;
}

.form-status--error {
    color: var(--danger, var(--color-red-700, #b91c1c));
}

.form-status--leaving {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .form-status {
        transition: none;
    }
}