/* ============================================================
   21-COLONIES — Rail Colonies (refonte R3b) : une surface, lignes 33 px,
   tête 28 px sur une ligne, bande de pastilles 40 px repliée, groupe
   « N effondrées » épinglé en bas. Propriétaire : R3b.
   La géométrie de zone (largeur 232/208, grid-area right) vit dans 04-layout.css.
   Cf. docs/interface/refonte-spec.md §R3b + refonte-artefact.html (rail).
   .fm-colony.is-followed est RÉSERVÉE à C8 (stylée dans styles/27-follow.css).
   ============================================================ */

/* ---------- le rail : grille interne (tête · liste · groupe effondrées) ---------- */

#colonies-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#colonies-panel .fm-colhead {
  grid-column: 1; grid-row: 1;
  min-width: 0;
  flex-wrap: wrap;
  height: auto;
  min-height: 28px;
  padding-top: var(--fm-sp-1);
  padding-bottom: var(--fm-sp-1);
  row-gap: var(--fm-sp-1);
}
#colonies-panel .fm-colhead__title {
  flex: none;
  margin: 0; padding: 0;
  text-align: left; text-shadow: none;
  font-family: var(--fm-font-display); font-weight: 800;
  font-size: var(--fm-fs-100); letter-spacing: var(--fm-tr-3);
  text-transform: uppercase; color: var(--fm-ink-3);
}
#colonies-meta {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-3);
  font-variant-numeric: tabular-nums;
}
#colonies-panel .fm-colhead .fm-dd { flex: none; margin-left: auto; margin-right: var(--fm-sp-2); }

#colonies {
  grid-column: 1 / -1; grid-row: 2;
  min-height: 0;
  gap: var(--fm-sp-0);
  padding: var(--fm-sp-1);
}

/* ---------- poignée de repli du rail (case haute droite, sur la ligne de tête) ---------- */

#colonies-toggle {
  grid-column: 2; grid-row: 1;
  width: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  color: var(--fm-ink-3);
  background: transparent;
  border: none;
  border-left: 1px solid var(--fm-line-1);
  border-bottom: 1px solid var(--fm-line-1);
  transition: color var(--fm-dur-1) var(--fm-ease), background var(--fm-dur-1) var(--fm-ease);
}
#colonies-toggle:hover { color: var(--fm-accent); background: var(--fm-surface-2); }
#colonies-toggle:focus-visible { outline: none; box-shadow: inset var(--fm-focus); }
.fm-colrail__chev { font-size: var(--fm-fs-200); line-height: var(--fm-lh-1); }
.fm-colrail__chev::before { content: "❯"; }
.fm-colrail__txt { display: none; }

/* ---------- replié : bande de pastilles 40 px ---------- */

body.colonies-collapsed #colonies-panel {
  width: var(--fm-strip-right);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 28px minmax(0, 1fr);
}
body.colonies-collapsed #colonies-panel .fm-colhead,
body.colonies-collapsed #colonies,
body.colonies-collapsed .fm-colony-dead { display: none; }
body.colonies-collapsed #colonies-toggle {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  border-left: none;
}
body.colonies-collapsed .fm-colrail__chev::before { content: "❮"; }

.fm-colony-strip {
  display: none;
  grid-column: 1 / -1; grid-row: 2;
  flex-direction: column; align-items: center;
  gap: var(--fm-sp-2);
  padding: var(--fm-sp-2) 0;
  min-height: 0;
  overflow: hidden auto;
}
body.colonies-collapsed .fm-colony-strip { display: flex; }
.fm-colony-strip span {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--fm-sp-0);
  flex: none;
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-3);
  font-variant-numeric: tabular-nums;
}
.fm-colony-strip i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--fm-accent));
  box-shadow: 0 0 6px var(--c, var(--fm-accent));
}

/* ---------- ligne de colonie : 33 px fixes, une surface partagée ---------- */

