/* Shared, low-cost motion. Never CSS-scale/filter the WebGL map surface. */
/* Arrival foreground: preserve the destination's own color and exact tip.
   Quiet other markers, not the street names, buildings or surrounding map. */
html body main.app-shell section.map-stage.memory-arrival-focus .maplibregl-marker:not(.memory-journey-arrival-pin) {
  opacity: .32 !important;
  transition: opacity 220ms ease-out !important;
}
html body main.app-shell section.map-stage.memory-arrival-focus :is(.is-selected-memory-marker, .chapter-journey-signature-stop.is-current, .chapter-journey-signature-traveler):not(.memory-journey-arrival-pin) {
  opacity: 0 !important;
}
html body main.app-shell section.map-stage.map-focus .maplibregl-marker.mymappi-memory-pin-icon.memory-journey-arrival-pin {
  z-index: 3200 !important;
  width: 48px !important; height: 63px !important;
  opacity: 1 !important; pointer-events: none !important;
}
html body main.app-shell section.map-stage .memory-journey-arrival-halo {
  position: absolute; left: 50%; top: 91.7%; z-index: 0;
  width: 54px; height: 18px; transform: translate(-50%, -50%);
  border: 2px solid var(--arrival-pin-color, #ed765e); border-radius: 50%;
  background: color-mix(in srgb, var(--arrival-pin-color, #ed765e) 20%, transparent);
  box-shadow: 0 0 0 3px rgba(255,255,255,.9);
}
html body main.app-shell section.map-stage .memory-journey-arrival-pin :is(.mymappi-pin-only, .memory-pin-svg) {
  width: 48px !important; height: 63px !important;
  opacity: 1 !important; transform: none !important;
  animation: none !important; filter: none !important;
}
html body main.app-shell section.map-stage .memory-journey-arrival-pin .memory-pin-svg {
  position: relative; z-index: 1; overflow: visible !important;
  filter: drop-shadow(0 3px 3px rgba(0,36,63,.3)) !important;
}
html body main.app-shell section.map-stage.map-focus.memory-arrival-focus .maplibregl-marker.memory-journey-arrival-pin .mymappi-pin-only.is-reliving-memory .memory-pin-svg {
  /* The ordinary selected-pin lift must not move this exact-location tip. */
  transform: none !important;
}
html body main.app-shell section.map-stage .memory-journey-arrival-pin :is(.memory-pin-presence, .memory-pin-shine) {
  animation: none !important;
}
html body main.app-shell section.map-stage .memory-journey-arrival-pin .active-trip-pin-day { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.memory-arrival-focus .maplibregl-marker { transition: none !important; }
}

html body .app-shell :is([data-memory-travel-label], [data-chapter-relive-label]) { font: inherit; }
html body .app-shell .memory-travel-offline-note {
  display: block; grid-column: 1 / -1; margin: 0; padding: 4px 8px;
  color: #4c6874; font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center;
}
html body .app-shell .memory-travel-offline-note[hidden] { display: none !important; }
html body .app-shell :is(#homeReliveMyMap, [data-life-chapter-view-relive]):disabled {
  cursor: default; box-shadow: none; opacity: 1;
}
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 auto !important;
}
html body .app-shell .chapter-journey-active :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}
html body .app-shell .chapter-journey-step-controls {
  display: flex; gap: 6px; min-width: 0; grid-row: 2; grid-column: 1;
}
html body .app-shell :is([data-chapter-journey-step], [data-chapter-journey-skip], [data-chapter-journey-open]) {
  min-width: 44px; min-height: 44px; padding: 8px 12px;
  border: 1px solid #b5ccd2; border-radius: 12px;
  font: inherit; font-size: 12px; font-weight: 750;
  color: #00243f; background: #e3f4ef; box-shadow: none;
  cursor: pointer; white-space: nowrap;
}
html body .app-shell [data-chapter-journey-step]:disabled { opacity: .45; cursor: default; }
html body .app-shell :is([data-chapter-journey-skip], [data-chapter-journey-open]) { flex: 1; }
html body .app-shell :is([data-chapter-journey-step], [data-chapter-journey-skip], [data-chapter-journey-open])[hidden] { display: none !important; }
html body .app-shell .memory-journey-skip {
  position: absolute; z-index: 960; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 24px);
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px;
  box-sizing: border-box; width: min(420px, calc(100% - 32px)); padding: 12px 16px;
  border: 1px solid #8cb0c1; border-radius: 18px;
  background: #00243f; color: #f5fbff;
  font: inherit; font-size: 14px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,36,63,.15);
}
html body .app-shell .memory-journey-skip > span { min-width: 0; display: grid; gap: 4px; }
html body .app-shell .memory-journey-skip small { color: #b9d3df; font-size: 11px; font-weight: 600; }
html body .app-shell .memory-journey-skip strong { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .app-shell .memory-journey-skip button { min-height: 44px; padding: 10px 12px; border: 1px solid #8cb0c1; border-radius: 12px; background: #e3f4ef; color: #00243f; font: inherit; font-size: 12px; cursor: pointer; }
html body .app-shell .memory-journey-skip button:disabled { cursor: default; }
html body .app-shell :is(.memory-journey-skip button, [data-chapter-journey-skip]):focus-visible { outline: 3px solid #73dac6; outline-offset: 3px; }
@media (max-width: 600px) {
  html body .app-shell .memory-journey-skip { bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 132px); }
}
html body .app-shell .chapter-journey-active :is([data-chapter-journey-resume], [data-chapter-journey-stay], [data-my-map-journey-pause]) { grid-row: 2; grid-column: 2 !important; }
html body .app-shell .chapter-journey-active [data-my-map-journey-end] { grid-row: 2; grid-column: 3 !important; }
/* Quiet transport controls instead of four equally heavy action tiles.
   Keep 44px hit areas; very narrow phones retain the two-row arrangement. */
html body main.app-shell :is(.chapter-journey-resume-dock.is-my-map-control, .chapter-journey-sheet-pause, .chapter-journey-media-pause, .chapter-journey-auto-capsule):not([hidden]) {
  container: journey-controls / inline-size;
  display: grid !important; align-items: center !important;
  gap: 6px !important; padding: 10px !important;
  border: 1px solid #d0e1e2 !important; border-radius: 16px !important;
  background: #f6fcfa !important;
  box-shadow: 0 5px 18px rgba(0, 36, 63, .07) !important;
}
html body main.app-shell :is(.chapter-journey-sheet-pause, .chapter-journey-media-pause, .chapter-journey-auto-capsule) > .chapter-journey-pause-mark { display: none !important; }
html body main.app-shell :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) {
  grid-area: 1 / 1 / 2 / -1 !important; display: grid !important; gap: 2px !important; min-width: 0 !important;
}
html body main.app-shell :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) small {
  color: #526b76 !important; font-size: .6875rem !important; line-height: 1.35 !important;
  letter-spacing: .06em !important; white-space: normal !important;
}
html body main.app-shell :is(.chapter-journey-pause-copy, .chapter-journey-auto-capsule > span) strong {
  color: #00243f !important; font-size: .8125rem !important; line-height: 1.4 !important;
  white-space: normal !important; overflow-wrap: anywhere !important;
}
html body main.app-shell .chapter-journey-step-controls { gap: 4px !important; }
html body main.app-shell [data-chapter-journey-step] {
  flex: 0 0 44px; min-width: 44px !important; min-height: 44px !important;
  padding: 8px !important; font-size: 20px !important; line-height: 1 !important;
  border-color: transparent !important; background: #e7f2f0 !important;
}
html body main.app-shell :is([data-chapter-journey-resume], [data-chapter-journey-stay], [data-my-map-journey-pause], [data-my-map-journey-end]) {
  min-width: 44px !important; min-height: 44px !important; padding: 8px !important;
  font-size: .8125rem !important; line-height: 1.25 !important; white-space: normal !important;
  border-radius: 12px !important; box-shadow: none !important;
}
html body main.app-shell [data-my-map-journey-end] {
  border-color: transparent !important; background: transparent !important; color: #526b76 !important;
}
html body main.app-shell .chapter-journey-media-pause {
  position: static !important; box-sizing: border-box !important;
  width: min(560px, calc(100% - 24px)) !important; max-width: 100% !important;
  margin: 8px auto max(8px, env(safe-area-inset-bottom)) !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
}
html body main.app-shell .chapter-journey-media-pause [data-chapter-journey-resume] {
  grid-area: 2 / 2 !important; color: #fff !important; background: #00243f !important;
}
html body main.app-shell .chapter-journey-media-pause [data-my-map-journey-end] { grid-area: 2 / 3 !important; }
/* Size the arrangement to its actual lane, not the screen width. em also
   makes larger text opt into two rows before labels or targets are squeezed. */
@container journey-controls (max-width: 14em) {
  html body main.app-shell .chapter-journey-step-controls { grid-column: 1 / -1 !important; }
  html body main.app-shell [data-chapter-journey-step] { flex: 1; }
  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]),
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) [data-chapter-journey-resume],
  html body main.app-shell .chapter-journey-media-pause [data-chapter-journey-resume] { grid-row: 3 !important; grid-column: 1 / 3 !important; }
  html body main.app-shell section.map-stage.map-focus.chapter-journey-active [data-my-map-journey-end],
  html body main.app-shell .chapter-journey-media-pause [data-my-map-journey-end] { grid-row: 3 !important; grid-column: 3 !important; }
}
html body main.app-shell section.map-stage:is(.chapter-journey-active, .memory-camera-shot) .maplibregl-canvas {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}
html body .app-shell .chapter-journey-active #chapterJourneyAtmosphere {
  display: none !important;
}
html body main.app-shell section.map-stage.chapter-journey-active #locationBanner.location-banner,
html body main.app-shell section.map-stage.memory-camera-shot #locationBanner.location-banner {
  display: none !important;
}
/* One entrance, not a fading full-screen scrim plus a second scaled page.
   Opaque underpaint avoids showing map labels through the arriving capsule. */
