{{/*
  Layer fit — which of the four platform layers a customer path uses.
  Input: dict with "fit" (map of layer key -> "yes" | "own" | "no")
  and optional "compact" (bool). State is always spelled out in text,
  so color is never the only signal.
*/}}
{{ $fit := .fit }}
<ul class="fit{{ if .compact }} fit-compact{{ end }}">
  {{ range hugo.Data.layers }}
    {{ $state := index $fit .key | default "no" }}
    <li class="fit-row fit-{{ .key }} is-{{ $state }}">
      <span class="fit-bar" aria-hidden="true"><span></span></span>
      <span class="fit-name">{{ .name }}</span>
      <span class="fit-state">{{ if eq $state "yes" }}Included{{ else if eq $state "own" }}Your own{{ else }}Add anytime{{ end }}</span>
    </li>
  {{ end }}
</ul>