@arcforgelabs/flow 2026.10.48 → 2026.10.50

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%; }
 
@@ -432,7 +440,12 @@ 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: 639px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
+/* Phones and tablets: the tabs scroll in one row and each is 44px tall, so
+   seven tabs never run past the page and a thumb hits each one. */
+@media (max-width: 1023px) {
+  .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
+  .fx-tabs button { min-height: 44px; }
+}
 .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;
@@ -503,7 +516,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 +571,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 +1122,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 +1243,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 +1348,13 @@ 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; }
+  /* 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 +1408,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 +1420,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 +1468,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 +1504,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 +1696,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 +1706,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 +1724,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 +1744,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 +1806,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 +1840,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 +2010,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 +2024,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

@@ -14,7 +14,7 @@ const TEST_LABELS = {
   is_not_one_of: 'is not one of', contains: 'contains', does_not_contain: 'does not contain',
   starts_with: 'starts with', does_not_start_with: 'does not start with', has_number: 'has a number', number_in_words: 'has a number beside words', one_word: 'is one word',
 };
-const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending: 'Pending, with a note' };
+const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft', pending: 'Pending, with a note', non_chargeable: 'Non-chargeable' };
 const NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'number_in_words', 'one_word'];
 const MANY = ['is_one_of', 'is_not_one_of'];
 const TYPED = ['contains', 'does_not_contain', 'starts_with', 'does_not_start_with'];
@@ -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 {