reworked poi details view

public/css/app.css

@@ -9,6 +9,7 @@
   --notice-border: #d4a72c;
   --focus: #1e6fba;
   --footer-height: 5.25rem;
+  --icon-button-size: 3.25rem;
 }
 
 html,
@@ -68,7 +69,7 @@ button,
 }
 
 .app-page > header:has(.back-button) {
-  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
   gap: .5rem;
 }
 
@@ -89,14 +90,25 @@ button,
 }
 
 .app-page > header .back-button.ui-button {
-  width: 5.5rem;
-  min-height: 2.75rem;
+  display: grid;
+  place-items: center;
+  width: var(--icon-button-size);
+  min-width: var(--icon-button-size);
+  min-height: var(--icon-button-size);
   margin: 0;
+  padding: .35rem;
   border-color: rgba(255, 255, 255, .45);
+  border-radius: .45rem;
   background: rgba(255, 255, 255, .12);
   color: #fff;
 }
 
+.app-page > header .back-button.ui-button img {
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+}
+
 .content {
   width: min(48rem, 100%);
   box-sizing: border-box;
@@ -374,34 +386,56 @@ button,
   background: #111;
 }
 
-#slideshow figcaption {
-  min-height: 1.4rem;
-  padding: .5rem .75rem;
-}
-
 #slide-controls {
   display: grid;
-  grid-template-columns: auto minmax(4rem, 1fr) auto;
-  align-items: center;
+  grid-template-columns: var(--icon-button-size) minmax(0, 1fr) var(--icon-button-size);
+  align-items: stretch;
+  gap: .5rem;
   width: 100%;
   box-sizing: border-box;
-  padding: .5rem;
-  text-align: center;
-}
-
-#slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
-  float: none;
+  padding: .65rem;
 }
 
 #slide-controls .ui-button {
-  min-width: 3rem;
-  min-height: 3rem;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  min-height: 100%;
+  margin: 0;
+  padding: .45rem;
+}
+
+#slide-controls .ui-button img {
+  width: 1.2rem;
+  height: 1.2rem;
+  pointer-events: none;
+}
+
+.slide-meta {
+  display: flex;
+  min-width: 0;
+  min-height: var(--icon-button-size);
+  padding: .25rem .4rem;
+  border-radius: .45rem;
+  background: rgba(255, 255, 255, .06);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+#slide-caption {
+  margin: 0;
+  overflow-wrap: anywhere;
+  line-height: 1.3;
 }
 
 #slide-position {
-  display: grid;
-  align-items: center;
-  min-height: 2.75rem;
+  display: block;
+  margin-top: .15rem;
+  color: rgba(255, 255, 255, .86);
+  font-size: .9rem;
+  font-weight: 600;
 }
 
 #poi-audio {