/* Header controls v2: one calm dark capsule, with the icons floating inside it. */
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 {
  height: 54px !important;
  min-height: 54px !important;
  border-color: rgba(221, 255, 246, 0.12) !important;
  box-shadow:
    0 10px 24px rgba(2, 30, 40, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton,
html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton,
html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton,
html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton,
html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton,
html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton,
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton:hover,
html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton:hover,
html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton:hover,
html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton:hover,
html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton:hover,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton:hover,
html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton:hover,
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton:hover,
html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton.active,
html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton.active,
html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton.active,
html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton.active,
html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton.active,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton.active,
html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton.active,
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton.active {
  color: #ffffff !important;
  background: rgba(104, 230, 194, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton > [data-icon],
html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton > [data-icon],
html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton > [data-icon],
html body main.app-shell section.map-stage.home-focus header.topbar #categoryMenuButton > svg,
html body main.app-shell section.map-stage.home-focus header.topbar #pinSearchButton > svg,
html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton > svg,
html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton > [data-icon],
html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton > [data-icon],
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton > [data-icon],
html body main.app-shell section.map-stage.map-focus header.topbar #categoryMenuButton > svg,
html body main.app-shell section.map-stage.map-focus header.topbar #pinSearchButton > svg,
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton > svg {
  width: 19px !important;
  height: 19px !important;
  color: #f7fffc !important;
  stroke-width: 2.1 !important;
  filter: none !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton::before,
html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton::after,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton::before,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton::after {
  display: none !important;
  content: none !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton img,
html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton img {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  filter: drop-shadow(0 3px 5px rgba(1, 25, 36, 0.2)) !important;
}

html body main.app-shell section.map-stage.home-focus header.topbar #notificationButton::after,
html body main.app-shell section.map-stage.map-focus header.topbar #notificationButton::after {
  top: 7px !important;
  right: 7px !important;
  width: 6px !important;
  height: 6px !important;
  border: 1px solid rgba(4, 38, 48, 0.94) !important;
  background: #f2555f !important;
  box-shadow: 0 0 0 2px rgba(242, 85, 95, 0.12) !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 > 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 {
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
  }

  html body main.app-shell section.map-stage.home-focus header.topbar #logoHomeButton img,
  html body main.app-shell section.map-stage.map-focus header.topbar #logoHomeButton img {
    width: 36px !important;
    height: 36px !important;
  }
}