/* Build 664: restore the centered empty-Home storytelling system and keep
   Memory Lane discovery controls in natural document flow. This file loads
   last so older responsive layers cannot reintroduce either regression. */

/* Empty Home section headers share one centered chip and icon geometry. */
html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading {
  display: grid !important;
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading .home-section-title,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading .home-section-title {
  display: inline-grid !important;
  grid-template-columns: 38px auto !important;
  align-items: center !important;
  justify-self: center !important;
  width: auto !important;
  min-height: 48px !important;
  gap: 9px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading .section-title-icon,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home .home-section-heading .section-title-icon {
  box-sizing: border-box !important;
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  justify-self: center !important;
  align-self: center !important;
}

/* All three zero-memory previews use illustration -> centered copy. */
html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-feature-card.is-empty,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-feature-card.is-empty {
  display: grid !important;
  grid-template-areas:
    "art"
    "copy" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 10px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-body,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-body {
  display: contents !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit {
  grid-area: art !important;
  justify-self: center !important;
  width: 84px !important;
  min-width: 84px !important;
  max-width: 84px !important;
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  margin: 0 auto !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 5px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main > *,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-copy-main > * {
  justify-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty.premium-empty-preview,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty.premium-empty-preview {
  display: grid !important;
  grid-template-areas:
    "book"
    "copy" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 10px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-starter-book,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-starter-book {
  grid-area: book !important;
  justify-self: center !important;
  align-self: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 0 auto !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty-copy,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty-copy {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 5px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty-copy > *,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-empty-copy > * {
  justify-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-memories-empty.premium-empty-preview {
  display: grid !important;
  grid-template-areas:
    "timeline"
    "copy" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: 224px !important;
  padding: 24px 28px !important;
  gap: 10px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
  grid-area: timeline !important;
  justify-self: center !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  margin: 0 auto !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy {
  grid-area: copy !important;
  display: grid !important;
  justify-self: center !important;
  justify-items: center !important;
  width: min(100%, 590px) !important;
  max-width: 590px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  gap: 5px !important;
  text-align: center !important;
}

html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > *,
html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-copy > * {
  justify-self: center !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center !important;
  text-wrap: balance !important;
}

@media (max-width: 760px) {
  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home :is(
    #homeOnThisDay .memory-echo-feature-card.is-empty,
    #homeJourney .life-chapter-empty.premium-empty-preview,
    #homeTimelineStrip .recent-memories-empty.premium-empty-preview
  ),
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home :is(
    #homeOnThisDay .memory-echo-feature-card.is-empty,
    #homeJourney .life-chapter-empty.premium-empty-preview,
    #homeTimelineStrip .recent-memories-empty.premium-empty-preview
  ) {
    min-height: 210px !important;
    padding: 20px 18px !important;
    border-radius: 22px !important;
    gap: 8px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeOnThisDay .memory-echo-empty-orbit {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
  }

  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-starter-book,
  html body .app-shell .map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeJourney .life-chapter-starter-book,
  html body main.app-shell section.map-stage.home-focus #homeDashboard.is-empty-home #homeTimelineStrip .recent-empty-timeline {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
  }
}

/* Memory Lane's title and search belong to the archive's first screen. They
   scroll away with the cards instead of condensing or following the user. */
html body .app-shell .map-stage.memories-focus .memory-database-page.side-panel > .panel-section.memory-lane-toolbar,
html body main.app-shell > section.map-stage.memories-focus > section.memory-database-page.side-panel > .panel-section.memory-lane-toolbar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
}

html body .app-shell .map-stage.memories-focus .memory-database-page .memory-hub-heading,
html body .app-shell .map-stage.memories-focus .memory-database-page.is-search-condensed .memory-hub-heading,
html body main.app-shell section.map-stage.memories-focus .memory-database-page .memory-hub-heading,
html body main.app-shell section.map-stage.memories-focus .memory-database-page.is-search-condensed .memory-hub-heading {
  min-height: 0 !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

html body .app-shell .map-stage.memories-focus .memory-database-page.is-search-condensed .memory-lane-toolbar,
html body main.app-shell section.map-stage.memories-focus .memory-database-page.is-search-condensed .memory-lane-toolbar {
  gap: 12px !important;
}

/* A rotated touch iPad is wider than the original tablet breakpoint. Keep the
   primary navigation fixed and visible so the Explore invitation and map
   gadget retain the same protected lanes they use in portrait. */
@media (hover: none) and (pointer: coarse) and (min-width: 1025px) and (max-width: 1600px) {
  html body .app-shell .bottom-nav,
  html body main.app-shell .bottom-nav {
    position: fixed !important;
    top: auto !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: max(18px, env(safe-area-inset-left)) !important;
    z-index: 1600 !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 1160px !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible {
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 22px) !important;
  }

  html body .app-shell section.map-stage.map-focus .map-navigation-gadget,
  html body main.app-shell section.map-stage.map-focus .map-navigation-gadget {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 20px) !important;
  }
}

/* Desktop navigation rests slightly above the window edge. Give the gadget a
   visibly separate lane instead of letting the two shadows touch. The :has()
   form intentionally outranks the older empty-map exception. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible {
    bottom: calc(var(--bottom-nav-height, 78px) + 58px) !important;
  }

  html body .app-shell section.map-stage.map-focus .map-navigation-gadget,
  html body main.app-shell section.map-stage.map-focus .map-navigation-gadget,
  html body:has(#mapEmptyState.is-visible) .app-shell section.map-stage.map-focus .map-navigation-gadget,
  html body:has(#mapEmptyState.is-visible) main.app-shell section.map-stage.map-focus .map-navigation-gadget {
    position: fixed !important;
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: calc(var(--bottom-nav-height, 78px) + 58px) !important;
  }
}