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/SchoolDetailView.module.css

@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;

nextjs-app/components/SchoolDetailView.tsx

@@ -373,8 +373,15 @@ export function SchoolDetailView({
             <button
               onClick={handleComparisonToggle}
               className={isInComparison ? styles.btnRemove : styles.btnAdd}
+              aria-label={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>

nextjs-app/components/SchoolHeroMap.module.css

@@ -16,6 +16,17 @@
     }
 }
 
+/* Preview: move the OSM attribution off the bottom edge, where the school
+   title slides up under the fade — top-left is the band's only quiet corner
+   (Compare floats top-right). Fullscreen keeps Leaflet's default bottom-right,
+   since the zoom control occupies the top-left there. */
+.wrapper:not([data-fullscreen]) :global(.leaflet-bottom.leaflet-right) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+}
+
 /* Fullscreen: the Fullscreen API promotes this element to fill the viewport. */
 .wrapper[data-fullscreen] {
     height: 100vh;

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -87,6 +87,36 @@
     background: #fff;
 }
 
+/* Full label by default; phones over the map get an icon-only button
+   (same compact treatment as the section-nav compare icon). */
+.btnCompareGlyph {
+    display: none;
+}
+
+@media (max-width: 640px) {
+    .headerHasMap .actions .btnCompareLabel {
+        display: none;
+    }
+
+    .headerHasMap .actions .btnCompareGlyph {
+        display: inline;
+    }
+
+    .headerHasMap .actions .btnAdd,
+    .headerHasMap .actions .btnRemove {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: none;
+        width: 40px;
+        height: 40px;
+        padding: 0;
+        border-radius: 999px;
+        font-size: 1.375rem;
+        line-height: 1;
+    }
+}
+
 /* Inline "View on map ↗" trigger next to the address. */
 .mapLink {
     border: none;

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'}
             >
+              {/* 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>