/* Build 727: desktop Life Chapter controls live outside the cards.
   The shelf markup is already ordered previous / row / next, so a three-column
   lane keeps both 44px controls in dedicated gutters without covering a cover,
   title, or the first/last snap position. */
@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-shelf,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-shelf {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    column-gap: clamp(9px, 1.2vw, 14px) !important;
    overflow: visible !important;
  }

  /* Earlier presentation layers used fades and absolutely positioned arrows
     over the first and last cards. Neither is needed with real control lanes. */
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-shelf::before,
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-shelf::after,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-shelf::before,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-shelf::after {
    display: none !important;
    content: none !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-row,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-row {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 1px 12px !important;
    scroll-padding-inline: 1px !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1 !important;
    display: inline-grid !important;
    place-items: center !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 0 3px !important;
    border: 1px solid rgba(8, 92, 105, 0.16) !important;
    border-radius: 999px !important;
    color: #07576a !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(229, 246, 240, 0.88)) !important;
    box-shadow:
      0 9px 20px rgba(4, 67, 78, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 1.55rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    transform: none !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll.prev,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll.prev {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll.next,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll.next {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll:hover,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll:hover {
    color: #043f52 !important;
    background: linear-gradient(145deg, #ffffff, #dff6ec) !important;
    box-shadow:
      0 12px 24px rgba(4, 67, 78, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
    transform: translateY(-1px) !important;
  }

  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll:focus-visible,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll:focus-visible {
    outline: 3px solid rgba(85, 226, 187, 0.62) !important;
    outline-offset: 2px !important;
  }
}

/* Preserve the established one-card, direct-swipe phone carousel. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell .map-stage.home-focus #homeJourney .life-chapter-scroll,
  html body main.app-shell section.map-stage.home-focus #homeJourney .life-chapter-scroll {
    transition: none !important;
  }
}