System Status

<!--
  A service health row. The whole point is that status is NEVER carried by colour
  alone: each state pairs a distinct icon shape (check / triangle / cross) AND a
  written label ("Operational") with the dot. Someone in greyscale, or reading a
  screen reader, gets the state from the shape and the words. The dot is
  aria-hidden decoration; the label span is the real text. role="status".
-->
<div class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3 dark:border-gray-800 dark:bg-gray-900" role="status">
  <span class="flex h-6 w-6 flex-none items-center justify-center rounded-full bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300" aria-hidden="true">
    <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
      <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>
  <div class="min-w-0 flex-1">
    <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">API</p>
    <p class="text-sm leading-normal text-gray-600 dark:text-gray-400">All endpoints responding normally.</p>
  </div>
  <span class="flex-none rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-semibold text-green-800 dark:bg-green-900 dark:text-green-200">Operational</span>
</div>