.fm-colony {
  position: relative;
  flex: none;
  box-sizing: border-box;
  height: 33px;
  padding: var(--fm-sp-1) var(--fm-sp-2);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--c, var(--fm-accent));
  border-radius: 0 var(--fm-r-1) var(--fm-r-1) 0;
  cursor: pointer;
  transition: background var(--fm-dur-1) var(--fm-ease);
}
.fm-colony.is-open { height: auto; min-height: 33px; }
.fm-colony:hover,
.fm-colony.is-selected,
.fm-colony.is-open { background: var(--fm-surface-2); }
.fm-colony.is-selected { box-shadow: inset 0 0 0 1px var(--fm-accent-line); }
.fm-colony.is-dead { filter: saturate(0.25) brightness(0.75); }
.fm-colony.is-satellite { margin-left: var(--fm-sp-3); }

.fm-colony__head {
  display: flex; align-items: center; gap: var(--fm-sp-2);
  height: 14px; min-width: 0;
  line-height: var(--fm-lh-1);
  cursor: pointer;
}
.fm-colony__head:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-1); }
.fm-colony__head:hover .fm-colony__name { color: var(--fm-accent); }
.fm-colony__dot {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c);
}
.fm-colony__name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--fm-font-display); font-weight: 700;
  font-size: var(--fm-fs-300); line-height: var(--fm-lh-1);
  color: var(--fm-ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-colony__nest {
  flex: none;
  width: 14px; height: 14px; padding: 0;
  font-size: var(--fm-fs-200); line-height: 1;
  text-align: center;
  color: var(--fm-ink-4);
  background: transparent; border: none; cursor: pointer;
}
.fm-colony__nest:hover { color: var(--fm-accent); }
.fm-colony__nest:focus-visible { outline: none; box-shadow: var(--fm-focus); border-radius: var(--fm-r-1); }
.fm-colony__pop {
  flex: none;
  font-size: var(--fm-fs-300); font-weight: 600;
  color: var(--c);
  font-variant-numeric: tabular-nums;
}
.fm-colony__chev { flex: none; width: 8px; font-size: var(--fm-fs-100); color: var(--fm-ink-4); }
.fm-colony__chev::before { content: "▸"; }
.fm-colony.is-open .fm-colony__chev { color: var(--fm-accent); }
.fm-colony.is-open .fm-colony__chev::before { content: "▾"; }

.fm-colony__meters {
  display: flex; align-items: center; gap: var(--fm-sp-1);
  height: 9px;
  margin-top: var(--fm-sp-0);
  line-height: var(--fm-lh-1);
}
.fm-colony__mlabel {
  flex: none;
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-4);
}
.fm-colony__meter {
  flex: 1 1 0; min-width: 12px; height: 3px;
  border-radius: var(--fm-r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.fm-colony__meter i {
  display: block; height: 100%; width: 100%;
  border-radius: var(--fm-r-pill);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--fm-dur-3) var(--fm-ease);
}
#colonies .gauge .bar i {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s ease;
}
.fm-colony__meter[data-m="stock"] i { background: var(--c); }
.fm-colony__meter[data-m="terr"] i { background: var(--fm-ink-2); }
.fm-colony__state {
  flex: none; min-width: 58px;
  text-align: right;
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-3);
}
.fm-colony__state.is-war { color: var(--fm-danger); }
.fm-colony__state.is-famine { color: var(--fm-warn); }
.fm-colony__state.is-dead { color: var(--fm-ink-4); }

/* ---------- groupe « N effondrées » (épinglé en bas du rail) ---------- */

