/* ============================================================================
   Formulare.

   ACHTUNG — diese Datei geht ueber das Kern-Inventar hinaus. Das Designsystem enthaelt
   kein Komponenten-Set fuer Eingabefelder; die Formen sind aus dem Suchfeld
   der Kopfzeile und den Wireframes E und B abgeleitet. Sie sind bewusst
   zurueckhaltend, damit sie spaeter ohne Bruch durch die echten Styleguide-Werte
   ersetzt werden koennen.

   Was NICHT verhandelbar ist und schon jetzt gilt:
   - Zielgroesse >= 44 px (NFA-18)
   - sichtbarer Fokus aus der Zone (FE-35, siehe base.css)
   - Fehler nie nur ueber Farbe (WCAG 1.4.1) — immer mit Text
   ========================================================================== */

/* --- Feld: Beschriftung, Bedienelement, Hinweis --------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.field__label {
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--zone-text-strong);
}

/* Hinweis steht UEBER dem Feld, nicht darunter: wer per Screenreader
   navigiert, hoert ihn dann vor der Eingabe, nicht danach. */
.field__hint {
  font-size: var(--font-size-nav-sub);
  color: var(--zone-text-quiet);
}

.field__error {
  font-size: var(--font-size-nav-sub);
  font-weight: 700;
  color: var(--text-error);
}

/* --- Eingabefelder -------------------------------------------------------- */
.input,
.textarea,
.select {
  inline-size: 100%;
  min-block-size: var(--size-field);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border: var(--border-hairline) solid var(--zone-border-interactive);
  border-radius: var(--radius-button);
  background: var(--zone-carrier-bg);
  color: var(--zone-carrier-text);
  font: inherit;
}

/* Einzeilige Felder sind genau so hoch wie ein Knopf — nicht nur mindestens.
   Sonst wächst das Eingabefeld mit der Zeilenhöhe des Fliesstexts (46 px),
   das Auswahlfeld mit „normal" (42 px), und in einer Reihe stehen drei
   verschieden hohe Kästen. Die Höhe zentriert den Text von selbst. */
.input,
.select {
  block-size: var(--size-field);
  padding-block: 0;
}

.textarea {
  min-block-size: calc(var(--size-field) * 2);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--zone-text-quiet);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
  border-color: var(--border-error);
  border-width: var(--border-indicator);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background: var(--bg-sunken);
  color: var(--zone-text-quiet);
  cursor: not-allowed;
}

/* Das Suchfeld der Kopfzeile — vollrund, mit Icon davor. */
.input--search {
  border-radius: var(--radius-full);
  padding-inline-start: var(--space-5);
}

/* --- Auswahl: Radio und Checkbox ------------------------------------------ *
 * accent-color statt nachgebauter Grafik: das native Bedienelement bleibt
 * erhalten, damit Tastatur, Screenreader und Hochkontrastmodus funktionieren.
 * Die ganze Zeile ist Klickflaeche und damit >= 44 px hoch.                  */
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-target-min);
  cursor: pointer;
}

.choice__control {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  accent-color: var(--zone-action-bg);
  flex: none;
}

.choice__label {
  color: var(--zone-text-strong);
}

/* --- Gruppe zusammengehoeriger Felder ------------------------------------- */
.fieldset {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fieldset__legend {
  font-size: var(--font-size-body);
  font-weight: 700;
  color: var(--zone-text-strong);
  margin-block-end: var(--space-2);
  padding: 0;
}

/* --- Filter-Auswahl · Mehrfach mit Badges --------------------------------- *
 * Geschlossen: sieht aus wie ein Eingabefeld, zeigt die Auswahl als Chips,
 * bei Überlänge ein „…". Geöffnet: Dropdown (kein natives <select>), Inhalt
 * als Liste — für Spiele mit Cover. Als <details>, ohne JavaScript (NFA-13);
 * Skript ergänzt Klick nach draußen und „…" nur bei echtem Überlauf.
 */
.filter-select {
  position: relative;
  display: block;
}

.filter-select > summary {
  list-style: none;
  cursor: pointer;
}

.filter-select > summary::-webkit-details-marker {
  display: none;
}

.filter-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--size-field);
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border: var(--border-hairline) solid var(--zone-border-interactive);
  border-radius: var(--radius-button);
  background: var(--zone-carrier-bg);
  color: var(--zone-carrier-text);
  font: inherit;
}

