/* Launch refinements reuse the navy/mint identity and existing modal structure. */
html body .first-time-onboarding-card {
  min-height: 0; max-height: calc(100dvh - 48px); overflow-y: auto;
  width: min(100%, 470px); color: #00243f; background: #f8fbfc;
  animation-duration: 220ms; overscroll-behavior: contain;
}
html body .first-time-onboarding-visual { height: clamp(100px, 20vh, 174px); background: #00243f; }
html body .first-time-onboarding-visual::before { display: none; }
html body .first-time-onboarding-visual img { max-height: 100%; width: 140px; }
html body .first-time-onboarding .first-time-onboarding-progress { display: grid !important; grid-template-columns: 1fr; align-self: center; min-height: 18px; }
html body .first-time-onboarding-progress span.is-active { background: #78dcca; }
html body .first-time-onboarding-eyebrow, html body .first-time-onboarding-mark { color: #00243f; }
html body .first-time-onboarding-close { width: 44px; height: 44px; z-index: 2; }
html body .first-time-onboarding-assurance { color: #00243f; background: #e2f5f0; }
html body .first-time-onboarding-primary, html body #firstTimeOnboardingPrimary { background: #00243f; color: #fff; }
html body .first-time-onboarding button:focus-visible, html body .journey-summary button:focus-visible { outline: 3px solid #287caa; outline-offset: 3px; }
html body #mapEmptyState button { min-height: 44px; padding: 10px 16px; border-radius: 16px; background: #00243f; color: #fff; border: 0; font: inherit; font-weight: 700; pointer-events: auto; }
html body #mapEmptyState { pointer-events: none; }
html body #mapEmptyState[hidden] { display: none !important; }
/* The invitation gained a real action, but the old two-row notice grid still
   clipped it into the mascot column. Reserve a full row and let content size
   the card; the shared Explore lane continues to own its screen position. */
html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible {
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas: "mascot title" "mascot copy" "action action" !important;
  height: auto !important;
  max-height: none !important;
  gap: 6px 12px !important;
}
html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > img { grid-area: mascot !important; }
html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > strong { grid-area: title !important; }
html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > span {
  grid-area: copy !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}
html body main.app-shell section.map-stage.map-focus #mapEmptyState.map-empty-state.is-visible > button {
  grid-area: action !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 44px !important;
  margin: 4px 0 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  html body:has(#mapEmptyState.map-empty-state.is-visible:not([hidden])) main.app-shell section.map-stage.map-focus .map-navigation-gadget {
    bottom: calc(var(--explore-notice-center-bottom) + var(--first-map-invitation-height, 156px) + 12px) !important;
  }
}
@media (prefers-reduced-motion: reduce) { html body .first-time-onboarding-card { animation: none; } }
@media (max-height: 550px) { html body .first-time-onboarding-visual { display: none; } }

/* Journey keeps the established navy/mint surfaces and system typography. */
.home-journey-recap-entry { margin: 24px auto; width: min(100%, 600px); }
.journey-recap-dialog { box-sizing: border-box; width: min(560px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid #446378; border-radius: 24px; background: #00243f; color: #f4faf9; overflow-y: auto; overscroll-behavior: contain; }
.journey-recap-dialog::backdrop { background: rgb(0 20 36 / .64); }
.journey-recap-dialog header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.journey-recap-dialog header small { color: #78dcca; letter-spacing: .1em; font-size: .7rem; }
.journey-recap-dialog h2 { margin: 8px 0 0; color: #fff; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.15; }
.journey-recap-dialog h3 { color: #fff; font-size: 1.7rem; margin: 24px 0; }
.journey-recap-dialog p { color: #c4d8e1; font-size: .875rem; line-height: 1.6; }
.journey-recap-dialog button, .journey-recap-dialog select { box-sizing: border-box; min-height: 48px; border: 1px solid #78dcca; border-radius: 14px; background: #78dcca; color: #00243f; padding: 12px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.journey-recap-dialog button:focus-visible, .journey-recap-dialog select:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.journey-recap-dialog button:disabled { opacity: .55; cursor: default; }
.journey-recap-dialog header button { flex: 0 0 48px; padding: 0; font-size: 1.6rem; background: transparent; color: white; }
.journey-recap-dialog select { display: block; width: 100%; margin: 8px 0; background: #12364e; color: #fff; }
.journey-recap-dialog dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.journey-recap-dialog dl div { padding: 16px 12px; background: #12364e; border-radius: 16px; }
.journey-recap-dialog dd { margin: 0; font-size: 1.8rem; font-weight: 750; color: #78dcca; }
.journey-recap-dialog dt { color: #d7e6ed; font-size: .82rem; margin-top: 4px; }
.journey-recap-dialog img { display: block; width: min(100%, 270px); height: auto; margin: 16px auto; border: 1px solid #446378; border-radius: 12px; }
.journey-recap-dialog [hidden] { display: none !important; }

/* A calm, in-flow monthly review. Scope separately from location permission UI. */
#journeyRecapDialog {
  width: min(600px, calc(100vw - 24px)); padding: 0; margin: auto;
  max-height: calc(var(--mymappi-visible-height, 100dvh) - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  background: #f5fafc; color: #00243f; border-color: #d4e2e9;
  text-align: left; overflow: hidden; box-shadow: 0 24px 64px #00162440;
}
#journeyRecapDialog[open] { display: flex; flex-direction: column; }
#journeyRecapDialog * { box-sizing: border-box; min-width: 0; }
#journeyRecapDialog header { padding: 22px 24px; margin: 0; background: #00243f; flex-shrink: 0; }
#journeyRecapDialog header > div { flex: 1; }
#journeyRecapDialog header button { width: 48px; height: 48px; flex: 0 0 48px; border-color: #78909f; font-size: 28px; line-height: 1; }
#journeyRecapDialog h2 { font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
#journeyRecapDialog .journey-body { padding: 22px 24px 24px; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size; }
#journeyRecapDialog label { display: block; font-size: .8125rem; font-weight: 700; }
#journeyRecapDialog .journey-month-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch; gap: 8px; margin-top: 8px; }
#journeyRecapDialog .journey-month-nav button { padding: 8px; background: #fff; border-color: #bbcfdc; }
#journeyRecapDialog [data-journey-previous] { grid-column: 1; grid-row: 1; }
#journeyRecapDialog [data-journey-next] { grid-column: 3; grid-row: 1; }
#journeyRecapDialog .journey-month-nav select { grid-column: 2; grid-row: 1; }
#journeyRecapDialog select { margin: 0; background: #fff; color: #00243f; border-color: #bbcfdc; font-size: 1rem; width: 100%; }
#journeyRecapDialog [data-journey-selection] { font-size: .8125rem; margin: 10px 0 0; }
#journeyRecapDialog h3 { color: #00243f; font-size: 1.125rem; margin: 24px 0 12px; }
#journeyRecapDialog .journey-count { font-size: 1.875rem; letter-spacing: -.035em; margin: 24px 0 16px; }
#journeyRecapDialog dl { margin: 0; gap: 10px; }
#journeyRecapDialog dl div { display: flex; flex-direction: column; background: #e6f3f0; border: 1px solid #c9e0db; padding: 14px; }
#journeyRecapDialog dl div:last-child:nth-child(odd) { grid-column: 1 / -1; }
#journeyRecapDialog dt { color: #365564; margin: 0; font-size: .8125rem; line-height: 1.4; }
#journeyRecapDialog dd { color: #00243f; font-size: 1.75rem; order: -1; }
#journeyRecapDialog p { color: #506b7b; overflow-wrap: anywhere; }
#journeyRecapDialog .journey-categories { margin: 14px 0 0; }
#journeyRecapDialog .journey-count-details { margin: 8px 0 0; border-bottom: 1px solid #d4e2e9; }
#journeyRecapDialog summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: .8125rem; color: #365564; }
#journeyRecapDialog .journey-memory-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
#journeyRecapDialog .journey-memory-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; background: #fff; border-color: #d4e2e9; padding: 14px; }
#journeyRecapDialog .journey-memory-list button > span:first-child { flex: 1; }
#journeyRecapDialog .journey-memory-list button > span:last-child { flex: 0 0 auto; }
#journeyRecapDialog .journey-memory-list strong { display: block; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
#journeyRecapDialog .journey-memory-list small { display: block; font-size: .8125rem; color: #506b7b; font-weight: 500; margin-top: 5px; overflow-wrap: anywhere; }
#journeyRecapDialog .journey-show-more { width: 100%; margin-top: 10px; background: transparent; border-color: #bbcfdc; font-size: .875rem; }
#journeyRecapDialog .journey-export { border-top: 1px solid #d4e2e9; margin-top: 24px; padding-top: 20px; }
#journeyRecapDialog [data-journey-prepare], #journeyRecapDialog [data-journey-share] { width: 100%; background: #00243f; border-color: #00243f; color: #fff; }
#journeyRecapDialog [data-journey-prepare] { background: #fff; color: #00243f; border-color: #bbcfdc; }
#journeyRecapDialog .journey-privacy { font-size: .75rem; margin: 12px 0 0; text-align: center; }
#journeyRecapDialog [data-journey-status]:empty { display: none; }
#journeyRecapDialog :is(button, select, summary):focus-visible { outline: 3px solid #287e9a; outline-offset: 3px; }
#journeyRecapDialog header button:focus-visible { outline-color: #fff; }
@container (max-width: 15rem) {
  #journeyRecapDialog .journey-month-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #journeyRecapDialog .journey-month-nav select { grid-column: 1 / -1; }
  #journeyRecapDialog [data-journey-previous] { grid-column: 1; grid-row: 2; }
  #journeyRecapDialog [data-journey-next] { grid-column: 2; grid-row: 2; }
}
@media (max-width: 400px) {
  #journeyRecapDialog header, #journeyRecapDialog .journey-body { padding: 18px 16px; }
}