@arcforgelabs/flow 2026.10.26 → 2026.10.29

package/server/ui/flow.css

@@ -114,23 +114,42 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
   width: 232px; height: 100vh; padding: 16px 12px 12px;
   background: var(--t-s1); border-right: 1px solid var(--fx-line);
 }
-.fx-side > .fx-brand { padding: 4px 8px 18px; font-size: 19px; }
-.fx-side > .fx-brand .fx-mark { width: 26px; height: 26px; }
+.fx-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 14px 8px; }
+.fx-side__head .fx-brand { min-width: 0; font-size: 19px; }
+.fx-side__head .fx-mark { width: 26px; height: 26px; }
 .fx-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
 .fx-nav__group { padding: 16px 10px 6px; 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-nav__group:first-child { padding-top: 4px; }
-.fx-nav a {
+.fx-nav a, .fx-nav__report {
   display: flex; align-items: center; gap: 10px;
   padding: 8px 10px; border-radius: var(--t-radius);
   color: var(--t-text); font-weight: 500; font-size: 14px; text-decoration: none; white-space: nowrap;
 }
-.fx-nav a:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav a:hover, .fx-nav__report:hover { color: var(--t-strong); background: var(--fx-hover); }
+.fx-nav__report { margin-top: auto; border: 0; background: none; font: inherit; font-weight: 500; font-size: 14px; text-align: left; cursor: pointer; }
+.fx-nav__report[hidden] { display: none; }
 .fx-nav a[aria-current="page"] { color: var(--t-accent); background: var(--t-accent-bg); font-weight: 650; box-shadow: inset 2px 0 0 var(--t-brand); }
 .fx-nav__count { margin-left: auto; color: var(--t-dim); font-size: 12px; font-weight: 700; }
 .fx-ico { display: inline-flex; flex: none; }
 .fx-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .fx-side__end { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 6px 0; border-top: 1px solid var(--fx-line); }
 .fx-side__user { display: flex; min-width: 32px; min-height: 32px; align-items: center; }
+/* Clerk replaces the mount's classes with its root box's, so this uses the id. */
+#user-button { flex: 1 1 auto; min-width: 0; }
+/* Folded (wide screens only): the sidebar keeps its icons, the menu button
+   and the account photo; each page's name is still read out. */
+@media (min-width: 821px) {
+  .fx-shell[data-folded] .fx-side { width: 64px; padding-inline: 10px; }
+  .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
+  .fx-shell[data-folded] .fx-brand span { display: none; }
+  .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
+  .fx-shell[data-folded] :is(.fx-nav a, .fx-nav__report) { justify-content: center; padding: 9px 0; }
+  .fx-shell[data-folded] .fx-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+  .fx-shell[data-folded] .fx-side__end { flex-direction: column; padding: 12px 0 0; }
+  .fx-shell[data-folded] #user-button { flex: none; }
+  .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 { 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:focus { outline: none; box-shadow: none; }
 
@@ -295,6 +314,8 @@ a.fx-strong { text-decoration: none; }
 a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--fx-line); }
 .fx-tabs { display: flex; gap: 2px; }
+.fx-tabs button { flex: none; }
+@media (max-width: 640px) { .fx-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } }
 .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;
@@ -303,6 +324,15 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-tabs button:hover { color: var(--t-strong); }
 .fx-tabs button[aria-selected="true"] { color: var(--t-strong); border-bottom-color: var(--t-brand); }
 .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); }
+/* Invoices: the Send all ready bar above the Ready list. */
+.fx-sendbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--fx-line); border-radius: 8px; background: var(--t-paper); margin-top: 12px; }
+.fx-sendbar[hidden] { display: none; }
+.fx-sendbar p { margin: 0; }
+.fx-problem { color: var(--t-danger); }
+.fx-sendbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.fx-tick-cell { width: 40px; }
+.fx-tick { width: 16px; height: 16px; accent-color: var(--t-brand); cursor: pointer; }
 .fx-search { width: min(320px, 100%); margin-bottom: 8px; }
 .fx-table--rows tbody tr { cursor: pointer; }
 .fx-table th.fx-num { text-align: right; }
@@ -373,25 +403,107 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-toolbar--plain .fx-search { margin-bottom: 0; }
 .fx-empty .fx-btn { margin-top: 12px; }
 .fx-panel.fx-empty { display: grid; justify-items: center; }