.filter-select__values {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
}

/* Ausgewählter Text im Feld — kein Chip. Rot/durchgestrichen nur am ×. */
.filter-select__value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  max-inline-size: 12rem;
  color: var(--zone-text-strong);
  font-size: var(--font-size-chip);
  line-height: 1.2;
  white-space: nowrap;
}

.filter-select__value-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ein einzelner Wert ohne Entfernen-X — der Umkreis: so gross wie der
   Platzhalter daneben, nicht wie ein Chip der Mehrfachauswahl. */
.filter-select__text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--zone-text-strong);
}

.filter-select__value:has(.filter-select__remove:hover) > .filter-select__value-label,
.filter-select__value:has(.filter-select__remove:focus-visible) > .filter-select__value-label {
  color: var(--zone-text-danger);
  text-decoration: line-through;
}

.filter-select__value > .cover,
.filter-select__value > .tile {
  --size-cover: var(--space-4);
  inline-size: var(--space-4);
  block-size: var(--space-4);
  font-size: var(--font-size-chip);
  flex: none;
}

.filter-select__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--zone-text-quiet);
  cursor: pointer;
}

.filter-select__remove:hover,
.filter-select__remove:focus-visible {
  color: var(--zone-text-danger);
}

.filter-select__remove > .icon {
  font-size: var(--font-size-chip);
}

.filter-select__ellipsis {
  display: none;
  flex: none;
  color: var(--zone-text-quiet);
  font-weight: 700;
}

.filter-select__values[data-overflow="true"] > .filter-select__ellipsis {
  display: inline;
}

.filter-select__placeholder {
  color: var(--zone-text-quiet);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-select__trigger > .icon {
  flex: none;
  color: var(--zone-text-quiet);
}

.filter-select[open] > .filter-select__trigger {
  border-color: var(--zone-focus, var(--zone-border-interactive));
}

.filter-select[open] > .filter-select__trigger > .icon {
  transform: rotate(180deg);
}

.filter-select__menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));

  /* Die Liste richtet sich nach ihrem Inhalt, nicht nach der Breite des Feldes
     (Issue #66): Ein schmales Feld schnitt Spieltitel sonst mitten im Wort ab.
     Schmaler als das Feld wird sie nie, breiter als der Bildschirm auch nicht. */
  inset-inline-start: 0;
  inline-size: max-content;
  min-inline-size: 100%;
  max-inline-size: min(var(--size-menu-max), 90vw);
  z-index: var(--layer-open);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-block-size: calc(var(--size-field) * 8);
  overflow: auto;
  padding: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  box-shadow: 0 var(--shadow-offset-float) var(--shadow-blur-float) 0
    var(--shadow-control);
}

/* Steht über den Optionen und beginnt an derselben Kante wie sie — bündig
   links wirkte es sonst wie aus der Liste gerutscht. Das Icon davor sagt,
   was der Klick tut, ohne den Text zu verlängern. */
.filter-select__reset {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  align-self: start;
  margin: 0;
  margin-block-end: var(--space-1);
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  border: 0;
  background: transparent;
  color: var(--zone-text-quiet);
  font: inherit;
  font-size: var(--font-size-chip);
  cursor: pointer;

  /* Im Menue der gemerkten Suchen ist Zuruecksetzen ein echter Link (die
     nackte Adresse IST der Vorgabefilter, das geht ohne Skript). Im Menue
     wird trotzdem nichts unterstrichen — wie beim Eintrag daneben. */
  text-decoration: none;
}

.filter-select__reset > .icon {
  font-size: var(--font-size-chip);
}

/* Ohne Auswahl gibt es nichts zurückzusetzen — dann steht die Zeile auch nicht
   da. Sie hielt früher ihren Platz, damit die Liste beim ersten Haken nicht
   wegrutscht; übrig blieb ein leerer Streifen über jedem frisch geöffneten
   Menü (Issue #66). Das Wegrutschen passiert einmal und ist das kleinere Übel. */
.filter-select__reset[data-idle="true"] {
  display: none;
}

.filter-select__reset:hover,
.filter-select__reset:focus-visible {
  color: var(--zone-text-strong);
}

/* Wie der Eintrag im Dropdown: Menuemass, nicht Fliesstextmass (Issue #37).
   Die Zielflaeche von 44 px bleibt davon unberuehrt. */
