/* DE: „Wörter wählen": eine Auswahlfläche, keine Anzeigefläche. Deshalb sind die Kacheln klein und dicht — man
   will viele Wörter auf einmal überblicken —, und das Gewählte steht OBEN, weil es das Ergebnis der Arbeit ist.
   Ohne JavaScript voll bedienbar: das Häkchen ist eine echte Checkbox, das Label die Trefferfläche.
   EN: „Choose words": a picking surface, not a display surface. So the tiles are small and dense — one wants to
   see many words at once — and what has been chosen sits ON TOP, because it is the result of the work. Fully
   usable without JavaScript: the tick is a real checkbox, the label its hit area. */

.picker { margin-block-start: var(--sp-lg); }
.picker__head { margin-block-end: var(--sp-md); }
.picker__lead { color: var(--text-muted); margin-block-start: var(--sp-xs); max-width: 60ch; }

.picker__chosen { border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); padding: var(--sp-md); margin-block-end: var(--sp-lg); }
.picker__chosen-title { font-size: var(--step-0); margin: 0 0 var(--sp-sm);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm); }
.picker__warn { font-weight: 400; font-size: var(--step--1); color: var(--text-muted); }
.picker__empty { color: var(--text-muted); margin: 0; }
/* DE: Das Gewählte nach WÜRFELN gegliedert — die Reihenfolge entscheidet, worauf ein Wort landet, und das muss
   man sehen, um einen Würfel für Haarfarben und einen für Körperbeschreibungen bauen zu können. Der Rest, der
   noch keinen Würfel füllt, steht abgesetzt: er kommt (noch) nicht auf die Seiten, und das darf man ihm ansehen.
   EN: The selection grouped by DIE — order decides where a word lands, and one has to see that in order to
   build one die of hair colours and one of body descriptions. The remainder that does not yet fill a die stands
   apart: it does not (yet) reach the faces, and that should be visible on it. */
.picker__die, .picker__rest { margin-block-end: var(--sp-md); }
/* Keine Versalien: „WÜRFEL 1" wäre für ein Kind mit Leseschwierigkeiten schlechter zu lesen als „Würfel 1"
   (Owner-Entscheid 2026-08-17, geprüft von no_uppercase_headings_test). Die Sperrung darf bleiben. */
.picker__die-title { font-size: var(--step--1); letter-spacing: .04em; font-weight: 700;
  color: var(--text-muted); margin: 0 0 var(--sp-2xs); }
.picker__die-note { font-size: var(--step--1); color: var(--text-muted); margin: 0 0 var(--sp-2xs);
  max-width: 60ch; }
/* Gestrichelt, nicht rot: „reicht noch nicht" ist eine Auskunft, kein Fehler. */
.picker__rest { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--sp-sm); }

.picker__chips { list-style: none; padding: 0; margin: 0 0 var(--sp-md);
  display: flex; flex-wrap: wrap; gap: var(--sp-2xs); }
.picker__chip { display: inline-flex; align-items: center; gap: var(--sp-2xs);
  padding: var(--sp-2xs) var(--sp-sm); border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px); background: var(--surface-2); font-size: var(--step--1); }
/* Die Griffe sind klein, aber die Trefferfläche ist es nicht: 2,25 rem ≈ 36 px, plus der Abstand der Chips
   untereinander — mit dem Finger auf dem Smartboard zu treffen, nicht nur mit der Maus. */
.picker__nudge, .picker__drop { display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.25rem; block-size: 2.25rem; margin-block: -0.4rem; border-radius: 50%;
  text-decoration: none; color: var(--text-muted); line-height: 1; }
.picker__nudge:hover, .picker__drop:hover { background: var(--surface); color: var(--text); }
.picker__nudge:focus-visible, .picker__drop:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picker__actions { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: 0; }

/* Was zur Wahl STEHT — Sprache und Einschränkungen — steht über den Themen: erst die Sprache, dann das Thema,
   dann die Wörter. Eine Zeile auf breiten Schirmen, gestapelt auf schmalen. */
.picker__narrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-md);
  margin-block-end: var(--sp-md); padding-block-end: var(--sp-sm);
  border-block-end: 1px solid var(--border); }
