/* Keep the title and its menu together in the portrait screen's usable area. */
@media(orientation:portrait){
  body > .frame{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:var(--sg-app-height,var(--appH,100vh));
    padding:calc(76px + var(--safeT)) calc(14px + var(--safeR))
      calc(76px + var(--safeB)) calc(14px + var(--safeL));
  }
  .mapSymbolsMenuGroup{width:100%;flex:none;min-width:0;}
}

/* Two columns remain inside narrow phone screens, including the travel-log rows. */
@media(orientation:portrait) and (max-width:480px){
  :root{--btnW:min(180px,calc((100vw - 46px - var(--safeL) - var(--safeR)) / 2));}
  .recordRow{column-gap:18px;}
}
/* These are menus: allow vertical scrolling when their contents exceed the screen. */
html:has(.mapSymbolsMenuGroup),body:has(> .frame .mapSymbolsMenuGroup){height:auto;max-height:none;overflow-y:auto;}
body:has(> .frame .mapSymbolsMenuGroup){overflow:visible;overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom;}