simplify application and remove window references

public/css/app.css

@@ -99,7 +99,7 @@ button,
   padding: .35rem;
   border-color: rgba(255, 255, 255, .45);
   border-radius: .45rem;
-  background: rgba(255, 255, 255, .12);
+  background: var(--primary-dark);
   color: #fff;
 }
 
@@ -289,38 +289,45 @@ button,
   color: var(--muted);
 }
 
-.route-facts {
+#route-page dl {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: .5rem;
   margin: 1rem 0;
 }
 
-.route-facts div {
+#route-page dl > div {
   padding: .75rem;
   border-radius: .5rem;
   background: var(--surface);
   text-align: center;
 }
 
-.route-facts dt {
+#route-page dt {
   color: var(--muted);
   font-size: .8rem;
 }
 
-.route-facts dd {
+#route-page dd {
   margin: .25rem 0 0;
   font-weight: 700;
 }
 
-.route-controls {
+#route-page fieldset,
+#slideshow > fieldset {
+  min-width: 0;
+  border: 0;
+}
+
+#route-page fieldset {
   display: grid;
+  padding: 0;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: .5rem;
   margin: 0 0 1rem;
 }
 
-.route-controls button {
+#route-page fieldset button {
   display: grid;
   place-items: center;
   min-width: 0;
@@ -334,23 +341,35 @@ button,
   touch-action: manipulation;
 }
 
-.route-controls button:focus-visible {
+#route-page fieldset button:focus-visible {
   outline: .2rem solid var(--focus);
   outline-offset: .15rem;
 }
 
-.route-controls button:disabled {
+#route-page fieldset button:disabled {
   cursor: default;
   filter: grayscale(.65);
   opacity: .42;
 }
 
-.route-controls img {
+#route-page fieldset img {
   width: 2rem;
   height: 2rem;
   pointer-events: none;
 }
 
+#route-page fieldset > legend,
+#slideshow > fieldset > legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 #start-route {
   background: var(--primary);
   border-color: var(--primary-dark);
@@ -386,8 +405,9 @@ button,
   background: #111;
 }
 
-#slide-controls {
+#slideshow > fieldset {
   display: grid;
+  margin: 0;
   grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   align-items: stretch;
   gap: .5rem;
@@ -396,7 +416,7 @@ button,
   padding: .65rem;
 }
 
-#slide-controls .ui-button {
+#slideshow > fieldset .ui-button {
   display: grid;
   place-items: center;
   min-width: 0;
@@ -405,13 +425,13 @@ button,
   padding: .45rem;
 }
 
-#slide-controls .ui-button img {
+#slideshow > fieldset .ui-button img {
   width: 1.2rem;
   height: 1.2rem;
   pointer-events: none;
 }
 
-.slide-meta {
+#slideshow > fieldset > div {
   display: flex;
   min-width: 0;
   min-height: var(--icon-button-size);
@@ -521,17 +541,17 @@ button,
     grid-template-columns: minmax(0, 1fr) 3rem;
   }
 
-  .route-facts {
+  #route-page dl {
     gap: .35rem;
   }
 
-  .route-facts div {
+  #route-page dl > div {
     padding: .6rem .25rem;
   }
 }
 
 @media (max-width: 22rem) {
-  .route-facts {
+  #route-page dl {
     grid-template-columns: 1fr;
   }
 }