/* message: eine Meldung über oder in einem Formular — Erfolg, Hinweis,
   Warnung, Fehler.

   Farbige Kante links, dezente Fläche dahinter. Die Stufe steckt nie allein
   in der Farbe: jede Meldung sagt im Text, worum es geht, und der Fehlerfall
   trägt zusätzlich ein Wort davor.

   Alles einspaltig — auch die Herkunftszeile steht unter dem Text, nicht
   daneben. */
.message {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--space-05) solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.message__title {
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}

/* Die Stelle, auf die sich die Meldung bezieht — eine Zeile aus der Eingabe.
   Nichtproportional, damit man sie in der Eingabe wiederfindet. */
.message__source {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: break-word;
}

.message--success {
  border-inline-start-color: var(--color-status-success);
  background: var(--color-status-success-soft);
}

.message--success .message__title { color: var(--color-status-success); }

.message--info {
  border-inline-start-color: var(--color-status-info);
  background: var(--color-status-info-soft);
}

.message--info .message__title { color: var(--color-status-info); }

.message--warning {
  border-inline-start-color: var(--color-status-warning);
  background: var(--color-status-warning-soft);
}

.message--warning .message__title { color: var(--color-status-warning); }

.message--danger {
  border-inline-start-color: var(--color-status-danger);
  background: var(--color-status-danger-soft);
}

.message--danger .message__title { color: var(--color-status-danger); }

/* Mehrere Meldungen untereinander */
.message-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}