/* ============================================================
   24-JOURNAL — zone CHRONIQUE (refonte R3c) : #timebar = tête de la
   zone (28 px) · piste de rembobinage + témoin « en direct » · ticker
   3 phrases entières · flux déplié vers le haut (≤ 40 vh) · toasts.
   Propriétaire : R3c. Cf. refonte-spec.md §R3C + refonte-artefact.html.
   Couleur de colonie = --fm-c posée par js/ui/journal.js (venue du JS).
   Traits majeurs de la frise = --fm-jmarks posée par js/ui/journal.js.
   ============================================================ */

/* ---------- la zone : dépliée, elle déborde vers le haut ---------- */

#journal.is-open { max-height: none; }

/* ---------- tête de zone : rembobinage · piste · témoin · Journal N ---------- */

#timebar {
  flex: none;
  display: flex; align-items: center; gap: var(--fm-sp-3);
  height: 28px; padding: 0 var(--fm-sp-1);
  background: none; border: 0; border-bottom: 1px solid var(--fm-line-1);
  border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  animation: none;
}
#timebar.rewinding { border-bottom-color: var(--fm-warn); }
#timebar .icon-btn {
  flex: none;
  width: var(--fm-ctl-h); height: var(--fm-ctl-h);
  font-size: var(--fm-fs-300);
  color: var(--fm-ink-2); background: none;
  border-color: var(--fm-line-1); border-radius: var(--fm-r-1);
}
#timebar .icon-btn:hover { color: var(--fm-accent); border-color: var(--fm-line-3); }

/* ---- piste de rembobinage : ligne d'accent, poignée 12 px, traits majeurs ---- */

#timeline {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; width: auto; min-width: 0; height: 28px; margin: 0;
  background: transparent; cursor: pointer;
}
#timeline:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-pill); }
#timeline::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--fm-r-pill);
  background-color: var(--fm-accent-line);
  background-image: var(--fm-jmarks, none);
}
#timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; margin-top: -4px;
  border: none; border-radius: var(--fm-r-pill);
  background: var(--fm-accent); box-shadow: 0 0 6px var(--fm-accent-glow);
}
#timeline::-moz-range-track {
  height: 4px; border-radius: var(--fm-r-pill);
  background-color: var(--fm-accent-line);
  background-image: var(--fm-jmarks, none);
}
#timeline::-moz-range-thumb {
  width: 12px; height: 12px; border: none; border-radius: var(--fm-r-pill);
  background: var(--fm-accent); box-shadow: 0 0 6px var(--fm-accent-glow);
}

/* ---- décalage de rembobinage ---- */

#time-label {
  flex: none; min-width: 54px; text-align: right;
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  letter-spacing: var(--fm-tr-1); text-transform: uppercase;
  color: var(--fm-ink-3); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#timebar.rewinding #time-label { color: var(--fm-warn); }
#time-label:empty { display: none; }

/* ---- témoin « ● en direct » / bouton « Revenir au présent » ---- */

#time-live {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--fm-sp-1);
  height: 20px; padding: 0 var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  letter-spacing: var(--fm-tr-2); text-transform: uppercase;
  color: var(--fm-accent);
  background: none; border: 1px solid transparent; border-radius: var(--fm-r-pill);
  opacity: 1; pointer-events: none; cursor: default;
  white-space: nowrap;
  transition: background var(--fm-dur-1) var(--fm-ease), border-color var(--fm-dur-1) var(--fm-ease);
}
#time-live::before {
  content: "";
  width: 6px; height: 6px; border-radius: var(--fm-r-pill);
  background: var(--fm-accent); box-shadow: 0 0 6px var(--fm-accent-glow);
  animation: fm-j-live 2.4s ease-in-out infinite;
}
#time-live.on {
  pointer-events: auto; cursor: pointer;
  font-size: var(--fm-fs-200); letter-spacing: var(--fm-tr-1); text-transform: none;
  background: var(--fm-accent-soft); border-color: var(--fm-accent-line);
}
#time-live.on::before { content: none; }
#time-live:focus-visible { outline: none; box-shadow: var(--fm-focus); }

@keyframes fm-j-live { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { #time-live::before { animation: none; } }

/* ---- bascule « Journal N ▴ » ---- */

#journal-toggle {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--fm-sp-2);
  height: 20px; padding: 0 var(--fm-sp-2);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200);
  letter-spacing: var(--fm-tr-1); text-transform: uppercase;
  color: var(--fm-ink-2); background: none;
  border: 1px solid var(--fm-line-1); border-radius: var(--fm-r-pill);
  cursor: pointer; white-space: nowrap;
  transition: color var(--fm-dur-1) var(--fm-ease), border-color var(--fm-dur-1) var(--fm-ease);
}
#journal-toggle:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); }
#journal-toggle:focus-visible { outline: none; box-shadow: var(--fm-focus); }
#journal-toggle::after {
  content: "▴";
  font-size: var(--fm-fs-300);
  color: var(--fm-ink-3);
  transition: color var(--fm-dur-1) var(--fm-ease);
}
#journal.is-open #journal-toggle::after { content: "▾"; color: var(--fm-accent); }
#journal-toggle[aria-expanded="true"] { border-color: var(--fm-line-2); }
.fm-jtoggle__meta { color: var(--fm-ink-4); font-variant-numeric: tabular-nums; }

