{% comment %}
KPI tile. One column of a .row-cols-* grid.

    {% include "yksa/ui/_kpi.html" with label=label value=value %}
    {% include "yksa/ui/_kpi.html" with label=label value=value hint=hint accent="primary" %}

  label   the caption (required)
  value   the figure (required)
  hint    muted secondary line under the figure
  accent  Bootstrap semantic name for a left border -- at most one per strip

A tile whose secondary line is itself markup (a timestamp through
yksa/ui/_utc.html, say) builds the same three elements inline with the same
classes, as with .yksa-empty.
{% endcomment %}
<div class="col">
    <div class="card h-100 border-0 bg-white shadow-sm">
        <div class="card-body py-2 px-3{% if accent %} border-start border-{{ accent }} border-3{% endif %}">
            <div class="yksa-label text-truncate">{{ label }}</div>
            <div class="yksa-readout fs-4">{{ value }}</div>
            {% if hint %}<div class="text-body-secondary small">{{ hint }}</div>{% endif %}
        </div>
    </div>
</div>