/* Account: the same navy panel family, with an anchored header and one
   scrollable body. Existing backup, privacy and session actions are unchanged. */
html body main.app-shell #accountMenu.account-menu.open {
  position: fixed !important;
  top: auto !important; left: auto !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: calc(var(--bottom-nav-height, 84px) + env(safe-area-inset-bottom) + 26px) !important;
  width: min(420px, calc(100vw - 36px)) !important; max-width: none !important;
  max-height: min(720px, calc(var(--mymappi-visible-height, 100dvh) - var(--bottom-nav-height, 84px) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 110px)) !important;
  box-sizing: border-box !important; display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important; padding: 18px !important; overflow: hidden !important;
  border: 1px solid #36586e !important; border-radius: 24px !important;
  color: #f9fcff !important; background: var(--mymappi-action-navy, #00243f) !important;
  box-shadow: 0 18px 48px rgba(0, 24, 43, .24) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; transform: none !important;
}
html body main.app-shell #accountMenu[hidden],
html body main.app-shell #accountMenu [hidden],
html body main.app-shell #accountMenu .hidden { display: none !important; }
html body main.app-shell #accountMenu::before { display: none !important; content: none !important; }
html body main.app-shell #accountMenu .account-panel-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid #29495f;
}
html body main.app-shell #accountMenu .account-panel-heading > span { display: grid; gap: 4px; min-width: 0; }
html body main.app-shell #accountMenu .account-panel-heading small { color: #b8d0dd; font-size: 11px; font-weight: 650; line-height: 1.3; }
html body main.app-shell #accountMenu .account-panel-heading strong { color: #fff; font-size: 19px; line-height: 1.3; font-weight: 750; }
html body main.app-shell #accountMenu .account-panel-close {
  display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px;
  padding: 0; border: 1px solid #48667b; border-radius: 50%; color: #fff; background: transparent; box-shadow: none;
}
html body main.app-shell #accountMenu .account-panel-close svg { width: 20px; height: 20px; }
html body main.app-shell #accountMenu .account-panel-content {
  display: grid; align-content: start; min-height: 0; min-width: 0; gap: 8px; padding: 2px;
  grid-auto-rows: max-content;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #75d9c3 #00243f;
  scroll-padding: 8px; -webkit-overflow-scrolling: touch;
}
html body main.app-shell #accountMenu .account-cloud-card {
  grid-template-columns: 40px minmax(0, 1fr) !important; padding: 0 0 14px !important;
  border-bottom: 0 !important; gap: 12px !important;
}
html body main.app-shell #accountMenu .account-profile-mark {
  width: 40px; height: 44px; color: #abeddd; background: #174658; border: 1px solid #365f70;
  border-radius: 14px; box-shadow: none;
}
html body main.app-shell #accountMenu .account-cloud-kicker { color: #b8d0dd !important; font-size: 11px !important; line-height: 1.4; letter-spacing: .01em; text-transform: none; }
html body main.app-shell #accountMenu .account-profile-copy { gap: 5px; }
html body main.app-shell #accountMenu .account-profile-copy > strong { color: #fff; font-size: 16px; font-weight: 750 !important; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
html body main.app-shell #accountMenu .account-profile-copy > p {
  display: block; margin: 0; color: #c4d8e3 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important;
  -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere;
}
html body main.app-shell #accountMenu .account-export-description {
  margin: 2px 4px 12px; color: #c4d8e3 !important; font-size: 12px !important;
  font-weight: 400 !important; line-height: 1.5 !important; overflow-wrap: anywhere;
}
/* One quiet summary surface, not three competing tiles. */
html body main.app-shell #accountMenu .account-backup-dashboard {
  display: grid !important; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) !important;
  gap: 0 !important; padding: 14px 0; margin: 0;
  border: 1px solid #2b4c61; border-radius: 16px; background: #0a2e46;
}
html body main.app-shell #accountMenu .account-backup-stat {
  display: grid; align-content: start; min-width: 0;
  padding: 0 14px !important; gap: 5px !important; border: 0 !important;
  border-radius: 0 !important; background: transparent !important;
}
html body main.app-shell #accountMenu .account-backup-stat + .account-backup-stat { border-left: 1px solid #2b4c61 !important; }
html body main.app-shell #accountMenu .account-backup-stat > span { color: #b8d0dd !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.3 !important; }
html body main.app-shell #accountMenu .account-backup-stat > strong { color: #fff !important; font-size: 15px !important; font-weight: 750 !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere; }
html body main.app-shell #accountMenu .account-memory-stat > strong { font-size: 26px !important; line-height: 1.15 !important; font-variant-numeric: tabular-nums; }
html body main.app-shell #accountMenu .account-last-backup {
  color: #b8d0dd; font-size: 11px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere;
}
html body main.app-shell #accountMenu .account-last-backup > span {
  color: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-transform: none !important;
}
html body main.app-shell #accountMenu .account-sync-status {
  padding: 12px !important; color: #c4d8e3 !important; background: #103b50 !important;
  border: 1px solid #365f70 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.5 !important;
  overflow: visible !important; overflow-wrap: anywhere; border-radius: 14px;
  box-sizing: border-box; min-height: 0; display: block;
}
html body main.app-shell #accountMenu .account-sync-status[data-state="attention"],
html body main.app-shell #accountMenu .account-sync-status[data-state="offline"] { color: #ffe0a3 !important; border-color: #b59a63 !important; }
html body main.app-shell #accountMenu .account-sync-status[data-state="pending"] { border-left: 3px solid #e5c37c !important; }
html body main.app-shell #accountMenu .account-backup-details {
  min-width: 0; margin: 0; padding: 0 12px; color: #c4d8e3;
  background: transparent; border: 1px solid #2b4c61; border-radius: 14px;
}
html body main.app-shell #accountMenu .account-backup-details > summary {
  box-sizing: border-box; min-height: 44px; padding: 12px 0;
  color: #c4d8e3; font-size: 12px; font-weight: 650; line-height: 1.5; cursor: pointer;
}
html body main.app-shell #accountMenu .account-backup-detail-body {
  display: grid; gap: 10px; padding: 12px 0 14px; border-top: 1px solid #2b4c61;
  font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere;
}
html body main.app-shell #accountMenu .account-backup-detail-body :is(p, dl) { margin: 0; color: #c4d8e3; font-size: inherit; line-height: inherit; }
html body main.app-shell #accountMenu .account-backup-detail-body dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
html body main.app-shell #accountMenu .account-backup-detail-body dd { margin: 0; font-variant-numeric: tabular-nums; }
html body main.app-shell #accountMenu .account-backup-detail-body strong { color: #e9f4fa; font-size: 12px; }
html body main.app-shell #accountMenu .account-backup-detail-body small { color: #b8d0dd; font-size: 11px; line-height: 1.5; }
html body main.app-shell #accountMenu summary:focus-visible { outline: 2px solid #75d9c3; outline-offset: -3px; border-radius: 8px; }
html body main.app-shell #accountMenu .account-menu-label {
  display: block; justify-self: stretch; width: 100%; min-width: 0; box-sizing: border-box;
  text-align: center;
  margin: 10px 0 2px; padding: 14px 2px 0; border-top: 1px solid #29495f;
  color: #afc8d7; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .08em;
}
html body main.app-shell #accountMenu .account-menu-item {
  height: auto !important; max-height: none !important; align-items: center !important;
  min-height: 48px !important; padding: 12px !important; gap: 10px !important;
  border: 1px solid #2b4c61 !important; border-radius: 14px !important;
  color: #e9f4fa !important; background: #0a2e46 !important; box-shadow: none !important;
  font-size: 14px !important; font-weight: 650 !important; line-height: 1.4 !important;
  white-space: normal !important; transform: none !important; text-align: left !important;
}
html body main.app-shell #accountMenu .account-menu-item:not(:disabled):hover { background: #103b50 !important; border-color: #75d9c3 !important; }
html body main.app-shell #accountMenu .account-menu-item:disabled { opacity: .55 !important; cursor: not-allowed; }
html body main.app-shell #accountMenu .account-menu-item > :is(span, svg):first-child { color: #abeddd !important; }
html body main.app-shell #accountMenu .account-menu-item strong { color: inherit !important; font-size: 14px !important; line-height: 1.4 !important; }
html body main.app-shell #accountMenu .account-menu-item small { color: #b8d0dd !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 500 !important; }
/* Icon replacement may remove the span class; size the real grid children so
   enlarged root text cannot push the customization chevron outside Account. */
