diff --git a/web/screenshots/guidance-gallery-compare.png b/web/screenshots/guidance-gallery-compare.png index 85dcb3b..0cc7715 100644 Binary files a/web/screenshots/guidance-gallery-compare.png and b/web/screenshots/guidance-gallery-compare.png differ diff --git a/web/screenshots/shell-guidance-active.png b/web/screenshots/shell-guidance-active.png index df979a7..9fb56d3 100644 Binary files a/web/screenshots/shell-guidance-active.png and b/web/screenshots/shell-guidance-active.png differ diff --git a/web/screenshots/shell-guidance-dark.png b/web/screenshots/shell-guidance-dark.png index 02f809d..60865fd 100644 Binary files a/web/screenshots/shell-guidance-dark.png and b/web/screenshots/shell-guidance-dark.png differ diff --git a/web/screenshots/shell-guidance-list.png b/web/screenshots/shell-guidance-list.png index f943851..32fc771 100644 Binary files a/web/screenshots/shell-guidance-list.png and b/web/screenshots/shell-guidance-list.png differ diff --git a/web/screenshots/shell-guidance-rerouting.png b/web/screenshots/shell-guidance-rerouting.png index 266b3b3..c647f32 100644 Binary files a/web/screenshots/shell-guidance-rerouting.png and b/web/screenshots/shell-guidance-rerouting.png differ diff --git a/web/screenshots/shell-guidance-tripend.png b/web/screenshots/shell-guidance-tripend.png index 8472fd6..8525cc5 100644 Binary files a/web/screenshots/shell-guidance-tripend.png and b/web/screenshots/shell-guidance-tripend.png differ diff --git a/web/src/shell.css b/web/src/shell.css index 2852483..012bc41 100644 --- a/web/src/shell.css +++ b/web/src/shell.css @@ -147,7 +147,7 @@ main { position: fixed; inset: 0; } rounded corners (buttons are radius-reset in the theme base layer). Sanctioned list extended by Phase 7 (07-02/PX-04/D-03) — the landscape literals: landscape banner min-height 72px, plate 40px + glyph 28px, - landscape chrome offset 104px. ————— */ + landscape chrome offset 113px. ————— */ /* the banner band: full-bleed matte-black chassis under the safe inset; the whole banner is the list toggle (the 96px band is the >=44px hit target) */ @@ -217,15 +217,21 @@ main { position: fixed; inset: 0; } a sanctioned geometry literal; the map's cartography is untouched. */ @media (orientation: landscape) and (max-height: 560px) { - /* the banner band: shorter in landscape, and the horizontal safe insets - are honoured on both edges (max() with the token padding as the floor) */ + /* the banner band: shorter in landscape — the content must actually FIT + the 72px floor (the strip's top literal rides on it), so the measures + take one step down the SAME type-token scale and the vertical padding + drops to xs; the horizontal safe insets are honoured on both edges + (max() with the token padding as the floor) */ .guide-banner { min-height: 72px; + padding-top: var(--spacing-space-xs); padding-bottom: var(--spacing-space-xs); padding-left: max(var(--spacing-space-md), var(--safe-left, 0px)); padding-right: max(var(--spacing-space-md), var(--safe-right, 0px)); } .guide-banner .guide-plate { width: 40px; height: 40px; } .guide-banner .guide-plate svg { width: 28px; height: 28px; } + .guide-banner .guide-distance { font: var(--type-headline-md); letter-spacing: var(--type-headline-md-tracking); } + .guide-banner .guide-street { font: var(--type-label-lg); letter-spacing: var(--type-label-lg-tracking); } /* the compact strip rides directly under the shorter banner */ [data-guidance="active"] .strip { @@ -233,16 +239,17 @@ main { position: fixed; inset: 0; } } /* the maneuver list: a landscape-height-bounded panel that clears the - banner and the strip instead of overlapping them */ + banner and the strip instead of overlapping them (the chrome offset is + the list margin's own stack: sm + 72 + 1 + 24 + sm = 113) */ .guide-list { - max-height: calc(100dvh - 104px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); + max-height: calc(100dvh - 113px - var(--safe-top, 0px) - var(--safe-bottom, 0px)); margin-top: calc(var(--safe-top, 0px) + var(--spacing-space-sm) + 72px + 1px + 24px + var(--spacing-space-sm)); } - /* the bottom register (the guidance card / the confirm card) sits inside - the landscape height instead of overflowing past it */ - .route-stack[data-register="bottom"] { - bottom: calc(var(--safe-bottom, 0px) + var(--spacing-space-sm)); - } + /* the bottom register: the portrait rule's 64px control-clearance + composite already seats the guidance/confirm card inside the landscape + height (measured: card top 159 vs banner bottom 103 at 844x390) and + clears MapLibre's attribution chip + the recenter control — no + landscape override; the card keeps its >=44px hit-target clearance */ .route-stack[data-register="center"] { max-width: 320px; } }