/* =============================================================
   Mesures · Mise en page de l'application
   Ne consomme que des tokens sémantiques de Socle. Les composants
   viennent de vendor/socle, ce fichier ne fait que les disposer.
   ============================================================= */

/* ---- En-tête collant ---- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-surface);
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.app-header__inner {
  --_app-width: 60rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  flex-wrap: wrap;
  max-width: var(--_app-width);
  margin-inline: auto;
  padding: var(--padding-m) var(--padding-l);
}

.app-header__title {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

.app-header__title h1 {
  font-size: var(--text-h3-size);
}

/* Sur un écran étroit la barre d'actions se plie plutôt que de
   déborder : un débordement horizontal laisserait le fond de
   l'en-tête collant s'arrêter au milieu de la page. */
.app-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.app-header__who {
  --_who-width: 11rem;

  width: var(--_who-width);
  max-width: 100%;
}

/* ---- Corps ---- */

.app-main {
  --_app-width: 60rem;

  max-width: var(--_app-width);
  margin-inline: auto;
  padding: var(--padding-xl) var(--padding-l) var(--padding-3xl);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--gap-l);
  align-items: start;
}

.app-note {
  margin-block-start: var(--gap-l);
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  text-align: center;
}

/* ---- Une ligne de mesure ---- */

.app-rows {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

/* La colonne de saisie a la même largeur sur toutes les lignes,
   fourchette ou non : les unités restent alignées et rien ne
   bouge quand une ligne bascule. */
.app-row {
  --_control-col: 12rem;

  display: grid;
  grid-template-columns: 1fr var(--_control-col);
  align-items: center;
  gap: var(--gap-s);
}

.app-row__label {
  display: flex;
  align-items: center;
  gap: var(--gap-2xs);
  min-width: 0;
  color: var(--color-text);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--leading-snug);
}

.app-row__label label {
  cursor: pointer;
}

/* Boutons de ligne : l'aide et la bascule en fourchette. Ronds et
   discrets, ils prennent la couleur d'accent au survol pour dire
   qu'ils font quelque chose. */
.app-icon-btn {
  --_icon-btn-size: var(--space-20);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--_icon-btn-size);
  height: var(--_icon-btn-size);
  padding: 0;
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  font-weight: var(--text-strong-weight);
  line-height: 1;
  cursor: pointer;
  transition:
    color var(--motion-fast),
    border-color var(--motion-fast),
    background-color var(--motion-fast);
}

.app-icon-btn:hover {
  border-color: var(--color-accent-border);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

/* L'icône de fourchette ne remplit pas le rond comme le fait le
   point d'interrogation : elle se cale sur la taille du texte. */
.app-icon-btn--range svg {
  width: var(--space-12);
  height: var(--space-12);
}

/* Fourchette active : le bouton reste allumé pour que l'état de
   la ligne se lise sans regarder la zone de saisie. */
.app-icon-btn--on {
  border-color: var(--color-accent-border);
  background: var(--color-accent-subtle);
  color: var(--color-accent-text);
}

/* ---- Champ chiffré avec son unité ---- */

.app-row__control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--gap-2xs);
}

/* Fourchette : deux bornes, un mot de liaison, une seule unité. */
.app-row__control--range {
  grid-template-columns: 1fr auto 1fr auto;
}

.app-row__control .sc-input {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* Deux champs dans la largeur d'un seul : la respiration
   intérieure se resserre pour garder la place aux chiffres. */
.app-row__control--range .sc-input {
  --_input-padding-x: var(--padding-s);
}

.app-row__unit,
.app-row__sep {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
}

.app-row__sep {
  padding-inline: var(--space-2);
}

/* Un champ rempli se voit d'un coup d'œil dans la colonne. */
.app-row__control .sc-input:not(:placeholder-shown) {
  --_input-border: var(--color-accent-border);

  font-weight: var(--text-strong-weight);
}

/* Borne haute plus petite que la borne basse. La règle de champ
   rempli, juste au-dessus, est aussi spécifique que celle
   d'input.css et la couvrait : on redit le rouge ici, après elle. */
.app-row__control .sc-input[aria-invalid="true"] {
  --_input-border: var(--color-danger);
  --_input-border-hover: var(--color-danger-hover);
}

/* Sous cette largeur, la ligne se plie : le libellé passe au-dessus
   et la saisie prend toute la largeur, sinon la fourchette étrangle
   le libellé. */
@media (max-width: 32rem) {
  .app-row {
    grid-template-columns: 1fr;
    gap: var(--gap-2xs);
  }

  .app-row__control {
    width: 100%;
  }
}

/* ---- Panneau d'aide ---- */

.app-help__hint {
  color: var(--color-text-muted);
  font-size: var(--text-caption-size);
  line-height: var(--leading-snug);
}

.app-help__steps {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
  margin: 0;
  padding-inline-start: var(--padding-l);
}

.app-help__steps li {
  padding-inline-start: var(--padding-2xs);
}

.app-help__steps li::marker {
  color: var(--color-accent-text);
  font-weight: var(--text-strong-weight);
}

.app-help__watch {
  padding: var(--padding-m);
  border-radius: var(--radius-control);
  background: var(--color-warning-subtle);
  border: var(--border-hairline) solid var(--color-warning-border);
  color: var(--color-warning-text);
  font-size: var(--text-body-s-size);
}

.app-help__watch strong {
  font-weight: var(--text-strong-weight);
}

.sc-sidepanel__footer {
  justify-content: space-between;
}

/* ---- Enregistrement dans un dossier ---- */

.app-storage {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
}

/* Le nom du dossier peut être long : il se coupe plutôt que de
   pousser le reste de l'en-tête. */
.app-storage__btn svg {
  flex-shrink: 0;
}

.app-storage__name {
  /* Dimension structurelle, sans rôle sémantique. */
  --_storage-name-max: 9rem;

  max-width: var(--_storage-name-max);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}