@arcforgelabs/flow 2026.10.45 → 2026.10.47

package/server/ui/flow.css

@@ -11,6 +11,9 @@
      edge, as ClickUp and HubSpot do; the title, toolbar and content start at
      one place on every page. */
   --fx-gutter: clamp(16px, 2vw, 24px);
+  /* The height of every control in a list's toolbar: chips, view tabs,
+     search, Board/List and the page's button. */
+  --fx-control-h: 32px;
   --fx-line-soft: color-mix(in srgb, var(--t-text) 7%, transparent);
   --fx-hover: color-mix(in srgb, var(--t-text) 5%, transparent);
   --fx-focus: 0 0 0 3px color-mix(in srgb, var(--t-ring) 40%, transparent);
@@ -279,6 +282,14 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   box-shadow: 0 8px 24px rgba(0, 0, 0, .18); animation: fx-rise 160ms var(--fx-ease);
 }
 .fx-toast[data-tone="danger"] { background: var(--t-danger); color: var(--t-paper); }
+.fx-toast--stay { display: flex; align-items: flex-start; gap: 12px; }
+.fx-toast__text { flex: 1; min-width: 0; }
+.fx-toast__close {
+  flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -6px -8px -6px 0;
+  border: 0; border-radius: var(--t-radius); background: transparent; color: inherit; cursor: pointer; opacity: .85;
+}
+.fx-toast__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
+.fx-toast__close svg { width: 16px; height: 16px; }
 
 /* ── Table and people ───────────────────────────────────────────────────── */
 .fx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
@@ -420,7 +431,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fx-line); }
 .fx-tabs { display: flex; gap: 2px; }
 .fx-tabs button { flex: none; }
