/* ==========================================================================
   GA Journal — écran Historique de Garde Alternée (étape 23c, #836)

   Composant propre à l'application, sur les conventions de la bibliothèque
   (BEM, tokens seuls, sans imbrication ni :has()). Référence :
   projet/design/Historique et messages.dc.html (Bureau historique, Téléphone
   historique). Les options des filtres sont des .choice (ga-day.css).

   Structure BEM :
   - .journal                  → L'écran (à la place du planning, voir app.css)
     - .journal__bar           → Téléphone : « ‹ Planning » · Historique
     - .journal__filters       → Bureau : colonne de 290 px (Parent, Type,
                                 Période, Tout marquer comme vu)
     - .journal__desk          → Filtres du bureau ; .journal__phone : puces
                                 déroulantes du téléphone (.journal__chip)
     - .journal__main          → Nouvelles, filtre du jour, liste, Charger plus
     - .journal__day           → Intertitre d'un jour (capitales)
     - .journal__mark          → Repère « Votre dernière visite » (filets encre)
   - .jentry                   → Une entrée : pastille de l'auteur, lignes
     - .jentry--new            → Pas encore vue : coin corné (.jentry__corner)
     - .jentry__meta           → « Thomas · 21:14 » (au-dessus sur bureau, dessous sur téléphone)
     - .jentry__what           → « Heure de passage · ven. 6 nov. » (le jour est un lien)
     - .jentry__change         → Avant (barré, muted) → après
     - .jentry__revert         → « Revenir à avant » (« ⋯ » sur téléphone)
     - .jentry--revert         → Panneau de retour ouvert : cadre encre, bouton masqué
     - .jval                   → Une valeur, avec sa pastille (__sw : --p1, --p2, --hole)
   - .jrevert                  → Panneau de retour, sur place dans l'entrée (étape 18)
     - .jrevert__forms         → Cette modification seule / Elle et les N suivantes
     - .jrevert__rows          → Ce qui va changer (mêmes lignes qu'une entrée)
     - .jrevert__conflict      → Bloc « Conflit » (cadre encre)
     - .jrevert__actions       → Annuler à gauche, les choix à droite

   Accessibilité :
   - Le coin corné est doublé d'un texte .sr-only « nouveau » ; les valeurs
     d'avant sont dans un <del>, celles d'après dans un <ins>.
   ========================================================================== */

.journal {
  display: flex;
  min-width: 0;
  background-color: var(--color-bg);
}

.journal__bar { display: none; }

/* --------------------------------------------------------------------------
   FILTRES (bureau)
   -------------------------------------------------------------------------- */
.journal__filters {
  position: sticky;
  top: 68px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: none;
  box-sizing: border-box;
  width: 290px;
  height: calc(100dvh - 68px);
  padding: 24px 20px;
  overflow-y: auto;
  border-right: var(--border-hair) solid var(--color-border);
  background-color: var(--color-surface);
}

.journal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: 26px;
}

.journal__title:focus { outline: none; }

.journal__filters .choice-seg .choice__face { min-height: 38px; line-height: 38px; }
.journal__filters .choice-chips .choice__face { min-height: 40px; padding: 0 12px; font-size: var(--font-size-sm); }

.journal__dates-btn {
  align-self: flex-start;
  padding: 0;
  font-weight: var(--font-weight-normal);
}

.journal__phone { display: none; }

.journal__seen {
  gap: 10px;
  margin-top: auto;
  min-height: var(--control-height);
}

/* --------------------------------------------------------------------------
   LISTE
   -------------------------------------------------------------------------- */
.journal__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 20px 32px;
}

.journal__count,
.journal__day-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
  padding-bottom: 6px;
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
}

.journal__count strong,
.journal__day-filter strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.journal__day-filter .btn { padding: 0; }

.journal__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journal__day {
  margin: 0;
  padding: 10px 0 2px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.journal__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 0 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text);
}

.journal__mark::before,
.journal__mark::after {
  content: '';
  flex: 1;
  height: 2px;
  background-color: var(--color-text);
}

.journal__empty {
  margin: 0;
  padding: 12px 0;
  color: var(--color-text-muted);
}

.journal__more {
  align-self: center;
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   ENTRÉE
   -------------------------------------------------------------------------- */
.jentry {
  position: relative;
  display: flex;
  flex-wrap: wrap; /* le panneau de retour passe sous l'entrée */
  align-items: flex-start;
  gap: 14px;
  flex: none;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

/* Coin corné collé au coin de la carte (maquette : 22 px, sans filet) */
.jentry__corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(225deg, var(--ga-vermillon) 0 46%, var(--color-surface) 46% 58%, transparent 58%);
}

.jentry__who { --avatar-size: 28px; }

.jentry__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.jentry__meta {
  order: -1;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.jentry__what {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.jentry__day {
  min-height: 0;
  padding: 0;
  font-size: inherit;
  font-weight: var(--font-weight-normal);
  white-space: normal;
  text-align: left;
}

.jentry__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: var(--font-size-md);
}

.jentry__change + .jentry__what { margin-top: 6px; }

.jentry__arrow { flex: none; }

.jval {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.jentry__what--revert { font-weight: var(--font-weight-bold); }

.jentry__revert { flex: none; min-height: 40px; padding: 0 14px; }
.jentry__revert-dots { display: none; }

/* Cadre intérieur : la carte ne bouge pas à l'ouverture (la maquette pose 2 px de bordure) */
.jentry--revert { box-shadow: inset 0 0 0 2px var(--color-text); }
.jentry--revert .jentry__revert { display: none; }

.jrevert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Sous le corps de l'entrée, aligné sur son texte : pastille 28 + espace 14 */
  flex: 1 1 calc(100% - 42px);
  max-width: calc(100% - 42px);
  margin-left: 42px;
  padding: 16px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
}

.jrevert__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}

.jrevert__title:focus { outline: none; }

.jrevert__live {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jrevert__rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.jrevert__text {
  margin: 0;
  font-size: var(--font-size-md);
  line-height: 1.45;
  color: var(--color-text-muted);
}

.jrevert__conflict {
  padding: 12px 14px;
  border: var(--border-control) solid var(--color-text);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--font-size-md);
  line-height: 1.45;
}

.jrevert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jrevert__gap { flex: 1; }

/* Un libellé nomme sa cible (« sauf l'heure de passage du 27 nov. ») : il passe à la ligne */
.jrevert__actions .btn { height: auto; min-height: 44px; white-space: normal; }

.jrevert__error {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-error);
}

.jrevert__error:empty { display: none; }

del.jval {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.jval__sw {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--jval-color, transparent);
}

.jval__sw--p1 { --jval-color: var(--parent-1); }
.jval__sw--p2 { --jval-color: var(--parent-2); }

.jval__sw--hole {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, transparent 0 2px, var(--cal-hole-hatch) 2px 3.5px);
  box-shadow: inset 0 0 0 1.5px var(--cal-hole-line);
}