@arcforgelabs/flow 2026.10.48 → 2026.10.49

package/server/ui/flow.css

@@ -205,13 +205,20 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 
 /* ── Notices, pills, tags, toasts ──────────────────────────────────────── */
 .fx-notice {
-  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px;
+  display: block; padding: 12px 14px;
   border: 1px solid var(--t-accent-brd); border-radius: var(--t-radius);
   background: var(--t-accent-bg); color: var(--t-text); font-size: 14px;
 }
 .fx-notice[data-tone="warn"] { border-color: var(--t-warn-brd); background: var(--t-warn-bg); }
 .fx-notice[data-tone="danger"] { border-color: var(--t-danger-brd); background: var(--t-danger-bg); color: var(--t-danger); }
 .fx-panel > .fx-notice { margin: 12px; }
+/* The title leads the text on the same line ("Problem. No Xero contact…"). */
+.fx-notice > strong { margin-right: 6px; }
+.fx-notice__short { display: none; }
+@media (max-width: 639px) {
+  .fx-notice__short { display: inline; }
+  .fx-notice .fx-notice__long { display: none; }
+}
 
 /* The job changed after its invoice was made (job-change.js): was / now per
    changed fact. Was is struck through; Now is the work system's value. */
@@ -371,24 +378,27 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-logo--lg { width: 52px; height: 52px; }
 .fx-logo--lg img { width: 34px; height: 34px; }
 
-.fx-logo--xl { width: 112px; height: 112px; border-radius: 22px; }
-.fx-logo--xl img { width: 68px; height: 68px; }
 .fx-chip--static { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; font-size: 12.5px; cursor: default; }
 
 /* One integration's page: hero, then the setup beside its facts. */
 .fx-int-page { display: grid; gap: 24px; }
-.fx-int-hero { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
-.fx-int-hero__text { display: grid; gap: 8px; flex: 1; min-width: 260px; }
-.fx-int-hero__text .fx-title { font-size: 34px; }
-.fx-int-hero__maker { display: flex; gap: 10px; align-items: baseline; color: var(--t-strong); font-weight: 650; }
-.fx-int-hero__blurb { max-width: 64ch; color: var(--t-text); font-size: 15.5px; }
-.fx-int-hero__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
+.fx-int-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
+.fx-int-hero .fx-title { min-width: 0; font-size: 28px; overflow-wrap: anywhere; }
+.fx-int-hero__actions { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; }
+.fx-int-hero__actions .fx-progress { left: auto; right: 0; }
 .fx-int-page__grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
 .fx-int-page__main { display: grid; gap: 28px; }
 .fx-int-page__main > .fx-alerts { margin: 0; }
 .fx-int-section { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fx-line); }
 .fx-int-section__title { color: var(--t-strong); font: 650 17px/1.3 var(--t-body); }
 .fx-int-section .fx-btn { justify-self: start; }
+/* A folded section (Set up, Settings): a person opens it. Its chevron
+   points right when closed and down when open, as the table folds do. */
+.fx-int-fold > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: -10px 0; cursor: pointer; list-style: none; }
+.fx-int-fold > summary::-webkit-details-marker { display: none; }
+.fx-int-fold > summary::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 120ms var(--fx-ease); }
+.fx-int-fold[open] > summary::after { transform: rotate(45deg) translateY(-2px); }
+.fx-int-fold:not([open]) { gap: 0; }
 .fx-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
 .fx-steps li { position: relative; padding-left: 38px; min-height: 26px; counter-increment: step; font-size: 14.5px; line-height: 1.55; }
 .fx-steps li::before {
@@ -419,8 +429,6 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 @media (max-width: 900px) {
   .fx-int-page__grid { grid-template-columns: minmax(0, 1fr); }
   .fx-int-page__meta { position: static; }
-  .fx-logo--xl { width: 72px; height: 72px; border-radius: 16px; }
-  .fx-logo--xl img { width: 44px; height: 44px; }
 }
 .fx-drawer .fx-select { width: 100%; }
 
@@ -503,7 +511,7 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-crumbs { display: flex; gap: 8px; color: var(--t-dim); font-size: 13.5px; }
 .fx-crumbs a { color: var(--t-dim); text-decoration: none; }
 .fx-crumbs a:hover { color: var(--t-strong); text-decoration: underline; }
-.fx-invoice { display: grid; gap: 20px; }
+.fx-invoice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
 .fx-invoice__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; }
 .fx-invoice__main, .fx-invoice__aside { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
 .fx-invoice__aside:empty { display: none; }
@@ -558,6 +566,29 @@ a.fx-strong:hover { text-decoration: underline; }
   .fx-lines { overflow-x: auto; }
   .fx-lines__table { min-width: 680px; }
 }
