/* Outil · Générateur : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : gn- */

/* À gauche (en haut au téléphone) : un cadre avec le signal de près, tout le son en dessous, la lecture et le fichier ;
   puis le bouton de téléchargement. Tout a une hauteur fixe : rien ne bouge quand on change de son. */
.gn .outil-fixe { align-items: center; }
.gn-bloc { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gn-cadre { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 16px;
  background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); }
.gn-zoom { display: block; width: 100%; height: clamp(120px, 24vh, 200px); }
.gn-vue { display: block; width: 100%; height: 40px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
/* La lecture, bien centrée, et à sa droite ce qu'on entend */
.gn-lecture { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.gn-lecture .rond { grid-column: 2; }
.gn-etat { grid-column: 3; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums; }
/* Le fichier : durée, échantillonnage, 24 bits, canaux, taille ; sur une ligne, coupée seulement entre deux morceaux */
.gn-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; min-height: 1.6em; font-variant-numeric: tabular-nums; }
.gn-info span { white-space: nowrap; }

/* Réglages */
.gn [hidden] { display: none; }
.gn-sous { margin-top: var(--libelle); }
.gn .champ.compact input { max-width: 200px; }