/* Colours come from the --tone-* tokens (src/styles/tokens.css), so light mode
   gets a tinted wash with coloured text and dark mode a solid fill with light
   text, with no theme selectors here. */
.mc-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 8px;
    border-left: 4px solid currentColor;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    animation: mc-alert-in 0.2s ease-out;
}

.mc-alert.danger { color: var(--tone-danger-fg); background-color: var(--tone-danger-bg); }
.mc-alert.warning { color: var(--tone-warning-fg); background-color: var(--tone-warning-bg); }
.mc-alert.success { color: var(--tone-success-fg); background-color: var(--tone-success-bg); }
.mc-alert.info { color: var(--tone-info-fg); background-color: var(--tone-info-bg); }

/* Doubled class to out-rank host styles that size every <i> in their scope,
   e.g. the auth form's 42px field-icon boxes. */
.mc-alert .mc-alert-icon {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: 18px;
    line-height: 1.1;
}
.mc-alert-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

@keyframes mc-alert-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-alert { animation: none; }
}