mock: redesign around the planning workflow

- one unified canvas: discovery is a drawer over the map (chips: lunch /
  dinner / afternoon / hotel), the plan rail stays visible — no more
  modal focus-mode / dimmed rail
- smoother discovery: 'you might like' suggestion block in the rail
  (unfilled slots / more-like-this-day), region placeholders open the
  drawer, chat still filters an open drawer
- frictionless replacement: every planned stop card expands to inline
  alternatives with one-click swap (incumbent demotes to backup, new
  stop takes its sequence position); candidate cards are draggable and
  drop onto a same-slot stop (swap) or the plan (hold as idea)
- multi-scale comparison: persistent bottom dock lines up 2-4
  candidates/stops side by side (walk from anchor, walk to hotel,
  duration, price, tags) at both hotel and stop scale, with choose /
  idea actions
- gentler load: states read as in plan / idea / backup, issues panel
  becomes 'nudges' (one-tap fixes, 'this day looks good' when clear),
  budget phrasing ('comfortably paced' / 'running a bit full')
- new day strip: horizontal L1 overview of the whole day (stops, legs,
  buffer, return-to-hotel) with hour axis; click a block to fly
- mobile: drawer becomes a bottom sheet, dock sits above the tab bar

mock/index.html

@@ -46,20 +46,22 @@
     <div class="daytabs" id="daytabs"></div>
   </div>
   <div class="tb-right">
-    <span class="badge" id="issue-badge" title="Plan issues">⚠ <b id="issue-count">0</b> issues</span>
+    <span class="badge" id="nudge-badge" title="Plan nudges">✓ looking good</span>
   </div>
 </header>
 
 <div id="app" class="hidden">
   <aside id="rail">
+    <div id="daystrip"></div>
     <div class="rail-block" id="transit-block"></div>
+    <div class="rail-block" id="sugg-block"></div>
     <div id="rail-body"></div>
     <div class="rail-foot">
       <div class="budget">
         <div class="budget-label"><span id="budget-text">…</span></div>
         <div class="budget-bar"><div id="budget-fill"></div></div>
       </div>
-      <div id="issues-panel"></div>
+      <div id="nudges"></div>
       <div class="legend">
         <span class="tc t-user">·</span> you
         <span class="tc t-sched">·</span> booked
@@ -70,10 +72,14 @@
     </div>
   </aside>
   <div id="mapwrap">
-    <div id="focusbar" class="hidden">
+    <!-- discovery: a drawer over the map, the plan stays visible behind it -->
-      <span id="focusbar-title"></span>
+    <div id="discover" class="hidden">
-      <span class="fb-hint">talk to filter</span>
+      <div class="disc-head">
-      <button id="focusbar-x" class="fb-x" title="Exit (Esc)">✕</button>
+        <div class="disc-chips" id="disc-chips"></div>
+        <div id="disc-title"></div>
+        <button id="disc-x" class="disc-x" title="Close (Esc)">✕</button>
+      </div>
+      <div class="disc-list" id="disc-list"></div>
     </div>
     <div id="l3-editor" class="hidden">
       <div class="l3-title" id="l3-title">Route</div>
@@ -91,6 +97,9 @@
   </aside>
 </div>
 
+<!-- comparison dock: side-by-side alternatives at any scale -->
+<div id="dock" class="hidden"></div>
+
 <nav id="mobiletabs" aria-label="Views">
   <button data-t="plan" class="on">🗓️ Plan</button>
   <button data-t="map">🗺️ Map</button>

mock/styles.css