html body main.app-shell #memoryBottomSheet.journey-capsule.open:not(.closing) {
  animation: none !important;
  opacity: 1 !important;
  background: #00243f !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body main.app-shell #memoryBottomSheet.journey-capsule.open #memorySheetContent {
  animation: memory-journey-capsule-in 220ms ease-out backwards !important;
  transform: none !important;
  will-change: auto !important;
}
@keyframes memory-journey-capsule-in { from { opacity: 0; } to { opacity: 1; } }
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) {
  position: absolute;
  z-index: 960;
  left: 50%;
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateX(-50%);
  width: min(520px, calc(100% - 32px));
  max-height: calc(100% - 220px);
  overflow: auto;
  box-sizing: border-box;
  padding: 24px;
  border: 1px solid rgba(211,237,245,.32);
  border-radius: 26px;
  background: #00243f;
  color: #f5fbff;
  box-shadow: 0 18px 48px rgba(0,36,63,.2);
  text-align: center;
  animation: memory-journey-card-in 280ms ease-out both;
}
@keyframes memory-journey-card-in { from { opacity: 0; } to { opacity: 1; } }
html body .app-shell .memory-journey-completion-mark { display: block; color: #73dac6; font-size: 30px; margin-bottom: 10px; }
html body .app-shell .memory-journey-completion > small { color: #a8e7de; letter-spacing: .13em; font-size: 11px; font-weight: 750; }
html body .app-shell .memory-journey-completion h2 { color: #fff; font-size: clamp(22px, 3vw, 30px); line-height: 1.18; margin: 10px 0; overflow-wrap: anywhere; }
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) p { color: #c7dae4; font-size: 14px; line-height: 1.5; margin: 10px 0 16px; }
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) button {
  min-height: 44px; min-width: 44px; padding: 10px 16px;
  border-radius: 13px; border: 1px solid #8cb0c1;
  background: transparent; color: #f5fbff; font: inherit; font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: normal;
}
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) :is([data-journey-replay], [data-journey-open]) { background: #73dac6; color: #00243f; border-color: #73dac6; }
html body .app-shell .memory-journey-completion .memory-journey-stay { border: 0; margin-top: 10px; color: #c7dae4; }
html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) button:focus-visible { outline: 3px solid #e6f6ef; outline-offset: 3px; }
@media (max-height: 560px) {
  html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) { padding: 14px; max-height: calc(100% - 150px); }
  html body .app-shell .memory-journey-completion-mark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell #memoryBottomSheet.journey-capsule.open #memorySheetContent,
  html body .app-shell :is(.memory-journey-completion, .memory-journey-recovery) { animation: none !important; }
}

/* Map travel is a compact transport panel: one destination, a quiet stop
   count, then the existing actions. Do not alter playback or sheet controls. */
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock.is-my-map-control:not([hidden]) {
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  padding: 12px !important;
  gap: 10px 6px !important;
  border-radius: 18px !important;
  background: #f8fcfb !important;
  border-color: #d4e4e3 !important;
  box-shadow: 0 6px 20px #00243f12 !important;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-pause-copy {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 3px 10px !important;
  align-items: center !important;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock [data-chapter-journey-pause-label] {
  grid-area: 1 / 1 !important;
  font-size: .625rem !important;
  letter-spacing: .07em !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  color: #526d76 !important;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock [data-chapter-journey-progress] {
  grid-area: 2 / 1 !important;
  font-size: .9375rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-position {
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1px solid #d4e6e1;
  border-radius: 999px;
  background: #eaf5f1;
  color: #345666;
  font-size: .6875rem;
  line-height: 1.4;
  font-weight: 600;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-position[hidden] { display: none; }
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-step-controls {
  align-self: stretch;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock :is([data-chapter-journey-skip], [data-chapter-journey-open]) {
  min-width: 0;
  padding: 8px;
  white-space: normal;
  background: #e8f5f0;
  border-color: #cfe3dc;
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.35;
}
html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock [data-my-map-journey-end] {
  border: 1px solid #dce7e5 !important;
  background: #f8fcfb !important;
  color: #526d76 !important;
  white-space: nowrap !important;
}
@container journey-controls (max-width: 14em) {
  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-area: 3 / 1 / 4 / 3 !important;
  }
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-pause-copy {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body main.app-shell section.map-stage.map-focus .chapter-journey-resume-dock .chapter-journey-position {
    grid-area: 3 / 1;
    justify-self: start;
    padding-block: 3px;
  }
}