-.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
-.fx-board__col { display: grid; gap: 8px; align-content: start; min-height: 240px; padding: 10px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-s1); }
-.fx-board__head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 14px; }
-.fx-board__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent); flex: none; }
-.fx-board__dot[data-tone="warn"] { background: var(--t-warn); }
-.fx-board__dot[data-tone="success"] { background: var(--t-success); }
-.fx-board__dot[data-tone="mute"] { background: var(--t-dim); }
-.fx-board__count { padding: 0 7px; border-radius: 999px; background: var(--fx-hover); color: var(--t-dim); font-size: 12px; font-weight: 700; line-height: 20px; }
-.fx-board__sum { margin-left: auto; color: var(--t-dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }
-.fx-board__cards { display: grid; gap: 8px; }
-.fx-board__none { padding: 12px 4px; color: var(--t-dim); font-size: 13px; }
-.fx-job { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); box-shadow: var(--t-shadow); font-size: 13.5px; }
-.fx-job--flag { border-left: 3px solid var(--t-warn); }
-.fx-job__top { display: flex; align-items: baseline; gap: 8px; }
-.fx-job__amount { margin-left: auto; color: var(--t-strong); font-weight: 600; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; }
-.fx-job__client { color: var(--t-text); }
-.fx-job__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--t-dim); font-size: 12.5px; }
-.fx-job__why { color: var(--t-warn); font-size: 12.5px; }
-.fx-job .fx-btn { justify-self: start; margin-top: 4px; }
+/* The board never scrolls sideways: its columns (one per work system status)
+   wrap onto more rows when the page is narrow, and stack on a phone. A long
+   column scrolls inside itself. */
+.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; align-items: start; }
+.fx-board__col { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px 8px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
+.fx-board__head { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 2px 4px; }
+.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; max-height: 70vh; overflow-y: auto; }
+.fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
+.fx-table--jobs tbody tr { cursor: pointer; }
+
+/* A work system status as a coloured label: board columns and the job page.
+   The colour follows where the status sits in the work (job-board.js,
+   statusRank): new, in work, checking and complete, out of the lab, cancelled. */
+.fx-stage {
+  --stage: var(--t-accent);
+  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 3px 8px 3px 7px;
+  border: 1px solid color-mix(in srgb, var(--stage) 30%, transparent); border-radius: 4px;
+  background: color-mix(in srgb, var(--stage) 12%, transparent); color: var(--stage);
+  font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase;
+}
+.fx-stage::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
+.fx-stage__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-stage__count { opacity: .75; font-variant-numeric: tabular-nums; }
+.fx-stage[data-rank="0"] { --stage: var(--t-mute); }
+.fx-stage[data-rank="3"], .fx-stage[data-rank="4"] { --stage: color-mix(in srgb, var(--t-accent) 45%, var(--t-success)); }
+.fx-stage[data-rank="5"], .fx-stage[data-rank="6"] { --stage: var(--t-success); }
+.fx-stage[data-rank="7"] { --stage: var(--t-dim); }
+
+/* ── Job card ───────────────────────────────────────────────────────────────
+   One card on the board ("Task card"; jobs.js, jobCard): client,
+   practitioner, one date, total, and a small warning mark when the job has a
+   problem. The card design may be swapped: change this block and jobCard
+   together. */
+.fx-job { position: relative; display: grid; min-width: 0; padding: 11px 12px 9px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); background: var(--t-paper); box-shadow: var(--t-shadow); font-size: 13px; cursor: pointer; }
+.fx-job:hover { border-color: var(--t-brd-hi, var(--fx-line)); }
+.fx-job:focus-visible { outline: 2px solid var(--t-ring, var(--t-accent)); outline-offset: 2px; }
+.fx-job__client { display: -webkit-box; overflow: hidden; color: var(--t-strong); font-size: 14px; font-weight: 600; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
+.fx-job__who { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 5px; color: var(--t-dim); font-size: 12.5px; }
+.fx-job__who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fx-job__who svg, .fx-job__date svg { flex: none; color: var(--t-mute); }
+.fx-job__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 12px; }
+.fx-job__date { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; }
+.fx-job__date--late, .fx-job__date--late svg { color: var(--t-danger); }
+.fx-job__space { flex: 1; }
+.fx-job__amount { color: var(--t-text); font-weight: 600; font-family: var(--t-data, var(--t-body)); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fx-job__problem { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--t-warn); cursor: pointer; }
+.fx-job__problem:hover, .fx-job__problem:focus-visible { background: var(--t-warn-bg); }
+.fx-job__cell { display: inline-flex; align-items: center; gap: 6px; }
+
+/* ── Job page ───────────────────────────────────────────────────────────────
+   A job opened from the board: a large panel over it, like a task page, with
+   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__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; }
+.fx-task__slash { color: var(--t-mute); }
+.fx-task__title { margin: 6px 0 12px; color: var(--t-strong); font: var(--t-display-weight) 30px/1.15 var(--t-display); overflow-wrap: anywhere; }
+.fx-task__stage { margin-bottom: 18px; }
+.fx-task__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
+.fx-task__fields > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--fx-line-soft); }
+.fx-task__fields dt { color: var(--t-dim); font-size: 12.5px; }
+.fx-task__fields dd { min-width: 0; margin: 0; color: var(--t-strong); font-size: 13.5px; overflow-wrap: anywhere; }
+.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 { margin-top: 24px; }
+.fx-task__lines h3 { margin-bottom: 8px; }
+.fx-task__lines table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
+.fx-task__lines th { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--fx-line); color: var(--t-mute); font-size: 12px; font-weight: 500; text-align: left; }
+.fx-task__lines td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--fx-line-soft); vertical-align: top; overflow-wrap: anywhere; }
+.fx-task__lines .fx-num { padding-right: 0; text-align: right; }
+.fx-task__lines tfoot td { border-bottom: 0; color: var(--t-strong); font-weight: 600; }
+.fx-task__col-code { width: 130px; }
+.fx-task__col-amount { width: 96px; }
+.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 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); }
+.fx-task__activity li::after { content: ""; position: absolute; left: 5.5px; top: 16px; bottom: 0; width: 1px; background: var(--fx-line); }
+.fx-task__activity li:last-child::after { display: none; }
+.fx-task__activity time { display: block; margin-top: 1px; color: var(--t-mute); font-size: 11.5px; }
+@media (max-width: 760px) {
+  .fx-dialog.fx-task { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; border-radius: 0; }
+  .fx-task__grid { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__main { padding: 16px; }
+  .fx-task__fields { grid-template-columns: minmax(0, 1fr); }
+  .fx-task__activity { padding: 16px; border-top: 1px solid var(--fx-line); border-left: 0; }
+}
 
 /* ── Dialog ─────────────────────────────────────────────────────────────── */
 .fx-dialog {
@@ -405,6 +517,25 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-dialog__title { color: var(--t-strong); font: var(--t-display-weight) 21px/1.2 var(--t-display); }
 .fx-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
 
+/* Search (search.js): a box near the top, results grouped under it. */
+.fx-search-dialog { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; }
+.fx-search-dialog__bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--fx-line); color: var(--t-dim); }
+.fx-search-dialog__input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--t-strong); font: 500 16px/1.4 var(--t-body); }
+.fx-search-dialog__input:focus { outline: none; box-shadow: none; }
+.fx-search-dialog__input::-webkit-search-cancel-button { display: none; }
+.fx-search-dialog__results { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
+.fx-search-dialog__group + .fx-search-dialog__group { margin-top: 6px; }
+.fx-search-dialog__label { padding: 8px 10px 4px; 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-search-dialog__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--t-radius); color: var(--t-text); text-decoration: none; }
+.fx-search-dialog__option:hover { background: var(--fx-hover); }
+.fx-search-dialog__option[aria-selected="true"] { color: var(--t-accent); background: var(--t-accent-bg); }
+.fx-search-dialog__text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
+.fx-search-dialog__title { flex: none; color: inherit; font-weight: 600; font-size: 14px; }
+.fx-search-dialog__detail { overflow: hidden; color: var(--t-dim); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
+/* --t-dim is only checked on plain surfaces; on the accent tint, --t-text passes. */
+.fx-search-dialog__option[aria-selected="true"] .fx-search-dialog__detail { color: var(--t-text); }
+.fx-search-dialog__empty { padding: 18px 10px; color: var(--t-dim); text-align: center; }
+
 /* ── Sign-in ────────────────────────────────────────────────────────────── */
 .fx-auth { min-height: 100vh; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
 .fx-auth__brand {
@@ -506,13 +637,18 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 @media (max-width: 820px) {
   .fx-shell { flex-direction: column; }
   .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 > .fx-brand { padding: 0; }
-  .fx-side > .fx-brand span { display: none; }
-  .fx-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
-  .fx-nav__group { display: none; }
-  .fx-nav a { padding: 7px 9px; }
-  .fx-nav a .fx-ico { display: none; }
-  .fx-side__end { padding: 0; border-top: 0; }
+  .fx-side__head { flex-direction: row-reverse; gap: 6px; padding: 0; }
+  .fx-side__head .fx-brand span { display: none; }
+  /* The menu opens as a panel below the bar. */
+  .fx-nav {
+    display: none; position: absolute; top: 60px; left: 0; right: 0;
+    max-height: calc(100vh - 60px); padding: 4px 12px 12px;
+    background: var(--t-s1); border-bottom: 1px solid var(--fx-line); box-shadow: var(--t-shadow);
+  }
+  .fx-shell[data-menu-open] .fx-nav { display: flex; }
+  .fx-nav__report { margin-top: 8px; }
+  .fx-side__end { margin-left: auto; padding: 0; border-top: 0; }
+  #user-button { flex: none; }
 }
 
 /* ── Phones ─────────────────────────────────────────────────────────────── */
@@ -536,3 +672,80 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after { animation: none !important; transition: none !important; }
 }
+
+/* ── Settings rows ───────────────────────────────────────────────────────
+   One row for each setting: its name, one short line under it, and the
+   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); }
+/* 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; }
+.fx-rule__conditions { display: grid; gap: 8px; }
+.fx-rule__condition { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: start; }
+.fx-rule__condition + .fx-rule__condition { padding-top: 8px; border-top: 1px solid var(--fx-line); }
+.fx-rule__condition .fx-select, .fx-rule__condition .fx-input { width: 100%; min-width: 0; }
+.fx-rule__value { display: flex; gap: 6px; align-items: center; min-width: 0; }
+.fx-rule__many { display: grid; gap: 2px; max-height: 160px; overflow: auto; padding: 4px 8px; border: 1px solid var(--fx-line); border-radius: 8px; width: 100%; }
+.fx-rule__delete { justify-self: start; color: var(--t-danger); }
+@media (max-width: 640px) {
+  .fx-rule__condition { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 560px) {
+  .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; }
+@media (max-width: 600px) { .fx-multi { width: 150px; } }
+.fx-multi__summary::-webkit-details-marker { display: none; }
+.fx-multi__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; gap: 2px; min-width: 100%; max-height: 280px; overflow-y: auto; padding: 6px; background: var(--t-paper); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); box-shadow: var(--t-shadow); }
+.fx-multi__option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; cursor: pointer; white-space: nowrap; }
+.fx-multi__option:hover { background: var(--fx-line-soft); }
+.fx-switch {
+  position: relative; width: 40px; height: 22px; padding: 0; flex: none; cursor: pointer;
+  border: 0; border-radius: 999px; background: var(--t-control);
+}
+.fx-switch::after {
+  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
+  border-radius: 50%; background: var(--t-paper); transition: transform 0.15s;
+}
+.fx-switch[aria-checked="true"] { background: var(--t-primary); }
+.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; }
+
+/* ── Sentry's report form (monitoring.js) ──────────────────────────────────
+   The form lives in a shadow root and reads these variables from its host.
+   Rules here win over the form's own defaults, so it takes each person's
+   theme and mode, and follows a change at once. */
+#sentry-feedback {
+  --font-family: var(--t-body);
+  --foreground: var(--t-text);
+  --background: var(--t-paper);
+  --accent-foreground: var(--t-on-primary);
+  --accent-background: var(--t-primary);
+  --success-color: var(--t-success);
+  --error-color: var(--t-danger);
+  --border: 1px solid var(--t-control);
+  --box-shadow: var(--t-shadow);
+  --outline: 2px solid var(--t-primary);
+  --interactive-filter: brightness(95%);
+  color-scheme: light;
+}
+[data-mode="dark"] #sentry-feedback { --interactive-filter: brightness(150%); color-scheme: dark; }

package/server/ui/invoice-rules.js

@@ -0,0 +1,237 @@
+// The "Rules" section of Settings, Invoicing (server/core/invoice-rules.js,
+// /api/invoicing/rules). Each rule a lab builds is a row: its name, one short
+// line that reads its conditions, and its switch. Edit opens a dialog where
+// every part is picked from a menu: the field, the test, and a value from
+// what Flow already holds (Seazona's statuses, the customers, the price list).
+// Everyone can read the rules; an owner or admin changes them. The caller
+// passes in app.js's shared pieces as `ui`.
+
+const DOCS = 'https://github.com/arcforgelabs/flow/blob/main/docs/INVOICE_RULES.md';
+
+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',
+};
+const ACTION_LABELS = { wait: 'Wait for a person', skip: 'Never draft' };
+const NO_VALUE = ['is_empty', 'is_not_empty'];
+
+// A rule as one short line: "Job age (days) is more than 90 · Wait for a person".
+export function ruleSummary(rule, meta) {
+  const fieldOf = new Map(meta.fields.map((f) => [f.key, f]));
+  const labelOf = (field, value) => {
+    const option = (meta.options[field.options] ?? []).find((o) => String(o.value).toLowerCase() === String(value).toLowerCase());
+    return option?.label ?? String(value);
+  };
+  const part = (c) => {
+    const field = fieldOf.get(c.field);
+    if (!field) return c.field;
+    const test = TEST_LABELS[c.test] ?? c.test;
+    if (NO_VALUE.includes(c.test)) return `${field.label} ${test}`;
+    if (field.kind === 'boolean') return `${field.label} ${test} ${c.value ? 'yes' : 'no'}`;
+    if (field.kind === 'share') return `${labelOf(field, c.item).split(' · ')[0]} share ${test} ${c.value}%`;
+    if (field.kind === 'money') return `${field.label} ${test} $${Number(c.value).toFixed(2)}`;
+    const value = Array.isArray(c.value) ? c.value.map((v) => labelOf(field, v)).join(', ') : labelOf(field, c.value);
+    return `${field.label} ${test} ${value}`;
+  };
+  return `${rule.conditions.map(part).join(' and ')} · ${ACTION_LABELS[rule.action.kind] ?? rule.action.kind}`;
+}
+
+export function rulesSection(ui, title = 'Rules') {
+  const { h, flow, toast, notice, dialog, me } = 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));
+
+  async function send(path, method, payload) {
+    try {
+      const body = await flow(path, { method, ...(payload ? { body: JSON.stringify(payload) } : {}) });
+      toast('Saved.', 'success');
+      return body;
+    } catch (error) {
+      toast(error.message, 'danger');
+      return null;
+    }
+  }
+
+  // One condition's controls: field, test and value, each a menu where Flow
+  // knows the values. `read()` answers the condition as the API takes it.
+  function conditionEditor(start, onRemove) {
+    const fieldSelect = h('select', { class: 'fx-select', 'aria-label': 'Field' },
+      meta.fields.map((f) => h('option', { value: f.key }, f.label)));
+    const testSelect = h('select', { class: 'fx-select', 'aria-label': 'Test' });
+    const valueHost = h('div', { class: 'fx-rule__value' });
+    let readValue = () => ({});
+
+    const options = (field) => meta.options[field.options] ?? [];
+    const choiceSelect = (field, value, label) => {
+      const list = options(field);
+      const select = h('select', { class: 'fx-select', 'aria-label': label },
+        list.map((o) => h('option', { value: o.value }, o.label)));
+      if (value !== undefined && !list.some((o) => String(o.value).toLowerCase() === String(value).toLowerCase())) {
+        select.append(h('option', { value }, String(value)));
+      }
+      if (value !== undefined) select.value = list.find((o) => String(o.value).toLowerCase() === String(value).toLowerCase())?.value ?? value;
+      return select;
+    };
+    const numberBox = (value, label) => h('input', { class: 'fx-input', type: 'number', min: '0', step: 'any', value: value ?? '', 'aria-label': label });
+
+    function drawValue(value, item) {
+      const field = meta.fields.find((f) => f.key === fieldSelect.value);
+      const test = testSelect.value;
+      valueHost.replaceChildren();
+      if (NO_VALUE.includes(test)) {
+        readValue = () => ({});
+      } else if (field.kind === 'boolean') {
+        const select = h('select', { class: 'fx-select', 'aria-label': 'Value' }, h('option', { value: 'true' }, 'Yes'), h('option', { value: 'false' }, 'No'));
+        select.value = String(value ?? false);
+        valueHost.append(select);
+        readValue = () => ({ value: select.value === 'true' });
+      } else if (field.kind === 'share') {
+        const items = choiceSelect(field, item, 'Line item');
+        const box = numberBox(value ?? 20, 'Percent of the other lines');
+        valueHost.append(items, box, h('span', { class: 'fx-dim' }, '%'));
+        readValue = () => ({ item: items.value, value: Number(box.value) });
+      } else if (['number', 'money'].includes(field.kind)) {
+        const box = numberBox(value, 'Value');
+        valueHost.append(box);
+        readValue = () => ({ value: Number(box.value) });
+      } else if (test === 'is_one_of') {
+        const chosen = new Set((Array.isArray(value) ? value : []).map((v) => String(v).toLowerCase()));
+        const boxes = options(field).map((o) => {
+          const box = h('input', { type: 'checkbox', value: o.value, checked: chosen.has(String(o.value).toLowerCase()) });
+          return h('label', { class: 'fx-multi__option' }, box, h('span', {}, o.label));
+        });
+        valueHost.append(h('div', { class: 'fx-rule__many' }, ...(boxes.length ? boxes : [h('span', { class: 'fx-dim' }, 'No values yet.')])));
+        readValue = () => ({ value: boxes.map((b) => b.querySelector('input')).filter((b) => b.checked).map((b) => b.value) });
+      } else if (field.options) {
+        const select = choiceSelect(field, Array.isArray(value) ? value[0] : value, 'Value');
+        valueHost.append(select);
+        readValue = () => ({ value: select.value });
+      } else {
+        const box = h('input', { class: 'fx-input', type: 'text', value: value ?? '', 'aria-label': 'Value' });
+        valueHost.append(box);
+        readValue = () => ({ value: box.value });
+      }
+    }
+
+    function drawTests(test) {
+      const field = meta.fields.find((f) => f.key === fieldSelect.value);
+      testSelect.replaceChildren(...field.tests.map((t) => h('option', { value: t }, TEST_LABELS[t] ?? t)));
+      testSelect.value = field.tests.includes(test) ? test : field.tests[0];
+    }
+
+    fieldSelect.value = start?.field ?? meta.fields[0].key;
+    drawTests(start?.test);
+    drawValue(start?.value, start?.item);
+    fieldSelect.addEventListener('change', () => { drawTests(); drawValue(); });
+    testSelect.addEventListener('change', () => drawValue());
+
+    const remove = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', 'aria-label': 'Remove condition' }, 'Remove');
+    const element = h('div', { class: 'fx-rule__condition' }, fieldSelect, testSelect, valueHost, remove);
+    remove.addEventListener('click', () => onRemove(element));
+    return { element, read: () => ({ field: fieldSelect.value, test: testSelect.value, ...readValue() }) };
+  }
+
+  // The dialog for a new rule (rule null) or an existing one. `draft` fills
+  // it again after a refused save, so no choice is lost.
+  async function edit(rule, draft = rule) {
+    const name = h('input', { class: 'fx-input', name: 'name', required: true, maxlength: '120', value: draft?.name ?? '', 'aria-label': 'Rule name' });
+    const action = h('select', { class: 'fx-select', 'aria-label': 'Then' },
+      Object.entries(ACTION_LABELS).map(([value, label]) => h('option', { value }, label)));
+    action.value = draft?.action.kind ?? 'wait';
+    let editors = [];
+    const list = h('div', { class: 'fx-rule__conditions' });
+    const addCondition = (start) => {
+      if (editors.length >= 10) return toast('A rule has 10 conditions at most.', 'danger');
+      const editor = conditionEditor(start, (element) => {
+        if (editors.length === 1) return toast('A rule needs at least one condition.', 'danger');
+        editors = editors.filter((e) => e.element !== element);
+        element.remove();
+        return null;
+      });
+      editors.push(editor);
+      list.append(editor.element);
+      return null;
+    };
+    for (const c of draft?.conditions ?? [null]) addCondition(c);
+    const more = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add condition');
+    more.addEventListener('click', () => addCondition());
+
+    let wantsDelete = false;
+    const remove = rule ? h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm fx-rule__delete', type: 'button' }, 'Delete rule') : null;
+    remove?.addEventListener('click', () => {
+      wantsDelete = true;
+      remove.closest('dialog').close();
+    });
+
+    const label = (text, ...children) => h('div', { class: 'fx-field' }, h('span', { class: 'fx-label' }, text), ...children);
+    const data = await dialog({
+      title: rule ? 'Edit rule' : 'New rule',
+      body: h('div', { class: 'fx-fields fx-rule__dialog' },
+        label('Name', name),
+        label('When', h('span', { class: 'fx-dim' }, 'A job is ready to invoice and has no invoice.')),
+        label('If all of these match', list, more),
+        label('Then', action),
+        remove),
+      confirm: rule ? 'Save' : 'Add rule',
+    });
+    if (wantsDelete) {
+      const sure = await dialog({ title: `Delete "${rule.name}"?`, body: h('p', { class: 'fx-dim' }, 'Jobs stop waiting on this rule.'), confirm: 'Delete', tone: 'danger' });
+      if (sure && await send(`/api/invoicing/rules/${rule.id}`, 'DELETE')) rules = rules.filter((r) => r.id !== rule.id);
+      return draw();
+    }
+    if (!data) return null;
+    const payload = { name: name.value, conditions: editors.map((e) => e.read()), action: { kind: action.value } };
+    const body = rule
+      ? await send(`/api/invoicing/rules/${rule.id}`, 'PUT', payload)
+      : await send('/api/invoicing/rules', 'POST', payload);
+    if (!body) return edit(rule, payload);
+    rules = rule ? rules.map((r) => (r.id === rule.id ? body.rule : r)) : [...rules, body.rule];
+    return draw();
+  }
+
+  const rowOf = (rule) => {
+    const toggle = h('button', { class: 'fx-switch', type: 'button', role: 'switch', 'aria-label': rule.name, 'aria-checked': String(rule.enabled), disabled });
+    toggle.addEventListener('click', async () => {
+      toggle.disabled = true;
+      const body = await send(`/api/invoicing/rules/${rule.id}`, 'PUT', { enabled: toggle.getAttribute('aria-checked') !== 'true' });
+      toggle.disabled = disabled;
+      if (!body) return;
+      rules = rules.map((r) => (r.id === rule.id ? body.rule : r));
+      toggle.setAttribute('aria-checked', String(body.rule.enabled));
+    });
+    const controls = [toggle];
+    if (!disabled) {
+      const open = h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button', 'aria-label': `Edit ${rule.name}` }, 'Edit');
+      open.addEventListener('click', () => edit(rule));
+      controls.unshift(open);
+    }
+    return row(rule.name, ruleSummary(rule, meta), controls);
+  };
+
+  function draw() {
+    const add = disabled ? null : h('button', { class: 'fx-btn fx-btn--ghost fx-btn--sm', type: 'button' }, 'Add rule');
+    add?.addEventListener('click', () => edit(null));
+    section.replaceChildren(
+      h('h2', { class: 'fx-set__title' }, title),
+      h('p', { class: 'fx-set__hint', style: { margin: '0 0 4px' } }, 'A ready job waits, or is never drafted, when a rule matches.'),
+      ...(rules.length ? rules.map(rowOf) : [h('p', { class: 'fx-dim' }, 'No rules. Every ready job is drafted.')]),
+      h('div', { class: 'fx-rule__footer' }, add,
+        h('a', { class: 'fx-dim', href: DOCS, target: '_blank', rel: 'noopener' }, 'How rules work')));
+  }
+
+  (async () => {
+    try {
+      [meta, { rules }] = await Promise.all([flow('/api/invoicing/rule-fields'), flow('/api/invoicing/rules')]);
+      draw();
+    } catch (error) {
+      section.replaceChildren(h('h2', { class: 'fx-set__title' }, title), notice(error.message, 'danger'));
+    }
+  })();
+  return section;
+}