Reworked watcher events and describing texts

public/css/app.css

@@ -251,13 +251,57 @@ button,
   font-weight: 700;
 }
 
-#start-tracking.ui-button {
-  width: 100%;
-  min-height: 3rem;
+.route-controls {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: .5rem;
   margin: 0 0 1rem;
-  border-color: var(--primary-dark);
+}
+
+.route-controls button {
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 3.25rem;
+  box-sizing: border-box;
+  padding: .55rem;
+  border: 1px solid transparent;
+  border-radius: .55rem;
+  box-shadow: 0 .12rem .35rem rgba(0, 0, 0, .12);
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.route-controls button:focus-visible {
+  outline: .2rem solid var(--focus);
+  outline-offset: .15rem;
+}
+
+.route-controls button:disabled {
+  cursor: default;
+  filter: grayscale(.65);
+  opacity: .42;
+}
+
+.route-controls img {
+  width: 2rem;
+  height: 2rem;
+  pointer-events: none;
+}
+
+#start-route {
   background: var(--primary);
-  color: #fff;
+  border-color: var(--primary-dark);
+}
+
+#pause-route {
+  background: #9a6500;
+  border-color: #704a00;
+}
+
+#stop-route {
+  background: #9b2c2c;
+  border-color: #701f1f;
 }
 
 #slideshow {
@@ -371,11 +415,21 @@ button,
 
   .app-page > header .back-button.ui-button:hover,
   .app-page > header .back-button.ui-button:focus,
-  #start-tracking.ui-button:hover,
-  #start-tracking.ui-button:focus {
+  #start-route:not(:disabled):hover,
+  #start-route:not(:disabled):focus {
     background: var(--primary-dark);
     color: #fff;
   }
+
+  #pause-route:not(:disabled):hover,
+  #pause-route:not(:disabled):focus {
+    background: #704a00;
+  }
+
+  #stop-route:not(:disabled):hover,
+  #stop-route:not(:disabled):focus {
+    background: #701f1f;
+  }
 }
 
 @media (max-width: 32rem) {