/* DE: Die Auswahl der Gebärden-Parameter — EINE Komponente, ZWEI Verwendungen.
       `Words::SignParameterPickerComponent` steht im Redaktions-Editor UND auf der öffentlichen
       Gebärdensuche (`/gebaerde-nachschlagen`). Ihr CSS lag bis hierher in `editorial-sign-parameters.css`,
       also in einer Redaktionsdatei — die Komponente war geteilt, ihr Aussehen nicht. Genau daran hing die
       Redaktionsdatei im öffentlichen Bündel fest.

       Die Reihenfolge bleibt: dieses Blatt steht an der Stelle von `editorial-sign-parameters`, also
       weiterhin VOR `sign-search`, das `.sign-picker` noch einmal anfasst und gewinnen soll.
   EN: The sign-parameter picker — ONE component, TWO uses: the editorial editor and the public sign search.
       Its CSS lived in an editorial area file, so the component was shared but its looks were not — which is
       precisely what pinned that file into the public bundle. The order is unchanged: this sheet sits where
       `editorial-sign-parameters` sat, still before `sign-search`. */

/* --- Das Auswahlmenü im Sign-Editor (Editorial::SignParameterPickerComponent) -------------------------
   DE: Ein Raster aus nativen Radio-Optionen. Bild und Text stehen NEBENEINANDER, nie das Bild allein: eine
       Auswahl, die nur aus Handform-Bildern besteht, ist für eine sehbehinderte Lehrkraft leer — und für eine
       sehende, die die Handformen noch nicht kennt, auch. Der Fokusrahmen liegt auf der ganzen Kachel, weil
       das Radio selbst darin verschwindet.
   EN: A grid of native radio options. Picture and text sit SIDE BY SIDE, never the picture alone. The focus
       ring goes on the whole tile, because the radio itself is small inside it. */
.sign-picker { border: 1px solid var(--border, #ddd); border-radius: .6rem; padding: .8rem 1rem 1rem; margin-block-end: 1rem; }
.sign-picker__legend { font-weight: 700; padding-inline: .35rem; }
.sign-picker__empty { color: var(--text-muted, #666); margin: 0; }

.sign-picker__grid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .sign-picker__grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } }

.sign-picker__option {
  display: flex; align-items: flex-start; gap: .55rem;
  border: 1px solid var(--border, #ddd); border-radius: .5rem; padding: .5rem .6rem;
  background: var(--surface, #fff); cursor: pointer;
}
.sign-picker__option:hover { border-color: var(--brand-strong, #215c39); }
/* Der Fokus muss sichtbar sein, auch wenn er auf dem eingebetteten Radio liegt (WCAG 2.4.7). */
.sign-picker__option:focus-within { outline: 2px solid var(--focus, #215c39); outline-offset: 2px; }
.sign-picker__option:has(input:checked) { border-color: var(--brand-strong, #215c39); border-inline-start-width: 4px; }

.sign-picker__pic { inline-size: 3rem; block-size: 3rem; object-fit: contain; flex: 0 0 auto; }
.sign-picker__text { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.sign-picker__label { font-weight: 600; }
.sign-picker__desc { font-size: var(--step--1, .9rem); color: var(--text-muted, #666); }
.sign-picker__option--none .sign-picker__label { font-style: italic; color: var(--text-muted, #666); }

/* DE: Die Gruppenfarbe an der Blocküberschrift bindet die Kacheln an ihren Schritt. Als Kante, nie als
       Schriftfarbe — die Töne tragen eine Markierung, keinen Text.
   EN: The colour on the block heading ties the tiles to their step. An edge, never text colour. */
.sign-picker__legend {
  border-inline-start: 4px solid var(--sign-param-hue, transparent); padding-inline-start: .5rem;
}