@arcforgelabs/flow 2026.10.42 → 2026.10.44

package/server/ui/flow.css

@@ -7,6 +7,10 @@
 
 :root {
   --fx-line: color-mix(in srgb, var(--t-text) 12%, transparent);
+  /* The side space of every page. Pages use the whole width with this slim
+     edge, as ClickUp and HubSpot do; the title, toolbar and content start at
+     one place on every page. */
+  --fx-gutter: clamp(16px, 2vw, 24px);
   --fx-line-soft: color-mix(in srgb, var(--t-text) 7%, transparent);
   --fx-hover: color-mix(in srgb, var(--t-text) 5%, transparent);
   --fx-focus: 0 0 0 3px color-mix(in srgb, var(--t-ring) 40%, transparent);
@@ -90,6 +94,9 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 }
 .fx-input:hover, .fx-select:hover { border-color: var(--t-text); }
 .fx-input:focus, .fx-select:focus { outline: none; border-color: var(--t-text); box-shadow: var(--fx-focus); }
+.fx-input[aria-invalid="true"], .fx-select[aria-invalid="true"] {
+  border-color: var(--t-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-danger) 28%, transparent);
+}
 .fx-select {
   width: auto; min-width: 112px; padding-right: 30px; appearance: none; cursor: pointer;
   background-image: linear-gradient(45deg, transparent 50%, var(--t-dim) 50%), linear-gradient(135deg, var(--t-dim) 50%, transparent 50%);
@@ -167,18 +174,33 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   .fx-shell[data-folded] #user-button .cl-userButtonTrigger { width: auto; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
   .fx-shell[data-folded] #user-button .cl-userButtonOuterIdentifier, .fx-shell[data-folded] #user-button .cl-userButtonBox::before { display: none; }
 }
-.fx-main { flex: 1; min-width: 0; max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; display: grid; gap: 20px; align-content: start; }
+.fx-main { flex: 1; min-width: 0; padding: 32px var(--fx-gutter) 64px; display: grid; gap: 20px; align-content: start; }
 .fx-main:focus { outline: none; box-shadow: none; }
 
-/* Page header: title and one line, then the actions, primary last. */
-.fx-ph { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
-.fx-ph__text { display: grid; gap: 6px; max-width: 64ch; }
+/* Page header: the title only (no line under it), then the actions,
+   primary last. One height on every page, with or without a button. */
+.fx-ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 36px; }
+.fx-ph__text { display: flex; align-items: center; gap: 10px; min-width: 0; }
 .fx-title {
   color: var(--t-strong);
-  font: var(--t-display-weight) 28px/1.15 var(--t-display); letter-spacing: -0.015em;
+  font: var(--t-display-weight) 24px/1.15 var(--t-display); letter-spacing: -0.015em;
 }
+.fx-ph__count { color: var(--t-dim); font-size: 14px; font-variant-numeric: tabular-nums; }
+/* A record's facts beside its title (Reconcile: client · date · total). */
 .fx-ph__sub { color: var(--t-dim); }
-.fx-ph__actions { display: flex; gap: 8px; }
+/* A docs link as a "?" icon beside a title (helpLink in app.js). */
+.fx-help { display: inline-flex; vertical-align: middle; margin-left: 2px; padding: 4px; border-radius: var(--t-radius); color: var(--t-dim); }
+.fx-help:hover, .fx-help:focus-visible { background: var(--fx-hover); color: var(--t-strong); }
+.fx-help .fx-lucide { width: 16px; height: 16px; }
+.fx-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+
+/* The tip an icon-only control shows on hover and keyboard focus (tip.js). */
+.fx-tip {
+  position: fixed; top: 0; left: 0; z-index: 1000; max-width: 260px; padding: 4px 8px;
+  border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
+  font: 500 12px/1.3 var(--t-body); pointer-events: none; white-space: nowrap;
+  box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
+}
 
 /* ── Notices, pills, tags, toasts ──────────────────────────────────────── */
 .fx-notice {
@@ -287,10 +309,12 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
 .fx-int-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-bar .fx-search { margin: 0; }
+.fx-int-bar .fx-row { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
+.fx-int-bar .fx-row .fx-search { flex: 0 1 320px; width: auto; min-width: 0; }
+.fx-int-bar .fx-row .fx-select { flex: none; }
 .fx-int-sections { display: grid; gap: 32px; }
 .fx-int-section-list { display: grid; gap: 16px; }
 .fx-int-heading { color: var(--t-strong); font: 600 19px/1.3 var(--t-body); }
-.fx-int-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
 .fx-int-card {
   display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px;
@@ -298,6 +322,7 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   color: var(--t-text); text-decoration: none;
   transition: transform 140ms var(--fx-ease), box-shadow 140ms var(--fx-ease), border-color 140ms var(--fx-ease);
 }
+.fx-int-card--bare { grid-template-rows: auto auto; }
 .fx-int-card:hover, .fx-int-card:focus-visible { transform: translateY(-2px); border-color: var(--t-brd-hi, var(--t-control)); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
 .fx-int-card__head { display: flex; align-items: center; gap: 12px; }
 .fx-int-card__head h3 { flex: 1; color: var(--t-strong); font: 650 16px/1.25 var(--t-body); }
@@ -312,6 +337,26 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
   background: #fff; box-shadow: inset 0 0 0 1px var(--fx-line);
 }
+.fx-logo--icon { background: var(--t-accent-bg); color: var(--t-accent); box-shadow: none; }
+.fx-tiles { display: grid; gap: 12px; }
+.fx-tiles + .fx-tiles { margin-top: 16px; }
+.fx-tiles__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.fx-tiles__head h2 { color: var(--t-strong); font: 600 15px/1.3 var(--t-body); }
+.fx-tiles__more { display: inline-flex; align-items: center; gap: 4px; color: var(--t-dim); font-size: 13.5px; text-decoration: none; }
+.fx-tiles__more:hover, .fx-tiles__more:focus-visible { color: var(--t-strong); }
+.fx-tiles__more .fx-lucide { width: 15px; height: 15px; }
+.fx-tiles__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
+.fx-tile {
+  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px 12px 12px;
+  border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); color: var(--t-text); text-decoration: none;
+  transition: border-color 140ms var(--fx-ease), background-color 140ms var(--fx-ease);
+}
+.fx-tile:hover, .fx-tile:focus-visible { border-color: var(--t-control); background: var(--fx-hover); }
+.fx-tile .fx-logo { width: 48px; height: 48px; border-radius: var(--t-radius); }
+.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-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; }
 .fx-logo--lg img { width: 34px; height: 34px; }
