{# Shared skeleton loader. Variants:
     kpi-row       — 4 horizontal KPI tile placeholders
     chart-panel   — full-width panel-sized rectangle
     pane          — sidebar pane (narrow vertical)
     pill          — small inline pill (e.g. verify badge)
     result-panel  — single panel (sim result)
   Use:  {% include "_skeleton.html" with context %} after setting `_skel_variant`. #}
{% set _v = _skel_variant|default('chart-panel') %}
{% if _v == 'kpi-row' %}
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3" data-skeleton="kpi-row">
    {% for _ in range(4) %}
      <div class="skeleton skeleton-block h-[88px] rounded-md"></div>
    {% endfor %}
  </div>
{% elif _v == 'chart-panel' %}
  <div class="skeleton skeleton-block h-[240px] rounded-md" data-skeleton="chart-panel"></div>
{% elif _v == 'pane' %}
  <div class="space-y-2" data-skeleton="pane">
    <div class="skeleton skeleton-block h-4 w-1/2 rounded"></div>
    <div class="skeleton skeleton-block h-3 w-3/4 rounded"></div>
    <div class="skeleton skeleton-block h-3 w-2/3 rounded"></div>
    <div class="skeleton skeleton-block h-3 w-1/2 rounded"></div>
  </div>
{% elif _v == 'pill' %}
  <span class="skeleton skeleton-pill inline-block h-[22px] w-[88px] rounded-full" data-skeleton="pill"></span>
{% elif _v == 'result-panel' %}
  <div class="panel space-y-2" data-skeleton="result-panel">
    <div class="skeleton skeleton-block h-4 w-1/3 rounded"></div>
    <div class="skeleton skeleton-block h-3 w-full rounded"></div>
    <div class="skeleton skeleton-block h-3 w-5/6 rounded"></div>
    <div class="skeleton skeleton-block h-3 w-4/6 rounded"></div>
  </div>
{% endif %}