/* ============================================================
   20-LEGEND — zone Carte : lignes de calque dosables + clés fixes.
   Propriétaire : R3d (refonte). Géométrie de zone à R1 (04-layout.css),
   balayage à R6. Cf. refonte-spec.md §R3d.
   ============================================================ */

/* ---------- #layers : pile de lignes .fm-layer (écrase la pilule .chip legacy) ---------- */

#layers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  animation: none;
}

#layers .chip[data-layer] {
  width: 100%;
  padding: 0 var(--fm-sp-3);
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

#layers .chip[data-layer]:hover {
  color: var(--fm-ink-1);
  background: var(--fm-surface-2);
}

#layers .chip[data-layer]:focus-visible {
  outline: none;
  border-radius: var(--fm-r-1);
  box-shadow: var(--fm-focus);
}

#layers .chip.on {
  color: var(--fm-ink-1);
  border: none;
  background: none;
  box-shadow: none;
}

#layers .chip[data-layer][data-level="0"] {
  color: var(--fm-ink-3);
}

#layers .fm-layer > span:not(.fm-layer__tri) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#layers .fm-layer[data-layer="trails"] { --fm-c: var(--fm-lg-trail, var(--fm-accent)); }
#layers .fm-layer[data-layer="alarm"] { --fm-c: var(--fm-danger); }
#layers .fm-layer[data-layer="territory"] { --fm-c: var(--fm-lg-trail, var(--fm-accent)); }
#layers .fm-layer[data-layer="territory"] .fm-layer__sw { opacity: 0.45; }

/* ---------- repli de la zone (l'état data-open est écrit par legend.js,
   la géométrie du repli vit dans 04-layout.css) ---------- */

.lg-toggle {
  display: grid;
  place-items: center;
  height: var(--fm-ctl-h);
  padding: 0 var(--fm-sp-1);
  font-family: var(--fm-font-display);
  font-size: var(--fm-fs-300);
  color: var(--fm-ink-3);
  background: none;
  border: none;
  border-radius: var(--fm-r-1);
  cursor: pointer;
}
.lg-toggle:hover { color: var(--fm-ink-1); background: var(--fm-surface-3); }
.lg-toggle:focus-visible { outline: none; box-shadow: var(--fm-focus); }

/* ---------- clés fixes de la carte (rocher · eau · carcasse · plante) ---------- */

.lg-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-sp-1) var(--fm-sp-3);
  margin: var(--fm-sp-2) 0 0;
  padding: var(--fm-sp-2) var(--fm-sp-3);
  border-top: 1px solid var(--fm-line-1);
  list-style: none;
}

.lg-key {
  display: flex;
  align-items: center;
  gap: var(--fm-sp-2);
  min-width: 0;
}

.lg-sw {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.lg-lab {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fm-ink-2);
}

.lg-key[data-sw="water"]   .lg-sw { background: var(--fm-lg-water, var(--fm-info)); }
.lg-key[data-sw="rock"]    .lg-sw { background: var(--fm-lg-rock, var(--fm-ink-4)); }
.lg-key[data-sw="carrion"] .lg-sw { background: color-mix(in srgb, var(--fm-danger) 62%, var(--fm-bg)); }
.lg-key[data-sw="plant"]   .lg-sw { background: var(--fm-ok); }