@@ -388,6 +433,28 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; line-height: 20px; }
 .fx-tabs button[data-tone="danger"] .fx-tabs__count { background: var(--t-danger-bg); color: var(--t-danger); }
 
+/* Saved views (saved-views.js): the row of named view tabs over a list, as
+   ClickUp's. The chosen tab is underlined; its ⋯ shows on hover and when
+   chosen. Save and Revert sit at the right while the list differs. */
+.fx-views { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 32px; margin-bottom: -8px; }
+.fx-views:empty { display: none; }
+.fx-views__item { display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
+.fx-views__item[data-on="true"] { border-bottom-color: var(--t-brand); }
+.fx-views__tab { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 4px 6px 8px; border: 0; background: none; color: var(--t-dim); font: 600 13px var(--t-body); cursor: pointer; }
+.fx-views__tab:hover, .fx-views__item[data-on="true"] .fx-views__tab { color: var(--t-strong); }
+.fx-views__tab:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 1px; }
+.fx-views__tab .fx-lucide { width: 14px; height: 14px; flex: none; }
+.fx-views__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-views__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent); }
+.fx-views__item .fx-cfm__more { width: 22px; height: 22px; opacity: 0; }
+.fx-views__item:hover .fx-cfm__more, .fx-views__item[data-on="true"] .fx-cfm__more, .fx-views__item .fx-cfm__more[aria-expanded="true"], .fx-views__item .fx-cfm__more:focus-visible { opacity: 1; }
+.fx-views__item .fx-cfm__more .fx-lucide { width: 14px; height: 14px; }
+.fx-views__add { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 0; background: none; color: var(--t-dim); font: 500 13px var(--t-body); cursor: pointer; }
+.fx-views__add:hover { color: var(--t-strong); }
+.fx-views__add .fx-lucide { width: 14px; height: 14px; }
+.fx-views__end { display: inline-flex; gap: 6px; margin-left: auto; }
+@media (hover: none) { .fx-views__item .fx-cfm__more { opacity: 1; } }
+
 /* Quiet alerts (server/ui/alerts.js): one slim line under the page header,
    only while something on the page needs this person. */
 .fx-alerts { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--fx-line); border-left: 3px solid var(--t-warn); border-radius: var(--t-radius); background: var(--t-paper); font-size: 14px; }
@@ -473,7 +540,6 @@ a.fx-strong:hover { text-decoration: underline; }
 }
 
 /* ── Jobs board ─────────────────────────────────────────────────────────── */
-.fx-main--wide { max-width: none; }
 .fx-main > * { min-width: 0; }
 .fx-toolbar--plain { border-bottom: 0; align-items: center; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
@@ -524,14 +590,16 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-chipset--on .fx-chip__clear { border-color: var(--t-accent-brd, var(--t-accent)); background: var(--t-accent-bg); color: var(--t-accent); }
 /* Group by, Sort and Filters: rows of selects with a bin at the end, as
    ClickUp lays them out, in Flow's own look. */
-.fx-pop.fx-pop--rows { width: max-content; min-width: 360px; max-width: min(680px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 32px)); padding: 12px; }
+.fx-pop.fx-pop--rows { width: max-content; min-width: 360px; max-width: min(760px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 32px)); padding: 12px; }
 .fx-rows__title { margin: 0 0 10px; color: var(--t-strong); font: 600 14px/1.3 var(--t-body); }
 .fx-rows { display: grid; gap: 8px; }
