/* Bū tools · widget Pomodoro (voir app/pomodoro.js) : préfixe pomo-
   À côté de la date et de l'heure (sur une deuxième ligne au téléphone), dans le même style (mono, gris), et la fenêtre de ses réglages. */

/* Lecture / pause, barre fine, temps et phase, réglages ; un filet fin le sépare de l'heure */
.pomo { pointer-events: auto; display: flex; align-items: center; gap: 12px;
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--texte2); }
html.sans-pomo .pomo { display: none; }
.pomo-bouton { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--texte2); opacity: .8;
  display: grid; place-items: center; transition: color .3s var(--courbe), opacity .3s var(--courbe); }
.pomo-bouton:hover { color: var(--papier); opacity: 1; }
.pomo-bouton svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pomo-barre { width: 140px; height: 2px; border-radius: 2px; background: var(--filet); overflow: hidden; }
.pomo-barre i { display: block; height: 100%; background: var(--papier); transform-origin: left; transform: scaleX(0); transition: transform .3s linear; }
.pomo[data-phase="pause"] .pomo-barre i, .pomo[data-phase="longue"] .pomo-barre i { background: var(--peche); }   /* pause : la lumière pêche */
.pomo-texte { position: relative; top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }   /* même correction que l'heure */
.pomo-texte b { font-weight: 500; color: var(--papier); opacity: .85; }
.pomo-texte b:empty { display: none; }                            /* session terminée : seulement « Session terminée » */
.pomo-outils { display: flex; align-items: center; gap: 2px; }    /* son et réglages, côte à côte */
/* Téléphone : sur sa propre ligne, sous la date et l'heure (app/hub.css), sur toute la largeur ; la barre est souple
   (elle prend la place qui reste, 24 px au moins) : rien ne dépasse de l'écran, même sur un petit téléphone ou avec une phase longue */
@media (max-width: 560px) {
  .pomo { width: calc(100% - 24px); max-width: 400px; gap: 10px; }   /* une marge à gauche et à droite, en plus de la gouttière */
  .pomo-barre { flex: 1 1 auto; width: auto; min-width: 24px; }
}
@media (max-width: 360px) { .pomo { gap: 6px; } .pomo-outils { gap: 0; } }   /* petit téléphone : un peu plus serré pour que tout tienne */

/* La fenêtre des réglages, par-dessus l'accueil flouté */
.pomo-voile { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px;
  background: rgba(18, 16, 14, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .35s var(--courbe); }
.pomo-voile.visible { opacity: 1; }
.pomo-fenetre { width: 100%; max-width: 420px; background: var(--encre); border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: inset 0 0 0 1px var(--filet), 0 30px 80px rgba(0, 0, 0, .5); display: flex; flex-direction: column; gap: 18px;
  transform: translateY(12px) scale(.98); transition: transform .45s var(--courbe); }
.pomo-voile.visible .pomo-fenetre { transform: none; }
.pomo-tete { display: flex; align-items: center; justify-content: space-between; }
.pomo-tete h2 { margin: 0; font: 700 18px/1 var(--display); letter-spacing: -.03em; }
/* Les champs : alignés par le bas (un libellé sur deux lignes ne décale pas son champ), en Unbounded comme les champs des outils.
   Deux fonds seulement : la fenêtre (encre) et les champs, creusés (noir) */
.pomo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dans-groupe) 12px; align-items: end; }
.pomo-champ { display: flex; flex-direction: column; gap: var(--libelle); min-width: 0; }
.pomo-champ > span:first-child { font: var(--repere); letter-spacing: .1em; color: var(--texte2); }
.pomo-saisie { display: flex; align-items: baseline; gap: 6px; min-height: 50px; border-radius: 16px; background: var(--noir); box-shadow: inset 0 0 0 1px var(--filet); padding: 13px 14px; }
.pomo-saisie:focus-within { box-shadow: inset 0 0 0 1.5px var(--papier); }
.pomo-saisie input { width: 100%; min-width: 0; border: 0; outline: none; background: none; color: var(--papier); font: 600 20px/1.2 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pomo-saisie input::-webkit-inner-spin-button, .pomo-saisie input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pomo-saisie i { font: var(--repere); line-height: 1; letter-spacing: .06em; font-style: normal; color: var(--texte2); white-space: nowrap; }
/* Séances voulues, et à côté le total calculé (même forme qu'un champ, sans fond : on ne le tape pas) ; le détail dessous */
.pomo-session { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dans-groupe) 12px; align-items: end; padding-top: 16px; border-top: 1px solid var(--filet); }
.pomo-total { background: none; box-shadow: inset 0 0 0 1px var(--filet-doux); color: var(--peche);
  font: 600 20px/1.2 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }   /* pêche : une valeur calculée, comme .champ .auto */
.pomo-detail { grid-column: 1 / -1; margin: -4px 0 0; display: flex; flex-direction: column; gap: 2px;
  font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.pomo-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }