/*
 * MyMappi Memory Capsule v6
 *
 * A final, state-aware polish layer for the existing v5 keepsake. This file
 * deliberately reuses the current capsule markup: it does not introduce
 * nested cards, and photo capsules retain the cinematic v5 composition.
 */

/* Empty or intentionally hidden metadata should close without leaving gaps. */
html body .app-shell .full-memory-capsule .memory-capsule-context:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-context:empty,
html body .app-shell .full-memory-capsule .memory-capsule-hero-meta:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-hero-meta:empty,
html body .app-shell .full-memory-capsule .memory-capsule-hero-meta > span:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-hero-meta > span:empty,
html body .app-shell .full-memory-capsule .memory-capsule-detail-line:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line:empty,
html body .app-shell .full-memory-capsule .memory-capsule-detail-chips:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-chips:empty,
html body .app-shell .full-memory-capsule [data-memory-meta][hidden],
html body main.app-shell .full-memory-capsule [data-memory-meta][hidden],
html body .app-shell .full-memory-capsule .memory-capsule-detail-chip:empty,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-chip:empty {
  display: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-title-block,
html body main.app-shell .full-memory-capsule .memory-capsule-title-block {
  align-content: end !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-brand,
html body main.app-shell .full-memory-capsule .memory-capsule-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-privacy,
html body main.app-shell .full-memory-capsule .memory-capsule-privacy {
  padding-left: 8px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.34) !important;
  color: rgba(244, 255, 251, 0.76) !important;
  font-size: 0.59rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.025em !important;
  text-transform: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-memory-seal,
html body main.app-shell .full-memory-capsule .memory-capsule-memory-seal {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  gap: 7px !important;
  color: rgba(246, 255, 252, 0.88) !important;
  font-size: clamp(0.72rem, 1.8vw, 0.82rem) !important;
  font-weight: 680 !important;
  line-height: 1.4 !important;
  text-wrap: balance !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-memory-seal svg,
html body main.app-shell .full-memory-capsule .memory-capsule-memory-seal svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

/* Keep the photographed state exactly as spacious and cinematic as v5. */
html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero {
  min-height: clamp(360px, 56vh, 500px) !important;
}

/*
 * No-photo memories are a branded keepsake, not an empty photo frame. The
 * shorter stage gives the story more room while the larger, higher Mappi
 * remains clearly separate from the lower title block.
 */
html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero {
  min-height: clamp(310px, 43vh, 390px) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-visual-shade,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-visual-shade {
  background:
    linear-gradient(180deg, rgba(2, 27, 35, 0.14) 0%, rgba(2, 27, 35, 0.015) 42%, rgba(2, 27, 35, 0.09) 58%, rgba(2, 27, 35, 0.76) 100%),
    linear-gradient(90deg, rgba(2, 27, 35, 0.08), transparent 58%) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero {
  padding-top: 76px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-blur,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-blur {
  top: 38% !important;
  width: min(76%, 500px) !important;
  opacity: 0.24 !important;
  filter: blur(24px) saturate(0.86) !important;
  transform: translate(-50%, -50%) scale(1.22) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-focus,
html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-focus {
  top: 37% !important;
  width: min(50%, 270px) !important;
  max-height: 68% !important;
  opacity: 0.98 !important;
  transform: translate(-50%, -50%) !important;
}

/* The close control keeps its restrained visual weight but meets 44px touch. */
html body .app-shell .memory-sheet-card.full-memory-capsule .sheet-close-button.sheet-mappi-close.memory-capsule-close,
html body main.app-shell .memory-sheet-card.full-memory-capsule .sheet-close-button.sheet-mappi-close.memory-capsule-close {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-close:focus-visible,
html body main.app-shell .full-memory-capsule .memory-capsule-close:focus-visible,
html body .app-shell .full-memory-capsule .memory-capsule-dock-action:focus-visible,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action:focus-visible {
  outline: 3px solid rgba(120, 234, 205, 0.76) !important;
  outline-offset: 2px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary {
  justify-content: center !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #075263 0%, #07877d 58%, #19aa76 100%) !important;
  box-shadow: 0 10px 24px rgba(4, 105, 97, 0.22) !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary > span:last-child,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary > span:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary strong,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary strong {
  line-height: 1 !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary:hover,
html body main.app-shell .full-memory-capsule .memory-capsule-dock-action.memory-capsule-relive-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 13px 28px rgba(4, 105, 97, 0.26) !important;
}

html body .app-shell .full-memory-capsule.is-reliving-in-place,
html body main.app-shell .full-memory-capsule.is-reliving-in-place {
  animation: memory-capsule-relive-glow 900ms ease both !important;
}

@keyframes memory-capsule-relive-glow {
  0%, 100% {
    filter: none;
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(90, 226, 187, 0.34));
  }
}

html body .app-shell .full-memory-capsule .memory-capsule-story.is-empty-story,
html body main.app-shell .full-memory-capsule .memory-capsule-story.is-empty-story {
  padding-bottom: 16px !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-add-story,
html body main.app-shell .full-memory-capsule .memory-capsule-add-story {
  width: fit-content !important;
  min-height: 44px !important;
  margin-top: 10px !important;
  padding: 8px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(7, 113, 105, 0.28) !important;
  border-radius: 0 !important;
  color: #08756d !important;
  background: transparent !important;
  font-weight: 820 !important;
}

/* Detail facts wrap as quiet chips instead of becoming a hidden horizontal row. */
html body .app-shell .full-memory-capsule .memory-capsule-detail-line,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line,
html body .app-shell .full-memory-capsule .memory-capsule-detail-chips,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: 100% !important;
  padding: 13px 0 18px !important;
  gap: 7px !important;
  overflow: visible !important;
  border-top: 1px solid rgba(7, 63, 82, 0.075) !important;
  background: transparent !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-detail-line > span,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-line > span,
html body .app-shell .full-memory-capsule .memory-capsule-detail-chips > span,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-chips > span,
html body .app-shell .full-memory-capsule .memory-capsule-detail-chip,
html body main.app-shell .full-memory-capsule .memory-capsule-detail-chip {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  gap: 6px !important;
  overflow-wrap: anywhere !important;
  border: 1px solid rgba(7, 78, 79, 0.075) !important;
  border-radius: 999px !important;
  color: rgba(7, 63, 82, 0.72) !important;
  background: rgba(255, 255, 255, 0.58) !important;
  font-size: 0.7rem !important;
  font-weight: 720 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

/* Hooks for app.js to remove unavailable directions without a dead gap. */
html body .app-shell .full-memory-capsule .memory-capsule-direction-actions[hidden],
html body main.app-shell .full-memory-capsule .memory-capsule-direction-actions[hidden],
html body .app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless .memory-capsule-direction-actions,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless .memory-capsule-direction-actions,
html body .app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route .memory-capsule-direction-actions,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route .memory-capsule-direction-actions,
html body .app-shell .full-memory-capsule.is-locationless .memory-capsule-direction-actions,
html body main.app-shell .full-memory-capsule.is-locationless .memory-capsule-direction-actions,
html body .app-shell .full-memory-capsule.has-no-route .memory-capsule-direction-actions,
html body main.app-shell .full-memory-capsule.has-no-route .memory-capsule-direction-actions {
  display: none !important;
}

html body .app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
html body .app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route,
html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route,
html body .app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
html body main.app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
html body .app-shell .full-memory-capsule.has-no-route .memory-capsule-action-dock,
html body main.app-shell .full-memory-capsule.has-no-route .memory-capsule-action-dock {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/*
 * Compact-width and touch-tablet dock: directions live on a calm primary
 * row; the three memory controls share an equal secondary row. This is
 * intentionally width-stable when an iPad rotates.
 */
@media (max-width: 720px),
  (min-width: 721px) and (max-width: 1180px),
  (min-width: 721px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  html body .app-shell .full-memory-capsule .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    padding: 10px clamp(10px, 2vw, 16px) max(12px, env(safe-area-inset-bottom)) !important;
    gap: 7px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-direction-actions,
  html body main.app-shell .full-memory-capsule .memory-capsule-direction-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(76px, 0.34fr) !important;
    gap: 7px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body .app-shell .full-memory-capsule .memory-capsule-edit-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-edit-action,
  html body .app-shell .full-memory-capsule .memory-capsule-more,
  html body main.app-shell .full-memory-capsule .memory-capsule-more {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-heart-action,
  html body .app-shell .full-memory-capsule .memory-capsule-edit-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-edit-action,
  html body .app-shell .full-memory-capsule .memory-capsule-more-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-more-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 19px 13px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 4px !important;
    gap: 4px !important;
    place-items: center !important;
    border-radius: 15px !important;
    font-size: 0.62rem !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-more-action::after,
  html body main.app-shell .full-memory-capsule .memory-capsule-more-action::after {
    color: inherit !important;
    content: "More" !important;
    font-size: 0.62rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-walk-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-walk-action {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 11px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-walk-action > span:last-child,
  html body main.app-shell .full-memory-capsule .memory-capsule-walk-action > span:last-child {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.is-locationless,
  html body .app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route,
  html body main.app-shell .full-memory-capsule .memory-capsule-action-dock.has-no-route,
  html body .app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule.is-locationless .memory-capsule-action-dock,
  html body .app-shell .full-memory-capsule.has-no-route .memory-capsule-action-dock,
  html body main.app-shell .full-memory-capsule.has-no-route .memory-capsule-action-dock {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Phones keep the no-photo stage compact while making Mappi more present. */
@media (max-width: 720px) {
  html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
  html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero {
    min-height: clamp(340px, 52dvh, 460px) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero {
    min-height: clamp(300px, 43dvh, 360px) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-blur,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-blur {
    top: 36% !important;
    width: min(92%, 390px) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-focus,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-mappi-focus {
    top: 35% !important;
    width: min(58%, 220px) !important;
    max-height: 66% !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero {
    padding: 74px 18px 20px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-body,
  html body main.app-shell .full-memory-capsule .memory-capsule-body {
    padding-inline: 18px !important;
  }
}

/* A single tablet composition survives portrait/landscape rotation. */
@media (min-width: 721px) and (max-width: 1180px),
  (min-width: 721px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  html body .app-shell .memory-bottom-sheet.open,
  html body main.app-shell .memory-bottom-sheet.open {
    place-items: center !important;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  }

  html body .app-shell .memory-bottom-sheet.open #memorySheetContent,
  html body main.app-shell .memory-bottom-sheet.open #memorySheetContent {
    width: min(790px, calc(100vw - 28px)) !important;
    max-width: 790px !important;
    max-height: calc(100dvh - 28px) !important;
  }

  html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
  html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.full-memory-capsule,
  html body .app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule,
  html body main.app-shell .memory-bottom-sheet.open .memory-sheet-card.memory-capsule-card.full-memory-capsule {
    max-width: 790px !important;
    max-height: calc(100dvh - 28px) !important;
    border-radius: 30px !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual {
    border-radius: 29px 29px 0 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo,
  html body .app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.has-cover-photo .memory-capsule-hero {
    min-height: clamp(370px, 50dvh, 490px) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric,
  html body .app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-visual.is-atmospheric .memory-capsule-hero {
    min-height: clamp(320px, 41dvh, 390px) !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-hero,
  html body main.app-shell .full-memory-capsule .memory-capsule-hero {
    padding: 90px 28px 28px !important;
    border-radius: 0 !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-body,
  html body main.app-shell .full-memory-capsule .memory-capsule-body {
    padding-inline: 28px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .full-memory-capsule.is-reliving-in-place,
  html body main.app-shell .full-memory-capsule.is-reliving-in-place {
    animation: none !important;
  }

  html body .app-shell .full-memory-capsule .memory-capsule-close,
  html body main.app-shell .full-memory-capsule .memory-capsule-close,
  html body .app-shell .full-memory-capsule .memory-capsule-dock-action,
  html body main.app-shell .full-memory-capsule .memory-capsule-dock-action {
    transition: none !important;
  }
}