-.fx-rows__row { display: grid; grid-template-columns: 78px minmax(130px, 1fr) minmax(120px, auto) minmax(150px, 1.2fr) 32px; gap: 8px; align-items: center; }
+.fx-rows__row { display: grid; grid-template-columns: 64px minmax(140px, 1fr) minmax(120px, auto) minmax(170px, 1.3fr) 32px; gap: 8px; align-items: start; }
 .fx-rows__row--sort { grid-template-columns: 78px minmax(150px, 1fr) minmax(140px, auto) 32px; }
 .fx-rows__row--group { grid-template-columns: minmax(170px, 1fr) minmax(130px, auto) 32px; }
 .fx-rows .fx-select, .fx-rows .fx-input { width: 100%; min-width: 0; min-height: 32px; font-size: 13px; }
-.fx-rows__lead { color: var(--t-dim); font: 500 13px/1.2 var(--t-body); }
+/* Rows align at the top, so a value on two lines (a date range) keeps the
+   bin beside its first line. */
+.fx-rows__lead { display: flex; align-items: center; min-height: 32px; color: var(--t-dim); font: 500 13px/1.2 var(--t-body); }
 .fx-rows__value { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
 .fx-rows__gone { grid-column: span 3; color: var(--t-dim); font-size: 13px; font-style: italic; }
 .fx-rows__bin {
@@ -545,13 +613,51 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-rows__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
 .fx-rows__add { display: inline-flex; align-items: center; gap: 6px; }
 .fx-rows__add .fx-lucide { width: 14px; height: 14px; }
+/* The filter panel's groups, as ClickUp's: each group a shaded box with its
+   own rows and "Add nested filter"; groups stack with And / Or at the left. */
+.fx-fgroup { display: grid; gap: 8px; padding: 10px; border-radius: var(--t-radius-lg); background: var(--fx-hover); }
+.fx-fgroups { display: grid; gap: 8px; }
+.fx-fgroups__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; }
+.fx-fgroups__row > .fx-rows__lead, .fx-fgroups__row > span { padding-top: 16px; }
+.fx-fgroup__add { justify-self: start; padding: 2px 4px; border: 0; background: none; color: var(--t-dim); font: 500 12.5px/1.3 var(--t-body); cursor: pointer; }
+.fx-fgroup__add:hover, .fx-fgroup__add:focus-visible { color: var(--t-strong); text-decoration: underline; outline: none; }
+.fx-choice { display: inline-flex; align-items: center; gap: 6px; min-width: 0; text-align: left; }
+.fx-choice .fx-lucide { flex: none; width: 14px; height: 14px; color: var(--t-dim); }
+.fx-choice__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-rows .fx-rows__join { min-width: 0; width: 100%; padding-left: 8px; font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; }
+.fx-rows__word { font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; padding-left: 9px; }
+.fx-fgroups__row .fx-rows__join { min-width: 0; width: 64px; padding-left: 8px; font: 600 12px/1 var(--t-data, var(--t-body)); letter-spacing: .04em; min-height: 32px; }
+.fx-rows__date { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
+.fx-rows__date > .fx-choice { flex: 1 1 130px; }
+.fx-rows__date .fx-input { width: auto; flex: 1 1 130px; }
+.fx-rows__days { display: inline-flex; flex: 1 1 130px; align-items: center; gap: 6px; }
+.fx-rows__days .fx-input[type="number"] { width: 72px; flex: none; }
+.fx-pop__bar { display: flex; align-items: center; justify-content: space-between; }
+.fx-pop__link { padding: 4px 8px; border: 0; background: none; color: var(--t-accent); font: 500 12.5px/1.3 var(--t-body); cursor: pointer; }
+.fx-pop__link:hover, .fx-pop__link:focus-visible { text-decoration: underline; outline: none; }
 .fx-pop.fx-pop--choices { min-width: 200px; max-width: 300px; padding: 6px; }
+/* A value list row, as ClickUp's: mark (when there is one), name, tick box
+   at the right. No empty space at the left. */
+.fx-pop__item--check { gap: 8px; }
+.fx-pop__item--check .fx-pop__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-pop__box { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; margin-left: auto; border: 1px solid var(--t-control); border-radius: var(--t-radius); color: var(--t-on-primary); }
+.fx-pop__item--check[aria-checked="true"] .fx-pop__box { border-color: var(--t-primary); background: var(--t-primary); }
+.fx-pop__box svg { width: 12px; height: 12px; }
+.fx-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cf, var(--t-dim)); }
+.fx-dot--stage { --stage: var(--t-accent); background: var(--stage); }
+.fx-dot--stage[data-rank="0"] { --stage: var(--t-mute); }
+.fx-dot--stage[data-rank="3"], .fx-dot--stage[data-rank="4"] { --stage: color-mix(in srgb, var(--t-accent) 45%, var(--t-success)); }
+.fx-dot--stage[data-rank="5"], .fx-dot--stage[data-rank="6"] { --stage: var(--t-success); }
+.fx-dot--stage[data-rank="7"] { --stage: var(--t-dim); }
 .fx-pop--choices .fx-input { min-height: 32px; margin-bottom: 4px; font-size: 13px; }
 .fx-pop__end { display: inline-grid; margin-left: auto; color: var(--t-accent); }
 @media (max-width: 640px) {
   .fx-pop.fx-pop--rows { min-width: 0; width: calc(100vw - 16px); }
   .fx-rows__row, .fx-rows__row--sort { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
-  .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child { grid-column: 1 / -1; }
+  .fx-rows__row > .fx-rows__lead, .fx-rows__row > .fx-select:first-child, .fx-rows__row > .fx-rows__join { grid-column: 1 / -1; }
+  .fx-rows__row > .fx-rows__join { width: 72px; }
+  .fx-fgroups__row { grid-template-columns: minmax(0, 1fr); }
+  .fx-fgroups__row > .fx-rows__lead, .fx-fgroups__row > span { padding-top: 0; }
   .fx-rows__row > .fx-rows__value { grid-column: 1 / 3; }
   .fx-rows__row > .fx-rows__value--none { display: none; }
 }
@@ -590,6 +696,42 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-th-sort .fx-lucide { width: 13px; height: 13px; }
 .fx-th-sort__n { font: 700 10px/1 var(--t-body); }
 @media (hover: none) { .fx-th-sort { opacity: 1; } }
+/* A sized list (columns.js): each column has its width, the table is as
+   wide as its columns (never stretched; space left over stays empty) and
+   scrolls sideways past the page. A head's right
+   edge is a grip that resizes the column; a head drags to move it, and a
+   line shows where it lands. */
+.fx-table-scroll { overflow-x: auto; scrollbar-width: thin; }
+.fx-table.fx-table--sized { table-layout: fixed; }
+.fx-table--sized th, .fx-table--sized td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-table--sized th { position: relative; }
+/* Every cell is one line: a long value ends in "…" and the row keeps its
+   height, as HubSpot's. A wrapper in a cell (a client with its warning
+   mark, a stage pill) shrinks its text, never its mark. */
+.fx-table--sized td > * { max-width: 100%; }
+.fx-table--sized .fx-job__cell { display: flex; min-width: 0; }
+.fx-table--sized .fx-job__cell > * { flex: none; }
+.fx-table--sized .fx-job__cell > .fx-strong,
+.fx-table--sized .fx-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-table--sized .fx-job__cell > .fx-strong { flex: 0 1 auto; }
+.fx-table--sized .fx-th-cell { max-width: 100%; }
+.fx-table--sized .fx-th { overflow: hidden; text-overflow: ellipsis; }
+.fx-th--drag .fx-th { cursor: grab; touch-action: none; }
+.fx-th--drag[data-dragging] { opacity: .5; }
+.fx-th--drag[data-dragging] .fx-th { cursor: grabbing; }
+.fx-table--sized th[data-drop]::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--t-accent); }
+.fx-table--sized th[data-drop="before"]::after { left: 0; }
+.fx-table--sized th[data-drop="after"]::after { right: 0; }
+.fx-th-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; }
+.fx-th-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
+th:hover > .fx-th-grip::after { background: var(--t-brd-hi); }
+.fx-th-grip:hover::after, .fx-th-grip:focus-visible::after, .fx-table--sized[data-resizing] .fx-th-grip:active::after { background: var(--t-accent); }
+.fx-th-grip:focus-visible { outline: none; }
+.fx-table--sized[data-resizing] { cursor: col-resize; user-select: none; }
+.fx-table--sized .fx-tick-cell, .fx-table--sized .fx-th-add, .fx-table--sized .fx-c-end { overflow: visible; text-overflow: clip; }
+.fx-table--sized .fx-tick-cell { padding-right: 0; }
+/* + stays at the right edge while the table scrolls sideways. */
+.fx-table--sized .fx-th-add { position: sticky; right: 0; z-index: 1; padding-left: 0; padding-right: 12px; }
 .fx-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
 .fx-c-date time { font-variant-numeric: tabular-nums; }
 .fx-stage[data-rank="plain"] { --stage: var(--t-dim); }
