/*
 * The map on a phone: full-screen map, the search floating at the top, the
 * panel as a sheet at the foot with three positions, the drawer as a sheet
 * that replaces it, compact controls. Nothing here is a shrunken desktop.
 */

@media (max-width: 767px) {
  .atlas { font-size: 15px; }
  .atlas-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; border-radius: 2px 2px 0 0; border-bottom: 0; transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; max-height: 92dvh; height: 92dvh; }
  .atlas-panel.is-dragging { transition: none; }
  .atlas-panel[data-snap="peek"] { transform: translateY(calc(92dvh - 212px)); }
  .atlas-panel[data-snap="half"] { transform: translateY(46dvh); }
  .atlas-panel[data-snap="full"] { transform: translateY(0); }
  .atlas-panel-closed .atlas-panel { transform: translateY(calc(92dvh - 212px)); opacity: 1; pointer-events: auto; }
  .atlas-sheet-handle { display: block; width: 100%; height: 22px; border: 0; background: none; padding: 0; cursor: grab; }
  .atlas-sheet-handle::before { content: ''; display: block; width: 40px; height: 4px; margin: 9px auto 0; border-radius: 2px; background: var(--lac-rule); }
  .atlas-panel-head { padding: 0 14px 8px; }
  .atlas-brand { margin-bottom: 6px; }
  .atlas-search input { height: 44px; font-size: 16px; }
  .atlas-results { max-height: 40dvh; }
  .atlas-facet, .atlas-chip { min-height: 32px; }
  .atlas-facet-selects select { height: 36px; font-size: 15px; }
  .atlas-btn { min-height: 40px; }
  .atlas-ctl { width: 44px; height: 44px; }

  /* Half open: chips, the count line and the list; the facet block would push
     the list below the fold, so it appears only when the sheet is fully open. */
  .atlas-panel[data-snap="half"] .atlas-facets { display: none; }
  .atlas-panel[data-snap="half"] .atlas-list { flex: 1; min-height: 0; }
  body.atlas-sheet-open .atlas-controls, body.atlas-sheet-open .atlas-layers, body.atlas-sheet-open .atlas-heat-note { display: none; }

  /* In the peek position the list is a strip of cards, scrolled sideways. */
  .atlas-panel[data-snap="peek"] .atlas-facets, .atlas-panel[data-snap="peek"] .atlas-context, .atlas-panel[data-snap="peek"] .atlas-more, .atlas-panel[data-snap="peek"] .atlas-chips:empty { display: none; }
  .atlas-panel[data-snap="peek"] .atlas-list { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 6px 12px 12px; scroll-snap-type: x mandatory; flex: none; }
  .atlas-panel[data-snap="peek"] .atlas-list li { flex: 0 0 78vw; scroll-snap-align: start; }
  .atlas-panel[data-snap="peek"] .atlas-card { border-color: var(--lac-rule); height: 100%; box-sizing: border-box; }
  .atlas-panel[data-snap="peek"] .atlas-card-tags { display: none; }

  .atlas-controls { top: auto; bottom: 224px; right: 10px; flex-direction: row; align-items: flex-end; }
  .atlas-controls-group { flex-direction: row; }
  .atlas-ctl + .atlas-ctl { border-top: 0; border-left: 1px solid var(--lac-rule); }
  .atlas-controls .atlas-controls-zoom { display: none; }
  .atlas-drawer-open .atlas-controls { right: 10px; }
  .atlas-layers { top: auto; bottom: 272px; right: 10px; }
  .atlas-drawer-open .atlas-layers { right: 10px; }
  .atlas-legend { display: none; }
  .atlas-heat-note { bottom: 224px; }
  .atlas-notice { top: 8px; left: 8px; right: 8px; transform: none; max-width: none; }
  .maplibregl-ctrl-bottom-right { bottom: 214px; }

  .atlas-drawer { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 86dvh; border-radius: 2px 2px 0 0; border-bottom: 0; z-index: 14; }
  .atlas-drawer-open .atlas-panel { transform: translateY(100%); }
  .atlas-drawer-body { padding: 10px 16px 28px; }
  .atlas-dhead h2 { font-size: 20px; }
  .atlas-dactions .atlas-btn { flex: 1 1 40%; }
  .atlas-cluster { width: min(236px, 80vw); }
  .atlas-tip { display: none; }
  .atlas-palette { padding-top: 6vh; }
  .atlas-keys { min-width: 0; width: 88vw; }
}

@media (max-width: 767px) and (max-height: 620px) {
  .atlas-panel[data-snap="peek"] { transform: translateY(calc(92dvh - 176px)); }
  .atlas-panel-closed .atlas-panel { transform: translateY(calc(92dvh - 176px)); }
  .atlas-controls, .atlas-heat-note { bottom: 188px; }
}