/* Public slim map chrome — search ABOVE Layers; Layers height = content.
   Scoped to body.ask-public-slim-map only. */

body.ask-public-slim-map {
  --ask-map-top-chrome-top: 12px;
  --ask-map-right-rail-inset: 12px;
  --ask-map-right-rail-width: 36px;
  --ask-map-right-rail-gap: 8px;
  /* Beat full-product offset that reserves room for mode-seg / cabinet. */
  --ask-mode-seg-width: 0px;
  --ask-map-top-chrome-right: calc(
    var(--ask-map-right-rail-inset) + env(safe-area-inset-right, 0px)
  );
  --ask-slim-search-top: calc(
    var(--ask-map-top-chrome-top) + env(safe-area-inset-top, 0px)
  );
  --ask-slim-search-right: calc(
    var(--ask-map-right-rail-inset) + env(safe-area-inset-right, 0px)
  );
  /* Layers trigger one row below search loupe. */
  --ask-map-right-rail-tools-top: calc(
    var(--ask-slim-search-top)
    + var(--ask-map-right-rail-width)
    + var(--ask-map-right-rail-gap)
  );
  --ask-map-flyout-top: var(--ask-map-right-rail-tools-top);
  --ask-slim-layers-pad-y: 12px;
  --ask-slim-layers-pad-x: 12px;
  --ask-slim-layers-pad-right: 46px;
  --ask-slim-layers-gap: 10px;
  --ask-slim-pill-min-height: 34px;
}

/* ===== Search cluster: far-right above Layers (closed loupe / open pill) =====
   Must beat index.css:
   body.ask-app-mode-map:not(.ask-app-mode-cabinet) #askbaseTopSearch { right: inset+mode-seg } */

body.ask-public-slim-map #askbaseTopSearch,
body.ask-public-slim-map .askbase-top-search,
body.ask-public-slim-map.ask-app-mode-map #askbaseTopSearch,
body.ask-public-slim-map.ask-app-mode-map .askbase-top-search,
body.ask-public-slim-map.ask-app-mode-map:not(.ask-app-mode-cabinet) #askbaseTopSearch,
body.ask-public-slim-map.ask-app-mode-map:not(.ask-app-mode-cabinet) .askbase-top-search {
  position: fixed !important;
  top: var(--ask-slim-search-top) !important;
  right: var(--ask-slim-search-right) !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--ask-map-right-rail-width) !important;
  height: var(--ask-map-right-rail-width) !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  transform: none !important;
  z-index: 9400 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}

body.ask-public-slim-map #askbase-search-cluster,
body.ask-public-slim-map #askbaseTopSearch #askbase-search-cluster {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--ask-map-right-rail-width) !important;
  height: var(--ask-map-right-rail-width) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: none !important;
}

/* Closed: loupe only, still inside the far-right host (not a separate fixed island). */
body.ask-public-slim-map #askbaseTopSearch:not(.is-search-open) #top-search-btn,
body.ask-public-slim-map.ask-app-mode-map #askbaseTopSearch:not(.is-search-open) #top-search-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  width: var(--ask-map-right-rail-width) !important;
  height: var(--ask-map-right-rail-width) !important;
  min-width: var(--ask-map-right-rail-width) !important;
  margin: 0 !important;
  transform: none !important;
  z-index: 9401 !important;
  pointer-events: auto !important;
}

/* Closed flyout: keep collapsed inside cluster. */
body.ask-public-slim-map #askbaseTopSearch:not(.is-search-open) #top-search-flyout.askbase-search-flyout,
body.ask-public-slim-map #askbase-search-cluster #top-search-flyout.askbase-search-flyout.askbase-search-flyout--hidden {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important;
  left: auto !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Open: same far-right anchor; pill grows left (input + loupe). */
body.ask-public-slim-map #askbaseTopSearch.is-search-open,
body.ask-public-slim-map.ask-app-mode-map #askbaseTopSearch.is-search-open,
body.ask-public-slim-map.ask-app-mode-map:not(.ask-app-mode-cabinet) #askbaseTopSearch.is-search-open {
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  height: var(--ask-map-right-rail-width) !important;
  right: var(--ask-slim-search-right) !important;
  left: auto !important;
  pointer-events: auto !important;
}

body.ask-public-slim-map #askbaseTopSearch.is-search-open .askbase-search-cluster,
body.ask-public-slim-map #askbaseTopSearch.is-search-open #askbase-search-cluster {
  position: relative !important;
  width: auto !important;
  height: var(--ask-map-right-rail-width) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

body.ask-public-slim-map #askbaseTopSearch.is-search-open #top-search-btn,
body.ask-public-slim-map.ask-app-mode-map #askbaseTopSearch.is-search-open #top-search-btn {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