@@ -604,9 +746,41 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-board__head { display: flex; flex: none; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 4px 2px; }
 .fx-board__sum { flex: none; margin-left: auto; color: var(--t-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
 .fx-board__cards { display: grid; gap: 8px; align-content: start; min-height: 0; max-height: 70vh; padding-right: 2px; overflow-y: auto; scrollbar-width: thin; }
+/* listFrame() in kit.js: the window of a list or board (Jobs, Invoices,
+   Reconcile). Its body scrolls both ways; the foot holds the count. A table
+   or panel inside drops its own frame. On a wide, tall screen the page is
+   the window's height and does not scroll itself: the frame fills it, and
+   on the board each lane scrolls inside itself. */
+.fx-frame { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); box-shadow: var(--t-shadow); overflow: hidden; }
+.fx-frame__view { display: flex; flex-direction: column; min-height: 0; }
+.fx-frame__body { min-height: 0; overflow: auto; scrollbar-width: thin; }
+/* edgeFade() in kit.js: a soft fade over each edge with more content past
+   it, in the colour under the rows (--fx-fade). */
+.fx-fades { position: relative; --fx-fade: var(--t-paper); }
+.fx-fade { position: absolute; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .15s; }
+.fx-fade[data-edge="top"] { inset: 0 0 auto; height: 24px; background: linear-gradient(to bottom, var(--fx-fade), transparent); }
+.fx-fade[data-edge="bottom"] { inset: auto 0 0; height: 24px; background: linear-gradient(to top, var(--fx-fade), transparent); }
+.fx-fade[data-edge="left"] { inset: 0 auto 0 0; width: 24px; background: linear-gradient(to right, var(--fx-fade), transparent); }
+.fx-fade[data-edge="right"] { inset: 0 0 0 auto; width: 24px; background: linear-gradient(to left, var(--fx-fade), transparent); }
+.fx-fades[data-fade~="top"] > .fx-fade[data-edge="top"], .fx-fades[data-fade~="bottom"] > .fx-fade[data-edge="bottom"],
+.fx-fades[data-fade~="left"] > .fx-fade[data-edge="left"], .fx-fades[data-fade~="right"] > .fx-fade[data-edge="right"] { opacity: 1; }
+.fx-main--board .fx-frame__view { --fx-fade: var(--t-bg); }
+.fx-board__col.fx-fades { --fx-fade: var(--t-s1); }
+.fx-board__col > .fx-fade[data-edge="bottom"] { border-radius: 0 0 var(--t-radius-lg) var(--t-radius-lg); }
+.fx-frame__body .fx-panel { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
+.fx-frame__body .fx-empty { padding: 24px; }
+.fx-frame .fx-table-scroll { overflow: visible; }
+.fx-frame thead th { position: sticky; top: 0; z-index: 2; }
+.fx-frame__foot { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 6px 12px; border-top: 1px solid var(--fx-line); color: var(--t-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
+.fx-frame__tools { display: flex; align-items: center; gap: 8px; }
+.fx-main--board .fx-frame__body { padding: 12px; background: var(--t-bg); }
 @media (min-width: 821px) and (min-height: 560px) {
-  .fx-main--board { height: 100vh; height: 100dvh; padding: 24px 24px 16px; grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
-  .fx-main--board > .fx-jobs { min-height: 0; }
+  .fx-main--frame { height: 100vh; height: 100dvh; padding-bottom: 16px; display: flex; flex-direction: column; }
+  .fx-main--frame > * { flex: none; }
+  .fx-main--frame > .fx-frame { flex: 1; min-height: 0; }
+  .fx-main--frame .fx-frame__view, .fx-main--frame .fx-frame__body { flex: 1; }
+  .fx-main--board .fx-frame__body { display: flex; overflow: hidden; }
+  .fx-main--board .fx-jobs { flex: 1; min-width: 0; min-height: 0; }
   .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
@@ -674,7 +848,14 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
    the activity at the side. It stacks on a phone. */
 .fx-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--t-dim); overflow-wrap: anywhere; }
 .fx-dialog.fx-task { width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
-.fx-task__grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
+.fx-task__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
+/* No sidecar: the main area takes the room. Fix is wider for the change table. */
+.fx-task__grid:has(> .fx-sidecar[hidden]) { grid-template-columns: minmax(0, 1fr); }
+.fx-task__grid:has(> .fx-sidecar [data-tab="fix"][aria-selected="true"]) { grid-template-columns: minmax(0, 1fr) 400px; }
+.fx-task__side { background: var(--t-s1); }
+.fx-task__tools { display: flex; align-items: center; gap: 4px; }
+.fx-task__tools .fx-lucide { width: 16px; height: 16px; }
+.fx-task__tools [aria-pressed="true"] { background: var(--fx-hover); color: var(--t-strong); }
 .fx-task__main { min-width: 0; padding: 20px 28px 28px; }
 .fx-task__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
 .fx-task__crumb { display: flex; flex-wrap: wrap; gap: 6px; color: var(--t-dim); font-size: 12.5px; }
@@ -688,11 +869,22 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__late { color: var(--t-danger) !important; }
 .fx-task__link { color: var(--t-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--t-accent) 40%, transparent); }
 .fx-task__link:hover { border-bottom-color: currentColor; }
-.fx-task__fix { scroll-margin-top: 16px; margin-top: 22px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); }
-.fx-task__fix h3, .fx-task__lines h3, .fx-task__activity h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
-.fx-task__fix h3 { padding: 12px 14px 4px; color: var(--t-warn); }
-.fx-task__fixrow { padding: 9px 14px; border-top: 1px solid var(--fx-line-soft); color: var(--t-strong); font-size: 13.5px; }
-.fx-task__fixrow:first-of-type { border-top: 0; }
+.fx-task__lines h3 { margin: 0; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+/* What to fix: one toggle chip a problem beside the stage; its problem opens
+   in the sidecar's Fix tab (jobs.js openJob). One layout with or without. */
+.fx-task__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.fx-task__fixchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: 999px; background: var(--t-warn-bg); color: var(--t-warn); font-size: 12.5px; font-weight: 600; }
+.fx-task__fixchip .fx-lucide { width: 14px; height: 14px; }
+.fx-task__fixchip:hover { border-color: var(--t-warn); }
+.fx-task__fixchip:focus-visible { box-shadow: var(--fx-focus); }
+/* Pressed: its problem is open in the sidecar's Fix tab. */
+.fx-task__fixchip[aria-pressed="true"] { border-color: var(--t-warn); background: var(--t-warn); color: var(--t-paper); }
+.fx-task__fixitem { display: grid; gap: 8px; justify-items: start; font-size: 13.5px; }
+.fx-task__fixitem > strong { color: var(--t-strong); }
+.fx-task__fixitem > p { margin: 0; }
+.fx-task__fixitem > .fx-task__review { justify-self: stretch; }
+.fx-task__fixgo .fx-lucide { width: 14px; height: 14px; }
+.fx-task__fixgo { display: inline-flex; align-items: center; gap: 6px; }
 .fx-task__choose { scroll-margin-top: 16px; margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--t-warn-brd, var(--t-warn)); border-radius: var(--t-radius); background: var(--t-warn-bg); color: var(--t-strong); font-size: 13.5px; }
 .fx-task__choose > svg { flex: none; width: 20px; height: 20px; color: var(--t-warn); }
 .fx-task__choose > span { flex: 1 1 200px; }
@@ -704,7 +896,6 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
    invoice opened from Invoices (the pager on top). */
 .fx-rec { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 .fx-rec .fx-lucide { width: 16px; height: 16px; }
-.fx-rec__gap { max-width: 1180px; }
 .fx-rec__gap .fx-toolbar .fx-rows__title { margin: 0; }
 .fx-rec__gap .fx-ph__actions .fx-btn, .fx-rec__acts .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
 .fx-rec__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@@ -758,8 +949,9 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
 .fx-task__miss { color: var(--t-warn); }
 .fx-task__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
 .fx-task__actions:empty { display: none; }
-.fx-task__activity { min-width: 0; padding: 24px 20px; border-left: 1px solid var(--fx-line); background: var(--t-s1); }
-.fx-task__activity h3 { margin-bottom: 14px; }
+.fx-task__activity { min-width: 0; }
+/* Review in the sidecar: the change banner, without its own box. */
+.fx-task__review .fx-change { margin: 0; padding: 0; border: 0; background: none; }
 .fx-task__activity ol { margin: 0; padding: 0; list-style: none; }
 .fx-task__activity li { position: relative; padding: 0 0 16px 18px; color: var(--t-text); font-size: 13px; }
 .fx-task__activity li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--t-mute); }
@@ -771,7 +963,8 @@ th:hover .fx-th-sort, .fx-th-sort:focus-visible, .fx-th-sort--on { opacity: 1; }
   .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__activity { padding: 16px; border-top: 1px solid var(--fx-line); border-left: 0; }
+  .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; }
 }
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
@@ -898,14 +1091,21 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
 }
 .fx-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
