{#
  Host card (B5, enriched Stage F, compacted Stage G). The single home for host
  resources now that the status-header tiles are gone.

  Stage G levels this card's height against its three neighbours (VMware,
  Runners, Cargo cache): the four near-static identity facts pair up onto two
  rows, uptime moves to the header bar, and the load average becomes the CPU
  gauge's sub-line -- the same shape the disk row already used for "GB free".
  Eleven rows became five, for the same data.

  Health is not color-only, but the level word (ok / elevated / critical /
  unknown, from ``_resource_levels``) is no longer drawn as a strip under each
  gauge -- it rides the gauge's ``aria-label`` instead. What a sighted viewer
  reads is the number: "42%", "20.0 / 62 GB", "40%" are stated in text next to
  every bar, so nothing here depends on distinguishing the fill colour.
#}
<section class="card" id="host-card" hx-get="/host" hx-trigger="every 5s, ci:refresh from:body" hx-swap="outerHTML">
  <h2>
    <svg class="icon" aria-hidden="true"><use href="#i-cpu"></use></svg>Host
    {# Spelled out, not "up": the header has no <dt> to label it. #}
    {% if resources %}<span class="head-meta">uptime {{ resources.uptime_sec | duration }}</span>{% endif %}
  </h2>
  {% if resources %}
  <dl>
    <dt>System</dt>
    <dd>{{ resources.hostname or "-" }} · <code>{{ resources.kernel or "-" }}</code></dd>

    {# The raw model name is ~40 chars and wraps to three lines in a quarter-
       width track, which is exactly the height this card is trying to lose --
       so it is trimmed, with the untouched name on the title. #}
    <dt>CPU</dt>
    <dd {% if resources.cpu_model %}title="{{ resources.cpu_model }}"{% endif %}>
      {{ resources.cpu_model | cpu_short or "-" }} · {{ resources.ncpu }} cores
    </dd>

    <dt>CPU load</dt>
    <dd>
      <span class="resource-value">{{ "%.0f"|format(resources.cpu_pct) }}%</span>
      <div class="gauge {{ levels.cpu_class }}" role="img"
           aria-label="CPU {{ '%.0f'|format(resources.cpu_pct) }} percent used, {{ levels.cpu_label }}">
        <div class="gauge-fill" style="width: {{ resources.cpu_pct }}%"></div>
      </div>
      <span class="resource-sub text-dim" title="Load average, 1 / 5 / 15 minutes">
        {{ "%.2f"|format(resources.load1) }} / {{ "%.2f"|format(resources.load5) }} / {{ "%.2f"|format(resources.load15) }}
      </span>
    </dd>

    <dt>Memory</dt>
    <dd>
      <span class="resource-value">
        {{ "%.1f"|format(resources.mem_used_gb) }} / {{ "%.0f"|format(resources.mem_total_gb) }} GB
      </span>
      <div class="gauge {{ levels.mem_class }}" role="img"
           aria-label="Memory {{ '%.0f'|format(levels.mem_pct) if levels.mem_pct is not none else 'unknown' }} percent used, {{ levels.mem_label }}">
        <div class="gauge-fill" style="width: {{ levels.mem_pct if levels.mem_pct is not none else 0 }}%"></div>
      </div>
    </dd>

    <dt>Disk</dt>
    <dd>
      {% if disk %}
      <span class="resource-value">
        {{ "%.0f"|format(disk.used_pct) }}%
        <span class="text-dim">{{ "%.0f"|format(disk.free_gb) }} GB free</span>
      </span>
      <div class="gauge {{ levels.disk_class }}" role="img"
           aria-label="Disk {{ '%.0f'|format(disk.used_pct) }} percent used, {{ levels.disk_label }}">
        <div class="gauge-fill" style="width: {{ disk.used_pct }}%"></div>
      </div>
      {% else %}
      {# No gauge to hang the level on, so the word is the value itself --
         a bare dash would read as "no disk", not "could not be measured". #}
      <span class="resource-value">{{ levels.disk_label }}</span>
      {% endif %}
    </dd>
  </dl>
  {% else %}
  <p class="notice notice-warn" role="alert">Host resource status unavailable.</p>
  {% endif %}
</section>