feat(search): show the list view's rows beside the map

The list beside the map used its own cut-down card, so it showed less
than the list view (no phase, age range, denomination, trend, local
authority) and looked different. It now renders the list view's
SchoolRow / SecondarySchoolRow, through one renderRow shared by the list
view, the map pane and the phone's bottom sheet, which also gains
Remove from compare. CompactSchoolItem and its styles are gone.

The rows switched to their stacked layout on a max-width: 640px media
query, which never fires in a ~430px pane on a desktop screen. It is now
a container query on the list the row sits in (`results`, set on the
list view, the map pane and the bottom sheet). 600px of list is a 632px
screen less padding, so phones lay out as before.

Clicking a row, outside its links and buttons, still picks its pin, and
the selected row is outlined. The pane widens to 360–460px for the
taller rows.

The bottom sheet's close button was a 30px target; it is now 44px with
the same 30px circle (MOBILE.md), and the phone journey checks it.

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

nextjs-app/components/HomeView.module.css

@@ -591,7 +591,7 @@
 
 .mapViewContainer {
   display: grid;
-  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
   height: calc(100dvh - var(--map-top) - var(--map-bottom));
   min-height: 480px;
   background: var(--bg-card);
@@ -631,117 +631,22 @@
   overflow-y: auto;
   padding: 0.125rem 1rem 1rem;
   scrollbar-width: thin;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css),
+     which here is always narrow, whatever the screen. */
+  container: results / inline-size;
 }
 
-/* Compact School Item: the list pane's card, and the phone's bottom sheet. */
-.compactItem {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4375rem;
-  padding: 0.75rem 0.875rem;
-  background: var(--bg-card);
-  border: 1px solid var(--border);
-  border-radius: 10px;
+/* A row in the list beside the map: clicking it picks its pin. */
+.mapRow {
   cursor: pointer;
-  transition: border-color var(--transition), box-shadow var(--transition);
+  border-radius: 10px;
 }
 
-.compactItem:hover {
-  border-color: var(--border-strong);
+.mapRowSelected > * {
+  outline: 2px solid var(--brand);
+  outline-offset: 1px;
 }
 
-.compactItemSelected,
-.compactItemSelected:hover {
-  border-color: var(--brand);
-  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.28);
-}
-
-.compactItemHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 0.625rem;
-}
-
-.compactItemName {
-  font-family: var(--font-display);
-  font-size: 0.9375rem;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-.compactItemName:hover {
-  color: var(--brand-strong);
-  text-decoration: underline;
-}
-
-.distanceBadge {
-  flex-shrink: 0;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  background: var(--brand);
-  color: var(--brand-on);
-  border-radius: 4px;
-  white-space: nowrap;
-}
-
-.compactItemTags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-}
-
-.compactBadge,
-.compactTag {
-  padding: 0.125rem 0.4375rem;
-  border-radius: 4px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.compactTag {
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.ofsted1,
-.ofsted2 { background: var(--status-above-bg); color: var(--status-above); }
-.ofsted3 { background: var(--status-below-bg); color: var(--status-below); }
-.ofsted4 { background: var(--status-below); color: var(--text-inverse); }
-.ofstedRc { background: var(--phase-secondary-text); color: var(--text-inverse); }
-.ofstedInspected { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
-.ofstedPending { background: var(--border); color: var(--text-muted); }
-
-.compactItemFooter {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.compactStat {
-  font-size: 0.8125rem;
-  color: var(--text-secondary);
-}
-
-.compactStat strong {
-  font-size: 0.9375rem;
-  color: var(--text-primary);
-}
-
-.deltaUp { color: var(--status-above); font-weight: 600; }
-.deltaDown { color: var(--status-below); font-weight: 600; }
-
-.compactItemActions {
-  display: flex;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
 
 
 .sectionHeader {
@@ -779,6 +684,8 @@
   flex-direction: column;
   gap: 0.5rem;
   margin-bottom: 1.25rem;
+  /* The rows lay themselves out by this list's width (SchoolRow.module.css). */
+  container: results / inline-size;
 }
 
 /* Staggered fade-in for rows */
@@ -881,33 +788,37 @@
     animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
-  .bottomSheet .compactItem {
-    border: none;
-    box-shadow: none;
-    background: transparent;
-    padding: 1rem;
-    cursor: default;
-  }
 
+  /* A 30px circle, drawn by ::before, inside a 44px target (MOBILE.md). */
   .closeSheetBtn {
     position: absolute;
-    top: -12px;
-    right: -12px;
-    width: 30px;
-    height: 30px;
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 50%;
+    top: -19px;
+    right: -15px;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    background: none;
+    border: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     color: var(--text-secondary);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
     z-index: 10;
   }
 
+  .closeSheetBtn::before {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    z-index: -1;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.1);
+  }
+
   @keyframes slideUpSheet {
     from {
       transform: translateY(120%);
@@ -935,6 +846,13 @@
     display: none;
   }
 
+  /* The sheet holds one results row, which is the card itself. It is not
+     inside a `results` container, so give it one: a phone-width sheet takes
+     the row's narrow layout. */
+  .bottomSheet {
+    container: results / inline-size;
+  }
+
   .mapListPane .resultsHeader {
     padding: 0.625rem 0.875rem;
   }