{# Легенда категорий — ОДНА на весь продукт: компактный ряд цветных точек,
   имена и особая подсказка страницы (legend_note) — во всплывашке при
   наведении или фокусе. Раньше была строкой текста через всю карточку —
   владелец попросил чистоты (18.08). Цвета — данные, расшифровка не должна
   перекрикивать сами дорожки. Первая точка — чернила: отрезок без категории
   (ИИ выключен или блок не разобран) красится акцентом, а не «разработкой». #}
<div class="tl-legend">
  <span class="lg-dots" tabindex="0" role="img" aria-label="{{ tr('Что значат цвета') }}">
    <b style="background:var(--accent)"></b>
    <b style="background:var(--cat-dev)"></b>
    <b style="background:var(--cat-comm)"></b>
    <b style="background:var(--cat-docs)"></b>
    <b style="background:var(--cat-research)"></b>
    <b style="background:var(--cat-rest)"></b>
    <b style="background:var(--muted)"></b>
  </span>
  <div class="lg-pop">
    {# без категории — чернила: ИИ выключен, блок ещё не разобран или «разное» #}
    <span><b style="background:var(--accent)"></b>{{ tr('разное, не разобрано') }}</span>
    <span><b style="background:var(--cat-dev)"></b>{{ tr('разработка') }}</span>
    <span><b style="background:var(--cat-comm)"></b>{{ tr('коммуникация, встречи') }}</span>
    <span><b style="background:var(--cat-docs)"></b>{{ tr('документы, дизайн') }}</span>
    <span><b style="background:var(--cat-research)"></b>{{ tr('исследование, обучение') }}</span>
    <span><b style="background:var(--cat-rest)"></b>{{ tr('отдых') }}</span>
    <span><b style="background:var(--muted)"></b>{{ tr('админ и рутина') }}</span>
    {% if legend_note %}<span class="lgn">{{ legend_note }}</span>{% endif %}
  </div>
</div>