Numbered Ranking List

<!--
  A real <ol>: the rank is the list's own semantics, not text we typed. The rank
  badge is shrink-0 and the top three get an accent fill so the podium reads at a
  glance without relying on the number alone. The name takes min-w-0 + truncate;
  the value sits in a shrink-0 tabular-nums column so scores line up.
-->
<ol class="w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-gray-200 bg-white dark:divide-gray-800 dark:border-gray-800 dark:bg-gray-900" aria-label="Ranking">
  <li class="flex items-center gap-3 px-4 py-3">
    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-amber-400 text-xs font-bold text-amber-950" aria-hidden="true">1</span>
    <span class="min-w-0 flex-1">
      <span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Amara Okafor</span>
      <span class="block truncate text-xs text-gray-500 dark:text-gray-400">Growth team</span>
    </span>
    <span class="shrink-0 text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">2,940</span>
  </li>
  <li class="flex items-center gap-3 px-4 py-3">
    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-bold text-gray-600 dark:bg-gray-800 dark:text-gray-300" aria-hidden="true">4</span>
    <span class="min-w-0 flex-1">
      <span class="block truncate text-sm font-medium text-gray-900 dark:text-gray-100">Chen Wei</span>
      <span class="block truncate text-xs text-gray-500 dark:text-gray-400">Platform team</span>
    </span>
    <span class="shrink-0 text-sm font-semibold tabular-nums text-gray-900 dark:text-gray-100">1,880</span>
  </li>
</ol>