/* alert.css — pattern: page-level message banner.
   Variants: info, success, warning, danger.
   role="status" or role="alert" is required on the element so AT users
   are notified.  See FSE_UI.md → Alert. */

.biq-alert {
    display: flex;
    gap: var(--biq-space-3);
    padding: var(--biq-space-3) var(--biq-space-4);
    border-radius: var(--biq-radius-md);
    border: 1px solid var(--biq-color-border);
    background: var(--biq-color-surface-raised);
    color: var(--biq-color-text-primary);
    line-height: var(--biq-lh-snug);
}

.biq-alert__icon {
    flex: 0 0 auto;
    width: var(--biq-space-5);
    height: var(--biq-space-5);
    display: inline-grid;
    place-items: center;
    color: currentColor;
}

.biq-alert__body {
    flex: 1 1 auto;
}

.biq-alert__title {
    font-weight: var(--biq-fw-semibold);
    margin: 0 0 var(--biq-space-1) 0;
}

.biq-alert__close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--biq-color-text-muted);
    cursor: pointer;
    padding: var(--biq-space-1);
    border-radius: var(--biq-radius-sm);
}

.biq-alert__close:hover { color: var(--biq-color-text-primary); background: var(--biq-color-surface-sunk); }

.biq-alert--info    { background: var(--biq-color-info-soft);    border-color: var(--biq-color-info);    color: var(--biq-color-info); }
.biq-alert--success { background: var(--biq-color-success-soft); border-color: var(--biq-color-success); color: var(--biq-color-success); }
.biq-alert--warning { background: var(--biq-color-warning-soft); border-color: var(--biq-color-warning); color: var(--biq-color-warning); }
.biq-alert--danger  { background: var(--biq-color-danger-soft);  border-color: var(--biq-color-danger);  color: var(--biq-color-danger-strong); }

.biq-alert--info    .biq-alert__body,
.biq-alert--success .biq-alert__body,
.biq-alert--warning .biq-alert__body,
.biq-alert--danger  .biq-alert__body { color: var(--biq-color-text-primary); }