/* ---- phones ---- */
@media (max-width: 899px) {
  /* The big map only: it runs under the tab bar. Not a person's mini map. */
  #map .maplibregl-ctrl-top-right {
    display: none;
  }
  #map .maplibregl-ctrl-bottom-right,
  #map .maplibregl-ctrl-bottom-left {
    bottom: var(--tabbar-h);
  }
  body[data-card] #map .maplibregl-ctrl-bottom-right {
    opacity: 0;
  }
  .modal {
    align-items: flex-end;
    padding: max(16px, env(safe-area-inset-top)) 0 0;
  }
  .modal-box {
    width: 100%;
    max-width: 560px;
    border-radius: 22px 22px 0 0;
    border-bottom: none;
    max-height: calc(100dvh - 40px);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    animation: sheet-in 0.35s var(--ease);
  }
  .modal-box::before {
    content: "";
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--border);
    margin: -8px 0 -4px;
  }
  .person-rows li:hover {
    background: none;
  }
}

/* ---- wide screens: rail + panel + map ---- */
@media (min-width: 900px) {
  #map {
    left: var(--rail-w);
  }
  #tabbar {
    top: 0;
    right: auto;
    width: var(--rail-w);
    height: auto;
    padding: max(20px, env(safe-area-inset-top)) 0 20px env(safe-area-inset-left);
    grid-template-columns: 1fr;
    grid-auto-rows: 72px;
    align-content: start;
    gap: 6px;
    border-top: none;
    border-right: 1px solid var(--border);
    background: var(--panel);
  }
  .tab-share {
    order: -1;
    margin-bottom: 14px;
  }
  .tab-share i {
    margin-top: 0;
  }
  .screen {
    left: var(--rail-w);
    right: auto;
    bottom: 0;
    width: var(--panel-w);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 30px -18px rgba(0, 0, 0, 0.35);
    padding: 28px 24px 32px;
    transform: translateX(-16px);
  }
  .screen.stacked {
    transform: translateX(24px);
    opacity: 0;
  }
  .screen.stacked.active {
    opacity: 1;
    transform: none;
  }
  #map-head {
    left: calc(var(--rail-w) + 20px);
    right: auto;
    top: 20px;
    min-width: 300px;
  }
  .card {
    left: calc(var(--rail-w) + 20px);
    right: auto;
    width: 360px;
    bottom: 24px;
    max-height: 60dvh;
  }
  body:not([data-tab="map"]) .card {
    left: calc(var(--rail-w) + var(--panel-w) + 20px);
  }
}