.filter-select__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--size-target-min);
  padding-inline: var(--space-3);
  padding-block: var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
  color: var(--zone-text-strong);
  font-size: var(--font-size-small);
  overflow: hidden;
}

/* In der engen Dropdown-Zeile nicht die Listen-Cover-Größe — sonst ragen
   die Bilder aus der Option und in die Nachbarzeile. */
.filter-select__option > .cover,
.filter-select__option > .tile {
  --size-cover: var(--size-chip);
  inline-size: var(--size-chip);
  block-size: var(--size-chip);
  font-size: var(--font-size-chip);
  flex: none;
}

.filter-select__option:hover {
  background: var(--bg-sunken);
}

.filter-select__option:has(input:checked) {
  background: color-mix(in srgb, var(--zone-action-bg) 12%, transparent);
  font-weight: 700;
}

.filter-select__option-label {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Zeitraum und Umkreis: Moduswahl + passendes Panel. Sichtbarkeit über :has
   am gewählten Radio — ohne Skript (NFA-13). */
.filter-select--period > .filter-select__menu,
.filter-select--radius > .filter-select__menu {
  min-inline-size: max(100%, 18rem);
  max-block-size: none;
}

/* Keine Linie am Fuss: Solange die Modi stehen, folgt darunter nichts — die
   Linie hätte nichts zu trennen und sah nach einem abgeschnittenen Abschnitt
   aus. Getrennt wird erst die zweite Ebene (der Umkreis), und zwar von dort. */
.filter-select__modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Wenn/Dann: Nach der Wahl verschwinden die Modi, die Wahl steht kleiner als
   Überschrift über dem Panel, und Zurücksetzen ganz oben holt die Modi
   zurück. Gilt für Zeitraum und Umkreis gleich. */
.filter-select--period:has([name="mm"]:checked) .filter-select__modes,
.filter-select--radius:has([name="where"]:checked) .filter-select__modes {
  display: none;
}

.filter-select__stage {
  display: none;
  margin: 0 0 var(--space-1);
  padding-inline: var(--space-2);
  font-size: var(--font-size-chip);
  font-weight: 700;
  color: var(--zone-text-quiet);
}

.filter-select--period:has([name="mm"][value="days"]:checked) .filter-select__stage--days,
.filter-select--period:has([name="mm"][value="day"]:checked) .filter-select__stage--day,
.filter-select--period:has([name="mm"][value="range"]:checked) .filter-select__stage--range,
.filter-select--radius:has([name="where"][value="home"]:checked) .filter-select__stage--home,
.filter-select--radius:has([name="where"][value="custom"]:checked) .filter-select__stage--custom {
  display: block;
}

.filter-select__panel {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-select--period:has([name="mm"][value="days"]:checked) .filter-select__panel--days,
.filter-select--period:has([name="mm"][value="day"]:checked) .filter-select__panel--dates,
.filter-select--period:has([name="mm"][value="range"]:checked) .filter-select__panel--dates {
  display: flex;
}

.filter-select--period:has([name="mm"][value="day"]:checked) .filter-select__date-field--to {
  display: none;
}

/* Umkreis: Das Postleitzahl-Feld erscheint nur bei „andere", die Kilometer
   erst, wenn überhaupt ein Modus gewählt ist — sie sind die zweite Ebene
   („im Umkreis von … um WAS?"). Ausgeblendet bleiben die Radios im Formular
   und schicken weiter den gültigen Umkreis mit. */
.filter-select--radius:has([name="where"][value="custom"]:checked) .filter-select__panel--code,
.filter-select--radius:has([name="where"]:checked) .filter-select__panel--radius {
  display: flex;
}

.filter-select--radius .filter-select__panel--code {
  padding: var(--space-2);
}

.filter-select--radius .filter-select__panel--radius {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--border-hairline) solid var(--zone-border);
}

/* --- Reihenfolge: Dropdown plus Richtung ---------------------------------- *
 * Das Richtungszeichen liegt IM Feld, aber ausserhalb des <details>: Darin
 * waere es zugeklappt mit versteckt, denn <details> zeigt geschlossen nur das
 * <summary>. Der Traeger .filter-sort ist der Bezugspunkt dafuer.           */
.filter-sort {
  position: relative;
}

/* Das Zeichen sitzt am rechten Rand des Feldes, der Pfeil des Dropdowns
   rueckt davor. Der Trigger haelt genau die Breite des Zeichens frei — so
   braucht die Rechnung keine Zahl, die nicht aus den Tokens kommt. */
.filter-select--sort > .filter-select__trigger {
  padding-inline-end: calc(var(--size-target-min) + var(--space-1));
}

/* Eigenes Bedienelement im selben Feld: Die Haarlinie sagt, dass der Klick
   hier etwas anderes tut als der Klick daneben. */
.filter-sort__direction {
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-target-min);
  border-inline-start: var(--border-hairline) solid var(--zone-border);
  color: var(--zone-text-quiet);
  cursor: pointer;
}

