/*
 * inline-field.css — una pregunta y su respuesta en la misma fila.
 *
 * Aquí vive sólo el MECANISMO: si caben en una fila y qué pasa cuando no. Ni un
 * color, ni un borde, ni un tamaño de letra — eso es del tema
 * (`reglas/contrato-base.md` §14). El tema decide cómo es un control; el core
 * decide dónde se coloca y cómo se comporta al estrecharse.
 *
 * ── Por qué NO hay un solo `@media` en este fichero ─────────────────────────
 * Mismo argumento que `choice-grid.css`, y por el mismo motivo: el ancho del
 * VIEWPORT no es el ancho DISPONIBLE. Esta fila vive dentro de la tarjeta de un
 * asistente, pero podría vivir en una columna lateral o en un modal, y ahí el
 * viewport no dice nada. `flex-wrap` sobre una base declarada responde la
 * pregunta correcta —«¿cabe el control al lado del rótulo AQUÍ?»— y la contesta
 * el navegador, no un umbral adivinado. Canon: Every Layout (declarar la
 * restricción en vez de enumerar los casos) y el Sidebar/Switcher de esa misma
 * familia.
 *
 * ── LA IDEA, y es lo que la hace funcionar ──────────────────────────────────
 * El rótulo NO tiene que caber en una línea. Sólo tiene que ocupar menos ALTO
 * que el control que lleva al lado. Un control táctil mide 44 px (Apple HIG /
 * WCAG 2.5.5) y una línea de rótulo ~20 px: **caben dos líneas de texto gratis**,
 * dentro del alto que el control ya ocupaba.
 *
 * Por eso el intento anterior no salía: exigía el rótulo entero en una línea, y
 * medido a 320 px eso no ocurre NUNCA (0 de 15 casos) ni en el idioma del
 * cliente a 360 (0 de 3 en alemán). Lo que estorbaba no era el ancho: era pedirle
 * al texto que no envolviera.
 *
 * ── El único número, y cómo se acotó (NO por gusto) ─────────────────────────
 * `--inline-field-label-min` = **7rem (112 px)**, y sale de dos límites que se
 * cruzan, medidos a 13 px sobre la tipografía real del sitio:
 *
 *  1. **Suelo duro: la palabra más larga tiene que caber.** `Fahrzeugausweis`
 *     mide **102 px** y no tiene por dónde partirse, así que por debajo de eso
 *     desborda. No es estético: es un límite físico.
 *  2. **Techo: cuánto puede medir sin empujar el control abajo.** Dentro de la
 *     tarjeta de un teléfono de 360 quedan 298 px y el control mide 135 px con su
 *     separación: `112 + 12 + 135 = 259 ≤ 298` ✅, con sitio de sobra.
 *
 * Un tema con rótulos más largos o cuerpo mayor sube el token — pero mide con la
 * palabra más larga de TODOS sus idiomas, no del inglés (el defecto con forma de
 * idioma del 2026-08-16).
 *
 * ── Qué pasa a 320, MEDIDO, y por qué se deja así ───────────────────────────
 * A 320 px quedan 258 px y `112 + 12 + 135 = 259`: **excede por un píxel**, así
 * que en los tres rótulos más largos el control baja a su línea y la fila vuelve
 * a medir lo que medía antes (88 px). O sea: **a 320 esta pieza no ahorra nada**
 * — y a 360, 390 y 768 baja de 88 a 44, que es un 36 % de la pantalla.
 *
 * Se puede forzar que no envuelva bajando el token a 6.5rem, y **se descartó a
 * propósito**: dejaría el rótulo en 111 px, o sea tres líneas apretadas contra
 * dos controles, y deja sólo 2 px de holgura sobre la palabra más larga. El
 * rótulo entero arriba con los controles debajo **se lee mejor** y ocupa lo
 * mismo que hoy. No se cambia legibilidad en el ancho suelo por 51 px.
 *
 * Y aun envolviendo se gana algo que no se mide en píxeles: los controles dejan
 * de ser dos botones a media pantalla cada uno y pasan a ser dos chips del mismo
 * tamaño, que es lo que pedía el ojo cuando esto se levantó.
 */

.inline-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-field-gap, 0.75rem);
    margin-bottom: var(--inline-field-row-gap, 0.75rem);
}

/*
 * `min-width: 0` no es adorno: sin él un elemento flex se niega a encogerse por
 * debajo de su contenido mínimo, y una palabra larga empujaría la fila fuera del
 * contenedor en vez de envolver. Es la causa nº 1 de desbordamiento en flexbox.
 */
.inline-field__label {
    flex: 1 1 var(--inline-field-label-min, 7rem);
    min-width: 0;
    margin: 0;
}

/*
 * El control conserva su tamaño: es el que fija el alto de la fila y el que no
 * puede encogerse sin dejar de ser tocable.
 */
.inline-field__control {
    flex: 0 0 auto;
    /*
     * Columnas IGUALES, dimensionadas por el control más ancho.
     *
     * Con flexbox, «Ja» (49 px) y «Nein» quedaban de anchos distintos en 6 de 6
     * casos medidos: un par sí/no desigual se lee descuidado y da a una de las
     * dos respuestas más peso visual que a la otra, que en una pregunta de
     * negocio no es un detalle estético. En un grid de ancho intrínseco,
     * `grid-auto-columns: 1fr` iguala todas las pistas al contenido de la mayor
     * sin que nadie tenga que escribir un ancho.
     *
     * Es lo que hacen el segmented control de iOS y el segmented button de
     * Material 3, y por el mismo motivo: opciones equivalentes se presentan
     * equivalentes.
     */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    gap: var(--inline-field-control-gap, 0.5rem);
}