/* コンデル？ v1.8.3.5 - mobile map focus UI
   Mobile top UI is compact at rest and temporarily hides during map movement. */

@media (max-width:700px){
  :root{
    --top-h:46px;
    --mobile-ui-hide-y:-170px;
  }

  .topbar{
    min-height:46px!important;
    height:46px!important;
    padding-top:0!important;
    padding-bottom:0!important;
    transition:transform .20s ease,opacity .16s ease!important;
    will-change:transform,opacity;
  }

  .brand{
    font-size:16px!important;
    gap:6px!important;
  }
  .brand small{
    font-size:8px!important;
  }
  .brand-dot{
    width:8px!important;
    height:8px!important;
  }
  .top-action,
  .info-menu summary{
    height:38px!important;
    min-width:38px!important;
    border-radius:12px!important;
  }
  .top-action{
    padding:0 8px!important;
    font-size:10px!important;
  }

  .search-panel{
    top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 5px)!important;
    width:calc(100% - 12px)!important;
    padding:6px!important;
    border-radius:16px!important;
    transition:transform .20s ease,opacity .16s ease!important;
    will-change:transform,opacity;
  }

  .search-row{
    gap:5px!important;
  }
  .search-row input{
    height:42px!important;
    border-radius:12px!important;
    padding-left:36px!important;
  }
  .search-row button{
    height:42px!important;
    min-width:56px!important;
    padding:0 10px!important;
    border-radius:12px!important;
  }

  /* Categories + sorting share one compact horizontal strip. */
  .toolbar{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    margin-top:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent 100%);
  }
  .toolbar::-webkit-scrollbar{display:none!important}

  .chips{
    flex:0 0 auto!important;
    width:auto!important;
    display:flex!important;
    gap:4px!important;
    padding:0!important;
    overflow:visible!important;
    mask-image:none!important;
  }
  .sorts{
    flex:0 0 auto!important;
    width:auto!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:4px!important;
  }
  .chip,
  .sort{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:auto!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 9px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }

  .legend{
    gap:7px!important;
    margin-top:5px!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .legend::-webkit-scrollbar{display:none!important}
  .legend span{
    flex:0 0 auto!important;
    font-size:9px!important;
  }

  /* During map manipulation, maximize the visible map immediately. */
  body.konderu-map-moving .topbar,
  body.konderu-map-moving .search-panel{
    transform:translateY(var(--mobile-ui-hide-y))!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.konderu-map-moving .search-results{
    display:none!important;
  }

  /* If the user is actively typing/searching, never hide the UI. */
  body.konderu-map-ui-locked .topbar,
  body.konderu-map-ui-locked .search-panel{
    transform:none!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
}

@media (max-width:380px){
  .brand small{display:none!important}
  .top-action{width:38px!important}
}