{# Compact right-column card for detail pages.

   Collapsed state is intentionally title-only. The content is revealed
   only inside the clicked card, and the parent CSS caps the open height
   so it stays subordinate to the always-open query panel. #}
{% macro detail_side_card(title, count_label=None, html_id=None, open=False) %}
  <details{% if html_id %} id="{{ html_id }}"{% endif %} class="ui-surface p-5 group ui-detail-side-card" data-detail-side-card{% if open %} open{% endif %}>
    <summary class="flex items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <div class="min-w-0 flex items-center gap-2">
        <h2 class="ui-section-title mt-0 mb-0 truncate">{{ title }}</h2>
        <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
      </div>
      {% if count_label %}
        <span class="ui-pill ui-pill-neutral shrink-0">{{ count_label }}</span>
      {% endif %}
    </summary>
    <div class="ui-detail-side-card-body mt-4">
      {{ caller() }}
    </div>
  </details>
{% endmacro %}