-.fx-swatch--default { overflow: hidden; background: var(--t-paper); }
-.fx-swatch--default span { display: block; width: 100%; height: 100%; }
+/* The default accent: a pill that says Default, before the colours. */
+.fx-swatch--default {
+  display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 10px 0 4px; border-radius: 999px;
+  background: var(--t-paper); color: var(--t-text); font: 600 12.5px/1 var(--t-body); box-shadow: inset 0 0 0 1px var(--t-control);
+}
+.fx-swatch--default[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--t-control), 0 0 0 2px var(--t-paper), 0 0 0 4px var(--t-text); }
+.fx-swatch__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; }
 .fx-swatch-custom { display: inline-flex; align-items: center; gap: 8px; color: var(--t-dim); font-size: 13px; font-weight: 600; }
 .fx-swatch-custom input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--t-control); border-radius: var(--t-radius); background: var(--t-paper); cursor: pointer; }
 
 /* ── Narrow screens: the sidebar becomes a bar across the top. ──────────── */
 @media (max-width: 820px) {
   .fx-shell { flex-direction: column; }
+  /* In a column, the page takes the full width, not its content's. */
+  .fx-main { width: 100%; }
   .fx-side { flex-direction: row; align-items: center; width: auto; height: 60px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--fx-line); }
   .fx-side__head { flex-direction: row-reverse; gap: 6px; padding: 0; }
   .fx-side__head .fx-brand { display: none; }
