chore: create Multica handoff checkpoint

app/frontend/shared/components/navigation.css

@@ -23,7 +23,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   .toolbar-controls {
     width: 100%;
 
@@ -143,7 +143,7 @@
   box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
 }
 
-@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
+@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
   .redesigned-page-head .toolbar-controls {
     width: 100%;
 
@@ -219,8 +219,44 @@
   }
 }
 
-@media (min-width: 721px) {
+@media (min-width: 768px) {
   .toolbar-controls {
     align-items: center;
   }
 }
+
+/* Mobile navigation and filter contract. */
+@media (max-width: 767px) {
+  body.mobile-shell .toolbar-controls,
+  body.mobile-shell .redesigned-page-head .toolbar-controls {
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--space-8);
+    margin-left: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+  }
+
+  body.mobile-shell .toolbar-controls::-webkit-scrollbar,
+  body.mobile-shell .redesigned-page-head .toolbar-controls::-webkit-scrollbar {
+    display: none;
+  }
+
+  body.mobile-shell .segmented,
+  body.mobile-shell .redesigned-page-head .segmented {
+    width: max-content;
+    min-width: max-content;
+    min-height: var(--mobile-touch-size);
+    flex: 0 0 auto;
+  }
+
+  body.mobile-shell .segment,
+  body.mobile-shell .redesigned-page-head .segment {
+    min-width: var(--mobile-touch-size);
+    min-height: calc(var(--mobile-touch-size) - var(--space-4));
+    padding: 0 var(--space-12);
+  }
+}