Live updates during a cycle; Filter & sort dropdown on phones; layout polish

- Worker publishes the rows swept so far every few seconds (LivePublishSeconds)
  with a DataVersion stamp; the dashboard reloads on each new version, so
  tables, the Overview and open dialogs update mid-cycle. Shared files are
  written to a temp file and swapped in, so readers never see half a file.
- Phones / tablets: one Filter & sort button opens a column list instead of a
  row of chips, on every table.
- Details: a wrapped Simple / Advanced toggle sits on the left.
- Card fields: fixed-height dialog; field list and add list share it evenly.

web/layout.css

@@ -333,7 +333,7 @@ table.xf-table thead th:has(> .xf-btn):not(.sortable-th) { position: relative; p
 .xf-bar { display: none; }
 @media (max-width: 1100px) {
     .xf-bar {
-        display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; overflow: visible;   /* chips wrap: no sideways scrolling */
+        display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; overflow: visible;   /* one short row: Filter & sort (+ Card fields / Clear) */
         position: sticky; top: var(--sticky-top, 112px); z-index: 25;
         background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--bg-card);
         border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 8px rgba(0,0,0,0.25);
@@ -509,3 +509,29 @@ a.nav-brand:focus-visible { outline: 2px solid #3498db; outline-offset: 3px; }
 
 /* Excel filter: three list modes */
 .xf-seg3 .xf-seg-btn { font-size: 0.78em; padding-left: 4px; padding-right: 4px; }
+
+/* Phones / tablets: the "Filter & sort" button and its column list */
+.xf-chip.xf-filterbtn { font-weight: 600; padding: 7px 13px; }
+.xf-chip.xf-filterbtn svg:first-child { width: 12px; height: 12px; }
+.xf-picker .xf-pick-list { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding: 0 8px 8px; }
+.xf-pick-col {
+    display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 10px; text-align: left; cursor: pointer;
+    background: none; border: 0; border-bottom: 1px solid var(--border-light); color: var(--text-main); font: inherit;
+}
+.xf-pick-col:hover, .xf-pick-col:focus-visible { background: var(--hover-bg); }
+.xf-pick-name { flex: 1 1 auto; min-width: 0; font-weight: 600; }
+.xf-pick-state { flex: none; font-size: 0.8em; color: var(--text-muted); }
+.xf-pick-col.xf-on .xf-pick-state { color: #b7950b; font-weight: 600; }
+[data-theme="dark"] .xf-pick-col.xf-on .xf-pick-state { color: #f1c40f; }
+.xf-pick-chev { width: 14px; height: 14px; flex: none; color: var(--text-muted); }
+
+/* Card fields: the dialog keeps a fixed height and the two halves share it evenly */
+.xf-fields-overlay .modal-content.xf-fields-sheet { height: calc(100vh - 100px); height: calc(100dvh - 100px); }
+@media (max-width: 1100px) { .xf-fields-overlay .modal-content.xf-fields-sheet { height: calc(100vh - 80px) !important; height: calc(100dvh - 80px) !important; } }
+@media (max-width: 600px) { .xf-fields-overlay .modal-content.xf-fields-sheet { height: calc(100dvh - 72px) !important; } }
+.xf-fields-sheet .xf-fields { flex: 1 1 0; min-height: 120px; max-height: none; }
+.xf-fields-sheet .xf-add { flex: 1 1 0; min-height: 150px; margin-top: 10px; }
+.xf-fields-sheet .xf-add .xf-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
+
+/* Details title: when the toggle has to wrap under the name it sits on the left */
+#detailsTitle.dt-wrapped .dt-toggle { margin-left: 0; }