css alignment fixes

public/css/app.css

@@ -19,7 +19,6 @@ body {
   color: var(--text);
   overscroll-behavior-y: contain;
 }
-
 body {
   margin: 0;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
@@ -40,7 +39,6 @@ button,
 [hidden] {
   display: none !important;
 }
-
 #app-shell,
 .app-page {
   min-height: 100dvh;
@@ -49,7 +47,6 @@ button,
 .app-page {
   background: var(--page-background);
 }
-
 #app-shell.has-navigation .app-page {
   padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
 }
@@ -67,7 +64,6 @@ button,
   color: #fff;
   box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .2);
 }
-
 .app-page > header.has-back-button {
   grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   gap: .5rem;
@@ -88,7 +84,6 @@ button,
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .app-page > header .back-button.ui-button {
   display: grid;
   place-items: center;
@@ -108,7 +103,6 @@ button,
   height: 1.25rem;
   pointer-events: none;
 }
-
 .content {
   width: min(48rem, 100%);
   box-sizing: border-box;
@@ -123,7 +117,6 @@ button,
   border-radius: .25rem;
   background: var(--notice);
 }
-
 #routes-page .content > section + section {
   margin-top: 2rem;
   padding-top: 1.25rem;
@@ -147,7 +140,6 @@ button,
   grid-template-columns: minmax(0, 1fr) auto;
   gap: .35rem;
 }
-
 #route-search {
   width: 100%;
   min-height: 3rem;
@@ -170,7 +162,6 @@ button,
   min-height: 3rem;
   margin: 0;
 }
-
 #all-routes-summary {
   margin: .75rem 0;
   color: var(--muted);
@@ -189,7 +180,6 @@ button,
   padding: 0;
   list-style: none;
 }
-
 .route-list button {
   display: grid;
   width: 100%;
@@ -214,7 +204,6 @@ button,
 .route-list button > small {
   color: var(--muted);
 }
-
 .route-list button > small {
   margin-top: .25rem;
   font-weight: 600;
@@ -230,12 +219,10 @@ button,
   cursor: progress;
   opacity: .65;
 }
-
 #poi-list button {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
 }
-
 #poi-list button > strong,
 #poi-list button > span:not(.poi-proximity) {
   grid-column: 1;
@@ -260,14 +247,12 @@ button,
   transition: transform 180ms linear;
   will-change: transform;
 }
-
 .poi-proximity small {
   color: var(--text);
   font-size: .8rem;
   font-weight: 700;
   white-space: nowrap;
 }
-
 #poi-list button[aria-current="step"] {
   border-color: var(--primary);
   background: #e7f1e9;
@@ -288,7 +273,6 @@ button,
   background: var(--surface);
   color: var(--muted);
 }
-
 #route-page dl {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -318,7 +302,6 @@ button,
   min-width: 0;
   border: 0;
 }
-
 #route-page fieldset {
   display: grid;
   padding: 0;
@@ -340,7 +323,6 @@ button,
   cursor: pointer;
   touch-action: manipulation;
 }
-
 #route-page fieldset button.ui-button:focus-visible {
   outline: .2rem solid var(--focus);
   outline-offset: .15rem;
@@ -357,7 +339,6 @@ button,
   height: 2rem;
   pointer-events: none;
 }
-
 #route-page fieldset > legend,
 #slideshow > fieldset > legend {
   position: absolute;
@@ -384,7 +365,6 @@ button,
   background: #9b2c2c;
   border-color: #701f1f;
 }
-
 #slideshow {
   overflow: hidden;
   border-radius: .75rem;
@@ -405,7 +385,6 @@ button,
   object-fit: contain;
   background: #111;
 }
-
 #slideshow > fieldset {
   display: grid;
   grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
@@ -417,7 +396,6 @@ button,
   margin: 0;
   padding: .65rem;
 }
-
 #slideshow > fieldset > button.ui-button {
   display: grid;
   place-items: center;
@@ -434,7 +412,6 @@ button,
   height: 1.2rem;
   pointer-events: none;
 }
-
 #slideshow > fieldset > div {
   display: flex;
   align-self: stretch;
@@ -454,7 +431,6 @@ button,
   overflow-wrap: anywhere;
   line-height: 1.3;
 }
-
 #slide-position {
   display: block;
   margin-top: .15rem;
