Grouped Notification

<!--
  Grouped notification: N related events collapsed into one line ("Dana, Mateo and
  3 others commented"). The avatar stack is initials only - no network images - and
  each avatar carries the full name in its title/sr text so the group isn't
  colour-and-shape alone. min-w-0 + flex-wrap keeps the sentence wrapping cleanly
  at 320px instead of pushing the card wider than the screen.
-->
<article class="flex w-full max-w-md gap-3 rounded-xl border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
  <div class="flex flex-none -space-x-2">
    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700 ring-2 ring-white dark:bg-indigo-900 dark:text-indigo-200 dark:ring-gray-900">DA</span>
    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100 text-xs font-semibold text-emerald-700 ring-2 ring-white dark:bg-emerald-900 dark:text-emerald-200 dark:ring-gray-900">MO</span>
    <span class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-700 ring-2 ring-white dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-900">+3</span>
  </div>
  <div class="min-w-0 flex-1">
    <p class="text-sm text-gray-900 dark:text-gray-100">
      <span class="font-semibold">Dana, Mateo</span> and 3 others commented on <span class="font-semibold">Roadmap Q3</span>
    </p>
    <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">12m ago</p>
  </div>
</article>