:root {
  color-scheme: light;
  --red: #a9251d;
  --red-dark: #851b16;
  --blue: #2457d6;
  --green: #1f7a4d;
  --teal: #087b80;
  --text: #1c1c1e;
  --muted: #65656a;
  --surface: rgba(255,255,255,.97);
  --surface-solid: #fff;
  --soft: #f2f2f4;
  --border: rgba(60,60,67,.18);
  --shadow: 0 8px 30px rgba(0,0,0,.18);
  --app-height: 100dvh;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #fff; }
html, body {
  margin: 0;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: #fff;
}
button, input { font: inherit; }
button { touch-action: manipulation; }
button, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(36,87,214,.28); outline-offset: 2px; }
button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

#app {
  position: relative;
  width: 100%;
  height: var(--app-height, 100dvh);
  min-height: -webkit-fill-available;
  overflow: hidden;
}
#map { position: absolute; inset: 0; width: 100%; height: 100%; background: #ddd; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.top-overlay {
  position: absolute;
  z-index: 1200;
  top: max(10px, calc(env(safe-area-inset-top, 0px) + 7px));
  left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
}

.search-pill {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 5px 5px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 3px 14px rgba(0,0,0,.17);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.search-logo-button {
  width: 34px; height: 44px; min-width: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; background: transparent; color: inherit;
}
.search-logo-button:active { transform: scale(.96); }
.search-logo { width: 32px; height: 32px; border-radius: 8px; pointer-events: none; }
.search-pill input,
.planner-row input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}
.search-pill input::placeholder, .planner-row input::placeholder { color: #6e6e73; }

.icon-button, .inline-icon, .nav-round-button {
  display: grid;
  place-items: center;
  min-width: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
}
.search-submit { background: var(--soft); }

.planner-card {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 6px;
  min-height: 112px;
  padding: 8px;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 3px 14px rgba(0,0,0,.17);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.planner-back { align-self: center; }
.planner-fields { min-width: 0; }
.planner-row {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  min-height: 46px;
  gap: 7px;
}
.planner-row:last-child { grid-template-columns: 18px minmax(0,1fr); }
.planner-row input { font-size: 16px; }
.planner-dot { width: 10px; height: 10px; margin: auto; border-radius: 50%; }
.start-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(36,87,214,.14); }
.end-dot { background: var(--red); }
.planner-divider { height: 1px; background: var(--border); margin-left: 25px; }
.inline-icon { width: 38px; height: 38px; min-width: 38px; color: var(--blue); }
.inline-icon svg { width: 20px; height: 20px; }

.bottom-sheet {
  position: absolute;
  z-index: 1200;
  left: max(7px, env(safe-area-inset-left, 0px));
  right: max(7px, env(safe-area-inset-right, 0px));
  bottom: max(7px, env(safe-area-inset-bottom, 0px));
  padding: 8px 14px 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.grabber { width: 38px; height: 5px; border-radius: 999px; background: rgba(90,90,95,.38); margin: 0 auto 8px; }
.sheet-heading, .place-title-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.sheet-heading strong { flex: 1; font-size: 18px; }
.small-icon { width: 40px; height: 40px; min-width: 40px; background: var(--soft); }
.small-icon svg { width: 19px; height: 19px; }

.results-sheet { z-index: 1350; max-height: min(55%, 460px); overflow: hidden; }
.results-list { max-height: min(44vh, 370px); overflow: auto; -webkit-overflow-scrolling: touch; }
.result-item {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 10px 2px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.result-item:first-child { border-top: 0; }
.result-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 2px; border-radius: 50%; background: var(--soft); color: var(--red); font-size: 18px; }
.result-copy { min-width: 0; }
.result-copy strong { display: block; font-size: 15px; line-height: 1.25; margin-bottom: 3px; }
.result-copy span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; }
.result-message { padding: 16px 4px 20px; color: var(--muted); font-size: 14px; line-height: 1.4; }

.place-sheet { padding-bottom: 16px; }
.place-title-row { align-items: flex-start; }
.place-copy { min-width: 0; flex: 1; padding: 5px 0 8px; }
.place-copy strong { display: block; font-size: 22px; line-height: 1.15; margin-bottom: 4px; }
.place-copy span { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.primary-action, .secondary-action, .mode-chip, .pref-menu button, .exit-button {
  min-height: 48px;
  border-radius: 24px;
  border: 0;
  font-weight: 700;
}
.primary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 128px;
  padding: 0 20px;
  background: var(--red);
  color: #fff;
}
.primary-action svg { width: 20px; height: 20px; }
.primary-action:disabled { opacity: .45; }

.route-sheet { padding-bottom: 13px; }
.mode-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mode-row::-webkit-scrollbar { display: none; }
.mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 13px;
  background: var(--soft);
  color: #3a3a3c;
  font-size: 13px;
}
.mode-chip svg { width: 19px; height: 19px; }
.mode-chip.active { background: rgba(169,37,29,.11); color: var(--red); }
.preference-chip { margin-left: auto; }
.pref-menu {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 6px;
  padding: 8px 0 2px;
}
.pref-menu button { min-height: 40px; padding: 0 8px; background: var(--soft); color: var(--text); font-size: 12px; }
.pref-menu button.active { background: var(--red); color: #fff; }
.route-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 2px 5px; }
.route-summary > div:first-child { min-width: 0; }
.route-summary strong { display: block; color: var(--green); font-size: 30px; line-height: 1; }
.route-summary #arrivalStat { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.route-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; color: var(--muted); font-size: 13px; padding-bottom: 2px; }
.route-meta b { color: var(--text); }
.meta-separator { color: #aaa; }
.route-status { min-height: 18px; padding: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.route-status.good { color: var(--green); }
.route-status.warn { color: #9a5800; }
.route-actions { display: flex; gap: 8px; padding-top: 7px; }
.nav-start { flex: 1; }
.secondary-action { min-width: 84px; padding: 0 16px; background: var(--soft); color: var(--text); }

.nav-banner {
  position: absolute;
  z-index: 1300;
  top: max(8px, calc(env(safe-area-inset-top, 0px) + 7px));
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) 48px;
  gap: 9px;
  align-items: center;
  min-height: 96px;
  padding: 10px 10px 10px 13px;
  border-radius: 20px;
  background: #087b80;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.24);
}
.turn-icon { font-size: 54px; line-height: .9; font-weight: 650; text-align: center; }
.turn-copy { min-width: 0; }
.turn-copy span { display: block; font-size: 13px; font-weight: 650; opacity: .92; margin-bottom: 2px; }
.turn-copy strong { display: block; font-size: 22px; line-height: 1.13; font-weight: 750; }
.turn-copy small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.2; opacity: .9; }
.nav-round-button { background: var(--surface-solid); color: var(--text); box-shadow: 0 3px 12px rgba(0,0,0,.18); }
.nav-banner .nav-round-button { width: 46px; height: 46px; min-width: 46px; box-shadow: none; }
.speaker-off { display: none; }
.voice-on .speaker-on { display: block; }
.voice-on .speaker-off { display: none; }
.voice-off .speaker-on { display: none; }
.voice-off .speaker-off { display: block; }

.map-controls {
  position: absolute;
  z-index: 1250;
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  bottom: calc(max(116px, env(safe-area-inset-bottom, 0px) + 108px));
}
.map-controls .nav-round-button { width: 52px; height: 52px; }

.nav-bottom {
  position: absolute;
  z-index: 1300;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 12px 13px 12px 16px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav-remaining { flex: 1; min-width: 0; }
.nav-remaining strong { display: block; color: var(--green); font-size: 28px; line-height: 1.05; }
.nav-remaining span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.exit-button { min-width: 78px; min-height: 58px; padding: 0 18px; border-radius: 29px; background: #e53935; color: #fff; font-size: 16px; }

.toast {
  position: absolute;
  z-index: 1400;
  left: 50%;
  bottom: calc(max(122px, env(safe-area-inset-bottom, 0px) + 114px));
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(30,30,32,.9);
  color: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.22);
  font-size: 13px;
  text-align: center;
}

/* Map styling */
.leaflet-control-attribution { font-size: 8px; max-width: 180px; line-height: 1.2; }
.leaflet-pane .superredway-casing,
.leaflet-pane .redway-casing,
.leaflet-pane .leisure-casing { stroke: #fff; stroke-width: 5.5; opacity: .78; }
.leaflet-pane .superredway-line { stroke: #6f1d7a; stroke-width: 3.4; opacity: .95; }
.leaflet-pane .redway-line { stroke: var(--red); stroke-width: 2.5; opacity: .86; }
.leaflet-pane .leisure-line { stroke: #23864a; stroke-width: 2.3; stroke-dasharray: 6 4; opacity: .82; }
.leaflet-pane .shared-line { stroke: #73777c; stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .34; }
.leaflet-pane .route-casing { stroke: #fff; stroke-width: 11; opacity: .94; }
.leaflet-pane .route-line { stroke: var(--blue); stroke-width: 7; opacity: .98; }
.user-pulse {
  width: 18px; height: 18px; border-radius: 50%;
  background: #1769e0; border: 3px solid #fff;
  box-shadow: 0 0 0 6px rgba(23,105,224,.20), 0 2px 5px rgba(0,0,0,.25);
}

/* Keep Leaflet attribution clear of the iPhone bottom sheets. */
.leaflet-bottom.leaflet-right { bottom: auto; top: calc(max(76px, env(safe-area-inset-top, 0px) + 72px)); right: 3px; }
.leaflet-control-attribution { border-radius: 5px; opacity: .88; }

@media (min-width: 761px) {
  .top-overlay { width: min(430px, calc(100% - 40px)); right: auto; left: 20px; top: 20px; }
  .bottom-sheet { left: 20px; right: auto; width: min(430px, calc(100% - 40px)); bottom: 20px; }
  .nav-banner { width: min(620px, calc(100% - 40px)); left: 20px; right: auto; top: 20px; }
  .nav-bottom { width: 420px; left: 20px; right: auto; bottom: 20px; }
  .map-controls { right: 20px; bottom: 30px; }
}

/* Additional tuning for the 393 × 852 CSS-px phone class. */
@media (width: 393px) and (min-height: 800px) and (max-height: 900px) {
  .top-overlay { left: 11px; right: 11px; }
  .search-pill { min-height: 56px; }
  .bottom-sheet { left: 7px; right: 7px; }
  .route-sheet { padding-left: 12px; padding-right: 12px; }
  .route-summary strong { font-size: 29px; }
  .nav-banner { left: 8px; right: 8px; }
}

@media (max-width: 360px) {
  .mode-chip { padding: 0 9px; }
  .preference-chip span { max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .turn-copy strong { font-size: 20px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .top-overlay { width: min(420px, 55%); }
  .bottom-sheet { width: min(420px, 55%); right: auto; }
  .nav-banner { width: min(540px, 63%); }
  .nav-bottom { width: 390px; right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* v0.5 responsive navigation layout -------------------------------------- */
/* Portrait remains map-first with top/bottom overlays. Landscape becomes a
   compact left-side control layout so the map and route remain useful. */
@media (orientation: landscape) and (max-height: 520px) {
  .top-overlay {
    top: max(6px, calc(env(safe-area-inset-top, 0px) + 4px));
    left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
    right: auto;
    width: min(430px, 48vw);
  }

  .search-pill {
    min-height: 50px;
    grid-template-columns: 30px minmax(0,1fr) 42px;
    border-radius: 16px;
    padding-left: 8px;
  }
  .search-logo { width: 28px; height: 28px; }
  .search-pill input { font-size: 16px; }

  .planner-card {
    min-height: 96px;
    padding: 5px 7px;
    grid-template-columns: 40px minmax(0,1fr);
    border-radius: 16px;
  }
  .planner-row { min-height: 41px; }
  .planner-row input { font-size: 15px; }

  .bottom-sheet {
    left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
    right: auto;
    bottom: max(7px, calc(env(safe-area-inset-bottom, 0px) + 5px));
    width: min(430px, 48vw);
    border-radius: 20px;
    padding: 7px 12px 11px;
  }
  .grabber { margin-bottom: 5px; height: 4px; }

  .results-sheet { max-height: calc(var(--app-height) - 70px); }
  .results-list { max-height: calc(var(--app-height) - 132px); }
  .result-item { min-height: 58px; padding: 7px 2px; }
  .place-copy strong { font-size: 19px; }
  .place-copy span { font-size: 12px; }
  .place-sheet .primary-action { min-height: 44px; }

  .route-sheet { max-height: calc(var(--app-height) - 8px); overflow: auto; }
  .mode-row { gap: 5px; }
  .mode-chip { min-height: 38px; padding: 0 10px; font-size: 12px; }
  .mode-chip svg { width: 17px; height: 17px; }
  .route-summary { padding: 7px 2px 3px; }
  .route-summary strong { font-size: 25px; }
  .route-summary #arrivalStat { margin-top: 2px; }
  .route-meta { font-size: 12px; }
  .route-status {
    max-height: 31px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .route-actions { padding-top: 5px; }
  .route-actions .primary-action,
  .route-actions .secondary-action { min-height: 44px; }

  .nav-banner {
    top: max(7px, calc(env(safe-area-inset-top, 0px) + 5px));
    left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
    right: auto;
    width: min(475px, 54vw);
    min-height: 76px;
    grid-template-columns: 46px minmax(0,1fr) 42px;
    gap: 7px;
    padding: 8px 8px 8px 10px;
    border-radius: 17px;
  }
  .turn-icon { font-size: 42px; }
  .turn-copy span { font-size: 11px; }
  .turn-copy strong { font-size: 18px; line-height: 1.08; }
  .turn-copy small {
    margin-top: 3px;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav-banner .nav-round-button { width: 40px; height: 40px; min-width: 40px; }

  .nav-bottom {
    left: max(10px, calc(env(safe-area-inset-left, 0px) + 8px));
    right: auto;
    bottom: max(7px, calc(env(safe-area-inset-bottom, 0px) + 5px));
    width: min(350px, 41vw);
    min-height: 68px;
    padding: 8px 9px 8px 12px;
    border-radius: 18px;
  }
  .nav-remaining strong { font-size: 23px; }
  .nav-remaining span { margin-top: 2px; font-size: 12px; }
  .exit-button { min-width: 66px; min-height: 48px; padding: 0 13px; font-size: 14px; }

  .map-controls {
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 7px));
  }
  .map-controls .nav-round-button { width: 48px; height: 48px; }

  .toast {
    left: auto;
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 8px));
    bottom: max(68px, calc(env(safe-area-inset-bottom, 0px) + 62px));
    transform: none;
    max-width: 40vw;
  }

  .leaflet-bottom.leaflet-right {
    top: auto;
    right: max(3px, env(safe-area-inset-right, 0px));
    bottom: max(3px, env(safe-area-inset-bottom, 0px));
  }
}

/* Small landscape phones: keep controls compact without sacrificing 44px touch targets. */
@media (orientation: landscape) and (max-height: 390px) {
  .top-overlay, .bottom-sheet { width: min(400px, 47vw); }
  .nav-banner { width: min(440px, 52vw); }
  .route-status { display: none; }
  .route-summary { padding-top: 4px; }
  .route-actions { padding-top: 3px; }
}

/* v0.6 full-viewport mobile shell --------------------------------------- */
/*
   The app must fill the *dynamic* viewport, not visualViewport.height.
   On iOS standalone PWAs visualViewport may exclude the home-indicator
   area, which was the cause of the grey strip visible in v0.5 screenshots.
*/
:root {
  --app-height: 100dvh;
  --visual-height: 100dvh;
  --edge-x: clamp(7px, 2.4vw, 12px);
  --edge-y: clamp(7px, 1.8vh, 12px);
}

html {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #fff;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #fff;
}

#app {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

#map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@supports not (height: 100dvh) {
  body { height: 100%; min-height: 100%; }
}

/* Generic modern-phone sizing: iPhone SE-sized devices through current
   large iPhones / Android flagships. Safe-area values are zero on devices
   without cut-outs, so the same rules work across both platforms. */
@media (max-width: 600px) {
  .top-overlay {
    left: max(var(--edge-x), env(safe-area-inset-left, 0px));
    right: max(var(--edge-x), env(safe-area-inset-right, 0px));
    top: max(var(--edge-y), calc(env(safe-area-inset-top, 0px) + 6px));
  }

  .bottom-sheet {
    left: max(var(--edge-x), env(safe-area-inset-left, 0px));
    right: max(var(--edge-x), env(safe-area-inset-right, 0px));
    bottom: max(var(--edge-y), calc(env(safe-area-inset-bottom, 0px) + 2px));
    width: auto;
    max-width: none;
  }

  .nav-banner {
    left: max(var(--edge-x), env(safe-area-inset-left, 0px));
    right: max(var(--edge-x), env(safe-area-inset-right, 0px));
    top: max(var(--edge-y), calc(env(safe-area-inset-top, 0px) + 5px));
  }

  .nav-bottom {
    left: max(var(--edge-x), env(safe-area-inset-left, 0px));
    right: max(var(--edge-x), env(safe-area-inset-right, 0px));
    bottom: max(var(--edge-y), calc(env(safe-area-inset-bottom, 0px) + 2px));
  }

  .results-sheet { max-height: min(58dvh, 480px); }
  .results-list { max-height: min(46dvh, 390px); }
}

/* Compact portrait phones and browser views with limited vertical space. */
@media (orientation: portrait) and (max-height: 740px) {
  .search-pill { min-height: 52px; }
  .search-logo { width: 29px; height: 29px; }
  .bottom-sheet { padding-top: 6px; padding-bottom: 10px; border-radius: 20px; }
  .place-copy strong { font-size: 19px; }
  .place-copy span { font-size: 12px; }
  .mode-chip { min-height: 40px; }
  .route-summary { padding-top: 7px; }
  .route-summary strong { font-size: 26px; }
  .route-status { max-height: 34px; overflow: hidden; }
  .route-actions .primary-action,
  .route-actions .secondary-action { min-height: 46px; }
  .nav-banner { min-height: 86px; }
  .turn-icon { font-size: 47px; }
  .turn-copy strong { font-size: 20px; }
  .nav-bottom { min-height: 82px; }
}

/* Very narrow devices: preserve readable controls without horizontal scroll. */
@media (max-width: 340px) {
  :root { --edge-x: 5px; }
  .search-pill { grid-template-columns: 30px minmax(0,1fr) 42px; gap: 5px; padding-left: 7px; }
  .search-logo { width: 28px; height: 28px; }
  .search-pill input { font-size: 16px; }
  .planner-card { grid-template-columns: 38px minmax(0,1fr); padding-left: 5px; padding-right: 5px; }
  .mode-row { gap: 4px; }
  .mode-chip { padding-inline: 8px; font-size: 12px; }
  .route-meta { font-size: 12px; }
  .primary-action { padding-inline: 14px; min-width: 112px; }
  .secondary-action { min-width: 72px; padding-inline: 11px; }
  .nav-banner { grid-template-columns: 48px minmax(0,1fr) 44px; gap: 6px; padding-inline: 8px; }
  .turn-icon { font-size: 43px; }
  .turn-copy strong { font-size: 19px; }
}

/* Large modern phones get slightly more breathing room without becoming
   tablet-like. */
@media (orientation: portrait) and (min-width: 430px) and (max-width: 600px) {
  :root { --edge-x: 11px; }
  .search-pill { min-height: 60px; }
  .bottom-sheet { padding-left: 16px; padding-right: 16px; }
  .place-copy strong { font-size: 23px; }
  .nav-banner { min-height: 100px; }
}

/* Landscape phones: side panels keep the centre/right of the map useful.
   This targets iOS and Android phones broadly rather than one device size. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  .top-overlay {
    left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px));
    right: auto;
    width: min(430px, 48vw);
    top: max(6px, calc(env(safe-area-inset-top, 0px) + 4px));
  }

  .bottom-sheet {
    left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px));
    right: auto;
    width: min(430px, 48vw);
    bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) + 4px));
  }

  .results-sheet { max-height: calc(100dvh - 68px); }
  .results-list { max-height: calc(100dvh - 130px); }
  .route-sheet { max-height: calc(100dvh - 10px); overflow: auto; }

  .nav-banner {
    left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px));
    right: auto;
    width: min(475px, 54vw);
  }

  .nav-bottom {
    left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px));
    right: auto;
    width: min(350px, 41vw);
  }
}

/* Keyboard-aware search panels. The root app remains full screen; only
   scrollable result content is allowed to contract to the visual viewport. */
@media (max-width: 600px) {
  .results-list {
    max-height: max(120px, min(46dvh, calc(var(--visual-height, 100dvh) - 190px)));
  }
}


/* v0.6.1 iOS safe-area + compact search fixes --------------------------- */
/*
   Some iOS standalone PWA builds report 100dvh only to the top edge of the
   home-indicator safe area. Extend the fixed app shell by that inset so the
   map paints underneath it; overlays already add the inset back as padding/
   positioning, so controls remain safely above the indicator.
*/
html, body {
  background: #fff;
}

body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  min-height: 0;
}

#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(0px - env(safe-area-inset-bottom, 0px));
  width: auto;
  height: auto;
  min-height: 0;
  background: #fff;
}

#map {
  inset: 0;
}

/* Keep the single-line search field readable rather than allowing the
   placeholder/value to disappear beneath the search button. */
.search-pill {
  grid-template-columns: 32px minmax(0, 1fr) 44px;
  gap: 7px;
  padding-left: 8px;
}
.search-pill input {
  min-width: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 370px) {
  .search-pill {
    grid-template-columns: 28px minmax(0, 1fr) 42px;
    gap: 5px;
    padding-left: 7px;
  }
  .search-logo { width: 28px; height: 28px; }
}


/* v0.7.1 iOS 26 Home Screen PWA chin workaround -------------------------
   iOS 26.x can expose a standalone-web-app viewport that is shorter than
   the physical screen. Keep the document on the largest viewport unit when
   WebKit supports it; on affected builds the remaining system-owned strip
   cannot be painted by DOM content, so the root canvas is white and the map
   fades into it instead of ending on a grey block. */
html, body {
  width: 100%;
  height: 100vh !important;
  min-height: 100vh !important;
  background: #fff !important;
}

@supports (height: 100lvh) {
  html, body {
    height: 100lvh !important;
    min-height: 100lvh !important;
  }
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #fff !important;
  overflow: hidden;
}

/* Only the installed iOS web app gets the visual blend. Browsers and Android
   continue to render the map directly to the viewport edge. */
html.ios-standalone #app::after {
  content: "";
  position: absolute;
  z-index: 1050;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92) 78%, #fff 100%);
}

/* Sheets and navigation controls must remain above the blend. */
html.ios-standalone .bottom-sheet,
html.ios-standalone .nav-bottom,
html.ios-standalone .map-controls,
html.ios-standalone .toast {
  z-index: 1200;
}


/* Install affordance ----------------------------------------------------- */
.install-fab {
  position: absolute;
  z-index: 1180;
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--text);
  box-shadow: 0 5px 18px rgba(0,0,0,.18);
  font-weight: 700;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.install-fab svg { width: 20px; height: 20px; }
.install-sheet { z-index: 1450; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
.install-heading { display: grid; grid-template-columns: 56px minmax(0,1fr) 40px; gap: 11px; align-items: center; }
.install-heading img { width: 56px; height: 56px; border-radius: 13px; }
.install-heading strong { display: block; font-size: 19px; line-height: 1.15; }
.install-heading span { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.3; }
.install-steps { margin: 13px 0 4px; padding-left: 25px; color: var(--text); }
.install-steps li { margin: 8px 0; padding-left: 4px; font-size: 14px; line-height: 1.35; }
.install-action { width: 100%; margin-top: 10px; }
@media (orientation: landscape) and (max-height: 600px) {
  .install-fab { bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px)); }
  .install-sheet { left: max(12px, env(safe-area-inset-left, 0px)); right: auto; width: min(420px, 48vw); }
}
@media (max-width: 350px) {
  .install-fab span { display: none; }
  .install-fab { width: 46px; padding: 0; justify-content: center; }
}


/* v0.9 saved places, route classes and offline maps --------------------- */
.saved-fab {
  position: absolute;
  z-index: 1185;
  right: max(12px, calc(env(safe-area-inset-right, 0px) + 8px));
  top: max(82px, calc(env(safe-area-inset-top, 0px) + 74px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.16);
  font-weight: 700;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.saved-fab svg { width: 19px; height: 19px; }
.place-actions { display: flex; gap: 9px; align-items: stretch; }
.place-actions .primary-action { flex: 1; }
.save-place-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 18px; }
.save-place-action svg { width: 18px; height: 18px; }
.saved-sheet { z-index: 1450; max-height: min(76dvh, 650px); overflow: auto; -webkit-overflow-scrolling: touch; }
.saved-specials { border-top: 1px solid var(--border); margin-top: 4px; }
.saved-row, .saved-favourite-open {
  width: 100%; border: 0; background: transparent; color: var(--text); text-align: left;
  display: grid; grid-template-columns: 40px minmax(0,1fr) 20px; gap: 9px; align-items: center;
  min-height: 62px; padding: 8px 2px; border-bottom: 1px solid var(--border);
}
.saved-kind-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--soft); color: var(--red); font-size: 20px; }
.saved-row-copy { min-width: 0; }
.saved-row-copy strong { display: block; font-size: 15px; line-height: 1.25; }
.saved-row-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-chevron { color: var(--muted); font-size: 24px; text-align: center; }
.saved-set-actions { display: flex; gap: 8px; padding: 10px 0 4px; }
.compact-action, .text-action {
  min-height: 40px; border: 0; border-radius: 20px; padding: 0 14px; background: var(--soft); color: var(--text); font-weight: 700;
}
.saved-set-actions .compact-action { flex: 1; }
.saved-section-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 7px 2px; }
.saved-section-heading strong { font-size: 16px; }
.text-action { background: transparent; color: var(--red); padding-inline: 10px; }
.saved-favourite-row { display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; border-top: 1px solid var(--border); }
.saved-favourite-open { grid-template-columns: 40px minmax(0,1fr); border-bottom: 0; }
.saved-remove { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 24px; line-height: 1; }
.saved-empty { padding: 12px 3px; color: var(--muted); font-size: 13px; }
.offline-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 16px; background: var(--soft); }
.offline-copy { min-width: 0; }
.offline-copy strong { display: block; font-size: 15px; }
.offline-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.offline-button { background: #fff; border: 1px solid var(--border); }
.offline-note { margin: 7px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.35; }
.map-key { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 13px; padding: 10px 2px 2px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
.map-key span { display: inline-flex; align-items: center; gap: 5px; }
.map-key i { width: 20px; height: 4px; border-radius: 2px; display: inline-block; }
.key-super { background: #6f1d7a; }
.key-redway { background: var(--red); }
.key-leisure { background: #23864a; }
.key-shared { background: #73777c; }

@media (max-width: 350px) {
  .saved-fab span { display: none; }
  .saved-fab { width: 44px; padding: 0; justify-content: center; }
  .place-actions { gap: 6px; }
  .save-place-action { padding-inline: 12px; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  .saved-fab {
    top: auto;
    bottom: max(10px, calc(env(safe-area-inset-bottom, 0px) + 6px));
    right: max(10px, calc(env(safe-area-inset-right, 0px) + 6px));
  }
  .saved-sheet { left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px)); right: auto; width: min(430px, 48vw); max-height: calc(100dvh - 10px); }
}

/* v0.9.3 settings -------------------------------------------------------- */
.settings-sheet { z-index: 1460; max-height: min(72dvh, 560px); overflow: auto; -webkit-overflow-scrolling: touch; }
.setting-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 2px;
  border-top: 1px solid var(--border);
}
.setting-block { padding: 14px 2px 4px; border-top: 1px solid var(--border); }
.setting-copy { min-width: 0; }
.setting-copy strong { display: block; font-size: 15px; line-height: 1.25; }
.setting-copy span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.setting-switch {
  position: relative;
  width: 51px;
  height: 31px;
  min-width: 51px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d1d1d6;
  transition: background .16s ease;
}
.setting-switch.on { background: var(--green); }
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .16s ease;
}
.setting-switch.on .switch-thumb { transform: translateX(20px); }
.unit-choice {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
  margin-top: 11px;
}
.unit-choice button {
  min-height: 48px;
  padding: 7px 10px;
  border: 0;
  border-radius: 16px;
  background: var(--soft);
  color: var(--text);
  font-weight: 700;
}
.unit-choice button small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; }
.unit-choice button.active { background: rgba(169,37,29,.11); color: var(--red); box-shadow: inset 0 0 0 1px rgba(169,37,29,.18); }
.unit-choice button.active small { color: var(--red); }

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  .settings-sheet {
    left: max(8px, calc(env(safe-area-inset-left, 0px) + 6px));
    right: auto;
    width: min(430px, 48vw);
    max-height: calc(100dvh - 10px);
  }
}