.filter-sort__direction:hover {
  color: var(--zone-text-strong);
}

.filter-sort__direction:has(:focus-visible) {
  outline: var(--border-focus) solid var(--zone-focus);
  outline-offset: calc(-1 * var(--border-focus));
  border-radius: var(--radius-control);
  color: var(--zone-text-strong);
}

.filter-select__dates {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2);
}

/* Ein beschriftetes Feld im Menü — Datum beim Zeitraum, Postleitzahl beim
   Umkreis. */
.filter-select__date-field,
.filter-select__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-select__date-label,
.filter-select__field-label {
  font-size: var(--font-size-chip);
  color: var(--zone-text-quiet);
}

.filter-select__date-label--day {
  display: none;
}

.filter-select--period:has([name="mm"][value="day"]:checked) .filter-select__date-label--from {
  display: none;
}

.filter-select--period:has([name="mm"][value="day"]:checked) .filter-select__date-label--day {
  display: inline;
}

.filter-select__date-field > .input,
.filter-select__field > .input {
  inline-size: 100%;
  min-inline-size: 0;
}

/* Treffer-Vorschau am Übernehmen-Knopf — primary, eng am Text. */
.button > .filter-apply__count {
  margin-inline-start: var(--space-1);
  min-block-size: auto;
  padding-block: 0;
  font-size: var(--font-size-chip);
  font-weight: 700;
  background: var(--zone-action-bg);
  color: var(--zone-action-text);
  border-color: transparent;
}

/* --- Vorschläge beim Tippen ------------------------------------------------ *
 * Ein Eingabefeld mit Liste darunter — Spielewähler, „Postleitzahl oder Ort". *
 * Ohne Skript bleibt das Textfeld; die Liste gibt es nur mit Skript.           */
.suggest {
  position: relative;
}

.suggest__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.suggest__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-inline: var(--space-2);
  padding-block: var(--space-1);
  border: var(--border-hairline) solid var(--zone-border);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
}

.suggest__chip > .cover,
.suggest__chip > .tile {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.suggest__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--layer-open);
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  list-style: none;
  border: var(--border-hairline) solid var(--zone-border);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  box-shadow: 0 var(--shadow-offset-float) var(--shadow-blur-float) 0
    var(--shadow-control);
}

.suggest__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.suggest__option:hover,
.suggest__option[data-active="true"] {
  background: var(--bg-region);
}

.suggest__option > .cover,
.suggest__option > .tile {
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

/* Ein Ort mit seinen Postleitzahlen: Kopfzeile, darunter die Codes in einer
   Reihe. Hat der Ort mehr als acht, sagt „… n weitere" es. */
.suggest__group + .suggest__group {
  margin-block-start: var(--space-1);
}

.suggest__group-title {
  margin: 0;
  padding: var(--space-2) var(--space-2) 0;
  font-size: var(--font-size-chip);
  color: var(--zone-text-quiet);
}

.suggest__codes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2) var(--space-1);
}

.suggest__option--code {
  inline-size: auto;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  font-variant-numeric: tabular-nums;
}

.suggest__more {
  font-size: var(--font-size-chip);
  color: var(--zone-text-quiet);
}

/* Im Dropdown-Menü des Filters steht die Liste im Fluss: Das Menü scrollt
   (overflow: auto) und würde eine schwebende Liste abschneiden. Die
   Beschriftung wird dort so klein wie die anderen Feldzusätze im Menü. */
.filter-select__menu .suggest__list {
  position: static;
  margin-block-start: var(--space-1);
  box-shadow: none;
}

.filter-select__menu .suggest > .field__label {
  font-size: var(--font-size-chip);
  color: var(--zone-text-quiet);
}