@@ -946,8 +1146,11 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* ── Phones ─────────────────────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .fx-main { padding-top: 20px; }
-  .fx-title { font-size: 24px; }
+  .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, .fx-table tbody, .fx-table tr, .fx-table 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; }
@@ -955,7 +1158,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .fx-table tbody tr:hover td { background: none; }
   .fx-table__actions { text-align: left; }
   .fx-table__actions .fx-row--end { justify-content: flex-start; }
-  .fx-ph__actions, .fx-ph__actions .fx-btn { width: 100%; }
   /* People: the name with its actions (⋯, Approve) on one line, then the
      role select full width, then the status pill when there is one. */
   .fx-people tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
@@ -976,7 +1178,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .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-total, .fx-c-stage)::before { content: attr(data-label) " "; color: var(--t-dim); font-size: 12px; }
+  .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; }
@@ -1118,10 +1320,22 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
    in from the right of the manager and leaves the table usable. */
 .fx-cfm__card { position: relative; }
 .fx-cfm__card:has(> .fx-cfs:not([hidden])) { min-height: min(640px, 100vh); }
-.fx-cfs { position: absolute; inset: 0 0 0 auto; z-index: 5; display: flex; width: min(420px, 100%); border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-cfs-in .18s var(--fx-ease); }
-.fx-cfs[hidden] { display: none; }
-@keyframes fx-cfs-in { from { transform: translateX(24px); opacity: 0; } }
-@media (prefers-reduced-motion: reduce) { .fx-cfs { animation: none; } }
+/* The shared sidecar (sidecar.js): a right column, or over the page with
+   --over. Tabs are an icon and one word; × closes it. */
+.fx-sidecar { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--fx-line); background: var(--t-paper); color: var(--t-text); }
+.fx-sidecar[hidden] { display: none; }
+.fx-sidecar--over { position: absolute; inset: 0 0 0 auto; z-index: 5; width: min(420px, 100%); box-shadow: -16px 0 40px rgba(0, 0, 0, .22); animation: fx-sidecar-in .18s var(--fx-ease); }
+@keyframes fx-sidecar-in { from { transform: translateX(24px); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .fx-sidecar--over { animation: none; } }
+.fx-sidecar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-sidecar__tabs { display: flex; gap: 2px; min-width: 0; }
+.fx-sidecar__tab { all: unset; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--t-radius); color: var(--t-dim); font-size: 13px; font-weight: 500; }
+.fx-sidecar__tab .fx-lucide { width: 15px; height: 15px; }
+.fx-sidecar__tab:hover { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab[aria-selected="true"] { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__tab:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__mark { width: 6px; height: 6px; border-radius: 50%; background: var(--t-warn); }
+.fx-sidecar__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
 .fx-cfs__form { position: sticky; top: 0; display: flex; flex-direction: column; width: 100%; height: min(100%, 100vh); max-height: 100vh; min-height: 0; }
 .fx-cfs__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--fx-line-soft); }
 .fx-cfs__typename, .fx-cfs__typepick { display: inline-flex; align-items: center; gap: 8px; color: var(--t-text); font-weight: 500; font-size: 14px; }
