/* Final responsive touch-target guard.
   Home and Memory Lane still inherited 40–42px header buttons from older
   layers while Explore already used 44px. Keep the visible design intact,
   but give all four primary header controls the same reliable hit area. */

html body main.app-shell section.map-stage.home-focus header.topbar > :is(.topbar-left, .topbar-actions),
html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > :is(.topbar-left, .topbar-actions) {
  box-sizing: border-box !important;
  grid-template-columns: repeat(2, 44px) !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  gap: 4px !important;
  padding: 2px !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar :is(
  #categoryMenuButton,
  #logoHomeButton,
  #pinSearchButton,
  #notificationButton
),
html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar :is(
  #categoryMenuButton,
  #logoHomeButton,
  #pinSearchButton,
  #notificationButton
) {
  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;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  html body main.app-shell section.map-stage.home-focus header.topbar > :is(.topbar-left, .topbar-actions),
  html body main.app-shell section.map-stage.memories-focus:not(.memory-editor-active) header.topbar > :is(.topbar-left, .topbar-actions) {
    grid-template-columns: repeat(2, 44px) !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    gap: 4px !important;
    padding: 0 !important;
  }
}

/* A 320px viewport has 296px after the shared 12px gutters. Keep the
   112px wordmark centered between the two 92px rails without overflowing
   the grid, preserving all four 44px touch targets. */
@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 {
    grid-template-columns: minmax(92px, 1fr) minmax(0, 112px) minmax(92px, 1fr) !important;
    column-gap: 0 !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: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}
/* iPad also focuses text fields. Keep their actual text at least 16px so
   WebKit need not magnify the page; retain user-controlled pinch zoom. */
@media (any-pointer: coarse) {
  html body :is(#pinSearchInput, #memoryLocation, #ourMapStoryHandle, #ourMapStoryHeadline, #ourMapStoryBody) {
    font-size: max(16px, 1rem) !important;
  }
}