/* Main menu: signature navy, readable rows, and a quiet owner-only utility group. */
html body main.app-shell #categoryMenu.app-main-menu {
  box-sizing: border-box !important;
  width: min(360px, calc(100vw - 36px)) !important;
  max-width: min(360px, calc(100vw - 36px)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 98px) !important;
  padding: 18px !important;
  gap: 16px !important;
  grid-template-areas: none !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--mymappi-action-navy, #00243f) !important;
  color: #f9fcff !important;
  border: 1px solid #36586e !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 48px rgba(0, 24, 43, .24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  scrollbar-width: thin;
  scrollbar-color: #75d9c3 #00243f;
  scrollbar-gutter: stable;
  /* Position belongs to layout, never to the entrance animation. WebKit can
     composite the old scale/translate keyframes over landscape centering. */
  transition: opacity 180ms ease !important;
}

html body main.app-shell #categoryMenu.app-main-menu.open {
  animation: mymappi-menu-fade-in 180ms ease-out both !important;
}
@keyframes mymappi-menu-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

html body main.app-shell #categoryMenu[hidden],
html body main.app-shell #categoryMenu [hidden] { display: none !important; }
/* The full-screen dismissal target must not inherit button press scaling:
   near an edge, shrinking between pointerdown/up would lose the click. */
html body main.app-shell #categoryMenuBackdrop {
  transform: none !important;
  scale: none !important;
  animation: none !important;
  transition: opacity 180ms ease !important;
}
html body main.app-shell #categoryMenu > * { grid-area: auto !important; }
html body main.app-shell #categoryMenu > .app-menu-help-section { overflow: visible !important; padding-right: 0 !important; }

html body main.app-shell #categoryMenu .app-menu-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
html body main.app-shell #categoryMenu .app-menu-mark,
html body main.app-shell #categoryMenu .app-menu-mark img { width: 40px; height: 44px; filter: none; }
html body main.app-shell #categoryMenu .app-menu-heading > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
html body main.app-shell #categoryMenu .app-menu-heading small { color: #b8d0dd; font-size: 12px; font-weight: 650; letter-spacing: .01em; text-transform: none; }
html body main.app-shell #categoryMenu .app-menu-heading strong { color: #fff; font-size: 16px; line-height: 1.3; font-weight: 750; white-space: normal; }

html body main.app-shell #categoryMenu .app-menu-section { padding-top: 14px; gap: 8px; border-top: 1px solid #29495f; }
html body main.app-shell #categoryMenu .app-menu-label { color: #afc8d7; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
html body main.app-shell #categoryMenu .app-menu-navigation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
html body main.app-shell #categoryMenu .app-menu-button {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto;
  align-items: center; justify-items: start; gap: 12px;
  width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid transparent;
  border-radius: 14px; color: #e9f4fa; background: transparent; box-shadow: none;
  transform: none; transition: background-color 140ms ease, color 140ms ease;
}
html body main.app-shell #categoryMenu .app-menu-button > span {
  width: 24px; height: 24px; padding: 0; color: inherit; background: transparent; border-radius: 0;
}
html body main.app-shell #categoryMenu .app-menu-button svg { width: 20px; height: 20px; }
html body main.app-shell #categoryMenu .app-menu-button strong { color: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: left; }
html body main.app-shell #categoryMenu .app-menu-button:is(.active, [aria-current="page"]) {
  color: #00243f; background: #75d9c3; border-color: #75d9c3; box-shadow: none;
}
html body main.app-shell #categoryMenu .app-menu-button:is(.active, [aria-current="page"]) > span { color: inherit; background: transparent; }
html body main.app-shell #categoryMenu .app-menu-list-button {
  grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 12px;
  min-height: 56px; padding: 9px 14px; border: 1px solid transparent;
  border-radius: 14px; background: transparent; box-shadow: none; transform: none;
}
html body main.app-shell #categoryMenu .app-menu-list-button > span:first-child { width: 24px; height: 24px; border-radius: 0; background: transparent; color: #c4e9e3; }
html body main.app-shell #categoryMenu .app-menu-list-button > span:last-child { color: #b8d0dd; }
html body main.app-shell #categoryMenu .app-menu-list-button svg { width: 19px; height: 19px; }
html body main.app-shell #categoryMenu .app-menu-list-button strong { color: #edf5fa; font-size: 14px; font-weight: 650; line-height: 1.35; white-space: normal; }
html body main.app-shell #categoryMenu .app-menu-list-button small { color: #afc8d7; font-size: 12px; font-weight: 450; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
html body main.app-shell #categoryMenu .app-menu-list-button:hover,
html body main.app-shell #categoryMenu .app-menu-button:not(.active):hover { background: #163b52; transform: none; }
html body main.app-shell #categoryMenu :is(button, a):focus-visible { outline: 2px solid #a1f1dd !important; outline-offset: 2px; }
html body main.app-shell #categoryMenu .app-menu-legal { display: flex !important; justify-content: center; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #29495f !important; }
html body main.app-shell #categoryMenu .app-menu-legal a { display: inline-flex; flex: 0 0 auto; width: auto; min-height: 44px; align-items: center; padding: 0 8px !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; color: #c3d8e3 !important; font-size: 12px !important; font-weight: 550 !important; text-decoration: none; }
html body main.app-shell #categoryMenu .app-menu-release { margin-top: -14px; color: #afc8d7; font-size: 11px; line-height: 1.5; text-align: center; }

