@arcforgelabs/flow 2026.10.36 → 2026.10.38

package/server/ui/flow.css

@@ -155,7 +155,8 @@ body:is([data-state="off"], [data-state="error"], [data-state="no-access"]) .fx-
 /* 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 { width: 64px; padding-inline: 10px; cursor: e-resize; }
+  .fx-shell[data-folded] .fx-side :is(a, button, #user-button) { cursor: pointer; }
   .fx-shell[data-folded] .fx-side__head { flex-direction: column; gap: 10px; padding: 0 0 14px; }
   .fx-shell[data-folded] .fx-side__head .fx-brand { display: none; }
   .fx-shell[data-folded] .fx-nav__group { height: 1px; margin: 10px 6px; padding: 0; overflow: hidden; background: var(--fx-line); color: transparent; }
@@ -234,6 +235,12 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
 .fx-link__dot[data-tone="success"] { background: var(--t-success); }
 .fx-link__dot[data-tone="warn"] { background: var(--t-warn); }
 .fx-link__dot[data-tone="danger"] { background: var(--t-danger); }
+.fx-linked { display: grid; }
+.fx-linked__row { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--fx-line-soft); }
+.fx-linked__row:first-child { border-top: 0; }
+.fx-linked__ref { font-family: var(--t-data); font-variant-numeric: tabular-nums; color: var(--t-strong); }
+.fx-linked__open { margin-left: auto; font-size: 12.5px; color: var(--t-dim); white-space: nowrap; }
+.fx-linked__open:hover { color: var(--t-strong); }
 .fx-tag {
   margin-left: 8px; padding: 1px 7px; border: 1px solid var(--fx-line); border-radius: 999px;
   color: var(--t-dim); font-size: 11.5px; font-weight: 600;
@@ -269,9 +276,6 @@ a.fx-link:hover, a.fx-link:focus-visible { border-color: var(--t-strong); }
   font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
 }
 .fx-empty { padding: 28px 16px; color: var(--t-dim); text-align: center; }
-.fx-roles { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; color: var(--t-dim); }
-.fx-roles dt { color: var(--t-strong); font-weight: 600; }
-.fx-roles dd { margin: 0; }
 
 /* ── Integrations ───────────────────────────────────────────────────────── */
 .fx-chip { border: 1px solid var(--fx-line); border-radius: 999px; background: var(--t-paper); color: var(--t-text); }
@@ -508,13 +512,32 @@ a.fx-strong:hover { text-decoration: underline; }
 .fx-table tbody tr.fx-table__group:hover td { background: var(--t-s1); }
 .fx-table__group-row { display: flex; align-items: center; gap: 12px; }
 .fx-table__group-row .fx-board__sum { margin-left: 0; }
+/* The Jobs list's group head folds its rows (jobs.js, list): a click on the
+   head or its chevron. */
+.fx-table--jobs .fx-table__group { cursor: pointer; }
+.fx-table--jobs .fx-table__group td.fx-tick-cell { padding-right: 0; }
+.fx-table__fold { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 2px 4px 2px 0; border: 0; background: none; color: var(--t-dim); font: inherit; cursor: pointer; }
+.fx-table__fold > svg { flex: none; transition: transform .15s; }
+.fx-table__fold[aria-expanded="true"] > svg { transform: rotate(90deg); }
+.fx-table__fold:hover, .fx-table__fold:focus-visible { color: var(--t-strong); outline: none; }
+.fx-table__fold:focus-visible .fx-stage, .fx-table__fold:focus-visible .fx-cf__opt { box-shadow: 0 0 0 2px var(--t-accent); }
+.fx-table__group--folded td { padding-bottom: 14px; }
+/* A Jobs list column head opens the column's menu (a click or a
+   right-click); + at the end shows a hidden column. */
+.fx-th { margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
+.fx-th:hover, .fx-th:focus-visible { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-th-add { width: 36px; text-align: right; }
+.fx-th--add { font-size: 16px; line-height: 1; }
+.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); }
-/* The board never scrolls sideways: its columns (one per work system status)
-   are about a phone wide, wrap onto more rows when the page is narrow, and
-   stack on a phone. On a wide, tall screen the board fills the page down to
-   its bottom edge, and each column scrolls inside itself (jobs.js sets
-   fx-main--board while the board shows). */
-.fx-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr)); gap: 12px; align-items: start; }
+/* The board is one row of lanes (one per group), each about a phone wide.
+   Lanes share the width when they fit; more lanes scroll sideways inside
+   the board, never as a second row. On a wide, tall screen the board fills
+   the page down to its bottom edge, the page itself does not scroll, and
+   each lane scrolls inside itself (jobs.js sets fx-main--board while the
+   board shows). */
+.fx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(85vw, 272px), 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
 .fx-board__col { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 10px 6px 6px 8px; border-radius: var(--t-radius-lg); background: var(--t-s1); }
 .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; }
