add offline support

public/css/bootstrap.css

@@ -358,3 +358,76 @@
     transition: none;
   }
 }
+
+
+.offline-option-row {
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+}
+
+.offline-option-row > .switch-row {
+  flex: 1;
+  min-width: 0;
+}
+
+.offline-help-button {
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 1px solid #315d3a;
+  border-radius: 50%;
+  background: #fff;
+  color: #315d3a;
+  font: inherit;
+  font-size: 1.25rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.offline-help-button:focus-visible {
+  outline: 3px solid #315d3a;
+  outline-offset: 3px;
+}
+
+.offline-help {
+  padding: .85rem;
+  border: 1px solid var(--bootstrap-border);
+  border-radius: .65rem;
+  background: #fff;
+  color: var(--bootstrap-muted);
+  font-size: .92rem;
+  line-height: 1.5;
+}
+
+.offline-help h2 {
+  margin: 0 0 .5rem;
+  color: #315d3a;
+  font-size: 1rem;
+}
+
+.offline-help ul {
+  padding-left: 1.25rem;
+}
+
+.offline-help p:last-child {
+  margin-bottom: 0;
+}
+
+.storage-usage {
+  margin: .75rem 0;
+  padding: .85rem;
+  border: 1px solid #c8d3ca;
+  border-radius: .65rem;
+  background: #f9fbf6;
+  color: #315d3a;
+  font-size: .9rem;
+  line-height: 1.4;
+}
+.storage-usage h3 { margin: 0 0 .5rem; font-size: 1rem; }
+.storage-usage meter { width: 100%; height: 1.25rem; }
+.storage-usage p { margin: .4rem 0; }
+.storage-usage [data-storage-warning] { color: #861d1d; font-weight: 700; }
+.route-offline-controls { margin: .75rem 0; }
+.route-offline-controls > a { display: inline-block; padding: .75rem; }
+.route-offline-controls > a[hidden] { display: none; }