/* ============================================================
   SHELLS Design-System — Alert component system
   Four semantic states × two variants (inline + toast).
   Replaces ad-hoc warning/error styling per STYLE_GUIDE.md §4.11.
   Audit of pre-existing surfaces: docs/styleguide/ALERT_AUDIT.md
   ============================================================ */

/* ─── Inline alert — info/warning/error/success box in content ─── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-xl);
    border-left: var(--border-thick) solid var(--primary-color);
    background: var(--primary-tint);
    color: var(--textcolor-fullcontrast);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: var(--spacing-lg) 0;
}

.alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

.alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert__title {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.alert--info {
    border-left-color: var(--primary-color);
    background: var(--primary-tint);
    color: var(--textcolor-fullcontrast);
}

.alert--warning {
    border-left-color: var(--warning-500);
    background: var(--warning-50);
    color: var(--warning-800);
}

.alert--error {
    border-left-color: var(--error-500);
    background: var(--error-50);
    color: var(--error-800);
}

.alert--success {
    border-left-color: var(--signals-successcolor);
    background: var(--success-50);
    color: var(--success-900);
}

/* ─── Toast alert — floating, auto-dismiss, corner-anchored ─── */
.alert-toast {
    position: fixed;
    bottom: var(--spacing-2xl);
    right: var(--spacing-2xl);
    z-index: var(--z-toast);
    min-width: 280px;
    max-width: 480px;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-xl);
    background: var(--neutrals-0);
    box-shadow: var(--shadow-xl);
    border-left: var(--border-thick) solid var(--primary-color);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--textcolor-fullcontrast);
    animation: alert-toast-in var(--transition-base) ease-out;
}

.alert-toast--info    { border-left-color: var(--primary-color); }
.alert-toast--warning { border-left-color: var(--warning-500); }
.alert-toast--error   { border-left-color: var(--error-500); }
.alert-toast--success { border-left-color: var(--signals-successcolor); }

@keyframes alert-toast-in {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes alert-toast-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Hidden state — for alerts toggled visible by JS */
.alert--hidden { display: none; }

/* Auto-dismiss toast — fades out after 2.5 s.
   Parent should remove the DOM element after animation completes
   (setTimeout ~3 s) to keep DOM clean. */
.alert-toast--autohide {
    animation: alert-toast-in var(--transition-base) ease-out,
               alert-toast-out var(--transition-base) ease-out 2.5s forwards;
}

/* ─── Responsive — narrower viewports ─── */
@media (max-width: 768px) {
    .alert-toast {
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        left: var(--spacing-lg);
        max-width: none;
    }
}