@@ -522,7 +545,7 @@ a.fx-strong:hover { text-decoration: underline; }
 @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--board .fx-board { height: 100%; overflow-y: auto; grid-auto-rows: 100%; align-items: stretch; }
+  .fx-main--board .fx-board { height: 100%; overflow-y: hidden; align-items: stretch; }
   .fx-main--board .fx-board__cards { flex: 1; max-height: none; }
 }
 .fx-board__none { padding: 8px 4px; color: var(--t-dim); font-size: 13px; }
@@ -608,6 +631,70 @@ a.fx-strong:hover { text-decoration: underline; }
 .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__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; }
+.fx-task__choices { display: flex; flex-wrap: wrap; gap: 10px; }
+.fx-task__none { display: inline-flex; align-items: center; gap: 6px; color: var(--t-warn); }
+.fx-task__none svg { width: 16px; height: 16px; }
+
+/* Reconcile: the queue left, one job and its possible invoices right. */
+.fx-rec { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); min-height: 420px; }
+.fx-rec > .fx-empty, .fx-rec > .fx-dim { grid-column: 1 / -1; }
+.fx-rec__queue { display: flex; flex-direction: column; border-right: 1px solid var(--fx-line); max-height: 75vh; overflow-y: auto; }
+.fx-rec__tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line); }
+.fx-rec__tab { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--fx-line); border-radius: 999px; color: var(--t-text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
+.fx-rec__tab[aria-selected="true"] { border-color: var(--t-primary); background: var(--t-primary); color: var(--t-on-primary); }
+.fx-rec__search { width: 100%; min-width: 0; }
+.fx-rec__results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
+.fx-rec__item { display: grid; gap: 3px; min-height: 44px; padding: 12px 16px; border-bottom: 1px solid var(--fx-line-soft); border-left: 3px solid transparent; color: var(--t-text); text-decoration: none; }
+.fx-rec__item:hover { background: var(--fx-hover); }
+.fx-rec__item[aria-current="true"] { border-left-color: var(--t-accent); background: var(--t-s1); }
+.fx-rec__item-top { display: flex; justify-content: space-between; gap: 8px; }
+.fx-rec__item .fx-num { font-family: var(--t-data); font-variant-numeric: tabular-nums; }
+.fx-rec__detail { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px 24px; }
+.fx-rec__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
+.fx-rec__head > div { display: grid; gap: 2px; }
+.fx-rec__back { display: none; color: var(--t-accent); text-decoration: none; font-size: 13px; }
+.fx-rec__title { margin: 0; font-family: var(--t-display); font-weight: var(--t-display-weight); color: var(--t-strong); font-size: 24px; }
+.fx-rec__table { display: grid; grid-template-columns: 110px minmax(150px, 1fr) repeat(var(--cols), minmax(170px, 1fr)); border: 1px solid var(--fx-line); border-radius: var(--t-radius); overflow-x: auto; }
+.fx-rec__row { display: contents; }
+.fx-rec__row > span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 1px solid var(--fx-line-soft); font-size: 13.5px; color: var(--t-strong); }
+.fx-rec__row:first-child > span { border-top: 0; background: var(--t-s1); }
+.fx-rec__row > span[role="cell"]:not(.fx-rec__job) { flex-direction: row; align-items: flex-start; gap: 6px; }
+.fx-rec__row > span[role="cell"].fx-rec__acts { flex-direction: column; align-items: stretch; gap: 8px; }
+.fx-rec__acts > .fx-task__link, .fx-rec__card > .fx-task__link { align-self: flex-start; }
+.fx-rec__job { background: color-mix(in srgb, var(--t-accent) 5%, transparent); }
+.fx-rec__row:first-child > .fx-rec__job { background: color-mix(in srgb, var(--t-accent) 10%, var(--t-s1)); }
+.fx-rec__lines { display: flex; flex-direction: column; font-family: var(--t-data); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.6; }
+.fx-rec__mark { flex: none; font-weight: 800; }
+[data-mark="same"] > .fx-rec__mark { color: var(--t-success); }
+[data-mark="differs"], [data-mark="differs"] > .fx-rec__mark { color: var(--t-warn); }
+.fx-rec__best { color: var(--t-success); font-size: 12px; font-weight: 700; }
+.fx-rec__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
+.fx-rec__foot-acts { display: flex; gap: 10px; flex-wrap: wrap; }
+.fx-rec__cards { display: none; }
+.fx-rec__card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--fx-line); border-radius: var(--t-radius); font-size: 13.5px; color: var(--t-strong); }
+.fx-rec__card.fx-rec__job { border-color: transparent; }
+.fx-rec__card--best { border-color: var(--t-success); }
+.fx-rec__card-top { display: flex; justify-content: space-between; gap: 8px; }
+.fx-rec__label { color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+.fx-rec__checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
+@media (max-width: 1100px) {
+  .fx-rec { grid-template-columns: minmax(0, 1fr); min-height: 0; }
+  .fx-rec__queue { border-right: 0; max-height: none; }
+  .fx-rec--open .fx-rec__queue { display: none; }
+  .fx-rec:not(.fx-rec--open) .fx-rec__detail { display: none; }
+  .fx-rec__back { display: inline; }
+}
+@media (max-width: 820px) {
+  .fx-rec__detail { padding: 16px; }
+  .fx-rec__table { display: none; }
+  .fx-rec__cards { display: flex; flex-direction: column; gap: 12px; }
+  .fx-rec__cards .fx-btn, .fx-rec__foot .fx-btn { min-height: 44px; }
+  .fx-rec__foot-acts { width: 100%; }
+  .fx-rec__foot-acts .fx-btn { flex: 1 1 auto; }
+}
 .fx-task__custom { margin-top: 24px; }
 .fx-task__custom h3 { margin: 0 0 4px; color: var(--t-dim); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
 .fx-task__input { width: 100%; min-width: 0; }
@@ -823,6 +910,30 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
   .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; }
+  .fx-people td, .fx-people td:nth-child(2), .fx-people td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
+  .fx-people td:nth-child(1) { grid-area: 1 / 1; }
+  .fx-people td:nth-child(4) { grid-area: 1 / 2; }
+  .fx-people td:nth-child(2) { grid-area: 2 / 1 / 3 / -1; }
+  .fx-people td:nth-child(2) .fx-select { width: 100%; }
+  .fx-people td:nth-child(3) { grid-area: 3 / 1 / 4 / -1; }
+  .fx-people td:nth-child(3):empty { display: none; }
+  /* Jobs list: the tick at the left of each row and group head; the client
+     and total on the first line, then each other column on its own line,
+     with its name. */
+  .fx-table--jobs tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; }
+  .fx-table--jobs td, .fx-table--jobs td:nth-child(2), .fx-table--jobs td:nth-child(3) { display: block; width: auto; margin: 0; padding: 0; }
+  .fx-table--jobs tr > td.fx-tick-cell { grid-column: 1; grid-row: 1; align-self: start; padding-top: 2px; }
+  .fx-table--jobs tr.fx-row-link > td:not(.fx-tick-cell) { grid-column: 2 / -1; }
+  .fx-table--jobs tr.fx-row-link > td.fx-c-client { grid-area: 1 / 2; }
+  .fx-table--jobs tr.fx-row-link > td.fx-c-total { grid-area: 1 / 3; }
+  .fx-table--jobs td.fx-c-end { display: none; }
+  .fx-table--jobs tr.fx-row-link > td[data-label]:not(.fx-c-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; }
 }
 
 @keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@@ -921,6 +1032,7 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-cfm > .fx-notice { margin: 12px 16px 0; }
 .fx-cfm__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--fx-line-soft); color: var(--t-dim); font-size: 13px; }
 .fx-pop__item:disabled { opacity: .5; cursor: default; }
