/* Home journey entries share their visual rhythm and accessible touch targets. */
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap) {
  color: var(--mymappi-action-navy, #00243f) !important;
  background: rgba(248, 253, 251, 0.96) !important;
  border-color: rgba(0, 36, 63, 0.12) !important;
  box-shadow: 0 8px 22px rgba(0, 36, 63, 0.07) !important;
  animation: none !important;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap) .home-private-relive-title {
  color: var(--mymappi-action-navy, #00243f) !important;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap) .home-private-relive-mark {
  color: var(--mymappi-action-navy, #00243f) !important;
  background: rgba(115, 223, 200, 0.18) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap) .home-private-relive-mark svg {
  width: 26px !important;
  height: 26px !important;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap) .home-private-relive-action {
  background: var(--mymappi-action-navy, #00243f) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .app-shell #homeDashboard #homeReliveMyMap .home-private-relive-action svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  fill: currentColor;
  stroke-width: 1.5;
}
html body .app-shell #homeDashboard #homeJourneyRecap .home-private-relive-action svg {
  width: 18px !important; height: 18px !important;
  min-width: 18px !important; min-height: 18px !important;
  fill: none; stroke-width: 2;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap):is(:hover, :focus-visible) {
  transform: none !important;
  border-color: rgba(0, 36, 63, 0.3) !important;
}
html body .app-shell #homeDashboard :is(#homeReliveMyMap, #homeJourneyRecap):active:not(:disabled) {
  transform: scale(0.99) !important;
}
html body .app-shell #homeDashboard #homeReliveMyMap[aria-busy="true"] {
  opacity: 1 !important;
  cursor: progress;
}

/* One compact centered dock during travel, and the same controls inside the
   capsule/media surfaces. Shared by My Map and Life Chapter journeys. */
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]),
html body .app-shell .chapter-journey-active :is(.chapter-journey-sheet-pause, .chapter-journey-media-pause, .chapter-journey-auto-capsule) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center;
  gap: 6px !important;
  padding: 10px !important;
  background: #f6fcfa !important;
  color: #00243f !important;
  border: 1px solid #d0e1e2 !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 18px rgba(0, 36, 63, 0.07) !important;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) {
  --explore-notice-center-width: min(560px, calc(100% - 32px));
  --explore-notice-center-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 22px);
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(560px, calc(100% - 32px)) !important;
  box-sizing: border-box;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 22px) !important;
}
html body .app-shell .chapter-journey-active #memoryPeekCard.story-mode-card {
  --explore-notice-center-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--chapter-journey-dock-height, 104px) + 34px);
  --map-notice-bottom: var(--explore-notice-center-bottom);
  /* Transit text gets its own lane above the controls, never behind them. */
  bottom: var(--explore-notice-center-bottom) !important;
}
html body .app-shell .is-my-map-control > .chapter-journey-pause-mark,
html body .app-shell .chapter-journey-active :is(.chapter-journey-sheet-pause, .chapter-journey-media-pause) > .chapter-journey-pause-mark {
  display: none !important;
}
html body .app-shell .chapter-journey-active :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) {
  display: grid;
  min-width: 0;
  gap: 3px;
}
html body .app-shell .chapter-journey-active :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) :is(strong, small) {
  color: #00243f !important;
  white-space: normal !important;
  font-size: 0.8125rem !important;
  line-height: 1.4;
}
html body .app-shell .chapter-journey-active :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) small {
  color: #526b76 !important;
  font-size: .6875rem !important;
  line-height: 1.35 !important;
}
html body main.app-shell section.map-stage.map-focus.chapter-journey-active :is([data-chapter-journey-resume], [data-chapter-journey-stay], [data-my-map-journey-pause], [data-my-map-journey-end]),
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) [data-chapter-journey-resume] {
  grid-column: auto !important;
  width: auto !important;
  min-height: 44px !important;
  min-width: 44px !important;
  padding: 8px !important;
  border: 1px solid #b5ccd2 !important;
  border-radius: 12px !important;
  background: #00243f !important;
  color: #fff !important;
  box-shadow: none !important;
  font: inherit;
  font-size: 0.8125rem !important;
  font-weight: 750;
  cursor: pointer;
}
html body main.app-shell section.map-stage.map-focus.chapter-journey-active [data-my-map-journey-end] {
  background: transparent !important;
  color: #526b76 !important;
  border-color: transparent !important;
}
@media (min-width: 700px) and (hover: hover) and (pointer: fine) {
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) {
    --explore-notice-center-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 38px);
  }
  html body .app-shell .chapter-journey-active #memoryPeekCard.story-mode-card {
    --explore-notice-center-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--chapter-journey-dock-height, 104px) + 50px);
  }
}
html body .app-shell :is([data-my-map-journey-pause], [data-my-map-journey-end], [data-chapter-journey-resume])[hidden] {
  display: none !important;
}
html body .app-shell .chapter-journey-active button:focus-visible {
  outline: 3px solid #168374;
  outline-offset: 3px;
}
@media (max-width: 420px) {
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]),
  html body .app-shell .chapter-journey-active :is(.chapter-journey-sheet-pause, .chapter-journey-media-pause, .chapter-journey-auto-capsule) {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  html body .app-shell .chapter-journey-active :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) {
    grid-column: 1 / -1;
  }
  html body .app-shell .chapter-journey-active #memoryPeekCard.story-mode-card {
    --explore-notice-center-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + var(--chapter-journey-dock-height, 164px) + 34px);
    bottom: var(--explore-notice-center-bottom) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .app-shell #homeDashboard #homeReliveMyMap {
    transition: none !important;
    transform: none !important;
  }
}
@media (forced-colors: active) {
  html body .app-shell #homeReliveMyMap,
  html body .app-shell .chapter-journey-active :is(button, .chapter-journey-pause-copy) {
    forced-color-adjust: auto;
  }
}