+/* CardRows (cardRows in kit.js): on a phone a table is a list of small
+   cards, never a sideways scroll. Each cell sits where the table's areas
+   place it, under its column name. */
+@media (max-width: 639px) {
+  .fx-lines { overflow-x: visible; }
+  .fx-cardrows, .fx-cardrows tbody { display: block; width: 100%; min-width: 0; }
+  .fx-cardrows thead { display: none; }
+  .fx-cardrows tr {
+    display: grid; grid-template-columns: var(--fx-cardrows-columns); grid-template-areas: var(--fx-cardrows-areas);
+    gap: 10px 8px; padding: 14px 16px; border-bottom: 1px solid var(--fx-line-soft);
+  }
+  .fx-cardrows td,
+  .fx-cardrows td:first-child,
+  .fx-cardrows td:last-child,
+  .fx-lines__table--read td { display: grid; align-content: end; gap: 4px; width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
+  .fx-cardrows td[data-label]::before {
+    content: attr(data-label); color: var(--t-dim);
+    font: var(--t-label-weight) var(--t-label-size)/1.3 var(--t-body); letter-spacing: var(--t-label-spacing); text-transform: var(--t-label-case);
+  }
+  .fx-cardrows td[data-end] { justify-items: end; text-align: right; }
+  .fx-cardrows :is(.fx-input, .fx-select, .fx-btn) { min-height: 44px; }
+  .fx-cardrows .fx-btn--icon { width: 44px; }
+}
 
 /* ── Jobs board ─────────────────────────────────────────────────────────── */
 .fx-main > * { min-width: 0; }
@@ -1086,6 +1117,9 @@ th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
   }
   .fx-record .fx-ph { flex: 1; min-width: 0; min-height: 0; gap: 8px; background: transparent; }
   .fx-record .fx-ph__text { min-width: 0; }
+  /* A short number (FL-0001) shows whole; the status pill is compact beside it. */
+  .fx-record .fx-ph__text .fx-status { flex: none; padding-inline: 8px; font-size: 12px; }
+  .fx-record .fx-ph__text .fx-status::before { display: none; }
   .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;
@@ -1204,18 +1238,25 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-setting + .fx-setting { border-top: 1px solid var(--fx-line-soft); }
 .fx-setting__text { display: grid; gap: 3px; min-width: 0; }
 .fx-setting__name { color: var(--t-strong); font: 500 14.5px/1.35 var(--t-body); }
+.fx-setting__head { display: flex; align-items: center; gap: 2px; min-width: 0; }
+.fx-setting__head .fx-help { margin: -4px 0; border: 0; background: none; cursor: pointer; }
 .fx-setting__hint { margin: 0; color: var(--t-dim); font-size: 13px; line-height: 1.45; }
 .fx-setting[data-tone="danger"] .fx-setting__hint { color: var(--t-danger); }
-.fx-setting__control { display: flex; justify-content: flex-end; min-width: 0; }
+.fx-setting__control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
 .fx-setting__control > .fx-input, .fx-setting__control > .fx-select, .fx-setting__stack { width: 320px; max-width: 100%; }
+.fx-setting__control > .fx-input[type="number"] { width: 96px; }
 .fx-setting__control .fx-swatches { flex-wrap: nowrap; }
 .fx-setting__stack { display: grid; gap: 6px; justify-items: end; }
 .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: 639px) {
-  .fx-setting { grid-template-columns: minmax(0, 1fr); }
-  .fx-setting__control { justify-content: flex-start; }
+  /* A wide control (a box, a menu, a choice) goes under its name. Switches
+     and buttons stay at the right. */
+  .fx-setting:has(> .fx-setting__control :is(.fx-select, .fx-multi, .fx-input:not([type="number"]), textarea, .fx-seg, .fx-swatches, .fx-setting__stack)),
+  .fx-setting--wide { grid-template-columns: minmax(0, 1fr); }
+  .fx-setting:has(> .fx-setting__control :is(.fx-select, .fx-multi, .fx-input:not([type="number"]), textarea, .fx-seg, .fx-swatches, .fx-setting__stack)) > .fx-setting__control { justify-content: flex-start; }
+  .fx-setting__control > :is(.fx-select, .fx-multi, .fx-input:not([type="number"])) { width: 100%; }
   .fx-setting__stack { justify-items: start; }
   .fx-setting__control .fx-swatches { flex-wrap: wrap; }
 }