@@ -1129,9 +1343,9 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__typepick:hover, .fx-cfs__typepick:focus-within { background: var(--fx-hover); }
 .fx-cfs__typepick .fx-lucide { width: 15px; height: 15px; }
 .fx-cfs__type { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
-.fx-cfs__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
-.fx-cfs__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
-.fx-cfs__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
+.fx-sidecar__close, .fx-cfs__delete, .fx-cfs__tool { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--t-dim); }
+.fx-sidecar__close:hover, .fx-cfs__tool:hover:not(:disabled) { background: var(--fx-hover); color: var(--t-strong); }
+.fx-sidecar__close:focus-visible, .fx-cfs__delete:focus-visible, .fx-cfs__tool:focus-visible { box-shadow: var(--fx-focus); }
 .fx-cfs__body { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 0; }
 .fx-cfs__section { display: grid; gap: 8px; padding: 14px 16px 4px; }
 .fx-cfs__section:last-child { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--fx-line-soft); }
@@ -1167,7 +1381,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfs__where .fx-lucide { width: 16px; height: 16px; color: var(--t-dim); }
 .fx-cfs__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); }
 .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) 22%, 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) {
   .fx-cfm { grid-template-columns: minmax(0, 1fr) 36px 32px; column-gap: 8px; }
@@ -1250,13 +1464,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pager__step:hover:not(:disabled) { background: var(--fx-hover); border-color: var(--fx-line); }
 .fx-pager__step:disabled { opacity: 0.35; cursor: default; }
 
-/* New invoice from a job: a quiet strip above the form, and a searchable
-   list of jobs with no invoice. */
-.fx-fromjob {
-  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
-  padding: 12px 16px; border: 1px dashed var(--fx-line); border-radius: var(--t-radius);
-}
-.fx-fromjob__text { display: grid; gap: 2px; font-size: 14px; }
+/* New invoice from a job: a searchable list of jobs with no invoice. */
 .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); }
@@ -1270,12 +1478,21 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 /* The Invoices list head (invoicing.js): tabs, search and the send bar stay
    at the top while rows scroll up under them; a shadow shows once they do.
    Narrow, the app bar (60px) sits above it. */
-.fx-listhead { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * clamp(16px, 4vw, 48px)) 0; padding: 12px clamp(16px, 4vw, 48px) 0; background: var(--t-bg); transition: box-shadow .15s; }
+/* listHead() in kit.js: the toolbar row of every list. One height, with
+   chips, tabs or a Board/List switch in it, so the rows start at one place. */
+.fx-listhead > .fx-toolbar { min-height: 40px; }
+.fx-listhead .fx-toolbar__end { flex: 1 1 auto; }
+.fx-listhead > .fx-toolbar--plain { align-items: center; }
+.fx-listhead[data-sticky] { position: sticky; top: 0; z-index: 5; margin: -12px calc(-1 * var(--fx-gutter)) 0; padding: 12px var(--fx-gutter) 0; background: var(--t-bg); transition: box-shadow .15s; }
 .fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
