/* ---- OÙ J'EN SUIS : une CARTE par wiki, son bouton de reprise en tête ----
   L'écran était une file de paragraphes : rien ne disait où un wiki finissait
   et où le suivant commençait, et la seule chose qu'on vient y faire — rouvrir
   son dernier chapitre — n'existait pas. Chaque wiki est maintenant un encart
   (UI.md, règle 45) qui porte son action (règle 47) dans la forme commune
   « emoji + libellé » d'une colonne pleine largeur (règle 50). */
.dlg .stat-body { gap: 12px; }
/* DEUX CARTES DE FRONT DÈS QU'IL Y A LA PLACE : une colonne de 1 180 px
   étirait le bouton de reprise sur 1 100 px, et douze wikis faisaient douze
   écrans de défilement. Le haut de l'écran — le fil et l'objectif — garde
   toute la largeur : il ne se compare à rien. */
@media (min-width: 860px) {
  .dlg .stat-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    align-items: stretch; }
  /* LE HAUT DE L'ÉCRAN EN DEUX COLONNES : le fil à droite, les mesures à
     gauche. Étalé sur 1 180 px, il laissait les deux tiers de sa carte vides. */
  .dlg .stat-today { grid-column: 1 / -1; display: grid; column-gap: 26px;
    grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .dlg .stat-today > h4 { grid-column: 1 / -1; }
  /* Largeur POSÉE : dans une colonne « auto », la grille rabattait les sept
     cases sur leur minimum — seize pixels de large, mesuré le 20 septembre. */
  .dlg .stat-today > .streak-fil { grid-column: 2; grid-row: 2 / span 5;
    width: 336px; max-width: none; }
}
.dlg .stat-card { align-self: stretch; padding: 12px 14px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); gap: 8px; }
.dlg .stat-card > h4 { color: var(--fg); font-size: 1rem; text-transform: none; letter-spacing: 0; }
.dlg .stat-acts { margin-top: 0; align-self: stretch; }
/* Le bouton de reprise nomme sa cible, et un titre long ne le fait pas grandir. */
/* Pas de souligné pointillé sur un bouton : il porte sa bulle, mais il est
   déjà un bouton — le pointillé du site sert à marquer un mot, pas un geste. */
.dlg .stat-go, .dlg .stat-rev { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Une mesure : son nom, son compte, sa barre dessous. */
.dlg .stat-line { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 0;
  align-self: stretch; font-size: var(--fs-ui); color: var(--fg2); }
.stat-line b { color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-rail { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--bg3);
  border: 1px solid var(--line); overflow: hidden; }
.stat-rail > i { display: block; height: 100%; background: var(--green); transition: width .25s; }
.stat-rail.tone-blue > i { background: var(--blue); }
.stat-rail.tone-cyan > i { background: var(--cyan); }

/* Les pastilles de chiffres : même hauteur, même écart, d'une carte à l'autre
   (règle 8). Elles portent leur bulle — un compte nu ne se lit pas seul. */
.stat-chips { display: flex; flex-wrap: wrap; gap: 7px; align-self: stretch; }
.stat-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px;
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg2); color: var(--fg2); font-size: var(--fs-ui);
  text-decoration: none; cursor: help; }
.stat-chip b { color: var(--fg); font-variant-numeric: tabular-nums; }
.stat-chip.due { border-color: var(--amber); color: var(--fg); }
.stat-chip.due b { color: var(--amber); }

/* Ce qui n'a jamais été ouvert : des liens qui SE VOIENT (règle 1), et une
   cible que le doigt trouve. */
.stat-unseen { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none;
  align-self: stretch; }
.dlg .stat-unseen a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg2);
  color: var(--fg2); font-size: var(--fs-ui); text-decoration: none; }
.stat-unseen a:hover { border-color: var(--blue); color: var(--fg); }

/* ---- LE FIL DES JOURS : un calendrier, pas une file de carrés ----
   Rangé par semaine sous les initiales, chaque case porte sa date : le fil se
   lit sans légende, et la bulle dit le jour et les gestes (règle 42). */
.streak-days { font-size: 1.05em; margin: 0; color: var(--fg2); }
.streak-n { font-size: 1.7em; font-weight: 700; color: var(--green); line-height: 1; }
.dlg .streak-fil { display: flex; flex-direction: column; gap: 4px; align-self: stretch;
  max-width: 420px; text-decoration: none; }
.streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.streak-dow { font-size: var(--fs-floor); color: var(--fg3); text-align: center; }
.dlg .streak-day { display: flex; align-items: center; justify-content: center; min-height: 34px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--bg3);
  color: var(--fg3); font-size: var(--fs-floor); font-variant-numeric: tabular-nums;
  text-decoration: none; cursor: help; }
/* Trois paliers de remplissage, l'objectif du jour pour échelle. Le vert plein
   porte le papier du thème (`var(--bg)`), jamais du blanc en dur : c'est la
   règle des boutons principaux, et elle tient sur les douze thèmes. */
.streak-day.l1 { background: color-mix(in srgb, var(--green) 22%, var(--bg3)); color: var(--fg); }
.streak-day.l2 { background: color-mix(in srgb, var(--green) 45%, var(--bg3)); color: var(--fg); }
.streak-day.l3 { background: var(--green); border-color: var(--green); color: var(--bg); font-weight: 700; }
.streak-day.now { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.streak-day.ahead { background: none; border-color: transparent; }
@media (max-width: 560px) {
  /* Deux semaines suffisent à dire si le rythme tient : l'écran reste court,
     et le bouton du premier wiki arrive dans les 844 premiers pixels (règle 35). */
  .streak-week.old { display: none; }
}
@media (pointer: coarse) {
  .stat-unseen a { min-height: 44px; }
  .streak-day { min-height: 40px; }
}