body.ask-public-slim-map #askbaseTopSearch.is-search-open #top-search-flyout.askbase-search-flyout,
body.ask-public-slim-map #askbaseTopSearch.is-search-open #top-search-flyout.askbase-search-flyout:not(.askbase-search-flyout--hidden) {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  width: var(--ask-map-search-flyout-width, 228px) !important;
  max-width: min(var(--ask-map-search-flyout-width, 228px), calc(100vw - 72px)) !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
  transform: none !important;
}

body.ask-public-slim-map #askMapModeRail,
body.ask-public-slim-map .ask-map-mode-rail {
  position: fixed !important;
  top: var(--ask-map-right-rail-tools-top) !important;
  bottom: auto !important;
  right: var(--ask-slim-search-right) !important;
  left: auto !important;
  z-index: 9200 !important;
}

/* Hide leftover account / profile / empty right panel chrome. */
body.ask-public-slim-map #askbase-account-top-btn,
body.ask-public-slim-map .askbase-account-top-btn,
body.ask-public-slim-map #askbase-mode-seg,
body.ask-public-slim-map .ask-mode-seg,
body.ask-public-slim-map #askbase-userpoints-btn,
body.ask-public-slim-map .askbase-right-panel {
  display: none !important;
}

/* ===== Layers: content-height only (no empty void) ===== */

body.ask-public-slim-map .ask-map-layers-switcher.is-open .ask-map-layers-menu,
body.ask-public-slim-map .ask-map-layers-switcher .ask-map-layers-menu {
  top: var(--ask-map-flyout-top) !important;
  padding: var(--ask-slim-layers-pad-y) var(--ask-slim-layers-pad-right)
    var(--ask-slim-layers-pad-y) var(--ask-slim-layers-pad-x) !important;
  gap: var(--ask-slim-layers-gap) !important;
  min-height: 0 !important;
  height: auto !important;
}

body.ask-public-slim-map .ask-map-layers-menu__main {
  gap: var(--ask-slim-layers-gap) !important;
  flex: 0 0 auto !important;
}

body.ask-public-slim-map .ask-map-layers-menu__header,
body.ask-public-slim-map .ask-map-layers-menu__section {
  gap: 8px !important;
}

body.ask-public-slim-map .ask-map-layers-menu__header {
  min-height: 32px !important;
}

body.ask-public-slim-map .ask-map-layers-menu .ask-map-region-picker--in-layers .ask-map-region-picker__trigger {
  height: 32px !important;
  min-height: 32px !important;
  font-size: 15px !important;
}

body.ask-public-slim-map .ask-map-layers-menu__header-actions {
  gap: 8px !important;
  align-items: center !important;
}

/* 3D = pill with label; compass = circle. Do not force same box size. */
body.ask-public-slim-map .ask-map-layers-menu__buildings {
  width: auto !important;
  min-width: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

body.ask-public-slim-map .ask-map-layers-menu__compass {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

body.ask-public-slim-map .ask-map-layers-menu__label {
  margin-bottom: 2px !important;
  font-size: 12px !important;
}

body.ask-public-slim-map .ask-map-layers-menu__view,
body.ask-public-slim-map .ask-map-layers-menu__cadastral,
body.ask-public-slim-map .ask-map-layers-menu__locate {
  gap: 8px !important;
}

body.ask-public-slim-map .ask-map-layers-menu .ask-map-mode-option,
body.ask-public-slim-map .ask-map-layers-menu__cadastral .askbase-pill,
body.ask-public-slim-map .ask-map-layers-menu .askbase-locate-mode {
  min-height: var(--ask-slim-pill-min-height) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

body.ask-public-slim-map .ask-map-layers-menu__zoom {
  top: var(--ask-slim-layers-pad-y) !important;
  bottom: var(--ask-slim-layers-pad-y) !important;
}

/* Slim has no Expansion bottom-sheet: pin legend to lower-left and allow full list. */
body.ask-public-slim-map .ask-cadastral-legend {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  max-height: min(72dvh, calc(100dvh - 96px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.ask-public-slim-map .ask-cadastral-legend__rows {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: visible !important;
}

body.ask-public-slim-map .ask-cadastral-legend__title {
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  padding-right: 28px !important;
  white-space: normal !important;
}

@media (max-width: 768px) {
  body.ask-public-slim-map .ask-map-layers-switcher.is-open .ask-map-layers-menu,
  body.ask-public-slim-map .ask-map-layers-switcher .ask-map-layers-menu {
    min-height: 0 !important;
    max-height: calc(100dvh - 72px) !important;
  }
}