feat(ui): tilt and north-up compass controls (#571)

Supersedes #442 by @yashveeeeeeer, ported onto the current component layout with fixes from review.

Verified before merge: format, package boundaries, unit suite, build, and the browser tracking suite; a browser harness for the change where one applies; adversarial review applied.

Co-authored-by: Yashveer Singh <[email protected]>

src/ui/styles/cockpit.css

@@ -1946,7 +1946,14 @@ body.cockpit-mode
   ) {
   display: none !important;
 }
-body.cockpit-mode :is(#clear-selected-layers, #share-btn, #reset-globe-view) {
+body.cockpit-mode
+  :is(
+    #clear-selected-layers,
+    #share-btn,
+    #tilt-map-view,
+    #north-up-view,
+    #reset-globe-view
+  ) {
   display: none !important;
 }
 body.cockpit-mode #left-panel-stack {

src/ui/styles/recording.css

@@ -27,6 +27,12 @@ body.recording-mode #scene-runtime.active {
 }
 
 /* Scene playback owns layer and camera sequencing until Stop or completion. */
-body.scene-playback-mode :is(#clear-selected-layers, #reset-globe-view) {
+body.scene-playback-mode
+  :is(
+    #clear-selected-layers,
+    #tilt-map-view,
+    #north-up-view,
+    #reset-globe-view
+  ) {
   display: none !important;
 }

src/ui/styles/responsive.css

@@ -28,6 +28,17 @@
     left: 20px;
   }
 
+  #top-center-actions {
+    top: max(12px, env(safe-area-inset-top));
+    right: 16px;
+    left: auto;
+    transform: none;
+  }
+
+  #style-indicator {
+    display: none;
+  }
+
   #title-bar h1 {
     font-size: 16px;
     letter-spacing: 4px;
@@ -226,3 +237,15 @@
     text-align: center;
   }
 }
+
+@media (max-width: 520px) {
+  #title-bar {
+    top: 14px;
+    left: 16px;
+  }
+
+  #title-bar h1 > span:last-child,
+  #title-bar .subtitle {
+    display: none;
+  }
+}

src/ui/styles/status.css

@@ -53,6 +53,33 @@
   font-size: 18px;
 }
 
+#tilt-map-view[aria-pressed='true'] {
+  border-color: var(--accent);
+  color: var(--accent);
+  box-shadow: 0 0 14px rgba(0, 212, 255, 0.18);
+}
+
+#north-up-view {
+  --camera-heading: 0deg;
+  position: relative;
+}
+
+.camera-compass-n {
+  position: absolute;
+  top: 2px;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+#north-up-view .camera-compass-needle {
+  font-size: 17px;
+  transform: rotate(calc(-1 * var(--camera-heading)));
+  transition: transform var(--transition-fast);
+}
+
 #global-loading-status {
   position: fixed;
   top: 74px;