/* 7-backlog.css — la file de travail : l'avancement d'un jalon, le backlog, le fil d'un item.
 *
 * ── L'ORDRE COMPTE ─────────────────────────────────────────────────────────────────
 * Ce fichier est une TRANCHE de l'ancien app.css, découpé en neuf morceaux contigus. Le
 * chiffre en tête du nom est son rang de cascade, et ce n'est pas de la décoration : lus
 * dans l'ordre, les neuf fichiers valent exactement l'ancien, à l'octet près. Les intervertir
 * change ce qui l'emporte — et une cascade inversée ne se voit pas, elle se constate trois
 * jours plus tard sur un écran précis.
 *
 * Deux raisons de ne PAS regrouper par thème en réordonnant : les paires
 * `@media`/`@container` se redoublent (chacune doit rester APRÈS la @media qu'elle double),
 * et `container-type` définit l'unité de mesure de tout ce qu'il contient. Le découpage
 * contigu rend ces deux pièges impossibles au lieu de demander qu'on y pense.
 *
 * `tests/test_feuilles_css.py` vérifie que les quatre points de chargement listent bien ces
 * neuf fichiers, dans ce rang.
 */

/* — l'avancement d'un jalon —
 *
 * Une barre et trois nombres, jamais un pourcentage seul : on ne connaît pas le dénominateur
 * réel d'un jalon, et une jauge à 60 % qui n'avance plus ment mieux qu'elle n'informe. La
 * part est posée par le CSSOM (`--part`) : la politique de sécurité interdit les styles en
 * ligne, et c'est déjà ainsi que les pastilles de charte se colorent. */
.goal-jauge {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--panel2);
  background-image: linear-gradient(var(--ok), var(--ok));
  background-repeat: no-repeat;
  background-size: var(--part, 0) 100%;
}

/* Sous une ligne sourde : un filet, sans chiffre. À cette taille, la barre suffit à dire
 * qu'il y a déjà quelque chose là-dessous. */
.goal-jauge.mini { height: 2px; flex: 0 0 100%; margin-top: var(--s1); }

/* La ligne d'état mène à l'atelier, filtré sur ce jalon : Stratégie dit COMBIEN, Produit dit
 * quoi. Un lien, donc — pas un bouton : il navigue vraiment. */
.goal-etat {
  color: var(--mist);
  font-size: var(--t2);
  text-decoration: none;
}

/* Les jalons atteints, repliés. Ils restent consultables — un jalon franchi est la preuve
 * qu'on avance — mais ils cessent de pousser la carte courante hors de l'écran. */
.goal-replis {
  display: block;
  width: 100%;
  margin-top: var(--s3);
  padding: var(--s2);
  background: none;
  border: 0;
  color: var(--mist);
  font: var(--w-moyen) var(--t2)/var(--lh-plat) var(--font-body);
  text-align: left;
  cursor: pointer;
}

.goal-acts { display: flex; gap: var(--s2); }
.goal-acts .btn { flex: 0 0 auto; }
.goal-acts .btn:first-child { flex: 1; }
.goal-acts .ghost { min-width: 40px; padding: 0 var(--s2); }

/* Les suivants : une ligne, pas une carte. Assez lisible pour se rappeler ce qui vient,
 * assez discret pour ne pas se disputer l'attention avec le jalon courant. */
.goal-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--mist);
}

.goal-next .goal-titre { flex: 1; min-width: 0; font: var(--w-moyen) var(--t4)/var(--lh-ui) var(--font-body); }

.goal-next .goal-n {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--mist);
  font: var(--w-gras) var(--t1)/var(--lh-plat) var(--font-body);
}

.goal-next .ghost { flex: 0 0 auto; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--s2); }

.goal-next.lv-ok b {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .55;
}


.work li.lv-ok b { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .6; }


/* — le backlog —
 * La question posée ici est « qu'est-ce que je fais ensuite POUR LE JALON EN COURS ». Sans
 * le filtre en tête, trente items mélangent ce qui sert maintenant et ce qui servira dans six
 * mois, et on choisit au hasard de ce qui dépasse.
 *
 * Le filtre est une liste DÉROULANTE, et ce n'est pas un détail d'habillage : la barre de
 * pastilles qu'elle remplace faisait deux mille pixels de large avec sept jalons aux titres
 * réels. Elle défilait horizontalement — en théorie ; en pratique elle avait l'air coupée au
 * bord de l'écran, et un filtre à moitié visible ne se distingue pas d'une page cassée. */

.bl-filtre {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
  color: var(--mist);
  font-size: var(--t3);
}

.bl-filtre select {
  flex: 1;
  min-width: 0;
  min-height: var(--tap-min);
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font: var(--w-moyen) var(--t3)/var(--lh-plat) var(--font-body);
}

