/* Phone layout. Keep desktop geometry and rendering settings unchanged. */
.mobile-only { display: none; }
@media (max-width: 700px), (max-width: 950px) and (max-height: 500px) {
  .mobile-only { display: inline-flex; }
  body.mobile-viewer { --dock-w: 0px !important; --lidar-panel-w: 0px; }
  /* vh includes space behind mobile browser chrome; dvh follows its bars. */
  .mobile-viewer #app { height: 100svh; height: 100dvh; }
  .mobile-viewer #app { --mobile-bottom: max(8px, env(safe-area-inset-bottom)); }
  .mobile-viewer #topbar { padding: 3px 8px; gap: 5px; height: 44px; }
  .mobile-viewer #topbar .brand-mark { display: none; }
  .mobile-viewer #topbar button, .mobile-viewer #backToMap { font-size: 12px; padding: 6px 8px; }
  .mobile-viewer #mobileMore { margin-left: auto; }
  .mobile-viewer #mobileMore { background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
  .mobile-viewer #topbar #schematicToggle { font-size: 0; }
  .mobile-viewer #schematicToggle::after { content: attr(data-mobile-label); font-size: 12px; }
  .mobile-viewer #lidarViewBtn { max-width: 82px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-viewer #topbarSpacer { display: none; }
  .mobile-viewer #mobileMorePanel { position: absolute; top: 44px; right: 8px; width: min(300px, calc(100vw - 16px)); padding: 10px; background: var(--panel-bg-solid); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
  .mobile-viewer #mobileMorePanel[hidden] { display: none; }
  .mobile-viewer #mobileMorePanel > div { position: static; }
  .mobile-viewer #mobileMorePanel > div > div:not([hidden]) { left: 0; right: 0; top: 100%; width: 100%; max-width: 100%; box-sizing: border-box; }
  .mobile-viewer #info { left: 8px !important; right: 8px; transform: none; padding: 6px 9px; gap: 5px; justify-content: flex-end; }
  .mobile-viewer #info .info-item:has(#infoBandel), .mobile-viewer #info .info-opt-date, .mobile-viewer #info .info-opt-une, .mobile-viewer #info .info-opt-frame, .mobile-viewer #info .info-sep, .mobile-viewer #info .info-label { display: none; }
  .mobile-viewer #info .info-item:has(#infoPlats) { margin-right: auto; min-width: 0; align-items: flex-start; }
  .mobile-viewer #infoPlats { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-viewer #info .info-value { font-size: 12px; }
  .mobile-viewer #infoKm::before { content: 'Km '; }
  .mobile-viewer #infoM::before { content: '+'; }
  .mobile-viewer #infoM { min-width: 3ch; }
  .mobile-viewer #hud { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); transform: none; padding: 2px 4px; gap: 0; border-radius: 10px; }
  .mobile-viewer #hud > button { position: relative; flex: 0 0 36px; width: 36px; height: 44px; padding: 0; font-size: 12px; background: transparent; }
  .mobile-viewer #hud > button.active { background: var(--mint); background-clip: content-box; border: 7px solid transparent; border-radius: 12px; }
  .mobile-viewer #scrubber { flex: 1; min-width: 45px; width: auto; margin: 0 5px; }
  .mobile-viewer #speedLabel, .mobile-viewer #hintWrap { display: none; }
  .mobile-viewer #compass { width: 42px; height: 42px; top: 82px !important; right: 8px; }
  .mobile-viewer #compass svg { width: 42px; height: 42px; }
  .mobile-viewer #map-corner:not(.expanded) { width: 120px !important; height: 100px !important; right: 8px; bottom: calc(56px + var(--mobile-bottom)); top: auto !important; }
  .mobile-viewer #map-corner:not(.expanded) #mapLayersBtn,
  .mobile-viewer #map-corner:not(.expanded) .basemap-switcher,
  .mobile-viewer #map-corner:not(.expanded) .leaflet-control-zoom { display: none; }
  .mobile-viewer #map-corner:not(.expanded) .leaflet-control-attribution { font-size: 8px; line-height: 1.1; max-width: 112px; }
  .mobile-viewer #map-corner.expanded { inset: 82px 8px calc(56px + var(--mobile-bottom)); width: auto !important; height: auto !important; }
  .mobile-viewer #mapDock, .mobile-viewer #mapDockHandle { display: none; }
  /* The desktop preview duplicates the full LiDAR view and obscures the
     panorama on phones. Keep the full viewer available through its button. */
  .mobile-viewer #pointcloud-corner { display: none !important; }
  .mobile-viewer #schematic-drawer { position: fixed; inset: 0; height: 100dvh; border-radius: 0; z-index: 100; }
  .mobile-viewer #schematicToolbar { padding: max(6px, env(safe-area-inset-top)) 8px 6px; gap: 8px; }
  .mobile-viewer #schemLayerChips { flex: 1; flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
  .mobile-viewer .schem-chip { flex-shrink: 0; }
  .mobile-viewer #mobileTracksClose { flex-shrink: 0; min-width: 44px; min-height: 44px; justify-content: center; align-items: center; border: 1px solid var(--border); background: var(--panel-bg-solid); color: var(--text); border-radius: 8px; }
  .mobile-viewer #schemResizeHandle { display: none; }
  .mobile-viewer #schematic { touch-action: none; }
  .mobile-viewer #schematic-drawer.open ~ #topbar { top: 0; }
  .mobile-viewer #lidarToolbar { left: 8px; right: 8px; bottom: var(--mobile-bottom); max-height: 32dvh; width: auto; overflow: auto; justify-content: flex-start; }
  .mobile-viewer #lidarToolbar .ltb-group { padding: 2px 5px; }
  .mobile-viewer #lidarToolbar .ltb-label { display: none; }
  .mobile-viewer #app:has(#lidarView:not([hidden])) #map-corner:not(.expanded) { bottom: auto; top: 86px !important; }
  .mobile-map #topbar { flex-wrap: wrap; padding: 6px 10px; gap: 8px; }
  .mobile-map .brand .brand-lockup { height: 24px; }
  .mobile-map #searchWrap { order: 10; flex: 1 0 100%; width: 100%; max-width: none; margin: 0; box-sizing: border-box; }
  .mobile-map #searchInput { font-size: 16px; }
  .mobile-map #searchResults { width: 100%; max-width: 100%; box-sizing: border-box; }
  .mobile-account #topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .mobile-account #whoami { max-width: 45%; overflow-wrap: anywhere; }
  .mobile-account #layout { flex-direction: column; padding: 12px; gap: 16px; }
  .mobile-account #tabs { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .mobile-account .tabs-sec { width: 100%; margin: 8px 0 0; }
  .mobile-account #panel { width: 100%; overflow-x: auto; }
  .mobile-account #panel input:not([type=checkbox]), .mobile-account #panel select { max-width: 100%; box-sizing: border-box; font-size: 16px; }
  .mobile-login { overflow-x: hidden; }
  .mobile-login .login-form { width: auto; margin: 110px 22px 90px; }
  .mobile-login .login-navbar { left: 22px; right: 22px; top: 24px; }
  .mobile-login .login-navbar nav { margin-left: auto; gap: 14px; }
  .mobile-login .login-navbar .brand-lockup { max-width: 135px; }
  .mobile-login .login-form input { box-sizing: border-box; font-size: 16px; }
}