/* Build 687: compact premium trip controls and a protected active-trip
   invitation lane beside the Explore gadget. */

/* Home trip controls ----------------------------------------------------- */

html body .app-shell #homeJourney .life-chapter-import-row {
  display: grid !important;
  width: 100% !important;
  justify-items: center !important;
  gap: 8px !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start {
  box-sizing: border-box !important;
  display: grid !important;
  width: min(100%, 252px) !important;
  min-width: 0 !important;
  min-height: 50px !important;
  grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 8px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(8, 120, 109, 0.2) !important;
  border-radius: 18px !important;
  color: #075d61 !important;
  background:
    radial-gradient(circle at 13% 0%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(145deg, rgba(255, 254, 247, 0.99), rgba(235, 249, 242, 0.97)) !important;
  box-shadow:
    0 10px 23px rgba(5, 68, 71, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  font-size: 0.72rem !important;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  place-self: center !important;
  border-radius: 11px !important;
}

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

html body .app-shell #homeJourney .life-chapter-trip-start-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start-arrow {
  width: 16px !important;
  height: 16px !important;
  place-self: center !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start.is-active-trip {
  color: #f7fffc !important;
  border-color: rgba(216, 255, 245, 0.2) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(85, 229, 190, 0.23), transparent 43%),
    linear-gradient(142deg, #0a6670 0%, #0b827d 52%, #149c81 100%) !important;
  box-shadow:
    0 12px 26px rgba(4, 77, 77, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start.is-active-trip .life-chapter-trip-start-icon {
  color: #f7fffc !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start.is-active-trip .life-chapter-trip-start-arrow {
  color: rgba(247, 255, 252, 0.88) !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start:hover,
html body .app-shell #homeJourney .life-chapter-trip-start:focus-visible {
  border-color: rgba(8, 120, 109, 0.34) !important;
  box-shadow:
    0 12px 27px rgba(5, 68, 71, 0.13),
    0 0 0 3px rgba(49, 199, 162, 0.1) !important;
  transform: translateY(-1px) !important;
}

html body .app-shell #homeJourney .life-chapter-trip-start.is-active-trip:hover,
html body .app-shell #homeJourney .life-chapter-trip-start.is-active-trip:focus-visible {
  border-color: rgba(207, 255, 242, 0.38) !important;
  box-shadow:
    0 14px 29px rgba(4, 77, 77, 0.24),
    0 0 0 3px rgba(49, 199, 162, 0.1) !important;
}

html body .app-shell #homeJourney .life-chapter-trip-active-actions {
  box-sizing: border-box !important;
  display: grid !important;
  width: min(100%, 380px) !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) 92px !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 auto !important;
}

html body .app-shell #homeJourney .life-chapter-trip-active-actions .life-chapter-trip-start {
  width: 100% !important;
  max-width: none !important;
}

html body .app-shell #homeJourney .life-chapter-trip-end {
  box-sizing: border-box !important;
  display: inline-grid !important;
  min-width: 0 !important;
  min-height: 50px !important;
  grid-template-columns: 16px auto !important;
  place-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 9px !important;
  border: 1px solid rgba(8, 107, 104, 0.17) !important;
  border-radius: 18px !important;
  color: #496f71 !important;
  background: linear-gradient(145deg, rgba(255, 254, 249, 0.98), rgba(242, 248, 244, 0.96)) !important;
  box-shadow:
    0 9px 20px rgba(4, 61, 67, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  font: inherit !important;
  font-size: 0.61rem !important;
  font-weight: 790 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease !important;
}

html body .app-shell #homeJourney .life-chapter-trip-end > svg,
html body .app-shell #homeJourney .life-chapter-trip-end > [data-icon] svg {
  width: 16px !important;
  height: 16px !important;
  color: #d66d69 !important;
}

html body .app-shell #homeJourney .life-chapter-trip-end:hover,
html body .app-shell #homeJourney .life-chapter-trip-end:focus-visible {
  border-color: rgba(201, 103, 101, 0.3) !important;
  color: #87504f !important;
  box-shadow:
    0 11px 23px rgba(4, 61, 67, 0.1),
    0 0 0 3px rgba(214, 109, 105, 0.08) !important;
  transform: translateY(-1px) !important;
}

html body .app-shell #homeJourney .life-chapter-empty-copy .life-chapter-trip-active-actions {
  margin-top: 13px !important;
}

html body .app-shell #homeJourney .life-chapter-trip-import-quiet {
  min-height: 44px !important;
  padding: 8px 13px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #5d7a7d !important;
  background: transparent !important;
  font: inherit !important;
  font-size: 0.64rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

html body .app-shell #homeJourney .life-chapter-trip-import-quiet:hover,
html body .app-shell #homeJourney .life-chapter-trip-import-quiet:focus-visible {
  color: #0a746f !important;
  background: rgba(225, 245, 237, 0.74) !important;
  outline: none !important;
}

