/* ============================================================
   27-FOLLOW — suivi caméra d'une colonie : pastille de la barre
   haute (case réservée entre #cal et les lectures) + état de
   ligne suivi dans le rail. Propriétaire : R3a (refonte).
   Cf. refonte-spec.md §R3a · refonte-artefact.html.
   ============================================================ */

/* ---------- pastille de la barre haute ---------- */

#follow-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--fm-sp-2);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 220px;
  height: var(--fm-ctl-h);
  padding: var(--fm-sp-1) var(--fm-sp-2) var(--fm-sp-1) var(--fm-sp-3);
  border-color: var(--fm-accent-line);
  background: var(--fm-accent-soft);
  box-shadow: 0 0 12px var(--fm-accent-glow);
  animation: fp-in var(--fm-dur-2) var(--fm-ease) both;
}

#follow-pill[hidden] { display: none; }

@keyframes fp-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.fp-ic {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--fm-r-pill);
  background: var(--fp-c, var(--fm-accent));
  box-shadow: 0 0 6px var(--fp-c, var(--fm-accent));
}

.fp-lab {
  flex: none;
  font-size: var(--fm-fs-100);
  letter-spacing: var(--fm-tr-2);
  text-transform: uppercase;
  color: var(--fm-ink-3);
}

.fp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--fm-font-mono);
  font-size: var(--fm-fs-200);
  color: var(--fm-ink-1);
}

.fp-stop {
  flex: none;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--fm-r-pill);
  background: transparent;
  color: var(--fm-ink-3);
  font-size: var(--fm-fs-200);
  line-height: var(--fm-lh-1);
  cursor: pointer;
  transition: color var(--fm-dur-1) var(--fm-ease), background var(--fm-dur-1) var(--fm-ease);
}

.fp-stop:hover { color: var(--fm-danger); background: var(--fm-danger-soft); }
.fp-stop:focus-visible { outline: none; box-shadow: var(--fm-focus); }

/* ---------- état de ligne dans le panneau Colonies ----------
   .fm-colony = les lignes du rail (R3b). La barre d'accent à gauche se compose
   avec « sélectionnée » (deux états orthogonaux : la caméra suit ≠ la ligne
   est surlignée). Les sélecteurs .colony-card hérités sont purgés (R6). */

.fm-colony.is-followed {
  border-color: var(--fm-accent-line);
  box-shadow: inset 3px 0 0 var(--fm-accent);
  transition: box-shadow var(--fm-dur-2) var(--fm-ease), border-color var(--fm-dur-2) var(--fm-ease);
}

.fm-colony.is-followed.selected {
  box-shadow: inset 3px 0 0 var(--fm-accent), 0 0 0 1px var(--fm-accent-line), 0 0 18px var(--fm-accent-glow);
}