<div class="gia-behavior-shell">
  <div class="is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap mb-3">
    <div>
      <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">MS / PS Help</p>
      <p class="mb-0">Signal definitions and psychological interpretation for the timing system.</p>
    </div>
    {% include "partials/behavioral-range-tabs.html" %}
  </div>

  {% for group_key, group in groups.items %}
    <section class="box mb-4">
      <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">{{ group.eyebrow }}</p>
      <h3 class="title is-5 mb-2">{{ group.title }}</h3>
      <p class="mb-3">{{ group.summary }}</p>
      {% for metric in metrics %}
        {% if metric.group == group_key %}
          <article class="message is-light mb-3">
            <div class="message-body">
              <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">{{ metric.state_label }}</p>
              <p class="title is-6 mb-2">
                <span class="icon is-small mr-1"><i class="{{ metric.icon }}"></i></span>
                <span>{{ metric.title }}</span>
              </p>
              <p class="mb-2"><strong>Current:</strong> {{ metric.current_value_label }}</p>
              <p class="mb-2"><strong>How it is calculated:</strong> {{ metric.calculation }}</p>
              <p><strong>What it can mean:</strong> {{ metric.psychology }}</p>
            </div>
          </article>
        {% endif %}
      {% endfor %}
    </section>
  {% endfor %}
</div>
