From c178ae61241a32cc83a2b51fde15ceced6453817 Mon Sep 17 00:00:00 2001
From: SeanLebida <seanleibida@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:37:53 -0400
Subject: [PATCH 1/5] fix(ui): P1/P2 tap targets, dvh shell, desktop topbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bump travel skip, atlas eras, quiz reorder, bible notes, landscape
tabs, and timeline scroll to ≥44px. Use 100dvh for the shell, icon-only
dock under 380px, and a top toolbar at lg+ instead of the phone dock.
---
 src/styles/global.css | 94 +++++++++++++++++++++++++++++++------------
 1 file changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 2f8ba44..97df5f3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -11,6 +11,7 @@ html,
 body,
 #root {
   height: 100%;
+  height: 100dvh;
   margin: 0;
 }
 
@@ -74,6 +75,8 @@ a {
   /* 48px content box comfortably clears a 44px tap target plus its padding;
      keep this in lockstep with `.tabbar`'s own height. */
   --dock-h: calc(48px + 0.8rem + var(--safe-bottom));
+  /* Desktop/top chrome; zero on phone so bottom dock math stays unchanged. */
+  --topbar-h: 0px;
   position: relative;
   height: 100%;
   display: flex;
@@ -84,6 +87,13 @@ a {
     --dock-h: 0px;
   }
 }
