/*
 * Suivi du temps — panneaux de fin de session et de progression.
 *
 * Deux surfaces seulement, et elles couvrent l'écran : sur un appareil posé sur
 * un bureau, un panneau qui laisse voir l'horloge derrière lui invite à taper à
 * côté. Quand une question est posée, elle est la seule chose à l'écran.
 *
 * La charte est celle de `chrono.css`, dont cette feuille reprend les variables.
 */

.voile{
  position:fixed;inset:0;z-index:10;
  background:var(--bg);
  display:flex;justify-content:center;
  /* Marges latérales égales, comme la scène : une encoche d'un seul côté
     décentrerait le panneau. */
  padding:max(env(safe-area-inset-top),14px)
          max(env(safe-area-inset-right),env(safe-area-inset-left),18px)
          max(env(safe-area-inset-bottom),14px)
          max(env(safe-area-inset-right),env(safe-area-inset-left),18px);
  /* PAS DE DÉFILEMENT ICI. C'est le corps du panneau qui défile, pour que
     l'en-tête et son bouton « Fermer » restent atteignables. Faire défiler le
     voile entier les emportait hors de l'écran : il fallait remonter pour
     fermer, et redescendre pour retrouver le reste. */
  overflow:hidden;overscroll-behavior:contain;
}
.voile[hidden]{display:none;}

.panneau{
  width:100%;max-width:520px;
  /* Rogne l'excédent de `.prog-corps` : voir « la géométrie » dans chrono.css. */
  overflow:hidden;
  /* `max-height` plutôt qu'une hauteur : un panneau court reste centré
     verticalement, un panneau long occupe l'écran sans le dépasser. */
  max-height:100%;margin:auto 0;
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);
  font-family:'Inter',system-ui,sans-serif;
}
.panneau-large{max-width:760px;}

.panneau-entete{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}

.panneau-titre{
  color:var(--text2);font-weight:600;
  font-size:clamp(12px,1.9vh,15px);
  letter-spacing:0.08em;text-transform:uppercase;
}

/* La durée est le sujet de la question : elle occupe la place d'un titre. */
.panneau-duree{
  color:var(--text);font-weight:700;
  font-size:clamp(34px,7vh,60px);
  letter-spacing:-0.03em;line-height:1;
}

.panneau-question{
  color:var(--text3);font-weight:600;
  font-size:clamp(14px,2.2vh,18px);
}

.choix{
  display:flex;flex-wrap:wrap;gap:clamp(7px,1.2vh,11px);
  /* Beaucoup de catégories tiendraient mal sur un écran bas : c'est la liste
     qui défile, pas la question ni la durée qui l'accompagne. */
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
}

/* Cibles larges : on répond à cette question une main occupée, sans viser. */
.categorie{
  flex:0 0 auto;
  min-height:clamp(40px,6vh,52px);
  padding:0 clamp(14px,2.2vh,22px);
  border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface2);
  color:var(--text);
  font-family:inherit;font-weight:600;
  font-size:clamp(14px,2.1vh,17px);
  cursor:pointer;
  transition:background .16s,border-color .16s,color .16s;
}
.categorie:active{background:var(--text);border-color:var(--text);color:var(--bg);}

/* Créer une catégorie n'est pas choisir une catégorie : le trait interrompu la
   distingue des autres sans la reléguer hors de portée. */
.categorie-neuve{border-style:dashed;color:var(--text2);}

/* Le niveau accompagne le nom : choisir sa catégorie, c'est déjà voir où on en
   est — sans avoir à ouvrir la progression. */
.categorie .rang{
  color:var(--text2);font-weight:600;
  margin-left:8px;
}
.categorie:active .rang{color:var(--bg);}

.panneau-pied{display:flex;justify-content:flex-start;padding-top:4px;}
.panneau-pied-large{justify-content:space-between;}

.lien{
  background:none;border:none;padding:6px 0;
  color:var(--text2);
  font-family:inherit;font-weight:600;
  font-size:clamp(13px,2vh,15px);
  text-decoration:underline;text-underline-offset:4px;
  cursor:pointer;
}
.lien:active{color:var(--text);}

