/* Build 685: one private, grouped Life Chapter experience. */

/* Keep the trip entry visually quiet while preserving a 44px touch target. */
html body .app-shell .life-chapter-trip-start {
  min-height: 44px !important;
  padding: 5px 10px 5px 6px !important;
  gap: 8px !important;
  font-size: 0.68rem !important;
}

html body .app-shell .life-chapter-trip-start-icon {
  width: 28px !important;
  height: 28px !important;
  flex-basis: 28px !important;
  border-radius: 10px !important;
}

html body .app-shell .life-chapter-trip-start-icon svg {
  width: 14px !important;
  height: 14px !important;
}

html body .app-shell .life-chapter-trip-start-arrow {
  width: 14px !important;
  height: 14px !important;
  flex-basis: 14px !important;
}

html body .app-shell .life-chapter-viewer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  display: grid !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: clamp(16px, 3vw, 34px) !important;
  place-items: center !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  isolation: isolate !important;
  transition: opacity 180ms ease !important;
}

html body .app-shell .life-chapter-viewer[hidden] {
  display: none !important;
}

html body .app-shell .life-chapter-viewer.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

html body .app-shell .life-chapter-viewer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 78% 12%, rgba(62, 221, 174, 0.18), transparent 30%),
    rgba(2, 25, 34, 0.66) !important;
  backdrop-filter: blur(14px) saturate(1.06) !important;
  cursor: default !important;
}

html body .app-shell .life-chapter-viewer-panel {
  position: relative !important;
  z-index: 2 !important;
  width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(126, 191, 180, 0.32) !important;
  border-radius: 30px !important;
  color: #083f4d !important;
  background:
    radial-gradient(circle at 95% 2%, rgba(72, 220, 171, 0.12), transparent 26%),
    linear-gradient(148deg, #fffef8 0%, #f5fbf7 58%, #eaf7f4 100%) !important;
  box-shadow:
    0 32px 90px rgba(1, 30, 40, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(9, 119, 111, 0.3) transparent !important;
}

html body .app-shell .life-chapter-viewer-content {
  display: grid !important;
  gap: 20px !important;
  padding: clamp(22px, 3.2vw, 34px) !important;
}

html body .app-shell .life-chapter-viewer-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
}

html body .app-shell .life-chapter-viewer-heading {
  display: grid !important;
  min-width: 0 !important;
  gap: 8px !important;
}

html body .app-shell .life-chapter-viewer-eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(13, 127, 116, 0.17) !important;
  border-radius: 999px !important;
  color: #0a746f !important;
  background: rgba(239, 250, 245, 0.88) !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body .app-shell .life-chapter-viewer-eyebrow svg {
  width: 14px !important;
  height: 14px !important;
}

html body .app-shell #lifeChapterViewerTitle {
  margin: 0 !important;
  max-width: 19ch !important;
  color: #073e4c !important;
  font-size: clamp(1.85rem, 4.2vw, 3.35rem) !important;
  font-weight: 860 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.045em !important;
  overflow-wrap: anywhere !important;
}

html body .app-shell .life-chapter-viewer-meta {
  display: flex !important;
  max-width: 68ch !important;
  flex-wrap: wrap !important;
  gap: 7px 12px !important;
  color: rgba(8, 64, 75, 0.72) !important;
  font-size: 0.86rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
}

html body .app-shell .life-chapter-viewer-meta > span {
  display: inline-flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
}

html body .app-shell .life-chapter-viewer-meta svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  color: #11968d !important;
}

html body .app-shell .life-chapter-viewer-close {
  display: inline-grid !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(7, 68, 76, 0.16) !important;
  border-radius: 16px !important;
  color: #0a5962 !important;
  background: rgba(255, 255, 252, 0.9) !important;
  box-shadow: 0 9px 20px rgba(5, 55, 63, 0.1) !important;
  cursor: pointer !important;
}

html body .app-shell .life-chapter-viewer-close svg {
  width: 20px !important;
  height: 20px !important;
}

html body .app-shell .life-chapter-viewer-close:hover,
html body .app-shell .life-chapter-viewer-close:focus-visible {
  color: #07535c !important;
  border-color: rgba(9, 139, 125, 0.34) !important;
  background: #fffef8 !important;
  box-shadow: 0 9px 22px rgba(5, 55, 63, 0.12), 0 0 0 3px rgba(45, 203, 164, 0.13) !important;
}

