{#
  Status header (A3): a row of stat tiles fed only from the dashboard
  context already fetched by app.py's ``dashboard()`` route (via
  ``_health_summary`` -> ``health``) -- no fetch of its own. Health is never
  color-only: each tile pairs its color class with a text label and a
  check/alert icon.
#}
<section class="status-header" id="status-header" aria-label="System health summary">

  <div class="stat-tile {{ health.vm_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-server"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">VMs</span>
      <span class="stat-tile-value">
        {{ health.vm_count }}
        {% if health.orphan_count %}<span class="stat-tile-sub">({{ health.orphan_count }} orphan)</span>{% endif %}
      </span>
      <span class="stat-tile-status">
        <svg class="icon" aria-hidden="true"><use href="#{{ 'i-check' if health.vm_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.vm_label }}
      </span>
    </div>
  </div>

  <div class="stat-tile {{ health.runner_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-gear"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">Runners</span>
      <span class="stat-tile-value">{{ health.runners_active }}/{{ health.runners_total }}</span>
      <span class="stat-tile-status">
        <svg class="icon" aria-hidden="true"><use href="#{{ 'i-check' if health.runner_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.runner_label }}
      </span>
    </div>
  </div>

  <div class="stat-tile {{ health.disk_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-disk"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">Disk used</span>
      <span class="stat-tile-value">
        {{ "%.1f"|format(health.disk_used_pct) ~ "%" if health.disk_used_pct is not none else "-" }}
      </span>
      <div class="gauge" role="img"
           aria-label="Disk {{ '%.1f'|format(health.disk_used_pct) ~ ' percent used' if health.disk_used_pct is not none else 'usage unknown' }}">
        <div class="gauge-fill" style="width: {{ health.disk_used_pct if health.disk_used_pct is not none else 0 }}%"></div>
      </div>
      <span class="stat-tile-status">
        <svg class="icon" aria-hidden="true"><use href="#{{ 'i-check' if health.disk_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.disk_label }}
      </span>
    </div>
  </div>

  <div class="stat-tile {{ health.cache_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-file"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">Cache size</span>
      <span class="stat-tile-value">
        {{ health.cache_bytes | humanbytes if health.cache_bytes is not none else "-" }}
      </span>
      <span class="stat-tile-status">
        <svg class="icon" aria-hidden="true"><use href="#{{ 'i-check' if health.cache_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.cache_label }}
      </span>
    </div>
  </div>

</section>