/* Final phone reliability pass: keep Memory Lane cards readable and self-contained. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card,
  html body .app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-flashcard-main,
  html body .app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-flashcard-main {
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "cover copy"
      "actions actions" !important;
    align-items: center !important;
    gap: 11px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
  }

  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-cover,
  html body .app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-cover {
    grid-area: cover !important;
    align-self: center !important;
    box-sizing: border-box !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
    aspect-ratio: 1 !important;
  }

  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy,
  html body .app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-flashcard-copy {
    grid-area: copy !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  html body main.app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-action-dock,
  html body .app-shell section.map-stage.memories-focus #memoryList article.memory-card.rich.memory-lane-card .memory-lane-action-dock {
    grid-area: actions !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* A top and bottom anchor together stretched the permission card on phones. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.map-focus #locationBanner.location-banner,
  html body .app-shell section.map-stage.map-focus #locationBanner.location-banner {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: auto !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
  }
}

/* Keep the complete branded header visible on compact 320-340px phones. */
@media (max-width: 350px) {
  html body main.app-shell section.map-stage.home-focus header.topbar,
  html body main.app-shell section.map-stage.map-focus header.topbar,
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar {
    right: max(6px, env(safe-area-inset-right)) !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    grid-template-columns: 82px minmax(0, 112px) 82px !important;
    column-gap: 5px !important;
  }

  html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-left,
  html body main.app-shell section.map-stage.home-focus header.topbar > .topbar-actions,
  html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left,
  html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions,
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > .topbar-left,
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > .topbar-actions {
    width: 82px !important;
    gap: 2px !important;
    padding: 2px !important;
  }

  html body main.app-shell section.map-stage header.topbar #categoryMenuButton,
  html body main.app-shell section.map-stage header.topbar #logoHomeButton,
  html body main.app-shell section.map-stage header.topbar #pinSearchButton,
  html body main.app-shell section.map-stage header.topbar #notificationButton {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }

  html body main.app-shell section.map-stage.home-focus header.topbar > a.brand,
  html body main.app-shell section.map-stage.map-focus header.topbar > a.brand,
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > a.brand {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 7px !important;
  }

  html body main.app-shell section.map-stage.home-focus header.topbar > a.brand h1,
  html body main.app-shell section.map-stage.map-focus header.topbar > a.brand h1,
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > a.brand h1 {
    font-size: 1.32rem !important;
  }
}