/* --------------------------------------------------------- progression */

/* Seule cette partie défile. `min-height:0` est indispensable : sans elle, un
   élément de flex refuse de rétrécir sous la taille de son contenu, et le
   panneau reprendrait sa hauteur entière — le défilement reviendrait sur le
   voile, avec l'en-tête qui s'échappe. */
.prog-corps{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(12px,2.2vh,22px);
  padding-right:2px;
}

/* L'en-tête et le pied ne défilent pas : le bouton « Fermer » et les deux
   entrées de réglage restent là où on les a laissés. */
.panneau-entete,.panneau-pied{flex:0 0 auto;}

/* Les trois totaux du haut : aujourd'hui, la semaine, la série. */
.totaux{display:flex;gap:clamp(8px,1.4vh,14px);}
.total{
  flex:1 1 0;
  border:1px solid var(--border-strong);border-radius:14px;
  background:var(--surface);
  padding:clamp(9px,1.6vh,15px);
}
.total-valeur{
  color:var(--text);font-weight:700;
  font-size:clamp(19px,3.4vh,30px);letter-spacing:-0.02em;
  line-height:1.1;
}
.total-nom{
  color:var(--text2);font-weight:600;
  font-size:clamp(11px,1.6vh,13px);
  letter-spacing:0.06em;text-transform:uppercase;
  margin-top:3px;
}

/* ------------------------------------------------------------- blasons */
/*
 * Un blason par niveau, qui gagne en présence à mesure qu'on monte. Il ne
 * porte aucun chiffre : le niveau est écrit à côté. Les images sont cadrées
 * sur leur disque central (cf. `tools/make_badges.py`), si bien que dans une
 * liste les blasons s'alignent sur ce disque et non sur le bord de leur halo,
 * dont l'étendue varie.
 */
.blason{
  position:relative;flex:0 0 auto;
  width:clamp(58px,9vh,78px);height:clamp(58px,9vh,78px);
  display:flex;align-items:center;justify-content:center;
}
.blason img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  user-select:none;-webkit-user-select:none;pointer-events:none;
}
.blason-grand{width:clamp(104px,17vh,150px);height:clamp(104px,17vh,150px);}

/* Le niveau général : le blason en grand, le reste à côté. */
.general{
  display:flex;align-items:center;gap:clamp(12px,2.2vh,22px);
}
.general-cote{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;}
.general-rang{
  color:var(--text);font-weight:700;
  font-size:clamp(24px,4.2vh,38px);letter-spacing:-0.02em;line-height:1;
}
.general-nom{
  color:var(--text2);font-weight:600;
  font-size:clamp(11px,1.6vh,13px);
  letter-spacing:0.06em;text-transform:uppercase;
  margin-bottom:3px;
}
.general-reste{color:var(--text2);font-weight:600;font-size:clamp(11px,1.7vh,13px);}
/* La jauge dit ce qu'il reste avant le niveau suivant. Un nombre seul ne se
   compare à rien ; une barre se lit d'un coup d'œil. */
.jauge{
  height:6px;border-radius:999px;
  background:var(--surface2);border:1px solid var(--border-strong);
  overflow:hidden;
}
.jauge span{display:block;height:100%;background:var(--text);}

.lignes{display:flex;flex-direction:column;gap:clamp(7px,1.3vh,12px);}

.ligne{
  border:1px solid var(--border-strong);border-radius:14px;
  background:var(--surface);
  padding:clamp(9px,1.5vh,14px);
  display:flex;flex-direction:column;gap:7px;
}
.ligne-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.ligne-nom{color:var(--text);font-weight:600;font-size:clamp(14px,2.1vh,17px);}
.ligne-temps{color:var(--text3);font-weight:600;font-size:clamp(13px,1.9vh,16px);}
.ligne-pied{
  color:var(--text2);font-weight:600;font-size:clamp(11px,1.6vh,13px);
}

/* Une ligne de catégorie porte son blason à gauche, le reste à droite. */
.ligne-blason{flex-direction:row;align-items:center;gap:clamp(9px,1.6vh,15px);}
.ligne-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px;}