+.fx-pop__item[data-tone="danger"], .fx-pop__item[data-tone="danger"] .fx-pop__tick { color: var(--t-danger); }
 .fx-pop__item .fx-lucide { width: 15px; height: 15px; }
 @media (max-width: 720px) {
   .fx-cfm { grid-template-columns: minmax(0, 1fr) 40px 40px; }
@@ -1019,3 +1131,105 @@ body[data-state="loading"] .fx-loading { display: grid; justify-items: center; }
 .fx-pick__row[hidden] { display: none; }
 .fx-pick__main { display: grid; gap: 2px; min-width: 0; }
 .fx-pick > .fx-dim { padding: 14px; }
+
+/* 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; }
+.fx-listhead[data-stuck] { box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .45); }
+.fx-listhead .fx-sendbar { margin-bottom: 12px; }
+.fx-listhead__edge { height: 0; margin-bottom: -20px; }
+@media (max-width: 820px) { .fx-listhead { top: 60px; } }
+/* On a phone the head would hide too many rows: it scrolls away. */
+@media (max-width: 560px) { .fx-listhead { 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
+   the theme's own surface, line, corners and primary button, like a menu. */
+.fx-bulk {
+  position: sticky; bottom: 16px; z-index: 6; justify-self: center; display: flex; align-items: center; gap: 2px; max-width: 100%;
+  padding: 5px; border: 1px solid var(--fx-line); border-radius: var(--t-radius-lg); background: var(--t-paper); color: var(--t-text);
+  box-shadow: var(--t-shadow), 0 12px 32px rgba(0, 0, 0, .16);
+  font: 500 13.5px/1 var(--t-body); white-space: nowrap;
+}
+.fx-bulk[hidden] { display: none; }
+.fx-bulk[aria-busy="true"] { opacity: .7; pointer-events: none; }
+.fx-bulk__acts { display: flex; align-items: center; gap: 2px; min-width: 0; }
+.fx-bulk__count { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--t-accent-brd, var(--fx-line)); border-radius: var(--t-radius); background: var(--t-accent-bg); color: var(--t-accent); font-weight: 600; }
+.fx-bulk__clear, .fx-bulk__act { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--t-radius); background: none; color: inherit; font: inherit; cursor: pointer; }
+.fx-bulk__clear { padding: 3px; color: inherit; }
+.fx-bulk__act:hover, .fx-bulk__act:focus-visible, .fx-bulk__act[aria-expanded="true"] { background: var(--fx-hover); color: var(--t-strong); outline: none; }
+.fx-bulk__clear:hover, .fx-bulk__clear:focus-visible { background: color-mix(in srgb, var(--t-accent) 14%, transparent); outline: none; }
+.fx-bulk__act--primary, .fx-bulk__act--primary:hover, .fx-bulk__act--primary:focus-visible { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-on-primary); font-weight: 600; }
+.fx-bulk__act--primary:hover { background: color-mix(in srgb, var(--t-primary) 86%, var(--t-text)); }
+.fx-bulk__act--icon { padding: 7px; }
+.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; }
+.fx-bulk__more .fx-pop__head { padding: 6px 8px 2px; font-size: 10.5px; }
+.fx-bulk__more .fx-pop__item { gap: 8px; padding: 4px 8px; font-size: 13px; line-height: 1.25; }
+.fx-bulk__more .fx-pop__item .fx-lucide { width: 14px; height: 14px; }
+.fx-bulk__grid { display: grid; }
+.fx-bulk__grid .fx-pop__item[data-tone="danger"] { color: var(--t-danger); }
+.fx-bulk__none { margin: 8px 10px; color: var(--t-dim); font-size: 13.5px; }
+@media (max-width: 560px) {
+  .fx-bulk { bottom: 10px; padding: 4px; }
+  .fx-bulk__count { margin-right: 2px; padding-left: 8px; }
+  .fx-bulk__act { padding: 7px 6px; }
+  .fx-bulk__sep { margin: 0 2px; }
+  .fx-bulk__act:not(.fx-bulk__act--primary) .fx-bulk__word { display: none; }
+}
+
+/* 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 .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; }
+.fx-xi__view[aria-selected="true"] { background: var(--t-primary); color: var(--t-on-primary); }
+.fx-xi__count { display: inline-flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
+.fx-xi__progress { display: inline-block; width: 120px; height: 4px; background: var(--fx-line); }
+.fx-xi__progress > span { display: block; height: 100%; background: var(--t-primary); }
+.fx-xi__bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--t-primary); background: color-mix(in srgb, var(--t-primary) 6%, transparent); color: var(--t-strong); font-size: 13.5px; }
+.fx-xi__bulk-text { margin-right: auto; }
+.fx-xi__bulk .fx-btn { display: inline-flex; align-items: center; gap: 6px; }
+.fx-xi__bulk .fx-xi__search { flex: 1; min-width: 0; margin-right: 0; }
+.fx-xi-cmp { width: 100%; border-collapse: collapse; border: 1px solid var(--fx-line); background: var(--t-s1); }
+.fx-xi-cmp th, .fx-xi-cmp td { padding: 11px 16px; border-top: 1px solid var(--fx-line-soft); text-align: left; font-size: 14px; color: var(--t-strong); }
+.fx-xi-cmp thead th { border-top: 0; padding: 14px 16px; }
+.fx-xi-cmp tbody th { width: 44px; color: var(--t-dim); }
+.fx-xi-cmp td:nth-child(2), .fx-xi-cmp th:nth-child(2) { width: 42%; }
+.fx-xi-cmp__mid { width: 48px; text-align: center !important; }
+.fx-xi__mark { height: 22px; width: auto; vertical-align: middle; }
+.fx-xi-cmp thead th:last-child { display: flex; align-items: center; gap: 10px; color: var(--t-dim); }
+.fx-xi__agree { display: inline-grid; place-items: center; width: 24px; height: 24px; }
+.fx-xi__agree[data-state="same"] { color: var(--t-success); }
+.fx-xi__agree[data-state="differs"] { color: var(--t-warn); }
+.fx-xi__acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.fx-xi__acts .fx-btn { display: inline-flex; align-items: center; gap: 6px; }
+.fx-xi__done { display: flex; align-items: center; gap: 12px; padding: 24px; border: 1px solid var(--fx-line); color: var(--t-success); }
+.fx-xi__done p { margin: 0; color: var(--t-strong); }
+.fx-xi__scroll { overflow-x: auto; }
+.fx-xi-list .fx-xi__mark { height: 18px; }
+.fx-xi-list__mid { width: 56px; text-align: center; color: var(--t-dim); white-space: nowrap; }
+.fx-xi-list__mid .fx-dim { margin-left: 4px; font-size: 12px; }
+.fx-xi-list tr[data-state="linked"] .fx-xi-list__mid { color: var(--t-success); }
+.fx-xi-list tr[data-state="invoice_fits"] .fx-xi-list__mid a, .fx-xi-list tr[data-state="job_fits"] .fx-xi-list__mid a { color: var(--t-warn); }
+@media (max-width: 820px) {
+  .fx-xi-cmp th, .fx-xi-cmp td { padding: 10px 8px; font-size: 13px; }
+  .fx-xi-cmp tbody th { width: 28px; }
+  .fx-xi-cmp__mid { width: 28px; }
+  .fx-xi__acts .fx-btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
+}
+.fx-xi-count { font-size: 18px; }
+.fx-xi-list td.fx-num:not(.fx-strong) { text-align: left; }