/* Map controls only: marker artwork, spacing and visibility belong to the existing map. */
#ui-toggles {
  box-sizing: border-box;
  grid-template-columns: minmax(76px, .85fr) minmax(104px, 1.15fr) minmax(100px, 1.1fr);
  align-items: stretch;
  gap: 4px;
  width: 318px;
  padding: 5px;
  border: 1px solid var(--control-border);
  border-radius: 18px;
  background: var(--panel-strong);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(18px);
}

:root[data-map-theme-tone] body #ui-toggles button,
body #ui-toggles button,
body #ui-toggles button + button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 12px;
  background: transparent !important;
  color: var(--control-text) !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
}

body #ui-toggles button.is-active[aria-expanded="true"] {
  border-color: var(--control-selected-border) !important;
  background: var(--control-selected-bg) !important;
}

body #ui-toggles button:hover {
  background: var(--control-bg-hover) !important;
  transform: none;
}

#ui-toggles button:focus-visible,
.controls-hide:focus-visible,
.map-search-context a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

body .controls-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px 13px;
}

body .controls-header-main {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  align-items: flex-start;
  text-align: left;
}

body .controls-title {
  font-size: 20px;
  line-height: 1.2;
}

body .controls-summary {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}

body .controls #mobile-hide-controls {
  display: inline-flex !important;
}

body .controls-hide {
  box-sizing: border-box;
  min-width: 54px;
  min-height: 44px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 12px;
}

body .controls .search-wanted-panel {
  gap: 6px;
  margin-top: 0;
  padding: 14px 0 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.search-wanted-panel .intent-head { margin-bottom: 5px; }
.search-wanted-panel .intent-head strong { font-size: 14px; }

.map-search-label,
#destination-search-status:not(.is-empty) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.map-search-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.map-search-context .global-search-scope {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.map-search-context a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
  color: var(--control-text);
  font-size: 12px;
  text-decoration: none;
}

.map-search-context a:hover { text-decoration: underline; }
#map-explore-filters { margin-top: 3px; }
.map-search-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.map-search-actions button { min-height: 44px; margin-top: 8px; padding: 8px 12px; font-size: 12px; }
.map-search-actions[hidden], .map-search-actions button[hidden], .best-match-panel[hidden] { display: none !important; }
#destination-search-status.is-empty { margin: 10px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

body .controls .map-category-shortcuts,
body .controls .location-file-panel,
body .controls .route-tools-dropdown { padding: 0; }

.controls details > summary { box-sizing: border-box; }
.controls .map-quick-searches { margin-top: 12px; }
.controls .location-file-panel .panel-copy { font-size: 12px; line-height: 1.5; }

@media (max-width: 767px), (orientation: landscape) and (max-height: 560px) and (pointer: coarse) {
  body.compact-layout #ui-toggles {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(var(--app-mobile-nav-clearance) + 8px) !important;
    width: auto;
    gap: 4px;
  }

  body.compact-layout #ui-toggles button { min-height: 44px; padding: 8px 5px !important; font-size: 12px; }
  body.compact-layout .controls,
  body.compact-layout #stash-shelf,
  body.compact-layout #selection-card,
  body.compact-layout #instructions {
    bottom: calc(var(--app-mobile-nav-clearance) + 66px) !important;
  }

  body.compact-layout .controls {
    max-height: min(var(--app-mobile-controls-max-height), calc(var(--app-viewport-height) - var(--app-mobile-nav-clearance) - 84px)) !important;
  }

  body.compact-layout .controls-content {
    max-height: min(var(--app-mobile-controls-content-max-height), calc(var(--app-viewport-height) - var(--app-mobile-nav-clearance) - var(--app-controls-header-height) - 92px));
  }

  body.compact-layout.mobile-controls-open #map,
  body.compact-layout.mobile-directions-open #map,
  body.compact-layout.mobile-shelf-open.shelf-open #map { bottom: calc(var(--app-mobile-nav-clearance) + 66px) !important; }

  body.compact-layout .controls-header { align-items: center; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #ui-toggles { transition: none; }
}

/* Route planning gets its own view in the same panel; the map stays fully visible. */
body.map-route-panel-open .search-wanted-panel,
body.map-route-panel-open .map-category-shortcuts,
body.map-route-panel-open .location-file-panel,
body.map-route-panel-open .wanted-list-panel,
body.map-route-panel-open .controls .data-disclaimer,
body.map-route-panel-open #route-tools-dropdown > summary,
body.map-route-panel-open .route-panel-topline,
body.map-route-panel-open .map-mode-strip { display: none !important; }
body.map-route-panel-open .controls #route-tools-dropdown { margin-top: 0; border: 0; background: transparent; }

