/* La ligne de champs : des champs côte à côte qui se partagent la largeur, en colonne sous
   768 px. Sortie de field.css au passage au harness 0.13 (une feuille de composant ne définit
   que son block), chargée juste après elle. */

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

/* Chaque champ de la ligne part de 200 px et se partage le reste ; `min-width: 0`
   pour qu'un <select> au long libellé ne pousse pas toute la ligne.
   `:where()` : spécificité nulle, un `field--w-*` posé sur le champ gagne. */
:where(.field-row) > * {
  flex: 1 1 200px;
  min-width: 0;
}

/* Sous 768 px l'axe bascule : la base de 200 px redeviendrait une hauteur. */
@media (width <= 768px) {
  .field-row {
    flex-direction: column;
  }

  .field-row > * {
    flex: 0 0 auto;
    width: 100%;
  }
}