/* Sept colonnes, une par jour. Le graphique le plus simple qui montre une
   régularité — ou son absence, ce qui est justement l'information utile. */
.semaine{display:flex;align-items:flex-end;gap:clamp(4px,1.2vw,8px);}
.barre-jour{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:5px;
}
/* La durée, au-dessus de sa barre. */
.barre-jour b{
  text-align:center;
  color:var(--text2);font-weight:700;
  font-size:clamp(10px,1.5vh,12px);
  font-variant-numeric:tabular-nums;letter-spacing:-0.03em;
  white-space:nowrap;
}
.barre-jour.travaille b{color:var(--text);}
/* Le fût porte seul la hauteur, et la barre est un pourcentage de LUI. Prise
   sur la colonne entière, elle se disputait la place avec l'étiquette et la
   lettre, qui gagnaient — d'où des barres écrasées.

   Cette hauteur est écrite, et non héritée d'un `flex:1` : un pourcentage ne
   se résout que contre une hauteur définie. Étiré par le flex, le fût restait
   indéfini pour son enfant, la barre retombait à zéro, et il n'en subsistait
   que le liseré de trois pixels du `min-height`.

   Un plancher en pixels, aussi, plutôt qu'une seule part de la hauteur : en
   paysage, `8vh` ne valait qu'une quarantaine de pixels. Le corps du panneau
   défile, ces pixels ne coûtent rien à ce qui suit. */
.barre-jour .fut{
  height:clamp(88px,18vh,124px);
  display:flex;align-items:flex-end;
}
.barre-jour i{
  display:block;width:100%;
  background:var(--surface2);border:1px solid var(--border-strong);
  border-radius:5px 5px 0 0;
  min-height:3px;
}
.barre-jour.travaille i{background:var(--text);border-color:var(--text);}
.barre-jour u{
  text-decoration:none;text-align:center;
  color:var(--text2);font-weight:600;font-size:clamp(9px,1.4vh,11px);
}

.vide{
  color:var(--text2);font-weight:600;
  font-size:clamp(13px,2vh,16px);
  line-height:1.5;
}

/* ------------------------------------------------------ saisie de texte */

.saisie{display:flex;gap:8px;}
.saisie input{
  flex:1 1 auto;min-width:0;
  height:clamp(40px,6vh,50px);
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--border-strong);background:var(--surface2);
  color:var(--text);
  font-family:inherit;font-weight:600;font-size:clamp(14px,2.1vh,16px);
}
.saisie input::placeholder{color:var(--text2);}
.saisie input:focus{outline:none;border-color:var(--text2);}

.bouton{
  flex:0 0 auto;
  height:clamp(40px,6vh,50px);padding:0 clamp(14px,2.2vh,20px);
  border-radius:12px;
  border:1px solid var(--text);background:var(--text);
  color:var(--bg);
  font-family:inherit;font-weight:700;font-size:clamp(14px,2.1vh,16px);
  cursor:pointer;
}
.bouton-discret{
  border-color:var(--border-strong);background:var(--surface2);color:var(--text3);
}

/* La suppression d'une catégorie ne s'offre pas au même niveau que le reste :
   elle est là, mais elle ne se propose pas. */
.retirer{
  background:none;border:none;padding:4px 8px;
  color:var(--text2);font-family:inherit;font-weight:700;font-size:16px;
  cursor:pointer;line-height:1;
}
.retirer:active{color:var(--text);}

/* La croix devenue question : elle s'élargit et se signale, pour qu'on ne la
   confonde pas avec l'état ordinaire du bouton. */
.retirer-confirme{
  width:auto;padding:0 12px;border-radius:999px;
  border:1px solid var(--text);background:var(--text);color:var(--bg);
  font-size:12px;font-weight:700;white-space:nowrap;
}
.retirer-confirme:active{color:var(--bg);}

/* Le choix d'unité d'une catégorie : trois boutons, un seul actif.
   Un menu déroulant tiendrait moins de place, mais demanderait de l'ouvrir
   pour lire ce qui est réglé — alors qu'ici l'état se voit sans un geste. */
