.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    border-left: 3px solid currentColor;
    margin-bottom: var(--sp-3);
    background: var(--color-surface);
    font-size: var(--fs-sm);
    min-width: 0;
}
.alert__msg   { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--color-text); }
.alert__close { color: inherit; font-size: 1.25rem; line-height: 1; }
/* Inline action cluster on an alert — sits at the trailing edge
   alongside the message. Used by tasks/index.php's error banner
   (Retry + Open System) so the operator has an explicit
   affordance instead of the prose-only "Refresh in a moment"
   it had pre-tick. `margin-left: auto` shoves the cluster to the
   right while the surrounding `.alert` flexbox keeps the message
   left-aligned. */
.alert__actions {
    display: inline-flex;
    gap: var(--sp-2);
    margin-left: var(--sp-3);
    flex-wrap: wrap;
}
.alert--success { color: var(--color-success); background: var(--color-success-soft); }
.alert--error   { color: var(--color-danger);  background: var(--color-danger-soft); }
.alert--warning { color: var(--color-warning); background: var(--color-warning-soft); }
.alert--info    { color: var(--color-info);    background: var(--color-info-soft); }

/* Optional structure inside the message: a bold lead and a bullet list. */
.alert__title { font-weight: 600; display: block; margin-bottom: var(--sp-1); }
.alert__list { margin: var(--sp-1) 0 0; padding-left: 1.1em; color: var(--color-text-muted); font-size: var(--fs-sm); }
.alert__list li + li { margin-top: var(--sp-half); }