/* Inline status messages after an action. The icon and text carry the meaning; colour only
   reinforces it. Errors use .error-summary (form.css) instead. */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.notice p {
  margin: 0;
}

.notice .icon {
  margin-top: 0.15em;
}

.notice--success {
  border-left-color: var(--color-success);
  background: var(--color-success-bg);
}

.notice--success .icon {
  color: var(--color-success);
}

.notice--info {
  border-left-color: var(--color-info);
  background: var(--color-info-bg);
}

.notice--info .icon {
  color: var(--color-info);
}

.notice--warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.notice--warning .icon {
  color: var(--color-warning);
}