Status Bar Tooltips

<!--
  An editor-style status bar: compact items whose meaning lives in a tooltip
  ABOVE each one (the bar sits at the bottom, so tips can only go up). The row
  WRAPS rather than scrolls - an overflow container would clip the tips. Each item
  is CSS-only, focus-reachable and role="tooltip" described.
-->
<div class="flex w-full flex-wrap items-center gap-1 border-t border-gray-200 bg-gray-50 px-2 py-1 dark:border-gray-800 dark:bg-gray-900">
  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-sb-branch" class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">main</button>
    <span id="tt-sb-branch" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-0 z-30 w-max rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">Current branch - click to switch</span>
  </span>
  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-sb-errors" class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">0 errors</button>
    <span id="tt-sb-errors" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-0 z-30 w-max rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">No problems detected</span>
  </span>
  <span class="group relative inline-flex">
    <button type="button" aria-describedby="tt-sb-enc" class="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs font-medium text-gray-600 hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400">UTF-8</button>
    <span id="tt-sb-enc" role="tooltip" class="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-0 z-30 w-max rounded-md bg-gray-900 px-2.5 py-1.5 text-xs font-medium text-gray-50 opacity-0 shadow-sm transition group-hover:opacity-100 group-focus-within:opacity-100 motion-reduce:transition-none dark:bg-gray-100 dark:text-gray-900">File encoding</span>
  </span>
</div>