fix: address code review findings — DRY delta-pill, var→const/let, tokenize colors

public/css/shared.css

@@ -662,7 +662,7 @@ a:hover {
 }
 
 .delta-pill.flat {
-    background: oklch(0.95 0.004 260);
+    background: var(--paper-2);
     color: var(--ink-3);
 }
 

public/js/chart.js

@@ -96,7 +96,7 @@ function createRatingChart(container, history) {
         if (isLast) {
             svg.appendChild(el('circle', {
                 cx: p.x.toFixed(1), cy: p.y.toFixed(1),
-                r: '4', fill: 'var(--accent)', stroke: 'white', 'stroke-width': '2'
+                r: '4', fill: 'var(--accent)', stroke: 'var(--paper)', 'stroke-width': '2'
             }));
         } else {
             svg.appendChild(el('circle', {

public/js/players.js

@@ -1,6 +1,17 @@
-var cachedDebugInfo = {};
-var pendingPlayerData = null;
-var openPdgaNumber = null;
+const cachedDebugInfo = {};
+let pendingPlayerData = null;
+let openPdgaNumber = null;
+
+// ── Delta-pill helper ─────────────────────────────
+// Returns { text, cls, html } — use .text/.cls to update existing DOM elements
+// safely; .html is available for insertion contexts.
+function renderDeltaPill(value, extraClass) {
+    if (value == null) return null;
+    const cls  = value > 0 ? 'up' : value < 0 ? 'down' : 'flat';
+    const text = value > 0 ? '+' + value : String(value);
+    const extra = extraClass ? ' ' + extraClass : '';
+    return { text, cls, html: `<span class="delta-pill ${cls}${extra}">${text}</span>` };
+}
 
 function setupTooltipsAfterSwap() {
     document.body.addEventListener('htmx:afterSwap', function(event) {
@@ -49,16 +60,16 @@ function initRatingsTooltips() {
 }
 
 function togglePlayerHistory(pdgaNumber) {
-    var historyRow = document.getElementById('history-' + pdgaNumber);
-    var contentDiv = document.getElementById('history-content-' + pdgaNumber);
-    var expandableRow = document.getElementById('row-' + pdgaNumber);
+    const historyRow = document.getElementById('history-' + pdgaNumber);
+    const contentDiv = document.getElementById('history-content-' + pdgaNumber);
+    const expandableRow = document.getElementById('row-' + pdgaNumber);
 
-    var isOpen = historyRow.style.display === 'table-row';
+    const isOpen = historyRow.style.display === 'table-row';
 
     // Close any previously-open row
     if (openPdgaNumber !== null && openPdgaNumber !== pdgaNumber) {
-        var prevHistory = document.getElementById('history-' + openPdgaNumber);
-        var prevRow = document.getElementById('row-' + openPdgaNumber);
+        const prevHistory = document.getElementById('history-' + openPdgaNumber);
+        const prevRow = document.getElementById('row-' + openPdgaNumber);
         if (prevHistory) {
             prevHistory.style.display = 'none';
             prevHistory.classList.remove('is-open');
@@ -144,11 +155,9 @@ async function refreshPlayer(pdgaNumber) {
 
             const deltaMonthPill = ratingCell.querySelector('.delta-pill');
             if (deltaMonthPill && data.player.ratingChange != null) {
-                const pillChange = data.player.ratingChange;
-                const pillText = pillChange > 0 ? `+${pillChange}` : pillChange.toString();
-                const pillClass = pillChange > 0 ? 'up' : pillChange < 0 ? 'down' : 'flat';
-                deltaMonthPill.textContent = pillText;
-                deltaMonthPill.className = `delta-pill ${pillClass}`;
+                const pill = renderDeltaPill(data.player.ratingChange);
+                deltaMonthPill.textContent = pill.text;
+                deltaMonthPill.className = `delta-pill ${pill.cls}`;
             }
         }
     } catch (error) {
@@ -509,15 +518,15 @@ function closeAddPlayerModal(event) {
 
 // ── Sparkline toggle ───────────────────────────────
 document.addEventListener('DOMContentLoaded', function() {
-    var btn = document.getElementById('trendchart-toggle');
+    const btn = document.getElementById('trendchart-toggle');
     if (!btn) return;
 
-    var state = localStorage.getItem('ratingtracker.sparklines') || 'on';
+    const state = localStorage.getItem('ratingtracker.sparklines') || 'on';
     document.body.dataset.sparklines = state;
     btn.setAttribute('aria-pressed', state === 'on' ? 'true' : 'false');
 
     btn.addEventListener('click', function() {
-        var next = document.body.dataset.sparklines === 'on' ? 'off' : 'on';
+        const next = document.body.dataset.sparklines === 'on' ? 'off' : 'on';
         document.body.dataset.sparklines = next;
         btn.setAttribute('aria-pressed', next === 'on' ? 'true' : 'false');
         localStorage.setItem('ratingtracker.sparklines', next);
@@ -527,9 +536,9 @@ document.addEventListener('DOMContentLoaded', function() {
 // ── Expandable row keyboard support ───────────────
 document.addEventListener('keydown', function(e) {
     if (e.key !== 'Enter' && e.key !== ' ') return;
-    var row = e.target;
+    const row = e.target;
     if (!row.classList || !row.classList.contains('expandable-row')) return;
     e.preventDefault();
-    var pdgaNumber = row.id.replace('row-', '');
+    const pdgaNumber = row.id.replace('row-', '');
     togglePlayerHistory(parseInt(pdgaNumber, 10));
 });