.map-search-area { padding: 10px 12px; border: 1px solid var(--control-selected-border); border-radius: 12px; background: var(--control-selected-bg); }
.map-search-area[hidden], #map-search-area-toggle[hidden] { display: none !important; }
.map-search-area p { margin: 0; color: var(--control-text); font-size: 12px; line-height: 1.5; }
body .controls #map-search-area-toggle { min-height: 44px; margin-top: 6px; padding: 8px 10px; font-size: 12px; background: var(--control-bg-strong) !important; color: var(--control-text) !important; border: 1px solid var(--control-border) !important; box-shadow: none !important; }

/* Search and matching shops lead; secondary planning stays in its own view. */
body:not(.map-route-panel-open) .controls-summary,
body:not(.map-route-panel-open) .controls #route-tools-dropdown { display: none; }
.map-search-area:has(#map-search-area-toggle[hidden]) { display: none; }
body .map-search-area { padding: 8px 0; border: 0; background: transparent; }
body .controls .best-match-panel {
  margin-top: 16px; padding: 0; border: 0; border-radius: 0;
  background: transparent !important; box-shadow: none;
}
body .controls .best-match-head { gap: 5px; padding: 0 0 12px; }
body .controls .best-match-head strong { font-size: 16px; }
body .controls .best-match-list { gap: 0; max-height: none; overflow: visible; }
body .controls .best-match-card {
  padding: 16px 0; border: 0; border-top: 1px solid var(--panel-border);
  border-radius: 0; background: transparent !important; box-shadow: none;
}
body .controls .best-match-reason { font-size: 13px; line-height: 1.5; }
body .controls .best-match-badge { font-size: 12px; line-height: 1.5; }
body .controls .map-quick-searches,
body .controls .map-price-help,
body .controls .map-category-shortcuts,
body .controls .location-file-panel {
  margin-top: 12px; border: 0; border-top: 1px solid var(--panel-border);
  border-radius: 0; background: transparent !important; box-shadow: none;
}
body .controls .map-quick-searches > summary,
body .controls .map-price-help > summary { min-height: 44px; padding: 12px 0; color: var(--ink); font-size: 13px; cursor: pointer; }
.map-price-help p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
body.map-route-panel-open .map-price-help { display: none; }

/* Label the search entities before presenting the shops that carry them. */
.map-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
body .controls .map-search-row input { width: 100%; min-width: 0; margin: 0; }
body .controls #map-search-submit { min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.map-search-suggestions { max-height: 280px; overflow-y: auto; border: 1px solid var(--control-border); border-radius: 12px; background: var(--panel-strong); }
body .controls .map-search-suggestions > button { display: grid; gap: 4px; width: 100%; min-height: 58px; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--panel-border); border-radius: 0; background: transparent !important; text-align: left; box-shadow: none; }
body .controls .map-search-suggestions > button:hover,
body .controls .map-search-suggestions > button[aria-selected="true"] { background: var(--control-selected-bg) !important; }
.map-search-suggestions strong { font-size: 14px; }
.map-search-suggestions span { color: var(--muted); font-size: 12px; line-height: 1.5; }
.map-suggestion-status { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.map-suggestion-status:empty { display: none; }
.map-strain-result { padding: 14px; border: 1px solid var(--control-selected-border); border-radius: 12px; background: var(--control-selected-bg); }
.map-strain-result > span { color: var(--muted); font-size: 12px; }
.map-strain-result h3 { margin: 5px 0; font-size: 23px; color: var(--ink); }
.map-strain-result p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.map-strain-result a { display: flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 13px; font-weight: 700; }
body.map-route-panel-open .map-strain-result { display: none; }
body .controls #global-search-suggestions > button { background: transparent !important; color: var(--control-text) !important; border-bottom: 1px solid var(--panel-border) !important; box-shadow: none !important; }
body .controls #global-search-suggestions > button:hover,
body .controls #global-search-suggestions > button[aria-selected="true"] { background: var(--control-selected-bg) !important; }

body .controls #clear-map-filters { margin: 8px 0 0; min-height: 44px; padding: 10px 14px; width: 100%; font-size: 13px; }