feat(maps): single-color markers with Padelnomics Score

Phase B: Remove dual-ring marker design (ring/core), replace with
single-color markers colored by opportunity_score ("Padelnomics Score").
Simplify CSS, update tooltips to show one score line on all maps.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/padelnomics/content/templates/markets.html

@@ -20,10 +20,6 @@
 
   <!-- Map legend -->
   <div class="mb-6" style="display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; font-size:0.82rem; color:#64748B;">
-    <span style="display:flex; align-items:center; gap:0.35rem;">
-      <span style="font-weight:600;">◉</span> inner = Market Score
-      &nbsp;<span style="font-weight:600;">○</span> ring = Opportunity Score
-    </span>
     <span style="display:flex; align-items:center; gap:0.3rem;">
       <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#15803D;"></span>≥80
       <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#0D9488;margin-left:4px;"></span>≥60
@@ -98,12 +94,6 @@
     maxZoom: 18
   }).addTo(map);
 
-  function dot(hex, filled) {
-    return filled
-      ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-      : '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;"></span>';
-  }
-
   var data = {{ map_countries | tojson }};
   if (data.length) {
     var maxV = Math.max.apply(null, data.map(function(d) { return d.total_venues; }));
@@ -111,13 +101,13 @@
     data.forEach(function(c) {
       if (!c.lat || !c.lon) return;
       var size = 12 + 44 * Math.sqrt(c.total_venues / maxV);
-      var coreHex = sc(c.avg_market_score);
+      var score = c.avg_opportunity_score || 0;
-      var ringHex = sc(c.avg_opportunity_score || 0);
+      var hex = sc(score);
       var tip = '<strong>' + c.country_name_en + '</strong><br>'
-        + dot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Market Score: ' + c.avg_market_score + '/100</span><br>'
+        + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-        + dot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Opportunity Score: ' + (c.avg_opportunity_score || 0) + '/100</span><br>'
+        + '<span style="color:' + hex + ';font-weight:600;">Padelnomics Score: ' + score + '/100</span><br>'
         + '<span style="color:#94A3B8;font-size:0.75rem;">' + c.total_venues + ' venues · ' + c.city_count + ' cities</span>';
-      L.marker([c.lat, c.lon], { icon: PNMarkers.makeIcon({ size: size, coreColor: coreHex, ringColor: ringHex }) })
+      L.marker([c.lat, c.lon], { icon: PNMarkers.makeIcon({ size: size, color: hex }) })
         .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
         .on('click', function() { window.location = '/' + lang + '/markets/' + c.country_slug; })
         .addTo(map);

web/src/padelnomics/public/templates/opportunity_map.html

@@ -39,7 +39,6 @@
   <div id="map-data" style="display:none;"></div>
 
   <div class="mt-4 text-sm text-slate" style="display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; align-items:center;">
-    <span><strong>◉</strong> inner = Opportunity Score &nbsp;<strong>○</strong> ring = Market Score</span>
     <span style="display:flex; align-items:center; gap:0.3rem;">
       <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#15803D;"></span>≥80
       <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#0D9488;margin-left:4px;"></span>≥60
@@ -80,12 +79,6 @@
          : (p || '');
   }
 
-  function dot(hex, filled) {
-    return filled
-      ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-      : '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;"></span>';
-  }
-
   function renderMap() {
     oppLayer.clearLayers();
     refLayer.clearLayers();
@@ -109,20 +102,19 @@
     oppData.forEach(function(loc) {
       if (!loc.lat || !loc.lon) return;
       var size = 8 + 40 * Math.sqrt((loc.population || 1) / maxPop);
-      var coreHex = sc(loc.opportunity_score);
+      var score = loc.opportunity_score;
-      var ringHex = sc(loc.market_score || 0);
+      var hex = sc(score);
       var dist = loc.nearest_padel_court_km != null
         ? loc.nearest_padel_court_km.toFixed(1) + ' km to nearest court'
         : 'No nearby courts';
       var tip = '<strong>' + loc.location_name + '</strong><br>'
-        + dot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Opportunity Score: ' + loc.opportunity_score + '/100</span><br>'
+        + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-        + dot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Market Score: ' + (loc.market_score || 0) + '/100</span><br>'
+        + '<span style="color:' + hex + ';font-weight:600;">Padelnomics Score: ' + score + '/100</span><br>'
         + '<span style="color:#94A3B8;font-size:0.75rem;">' + dist + ' · Pop. ' + fmtPop(loc.population) + '</span>';
       var icon = PNMarkers.makeIcon({
         size: size,
-        coreColor: coreHex,
+        color: hex,
-        ringColor: ringHex,
+        pulse: score >= 75,
-        pulse: loc.opportunity_score >= 75,
       });
       L.marker([loc.lat, loc.lon], { icon: icon })
         .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })

web/src/padelnomics/static/css/input.css

@@ -879,10 +879,9 @@
 .leaflet-tooltip.map-tooltip::before { display: none; }
 .leaflet-tooltip.map-tooltip strong { color: white; }
 
-/* ── Dual-ring map markers ── */
+/* ── Single-color map markers ── */
-/* Container: sets size, white border, shadow, hover */
+/* Circle: score-colored background, white border, shadow, hover */
 .pn-marker {
-  position: relative;
   border-radius: 50%;
   border: 2.5px solid white;
   box-shadow: 0 2px 8px rgba(0,0,0,0.28);
@@ -893,25 +892,6 @@
   box-shadow: 0 3px 12px rgba(0,0,0,0.38);
   transform: scale(1.1);
 }
-/* Outer ring: secondary score color */
-.pn-marker__ring {
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  opacity: 0.65;
-}
-/* Inner core: primary score color, inset 5px from container edges */
-.pn-marker__core {
-  position: absolute;
-  inset: 5px;
-  border-radius: 50%;
-  border: 1.5px solid rgba(255,255,255,0.5);
-}
-/* Compact fallback: marker < 18px, no ring — core fills container */
-.pn-marker--compact .pn-marker__core {
-  inset: 0;
-  border: none;
-}
 
 /* User's city highlight — blue outer glow */
 .pn-marker--highlight {
@@ -919,29 +899,24 @@
   box-shadow: 0 0 0 3px rgba(59,130,246,0.25), 0 2px 8px rgba(0,0,0,0.28);
 }
 
-/* Non-article city markers: faded, dashed ring outline, no click */
+/* Non-article city markers: faded, no click */
 .pn-marker--muted {
   opacity: 0.4;
   cursor: default;
   filter: saturate(0.6) brightness(1.1);
 }
-.pn-marker--muted .pn-marker__ring {
-  background: transparent !important;
-  border: 1.5px dashed rgba(255,255,255,0.6);
-  opacity: 1;
-}
 .pn-marker--muted:hover {
   transform: none;
   box-shadow: 0 2px 8px rgba(0,0,0,0.28);
 }
 
-/* Pulse animation — opportunity map only, score >= 75 */
+/* Pulse animation — high-score locations */
-.pn-marker--pulse .pn-marker__ring {
+.pn-marker--pulse {
   animation: marker-pulse 2.5s ease-in-out infinite;
 }
 @keyframes marker-pulse {
-  0%, 100% { transform: scale(1);    opacity: 0.65; }
+  0%, 100% { transform: scale(1);   opacity: 1; }
-  50%      { transform: scale(1.35); opacity: 0.25; }
+  50%      { transform: scale(1.2); opacity: 0.7; }
 }
 
 /* Small fixed venue dot */

web/src/padelnomics/static/js/article-maps.js

@@ -15,12 +15,12 @@
   var TILES = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png';
   var TILES_ATTR = '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>';
   var sc = PNMarkers.scoreColor;
+  var T = window.__MAP_T || {};
 
-  function tooltipDot(hex, filled) {
+  function fmtPop(p) {
-    var style = filled
+    return p >= 1000000 ? (p / 1000000).toFixed(1) + 'M'
-      ? 'display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;'
+         : p >= 1000   ? Math.round(p / 1000) + 'K'
-      : 'display:inline-block;width:8px;height:8px;border-radius:50%;border:2px solid ' + hex + ';vertical-align:middle;margin-right:4px;';
+         : (p || '');
-    return '<span style="' + style + '"></span>';
   }
 
   function initCountryMap(el) {
@@ -38,26 +38,23 @@
           if (!c.lat || !c.lon) return;
           var size = 10 + 36 * Math.sqrt((c.padel_venue_count || 1) / maxV);
           var hasArticle = c.has_article !== false;
-          var coreHex = sc(c.market_score);
+          var score = c.opportunity_score || 0;
-          var ringHex = sc(c.opportunity_score || 0);
+          var hex = sc(score);
-          var pop = c.population >= 1000000
+          var pop = fmtPop(c.population);
-            ? (c.population / 1000000).toFixed(1) + 'M'
-            : (c.population >= 1000 ? Math.round(c.population / 1000) + 'K' : (c.population || ''));
           var tip = '<strong>' + c.city_name + '</strong><br>'
-            + tooltipDot(coreHex, true) + '<span style="color:' + coreHex + ';font-weight:600;">Market Score: ' + Math.round(c.market_score) + '/100</span><br>'
+            + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
-            + tooltipDot(ringHex, false) + '<span style="color:' + ringHex + ';font-weight:600;">Opportunity Score: ' + Math.round(c.opportunity_score || 0) + '/100</span><br>'
+            + '<span style="color:' + hex + ';font-weight:600;">' + (T.score_label || 'Padelnomics Score') + ': ' + Math.round(score) + '/100</span><br>'
             + '<span style="color:#94A3B8;font-size:0.75rem;">'
-            + (c.padel_venue_count || 0) + ' venues'
+            + (c.padel_venue_count || 0) + ' ' + (T.venues || 'venues')
-            + (pop ? ' · ' + pop : '') + '</span>';
+            + (pop ? ' · ' + pop + ' ' + (T.pop || 'pop') : '') + '</span>';
           if (hasArticle) {
-            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Click to explore →</span>';
+            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">' + (T.click_explore || 'Click to explore →') + '</span>';
           } else {
-            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">Coming soon</span>';
+            tip += '<br><span style="color:#94A3B8;font-size:0.75rem;">' + (T.coming_soon || 'Coming soon') + '</span>';
           }
           var icon = PNMarkers.makeIcon({
             size: size,
-            coreColor: coreHex,
+            color: hex,
-            ringColor: ringHex,
             muted: !hasArticle,
           });
           var marker = L.marker([c.lat, c.lon], { icon: icon })
@@ -80,8 +77,7 @@
             var hSize = 10 + 36 * Math.sqrt((match.padel_venue_count || 1) / maxV);
             var hIcon = PNMarkers.makeIcon({
               size: hSize,
-              coreColor: sc(match.market_score),
+              color: sc(match.opportunity_score || 0),
-              ringColor: sc(match.opportunity_score || 0),
               highlight: true,
             });
             L.marker([match.lat, match.lon], { icon: hIcon }).addTo(map);
@@ -107,9 +103,9 @@
           var outdoor = v.outdoor_court_count || 0;
           var total = v.court_count || (indoor + outdoor);
           var courtLine = total
-            ? total + ' court' + (total > 1 ? 's' : '')
+            ? total + ' ' + (T.courts || 'court' + (total > 1 ? 's' : ''))
               + (indoor || outdoor
-                ? ' (' + [indoor ? indoor + ' indoor' : '', outdoor ? outdoor + ' outdoor' : ''].filter(Boolean).join(', ') + ')'
+                ? ' (' + [indoor ? indoor + ' ' + (T.indoor || 'indoor') : '', outdoor ? outdoor + ' ' + (T.outdoor || 'outdoor') : ''].filter(Boolean).join(', ') + ')'
                 : '')
             : '';
           var tip = '<strong>' + v.name + '</strong>' + (courtLine ? '<br>' + courtLine : '');

web/src/padelnomics/static/js/map-markers.js

@@ -1,18 +1,17 @@
 /**
- * Shared map marker utilities — dual-ring design with 5-tier color scale.
+ * Shared map marker utilities — single-color markers with 5-tier color scale.
  *
  * Exposes window.PNMarkers = { scoreColor, makeIcon }
  *
  * scoreColor(score) → hex color string (5 tiers, colorblind-safe luminance steps)
- * makeIcon(opts)    → L.divIcon with dual-ring HTML
+ * makeIcon(opts)    → L.divIcon with single-color circle
  *
  * opts = {
  *   size:       number,           // marker diameter in px
- *   coreColor:  string,           // hex for inner core (primary score)
+ *   color:      string,           // hex color (from scoreColor)
- *   ringColor:  string,           // hex for outer ring (secondary score)
+ *   muted:      boolean,          // faded, no click affordance
- *   muted:      boolean,          // dashed ring, no click affordance
  *   highlight:  boolean,          // blue outer glow (user's geo city)
- *   pulse:      boolean,          // gentle ring pulse (high opportunity)
+ *   pulse:      boolean,          // gentle pulse (high score)
  * }
  */
 (function() {
@@ -27,30 +26,15 @@
     return '#DC2626';                  // red — poor
   }
 
-  var COMPACT_THRESHOLD_PX = 18;
-
   function makeIcon(opts) {
     var s = Math.round(opts.size);
-    var compact = s < COMPACT_THRESHOLD_PX;
 
     var cls = 'pn-marker';
-    if (compact)        cls += ' pn-marker--compact';
     if (opts.muted)     cls += ' pn-marker--muted';
     if (opts.highlight) cls += ' pn-marker--highlight';
     if (opts.pulse && !opts.muted) cls += ' pn-marker--pulse';
 
-    var html;
+    var html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;background:' + opts.color + ';"></div>';
-    if (compact || !opts.ringColor) {
-      // Single-layer fallback: core fills entire marker
-      html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;">'
-           + '<div class="pn-marker__core" style="background:' + opts.coreColor + ';"></div>'
-           + '</div>';
-    } else {
-      html = '<div class="' + cls + '" style="width:' + s + 'px;height:' + s + 'px;">'
-           + '<div class="pn-marker__ring" style="background:' + opts.ringColor + ';"></div>'
-           + '<div class="pn-marker__core" style="background:' + opts.coreColor + ';"></div>'
-           + '</div>';
-    }
 
     return L.divIcon({
       className: '',