Five UI and data features for return journeys and results page

- Replace native date inputs with always-open custom calendar; return
  journeys show two months side-by-side with Airbnb-style range selection
- Add min-connection filter (30/40/50/60 min) for the inbound leg of
  return journeys, separate from the outbound connection filter
- Fix total journey time: naive datetime subtraction across CET/BST was
  1 h too long outbound and 1 h too short inbound
- Filter inbound circle line suggestions when connection ≥ 40 min: only
  show services arriving ≥ 5 min before GWR departure at Paddington
- Add Std / SP labels to Eurostar fare lines so users can distinguish
  Standard from Standard Premier
- Row selection with a fixed summary bar showing NR + Eurostar + circle
  totals; selection is preserved in the URL
- Load walk-on fares sequentially, outbound section first
- Mobile: card-grid table layout, hide headcode/platform on small screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

templates/base.html

@@ -182,10 +182,47 @@
     }
 
     @media (max-width: 640px) {
-      .card {
-        padding: 1.25rem;
+      .card { padding: 1.25rem; }
+
+      /* Convert results table to a 2-column card layout per row */
+      .results-table, .results-table tbody { display: block; }
+      .results-table thead { display: none; }
+      .results-table tr {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        border-bottom: 2px solid #e2e8f0;
+        padding: 0.1rem 0;
       }
-      .col-transfer { display: none; }
+      .results-table td { padding: 0.35rem 0.45rem; font-size: 0.8rem; border-bottom: none; }
+
+      /* First journey leg (NR outbound / Eurostar inbound) */
+      .results-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
+      /* Transfer column: hidden */
+      .col-transfer { display: none !important; }
+      /* Second journey leg */
+      .results-table td:nth-child(3) { grid-column: 2; grid-row: 1; }
+      /* Total: spans both columns, right-aligned */
+      .results-table td:nth-child(4) {
+        grid-column: 1 / -1; grid-row: 2;
+        text-align: right;
+        border-top: 1px solid #e2e8f0;
+        padding: 0.25rem 0.45rem 0.3rem;
+      }
+
+      /* Hide non-essential detail on mobile */
+      .mobile-hide { display: none !important; }
+      .fare-seats  { display: none !important; }
+
+      /* Show connection time hint */
+      .mobile-conn { display: block !important; }
+
+      /* Flow arrow: hide on mobile */
+      .results-table thead th.flow-step::after { display: none; }
+      .results-table thead th.flow-step { padding-right: 0; }
+
+      /* Selection bar: smaller on mobile */
+      #selection-bar { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
+      .sel-totals { gap: 0.75rem; }
     }
 
     a { color: #00539f; }
@@ -277,6 +314,41 @@
     .row-slow                     { background: #fff5f5; }
     .row-alt                      { background: #f7fafc; }
     .row-unreachable              { background: #f7fafc; color: #a0aec0; }
+    .row-selected                 { background: #ebf8ff !important; }
+    tr.row-selectable             { cursor: pointer; }
+    tr.row-selectable:hover:not(.row-selected) { filter: brightness(0.97); }
+
+    /* Journey flow arrow between column headers */
+    .results-table thead th.flow-step { position: relative; padding-right: 1.4rem; }
+    .results-table thead th.flow-step::after {
+      content: '›';
+      position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%);
+      color: #cbd5e0; font-size: 1.5rem; font-weight: 300; line-height: 1;
+    }
+
+    /* Mobile: hidden by default, shown on mobile */
+    .mobile-conn { display: none; }
+    .fare-seats  { display: inline; }
+
+    /* Selection summary bar */
+    #selection-bar {
+      display: none; position: fixed; bottom: 0; left: 0; right: 0;
+      background: #fff; border-top: 2px solid #00539f;
+      padding: 0.65rem 1rem;
+      box-shadow: 0 -2px 10px rgba(0,0,0,0.12); z-index: 200;
+      font-size: 0.88rem;
+    }
+    .sel-bar-inner {
+      max-width: 1100px; margin: 0 auto;
+      display: flex; justify-content: space-between; align-items: center;
+      flex-wrap: wrap; gap: 0.5rem;
+    }
+    .sel-totals { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
+    .sel-clear {
+      background: none; border: 1px solid #cbd5e0; border-radius: 4px;
+      padding: 0.2rem 0.6rem; font-size: 0.8rem; cursor: pointer; color: #718096;
+    }
+    .sel-clear:hover { background: #f0f4f8; }
 
     /* Empty state */
     .empty-state                  { color: #4a5568; text-align: center; padding: 3rem 2rem; }