/* docs/DESIGN_SYSTEM.md Section 10.10: full-width, danger-left-border
   banner. Flex row + gap means the collapsed (base.css's .icon:empty)
   icon simply isn't there and the message sits alone against the
   danger border -- still a clearly-styled, deliberate error state,
   not an unfinished-looking one. */

.error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width) solid var(--border-color);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.error-banner__icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  color: var(--color-danger-text);
}

.error-banner__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}