fix: address mobile UI review findings (#16)

- Hide desktop .card-section on mobile, add .m-search-input with same
  HTMX attrs for mobile course search (fixes horizontal overflow)
- Remove dead layoutCount var and .m-layouts-pill block in course-cards
- Remove dead 768px breakpoints from players.css (table hidden at 880px)
- Move .mobile-section-head inside else-block for empty state in both
  ratings-cards and course-cards (fixes section head showing on empty)
- Add tabindex, role=button, aria-expanded, onkeydown to .m-card and
  .m-course-card; toggle aria-expanded in JS toggle functions
- Fix data-history attribute to use <%=  (HTML-escaped) instead of <%-
- Convert var to const/let in all new/changed JS blocks

views/partials/ratings-cards.ejs

@@ -32,14 +32,13 @@ function renderSparkline(values, opts) {
 }
 %>
 
+<% if (ratings.length === 0) { %>
+    <p style="text-align: center; color: var(--ink-3); padding: 40px 0;">No players tracked yet.</p>
+<% } else { %>
 <div class="mobile-section-head">
     <span class="kicker">TRACKED PLAYERS &middot; <%= ratings.length %></span>
     <button id="trendchart-toggle-mobile" class="pill-button" type="button" aria-pressed="false">Trend chart</button>
 </div>
-
-<% if (ratings.length === 0) { %>
-    <p style="text-align: center; color: var(--ink-3); padding: 40px 0;">No players tracked yet.</p>
-<% } else { %>
 <div class="mobile-list">
     <% ratings.forEach(function(player, index) {
         var sparkSvg = renderSparkline(player.monthlyHistory || [], { w: 70, h: 26 });
@@ -56,7 +55,10 @@ function renderSparkline(values, opts) {
         var predGlyph = (predIsNull || player.deltaPredicted === 0) ? '–' : (player.deltaPredicted > 0 ? '▲' : '▼');
         var predNum = predIsNull ? '—' : (player.deltaPredicted > 0 ? '+' + player.deltaPredicted : String(player.deltaPredicted));
     %>
-    <div class="m-card" id="m-card-<%= player.pdgaNumber %>" onclick="toggleMobilePlayerCard(<%= player.pdgaNumber %>)">
+    <div class="m-card" id="m-card-<%= player.pdgaNumber %>"
+         tabindex="0" role="button" aria-expanded="false" aria-label="Expand player details"
+         onclick="toggleMobilePlayerCard(<%= player.pdgaNumber %>)"
+         onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();toggleMobilePlayerCard(<%= player.pdgaNumber %>);}">
         <div class="m-card__head">
             <div class="m-rank-chip<%= isFirst ? ' m-rank-chip--first' : '' %>"><%= rank %></div>
             <div class="m-card__name-stack">
@@ -88,7 +90,7 @@ function renderSparkline(values, opts) {
             <% if (player.ratingHistory && player.ratingHistory.length > 0) { %>
             <div class="player-chart m-chart"
                  data-variant="mobile"
-                 data-history='<%- JSON.stringify(player.ratingHistory) %>'>
+                 data-history="<%= JSON.stringify(player.ratingHistory) %>">
             </div>
             <% } %>
             <dl class="m-detail-grid">