+@media (min-width: 1024px) {
+  .app-shell {
+    /* Bottom dock becomes a top toolbar on wide screens (Mac / Chromebook / desktop web). */
+    --dock-h: 0px;
+    --topbar-h: calc(52px + var(--safe-top));
+  }
+}
 
 .skip-link {
   position: absolute;
@@ -562,7 +572,7 @@ a {
   .mode-panel {
     position: absolute;
     left: 1.5rem;
-    top: calc(var(--safe-top) + 1.5rem);
+    top: calc(var(--topbar-h) + 1.5rem);
     bottom: calc(1.5rem + var(--dock-h));
     right: auto;
     margin: 0;
@@ -1480,8 +1490,9 @@ a {
   font: inherit;
   font-size: 0.75rem;
   font-weight: 500;
-  min-height: 32px;
-  padding: 0.25rem 0.7rem;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.35rem 0.85rem;
   color: #fff;
   background: rgba(255, 255, 255, 0.12);
   border: 1px solid rgba(255, 255, 255, 0.22);
@@ -1763,7 +1774,7 @@ a {
   /* The dock is the other fixed cost on a 360px-tall screen — see the landscape
      `.tabbar` block, which has to live after the tab bar's own rules. */
   .app-shell {
-    --dock-h: calc(38px + 0.5rem + var(--safe-bottom));
+    --dock-h: calc(44px + 0.5rem + var(--safe-bottom));
   }
   /* The travelling phase hid the body and footer because the *sheet* dropped to
      `peek` under them. The rail doesn't move, so hiding them would just blank a
@@ -2211,9 +2222,9 @@ a {
   background: var(--surface-raised);
   border-radius: var(--r-sm);
   cursor: pointer;
-  padding: 0.25rem 0.6rem;
-  min-height: 38px;
-  min-width: 38px;
+  padding: 0.35rem 0.65rem;
+  min-height: 44px;
+  min-width: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2328,13 +2339,13 @@ a {
    transport row under the dock. */
 @media (max-width: 1023px) and (orientation: landscape) {
   .tabbar {
-    height: calc(38px + 0.5rem + var(--safe-bottom));
+    height: calc(44px + 0.5rem + var(--safe-bottom));
     padding: 0.25rem calc(0.5rem + var(--safe-right)) calc(0.25rem + var(--safe-bottom)) calc(0.5rem + var(--safe-left));
   }
   .tabbar__item {
     flex-direction: row;
     gap: 0.35rem;
-    min-height: 38px;
+    min-height: 44px;
   }
   .tabbar__glyph {
     font-size: 1rem;
@@ -2692,9 +2703,9 @@ a {
   background: var(--surface);
   color: var(--text-muted);
   border-radius: 999px;
-  padding: 0.3rem 0.65rem;
+  padding: 0.4rem 0.75rem;
   font-size: 0.75rem;
-  min-height: 36px;
+  min-height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2875,7 +2886,46 @@ a {
   }
 }
 
+/* Narrow phones: icon-only dock so eight slots stay tappable without ellipsis soup. */
+@media (max-width: 380px) {
+  .tabbar__label {
+    display: none;
+  }
+  .tabbar__glyph {
+    font-size: 1.35rem;
+  }
+}
+
 /* Theme toggle in the tab bar: a button dressed as a tab. */
+
+/* Desktop / Chromebook / Mac / wide web: top toolbar instead of phone bottom dock. */
+@media (min-width: 1024px) {
+  .tabbar {
+    top: 0;
+    bottom: auto;
+    height: var(--topbar-h);
+    padding: var(--safe-top) calc(0.75rem + var(--safe-right)) 0.35rem calc(0.75rem + var(--safe-left));
+    border-top: none;
+    border-bottom: 1px solid var(--border);
+    justify-content: flex-start;
+    gap: 0.35rem;
+  }
+  .tabbar__item {
+    flex: 0 1 auto;
+    flex-direction: row;
+    gap: 0.4rem;
+    min-height: 44px;
+    padding: 0.35rem 0.75rem;
+    font-size: 0.8rem;
+  }
+  .tabbar__glyph {
+    font-size: 1.05rem;
+  }
+  .aerial-marker {
+    top: calc(var(--topbar-h) + 0.5rem);
+  }
+}
+
 .tabbar__theme {
   background: none;
   border: 0;
@@ -3883,8 +3933,8 @@ a {
   font-size: 0.95rem;
 }
 .bible-note__close {
-  min-width: 32px;
-  min-height: 32px;
+  min-width: 44px;
+  min-height: 44px;
   border: 0;
   background: none;
   color: var(--text-muted);
@@ -3899,8 +3949,8 @@ a {
   margin: 0.5rem 0;
 }
 .bible-note__swatch {
-  width: 32px;
-  height: 32px;
+  width: 44px;
+  height: 44px;
   border: 2px solid var(--border);
   border-radius: 50%;
   cursor: pointer;
@@ -3916,8 +3966,8 @@ a {
 .bible-note__clear,
 .bible-note__save,
 .bible-note__delete {
-  min-height: 36px;
-  padding: 0.3rem 0.7rem;
+  min-height: 44px;
+  padding: 0.4rem 0.85rem;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
   background: var(--surface);
@@ -4518,8 +4568,8 @@ a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: 44px;
+  height: 44px;
   padding: 0;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
@@ -4578,12 +4628,6 @@ a {
     display: inline;
   }
 }
-@media (max-width: 560px) {
-  .tl-scroll__btn {
-    width: 44px;
-    height: 44px;
-  }
-}
 /* A rival's coordinate and its citations are both notes on that pin.
    The stack hairline is for the gap under a prose claim. */
 .site-candidates__list {

From 6716724a57f66c13243e9617f9e7dd5ab86d4078 Mon Sep 17 00:00:00 2001
From: SeanLebida <seanleibida@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:38:03 -0400
Subject: [PATCH 2/5] fix(ui): remaining bible/timeline sub-44 controls

---
 src/styles/global.css | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 97df5f3..e0a103c 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3034,8 +3034,7 @@ a {
   align-items: center;
   gap: 0.3rem;
   /* Comfortable tap target without stretching the row (WCAG 2.5.5). */
-  /* Comfortable tap target without stretching the row (WCAG 2.5.5). */
-  min-height: 32px;
+  min-height: 44px;
   cursor: pointer;
 }
 
@@ -3724,8 +3723,8 @@ a {
   color: var(--text-muted);
 }
 .bible__translation select {
-  min-height: 36px;
-  padding: 0.25rem 0.4rem;
+  min-height: 44px;
+  padding: 0.35rem 0.5rem;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
   background: var(--surface-raised);
@@ -3815,8 +3814,8 @@ a {
   font-size: 0.8rem;
 }
 .bible__bookmark {
-  min-height: 36px;
-  padding: 0.25rem 0.6rem;
+  min-height: 44px;
+  padding: 0.35rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-raised);

From d3b84b02e1bfd01290a949ecabe5ac7482579f53 Mon Sep 17 00:00:00 2001
From: SeanLebida <seanleibida@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:40:51 -0400
Subject: [PATCH 3/5] fix(ui): fold QC under-44 finds into #18
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lesson pins, site photo pager, map popup close, always-on trace/lesson/
video/site-view targets, and bible tab/nav/chapter cells to ≥44px.
---
 src/styles/global.css | 60 ++++++++++++++++++++++++++-----------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index e0a103c..22639ae 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -212,7 +212,12 @@ a {
 .country-border-popup .maplibregl-popup-close-button {
   color: var(--text-muted);
   font-size: 1.1rem;
-  padding: 0.15rem 0.45rem;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   right: 0;
   top: 0;
 }
@@ -347,13 +352,13 @@ a {
 /* Lesson step markers: clickable, numbered pins on the persistent map — a
    visual table of contents for the current lesson's stops. */
 .lesson-step-marker {
-  width: 22px;
-  height: 22px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   border: 2px solid var(--surface-raised);
   background: var(--text-muted);
   color: var(--surface-raised);
-  font-size: 0.7rem;
+  font-size: 0.85rem;
   font-weight: 700;
   line-height: 1;
   display: flex;
@@ -362,13 +367,14 @@ a {
   cursor: pointer;
   box-shadow: var(--shadow-1);
   padding: 0;
+  touch-action: manipulation;
 }
 .lesson-step-marker--active {
   background: var(--accent);
   color: var(--accent-contrast);
-  width: 28px;
-  height: 28px;
-  font-size: 0.8rem;
+  width: 48px;
+  height: 48px;
+  font-size: 0.95rem;
 }
 
 /* Atlas site name labels: a clickable text tag next to each dot (no glyph
@@ -1191,6 +1197,8 @@ a {
   background: var(--surface);
   color: var(--text);
   cursor: pointer;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 .trace-controls button:hover {
   border-color: var(--accent);
@@ -2142,6 +2150,8 @@ a {
   background: var(--surface);
   color: var(--text);
   cursor: pointer;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 .lesson-progress button:disabled {
   opacity: 0.5;
@@ -2428,10 +2438,13 @@ a {
   background: var(--surface);
   color: var(--text);
   border-radius: 6px;
-  width: 2rem;
-  height: 1.5rem;
+  min-width: 44px;
+  min-height: 44px;
+  width: 44px;
+  height: 44px;
   line-height: 1;
   cursor: pointer;
+  touch-action: manipulation;
 }
 .site-views {
   margin: 0.5rem 0 0.7rem;
@@ -2455,6 +2468,8 @@ a {
   padding: 0.35rem 0.6rem;
   font-size: 0.8rem;
   cursor: pointer;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 .site-views__btn[aria-pressed='true'] {
   background: var(--accent);
@@ -2488,8 +2503,11 @@ a {
   background: transparent;
   color: var(--text);
   border-radius: 6px;
-  padding: 0.15rem 0.5rem;
+  padding: 0.35rem 0.75rem;
   cursor: pointer;
+  min-height: 44px;
+  min-width: 44px;
+  touch-action: manipulation;
 }
 
 /* ── Site thumbnails on list cards (pickers + home mode cards) ───────────── */
@@ -2656,6 +2674,8 @@ a {
   font-size: 0.85rem;
   font-weight: 600;
   cursor: pointer;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 .video-card__frame {
   position: relative;
@@ -2865,14 +2885,6 @@ a {
     grid-template-columns: 1fr;
     gap: 0.15rem;
   }
-  /* Comfortable, thumb-sized tap targets (WCAG 2.5.5). */
-  .site-views__btn,
-  .video-card__play,
-  .street-viewer__bar button,
-  .trace-controls button,
-  .lesson-progress button {
-    min-height: 44px;
-  }
   .site-photo img,
   .extra-card__figure img {
     max-height: 200px;
@@ -3742,8 +3754,8 @@ a {
   border-bottom: 1px solid var(--border);
 }
 .bible__tab {
-  min-height: 40px;
-  padding: 0.4rem 0.7rem;
+  min-height: 44px;
+  padding: 0.45rem 0.75rem;
   border: 1px solid transparent;
   border-bottom: 0;
   border-radius: var(--r-sm) var(--r-sm) 0 0;
@@ -3791,8 +3803,8 @@ a {
   color: var(--text-muted);
 }
 .bible__nav {
-  min-height: 40px;
-  padding: 0.3rem 0.6rem;
+  min-height: 44px;
+  padding: 0.4rem 0.7rem;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
   background: var(--surface-raised);
@@ -4116,8 +4128,8 @@ a {
   justify-content: center;
   gap: 0.3rem;
   width: 100%;
-  min-height: 40px;
-  padding: 0.3rem 0.5rem;
+  min-height: 44px;
+  padding: 0.35rem 0.55rem;
   border: 1px solid var(--border);
   border-radius: var(--r-sm);
   background: var(--surface-raised);

From 705f0f1a21a03b3daa47439a229e2aefc8629b7b Mon Sep 17 00:00:00 2001
From: SeanLebida <seanleibida@users.noreply.github.com>
Date: Sat, 3 Oct 2026 17:44:16 -0400
Subject: [PATCH 4/5] =?UTF-8?q?fix(ui):=20QC=20notes=20=E2=80=94=20taps=20?=
 =?UTF-8?q?+=20dock=20accessible=20names?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Size quiz-check, verse nums, era jumps, atlas site labels, scrub
thumbs to ≥44. Keep ≤380 dock labels for AT instead of display:none.
---
 src/styles/global.css | 76 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 22639ae..d6fdcf5 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -382,9 +382,12 @@ a {
 .site-label {
   border: 0;
   background: none;
-  padding: 0;
+  padding: 0.35rem 0.45rem;
   margin: 0;
-  font-size: 0.75rem;
+  min-height: 44px;
+  min-width: 44px;
+  align-items: center;
+  font-size: 0.8rem;
   font-weight: 600;
   color: var(--map-site-color);
   -webkit-text-stroke: 3.5px var(--map-site-halo);
@@ -392,6 +395,7 @@ a {
   text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.15);
   white-space: nowrap;
   cursor: pointer;
+  touch-action: manipulation;
   /* Hidden until zoomed in past MapProvider's LABEL_ZOOM_THRESHOLD — a
      full-atlas or full-journey view has too many sites for labels to be
      readable at once. Dots stay visible/clickable throughout; zooming in is
@@ -402,7 +406,7 @@ a {
 }
 .map-labels-visible .site-label,
 .site-label.quiz-pin-label {
-  display: inline-block;
+  display: inline-flex;
 }
 .site-label:hover,
 .site-label:focus-visible {
@@ -1229,9 +1233,9 @@ a {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
-  height: 6px;
+  height: 12px;
   background: var(--border);
-  border-radius: 3px;
+  border-radius: 6px;
   outline: none;
   margin: 0;
   cursor: pointer;
@@ -1239,8 +1243,8 @@ a {
 .trace-controls input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
-  height: 16px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   background: var(--accent);
   border: 2px solid var(--surface-raised);
@@ -1252,8 +1256,8 @@ a {
   background: color-mix(in srgb, var(--accent) 85%, black);
 }
 .trace-controls input[type="range"]::-moz-range-thumb {
-  width: 16px;
-  height: 16px;
+  width: 44px;
+  height: 44px;
   border-radius: 50%;
   background: var(--accent);
   border: 2px solid var(--surface-raised);
@@ -2193,6 +2197,8 @@ a {
   background: var(--surface);
   color: var(--text);
   cursor: pointer;
+  min-height: 44px;
+  touch-action: manipulation;
 }
 .quiz-choices button:hover:not(:disabled) {
   border-color: var(--accent);
@@ -2216,6 +2222,27 @@ a {
   font-size: 1.1rem;
   font-weight: 600;
 }
+.quiz-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.75rem;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.55rem 1.1rem;
+  font: inherit;
+  font-weight: 600;
+  color: var(--accent-contrast);
+  background: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+  touch-action: manipulation;
+}
+.quiz-check:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
 .quiz-order__item {
   display: flex;
   align-items: center;
@@ -2898,10 +2925,21 @@ a {
   }
 }
 
-/* Narrow phones: icon-only dock so eight slots stay tappable without ellipsis soup. */
+/* Narrow phones: icon-only dock visually; keep labels for AT (glyphs stay aria-hidden). */
 @media (max-width: 380px) {
+  .tabbar__item {
+    position: relative;
+  }
   .tabbar__label {
-    display: none;
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
   .tabbar__glyph {
     font-size: 1.35rem;
@@ -2999,7 +3037,11 @@ a {
   margin: 0.75rem 0;
 }
 .tl-jump__link {
-  padding: 0.3rem 0.6rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 0.4rem 0.85rem;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-raised);
@@ -3007,6 +3049,7 @@ a {
   font-size: 0.78rem;
   text-decoration: none;
   white-space: nowrap;
+  touch-action: manipulation;
 }
 .tl-jump__link:hover,
 .tl-jump__link:focus-visible {
@@ -3879,10 +3922,13 @@ a {
 .bible-verse__num {
   grid-column: 1;
   justify-self: end;
-  min-width: 1.6rem;
-  min-height: 1.6rem;
+  min-width: 44px;
+  min-height: 44px;
   margin: 0;
-  padding: 0 0.15rem;
+  padding: 0 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid transparent;
   border-radius: var(--r-sm);
   background: none;

From 57d16599b2b7b340510d0a09eb6b928b64f2aaeb Mon Sep 17 00:00:00 2001
From: SeanLebida <seanleibida@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:03:15 -0400
Subject: [PATCH 5/5] =?UTF-8?q?chore(release):=200.3.16=20=E2=80=94=20tap?=
 =?UTF-8?q?=20and=20layout=20pass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Play what’s-new: 44px tap targets, 100dvh shell, dock/toolbar a11y.
Cut from development 0e2b4fd (#18/#19). Excludes iOS scaffold (#20).
---
 CHANGELOG.md | 6 ++++++
 package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc56e92..669c1a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 All notable changes to Journeys are documented in this file.
 
+## [0.3.16] - 2026-10-03
+
+• Larger tap targets (44px) across the shell, dock, and toolbar.
+• Mobile shell uses full viewport height (100dvh).
+• Dock and toolbar accessibility improvements.
+
 ## [0.3.15] - 2026-10-01
 
 • Close place details when you move the map or tap elsewhere.
diff --git a/package.json b/package.json
index a322ae4..46babfc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "journeys",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "private": true,
   "type": "module",
   "description": "Cited offline atlas of the biblical historical record: patriarchs, Old Testament battles, the birth and ministry of Jesus, and the apostles.",