/* ---------- flux déplié : filtres + fenêtre, au-dessus de la tête ---------- */

#journal-feed-wrap {
  display: none; flex: none; flex-direction: column; min-height: 0;
  max-height: 40vh;
  border-bottom: 1px solid var(--fm-line-1);
}
#journal.is-open #journal-feed-wrap { display: flex; }

#journal-filters {
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fm-sp-1);
  padding: var(--fm-sp-2) var(--fm-sp-3);
  border-bottom: 1px solid var(--fm-line-1);
}
.fm-jfilter {
  padding: var(--fm-sp-1) var(--fm-sp-3);
  font-family: var(--fm-font-mono);
  font-size: var(--fm-fs-100);
  letter-spacing: var(--fm-tr-1);
  color: var(--fm-ink-3);
  background: transparent;
  border: 1px solid var(--fm-line-1);
  border-radius: var(--fm-r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--fm-dur-1) var(--fm-ease), border-color var(--fm-dur-1) var(--fm-ease), background var(--fm-dur-1) var(--fm-ease);
}
.fm-jfilter:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); }
.fm-jfilter:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-jfilter[aria-pressed="true"] {
  color: var(--fm-accent);
  border-color: var(--fm-accent-line);
  background: var(--fm-accent-soft);
}

#journal-feed {
  flex: 1 1 auto; min-height: 0;
  overflow: hidden auto;
  padding: var(--fm-sp-1) 0;
}

/* ---------- lignes d'événement (ticker + flux) : 44 · 10 · phrase ---------- */

.fm-jrow,
.fm-jchip {
  display: grid; grid-template-columns: 44px 10px minmax(0, 1fr);
  align-items: center; gap: var(--fm-sp-2);
  min-width: 0; width: 100%; height: 18px;
  padding: 0 var(--fm-sp-4) 0 var(--fm-sp-3);
  font-family: inherit; font-size: var(--fm-fs-200); line-height: var(--fm-lh-1);
  color: var(--fm-ink-2);
  background: none; border: 0; border-left: 2px solid transparent;
  border-radius: 0; text-align: left;
  transition: color var(--fm-dur-1) var(--fm-ease), background var(--fm-dur-1) var(--fm-ease), border-left-color var(--fm-dur-1) var(--fm-ease);
}
.fm-jchip { cursor: pointer; }
.fm-jchip:hover { background: var(--fm-surface-2); border-left-color: var(--fm-accent); color: var(--fm-ink-1); }
.fm-jchip:focus-visible { outline: none; box-shadow: var(--fm-focus); }
#journal-ticker .fm-jchip:first-child { color: var(--fm-ink-1); }

.fm-jrow:not(.is-loc) { cursor: default; }
.fm-jrow.is-loc { cursor: pointer; }
.fm-jrow.is-loc:hover,
.fm-jrow.is-loc:focus-visible {
  background: var(--fm-surface-2);
  border-left-color: var(--fm-accent);
  color: var(--fm-ink-1);
  outline: none;
}

.fm-jrow__t,
.fm-jchip__t {
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-3); font-variant-numeric: tabular-nums;
}

.fm-jrow__dot,
.fm-jchip__dot {
  justify-self: center;
  width: 6px; height: 6px; border-radius: var(--fm-r-pill);
  background: var(--fm-c, var(--fm-accent));
  box-shadow: 0 0 5px var(--fm-c, var(--fm-accent));
}

.fm-jrow__msg,
.fm-jchip__msg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- ticker : les 3 dernières phrases, la plus récente en haut ---------- */

#journal-ticker {
  flex: none;
  display: flex; flex-direction: column;
  padding: var(--fm-sp-1) 0 var(--fm-sp-2);
  min-width: 0; margin: 0; list-style: none;
}
#journal.is-open #journal-ticker { display: none; }

/* ---------- fenêtre vide ---------- */

.fm-jempty {
  padding: var(--fm-sp-4) var(--fm-sp-3);
  font-size: var(--fm-fs-200);
  color: var(--fm-ink-3);
  text-align: center;
}

/* ---------- toasts : pile centrée sous la barre haute (#announce) ---------- */

#toasts { align-items: center; }

.toast {
  background: var(--fm-surface-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--fm-line-2);
  border-left: 3px solid var(--tc, var(--fm-accent));
  border-radius: var(--fm-r-1);
  padding: var(--fm-sp-2) var(--fm-sp-4);
  font-size: var(--fm-fs-200);
  color: var(--fm-ink-1);
  white-space: normal;
  text-align: center;
}