chore: create Multica handoff checkpoint

app/frontend/pages/sentiment/foundation.css

@@ -1,5 +1,5 @@
 /* Canonical CSS owner: sentiment. Historical layers consolidated 2026-08-02. */
-@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
+@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
   #sentimentCycleView {
     --sentiment-history-max-height: min(480px, calc(100dvh - 210px));
   }
@@ -428,7 +428,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   body[data-active-view="sentimentCycleView"] .overview-strip {
     display: none;
   }
@@ -541,7 +541,7 @@
   background: rgb(238, 243, 246);
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   .sentiment-block {
     min-height: 0px;
 
@@ -619,7 +619,7 @@
   }
 }
 
-@media (max-width: 720px) {
+@media (max-width: 767px) {
   .overview-strip .sentiment-block {
     grid-area: 1 / 1 / 3;
 
@@ -1336,7 +1336,7 @@
   }
 }
 
-@media (max-width: 1023px) and (min-width: 721px) {
+@media (max-width: 1023px) and (min-width: 768px) {
   .redesigned-emotion-grid {
     grid-template-columns: 1fr;
   }
@@ -1348,7 +1348,7 @@
   }
 }
 
-@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
+@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
   .redesigned-emotion-grid {
     grid-template-columns: 1fr;
   }
@@ -1508,7 +1508,7 @@
   text-align: center;
 }
 
-@media (min-width: 721px) {
+@media (min-width: 768px) {
   #sentimentCycleView.active-view {
     min-height: 0px;
 
@@ -1534,7 +1534,7 @@
   }
 }
 
-@media (min-width: 721px) and (max-height: 1100px) {
+@media (min-width: 768px) and (max-height: 1100px) {
   #sentimentCycleView .sentiment-phase-block {
     gap: 12px;
 
@@ -1570,7 +1570,7 @@
   }
 }
 
-@media (min-width: 721px) {
+@media (min-width: 768px) {
   :root #sentimentCycleView.active-view {
     height: auto;
 
@@ -1661,7 +1661,7 @@
   padding-bottom: var(--card-gap);
 }
 
-@media (min-width: 721px) {
+@media (min-width: 768px) {
   .redesigned-sentiment-view .sentiment-chart-shell {
     padding-right: 16px;
 
@@ -1674,3 +1674,89 @@
     grid-template-columns: minmax(270px, 1.25fr) repeat(3, minmax(160px, 1fr));
   }
 }
+
+/* Mobile information order: trend, current phase, composition, then history. */
+@media (max-width: 767px) {
+  #sentimentCycleView .sentiment-cycle-toolbar {
+    gap: var(--space-8);
+    padding: 0;
+  }
+
+  #sentimentCycleView .sentiment-cycle-analysis,
+  #sentimentCycleView .redesigned-emotion-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+  }
+
+  #sentimentCycleView .sentiment-analysis-main {
+    order: 1;
+  }
+
+  #sentimentCycleView .sentiment-analysis-rail {
+    order: 2;
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--space-12);
+  }
+
+  #sentimentCycleView .sentiment-trend-panel,
+  #sentimentCycleView .sentiment-components-panel {
+    padding: 0;
+  }
+
+  #sentimentCycleView .sentiment-chart-legend {
+    gap: var(--space-12);
+    padding: 0 var(--space-12);
+    overflow-x: auto;
+    white-space: nowrap;
+    scrollbar-width: none;
+  }
+
+  #sentimentCycleView .sentiment-chart-shell,
+  #sentimentCycleView .sentiment-chart-shell canvas {
+    height: var(--mobile-chart-height);
+  }
+
+  #sentimentCycleView .sentiment-phase-block {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: var(--space-12);
+  }
+
+  #sentimentCycleView .sentiment-current-phase-badge {
+    min-width: var(--mobile-phase-badge-width);
+  }
+
+  #sentimentCycleView .sentiment-detail-toolbar {
+    min-height: var(--mobile-touch-size);
+    padding: var(--space-8) 0;
+  }
+
+  #sentimentCycleView .sentiment-history-frame {
+    min-height: var(--mobile-table-min-height);
+    max-height: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+    overflow-x: auto;
+    overflow-y: visible;
+  }
+}
+
+@media (max-width: 359px) {
+  #sentimentCycleView .sentiment-phase-block {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  #sentimentCycleView .redesigned-emotion-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  #sentimentCycleView .sentiment-analysis-rail {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}