/* Build 720: Life Chapters relive as one calm, chronological map story. */

/* The opening is a real route establish, not an opaque loading interstitial. */
html body .app-shell .map-stage.chapter-journey-preparing #map canvas,
html body main.app-shell section.map-stage.chapter-journey-preparing #map canvas {
  opacity: 0.82 !important;
  filter: saturate(1.12) contrast(1.03) brightness(0.82) !important;
  transform: scale(1) !important;
}

html body .app-shell .map-stage.chapter-journey-preparing .chapter-journey-atmosphere,
html body main.app-shell section.map-stage.chapter-journey-preparing .chapter-journey-atmosphere {
  opacity: 0.28 !important;
  background: linear-gradient(180deg, rgba(4, 55, 62, 0.16), rgba(3, 31, 40, 0.34)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .app-shell .map-stage.chapter-journey-preparing .chapter-journey-atmosphere::before,
html body .app-shell .map-stage.chapter-journey-preparing .chapter-journey-atmosphere::after,
html body main.app-shell section.map-stage.chapter-journey-preparing .chapter-journey-atmosphere::before,
html body main.app-shell section.map-stage.chapter-journey-preparing .chapter-journey-atmosphere::after {
  display: none !important;
}

.chapter-journey-signature-stop {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  pointer-events: none;
}

.chapter-journey-signature-stop > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  color: #224f51;
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
  background: rgba(244, 249, 244, 0.96);
  box-shadow:
    0 0 0 2px rgba(71, 191, 157, 0.1),
    0 5px 14px rgba(3, 39, 45, 0.18);
  transition:
    transform 420ms cubic-bezier(0.2, 0.75, 0.2, 1),
    color 320ms ease,
    background 320ms ease,
    box-shadow 320ms ease;
}

.chapter-journey-signature-stop.is-complete > span {
  color: #fff;
  background: #268d79;
  box-shadow:
    0 0 0 3px rgba(66, 202, 165, 0.14),
    0 5px 14px rgba(3, 39, 45, 0.16);
}

.chapter-journey-signature-stop.is-current > span {
  color: #0f4c4d;
  background: linear-gradient(145deg, #fff9db, #82e2c2);
  box-shadow:
    0 0 0 4px rgba(79, 217, 178, 0.17),
    0 0 16px rgba(92, 228, 187, 0.36),
    0 6px 16px rgba(3, 39, 45, 0.2);
  animation: chapter-signature-current-pulse 1.35s ease-in-out infinite alternate;
}

.chapter-journey-route-future {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chapter-journey-signature-traveler {
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 160ms ease;
}

.chapter-journey-signature-traveler > span {
  width: 16px;
  height: 16px;
  border-width: 1px;
  font-size: 0.54rem;
  box-shadow: none;
  transform: scale(0.68);
  transform-origin: center;
  animation: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.map-stage.chapter-journey-traveling .chapter-journey-signature-traveler {
  opacity: 1;
}

.map-stage.chapter-journey-traveling .chapter-journey-signature-traveler > span {
  box-shadow:
    0 0 0 2px rgba(86, 218, 178, 0.12),
    0 3px 10px rgba(0, 25, 30, 0.22);
  animation: chapter-traveler-pulse 1.15s ease-in-out infinite alternate;
}

.map-stage.chapter-journey-same-stop .chapter-journey-signature-stop.is-current > span {
  animation: chapter-signature-same-stop 680ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

/* The compact arrival card previews the stop before its timed capsule opens. */
html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop {
  grid-template-columns: 52px minmax(0, 1fr) 44px !important;
  width: min(420px, calc(100% - 28px)) !important;
  min-height: 104px !important;
  max-height: none !important;
  height: auto !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-pin,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-pin {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy {
  display: grid !important;
  grid-template-rows: auto auto auto 4px !important;
  min-width: 0 !important;
  gap: 2px !important;
  align-content: center !important;
  overflow: visible !important;
}

.story-mode-chapter-stop .story-chapter-step {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;
  overflow: visible;
  color: #287477;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy strong,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy strong {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #073744 !important;
  font-size: clamp(1rem, 2.8vw, 1.16rem) !important;
  font-weight: 880 !important;
  line-height: 1.08 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !important;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy small,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy small {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  color: #5b787c !important;
  font-size: 0.7rem !important;
  font-weight: 740 !important;
  line-height: 1.12 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: unset !important;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy em,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-copy em {
  display: none !important;
}

html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .story-chapter-progress,
html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .story-chapter-progress {
  width: 100% !important;
  max-width: 100% !important;
  height: 4px !important;
  margin-top: 3px !important;
}

.story-mode-open-memory {
  display: grid;
  width: 44px;
  min-width: 44px;
  height: 44px;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #169d86, #1683a4);
  box-shadow: 0 8px 20px rgba(3, 51, 57, 0.2);
}

.story-mode-open-memory small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.story-mode-open-memory b {
  font-size: 1.45rem;
  line-height: 1;
}

#memoryPeekCard.story-mode-chapter-stop:focus-visible {
  outline: 3px solid rgba(255, 246, 197, 0.96) !important;
  outline-offset: 4px !important;
}

.chapter-journey-auto-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 10px 11px 10px 14px;
  border: 1px solid rgba(52, 170, 143, 0.2);
  border-radius: 17px;
  color: #174f51;
  background: linear-gradient(135deg, rgba(239, 255, 249, 0.96), rgba(224, 248, 241, 0.9));
}

.chapter-journey-auto-capsule[hidden] {
  display: none !important;
}

.chapter-journey-auto-capsule > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chapter-journey-auto-capsule small {
  color: #48807d;
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chapter-journey-auto-capsule strong {
  font-size: 0.76rem;
  font-weight: 800;
}

[data-chapter-journey-stay] {
  min-width: 88px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(20, 126, 109, 0.18);
  border-radius: 13px;
  color: #0d675b;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

[data-chapter-journey-stay]:hover,
[data-chapter-journey-stay]:focus-visible {
  background: #fff;
  outline: 2px solid rgba(26, 153, 126, 0.32);
  outline-offset: 2px;
}

@media (max-width: 390px) {
  html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop,
  html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop {
    grid-template-columns: 48px minmax(0, 1fr) 44px !important;
    width: calc(100% - 22px) !important;
    padding: 9px 10px !important;
    gap: 8px !important;
  }

  html body .app-shell .map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-pin,
  html body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .peek-pin {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .chapter-journey-auto-capsule {
    gap: 9px;
    padding-left: 11px;
  }

  [data-chapter-journey-stay] {
    min-width: 82px;
    padding-inline: 11px;
  }
}

@media (max-width: 340px) {
  html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .story-chapter-step-prefix {
    display: none !important;
  }
}

@keyframes chapter-signature-current-pulse {
  from { transform: scale(0.96); }
  to { transform: scale(1.06); }
}

@keyframes chapter-signature-same-stop {
  0% { transform: scale(0.92); }
  52% { transform: scale(1.2); }
  100% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-journey-signature-stop.is-current > span,
  .chapter-journey-signature-traveler,
  .map-stage.chapter-journey-same-stop .chapter-journey-signature-stop.is-current > span,
  .chapter-journey-route-dash {
    animation: none !important;
    transition: none !important;
  }

  [data-chapter-journey-stay] {
    transition: none !important;
  }
}

/* Build 724: the stop preview is always a complete three-column card.
   Older phone rules reduced this component to two columns, which wrapped the
   action underneath the marker and let the universal notice height clip it.
   The numbered route marker is deliberately unrotated; feelings remain in the
   Memory Capsule where they have enough room to be understood. */
html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop {
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  grid-template-rows: minmax(72px, auto) !important;
  align-items: center !important;
  min-height: 96px !important;
  max-height: none !important;
  height: auto !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  overflow: hidden !important;
}

html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop > .peek-pin {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--peek-accent, #159879) 82%, #ffffff 18%), var(--peek-accent, #159879)) !important;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--peek-accent, #159879) 12%, transparent),
    0 8px 18px rgba(3, 50, 57, 0.17) !important;
  transform: none !important;
}

html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop .story-stop-number {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: 0.78rem !important;
  font-style: normal !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: none !important;
}

html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop > .peek-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
}

html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop > .story-mode-open-memory {
  position: relative !important;
  inset: auto !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop > .story-mode-open-memory > :is(svg, [data-icon]) {
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  stroke-width: 2.4 !important;
}

@media (max-width: 390px) {
  html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.memory-peek-card.story-mode-card.story-mode-chapter-stop {
    grid-template-columns: 40px minmax(0, 1fr) 44px !important;
    width: calc(100% - 22px) !important;
    padding: 9px 10px !important;
    gap: 8px !important;
  }

  html:not(#chapter-stop-layout-v724) body main.app-shell section.map-stage.map-focus.chapter-journey-active #memoryPeekCard.story-mode-chapter-stop > .peek-pin {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}