html body main.app-shell #accountMenu .account-customize-button > svg {
  width: 20px; height: 20px; min-width: 0;
}
html body main.app-shell #accountMenu .account-menu-item.people-pets-entry,
html body main.app-shell #accountMenu .account-menu-item.account-sharing-safety-button {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
}
html body main.app-shell #accountMenu #syncNowButton {
  color: #00243f !important; background: #75d9c3 !important; border-color: #75d9c3 !important;
}
html body main.app-shell #accountMenu #syncNowButton > :is(span, svg):first-child { color: #00243f !important; }
html body main.app-shell #accountMenu .account-menu-pair { gap: 8px; }
html body main.app-shell #accountMenu .account-menu-pair .account-menu-item { font-size: 12px !important; padding: 10px !important; }
html body main.app-shell #accountMenu #deleteAccountButton {
  margin-top: 14px !important; color: #ffbbb6 !important; border: 1px solid #8f595b !important;
  background: #3c2a3c !important;
}
html body main.app-shell #accountMenu #deleteAccountButton > :is(span, svg):first-child { color: #ffbbb6 !important; }
html body main.app-shell #accountMenu button:focus-visible { outline: 2px solid #75d9c3 !important; outline-offset: -3px !important; }
html body main.app-shell section.map-stage #accountMenuButton[aria-expanded="true"],
html body main.app-shell section.map-stage #accountMenuButton[aria-expanded="true"] :is(span, svg) { color: #00243f !important; }
@media (max-width: 720px) {
  html body main.app-shell #accountMenu.account-menu.open {
    right: max(12px, env(safe-area-inset-right)) !important;
    width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))) !important;
    padding: 14px !important; border-radius: 22px !important;
  }
}
/* A sideways phone needs a reading panel, not a narrow desktop popover.
   The dock and top controls stay outside it; only the body scrolls. */
