/* Premium phone Search surface.
   Keep the panel content-sized before a query, then let only the results list
   scroll. This intentionally loads after the earlier Search layout lock and
   does not change the established iPad or desktop geometry. */

/* This description belongs to the select's accessible name only. Keep it
   visually hidden on every form factor; the phone rule below used to be the
   only owner, which allowed it to leak into the desktop filter row. */
html body .app-shell #pinSearchPanel .map-chapter-selector > .sr-only,
html body main.app-shell section.map-stage #pinSearchPanel .map-chapter-selector > .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (max-width: 600px) and (hover: none) and (pointer: coarse),
       (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html body .app-shell #pinSearchPanel.pin-search-panel.open,
  html body main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
    right: max(11px, env(safe-area-inset-right, 0px)) !important;
    bottom: auto !important;
    left: max(11px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: max-content max-content max-content minmax(0, auto) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(
      100dvh - var(--bottom-nav-height, 84px) -
      env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 104px
    ) !important;
    gap: 10px !important;
    padding: 12px !important;
    border: 1px solid rgba(184, 239, 224, 0.2) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(132, 242, 196, 0.1), transparent 36%),
      linear-gradient(155deg, rgba(8, 57, 66, 0.985), rgba(8, 45, 56, 0.985)) !important;
    box-shadow:
      0 22px 48px rgba(2, 31, 39, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    overflow: hidden !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-heading,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-heading {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    min-height: 44px !important;
    gap: 10px !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-heading-copy,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-heading-copy {
    gap: 2px !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-heading-copy > span,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-heading-copy > span {
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-heading-copy > strong,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-heading-copy > strong {
    overflow: hidden !important;
    font-size: 0.98rem !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .app-shell #pinSearchPanel #pinSearchCloseButton.pin-search-close,
  html body main.app-shell section.map-stage #pinSearchPanel #pinSearchCloseButton.pin-search-close {
    border: 1px solid rgba(210, 255, 243, 0.2) !important;
    border-radius: 50% !important;
    color: #d7fff2 !important;
    background: rgba(255, 255, 255, 0.085) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    font-size: 1.2rem !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-box,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-box {
    grid-template-columns: 20px minmax(0, 1fr) 70px !important;
    min-height: 50px !important;
    gap: 7px !important;
    padding: 0 5px 0 12px !important;
    border-radius: 17px !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-box input,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-box input {
    min-width: 0 !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
  }

  html body .app-shell #pinSearchPanel #pinSearchGoButton.pin-search-go-button,
  html body main.app-shell section.map-stage #pinSearchPanel #pinSearchGoButton.pin-search-go-button {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-inline: 8px !important;
    font-size: 0.74rem !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-chapter-filter,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter {
    grid-template-columns: minmax(0, 1fr) minmax(142px, 48%) !important;
    align-items: center !important;
    min-height: 58px !important;
    gap: 10px !important;
    padding: 7px 7px 7px 11px !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-chapter-copy,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy {
    min-width: 0 !important;
    gap: 3px !important;
    padding: 0 !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-chapter-copy strong,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy strong {
    overflow: hidden !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-chapter-copy small,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-copy small {
    display: block !important;
    overflow: hidden !important;
    font-size: 0.64rem !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body .app-shell #pinSearchPanel .map-chapter-selector,
  html body main.app-shell section.map-stage #pinSearchPanel .map-chapter-selector {
    min-width: 0 !important;
    min-height: 44px !important;
  }

  html body .app-shell #pinSearchPanel #mapChapterSelector,
  html body main.app-shell section.map-stage #pinSearchPanel #mapChapterSelector {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px 30px 8px 11px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    text-overflow: ellipsis !important;
  }

  html body .app-shell #pinSearchPanel .pin-search-results,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-results {
    grid-row: 4 !important;
    min-height: 0 !important;
    max-height: min(40dvh, 350px) !important;
    gap: 8px !important;
    padding: 0 2px 2px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  html body .app-shell #pinSearchPanel .search-empty-state,
  html body main.app-shell section.map-stage #pinSearchPanel .search-empty-state {
    min-height: 0 !important;
    gap: 4px !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }

  html body .app-shell #pinSearchPanel .search-empty-state strong,
  html body main.app-shell section.map-stage #pinSearchPanel .search-empty-state strong {
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
  }

  html body .app-shell #pinSearchPanel .search-empty-state span,
  html body main.app-shell section.map-stage #pinSearchPanel .search-empty-state span {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: 0.73rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }
}

@media (max-width: 360px) and (hover: none) and (pointer: coarse) {
  html body .app-shell #pinSearchPanel .pin-search-chapter-filter,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter {
    grid-template-columns: minmax(0, 1fr) 136px !important;
    gap: 7px !important;
  }
}

@media (max-width: 600px) and (hover: none) and (pointer: coarse) {
  html body.keyboard-open .app-shell #pinSearchPanel.pin-search-panel.open,
  html body.keyboard-open main.app-shell section.map-stage #pinSearchPanel.pin-search-panel.open {
    top: calc(var(--mymappi-visual-offset-top, 0px) + max(8px, env(safe-area-inset-top, 0px))) !important;
    max-height: calc(
      var(--mymappi-visible-height, 100dvh) -
      max(8px, env(safe-area-inset-top, 0px)) -
      max(8px, env(safe-area-inset-bottom, 0px)) - 16px
    ) !important;
  }
}

/* A narrow desktop/browser pane still has a fine pointer. Keep its chapter
   scope on one concise row instead of inheriting the older stacked layout. */
@media (max-width: 600px) and (hover: hover) and (pointer: fine) {
  html body .app-shell #pinSearchPanel .pin-search-chapter-filter,
  html body main.app-shell section.map-stage #pinSearchPanel .pin-search-chapter-filter {
    grid-template-columns: minmax(0, 1fr) minmax(136px, 44%) !important;
    align-items: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .app-shell #pinSearchPanel #pinSearchCloseButton.pin-search-close {
    transition: none !important;
  }
}