.fm-colony-dead {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; flex-direction: column;
  min-height: 0;
}
.fm-colony-dead.is-empty { display: none; }
.fm-deadgrp {
  display: flex; align-items: center; gap: var(--fm-sp-1);
  flex: none;
  width: 100%; min-width: 0; height: 22px;
  padding: 0 var(--fm-sp-2);
  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: none; border-top: 1px solid var(--fm-line-1);
  cursor: pointer;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-deadgrp::before { content: "▸"; flex: none; font-size: var(--fm-fs-200); color: var(--fm-ink-4); }
.fm-deadgrp[aria-expanded="true"]::before { content: "▾"; color: var(--fm-accent); }
.fm-deadgrp:hover { color: var(--fm-ink-1); }
.fm-deadgrp:focus-visible { outline: none; box-shadow: var(--fm-focus); }
.fm-deadgrp b { font-weight: 600; color: var(--fm-ink-2); }
.fm-colony-deadlist {
  display: none;
  flex-direction: column;
  max-height: calc(var(--fm-row-h) * 6);
  overflow: hidden auto;
  padding: var(--fm-sp-1) var(--fm-sp-1);
  border-top: 1px dashed var(--fm-line-1);
}
.fm-colony-deadlist.is-open { display: flex; }
.fm-deadrow {
  display: flex; align-items: center; gap: var(--fm-sp-2);
  flex: none; height: 20px; min-width: 0;
  padding: 0 var(--fm-sp-1);
  border-left: 2px solid var(--c, var(--fm-ink-4));
  font-family: var(--fm-font-display); font-weight: 700;
  font-size: var(--fm-fs-200);
  color: var(--fm-ink-3);
}
.fm-deadrow i {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c, var(--fm-ink-4));
  opacity: 0.55;
}
.fm-deadrow .fm-deadrow__name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fm-deadrow .fm-deadrow__st {
  flex: none;
  font-family: var(--fm-font-mono); font-size: var(--fm-fs-100);
  color: var(--fm-ink-4);
}

/* ---------- carte dépliée (colonie sélectionnée) ---------- */

.fm-colony__detail { display: none; }
.fm-colony.is-open .fm-colony__detail {
  display: block;
  margin-top: var(--fm-sp-2);
  padding-top: var(--fm-sp-1);
  border-top: 1px dashed var(--fm-line-1);
}

.fm-colony .cc-full {
  margin-bottom: var(--fm-sp-0);
  font-family: var(--fm-font-display); font-weight: 700;
  font-size: var(--fm-fs-400); line-height: var(--fm-lh-2);
  color: var(--fm-ink-1);
}
.fm-colony .cc-latin {
  margin-bottom: var(--fm-sp-1);
  font-size: var(--fm-fs-100); font-style: italic;
  color: var(--fm-ink-3);
}
.fm-colony .cc-diet { font-style: normal; color: var(--fm-ink-4); }
.fm-colony .cc-roles { flex-wrap: wrap; column-gap: var(--fm-sp-2); row-gap: 0; margin: var(--fm-sp-1) 0; font-size: var(--fm-fs-200); }
.fm-colony .cc-roles > span { white-space: nowrap; }
.fm-colony .gauge label {
  width: 62px;
  letter-spacing: var(--fm-tr-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fm-colony .gauge .g-val { width: 44px; }
.fm-colony .cc-spark { max-width: 100%; }
.fm-colony__note {
  margin: var(--fm-sp-0) 0 var(--fm-sp-1);
  font-size: var(--fm-fs-100); line-height: var(--fm-lh-2);
  color: var(--fm-ink-4);
}
.fm-colony__note b {
  font-weight: 600; color: var(--fm-ink-2);
  font-variant-numeric: tabular-nums;
}
.fm-colony .is-ok { color: var(--fm-accent); }
.fm-colony .is-warn { color: var(--fm-warn); }
.fm-colony .is-danger { color: var(--fm-danger); }
.fm-colony .is-mute { color: var(--fm-ink-3); }

/* ---------- empires (regroupement conservé) ---------- */

.empire-group { display: flex; flex-direction: column; gap: var(--fm-sp-1); }
.empire-hdr { padding: var(--fm-sp-1) 0 var(--fm-sp-0); }