/* ═══════════════════════════════════════════════════════════
   Alerts & status messages — extracted from TNonline
   (Settings status-message / Login error / export-error banner)
   Inline banners in success / error / warning / info tones,
   with an optional leading icon and a dismiss button.
   ═══════════════════════════════════════════════════════════ */

.tn-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--tn-radius);
    font-size: var(--tn-font-size-sm);
    margin-bottom: 18px;
    border: 1px solid transparent;
}

.tn-alert .bi:first-child {
    font-size: 1rem;
    flex-shrink: 0;
}

.tn-alert-text {
    flex: 1;
}

/* ── Technical detail line — a muted sub-line under .tn-alert-text carrying
   the machine-readable cause (a missing config key, a URL that 404'd)
   beneath the human sentence. Inherits the alert variant's own color
   (dialed down via opacity) rather than a fixed neutral tone, so it stays
   in-hue and legible on every --success/--warning/--error/--info tint. ── */
.tn-alert-detail {
    display: block;
    margin-top: var(--tn-space-xs);
    font-size: var(--tn-font-size-xs);
    opacity: 0.72;
}

.tn-alert-close {
    background: none;
    border: none;
    color: inherit;
    padding: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--tn-transition);
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.tn-alert-close:hover {
    opacity: 1;
}

/* ── Tones ──
   Body text uses the -text variants, not the vivid base tokens — the vivid
   ones are for decorative fills (see utilities.css). --success was on
   --tn-success at 3.98:1 here, under AA; --error was on --tn-danger at
   4.99:1, passing by 0.49. --warning below already had this right. */
.tn-alert--success {
    background: var(--tn-success-light);
    color: var(--tn-success-text);
    border-color: rgba(45, 139, 78, 0.12);
}

.tn-alert--error {
    background: var(--tn-danger-light);
    color: var(--tn-danger-text);
    border-color: rgba(197, 48, 48, 0.12);
}

.tn-alert--warning {
    background: var(--tn-warning-light);
    color: var(--tn-warning-text);
    border-color: rgba(184, 134, 11, 0.15);
}

.tn-alert--info {
    background: var(--tn-accent-light);
    color: var(--tn-accent);
    border-color: rgba(var(--tn-accent-rgb), 0.15);
}