@@ -1302,6 +1343,14 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 639px) {
+  /* Touch: every control a thumb uses is 44px (docs/MOBILE_TESTS.md). The
+     icons and text keep their size; the box around them grows. */
+  #menu-toggle, #search { width: 44px; height: 44px; }
+  .fx-tabs button { min-height: 44px; }
+  /* The notice's buttons grow to 44px into its padding, so the notice
+     stays one short line. */
+  .fx-alerts__close { width: 44px; height: 44px; margin: -12px -8px; }
+  .fx-alerts__action { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
   .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. */
@@ -1355,7 +1404,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   [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;
+    margin: 0; padding: 6px 12px 6px 44px; overflow: hidden; column-gap: 8px;
     border-bottom: 1px solid var(--fx-line-soft);
   }
   [data-phone-layout="two-line"] .fx-table tbody tr:not(.fx-table__group)::after {
@@ -1367,29 +1416,47 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
     display: block; width: auto; margin: 0; padding: 0; border: 0;
     white-space: nowrap; background: none;
   }
-  [data-phone-layout="two-line"] .fx-tick-cell {
+  [data-phone-layout="two-line"] .fx-table td.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; }
+  /* The tick keeps a 44px hit area, but shows an 18px box, as on a desk. */
+  [data-phone-layout="two-line"] .fx-tick-cell .fx-tick {
+    appearance: none; -webkit-appearance: none; display: grid; place-items: center;
+    width: 44px; height: 44px; margin: 0; border: 0; background: none;
+  }
+  [data-phone-layout="two-line"] .fx-tick::before,
+  [data-phone-layout="two-line"] .fx-tick::after { content: ""; grid-area: 1 / 1; box-sizing: border-box; }
+  [data-phone-layout="two-line"] .fx-tick::before {
+    width: 18px; height: 18px; border: 1.5px solid var(--t-brd-hi); border-radius: calc(var(--t-radius) / 2); background: var(--t-paper);
+  }
+  [data-phone-layout="two-line"] .fx-tick:is(:checked, :indeterminate)::before { border-color: var(--t-brand); background: var(--t-brand); }
+  [data-phone-layout="two-line"] .fx-tick:checked::after {
+    width: 10px; height: 6px; margin-top: -2px; border: solid var(--t-on-primary); border-width: 0 0 2px 2px; transform: rotate(-45deg);
+  }
+  [data-phone-layout="two-line"] .fx-tick:indeterminate::after { width: 10px; height: 2px; background: var(--t-on-primary); }
   [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;
   }
+  /* The title link keeps a 44px hit area but takes 24px of the line, so
+     line 2 still fits in the 56px row. */
   [data-phone-layout="two-line"] [data-phone-slot="title"] :is(a, button) {
-    display: inline-flex; align-items: center; max-width: 100%; min-height: 44px;
+    display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; margin-block: -10px;
   }
   [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;
+    color: var(--t-dim); font-size: 12px; line-height: 16px; height: 20px;
   }
+  /* Line 2 is 20px; its cells centre on it. */
+  [data-phone-layout="two-line"] .fx-table td[data-phone-slot="meta"] { display: flex; align-items: center; overflow: visible; }
   [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"] .fx-table td[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;
@@ -1397,7 +1464,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
     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"] .fx-table tr.fx-table__group td.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. */
@@ -1433,15 +1500,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
    control on the right. */
 .fx-set { display: grid; gap: 4px; }
 .fx-set__title { margin: 8px 0 4px; color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
-.fx-set__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
-.fx-set__row + .fx-set__row { border-top: 1px solid var(--fx-line); }
-.fx-set__text { display: grid; gap: 2px; min-width: 0; }
-.fx-set__name { color: var(--t-text); font: 500 14px/1.35 var(--t-body); }
 .fx-set__hint { color: var(--t-dim); font-size: 13px; line-height: 1.35; }
-.fx-set__control { flex: none; display: flex; justify-content: flex-end; }
-.fx-set__control .fx-input { width: 220px; }
-.fx-set__control .fx-input[type="number"] { width: 96px; }
-.fx-set__control .fx-select { min-width: 220px; }
 .fx-set + .fx-set { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--fx-line); }
 /* Price list (price-list.js): one plain table of Flow's codes. */
 .fx-price { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@@ -1633,7 +1692,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
      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;
+    height: 56px; min-height: 56px; max-height: 56px; padding: 4px 8px 4px 16px; overflow: hidden; column-gap: 8px;
   }
   .fx-cfm__row::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
   .fx-cfm__row > * { display: none; }
@@ -1643,10 +1702,11 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
     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;
   }
+  /* Line 2 is 20px: the type picker keeps its size, but takes no more. */
+  .fx-cfm__row > .fx-cfm__type { display: flex; align-items: center; height: 20px; overflow: visible; }
 }
 /* Invoice rules (invoice-rules.js): a row's Edit button and switch, and the
    rule dialog's condition lines. */
-.fx-rule__controls { align-items: center; gap: 10px; }
 .fx-rule__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
 .fx-dialog:has(.fx-rule__dialog) { width: min(680px, calc(100vw - 32px)); }
 .fx-rule__dialog .fx-btn--sm { justify-self: start; }
@@ -1660,11 +1720,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 @media (max-width: 639px) {
   .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
 }
-@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; }
-  .fx-set__control .fx-select { min-width: 140px; }
 }
 .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; }