@@ -29,73 +29,71 @@ button { font: inherit; }
 .dz-icon { font-size: 30px; margin-bottom: 8px; }
 .dz-text { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
 .dz-text b { color: var(--ink); font-size: 14.5px; }
-.land-hint { margin-top: 14px; font-size: 12px; color: var(--ink2); text-align: center; }
 
-/* ---------------- buttons ---------------- */
 .btn { border: 0; border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .12s, transform .05s; }
 .btn:active { transform: translateY(1px); }
+.btn:disabled { opacity: .55; cursor: default; }
 .btn.primary { background: var(--accent); color: #fff; }
 .btn.primary:hover { filter: brightness(1.08); }
 .btn.ghost { background: #eef0f4; color: var(--ink); }
 .btn.ghost:hover { background: #e4e7ee; }
 .btn.small { padding: 8px 12px; font-size: 12.5px; }
+.btn.tiny { padding: 4px 9px; font-size: 11px; border-radius: 8px; }
 
 /* ---------------- topbar ---------------- */
 #topbar { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 15; background: var(--card);
-  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
+  display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--line); pointer-events: auto; }
 .brand { font-weight: 800; letter-spacing: .12em; font-size: 13px; color: var(--accent); }
 .crumb { font-size: 13px; font-weight: 600; margin-left: 12px; }
 .crumb.sub { color: var(--ink2); font-weight: 500; }
-.badge { font-size: 12.5px; background: #fdf3e3; color: #8a6116; border: 1px solid #f0dcae; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
+.tb-left { display: flex; align-items: center; min-width: 0; }
+.tb-right { display: flex; align-items: center; gap: 10px; }
+.badge { font-size: 12.5px; background: #fdf3e3; color: #8a6116; border: 1px solid #f0dcae; padding: 5px 10px; border-radius: 999px; cursor: default; }
 .badge.ok { background: #eaf6ef; color: #1f7a45; border-color: #c9e8d6; }
 
-/* ---------------- app layout ---------------- */
+/* ---------------- app grid ---------------- */
 #app { position: fixed; top: 46px; left: 0; right: 0; bottom: 0; z-index: 10; display: grid;
-  grid-template-columns: 350px 1fr 390px; pointer-events: none; }  /* center column: let events reach the map */
+  grid-template-columns: 354px 1fr 350px; }
 #rail, #chat { min-height: 0; pointer-events: auto; }
 #rail { background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
 #rail-body, #chat-body { min-height: 0; }
 #rail-body { flex: 1; overflow-y: auto; padding: 10px 12px 4px; }
-#rail-foot { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: #fbfcfd; }
+#rail-body.drop-open { outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 8px; }
-#mapwrap { position: relative; pointer-events: none; }  /* let wheel/drag reach the Leaflet map underneath */
+.rail-block { padding: 8px 12px 0; }
+.rail-foot { border-top: 1px solid var(--line); padding: 10px 14px 12px; background: #fbfcfd; }
+.mapwrap, #mapwrap { position: relative; pointer-events: none; }  /* let wheel/drag reach the Leaflet map underneath */
 #chat { background: var(--card); border-left: 1px solid var(--line); display: flex; flex-direction: column; }
 #chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
 #chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
 #chat-input { flex: 1; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; outline: none; }
 #chat-input:focus { border-color: var(--accent); }
 
-/* ---------------- rail: transit / stops / legs ---------------- */
+/* ---------------- day strip (L1 overview) ---------------- */
+#daystrip { padding: 10px 12px 2px; }
+.strip-track { position: relative; height: 30px; background: #eef1f6; border-radius: 8px; overflow: hidden; }
+.sb { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; font-size: 9.5px; font-weight: 700;
+  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
+  padding: 0 3px; cursor: pointer; color: #fff; min-width: 12px; }
+.sb.visit { background: var(--accent); }
+.sb.meal { background: #5f8f4f; }
+.sb.transit { background: #274b8f; }
+.sb.region { background: #c98a1b; }
+.sb.leg { background: #c3cad6; cursor: default; }
+.sb.hotel { background: #7a8291; }
+.sb.gap { background: transparent; cursor: default; }
+.sb.dimmed { background: #fff; border: 1.5px dashed #b9c0cc; color: var(--ink2); }
+.sb:hover { filter: brightness(1.1); z-index: 2; }
+.strip-axis { position: relative; height: 14px; margin-top: 1px; }
+.strip-axis .tick { position: absolute; transform: translateX(-50%); font-size: 9px; color: var(--ink2); }
+
+/* ---------------- chips & facts ---------------- */
 .transit-chip { display: flex; align-items: center; gap: 8px; background: #f2f5fa; border: 1px solid #dfe6f2;
-  border-radius: 10px; padding: 8px 10px; margin: 4px 12px; font-size: 12.5px; }
+  border-radius: 10px; padding: 7px 10px; font-size: 12px; line-height: 1.4; cursor: pointer; }
+.transit-chip:hover { border-color: var(--blue); }
 .transit-chip .tt { font-weight: 700; }
 .transit-chip .ts { color: var(--ink2); }
-.stop-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; background: var(--card);
-  box-shadow: 0 1px 2px rgba(20,24,35,.05); transition: box-shadow .2s, border-color .2s; position: relative; }
-.stop-card.flash { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181,83,60,.15); }
-.stop-card.dragging { opacity: .45; }
-.stop-card.optional { border: 1.5px dashed #cfae5f; background: #fffdf6; }
-.grip { cursor: grab; color: #c3c9d4; font-size: 14px; margin-right: 2px; user-select: none; letter-spacing: -2px; }
-.grip:active { cursor: grabbing; }
-.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
-.sc-name { font-weight: 700; font-size: 13.5px; }
-.sc-times { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.sc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
-.sc-sub { font-size: 11.5px; color: var(--ink2); margin-top: 5px; }
-.sc-sub a { color: var(--blue); text-decoration: none; }
-.sc-move { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; opacity: .25; }
-.stop-card:hover .sc-move { opacity: 1; }
-.sc-move button { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 22px; height: 20px; cursor: pointer; font-size: 10px; color: var(--ink2); }
-.sc-move button:hover { background: #eef0f4; }
-
-.leg-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 22px; padding: 3px 8px; cursor: pointer;
-  border-radius: 8px; font-size: 12px; color: var(--ink2); width: fit-content; }
-.leg-row:hover { background: #eef0f4; }
-.leg-ico { font-size: 13px; }
-.leg-sub { font-size: 11px; color: var(--ink2); opacity: .8; }
-
-/* ---------------- time/number chips (confidence hierarchy) ---------- */
 .tc { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
-  padding: 2.5px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+  padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
 .t-user { background: var(--ink); color: #fff; }
 .t-user::before { content: "📌"; font-size: 9px; }
 .t-sched { background: #274b8f; color: #fff; }
@@ -105,23 +103,144 @@ button { font: inherit; }
 .t-search::before { content: "~"; font-weight: 800; }
 .t-llm { background: transparent; border: 1.5px dashed #b9c0cc; color: var(--ink2); }
 .t-llm::after { content: "est"; font-size: 9px; opacity: .8; }
-.t-maybe { background: #fdf3e3; color: #8a6116; border: 1px dashed #d9b96a; }
+.pchip { font-size: 11.5px; color: var(--ink2); font-weight: 600; white-space: nowrap; }
-.pchip { font-size: 11.5px; color: var(--ink2); font-weight: 600; }
 .sug-note { font-size: 11px; color: var(--ink2); font-style: italic; }
 
-/* ---------------- budget / issues / legend ---------------- */
+/* ---------------- stop cards ---------------- */
+.stop-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0; background: var(--card);
+  position: relative; transition: border-color .15s, box-shadow .15s; cursor: pointer; }
+.stop-card:hover { border-color: #c9cfda; box-shadow: 0 2px 8px rgba(20,24,35,.06); }
+.stop-card.flash { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181,83,60,.15); }
+.stop-card.dragging { opacity: .45; }
+.stop-card.drop-target { border-color: var(--accent); border-style: dashed; background: #fdf6f3; }
+.stop-card.st-maybe { border: 1.5px dashed #cfae5f; background: #fffdf6; }
+.stop-card.st-alt { border: 1.5px dashed #9fb0cc; background: #f8fafd; }
+.grip { cursor: grab; color: #c3c9d4; font-size: 14px; margin-right: 2px; user-select: none; letter-spacing: -2px; }
+.grip:active { cursor: grabbing; }
+.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
+.sc-name { font-weight: 700; font-size: 13.5px; }
+.sc-times { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.sc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
+.sc-sub { font-size: 11.5px; color: var(--ink2); margin-top: 5px; }
+.sc-sub a { color: var(--blue); text-decoration: none; }
+.sc-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; align-items: center; }
+.sc-state { cursor: default; }
+.t-idea { background: #fdf3e3; color: #8a6116; border: 1px dashed #d9b96a; }
+.t-backup { background: #eef1f6; color: #4a5a78; border: 1px dashed #9fb0cc; }
+
+/* inline alternatives expander */
+.alts { display: none; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
+.alts.open { display: block; }
+.altrow { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px dashed #eef0f4; flex-wrap: wrap; }
+.altrow:last-child { border-bottom: 0; }
+.ar-name { font-size: 12.5px; font-weight: 600; }
+.altrow .pchip { font-size: 10.5px; }
+
+/* rail item numbers (match the map markers) */
+.num { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px;
+  font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.stop-card.st-maybe .num { background: #cfae5f; }
+.stop-card.st-alt .num { background: #9fb0cc; }
+
+.leg-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px 22px; padding: 3px 8px; cursor: pointer;
+  border-radius: 8px; font-size: 12px; color: var(--ink2); }
+.leg-row:hover { background: #eef0f4; }
+.leg-ico { font-size: 13px; }
+.leg-sub { font-size: 11px; color: var(--ink2); opacity: .8; }
+.leg-row.dim { opacity: .55; }
+
+/* vague / region placeholder stops */
+.region-note { font-size: 11px; color: var(--ink2); margin-top: 5px; }
+.refine-btn { margin-top: 7px; border: 1px solid var(--line); background: #f5f3ef; color: var(--accent);
+  border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
+.refine-btn:hover { background: #fff; border-color: var(--accent); }
+
+/* ---------------- "you might like" suggestion block ---------------- */
+.sugg-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
+.sugg-note { font-weight: 500; color: var(--ink2); }
+.sugg-open { margin-left: auto; border: 0; background: none; color: var(--blue); font-size: 11px; cursor: pointer; text-decoration: underline; }
+.sugg-open:hover { color: var(--accent); }
+.sugg-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; font-size: 12.5px; flex-wrap: wrap; }
+.sugg-row:hover { background: #f4f6fa; }
+.sr-name { font-weight: 600; }
+.sugg-row .pchip { font-size: 10.5px; }
+
+/* ---------------- nudges ---------------- */
+#nudges { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
+.nudge { border: 1px solid #e7d9f0; background: #f7f3fc; border-radius: 10px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
+.nudge .nt { font-weight: 700; color: #5d3a8a; }
+.nudge .nb { color: var(--ink2); margin-top: 3px; }
+.nudge .btn { margin-top: 7px; }
+.nudge-ok { font-size: 12px; color: #1f7a45; padding: 2px 0; }
+.legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; font-size: 10.5px; color: var(--ink2); align-items: center; }
+.legend .tc { font-size: 10px; padding: 1px 6px; }
 .budget-label { font-size: 11.5px; color: var(--ink2); margin-bottom: 5px; }
 .budget-bar { height: 7px; background: #e7ebf2; border-radius: 99px; overflow: hidden; }
 #budget-fill { height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .5s ease, background .3s; }
 #budget-fill.warn { background: var(--warn); }
-#issues-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
+
-.issue { border: 1px solid #f0dcae; background: #fdf6e8; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.45; }
+/* ---------------- discovery drawer (over the map, plan stays visible) ---------------- */
-.issue .it { font-weight: 700; color: #8a6116; }
+#discover { position: absolute; top: 12px; right: 12px; bottom: 12px; width: 348px; z-index: 12;
-.issue .fix { margin-top: 6px; }
+  background: var(--card); border-radius: 16px; box-shadow: var(--shadow); pointer-events: auto;
-.issue.fixed { border-color: #c9e8d6; background: #eef8f2; opacity: .75; }
+  display: flex; flex-direction: column; overflow: hidden; animation: slidein .22s ease; }
-.issue.fixed .it { color: #1f7a45; }
+@keyframes slidein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
-.legend { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 10px; font-size: 10.5px; color: var(--ink2); align-items: center; }
+.disc-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); position: relative; }
-.legend .tc { font-size: 10px; padding: 1px 6px; }
+.disc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
+.dchip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px;
+  font-size: 12px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: all .12s; }
+.dchip:hover { border-color: var(--accent); color: var(--accent); }
+.dchip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
+#disc-title { font-size: 11.5px; color: var(--ink2); margin-top: 8px; }
+#disc-title b { color: var(--ink); }
+.disc-x { position: absolute; top: 10px; right: 10px; border: 0; background: #eef0f4; width: 26px; height: 26px;
+  border-radius: 50%; cursor: pointer; font-size: 11px; color: var(--ink); }
+.disc-x:hover { background: #e2e5ec; }
+.disc-list { flex: 1; overflow-y: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
+.disc-empty { font-size: 12.5px; color: var(--ink2); padding: 14px 6px; }
+
+.candcard { border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; background: #fff;
+  transition: border-color .15s, box-shadow .15s; cursor: grab; }
+.candcard:hover { border-color: #c9cfda; box-shadow: 0 2px 8px rgba(20,24,35,.07); }
+.candcard.dragging { opacity: .5; }
+.candcard.flash { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(181,83,60,.18); }
+.cc-head { display: flex; gap: 10px; align-items: center; }
+.cc-img { width: 46px; height: 46px; border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center; }
+.cc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.cc-emoji { font-size: 22px; }
+.cc-name { font-weight: 700; font-size: 13.5px; line-height: 1.25; }
+.cc-pitch { font-size: 12px; color: var(--ink2); margin-top: 6px; line-height: 1.45; }
+.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
+.cc-tags { font-size: 10.5px; color: var(--ink2); margin-top: 6px; opacity: .85; }
+.cc-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
+.cc-no { margin-left: auto; border: 0; background: none; color: var(--ink2); font-size: 11px; cursor: pointer; text-decoration: underline; }
+.cc-no:hover { color: var(--err); }
+
+/* discovery pins: numbered teardrops */
+.candpin { width: 24px; height: 24px; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px;
+  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
+  border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .12s; cursor: pointer; }
+.candpin:hover { transform: rotate(-45deg) scale(1.15); }
+.candpin > * { transform: rotate(45deg); }
+
+/* ---------------- comparison dock ---------------- */
+#dock { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 30;
+  width: min(1060px, calc(100vw - 740px)); background: var(--card); border-radius: 16px; box-shadow: var(--shadow);
+  padding: 12px 16px 14px; animation: dockup .25s ease; }
+@keyframes dockup { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
+.dock-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink2); margin-bottom: 10px; }
+.dock-clear { margin-left: auto; border: 0; background: none; color: var(--ink2); font-size: 11.5px; cursor: pointer; text-decoration: underline; }
+.dock-clear:hover { color: var(--err); }
+.dock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 10px; }
+.dock-col { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fbfcfe; }
+.dc-name { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; }
+.dc-thumb { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
+.dc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
+.dc-tags { font-size: 10.5px; color: var(--ink2); margin-top: 6px; }
+.dc-acts { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
+.dc-state { font-size: 11.5px; color: var(--ok); font-weight: 600; }
+.dc-rm { margin-left: auto; border: 0; background: #eef0f4; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; cursor: pointer; color: var(--ink2); }
+.dc-rm:hover { background: #e2e5ec; color: var(--err); }
 
 /* ---------------- chat ---------------- */
 .msg { max-width: 94%; border-radius: 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; animation: pop .18s ease; }
@@ -220,17 +339,6 @@ button { font: inherit; }
 .daytab.dep:hover { border-color: var(--line); color: var(--ink2); }
 .daytab.over { border-color: var(--accent); background: #fbf1ee; color: var(--accent); }
 
-/* ---------------- stop states ---------------- */
-.t-planned { background: #e7ebf2; color: var(--ink); }
-.t-maybe { background: #fdf3e3; color: #8a6116; border: 1px dashed #d9b96a; }
-.t-alt { background: #eef1f6; color: #4a5a78; border: 1px dashed #9fb0cc; }
-.sc-state { cursor: pointer; }
-.sc-state:hover { filter: brightness(.94); text-decoration: underline; }
-.stop-card.st-maybe { border: 1.5px dashed #cfae5f; background: #fffdf6; }
-.stop-card.st-alt { border: 1.5px dashed #9fb0cc; background: #f8fafd; }
-.or-row { margin: 2px 0 2px 24px; font-size: 11px; color: var(--ink2); font-style: italic; }
-.leg-row.dim { opacity: .55; }
-
 /* state menu popover */
 .pop { position: absolute; top: 36px; right: 8px; z-index: 30; background: #fff; border: 1px solid var(--line);
   border-radius: 10px; box-shadow: var(--shadow); padding: 4px; display: flex; flex-direction: column; min-width: 170px; }
@@ -238,65 +346,16 @@ button { font: inherit; }
 .pop button:hover { background: #eef0f4; }
 .pop button.danger { color: var(--err); }
 
-/* rail item numbers (match the map markers) */
-.num { width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11px;
-  font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-.stop-card.st-maybe .num { background: #cfae5f; }
-.stop-card.st-alt .num { background: #9fb0cc; }
-
 /* hotel / train pins */
 .hotel-pin { font-size: 22px; transform: translate(-50%,-90%); transition: transform .15s; }
 .hotel-pin.hotel-alt { filter: grayscale(1); opacity: .75; }
 
-/* resolved issues toggle */
-.resolved-toggle { border: 0; background: none; color: var(--ink2); font-size: 11.5px; cursor: pointer;
-  text-decoration: underline; padding: 2px 0; }
-.resolved-toggle:hover { color: var(--ink); }
-
-/* ---------------- focus mode (slot search) ---------------- */
-#rail.dimmed { opacity: .35; pointer-events: none; }
-#focusbar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 12;
-  background: var(--card); border-radius: 999px; box-shadow: var(--shadow); padding: 7px 8px 7px 15px;
-  display: flex; gap: 12px; align-items: center; font-size: 12.5px; pointer-events: auto; }
-#focusbar-title b { color: var(--accent); }
-.fb-hint { color: var(--ink2); font-size: 11px; white-space: nowrap; }
-.fb-x { border: 0; background: #eef0f4; width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
-  font-size: 11px; color: var(--ink); flex-shrink: 0; }
-.fb-x:hover { background: #e2e5ec; }
-
-/* candidate pins: teardrop + name label, right on the map */
-.candwrap { position: relative; }
-.cand { position: absolute; left: 0; bottom: 0; width: 26px; height: 26px; background: var(--accent); color: #fff;
-  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
-  border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .12s; cursor: pointer; }
-.cand::after { content: ''; width: 7px; height: 7px; background: #fff; border-radius: 50%; }
-.candwrap:hover .cand { transform: rotate(-45deg) scale(1.15); }
-.cand-lbl { position: absolute; left: 24px; top: 6px; white-space: nowrap; font-size: 11.5px; font-weight: 700;
-  background: rgba(255,255,255,.94); color: var(--ink); padding: 2px 8px; border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0,0,0,.3); pointer-events: none; }
-
-/* click-to-open result popup */
-.focpop { width: 230px; font-size: 12.5px; }
-.fp-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
-.fp-sub { color: var(--ink2); line-height: 1.4; margin-bottom: 8px; }
-.fp-dist { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-bottom: 8px; }
-.fp-dist .pchip { margin: 0; }
-.fp-facts { display: flex; gap: 7px; align-items: center; margin-bottom: 9px; }
-.fp-facts .tc { margin: 0; }
-.fp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
-
 /* map markers: current-day numbered vs other-day dots */
 .mk { background: #b5533c; color: #fff; width: 26px; height: 26px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
   border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .15s; }
 .mkd { background: #fff; color: #8b93a3; border: 2px dashed #9aa3b2; box-shadow: none; }
 
-/* vague / region placeholder stops */
-.region-note { font-size: 11px; color: var(--ink2); margin-top: 5px; }
-.refine-btn { margin-top: 7px; border: 1px solid var(--line); background: #f5f3ef; color: var(--accent);
-  border-radius: 999px; font-size: 11.5px; font-weight: 600; padding: 4px 10px; cursor: pointer; }
-.refine-btn:hover { background: var(--card2); border-color: var(--accent); }
-
 /* ---------------- mobile: single pane + bottom tab bar ---------------- */
 #mobiletabs { display: none; }
 @media (max-width: 860px) {
@@ -304,7 +363,7 @@ button { font: inherit; }
   /* topbar: crumb + badge on row 1, horizontally scrollable day tabs on row 2 */
   #topbar { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 9px 12px; }
   .tb-left { flex: 1 1 auto; min-width: 0; }
-  .crumb { font-size: 12.5px; }
+  .crumb { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .daytabs { margin-left: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
   .daytab { flex-shrink: 0; white-space: nowrap; font-size: 11.5px; padding: 5px 10px; }
   .badge { font-size: 11.5px; padding: 4px 9px; }
@@ -324,10 +383,11 @@ button { font: inherit; }
   .tc { font-size: 11px; }
   /* map overlays */
   #l3-editor { left: 8px; right: 8px; width: auto; bottom: 10px; }
-  #focusbar { max-width: 94vw; padding: 6px 6px 6px 12px; gap: 8px; font-size: 11.5px; }
+  #discover { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62%; }
-  .fb-hint { display: none; }
+  .candpin { width: 21px; height: 21px; font-size: 11px; }
-  .cand-lbl { font-size: 10.5px; }
+  /* comparison dock above the tab bar */
-  .focpop { width: 200px; }
+  #dock { width: calc(100vw - 24px); bottom: 66px; padding: 10px 12px; }
+  .dock-grid { grid-template-columns: 1fr 1fr; }
   /* landing + detail modal */
   .land-card { padding: 24px 20px; }
   .land-card h1 { font-size: 21px; }