{# Mission Control — KPI strip.

   Six tiles in a single row (Datadog Query Value + Grafana Stat). Each tile
   carries:
     - .mission-kpi__label    eyebrow uppercase
     - .mission-kpi__value    big mono numeric (tabular-nums)
     - .mission-kpi__delta    tiny sub-label
     - .mission-kpi__spark    canvas absolutely-positioned bottom

   The data-live=* keys mirror the Editorial baseline so the existing SSE
   patcher (snapshot event) updates Mission identically. Sparkline canvases
   are mounted by mission_charts.js reading the JSON payload island in
   layout.html.

   Six tiles, ordered for ops triage:
     1. AIVSS         — headline score
     2. FINDINGS      — total count
     3. CRITICAL      — critical-severity count (always tinted)
     4. COVERAGE      — ASI categories covered out of 10
     5. TOKENS        — total tokens (formatted)
     6. ELAPSED       — wall-clock since scan start
#}
<section class="mission__kpi-strip" aria-label="Scan KPIs">

  <article class="mission-kpi mission-kpi--band-{{ band_class }}"
           aria-label="AIVSS score">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">AIVSS</span>
      <span class="mission-kpi__band mission-kpi__band--{{ band_class }}"
            data-live="band">{{ band_label }}</span>
    </div>
    <span class="mission-kpi__value" data-live="aivss">{{ aivss_label }}</span>
    <span class="mission-kpi__delta">
      <code data-live="aivss-total">{{ aivss_label }}</code> / 100 &middot; tier {{ tier_label }}
    </span>
    <canvas class="mission-kpi__spark" data-kpi-spark="aivss" aria-hidden="true"></canvas>
  </article>

  <article class="mission-kpi mission-kpi--findings" aria-label="Findings total">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">Findings</span>
    </div>
    <span class="mission-kpi__value" data-live="findings">{{ findings_total }}</span>
    <span class="mission-kpi__delta">
      <span class="mission-sev mission-sev--crit"><span data-live="critical">{{ counts.critical }}</span> crit</span>
      <span class="mission-sev mission-sev--high"><span data-live="high">{{ counts.high }}</span> high</span>
      <span class="mission-sev mission-sev--med"><span data-live="medium">{{ counts.medium }}</span> med</span>
      <span class="mission-sev mission-sev--low"><span data-live="low">{{ counts.low }}</span> low</span>
    </span>
    <canvas class="mission-kpi__spark" data-kpi-spark="findings" aria-hidden="true"></canvas>
  </article>

  <article class="mission-kpi mission-kpi--critical" aria-label="Critical findings">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">Critical</span>
      <span class="mission-kpi__tag mission-kpi__tag--crit">CRIT</span>
    </div>
    <span class="mission-kpi__value mission-kpi__value--crit"
          data-live="critical">{{ counts.critical }}</span>
    <span class="mission-kpi__delta">
      {% if counts.critical == 0 %}no critical findings{% else %}requires action{% endif %}
    </span>
    <canvas class="mission-kpi__spark" data-kpi-spark="critical" aria-hidden="true"></canvas>
  </article>

  <article class="mission-kpi mission-kpi--coverage" aria-label="ASI coverage">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">Coverage</span>
    </div>
    <span class="mission-kpi__value">
      <span data-live="asi-covered">{{ asi_covered }} / 10</span>
    </span>
    <span class="mission-kpi__delta">ASI categories covered</span>
    <canvas class="mission-kpi__spark" data-kpi-spark="coverage" aria-hidden="true"></canvas>
  </article>

  <article class="mission-kpi mission-kpi--tokens" aria-label="Tokens consumed">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">Tokens</span>
    </div>
    <span class="mission-kpi__value" data-live="tokens">{{ tokens_label }}</span>
    <span class="mission-kpi__delta">
      of {{ tokens_cap_label }} cap &middot; <code>{{ usd_label }}</code>
    </span>
    <div class="mission-kpi__bar" aria-hidden="true">
      <span style="width: {{ tokens_pct }}%" data-live="tokens-bar"></span>
    </div>
  </article>

  <article class="mission-kpi mission-kpi--elapsed" aria-label="Elapsed time">
    <div class="mission-kpi__head">
      <span class="mission-kpi__label">Elapsed</span>
    </div>
    <span class="mission-kpi__value" data-live="elapsed">{{ elapsed_label }}</span>
    <span class="mission-kpi__delta">
      probes <code data-live="probes">{{ probes_label }}</code>
    </span>
    <div class="mission-kpi__bar" aria-hidden="true">
      <span style="width: {{ elapsed_pct }}%" data-live="elapsed-bar"></span>
    </div>
  </article>

</section>