{# Health score badge component.
   Expects: score (int 0-100), status (str 'good'|'moderate'|'poor')
#}
<div class="inline-flex items-center gap-2">
  <span class="text-2xl font-bold
    {% if status == 'good' %}
      text-brand-500 dark:text-brand-300
    {% elif status == 'moderate' %}
      text-amber-600 dark:text-amber-400
    {% else %}
      text-red-600 dark:text-red-400
    {% endif %}
  ">{{ score }}</span>
  <div>
    <div class="flex items-center gap-1">
      <span class="ui-pill
        {% if status == 'good' %}
          ui-pill-blue
        {% elif status == 'moderate' %}
          ui-pill-warning
        {% else %}
          ui-pill-danger
        {% endif %}
      ">{{ status | capitalize }}</span>
      <div class="relative group">
        <button type="button" class="text-slate-400 dark:text-slate-500 hover:text-slate-600 dark:hover:text-slate-300" aria-label="How is this score calculated?">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01"/><circle cx="12" cy="12" r="10" stroke-width="2"/></svg>
        </button>
        <div class="hidden group-hover:block absolute z-20 top-full right-0 mt-2 w-72 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 p-3 text-[12px] text-slate-600 dark:text-slate-300 shadow-lg leading-relaxed">
          <p class="font-medium text-slate-800 dark:text-slate-100 mb-2">Project Health Score</p>
          <p class="mb-2">Score = 100 − weighted penalties, clamped to 0–100.</p>
          <ul class="space-y-1">
            <li><span class="font-medium text-slate-700 dark:text-slate-200">60%</span> — average severity of open opportunities</li>
            <li><span class="font-medium text-slate-700 dark:text-slate-200">30%</span> — share of total spend flagged as at-risk</li>
            <li><span class="font-medium text-slate-700 dark:text-slate-200">10%</span> — proportion of high-severity issues (score ≥ 70)</li>
          </ul>
          <p class="mt-2 pt-2 border-t border-slate-100 dark:border-slate-700">
            <span class="text-brand-500 dark:text-brand-300">Good ≥ 80</span> ·
            <span class="text-amber-600 dark:text-amber-400">Moderate ≥ 50</span> ·
            <span class="text-red-600 dark:text-red-400">Poor &lt; 50</span>
          </p>
        </div>
      </div>
    </div>
    <p class="ui-table-caption mt-0.5">/ 100</p>
  </div>
</div>