{#
  Status header (A3, enriched Stage E): 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. Stage E adds the CPU and RAM tiles (so the near-empty
  Disk card could be retired) and gives Disk/Cache a value sub-line.
#}
<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.cpu_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-cpu"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">CPU</span>
      <span class="stat-tile-value">
        {{ "%.0f"|format(health.cpu_pct) ~ "%" if health.cpu_pct is not none else "-" }}
        {% if health.ncpu %}<span class="stat-tile-sub">/ {{ health.ncpu }} cores</span>{% endif %}
      </span>
      <div class="gauge" role="img"
           aria-label="CPU {{ '%.0f'|format(health.cpu_pct) ~ ' percent used' if health.cpu_pct is not none else 'usage unknown' }}">
        <div class="gauge-fill" style="width: {{ health.cpu_pct if health.cpu_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.cpu_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.cpu_label }}
      </span>
    </div>
  </div>

  <div class="stat-tile {{ health.mem_class }}">
    <svg class="icon" aria-hidden="true"><use href="#i-memory"></use></svg>
    <div class="stat-tile-body">
      <span class="stat-tile-label">RAM</span>
      <span class="stat-tile-value">
        {{ "%.1f"|format(health.mem_used_gb) if health.mem_used_gb is not none else "-" }}
        {% if health.mem_total_gb is not none %}<span class="stat-tile-sub">/ {{ "%.0f"|format(health.mem_total_gb) }} GB</span>{% endif %}
      </span>
      <div class="gauge" role="img"
           aria-label="Memory {{ '%.0f'|format(health.mem_pct) ~ ' percent used' if health.mem_pct is not none else 'usage unknown' }}">
        <div class="gauge-fill" style="width: {{ health.mem_pct if health.mem_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.mem_class == 'tile-ok' else 'i-alert' }}"></use></svg>
        {{ health.mem_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</span>
      <span class="stat-tile-value">
        {{ "%.0f"|format(health.disk_used_pct) ~ "%" if health.disk_used_pct is not none else "-" }}
        {% if health.disk_free_gb is not none %}<span class="stat-tile-sub">{{ "%.0f"|format(health.disk_free_gb) }} GB free</span>{% endif %}
      </span>
      <div class="gauge" role="img"
           aria-label="Disk {{ '%.0f'|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</span>
      <span class="stat-tile-value">
        {{ health.cache_bytes | humanbytes if health.cache_bytes is not none else "-" }}
        {% if health.cache_entries is not none %}<span class="stat-tile-sub">{{ health.cache_entries | thousands }} entries</span>{% endif %}
      </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>