Refine sortable leaderboard columns

index.html

@@ -154,10 +154,11 @@
       cursor: pointer;
     }
     th:nth-child(2) .sort-button { justify-content: flex-start; }
-    .sort-button:hover, .sort-button[aria-sort] { color: var(--accent); }
+    .sort-button:hover { color: var(--ink); }
+    .sort-button[aria-sort] { color: #c73530; font-weight: 800; }
     .sort-mark { width: 9px; color: #a2aab7; font-size: 10px; }
     .sort-button[aria-sort="ascending"] .sort-mark,
-    .sort-button[aria-sort="descending"] .sort-mark { color: var(--accent); }
+    .sort-button[aria-sort="descending"] .sort-mark { color: #c73530; }
     .rank-value { color: #536074; font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 650; }
     .model-cell { display: flex; align-items: center; gap: 10px; }
     .provider-logo, .provider-fallback {
@@ -179,6 +180,7 @@
     .model-provider { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
     .score { color: #3b4658; font-variant-numeric: tabular-nums; }
     .score-overall { color: var(--accent); font-size: 15px; font-weight: 750; }
+    .score.score-selected { color: #111; font-weight: 750; }
     .empty-cell, .error-cell { padding: 24px; color: var(--muted); text-align: center !important; }
     .error-cell { color: #9a3535; }
     footer { margin-top: 32px; border-top: 1px solid var(--line); background: var(--surface); }
@@ -356,8 +358,6 @@
       }
 
       function sortValue(entry, column) {
-        if (column.kind === "rank") return entry.scores.overall;
-        if (column.kind === "model") return entry.model_name;
         return readPath(entry, column.path);
       }
 
@@ -437,6 +437,11 @@
         table.columns.forEach(function (column) {
           var cell = document.createElement("th");
           cell.scope = "col";
+          if (column.kind !== "score") {
+            cell.textContent = column.label;
+            header.appendChild(cell);
+            return;
+          }
           var button = document.createElement("button");
           button.className = "sort-button";
           button.type = "button";
@@ -454,7 +459,7 @@
             if (table.state.activeKey === column.key) {
               table.state.direction *= -1;
             } else {
-              table.state.direction = column.kind === "score" || column.kind === "rank" ? -1 : 1;
+              table.state.direction = -1;
             }
             table.state.sortColumn = column;
             table.state.activeKey = column.key;
@@ -492,6 +497,7 @@
             } else {
               var value = readPath(entry, column.path);
               var classes = column.key === "overall" ? "score score-overall" : "score";
+              if (column.key === table.state.activeKey) classes += " score-selected";
               row.appendChild(makeCell(formatScore(value), classes));
             }
           });