/**
 * CFE Toast — Foundation
 *
 * Top-center auto-dismiss notifications. Ink-chip variant (dark slab).
 * No close button — toasts disappear after their duration.
 * Use via `CFE.toast(msg, { variant, duration })`.
 *
 * Spec: ClickUp 86b9yx0z9.
 */

.cfe-toast-host {
    position: fixed;
    top: var(--cfe-toast-top-offset, 100px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cfe-ds-space-2, 8px);
    z-index: 100000;
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.cfe-toast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--cfe-ds-color-ink, #1B2A3B);
    color: #fff;
    border: 0;
    border-radius: var(--cfe-ds-radius-sm, 8px);
    padding: 11px 18px 11px 14px;
    font-family: var(--cfe-ds-font-body), system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    box-shadow: 0 10px 28px rgba(27, 42, 59, 0.28),
                0 2px 6px rgba(27, 42, 59, 0.18);
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
    transition: opacity .22s ease, transform .22s ease;
}

.cfe-toast.is-on {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.cfe-toast.is-leaving {
    opacity: 0;
    transform: translateY(-16px) scale(0.98);
}

.cfe-toast__ic {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.cfe-toast__ic svg {
    width: 18px;
    height: 18px;
}

.cfe-toast__msg {
    max-width: 280px;
}

/* Icon tints sized for legibility on the dark ink slab.
 * Warning/error use lighter shades than canon ember/alert tokens —
 * canon values fail contrast against --cfe-ds-color-ink. */
.cfe-toast--success .cfe-toast__ic { color: var(--cfe-ds-color-mint-border, #6EE7B7); }
.cfe-toast--info    .cfe-toast__ic { color: var(--cfe-ds-color-sky-border, #93C5FD); }
.cfe-toast--warning .cfe-toast__ic { color: #FBBF77; }
.cfe-toast--error   .cfe-toast__ic { color: #FCA28C; }

@media (max-width: 600px) {
    .cfe-toast-host {
        left: var(--cfe-ds-space-4, 16px);
        right: var(--cfe-ds-space-4, 16px);
        transform: none;
        max-width: none;
        width: auto;
    }
    .cfe-toast { width: 100%; }
    .cfe-toast__msg { max-width: none; }
}

/* Rich-content parts (used by cart toasts via CFE.toast(..., {html:true})). */
/* Title truncates so a long course name can't blow out the toast width
 * (which clipped the text and pushed the toast under the open cart drawer). */
.cfe-toast__t {
    font-weight: 600;
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.cfe-toast__sub  { opacity: .72; font-weight: 500; white-space: nowrap; }
.cfe-toast__chip {
    display: inline-block;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 99px;
    padding: 1px 8px;
    margin: 0 1px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}