Add Compare button to map view school list

- Add orange Compare button alongside Details button
- Toggle to Remove when school is in comparison
- Stack buttons vertically with consistent sizing

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

frontend/app.js

@@ -1138,6 +1138,10 @@ function renderCompactSchoolList(schools) {
           ? `<span class="distance-badge">${school.distance.toFixed(1)} mi</span>`
           : "";
 
+      const isInCompare = state.selectedSchools.some((s) => s.urn === school.urn);
+      const compareButtonText = isInCompare ? "Remove" : "Compare";
+      const compareButtonClass = isInCompare ? "btn-compare active" : "btn-compare";
+
       return `
         <div class="school-list-item" data-urn="${school.urn}">
           <div class="school-list-item-content">
@@ -1158,7 +1162,10 @@ function renderCompactSchoolList(schools) {
               </span>
             </div>
           </div>
-          <button class="btn btn-secondary school-list-item-details" data-urn="${school.urn}">Details</button>
+          <div class="school-list-item-actions">
+            <button class="btn ${compareButtonClass}" data-urn="${school.urn}">${compareButtonText}</button>
+            <button class="btn btn-secondary school-list-item-details" data-urn="${school.urn}">Details</button>
+          </div>
         </div>
       `;
     })
@@ -1169,8 +1176,8 @@ function renderCompactSchoolList(schools) {
   // Add click handlers for list items (to highlight on map)
   elements.schoolsGrid.querySelectorAll(".school-list-item").forEach((item) => {
     item.addEventListener("click", (e) => {
-      // Don't trigger if clicking the details button
-      if (e.target.closest(".school-list-item-details")) return;
+      // Don't trigger if clicking buttons
+      if (e.target.closest(".school-list-item-actions")) return;
       const urn = parseInt(item.dataset.urn, 10);
       highlightSchoolCard(urn, true);
     });
@@ -1184,6 +1191,27 @@ function renderCompactSchoolList(schools) {
       openSchoolModal(urn);
     });
   });
+
+  // Add click handlers for compare buttons
+  elements.schoolsGrid.querySelectorAll(".btn-compare").forEach((btn) => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const urn = parseInt(btn.dataset.urn, 10);
+      const school = schools.find((s) => s.urn === urn);
+      if (!school) return;
+
+      const isInCompare = state.selectedSchools.some((s) => s.urn === urn);
+      if (isInCompare) {
+        removeFromComparison(urn);
+        btn.textContent = "Compare";
+        btn.classList.remove("active");
+      } else {
+        addToComparison(school);
+        btn.textContent = "Remove";
+        btn.classList.add("active");
+      }
+    });
+  });
 }
 
 // =============================================================================