/* Phone placement adapter for the existing Map-layer palette.
   Classification, layer membership and toggle authority remain unchanged. */
@media (max-width: 600px) {
  html body[data-perspective="CUSTOMER"] #map-workspace .map-board .layers-palette,
  html body[data-perspective="VENDOR"] #map-workspace .map-board .layers-palette {
    top: max(4.75rem, calc(env(safe-area-inset-top, 0px) + 4.25rem)) !important;
    right: max(.45rem, env(safe-area-inset-right, 0px)) !important;
    bottom: calc(var(--viewport-vendor-rail-height, 6.7rem) + env(safe-area-inset-bottom, 0px) + .45rem) !important;
    left: max(4rem, calc(env(safe-area-inset-left, 0px) + 4rem)) !important;
    width: auto !important;
    max-height: none !important;
    padding: .65rem .55rem !important;
    gap: .45rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
  }

  .layers-palette .map-layer-switch,
  .layers-palette .map-layer-kind-group > summary,
  .layers-palette .map-source-kind-switch {
    min-height: 44px;
  }

  .layers-palette .map-layer-kind-group {
    margin: 0 .08rem .35rem;
    padding: .12rem 0 .25rem .45rem;
  }

  .layers-palette .map-layer-kind-group > summary {
    display: flex;
    align-items: center;
    padding: .25rem .35rem;
    font-size: .8rem;
  }

  .layers-palette .map-layer-kind-group > div {
    grid-template-columns: minmax(0, 1fr);
    gap: .3rem;
    margin-top: .22rem;
  }

  .layers-palette .map-source-kind-switch {
    padding: .5rem .55rem;
    font-size: .78rem;
    line-height: 1.2;
  }
}

@media (max-width: 340px) {
  html body[data-perspective="CUSTOMER"] #map-workspace .map-board .layers-palette,
  html body[data-perspective="VENDOR"] #map-workspace .map-board .layers-palette {
    right: .3rem !important;
    left: 3.75rem !important;
  }
}