.unites{display:flex;gap:6px;flex-wrap:wrap;}
.unite{
  flex:0 0 auto;
  padding:7px 12px;border-radius:999px;
  border:1px solid var(--border-strong);background:transparent;
  color:var(--text2);
  font-family:inherit;font-weight:600;font-size:12px;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.unite.active{background:var(--text);border-color:var(--text);color:var(--bg);}

/* Le rythme visé, et ce qu'il coûte par niveau. On demande le rythme et jamais
   le coût : « combien d'heures vaut un niveau » n'a pas de réponse, « combien
   de fois par semaine je vise » en a une. */
.rythme{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.rythme-nom{
  flex:0 0 auto;
  color:var(--text2);font-weight:600;font-size:12px;
}
.rythme-champ{
  flex:0 0 auto;width:72px;
  padding:7px 10px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface2);
  color:var(--text);
  font-family:inherit;font-weight:700;font-size:14px;
  text-align:center;
}
.rythme-champ:focus{outline:none;border-color:var(--text);}
.rythme-suffixe{
  flex:0 0 auto;
  color:var(--text2);font-weight:600;font-size:12px;
}
/* Le résumé passe à la ligne : il porte parfois un « niveau 3 → 2 » qu'on ne
   veut surtout pas voir tronqué. */
.rythme-resume{
  flex:1 1 100%;
  color:var(--text3);font-weight:600;font-size:12px;
}

/* Un interrupteur, pas une case à cocher : on le règle en regardant l'écran
   derrière, et sa position se lit sans avoir à décrypter une coche. */
.bascule{display:flex;align-items:center;gap:12px;}
.bascule-nom{
  flex:1 1 auto;min-width:0;
  color:var(--text3);font-weight:600;font-size:clamp(13px,2vh,15px);
}
.interrupteur{
  flex:0 0 auto;
  width:clamp(52px,8vh,64px);height:clamp(30px,4.6vh,36px);
  border-radius:999px;
  border:1px solid var(--border-strong);background:var(--surface2);
  padding:3px;cursor:pointer;
  display:flex;align-items:center;
  transition:background .18s,border-color .18s;
}
.interrupteur i{
  display:block;
  width:calc(50% - 3px);height:100%;
  border-radius:999px;background:var(--text2);
  transform:translateX(0);
  transition:transform .18s ease,background .18s;
}
/* Allumé : la pastille passe à droite et prend la couleur pleine. Le fond
   change aussi, pour que l'état se lise même sans percevoir le déplacement. */
.interrupteur.actif{background:var(--text);border-color:var(--text);}
.interrupteur.actif i{transform:translateX(100%);background:var(--bg);}

/* Le réglage de centrage : un libellé, deux flèches, la valeur, un retour au
   centre. Sur une seule ligne, parce qu'on le règle en regardant l'horloge
   derrière — pas en lisant un formulaire. */
.centrage{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
}
.centrage-nom{
  flex:1 1 auto;min-width:0;
  color:var(--text3);font-weight:600;font-size:clamp(13px,2vh,15px);
}
.centrage-valeur{
  flex:0 0 auto;min-width:62px;text-align:center;
  color:var(--text);font-weight:700;font-size:clamp(13px,2vh,15px);
  font-variant-numeric:tabular-nums;
}
.centrage .bouton{padding:0 clamp(12px,2vh,18px);}

.note{
  color:var(--text2);font-weight:500;
  font-size:clamp(11px,1.7vh,13px);line-height:1.5;
}

/* L'état de la synchro : discret, mais jamais absent — une synchro muette qui
   ne marche plus ressemble en tout point à une synchro qui marche. */
.etat-synchro{
  display:flex;align-items:center;gap:7px;
  color:var(--text2);font-weight:600;font-size:clamp(11px,1.6vh,13px);
}
.etat-synchro i{
  width:7px;height:7px;border-radius:50%;
  background:var(--text2);flex:0 0 auto;
}
.etat-synchro.ok i{background:var(--text);}
.etat-synchro.panne i{background:#c42b1c;}