html body .app-shell .life-chapter-viewer-note {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  align-items: start !important;
  border: 1px solid rgba(12, 124, 113, 0.14) !important;
  border-radius: 19px !important;
  background: rgba(255, 255, 252, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html body .app-shell .life-chapter-viewer-note-icon {
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  place-items: center !important;
  border-radius: 13px !important;
  color: #fffef8 !important;
  background: linear-gradient(145deg, #42d4ad, #128f8c 62%, #0a6b79) !important;
  box-shadow: 0 7px 15px rgba(8, 116, 111, 0.2) !important;
}

html body .app-shell .life-chapter-viewer-note-icon svg {
  width: 17px !important;
  height: 17px !important;
}

html body .app-shell .life-chapter-viewer-note-copy {
  display: grid !important;
  gap: 4px !important;
}

html body .app-shell .life-chapter-viewer-note-copy > span {
  color: #0b817a !important;
  font-size: 0.65rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
}

html body .app-shell .life-chapter-viewer-note-copy p {
  margin: 0 !important;
  color: #124f5a !important;
  font-size: 0.94rem !important;
  font-weight: 640 !important;
  line-height: 1.5 !important;
}

html body .app-shell .life-chapter-viewer-gallery-section {
  display: grid !important;
  gap: 11px !important;
}

html body .app-shell .life-chapter-viewer-gallery-heading {
  display: flex !important;
  min-height: 30px !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

html body .app-shell .life-chapter-viewer-gallery-heading > span {
  color: #0a4c59 !important;
  font-size: 0.86rem !important;
  font-weight: 830 !important;
}

html body .app-shell .life-chapter-viewer-gallery-heading > small {
  color: rgba(8, 64, 75, 0.65) !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
}

html body .app-shell .life-chapter-viewer-gallery {
  display: flex !important;
  gap: 14px !important;
  width: calc(100% + clamp(22px, 3.2vw, 34px)) !important;
  margin-right: calc(clamp(22px, 3.2vw, 34px) * -1) !important;
  padding: 2px clamp(22px, 3.2vw, 34px) 8px 1px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-behavior: smooth !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  touch-action: pan-x pinch-zoom !important;
}

html body .app-shell .life-chapter-viewer-gallery::-webkit-scrollbar {
  display: none !important;
}

html body .app-shell .life-chapter-viewer-media {
  display: grid !important;
  width: 74% !important;
  flex: 0 0 74% !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  border: 1px solid rgba(120, 184, 175, 0.28) !important;
  border-radius: 24px !important;
  color: #fffef8 !important;
  background: #083e49 !important;
  box-shadow: 0 16px 34px rgba(5, 51, 60, 0.16) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease !important;
  touch-action: pan-x pinch-zoom !important;
}

html body .app-shell .life-chapter-viewer-media:hover,
html body .app-shell .life-chapter-viewer-media:focus-visible,
html body .app-shell .life-chapter-viewer-media.is-current {
  border-color: rgba(54, 211, 171, 0.58) !important;
  box-shadow: 0 18px 38px rgba(5, 51, 60, 0.19), 0 0 0 3px rgba(54, 211, 171, 0.1) !important;
}

html body .app-shell .life-chapter-viewer-media:hover,
html body .app-shell .life-chapter-viewer-media:focus-visible {
  transform: translateY(-2px) !important;
}

html body .app-shell .life-chapter-viewer-media-art {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-height: 280px !important;
  aspect-ratio: 16 / 10 !important;
  place-items: center !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(65, 214, 173, 0.18), transparent 48%),
    linear-gradient(145deg, #0a4d58, #072f3a) !important;
}

html body .app-shell .life-chapter-viewer-media-art > img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 440px !important;
  object-fit: contain !important;
  object-position: center !important;
}

html body .app-shell .life-chapter-viewer-media-art.has-video-fallback > img {
  width: min(44%, 190px) !important;
  height: min(72%, 220px) !important;
  object-fit: contain !important;
  filter: drop-shadow(0 13px 20px rgba(0, 18, 24, 0.28)) !important;
}

html body .app-shell .life-chapter-viewer-play {
  position: absolute !important;
  z-index: 3 !important;
  inset: 50% auto auto 50% !important;
  display: inline-grid !important;
  width: 58px !important;
  height: 58px !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.64) !important;
  border-radius: 50% !important;
  color: #073f49 !important;
  background: rgba(255, 254, 248, 0.92) !important;
  box-shadow: 0 12px 28px rgba(0, 21, 28, 0.26) !important;
  transform: translate(-50%, -50%) !important;
}

html body .app-shell .life-chapter-viewer-play svg {
  width: 22px !important;
  height: 22px !important;
  margin-left: 2px !important;
}

html body .app-shell .life-chapter-viewer-media-caption {
  display: flex !important;
  min-height: 54px !important;
  padding: 10px 14px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: rgba(255, 254, 248, 0.9) !important;
  background: linear-gradient(90deg, #0a4d58, #0a6267) !important;
}

html body .app-shell .life-chapter-viewer-media-caption > span {
  font-size: 0.76rem !important;
  font-weight: 820 !important;
}

html body .app-shell .life-chapter-viewer-media-caption > small {
  color: rgba(255, 254, 248, 0.72) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
}

html body .app-shell .life-chapter-viewer-gallery-empty {
  display: grid !important;
  min-height: 280px !important;
  padding: 28px !important;
  place-items: center !important;
  gap: 10px !important;
  border: 1px solid rgba(10, 122, 113, 0.17) !important;
  border-radius: 24px !important;
  color: #0a5360 !important;
  background: rgba(255, 255, 252, 0.68) !important;
  text-align: center !important;
}

html body .app-shell .life-chapter-viewer-gallery-empty img {
  width: 112px !important;
  height: 112px !important;
  object-fit: contain !important;
}

html body .app-shell .life-chapter-viewer-gallery-empty strong {
  font-size: 1rem !important;
}

html body .app-shell .life-chapter-viewer-gallery-empty small {
  max-width: 34ch !important;
  color: rgba(8, 64, 75, 0.66) !important;
  line-height: 1.45 !important;
}

html body .app-shell .life-chapter-viewer-gallery-controls {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 46px !important;
  gap: 10px !important;
  align-items: center !important;
}

html body .app-shell .life-chapter-viewer-gallery-controls.is-single {
  grid-template-columns: 1fr !important;
}

html body .app-shell .life-chapter-viewer-gallery-controls.is-single > button {
  display: none !important;
}

html body .app-shell .life-chapter-viewer-gallery-nav {
  display: inline-grid !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(7, 80, 84, 0.17) !important;
  border-radius: 15px !important;
  color: #096d6c !important;
  background: rgba(255, 255, 252, 0.82) !important;
  cursor: pointer !important;
}

html body .app-shell .life-chapter-viewer-gallery-nav:disabled {
  opacity: 0.36 !important;
  cursor: default !important;
}

html body .app-shell .life-chapter-viewer-gallery-nav:not(:disabled):hover,
html body .app-shell .life-chapter-viewer-gallery-nav:not(:disabled):focus-visible {
  color: #07535a !important;
  border-color: rgba(10, 143, 129, 0.32) !important;
  box-shadow: 0 0 0 3px rgba(48, 205, 165, 0.11) !important;
}

html body .app-shell .life-chapter-viewer-gallery-nav svg {
  width: 19px !important;
  height: 19px !important;
}

html body .app-shell .life-chapter-viewer-gallery-position {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

html body .app-shell .life-chapter-viewer-counter {
  color: rgba(8, 64, 75, 0.66) !important;
  font-size: 0.72rem !important;
  font-weight: 740 !important;
}

html body .app-shell .life-chapter-viewer-counter strong {
  color: #075660 !important;
  font-size: 0.82rem !important;
}

html body .app-shell .life-chapter-viewer-dots {
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
}

html body .app-shell .life-chapter-viewer-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(8, 92, 91, 0.24) !important;
  cursor: pointer !important;
  transition: width 160ms ease, background 160ms ease !important;
}

html body .app-shell .life-chapter-viewer-dot[aria-current="true"] {
  width: 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #36cda5, #0f8f8c) !important;
}

html body .app-shell .life-chapter-viewer-footer {
  display: flex !important;
  min-height: 54px !important;
  padding-top: 16px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-top: 1px solid rgba(9, 104, 101, 0.12) !important;
}

html body .app-shell .life-chapter-viewer-private {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(8, 67, 77, 0.66) !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
}

html body .app-shell .life-chapter-viewer-private svg {
  width: 15px !important;
  height: 15px !important;
  color: #0c9388 !important;
}

html body .app-shell .life-chapter-viewer-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 9px !important;
}

html body .app-shell .life-chapter-viewer-actions button {
  display: inline-flex !important;
  min-height: 46px !important;
  padding: 10px 14px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border-radius: 15px !important;
  font: inherit !important;
  font-size: 0.75rem !important;
  font-weight: 820 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
}

html body .app-shell .life-chapter-viewer-actions button svg {
  width: 16px !important;
  height: 16px !important;
}

html body .app-shell .life-chapter-viewer-edit {
  border: 1px solid rgba(5, 116, 110, 0.25) !important;
  color: #086a6b !important;
  background: rgba(255, 255, 252, 0.84) !important;
}

html body .app-shell .life-chapter-viewer-moments {
  border: 1px solid rgba(7, 93, 97, 0.18) !important;
  color: #fffef8 !important;
  background: linear-gradient(135deg, #0c6870, #0f9189 58%, #29bd95) !important;
  box-shadow: 0 9px 20px rgba(6, 105, 101, 0.18) !important;
}

html body .app-shell .life-chapter-viewer-actions button:hover,
html body .app-shell .life-chapter-viewer-actions button:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px rgba(5, 78, 78, 0.16), 0 0 0 3px rgba(50, 204, 165, 0.1) !important;
}

html body.life-chapter-viewer-open {
  overflow: hidden !important;
}

html body.life-chapter-viewer-open .app-shell :is(
  .memory-save-confirmation,
  .memory-journey-toast,
  .mappi-guide-bubble,
  .you-are-here-message,
  .memory-peek-card,
  .location-banner
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 720px) {
  html body .app-shell .life-chapter-viewer {
    padding: 0 !important;
  }

  html body .app-shell .life-chapter-viewer-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--mymappi-visible-height, 100dvh) !important;
    max-height: var(--mymappi-visible-height, 100dvh) !important;
    border-width: 0 !important;
    border-radius: 0 !important;
  }

  html body .app-shell .life-chapter-viewer-content {
    gap: 16px !important;
    min-height: 100% !important;
    padding:
      max(18px, env(safe-area-inset-top, 0px))
      16px
      max(22px, env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .app-shell #lifeChapterViewerTitle {
    max-width: 15ch !important;
    font-size: clamp(1.75rem, 9.2vw, 2.5rem) !important;
  }

  html body .app-shell .life-chapter-viewer-header {
    gap: 10px !important;
  }

  html body .app-shell .life-chapter-viewer-close {
    position: sticky !important;
    top: max(8px, env(safe-area-inset-top, 0px)) !important;
  }

  html body .app-shell .life-chapter-viewer-note {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    padding: 12px !important;
  }

  html body .app-shell .life-chapter-viewer-note-icon {
    width: 34px !important;
    height: 34px !important;
  }

  html body .app-shell .life-chapter-viewer-gallery {
    width: calc(100% + 16px) !important;
    margin-right: -16px !important;
    padding-right: 16px !important;
  }

  html body .app-shell .life-chapter-viewer-media {
    width: calc(100vw - 52px) !important;
    flex-basis: calc(100vw - 52px) !important;
    border-radius: 21px !important;
  }

  html body .app-shell .life-chapter-viewer-media-art {
    min-height: min(54vh, 390px) !important;
    aspect-ratio: 4 / 3 !important;
  }

  html body .app-shell .life-chapter-viewer-media-art > img {
    max-height: min(54vh, 390px) !important;
  }

  html body .app-shell .life-chapter-viewer-footer {
    display: grid !important;
    gap: 12px !important;
  }

  html body .app-shell .life-chapter-viewer-private {
    justify-content: center !important;
  }

  html body .app-shell .life-chapter-viewer-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
  }

  html body .app-shell .life-chapter-viewer-actions button {
    min-width: 0 !important;
    padding-inline: 10px !important;
  }
}

@media (max-width: 380px) {
  html body .app-shell .life-chapter-viewer-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .app-shell .life-chapter-viewer-gallery-position {
    gap: 6px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .life-chapter-viewer,
  html body .app-shell .life-chapter-viewer-media,
  html body .app-shell .life-chapter-viewer-dot,
  html body .app-shell .life-chapter-viewer-actions button {
    transition: none !important;
  }

  html body .app-shell .life-chapter-viewer-gallery {
    scroll-behavior: auto !important;
  }
}