In-App Notification Feed

<!--
  In-app feed: what the user opens to catch up, so NO live region - announcing a
  list someone asked to read is noise (same rule as the panel). It's a <ul>, so a
  screen reader says "list, N items". Each row leads with a typed icon plus an
  sr-only word ("Success", "Warning") so the meaning never rides on colour, and
  the row is min-w-0 + flex so long text wraps rather than overflowing at 320px.
-->
<section aria-labelledby="feed-heading" class="w-full max-w-md rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <h2 id="feed-heading" class="border-b border-gray-200 px-4 py-3 text-sm font-semibold text-gray-900 dark:border-gray-800 dark:text-gray-100">Activity</h2>
  <ul class="divide-y divide-gray-100 dark:divide-gray-800">
    <li class="flex gap-3 px-4 py-3">
      <span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" /></svg>
        <span class="sr-only">Success. </span>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm text-gray-900 dark:text-gray-100">Deploy <span class="font-semibold">#914</span> finished in 42s</p>
        <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">2m ago</p>
      </div>
    </li>
    <li class="flex gap-3 px-4 py-3">
      <span class="flex h-9 w-9 flex-none items-center justify-center rounded-full bg-amber-50 text-amber-700 dark:bg-amber-950 dark:text-amber-300">
        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10.9 3.6a1 1 0 0 0-1.8 0l-6 11A1 1 0 0 0 4 16h12a1 1 0 0 0 .9-1.4l-6-11ZM9 8a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0V8Zm1 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z" /></svg>
        <span class="sr-only">Warning. </span>
      </span>
      <div class="min-w-0 flex-1">
        <p class="text-sm text-gray-900 dark:text-gray-100">Usage is at 82% of your monthly quota</p>
        <p class="mt-0.5 text-xs text-gray-600 dark:text-gray-400">1h ago</p>
      </div>
    </li>
    <!-- ...repeat per feed item -->
  </ul>
</section>