/* ============================================================
   04-LAYOUT — LA grille de l'écran, les flottants, la géométrie
   ET l'apparence des 3 crans (1279 / 1023 / 719).
   Propriétaires : R1 (refonte, grille) puis R6 (balayage, crans).
   SEUL fichier à écrire la géométrie et les @media de largeur.
   Cf. refonte-spec.md §1.1, §R1 et §R6.
   ============================================================ */

/* ---------- la grille, posée une fois ---------- */

#hud {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  grid-template-rows: var(--fm-topbar-h) minmax(0, 1fr) minmax(var(--fm-foot-h), auto);
  grid-template-areas:
    "top top top"
    "left stage right"
    "mini chron map";
  gap: var(--fm-edge);
  padding: var(--fm-edge);
}

#topbar {
  grid-area: top;
  position: relative;
  flex-direction: row;
  align-items: center;
}

#dock-left {
  grid-area: left;
  align-self: start;
  justify-self: start;
  width: var(--fm-col-left);
  max-width: 100%;
  max-height: 100%;
}
#dock-left[data-tab="eco"],
#dock-left[data-tab="species"] { width: var(--fm-col-left-wide); }
#dock-left[data-tab="tune"] { width: var(--fm-col-tune); }
#dock-left.is-folded { width: var(--fm-strip-left); }

#minimap {
  grid-area: mini;
  align-self: end;
  justify-self: start;
  max-height: 100%;
}

#colonies-panel {
  grid-area: right;
  position: relative;
  align-self: start;
  justify-self: end;
  width: var(--fm-col-right);
  max-height: 100%;
}

#journal {
  grid-area: chron;
  align-self: end;
  justify-self: center;
  width: min(var(--fm-chron-w), 100%);
  max-height: 100%;
}

#legend {
  grid-area: map;
  align-self: end;
  justify-self: end;
  width: var(--fm-col-right);
  max-height: 100%;
}
#legend > :not(.fm-zone__head) { min-height: 0; overflow: hidden auto; scrollbar-width: thin; }
#legend[data-open="0"] { width: auto; }
#legend[data-open="0"] > :not(.fm-zone__head) { display: none; }
#legend .fm-zone__head #ver {
  margin-left: auto;
  font-family: var(--fm-font-mono);
  font-size: var(--fm-fs-100);
  color: var(--fm-ink-4);
  opacity: 0.65;
  pointer-events: none;
  user-select: none;
}
#legend .fm-zone__head #legend-toggle { width: auto; flex: none; }

/* ---------- flottants (hors flux, jamais dans la grille) ---------- */

#inspector {
  position: absolute;
  top: calc(var(--fm-topbar-h) + 2 * var(--fm-edge));
  right: var(--fm-edge);
  max-height: calc(100% - var(--fm-topbar-h) - var(--fm-foot-h) - 4 * var(--fm-edge));
  z-index: var(--fm-z-float);
}

#nestpanel {
  position: absolute;
  top: calc(var(--fm-topbar-h) + 2 * var(--fm-edge));
  right: calc(var(--fm-col-right) + 2 * var(--fm-edge));
  width: var(--fm-nest-w);
  z-index: var(--fm-z-float);
}

#perf-panel {
  position: absolute;
  top: calc(var(--fm-topbar-h) + 2 * var(--fm-edge));
  right: calc(var(--fm-col-right) + 2 * var(--fm-edge));
  width: var(--fm-perf-w);
  max-height: calc(100% - var(--fm-topbar-h) - var(--fm-foot-h) - 4 * var(--fm-edge));
  z-index: var(--fm-z-float);
}

#hud:has(#nuptial-banner:not(.hidden)) #nestpanel {
  top: calc(var(--fm-topbar-h) + 3 * var(--fm-edge) + 2 * var(--fm-ctl-h));
}

#announce {
  position: absolute;
  grid-row: 2;
  grid-column: 1 / -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-sp-2);
  width: max-content;
  max-width: calc(100% - 4 * var(--fm-edge));
  pointer-events: none;
  z-index: var(--fm-z-announce);
}