/* The active trip's zero-moment invitation shares a baseline with the
   navigation gadget and always reserves the gadget's complete footprint. */
html body .app-shell section.map-stage.map-focus {
  --trip-empty-left: max(16px, env(safe-area-inset-left, 0px));
  --trip-empty-right: max(18px, env(safe-area-inset-right, 0px));
  --trip-empty-bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom, 0px) + 22px);
  --trip-empty-gadget-reserve: 112px;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty,
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty {
  position: fixed !important;
  top: auto !important;
  right: calc(var(--trip-empty-right) + var(--trip-empty-gadget-reserve)) !important;
  bottom: var(--trip-empty-bottom) !important;
  left: auto !important;
  z-index: 716 !important;
  box-sizing: border-box !important;
  width: min(430px, calc(100vw - var(--trip-empty-left) - var(--trip-empty-right) - var(--trip-empty-gadget-reserve))) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  min-height: 92px !important;
  max-height: 100px !important;
  padding: 10px 12px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  column-gap: 10px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  text-align: left !important;
  translate: none !important;
  transform: none !important;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > img,
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > img {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > strong,
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  font-size: clamp(0.75rem, 0.71rem + 0.14vw, 0.84rem) !important;
  line-height: 1.16 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span,
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span {
  font-size: clamp(0.61rem, 0.58rem + 0.12vw, 0.69rem) !important;
  line-height: 1.24 !important;
  -webkit-line-clamp: 2 !important;
}

html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty::after,
html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty::after {
  top: auto !important;
  right: -7px !important;
  bottom: 35px !important;
  left: auto !important;
  transform: rotate(-45deg) !important;
}

html body:has(#mapEmptyState.is-visible.is-active-trip-empty) .app-shell section.map-stage.map-focus .map-navigation-gadget,
html body:has(#mapEmptyState.is-visible.is-active-trip-empty) main.app-shell section.map-stage.map-focus .map-navigation-gadget {
  right: var(--trip-empty-right) !important;
  bottom: var(--trip-empty-bottom) !important;
}

@media (max-width: 720px) {
  html body .app-shell #homeJourney .life-chapter-trip-start {
    min-height: 50px !important;
  }

  html body .app-shell #homeJourney .life-chapter-trip-active-actions {
    width: min(100%, 350px) !important;
    grid-template-columns: minmax(0, 1fr) 86px !important;
  }

  html body .app-shell #homeJourney .life-chapter-trip-end {
    min-height: 50px !important;
    padding-inline: 7px !important;
    gap: 5px !important;
    font-size: 0.59rem !important;
  }

  html body .app-shell section.map-stage.map-focus {
    --trip-empty-left: max(14px, env(safe-area-inset-left, 0px));
    --trip-empty-right: max(14px, env(safe-area-inset-right, 0px));
    --trip-empty-bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 20px);
    --trip-empty-gadget-reserve: 112px;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty {
    right: calc(var(--trip-empty-right) + var(--trip-empty-gadget-reserve)) !important;
    left: var(--trip-empty-left) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 360px) {
  html body .app-shell #homeJourney .life-chapter-trip-active-actions {
    grid-template-columns: minmax(0, 1fr) 80px !important;
    gap: 6px !important;
  }

  html body .app-shell #homeJourney .life-chapter-trip-end {
    grid-template-columns: 14px auto !important;
    font-size: 0.56rem !important;
  }

  html body .app-shell #homeJourney .life-chapter-trip-end > svg,
  html body .app-shell #homeJourney .life-chapter-trip-end > [data-icon] svg {
    width: 14px !important;
    height: 14px !important;
  }

  html body .app-shell section.map-stage.map-focus {
    --trip-empty-left: max(12px, env(safe-area-inset-left, 0px));
    --trip-empty-right: max(12px, env(safe-area-inset-right, 0px));
    --trip-empty-gadget-reserve: 106px;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    min-height: 92px !important;
    padding: 9px !important;
    column-gap: 8px !important;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > img,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > img {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > strong,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > strong {
    font-size: 0.7rem !important;
  }

  html body .app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span,
  html body main.app-shell section.map-stage.map-focus #mapEmptyState.is-visible.is-active-trip-empty > span {
    font-size: 0.57rem !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 960px) {
  html body .app-shell section.map-stage.map-focus {
    --trip-empty-bottom: calc(var(--bottom-nav-height, 68px) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  html body .app-shell section.map-stage.map-focus {
    --trip-empty-bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom, 0px) + 58px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell #homeJourney .life-chapter-trip-start,
  html body .app-shell #homeJourney .life-chapter-trip-end {
    transition: none !important;
  }
}

/* Search chapter scope ---------------------------------------------------- */

/* Search is shared by Home and Explore, so its chapter control cannot depend
   on the map-focus state. Keep the panel above map controls in either view. */
html body .app-shell #pinSearchPanel.pin-search-panel.open,
html body main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
  z-index: 900 !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 12px !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

html body .app-shell #pinSearchPanel .pin-search-results,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-results {
  min-height: 0 !important;
  max-height: min(52vh, 430px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  -webkit-overflow-scrolling: touch !important;
}

html body .app-shell #pinSearchPanel .pin-search-chapter-filter,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter {
  cursor: pointer !important;
  touch-action: manipulation !important;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease !important;
}

html body .app-shell #pinSearchPanel .pin-search-chapter-filter:hover,
html body .app-shell #pinSearchPanel .pin-search-chapter-filter:focus-within,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter:hover,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter:focus-within {
  border-color: rgba(132, 242, 196, 0.44) !important;
  background: rgba(132, 242, 196, 0.1) !important;
  box-shadow:
    0 0 0 3px rgba(132, 242, 196, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body .app-shell #pinSearchPanel .pin-search-chapter-filter.is-filtered,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter.is-filtered {
  border-color: rgba(132, 242, 196, 0.34) !important;
  background:
    linear-gradient(145deg, rgba(132, 242, 196, 0.14), rgba(112, 227, 255, 0.08)) !important;
}

html body .app-shell #pinSearchPanel .pin-search-chapter-copy strong,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy strong {
  font-size: 0.76rem !important;
}

