/* 12-taches.css — l'écran du travail : les deux moitiés de « À faire », et la carte d'un
 * sujet.
 *
 * ── L'ORDRE COMPTE ─────────────────────────────────────────────────────────────────
 * Douzième et dernier rang : ces règles habillent des cartes qui n'existaient pas quand
 * `app.css` a été découpé, et elles doivent passer APRÈS le repli de `.say` déclaré en
 * `8-ds.css` — une carte de 340 px est plus étroite qu'un onglet et plus large que le seuil
 * de 320 px auquel ce repli se déclenche.
 *
 * Une tranche de plus, et non trois blocs ajoutés à `3-produit.css` ou `7-backlog.css` :
 * les deux touchaient le plafond de 400 lignes, celui-là même que `checks/hygiene.py`
 * signale sur les dépôts qu'on surveille. Un plafond qu'on relève pour soi ne mesure plus
 * rien.
 *
 * `tests/test_feuilles_css.py` vérifie que les trois pages qui chargent ces feuilles la
 * citent, à ce rang.
 */

/* Les deux moitiés de « À faire » : ce qu'on a décidé, ce qu'on a constaté. Un intertitre
 * discret — c'est une provenance, pas une section : le titre de l'écran est au-dessus, et
 * deux titres de même poids feraient croire à deux écrans. */
.demi {
  margin: var(--s4) 0 var(--s2);
  color: var(--mist);
  font: var(--w-fort) var(--t2)/var(--lh-plat) var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.bloc > .demi:first-of-type { margin-top: var(--s2); }

/* — les tâches — un sujet par carte —
 *
 * Elles ont commencé en lignes `.work`, comme les chantiers, et c'était une erreur de forme
 * autant que de fond : une tâche porte un titre, un enjeu, un repli et deux commandes, là où
 * un chantier porte un intitulé. Empilée en pleine largeur, elle donnait cinq bandes hautes
 * qu'on parcourt au pouce sur un écran de 1440 px presque vide.
 *
 * La grille est celle des accès (`.acces`), au jeton près — et le piège évité est le même :
 * le minimum d'un `minmax` l'emporte sur la place disponible, donc une piste de 300 px dans
 * une fenêtre de 320 déborde, et `overflow-x: clip` la coupe sans le dire. D'où `min(…, 100%)`.
 */
.taches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  align-items: start;
  gap: var(--s3);
}

/* Chaque carte est l'unité de mesure de son contenu, comme celle d'un accès : c'est ce qui
 * permet au fil de l'agent — champ de réponse et boutons — de se replier selon SA largeur et
 * non selon la fenêtre. Une carte de 300 px dans une fenêtre de 1440 doit se replier comme
 * un téléphone : c'est la largeur du conteneur qui coupe, pas celle de l'écran. */
.carte-tache { container-type: inline-size; }

.carte-tache {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s4);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lv, var(--line));
  border-radius: var(--radius);
}

.tache-tete b {
  display: block;
  font: var(--w-fort) var(--t5)/var(--lh-ui) var(--font-head);
}

/* L'enjeu — ce que ça coûte de ne rien faire. C'est la phrase qui remplace le code de
 * contrôle, donc elle se lit vraiment : bornée à la mesure de lecture, en `ch`, posée sur
 * l'élément lui-même (sur son parent, la limite se mesurerait dans un autre corps). */
.tache-tete small {
  display: block;
  margin-top: var(--s1);
  max-width: var(--mesure);
  color: var(--mist);
  font-size: var(--t3);
  line-height: var(--lh-ui);
}

/* Le détail : le vocabulaire d'outil, celui qu'on vérifie une fois le sujet choisi. Replié
 * par défaut — c'est l'inventaire qu'on venait de fermer. */
.tache-detail > summary {
  color: var(--mist);
  font-size: var(--t3);
  cursor: pointer;
}

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

.tache-detail li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--panel2);
  border-left: 2px solid var(--line);
  border-radius: var(--radius-xs);
}

.tache-detail li > div { flex: 1; min-width: 0; }
.tache-detail b {
  display: block;
  font: var(--w-moyen) var(--t4)/var(--lh-ui) var(--font-body);
}
.tache-detail small {
  display: block;
  color: var(--mist);
  font-size: var(--t2);
  line-height: var(--lh-ui);
}

/* Les commandes en bas, sur une ligne, la principale d'abord. Elles ne montent pas dans
 * l'en-tête : deux boutons à droite d'un titre rétrécissent le titre, et c'est lui qu'on
 * lit pour décider. */
.tache-actions { display: flex; gap: var(--s2); }
.tache-actions .btn { flex: 1; }
.tache-actions .ghost { flex: 0 0 var(--tap); }

/* Le fil répète le titre du chantier ; dans une carte de tâche, ce titre EST celui de la
 * carte, deux lignes plus haut. Seul l'état reste — c'est lui qu'on vient chercher. */
.carte-tache .fil-tete b { display: none; }
.carte-tache .fil-tete { justify-content: flex-end; }

/* Le champ de réponse prend la ligne, les deux commandes la suivante. Les trois colonnes de
 * `.say` tiennent dans un onglet Santé pleine largeur, pas dans une carte de 340 px : sur un
 * téléphone, « Arrêter » sortait du cadre — et `overflow-x: clip` le coupait sans le dire.
 * Le repli de `.say` existe déjà, mais sous 320 px de CONTENEUR ; la carte est plus large
 * que ça et plus étroite que ce dont trois colonnes ont besoin. */
.carte-tache .say { grid-template-columns: 1fr auto; }
.carte-tache .say .fil-edit { grid-column: 1 / -1; }