@media (max-width: 720px) {
  html body main.app-shell #categoryMenu.app-main-menu {
    top: calc(env(safe-area-inset-top) + 66px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important; max-width: 360px !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 82px) !important;
    padding: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body main.app-shell #categoryMenu.app-main-menu.open { animation: none !important; }
  html body main.app-shell #categoryMenu :is(button, a) { transition: none !important; }
}
/* Use the same centered safe lane as Account/Search on a sideways phone.
   Keep the existing single scroller and the topbar's persistent close toggle. */
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell section.map-stage #categoryMenu.app-main-menu {
    top: calc(max(10px, env(safe-area-inset-top)) + 54px) !important;
    left: 50% !important;
    right: auto !important;
    width: min(760px, calc(100vw - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right)))) !important;
    max-width: none !important;
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - 54px - var(--bottom-nav-height, 60px) - max(8px, env(safe-area-inset-bottom)) - 8px) !important;
    transform: translateX(-50%) !important;
    padding: 12px 14px !important;
    gap: 10px 20px !important;
    border-radius: 20px !important;
    scrollbar-gutter: stable both-edges;
  }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 740px) {
  html body main.app-shell section.map-stage #categoryMenu.app-main-menu { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body main.app-shell #categoryMenu > :is(.app-menu-heading, .app-menu-legal, .app-menu-owner-section, .app-menu-release),
  html body main.app-shell #categoryMenu > #mapCreditsMenu { grid-column: 1 / -1 !important; }
  /* The fixed wordmark already names this menu. Reclaim its duplicate brand
     row so navigation, My World, support and legal links fit together. The
     referenced dialog label remains available to assistive technology. */
  html body main.app-shell #categoryMenu > .app-menu-heading { display: none !important; }
  html body main.app-shell #categoryMenu > .app-menu-section:first-of-type { grid-column: 1 !important; grid-row: 1 !important; }
  html body main.app-shell #categoryMenu > .app-menu-help-section { grid-column: 2 !important; grid-row: 1 / 3 !important; }
  html body main.app-shell #categoryMenu > .app-menu-legal { grid-column: 1 !important; grid-row: 2 !important; }
  html body main.app-shell #categoryMenu .app-menu-section { align-content: start; }
  html body main.app-shell #categoryMenu .app-menu-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html body main.app-shell #categoryMenu .app-menu-navigation .app-menu-button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 52px; padding: 6px; gap: 3px;
  }
  html body main.app-shell #categoryMenu .app-menu-navigation .app-menu-button strong { font-size: 13px; }
  html body main.app-shell #categoryMenu .app-menu-navigation .app-menu-button > span { width: 20px; height: 20px; }
}