feat(costs): show what the trip finally costs each participant

The settle-up view says who owes whom, but nothing on the Costs screen
answers "what did the trip cost me": the balances move every time a
payment is recorded, and the tiles only describe the signed-in user.

The settlement response now carries finalBudgets, one row per participant
in the ledger: expenses (what they fronted on split expenses), reimbursed
(recorded transfers, received minus sent), pending (their current
balance) and final = expenses - reimbursed - pending.

- Computed in calculateSettlement from the same integer trip cents as the
  balances, filled by the same loops, so the breakdown can never
  contradict the balance printed next to it. Each component is converted
  to the display currency as its own set and the final is subtracted in
  display cents, so the three lines add up to the total in any currency.
- A "Final budget" card on desktop, the narrow desktop layout and the
  mobile Costs tab: one amount per traveler, and a tap opens the three
  lines plus the expenses, transfers and open flows behind them. The
  filtering lives in CostsPanel.helpers so both shells share it.
- Contract in shared (budgetParticipantFinalSchema); the MCP
  get_settlement_summary description mentions the new field it returns.
- Four new costs.* keys, translated in every locale.

client/tests/unit/mobile/trip/MCostsTab.test.tsx

@@ -580,6 +580,43 @@ describe('MCostsTab', () => {
     expect(within(row).getByText('$15.00')).toBeInTheDocument()
   })
 
+  it('FE-MOB-COSTT-041: shows what the trip costs each traveler and opens the arithmetic on tap', async () => {
+    serveSettlement({
+      ...SETTLEMENT,
+      settlements: [{ id: 5, from_user_id: 3, to_user_id: 1, amount: 15, currency: 'USD', created_at: '2026-05-02 10:00:00' }],
+      finalBudgets: [
+        { user_id: 1, username: 'Me', avatar_url: null, expenses: 100, reimbursed: 15, pending: 12.5, final: 72.5 },
+      ],
+    })
+    await renderTab()
+    const card = up(screen.getByText('costs.finalBudget'), 1)
+
+    // One amount per traveler; the two the ledger left out cost nothing.
+    expect(within(card).getByText('$72.50')).toBeInTheDocument()
+    expect(within(card).getAllByText('$0.00')).toHaveLength(2)
+    expect(within(card).queryByText('costs.finalPending')).not.toBeInTheDocument()
+
+    const mine = within(card).getByRole('button', { name: /\$72\.50/ })
+    fireEvent.click(mine)
+    expect(mine).toHaveAttribute('aria-expanded', 'true')
+    // Each line signed by what it does to the final.
+    expect(within(card).getByText('+$100.00')).toBeInTheDocument()
+    expect(within(card).getByText('−$15.00')).toBeInTheDocument()
+    expect(within(card).getByText('−$12.50')).toBeInTheDocument()
+    // The rows behind it: only the expenses I fronted, the transfer I received,
+    // and the flows still open on my side.
+    expect(within(card).getByText('Ramen')).toBeInTheDocument()
+    expect(within(card).getByText('Taxi')).toBeInTheDocument()
+    expect(within(card).queryByText('Museum')).not.toBeInTheDocument()
+    expect(within(card).getAllByText('Bob → costs.you')).toHaveLength(2)
+    expect(within(card).getByText('costs.you → Ada')).toBeInTheDocument()
+    expect(within(card).queryByText('? → Bob')).not.toBeInTheDocument()
+
+    fireEvent.click(mine)
+    expect(mine).toHaveAttribute('aria-expanded', 'false')
+    expect(within(card).queryByText('+$100.00')).not.toBeInTheDocument()
+  })
+
   it('FE-MOB-COSTT-040: the expense filters apply to payments the same way they do on desktop', async () => {
     const mine = { id: 503, from_user_id: 1, to_user_id: 2, amount: 8, currency: 'USD', created_at: '2026-05-02T09:00:00Z' }
     const others = { id: 504, from_user_id: 2, to_user_id: 3, amount: 9, currency: 'USD', created_at: '2026-05-02T09:00:00Z' }