/*
 * notice -- eine Rückmeldung des Servers über dem Inhalt.
 * notice__icon zeigt die Art an, notice__body trägt den Text, notice__list mehrere
 * Meldungen untereinander.
 * Zustände: ohne Modifier ein Hinweis, --success für Geglücktes, --warning für
 * etwas, das noch fehlt, --error für Zurückgewiesenes.
 *
 * Farbig sind Rahmen und Symbol, nicht der Text: eine lange Fehlermeldung ganz in
 * Rot liest sich schlecht. Das Symbol ist Pflicht -- an der Farbe allein darf die
 * Art nicht hängen, sonst ist sie für einen Teil der Leser nicht da. Wofür das
 * Symbol steht, gehört zusätzlich als verstecktes Wort in den Text.
 *
 * Der Inhalt kommt immer vom Server; im Browser wird nichts geprüft.
 */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
}

.notice__icon {
  flex: none;
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  /* Rückt das Symbol auf die Mitte der ersten Zeile */
  margin-block-start: calc((1em * var(--line-height-base) - var(--icon-size)) / 2);
  color: var(--color-primary);
}

.notice__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notice__list {
  margin: 0;
  padding-inline-start: var(--space-5);
}

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

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

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

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

.notice--error {
  border-color: var(--color-error);
}

.notice--error .notice__icon {
  color: var(--color-error);
}

/* In den Abschnitten von Gast und Teilnehmer (layout__band, trail-style.md): eine Karte
   mit farbiger Kante links; die Art steht in Kante und Symbol, der Text bleibt in
   Schriftfarbe */
.layout__band .notice {
  padding: var(--space-4) var(--space-5);
  border-color: var(--color-border);
  border-inline-start: 0.375rem solid var(--color-primary);
  border-radius: var(--radius-large);
  background-color: var(--color-card);
  box-shadow: var(--shadow-small);
}

.layout__band .notice--success {
  border-inline-start-color: var(--color-success);
}

.layout__band .notice--warning {
  border-inline-start-color: var(--color-warning);
}

.layout__band .notice--error {
  border-inline-start-color: var(--color-error);
}