feat(school-detail): icon-only Compare on phone heroes; unclutter map bottom edge

On ≤640px the floating Compare button becomes a 40px round glyph (+ / ✓,
aria-labelled) like the section-nav compare icon, instead of a full-width
text pill over the map. The OSM attribution moves to the map band's
top-left in preview so it no longer collides with the school name sliding
up under the fade; fullscreen keeps Leaflet's default bottom-right since
the zoom control occupies the top-left there.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -292,8 +292,15 @@ export function SecondarySchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={isInComparison ? 'In comparison' : 'Add to compare'}
             >
-              {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              {/* On phones the map hero shows only the glyph (nav-bar style). */}
+              <span className={styles.btnCompareLabel}>
+                {isInComparison ? '✓ In Comparison' : '+ Add to Compare'}
+              </span>
+              <span className={styles.btnCompareGlyph} aria-hidden="true">
+                {isInComparison ? '✓' : '+'}
+              </span>
             </button>
           </div>
         </div>