html body .app-shell #pinSearchPanel .pin-search-chapter-copy small,
html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy small {
  font-size: 0.75rem !important;
}

html body .app-shell #pinSearchPanel .map-chapter-selector,
html body main.app-shell section.map-stage #pinSearchPanel .map-chapter-selector {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 46px !important;
  flex: none !important;
  pointer-events: auto !important;
}

html body .app-shell #pinSearchPanel .map-chapter-selector::after,
html body main.app-shell section.map-stage #pinSearchPanel .map-chapter-selector::after {
  position: absolute !important;
  top: 50% !important;
  right: 12px !important;
  color: rgba(229, 255, 248, 0.82) !important;
  content: "⌄" !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  pointer-events: none !important;
  transform: translateY(-56%) !important;
}

html body .app-shell #pinSearchPanel #mapChapterSelector,
html body main.app-shell section.map-stage #pinSearchPanel #mapChapterSelector {
  min-height: 46px !important;
  padding: 9px 34px 9px 13px !important;
  color: #f6fffc !important;
  background-color: rgba(4, 46, 58, 0.88) !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
}

html body .app-shell #pinSearchPanel .chapter-search-result {
  border-color: rgba(132, 242, 196, 0.24) !important;
  background:
    radial-gradient(circle at 7% 10%, rgba(132, 242, 196, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.085) !important;
}

html body .app-shell #pinSearchPanel .chapter-search-result.is-selected {
  border-color: rgba(132, 242, 196, 0.54) !important;
  background:
    linear-gradient(145deg, rgba(132, 242, 196, 0.19), rgba(112, 227, 255, 0.1)) !important;
  box-shadow: inset 3px 0 0 #84f2c4 !important;
}

html body .app-shell #pinSearchPanel .chapter-search-book {
  position: relative !important;
  background: linear-gradient(145deg, #b7f7d8, #77dfcc) !important;
}

html body .app-shell #pinSearchPanel .chapter-search-book i {
  position: relative !important;
  display: block !important;
  width: 22px !important;
  height: 18px !important;
  border: 2px solid rgba(5, 65, 69, 0.82) !important;
  border-radius: 4px 7px 7px 4px !important;
  background: rgba(255, 255, 255, 0.58) !important;
  box-shadow: inset 4px 0 0 rgba(5, 65, 69, 0.16) !important;
}

html body .app-shell #pinSearchPanel .pin-search-result-scope {
  color: #b7f7d8 !important;
  font-size: 0.65rem !important;
  font-weight: 820 !important;
}

@media (max-width: 820px), (hover: none) and (pointer: coarse) {
  html body .app-shell #pinSearchPanel.pin-search-panel.open,
  html body main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
    max-height: min(
      72dvh,
      calc(100dvh - var(--bottom-nav-height, 84px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 88px),
      620px
    ) !important;
    gap: 10px !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-results,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-results {
    min-height: 96px !important;
    max-height: none !important;
  }

  html body .app-shell #pinSearchPanel #mapChapterSelector,
  html body main.app-shell section.map-stage #pinSearchPanel #mapChapterSelector {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-chapter-copy small,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy small {
    font-size: 0.76rem !important;
    white-space: normal !important;
  }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 960px) {
  html body .app-shell #pinSearchPanel.pin-search-panel.open,
  html body main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px) !important;
  }
}