.campus-notification-region {
    align-items: center;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: .55rem;
    left: 50%;
    max-width: min(42rem, calc(100vw - 2rem));
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%);
    width: max-content;
    z-index: 2147483647;
}

.campus-notification {
    align-items: center;
    background: var(--cui-ink);
    border: 1px solid color-mix(in srgb, var(--cui-surface) 20%, transparent);
    border-left: .32rem solid var(--cui-faint);
    border-radius: .45rem;
    box-shadow: var(--cui-shadow);
    color: var(--cui-primary-ink);
    display: grid;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
    gap: .7rem;
    grid-template-columns: 1.45rem minmax(0,1fr) 1.4rem;
    line-height: 1.4;
    max-width: min(42rem, calc(100vw - 2rem));
    min-width: min(22rem, calc(100vw - 2rem));
    opacity: 0;
    padding: .78rem .72rem .78rem .9rem;
    pointer-events: auto;
    transform: translateY(1rem) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}

.campus-notification.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.campus-notification--success { border-left-color: var(--cui-success); }
.campus-notification--error { background: var(--cui-error); border-left-color: var(--cui-error-bg); }
.campus-notification--warning { background: var(--cui-warn); border-left-color: var(--cui-warn-bg); }
.campus-notification__icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: flex; font-size: .72rem; height: 1.35rem; justify-content: center; width: 1.35rem; }
.campus-notification__message { overflow-wrap: anywhere; }
.campus-notification__close { background: transparent; border: 0; color: inherit; cursor: pointer; font: 400 1.35rem/1 sans-serif; margin: 0; opacity: .82; padding: 0; }
.campus-notification__close:hover, .campus-notification__close:focus-visible { opacity: 1; }

@media (max-width: 520px) {
    .campus-notification-region { bottom: max(.65rem, env(safe-area-inset-bottom)); }
    .campus-notification { font-size: .76rem; min-width: calc(100vw - 1.25rem); }
}

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