overhaul gpx creation and usage

public/css/app.css

@@ -456,7 +456,7 @@ button,
   left: 0;
   z-index: 40;
   display: grid;
-  grid-template-columns: 3.75rem minmax(0, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   align-items: center;
   min-height: var(--footer-height);
   box-sizing: border-box;
@@ -468,7 +468,8 @@ button,
   box-shadow: 0 -.25rem .8rem rgba(0, 0, 0, .2);
   backdrop-filter: blur(.4rem);
 }
-#navigation-arrow {
+#navigation-arrow,
+#route-navigation-arrow {
   width: 3.5rem;
   height: 3.5rem;
   fill: currentColor;
@@ -484,7 +485,8 @@ button,
   margin: 0;
 }
 
-#navigation-mode {
+#navigation-mode,
+#route-navigation-mode {
   overflow: hidden;
   font-size: .78rem;
   text-overflow: ellipsis;
@@ -845,3 +847,25 @@ button,
     padding: .65rem;
   }
 }
+
+.navigation-target {
+  display: grid;
+  grid-template-columns: 2.8rem minmax(0, 1fr);
+  align-items: center;
+  gap: .35rem;
+  min-width: 0;
+}
+.navigation-target svg { width: 2.7rem; height: 2.7rem; }
+#route-recording-control {
+  position: fixed;
+  top: calc(env(safe-area-inset-top) + var(--icon-button-size) + 1rem);
+  left: max(.5rem, env(safe-area-inset-left));
+  right: max(.5rem, env(safe-area-inset-right));
+  z-index: 45;
+  padding: .5rem;
+  border-radius: .7rem;
+  background: #f8f5eb;
+  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .2);
+}
+#route-recording-status { display: block; margin-bottom: .35rem; }
+#route-recording-control button { min-height: 2.75rem; }