Add drag & drop for entries and per-stay band colours

Calendar chips can be dragged onto another in-range day (multi-day entries shift end_date by the same delta in one PATCH); day-editor rows get a drag handle to reorder within a day, patching sort_order only for changed positions. Continues/dropoff ghost chips and stay bands are not draggable; touch devices fall back to the existing click/edit flow. Each stay band now gets a deterministic colour from an 8-hue palette by chronological index, mirrored as dots in the summary Areas list.

public/js/views/summary.js

@@ -2,6 +2,7 @@
 // days, nights, flights, hotels, travel legs, activities, total km, and the
 // list of locations in visit order.
 import { el } from '../dom.js';
+import { stayColor } from './stayBands.js';
 
 export function renderSummary(tctx) {
   const route = tctx.route || {};
@@ -76,9 +77,16 @@ export function renderSummary(tctx) {
   if (areas.length) {
     const areaBlock = el('div', { class: 'loc-block' }, el('h3', {}, 'Areas'));
     const ul = el('ul', { class: 'area-list' });
-    for (const a of areas) {
-      ul.appendChild(el('li', {}, `🏙️ ${a.name} — ${a.days} ${a.days === 1 ? 'day' : 'days'}`));
-    }
+    // areas arrive in the same chronological order as computeStayLayout sorts
+    // stays, so index i shares the band colour (stayColor(i)).
+    areas.forEach((a, i) => {
+      ul.appendChild(el(
+        'li',
+        { class: 'area-item' },
+        el('span', { class: 'area-dot', style: { background: stayColor(i) } }),
+        `🏙️ ${a.name} — ${a.days} ${a.days === 1 ? 'day' : 'days'}`,
+      ));
+    });
     areaBlock.appendChild(ul);
     section.appendChild(areaBlock);
   }