/* DE: Die Vorschau der Gebärdensuche — eigenes Blatt, weil `sign-search.css` an seiner Zeilengrenze steht
       und die Vorschau eine geschlossene Einheit ist: was gewählt wurde, wie viele noch passen, und welche.
       Reiner Umzug; die Regeln sind unverändert.
   EN: The sign search's preview — its own sheet, because `sign-search.css` sits at its line limit and the
       preview is one closed unit. A pure move; the rules are unchanged. */

/* DE: Die Vorschau — was gewählt wurde, wie viele passen, und welche. Ein ruhiger Kasten neben der Auswahl:
       sie soll begleiten, nicht die Wahl überstrahlen. Auf schmalen Schirmen rutscht sie darunter (der
       Grid-Container regelt das), damit die Auswahl oben bleibt, wo gearbeitet wird.
   EN: The preview — what was chosen, how many match, which ones. A quiet box beside the chooser: it should
       accompany the choice, not outshine it. On narrow screens it moves below, so the chooser stays on top. */
.sign-search__preview {
  background: var(--surface-2); border-radius: var(--radius-md, 1rem);
  padding: var(--sp-md, 1rem); display: grid; gap: var(--sp-xs, .5rem);
  align-content: start;
}
.sign-search__preview h2 { margin: 0; font-size: var(--step-0, 1rem); }

/* DE: Die gewählten Merkmale — als Zeichnung UND im Klartext. Gedämpft, weil sie eine Rückschau sind und
       keine Aufforderung; nebeneinander und umbrechend, damit fünf Merkmale auf einem Telefon nicht fünf
       Zeilen kosten. Gewählt wurde an Bildern, also steht hier ein Bild: wer prüft, ob er das Richtige
       geklickt hat, vergleicht Bild mit Bild, nicht Bild mit Text.
   EN: The chosen features — as drawings AND in plain words. Muted, being a recap rather than a prompt; side
       by side and wrapping, so five features do not cost five lines on a phone. Choosing happened on
       pictures, so a picture stands here: checking means comparing picture with picture. */
.sign-search__chosen {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem;
  color: var(--text-muted); font-size: var(--step--1, .9rem);
}
/* DE: Die Gruppenfarbe als Kante am Merkmal — hier stehen Merkmale VERSCHIEDENER Gruppen nebeneinander, und
       genau da trennt sie etwas. Als Kante, nicht als Schriftfarbe: die Töne liegen bei 3,7–4,4 : 1, genug für
       eine Markierung und zu wenig für Text.
   EN: The group colour as an edge on the feature — here features from DIFFERENT groups stand side by side. An
       edge, not text colour: 3.7–4.4:1 is enough for a marking, not for text. */
.sign-search__chosen li {
  display: flex; align-items: center; gap: .4rem;
  border-inline-start: 3px solid var(--sign-param-hue, transparent); padding-inline-start: .4rem;
}

/* DE: Klein — es ist eine Rückschau, keine zweite Auswahlfläche. Weißer Grund in jedem Thema, weil die
       Strichzeichnungen schwarz auf transparent sind (dieselbe Begründung wie überall).
   EN: Small — a recap, not a second chooser. White ground in every theme: the line drawings are black on
       transparency. */
.sign-search__chosen-mark {
  inline-size: 2.2rem; block-size: 2.2rem; object-fit: contain; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm, .4rem); padding: .1rem;
}

.sign-search__preview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.sign-search__preview-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm, .6rem); padding: .4rem .6rem;
}
.sign-search__preview-more { margin: 0; color: var(--text-muted); font-size: var(--step--1, .9rem); }