/* Outil · Calculatrice d'heures (Hours calculator) : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : hr-
   À gauche : le total (grand), en décimal, le montant ; le détail ligne par ligne (zone fixe qui défile) ; la ligne d'info ;
   Copier le total. À droite : les lignes (une par entrée) et le taux horaire. Au téléphone : les lignes d'abord. */
.hr .outil-fixe { align-items: stretch; }
.hr-carte { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); }
.hr-total { height: 1.15em; font: 700 52px/1.15 var(--display); letter-spacing: -.03em; color: var(--papier); font-variant-numeric: tabular-nums; }
.hr-rangee { height: 40px; cursor: default; }
.hr-rangee .val { color: var(--papier); font-variant-numeric: tabular-nums; }
.hr-detail { height: 236px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
.hr-ligne { flex: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; height: 34px; border-bottom: 1px solid var(--filet-doux);
  font: 500 12.5px/1.2 var(--mono); }
.hr-ligne span { color: var(--texte2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-ligne b { font-weight: 500; color: var(--papier); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hr-ligne b.hr-moins { color: var(--peche); }
.hr-erreur b { color: var(--peche); }
.hr-vide { margin: 30px 0; text-align: center; font: var(--valeur); letter-spacing: .06em; color: var(--texte2); }
.hr-info { flex: none; height: 1lh; margin: 0; }
.hr-actions { display: flex; justify-content: center; }
.hr-actions .pastille { cursor: pointer; }
.hr-actions .pastille:hover { translate: none; }
.hr-actions .pastille:disabled { opacity: .3; cursor: default; }
.hr-zone { display: flex; flex-direction: column; gap: 0; }
.hr-texte { height: 330px; resize: none; font-family: var(--mono); font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
@media (max-width: 959px) {
  .hr-zone, .hr-taux { order: -1; }
  .hr-texte { height: 220px; }
  .hr-total { font-size: 44px; }
}