/* nps-alert.css — inline banners. Tones: info/success/warning/danger. */

.nps-alert {
  display: flex;
  gap: var(--nps-space-3);
  align-items: flex-start;
  padding: var(--nps-space-4);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  background: var(--nps-surface);
}

.nps-alert__body { flex: 1; min-width: 0; }
.nps-alert__title {
  font-weight: var(--nps-fw-semibold);
  margin: 0 0 var(--nps-space-1);
}
.nps-alert__text {
  margin: 0;
  font-size: var(--nps-fs-caption);
  color: var(--nps-ink-muted);
}
.nps-alert__actions {
  display: flex;
  gap: var(--nps-space-2);
  margin-top: var(--nps-space-3);
}

.nps-alert--info { background: var(--nps-info-soft); border-color: color-mix(in srgb, var(--nps-info) 40%, var(--nps-border)); }
.nps-alert--success { background: var(--nps-success-soft); border-color: color-mix(in srgb, var(--nps-success) 40%, var(--nps-border)); }
.nps-alert--warning { background: var(--nps-warning-soft); border-color: color-mix(in srgb, var(--nps-warning) 40%, var(--nps-border)); }
.nps-alert--danger { background: var(--nps-danger-soft); border-color: color-mix(in srgb, var(--nps-danger) 40%, var(--nps-border)); }