/* Invoices: review rows, the composer, matching and allocation.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

.invoice-summary-values { display: flex; gap: var(--space-32); flex-wrap: wrap; }
.invoice-review-row { align-items: flex-start; cursor: pointer; gap: var(--space-16); flex-wrap: wrap; }
.invoice-review-details { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.invoice-review-details .opt-detail,
.invoice-review-details .hint { display: block; }
.invoice-review-actions { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.invoice-review-row:hover { background: var(--bg-hover); }
.invoice-review-row:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: -2px; }
.mp-choose { margin-top: var(--space-20); --stack-gap: var(--space-12); --rhythm-heading-body: var(--space-8); }
.mp-choose > h3 { font-size: var(--text-13); font-weight: var(--w-medium); margin: 0; }
.mp-choose .tx-search { width: 100%; max-width: none; }
#mp-list .option-row svg:last-child { margin-inline-start: auto; flex-shrink: 0; }
.skeleton-stack { display: grid; gap: var(--space-8); }
.skeleton-tiles { display: flex; gap: var(--space-40); padding: var(--space-2) var(--space-12) var(--space-20); }
.skeleton-tiles > .skeleton-stack { flex: 1; }
.due-day.is-overdue { color: var(--negative-text); }
.seg-count { color: var(--text-faint); font-variant-numeric: tabular-nums; margin-inline-start: var(--space-4); }
.due-note { display: block; font-size: var(--text-12); color: var(--text-faint); }
/* Needs review rows on the demo's grammar (ds .rv-line): monogram, payer
   with what arrived under it, the invoice it points at, a mono 4px tag. */
#inv-review-table .row { cursor: pointer; }
#inv-review-table .rv-id { display: grid; min-width: 0; }
#inv-review-table .rv-id .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#inv-review-table .rv-sub { display: block; font-size: var(--text-12); color: var(--text-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#inv-review-table .rv-sugg { display: grid; min-width: 0; }
#inv-review-table .rv-why { display: block; font-size: var(--text-12); color: var(--text-subtle); text-wrap: pretty; }
#inv-review-table .cell-act { justify-content: flex-end; }
/* ds .tag is 6px; tags are 4px by DESIGN.md (ds change requested). */
.rv-tag { border-radius: var(--r-tag); }
.alloc-remove { margin-inline-start: var(--space-12); font-size: var(--text-12); }
.inv-item-row { display: grid; grid-template-columns: 1fr 56px 124px 22px; gap: var(--space-8); align-items: center; }
.inv-items-head { padding-bottom: var(--space-6); }
.inv-item { margin-bottom: var(--space-8); }
.inv-item-errors > .form-error { margin-top: var(--rhythm-hint); }
.inv-num { text-align: right; }
/* Invoice detail: the two link actions share a row, the primary takes the
   next one on its own. */
.inv-foot .inv-foot-primary { flex-basis: 100%; }
/* One line of an invoice (js/screens/invoices.js lineItemRow, react/screens/invoices/LineItem.jsx): the description in
   body ink, free to shrink beside its amount. */
.invoice-line-label { color: var(--text-default); min-width: 0; }