fix(mobile): stack topbar + collapse approvals at <=700px

Mobile audit at 390px viewport showed every scene with topbar
expanded to ~1333px because of fixed-width brand-lock + tabs +
topbar-actions in a grid-template-columns auto auto 1fr auto.

- Topbar collapses to single column with scrollable tab row
- Tabs become horizontally scrollable; smaller font/padding
- Hide topbar-mid (context chips) and user-email/topbar-age (the
  user knows who they are)
- Approvals split collapses at 700px instead of 900px
- Compact scene padding (16/12) on mobile

src/index.css

@@ -2062,3 +2062,29 @@ select.studio-input { background: var(--bp-paper); }
   .approvals-split { grid-template-columns: 1fr; }
   .approvals-list { max-height: 50vh; }
 }
+
+/* Mobile topbar: stack rows so a narrow viewport doesn't blow the layout. */
+@media (max-width: 700px) {
+  .topbar {
+    grid-template-columns: 1fr;
+    height: auto;
+    padding: 4px 0;
+  }
+  .brand-lock { padding: 6px 10px; font-size: 11px; }
+  .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 0 6px; }
+  .tab { font-size: 11px; padding: 6px 10px; }
+  .topbar-mid { display: none; }
+  .topbar-actions {
+    display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px; justify-content: flex-end;
+  }
+  .topbar-actions .link-btn { font-size: 10px; padding: 4px 6px; }
+  .user-email { display: none; }
+  .topbar-age { display: none; }
+
+  /* Approvals: stack at 700px (was 900) so iPhone 13 (390) hits the rule. */
+  .approvals-split { grid-template-columns: 1fr !important; }
+  .approvals-list { max-height: 50vh; }
+
+  /* Generic scene container padding. */
+  .hub-scene, .approvals-scene, .geo-scene, .explainer-scene { padding: 16px 12px; }
+}