@@ -473,7 +449,6 @@ button,
 #poi-audio[hidden] {
   display: none;
 }
-
 #navigation-footer {
   position: fixed;
   right: 0;
@@ -493,7 +468,6 @@ button,
   box-shadow: 0 -.25rem .8rem rgba(0, 0, 0, .2);
   backdrop-filter: blur(.4rem);
 }
-
 #navigation-arrow {
   width: 3.5rem;
   height: 3.5rem;
@@ -516,7 +490,6 @@ button,
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 #navigation-distance {
   font-size: 1.5rem;
   line-height: 1.1;
@@ -535,7 +508,6 @@ button,
     background: var(--primary-dark);
     color: #fff;
   }
-
   #pause-route:not(:disabled):hover,
   #pause-route:not(:disabled):focus {
     background: #704a00;
@@ -566,7 +538,6 @@ button,
     grid-template-columns: 1fr;
   }
 }
-
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -575,7 +546,6 @@ button,
     transition-duration: .01ms !important;
   }
 }
-
 .info-button {
   position: fixed;
   top: calc(env(safe-area-inset-top) + .45rem);
@@ -597,7 +567,6 @@ button,
   cursor: pointer;
   touch-action: manipulation;
 }
-
 .info-button:focus-visible {
   outline: .2rem solid #fff;
   outline-offset: .15rem;
@@ -607,7 +576,6 @@ button,
   padding-right: calc(var(--icon-button-size) + 1rem);
   padding-left: calc(var(--icon-button-size) + 1rem);
 }
-
 .switch-row {
   position: relative;
   display: grid;
@@ -635,7 +603,6 @@ button,
   color: var(--muted);
   line-height: 1.35;
 }
-
 .switch-row > input {
   position: absolute;
   width: 1px;
@@ -654,7 +621,6 @@ button,
   background: #d9ded9;
   transition: background-color 160ms ease, border-color 160ms ease;
 }
-
 .switch-track::after {
   position: absolute;
   top: .15rem;
@@ -676,7 +642,6 @@ button,
 .switch-row > input:checked + .switch-track::after {
   transform: translateX(1.45rem);
 }
-
 .switch-row > input:focus-visible + .switch-track {
   outline: .2rem solid var(--focus);
   outline-offset: .15rem;
@@ -687,10 +652,13 @@ button,
   opacity: .72;
 }
 
+#bootstrap-screen .privacy-summary > .switch-row.switch-disabled {
+  display: none;
+}
+
 .compact-switch {
   margin: 1rem 0;
 }
-
 .info-dialog {
   width: min(48rem, calc(100% - 1.5rem));
   max-width: 48rem;
@@ -710,7 +678,6 @@ button,
   background: rgba(12, 20, 14, .72);
   backdrop-filter: blur(.15rem);
 }
-
 .info-dialog-shell {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
@@ -718,30 +685,30 @@ button,
 }
 
 .info-dialog-header {
-  display: grid;
+  display: flex;
-  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   align-items: center;
   gap: .4rem;
   padding: max(.4rem, env(safe-area-inset-top)) .5rem .4rem;
   background: var(--primary);
   color: #fff;
 }
-
 .info-dialog-header h2 {
+  flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   overflow: hidden;
   font-size: 1.15rem;
-  text-align: center;
+  text-align: left;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .info-dialog-header button {
   display: grid;
+  flex: 0 0 var(--icon-button-size);
   place-items: center;
   width: var(--icon-button-size);
   height: var(--icon-button-size);
+  min-width: var(--icon-button-size);
   padding: 0;
   border: 1px solid rgba(255, 255, 255, .55);
   border-radius: .45rem;
@@ -752,7 +719,9 @@ button,
   cursor: pointer;
   touch-action: manipulation;
 }
-
+#info-close {
+  margin-left: auto;
+}
 .info-dialog-content {
   min-height: 0;
   padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
@@ -767,7 +736,6 @@ button,
   display: grid;
   gap: .75rem;
 }
-
 .info-menu button {
   min-height: 3.5rem;
   padding: .85rem 1rem;
@@ -795,7 +763,6 @@ button,
 .info-page h3:first-of-type {
   margin-top: .5rem;
 }
-
 .info-page code {
   padding: .08rem .25rem;
   border-radius: .2rem;