/* MyMappi Explore v765 — one mirrored instrument system on both map edges. */

html body main.app-shell section.map-stage.map-focus {
  --mymappi-explore-left-edge: clamp(16px, 2.5vw, 28px);
  --mymappi-explore-right-edge: clamp(16px, 2.5vw, 28px);
  --mymappi-explore-header-top: max(14px, env(safe-area-inset-top));
  --mymappi-explore-instrument-width: 96px;
  --mymappi-explore-instrument-height: 48px;
  --mymappi-explore-stack-gap: 18px;
  --mymappi-explore-caption-gap: 6px;
}

/* The header rails and the two map switches share the same outer geometry. */
html body main.app-shell section.map-stage.map-focus header.topbar {
  top: var(--mymappi-explore-header-top) !important;
  right: 0 !important;
  left: 0 !important;
  grid-template-columns:
    minmax(var(--mymappi-explore-instrument-width), 1fr)
    auto
    minmax(var(--mymappi-explore-instrument-width), 1fr) !important;
  padding-inline:
    var(--mymappi-explore-right-edge)
    var(--mymappi-explore-left-edge) !important;
}

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 {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(44px, 1fr)) !important;
  width: var(--mymappi-explore-instrument-width) !important;
  min-width: var(--mymappi-explore-instrument-width) !important;
  max-width: var(--mymappi-explore-instrument-width) !important;
  height: var(--mymappi-explore-instrument-height) !important;
  min-height: var(--mymappi-explore-instrument-height) !important;
  max-height: var(--mymappi-explore-instrument-height) !important;
  padding: 1px !important;
  gap: 4px !important;
  border-radius: 16px !important;
}

html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-left {
  justify-self: start !important;
}

html body main.app-shell section.map-stage.map-focus header.topbar > .topbar-actions {
  justify-self: end !important;
}

html body main.app-shell section.map-stage.map-focus header.topbar :is(
  #categoryMenuButton,
  #logoHomeButton,
  #pinSearchButton,
  #notificationButton
) {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border-radius: 13px !important;
}

html body main.app-shell section.map-stage.map-focus .map-scope-switch,
html body main.app-shell section.map-stage.map-focus .map-depth-switch {
  top: calc(
    var(--mymappi-explore-header-top)
    + var(--mymappi-explore-instrument-height)
    + var(--mymappi-explore-stack-gap)
  ) !important;
  box-sizing: border-box !important;
  width: var(--mymappi-explore-instrument-width) !important;
  min-width: var(--mymappi-explore-instrument-width) !important;
  max-width: var(--mymappi-explore-instrument-width) !important;
  height: var(--mymappi-explore-instrument-height) !important;
  min-height: var(--mymappi-explore-instrument-height) !important;
  max-height: var(--mymappi-explore-instrument-height) !important;
  border-radius: 14px !important;
  transform: none !important;
}

html body main.app-shell section.map-stage.map-focus .map-scope-switch {
  left: var(--mymappi-explore-left-edge) !important;
}

html body main.app-shell section.map-stage.map-focus .map-depth-switch {
  right: var(--mymappi-explore-right-edge) !important;
}

/* Keep the explanation inside the exact MM / OM column instead of letting it
   grow wider than the instrument above it. */
html body main.app-shell section.map-stage.map-focus .map-scope-caption {
  top: calc(
    var(--mymappi-explore-header-top)
    + (2 * var(--mymappi-explore-instrument-height))
    + var(--mymappi-explore-stack-gap)
    + var(--mymappi-explore-caption-gap)
  ) !important;
  left: var(--mymappi-explore-left-edge) !important;
  box-sizing: border-box !important;
  width: var(--mymappi-explore-instrument-width) !important;
  min-width: var(--mymappi-explore-instrument-width) !important;
  max-width: var(--mymappi-explore-instrument-width) !important;
  min-height: 26px !important;
  justify-content: center !important;
  padding-inline: 5px !important;
  gap: 3px !important;
  overflow: hidden !important;
  font-size: 0.58rem !important;
  letter-spacing: -0.01em !important;
}

html body main.app-shell section.map-stage.map-focus .map-scope-caption strong {
  min-width: 0 !important;
  font-size: 0.61rem !important;
  white-space: nowrap !important;
}

html body main.app-shell section.map-stage.map-focus .map-scope-caption span {
  min-width: 0 !important;
  white-space: nowrap !important;
}

html body main.app-shell section.map-stage.map-focus .map-scope-caption span::before {
  margin-right: 3px !important;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  html body main.app-shell section.map-stage.map-focus {
    --mymappi-explore-left-edge: max(12px, env(safe-area-inset-left));
    --mymappi-explore-right-edge: max(12px, env(safe-area-inset-right));
    --mymappi-explore-header-top: max(10px, calc(env(safe-area-inset-top) + 8px));
    --mymappi-explore-instrument-width: 92px;
    --mymappi-explore-instrument-height: 48px;
    --mymappi-explore-stack-gap: 12px;
  }

  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 {
    grid-template-columns: repeat(2, 44px) !important;
    gap: 2px !important;
    padding: 0 !important;
  }

  html body main.app-shell section.map-stage.map-focus .map-scope-switch,
  html body main.app-shell section.map-stage.map-focus .map-depth-switch,
  html body main.app-shell section.map-stage.map-focus .map-scope-caption {
    position: fixed !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body main.app-shell section.map-stage.map-focus :is(
    .topbar-left,
    .topbar-actions,
    .map-scope-switch,
    .map-depth-switch,
    .map-scope-caption
  ) {
    transition: none !important;
  }
}