-.fx-listhead__edge { height: 0; margin-bottom: -20px; }
-@media (max-width: 820px) { .fx-listhead { top: 60px; } }
+/* The edge tells listHead when the rows reach the toolbar. In the page's
+   grid it takes a row and a gap of its own, so the toolbar moves up by both. */
+.fx-listhead__edge { height: 0; }
+.fx-listhead__edge + .fx-listhead[data-sticky] { margin-top: -32px; }
+.fx-listhead > .fx-toolbar > .fx-tabs button { padding-block: 9px; }
+@media (max-width: 820px) { .fx-listhead[data-sticky] { top: 60px; } }
 /* On a phone the head would hide too many rows: it scrolls away. */
-@media (max-width: 560px) { .fx-listhead { position: static; } }
+@media (max-width: 560px) { .fx-listhead[data-sticky] { position: static; } }
 
 /* The bulk action bar (bulk-bar.js): floats at the foot while rows are
    ticked. "N selected ×", then icon actions in groups, then More. It takes
@@ -1300,12 +1517,6 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-bulk__act[data-tone="danger"] { color: var(--t-danger); }
 .fx-bulk__act[data-tone="danger"]:hover { background: var(--t-danger-bg); }
 .fx-bulk__sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--fx-line); }
-/* An icon-only action says its name on hover, in a tip above it. */
-.fx-bulk [data-tip]:hover::after, .fx-bulk [data-tip]:focus-visible::after {
-  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
-  padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); color: var(--t-strong);
-  font: 500 12px/1.2 var(--t-body); pointer-events: none; box-shadow: var(--t-shadow), 0 4px 12px rgba(0, 0, 0, .12);
-}
 /* More: a compact list, one row per action, like a dropdown. */
 .fx-pop.fx-bulk__more { width: 248px; min-width: 0; padding: 4px; }
 .fx-bulk__search { width: 100%; height: 30px; margin-bottom: 2px; padding: 4px 8px; font-size: 13px; }
@@ -1326,7 +1537,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: 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
    bar. */
-.fx-xi { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 980px; }
+.fx-xi { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
 .fx-xi .fx-lucide { width: 16px; height: 16px; }
 .fx-xi__views { display: inline-flex; border: 1px solid var(--fx-line); }
 .fx-xi__view { display: inline-grid; place-items: center; width: 40px; height: 36px; border: 0; background: transparent; color: var(--t-dim); cursor: pointer; }
@@ -1370,6 +1581,8 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 
 /* A list's own search (view-bar.js findBox): an icon that opens into a box. */
 .fx-find { display: inline-flex; align-items: center; }
+/* On a tab bar the icon sits level with the tab names, not on the line. */
+.fx-toolbar > .fx-find { align-self: center; }
 .fx-find__button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; }
 .fx-find__button .fx-lucide { width: 15px; height: 15px; }
 .fx-find__input { display: none; width: min(240px, 60vw); height: 32px; padding: 0 10px; }

package/server/ui/invoice-notes.js

@@ -18,9 +18,11 @@ export function sendModeNote(to, sendMode, what = 'each invoice') {
   return text.join(' ');
 }
 
-// The line under a draft's title, one fact per sentence.
-export function draftNote(to, invoice, ready) {
-  if (!to) return ready ? 'It has no problem. Approve gives it a number.' : 'Fix the problem, then approve it.';
-  if (!ready) return `Fix the problem, then send it to ${to}.`;
-  return sendModeNote(to, invoice?.sendMode, 'this invoice');
+// A warning above a draft, only when its Send cannot work: the accounting
+// system is off or takes no invoices. Otherwise nothing: the problems show
+// on their own, and the Send dialog says what Send does.
+export function draftNote(to, invoice) {
+  const sendMode = invoice?.sendMode;
+  if (!to || !sendMode || (sendMode.connected && sendMode.writesAllowed)) return null;
+  return sendModeNote(to, sendMode);
 }

package/server/ui/invoice-rules.js

@@ -12,10 +12,10 @@ const TEST_LABELS = {
   more_than: 'is more than', at_most: 'is at most', is: 'is', is_not: 'is not', is_one_of: 'is one of',
   is_empty: 'is empty', is_not_empty: 'is not empty', has: 'has', has_not: 'does not have',
   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', one_word: 'is one word',
+  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 NO_VALUE = ['is_empty', 'is_not_empty', 'has_number', 'one_word'];
+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'];
 
@@ -158,7 +158,7 @@ export function rulesSection(ui, title = 'Rules') {
     // A pending rule's note: what a person must fix. It shows on the draft.
     const note = h('input', {
       class: 'fx-input', maxlength: '200', value: draft?.action.note ?? '', 'aria-label': 'Note',
-      placeholder: 'For example: Put the practitioner in the job, then check the Reference.',
+      placeholder: 'Type a note',
     });
     const noteField = h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, 'Note on the draft'), note);
     const showNote = () => { noteField.hidden = action.value !== 'pending'; };