/* Mobile polish based on the July 13 walkthrough recording. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body .app-shell .map-stage.home-focus .topbar,
  html body .app-shell .map-stage.map-focus .topbar,
  html body .app-shell .map-stage.memories-focus .topbar,
  html body main.app-shell section.map-stage.home-focus .topbar,
  html body main.app-shell section.map-stage.map-focus .topbar,
  html body main.app-shell section.map-stage.memories-focus .topbar {
    top: max(10px, calc(env(safe-area-inset-top) + 8px)) !important;
  }

  html body .app-shell .map-stage.home-focus .topbar .topbar-left,
  html body .app-shell .map-stage.home-focus .topbar .topbar-actions,
  html body .app-shell .map-stage.map-focus .topbar .topbar-left,
  html body .app-shell .map-stage.map-focus .topbar .topbar-actions,
  html body .app-shell .map-stage.memories-focus .topbar .topbar-left,
  html body .app-shell .map-stage.memories-focus .topbar .topbar-actions,
  html body main.app-shell section.map-stage.home-focus .topbar .topbar-left,
  html body main.app-shell section.map-stage.home-focus .topbar .topbar-actions,
  html body main.app-shell section.map-stage.map-focus .topbar .topbar-left,
  html body main.app-shell section.map-stage.map-focus .topbar .topbar-actions,
  html body main.app-shell section.map-stage.memories-focus .topbar .topbar-left,
  html body main.app-shell section.map-stage.memories-focus .topbar .topbar-actions {
    gap: 5px !important;
    padding: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13) !important;
    filter: none !important;
  }

  html body .app-shell .topbar #categoryMenuButton,
  html body .app-shell .topbar #logoHomeButton,
  html body .app-shell .topbar #pinSearchButton,
  html body .app-shell .topbar #notificationButton,
  html body main.app-shell .topbar #categoryMenuButton,
  html body main.app-shell .topbar #logoHomeButton,
  html body main.app-shell .topbar #pinSearchButton,
  html body main.app-shell .topbar #notificationButton {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    filter: none !important;
  }

  html body .app-shell .topbar #categoryMenuButton::before,
  html body .app-shell .topbar #categoryMenuButton::after,
  html body .app-shell .topbar #logoHomeButton::before,
  html body .app-shell .topbar #logoHomeButton::after,
  html body .app-shell .topbar #pinSearchButton::before,
  html body .app-shell .topbar #pinSearchButton::after {
    box-shadow: none !important;
    filter: none !important;
  }

  html body .app-shell .topbar #categoryMenuButton,
  html body .app-shell .topbar #pinSearchButton,
  html body .app-shell .topbar #notificationButton,
  html body main.app-shell .topbar #categoryMenuButton,
  html body main.app-shell .topbar #pinSearchButton,
  html body main.app-shell .topbar #notificationButton {
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    text-align: center !important;
    text-indent: 0 !important;
  }

  html body .app-shell .topbar #categoryMenuButton > [data-icon],
  html body .app-shell .topbar #pinSearchButton > [data-icon],
  html body .app-shell .topbar #notificationButton > [data-icon],
  html body .app-shell .topbar #categoryMenuButton > svg,
  html body .app-shell .topbar #pinSearchButton > svg,
  html body .app-shell .topbar #notificationButton > svg,
  html body main.app-shell .topbar #categoryMenuButton > [data-icon],
  html body main.app-shell .topbar #pinSearchButton > [data-icon],
  html body main.app-shell .topbar #notificationButton > [data-icon] {
    position: static !important;
    inset: auto !important;
    display: block !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body .app-shell .map-stage.memories-focus .topbar,
  html body main.app-shell section.map-stage.memories-focus .topbar {
    z-index: 1600 !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-database-page.side-panel,
  html body main.app-shell section.map-stage.memories-focus .memory-database-page.side-panel {
    z-index: 80 !important;
    scroll-padding-top: calc(env(safe-area-inset-top) + 86px) !important;
    padding-bottom: calc(var(--bottom-nav-height, 78px) + env(safe-area-inset-bottom) + 42px) !important;
  }

  html body .app-shell .map-stage.memories-focus .memory-journal-list,
  html body main.app-shell section.map-stage.memories-focus .memory-journal-list {
    gap: 14px !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card {
    min-height: 0 !important;
    border: 1px solid rgba(15, 91, 87, 0.11) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255, 254, 250, 0.98), rgba(237, 250, 245, 0.96)) !important;
    box-shadow: 0 14px 32px rgba(7, 55, 62, 0.12) !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-main,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-main {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    grid-template-areas:
      "cover copy"
      "actions actions" !important;
    align-items: center !important;
    gap: 12px 14px !important;
    min-height: 0 !important;
    padding: 13px !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-cover,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-cover {
    grid-area: cover !important;
    width: 104px !important;
    height: 104px !important;
    min-width: 104px !important;
    min-height: 104px !important;
    max-width: 104px !important;
    max-height: 104px !important;
    border-radius: 19px !important;
    box-shadow: none !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy {
    grid-area: copy !important;
    align-content: center !important;
    gap: 5px !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy strong,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy strong {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 1.02rem !important;
    line-height: 1.14 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy small,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy small {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.73rem !important;
    line-height: 1.3 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-mini-meta {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-action-dock,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-lane-action-dock {
    grid-area: actions !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 0 !important;
    border-top: 1px solid rgba(13, 89, 85, 0.1) !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-actions,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-actions {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 100% !important;
    justify-self: stretch !important;
    flex-wrap: nowrap !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action {
    flex: 0 1 74px !important;
    min-width: 0 !important;
    min-height: 39px !important;
    padding: 8px 10px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.primary,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.primary {
    flex: 1 1 126px !important;
    max-width: 164px !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.primary small,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.primary small {
    display: none !important;
  }

  html body .app-shell .map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.needs-location,
  html body main.app-shell section.map-stage.memories-focus article.memory-card.rich.memory-lane-card .memory-card-action.needs-location {
    order: -1 !important;
    flex: 1 0 100% !important;
    max-width: none !important;
  }

  html body .app-shell .bottom-nav,
  html body main.app-shell .bottom-nav {
    z-index: 1700 !important;
  }
}