Negative results: drop table tag/opacity, match non-records dot styling on chart

static/index.html

@@ -1834,16 +1834,9 @@ function renderLeaderboard(entries) {
   ranked.forEach((e, i) => {
     const rank = i + 1;
     const isBest = rank === 1;
-    const isNeg = e.status === 'negative';
     const tr = document.createElement('tr');
     if (isBest) tr.classList.add('best-row');
-    if (isNeg) tr.style.opacity = '0.7';
-    const symbol = isNeg
-      ? '<span class="rank-badge rank-badge--default" style="background:#f3f4f6;color:#9ca3af">—</span>'
-      : (rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : `<span class="rank-badge rank-badge--default">${rank}</span>`);
-    const negTag = isNeg
-      ? ' <span style="display:inline-block;padding:1px 7px;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb;border-radius:999px;vertical-align:1px">negative</span>'
-      : '';
+    const symbol = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : `<span class="rank-badge rank-badge--default">${rank}</span>`;
     const d = new Date(e.date);
     const dateStr = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' +
       d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
@@ -1852,7 +1845,7 @@ function renderLeaderboard(entries) {
       <td class="rank-cell"><span class="rank-badge">${symbol}</span></td>
       <td class="score-cell ${isBest ? 'score-cell--best' : ''}">${e.score.toLocaleString()}</td>
       <td>${escapeHtml(e.bpc || '')}</td>
-      <td>${escapeHtml(e.method || '')}${negTag}</td>
+      <td>${escapeHtml(e.method || '')}</td>
       <td><span class="agent-tag ${isBest ? 'agent-tag--record' : ''}">${escapeHtml(e.agent)}</span></td>
       <td class="run-cell">${escapeHtml(e.run)}</td>
       <td class="date-cell">${dateStr}${liveBadge}</td>
@@ -2025,9 +2018,10 @@ function renderChart(entries) {
         { label: 'Running Best', data: bestLineData, borderColor: HF_ORANGE, backgroundColor: HF_ORANGE_DIM, borderWidth: 2.5, stepped: 'after', fill: true, pointRadius: 0, pointHoverRadius: 0, tension: 0, order: 2 },
         { label: 'Records', data: bestScatter, type: 'scatter', backgroundColor: HF_ORANGE, borderColor: '#fff', borderWidth: 2, pointRadius: 7, pointHoverRadius: 9, pointStyle: 'circle', order: 1 },
         { label: 'Non-Records', data: nonBestData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
-        // Negatives: smaller, slightly transparent grey dots, no permanent
-        // label. Tooltip carries the identifying info on hover.
-        { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: 'rgba(156,163,175,0.55)', borderColor: '#fff', borderWidth: 1, pointRadius: 4, pointHoverRadius: 6, pointStyle: 'circle', order: -1 },
+        // Negatives: same look as Non-Records (full grey dot, same size).
+        // The only difference is the nonBestLabels plugin doesn't draw an
+        // always-on label for them; tooltip on hover identifies them.
+        { label: 'Negatives', data: negativeData, type: 'scatter', backgroundColor: NON_BEST_COLOR, borderColor: '#fff', borderWidth: 1.5, pointRadius: 5, pointHoverRadius: 7, pointStyle: 'circle', order: 0 },
         ...baselineDatasets,
       ],
     },
@@ -2054,18 +2048,16 @@ function renderChart(entries) {
             title: items => {
               const it = items[0];
               if (it.datasetIndex >= 4) return `baseline · ${it.dataset.label}`;
-              if (it.datasetIndex === 3) return `negative · ${it.raw?.agent || ''}`;
               return it.raw?.agent || '';
             },
             label: it => {
               if (it.datasetIndex >= 4) {
                 return [`Bytes: ${it.raw.y.toLocaleString()}`];
               }
-              if (it.datasetIndex === 3) {
-                const d = it.raw._origDate ? new Date(it.raw._origDate) : new Date(it.raw.x);
-                return [`Bytes: ${it.raw.y.toLocaleString()}`, `Date: ${d.toLocaleString()}`];
-              }
-              const d = new Date(it.raw.x);
+              // Negative scatter (idx 3) uses _origDate (the real timestamp)
+              // since the chart x is clamped into the run-range to keep the
+              // dot visible.
+              const d = it.raw._origDate ? new Date(it.raw._origDate) : new Date(it.raw.x);
               return [`Bytes: ${it.raw.y.toLocaleString()}`, `Date: ${d.toLocaleString()}`];
             }
           },