/* One-time settings coachmark */
.settings-coachmark-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1700;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.settings-coachmark {
  position: absolute;
  top: max(78px, calc(env(safe-area-inset-top, 0px) + 76px));
  left: max(10px, env(safe-area-inset-left, 0px));
  width: min(370px, calc(100% - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  padding: 16px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--shadow);
}
.settings-coachmark::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 25px;
  width: 18px; height: 18px;
  background: rgba(255,255,255,.98);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.coachmark-logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
.coachmark-logo img { width: 40px; height: 40px; border-radius: 10px; }
.coachmark-copy { min-width: 0; }
.coachmark-copy strong { display: block; font-size: 17px; line-height: 1.2; }
.coachmark-copy p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.coachmark-action {
  grid-column: 1 / -1;
  min-height: 46px;
  margin-top: 2px;
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1100px) {
  .settings-coachmark {
    top: max(72px, calc(env(safe-area-inset-top, 0px) + 66px));
    width: min(390px, 52vw);
  }
}

/* Route choice and endpoint warnings remain visible on short/mobile screens. */
.route-sheet { max-height: calc(var(--visual-height, 100dvh) - 160px); overflow-y: auto; }
.route-alternatives { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin: 9px 0; }
.route-option { min-width: 0; padding: 8px 6px; border: 1px solid #d4d4d4; border-radius: 10px; background: #fff; color: #333; text-align: left; }
.route-option strong { display: block; font-size: 12px; }
.route-option span { display: block; font-size: 11px; line-height: 1.5; margin-top: 4px; }
.route-option.selected { border: 2px solid var(--red); background: #fff6f3; padding: 7px 5px; }
.road-share-note { display: block; font-size: 10px; color: #555; line-height: 1.4; }
.approach-note { padding: 8px; margin: 8px 0; background: #fff2d5; color: #674400; border-radius: 8px; font-size: 11px; line-height: 1.4; }
.endpoint-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.endpoint-actions button { flex: 1; min-height: 36px; border: 1px solid #ddd; border-radius: 8px; background: #f4f4f4; color: #333; font-size: 11px; padding: 5px; }
.route-status { display: block; max-height: none; overflow: visible; }
@media (orientation: landscape) { .route-sheet { max-height: calc(100dvh - 12px); } }

/* Context network: selected route retains the existing strong casing. */
.leaflet-pane .superredway-casing,
.leaflet-pane .redway-casing,
.leaflet-pane .leisure-casing { stroke-width: 3.6; opacity: .28; }
.leaflet-pane .superredway-line { stroke-width: 2.4; opacity: .62; }
.leaflet-pane .redway-line { stroke-width: 1.8; opacity: .48; }
.leaflet-pane .leisure-line { stroke-width: 1.5; opacity: .42; }
[data-network-zoom="city"] .leaflet-pane .superredway-line { stroke-width: 1.5; opacity: .42; }
[data-network-zoom="city"] .leaflet-pane .redway-line { stroke-width: 1; opacity: .25; }
[data-network-zoom="city"] .leaflet-pane .leisure-line { stroke-width: 1; opacity: .22; }
[data-network-zoom="city"] .leaflet-pane [class$="-casing"]:not(.route-casing) { opacity: 0; }
[data-network-zoom="city"] .leaflet-pane .shared-line { opacity: .12; }
[data-network-zoom="street"] .leaflet-pane .superredway-line { opacity: .76; }
[data-network-zoom="street"] .leaflet-pane .redway-line { opacity: .62; }
[data-network-zoom="street"] .leaflet-pane .leisure-line { opacity: .55; }
.saved-kind-icon svg, .saved-chevron svg, .saved-remove svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.about-data { margin-top: 20px; border-top: 1px solid #e3e1de; padding-top: 4px; color: #32312f; }
.about-data summary { min-height: 48px; display: list-item; align-content: center; cursor: pointer; font-weight: 700; }
.about-data h2 { font-size: 18px; margin: 16px 0 6px; }
.about-data h3 { font-size: 15px; margin: 20px 0 8px; }
.about-data p, .data-details { font-size: 13px; line-height: 1.55; }
.data-details { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.data-details dt { color: #64615e; }
.data-details dd { margin: 0; overflow-wrap: anywhere; }
.about-links { display: grid; gap: 4px; }
.about-links a { min-height: 44px; display: flex; align-items: center; color: #95251e; text-underline-offset: 3px; }

/* 0.12.1: issues verified in the live mobile review. */
.route-summary > div:first-child { flex: 0 0 auto; min-width: 108px; }
#timeStat { white-space: nowrap; }
.route-meta { min-width: 0; }
.endpoint-actions button { min-height: 44px; font-size: 12px; }
.small-icon, .inline-icon, .saved-remove { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
.setting-switch { height: 44px; background: transparent; }
.setting-switch.on { background: transparent; }
.setting-switch::before { content: ''; position: absolute; inset: 6.5px 0; border-radius: 999px; background: #d1d1d6; }
.setting-switch.on::before { background: var(--green); }
.switch-thumb { top: 8.5px; }
.settings-sheet > .sheet-heading { position: sticky; top: 0; z-index: 2; background: #fff; }
.leaflet-bottom.leaflet-right {
  left: max(10px, env(safe-area-inset-left, 0px)); right: auto;
  top: max(76px, calc(env(safe-area-inset-top, 0px) + 72px)); bottom: auto;
}
.leaflet-control-attribution {
  font-size: 10px; line-height: 1.35; max-width: calc(100vw - 145px);
  margin-left: 0; margin-right: 0; padding: 3px 5px; opacity: 1;
}
#app[data-stage="planner"] .leaflet-bottom.leaflet-right,
#app[data-stage="navigation"] .leaflet-bottom.leaflet-right {
  top: max(136px, calc(env(safe-area-inset-top, 0px) + 132px));
}
@media (orientation: landscape) and (max-height: 600px) {
  .install-fab { right: max(132px, calc(env(safe-area-inset-right, 0px) + 128px)); }
  #app .leaflet-bottom.leaflet-right {
    top: auto; bottom: max(65px, calc(env(safe-area-inset-bottom, 0px) + 61px));
    left: auto; right: max(10px, env(safe-area-inset-right, 0px));
  }
  .leaflet-control-attribution { max-width: 260px; }
}

/* Endpoint editing has one foreground sheet; the route remains on the map. */
#startSearchForm { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
#endSearchForm { grid-template-columns: 18px minmax(0, 1fr) auto; }
.results-sheet { display: flex; flex-direction: column; max-height: min(58dvh, calc(var(--visual-height, 100dvh) - 150px)); }
.results-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet-handle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 3px 0 7px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); touch-action: none; cursor: ns-resize;
}
.sheet-handle .grabber { display: block; margin: 0 0 4px; }
.sheet-handle-label { font-size: 11px; }
.bottom-sheet.is-collapsed > :not(.sheet-handle):not(.sheet-summary) { display: none; }
.bottom-sheet.is-collapsed { overflow: hidden; }
.route-sheet.is-collapsed .route-summary { padding-top: 0; }
@media (orientation: landscape) and (max-height: 600px) {
  .results-sheet { max-height: calc(var(--visual-height, 100dvh) - 20px); }
}

/* Keep the interaction available while scrolling long Settings/Saved panels. */
.sheet-handle { position: sticky; top: 0; z-index: 3; flex-shrink: 0; background: var(--surface); }
.sheet-handle:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.settings-sheet > .sheet-heading { top: 44px; }