/*
 * field -- ein Formularfeld aus Beschriftung, Eingabe, Hinweis und
 * Fehlermeldung. Trägt die Eingabe selbst, egal ob input, select oder
 * textarea.
 * Ausprägung: --choice für Ankreuzfelder und Auswahlknöpfe, bei denen die
 * Beschriftung neben der Eingabe steht.
 * Zustände: --invalid (die Meldung kommt vom Server) und disabled.
 *
 * Geprüft wird ausschließlich im Backend. Das Feld stellt nur dar, was der
 * Server zurückmeldet -- es enthält keine eigene Prüfung.
 *
 * field-group stellt Felder, die zusammengehören, nebeneinander -- etwa Breitengrad,
 * Längengrad und Radius. So viele Spalten, wie mit Mindestbreite passen; schmal brechen
 * sie untereinander. Gedacht für die Verwaltung, die am Desktop gepflegt wird.
 */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-group {
  display: grid;
  /* min(): unter 300px wäre die Mindestbreite sonst breiter als die Spalte */
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-4);
  /* Felder mit und ohne Hinweis beginnen oben auf einer Linie */
  align-items: start;
}

.field__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.field__control {
  inline-size: 100%;
  min-width: 0;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-medium);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.field__control::placeholder {
  color: var(--color-text-muted);
}

.field__control:hover {
  border-color: var(--color-primary);
}

.field__control:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

textarea.field__control {
  min-height: calc(var(--tap-target) * 2.5);
  resize: vertical;
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.field__error {
  color: var(--color-error);
  font-size: var(--font-size-small);
}

.field--invalid .field__control {
  border-color: var(--color-error);
}

.field--choice {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  /* Die ganze Zeile ist das Tap-Ziel, nicht nur das kleine Kästchen */
  min-height: var(--tap-target);
}

.field--choice .field__control {
  flex: none;
  inline-size: var(--choice-size);
  block-size: var(--choice-size);
  min-height: 0;
  padding: 0;
  accent-color: var(--color-primary);
}

.field--choice .field__label {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
}

/* In den Abschnitten von Gast und Teilnehmer (layout__band, trail-style.md): Felder
   48px hoch, rund wie die Karten, Grund immer hell (im dunklen Schema die Kartenfarbe),
   Beschriftung und Fehler fett, ein Fehler mit kräftigerem Rand */
.layout__band .field__label {
  font-weight: var(--font-weight-bold);
}

.layout__band .field__control {
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-large);
  background-color: oklch(100% 0 0);
}

.layout__band .field__control:focus-visible {
  border-color: var(--color-primary);
}

.layout__band .field--invalid .field__control {
  border-width: 2px;
}

.layout__band .field__error {
  font-weight: var(--font-weight-bold);
}

.layout__band .field--choice .field__control {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

/* Wahlen in einer Reihe (Filter nach Kategorien, Ja und Nein beim Alter) als runde
   Marken mit sichtbarem Kästchen; die ganze Marke ist das Tap-Ziel. Die Legende fett. */
.layout__band .cluster > .field--choice {
  gap: var(--space-2);
  padding-inline: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-card);
}

.layout__band fieldset > legend {
  margin-block-end: var(--space-2);
  font-weight: var(--font-weight-bold);
}

/* Neben einem Kästchen steht die Beschriftung in normaler Schrift */
.layout__band .field--choice .field__label {
  font-weight: var(--font-weight-regular);
}

@media (prefers-color-scheme: dark) {
  .layout__band .field__control {
    background-color: oklch(23% 0.014 var(--accent-hue));
  }
}