/* ============================================================
   25-TIMEBAR — barre haute (#topbar) : 5 groupes + séparateurs,
   vitesse, calendrier (roue, horloge, saison), menu Monde.
   Propriétaire : R3a (refonte). Le menu Monde est positionné par
   layer.place à l'ouverture (couche supérieure native) : aucune
   coordonnée d'écran ici. Cf. refonte-spec.md §R3a.
   ============================================================ */

/* ---------- la barre : 40 px, groupes, séparateurs fins ---------- */

#topbar { gap: var(--fm-sp-3); padding: 0 var(--fm-sp-2) 0 var(--fm-sp-4); }

.fm-tb-gp { display: flex; align-items: center; gap: var(--fm-sp-3); min-width: 0; }

.fm-tb-time::before,
.fm-cal::before,
.fm-tb-read::before,
.fm-tb-act::before,
#follow-pill::before {
  content: "";
  flex: none;
  width: 1px;
  height: var(--fm-row-h);
  margin-right: var(--fm-sp-3);
  background: var(--fm-line-2);
}

#btn-help::before {
  content: "";
  position: absolute;
  left: calc(var(--fm-sp-3) / -2);
  top: calc(50% - var(--fm-row-h) / 2);
  width: 1px;
  height: var(--fm-row-h);
  background: var(--fm-line-2);
}

/* ---------- contrôles : un seul gabarit fm-btn 24 px, pause 28 px ---------- */

#topbar .txt-btn {
  display: inline-flex; align-items: center; gap: var(--fm-sp-1);
  height: var(--fm-ctl-h); padding: 0 var(--fm-sp-3);
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-200); letter-spacing: var(--fm-tr-1);
  border-radius: var(--fm-r-1);
  transition: color var(--fm-dur-1), border-color var(--fm-dur-1), background var(--fm-dur-1), transform var(--fm-dur-1);
}
#topbar .txt-btn:hover { color: var(--fm-ink-1); border-color: var(--fm-line-3); background: var(--fm-surface-3); }
#topbar .txt-btn:active { transform: translateY(1px); }
#topbar .txt-btn:focus-visible { outline: none; box-shadow: var(--fm-focus); }

#topbar .icon-btn { width: 28px; height: 28px; border-radius: var(--fm-r-1); }
#topbar .icon-btn:hover { box-shadow: 0 0 14px var(--fm-accent-glow); }

/* ---------- vitesse : curseur logarithmique ×0,25 → ×10 ---------- */

#speeds.fm-speed {
  display: flex;
  gap: var(--fm-sp-2);
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.fm-speed-slider { display: flex; flex-direction: column; }

#speed-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
#speed-range:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-pill); }
#speed-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--fm-r-pill);
  background: var(--fm-line-2);
}
#speed-range::-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);
}
#speed-range::-moz-range-track {
  height: 4px;
  border-radius: var(--fm-r-pill);
  background: var(--fm-line-2);
}
#speed-range::-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);
}

.fm-speed-marks { position: relative; height: 10px; }
.fm-speed-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: var(--fm-fs-100);
  line-height: var(--fm-lh-1);
  color: var(--fm-ink-4);
}
.fm-speed-mark--start { transform: none; }
.fm-speed-mark--end { transform: translateX(-100%); }
.fm-speed-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 1px;
  height: 3px;
  background: var(--fm-line-3);
}

#speed-val {
  min-width: 36px;
  text-align: right;
  font-size: var(--fm-fs-400);
  font-weight: 600;
  color: var(--fm-accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- calendrier : roue 18 px, « jour N · hh:mm », saison, liseré ---------- */

#cal .stat { gap: 0; line-height: var(--fm-lh-1); }
#cal .stat label { display: none; }

.fm-season-stat {
  padding-bottom: var(--fm-sp-0);
  border-bottom: 2px solid var(--fm-season-c, var(--fm-accent-soft));
}

.fm-clock-row { display: inline-flex; align-items: center; gap: var(--fm-sp-2); }

#seasonwheel { display: block; width: 18px; height: 18px; }

#clock { font-size: var(--fm-fs-300); font-weight: 400; color: var(--fm-ink-1); }

#season-label { font-size: var(--fm-fs-200); font-weight: 400; color: var(--fm-season-c, var(--fm-ink-3)); }

#sky { font-size: var(--fm-fs-300); }

/* ---------- lectures valeur-d'abord : largeur réservée ---------- */

#pop-total { --fm-read-w: 46px; }
#fps { --fm-read-w: 26px; }

#topbar .fm-read b,
#topbar .fm-read__u { line-height: var(--fm-row-h); }

/* ---------- menu Monde : couche supérieure native [popover].
   Position calculée à l'ouverture par layer.place — zéro coordonnée ici.
   Items 26 px, « Vider » destructif séparé. ---------- */

#worldmenu-pop { width: 200px; border: 1px solid var(--fm-line-2); }

#worldmenu-pop .txt-btn {
  justify-content: flex-start;
  width: 100%; height: 26px; padding: 0 var(--fm-sp-2);
  border: none; border-radius: var(--fm-r-1);
  font-size: var(--fm-fs-200); letter-spacing: 0; text-align: left;
  color: var(--fm-ink-1); background: none;
}
#worldmenu-pop .txt-btn:hover { color: var(--fm-accent); border-color: transparent; background: var(--fm-accent-soft); }
#btn-newmap,
#worldmenu-pop #btn-clear { margin-top: var(--fm-sp-1); border-top: 1px solid var(--fm-line-1); border-radius: 0; }
#worldmenu-pop #btn-clear,
#worldmenu-pop #btn-clear:hover { color: var(--fm-danger); }
#worldmenu-pop #btn-clear:hover { background: var(--fm-danger-soft); }

/* ---------- l'infobulle unique : layer.tip (#fm-tip, popover manual).
   Le ::after CSS de 03-components §4.9, neutralisé ici du temps de R3a,
   a été purgé par R6 : plus rien à neutraliser. ---------- */

#clock,
#sky,
.fm-clock-row,
#topbar .txt-btn { white-space: nowrap; }

.fm-speed-mark--start::before { left: 0; }
.fm-speed-mark--end::before { left: auto; right: 0; }

#worldmenu-pop .fm-menu__ic { order: 2; margin-left: auto; color: var(--fm-ink-3); }