@arcforgelabs/flow 2026.10.46 → 2026.10.48-1

package/server/ui/flow.css

@@ -282,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; }
@@ -357,6 +365,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-tile .fx-logo--icon { background: var(--fx-hover); color: var(--t-strong); box-shadow: inset 0 0 0 1px var(--fx-line); }
 .fx-tile h3 { overflow: hidden; color: var(--t-strong); font: 600 14.5px/1.35 var(--t-body); text-overflow: ellipsis; white-space: nowrap; }
 .fx-tile__meta { color: var(--t-dim); font-size: 12.5px; white-space: nowrap; }
+.fx-tile__go { display: none; }
 .fx-logo--icon .fx-lucide { width: 22px; height: 22px; }
 .fx-logo img { width: 28px; height: 28px; object-fit: contain; }
 .fx-logo--lg { width: 52px; height: 52px; }
@@ -585,6 +594,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; }
@@ -798,6 +831,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; }
 
@@ -972,13 +1028,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 ─────────────────────────────────────────────────────────────── */
@@ -992,6 +1109,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; }
@@ -1152,6 +1280,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; }
 }
@@ -1174,13 +1303,34 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @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; }
@@ -1197,20 +1347,78 @@ 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; }
+  /* Tiles: every card is one 56px row, as a list row: the mark, the name,
+     the status and ›. The blurb and the button stay on the page it opens. */
+  .fx-int-grid, .fx-tiles__grid { gap: 8px; }
+  :is(.fx-int-card, .fx-tile)[data-phone-layout="one-line"] {
+    display: flex; align-items: center; gap: 12px; box-sizing: border-box;
+    height: 56px; padding: 0 8px 0 12px;
+  }
+  .fx-int-card[data-phone-layout="one-line"]:is(:hover, :focus-visible) { transform: none; box-shadow: none; }
+  [data-phone-layout="one-line"] .fx-int-card__head { display: contents; }
+  [data-phone-layout="one-line"] :is(.fx-int-card__blurb, .fx-int-card__btn) { display: none; }
+  [data-phone-layout="one-line"] .fx-logo { width: 32px; height: 32px; border-radius: var(--t-radius); }
+  [data-phone-layout="one-line"] .fx-logo img { width: 20px; height: 20px; }
+  [data-phone-layout="one-line"] .fx-logo--icon .fx-lucide { width: 18px; height: 18px; }
+  [data-phone-layout="one-line"] h3 {
+    flex: 1; min-width: 0; overflow: hidden; font: 600 14.5px/1.35 var(--t-body);
+    text-overflow: ellipsis; white-space: nowrap;
+  }
+  [data-phone-layout="one-line"] :is(.fx-status, .fx-tile__meta) { flex: none; }
+  [data-phone-layout="one-line"] .fx-tile__go { display: inline-flex; flex: none; color: var(--t-dim); }
+  [data-phone-layout="one-line"] .fx-tile__go .fx-lucide { width: 18px; height: 18px; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -1239,7 +1447,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: 639px) { .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; }
@@ -1411,13 +1622,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. */
@@ -1556,6 +1781,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; }
@@ -1584,6 +1811,11 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .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
@@ -1699,3 +1931,22 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-xu-hour { flex: none; width: 10px; }
   .fx-xu__fold { padding: 12px; }
 }
+
+/* Contacts (server/ui/contacts.js) and the pending-invoice Create offer.
+   Phone targets stay on this page only, so other screenshots stay valid. */
+.fx-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.fx-offer > .fx-notice { flex: 1 1 220px; }
+.fx-contacts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.fx-contacts__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-contacts__search { flex: 1 1 180px; max-width: 320px; }
+.fx-contacts .fx-card { padding: 16px 20px; }
+.fx-contacts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
+.fx-contacts__wide { grid-column: 1 / -1; }
+.fx-contacts textarea.fx-input { min-height: 96px; padding: 8px 10px; resize: vertical; }
+.fx-contacts .fx-person { color: inherit; text-decoration: none; }
+@media (max-width: 639px) {
+  .fx-contacts__grid { grid-template-columns: minmax(0, 1fr); }
+  .fx-offer .fx-btn,
+  .fx-contacts :is(.fx-btn, .fx-input, .fx-select, .fx-check) { min-height: 44px; }
+  .fx-contacts .fx-help { min-width: 44px; min-height: 44px; }
+}