/* Phone & small-tablet layout: full-screen map with the controls in a slide-up panel. */
#map { touch-action: none; }
.sheet-handle { display: none; }

@media (max-width: 820px) {
  html, body { height: 100%; overscroll-behavior: none; }
  #app { display: block; height: 100dvh; }
  #mapWrap { position: fixed; inset: 0; }

  #sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    height: min(72dvh, 640px);
    border-right: 0; border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .55);
    transform: translateY(calc(100% - 58px - env(safe-area-inset-bottom)));
    transition: transform .25s ease;
    padding-bottom: env(safe-area-inset-bottom);
  }
  #sidebar.open { transform: translateY(0); }

  .sheet-handle {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 58px; flex: 0 0 auto;
    background: transparent; border: 0; border-radius: 16px 16px 0 0;
    color: var(--text); font-weight: 600; letter-spacing: .02em;
  }
  .sheet-handle::before {
    content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px;
    margin-left: -20px; border-radius: 4px; background: #3a4658;
  }
  .sheet-handle .chev { transition: transform .25s; color: var(--muted); }
  #sidebar.open .sheet-handle .chev { transform: rotate(180deg); }

  .brand { display: none; }
  .tab { padding: 12px 4px; font-size: 14px; }
  .panel { padding: 12px 14px 20px; }

  /* bigger touch targets; 16px inputs stop iOS from zooming the page */
  input, select, button { font-size: 16px; }
  input, select { padding: 10px 11px; }
  button { padding: 10px 14px; }
  button.small { padding: 6px 10px; font-size: 13px; }
  label, .note { font-size: 13px; }

  #toolbar {
    top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  }
  #toolbar::-webkit-scrollbar { display: none; }
  #toolbar > * { flex: 0 0 auto; }
  #toolbar #search { width: 170px; }
  #toolbar label.inline, .seg button, #toolbar #fit { font-size: 13px; }

  #legend { display: none; }
  /* sit above the collapsed route panel */
  .orbit { right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); grid-template-columns: repeat(2, 46px); }
  .orbit button { padding: 10px 0; font-size: 17px; }
  .orbit button.wide { font-size: 13px; padding: 8px 4px; }
  #tooltip { display: none !important; }
  .data-foot { display: none; }
  .loading-card { width: calc(100vw - 40px); }
  .modal-card textarea { min-height: 160px; }
}