.backlog { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

/* En pleine largeur — c'est le cas dans Tâches, le seul écran qui le porte — les items se
 * rangent en cartes plutôt qu'en bandes de 1400 px. Même grille que les sujets juste en
 * dessous : deux listes de travail côte à côte qui ne se ressembleraient pas feraient croire
 * à deux natures de travail. */
.bloc.large .backlog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: start;
  gap: var(--s3);
}

.bl-item {
  display: grid;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bl-head { display: flex; align-items: flex-start; gap: var(--s3); }
.bl-head b { flex: 1; min-width: 0; font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-body); }
.bl-head .ghost { flex: 0 0 auto; min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--s2); }

.bl-item.lv-ok .bl-head b {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: .55;
}

.bl-goals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* Le rang pour les jalons qu'on peut choisir, le titre pour celui qui est retenu. Trois
 * intitulés côte à côte ne tiennent pas sur une ligne ; trois chiffres, eux, ne disaient
 * rien — on lit une carte, pas la table des matières des jalons. */
.tag {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mist);
  font: var(--w-gras) var(--t1)/var(--lh-plat) var(--font-body);
}

/* Le jalon retenu porte son titre : il lui faut de l'air, et le droit de se couper plutôt
 * que de pousser les flèches de rangement hors de la carte. */
.tag.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 var(--s3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bl-move { margin-left: auto; display: flex; gap: var(--s1); }

/* Un item sur lequel un agent travaille : bordure d'accent, comme le jalon courant. Ce qui
 * bouge doit se repérer sans lire. */
.bl-item.bl-live { border-color: var(--accent); }

/* La collision annoncée AVANT la fusion. En orange et pas en rouge : rien n'est cassé, et
 * les deux travaux avancent — c'est une décision à prendre, pas une panne. */
.collision {
  margin: 0 0 var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--t2);
  line-height: var(--lh-corps);
  overflow-wrap: anywhere;
}

.bl-quoi {
  margin: 0 0 var(--s3);
  color: var(--mist);
  font-size: var(--t2);
  line-height: var(--lh-corps);
}

.bl-head .bl-go { flex: 0 0 auto; white-space: nowrap; }
.bl-head .btn { min-height: var(--tap-min); padding: 0 var(--s3); font-size: var(--t2); }

/* La dernière chose faite. Discret : c'est une preuve que ça avance, pas une information
 * qu'on relit. */
.bl-last {
  margin: 0;
  color: var(--mist);
  font: var(--w-normal) var(--t2)/var(--lh-ui) var(--font-body);
  overflow-wrap: anywhere;
}

/* — le fil d'un item —
 * Une conversation de travail, pas une messagerie : pas d'avatar, pas d'horodatage à la
 * seconde, pas d'accusé de lecture. Ce qu'on veut lire, c'est ce que l'agent a compris et
 * ce qu'on lui a répondu. */
.fil {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.msg {
  margin: 0;
  padding: var(--s2) var(--s3);
  background: var(--panel2);
  border-radius: var(--radius-sm);
  font: var(--w-normal) var(--t3)/var(--lh-corps) var(--font-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Ce que Félix a écrit, du côté où il l'a écrit. La couleur suffit à séparer les deux voix ;
 * un alignement à droite couperait la largeur utile en deux sur un téléphone. */
.msg.moi { background: var(--accent-bg); color: var(--accent-ink); }
.msg.vide { color: var(--mist); background: none; padding-left: 0; }

.diffstat {
  margin: 0;
  padding: var(--s2) var(--s3);
  background: var(--panel2);
  border-radius: var(--radius-sm);
  color: var(--mist);
  font: var(--w-normal) var(--t1)/var(--lh-corps) var(--font-mono);
  overflow-x: auto;
}

.say { grid-template-columns: 1fr auto auto; align-items: center; }
.say .btn { min-height: var(--tap); }

/* L'en-tête du fil : de quel chantier il s'agit, et où il en est. Sans elle, deux agents
 * qui travaillent en même temps donnent deux conversations qu'on ne sait pas distinguer. */
.fil-tete {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin: 0 0 var(--s2);
  font-size: var(--t3);
}
.fil-tete span { color: var(--mist); white-space: nowrap; }

/* Ce que l'agent est en train de faire. Trois minutes sans un mot sont indiscernables d'un
 * agent planté — et c'est la première raison qu'on a de tuer un outil qui marchait. */
.fil-etape { margin: var(--s2) 0 0; color: var(--mist); font-size: var(--t2); }
.bl-move .ghost { min-height: var(--tap-min); min-width: var(--tap-min); padding: 0; font-size: var(--t3); }