@media (orientation: landscape) and (max-height: 520px) {
  html body main.app-shell #accountMenu.account-menu.open {
    top: calc(max(10px, env(safe-area-inset-top)) + 54px) !important;
    bottom: calc(var(--bottom-nav-height, 60px) + max(8px, env(safe-area-inset-bottom)) + 8px) !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-height: none !important;
    transform: translateX(-50%) !important;
    padding: 8px 14px !important; gap: 4px !important; border-radius: 20px !important;
  }
  html body main.app-shell #accountMenu .account-panel-heading {
    padding-bottom: 2px; gap: 10px;
  }
  html body main.app-shell #accountMenu .account-panel-heading > span {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  }
  html body main.app-shell #accountMenu .account-panel-heading strong { font-size: 18px; }
}
/* Account follows the visible keyboard window, not the dock behind it.
   The header stays anchored and only the existing content scrollport moves.
   Ordinary portrait/landscape panel geometry resumes when typing ends. */
html body.keyboard-open main.app-shell #accountMenu.account-menu.open.is-keyboard-editing {
  z-index: 1800 !important;
  top: calc(var(--mymappi-visual-offset-top, 0px) + max(8px, env(safe-area-inset-top, 0px))) !important;
  bottom: auto !important;
  height: calc(var(--mymappi-visible-height, 100dvh) - max(8px, env(safe-area-inset-top, 0px)) - 8px) !important;
  min-height: 0 !important;
  max-height: min(720px, calc(var(--mymappi-visible-height, 100dvh) - max(8px, env(safe-area-inset-top, 0px)) - 8px)) !important;
  padding-block: 8px !important;
  gap: 8px !important;
}
html body.keyboard-open main.app-shell #accountMenu.is-keyboard-editing .account-panel-content {
  scroll-behavior: auto;
}