.picker__narrow-field { display: inline-flex; align-items: center; gap: var(--sp-2xs); }
.picker__narrow select { padding: var(--sp-2xs) var(--sp-xs); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.picker__narrow select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Der ehrliche Leerzustand darf nicht wie eine Fehlermeldung aussehen — er berichtet über den Bestand. */
.picker__empty--media { max-width: 60ch; }

/* DE: Die Themenwolke liegt in einer Klappe — 47 Chips schoben das erste Wort weit nach unten. Das aktive
   Thema steht DARÜBER, damit man ohne Aufklappen sieht, worin man gerade ist.
   EN: The theme cloud sits in a fold — 47 chips pushed the first word far down. The active theme stands ABOVE
   it, so one sees where one is without opening anything. */
.picker__themes-fold { margin-block-end: var(--sp-md); }
.picker__themes-summary { cursor: pointer; color: var(--link); font-size: var(--step--1);
  padding: var(--sp-2xs) 0; }
.picker__themes-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picker__active-theme { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm);
  margin: 0 0 var(--sp-2xs); font-weight: 700; }
.picker__clear-theme { font-weight: 400; font-size: var(--step--1); }

.picker__themes { display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin-block-end: var(--sp-md); }
/* Themen sind KNÖPFE, keine Links (jeder Wechsel übernimmt erst die Häkchen) — sie sollen aber weiter wie
   Chips aussehen, nicht wie Formularknöpfe. */
.picker__theme { display: inline-block; padding: var(--sp-2xs) var(--sp-sm); border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px); background: var(--surface); color: var(--link);
  text-decoration: none; font-size: var(--step--1); font: inherit; font-size: var(--step--1);
  cursor: pointer; }
/* „Alle Themen" neben dem aktiven Thema ist ebenfalls ein Knopf — er soll wie ein Link lesen. */
.picker__clear-theme { background: none; border: 0; padding: 0; color: var(--link);
  text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--step--1); font-weight: 400; }
.picker__clear-theme:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Wo man im Alphabet steht — die Keyset-Blätterung kennt keine Seitenzahl, aber der Ausschnitt sagt mehr. */
.picker__pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
  margin-block: var(--sp-sm); }
.picker__pages--top { border-block-end: 1px solid var(--border); padding-block-end: var(--sp-xs); }
.picker__range { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.picker__page-buttons { display: inline-flex; flex-wrap: wrap; gap: var(--sp-xs); margin-inline-start: auto; }
.picker__theme:hover { background: var(--surface-2); }
.picker__theme:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.picker__theme.is-active { background: var(--surface-2); color: var(--text); font-weight: 700;
  border-color: var(--text); }

.picker__grid { list-style: none; padding: 0; margin: 0 0 var(--sp-md);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--sp-sm); }
.picker__cell { position: relative; }

/* Die Checkbox bleibt eine echte Checkbox — sie wird nur an den Rand der Kachel gesetzt statt versteckt: ein
   verstecktes Kästchen nimmt der Tastatur den Fokusring und dem Screenreader den Zustand. */
.picker__box { position: absolute; inset-block-start: var(--sp-2xs); inset-inline-start: var(--sp-2xs);
  z-index: 1; inline-size: 1.15rem; block-size: 1.15rem; }
.picker__card { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2xs);
  padding: var(--sp-sm) var(--sp-2xs) var(--sp-xs); border: 2px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); block-size: 100%; cursor: pointer; }
.picker__card:hover { background: var(--surface-2); }
/* Gewählt ist an der KONTUR erkennbar, nicht nur am Häkchen und nicht an der Farbe allein (WCAG 2.2 AA). */
.picker__box:checked + .picker__card { border-color: var(--text); background: var(--surface-2); }
.picker__box:focus-visible + .picker__card { outline: 3px solid var(--focus); outline-offset: 2px; }

.picker__thumb { display: flex; align-items: center; justify-content: center;
  inline-size: 100%; block-size: 3.5rem; }
.picker__thumb img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; }
.picker__word { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  text-align: center; line-height: 1.15; hyphens: auto; overflow-wrap: break-word; }

.picker__apply { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); margin: 0; }
.picker__hint { color: var(--text-muted); font-size: var(--step--1); }