@@ -1685,6 +1740,19 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-switch[aria-checked="true"]::after { transform: translateX(18px); }
 .fx-switch:focus-visible { outline: none; box-shadow: var(--fx-focus); }
 .fx-switch:disabled { cursor: default; opacity: 0.6; }
+/* On a touch screen the switch keeps its look and gets a 44px target: a
+   clear border round it that only the finger sees. */
+@media (max-width: 1023px) {
+  .fx-switch { box-sizing: content-box; border: 11px solid transparent; background-clip: padding-box; margin: -11px; }
+  /* A section title's help link: a 44px target that does not grow the title. */
+  .fx-set__title .fx-help { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; margin-block: -12px; }
+  /* A setting's ? gets the same 44px target. */
+  .fx-setting__head .fx-help { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; margin-block: -12px; }
+  /* An integration page's buttons, boxes and menus, and every crumb link. */
+  .fx-int-page :is(.fx-btn, .fx-input, .fx-select, .fx-multi__summary, .fx-multi__option, .fx-meta a) { min-height: 44px; }
+  .fx-int-page .fx-meta a { display: inline-flex; align-items: center; margin-block: -10px; }
+  .fx-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
+}
 
 /* ── Sentry's report form (monitoring.js) ──────────────────────────────────
    The form lives in a shadow root and reads these variables from its host.
@@ -1734,7 +1802,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-dialog:has(.fx-pick__body) { width: min(620px, calc(100vw - 32px)); }
 .fx-pick__body { display: grid; gap: 12px; }
 .fx-pick { display: grid; max-height: min(420px, 55vh); overflow-y: auto; border: 1px solid var(--fx-line); border-radius: var(--t-radius); }
-.fx-pick__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--fx-line); cursor: pointer; }
+.fx-pick__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border-bottom: 1px solid var(--fx-line); cursor: pointer; }
 .fx-pick__row:last-child { border-bottom: 0; }
 .fx-pick__row:hover, .fx-pick__row:has(input:checked) { background: var(--fx-hover); }
 .fx-pick__row[hidden] { display: none; }
@@ -1768,7 +1836,13 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .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: 639px) { .fx-listhead[data-sticky] { position: static; } }
+@media (max-width: 639px) {
+  /* The head does not stick on a phone, so it needs no top padding. It
+     takes back the gap of the edge marker, and never covers the notice. */
+  .fx-listhead[data-sticky] { position: static; margin-top: 0; padding-top: 0; }
+  .fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -8px; }
+  .fx-alerts { margin-bottom: 4px; }
+}
 
 /* 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
@@ -1932,7 +2006,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-xu__fold { padding: 12px; }
 }
 
-/* Contacts (server/ui/contacts.js) and the pending-invoice Create offer.
+/* Contacts (server/ui/contacts.js) and the pending-invoice Link and 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; }
@@ -1946,6 +2020,12 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-contacts .fx-person { color: inherit; text-decoration: none; }
 @media (max-width: 639px) {
   .fx-contacts__grid { grid-template-columns: minmax(0, 1fr); }
+  /* The note on its own line, then Link and Create side by side. */
+  .fx-offer > .fx-notice { flex-basis: 100%; }
+  .fx-offer > .fx-btn { flex: 1 1 0; }
+  /* A short note fits on one row with Link and Create. */
+  .fx-offer > .fx-notice:has(.fx-notice__short) { display: flex; flex: 1 1 auto; align-self: stretch; align-items: center; }
+  .fx-offer:has(.fx-notice__short) > .fx-btn { flex: 0 1 auto; }
   .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; }