-@media (max-width: 640px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
+@media (max-width: 639px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
 .fx-tabs button {
   display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px;
   border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
@@ -431,14 +442,17 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
 .fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
 
-/* Saved views (saved-views.js): the row of named view tabs over a list, as
-   ClickUp's. The chosen tab is underlined; its ⋯ shows on hover and when
-   chosen. Save and Revert sit at the right while the list differs. */
-.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 32px; margin-bottom: -8px; }
+/* Saved views (saved-views.js): named view tabs in the toolbar, at the
+   right of Group, Sort and Filter (listHead's tools). The chosen tab is a
+   filled pill; its ⋯ shows on hover and when chosen. Save and Revert follow
+   while the list differs. */
+.fx-toolbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
 .fx-views:empty { display: none; }
-.fx-views__item { display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
-.fx-views__item[data-on="true"] { border-bottom-color: var(--t-brand); }
-.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 4px 6px 8px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
+.fx-views__item { display: inline-flex; align-items: center; border-radius: 999px; }
+.fx-views__item:hover { background: var(--fx-hover); }
+.fx-views__item[data-on="true"] { background: var(--t-accent-bg); }
+.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 6px 4px 6px 10px; border-radius: 999px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
 .fx-views__tab:hover, .fx-views__item[data-on="true"] .fx-views__tab { color: var(--t-strong); }
 .fx-views__tab:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 1px; }
 .fx-views__tab .fx-lucide { width: 14px; height: 14px; flex: none; }
@@ -447,11 +461,18 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-views__item .fx-cfm__more { width: 22px; height: 22px; opacity: 0; }
 .fx-views__item:hover .fx-cfm__more, .fx-views__item[data-on="true"] .fx-cfm__more, .fx-views__item .fx-cfm__more[aria-expanded="true"], .fx-views__item .fx-cfm__more:focus-visible { opacity: 1; }
 .fx-views__item .fx-cfm__more .fx-lucide { width: 14px; height: 14px; }
-.fx-views__add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; background: none; color: var(--t-dim); font: 500 13px var(--t-body); cursor: pointer; }
-.fx-views__add:hover { color: var(--t-strong); }
+.fx-views__add { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 4px 9px; border: 0; border-radius: 999px; background: none; color: var(--t-dim); font: 600 13px/1.2 var(--t-body); cursor: pointer; }
+.fx-views__add:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-views__add:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
 .fx-views__add .fx-lucide { width: 14px; height: 14px; }
-.fx-views__end { display: inline-flex; gap: 6px; margin-left: auto; }
+.fx-views__end { display: inline-flex; gap: 6px; margin-left: 4px; }
 @media (hover: none) { .fx-views__item .fx-cfm__more { opacity: 1; } }
+/* A phone keeps the tools on one row of their own that scrolls sideways. */
+@media (max-width: 639px) {
+  .fx-toolbar__tools { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
+  .fx-toolbar__tools > *, .fx-views { flex: none; flex-wrap: nowrap; }
+  .fx-toolbar__end:has(> .fx-toolbar__tools) { flex-wrap: wrap; row-gap: 8px; }
+}
 
 /* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
    only while something on the page needs this person. */
@@ -466,7 +487,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-alerts__close:hover { background: var(--fx-hover); color: var(--t-strong); }
 .fx-alerts__close svg { width: 14px; height: 14px; }
 .fx-alerts__action:focus-visible, .fx-alerts__close:focus-visible { outline: 2px solid var(--t-ring); outline-offset: 2px; }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-alerts { flex-wrap: wrap; }
   .fx-alerts__text { flex-basis: calc(100% - 52px); }
   .fx-alerts__action, .fx-alerts__more { order: 2; }
@@ -572,6 +593,30 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-pop__item[aria-checked="true"] { color: var(--t-strong); font-weight: 600; }
 .fx-pop__tick { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; color: var(--t-accent); }
 .fx-pop__sep { height: 1px; margin: 6px 4px; background: var(--fx-line-soft); }
+/* A row with a trailing control (the sidebar pin). The control does not
+   close the menu. An unpinned pin shows when the pointer is on the row. */
+.fx-pop__row { display: flex; align-items: center; gap: 2px; }
+.fx-pop__row > .fx-pop__item { flex: 1; min-width: 0; }
+.fx-pop__row > .fx-pop__item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-pop__pin, .fx-pop__pin--fixed {
+  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px;
+  border: 0; border-radius: var(--t-radius); background: none; color: var(--t-dim);
+}
+.fx-pop__pin { cursor: pointer; }
+.fx-pop__pin .fx-lucide, .fx-pop__pin--fixed .fx-lucide, .fx-pop__pin .fx-ico, .fx-pop__pin--fixed .fx-ico { width: 15px; height: 15px; }
+.fx-pop__pin[aria-pressed="false"] { opacity: 0; }
+.fx-pop__row:hover .fx-pop__pin[aria-pressed="false"],
+.fx-pop__row:focus-within .fx-pop__pin[aria-pressed="false"],
+.fx-pop__pin:focus-visible { opacity: 1; }
+.fx-pop__pin[aria-pressed="true"], .fx-pop__pin--fixed { color: var(--t-strong); opacity: 1; }
+.fx-pop__pin:hover, .fx-pop__pin:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-pop.fx-pop--side { min-width: 240px; }
+.fx-pop--side .fx-pop__tick { color: inherit; }
+@media (hover: none) { .fx-pop__pin[aria-pressed="false"] { opacity: 1; } }
+@media (max-width: 820px) {
+  .fx-pop--side .fx-pop__item { min-height: 44px; }
+  .fx-pop--side .fx-pop__pin, .fx-pop--side .fx-pop__pin--fixed { width: 44px; height: 44px; }
+}
 .fx-pop__foot { display: flex; justify-content: flex-end; padding: 6px 4px 2px; border-top: 1px solid var(--fx-line-soft); margin-top: 6px; }
 /* A chip with an × that clears it (as ClickUp's "Clear all filters"). */
 .fx-chipset { display: inline-flex; align-items: stretch; }
@@ -649,7 +694,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-dot--stage[data-rank="7"] { --stage: var(--t-dim); }
 .fx-pop--choices .fx-input { min-height: 32px; margin-bottom: 4px; font-size: 13px; }
 .fx-pop__end { display: inline-grid; margin-left: auto; color: var(--t-accent); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-pop.fx-pop--rows { min-width: 0; width: calc(100vw - 16px); }
   .fx-rows__row, .fx-rows__row--sort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
   .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child, .fx-rows__row > .fx-rows__join { grid-column: 1 / -1; }
@@ -785,6 +830,29 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
   .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
+/* Phone: one lane fills the width and snaps. Stage tabs (jobs.js) name the
+   lane; the lane's own head is hidden. Drag stays on a wider screen. */
+.fx-board-tabs { display: none; }
+@media (max-width: 639px) {
+  .fx-main--board .fx-board-tabs:not([hidden]) {
+    display: flex; flex: 1 1 100%; order: -1; gap: 2px; min-width: 0; max-width: 100%;
+    overflow-x: auto; scrollbar-width: none;
+  }
+  .fx-board-tabs button {
+    flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px;
+    padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent;
+    color: var(--t-dim); font: 600 14px var(--t-body); cursor: pointer;
+  }
+  .fx-board-tabs button[aria-selected="true"] { color: var(--t-strong); border-bottom-color: var(--t-brand); }
+  .fx-main--board .fx-frame__body { padding: 0; }
+  .fx-main--board .fx-board {
+    --fx-lane: 100%; grid-auto-columns: 100%; gap: 0; min-width: 0; width: 100%;
+    scroll-snap-type: x mandatory; scrollbar-width: none;
+  }
+  .fx-main--board .fx-board__col { scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0; }
+  .fx-main--board .fx-board__head { display: none; }
+  .fx-main--board .fx-board__cards { max-height: none; padding: 8px; }
+}
 .fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
 .fx-table--jobs tbody tr { cursor: pointer; }
 
@@ -959,13 +1027,74 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-task__activity li::after { content: ""; position: absolute; left: 5.5px; top: 16px; bottom: 0; width: 1px; background: var(--fx-line); }
 .fx-task__activity li:last-child::after { display: none; }
 .fx-task__activity time { display: block; margin-top: 1px; color: var(--t-mute); font-size: 11.5px; }
-@media (max-width: 760px) {
-  .fx-dialog.fx-task { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
-  .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
-  .fx-task__main { padding: 16px; }
-  .fx-task__fields { grid-template-columns: minmax(0, 1fr); }
-  .fx-task__grid:has(> .fx-sidecar [data-tab="fix"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
-  .fx-task__side { border-top: 1px solid var(--fx-line); border-left: 0; }
+/* A record's phone bar and foot. Hidden above a phone, so the desk panel and
+   the invoice header stay as they are. */
+.fx-record, .fx-record__foot { display: none; }
+@media (max-width: 639px) {
+  /* The job panel is the whole screen. Back, the client and the next job
+     sit in the bar; Activity and Fix are tabs under it; the action is fixed
+     at the foot, in thumb reach. */
+  .fx-dialog.fx-task {
+    display: flex; flex-direction: column; inset: 0; width: 100%; max-width: none;
+    height: 100%; max-height: none; margin: 0; border-radius: 0; overflow: hidden;
+  }
+  .fx-dialog.fx-task > .fx-record { flex: none; }
+  .fx-dialog.fx-task .fx-task__grid {
+    display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .fx-dialog.fx-task .fx-task__main { padding: 16px; }
+  .fx-dialog.fx-task .fx-task__fields { grid-template-columns: minmax(0, 1fr); }
+  .fx-dialog.fx-task .fx-task__head, .fx-dialog.fx-task .fx-task__title { display: none; }
+  .fx-dialog.fx-task .fx-task__grid:has(> .fx-sidecar [data-tab="fix"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__grid > .fx-sidecar__head {
+    position: sticky; top: 0; z-index: 2; flex: none;
+    background: var(--t-paper); border-bottom: 1px solid var(--fx-line-soft);
+  }
+  .fx-task__grid > .fx-sidecar__head .fx-sidecar__close, .fx-sidecar--page .fx-sidecar__close { display: none; }
+  .fx-task__grid > .fx-sidecar__head .fx-sidecar__tab, .fx-sidecar--page .fx-sidecar__tab { min-width: 44px; min-height: 44px; }
+  .fx-sidecar--page { border-left: 0; border-top: 1px solid var(--fx-line); }
+  .fx-sidecar--page .fx-sidecar__body { scroll-margin-top: 52px; }
+  .fx-dialog.fx-task .fx-task__actions:not(:empty) {
+    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0;
+    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
+    background: var(--t-paper); border-top: 1px solid var(--fx-line);
+  }
+  .fx-dialog.fx-task .fx-task__actions .fx-btn { flex: 1; min-height: 44px; }
+  .fx-dialog.fx-task:has(.fx-task__actions:not(:empty)) .fx-task__grid,
+  .fx-dialog.fx-task:has([data-action="accept"]) .fx-task__grid { padding-bottom: 68px; }
+  .fx-dialog.fx-task:has([data-action="accept"]) .fx-task__actions { display: none; }
+  .fx-invoice [data-action="accept"], .fx-dialog.fx-task [data-action="accept"] {
+    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 6; width: auto; min-height: 44px;
+  }
+  .fx-record {
+    display: flex; align-items: center; gap: 2px; min-height: 48px; padding: 2px 4px;
+    background: var(--t-paper); border-bottom: 1px solid var(--fx-line-soft);
+  }
+  .fx-record__back, .fx-record__step, .fx-record__menu {
+    flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px;
+    min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: var(--t-radius);
+    background: transparent; color: var(--t-strong); cursor: pointer;
+  }
+  .fx-record__back:disabled, .fx-record__step:disabled { opacity: 0.35; cursor: default; }
+  .fx-record__back:focus-visible, .fx-record__step:focus-visible, .fx-record__menu:focus-visible { box-shadow: var(--fx-focus); }
+  .fx-record__menu[hidden] { display: none; }
+  .fx-record__title, .fx-record .fx-title {
+    flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    color: var(--t-strong); font: 600 16px/1.2 var(--t-body); letter-spacing: 0;
+  }
+  .fx-record .fx-ph { flex: 1; min-width: 0; min-height: 0; gap: 8px; background: transparent; }
+  .fx-record .fx-ph__text { min-width: 0; }
+  .fx-record__end { display: flex; flex: none; align-items: center; }
+  .fx-record__foot:not([hidden]) {
+    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; gap: 8px;
+    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
+    background: var(--t-paper); border-top: 1px solid var(--fx-line);
+  }
+  .fx-record__foot .fx-btn { flex: 1; min-height: 44px; }
+  .fx-invoice > .fx-pager, .fx-invoice .fx-ph__actions { display: none; }
+  .fx-invoice:has(.fx-record__foot:not([hidden])), .fx-invoice:has([data-action="accept"]) { padding-bottom: 72px; }
+  .fx-invoice:has([data-action="accept"]) .fx-record__foot { display: none; }
 }
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
@@ -979,6 +1108,17 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
 .fx-dialog__form { display: grid; gap: 16px; padding: 22px; }
 .fx-dialog__title { color: var(--t-strong); font: var(--t-display-weight) 21px/1.2 var(--t-display); }
 .fx-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
+.fx-dialog[data-phone-layout="sheet"] {
+  position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: min(80vh, 100%);
+  margin: 0; border-radius: var(--t-radius-lg) var(--t-radius-lg) 0 0;
+}
+.fx-sheet__choices { display: grid; gap: 4px; }
+.fx-sheet__choice {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
+  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--t-radius);
+  background: transparent; color: var(--t-strong); font: 600 15px var(--t-body); text-align: left; cursor: pointer;
+}
+.fx-sheet__choice:hover { background: var(--fx-hover); }
 
 /* Search (search.js): a box near the top, results grouped under it. */
 .fx-search-dialog { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; }
@@ -1023,13 +1163,27 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
   .fx-auth__title { font-size: 26px; max-width: none; }
 }
 
-/* A one-message page (sign-in off, an error, no access, Xero's return). */
+/* A one-message page (sign-in off, an error, no access, an OAuth return). */
 .fx-message, .fx-centre .fx-message { min-height: 100vh; place-content: center; justify-items: center; gap: 20px; padding: 32px 16px; }
 .fx-centre .fx-message { display: grid; }
 .fx-message__card { display: grid; gap: 12px; width: min(460px, 100%); padding: 28px; }
 .fx-message__card[data-tone="success"] { border-top: 3px solid var(--t-success); }
 .fx-message__card[data-tone="danger"] { border-top: 3px solid var(--t-danger); }
 .fx-message__card .fx-btn { justify-self: start; }
+.fx-message__marks {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 4px;
+}
+.fx-message__marks--solo { justify-content: flex-start; }
+.fx-message__flow .fx-mark { width: 34px; height: 34px; display: block; }
+.fx-message__plus { color: var(--t-dim); font: 600 18px/1 var(--t-body); }
+.fx-message__result {
+  display: grid; place-items: center; width: 28px; height: 28px; margin-left: 4px;
+  border-radius: 50%; color: var(--t-success); background: var(--t-success-bg);
+}
+.fx-message__result[data-tone="danger"] { color: var(--t-danger); background: var(--t-danger-bg); }
+.fx-message__result .fx-lucide { width: 16px; height: 16px; }
+.fx-message__status { margin: 0; }
+.fx-message__return { margin: 0; color: var(--t-dim); font-size: 13.5px; }
 
 .fx-loading { display: none; min-height: 100vh; place-content: center; gap: 12px; color: var(--t-dim); }
 body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
@@ -1058,7 +1212,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting__value { font-size: 12.5px; color: var(--t-strong); overflow-wrap: anywhere; text-align: right; }
 .fx-setting--wide { grid-template-columns: minmax(0, 1fr); }
 .fx-setting--wide .fx-setting__control { display: block; }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-setting { grid-template-columns: minmax(0, 1fr); }
   .fx-setting__control { justify-content: flex-start; }
   .fx-setting__stack { justify-items: start; }
@@ -1125,6 +1279,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
     background: rgba(0, 0, 0, .32);
   }
   .fx-nav__report { margin-top: 8px; }
+  .fx-nav a, .fx-nav__report, .fx-nav__more { min-height: 44px; }
   .fx-side__end { margin-left: auto; padding: 0; border-top: 0; }
   #user-button { flex: none; }
 }
@@ -1145,15 +1300,36 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-main { padding-top: 20px; }
+  /* A two-line list needs the rows, not the gaps, so seven fit at 375×667.
+     The alert stays one line. The toolbar stays one scrolling row. */
+  .fx-main--frame:has([data-phone-layout="two-line"]) { gap: 8px; padding-top: 12px; }
+  .fx-alerts { flex-wrap: nowrap; }
+  .fx-alerts__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  /* Tabs stay on their own row. The tools beside them stay one row and
+     scroll, so a chip is never covered by the next control. */
+  .fx-listhead, .fx-listhead > .fx-toolbar { min-width: 0; max-width: 100%; }
+  .fx-listhead .fx-toolbar__tools { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .fx-listhead .fx-toolbar__end,
+  .fx-listhead .fx-toolbar__end:has(> .fx-toolbar__tools) {
+    flex: 1 1 100%; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; row-gap: 0;
+  }
   .fx-title { font-size: 22px; }
   .fx-table thead { display: none; }
   .fx-table.fx-table--sized { width: 100% !important; min-width: 0; table-layout: auto; }
   .fx-table--sized td { white-space: normal; }
   .fx-table--sized colgroup { display: none; }
   .fx-table--sized td.fx-c-end { display: none; }
-  .fx-table, .fx-table tbody, .fx-table tr, .fx-table td { display: block; width: 100%; }
+  /* Tables outside a column list still stack. People keeps its own grid. */
+  .fx-table-scroll:not([data-phone-layout="two-line"]) .fx-table,
+  .fx-table-scroll:not([data-phone-layout="two-line"]) .fx-table tbody,
+  .fx-table-scroll:not([data-phone-layout="two-line"]) .fx-table tr,
+  .fx-table-scroll:not([data-phone-layout="two-line"]) .fx-table td,
+  .fx-table:not(.fx-table--sized, .fx-people),
+  .fx-table:not(.fx-table--sized, .fx-people) tbody,
+  .fx-table:not(.fx-table--sized, .fx-people) tr,
+  .fx-table:not(.fx-table--sized, .fx-people) td { display: block; width: 100%; }
   .fx-table tr { padding: 12px 14px; border-bottom: 1px solid var(--fx-line-soft); }
   .fx-table td { padding: 4px 0; border: 0; }
   .fx-table td:nth-child(2), .fx-table td:nth-child(3) { display: inline-flex; width: auto; margin: 6px 10px 0 0; vertical-align: middle; }
@@ -1170,20 +1346,58 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-people td:nth-child(2) .fx-select { width: 100%; }
   .fx-people td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; }
   .fx-people td:nth-child(3):empty { display: none; }
-  /* Jobs list: the tick at the left of each row and group head; the client
-     and total on the first line, then each other column on its own line,
-     with its name. */
-  .fx-table--jobs tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
-  .fx-table--jobs td, .fx-table--jobs td:nth-child(2), .fx-table--jobs td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
-  .fx-table--jobs tr > td.fx-tick-cell { grid-column: 1; grid-row: 1; align-self: start; padding-top: 2px; }
-  .fx-table--jobs tr.fx-row-link > td:not(.fx-tick-cell) { grid-column: 2 / -1; }
-  .fx-table--jobs tr.fx-row-link > td.fx-c-client { grid-area: 1 / 2; }
-  .fx-table--jobs tr.fx-row-link > td.fx-c-total { grid-area: 1 / 3; }
-  .fx-table--jobs td.fx-c-end { display: none; }
-  .fx-table--jobs tr.fx-row-link > td[data-label]:not(.fx-c-client, .fx-c-total, .fx-c-stage)::before { content: attr(data-label) " "; color: var(--t-dim); font-size: 12px; }
-  .fx-table--jobs tr.fx-table__group { grid-template-columns: 28px minmax(0, 1fr); background: var(--t-s1); }
-  .fx-table--jobs tr.fx-table__group > td.fx-tick-cell { grid-row: 1; align-self: center; padding: 0; }
-  .fx-table--jobs tr.fx-table__group > td { background: none; }
+  /* Column lists (columns.js): two lines, 56px. Line 1 is the title columns
+     and the amount. Line 2 is the status and up to three meta columns.
+     The tick stays at the left with a 44px hit area. */
+  [data-phone-layout="two-line"] .fx-table,
+  [data-phone-layout="two-line"] .fx-table tbody { display: block; width: 100% !important; min-width: 0; }
+  [data-phone-layout="two-line"] .fx-table tbody tr:not(.fx-table__group) {
+    display: flex; flex-wrap: wrap; align-items: center; position: relative;
+    box-sizing: border-box; height: 56px; min-height: 56px; max-height: 56px;
+    margin: 0; padding: 6px 12px 6px 44px; overflow: hidden;
+    border-bottom: 1px solid var(--fx-line-soft);
+  }
+  [data-phone-layout="two-line"] .fx-table tbody tr:not(.fx-table__group)::after {
+    content: ""; order: 3; flex-basis: 100%; height: 0;
+  }
+  [data-phone-layout="two-line"] .fx-table td,
+  [data-phone-layout="two-line"] .fx-table td:nth-child(2),
+  [data-phone-layout="two-line"] .fx-table td:nth-child(3) {
+    display: block; width: auto; margin: 0; padding: 0; border: 0;
+    white-space: nowrap; background: none;
+  }
+  [data-phone-layout="two-line"] .fx-tick-cell {
+    position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center;
+    width: 44px; height: 56px; padding: 0;
+  }
+  [data-phone-layout="two-line"] .fx-tick-cell .fx-tick { width: 44px; height: 44px; margin: 0; }
+  [data-phone-layout="two-line"] [data-phone-slot="title"] {
+    order: 1; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
+    color: var(--t-strong); font-weight: 600;
+  }
+  [data-phone-layout="two-line"] [data-phone-slot="title"] :is(a, button) {
+    display: inline-flex; align-items: center; max-width: 100%; min-height: 44px;
+  }
+  [data-phone-layout="two-line"] [data-phone-slot="end"] {
+    order: 2; flex: none; margin-left: 8px; font-variant-numeric: tabular-nums;
+  }
+  [data-phone-layout="two-line"] [data-phone-slot="meta"] {
+    order: 5; flex: 0 1 auto; min-width: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis;
+    color: var(--t-dim); font-size: 12px; line-height: 16px;
+  }
+  [data-phone-layout="two-line"] td.fx-c-stage,
+  [data-phone-layout="two-line"] td.fx-c-status { order: 4; color: inherit; }
+  [data-phone-layout="two-line"] .fx-stage { padding-block: 0; line-height: 16px; }
+  [data-phone-layout="two-line"] [data-phone-slot="hide"],
+  [data-phone-layout="two-line"] td.fx-c-end { display: none; }
+  [data-phone-layout="two-line"] tr.fx-table__group {
+    display: flex; align-items: center; box-sizing: border-box; height: 32px; min-height: 32px; max-height: 32px;
+    margin: 0; padding: 0 8px 0 44px; overflow: visible; background: var(--t-s1);
+    border-bottom: 1px solid var(--fx-line-soft);
+  }
+  [data-phone-layout="two-line"] tr.fx-table__group td { height: 32px; padding: 0; background: none; }
+  [data-phone-layout="two-line"] tr.fx-table__group .fx-tick-cell { height: 32px; }
+  [data-phone-layout="two-line"] tr.fx-table__group .fx-tick-cell .fx-tick { width: 44px; height: 44px; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -1212,7 +1426,10 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
 .fx-price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
 .fx-price__head .fx-search { margin: 0 0 6px; width: 260px; }
-@media (max-width: 560px) { .fx-price__head .fx-search { width: 100%; } }
+@media (max-width: 639px) {
+  .fx-price__head .fx-search { width: 100%; }
+  .fx-price__settings .fx-select { min-height: 44px; }
+}
 .fx-price__table th { position: sticky; top: 0; z-index: 1; }
 .fx-price__table td { padding-top: 9px; padding-bottom: 9px; }
 .fx-price__table td.fx-num, .fx-price__table th.fx-num { text-align: right; white-space: nowrap; }
@@ -1384,13 +1601,27 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__delete { color: var(--t-danger); background: color-mix(in srgb, var(--t-danger) 12%, transparent); }
 .fx-cfs__delete:hover { background: color-mix(in srgb, var(--t-danger) 28%, transparent); }
 .fx-cfs__delete .fx-lucide { width: 16px; height: 16px; }
-@media (max-width: 720px) {
+@media (max-width: 639px) {
   .fx-cfm { grid-template-columns: minmax(0, 1fr) 36px 32px; column-gap: 8px; }
   .fx-cfm .fx-cfm__by, .fx-cfm .fx-cfm__date, .fx-cfm .fx-cfm__where { display: none; }
   .fx-cfm__head, .fx-cfm__row { padding-left: 16px; }
   .fx-cfm__create { padding-left: 16px; }
   .fx-cfm__search { flex: 1 1 100%; width: auto; }
   .fx-cfm__edit { display: none !important; }
+  /* Custom fields uses the same phone slots as a column list: name and the
+     menu on line 1, up to three facts on line 2, 56px. */
+  .fx-cfm__row {
+    display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box;
+    height: 56px; min-height: 56px; max-height: 56px; padding: 6px 8px 6px 16px; overflow: hidden;
+  }
+  .fx-cfm__row::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
+  .fx-cfm__row > * { display: none; }
+  .fx-cfm__row > [data-phone-slot="title"] { display: block; order: 1; flex: 1 1 0; min-width: 0; }
+  .fx-cfm__row > [data-phone-slot="end"] { display: flex; order: 2; flex: none; align-items: center; }
+  .fx-cfm__row > [data-phone-slot="meta"] {
+    display: block; order: 5; flex: 0 1 auto; min-width: 0; max-width: 40%; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap; color: var(--t-dim); font-size: 12px; line-height: 16px;
+  }
 }
 /* Invoice rules (invoice-rules.js): a row's Edit button and switch, and the
    rule dialog's condition lines. */
@@ -1405,10 +1636,10 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-rule__value { display: flex; gap: 6px; align-items: center; min-width: 0; }
 .fx-rule__many { display: grid; gap: 2px; max-height: 160px; overflow: auto; padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: 8px; width: 100%; }
 .fx-rule__delete { justify-self: start; color: var(--t-danger); }
-@media (max-width: 640px) {
+@media (max-width: 639px) {
   .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
 }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-set__row { gap: 12px; }
   .fx-set__control .fx-input { width: 140px; }
   .fx-set__control .fx-input[type="number"] { width: 72px; }
@@ -1416,7 +1647,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 .fx-multi { position: relative; width: 220px; max-width: 100%; }
 .fx-multi__summary { display: flex; align-items: center; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-@media (max-width: 600px) { .fx-multi { width: 150px; } }
+@media (max-width: 639px) { .fx-multi { width: 150px; } }
 .fx-multi__summary::-webkit-details-marker { display: none; }
 .fx-multi__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 100%; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--t-paper); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
 .fx-multi__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
@@ -1504,9 +1735,19 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-listhead__edge { height: 0; }
 .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -32px; }
 .fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
+/* Every control in the toolbar is one height (--fx-control-h). Under a
+   tab line, the controls keep 8px clear of the line; only the tabs sit on it. */
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip, .fx-views__add, .fx-views__tab) { min-height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-btn:not(.fx-btn--sm) { padding-block: 0; font-size: 14px; }
+.fx-listhead .fx-toolbar :is(.fx-btn, .fx-chip) { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__button { width: var(--fx-control-h); height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-find__input { height: var(--fx-control-h); }
+.fx-listhead .fx-toolbar .fx-seg { padding: 2px; }
+.fx-listhead .fx-toolbar .fx-seg__item { min-height: calc(var(--fx-control-h) - 4px); }
+.fx-listhead > .fx-toolbar:not(.fx-toolbar--plain) > :not(.fx-tabs) { margin-bottom: 8px; }
 @media (max-width: 820px) { .fx-listhead[data-sticky] { top: 60px; } }
 /* On a phone the head would hide too many rows: it scrolls away. */
-@media (max-width: 560px) { .fx-listhead[data-sticky] { position: static; } }
+@media (max-width: 639px) { .fx-listhead[data-sticky] { position: static; } }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are
    ticked. "N selected ×", then icon actions in groups, then More. It takes
@@ -1519,6 +1760,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 }
 .fx-bulk[hidden] { display: none; }
 .fx-bulk[aria-busy="true"] { opacity: .7; pointer-events: none; }
+.fx-bulk[aria-busy="true"]:has([data-busy]) { opacity: 1; }
+.fx-bulk__act .fx-spinner { flex: none; border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }
 .fx-bulk__acts { display: flex; align-items: center; gap: 2px; min-width: 0; }
 .fx-bulk__count { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--t-accent-brd, var(--fx-line)); border-radius: var(--t-radius); background: var(--t-accent-bg); color: var(--t-accent); font-weight: 600; }
 .fx-bulk__clear, .fx-bulk__act { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; cursor: pointer; }
@@ -1540,13 +1783,18 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__grid { display: grid; }
 .fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
-@media (max-width: 560px) {
+@media (max-width: 639px) {
   .fx-bulk { bottom: 10px; padding: 4px; }
   .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
   .fx-bulk__act { padding: 7px 6px; }
   .fx-bulk__sep { margin: 0 2px; }
   .fx-bulk__act:not(.fx-bulk__act--primary) .fx-bulk__word { display: none; }
 }
+/* Phone and tablet: Delete and Void are a full touch target. */
+@media (max-width: 1023px) {
+  .fx-invoice .fx-ph__actions .fx-btn--danger { min-height: 44px; }
+  .fx-bulk__act[data-tone="danger"] { min-width: 44px; min-height: 44px; justify-content: center; }
+}
 
 /* Xero › Import (server/ui/xero-import.js): Review compares one fact per row
    with ✓ or ≠ between the sides; the list and history tick rows for the bulk
@@ -1602,3 +1850,63 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }
 .fx-find--open .fx-find__input { display: block; }
 .fx-find--open .fx-find__button { display: none; }
+
+/* Xero usage on the Xero card (server/ui/xero-usage.js). Colours are tokens. */
+.fx-xero-orgs { display: grid; gap: 18px; }
+.fx-xero-org { display: grid; gap: 12px; }
+.fx-xu { display: grid; gap: 14px; }
+.fx-xu__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
+.fx-xu__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.fx-xu-ring { position: relative; width: 112px; height: 112px; flex: none; }
+.fx-xu-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
+.fx-xu-ring__track { fill: none; stroke: var(--fx-line); stroke-width: 3; }
+.fx-xu-ring__used { fill: none; stroke: var(--t-accent); stroke-width: 3; stroke-linecap: round; }
+.fx-xu[data-tone="warn"] .fx-xu-ring__used { stroke: var(--t-warn); }
+.fx-xu[data-tone="danger"] .fx-xu-ring__used { stroke: var(--t-danger); }
+.fx-xu-ring__label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; }
+.fx-xu-ring__num { color: var(--t-strong); font: 650 22px/1 var(--t-body); font-variant-numeric: tabular-nums; }
+.fx-xu-ring__of { color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
+.fx-xu__fold { display: grid; gap: 12px; padding: 12px 14px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); }
+.fx-xu__fold summary { cursor: pointer; color: var(--t-strong); font-weight: 650; }
+.fx-xu__fold summary:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-xu-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
+.fx-xu-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-legend i, .fx-xu-lane { display: inline-block; }
+.fx-xu-legend i { width: 8px; height: 8px; border-radius: 2px; }
+.fx-xu-hours { display: flex; align-items: flex-end; gap: 3px; height: 88px; }
+.fx-xu-hour { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
+.fx-xu-hour__stack { display: flex; flex-direction: column-reverse; width: 100%; height: var(--h, 0%); border-radius: 2px 2px 0 0; overflow: hidden; }
+.fx-xu-hour__stack i { display: block; width: 100%; height: var(--part, 0%); }
+.fx-xu-lane[data-lane="writes"] { background: var(--t-accent); }
+.fx-xu-lane[data-lane="sync"] { background: var(--t-success); }
+.fx-xu-lane[data-lane="reads"] { background: var(--t-warn); }
+.fx-xu-lane[data-lane="other"] { background: color-mix(in srgb, var(--t-text) 35%, var(--t-bg)); }
+.fx-xu-budget { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--fx-hover); }
+.fx-xu-budget i { flex: none; width: var(--part, 0%); height: 100%; }
+.fx-xu-dots { display: flex; flex-wrap: wrap; gap: 12px 16px; }
+.fx-xu-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
+.fx-xu-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--t-dim); }
+.fx-xu-dot[data-tone="success"]::before { background: var(--t-success); }
+.fx-xu-dot[data-tone="warn"]::before { background: var(--t-warn); }
+.fx-xu-dot[data-tone="danger"]::before { background: var(--t-danger); }
+.fx-xu-days { position: relative; display: flex; align-items: stretch; gap: 8px; height: 108px; }
+.fx-xu-days__line { position: absolute; left: 0; right: 0; bottom: calc(16px + (100% - 20px) * var(--warn, 0.7)); height: 0; border-top: 1px dashed var(--t-warn); pointer-events: none; }
+.fx-xu-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.fx-xu-day__bar { flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
+.fx-xu-day b { display: block; width: 70%; max-width: 28px; height: var(--h, 0%); border-radius: 3px 3px 0 0; background: var(--t-accent); }
+.fx-xu-day[data-warning="true"] b { background: var(--t-warn); }
+.fx-xu-day[data-over="true"] b { background: var(--t-danger); }
+.fx-xu-day > span:last-child { color: var(--t-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
+.fx-xu-rows { display: grid; gap: 6px; }
+.fx-xu-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
+.fx-xu-row span { color: var(--t-text); }
+.fx-xu-row b { color: var(--t-strong); font-weight: 650; font-variant-numeric: tabular-nums; }
+.fx-xu .fx-notice { margin-top: 4px; }
+@media (max-width: 639px) {
+  .fx-xu__top { gap: 14px; }
+  .fx-xu-ring { width: 96px; height: 96px; }
+  .fx-xu-ring__num { font-size: 20px; }
+  .fx-xu-hours { overflow-x: auto; }
+  .fx-xu-hour { flex: none; width: 10px; }
+  .fx-xu__fold { padding: 12px; }
+}