:root { --fa-bottom-guard: 0px; --fa-inset-top: env(safe-area-inset-top, 0px); }
@media (max-width: 640px) {
  :root { --fa-bottom-guard: max(44px, env(safe-area-inset-bottom, 0px)); }
  #panel-main { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: none; height: var(--sheet-h, 168px); border-radius: var(--fa-r) var(--fa-r) 0 0;
    transition: height .28s cubic-bezier(.2,.8,.2,1); padding-bottom: var(--fa-bottom-guard); }
  #panel-main.dragging { transition: none; }


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





  #pm-grip { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; margin: 0; flex: none; touch-action: none; cursor: grab; }
  #pm-grip::after { content: ''; width: 40px; height: 5px; border-radius: 999px; background: var(--fa-faint); opacity: .8; }
  #pm-grip::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
  #pm-search, #pm-back { touch-action: none; }
  #panel-main.dragging, #panel-main.dragging * { cursor: grabbing; }
  #pm-kbd { display: none; }


  #q, .dir-field input, #cat-filter, #dir-from, #dir-to, input[type="text"], input[type="search"], select, textarea { font-size: 16px; }
  #cluster-tools { display: none; }
  #cluster-map { top: calc(var(--fa-gap) + var(--fa-inset-top)); bottom: auto; }
  #measure-pill { right: auto; left: var(--fa-gap); top: calc(var(--fa-gap) + var(--fa-inset-top)); bottom: auto; }
  #global-pill { top: calc(var(--fa-gap) + var(--fa-inset-top)); left: var(--fa-gap); right: 64px; transform: none; max-width: none; flex-wrap: wrap; }
  #global-pill .gp-title { white-space: normal; }
  #win-grid { grid-template-columns: repeat(4, 1fr); }
  #toast { bottom: calc(var(--fa-bottom-guard) + 12px); }
  .maplibregl-ctrl-bottom-right { display: none; }
  #panel-attrib { display: block; }
  .res-keys { display: none; }



  #panel, #catpanel, #winpanel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; max-height: calc(86dvh - var(--fa-inset-top)); border-radius: var(--fa-r) var(--fa-r) 0 0;
    padding-bottom: 8px; border-bottom: var(--fa-bottom-guard) solid transparent; box-sizing: border-box; }
  .panel-grip { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--fa-line); margin: 8px auto 2px; }
  .pl-hero { grid-template-columns: 1fr 1fr; }
}