package/server/ui/invoice-rules.js

@@ -42,15 +42,13 @@ export function ruleSummary(rule, meta) {
 }
 
 export function rulesSection(ui, title = 'Rules') {
-  const { h, flow, toast, notice, dialog, me } = ui;
+  const { h, flow, toast, notice, dialog, me, settingRow } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, title), h('div', { class: 'fx-skeleton' }));
   let meta;
   let rules = [];
 
-  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
-    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), h('span', { class: 'fx-set__hint' }, hint)),
-    h('div', { class: 'fx-set__control fx-rule__controls' }, control));
+  const row = (label, hint, control) => settingRow({ label, hint, control });
 
   async function send(path, method, payload) {
     try {

package/server/ui/invoicing-settings.js

@@ -83,7 +83,7 @@ export function renderInvoicingSettings(main, ui, id) {
 
 // Payment terms and the Reference template.
 function draftsSection(ui) {
-  const { h, flow, toast, notice, me } = ui;
+  const { h, flow, toast, notice, me, settingRow } = ui;
   const disabled = !['owner', 'admin'].includes(me?.person.role);
   const section = h('section', { class: 'fx-set' }, h('h2', { class: 'fx-set__title' }, 'Drafts'), h('div', { class: 'fx-skeleton' }));
   let saved;
@@ -102,9 +102,7 @@ function draftsSection(ui) {
     }
   }
 
-  const row = (name, hint, control) => h('div', { class: 'fx-set__row' },
-    h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, name), h('span', { class: 'fx-set__hint' }, hint)),
-    h('div', { class: 'fx-set__control' }, control));
+  const row = (label, help, control) => settingRow({ label, help, control });
 
   // A text or number box saves when it loses focus with a new value.
   const box = (key, label, { type = 'text', read = (v) => v, show = (v) => v ?? '', placeholder } = {}) => {
@@ -141,9 +139,7 @@ export function sendModeSection(ui) {
   const select = h('select', { class: 'fx-select', 'aria-label': 'Send to Xero as', disabled },
     SEND_MODES.map((m) => h('option', { value: m.value }, m.label)));
   const section = h('section', { class: 'fx-set' }, ui.sectionTitle('Sending', { href: DOCS, label: 'How sending works' }),
-    h('div', { class: 'fx-set__row' },
-      h('div', { class: 'fx-set__text' }, h('span', { class: 'fx-set__name' }, 'Send to Xero as'), h('span', { class: 'fx-set__hint' }, 'Draft: approve in Xero. Approved: Xero emails it.')),
-      h('div', { class: 'fx-set__control' }, select)));
+    ui.settingRow({ label: 'Send to Xero as', help: 'Draft: approve in Xero. Approved: Xero emails it.', control: select }));
   let saved = null;
   (async () => {
     try {

package/server/ui/invoicing.js

@@ -10,7 +10,7 @@ import { bulkBar } from '/assets/ui/bulk-bar.js';
 import { draftNote, sendModeNote } from '/assets/ui/invoice-notes.js';
 import { caseNumber } from '/assets/ui/job-board.js';
 import { jobChangeReview } from '/assets/ui/job-change.js';
-import { rowMenu } from '/assets/ui/kit.js';
+import { cardRows, rowMenu } from '/assets/ui/kit.js';
 import { isPhone, WIDTHS } from '/assets/ui/mobile.js';
 import { recordBar, watchPhonePrimary } from '/assets/ui/sidecar.js';
 import { columnTable, dateCell, fieldColumn, rowCells, viewSaver } from '/assets/ui/columns.js';
@@ -18,6 +18,7 @@ import { fieldGroup, fieldIdOf, filterCount, filterJobs, INVOICE_COLUMNS, invoic
 import { INVOICE_FILTER_FIELDS, INVOICE_FILTER_STATUSES, invoiceFilterKind, invoiceKindOf, invoiceValue, normaliseInvoicesView } from '/assets/ui/list-views.js';
 import { listPager, pager, PAGE_SIZES } from '/assets/ui/pager.js';
 import { savedViews } from '/assets/ui/saved-views.js';
+import { xeroContactActions } from '/assets/ui/xero-contact.js';
 import { findBox, today, viewBar } from '/assets/ui/view-bar.js';
 
 // The tabs, left to right (server/api/invoicing.js, TABS): Pending (a
@@ -914,6 +915,12 @@ function linkedCard(ui, invoice, accountingStatus = null) {
 
 // The first sentence of a problem: what is wrong. The red field shows where,
 // so the banner holds no how-to.
+// An invoice line on a phone (CardRows): Item, Qty and Remove; Description;
+// Unit price, Tax and Amount. An issued line: Description and Amount; Qty,
+// Unit price and Tax.
+const LINE_CARD = { areas: ['item item qty remove', 'desc desc desc desc', 'price gst amount amount'], columns: 'minmax(0, 1fr) minmax(0, 1fr) 72px 44px' };
+const LINE_CARD_READ = { areas: ['desc desc amount', 'qty price gst'], columns: 'repeat(3, minmax(0, 1fr))' };
+
 const brief = (text) => String(text ?? '').match(/^.*?[.!?](?=\s|$)/s)?.[0] ?? String(text ?? '');
 
 // A draft, or a new invoice before its first save.
@@ -989,7 +996,7 @@ function draftView(invoice, ui, context, redraw) {
 
   const drawLines = () => {
     tbody.replaceChildren(...lines.map((line, index) => {
-      const amount = h('td', { class: 'fx-num fx-strong' });
+      const amount = h('td', { class: 'fx-num fx-strong', 'data-area': 'amount', 'data-label': 'Amount', 'data-end': '' });
       const showAmount = () => {
         amount.textContent = line.unitAmountCents == null || !(line.quantity > 0) ? '—' : formatCents(line.quantity * line.unitAmountCents);
       };
@@ -1027,13 +1034,13 @@ function draftView(invoice, ui, context, redraw) {
         onclick: () => { badLines.clear(); lines.splice(index, 1); if (!lines.length) lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); preview(); },
       }, '×');
       return h('tr', {},
-        h('td', { class: 'fx-lines__item' }, item),
-        h('td', {}, description),
-        h('td', { class: 'fx-lines__qty' }, quantity),
-        h('td', { class: 'fx-lines__price' }, price),
-        h('td', { class: 'fx-lines__gst' }, gst),
+        h('td', { class: 'fx-lines__item', 'data-area': 'item', 'data-label': 'Item' }, item),
+        h('td', { 'data-area': 'desc', 'data-label': 'Description' }, description),
+        h('td', { class: 'fx-lines__qty', 'data-area': 'qty', 'data-label': 'Qty' }, quantity),
+        h('td', { class: 'fx-lines__price', 'data-area': 'price', 'data-label': 'Unit price' }, price),
+        h('td', { class: 'fx-lines__gst', 'data-area': 'gst', 'data-label': 'Tax' }, gst),
         amount,
-        h('td', {}, remove));
+        h('td', { 'data-area': 'remove' }, remove));
     }));
   };
   drawLines();
@@ -1205,41 +1212,24 @@ function draftView(invoice, ui, context, redraw) {
   // The job changed after the invoice was made: its own banner shows what
   // changed. Other problems stay one line.
   const otherProblems = (invoice?.problems ?? []).filter((p) => !(jobChange && p.code === 'job_review'));
-  const offer = otherProblems.find((p) => p.code === 'xero_contact_missing' && p.offerCreate);
+  const offer = otherProblems.find((p) => ['xero_contact_missing', 'xero_contact_ambiguous'].includes(p.code) && (p.offerLink || p.offerCreate));
+  // A phone shows each problem's short name ("Client not in Xero") on one line.
+  const shorts = otherProblems.every((p) => p.short) ? [...new Set(otherProblems.map((p) => p.short))].join(', ') : null;
   const problemNotice = otherProblems.length
-    ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.')
+    ? notice([...new Set(otherProblems.map((p) => brief(p.message)))].join(' '), 'danger', 'Problem.', { short: shorts })
     : null;
   const organisationId = context.organisations[0]?.id;
-  const createClient = offer && context.canIssue && invoice?.contact?.id && organisationId
-    ? h('button', {
-      class: 'fx-btn fx-btn--primary', type: 'button', title: 'Create this client in Xero',
-      onclick: async (event) => {
-        const button = event.currentTarget;
-        const name = invoice.contact.name;
-        const confirmed = await ui.dialog({
-          title: `Create ${name} in Xero?`,
-          body: h('p', {}, 'Flow adds this client to Xero from the contact.'),
-          confirm: 'Create',
-        });
-        if (!confirmed) return;
-        button.disabled = true;
-        try {
-          await flow('/api/xero/contacts', { method: 'POST', body: JSON.stringify({ organisationId, contactId: invoice.contact.id }) });
-          toast(`${name} is in Xero.`, 'success');
-          const body = await flow(`/api/invoicing/invoices/${invoice.id}`);
-          redraw(body.invoice);
-        } catch (error) {
-          toast(error.message, error.status === 429 ? 'info' : 'danger');
-          if (error.retryAfterMs) ui.holdButton(button, error.retryAfterMs);
-          else button.disabled = false;
-        }
-      },
-    }, 'Create')
-    : null;
+  // Link or Create the Xero client, then the invoice is checked again.
+  const clientActions = offer && context.canIssue && invoice?.contact?.id && organisationId
+    ? xeroContactActions(ui, {
+      organisationId, contact: invoice.contact, offerLink: offer.offerLink, offerCreate: offer.offerCreate,
+      done: async () => redraw((await flow(`/api/invoicing/invoices/${invoice.id}`)).invoice),
+    })
+    : [];
   const problems = [
     // Accepting changes the draft for the business: owners and admins only.
     jobChange ? jobChangeReview(ui, jobChange, { money: formatCents, canAccept: context.canIssue, unsaved: changed, done: redraw }) : null,
-    problemNotice ? (createClient ? h('div', { class: 'fx-offer' }, problemNotice, createClient) : problemNotice) : null,
+    problemNotice ? (clientActions.length ? h('div', { class: 'fx-offer' }, problemNotice, ...clientActions) : problemNotice) : null,
   ];
   // A red field names the banner as its reason (for a screen reader).
   const banner = problemNotice;
@@ -1279,12 +1269,12 @@ function draftView(invoice, ui, context, redraw) {
           h('label', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Due date'), dueDate)),
         h('section', { class: 'fx-card fx-lines' },
           datalist,
-          h('table', { class: 'fx-lines__table' },
+          cardRows(h('table', { class: 'fx-lines__table' },
             h('thead', {}, h('tr', {},
               h('th', {}, 'Item'), h('th', {}, 'Description'), h('th', { class: 'fx-num' }, 'Qty'),
               h('th', { class: 'fx-num' }, 'Unit price'), h('th', {}, 'Tax'), h('th', { class: 'fx-num' }, 'Amount'),
               h('th', {}, h('span', { class: 'fx-sr' }, 'Remove')))),
-            tbody),
+            tbody), LINE_CARD),
           h('div', { class: 'fx-lines__foot' },
             h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', onclick: () => { lines.push({ description: '', quantity: 1, unitAmountCents: null, taxCode: 'GST', priceItemId: null }); drawLines(); } }, '+ Add line'),
             totalsHost))),
@@ -1452,14 +1442,14 @@ function issuedView(invoice, ui, context, redraw) {
             h('div', {}, h('dt', { class: 'fx-label' }, 'Reference'), h('dd', {}, invoice.reference ?? '—')),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Date'), h('dd', {}, showDate(invoice.issueDate))),
             h('div', {}, h('dt', { class: 'fx-label' }, 'Due'), h('dd', {}, showDate(invoice.dueDate)))),
-          h('table', { class: 'fx-lines__table fx-lines__table--read' },
+          cardRows(h('table', { class: 'fx-lines__table fx-lines__table--read' },
             h('thead', {}, h('tr', {}, h('th', {}, 'Description'), h('th', { class: 'fx-num' }, 'Qty'), h('th', { class: 'fx-num' }, 'Unit price'), h('th', {}, 'Tax'), h('th', { class: 'fx-num' }, 'Amount'))),
             h('tbody', {}, invoice.lines.map((line) => h('tr', {},
-              h('td', {}, line.description),
-              h('td', { class: 'fx-num' }, String(line.quantity)),
-              h('td', { class: 'fx-num' }, formatCents(line.unitAmountCents)),
-              h('td', { class: 'fx-dim' }, line.taxCode === 'GST' ? 'GST' : 'GST free'),
-              h('td', { class: 'fx-num fx-strong' }, formatCents(line.lineAmountCents)))))),
+              h('td', { 'data-area': 'desc' }, line.description),
+              h('td', { class: 'fx-num', 'data-area': 'qty', 'data-label': 'Qty' }, String(line.quantity)),
+              h('td', { class: 'fx-num', 'data-area': 'price', 'data-label': 'Unit price' }, formatCents(line.unitAmountCents)),
+              h('td', { class: 'fx-dim', 'data-area': 'gst', 'data-label': 'Tax' }, line.taxCode === 'GST' ? 'GST' : 'GST free'),
+              h('td', { class: 'fx-num fx-strong', 'data-area': 'amount', 'data-end': '' }, formatCents(line.lineAmountCents)))))), LINE_CARD_READ),
           h('div', { class: 'fx-lines__foot' }, h('span'), totalsBox(ui, invoice)))),
       h('aside', { class: 'fx-invoice__aside' },
         linkedHost,
@@ -1568,39 +1558,23 @@ function showSent(button) {
 const PICKABLE = new Set(['in_work', 'ready', 'pending']);
 
 async function pickJob(ui) {
-  const { h, flow, toast, go } = ui;
-  let jobs;
-  try {
-    jobs = (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((job) => PICKABLE.has(job.view) && !job.invoiceId);
-  } catch (error) {
-    toast(error.message, 'danger');
-    return;
-  }
-  const search = h('input', { class: 'fx-input', type: 'search', placeholder: 'Find a client or practitioner', 'aria-label': 'Find a job' });
-  const rows = jobs.map((job) => {
-    const label = h('label', { class: 'fx-pick__row' },
-      h('input', { type: 'radio', name: 'job', value: job.id, required: true }),
-      h('span', { class: 'fx-pick__main' },
-        h('span', { class: 'fx-strong' }, job.contactName ?? 'No client yet'),
-        h('span', { class: 'fx-dim' }, [job.practitioner, job.shippedOn ? showDate(job.shippedOn) : null].filter(Boolean).join(' · '))),
-      h('span', { class: 'fx-num fx-strong' }, job.totalCents == null ? '—' : formatCents(job.totalCents)));
-    label.dataset.find = `${job.contactName ?? ''} ${job.practitioner ?? ''}`.toLowerCase();
-    return label;
-  });
-  const list = h('div', { class: 'fx-pick', role: 'radiogroup', 'aria-label': 'Jobs' },
-    rows.length ? rows : h('p', { class: 'fx-dim' }, 'Every job has an invoice already.'));
-  search.addEventListener('input', () => {
-    const q = search.value.trim().toLowerCase();
-    for (const row of rows) row.hidden = Boolean(q) && !row.dataset.find.includes(q);
-  });
-  const picked = await ui.dialog({
+  const { flow, toast, go } = ui;
+  const job = await ui.pickOne({
     title: 'New invoice from a job',
-    body: h('div', { class: 'fx-pick__body' },
-      h('p', { class: 'fx-dim' }, 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.'),
-      search, list),
+    intro: 'Flow fills in the client, Reference and lines from the invoice rules, and links the invoice to the job.',
+    label: 'Jobs',
+    find: 'Find a client or practitioner',
+    load: async () => (await flow('/api/invoicing/jobs?limit=500')).jobs.filter((row) => PICKABLE.has(row.view) && !row.invoiceId),
+    item: (row) => ({
+      value: row.id,
+      title: row.contactName ?? 'No client yet',
+      meta: [row.practitioner, row.shippedOn ? showDate(row.shippedOn) : null].filter(Boolean).join(' · '),
+      end: row.totalCents == null ? '—' : formatCents(row.totalCents),
+    }),
+    empty: 'Every job has an invoice already.',
     confirm: 'Make draft',
   });
-  const jobId = picked?.get('job');
+  const jobId = job?.id;
   if (!jobId) return;
   try {
     const { invoice } = await flow(`/api/invoicing/jobs/${jobId}/draft`, { method: 'POST', body: '{}' });