{% if posture.total_projects > 0 %}
<div class="posture-summary flex items-center gap-6 p-4 rounded-lg mb-6"
     style="background: var(--bg-surface); border: 1px solid var(--border-default);">

  {# Aggregate Score #}
  <div class="flex items-center gap-2">
    {% if posture.aggregate_score is not none %}
      {{ render_donut_svg(posture.aggregate_score, 80) | safe }}
    {% else %}
      <div class="flex items-center justify-center" style="width: 80px; height: 80px; color: var(--text-muted);">
        No scans yet
      </div>
    {% endif %}
  </div>

  {# Severity Counts #}
  <div class="flex items-center gap-3">
    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold" style="background: var(--cf-critical); color: #fff;">
      {{ posture.total_critical }} Critical
    </span>
    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold" style="background: var(--cf-high); color: #fff;">
      {{ posture.total_high }} High
    </span>
    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold" style="background: var(--cf-medium); color: #fff;">
      {{ posture.total_medium }} Medium
    </span>
    <span class="inline-flex items-center px-2 py-1 rounded text-xs font-semibold" style="background: var(--cf-low); color: #fff;">
      {{ posture.total_low }} Low
    </span>
  </div>

  {# Drift Events 24h #}
  <div class="text-center">
    <div class="text-lg font-semibold" style="color: var(--text-primary);">{{ posture.drift_events_24h }}</div>
    <div class="text-xs" style="color: var(--text-muted);">Drift 24h</div>
  </div>

  {# Worst Project #}
  {% if posture.worst_project_label %}
  <div class="text-center">
    <a href="/dashboard/projects/{{ posture.worst_project_id }}"
       class="text-sm font-medium"
       style="color: var(--cf-critical); text-decoration: none;">
      {{ posture.worst_project_label }}
    </a>
    <div class="text-xs" style="color: var(--text-muted);">
      {% if posture.worst_project_score is not none %}{{ posture.worst_project_score }}%{% endif %} worst
    </div>
  </div>
  {% endif %}

  {# Trend Arrow #}
  <div class="text-center">
    {% if posture.score_trend == "improving" %}
      <span style="color: #16a34a; font-size: 1.25rem;">&#x25B2;</span>
    {% elif posture.score_trend == "declining" %}
      <span style="color: var(--cf-critical); font-size: 1.25rem;">&#x25BC;</span>
    {% else %}
      <span style="color: var(--text-muted); font-size: 1.25rem;">&mdash;</span>
    {% endif %}
    <div class="text-xs" style="color: var(--text-muted);">Trend</div>
  </div>

</div>
{% endif %}