#hud:has(#nestpanel:not(.hidden)) #announce {
  left: calc(var(--fm-col-left) + 2 * var(--fm-edge));
  right: calc(var(--fm-col-right) + var(--fm-nest-w) + 3 * var(--fm-edge));
  transform: none;
  width: auto;
  max-width: none;
}

#hud:has(#perf-panel:not([hidden])) #announce {
  left: calc(var(--fm-col-left) + 2 * var(--fm-edge));
  right: calc(var(--fm-col-right) + var(--fm-perf-w) + 3 * var(--fm-edge));
  transform: none;
  width: auto;
  max-width: none;
}

/* ---------- cran Moyen : colonne droite étroite, barre haute allégée ---------- */

@media (max-width: 1279px) {
  #colonies-panel { width: var(--fm-col-right-m); }
  #legend { width: var(--fm-col-right-m); }
  #topbar #brand span { display: none; }
  #season-label { display: none; }
}

/* ---------- cran Compact : la chronique prend toute la largeur basse ---------- */

@media (max-width: 1023px) {
  #hud {
    grid-template-areas:
      "top top top"
      "left stage right"
      "chron chron map";
  }
  #minimap { display: none; }
  #dock-left,
  #colonies-panel {
    z-index: var(--fm-z-float);
    max-height: 100%;
  }
  #daynight { display: none; }
  .fm-tb-read .fm-read__u { display: none; }
  #legend .lg-keys { display: none; }
  #nestpanel {
    right: calc(var(--fm-strip-right) + 2 * var(--fm-edge));
    max-width: calc(100% - var(--fm-col-left) - var(--fm-col-right-m) - 6 * var(--fm-edge));
  }
  body:not(.colonies-collapsed) #nestpanel { right: calc(var(--fm-col-right-m) + 2 * var(--fm-edge)); }
  #perf-panel { right: calc(var(--fm-col-right-m) + 2 * var(--fm-edge)); }
  #hud:has(#nestpanel:not(.hidden)) #announce {
    left: calc(2 * var(--fm-edge));
    right: calc(var(--fm-col-right-m) + var(--fm-nest-w) + 3 * var(--fm-edge));
  }
  #hud:has(#perf-panel:not([hidden])) #announce {
    left: calc(2 * var(--fm-edge));
    right: calc(var(--fm-col-right-m) + var(--fm-perf-w) + 3 * var(--fm-edge));
  }
}

/* ---------- cran Mobile : le shell Compact tient, barre haute sur 2 lignes,
   inspecteur et coupe du nid en feuilles basses ---------- */

@media (max-width: 719px) {
  #hud { grid-template-rows: auto minmax(0, 1fr) minmax(var(--fm-foot-h), auto); }
  #topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--fm-topbar-h);
    padding: var(--fm-sp-1) var(--fm-sp-2);
    row-gap: var(--fm-sp-1);
  }
  #topbar > * { flex-shrink: 0; }
  #brand { display: none; }
  #time-live:not(.on) .fm-jlive__txt { display: none; }
  #inspector {
    top: auto;
    right: var(--fm-edge);
    bottom: var(--fm-edge);
    left: var(--fm-edge);
    width: auto;
    max-height: 56%;
  }
  #nestpanel,
  body:not(.colonies-collapsed) #nestpanel,
  #hud:has(#nuptial-banner:not(.hidden)) #nestpanel {
    top: auto;
    right: var(--fm-edge);
    bottom: var(--fm-edge);
    left: var(--fm-edge);
    width: auto;
    max-width: none;
    max-height: 56%;
  }
  #perf-panel {
    top: auto;
    right: var(--fm-edge);
    bottom: var(--fm-edge);
    left: var(--fm-edge);
    width: auto;
    max-height: 56%;
  }
  #hud:has(#nestpanel:not(.hidden)) #announce,
  #hud:has(#perf-panel:not([hidden])) #announce {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 4 * var(--fm-edge));
  }
}