/* auth-alert (auth-alert.ejs). Every selector starts with .auth-alert; keyframes are named auth-alert-*.
   Colours are the component's own custom properties so a variant only swaps them. */
.auth-alert {
    --auth-alert-bg: #fdf2f4;
    --auth-alert-border: #f5c2cb;
    --auth-alert-ink: #a1202e;
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 1rem; padding: 10px 12px;
    background: var(--auth-alert-bg); border: 1px solid var(--auth-alert-border); border-radius: 10px;
    color: var(--auth-alert-ink); font-size: .875rem; line-height: 1.45; white-space: pre-line;
    animation: auth-alert-in .18s ease-out backwards;
}
.auth-alert--success { --auth-alert-bg: #f0faf4; --auth-alert-border: #b7e4c7; --auth-alert-ink: #1b6b3a; }
.auth-alert[hidden] { display: none; }
.auth-alert svg { flex-shrink: 0; margin-top: 1px; }
/* A begin/end banner's own content: it takes the row beside the icon and wraps as normal markup. */
.auth-alert-body { flex: 1 1 auto; min-width: 0; white-space: normal; }
@keyframes auth-alert-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-alert { animation: none; } }