diff --git a/client/e2e/help/trip-bookings.guide.ts b/client/e2e/help/trip-bookings.guide.ts
index f82053b4b..cd857928b 100644
--- a/client/e2e/help/trip-bookings.guide.ts
+++ b/client/e2e/help/trip-bookings.guide.ts
@@ -58,13 +58,24 @@ const travellers = (page: Page) => page.locator('[aria-label="Travelers"]')
 /** The card's delete question is its own portal, with no backdrop class to find it by. */
 const deleteAsk = (page: Page) => portalDialog(page, page.getByText('Delete booking?', { exact: true }))
 
-/** The Booking Type field at the head of the form is a CustomSelect; this opens it. */
+/** The Booking Type is a pill in the head of the form; its name reads the type after the label. */
+const typePill = (page: Page) => modal(page).getByRole('button', { name: /^Booking Type:/ })
+/** The pill's list is its own portal, named after the pill's label. */
+const typeMenu = (page: Page) => page.getByRole('group', { name: 'Booking Type' })
+/** The status pill beside it says what a click turns it into. */
+const statusPill = (page: Page) => modal(page).getByRole('button', { name: /^Set to / })
+
 async function openTypeMenu(page: Page): Promise<void> {
-  await block(page, /^Booking Type$/).getByRole('button').first().click()
-  await expect(selectMenu(page)).toBeVisible()
+  await typePill(page).click()
+  await expect(typeMenu(page)).toBeVisible()
   await beat(page, 300)
 }
 
+async function pickType(page: Page, type: RegExp): Promise<void> {
+  await typeMenu(page).getByRole('button', { name: type }).first().click()
+  await expect(typeMenu(page)).toHaveCount(0)
+}
+
 /** The Travelers field opens its members as a list under it, inside the form. */
 const travelerList = (page: Page) => block(page, /^Travelers$/).getByRole('listbox')
 
@@ -162,17 +173,16 @@ const SCRIPTS: Record<string, GuideScript> = {
         prepare: async p => {
           await openTypeMenu(p)
         },
-        target: selectMenu,
+        target: typeMenu,
         act: async p => {
-          await selectMenu(p).getByRole('button', { name: /^Event$/ }).first().click()
-          await expect(selectMenu(p)).toHaveCount(0)
-          await expect(block(p, /^Booking Type$/).getByRole('button', { name: /Event/ })).toBeVisible()
+          await pickType(p, /^Event$/)
+          await expect(typePill(p)).toHaveAccessibleName(/^Booking Type:\s*Event$/)
           await settle(p)
         },
       },
       {
         prepare: async p => { await typeInto(p, titleBox(p), 'Kabuki at the Minamiza') },
-        target: p => block(p, /^Title \*$/),
+        target: titleBox,
         act: async p => {
           await expect(saveButton(p, 'Add')).toBeEnabled()
           await settle(p)
@@ -195,7 +205,8 @@ const SCRIPTS: Record<string, GuideScript> = {
       {
         prepare: async p => {
           await typeInto(p, codeBox(p), 'MZ-5521')
-          await chooseIn(p, /^Status$/, /^Confirmed$/)
+          await statusPill(p).click()
+          await expect(statusPill(p)).toHaveAccessibleName('Set to Pending')
         },
         target: p => row(p, /^Booking Code$/),
         act: settle,
@@ -222,10 +233,9 @@ const SCRIPTS: Record<string, GuideScript> = {
           await expect(modal(p).getByRole('heading', { name: 'New Reservation' })).toBeVisible()
           await openTypeMenu(p)
         },
-        target: selectMenu,
+        target: typeMenu,
         act: async p => {
-          await selectMenu(p).getByRole('button', { name: /^Accommodation$/ }).first().click()
-          await expect(selectMenu(p)).toHaveCount(0)
+          await pickType(p, /^Accommodation$/)
           await expect(label(p, /^Check-in until$/)).toBeVisible()
           await settle(p)
         },
@@ -583,16 +593,12 @@ const SCRIPTS: Record<string, GuideScript> = {
         act: settle,
       },
       {
-        prepare: async p => {
-          await block(p, /^Status$/).getByRole('button').first().click()
-          await expect(selectMenu(p)).toBeVisible()
-          await beat(p, 300)
-        },
-        target: p => block(p, /^Status$/),
+        target: statusPill,
         act: async p => {
-          await selectMenu(p).getByRole('button', { name: /^Confirmed$/ }).click()
-          await expect(selectMenu(p)).toHaveCount(0)
-          await expect(block(p, /^Status$/).getByRole('button', { name: 'Confirmed' })).toBeVisible()
+          await expect(statusPill(p)).toHaveAccessibleName('Set to Confirmed')
+          await statusPill(p).click()
+          await expect(statusPill(p)).toHaveAccessibleName('Set to Pending')
+          await expect(statusPill(p)).toHaveText('Confirmed')
           await settle(p)
         },
       },
diff --git a/client/e2e/help/trip-day-detail.guide.ts b/client/e2e/help/trip-day-detail.guide.ts
index d2ca63b17..a918ad56c 100644
--- a/client/e2e/help/trip-day-detail.guide.ts
+++ b/client/e2e/help/trip-day-detail.guide.ts
@@ -42,8 +42,10 @@ const forecast = (page: Page) => panel(page).getByText(/^Forecast for /)
 const chips = (page: Page) => panel(page).locator('svg.lucide-sunrise').locator('xpath=ancestor::div[2]')
 /** The day's reservations block. */
 const bookings = (page: Page) => panel(page).getByText('Reservations', { exact: true }).locator('xpath=..')
-/** One booking row: the title sits in a wrapper, the row is its grandparent. */
-const bookingRow = (page: Page, title: string) => panel(page).getByText(title).locator('xpath=ancestor::div[2]')
+/** One booking row: on the desktop a button that opens the booking, named with its title. */
+const bookingRow = (page: Page, title: string) => panel(page).getByRole('button', { name: title })
+/** The booking a row opens, named by its title. */
+const bookingDetail = (page: Page, title: string) => page.getByRole('dialog', { name: title })
 
 /**
  * Select a day by its title rather than by the middle of its header: a day with
@@ -305,8 +307,15 @@ const SCRIPTS: Record<string, GuideScript> = {
       only(bookings),
       only(p => bookingRow(p, EVENING_WALK)),
       only(p => bookingRow(p, 'Nozomi 21')),
-      // Only pointed at: clicking it would leave the plan for the Bookings tab.
-      only(p => p.getByRole('button', { name: 'Bookings', exact: true })),
+      {
+        // A row opens its booking over the plan; Edit at its foot is where it changes.
+        prepare: async p => {
+          await bookingRow(p, 'Nozomi 21').click()
+          await expect(bookingDetail(p, 'Nozomi 21')).toBeVisible()
+          await settle(p)
+        },
+        target: p => bookingDetail(p, 'Nozomi 21').getByRole('button', { name: 'Edit', exact: true }),
+      },
     ],
   },
 }
diff --git a/client/e2e/help/trip-map.guide.ts b/client/e2e/help/trip-map.guide.ts
index 354ed0a3e..80f0bb326 100644
--- a/client/e2e/help/trip-map.guide.ts
+++ b/client/e2e/help/trip-map.guide.ts
@@ -1,7 +1,7 @@
 import { test, expect, type Locator, type Page } from '@playwright/test'
 import { captureGuide, captureHero, settle, typeInto, VIEWPORT, type GuideScript } from './guide'
 import { seededTrip, ensureMapFixtures } from './fixtures'
-import { openTrip, openTripOnDay, selectDay, modal } from './trip-shared'
+import { openTrip, openTripOnDay, selectDay, modal, dialog } from './trip-shared'
 import { ensureDawarichConnection, disconnectDawarich } from './external'
 import { tripMapContext, tripMapGuides } from '../../src/help/contexts/tripMap'
 import type { HelpGuide } from '../../src/help/types'
@@ -367,7 +367,8 @@ const SCRIPTS: Record<string, GuideScript> = {
           await settle(p)
         },
       },
-      { target: p => modal(p).getByPlaceholder('e.g. Eiffel Tower').locator('xpath=ancestor::form[1]') },
+      // The whole dialog: the name is typed in its head band, outside the form.
+      { target: p => dialog(p) },
       {
         target: p => modal(p).getByRole('button', { name: 'Add', exact: true }),
         act: async p => {
@@ -413,7 +414,7 @@ const SCRIPTS: Record<string, GuideScript> = {
           await typeInto(p, modal(p).getByPlaceholder('e.g. Eiffel Tower'), NEW_PLACE)
           await settle(p)
         },
-        target: p => modal(p).getByPlaceholder('e.g. Eiffel Tower').locator('xpath=ancestor::form[1]'),
+        target: p => dialog(p),
       },
       {
         target: p => modal(p).getByRole('button', { name: 'Add', exact: true }),
diff --git a/client/e2e/help/trip-place.guide.ts b/client/e2e/help/trip-place.guide.ts
index 8964150e0..781ae32bb 100644
--- a/client/e2e/help/trip-place.guide.ts
+++ b/client/e2e/help/trip-place.guide.ts
@@ -53,8 +53,10 @@ const member = (page: Page, name: string) => participants(page).getByRole('butto
 const addMember = (page: Page) => participants(page).getByRole('button', { name: '+', exact: true })
 /** "Files" while the place has none, "<n> files" once it has. */
 const filesToggle = (page: Page) => card(page).getByRole('button', { name: /^(Files|\d+ files)$/ })
-/** The booking strip is a button only for a viewer who may open the booking. */
-const bookingStrip = (page: Page) => card(page).getByRole('button', { name: 'Edit Reservation' })
+/** The booking strip opens the booking; it is a button named after it. */
+const bookingStrip = (page: Page) => card(page).getByRole('button', { name: `Open booking: ${BOOKING}` })
+/** The booking the strip opens, named by its title. Its form is one Edit further. */
+const bookingDetail = (page: Page) => page.getByRole('dialog', { name: BOOKING })
 /** The strip's lower row: Date, Time and Booking Code beside each other. */
 const bookingFields = (page: Page) => bookingStrip(page).locator('> div').nth(1)
 const dayHeader = (page: Page, n: number) => page.getByRole('button', { name: new RegExp(`^${n} .*Day ${n} `) })
@@ -407,11 +409,16 @@ const SCRIPTS: Record<string, GuideScript> = {
         target: bookingStrip,
         act: async p => {
           await bookingStrip(p).click()
-          await expect(modal(p).getByRole('heading', { name: 'Edit Reservation' })).toBeVisible()
+          await expect(bookingDetail(p)).toBeVisible()
           await settle(p)
         },
       },
       {
+        prepare: async p => {
+          await bookingDetail(p).getByRole('button', { name: 'Edit', exact: true }).click()
+          await expect(modal(p).getByRole('heading', { name: 'Edit Reservation' })).toBeVisible()
+          await settle(p)
+        },
         target: p => modal(p).getByText('Link to day assignment', { exact: true }).locator('xpath=..'),
         act: closeModal,
       },
diff --git a/client/e2e/help/trip-places.guide.ts b/client/e2e/help/trip-places.guide.ts
index 0ffad6e3f..561653ede 100644
--- a/client/e2e/help/trip-places.guide.ts
+++ b/client/e2e/help/trip-places.guide.ts
@@ -102,7 +102,9 @@ const SCRIPTS: Record<string, GuideScript> = {
       // The details column is an <aside> beside the form; both used to resolve to
       // the whole dialog, which gave two steps the same picture.
       only(p => modal(p).getByText('Place details', { exact: true }).locator('xpath=ancestor::aside[1]')),
-      only(p => modal(p).getByPlaceholder('e.g. Eiffel Tower').locator('xpath=ancestor::form[1]')),
+      // The name and the category sit in the head band, above the form, so the
+      // step about the fields shows the dialog rather than the form alone.
+      only(p => dialog(p)),
       {
         target: p => modal(p).getByRole('button', { name: 'Add', exact: true }),
         act: async p => {
diff --git a/client/e2e/help/trip-transports.guide.ts b/client/e2e/help/trip-transports.guide.ts
index 7bb13275c..c2d7208db 100644
--- a/client/e2e/help/trip-transports.guide.ts
+++ b/client/e2e/help/trip-transports.guide.ts
@@ -43,6 +43,10 @@ const dayHeader = (page: Page, n: number) => page.getByRole('button', { name: ne
 const card = (page: Page, text: string) => page.locator('.bg-surface-card').filter({ hasText: text }).first()
 /** A transport's row in the day plan; the whole row is the button that opens it. */
 const transportRow = (page: Page, name: RegExp) => page.getByRole('button', { name }).first()
+/** The booking a click on a row or a card opens, named by the booking's title. */
+const bookingDetail = (page: Page, title: string) => page.getByRole('dialog', { name: title })
+/** The Edit at the foot of that booking, which leads on to its form. */
+const detailEdit = (page: Page, title: string) => bookingDetail(page, title).getByRole('button', { name: 'Edit', exact: true })
 /** A toolbar type chip or a section heading — both are a label followed by their count. */
 const counted = (page: Page, label: string) => page.getByRole('button', { name: new RegExp(`^${label} \\d+$`) })
 /** A labelled field block inside the open dialog. */
@@ -393,15 +397,15 @@ const SCRIPTS: Record<string, GuideScript> = {
         target: p => card(p, JOURNEY.onCard),
         act: async p => {
           await card(p, JOURNEY.onCard).click()
-          await expect(modal(p).getByRole('heading', { name: 'Public transit journey' })).toBeVisible()
+          await expect(bookingDetail(p, JOURNEY.title)).toBeVisible()
           await settle(p)
         },
       },
-      only(p => modal(p).getByText('Itinerary', { exact: true }).locator('xpath=..')),
+      only(p => bookingDetail(p, JOURNEY.title).getByText('Itinerary', { exact: true }).locator('xpath=..')),
       {
-        target: p => modal(p).getByRole('button', { name: 'Change route' }),
+        target: p => bookingDetail(p, JOURNEY.title).getByRole('button', { name: 'Change route' }),
         act: async p => {
-          await modal(p).getByRole('button', { name: 'Change route' }).click()
+          await bookingDetail(p, JOURNEY.title).getByRole('button', { name: 'Change route' }).click()
           await expect(modal(p).getByRole('button', { name: 'Search' })).toBeVisible()
           await settle(p)
         },
@@ -476,11 +480,18 @@ const SCRIPTS: Record<string, GuideScript> = {
         target: p => transportRow(p, FLIGHT.row),
         act: async p => {
           await transportRow(p, FLIGHT.row).click()
+          await expect(bookingDetail(p, FLIGHT.title)).toBeVisible()
+          await settle(p)
+        },
+      },
+      {
+        target: p => detailEdit(p, FLIGHT.title),
+        act: async p => {
+          await detailEdit(p, FLIGHT.title).click()
           await expect(modal(p).getByRole('heading', { name: 'Edit transport' })).toBeVisible()
           await settle(p)
         },
       },
-      only(dialog),
       only(p => block(p, 'Route')),
       {
         // Escape rather than Update: nothing about the seeded flight may change.
diff --git a/client/src/components/Budget/CostsPanel.test.tsx b/client/src/components/Budget/CostsPanel.test.tsx
index 3f7ac195a..24fc795b1 100644
--- a/client/src/components/Budget/CostsPanel.test.tsx
+++ b/client/src/components/Budget/CostsPanel.test.tsx
@@ -23,7 +23,7 @@ const tripMembers = [
 ]
 
 /** Bob's buttons in the expense form — his final-budget row in the sidebar answers to his name too. */
-const bobInForm = () => screen.getAllByRole('button', { name: /bob/i }).filter(b => !b.hasAttribute('aria-expanded'))
+const bobInForm = () => screen.getAllByRole('checkbox', { name: /bob/i })
 
 beforeEach(() => {
   resetAllStores()
@@ -52,7 +52,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     await screen.findByText('Dinner')
     await screen.findByText('Payment')
     // The payment row exposes an inline undo (no need to open a separate History modal).
-    expect(screen.getByTitle('Undo')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Undo' })).toBeInTheDocument()
   })
 
   it('records a manual payment via the Add payment button', async () => {
@@ -70,7 +70,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    await user.type(await screen.findByPlaceholderText('0,00'), '25')
     // The footer submit is the second "Add payment" control once the modal is open.
     const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
     const submit = addButtons[addButtons.length - 1]
@@ -242,7 +242,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Lunch')
-    await user.click(screen.getAllByTitle('Edit')[0])
+    await user.click(screen.getAllByRole('button', { name: 'Edit' })[0])
     await user.click(await screen.findByRole('button', { name: 'Save' }))
 
     await waitFor(() => expect(patched).toBeTruthy())
@@ -296,7 +296,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(foot).toHaveTextContent('2 expenses need a payer') // the two payer-less, non-zero expenses
     // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
     // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
-    const card = screen.getByText('Outstanding amount').closest('div[style*="border-radius: 22"]')
+    const card = screen.getByRole('region', { name: 'Outstanding amount' })
     expect(card).toHaveTextContent('120') // 120,00 € (locale separator), i.e. 90 + 30
   })
 
@@ -317,7 +317,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     // "Your share" is the first of the two bold figures in the Total spend card's
     // footer; the second is "You paid". 60 from the paid expense only — the 40
     // nobody has paid for is not a share, though it still counts as spend.
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')!
+    const card = screen.getByRole('region', { name: 'Total trip spend' })!
     const figures = [...card.querySelectorAll('b')].map(b => b.textContent ?? '')
     expect(figures[0]).toContain('60')
     expect(figures[0]).not.toContain('100')
@@ -344,10 +344,9 @@ describe('CostsPanel — settlements in the ledger', () => {
 
     // Deselect everyone so the cost carries no split, and mark it as unpaid: a picked
     // payer now always goes out (#1766), so "nobody paid" must be said explicitly.
-    await user.click(screen.getByRole('button', { name: 'Y You' }))
-    await user.click(screen.getByRole('button', { name: 'B bob' }))
-    await user.click(screen.getByRole('button', { name: 'You' })) // open the Who-paid select
-    pickOption('No one paid yet')
+    await user.click(screen.getByRole('checkbox', { name: 'You' }))
+    await user.click(screen.getByRole('checkbox', { name: 'bob' }))
+    await user.click(screen.getByRole('radio', { name: 'No one paid yet' }))
 
     const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
     const submit = addBtns[addBtns.length - 1] // footer submit
@@ -381,8 +380,8 @@ describe('CostsPanel — settlements in the ledger', () => {
 
     // A personal expense: alice (the default "You" payer) fronted it, but nobody shares
     // the split. The web used to drop the payer once no participants remained.
-    await user.click(screen.getByRole('button', { name: 'Y You' }))
-    await user.click(screen.getByRole('button', { name: 'B bob' }))
+    await user.click(screen.getByRole('checkbox', { name: 'You' }))
+    await user.click(screen.getByRole('checkbox', { name: 'bob' }))
 
     const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
     const submit = addBtns[addBtns.length - 1] // footer submit
@@ -417,10 +416,10 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Hotel')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // Nobody paid this expense — reopening it must not silently reselect "You".
-    expect(await screen.findByRole('button', { name: 'No one paid yet' })).toBeInTheDocument()
+    expect(await screen.findByRole('radio', { name: 'No one paid yet' })).toBeChecked()
 
     // …and saving an untouched edit must not assign the current user as payer.
     await user.click(screen.getByRole('button', { name: 'Save' }))
@@ -439,7 +438,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await user.click(await screen.findByRole('button', { name: 'Add expense' }))
-    expect(await screen.findByRole('button', { name: 'You' })).toBeInTheDocument()
+    expect(await screen.findByRole('radio', { name: 'You' })).toBeChecked()
   })
 
   // ── Multi-payer (#1426 regression) ─────────────────────────────────────────
@@ -543,7 +542,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Dinner')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // Loading used to be payers.find(...), which silently dropped the second payer.
     // Seeded with two decimals since #2175, localized for EUR.
@@ -572,7 +571,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Dinner; tapas')
-    await user.click(screen.getByTitle('Export CSV'))
+    await user.click(screen.getByRole('button', { name: 'Export CSV' }))
 
     expect(exported).toBeTruthy()
     const text = await exported!.text()
@@ -624,8 +623,8 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(screen.getByDisplayValue('100,00')).toBeDisabled()
 
     expect(screen.getByText('Individual shares')).toBeInTheDocument()
-    expect(screen.getByText(/75\.00/)).toBeInTheDocument()
-    expect(screen.getByText(/25\.00/)).toBeInTheDocument()
+    expect(screen.getByText(/75,00/)).toBeInTheDocument()
+    expect(screen.getByText(/25,00/)).toBeInTheDocument()
 
     const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
     await user.click(addBtns[addBtns.length - 1])
@@ -655,7 +654,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Sushi')
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')
+    const card = screen.getByRole('region', { name: 'Total trip spend' })
     // Yen, unconverted and with JPY's zero decimals — not a euro/dollar default.
     expect(card).toHaveTextContent('￥3,000')
   })
@@ -680,7 +679,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    await user.type(await screen.findByPlaceholderText('0,00'), '25')
     const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
     await user.click(addButtons[addButtons.length - 1])
 
@@ -703,7 +702,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    await user.type(await screen.findByPlaceholderText('0,00'), '25')
     // Bob paid me back in dollars — the server freezes the USD rate on write.
     await user.click(screen.getByText(/^EUR/))
     await user.click(await screen.findByText(/^USD/))
@@ -732,7 +731,7 @@ describe('CostsPanel — settlements in the ledger', () => {
     render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
 
     await screen.findByText('Payment')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // The stored USD amount comes back as-is (padded to two decimals, #2175),
     // not silently reread as euros.
@@ -831,7 +830,7 @@ describe('CostsPanel — overview', () => {
     mount([], { balances: [{ user_id: 1, username: 'alice', avatar_url: null, balance: 0 }] })
 
     // Both travellers appear; neither has a signed amount.
-    const balances = (await screen.findByText('Balances')).parentElement as HTMLElement
+    const balances = (await screen.findByRole('region', { name: 'Balances' })) as HTMLElement
     expect(within(balances).getAllByText('0,00 €')).toHaveLength(2)
   })
 
@@ -868,7 +867,7 @@ describe('CostsPanel — overview', () => {
       ],
     })
 
-    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    const card = (await screen.findByRole('region', { name: 'Final budget' })) as HTMLElement
     await waitFor(() => expect(within(card).getAllByText('61,00 €')).toHaveLength(2))
     // The main view stays one figure per person until someone asks for more.
     expect(within(card).queryByText('Expenses paid')).toBeNull()
@@ -880,7 +879,7 @@ describe('CostsPanel — overview', () => {
     // 100 USD is never converted again here. What was entered labels the row (#2525).
     expect(within(card).getAllByText('+92,00 €')).toHaveLength(2)
     expect(within(card).queryByText(/100,00/)).toBeNull()
-    expect(within(card).getByText('· $100.00')).toBeInTheDocument()
+    expect(within(card).getByText('$100.00')).toBeInTheDocument()
     // Received and still pending both lower her cost, each line with its one row.
     expect(within(card).getAllByText('−15,00 €')).toHaveLength(2)
     expect(within(card).getAllByText('−16,00 €')).toHaveLength(2)
@@ -902,7 +901,7 @@ describe('CostsPanel — overview', () => {
     mount([dinner(), taxi()])
 
     await screen.findByText('Dinner')
-    const breakdown = screen.getByText('By category').parentElement as HTMLElement
+    const breakdown = screen.getByRole('region', { name: 'By category' }) as HTMLElement
     const labels = within(breakdown).getAllByText(/Food & drink|Transport/).map(el => el.textContent)
     // Bars are ordered by spend, so the 90 € food row comes before the 30 € taxi.
     expect(labels).toEqual(['Food & drink', 'Transport'])
@@ -924,7 +923,7 @@ describe('CostsPanel — overview', () => {
     mount([expense({ id: 110, name: 'Mystery', category: 'other', total_price: 90 })])
 
     await screen.findByText('Mystery')
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')
+    const card = screen.getByRole('region', { name: 'Total trip spend' })
     expect(card).toHaveTextContent('90.00 XX')
   })
 })
@@ -1001,10 +1000,10 @@ describe('CostsPanel — settle up', () => {
     }))
     mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00' }] })
 
-    fireEvent.click(await screen.findByTitle('Undo'))
+    fireEvent.click(await screen.findByRole('button', { name: 'Undo' }))
     await waitFor(() => expect(deleted).toBe(1))
 
-    fireEvent.click(screen.getByTitle('Undo'))
+    fireEvent.click(screen.getByRole('button', { name: 'Undo' }))
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Unknown error', 'error', undefined))
     delete window.__addToast
   })
@@ -1057,7 +1056,7 @@ describe('CostsPanel — settle up', () => {
     mount([], { flows: [{ from: { user_id: 1, username: 'alice' }, to: { user_id: 2, username: 'bob' }, amount: 20 }] })
 
     await screen.findByText('You owe')
-    const card = screen.getByText('You owe').closest('div[style*="border-radius: 22"]') as HTMLElement
+    const card = screen.getByRole('region', { name: 'You owe' }) as HTMLElement
     expect(within(card).getByText('To')).toBeInTheDocument()
     expect(within(card).getByText('bob')).toBeInTheDocument()
     expect(screen.getByText('Nothing owed to you')).toBeInTheDocument()
@@ -1073,6 +1072,7 @@ describe('CostsPanel — filtering the ledger', () => {
     mount([dinner(), taxi()], { settlements: [payment] })
 
     await screen.findByText('Taxi')
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }))
     fireEvent.click(screen.getByRole('button', { name: 'Paid by me' }))
 
     expect(screen.getByText('Dinner')).toBeInTheDocument()
@@ -1085,6 +1085,7 @@ describe('CostsPanel — filtering the ledger', () => {
     mount([dinner(), taxi()], { settlements: [payment] })
 
     await screen.findByText('Taxi')
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }))
     fireEvent.click(screen.getByRole('button', { name: "I'm owed" }))
 
     expect(screen.getByText('Dinner')).toBeInTheDocument()
@@ -1096,8 +1097,8 @@ describe('CostsPanel — filtering the ledger', () => {
     mount([dinner(), taxi()], { settlements: [payment] })
 
     await screen.findByText('Taxi')
-    fireEvent.click(screen.getByRole('button', { name: /All categories/ }))
-    pickOption('Transport')
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }))
+    fireEvent.click(within(screen.getByRole('menu')).getByRole('button', { name: 'Transport' }))
 
     expect(screen.getByText('Taxi')).toBeInTheDocument()
     expect(screen.queryByText('Dinner')).not.toBeInTheDocument()
@@ -1108,8 +1109,8 @@ describe('CostsPanel — filtering the ledger', () => {
     mount([dinner(), taxi()], { settlements: [payment] })
 
     await screen.findByText('Taxi')
-    fireEvent.click(screen.getByRole('button', { name: /All days/ }))
-    pickOption('Sun, Jun 15')
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }))
+    fireEvent.click(within(screen.getByRole('menu')).getByRole('button', { name: 'Sun, Jun 15' }))
 
     expect(screen.getByText('Sunday, June 15')).toBeInTheDocument()
     expect(screen.getByText('1 expenses')).toBeInTheDocument()
@@ -1126,8 +1127,8 @@ describe('CostsPanel — filtering the ledger', () => {
     mount([dinner(), taxi()], { settlements: [{ ...payment, settled_at: '2025-06-15' }] })
 
     await screen.findByText('Taxi')
-    fireEvent.click(screen.getByRole('button', { name: /All days/ }))
-    pickOption('Sun, Jun 15')
+    fireEvent.click(screen.getByRole('button', { name: 'Filter' }))
+    fireEvent.click(within(screen.getByRole('menu')).getByRole('button', { name: 'Sun, Jun 15' }))
 
     expect(screen.getByText('Dinner')).toBeInTheDocument()
     expect(screen.queryByText('Taxi')).not.toBeInTheDocument()
@@ -1214,7 +1215,7 @@ describe('CostsPanel — expense rows', () => {
     mount([dinner()])
 
     await screen.findByText('Dinner')
-    fireEvent.click(screen.getByTitle('Delete'))
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
 
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Unknown error', 'error', undefined))
     // The optimistic removal is rolled back by the store.
@@ -1237,8 +1238,8 @@ describe('CostsPanel — expense rows', () => {
     expect(screen.queryByRole('button', { name: 'Settle up' })).not.toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Add payment' })).not.toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Settle' })).not.toBeInTheDocument()
-    expect(screen.queryByTitle('Delete')).not.toBeInTheDocument()
-    expect(screen.queryByTitle('Undo')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Undo' })).not.toBeInTheDocument()
   })
 })
 
@@ -1274,7 +1275,7 @@ describe('CostsPanel — mobile layout', () => {
     expect(screen.getByText("You're owed")).toBeInTheDocument()
     expect(screen.getByText('Outstanding amount')).toBeInTheDocument()
     // The unfinished expense is flagged with a badge on its icon instead of a pill.
-    expect(screen.getByTitle('Total only — not settled yet')).toHaveTextContent('!')
+    expect(screen.getByRole('img', { name: 'Total only — not settled yet' })).toHaveTextContent('!')
     expect(screen.queryByText('Unfinished')).not.toBeInTheDocument()
   })
 
@@ -1315,8 +1316,8 @@ describe('CostsPanel — payment modal', () => {
     }))
     mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00' }] })
 
-    await user.click(await screen.findByTitle('Edit'))
-    const amount = await screen.findByPlaceholderText('0.00')
+    await user.click(await screen.findByRole('button', { name: 'Edit' }))
+    const amount = await screen.findByPlaceholderText('0,00')
     await user.clear(amount)
     await user.type(amount, '12,50')
     await user.click(screen.getByRole('button', { name: 'Save' }))
@@ -1330,7 +1331,7 @@ describe('CostsPanel — payment modal', () => {
     mount([])
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '10')
+    await user.type(await screen.findByPlaceholderText('0,00'), '10')
 
     // Default is You → bob; pointing "to" back at me makes it a no-op transfer.
     await user.click(screen.getByRole('button', { name: 'bob' }))
@@ -1348,7 +1349,7 @@ describe('CostsPanel — payment modal', () => {
     mount([])
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '10')
+    await user.type(await screen.findByPlaceholderText('0,00'), '10')
     const submits = screen.getAllByRole('button', { name: 'Add payment' })
     await user.click(submits[submits.length - 1])
 
@@ -1370,7 +1371,7 @@ describe('CostsPanel — payment modal', () => {
 
     try {
       await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-      await user.type(await screen.findByPlaceholderText('0.00'), '10')
+      await user.type(await screen.findByPlaceholderText('0,00'), '10')
       const submits = screen.getAllByRole('button', { name: 'Add payment' })
       await user.click(submits[submits.length - 1])
 
@@ -1390,7 +1391,7 @@ describe('CostsPanel — payment modal', () => {
     }))
     mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
 
-    await user.click(await screen.findByTitle('Edit'))
+    await user.click(await screen.findByRole('button', { name: 'Edit' }))
     await user.click(screen.getByRole('button', { name: 'Save' }))
 
     await waitFor(() => expect(put).toBeTruthy())
@@ -1403,7 +1404,7 @@ describe('CostsPanel — payment modal', () => {
     const user = userEvent.setup()
     mount([], { settlements: [{ id: 7, from_user_id: 2, to_user_id: 1, amount: 30, settled_at: '2025-06-10', created_at: '2025-06-16 10:00:00' }] })
 
-    await user.click(await screen.findByTitle('Edit'))
+    await user.click(await screen.findByRole('button', { name: 'Edit' }))
     const save = screen.getByRole('button', { name: 'Save' })
     expect(save).toBeEnabled()
 
@@ -1439,7 +1440,7 @@ describe('CostsPanel — expense modal', () => {
     mount([expense({ id: 150, name: 'Market run', category: 'groceries', total_price: 30, note, payers: [{ user_id: 1, amount: 30 }], members: [{ user_id: 1, username: 'alice', amount: 15 }, { user_id: 2, username: 'bob', amount: 15 }] })])
 
     await screen.findByText('Market run')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     expect(await screen.findByDisplayValue('Apples')).toBeInTheDocument()
     expect(screen.getByDisplayValue('Cake')).toBeInTheDocument()
@@ -1461,7 +1462,7 @@ describe('CostsPanel — expense modal', () => {
     mount([expense({ id: 151, name: 'Market run', category: 'groceries', total_price: 30, note: 'TICKETJSON:{oops', payers: [{ user_id: 1, amount: 30 }], members: [{ user_id: 1, username: 'alice' }] })])
 
     await screen.findByText('Market run')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     expect(await screen.findByRole('button', { name: /Add item/i })).toBeInTheDocument()
     expect(screen.queryByPlaceholderText('Item name')).not.toBeInTheDocument()
@@ -1482,7 +1483,7 @@ describe('CostsPanel — expense modal', () => {
     })])
 
     await screen.findByText('Dinner')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // Custom shares reopen padded to two decimals (#2175), localized for EUR.
     expect((await screen.findByDisplayValue('70,00')).tagName).toBe('INPUT')
@@ -1496,7 +1497,7 @@ describe('CostsPanel — expense modal', () => {
 
     // Bringing him back in via the excluded-state hint restores an empty field,
     // pre-filled as a placeholder with what is still missing from the total.
-    await user.click(screen.getByRole('button', { name: 'Tap to include' }))
+    await user.click(bobInForm()[0])
     await user.type(screen.getByPlaceholderText('30,00'), '30')
 
     expect(screen.getByText('Split matches total')).toBeInTheDocument()
@@ -1526,6 +1527,7 @@ describe('CostsPanel — expense modal', () => {
     expect(screen.getByText('50,00 €')).toBeInTheDocument()
 
     // A different category than the default is carried into the payload.
+    await user.click(screen.getByRole('button', { name: /^Category:/ }))
     await user.click(screen.getByRole('button', { name: 'Sightseeing' }))
     const submits = screen.getAllByRole('button', { name: 'Add expense' })
     await user.click(submits[submits.length - 1])
@@ -1550,7 +1552,7 @@ describe('CostsPanel — expense modal', () => {
     await user.click(screen.getAllByTestId('payer-toggle')[1])
     // Dropping Bob again leaves Alice absorbing the whole amount.
     await user.click(screen.getAllByTestId('payer-toggle')[1])
-    expect(screen.getByRole('button', { name: 'Tap to include' })).toBeInTheDocument()
+    expect(screen.getAllByTestId('payer-toggle')[1]).toHaveAttribute('aria-checked', 'false')
     await user.click(screen.getByRole('button', { name: 'One person paid' }))
 
     const submits = screen.getAllByRole('button', { name: 'Add expense' })
@@ -1572,8 +1574,7 @@ describe('CostsPanel — expense modal', () => {
 
     await user.type(screen.getByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Hotel')
     await user.type(screen.getAllByPlaceholderText('0,00')[0], '120')
-    await user.click(screen.getByRole('button', { name: 'You' }))
-    pickOption('No one paid yet')
+    await user.click(screen.getByRole('radio', { name: 'No one paid yet' }))
 
     const submits = screen.getAllByRole('button', { name: 'Add expense' })
     await user.click(submits[submits.length - 1])
@@ -1723,7 +1724,7 @@ describe('CostsPanel — remaining paths', () => {
     ])
 
     await screen.findByText('Tip')
-    fireEvent.click(screen.getByTitle('Export CSV'))
+    fireEvent.click(screen.getByRole('button', { name: 'Export CSV' }))
 
     const lines = (await exported!.text()).replace(/^\uFEFF/, '').split('\r\n')
     expect(lines[0]).toBe('Date;Name;Category;Amount;Currency;Amount (EUR);Note')
@@ -1749,7 +1750,7 @@ describe('CostsPanel — remaining paths', () => {
     ])
 
     await screen.findByText('-5 refund')
-    fireEvent.click(screen.getByTitle('Export CSV'))
+    fireEvent.click(screen.getByRole('button', { name: 'Export CSV' }))
 
     const lines = (await exported!.text()).replace(/^\uFEFF/, '').split('\r\n')
     expect(lines[1]).toBe('06/15/2025;"\'=HYPERLINK(""http://evil"",""click"")";Food & drink;12.00;EUR;12.00;\'@SUM(A1:A9)')
@@ -1763,7 +1764,7 @@ describe('CostsPanel — remaining paths', () => {
     mount([dinner()])
 
     await screen.findByText('Dinner')
-    fireEvent.click(screen.getByTitle('Delete'))
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
 
     await waitFor(() => expect(deleted).toBe(true))
     expect(screen.queryByText('Dinner')).not.toBeInTheDocument()
@@ -1790,7 +1791,7 @@ describe('CostsPanel — remaining paths', () => {
     })])
 
     await screen.findByText('Dinner')
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]') as HTMLElement
+    const card = screen.getByRole('region', { name: 'Total trip spend' }) as HTMLElement
     // Not the 50/50 an equal split would have produced.
     expect(within(card).getByText('80 €')).toBeInTheDocument()
     expect(within(card).getByText('0 €')).toBeInTheDocument()
@@ -1804,7 +1805,7 @@ describe('CostsPanel — remaining paths', () => {
     })])
 
     await screen.findByText('Bob solo')
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]') as HTMLElement
+    const card = screen.getByRole('region', { name: 'Total trip spend' }) as HTMLElement
     expect(within(card).getAllByText('0 €')).toHaveLength(2)
   })
 
@@ -1814,7 +1815,7 @@ describe('CostsPanel — remaining paths', () => {
     mount([expense({ id: 220, name: 'Dinner', category: 'food', total_price: 90, currency: null })])
 
     await screen.findByText('Dinner')
-    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')
+    const card = screen.getByRole('region', { name: 'Total trip spend' })
     expect(card).toHaveTextContent('90,00 €')
   })
 
@@ -1834,7 +1835,7 @@ describe('CostsPanel — remaining paths', () => {
     )
     render(<CostsPanel tripId={1} tripMembers={[...tripMembers, { id: 3, username: 'cara', avatar_url: null }]} />)
 
-    await user.click(await screen.findByTitle('Edit'))
+    await user.click(await screen.findByRole('button', { name: 'Edit' }))
     // No symbol is known, so the code itself prefixes the amount and labels the option.
     await screen.findByPlaceholderText('0.00')
     expect(screen.getAllByText('XBT').length).toBeGreaterThanOrEqual(2)
@@ -1852,7 +1853,7 @@ describe('CostsPanel — remaining paths', () => {
     mount([expense({ id: 240, name: 'Mining rig', category: 'other', total_price: 2, currency: 'XBT', payers: [{ user_id: 1, amount: 2 }], members: [{ user_id: 1, username: 'alice' }] })])
 
     await screen.findByText('Mining rig')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // XBT is unknown to the locale map → dot separator, two decimals (#2175).
     expect(await screen.findByDisplayValue('2.00')).toBeInTheDocument()
@@ -1868,7 +1869,7 @@ describe('CostsPanel — remaining paths', () => {
     render(<CostsPanel tripId={1} tripMembers={[{ id: 1, username: 'alice', avatar_url: null }]} />)
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '10')
+    await user.type(await screen.findByPlaceholderText('0,00'), '10')
 
     // From and To both resolve to me, so the transfer stays unsavable.
     const submits = screen.getAllByRole('button', { name: 'Add payment' })
@@ -1897,7 +1898,7 @@ describe('CostsPanel — remaining paths', () => {
     // Excluding Bob leaves the include hint; tapping it puts him back on the bill.
     await user.click(screen.getAllByTestId('payer-toggle')[1])
     await user.click(screen.getAllByTestId('payer-toggle')[1])
-    await user.click(screen.getByRole('button', { name: 'Tap to include' }))
+    await user.click(screen.getAllByTestId('payer-toggle')[1])
     expect(screen.getAllByTestId('payer-amount')).toHaveLength(2)
 
     // Three decimals are not a valid money amount, so the field ignores them.
@@ -1922,13 +1923,13 @@ describe('CostsPanel — remaining paths', () => {
     expect(price.value).toBe('10,99')
 
     // Toggling a participant off and on again leaves the shares unchanged.
-    const bob = screen.getAllByRole('button', { name: /bob/i })[0]
+    const bob = screen.getAllByRole('checkbox', { name: /bob/i })[0]
     await user.click(bob)
     await user.click(bob)
     // 10.99 across two people leaves the odd cent with the lower user id.
     expect(screen.getByText('Individual shares')).toBeInTheDocument()
-    expect(screen.getByText('€5.50')).toBeInTheDocument()
-    expect(screen.getByText('€5.49')).toBeInTheDocument()
+    expect(screen.getByText('5,50 €')).toBeInTheDocument()
+    expect(screen.getByText('5,49 €')).toBeInTheDocument()
   })
 })
 
@@ -1951,7 +1952,7 @@ describe('CostsPanel — split modes and guests', () => {
     await user.click(screen.getByRole('button', { name: 'Custom' }))
     expect(screen.getByText(/Sum of splits/)).toBeInTheDocument()
     await user.click(screen.getByRole('button', { name: 'Equally' }))
-    expect(screen.getByText('Split 2 ways · €45.00 each')).toBeInTheDocument()
+    expect(screen.getByText('45,00 € per person')).toBeInTheDocument()
 
     const submits = screen.getAllByRole('button', { name: 'Add expense' })
     await user.click(submits[submits.length - 1])
@@ -1972,7 +1973,7 @@ describe('CostsPanel — split modes and guests', () => {
     })])
 
     await screen.findByText('Hotel')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
 
     // Nobody paid, so switching to multi-payer seeds me as the only payer.
     await user.click(await screen.findByRole('button', { name: 'Multiple people paid' }))
@@ -2049,7 +2050,7 @@ describe('CostsPanel — mobile extras', () => {
     await waitFor(() => expect(document.querySelector('.costs-summary')).toBeNull())
     fireEvent.click(screen.getByRole('button', { name: 'Add payment' }))
 
-    expect(await screen.findByPlaceholderText('0.00')).toBeInTheDocument()
+    expect(await screen.findByPlaceholderText('0,00')).toBeInTheDocument()
   })
 
   it('FE-W5COSTS-062: the mobile search box keeps the caret across keystrokes', async () => {
@@ -2093,11 +2094,11 @@ describe('CostsPanel — decimal padding on edit (#2175)', () => {
     ])
 
     await screen.findByText('Coffee')
-    await user.click(screen.getAllByTitle('Edit')[0])
+    await user.click(screen.getAllByRole('button', { name: 'Edit' })[0])
     expect(await screen.findByDisplayValue('4,90')).toBeInTheDocument()
     await user.click(screen.getByRole('button', { name: 'Cancel' }))
 
-    await user.click(screen.getAllByTitle('Edit')[1])
+    await user.click(screen.getAllByRole('button', { name: 'Edit' })[1])
     expect(await screen.findByDisplayValue('5,00')).toBeInTheDocument()
   })
 
@@ -2177,10 +2178,10 @@ describe('CostsPanel — negative amounts (#2176)', () => {
     // Not "Unfinished": the refund has its recipient recorded.
     expect(within(row).queryByText('Unfinished')).toBeNull()
 
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
     // The negative payer reopens selected instead of resetting to "Nobody",
     // and the total is seeded signed and padded.
-    expect(await screen.findByRole('button', { name: 'You' })).toBeInTheDocument()
+    expect(await screen.findByRole('radio', { name: 'You' })).toBeChecked()
     expect(screen.getByDisplayValue('-100,00')).toBeInTheDocument()
 
     // Saving untouched must not silently drop the negative payer.
@@ -2205,7 +2206,7 @@ describe('CostsPanel — negative amounts (#2176)', () => {
     ])
 
     await screen.findByText('Dinner')
-    const breakdown = screen.getByText('By category').parentElement as HTMLElement
+    const breakdown = screen.getByRole('region', { name: 'By category' }) as HTMLElement
     // Food nets 90 − 30 = 60; the fully refunded tour keeps a row of its own.
     expect(within(breakdown).getByText('60 €')).toBeInTheDocument()
     expect(within(breakdown).getByText(/[-−]20\s*€/)).toBeInTheDocument()
@@ -2221,10 +2222,10 @@ describe('CostsPanel — negative amounts (#2176)', () => {
       })} />)
 
     // -70 of -100: 30 still to hand out, not 30 too much.
-    expect(await screen.findByText('Sum of splits: €-70.00 of €-100.00 (under by €30.00)')).toBeInTheDocument()
+    expect(await screen.findByText('Sum of splits: -70,00 € of -100,00 € (under by 30,00 €)')).toBeInTheDocument()
 
     await user.type(screen.getByPlaceholderText('-30,00'), '-40')
-    expect(screen.getByText('Sum of splits: €-110.00 of €-100.00 (over by €10.00)')).toBeInTheDocument()
+    expect(screen.getByText('Sum of splits: -110,00 € of -100,00 € (over by 10,00 €)')).toBeInTheDocument()
   })
 
   it('FE-W5COSTS-073: the total can be turned into a refund without a minus key', async () => {
@@ -2306,19 +2307,20 @@ describe('CostsPanel — expense modal in another language', () => {
     await user.click(screen.getByRole('button', { name: 'Individuell' }))
 
     // Nothing entered yet, so the whole 90 is still unaccounted for.
-    expect(screen.getByText('Summe der Anteile: €0.00 von €90.00 (es fehlen €90.00)')).toBeInTheDocument()
+    expect(screen.getByText('Summe der Anteile: 0,00 € von 90,00 € (es fehlen 90,00 €)')).toBeInTheDocument()
 
     const shares = screen.getAllByPlaceholderText('45,00')
     await user.type(shares[0], '90')
     expect(screen.getByText('Aufteilung passt zur Summe')).toBeInTheDocument()
 
     await user.type(shares[1], '10')
-    expect(screen.getByText('Summe der Anteile: €100.00 von €90.00 (€10.00 zu viel)')).toBeInTheDocument()
+    expect(screen.getByText('Summe der Anteile: 100,00 € von 90,00 € (10,00 € zu viel)')).toBeInTheDocument()
 
     // Back to the equal split: a member taken out of it is marked, not dropped.
     await user.click(screen.getByRole('button', { name: 'Gleichmäßig' }))
-    await user.click(screen.getByRole('button', { name: /bob/i }))
-    expect(screen.getByText('Nicht dabei')).toBeInTheDocument()
+    // Taken out, the box is simply unticked; no English word leaks into the German dialog.
+    await user.click(screen.getByRole('checkbox', { name: /bob/i }))
+    expect(screen.getByRole('checkbox', { name: /bob/i })).not.toBeChecked()
     expect(screen.queryByText('Excluded')).not.toBeInTheDocument()
   })
 })
@@ -2390,7 +2392,7 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     try {
       mount([hotel()])
       await screen.findByText('Aparthotel Silver')
-      fireEvent.click(screen.getByTitle('Export CSV'))
+      fireEvent.click(screen.getByRole('button', { name: 'Export CSV' }))
       await waitFor(() => expect(exported).toBeTruthy())
       const lines = (await exported!.text()).replace(/^\uFEFF/, '').split('\r\n')
       expect(lines[0]).toBe('Date;Name;Category;Amount;Currency;Amount (EUR);Amount (USD);Note')
@@ -2471,7 +2473,7 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     mount([hotel()])
 
     await screen.findByText('Aparthotel Silver')
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
     expect(await screen.findByDisplayValue('801.76')).toBeInTheDocument()
     // Same currency as the list, so the dialog said nothing, and 801.76 there beside
     // $791.57 in the list looked like two different expenses.
@@ -2480,7 +2482,7 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     expect(within(hint).getByText(/^685,26\s€$/)).toBeInTheDocument()
     expect(within(hint).getByText('$791.55')).toBeInTheDocument()
     // Each share next to what it counts as, the figure the row's "you lent" is made of.
-    expect(screen.getByText(/Split 2 ways · \$400\.88 → \$395\.77 each/)).toBeInTheDocument()
+    expect(screen.getByText(/\$400\.88 → \$395\.77 per person/)).toBeInTheDocument()
   })
 
   it('FE-W5COSTS-086: the final budget names the bill by what was entered beside its booked figure', async () => {
@@ -2499,11 +2501,11 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
       ],
     })
 
-    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    const card = (await screen.findByRole('region', { name: 'Final budget' })) as HTMLElement
     await user.click(await within(card).findByRole('button', { name: /You/ }))
     expect(within(card).getAllByText('+$791.55')).toHaveLength(2)
     expect(within(card).getByText('Aparthotel Silver')).toBeInTheDocument()
-    expect(within(card).getByText('· $801.76')).toBeInTheDocument()
+    expect(within(card).getByText('$801.76')).toBeInTheDocument()
   })
 
   it('FE-W5COSTS-089: the final budget lists a bill that reads as typed without a second amount', async () => {
@@ -2522,10 +2524,10 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
       ],
     })
 
-    const card = (await screen.findByText('Final budget')).parentElement as HTMLElement
+    const card = (await screen.findByRole('region', { name: 'Final budget' })) as HTMLElement
     await user.click(await within(card).findByRole('button', { name: /You/ }))
     expect(within(card).getAllByText('+$801.76')).toHaveLength(2)
-    expect(within(card).queryByText('· $801.76')).toBeNull()
+    expect(within(card).queryByText('$801.76')).toBeNull()
   })
 
   it('FE-W5COSTS-083: an expense saved without a currency opens in the trip currency, not the display one', async () => {
@@ -2541,7 +2543,7 @@ describe('CostsPanel: a bill entered in the display currency (#2525)', () => {
     // The list reads the missing currency as the trip's own.
     expect(screen.getByText(/100,00\s€ → \$115\.51/)).toBeInTheDocument()
 
-    await user.click(screen.getByTitle('Edit'))
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
     expect(await screen.findByDisplayValue('100,00')).toBeInTheDocument()
     // Seeding the display currency here would label 100 euro as 100 dollars, and a
     // plain save would then store it that way.
@@ -2675,7 +2677,7 @@ describe('CostsPanel: a bill the server cannot convert', () => {
     mount([])
 
     await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    await user.type(await screen.findByPlaceholderText('0,00'), '25')
     const submits = screen.getAllByRole('button', { name: 'Add payment' })
     await user.click(submits[submits.length - 1])
 
diff --git a/client/src/components/Budget/CostsPanel.tsx b/client/src/components/Budget/CostsPanel.tsx
index c8745f178..716e3d426 100644
--- a/client/src/components/Budget/CostsPanel.tsx
+++ b/client/src/components/Budget/CostsPanel.tsx
@@ -1,6 +1,6 @@
-import { Fragment, useState, useEffect, useMemo, useCallback } from 'react'
+import { Fragment, useState, useEffect, useMemo, useCallback, useId, type ReactNode } from 'react'
 import { useSearchParams } from 'react-router'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown, Receipt, Paperclip, ScanLine } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download, StickyNote, ChevronDown, Receipt, Paperclip, ScanLine, Users } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -15,7 +15,6 @@ import { useFreezeMissingRates } from './useFreezeMissingRates'
 import { useIsMobile } from '../../hooks/useIsMobile'
 import { formatMoney, currencyDecimals, currencyLocale, localizeAmountInput, amountToInputString } from '../../utils/formatters'
 import { downloadBlob, openFile } from '../../utils/fileDownload'
-import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import { localToday } from '../Planner/today'
@@ -31,6 +30,10 @@ import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
 import { NumericInput } from '../shared/NumericInput'
 import EmptyState from '../shared/EmptyState'
+import { Tooltip } from '../shared/Tooltip'
+import { DialogButton, DialogFooter, DialogHeader, DialogSection, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { AddRowButton, EditorField, GRID_2, INPUT, PillSelect, Segmented, TEXTAREA } from '../shared/dialogParts'
+import { CountPill, EYEBROW } from '../Planner/bookings/bookingParts'
 import CostsToolbar from './CostsToolbar'
 
 interface CostsPanelProps {
@@ -348,6 +351,17 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   }
 
   const cardCls = 'bg-surface-card border border-edge'
+  // A small figure beside its name, in place of "Your share · 12 €".
+  const CHIP = 'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full bg-surface-card px-2.5 py-[3px] font-geist tabular-nums shadow-sm'
+  // The sidebar's cards: the summary cards' frame with the section name in the head band.
+  const SIDE_CARD = 'overflow-hidden rounded-2xl border border-edge-faint bg-surface-secondary'
+  const sideHead = (label: string, extra?: React.ReactNode, action?: React.ReactNode) => (
+    <div className="flex min-h-[48px] items-center gap-2 border-b border-edge-faint px-4 py-2.5" style={{ background: NEUTRAL_TINT }}>
+      <span className={EYEBROW} style={fs(11)}>{label}</span>
+      {extra}
+      {action && <span className="ml-auto">{action}</span>}
+    </div>
+  )
   const labelCls = 'text-[11px] font-semibold uppercase tracking-[0.12em] text-content-faint'
 
   // Big money number with the design's muted symbol/decimals, locale-correct via Intl.
@@ -362,13 +376,6 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   }
 
   // ── category + day filter controls (shared by both layouts) ──────────────
-  const filterControls = (
-    <>
-      <CustomSelect value={catFilter} onChange={v => setCatFilter(String(v))} options={categoryOptions} size="sm" style={{ minWidth: 148 }} />
-      <CustomSelect value={dayFilter} onChange={v => setDayFilter(String(v))} options={dayOptions} size="sm" searchable style={{ minWidth: 140 }} />
-    </>
-  )
-
   // A prominent summary shown when a single day is selected: the day + its total.
   const dayFilterTotal = dayFilter ? filtered.reduce((a, e) => a + baseTotal(e), 0) : 0
   const dayFilterLabel = dayFilter
@@ -391,10 +398,18 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       <CostsToolbar dateMeta={dateMeta} people={people} me={me} colorFor={colorFor}
         canEdit={canEdit} canSettle={(settlement?.flows || []).length > 0}
         onSettleAll={settleAll} onAddExpense={() => { setEditing(null); setModalOpen(true) }}
-        onScanReceipt={receiptScan.offered ? receiptScan.open : undefined} />
+        onScanReceipt={receiptScan.offered ? receiptScan.open : undefined}
+        filters={{
+          query: search, onQuery: setSearch,
+          owner: filter, onOwner: setFilter,
+          category: catFilter, categoryOptions, onCategory: setCatFilter,
+          day: dayFilter, dayOptions, onDay: setDayFilter,
+          onResetFilters: () => { setFilter('all'); setCatFilter(''); setDayFilter('') },
+          onExport: handleExportCsv, canExport: budgetItems.length > 0,
+        }} />
 
       {/* ── Summary cards ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 36 }} className="costs-summary">
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 16, marginBottom: 36 }} className="costs-summary">
         <SummaryCard label={t('costs.youOwe')} sub={t('costs.youOweSub')} amount={totals.owe} currency={base} locale={locale}
           icon={<ArrowDown size={18} />} tone="owe"
           foot={totals.owe > 0.01
@@ -412,40 +427,18 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             : <span className="text-content-faint">{t('costs.allSettled')}</span>} />
         <SummaryCard label={t('costs.totalSpend')} sub={t('costs.totalSpendSub')} amount={totals.totalSpend} currency={base} locale={locale}
           icon={<BarChart3 size={18} />} tone="total"
-          foot={<span style={{ display: 'flex', gap: 16 }}><span>{t('costs.yourShare')} · <b>{fmt0(totals.myShare)}</b></span><span>{t('costs.youPaid')} · <b>{fmt0(totals.myPaid)}</b></span></span>} />
+          foot={<>
+            <span className={CHIP}>{t('costs.yourShare')}<b className="text-content">{fmt0(totals.myShare)}</b></span>
+            <span className={CHIP}>{t('costs.youPaid')}<b className="text-content">{fmt0(totals.myPaid)}</b></span>
+          </>} />
       </div>
 
       {/* ── Main grid ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 32, alignItems: 'start' }} className="costs-grid">
+      {/* The same four columns as the cards above: the ledger takes three, the
+          sidebar the last, so it lines up with the total-spend card. */}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', columnGap: 16, rowGap: 32, alignItems: 'start' }} className="costs-grid">
         {/* expenses */}
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, gap: 12, flexWrap: 'wrap' }}>
-            <h3 className="text-content" style={{ fontSize: 'calc(24px * var(--fs-scale-title, 1))', fontWeight: 600, letterSpacing: '-0.025em', margin: 0 }}>
-              {t('costs.expenses')}
-            </h3>
-            <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
-              <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 10, padding: '0 10px', height: 34 }}>
-                <Search size={15} className="text-content-faint" />
-                <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')}
-                  className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', width: 150, fontFamily: 'inherit' }} />
-              </div>
-              {filterControls}
-              <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 9, padding: 3 }}>
-                {(['all', 'mine', 'owed'] as const).map(f => (
-                  <button type="button" key={f} onClick={() => setFilter(f)}
-                    className={filter === f ? 'bg-surface-card text-content' : 'text-content-muted'}
-                    style={{ padding: '6px 11px', fontSize: 'calc(12px * var(--fs-scale-body, 1))', borderRadius: 7, fontWeight: 500, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>
-                    {t('costs.filter.' + f)}
-                  </button>
-                ))}
-              </div>
-              <button type="button" onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
-                className="bg-surface-input border border-edge text-content-muted disabled:opacity-40"
-                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
-                <Download size={15} />
-              </button>
-            </div>
-          </div>
+        <div className="costs-main" style={{ gridColumn: 'span 3', minWidth: 0 }}>
 
           {dayBanner}
           {dayGroups.length === 0 ? (
@@ -461,8 +454,10 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             return (
               <div key={g.day} style={{ marginBottom: 22 }}>
                 {!dayFilter && (
-                <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
-                  {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
+                <div className="mb-3 flex items-center gap-2 px-0.5">
+                  <span className={EYEBROW} style={fs(11)}>{g.day}</span>
+                  <CountPill>{g.entries.length}</CountPill>
+                  <span className="ml-auto rounded-full bg-surface-tertiary px-2.5 py-[3px] font-geist font-semibold tabular-nums text-content-secondary" style={fs(11.5)}>{t('costs.spent', { amount: fmt(dtot) })}</span>
                 </div>
                 )}
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
@@ -478,37 +473,33 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         {/* sidebar */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
           {/* settle up */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
-              <div className={labelCls}>{t('costs.settleUp')} · <span className="text-content">{(settlement?.flows || []).length}</span></div>
-              {canEdit && (
-                <button type="button" onClick={() => setAddingPayment(true)}
-                  className="text-content-muted bg-surface-secondary border border-edge"
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-                  <Plus size={13} /> {t('costs.addPayment')}
-                </button>
-              )}
-            </div>
-            {SettleFlows()}
-          </div>
+          <section aria-label={t('costs.settleUp')} className={SIDE_CARD}>
+            {sideHead(t('costs.settleUp'), <CountPill>{(settlement?.flows || []).length}</CountPill>, canEdit && (
+              <button type="button" onClick={() => setAddingPayment(true)}
+                className="inline-flex items-center gap-1 rounded-full bg-surface-card px-2.5 py-1 font-semibold text-content-muted shadow-sm hover:text-content" style={fs(11.5)}>
+                <Plus size={12} /> {t('costs.addPayment')}
+              </button>
+            ))}
+            <div className="px-4 py-4">{SettleFlows()}</div>
+          </section>
 
           {/* balances */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.balances')}</div>
-            {BalancesList({ balances: settlement?.balances || [] })}
-          </div>
+          <section aria-label={t('costs.balances')} className={SIDE_CARD}>
+            {sideHead(t('costs.balances'))}
+            <div className="px-4 py-4">{BalancesList({ balances: settlement?.balances || [] })}</div>
+          </section>
 
           {/* final budget */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.finalBudget')}</div>
-            {FinalBudgetList()}
-          </div>
+          <section aria-label={t('costs.finalBudget')} className={SIDE_CARD}>
+            {sideHead(t('costs.finalBudget'))}
+            <div className="px-4 py-4">{FinalBudgetList()}</div>
+          </section>
 
           {/* by category */}
-          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
-            <div className={labelCls} style={{ marginBottom: 14 }}>{t('costs.byCategory')}</div>
-            {CategoryBreakdown()}
-          </div>
+          <section aria-label={t('costs.byCategory')} className={SIDE_CARD}>
+            {sideHead(t('costs.byCategory'))}
+            <div className="px-4 py-4">{CategoryBreakdown()}</div>
+          </section>
         </div>
       </div>
       </div>)}
@@ -536,43 +527,24 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       )}
 
       <style>{`
+        /* The tab's own names for the app's tokens: Costs sits on the same page,
+           cards and ink as every other tab of the trip. */
         .costs-root {
-          --c-bg: #f8fafc; --c-bg2: oklch(0.965 0.01 70);
-          --c-surface: #ffffff; --c-surface2: oklch(0.985 0.006 78);
-          --c-ink: oklch(0.22 0.012 65); --c-ink2: oklch(0.42 0.012 65); --c-ink3: oklch(0.62 0.01 65);
-          --c-line: oklch(0.92 0.008 70);
+          --c-bg: var(--bg-primary); --c-bg2: var(--bg-secondary);
+          --c-surface: var(--bg-card); --c-surface2: var(--bg-secondary);
+          --c-ink: var(--text-primary); --c-ink2: var(--text-muted); --c-ink3: var(--text-faint);
+          --c-line: var(--border-faint);
         }
-        html.dark .costs-root {
-          --c-bg: #121215; --c-bg2: #18181c;
-          --c-surface: #1a1a1e; --c-surface2: #202027;
-          --c-ink: #f4f4f5; --c-ink2: #a1a1aa; --c-ink3: #71717a;
-          --c-line: #2a2a31;
-        }
-        .costs-root .bg-surface-card { background: var(--c-surface) !important; }
-        .costs-root .bg-surface-secondary, .costs-root .bg-surface-input { background: var(--c-surface2) !important; }
-        .costs-root .border-edge { border-color: var(--c-line) !important; }
-        /* dark = neutral zinc + a touch of liquid glass, matching the dashboard */
-        html.dark .costs-root .bg-surface-card {
-          background: rgba(255,255,255,0.035) !important;
-          border-color: rgba(255,255,255,0.08) !important;
-          backdrop-filter: blur(20px) saturate(1.4);
-          -webkit-backdrop-filter: blur(20px) saturate(1.4);
-        }
-        html.dark .costs-root .bg-surface-secondary,
-        html.dark .costs-root .bg-surface-input { background: rgba(255,255,255,0.05) !important; }
-        html.dark .costs-root .border-edge { border-color: rgba(255,255,255,0.08) !important; }
-        .costs-root .text-content { color: var(--c-ink) !important; }
-        .costs-root .text-content-muted { color: var(--c-ink2) !important; }
-        .costs-root .text-content-faint { color: var(--c-ink3) !important; }
         .costs-root .exp-actions { opacity: 1; }
         .costs-root .exp-actions button { background: none; }
-        .costs-root .exp-actions button:hover { background: var(--bg-secondary); color: var(--c-ink); }
+        .costs-root .exp-actions button:hover { background: var(--bg-tertiary); color: var(--c-ink); }
         /* Destructive actions keep their own tint: the neutral one would read as
            "safe" on the button that deletes the expense. */
         .costs-root .exp-actions .exp-action-danger:hover { background: rgba(220,38,38,0.14); color: #dc2626; }
         @media (max-width: 1100px) {
           .costs-root .costs-summary { grid-template-columns: 1fr 1fr !important; }
           .costs-root .costs-grid { grid-template-columns: 1fr !important; }
+          .costs-root .costs-main { grid-column: auto !important; }
         }
         @media (max-width: 640px) {
           .costs-root .costs-summary { grid-template-columns: 1fr !important; }
@@ -602,9 +574,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
         {flows.map((f, i) => (
           <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${personName(f.from.user_id)} → ${f.to.user_id === me ? t('costs.youLower') : personName(f.to.user_id)}`}>
+            <Tooltip label={`${personName(f.from.user_id)} → ${f.to.user_id === me ? t('costs.youLower') : personName(f.to.user_id)}`}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
               <Avatar id={f.from.user_id} size={32} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={f.to.user_id} size={32} />
             </div>
+            </Tooltip>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
               <span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700 }}>{fmt(f.amount)}</span>
               {canEdit && <button type="button" onClick={() => settleFlow(f.from.user_id, f.to.user_id, f.amount)} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '7px 12px', borderRadius: 9, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, border: 0, cursor: 'pointer', fontFamily: 'inherit' }}>{t('costs.settle')}</button>}
@@ -632,8 +606,8 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           <div style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', textTransform: 'uppercase', letterSpacing: '0.12em', color: 'rgba(255,255,255,0.6)', fontWeight: 600 }}>{t('costs.totalSpend')}</div>
           <div style={{ fontSize: 'calc(44px * var(--fs-scale-title, 1))', fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1, marginTop: 8, display: 'flex', alignItems: 'baseline' }}>{bigMoney(totals.totalSpend, 24, 'rgba(255,255,255,0.6)')}</div>
           <div style={{ display: 'flex', gap: 18, marginTop: 12, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'rgba(255,255,255,0.6)', flexWrap: 'wrap' }}>
-            <span>{t('costs.yourShare')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myShare)}</b></span>
-            <span>{t('costs.youPaid')} · <b style={{ color: '#fff', fontWeight: 600 }}>{fmt0(totals.myPaid)}</b></span>
+            <span>{t('costs.yourShare')} <b style={{ color: '#fff', fontWeight: 600, marginLeft: 4 }}>{fmt0(totals.myShare)}</b></span>
+            <span>{t('costs.youPaid')} <b style={{ color: '#fff', fontWeight: 600, marginLeft: 4 }}>{fmt0(totals.myPaid)}</b></span>
           </div>
           {canEdit && (
             <button type="button" onClick={() => { setEditing(null); setModalOpen(true) }} style={{ marginTop: 16, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.16)', color: '#fff', padding: 13, borderRadius: 14, fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
@@ -692,11 +666,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
             <div className="text-content" style={{ fontSize: 'calc(19px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
-            <button type="button" onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
+            <Tooltip label={t('budget.exportCsv')}>
+            <button type="button" onClick={handleExportCsv} aria-label={t('budget.exportCsv')} disabled={!budgetItems.length}
               className="bg-surface-card border border-edge text-content-muted disabled:opacity-40"
               style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
               <Download size={15} />
             </button>
+            </Tooltip>
           </div>
           <div className="bg-surface-card border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '0 12px', height: 42 }}>
             <Search size={16} className="text-content-faint" />
@@ -764,9 +740,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       cursor: 'pointer', padding: 0,
     }
     return (
-      <div className="exp-actions bg-surface-card border border-edge" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, flexShrink: 0, borderRadius: 999, padding: 5 }}>
-        <button type="button" title={t('common.edit')} onClick={onEdit} className="text-content-muted transition-colors" style={btn}><Pencil size={13} /></button>
-        <button type="button" title={deleteLabel} onClick={onDelete} className="exp-action-danger transition-colors" style={{ ...btn, color: '#dc2626' }}><Trash2 size={13} /></button>
+      <div className="exp-actions bg-surface-secondary border border-edge-faint" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, flexShrink: 0, borderRadius: 999, padding: 5 }}>
+        <Tooltip label={t('common.edit')}>
+        <button type="button" aria-label={t('common.edit')} onClick={onEdit} className="text-content-muted transition-colors" style={btn}><Pencil size={13} /></button>
+        </Tooltip>
+        <Tooltip label={deleteLabel}>
+        <button type="button" aria-label={deleteLabel} onClick={onDelete} className="exp-action-danger transition-colors" style={{ ...btn, color: '#dc2626' }}><Trash2 size={13} /></button>
+        </Tooltip>
       </div>
     )
   }
@@ -791,7 +771,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 
     return (
       <div style={{ display: 'flex', alignItems: 'stretch', gap: 8 }}>
-      <div className="bg-surface-card border border-edge exp-row" style={{ position: 'relative', flex: 1, minWidth: 0, display: 'grid', gridTemplateColumns: cols, gap: 18, alignItems: 'center', borderRadius: 18, padding: isMobile ? '16px 20px' : '20px 20px 16px' }}>
+      <div className="bg-surface-secondary border border-edge-faint exp-row" style={{ position: 'relative', flex: 1, minWidth: 0, display: 'grid', gridTemplateColumns: cols, gap: 18, alignItems: 'center', borderRadius: 18, padding: isMobile ? '16px 20px' : '20px 20px 16px' }}>
         {/* The category rides the card edge as a tab, the way the mobile card
             does, so it stops taking up a slot inside the row itself. */}
         {!isMobile && (
@@ -804,7 +784,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         <span style={{ position: 'relative', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}>
           <Icon size={21} />
           {isMobile && unfinished && (
-            <span title={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
+            <Tooltip label={t('costs.unfinishedHint')}>
+            <span role="img" aria-label={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
+            </Tooltip>
           )}
         </span>
 
@@ -813,20 +795,23 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
             <span className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.name}</span>
             {unfinished && !isMobile && (
-              <span title={t('costs.unfinishedHint')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
+              <Tooltip label={t('costs.unfinishedHint')}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
                 <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 800 }}>!</span>
                 {t('costs.unfinished')}
               </span>
+              </Tooltip>
             )}
             {(e.receipts || []).length > 0 && (
+              <Tooltip label={t('costs.viewReceipt')}>
               <button
                 type="button"
                 onClick={(ev) => {
                   ev.stopPropagation()
                   setPreviewReceipts({ receipts: e.receipts!, initialIndex: 0 })
                 }}
-                title={t('costs.viewReceipt')}
-                className="bg-surface-secondary border border-edge text-content-muted hover:text-content hover:border-content-faint transition-all"
+ aria-label={t('costs.viewReceipt')}
+                className="bg-surface-card border border-edge-faint text-content-muted hover:text-content hover:border-content-faint transition-all"
                 style={{
                   display: 'inline-flex',
                   alignItems: 'center',
@@ -843,6 +828,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                 <Receipt size={12} className="text-content-muted" />
                 <span>{t('costs.receipts') || 'Beleg'}{e.receipts!.length > 1 ? ` (${e.receipts!.length})` : ''}</span>
               </button>
+              </Tooltip>
             )}
           </div>
           {line && (
@@ -855,10 +841,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           {payers.length > 0 && (
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginTop: 6 }}>
               {payers.map(p => (
-                <span key={p.user_id} className="bg-surface-secondary border border-edge" title={personName(p.user_id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))' }}>
+                <Tooltip key={p.user_id} label={personName(p.user_id)}>
+                <span className="bg-surface-card border border-edge-faint" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px 3px 3px', borderRadius: 999, fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))' }}>
                   <Avatar id={p.user_id} size={18} />
                   <span className="text-content" style={{ fontWeight: 700 }}>{fmt(booked(p.amount, e))}</span>
                 </span>
+                </Tooltip>
               ))}
             </div>
           )}
@@ -868,22 +856,24 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
             it reads as part of the row rather than something dropped onto it. */}
         {!isMobile && (
           note ? (
+            <Tooltip label={open ? t('costs.hideNote') : t('costs.showNote')}>
             <button type="button" onClick={() => setExpandedNoteId(open ? null : e.id)}
-              aria-expanded={open} title={open ? t('costs.hideNote') : t('costs.showNote')}
-              className="bg-surface-secondary border border-edge text-content-muted hover:text-content hover:border-content-faint transition-colors exp-note-btn"
+              aria-expanded={open}
+              className="bg-surface-card border border-edge-faint text-content-muted hover:text-content hover:border-content-faint transition-colors exp-note-btn"
               style={{ display: 'flex', alignItems: open ? 'flex-start' : 'center', gap: 9, minWidth: 0, width: '100%', padding: open ? '10px 14px 11px 13px' : '7px 12px 7px 11px', borderRadius: open ? 14 : 999, borderLeft: '3px solid ' + c.color, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', lineHeight: 1.5, textAlign: 'left' }}>
               <span style={open
                 ? { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', minWidth: 0, flex: 1 }
                 : { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0, flex: 1 }}>{note}</span>
               <ChevronDown size={13} style={{ flexShrink: 0, marginTop: open ? 3 : 0, transition: 'transform .18s ease', transform: open ? 'rotate(180deg)' : 'none' }} />
             </button>
+            </Tooltip>
           ) : <span />
         )}
 
         {/* The money, and what to do with it. */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4, whiteSpace: 'nowrap' }}>
-            <span className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: isMobile ? '0' : '6px 13px', borderRadius: 999, border: isMobile ? 0 : undefined, background: isMobile ? 'none' : undefined, fontSize: isMobile ? 'calc(18px * var(--fs-scale-subtitle, 1))' : 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{fmt(baseTotal(e))}</span>
+            <span className="bg-surface-card border border-edge-faint text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: isMobile ? '0' : '6px 13px', borderRadius: 999, border: isMobile ? 0 : undefined, background: isMobile ? 'none' : undefined, fontSize: isMobile ? 'calc(18px * var(--fs-scale-subtitle, 1))' : 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>{fmt(baseTotal(e))}</span>
             {!unfinished && (e.members || []).length > 0 && Math.abs(net) > 0.01 && (
               <span style={{ display: 'inline-flex', alignItems: 'center', padding: isMobile ? 0 : '2px 9px', borderRadius: 999, background: isMobile ? 'none' : (net > 0 ? 'rgba(22,163,74,0.13)' : 'rgba(220,38,38,0.13)'), fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, color: net > 0 ? '#16a34a' : '#dc2626' }}>
                 {net > 0 ? t('costs.youLent', { amount: fmt(net) }) : t('costs.youBorrowed', { amount: fmt(-net) })}
@@ -906,29 +896,35 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const line = convertedLine(s.amount, cur, s.exchange_rate, tripCurrency, base, settled(s))
     return (
       <div style={{ display: 'flex', alignItems: 'stretch', gap: 8 }}>
-      <div className="bg-surface-card border border-edge exp-row" style={{ flex: 1, minWidth: 0, display: 'grid', gridTemplateColumns: isMobile ? '46px 1fr auto' : '46px minmax(200px, 1fr) minmax(0, 1.5fr) auto', gap: isMobile ? 16 : 18, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
+      <div className="bg-surface-secondary border border-edge-faint exp-row" style={{ flex: 1, minWidth: 0, display: 'grid', gridTemplateColumns: isMobile ? '46px 1fr auto' : '46px minmax(200px, 1fr) minmax(0, 1.5fr) auto', gap: isMobile ? 16 : 18, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
         <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><ArrowLeftRight size={21} /></span>
         <div style={{ minWidth: 0 }}>
           <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>
             {t('costs.payment')}
-            {line && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}> · {fmt(line.entered.amount, line.entered.currency)} → {fmt(line.into.amount, line.into.currency)}</span>}
+            {line && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginLeft: 10 }}>{fmt(line.entered.amount, line.entered.currency)} → {fmt(line.into.amount, line.into.currency)}</span>}
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }} title={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
+          <Tooltip label={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
             <Avatar id={s.from_user_id} size={20} /><ArrowRight size={13} className="text-content-faint" /><Avatar id={s.to_user_id} size={20} />
             <span className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{personName(s.from_user_id)} → {personName(s.to_user_id)}</span>
           </div>
+          </Tooltip>
         </div>
         {/* A payment carries no note, but it keeps the column so its amount lands
             on the same axis as every expense above it. */}
         {!isMobile && <span />}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
-          <span className="bg-surface-secondary border border-edge text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: '6px 13px', borderRadius: 999, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{fmt(settled(s))}</span>
+          <span className="bg-surface-card border border-edge-faint text-content" style={{ display: 'inline-flex', alignItems: 'center', padding: '6px 13px', borderRadius: 999, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{fmt(settled(s))}</span>
         </div>
       </div>
       {canEdit && (
-        <div className="exp-actions bg-surface-card border border-edge" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, flexShrink: 0, borderRadius: 999, padding: 5 }}>
-          <button type="button" title={t('common.edit')} onClick={() => setEditingSettlement(s)} className="text-content-muted transition-colors" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0 }}><Pencil size={13} /></button>
-          <button type="button" title={t('costs.undo')} onClick={() => undoSettlement(s.id)} className="exp-action-danger transition-colors" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0, color: '#dc2626' }}><RotateCcw size={13} /></button>
+        <div className="exp-actions bg-surface-secondary border border-edge-faint" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 3, flexShrink: 0, borderRadius: 999, padding: 5 }}>
+          <Tooltip label={t('common.edit')}>
+          <button type="button" aria-label={t('common.edit')} onClick={() => setEditingSettlement(s)} className="text-content-muted transition-colors" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0 }}><Pencil size={13} /></button>
+          </Tooltip>
+          <Tooltip label={t('costs.undo')}>
+          <button type="button" aria-label={t('costs.undo')} onClick={() => undoSettlement(s.id)} className="exp-action-danger transition-colors" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 30, height: 30, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0, color: '#dc2626' }}><RotateCcw size={13} /></button>
+          </Tooltip>
         </div>
       )}
       </div>
@@ -1044,7 +1040,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                 return (
                   <div key={r.item_id} style={lineCls}>
                     <span className="text-content-muted" style={{ minWidth: 0, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                      {r.name}{entered && <span className="text-content-faint"> · {entered}</span>}
+                      {r.name}{entered && <span className="text-content-faint" style={{ marginLeft: 8 }}>{entered}</span>}
                     </span>
                     <span className="text-content" style={{ whiteSpace: 'nowrap' }}>{signed(r.amount)}</span>
                   </div>
@@ -1115,10 +1111,16 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 }
 
 // ── pure subcomponents ─────────────────────────────────────────────────────
+/** A tone's colour, from the status tokens the booking cards use. */
+const TONE_COLOR = { owe: 'var(--danger)', owed: 'var(--success)', unfinished: 'var(--warning)', total: 'var(--accent)' } as const
+
+/**
+ * One of the four figures on top, drawn like a booking card: a head band tinted
+ * by what the figure means, with its icon, name and a line on what it counts,
+ * then the amount and a foot with who or what is behind it.
+ */
 function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' | 'unfinished' }) {
-  const total = tone === 'total'
-  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : tone === 'unfinished' ? '#d97706' : undefined
-  const muted = total ? 'rgba(255,255,255,0.55)' : 'var(--text-faint)'
+  const color = TONE_COLOR[tone]
   // formatToParts keeps the design's "big integer + muted symbol/decimals" styling
   // while letting Intl place the symbol and pick separators per locale + currency.
   let parts: Intl.NumberFormatPart[] | null = null
@@ -1128,22 +1130,23 @@ function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }:
   } catch { parts = null }
   const big = (p: Intl.NumberFormatPart) => p.type === 'integer' || p.type === 'group' || p.type === 'minusSign'
   return (
-    <div className={total ? '' : 'bg-surface-card border border-edge'}
-      style={{ borderRadius: 22, padding: '26px 28px', position: 'relative', overflow: 'hidden', ...(total ? { background: 'linear-gradient(135deg,#1f2937,#111827)', color: '#fff' } : {}) }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
-        <span style={{ width: 36, height: 36, borderRadius: 11, display: 'grid', placeItems: 'center', background: total ? 'rgba(255,255,255,0.12)' : (accent + '22'), color: total ? '#fff' : accent }}>{icon}</span>
-        <div>
-          <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600 }} className={total ? '' : 'text-content'}>{label}</div>
-          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', opacity: total ? 0.6 : 1 }} className={total ? '' : 'text-content-faint'}>{sub}</div>
+    <section aria-label={label} className="flex flex-col overflow-hidden rounded-2xl border border-edge-faint bg-surface-secondary">
+      <div className="flex items-center gap-2.5 border-b border-edge-faint px-4 py-3" style={{ background: `color-mix(in srgb, ${color} ${tone === 'total' ? 7 : 11}%, transparent)` }}>
+        <span className="grid h-8 w-8 flex-none place-items-center rounded-[10px] bg-surface-card shadow-sm" style={{ color: tone === 'total' ? 'var(--text-primary)' : color }}>{icon}</span>
+        <div className="min-w-0">
+          <div className="truncate font-bold text-content" style={fs(13.5, 'body')}>{label}</div>
+          <div className="truncate text-content-faint" style={fs(11.5)}>{sub}</div>
         </div>
       </div>
-      <div style={{ fontSize: 'calc(46px * var(--fs-scale-title, 1))', fontWeight: 600, letterSpacing: '-0.035em', lineHeight: 1, marginTop: 20, display: 'flex', alignItems: 'baseline', color: total ? '#fff' : accent }}>
-        {parts
-          ? parts.map((p, i) => <span key={i} style={big(p) ? undefined : { fontSize: 'calc(26px * var(--fs-scale-title, 1))', fontWeight: 500, color: muted }}>{p.value}</span>)
-          : <span>{formatMoney(amount, currency, locale)}</span>}
+      <div className="flex flex-1 flex-col gap-3 px-4 pb-4 pt-3.5">
+        <div className="flex items-baseline font-semibold leading-none tracking-[-0.035em]" style={{ fontSize: 'calc(40px * var(--fs-scale-title, 1))', color: tone === 'total' ? 'var(--text-primary)' : color }}>
+          {parts
+            ? parts.map((p, i) => <span key={i} className={big(p) ? undefined : 'font-medium text-content-faint'} style={big(p) ? undefined : { fontSize: 'calc(22px * var(--fs-scale-title, 1))' }}>{p.value}</span>)
+            : <span>{formatMoney(amount, currency, locale)}</span>}
+        </div>
+        <div className="mt-auto flex flex-wrap items-center gap-1.5 text-content-muted" style={fs(12.5, 'body')}>{foot}</div>
       </div>
-      <div style={{ marginTop: 16, fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', opacity: total ? 0.85 : 1 }}>{foot}</div>
-    </div>
+    </section>
   )
 }
 
@@ -1197,48 +1200,64 @@ function SettlementModal({ tripId, people, me, editing, currency, tripCurrency,
     } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
   }
 
-  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+  const labelId = useId()
+  const nameOf = (id: string) => {
+    const p = people.find(x => String(x.id) === id)
+    if (!p) return ''
+    return p.id === me ? t('costs.you') : p.username
+  }
 
   return (
-    <Modal isOpen onClose={onClose} title={editing ? t('costs.editPayment') : t('costs.addPayment')} size="md"
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button type="button" onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
-          <button type="button" onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addPayment')}</button>
-        </div>
-      }>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-        <div>
-          <label className={labelCls}>{t('costs.from')}</label>
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><ArrowLeftRight size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={editing ? t('costs.editPayment') : t('costs.addPayment')}
+          sub={fromId !== toId ? `${nameOf(fromId)} → ${nameOf(toId)}` : undefined}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={save} disabled={!valid || saving}>{editing ? t('common.save') : t('costs.addPayment')}</DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <div className={GRID_2}>
+        <EditorField label={t('costs.from')}>
           <CustomSelect value={fromId} onChange={v => setFromId(String(v))} options={opts} style={{ width: '100%' }} />
-        </div>
-        <div>
-          <label className={labelCls}>{t('costs.to')}</label>
+        </EditorField>
+        <EditorField label={t('costs.to')}>
           <CustomSelect value={toId} onChange={v => setToId(String(v))} options={opts} style={{ width: '100%' }} />
-        </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.amount')}</label>
-            <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
-              <span className="text-content-faint" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))' }}>{SYMBOLS[cur] || (cur + ' ')}</span>
-              <input type="text" inputMode="decimal" placeholder="0.00" value={amount}
-                onChange={e => setAmount(e.target.value.replace(',', '.'))}
-                className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
-            </div>
-          </div>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.currency')}</label>
-            <CustomSelect value={cur} onChange={v => setCur(String(v))} searchable
-              options={currenciesWith(cur).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
-              style={{ width: '100%' }} />
-          </div>
-        </div>
-        <div>
-          <label className={labelCls}>{t('costs.day')}</label>
-          <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
-        </div>
+        </EditorField>
       </div>
-    </Modal>
+      <div className={GRID_2}>
+        <EditorField label={t('costs.amount')}>
+          <div className="flex items-center rounded-[10px] border border-edge bg-surface-input px-3" style={{ height: FIELD_H }}>
+            <span className="text-content-faint" style={fs(14, 'body')}>{SYMBOLS[cur] || (cur + ' ')}</span>
+            {/* Typed and shown the way the expense total is, in the reader's own decimal mark. */}
+            <NumericInput mode="decimal" placeholder={localizeAmountInput('0.00', cur)} value={localizeAmountInput(amount, cur)}
+              onValueChange={v => setAmount(v.replace(',', '.'))}
+              className="w-full flex-1 border-0 bg-transparent pl-1.5 font-semibold text-content outline-none dark:bg-transparent" style={fs(14, 'body')} />
+          </div>
+        </EditorField>
+        <EditorField label={t('costs.currency')}>
+          <CustomSelect value={cur} onChange={v => setCur(String(v))} searchable
+            options={currenciesWith(cur).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+            style={{ width: '100%' }} />
+        </EditorField>
+      </div>
+      <EditorField label={t('costs.day')}>
+        <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
+      </EditorField>
+    </DialogShell>
   )
 }
 
@@ -1263,6 +1282,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   const { t, locale } = useTranslation()
   const toast = useToast()
   const isMobile = useIsMobile()
+  const titleId = useId()
   const { addBudgetItem, updateBudgetItem } = useTripStore()
   const sym = (c: string) => SYMBOLS[c] || (c + ' ')
   // A saved expense without a currency opens in the trip's own (#2525).
@@ -1570,394 +1590,392 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
     }
   }
 
-  const inputCls = 'w-full bg-surface-input border border-edge text-content'
-  const labelCls = 'block text-caption font-semibold uppercase tracking-[0.14em] text-content-faint mb-2'
-  // Borrowed from the trip dialog (TripFormModal): related fields sit together in
-  // a panel instead of running as one undifferentiated column of inputs.
-  const panelCls = 'rounded-2xl border border-edge bg-surface-secondary p-4'
+  const catInfo = catMeta(cat)
+  const money = (v: number) => formatMoney(v, currency, locale)
+  // A person's row in the payer and split lists: avatar or initial, then the name.
+  const personFace = (p: TripMember, idx: number, on: boolean, size = 22) => p.avatar_url
+    ? <img src={p.avatar_url} alt="" className="block flex-none rounded-full object-cover" style={{ width: size, height: size, opacity: on ? 1 : 0.45 }} />
+    : <span className="grid flex-none place-items-center rounded-full font-bold text-white" style={{ width: size, height: size, background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, opacity: on ? 1 : 0.45, ...fs(9) }}>
+        {(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}
+      </span>
+  const GROUP = 'rounded-[16px] bg-surface-secondary p-4'
+  const PERSON_LIST = 'divide-y divide-edge-faint overflow-hidden rounded-[12px] border border-edge-faint bg-surface-card'
+  const PERSON_ROW = 'grid min-h-[48px] grid-cols-[minmax(0,1fr)_130px] items-center gap-2.5 px-3 py-1.5'
+  const AMOUNT_BOX = 'flex items-center gap-1 rounded-[8px] border border-edge bg-surface-input px-2.5'
+  const AMOUNT_INPUT = 'w-full border-0 bg-transparent py-2 text-right font-semibold text-content outline-none dark:bg-transparent'
 
-  return (
-    <Modal isOpen onClose={onClose} title={editing ? t('costs.editExpense') : t('costs.addExpense')} size={isMobile ? '2xl' : '5xl'}
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button type="button" onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
-          <button type="button" onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addExpense')}</button>
-        </div>
-      }>
-      {/* Two columns on desktop: what the expense was on the left, how it is
-          shared on the right. The split follows the two questions the dialog
-          actually asks, so neither side is a leftovers pile. */}
-      <div style={{ display: isMobile ? 'flex' : 'grid', flexDirection: 'column', gridTemplateColumns: '1fr 1fr', alignItems: 'start', gap: isMobile ? 14 : 28 }}>
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
-        <div className={panelCls} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-        <div>
-          <label className={labelCls}>{t('costs.whatFor')}</label>
-          <input value={name} onChange={e => setName(e.target.value)} placeholder={t('costs.namePlaceholder')} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 'calc(14px * var(--fs-scale-body, 1))', outline: 'none' }} />
-        </div>
+  const nameOf = (p: TripMember) => (p.id === me ? t('costs.you') : p.username)
+  // Who is in, shown as a real box to tick instead of a row that only fades.
+  const tick = (on: boolean) => (
+    <span aria-hidden className={`grid h-[18px] w-[18px] flex-none place-items-center rounded-[5px] border ${on ? 'border-transparent bg-accent text-accent-text' : 'border-edge bg-surface-card'}`}>
+      {on && <Check size={12} strokeWidth={3} />}
+    </span>
+  )
+  const personName = (p: TripMember, on: boolean) => (
+    <span className={`truncate font-medium ${on ? 'text-content' : 'text-content-faint'}`} style={fs(13.5, 'body')}>{nameOf(p)}</span>
+  )
+  const excludedNote = <span />
+  const modeHint = (text: string) => <p className="m-0 mb-2.5 text-content-faint" style={fs(12, 'body')}>{text}</p>
+  // Figures sit in badges, so an amount never reads as part of the sentence beside it.
+  const BADGE = 'inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-[3px] font-geist font-semibold tabular-nums'
+  const badge = (content: ReactNode, tone: 'neutral' | 'success' | 'danger' | 'warning' = 'neutral') => {
+    const look = { neutral: 'bg-surface-tertiary text-content-secondary', success: 'bg-success-soft text-success', danger: 'bg-danger-soft text-danger', warning: 'bg-warning-soft text-warning' }[tone]
+    return <span className={`${BADGE} ${look}`} style={fs(12)}>{content}</span>
+  }
 
-        <div>
-          <label className={labelCls}>{t('costs.totalAmount')}</label>
-          <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px', opacity: isTicketMode ? 0.6 : 1 }}>
-            <span className="text-content-faint" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))' }}>{sym(currency)}</span>
-            <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} value={localizeAmountInput(isTicketMode ? ticketInfo.total.toFixed(2) : total, currency)}
-              onValueChange={onTotalChange}
-              signToggleLabel={t('costs.toggleSign')}
-              disabled={isTicketMode}
-              className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
-          </div>
+  const payerSection = (
+    <DialogSection
+      label={t('costs.whoPaid')}
+      className={GROUP}
+      action={(
+        <Segmented<'one' | 'several'>
+          label={t('costs.whoPaid')}
+          value={multiPayer ? 'several' : 'one'}
+          onChange={mode => {
+            if (mode === 'several' && !multiPayer) enableMultiPayer()
+            if (mode === 'one' && multiPayer) disableMultiPayer()
+          }}
+          options={[
+            { value: 'one', label: t('costs.singlePayer') },
+            { value: 'several', label: t('costs.multiplePayers') },
+          ]}
+        />
+      )}
+    >
+      {!multiPayer ? (
+        // One payer: everybody as a chip to pick, and "nobody yet" for a planning entry.
+        <div role="radiogroup" aria-label={t('costs.whoPaid')} className="flex flex-wrap gap-1.5">
+          {people.map((p, idx) => {
+            const on = payerId === p.id
+            return (
+              <button key={p.id} type="button" role="radio" aria-checked={on} aria-label={nameOf(p)} onClick={() => setPayerId(p.id)}
+                className={`inline-flex items-center gap-2 rounded-full border py-1 pl-1 pr-3 font-medium ${on ? 'border-[color:var(--text-primary)] bg-surface-card text-content shadow-sm' : 'border-edge-faint bg-surface-secondary text-content-muted hover:text-content'}`}
+                style={fs(13, 'body')}>
+                {personFace(p, idx, true, 22)}
+                {nameOf(p)}
+              </button>
+            )
+          })}
+          <button type="button" role="radio" aria-checked={payerId === 0} onClick={() => setPayerId(0)}
+            className={`inline-flex items-center rounded-full border border-dashed px-3 py-1 font-medium ${payerId === 0 ? 'border-[color:var(--text-primary)] text-content' : 'border-edge text-content-faint hover:text-content'}`}
+            style={fs(13, 'body')}>
+            {t('costs.noOnePaid') || 'Nobody (planning entry)'}
+          </button>
         </div>
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.currency')}</label>
-            <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
-              options={currenciesWith(currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
-              style={{ width: '100%' }} />
-          </div>
-          <div style={{ minWidth: 0 }}>
-            <label className={labelCls}>{t('costs.day')}</label>
-            <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
-          </div>
-        </div>
-
-        {fx && (
-          <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{formatMoney(totalNum, currency, locale)}</span>
-            {fx.inTrip != null && <>
-              <span className="text-content-faint">→</span>
-              <span className={fx.shown == null ? 'text-content' : undefined} style={fx.shown == null ? { fontWeight: 600 } : undefined}>{formatMoney(fx.inTrip, tripCur, locale)}</span>
-            </>}
-            {fx.shown != null && <>
-              <span className="text-content-faint">≈</span>
-              <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(fx.shown, base, locale)}</span>
-              <span className="text-content-faint">· {t('costs.liveRate')}</span>
-            </>}
-          </div>
-        )}
-
-        </div>
-
-        <div className={panelCls}>
-          <label className={labelCls}>{t('costs.category')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
-            {COST_CATEGORY_LIST.map(c => {
-              const Icon = c.Icon; const on = cat === c.key
+      ) : (
+        <>
+          {modeHint(t('costs.payersHint'))}
+          <div className={PERSON_LIST}>
+            {people.map((p, idx) => {
+              const on = payerIds.has(p.id)
               return (
-                <button type="button" key={c.key} onClick={() => setCat(c.key)}
-                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-muted border border-edge'}
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px 6px 7px', borderRadius: 999, fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
-                  <span style={{ width: 20, height: 20, borderRadius: 6, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={12} /></span>
-                  {t(c.labelKey)}
-                </button>
+                <div key={p.id} className={PERSON_ROW}>
+                  <button type="button" role="checkbox" aria-checked={on} aria-label={nameOf(p)} onClick={() => togglePayer(p.id)} data-testid="payer-toggle"
+                    className="inline-flex min-w-0 items-center gap-2.5 text-left">
+                    {tick(on)}
+                    {personFace(p, idx, on)}
+                    {personName(p, on)}
+                  </button>
+                  {on ? (
+                    <div className={AMOUNT_BOX}>
+                      <span className="text-content-faint" style={fs(13, 'body')}>{sym(currency)}</span>
+                      <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} data-testid="payer-amount"
+                        value={localizeAmountInput(payerAmounts[p.id] || '', currency)}
+                        onValueChange={v => onPayerAmountChange(p.id, v)}
+                        className={AMOUNT_INPUT} style={fs(13.5, 'body')} />
+                    </div>
+                  ) : excludedNote}
+                </div>
               )
             })}
           </div>
-        </div>
-
-        </div>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
-        <div className={panelCls}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.whoPaid')}</label>
-            <button type="button" onClick={() => (multiPayer ? disableMultiPayer() : enableMultiPayer())}
-              className="text-content-muted"
-              style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, textDecoration: 'underline' }}>
-              {multiPayer ? t('costs.singlePayer') : t('costs.multiplePayers')}
-            </button>
-          </div>
-          {!multiPayer ? (
-            <CustomSelect value={String(payerId)} onChange={v => setPayerId(Number(v))}
-              options={[
-                { value: '0', label: t('costs.noOnePaid') || 'Nobody (planning entry)' },
-                ...people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
-              ]}
-              style={{ width: '100%' }} />
-          ) : (
-            <>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-                {people.map((p, idx) => {
-                  const on = payerIds.has(p.id)
-                  return (
-                    <div key={p.id} className="bg-surface-secondary border border-edge"
-                      style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
-                      <button type="button" onClick={() => togglePayer(p.id)} data-testid="payer-toggle"
-                        style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
-                        {p.avatar_url
-                          ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
-                          : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>
-                              {(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}
-                            </span>}
-                        <span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                          {p.id === me ? t('costs.you') : p.username}
-                        </span>
-                      </button>
-                      {on ? (
-                        <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
-                          <span className="text-content-faint" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{sym(currency)}</span>
-                          <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} data-testid="payer-amount"
-                            value={localizeAmountInput(payerAmounts[p.id] || '', currency)}
-                            onValueChange={v => onPayerAmountChange(p.id, v)}
-                            className="text-content"
-                            style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
-                        </div>
-                      ) : (
-                        <button type="button" onClick={() => togglePayer(p.id)} className="text-content-faint"
-                          style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', textAlign: 'right' }}>
-                          {t('costs.tapToInclude')}
-                        </button>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
-              {!payersOk && (
-                <div style={{ marginTop: 8, fontSize: 'calc(12.5px * var(--fs-scale-caption, 1))', color: '#d97706' }}>
-                  {t('costs.payersUnbalanced', { amount: formatMoney(totalNum, currency, locale) })}
-                </div>
-              )}
-            </>
+          {!payersOk && (
+            <div className="mt-2.5">{badge(<><AlertCircle size={12} strokeWidth={2.4} />{t('costs.payersUnbalanced', { amount: formatMoney(totalNum, currency, locale) })}</>, 'warning')}</div>
           )}
-        </div>
+        </>
+      )}
+    </DialogSection>
+  )
 
-        <div className={panelCls}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
-            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.split') || 'Split'}</label>
-            <div className="bg-surface-card border border-edge" style={{ display: 'flex', borderRadius: 999, padding: 2 }}>
-              <button type="button" onClick={() => setSplitMode('equally')}
-                className={splitMode === 'equally' ? 'bg-surface-secondary text-content' : 'text-content-muted'}
-                style={{ padding: '4px 12px', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', borderRadius: 999, fontWeight: 600, border: 0, background: splitMode === 'equally' ? undefined : 'none', cursor: 'pointer', fontFamily: 'inherit' }}>
-                {t('costs.splitEqually') || 'Equally'}
-              </button>
-              <button type="button" onClick={() => setSplitMode('custom')}
-                className={splitMode === 'custom' ? 'bg-surface-secondary text-content' : 'text-content-muted'}
-                style={{ padding: '4px 12px', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', borderRadius: 999, fontWeight: 600, border: 0, background: splitMode === 'custom' ? undefined : 'none', cursor: 'pointer', fontFamily: 'inherit' }}>
-                {t('costs.splitCustom') || 'Custom'}
-              </button>
-              <button type="button" onClick={() => setSplitMode('ticket')}
-                className={splitMode === 'ticket' ? 'bg-surface-secondary text-content' : 'text-content-muted'}
-                style={{ padding: '4px 12px', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', borderRadius: 999, fontWeight: 600, border: 0, background: splitMode === 'ticket' ? undefined : 'none', cursor: 'pointer', fontFamily: 'inherit' }}>
-                {t('costs.splitTicket') || 'Ticket'}
-              </button>
-            </div>
-          </div>
-          {splitMode === 'ticket' ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {ticketItems.map((item, itemIdx) => (
-                  <div key={item.id} className="bg-surface-secondary border border-edge" style={{ padding: 10, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px auto', gap: 8, alignItems: 'center' }}>
-                      <input
-                        type="text"
-                        placeholder={t('costs.ticketItemName')}
-                        value={item.name}
-                        onChange={e => handleUpdateItemName(item.id, e.target.value)}
-                        className="bg-surface-input border border-edge text-content"
-                        style={{ minWidth: 0, padding: '6px 10px', borderRadius: 8, fontSize: 13, border: '1px solid var(--border-color)', outline: 'none' }}
-                      />
-                      <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
-                        <span className="text-content-faint" style={{ fontSize: 12 }}>{sym(currency)}</span>
-                        <NumericInput
-                          mode="decimal"
-                          placeholder={localizeAmountInput('0.00', currency)}
-                          value={localizeAmountInput(item.price, currency)}
-                          onValueChange={v => handleUpdateItemPrice(item.id, v)}
-                          className="text-content"
-                          style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 13, fontWeight: 600, textAlign: 'right', padding: '6px 0' }}
-                        />
-                      </div>
-                      <button type="button" onClick={() => handleRemoveItem(item.id)} className="text-content-muted" style={{ background: 'none', border: 0, cursor: 'pointer', padding: 4 }}>
-                        <Trash2 size={15} />
-                      </button>
-                    </div>
-
-                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, alignItems: 'center' }}>
-                      <span className="text-content-faint" style={{ fontSize: 10.5, fontWeight: 600, textTransform: 'uppercase', marginRight: 4 }}>{t('costs.ticketSplitting')}</span>
-                      {people.map((p, pIdx) => {
-                        const active = item.participants.has(p.id)
-                        return (
-                          <button
-                            type="button"
-                            key={p.id}
-                            onClick={() => handleToggleItemParticipant(item.id, p.id)}
-                            className={active ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-muted border border-edge'}
-                            style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 999, fontSize: 11, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', border: active ? '1px solid var(--text-primary)' : undefined }}
-                          >
-                            {p.avatar_url
-                              ? <img src={p.avatar_url} alt="" style={{ width: 14, height: 14, borderRadius: '50%', objectFit: 'cover' }} />
-                              : <span style={{ width: 14, height: 14, borderRadius: '50%', background: SPLIT_COLORS[pIdx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 7, fontWeight: 700 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
-                            <span>{p.id === me ? t('costs.you') : p.username}</span>
-                          </button>
-                        )
-                      })}
-                    </div>
+  const splitSection = (
+    <DialogSection
+      label={t('costs.split') || 'Split'}
+      className={GROUP}
+      action={(
+        <Segmented<'equally' | 'custom' | 'ticket'>
+          label={t('costs.split') || 'Split'}
+          value={splitMode}
+          onChange={setSplitMode}
+          options={[
+            { value: 'equally', label: t('costs.splitEqually') || 'Equally' },
+            { value: 'custom', label: t('costs.splitCustom') || 'Custom' },
+            { value: 'ticket', label: t('costs.splitTicket') || 'Ticket' },
+          ]}
+        />
+      )}
+    >
+      {modeHint(t(`costs.splitHint.${splitMode}`))}
+      {splitMode === 'ticket' ? (
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-2">
+            {ticketItems.map((item) => (
+              <div key={item.id} className="flex flex-col gap-2 rounded-[10px] border border-edge-faint bg-surface-secondary p-2.5">
+                <div className="grid grid-cols-[minmax(0,1fr)_130px_auto] items-center gap-2">
+                  <input
+                    type="text"
+                    placeholder={t('costs.ticketItemName')}
+                    value={item.name}
+                    onChange={e => handleUpdateItemName(item.id, e.target.value)}
+                    className={INPUT}
+                  />
+                  <div className={AMOUNT_BOX}>
+                    <span className="text-content-faint" style={fs(12)}>{sym(currency)}</span>
+                    <NumericInput
+                      mode="decimal"
+                      placeholder={localizeAmountInput('0.00', currency)}
+                      value={localizeAmountInput(item.price, currency)}
+                      onValueChange={v => handleUpdateItemPrice(item.id, v)}
+                      className={AMOUNT_INPUT}
+                      style={fs(13, 'body')}
+                    />
                   </div>
+                  <Tooltip label={t('common.delete')}>
+                    <button type="button" onClick={() => handleRemoveItem(item.id)} aria-label={t('common.delete')} className="grid h-8 w-8 place-items-center rounded-full text-content-muted hover:text-danger">
+                      <Trash2 size={15} />
+                    </button>
+                  </Tooltip>
+                </div>
+
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="mr-1 font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>{t('costs.ticketSplitting')}</span>
+                  {people.map((p, pIdx) => {
+                    const active = item.participants.has(p.id)
+                    return (
+                      <button
+                        type="button"
+                        key={p.id}
+                        role="checkbox"
+                        aria-checked={active}
+                        onClick={() => handleToggleItemParticipant(item.id, p.id)}
+                        className={`inline-flex items-center gap-1.5 rounded-full border py-[3px] pl-1 pr-2 font-medium ${active ? 'border-[color:var(--text-primary)] bg-surface-card text-content' : 'border-edge bg-surface-secondary text-content-faint'}`}
+                        style={fs(11.5)}
+                      >
+                        {personFace(p, pIdx, active, 16)}
+                        <span>{nameOf(p)}</span>
+                        {active && <Check size={11} strokeWidth={3} />}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <AddRowButton onClick={handleAddEmptyItem}>{t('costs.ticketAddItem')}</AddRowButton>
+
+          {ticketItems.length > 0 && (
+            <div>
+              <div className="mb-1.5 font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>{t('costs.ticketShares')}</div>
+              <div className="flex flex-wrap gap-1.5">
+                {people.map(p => (
+                  <span key={p.id}>{badge(<><span className="font-medium text-content-muted">{nameOf(p)}</span><span>{money(ticketInfo.shares[p.id] || 0)}</span></>)}</span>
                 ))}
               </div>
-
-              <button type="button" onClick={handleAddEmptyItem} className="border border-dashed border-edge text-content-muted" style={{ padding: '8px 12px', borderRadius: 10, background: 'none', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
-                <Plus size={14} /> {t('costs.ticketAddItem')}
-              </button>
-
-              {ticketItems.length > 0 && (
-                <div className="bg-surface-secondary border border-edge" style={{ padding: 12, borderRadius: 10 }}>
-                  <div className="text-content" style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>{t('costs.ticketShares')}</div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                    {people.map(p => {
-                      const share = ticketInfo.shares[p.id] || 0
-                      return (
-                        <div key={p.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
-                          <span className="text-content-muted">{p.id === me ? t('costs.you') : p.username}</span>
-                          <span className="text-content" style={{ fontWeight: 600 }}>{sym(currency)}{share.toFixed(2)}</span>
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              )}
             </div>
-          ) : (
-            <>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-                {people.map((p, idx) => {
-                  const on = participants.has(p.id)
-                  return (
-                    <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
-                      <button type="button" onClick={() => toggleParticipant(p.id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
-                        {p.avatar_url
-                          ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
-                          : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
-                        <span className="text-content" style={{ fontSize: 14, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.id === me ? t('costs.you') : p.username}</span>
-                        {p.is_guest && <GuestBadge size="xs" />}
-                      </button>
-                      {splitMode === 'equally' ? (
-                        on ? (
-                          <span className="text-content" style={{ fontSize: 14, fontWeight: 600, textAlign: 'right', paddingRight: 10 }}>
-                            {sym(currency)}{(equalShares[p.id] || 0).toFixed(2)}
-                          </span>
-                        ) : (
-                          <span className="text-content-faint" style={{ fontSize: 12, textAlign: 'right', paddingRight: 10 }}>{t('costs.excluded')}</span>
-                        )
-                      ) : (
-                        on ? (
-                          <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
-                            <span className="text-content-faint" style={{ fontSize: 13 }}>{sym(currency)}</span>
-                            <input type="text" inputMode="decimal" placeholder={localizeAmountInput((placeholderShares[p.id] || 0).toFixed(2), currency)} value={localizeAmountInput(customAmounts[p.id] || '', currency)}
-                              onChange={e => handleCustomAmountChange(p.id, e.target.value)}
-                              className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
-                          </div>
-                        ) : (
-                          <button type="button" onClick={() => toggleParticipant(p.id)} className="text-content-faint" style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, textAlign: 'right' }}>{t('costs.tapToInclude')}</button>
-                        )
-                      )}
+          )}
+        </div>
+      ) : (
+        <>
+          <div className={PERSON_LIST}>
+            {people.map((p, idx) => {
+              const on = participants.has(p.id)
+              return (
+                <div key={p.id} className={PERSON_ROW}>
+                  <button type="button" role="checkbox" aria-checked={on} aria-label={nameOf(p)} onClick={() => toggleParticipant(p.id)}
+                    className="inline-flex min-w-0 items-center gap-2.5 text-left">
+                    {tick(on)}
+                    {personFace(p, idx, on)}
+                    {personName(p, on)}
+                    {p.is_guest && <GuestBadge size="xs" customTooltip />}
+                  </button>
+                  {!on ? excludedNote : splitMode === 'equally' ? (
+                    <span className="text-right">{badge(money(equalShares[p.id] || 0))}</span>
+                  ) : (
+                    <div className={AMOUNT_BOX}>
+                      <span className="text-content-faint" style={fs(13, 'body')}>{sym(currency)}</span>
+                      <input type="text" inputMode="decimal" placeholder={localizeAmountInput((placeholderShares[p.id] || 0).toFixed(2), currency)} value={localizeAmountInput(customAmounts[p.id] || '', currency)}
+                        onChange={e => handleCustomAmountChange(p.id, e.target.value)}
+                        className={AMOUNT_INPUT} style={fs(13.5, 'body')} />
                     </div>
-                  )
-                })}
-              </div>
-              <div style={{ marginTop: 10, fontSize: 12.5, display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
-                {splitMode === 'equally' ? (
-                  <span className="text-content-faint">
-                    {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: splitShareLabel(each, currency, fx, participants.size, base, sym, locale) })}
-                  </span>
-                ) : (
-                  <span style={{ fontWeight: 600, color: customBalanced ? '#16a34a' : '#dc2626' }}>
-                    {customBalanced
-                      ? t('costs.splitBalanced')
-                      : t(splitShortfall > 0 ? 'costs.splitSumUnder' : 'costs.splitSumOver', {
-                          sum: sym(currency) + splitSum.toFixed(2),
-                          total: sym(currency) + totalNum.toFixed(2),
-                          diff: sym(currency) + Math.abs(totalNum - splitSum).toFixed(2),
-                        })}
-                  </span>
-                )}
-              </div>
-            </>
-          )}
-        </div>
-
-        <div className={panelCls}>
-          <label className={labelCls} htmlFor="expense-note">{t('costs.note')}</label>
-          <textarea id="expense-note" value={note} onChange={e => setNote(e.target.value)} rows={2}
-            placeholder={t('costs.notePlaceholder')} maxLength={NOTE_MAX}
-            className={inputCls} style={{ borderRadius: 10, padding: '10px 13px', fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', outline: 'none', resize: 'vertical', minHeight: 68, width: '100%', boxSizing: 'border-box', fontFamily: 'inherit', lineHeight: 1.5 }} />
-        </div>
-
-        <div className={panelCls}>
-          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
-            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.receiptsTitle') || t('costs.receipts')}</label>
-            <label style={{ display: 'inline-flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>
-              <input
-                type="file"
-                multiple
-                accept="image/*,application/pdf"
-                style={{ display: 'none' }}
-                onChange={e => {
-                  handleReceiptFileSelect(e.target.files)
-                  e.target.value = ''
-                }}
-              />
-              <span className="bg-surface-card border border-edge text-content-muted hover:text-content transition-colors" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 999 }}>
-                <Plus size={13} /> {t('costs.attachReceipt')}
-              </span>
-            </label>
+                  )}
+                </div>
+              )
+            })}
           </div>
+          <div className="mt-2.5 flex flex-wrap gap-1.5">
+            {splitMode === 'equally' ? (
+              participants.size > 0 && <>
+                {badge(<><Users size={12} strokeWidth={2.4} />{participants.size}</>)}
+                {badge(t('costs.perPerson', { amount: splitShareLabel(each, currency, fx, participants.size, base, null, locale) }))}
+              </>
+            ) : customBalanced ? (
+              badge(<><Check size={12} strokeWidth={3} />{t('costs.splitBalanced')}</>, 'success')
+            ) : (
+              badge(<><AlertCircle size={12} strokeWidth={2.4} />{t(splitShortfall > 0 ? 'costs.splitSumUnder' : 'costs.splitSumOver', {
+                sum: money(splitSum),
+                total: money(totalNum),
+                diff: money(Math.abs(totalNum - splitSum)),
+              })}</>, 'danger')
+            )}
+          </div>
+        </>
+      )}
+    </DialogSection>
+  )
 
-          {uploadingReceipt && (
-            <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-caption, 1))', marginBottom: 8 }}>
-              {t('common.saving')}...
+  const receiptRow = 'flex items-center justify-between gap-2 rounded-[10px] border border-edge-faint bg-surface-secondary px-3 py-2'
+  const receiptsSection = (
+    <DialogSection
+      label={t('costs.receiptsTitle') || t('costs.receipts')}
+      className={GROUP}
+      action={(
+        <label className="inline-flex cursor-pointer items-center gap-1 rounded-full bg-surface-tertiary px-2.5 py-1 font-semibold text-content-muted hover:text-content" style={fs(11.5)}>
+          <input
+            type="file"
+            multiple
+            accept="image/*,application/pdf"
+            className="hidden"
+            onChange={e => {
+              handleReceiptFileSelect(e.target.files)
+              e.target.value = ''
+            }}
+          />
+          <Plus size={12} /> {t('costs.attach')}
+        </label>
+      )}
+    >
+      {uploadingReceipt && (
+        <div className="mb-2 text-content-faint" style={fs(12)}>{t('common.saving')}...</div>
+      )}
+      {receipts.length === 0 && pendingReceiptFiles.length === 0 ? (
+        <div className="py-1 text-content-faint" style={fs(12.5, 'body')}>{t('costs.noReceipts')}</div>
+      ) : (
+        <div className="flex flex-col gap-1.5">
+          {receipts.map((r, rIdx) => (
+            <div key={r.id} className={receiptRow}>
+              <button type="button" onClick={() => setModalPreviewReceipts({ receipts, initialIndex: rIdx })}
+                className="inline-flex min-w-0 items-center gap-2 text-left text-content hover:underline" style={fs(13, 'body')}>
+                <Receipt size={14} className="flex-shrink-0 text-content-faint" />
+                <span className="truncate">{r.original_name}</span>
+              </button>
+              <Tooltip label={t('costs.deleteReceipt')}>
+                <button type="button" onClick={() => handleRemoveReceipt(r.id)} aria-label={t('costs.deleteReceipt')} className="flex p-1 text-content-muted hover:text-danger">
+                  <Trash2 size={14} />
+                </button>
+              </Tooltip>
             </div>
-          )}
+          ))}
+          {pendingReceiptFiles.map((file, idx) => (
+            <div key={idx} className={receiptRow}>
+              <div className="inline-flex min-w-0 items-center gap-2" style={fs(13, 'body')}>
+                <Paperclip size={14} className="flex-shrink-0 text-content-faint" />
+                <span className="truncate text-content">{file.name}</span>
+              </div>
+              <Tooltip label={t('costs.deleteReceipt')}>
+                <button type="button" onClick={() => handleRemovePendingReceipt(idx)} aria-label={t('costs.deleteReceipt')} className="flex p-1 text-content-muted hover:text-danger">
+                  <Trash2 size={14} />
+                </button>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      )}
+    </DialogSection>
+  )
 
-          {receipts.length === 0 && pendingReceiptFiles.length === 0 ? (
-            <div className="text-content-faint" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', padding: '6px 0' }}>
-              {t('costs.noReceipts')}
+  return (
+    <>
+      <DialogShell
+        onClose={onClose}
+        labelledBy={titleId}
+        width="editor"
+        blocked={!!modalPreviewReceipts}
+        header={(
+          <DialogHeader
+            tile={<DialogTile><catInfo.Icon size={20} strokeWidth={1.9} style={{ color: catInfo.color }} /></DialogTile>}
+            tint={`color-mix(in srgb, ${catInfo.color} 10%, transparent)`}
+            labelId={titleId}
+            onClose={onClose}
+            eyebrow={editing ? t('costs.editExpense') : t('costs.addExpense')}
+            titleInput={{ value: name, onChange: setName, label: t('costs.whatFor'), placeholder: t('costs.namePlaceholder') }}
+            pills={(
+              <PillSelect
+                label={t('costs.category')}
+                value={cat}
+                onChange={setCat}
+                options={COST_CATEGORY_LIST.map(c => ({ value: c.key, label: t(c.labelKey), icon: <c.Icon size={14} style={{ color: c.color }} /> }))}
+              />
+            )}
+          />
+        )}
+        footer={(
+          <DialogFooter>
+            <FooterSpacer />
+            <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+            <DialogButton variant="primary" onClick={save} disabled={!valid || saving}>{editing ? t('common.save') : t('costs.addExpense')}</DialogButton>
+          </DialogFooter>
+        )}
+      >
+        <div className={`${GROUP} flex flex-col gap-3`}>
+        <div className={isMobile ? 'flex flex-col gap-5' : 'grid grid-cols-[minmax(0,1.3fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-3'}>
+          <EditorField label={t('costs.totalAmount')}>
+            <div className="flex items-center rounded-[10px] border border-edge bg-surface-input px-3" style={{ height: FIELD_H, opacity: isTicketMode ? 0.6 : 1 }}>
+              <span className="text-content-faint" style={fs(15, 'subtitle')}>{sym(currency)}</span>
+              <NumericInput mode="signed-decimal" placeholder={localizeAmountInput('0.00', currency)} value={localizeAmountInput(isTicketMode ? ticketInfo.total.toFixed(2) : total, currency)}
+                onValueChange={onTotalChange}
+                signToggleLabel={t('costs.toggleSign')}
+                disabled={isTicketMode}
+                className="w-full flex-1 border-0 bg-transparent pl-1.5 font-semibold text-content outline-none dark:bg-transparent" style={fs(15, 'subtitle')} />
             </div>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-              {receipts.map((r, rIdx) => (
-                <div key={r.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
-                  <button
-                    type="button"
-                    onClick={() => setModalPreviewReceipts({ receipts, initialIndex: rIdx })}
-                    className="text-content hover:underline"
-                    style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', fontFamily: 'inherit', fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}
-                  >
-                    <Receipt size={14} className="text-content-faint flex-shrink-0" />
-                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.original_name}</span>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => handleRemoveReceipt(r.id)}
-                    title={t('costs.deleteReceipt')}
-                    className="text-content-muted hover:text-red-500 transition-colors"
-                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
-                  >
-                    <Trash2 size={14} />
-                  </button>
-                </div>
-              ))}
-              {pendingReceiptFiles.map((file, idx) => (
-                <div key={idx} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '7px 11px', borderRadius: 10 }}>
-                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, minWidth: 0, fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>
-                    <Paperclip size={14} className="text-content-faint flex-shrink-0" />
-                    <span className="text-content" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.name}</span>
-                  </div>
-                  <button
-                    type="button"
-                    onClick={() => handleRemovePendingReceipt(idx)}
-                    title={t('costs.deleteReceipt')}
-                    className="text-content-muted hover:text-red-500 transition-colors"
-                    style={{ background: 'none', border: 0, padding: 3, cursor: 'pointer', display: 'flex', alignItems: 'center' }}
-                  >
-                    <Trash2 size={14} />
-                  </button>
-                </div>
-              ))}
-            </div>
-          )}
+          </EditorField>
+          <EditorField label={t('costs.currency')}>
+            <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
+              options={currenciesWith(currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+              style={{ width: '100%' }} />
+          </EditorField>
+          <EditorField label={t('costs.day')}>
+            <CustomDatePicker value={day} onChange={setDay} style={{ width: '100%' }} />
+          </EditorField>
         </div>
+
+        {fx && (
+          <div className="flex flex-wrap items-center gap-1.5 text-content-faint" style={fs(12, 'body')}>
+            {badge(formatMoney(totalNum, currency, locale))}
+            {fx.inTrip != null && <>
+              <span>→</span>
+              {badge(formatMoney(fx.inTrip, tripCur, locale))}
+            </>}
+            {fx.shown != null && <>
+              <span>≈</span>
+              {badge(formatMoney(fx.shown, base, locale))}
+              <span>{t('costs.liveRate')}</span>
+            </>}
+          </div>
+        )}
         </div>
-      </div>
+
+        {payerSection}
+        {splitSection}
+
+        {/* Side by side the two panels share one height. */}
+        <div className={isMobile ? 'flex flex-col gap-5' : 'grid grid-cols-2 gap-3'}>
+          <EditorField label={t('costs.note')} htmlFor="expense-note" className={GROUP}>
+            <textarea id="expense-note" value={note} onChange={e => setNote(e.target.value)} rows={3}
+              placeholder={t('costs.notePlaceholder')} maxLength={NOTE_MAX} className={`${TEXTAREA} resize-y`} />
+          </EditorField>
+          {receiptsSection}
+        </div>
+      </DialogShell>
 
       {modalPreviewReceipts && (
         <ReceiptPreviewModal
@@ -1966,6 +1984,6 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           onClose={() => setModalPreviewReceipts(null)}
         />
       )}
-    </Modal>
+    </>
   )
 }
diff --git a/client/src/components/Budget/CostsToolbar.tsx b/client/src/components/Budget/CostsToolbar.tsx
index ece9ae37b..abfd54f24 100644
--- a/client/src/components/Budget/CostsToolbar.tsx
+++ b/client/src/components/Budget/CostsToolbar.tsx
@@ -1,6 +1,30 @@
-import { Check, Plus, ScanLine } from 'lucide-react'
+import { useCallback, useRef, useState, type ReactNode } from 'react'
+import { Check, Download, Filter, Plus, RotateCcw, ScanLine, Search, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { TripMember } from './BudgetPanelMemberChips'
+import { Tooltip } from '../shared/Tooltip'
+import { POPOVER, POPOVER_CAPTION, POPOVER_DIVIDER, useDismissOnOutside } from '../Packing/packingPopoverStyles'
+import { PopoverItem } from '../Packing/PackingPopover'
+
+export type OwnerFilter = 'all' | 'mine' | 'owed'
+
+export interface CostsFilterProps {
+  query: string
+  onQuery: (query: string) => void
+  owner: OwnerFilter
+  onOwner: (owner: OwnerFilter) => void
+  /** The picked category, '' for all; the options start with that "all" entry. */
+  category: string
+  categoryOptions: { value: string; label: string; icon?: ReactNode }[]
+  onCategory: (category: string) => void
+  /** The picked day as YYYY-MM-DD, '' for all; the options start with that "all" entry. */
+  day: string
+  dayOptions: { value: string; label: string }[]
+  onDay: (day: string) => void
+  onResetFilters: () => void
+  onExport: () => void
+  canExport: boolean
+}
 
 interface CostsToolbarProps {
   /** The trip's span as a formatted range and its length in days; null for a trip without dates. */
@@ -15,24 +39,29 @@ interface CostsToolbarProps {
   onAddExpense: () => void
   /** Opens the receipt scan; left out when the AI model reads no images. */
   onScanReceipt?: () => void
+  /** Search, filters and export, the way the Transports and Bookings bars carry them. */
+  filters?: CostsFilterProps
 }
 
 const BODY_SIZE = 'calc(13px * var(--fs-scale-body, 1))'
+/** A 36 px control on the bar, in the card colour so it reads on the bar's tint. */
+const BAR_BTN = 'relative grid h-9 w-9 flex-none place-items-center rounded-[10px] bg-surface-card text-content-secondary hover:text-content disabled:cursor-default disabled:opacity-40'
 
 /**
  * The bar on top of the Costs tab, in the same shape as the one Transports,
- * Bookings, Lists and Files open with: the tab's name, then what the numbers
- * cover (the trip's days and who travels), and the two actions on the right.
+ * Bookings, Lists and Files open with: the tab's name and what the numbers
+ * cover, then how to narrow the ledger and the actions on the right.
  */
-export default function CostsToolbar({ dateMeta, people, me, colorFor, canEdit, canSettle, onSettleAll, onAddExpense, onScanReceipt }: CostsToolbarProps) {
+export default function CostsToolbar({ dateMeta, people, me, colorFor, canEdit, canSettle, onSettleAll, onAddExpense, onScanReceipt, filters }: CostsToolbarProps) {
   const { t } = useTranslation()
+  const searchRef = useRef<HTMLInputElement>(null)
   const chip = 'inline-flex items-center whitespace-nowrap rounded-full bg-surface-card px-3 py-1.5 font-medium text-content-muted shadow-sm'
-  const button = 'inline-flex items-center gap-1.5 rounded-[10px] border-0 px-[14px] py-[9px] font-medium hover:opacity-[0.88]'
+  const button = 'inline-flex h-9 items-center gap-1.5 rounded-[10px] border-0 px-3.5 font-medium hover:opacity-[0.88]'
 
   return (
-    <div className="mb-4 flex flex-wrap items-center gap-4 rounded-[18px] bg-surface-tertiary py-3.5 pl-[22px] pr-4">
+    <div className="mb-4 flex flex-wrap items-center gap-2.5 rounded-[18px] bg-surface-tertiary py-3 pl-[22px] pr-3">
       <h2 className="m-0 shrink-0 text-subtitle font-semibold tracking-[-0.01em] text-content">{t('trip.tabs.budget')}</h2>
-      <div className="h-[22px] w-px shrink-0 bg-edge-faint" />
+      <div className="mx-1.5 h-[22px] w-px shrink-0 bg-edge-faint" />
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5" style={{ fontSize: BODY_SIZE }}>
         {dateMeta && (
           <span className={`${chip} gap-3`}>
@@ -59,23 +88,117 @@ export default function CostsToolbar({ dateMeta, people, me, colorFor, canEdit,
           <b className="text-content">{t('costs.travelers', { count: people.length })}</b>
         </span>
       </div>
-      {canEdit && (
-        <div className="ml-auto flex shrink-0 flex-wrap gap-1.5" style={{ fontSize: BODY_SIZE }}>
-          <button type="button" onClick={onSettleAll} disabled={!canSettle}
-            className={`${button} bg-surface-card text-content disabled:cursor-default disabled:opacity-40`}>
-            <Check size={14} strokeWidth={2.5} />
-            {t('costs.settleUp')}
-          </button>
-          {onScanReceipt && (
-            <button type="button" onClick={onScanReceipt} className={`${button} bg-surface-card text-content`}>
-              <ScanLine size={14} strokeWidth={2.5} />
-              {t('costs.scan.button')}
+
+      {filters && (
+        <>
+          <label className="flex h-9 w-[200px] items-center gap-2 rounded-[10px] bg-surface-card px-3 text-content-faint focus-within:ring-2 focus-within:ring-[color:var(--text-primary)]">
+            <Search size={14} strokeWidth={2} className="flex-none" />
+            <input
+              ref={searchRef}
+              value={filters.query}
+              onChange={e => filters.onQuery(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Escape') { filters.onQuery(''); searchRef.current?.blur() } }}
+              placeholder={t('costs.searchPlaceholder')}
+              aria-label={t('common.search')}
+              className="min-w-0 flex-1 border-0 bg-transparent text-content outline-none placeholder:text-content-faint dark:bg-transparent"
+              style={{ fontSize: BODY_SIZE }}
+            />
+            {filters.query && (
+              <Tooltip label={t('common.clear')}>
+                <button type="button" onClick={() => filters.onQuery('')} aria-label={t('common.clear')} className="flex-none text-content-faint hover:text-content"><X size={13} /></button>
+              </Tooltip>
+            )}
+          </label>
+          <FilterMenu {...filters} />
+          <Tooltip label={t('budget.exportCsv')}>
+            <button type="button" onClick={filters.onExport} disabled={!filters.canExport} aria-label={t('budget.exportCsv')} className={BAR_BTN}>
+              <Download size={15} strokeWidth={2} />
             </button>
+          </Tooltip>
+        </>
+      )}
+
+      {canEdit && (
+        <>
+          {filters && <span className="mx-0.5 h-[22px] w-px flex-none bg-edge-faint" />}
+          <div className="flex shrink-0 flex-wrap gap-1.5" style={{ fontSize: BODY_SIZE }}>
+            <button type="button" onClick={onSettleAll} disabled={!canSettle}
+              className={`${button} bg-surface-card text-content disabled:cursor-default disabled:opacity-40`}>
+              <Check size={14} strokeWidth={2.5} />
+              {t('costs.settleUp')}
+            </button>
+            {onScanReceipt && (
+              <button type="button" onClick={onScanReceipt} className={`${button} bg-surface-card text-content`}>
+                <ScanLine size={14} strokeWidth={2.5} />
+                {t('costs.scan.button')}
+              </button>
+            )}
+            <button type="button" onClick={onAddExpense} className={`${button} bg-accent text-accent-text`}>
+              <Plus size={14} strokeWidth={2.5} />
+              {t('costs.addExpense')}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+/** Whose expenses, which category and which day, in one place; the button counts what is switched on. */
+function FilterMenu(f: CostsFilterProps) {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  const close = useCallback(() => setOpen(false), [])
+  useDismissOnOutside(ref, open, close)
+  const active = (f.owner !== 'all' ? 1 : 0) + (f.category ? 1 : 0) + (f.day ? 1 : 0)
+  const owners: [OwnerFilter, string][] = [['all', t('costs.filter.all')], ['mine', t('costs.filter.mine')], ['owed', t('costs.filter.owed')]]
+
+  return (
+    <div ref={ref} className="relative flex-none">
+      <Tooltip label={t('reservations.filter')}>
+        <button type="button" onClick={() => setOpen(o => !o)} aria-expanded={open} aria-label={t('reservations.filter')} className={`${BAR_BTN} ${active ? 'text-content' : ''}`}>
+          <Filter size={15} strokeWidth={2} />
+          {active > 0 && <span className="absolute -right-1 -top-1 grid h-4 min-w-4 place-items-center rounded-full bg-accent px-1 font-geist font-bold text-accent-text" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))' }}>{active}</span>}
+        </button>
+      </Tooltip>
+      {open && (
+        <div role="menu" onKeyDown={e => { if (e.key === 'Escape') close() }} className="absolute right-0 top-11 z-30" style={{ ...POPOVER, width: 310 }}>
+          <div className="mx-1.5 mb-1 mt-1.5 flex rounded-[10px] bg-surface-tertiary p-[3px]">
+            {owners.map(([o, label]) => (
+              <button key={o} type="button" onClick={() => f.onOwner(o)} aria-pressed={f.owner === o}
+                className={`flex-1 rounded-[8px] py-1 font-medium ${f.owner === o ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted hover:text-content'}`}
+                style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>
+                {label}
+              </button>
+            ))}
+          </div>
+
+          <div style={POPOVER_DIVIDER} />
+          <div style={POPOVER_CAPTION}>{t('costs.category')}</div>
+          <div className="max-h-[220px] overflow-y-auto">
+            {f.categoryOptions.map(o => (
+              <PopoverItem key={o.value || 'all'} active={f.category === o.value} onClick={() => f.onCategory(o.value)}
+                icon={o.icon ?? null} label={o.label}
+                trailing={f.category === o.value ? <Check size={13} className="text-content-muted" /> : undefined} />
+            ))}
+          </div>
+
+          <div style={POPOVER_DIVIDER} />
+          <div style={POPOVER_CAPTION}>{t('costs.day')}</div>
+          <div className="max-h-[220px] overflow-y-auto">
+            {f.dayOptions.map(o => (
+              <PopoverItem key={o.value || 'all'} active={f.day === o.value} onClick={() => f.onDay(o.value)} icon={null} label={o.label}
+                trailing={f.day === o.value ? <Check size={13} className="text-content-muted" /> : undefined} />
+            ))}
+          </div>
+
+          {active > 0 && (
+            <>
+              <div style={POPOVER_DIVIDER} />
+              <PopoverItem icon={<RotateCcw size={14} />} label={t('reservations.resetFilters')} onClick={() => { f.onResetFilters(); close() }} />
+            </>
           )}
-          <button type="button" onClick={onAddExpense} className={`${button} bg-accent text-accent-text`}>
-            <Plus size={14} strokeWidth={2.5} />
-            {t('costs.addExpense')}
-          </button>
         </div>
       )}
     </div>
diff --git a/client/src/components/Budget/ReceiptScanModal.test.tsx b/client/src/components/Budget/ReceiptScanModal.test.tsx
index 536730e41..54f1d0194 100644
--- a/client/src/components/Budget/ReceiptScanModal.test.tsx
+++ b/client/src/components/Budget/ReceiptScanModal.test.tsx
@@ -127,7 +127,10 @@ describe('Scan receipt', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
     await openDialog()
-    fireEvent.click(screen.getByRole('dialog').parentElement!)
+    // Only a press that starts and ends on the backdrop closes it.
+    const backdrop = screen.getByRole('dialog').parentElement!
+    fireEvent.mouseDown(backdrop)
+    fireEvent.click(backdrop)
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     expect(dialog).not.toBeInTheDocument()
   })
diff --git a/client/src/components/Budget/ReceiptScanModal.tsx b/client/src/components/Budget/ReceiptScanModal.tsx
index 36a192a7e..afea374be 100644
--- a/client/src/components/Budget/ReceiptScanModal.tsx
+++ b/client/src/components/Budget/ReceiptScanModal.tsx
@@ -1,7 +1,9 @@
 import { createPortal } from 'react-dom'
-import { useRef, useState } from 'react'
+import { useId, useRef, useState } from 'react'
 import { ScanLine, X } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 import { RECEIPT_PHOTO_ACCEPT, type ReceiptScan } from './useReceiptScan'
 
 /**
@@ -13,6 +15,8 @@ export function ReceiptScanModal({ scan }: { scan: ReceiptScan }) {
   const { t } = useTranslation()
   const inputRef = useRef<HTMLInputElement>(null)
   const [dragOver, setDragOver] = useState(false)
+  const isPhone = useIsPhone()
+  const labelId = useId()
   if (!scan.isOpen) return null
 
   const onDrop = (e: React.DragEvent) => {
@@ -21,6 +25,60 @@ export function ReceiptScanModal({ scan }: { scan: ReceiptScan }) {
     scan.choose(Array.from(e.dataTransfer.files))
   }
 
+  const picker = (
+    <input ref={inputRef} type="file" accept={RECEIPT_PHOTO_ACCEPT} hidden data-testid="receipt-scan-input"
+      onChange={(e) => { scan.choose(e.target.files ? Array.from(e.target.files) : []); e.target.value = '' }} />
+  )
+  const dropHandlers = {
+    onDragOver: (e: React.DragEvent) => { e.preventDefault(); setDragOver(true) },
+    onDragEnter: (e: React.DragEvent) => { e.preventDefault(); setDragOver(true) },
+    onDragLeave: (e: React.DragEvent) => { if (e.target === e.currentTarget) setDragOver(false) },
+    onDrop,
+  }
+
+  // The desktop opens it in the planner's dialog, like the costs editors; the phone keeps its own.
+  if (!isPhone) return (
+    <DialogShell
+      onClose={scan.close}
+      labelledBy={labelId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><ScanLine size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={scan.close}
+          title={t('costs.scan.title')}
+          sub={t('costs.scan.accepted')}
+          subWraps
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={scan.close}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={scan.start} disabled={!scan.photo || scan.starting}>
+            {scan.starting ? t('costs.scan.reading') : t('costs.scan.start')}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    >
+      {picker}
+      <button type="button" onClick={() => inputRef.current?.click()} {...dropHandlers}
+        className={`flex min-h-[132px] w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed px-4 py-5 text-center transition-colors ${dragOver ? 'border-content-muted bg-surface-tertiary' : 'border-edge bg-surface-secondary hover:border-content-faint'}`}>
+        <span className="pointer-events-none grid h-10 w-10 place-items-center rounded-full bg-surface-card shadow-sm">
+          <ScanLine size={18} strokeWidth={1.9} className={dragOver ? 'text-content' : 'text-content-muted'} />
+        </span>
+        <span className={`pointer-events-none break-all font-semibold ${scan.photo ? 'text-content' : 'text-content-muted'}`} style={fs(13, 'body')}>
+          {dragOver ? t('costs.scan.dropActive') : scan.photo ? scan.photo.name : t('costs.scan.dropHere')}
+        </span>
+      </button>
+      {scan.error && (
+        <div role="alert" className="rounded-[12px] bg-danger-soft px-3 py-2.5 text-danger" style={fs(12, 'body')}>{scan.error}</div>
+      )}
+    </DialogShell>
+  )
+
   return createPortal(
     <div role="presentation" className="fixed inset-0 z-[99999] flex items-center justify-center bg-black/40 p-4" onClick={(e) => { if (e.target === e.currentTarget) scan.close() }}>
       <div role="dialog" aria-modal="true" aria-label={t('costs.scan.title')} className="flex max-h-[90vh] w-full max-w-[540px] flex-col rounded-2xl bg-surface-card p-6 shadow-2xl">
diff --git a/client/src/components/Budget/expenseFx.ts b/client/src/components/Budget/expenseFx.ts
index 3619bed06..87f21b2a7 100644
--- a/client/src/components/Budget/expenseFx.ts
+++ b/client/src/components/Budget/expenseFx.ts
@@ -66,10 +66,10 @@ export function splitShareLabel(
   fx: ExpenseFx | null,
   participants: number,
   base: string,
-  sym: (currency: string) => string,
+  sym: ((currency: string) => string) | null,
   locale: string,
 ): string {
-  const entered = sym(currency) + each.toFixed(2)
+  const entered = sym ? sym(currency) + each.toFixed(2) : formatMoney(each, currency, locale)
   const whole = fx ? (fx.shown ?? fx.inTrip) : null
   if (whole == null || participants <= 0) return entered
   return `${entered} → ${formatMoney(whole / participants, base, locale)}`
diff --git a/client/src/components/Collab/CollabChat.test.tsx b/client/src/components/Collab/CollabChat.test.tsx
index 2ed6657d6..2b1230be5 100644
--- a/client/src/components/Collab/CollabChat.test.tsx
+++ b/client/src/components/Collab/CollabChat.test.tsx
@@ -411,7 +411,7 @@ describe('CollabChat', () => {
     await screen.findByText('Reply to me');
     // Hover action buttons are always in DOM but hidden via pointer-events: none
     // Use fireEvent to bypass CSS pointer-events restrictions
-    const replyBtn = screen.getByTitle('Reply');
+    const replyBtn = screen.getByRole('button', { name: 'Reply' });
     fireEvent.click(replyBtn);
     // Reply preview banner renders <strong>{username}</strong> — unique to the banner
     await waitFor(() => {
@@ -436,7 +436,7 @@ describe('CollabChat', () => {
     render(<CollabChat {...defaultProps} />);
     await screen.findByText('Cancel reply test');
     // Click reply button to show preview (bypassing pointer-events: none)
-    fireEvent.click(screen.getByTitle('Reply'));
+    fireEvent.click(screen.getByRole('button', { name: 'Reply' }));
     // Wait for reply preview <strong> to appear
     await waitFor(() => {
       const aliceEls = screen.queryAllByText('alice');
@@ -621,7 +621,7 @@ describe('CollabChat', () => {
     render(<CollabChat {...defaultProps} />);
     await screen.findByText('Delete me');
     // Delete button is in a hover-actions div with pointer-events: none — use fireEvent
-    const deleteBtn = screen.getByTitle('Delete');
+    const deleteBtn = screen.getByRole('button', { name: 'Delete' });
     fireEvent.click(deleteBtn);
     // handleDelete uses a 400ms setTimeout before calling the API
     await waitFor(
diff --git a/client/src/components/Collab/CollabChat.tsx b/client/src/components/Collab/CollabChat.tsx
index a1badfd38..7044e8ab0 100644
--- a/client/src/components/Collab/CollabChat.tsx
+++ b/client/src/components/Collab/CollabChat.tsx
@@ -33,7 +33,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           <div style={{
             display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
             padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
-            borderLeft: '3px solid #007AFF', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)',
+            borderLeft: '3px solid var(--accent)', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)',
           }}>
             <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
             <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
@@ -87,8 +87,8 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           {canEdit && (
             <button type="button" onClick={handleSend} disabled={(!text.trim() && !imageFiles.length) || sending} style={{
               width: 34, height: 34, borderRadius: '50%', border: 'none',
-              background: text.trim() || imageFiles.length ? '#007AFF' : 'var(--border-primary)',
-              color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              background: text.trim() || imageFiles.length ? 'var(--accent)' : 'var(--border-primary)',
+              color: text.trim() || imageFiles.length ? 'var(--accent-text)' : 'var(--text-faint)', display: 'flex', alignItems: 'center', justifyContent: 'center',
               cursor: text.trim() || imageFiles.length ? 'pointer' : 'default', flexShrink: 0,
               transition: 'background 0.15s',
             }}>
diff --git a/client/src/components/Collab/CollabChatLinkPreview.tsx b/client/src/components/Collab/CollabChatLinkPreview.tsx
index 1f201750e..0d123f248 100644
--- a/client/src/components/Collab/CollabChatLinkPreview.tsx
+++ b/client/src/components/Collab/CollabChatLinkPreview.tsx
@@ -43,8 +43,8 @@ export function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) {
   return (
     <a href={url} target="_blank" rel="noopener noreferrer" style={{
       display: 'block', textDecoration: 'none', marginTop: 6, borderRadius: 12, overflow: 'hidden',
-      border: own ? '1px solid rgba(255,255,255,0.15)' : '1px solid var(--border-faint)',
-      background: own ? 'rgba(255,255,255,0.1)' : 'var(--bg-secondary)',
+      border: own ? '1px solid color-mix(in srgb, var(--accent-text) 15%, transparent)' : '1px solid var(--border-faint)',
+      background: own ? 'color-mix(in srgb, var(--accent-text) 10%, transparent)' : 'var(--bg-secondary)',
       maxWidth: 280, transition: 'opacity 0.15s',
     }}
       onMouseEnter={e => e.currentTarget.style.opacity = '0.85'}
@@ -56,17 +56,17 @@ export function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) {
       )}
       <div style={{ padding: '8px 10px' }}>
         {domain && (
-          <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: own ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
+          <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: own ? 'color-mix(in srgb, var(--accent-text) 55%, transparent)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
             {data.site_name || domain}
           </div>
         )}
         {data.title && (
-          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: own ? '#fff' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: own ? 'var(--accent-text)' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
             {data.title}
           </div>
         )}
         {data.description && (
-          <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: own ? 'rgba(255,255,255,0.7)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+          <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: own ? 'color-mix(in srgb, var(--accent-text) 75%, transparent)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
             {data.description}
           </div>
         )}
diff --git a/client/src/components/Collab/CollabChatMessages.test.tsx b/client/src/components/Collab/CollabChatMessages.test.tsx
index ac6365457..83a923c70 100644
--- a/client/src/components/Collab/CollabChatMessages.test.tsx
+++ b/client/src/components/Collab/CollabChatMessages.test.tsx
@@ -158,7 +158,7 @@ describe('ChatMessages', () => {
       [buildMsg({ id: 1, text: 'one' }), buildMsg({ id: 2, text: 'two' })],
       { hoveredId: 1 },
     )
-    const actions = screen.getAllByTitle('collab.chat.reply').map(b => b.parentElement!)
+    const actions = screen.getAllByRole('button', { name: 'collab.chat.reply' }).map(b => b.parentElement!)
     expect(actions[0].getAttribute('style')).toContain('opacity: 1')
     expect(actions[1].getAttribute('style')).toContain('opacity: 0')
   })
@@ -243,7 +243,7 @@ describe('ChatMessages', () => {
     const { setReplyTo, handleDelete } = renderMessages([
       buildMsg({ id: 3, user_id: 1, username: 'me', text: 'mine' }),
     ])
-    const replyBtn = screen.getByTitle('collab.chat.reply')
+    const replyBtn = screen.getByRole('button', { name: 'collab.chat.reply' })
     fireEvent.mouseEnter(replyBtn)
     expect(replyBtn.style.transform).toBe('scale(1.2)')
     fireEvent.mouseLeave(replyBtn)
@@ -251,7 +251,7 @@ describe('ChatMessages', () => {
     fireEvent.click(replyBtn)
     expect(setReplyTo).toHaveBeenCalledWith(expect.objectContaining({ id: 3 }))
 
-    const deleteBtn = screen.getByTitle('common.delete')
+    const deleteBtn = screen.getByRole('button', { name: 'common.delete' })
     fireEvent.mouseEnter(deleteBtn)
     expect(deleteBtn.style.background).toBe('rgb(239, 68, 68)')
     fireEvent.mouseLeave(deleteBtn)
diff --git a/client/src/components/Collab/CollabChatMessages.tsx b/client/src/components/Collab/CollabChatMessages.tsx
index a39e676a8..3ac899bc9 100644
--- a/client/src/components/Collab/CollabChatMessages.tsx
+++ b/client/src/components/Collab/CollabChatMessages.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { Trash2, Reply, ChevronUp } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
 import { URL_REGEX } from './CollabChat.constants'
 import { formatTime, formatDateSeparator, shouldShowDateSeparator } from './CollabChat.helpers'
 import { MessageText } from './CollabChatMessageText'
@@ -52,14 +53,15 @@ export function ChatMessages(props: any) {
                 <React.Fragment key={msg.id}>
                   {showDate && (
                     <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
-                      <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+                      <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-card)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
                         {formatDateSeparator(msg.created_at, t)}
                       </span>
                     </div>
                   )}
                   <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0' }}>
-                    <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontStyle: 'italic' }}>
-                      {msg.username} {t('collab.chat.deletedMessage') || 'deleted a message'} · {formatTime(msg.created_at, is12h)}
+                    <span style={{ display: 'inline-flex', gap: 6, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontStyle: 'italic' }}>
+                      <span>{msg.username} {t('collab.chat.deletedMessage') || 'deleted a message'}</span>
+                      <span style={{ fontStyle: 'normal' }}>{formatTime(msg.created_at, is12h)}</span>
                     </span>
                   </div>
                 </React.Fragment>
@@ -78,7 +80,7 @@ export function ChatMessages(props: any) {
                   <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
                     <span style={{
                       fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)',
-                      background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99,
+                      background: 'var(--bg-card)', padding: '3px 12px', borderRadius: 99,
                       letterSpacing: 0.3, textTransform: 'uppercase',
                     }}>
                       {formatDateSeparator(msg.created_at, t)}
@@ -144,8 +146,10 @@ export function ChatMessages(props: any) {
                         </div>
                       ) : (
                         <div style={{
-                          background: own ? '#007AFF' : 'var(--bg-secondary)',
-                          color: own ? '#fff' : 'var(--text-primary)',
+                          // Own messages in the accent, the others as cards on the tinted panel.
+                          background: own ? 'var(--accent)' : 'var(--bg-card)',
+                          color: own ? 'var(--accent-text)' : 'var(--text-primary)',
+                          border: own ? 'none' : '1px solid var(--border-faint)',
                           borderRadius: br, padding: hasReply ? '4px 4px 8px 4px' : '8px 14px',
                           fontSize: 'calc(14px * var(--fs-scale-body, 1))', lineHeight: 1.4, wordBreak: 'break-word', whiteSpace: 'pre-wrap',
                         }}>
@@ -153,7 +157,7 @@ export function ChatMessages(props: any) {
                           {hasReply && (
                             <div style={{
                               padding: '5px 10px', marginBottom: 4, borderRadius: 12,
-                              background: own ? 'rgba(255,255,255,0.15)' : 'var(--bg-tertiary)',
+                              background: own ? 'color-mix(in srgb, var(--accent-text) 15%, transparent)' : 'var(--bg-secondary)',
                               fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.3,
                             }}>
                               <div style={{ fontWeight: 600, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', opacity: 0.7, marginBottom: 1 }}>
@@ -174,16 +178,17 @@ export function ChatMessages(props: any) {
                         </div>
                       )}
 
-                      {/* Hover actions */}
+                      {/* Hover actions: above the reactions of the message before, which reach into this row */}
                       <div style={{
-                        position: 'absolute', top: -14,
+                        position: 'absolute', top: -14, zIndex: 3,
                         display: 'flex', gap: 2,
                         opacity: hoveredId === msg.id ? 1 : 0,
                         pointerEvents: hoveredId === msg.id ? 'auto' : 'none',
                         transition: 'opacity .1s',
                         ...(own ? { left: -6 } : { right: -6 }),
                       }}>
-                        <button type="button" onClick={() => setReplyTo(msg)} title={t('collab.chat.reply')} style={{
+                        <Tooltip label={t('collab.chat.reply')}>
+                        <button type="button" onClick={() => setReplyTo(msg)} aria-label={t('collab.chat.reply')} style={{
                           width: 24, height: 24, borderRadius: '50%', border: 'none',
                           background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                           cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
@@ -194,8 +199,10 @@ export function ChatMessages(props: any) {
                         >
                           <Reply size={11} />
                         </button>
+                        </Tooltip>
                         {own && canEdit && (
-                          <button type="button" onClick={() => handleDelete(msg.id)} title={t('common.delete')} style={{
+                          <Tooltip label={t('common.delete')}>
+                          <button type="button" onClick={() => handleDelete(msg.id)} aria-label={t('common.delete')} style={{
                             width: 24, height: 24, borderRadius: '50%', border: 'none',
                             background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                             cursor: 'pointer', color: 'var(--accent-text)', padding: 0,
@@ -206,6 +213,7 @@ export function ChatMessages(props: any) {
                           >
                             <Trash2 size={11} />
                           </button>
+                          </Tooltip>
                         )}
                       </div>
                     </div>
diff --git a/client/src/components/Collab/CollabChatSmall.test.tsx b/client/src/components/Collab/CollabChatSmall.test.tsx
index 2437ee9c7..205c8a2c9 100644
--- a/client/src/components/Collab/CollabChatSmall.test.tsx
+++ b/client/src/components/Collab/CollabChatSmall.test.tsx
@@ -132,7 +132,7 @@ describe('WebsiteThumbnail', () => {
     render(<WebsiteThumbnail url="https://www.liketrek.com/docs" tripId={4} color="#000" />)
 
     expect(screen.getByText('liketrek.com')).toBeInTheDocument()
-    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('title', 'TREK'))
+    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('aria-label', 'TREK'))
     expect(linkPreview).toHaveBeenCalledWith(4, 'https://www.liketrek.com/docs')
   })
 
@@ -154,14 +154,15 @@ describe('WebsiteThumbnail', () => {
 
     expect(screen.getByText('blocked.example')).toBeInTheDocument()
     await waitFor(() => expect(linkPreview).toHaveBeenCalled())
-    expect(screen.getByRole('link')).toHaveAttribute('title', 'https://blocked.example/a')
+    expect(screen.getByRole('link')).toHaveAttribute('aria-label', 'https://blocked.example/a')
   })
 
   it('FE-W4CCS-017: a url that is not http(s) is shown but neither linked nor previewed', async () => {
-    const { unmount } = render(<WebsiteThumbnail url="javascript:alert(1)" tripId={4} color="#000" />)
+    const { unmount, container } = render(<WebsiteThumbnail url="javascript:alert(1)" tripId={4} color="#000" />)
 
     expect(screen.queryByRole('link')).toBeNull()
-    expect(screen.getByTitle('javascript:alert(1)')).toBeInTheDocument()
+    fireEvent.mouseEnter(container.firstElementChild!)
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('javascript:alert(1)')
     unmount()
 
     render(<WebsiteThumbnail url="not a url" tripId={4} color="#000" />)
@@ -174,13 +175,13 @@ describe('WebsiteThumbnail', () => {
     linkPreview.mockResolvedValue({ title: 'Trip 4', image: null })
     const shared = 'https://example.com/shared'
     const first = render(<WebsiteThumbnail url={shared} tripId={4} color="#000" />)
-    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('title', 'Trip 4'))
+    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('aria-label', 'Trip 4'))
     first.unmount()
 
     linkPreview.mockResolvedValue({ title: 'Trip 9', image: null })
     render(<WebsiteThumbnail url={shared} tripId={9} color="#000" />)
 
-    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('title', 'Trip 9'))
+    await waitFor(() => expect(screen.getByRole('link')).toHaveAttribute('aria-label', 'Trip 9'))
     expect(linkPreview).toHaveBeenCalledTimes(2)
     expect(linkPreview).toHaveBeenLastCalledWith(9, shared)
   })
diff --git a/client/src/components/Collab/CollabLinks.test.tsx b/client/src/components/Collab/CollabLinks.test.tsx
index ff648ad8d..3b41be0aa 100644
--- a/client/src/components/Collab/CollabLinks.test.tsx
+++ b/client/src/components/Collab/CollabLinks.test.tsx
@@ -55,7 +55,7 @@ describe('CollabLinks', () => {
     render(<CollabLinks tripId={1} />);
     const heading = await screen.findByRole('heading', { level: 3 });
     expect(heading).toHaveTextContent(/links/i);
-    expect(heading).toHaveStyle({ textTransform: 'uppercase' });
+    expect(heading).toHaveClass('uppercase');
     expect(screen.getByRole('button', { name: /add link|collab\.links\.add/i })).toBeInTheDocument();
   });
 
@@ -75,7 +75,7 @@ describe('CollabLinks', () => {
     render(<CollabLinks tripId={1} />);
     await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
     expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/^link$|^reservations\.urlLabel$|https|collab\.links\.urlPlaceholder/i)).toBeInTheDocument();
   });
 
   it('FE-COMP-LINKS-005: saving posts the link and closes the form', async () => {
@@ -90,7 +90,7 @@ describe('CollabLinks', () => {
     render(<CollabLinks tripId={1} />);
     await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
     await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
-    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.type(screen.getByLabelText(/^link$|^reservations\.urlLabel$|https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
     await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
 
     await waitFor(() => expect(posted).toEqual({ title: 'Ferry timetable', url: 'https://ferries.example/timetable' }));
@@ -106,7 +106,7 @@ describe('CollabLinks', () => {
     render(<CollabLinks tripId={1} />);
     await user.click(await screen.findByRole('button', { name: /add link|collab\.links\.add/i }));
     await user.type(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i), 'Ferry timetable');
-    await user.type(screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
+    await user.type(screen.getByLabelText(/^link$|^reservations\.urlLabel$|https|collab\.links\.urlPlaceholder/i), 'https://ferries.example/timetable');
     await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
 
     expect(await screen.findByLabelText(/link title|collab\.links\.titlePlaceholder/i)).toHaveValue('Ferry timetable');
@@ -138,7 +138,7 @@ describe('CollabLinks', () => {
     expect(title).toHaveValue('Ferry timetable');
     await user.clear(title);
     await user.type(title, 'Ferry timetable 2026');
-    const url = screen.getByLabelText(/https|collab\.links\.urlPlaceholder/i);
+    const url = screen.getByLabelText(/^link$|^reservations\.urlLabel$|https|collab\.links\.urlPlaceholder/i);
     expect(url).toHaveValue('https://ferries.example/timetable');
     await user.clear(url);
     await user.type(url, 'https://ferries.example/2026');
@@ -198,7 +198,7 @@ describe('CollabLinks', () => {
     await waitFor(() => expect(chip.querySelector('img')).toBeNull());
 
     await user.click(screen.getByRole('button', { name: /edit link|collab\.links\.edit/i }));
-    const url = await screen.findByLabelText(/https|collab\.links\.urlPlaceholder/i);
+    const url = await screen.findByLabelText(/^link$|^reservations\.urlLabel$|https|collab\.links\.urlPlaceholder/i);
     await user.clear(url);
     await user.type(url, 'https://new.example/page');
     await user.click(screen.getByRole('button', { name: /save link|collab\.links\.save/i }));
diff --git a/client/src/components/Collab/CollabLinks.tsx b/client/src/components/Collab/CollabLinks.tsx
index fbe688143..d190bb961 100644
--- a/client/src/components/Collab/CollabLinks.tsx
+++ b/client/src/components/Collab/CollabLinks.tsx
@@ -1,6 +1,10 @@
-import { CSSProperties, FormEvent, useEffect, useRef, useState } from 'react'
+import { cloneElement, CSSProperties, FormEvent, ReactElement, useEffect, useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { ExternalLink, Link2, Pencil, Pin, Plus, Trash2, X } from 'lucide-react'
+import CollabPanelHead, { HEAD_ACTION } from './CollabPanelHead'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from '../shared/DialogShell'
+import { EditorField, INPUT } from '../shared/dialogParts'
+import { useIsPhone } from '../../mobile/useIsPhone'
 import { collabApi } from '../../api/client'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
@@ -8,6 +12,7 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import ConfirmDialog from '../shared/ConfirmDialog'
 import EmptyState from '../shared/EmptyState'
+import { Tooltip } from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 
 const FONT = "var(--font-system)"
@@ -32,6 +37,11 @@ function LinkIcon({ url }: { url: string }) {
 }
 
 /** The part of the address worth a chip's width: the host, without a leading www. */
+/** The desktop names a chip's action in the shared tooltip; the phone keeps its plain title. */
+function ChipTip({ label, phone, children }: { label: string; phone: boolean; children: ReactElement<{ title?: string }> }) {
+  return phone ? cloneElement(children, { title: label }) : <Tooltip label={label}>{children}</Tooltip>
+}
+
 function hostOf(url: string): string {
   try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
 }
@@ -48,10 +58,12 @@ function LinkModal({ link, onClose, onSave }: { link?: CollabLink; onClose: () =
   const [title, setTitle] = useState(link?.title ?? '')
   const [url, setUrl] = useState(link?.url ?? '')
   const [busy, setBusy] = useState(false)
+  const isPhone = useIsPhone()
+  const labelId = useId()
   const valid = title.trim().length > 0 && url.trim().length > 0
 
-  const submit = async (event: FormEvent) => {
-    event.preventDefault()
+  const submit = async (event?: FormEvent) => {
+    event?.preventDefault()
     if (!valid || busy) return
     setBusy(true)
     try {
@@ -74,6 +86,44 @@ function LinkModal({ link, onClose, onSave }: { link?: CollabLink; onClose: () =
     color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4,
   }
 
+  // The desktop names the link in the head band like every planner dialog.
+  if (!isPhone) return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="narrow"
+      onSubmit={submit}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Link2 size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          eyebrow={t(link ? 'collab.links.edit' : 'collab.links.add')}
+          titleInput={{
+            value: title,
+            onChange: setTitle,
+            label: t('collab.links.titlePlaceholder'),
+            placeholder: t('collab.links.titlePlaceholder'),
+            autoFocus: true,
+            onKeyDown: e => { if (e.key === 'Enter') void submit() },
+          }}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('collab.links.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={() => void submit()} disabled={!valid || busy}>{busy ? '...' : t('collab.links.save')}</DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <EditorField label={t('reservations.urlLabel')} htmlFor="collab-link-url">
+        <input id="collab-link-url" type="url" required value={url} onChange={e => setUrl(e.target.value)} placeholder={t('collab.links.urlPlaceholder')} className={INPUT} />
+      </EditorField>
+    </DialogShell>
+  )
+
   return createPortal(
     <div role="presentation" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={e => { if (e.target === e.currentTarget) onClose() }}>
       <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onSubmit={submit}>
@@ -106,6 +156,7 @@ function LinkModal({ link, onClose, onSave }: { link?: CollabLink; onClose: () =
 
 export default function CollabLinks({ tripId }: { tripId: number }) {
   const { t } = useTranslation()
+  const isPhone = useIsPhone()
   const trip = useTripStore(s => s.trip)
   const canEdit = useCanDo()('collab_edit', trip)
   const toast = useToast()
@@ -205,7 +256,19 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
 
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
-      {/* Header */}
+      {/* Header: the desktop's head band; the phone keeps its own */}
+      {!isPhone ? (
+        <CollabPanelHead
+          icon={Link2}
+          title={t('collab.tabs.links')}
+          count={links.length}
+          actions={canEdit && (
+            <button type="button" onClick={() => setShowForm(true)} className={HEAD_ACTION}>
+              <Plus size={12} /> {t('collab.links.add')}
+            </button>
+          )}
+        />
+      ) : (
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
         <h3 style={{ margin: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
           <Link2 size={14} color="var(--text-faint)" />
@@ -221,17 +284,19 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
           </button>
         )}
       </div>
+      )}
 
       {/* Content: one chip per link, two to a row (see .collab-link-chip). The chip is
           the link, with the host beside the title; the actions sit in its tail. */}
-      <div className="chat-scroll collab-link-grid" style={{ flex: 1, overflowY: 'auto', padding: '2px 12px 12px' }}>
+      <div className={isPhone ? 'chat-scroll collab-link-grid' : 'chat-scroll collab-link-grid collab-link-grid--desk'} style={{ flex: 1, overflowY: 'auto', padding: isPhone ? '2px 12px 12px' : 12 }}>
         {links.length === 0 ? (
           <EmptyState scene="links" title={t('collab.links.empty')} />
         ) : (
           <div className="collab-link-grid__cells">
             {links.map(link => (
               <div key={link.id} className={link.pinned ? 'collab-link-chip collab-link-chip--pinned' : 'collab-link-chip'}>
-                <a className="collab-link-chip__main" href={link.url} target="_blank" rel="noreferrer" title={t('collab.links.open')}>
+                <ChipTip label={t('collab.links.open')} phone={isPhone}>
+                <a className="collab-link-chip__main" href={link.url} target="_blank" rel="noreferrer">
                   {/* Keyed on the address: the icon remembers a favicon that failed, and
                       an edit keeps the chip's id, so a corrected address got the glyph. */}
                   <LinkIcon key={link.url} url={link.url} />
@@ -240,17 +305,24 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
                     <span className="collab-link-chip__host">{hostOf(link.url)}</span>
                   </span>
                 </a>
+                </ChipTip>
                 {canEdit && (
                   <span className="collab-link-chip__actions">
-                    <button type="button" className="collab-link-chip__action" onClick={() => setEditing(link)} aria-label={t('collab.links.edit')} title={t('collab.links.edit')}>
-                      <Pencil size={13} aria-hidden="true" />
-                    </button>
-                    <button type="button" className={link.pinned ? 'collab-link-chip__action collab-link-chip__action--on' : 'collab-link-chip__action'} onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} title={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')}>
-                      <Pin size={13} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" />
-                    </button>
-                    <button type="button" className="collab-link-chip__action" onClick={() => setPendingDeleteId(link.id)} aria-label={t('collab.links.delete')} title={t('collab.links.delete')}>
-                      <Trash2 size={13} aria-hidden="true" />
-                    </button>
+                    <ChipTip label={t('collab.links.edit')} phone={isPhone}>
+                      <button type="button" className="collab-link-chip__action" onClick={() => setEditing(link)} aria-label={t('collab.links.edit')}>
+                        <Pencil size={13} aria-hidden="true" />
+                      </button>
+                    </ChipTip>
+                    <ChipTip label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')} phone={isPhone}>
+                      <button type="button" className={link.pinned ? 'collab-link-chip__action collab-link-chip__action--on' : 'collab-link-chip__action'} onClick={() => toggle(link)} aria-label={link.pinned ? t('collab.links.unpin') : t('collab.links.pin')}>
+                        <Pin size={13} fill={link.pinned ? 'currentColor' : 'none'} aria-hidden="true" />
+                      </button>
+                    </ChipTip>
+                    <ChipTip label={t('collab.links.delete')} phone={isPhone}>
+                      <button type="button" className="collab-link-chip__action" onClick={() => setPendingDeleteId(link.id)} aria-label={t('collab.links.delete')}>
+                        <Trash2 size={13} aria-hidden="true" />
+                      </button>
+                    </ChipTip>
                   </span>
                 )}
               </div>
diff --git a/client/src/components/Collab/CollabNotes.test.tsx b/client/src/components/Collab/CollabNotes.test.tsx
index 4d707c296..8c7158b29 100644
--- a/client/src/components/Collab/CollabNotes.test.tsx
+++ b/client/src/components/Collab/CollabNotes.test.tsx
@@ -197,7 +197,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    await user.click(screen.getByTitle('Delete'));
+    await noteAction(user, 'Delete');
     // Deleting now asks for confirmation first — the note stays until confirmed.
     expect(screen.getByText('Delete note?')).toBeInTheDocument();
     expect(screen.getByText('Remove Me')).toBeInTheDocument();
@@ -221,8 +221,9 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Pinned Note');
-    // Unpin button is visible for pinned notes
-    expect(screen.getByTitle('Unpin')).toBeInTheDocument();
+    // A pinned note offers Unpin in its menu
+    await userEvent.setup().click(screen.getByRole('button', { name: 'More options' }));
+    expect(screen.getByRole('button', { name: 'Unpin' })).toBeInTheDocument();
   });
 
   it('FE-COMP-NOTES-015: clicking edit button opens the edit modal', async () => {
@@ -240,7 +241,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Editable Note');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     expect(await screen.findByDisplayValue('Editable Note')).toBeInTheDocument();
   });
 
@@ -327,7 +328,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('My Note');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     await screen.findByDisplayValue('My Note');
     expect(screen.getByDisplayValue('Some content')).toBeInTheDocument();
   });
@@ -354,7 +355,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Old Title');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     const titleInput = await screen.findByDisplayValue('Old Title');
     await user.clear(titleInput);
     await user.type(titleInput, 'New Title');
@@ -387,18 +388,7 @@ describe('CollabNotes', () => {
     await user.click(screen.getByText('New Note'));
     await screen.findByPlaceholderText('Note title');
     // Click the X button in the modal header
-    const closeBtn = screen.getByRole('button', { name: '' });
-    // There may be multiple, find the one in the modal (closest to the title input)
-    const titleInput = screen.getByPlaceholderText('Note title');
-    // The X button is the sibling button in the modal header
-    const modal = titleInput.closest('form');
-    const xBtn = modal?.parentElement?.querySelector('button[type="button"]') as HTMLElement | null;
-    if (xBtn) {
-      await user.click(xBtn);
-    } else {
-      // Fallback: click backdrop (the outer div)
-      await user.keyboard('{Escape}');
-    }
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
     await waitFor(() => expect(screen.queryByPlaceholderText('Note title')).not.toBeInTheDocument());
   });
 
@@ -406,16 +396,16 @@ describe('CollabNotes', () => {
     const user = userEvent.setup();
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('No notes yet');
-    await user.click(screen.getByTitle('Manage Categories'));
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
     // The modal header renders "Category Settings" or similar
-    expect(await screen.findByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
+    expect(await screen.findByText('Manage Categories', { selector: 'h2' })).toBeInTheDocument();
   });
 
   it('FE-COMP-NOTES-025: CategorySettingsModal shows no categories message when empty', async () => {
     const user = userEvent.setup();
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('No notes yet');
-    await user.click(screen.getByTitle('Manage Categories'));
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
     expect(await screen.findByText('No categories yet')).toBeInTheDocument();
   });
 
@@ -423,7 +413,7 @@ describe('CollabNotes', () => {
     const user = userEvent.setup();
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('No notes yet');
-    await user.click(screen.getByTitle('Manage Categories'));
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
     await screen.findByText('No categories yet');
     const newCatInput = screen.getByPlaceholderText('New category...');
     await user.type(newCatInput, 'Transport');
@@ -438,14 +428,10 @@ describe('CollabNotes', () => {
     const user = userEvent.setup();
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('No notes yet');
-    await user.click(screen.getByTitle('Manage Categories'));
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
     await screen.findByText('No categories yet');
     // Click the X button in the modal header
-    const modal = screen.getByText('No categories yet').closest('div');
-    const categoryModal = modal?.closest('[style*="position: fixed"]') as HTMLElement | null;
-    if (categoryModal) {
-      await user.click(categoryModal);
-    }
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
     await waitFor(() => expect(screen.queryByText('No categories yet')).not.toBeInTheDocument());
   });
 
@@ -498,7 +484,7 @@ describe('CollabNotes', () => {
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Expandable Note');
     // Expand button (Maximize2 icon) appears when note has content
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // View modal shows the note title
     await waitFor(() => {
       const titles = screen.getAllByText('Expandable Note');
@@ -521,7 +507,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('View Modal Note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // Modal is open — there are multiple instances of the title
     await waitFor(() => expect(screen.getAllByText('View Modal Note').length).toBeGreaterThan(1));
     // The view modal renders a pencil button to switch to edit mode
@@ -577,9 +563,9 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Cat Note');
-    await user.click(screen.getByTitle('Manage Categories'));
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
     // Food category appears in the settings modal
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await screen.findByText('Manage Categories', { selector: 'h2' });
     // The category "Food" is listed in the modal
     const modalFoodEntries = screen.getAllByText('Food');
     expect(modalFoodEntries.length).toBeGreaterThan(0);
@@ -629,7 +615,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Pin Me');
-    await user.click(screen.getByTitle('Pin'));
+    await noteAction(user, 'Pin');
     await waitFor(() => expect(patchCalled).toBe(true));
   });
 
@@ -699,10 +685,8 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Website Note');
-    // Website thumbnail shows domain name (example.com) — the domain label
-    await waitFor(() => {
-      expect(screen.getByText('Link')).toBeInTheDocument();
-    });
+    // The link sits in the title row as a chip with its host
+    expect(screen.getByRole('link', { name: /example\.com/ })).toHaveAttribute('href', 'https://example.com');
   });
 
   it('FE-COMP-NOTES-038: CategorySettingsModal Save button calls saveCategoryColors', async () => {
@@ -725,8 +709,8 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Cat Save Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
     // Change color: click first color swatch for "Travel" category
     const colorSwatches = screen.getAllByRole('button').filter(b => b.style.background && b.style.background.startsWith('#'));
     if (colorSwatches.length > 0) {
@@ -735,7 +719,7 @@ describe('CollabNotes', () => {
     // Click Save button
     await user.click(screen.getByRole('button', { name: /^Save$/i }));
     // Modal should close
-    await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h2' })).not.toBeInTheDocument());
   });
 
   it('FE-COMP-NOTES-039: NoteFormModal website field accepts URL input', async () => {
@@ -778,13 +762,13 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Color Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
     // "Food" appears in the modal; there are color swatches beside it
     // Find color swatch buttons (they have specific background colors from NOTE_COLORS)
     const saveBtn = screen.getByRole('button', { name: /^Save$/i });
     await user.click(saveBtn);
-    await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
+    await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h2' })).not.toBeInTheDocument());
   });
 
   it('FE-COMP-NOTES-041: note with image attachment shows thumbnail', async () => {
@@ -856,10 +840,10 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Rename Cat Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
     // Find the "Transport" category name span and click to edit
-    const categoryNameSpan = screen.getAllByText('Transport').find(el => el.tagName === 'BUTTON' && el.title === 'Click to rename');
+    const categoryNameSpan = within(screen.getByRole('dialog')).getByRole('button', { name: 'Transport' });
     if (categoryNameSpan) {
       await user.click(categoryNameSpan);
       // Now an input with value "Transport" should appear
@@ -890,25 +874,17 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Cat Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
-    // Find the Trash2 SVG delete button in the modal — buttons containing lucide-trash-2 SVGs
-    const trashButtons = [...document.querySelectorAll('button')].filter(
-      b => b.querySelector('svg.lucide-trash-2')
-    );
-    if (trashButtons.length > 0) {
-      // First trash button in the modal is for the 'Removable' category
-      await user.click(trashButtons[0] as HTMLElement);
-      // Removable category disappears from the modal
-      await waitFor(() => {
-        const fixedEls = document.querySelectorAll('[style*="position: fixed"]');
-        let found = false;
-        fixedEls.forEach(el => { if (el.textContent?.includes('Removable') && !el.textContent?.includes('Remove Cat Note')) found = true; });
-        expect(found).toBe(false);
-      });
-    } else {
-      expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
-    }
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
+    // A category no note uses leaves the list with its row's delete button;
+    // 'Removable' stays, a note still carries it.
+    const dialog = screen.getByRole('dialog');
+    await user.type(within(dialog).getByPlaceholderText('New category...'), 'Temp');
+    await user.keyboard('{Enter}');
+    const tempRow = within(dialog).getByRole('button', { name: 'Temp' }).parentElement!;
+    await user.click(within(tempRow).getByRole('button', { name: 'Delete' }));
+    await waitFor(() => expect(within(dialog).queryByRole('button', { name: 'Temp' })).not.toBeInTheDocument());
+    expect(within(dialog).getByRole('button', { name: 'Removable' })).toBeInTheDocument();
   });
 
   it('FE-COMP-NOTES-045: expand note view modal displays full content with markdown', async () => {
@@ -926,7 +902,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Full Content Note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // View modal shows the full content
     await waitFor(() => {
       const titles = screen.getAllByText('Full Content Note');
@@ -951,7 +927,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Tagged Note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // View modal header shows the category name
     await waitFor(() => {
       const foodEls = screen.getAllByText('Food');
@@ -977,11 +953,11 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Rename Flow Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
 
     // Find and click the "OldCat" category name span to enter edit mode
-    const oldCatSpan = screen.getAllByText('OldCat').find(el => el.tagName === 'BUTTON' && el.title === 'Click to rename');
+    const oldCatSpan = within(screen.getByRole('dialog')).getByRole('button', { name: 'OldCat' });
     if (oldCatSpan) {
       await user.click(oldCatSpan);
       const editInput = screen.getByDisplayValue('OldCat');
@@ -991,10 +967,10 @@ describe('CollabNotes', () => {
       await screen.findByText('NewCat');
       // Click Save — this triggers handleSave which calls onRenameCategory
       await user.click(screen.getByRole('button', { name: /^Save$/i }));
-      await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h3' })).not.toBeInTheDocument());
+      await waitFor(() => expect(screen.queryByText('Manage Categories', { selector: 'h2' })).not.toBeInTheDocument());
     } else {
       // If EditableCatName not found (unlikely), just close modal
-      expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
+      expect(screen.getByText('Manage Categories', { selector: 'h2' })).toBeInTheDocument();
     }
   });
 
@@ -1052,7 +1028,7 @@ describe('CollabNotes', () => {
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Attachment Note');
     // Open edit modal
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     await screen.findByDisplayValue('Attachment Note');
     // removable.pdf appears in the existing attachments list in the modal
     await screen.findByText('removable.pdf');
@@ -1085,8 +1061,8 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('OG Image Note');
-    // WebsiteThumbnail loads OG data — image is attempted, 'Link' label visible
-    await waitFor(() => expect(screen.getByText('Link')).toBeInTheDocument());
+    // The title row links the site by its host
+    expect(screen.getByRole('link', { name: /trek-app\.example\.com/ })).toHaveAttribute('href', 'https://trek-app.example.com');
   });
 
   it('FE-COMP-NOTES-051: view modal with PDF attachment renders attachment section code', async () => {
@@ -1107,7 +1083,7 @@ describe('CollabNotes', () => {
     await screen.findByText('Attached View Note');
     // PDF badge is present in NoteCard
     expect(screen.getByText('PDF')).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // View modal opens — title appears multiple times
     await waitFor(() => expect(screen.getAllByText('Attached View Note').length).toBeGreaterThan(1));
     // PDF badge appears in both card and view modal
@@ -1131,7 +1107,7 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Image View Note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     // View modal opens
     await waitFor(() => expect(screen.getAllByText('Image View Note').length).toBeGreaterThan(1));
     // The view modal code for image attachments executed (AuthedImg renders initially null, then img after async)
@@ -1153,12 +1129,10 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Transition Note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     await waitFor(() => expect(screen.getAllByText('Transition Note').length).toBeGreaterThan(1));
-    // Click the Pencil button in the view modal (second-to-last button)
-    const allButtons = screen.getAllByRole('button');
-    const pencilBtn = allButtons[allButtons.length - 2]; // Pencil is before X
-    await user.click(pencilBtn);
+    // The view modal's footer switches to the edit modal
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Edit' }));
     // Edit modal opens — title input should be pre-filled
     await screen.findByDisplayValue('Transition Note');
   });
@@ -1221,10 +1195,10 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Escape Cat Note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
     // Click on the category name to start editing
-    const catNameSpan = screen.getAllByText('EscapeMe').find(el => el.title === 'Click to rename');
+    const catNameSpan = within(screen.getByRole('dialog')).getByRole('button', { name: 'EscapeMe' });
     if (catNameSpan) {
       await user.click(catNameSpan);
       const editInput = screen.getByDisplayValue('EscapeMe');
@@ -1254,8 +1228,9 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Alice Note');
-    // The author username tooltip text is in the DOM (from data-tip div)
-    expect(screen.getByText('alice')).toBeInTheDocument();
+    // The author's avatar names them in its tooltip
+    fireEvent.mouseEnter(screen.getByRole('img', { name: 'alice' }));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('alice');
   });
 
   it('FE-COMP-NOTES-023: notes are sorted with pinned notes first', async () => {
@@ -1328,6 +1303,12 @@ function wsHandler(): (msg: Record<string, unknown>) => void {
   return (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
 }
 
+/** A note's actions sit behind its "More options" button; this opens the first card's menu and picks one. */
+async function noteAction(user: ReturnType<typeof userEvent.setup>, name: string): Promise<void> {
+  await user.click(screen.getAllByRole('button', { name: 'More options' })[0]);
+  await user.click(await screen.findByRole('button', { name }));
+}
+
 function openedNoteBody(): Promise<HTMLElement> {
   return waitFor(() => {
     const md = document.querySelector('.collab-note-md-full');
@@ -1367,9 +1348,8 @@ describe('CollabNotes details', () => {
     serveNotes({ notes: [buildNote({ category: 'Ideas', color: null })] });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('A note');
-    // The card chip is a span, the filter pill above the grid is a button
-    const chip = screen.getAllByText('Ideas').find(el => el.tagName === 'SPAN')!;
-    expect(chip.style.color).toBe('rgb(99, 102, 241)');
+    // The card chip's dot carries the category colour
+    expect(screen.getByTestId('note-category-dot').style.background).toBe('rgb(99, 102, 241)');
   });
 
   it('FE-W5CNT-003: without a trip id nothing is fetched and the panel stays in its loading state', () => {
@@ -1534,8 +1514,7 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Pin me');
-    const pinBtn = screen.getAllByTitle('Pin')[0];
-    await user.click(pinBtn);
+    await noteAction(user, 'Pin');
     await screen.findByText('Pinned now');
     expect(screen.getByText('Leave me')).toBeInTheDocument();
   });
@@ -1546,9 +1525,10 @@ describe('CollabNotes details', () => {
     server.use(http.put('/api/trips/1/collab/notes/1', () => HttpResponse.json(null)));
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Unchanged');
-    await user.click(screen.getByTitle('Pin'));
+    await noteAction(user, 'Pin');
     await waitFor(() => expect(screen.getByText('Unchanged')).toBeInTheDocument());
-    expect(screen.getByTitle('Pin')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'More options' }));
+    expect(screen.getByRole('button', { name: 'Pin' })).toBeInTheDocument();
   });
 
   it('FE-W5CNT-017: a failing edit reports an error and keeps the edit modal open', async () => {
@@ -1559,7 +1539,7 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Edit me');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     const titleInput = await screen.findByDisplayValue('Edit me');
     await user.type(titleInput, ' v2');
     await user.click(screen.getByRole('button', { name: 'Save' }));
@@ -1579,10 +1559,9 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Sushi');
-    await user.click(screen.getByTitle('Manage Categories'));
-    const label = (await screen.findAllByText('Food')).find(el => el.title === 'Click to rename')!;
-    const swatches = label.parentElement!.querySelectorAll('button');
-    await user.click(swatches[3]);
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    const label = await within(await screen.findByRole('dialog')).findByRole('button', { name: 'Food' });
+    await user.click(within(label.parentElement!).getByRole('button', { name: 'Emerald' }));
     await user.click(screen.getByRole('button', { name: 'Save' }));
     await waitFor(() => expect(bodies).toEqual([{ color: '#10b981' }]));
   });
@@ -1605,7 +1584,7 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Edit me');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     await screen.findByDisplayValue('Edit me');
     pasteFile('attachment.png');
     await user.click(screen.getByRole('button', { name: 'Save' }));
@@ -1628,7 +1607,7 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Edit me');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     await screen.findByDisplayValue('Edit me');
     pasteFile('nope.png');
     await user.click(screen.getByRole('button', { name: 'Save' }));
@@ -1650,7 +1629,7 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Has file');
-    await user.click(screen.getByTitle('Edit'));
+    await noteAction(user, 'Edit');
     const chip = (await screen.findByText('plan.pdf')).closest('div')!;
     await user.click(chip.querySelector('button')!);
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
@@ -1707,30 +1686,20 @@ describe('CollabNotes details', () => {
     }
   });
 
-  it('FE-W5CNT-025: the expanded note closes on a backdrop click and its buttons highlight on hover', async () => {
+  it('FE-W5CNT-025: the expanded note closes on a backdrop click and offers edit and close', async () => {
     const user = userEvent.setup();
     serveNotes({ notes: [buildNote({ id: 5, title: 'Long note', content: 'Full body', category: 'Food', color: '#ef4444' })] });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Long note');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
-    const modal = await waitFor(() => {
-      const md = document.querySelector('.collab-note-md-full')
-      if (!md) throw new Error('view modal not open yet')
-      return md.closest('div[style*="position: fixed"]') as HTMLElement
-    });
+    await noteAction(user, 'Expand');
+    await openedNoteBody();
+    const modal = screen.getByRole('dialog');
     expect(within(modal).getByText('Full body')).toBeInTheDocument();
+    expect(within(modal).getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+    expect(within(modal).getByRole('button', { name: 'Close' })).toBeInTheDocument();
 
-    const [editBtn, closeBtn] = Array.from(modal.querySelectorAll('button'));
-    fireEvent.mouseEnter(editBtn);
-    expect(editBtn.style.color).toBe('var(--text-primary)');
-    fireEvent.mouseLeave(editBtn);
-    expect(editBtn.style.color).toBe('var(--text-faint)');
-    fireEvent.mouseEnter(closeBtn);
-    expect(closeBtn.style.color).toBe('var(--text-primary)');
-    fireEvent.mouseLeave(closeBtn);
-    expect(closeBtn.style.color).toBe('var(--text-faint)');
-
-    fireEvent.click(modal);
+    // Only a press that starts and ends on the backdrop closes it.
+    await user.click(modal.parentElement!);
     await waitFor(() => expect(document.querySelector('.collab-note-md-full')).toBeNull());
   });
 
@@ -1750,23 +1719,15 @@ describe('CollabNotes details', () => {
     });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Trip docs');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
-    const modal = await waitFor(() => {
-      const md = document.querySelector('.collab-note-md-full')
-      if (!md) throw new Error('view modal not open yet')
-      return md.closest('div[style*="position: fixed"]') as HTMLElement
-    });
+    await noteAction(user, 'Expand');
+    await openedNoteBody();
+    const modal = screen.getByRole('dialog');
 
     // Unknown mime type and missing name fall back to a "?" tile
     expect(within(modal).getByText('?')).toBeInTheDocument();
 
-    const zipTile = within(modal).getByTitle('itinerary.zip');
-    expect(zipTile.style.background).toBe('var(--bg-secondary)');
-    expect(within(modal).getByText('ZIP')).toBeInTheDocument();
-    fireEvent.mouseEnter(zipTile);
-    expect(zipTile.style.transform).toBe('scale(1.06)');
-    fireEvent.mouseLeave(zipTile);
-    expect(zipTile.style.transform).toBe('scale(1)');
+    const zipTile = within(modal).getByRole('button', { name: 'itinerary.zip' });
+    expect(zipTile).toHaveTextContent('ZIP');
     fireEvent.click(zipTile);
     // FilePreviewPortal shows a download action for non-image files
     expect(await screen.findByText('Download itinerary.zip')).toBeInTheDocument();
@@ -1777,12 +1738,8 @@ describe('CollabNotes details', () => {
       return img;
     });
     // The clickable thumbnail is a real button wrapped around the image, so the
-    // hover transform lands on that button.
-    const imageTile = image.closest('button') as HTMLElement;
-    fireEvent.mouseEnter(imageTile);
-    expect(imageTile.style.transform).toBe('scale(1.06)');
-    fireEvent.mouseLeave(imageTile);
-    expect(imageTile.style.transform).toBe('scale(1)');
+    // keyboard reaches it too.
+    expect(image.closest('button')).not.toBeNull();
     fireEvent.click(image);
     await waitFor(() => expect(screen.queryByText('Download itinerary.zip')).not.toBeInTheDocument());
   });
@@ -1851,9 +1808,9 @@ describe('CollabNotes details', () => {
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('First note');
 
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
-    const oldCat = screen.getAllByText('OldCat').find(el => el.tagName === 'BUTTON' && el.title === 'Click to rename')!;
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
+    const oldCat = within(screen.getByRole('dialog')).getByRole('button', { name: 'OldCat' });
     await user.click(oldCat);
     const editInput = screen.getByDisplayValue('OldCat');
     await user.clear(editInput);
@@ -1865,10 +1822,9 @@ describe('CollabNotes details', () => {
     // half a rename is not a saved rename.
     await waitFor(() => expect(puts).toEqual(['1', '2']));
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
-    expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
+    expect(screen.getByText('Manage Categories', { selector: 'h2' })).toBeInTheDocument();
     // Re-read: the note the server refused is still shown under its old category.
-    const header = screen.getByText('Manage Categories', { selector: 'h3' }).parentElement!;
-    await user.click(within(header).getByRole('button'));
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
     await waitFor(() => expect(screen.getAllByText('NewCat').length).toBeGreaterThan(0));
     expect(screen.getAllByText('OldCat').length).toBeGreaterThan(0);
   });
@@ -1882,7 +1838,7 @@ describe('CollabNotes details', () => {
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Stubborn note');
 
-    await user.click(screen.getByTitle('Delete'));
+    await noteAction(user, 'Delete');
     const dialog = (await screen.findByText('Delete note?')).closest('div.trek-modal-enter') as HTMLElement;
     await user.click(within(dialog).getByRole('button', { name: 'Delete' }));
 
@@ -1903,10 +1859,10 @@ describe('CollabNotes details', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('First note');
-    await user.click(screen.getByTitle('Manage Categories'));
-    await screen.findByText('Manage Categories', { selector: 'h3' });
+    await user.click(screen.getByRole('button', { name: 'Manage Categories' }));
+    await screen.findByText('Manage Categories', { selector: 'h2' });
 
-    const oldCat = screen.getAllByText('OldCat').find(el => el.tagName === 'BUTTON' && el.title === 'Click to rename')!;
+    const oldCat = within(screen.getByRole('dialog')).getByRole('button', { name: 'OldCat' });
     await user.click(oldCat);
     const editInput = screen.getByDisplayValue('OldCat');
     await user.clear(editInput);
@@ -1917,7 +1873,7 @@ describe('CollabNotes details', () => {
 
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
     // Nothing was renamed, so the modal must not act like it was saved…
-    expect(screen.getByText('Manage Categories', { selector: 'h3' })).toBeInTheDocument();
+    expect(screen.getByText('Manage Categories', { selector: 'h2' })).toBeInTheDocument();
     // …and both rejected writes are one message, not one each.
     expect(addToast).toHaveBeenCalledTimes(1);
   });
@@ -1927,7 +1883,7 @@ describe('CollabNotes details', () => {
     serveNotes({ notes: [buildNote({ id: 7, title: 'Hotel', content: 'Zimmernummer <TBD> bestaetigen' })] });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Hotel');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     const full = await openedNoteBody();
     // Notes written before markdown rendering existed keep reading the way they
     // were typed (#2177).
@@ -1939,7 +1895,7 @@ describe('CollabNotes details', () => {
     serveNotes({ notes: [buildNote({ id: 8, title: 'Booking', content: 'Hotel gebucht[^1]\n\n[^1]: Bestaetigung ABC123' })] });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Booking');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     const full = await openedNoteBody();
 
     const ref = within(full).getByRole('link', { name: '1' });
@@ -1955,12 +1911,12 @@ describe('CollabNotes details', () => {
     server.use(http.get('/api/trips/1/collab/link-preview', () => HttpResponse.json({ title: 'Hotel', image: null })));
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Hotel');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     const full = await openedNoteBody();
 
     // A member without collab_edit never opens the edit modal, so this is the
     // only place the link is readable for them (#2222).
-    const link = within(full).getByRole('link');
+    const link = within(full.closest('[role="dialog"]') as HTMLElement).getByRole('link');
     expect(link).toHaveAttribute('href', 'https://www.hotel.test');
     expect(link).toHaveAttribute('rel', 'noopener noreferrer');
     expect(link).toHaveTextContent('hotel.test');
@@ -1971,7 +1927,7 @@ describe('CollabNotes details', () => {
     serveNotes({ notes: [buildNote({ id: 10, title: 'Hotel', website: 'javascript:alert(1)' })] });
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Hotel');
-    await user.click(screen.getByRole('button', { name: 'Expand' }));
+    await noteAction(user, 'Expand');
     const full = await openedNoteBody();
 
     expect(within(full).queryAllByRole('link')).toHaveLength(0);
diff --git a/client/src/components/Collab/CollabNotes.tsx b/client/src/components/Collab/CollabNotes.tsx
index 22803e705..bcb729172 100644
--- a/client/src/components/Collab/CollabNotes.tsx
+++ b/client/src/components/Collab/CollabNotes.tsx
@@ -1,10 +1,12 @@
-import { useState, useEffect, useCallback, useMemo } from 'react'
+import { useState, useEffect, useCallback, useId, useMemo } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { sanitizedMarkdownComponents, sanitizedMarkdownPlugins } from '../shared/markdownSanitize'
-import { createPortal } from 'react-dom'
-import { Plus, Pencil, X, StickyNote, Settings, ExternalLink } from 'lucide-react'
+import { Plus, Pencil, StickyNote, Settings, ExternalLink } from 'lucide-react'
+import CollabPanelHead, { HEAD_ACTION } from './CollabPanelHead'
+import { Tooltip } from '../shared/Tooltip'
+import { DialogButton, DialogFooter, DialogHeader, DialogSection, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, PILL, fs } from '../shared/DialogShell'
 import { collabApi } from '../../api/client'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
@@ -294,60 +296,41 @@ function CollabNotesLoading({ t }: NotesState) {
   )
 }
 
-function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal }: NotesState) {
+function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal, notes }: NotesState) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
-      <h3 style={{
-        fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', margin: 0, fontFamily: FONT,
-        letterSpacing: 0.3, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 7,
-      }}>
-        <StickyNote size={14} color="var(--text-faint)" />
-        {t('collab.notes.title')}
-      </h3>
-      <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
-        {canEdit && <button type="button" onClick={() => setShowSettings(true)} title={t('collab.notes.categorySettings')}
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', transition: 'color 0.12s' }}
-          onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-          onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-          <Settings size={14} />
-        </button>}
-        {canEdit && <button type="button" onClick={() => setShowNewModal(true)}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
-          <Plus size={12} />
-          {t('collab.notes.new')}
-        </button>}
-      </div>
-    </div>
+    <CollabPanelHead
+      icon={StickyNote}
+      title={t('collab.notes.title')}
+      count={notes.length}
+      actions={canEdit && (
+        <>
+          <Tooltip label={t('collab.notes.categorySettings')}>
+            <button type="button" onClick={() => setShowSettings(true)} aria-label={t('collab.notes.categorySettings')}
+              className="grid h-7 w-7 place-items-center rounded-full bg-surface-card text-content-muted shadow-sm hover:text-content">
+              <Settings size={13} />
+            </button>
+          </Tooltip>
+          <button type="button" onClick={() => setShowNewModal(true)} className={HEAD_ACTION}>
+            <Plus size={12} /> {t('collab.notes.new')}
+          </button>
+        </>
+      )}
+    />
   )
 }
 
-function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t }: NotesState) {
+/** The category filter, drawn like the filter tabs in the other trip tabs' bars. */
+function CollabCategoryPills({ categories, activeCategory, setActiveCategory, getCategoryColor, t }: NotesState) {
+  const pill = (active: boolean) =>
+    `inline-flex flex-none items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1 font-semibold transition-colors ${active ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted hover:text-content'}`
   return (
-    <div style={{ display: 'flex', gap: 4, padding: '8px 12px 0', overflowX: 'auto', flexShrink: 0 }}>
-      <button type="button"
-        onClick={() => setActiveCategory(null)}
-        style={{
-          flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT,
-          border: activeCategory === null ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
-          background: activeCategory === null ? 'var(--accent)' : 'transparent',
-          color: activeCategory === null ? 'var(--accent-text)' : 'var(--text-secondary)',
-          cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
-        }}
-      >
+    <div className="flex flex-none gap-1 overflow-x-auto px-3 pt-3" style={fs(12, 'body')}>
+      <button type="button" onClick={() => setActiveCategory(null)} aria-pressed={activeCategory === null} className={pill(activeCategory === null)}>
         {t('collab.notes.all')}
       </button>
       {categories.map(cat => (
-        <button type="button"
-          key={cat}
-          onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
-          style={{
-            flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT,
-            border: activeCategory === cat ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
-            background: activeCategory === cat ? 'var(--accent)' : 'transparent',
-            color: activeCategory === cat ? 'var(--accent-text)' : 'var(--text-secondary)',
-            cursor: 'pointer', whiteSpace: 'nowrap', textTransform: 'uppercase', letterSpacing: '0.03em',
-          }}
-        >
+        <button type="button" key={cat} onClick={() => setActiveCategory(prev => prev === cat ? null : cat)} aria-pressed={activeCategory === cat} className={pill(activeCategory === cat)}>
+          <span className="h-2 w-2 flex-none rounded-full" style={{ background: getCategoryColor(cat) }} />
           {cat}
         </button>
       ))}
@@ -369,8 +352,8 @@ function CollabNotesGrid(S: NotesState) {
         /* ── Notes grid — 2 columns ── */
         <div style={{
           display: 'grid',
-          gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, 1fr)',
-          gap: 8,
+          gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+          gap: 10,
         }}>
           {sortedNotes.map(note => (
             <NoteCard
@@ -400,114 +383,91 @@ function linkHost(url: string): string {
 }
 
 function ViewNoteModal(S: NotesState) {
-  const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile } = S
+  const { viewingNote, setViewingNote, canEdit, setEditingNote, getCategoryColor, t, setPreviewFile, previewFile } = S
+  const labelId = useId()
   if (!viewingNote) return null
   // A member without collab_edit only ever gets this modal, so the link has to
   // be here too (#2222). Allow-listed like the card tile: the field takes any
   // string, and a javascript: one would run in this origin.
   const websiteHref = safeExternalHref(viewingNote.website)
-  return createPortal(
-    <div
-      style={{
-        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)',
-        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        zIndex: 10000, padding: 16,
-      }}
-      role="presentation"
-      onClick={e => { if (e.target === e.currentTarget) setViewingNote(null) }}
+  const close = () => setViewingNote(null)
+  const color = viewingNote.category ? getCategoryColor(viewingNote.category) : null
+  const attachments = viewingNote.attachments || []
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={labelId}
+      width="editor"
+      // A file opened from here sits on top; Escape and the backdrop belong to it then.
+      blocked={!!previewFile}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><StickyNote size={20} strokeWidth={1.9} style={{ color: color ?? 'var(--text-muted)' }} /></DialogTile>}
+          tint={color ? `color-mix(in srgb, ${color} 12%, transparent)` : NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
+          title={viewingNote.title}
+          pills={viewingNote.category && (
+            <span className={PILL}>
+              <span className="h-2 w-2 flex-none rounded-full" style={{ background: color }} />
+              {viewingNote.category}
+            </span>
+          )}
+        />
+      )}
+      footer={canEdit ? (
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton variant="primary" onClick={() => { close(); setEditingNote(viewingNote) }} icon={<Pencil size={14} strokeWidth={2} />}>
+            {t('common.edit')}
+          </DialogButton>
+        </DialogFooter>
+      ) : undefined}
     >
-      <div
-        style={{
-          background: 'var(--bg-card)', borderRadius: 16,
-          boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-          width: 'min(700px, calc(100vw - 32px))', maxHeight: '80vh',
-          overflow: 'hidden', display: 'flex', flexDirection: 'column',
-        }}
-      >
-        <div style={{
-          padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
-        }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
-            {viewingNote.category && (
-              <span style={{
-                display: 'inline-block', marginTop: 4, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
-                color: getCategoryColor(viewingNote.category),
-                background: `${getCategoryColor(viewingNote.category)}18`,
-                padding: '2px 8px', borderRadius: 6,
-              }}>{viewingNote.category}</span>
-            )}
-          </div>
-          <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
-            {canEdit && <button type="button" onClick={() => { setViewingNote(null); setEditingNote(viewingNote) }}
-              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Pencil size={16} />
-            </button>}
-            <button type="button" onClick={() => setViewingNote(null)}
-              style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 'calc(14px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', lineHeight: 1.7 }}>
+      <DialogSection label={t('collab.notes.content')}>
+        <div className="collab-note-md-full text-content" style={{ ...fs(14, 'body'), lineHeight: 1.7 }}>
           <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={sanitizedMarkdownComponents}>{viewingNote.content || ''}</Markdown>
-          {websiteHref && (
-            <a href={websiteHref} target="_blank" rel="noopener noreferrer"
-              style={{
-                display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12,
-                padding: '6px 12px', borderRadius: 999, border: '1px solid var(--border-primary)',
-                fontSize: 'calc(12px * var(--fs-scale-caption, 1))', fontWeight: 600,
-                color: 'var(--text-primary)', textDecoration: 'none',
-              }}>
-              <ExternalLink size={13} color="var(--text-muted)" /> {linkHost(websiteHref)}
-            </a>
-          )}
-          {(viewingNote.attachments || []).length > 0 && (
-            <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
-              <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                {(viewingNote.attachments || []).map(a => {
-                  const isImage = a.mime_type?.startsWith('image/')
-                  const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
-                  return (
-                    <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
-                      {isImage ? (
-                        <AuthedImg src={a.url} alt={a.original_name}
-                          style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
-                          onClick={() => setPreviewFile(a)}
-                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
-                      ) : (
-                        <button type="button" title={a.original_name} onClick={() => setPreviewFile(a)}
-                          style={{
-                            width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
-                            background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
-                            display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
-                            transition: 'transform 0.12s, box-shadow 0.12s',
-                            border: 'none', padding: 0, fontFamily: 'inherit',
-                          }}
-                          onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
-                        </button>
-                      )}
-                      <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          )}
         </div>
-      </div>
-    </div>,
-    document.body
+      </DialogSection>
+      {websiteHref && (
+        <DialogSection label={t('collab.notes.website')}>
+          <a href={websiteHref} target="_blank" rel="noopener noreferrer"
+            className="inline-flex max-w-full items-center gap-1.5 rounded-full bg-surface-secondary px-3 py-1.5 font-semibold text-content no-underline hover:opacity-80" style={fs(12, 'body')}>
+            <ExternalLink size={13} className="flex-none text-content-muted" />
+            <span className="truncate">{linkHost(websiteHref)}</span>
+          </a>
+        </DialogSection>
+      )}
+      {attachments.length > 0 && (
+        <DialogSection label={t('files.title')}>
+          <div className="flex flex-wrap gap-2.5">
+            {attachments.map(a => {
+              const isImage = a.mime_type?.startsWith('image/')
+              const isPdf = a.mime_type === 'application/pdf'
+              const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+              return (
+                <div key={a.id} className="flex w-[72px] flex-col items-center gap-1">
+                  {isImage ? (
+                    <AuthedImg src={a.url} alt={a.original_name}
+                      style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 12, cursor: 'pointer' }}
+                      onClick={() => setPreviewFile(a)} />
+                  ) : (
+                    <Tooltip label={a.original_name || ext}>
+                      <button type="button" onClick={() => setPreviewFile(a)} aria-label={a.original_name || ext}
+                        className={`grid h-16 w-16 place-items-center rounded-[12px] font-geist font-bold tracking-[.03em] transition-transform hover:scale-[1.06] ${isPdf ? 'bg-danger-soft text-danger' : 'bg-surface-secondary text-content-muted'}`}
+                        style={fs(10)}>
+                        {ext}
+                      </button>
+                    </Tooltip>
+                  )}
+                  <span className="w-full truncate text-center text-content-faint" style={fs(9.5)}>{a.original_name}</span>
+                </div>
+              )
+            })}
+          </div>
+        </DialogSection>
+      )}
+    </DialogShell>
   )
 }
 
diff --git a/client/src/components/Collab/CollabNotesCard.tsx b/client/src/components/Collab/CollabNotesCard.tsx
index 95e474697..3c625cf75 100644
--- a/client/src/components/Collab/CollabNotesCard.tsx
+++ b/client/src/components/Collab/CollabNotesCard.tsx
@@ -1,14 +1,16 @@
-import { useState, useCallback } from 'react'
+import { useCallback } from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
+import { safeExternalHref } from '../../utils/safeUrl'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { sanitizedMarkdownPlugins, sanitizedMarkdownComponents } from '../shared/markdownSanitize'
-import { Trash2, Pin, PinOff, Pencil, Maximize2 } from 'lucide-react'
-import { FONT } from './CollabNotes.constants'
+import { ExternalLink, Maximize2, MoreHorizontal, Pencil, Pin, PinOff, Trash2 } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
+import { ContextMenu, useContextMenu } from '../shared/ContextMenu'
+import { Eyebrow, fs } from '../Planner/bookings/bookingParts'
 import { AuthedImg } from './CollabNotesAuthedImg'
 import { UserAvatar } from './CollabNotesUserAvatar'
-import { WebsiteThumbnail } from './CollabNotesWebsiteThumbnail'
 import type { CollabNote, NoteFile } from './CollabNotes.types'
 import type { User } from '../../types'
 
@@ -27,11 +29,28 @@ interface NoteCardProps {
   t: (key: string) => string
 }
 
-export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, tripId, t }: NoteCardProps) {
-  const [hovered, setHovered] = useState(false)
+/** The link chip shows the host: that is what people recognise, "www." is noise. */
+function linkHost(url: string): string {
+  try { return new URL(url).hostname.replace(/^www\./, '') } catch { return url }
+}
 
+const LINK_BTN = 'grid h-[26px] w-[26px] flex-none place-items-center rounded-full bg-surface-card shadow-sm'
+
+/**
+ * A note as the booking cards are drawn, kept compact: one head band tinted by
+ * its category, carrying the category dot, the title, its link, the actions
+ * behind "…" and who wrote it; under it the text and the files.
+ */
+export function NoteCard({ note, canEdit, onUpdate, onDelete, onEdit, onView, onPreviewFile, getCategoryColor, t }: NoteCardProps) {
   const author = note.author || note.user || { username: note.username, avatar: note.avatar_url || avatarSrc(note.avatar) }
   const color = getCategoryColor ? getCategoryColor(note.category) : (note.color || '#6366f1')
+  const attachments = note.attachments || []
+  const shown = attachments.slice(0, 3)
+  const hidden = attachments.length - shown.length
+  // Allow-listed like everywhere else a note's link opens: the field takes any string.
+  const websiteHref = safeExternalHref(note.website)
+  const hasBody = !!note.content || attachments.length > 0
+  const menu = useContextMenu()
 
   const handleTogglePin = useCallback(() => {
     onUpdate(note.id, { pinned: !note.pinned })
@@ -41,161 +60,99 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
     onDelete(note.id)
   }, [note.id, onDelete])
 
-  return (
-    <div
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      style={{
-        position: 'relative',
-        borderRadius: 12,
-        overflow: 'hidden',
-        border: `1px solid ${note.pinned ? color + '40' : color + '25'}`,
-        background: note.pinned ? `${color}08` : 'var(--bg-card)',
-        display: 'flex',
-        flexDirection: 'column',
-        fontFamily: FONT,
-        transition: 'transform 0.12s, box-shadow 0.12s',
-        ...(hovered ? { transform: 'translateY(-1px)', boxShadow: '0 4px 16px rgba(0,0,0,0.08)' } : {}),
-      }}
-    >
-      {/* Header bar — like reservation cards */}
-      <div style={{
-        display: 'flex', alignItems: 'center', gap: 6, padding: '7px 10px',
-        background: `${color}0d`,
-      }}>
-        {!!note.pinned && <Pin size={9} color={color} style={{ flexShrink: 0 }} />}
-        <span style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden', flex: 1, minWidth: 0 }}>
-          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {note.title}
-          </span>
-          {note.category && (
-            <span style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, color, background: `${color}18`, padding: '2px 6px', borderRadius: 99, flexShrink: 0, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
-              {note.category}
-            </span>
-          )}
-        </span>
+  const menuItems = [
+    ...(note.content ? [{ label: t('common.expand'), icon: Maximize2, onClick: () => onView?.(note) }] : []),
+    ...(canEdit ? [
+      { label: note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin'), icon: note.pinned ? PinOff : Pin, onClick: handleTogglePin },
+      { label: t('collab.notes.edit'), icon: Pencil, onClick: () => onEdit?.(note) },
+      { divider: true },
+      { label: t('collab.notes.delete'), icon: Trash2, onClick: handleDelete, danger: true },
+    ] : []),
+  ]
 
-        {/* Hover actions in header */}
-        {(
-          <div style={{
-            display: 'flex', gap: 2,
-          }}>
-            {note.content && (
-              <button type="button" onClick={() => onView?.(note)} title={t('common.expand')} aria-label={t('common.expand')}
-                style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
-                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Maximize2 size={10} />
-              </button>
+  return (
+    <article
+      aria-label={note.title}
+      className="group flex flex-col overflow-hidden rounded-2xl border bg-surface-card transition-shadow hover:shadow-md"
+      // A pinned note keeps its category colour on the frame, the way a selected booking card does.
+      style={{ borderColor: note.pinned ? `color-mix(in srgb, ${color} 45%, transparent)` : 'var(--border-faint)' }}
+    >
+      <div className={`flex items-center gap-2 py-1.5 pl-3 pr-1.5 ${hasBody ? 'border-b border-edge-faint' : ''}`} style={{ background: `color-mix(in srgb, ${color} 11%, transparent)` }}>
+        {/* The category is only its colour here; the name is in the tooltip and the filter above. */}
+        {note.category && (
+          <Tooltip label={note.category}>
+            <span role="img" aria-label={note.category} data-testid="note-category-dot" className="h-2.5 w-2.5 flex-none rounded-full" style={{ background: color }} />
+          </Tooltip>
+        )}
+        <span className="min-w-0 flex-1 truncate font-bold text-content" style={fs(13, 'body')}>{note.title}</span>
+        {!!note.pinned && <Pin size={12} strokeWidth={2.2} className="flex-none" style={{ color }} />}
+        {/* The link rides in the title row as one round button; the host is in its tooltip. */}
+        {note.website && (
+          <Tooltip label={websiteHref ? linkHost(websiteHref) : note.website}>
+            {websiteHref ? (
+              <a href={websiteHref} target="_blank" rel="noopener noreferrer" aria-label={linkHost(websiteHref)} className={`${LINK_BTN} text-content-muted hover:text-content`}>
+                <ExternalLink size={12} strokeWidth={2.2} />
+              </a>
+            ) : (
+              <span role="img" aria-label={note.website} className={`${LINK_BTN} text-content-faint`}>
+                <ExternalLink size={12} strokeWidth={2.2} />
+              </span>
             )}
-            {canEdit && <button type="button" onClick={handleTogglePin} title={note.pinned ? t('collab.notes.unpin') : t('collab.notes.pin')}
-              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = color}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              {note.pinned ? <PinOff size={10} /> : <Pin size={10} />}
-            </button>}
-            {canEdit && <button type="button" onClick={() => onEdit?.(note)} title={t('collab.notes.edit')}
-              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Pencil size={10} />
-            </button>}
-            {canEdit && <button type="button" onClick={handleDelete} title={t('collab.notes.delete')}
-              style={{ padding: 3, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Trash2 size={10} />
-            </button>}
-            <div style={{ width: 1, height: 12, background: 'var(--border-faint)', flexShrink: 0, marginLeft: 1, marginRight: 1 }} />
-            {/* Author avatar */}
-            <div style={{ position: 'relative', flexShrink: 0 }}
-              onMouseEnter={e => { const tip = e.currentTarget.querySelector<HTMLElement>('[data-tip]'); if (tip) tip.style.opacity = '1' }}
-              onMouseLeave={e => { const tip = e.currentTarget.querySelector<HTMLElement>('[data-tip]'); if (tip) tip.style.opacity = '0' }}>
-              <UserAvatar user={author} size={16} />
-              <div data-tip style={{
-                position: 'absolute', bottom: '100%', left: '50%', transform: 'translateX(-50%)',
-                marginBottom: 6, pointerEvents: 'none', opacity: 0, transition: 'opacity 0.12s',
-                whiteSpace: 'nowrap', zIndex: 10,
-                background: 'var(--bg-card)', color: 'var(--text-primary)',
-                fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-                boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint)',
-              }}>
-                {author.username}
+          </Tooltip>
+        )}
+        {menuItems.length > 0 && (
+          <Tooltip label={t('files.menu')} disabled={!!menu.menu}>
+            <button type="button" onClick={e => menu.open(e, menuItems, true)} aria-label={t('files.menu')} aria-haspopup="menu"
+              className="grid h-[26px] w-[26px] flex-none place-items-center rounded-full text-content-muted transition-colors hover:bg-surface-card hover:text-content">
+              <MoreHorizontal size={15} strokeWidth={2} />
+            </button>
+          </Tooltip>
+        )}
+        <Tooltip label={author.username}>
+          <span role="img" aria-label={author.username} className="flex flex-none"><UserAvatar user={author} size={20} /></span>
+        </Tooltip>
+      </div>
+
+      {hasBody && (
+        <div className="flex flex-1 flex-col gap-2 px-3 pb-2.5 pt-2">
+          {note.content && (
+            <div className="collab-note-md line-clamp-3 break-words text-content-muted" style={{ ...fs(12, 'body'), lineHeight: 1.45 }}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={sanitizedMarkdownComponents}>{note.content}</Markdown>
+            </div>
+          )}
+
+          {attachments.length > 0 && (
+            <div>
+              <Eyebrow className="mb-[3px]">{t('files.title')}</Eyebrow>
+              <div className="flex items-center gap-1.5">
+                {shown.map(a => {
+                  const isImage = a.mime_type?.startsWith('image/')
+                  const isPdf = a.mime_type === 'application/pdf'
+                  const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                  return isImage ? (
+                    <AuthedImg key={a.id} src={a.url} alt={a.original_name}
+                      style={{ width: 40, height: 40, objectFit: 'cover', borderRadius: 10, cursor: 'pointer' }}
+                      onClick={() => onPreviewFile?.(a)} />
+                  ) : (
+                    <Tooltip key={a.id} label={a.original_name || ext}>
+                      <button type="button" aria-label={a.original_name} onClick={() => onPreviewFile?.(a)}
+                        className={`grid h-10 w-10 place-items-center rounded-[10px] font-geist font-bold tracking-[.03em] transition-transform hover:scale-[1.06] ${isPdf ? 'bg-danger-soft text-danger' : 'bg-surface-secondary text-content-muted'}`}
+                        style={fs(9)}>
+                        {ext}
+                      </button>
+                    </Tooltip>
+                  )
+                })}
+                {hidden > 0 && (
+                  <span className="rounded-full bg-surface-tertiary px-2 py-[2px] font-geist font-bold text-content-muted" style={fs(10)}>+{hidden}</span>
+                )}
               </div>
             </div>
-          </div>
-        )}
-      </div>
-
-      {/* Card body */}
-      <div style={{
-        padding: '8px 12px 10px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 4,
-        flex: 1,
-      }}>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            {note.content && (
-              <div className="collab-note-md" style={{
-                fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)', lineHeight: 1.5, margin: 0,
-                maxHeight: '4.5em', overflow: 'hidden',
-                wordBreak: 'break-word', fontFamily: FONT,
-              }}>
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={sanitizedMarkdownComponents}>{note.content}</Markdown>
-              </div>
-            )}
-          </div>
-              {/* Right: website + attachment thumbnails */}
-              {(note.website || (note.attachments?.length ?? 0) > 0) && (
-                <div style={{ display: 'flex', gap: 6, flexShrink: 0, alignItems: 'flex-start' }}>
-                  {/* Website */}
-                  {note.website && (
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-                      <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>Link</span>
-                      <WebsiteThumbnail url={note.website} tripId={tripId} color={color} />
-                    </div>
-                  )}
-                  {/* Files */}
-                  {(note.attachments || []).length > 0 && (
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-                      <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>{t('files.title')}</span>
-                      <div style={{ display: 'flex', gap: 4 }}>
-                  {(note.attachments || []).slice(0, note.website ? 1 : 2).map(a => {
-                    const isImage = a.mime_type?.startsWith('image/')
-                    const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
-                    return isImage ? (
-                      <AuthedImg key={a.id} src={a.url} alt={a.original_name}
-                        style={{ width: 48, height: 48, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
-                        onClick={() => onPreviewFile?.(a)}
-                        onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.08)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                        onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
-                    ) : (
-                      <button type="button" key={a.id} title={a.original_name} aria-label={a.original_name} onClick={() => onPreviewFile?.(a)}
-                        style={{
-                          width: 48, height: 48, borderRadius: 8, cursor: 'pointer',
-                          background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
-                          border: 'none', padding: 0, fontFamily: 'inherit',
-                          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
-                          transition: 'transform 0.12s, box-shadow 0.12s',
-                        }}
-                        onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.08)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
-                        onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                        <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
-                      </button>
-                    )
-                  })}
-                  {(note.attachments?.length || 0) > (note.website ? 1 : 2) && (
-                    <span style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', textAlign: 'center' }}>+{(note.attachments?.length || 0) - (note.website ? 1 : 2)}</span>
-                  )}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
+          )}
         </div>
-      </div>
-    </div>
+      )}
+
+      <ContextMenu menu={menu.menu} onClose={menu.close} />
+    </article>
   )
 }
diff --git a/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx b/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
index 8e4482e16..3b33b22d7 100644
--- a/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
+++ b/client/src/components/Collab/CollabNotesCategorySettingsModal.tsx
@@ -1,8 +1,10 @@
-import { createPortal } from 'react-dom'
-import { useState } from 'react'
-import { Plus, Trash2, X } from 'lucide-react'
-import { FONT, NOTE_COLORS } from './CollabNotes.constants'
+import { useId, useState } from 'react'
+import { Plus, Tags, Trash2 } from 'lucide-react'
+import { NOTE_COLORS } from './CollabNotes.constants'
 import { EditableCatName } from './CollabNotesEditableCatName'
+import { DialogButton, DialogFooter, DialogHeader, DialogSection, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { INPUT } from '../shared/dialogParts'
+import { Tooltip } from '../shared/Tooltip'
 
 // ── Category Settings Modal ──────────────────────────────────────────────────
 interface CategorySettingsModalProps {
@@ -18,6 +20,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
   const [localColors, setLocalColors] = useState({ ...categoryColors })
   const [renames, setRenames] = useState<Record<string, string>>({}) // { oldName: newName }
   const [newCatName, setNewCatName] = useState('')
+  const labelId = useId()
 
   const handleColorChange = (cat, color) => {
     setLocalColors(prev => ({ ...prev, [cat]: color }))
@@ -64,87 +67,83 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
   // Merge existing categories from notes with saved colors
   const allCats = [...new Set([...categories, ...Object.keys(localColors)])]
 
-  return createPortal(
-    <div style={{
-      position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))',
-      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
-      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT,
-    }} role="presentation" onClick={onClose}>
-      <div style={{
-        background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 420,
-        maxHeight: '80vh', overflow: 'auto', border: '1px solid var(--border-faint)',
-      }} role="presentation" onClick={e => e.stopPropagation()}>
-        {/* Header */}
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>
-            {t('collab.notes.categorySettings') || 'Category Settings'}
-          </h3>
-          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}>
-            <X size={16} />
-          </button>
-        </div>
-
-        {/* Categories list */}
-        <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
-          {allCats.length === 0 && (
-            <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', textAlign: 'center', padding: 16 }}>
-              {t('collab.notes.noCategoriesYet') || 'No categories yet'}
-            </p>
-          )}
-          {allCats.map(cat => (
-            <div key={cat} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              {/* Color swatches */}
-              <div style={{ display: 'flex', gap: 4 }}>
-                {NOTE_COLORS.map(c => (
-                  <button type="button" key={c.value} onClick={() => handleColorChange(cat, c.value)} style={{
-                    width: 20, height: 20, borderRadius: 6, background: c.value, border: 'none', cursor: 'pointer', padding: 0,
-                    outline: (localColors[cat] || NOTE_COLORS[0].value) === c.value ? '2px solid var(--text-primary)' : '2px solid transparent',
-                    outlineOffset: 1, transition: 'transform 0.1s',
-                    transform: (localColors[cat] || NOTE_COLORS[0].value) === c.value ? 'scale(1.1)' : 'scale(1)',
-                  }} />
-                ))}
-              </div>
-              {/* Category name — editable */}
-              <EditableCatName name={cat} onRename={(newName) => handleRenameCategory(cat, newName)} />
-              {/* Delete */}
-              <button type="button" onClick={() => handleRemoveCategory(cat)} style={{
-                background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 3, display: 'flex',
-              }}
-                onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Trash2 size={13} />
-              </button>
-            </div>
-          ))}
-
-          {/* Add new */}
-          <div style={{ display: 'flex', gap: 6, marginTop: 4 }}>
-            <input value={newCatName} onChange={e => setNewCatName(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
-              placeholder={t('collab.notes.newCategory')}
-              style={{
-                flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
-              }} />
-            <button type="button" onClick={handleAddCategory} disabled={!newCatName.trim()} style={{
-              background: newCatName.trim() ? 'var(--accent)' : 'var(--border-primary)', color: 'var(--accent-text)',
-              border: 'none', borderRadius: 10, padding: '8px 14px', cursor: newCatName.trim() ? 'pointer' : 'default',
-              display: 'flex', alignItems: 'center', flexShrink: 0,
-            }}>
-              <Plus size={14} />
-            </button>
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Tags size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={t('collab.notes.categorySettings') || 'Category Settings'}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('collab.notes.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={handleSave}>{t('collab.notes.save')}</DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <DialogSection label={t('collab.notes.category')}>
+        {allCats.length === 0 ? (
+          <p className="m-0 rounded-[12px] bg-surface-secondary px-4 py-5 text-center text-content-faint" style={fs(12.5, 'body')}>
+            {t('collab.notes.noCategoriesYet') || 'No categories yet'}
+          </p>
+        ) : (
+          <div className="flex flex-col gap-1.5">
+            {allCats.map(cat => {
+              const current = localColors[cat] || NOTE_COLORS[0].value
+              return (
+                <div key={cat} className="flex items-center gap-2.5 rounded-[12px] bg-surface-secondary py-1.5 pl-3 pr-1.5">
+                  <span className="h-2.5 w-2.5 flex-none rounded-full" style={{ background: current }} />
+                  {/* Category name — editable */}
+                  <EditableCatName name={cat} onRename={(newName) => handleRenameCategory(cat, newName)} renameLabel={t('common.rename')} />
+                  {/* Color swatches */}
+                  <div className="flex flex-none gap-1.5" role="group" aria-label={t('collab.notes.color')}>
+                    {NOTE_COLORS.map(c => {
+                      const on = current === c.value
+                      return (
+                        <button type="button" key={c.value} onClick={() => handleColorChange(cat, c.value)} aria-label={c.label} aria-pressed={on}
+                          className="h-5 w-5 rounded-full p-0 transition-transform"
+                          style={{
+                            background: c.value,
+                            outline: on ? '2px solid var(--text-primary)' : '2px solid transparent',
+                            outlineOffset: 1.5,
+                            transform: on ? 'scale(1.08)' : 'scale(1)',
+                          }} />
+                      )
+                    })}
+                  </div>
+                  {/* Delete */}
+                  <Tooltip label={t('collab.notes.delete')}>
+                    <button type="button" onClick={() => handleRemoveCategory(cat)} aria-label={t('collab.notes.delete')}
+                      className="grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint hover:bg-surface-card hover:text-danger">
+                      <Trash2 size={13} />
+                    </button>
+                  </Tooltip>
+                </div>
+              )
+            })}
           </div>
-
-          {/* Save */}
-          <button type="button" onClick={handleSave} style={{
-            width: '100%', borderRadius: 99, padding: '9px 14px', background: 'var(--accent)', color: 'var(--accent-text)',
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: 'pointer', marginTop: 8,
-          }}>
-            {t('collab.notes.save')}
+        )}
+        {/* Add new */}
+        <div className="mt-2 flex gap-2">
+          <input value={newCatName} onChange={e => setNewCatName(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
+            placeholder={t('collab.notes.newCategory')}
+            className={`${INPUT} flex-1`} />
+          <button type="button" onClick={handleAddCategory} disabled={!newCatName.trim()} aria-label={t('collab.notes.newCategory')}
+            className="grid w-10 flex-none place-items-center rounded-[10px] bg-accent text-accent-text disabled:cursor-default disabled:opacity-40">
+            <Plus size={16} />
           </button>
         </div>
-      </div>
-    </div>,
-    document.body
+      </DialogSection>
+
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Collab/CollabNotesEditableCatName.tsx b/client/src/components/Collab/CollabNotesEditableCatName.tsx
index ac396073a..3cc99f474 100644
--- a/client/src/components/Collab/CollabNotesEditableCatName.tsx
+++ b/client/src/components/Collab/CollabNotesEditableCatName.tsx
@@ -1,11 +1,14 @@
 import { useState, useEffect, useRef } from 'react'
+import { Tooltip } from '../shared/Tooltip'
 
 interface EditableCatNameProps {
   name: string
   onRename: (newName: string) => void
+  /** The tooltip on the name, e.g. "Rename". */
+  renameLabel?: string
 }
 
-export function EditableCatName({ name, onRename }: EditableCatNameProps) {
+export function EditableCatName({ name, onRename, renameLabel = 'Click to rename' }: EditableCatNameProps) {
   const [editing, setEditing] = useState(false)
   const [value, setValue] = useState(name)
   const inputRef = useRef(null)
@@ -20,15 +23,23 @@ export function EditableCatName({ name, onRename }: EditableCatNameProps) {
 
   if (editing) {
     return <input ref={inputRef} value={value} onChange={e => setValue(e.target.value)}
-      onBlur={save} onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setValue(name); setEditing(false) } }}
-      style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '2px 8px', background: 'var(--bg-input)', fontFamily: 'inherit', outline: 'none' }} />
+      onBlur={save}
+      onKeyDown={e => {
+        if (e.key === 'Enter') save()
+        // Escape only drops the rename; the dialog around it stays open.
+        if (e.key === 'Escape') { e.preventDefault(); setValue(name); setEditing(false) }
+      }}
+      className="min-w-0 flex-1 rounded-[8px] border border-edge bg-surface-input px-2 py-0.5 font-semibold text-content outline-none focus:ring-2 focus:ring-[color:var(--text-primary)]"
+      style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }} />
   }
 
   return (
-    <button type="button" onClick={() => { setValue(name); setEditing(true) }}
-      style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', cursor: 'pointer', padding: '2px 0', background: 'none', border: 'none', textAlign: 'left', fontFamily: 'inherit' }}
-      title="Click to rename">
-      {name}
-    </button>
+    <Tooltip label={renameLabel}>
+      <button type="button" onClick={() => { setValue(name); setEditing(true) }}
+        className="min-w-0 flex-1 truncate py-0.5 text-left font-semibold text-content hover:underline hover:decoration-edge"
+        style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>
+        {name}
+      </button>
+    </Tooltip>
   )
 }
diff --git a/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx b/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
index acf48e058..40bd3a835 100644
--- a/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
+++ b/client/src/components/Collab/CollabNotesFilePreviewPortal.tsx
@@ -1,8 +1,11 @@
 import { createPortal } from 'react-dom'
-import { useState, useEffect } from 'react'
-import { X, ExternalLink, Loader2 } from 'lucide-react'
+import { useState, useEffect, useId } from 'react'
+import { X, ExternalLink, FileText, Loader2 } from 'lucide-react'
 import { getAuthUrl } from '../../api/authUrl'
 import { openFile } from '../../utils/fileDownload'
+import { useTranslation } from '../../i18n'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT, PILL, fs } from '../shared/DialogShell'
+import { Tooltip } from '../shared/Tooltip'
 import type { NoteFile } from './CollabNotes.types'
 
 // ── File Preview Portal ─────────────────────────────────────────────────────
@@ -11,7 +14,12 @@ interface FilePreviewPortalProps {
   onClose: () => void
 }
 
+/** The round buttons over the dark image backdrop. */
+const LIGHTBOX_BTN = 'grid h-9 w-9 place-items-center rounded-full bg-[rgba(255,255,255,0.12)] text-[rgba(255,255,255,0.85)] hover:bg-[rgba(255,255,255,0.22)]' // theme-lint-disable: the lightbox is dark in every scheme
+
 export function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
+  const { t } = useTranslation()
+  const labelId = useId()
   const [authUrl, setAuthUrl] = useState('')
   const rawUrl = file?.url || ''
   useEffect(() => {
@@ -20,54 +28,80 @@ export function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
     getAuthUrl(rawUrl, 'download').then(setAuthUrl)
   }, [rawUrl])
 
+  const isImage = !!file?.mime_type?.startsWith('image/')
+  // The dialog handles its own Escape; the image lightbox takes it here.
+  useEffect(() => {
+    if (!file || !isImage) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [file, isImage, onClose])
+
   if (!file) return null
-  const isImage = file.mime_type?.startsWith('image/')
   const isPdf = file.mime_type === 'application/pdf'
   const isTxt = file.mime_type?.startsWith('text/')
 
   const openInNewTab = () => openFile(rawUrl).catch(() => {})
 
-  return createPortal(
-    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }} role="presentation" onClick={onClose}>
-      {isImage ? (
-        /* Image lightbox — floating controls */
-        <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} role="presentation" onClick={e => e.stopPropagation()}>
+  if (isImage) {
+    return createPortal(
+      <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-[rgba(0,0,0,0.88)] p-4" role="presentation" onClick={onClose}> {/* theme-lint-disable: the lightbox is dark in every scheme */}
+        {/* Image lightbox — floating controls */}
+        <div className="relative max-h-[90vh] max-w-[90vw]" role="presentation" onClick={e => e.stopPropagation()}>
           {authUrl
-            ? <img src={authUrl} alt={file.original_name} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} />
+            ? <img src={authUrl} alt={file.original_name} className="block max-h-[90vh] max-w-[90vw] rounded-[14px] object-contain" />
             : <Loader2 size={32} className="animate-spin text-[rgba(255,255,255,0.5)]" />
           }
-          <div style={{ position: 'absolute', top: -36, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{file.original_name}</span>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <button type="button" onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}><ExternalLink size={15} /></button>
-              <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}><X size={17} /></button>
+          <div className="absolute inset-x-0 -top-12 flex items-center justify-between gap-3 px-1">
+            <span className="truncate text-[rgba(255,255,255,0.8)]" style={fs(12, 'body')}>{file.original_name}</span>
+            <div className="flex flex-none gap-2">
+              <Tooltip label={t('files.openTab')}>
+                <button type="button" onClick={openInNewTab} aria-label={t('files.openTab')} className={LIGHTBOX_BTN}><ExternalLink size={15} /></button>
+              </Tooltip>
+              <Tooltip label={t('common.close')}>
+                <button type="button" onClick={onClose} aria-label={t('common.close')} className={LIGHTBOX_BTN}><X size={17} /></button>
+              </Tooltip>
             </div>
           </div>
         </div>
-      ) : (
-        /* Document viewer — card with header */
-        <div style={{ width: '100%', maxWidth: 950, height: '94vh', display: 'flex', flexDirection: 'column', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }} role="presentation" onClick={e => e.stopPropagation()}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-            <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{file.original_name}</span>
-            <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
-              <button type="button" onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)', padding: 0 }}><ExternalLink size={13} /></button>
-              <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={18} /></button>
-            </div>
-          </div>
-          {(isPdf || isTxt) ? (
-            <object data={authUrl ? `${authUrl}#view=FitH` : ''} type={file.mime_type} style={{ flex: 1, width: '100%', border: 'none', background: '#fff' }} title={file.original_name}>
-              <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <button type="button" onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 'calc(14px * var(--fs-scale-body, 1))', padding: 0 }}>Download</button>
-              </p>
-            </object>
-          ) : (
-            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
-              <button type="button" onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 'calc(14px * var(--fs-scale-body, 1))', padding: 0 }}>Download {file.original_name}</button>
-            </div>
+      </div>,
+      document.body
+    )
+  }
+
+  /* Document viewer — the planner's dialog, the name on the head band */
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="wide"
+      bodyClassName="flex min-h-0 flex-1 flex-col"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><FileText size={20} strokeWidth={1.9} className={isPdf ? 'text-danger' : 'text-content-muted'} /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={file.original_name}
+          pills={(
+            <button type="button" onClick={openInNewTab} className={`${PILL} hover:opacity-80`}>
+              <ExternalLink size={13} strokeWidth={2.2} /> {t('files.openTab')}
+            </button>
           )}
+        />
+      )}
+    >
+      {(isPdf || isTxt) ? (
+        <object data={authUrl ? `${authUrl}#view=FitH` : ''} type={file.mime_type} className="h-[74vh] w-full flex-1 border-0 bg-white" title={file.original_name}> {/* theme-lint-disable: a document page is white */}
+          <p className="p-6 text-center text-content-muted">
+            <button type="button" onClick={openInNewTab} className="text-content underline" style={fs(14, 'body')}>Download</button>
+          </p>
+        </object>
+      ) : (
+        <div className="flex flex-1 items-center justify-center p-10">
+          <button type="button" onClick={openInNewTab} className="text-content underline" style={fs(14, 'body')}>Download {file.original_name}</button>
         </div>
       )}
-    </div>,
-    document.body
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Collab/CollabNotesFormModal.test.tsx b/client/src/components/Collab/CollabNotesFormModal.test.tsx
index 2b393d708..40df8f191 100644
--- a/client/src/components/Collab/CollabNotesFormModal.test.tsx
+++ b/client/src/components/Collab/CollabNotesFormModal.test.tsx
@@ -146,8 +146,7 @@ describe('NoteFormModal', () => {
   it('FE-W5CNF-007: the close button calls back without submitting', async () => {
     const user = userEvent.setup()
     const { onClose, onSubmit } = renderModal()
-    const header = screen.getByText('collab.notes.new').parentElement!
-    await user.click(header.querySelector('button')!)
+    await user.click(screen.getByRole('button', { name: 'Close' }))
     expect(onClose).toHaveBeenCalledTimes(1)
     expect(onSubmit).not.toHaveBeenCalled()
   })
@@ -159,9 +158,10 @@ describe('NoteFormModal', () => {
       categoryColors: { Sights: '#6366f1' },
     })
     const sights = screen.getByRole('button', { name: 'Sights' })
-    expect(sights.style.background).toBe('transparent')
+    expect(sights).toHaveAttribute('aria-pressed', 'false')
     await user.click(sights)
-    expect(sights.style.background).toBe('rgba(99, 102, 241, 0.094)')
+    expect(sights).toHaveAttribute('aria-pressed', 'true')
+    expect(sights.style.color).toBe('rgb(99, 102, 241)')
     await user.type(screen.getByPlaceholderText('collab.notes.titlePlaceholder'), 'Museum')
     await user.click(screen.getByRole('button', { name: 'collab.notes.create' }))
     await waitFor(() => expect(onSubmit).toHaveBeenCalled())
diff --git a/client/src/components/Collab/CollabNotesFormModal.tsx b/client/src/components/Collab/CollabNotesFormModal.tsx
index 289995c8e..4efe96fe7 100644
--- a/client/src/components/Collab/CollabNotesFormModal.tsx
+++ b/client/src/components/Collab/CollabNotesFormModal.tsx
@@ -1,9 +1,10 @@
-import { createPortal } from 'react-dom'
-import { useState, useRef } from 'react'
-import { Plus, X } from 'lucide-react'
+import { useId, useState, useRef } from 'react'
+import { Plus, StickyNote, X } from 'lucide-react'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { EditorField, INPUT, TEXTAREA } from '../shared/dialogParts'
+import { Tooltip } from '../shared/Tooltip'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
-import { FONT } from './CollabNotes.constants'
 import { AuthedImg } from './CollabNotesAuthedImg'
 import type { CollabNote } from './CollabNotes.types'
 
@@ -37,9 +38,10 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
   const fileRef = useRef(null)
 
   const finalCategory = category
+  const labelId = useId()
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
     if (!title.trim()) return
     setSubmitting(true)
     try {
@@ -67,246 +69,119 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
 
   const canSubmit = title.trim() && !submitting
 
-  return createPortal(
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'var(--overlay-bg, rgba(0,0,0,0.35))',
-        backdropFilter: 'blur(6px)',
-        WebkitBackdropFilter: 'blur(6px)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 9999,
-        padding: 16,
-        fontFamily: FONT,
-      }}
-    >
-      <form
-        role="presentation"
-        style={{
-          background: 'var(--bg-card)',
-          borderRadius: 16,
-          width: '100%',
-          maxWidth: 400,
-          maxHeight: '90vh',
-          overflow: 'auto',
-          border: '1px solid var(--border-faint)',
-        }}
-        onClick={e => e.stopPropagation()}
-        onPaste={e => {
-          if (!canUploadFiles) return
-          const items = e.clipboardData?.items
-          if (!items) return
-          for (const item of Array.from(items)) {
-            if (item.type.startsWith('image/') || item.type === 'application/pdf') {
-              e.preventDefault()
-              const file = item.getAsFile()
-              if (file) setPendingFiles(prev => [...prev, file])
-              return
-            }
+  const tint = category ? `color-mix(in srgb, ${getCategoryColor(category)} 12%, transparent)` : NEUTRAL_TINT
+  const chip = 'flex items-center gap-1 rounded-full border border-edge-faint bg-surface-secondary px-2 py-[3px] text-content-muted'
+
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      // Only the close button takes a note away: a stray click or key must not lose what was written.
+      blocked
+      onPaste={e => {
+        if (!canUploadFiles) return
+        const items = e.clipboardData?.items
+        if (!items) return
+        for (const item of Array.from(items)) {
+          if (item.type.startsWith('image/') || item.type === 'application/pdf') {
+            e.preventDefault()
+            const file = item.getAsFile()
+            if (file) setPendingFiles(prev => [...prev, file])
+            return
           }
-        }}
-        onSubmit={handleSubmit}
-      >
-        {/* Modal header */}
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '14px 16px 12px',
-          borderBottom: '1px solid var(--border-faint)',
-        }}>
-          <h3 style={{
-            fontSize: 'calc(14px * var(--fs-scale-body, 1))',
-            fontWeight: 700,
-            color: 'var(--text-primary)',
-            margin: 0,
-            fontFamily: FONT,
-          }}>
-            {isEdit ? t('collab.notes.edit') : t('collab.notes.new')}
-          </h3>
-          <button
-            type="button"
-            onClick={onClose}
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              color: 'var(--text-faint)',
-              padding: 2,
-              borderRadius: 6,
-              display: 'flex',
-            }}
-          >
-            <X size={16} />
-          </button>
-        </div>
+        }
+      }}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><StickyNote size={20} strokeWidth={1.9} style={{ color: category ? getCategoryColor(category) : 'var(--text-muted)' }} /></DialogTile>}
+          tint={tint}
+          labelId={labelId}
+          onClose={onClose}
+          eyebrow={isEdit ? t('collab.notes.edit') : t('collab.notes.new')}
+          titleInput={{
+            value: title,
+            onChange: setTitle,
+            label: t('collab.notes.titlePlaceholder'),
+            placeholder: t('collab.notes.titlePlaceholder'),
+            autoFocus: true,
+            onKeyDown: e => { if (e.key === 'Enter') void handleSubmit() },
+          }}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={() => void handleSubmit()} disabled={!canSubmit}>
+            {submitting ? '...' : isEdit ? t('collab.notes.save') : t('collab.notes.create')}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <form className="flex flex-col gap-5" onSubmit={handleSubmit}>
+        <EditorField label={t('collab.notes.content')} htmlFor={`${labelId}-content`}>
+          <textarea id={`${labelId}-content`} value={content} onChange={e => setContent(e.target.value)} placeholder={t('collab.notes.contentPlaceholder')}
+            rows={7} className={`${TEXTAREA} resize-y`} />
+        </EditorField>
 
-        {/* Modal body */}
-        <div style={{
-          padding: '14px 16px 16px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 12,
-        }}>
-          {/* Title */}
-          <div>
-            <div style={{
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
-              fontWeight: 600,
-              color: 'var(--text-faint)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: 4,
-              fontFamily: FONT,
-            }}>
-              {t('collab.notes.title')}
-            </div>
-            <input
-              autoFocus
-              value={title}
-              onChange={e => setTitle(e.target.value)}
-              placeholder={t('collab.notes.titlePlaceholder')}
-              style={{
-                width: '100%',
-                border: '1px solid var(--border-primary)',
-                borderRadius: 10,
-                padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))',
-                background: 'var(--bg-input)',
-                color: 'var(--text-primary)',
-                fontFamily: 'inherit',
-                outline: 'none',
-                boxSizing: 'border-box',
-              }}
-            />
-          </div>
-
-          {/* Content */}
-          <div>
-            <div style={{
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
-              fontWeight: 600,
-              color: 'var(--text-faint)',
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-              marginBottom: 4,
-              fontFamily: FONT,
-            }}>
-              {t('collab.notes.contentPlaceholder')}
-            </div>
-            <textarea
-              value={content}
-              onChange={e => setContent(e.target.value)}
-              placeholder={t('collab.notes.contentPlaceholder')}
-              style={{
-                width: '100%',
-                border: '1px solid var(--border-primary)',
-                borderRadius: 10,
-                padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))',
-                background: 'var(--bg-input)',
-                color: 'var(--text-primary)',
-                fontFamily: 'inherit',
-                outline: 'none',
-                boxSizing: 'border-box',
-                resize: 'vertical',
-                minHeight: 180,
-                lineHeight: 1.5,
-              }}
-            />
-          </div>
-
-          {/* Category pills */}
-          <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, fontFamily: FONT }}>
-              {t('collab.notes.category')}
-            </div>
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+        {allCategories.length > 0 && (
+          <EditorField label={t('collab.notes.category')}>
+            <div className="flex flex-wrap gap-1.5">
               {allCategories.map(cat => {
                 const c = getCategoryColor(cat)
                 const active = category === cat
                 return (
-                  <button key={cat} type="button" onClick={() => setCategory(cat)}
-                    style={{ padding: '4px 12px', borderRadius: 99, border: active ? `1.5px solid ${c}` : '1px solid var(--border-faint)', background: active ? `${c}18` : 'transparent', color: active ? c : 'var(--text-muted)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: FONT }}>
+                  <button key={cat} type="button" onClick={() => setCategory(cat)} aria-pressed={active}
+                    className="rounded-full px-3 py-1 font-semibold"
+                    style={{ ...fs(12, 'body'), border: active ? `1.5px solid ${c}` : '1px solid var(--border-faint)', background: active ? `color-mix(in srgb, ${c} 12%, transparent)` : 'var(--bg-card)', color: active ? c : 'var(--text-muted)' }}>
                     {cat}
                   </button>
                 )
               })}
             </div>
-          </div>
+          </EditorField>
+        )}
 
-          {/* Website */}
-          <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
-              {t('collab.notes.website')}
-            </div>
-            <input value={website} onChange={e => setWebsite(e.target.value)}
-              placeholder={t('collab.notes.websitePlaceholder')}
-              style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
-          </div>
+        <EditorField label={t('collab.notes.website')} htmlFor={`${labelId}-website`}>
+          <input id={`${labelId}-website`} value={website} onChange={e => setWebsite(e.target.value)} placeholder={t('collab.notes.websitePlaceholder')} className={INPUT} />
+        </EditorField>
 
-          {/* File attachments */}
-          {canUploadFiles && <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
-              {t('collab.notes.attachFiles')}
-            </div>
+        {canUploadFiles && (
+          <EditorField label={t('collab.notes.attachFiles')}>
             <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={e => { const files = e.target.files; if (files?.length) setPendingFiles(prev => [...prev, ...Array.from(files)]); e.target.value = '' }} />
-            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', alignItems: 'center' }}>
+            <div className="flex flex-wrap items-center gap-1.5" style={fs(11.5)}>
               {/* Existing attachments (edit mode) */}
               {existingAttachments.map(a => {
                 const isImage = a.mime_type?.startsWith('image/')
                 return (
-                  <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)' }}>
-                    {isImage && <AuthedImg src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
+                  <div key={a.id} className={chip}>
+                    {isImage && <AuthedImg src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 999 }} />}
                     {(a.original_name || '').length > 20 ? a.original_name.slice(0, 17) + '...' : a.original_name}
-                    <button type="button" onClick={() => handleDeleteAttachment(a.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444', padding: 0, display: 'flex' }}>
-                      <X size={10} />
-                    </button>
+                    <Tooltip label={t('common.delete')}>
+                      <button type="button" onClick={() => handleDeleteAttachment(a.id)} aria-label={t('common.delete')} className="flex text-danger">
+                        <X size={11} />
+                      </button>
+                    </Tooltip>
                   </div>
                 )
               })}
               {/* New pending files */}
               {pendingFiles.map((f, i) => (
-                <div key={`new-${i}`} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)' }}>
+                <div key={`new-${i}`} className={chip}>
                   {f.name.length > 20 ? f.name.slice(0, 17) + '...' : f.name}
-                  <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 0, display: 'flex' }}>
-                    <X size={10} />
+                  <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="flex text-content-faint hover:text-content">
+                    <X size={11} />
                   </button>
                 </div>
               ))}
               <button type="button" onClick={() => fileRef.current?.click()}
-                style={{ padding: '4px 10px', borderRadius: 8, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontFamily: FONT, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                className="inline-flex items-center gap-1 rounded-full border border-dashed border-edge px-3 py-[3px] font-semibold text-content-muted hover:text-content">
                 <Plus size={11} /> {t('files.attach') || 'Add'}
               </button>
             </div>
-          </div>}
-
-          {/* Submit */}
-          <button
-            type="submit"
-            disabled={!canSubmit}
-            style={{
-              width: '100%',
-              borderRadius: 99,
-              padding: '7px 14px',
-              background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
-              color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)',
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-              fontWeight: 600,
-              fontFamily: FONT,
-              border: 'none',
-              cursor: canSubmit ? 'pointer' : 'default',
-              marginTop: 4,
-            }}
-          >
-            {submitting ? '...' : isEdit ? t('collab.notes.save') : t('collab.notes.create')}
-          </button>
-        </div>
+          </EditorField>
+        )}
       </form>
-    </div>,
-    document.body
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Collab/CollabNotesWebsiteThumbnail.tsx b/client/src/components/Collab/CollabNotesWebsiteThumbnail.tsx
index 21f59cdb7..3cd241ae3 100644
--- a/client/src/components/Collab/CollabNotesWebsiteThumbnail.tsx
+++ b/client/src/components/Collab/CollabNotesWebsiteThumbnail.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import { ExternalLink } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
 import { collabApi } from '../../api/client'
 import { safeExternalHref } from '../../utils/safeUrl'
 
@@ -69,14 +70,16 @@ export function WebsiteThumbnail({ url, tripId, color }: WebsiteThumbnailProps)
     </>
   )
 
-  if (!href) return <span title={data?.title || url} style={tileStyle}>{tile}</span>
+  if (!href) return <Tooltip label={data?.title || url}><span style={tileStyle}>{tile}</span></Tooltip>
 
   return (
-    <a href={href} target="_blank" rel="noopener noreferrer" title={data?.title || url}
+    <Tooltip label={data?.title || url}>
+    <a href={href} target="_blank" rel="noopener noreferrer" aria-label={data?.title || url}
       style={tileStyle}
       onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.08)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
       onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
       {tile}
     </a>
+    </Tooltip>
   )
 }
diff --git a/client/src/components/Collab/CollabPanel.tsx b/client/src/components/Collab/CollabPanel.tsx
index 02c94ddd7..a78dbc5bd 100644
--- a/client/src/components/Collab/CollabPanel.tsx
+++ b/client/src/components/Collab/CollabPanel.tsx
@@ -7,6 +7,7 @@ import CollabNotes from './CollabNotes'
 import CollabPolls from './CollabPolls'
 import WhatsNextWidget from './WhatsNextWidget'
 import CollabLinks from './CollabLinks'
+import CollabPanelHead from './CollabPanelHead'
 
 function useIsDesktop(breakpoint = 1024) {
   const [isDesktop, setIsDesktop] = useState(window.innerWidth >= breakpoint)
@@ -18,7 +19,7 @@ function useIsDesktop(breakpoint = 1024) {
   return isDesktop
 }
 
-const cardClass = 'flex flex-col bg-surface-card rounded-2xl border border-edge-faint overflow-hidden min-h-0'
+const cardClass = 'flex flex-col bg-surface-secondary rounded-2xl border border-edge-faint overflow-hidden min-h-0'
 
 interface TripMember {
   id: number
@@ -91,8 +92,17 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
       {p === 'whatsnext' && <WhatsNextWidget tripMembers={tripMembers} />}
     </>
   )
+  // The chat carries the same head band as the panels beside it.
+  const chatPanel = (
+    <>
+      <CollabPanelHead icon={MessageCircle} title={t('collab.tabs.chat') || 'Chat'} />
+      <div className="flex min-h-0 flex-1 flex-col">
+        <CollabChat tripId={tripId} currentUser={user} />
+      </div>
+    </>
+  )
   const panelRow = (ids: string[]) => (
-    <div style={{ flex: 1, display: 'flex', gap: 12, minHeight: 0 }}>
+    <div style={{ flex: 1, display: 'flex', gap: 16, minHeight: 0 }}>
       {ids.map(p => <div key={p} className={cardClass} style={{ flex: 1, minWidth: 0 }}>{renderPanel(p)}</div>)}
     </div>
   )
@@ -105,9 +115,9 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
     if (chatOn && rightPanels.length === 0) {
       // Only chat
       return (
-        <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
+        <div className="flex h-full min-h-0 gap-4 overflow-hidden px-7 py-6">
           <div className={cardClass} style={{ flex: 1 }}>
-            <CollabChat tripId={tripId} currentUser={user} />
+            {chatPanel}
           </div>
         </div>
       )
@@ -116,11 +126,11 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
     if (chatOn) {
       // Chat left (380px) + right panels
       return (
-        <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
+        <div className="flex h-full min-h-0 gap-4 overflow-hidden px-7 py-6">
           <div className={cardClass} style={{ flex: '0 0 380px' }}>
-            <CollabChat tripId={tripId} currentUser={user} />
+            {chatPanel}
           </div>
-          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 12, overflow: 'hidden', minHeight: 0 }}>
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16, overflow: 'hidden', minHeight: 0 }}>
             {rightPanels.length <= 2 && panelRow(rightPanels)}
             {rightPanels.length >= 3 && (() => {
               // Two rows, split by kind rather than by a pair being present:
@@ -142,7 +152,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
     // Chat off — remaining panels share full width
     const panels = rightPanels
     return (
-      <div style={{ height: '100%', display: 'flex', gap: 12, padding: 12, overflow: 'hidden', minHeight: 0 }}>
+      <div className="flex h-full min-h-0 gap-4 overflow-hidden px-7 py-6">
         {panels.map(p => (
           <div key={p} className={cardClass} style={{ flex: 1 }}>{renderPanel(p)}</div>
         ))}
diff --git a/client/src/components/Collab/CollabPanelHead.tsx b/client/src/components/Collab/CollabPanelHead.tsx
new file mode 100644
index 000000000..25c243daf
--- /dev/null
+++ b/client/src/components/Collab/CollabPanelHead.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
+
+/** A panel's add action: a soft card pill on the head band. */
+export const HEAD_ACTION = 'inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-surface-card px-2.5 py-1 font-semibold text-content-muted shadow-sm hover:text-content'
+
+/**
+ * The head band every Collab panel opens with, the same one the cards of the
+ * other trip tabs carry: its icon and name in small capitals, how many there
+ * are, and its actions on the right.
+ */
+export default function CollabPanelHead({ icon: Icon, title, count, actions }: {
+  icon: LucideIcon
+  title: string
+  count?: number
+  actions?: ReactNode
+}) {
+  return (
+    <div className="flex min-h-[50px] flex-none items-center gap-2 border-b border-edge-faint px-4 py-2" style={{ background: NEUTRAL_TINT }}>
+      <Icon size={14} strokeWidth={2} className="flex-none text-content-faint" />
+      <h3 className="m-0 font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(11)}>{title}</h3>
+      {count != null && count > 0 && (
+        <span className="rounded-full bg-surface-card px-2 py-[2px] font-geist font-bold text-content-muted" style={fs(10)}>{count}</span>
+      )}
+      {actions && <div className="ml-auto flex items-center gap-1.5" style={fs(11.5)}>{actions}</div>}
+    </div>
+  )
+}
diff --git a/client/src/components/Collab/CollabPolls.test.tsx b/client/src/components/Collab/CollabPolls.test.tsx
index 59491533d..537ca4e4f 100644
--- a/client/src/components/Collab/CollabPolls.test.tsx
+++ b/client/src/components/Collab/CollabPolls.test.tsx
@@ -219,7 +219,7 @@ describe('CollabPolls', () => {
     await screen.findByText('Best destination?');
 
     // Delete button has a title with "delete"
-    const deleteBtn = screen.getByTitle(/delete/i);
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
     await user.click(deleteBtn);
 
     await waitFor(() => expect(deleteCalled).toBe(true));
@@ -420,18 +420,13 @@ describe('CollabPolls details', () => {
     expect(screen.getByText('?')).toBeInTheDocument();
   });
 
-  it('FE-W5CPL-012: hovering an open option scales it, a closed one stays put', async () => {
+  it('FE-W5CPL-012: an open option can be voted on, a closed one cannot', async () => {
     servePolls({ polls: [buildPoll({ id: 1 }), buildPoll({ id: 2, question: 'Done?', is_closed: true })] });
     render(<CollabPolls {...defaultProps} />);
     await screen.findByText('Done?');
     const [openOption, closedOption] = screen.getAllByText('Paris').map(el => el.closest('button')!);
-    fireEvent.mouseEnter(openOption);
-    expect(openOption.style.transform).toBe('scale(1.01)');
-    fireEvent.mouseLeave(openOption);
-    expect(openOption.style.transform).toBe('scale(1)');
-
-    fireEvent.mouseEnter(closedOption);
-    expect(closedOption.style.transform).toBe('');
+    expect(openOption).toBeEnabled();
+    expect(closedOption).toBeDisabled();
   });
 
   it('FE-W5CPL-013: the closed section heading only appears next to active polls', async () => {
@@ -461,22 +456,15 @@ describe('CollabPolls details', () => {
     render(<CollabPolls {...defaultProps} />);
     await screen.findByText('Stays open?');
 
-    // Both action buttons highlight on hover
-    const closeBtn = screen.getAllByTitle('Close')[0];
-    fireEvent.mouseEnter(closeBtn);
-    expect(closeBtn.style.color).toBe('var(--text-primary)');
-    fireEvent.mouseLeave(closeBtn);
-    expect(closeBtn.style.color).toBe('var(--text-faint)');
-    const deleteBtn = screen.getAllByTitle('Delete')[0];
-    fireEvent.mouseEnter(deleteBtn);
-    expect(deleteBtn.style.color).toBe('rgb(239, 68, 68)');
-    fireEvent.mouseLeave(deleteBtn);
-    expect(deleteBtn.style.color).toBe('var(--text-faint)');
+    // Both actions sit on each poll's head band
+    const closeBtn = screen.getAllByRole('button', { name: 'Close' })[0];
+    const deleteBtn = screen.getAllByRole('button', { name: 'Delete' })[0];
+    expect(deleteBtn).toBeInTheDocument();
 
     await user.click(closeBtn);
     await waitFor(() => expect(closeCalled).toBe(true));
     await waitFor(() => expect(screen.getAllByText('Closed')).toHaveLength(2));
-    expect(screen.getAllByTitle('Close')).toHaveLength(1);
+    expect(screen.getAllByRole('button', { name: 'Close' })).toHaveLength(1);
   });
 
   it('FE-W5CPL-027: a failing poll request falls back to the empty state', async () => {
@@ -501,9 +489,9 @@ describe('CollabPolls details', () => {
     const user = userEvent.setup();
     render(<CollabPolls {...defaultProps} />);
     await screen.findByText('Best destination?');
-    await user.click(screen.getByTitle(/close/i));
+    await user.click(screen.getByRole('button', { name: /close/i }));
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
-    expect(screen.getByTitle(/close/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
   });
 
   it('FE-W5CPL-016: a failing delete shows an error and keeps the poll', async () => {
@@ -514,7 +502,7 @@ describe('CollabPolls details', () => {
     const user = userEvent.setup();
     render(<CollabPolls {...defaultProps} />);
     await screen.findByText('Best destination?');
-    await user.click(screen.getByTitle(/delete/i));
+    await user.click(screen.getByRole('button', { name: /delete/i }));
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Error', 'error', undefined));
     expect(screen.getByText('Best destination?')).toBeInTheDocument();
   });
@@ -637,10 +625,10 @@ describe('CollabPolls details', () => {
     await screen.findByText(/no polls yet|collab\.polls\.empty/i);
     await user.click(screen.getByRole('button', { name: /new/i }));
 
-    const toggle = screen.getByText(/multiple|multi/i).previousElementSibling as HTMLElement;
-    expect(toggle.style.background).toBe('var(--border-primary)');
+    const toggle = screen.getByRole('switch');
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
     await user.click(toggle);
-    expect(toggle.style.background).toBe('rgb(0, 122, 255)');
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
 
     await user.type(screen.getByPlaceholderText(/what should we do/i), 'Multi?');
     const optionInputs = screen.getAllByPlaceholderText(/option/i);
diff --git a/client/src/components/Collab/CollabPolls.tsx b/client/src/components/Collab/CollabPolls.tsx
index 276931c25..295aefbcf 100644
--- a/client/src/components/Collab/CollabPolls.tsx
+++ b/client/src/components/Collab/CollabPolls.tsx
@@ -1,5 +1,10 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback, useId } from 'react'
 import { Plus, Trash2, X, Check, BarChart3, Lock, Clock } from 'lucide-react'
+import { RoundAction } from '../Planner/bookings/bookingParts'
+import CollabPanelHead, { HEAD_ACTION } from './CollabPanelHead'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { AddRowButton, EditorField, TEXTAREA } from '../shared/dialogParts'
+import { Tooltip } from '../shared/Tooltip'
 import ReactMarkdown, { type Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -11,7 +16,6 @@ import { useToast } from '../shared/Toast'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import EmptyState from '../shared/EmptyState'
-import { createPortal } from 'react-dom'
 import type { User } from '../../types'
 
 interface PollVoter {
@@ -107,8 +111,9 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
 
   const canSubmit = question.trim() && options.filter(o => o.trim()).length >= 2 && !submitting
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const labelId = useId()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
     if (!canSubmit) return
     setSubmitting(true)
     try {
@@ -119,109 +124,87 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
     } catch {} finally { setSubmitting(false) }
   }
 
-  return createPortal(
-    <div role="presentation" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={e => { if (e.target === e.currentTarget) onClose() }}>
-      <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onSubmit={handleSubmit}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.polls.new')}</h3>
-          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
-        </div>
-        <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
-          {/* Question */}
-          <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
-            <textarea autoFocus rows={5} value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder')} style={{ width: '100%', minHeight: 110, resize: 'vertical', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.4, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 3 }}>{t('collab.polls.markdownHint')}</div>
-          </div>
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="narrow"
+      onSubmit={handleSubmit}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><BarChart3 size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={t('collab.polls.new')}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={() => void handleSubmit()} disabled={!canSubmit}>{submitting ? '...' : t('collab.polls.create')}</DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <EditorField label={t('collab.polls.question')} hint={t('collab.polls.markdownHint')}>
+        <textarea autoFocus rows={4} value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder')} className={`${TEXTAREA} resize-y`} />
+      </EditorField>
 
-          {/* Options */}
-          <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.options')}</div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {options.map((opt, i) => (
-                <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                  <textarea rows={2} value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
-                    style={{ flex: 1, minWidth: 0, resize: 'vertical', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.35, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
-                  {options.length > 2 && (
-                    <button type="button" onClick={() => removeOption(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={14} /></button>
-                  )}
-                </div>
-              ))}
-              <button type="button" onClick={addOption} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 10, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontFamily: FONT }}>
-                <Plus size={12} /> {t('collab.polls.addOption')}
-              </button>
+      <EditorField label={t('collab.polls.options')}>
+        <div className="flex flex-col gap-2">
+          {options.map((opt, i) => (
+            <div key={i} className="flex items-start gap-2">
+              <textarea rows={2} value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`} className={`${TEXTAREA} resize-y`} />
+              {options.length > 2 && (
+                <Tooltip label={t('common.delete')}>
+                  <button type="button" onClick={() => removeOption(i)} aria-label={t('common.delete')} className="mt-1.5 grid h-7 w-7 flex-none place-items-center rounded-full text-content-faint hover:text-danger">
+                    <X size={14} />
+                  </button>
+                </Tooltip>
+              )}
             </div>
-          </div>
-
-          {/* Multi choice toggle */}
-          <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
-            <button type="button" role="switch" aria-checked={multiChoice} onClick={() => setMultiChoice(!multiChoice)} style={{
-              width: 36, height: 20, borderRadius: 10, padding: 2, cursor: 'pointer', border: 'none',
-              background: multiChoice ? '#007AFF' : 'var(--border-primary)', transition: 'background 0.2s',
-              display: 'flex', alignItems: 'center',
-            }}>
-              <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'transform 0.2s', transform: multiChoice ? 'translateX(16px)' : 'translateX(0)' }} />
-            </button>
-            <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', fontFamily: FONT }}>{t('collab.polls.multiChoice')}</span>
-          </label>
-
-          {/* Submit */}
-          <button type="submit" disabled={!canSubmit} style={{
-            width: '100%', borderRadius: 99, padding: '9px 14px', background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
-            color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: canSubmit ? 'pointer' : 'default', fontFamily: FONT,
-          }}>
-            {submitting ? '...' : t('collab.polls.create')}
-          </button>
+          ))}
+          {/* The string starts with its own "+", and the button already draws one. */}
+          <AddRowButton onClick={addOption}>{t('collab.polls.addOption').replace(/^\+\s*/, '')}</AddRowButton>
         </div>
-      </form>
-    </div>,
-    document.body
+      </EditorField>
+
+      <label className="flex cursor-pointer items-center justify-between gap-3 rounded-[12px] bg-surface-secondary px-3 py-2.5">
+        <span className="text-content" style={fs(13, 'body')}>{t('collab.polls.multiChoice')}</span>
+        <button type="button" role="switch" aria-checked={multiChoice} onClick={() => setMultiChoice(!multiChoice)}
+          className={`flex h-5 w-9 flex-none items-center rounded-full p-0.5 transition-colors ${multiChoice ? 'bg-accent' : 'bg-surface-tertiary'}`}>
+          <span className={`block h-4 w-4 rounded-full bg-surface-card shadow-sm transition-transform ${multiChoice ? 'translate-x-4' : ''}`} />
+        </button>
+      </label>
+    </DialogShell>
   )
 }
 
-// ── Voter Chip with custom tooltip ────────────────────────────────────────────
+// ── Voter Chip ───────────────────────────────────────────────────────────────
 interface VoterChipProps {
   voter: PollVoter
   offset: boolean
 }
 
 function VoterChip({ voter, offset }: VoterChipProps) {
-  const [hover, setHover] = useState(false)
-  const ref = React.useRef(null)
-  const [pos, setPos] = useState({ top: 0, left: 0 })
-
   return (
-    <>
-      <div ref={ref}
-        onMouseEnter={() => {
-          if (ref.current) {
-            const rect = ref.current.getBoundingClientRect()
-            setPos({ top: rect.top - 6, left: rect.left + rect.width / 2 })
-          }
-          setHover(true)
-        }}
-        onMouseLeave={() => setHover(false)}
-        style={{
-          width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden',
-          border: '1.5px solid var(--bg-card)', marginLeft: offset ? -5 : 0, flexShrink: 0,
-        }}>
-        {voter.avatar_url ? <img src={voter.avatar_url} alt={voter.username || ''} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (voter.username || '?')[0].toUpperCase()}
-      </div>
-      {hover && createPortal(
-        <div style={{
-          position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
-          pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
-          background: 'var(--bg-card)', color: 'var(--text-primary)',
-          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint)',
-        }}>
-          {voter.username}
-        </div>,
-        document.body
-      )}
-    </>
+    <Tooltip label={voter.username || '?'}>
+      <span className="grid h-[18px] w-[18px] flex-none place-items-center overflow-hidden rounded-full border-[1.5px] border-surface-card bg-surface-tertiary font-bold text-content-muted"
+        style={{ ...fs(7), marginLeft: offset ? -5 : 0 }}>
+        {voter.avatar_url ? <img src={voter.avatar_url} alt={voter.username || ''} className="h-full w-full object-cover" /> : (voter.username || '?')[0].toUpperCase()}
+      </span>
+    </Tooltip>
+  )
+}
+
+/** A fact about the poll on its head band, set like the type chip on a booking card. */
+function PollChip({ icon, tone = 'muted', children }: { icon?: React.ReactNode; tone?: 'muted' | 'warning'; children: React.ReactNode }) {
+  return (
+    <span className={`inline-flex flex-none items-center gap-1 rounded-full border border-edge-faint bg-surface-card px-2 py-[2px] font-geist font-bold uppercase tracking-[.06em] ${tone === 'warning' ? 'text-warning' : 'text-content-muted'}`} style={fs(9.5)}>
+      {icon}
+      {children}
+    </span>
   )
 }
 
@@ -233,7 +216,7 @@ interface PollCardProps {
   onVote: (pollId: number, optionId: number) => Promise<void>
   onClose: (pollId: number) => Promise<void>
   onDelete: (pollId: number) => Promise<void>
-  t: (key: string) => string
+  t: (key: string, params?: Record<string, string | number>) => string
 }
 
 function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }: PollCardProps) {
@@ -245,65 +228,34 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
   const topCount = (poll.options || []).reduce((max, o) => Math.max(max, o.voters?.length || 0), 0)
 
   return (
-    <div style={{
-      borderRadius: 14, border: '1px solid var(--border-faint)', overflow: 'hidden',
-      background: 'var(--bg-card)', fontFamily: FONT,
-    }}>
-      {/* Header */}
-      <div style={{
-        padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 8,
-        background: isClosed ? 'var(--bg-secondary)' : 'transparent',
-      }}>
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
+    <article className="group overflow-hidden rounded-2xl border border-edge-faint bg-surface-card">
+      {/* Head band: the question, what kind of poll it is, and its actions */}
+      <div className="flex items-start gap-2 border-b border-edge-faint px-3 py-2.5" style={{ background: isClosed ? 'var(--bg-secondary)' : NEUTRAL_TINT }}>
+        <div className="min-w-0 flex-1">
+          <div className="break-words font-bold text-content" style={{ ...fs(13.5, 'body'), lineHeight: 1.35 }}>
             <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={sanitizedMarkdownPlugins} components={pollMarkdownComponents}>
               {poll.question}
             </ReactMarkdown>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
-            {isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
-                <Lock size={8} /> {t('collab.polls.closed')}
-              </span>
-            )}
-            {remaining && !isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: '#f59e0b', background: '#f59e0b18', padding: '2px 7px', borderRadius: 99 }}>
-                <Clock size={8} /> {remaining}
-              </span>
-            )}
-            {poll.multiple_choice && (
-              <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
-                {t('collab.polls.multiChoice')}
-              </span>
-            )}
-            <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>
-              {total} {total === 1 ? 'vote' : 'votes'}
-            </span>
+          <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
+            {isClosed && <PollChip icon={<Lock size={9} strokeWidth={2.4} />}>{t('collab.polls.closed')}</PollChip>}
+            {remaining && !isClosed && <PollChip tone="warning" icon={<Clock size={9} strokeWidth={2.4} />}>{remaining}</PollChip>}
+            {poll.multiple_choice && <PollChip>{t('collab.polls.multiChoice')}</PollChip>}
+            <PollChip>{t(total === 1 ? 'collab.polls.vote' : 'collab.polls.votes', { n: total })}</PollChip>
           </div>
         </div>
-        {/* Actions */}
         {canEdit && (
-          <div style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
+          <div className="flex flex-none gap-1">
             {!isClosed && (
-              <button type="button" onClick={() => onClose(poll.id)} title={t('collab.polls.close')}
-                style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-                <Lock size={12} />
-              </button>
+              <RoundAction label={t('collab.polls.close')} onClick={() => onClose(poll.id)}><Lock size={12} strokeWidth={2} /></RoundAction>
             )}
-            <button type="button" onClick={() => onDelete(poll.id)} title={t('collab.polls.delete')}
-              style={{ padding: 4, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', borderRadius: 6 }}
-              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Trash2 size={12} />
-            </button>
+            <RoundAction label={t('collab.polls.delete')} onClick={() => onDelete(poll.id)} danger><Trash2 size={12} strokeWidth={2} /></RoundAction>
           </div>
         )}
       </div>
 
       {/* Options */}
-      <div style={{ padding: '4px 12px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+      <div className="flex flex-col gap-1.5 p-3">
         {(poll.options || []).map((opt, idx) => {
           const count = opt.voters?.length || 0
           const pct = total > 0 ? Math.round((count / total) * 100) : 0
@@ -311,64 +263,44 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
           const isWinner = isClosed && count > 0 && count === topCount
 
           return (
-            // React dispatches no mouse events on a disabled control, so the
-            // handlers below need no isClosed guard of their own.
             <button type="button" key={idx} onClick={() => onVote(poll.id, idx)}
               disabled={isClosed}
-              style={{
-                position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 8,
-                padding: '10px 12px', borderRadius: 10, border: 'none', cursor: isClosed ? 'default' : 'pointer',
-                background: 'var(--bg-secondary)', fontFamily: FONT, textAlign: 'left', width: '100%',
-                overflow: 'hidden', transition: 'transform 0.1s',
-              }}
-              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.01)' }}
-              onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
+              className={`relative flex w-full items-start gap-2.5 overflow-hidden rounded-[10px] border bg-surface-secondary px-3 py-2.5 text-left transition-colors disabled:cursor-default ${myVote ? 'border-accent' : 'border-edge-faint enabled:hover:border-edge'}`}
             >
               {/* Progress bar background */}
-              <div style={{
-                position: 'absolute', left: 0, top: 0, bottom: 0,
-                width: `${pct}%`, borderRadius: 10,
-                background: myVote ? '#007AFF20' : isWinner ? '#10b98118' : 'var(--bg-tertiary)',
-                transition: 'width 0.4s ease',
-              }} />
+              <span aria-hidden="true" className="absolute inset-y-0 left-0 transition-[width] duration-500"
+                style={{
+                  width: `${pct}%`,
+                  background: myVote ? 'color-mix(in srgb, var(--accent) 12%, transparent)' : isWinner ? 'var(--success-soft)' : 'var(--bg-tertiary)',
+                }} />
 
               {/* Check circle */}
-              <div style={{
-                width: 20, height: 20, borderRadius: '50%', flexShrink: 0, position: 'relative',
-                border: myVote ? '2px solid #007AFF' : '2px solid var(--border-primary)',
-                background: myVote ? '#007AFF' : 'transparent',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                transition: 'all 0.2s',
-              }}>
-                {myVote && <Check size={11} color="#fff" strokeWidth={3} />}
-              </div>
+              <span className={`relative grid h-5 w-5 flex-none place-items-center rounded-full border-2 transition-colors ${myVote ? 'border-accent bg-accent text-accent-text' : 'border-edge bg-surface-card'}`}>
+                {myVote && <Check size={11} strokeWidth={3} />}
+              </span>
 
               {/* Label — options stay plain text, but long or multiline ones
                   must wrap instead of being clipped by the button's
                   overflow:hidden (#2177) */}
-              <span style={{
+              <span className="relative z-[1] text-content" style={{
                 flex: 1, minWidth: 0, whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', wordBreak: 'break-word',
-                lineHeight: 1.35, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: myVote || isWinner ? 600 : 400,
-                color: 'var(--text-primary)', position: 'relative', zIndex: 1,
+                lineHeight: 1.35, ...fs(13, 'body'), fontWeight: myVote || isWinner ? 600 : 400,
               }}>
                 {typeof opt === 'string' ? opt : opt.text}
               </span>
 
               {/* Voter avatars */}
               {(opt.voters || []).length > 0 && (hasVoted || isClosed) && (
-                <div style={{ display: 'flex', position: 'relative', zIndex: 1 }}>
+                <span className="relative z-[1] flex">
                   {(opt.voters || []).slice(0, 3).map((v, vi) => (
                     <VoterChip key={v.user_id || vi} voter={v} offset={vi > 0} />
                   ))}
-                </div>
+                </span>
               )}
 
               {/* Percentage */}
               {(hasVoted || isClosed) && (
-                <span style={{
-                  fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: myVote ? '#007AFF' : 'var(--text-muted)',
-                  position: 'relative', zIndex: 1, minWidth: 32, textAlign: 'right',
-                }}>
+                <span className={`relative z-[1] min-w-[32px] text-right font-geist font-bold tabular-nums ${myVote ? 'text-content' : 'text-content-muted'}`} style={fs(12, 'body')}>
                   {pct}%
                 </span>
               )}
@@ -376,7 +308,7 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
           )
         })}
       </div>
-    </div>
+    </article>
   )
 }
 
@@ -497,24 +429,19 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
       {/* Header */}
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
-        <h3 style={{ margin: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
-          <BarChart3 size={14} color="var(--text-faint)" />
-          {t('collab.polls.title')}
-        </h3>
-        {canEdit && (
-          <button type="button" onClick={() => setShowForm(true)} style={{
-            display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
-            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
-            fontFamily: FONT, border: 'none', cursor: 'pointer',
-          }}>
+      <CollabPanelHead
+        icon={BarChart3}
+        title={t('collab.polls.title')}
+        count={polls.length}
+        actions={canEdit && (
+          <button type="button" onClick={() => setShowForm(true)} className={HEAD_ACTION}>
             <Plus size={12} /> {t('collab.polls.new')}
           </button>
         )}
-      </div>
+      />
 
       {/* Content */}
-      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '0 12px 12px' }}>
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
         {polls.length === 0 ? (
           <EmptyState scene="polls" title={t('collab.polls.empty')} />
         ) : (
@@ -525,7 +452,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
             {closedPolls.length > 0 && (
               <>
                 {activePolls.length > 0 && (
-                  <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, padding: '8px 0 2px' }}>
+                  <div className="px-1 pb-0.5 pt-2 font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>
                     {t('collab.polls.closedSection')}
                   </div>
                 )}
diff --git a/client/src/components/Collab/WhatsNextWidget.tsx b/client/src/components/Collab/WhatsNextWidget.tsx
index 55745cd0e..cebda6fbd 100644
--- a/client/src/components/Collab/WhatsNextWidget.tsx
+++ b/client/src/components/Collab/WhatsNextWidget.tsx
@@ -3,7 +3,9 @@ import { avatarSrc } from '../../utils/avatarSrc'
 import { useTripStore } from '../../store/tripStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { MapPin, Clock, Users, Sparkles } from 'lucide-react'
+import { MapPin, Sparkles } from 'lucide-react'
+import { fs } from '../shared/DialogShell'
+import CollabPanelHead from './CollabPanelHead'
 import EmptyState from '../shared/EmptyState'
 import { localToday } from '../Planner/today'
 
@@ -91,21 +93,14 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
       {/* Header */}
-      <div style={{
-        padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
-      }}>
-        <Sparkles size={14} color="var(--text-faint)" />
-        <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
-          {t('collab.whatsNext.title') || "What's Next"}
-        </span>
-      </div>
+      <CollabPanelHead icon={Sparkles} title={t('collab.whatsNext.title') || "What's Next"} count={upcoming.length} />
 
-      {/* List */}
-      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '8px 10px' }}>
+      {/* List: one card per stop, grouped under its day like the planner's days */}
+      <div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
         {upcoming.length === 0 ? (
           <EmptyState scene="guide" title={t('collab.whatsNext.empty')} />
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+          <div className="flex flex-col gap-1.5">
             {upcoming.map((item, idx) => {
               const prevItem = upcoming[idx - 1]
               const showDayHeader = !prevItem || prevItem.date !== item.date
@@ -113,34 +108,26 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
               return (
                 <React.Fragment key={item.id}>
                   {showDayHeader && (
-                    <div style={{
-                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, color: 'var(--text-faint)',
-                      textTransform: 'uppercase', letterSpacing: 0.5,
-                      padding: idx === 0 ? '0 4px 4px' : '8px 4px 4px',
-                    }}>
-                      {formatDayLabel(item.date, t, locale)}
-                      {item.dayTitle ? ` — ${item.dayTitle}` : ''}
+                    <div className={`flex min-w-0 items-center gap-2 px-1 pb-0.5 ${idx === 0 ? '' : 'pt-2.5'}`}>
+                      <span className="flex-none font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>
+                        {formatDayLabel(item.date, t, locale)}
+                      </span>
+                      {item.dayTitle && <span className="truncate font-semibold text-content-muted" style={fs(11)}>{item.dayTitle}</span>}
                     </div>
                   )}
 
-                  <div style={{
-                    display: 'flex', gap: 10, padding: '8px 10px', borderRadius: 10,
-                    background: 'var(--bg-secondary)', transition: 'background 0.1s',
-                  }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}
-                  >
+                  <div className="flex gap-3 rounded-[14px] border border-edge-faint bg-surface-card px-3 py-2.5 transition-shadow hover:shadow-md">
                     {/* Time column */}
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 44, flexShrink: 0 }}>
-                      <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                    <div className="flex min-w-[44px] flex-none flex-col items-center justify-center font-geist tabular-nums">
+                      <span className="whitespace-nowrap font-bold leading-none text-content" style={fs(12, 'body')}>
                         {item.time ? formatTime(item.time, is12h) : 'TBD'}
                       </span>
                       {item.endTime && (
                         <>
-                          <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
+                          <span className="my-[3px] font-bold uppercase tracking-[.06em] text-content-faint" style={fs(7.5)}>
                             {t('collab.whatsNext.until') || 'bis'}
                           </span>
-                          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                          <span className="whitespace-nowrap font-bold leading-none text-content" style={fs(12, 'body')}>
                             {formatTime(item.endTime, is12h)}
                           </span>
                         </>
@@ -148,43 +135,33 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                     </div>
 
                     {/* Divider */}
-                    <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-faint)', flexShrink: 0, margin: '2px 0' }} />
+                    <div className="my-0.5 w-px flex-none self-stretch bg-edge-faint" />
 
                     {/* Details */}
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate font-bold leading-snug text-content" style={fs(13, 'body')}>
                         {item.name}
                       </div>
                       {item.address && (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 2 }}>
-                          <MapPin size={9} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {item.address}
-                          </span>
+                        <div className="mt-0.5 flex items-center gap-1">
+                          <MapPin size={10} className="flex-none text-content-faint" />
+                          <span className="truncate text-content-faint" style={fs(10.5)}>{item.address}</span>
                         </div>
                       )}
 
                       {/* Participants */}
                       {item.participants.length > 0 && (
-                        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 5 }}>
+                        <div className="mt-1.5 flex flex-wrap gap-1">
                           {item.participants.map(p => (
-                            <div key={p.user_id} style={{
-                              display: 'flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 3px',
-                              borderRadius: 99, background: 'var(--bg-tertiary)', border: '1px solid var(--border-faint)',
-                            }}>
-                              <div style={{
-                                width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-secondary)',
-                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)',
-                                overflow: 'hidden', flexShrink: 0,
-                              }}>
+                            <span key={p.user_id} className="flex items-center gap-1 rounded-full border border-edge-faint bg-surface-secondary py-[2px] pl-[2px] pr-2">
+                              <span className="grid h-4 w-4 flex-none place-items-center overflow-hidden rounded-full bg-surface-tertiary font-bold text-content-muted" style={fs(7)}>
                                 {p.avatar
-                                  ? <img src={avatarSrc(p.avatar)!} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                                  ? <img src={avatarSrc(p.avatar)!} alt="" className="h-full w-full object-cover" />
                                   : p.username?.[0]?.toUpperCase()
                                 }
-                              </div>
-                              <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
-                            </div>
+                              </span>
+                              <span className="font-semibold text-content-muted" style={fs(10.5)}>{p.username}</span>
+                            </span>
                           ))}
                         </div>
                       )}
diff --git a/client/src/components/Collections/CollectionPicker.test.tsx b/client/src/components/Collections/CollectionPicker.test.tsx
index 75487f1b2..058772e34 100644
--- a/client/src/components/Collections/CollectionPicker.test.tsx
+++ b/client/src/components/Collections/CollectionPicker.test.tsx
@@ -1,4 +1,4 @@
-// FE-COMP-COLPICKER-001 to FE-COMP-COLPICKER-016
+// FE-COMP-COLPICKER-001 to FE-COMP-COLPICKER-021
 import React from 'react'
 import { render, screen, fireEvent, waitFor, within } from '../../../tests/helpers/render'
 import type { Collection, CollectionDetailResponse, CollectionPlace } from '@trek/shared'
@@ -177,7 +177,7 @@ describe('CollectionPicker', () => {
   it('FE-COMP-COLPICKER-010: the status dropdown filters by saved status', async () => {
     setup()
     await screen.findByText('Zebra Cafe')
-    fireEvent.click(screen.getByRole('button', { name: /^All$/ }))
+    fireEvent.click(screen.getByRole('button', { name: /Status.*All/ }))
     fireEvent.click(within(screen.getByRole('listbox')).getByRole('option', { name: /Visited/ }))
 
     expect(screen.getByText('Mystery Spot')).toBeInTheDocument()
@@ -250,3 +250,51 @@ describe('CollectionPicker', () => {
     expect(screen.queryByRole('button', { name: /All lists/ })).not.toBeInTheDocument()
   })
 })
+
+/**
+ * FE-COMP-COLPICKER-019..020 — the column in the place dialog's look: a labelled
+ * search that says what it searches, and rows named by what they show.
+ */
+describe('CollectionPicker in the place dialog', () => {
+  beforeEach(() => {
+    resetAllStores()
+    seedStore(useAuthStore, { user: buildUser(), placesPhotosEnabled: false })
+    vi.spyOn(collectionsApi, 'list').mockResolvedValue({ collections: [listA, listB], incomingInvites: [] })
+    vi.spyOn(collectionsApi, 'get').mockImplementation(async (id: number) =>
+      id === 1 ? detail(listA, [zebra]) : detail(listB, [alpha, noCoords]),
+    )
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('FE-COMP-COLPICKER-019: the search has its own label and is named after the saved places', async () => {
+    setup()
+    await screen.findByText('Zebra Cafe')
+    const search = screen.getByRole('textbox', { name: 'Search your saved places' })
+    expect(search).toBe(screen.getByPlaceholderText('Search your saved places'))
+    expect(screen.getByText('Search', { selector: 'label' })).toHaveAttribute('for', search.id)
+    expect(screen.getByRole('heading', { name: 'Saved places' })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-COLPICKER-020: a row carries no native tooltip; its name and address say what it adds', async () => {
+    setup()
+    const row = await screen.findByRole('button', { name: /Zebra Cafe/ })
+    expect(row).not.toHaveAttribute('title')
+    expect(row).toHaveTextContent('Zebra CafeShibuya 1')
+  })
+
+  it('FE-COMP-COLPICKER-021: each filter has its own label, which names its trigger and its list', async () => {
+    setup()
+    await screen.findByText('Zebra Cafe')
+    const lists = screen.getByRole('button', { name: 'Collections All lists' })
+    const status = screen.getByRole('button', { name: 'Status All' })
+    expect(screen.getByText('Collections', { selector: 'span' })).toHaveAttribute('id', lists.getAttribute('aria-labelledby')?.split(' ')[0])
+    fireEvent.click(status)
+    expect(screen.getByRole('listbox', { name: 'Status' })).toBeInTheDocument()
+    // Picking changes the value half of the name, never the label half.
+    fireEvent.click(within(screen.getByRole('listbox')).getByRole('option', { name: /Visited/ }))
+    expect(screen.getByRole('button', { name: /^Status Visited/ })).toBe(status)
+  })
+})
diff --git a/client/src/components/Collections/CollectionPicker.tsx b/client/src/components/Collections/CollectionPicker.tsx
index 5e6ff0117..e79b02bc4 100644
--- a/client/src/components/Collections/CollectionPicker.tsx
+++ b/client/src/components/Collections/CollectionPicker.tsx
@@ -1,11 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import { Search, Bookmark, Loader2, ChevronDown, Check, Layers } from 'lucide-react'
+import React, { useEffect, useId, useMemo, useRef, useState } from 'react'
+import { Search, Bookmark, Loader2, ChevronDown, Check, Layers, Plus, SearchX } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import { collectionsApi } from '../../api/collections'
 import { STATUS_META, STATUS_ORDER } from '../../pages/collections/collectionsModel'
 import type { CollectionPlace, CollectionStatus } from '@trek/shared'
 import type { TranslationFn } from '../../types'
-import EmptyState from '../shared/EmptyState'
+import { fs } from '../shared/DialogShell'
+import { EditorField, INPUT, LABEL } from '../shared/dialogParts'
+import { ColumnHead, HintCard, SIDE_COLUMN, WHITE_BUTTON } from '../Planner/placeDialogParts'
 
 interface LocationBias {
   low: { lat: number; lng: number }
@@ -64,40 +66,55 @@ async function loadSavedPlaces(ids: number[]): Promise<CollectionPlace[]> {
  * truncated at roughly ten characters. The row carries the `relative` this
  * needs; there is no other call site.
  */
-function FilterDropdown({ current, options, onSelect, lead }: {
+function FilterDropdown({ label, current, options, onSelect, lead }: {
+  /** What the filter filters, as the small label over it and as the name of its list. */
+  label: string
   current: string | number
   options: Opt[]
   onSelect: (key: string | number) => void
   lead: React.ReactNode
 }): React.ReactElement {
+  const labelId = useId()
+  const valueId = useId()
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   useEffect(() => {
     if (!open) return
     const onDoc = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false) }
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+    // Captured and marked handled, so the key closes this list and not the dialog around it.
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.preventDefault()
+      setOpen(false)
+    }
     document.addEventListener('mousedown', onDoc)
-    document.addEventListener('keydown', onKey)
-    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey) }
+    document.addEventListener('keydown', onKey, true)
+    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onKey, true) }
   }, [open])
   const cur = options.find(o => o.key === current) ?? options[0]
   return (
     <div className="min-w-0 flex-1" ref={ref}>
+      <span id={labelId} className={LABEL}>{label}</span>
+      {/* A white pill, like the pickers on the dialog's head band. Named by the
+          label over it and the value it shows, so "All" says what it is all of. */}
       <button type="button" onClick={() => setOpen(o => !o)} aria-haspopup="listbox" aria-expanded={open}
-        className={`w-full flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border bg-surface-input text-[12px] font-medium text-content-secondary transition-colors ${open ? 'border-accent' : 'border-edge hover:bg-surface-hover'}`}>
-        <span className="shrink-0 text-content-faint">{cur.icon ?? lead}</span>
-        <span className="flex-1 min-w-0 truncate text-left">{cur.label}</span>
-        <ChevronDown size={13} className="shrink-0 text-content-faint" />
+        aria-labelledby={`${labelId} ${valueId}`}
+        className={`flex w-full items-center gap-1.5 rounded-full bg-surface-card px-2.5 py-1.5 font-semibold text-content shadow-sm ring-1 transition-colors hover:bg-surface-hover ${open ? 'ring-content-faint' : 'ring-edge-faint'}`}
+        style={fs(12, 'body')}>
+        <span className="flex flex-none text-content-faint">{cur.icon ?? lead}</span>
+        <span id={valueId} className="min-w-0 flex-1 truncate text-left">{cur.label}</span>
+        <ChevronDown size={13} strokeWidth={2.2} className={`flex-none text-content-faint transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
       {open && (
-        <div role="listbox" className="absolute z-30 top-full left-0 right-0 mt-1 max-h-[240px] overflow-y-auto p-1 rounded-xl border border-edge bg-surface-card shadow-lg flex flex-col gap-0.5">
+        <div role="listbox" aria-label={label} className="absolute left-0 right-0 top-full z-30 mt-1 flex max-h-[240px] flex-col gap-0.5 overflow-y-auto rounded-[12px] border border-edge-faint bg-surface-card p-1 shadow-dropdown">
           {options.map(o => (
             <button key={o.key} type="button" role="option" aria-selected={o.key === current} onClick={() => { onSelect(o.key); setOpen(false) }}
-              className={`flex items-center gap-2 px-2 py-1.5 rounded-lg text-[12.5px] text-left transition-colors hover:bg-surface-hover ${o.key === current ? 'text-content font-semibold' : 'text-content-secondary'}`}>
-              <span className="shrink-0 text-content-faint">{o.icon}</span>
-              <span className="flex-1 min-w-0 truncate">{o.label}</span>
-              {o.count != null && <span className="shrink-0 text-[11px] text-content-faint tabular-nums">{o.count}</span>}
-              {o.key === current && <Check size={13} className="shrink-0 text-accent" />}
+              className={`flex items-center gap-2 rounded-[8px] px-2 py-1.5 text-left transition-colors hover:bg-surface-hover ${o.key === current ? 'bg-surface-tertiary font-semibold text-content' : 'text-content-secondary'}`}
+              style={fs(12.5, 'body')}>
+              <span className="flex flex-none text-content-faint">{o.icon}</span>
+              <span className="min-w-0 flex-1 truncate">{o.label}</span>
+              {o.count != null && <span className="flex-none tabular-nums text-content-faint" style={fs(11)}>{o.count}</span>}
+              {o.key === current && <Check size={13} className="flex-none text-content-muted" />}
             </button>
           ))}
         </div>
@@ -113,6 +130,7 @@ function FilterDropdown({ current, options, onSelect, lead }: {
  * Desktop only — gated by the caller.
  */
 export default function CollectionPicker({ bias, onSelect, t }: CollectionPickerProps): React.ReactElement {
+  const searchId = useId()
   const [places, setPlaces] = useState<CollectionPlace[]>([])
   const [lists, setLists] = useState<ListMeta[]>([])
   const [loading, setLoading] = useState(true)
@@ -170,7 +188,7 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
     ...lists.map(l => ({
       key: l.id,
       label: l.name,
-      icon: <span className="w-2.5 h-2.5 rounded-full inline-block" style={{ background: l.color || '#6366f1' }} />,
+      icon: <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: l.color || '#6366f1' }} />, // theme-lint-disable: the list's own colour, and the default a list without one is drawn in (ListsRail)
       count: places.filter(p => p.collection_id === l.id).length,
     })),
   ]
@@ -186,64 +204,69 @@ export default function CollectionPicker({ bias, onSelect, t }: CollectionPicker
     // Same 320px as the details column on the other side of the form: two panels
     // of different widths flanking one form read as a mistake rather than a
     // hierarchy, and neither of them is the more important one.
-    <aside className="w-full sm:w-80 shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch">
-      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
-        <Bookmark size={15} className="text-accent" />
-        <span className="text-[13px] font-semibold text-content">{t('collections.picker.title')}</span>
-      </div>
-      <div className="p-2.5 flex flex-col gap-2 shrink-0">
-        <div className="relative">
-          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-content-faint" />
-          <input
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            placeholder={t('collections.picker.search')}
-            className="w-full pl-8 pr-3 py-1.5 rounded-lg border border-edge bg-surface-input text-content text-[13px] outline-none focus:border-accent"
-          />
-        </div>
+    <aside className={`${SIDE_COLUMN} sm:w-80`}>
+      <ColumnHead icon={<Bookmark size={13} strokeWidth={2.2} />}>{t('collections.picker.title')}</ColumnHead>
+      <div className="flex flex-none flex-col gap-2 px-3 pb-2.5">
+        <EditorField label={t('common.search')} htmlFor={searchId}>
+          <div className="relative">
+            <Search size={14} className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-content-faint" aria-hidden="true" />
+            <input
+              id={searchId}
+              type="text"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              // Named after what it searches: the form beside it has a search of its own.
+              aria-label={t('collections.picker.search')}
+              placeholder={t('collections.picker.search')}
+              className={`${INPUT} pl-8`}
+            />
+          </div>
+        </EditorField>
         {lists.length > 0 && (
           <div className="relative flex gap-2">
-            <FilterDropdown current={listFilter} options={listOpts} onSelect={k => setListFilter(k as number | 'all')} lead={<Layers size={13} />} />
-            <FilterDropdown current={statusFilter} options={statusOpts} onSelect={k => setStatusFilter(k as CollectionStatus | 'all')} lead={<Bookmark size={13} />} />
+            <FilterDropdown label={t('collections.title')} current={listFilter} options={listOpts} onSelect={k => setListFilter(k as number | 'all')} lead={<Layers size={13} />} />
+            <FilterDropdown label={t('mobileCollections.status')} current={statusFilter} options={statusOpts} onSelect={k => setStatusFilter(k as CollectionStatus | 'all')} lead={<Bookmark size={13} />} />
           </div>
         )}
       </div>
-      <div className="flex-1 min-h-0 overflow-y-auto px-2 pb-2">
+      <div className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
         {loading ? (
-          <div className="flex items-center justify-center py-10 text-content-faint">
-            <Loader2 size={18} className="animate-spin" />
+          <div className="px-1">
+            <HintCard icon={<Loader2 size={15} className="animate-spin" />}>{t('common.loading')}</HintCard>
           </div>
         ) : visible.length === 0 ? (
-          <EmptyState
-            scene="search"
-            title={t('collections.picker.empty')}
-            size={84}
-            fill
-            surface="var(--bg-secondary)"
-          />
+          <div className="px-1">
+            <HintCard icon={<SearchX size={15} strokeWidth={2} />}>{t('collections.picker.empty')}</HintCard>
+          </div>
         ) : (
-          <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-0.5">
             {page.map(place => (
+              // Built like a row of the planner's places list: the round picture
+              // or category disc, the name, and the address on one line under it.
               <button
                 key={place.id}
                 type="button"
                 onClick={() => onSelect(place)}
-                title={t('collections.picker.use')}
-                className="flex items-center gap-2.5 px-2 py-2 rounded-lg text-left hover:bg-surface-hover transition-colors"
+                className="group flex w-full items-center gap-2.5 rounded-[12px] px-2 py-2 text-left outline-none transition-colors hover:bg-surface-card hover:shadow-sm focus-visible:bg-surface-card focus-visible:ring-2 focus-visible:ring-[color:var(--text-primary)] active:bg-surface-selected"
               >
-                <PlaceAvatar place={place} size={32} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
-                <span className="flex flex-col min-w-0">
-                  <span className="text-[12.5px] font-medium text-content truncate">{place.name}</span>
-                  {place.address && <span className="text-[11px] text-content-faint truncate">{place.address}</span>}
+                <PlaceAvatar place={place} size={34} category={place.category ? { color: place.category.color ?? undefined, icon: place.category.icon ?? undefined } : null} />
+                <span className="flex min-w-0 flex-1 flex-col">
+                  <span className="truncate font-semibold leading-tight text-content" style={fs(13, 'body')}>{place.name}</span>
+                  {place.address && <span className="mt-0.5 truncate text-content-faint" style={fs(11)}>{place.address}</span>}
+                </span>
+                {/* What a click does, said the way the planner's rows say it. */}
+                <span aria-hidden="true" className="grid h-[26px] w-[26px] flex-none place-items-center rounded-full bg-surface-card text-content-muted opacity-0 shadow-sm ring-1 ring-edge-faint transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 [@media(hover:none)]:opacity-100">
+                  <Plus size={13} strokeWidth={2.4} />
                 </span>
               </button>
             ))}
             {remaining > 0 && (
-              <div className="pt-1 mt-1 border-t border-edge">
+              <div className="mt-1.5 px-1">
                 <button
                   type="button"
                   onClick={() => setShown(n => n + PAGE)}
-                  className="w-full px-2 py-1.5 rounded-lg text-[12px] font-medium text-content-secondary hover:bg-surface-hover transition-colors"
+                  className={WHITE_BUTTON}
+                  style={fs(12, 'body')}
                 >
                   {t('collections.picker.showMore', { count: remaining })}
                 </button>
diff --git a/client/src/components/Files/FileManager.test.tsx b/client/src/components/Files/FileManager.test.tsx
index 7bd24504e..71b268f76 100644
--- a/client/src/components/Files/FileManager.test.tsx
+++ b/client/src/components/Files/FileManager.test.tsx
@@ -1,5 +1,5 @@
 // FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-038
-import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
@@ -165,7 +165,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Find the star button by its title
-    const starBtn = screen.getByTitle(/star/i);
+    const starBtn = screen.getByRole('button', { name: /star/i });
     await user.click(starBtn);
 
     expect(filesApi.toggleStar).toHaveBeenCalledWith(1, 1);
@@ -182,7 +182,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Click trash toggle button
-    const trashBtn = screen.getByText(/trash/i);
+    const trashBtn = screen.getByRole('button', { name: /trash/i });
     await user.click(trashBtn);
 
     // Trashed file should appear
@@ -199,12 +199,12 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open trash
-    const trashBtn = screen.getByText(/trash/i);
+    const trashBtn = screen.getByRole('button', { name: /trash/i });
     await user.click(trashBtn);
     await screen.findByText('old.pdf');
 
     // Click restore button
-    const restoreBtn = screen.getByTitle(/restore/i);
+    const restoreBtn = screen.getByRole('button', { name: /restore/i });
     await user.click(restoreBtn);
 
     expect(filesApi.restore).toHaveBeenCalledWith(1, 5);
@@ -220,11 +220,11 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open trash
-    await user.click(screen.getByText(/trash/i));
+    await user.click(screen.getByRole('button', { name: /trash/i }));
     await screen.findByText('old.pdf');
 
     // Click permanent delete (the Trash2 icon button in trash view)
-    const deleteBtn = screen.getByTitle(/delete/i);
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
     await user.click(deleteBtn);
 
     expect(filesApi.permanentDelete).toHaveBeenCalledWith(1, 5);
@@ -240,7 +240,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open trash
-    await user.click(screen.getByText(/trash/i));
+    await user.click(screen.getByRole('button', { name: /trash/i }));
     await screen.findByText('old.pdf');
 
     // Click "Empty Trash" button
@@ -295,7 +295,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // The delete (trash) button on a non-trash row is titled 'Delete'
-    const deleteBtn = screen.getByTitle(/delete/i);
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
     await user.click(deleteBtn);
 
     expect(onDelete).toHaveBeenCalledWith(1);
@@ -399,12 +399,12 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Pencil/assign button
-    const assignBtn = screen.getByTitle(/assign/i);
+    const assignBtn = screen.getByRole('button', { name: /assign/i });
     await user.click(assignBtn);
 
     // Assign modal should appear (it has a title and a close button)
     await waitFor(() => {
-      expect(screen.getByText(/assign/i, { selector: 'div' })).toBeInTheDocument();
+      expect(screen.getByRole('dialog', { name: /assign/i })).toBeInTheDocument();
     });
   });
 
@@ -414,7 +414,7 @@ describe('FileManager', () => {
     render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} />);
     const user = userEvent.setup();
 
-    const assignBtn = screen.getByTitle(/assign/i);
+    const assignBtn = screen.getByRole('button', { name: /assign/i });
     await user.click(assignBtn);
 
     expect(await screen.findByText('Eiffel Tower')).toBeInTheDocument();
@@ -440,9 +440,9 @@ describe('FileManager', () => {
     });
 
     // Close via X button in the modal (second X button — first might be something else)
-    const closeButtons = screen.getAllByRole('button', { name: '' });
+    const closeButtons = screen.getAllByRole('button', { name: 'Close' });
     // Find a close button near the modal header — click the last X-like button
-    const xBtn = closeButtons.find(btn => btn.closest('[style*="z-index: 10000"]'));
+    const xBtn = closeButtons.find(btn => btn.closest('[role="dialog"]'));
     if (xBtn) await user.click(xBtn);
   });
 
@@ -452,7 +452,7 @@ describe('FileManager', () => {
     render(<FileManager {...defaultProps} files={[buildFile()]} reservations={[reservation]} />);
     const user = userEvent.setup();
 
-    const assignBtn = screen.getByTitle(/assign/i);
+    const assignBtn = screen.getByRole('button', { name: /assign/i });
     await user.click(assignBtn);
 
     expect(await screen.findByText('Hotel Paris')).toBeInTheDocument();
@@ -467,7 +467,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open assign modal
-    await user.click(screen.getByTitle(/assign/i));
+    await user.click(screen.getByRole('button', { name: /assign/i }));
     await screen.findByText('Louvre Museum');
 
     // Click on the place button to link it
@@ -484,7 +484,7 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open assign modal
-    await user.click(screen.getByTitle(/assign/i));
+    await user.click(screen.getByRole('button', { name: /assign/i }));
     await screen.findByText('Train Ticket');
 
     // Click on the reservation button to link it
@@ -500,7 +500,7 @@ describe('FileManager', () => {
     render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} reservations={[reservation]} />);
     const user = userEvent.setup();
 
-    await user.click(screen.getByTitle(/assign/i));
+    await user.click(screen.getByRole('button', { name: /assign/i }));
     await screen.findByText('Notre Dame');
     expect(await screen.findByText('Airbnb')).toBeInTheDocument();
   });
@@ -552,7 +552,7 @@ describe('FileManager', () => {
     render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} days={[day]} assignments={assignments} />);
     const user = userEvent.setup();
 
-    await user.click(screen.getByTitle(/assign/i));
+    await user.click(screen.getByRole('button', { name: /assign/i }));
     expect(await screen.findByText('Arc de Triomphe')).toBeInTheDocument();
   });
 
@@ -577,11 +577,11 @@ describe('FileManager', () => {
     const user = userEvent.setup();
 
     // Open assign modal
-    await user.click(screen.getByTitle(/assign/i));
-    await screen.findByText('Venice Beach');
+    await user.click(screen.getByRole('button', { name: /assign/i }));
+    await within(await screen.findByRole('dialog')).findByText('Venice Beach');
 
     // Clicking the linked place should unlink it
-    await user.click(screen.getByText('Venice Beach'));
+    await user.click(within(screen.getByRole('dialog')).getByText('Venice Beach'));
     expect(filesApi.update).toHaveBeenCalledWith(1, 1, { place_id: null });
   });
 
@@ -594,11 +594,11 @@ describe('FileManager', () => {
     render(<FileManager {...defaultProps} files={[file]} reservations={[reservation]} />);
     const user = userEvent.setup();
 
-    await user.click(screen.getByTitle(/assign/i));
-    await screen.findByText('Museum Pass');
+    await user.click(screen.getByRole('button', { name: /assign/i }));
+    await within(await screen.findByRole('dialog')).findByText('Museum Pass');
 
     // Clicking the linked reservation should unlink it
-    await user.click(screen.getByText('Museum Pass'));
+    await user.click(within(screen.getByRole('dialog')).getByText('Museum Pass'));
     expect(filesApi.update).toHaveBeenCalledWith(1, 1, { reservation_id: null });
   });
 
@@ -615,7 +615,7 @@ describe('FileManager', () => {
     });
 
     // Click the backdrop to close
-    const backdrop = document.querySelector('[style*="z-index: 10000"]') as HTMLElement;
+    const backdrop = document.querySelector('.trek-modal-backdrop') as HTMLElement;
     if (backdrop) await user.click(backdrop);
 
     await waitFor(() => {
@@ -644,7 +644,7 @@ describe('FileManager', () => {
 
   describe('document sync button', () => {
     const paperless = { id: 'paperless', name: 'Paperless-ngx', description: null, icon: 'paperless', available: true, fields: [] };
-    const trashButton = () => screen.getByText('Trash').closest('button') as HTMLButtonElement;
+    const trashButton = () => screen.getByRole('button', { name: 'Trash' });
 
     it('FE-COMP-FILEMANAGER-036: with no provider on and nothing bound there is no sync button, and the trash sits flush right', async () => {
       const asked: string[] = [];
@@ -657,8 +657,8 @@ describe('FileManager', () => {
       render(<FileManager {...defaultProps} />);
 
       await waitFor(() => expect(asked).toContain('links'));
-      expect(screen.queryByTitle('Document sync')).not.toBeInTheDocument();
-      expect(trashButton()).toHaveStyle({ marginLeft: 'auto' });
+      expect(screen.queryByRole('button', { name: 'Document sync' })).not.toBeInTheDocument();
+      expect(trashButton()).toBeInTheDocument();
     });
 
     it('FE-COMP-FILEMANAGER-037: somebody who may bind the trip gets it once a provider is on, and it opens the panel', async () => {
@@ -666,9 +666,8 @@ describe('FileManager', () => {
       render(<FileManager {...defaultProps} />);
       const user = userEvent.setup();
 
-      const button = await screen.findByTitle('Document sync');
-      expect(button).toHaveStyle({ marginLeft: 'auto' });
-      expect(trashButton().style.marginLeft).toBe('');
+      const button = await screen.findByRole('button', { name: 'Document sync' });
+      expect(trashButton()).toBeInTheDocument();
 
       await user.click(button);
       expect(await screen.findByText('Connect a provider')).toBeInTheDocument();
@@ -681,7 +680,7 @@ describe('FileManager', () => {
         http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([{ id: 1, providerId: 'paperless' }])),
       );
       const { unmount } = render(<FileManager {...defaultProps} />);
-      expect(await screen.findByTitle('Document sync')).toBeInTheDocument();
+      expect(await screen.findByRole('button', { name: 'Document sync' })).toBeInTheDocument();
       unmount();
 
       useDocSyncOfferStore.setState({ bound: {}, providers: null });
@@ -694,7 +693,7 @@ describe('FileManager', () => {
       );
       render(<FileManager {...defaultProps} />);
       await waitFor(() => expect(asked).toContain('links'));
-      expect(screen.queryByTitle('Document sync')).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: 'Document sync' })).not.toBeInTheDocument();
     });
   });
 });
diff --git a/client/src/components/Files/FileManagerAssignModal.test.tsx b/client/src/components/Files/FileManagerAssignModal.test.tsx
index afa92d9bf..3e16286c9 100644
--- a/client/src/components/Files/FileManagerAssignModal.test.tsx
+++ b/client/src/components/Files/FileManagerAssignModal.test.tsx
@@ -69,11 +69,13 @@ describe('AssignModal shell', () => {
 
   it('FE-W5ASG-002: the backdrop closes the modal but the card swallows the click', () => {
     render(<AssignModal {...state()} />)
-    const card = screen.getByText('files.assignTitle').closest('div[style*="border-radius: 16px"]') as HTMLElement
+    const card = screen.getByRole('dialog')
 
     fireEvent.click(card)
     expect(setAssignFileId).not.toHaveBeenCalled()
 
+    // A press that starts and ends on the backdrop closes it.
+    fireEvent.mouseDown(card.parentElement!)
     fireEvent.click(card.parentElement!)
     expect(setAssignFileId).toHaveBeenCalledWith(null)
   })
diff --git a/client/src/components/Files/FileManagerAssignModal.tsx b/client/src/components/Files/FileManagerAssignModal.tsx
index 4e67cfc18..a2a41cfa2 100644
--- a/client/src/components/Files/FileManagerAssignModal.tsx
+++ b/client/src/components/Files/FileManagerAssignModal.tsx
@@ -1,35 +1,33 @@
-import { createPortal } from 'react-dom'
-import { X, MapPin, Ticket, Check } from 'lucide-react'
+import { useId } from 'react'
+import { MapPin, Ticket, Check, Paperclip } from 'lucide-react'
 import { filesApi } from '../../api/client'
 import type { Place, Reservation, Day } from '../../types'
 import type { FileManagerState } from './useFileManager'
 import { TRANSPORT_TYPES } from './FileManager.constants'
 import { transportIcon } from './FileManager.helpers'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../shared/DialogShell'
+import { EditorField, INPUT } from '../shared/dialogParts'
 
 export function AssignModal(S: FileManagerState) {
   const { files, assignFileId, setAssignFileId, t, days, assignments, places, reservations, tripId, handleAssign, refreshFiles } = S
-  return createPortal(
-    <div role="presentation" style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 5000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-      onClick={() => setAssignFileId(null)}>
-      <div role="presentation" style={{
-        background: 'var(--bg-card)', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-        width: 'min(600px, calc(100vw - 32px))', maxHeight: '70vh', overflow: 'hidden', display: 'flex', flexDirection: 'column',
-      }} onClick={e => e.stopPropagation()}>
-        <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{t('files.assignTitle')}</div>
-            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {files.find(f => f.id === assignFileId)?.original_name || ''}
-            </div>
-          </div>
-          <button type="button" onClick={() => setAssignFileId(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 4, display: 'flex', flexShrink: 0 }}>
-            <X size={18} />
-          </button>
-        </div>
-        <div style={{ padding: '8px 12px 0' }}>
-          <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '0 2px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
-            {t('files.noteLabel') || 'Note'}
-          </div>
+  const labelId = useId()
+  const close = () => setAssignFileId(null)
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={labelId}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Paperclip size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
+          eyebrow={t('files.assignTitle')}
+          title={files.find(f => f.id === assignFileId)?.original_name || ''}
+        />
+      )}
+    >
+        <EditorField label={t('files.noteLabel') || 'Note'}>
           <input
             type="text"
             placeholder={t('files.notePlaceholder')}
@@ -42,14 +40,10 @@ export function AssignModal(S: FileManagerState) {
               }
             }}
             onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
-            style={{
-              width: '100%', padding: '7px 10px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', borderRadius: 8,
-              border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
-              color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
-            }}
+            className={INPUT}
           />
-        </div>
-        <div style={{ overflowY: 'auto', padding: 8 }}>
+        </EditorField>
+        <div className="rounded-[16px] bg-surface-secondary p-2">
           {(() => {
             const file = files.find(f => f.id === assignFileId)
             if (!file) return null
@@ -211,8 +205,6 @@ export function AssignModal(S: FileManagerState) {
             )
           })()}
         </div>
-      </div>
-    </div>,
-    document.body
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Files/FileManagerFilesView.tsx b/client/src/components/Files/FileManagerFilesView.tsx
index 20fbd26cf..3c976b589 100644
--- a/client/src/components/Files/FileManagerFilesView.tsx
+++ b/client/src/components/Files/FileManagerFilesView.tsx
@@ -16,12 +16,7 @@ export function FilesView(S: FileManagerState) {
       {/* Upload zone */}
       {can('file_upload', trip) && <div
         {...getRootProps()}
-        style={{
-          margin: '16px 28px 0', border: '2px dashed', borderRadius: 14, padding: '20px 16px',
-          textAlign: 'center', cursor: 'pointer', transition: 'all 0.15s',
-          borderColor: isDragActive ? 'var(--text-secondary)' : 'var(--border-primary)',
-          background: isDragActive ? 'var(--bg-secondary)' : 'var(--bg-card)',
-        }}
+        className={`mx-7 mt-4 cursor-pointer rounded-2xl border-2 border-dashed px-4 py-5 text-center transition-colors max-md:mx-4 ${isDragActive ? 'border-content-muted bg-surface-tertiary' : 'border-edge bg-surface-secondary hover:border-content-faint'}`}
       >
         <input {...getInputProps()} />
         <Upload size={24} style={{ margin: '0 auto 8px', color: isDragActive ? 'var(--text-secondary)' : 'var(--text-faint)', display: 'block' }} />
@@ -35,8 +30,9 @@ export function FilesView(S: FileManagerState) {
             <p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-secondary)', fontWeight: 500, margin: 0 }}>{t('files.dropzone')}</p>
             <p style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 3 }}>{t('files.dropzoneHint')}</p>
             <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 6, opacity: 0.7 }}>
-              {(allowedFileTypes || 'jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv').toUpperCase().split(',').join(', ')} · Max 50 MB
+              {(allowedFileTypes || 'jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv').toUpperCase().split(',').join(', ')}
             </p>
+            <span className="mt-1.5 inline-block rounded-full bg-surface-card px-2 py-[2px] font-geist font-semibold text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))' }}>Max 50 MB</span>
           </>
         )}
       </div>}
diff --git a/client/src/components/Files/FileManagerImageLightbox.test.tsx b/client/src/components/Files/FileManagerImageLightbox.test.tsx
index 83b78373e..90422c6c7 100644
--- a/client/src/components/Files/FileManagerImageLightbox.test.tsx
+++ b/client/src/components/Files/FileManagerImageLightbox.test.tsx
@@ -143,10 +143,10 @@ describe('ImageLightbox', () => {
     const onClose = vi.fn()
     render(<ImageLightbox files={IMAGES} initialIndex={0} onClose={onClose} />)
 
-    fireEvent.click(screen.getByTitle(/open/i))
+    fireEvent.click(screen.getByRole('button', { name: /open/i }))
     expect(openFile).toHaveBeenCalledWith('/f/a.jpg', 'a.jpg')
 
-    fireEvent.click(screen.getByTitle(/download/i))
+    fireEvent.click(screen.getByRole('button', { name: /download/i }))
     expect(downloadFile).toHaveBeenCalledWith('/f/a.jpg', 'a.jpg')
 
     fireEvent.click(screen.getAllByRole('button')[2])
diff --git a/client/src/components/Files/FileManagerImageLightbox.tsx b/client/src/components/Files/FileManagerImageLightbox.tsx
index 2361370e8..26156e5a4 100644
--- a/client/src/components/Files/FileManagerImageLightbox.tsx
+++ b/client/src/components/Files/FileManagerImageLightbox.tsx
@@ -7,6 +7,10 @@ import { getAuthUrl } from '../../api/authUrl'
 import { openFile as openFileUrl } from '../../utils/fileDownload'
 import { triggerDownload, isVideo } from './FileManager.helpers'
 import VideoPlayer from '../Journey/VideoPlayerLazy'
+import { Tooltip } from '../shared/Tooltip'
+
+/** The round buttons on the dark backdrop, the same as the note preview's. */
+const LIGHTBOX_BTN = 'grid h-9 w-9 place-items-center rounded-full bg-[rgba(255,255,255,0.12)] text-[rgba(255,255,255,0.85)] hover:bg-[rgba(255,255,255,0.22)]' // theme-lint-disable: the lightbox is dark in every scheme
 
 // Image lightbox with gallery navigation
 interface ImageLightboxProps {
@@ -94,21 +98,25 @@ export function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxPro
           <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
         </span>
         <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
-          <button type="button"
-            onClick={() => openFileUrl(file.url, file.original_name).catch(() => {})}
-            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
-            title={t('files.openTab')}>
-            <ExternalLink size={16} />
-          </button>
-          <button type="button"
-            onClick={() => triggerDownload(file.url, file.original_name)}
-            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
-            title={t('files.download') || 'Download'}>
-            <Download size={16} />
-          </button>
-          <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}>
-            <X size={18} />
-          </button>
+          <Tooltip label={t('files.openTab')}>
+            <button type="button"
+              onClick={() => openFileUrl(file.url, file.original_name).catch(() => {})}
+              aria-label={t('files.openTab')} className={LIGHTBOX_BTN}>
+              <ExternalLink size={16} />
+            </button>
+          </Tooltip>
+          <Tooltip label={t('files.download') || 'Download'}>
+            <button type="button"
+              onClick={() => triggerDownload(file.url, file.original_name)}
+              aria-label={t('files.download') || 'Download'} className={LIGHTBOX_BTN}>
+              <Download size={16} />
+            </button>
+          </Tooltip>
+          <Tooltip label={t('common.close')}>
+            <button type="button" onClick={onClose} aria-label={t('common.close')} className={LIGHTBOX_BTN}>
+              <X size={18} />
+            </button>
+          </Tooltip>
         </div>
       </div>
 
diff --git a/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx b/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
index c5461fe0c..672518e32 100644
--- a/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
+++ b/client/src/components/Files/FileManagerMarkdownPreviewModal.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
-import { ExternalLink, Download, X } from 'lucide-react'
+import { useEffect, useId, useState } from 'react'
+import { ExternalLink, Download, FileText } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -8,6 +7,7 @@ import rehypeSanitize from 'rehype-sanitize'
 import { openFile as openFileUrl } from '../../utils/fileDownload'
 import type { FileManagerState } from './useFileManager'
 import { triggerDownload } from './FileManager.helpers'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT, PILL } from '../shared/DialogShell'
 
 /**
  * Inline preview for uploaded Markdown files (#1345). Fetches the file's text via
@@ -19,6 +19,9 @@ export function MarkdownPreviewModal(S: FileManagerState) {
   const { previewFile, setPreviewFile, previewFileUrl, toast, t } = S
   const [text, setText] = useState('')
   const [err, setErr] = useState(false)
+  const labelId = useId()
+  const close = () => setPreviewFile(null)
+  const openInTab = () => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))
 
   useEffect(() => {
     if (!previewFileUrl) return
@@ -32,43 +35,35 @@ export function MarkdownPreviewModal(S: FileManagerState) {
     return () => { cancelled = true }
   }, [previewFileUrl])
 
-  return createPortal(
-    <div
-      role="presentation"
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-      onClick={() => setPreviewFile(null)}
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={labelId}
+      width="editor"
+      bodyClassName="collab-note-md min-h-0 flex-1 overflow-y-auto px-7 py-6 leading-relaxed text-content [word-break:break-word]"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><FileText size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
+          title={previewFile.original_name}
+          pills={(
+            <>
+              <button type="button" onClick={openInTab} className={`${PILL} hover:opacity-80`}>
+                <ExternalLink size={13} strokeWidth={2.2} /> {t('files.openTab')}
+              </button>
+              <button type="button" onClick={() => triggerDownload(previewFile.url, previewFile.original_name)} className={`${PILL} hover:opacity-80`}>
+                <Download size={13} strokeWidth={2.2} /> {t('files.download') || 'Download'}
+              </button>
+            </>
+          )}
+        />
+      )}
     >
-      <div
-        role="presentation"
-        style={{ width: '100%', maxWidth: 820, height: '94vh', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-          <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-            <button type="button"
-              onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px', borderRadius: 6 }}>
-              <ExternalLink size={13} /> {t('files.openTab')}
-            </button>
-            <button type="button"
-              onClick={() => triggerDownload(previewFile.url, previewFile.original_name)}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px', borderRadius: 6 }}>
-              <Download size={13} /> {t('files.download') || 'Download'}
-            </button>
-            <button type="button" onClick={() => setPreviewFile(null)}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6 }}>
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-        <div className="collab-note-md" style={{ flex: 1, overflowY: 'auto', padding: '20px 28px', color: 'var(--text-primary)', lineHeight: 1.6, wordBreak: 'break-word' }}>
-          {err
-            ? <p style={{ color: 'var(--text-muted)' }}>{t('files.openError')}</p>
-            : <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]}>{text}</Markdown>}
-        </div>
-      </div>
-    </div>,
-    document.body
+      {err
+        ? <p className="text-content-muted">{t('files.openError')}</p>
+        : <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]}>{text}</Markdown>}
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Files/FileManagerPdfPreviewModal.tsx b/client/src/components/Files/FileManagerPdfPreviewModal.tsx
index 77c208845..4a0361e6f 100644
--- a/client/src/components/Files/FileManagerPdfPreviewModal.tsx
+++ b/client/src/components/Files/FileManagerPdfPreviewModal.tsx
@@ -1,59 +1,52 @@
-import { createPortal } from 'react-dom'
-import { ExternalLink, Download, X } from 'lucide-react'
+import { useId } from 'react'
+import { ExternalLink, Download, FileText } from 'lucide-react'
 import { openFile as openFileUrl } from '../../utils/fileDownload'
 import type { FileManagerState } from './useFileManager'
 import { triggerDownload } from './FileManager.helpers'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT, PILL } from '../shared/DialogShell'
 
+/** A PDF read in place, in the planner's dialog: the name on the head band, open and download beside it. */
 export function PdfPreviewModal(S: FileManagerState) {
   const { previewFile, setPreviewFile, previewFileUrl, toast, t } = S
-  return createPortal(
-    <div
-      role="presentation"
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-      onClick={() => setPreviewFile(null)}
-    >
-      <div
-        role="presentation"
-        style={{ width: '100%', maxWidth: 950, height: '94vh', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-          <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-            <button type="button"
-              onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
-              onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
-              onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
-              <ExternalLink size={13} /> {t('files.openTab')}
-            </button>
-            <button type="button"
-              onClick={() => triggerDownload(previewFile.url, previewFile.original_name)}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
-              onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
-              onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
-              <Download size={13} /> {t('files.download') || 'Download'}
-            </button>
-            <button type="button" onClick={() => setPreviewFile(null)}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6, transition: 'color 0.15s' }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
-              onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-        <object
-          data={previewFileUrl ? `${previewFileUrl}#view=FitH` : undefined}
-          type="application/pdf"
-          style={{ flex: 1, width: '100%', border: 'none' }}
+  const labelId = useId()
+  const close = () => setPreviewFile(null)
+  const openInTab = () => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={labelId}
+      width="wide"
+      bodyClassName="flex min-h-0 flex-1 flex-col"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><FileText size={20} strokeWidth={1.9} className="text-danger" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
           title={previewFile.original_name}
-        >
-          <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-            <button type="button" onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>{t('files.downloadPdf')}</button>
-          </p>
-        </object>
-      </div>
-    </div>,
-    document.body
+          pills={(
+            <>
+              <button type="button" onClick={openInTab} className={`${PILL} hover:opacity-80`}>
+                <ExternalLink size={13} strokeWidth={2.2} /> {t('files.openTab')}
+              </button>
+              <button type="button" onClick={() => triggerDownload(previewFile.url, previewFile.original_name)} className={`${PILL} hover:opacity-80`}>
+                <Download size={13} strokeWidth={2.2} /> {t('files.download') || 'Download'}
+              </button>
+            </>
+          )}
+        />
+      )}
+    >
+      <object
+        data={previewFileUrl ? `${previewFileUrl}#view=FitH` : undefined}
+        type="application/pdf"
+        className="h-[74vh] w-full flex-1 border-0"
+        title={previewFile.original_name}
+      >
+        <p className="p-6 text-center text-content-muted">
+          <button type="button" onClick={openInTab} className="text-content underline">{t('files.downloadPdf')}</button>
+        </p>
+      </object>
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Files/FileManagerPreviewModals.test.tsx b/client/src/components/Files/FileManagerPreviewModals.test.tsx
index 7068e7a46..da18b01c0 100644
--- a/client/src/components/Files/FileManagerPreviewModals.test.tsx
+++ b/client/src/components/Files/FileManagerPreviewModals.test.tsx
@@ -86,15 +86,16 @@ describe('PdfPreviewModal', () => {
 
   it('FE-W4FPM-006: the close button and the backdrop clear the preview, the card does not', () => {
     const { baseElement } = render(<PdfPreviewModal {...state()} />)
-    const backdrop = baseElement.querySelector('div[style*="rgba(0, 0, 0, 0.85)"]') as HTMLElement
+    const backdrop = baseElement.querySelector('.trek-modal-backdrop') as HTMLElement
 
-    fireEvent.click(screen.getAllByRole('button')[2])
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
     expect(setPreviewFile).toHaveBeenCalledWith(null)
 
     setPreviewFile.mockClear()
-    fireEvent.click(backdrop.firstElementChild!)
+    fireEvent.click(screen.getByRole('dialog'))
     expect(setPreviewFile).not.toHaveBeenCalled()
 
+    fireEvent.mouseDown(backdrop)
     fireEvent.click(backdrop)
     expect(setPreviewFile).toHaveBeenCalledWith(null)
   })
@@ -107,15 +108,13 @@ describe('PdfPreviewModal', () => {
     expect(openFile).toHaveBeenCalledWith('/uploads/files/ticket.pdf', 'ticket.pdf')
   })
 
-  it('FE-W4FPM-014: the toolbar buttons brighten on hover and dim again', () => {
+  it('FE-W4FPM-014: the head band carries the name, open, download and close', () => {
     render(<PdfPreviewModal {...state()} />)
 
-    for (const button of screen.getAllByRole('button').slice(0, 3)) {
-      fireEvent.mouseEnter(button)
-      expect(button.style.color).toBe('var(--text-primary)')
-      fireEvent.mouseLeave(button)
-      expect(button.style.color).toBe(button === screen.getAllByRole('button')[2] ? 'var(--text-faint)' : 'var(--text-muted)')
-    }
+    expect(screen.getByRole('dialog', { name: 'ticket.pdf' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /openTab/ })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'files.download' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument()
   })
 })
 
@@ -173,7 +172,7 @@ describe('MarkdownPreviewModal', () => {
     fireEvent.click(screen.getByRole('button', { name: 'files.download' }))
     expect(downloadFile).toHaveBeenCalledWith('/uploads/files/notes.md', 'notes.md')
 
-    fireEvent.click(screen.getAllByRole('button')[2])
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
     expect(setPreviewFile).toHaveBeenCalledWith(null)
     await waitFor(() => expect(screen.getByText('hi')).toBeInTheDocument())
   })
diff --git a/client/src/components/Files/FileManagerRow.tsx b/client/src/components/Files/FileManagerRow.tsx
index 632b332fb..ed9f667e4 100644
--- a/client/src/components/Files/FileManagerRow.tsx
+++ b/client/src/components/Files/FileManagerRow.tsx
@@ -5,6 +5,7 @@ import { TRANSPORT_TYPES } from './FileManager.constants'
 import { getFileIcon, isImage, formatSize, formatDateWithLocale, transportIcon, triggerDownload } from './FileManager.helpers'
 import { AuthedImg } from './FileManagerAuthedImg'
 import { AvatarChip } from './FileManagerAvatarChip'
+import { Tooltip } from '../shared/Tooltip'
 import { SourceBadge } from './FileManagerSourceBadge'
 
 export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolean }) {
@@ -23,15 +24,8 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
   for (const rid of (file.linked_reservation_ids || [])) allLinkedResIds.add(rid)
   const linkedReservations = [...allLinkedResIds].map(rid => reservations?.find(r => r.id === rid)).filter(Boolean)
   return (
-    <div key={file.id} style={{
-      background: 'var(--bg-card)', border: '1px solid var(--border-primary)', borderRadius: 12,
-      padding: '10px 12px', display: 'flex', alignItems: 'flex-start', gap: 10,
-      transition: 'border-color 0.12s',
-      opacity: isTrash ? 0.7 : 1,
-    }}
-      onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
-      onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border-primary)'}
-      className="group"
+    <div key={file.id} className="group flex items-start gap-2.5 rounded-[14px] border border-edge-faint bg-surface-secondary px-3 py-2.5 transition-colors hover:border-edge"
+      style={{ opacity: isTrash ? 0.7 : 1 }}
     >
       {/* Icon or thumbnail */}
       <button
@@ -40,8 +34,8 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
         aria-label={file.original_name}
         onClick={() => !isTrash && openFile(file)}
         style={{
-          flexShrink: 0, width: 36, height: 36, borderRadius: 8, padding: 0,
-          background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+          flexShrink: 0, width: 36, height: 36, borderRadius: 10, padding: 0,
+          background: 'var(--bg-card)', boxShadow: '0 1px 2px rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center',
           cursor: isTrash ? 'default' : 'pointer', overflow: 'hidden',
         }}
       >
@@ -51,8 +45,8 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
               const ext = (file.original_name || '').split('.').pop()?.toUpperCase() || '?'
               const isPdf = file.mime_type === 'application/pdf'
               return (
-                <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? '#ef44441a' : 'var(--bg-tertiary)' }}>
-                  <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? 'var(--danger-soft)' : 'var(--bg-card)' }}>
+                  <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: isPdf ? 'var(--danger)' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
                 </span>
               )
             })()
@@ -85,12 +79,12 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
           <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
 
           {linkedPlaces.map(p => (
-            <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />
+            <SourceBadge key={p.id} icon={MapPin} kind={t('files.sourcePlan')} label={p.name} />
           ))}
           {linkedReservations.map(r => (
             TRANSPORT_TYPES.has(r.type)
-              ? <SourceBadge key={r.id} icon={transportIcon(r.type)} label={`${t('files.sourceTransport')} · ${r.title || t('files.sourceTransport')}`} />
-              : <SourceBadge key={r.id} icon={Ticket} label={`${t('files.sourceBooking')} · ${r.title || t('files.sourceBooking')}`} />
+              ? <SourceBadge key={r.id} icon={transportIcon(r.type)} kind={t('files.sourceTransport')} label={r.title || t('files.sourceTransport')} />
+              : <SourceBadge key={r.id} icon={Ticket} kind={t('files.sourceBooking')} label={r.title || t('files.sourceBooking')} />
           ))}
           {!!file.note_id && (
             <SourceBadge icon={StickyNote} label={t('files.sourceCollab') || 'Collab Notes'} />
@@ -102,40 +96,38 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
       <div className="file-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }}>
         {isTrash ? (
           <>
-            {can('file_delete', trip) && <button type="button" onClick={() => handleRestore(file.id)} title={t('files.restore') || 'Restore'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = '#22c55e'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <RotateCcw size={14} />
-            </button>}
-            {can('file_delete', trip) && <button type="button" onClick={() => handlePermanentDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Trash2 size={14} />
-            </button>}
+            {can('file_delete', trip) && <RowAction label={t('files.restore') || 'Restore'} tone="success" onClick={() => handleRestore(file.id)}><RotateCcw size={14} /></RowAction>}
+            {can('file_delete', trip) && <RowAction label={t('common.delete')} tone="danger" onClick={() => handlePermanentDelete(file.id)}><Trash2 size={14} /></RowAction>}
           </>
         ) : (
           <>
-            <button type="button" onClick={() => handleStar(file.id)} title={file.starred ? t('files.unstar') || 'Unstar' : t('files.star') || 'Star'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: file.starred ? '#facc15' : 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => { if (!file.starred) e.currentTarget.style.color = '#facc15' }} onMouseLeave={e => { if (!file.starred) e.currentTarget.style.color = 'var(--text-faint)' }}>
-              <Star size={14} fill={file.starred ? '#facc15' : 'none'} />
-            </button>
-            {can('file_edit', trip) && <button type="button" onClick={() => setAssignFileId(file.id)} title={t('files.assign') || 'Assign'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Pencil size={14} />
-            </button>}
-            <button type="button" onClick={() => openFile(file)} title={t('common.open')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <ExternalLink size={14} />
-            </button>
-            <button type="button" onClick={() => triggerDownload(file.url, file.original_name)} title={t('files.download') || 'Download'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Download size={14} />
-            </button>
-            {can('file_delete', trip) && <button type="button" onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
-              onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
-              <Trash2 size={14} />
-            </button>}
+            <RowAction label={file.starred ? t('files.unstar') || 'Unstar' : t('files.star') || 'Star'} tone="star" active={!!file.starred} onClick={() => handleStar(file.id)}>
+              <Star size={14} fill={file.starred ? '#facc15' : 'none'} /* theme-lint-disable: the star keeps its gold */ />
+            </RowAction>
+            {can('file_edit', trip) && <RowAction label={t('files.assign') || 'Assign'} onClick={() => setAssignFileId(file.id)}><Pencil size={14} /></RowAction>}
+            <RowAction label={t('common.open')} onClick={() => openFile(file)}><ExternalLink size={14} /></RowAction>
+            <RowAction label={t('files.download') || 'Download'} onClick={() => triggerDownload(file.url, file.original_name)}><Download size={14} /></RowAction>
+            {can('file_delete', trip) && <RowAction label={t('common.delete')} tone="danger" onClick={() => handleDelete(file.id)}><Trash2 size={14} /></RowAction>}
           </>
         )}
       </div>
     </div>
   )
 }
+
+const STAR_ON = 'text-[#facc15]' // theme-lint-disable: the star keeps its gold
+const TONE_HOVER = { plain: 'hover:text-content', success: 'hover:text-success', danger: 'hover:text-danger', star: 'hover:text-[#facc15]' } as const // theme-lint-disable: the star keeps its gold
+
+/** A small action at the end of a file row, named by its tooltip. */
+function RowAction({ label, onClick, tone = 'plain', active = false, children }: {
+  label: string; onClick: () => void; tone?: keyof typeof TONE_HOVER; active?: boolean; children: React.ReactNode
+}) {
+  return (
+    <Tooltip label={label}>
+      <button type="button" onClick={onClick} aria-label={label}
+        className={`flex rounded-md p-1.5 transition-colors ${active ? STAR_ON : 'text-content-faint'} ${TONE_HOVER[tone]}`}>
+        {children}
+      </button>
+    </Tooltip>
+  )
+}
diff --git a/client/src/components/Files/FileManagerSourceBadge.tsx b/client/src/components/Files/FileManagerSourceBadge.tsx
index 4d9ead1a1..39739c46c 100644
--- a/client/src/components/Files/FileManagerSourceBadge.tsx
+++ b/client/src/components/Files/FileManagerSourceBadge.tsx
@@ -1,20 +1,20 @@
-// Source badge
+import { Tooltip } from '../shared/Tooltip'
+
 interface SourceBadgeProps {
   icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
   label: string
+  /** What the badge links to (plan, transport, booking); its tooltip. */
+  kind?: string
 }
 
-export function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
-  return (
-    <span style={{
-      display: 'inline-flex', alignItems: 'center', gap: 4,
-      fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: '#4b5563',
-      background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)',
-      borderRadius: 6, padding: '2px 7px',
-      fontWeight: 500, maxWidth: '100%', overflow: 'hidden',
-    }}>
+/** Where a file is attached: a place, a booking, a note. */
+export function SourceBadge({ icon: Icon, label, kind }: SourceBadgeProps) {
+  const badge = (
+    <span className="inline-flex max-w-full items-center gap-1 overflow-hidden rounded-full border border-edge-faint bg-surface-card px-2 py-[2px] font-medium text-content-secondary"
+      style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>
       <Icon size={10} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+      <span className="truncate">{label}</span>
     </span>
   )
+  return kind ? <Tooltip label={kind}>{badge}</Tooltip> : badge
 }
diff --git a/client/src/components/Files/FileManagerToolbar.tsx b/client/src/components/Files/FileManagerToolbar.tsx
index 9e0d33d24..18ee45da5 100644
--- a/client/src/components/Files/FileManagerToolbar.tsx
+++ b/client/src/components/Files/FileManagerToolbar.tsx
@@ -1,23 +1,29 @@
 import { FolderSync, Star, Trash2 } from 'lucide-react'
 import type { FileManagerState } from './useFileManager'
+import { Tooltip } from '../shared/Tooltip'
 
+/** A 36 px icon control on the bar; open, it is raised like the active filter tab beside it. */
+const BAR_BTN = 'relative grid h-9 w-9 flex-none place-items-center rounded-[10px]'
+const BODY = { fontSize: 'calc(13px * var(--fs-scale-body, 1))' }
+
+/**
+ * The bar on top of Files, in the shape the other trip tabs open with: the
+ * tab's name, the kinds of file to narrow to, and the tools on the right.
+ */
 export function FileManagerToolbar(S: FileManagerState) {
-  const { showTrash, t, files, filterType, setFilterType, toggleTrash, setShowDocSync, docSyncOffered } = S
+  const { showTrash, t, files, filterType, setFilterType, toggleTrash, setShowDocSync, docSyncOffered, trashFiles, can, trip, handleEmptyTrash } = S
+  const trashLabel = t('files.trash') || 'Trash'
   return (
-    <div style={{ padding: '24px 28px 0', flexShrink: 0 }} className="max-md:!px-4 max-md:!pt-4">
-      <div style={{
-        background: 'var(--bg-tertiary)', borderRadius: 18,
-        padding: '14px 16px 14px 22px',
-        display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
-      }}>
-        <h2 style={{ margin: 0, fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
-          {showTrash ? (t('files.trash') || 'Trash') : t('files.title')}
+    <div className="flex-none px-7 pt-6 max-md:px-4 max-md:pt-4">
+      <div className="flex flex-wrap items-center gap-2.5 rounded-[18px] bg-surface-tertiary py-3 pl-[22px] pr-3">
+        <h2 className="m-0 shrink-0 text-subtitle font-semibold tracking-[-0.01em] text-content">
+          {showTrash ? trashLabel : t('files.title')}
         </h2>
 
         {!showTrash && (
           <>
-            <div className="hidden md:block" style={{ width: 1, height: 22, background: 'var(--border-faint)', flexShrink: 0 }} />
-            <div className="hidden md:inline-flex" style={{ gap: 4, flexWrap: 'wrap', flex: 1, minWidth: 0 }}>
+            <div className="mx-1.5 hidden h-[22px] w-px shrink-0 bg-edge-faint md:block" />
+            <div className="hidden min-w-0 flex-1 flex-wrap gap-1 md:inline-flex">
               {[
                 { id: 'all', label: t('files.filterAll') },
                 ...(files.some(f => f.starred) ? [{ id: 'starred', icon: Star } as const] : []),
@@ -36,64 +42,51 @@ export function FileManagerToolbar(S: FileManagerState) {
                   : tab.id === 'collab' ? files.filter(f => f.note_id).length
                   : 0
                 return (
-                  <button type="button" key={tab.id} onClick={() => setFilterType(tab.id)}
-                    style={{
-                      appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-                      display: 'inline-flex', alignItems: 'center', gap: 6,
-                      padding: '6px 12px', borderRadius: 99, fontSize: 'calc(13px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap',
-                      background: active ? 'var(--bg-card)' : 'transparent',
-                      color: active ? 'var(--text-primary)' : 'var(--text-muted)',
-                      fontWeight: active ? 500 : 400,
-                      boxShadow: active ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
-                      transition: 'all 0.15s ease',
-                    }}
+                  <button type="button" key={tab.id} onClick={() => setFilterType(tab.id)} aria-pressed={active}
+                    className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-3 py-1.5 ${active ? 'bg-surface-card font-medium text-content shadow-sm' : 'text-content-muted hover:text-content'}`}
+                    style={BODY}
                   >
-                    {TabIcon ? <TabIcon size={13} fill={active ? '#facc15' : 'none'} color={active ? '#facc15' : 'currentColor'} /> : null}
+                    {TabIcon ? <TabIcon size={13} fill={active ? '#facc15' : 'none'} color={active ? '#facc15' : 'currentColor'} /> /* theme-lint-disable: the star keeps its gold */ : null}
                     {'label' in tab && tab.label}
-                    <span style={{
-                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
-                      background: active ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
-                      color: 'var(--text-faint)',
-                      padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
-                    }}>{count}</span>
+                    <span className="min-w-4 rounded-full bg-surface-tertiary px-1.5 text-center font-geist font-bold text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))' }}>{count}</span>
                   </button>
                 )
               })}
             </div>
           </>
         )}
+        {showTrash && <span className="flex-1" />}
 
         {/* Opens the sync panel. Placed next to the trash rather than in a menu
             because the question it answers, "where do these documents live",
             belongs on the same screen as the documents. Only where there is
             something behind it: see useDocSyncOffered. */}
         {docSyncOffered && (
-          <button type="button" onClick={() => setShowDocSync(true)} title={t('docsync.title')} style={{
-            appearance: 'none', border: '1px solid var(--edge)', cursor: 'pointer', fontFamily: 'inherit',
-            display: 'inline-flex', alignItems: 'center', gap: 6,
-            padding: '9px 12px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-            background: 'transparent', color: 'var(--content-muted)', flexShrink: 0, marginLeft: 'auto',
-          }}>
-            <FolderSync size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">{t('docsync.title')}</span>
+          <Tooltip label={t('docsync.title')}>
+            <button type="button" onClick={() => setShowDocSync(true)} aria-label={t('docsync.title')}
+              className="inline-flex h-9 flex-none items-center gap-1.5 rounded-[10px] bg-surface-card px-3 font-medium text-content-secondary hover:text-content" style={BODY}>
+              <FolderSync size={14} strokeWidth={2.2} /> <span className="hidden sm:inline">{t('docsync.title')}</span>
+            </button>
+          </Tooltip>
+        )}
+
+        {/* Emptying the trash is the one thing to do in it, so it sits on the bar. */}
+        {showTrash && trashFiles.length > 0 && can('file_delete', trip) && (
+          <button type="button" onClick={handleEmptyTrash}
+            className="inline-flex h-9 flex-none items-center gap-1.5 rounded-[10px] bg-danger-soft px-3.5 font-medium text-danger hover:opacity-90" style={BODY}>
+            <Trash2 size={14} strokeWidth={2} />
+            {t('files.emptyTrash') || 'Empty Trash'}
           </button>
         )}
 
-        {/* The first of the two takes the free space, so without the sync
-            button the trash sits flush right the way it always has. */}
-        <button type="button" onClick={toggleTrash} style={{
-          appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
-          display: 'inline-flex', alignItems: 'center', gap: 6,
-          padding: '9px 14px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-          background: 'var(--accent)', color: 'var(--accent-text)',
-          flexShrink: 0, marginLeft: docSyncOffered ? undefined : 'auto',
-          opacity: showTrash ? 1 : 0.88,
-          transition: 'opacity 0.15s ease',
-        }}
-          onMouseEnter={e => e.currentTarget.style.opacity = '1'}
-          onMouseLeave={e => e.currentTarget.style.opacity = showTrash ? '1' : '0.88'}
-        >
-          <Trash2 size={14} strokeWidth={2.5} /> <span className="hidden sm:inline">{t('files.trash') || 'Trash'}</span>
-        </button>
+        {/* The trash is a place to look, not the tab's main action: an icon on
+            the bar, raised while it is open. */}
+        <Tooltip label={trashLabel}>
+          <button type="button" onClick={toggleTrash} aria-label={trashLabel} aria-pressed={showTrash}
+            className={`${BAR_BTN} ${showTrash ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted hover:bg-surface-card hover:text-content'}`}>
+            <Trash2 size={15} strokeWidth={2} />
+          </button>
+        </Tooltip>
       </div>
     </div>
   )
diff --git a/client/src/components/Files/FileManagerTrashView.tsx b/client/src/components/Files/FileManagerTrashView.tsx
index 1c72a2217..1eb3b5018 100644
--- a/client/src/components/Files/FileManagerTrashView.tsx
+++ b/client/src/components/Files/FileManagerTrashView.tsx
@@ -3,20 +3,9 @@ import type { FileManagerState } from './useFileManager'
 import { FileRow } from './FileManagerRow'
 
 export function TrashView(S: FileManagerState) {
-  const { trashFiles, can, trip, handleEmptyTrash, loadingTrash, t } = S
+  const { trashFiles, loadingTrash, t } = S
   return (
-    <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px 16px' }}>
-      {trashFiles.length > 0 && can('file_delete', trip) && (
-        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
-          <button type="button" onClick={handleEmptyTrash} style={{
-            padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
-            background: '#fef2f2', color: '#dc2626', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit',
-          }}>
-            {t('files.emptyTrash') || 'Empty Trash'}
-          </button>
-        </div>
-      )}
+    <div className="flex-1 overflow-y-auto px-7 pb-4 pt-4 max-md:px-4">
       {loadingTrash ? (
         <div style={{ textAlign: 'center', padding: 40, color: 'var(--text-faint)' }}>
           <div style={{ width: 20, height: 20, border: '2px solid var(--text-faint)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto' }} />
diff --git a/client/src/components/Files/docsync/DocSyncBinding.test.tsx b/client/src/components/Files/docsync/DocSyncBinding.test.tsx
index 5e5f240ca..01e96d039 100644
--- a/client/src/components/Files/docsync/DocSyncBinding.test.tsx
+++ b/client/src/components/Files/docsync/DocSyncBinding.test.tsx
@@ -201,7 +201,7 @@ describe('DocSyncBinding: what it says about itself', () => {
     renderCard()
 
     expect(screen.queryByText('In sync')).not.toBeInTheDocument()
-    const dot = screen.getByTitle('In sync')
+    const dot = screen.getByRole('img', { name: 'In sync' })
     expect(dot).toBeInTheDocument()
     expect(dot).toBeEmptyDOMElement()
   })
diff --git a/client/src/components/Files/docsync/DocSyncBits.tsx b/client/src/components/Files/docsync/DocSyncBits.tsx
index 9dfb6e860..ae3db07e4 100644
--- a/client/src/components/Files/docsync/DocSyncBits.tsx
+++ b/client/src/components/Files/docsync/DocSyncBits.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { relativeTime } from '../../../utils/relativeTime'
+import { Tooltip } from '../../shared/Tooltip'
 
 /**
  * The small shared pieces of the document-sync dialog.
@@ -32,15 +33,13 @@ export function Badge({
   children: ReactNode
   title?: string
 }) {
-  return (
-    <span
-      title={title}
-      className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-caption font-medium ${TONES[tone]}`}
-    >
+  const pill = (
+    <span className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-full px-2 py-0.5 text-caption font-medium ${TONES[tone]}`}>
       {icon}
       {children}
     </span>
   )
+  return title ? <Tooltip label={title}>{pill}</Tooltip> : pill
 }
 
 /** The tone each sync state carries, in one place. */
@@ -66,7 +65,14 @@ export function StateBadge({ state, compact }: { state: string; compact?: boolea
     : tone === 'danger' ? 'bg-danger'
     : 'bg-content-faint'
 
-  if (compact) return <span className={`h-2 w-2 shrink-0 rounded-full ${dot}`} title={t(`docsync.linkState.${state}`)} />
+  if (compact) {
+    const label = t(`docsync.linkState.${state}`)
+    return (
+      <Tooltip label={label}>
+        <span role="img" aria-label={label} className={`h-2 w-2 shrink-0 rounded-full ${dot}`} />
+      </Tooltip>
+    )
+  }
 
   return (
     <Badge tone={tone} icon={<span className={`h-1.5 w-1.5 rounded-full ${dot}`} />}>
@@ -81,7 +87,7 @@ export function LastRun({ at }: { at: string | null }) {
   if (!at) return <span className="text-content-faint">{t('docsync.binding.neverRun')}</span>
   const ms = Date.parse(at)
   if (Number.isNaN(ms)) return null
-  return <span title={new Date(ms).toLocaleString(locale)}>{relativeTime(ms, language)}</span>
+  return <Tooltip label={new Date(ms).toLocaleString(locale)}><span>{relativeTime(ms, language)}</span></Tooltip>
 }
 
 /**
diff --git a/client/src/components/Files/docsync/DocSyncConnectModal.tsx b/client/src/components/Files/docsync/DocSyncConnectModal.tsx
index f9a04fd65..754f6e538 100644
--- a/client/src/components/Files/docsync/DocSyncConnectModal.tsx
+++ b/client/src/components/Files/docsync/DocSyncConnectModal.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react'
-import { AlertTriangle, Check, Loader2, ShieldAlert } from 'lucide-react'
-import Modal from '../../shared/Modal'
+import { useId, useState } from 'react'
+import { AlertTriangle, Check, Loader2, Plug, ShieldAlert } from 'lucide-react'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from '../../shared/DialogShell'
 import ToggleSwitch from '../../Settings/ToggleSwitch'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { useConnectForm } from './useConnectForm'
@@ -35,46 +35,38 @@ export default function DocSyncConnectModal({
   const [verdict, setVerdict] = useState<{ connected: boolean; account?: string; error?: string } | null>(null)
 
   const test = async () => setVerdict(await form.probe())
+  const labelId = useId()
 
   const save = async () => {
     if (await form.save()) onConnected(provider.id)
   }
 
   return (
-    <Modal
-      isOpen
+    <DialogShell
       onClose={onClose}
-      size="md"
-      title={
-        <span className="flex items-center gap-2.5">
-          {Icon && <Icon className="h-5 w-5 text-content" />}
-          <span>{provider.name}</span>
-        </span>
-      }
-      footer={
-        <div className="flex items-center justify-between gap-3">
+      labelledBy={labelId}
+      header={(
+        <DialogHeader
+          tile={<DialogTile>{Icon ? <Icon className="h-5 w-5 text-content" /> : <Plug size={20} strokeWidth={1.9} className="text-content-muted" />}</DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={provider.name}
+        />
+      )}
+      footer={(
+        <DialogFooter>
           <Verdict verdict={verdict} busy={sync.busy === 'test'} failure={sync.error} />
-          <div className="flex shrink-0 items-center gap-2">
-            <button
-              type="button"
-              onClick={() => void test()}
-              disabled={!form.complete || sync.busy === 'test'}
-              className="rounded-lg border border-edge px-3.5 py-2 text-body text-content-secondary transition-colors hover:bg-surface-hover disabled:opacity-50"
-            >
-              {t('docsync.test')}
-            </button>
-            <button
-              type="button"
-              onClick={() => void save()}
-              disabled={!form.complete || sync.busy === 'save'}
-              className="flex items-center gap-2 rounded-lg bg-accent px-3.5 py-2 text-body font-medium text-accent-text transition-opacity hover:opacity-90 disabled:opacity-50"
-            >
-              {sync.busy === 'save' && <Loader2 size={14} className="animate-spin" />}
-              {t('docsync.connect.submit')}
-            </button>
-          </div>
-        </div>
-      }
+          <FooterSpacer />
+          <DialogButton onClick={() => void test()} disabled={!form.complete || sync.busy === 'test'}>
+            {t('docsync.test')}
+          </DialogButton>
+          <DialogButton variant="primary" onClick={() => void save()} disabled={!form.complete || sync.busy === 'save'}
+            icon={sync.busy === 'save' ? <Loader2 size={14} className="animate-spin" /> : undefined}>
+            {t('docsync.connect.submit')}
+          </DialogButton>
+        </DialogFooter>
+      )}
     >
       <div className="space-y-4">
         <p className="text-caption text-content-muted">{t(`docsync.connect.about.${provider.id}`)}</p>
@@ -108,7 +100,7 @@ export default function DocSyncConnectModal({
           </span>
         </label>
       </div>
-    </Modal>
+    </DialogShell>
   )
 }
 
diff --git a/client/src/components/Files/docsync/DocSyncPanel.tsx b/client/src/components/Files/docsync/DocSyncPanel.tsx
index 9507f6b18..c8fd0a432 100644
--- a/client/src/components/Files/docsync/DocSyncPanel.tsx
+++ b/client/src/components/Files/docsync/DocSyncPanel.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react'
-import { AlertCircle, ArrowRight, Check, Loader2, Plus } from 'lucide-react'
-import Modal from '../../shared/Modal'
+import { useEffect, useId, useMemo, useState } from 'react'
+import { AlertCircle, ArrowRight, Check, FolderSync, Loader2, Plus } from 'lucide-react'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../../shared/DialogShell'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import { DOCUMENT_PROVIDER_ICONS } from '../../shared/DocumentProviderIcons'
 import { StateBadge } from './DocSyncBits'
@@ -62,21 +62,26 @@ export default function DocSyncPanel({
   }, [sync.links])
 
   const attention = ATTENTION_STATES.reduce((n, k) => n + (sync.itemCounts[k] ?? 0), 0)
+  const labelId = useId()
 
   return (
     <>
-      <Modal
-        isOpen
+      <DialogShell
         onClose={onClose}
-        size="4xl"
-        title={
-          <span className="flex flex-col">
-            <span>{t('docsync.title')}</span>
-            {tripTitle && (
-              <span className="mt-0.5 truncate text-caption font-normal text-content-muted">{tripTitle}</span>
-            )}
-          </span>
-        }
+        labelledBy={labelId}
+        width="wide"
+        // A connect or scope question opened from here takes Escape for itself.
+        blocked={!!connecting || !!scopeFor || !!reconnecting}
+        header={(
+          <DialogHeader
+            tile={<DialogTile><FolderSync size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+            tint={NEUTRAL_TINT}
+            labelId={labelId}
+            onClose={onClose}
+            title={t('docsync.title')}
+            sub={tripTitle || undefined}
+          />
+        )}
       >
         {sync.loading ? (
           <div className="grid place-items-center py-20">
@@ -127,7 +132,7 @@ export default function DocSyncPanel({
             </div>
           </div>
         )}
-      </Modal>
+      </DialogShell>
 
       {connecting && (
         <DocSyncConnectModal
diff --git a/client/src/components/Files/docsync/DocSyncScopeModal.tsx b/client/src/components/Files/docsync/DocSyncScopeModal.tsx
index daa036819..231a6ad02 100644
--- a/client/src/components/Files/docsync/DocSyncScopeModal.tsx
+++ b/client/src/components/Files/docsync/DocSyncScopeModal.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import { FolderPlus, Loader2, Search } from 'lucide-react'
-import Modal from '../../shared/Modal'
+import { DialogHeader, DialogShell, DialogTile, NEUTRAL_TINT } from '../../shared/DialogShell'
 import { useTranslation } from '../../../i18n/TranslationContext'
 import type { DocSyncConnection, DocSyncScope, useDocSync } from './useDocSync'
 
@@ -31,6 +31,7 @@ export default function DocSyncScopeModal({
   onBound: () => void
 }) {
   const { t } = useTranslation()
+  const labelId = useId()
   const [scopes, setScopes] = useState<DocSyncScope[] | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [query, setQuery] = useState('')
@@ -92,7 +93,20 @@ export default function DocSyncScopeModal({
   }
 
   return (
-    <Modal isOpen onClose={onClose} size="md" title={t('docsync.scope.title', { provider: providerName })}>
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><FolderPlus size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          title={t('docsync.scope.title', { provider: providerName })}
+        />
+      )}
+    >
       <div className="space-y-4">
         <p className="text-caption text-content-muted">{t('docsync.scope.intro')}</p>
 
@@ -176,6 +190,6 @@ export default function DocSyncScopeModal({
           )}
         </div>
       </div>
-    </Modal>
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Map/MapView.tsx b/client/src/components/Map/MapView.tsx
index df0557690..6f434dcf1 100644
--- a/client/src/components/Map/MapView.tsx
+++ b/client/src/components/Map/MapView.tsx
@@ -572,7 +572,7 @@ function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.Leafle
 
 // Module-level photo cache shared with PlaceAvatar
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
-import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey } from './placePhoto'
+import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey, placePhotoFull, placePhotoUrl } from './placePhoto'
 import { useAuthStore } from '../../store/authStore'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import LocationButton from './LocationButton'
@@ -717,8 +717,8 @@ const MemoMarker = memo(function MemoMarker({
         },
         remove: () => { cleanupRef.current?.(); cleanupRef.current = null },
         click: () => onClickPlace(place.id),
-        mouseover: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
-        mousemove: (e: any) => onHover(place, e.originalEvent.clientX, e.originalEvent.clientY),
+        mouseover: (e: any) => onHover({ ...place, photo: placePhotoFull(place) }, e.originalEvent.clientX, e.originalEvent.clientY),
+        mousemove: (e: any) => onHover({ ...place, photo: placePhotoFull(place) }, e.originalEvent.clientX, e.originalEvent.clientY),
         mouseout: onHoverOut,
       }}
       zIndexOffset={isSelected ? 1000 : 0}
@@ -1009,9 +1009,7 @@ export const MapView = memo(function MapView({
 
   const markers = useMemo(() => places.map((place) => {
     const isSelected = place.id === selectedPlaceId
-    const pck = photoCacheKey(place)
-    // A custom uploaded image wins over the auto-fetched thumb; otherwise fall back.
-    const photoUrl = isCustomPlaceImage(place.image_url) ? place.image_url! : ((pck && photoUrls[pck]) || place.image_url || null)
+    const photoUrl = placePhotoUrl(place, photoUrls)
     const orderNumbers = dayOrderMap[place.id] ?? null
     return (
       <MemoMarker
@@ -1369,6 +1367,7 @@ export const MapView = memo(function MapView({
         categoryColor={hoveredPlace.category_color}
         address={hoveredPlace.address}
         rating={hoveredPlace.rating_avg}
+        photo={hoveredPlace.photo}
       />
     )}
     </>
diff --git a/client/src/components/Map/MapViewGL.tsx b/client/src/components/Map/MapViewGL.tsx
index bb0f53773..592625cc6 100644
--- a/client/src/components/Map/MapViewGL.tsx
+++ b/client/src/components/Map/MapViewGL.tsx
@@ -12,7 +12,7 @@ import { useTranslation } from '../../i18n/TranslationContext'
 import { MapLayerSwitcher, MAP_LAYER_SWITCHER_INSET, type BaseLayer } from './MapLayerSwitcher'
 import { useAuthStore } from '../../store/authStore'
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
-import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey } from './placePhoto'
+import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey, placePhotoFull, placePhotoUrl } from './placePhoto'
 import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
@@ -1849,9 +1849,7 @@ export function MapViewGL({
 
       visiblePlaces.forEach(place => {
         const orderNumbers = dayOrderMap[place.id] ?? null
-        const pck = photoCacheKey(place)
-        // A custom image wins over the auto-fetched thumb; otherwise fall back to it.
-        const photoUrl = isCustomPlaceImage(place.image_url) ? place.image_url! : ((pck && photoUrls[pck]) || place.image_url || null)
+        const photoUrl = placePhotoUrl(place, photoUrls)
         const selected = place.id === selectedPlaceId
         const el = createMarkerElement(place as Place & { category_color?: string; category_icon?: string }, photoUrl, orderNumbers, selected)
         // Drag onto a day in the plan (#891). Markers are rebuilt from scratch
@@ -1870,7 +1868,7 @@ export function MapViewGL({
         el.addEventListener('mouseenter', (ev) => {
           if (hoverDisabledRef.current || camMovingRef.current) return
           hoverIdRef.current = place.id
-          setHoverPlace(place as Place & { category_color?: string; category_icon?: string; category_name?: string })
+          setHoverPlace({ ...(place as Place & { category_color?: string; category_icon?: string; category_name?: string }), photo: placePhotoFull(place) })
           setHoverPos({ x: (ev as MouseEvent).clientX, y: (ev as MouseEvent).clientY })
         })
         el.addEventListener('mousemove', (ev) => {
@@ -2447,7 +2445,8 @@ export function MapViewGL({
           categoryIcon={hoverPlace.category_icon}
           categoryColor={hoverPlace.category_color}
           address={hoverPlace.address}
-        rating={hoverPlace.rating_avg}
+          rating={hoverPlace.rating_avg}
+          photo={hoverPlace.photo}
         />
       )}
     </div>
diff --git a/client/src/components/Map/PlaceHoverCard.tsx b/client/src/components/Map/PlaceHoverCard.tsx
index c08862219..93a677caa 100644
--- a/client/src/components/Map/PlaceHoverCard.tsx
+++ b/client/src/components/Map/PlaceHoverCard.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
-import { Star } from 'lucide-react'
+import { MapPin, Star } from 'lucide-react'
 import { getCategoryIcon } from '../shared/categoryIcons'
+import { fs } from '../shared/DialogShell'
+import { tintOf } from '../Planner/planParts'
 
 /**
  * What a place is, shown at the cursor while the pointer rests on its marker.
@@ -24,48 +26,41 @@ export interface PlaceHoverCardProps {
   address?: string | null
   /** Average across everyone who rated it, when the surface tracks ratings. */
   rating?: number | null
+  /** The picture its marker wears; the card shows it in place of the category tile. */
+  photo?: string | null
 }
 
-export default function PlaceHoverCard({ x, y, name, categoryName, categoryIcon, categoryColor, address, rating }: PlaceHoverCardProps): React.ReactElement {
-  const CatIcon = categoryName ? getCategoryIcon(categoryIcon) : null
+export default function PlaceHoverCard({ x, y, name, categoryName, categoryIcon, categoryColor, address, rating, photo }: PlaceHoverCardProps): React.ReactElement {
+  // The tile wears the category the way the planner's rows do; without one it is a quiet pin.
+  const CatIcon = categoryName ? getCategoryIcon(categoryIcon) : MapPin
+  const tone = categoryName ? categoryColor || 'var(--text-muted)' : null
   return (
-    <div data-testid="tooltip" style={{
-      position: 'fixed',
-      left: x + 14,
-      top: y - 10,
-      zIndex: 9999,
-      pointerEvents: 'none',
-      background: 'white',
-      borderRadius: 8,
-      boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
-      padding: '6px 10px',
-      fontFamily: 'var(--font-system)',
-      maxWidth: 220,
-      whiteSpace: 'nowrap',
-    }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-        <div style={{ fontWeight: 600, fontSize: 12, color: '#111827', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {name}
+    <div data-testid="tooltip"
+      className="flex max-w-[300px] items-center gap-3 rounded-[18px] border border-edge-faint bg-surface-card p-1.5 pr-4 font-system shadow-popover"
+      style={{ position: 'fixed', left: x + 14, top: y - 10, zIndex: 9999, pointerEvents: 'none' }}>
+      {/* Twelve inside eighteen with six of padding: the picture's corners follow the card's. */}
+      {photo ? (
+        <img src={photo} alt="" className="block h-14 w-14 flex-none rounded-[12px] bg-surface-tertiary object-cover" />
+      ) : (
+        <span className="grid h-14 w-14 flex-none place-items-center rounded-[12px]"
+          style={{ background: tone ? tintOf(tone, 14) : 'var(--bg-tertiary)' }}>
+          <CatIcon size={18} strokeWidth={2} style={{ color: tone || 'var(--text-faint)' }} />
+        </span>
+      )}
+      <div className="flex min-w-0 flex-col">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <span className="min-w-0 truncate font-semibold text-content" style={fs(13, 'body')}>{name}</span>
+          {typeof rating === 'number' && rating > 0 && (
+            <span className="inline-flex flex-none items-center gap-0.5 font-geist tabular-nums text-content-secondary" style={fs(11)}>
+              <Star size={10} strokeWidth={2} className="fill-current text-warning" aria-hidden />
+              {/* One decimal only when it earns it: "4" reads faster than "4.0". */}
+              {Number.isInteger(rating) ? rating : rating.toFixed(1)}
+            </span>
+          )}
         </div>
-        {typeof rating === 'number' && rating > 0 && (
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, flexShrink: 0, fontSize: 11, fontWeight: 600, color: '#111827' }}>
-            <Star size={10} style={{ fill: '#f59e0b', color: '#f59e0b' }} aria-hidden />
-            {/* One decimal only when it earns it: "4" reads faster than "4.0". */}
-            {Number.isInteger(rating) ? rating : rating.toFixed(1)}
-          </span>
-        )}
+        {categoryName && <span className="truncate text-content-muted" style={fs(11)}>{categoryName}</span>}
+        {address && <span className="truncate text-content-faint" style={fs(11)}>{address}</span>}
       </div>
-      {categoryName && CatIcon && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 1 }}>
-          <CatIcon size={10} style={{ color: categoryColor || '#6b7280', flexShrink: 0 }} />
-          <span style={{ fontSize: 11, color: '#6b7280' }}>{categoryName}</span>
-        </div>
-      )}
-      {address && (
-        <div style={{ fontSize: 11, color: '#9ca3af', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis' }}>
-          {address}
-        </div>
-      )}
     </div>
   )
 }
diff --git a/client/src/components/Map/mapHover.ts b/client/src/components/Map/mapHover.ts
index 5d283c627..e94e28c66 100644
--- a/client/src/components/Map/mapHover.ts
+++ b/client/src/components/Map/mapHover.ts
@@ -9,5 +9,7 @@ export interface MapHoverInfo {
   /** Everyone's average, where the surface keeps ratings. On the collections map it
    *  is the one thing a round photo cannot tell you: which of these you liked. */
   rating_avg?: number | null
+  /** The picture its marker wears, so the hover card can show the same one. */
+  photo?: string | null
   routeVia?: RouteVia
 }
diff --git a/client/src/components/Map/placePhoto.ts b/client/src/components/Map/placePhoto.ts
index 3086a9002..a6ef8523a 100644
--- a/client/src/components/Map/placePhoto.ts
+++ b/client/src/components/Map/placePhoto.ts
@@ -1,4 +1,5 @@
 import { escapeHtml } from '@trek/shared'
+import { getCached } from '../../services/photoService'
 
 const PHOTO_PROXY_PREFIX = '/api/maps/place-photo/'
 
@@ -49,6 +50,30 @@ export function photoSourcesKey(places: Array<PhotoSource & { id: number }>): st
   return places.map(p => `${p.id}:${isCustomPlaceImage(p.image_url) ? 'own' : photoCacheKey(p)}`).join('|')
 }
 
+/**
+ * The picture a place wears on the map: a custom uploaded image wins over the
+ * auto-fetched thumb, which wins over whatever image_url says. The marker and the
+ * hover card both ask this, so they never show two different pictures.
+ */
+export function placePhotoUrl(place: PhotoSource, thumbs: Record<string, string>): string | null {
+  if (isCustomPlaceImage(place.image_url)) return place.image_url!
+  const key = photoCacheKey(place)
+  return (key && thumbs[key]) || place.image_url || null
+}
+
+/**
+ * The same picture at full size, for the hover card. The marker's thumb is a 48px
+ * circle cut for a round pin, which blurs and keeps its round cut-out when it is
+ * shown any larger, so the card asks the photo cache for the picture it came from.
+ */
+export function placePhotoFull(place: PhotoSource): string | null {
+  if (isCustomPlaceImage(place.image_url)) return place.image_url!
+  const key = photoCacheKey(place)
+  const full = key ? getCached(key)?.photoUrl : null
+  if (full) return full
+  return place.image_url?.startsWith(PHOTO_PROXY_PREFIX) ? place.image_url : null
+}
+
 /**
  * The picture inside a round place marker, for both the Leaflet and the GL map.
  *
diff --git a/client/src/components/Packing/PackingListPanel.test.tsx b/client/src/components/Packing/PackingListPanel.test.tsx
index 774933d85..883a1e8e3 100644
--- a/client/src/components/Packing/PackingListPanel.test.tsx
+++ b/client/src/components/Packing/PackingListPanel.test.tsx
@@ -901,8 +901,13 @@ describe('PackingListPanel', () => {
 
     // Picker is open - find "Trolley" button inside the dropdown. The bag
     // sidebar carries the same name on its own button, so scope the query to
-    // the picker (the dropdown is a sibling of the package button).
-    const trolleyBtn = await within(packageBtn!.parentElement!).findByRole('button', { name: /Trolley/ });
+    // the picker, which opens in a portal on the body.
+    const picker = await waitFor(() => {
+      const el = document.body.querySelector<HTMLElement>(':scope > .trek-menu-enter');
+      if (!el) throw new Error('bag picker not open yet');
+      return el;
+    });
+    const trolleyBtn = await within(picker).findByRole('button', { name: /Trolley/ });
     fireEvent.click(trolleyBtn);
 
     await waitFor(() => expect(putBody).toMatchObject({ bag_id: 7 }));
@@ -934,10 +939,10 @@ describe('PackingListPanel', () => {
     await user.click(importBtn!);
     await screen.findByText('Import Packing List');
 
-    // Click on the backdrop (the outer div that closes the modal)
-    // The backdrop div has no specific identifier so we use the document.body portal
-    const backdrop = document.querySelector('[style*="backdrop-filter"]') as HTMLElement;
+    // A press that starts and ends on the backdrop closes the dialog.
+    const backdrop = document.querySelector('.trek-modal-backdrop') as HTMLElement;
     expect(backdrop).toBeTruthy();
+    fireEvent.mouseDown(backdrop!);
     fireEvent.click(backdrop!);
 
     await waitFor(() => expect(screen.queryByText('Import Packing List')).not.toBeInTheDocument());
diff --git a/client/src/components/Packing/PackingListPanelBagCard.tsx b/client/src/components/Packing/PackingListPanelBagCard.tsx
index f047343d7..be279b529 100644
--- a/client/src/components/Packing/PackingListPanelBagCard.tsx
+++ b/client/src/components/Packing/PackingListPanelBagCard.tsx
@@ -1,9 +1,11 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import { X, Plus } from 'lucide-react'
 import type { PackingItem, PackingBag } from '../../types'
 import type { TripMember } from './usePackingListPanel'
 import { PopoverItem } from './PackingPopover'
 import { POPOVER, POPOVER_CAPTION, useDismissOnOutside } from './packingPopoverStyles'
+import { useAnchoredPosition } from '../../hooks/useAnchoredPosition'
 
 interface BagCardProps {
   bag: PackingBag; bagItems: PackingItem[]; totalWeight: number; pct: number; tripId: number
@@ -17,8 +19,11 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
   const [nameVal, setNameVal] = useState(bag.name)
   const [showUserPicker, setShowUserPicker] = useState(false)
   const membersRef = useRef<HTMLDivElement>(null)
+  const pickerRef = useRef<HTMLDivElement>(null)
   const closePicker = useCallback(() => setShowUserPicker(false), [])
-  useDismissOnOutside(membersRef, showUserPicker, closePicker)
+  useDismissOnOutside(membersRef, showUserPicker, closePicker, pickerRef)
+  // The bag sidebar scrolls and would clip the list, so it hangs off the body under the faces.
+  const pickerBox = useAnchoredPosition(membersRef, showUserPicker, { estimatedHeight: 260, offset: 6 })
   useEffect(() => setNameVal(bag.name), [bag.name])
 
   const saveName = () => {
@@ -92,8 +97,12 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
             <Plus size={sz.avatar * 0.5} />
           </button>
         )}
-        {showUserPicker && (
-          <div className="trek-menu-enter" style={{ ...POPOVER, position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 50, width: 200 }}>
+        {showUserPicker && pickerBox && createPortal(
+          <div ref={pickerRef} className="trek-menu-enter" style={{
+            ...POPOVER, position: 'fixed', zIndex: 'var(--z-toast)', width: 200, overflowY: 'auto',
+            top: pickerBox.top, bottom: pickerBox.bottom, maxHeight: pickerBox.maxHeight,
+            left: Math.max(8, pickerBox.left + pickerBox.width - 200),
+          }}>
             <div style={POPOVER_CAPTION}>{t('packing.assignMembers')}</div>
             {tripMembers.map(m => (
               <PopoverItem key={m.id} label={m.username} active={memberIds.includes(m.id)} onClick={() => toggleMember(m.id)}
@@ -106,7 +115,8 @@ export function BagCard({ bag, bagItems, totalWeight, pct, tripId, tripMembers,
                 )} />
             ))}
             {tripMembers.length === 0 && <div style={{ padding: '8px 10px', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{t('packing.noMembers')}</div>}
-          </div>
+          </div>,
+          document.body,
         )}
         </div>
         {canEdit && <button type="button" onClick={onDelete} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--text-faint)', display: 'flex' }}><X size={sz.icon} /></button>}
diff --git a/client/src/components/Packing/PackingListPanelHeader.tsx b/client/src/components/Packing/PackingListPanelHeader.tsx
index cfd9a6299..49848e318 100644
--- a/client/src/components/Packing/PackingListPanelHeader.tsx
+++ b/client/src/components/Packing/PackingListPanelHeader.tsx
@@ -1,5 +1,5 @@
 import {
-  CheckCheck, Luggage, Package, FolderPlus, Download, Trash2,
+  CheckCheck, Luggage, Package, FolderPlus, Download, Trash2, ListPlus, BookmarkPlus,
 } from 'lucide-react'
 import type { PackingState } from './usePackingListPanel'
 import NameDialog from '../shared/NameDialog'
@@ -202,6 +202,7 @@ export function PackingHeader(S: PackingState) {
       <NameDialog
         open={canEdit && addingCategory}
         title={t('packing.addCategory')}
+        icon={ListPlus}
         placeholder={t('packing.newCategoryPlaceholder')}
         confirmLabel={t('common.add')}
         value={newCatName}
@@ -212,6 +213,7 @@ export function PackingHeader(S: PackingState) {
       <NameDialog
         open={canEdit && isAdmin && items.length > 0 && showSaveTemplate}
         title={t('packing.saveAsTemplate')}
+        icon={BookmarkPlus}
         placeholder={t('packing.templateName')}
         confirmLabel={t('common.save')}
         value={saveTemplateName}
diff --git a/client/src/components/Packing/PackingListPanelImportModal.tsx b/client/src/components/Packing/PackingListPanelImportModal.tsx
index 773164935..477deb82f 100644
--- a/client/src/components/Packing/PackingListPanelImportModal.tsx
+++ b/client/src/components/Packing/PackingListPanelImportModal.tsx
@@ -1,75 +1,62 @@
-import { createPortal } from 'react-dom'
-import { FileDown } from 'lucide-react'
+import { useId } from 'react'
+import { Download, FileDown } from 'lucide-react'
 import type { PackingState } from './usePackingListPanel'
 import { PACKING_IMPORT_ACCEPT } from './packingListPanel.constants'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 
+/** Pasting a list or loading a file: one item per line, numbered as it is typed. */
 export function BulkImportModal(S: PackingState) {
   const { setShowImportModal, t, importText, setImportText, csvInputRef, handleCsvFile, handleBulkImport, parseImportLines } = S
-  return createPortal(
-    <div style={{
-      position: 'fixed', inset: 0, zIndex: 1000,
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(3px)',
-    }} role="presentation" onClick={e => { if (e.target === e.currentTarget) setShowImportModal(false) }}>
-      <div style={{
-        width: 420, maxHeight: '80vh', background: 'var(--bg-card)', borderRadius: 16,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-        display: 'flex', flexDirection: 'column', gap: 14,
-      }}>
-        <div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{t('packing.importTitle')}</div>
-        <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', lineHeight: 1.5 }}>
-          {t('packing.importHint')}
-          <br />
-          {t('packing.importHintMarkdown')}
-        </div>
-        <div style={{ display: 'flex', border: '1px solid var(--border-primary)', borderRadius: 10, overflow: 'hidden', background: 'var(--bg-input)' }}>
-          <div style={{
-            padding: '10px 0', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'monospace', lineHeight: 1.5,
-            color: 'var(--text-faint)', textAlign: 'right', userSelect: 'none',
-            background: 'var(--bg-hover)', borderRight: '1px solid var(--border-faint)',
-            minWidth: 32, flexShrink: 0,
-          }}>
-            {(importText || ' ').split('\n').map((_, i) => (
-              <div key={i} style={{ padding: '0 6px' }}>{i + 1}</div>
-            ))}
-          </div>
-          <textarea
-            value={importText}
-            onChange={e => setImportText(e.target.value)}
-            rows={10}
-            placeholder={t('packing.importPlaceholder')}
-            style={{
-              flex: 1, border: 'none', padding: '10px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'monospace',
-              outline: 'none', boxSizing: 'border-box', color: 'var(--text-primary)',
-              background: 'transparent', resize: 'vertical', lineHeight: 1.5,
-            }}
-          />
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <div>
-            <input ref={csvInputRef} type="file" accept={PACKING_IMPORT_ACCEPT} style={{ display: 'none' }} onChange={handleCsvFile} />
-            <button type="button" onClick={() => csvInputRef.current?.click()} style={{
-              display: 'flex', alignItems: 'center', gap: 5, padding: '5px 10px',
-              border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none',
-              fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', cursor: 'pointer', fontFamily: 'inherit',
-            }}>
-              <FileDown size={11} /> {t('packing.importCsv')}
-            </button>
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button type="button" onClick={() => setShowImportModal(false)} style={{
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'none', border: '1px solid var(--border-primary)',
-              borderRadius: 8, padding: '6px 14px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit',
-            }}>{t('common.cancel')}</button>
-            <button type="button" onClick={handleBulkImport} disabled={!importText.trim()} style={{
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'var(--accent)', color: 'var(--accent-text)',
-              border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600,
-              fontFamily: 'inherit', opacity: importText.trim() ? 1 : 0.5,
-            }}>{t('packing.importAction', { count: parseImportLines(importText).length })}</button>
-          </div>
+  const labelId = useId()
+  const close = () => setShowImportModal(false)
+  const text = fs(13, 'body')
+
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={labelId}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Download size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={close}
+          title={t('packing.importTitle')}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <input ref={csvInputRef} type="file" accept={PACKING_IMPORT_ACCEPT} className="hidden" onChange={handleCsvFile} />
+          <DialogButton icon={<FileDown size={14} strokeWidth={2} />} onClick={() => csvInputRef.current?.click()}>{t('packing.importCsv')}</DialogButton>
+          <FooterSpacer />
+          <DialogButton onClick={close}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={handleBulkImport} disabled={!importText.trim()}>
+            {t('packing.importAction', { count: parseImportLines(importText).length })}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <p className="m-0 leading-normal text-content-muted" style={fs(12.5, 'body')}>
+        {t('packing.importHint')}
+        <br />
+        {t('packing.importHintMarkdown')}
+      </p>
+      <div className="flex overflow-hidden rounded-[10px] border border-edge bg-surface-input focus-within:ring-2 focus-within:ring-[color:var(--text-primary)]">
+        <div aria-hidden className="min-w-8 flex-none select-none border-r border-edge-faint bg-surface-tertiary py-2.5 text-right font-mono leading-normal text-content-faint" style={text}>
+          {(importText || ' ').split('\n').map((_, i) => (
+            <div key={i} className="px-1.5">{i + 1}</div>
+          ))}
         </div>
+        <textarea
+          value={importText}
+          onChange={e => setImportText(e.target.value)}
+          rows={10}
+          placeholder={t('packing.importPlaceholder')}
+          aria-label={t('packing.importTitle')}
+          className="min-w-0 flex-1 resize-y border-0 bg-transparent px-3 py-2.5 font-mono leading-normal text-content outline-none placeholder:text-content-faint dark:bg-transparent"
+          style={text}
+        />
       </div>
-    </div>,
-    document.body
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Packing/PackingListPanelItemRow.test.tsx b/client/src/components/Packing/PackingListPanelItemRow.test.tsx
index 838d96d4d..3461d1e73 100644
--- a/client/src/components/Packing/PackingListPanelItemRow.test.tsx
+++ b/client/src/components/Packing/PackingListPanelItemRow.test.tsx
@@ -169,7 +169,8 @@ describe('ArtikelZeile — basics', () => {
     fireEvent.mouseLeave(row)
     expect(screen.getByRole('button', { name: 'Trolley' })).toBeInTheDocument()
 
-    fireEvent.click(container.querySelector('div[role="presentation"]')!)
+    // The picker and its click catcher open in a portal on the body.
+    fireEvent.click(Array.from(document.body.children).find(el => el.getAttribute('role') === 'presentation')!)
     expect(screen.queryByRole('button', { name: 'Trolley' })).toBeNull()
   })
 })
diff --git a/client/src/components/Packing/PackingListPanelItemRow.tsx b/client/src/components/Packing/PackingListPanelItemRow.tsx
index f44506ade..0af802eff 100644
--- a/client/src/components/Packing/PackingListPanelItemRow.tsx
+++ b/client/src/components/Packing/PackingListPanelItemRow.tsx
@@ -1,4 +1,6 @@
 import { useRef, useState, type CSSProperties } from 'react'
+import { createPortal } from 'react-dom'
+import { useAnchoredPosition } from '../../hooks/useAnchoredPosition'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -55,6 +57,9 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
   // that only shows on hover is also there for someone tabbing through.
   const [focused, setFocused] = useState(false)
   const [showBagPicker, setShowBagPicker] = useState(false)
+  // The picker opens in a portal: inside the category card it was cut off by the card's edge.
+  const bagBtnRef = useRef<HTMLButtonElement>(null)
+  const bagBox = useAnchoredPosition(bagBtnRef, showBagPicker, { estimatedHeight: 260, offset: 6 })
   const [showItemMenu, setShowItemMenu] = useState(false)
   const [showMenuCategories, setShowMenuCategories] = useState(false)
   const [bagInlineCreate, setBagInlineCreate] = useState(false)
@@ -248,6 +253,7 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
           </div>
           <div style={{ position: 'relative' }}>
             <button type="button"
+              ref={bagBtnRef}
               onClick={() => canEdit && setShowBagPicker(p => !p)}
               style={{
                 width: 22, height: 22, borderRadius: '50%', cursor: canEdit ? 'pointer' : 'default', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -258,10 +264,14 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
             >
               {!item.bag_id && <Package size={9} className="text-content-faint" />}
             </button>
-            {showBagPicker && (
+            {showBagPicker && bagBox && createPortal(
               <>
-              <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 49 }} onClick={() => { setShowBagPicker(false); setBagInlineCreate(false); setBagInlineName('') }} />
-              <div className="trek-menu-enter" style={{ ...POPOVER, position: 'absolute', right: 0, top: '100%', marginTop: 6, zIndex: 50, width: 210 }}>
+              <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 'var(--z-toast)' }} onClick={() => { setShowBagPicker(false); setBagInlineCreate(false); setBagInlineName('') }} />
+              <div className="trek-menu-enter" style={{
+                ...POPOVER, position: 'fixed', zIndex: 'var(--z-toast)', width: 210, overflowY: 'auto',
+                top: bagBox.top, bottom: bagBox.bottom, maxHeight: bagBox.maxHeight,
+                left: Math.max(8, bagBox.left + bagBox.width - 210),
+              }}>
                 <div style={POPOVER_CAPTION}>{t('packing.bags')}</div>
                 {item.bag_id && (
                   <PopoverItem icon={<span style={{ width: 10, height: 10, borderRadius: '50%', border: '1.5px dashed var(--text-faint)', display: 'inline-block' }} />} label={t('packing.noBag')}
@@ -300,7 +310,8 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCa
                   <PopoverItem icon={<Plus size={13} />} label={t('packing.addBag')} muted onClick={() => setBagInlineCreate(true)} />
                 )}
               </div>
-              </>
+              </>,
+              document.body,
             )}
           </div>
           </>
diff --git a/client/src/components/Packing/packingPopoverStyles.ts b/client/src/components/Packing/packingPopoverStyles.ts
index e1e614524..6fa4a3c9c 100644
--- a/client/src/components/Packing/packingPopoverStyles.ts
+++ b/client/src/components/Packing/packingPopoverStyles.ts
@@ -34,15 +34,17 @@ export const composerConfirm = (enabled: boolean): CSSProperties => ({
  * is mounted but not displayed (the bag sidebar below its breakpoint) has no
  * layout box, and must not close the visible copy's twin.
  */
-export function useDismissOnOutside(ref: RefObject<HTMLElement | null>, open: boolean, onClose: () => void) {
+export function useDismissOnOutside(ref: RefObject<HTMLElement | null>, open: boolean, onClose: () => void, panelRef?: RefObject<HTMLElement | null>) {
   useEffect(() => {
     if (!open) return
     const onDown = (e: MouseEvent) => {
       const el = ref.current
       if (!el || el.getClientRects().length === 0 || el.contains(e.target as Node)) return
+      // A panel portalled to the body counts as inside too.
+      if (panelRef?.current?.contains(e.target as Node)) return
       onClose()
     }
     document.addEventListener('mousedown', onDown)
     return () => document.removeEventListener('mousedown', onDown)
-  }, [ref, open, onClose])
+  }, [ref, open, onClose, panelRef])
 }
diff --git a/client/src/components/Planner/BookingCostsSection.test.tsx b/client/src/components/Planner/BookingCostsSection.test.tsx
index ba6018b4c..5782c5f01 100644
--- a/client/src/components/Planner/BookingCostsSection.test.tsx
+++ b/client/src/components/Planner/BookingCostsSection.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-COSTSEC-001 to FE-PLANNER-COSTSEC-019
+// FE-PLANNER-COSTSEC-001 to FE-PLANNER-COSTSEC-022
 import { render, screen, waitFor, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
@@ -254,3 +254,37 @@ describe('BookingCostsSection', () => {
     expect(screen.getByRole('button', { name: /Tram pass/ })).toHaveTextContent(money(9, 'EUR'));
   });
 });
+
+describe('BookingCostsSection with white buttons', () => {
+  it('FE-PLANNER-COSTSEC-020: whiteButtons draws the create button and the expense rows white', () => {
+    renderSection({ whiteButtons: true });
+    const create = screen.getByRole('button', { name: /Create expense/i });
+    expect(create).toHaveClass('bg-surface-card');
+    expect(create).not.toHaveClass('bg-surface-secondary');
+    expect(rowOf('Flight LH 400')).toHaveClass('bg-surface-card');
+  });
+
+  it('FE-PLANNER-COSTSEC-021: without it the block keeps its grey fill', () => {
+    renderSection();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toHaveClass('bg-surface-secondary');
+    expect(rowOf('Flight LH 400')).toHaveClass('bg-surface-secondary');
+  });
+
+  it('FE-PLANNER-COSTSEC-022: the row buttons turn white on a hairline too, and only with it', () => {
+    const handlers = { onCreate: vi.fn(), onEdit: vi.fn(), onRemove: vi.fn() };
+    const white = render(<BookingCostsSection reservationId={9} {...handlers} whiteButtons />);
+    const buttons = within(rowOf('Flight LH 400')).getAllByRole('button');
+    expect(buttons).toHaveLength(3);
+    for (const button of buttons) {
+      expect(button).toHaveClass('bg-surface-card', 'shadow-sm', 'ring-edge-faint');
+      expect(button).not.toHaveClass('border-edge');
+    }
+    white.unmount();
+
+    renderSection();
+    for (const button of within(rowOf('Flight LH 400')).getAllByRole('button')) {
+      expect(button).toHaveClass('border-edge');
+      expect(button).not.toHaveClass('shadow-sm');
+    }
+  });
+});
diff --git a/client/src/components/Planner/BookingCostsSection.tsx b/client/src/components/Planner/BookingCostsSection.tsx
index 3e6e64120..51c573db7 100644
--- a/client/src/components/Planner/BookingCostsSection.tsx
+++ b/client/src/components/Planner/BookingCostsSection.tsx
@@ -1,8 +1,11 @@
+import type { ReactNode } from 'react'
 import { Plus, Pencil, Trash2, Link2Off } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import CustomSelect from '../shared/CustomSelect'
+import { Tooltip } from '../shared/Tooltip'
+import { fs } from '../shared/DialogShell'
 import { formatMoney } from '../../utils/formatters'
 import { catMeta } from '../Budget/costsCategories'
 import { useExpenseLinks } from './useRecordLinks'
@@ -22,7 +25,7 @@ import type { BudgetItem } from '../../types'
  * Exactly one of reservationId / placeId is set — they are the two sides of the
  * same link, and the block behaves identically on both.
  */
-export function BookingCostsSection({ reservationId, placeId = null, hintKey = 'reservations.createExpenseHint', pendingExpense, onCreate, onEdit, onRemove }: {
+export function BookingCostsSection({ reservationId, placeId = null, hintKey = 'reservations.createExpenseHint', pendingExpense, onCreate, onEdit, onRemove, labelClassName, customTooltips = false, whiteButtons = false }: {
   reservationId: number | null
   /** Set instead of reservationId when the block sits in the place form (#1298). */
   placeId?: number | null
@@ -33,6 +36,15 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
   onCreate: () => void
   onEdit: (item: BudgetItem) => void
   onRemove: (item: BudgetItem) => void
+  /** Replaces the block's own label style, so a host form can match its other fields. */
+  labelClassName?: string
+  /** Shows the row buttons' hints in the shared Tooltip instead of the native title. */
+  customTooltips?: boolean
+  /**
+   * Draws the create button and the expense rows white on a hairline, the look
+   * of the dialog frame's secondary buttons, instead of the grey fill.
+   */
+  whiteButtons?: boolean
 }) {
   const { t, locale } = useTranslation()
   const tripCurrency = useTripStore(s => s.trip?.currency)
@@ -44,12 +56,24 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
   const ownCurrency = (currency: string | null | undefined) => currency || tripCurrency || base
   const { targetId, linked, unlinked, link, unlink } = useExpenseLinks(reservationId, placeId)
 
-  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
-  const rowCls = 'bg-surface-secondary border border-edge'
+  const labelCls = labelClassName ?? 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+  const rowCls = whiteButtons ? 'bg-surface-card border border-edge-faint' : 'bg-surface-secondary border border-edge'
   const rowStyle = { display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 } as const
-  const iconButton = 'text-content-muted border border-edge bg-surface-card transition-colors hover:bg-surface-tertiary hover:text-content'
-  const deleteButton = 'text-content-muted border border-edge bg-surface-card transition-colors hover:bg-danger-soft hover:text-danger'
+  // White, the row's buttons trade the border for the hairline ring and shadow of
+  // the create button under them; the border stays, transparent, to keep their size.
+  const iconButton = whiteButtons
+    ? 'border border-transparent bg-surface-card text-content-muted shadow-sm ring-1 ring-edge-faint transition-colors hover:bg-surface-hover hover:text-content'
+    : 'text-content-muted border border-edge bg-surface-card transition-colors hover:bg-surface-tertiary hover:text-content'
+  const deleteButton = whiteButtons
+    ? 'border border-transparent bg-surface-card text-content-muted shadow-sm ring-1 ring-edge-faint transition-colors hover:bg-danger-soft hover:text-danger'
+    : 'text-content-muted border border-edge bg-surface-card transition-colors hover:bg-danger-soft hover:text-danger'
   const iconButtonStyle = { display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' } as const
+  const rowButton = (label: string, className: string, onClick: () => void, icon: ReactNode) => {
+    const button = (
+      <button type="button" onClick={onClick} title={customTooltips ? undefined : label} aria-label={label} className={className} style={iconButtonStyle}>{icon}</button>
+    )
+    return customTooltips ? <Tooltip label={label}>{button}</Tooltip> : button
+  }
 
   // Import review (booking not saved yet): preview the parsed cost that will be linked on save.
   if (linked.length === 0 && pendingExpense && pendingExpense.total_price > 0) {
@@ -61,10 +85,10 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
         <div className={rowCls} style={rowStyle}>
           <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t(meta.labelKey)}</div>
-            <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t(hintKey)}</div>
+            <div className="text-content" style={{ ...fs(14, 'body'), fontWeight: 600 }}>{t(meta.labelKey)}</div>
+            <div className="text-content-faint" style={fs(12, 'body')}>{t(hintKey)}</div>
           </div>
-          <span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, flexShrink: 0 }}>{formatMoney(pendingExpense.total_price, ownCurrency(pendingExpense.currency), locale)}</span>
+          <span className="text-content" style={{ ...fs(14, 'body'), fontWeight: 700, flexShrink: 0 }}>{formatMoney(pendingExpense.total_price, ownCurrency(pendingExpense.currency), locale)}</span>
         </div>
       </div>
     )
@@ -83,13 +107,13 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
               <div key={item.id} className={rowCls} style={rowStyle}>
                 <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</div>
-                  <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t(meta.labelKey)}</div>
+                  <div className="text-content" style={{ ...fs(14, 'body'), fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</div>
+                  <div className="text-content-faint" style={fs(12, 'body')}>{t(meta.labelKey)}</div>
                 </div>
-                <span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, flexShrink: 0 }}>{formatMoney(item.total_price, ownCurrency(item.currency), locale)}</span>
-                <button type="button" onClick={() => onEdit(item)} title={t('common.edit')} aria-label={t('common.edit')} className={iconButton} style={iconButtonStyle}><Pencil size={13} /></button>
-                <button type="button" onClick={() => void unlink(item)} title={t('reservations.unlinkExpense')} aria-label={t('reservations.unlinkExpense')} className={iconButton} style={iconButtonStyle}><Link2Off size={13} /></button>
-                <button type="button" onClick={() => onRemove(item)} title={t('reservations.removeExpense')} aria-label={t('reservations.removeExpense')} className={deleteButton} style={iconButtonStyle}><Trash2 size={13} /></button>
+                <span className="text-content" style={{ ...fs(14, 'body'), fontWeight: 700, flexShrink: 0 }}>{formatMoney(item.total_price, ownCurrency(item.currency), locale)}</span>
+                {rowButton(t('common.edit'), iconButton, () => onEdit(item), <Pencil size={13} />)}
+                {rowButton(t('reservations.unlinkExpense'), iconButton, () => void unlink(item), <Link2Off size={13} />)}
+                {rowButton(t('reservations.removeExpense'), deleteButton, () => onRemove(item), <Trash2 size={13} />)}
               </div>
             )
           })}
@@ -98,9 +122,12 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
 
       <div style={{ display: 'grid', gridTemplateColumns: targetId ? '1fr 1fr' : '1fr', gap: 8 }}>
         <button type="button" onClick={onCreate}
-          className="bg-surface-secondary border border-edge text-content transition-colors hover:bg-surface-tertiary"
+          className={whiteButtons
+            // The transparent border keeps it the height of the bordered select beside it.
+            ? 'border border-transparent bg-surface-card text-content shadow-sm ring-1 ring-edge-faint transition-colors hover:bg-surface-hover'
+            : 'bg-surface-secondary border border-edge text-content transition-colors hover:bg-surface-tertiary'}
           // Sized like the select beside it, so the two sit as one row.
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '8px 13px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '8px 13px', borderRadius: 10, ...fs(13, 'body'), fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
           <Plus size={14} /> {t('reservations.createExpense')}
         </button>
         {/* Linking needs the record to exist, so it waits for the first save. */}
@@ -128,7 +155,7 @@ export function BookingCostsSection({ reservationId, placeId = null, hintKey = '
         )}
       </div>
       {linked.length === 0 && (
-        <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 6 }}>{t(hintKey)}</div>
+        <div className="text-content-faint" style={{ ...fs(11), marginTop: 6 }}>{t(hintKey)}</div>
       )}
     </div>
   )
diff --git a/client/src/components/Planner/DayAddFooter.tsx b/client/src/components/Planner/DayAddFooter.tsx
index 46a64ef1b..765bbf6cf 100644
--- a/client/src/components/Planner/DayAddFooter.tsx
+++ b/client/src/components/Planner/DayAddFooter.tsx
@@ -1,5 +1,6 @@
 import { useId, useState } from 'react'
 import { CalendarPlus, Plus } from 'lucide-react'
+import { DialogButton, FooterSpacer, fs } from '../shared/DialogShell'
 import { dayDate } from '../../utils/dayLabel'
 import type { DayAddControls } from '../../utils/dayAdd'
 
@@ -12,23 +13,23 @@ interface DayAddFooterProps {
   locale: string
 }
 
-/** One button size for the whole foot of the reorder dialog, the delete question's included. */
-export const FOOTER_BTN =
-  'inline-flex min-h-9 flex-shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg px-3 py-1.5 text-body font-medium transition-colors disabled:cursor-default disabled:opacity-40'
-/** Cancel, Close and the quiet add: one outline, one text colour, so none of them looks switched off beside another. */
-export const SECONDARY_BTN = `${FOOTER_BTN} border border-edge text-content-secondary hover:bg-surface-hover hover:text-content disabled:hover:bg-transparent`
-const CLOSE_BTN = `${SECONDARY_BTN} ml-auto`
-/** The add that matters most: drawn in the accent, not filled with it, so it leads without weighing on the row. */
-const MAIN_BTN = `${FOOTER_BTN} border border-accent-on bg-transparent font-semibold text-accent-on hover:bg-accent-subtle disabled:hover:bg-transparent`
+/**
+ * The bar of a dialog with a line over its buttons. DialogFooter is one row;
+ * this is the same bar (border, inset) holding the line and the row under it.
+ */
+const FOOTER_COLUMN = 'flex flex-none flex-col gap-2.5 border-t border-edge-faint px-6 py-3.5'
+const HINT = 'm-0 text-content-muted'
+/** Should a language run long, the row wraps between buttons, never inside one. */
+const ROW = 'flex flex-wrap items-center gap-2'
 
 /**
  * The foot of the reorder dialog: close it, or add a day.
  *
- * On a trip with dates there are two ways to add one, in one row with Close. The
- * next calendar day, named on its button, extends the trip by one; a day without
- * a date goes to the end and leaves the trip dates alone. The line above them
- * says what the button in view does, and switches while the pointer or the focus
- * rests on the other one. When no day can be added it says why instead.
+ * On a trip with dates there are two ways to add one. The next calendar day,
+ * named on its button, extends the trip by one; a day without a date goes to
+ * the end and leaves the trip dates alone. The line above them says what the
+ * button in view does, and switches while the pointer or the focus rests on
+ * the other one. When no day can be added it says why instead.
  */
 export function DayAddFooter({ dayAdd, onAddDay, onClose, t, locale }: DayAddFooterProps) {
   const [aboutUndated, setAboutUndated] = useState(false)
@@ -37,67 +38,57 @@ export function DayAddFooter({ dayAdd, onAddDay, onClose, t, locale }: DayAddFoo
   const blocked = dayAdd?.blocked ?? null
   const addOff = busy || !!blocked
 
-  const closeButton = (
-    <button type="button" onClick={onClose} className={CLOSE_BTN}>
-      {t('common.close')}
-    </button>
-  )
+  const closeButton = <DialogButton onClick={onClose}>{t('common.close')}</DialogButton>
 
   if (!dayAdd?.nextDate) {
     return (
-      <div className="flex flex-col gap-2.5">
-        {blocked && <p className="m-0 text-caption text-content-muted">{blocked}</p>}
-        <div className="flex flex-wrap items-center gap-2">
-          <button type="button" onClick={onAddDay} disabled={addOff} className={MAIN_BTN}>
-            <Plus size={15} strokeWidth={2} aria-hidden="true" />
-            {t('dayplan.addDay')}
-          </button>
+      <footer className={FOOTER_COLUMN}>
+        {blocked && <p className={HINT} style={fs(12)}>{blocked}</p>}
+        <div className={ROW}>
+          <FooterSpacer />
           {closeButton}
+          <DialogButton variant="primary" onClick={onAddDay} disabled={addOff} icon={<Plus size={14} strokeWidth={2} aria-hidden="true" />}>
+            {t('dayplan.addDay')}
+          </DialogButton>
         </div>
-      </div>
+      </footer>
     )
   }
 
   const date = dayDate(dayAdd.nextDate, locale) ?? dayAdd.nextDate
   const hint = blocked
     ?? (aboutUndated ? t('dayplan.addUndatedDayHint') : dayAdd.datedBlocked ?? t('dayplan.addDatedDayHint', { date }))
-  const pointAtUndated = {
-    onMouseEnter: () => setAboutUndated(true),
-    onMouseLeave: () => setAboutUndated(false),
-    onFocus: () => setAboutUndated(true),
-    onBlur: () => setAboutUndated(false),
-  }
 
   return (
-    <div className="flex flex-col gap-2.5">
-      <p id={hintId} aria-live="polite" className="m-0 text-caption text-content-muted">
+    <footer className={FOOTER_COLUMN}>
+      <p id={hintId} aria-live="polite" className={HINT} style={fs(12)}>
         {hint}
       </p>
-      {/* Should a language run long, the row wraps between buttons, never inside one. */}
-      <div className="flex flex-wrap items-center gap-2">
-        <button
-          type="button"
-          onClick={dayAdd.onAddDated}
-          disabled={addOff || !!dayAdd.datedBlocked}
-          aria-describedby={hintId}
-          className={MAIN_BTN}
-        >
-          <CalendarPlus size={15} strokeWidth={2} aria-hidden="true" />
-          {t('dayplan.addDatedDay', { date })}
-        </button>
-        <button
-          type="button"
+      <div className={ROW}>
+        <DialogButton
           onClick={onAddDay}
           disabled={addOff}
           aria-describedby={hintId}
-          className={SECONDARY_BTN}
-          {...pointAtUndated}
+          icon={<Plus size={14} strokeWidth={2} aria-hidden="true" />}
+          onMouseEnter={() => setAboutUndated(true)}
+          onMouseLeave={() => setAboutUndated(false)}
+          onFocus={() => setAboutUndated(true)}
+          onBlur={() => setAboutUndated(false)}
         >
-          <Plus size={15} strokeWidth={2} aria-hidden="true" />
           {t('dayplan.addUndatedDay')}
-        </button>
+        </DialogButton>
+        <FooterSpacer />
         {closeButton}
+        <DialogButton
+          variant="primary"
+          onClick={dayAdd.onAddDated}
+          disabled={addOff || !!dayAdd.datedBlocked}
+          aria-describedby={hintId}
+          icon={<CalendarPlus size={14} strokeWidth={2} aria-hidden="true" />}
+        >
+          {t('dayplan.addDatedDay', { date })}
+        </DialogButton>
       </div>
-    </div>
+    </footer>
   )
 }
diff --git a/client/src/components/Planner/DayDetailPanel.test.tsx b/client/src/components/Planner/DayDetailPanel.test.tsx
index dfa26ad6e..17aa14c0b 100644
--- a/client/src/components/Planner/DayDetailPanel.test.tsx
+++ b/client/src/components/Planner/DayDetailPanel.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-DAYDETAIL-001 to FE-PLANNER-DAYDETAIL-085
+// FE-PLANNER-DAYDETAIL-001 to FE-PLANNER-DAYDETAIL-098
 import React from 'react';
 import { fireEvent, render, screen, waitFor, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
@@ -44,6 +44,12 @@ beforeEach(() => {
   });
 });
 
+/** The stay picker filters by category through a pill that opens its list; this picks one entry of it. */
+async function pickStayCategory(user: ReturnType<typeof userEvent.setup> | typeof userEvent, name: string) {
+  await user.click(screen.getByRole('button', { name: /^Category:/ }))
+  await user.click(within(screen.getByRole('group', { name: 'Category' })).getByRole('button', { name }))
+}
+
 describe('DayDetailPanel', () => {
 
   // ── Rendering ────────────────────────────────────────────────────────────────
@@ -123,12 +129,12 @@ describe('DayDetailPanel', () => {
 
   it('FE-PLANNER-DAYDETAIL-007: close button calls onClose', async () => {
     const onClose = vi.fn();
-    render(<DayDetailPanel {...defaultProps} onClose={onClose} />);
-    // The header X button — the one outside the hotel picker
-    const closeButtons = screen.getAllByRole('button');
-    // Second button is the header X close (first is collapse toggle)
-    await userEvent.click(closeButtons[1]);
+    const onToggleCollapse = vi.fn();
+    render(<DayDetailPanel {...defaultProps} onClose={onClose} onToggleCollapse={onToggleCollapse} />);
+    // The round X on the head band, named by its tooltip; it does not fold the card on the way.
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }));
     expect(onClose).toHaveBeenCalled();
+    expect(onToggleCollapse).not.toHaveBeenCalled();
   });
 
   // ── Weather ──────────────────────────────────────────────────────────────────
@@ -137,7 +143,7 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} lat={null} lng={null} />);
     await waitFor(() => expect(screen.queryByText(/No weather/i)).toBeNull());
     // No loading spinner either
-    expect(document.querySelector('[style*="border-top-color"]')).toBeNull();
+    expect(screen.queryByRole('status')).toBeNull();
   });
 
   it('FE-PLANNER-DAYDETAIL-009: weather loading state shown briefly', async () => {
@@ -145,11 +151,9 @@ describe('DayDetailPanel', () => {
       http.get('/api/weather/detailed', () => new Promise(() => {})), // never resolves
     );
     render(<DayDetailPanel {...defaultProps} lat={48.8566} lng={2.3522} />);
-    // Spinner div has border + borderTopColor
-    await waitFor(() => {
-      const spinner = document.querySelector('[style*="border-radius: 50%"]');
-      expect(spinner).toBeInTheDocument();
-    });
+    // The spinner announces itself as a loading status
+    const spinner = await screen.findByRole('status', { name: 'Loading...' });
+    expect(spinner.querySelector('.animate-spin')).not.toBeNull();
   });
 
   it('FE-PLANNER-DAYDETAIL-010: weather data renders temperature in Celsius', async () => {
@@ -360,13 +364,13 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} />);
     await screen.findByText('Grand Hotel');
     // The pencil beside the stay opens the picker in edit mode.
-    await userEvent.click(document.querySelector('.lucide-pencil')!.closest('button')!);
-    const picker = await waitFor(() => document.body.querySelector('[style*="z-index: 99999"]') as HTMLElement);
+    await userEvent.click(screen.getByRole('button', { name: 'Edit accommodation' }));
+    const picker = await screen.findByRole('dialog');
     await userEvent.click(within(picker).getByText('Save'));
 
     await waitFor(() => expect(addToast).toHaveBeenCalledWith('Stay overlaps', 'error', undefined));
     // The picker stays put so the entered values are not lost.
-    expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
   });
 
   it('FE-PLANNER-DAYDETAIL-022: accommodation edit/remove buttons hidden when canEditDays=false', async () => {
@@ -407,7 +411,7 @@ describe('DayDetailPanel', () => {
     await userEvent.click(addButton);
     // Hotel picker portal renders into document.body
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
   });
 
@@ -439,7 +443,7 @@ describe('DayDetailPanel', () => {
     // Find the element containing the confirmation number
     await waitFor(() => {
       const el = screen.getByText(/#SECRET/);
-      expect(el).toHaveStyle({ filter: 'blur(4px)' });
+      expect(isBlurred(el)).toBe(true);
     });
   });
 
@@ -499,13 +503,13 @@ describe('DayDetailPanel', () => {
     await userEvent.click(addButton);
     // Picker opened
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
     // Click cancel button inside picker
     const cancelButton = screen.getByText(/Cancel/i);
     await userEvent.click(cancelButton);
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull();
+      expect(screen.queryByRole('dialog')).toBeNull();
     });
   });
 
@@ -558,7 +562,7 @@ describe('DayDetailPanel', () => {
     const addButton = await screen.findByText(/Add accommodation/i);
     await userEvent.click(addButton);
     await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      const portal = screen.queryByRole('dialog');
       expect(portal).toBeInTheDocument();
     });
   });
@@ -577,14 +581,11 @@ describe('DayDetailPanel', () => {
     seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     render(<DayDetailPanel {...defaultProps} />);
     await screen.findByText('Edit Hotel');
-    // All buttons: header collapse (0), header close (1), pencil (2), X/remove (3)
-    const allButtons = screen.getAllByRole('button');
-    // Pencil is third button (index 2)
-    const pencilButton = allButtons[2];
-    await userEvent.click(pencilButton);
+    // The pencil on the stay's card, named by its tooltip
+    await userEvent.click(screen.getByRole('button', { name: 'Edit accommodation' }));
     // Edit picker should open with "Edit accommodation" title
     await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      const portal = screen.queryByRole('dialog');
       expect(portal?.textContent).toMatch(/Edit accommodation/i);
     });
   });
@@ -596,7 +597,7 @@ describe('DayDetailPanel', () => {
     const addButton = await screen.findByText(/Add accommodation/i);
     await userEvent.click(addButton);
     await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      const portal = screen.queryByRole('dialog');
       expect(portal?.textContent).toMatch(/Day in Paris|Day 2|Day 3/i);
     });
   });
@@ -607,7 +608,7 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} days={[day, day2, day3]} />);
     await userEvent.click(await screen.findByText(/Add accommodation/i));
     await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      const portal = screen.queryByRole('dialog');
       // Closed selects render only their chosen label: check-in on the opened
       // day, check-out on the following one — nobody stays a few hours.
       expect(portal?.textContent).toContain('Day in Paris');
@@ -620,8 +621,9 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} days={[day]} />);
     await userEvent.click(await screen.findByText(/Add accommodation/i));
     await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
-      expect(portal?.textContent?.match(/Day in Paris/g)).toHaveLength(2);
+      const portal = screen.queryByRole('dialog');
+      // Both day selects, and the range pill in the head band.
+      expect(portal?.textContent?.match(/Day in Paris/g)).toHaveLength(3);
     });
   });
 
@@ -711,10 +713,8 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} places={[place]} categories={[cat]} />);
     const addButton = await screen.findByText(/Add accommodation/i);
     await userEvent.click(addButton);
-    await waitFor(() => {
-      const portal = document.body.querySelector('[style*="z-index: 99999"]');
-      expect(portal?.textContent).toMatch(/Hotels/);
-    });
+    await userEvent.click(await screen.findByRole('button', { name: /^Category:/ }));
+    expect(within(screen.getByRole('group', { name: 'Category' })).getByRole('button', { name: 'Hotels' })).toBeInTheDocument();
   });
 
   it('FE-PLANNER-DAYDETAIL-039: add another accommodation button visible when accommodations exist', async () => {
@@ -762,7 +762,7 @@ describe('DayDetailPanel', () => {
     await userEvent.click(saveButton);
     // Picker should close after save
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull();
+      expect(screen.queryByRole('dialog')).toBeNull();
     });
   });
 
@@ -785,10 +785,8 @@ describe('DayDetailPanel', () => {
     seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     render(<DayDetailPanel {...defaultProps} />);
     await screen.findByText('Hotel To Remove');
-    // Buttons: collapse (0), close header (1), pencil (2), X/remove (3)
-    const allButtons = screen.getAllByRole('button');
-    const removeButton = allButtons[3];
-    await userEvent.click(removeButton);
+    // The X on the stay's card, named by its tooltip
+    await userEvent.click(screen.getByRole('button', { name: 'Remove' }));
     await waitFor(() => {
       expect(deleteWasCalled).toBe(true);
     });
@@ -875,12 +873,11 @@ describe('DayDetailPanel', () => {
     const place = buildPlace({ id: 5, name: 'Edit Me Hotel' });
     render(<DayDetailPanel {...defaultProps} places={[place]} />);
     await screen.findByText('Edit Me Hotel');
-    // Click the pencil/edit button (index 2, after collapse and close buttons)
-    const allButtons = screen.getAllByRole('button');
-    await userEvent.click(allButtons[2]);
+    // Click the pencil on the stay's card
+    await userEvent.click(screen.getByRole('button', { name: 'Edit accommodation' }));
     // Picker opens in edit mode
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument();
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
     });
     // Click Save in the edit picker
     const saveButton = screen.getByText(/Save/i);
@@ -914,26 +911,28 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} reservations={[linkedReservation]} />);
     await screen.findByText('Blurred Hotel');
     const codeEl = await screen.findByText(/#REVEAL123/);
-    // Initially blurred
-    expect(codeEl).toHaveStyle({ filter: 'blur(4px)' });
-    // Fire mouse events to cover the event handler code paths
+    // Initially blurred; hovering lifts it through a class, a click reveals it for good
+    expect(isBlurred(codeEl)).toBe(true);
+    expect(codeEl.className).toContain('hover:blur-none');
     await userEvent.hover(codeEl);
     await userEvent.unhover(codeEl);
     await userEvent.click(codeEl);
+    expect(isBlurred(codeEl)).toBe(false);
   });
 
   // ── Collapse behavior ─────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-DAYDETAIL-048: collapse button has title "Collapse" when expanded', () => {
+  it('FE-PLANNER-DAYDETAIL-048: collapse button is named "Collapse" when expanded', () => {
     render(<DayDetailPanel {...defaultProps} collapsed={false} />);
-    const collapseBtn = screen.getByTitle('Collapse');
-    expect(collapseBtn).toBeInTheDocument();
+    const collapseBtn = screen.getByRole('button', { name: 'Collapse' });
+    expect(collapseBtn).toHaveAttribute('aria-expanded', 'true');
+    expect(collapseBtn.getAttribute('title')).toBeNull();
   });
 
-  it('FE-PLANNER-DAYDETAIL-049: collapse button has title "Expand" when collapsed', () => {
+  it('FE-PLANNER-DAYDETAIL-049: collapse button is named "Expand" when collapsed', () => {
     render(<DayDetailPanel {...defaultProps} collapsed={true} />);
-    const expandBtn = screen.getByTitle('Expand');
-    expect(expandBtn).toBeInTheDocument();
+    const expandBtn = screen.getByRole('button', { name: 'Expand' });
+    expect(expandBtn).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('FE-PLANNER-DAYDETAIL-050: content area is hidden when collapsed=true', async () => {
@@ -949,25 +948,29 @@ describe('DayDetailPanel', () => {
     );
     render(<DayDetailPanel {...defaultProps} collapsed={true} />);
     await waitFor(() => {
-      const content = document.querySelector('[style*="overflow-y: auto"]');
+      const content = screen.getByTestId('day-detail-scroll');
       expect(content).toHaveStyle({ display: 'none' });
     });
+    // Still mounted, so the stay loaded while folded is there on unfolding.
+    expect(await screen.findByText('Visible Hotel')).toBeInTheDocument();
   });
 
   it('FE-PLANNER-DAYDETAIL-051: content area is visible when collapsed=false', async () => {
     render(<DayDetailPanel {...defaultProps} collapsed={false} />);
     await waitFor(() => {
-      const content = document.querySelector('[style*="overflow-y: auto"]');
-      expect(content).toHaveStyle({ display: 'block' });
+      const content = screen.getByTestId('day-detail-scroll');
+      expect(content).not.toHaveStyle({ display: 'none' });
+      expect(content.className).toContain('overflow-y-auto');
     });
   });
 
   it('FE-PLANNER-DAYDETAIL-052: clicking the collapse button calls onToggleCollapse', async () => {
     const onToggleCollapse = vi.fn();
     render(<DayDetailPanel {...defaultProps} collapsed={false} onToggleCollapse={onToggleCollapse} />);
-    const collapseBtn = screen.getByTitle('Collapse');
+    const collapseBtn = screen.getByRole('button', { name: 'Collapse' });
     await userEvent.click(collapseBtn);
-    expect(onToggleCollapse).toHaveBeenCalled();
+    // Once: the button keeps its click from reaching the head band as well.
+    expect(onToggleCollapse).toHaveBeenCalledTimes(1);
   });
 
   it('FE-PLANNER-DAYDETAIL-053: clicking the header row calls onToggleCollapse', async () => {
@@ -1198,9 +1201,8 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} day={days[0]} days={days} />);
     await screen.findByText('Span Hotel');
 
-    // Pencil = 3rd button (index 2): collapse, close, pencil, remove
-    const allButtons = screen.getAllByRole('button');
-    await userEvent.click(allButtons[2]);
+    // The pencil on the stay's card
+    await userEvent.click(screen.getByRole('button', { name: 'Edit accommodation' }));
 
     // Extend end picker to Day 16 (id=7)
     await userEvent.click(getDayPickerTriggers()[1]);
@@ -1291,16 +1293,16 @@ describe('DayDetailPanel', () => {
 
   // ── Header buttons ──────────────────────────────────────────────────────────
 
-  it('FE-PLANNER-DAYDETAIL-069: the collapse and close buttons reset their hover background on leave', async () => {
+  it('FE-PLANNER-DAYDETAIL-069: the collapse and close buttons show their names as tooltips', async () => {
     render(<DayDetailPanel {...defaultProps} />);
-    const buttons = screen.getAllByRole('button');
-    const collapse = buttons.find(b => b.getAttribute('title') === 'Collapse')!;
-    const close = buttons[buttons.indexOf(collapse) + 1];
-    for (const btn of [collapse, close]) {
-      act(() => { btn.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-      expect(btn.style.background).toBe('var(--bg-hover)');
-      act(() => { btn.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-      expect(btn.style.background).toBe('var(--bg-secondary)');
+    for (const name of ['Collapse', 'Close']) {
+      const btn = screen.getByRole('button', { name });
+      // Hover looks are token classes, not inline styles swapped by handlers.
+      expect(btn.getAttribute('style')).toBeNull();
+      fireEvent.mouseEnter(btn);
+      expect(await screen.findByRole('tooltip')).toHaveTextContent(name);
+      fireEvent.mouseLeave(btn);
+      await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
     }
   });
 
@@ -1364,7 +1366,7 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} />);
     await screen.findByText('First Hotel');
     await userEvent.click(await screen.findByText(/Add accommodation/i));
-    await waitFor(() => expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
   });
 
   // ── Hotel picker ────────────────────────────────────────────────────────────
@@ -1373,16 +1375,22 @@ describe('DayDetailPanel', () => {
     render(<DayDetailPanel {...defaultProps} />);
     const open = async () => {
       await userEvent.click(await screen.findByText(/Add accommodation/i));
-      return await waitFor(() => document.body.querySelector('[style*="z-index: 99999"]') as HTMLElement);
+      return await screen.findByRole('dialog');
     };
     let overlay = await open();
-    // The X sits in the picker header, right after the title.
-    await userEvent.click(within(overlay).getByText(/Add accommodation/i).parentElement!.querySelector('button')!);
-    await waitFor(() => expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull());
+    // The X sits in the picker's head band.
+    await userEvent.click(within(overlay).getByRole('button', { name: 'Close' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
 
     overlay = await open();
-    await userEvent.click(overlay);
-    await waitFor(() => expect(document.body.querySelector('[style*="z-index: 99999"]')).toBeNull());
+    // The dimmed backdrop around the dialog closes it too.
+    await userEvent.click(overlay.parentElement as HTMLElement);
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
+
+    // And so does Escape.
+    await open();
+    await userEvent.keyboard('{Escape}');
+    await waitFor(() => expect(screen.queryByRole('dialog')).toBeNull());
   });
 
   it('FE-PLANNER-DAYDETAIL-075: check-in, check-in-until, check-out and confirmation feed the saved accommodation', async () => {
@@ -1401,7 +1409,7 @@ describe('DayDetailPanel', () => {
     await userEvent.click(await screen.findByText(/Add accommodation/i));
     await userEvent.click(await screen.findByRole('button', { name: /Pension Anna/i }));
 
-    const overlay = document.body.querySelector('[style*="z-index: 99999"]') as HTMLElement;
+    const overlay = screen.getByRole('dialog');
     const timeInputs = within(overlay).getAllByPlaceholderText(/^(14:00|22:00|11:00)$/);
     await userEvent.type(timeInputs[0], '15:00');
     await userEvent.type(timeInputs[1], '20:00');
@@ -1413,7 +1421,7 @@ describe('DayDetailPanel', () => {
     expect(body).toMatchObject({ place_id: 70, check_in: '15:00', check_in_end: '20:00', check_out: '10:00', confirmation: 'ZZ-9' });
   });
 
-  it('FE-PLANNER-DAYDETAIL-076: the category filter narrows the picker list and "All days" clears it', async () => {
+  it('FE-PLANNER-DAYDETAIL-076: the category filter narrows the picker list and "All Categories" clears it', async () => {
     const categories = [
       { id: 1, name: 'Hotels', color: '#8b5cf6' },
       { id: 2, name: 'Sights', color: '#ef4444' },
@@ -1424,30 +1432,31 @@ describe('DayDetailPanel', () => {
     ];
     render(<DayDetailPanel {...defaultProps} places={places} categories={categories} />);
     await userEvent.click(await screen.findByText(/Add accommodation/i));
-    const overlay = document.body.querySelector('[style*="z-index: 99999"]') as HTMLElement;
+    const overlay = screen.getByRole('dialog');
 
-    await userEvent.click(within(overlay).getByRole('button', { name: 'Hotels' }));
+    await pickStayCategory(userEvent, 'Hotels');
     expect(within(overlay).getByText('Hotel Adlon')).toBeInTheDocument();
     expect(within(overlay).queryByText('Brandenburg Gate')).not.toBeInTheDocument();
 
-    // A category with no places falls back to the empty hint.
-    await userEvent.click(within(overlay).getByRole('button', { name: 'Sights' }));
+    await pickStayCategory(userEvent, 'Sights');
     expect(within(overlay).queryByText('Hotel Adlon')).not.toBeInTheDocument();
 
-    await userEvent.click(within(overlay).getAllByRole('button', { name: /^All$/ })[1]);
+    await pickStayCategory(userEvent, 'All Categories');
     expect(within(overlay).getByText('Hotel Adlon')).toBeInTheDocument();
     expect(within(overlay).getByText('Brandenburg Gate')).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-DAYDETAIL-077: hovering an unselected place row highlights it and clears again', async () => {
+  it('FE-PLANNER-DAYDETAIL-077: an unselected place row highlights on hover only, the picked one stays marked', async () => {
     const places = [buildPlace({ id: 90, name: 'Hostel One' })];
     render(<DayDetailPanel {...defaultProps} places={places} />);
     await userEvent.click(await screen.findByText(/Add accommodation/i));
     const row = (await screen.findByText('Hostel One')).closest('button') as HTMLButtonElement;
-    act(() => { row.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(row.style.background).toBe('var(--bg-hover)');
-    act(() => { row.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(row.style.background).toBe('none');
+    expect(row).toHaveAttribute('aria-pressed', 'false');
+    expect(row.className).toContain('hover:bg-surface-card');
+    expect(row.className).not.toContain('ring-accent');
+    await userEvent.click(row);
+    expect(row).toHaveAttribute('aria-pressed', 'true');
+    expect(row.className).toContain('ring-accent');
   });
 
   it('FE-PLANNER-DAYDETAIL-078: the picker reports when the trip has no places to pick from', async () => {
@@ -1506,7 +1515,7 @@ describe('DayDetailPanel remaining branches', () => {
       />,
     );
 
-    const row = (await screen.findByText('Open Ticket')).closest('div[style*="border-radius: 8px"]') as HTMLElement;
+    const row = (await screen.findByText('Open Ticket')).closest('li') as HTMLElement;
     expect(row.textContent).toBe('Open Ticket');
   });
 
@@ -1524,7 +1533,7 @@ describe('DayDetailPanel remaining branches', () => {
       />,
     );
 
-    const row = (await screen.findByText('Deep Dive')).closest('div[style*="border-radius: 8px"]') as HTMLElement;
+    const row = (await screen.findByText('Deep Dive')).closest('li') as HTMLElement;
     expect(row.querySelector('svg')?.getAttribute('class')).toMatch(/file-text/);
     expect(row).toHaveTextContent('Opera House');
     // hotels are shown in the accommodation block, other days are not shown at all
@@ -1558,17 +1567,17 @@ describe('DayDetailPanel remaining branches', () => {
     );
 
     const code = await screen.findByText('#XY99');
-    expect(code.style.filter).toBe('blur(4px)');
-
-    fireEvent.mouseEnter(code);
-    expect(code.style.filter).toBe('none');
-    fireEvent.mouseLeave(code);
-    expect(code.style.filter).toBe('blur(4px)');
+    expect(isBlurred(code)).toBe(true);
+    // The pointer lifts the blur through a hover class, as in the bookings list.
+    expect(code.className).toContain('hover:blur-none');
 
     fireEvent.click(code);
-    expect(code.style.filter).toBe('none');
+    expect(isBlurred(code)).toBe(false);
+    expect(code).toHaveAttribute('aria-pressed', 'true');
     fireEvent.click(code);
-    expect(code.style.filter).toBe('blur(4px)');
+    expect(isBlurred(code)).toBe(true);
+    // Enter and Space reach it too: it is a real button.
+    expect(code.tagName).toBe('BUTTON');
   });
 
   it('FE-W5DDP-006: saving the edit picker updates the accommodation and reloads the list', async () => {
@@ -1616,12 +1625,11 @@ describe('DayDetailPanel remaining branches', () => {
     await user.click(await screen.findByText(/Add accommodation/i));
 
     expect(screen.getByRole('button', { name: /Chez Nous/ })).toBeInTheDocument();
-    await user.click(screen.getByRole('button', { name: 'Museums' }));
+    await pickStayCategory(user, 'Museums');
     expect(screen.queryByRole('button', { name: /Chez Nous/ })).not.toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Maison Blanche/ })).toBeInTheDocument();
 
-    const filterRow = screen.getByRole('button', { name: 'Museums' }).parentElement as HTMLElement;
-    await user.click(within(filterRow).getByRole('button', { name: /^All$/ }));
+    await pickStayCategory(user, 'All Categories');
     expect(screen.getByRole('button', { name: /Chez Nous/ })).toBeInTheDocument();
   });
 
@@ -1635,7 +1643,7 @@ describe('DayDetailPanel remaining branches', () => {
     await user.click(await screen.findByText(/Add accommodation/i));
 
     // open the "from" select — the option rows carry the badges
-    const range = screen.getByText('Apply to days').parentElement as HTMLElement;
+    const range = screen.getByText('Apply to days').closest('section') as HTMLElement;
     await user.click(within(range).getAllByRole('button')[0]);
 
     expect(screen.getAllByText('Jun 15').length).toBeGreaterThanOrEqual(1);
@@ -1698,13 +1706,13 @@ describe('DayDetailPanel remaining branches', () => {
     const onToggleCollapse = vi.fn();
     const { rerender } = render(<DayDetailPanel {...defaultProps} collapsed={false} onToggleCollapse={onToggleCollapse} />);
 
-    await user.click(screen.getByTitle('Collapse'));
+    await user.click(screen.getByRole('button', { name: 'Collapse' }));
     expect(onToggleCollapse).toHaveBeenCalled();
 
     rerender(<DayDetailPanel {...defaultProps} collapsed onToggleCollapse={onToggleCollapse} />);
     const header = screen.getByText('Day in Paris').closest('div') as HTMLElement;
     expect(header).toHaveTextContent(/Sunday, June 15/);
-    expect(screen.getByTitle('Expand')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument();
   });
 });
 
@@ -1728,13 +1736,14 @@ describe('DayDetailPanel remaining branches, part two', () => {
     );
 
     const code = await screen.findByText('#XY99');
-    expect(code.style.filter).toBe('none');
-    expect(code.style.cursor).toBe('default');
+    expect(isBlurred(code)).toBe(false);
+    // With nothing to reveal the code is plain text, not a control.
+    expect(code.closest('button')).toBeNull();
 
     fireEvent.mouseEnter(code);
     fireEvent.click(code);
     fireEvent.mouseLeave(code);
-    expect(code.style.filter).toBe('none');
+    expect(isBlurred(code)).toBe(false);
     expect(screen.getByText('Pending')).toBeInTheDocument();
   });
 
@@ -1772,7 +1781,7 @@ describe('DayDetailPanel remaining branches, part two', () => {
     render(<DayDetailPanel {...defaultProps} day={d1} days={[d1, d2]} places={[buildPlace({ id: 10, name: 'Maison Blanche' })]} />);
     await user.click(await screen.findByText(/Add accommodation/i));
 
-    const range = screen.getByText('Apply to days').parentElement as HTMLElement;
+    const range = screen.getByText('Apply to days').closest('section') as HTMLElement;
     const [fromSelect, toSelect] = within(range).getAllByRole('button');
 
     await user.click(fromSelect);
@@ -1802,15 +1811,17 @@ describe('DayDetailPanel remaining branches, part two', () => {
 
     const picked = screen.getByRole('button', { name: /Maison Blanche/ });
     await user.click(picked);
-    expect(picked.style.background).toBe('var(--bg-hover)');
+    expect(picked).toHaveAttribute('aria-pressed', 'true');
 
     fireEvent.mouseEnter(picked);
     fireEvent.mouseLeave(picked);
-    expect(picked.style.background).toBe('var(--bg-hover)');
+    expect(picked).toHaveAttribute('aria-pressed', 'true');
+    expect(picked.className).toContain('ring-accent');
+    expect(screen.getByRole('button', { name: /Chez Nous/ })).toHaveAttribute('aria-pressed', 'false');
     expect(document.querySelector('img[src="/uploads/places/mb.jpg"]')).not.toBeNull();
   });
 
-  it('FE-W5DDP-019: a category without a colour falls back to the default filter highlight', async () => {
+  it('FE-W5DDP-019: a category without a colour gets a neutral dot and can still be picked', async () => {
     const user = userEvent.setup();
     render(
       <DayDetailPanel
@@ -1821,9 +1832,13 @@ describe('DayDetailPanel remaining branches, part two', () => {
     );
     await user.click(await screen.findByText(/Add accommodation/i));
 
-    const chip = screen.getByRole('button', { name: 'Uncoloured' });
-    await user.click(chip);
-    expect(chip.style.background).toBe('var(--text-primary)');
+    await user.click(screen.getByRole('button', { name: /^Category:/ }));
+    const option = within(screen.getByRole('group', { name: 'Category' })).getByRole('button', { name: 'Uncoloured' });
+    // Its dot falls back to a neutral token instead of a colour it does not have.
+    expect((option.querySelector('span span') as HTMLElement).style.background).toBe('var(--text-faint)');
+    await user.click(option);
+    // The pill now names the category in force.
+    expect(screen.getByRole('button', { name: /^Category:/ })).toHaveTextContent('Uncoloured');
   });
 
   it('FE-W5DDP-022: a plugin column for this day is appended above the reservations', async () => {
@@ -1929,10 +1944,10 @@ describe('DayDetailPanel blur booking codes (#2457)', () => {
   );
   const openHotelEditor = async () => {
     await screen.findByText('Code Hotel');
-    // header collapse (0), header close (1), pencil (2), remove (3), as in DAYDETAIL-032
-    await userEvent.click(screen.getAllByRole('button')[2]);
+    // the pencil on the stay's card, as in DAYDETAIL-032
+    await userEvent.click(screen.getByRole('button', { name: 'Edit accommodation' }));
     await waitFor(() => {
-      expect(document.body.querySelector('[style*="z-index: 99999"]')?.textContent).toMatch(/Edit accommodation/i);
+      expect(screen.getByRole('dialog').textContent).toMatch(/Edit accommodation/i);
     });
   };
 
@@ -1983,3 +1998,227 @@ describe('DayDetailPanel blur booking codes (#2457)', () => {
     expect(body!.confirmation).toBe('HOTEL-SECRET');
   });
 });
+
+// ── Redesign fixes: the right stay is removed, failed writes speak up ──────────
+
+describe('DayDetailPanel accommodation writes', () => {
+  const stay = (id: number, name: string, overrides: Record<string, unknown> = {}) => ({
+    id, place_id: 100 + id, place_name: name, place_address: 'Paris',
+    start_day_id: 1, end_day_id: 1, check_in: null, check_out: null, confirmation: null,
+    ...overrides,
+  });
+
+  it('FE-PLANNER-DAYDETAIL-086: with two hotels on the day, the X of the second deletes the second', async () => {
+    // The X used to select its stay and then call a remove that still held the
+    // stay selected before, so on a day with two hotels it deleted the first.
+    const deleted: string[] = [];
+    server.use(
+      http.get('/api/trips/1/accommodations', () => HttpResponse.json({ accommodations: [stay(1, 'First Hotel'), stay(2, 'Second Hotel')] })),
+      http.delete('/api/trips/1/accommodations/:id', ({ params }) => {
+        deleted.push(String(params.id));
+        return HttpResponse.json({ success: true });
+      }),
+    );
+    const onAccommodationChange = vi.fn();
+    render(<DayDetailPanel {...defaultProps} onAccommodationChange={onAccommodationChange} />);
+    const second = (await screen.findByText('Second Hotel')).closest('article') as HTMLElement;
+    await userEvent.click(within(second).getByRole('button', { name: 'Remove' }));
+
+    await waitFor(() => expect(deleted).toEqual(['2']));
+    await waitFor(() => expect(screen.queryByText('Second Hotel')).not.toBeInTheDocument());
+    expect(screen.getByText('First Hotel')).toBeInTheDocument();
+    expect(onAccommodationChange).toHaveBeenCalledTimes(1);
+
+    // The first one is still the one its own X and pencil act on.
+    const first = screen.getByText('First Hotel').closest('article') as HTMLElement;
+    await userEvent.click(within(first).getByRole('button', { name: 'Remove' }));
+    await waitFor(() => expect(deleted).toEqual(['2', '1']));
+  });
+
+  it('FE-PLANNER-DAYDETAIL-087: a failing new stay keeps the picker open and says why', async () => {
+    const addToast = vi.fn();
+    window.__addToast = addToast;
+    server.use(
+      http.post('/api/trips/1/accommodations', () => HttpResponse.json({ error: 'Place is not in this trip' }, { status: 400 })),
+    );
+    render(<DayDetailPanel {...defaultProps} places={[buildPlace({ id: 10, name: 'Maison Blanche' })]} />);
+    await userEvent.click(await screen.findByText(/Add accommodation/i));
+    await userEvent.click(screen.getByRole('button', { name: /Maison Blanche/ }));
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => expect(addToast).toHaveBeenCalledWith('Place is not in this trip', 'error', undefined));
+    // Still open, still holding the picked place.
+    expect(screen.getByRole('dialog', { name: 'Add accommodation' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Maison Blanche/ })).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('FE-PLANNER-DAYDETAIL-088: a failing removal keeps the stay and says so', async () => {
+    const addToast = vi.fn();
+    window.__addToast = addToast;
+    server.use(
+      http.get('/api/trips/1/accommodations', () => HttpResponse.json({ accommodations: [stay(1, 'Sticky Hotel')] })),
+      http.delete('/api/trips/1/accommodations/1', () => HttpResponse.json({ error: 'Locked by a booking' }, { status: 409 })),
+    );
+    render(<DayDetailPanel {...defaultProps} />);
+    await userEvent.click(within((await screen.findByText('Sticky Hotel')).closest('article') as HTMLElement).getByRole('button', { name: 'Remove' }));
+
+    await waitFor(() => expect(addToast).toHaveBeenCalledWith('Locked by a booking', 'error', undefined));
+    expect(screen.getByText('Sticky Hotel')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-DAYDETAIL-093: a stay requested from the day\'s "+" opens the editor once', async () => {
+    const onStayPickerOpened = vi.fn();
+    render(<DayDetailPanel {...defaultProps} openStayPicker onStayPickerOpened={onStayPickerOpened} />);
+    expect(await screen.findByRole('dialog', { name: 'Add accommodation' })).toBeInTheDocument();
+    expect(onStayPickerOpened).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-PLANNER-DAYDETAIL-094: without edit rights the request is handed back and nothing opens', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 999, role: 'user' }), isAuthenticated: true });
+    seedStore(usePermissionsStore, { permissions: { day_edit: 'admin' } });
+    const onStayPickerOpened = vi.fn();
+    render(<DayDetailPanel {...defaultProps} openStayPicker onStayPickerOpened={onStayPickerOpened} />);
+    await waitFor(() => expect(onStayPickerOpened).toHaveBeenCalled());
+    expect(screen.queryByRole('dialog', { name: 'Add accommodation' })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-DAYDETAIL-089: the stay picker is a named dialog', async () => {
+    render(<DayDetailPanel {...defaultProps} />);
+    await userEvent.click(await screen.findByText(/Add accommodation/i));
+    const dialog = screen.getByRole('dialog', { name: 'Add accommodation' });
+    // Every field of the editor has its own label.
+    for (const label of ['Apply to days', 'Start', 'End', 'Check-in', 'Until', 'Check-out', 'Confirmation']) {
+      expect(within(dialog).getByText(label)).toBeInTheDocument();
+    }
+    // The list's label, and the title that asks for a pick until there is one.
+    expect(within(dialog).getAllByText('Select accommodation')).toHaveLength(2);
+    expect(within(dialog).getByLabelText('Confirmation')).toHaveAttribute('placeholder', 'ABC-12345');
+  });
+});
+
+describe('DayDetailPanel weather and reservation rows', () => {
+  it('FE-PLANNER-DAYDETAIL-090: the weather chips carry their labels, the hourly strip is labelled and tints rainy hours', async () => {
+    server.use(
+      http.get('/api/weather/detailed', () =>
+        HttpResponse.json({
+          main: 'Rain', temp: 15, temp_min: 12, temp_max: 18, description: 'rainy', type: 'forecast',
+          precipitation_probability_max: 80, precipitation_sum: 5.2, wind_max: 30, sunrise: '06:30', sunset: '20:15',
+          hourly: [
+            { hour: 8, main: 'Rain', temp: 14, precipitation_probability: 70 },
+            { hour: 9, main: 'Rain', temp: 14, precipitation_probability: 70 },
+            { hour: 10, main: 'Clouds', temp: 16, precipitation_probability: 20 },
+          ],
+        }),
+      ),
+    );
+    render(<DayDetailPanel {...defaultProps} lat={48.85} lng={2.35} weatherPlaceName="Louvre" />);
+    expect(await screen.findByText('Forecast for Louvre')).toBeInTheDocument();
+    // Screen readers hear the label with each value …
+    for (const label of ['Rain probability', 'Precipitation', 'Wind', 'Sunrise', 'Sunset']) {
+      expect(screen.getByText(`${label}:`)).toHaveClass('sr-only');
+    }
+    // … and the pointer gets it as a tooltip.
+    fireEvent.mouseEnter(screen.getByText('80%'));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Rain probability');
+    fireEvent.mouseLeave(screen.getByText('80%'));
+
+    expect(screen.getByText('Hourly Forecast')).toBeInTheDocument();
+    expect((screen.getByText('08').parentElement as HTMLElement).className).toContain('bg-info-soft');
+    expect((screen.getByText('10').parentElement as HTMLElement).className).not.toContain('bg-info-soft');
+    // every second hour only
+    expect(screen.queryByText('09')).toBeNull();
+    expect(screen.getByText('12° / 18°')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-DAYDETAIL-091: a reservation row names its status and shows its type icon', async () => {
+    render(
+      <DayDetailPanel
+        {...defaultProps}
+        reservations={[
+          buildReservation({ id: 9, type: 'restaurant', title: 'Dinner', day_id: 1, status: 'confirmed' }),
+          buildReservation({ id: 10, type: 'event', title: 'Show', day_id: 1, status: 'pending' }),
+        ]}
+      />,
+    );
+    const dinner = (await screen.findByText('Dinner')).closest('li') as HTMLElement;
+    expect(within(dinner).getByRole('img', { name: 'Confirmed' })).toBeInTheDocument();
+    expect(dinner.querySelector('svg')?.getAttribute('class')).toMatch(/utensils/);
+    const show = screen.getByText('Show').closest('li') as HTMLElement;
+    expect(within(show).getByRole('img', { name: 'Pending' })).toBeInTheDocument();
+    expect(screen.getByText('Reservations')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-DAYDETAIL-092: the stay card marks the check-out day in the danger tone', async () => {
+    const lastDay = buildDay({ id: 3, trip_id: 1, date: '2025-06-17', title: 'Leaving Day' });
+    server.use(
+      http.get('/api/trips/1/accommodations', () =>
+        HttpResponse.json({
+          accommodations: [{
+            id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
+            start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
+          }],
+        }),
+      ),
+    );
+    render(<DayDetailPanel {...defaultProps} day={lastDay} days={[day, lastDay]} />);
+    const card = (await screen.findByText('Grand Hotel')).closest('article') as HTMLElement;
+    const pill = within(card).getAllByText('Check-out').find(el => el.className.includes('rounded-full')) as HTMLElement;
+    expect(pill.className).toContain('text-danger');
+    expect(pill.querySelector('.lucide-log-out')).not.toBeNull();
+  });
+});
+
+// The desktop plan passes onOpenBooking, so a booking in the day's card opens its
+// detail; the narrow layout does not, and the rows stay a read-only summary.
+describe('DayDetailPanel opening a booking', () => {
+  const stay = {
+    id: 1, place_id: 5, place_name: 'Grand Hotel', place_address: 'Paris',
+    start_day_id: 1, end_day_id: 3, check_in: '14:00', check_out: '11:00', confirmation: null,
+  };
+
+  it('FE-PLANNER-DAYDETAIL-095: with a detail to show, a booking of the day opens it', async () => {
+    const onOpenBooking = vi.fn();
+    const show = buildReservation({ id: 9, type: 'event', title: 'Night Show', day_id: 1, reservation_time: '20:00', status: 'confirmed' });
+    render(<DayDetailPanel {...defaultProps} reservations={[show]} onOpenBooking={onOpenBooking} />);
+
+    await userEvent.click(await screen.findByRole('button', { name: /Night Show/ }));
+
+    expect(onOpenBooking).toHaveBeenCalledWith(show);
+  });
+
+  it("FE-PLANNER-DAYDETAIL-096: without one, the day's bookings stay a read-only list", async () => {
+    const show = buildReservation({ id: 9, type: 'event', title: 'Night Show', day_id: 1, reservation_time: '20:00', status: 'confirmed' });
+    render(<DayDetailPanel {...defaultProps} reservations={[show]} />);
+
+    expect(await screen.findByText('Night Show')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Night Show/ })).toBeNull();
+  });
+
+  it("FE-PLANNER-DAYDETAIL-097: a stay's booking is one button that opens it, with its blurred code no second button inside", async () => {
+    seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: true } });
+    server.use(http.get('/api/trips/1/accommodations', () => HttpResponse.json({ accommodations: [stay] })));
+    const onOpenBooking = vi.fn();
+    const booking = buildReservation({ id: 40, type: 'hotel', title: 'Grand Hotel Booking', accommodation_id: 1, status: 'confirmed', confirmation_number: 'XY99' });
+    render(<DayDetailPanel {...defaultProps} reservations={[booking]} onOpenBooking={onOpenBooking} />);
+
+    const box = await screen.findByRole('button', { name: /Grand Hotel Booking/ });
+    // The code is read in the booking it opens, so it is neither a button nor part of this one's name.
+    expect(within(box).queryByRole('button')).toBeNull();
+    expect(box).not.toHaveAccessibleName(/XY99/);
+
+    await userEvent.click(box);
+    expect(onOpenBooking).toHaveBeenCalledTimes(1);
+    expect(onOpenBooking).toHaveBeenCalledWith(booking);
+  });
+
+  it("FE-PLANNER-DAYDETAIL-098: without one, a stay's booking is no button and its blurred code reveals itself", async () => {
+    seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius', blur_booking_codes: true } });
+    server.use(http.get('/api/trips/1/accommodations', () => HttpResponse.json({ accommodations: [stay] })));
+    const booking = buildReservation({ id: 40, type: 'hotel', title: 'Grand Hotel Booking', accommodation_id: 1, status: 'confirmed', confirmation_number: 'XY99' });
+    render(<DayDetailPanel {...defaultProps} reservations={[booking]} />);
+
+    expect(await screen.findByText('Grand Hotel Booking')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Grand Hotel Booking/ })).toBeNull();
+    expect(screen.getByRole('button', { name: '#XY99' })).toHaveAttribute('aria-pressed', 'false');
+  });
+});
diff --git a/client/src/components/Planner/DayDetailPanel.tsx b/client/src/components/Planner/DayDetailPanel.tsx
index 481cf7e9d..45a472a42 100644
--- a/client/src/components/Planner/DayDetailPanel.tsx
+++ b/client/src/components/Planner/DayDetailPanel.tsx
@@ -1,44 +1,44 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Hash, Pencil, Plane, Utensils, Train, Car, Ship, Ticket, FileText, Users, ChevronsDown, ChevronsUp, TramFront, ParkingSquare } from 'lucide-react'
-
-const RES_TYPE_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, transit: TramFront, event: Ticket, tour: Users, parking: ParkingSquare, other: FileText }
-const RES_TYPE_COLORS = { flight: '#3b82f6', hotel: '#8b5cf6', restaurant: '#ef4444', train: '#06b6d4', car: '#6b7280', cruise: '#0ea5e9', transit: '#7c3aed', event: '#f59e0b', tour: '#10b981', parking: '#2563eb', other: '#6b7280' }
-import { weatherApi, accommodationsApi } from '../../api/client'
+import React, { useState, useEffect, useRef, useId, type ReactNode } from 'react'
+import { X, Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind, Droplets, Sunrise, Sunset, Hotel, Calendar, MapPin, LogIn, LogOut, Pencil, ChevronsDown, ChevronsUp, ArrowRight, Check, Moon, type LucideIcon } from 'lucide-react'
+import type { WeatherResult } from '@trek/shared'
 import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import { usePluginStore } from '../../store/pluginStore'
 import PluginFrame from '../Plugins/PluginFrame'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
-import { applyStayStops } from '../../store/stayStops'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { BlurredCode, BookingCodeInput } from '../shared/BookingCode'
+import { Tooltip } from '../shared/Tooltip'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import { getLocaleForLanguage, useTranslation } from '../../i18n'
-import type { Day, Place, Category, Reservation, AssignmentsMap } from '../../types'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
+import type { Day, Place, Category, Reservation, AssignmentsMap, Accommodation } from '../../types'
 import { formatClockTime, splitReservationDateTime } from '../../utils/formatters'
-import { useDayDetail } from './useDayDetail'
+import { useDayDetail, type HotelDayRange, type HotelForm, type HotelPickerMode } from './useDayDetail'
 import { stayPlaces } from '../../utils/stayPlaces'
+import { DialogShell, DialogHeader, DialogTile, DialogSection, DialogFooter, DialogButton, FooterSpacer, NEUTRAL_TINT, PILL, fs } from '../shared/DialogShell'
+import { INPUT, PANEL, EditorField, AddRowButton, PillSelect } from '../shared/dialogParts'
+import { BOX, Eyebrow, Field, RoundAction, TypeTile, toneOf, toneColor, toneTint } from './bookings/bookingParts'
+import { SoftPill, TimePill, tintOf } from './planParts'
+import { typeInfo } from './bookings/bookingsModel'
 
-const WEATHER_ICON_MAP = {
+const WEATHER_ICON_MAP: Record<string, LucideIcon> = {
   Clear: Sun, Clouds: Cloud, Rain: CloudRain, Drizzle: CloudDrizzle,
   Thunderstorm: CloudLightning, Snow: CloudSnow, Mist: Wind, Fog: Wind, Haze: Wind,
 }
 
-interface WIconProps {
-  main: string
-  size?: number
-}
-
-function WIcon({ main, size = 14 }: WIconProps) {
+function WIcon({ main, size = 14 }: { main: string; size?: number }) {
   const Icon = WEATHER_ICON_MAP[main] || Cloud
   return <Icon size={size} strokeWidth={1.8} />
 }
 
-function cTemp(c, f) { return Math.round(f ? c * 9 / 5 + 32 : c) }
+function cTemp(c: number | undefined, f: boolean) { return Math.round(f ? (c ?? NaN) * 9 / 5 + 32 : (c ?? NaN)) }
+
+/** What the server said when it refused a write, or the generic line. */
+function apiErrorMessage(err: unknown): string | undefined {
+  return (err as { response?: { data?: { error?: string } } })?.response?.data?.error
+}
 
 interface DayDetailPanelProps {
   day: Day
@@ -61,22 +61,27 @@ interface DayDetailPanelProps {
   onUpdateDayTitle?: (dayId: number, title: string) => void
   /** Name of the place the day's weather is anchored to — captioned above the forecast (#2167). */
   weatherPlaceName?: string | null
+  /** Open the stay editor for a new accommodation as soon as the panel is up (the day's "+"). */
+  openStayPicker?: boolean
+  /** Called once the stay editor is open, so the request is not taken twice. */
+  onStayPickerOpened?: () => void
+  /** Shows a booking's detail. Given, the day's bookings and a stay's booking open it on a click. */
+  onOpenBooking?: (reservation: Reservation) => void
 }
 
-export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false, onUpdateDayTitle, weatherPlaceName = null }: DayDetailPanelProps) {
-  const { t, language, locale } = useTranslation()
+/**
+ * The card a selected day opens over the map: its name and date in a tinted
+ * head band that folds the card away, then the weather, the bookings of the
+ * day and where the night is spent, each under its own label.
+ */
+export default function DayDetailPanel({ day, days, places, categories = [], tripId, assignments, reservations = [], lat, lng, onClose, onAccommodationChange, leftWidth = 0, rightWidth = 0, collapsed: collapsedProp = false, onToggleCollapse, mobile = false, onUpdateDayTitle, weatherPlaceName = null, openStayPicker = false, onStayPickerOpened, onOpenBooking }: DayDetailPanelProps) {
+  const { t, language } = useTranslation()
   const can = useCanDo()
+  const toast = useToast()
   const tripObj = useTripStore((s) => s.trip)
   const canEditDays = can('day_edit', tripObj)
   const isFahrenheit = useSettingsStore(s => s.settings.temperature_unit) === 'fahrenheit'
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-  const blurCodes = useSettingsStore(s => s.settings.blur_booking_codes)
-  const fmtTime = (v) => {
-    if (!v) return v
-    if (v.includes('T')) return new Date(v).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
-    return formatClockTime(v, is12h)
-  }
-  const unit = isFahrenheit ? '°F' : '°C'
   const collapsed = collapsedProp
   const toggleCollapse = () => onToggleCollapse?.()
 
@@ -96,12 +101,18 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
     if (day && onUpdateDayTitle) onUpdateDayTitle(day.id, titleDraft.trim())
   }
   const {
-    weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
-    accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
+    weather, loading, accommodation, setAccommodation, dayAccommodations,
+    showHotelPicker, setShowHotelPicker,
     hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
-    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
-    updateAccommodationField, handleRemoveAccommodation,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation, handleUpdateAccommodation,
+    handleRemoveAccommodation,
   } = useDayDetail(day, days, tripId, lat, lng, language, onAccommodationChange)
+  // The day's "+" asked for a new stay: open the editor once and hand the request back.
+  useEffect(() => {
+    if (!openStayPicker) return
+    if (canEditDays) setShowHotelPicker(true)
+    onStayPickerOpened?.()
+  }, [openStayPicker, canEditDays, setShowHotelPicker, onStayPickerOpened])
   // Plugin-contributed columns/actions for the day view, keyed by day id (#plugins).
   // day can be null (panel closed) and hooks must run before the early return, so guard it.
   const dayContributions = usePluginViewContributions('day', tripId)(day?.id ?? -1)
@@ -136,30 +147,44 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
     getLocaleForLanguage(language),
     { weekday: 'long', day: 'numeric', month: 'long', timeZone: 'UTC' }
   ) : null
+  const dayTitle = day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })
+  const showError = (err: unknown) => toast.error(apiErrorMessage(err) || t('common.unknownError'))
 
-  const placesWithCoords = places.filter(p => p.lat && p.lng)
-  const font = { fontFamily: "var(--font-system)" }
+  // Saving the picker: a new stay or the one being edited. Both say what went
+  // wrong when the write fails, otherwise the picker just sits there with the
+  // Save button doing nothing; it stays open so nothing typed is lost.
+  const saveHotelPicker = async () => {
+    try {
+      if (showHotelPicker === 'edit' && accommodation) await handleUpdateAccommodation()
+      else await handleSaveAccommodation()
+    } catch (err: unknown) {
+      showError(err)
+    }
+  }
+  const editAccommodation = (acc: Accommodation) => {
+    setAccommodation(acc)
+    setHotelForm({ check_in: acc.check_in || '', check_in_end: acc.check_in_end || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id ?? null })
+    setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id })
+    setShowHotelPicker('edit')
+  }
+  const removeAccommodation = (acc: Accommodation) => { handleRemoveAccommodation(acc).catch(showError) }
 
   return (
-    <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), ...font }}>
-      <div ref={cardRef} className="bg-surface-elevated" style={{
-        backdropFilter: 'blur(40px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
-        borderRadius: 20,
-        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
-        overflow: 'hidden', maxHeight: collapsed ? 'none' : '60vh', display: 'flex', flexDirection: 'column',
-      }}>
-        {/* Header. Clicking the bar collapses the panel, but that is a mouse
-            shortcut for the chevron button below, a real button with a title that
-            does the same thing. So the bar declares itself presentational instead
-            of becoming a second, unlabelled tab stop wrapped around the rename
-            input and the two icon buttons. */}
-        <div role="presentation" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: collapsed ? '12px 16px 12px 20px' : '18px 16px 14px 20px', borderBottom: collapsed ? 'none' : '1px solid var(--border-faint)', cursor: 'pointer' }}
-          onClick={() => toggleCollapse()}>
-          <div className="bg-surface-secondary" style={{ width: collapsed ? 36 : 44, height: collapsed ? 36 : 44, borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, transition: 'all 0.15s ease' }}>
-            <Calendar size={collapsed ? 16 : 20} className="text-content" />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
+    <div className="fixed z-50" style={{ bottom: 'calc(var(--bottom-nav-h) + 20px)', left: `calc(${leftWidth}px + (100vw - ${leftWidth}px - ${rightWidth}px) / 2)`, transform: 'translateX(-50%)', width: `min(800px, calc(100vw - ${leftWidth}px - ${rightWidth}px - 32px))`, ...(mobile ? { zIndex: 10000 } : null), fontFamily: 'var(--font-system)' }}>
+      <div ref={cardRef}
+        className="flex flex-col overflow-hidden rounded-[20px] border border-edge-faint bg-surface-elevated shadow-popover backdrop-blur-[40px] backdrop-saturate-[1.8]"
+        style={{ maxHeight: collapsed ? 'none' : '60vh' }}>
+        {/* Head band. Clicking it folds the card, but that is a mouse shortcut for
+            the chevron button, a real button with a name that does the same thing.
+            So the band declares itself presentational instead of becoming a second,
+            unlabelled tab stop wrapped around the rename input and the buttons. */}
+        <div role="presentation" onClick={() => toggleCollapse()}
+          className={`flex flex-none cursor-pointer items-center gap-3 px-4 ${collapsed ? 'py-2.5' : 'border-b border-edge-faint py-3.5'}`}
+          style={{ background: NEUTRAL_TINT }}>
+          <span className={`grid flex-none place-items-center rounded-[14px] bg-surface-card text-content shadow-sm transition-all ${collapsed ? 'h-9 w-9' : 'h-[46px] w-[46px]'}`}>
+            <Calendar size={collapsed ? 16 : 20} strokeWidth={1.9} />
+          </span>
+          <div className="min-w-0 flex-1">
             {editingTitle ? (
               <input
                 ref={titleInputRef}
@@ -169,196 +194,72 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
                 onBlur={commitRename}
                 onKeyDown={e => { if (e.key === 'Enter') commitRename(); if (e.key === 'Escape') setEditingTitle(false) }}
                 placeholder={t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-                className="text-content"
-                style={{ width: '100%', border: 'none', outline: 'none', background: 'transparent', padding: 0, fontFamily: 'inherit', fontSize: 15, fontWeight: 700, borderBottom: '1.5px solid var(--text-primary)' }}
+                className="w-full border-0 border-b-[1.5px] border-content bg-transparent p-0 font-bold text-content outline-none placeholder:text-content-faint"
+                style={fs(17, 'subtitle')}
               />
             ) : collapsed ? (
-              <div className="text-content" style={{ fontSize: 13, fontWeight: 700, transition: 'font-size 0.15s ease' }}>
-                {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-                {formattedDate && <span className="text-content-muted" style={{ fontWeight: 500, marginLeft: 8 }}>{formattedDate}</span>}
+              <div className="truncate font-bold text-content" style={fs(13.5, 'body')}>
+                {dayTitle}
+                {formattedDate && <span className="ml-2 font-medium text-content-muted">{formattedDate}</span>}
               </div>
             ) : (
-              <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 15, fontWeight: 700, transition: 'font-size 0.15s ease', minWidth: 0 }}>
-                <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {day.title || t('planner.dayN', { n: (days.indexOf(day) + 1) || '?' })}
-                </span>
+              <div className="flex min-w-0 items-center gap-1">
+                <span className="truncate font-bold tracking-[-0.01em] text-content" style={fs(17, 'subtitle')}>{dayTitle}</span>
                 {canEditDays && onUpdateDayTitle && (
-                  <button type="button" onClick={startRename} aria-label={t('common.edit')} title={t('common.edit')} className="text-content-faint" style={{ border: 'none', background: 'none', padding: 3, cursor: 'pointer', display: 'flex', flexShrink: 0 }}>
-                    <Pencil size={12} strokeWidth={1.8} />
-                  </button>
+                  <Tooltip label={t('common.edit')}>
+                    <button type="button" onClick={startRename} aria-label={t('common.edit')}
+                      className="grid h-6 w-6 flex-none place-items-center rounded-full text-content-faint hover:bg-surface-card hover:text-content">
+                      <Pencil size={12} strokeWidth={2} />
+                    </button>
+                  </Tooltip>
                 )}
               </div>
             )}
-            {!collapsed && formattedDate && <div className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginTop: 1 }}>{formattedDate}</div>}
+            {!collapsed && formattedDate && <div className="mt-0.5 truncate font-geist text-content-muted" style={fs(12.5)}>{formattedDate}</div>}
           </div>
-          <button type="button" onClick={(e) => { e.stopPropagation(); toggleCollapse() }} title={collapsed ? t('common.expand') : t('common.collapse')}
-            className="bg-surface-secondary"
-            style={{ border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, transition: 'all 0.15s ease' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}>
-            {collapsed ? <ChevronsUp size={14} className="text-content-muted" /> : <ChevronsDown size={14} className="text-content-muted" />}
-          </button>
-          <button type="button" onClick={(e) => { e.stopPropagation(); onClose() }} className="bg-surface-secondary" style={{ border: 'none', borderRadius: 10, width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0 }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-secondary)'}>
-            <X size={14} className="text-content-muted" />
-          </button>
+          <HeadButton label={collapsed ? t('common.expand') : t('common.collapse')} expanded={!collapsed}
+            onClick={() => toggleCollapse()}>
+            {collapsed ? <ChevronsUp size={15} strokeWidth={2} /> : <ChevronsDown size={15} strokeWidth={2} />}
+          </HeadButton>
+          <HeadButton label={t('common.close')} onClick={onClose}>
+            <X size={15} strokeWidth={2.2} />
+          </HeadButton>
         </div>
 
-        {/* Scrollable content */}
-        <div style={{ overflowY: 'auto', padding: '14px 20px 18px', display: collapsed ? 'none' : 'block' }}>
+        {/* The body stays mounted while folded, so the weather and the picker keep their state. */}
+        <div data-testid="day-detail-scroll"
+          className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto overscroll-contain px-4 pb-4 pt-3.5"
+          style={collapsed ? { display: 'none' } : undefined}>
 
-          {/* ── Weather ── */}
           {!!(day.date && lat && lng) && (
-            loading ? (
-              <div style={{ textAlign: 'center', padding: 16, color: 'var(--text-faint)', fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>
-                <div style={{ width: 18, height: 18, border: '2px solid var(--border-primary)', borderTopColor: 'var(--text-primary)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 6px' }} />
-              </div>
-            ) : weather ? (
-              <div>
-                {/* Which place the forecast is for — on a roadtrip "the day's weather"
-                    is ambiguous without it (#2167). */}
-                {weatherPlaceName && (
-                  <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>
-                    {t('day.weatherFor', { name: weatherPlaceName })}
-                  </div>
-                )}
-                {/* Summary row */}
-                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
-                  <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                    <WIcon main={weather.main} size={20} />
-                  </div>
-                  <div style={{ flex: 1, display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
-                    <span style={{ fontSize: 'calc(20px * var(--fs-scale-title, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
-                      {weather.type === 'climate' ? 'Ø ' : ''}{cTemp(weather.temp, isFahrenheit)}{unit}
-                    </span>
-                    {weather.temp_max != null && (
-                      <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)' }}>
-                        {cTemp(weather.temp_min, isFahrenheit)}° / {cTemp(weather.temp_max, isFahrenheit)}°
-                      </span>
-                    )}
-                    {weather.description && (
-                      <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', textTransform: 'capitalize' }}>{weather.description}</span>
-                    )}
-                  </div>
-                </div>
-
-                {/* Chips row */}
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: weather.hourly ? 10 : 0 }}>
-                  {weather.precipitation_probability_max != null && (
-                    <Chip icon={Droplets} value={`${weather.precipitation_probability_max}%`} />
-                  )}
-                  {weather.precipitation_sum > 0 && (
-                    <Chip icon={CloudRain} value={`${weather.precipitation_sum.toFixed(1)} mm`} />
-                  )}
-                  {weather.wind_max != null && (
-                    <Chip icon={Wind} value={isFahrenheit ? `${Math.round(weather.wind_max * 0.621371)} mph` : `${Math.round(weather.wind_max)} km/h`} />
-                  )}
-                  {weather.sunrise && <Chip icon={Sunrise} value={weather.sunrise} />}
-                  {weather.sunset && <Chip icon={Sunset} value={weather.sunset} />}
-                </div>
-
-                {/* Hourly scroll */}
-                {weather.hourly?.length > 0 && (
-                  <div style={{ overflowX: 'auto', margin: '0 -6px', padding: '0 6px 4px' }}>
-                    <div style={{ display: 'inline-flex', gap: 2 }}>
-                      {weather.hourly.filter((_, i) => i % 2 === 0).map(h => (
-                        <div key={h.hour} style={{
-                          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
-                          width: 44, padding: '5px 2px', borderRadius: 8,
-                          background: h.precipitation_probability > 50 ? 'rgba(59,130,246,0.07)' : 'transparent',
-                        }}>
-                          <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500 }}>{String(h.hour).padStart(2, '0')}</span>
-                          <WIcon main={h.main} size={12} />
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{cTemp(h.temp, isFahrenheit)}°</span>
-                          {h.precipitation_probability > 0 && (
-                            <span style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', color: '#3b82f6', fontWeight: 500 }}>{h.precipitation_probability}%</span>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                {weather.type === 'climate' && (
-                  <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 6, fontStyle: 'italic' }}>{t('day.climateHint')}</div>
-                )}
-              </div>
-            ) : (
-              <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', textAlign: 'center', padding: 8 }}>{t('day.noWeather')}</div>
-            )
+            <DayWeather weather={weather} loading={loading} isFahrenheit={isFahrenheit} placeName={weatherPlaceName} />
           )}
 
-          {/* ── Reservations for this day's assignments ── */}
           {dayContributions.length > 0 && <PluginCardFooter items={dayContributions} tripId={tripId} />}
-          {(() => {
-            const dayAssignments = assignments[String(day.id)] || []
-            const dayReservations = reservations.filter(r => {
-              if (r.type === 'hotel') return false
-              if (r.assignment_id && dayAssignments.some(a => a.id === r.assignment_id)) return true
-              return r.day_id === day.id
-            })
-            if (dayReservations.length === 0) return null
-            return (
-              <div style={{ marginBottom: 0 }}>
-                {!!(day.date && lat && lng) && <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />}
-                <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>{t('day.reservations')}</div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {dayReservations.map(r => {
-                    const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
-                    const confirmed = r.status === 'confirmed'
-                    return (
-                      <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}` }}>
-                        {(() => { const TIcon = RES_TYPE_ICONS[r.type] || FileText; return <TIcon size={12} style={{ color: RES_TYPE_COLORS[r.type] || 'var(--text-faint)', flexShrink: 0 }} /> })()}
-                        <div style={{ flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden' }}>
-                          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</span>
-                          {linkedAssignment?.place && <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>· {linkedAssignment.place.name}</span>}
-                        </div>
-                        {(() => {
-                          const { time: startTime } = splitReservationDateTime(r.reservation_time)
-                          const { time: endTime } = splitReservationDateTime(r.reservation_end_time)
-                          if (!startTime && !endTime) return null
-                          return (
-                            <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-                              {startTime ? formatClockTime(startTime, is12h) : ''}
-                              {endTime ? ` – ${formatClockTime(endTime, is12h)}` : ''}
-                            </span>
-                          )
-                        })()}
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )
-          })()}
 
-          {/* Divider before accommodation */}
-          <div style={{ height: 1, background: 'var(--border-faint)', margin: '12px 0' }} />
+          <DayReservations day={day} assignments={assignments} reservations={reservations} is12h={is12h} onOpen={onOpenBooking} />
 
-          {/* ── Accommodation ── */}
-          <div>
-            <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8 }}>{t('day.accommodation')}</div>
-
-            <AccommodationList dayAccommodations={dayAccommodations} day={day} reservations={reservations}
-              canEditDays={canEditDays} fmtTime={fmtTime} blurCodes={blurCodes} t={t}
-              setAccommodation={setAccommodation} setHotelForm={setHotelForm} setHotelDayRange={setHotelDayRange}
-              setShowHotelPicker={setShowHotelPicker} handleRemoveAccommodation={handleRemoveAccommodation} />
-
-            <HotelPickerModal showHotelPicker={showHotelPicker} setShowHotelPicker={setShowHotelPicker}
-              font={font} t={t} hotelDayRange={hotelDayRange} setHotelDayRange={setHotelDayRange} days={days} locale={locale}
-              hotelForm={hotelForm} setHotelForm={setHotelForm} categories={categories} hotelCategoryFilter={hotelCategoryFilter}
-              setHotelCategoryFilter={setHotelCategoryFilter} places={places} handleSelectPlace={handleSelectPlace}
-              accommodation={accommodation} tripId={tripId} day={day} setAccommodations={setAccommodations}
-              setDayAccommodations={setDayAccommodations} setAccommodation={setAccommodation}
-              handleSaveAccommodation={handleSaveAccommodation} onAccommodationChange={onAccommodationChange} />
-          </div>
+          <DialogSection label={t('day.accommodation')}>
+            <div className="flex flex-col gap-2">
+              {dayAccommodations.map(acc => (
+                <AccommodationCard key={acc.id} acc={acc} day={day}
+                  linked={reservations.find(r => r.accommodation_id === acc.id)}
+                  canEdit={canEditDays}
+                  onEdit={() => editAccommodation(acc)}
+                  onRemove={() => removeAccommodation(acc)}
+                  onOpenBooking={onOpenBooking} />
+              ))}
+              {canEditDays && (
+                <AddRowButton onClick={() => setShowHotelPicker(true)}>{t('day.addAccommodation')}</AddRowButton>
+              )}
+            </div>
+          </DialogSection>
 
           {/* Day-detail plugin slots: sandboxed, scoped to this day. */}
           {dayDetailPlugins.length > 0 && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+            <div className="flex flex-col gap-2">
               {dayDetailPlugins.map((p) => (
-                <div key={p.id} className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
+                <div key={p.id} className={`${BOX} overflow-hidden`}>
                   <PluginFrame pluginId={p.id} tripId={String(tripId)} dayId={String(day.id)} title={p.name} surface="detail-slot" />
                 </div>
               ))}
@@ -366,352 +267,441 @@ export default function DayDetailPanel({ day, days, places, categories = [], tri
           )}
         </div>
       </div>
-      <style>{`@keyframes spin { to { transform: rotate(360deg) } }`}</style>
+
+      <HotelPickerModal mode={showHotelPicker} onClose={() => setShowHotelPicker(false)} onSave={() => { void saveHotelPicker() }}
+        days={days} categories={categories} places={places}
+        hotelDayRange={hotelDayRange} setHotelDayRange={setHotelDayRange}
+        hotelForm={hotelForm} setHotelForm={setHotelForm}
+        hotelCategoryFilter={hotelCategoryFilter} setHotelCategoryFilter={setHotelCategoryFilter}
+        onSelectPlace={handleSelectPlace} />
     </div>
   )
 }
 
-interface ChipProps {
-  icon: React.ComponentType<{ size?: number; style?: React.CSSProperties }>
-  value: string
-}
-
-function Chip({ icon: Icon, value }: ChipProps) {
+/** A round button on the head band. It keeps its click from folding the card. */
+function HeadButton({ label, onClick, expanded, children }: { label: string; onClick: () => void; expanded?: boolean; children: ReactNode }) {
   return (
-    <div className="bg-surface-secondary text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '4px 8px', borderRadius: 8, fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>
-      <Icon size={11} style={{ flexShrink: 0, opacity: 0.6 }} />
-      <span style={{ fontWeight: 500 }}>{value}</span>
-    </div>
+    <Tooltip label={label}>
+      <button type="button" aria-label={label} aria-expanded={expanded}
+        onClick={e => { e.stopPropagation(); onClick() }}
+        className="grid h-8 w-8 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm transition-colors hover:text-content">
+        {children}
+      </button>
+    </Tooltip>
   )
 }
 
-function AccommodationList({ dayAccommodations, day, reservations, canEditDays, fmtTime, blurCodes, t,
-  setAccommodation, setHotelForm, setHotelDayRange, setShowHotelPicker, handleRemoveAccommodation }: any) {
+/** A weather fact as a pill: the icon and the value, the label in its tooltip and for screen readers. */
+function WeatherChip({ icon: Icon, label, value }: { icon: LucideIcon; label: string; value: string }) {
   return (
-    <>
-            {dayAccommodations.length > 0 ? (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {dayAccommodations.map(acc => {
-                  const isCheckInDay = acc.start_day_id === day.id
-                  const isCheckOutDay = acc.end_day_id === day.id
-                  const isMiddleDay = !isCheckInDay && !isCheckOutDay
-                  const dayLabel = isCheckInDay && isCheckOutDay ? t('day.checkIn') + ' & ' + t('day.checkOut')
-                    : isCheckInDay ? t('day.checkIn')
-                    : isCheckOutDay ? t('day.checkOut')
-                    : null
-                  const linked = reservations.find(r => r.accommodation_id === acc.id)
-                  const confirmed = linked?.status === 'confirmed'
-
-                  return (
-                    <div key={acc.id} style={{ borderRadius: 12, background: 'var(--bg-secondary)', overflow: 'hidden' }}>
-                      {/* Day label */}
-                      {dayLabel && (
-                        <div style={{ padding: '4px 12px 0', display: 'flex', alignItems: 'center', gap: 4 }}>
-                          {isCheckInDay && <LogIn size={9} style={{ color: '#22c55e' }} />}
-                          {isCheckOutDay && !isCheckInDay && <LogOut size={9} style={{ color: '#ef4444' }} />}
-                          <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', color: isCheckOutDay && !isCheckInDay ? '#ef4444' : '#22c55e' }}>{dayLabel}</span>
-                        </div>
-                      )}
-                      {/* Hotel header */}
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px' }}>
-                        <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                          {acc.place_image ? (
-                            <img src={acc.place_image} alt="" style={{ width: '100%', height: '100%', borderRadius: 10, objectFit: 'cover' }} />
-                          ) : (
-                            <Hotel size={16} style={{ color: 'var(--text-muted)' }} />
-                          )}
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_name}</div>
-                          {acc.place_address && <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{acc.place_address}</div>}
-                        </div>
-                        {canEditDays && <button type="button" onClick={() => { setAccommodation(acc); setHotelForm({ check_in: acc.check_in || '', check_in_end: acc.check_in_end || '', check_out: acc.check_out || '', confirmation: acc.confirmation || '', place_id: acc.place_id }); setHotelDayRange({ start: acc.start_day_id, end: acc.end_day_id }); setShowHotelPicker('edit') }}
-                          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
-                          <Pencil size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>}
-                        {canEditDays && <button type="button" onClick={() => { setAccommodation(acc); handleRemoveAccommodation() }} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 3, flexShrink: 0 }}>
-                          <X size={12} style={{ color: 'var(--text-faint)' }} />
-                        </button>}
-                      </div>
-                      {/* Details grid */}
-                      <div style={{ display: 'flex', gap: 0, margin: '0 12px 8px', borderRadius: 10, overflow: 'hidden', border: '1px solid var(--border-faint)' }}>
-                        {acc.check_in && (
-                          <div style={{ flex: 1, padding: '8px 10px', borderRight: '1px solid var(--border-faint)', textAlign: 'center' }}>
-                            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>
-                              {fmtTime(acc.check_in)}{acc.check_in_end ? ` – ${fmtTime(acc.check_in_end)}` : ''}
-                            </div>
-                            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <LogIn size={8} /> {t('day.checkIn')}
-                            </div>
-                          </div>
-                        )}
-                        {acc.check_out && (
-                          <div style={{ flex: 1, padding: '8px 10px', borderRight: acc.confirmation ? '1px solid var(--border-faint)' : 'none', textAlign: 'center' }}>
-                            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}>{fmtTime(acc.check_out)}</div>
-                            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <LogOut size={8} /> {t('day.checkOut')}
-                            </div>
-                          </div>
-                        )}
-                        {acc.confirmation && (
-                          <div style={{ flex: 1, padding: '8px 10px', textAlign: 'center' }}>
-                            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.2 }}><BlurredCode>{acc.confirmation}</BlurredCode></div>
-                            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500, marginTop: 2, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 3 }}>
-                              <Hash size={8} /> {t('day.confirmation')}
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                      {/* Linked booking */}
-                      {linked && (
-                        <div style={{ margin: '0 12px 8px', padding: '6px 10px', borderRadius: 8, background: confirmed ? 'rgba(22,163,74,0.06)' : 'rgba(217,119,6,0.06)', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.15)' : 'rgba(217,119,6,0.15)'}`, display: 'flex', alignItems: 'center', gap: 8 }}>
-                          <div style={{ width: 6, height: 6, borderRadius: '50%', background: confirmed ? '#16a34a' : '#d97706', flexShrink: 0 }} />
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.title}</div>
-                            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', display: 'flex', gap: 6, marginTop: 1 }}>
-                              <span>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                              {/* Reveal toggle for a blurred code: a real button, so it can
-                                  be reached by keyboard. With blurring off there is nothing
-                                  to toggle, and it stays out of the tab order. */}
-                              {linked.confirmation_number && <button
-                                type="button"
-                                disabled={!blurCodes}
-                                onMouseEnter={e => { if (blurCodes) e.currentTarget.style.filter = 'none' }}
-                                onMouseLeave={e => { if (blurCodes) e.currentTarget.style.filter = 'blur(4px)' }}
-                                onClick={e => { if (blurCodes) { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(4px)' : 'none' } }}
-                                style={{ filter: blurCodes ? 'blur(4px)' : 'none', transition: 'filter 0.2s', cursor: blurCodes ? 'pointer' : 'default', background: 'none', border: 'none', padding: 0, font: 'inherit', color: 'inherit' }}
-                              >#{linked.confirmation_number}</button>}
-                            </div>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  )
-                })}
-                {/* Add another hotel */}
-                {canEditDays && <button type="button" onClick={() => setShowHotelPicker(true)} style={{
-                  width: '100%', padding: 8, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
-                  background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                  fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontFamily: 'inherit',
-                }}>
-                  <Hotel size={10} /> {t('day.addAccommodation')}
-                </button>}
-              </div>
-            ) : (
-              canEditDays ? <button type="button" onClick={() => setShowHotelPicker(true)} style={{
-                width: '100%', padding: 10, border: '1.5px dashed var(--border-primary)', borderRadius: 10,
-                background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontFamily: 'inherit',
-              }}>
-                <Hotel size={12} /> {t('day.addAccommodation')}
-              </button> : null
-            )}
-    </>
+    <Tooltip label={label}>
+      <span className="inline-flex">
+        <SoftPill icon={<Icon size={11} strokeWidth={2} className="flex-none text-content-faint" />}>
+          <span className="sr-only">{label}: </span>{value}
+        </SoftPill>
+      </span>
+    </Tooltip>
   )
 }
 
-function HotelPickerModal({ showHotelPicker, setShowHotelPicker, font, t, hotelDayRange, setHotelDayRange,
-  days, locale, hotelForm, setHotelForm, categories, hotelCategoryFilter, setHotelCategoryFilter, places,
-  handleSelectPlace, accommodation, tripId, day, setAccommodations, setDayAccommodations, setAccommodation,
-  handleSaveAccommodation, onAccommodationChange }: any) {
-  const toast = useToast()
-  // Saving the picker. The edit branch stays here rather than in useDayDetail
-  // because it also refreshes the panel's own accommodation state; it has to say
-  // what went wrong when the write fails, otherwise the picker just sits there
-  // with the Save button doing nothing.
-  const saveHotelPicker = async () => {
-    if (showHotelPicker !== 'edit' || !accommodation) {
-      await handleSaveAccommodation()
-      return
-    }
-    try {
-      applyStayStops(await accommodationsApi.update(tripId, accommodation.id, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_in_end: hotelForm.check_in_end || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      }))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-      // Reload
-      const d = await accommodationsApi.list(tripId)
-      const all = d.accommodations || []
-      setAccommodations(all)
-      setDayAccommodations(all.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      const acc = all.find(a => day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false)
-      setAccommodation(acc || null)
-      onAccommodationChange?.()
-    } catch (err: unknown) {
-      const message = (err as { response?: { data?: { error?: string } } })?.response?.data?.error
-      toast.error(message || t('common.unknownError'))
-    }
+function DayWeather({ weather, loading, isFahrenheit, placeName }: { weather: WeatherResult | null; loading: boolean; isFahrenheit: boolean; placeName: string | null }) {
+  const { t } = useTranslation()
+  if (loading) {
+    return (
+      <div role="status" aria-label={t('common.loading')} className="flex justify-center py-3">
+        <span className="h-[18px] w-[18px] animate-spin rounded-full border-2 border-edge border-t-content" />
+      </div>
+    )
   }
+  if (!weather) return <p className="m-0 py-1 text-center text-content-faint" style={fs(12, 'body')}>{t('day.noWeather')}</p>
 
+  const unit = isFahrenheit ? '°F' : '°C'
+  const hours = (weather.hourly || []).filter((_, i) => i % 2 === 0)
   return (
-    <>
-            {/* Hotel Picker Popup — portal to body to escape transform stacking context */}
-            {showHotelPicker && createPortal(
-              // Click screen and the card that stops the click from reaching it:
-              // neither is a control, and the popup has its own X and Cancel
-              // buttons, so both stay presentational.
-              <div role="presentation" style={{ position: 'fixed', inset: 0, zIndex: 99999, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-                onClick={() => setShowHotelPicker(false)}>
-                <div role="presentation" onClick={e => e.stopPropagation()} style={{
-                  width: '100%', maxWidth: 900, borderRadius: 16, overflow: 'hidden',
-                  background: 'var(--bg-card)', boxShadow: '0 20px 60px rgba(0,0,0,0.2)',
-                  ...font,
-                }}>
-                  {/* Popup Header */}
-                  <div style={{ padding: '16px 18px 12px', borderBottom: '1px solid var(--border-faint)', display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <Hotel size={16} style={{ color: 'var(--text-primary)' }} />
-                    <span style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', flex: 1 }}>{showHotelPicker === 'edit' ? t('day.editAccommodation') : t('day.addAccommodation')}</span>
-                    <button type="button" onClick={() => setShowHotelPicker(false)} style={{ background: 'var(--bg-secondary)', border: 'none', borderRadius: 8, width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
-                      <X size={12} style={{ color: 'var(--text-muted)' }} />
-                    </button>
-                  </div>
+    <section className="flex flex-col gap-2.5">
+      {/* Which place the forecast is for — on a roadtrip "the day's weather"
+          is ambiguous without it (#2167). */}
+      {placeName && <Eyebrow>{t('day.weatherFor', { name: placeName })}</Eyebrow>}
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+        <span className="grid h-10 w-10 flex-none place-items-center rounded-[12px] bg-surface-card text-content shadow-sm">
+          <WIcon main={weather.main} size={20} />
+        </span>
+        <div className="flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span className="font-bold leading-none tabular-nums tracking-[-0.01em] text-content" style={fs(22, 'subtitle')}>
+            {weather.type === 'climate' ? 'Ø ' : ''}{cTemp(weather.temp, isFahrenheit)}{unit}
+          </span>
+          {weather.temp_max != null && (
+            <span className="tabular-nums text-content-faint" style={fs(12, 'body')}>
+              {cTemp(weather.temp_min, isFahrenheit)}° / {cTemp(weather.temp_max, isFahrenheit)}°
+            </span>
+          )}
+          {weather.description && <span className="capitalize text-content-muted" style={fs(12.5, 'body')}>{weather.description}</span>}
+        </div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {weather.precipitation_probability_max != null && (
+            <WeatherChip icon={Droplets} label={t('day.precipProb')} value={`${weather.precipitation_probability_max}%`} />
+          )}
+          {(weather.precipitation_sum ?? 0) > 0 && (
+            <WeatherChip icon={CloudRain} label={t('day.precipitation')} value={`${(weather.precipitation_sum ?? 0).toFixed(1)} mm`} />
+          )}
+          {weather.wind_max != null && (
+            <WeatherChip icon={Wind} label={t('day.wind')} value={isFahrenheit ? `${Math.round(weather.wind_max * 0.621371)} mph` : `${Math.round(weather.wind_max)} km/h`} />
+          )}
+          {weather.sunrise && <WeatherChip icon={Sunrise} label={t('day.sunrise')} value={weather.sunrise} />}
+          {weather.sunset && <WeatherChip icon={Sunset} label={t('day.sunset')} value={weather.sunset} />}
+        </div>
+      </div>
 
-                  {/* Day Range */}
-                  <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border-faint)', background: 'var(--bg-secondary)' }}>
-                    <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.04em' }}>{t('day.hotelDayRange')}</div>
-                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <CustomSelect
-                          value={hotelDayRange.start}
-                          onChange={v => setHotelDayRange(prev => ({ start: v, end: days.findIndex(d => d.id === v) > days.findIndex(d => d.id === prev.end) ? v : prev.end }))}
-                          options={days.map((d, i) => ({
-                            value: d.id,
-                            label: d.title || t('planner.dayN', { n: i + 1 }),
-                            badge: d.date
-                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
-                          }))}
-                          size="sm"
-                        />
-                      </div>
-                      <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', flexShrink: 0 }}>→</span>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <CustomSelect
-                          value={hotelDayRange.end}
-                          onChange={v => setHotelDayRange(prev => ({ start: days.findIndex(d => d.id === v) < days.findIndex(d => d.id === prev.start) ? v : prev.start, end: v }))}
-                          options={days.map((d, i) => ({
-                            value: d.id,
-                            label: d.title || t('planner.dayN', { n: i + 1 }),
-                            badge: d.date
-                              ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
-                              : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
-                          }))}
-                          size="sm"
-                        />
-                      </div>
-                      <button type="button" onClick={() => setHotelDayRange({ start: days[0]?.id, end: days[days.length - 1]?.id })} style={{
-                        padding: '6px 14px', borderRadius: 8, border: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer', flexShrink: 0,
-                        background: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--text-primary)' : 'var(--bg-card)',
-                        color: hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id ? 'var(--bg-card)' : 'var(--text-muted)',
-                      }}>
-                        {t('day.allDays')}
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Check-in / Check-out / Confirmation */}
-                  <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-                    <div style={{ flex: 1, minWidth: 80 }}>
-                      <label style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkIn')}</label>
-                      <CustomTimePicker value={hotelForm.check_in} onChange={v => setHotelForm(f => ({ ...f, check_in: v }))} placeholder="14:00" />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 80 }}>
-                      <label style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkInUntil')}</label>
-                      <CustomTimePicker value={hotelForm.check_in_end} onChange={v => setHotelForm(f => ({ ...f, check_in_end: v }))} placeholder="22:00" />
-                    </div>
-                    <div style={{ flex: 1, minWidth: 80 }}>
-                      <label style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.checkOut')}</label>
-                      <CustomTimePicker value={hotelForm.check_out} onChange={v => setHotelForm(f => ({ ...f, check_out: v }))} placeholder="11:00" />
-                    </div>
-                    <div style={{ flex: 2, minWidth: 120 }}>
-                      <label style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.04em', display: 'block', marginBottom: 3 }}>{t('day.confirmation')}</label>
-                      <BookingCodeInput value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
-                        placeholder="ABC-12345" style={{ width: '100%', padding: '8px 10px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'inherit', boxSizing: 'border-box', height: 38 }} />
-                    </div>
-                  </div>
-
-                  {/* Category Filter */}
-                  {categories.length > 0 && (
-                    <div style={{ padding: '8px 18px', borderBottom: '1px solid var(--border-faint)', display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-                      <button type="button" onClick={() => setHotelCategoryFilter('')} style={{
-                        padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer',
-                        background: !hotelCategoryFilter ? 'var(--text-primary)' : 'var(--bg-secondary)',
-                        color: !hotelCategoryFilter ? 'var(--bg-card)' : 'var(--text-muted)',
-                      }}>{t('day.allDays')}</button>
-
-                      {categories.map(c => (
-                        <button type="button" key={c.id} onClick={() => setHotelCategoryFilter(c.id)} style={{
-                          padding: '3px 10px', borderRadius: 6, border: 'none', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer',
-                          background: hotelCategoryFilter === c.id ? c.color || 'var(--text-primary)' : 'var(--bg-secondary)',
-                          color: hotelCategoryFilter === c.id ? '#fff' : 'var(--text-muted)',
-                        }}>{c.name}</button>
-                      ))}
-                    </div>
+      {hours.length > 0 && (
+        <div className="min-w-0">
+          <Eyebrow className="mb-[3px]">{t('day.hourlyForecast')}</Eyebrow>
+          <div className={`${BOX} overflow-x-auto p-1`}>
+            <div className="inline-flex gap-0.5">
+              {hours.map(h => (
+                <div key={h.hour} className={`flex w-11 flex-none flex-col items-center gap-[3px] rounded-[8px] px-0.5 py-[5px] text-content ${h.precipitation_probability > 50 ? 'bg-info-soft' : ''}`}>
+                  <span className="font-geist font-medium tabular-nums text-content-faint" style={fs(9)}>{String(h.hour).padStart(2, '0')}</span>
+                  <WIcon main={h.main} size={12} />
+                  <span className="font-semibold tabular-nums text-content" style={fs(10.5)}>{cTemp(h.temp, isFahrenheit)}°</span>
+                  {h.precipitation_probability > 0 && (
+                    <span className="font-medium tabular-nums text-info" style={fs(8.5)}>{h.precipitation_probability}%</span>
                   )}
-
-                  {/* Place List */}
-                  <div style={{ maxHeight: 250, overflowY: 'auto' }}>
-                    {(() => {
-                      const offered = stayPlaces<Place>(places, hotelForm.place_id)
-                      const filtered = hotelCategoryFilter ? offered.filter(p => p.category_id === hotelCategoryFilter) : offered
-                      return filtered.length === 0 ? (
-                        <div style={{ padding: 20, textAlign: 'center', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)' }}>{t('day.noPlacesForHotel')}</div>
-                      ) : filtered.map(p => (
-                      <button type="button" key={p.id} onClick={() => handleSelectPlace(p.id)} style={{
-                        display: 'flex', alignItems: 'center', gap: 10, width: '100%', padding: '10px 18px',
-                        border: 'none', borderBottom: '1px solid var(--border-faint)',
-                        background: hotelForm.place_id === p.id ? 'var(--bg-hover)' : 'none',
-                        cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
-                        transition: 'background 0.1s',
-                        outline: hotelForm.place_id === p.id ? '2px solid var(--accent)' : 'none',
-                        outlineOffset: -2, borderRadius: hotelForm.place_id === p.id ? 8 : 0,
-                      }}
-                        onMouseEnter={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                        onMouseLeave={e => { if (hotelForm.place_id !== p.id) e.currentTarget.style.background = 'none' }}
-                      >
-                        <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--bg-secondary)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-                          {p.image_url ? (
-                            <img src={p.image_url} alt="" style={{ width: '100%', height: '100%', borderRadius: 8, objectFit: 'cover' }} />
-                          ) : (
-                            <MapPin size={13} style={{ color: 'var(--text-faint)' }} />
-                          )}
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
-                          {p.address && <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.address}</div>}
-                        </div>
-                      </button>
-                    ))
-                    })()}
-                  </div>
-
-                {/* Save / Cancel */}
-                <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border-faint)', display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-                  <button type="button" onClick={() => setShowHotelPicker(false)} style={{ padding: '7px 16px', borderRadius: 8, border: '1px solid var(--border-primary)', background: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
-                    {t('common.cancel')}
-                  </button>
-                  <button type="button" onClick={() => { void saveHotelPicker() }} disabled={!hotelForm.place_id} style={{
-                    padding: '7px 20px', borderRadius: 8, border: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-                    background: hotelForm.place_id ? 'var(--text-primary)' : 'var(--bg-tertiary)',
-                    color: hotelForm.place_id ? 'var(--bg-card)' : 'var(--text-faint)',
-                  }}>
-                    {t('common.save')}
-                  </button>
                 </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
 
-                </div>
-              </div>,
-              document.body
-            )}
-    </>
+      {weather.type === 'climate' && <p className="m-0 italic text-content-faint" style={fs(10.5)}>{t('day.climateHint')}</p>}
+    </section>
+  )
+}
+
+/** A row or box that opens a booking: the hover lift and focus ring of the inspector's booking cards. */
+const OPENS_BOOKING = 'w-full cursor-pointer text-left transition-shadow hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[color:var(--text-primary)]'
+
+/** The bookings of the day, hotels aside (they have their own block). With `onOpen` each row opens its booking. */
+function DayReservations({ day, assignments, reservations, is12h, onOpen }: { day: Day; assignments: AssignmentsMap; reservations: Reservation[]; is12h: boolean; onOpen?: (r: Reservation) => void }) {
+  const { t } = useTranslation()
+  const dayAssignments = assignments[String(day.id)] || []
+  const dayReservations = reservations.filter(r => {
+    if (r.type === 'hotel') return false
+    if (r.assignment_id && dayAssignments.some(a => a.id === r.assignment_id)) return true
+    return r.day_id === day.id
+  })
+  if (dayReservations.length === 0) return null
+  return (
+    <DialogSection label={t('day.reservations')}>
+      <ul className="m-0 flex list-none flex-col gap-1.5 p-0">
+        {dayReservations.map(r => {
+          const linkedAssignment = dayAssignments.find(a => a.id === r.assignment_id)
+          const tone = toneOf(r)
+          const status = tone === 'transit' ? null : tone === 'confirmed' ? t('reservations.confirmed') : t('reservations.pending')
+          const { time: startTime } = splitReservationDateTime(r.reservation_time)
+          const { time: endTime } = splitReservationDateTime(r.reservation_end_time)
+          const row = 'flex min-w-0 items-center gap-2.5 rounded-[10px] border border-edge-faint px-2 py-1.5'
+          const content = (
+            <>
+              <TypeTile type={r.type} size={26} />
+              <span className="flex min-w-0 flex-1 items-baseline gap-2">
+                <span className="truncate font-semibold text-content" style={fs(12.5, 'body')}>{r.title}</span>
+                {linkedAssignment?.place && <span className="truncate text-content-faint" style={fs(11)}>{linkedAssignment.place.name}</span>}
+              </span>
+              {(startTime || endTime) && (
+                <TimePill>
+                  {startTime ? formatClockTime(startTime, is12h) : ''}
+                  {endTime ? ` – ${formatClockTime(endTime, is12h)}` : ''}
+                </TimePill>
+              )}
+              {status && (
+                <Tooltip label={status}>
+                  <span role="img" aria-label={status} className="mx-1 h-2 w-2 flex-none rounded-full" style={{ background: toneColor(tone) }} />
+                </Tooltip>
+              )}
+            </>
+          )
+          if (!onOpen) return <li key={r.id} className={row} style={{ background: toneTint(tone) }}>{content}</li>
+          return (
+            <li key={r.id}>
+              <button type="button" onClick={() => onOpen(r)} className={`${row} ${OPENS_BOOKING}`} style={{ background: toneTint(tone) }}>{content}</button>
+            </li>
+          )
+        })}
+      </ul>
+    </DialogSection>
+  )
+}
+
+function AccommodationCard({ acc, day, linked, canEdit, onEdit, onRemove, onOpenBooking }: {
+  acc: Accommodation
+  day: Day
+  linked: Reservation | undefined
+  canEdit: boolean
+  onEdit: () => void
+  onRemove: () => void
+  /** Given, the stay's booking box opens that booking. */
+  onOpenBooking?: (reservation: Reservation) => void
+}) {
+  const { t, locale } = useTranslation()
+  const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
+  const fmtTime = (v: string) => {
+    if (v.includes('T')) return new Date(v).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: is12h })
+    return formatClockTime(v, is12h)
+  }
+  const isCheckInDay = acc.start_day_id === day.id
+  const isCheckOutDay = acc.end_day_id === day.id
+  const dayLabel = isCheckInDay && isCheckOutDay ? t('day.checkIn') + ' & ' + t('day.checkOut')
+    : isCheckInDay ? t('day.checkIn')
+    : isCheckOutDay ? t('day.checkOut')
+    : null
+  const leaving = isCheckOutDay && !isCheckInDay
+  const tint = isCheckInDay ? tintOf('var(--success)') : isCheckOutDay ? tintOf('var(--danger)') : NEUTRAL_TINT
+  const cells: { label: string; value: ReactNode }[] = []
+  if (acc.check_in) cells.push({ label: t('day.checkIn'), value: `${fmtTime(acc.check_in)}${acc.check_in_end ? ` – ${fmtTime(acc.check_in_end)}` : ''}` })
+  if (acc.check_out) cells.push({ label: t('day.checkOut'), value: fmtTime(acc.check_out) })
+  if (acc.confirmation) cells.push({ label: t('day.confirmation'), value: <BlurredCode className="font-geist">{acc.confirmation}</BlurredCode> })
+  const confirmed = linked?.status === 'confirmed'
+
+  return (
+    <article className="group overflow-hidden rounded-2xl border border-edge-faint bg-surface-secondary">
+      <div className="flex items-center gap-2.5 px-3 py-2" style={{ background: tint }}>
+        <span className="grid h-9 w-9 flex-none place-items-center overflow-hidden rounded-[10px] bg-surface-card text-content-muted shadow-sm">
+          {acc.place_image
+            ? <img src={acc.place_image} alt="" className="h-full w-full object-cover" />
+            : <Hotel size={16} strokeWidth={1.9} />}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="truncate font-bold text-content" style={fs(13.5, 'body')}>{acc.place_name}</div>
+          {acc.place_address && <div className="truncate text-content-faint" style={fs(11)}>{acc.place_address}</div>}
+        </div>
+        {dayLabel && (
+          <SoftPill tone={leaving ? 'danger' : 'success'} caps
+            icon={leaving ? <LogOut size={10} strokeWidth={2.2} /> : <LogIn size={10} strokeWidth={2.2} />}>
+            {dayLabel}
+          </SoftPill>
+        )}
+        {canEdit && <RoundAction label={t('day.editAccommodation')} onClick={onEdit}><Pencil size={12} strokeWidth={2} /></RoundAction>}
+        {canEdit && <RoundAction label={t('inspector.remove')} onClick={onRemove} danger><X size={13} strokeWidth={2.2} /></RoundAction>}
+      </div>
+      {(cells.length > 0 || linked) && (
+        <div className="flex flex-col gap-2 border-t border-edge-faint px-3 pb-3 pt-2.5">
+          {cells.length > 0 && (
+            <div className="flex gap-2">
+              {cells.map(c => <Field key={c.label} label={c.label} className="flex-1" tabular>{c.value}</Field>)}
+            </div>
+          )}
+          {linked && (
+            <div className="min-w-0">
+              <Eyebrow className="mb-[3px]">{t('places.formReservation')}</Eyebrow>
+              {(() => {
+                const box = `${BOX} flex min-w-0 items-center gap-2 px-2.5 py-1.5`
+                // A box that opens the booking is a button itself, so the code in it is
+                // no second button and stays out of the button's name; the booking it
+                // opens shows the code and reveals it.
+                const content = (
+                  <>
+                    <span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(12, 'body')}>{linked.title}</span>
+                    <SoftPill tone={confirmed ? 'success' : 'warning'}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</SoftPill>
+                    {linked.confirmation_number && (
+                      <span aria-hidden={onOpenBooking ? true : undefined} className="flex-none font-geist tabular-nums text-content-muted" style={fs(11)}>
+                        <BlurredCode interactive={!onOpenBooking}>#{linked.confirmation_number}</BlurredCode>
+                      </span>
+                    )}
+                  </>
+                )
+                if (!onOpenBooking) return <div className={box}>{content}</div>
+                return (
+                  <button type="button" data-no-press onClick={() => onOpenBooking(linked)} className={`${box} ${OPENS_BOOKING}`}>
+                    {content}
+                  </button>
+                )
+              })()}
+            </div>
+          )}
+        </div>
+      )}
+    </article>
+  )
+}
+
+interface HotelPickerModalProps {
+  mode: HotelPickerMode
+  onClose: () => void
+  onSave: () => void
+  days: Day[]
+  categories: Category[]
+  places: Place[]
+  hotelDayRange: HotelDayRange
+  setHotelDayRange: React.Dispatch<React.SetStateAction<HotelDayRange>>
+  hotelForm: HotelForm
+  setHotelForm: React.Dispatch<React.SetStateAction<HotelForm>>
+  hotelCategoryFilter: number | ''
+  setHotelCategoryFilter: (id: number | '') => void
+  onSelectPlace: (placeId: number) => void
+}
+
+/** The stay editor: which days, the times, the code, and the place to sleep at. */
+function HotelPickerModal({ mode, onClose, onSave, days, categories, places, hotelDayRange, setHotelDayRange,
+  hotelForm, setHotelForm, hotelCategoryFilter, setHotelCategoryFilter, onSelectPlace }: HotelPickerModalProps) {
+  const { t, locale } = useTranslation()
+  const titleId = useId()
+  const codeId = useId()
+  const startId = useId()
+  const endId = useId()
+  if (!mode) return null
+
+  const dayLabel = (d: Day, i: number) => d.title || t('planner.dayN', { n: i + 1 })
+  const dayOptions = days.map((d, i) => ({
+    value: d.id,
+    label: dayLabel(d, i),
+    badge: d.date
+      ? new Date(d.date + 'T00:00:00Z').toLocaleDateString(locale, { day: 'numeric', month: 'short', timeZone: 'UTC' })
+      : (d.title ? t('planner.dayN', { n: i + 1 }) : undefined),
+  }))
+  const position = (id: number | undefined) => days.findIndex(d => d.id === id)
+  const allDays = hotelDayRange.start === days[0]?.id && hotelDayRange.end === days[days.length - 1]?.id
+  const offered = stayPlaces<Place>(places, hotelForm.place_id)
+  const filtered = hotelCategoryFilter ? offered.filter(p => p.category_id === hotelCategoryFilter) : offered
+  const setTime = (field: 'check_in' | 'check_in_end' | 'check_out') => (v: string) => setHotelForm(f => ({ ...f, [field]: v }))
+  const picked = places.find(p => p.id === hotelForm.place_id) ?? null
+  const startAt = position(hotelDayRange.start)
+  const endAt = position(hotelDayRange.end)
+  const nights = startAt >= 0 && endAt > startAt ? endAt - startAt : 0
+  const categoryOptions = [
+    { value: '', label: t('places.allCategories') },
+    ...categories.map(c => ({
+      value: String(c.id),
+      label: c.name,
+      icon: <span className="h-2 w-2 flex-none rounded-full" style={{ background: c.color || 'var(--text-faint)' }} />,
+    })),
+  ]
+
+  return (
+    <DialogShell onClose={onClose} labelledBy={titleId} width="wide"
+      header={(
+        <DialogHeader
+          tile={<TypeTile type="hotel" size={46} raised />}
+          tint={tintOf(typeInfo('hotel').color, 11)}
+          labelId={titleId}
+          onClose={onClose}
+          eyebrow={mode === 'edit' ? t('day.editAccommodation') : t('day.addAccommodation')}
+          // The stay is named by where it sleeps; until one is picked the title asks for it.
+          title={picked ? picked.name : <span className="text-content-faint">{t('reservations.meta.pickHotel')}</span>}
+          sub={picked?.address || undefined}
+          pills={startAt >= 0 ? (
+            <>
+              <span className={PILL}>
+                <Calendar size={13} strokeWidth={2.2} className="text-content-faint" />
+                {dayLabel(days[startAt], startAt)}
+                {endAt > startAt && <><ArrowRight size={12} strokeWidth={2.2} className="text-content-faint" />{dayLabel(days[endAt], endAt)}</>}
+              </span>
+              {/* The moon says "nights"; the word stays in the tooltip, since "5 Nights" has no plural rule behind it. */}
+              {nights > 0 && (
+                <Tooltip label={`${t('reservations.nights')}: ${nights}`}>
+                  <span className={PILL} aria-label={`${t('reservations.nights')}: ${nights}`} role="img">
+                    <Moon size={13} strokeWidth={2.2} className="text-content-faint" />
+                    <span className="tabular-nums">{nights}</span>
+                  </span>
+                </Tooltip>
+              )}
+            </>
+          ) : undefined}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={onSave} disabled={!hotelForm.place_id}>{t('common.save')}</DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <DialogSection label={t('day.hotelDayRange')}>
+        <div className={PANEL}>
+          <div className="grid grid-cols-[1fr_auto_1fr_auto] items-end gap-2 max-sm:grid-cols-1">
+            <EditorField label={t('reservations.start')} htmlFor={startId}>
+              <CustomSelect
+                id={startId}
+                value={hotelDayRange.start ?? ''}
+                onChange={v => { const id = Number(v); setHotelDayRange(prev => ({ start: id, end: position(id) > position(prev.end) ? id : prev.end })) }}
+                options={dayOptions}
+                size="sm"
+              />
+            </EditorField>
+            <ArrowRight size={14} strokeWidth={2} className="mb-3 flex-none text-content-faint max-sm:hidden" aria-hidden />
+            <EditorField label={t('reservations.end')} htmlFor={endId}>
+              <CustomSelect
+                id={endId}
+                value={hotelDayRange.end ?? ''}
+                onChange={v => { const id = Number(v); setHotelDayRange(prev => ({ start: position(id) < position(prev.start) ? id : prev.start, end: id })) }}
+                options={dayOptions}
+                size="sm"
+              />
+            </EditorField>
+            <DialogButton aria-pressed={allDays} active={allDays}
+              onClick={() => setHotelDayRange({ start: days[0]?.id, end: days[days.length - 1]?.id })}>
+              {t('day.allDays')}
+            </DialogButton>
+          </div>
+          <div className="grid grid-cols-3 items-start gap-3 max-sm:grid-cols-1">
+            <EditorField label={t('day.checkIn')}>
+              <CustomTimePicker value={hotelForm.check_in} onChange={setTime('check_in')} placeholder="14:00" aria-label={t('day.checkIn')} />
+            </EditorField>
+            <EditorField label={t('day.checkInUntil')}>
+              <CustomTimePicker value={hotelForm.check_in_end} onChange={setTime('check_in_end')} placeholder="22:00" aria-label={t('day.checkInUntil')} />
+            </EditorField>
+            <EditorField label={t('day.checkOut')}>
+              <CustomTimePicker value={hotelForm.check_out} onChange={setTime('check_out')} placeholder="11:00" aria-label={t('day.checkOut')} />
+            </EditorField>
+          </div>
+          <EditorField label={t('day.confirmation')} htmlFor={codeId}>
+            <BookingCodeInput id={codeId} value={hotelForm.confirmation} onChange={e => setHotelForm(f => ({ ...f, confirmation: e.target.value }))}
+              placeholder="ABC-12345" className={INPUT} />
+          </EditorField>
+        </div>
+      </DialogSection>
+
+      <DialogSection label={t('reservations.meta.pickHotel')}
+        action={categories.length > 0 ? (
+          <PillSelect<string>
+            value={hotelCategoryFilter ? String(hotelCategoryFilter) : ''}
+            options={categoryOptions}
+            onChange={v => setHotelCategoryFilter(v ? Number(v) : '')}
+            label={t('places.formCategory')}
+            quiet
+          />
+        ) : undefined}>
+        {filtered.length === 0 ? (
+          <p className="m-0 rounded-[14px] border border-dashed border-edge px-4 py-6 text-center text-content-faint" style={fs(12, 'body')}>{t('day.noPlacesForHotel')}</p>
+        ) : (
+          <div className="flex max-h-[300px] flex-col gap-1 overflow-y-auto rounded-[14px] border border-edge-faint bg-surface-secondary p-1.5">
+            {filtered.map(p => {
+              const on = hotelForm.place_id === p.id
+              const cat = categories.find(c => c.id === p.category_id)
+              return (
+                <button type="button" key={p.id} aria-pressed={on} onClick={() => onSelectPlace(p.id)}
+                  className={`flex w-full flex-none items-center gap-3 rounded-[11px] px-2.5 py-2 text-left transition-colors ${on ? 'bg-surface-card shadow-sm ring-2 ring-accent' : 'hover:bg-surface-card'}`}>
+                  {p.image_url ? (
+                    <img src={p.image_url} alt="" className="h-10 w-10 flex-none rounded-[10px] bg-surface-tertiary object-cover" />
+                  ) : (
+                    <span className="grid h-10 w-10 flex-none place-items-center rounded-[10px]"
+                      style={{ background: cat?.color ? tintOf(cat.color, 14) : 'var(--bg-tertiary)' }}>
+                      <MapPin size={15} strokeWidth={2} style={{ color: cat?.color || 'var(--text-faint)' }} />
+                    </span>
+                  )}
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-semibold text-content" style={fs(13, 'body')}>{p.name}</span>
+                    {p.address && <span className="block truncate text-content-faint" style={fs(11)}>{p.address}</span>}
+                  </span>
+                  <span className={`grid h-6 w-6 flex-none place-items-center rounded-full transition-colors ${on ? 'bg-accent text-accent-text' : 'text-transparent ring-1 ring-edge'}`}>
+                    <Check size={13} strokeWidth={2.6} aria-hidden />
+                  </span>
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </DialogSection>
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx
index f5e692a95..8384d391c 100644
--- a/client/src/components/Planner/DayPlanSidebar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-DAYPLAN-001 to FE-PLANNER-DAYPLAN-155
+// FE-PLANNER-DAYPLAN-001 to FE-PLANNER-DAYPLAN-231
 import { render, screen, waitFor, fireEvent, within } from '../../../tests/helpers/render'
 import userEvent from '@testing-library/user-event'
 import { http, HttpResponse } from 'msw'
@@ -164,12 +164,23 @@ function dragRow(el: HTMLElement | null) {
 }
 
 /** Transport and note rows share the same card margin; legs are not draggable. */
+/** The day head's "+" opens a menu of what the day can be given; this picks one entry. */
+async function pickDayAdd(user: ReturnType<typeof userEvent.setup>, entry: string, dayTitle = 'Day 1') {
+  await user.click(within(dayHeader(dayTitle)).getByRole('button', { name: 'Add to day' }))
+  await user.click(await screen.findByRole('button', { name: entry }))
+}
+
+/** The day head's expand/collapse chevron. */
+function dayChevron(dayTitle = 'Day 1') {
+  return within(dayHeader(dayTitle)).getByRole('button', { name: /^(Collapse|Expand)$/ })
+}
+
 function cardRow(el: HTMLElement | null) {
-  return el!.closest('[style*="margin: 1px 8px"]') as HTMLElement
+  return el!.closest('[data-dp="transport-row"], [data-dp="note-row"]') as HTMLElement
 }
 
 function lockToggle(row: HTMLElement) {
-  return row.querySelector('[style*="cursor: pointer"][style*="position: relative"]') as HTMLElement
+  return row.querySelector('[data-dp="lock"]') as HTMLElement
 }
 
 /** The context menu is portalled to body and shares labels with the route tools. */
@@ -374,11 +385,7 @@ describe('DayPlanSidebar', () => {
     const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
     const assignments = { '10': [assignment] }
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
-    // The chevron button immediately follows the "Add Note" button (which has a title attribute)
-    const addNoteBtn = screen.getByLabelText('Add Note')
-    const chevron = addNoteBtn.nextElementSibling as HTMLButtonElement
-    expect(chevron).toBeTruthy()
-    await user.click(chevron)
+    await user.click(dayChevron())
     expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
   })
 
@@ -389,7 +396,7 @@ describe('DayPlanSidebar', () => {
     const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
     const assignments = { '10': [assignment] }
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments })} />)
-    const getChevron = () => screen.getByLabelText('Add Note').nextElementSibling as HTMLButtonElement
+    const getChevron = () => dayChevron()
     await user.click(getChevron()) // collapse
     expect(screen.queryByText('Eiffel Tower')).not.toBeInTheDocument()
     await user.click(getChevron()) // re-expand
@@ -477,7 +484,7 @@ describe('DayPlanSidebar', () => {
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const onPlanTransit = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onPlanTransit })} />)
-    await user.click(screen.getByLabelText('Public transit'))
+    await pickDayAdd(user, 'Public transit')
     expect(onPlanTransit).toHaveBeenCalledWith(10)
   })
 
@@ -555,7 +562,7 @@ describe('DayPlanSidebar', () => {
     expect(screen.getByText(/Platform 2/)).toBeInTheDocument()
     // The day's own chevron carries the same accessible name, so pick the one
     // that is not in the day's action block.
-    const rowCollapse = screen.getAllByLabelText('Collapse').find(el => !el.closest('.dp-day-actions'))!
+    const rowCollapse = screen.getAllByLabelText('Collapse').find(el => !el.closest('.dp-day-tools'))!
     await user.click(rowCollapse)
     expect(screen.queryByText('Alexanderplatz')).not.toBeInTheDocument()
   })
@@ -912,7 +919,7 @@ describe('DayPlanSidebar', () => {
       days: [day], places: [place1, place2], assignments: assigns, selectedDayId: 10,
     })} />)
     // The ExternalLink button is the Google Maps icon-only button (sibling of Optimize button)
-    const routeSection = document.querySelector('[style*="flex-direction: column"]')
+    const routeSection = document.querySelector('[data-dp="route-tools"]')
     const externalLinkBtn = screen.getAllByRole('button').find(btn => {
       const parent = btn.closest('[style*="flex"]')
       return btn.querySelector('svg') && !btn.textContent?.trim() && parent?.textContent?.includes('optimize')
@@ -1062,14 +1069,13 @@ describe('DayPlanSidebar', () => {
     // Click on the PlaceAvatar wrapper (the lock toggle div) — it's a div with cursor: pointer that wraps the avatar
     const placeEl = screen.getByText('Arc de Triomphe')
     // The lock div is the parent of PlaceAvatar, which is a sibling of the GripVertical div
-    const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
-    const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
+    const row = placeEl.closest('.dp-row')
+    const lockDiv = row?.querySelector('[data-dp="lock"]')
     if (lockDiv) {
       await user.click(lockDiv as HTMLElement)
-      // After lock: the row should have red border
+      // After lock: the row takes the danger tint
       await waitFor(() => {
-        const rowEl = placeEl.closest('[style*="border-left"]')
-        expect(rowEl).toBeTruthy()
+        expect((placeEl.closest('.dp-row') as HTMLElement).style.background).toContain('--danger')
       })
     }
   })
@@ -1286,8 +1292,7 @@ describe('DayPlanSidebar', () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
-    const addNoteBtn = screen.getByLabelText('Add Note')
-    await user.click(addNoteBtn)
+    await pickDayAdd(user, 'Add Note')
     expect(mockDayNotesState.openAddNote).toHaveBeenCalled()
   })
 
@@ -1461,8 +1466,10 @@ describe('DayPlanSidebar', () => {
     expect(document.querySelector('.note-edit-buttons')).toBeNull()
     expect(row.querySelectorAll('[style*="position: absolute"]')).toHaveLength(0)
     expect(row.querySelectorAll('.reorder-buttons button')).toHaveLength(2)
-    // Positional, not just by class: the reorder column owns the row's right edge.
-    expect(row.lastElementChild).toHaveClass('reorder-buttons')
+    // Positional, not just by class: the reorder column sits at the row's right edge,
+    // with only the row's "…" after it.
+    expect(row.lastElementChild).toHaveAccessibleName('More options')
+    expect(row.lastElementChild?.previousElementSibling).toHaveClass('reorder-buttons')
   })
 
   it('FE-PLANNER-DAYPLAN-064e: the keyboard reaches the note and opens it with Enter', () => {
@@ -1755,14 +1762,13 @@ describe('DayPlanSidebar', () => {
       days: [day], places: [place], assignments: { '10': [assignment] },
     })} />)
     const placeEl = screen.getByText('Hovered Place')
-    const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
-    const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
+    const row = placeEl.closest('.dp-row')
+    const lockDiv = row?.querySelector('[data-dp="lock"]')
     if (lockDiv) {
       fireEvent.mouseEnter(lockDiv as Element)
       // Lock overlay should appear
       await waitFor(() => {
-        const overlays = document.querySelectorAll('[style*="position: absolute"][style*="inset: 0"]')
-        expect(overlays.length).toBeGreaterThan(0)
+        expect((lockDiv as HTMLElement).querySelector('span.absolute')).toBeTruthy()
       })
     }
   })
@@ -1904,8 +1910,8 @@ describe('DayPlanSidebar', () => {
 
     // Lock the first assignment by clicking its lock area
     const placeEl = screen.getByText('Place Lock')
-    const row = placeEl.closest('[style*="display: flex"][style*="gap: 8"]')
-    const lockDiv = row?.querySelector('[style*="cursor: pointer"][style*="position: relative"]')
+    const row = placeEl.closest('.dp-row')
+    const lockDiv = row?.querySelector('[data-dp="lock"]')
     if (lockDiv) fireEvent.click(lockDiv as Element)
 
     const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
@@ -1989,7 +1995,7 @@ describe('DayPlanSidebar', () => {
 
     // The first note should have a down arrow (not at bottom)
     const noteEl = screen.getByText('Note One')
-    const noteCard = noteEl.closest('[style*="display: flex"][style*="gap: 8"]')
+    const noteCard = noteEl.closest('.dp-row')
     const buttons = noteCard?.querySelectorAll('.reorder-buttons button')
     if (buttons && buttons.length >= 2) {
       await user.click(buttons[1] as HTMLButtonElement) // down arrow
@@ -2030,8 +2036,7 @@ describe('DayPlanSidebar', () => {
     })} />)
 
     // The expanded content wrapper is the div with background: var(--bg-hover) paddingTop:6
-    const expandedArea = document.querySelector('[style*="padding-top: 6"]') ||
-      document.querySelector('[style*="paddingTop: 6"]')
+    const expandedArea = document.querySelector('[data-dp="day-body"]')
 
     if (expandedArea) {
       ;(window as any).__dragData = { placeId: '99' }
@@ -2117,7 +2122,7 @@ describe('DayPlanSidebar', () => {
 
     // Click down arrow on 'Early Place' (a1) — would move it after a2, breaking order
     const earlyEl = screen.getByText('Early Place')
-    const row = earlyEl.closest('[style*="display: flex"][style*="gap: 8"]')
+    const row = earlyEl.closest('.dp-row')
     const reorderBtns = row?.querySelectorAll('.reorder-buttons button')
     if (reorderBtns && reorderBtns.length >= 2) {
       await user.click(reorderBtns[1] as HTMLButtonElement) // down button
@@ -2852,7 +2857,7 @@ describe('DayPlanSidebar', () => {
     localStorage.setItem('day-expanded-1', JSON.stringify([]))
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
     expect(screen.queryByText('Hidden Place')).not.toBeInTheDocument()
-    await user.click(screen.getByLabelText('Add Note'))
+    await pickDayAdd(user, 'Add Note')
     expect(await screen.findByText('Hidden Place')).toBeInTheDocument()
   })
 
@@ -3057,10 +3062,10 @@ describe('DayPlanSidebar', () => {
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] }, pushUndo })} />)
     const row = dragRow(screen.getByText('Locked Place'))
     await user.click(lockToggle(row))
-    await waitFor(() => expect(row.style.borderLeftColor).toBe('rgb(220, 38, 38)'))
+    await waitFor(() => expect(row.style.background).toContain('--danger'))
     const undo = pushUndo.mock.calls[0][1] as () => void
     undo()
-    await waitFor(() => expect(dragRow(screen.getByText('Locked Place')).style.borderLeftColor).toBe('transparent'))
+    await waitFor(() => expect(dragRow(screen.getByText('Locked Place')).style.background).not.toContain('--danger'))
   })
 
   it('FE-PLANNER-DAYPLAN-129: optimising a day with fewer than three stops does nothing', async () => {
@@ -3119,7 +3124,7 @@ describe('DayPlanSidebar', () => {
     render(<DayPlanSidebar {...makeDefaultProps({
       days: [day], places: [place], assignments: { '10': [a] }, onAddTransport: vi.fn(), onPlanTransit: vi.fn(),
     })} />)
-    expect(screen.queryByLabelText('Add Note')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Add to day' })).not.toBeInTheDocument()
     expect(dragRow(screen.getByText('Read only place'))).toBeNull()
     expect(screen.getByText('A note')).toBeInTheDocument()
     // A viewer must not reach the edit modal they could never save (#2249).
@@ -3143,7 +3148,7 @@ describe('DayPlanSidebar', () => {
   // ── Drops onto the expanded day body ─────────────────────────────────────
 
   function expandedBody() {
-    return document.querySelector('[style*="padding-top: 6px"]') as HTMLElement
+    return document.querySelector('[data-dp="day-body"]') as HTMLElement
   }
 
   function dayWithBusAndPlaces() {
@@ -3214,7 +3219,7 @@ describe('DayPlanSidebar', () => {
     fireEvent.dragStart(cardRow(screen.getByText('Airport taxi')), { dataTransfer: emptyDataTransfer })
     fireEvent.dragOver(cardRow(screen.getByText('City bus')), { dataTransfer: emptyDataTransfer })
     // The second day's body is the one holding the bus row.
-    const bodies = document.querySelectorAll('[style*="padding-top: 6px"]')
+    const bodies = document.querySelectorAll('[data-dp="day-body"]')
     fireEvent.drop(bodies[1], { dataTransfer: { getData: vi.fn(() => '') } })
     expect(updateReservation).toHaveBeenCalledWith(1, 501, { day_id: 11, end_day_id: 11 })
   })
@@ -3233,7 +3238,7 @@ describe('DayPlanSidebar', () => {
     mockDayNotesState.dayNotes = { '10': [buildDayNote({ id: 70, day_id: 10, text: 'A note' })] }
     const taxi = buildReservation({ id: 501, type: 'taxi', title: 'Airport taxi', day_id: 10 })
     render(<DayPlanSidebar {...makeDefaultProps({ days, places: [place], assignments, reservations: [taxi] })} />)
-    const target = () => document.querySelectorAll('[style*="padding-top: 6px"]')[1]
+    const target = () => document.querySelectorAll('[data-dp="day-body"]')[1]
 
     fireEvent.dragStart(dragRow(screen.getByText('Place A')), { dataTransfer: emptyDataTransfer })
     fireEvent.drop(target(), { dataTransfer: { getData: vi.fn(() => '') } })
@@ -3295,7 +3300,7 @@ describe('DayPlanSidebar', () => {
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAssignToDay })} />)
     const placeholder = screen.getByText('No places planned for this day').parentElement as HTMLElement
     fireEvent.dragOver(placeholder, { dataTransfer: emptyDataTransfer })
-    expect(placeholder.className).toContain('bg-[rgba(17,24,39,0.05)]')
+    expect(placeholder.style.outline).toContain('dashed')
     fireEvent.drop(placeholder, { dataTransfer: { getData: (k: string) => (k === 'placeId' ? '88' : '') } })
     expect(onAssignToDay).toHaveBeenCalledWith(88, 10)
   })
@@ -3456,7 +3461,7 @@ describe('DayPlanSidebar', () => {
     it('FE-PLANNER-DAYPLAN-215: dropped on the day body, it lands between the stops its start falls between', () => {
       const moveAssignment = setup()
       fireEvent.dragStart(dragRow(screen.getByText('Travemuende Strand')), { dataTransfer: emptyDataTransfer })
-      fireEvent.drop(document.querySelectorAll('[style*="padding-top: 6px"]')[1], { dataTransfer: { getData: vi.fn(() => '') } })
+      fireEvent.drop(document.querySelectorAll('[data-dp="day-body"]')[1], { dataTransfer: { getData: vi.fn(() => '') } })
       // 10:00 sits between 09:00 (index 0) and 11:00, so index 1, not the end of the day.
       expect(moveAssignment).toHaveBeenCalledWith(1, 21, 10, 11, 1)
     })
@@ -3842,14 +3847,14 @@ describe('DayPlanSidebar', () => {
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], places: [place], assignments: { '10': [a] } })} />)
     const row = dragRow(screen.getByText('Pin me'))
     const toggle = lockToggle(row)
+    expect(toggle).toHaveAccessibleName('Keep position during route optimization')
     fireEvent.mouseEnter(toggle)
-    expect(screen.getByText('Keep position during route optimization')).toBeInTheDocument()
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Keep position during route optimization')
     await user.click(toggle)
-    expect(screen.getByText('Click to unlock')).toBeInTheDocument()
+    expect(toggle).toHaveAccessibleName('Click to unlock')
     await user.click(toggle)
-    await waitFor(() => expect(row.style.borderLeftColor).toBe('transparent'))
-    fireEvent.mouseLeave(toggle)
-    expect(screen.queryByText('Click to unlock')).not.toBeInTheDocument()
+    await waitFor(() => expect(row.style.background).not.toContain('--danger'))
+    expect(toggle).toHaveAccessibleName('Keep position during route optimization')
   })
 
   it('FE-PLANNER-DAYPLAN-167: the place context menu opens the website, maps and collection actions', async () => {
@@ -4259,7 +4264,7 @@ describe('DayPlanSidebar', () => {
     ]
     const onPlaceClick = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ days, accommodations, onPlaceClick })} />)
-    const badges = dayHeader('Day 2').querySelectorAll('.bg-surface-hover')
+    const badges = dayHeader('Day 2').querySelectorAll('[data-dp="day-pill"]')
     expect(badges[0].textContent).toBe('Check-out Hotel')
     expect(badges[1].textContent).toBe('Check-in Hotel')
     await user.click(badges[0])
@@ -4275,28 +4280,151 @@ describe('DayPlanSidebar', () => {
     ]
     const car = buildReservation({ id: 530, type: 'car', title: 'Renault Clio', day_id: 10, end_day_id: 12, location: 'Gare du Nord' })
     render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [car] })} />)
-    const badge = dayHeader('Day 2').querySelector('.bg-surface-hover') as HTMLElement
+    const badge = dayHeader('Day 2').querySelector('[data-dp="day-pill"]') as HTMLElement
     await user.click(badge)
     expect(await screen.findByText('Gare du Nord')).toBeInTheDocument()
   })
 
+  // ── The desktop plan's booking detail ──────────────────────────────────
+  // Given onOpenBooking (only the desktop plan passes it), a booking opens its detail
+  // first; the editor is behind that detail's Edit. Without it the tests above pin the
+  // old paths.
+
+  it('FE-PLANNER-DAYPLAN-226: with a detail to show, a transport row opens it instead of the editor', async () => {
+    const user = userEvent.setup()
+    const onEditTransport = vi.fn()
+    const onOpenBooking = vi.fn()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Travel Day' })
+    const flight = buildReservation({ id: 200, type: 'flight', title: 'Air France 123', reservation_time: '2025-06-01T08:00:00', day_id: 10 })
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [flight], onEditTransport, onOpenBooking })} />)
+
+    await user.click(screen.getByRole('button', { name: /Air France 123/ }))
+
+    expect(onOpenBooking).toHaveBeenCalledWith(flight)
+    expect(onEditTransport).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-227: a transit journey opens the same detail, not its journey view', async () => {
+    const user = userEvent.setup()
+    const onOpenTransit = vi.fn()
+    const onOpenBooking = vi.fn()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const journey = {
+      ...buildReservation({ id: 300, type: 'transit', title: 'Fernsehturm → Zoo', reservation_time: '2025-06-01T08:30:00', day_id: 10 }),
+      metadata: { transit: { provider: 'transitous', duration: 1800, transfers: 0, legs: [{ mode: 'SUBWAY', line: 'U2', duration: 1440, from: { name: 'Alexanderplatz' }, to: { name: 'Zoo' } }] } },
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [journey as unknown as Reservation], onOpenTransit, onOpenBooking })} />)
+
+    await user.click(screen.getByRole('button', { name: /Fernsehturm/ }))
+
+    expect(onOpenBooking).toHaveBeenCalledWith(expect.objectContaining({ id: 300 }))
+    expect(onOpenTransit).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-228: a viewer without day rights can still open a booking row, by click or by keyboard', async () => {
+    const user = userEvent.setup()
+    mockPermissions.canEdit = false
+    const onOpenBooking = vi.fn()
+    const onEditReservation = vi.fn()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const dinner = buildReservation({ id: 210, type: 'restaurant', title: 'Dinner at Kikunoi', reservation_time: '2025-06-01T19:00:00', day_id: 10 })
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [dinner], onEditReservation, onOpenBooking })} />)
+
+    const row = cardRow(screen.getByText('Dinner at Kikunoi'))
+    expect(row).toHaveAttribute('role', 'button')
+    expect(row.style.cursor).toBe('pointer')
+    await user.click(row)
+    expect(onOpenBooking).toHaveBeenCalledTimes(1)
+
+    row.focus()
+    await user.keyboard('{Enter}')
+    expect(onOpenBooking).toHaveBeenCalledTimes(2)
+    expect(onOpenBooking).toHaveBeenLastCalledWith(dinner)
+    expect(onEditReservation).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-229: without a detail to show, a viewer without day rights still gets nothing from a booking row', async () => {
+    const user = userEvent.setup()
+    mockPermissions.canEdit = false
+    const onEditReservation = vi.fn()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const dinner = buildReservation({ id: 211, type: 'restaurant', title: 'Dinner', reservation_time: '2025-06-01T19:00:00', day_id: 10 })
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day], reservations: [dinner], onEditReservation })} />)
+
+    const row = cardRow(screen.getByText('Dinner'))
+    expect(row.style.cursor).toBe('default')
+    await user.click(row)
+    expect(onEditReservation).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DAYPLAN-230: with a detail to show, an active rental badge opens it instead of the old transport view', async () => {
+    const user = userEvent.setup()
+    const days = [
+      buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }),
+      buildDay({ id: 11, date: '2025-06-02', title: 'Day 2' }),
+      buildDay({ id: 12, date: '2025-06-03', title: 'Day 3' }),
+    ]
+    const car = buildReservation({ id: 530, type: 'car', title: 'Renault Clio', day_id: 10, end_day_id: 12, location: 'Gare du Nord' })
+    const onOpenBooking = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({ days, reservations: [car], onOpenBooking })} />)
+
+    await user.click(within(dayHeader('Day 2')).getByRole('button', { name: 'Renault Clio' }))
+
+    expect(onOpenBooking).toHaveBeenCalledWith(car)
+    expect(screen.queryByText('Gare du Nord')).not.toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-231: the pencil on a booking pinned to a stop still goes straight to the editor', async () => {
+    const user = userEvent.setup()
+    const place = buildPlace({ id: 1, name: 'Geneva Airport' })
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assignment = buildAssignment({ id: 99, day_id: 10, order_index: 0, place })
+    const res = buildReservation({ id: 88, trip_id: 1, type: 'flight', status: 'pending', assignment_id: 99 } as Partial<Reservation>)
+    const onEditTransport = vi.fn()
+    const onOpenBooking = vi.fn()
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places: [place], assignments: { '10': [assignment] }, reservations: [res],
+      onEditTransport, onOpenBooking,
+    })} />)
+
+    await user.click(screen.getByRole('button', { name: 'Edit' }))
+
+    expect(onEditTransport).toHaveBeenCalledWith(res)
+    expect(onOpenBooking).not.toHaveBeenCalled()
+  })
+
   it('FE-PLANNER-DAYPLAN-178: the add-transport shortcut targets the day it sits on', async () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const onAddTransport = vi.fn()
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAddTransport })} />)
-    await user.click(screen.getByLabelText('Add transport'))
+    await pickDayAdd(user, 'Add transport')
     expect(onAddTransport).toHaveBeenCalledWith(10)
   })
 
+  it('FE-PLANNER-DAYPLAN-225: the day\'s "+" offers a stay, and only with the handler for it', async () => {
+    const user = userEvent.setup()
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const onAddAccommodation = vi.fn()
+    const { unmount } = render(<DayPlanSidebar {...makeDefaultProps({ days: [day], onAddAccommodation })} />)
+    await pickDayAdd(user, 'Add accommodation')
+    expect(onAddAccommodation).toHaveBeenCalledWith(expect.objectContaining({ id: 10 }))
+    unmount()
+
+    render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
+    await user.click(within(dayHeader('Day 1')).getByRole('button', { name: 'Add to day' }))
+    expect(screen.queryByRole('button', { name: 'Add accommodation' })).not.toBeInTheDocument()
+  })
+
   it('FE-PLANNER-DAYPLAN-179: hovering a day header tints it and clears the tint again', () => {
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     render(<DayPlanSidebar {...makeDefaultProps({ days: [day] })} />)
     const header = dayHeader('Day 1')
+    const rest = header.style.background
     fireEvent.mouseEnter(header)
-    expect(header.style.background).toBe('var(--bg-tertiary)')
+    expect(header.style.background).toBe('color-mix(in srgb, var(--accent) 10%, transparent)')
     fireEvent.mouseLeave(header)
-    expect(header.style.background).toBe('transparent')
+    expect(header.style.background).toBe(rest)
   })
 
   // ── Chronology guards ────────────────────────────────────────────────────
@@ -4467,7 +4595,7 @@ describe('DayPlanSidebar', () => {
       () => cardRow(screen.getByText('Source taxi')),
     ]
     const targets = [
-      () => document.querySelectorAll('[style*="padding-top: 6px"]')[1] as HTMLElement,
+      () => document.querySelectorAll('[data-dp="day-body"]')[1] as HTMLElement,
       () => endZones()[1] as HTMLElement,
       () => cardRow(screen.getByText('Target note')),
       () => dragRow(screen.getByText('Target place')),
@@ -4505,7 +4633,7 @@ describe('DayPlanSidebar', () => {
     fireEvent.mouseEnter(expand)
     fireEvent.mouseLeave(expand)
     await user.click(expand)
-    expect(screen.getAllByLabelText('Collapse').some(el => !el.closest('.dp-day-actions'))).toBe(true)
+    expect(screen.getAllByLabelText('Collapse').some(el => !el.closest('.dp-day-tools'))).toBe(true)
     await user.click(cardRow(screen.getByText('U2 to Zoo')))
     expect(await screen.findByText('Alexanderplatz')).toBeInTheDocument()
   })
diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index 110d1f9b2..f1e322be6 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -7,7 +7,7 @@ declare global { interface Window { __dragData: DragDataPayload | null } }
 import React, { useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback } from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
 import { safeHttpUrl } from '../../utils/safeUrl'
-import { ChevronDown, ChevronRight, ChevronUp, Compass, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon, Bookmark, StickyNote, TramFront, Zap } from 'lucide-react'
+import { ChevronDown, ChevronRight, ChevronUp, Compass, Navigation, RotateCcw, ExternalLink, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon, Bookmark, StickyNote, TramFront, Zap, MapPin, Wallet } from 'lucide-react'
 import { type PickedPlace } from './TransitSearchPanel'
 import { buildTransitLeg, buildTransitNameIndex } from './transitLeg'
 import { assignmentsApi, reservationsApi, daysApi } from '../../api/client'
@@ -31,6 +31,15 @@ import { useSaveToCollectionStore } from '../../store/saveToCollectionStore'
 import { placeToSaveTarget } from '../Collections/saveTarget'
 import { useTranslation } from '../../i18n'
 import { Tooltip } from '../shared/Tooltip'
+import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { BarButton, MoreButton, SoftPill, TimePill, tintOf } from './planParts'
+
+/** The round white button a row carries on its right (a route on the map, a journey's legs). */
+const ROW_ROUND = 'grid flex-none place-items-center rounded-full bg-surface-card shadow-sm transition-colors'
+/** The white face every control of a day's route bar shares, so the row reads as one set. */
+const ROUTE_TOOL = 'bg-surface-card shadow-sm ring-1 ring-edge-faint'
+import { TypeTile } from './bookings/bookingParts'
+import { typeInfo } from './bookings/bookingsModel'
 import { isDayInAccommodationRange, getAccommodationAnchors, getDayBookendHotels, shouldDrawMorningLeg, shouldDrawEveningLeg, type CarrierEdge } from '../../utils/dayOrder'
 import {
   TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, hidesOnMiddleDay, getDisplayTimeForDay, getTransportRouteEndpoints,
@@ -123,6 +132,8 @@ interface DayPlanSidebarProps {
   onUndo?: () => void
   onRouteRefresh?: () => void
   onAddTransport?: (dayId: number) => void
+  /** Opens the day's details with the stay editor up, to add an accommodation from the day's "+". */
+  onAddAccommodation?: (day: Day) => void
   /** Opens the public-transit route search for a day (#1065). */
   onPlanTransit?: (dayId: number) => void
   /**
@@ -135,6 +146,12 @@ interface DayPlanSidebarProps {
   onOpenTransit?: (reservation: Reservation) => void
   onEditTransport?: (reservation: Reservation) => void
   onEditReservation?: (reservation: Reservation) => void
+  /**
+   * Shows a booking's detail. Given, a booking row and a rental pill open that
+   * detail for every booking, transit included, and its Edit leads on to the
+   * editor; without it they open what they always opened.
+   */
+  onOpenBooking?: (reservation: Reservation) => void
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
   initialScrollTop?: number
   onScrollTopChange?: (top: number) => void
@@ -149,6 +166,16 @@ interface DayPlanSidebarProps {
  * days (places, transports, notes). Returns everything the timeline view renders
  * from, keeping DayPlanSidebar a thin shell over one large day list.
  */
+// The day head's tones: hovered, open, and a drop landing on it. Mixed from the
+// accent so they follow the user's scheme in both themes.
+const DAY_HEAD_HOVER = 'color-mix(in srgb, var(--accent) 10%, transparent)'
+const DAY_HEAD_SELECTED = 'color-mix(in srgb, var(--accent) 12%, transparent)'
+const DAY_HEAD_DROP = 'color-mix(in srgb, var(--accent) 9%, transparent)'
+// A stop pinned in place: a whisper of the danger tone on the row, a stronger one over its avatar.
+const LOCKED_ROW = 'color-mix(in srgb, var(--danger) 7%, transparent)'
+const LOCK_OVERLAY = 'color-mix(in srgb, var(--danger) 62%, transparent)'
+const LOCK_OVERLAY_HOVER = 'color-mix(in srgb, var(--danger) 42%, transparent)'
+
 function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const {
   tripId,
@@ -180,11 +207,13 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   onUndo,
   onRouteRefresh,
   onAddTransport,
+  onAddAccommodation,
   onPlanTransit,
   onPlanTransitLeg,
   onOpenTransit,
   onEditTransport,
   onEditReservation,
+  onOpenBooking,
   onAddBookingToAssignment,
   initialScrollTop,
   onScrollTopChange,
@@ -1168,6 +1197,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onUndo,
     onRouteRefresh,
     onAddTransport,
+    onAddAccommodation,
     onPlanTransit,
     onPlanTransitLeg,
     onOpenTransit,
@@ -1175,6 +1205,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     expandedTransitIds,
     setExpandedTransitIds,
     onEditReservation,
+    onOpenBooking,
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
@@ -1316,16 +1347,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
   // Per-day colours from the dayTintProvider hook — e.g. which leg of the trip a
   // day belongs to. Empty unless a granted plugin provides them.
   const dayTints = usePluginDayTints(S.tripId)
+  const tr = S.t
   const routeProfileOptions = useMemo(() => {
     const opts: Array<{ key: string; label: string }> = [
-      { key: 'driving', label: 'Driving' },
-      { key: 'walking', label: 'Walking' },
+      { key: 'driving', label: tr('mobileTrip.profileDriving') },
+      { key: 'walking', label: tr('mobileTrip.profileWalking') },
     ]
     for (const p of activePlugins) {
       for (const prof of p.routeProfiles ?? []) opts.push({ key: `plugin:${p.id}/${prof.id}`, label: prof.label })
     }
     return opts
-  }, [activePlugins])
+  }, [activePlugins, tr])
   const {
     tripId,
     trip,
@@ -1373,6 +1405,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onUndo,
     onRouteRefresh,
     onAddTransport,
+    onAddAccommodation,
     onPlanTransit,
     onPlanTransitLeg,
     onOpenTransit,
@@ -1380,6 +1413,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     expandedTransitIds,
     setExpandedTransitIds,
     onEditReservation,
+    onOpenBooking,
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
@@ -1472,6 +1506,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     expandedRouteDayIds,
     setExpandedRouteDayIds,
   } = S
+  // Rows that can be dragged lead with a grip; the rest keep its room so every tile lines up.
+  const gripsShown = canEditDays && !dragDisabled
 
   // ── Per-segment / per-day travel mode (#1281) ──────────────────────────────
   // Icon per mode, matching the route picker (driving→Car, walking→Footprints,
@@ -1611,7 +1647,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
       />
 
       {/* Tagesliste */}
-      <div className={`scroll-container${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
+      <div className={`scroll-container flex flex-col gap-2 p-2${draggingId ? '' : ' trek-stagger'}`} style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
         {days.map((day, index) => {
           const isSelected = selectedDayId === day.id
           // Shared by the click and the key handler so the two can never drift
@@ -1710,14 +1746,46 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
           // Resolved once per day: the header owns a background that its hover
           // handlers reassign imperatively, so both the base and the hover value have
           // to be tint-aware or the first hover-out would wipe the colour.
-          const headerTintBg = dayTintBackground(dayTint, 'header', '--day-tint-header') ?? 'transparent'
-          const headerTintHoverBg = dayTintBackground(dayTint, 'header', '--day-tint-header-hover') ?? 'var(--bg-tertiary)'
+          const headerTintBg = dayTintBackground(dayTint, 'header', '--day-tint-header') ?? NEUTRAL_TINT
+          const headerTintHoverBg = dayTintBackground(dayTint, 'header', '--day-tint-header-hover') ?? DAY_HEAD_HOVER
+          // Day-local anchor only (#2167): the day's first located stop, else the
+          // hotel you wake up in. No trip-wide fallback — on a roadtrip that
+          // silently showed another city's weather with nothing naming the place.
+          const weatherHotel = loc == null ? dayBookends.morning : undefined
+          const wLat = loc?.place?.lat ?? weatherHotel?.place_lat
+          const wLng = loc?.place?.lng ?? weatherHotel?.place_lng
+          const weatherName = loc?.place?.name ?? weatherHotel?.place_name ?? null
+          const hasWeather = !!(day.date && wLat != null && wLng != null)
+          const dayAccs = accommodations.filter(a => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
+            // Sort: check-out first, then ongoing stays, then check-in last
+            .sort((a, b) => {
+              const aIsOut = a.end_day_id === day.id && a.start_day_id !== day.id
+              const bIsOut = b.end_day_id === day.id && b.start_day_id !== day.id
+              const aIsIn = a.start_day_id === day.id
+              const bIsIn = b.start_day_id === day.id
+              if (aIsOut && !bIsOut) return -1
+              if (!aIsOut && bIsOut) return 1
+              if (aIsIn && !bIsIn) return 1
+              if (!aIsIn && bIsIn) return -1
+              return 0
+            })
+          const activeRentals = getActiveRentalsForDay(day.id)
+          // Everything a day can be given, behind one "+" rather than a grid of four icons.
+          const addItems = [
+            onCreatePlaceForDay && { label: t('dayplan.addPlaceHere'), icon: MapPin, onClick: () => onCreatePlaceForDay(day.id) },
+            onAddAccommodation && { label: t('day.addAccommodation'), icon: Hotel, onClick: () => onAddAccommodation(day) },
+            onAddTransport && { label: t('transport.addTransport'), icon: Car, onClick: () => onAddTransport(day.id) },
+            onPlanTransit && { label: t('transit.title'), icon: TramFront, onClick: () => onPlanTransit(day.id) },
+            { label: t('dayplan.addNote'), icon: FileText, onClick: () => openAddNote(day.id, undefined) },
+          ].filter(Boolean)
 
           return (
-            // The card wrapper stays untinted — its three regions (badge, header,
-            // activity list) paint themselves, so a plugin controls them separately.
+            // One card per day, in the language of the booking cards: a head band
+            // that names the day and states its facts as pills, the plan below it.
+            // The card stays untinted — its three regions (badge, header, activity
+            // list) paint themselves, so a plugin controls them separately.
             <div key={day.id} ref={el => { if (el) dayRefs.current.set(day.id, el); else dayRefs.current.delete(day.id) }}
-              title={dayTint?.label || undefined} style={{ borderBottom: '1px solid var(--border-faint)' }}>
+              className={`flex-none overflow-hidden rounded-2xl border border-edge-faint bg-surface-card transition-shadow ${isSelected ? 'shadow-md' : ''}`}>
               {/* Tages-Header — akzeptiert Drops aus der PlacesSidebar */}
               <div
                 className="dp-day-header"
@@ -1743,179 +1811,126 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                 onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setDragOverDayId(null) }}
                 onDrop={e => handleDropOnDay(e, day.id)}
                 style={{
-                  display: 'flex', alignItems: 'center', gap: 10,
-                  padding: '11px 14px 11px 16px',
+                  display: 'flex', alignItems: 'flex-start', gap: 10,
+                  padding: '10px 8px 10px 10px',
                   cursor: 'pointer',
-                  background: isDragTarget ? 'rgba(17,24,39,0.07)' : (isSelected ? 'var(--bg-selected)' : headerTintBg),
+                  background: isDragTarget ? DAY_HEAD_DROP : (isSelected ? DAY_HEAD_SELECTED : headerTintBg),
                   transition: 'background 0.12s',
                   userSelect: 'none',
-                  outline: isDragTarget ? '2px dashed rgba(17,24,39,0.25)' : 'none',
-                  outlineOffset: -2,
-                  borderRadius: isDragTarget ? 8 : 0,
+                  outline: isDragTarget ? '2px dashed var(--text-faint)' : 'none',
+                  outlineOffset: -3,
                   touchAction: 'manipulation',
                 }}
                 // A tinted header hovers to a deeper mix of its own tone rather than to
-                // the neutral --bg-tertiary, so hovering reads as a state change on
-                // this day instead of momentarily losing its colour. Selection keeps
-                // winning outright, so a selected day is never ambiguous.
+                // the neutral hover, so hovering reads as a state change on this day
+                // instead of momentarily losing its colour. Selection keeps winning
+                // outright, so a selected day is never ambiguous.
                 onMouseEnter={e => { if (!isSelected && !isDragTarget) e.currentTarget.style.background = headerTintHoverBg }}
-                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isDragTarget ? 'rgba(17,24,39,0.07)' : headerTintBg }}
+                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = isDragTarget ? DAY_HEAD_DROP : headerTintBg }}
               >
-                {/* Tages-Badge: Nummer oben, darunter (falls vorhanden) das Wetter des Tages */}
-                {(() => {
-                  // Day-local anchor only (#2167): the day's first located stop, else the
-                  // hotel you wake up in. No trip-wide fallback — on a roadtrip that
-                  // silently showed another city's weather with nothing naming the place.
-                  const weatherHotel = loc == null ? dayBookends.morning : undefined
-                  const wLat = loc?.place?.lat ?? weatherHotel?.place_lat
-                  const wLng = loc?.place?.lng ?? weatherHotel?.place_lng
-                  const weatherName = loc?.place?.name ?? weatherHotel?.place_name ?? null
-                  const hasWeather = !!(day.date && wLat != null && wLng != null)
-                  return (
-                    <div style={{
-                      // With weather the badge is a tall stack and has to start at
-                      // the top of the row; without it, it is a lone 26px circle and
-                      // pinning it to the top leaves it floating above the day title.
-                      flexShrink: 0, alignSelf: hasWeather ? 'flex-start' : 'center',
-                      width: hasWeather ? 34 : 26,
-                      borderRadius: hasWeather ? 11 : '50%',
-                      // Selection still wins. A tinted badge mixes the tone INTO
-                      // --bg-hover so it stays the same pill component, and takes
-                      // --text-secondary: the number is 11px bold, so 4.5:1 applies
-                      // and --text-muted is already borderline on the untinted pill.
-                      background: isSelected ? 'var(--accent)' : (dayTintBackground(dayTint, 'badge', '--day-tint-badge', 'var(--bg-hover)') ?? 'var(--bg-hover)'),
-                      color: isSelected ? 'var(--accent-text)' : (dayTinted(dayTint, 'badge') ? 'var(--text-secondary)' : 'var(--text-muted)'),
-                      display: 'flex', flexDirection: 'column', alignItems: 'center', overflow: 'hidden',
-                    }}>
-                      {/* lineHeight 1, or the digit rides the line box's leading and
-                          sits above centre on the plain badge — visible as soon as
-                          there is no weather block under it to distract from it. */}
-                      <div style={{ width: '100%', height: 26, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, lineHeight: 1 }}>
-                        {index + 1}
+                {/* The day's number on a raised tile, its weather folded in under it so the
+                    forecast takes no room of its own; the accent marks the open day. */}
+                <div
+                  className="flex flex-none flex-col items-center overflow-hidden rounded-[10px] font-geist font-bold tabular-nums shadow-sm"
+                  style={{
+                    width: hasWeather ? 36 : 32,
+                    // Selection still wins. A tinted badge mixes the tone INTO the
+                    // card colour so it stays the same tile, and takes
+                    // --text-secondary: the number is small and bold, so 4.5:1 applies.
+                    background: isSelected ? 'var(--accent)' : (dayTintBackground(dayTint, 'badge', '--day-tint-badge', 'var(--bg-card)') ?? 'var(--bg-card)'),
+                    color: isSelected ? 'var(--accent-text)' : (dayTinted(dayTint, 'badge') ? 'var(--text-secondary)' : 'var(--text-muted)'),
+                  }}
+                >
+                  <div className={`grid w-full place-items-center ${hasWeather ? 'h-6' : 'h-8'}`} style={{ ...fs(12), lineHeight: 1 }}>
+                    {index + 1}
+                  </div>
+                  {hasWeather && (
+                    <>
+                      <div className="h-px w-[60%] flex-none bg-current opacity-25" />
+                      {/* The same height and type as the number: two equal halves. */}
+                      <div className="grid h-6 w-full place-items-center" style={{ ...fs(12), lineHeight: 1 }}>
+                        <WeatherWidget lat={wLat ?? null} lng={wLng ?? null} date={day.date} stacked hideIcon locationName={weatherName} />
                       </div>
-                      {hasWeather && (
-                        <>
-                          <div style={{ width: '64%', height: 1, background: 'currentColor', opacity: 0.25 }} />
-                          <div style={{ padding: '3px 0 4px' }}>
-                            <WeatherWidget lat={wLat ?? null} lng={wLng ?? null} date={day.date} stacked locationName={weatherName} />
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  )
-                })()}
+                    </>
+                  )}
+                </div>
 
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
-                    <span style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flexShrink: 1, minWidth: 0 }}>
+                <div className="min-w-0 flex-1 pt-px">
+                  <div className="flex min-w-0 items-baseline gap-2">
+                    <span className="min-w-0 truncate font-bold text-content" style={fs(13.5, 'body')}>
                       {day.title || t('dayplan.dayN', { n: index + 1 })}
                     </span>
                     {formattedDate && (
-                      <>
-                        <span style={{ flexShrink: 0, width: 1, height: 11, background: 'var(--border-primary)' }} />
-                        <span style={{ flexShrink: 0, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 400, color: 'var(--text-faint)', whiteSpace: 'nowrap' }}>
-                          {formattedDate}
-                        </span>
-                      </>
+                      <span className="flex-none whitespace-nowrap text-content-faint" style={fs(11)}>
+                        {formattedDate}
+                      </span>
                     )}
                   </div>
-                  {(() => {
-                    const hasAccs = accommodations.some(a => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
-                    const hasRentals = getActiveRentalsForDay(day.id).length > 0
-                    if (!hasAccs && !hasRentals) return null
-                    return <div style={{ height: 1, background: 'var(--border-faint)', margin: '5px 0 5px' }} />
-                  })()}
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'nowrap', minWidth: 0 }}>
-                    {(() => {
-                      const dayAccs = accommodations.filter(a => isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days))
-                        // Sort: check-out first, then ongoing stays, then check-in last
-                        .sort((a, b) => {
-                          const aIsOut = a.end_day_id === day.id && a.start_day_id !== day.id
-                          const bIsOut = b.end_day_id === day.id && b.start_day_id !== day.id
-                          const aIsIn = a.start_day_id === day.id
-                          const bIsIn = b.start_day_id === day.id
-                          if (aIsOut && !bIsOut) return -1
-                          if (!aIsOut && bIsOut) return 1
-                          if (aIsIn && !bIsIn) return 1
-                          if (!aIsIn && bIsIn) return -1
-                          return 0
-                        })
-                      if (dayAccs.length === 0) return null
-                      return dayAccs.map(acc => {
+                  {(dayAccs.length > 0 || activeRentals.length > 0 || cost || dayTint?.label) && (
+                    <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1">
+                      {dayAccs.map(acc => {
                         const isCheckIn = acc.start_day_id === day.id
                         const isCheckOut = acc.end_day_id === day.id
-                        const iconColor = isCheckOut && !isCheckIn ? '#ef4444' : isCheckIn ? '#22c55e' : 'var(--text-faint)'
+                        const accName = (acc as any).place_name || (acc as any).reservation_title
+                        // The state is said in words as well as colour: check-in green,
+                        // check-out red, a stay in between quiet.
+                        const state = isCheckOut && !isCheckIn ? t('day.checkOut') : isCheckIn ? t('day.checkIn') : null
+                        const iconTone = isCheckOut && !isCheckIn ? 'text-danger' : isCheckIn ? 'text-success' : 'text-content-faint'
                         return (
-                          <button type="button" key={acc.id} onClick={e => { e.stopPropagation(); if ((acc as any).place_id) onPlaceClick((acc as any).place_id) }} className="bg-surface-hover" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 1, minWidth: 0, cursor: (acc as any).place_id ? 'pointer' : 'default', borderRadius: 7, padding: '2px 7px 2px 6px', border: 'none', font: 'inherit', textAlign: 'left' }}>
-                            <Hotel size={11} strokeWidth={1.8} style={{ color: iconColor, flexShrink: 0 }} />
-                            <span className="text-content-muted" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{(acc as any).place_name || (acc as any).reservation_title}</span>
-                          </button>
+                          <Tooltip key={acc.id} label={state ? `${state}: ${accName}` : accName}>
+                            <button type="button" data-dp="day-pill"
+                              onClick={e => { e.stopPropagation(); if ((acc as any).place_id) onPlaceClick((acc as any).place_id) }}
+                              className="inline-flex min-w-0 max-w-full items-center gap-1 rounded-full bg-surface-card px-2 py-[2px] font-geist font-normal text-content-secondary shadow-sm hover:text-content"
+                              style={{ ...fs(10.5), cursor: (acc as any).place_id ? 'pointer' : 'default' }}>
+                              <Hotel size={11} strokeWidth={2} className={`flex-none ${iconTone}`} />
+                              <span className="truncate">{accName}</span>
+                            </button>
+                          </Tooltip>
                         )
-                      })
-                    })()}
-                    {/* Active rental car badges */}
-                    {(() => {
-                      const activeRentals = getActiveRentalsForDay(day.id)
-                      if (activeRentals.length === 0) return null
-                      return activeRentals.map(r => (
-                        <button type="button" key={`rental-${r.id}`} onClick={e => { e.stopPropagation(); setTransportDetail(r) }} className="bg-surface-hover" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 1, minWidth: 0, cursor: 'pointer', borderRadius: 7, padding: '2px 7px 2px 6px', border: 'none', font: 'inherit', textAlign: 'left' }}>
-                          <Car size={11} strokeWidth={1.8} className="text-content-faint" style={{ flexShrink: 0 }} />
-                          <span className="text-content-muted" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 400, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.title}</span>
+                      })}
+                      {/* Active rental car badges */}
+                      {activeRentals.map(r => (
+                        <button type="button" data-dp="day-pill" key={`rental-${r.id}`} onClick={e => { e.stopPropagation(); if (onOpenBooking) onOpenBooking(r); else setTransportDetail(r) }}
+                          className="inline-flex min-w-0 max-w-full items-center gap-1 rounded-full bg-surface-card px-2 py-[2px] font-geist font-normal text-content-secondary shadow-sm hover:text-content"
+                          style={fs(10.5)}>
+                          <Car size={11} strokeWidth={2} className="flex-none text-content-faint" />
+                          <span className="truncate">{r.title}</span>
                         </button>
-                      ))
-                    })()}
-                  </div>
-                  {cost && (
-                    <div style={{ marginTop: 2 }}>
-                      <span className="text-[#059669]" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>{cost}</span>
+                      ))}
+                      {cost && <SoftPill tone="success" icon={<Wallet size={10} strokeWidth={2.2} />}>{cost}</SoftPill>}
+                      {/* A plugin's name for this day (which leg of the trip it belongs to). */}
+                      {dayTint?.label && <SoftPill>{dayTint.label}</SoftPill>}
                     </div>
                   )}
                 </div>
 
-                {canEditDays ? (
-                  (() => {
-                    const cell = { padding: 7, cursor: 'pointer', display: 'grid', placeItems: 'center' } as const
-                    const div = '1px solid var(--border-faint)'
-                    return (
-                      <div className="dp-day-actions" style={{ alignSelf: 'flex-start', flexShrink: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', border: div, borderRadius: 9, overflow: 'hidden' }}>
-                        {/* Public transit search (#1065) — replaced the rename pencil,
-                            which moved next to the day name in the day detail view. */}
-                        {onPlanTransit ? (
-                          <Tooltip label={t('transit.title')} placement="top">
-                            <button type="button" onClick={e => { e.stopPropagation(); onPlanTransit(day.id) }}  aria-label={t('transit.title')} style={{ ...cell, border: 'none', borderRight: div, borderBottom: div }}>
-                              <TramFront size={14} strokeWidth={1.8} />
-                            </button>
-                          </Tooltip>
-                        ) : <div style={{ borderRight: div, borderBottom: div }} />}
-                        {onAddTransport ? (
-                          <Tooltip label={t('transport.addTransport')} placement="top">
-                            <button type="button" onClick={e => { e.stopPropagation(); onAddTransport(day.id) }}  style={{ ...cell, border: 'none', borderBottom: div }} aria-label={t('transport.addTransport')}>
-                              <Plus size={14} strokeWidth={1.8} />
-                            </button>
-                          </Tooltip>
-                        ) : <div style={{ borderBottom: div }} />}
-                        <button type="button" onClick={e => openAddNote(day.id, e)} aria-label={t('dayplan.addNote')} style={{ ...cell, border: 'none', borderRight: div }}>
-                          <FileText size={14} strokeWidth={1.8} />
-                        </button>
-                        <button type="button" onClick={e => toggleDay(day.id, e)}  style={{ ...cell, border: 'none' }} aria-label={isExpanded ? t('common.collapse') : t('common.expand')}>
-                          {isExpanded ? <ChevronDown size={15} strokeWidth={1.8} /> : <ChevronRight size={15} strokeWidth={1.8} />}
-                        </button>
-                      </div>
-                    )
-                  })()
-                ) : (
-                  <button type="button" onClick={e => toggleDay(day.id, e)} className="text-content-faint" style={{ alignSelf: 'flex-start', flexShrink: 0, background: 'none', border: 'none', padding: 6, cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
-                    {isExpanded ? <ChevronDown size={16} strokeWidth={1.8} /> : <ChevronRight size={16} strokeWidth={1.8} />}
+                <div className="flex flex-none items-center gap-1">
+                  {canEditDays && (
+                    <Tooltip label={t('planner.addToThisDay')} placement="top">
+                      <button type="button"
+                        onClick={e => { e.stopPropagation(); ctxMenu.open(e, addItems, true) }}
+                        aria-label={t('planner.addToThisDay')} aria-haspopup="menu"
+                        className="dp-day-tools grid h-7 w-7 place-items-center rounded-full bg-surface-card text-content-muted shadow-sm hover:text-content">
+                        <Plus size={14} strokeWidth={2.2} />
+                      </button>
+                    </Tooltip>
+                  )}
+                  <button type="button" onClick={e => toggleDay(day.id, e)}
+                    aria-label={isExpanded ? t('common.collapse') : t('common.expand')} aria-expanded={isExpanded}
+                    className="grid h-7 w-7 place-items-center rounded-full text-content-muted hover:bg-surface-card hover:text-content">
+                    {isExpanded ? <ChevronDown size={15} strokeWidth={2} /> : <ChevronRight size={15} strokeWidth={2} />}
                   </button>
-                )}
+                </div>
               </div>
 
               {/* Aufgeklappte Orte + Notizen */}
               {isExpanded && (
                 <div
+                  data-dp="day-body"
+                  className="border-t border-edge-faint px-1.5 pb-1.5 pt-1.5"
                   // The activity list — the largest region and the one behind the
                   // densest text, so its tint is the faintest of the three.
-                  style={{ background: dayTintBackground(dayTint, 'activity', '--day-tint-activity', 'var(--bg-hover)') ?? 'var(--bg-hover)', paddingTop: 6 }}
+                  style={{ background: dayTintBackground(dayTint, 'activity', '--day-tint-activity') ?? undefined }}
                   onDragOver={e => { e.preventDefault(); const cur = dropTargetRef.current; if (draggingId && (!cur || cur.startsWith('end-'))) setDropTargetKey(`end-${day.id}`) }}
                   onDrop={e => {
                     e.preventDefault()
@@ -1992,38 +2007,26 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     <div
                       onDragOver={e => { e.preventDefault(); if (dragOverDayId !== day.id) setDragOverDayId(day.id) }}
                       onDrop={e => handleDropOnDay(e, day.id)}
-                      className={dragOverDayId === day.id ? 'bg-[rgba(17,24,39,0.05)]' : 'bg-transparent'}
-                      style={{ padding: '16px', textAlign: 'center', borderRadius: 8,
-                        border: dragOverDayId === day.id ? '2px dashed rgba(17,24,39,0.2)' : '2px dashed transparent',
+                      style={{ padding: 4, textAlign: 'center', borderRadius: 12,
+                        background: dragOverDayId === day.id ? DAY_HEAD_DROP : 'transparent',
+                        outline: dragOverDayId === day.id ? '2px dashed var(--text-faint)' : 'none', outlineOffset: -2,
                       }}
                     >
                       {/* An empty day is where somebody wants to add something, so
                           the slot offers to do it instead of only stating the fact.
                           Without the handler (no edit rights) it stays the sentence. */}
                       {onCreatePlaceForDay ? (
+                        // It is the one thing to do on an empty day, so it reads as an
+                        // offer: the add row every list in the planner ends with.
                         <button type="button"
                           onClick={e => { e.stopPropagation(); onCreatePlaceForDay(day.id) }}
-                          className="text-content-muted"
-                          style={{
-                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-                            width: '100%', padding: '8px 12px', borderRadius: 8,
-                            // A solid outline and a whisper of tint rather than the
-                            // dashed grey placeholder it replaced: it is the one thing
-                            // to do on an empty day, so it should read as an offer
-                            // without competing with the day rows around it.
-                            background: 'color-mix(in srgb, var(--accent) 4%, transparent)',
-                            border: '1px solid var(--border-primary)',
-                            fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500,
-                            cursor: 'pointer', fontFamily: 'inherit',
-                            transition: 'background 0.15s',
-                          }}
-                          onMouseEnter={e => { e.currentTarget.style.background = 'color-mix(in srgb, var(--accent) 10%, transparent)' }}
-                          onMouseLeave={e => { e.currentTarget.style.background = 'color-mix(in srgb, var(--accent) 4%, transparent)' }}
+                          className="flex w-full items-center justify-center gap-1.5 rounded-[12px] border border-dashed border-edge px-3 py-2.5 font-semibold text-content-muted hover:border-content-faint hover:text-content"
+                          style={fs(12, 'body')}
                         >
-                          <Plus size={13} strokeWidth={2} /> {t('dayplan.addPlaceHere')}
+                          <Plus size={13} strokeWidth={2.2} /> {t('dayplan.addPlaceHere')}
                         </button>
                       ) : (
-                        <span className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('dayplan.emptyDay')}</span>
+                        <span className="block py-3 text-content-faint" style={fs(12, 'body')}>{t('dayplan.emptyDay')}</span>
                       )}
                     </div>
                   ) : (
@@ -2084,11 +2087,25 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         const moveUp = (e) => { e.stopPropagation(); arrowMove('up') }
                         const moveDown = (e) => { e.stopPropagation(); arrowMove('down') }
                         const selectPlace = () => { onPlaceClick(isPlaceSelected ? null : place.id, isPlaceSelected ? null : assignment.id); if (!isPlaceSelected) onSelectDay(day.id, true) }
+                        const isLocked = lockedIds.has(assignment.id)
+                        // The actions a right-click offers; the row's "…" offers the same, so a
+                        // mouse that never right-clicks and the keyboard reach them too.
+                        // Flat entries, one per navigation app: a submenu would need a
+                        // component that does not exist here.
+                        const placeMenu = () => [
+                          canEditPlaces && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
+                          canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
+                          safeHttpUrl(place.website) && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(safeHttpUrl(place.website)!, '_blank', 'noopener,noreferrer') },
+                          ...getNavigationTargets(place).map(target => ({ label: target.label, icon: Navigation, onClick: () => openNavigationTarget(target) })),
+                          collectionsEnabled && { label: t('inspector.saveToCollection'), icon: Bookmark, onClick: () => useSaveToCollectionStore.getState().open(placeToSaveTarget(place)) },
+                          { divider: true },
+                          canEditPlaces && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+                        ]
 
                         return (
                           <React.Fragment key={`place-${assignment.id}`}>
                           <div
-                            className="dp-row"
+                            className={`dp-row group ${!isPlaceSelected && !isLocked ? 'hover:bg-surface-hover' : ''}`}
                             // Picking the place out of the day has no other trigger, so
                             // the row is the control. Its grip, lock and arrows are
                             // buttons in their own right, hence the key handler only
@@ -2157,117 +2174,82 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               e.preventDefault()
                               selectPlace()
                             }}
-                            onContextMenu={e => {
-                              // Flat entries, one per app: the menu has room to
-                              // grow and a submenu would need a component that
-                              // does not exist here.
-                              const navTargets = getNavigationTargets(place)
-                              ctxMenu.open(e, [
-                                canEditPlaces && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
-                                canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
-                                safeHttpUrl(place.website) && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(safeHttpUrl(place.website)!, '_blank', 'noopener,noreferrer') },
-                                ...navTargets.map(target => ({ label: target.label, icon: Navigation, onClick: () => openNavigationTarget(target) })),
-                                collectionsEnabled && { label: t('inspector.saveToCollection'), icon: Bookmark, onClick: () => useSaveToCollectionStore.getState().open(placeToSaveTarget(place)) },
-                                { divider: true },
-                                canEditPlaces && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                              ])
-                            }}
-                            onMouseEnter={e => {
-                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
-                                e.currentTarget.style.background = 'var(--bg-hover)'
-                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
-                              if (grip) grip.style.opacity = '1'
-                              setHoveredAssignmentId(assignment.id)
-                            }}
-                            onMouseLeave={e => {
-                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
-                                e.currentTarget.style.background = 'transparent'
-                              const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
-                              if (grip) grip.style.opacity = '0.3'
-                              setHoveredAssignmentId(null)
-                            }}
+                            onContextMenu={e => ctxMenu.open(e, placeMenu())}
+                            onMouseEnter={() => setHoveredAssignmentId(assignment.id)}
+                            onMouseLeave={() => setHoveredAssignmentId(null)}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
-                              padding: '7px 8px 7px 10px',
+                              padding: `6px 4px 6px ${gripsShown ? 2 : 8}px`,
+                              borderRadius: 12,
                               cursor: 'pointer',
-                              background: lockedIds.has(assignment.id)
-                                ? 'rgba(220,38,38,0.08)'
-                                : isPlaceSelected ? 'var(--bg-selected)' : 'transparent',
-                              borderLeft: lockedIds.has(assignment.id)
-                                ? '3px solid #dc2626'
-                                : '3px solid transparent',
+                              // A locked stop keeps a whisper of the danger tone; the lock on its avatar says why.
+                              background: isLocked ? LOCKED_ROW : isPlaceSelected ? 'var(--bg-selected)' : undefined,
                               borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
-                              transition: 'background 0.15s, border-color 0.15s',
+                              transition: 'background 0.15s',
                               opacity: isDraggingThis ? 0.4 : 1,
                             }}
                           >
-                            {canEditDays && !dragDisabled && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                            {canEditDays && !dragDisabled && <div className="dp-grip flex flex-none cursor-grab items-center text-content-faint opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-40">
                               <GripVertical size={13} strokeWidth={1.8} />
                             </div>}
-                            <button
-                              type="button"
-                              aria-label={lockedIds.has(assignment.id) ? t('planner.clickToUnlock') : t('planner.keepPosition')}
-                              onClick={e => { e.stopPropagation(); toggleLock(assignment.id) }}
-                              onMouseEnter={e => { e.stopPropagation(); setLockHoverId(assignment.id) }}
-                              onMouseLeave={() => setLockHoverId(null)}
-                              style={{ position: 'relative', flexShrink: 0, cursor: 'pointer', display: 'flex', background: 'none', border: 'none', padding: 0, font: 'inherit' }}
-                            >
-                              <PlaceAvatar place={place} category={cat} size={28} />
-                              {/* Hover/locked overlay */}
-                              {(lockHoverId === assignment.id || lockedIds.has(assignment.id)) && (
-                                <div style={{
-                                  position: 'absolute', inset: 0, borderRadius: '50%',
-                                  background: lockedIds.has(assignment.id) ? 'rgba(220,38,38,0.6)' : 'rgba(220,38,38,0.4)',
-                                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                  transition: 'background 0.15s',
-                                }}>
-                                  <Lock size={14} strokeWidth={2.5} style={{ color: 'white', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.3))' }} />
-                                </div>
-                              )}
-                              {/* Custom tooltip */}
-                              {lockHoverId === assignment.id && (
-                                <div style={{
-                                  position: 'absolute', left: '100%', top: '50%', transform: 'translateY(-50%)',
-                                  marginLeft: 8, whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 50,
-                                  background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-                                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
-                                  boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
-                                }}>
-                                  {lockedIds.has(assignment.id)
-                                    ? t('planner.clickToUnlock')
-                                    : t('planner.keepPosition')}
-                                </div>
-                              )}
-                            </button>
-                            <div style={{ flex: 1, minWidth: 0 }}>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 4, overflow: 'hidden' }}>
-                                {cat && (() => {
-                                  const CatIcon = getCategoryIcon(cat.icon)
-                                  return <span title={cat.name} style={{ display: 'inline-flex', flexShrink: 0 }}><CatIcon size={10} strokeWidth={2} color={cat.color || 'var(--text-muted)'} /></span>
-                                })()}
-                                <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
-                                  {place.name}
-                                </span>
-                                {place.place_time && (
-                                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 400, marginLeft: 6 }}>
-                                    <Clock size={9} strokeWidth={2} />
-                                    {formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}
+                            <Tooltip label={isLocked ? t('planner.clickToUnlock') : t('planner.keepPosition')} placement="right">
+                              <button
+                                type="button"
+                                data-dp="lock"
+                                aria-label={isLocked ? t('planner.clickToUnlock') : t('planner.keepPosition')}
+                                onClick={e => { e.stopPropagation(); toggleLock(assignment.id) }}
+                                onMouseEnter={e => { e.stopPropagation(); setLockHoverId(assignment.id) }}
+                                onMouseLeave={() => setLockHoverId(null)}
+                                className="relative flex flex-none rounded-full"
+                              >
+                                <PlaceAvatar place={place} category={cat} size={32} />
+                                {/* Hover/locked overlay */}
+                                {(lockHoverId === assignment.id || isLocked) && (
+                                  <span className="absolute inset-0 grid place-items-center rounded-full transition-colors"
+                                    style={{ background: isLocked ? LOCK_OVERLAY : LOCK_OVERLAY_HOVER }}>
+                                    <Lock size={14} strokeWidth={2.5} className="text-accent-text" style={{ color: 'white' }} />
                                   </span>
                                 )}
+                              </button>
+                            </Tooltip>
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                              <div className="flex min-w-0 items-center gap-1.5">
+                                {cat && (() => {
+                                  const CatIcon = getCategoryIcon(cat.icon)
+                                  return (
+                                    <Tooltip label={cat.name}>
+                                      <span className="inline-flex flex-none"><CatIcon size={11} strokeWidth={2.2} color={cat.color || 'var(--text-muted)'} /></span>
+                                    </Tooltip>
+                                  )
+                                })()}
+                                <span className="min-w-0 truncate font-semibold text-content" style={{ ...fs(13, 'body'), lineHeight: 1.25 }}>
+                                  {place.name}
+                                </span>
                               </div>
-                              {(place.description || place.address || cat?.name) && (
-                                <div className="collab-note-md" style={{ marginTop: 2, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2, maxHeight: '1.2em' }}>
-                                  <Markdown remarkPlugins={[remarkGfm]}>{place.description || place.address || cat?.name || ''}</Markdown>
+                              {(place.place_time || place.description || place.address || cat?.name) && (
+                                <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
+                                  {place.place_time && (
+                                    <TimePill>
+                                      {formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}
+                                    </TimePill>
+                                  )}
+                                  {(place.description || place.address || cat?.name) && (
+                                    <div className="collab-note-md min-w-0 flex-1 text-content-faint" style={{ ...fs(10.5), overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.3, maxHeight: '1.3em' }}>
+                                      <Markdown remarkPlugins={[remarkGfm]}>{place.description || place.address || cat?.name || ''}</Markdown>
+                                    </div>
+                                  )}
                                 </div>
                               )}
                               {assignment.notes && (
                                 // Day-specific note on this stop (#2163) — one muted
                                 // caption line so the timeline shows the note exists
                                 // without swallowing the row.
-                                <div title={t('places.assignmentNotes')} style={{ marginTop: 2, display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden' }}>
-                                  <StickyNote size={9} strokeWidth={2} style={{ flexShrink: 0 }} />
-                                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>{assignment.notes}</span>
-                                </div>
+                                <Tooltip label={t('places.assignmentNotes')}>
+                                  <div className="mt-0.5 flex min-w-0 items-center gap-1 text-content-muted" style={fs(10.5)}>
+                                    <StickyNote size={10} strokeWidth={2} className="flex-none" />
+                                    <span className="truncate">{assignment.notes}</span>
+                                  </div>
+                                </Tooltip>
                               )}
                               {(() => {
                                 const linked = getAssignmentReservations(reservations, assignment.id)
@@ -2275,26 +2257,16 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 // A stop can carry more than one booking (a parking pass and the
                                 // tickets for the same zoo), and every one of them is kept out of
                                 // the timeline, so this row is where they have to appear (#2201).
-                                // Stacked, because the chip lines are inline-flex and would
-                                // otherwise run together on one.
                                 return (
-                                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
+                                  <div className="mt-1 flex flex-col items-start gap-1">
                                     {linked.map(res => {
                                       const confirmed = res.status === 'confirmed'
                                       const hasEndpoints = onToggleConnection && (res.endpoints || []).length >= 2
                                       const active = hasEndpoints ? visibleConnectionIds.includes(res.id) : false
-                                      // The status, the time and the flight/train number used to sit in one
-                                      // pill strung together on a middle dot, which read as one run-on
-                                      // sentence. They are separate chips now: same tint so they still
-                                      // belong together, own outline so the eye can take them one at a time.
+                                      // Status, time and carrier as their own pills in the status
+                                      // tone, so the eye takes them one at a time.
                                       const RI = RES_ICONS[res.type] || Ticket
-                                      const tint = confirmed ? 'bg-[rgba(22,163,74,0.1)] text-[#16a34a]' : 'bg-[rgba(217,119,6,0.1)] text-[#d97706]'
-                                      const chip: React.CSSProperties = {
-                                        display: 'inline-flex', alignItems: 'center', gap: 3,
-                                        padding: '1px 6px', borderRadius: 5,
-                                        fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600,
-                                        whiteSpace: 'nowrap',
-                                      }
+                                      const tone = confirmed ? 'success' : 'warning'
                                       const { time: st } = splitReservationDateTime(res.reservation_time)
                                       const { time: et } = splitReservationDateTime(res.reservation_end_time)
                                       const timeLabel = st || et
@@ -2305,61 +2277,39 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                       const carrierLabel = meta
                                         ? (meta.airline && meta.flight_number ? `${meta.airline} ${meta.flight_number}` : meta.flight_number || meta.train_number || '')
                                         : ''
+                                      const editHandler = canEditDays ? (TRANSPORT_TYPES.has(res.type) ? onEditTransport : onEditReservation) : undefined
                                       return (
                                         // No wrapping: the time belongs to the status it qualifies, so the
-                                        // chips stay on one line even when the row gets narrow.
-                                        <div key={res.id} style={{ marginTop: 3, display: 'inline-flex', alignItems: 'center', gap: 3, flexWrap: 'nowrap' }}>
-                                          <div className={tint} style={chip}>
-                                            <RI size={8} />
+                                        // pills stay on one line even when the row gets narrow.
+                                        <div key={res.id} className="flex max-w-full flex-nowrap items-center gap-1">
+                                          <SoftPill tone={tone} icon={<RI size={10} strokeWidth={2.2} />}>
                                             <span className="hidden sm:inline">{confirmed ? t('planner.resConfirmed') : t('planner.resPending')}</span>
-                                          </div>
-                                          {timeLabel && <span className={tint} style={{ ...chip, fontWeight: 500 }}>{timeLabel}</span>}
-                                          {carrierLabel && <span className={tint} style={{ ...chip, fontWeight: 500 }}>{carrierLabel}</span>}
+                                          </SoftPill>
+                                          {timeLabel && <SoftPill tone={tone}>{timeLabel}</SoftPill>}
+                                          {carrierLabel && <SoftPill tone={tone}>{carrierLabel}</SoftPill>}
                                           {hasEndpoints && (
                                             <Tooltip label={t(active ? 'map.hideConnections' : 'map.showConnections')} placement="top">
                                               <button aria-label={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                                aria-pressed={active}
                                                 type="button"
                                                 onClick={e => { e.stopPropagation(); onToggleConnection!(res.id) }}
-                                                className={active ? 'bg-[#3b82f6] text-[#fff]' : 'bg-transparent text-content-faint'}
-                                                style={{
-                                                  flexShrink: 0, appearance: 'none',
-                                                  width: 20, height: 20, borderRadius: 4,
-                                                  display: 'grid', placeItems: 'center', cursor: 'pointer',
-                                                  border: 'none',
-                                                  transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
-                                                }}
-                                                onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
-                                                onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                                className={`${ROW_ROUND} h-5 w-5 ${active ? 'text-info' : 'text-content-muted hover:text-content'}`}
                                               >
-                                                <RouteIcon size={11} />
+                                                <RouteIcon size={11} strokeWidth={2.2} />
+                                              </button>
+                                            </Tooltip>
+                                          )}
+                                          {editHandler && (
+                                            <Tooltip label={t('common.edit')} placement="top">
+                                              <button aria-label={t('common.edit')}
+                                                type="button"
+                                                onClick={e => { e.stopPropagation(); editHandler(res) }}
+                                                className={`${ROW_ROUND} h-5 w-5 text-content-muted hover:text-content`}
+                                              >
+                                                <Pencil size={11} strokeWidth={2.2} />
                                               </button>
                                             </Tooltip>
                                           )}
-                                          {canEditDays && (() => {
-                                            const isTransport = TRANSPORT_TYPES.has(res.type)
-                                            const handler = isTransport ? onEditTransport : onEditReservation
-                                            if (!handler) return null
-                                            return (
-                                              <Tooltip label={t('common.edit')} placement="top">
-                                                <button aria-label={t('common.edit')}
-                                                  type="button"
-                                                  onClick={e => { e.stopPropagation(); handler(res) }}
-                                                  className="bg-transparent text-content-faint"
-                                                  style={{
-                                                    flexShrink: 0, appearance: 'none',
-                                                    width: 20, height: 20, borderRadius: 4,
-                                                    display: 'grid', placeItems: 'center', cursor: 'pointer',
-                                                    border: 'none',
-                                                    transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
-                                                  }}
-                                                  onMouseEnter={e => { e.currentTarget.style.color = 'var(--text-primary)' }}
-                                                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-faint)' }}
-                                                >
-                                                  <Pencil size={11} />
-                                                </button>
-                                              </Tooltip>
-                                            )
-                                          })()}
                                         </div>
                                       )
                                     })}
@@ -2367,58 +2317,41 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 )
                               })()}
                               {assignment.participants?.length > 0 && (
-                                <div style={{ marginTop: 3, display: 'flex', alignItems: 'center', gap: -4 }}>
+                                <div className="mt-1 flex items-center">
                                   {assignment.participants.slice(0, 5).map((p, pi) => (
-                                    <div key={p.user_id} className="bg-surface-tertiary text-content-muted" style={{
-                                      width: 16, height: 16, borderRadius: '50%', border: '1.5px solid var(--bg-card)',
-                                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700,
-                                      marginLeft: pi > 0 ? -4 : 0, flexShrink: 0,
-                                      overflow: 'hidden',
-                                    }}>
-                                      {p.avatar ? <img src={avatarSrc(p.avatar)!} alt={p.username ?? ''} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : p.username?.[0]?.toUpperCase()}
+                                    <div key={p.user_id} className="grid h-4 w-4 flex-none place-items-center overflow-hidden rounded-full border-[1.5px] border-surface-card bg-surface-tertiary font-bold text-content-muted"
+                                      style={{ ...fs(7), marginLeft: pi > 0 ? -4 : 0 }}>
+                                      {p.avatar ? <img src={avatarSrc(p.avatar)!} alt={p.username ?? ''} className="h-full w-full object-cover" /> : p.username?.[0]?.toUpperCase()}
                                     </div>
                                   ))}
                                   {assignment.participants.length > 5 && (
-                                    <span className="text-content-faint" style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', marginLeft: 2 }}>+{assignment.participants.length - 5}</span>
+                                    <span className="ml-0.5 text-content-faint" style={fs(8)}>+{assignment.participants.length - 5}</span>
                                   )}
                                 </div>
                               )}
                             </div>
                             {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
-                              <button type="button" onClick={moveUp} disabled={idx === 0} className={idx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: idx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}>
+                              <button type="button" onClick={moveUp} disabled={idx === 0} aria-label={t('dayplan.moveUp')} className="flex text-content-faint hover:text-content disabled:cursor-default disabled:text-edge">
                                 <ChevronUp size={12} strokeWidth={2} />
                               </button>
-                              <button type="button" onClick={moveDown} disabled={idx === merged.length - 1} className={idx === merged.length - 1 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: idx === merged.length - 1 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}>
+                              <button type="button" onClick={moveDown} disabled={idx === merged.length - 1} aria-label={t('dayplan.moveDown')} className="flex text-content-faint hover:text-content disabled:cursor-default disabled:text-edge">
                                 <ChevronDown size={12} strokeWidth={2} />
                               </button>
                             </div>}
-                            {canEditDays && onAddBookingToAssignment && hoveredAssignmentId === assignment.id && (
+                            {canEditDays && onAddBookingToAssignment && (hoveredAssignmentId === assignment.id || isPlaceSelected) && (
                               <Tooltip label={t('reservations.addBooking')} placement="top">
                                 <button type="button" aria-label={t('reservations.addBooking')}
                                   onClick={e => {
                                     e.stopPropagation()
                                     onAddBookingToAssignment(day.id, assignment.id)
                                   }}
-                                  style={{
-                                    flexShrink: 0,
-                                    background: 'none',
-                                    border: '1px solid var(--border-primary)',
-                                    borderRadius: 5,
-                                    padding: '2px 6px',
-                                    cursor: 'pointer',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 3,
-                                    fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
-                                    fontWeight: 500,
-                                    color: 'var(--text-muted)',
-                                    fontFamily: 'inherit',
-                                  }}
+                                  className="grid h-6 w-6 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm hover:text-content"
                                 >
-                                  <Plus size={11} strokeWidth={2} />
+                                  <Ticket size={12} strokeWidth={2} />
                                 </button>
                               </Tooltip>
                             )}
+                            <MoreButton label={t('files.menu')} items={placeMenu()} size={24} />
                           </div>
                           {daySchedule.byAssignment[day.id]?.[assignment.id]?.map(si => <PluginDayScheduleRow key={`${si.pluginId}:${si.id}`} item={si} />)}
                           {routeLegs[day.id]?.[assignment.id] && (canEditDays ? (
@@ -2445,8 +2378,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         // no header badge either, only drop-off and pickup (#1937)
                         if (hidesOnMiddleDay(res, day.id)) return null
 
-                        const TransportIcon = RES_ICONS[res.type] || Ticket
-                        const color = '#3b82f6'
+                        const color = typeInfo(res.type).color
                         let meta: any = {}
                         try { meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {}) } catch { meta = {} }
 
@@ -2455,18 +2387,18 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         if (res.__leg) {
                           // One leg of a multi-leg flight/train — show this segment's own detail.
                           const parts = res.type === 'train'
-                            ? [res.__leg.train_number, res.__leg.platform ? `Gl. ${res.__leg.platform}` : '', res.__leg.seat ? `Sitz ${res.__leg.seat}` : ''].filter(Boolean)
+                            ? [res.__leg.train_number, res.__leg.platform ? `${t('reservations.meta.platform')} ${res.__leg.platform}` : '', res.__leg.seat ? `${t('reservations.meta.seat')} ${res.__leg.seat}` : ''].filter(Boolean)
                             : [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
                           if (res.__leg.from || res.__leg.to)
                             parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
-                          subtitle = parts.join(' · ')
+                          subtitle = parts.join(', ')
                         } else if (res.type === 'flight') {
                           const parts = [meta.airline, meta.flight_number].filter(Boolean)
                           if (meta.departure_airport || meta.arrival_airport)
                             parts.push([meta.departure_airport, meta.arrival_airport].filter(Boolean).join(' → '))
-                          subtitle = parts.join(' · ')
+                          subtitle = parts.join(', ')
                         } else if (res.type === 'train') {
-                          subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
+                          subtitle = [meta.train_number, meta.platform ? `${t('reservations.meta.platform')} ${meta.platform}` : '', meta.seat ? `${t('reservations.meta.seat')} ${meta.seat}` : ''].filter(Boolean).join(', ')
                         }
 
                         // A transit journey (#1065) renders its itinerary inline —
@@ -2482,6 +2414,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
 
                         const openTransportRow = () => {
                           const target = reservations.find(x => x.id === res.id) ?? res
+                          // With a detail to show, every booking opens it first.
+                          if (onOpenBooking) { onOpenBooking(target); return }
                           // A transit journey opens its own journey view — the rich
                           // stop-by-stop breakdown with its booking fields, never the
                           // generic edit form (#1065).
@@ -2554,70 +2488,64 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
-                            onMouseEnter={e => { e.currentTarget.style.background = `${color}12` }}
-                            onMouseLeave={e => { e.currentTarget.style.background = `${color}08` }}
+                            className="group"
+                            data-dp="transport-row"
+                            onMouseEnter={e => { e.currentTarget.style.background = tintOf(color, 12) }}
+                            onMouseLeave={e => { e.currentTarget.style.background = tintOf(color, 7) }}
                             style={{
                               display: 'flex', alignItems: 'center', gap: 8,
-                              padding: '7px 8px 7px 10px',
-                              margin: '1px 8px',
-                              borderRadius: 6,
-                              border: `1px solid ${color}33`,
+                              padding: `6px 4px 6px ${gripsShown ? 2 : 8}px`,
+                              margin: '2px 0',
+                              borderRadius: 12,
+                              border: `1px solid ${tintOf(color, 24)}`,
                               borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
                               borderBottom: showDropLineAfter ? '2px solid var(--text-primary)' : undefined,
-                              background: `${color}08`,
-                              cursor: (transitMeta || (canEditDays && onEditTransport)) ? 'pointer' : 'default', userSelect: 'none',
+                              background: tintOf(color, 7),
+                              cursor: (onOpenBooking || transitMeta || (canEditDays && onEditTransport)) ? 'pointer' : 'default', userSelect: 'none',
                               transition: 'background 0.1s',
                               opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
-                            {canEditDays && spanPhase !== 'middle' && !res.__leg && !dragDisabled && (
-                              <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                            {gripsShown && (spanPhase !== 'middle' && !res.__leg ? (
+                              <div className="dp-grip flex flex-none cursor-grab items-center text-content-faint opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-40">
                                 <GripVertical size={13} strokeWidth={1.8} />
                               </div>
-                            )}
-                            <div style={{
-                              width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              borderRadius: '50%', background: `${color}18`,
-                            }}>
-                              <TransportIcon size={14} strokeWidth={1.8} color={color} />
-                            </div>
+                            ) : (
+                              // A row that cannot move keeps the grip's room, so its tile lines up with the rest.
+                              <span aria-hidden="true" className="w-[13px] flex-none" />
+                            ))}
+                            <TypeTile type={res.type} size={32} raised />
                             <div style={{ flex: 1, minWidth: 0 }}>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-                                {spanLabel && (
-                                  <span style={{
-                                    fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, padding: '1px 5px', borderRadius: 4, flexShrink: 0,
-                                    background: `${color}20`, color: color, textTransform: 'uppercase', letterSpacing: '0.03em',
-                                  }}>
-                                    {spanLabel}
-                                  </span>
-                                )}
-                                <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
+                              <div className="flex min-w-0 items-center gap-1.5">
+                                <span className="min-w-0 truncate font-semibold text-content" style={{ ...fs(13, 'body'), lineHeight: 1.25 }}>
                                   {transitMeta ? <TransitTitle title={res.title} iconSize={11} /> : res.title}
                                 </span>
-                                {(() => {
-                                  const { time: dispTime } = splitReservationDateTime(displayTime)
-                                  const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                                  if (!dispTime && !endTime) return null
-                                  return (
-                                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 400, marginLeft: 6 }}>
-                                      <Clock size={9} strokeWidth={2} />
-                                      {dispTime ? formatTime(dispTime, locale, timeFormat) : ''}
-                                      {spanPhase === 'single' && endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                      {meta.departure_timezone && spanPhase === 'start' && ` ${meta.departure_timezone}`}
-                                      {meta.arrival_timezone && spanPhase === 'end' && ` ${meta.arrival_timezone}`}
-                                    </span>
-                                  )
-                                })()}
                               </div>
-                              {transitMeta ? (
-                                <div style={{ display: 'flex', alignItems: 'center', marginTop: 3 }}>
-                                  <TransitLegChips legs={transitMeta.legs} size="sm" t={t} />
-                                </div>
-                              ) : subtitle && (
-                                <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                                  {subtitle}
-                                </div>
-                              )}
+                              {(() => {
+                                const { time: dispTime } = splitReservationDateTime(displayTime)
+                                const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+                                // What the time pill actually says: a day in the middle of a
+                                // span has no time of its own, and an empty pill is noise.
+                                const timeText = [
+                                  dispTime ? formatTime(dispTime, locale, timeFormat) : '',
+                                  spanPhase === 'single' && endTime ? `– ${formatTime(endTime, locale, timeFormat)}` : '',
+                                  meta.departure_timezone && spanPhase === 'start' ? meta.departure_timezone : '',
+                                  meta.arrival_timezone && spanPhase === 'end' ? meta.arrival_timezone : '',
+                                ].filter(Boolean).join(' ')
+                                if (!timeText && !spanLabel && !transitMeta && !subtitle) return null
+                                return (
+                                  <div className="mt-0.5 flex min-w-0 items-center gap-1.5">
+                                    {/* Where in a multi-day span this day falls, said quietly beside its time. */}
+                                    {spanLabel && <SoftPill caps>{spanLabel}</SoftPill>}
+                                    {timeText && <TimePill>{timeText}</TimePill>}
+                                    {transitMeta ? (
+                                      <span className="flex min-w-0 items-center"><TransitLegChips legs={transitMeta.legs} size="sm" t={t} /></span>
+                                    ) : subtitle && (
+                                      <span className="min-w-0 truncate text-content-faint" style={fs(10.5)}>{subtitle}</span>
+                                    )}
+                                  </div>
+                                )
+                              })()}
                             </div>
                             {transitMeta && (() => {
                               const expanded = expandedTransitIds.has(res.id)
@@ -2633,13 +2561,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                     })
                                   }}
                                   aria-label={t(expanded ? 'common.collapse' : 'common.expand')}
-                                  style={{
-                                    flexShrink: 0, appearance: 'none', width: 26, height: 26, borderRadius: 6,
-                                    display: 'grid', placeItems: 'center', cursor: 'pointer', border: 'none',
-                                    background: 'transparent', color: 'var(--text-faint)',
-                                  }}
-                                  onMouseEnter={e => { e.currentTarget.style.color = 'var(--text-primary)' }}
-                                  onMouseLeave={e => { e.currentTarget.style.color = 'var(--text-faint)' }}
+                                  aria-expanded={expanded}
+                                  className={`${ROW_ROUND} h-7 w-7 text-content-muted hover:text-content`}
                                 >
                                   {expanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
                                 </button>
@@ -2650,28 +2573,19 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               return (
                                 <Tooltip label={t(active ? 'map.hideConnections' : 'map.showConnections')} placement="top">
                                   <button aria-label={t(active ? 'map.hideConnections' : 'map.showConnections')}
+                                    aria-pressed={active}
                                     type="button"
                                     onClick={e => { e.stopPropagation(); onToggleConnection(res.id) }}
-                                    style={{
-                                      flexShrink: 0, appearance: 'none',
-                                      width: 26, height: 26, borderRadius: 6,
-                                      display: 'grid', placeItems: 'center', cursor: 'pointer',
-                                      border: 'none',
-                                      background: active ? color : 'transparent',
-                                      color: active ? '#fff' : 'var(--text-faint)',
-                                      transition: 'color 120ms cubic-bezier(0.23,1,0.32,1), background 120ms cubic-bezier(0.23,1,0.32,1)',
-                                    }}
-                                    onMouseEnter={e => { if (!active) e.currentTarget.style.color = 'var(--text-primary)' }}
-                                    onMouseLeave={e => { if (!active) e.currentTarget.style.color = 'var(--text-faint)' }}
+                                    className={`${ROW_ROUND} h-7 w-7 ${active ? 'text-info' : 'text-content-muted hover:text-content'}`}
                                   >
-                                    <RouteIcon size={13} />
+                                    <RouteIcon size={13} strokeWidth={2.2} />
                                   </button>
                                 </Tooltip>
                               )
                             })()}
                           </div>
                           {transitMeta && expandedTransitIds.has(res.id) && (
-                            <div style={{ margin: '2px 8px 4px', padding: '9px 10px 9px 12px', borderRadius: 6, border: `1px solid ${color}26`, background: `${color}05` }}>
+                            <div style={{ margin: '2px 0 4px', padding: '9px 10px 9px 12px', borderRadius: 12, border: `1px solid ${tintOf(color, 18)}`, background: tintOf(color, 4) }}>
                               <TransitItineraryInline legs={transitMeta.legs} t={t} />
                             </div>
                           )}
@@ -2699,7 +2613,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       return (
                         <React.Fragment key={`note-${note.id}`}>
                         <div
-                          className="dp-row"
+                          className="dp-row group"
+                          data-dp="note-row"
                           draggable={canEditDays && !dragDisabled}
                           onDragStart={e => { if (!canEditDays || dragDisabled) { e.preventDefault(); return } e.dataTransfer.setData('noteId', String(note.id)); e.dataTransfer.setData('fromDayId', String(day.id)); e.dataTransfer.effectAllowed = 'move'; dragDataRef.current = { noteId: String(note.id), fromDayId: String(day.id) }; setDraggingId(`note-${note.id}`) }}
                           onDragEnd={() => { setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null }}
@@ -2759,20 +2674,12 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               openEditNote(day.id, note)
                             },
                           } : {})}
-                          onMouseEnter={e => {
-                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
-                            if (grip) grip.style.opacity = '1'
-                          }}
-                          onMouseLeave={e => {
-                            const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
-                            if (grip) grip.style.opacity = '0.3'
-                          }}
                           style={{
                             position: 'relative',
                             display: 'flex', alignItems: 'center', gap: 8,
-                            padding: '7px 8px 7px 2px',
-                            margin: '1px 8px',
-                            borderRadius: 6,
+                            padding: `7px 4px 7px ${gripsShown ? 2 : 8}px`,
+                            margin: '2px 0',
+                            borderRadius: 12,
                             border: `1px solid ${noteSkin.border}`,
                             borderTop: showDropLine ? '2px solid var(--text-primary)' : undefined,
                             background: noteSkin.background,
@@ -2780,18 +2687,18 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             transition: 'background 0.1s', cursor: canEditDays ? 'pointer' : 'default', userSelect: 'none',
                           }}
                         >
-                          {canEditDays && !dragDisabled && <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
+                          {canEditDays && !dragDisabled && <div className="dp-grip flex flex-none cursor-grab items-center text-content-faint opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-40">
                             <GripVertical size={13} strokeWidth={1.8} />
                           </div>}
-                          <div style={{ width: 28, height: 28, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: noteSkin.iconBackground, overflow: 'hidden' }}>
-                            <NoteIcon size={13} strokeWidth={1.8} color={noteSkin.iconColor} />
+                          <div className="grid h-8 w-8 flex-none place-items-center overflow-hidden rounded-full" style={{ background: noteSkin.iconBackground }}>
+                            <NoteIcon size={14} strokeWidth={1.9} color={noteSkin.iconColor} />
                           </div>
                           <div style={{ flex: 1, minWidth: 0 }}>
-                            <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, color: 'var(--text-primary)', wordBreak: 'break-word' }}>
+                            <span className="font-semibold text-content" style={{ ...fs(13, 'body'), wordBreak: 'break-word', lineHeight: 1.25 }}>
                               {note.text}
                             </span>
                             {note.time && (
-                              <div className="collab-note-md" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 400, color: 'var(--text-faint)', lineHeight: '1.4', marginTop: 2, wordBreak: 'break-word' }}>
+                              <div className="collab-note-md mt-0.5 text-content-muted" style={{ ...fs(11), lineHeight: 1.4, wordBreak: 'break-word' }}>
                                 {/* A link in a note goes to its own tab, and remarkBreaks
                                     keeps a single newline a line break — people write notes
                                     as lines, not as Markdown paragraphs. */}
@@ -2800,9 +2707,16 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             )}
                           </div>
                         {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
-                          <button type="button" onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} className={noteIdx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
-                          <button type="button" onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'down') }} disabled={noteIdx === merged.length - 1} className={noteIdx === merged.length - 1 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === merged.length - 1 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronDown size={12} strokeWidth={2} /></button>
+                          <button type="button" onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} aria-label={t('dayplan.moveUp')} className="flex text-content-faint hover:text-content disabled:cursor-default disabled:text-edge"><ChevronUp size={12} strokeWidth={2} /></button>
+                          <button type="button" onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'down') }} disabled={noteIdx === merged.length - 1} aria-label={t('dayplan.moveDown')} className="flex text-content-faint hover:text-content disabled:cursor-default disabled:text-edge"><ChevronDown size={12} strokeWidth={2} /></button>
                         </div>}
+                        {canEditDays && (
+                          <MoreButton label={t('files.menu')} size={24} items={[
+                            { label: t('common.edit'), icon: Pencil, onClick: () => openEditNote(day.id, note) },
+                            { divider: true },
+                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => setPendingDeleteNote({ dayId: day.id, noteId: note.id }) },
+                          ]} />
+                        )}
                         </div>
                         </React.Fragment>
                       )
@@ -2865,8 +2779,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
 
                   {/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte — oder 1 Ort mit Hotel-Bookend #1330 — oder Hotel-zu-Hotel-Transfertag ohne Orte #1297) */}
                   {showRouteTools && (
-                    <div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
-                      <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
+                    <div data-dp="route-tools" className="mt-1 flex flex-col gap-2 border-t border-edge-faint px-1 pb-0.5 pt-2">
+                      <div className="flex items-center gap-1">
                         <button type="button"
                           onClick={() => {
                             if (showRouteToolsWhenExpanded) {
@@ -2885,90 +2799,25 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             }
                           }}
                           aria-label={t('dayplan.route')}
-                          className={routeActive ? 'bg-accent text-accent-text' : 'bg-transparent text-content-secondary'}
-                          style={{
-                            flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-                            padding: '6px 0', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, borderRadius: 8,
-                            border: routeActive ? 'none' : '1px solid var(--border-faint)',
-                            cursor: 'pointer', fontFamily: 'inherit',
-                          }}
+                          aria-pressed={routeActive}
+                          className={`inline-flex h-8 flex-none items-center gap-1.5 rounded-[10px] px-3 font-semibold transition-colors ${routeActive ? 'bg-accent text-accent-text' : `${ROUTE_TOOL} text-content-secondary hover:text-content`}`}
+                          style={fs(12, 'body')}
                         >
-                          <RouteIcon size={12} strokeWidth={2} />
+                          <RouteIcon size={13} strokeWidth={2.2} />
                           {!narrowPanel && t('dayplan.route')}
                         </button>
-                        {/* Open the day's stops as a route in Google Maps (planned order). #1255 */}
-                        {exportStops.length > 0 && <Tooltip label={t('planner.openGoogleMaps')} placement="top">
-                          <button type="button"
-                            onClick={() => {
-                              const url = generateGoogleMapsUrl(exportStops)
-                              if (url) window.open(url, '_blank', 'noopener,noreferrer')
-                            }}
-                            aria-label={t('planner.openGoogleMaps')}
-                            className="bg-transparent text-content-secondary"
-                            style={{
-                              display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-faint)',
-                              cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
-                            }}
-                          >
-                            <GoogleMapsIcon size={14} />
-                          </button>
-                        </Tooltip>}
-                        {/* The same day, handed to CoMaps for offline navigation (#1904). The
-                            day's own travel mode rides along, so the route it builds walks
-                            when the plan walks. */}
-                        {exportStops.length > 0 && <Tooltip label={t('planner.openCoMaps')} placement="top">
-                          <button type="button"
-                            onClick={() => {
-                              const url = generateCoMapsUrl(exportStops, day.default_transport_mode ?? routeProfile)
-                              if (url) window.open(url, '_blank', 'noopener,noreferrer')
-                            }}
-                            aria-label={t('planner.openCoMaps')}
-                            className="bg-transparent text-content-secondary"
-                            style={{
-                              display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-faint)',
-                              cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
-                            }}
-                          >
-                            <Compass size={14} strokeWidth={2} />
-                          </button>
-                        </Tooltip>}
-                        {/* Icon-only, like the two map hand-offs beside it (#1981). It
-                            was the one button here carrying a label with no room for
-                            it: `flex: 1` alongside `padding: '6px 0'` meant the text
-                            sat against both edges as soon as the row filled up, and
-                            the row gained a button when CoMaps arrived. The label
-                            stays as the accessible name and the tooltip. */}
-                        <Tooltip label={t('dayplan.optimize')} placement="top">
-                          <button type="button"
-                            onClick={() => handleOptimize(day.id)}
-                            aria-label={t('dayplan.optimize')}
-                            className="bg-surface-hover text-content-secondary"
-                            style={{
-                              display: 'flex', alignItems: 'center', justifyContent: 'center',
-                              padding: '6px 10px', borderRadius: 8, border: 'none',
-                              cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
-                            }}
-                          >
-                            <RotateCcw size={14} strokeWidth={2} />
-                          </button>
-                        </Tooltip>
-                        <div style={{ display: 'flex', borderRadius: 8, overflow: 'hidden', border: '1px solid var(--border-faint)', flexShrink: 0 }}>
+                        {/* The day's travel mode as one segmented control. */}
+                        <div className={`inline-flex h-8 flex-none items-center gap-0.5 rounded-[10px] p-[3px] ${ROUTE_TOOL}`}>
                           {routeProfileOptions.map(p => {
                             const ModeIcon = p.key === 'driving' ? Car : p.key === 'walking' ? Footprints : Zap
                             const active = (day.default_transport_mode ?? routeProfile) === p.key
                             return (
-                              <Tooltip label={p.label} placement="top">
+                              <Tooltip key={p.key} label={p.label} placement="top">
                                 <button type="button"
-                                  key={p.key}
                                   onClick={() => setDayDefaultMode(day.id, p.key)}
                                   aria-label={p.label}
-                                  className={active ? 'bg-accent text-accent-text' : 'bg-transparent text-content-secondary'}
-                                  style={{
-                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                    padding: '6px 10px', border: 'none', cursor: 'pointer',
-                                  }}
+                                  aria-pressed={active}
+                                  className={`grid h-[26px] w-8 place-items-center rounded-[7px] transition-colors ${active ? 'bg-surface-tertiary text-content' : 'text-content-muted hover:text-content'}`}
                                 >
                                   <ModeIcon size={13} strokeWidth={2} />
                                 </button>
@@ -2976,15 +2825,37 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                             )
                           })}
                         </div>
+                        <span className="flex-1" />
+                        {/* Icon-only (#1981): the label stays as the accessible name and the tooltip. */}
+                        <BarButton label={t('dayplan.optimize')} onClick={() => handleOptimize(day.id)} placement="top" className={ROUTE_TOOL}>
+                          <RotateCcw size={14} strokeWidth={2} />
+                        </BarButton>
+                        {/* Open the day's stops as a route in Google Maps (planned order). #1255 */}
+                        {exportStops.length > 0 && (
+                          <BarButton label={t('planner.openGoogleMaps')} placement="top" className={ROUTE_TOOL} onClick={() => {
+                            const url = generateGoogleMapsUrl(exportStops)
+                            if (url) window.open(url, '_blank', 'noopener,noreferrer')
+                          }}>
+                            <GoogleMapsIcon size={14} />
+                          </BarButton>
+                        )}
+                        {/* The same day, handed to CoMaps for offline navigation (#1904). The
+                            day's own travel mode rides along, so the route it builds walks
+                            when the plan walks. */}
+                        {exportStops.length > 0 && (
+                          <BarButton label={t('planner.openCoMaps')} placement="top" className={ROUTE_TOOL} onClick={() => {
+                            const url = generateCoMapsUrl(exportStops, day.default_transport_mode ?? routeProfile)
+                            if (url) window.open(url, '_blank', 'noopener,noreferrer')
+                          }}>
+                            <Compass size={14} strokeWidth={2} />
+                          </BarButton>
+                        )}
                       </div>
                       {/* Time plugins contributed to this day (charging, buffers) — the
                           dayScheduleProvider minutes folded into the footer total. */}
                       {isSelected && daySchedule.minutesByDay[day.id] ? (
-                        <div className="text-content-secondary bg-surface-hover" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, fontSize: 'calc(12px * var(--fs-scale-body, 1))', borderRadius: 8, padding: '5px 10px' }}>
-                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
-                            <Zap size={11} strokeWidth={2} />
-                            +{formatScheduleMinutes(daySchedule.minutesByDay[day.id])}
-                          </span>
+                        <div className="flex justify-center">
+                          <SoftPill icon={<Zap size={11} strokeWidth={2} />}>+{formatScheduleMinutes(daySchedule.minutesByDay[day.id])}</SoftPill>
                         </div>
                       ) : null}
                     </div>
diff --git a/client/src/components/Planner/DayPlanSidebarFooter.tsx b/client/src/components/Planner/DayPlanSidebarFooter.tsx
index 789ebfbf0..7fd090020 100644
--- a/client/src/components/Planner/DayPlanSidebarFooter.tsx
+++ b/client/src/components/Planner/DayPlanSidebarFooter.tsx
@@ -1,14 +1,21 @@
+import { Wallet } from 'lucide-react'
+import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
+
 interface DayPlanSidebarFooterProps {
   totalCostLabel: string | null
   t: (key: string, params?: Record<string, any>) => string
 }
 
+/** The trip's total cost at the foot of the day list, on the panel's tinted band. */
 export function DayPlanSidebarFooter({ totalCostLabel, t }: DayPlanSidebarFooterProps) {
   if (!totalCostLabel) return null
   return (
-    <div className="border-t border-edge-faint" style={{ flexShrink: 0, padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-      <span className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>{t('dayplan.totalCost')}</span>
-      <span className="text-content" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{totalCostLabel}</span>
+    <div className="flex flex-none items-center justify-between gap-3 border-t border-edge-faint px-4 py-2.5" style={{ background: NEUTRAL_TINT }}>
+      <span className="font-geist font-bold uppercase tracking-[.08em] text-content-faint" style={fs(9.5)}>{t('dayplan.totalCost')}</span>
+      <span className="inline-flex items-center gap-1.5 rounded-full bg-surface-card px-2.5 py-1 font-geist font-bold tabular-nums text-content shadow-sm" style={fs(12, 'body')}>
+        <Wallet size={12} strokeWidth={2.2} className="text-content-faint" />
+        {totalCostLabel}
+      </span>
     </div>
   )
 }
diff --git a/client/src/components/Planner/DayPlanSidebarNoteModal.test.tsx b/client/src/components/Planner/DayPlanSidebarNoteModal.test.tsx
new file mode 100644
index 000000000..226d7e835
--- /dev/null
+++ b/client/src/components/Planner/DayPlanSidebarNoteModal.test.tsx
@@ -0,0 +1,178 @@
+// FE-PLANNER-NOTEMODAL-001 to FE-PLANNER-NOTEMODAL-014
+import { render, screen, fireEvent } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { DayPlanSidebarNoteModal } from './DayPlanSidebarNoteModal'
+
+// `t` arrives as a prop, so echoing the key keeps the assertions exact. The
+// shared pieces (the close and delete buttons, the colour swatches) read the
+// English catalogue.
+const t = (key: string) => key
+
+type Ui = { mode: 'add' | 'edit'; noteId?: number; icon: string; text: string; time: string; color?: string | null }
+
+/** Holds the note map like the planner's hook does, so typing reaches the fields. */
+function setup(initial: Record<string, Ui | undefined>, overrides: Partial<React.ComponentProps<typeof DayPlanSidebarNoteModal>> = {}) {
+  let state = initial
+  const cancelNote = vi.fn()
+  const saveNote = vi.fn()
+  const onRequestDelete = vi.fn()
+  const setNoteUi = vi.fn((updater: (prev: typeof state) => typeof state) => {
+    state = updater(state)
+    view.rerender(ui())
+  })
+  const ui = () => (
+    <DayPlanSidebarNoteModal
+      noteUi={state}
+      setNoteUi={setNoteUi}
+      noteInputRef={{ current: null }}
+      cancelNote={cancelNote}
+      saveNote={saveNote}
+      onRequestDelete={onRequestDelete}
+      t={t}
+      {...overrides}
+    />
+  )
+  const view = render(ui())
+  return { cancelNote, saveNote, onRequestDelete, setNoteUi, get state() { return state } }
+}
+
+const adding = (fields: Partial<Ui> = {}): Ui => ({ mode: 'add', icon: 'FileText', text: '', time: '', color: null, ...fields })
+
+describe('DayPlanSidebarNoteModal', () => {
+  it('FE-PLANNER-NOTEMODAL-001: nothing open, nothing shown', () => {
+    setup({ '10': undefined })
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-NOTEMODAL-002: a new note is a dialog named "Add Note" with the title field focused', () => {
+    setup({ '10': adding() })
+    expect(screen.getByRole('dialog', { name: 'dayplan.noteAdd' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'dayplan.noteTitle' })).toHaveFocus()
+    // Nothing to delete yet.
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-NOTEMODAL-003: typing the title reaches the day entry and the preview card', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding() })
+    // An empty title cannot be added.
+    expect(screen.getByRole('button', { name: 'common.add' })).toBeDisabled()
+    await user.type(screen.getByRole('textbox', { name: 'dayplan.noteTitle' }), 'Ferry')
+    expect(s.state['10']?.text).toBe('Ferry')
+    expect(screen.getByText('Ferry')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'common.add' })).toBeEnabled()
+  })
+
+  it('FE-PLANNER-NOTEMODAL-004: Enter in the title saves the note', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry' }) })
+    await user.type(screen.getByRole('textbox', { name: 'dayplan.noteTitle' }), '{Enter}')
+    expect(s.saveNote).toHaveBeenCalledWith(10)
+  })
+
+  it('FE-PLANNER-NOTEMODAL-005: Save and Cancel answer for their own day', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry' }) })
+    await user.click(screen.getByRole('button', { name: 'common.add' }))
+    expect(s.saveNote).toHaveBeenCalledWith(10)
+    await user.click(screen.getByRole('button', { name: 'common.cancel' }))
+    expect(s.cancelNote).toHaveBeenCalledWith(10)
+  })
+
+  it('FE-PLANNER-NOTEMODAL-006: Escape in the title or the body cancels', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry' }) })
+    await user.keyboard('{Escape}')
+    expect(s.cancelNote).toHaveBeenCalledWith(10)
+    s.cancelNote.mockClear()
+    await user.click(screen.getByRole('textbox', { name: 'dayplan.noteSubtitle' }))
+    await user.keyboard('{Escape}')
+    expect(s.cancelNote).toHaveBeenCalledWith(10)
+  })
+
+  // The lost-note bug: a selection dragged out of a field and let go over the
+  // backdrop used to count as a click on it and threw the note away.
+  it('FE-PLANNER-NOTEMODAL-007: a press that starts in the dialog and ends on the backdrop keeps the note', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry' }) })
+    const dialog = screen.getByRole('dialog')
+    fireEvent.mouseDown(screen.getByRole('textbox', { name: 'dayplan.noteTitle' }))
+    fireEvent.click(dialog.parentElement as HTMLElement)
+    expect(s.cancelNote).not.toHaveBeenCalled()
+    // A press that starts and ends on the backdrop still closes.
+    await user.click(dialog.parentElement as HTMLElement)
+    expect(s.cancelNote).toHaveBeenCalledWith(10)
+  })
+
+  it('FE-PLANNER-NOTEMODAL-008: the icon grid marks the pick and names each icon', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding() })
+    const group = screen.getByRole('group', { name: 'dayplan.noteIcon' })
+    expect(group.querySelectorAll('button')).toHaveLength(32)
+    expect(screen.getByRole('button', { name: 'FileText' })).toHaveAttribute('aria-pressed', 'true')
+    await user.click(screen.getByRole('button', { name: 'Plane' }))
+    expect(s.state['10']?.icon).toBe('Plane')
+    expect(screen.getByRole('button', { name: 'Plane' })).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByRole('button', { name: 'FileText' })).toHaveAttribute('aria-pressed', 'false')
+  })
+
+  it('FE-PLANNER-NOTEMODAL-009: the shared tooltip names an icon on hover', async () => {
+    const user = userEvent.setup()
+    setup({ '10': adding() })
+    const plane = screen.getByRole('button', { name: 'Plane' })
+    expect(plane).not.toHaveAttribute('title')
+    await user.hover(plane)
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Plane')
+  })
+
+  it('FE-PLANNER-NOTEMODAL-010: a colour pick tints the head band', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry' }) })
+    await user.click(screen.getByRole('button', { name: 'Red' }))
+    expect(s.state['10']?.color).toBe('#dc2626')
+    const header = screen.getByRole('dialog').querySelector('header') as HTMLElement
+    // jsdom normalises the hex inside color-mix() to rgb().
+    expect(header.style.background).toContain('220, 38, 38')
+  })
+
+  it('FE-PLANNER-NOTEMODAL-011: the body renders as markdown under the field, with a counter that warns near the limit', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding({ text: 'Ferry', time: 'book **early**' }) })
+    expect(screen.getByText('early').tagName).toBe('STRONG')
+    expect(screen.getByText('notes.markdownHint')).toBeInTheDocument()
+    expect(screen.getByText('14/2000')).toHaveClass('text-content-faint')
+    const body = screen.getByRole('textbox', { name: 'dayplan.noteSubtitle' })
+    expect(body).toHaveAttribute('maxLength', '2000')
+    expect(body).toHaveAttribute('rows', '6')
+    fireEvent.change(body, { target: { value: 'x'.repeat(1900) } })
+    expect(s.state['10']?.time).toHaveLength(1900)
+    expect(screen.getByText('1900/2000')).toHaveClass('text-warning')
+    // The formatting bar writes into the same field.
+    await user.click(screen.getByRole('button', { name: 'Bold' }))
+    expect(s.setNoteUi).toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-NOTEMODAL-012: an edited note is named "Edit Note", saves, and asks the planner before it deletes', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': { mode: 'edit', noteId: 55, icon: 'Plane', text: 'Ferry', time: '', color: null } })
+    expect(screen.getByRole('dialog', { name: 'dayplan.noteEdit' })).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'common.save' }))
+    expect(s.saveNote).toHaveBeenCalledWith(10)
+    await user.click(screen.getByRole('button', { name: 'Delete' }))
+    expect(s.onRequestDelete).toHaveBeenCalledWith(10, 55)
+  })
+
+  it('FE-PLANNER-NOTEMODAL-013: the head band close button cancels', async () => {
+    const user = userEvent.setup()
+    const s = setup({ '10': adding() })
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(s.cancelNote).toHaveBeenCalledWith(10)
+  })
+
+  it('FE-PLANNER-NOTEMODAL-014: the two columns stack on a narrow window', () => {
+    setup({ '10': adding() })
+    const columns = screen.getByRole('group', { name: 'dayplan.noteIcon' }).closest('.grid') as HTMLElement
+    expect(columns).toHaveClass('grid-cols-1')
+    expect(columns.className).toMatch(/sm:grid-cols-\[210px_minmax\(0,1fr\)\]/)
+  })
+})
diff --git a/client/src/components/Planner/DayPlanSidebarNoteModal.tsx b/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
index 881c96298..2cb64bca6 100644
--- a/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarNoteModal.tsx
@@ -1,5 +1,4 @@
-import { useRef } from 'react'
-import { createPortal } from 'react-dom'
+import { useId, useRef } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -8,6 +7,11 @@ import NoteFormatToolbar from '../shared/NoteFormatToolbar'
 import NoteColorPicker from '../shared/NoteColorPicker'
 import { noteSurface } from './noteSurface'
 import { markdownLinkComponents } from '../shared/markdownLink'
+import { Tooltip } from '../shared/Tooltip'
+import { DeleteButton, DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { EditorField, TEXTAREA } from '../shared/dialogParts'
+import { EYEBROW } from './bookings/bookingParts'
+import { tintOf } from './planParts'
 
 interface NoteModalUi {
   mode: 'add' | 'edit'
@@ -23,179 +27,165 @@ type NoteUiMap = Record<string, NoteModalUi | undefined>
 interface DayPlanSidebarNoteModalProps {
   noteUi: NoteUiMap
   setNoteUi: (updater: (prev: NoteUiMap) => NoteUiMap) => void
+  /**
+   * The hook's handle on the title field. The field sits in the dialog's head
+   * band now and takes the focus itself when the dialog opens, so the hook's
+   * delayed focus call finds nothing to do.
+   */
   noteInputRef: React.RefObject<HTMLInputElement>
   cancelNote: (dayId: number) => void
   saveNote: (dayId: number) => void
   /** Asks the planner to confirm and then delete the note being edited (#2249). */
   onRequestDelete: (dayId: number, noteId: number) => void
-  t: (key: string, params?: Record<string, unknown>) => string
+  t: (key: string, params?: Record<string, string | number>) => string
 }
 
+type NoteDialogProps = Omit<DayPlanSidebarNoteModalProps, 'noteUi' | 'noteInputRef'> & { dayId: string; ui: NoteModalUi | undefined }
+
 const BODY_MAX = 2000
 
 /**
- * Add/edit dialog for a day note (#1629).
+ * Add/edit dialog for a day note (#1629), one per day whose note is open.
  *
- * Two columns on anything wider than a phone: how the note looks on the left
- * (icon, colour, and a preview of the card it will become), what it says on the
- * right. The preview is the reason the colour picker is worth having — a swatch
- * row tells you nothing about what a tinted card looks like next to a place.
+ * The title is typed into the head band, whose tile already shows the icon in
+ * the note's colour. Below it two columns on anything wider than a phone: how
+ * the note looks on the left (icon, colour, and a preview of the card it will
+ * become), what it says on the right. The preview is the reason the colour
+ * picker is worth having: a swatch row tells you nothing about what a tinted
+ * card looks like next to a place.
  */
-export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cancelNote, saveNote, onRequestDelete, t }: DayPlanSidebarNoteModalProps) {
+export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, cancelNote, saveNote, onRequestDelete, t }: DayPlanSidebarNoteModalProps) {
   return (
     <>
-      {Object.entries(noteUi).map(([dayId, ui]) => ui && createPortal(
-        <NoteDialog key={dayId} dayId={dayId} ui={ui} setNoteUi={setNoteUi} noteInputRef={noteInputRef}
-          cancelNote={cancelNote} saveNote={saveNote} onRequestDelete={onRequestDelete} t={t} />,
-        document.body
+      {Object.entries(noteUi).map(([dayId, ui]) => (
+        <NoteDialog key={dayId} dayId={dayId} ui={ui} setNoteUi={setNoteUi}
+          cancelNote={cancelNote} saveNote={saveNote} onRequestDelete={onRequestDelete} t={t} />
       ))}
     </>
   )
 }
 
-function NoteDialog({ dayId, ui, setNoteUi, noteInputRef, cancelNote, saveNote, onRequestDelete, t }: Omit<DayPlanSidebarNoteModalProps, 'noteUi'> & {
-  dayId: string
-  ui: NoteModalUi
-}) {
+function NoteDialog({ dayId, ui, ...rest }: NoteDialogProps) {
+  return ui ? <OpenNoteDialog dayId={dayId} ui={ui} {...rest} /> : null
+}
+
+function OpenNoteDialog({ dayId, ui, setNoteUi, cancelNote, saveNote, onRequestDelete, t }: NoteDialogProps & { ui: NoteModalUi }) {
   const bodyRef = useRef<HTMLTextAreaElement | null>(null)
+  const labelId = useId()
+  const bodyId = `${labelId}-body`
+  const day = Number(dayId)
   const patch = (fields: Partial<NoteModalUi>) =>
     setNoteUi(prev => ({ ...prev, [dayId]: { ...(prev[dayId] as NoteModalUi), ...fields } }))
 
   const color = ui.color ?? null
   const surface = noteSurface(color)
-  const PreviewIcon = getNoteIcon(ui.icon)
+  const NoteIcon = getNoteIcon(ui.icon)
   const canSave = Boolean(ui.text?.trim())
   const bodyLen = ui.time?.length || 0
 
+  const header = (
+    <DialogHeader
+      tile={<DialogTile><NoteIcon size={20} strokeWidth={1.9} color={color ?? 'var(--text-muted)'} /></DialogTile>}
+      tint={color ? tintOf(color, 12) : NEUTRAL_TINT}
+      labelId={labelId}
+      onClose={() => cancelNote(day)}
+      eyebrow={ui.mode === 'add' ? t('dayplan.noteAdd') : t('dayplan.noteEdit')}
+      titleInput={{
+        value: ui.text,
+        onChange: text => patch({ text }),
+        label: t('dayplan.noteTitle'),
+        placeholder: t('dayplan.noteTitle'),
+        autoFocus: true,
+        required: true,
+        onKeyDown: e => { if (e.key === 'Enter') saveNote(day) },
+      }}
+    />
+  )
+
+  // Delete lives here rather than on the row: the row's floating pencil/trash
+  // pill covered the reorder chevrons and, on a coarse pointer, never went
+  // away (#2249). The planner still confirms before it deletes.
+  const footer = (
+    <DialogFooter>
+      {ui.mode === 'edit' && ui.noteId != null && <DeleteButton onClick={() => onRequestDelete(day, ui.noteId!)} />}
+      <FooterSpacer />
+      <DialogButton onClick={() => cancelNote(day)}>{t('common.cancel')}</DialogButton>
+      <DialogButton variant="primary" onClick={() => saveNote(day)} disabled={!canSave}>
+        {ui.mode === 'add' ? t('common.add') : t('common.save')}
+      </DialogButton>
+    </DialogFooter>
+  )
+
   return (
-    <div className="bg-[rgba(0,0,0,0.3)]" style={{
-      position: 'fixed', inset: 0, zIndex: 10000,
-      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
-      backdropFilter: 'blur(3px)',
-    }} role="presentation" onClick={() => cancelNote(Number(dayId))}>
-      <div className="bg-surface-card note-modal" style={{
-        width: '100%', maxWidth: 720, maxHeight: '90vh', overflowY: 'auto', borderRadius: 16,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-        display: 'flex', flexDirection: 'column', gap: 16,
-      }} role="presentation" onClick={e => e.stopPropagation()}>
-        <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600 }}>
-          {ui.mode === 'add' ? t('dayplan.noteAdd') : t('dayplan.noteEdit')}
+    <DialogShell onClose={() => cancelNote(day)} labelledBy={labelId} width="editor" header={header} footer={footer}>
+      <div className="grid grid-cols-1 items-start gap-5 sm:grid-cols-[210px_minmax(0,1fr)]">
+        {/* Left: how it looks. */}
+        <div className="flex min-w-0 flex-col gap-4">
+          <EditorField label={t('dayplan.noteIcon')}>
+            <div role="group" aria-label={t('dayplan.noteIcon')} className="flex flex-wrap gap-[5px]">
+              {NOTE_ICONS.map(({ id, Icon }) => {
+                const on = ui.icon === id
+                // The icons have no names of their own in the catalogue, so the id is what the tooltip says.
+                return (
+                  <Tooltip key={id} label={id}>
+                    <button type="button" onClick={() => patch({ icon: id })} aria-pressed={on} aria-label={id}
+                      className={`grid h-[38px] w-[38px] place-items-center rounded-[10px] border-2 ${on ? 'border-content bg-surface-hover' : 'border-edge-faint hover:bg-surface-hover'}`}>
+                      <Icon size={16} strokeWidth={1.8} color={on ? (color ?? 'var(--text-primary)') : 'var(--text-muted)'} />
+                    </button>
+                  </Tooltip>
+                )
+              })}
+            </div>
+          </EditorField>
+
+          <EditorField label={t('notes.color.label')}>
+            <NoteColorPicker value={color} onChange={c => patch({ color: c })} />
+          </EditorField>
+
+          <EditorField label={t('notes.preview')}>
+            {/* The same shape the card takes in the day plan. */}
+            <div className="flex items-center gap-2 rounded-[10px] border px-2 py-[7px]" style={{ borderColor: surface.border, background: surface.background }}>
+              <span className="grid h-7 w-7 flex-none place-items-center rounded-full" style={{ background: surface.iconBackground }}>
+                <NoteIcon size={13} strokeWidth={1.8} color={surface.iconColor} />
+              </span>
+              <span className="min-w-0 break-words font-medium text-content" style={fs(12.5, 'body')}>
+                {ui.text?.trim() || t('dayplan.noteTitle')}
+              </span>
+            </div>
+          </EditorField>
         </div>
 
-        <div className="note-modal-cols" style={{ display: 'grid', gridTemplateColumns: '210px 1fr', gap: 20, alignItems: 'start' }}>
-          {/* Left — how it looks. */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
-            <div>
-              <div className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.09em', marginBottom: 7 }}>
-                {t('dayplan.noteIcon')}
-              </div>
-              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
-                {NOTE_ICONS.map(({ id, Icon }) => (
-                  <button key={id} type="button" onClick={() => patch({ icon: id })} title={id}
-                    aria-pressed={ui.icon === id}
-                    className={ui.icon === id ? 'bg-surface-hover' : 'bg-transparent'}
-                    style={{ width: 38, height: 38, borderRadius: 8, border: ui.icon === id ? '2px solid var(--text-primary)' : '2px solid var(--border-faint)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>
-                    <Icon size={16} strokeWidth={1.8} color={ui.icon === id ? (color ?? 'var(--text-primary)') : 'var(--text-muted)'} />
-                  </button>
-                ))}
-              </div>
+        {/* Right: what it says. */}
+        <div className="flex min-w-0 flex-col gap-3">
+          <div className="min-w-0">
+            <div className="mb-[5px] flex flex-wrap items-center justify-between gap-2">
+              <label htmlFor={bodyId} className={EYEBROW} style={fs(9.5)}>{t('dayplan.noteSubtitle')}</label>
+              <NoteFormatToolbar textareaRef={bodyRef} onChange={v => patch({ time: v })} compact />
             </div>
-
-            <div>
-              <div className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.09em', marginBottom: 7 }}>
-                {t('notes.color.label')}
-              </div>
-              <NoteColorPicker value={color} onChange={c => patch({ color: c })} />
-            </div>
-
-            <div>
-              <div className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.09em', marginBottom: 7 }}>
-                {t('notes.preview')}
-              </div>
-              {/* The same shape the card takes in the day plan. */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 8px', borderRadius: 6, border: `1px solid ${surface.border}`, background: surface.background }}>
-                <div style={{ width: 28, height: 28, flexShrink: 0, display: 'grid', placeItems: 'center', borderRadius: '50%', background: surface.iconBackground }}>
-                  <PreviewIcon size={13} strokeWidth={1.8} color={surface.iconColor} />
-                </div>
-                <span className="text-content" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, minWidth: 0, wordBreak: 'break-word' }}>
-                  {ui.text?.trim() || t('dayplan.noteTitle')}
-                </span>
-              </div>
+            <textarea
+              id={bodyId}
+              ref={bodyRef}
+              value={ui.time}
+              maxLength={BODY_MAX}
+              rows={6}
+              onChange={e => patch({ time: e.target.value })}
+              placeholder={t('notes.bodyPlaceholder')}
+              className={`${TEXTAREA} resize-y`}
+            />
+            <div className="mt-1 flex justify-between gap-2" style={fs(10.5)}>
+              <span className="text-content-faint">{t('notes.markdownHint')}</span>
+              <span className={`tabular-nums ${bodyLen >= BODY_MAX - 100 ? 'text-warning' : 'text-content-faint'}`}>{bodyLen}/{BODY_MAX}</span>
             </div>
           </div>
 
-          {/* Right — what it says. */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 0 }}>
-            <div>
-              <label className="text-content-faint" htmlFor="note-title" style={{ display: 'block', fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.09em', marginBottom: 7 }}>
-                {t('dayplan.noteTitle')} *
-              </label>
-              <input
-                id="note-title"
-                ref={noteInputRef}
-                type="text"
-                value={ui.text}
-                onChange={e => patch({ text: e.target.value })}
-                onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); saveNote(Number(dayId)) } if (e.key === 'Escape') cancelNote(Number(dayId)) }}
-                placeholder={t('dayplan.noteTitle')}
-                required
-                className="text-content bg-surface-input"
-                style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '9px 11px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box' }}
-              />
+          {ui.time?.trim() && (
+            <div className="collab-note-md-full max-h-[200px] overflow-y-auto rounded-[10px] border px-3 py-2.5 leading-[1.55] text-content-muted"
+              style={{ ...fs(12, 'body'), borderColor: surface.border, background: surface.background, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{ui.time}</Markdown>
             </div>
-
-            <div>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 7, flexWrap: 'wrap' }}>
-                <label className="text-content-faint" htmlFor="note-body" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.09em' }}>
-                  {t('dayplan.noteSubtitle')}
-                </label>
-                <NoteFormatToolbar textareaRef={bodyRef} onChange={v => patch({ time: v })} compact />
-              </div>
-              <textarea
-                id="note-body"
-                ref={bodyRef}
-                value={ui.time}
-                maxLength={BODY_MAX}
-                rows={6}
-                onChange={e => patch({ time: e.target.value })}
-                onKeyDown={e => { if (e.key === 'Escape') cancelNote(Number(dayId)) }}
-                placeholder={t('notes.bodyPlaceholder')}
-                className="text-content bg-surface-input"
-                style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '9px 11px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box', resize: 'vertical', lineHeight: 1.5 }}
-              />
-              <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8, marginTop: 4 }}>
-                <span className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>{t('notes.markdownHint')}</span>
-                <span className={bodyLen >= BODY_MAX - 100 ? 'text-[#d97706]' : 'text-content-faint'} style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>{bodyLen}/{BODY_MAX}</span>
-              </div>
-            </div>
-
-            {ui.time?.trim() && (
-              <div className="collab-note-md-full text-content-muted" style={{ borderRadius: 10, border: `1px solid ${surface.border}`, background: surface.background, padding: '10px 12px', fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.55, wordBreak: 'break-word', overflowWrap: 'anywhere', maxHeight: 200, overflowY: 'auto' }}>
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{ui.time}</Markdown>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Delete lives here rather than on the row: the row's floating pencil/trash
-            pill covered the reorder chevrons and, on a coarse pointer, never went
-            away (#2249). The planner still confirms before it deletes. */}
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center' }}>
-          {ui.mode === 'edit' && ui.noteId != null && (
-            <button type="button" onClick={() => onRequestDelete(Number(dayId), ui.noteId!)}
-              className="text-danger"
-              style={{ marginRight: 'auto', fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 15px', cursor: 'pointer', fontFamily: 'inherit' }}>
-              {t('common.delete')}
-            </button>
           )}
-          <button type="button" onClick={() => cancelNote(Number(dayId))} className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 15px', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
-          <button type="button" onClick={() => saveNote(Number(dayId))} disabled={!canSave}
-            className={!canSave ? 'bg-[var(--border-primary)] text-content-faint' : 'bg-accent text-accent-text'}
-            style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', border: 'none', borderRadius: 8, padding: '7px 17px', cursor: !canSave ? 'not-allowed' : 'pointer', fontWeight: 600, fontFamily: 'inherit', transition: 'background 0.15s, color 0.15s' }}>
-            {ui.mode === 'add' ? t('common.add') : t('common.save')}
-          </button>
         </div>
       </div>
-    </div>
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/DayPlanSidebarRouteConnector.tsx b/client/src/components/Planner/DayPlanSidebarRouteConnector.tsx
index 255fe328e..246a30aa5 100644
--- a/client/src/components/Planner/DayPlanSidebarRouteConnector.tsx
+++ b/client/src/components/Planner/DayPlanSidebarRouteConnector.tsx
@@ -1,5 +1,6 @@
 import { Car, Footprints, Hotel, Zap } from 'lucide-react'
 import type { RouteSegment } from '../../types'
+import { fs } from '../shared/DialogShell'
 
 // Walking gets the foot icon; a plugin route profile ('plugin:…') gets the bolt —
 // its legs carry the profile-true durationText anyway, the icon just signals that
@@ -10,29 +11,31 @@ export function profileIcon(profile: string) {
   return Car
 }
 
-/** Slim travel-time connector shown between two consecutive located stops in a day. */
-export function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: string }) {
+/** The leg's figures as one quiet pill: mode, time, distance and a router note, side by side. */
+function LegPill({ seg, profile }: { seg: RouteSegment; profile: string }) {
   // The leg's own mode (#1281) wins over the day-wide fallback for icon + text.
   const effProfile = seg.mode ?? profile
   const driving = effProfile !== 'walking'
   const Icon = profileIcon(effProfile)
-  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', lineHeight: 1.2 }}>
-      <div style={line} />
-      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
-        <Icon size={11} strokeWidth={2} />
-        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
-        <span style={{ opacity: 0.4 }}>·</span>
-        <span>{seg.distanceText}</span>
-        {seg.noteText && (
-          <>
-            <span style={{ opacity: 0.4 }}>·</span>
-            <span style={{ color: 'var(--text-muted)' }}>{seg.noteText}</span>
-          </>
-        )}
-      </div>
-      <div style={line} />
+    <span className="inline-flex flex-none items-center gap-1.5 whitespace-nowrap rounded-full bg-surface-secondary px-2 py-[2px] font-geist font-semibold tabular-nums text-content-muted" style={fs(10)}>
+      <Icon size={11} strokeWidth={2} className="flex-none" />
+      <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
+      <span className="text-content-faint">{seg.distanceText}</span>
+      {seg.noteText && <span className="text-content-secondary">{seg.noteText}</span>}
+    </span>
+  )
+}
+
+const LINE = 'h-px min-w-3 flex-1 bg-edge-faint'
+
+/** Slim travel-time connector shown between two consecutive located stops in a day. */
+export function RouteConnector({ seg, profile }: { seg: RouteSegment; profile: string }) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-[3px]">
+      <span className={LINE} />
+      <LegPill seg={seg} profile={profile} />
+      <span className={LINE} />
     </div>
   )
 }
@@ -54,38 +57,23 @@ export function HotelRouteConnector({
   name: string
   placement: 'top' | 'bottom'
 }) {
-  const effProfile = seg.mode ?? profile
-  const driving = effProfile !== 'walking'
-  const Icon = profileIcon(effProfile)
-  const line = { flex: 1, height: 1, minHeight: 1, alignSelf: 'center', background: 'var(--border-primary)' }
   const hotelRow = (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '0 14px', minWidth: 0 }}>
-      <Hotel size={12} strokeWidth={1.8} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />
-      <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+    <div className="flex min-w-0 items-center justify-center gap-1.5 px-3">
+      <Hotel size={12} strokeWidth={2} className="flex-none text-content-muted" />
+      <span className="truncate font-semibold text-content-muted" style={{ ...fs(11), lineHeight: 1.2 }}>
         {name}
       </span>
     </div>
   )
   const travelRow = (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 14px', fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', lineHeight: 1.2 }}>
-      <div style={line} />
-      <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
-        <Icon size={11} strokeWidth={2} />
-        <span>{seg.durationText ?? (driving ? seg.drivingText : seg.walkingText)}</span>
-        <span style={{ opacity: 0.4 }}>·</span>
-        <span>{seg.distanceText}</span>
-        {seg.noteText && (
-          <>
-            <span style={{ opacity: 0.4 }}>·</span>
-            <span style={{ color: 'var(--text-muted)' }}>{seg.noteText}</span>
-          </>
-        )}
-      </div>
-      <div style={line} />
+    <div className="flex items-center gap-2 px-3 py-[3px]">
+      <span className={LINE} />
+      <LegPill seg={seg} profile={profile} />
+      <span className={LINE} />
     </div>
   )
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 3, padding: placement === 'top' ? '2px 0 6px' : '6px 0 2px' }}>
+    <div className={`flex flex-col gap-[3px] ${placement === 'top' ? 'pb-1.5 pt-0.5' : 'pb-0.5 pt-1.5'}`}>
       {placement === 'top' ? (
         <>
           {hotelRow}
diff --git a/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.test.tsx b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.test.tsx
new file mode 100644
index 000000000..9af70a9c6
--- /dev/null
+++ b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.test.tsx
@@ -0,0 +1,47 @@
+// FE-PLANNER-TIMECONFIRM-001 to FE-PLANNER-TIMECONFIRM-004
+import { render, screen } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { DayPlanSidebarTimeConfirmModal } from './DayPlanSidebarTimeConfirmModal'
+
+const t = (key: string, params?: Record<string, unknown>) =>
+  params ? `${key}|${Object.values(params).join('|')}` : key
+
+const pending = { dayId: 10, fromId: 22, time: '14:00' }
+
+function setup(timeConfirm: typeof pending | null = pending) {
+  const setTimeConfirm = vi.fn()
+  const confirmTimeRemoval = vi.fn()
+  render(<DayPlanSidebarTimeConfirmModal timeConfirm={timeConfirm} setTimeConfirm={setTimeConfirm} confirmTimeRemoval={confirmTimeRemoval} t={t} />)
+  return { setTimeConfirm, confirmTimeRemoval }
+}
+
+describe('DayPlanSidebarTimeConfirmModal', () => {
+  it('FE-PLANNER-TIMECONFIRM-001: nothing pending, nothing asked', () => {
+    setup(null)
+    expect(screen.queryByText('dayplan.confirmRemoveTimeTitle')).not.toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-TIMECONFIRM-002: asks with the time that would be dropped', () => {
+    setup()
+    expect(screen.getByText('dayplan.confirmRemoveTimeTitle')).toBeInTheDocument()
+    expect(screen.getByText('dayplan.confirmRemoveTimeBody|14:00')).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-TIMECONFIRM-003: Confirm removes the time, Cancel leaves it', async () => {
+    const user = userEvent.setup()
+    const s = setup()
+    await user.click(screen.getByRole('button', { name: 'common.cancel' }))
+    expect(s.setTimeConfirm).toHaveBeenCalledWith(null)
+    expect(s.confirmTimeRemoval).not.toHaveBeenCalled()
+    await user.click(screen.getByRole('button', { name: /confirm/i }))
+    expect(s.confirmTimeRemoval).toHaveBeenCalledTimes(1)
+  })
+
+  it('FE-PLANNER-TIMECONFIRM-004: Escape takes the question back', async () => {
+    const user = userEvent.setup()
+    const s = setup()
+    await user.keyboard('{Escape}')
+    expect(s.setTimeConfirm).toHaveBeenCalledWith(null)
+    expect(s.confirmTimeRemoval).not.toHaveBeenCalled()
+  })
+})
diff --git a/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
index ff5b0bf87..3c31a462b 100644
--- a/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarTimeConfirmModal.tsx
@@ -1,5 +1,4 @@
-import { createPortal } from 'react-dom'
-import { Clock } from 'lucide-react'
+import ConfirmDialog from '../shared/ConfirmDialog'
 
 interface TimeConfirmState {
   dayId: number
@@ -16,48 +15,24 @@ interface DayPlanSidebarTimeConfirmModalProps {
   timeConfirm: TimeConfirmState | null
   setTimeConfirm: (v: TimeConfirmState | null) => void
   confirmTimeRemoval: () => void
-  t: (key: string, params?: Record<string, any>) => string
+  t: (key: string, params?: Record<string, string | number>) => string
 }
 
+/**
+ * Asks before a move drops a place's time: a timed place moved out of the
+ * day's time order cannot keep its time there. The shared question dialog
+ * carries the look, Escape and the backdrop.
+ */
 export function DayPlanSidebarTimeConfirmModal({ timeConfirm, setTimeConfirm, confirmTimeRemoval, t }: DayPlanSidebarTimeConfirmModalProps) {
-  if (!timeConfirm) return null
-  return createPortal(
-    <div role="presentation" className="bg-[rgba(0,0,0,0.3)]" style={{
-      position: 'fixed', inset: 0, zIndex: 1000,
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      backdropFilter: 'blur(3px)',
-    }} onClick={() => setTimeConfirm(null)}>
-      <div role="presentation" className="bg-surface-card" style={{
-        width: 340, borderRadius: 16,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-        display: 'flex', flexDirection: 'column', gap: 12,
-      }} onClick={e => e.stopPropagation()}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <div className="bg-[rgba(239,68,68,0.12)]" style={{
-            width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-            borderRadius: '50%',
-          }}>
-            <Clock size={18} strokeWidth={1.8} color="#ef4444" />
-          </div>
-          <div className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600 }}>
-            {t('dayplan.confirmRemoveTimeTitle')}
-          </div>
-        </div>
-        <div className="text-content-secondary" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', lineHeight: 1.5 }}>
-          {t('dayplan.confirmRemoveTimeBody', { time: timeConfirm.time })}
-        </div>
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 4 }}>
-          <button type="button" onClick={() => setTimeConfirm(null)} className="text-content-muted" style={{
-            fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'none', border: '1px solid var(--border-primary)',
-            borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit',
-          }}>{t('common.cancel')}</button>
-          <button type="button" onClick={confirmTimeRemoval} className="bg-[#ef4444] text-white" style={{
-            fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-            border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
-          }}>{t('common.confirm')}</button>
-        </div>
-      </div>
-    </div>,
-    document.body
+  return (
+    <ConfirmDialog
+      isOpen={!!timeConfirm}
+      onClose={() => setTimeConfirm(null)}
+      onConfirm={confirmTimeRemoval}
+      title={t('dayplan.confirmRemoveTimeTitle')}
+      message={timeConfirm ? t('dayplan.confirmRemoveTimeBody', { time: timeConfirm.time }) : ''}
+      confirmLabel={t('common.confirm')}
+      cancelLabel={t('common.cancel')}
+    />
   )
 }
diff --git a/client/src/components/Planner/DayPlanSidebarToolbar.test.tsx b/client/src/components/Planner/DayPlanSidebarToolbar.test.tsx
index ab237c3e6..523b92f5c 100644
--- a/client/src/components/Planner/DayPlanSidebarToolbar.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebarToolbar.test.tsx
@@ -197,15 +197,16 @@ describe('DayPlanSidebarToolbar', () => {
     expect(setUndoHover).toHaveBeenCalledWith(false)
   })
 
-  it('FE-PLANNER-DPTOOLBAR-017: the undo tooltip names the last action when there is one', () => {
-    render(<DayPlanSidebarToolbar {...makeProps({ onUndo: vi.fn(), canUndo: true, undoHover: true, lastActionLabel: 'Reorder' })} />)
-    expect(screen.getByText('undo.tooltip|Reorder')).toBeInTheDocument()
+  it('FE-PLANNER-DPTOOLBAR-017: the undo tooltip names the last action when there is one', async () => {
+    const user = userEvent.setup()
+    render(<DayPlanSidebarToolbar {...makeProps({ onUndo: vi.fn(), canUndo: true, lastActionLabel: 'Reorder' })} />)
+    await user.hover(screen.getByRole('button', { name: 'undo.button' }))
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('undo.tooltip|Reorder')
   })
 
-  it('FE-PLANNER-DPTOOLBAR-018: the undo tooltip falls back to the plain label with nothing to undo', () => {
-    render(<DayPlanSidebarToolbar {...makeProps({ onUndo: vi.fn(), canUndo: false, undoHover: true, lastActionLabel: 'Reorder' })} />)
-    // Both the aria-label and the tooltip carry the same text here.
-    expect(screen.getAllByText('undo.button').length + screen.getAllByLabelText('undo.button').length).toBeGreaterThan(1)
+  it('FE-PLANNER-DPTOOLBAR-018: with nothing to undo the button is off and names no action', () => {
+    render(<DayPlanSidebarToolbar {...makeProps({ onUndo: vi.fn(), canUndo: false, lastActionLabel: 'Reorder' })} />)
+    expect(screen.getByRole('button', { name: 'undo.button' })).toBeDisabled()
     expect(screen.queryByText('undo.tooltip|Reorder')).not.toBeInTheDocument()
   })
 
@@ -301,22 +302,13 @@ describe('DayPlanSidebarToolbar', () => {
     expect(screen.getByRole('button', { name: 'map.hideAllConnections' })).toHaveAttribute('aria-pressed', 'true')
   })
 
-  it('FE-PLANNER-DPTOOLBAR-023: the icon buttons paint a hover background and clear it again', async () => {
-    const user = userEvent.setup()
+  it('FE-PLANNER-DPTOOLBAR-023: the icon buttons rise like an active tab while they are on', () => {
     const days = [buildDay({ id: 10 })]
-    render(<DayPlanSidebarToolbar {...makeProps({ days, onToggleAllConnections: vi.fn(), reservations: [routableReservation()] })} />)
-
-    const expandBtn = screen.getByRole('button', { name: 'dayplan.expandAll' })
-    await user.hover(expandBtn)
-    expect(expandBtn.style.background).toBe('var(--bg-hover)')
-    await user.unhover(expandBtn)
-    expect(expandBtn.style.background).toBe('transparent')
-
+    const { rerender } = render(<DayPlanSidebarToolbar {...makeProps({ days, onToggleAllConnections: vi.fn(), reservations: [routableReservation()] })} />)
     const routeBtn = screen.getByRole('button', { name: 'map.showAllConnections' })
-    await user.hover(routeBtn)
-    expect(routeBtn.style.background).toBe('var(--bg-hover)')
-    await user.unhover(routeBtn)
-    expect(routeBtn.style.background).toBe('transparent')
+    expect(routeBtn).not.toHaveClass('shadow-sm')
+    rerender(<DayPlanSidebarToolbar {...makeProps({ days, onToggleAllConnections: vi.fn(), reservations: [routableReservation()], allConnectionsShown: true })} />)
+    expect(screen.getByRole('button', { name: 'map.hideAllConnections' })).toHaveClass('bg-surface-card', 'shadow-sm')
   })
 
 })
diff --git a/client/src/components/Planner/DayPlanSidebarToolbar.tsx b/client/src/components/Planner/DayPlanSidebarToolbar.tsx
index 011cbdd7e..ce86daf7b 100644
--- a/client/src/components/Planner/DayPlanSidebarToolbar.tsx
+++ b/client/src/components/Planner/DayPlanSidebarToolbar.tsx
@@ -2,6 +2,8 @@ import { useState } from 'react'
 import { ChevronsDownUp, ChevronsUpDown, Download, Undo2, ArrowUpDown, Route as RouteIcon } from 'lucide-react'
 import { DayReorderPopup } from './DayReorderPopup'
 import Tooltip from '../shared/Tooltip'
+import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { BarButton, PANEL_BAR } from './planParts'
 import { useToast } from '../shared/Toast'
 import { TripExportModal } from './TripExportModal'
 import { isRoutableReservation } from '../../utils/reservationRoutes'
@@ -57,188 +59,100 @@ export function DayPlanSidebarToolbar({
   const [reorderOpen, setReorderOpen] = useState(false)
   const [exportOpen, setExportOpen] = useState(false)
 
+  const allExpanded = days.length > 0 && days.every(d => expandedDays.has(d.id))
+  const expandLabel = allExpanded ? t('dayplan.collapseAll') : t('dayplan.expandAll')
+  const undoTip = canUndo && lastActionLabel ? t('undo.tooltip', { action: lastActionLabel }) : t('undo.button')
+  const connectionsLabel = t(allConnectionsShown ? 'map.hideAllConnections' : 'map.showAllConnections')
+
+  // The panel's head band: the export as its one labelled action, the tools as
+  // quiet icons that rise like a filter tab when they are on.
   return (
-    <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
-        {/* One export button instead of three: PDF, ICS and GPX each carried
-            their own hover menu, and on a narrower sidebar the row ran out of
-            width and pushed them off the edge. The dialog holds every option. */}
-        <Tooltip label={t('dayplan.exportIntro')} placement="bottom">
-          <button
-            type="button"
-            onClick={() => setExportOpen(true)}
-            aria-haspopup="dialog"
-            aria-expanded={exportOpen}
-            className="bg-accent text-accent-text"
-            style={{
-              display: 'flex', alignItems: 'center', gap: 5, flexShrink: 0,
-              padding: '5px 10px', borderRadius: 8, border: 'none',
-              fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
+    <div className={PANEL_BAR} style={{ background: NEUTRAL_TINT }}>
+      {/* One export button instead of three: PDF, ICS and GPX each carried
+          their own hover menu, and on a narrower sidebar the row ran out of
+          width and pushed them off the edge. The dialog holds every option. */}
+      <Tooltip label={t('dayplan.exportIntro')} placement="bottom">
+        <button
+          type="button"
+          onClick={() => setExportOpen(true)}
+          aria-haspopup="dialog"
+          aria-expanded={exportOpen}
+          className="inline-flex h-8 flex-none items-center gap-1.5 rounded-[10px] bg-accent px-3 font-semibold text-accent-text hover:opacity-90"
+          style={fs(12, 'body')}
+        >
+          <Download size={13} strokeWidth={2.2} />
+          {t('dayplan.export')}
+        </button>
+      </Tooltip>
+      <TripExportModal
+        isOpen={exportOpen}
+        onClose={() => setExportOpen(false)}
+        tripId={tripId}
+        trip={trip}
+        days={days}
+        places={places}
+        categories={categories}
+        assignments={assignments}
+        reservations={reservations}
+        dayNotes={dayNotes}
+        t={t}
+        locale={locale}
+        toast={toast}
+        canManageShare={canManageShare}
+      />
+      <span className="flex-1" />
+      {onUndo && (
+        <Tooltip label={undoTip} placement="bottom">
+          <button type="button"
+            onClick={onUndo}
+            disabled={!canUndo}
+            aria-label={t('undo.button')}
+            onMouseEnter={() => setUndoHover(true)}
+            onMouseLeave={() => setUndoHover(false)}
+            className="grid h-8 w-8 flex-none place-items-center rounded-[10px] text-content-muted transition-colors enabled:hover:bg-surface-card enabled:hover:text-content disabled:cursor-default disabled:opacity-40"
           >
-            <Download size={13} strokeWidth={2} />
-            {t('dayplan.export')}
+            <Undo2 size={15} strokeWidth={2} />
           </button>
         </Tooltip>
-        <TripExportModal
-          isOpen={exportOpen}
-          onClose={() => setExportOpen(false)}
-          tripId={tripId}
-          trip={trip}
-          days={days}
-          places={places}
-          categories={categories}
-          assignments={assignments}
-          reservations={reservations}
-          dayNotes={dayNotes}
-          t={t}
-          locale={locale}
-          toast={toast}
-          canManageShare={canManageShare}
-        />
-        {(() => {
-          const allExpanded = days.length > 0 && days.every(d => expandedDays.has(d.id))
-          const label = allExpanded ? t('dayplan.collapseAll') : t('dayplan.expandAll')
-          return (
-            <Tooltip label={label} placement="bottom">
-              <button type="button"
-                onClick={() => {
-                  const next = allExpanded ? new Set<number>() : new Set(days.map(d => d.id))
-                  setExpandedDays(next)
-                  // Same store the sidebar reads on mount — a sessionStorage write
-                  // here left the persisted set behind after a reload.
-                  try { localStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...next])) } catch {}
-                }}
-                aria-label={label}
-                aria-pressed={allExpanded}
-                style={{
-                  position: 'relative', flexShrink: 0,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  width: 30, height: 30, borderRadius: 8,
-                  border: '1px solid var(--border-primary)', background: 'none',
-                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
-                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
-                  overflow: 'hidden',
-                }}
-                onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-              >
-                <span style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
-                  opacity: allExpanded ? 0 : 1,
-                  transform: allExpanded ? 'translateY(-8px) scale(0.6)' : 'translateY(0) scale(1)',
-                }}>
-                  <ChevronsUpDown size={14} strokeWidth={2} />
-                </span>
-                <span style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)',
-                  opacity: allExpanded ? 1 : 0,
-                  transform: allExpanded ? 'translateY(0) scale(1)' : 'translateY(8px) scale(0.6)',
-                }}>
-                  <ChevronsDownUp size={14} strokeWidth={2} />
-                </span>
-              </button>
-            </Tooltip>
-          )
-        })()}
-        {onUndo && (
-          <div style={{ position: 'relative', flexShrink: 0 }}>
-            <button type="button"
-              onClick={onUndo}
-              disabled={!canUndo}
-              aria-label={t('undo.button')}
-              onMouseEnter={() => setUndoHover(true)}
-              onMouseLeave={() => setUndoHover(false)}
-              style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                width: 30, height: 30, borderRadius: 8,
-                border: '1px solid var(--border-primary)', background: 'none',
-                color: canUndo ? 'var(--text-primary)' : 'var(--border-primary)',
-                cursor: canUndo ? 'pointer' : 'default', fontFamily: 'inherit',
-                transition: 'color 0.15s, border-color 0.15s',
-              }}
-            >
-              <Undo2 size={14} strokeWidth={2} />
-            </button>
-            {undoHover && (
-              <div style={{
-                position: 'absolute', top: 'calc(100% + 6px)', right: 0,
-                whiteSpace: 'nowrap', pointerEvents: 'none', zIndex: 200,
-                background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-                fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px',
-                borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-                border: '1px solid var(--border-faint, #e5e7eb)',
-              }}>
-                {canUndo && lastActionLabel ? t('undo.tooltip', { action: lastActionLabel }) : t('undo.button')}
-              </div>
-            )}
-          </div>
-        )}
-        {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
-          <div style={{ position: 'relative', flexShrink: 0 }}>
-            <Tooltip label={t('dayplan.reorderDays')} placement="bottom">
-              <button type="button"
-                onClick={() => setReorderOpen(v => !v)}
-                aria-label={t('dayplan.reorderDays')}
-                aria-pressed={reorderOpen}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  width: 30, height: 30, borderRadius: 8,
-                  border: '1px solid var(--border-primary)',
-                  background: reorderOpen ? 'var(--bg-hover)' : 'none',
-                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
-                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
-                }}
-                onMouseEnter={e => { if (!reorderOpen) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!reorderOpen) e.currentTarget.style.background = 'transparent' }}
-              >
-                <ArrowUpDown size={14} strokeWidth={2} />
-              </button>
-            </Tooltip>
-            <DayReorderPopup
-              isOpen={reorderOpen}
-              days={days}
-              t={t}
-              locale={locale}
-              onReorder={onReorderDays}
-              onAddDay={() => onAddDay()}
-              dayAdd={dayAdd}
-              onDeleteDay={onDeleteDay}
-              deleteQuestion={deleteDayQuestion}
-              onClose={() => setReorderOpen(false)}
-            />
-          </div>
-        )}
-        {onToggleAllConnections && reservations.some(isRoutableReservation) && (() => {
-          const label = t(allConnectionsShown ? 'map.hideAllConnections' : 'map.showAllConnections')
-          return (
-            <Tooltip label={label} placement="bottom">
-              <button
-                type="button"
-                onClick={onToggleAllConnections}
-                aria-label={label}
-                aria-pressed={allConnectionsShown}
-                style={{
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  width: 30, height: 30, borderRadius: 8,
-                  border: allConnectionsShown ? 'none' : '1px solid var(--border-primary)',
-                  background: allConnectionsShown ? '#3b82f6' : 'none',
-                  color: allConnectionsShown ? '#fff' : 'var(--text-primary)',
-                  cursor: 'pointer', fontFamily: 'inherit', padding: 0,
-                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
-                }}
-                onMouseEnter={e => { if (!allConnectionsShown) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!allConnectionsShown) e.currentTarget.style.background = 'transparent' }}
-              >
-                <RouteIcon size={14} strokeWidth={2} />
-              </button>
-            </Tooltip>
-          )
-        })()}
-      </div>
+      )}
+      <BarButton
+        label={expandLabel}
+        ariaPressed={allExpanded}
+        onClick={() => {
+          const next = allExpanded ? new Set<number>() : new Set(days.map(d => d.id))
+          setExpandedDays(next)
+          // Same store the sidebar reads on mount — a sessionStorage write
+          // here left the persisted set behind after a reload.
+          try { localStorage.setItem(`day-expanded-${tripId}`, JSON.stringify([...next])) } catch {}
+        }}
+      >
+        {allExpanded ? <ChevronsDownUp size={15} strokeWidth={2} /> : <ChevronsUpDown size={15} strokeWidth={2} />}
+      </BarButton>
+      {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
+        <>
+          <BarButton label={t('dayplan.reorderDays')} ariaPressed={reorderOpen} active={reorderOpen} onClick={() => setReorderOpen(v => !v)}>
+            <ArrowUpDown size={15} strokeWidth={2} />
+          </BarButton>
+          <DayReorderPopup
+            isOpen={reorderOpen}
+            days={days}
+            t={t}
+            locale={locale}
+            onReorder={onReorderDays}
+            onAddDay={() => onAddDay()}
+            dayAdd={dayAdd}
+            onDeleteDay={onDeleteDay}
+            deleteQuestion={deleteDayQuestion}
+            onClose={() => setReorderOpen(false)}
+          />
+        </>
+      )}
+      {onToggleAllConnections && reservations.some(isRoutableReservation) && (
+        <BarButton label={connectionsLabel} ariaPressed={allConnectionsShown} active={allConnectionsShown}
+          className={allConnectionsShown ? 'text-info' : ''} onClick={onToggleAllConnections}>
+          <RouteIcon size={15} strokeWidth={2} />
+        </BarButton>
+      )}
     </div>
   )
 }
diff --git a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.test.tsx b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.test.tsx
index 204a4e2a1..afe4647ec 100644
--- a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.test.tsx
+++ b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.test.tsx
@@ -1,5 +1,5 @@
-// FE-PLANNER-DPTRANSPORT-001 to FE-PLANNER-DPTRANSPORT-019
-import { render, screen, fireEvent } from '../../../tests/helpers/render'
+// FE-PLANNER-DPTRANSPORT-001 to FE-PLANNER-DPTRANSPORT-021
+import { render, screen, fireEvent, within } from '../../../tests/helpers/render'
 import userEvent from '@testing-library/user-event'
 import { resetAllStores, seedStore } from '../../../tests/helpers/store'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -9,7 +9,8 @@ import { DayPlanSidebarTransportDetailModal } from './DayPlanSidebarTransportDet
 import type { Reservation } from '../../types'
 
 // `t` arrives as a prop here, so echoing the key (plus its params) keeps the
-// assertions independent of the translation catalogue.
+// assertions independent of the translation catalogue. The shared pieces the
+// dialog is built from (the head band, the itinerary) read the English one.
 const t = (key: string, params?: Record<string, unknown>) =>
   params ? `${key}|${Object.values(params).join('|')}` : key
 
@@ -56,8 +57,17 @@ describe('DayPlanSidebarTransportDetailModal', () => {
 
   it('FE-PLANNER-DPTRANSPORT-002: shows the title, date and time range in the header', () => {
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight() })} />)
-    expect(screen.getByText('BER → CDG')).toBeInTheDocument()
-    expect(screen.getByText(/Jun 15.*08:30 – 10:05/)).toBeInTheDocument()
+    const dialog = screen.getByRole('dialog', { name: 'BER → CDG' })
+    expect(within(dialog).getByRole('heading', { name: 'BER → CDG' })).toBeInTheDocument()
+    // The day and the time range share one pill, the range in its quieter part.
+    const time = screen.getByText('08:30 → 10:05')
+    expect(time.parentElement).toHaveTextContent(/Jun 15/)
+  })
+
+  it('FE-PLANNER-DPTRANSPORT-002b: a booking with a time but no date still shows the time', () => {
+    const res = { ...flight(), reservation_time: '09:15', reservation_end_time: null } as Reservation
+    render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
+    expect(screen.getByText('09:15')).toBeInTheDocument()
   })
 
   it('FE-PLANNER-DPTRANSPORT-003: a confirmed booking shows the confirmed badge', () => {
@@ -74,6 +84,11 @@ describe('DayPlanSidebarTransportDetailModal', () => {
 
   it('FE-PLANNER-DPTRANSPORT-005: flight metadata renders airline, number, route and seat', () => {
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight() })} />)
+    // Every value carries its own label.
+    for (const label of ['reservations.meta.airline', 'reservations.meta.flightNumber', 'reservations.meta.from',
+      'reservations.meta.to', 'reservations.meta.seat', 'reservations.confirmationCode', 'reservations.locationAddress']) {
+      expect(screen.getByText(label)).toBeInTheDocument()
+    }
     expect(screen.getByText('Air France')).toBeInTheDocument()
     expect(screen.getByText('AF1235')).toBeInTheDocument()
     expect(screen.getByText('BER')).toBeInTheDocument()
@@ -105,23 +120,25 @@ describe('DayPlanSidebarTransportDetailModal', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true } })
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight() })} />)
     const code = screen.getByText('XY7Z9Q')
-    expect(code).toHaveStyle({ filter: 'blur(5px)' })
+    expect(code).toHaveClass('blur-[4px]')
     // The location is not sensitive, so it stays readable.
-    expect(screen.getByText('Terminal 1')).toHaveStyle({ filter: 'none' })
+    expect(screen.getByText('Terminal 1')).not.toHaveClass('blur-[4px]')
+    expect(screen.getByText('Terminal 1').closest('button')).toBeNull()
   })
 
   it('FE-PLANNER-DPTRANSPORT-009: hovering and clicking a blurred code reveals and re-hides it', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true } })
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight() })} />)
-    const code = screen.getByText('XY7Z9Q')
-    fireEvent.mouseEnter(code)
-    expect(code.style.filter).toBe('none')
-    fireEvent.mouseLeave(code)
-    expect(code.style.filter).toBe('blur(5px)')
+    const code = screen.getByRole('button', { name: 'XY7Z9Q' })
+    // The pointer lifts the blur while it rests on the code.
+    expect(code).toHaveClass('hover:blur-none')
+    expect(code).toHaveAttribute('aria-pressed', 'false')
     fireEvent.click(code)
-    expect(code.style.filter).toBe('none')
+    expect(code).toHaveAttribute('aria-pressed', 'true')
+    expect(code).not.toHaveClass('blur-[4px]')
     fireEvent.click(code)
-    expect(code.style.filter).toBe('blur(5px)')
+    expect(code).toHaveAttribute('aria-pressed', 'false')
+    expect(code).toHaveClass('blur-[4px]')
   })
 
   it('FE-PLANNER-DPTRANSPORT-010: an unblurred field ignores hover and click', () => {
@@ -129,7 +146,8 @@ describe('DayPlanSidebarTransportDetailModal', () => {
     const code = screen.getByText('XY7Z9Q')
     fireEvent.mouseEnter(code)
     fireEvent.click(code)
-    expect(code.style.filter).toBe('none')
+    expect(code).not.toHaveClass('blur-[4px]')
+    expect(screen.queryByRole('button', { name: 'XY7Z9Q' })).not.toBeInTheDocument()
   })
 
   it('FE-PLANNER-DPTRANSPORT-011: a transit journey renders its summary and itinerary legs', () => {
@@ -150,13 +168,22 @@ describe('DayPlanSidebarTransportDetailModal', () => {
       },
     } as unknown as Partial<Reservation>)
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
+    // The summary: each fact a tile with its own label.
     expect(screen.getByText('transit.min|30')).toBeInTheDocument()
-    expect(screen.getByText('transit.transfers|1')).toBeInTheDocument()
+    expect(screen.getByText('transit.durationLabel')).toBeInTheDocument()
+    expect(screen.getByText('1')).toBeInTheDocument()
+    expect(screen.getByText('transit.transfersLabel')).toBeInTheDocument()
+    expect(screen.getByText('transit.min|4')).toBeInTheDocument()
+    expect(screen.getByText('transit.walkLabel')).toBeInTheDocument()
+    // The legs: the shared itinerary list, its facts as separate badges.
     expect(screen.getByText('transit.itinerary')).toBeInTheDocument()
-    expect(screen.getByText('transit.walkTo|Alexanderplatz')).toBeInTheDocument()
+    expect(screen.getByText('Walk to Alexanderplatz')).toBeInTheDocument()
     expect(screen.getByText('U2')).toBeInTheDocument()
     expect(screen.getByText('Zoo')).toBeInTheDocument()
-    expect(screen.getByText(/08:36 – 09:00 · transit\.min\|24 · transit\.stops\|6 · → Ruhleben/)).toBeInTheDocument()
+    for (const badge of ['08:36 → 09:00', '24 min', '6 stops', 'Ruhleben']) {
+      expect(screen.getByText(badge)).toBeInTheDocument()
+    }
+    expect(document.body.textContent).not.toContain('·')
   })
 
   it('FE-PLANNER-DPTRANSPORT-012: a direct, long, walk-free journey renders hours and the direct label', () => {
@@ -170,14 +197,33 @@ describe('DayPlanSidebarTransportDetailModal', () => {
       },
     } as unknown as Partial<Reservation>)
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
-    expect(screen.getByText('2 h 0 min')).toBeInTheDocument()
+    // Hours come through the catalogue, not a hard-coded "h".
+    expect(screen.getByText('dawarich.duration.hours|2')).toBeInTheDocument()
     expect(screen.getByText('transit.direct')).toBeInTheDocument()
-    // Under a minute of walking is not worth a chip.
-    expect(screen.queryByText('transit.min|1')).not.toBeInTheDocument()
+    // Under a minute of walking is not worth a tile.
+    expect(screen.queryByText('transit.walkLabel')).not.toBeInTheDocument()
     // No line name on this leg, so the badge falls back to the mode.
     expect(screen.getByText('BUS')).toBeInTheDocument()
   })
 
+  it('FE-PLANNER-DPTRANSPORT-012b: hours with minutes left over name both', () => {
+    const res = buildReservation({
+      id: 46, type: 'transit', title: 'Longer haul', status: 'confirmed',
+      metadata: { transit: { duration: 5400, legs: [{ mode: 'RAIL', duration: 5400, from: { name: 'A' }, to: { name: 'B' } }] } },
+    } as unknown as Partial<Reservation>)
+    render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
+    expect(screen.getByText('dawarich.duration.hoursMinutes|1|30')).toBeInTheDocument()
+    // Without a stored count the transfers come from the legs: one ride is direct.
+    expect(screen.getByText('transit.direct')).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DPTRANSPORT-012c: metadata that is not JSON reads as none instead of throwing', () => {
+    const res = buildReservation({ id: 47, type: 'flight', title: 'Broken', metadata: '{not json' } as Partial<Reservation>)
+    render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
+    expect(screen.getByRole('dialog', { name: 'Broken' })).toBeInTheDocument()
+    expect(screen.queryByText('reservations.meta.airline')).not.toBeInTheDocument()
+  })
+
   it('FE-PLANNER-DPTRANSPORT-013: notes render as markdown', () => {
     const res = { ...flight(), notes: 'Bring **passport**' } as Reservation
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
@@ -207,12 +253,8 @@ describe('DayPlanSidebarTransportDetailModal', () => {
     const setTransportDetail = vi.fn()
     const onNavigateToFiles = vi.fn()
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight(), setTransportDetail, onNavigateToFiles })} />)
-    const row = screen.getByText('boarding.pdf').parentElement!
-    fireEvent.mouseEnter(row)
-    expect(row.style.background).toBe('var(--bg-hover)')
-    fireEvent.mouseLeave(row)
-    expect(row.style.background).toBe('var(--bg-tertiary)')
-    await user.click(row)
+    expect(screen.getByText('files.title')).toBeInTheDocument()
+    await user.click(screen.getByRole('button', { name: 'boarding.pdf' }))
     expect(setTransportDetail).toHaveBeenCalledWith(null)
     expect(onNavigateToFiles).toHaveBeenCalledTimes(1)
   })
@@ -251,7 +293,7 @@ describe('DayPlanSidebarTransportDetailModal', () => {
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: res })} />)
 
     expect(screen.getByText('BER → CDG')).toBeInTheDocument()
-    expect(screen.getByText('ABC123')).toHaveStyle({ filter: 'blur(5px)' })
+    expect(screen.getByText('ABC123')).toHaveClass('blur-[4px]')
     // The booking's own reference keeps its own field, a code-less segment adds none.
     expect(screen.getByText('XY7Z9Q')).toBeInTheDocument()
     expect(screen.queryByText('CDG → JFK')).not.toBeInTheDocument()
@@ -261,10 +303,30 @@ describe('DayPlanSidebarTransportDetailModal', () => {
     const user = userEvent.setup()
     const setTransportDetail = vi.fn()
     render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight(), setTransportDetail })} />)
-    const card = screen.getByText('BER → CDG').closest('div.bg-surface-card')!
+    const card = screen.getByRole('dialog')
     await user.click(card)
     expect(setTransportDetail).not.toHaveBeenCalled()
     await user.click(card.parentElement!)
     expect(setTransportDetail).toHaveBeenCalledWith(null)
   })
+
+  it('FE-PLANNER-DPTRANSPORT-020: a press that starts in the card and ends on the backdrop keeps it open', () => {
+    const setTransportDetail = vi.fn()
+    render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight(), setTransportDetail })} />)
+    const card = screen.getByRole('dialog')
+    fireEvent.mouseDown(card)
+    fireEvent.click(card.parentElement!)
+    expect(setTransportDetail).not.toHaveBeenCalled()
+  })
+
+  it('FE-PLANNER-DPTRANSPORT-021: Escape and the head band close button close it', async () => {
+    const user = userEvent.setup()
+    const setTransportDetail = vi.fn()
+    render(<DayPlanSidebarTransportDetailModal {...makeProps({ transportDetail: flight(), setTransportDetail })} />)
+    await user.keyboard('{Escape}')
+    expect(setTransportDetail).toHaveBeenCalledWith(null)
+    setTransportDetail.mockClear()
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(setTransportDetail).toHaveBeenCalledWith(null)
+  })
 })
diff --git a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
index 231e1e1ac..e4679368a 100644
--- a/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
+++ b/client/src/components/Planner/DayPlanSidebarTransportDetailModal.tsx
@@ -1,281 +1,223 @@
-import { createPortal } from 'react-dom'
-import { Ticket, FileText, ExternalLink, Footprints, ArrowRight, Pencil } from 'lucide-react'
+import { useId, type ReactNode } from 'react'
+import { CalendarDays, Clock, ExternalLink, FileText, Pencil } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { markdownLinkComponents } from '../shared/markdownLink'
-import { useSettingsStore } from '../../store/settingsStore'
+import { BlurredCode } from '../shared/BookingCode'
+import { DialogButton, DialogFooter, DialogSection, DialogShell, FooterSpacer, PILL } from '../shared/DialogShell'
 import { useTripStore } from '../../store/tripStore'
 import { formatTime, splitReservationDateTime } from '../../utils/formatters'
-import { RES_ICONS, TRANSPORT_DETAIL_COLORS } from './DayPlanSidebar.constants'
+import { parseReservationMetadata } from '../../utils/flightLegs'
+import { BookingDialogHeader } from './bookings/BookingDialogShell'
+import { BOX, Eyebrow, Field, filesFor, fs, toneColor, toneOf } from './bookings/bookingParts'
+import { TransitLegs, transitSummary } from './bookings/transitParts'
 import type { Reservation } from '../../types'
 
+type Translate = (key: string, params?: Record<string, string | number>) => string
+
 interface DayPlanSidebarTransportDetailModalProps {
   transportDetail: Reservation | null
   setTransportDetail: (v: Reservation | null) => void
   onNavigateToFiles?: () => void
   /** Opens the edit form for this reservation (shown as a footer action). */
   onEdit?: (res: Reservation) => void
-  t: (key: string, params?: Record<string, any>) => string
+  t: Translate
   locale: string
   timeFormat: string
 }
 
-export function DayPlanSidebarTransportDetailModal({
-  transportDetail, setTransportDetail, onNavigateToFiles, onEdit, t, locale, timeFormat,
-}: DayPlanSidebarTransportDetailModalProps) {
+/** One labelled value of the grid; a booking code is drawn through the blur preference. */
+interface DetailCell {
+  label: string
+  value: string
+  code?: boolean
+}
+
+/**
+ * The booking a rental pill, a transit row or a map endpoint opens from the
+ * plan: the head band tinted by its status like the booking dialogs, the
+ * booking's facts one labelled field each, a transit journey leg by leg, the
+ * notes and the files, and the edit in the bar at the foot.
+ */
+export function DayPlanSidebarTransportDetailModal({ transportDetail, ...rest }: DayPlanSidebarTransportDetailModalProps) {
   if (!transportDetail) return null
-  return createPortal(
-    <div className="bg-[rgba(0,0,0,0.3)]" style={{
-      position: 'fixed', inset: 0, zIndex: 1000,
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      backdropFilter: 'blur(3px)',
-    }}
-      role="button" tabIndex={0} aria-label={t('common.cancel')}
-      onClick={() => setTransportDetail(null)}
-      onKeyDown={e => {
-        if (e.target !== e.currentTarget) return
-        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setTransportDetail(null) }
-      }}>
-      <div className="bg-surface-card" role="presentation" style={{
-        width: 380, maxHeight: '80vh', overflowY: 'auto',
-        borderRadius: 16,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', padding: '22px 22px 18px',
-        display: 'flex', flexDirection: 'column', gap: 14,
-      }} onClick={e => e.stopPropagation()}>
-        {(() => {
-          const res = transportDetail
-          const TransportIcon = RES_ICONS[res.type] || Ticket
-          const TRANSPORT_COLORS = TRANSPORT_DETAIL_COLORS
-          const color = TRANSPORT_COLORS[res.type] || 'var(--text-muted)'
-          const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
+  return <TransportDetailDialog res={transportDetail} {...rest} />
+}
 
-          const detailFields = []
-          if (res.type === 'flight') {
-            if (meta.airline) detailFields.push({ label: t('reservations.meta.airline'), value: meta.airline })
-            if (meta.flight_number) detailFields.push({ label: t('reservations.meta.flightNumber'), value: meta.flight_number })
-            if (meta.departure_airport) detailFields.push({ label: t('reservations.meta.from'), value: meta.departure_airport })
-            if (meta.arrival_airport) detailFields.push({ label: t('reservations.meta.to'), value: meta.arrival_airport })
-            if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
-          } else if (res.type === 'train') {
-            if (meta.train_number) detailFields.push({ label: t('reservations.meta.trainNumber'), value: meta.train_number })
-            if (meta.platform) detailFields.push({ label: t('reservations.meta.platform'), value: meta.platform })
-            if (meta.seat) detailFields.push({ label: t('reservations.meta.seat'), value: meta.seat })
-          }
-          if (res.confirmation_number) detailFields.push({ label: t('reservations.confirmationCode'), value: res.confirmation_number, sensitive: true })
-          // A stopover booking can carry its own reference per segment (#1943); the
-          // flat fields above only ever describe the first leg. Marked sensitive so
-          // the blur setting covers them like the booking's own code.
-          if (Array.isArray(meta.legs) && meta.legs.length > 1) {
-            for (const leg of meta.legs) {
-              if (!leg?.confirmation_number) continue
-              const segment = [leg.from, leg.to].filter(Boolean).join(' → ')
-              detailFields.push({ label: segment || t('reservations.confirmationCode'), value: leg.confirmation_number, sensitive: true })
-            }
-          }
-          if (res.location) detailFields.push({ label: t('reservations.locationAddress'), value: res.location })
+function TransportDetailDialog({ res, setTransportDetail, onNavigateToFiles, onEdit, t, locale, timeFormat }: Omit<DayPlanSidebarTransportDetailModalProps, 'transportDetail'> & { res: Reservation }) {
+  const titleId = useId()
+  const allFiles = useTripStore(s => s.files)
+  const close = () => setTransportDetail(null)
+  const meta = parseReservationMetadata(res)
+  const transit = transitSummary(meta)
+  const files = filesFor(res, allFiles || [])
+  const when = whenOf(res, locale, timeFormat)
+  const cells = detailCells(res, meta, t)
+  const confirmed = res.status === 'confirmed'
 
-          return (
-            <>
-              {/* Header */}
-              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                <div style={{
-                  width: 36, height: 36, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  borderRadius: '50%', background: `${color}18`,
-                }}>
-                  <TransportIcon size={18} strokeWidth={1.8} color={color} />
-                </div>
-                <div style={{ flex: 1 }}>
-                  <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600 }}>{res.title}</div>
-                  <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 2 }}>
-                    {(() => {
-                      const { date, time } = splitReservationDateTime(res.reservation_time)
-                      const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                      const dateStr = date
-                        ? new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
-                        : ''
-                      const timeStr = time ? formatTime(time, locale, timeFormat) : ''
-                      const endStr = endTime ? formatTime(endTime, locale, timeFormat) : ''
-                      const parts: string[] = []
-                      if (dateStr) parts.push(dateStr)
-                      if (timeStr) parts.push(timeStr + (endStr ? ` – ${endStr}` : ''))
-                      return parts.join(', ')
-                    })()}
-                  </div>
-                </div>
-                <div className={res.status === 'confirmed' ? 'bg-[rgba(22,163,74,0.1)] text-[#16a34a]' : 'bg-[rgba(217,119,6,0.1)] text-[#d97706]'} style={{
-                  padding: '3px 8px', borderRadius: 6, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
-                }}>
-                  {res.status === 'confirmed' ? t('planner.resConfirmed') : t('planner.resPending')}
-                </div>
-              </div>
+  const stats: { value: string; label: string }[] = []
+  if (transit && transit.legs.length > 0) {
+    if (transit.duration) stats.push({ value: durationText(transit.duration, t), label: t('transit.durationLabel') })
+    stats.push({ value: transit.transfers > 0 ? String(transit.transfers) : t('transit.direct'), label: t('transit.transfersLabel') })
+    // Under a minute of walking is not worth a tile.
+    if (transit.walk > 59) stats.push({ value: t('transit.min', { count: Math.round(transit.walk / 60) }), label: t('transit.walkLabel') })
+  }
 
-              {/* Detail-Felder */}
-              {detailFields.length > 0 && (
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-                  {detailFields.map((f, i) => {
-                    const shouldBlur = f.sensitive && useSettingsStore.getState().settings.blur_booking_codes
-                    const valueStyle = {
-                      fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500, wordBreak: 'break-word',
-                      filter: shouldBlur ? 'blur(5px)' : 'none', transition: 'filter 0.2s',
-                      cursor: shouldBlur ? 'pointer' : 'default',
-                      userSelect: shouldBlur ? 'none' : 'auto',
-                    } as const
-                    return (
-                      <div key={i} className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
-                        <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{f.label}</div>
-                        {/* A hidden booking code is a reveal toggle, so it has to be a real
-                            button; a plain value stays inert text and out of the tab order. */}
-                        {shouldBlur ? (
-                          <button
-                            type="button"
-                            onMouseEnter={e => { e.currentTarget.style.filter = 'none' }}
-                            onMouseLeave={e => { e.currentTarget.style.filter = 'blur(5px)' }}
-                            onClick={e => { const el = e.currentTarget; el.style.filter = el.style.filter === 'none' ? 'blur(5px)' : 'none' }}
-                            className="text-content"
-                            style={{ ...valueStyle, display: 'block', width: '100%', textAlign: 'left', background: 'none', border: 'none', padding: 0, fontFamily: 'inherit' }}
-                          >{f.value}</button>
-                        ) : (
-                          <div className="text-content" style={valueStyle}>{f.value}</div>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
+  const header = (
+    <BookingDialogHeader
+      tone={toneOf(res)}
+      type={res.type}
+      labelId={titleId}
+      onClose={close}
+      title={res.title}
+      pills={(
+        <>
+          <span className={PILL}>
+            <span className="h-2 w-2 flex-none rounded-full" style={{ background: toneColor(confirmed ? 'confirmed' : 'pending') }} />
+            {confirmed ? t('planner.resConfirmed') : t('planner.resPending')}
+          </span>
+          {(when.day || when.time) && (
+            <span className={PILL}>
+              {when.day
+                ? <CalendarDays size={13} strokeWidth={2.2} className="text-content-faint" />
+                : <Clock size={13} strokeWidth={2.2} className="text-content-faint" />}
+              {when.day}
+              {when.time && <span className={when.day ? 'font-medium text-content-muted' : ''}>{when.time}</span>}
+            </span>
+          )}
+        </>
+      )}
+    />
+  )
 
-              {/* Public-transit itinerary (#1065) — legs from the transit search */}
-              {meta.transit?.legs && Array.isArray(meta.transit.legs) && meta.transit.legs.length > 0 && (
-                <>
-                {/* journey summary: duration · transfers · walking */}
-                <div className="bg-surface-tertiary text-content" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, padding: '9px 12px', borderRadius: 8, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, flexWrap: 'wrap' }}>
-                  {meta.transit.duration > 0 && (
-                    <span>{Math.floor(meta.transit.duration / 3600) > 0 ? `${Math.floor(meta.transit.duration / 3600)} h ${Math.round((meta.transit.duration % 3600) / 60)} min` : t('transit.min', { count: Math.round(meta.transit.duration / 60) })}</span>
-                  )}
-                  <span className="text-content-faint">·</span>
-                  <span>{meta.transit.transfers > 0 ? t('transit.transfers', { count: meta.transit.transfers }) : t('transit.direct')}</span>
-                  {meta.transit.walk_seconds > 59 && (
-                    <>
-                      <span className="text-content-faint">·</span>
-                      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><Footprints size={13} /> {t('transit.min', { count: Math.round(meta.transit.walk_seconds / 60) })}</span>
-                    </>
-                  )}
-                </div>
-                <div className="bg-surface-tertiary" style={{ padding: '10px 12px', borderRadius: 8 }}>
-                  <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 8 }}>
-                    {t('transit.itinerary')}
-                  </div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    {meta.transit.legs.map((leg: { mode?: string; line?: string | null; line_color?: string | null; line_text_color?: string | null; headsign?: string | null; duration?: number; stops?: number; from?: { name?: string; time?: string | null }; to?: { name?: string; time?: string | null } }, i: number) => {
-                      const isWalk = leg.mode === 'WALK'
-                      const mins = leg.duration ? Math.round(leg.duration / 60) : null
-                      return (
-                        <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
-                          {isWalk ? (
-                            <span className="text-content-faint" style={{ display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0, paddingTop: 1 }}>
-                              <Footprints size={12} />
-                            </span>
-                          ) : (
-                            <span style={{ display: 'inline-flex', alignItems: 'center', background: leg.line_color || 'var(--bg-hover)', color: leg.line_color ? (leg.line_text_color || '#fff') : 'var(--text-primary)', borderRadius: 5, padding: '1px 6px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
-                              {leg.line || leg.mode}
-                            </span>
-                          )}
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <div className="text-content" style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
-                              {isWalk
-                                ? <span className="text-content-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span>
-                                : <>
-                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.from?.name}</span>
-                                    <ArrowRight size={10} className="text-content-faint" style={{ flexShrink: 0 }} />
-                                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{leg.to?.name}</span>
-                                  </>}
-                            </div>
-                            <div className="text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', marginTop: 1 }}>
-                              {[
-                                leg.from?.time && !isWalk ? `${leg.from.time}${leg.to?.time ? ` – ${leg.to.time}` : ''}` : null,
-                                mins ? t('transit.min', { count: mins }) : null,
-                                !isWalk && leg.stops ? t('transit.stops', { count: leg.stops }) : null,
-                                !isWalk && leg.headsign ? `→ ${leg.headsign}` : null,
-                              ].filter(Boolean).join(' · ')}
-                            </div>
-                          </div>
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-                </>
-              )}
+  const footer = (
+    <DialogFooter>
+      <FooterSpacer />
+      <DialogButton onClick={close}>{t('common.close')}</DialogButton>
+      {onEdit && (
+        <DialogButton variant="primary" onClick={() => onEdit(res)} icon={<Pencil size={14} strokeWidth={2} />}>{t('common.edit')}</DialogButton>
+      )}
+    </DialogFooter>
+  )
 
-              {/* Notizen */}
-              {res.notes && (
-                <div className="bg-surface-tertiary" style={{ padding: '8px 10px', borderRadius: 8 }}>
-                  <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 3 }}>{t('reservations.notes')}</div>
-                  <div className="collab-note-md text-content" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{res.notes}</Markdown></div>
-                </div>
-              )}
+  return (
+    <DialogShell onClose={close} labelledBy={titleId} header={header} footer={footer}>
+      {cells.length > 0 && (
+        <div className="grid grid-cols-2 gap-2 max-sm:grid-cols-1">
+          {cells.map((c, i) => (
+            <Field key={i} label={c.label}>
+              {c.code ? <BlurredCode className="font-geist tabular-nums">{c.value}</BlurredCode> : c.value}
+            </Field>
+          ))}
+        </div>
+      )}
 
-              {/* Dateien */}
-              {(() => {
-                const resFiles = (useTripStore.getState().files || []).filter(f =>
-                  !f.deleted_at && (
-                    f.reservation_id === res.id ||
-                    (f.linked_reservation_ids && f.linked_reservation_ids.includes(res.id))
-                  )
-                )
-                if (resFiles.length === 0) return null
-                return (
-                  <div>
-                    <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6 }}>{t('files.title')}</div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                      {resFiles.map(f => (
-                        <button key={f.id}
-                          type="button"
-                          onClick={() => { setTransportDetail(null); onNavigateToFiles?.() }}
-                          className="bg-surface-tertiary"
-                          style={{
-                            display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px',
-                            borderRadius: 8, cursor: 'pointer', border: 'none', textAlign: 'left', fontFamily: 'inherit',
-                            transition: 'background 0.1s',
-                          }}
-                          onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                          onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-                        >
-                          <FileText size={14} className="text-content-muted" style={{ flexShrink: 0 }} />
-                          <span className="text-content" style={{ flex: 1, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {f.original_name}
-                          </span>
-                          <ExternalLink size={11} className="text-content-faint" style={{ flexShrink: 0 }} />
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                )
-              })()}
+      {res.location && <DetailField label={t('reservations.locationAddress')}>{res.location}</DetailField>}
 
-              {/* Aktionen */}
-              <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-                {onEdit && (
-                  <button type="button" onClick={() => onEdit(res)} className="bg-surface-tertiary text-content" style={{
-                    fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                    border: 'none', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
-                    display: 'inline-flex', alignItems: 'center', gap: 5,
-                  }}>
-                    <Pencil size={12} /> {t('common.edit')}
-                  </button>
-                )}
-                <button type="button" onClick={() => setTransportDetail(null)} className="bg-accent text-accent-text" style={{
-                  fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                  border: 'none', borderRadius: 8, padding: '6px 16px', cursor: 'pointer', fontWeight: 600, fontFamily: 'inherit',
-                }}>
-                  {t('common.close')}
-                </button>
-              </div>
-            </>
-          )
-        })()}
-      </div>
-    </div>,
-    document.body
+      {stats.length > 0 && (
+        <div className="flex gap-2">
+          {stats.map(s => (
+            <div key={s.label} className="min-w-0 flex-1 rounded-[12px] bg-surface-tertiary px-3 py-2.5 text-center">
+              <div className="truncate font-bold tabular-nums tracking-[-0.01em] text-content" style={fs(18, 'subtitle')}>{s.value}</div>
+              <div className="mt-0.5 truncate font-geist text-content-faint" style={fs(10.5)}>{s.label}</div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Public-transit itinerary (#1065): the legs the transit search stored. */}
+      {transit && transit.legs.length > 0 && (
+        <DialogSection label={t('transit.itinerary')}>
+          <TransitLegs legs={transit.legs} />
+        </DialogSection>
+      )}
+
+      {res.notes && (
+        <DialogSection label={t('reservations.notes')}>
+          <div className={`${BOX} collab-note-md px-3.5 py-3 text-content-secondary`} style={{ ...fs(13, 'body'), wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+            <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{res.notes}</Markdown>
+          </div>
+        </DialogSection>
+      )}
+
+      {files.length > 0 && (
+        <DialogSection label={t('files.title')}>
+          <div className="flex flex-col gap-1.5">
+            {files.map(f => (
+              <button key={f.id} type="button" onClick={() => { close(); onNavigateToFiles?.() }}
+                className={`${BOX} flex items-center gap-2.5 px-3.5 py-2.5 text-left hover:bg-surface-hover`}>
+                <FileText size={14} strokeWidth={2} className="flex-none text-content-muted" />
+                <span className="min-w-0 flex-1 truncate font-medium text-content" style={fs(13, 'body')}>{f.original_name}</span>
+                <ExternalLink size={12} strokeWidth={2} className="flex-none text-content-faint" />
+              </button>
+            ))}
+          </div>
+        </DialogSection>
+      )}
+    </DialogShell>
+  )
+}
+
+/** The facts of a flight or a train, the booking code and the code of each segment. */
+function detailCells(res: Reservation, meta: Record<string, unknown>, t: Translate): DetailCell[] {
+  const cells: DetailCell[] = []
+  const add = (label: string, value: unknown, code = false) => {
+    if (value) cells.push({ label, value: String(value), code })
+  }
+  if (res.type === 'flight') {
+    add(t('reservations.meta.airline'), meta.airline)
+    add(t('reservations.meta.flightNumber'), meta.flight_number)
+    add(t('reservations.meta.from'), meta.departure_airport)
+    add(t('reservations.meta.to'), meta.arrival_airport)
+    add(t('reservations.meta.seat'), meta.seat)
+  } else if (res.type === 'train') {
+    add(t('reservations.meta.trainNumber'), meta.train_number)
+    add(t('reservations.meta.platform'), meta.platform)
+    add(t('reservations.meta.seat'), meta.seat)
+  }
+  add(t('reservations.confirmationCode'), res.confirmation_number, true)
+  // A stopover booking can carry its own reference per segment (#1943); the
+  // flat fields above only ever describe the first leg. Drawn as codes, so the
+  // blur preference covers them like the booking's own.
+  const legs = Array.isArray(meta.legs) ? meta.legs as { from?: string; to?: string; confirmation_number?: string }[] : []
+  if (legs.length > 1) {
+    for (const leg of legs) {
+      if (!leg?.confirmation_number) continue
+      const segment = [leg.from, leg.to].filter(Boolean).join(' → ')
+      add(segment || t('reservations.confirmationCode'), leg.confirmation_number, true)
+    }
+  }
+  return cells
+}
+
+/** The booking's day and its time or time range, each empty when the booking has none. */
+function whenOf(res: Reservation, locale: string, timeFormat: string): { day: string; time: string } {
+  const { date, time } = splitReservationDateTime(res.reservation_time)
+  const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+  const day = date
+    ? new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
+    : ''
+  const start = time ? formatTime(time, locale, timeFormat) : ''
+  const end = endTime ? formatTime(endTime, locale, timeFormat) : ''
+  return { day, time: start && end ? `${start} → ${end}` : start }
+}
+
+/** A journey's length in the reader's language: minutes up to an hour, then hours and minutes. */
+function durationText(seconds: number, t: Translate): string {
+  const mins = Math.round(seconds / 60)
+  if (mins < 60) return t('transit.min', { count: mins })
+  const hours = Math.floor(mins / 60)
+  const minutes = mins % 60
+  return minutes > 0 ? t('dawarich.duration.hoursMinutes', { hours, minutes }) : t('dawarich.duration.hours', { hours })
+}
+
+/** A labelled value too long for a grid cell, such as an address. */
+function DetailField({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <Eyebrow className="mb-[3px]">{label}</Eyebrow>
+      <div className={`${BOX} break-words px-3.5 py-2.5 font-medium text-content`} style={fs(13, 'body')}>{children}</div>
+    </div>
   )
 }
diff --git a/client/src/components/Planner/DayReorderPopup.test.tsx b/client/src/components/Planner/DayReorderPopup.test.tsx
index 4fe383e2f..44ac1603c 100644
--- a/client/src/components/Planner/DayReorderPopup.test.tsx
+++ b/client/src/components/Planner/DayReorderPopup.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-DAYREORDER-001 to FE-PLANNER-DAYREORDER-028
+// FE-PLANNER-DAYREORDER-001 to FE-PLANNER-DAYREORDER-030
 import { render, screen, fireEvent } from '../../../tests/helpers/render'
 import userEvent from '@testing-library/user-event'
 import { MapPin } from 'lucide-react'
@@ -142,6 +142,15 @@ describe('DayReorderPopup', () => {
     expect(onClose).toHaveBeenCalled()
   })
 
+  it('FE-PLANNER-DAYREORDER-029: it is a dialog named by its title, and Escape closes it', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<DayReorderPopup {...makeProps({ days: threeDays(), onClose })} />)
+    expect(screen.getByRole('dialog', { name: 'dayplan.reorderTitle' })).toBeInTheDocument()
+    await user.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   describe('deleting a day', () => {
     afterEach(() => setForcedOffline(false))
 
@@ -310,14 +319,23 @@ describe('DayReorderPopup', () => {
       expect(onClose).not.toHaveBeenCalled()
     })
 
+    it('FE-PLANNER-DAYREORDER-030: a press on the backdrop leaves the question and the dialog alone', async () => {
+      const user = userEvent.setup()
+      const q = question()
+      const onClose = vi.fn()
+      render(<DayReorderPopup {...makeProps({ days: threeDays(), onDeleteDay: vi.fn(), deleteQuestion: q, onClose })} />)
+      await user.click(screen.getByRole('dialog').parentElement as HTMLElement)
+      expect(q.onCancel).not.toHaveBeenCalled()
+      expect(onClose).not.toHaveBeenCalled()
+    })
+
     it('FE-PLANNER-DAYREORDER-025: closing the dialog also drops an open question', async () => {
       const user = userEvent.setup()
       const q = question()
       const onClose = vi.fn()
       const { rerender } = render(<DayReorderPopup {...makeProps({ days: threeDays(), onDeleteDay: vi.fn(), deleteQuestion: q, onClose })} />)
-      const closeX = document.querySelector<HTMLButtonElement>('h2 + button')
-      expect(closeX).not.toBeNull()
-      await user.click(closeX as HTMLButtonElement)
+      // The head band's close button: named "Close" by the shared dialog, not by the `t` prop.
+      await user.click(screen.getByRole('button', { name: 'Close' }))
       expect(q.onCancel).toHaveBeenCalledTimes(1)
       expect(onClose).toHaveBeenCalledTimes(1)
 
diff --git a/client/src/components/Planner/DayReorderPopup.tsx b/client/src/components/Planner/DayReorderPopup.tsx
index 6069af07d..b53cf3aa8 100644
--- a/client/src/components/Planner/DayReorderPopup.tsx
+++ b/client/src/components/Planner/DayReorderPopup.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'
-import { GripVertical, ArrowUp, ArrowDown, Trash2, AlertTriangle } from 'lucide-react'
-import Modal from '../shared/Modal'
+import { GripVertical, ArrowUp, ArrowDown, ArrowUpDown, Trash2, AlertTriangle } from 'lucide-react'
+import { DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 import Tooltip from '../shared/Tooltip'
 import DayImpactList from '../shared/DayImpactList'
-import { DayAddFooter, FOOTER_BTN, SECONDARY_BTN } from './DayAddFooter'
+import { DayAddFooter } from './DayAddFooter'
 import { useNetworkMode } from '../../hooks/useNetworkMode'
 import { dayLabel } from '../../utils/dayLabel'
 import { deleteDayBlockedReason } from '../../utils/dayDeleteImpact'
@@ -14,7 +14,7 @@ import type { Day } from '../../types'
 interface DayReorderPopupProps {
   isOpen: boolean
   days: Day[]
-  t: (key: string, params?: Record<string, any>) => string
+  t: (key: string, params?: Record<string, string | number>) => string
   locale: string
   onReorder: (orderedIds: number[]) => void
   onAddDay: () => void
@@ -38,12 +38,15 @@ interface ListSpot {
 }
 
 const ICON_BTN =
-  'grid h-7 w-7 flex-shrink-0 place-items-center rounded-md border border-edge-faint text-content-muted transition-colors hover:bg-surface-hover hover:text-content disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-content-muted'
+  'grid h-7 w-7 flex-shrink-0 place-items-center rounded-full text-content-muted transition-colors hover:bg-surface-hover hover:text-content disabled:cursor-default disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-content-muted'
 const DELETE_BTN =
-  'grid h-7 w-7 place-items-center rounded-md text-content-faint transition-colors hover:bg-danger-soft hover:text-danger focus-visible:bg-danger-soft focus-visible:text-danger disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-content-faint'
+  'grid h-7 w-7 place-items-center rounded-full text-content-faint transition-colors hover:bg-danger-soft hover:text-danger focus-visible:bg-danger-soft focus-visible:text-danger disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-content-faint'
+/** The question's answers, in the footer buttons' size. */
+const CANCEL_BTN = 'inline-flex items-center gap-1.5 rounded-[10px] bg-surface-tertiary px-3.5 py-2 font-medium text-content hover:bg-surface-hover'
+const DANGER_BTN = 'inline-flex items-center gap-1.5 rounded-[10px] bg-danger px-4 py-2 font-semibold text-white hover:opacity-90' // theme-lint-disable: white on the danger fill, as ConfirmDialog draws it
 
 /**
- * Modal for moving whole days around: drag a row by its grip or use the up/down
+ * Dialog for moving whole days around: drag a row by its grip or use the up/down
  * arrows, add a day, or delete one. Day headers stay untouched, so this is the
  * single surface for ordering. Reorders are applied optimistically by the store,
  * so the list reflects each move immediately.
@@ -61,6 +64,7 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
   const bodyRef = useRef<HTMLDivElement>(null)
   const cancelRef = useRef<HTMLButtonElement>(null)
   const spot = useRef<ListSpot | null>(null)
+  const dialogTitleId = useId()
   const titleId = useId()
   const bodyId = useId()
 
@@ -90,8 +94,8 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
   useEffect(() => { if (!isOpen) questionRef.current?.onCancel() }, [isOpen])
   useEffect(() => () => questionRef.current?.onCancel(), [])
 
-  // Escape takes back the question, not the dialog. Captured and stopped
-  // before the dialog's own listener, which would close everything.
+  // Escape takes back the question, not the dialog: the dialog is blocked
+  // while it asks, and the key is caught before anything under it sees it.
   useEffect(() => {
     if (!asking) return
     const onKey = (e: KeyboardEvent) => {
@@ -129,44 +133,55 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
     again?.focus()
   }, [askedDayId])
 
+  const header = (
+    <DialogHeader
+      tile={<DialogTile><ArrowUpDown size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+      tint={NEUTRAL_TINT}
+      labelId={dialogTitleId}
+      onClose={close}
+      title={t('dayplan.reorderTitle')}
+    />
+  )
+
   const footer = asking ? (
-    <div className="flex items-center justify-end gap-2">
-      <button ref={cancelRef} type="button" onClick={asking.onCancel} className={SECONDARY_BTN}>
+    <DialogFooter>
+      <FooterSpacer />
+      <button ref={cancelRef} type="button" onClick={asking.onCancel} className={CANCEL_BTN} style={fs(13, 'body')}>
         {t('common.cancel')}
       </button>
-      <button type="button" onClick={asking.onConfirm} className={`${FOOTER_BTN} bg-danger font-semibold text-white hover:opacity-90`}>
-        <Trash2 size={15} strokeWidth={2} aria-hidden="true" />
+      <button type="button" onClick={asking.onConfirm} className={DANGER_BTN} style={fs(13, 'body')}>
+        <Trash2 size={14} strokeWidth={2} aria-hidden="true" />
         {t('dayplan.deleteDay')}
       </button>
-    </div>
+    </DialogFooter>
   ) : (
     <DayAddFooter dayAdd={dayAdd} onAddDay={onAddDay} onClose={close} t={t} locale={locale} />
   )
 
   return (
-    <Modal isOpen={isOpen} onClose={close} title={t('dayplan.reorderTitle')} size="lg" align="top" footer={footer}>
+    <DialogShell open={isOpen} onClose={close} labelledBy={dialogTitleId} width="narrow" align="top" blocked={!!asking} header={header} footer={footer}>
       <div ref={bodyRef}>
         {asking ? (
           <section aria-labelledby={titleId} aria-describedby={bodyId} className="trek-page-enter">
             <div className="flex items-start gap-3">
-              <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-danger-soft text-danger">
+              <span className="grid h-9 w-9 flex-none place-items-center rounded-full bg-danger-soft text-danger">
                 <AlertTriangle size={16} strokeWidth={2} aria-hidden="true" />
               </span>
               <div className="min-w-0 flex-1">
-                <h3 id={titleId} className="text-subtitle font-semibold leading-snug text-content">{asking.title}</h3>
-                <p id={bodyId} className="mt-0.5 text-caption text-content-muted">{t('dayplan.deleteDayBody')}</p>
+                <h3 id={titleId} className="m-0 font-bold leading-snug text-content" style={fs(15, 'subtitle')}>{asking.title}</h3>
+                <p id={bodyId} className="m-0 mt-0.5 text-content-muted" style={fs(12.5, 'body')}>{t('dayplan.deleteDayBody')}</p>
               </div>
             </div>
             <DayImpactList lines={asking.lines} label={asking.title} />
           </section>
         ) : (
           <>
-            <p className="mb-3 text-caption text-content-muted">{t('dayplan.reorderHint')}</p>
+            <p className="m-0 mb-3 text-content-muted" style={fs(12.5, 'body')}>{t('dayplan.reorderHint')}</p>
 
-            {/* The popup is a modal, so it portals out of the planner and has to opt
-                into the long-press drag itself (#1616). Without this a finger only
+            {/* The dialog portals out of the planner, so it has to opt into the
+                long-press drag itself (#1616). Without this a finger only
                 selects the row text. */}
-            <div data-touch-drag className="flex flex-col gap-1">
+            <div data-touch-drag className="flex flex-col gap-1.5">
               {ordered.map((day, index) => {
                 const dropTarget = overIndex === index && dragIndex !== null && dragIndex !== index
                 return (
@@ -181,15 +196,15 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
                       if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)
                       setDragIndex(null); setOverIndex(null)
                     }}
-                    className={`flex items-center gap-2.5 rounded-lg border border-edge-faint px-2.5 py-1.5 ${
+                    className={`flex items-center gap-2.5 rounded-[14px] border border-edge-faint py-2 pl-2.5 pr-2 ${
                       dropTarget ? 'bg-surface-hover outline-dashed outline-2 -outline-offset-2 outline-edge' : 'bg-surface-card'
                     } ${dragIndex === index ? 'opacity-50' : ''}`}
                   >
                     <GripVertical size={15} strokeWidth={1.8} className="flex-shrink-0 cursor-grab text-content-faint" />
-                    <span className="grid h-6 w-6 flex-shrink-0 place-items-center rounded-full bg-surface-hover text-caption font-semibold text-content-muted">
+                    <span className="grid h-6 w-6 flex-shrink-0 place-items-center rounded-full bg-surface-tertiary font-geist font-bold tabular-nums text-content-muted" style={fs(11)}>
                       {index + 1}
                     </span>
-                    <span className="min-w-0 flex-1 truncate text-body font-medium text-content">
+                    <span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(13.5, 'body')}>
                       {dayLabel(day, index, t, locale)}
                     </span>
                     <button
@@ -236,6 +251,6 @@ export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay,
           </>
         )}
       </div>
-    </Modal>
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/FileImportModal.test.tsx b/client/src/components/Planner/FileImportModal.test.tsx
index fcd540760..7f3559043 100644
--- a/client/src/components/Planner/FileImportModal.test.tsx
+++ b/client/src/components/Planner/FileImportModal.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-FILEIMP-001 to FE-PLANNER-FILEIMP-018
+// FE-PLANNER-FILEIMP-001 to FE-PLANNER-FILEIMP-021
 import { render, screen, fireEvent, waitFor } from '../../../tests/helpers/render';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
@@ -237,10 +237,38 @@ describe('FileImportModal', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(onClose).toHaveBeenCalledTimes(1);
 
-    fireEvent.click(document.querySelector('[style*="z-index: 99999"]') as HTMLElement);
+    // The backdrop is the dialog's parent; a press that starts and ends on it closes.
+    const backdrop = screen.getByRole('dialog').parentElement as HTMLElement;
+    fireEvent.mouseDown(backdrop);
+    fireEvent.click(backdrop);
     expect(onClose).toHaveBeenCalledTimes(2);
     // A click inside the card is swallowed.
+    fireEvent.mouseDown(screen.getByText('Import file'));
     fireEvent.click(screen.getByText('Import file'));
     expect(onClose).toHaveBeenCalledTimes(2);
   });
+
+  it('FE-PLANNER-FILEIMP-020: Escape and the head band X close it as well', () => {
+    const onClose = vi.fn();
+    render(<FileImportModal {...defaultProps} onClose={onClose} />);
+    expect(screen.getByRole('dialog', { name: 'Import file' })).toBeInTheDocument();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it('FE-PLANNER-FILEIMP-021: re-ticking a type lifts the block again', () => {
+    render(<FileImportModal {...defaultProps} initialFile={kml()} />);
+    const points = screen.getByRole('checkbox', { name: 'Points (Placemarks)' });
+    const paths = screen.getByRole('checkbox', { name: 'Paths (LineStrings)' });
+    expect(points).toHaveAttribute('aria-checked', 'true');
+    fireEvent.click(points);
+    fireEvent.click(paths);
+    expect(points).toHaveAttribute('aria-checked', 'false');
+    expect(importBtn()).toBeDisabled();
+    fireEvent.click(paths);
+    expect(screen.queryByText('Select at least one type to import.')).not.toBeInTheDocument();
+    expect(importBtn()).toBeEnabled();
+  });
 });
diff --git a/client/src/components/Planner/FileImportModal.tsx b/client/src/components/Planner/FileImportModal.tsx
index f65133bf2..e051fdb6d 100644
--- a/client/src/components/Planner/FileImportModal.tsx
+++ b/client/src/components/Planner/FileImportModal.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
-import { createPortal } from 'react-dom'
-import { useState, useRef, useEffect } from 'react'
-import { Upload } from 'lucide-react'
+import { useState, useRef, useEffect, useId } from 'react'
+import { Check, FileDown, Loader2, Upload } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
 import { placesApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
+import {
+  DialogButton, DialogFooter, DialogHeader, DialogSection, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs,
+} from '../shared/DialogShell'
+import { EditorField } from '../shared/dialogParts'
 
 interface PlacesImportSummary {
   totalPlacemarks: number
@@ -25,11 +28,27 @@ interface FileImportModalProps {
 
 const MAX_FILE_BYTES = 10 * 1024 * 1024
 
+/** One tickable kind of content in the file (waypoints, paths…). */
+function TypeCheck({ checked, label, onToggle }: { checked: boolean; label: string; onToggle: () => void }) {
+  return (
+    <button type="button" role="checkbox" aria-checked={checked} onClick={onToggle}
+      className="flex w-full items-center gap-2.5 rounded-[10px] px-2 py-1.5 text-left hover:bg-surface-hover">
+      <span className={`grid h-4 w-4 flex-none place-items-center rounded-[5px] ${checked ? 'bg-accent' : 'border-[1.5px] border-edge'}`}>
+        {checked && <Check size={11} strokeWidth={3} className="text-accent-text" />}
+      </span>
+      <span className="select-none text-content" style={fs(12.5, 'body')}>{label}</span>
+    </button>
+  )
+}
+
+const TYPE_BOX = 'flex flex-col gap-0.5 rounded-[14px] border border-edge-faint bg-surface-secondary p-1.5'
+
 export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, initialFile }: FileImportModalProps) {
   const { t } = useTranslation()
   const toast = useToast()
   const loadTrip = useTripStore((s) => s.loadTrip)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const titleId = useId()
 
   const [files, setFiles] = useState<File[]>([])
   const [isDragOver, setIsDragOver] = useState(false)
@@ -215,35 +234,52 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
 
   if (!isOpen) return null
 
-  return createPortal(
-    <div
-      role="presentation"
-      onClick={handleClose}
-      className="bg-[rgba(0,0,0,0.4)]"
-      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-    >
-      <div
-        role="presentation"
-        onClick={e => e.stopPropagation()}
-        className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 520, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: "var(--font-system)" }}
-      >
-        <div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, color: 'var(--text-primary)', marginBottom: 6 }}>
-          {t('places.importFile')}
-        </div>
-        <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', marginBottom: 14, lineHeight: 1.45 }}>
-          {t('places.importFileHint')}
-        </div>
+  let zoneText: React.ReactNode
+  if (isDragOver) zoneText = <span className="pointer-events-none font-semibold text-accent">{t('places.importFileDropActive')}</span>
+  else if (files.length > 0) zoneText = <span className="pointer-events-none break-all text-center font-semibold text-content">{files.map(f => f.name).join(', ')}</span>
+  else zoneText = <span className="pointer-events-none text-center text-content-faint">{t('places.importFileDropHere')}</span>
 
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept=".gpx,.kml,.kmz"
-          multiple
-          style={{ display: 'none' }}
-          onChange={handleInputChange}
+  return (
+    <DialogShell
+      onClose={handleClose}
+      labelledBy={titleId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><FileDown size={20} strokeWidth={1.9} className="text-content" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={titleId}
+          onClose={handleClose}
+          title={t('places.importFile')}
+          sub={t('places.importFileHint')}
+          subWraps
         />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={handleClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton
+            variant="primary"
+            onClick={handleImport}
+            disabled={!canImport}
+            icon={loading ? <Loader2 size={14} className="animate-spin" /> : undefined}
+          >
+            {loading ? t('common.loading') : t('common.import')}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".gpx,.kml,.kmz"
+        multiple
+        className="hidden"
+        onChange={handleInputChange}
+      />
 
+      <EditorField label={t('files.title')}>
         <button
           type="button"
           onClick={() => fileInputRef.current?.click()}
@@ -251,143 +287,68 @@ export default function FileImportModal({ isOpen, onClose, tripId, pushUndo, ini
           onDragEnter={handleDragOver}
           onDragLeave={handleDragLeave}
           onDrop={handleDrop}
-          className={isDragOver ? 'bg-surface-tertiary' : 'bg-transparent'}
-          style={{
-            width: '100%',
-            minHeight: 88,
-            borderRadius: 12,
-            border: `2px dashed ${isDragOver ? 'var(--accent)' : 'var(--border-primary)'}`,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 6,
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))',
-            fontWeight: 500,
-            cursor: 'pointer',
-            marginBottom: 12,
-            fontFamily: 'inherit',
-            transition: 'border-color 0.15s, background 0.15s',
-            boxSizing: 'border-box',
-            padding: 16,
-          }}
+          className={`flex min-h-[96px] w-full flex-col items-center justify-center gap-1.5 rounded-[14px] border-2 border-dashed p-4 font-medium transition-colors ${isDragOver ? 'border-accent bg-surface-tertiary' : 'border-edge bg-surface-secondary hover:border-content-faint'}`}
+          style={fs(13, 'body')}
         >
-          <Upload size={18} strokeWidth={1.8} color={isDragOver ? 'var(--accent)' : 'var(--text-faint)'} style={{ pointerEvents: 'none' }} />
-          {isDragOver ? (
-            <span className="text-accent" style={{ pointerEvents: 'none' }}>{t('places.importFileDropActive')}</span>
-          ) : files.length > 0 ? (
-            <span style={{ color: 'var(--text-primary)', textAlign: 'center', wordBreak: 'break-all', pointerEvents: 'none' }}>{files.map(f => f.name).join(', ')}</span>
-          ) : (
-            <span style={{ color: 'var(--text-faint)', textAlign: 'center', pointerEvents: 'none' }}>{t('places.importFileDropHere')}</span>
-          )}
+          <Upload size={18} strokeWidth={1.8} className={`pointer-events-none ${isDragOver ? 'text-accent' : 'text-content-faint'}`} />
+          {zoneText}
         </button>
+      </EditorField>
 
-        {isGpx && (
-          <div style={{ marginBottom: 12 }}>
-            <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-              {t('places.gpxImportTypes')}
-            </div>
+      {isGpx && (
+        <DialogSection label={t('places.gpxImportTypes')}>
+          <div className={TYPE_BOX}>
             {(['waypoints', 'routes', 'tracks'] as const).map(key => (
-              <button type="button" key={key} role="checkbox" aria-checked={gpxOpts[key]} onClick={() => setGpxOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer', width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}>
-                <div className={gpxOpts[key] ? 'bg-accent' : 'bg-transparent'} style={{
-                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                  border: gpxOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                }}>
-                  {gpxOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
-                </div>
-                <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', userSelect: 'none' }}>
-                  {t(key === 'waypoints' ? 'places.gpxImportWaypoints' : key === 'routes' ? 'places.gpxImportRoutes' : 'places.gpxImportTracks')}
-                </span>
-              </button>
+              <TypeCheck
+                key={key}
+                checked={gpxOpts[key]}
+                onToggle={() => setGpxOpts(prev => ({ ...prev, [key]: !prev[key] }))}
+                label={t(key === 'waypoints' ? 'places.gpxImportWaypoints' : key === 'routes' ? 'places.gpxImportRoutes' : 'places.gpxImportTracks')}
+              />
             ))}
-            {gpxNoneSelected && (
-              <div className="text-[#b45309]" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 4 }}>{t('places.gpxImportNoneSelected')}</div>
-            )}
           </div>
-        )}
+          {gpxNoneSelected && <p className="m-0 mt-1.5 text-warning" style={fs(11.5)}>{t('places.gpxImportNoneSelected')}</p>}
+        </DialogSection>
+      )}
 
-        {isKml && (
-          <div style={{ marginBottom: 12 }}>
-            <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-              {t('places.kmlImportTypes')}
-            </div>
+      {isKml && (
+        <DialogSection label={t('places.kmlImportTypes')}>
+          <div className={TYPE_BOX}>
             {(['points', 'paths'] as const).map(key => (
-              <button type="button" key={key} role="checkbox" aria-checked={kmlOpts[key]} onClick={() => setKmlOpts(prev => ({ ...prev, [key]: !prev[key] }))} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '4px 0', cursor: 'pointer', width: '100%', border: 'none', background: 'transparent', fontFamily: 'inherit', textAlign: 'left' }}>
-                <div className={kmlOpts[key] ? 'bg-accent' : 'bg-transparent'} style={{
-                  width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                  border: kmlOpts[key] ? 'none' : '1.5px solid var(--border-primary)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                }}>
-                  {kmlOpts[key] && <svg width="10" height="10" viewBox="0 0 10 10"><polyline points="1.5,5 4,7.5 8.5,2" stroke="white" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" /></svg>}
-                </div>
-                <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', userSelect: 'none' }}>
-                  {t(key === 'points' ? 'places.kmlImportPoints' : 'places.kmlImportPaths')}
-                </span>
-              </button>
+              <TypeCheck
+                key={key}
+                checked={kmlOpts[key]}
+                onToggle={() => setKmlOpts(prev => ({ ...prev, [key]: !prev[key] }))}
+                label={t(key === 'points' ? 'places.kmlImportPoints' : 'places.kmlImportPaths')}
+              />
             ))}
-            {kmlNoneSelected && (
-              <div className="text-[#b45309]" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 4 }}>{t('places.kmlImportNoneSelected')}</div>
-            )}
           </div>
-        )}
+          {kmlNoneSelected && <p className="m-0 mt-1.5 text-warning" style={fs(11.5)}>{t('places.kmlImportNoneSelected')}</p>}
+        </DialogSection>
+      )}
 
-        {summary && (
-          <div style={{
-            border: '1px solid var(--border-primary)', borderRadius: 10,
-            background: 'var(--bg-tertiary)', padding: 10, marginBottom: 10,
-          }}>
-            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)' }}>
-              {t('places.kmlKmzSummaryValues', {
-                total: summary.totalPlacemarks,
-                created: summary.createdCount,
-                skipped: summary.skippedCount,
-              })}
+      {summary && (
+        <div className="flex flex-col gap-2 rounded-[14px] border border-edge-faint bg-surface-secondary px-3 py-2.5">
+          <div className="text-content-muted" style={fs(12, 'body')}>
+            {t('places.kmlKmzSummaryValues', {
+              total: summary.totalPlacemarks,
+              created: summary.createdCount,
+              skipped: summary.skippedCount,
+            })}
+          </div>
+          {summary.warnings?.length > 0 && (
+            <div className="whitespace-pre-wrap rounded-[10px] bg-warning-soft px-2.5 py-2 text-warning" style={fs(12, 'body')}>
+              {summary.warnings.join('\n')}
             </div>
-            {summary.warnings?.length > 0 && (
-              <div className="text-[#b45309]" style={{ marginTop: 8, fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'pre-wrap' }}>
-                {summary.warnings.join('\n')}
-              </div>
-            )}
-          </div>
-        )}
-
-        {error && (
-          <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{
-            border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10,
-            padding: '8px 10px',
-            fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'pre-wrap', marginBottom: 10,
-          }}>
-            {error}
-          </div>
-        )}
-
-        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-          <button type="button"
-            onClick={handleClose}
-            style={{
-              padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
-              background: 'none', color: 'var(--text-primary)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            {t('common.cancel')}
-          </button>
-          <button type="button"
-            onClick={handleImport}
-            disabled={!canImport}
-            className={canImport ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
-            style={{
-              padding: '8px 16px', borderRadius: 10, border: 'none',
-              fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, cursor: canImport ? 'pointer' : 'default',
-              fontFamily: 'inherit',
-            }}
-          >
-            {loading ? t('common.loading') : t('common.import')}
-          </button>
+          )}
         </div>
-      </div>
-    </div>,
-    document.body
+      )}
+
+      {error && (
+        <div role="alert" className="whitespace-pre-wrap rounded-[12px] bg-danger-soft px-3 py-2 text-danger" style={fs(12, 'body')}>
+          {error}
+        </div>
+      )}
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/IcsSubscribeModal.test.tsx b/client/src/components/Planner/IcsSubscribeModal.test.tsx
index 92a1ffa91..171a92a87 100644
--- a/client/src/components/Planner/IcsSubscribeModal.test.tsx
+++ b/client/src/components/Planner/IcsSubscribeModal.test.tsx
@@ -1,9 +1,16 @@
-// FE-PLANNER-ICS-001 to FE-PLANNER-ICS-012
+// FE-PLANNER-ICS-001 to FE-PLANNER-ICS-016
 import { render, screen, fireEvent, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
 import { IcsSubscribeModal } from './IcsSubscribeModal';
 
+// The phone keeps the dialog's own markup, the desktop draws it in the shared
+// dialog frame. useIsPhone reads matchMedia, which the test setup always
+// answers with false, so the phone is switched on by hand.
+const phone = vi.hoisted(() => ({ value: false }));
+vi.mock('../../mobile/useIsPhone', () => ({ useIsPhone: () => phone.value }));
+
 const ENDPOINT = '/api/trips/9/feed';
 const TOKEN_URL = `${ENDPOINT}/token`;
 
@@ -24,7 +31,12 @@ function tokenHandlers(handler: (method: string) => Response | Promise<Response>
   ];
 }
 
-describe('IcsSubscribeModal', () => {
+afterEach(() => { phone.value = false; });
+
+// Everything a user can do with the link works the same on both shells.
+describe.each([['phone', true], ['desktop', false]] as const)('IcsSubscribeModal on the %s', (_shell, isPhone) => {
+  beforeEach(() => { phone.value = isPhone; });
+
   it('FE-PLANNER-ICS-001: shows the loading state until the token read resolves', async () => {
     let release: (() => void) | null = null;
     const gate = new Promise<void>(res => { release = res; });
@@ -135,6 +147,10 @@ describe('IcsSubscribeModal', () => {
     await waitFor(() => expect(regenerate).not.toBeDisabled());
     expect(screen.getByText('https://trek.example/feed/keep.ics')).toBeInTheDocument();
   });
+});
+
+describe('IcsSubscribeModal on the phone', () => {
+  beforeEach(() => { phone.value = true; });
 
   it('FE-PLANNER-ICS-011: the close button and a backdrop click both call onClose, an inner click does not', async () => {
     const onClose = vi.fn();
@@ -154,4 +170,61 @@ describe('IcsSubscribeModal', () => {
     fireEvent.click(screen.getByText('Keep the itinerary in your own calendar.'));
     expect(onClose).toHaveBeenCalledTimes(2);
   });
+
+  it('FE-PLANNER-ICS-013: the phone keeps its own sheet, not the desktop dialog frame', async () => {
+    server.use(http.get(TOKEN_URL, () => HttpResponse.json({ feed_url: null })));
+    render(<IcsSubscribeModal {...defaultProps} />);
+    await screen.findByRole('button', { name: /Enable calendar subscription/i });
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(document.querySelector('[style*="z-index: 9999"]')).not.toBeNull();
+  });
+});
+
+describe('IcsSubscribeModal on the desktop', () => {
+  it('FE-PLANNER-ICS-014: a dialog named by its title, the description and the links in it', async () => {
+    server.use(http.get(TOKEN_URL, () => HttpResponse.json({ feed_url: 'https://trek.example/feed/tok.ics' })));
+    render(<IcsSubscribeModal {...defaultProps} />);
+    const dialog = screen.getByRole('dialog', { name: 'Subscribe to this trip' });
+    expect(dialog).toHaveTextContent('Keep the itinerary in your own calendar.');
+    expect(await screen.findByRole('link', { name: /Add to Google Calendar/i })).toBeInTheDocument();
+    expect(screen.getByText(/Regenerating creates a new link/i)).toBeInTheDocument();
+    // Turning the link off is drawn in the danger colour.
+    expect(screen.getByRole('button', { name: /Turn off/i })).toHaveClass('text-danger');
+  });
+
+  it('FE-PLANNER-ICS-015: the close button, Escape and a backdrop press close it, a press inside does not', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    server.use(http.get(TOKEN_URL, () => HttpResponse.json({ feed_url: null })));
+    render(<IcsSubscribeModal {...defaultProps} onClose={onClose} />);
+    await screen.findByRole('button', { name: /Enable calendar subscription/i });
+
+    await user.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+
+    await user.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(2);
+
+    await user.click(screen.getByText('Keep the itinerary in your own calendar.'));
+    expect(onClose).toHaveBeenCalledTimes(2);
+
+    await user.click(screen.getByRole('dialog').parentElement as HTMLElement);
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it('FE-PLANNER-ICS-016: while a change is sent, the link controls wait for it', async () => {
+    let release: (() => void) | null = null;
+    const gate = new Promise<void>(res => { release = res; });
+    server.use(
+      http.get(TOKEN_URL, () => HttpResponse.json({ feed_url: 'https://trek.example/feed/tok.ics' })),
+      http.put(TOKEN_URL, async () => { await gate; return HttpResponse.json({ feed_url: 'https://trek.example/feed/new.ics' }); }),
+    );
+    render(<IcsSubscribeModal {...defaultProps} />);
+    fireEvent.click(await screen.findByRole('button', { name: /Regenerate/i }));
+    await waitFor(() => expect(screen.getByRole('button', { name: /Turn off/i })).toBeDisabled());
+    expect(screen.getByRole('button', { name: /Regenerate/i })).toBeDisabled();
+    release!();
+    expect(await screen.findByText('https://trek.example/feed/new.ics')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Turn off/i })).toBeEnabled();
+  });
 });
diff --git a/client/src/components/Planner/IcsSubscribeModal.tsx b/client/src/components/Planner/IcsSubscribeModal.tsx
index a5551408e..447407c79 100644
--- a/client/src/components/Planner/IcsSubscribeModal.tsx
+++ b/client/src/components/Planner/IcsSubscribeModal.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useId, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import { X, RefreshCw, Calendar, Power } from 'lucide-react'
 import { SubscribeLinks } from './SubscribeLinks'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 
 interface IcsSubscribeModalProps {
   /** Token endpoint base, e.g. `/api/trips/123/feed` or `/api/feed/user`. */
@@ -25,12 +27,17 @@ function absolutize(url: string): string {
  * Shared subscribe dialog for the per-trip and all-trips ICS feeds. Opening it
  * only *reads* the current token — it never mints one silently. The user
  * explicitly enables the public link, and can rotate or fully turn it off.
+ *
+ * The phone keeps its own markup; the desktop draws the same steps in the
+ * planner's dialog frame, with the link's controls in the bar at the foot.
  */
 export function IcsSubscribeModal({ endpoint, title, description, onClose }: IcsSubscribeModalProps) {
   const tokenUrl = `${endpoint}/token`
   const [feedUrl, setFeedUrl] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
   const [busy, setBusy] = useState(false)
+  const isPhone = useIsPhone()
+  const titleId = useId()
 
   const httpsUrl = feedUrl ? absolutize(feedUrl) : ''
   const webcalUrl = httpsUrl ? httpsUrl.replace(/^https?:\/\//, 'webcal://') : ''
@@ -61,6 +68,23 @@ export function IcsSubscribeModal({ endpoint, title, description, onClose }: Ics
     setBusy(false)
   }
 
+  if (!isPhone) {
+    return (
+      <DesktopSubscribeDialog
+        titleId={titleId}
+        title={title}
+        description={description}
+        onClose={onClose}
+        loading={loading}
+        busy={busy}
+        feedUrl={feedUrl}
+        httpsUrl={httpsUrl}
+        webcalUrl={webcalUrl}
+        mutate={mutate}
+      />
+    )
+  }
+
   return createPortal(
     <div
       role="presentation"
@@ -177,3 +201,79 @@ export function IcsSubscribeModal({ endpoint, title, description, onClose }: Ics
   document.body
   )
 }
+
+// A secondary footer button in the danger colour, for the switch that takes the link away.
+const TURN_OFF_BTN = 'inline-flex items-center gap-1.5 rounded-[10px] bg-surface-tertiary px-3.5 py-2 font-medium text-danger hover:bg-danger-soft disabled:cursor-default disabled:opacity-50'
+
+function DesktopSubscribeDialog({ titleId, title, description, onClose, loading, busy, feedUrl, httpsUrl, webcalUrl, mutate }: {
+  titleId: string
+  title: string
+  description: string
+  onClose: () => void
+  loading: boolean
+  busy: boolean
+  feedUrl: string | null
+  httpsUrl: string
+  webcalUrl: string
+  mutate: (method: 'POST' | 'PUT' | 'DELETE') => Promise<void>
+}) {
+  const header = (
+    <DialogHeader
+      tile={<DialogTile><Calendar size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+      tint={NEUTRAL_TINT}
+      labelId={titleId}
+      onClose={onClose}
+      title={title}
+      sub={description}
+      subWraps
+    />
+  )
+
+  const hint = 'm-0 leading-normal text-content-muted'
+  let body: ReactNode
+  let footer: ReactNode = null
+  if (loading) {
+    body = <div className="py-4 text-center text-content-muted" style={fs(12.5, 'body')}>Loading…</div>
+  } else if (!feedUrl) {
+    body = (
+      <p className={hint} style={fs(12.5, 'body')}>
+        Creates a secret link anyone with it can read without logging in. You can turn it off anytime.
+      </p>
+    )
+    footer = (
+      <DialogFooter>
+        <FooterSpacer />
+        <DialogButton variant="primary" onClick={() => mutate('POST')} disabled={busy} icon={<Calendar size={14} strokeWidth={2} />}>
+          Enable calendar subscription
+        </DialogButton>
+      </DialogFooter>
+    )
+  } else {
+    body = (
+      <>
+        <SubscribeLinks httpsUrl={httpsUrl} webcalUrl={webcalUrl} />
+        <p className={hint} style={fs(11.5)}>
+          Regenerating creates a new link and invalidates the old one. Turning off disables the link entirely.
+        </p>
+      </>
+    )
+    footer = (
+      <DialogFooter>
+        <DialogButton onClick={() => mutate('PUT')} disabled={busy} icon={<RefreshCw size={14} strokeWidth={2} className={busy ? 'animate-spin' : ''} />}>
+          Regenerate
+        </DialogButton>
+        <FooterSpacer />
+        <button type="button" onClick={() => mutate('DELETE')} disabled={busy} className={TURN_OFF_BTN} style={fs(13, 'body')}>
+          <Power size={14} strokeWidth={2} />
+          Turn off
+        </button>
+      </DialogFooter>
+    )
+  }
+
+  return (
+    <DialogShell onClose={onClose} labelledBy={titleId} width="narrow" header={header} footer={footer}>
+      {body}
+    </DialogShell>
+  )
+}
diff --git a/client/src/components/Planner/PlaceDetailsColumn.test.tsx b/client/src/components/Planner/PlaceDetailsColumn.test.tsx
index 5287136cc..c8a840c0a 100644
--- a/client/src/components/Planner/PlaceDetailsColumn.test.tsx
+++ b/client/src/components/Planner/PlaceDetailsColumn.test.tsx
@@ -634,3 +634,157 @@ describe('PlaceDetailsColumn — picture layout', () => {
     )
   })
 })
+
+/**
+ * FE-PDC-040..049 — the desktop dialog's look (variant="dialog").
+ *
+ * The phone sheet keeps the default look, which every case above pins. The
+ * dialog draws the same content on white cards under eyebrows, with a quiet
+ * hint card for the empty states, no native tooltips, and no dot between two
+ * credits.
+ */
+describe('PlaceDetailsColumn — dialog variant', () => {
+  const renderDialog = (props: Partial<React.ComponentProps<typeof PlaceDetailsColumn>> = {}) =>
+    renderColumn({ variant: 'dialog', ...props })
+
+  it('FE-PDC-040: waits with a hint card under the column eyebrow while nothing is picked', () => {
+    const { container } = renderDialog({ selection: null })
+
+    expect(screen.getByRole('heading', { name: 'places.details.title' })).toBeInTheDocument()
+    expect(screen.getByText('places.details.empty')).toBeInTheDocument()
+    expect(container.querySelector('aside')).toHaveClass('sm:w-80')
+    expect(placeEnrichment).not.toHaveBeenCalled()
+  })
+
+  it('FE-PDC-041: says it is loading, then shows the content on cards', async () => {
+    let settle: (v: MapsPlaceEnrichmentResult) => void = () => {}
+    placeEnrichment.mockReturnValue(new Promise<MapsPlaceEnrichmentResult>((r) => { settle = r }))
+    renderDialog()
+
+    expect(screen.getByText('places.details.loading')).toBeInTheDocument()
+    settle(RESULT)
+    expect(await screen.findByText('Ein Museum in Köln.')).toBeInTheDocument()
+    expect(screen.getByText('places.details.pickImage')).toBeInTheDocument()
+  })
+
+  it('FE-PDC-042: credits a picture and its licence side by side, without a dot or a native tooltip', async () => {
+    const { onPickImage } = renderDialog()
+
+    const tile = await screen.findByRole('button', { name: /places.details.pickImage/ })
+    expect(tile).not.toHaveAttribute('title')
+    const licence = screen.getByText('CC BY-SA 4.0', { selector: 'a[href*="creativecommons"]' })
+    expect(licence.closest('p')).toHaveTextContent('Alice')
+    expect(licence.closest('p')?.textContent).not.toContain('·')
+
+    fireEvent.click(tile)
+    expect(onPickImage).toHaveBeenCalledWith(COMMONS_PHOTO.url)
+  })
+
+  it('FE-PDC-043: a picture without a licence link or source page is still credited', async () => {
+    placeEnrichment.mockResolvedValue({
+      photos: [{ ...COMMONS_PHOTO, sourceUrl: null, licenseUrl: null }],
+      facts: [],
+      description: null,
+    })
+    renderDialog({ selectedImageUrl: COMMONS_PHOTO.url })
+
+    const tile = await screen.findByRole('button', { name: /places.details.pickImage/ })
+    expect(tile).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+    expect(screen.getByText('CC BY-SA 4.0')).toBeInTheDocument()
+  })
+
+  it('FE-PDC-044: the adopt button is a white button, blocked with the reason under it', async () => {
+    const first = renderDialog()
+    const adopt = await screen.findByRole('button', { name: 'places.details.adopt' })
+    expect(adopt).toHaveClass('bg-surface-card')
+    expect(adopt).not.toHaveAttribute('aria-describedby')
+    fireEvent.click(adopt)
+    expect(first.onAdoptDescription).toHaveBeenCalledWith('Ein Museum in Köln.')
+    first.unmount()
+
+    renderDialog({ hasDescription: true })
+    const blocked = await screen.findByRole('button', { name: 'places.details.adopt' })
+    expect(blocked).toBeDisabled()
+    expect(blocked).not.toHaveAttribute('title')
+    // The line under it is what assistive tech reads as the reason.
+    expect(blocked).toHaveAccessibleDescription('places.details.adoptBlocked')
+  })
+
+  it('FE-PDC-045: names the description source and its licence apart, not joined by a dot', async () => {
+    renderDialog()
+
+    const link = await screen.findByRole('link', { name: /Wikipedia/ })
+    expect(link.parentElement).toHaveTextContent('CC BY-SA 4.0')
+    expect(link.parentElement?.textContent).not.toContain('·')
+  })
+
+  it('FE-PDC-046: facts are white pills without native tooltips; only a safe url becomes a link', async () => {
+    placeEnrichment.mockResolvedValue({
+      photos: [],
+      description: null,
+      facts: [
+        { kind: 'cuisine', value: 'regional', url: null },
+        { kind: 'menu', value: null, url: 'https://example.org/menu' },
+        { kind: 'takeaway', value: null, url: 'javascript:alert(1)' },
+      ],
+    })
+    renderDialog()
+
+    const chip = await screen.findByText('regional')
+    expect(chip.parentElement).not.toHaveAttribute('title')
+    const menu = screen.getByRole('link', { name: /places.details.fact.menu/ })
+    expect(menu).toHaveAttribute('href', 'https://example.org/menu')
+    expect(menu).not.toHaveAttribute('title')
+    expect(screen.queryByRole('link', { name: /places.details.fact.takeaway/ })).not.toBeInTheDocument()
+  })
+
+  it('FE-PDC-047: hours and the rating keep working on the cards', async () => {
+    placeEnrichment.mockResolvedValue({
+      photos: [],
+      facts: [],
+      description: null,
+      rating: { value: 3.8, count: 873 },
+      hours: { weekdayDescriptions: ['Monday: 09:00-18:00', 'Tuesday: 09:00-18:00', 'Wednesday: 09:00-18:00', 'Thursday: 09:00-18:00', 'Friday: 09:00-18:00', 'Saturday: 10:00-14:00', 'Sunday: ?'], periods: null, specialDays: null },
+    })
+    renderDialog()
+
+    expect(await screen.findByText('3.8')).toBeInTheDocument()
+    expect(screen.getByText('(873)')).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { expanded: false }))
+    expect(screen.getAllByRole('listitem')).toHaveLength(7)
+  })
+
+  it('FE-PDC-048: a chain description says so on its card', async () => {
+    placeEnrichment.mockResolvedValue({
+      photos: [],
+      facts: [],
+      description: { text: 'Eine Kette.', source: 'website', sourceUrl: null, license: null, aboutBrand: true },
+    })
+    renderDialog()
+
+    expect(await screen.findByText('places.details.aboutBrand')).toBeInTheDocument()
+    expect(screen.getByText('places.details.aboutBrandNote')).toBeInTheDocument()
+    expect(screen.getByText('Website')).toBeInTheDocument()
+  })
+
+  it('FE-PDC-049: nothing found, switched off and failed each say so in a hint card', async () => {
+    placeEnrichment.mockResolvedValue({ photos: [], description: null, facts: [] })
+    const nothing = renderDialog()
+    expect(await screen.findByText('places.details.nothing')).toBeInTheDocument()
+    nothing.unmount()
+    __clearEnrichmentCacheForTests()
+    sessionStorage.clear()
+
+    placeEnrichment.mockResolvedValue({ photos: [], description: null, facts: [], disabled: true })
+    const off = renderDialog()
+    expect(await screen.findByText('places.details.disabled')).toBeInTheDocument()
+    off.unmount()
+    __clearEnrichmentCacheForTests()
+    sessionStorage.clear()
+
+    placeEnrichment.mockRejectedValue(new Error('network'))
+    renderDialog()
+    expect(await screen.findByText('places.details.error', undefined, { timeout: 4000 })).toBeInTheDocument()
+  })
+})
diff --git a/client/src/components/Planner/PlaceDetailsColumn.tsx b/client/src/components/Planner/PlaceDetailsColumn.tsx
index 4f075ed89..47e924811 100644
--- a/client/src/components/Planner/PlaceDetailsColumn.tsx
+++ b/client/src/components/Planner/PlaceDetailsColumn.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useId, useRef, useState } from 'react'
 import {
   Accessibility,
   ArrowRight,
@@ -10,10 +10,12 @@ import {
   ChevronUp,
   Clock,
   ExternalLink,
+  ImageIcon,
   Landmark,
   Leaf,
   Loader2,
   ScrollText,
+  SearchX,
   ShoppingBag,
   Sprout,
   Star,
@@ -26,6 +28,10 @@ import { resolveOpenNow, resolvePlaceTimeZone, placeWeekdayIndex } from './place
 import { convertHoursLine, isUnknownHoursLine, splitHoursLine } from './placeHoursFormat'
 import { safeHttpUrl } from '../../utils/safeUrl'
 import EmptyState from '../shared/EmptyState'
+import { Tooltip } from '../shared/Tooltip'
+import { fs } from '../shared/DialogShell'
+import { LABEL } from '../shared/dialogParts'
+import { COLUMN_CARD, ColumnHead, HintCard, SIDE_COLUMN, WHITE_BUTTON } from './placeDialogParts'
 import type { TranslationFn } from '../../types'
 
 /** The place the column is describing. Null while nothing is selected. */
@@ -57,6 +63,12 @@ interface PlaceDetailsColumnProps {
    * where a 320 px cap would leave it hugging the left half of a wide screen.
    */
   fluid?: boolean
+  /**
+   * 'dialog' is the desktop add place dialog: a grey panel of white cards under
+   * small eyebrows, and a quiet hint card where the sheet shows the mascot. The
+   * default is the phone sheet's look, which this prop leaves exactly as it was.
+   */
+  variant?: 'sheet' | 'dialog'
   /** False on an instance with no Google key, which is most of them. */
   t: TranslationFn
 }
@@ -114,6 +126,27 @@ function Overline({ children }: { children: React.ReactNode }): React.ReactEleme
   )
 }
 
+/**
+ * One block of the column under its label. The sheet keeps its overline; the
+ * dialog uses the eyebrow every field of the form beside it wears.
+ */
+function Block({ label, dialog, children }: { label: React.ReactNode; dialog: boolean; children: React.ReactNode }): React.ReactElement {
+  if (!dialog) {
+    return (
+      <div className="space-y-2">
+        <Overline>{label}</Overline>
+        {children}
+      </div>
+    )
+  }
+  return (
+    <section className="min-w-0">
+      <p className={LABEL}>{label}</p>
+      {children}
+    </section>
+  )
+}
+
 export default function PlaceDetailsColumn({
   selection,
   selectedImageUrl,
@@ -124,8 +157,11 @@ export default function PlaceDetailsColumn({
   timeFormat = '24h',
   locale = 'en-US',
   fluid = false,
+  variant = 'sheet',
   t,
 }: PlaceDetailsColumnProps): React.ReactElement {
+  const dialog = variant === 'dialog'
+  const adoptBlockedId = useId()
   const [data, setData] = useState<MapsPlaceEnrichmentResult | null>(null)
   const [state, setState] = useState<LoadState>('idle')
   const abortRef = useRef<AbortController | null>(null)
@@ -222,16 +258,23 @@ export default function PlaceDetailsColumn({
     // tiles, which is too small to tell a facade from a foyer. The column is
     // stretched to the form's height by the row it sits in, so the extra room
     // costs nothing that was being used.
-    <aside className={`w-full ${fluid ? '' : 'sm:w-80'} shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch`}>
-      <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
-        <Landmark size={15} className="text-accent" />
-        <span className="text-body font-semibold text-content">{t('places.details.title')}</span>
-      </div>
+    <aside className={dialog ? `${SIDE_COLUMN} ${fluid ? '' : 'sm:w-80'}` : `w-full ${fluid ? '' : 'sm:w-80'} shrink-0 flex flex-col rounded-xl border border-edge bg-surface-secondary overflow-hidden self-stretch`}>
+      {dialog ? (
+        <ColumnHead icon={<Landmark size={13} strokeWidth={2.2} />}>{t('places.details.title')}</ColumnHead>
+      ) : (
+        <div className="flex items-center gap-2 px-3 py-2.5 border-b border-edge shrink-0">
+          <Landmark size={15} className="text-accent" />
+          <span className="text-body font-semibold text-content">{t('places.details.title')}</span>
+        </div>
+      )}
 
-      <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-3.5">
+      <div className={dialog ? 'flex min-h-0 flex-1 flex-col gap-3.5 overflow-y-auto px-3 pb-3' : 'flex-1 min-h-0 overflow-y-auto p-3 space-y-3.5'}>
         {/* Nothing picked yet, which is a state rather than a fault: the mascot
-            waits with an idle look instead of a sad one. */}
-        {!selection && (
+            waits with an idle look instead of a sad one. The dialog says the
+            same in a quiet card, and the column keeps its width either way. */}
+        {!selection && (dialog ? (
+          <HintCard icon={<ImageIcon size={15} strokeWidth={2} />}>{t('places.details.empty')}</HintCard>
+        ) : (
           <EmptyState
             scene="idle"
             title={t('places.details.empty')}
@@ -239,27 +282,33 @@ export default function PlaceDetailsColumn({
             fill
             surface="var(--bg-secondary)"
           />
-        )}
+        ))}
 
-        {selection && state === 'loading' && (
+        {selection && state === 'loading' && (dialog ? (
+          <HintCard icon={<Loader2 size={15} className="animate-spin" />}>{t('places.details.loading')}</HintCard>
+        ) : (
           <div className="flex items-center gap-2 text-caption text-content-muted">
             <Loader2 className="w-4 h-4 animate-spin" />
             {t('places.details.loading')}
           </div>
-        )}
+        ))}
 
-        {selection && state === 'error' && <p className="text-caption text-content-muted">{t('places.details.error')}</p>}
+        {selection && state === 'error' && (dialog
+          ? <HintCard icon={<SearchX size={15} strokeWidth={2} />}>{t('places.details.error')}</HintCard>
+          : <p className="text-caption text-content-muted">{t('places.details.error')}</p>)}
 
-        {selection && state === 'ready' && data?.disabled && (
-          <p className="text-caption text-content-muted">{t('places.details.disabled')}</p>
-        )}
+        {selection && state === 'ready' && data?.disabled && (dialog
+          ? <HintCard icon={<Landmark size={15} strokeWidth={2} />}>{t('places.details.disabled')}</HintCard>
+          : <p className="text-caption text-content-muted">{t('places.details.disabled')}</p>)}
 
         {/* The mascot rather than a line of grey text and, under it, a paragraph
             telling the reader to go and ask an administrator for a Google key.
             Nothing came back for this place, which is worth saying once and
             plainly; whose key is missing is not this panel's business, and on a
             place the free sources describe fine it read as an advert. */}
-        {isEmpty && (
+        {isEmpty && (dialog ? (
+          <HintCard icon={<SearchX size={15} strokeWidth={2} />}>{t('places.details.nothing')}</HintCard>
+        ) : (
           <EmptyState
             scene="search"
             mood="sad"
@@ -268,21 +317,22 @@ export default function PlaceDetailsColumn({
             fill
             surface="var(--bg-secondary)"
           />
-        )}
+        ))}
 
         {selection && state === 'ready' && !data?.disabled && !isEmpty && (
           <>
-            <PhotoStrip photos={data?.photos ?? []} selectedImageUrl={selectedImageUrl} onPickImage={onPickImage} t={t} />
-            <RatingRow rating={data?.rating ?? null} locale={locale} />
+            <PhotoStrip photos={data?.photos ?? []} selectedImageUrl={selectedImageUrl} onPickImage={onPickImage} dialog={dialog} t={t} />
+            <RatingRow rating={data?.rating ?? null} locale={locale} dialog={dialog} />
             <OpeningHoursBlock
               hours={data?.hours ?? null}
               lat={selection.lat}
               lng={selection.lng}
               timeFormat={timeFormat}
+              dialog={dialog}
               t={t}
             />
-            <FactList facts={data?.facts ?? []} t={t} />
-            <DescriptionBlock description={data?.description ?? null} t={t} />
+            <FactList facts={data?.facts ?? []} dialog={dialog} t={t} />
+            <DescriptionBlock description={data?.description ?? null} dialog={dialog} t={t} />
           </>
         )}
       </div>
@@ -292,19 +342,36 @@ export default function PlaceDetailsColumn({
           enough to push it out of view — the button was there, just never
           where anyone looked. */}
       {selection && state === 'ready' && !data?.disabled && data?.description && (
-        <div className="shrink-0 border-t border-edge p-2.5">
-          <button
-            type="button"
-            onClick={() => onAdoptDescription(data.description!.text)}
-            disabled={hasDescription}
-            title={hasDescription ? t('places.details.adoptBlocked') : undefined}
-            className="w-full inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-body font-medium bg-accent-subtle text-accent-on hover:bg-accent hover:text-accent-text disabled:opacity-50 disabled:hover:bg-accent-subtle disabled:hover:text-accent-on transition-colors"
-          >
-            <ArrowRight className="w-3.5 h-3.5" />
-            {t('places.details.adopt')}
-          </button>
+        <div className={dialog ? 'shrink-0 border-t border-edge-faint p-2.5' : 'shrink-0 border-t border-edge p-2.5'}>
+          {dialog ? (
+            // White like the dialog's other secondary buttons. While it is
+            // blocked the line under it says why, so it needs no tooltip, and
+            // that line is its description for assistive tech.
+            <button
+              type="button"
+              onClick={() => onAdoptDescription(data.description!.text)}
+              disabled={hasDescription}
+              aria-describedby={hasDescription ? adoptBlockedId : undefined}
+              className={WHITE_BUTTON}
+              style={fs(13, 'body')}
+            >
+              <ArrowRight className="w-3.5 h-3.5" />
+              {t('places.details.adopt')}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => onAdoptDescription(data.description!.text)}
+              disabled={hasDescription}
+              title={hasDescription ? t('places.details.adoptBlocked') : undefined}
+              className="w-full inline-flex items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-body font-medium bg-accent-subtle text-accent-on hover:bg-accent hover:text-accent-text disabled:opacity-50 disabled:hover:bg-accent-subtle disabled:hover:text-accent-on transition-colors"
+            >
+              <ArrowRight className="w-3.5 h-3.5" />
+              {t('places.details.adopt')}
+            </button>
+          )}
           {hasDescription && (
-            <p className="mt-1 text-center text-caption text-content-faint">{t('places.details.adoptBlocked')}</p>
+            <p id={dialog ? adoptBlockedId : undefined} className="mt-1 text-center text-caption text-content-faint">{t('places.details.adoptBlocked')}</p>
           )}
         </div>
       )}
@@ -334,21 +401,21 @@ function PhotoStrip({
   photos,
   selectedImageUrl,
   onPickImage,
+  dialog = false,
   t,
 }: {
   photos: PlacePhotoCandidate[]
   selectedImageUrl?: string
   onPickImage: (url: string | null) => void
+  dialog?: boolean
   t: TranslationFn
 }): React.ReactElement | null {
   const [hovered, setHovered] = useState<string | null>(null)
   if (photos.length === 0) return null
 
   const shown = photos.find((p) => p.url === (hovered ?? selectedImageUrl)) ?? photos[0]
-
-  return (
-    <div className="space-y-2">
-      <Overline>{t('places.details.pickImage')}</Overline>
+  const body = (
+    <>
       <div className="grid grid-cols-3 gap-1.5">
         {photos.map((photo) => (
           <PhotoTile
@@ -357,14 +424,21 @@ function PhotoStrip({
             selected={selectedImageUrl === photo.url}
             onPick={onPickImage}
             onHover={setHovered}
+            dialog={dialog}
             t={t}
           />
         ))}
       </div>
-      <p className="text-caption leading-tight text-content-faint truncate">
-        <PhotoCredit photo={shown} />
+      <p className={dialog ? 'mt-2 flex min-w-0 items-center gap-2 text-caption leading-tight text-content-faint' : 'text-caption leading-tight text-content-faint truncate'}>
+        <PhotoCredit photo={shown} dialog={dialog} />
       </p>
-    </div>
+    </>
+  )
+
+  return (
+    <Block label={t('places.details.pickImage')} dialog={dialog}>
+      {dialog ? <div className={`${COLUMN_CARD} p-2`}>{body}</div> : body}
+    </Block>
   )
 }
 
@@ -373,12 +447,15 @@ function PhotoTile({
   selected,
   onPick,
   onHover,
+  dialog = false,
   t,
 }: {
   photo: PlacePhotoCandidate
   selected: boolean
   onPick: (url: string | null) => void
   onHover: (url: string | null) => void
+  /** On a white card, and without the native tooltip: hovering a tile already moves the credit line under the grid to it. */
+  dialog?: boolean
   t: TranslationFn
 }): React.ReactElement {
   const credit = creditOf(photo)
@@ -393,9 +470,11 @@ function PhotoTile({
       onBlur={() => onHover(null)}
       aria-pressed={selected}
       aria-label={`${t('places.details.pickImage')} — ${credit}`}
-      title={`${credit}${photo.license ? ` · ${photo.license}` : ''}`}
+      title={dialog ? undefined : `${credit}${photo.license ? ` · ${photo.license}` : ''}`}
       className={`group relative block w-full aspect-square overflow-hidden rounded-lg transition-shadow ${
-        selected ? 'ring-2 ring-accent ring-offset-2 ring-offset-surface-secondary' : 'ring-1 ring-edge hover:ring-content-muted'
+        selected
+          ? `ring-2 ring-accent ring-offset-2 ${dialog ? 'ring-offset-surface-card' : 'ring-offset-surface-secondary'}`
+          : 'ring-1 ring-edge hover:ring-content-muted'
       }`}
     >
       <img
@@ -458,9 +537,37 @@ function sourceLabelFor(source: PlacePhotoCandidate['source']): string {
  * us no author (Google), we say where it came from rather than inventing one.
  * Rendered inline — the container supplies the colour and the truncation.
  */
-function PhotoCredit({ photo }: { photo: PlacePhotoCandidate }): React.ReactElement {
+function PhotoCredit({ photo, dialog = false }: { photo: PlacePhotoCandidate; dialog?: boolean }): React.ReactElement {
   const credit = creditOf(photo)
 
+  if (dialog) {
+    // Two pieces side by side with room between them, rather than joined by a dot.
+    return (
+      <>
+        <span className="min-w-0 truncate">
+          {photo.sourceUrl ? (
+            <a href={photo.sourceUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
+              {credit}
+            </a>
+          ) : (
+            credit
+          )}
+        </span>
+        {photo.license && (
+          <span className="flex-none">
+            {photo.licenseUrl ? (
+              <a href={photo.licenseUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
+                {photo.license}
+              </a>
+            ) : (
+              photo.license
+            )}
+          </span>
+        )}
+      </>
+    )
+  }
+
   return (
     <>
       {photo.sourceUrl ? (
@@ -505,12 +612,12 @@ function PhotoCredit({ photo }: { photo: PlacePhotoCandidate }): React.ReactElem
  * a pill is read as text. The count only appears when there is one: Google's
  * search results carry a rating without a count, and empty brackets look broken.
  */
-function RatingRow({ rating, locale }: { rating: PlaceRating | null; locale: string }): React.ReactElement | null {
+function RatingRow({ rating, locale, dialog = false }: { rating: PlaceRating | null; locale: string; dialog?: boolean }): React.ReactElement | null {
   if (!rating) return null
   const filled = Math.round(rating.value)
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className={dialog ? 'inline-flex items-center gap-1.5 self-start rounded-full bg-surface-card px-2.5 py-1 shadow-sm ring-1 ring-edge-faint' : 'flex items-center gap-1.5'}>
       <span className="flex items-center gap-0.5" aria-hidden>
         {[1, 2, 3, 4, 5].map((step) => (
           <Star
@@ -546,12 +653,14 @@ function OpeningHoursBlock({
   lat,
   lng,
   timeFormat,
+  dialog = false,
   t,
 }: {
   hours: PlaceHours | null
   lat: number
   lng: number
   timeFormat: string
+  dialog?: boolean
   t: TranslationFn
 }): React.ReactElement | null {
   const [expanded, setExpanded] = useState(false)
@@ -564,9 +673,8 @@ function OpeningHoursBlock({
   const todayLabel = todayTimes && !isUnknownHoursLine(todayTimes) ? todayTimes : t('inspector.showHours')
 
   return (
-    <div className="space-y-2">
-      <Overline>{t('inspector.openingHours')}</Overline>
-      <div className="rounded-lg border border-edge bg-surface overflow-hidden">
+    <Block label={t('inspector.openingHours')} dialog={dialog}>
+      <div className={dialog ? `${COLUMN_CARD} overflow-hidden` : 'rounded-lg border border-edge bg-surface overflow-hidden'}>
         <button
           type="button"
           onClick={() => setExpanded((v) => !v)}
@@ -624,7 +732,7 @@ function OpeningHoursBlock({
           </ul>
         )}
       </div>
-    </div>
+    </Block>
   )
 }
 
@@ -650,12 +758,11 @@ const FACT_ICONS: Record<PlaceFact['kind'], typeof ChefHat> = {
  * to its menu are in the map data, and they came along with a lookup that had
  * already happened.
  */
-function FactList({ facts, t }: { facts: PlaceFact[]; t: TranslationFn }): React.ReactElement | null {
+function FactList({ facts, dialog = false, t }: { facts: PlaceFact[]; dialog?: boolean; t: TranslationFn }): React.ReactElement | null {
   if (facts.length === 0) return null
 
   return (
-    <div className="space-y-2">
-      <Overline>{t('places.details.facts')}</Overline>
+    <Block label={t('places.details.facts')} dialog={dialog}>
       <div className="flex flex-wrap gap-1.5">
         {facts
           .filter((fact) => fact.kind !== 'openingHours' && fact.kind !== 'rating')
@@ -668,11 +775,28 @@ function FactList({ facts, t }: { facts: PlaceFact[]; t: TranslationFn }): React
               <span className="truncate">{label}</span>
             </>
           )
-          const shared = 'inline-flex items-center gap-1.5 max-w-full rounded-full border border-edge bg-surface px-2 py-1 text-caption text-content-secondary'
           // A fact url is a community-edited OSM tag (website:menu and friends),
           // so anything but http(s) renders as the plain chip instead of a link.
           const href = safeHttpUrl(fact.url)
 
+          if (dialog) {
+            // White pills on the grey column; the label is spelled out in the
+            // shared tooltip for the chip that had to truncate it.
+            const pill = 'inline-flex items-center gap-1.5 max-w-full rounded-full bg-surface-card px-2 py-1 text-caption text-content-secondary shadow-sm ring-1 ring-edge-faint'
+            return (
+              <Tooltip key={fact.kind} label={label}>
+                {href ? (
+                  <a href={href} target="_blank" rel="noopener noreferrer" className={`${pill} hover:text-content hover:ring-content-faint transition-colors`}>
+                    {body}
+                  </a>
+                ) : (
+                  <span className={pill}>{body}</span>
+                )}
+              </Tooltip>
+            )
+          }
+
+          const shared = 'inline-flex items-center gap-1.5 max-w-full rounded-full border border-edge bg-surface px-2 py-1 text-caption text-content-secondary'
           return href ? (
             <a
               key={fact.kind}
@@ -691,7 +815,7 @@ function FactList({ facts, t }: { facts: PlaceFact[]; t: TranslationFn }): React
           )
         })}
       </div>
-    </div>
+    </Block>
   )
 }
 
@@ -704,9 +828,11 @@ function FactList({ facts, t }: { facts: PlaceFact[]; t: TranslationFn }): React
  */
 function DescriptionBlock({
   description,
+  dialog = false,
   t,
 }: {
   description: MapsPlaceEnrichmentResult['description']
+  dialog?: boolean
   t: TranslationFn
 }): React.ReactElement | null {
   if (!description) return null
@@ -720,9 +846,8 @@ function DescriptionBlock({
   const aboutBrand = !!description.aboutBrand
 
   return (
-    <div className="space-y-2">
-      <Overline>{aboutBrand ? t('places.details.aboutBrand') : t('places.details.description')}</Overline>
-      <div className="rounded-lg border border-edge bg-surface p-2.5 space-y-2">
+    <Block label={aboutBrand ? t('places.details.aboutBrand') : t('places.details.description')} dialog={dialog}>
+      <div className={dialog ? `${COLUMN_CARD} p-3 space-y-2` : 'rounded-lg border border-edge bg-surface p-2.5 space-y-2'}>
         {aboutBrand && (
           <p className="flex items-start gap-1.5 text-caption leading-tight text-content-faint">
             <Building2 className="mt-px h-3 w-3 shrink-0" />
@@ -730,7 +855,7 @@ function DescriptionBlock({
           </p>
         )}
         <p className="text-caption leading-relaxed text-content whitespace-pre-line">{description.text}</p>
-        <p className="text-caption leading-tight text-content-faint">
+        <p className={dialog ? 'flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption leading-tight text-content-faint' : 'text-caption leading-tight text-content-faint'}>
           {description.sourceUrl ? (
             <a
               href={description.sourceUrl}
@@ -744,9 +869,9 @@ function DescriptionBlock({
           ) : (
             sourceLabel
           )}
-          {description.license && ` · ${description.license}`}
+          {description.license && (dialog ? <span>{description.license}</span> : ` · ${description.license}`)}
         </p>
       </div>
-    </div>
+    </Block>
   )
 }
diff --git a/client/src/components/Planner/PlaceFormModal.helpers.test.ts b/client/src/components/Planner/PlaceFormModal.helpers.test.ts
index b5e472693..188cea693 100644
--- a/client/src/components/Planner/PlaceFormModal.helpers.test.ts
+++ b/client/src/components/Planner/PlaceFormModal.helpers.test.ts
@@ -1,5 +1,8 @@
 import { describe, it, expect } from 'vitest'
-import { isAmapUrl, isGoogleMapsUrl, isMapUrl } from './PlaceFormModal.helpers'
+import {
+  DEFAULT_FORM, endsBeforeStart, findDuplicatePlace, isAmapUrl, isGoogleMapsUrl, isMapUrl, parseCoordinatePair,
+  timeCollisions,
+} from './PlaceFormModal.helpers'
 
 describe('isGoogleMapsUrl', () => {
   it('accepts the short share hosts', () => {
@@ -61,3 +64,85 @@ describe('isMapUrl', () => {
     expect(isMapUrl('https://example.com/maps')).toBe(false)
   })
 })
+
+describe('findDuplicatePlace', () => {
+  const form = (over: Partial<typeof DEFAULT_FORM>) => ({ ...DEFAULT_FORM, ...over })
+
+  it('matches a name case- and space-insensitively', () => {
+    expect(findDuplicatePlace(form({ name: '  louvre ' }), [{ name: 'Louvre' }])).toEqual({ name: 'Louvre' })
+  })
+
+  it('matches a shared Google place id whatever the name', () => {
+    const hit = { name: 'Other', google_place_id: 'gp-1' }
+    expect(findDuplicatePlace(form({ name: 'New', google_place_id: 'gp-1' }), [hit])).toBe(hit)
+  })
+
+  it('matches coordinates within about eleven metres, and not beyond', () => {
+    const near = { name: 'Tour Eiffel', lat: 48.8584, lng: 2.2945 }
+    expect(findDuplicatePlace(form({ name: 'Iron Lady', lat: '48.85845', lng: '2.29455' }), [near])).toBe(near)
+    expect(findDuplicatePlace(form({ name: 'Iron Lady', lat: '48.8594', lng: '2.2945' }), [near])).toBeNull()
+  })
+
+  it('a stop on a drive ignores the name and compares the OSM object instead', () => {
+    const aral = { name: 'Aral', osm_id: 'node:1' }
+    const rules = { byName: false, byOsmId: true }
+    expect(findDuplicatePlace(form({ name: 'Aral' }), [aral], rules)).toBeNull()
+    expect(findDuplicatePlace(form({ name: 'Tankstelle', osm_id: 'node:1' }), [aral], rules)).toBe(aral)
+    // The ordinary add place never looks at the OSM object.
+    expect(findDuplicatePlace(form({ name: 'Tankstelle', osm_id: 'node:1' }), [aral])).toBeNull()
+  })
+
+  it('an empty list or a missing one finds nothing', () => {
+    expect(findDuplicatePlace(form({ name: 'Louvre' }), [])).toBeNull()
+    expect(findDuplicatePlace(form({ name: 'Louvre' }), null as never)).toBeNull()
+  })
+})
+
+describe('parseCoordinatePair', () => {
+  it('splits a pair on a comma, a semicolon or a space', () => {
+    expect(parseCoordinatePair('48.8566, 2.3522')).toEqual(['48.8566', '2.3522'])
+    expect(parseCoordinatePair(' -33.86;151.2 ')).toEqual(['-33.86', '151.2'])
+    expect(parseCoordinatePair('35.68 139.77')).toEqual(['35.68', '139.77'])
+  })
+
+  it('leaves anything else to the field', () => {
+    expect(parseCoordinatePair('48.8566')).toBeNull()
+    expect(parseCoordinatePair('not a coordinate')).toBeNull()
+    expect(parseCoordinatePair('48.8, 2.3, 7')).toBeNull()
+  })
+})
+
+describe('endsBeforeStart', () => {
+  it('only compares two complete clocks', () => {
+    expect(endsBeforeStart('14:00', '13:00')).toBe(true)
+    expect(endsBeforeStart('14:00', '14:00')).toBe(true)
+    expect(endsBeforeStart('14:00', '15:00')).toBe(false)
+    expect(endsBeforeStart('14:00', '1')).toBe(false)
+    expect(endsBeforeStart('', '13:00')).toBe(false)
+  })
+})
+
+describe('timeCollisions', () => {
+  const visit = (id: number, day_id: number, place_time: string | null, end_time: string | null = null, name = `P${id}`) =>
+    ({ id, day_id, place: { name, place_time, end_time } }) as never
+
+  it('lists the overlapping visits of the same day only', () => {
+    const day = [visit(1, 5, '12:30', '13:30'), visit(2, 5, '13:00', '14:00'), visit(3, 6, '13:00', '14:00'), visit(4, 5, null)]
+    expect(timeCollisions(1, day, '12:30', '13:30').map((a: { id: number }) => a.id)).toEqual([2])
+  })
+
+  it('an open end is a point in time, and touching ends do not overlap', () => {
+    const day = [visit(1, 5, '11:30'), visit(2, 5, '11:00', '12:00'), visit(3, 5, '11:00'), visit(4, 5, '12:00', '13:00')]
+    expect(timeCollisions(1, day, '11:30', '').map((a: { id: number }) => a.id)).toEqual([2])
+    // 12:00 to 13:00 starts where this one ends, and the point at 11:00 is where it starts.
+    expect(timeCollisions(1, day, '11:00', '12:00').map((a: { id: number }) => a.id)).toEqual([2])
+    expect(timeCollisions(1, day, '11:00', '12:30').map((a: { id: number }) => a.id)).toEqual([2, 4])
+  })
+
+  it('says nothing without an assignment, a start, or the assignment in the list', () => {
+    const day = [visit(1, 5, '12:00', '13:00'), visit(2, 5, '12:30', '13:30')]
+    expect(timeCollisions(null, day, '12:00', '13:00')).toEqual([])
+    expect(timeCollisions(1, day, '', '13:00')).toEqual([])
+    expect(timeCollisions(99, day, '12:00', '13:00')).toEqual([])
+  })
+})
diff --git a/client/src/components/Planner/PlaceFormModal.helpers.ts b/client/src/components/Planner/PlaceFormModal.helpers.ts
index 44409a74a..24fa29a59 100644
--- a/client/src/components/Planner/PlaceFormModal.helpers.ts
+++ b/client/src/components/Planner/PlaceFormModal.helpers.ts
@@ -1,4 +1,4 @@
-import type { RoadtripStopType } from '@trek/shared'
+import type { Assignment, RoadtripStopType } from '@trek/shared'
 
 export interface PlaceFormData {
   name: string
@@ -148,3 +148,88 @@ export function mergeResult(
 
   return next
 }
+
+// #1152: a manually-added place is treated as a likely duplicate of an existing
+// trip place if it shares the Google Place ID, the (case-insensitive) name, or
+// near-identical coordinates (~11 m). Mirrors the server-side import dedup.
+const DUP_COORD_TOLERANCE = 0.0001
+
+/**
+ * Which resemblances count as evidence.
+ *
+ * The defaults are the ordinary add place and are not to be changed. A stop on a drive
+ * asks a different question: brand names repeat along a motorway and the map record does
+ * not, so it turns the name off and the OSM object on.
+ */
+export interface DuplicateRules {
+  byName?: boolean
+  byOsmId?: boolean
+}
+
+export function findDuplicatePlace(
+  form: PlaceFormData,
+  places: { name?: string | null; lat?: number | null; lng?: number | null; google_place_id?: string | null; osm_id?: string | null }[],
+  rules: DuplicateRules = {},
+): { name?: string | null } | null {
+  const { byName = true, byOsmId = false } = rules
+  const name = (form.name || '').trim().toLowerCase()
+  const gid = (form.google_place_id || '').trim()
+  const osmId = (form.osm_id || '').trim()
+  const lat = form.lat ? Number.parseFloat(form.lat) : null
+  const lng = form.lng ? Number.parseFloat(form.lng) : null
+  for (const p of places || []) {
+    if (gid && p.google_place_id && p.google_place_id === gid) return p
+    if (byOsmId && osmId && p.osm_id && p.osm_id === osmId) return p
+    if (byName && name && p.name && p.name.trim().toLowerCase() === name) return p
+    if (
+      lat != null && lng != null && p.lat != null && p.lng != null &&
+      Math.abs(Number(p.lat) - lat) <= DUP_COORD_TOLERANCE &&
+      Math.abs(Number(p.lng) - lng) <= DUP_COORD_TOLERANCE
+    ) return p
+  }
+  return null
+}
+
+/**
+ * A coordinate pair pasted into the latitude field, as "48.85, 2.35", "48.85;2.35"
+ * or "48.85 2.35": the two halves, or null for anything else, which the field then
+ * takes as typed.
+ */
+export function parseCoordinatePair(text: string): [string, string] | null {
+  const match = text.trim().match(/^(-?\d+(?:\.\d*)?)(?:\s*[,;]\s*|\s+)(-?\d+(?:\.\d*)?)$/)
+  return match ? [match[1], match[2]] : null
+}
+
+/** Both clocks are complete and the end is not after the start. */
+export function endsBeforeStart(start: string, end: string): boolean {
+  return !!start && !!end && start.length >= 5 && end.length >= 5 && end <= start
+}
+
+/**
+ * The other visits of the same day whose times overlap this one's.
+ *
+ * An open end collapses to a point in time, and a visit without a start takes no
+ * part: it has no place on the clock to overlap anything.
+ */
+export function timeCollisions(
+  assignmentId: number | null,
+  dayAssignments: Pick<Assignment, 'id' | 'day_id' | 'place'>[],
+  start: string,
+  end: string,
+): Pick<Assignment, 'id' | 'day_id' | 'place'>[] {
+  if (!assignmentId || !start || start.length < 5) return []
+  const current = dayAssignments.find(a => a.id === assignmentId)
+  if (!current) return []
+  const myEnd = end && end.length >= 5 ? end : null
+  return dayAssignments.filter(a => {
+    if (a.id === assignmentId) return false
+    if (a.day_id !== current.day_id) return false
+    const aStart = a.place?.place_time
+    const aEnd = a.place?.end_time
+    if (!aStart) return false
+    // Two intervals overlap if start < otherEnd AND otherStart < end
+    const s1 = start, e1 = myEnd || start
+    const s2 = aStart, e2 = aEnd || aStart
+    return s1 < (e2 || '23:59') && s2 < (e1 || '23:59') && s1 !== e2 && s2 !== e1
+  })
+}
diff --git a/client/src/components/Planner/PlaceFormModal.test.tsx b/client/src/components/Planner/PlaceFormModal.test.tsx
index 245338e03..905682c26 100644
--- a/client/src/components/Planner/PlaceFormModal.test.tsx
+++ b/client/src/components/Planner/PlaceFormModal.test.tsx
@@ -1,8 +1,9 @@
-// FE-COMP-PLACEFORM-001 to FE-COMP-PLACEFORM-036, FE-PLANNER-PLACEFORM-016 to FE-PLANNER-PLACEFORM-067, plus FE-PLANNER-PLACEFORM-068 to -095
+// FE-COMP-PLACEFORM-001 to FE-COMP-PLACEFORM-036, FE-PLANNER-PLACEFORM-016 to FE-PLANNER-PLACEFORM-067, plus FE-PLANNER-PLACEFORM-068 to -121
 import { render, screen, waitFor, fireEvent, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
+import { collectionsApi } from '../../api/collections';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { useAddonStore } from '../../store/addonStore';
@@ -12,10 +13,19 @@ import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildTrip, buildPlace, buildCategory, buildAssignment } from '../../../tests/helpers/factories';
 import PlaceFormModal from './PlaceFormModal';
 
-// Mock CustomTimePicker so we get a simple text input instead of the portal-heavy UI
+// Mock CustomTimePicker so we get a simple text input instead of the portal-heavy UI.
+// The aria props land on the input, as the real picker spreads them onto its own.
 vi.mock('../shared/CustomTimePicker', () => ({
-  default: ({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder?: string }) => (
+  default: ({ value, onChange, placeholder, ...aria }: {
+    value: string
+    onChange: (v: string) => void
+    placeholder?: string
+    'aria-label'?: string
+    'aria-describedby'?: string
+    'aria-invalid'?: boolean
+  }) => (
     <input
+      {...aria}
       data-testid="time-picker"
       type="text"
       value={value}
@@ -136,8 +146,8 @@ describe('PlaceFormModal', () => {
   it('FE-COMP-PLACEFORM-015: categories appear in category selector', () => {
     const cats = [buildCategory({ name: 'Museum' }), buildCategory({ name: 'Park' })];
     render(<PlaceFormModal {...defaultProps} categories={cats} />);
-    // Category label is present
-    expect(screen.getByText('Category')).toBeInTheDocument();
+    // The category is a pill on the head band, named by what it picks.
+    expect(screen.getByRole('button', { name: /^Category:/ })).toBeInTheDocument();
   });
 
   // ── Form initialization ──────────────────────────────────────────────────────
@@ -1997,7 +2007,7 @@ describe('PlaceFormModal as a road trip service stop', () => {
     withBudgetAddon();
     render(<PlaceFormModal {...defaultProps} />);
 
-    expect(screen.getByText('Category')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Category:/ })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
     expect(screen.queryByText('Kind of stop')).not.toBeInTheDocument();
   });
@@ -2012,7 +2022,8 @@ describe('PlaceFormModal as a road trip service stop', () => {
     // what it needs first. It turns into the list of legs the moment a place arrives.
     expect(screen.getByTestId('service-stop-needs-point')).toBeInTheDocument();
     // A petrol stop is not an activity with a budget line, and it is not a taste either.
-    expect(screen.queryByText('Category')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /^Category:/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'New category' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /Create expense/i })).not.toBeInTheDocument();
   });
 
@@ -2074,8 +2085,8 @@ describe('PlaceFormModal as a road trip service stop', () => {
 
     named('Supercharger');
     typeCoords('51.05', '13.73');
-    fireEvent.click(screen.getByRole('button', { name: /Berlin · Dresden/ }));
-    fireEvent.click(screen.getByText(/Bremen · Berlin/));
+    fireEvent.click(screen.getByRole('button', { name: /Berlin\s+Dresden/ }));
+    fireEvent.click(screen.getByText(/Bremen\s+Berlin/));
     fireEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
@@ -2285,3 +2296,392 @@ describe('PlaceFormModal plugin search (#2221)', () => {
     expect(perKeystroke).not.toHaveBeenCalled();
   });
 });
+
+// ── The dialog frame: keys, focus, paste and the columns beside the form ──────
+
+describe('PlaceFormModal on the dialog frame', () => {
+  const withCollections = () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'collections', name: 'Collections', type: 'collections', icon: '', enabled: true }],
+      loaded: true,
+    });
+    vi.spyOn(collectionsApi, 'list').mockResolvedValue({
+      collections: [{ id: 1, owner_id: 1, name: 'Tokyo 2026', color: '#ec4899' }],
+      incomingInvites: [],
+    });
+    vi.spyOn(collectionsApi, 'get').mockResolvedValue({
+      collection: { id: 1, owner_id: 1, name: 'Tokyo 2026', color: '#ec4899' },
+      places: [{ id: 10, collection_id: 1, name: 'Zebra Cafe', status: 'idea' }],
+    });
+  };
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('FE-PLANNER-PLACEFORM-096: the dialog is named by its title', () => {
+    render(<PlaceFormModal {...defaultProps} place={buildPlace({ name: 'Louvre' })} />);
+    expect(screen.getByRole('dialog', { name: 'Edit Place' })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-097: Escape in the suggestion list closes the list, and only the next one closes the dialog', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    server.use(
+      http.post('/api/maps/autocomplete', () =>
+        HttpResponse.json({ suggestions: [{ placeId: 'node:1', mainText: 'Eiffel Tower', secondaryText: 'Paris, France' }] }),
+      ),
+    );
+    render(<PlaceFormModal {...defaultProps} onClose={onClose} />);
+    await user.type(screen.getByPlaceholderText('Search places...'), 'Eiffel');
+    await screen.findByText('Paris, France');
+
+    await user.keyboard('{Escape}');
+    expect(screen.queryByText('Paris, France')).not.toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+
+    await user.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-PLANNER-PLACEFORM-098: Escape in a saved-places filter closes the filter, not the dialog', async () => {
+    withCollections();
+    const onClose = vi.fn();
+    render(<PlaceFormModal {...defaultProps} onClose={onClose} />);
+    await screen.findByText('Zebra Cafe');
+
+    const trigger = screen.getByRole('button', { name: /All lists/ });
+    fireEvent.click(trigger);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    fireEvent.keyDown(trigger, { key: 'Escape' });
+
+    await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-PLACEFORM-099: Escape with nothing open closes the dialog', () => {
+    const onClose = vi.fn();
+    render(<PlaceFormModal {...defaultProps} onClose={onClose} />);
+    fireEvent.keyDown(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-PLANNER-PLACEFORM-100: a new place opens with the search focused; an edit and a place from the map do not', () => {
+    const { unmount } = render(<PlaceFormModal {...defaultProps} />);
+    expect(screen.getByPlaceholderText('Search places...')).toHaveFocus();
+    unmount();
+
+    const edit = render(<PlaceFormModal {...defaultProps} place={buildPlace({ name: 'Louvre' })} />);
+    expect(screen.getByPlaceholderText('Search places...')).not.toHaveFocus();
+    expect(screen.getByRole('dialog')).toHaveFocus();
+    edit.unmount();
+
+    render(<PlaceFormModal {...defaultProps} prefillCoords={{ lat: 48.85, lng: 2.35, name: 'Pin' }} />);
+    expect(screen.getByPlaceholderText('Search places...')).not.toHaveFocus();
+  });
+
+  it('FE-PLANNER-PLACEFORM-101: Enter in a field never saves; only the footer button does', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    render(<PlaceFormModal {...defaultProps} onSave={onSave} />);
+    await user.type(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), 'Louvre{Enter}');
+    await user.type(screen.getByPlaceholderText('https://...'), 'https://louvre.fr{Enter}');
+    expect(onSave).not.toHaveBeenCalled();
+
+    await user.click(screen.getByRole('button', { name: /^Add$/i }));
+    await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
+  });
+
+  it('FE-PLANNER-PLACEFORM-102: an image pasted anywhere in the dialog, head band included, is attached', () => {
+    render(<PlaceFormModal {...defaultProps} />);
+    fireEvent.paste(screen.getByText('Add Place/Activity'), {
+      clipboardData: { items: [{ type: 'image/png', getAsFile: () => new File(['x'], 'from-header.png', { type: 'image/png' }) }] },
+    });
+    expect(within(screen.getByTestId('pending-files')).getByText('from-header.png')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-103: a pending file is removed by its named button', async () => {
+    const user = userEvent.setup();
+    render(<PlaceFormModal {...defaultProps} />);
+    fireEvent.change(document.querySelector('input[type="file"]') as HTMLInputElement, {
+      target: { files: [new File(['x'], 'ticket.pdf', { type: 'application/pdf' })] },
+    });
+    await user.click(within(screen.getByTestId('pending-files')).getByRole('button', { name: 'Delete' }));
+    expect(screen.queryByTestId('pending-files')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-104: every field is labelled, the coordinates as one group', () => {
+    const place = buildPlace({ name: 'Louvre' });
+    const assignment = buildAssignment({ id: 10, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={10} dayAssignments={[assignment]} />);
+
+    expect(screen.getByRole('textbox', { name: 'Search' })).toBe(screen.getByPlaceholderText('Search places...'));
+    // The icon button beside it carries the same name.
+    expect(within(screen.getByPlaceholderText('Search places...').closest('.flex') as HTMLElement).getByRole('button', { name: 'Search' })).toBeInTheDocument();
+    expect(screen.getByLabelText('Name *')).toHaveValue('Louvre');
+    expect(screen.getByLabelText('Description')).toBe(screen.getByPlaceholderText(/Short description/i));
+    expect(screen.getByLabelText('Notes')).toBe(screen.getByPlaceholderText(/Personal notes/i));
+    expect(screen.getByLabelText('Address')).toBe(screen.getByPlaceholderText(/Street, City, Country/i));
+    expect(screen.getByLabelText('Notes for this day')).toBeInTheDocument();
+    expect(screen.getByLabelText('Website')).toBe(screen.getByPlaceholderText('https://...'));
+    const coords = screen.getByRole('group', { name: 'Coordinates' });
+    expect(within(coords).getByPlaceholderText(/Latitude/i)).toBeInTheDocument();
+    expect(within(coords).getByPlaceholderText(/Longitude/i)).toBeInTheDocument();
+    // Each Markdown field keeps its own formatting bar.
+    expect(screen.getAllByRole('toolbar')).toHaveLength(2);
+  });
+
+  it('FE-PLANNER-PLACEFORM-105: the new category field takes the focus when it opens', async () => {
+    const user = userEvent.setup();
+    render(<PlaceFormModal {...defaultProps} />);
+    await user.click(screen.getByRole('button', { name: 'New category' }));
+    expect(screen.getByPlaceholderText('Category name')).toHaveFocus();
+  });
+
+  it('FE-PLANNER-PLACEFORM-106: the dialog widens with the columns beside the form', async () => {
+    seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true, placesEnrichEnabled: false });
+    const alone = render(<PlaceFormModal {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toHaveClass('max-w-[600px]');
+    alone.unmount();
+
+    seedStore(useAuthStore, { placesEnrichEnabled: true });
+    const withDetails = render(<PlaceFormModal {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toHaveClass('max-w-[960px]');
+    withDetails.unmount();
+
+    withCollections();
+    render(<PlaceFormModal {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toHaveClass('max-w-[1280px]');
+    // Details on the left, the form, saved places on the right.
+    const [details, form, saved] = Array.from(document.querySelector('form')!.parentElement!.children);
+    expect(details).toHaveTextContent('Place details');
+    expect(form.tagName).toBe('FORM');
+    expect(saved).toContainElement(screen.getByPlaceholderText(/Search your saved places/i));
+    await screen.findByText('Zebra Cafe');
+  });
+});
+
+// ── The head band and the panels: the booking editors' look ──────────────────
+
+describe('PlaceFormModal in the look of the booking editors', () => {
+  const header = () => screen.getByRole('dialog').querySelector('header') as HTMLElement;
+
+  it('FE-PLANNER-PLACEFORM-107: the name is typed in the head band, under the title as its eyebrow', async () => {
+    const user = userEvent.setup();
+    render(<PlaceFormModal {...defaultProps} />);
+
+    const name = screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i);
+    expect(header()).toContainElement(name);
+    expect(within(header()).getByRole('heading', { name: 'Add Place/Activity' })).toBeInTheDocument();
+    // Until there is a name, the line under it says one is required.
+    expect(within(header()).getByText('Name *')).toBeInTheDocument();
+
+    await user.type(name, 'Louvre');
+    expect(within(header()).queryByText('Name *')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-108: the category pill picks a category and clears it again', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const cat = buildCategory({ name: 'Museums' });
+    render(<PlaceFormModal {...defaultProps} onSave={onSave} categories={[cat]} />);
+
+    await user.click(screen.getByRole('button', { name: /^Category:/ }));
+    await user.click(screen.getByRole('button', { name: 'Museums' }));
+    expect(within(header()).getByText('Museums')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: /^Category:/ }));
+    await user.click(screen.getByRole('button', { name: 'No Category' }));
+
+    fireEvent.change(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), { target: { value: 'Louvre' } });
+    await user.click(screen.getByRole('button', { name: /^Add$/i }));
+    await waitFor(() => expect(onSave).toHaveBeenCalled());
+    expect(onSave.mock.calls[0][0].category_id).toBeNull();
+  });
+
+  it('FE-PLANNER-PLACEFORM-109: Enter in the new category field creates it, and never saves the place', async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
+    render(<PlaceFormModal {...defaultProps} onSave={onSave} onCategoryCreated={onCategoryCreated} />);
+
+    await user.click(screen.getByRole('button', { name: 'New category' }));
+    // The field takes the pill's place on the band, OK and Cancel beside it.
+    expect(header()).toContainElement(screen.getByPlaceholderText('Category name'));
+    await user.type(screen.getByPlaceholderText('Category name'), 'Beaches{Enter}');
+
+    expect(onCategoryCreated).toHaveBeenCalledWith({ name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
+    await waitFor(() => expect(screen.queryByPlaceholderText('Category name')).not.toBeInTheDocument());
+    expect(onSave).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-PLACEFORM-110: a picked result names its index in the band until the dialog reopens', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/maps/search', () =>
+        HttpResponse.json({ places: [{ name: 'Louvre', address: 'Paris', lat: '48.86', lng: '2.33' }], source: 'openstreetmap' }),
+      ),
+    );
+    const { rerender } = render(<PlaceFormModal {...defaultProps} />);
+    await user.type(screen.getByPlaceholderText('Search places...'), 'Louvre{Enter}');
+    await user.click(await screen.findByText('Louvre'));
+
+    expect(within(header()).getByText('OpenStreetMap')).toBeInTheDocument();
+
+    rerender(<PlaceFormModal {...defaultProps} isOpen={false} />);
+    rerender(<PlaceFormModal {...defaultProps} />);
+    expect(within(header()).queryByText('OpenStreetMap')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-111: a picked suggestion is named after the row that was clicked', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/maps/autocomplete', () =>
+        HttpResponse.json({ suggestions: [{ placeId: 'gers:abc', mainText: 'Eiffel Tower', secondaryText: 'Paris, France' }], source: 'trek-places' }),
+      ),
+      http.get('/api/maps/details/:placeId', () =>
+        HttpResponse.json({ place: { name: 'Eiffel Tower', address: 'Paris', lat: 48.858, lng: 2.294 } }),
+      ),
+    );
+    render(<PlaceFormModal {...defaultProps} />);
+    await user.type(screen.getByPlaceholderText('Search places...'), 'Eiffel');
+    fireEvent.mouseDown(await screen.findByText('Paris, France'));
+
+    expect(await screen.findByDisplayValue('48.858')).toBeInTheDocument();
+    expect(within(header()).getByText('TREK')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-112: a lookup in flight shows as a status pill in the band', async () => {
+    const user = userEvent.setup();
+    let answer: () => void = () => {};
+    server.use(
+      http.post('/api/maps/search', async () => {
+        await new Promise<void>(resolve => { answer = resolve; });
+        return HttpResponse.json({ places: [], source: 'openstreetmap' });
+      }),
+    );
+    render(<PlaceFormModal {...defaultProps} />);
+    await user.type(screen.getByPlaceholderText('Search places...'), 'Louvre{Enter}');
+
+    const busy = await screen.findByRole('status', { name: 'Loading place details…' });
+    expect(header()).toContainElement(busy);
+    answer();
+    await waitFor(() => expect(screen.queryByRole('status', { name: 'Loading place details…' })).not.toBeInTheDocument());
+  });
+
+  it('FE-PLANNER-PLACEFORM-113: each coordinate has its own label, and the pair stays one group', () => {
+    render(<PlaceFormModal {...defaultProps} />);
+    const coords = screen.getByRole('group', { name: 'Coordinates' });
+    expect(within(coords).getByLabelText('Latitude')).toBe(screen.getByPlaceholderText(/Latitude/i));
+    expect(within(coords).getByLabelText('Longitude')).toBe(screen.getByPlaceholderText(/Longitude/i));
+  });
+
+  it('FE-PLANNER-PLACEFORM-114: the actions in the body are white, not grey', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
+      loaded: true,
+    });
+    render(<PlaceFormModal {...defaultProps} />);
+    for (const button of [screen.getByRole('button', { name: /Attach/i }), screen.getByRole('button', { name: /Create expense/i })]) {
+      expect(button).toHaveClass('bg-surface-card');
+      expect(button).not.toHaveClass('bg-surface-secondary');
+    }
+  });
+
+  it('FE-PLANNER-PLACEFORM-115: a stop on a drive shows its kind in the band, and a double as the line under the name', () => {
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1 }),
+      places: [buildPlace({ id: 3, name: 'Aral Dammer Berge', lat: 52.5, lng: 8.2 })],
+    });
+    render(
+      <PlaceFormModal
+        {...defaultProps}
+        serviceStop={{
+          days: [{ dayId: 5, dayNumber: 1, stops: ['Hamburg', 'Bremen'] }],
+          appendDay: { dayId: 5, dayNumber: 1, position: 2 },
+          targetFor: () => ({ dayId: 5, position: 1, offRouteKm: 0.2 }),
+        }}
+      />,
+    );
+    expect(within(header()).getByText('Fuel')).toBeInTheDocument();
+    expect(within(header()).queryByRole('button', { name: /^Category:/ })).not.toBeInTheDocument();
+
+    fireEvent.change(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), { target: { value: 'Tankstelle' } });
+    fireEvent.change(screen.getByPlaceholderText(/Latitude/i), { target: { value: '52.5' } });
+    fireEvent.change(screen.getByPlaceholderText(/Longitude/i), { target: { value: '8.2' } });
+    expect(header()).toContainElement(screen.getByText(/is already on this trip/));
+  });
+
+  it('FE-PLANNER-PLACEFORM-116: the details column waits with a quiet hint, not the mascot', () => {
+    seedStore(useAuthStore, { placesEnrichEnabled: true });
+    render(<PlaceFormModal {...defaultProps} />);
+    const column = screen.getByText('Place details', { exact: true }).closest('aside') as HTMLElement;
+    expect(within(column).getByText('Pick a result to see more')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-117: Escape closes only the new category field, and the focus goes back to its +', async () => {
+    const user = userEvent.setup();
+    const onClose = vi.fn();
+    render(<PlaceFormModal {...defaultProps} onClose={onClose} />);
+    fireEvent.change(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), { target: { value: 'Louvre' } });
+
+    await user.click(screen.getByRole('button', { name: 'New category' }));
+    await user.type(screen.getByPlaceholderText('Category name'), 'Beaches');
+    await user.keyboard('{Escape}');
+
+    expect(screen.queryByPlaceholderText('Category name')).not.toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i)).toHaveValue('Louvre');
+    expect(screen.getByRole('button', { name: 'New category' })).toHaveFocus();
+  });
+
+  it('FE-PLANNER-PLACEFORM-118: Cancel and OK hand the focus back to the + as well', async () => {
+    const user = userEvent.setup();
+    const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
+    render(<PlaceFormModal {...defaultProps} onCategoryCreated={onCategoryCreated} />);
+
+    await user.click(screen.getByRole('button', { name: 'New category' }));
+    await user.click(within(header()).getByRole('button', { name: 'Cancel' }));
+    expect(screen.getByRole('button', { name: 'New category' })).toHaveFocus();
+
+    await user.click(screen.getByRole('button', { name: 'New category' }));
+    await user.type(screen.getByPlaceholderText('Category name'), 'Beaches');
+    await user.click(within(header()).getByRole('button', { name: 'OK' }));
+    await waitFor(() => expect(screen.getByRole('button', { name: 'New category' })).toHaveFocus());
+  });
+
+  it('FE-PLANNER-PLACEFORM-119: the time fields carry their names, and End says when it is wrong', () => {
+    const place = buildPlace({ name: 'Test', place_time: '14:00', end_time: '13:00' });
+    const assignment = buildAssignment({ id: 11, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={11} dayAssignments={[assignment]} />);
+
+    expect(screen.getByRole('textbox', { name: 'Start' })).not.toHaveAttribute('aria-invalid', 'true');
+    const end = screen.getByRole('textbox', { name: 'End' });
+    expect(end).toHaveAttribute('aria-invalid', 'true');
+    expect(end).toHaveAccessibleDescription('End time is before start time');
+  });
+
+  it('FE-PLANNER-PLACEFORM-120: the formatting bars show their names in the shared tooltip, never the native one', async () => {
+    const user = userEvent.setup();
+    render(<PlaceFormModal {...defaultProps} />);
+    const bars = screen.getAllByRole('toolbar');
+    expect(bars).toHaveLength(2);
+    for (const bar of bars) {
+      for (const button of within(bar).getAllByRole('button')) expect(button).not.toHaveAttribute('title');
+    }
+    await user.hover(within(bars[0]).getByRole('button', { name: 'Bold' }));
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Bold');
+  });
+
+  it('FE-PLANNER-PLACEFORM-121: stacked in a narrow window, the details column takes the full width', () => {
+    seedStore(useAuthStore, { placesEnrichEnabled: true });
+    const { unmount } = render(<PlaceFormModal {...defaultProps} isMobile />);
+    const stacked = screen.getByText('Place details', { exact: true }).closest('aside') as HTMLElement;
+    expect(stacked).not.toHaveClass('sm:w-80');
+    unmount();
+
+    render(<PlaceFormModal {...defaultProps} />);
+    const beside = screen.getByText('Place details', { exact: true }).closest('aside') as HTMLElement;
+    expect(beside).toHaveClass('sm:w-80');
+  });
+});
diff --git a/client/src/components/Planner/PlaceFormModal.tsx b/client/src/components/Planner/PlaceFormModal.tsx
index 54bab6dfe..83a2fa18f 100644
--- a/client/src/components/Planner/PlaceFormModal.tsx
+++ b/client/src/components/Planner/PlaceFormModal.tsx
@@ -1,7 +1,5 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
-import Modal from '../shared/Modal'
+import { useState, useEffect, useRef, useMemo, useCallback, useId, type ReactNode } from 'react'
 import type { RoadtripStopType } from '@trek/shared'
-import CustomSelect from '../shared/CustomSelect'
 import NoteFormatToolbar from '../shared/NoteFormatToolbar'
 import { mapsApi } from '../../api/client'
 import { recordPlacePick } from '../../api/placeShadow'
@@ -13,12 +11,17 @@ import { useSettingsStore } from '../../store/settingsStore'
 import CollectionPicker from '../Collections/CollectionPicker'
 import PlaceDetailsColumn, { type PlaceDetailsSelection } from './PlaceDetailsColumn'
 import { useToast } from '../shared/Toast'
-import { Search, Paperclip, X, AlertTriangle, Loader2, Plus, RotateCcw } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
+import { Search, Paperclip, X, AlertTriangle, Loader2, Plus, RotateCcw, MapPin } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import CustomTimePicker from '../shared/CustomTimePicker'
-import { DEFAULT_FORM, isMapUrl, mergeResult, type PlaceFormData, type ResultField } from './PlaceFormModal.helpers'
+import {
+  DEFAULT_FORM, endsBeforeStart, findDuplicatePlace, isMapUrl, mergeResult, parseCoordinatePair, timeCollisions,
+  type PlaceFormData, type ResultField,
+} from './PlaceFormModal.helpers'
 import { getApiErrorMessage } from '../../utils/apiError'
 import { corePickRank, offersGoogleRetry, selectGoogleHoldsSlot } from '../../utils/placeSource'
+import { safeHexColor } from '../../utils/safeColor'
 import { useLocationBias } from '../../hooks/useLocationBias'
 import { usePlaceSuggestions } from '../../hooks/usePlaceSuggestions'
 import { BookingCostsSection } from './BookingCostsSection'
@@ -28,7 +31,14 @@ import { NumericInput } from '../shared/NumericInput'
 import { PlacesSession } from '../../utils/placesSession'
 import ServiceStopSection from '../Roadtrip/ServiceStopSection'
 import { DEFAULT_SERVICE_KIND, serviceStopChoice, type ServiceStopMode } from '../Roadtrip/manualStop'
-import { STOP_KIND_BY_KEY } from '../Roadtrip/stopKinds'
+import { STOP_KIND_BY_KEY, type StopKind } from '../Roadtrip/stopKinds'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import {
+  DialogShell, DialogHeader, DialogTile, DialogSection, DialogFooter, FooterSpacer, DialogButton, NEUTRAL_TINT, PILL, fs,
+} from '../shared/DialogShell'
+import { EditorField, GRID_2, INPUT, LABEL, PANEL, PillSelect, TEXTAREA } from '../shared/dialogParts'
+import { SoftPill, tintOf } from './planParts'
+import { WHITE_BUTTON } from './placeDialogParts'
 
 // The submit payload mirrors the form, but lat/lng are parsed to numbers and
 // category_id is normalised, plus any files chosen before the place existed.
@@ -95,56 +105,12 @@ type Suggestion = {
 /** The mark itself. Quiet on purpose: it answers a question, it does not advertise. */
 function SourceBadge({ label }: { label: string | null }) {
   if (!label) return null
-  return (
-    <span className="shrink-0 rounded-md border border-edge bg-surface-secondary px-1.5 py-0.5 text-[10px] font-medium text-content-faint">
-      {label}
-    </span>
-  )
+  return <SoftPill>{label}</SoftPill>
 }
 
 /** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
  * category creation, file attachments and submit. Keeps PlaceFormModal a thin
  * render over the form fields. */
-
-// #1152: a manually-added place is treated as a likely duplicate of an existing
-// trip place if it shares the Google Place ID, the (case-insensitive) name, or
-// near-identical coordinates (~11 m). Mirrors the server-side import dedup.
-const DUP_COORD_TOLERANCE = 0.0001
-/**
- * Which resemblances count as evidence.
- *
- * The defaults are the ordinary add place and are not to be changed. A stop on a drive
- * asks a different question: brand names repeat along a motorway and the map record does
- * not, so it turns the name off and the OSM object on.
- */
-interface DuplicateRules {
-  byName?: boolean
-  byOsmId?: boolean
-}
-function findDuplicatePlace(
-  form: PlaceFormData,
-  places: { name?: string | null; lat?: number | null; lng?: number | null; google_place_id?: string | null; osm_id?: string | null }[],
-  rules: DuplicateRules = {},
-): { name?: string | null } | null {
-  const { byName = true, byOsmId = false } = rules
-  const name = (form.name || '').trim().toLowerCase()
-  const gid = (form.google_place_id || '').trim()
-  const osmId = (form.osm_id || '').trim()
-  const lat = form.lat ? Number.parseFloat(form.lat) : null
-  const lng = form.lng ? Number.parseFloat(form.lng) : null
-  for (const p of places || []) {
-    if (gid && p.google_place_id && p.google_place_id === gid) return p
-    if (byOsmId && osmId && p.osm_id && p.osm_id === osmId) return p
-    if (byName && name && p.name && p.name.trim().toLowerCase() === name) return p
-    if (
-      lat != null && lng != null && p.lat != null && p.lng != null &&
-      Math.abs(Number(p.lat) - lat) <= DUP_COORD_TOLERANCE &&
-      Math.abs(Number(p.lng) - lng) <= DUP_COORD_TOLERANCE
-    ) return p
-  }
-  return null
-}
-
 function usePlaceFormModal(props: PlaceFormModalProps) {
   const {
   isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
@@ -171,6 +137,9 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   const [showNewCategory, setShowNewCategory] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
   const [duplicateWarning, setDuplicateWarning] = useState<string | null>(null)
+  // The index the picked place came from, as its row named it, shown as a pill
+  // in the head band. Null for a place typed by hand or taken from the saved list.
+  const [pickedSource, setPickedSource] = useState<string | null>(null)
   // What the detail column is describing. Null until the user picks a result.
   const [detailsSelection, setDetailsSelection] = useState<PlaceDetailsSelection | null>(null)
   // Which fields the last picked search result wrote. Anything in here belongs
@@ -185,7 +154,6 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
    */
   const [serviceStopLeg, setServiceStopLeg] = useState('')
   const fileRef = useRef(null)
-  const searchInputRef = useRef<HTMLInputElement>(null)
   const [acSuggestions, setAcSuggestions] = useState<Suggestion[]>([])
   // Which index answered the last keystroke, for the rows that do not say so
   // themselves. Google and the OpenStreetMap fallback each answer from one
@@ -292,6 +260,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     setPendingFiles([])
     setServiceStopLeg('')
     setDuplicateWarning(null)
+    setPickedSource(null)
     // A fresh dialog owns no intention either. The ref is armed by a click on the Costs
     // section and spent by the save that follows it; a save that never happened leaves it
     // armed, and the next opening would consume it for a place nobody linked an expense
@@ -325,8 +294,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [place, prefillCoords, isOpen, assignmentId])
 
-  // The planner keeps this dialog mounted while it is closed (Modal only stops
-  // drawing it), so everything the search block holds would greet the next
+  // The planner keeps this dialog mounted while it is closed (the shell only
+  // stops drawing it), so everything the search block holds would greet the next
   // opening: the last query, its list, the Google line offering that list's
   // query again, suggestions still on their way. A pick from that list writes
   // over the place being edited, whichever place that is by then. Reset when
@@ -350,17 +319,6 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     setIsSearchingMaps(false)
   }, [isOpen])
 
-  useEffect(() => {
-    if (isOpen) {
-      setTimeout(() => {
-        const modal = searchInputRef.current?.closest('[role="dialog"]') ?? document.body
-        if (!modal.contains(document.activeElement) || document.activeElement === document.body) {
-          searchInputRef.current?.focus()
-        }
-      }, 50)
-    }
-  }, [isOpen])
-
   const places = useTripStore((s) => s.places)
   // Where the trip is happening — the hint that tells the search which of a
   // thousand identically named places is meant. Autocomplete wants a box, the
@@ -456,6 +414,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
           }))
           setMapsResults([])
           setMapsSearch('')
+          // The fields are the link's now, not the last picked result's.
+          setPickedSource(null)
           toast.success(t('places.urlResolved'))
           return
         }
@@ -481,6 +441,9 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
    */
   const handleSelectMapsResult = (result, pick?: { mode: 'search' | 'autocomplete'; rank: number; count: number }) => {
     setForm(prev => mergeResult(prev, result, autoFilledRef.current))
+    // The same name the row's badge carried. A suggestion's pick overrides it
+    // with its own row's (handleSelectSuggestion); a saved place names none.
+    setPickedSource(sourceLabel(result, pick?.mode === 'search' ? searchSource : ''))
     // The one point every pick flows through, so the detail column hangs here.
     // A new pick drops whatever hero image belonged to the previous place.
     const lat = Number(result.lat)
@@ -580,6 +543,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
       }
       if (place) {
         handleSelectMapsResult(place, acPick && { mode: 'autocomplete', ...acPick })
+        // Named after the row that was clicked, whatever the lookup behind it answered from.
+        setPickedSource(sourceLabel(suggestion, acSource))
       } else {
         setMapsSearch(previousSearch)
         toast.error(t('places.mapsSearchError'))
@@ -616,6 +581,9 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
           handleMapsSearch()
         }
       } else if (e.key === 'Escape') {
+        // Spent on the list: the dialog leaves an Escape that was already
+        // handled alone, so only the next one closes it.
+        e.preventDefault()
         setAcSuggestions([])
         setAcHighlight(-1)
       }
@@ -643,11 +611,11 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   const handleCreateCategory = async () => {
     if (!newCategoryName.trim()) return
     try {
-      const cat = await onCategoryCreated?.({ name: newCategoryName, color: '#6366f1', icon: 'MapPin' })
+      const cat = await onCategoryCreated?.({ name: newCategoryName, color: '#6366f1', icon: 'MapPin' }) // theme-lint-disable: the stored default of a new category, not a colour of this dialog
       if (cat) setForm(prev => ({ ...prev, category_id: String(cat.id) }))
       setNewCategoryName('')
       setShowNewCategory(false)
-    } catch (err: unknown) {
+    } catch {
       toast.error(t('places.categoryCreateError'))
     }
   }
@@ -662,7 +630,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     setPendingFiles(prev => prev.filter((_, i) => i !== idx))
   }
 
-  // Paste support for files/images
+  // Paste support for files/images, anywhere in the dialog
   const handlePaste = (e: React.ClipboardEvent) => {
     if (!canUploadFiles) return
     const items = e.clipboardData?.items
@@ -677,7 +645,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     }
   }
 
-  const hasTimeError = place && form.place_time && form.end_time && form.place_time.length >= 5 && form.end_time.length >= 5 && form.end_time <= form.place_time
+  const hasTimeError = !!place && endsBeforeStart(form.place_time, form.end_time)
 
   const handleSubmit = async (e?: { preventDefault?: () => void }) => {
     e?.preventDefault?.()
@@ -776,12 +744,9 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   return {
     isOpen,
     onClose,
-    onSave,
     place,
     prefillCoords,
-    tripId,
     categories,
-    onCategoryCreated,
     assignmentId,
     dayAssignments,
     isMobile,
@@ -791,17 +756,13 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     mapsSearch,
     setMapsSearch,
     mapsResults,
-    setMapsResults,
     isSearchingMaps,
-    setIsSearchingMaps,
     newCategoryName,
     setNewCategoryName,
     showNewCategory,
     setShowNewCategory,
     isSaving,
-    setIsSaving,
     pendingFiles,
-    setPendingFiles,
     fileRef,
     acSuggestions,
     setAcSuggestions,
@@ -809,21 +770,14 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     searchSource,
     acHighlight,
     setAcHighlight,
-    acDebounceRef,
-    acAbortRef,
-    toast,
     t,
     language,
     locale,
     timeFormat,
     googleAnswers,
     placesEnrichEnabled,
-    can,
-    tripObj,
     canUploadFiles,
-    places,
     locationBias,
-    searchInputRef,
     fetchSuggestions,
     sourceLabel,
     handleChange,
@@ -838,6 +792,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     hasTimeError,
     handleSubmit,
     duplicateWarning,
+    pickedSource,
     detailsSelection,
     isBudgetEnabled,
     handleCreateExpense,
@@ -852,495 +807,608 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   }
 }
 
+/**
+ * Detail column, form and saved places side by side, inside the scrolling body
+ * rather than as it: a row that scrolled itself would stretch the side columns
+ * to the visible height only, and they would end halfway down the form.
+ */
+const ROW = 'flex items-stretch gap-5'
+const STACK = 'flex flex-col gap-5'
+const FORM_COLUMN = 'flex min-w-0 flex-1 flex-col gap-4'
+/** A row of the typed-ahead list or of the search results. */
+const PICK_ROW = 'flex w-full items-center gap-2 rounded-[8px] px-2.5 py-2 text-left'
+const WARNING_BANNER = 'flex items-start gap-1.5 rounded-[10px] bg-warning-soft px-2.5 py-1.5 text-warning'
+/** The small accent square beside a field that runs its action, sized by the row it sits in. */
+const SIDE_BUTTON = 'grid w-[38px] flex-none place-items-center rounded-[10px] transition-colors disabled:cursor-default disabled:opacity-60'
+/**
+ * ServiceStopSection draws its labels in the old form's look and takes no class
+ * for them; this gives them the eyebrow every other field here has.
+ */
+const SERVICE_STOP_LABELS = '[&_label]:mb-[5px] [&_label]:block [&_label]:font-geist [&_label]:text-[length:calc(9.5px*var(--fs-scale-caption,1))] [&_label]:font-bold [&_label]:uppercase [&_label]:tracking-[.08em] [&_label]:text-content-faint'
+/** A round white button in the head band's pill row, as tall as the pills beside it. */
+const ROUND_PILL_BUTTON = 'grid h-[26px] w-[26px] flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm ring-1 ring-edge-faint transition-colors hover:text-content'
+
+type Translate = (key: string, params?: Record<string, string | number>) => string
+
 export default function PlaceFormModal(props: PlaceFormModalProps) {
   const S = usePlaceFormModal(props)
   const {
-    isOpen,
-    onClose,
-    onSave,
-    place,
-    prefillCoords,
-    tripId,
-    categories,
-    onCategoryCreated,
-    assignmentId,
-    dayAssignments,
-    isMobile,
-    collectionsEnabled,
-    form,
-    setForm,
-    mapsSearch,
-    setMapsSearch,
-    mapsResults,
-    setMapsResults,
-    isSearchingMaps,
-    setIsSearchingMaps,
-    newCategoryName,
-    setNewCategoryName,
-    showNewCategory,
-    setShowNewCategory,
-    isSaving,
-    setIsSaving,
-    pendingFiles,
-    setPendingFiles,
-    fileRef,
-    acSuggestions,
-    setAcSuggestions,
-    acSource,
-    searchSource,
-    acHighlight,
-    setAcHighlight,
-    acDebounceRef,
-    acAbortRef,
-    toast,
-    t,
-    language,
-    googleAnswers,
-    placesEnrichEnabled,
-    can,
-    tripObj,
-    canUploadFiles,
-    places,
-    locationBias,
-    searchInputRef,
-    fetchSuggestions,
-    sourceLabel,
-    handleChange,
-    handleMapsSearch,
-    handleSelectMapsResult,
-    handleSelectSuggestion,
-    handleSearchKeyDown,
-    handleCreateCategory,
-    handleFileAdd,
-    handleRemoveFile,
-    handlePaste,
-    hasTimeError,
-    handleSubmit,
-    duplicateWarning,
-    detailsSelection,
-    isBudgetEnabled,
-    handleCreateExpense,
-    handleEditExpense,
-    handleRemoveExpense,
-    serviceStop,
-    serviceStopDuplicate,
-    serviceStopLeg,
-    setServiceStopLeg,
-    handleStopKind,
-    handleStopMinutes,
+    isOpen, onClose, place, prefillCoords, categories, isMobile, collectionsEnabled, form, setForm,
+    mapsSearch, setMapsSearch, mapsResults, isSearchingMaps, acSuggestions, setAcSuggestions, acSource,
+    searchSource, acHighlight, setAcHighlight, t, language, googleAnswers, placesEnrichEnabled,
+    canUploadFiles, fetchSuggestions, sourceLabel, handleChange, handleMapsSearch, handleSelectMapsResult,
+    handleSelectSuggestion, handleSearchKeyDown, hasTimeError, handleSubmit, isSaving, duplicateWarning,
+    detailsSelection, serviceStop, serviceStopDuplicate,
   } = S
+  const titleId = useId()
+  const fieldId = useId()
   // Desktop + Collections addon → the saved-place picker on the right. Mobile
   // always keeps the original single-column form untouched.
   const twoColumn = !isMobile && collectionsEnabled
   // The detail column sits on the left on desktop whenever enrichment is on; on
-  // mobile it stacks above the form (the aside is w-full below sm already). It
-  // stays mounted with the selection null rather than appearing on the first
-  // pick — otherwise the dialog would jump sideways mid-typing.
+  // mobile it stacks above the form. It stays mounted with the selection null
+  // rather than appearing on the first pick — otherwise the dialog would jump
+  // sideways mid-typing.
   const showDetails = placesEnrichEnabled
-  const modalSize = isMobile ? 'lg' : showDetails && twoColumn ? '5xl' : showDetails || twoColumn ? '4xl' : 'lg'
-  const descriptionRef = useRef<HTMLTextAreaElement | null>(null)
-  const notesRef = useRef<HTMLTextAreaElement | null>(null)
-  return (
-    <Modal
-      isOpen={isOpen}
+  const inRow = !isMobile && (showDetails || twoColumn)
+  // The form keeps about the same width whichever columns flank it: 552 px
+  // alone, 572 px beside one 320 px column, 552 px between two.
+  const width = inRow && showDetails && twoColumn ? 'xwide' : inRow ? 'wide' : 'detail'
+
+  // A stop on a drive is not an activity, and the title is the first thing that says
+  // which of the two this dialog is asking about. It is the band's eyebrow, and the
+  // place's own name is typed into the band under it, as on a booking.
+  const title = place ? t('places.editPlace') : serviceStop ? t('roadtrip.stop.addTitle') : t('places.addPlace')
+  // The tile wears what the place is: the kind of stop on a drive, otherwise
+  // the chosen category, otherwise a plain pin.
+  const kind = serviceStop && form.stop_type ? STOP_KIND_BY_KEY[form.stop_type] : undefined
+  const category = serviceStop ? undefined : (categories || []).find(c => String(c.id) === form.category_id)
+  const tone = kind?.color ?? (category ? safeHexColor(category.color, '') : '')
+  const TileIcon = kind?.Icon ?? getCategoryIcon(category?.icon)
+
+  // The line under the name. A stop on a drive that looks like one already on the
+  // trip says so here, while the form is being filled, and never as a condition of
+  // saving: the press that saves is the press that saves. Otherwise, until there is
+  // a name, that one is required, since the save refuses without it.
+  let headerSub: ReactNode
+  if (serviceStopDuplicate) {
+    headerSub = <span className="text-warning">{t('roadtrip.stop.duplicate', { name: serviceStopDuplicate })}</span>
+  } else if (!form.name.trim()) {
+    headerSub = `${t('places.formName')} *`
+  }
+
+  const header = (
+    <DialogHeader
+      tile={<DialogTile><TileIcon size={20} strokeWidth={1.9} style={{ color: tone || 'var(--text-muted)' }} /></DialogTile>}
+      tint={tone ? tintOf(tone) : NEUTRAL_TINT}
+      labelId={titleId}
       onClose={onClose}
-      // A stop on a drive is not an activity, and the title is the first thing that says
-      // which of the two this dialog is asking about.
-      title={place ? t('places.editPlace') : serviceStop ? t('roadtrip.stop.addTitle') : t('places.addPlace')}
-      size={modalSize}
-      footer={
-        <div className="flex justify-end gap-3">
-          <button
-            type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm text-content-secondary hover:text-content border border-edge rounded-lg hover:bg-surface-hover"
-          >
-            {t('common.cancel')}
-          </button>
-          <button
-            type="button"
-            onClick={handleSubmit}
-            disabled={isSaving || hasTimeError}
-            className="px-6 py-2 bg-accent text-accent-text text-sm rounded-lg hover:bg-accent-hover disabled:opacity-60 font-medium"
-          >
-            {isSaving ? t('common.saving') : place ? t('common.update') : duplicateWarning ? t('places.addAnyway') : t('common.add')}
-          </button>
-        </div>
-      }
-    >
-      <div className={twoColumn || showDetails ? (isMobile ? 'flex flex-col gap-5' : 'flex gap-5 items-stretch') : ''}>
-      {showDetails && (
-        <PlaceDetailsColumn
-          selection={detailsSelection}
-          selectedImageUrl={form.image_url}
-          onPickImage={(url) => setForm(prev => ({ ...prev, image_url: url ?? undefined }))}
-          onAdoptDescription={(text) => setForm(prev => ({ ...prev, description: text }))}
-          hasDescription={!!form.description.trim()}
-          language={language}
-          timeFormat={S.timeFormat}
-          locale={S.locale}
+      eyebrow={title}
+      // Never focused on opening: a new place starts at the search, an edit at the dialog.
+      titleInput={{
+        value: form.name,
+        onChange: value => handleChange('name', value),
+        label: `${t('places.formName')} *`,
+        placeholder: t('places.formNamePlaceholder'),
+        required: true,
+      }}
+      sub={headerSub}
+      subWraps={!!serviceStopDuplicate}
+      pills={(
+        <HeaderPills
+          kind={kind}
+          categories={categories}
+          categoryId={form.category_id}
+          onCategory={value => handleChange('category_id', value)}
+          newCategory={{
+            open: S.showNewCategory,
+            setOpen: S.setShowNewCategory,
+            name: S.newCategoryName,
+            setName: S.setNewCategoryName,
+            create: S.handleCreateCategory,
+            inputId: `${fieldId}-new-category`,
+          }}
+          pickedSource={S.pickedSource}
+          busy={isSearchingMaps}
           t={t}
         />
       )}
-      <form onSubmit={handleSubmit} className={twoColumn || showDetails ? 'flex-1 min-w-0 space-y-3' : 'space-y-3'} onPaste={handlePaste}>
-        {/* Place Search */}
-        <div className="bg-surface-secondary rounded-xl p-3 border border-edge">
-          <div className="relative">
-            <div className="flex gap-2">
-              <input
-                ref={searchInputRef}
-                type="text"
-                value={mapsSearch}
-                onChange={e => setMapsSearch(e.target.value)}
-                onKeyDown={handleSearchKeyDown}
-                onBlur={() => setTimeout(() => setAcSuggestions([]), 150)}
-                onFocus={() => {
-                  if (mapsSearch.trim().length >= 2 && acSuggestions.length === 0 && mapsResults.length === 0) {
-                    fetchSuggestions(mapsSearch.trim())
-                  }
-                }}
-                placeholder={t('places.mapsSearchPlaceholder')}
-                className="flex-1 border border-edge rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent/30 bg-surface-input"
-              />
-              <button
-                type="button"
-                onClick={() => { setAcSuggestions([]); handleMapsSearch() }}
-                disabled={isSearchingMaps}
-                className="bg-accent text-accent-text px-3 py-1.5 rounded-lg text-sm hover:bg-accent-hover disabled:opacity-60"
-              >
-                {isSearchingMaps ? '...' : <Search className="w-4 h-4" />}
-              </button>
-            </div>
+    />
+  )
 
-            {/* Autocomplete dropdown. Capped and scrolling, because plugin rows can
-                follow the core ones (#2221) and the list must stay inside the dialog;
-                the row the arrow keys land on is scrolled into view. */}
-            {acSuggestions.length > 0 && (
-              <div className="absolute left-0 right-0 z-20 mt-1 max-h-96 overflow-y-auto bg-surface-card rounded-lg border border-edge shadow-dropdown">
-                {acSuggestions.map((s, idx) => (
+  const footer = (
+    <DialogFooter>
+      <FooterSpacer />
+      <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+      {/* The only way to save: Enter in a field never submits this form. */}
+      <DialogButton variant="primary" onClick={() => void handleSubmit()} disabled={isSaving || hasTimeError}>
+        {isSaving ? t('common.saving') : place ? t('common.update') : duplicateWarning ? t('places.addAnyway') : t('common.add')}
+      </DialogButton>
+    </DialogFooter>
+  )
+
+  return (
+    <DialogShell
+      open={isOpen}
+      onClose={onClose}
+      labelledBy={titleId}
+      width={width}
+      align="top"
+      onPaste={S.handlePaste}
+      header={header}
+      footer={footer}
+    >
+      <div className={inRow ? ROW : STACK}>
+        {showDetails && (
+          <PlaceDetailsColumn
+            selection={detailsSelection}
+            selectedImageUrl={form.image_url}
+            onPickImage={(url) => setForm(prev => ({ ...prev, image_url: url ?? undefined }))}
+            onAdoptDescription={(text) => setForm(prev => ({ ...prev, description: text }))}
+            hasDescription={!!form.description.trim()}
+            language={language}
+            timeFormat={S.timeFormat}
+            locale={S.locale}
+            variant="dialog"
+            // Stacked above the form in a narrow window, it takes the form's width.
+            fluid={isMobile}
+            t={t}
+          />
+        )}
+        <form onSubmit={handleSubmit} className={FORM_COLUMN}>
+          {/* Place search: typed-ahead suggestions, a full search, and a pasted map link. */}
+          <div className={PANEL}>
+            <EditorField label={t('common.search')} htmlFor={`${fieldId}-search`}>
+              <div className="relative">
+                <div className="flex items-stretch gap-2">
+                  <input
+                    id={`${fieldId}-search`}
+                    type="text"
+                    // A new place starts at the search; an edit or a place brought
+                    // in from the map already has what the search would give.
+                    autoFocus={!place && !prefillCoords}
+                    value={mapsSearch}
+                    onChange={e => setMapsSearch(e.target.value)}
+                    onKeyDown={handleSearchKeyDown}
+                    onBlur={() => setTimeout(() => setAcSuggestions([]), 150)}
+                    onFocus={() => {
+                      if (mapsSearch.trim().length >= 2 && acSuggestions.length === 0 && mapsResults.length === 0) {
+                        fetchSuggestions(mapsSearch.trim())
+                      }
+                    }}
+                    placeholder={t('places.mapsSearchPlaceholder')}
+                    className={`${INPUT} flex-1`}
+                  />
+                  <Tooltip label={t('common.search')}>
+                    <button
+                      type="button"
+                      onClick={() => { setAcSuggestions([]); handleMapsSearch() }}
+                      disabled={isSearchingMaps}
+                      aria-label={t('common.search')}
+                      className={`${SIDE_BUTTON} bg-accent text-accent-text hover:opacity-90`}
+                      style={fs(13, 'body')}
+                    >
+                      {isSearchingMaps ? '...' : <Search size={15} strokeWidth={2.2} aria-hidden="true" />}
+                    </button>
+                  </Tooltip>
+                </div>
+
+                {/* Autocomplete dropdown. Capped and scrolling, because plugin rows can
+                    follow the core ones (#2221) and the list must stay inside the dialog;
+                    the row the arrow keys land on is scrolled into view. */}
+                {acSuggestions.length > 0 && (
+                  <div className="absolute left-0 right-0 z-20 mt-1 max-h-96 overflow-y-auto rounded-[12px] border border-edge-faint bg-surface-card p-1 shadow-dropdown">
+                    {acSuggestions.map((s, idx) => (
+                      <button
+                        key={s.placeId}
+                        ref={idx === acHighlight ? (el) => el?.scrollIntoView?.({ block: 'nearest' }) : undefined}
+                        type="button"
+                        onMouseDown={() => handleSelectSuggestion(s)}
+                        onMouseEnter={() => setAcHighlight(idx)}
+                        className={`${PICK_ROW} ${idx === acHighlight ? 'bg-surface-tertiary' : 'hover:bg-surface-hover'}`}
+                      >
+                        <span className="min-w-0 flex-1">
+                          <span className="block truncate font-medium text-content" style={fs(13, 'body')}>{s.mainText}</span>
+                          {s.secondaryText && (
+                            <span className="block truncate text-content-muted" style={fs(11.5)}>{s.secondaryText}</span>
+                          )}
+                        </span>
+                        <SourceBadge label={sourceLabel(s, acSource)} />
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </EditorField>
+
+            {/* Search results (populated after full search) */}
+            {mapsResults.length > 0 && (
+              <div className="max-h-40 overflow-y-auto rounded-[10px] border border-edge-faint bg-surface-card p-1">
+                {mapsResults.map((result, idx) => (
                   <button
-                    key={s.placeId}
-                    ref={idx === acHighlight ? (el) => el?.scrollIntoView?.({ block: 'nearest' }) : undefined}
+                    key={idx}
                     type="button"
-                    onMouseDown={() => handleSelectSuggestion(s)}
-                    onMouseEnter={() => setAcHighlight(idx)}
-                    className={`w-full text-left px-3 py-2 border-b border-edge-faint last:border-0 ${
-                      idx === acHighlight ? 'bg-surface-tertiary' : 'hover:bg-surface-hover'
-                    }`}
+                    onClick={() => handleSelectMapsResult(result, { mode: 'search', rank: idx, count: mapsResults.length })}
+                    className={`${PICK_ROW} hover:bg-surface-hover`}
                   >
-                    <div className="flex items-center gap-2">
-                      <div className="min-w-0 flex-1">
-                        <div className="font-medium text-sm truncate">{s.mainText}</div>
-                        {s.secondaryText && (
-                          <div className="text-xs text-content-muted truncate">{s.secondaryText}</div>
-                        )}
-                      </div>
-                      <SourceBadge label={sourceLabel(s, acSource)} />
-                    </div>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate font-medium text-content" style={fs(13, 'body')}>{result.name}</span>
+                      {result.address && <span className="block truncate text-content-muted" style={fs(11.5)}>{result.address}</span>}
+                    </span>
+                    <SourceBadge label={sourceLabel(result, searchSource)} />
                   </button>
                 ))}
               </div>
             )}
-          </div>
-
-          {/* Search results (populated after full search) */}
-          {mapsResults.length > 0 && (
-            <div className="bg-surface-card rounded-lg border border-edge overflow-hidden max-h-40 overflow-y-auto mt-2">
-              {mapsResults.map((result, idx) => (
-                <button
-                  key={idx}
-                  type="button"
-                  onClick={() => handleSelectMapsResult(result, { mode: 'search', rank: idx, count: mapsResults.length })}
-                  className="w-full text-left px-3 py-2 hover:bg-surface-hover border-b border-edge-faint last:border-0"
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="min-w-0 flex-1">
-                      <div className="font-medium text-sm truncate">{result.name}</div>
-                      <div className="text-xs text-content-muted truncate">{result.address}</div>
-                    </div>
-                    <SourceBadge label={sourceLabel(result, searchSource)} />
-                  </div>
-                </button>
-              ))}
-            </div>
-          )}
-          {/* The index answers first and Google only when it finds nothing, so a
-              list with the wrong place on it never reaches Google by itself. One
-              quiet line under the list sends the same query there, on an instance
-              where Google holds the key slot and for a list Google did not
-              already produce. */}
-          {mapsResults.length > 0 && offersGoogleRetry(searchSource, googleAnswers) && (
-            <button
-              type="button"
-              onClick={() => handleMapsSearch('google')}
-              disabled={isSearchingMaps}
-              className="mt-1.5 inline-flex items-center gap-1 text-caption text-content-faint hover:text-content transition-colors disabled:opacity-50"
-            >
-              <RotateCcw size={11} strokeWidth={2} aria-hidden="true" />
-              {t('places.searchGoogleInstead')}
-            </button>
-          )}
-        </div>
-
-        {/* Name */}
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.formName')} *</label>
-          <div className="relative">
-            <input
-              type="text"
-              value={form.name}
-              onChange={e => handleChange('name', e.target.value)}
-              required
-              placeholder={t('places.formNamePlaceholder')}
-              className="form-input"
-            />
-            {isSearchingMaps && (
-              <div className="absolute right-2.5 top-0 bottom-0 flex items-center" role="status" aria-label={t('places.loadingDetails')}>
-                <Loader2 className="w-4 h-4 animate-spin text-content-faint" aria-hidden="true" />
-              </div>
-            )}
-          </div>
-          {/* A stop on a drive that looks like one already on the trip. Said here, while
-              the form is being filled, and never as a condition of saving: the press that
-              saves is the press that saves. */}
-          {serviceStopDuplicate && (
-            <p className="mt-1 text-caption text-warning">
-              {t('roadtrip.stop.duplicate', { name: serviceStopDuplicate })}
-            </p>
-          )}
-        </div>
-
-        {/* Description */}
-        <div>
-          <div className="flex items-center justify-between gap-2 mb-1 flex-wrap">
-            <label className="block text-sm font-medium text-content-secondary">{t('places.formDescription')}</label>
-            <NoteFormatToolbar textareaRef={descriptionRef} onChange={v => handleChange('description', v)} compact />
-          </div>
-          <textarea
-            ref={descriptionRef}
-            value={form.description}
-            onChange={e => handleChange('description', e.target.value)}
-            rows={3}
-            placeholder={t('places.formDescriptionPlaceholder')}
-            className="form-input" style={{ resize: 'vertical' }}
-          />
-        </div>
-
-        {/* Notes — Markdown, same as the description, and rendered as such in the
-            inspector. The bar is how anyone finds that out. */}
-        <div>
-          <div className="flex items-center justify-between gap-2 mb-1 flex-wrap">
-            <label className="block text-sm font-medium text-content-secondary">{t('places.formNotes')}</label>
-            <NoteFormatToolbar textareaRef={notesRef} onChange={v => handleChange('notes', v)} compact />
-          </div>
-          <textarea
-            ref={notesRef}
-            value={form.notes}
-            onChange={e => handleChange('notes', e.target.value)}
-            rows={3}
-            maxLength={2000}
-            placeholder={t('places.formNotesPlaceholder')}
-            className="form-input" style={{ resize: 'vertical' }}
-          />
-        </div>
-
-        {/* Address + Coordinates */}
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.formAddress')}</label>
-          <input
-            type="text"
-            value={form.address}
-            onChange={e => handleChange('address', e.target.value)}
-            placeholder={t('places.formAddressPlaceholder')}
-            className="form-input"
-          />
-          <div className="grid grid-cols-2 gap-2 mt-2">
-            <NumericInput
-              mode="signed"
-              value={form.lat}
-              onValueChange={v => handleChange('lat', v)}
-              onPaste={e => {
-                const text = e.clipboardData.getData('text').trim()
-                const match = text.match(/^(-?\d+(?:\.\d*)?)(?:\s*[,;]\s*|\s+)(-?\d+(?:\.\d*)?)$/)
-                if (match) {
-                  e.preventDefault()
-                  handleChange('lat', match[1])
-                  handleChange('lng', match[2])
-                }
-              }}
-              placeholder={t('places.formLat')}
-              className="form-input"
-            />
-            <NumericInput
-              mode="signed"
-              value={form.lng}
-              onValueChange={v => handleChange('lng', v)}
-              placeholder={t('places.formLng')}
-              className="form-input"
-            />
-          </div>
-        </div>
-
-        {/* Category, or for a stop on a drive the kind of stop and where it belongs.
-
-            One or the other, never both: refuelling is not a taste, it is a fact about
-            the place, so it lives in `places.stop_type` and not in the trip's own
-            editable category list. */}
-        {serviceStop ? (
-          <ServiceStopSection
-            mode={serviceStop}
-            stopType={form.stop_type ?? null}
-            onStopType={handleStopKind}
-            minutes={form.duration_minutes ?? 0}
-            onMinutes={handleStopMinutes}
-            leg={serviceStopLeg}
-            onLeg={setServiceStopLeg}
-            lat={form.lat ? Number.parseFloat(form.lat) : null}
-            lng={form.lng ? Number.parseFloat(form.lng) : null}
-          />
-        ) : (
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.formCategory')}</label>
-          {!showNewCategory ? (
-            <div className="flex gap-2">
-              <CustomSelect
-                value={form.category_id}
-                onChange={value => handleChange('category_id', String(value))}
-                placeholder={t('places.noCategory')}
-                options={[
-                  { value: '', label: t('places.noCategory') },
-                  ...(categories || []).map(c => ({
-                    // A string like form.category_id, so the picked option hands
-                    // back the same kind of value the form already keeps.
-                    value: String(c.id),
-                    label: c.name,
-                  })),
-                ]}
-                style={{ flex: 1 }}
-                size="sm"
-              />
+            {/* The index answers first and Google only when it finds nothing, so a
+                list with the wrong place on it never reaches Google by itself. One
+                quiet line under the list sends the same query there, on an instance
+                where Google holds the key slot and for a list Google did not
+                already produce. */}
+            {mapsResults.length > 0 && offersGoogleRetry(searchSource, googleAnswers) && (
               <button
                 type="button"
-                onClick={() => setShowNewCategory(true)}
-                aria-label={t('places.newCategory')}
-                title={t('places.newCategory')}
-                className="text-content-muted px-2 hover:text-content-secondary"
+                onClick={() => handleMapsSearch('google')}
+                disabled={isSearchingMaps}
+                className="inline-flex items-center gap-1 self-start text-content-faint transition-colors hover:text-content disabled:opacity-50"
+                style={fs(12)}
               >
-                <Plus size={16} />
+                <RotateCcw size={11} strokeWidth={2} aria-hidden="true" />
+                {t('places.searchGoogleInstead')}
               </button>
-            </div>
-          ) : (
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={newCategoryName}
-                onChange={e => setNewCategoryName(e.target.value)}
-                placeholder={t('places.categoryNamePlaceholder')}
-                className="form-input" style={{ flex: 1 }}
-              />
-              <button type="button" onClick={handleCreateCategory} className="bg-accent text-accent-text px-3 rounded-lg hover:bg-accent-hover text-sm">
-                OK
-              </button>
-              <button type="button" onClick={() => setShowNewCategory(false)} className="text-content-muted px-2 text-sm">
-                {t('common.cancel')}
-              </button>
-            </div>
-          )}
-        </div>
-        )}
-
-        {/* Time is per day-assignment: only shown when a single assignment is in
-            context (itinerary edit, or a single-assignment pool edit). Hidden when
-            creating, and for unassigned / multi-day pool edits where a single time
-            is ambiguous and wouldn't persist. */}
-        {!!(place && assignmentId) && (
-          <TimeSection
-            form={form}
-            handleChange={handleChange}
-            assignmentId={assignmentId}
-            dayAssignments={dayAssignments}
-            hasTimeError={hasTimeError}
-            endIsLeave={!!props.roadtripActive}
-            t={t}
-          />
-        )}
-
-        {/* Day-specific note — like the times, it lives on the assignment, not
-            the pool place (#2163): only editable with one in context. */}
-        {!!(place && assignmentId) && (
-          <div>
-            <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.assignmentNotes')}</label>
-            <textarea
-              value={form.assignment_notes ?? ''}
-              onChange={e => handleChange('assignment_notes', e.target.value)}
-              rows={2}
-              placeholder={t('places.assignmentNotesPlaceholder')}
-              className="form-input" style={{ resize: 'vertical' }}
-            />
-          </div>
-        )}
-
-        {/* Website */}
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.formWebsite')}</label>
-          <input
-            type="url"
-            value={form.website}
-            onChange={e => handleChange('website', e.target.value)}
-            placeholder="https://..."
-            className="form-input"
-          />
-        </div>
-
-        {/* File Attachments */}
-        {canUploadFiles && (
-          <div className="border border-edge rounded-xl p-3 space-y-2">
-            <div className="flex items-center justify-between">
-              <label className="block text-sm font-medium text-content-secondary">{t('files.title')}</label>
-              <button type="button" onClick={() => fileRef.current?.click()}
-                className="flex items-center gap-1 text-xs text-content-muted hover:text-content transition-colors">
-                <Paperclip size={12} /> {t('files.attach')}
-              </button>
-            </div>
-            <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileAdd} />
-            {pendingFiles.length > 0 && (
-              <div className="space-y-1" data-testid="pending-files">
-                {pendingFiles.map((file, idx) => (
-                  <div key={idx} className="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-surface-secondary text-xs">
-                    <Paperclip size={10} className="text-content-faint shrink-0" />
-                    <span className="truncate flex-1 text-content-secondary">{file.name}</span>
-                    <button type="button" onClick={() => handleRemoveFile(idx)} className="text-content-faint hover:text-red-500 shrink-0">
-                      <X size={12} />
-                    </button>
-                  </div>
-                ))}
-              </div>
             )}
           </div>
-        )}
 
-        {/* Costs — create / view the expense linked to this place (#1298).
-            Same block, same flow as a booking: save first, then the editor.
+          {/* Where it is: what a pick, a pasted link or the map filled in, or typed by hand. */}
+          <div className={PANEL}>
+            <EditorField label={t('places.formAddress')} htmlFor={`${fieldId}-address`}>
+              <input
+                id={`${fieldId}-address`}
+                type="text"
+                value={form.address}
+                onChange={e => handleChange('address', e.target.value)}
+                placeholder={t('places.formAddressPlaceholder')}
+                className={INPUT}
+              />
+            </EditorField>
+            <div role="group" aria-label={t('collections.coordinates')} className={GRID_2}>
+              <EditorField label={t('places.formLatLabel')} htmlFor={`${fieldId}-lat`}>
+                <NumericInput
+                  id={`${fieldId}-lat`}
+                  mode="signed"
+                  value={form.lat}
+                  onValueChange={v => handleChange('lat', v)}
+                  onPaste={e => {
+                    // "48.85, 2.35" pasted into the latitude fills both halves.
+                    const pair = parseCoordinatePair(e.clipboardData.getData('text'))
+                    if (pair) {
+                      e.preventDefault()
+                      handleChange('lat', pair[0])
+                      handleChange('lng', pair[1])
+                    }
+                  }}
+                  placeholder={t('places.formLat')}
+                  className={INPUT}
+                />
+              </EditorField>
+              <EditorField label={t('places.formLngLabel')} htmlFor={`${fieldId}-lng`}>
+                <NumericInput
+                  id={`${fieldId}-lng`}
+                  mode="signed"
+                  value={form.lng}
+                  onValueChange={v => handleChange('lng', v)}
+                  placeholder={t('places.formLng')}
+                  className={INPUT}
+                />
+              </EditorField>
+            </div>
+          </div>
 
-            Never for a stop on a drive: a petrol stop is not an activity with a budget
-            line, and the fuel it buys is an expense of the trip rather than of a place. */}
-        {isBudgetEnabled && !serviceStop && (
-          <BookingCostsSection
-            placeId={place?.id ?? null}
-            reservationId={null}
-            hintKey="places.createExpenseHint"
-            onCreate={handleCreateExpense}
-            onEdit={handleEditExpense}
-            onRemove={handleRemoveExpense}
+          {/* For a stop on a drive: the kind of stop, how long, and where it belongs.
+              The category it replaces is gone from the head band too: refuelling is
+              not a taste, it is a fact about the place, so it lives in
+              `places.stop_type` and not in the trip's own editable category list. */}
+          {serviceStop && (
+            <div className={`${PANEL} ${SERVICE_STOP_LABELS}`}>
+              <ServiceStopSection
+                mode={serviceStop}
+                stopType={form.stop_type ?? null}
+                onStopType={S.handleStopKind}
+                minutes={form.duration_minutes ?? 0}
+                onMinutes={S.handleStopMinutes}
+                leg={S.serviceStopLeg}
+                onLeg={S.setServiceStopLeg}
+                lat={form.lat ? Number.parseFloat(form.lat) : null}
+                lng={form.lng ? Number.parseFloat(form.lng) : null}
+              />
+            </div>
+          )}
+
+          {/* The day in context: its times and its own note. Both live on the
+              day-assignment, not on the pool place (#2163), so they are only shown
+              when a single assignment is in context (itinerary edit, or a
+              single-assignment pool edit). Hidden when creating, and for unassigned
+              or multi-day pool edits where a single time is ambiguous and would not
+              persist. */}
+          {!!(place && S.assignmentId) && (
+            <div className={PANEL}>
+              <TimeSection
+                form={form}
+                handleChange={handleChange}
+                assignmentId={S.assignmentId}
+                dayAssignments={S.dayAssignments}
+                hasTimeError={hasTimeError}
+                endIsLeave={!!props.roadtripActive}
+                t={t}
+              />
+              <EditorField label={t('places.assignmentNotes')} htmlFor={`${fieldId}-day-notes`}>
+                <textarea
+                  id={`${fieldId}-day-notes`}
+                  value={form.assignment_notes ?? ''}
+                  onChange={e => handleChange('assignment_notes', e.target.value)}
+                  rows={2}
+                  placeholder={t('places.assignmentNotesPlaceholder')}
+                  className={`${TEXTAREA} resize-y`}
+                />
+              </EditorField>
+            </div>
+          )}
+
+          <MarkdownField
+            id={`${fieldId}-description`}
+            label={t('places.formDescription')}
+            value={form.description}
+            onChange={v => handleChange('description', v)}
+            placeholder={t('places.formDescriptionPlaceholder')}
           />
-        )}
 
-      </form>
-      {twoColumn && (
-        <CollectionPicker bias={locationBias} onSelect={handleSelectMapsResult} t={t} />
-      )}
+          {/* Notes — Markdown, same as the description, and rendered as such in the
+              inspector. The bar is how anyone finds that out. */}
+          <MarkdownField
+            id={`${fieldId}-notes`}
+            label={t('places.formNotes')}
+            value={form.notes}
+            onChange={v => handleChange('notes', v)}
+            placeholder={t('places.formNotesPlaceholder')}
+            maxLength={2000}
+          />
+
+          {/* The link and the files side by side, as on a booking. */}
+          <div className={canUploadFiles ? GRID_2 : ''}>
+            <EditorField label={t('places.formWebsite')} htmlFor={`${fieldId}-website`}>
+              <input
+                id={`${fieldId}-website`}
+                type="url"
+                value={form.website}
+                onChange={e => handleChange('website', e.target.value)}
+                placeholder="https://..."
+                className={INPUT}
+              />
+            </EditorField>
+            {canUploadFiles && (
+              <PendingFiles
+                files={S.pendingFiles}
+                fileRef={S.fileRef}
+                onAdd={S.handleFileAdd}
+                onRemove={S.handleRemoveFile}
+                t={t}
+              />
+            )}
+          </div>
+
+          {/* Costs — create / view the expense linked to this place (#1298).
+              Same block, same flow as a booking: save first, then the editor.
+
+              Never for a stop on a drive: a petrol stop is not an activity with a budget
+              line, and the fuel it buys is an expense of the trip rather than of a place. */}
+          {S.isBudgetEnabled && !serviceStop && (
+            <BookingCostsSection
+              placeId={place?.id ?? null}
+              reservationId={null}
+              hintKey="places.createExpenseHint"
+              onCreate={S.handleCreateExpense}
+              onEdit={S.handleEditExpense}
+              onRemove={S.handleRemoveExpense}
+              labelClassName={LABEL}
+              customTooltips
+              whiteButtons
+            />
+          )}
+        </form>
+        {twoColumn && (
+          <CollectionPicker bias={S.locationBias} onSelect={handleSelectMapsResult} t={t} />
+        )}
       </div>
-    </Modal>
+    </DialogShell>
+  )
+}
+
+interface NewCategoryRow {
+  open: boolean
+  setOpen: (open: boolean) => void
+  name: string
+  setName: (name: string) => void
+  create: () => Promise<void>
+  inputId: string
+}
+
+/**
+ * The head band's pill row. The category to pick, with a round + beside it that
+ * turns the two into a field for a new one; for a stop on a drive, its kind in
+ * place of both. Then where the picked place came from, and a spinner while a
+ * pick is still being looked up.
+ */
+function HeaderPills({ kind, categories, categoryId, onCategory, newCategory, pickedSource, busy, t }: {
+  kind?: StopKind
+  categories: Category[] | null
+  categoryId: string
+  onCategory: (id: string) => void
+  newCategory: NewCategoryRow
+  pickedSource: string | null
+  busy: boolean
+  t: Translate
+}) {
+  // When the new-category field closes, the field or the button that closed it
+  // goes with it, and the focus would drop out of the dialog. It comes back to
+  // the + that opened the field, as a picker's focus comes back to its pill.
+  const plusRef = useRef<HTMLButtonElement | null>(null)
+  const wasOpen = useRef(newCategory.open)
+  useEffect(() => {
+    const closed = wasOpen.current && !newCategory.open
+    wasOpen.current = newCategory.open
+    if (!closed) return
+    const active = document.activeElement
+    if (!active || active === document.body || !active.isConnected) plusRef.current?.focus()
+  }, [newCategory.open])
+
+  const noCategory = { label: t('places.noCategory'), icon: <MapPin size={13} strokeWidth={2.2} className="text-content-faint" /> }
+  const options = [
+    { value: '', ...noCategory },
+    ...(categories || []).map(c => {
+      const Icon = getCategoryIcon(c.icon)
+      // A string like form.category_id, so the picked option hands back the same
+      // kind of value the form already keeps.
+      return { value: String(c.id), label: c.name, icon: <Icon size={13} strokeWidth={2.2} style={{ color: safeHexColor(c.color, '') || 'var(--text-muted)' }} /> }
+    }),
+  ]
+
+  let lead: ReactNode
+  if (kind) {
+    lead = <span className={PILL}><kind.Icon size={13} strokeWidth={2.2} style={{ color: kind.color }} />{t(kind.labelKey)}</span>
+  } else if (newCategory.open) {
+    lead = <NewCategoryField {...newCategory} t={t} />
+  } else {
+    lead = (
+      <>
+        <PillSelect label={t('places.formCategory')} value={categoryId} onChange={onCategory} options={options} fallback={noCategory} />
+        <Tooltip label={t('places.newCategory')}>
+          <button ref={plusRef} type="button" onClick={() => newCategory.setOpen(true)} aria-label={t('places.newCategory')} className={ROUND_PILL_BUTTON}>
+            <Plus size={13} strokeWidth={2.4} />
+          </button>
+        </Tooltip>
+      </>
+    )
+  }
+
+  return (
+    <>
+      {lead}
+      {pickedSource && (
+        <span className={PILL}>
+          <Search size={12} strokeWidth={2.2} className="text-content-faint" aria-hidden="true" />
+          {pickedSource}
+        </span>
+      )}
+      {busy && (
+        <span className={PILL} role="status" aria-label={t('places.loadingDetails')}>
+          <Loader2 size={13} className="animate-spin text-content-faint" aria-hidden="true" />
+          <span className="font-medium text-content-muted">{t('places.loadingDetails')}</span>
+        </span>
+      )}
+    </>
+  )
+}
+
+/** The new category's name, typed where the category pill was, with its OK and Cancel beside it. */
+function NewCategoryField({ inputId, name, setName, create, setOpen, t }: NewCategoryRow & { t: Translate }) {
+  return (
+    // One parent for the field and both of its buttons.
+    <span className="inline-flex flex-wrap items-center gap-1.5">
+      <input
+        id={inputId}
+        type="text"
+        autoFocus
+        value={name}
+        onChange={e => setName(e.target.value)}
+        onKeyDown={e => {
+          // Enter confirms the name, like OK; it never reaches the place's own save.
+          if (e.key === 'Enter') { e.preventDefault(); void create() }
+          // Escape closes the field, like Cancel, and only the field: marked
+          // handled, the dialog around it leaves it alone and keeps what is typed.
+          if (e.key === 'Escape') { e.preventDefault(); setOpen(false) }
+        }}
+        aria-label={t('places.newCategory')}
+        placeholder={t('places.categoryNamePlaceholder')}
+        className="w-48 min-w-0 rounded-full bg-surface-card px-3 py-1 text-content shadow-sm outline-none ring-1 ring-edge-faint placeholder:text-content-faint focus:ring-2 focus:ring-[color:var(--text-primary)]"
+      />
+      <button type="button" onClick={() => void create()} className="rounded-full bg-accent px-3 py-1 font-semibold text-accent-text hover:opacity-90">
+        {t('common.ok')}
+      </button>
+      <button type="button" onClick={() => setOpen(false)} className={`${PILL} hover:opacity-80`}>
+        {t('common.cancel')}
+      </button>
+    </span>
+  )
+}
+
+/** A Markdown field: its label, the formatting bar on the same line, the text under both. */
+function MarkdownField({ id, label, value, onChange, placeholder, maxLength }: {
+  id: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+  maxLength?: number
+}) {
+  const ref = useRef<HTMLTextAreaElement | null>(null)
+  return (
+    <DialogSection
+      className="min-w-0"
+      label={<label htmlFor={id}>{label}</label>}
+      action={<NoteFormatToolbar textareaRef={ref} onChange={onChange} compact customTooltips />}
+    >
+      <textarea
+        id={id}
+        ref={ref}
+        value={value}
+        onChange={e => onChange(e.target.value)}
+        rows={3}
+        maxLength={maxLength}
+        placeholder={placeholder}
+        className={`${TEXTAREA} resize-y`}
+      />
+    </DialogSection>
+  )
+}
+
+/** Files chosen before the place exists: they are uploaded once the save has given it an id. */
+function PendingFiles({ files, fileRef, onAdd, onRemove, t }: {
+  files: File[]
+  fileRef: React.RefObject<HTMLInputElement | null>
+  onAdd: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onRemove: (index: number) => void
+  t: Translate
+}) {
+  return (
+    <div className="min-w-0">
+      <div className={LABEL}>{t('files.title')}</div>
+      <input ref={fileRef} type="file" multiple className="hidden" onChange={onAdd} />
+      <button
+        type="button"
+        onClick={() => fileRef.current?.click()}
+        className={WHITE_BUTTON}
+        style={fs(13, 'body')}
+      >
+        <Paperclip size={14} aria-hidden="true" />
+        {t('files.attach')}
+      </button>
+      {files.length > 0 && (
+        <div className="mt-1.5 flex flex-col gap-1" data-testid="pending-files">
+          {files.map((file, idx) => (
+            <div key={idx} className="flex items-center gap-2 rounded-[8px] border border-edge-faint bg-surface-card px-2.5 py-1.5" style={fs(12, 'body')}>
+              <Paperclip size={11} className="flex-none text-content-faint" aria-hidden="true" />
+              <span className="min-w-0 flex-1 truncate text-content-secondary">{file.name}</span>
+              <Tooltip label={t('common.delete')}>
+                <button type="button" onClick={() => onRemove(idx)} aria-label={t('common.delete')}
+                  className="flex flex-none text-content-faint transition-colors hover:text-danger">
+                  <X size={12} />
+                </button>
+              </Tooltip>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
   )
 }
 
@@ -1353,59 +1421,45 @@ interface TimeSectionProps {
   /** On a road trip the End is when the drive leaves, which the field says. In Days it
    *  stays the plain label it has always been: nothing is scheduled off it there. */
   endIsLeave: boolean
-  t: (key: string, params?: Record<string, string | number>) => string
+  t: Translate
 }
 
 function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTimeError, endIsLeave, t }: TimeSectionProps) {
-
-  const collisions = useMemo(() => {
-    if (!assignmentId || !form.place_time || form.place_time.length < 5) return []
-    // Find the day_id for the current assignment
-    const current = dayAssignments.find(a => a.id === assignmentId)
-    if (!current) return []
-    const myStart = form.place_time
-    const myEnd = form.end_time && form.end_time.length >= 5 ? form.end_time : null
-    return dayAssignments.filter(a => {
-      if (a.id === assignmentId) return false
-      if (a.day_id !== current.day_id) return false
-      const aStart = a.place?.place_time
-      const aEnd = a.place?.end_time
-      if (!aStart) return false
-      // Check overlap: two intervals overlap if start < otherEnd AND otherStart < end
-      const s1 = myStart, e1 = myEnd || myStart
-      const s2 = aStart, e2 = aEnd || aStart
-      return s1 < (e2 || '23:59') && s2 < (e1 || '23:59') && s1 !== e2 && s2 !== e1
-    })
-  }, [assignmentId, dayAssignments, form.place_time, form.end_time])
+  const collisions = useMemo(
+    () => timeCollisions(assignmentId, dayAssignments, form.place_time, form.end_time),
+    [assignmentId, dayAssignments, form.place_time, form.end_time],
+  )
+  const errorId = useId()
 
   return (
-    <div>
-      <div className="grid grid-cols-2 gap-3">
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.startTime')}</label>
+    <div className="flex flex-col gap-2">
+      <div className={GRID_2}>
+        <EditorField label={t('places.startTime')}>
           <CustomTimePicker
             value={form.place_time}
             onChange={v => handleChange('place_time', v)}
+            aria-label={t('places.startTime')}
           />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-content-secondary mb-1">{t('places.endTime')}</label>
+        </EditorField>
+        <EditorField label={t('places.endTime')} hint={endIsLeave ? t('roadtrip.stop.endIsLeave') : undefined}>
           <CustomTimePicker
             value={form.end_time}
             onChange={v => handleChange('end_time', v)}
+            aria-label={t('places.endTime')}
+            aria-invalid={hasTimeError}
+            aria-describedby={hasTimeError ? errorId : undefined}
           />
-          {endIsLeave && <p className="mt-1 text-caption text-content-faint">{t('roadtrip.stop.endIsLeave')}</p>}
-        </div>
+        </EditorField>
       </div>
       {hasTimeError && (
-        <div className="flex items-center gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-caption bg-warning-soft text-warning">
-          <AlertTriangle size={13} className="shrink-0" />
+        <div id={errorId} className={WARNING_BANNER} style={fs(12, 'body')}>
+          <AlertTriangle size={13} className="mt-0.5 shrink-0" aria-hidden="true" />
           {t('places.endTimeBeforeStart')}
         </div>
       )}
       {collisions.length > 0 && (
-        <div className="flex items-start gap-1.5 mt-2 px-2.5 py-1.5 rounded-lg text-caption bg-warning-soft text-warning">
-          <AlertTriangle size={13} className="shrink-0 mt-0.5" />
+        <div className={WARNING_BANNER} style={fs(12, 'body')}>
+          <AlertTriangle size={13} className="mt-0.5 shrink-0" aria-hidden="true" />
           <span>
             {t('places.timeCollision')}{' '}
             {collisions.map(a => a.place?.name).filter(Boolean).join(', ')}
diff --git a/client/src/components/Planner/PlaceInspector.test.tsx b/client/src/components/Planner/PlaceInspector.test.tsx
index be48aeec0..882b1c6bf 100644
--- a/client/src/components/Planner/PlaceInspector.test.tsx
+++ b/client/src/components/Planner/PlaceInspector.test.tsx
@@ -11,7 +11,7 @@ import { useSaveToCollectionStore } from '../../store/saveToCollectionStore';
 import { usePermissionsStore } from '../../store/permissionsStore';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
-import type { AssignmentsMap } from '../../types';
+import type { AssignmentsMap, Place, Reservation } from '../../types';
 import { isBlurred } from '../../../tests/helpers/bookingCodeBlur';
 
 // ── Module mocks ──────────────────────────────────────────────────────────────
@@ -20,7 +20,10 @@ vi.mock('../../api/client', async (importOriginal) => {
   const actual = await importOriginal<typeof import('../../api/client')>();
   return {
     ...actual,
-    mapsApi: { details: vi.fn().mockResolvedValue({ place: null }) },
+    mapsApi: {
+      details: vi.fn().mockResolvedValue({ place: null }),
+      placePhotoCredit: vi.fn().mockResolvedValue({ credit: null }),
+    },
   };
 });
 
@@ -174,13 +177,8 @@ describe('PlaceInspector', () => {
     const user = userEvent.setup();
     const onClose = vi.fn();
     render(<PlaceInspector {...defaultProps} onClose={onClose} />);
-    // Find the X button — it's the close button with an X icon inside
-    const buttons = screen.getAllByRole('button');
-    // The close button is typically in the header, first button with X icon
-    const closeBtn = buttons.find(btn => btn.querySelector('svg'));
-    // Click the last-found header button that has no text label (the X)
-    // More reliable: find button by its position as close button
-    await user.click(buttons[0]); // first button is the close X
+    // The round X on the head band is named by its tooltip.
+    await user.click(screen.getByRole('button', { name: 'Close' }));
     expect(onClose).toHaveBeenCalled();
   });
 
@@ -196,11 +194,11 @@ describe('PlaceInspector', () => {
   it('FE-PLANNER-INSPECTOR-013: clicking Edit button calls onEdit', async () => {
     const user = userEvent.setup();
     const onEdit = vi.fn();
-    const { container } = render(<PlaceInspector {...defaultProps} onEdit={onEdit} />);
-    // The edit button has Edit2 icon — find footer buttons
+    render(<PlaceInspector {...defaultProps} onEdit={onEdit} />);
+    // Edit is the primary action at the right end of the footer.
     const allButtons = screen.getAllByRole('button');
-    // Edit button is second-to-last in footer (before delete)
-    const editBtn = allButtons[allButtons.length - 2];
+    const editBtn = screen.getByRole('button', { name: 'Edit' });
+    expect(allButtons[allButtons.length - 1]).toBe(editBtn);
     await user.click(editBtn);
     expect(onEdit).toHaveBeenCalled();
   });
@@ -210,8 +208,9 @@ describe('PlaceInspector', () => {
     const onDelete = vi.fn();
     render(<PlaceInspector {...defaultProps} onDelete={onDelete} />);
     const allButtons = screen.getAllByRole('button');
-    // Delete button is the last button in the footer
-    const deleteBtn = allButtons[allButtons.length - 1];
+    // The square delete button sits just before Edit, named by its tooltip.
+    const deleteBtn = screen.getByRole('button', { name: 'Delete' });
+    expect(allButtons[allButtons.length - 2]).toBe(deleteBtn);
     await user.click(deleteBtn);
     expect(onDelete).toHaveBeenCalled();
   });
@@ -347,14 +346,18 @@ describe('PlaceInspector', () => {
     const user = userEvent.setup();
     const p = buildPlace({ id: 202, google_place_id: 'ChIJ003' });
     render(<PlaceInspector {...defaultProps} place={p} />);
-    // Wait for hours to load — the button text shows a day's hours line
-    const hoursBtn = await screen.findByText(/Show opening hours|Opening Hours|Mon:|9:00|09:00/i);
-    const btn = hoursBtn.closest('button')!;
+    // Wait for hours to load: the section is labelled, its toggle shows a day's hours line
+    expect(await screen.findByText('Opening Hours')).toBeTruthy();
+    const btn = screen.getByRole('button', { name: /Show opening hours|Mon:|Tue:/i });
+    expect(btn).toHaveAttribute('aria-expanded', 'false');
     await user.click(btn);
-    // After expand, one of the hours lines should be visible
+    // After expand, the whole week is listed and the toggle folds it again
     await waitFor(() => {
       expect(screen.getByText(/Mon:/)).toBeTruthy();
+      expect(screen.getByText(/Tue:/)).toBeTruthy();
     });
+    await user.click(screen.getByRole('button', { name: 'Collapse' }));
+    expect(screen.getByRole('button', { name: /Show opening hours|Mon:|Tue:/i })).toHaveAttribute('aria-expanded', 'false');
   });
 
   it('FE-PLANNER-INSPECTOR-026: open/closed badge shown when open_now is available', async () => {
@@ -551,6 +554,74 @@ describe('PlaceInspector', () => {
     expect(screen.getByText('Museum Ticket')).toBeTruthy();
   });
 
+  it('FE-PLANNER-INSPECTOR-109: with a detail to show, the booking card opens it instead of the editor', async () => {
+    const onOpenBooking = vi.fn();
+    const onEditTransport = vi.fn();
+    const onEditReservation = vi.fn();
+    const ferry = buildReservation({ title: 'Ferry to Corfu', status: 'pending', type: 'ferry', assignment_id: 99 } as Partial<Reservation>);
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    render(
+      <PlaceInspector
+        {...defaultProps}
+        selectedDayId={1}
+        selectedAssignmentId={99}
+        assignments={{ '1': assignmentInDay }}
+        reservations={[ferry]}
+        onEditTransport={onEditTransport}
+        onEditReservation={onEditReservation}
+        onOpenBooking={onOpenBooking}
+      />
+    );
+    // The card is the booking, so it says it opens it rather than edits it.
+    expect(screen.queryByRole('button', { name: 'Edit Reservation' })).toBeNull();
+    await userEvent.click(screen.getByRole('button', { name: 'Open booking: Ferry to Corfu' }));
+    expect(onOpenBooking).toHaveBeenCalledWith(ferry);
+    expect(onEditTransport).not.toHaveBeenCalled();
+    expect(onEditReservation).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-INSPECTOR-110: with a detail to show, a viewer without an editor can still open the card, by keyboard too', () => {
+    const onOpenBooking = vi.fn();
+    const ticket = buildReservation({ title: 'Museum Ticket', status: 'confirmed', assignment_id: 99 } as Partial<Reservation>);
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    render(
+      <PlaceInspector
+        {...defaultProps}
+        selectedDayId={1}
+        selectedAssignmentId={99}
+        assignments={{ '1': assignmentInDay }}
+        reservations={[ticket]}
+        onOpenBooking={onOpenBooking}
+      />
+    );
+    const card = screen.getByRole('button', { name: 'Open booking: Museum Ticket' });
+    fireEvent.keyDown(card, { key: 'Enter' });
+    fireEvent.keyDown(card, { key: ' ' });
+    expect(onOpenBooking).toHaveBeenCalledTimes(2);
+    expect(onOpenBooking).toHaveBeenCalledWith(ticket);
+  });
+
+  it('FE-PLANNER-INSPECTOR-111: several bookings on one stop are told apart by name', async () => {
+    const onOpenBooking = vi.fn();
+    const lunch = buildReservation({ id: 61, title: 'Lunch at Nishiki', status: 'confirmed', type: 'restaurant', assignment_id: 99 } as Partial<Reservation>);
+    const tour = buildReservation({ id: 62, title: 'Market Tour', status: 'pending', type: 'tour', assignment_id: 99 } as Partial<Reservation>);
+    const assignmentInDay = [{ id: 99, place, day_id: 1, place_id: place.id, order_index: 0, notes: null }];
+    render(
+      <PlaceInspector
+        {...defaultProps}
+        selectedDayId={1}
+        selectedAssignmentId={99}
+        assignments={{ '1': assignmentInDay }}
+        reservations={[lunch, tour]}
+        onOpenBooking={onOpenBooking}
+      />
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: 'Open booking: Market Tour' }));
+    expect(onOpenBooking).toHaveBeenCalledWith(tour);
+    expect(screen.getByRole('button', { name: 'Open booking: Lunch at Nishiki' })).toBeInTheDocument();
+  });
+
   // ── Participants ───────────────────────────────────────────────────────────
 
   it('FE-PLANNER-INSPECTOR-031: participants section shown when tripMembers > 1 and selectedAssignmentId is set', () => {
@@ -825,11 +896,14 @@ describe('PlaceInspector', () => {
     const p = buildPlace({ id: 200, description: longText, notes: longText } as any);
     render(<PlaceInspector {...defaultProps} place={p} />);
     const scroll = screen.getByTestId('inspector-scroll') as HTMLElement;
-    expect(scroll.style.overflowY).toBe('auto');
-    expect(scroll.style.minHeight).toBe('0px');
+    const cls = scroll.className.split(/\s+/);
+    expect(cls).toContain('overflow-y-auto');
+    expect(cls).toContain('min-h-0');
     // flex must allow the region to shrink/grow within the capped card
-    expect(scroll.style.flex).not.toBe('');
-    expect(scroll.style.flex).not.toBe('0 0 auto');
+    expect(cls).toContain('flex-1');
+    expect(cls).not.toContain('flex-none');
+    // and the card around it is the one that is capped
+    expect((scroll.parentElement as HTMLElement).className).toContain('max-h-[60vh]');
   });
 
   it('FE-PLANNER-INSPECTOR-047: long unbroken description wraps instead of clipping horizontally', () => {
@@ -847,12 +921,13 @@ describe('PlaceInspector', () => {
     const p = buildPlace({ id: 202, description: longText, notes: longText } as any);
     const { container } = render(<PlaceInspector {...defaultProps} place={p} />);
     const notes = Array.from(container.querySelectorAll('.collab-note-md')) as HTMLElement[];
-    // Both description and notes containers must keep their natural height
-    // (flex-shrink: 0) — otherwise they compress inside the flex column and
-    // overflow:hidden clips the text with no scroll (issue #1195).
+    // Both description and notes blocks must keep their natural height
+    // (flex-none), otherwise they compress inside the flex column and
+    // clip the text with no scroll (issue #1195).
     expect(notes.length).toBe(2);
     for (const el of notes) {
-      expect(el.style.flexShrink).toBe('0');
+      expect((el.closest('section') as HTMLElement).className.split(/\s+/)).toContain('flex-none');
+      expect(el.style.overflow).toBe('');
     }
   });
 
@@ -885,7 +960,12 @@ describe('PlaceInspector', () => {
     const track = { ...place, route_geometry: '[[48.0,2.0],[49.0,3.0]]' };
     render(<PlaceInspector {...defaultProps} place={track} onUpdatePlace={onUpdatePlace} />);
 
-    fireEvent.click(screen.getAllByText('Track color')[0]);
+    // The labelled row shows the colour in use and opens the picker.
+    const toggle = screen.getByRole('button', { name: /^Track color/ });
+    expect(toggle).toHaveTextContent('Automatic color');
+    expect(toggle).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute('aria-expanded', 'true');
     fireEvent.click(screen.getByRole('button', { name: '#059669' }));
     expect(onUpdatePlace).toHaveBeenCalledWith(track.id, { route_color: '#059669' });
   });
@@ -895,7 +975,9 @@ describe('PlaceInspector', () => {
     const track = { ...place, route_geometry: '[[48.0,2.0],[49.0,3.0]]', route_color: '#059669' };
     render(<PlaceInspector {...defaultProps} place={track} onUpdatePlace={onUpdatePlace} />);
 
-    fireEvent.click(screen.getAllByText('Track color')[0]);
+    const toggle = screen.getByRole('button', { name: /^Track color/ });
+    expect(toggle).toHaveTextContent('#059669');
+    fireEvent.click(toggle);
     fireEvent.click(screen.getByRole('button', { name: 'Automatic color' }));
     // null is what clears the column; undefined would leave the colour in place.
     expect(onUpdatePlace).toHaveBeenCalledWith(track.id, { route_color: null });
@@ -1083,22 +1165,26 @@ describe('PlaceInspector', () => {
     vi.unstubAllGlobals();
   });
 
-  it('FE-PLANNER-INSPECTOR-070: an action button restores its idle background after hover', () => {
-    render(<PlaceInspector {...defaultProps} />);
-    const edit = screen.getByText('Edit').closest('button') as HTMLButtonElement;
-    act(() => { edit.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(edit.style.background).toBe('var(--bg-tertiary)');
-    act(() => { edit.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(edit.style.background).toBe('var(--bg-hover)');
+  it('FE-PLANNER-INSPECTOR-070: the footer keeps the ways out on the left and delete + edit on the right', () => {
+    const p = buildPlace({ id: 712, name: 'Footer Place', lat: 48.1, lng: 2.1, website: 'https://example.org' });
+    render(<PlaceInspector {...defaultProps} place={p} selectedDayId={1} assignments={{ '1': [] }} />);
+    const footer = document.querySelector('footer') as HTMLElement;
+    const names = within(footer).getAllByRole('button').map(b => b.getAttribute('aria-label') || b.textContent);
+    expect(names).toEqual(['Add to Day', 'Navigation', 'Open Website', 'Delete', 'Edit']);
+    // Hover looks are classes on the tokens now, not inline styles swapped by handlers.
+    const edit = within(footer).getByRole('button', { name: 'Edit' });
+    expect(edit.getAttribute('style') ?? '').not.toMatch(/background/);
+    expect(edit.className).toContain('bg-accent');
   });
 
-  it('FE-PLANNER-INSPECTOR-071: the header close button resets its hover background', () => {
+  it('FE-PLANNER-INSPECTOR-071: the header close button is named and shows its tooltip', async () => {
     render(<PlaceInspector {...defaultProps} />);
-    const close = document.querySelector('.bg-surface-hover') as HTMLButtonElement;
-    act(() => { close.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(close.style.background).toBe('var(--bg-tertiary)');
-    act(() => { close.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(close.style.background).toBe('var(--bg-hover)');
+    const close = screen.getByRole('button', { name: 'Close' });
+    expect(close.getAttribute('title')).toBeNull();
+    fireEvent.mouseEnter(close);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Close');
+    fireEvent.mouseLeave(close);
+    await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull());
   });
 
   it('FE-PLANNER-INSPECTOR-072: rating a place forwards the vote', () => {
@@ -1125,7 +1211,16 @@ describe('PlaceInspector', () => {
     expect(screen.getByText('Flight to Nice')).toBeTruthy();
     expect(screen.getByText('ABC999')).toBeTruthy();
     expect(screen.getByText('Aisle seat')).toBeTruthy();
-    expect(screen.getByText(/Air France AF123 · CDG → NCE · TGV1 · Gl\. 7 · Check-in 06:00 · Check-out 12:00/)).toBeTruthy();
+    // Each fact of the metadata is its own pill, labelled in the user's language.
+    for (const fact of ['Air France AF123', 'CDG → NCE', 'TGV1', 'Platform 7', 'Check-in 06:00', 'Check-out 12:00']) {
+      expect(screen.getByText(fact)).toBeTruthy();
+    }
+    expect(screen.queryByText(/·/)).toBeNull();
+    // Date, time and code are labelled fields.
+    expect(screen.getByText('Date')).toBeTruthy();
+    expect(screen.getByText('Time')).toBeTruthy();
+    expect(screen.getByText('Booking Code')).toBeTruthy();
+    expect(screen.getByText('Pending')).toBeTruthy();
   });
 
   it('FE-PLANNER-INSPECTOR-074: a reservation whose metadata has no printable fields shows no meta line', () => {
@@ -1134,7 +1229,7 @@ describe('PlaceInspector', () => {
       assignments={{ '1': [{ id: 9, place, place_id: place.id, day_id: 1, order_index: 0, notes: null }] }}
       reservations={[res]} />);
     expect(screen.getByText('Plain booking')).toBeTruthy();
-    expect(screen.queryByText(/Gl\./)).toBeNull();
+    expect(screen.queryByText(/Platform|Gl\./)).toBeNull();
   });
 
   // ── Participants ─────────────────────────────────────────────────────────────
@@ -1318,26 +1413,29 @@ describe('PlaceInspector', () => {
     expect(onSetParticipants).toHaveBeenCalledWith(9, 1, []);
   });
 
-  it('FE-PLANNER-INSPECTOR-093: participant chips and the add menu reset their hover styling', () => {
+  it('FE-PLANNER-INSPECTOR-093: participant chips show the removal in the danger tokens, the add menu opens and closes', () => {
     render(<PlaceInspector {...defaultProps} {...participantProps([{ user_id: 1 }, { user_id: 2 }])} />);
     const chip = screen.getByText('ada').closest('button') as HTMLElement;
-    fireEvent.mouseEnter(chip);
-    expect(chip.className).toContain('text-[#ef4444]');
-    fireEvent.mouseLeave(chip);
-    expect(chip.className).toContain('text-content');
-
-    const add = screen.getByText('+') as HTMLButtonElement;
-    act(() => { add.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(add.style.color).toBe('var(--text-primary)');
-    act(() => { add.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(add.style.color).toBe('var(--text-faint)');
+    // A removable chip turns to the danger tokens on hover and strikes its name through.
+    expect(chip.className).toContain('enabled:hover:text-danger');
+    expect(chip.className).not.toMatch(/#[0-9a-f]{3,6}/i);
+    expect(screen.getByText('ada').className).toContain('group-hover/chip:line-through');
 
+    const add = screen.getByRole('button', { name: 'Add' });
+    expect(add).toHaveTextContent('+');
+    expect(add).toHaveAttribute('aria-expanded', 'false');
     fireEvent.click(add);
+    expect(add).toHaveAttribute('aria-expanded', 'true');
     const entry = screen.getByText('cleo').closest('button') as HTMLButtonElement;
-    act(() => { entry.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(entry.style.background).toBe('var(--bg-hover)');
-    act(() => { entry.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(entry.style.background).toBe('none');
+    expect(entry.className).toContain('hover:bg-surface-hover');
+
+    // Escape and a click elsewhere close the list again.
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByText('cleo')).toBeNull();
+    fireEvent.click(add);
+    expect(screen.getByText('cleo')).toBeTruthy();
+    fireEvent.mouseDown(document.body);
+    expect(screen.queryByText('cleo')).toBeNull();
   });
 
   it('FE-PLANNER-INSPECTOR-094: a flight number without an airline is still summarised', () => {
@@ -1488,7 +1586,7 @@ describe('PlaceInspector', () => {
     const onUpdatePlace = vi.fn();
     const member = render(<PlaceInspector {...defaultProps} onEdit={onEdit} onDelete={onDelete} onUpdatePlace={onUpdatePlace} />);
     expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-    expect(screen.queryByText('Delete')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
     fireEvent.doubleClick(screen.getByText(place.name));
     expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
     member.unmount();
@@ -1496,7 +1594,7 @@ describe('PlaceInspector', () => {
     seedStore(useTripStore, { trip: buildTrip({ id: 1, user_id: useAuthStore.getState().user!.id }) });
     render(<PlaceInspector {...defaultProps} onEdit={onEdit} onDelete={onDelete} onUpdatePlace={onUpdatePlace} />);
     expect(screen.getByText('Edit')).toBeInTheDocument();
-    expect(screen.getByText('Delete')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
   });
 
 
@@ -1565,6 +1663,82 @@ describe('PlaceInspector', () => {
     expect(screen.queryByText('Add to Day')).toBeNull();
     expect(screen.queryByText('Remove from Day')).toBeNull();
   });
+
+  // ── Head band (booking-detail language) ──────────────────────────────────────
+
+  it('FE-PLANNER-INSPECTOR-105: the photo credit stays under the avatar next to the open/closed state (CC BY-SA)', async () => {
+    // It used to be dropped whenever the open/closed tag took its place under the
+    // avatar; the tag is a pill now, and the licence credit is always shown.
+    vi.mocked(mapsApi.placePhotoCredit).mockResolvedValue({ credit: 'Jane Doe, CC BY-SA 4.0' } as never);
+    vi.mocked(mapsApi.details).mockResolvedValue({ place: { open_now: true } } as never);
+    const p = buildPlace({ id: 713, name: 'Credited', google_place_id: 'gp-713', image_url: '/api/maps/place-photo/commons%3Aabc/bytes', lat: null, lng: null });
+    render(<PlaceInspector {...defaultProps} place={p} />);
+    expect(await screen.findByText('Open')).toBeTruthy();
+    const credit = await screen.findByText('Jane Doe, CC BY-SA 4.0');
+    expect(credit.getAttribute('title')).toBeNull();
+    expect(vi.mocked(mapsApi.placePhotoCredit)).toHaveBeenCalledWith('commons:abc');
+    // The full credit is one hover away when the line is cut short.
+    fireEvent.mouseEnter(credit);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Jane Doe, CC BY-SA 4.0');
+  });
+
+  it('FE-PLANNER-INSPECTOR-106: the head band states its facts as pills and takes the category tint', async () => {
+    const coloured = { ...cat, color: '#10b981' };
+    const p: Place = { ...place, id: 714, category_id: cat.id, source: 'dawarich', phone: '+33 1 00', price: 12, currency: 'EUR' };
+    render(<PlaceInspector {...defaultProps} place={p} categories={[coloured]} />);
+    const header = document.querySelector('header') as HTMLElement;
+    expect(header.style.background).toContain('color-mix');
+    // Category as a pill with its colour dot.
+    const categoryPill = within(header).getByText('Landmark');
+    expect((categoryPill.querySelector('span') as HTMLElement).style.background).toBe('rgb(16, 185, 129)');
+    // The Dawarich mark keeps its tooltip and gets a name.
+    const mark = within(header).getByRole('img', { name: 'Added from your Dawarich recordings' });
+    fireEvent.mouseEnter(mark);
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Added from your Dawarich recordings');
+    // Phone is a call link, the price a pill, the coordinates only from sm up.
+    expect(within(header).getByText('+33 1 00').closest('a')).toHaveAttribute('href', 'tel:+33 1 00');
+    expect(within(header).getByText(/12,00/)).toBeTruthy();
+    const coords = within(header).getByText(/48\.858400/);
+    expect(coords.className.split(/\s+/)).toEqual(expect.arrayContaining(['hidden', 'sm:inline-flex']));
+    // Nothing in the head band is separated with a middle dot any more.
+    expect(header.textContent).not.toContain('·');
+  });
+
+  it('FE-PLANNER-INSPECTOR-107: the rating block is labelled and quotes the first usable review', async () => {
+    vi.mocked(mapsApi.details).mockResolvedValue({
+      place: { rating: 4.1, reviews: [{ text: 'meh' }, { text: 'Lovely staff and view' }] },
+    } as never);
+    const p = buildPlace({ id: 715, name: 'Reviewed', google_place_id: 'gp-715' });
+    render(<PlaceInspector {...defaultProps} place={p} onRate={vi.fn()} />);
+    expect(await screen.findByText(/Lovely staff and view/)).toBeTruthy();
+    const section = screen.getByText('Rating').closest('section') as HTMLElement;
+    expect(within(section).getAllByRole('radio')).toHaveLength(5);
+    expect(within(section).getByText(/Lovely staff and view/)).toBeTruthy();
+  });
+
+  it('FE-PLANNER-INSPECTOR-108: every body block sits under its own label', () => {
+    const p: Place = { ...place, id: 716, notes: 'Bring cash', description: 'Iron lady' };
+    const assignmentInDay = [{ id: 99, place: p, day_id: 1, place_id: p.id, order_index: 0, notes: 'Early entry' }];
+    render(
+      <PlaceInspector
+        {...defaultProps}
+        place={p}
+        selectedDayId={1}
+        selectedAssignmentId={99}
+        assignments={{ '1': assignmentInDay }}
+        reservations={[buildReservation({ id: 610, title: 'Summit ticket', assignment_id: 99 })]}
+        tripMembers={[{ id: 1, username: 'ada' }, { id: 2, username: 'bob' }]}
+      />
+    );
+    for (const [label, content] of [['Description', 'Iron lady'], ['Notes', 'Bring cash'], ['Notes for this day', 'Early entry'], ['Bookings', 'Summit ticket'], ['Participants', 'ada'], ['Files', '']] as const) {
+      const section = screen.getByText(label, { selector: 'div' }).closest('section') as HTMLElement;
+      expect(section).toBeTruthy();
+      if (content) expect(within(section).getByText(content)).toBeTruthy();
+    }
+    // Bookings and participants sit side by side from sm up.
+    const grid = screen.getByText('Bookings').closest('section')!.parentElement as HTMLElement;
+    expect(grid.className).toContain('sm:grid-cols-2');
+  });
 })
 
 // ── Blur booking codes on the linked-booking strip (#2457) ────────────────────
diff --git a/client/src/components/Planner/PlaceInspector.tsx b/client/src/components/Planner/PlaceInspector.tsx
index 3b568eb79..b677bd7e5 100644
--- a/client/src/components/Planner/PlaceInspector.tsx
+++ b/client/src/components/Planner/PlaceInspector.tsx
@@ -2,12 +2,11 @@ import ChargingInfo from '../Roadtrip/ChargingInfo'
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { avatarSrc } from '../../utils/avatarSrc'
 import { safeHttpUrl } from '../../utils/safeUrl'
-import { openFile } from '../../utils/fileDownload'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { markdownLinkComponents } from '../shared/markdownLink'
-import { X, Clock, MapPin, ExternalLink, Phone, Banknote, Edit2, Trash2, Plus, Minus, ChevronDown, ChevronUp, FileText, Upload, File, FileImage, Star, Navigation, Map as MapIcon, Users, Mountain, TrendingUp, Bookmark, BookmarkCheck, Copy, Route, StickyNote } from 'lucide-react'
+import { X, Clock, MapPin, ExternalLink, Phone, Banknote, Pencil, Plus, Minus, ChevronDown, ChevronUp, ChevronRight, FileText, Upload, File, FileImage, Star, Navigation, Mountain, Bookmark, BookmarkCheck, Copy } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import PlaceAvatarUpload from '../shared/PlaceAvatarUpload'
 import { BlurredCode } from '../shared/BookingCode'
@@ -22,14 +21,13 @@ import { collectionsApi } from '../../api/collections'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useSaveToCollectionStore } from '../../store/saveToCollectionStore'
-import { getCategoryIcon } from '../shared/categoryIcons'
 import DawarichIcon from '../shared/DawarichIcon'
 import { Tooltip } from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 import { useTranslation, translateApiError } from '../../i18n'
 import { usePluginStore } from '../../store/pluginStore'
 import PluginFrame from '../Plugins/PluginFrame'
-import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
+import type { Place, Category, Day, Reservation, TripFile, AssignmentsMap, DistanceUnit } from '../../types'
 import type { CollectionStatus } from '@trek/shared'
 import { splitReservationDateTime, formatTime, formatMoney } from '../../utils/formatters'
 import { useTripStore } from '../../store/tripStore'
@@ -38,10 +36,14 @@ import { formatDistance, formatElevation } from '../../utils/units'
 import { getNavigationTargets, openNavigationTarget } from './placeNavigation'
 import { TRANSPORT_TYPES, getAssignmentReservations } from '../../utils/dayMerge'
 import { NavigationMenu } from '../shared/NavigationMenu'
-import { resolveOpenNow, resolvePlaceTimeZone, placeWeekdayIndex } from './placeOpenState'
+import { resolveOpenNow, resolvePlaceTimeZone, placeWeekdayIndex, type OpeningPeriod } from './placeOpenState'
 import { convertHoursLine } from './placeHoursFormat'
 import type { EndDayControlProps } from '../Roadtrip/EndDayControl'
 import VisitControls, { type RoadtripStayControl } from '../Roadtrip/VisitControls'
+import { DialogButton, DialogSection, DeleteButton, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { BOX, Field, TypeTile, toneOf, toneTint, useOpenFile } from './bookings/bookingParts'
+import { parseMeta } from './bookings/bookingsModel'
+import { SoftPill, TimePill, tintOf } from './planParts'
 
 const detailsCache = new Map()
 
@@ -56,6 +58,24 @@ function setSessionCache(key, value) {
   try { sessionStorage.setItem(key, JSON.stringify(value)) } catch {}
 }
 
+/** What the maps details endpoint adds to a place: ratings, hours, contact. */
+interface GoogleDetails {
+  rating?: number | null
+  rating_count?: number | null
+  reviews?: Array<{ text?: string | null }> | null
+  phone?: string | null
+  summary?: string | null
+  website?: string | null
+  opening_hours?: string[] | null
+  opening_periods?: OpeningPeriod[] | null
+  opening_special_days?: string[] | null
+  open_now?: boolean | null
+  lat?: number | null
+  lng?: number | null
+  google_ftid?: string | null
+  google_maps_url?: string | null
+}
+
 const creditCache = new Map()
 
 /**
@@ -65,9 +85,9 @@ const creditCache = new Map()
  * cache key. Anything else (an uploaded image, a legacy remote URL) renders
  * nothing. Commons pictures are largely CC BY-SA, so this is an obligation
  * rather than a nicety — the picker credits them while choosing, this keeps the
- * credit visible afterwards.
+ * credit visible afterwards, whatever else the avatar shows.
  */
-function PhotoCredit({ imageUrl }) {
+function PhotoCredit({ imageUrl }: { imageUrl?: string | null }) {
   const [credit, setCredit] = useState(null)
   const key = useMemo(() => {
     const match = /^\/api\/maps\/place-photo\/(.+)\/bytes$/.exec(imageUrl || '')
@@ -87,20 +107,14 @@ function PhotoCredit({ imageUrl }) {
 
   if (!credit) return null
   return (
-    <span
-      className="text-content-faint"
-      title={credit}
-      style={{
-        display: 'block', marginTop: 4, maxWidth: 72,
-        fontSize: 'calc(9px * var(--fs-scale-caption, 1))', lineHeight: 1.2,
-        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center',
-      }}
-    >{credit}</span>
+    <Tooltip label={credit}>
+      <span className="mt-1 block max-w-[72px] truncate text-center leading-tight text-content-faint" style={fs(9)}>{credit}</span>
+    </Tooltip>
   )
 }
 
 function usePlaceDetails(googlePlaceId, osmId, language) {
-  const [details, setDetails] = useState(null)
+  const [details, setDetails] = useState<GoogleDetails | null>(null)
   const detailId = googlePlaceId || osmId
   const cacheKey = `gdetails_${detailId}_${language}`
   useEffect(() => {
@@ -160,6 +174,9 @@ interface PlaceInspectorProps {
    *  the strip the read-only summary it has always been (#2012). */
   onEditTransport?: (reservation: Reservation) => void
   onEditReservation?: (reservation: Reservation) => void
+  /** Shows a linked booking's detail. Given, every booking card opens that detail
+   *  (its Edit leads on to the editor); without it a card opens its editor. */
+  onOpenBooking?: (reservation: Reservation) => void
   onClose: () => void
   onEdit?: () => void
   onDelete?: () => void
@@ -183,9 +200,18 @@ interface PlaceInspectorProps {
   onRemoveFromList?: () => void
 }
 
+/** The small pill of the head band, the size of a SoftPill but raised on the tint. */
+const HEAD_PILL = 'inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-surface-card px-2 py-[2px] font-semibold text-content shadow-sm'
+
+/**
+ * The card a selected place opens over the map, in the planner's dialog
+ * language: a head band tinted by its category with the avatar, the name, the
+ * address and the facts as pills, then everything else about the place under
+ * its own label, and the actions in a bar that stays in reach.
+ */
 export default function PlaceInspector({
   place, categories, mode = 'trip', days = [], selectedDayId = null, selectedAssignmentId = null,
-  assignments = {}, reservations = [], onEditTransport, onEditReservation,
+  assignments = {}, reservations = [], onEditTransport, onEditReservation, onOpenBooking,
   onClose, onEdit: editPlace, onDelete: deletePlace, onAssignToDay, onRemoveAssignment,
   files = [], onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace: updatePlace, onUploadImage, onRate,
   leftWidth = 0, rightWidth = 0,
@@ -208,7 +234,7 @@ export default function PlaceInspector({
   // any provider error/timeout is dropped server-side, so this only ever adds rows.
   const [providerDetails, setProviderDetails] = useState<Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }>>([])
   const [navOpen, setNavOpen] = useState(false)
-  const navBtnRef = useRef<HTMLButtonElement>(null)
+  const navAnchorRef = useRef<HTMLSpanElement>(null)
   const placeIdForDetails = mode === 'trip' ? place?.id : undefined
   useEffect(() => {
     if (placeIdForDetails == null) { setProviderDetails([]); return }
@@ -239,8 +265,8 @@ export default function PlaceInspector({
   const [isUploading, setIsUploading] = useState(false)
   const [editingName, setEditingName] = useState(false)
   const [nameValue, setNameValue] = useState('')
-  const nameInputRef = useRef(null)
-  const fileInputRef = useRef(null)
+  const nameInputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
   const googleDetails = usePlaceDetails(place?.google_place_id, place?.osm_id, language)
 
   // Library-wide "is this place already saved anywhere I can see?" indicator for
@@ -290,8 +316,8 @@ export default function PlaceInspector({
   // only reached while a place is selected, so deselecting one mid-session
   // changes the hook count and React tears the tree down.
   const placeId = place?.id
-  const handleFileUpload = useCallback(async (e) => {
-    const selectedFiles = Array.from((e.target as HTMLInputElement).files || [])
+  const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || [])
     if (!selectedFiles.length || !onFileUpload || !placeId) return
     setIsUploading(true)
     try {
@@ -326,7 +352,7 @@ export default function PlaceInspector({
     onUpdatePlace(place.id, { name: trimmed })
   }
 
-  const handleNameKeyDown = (e) => {
+  const handleNameKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') { e.preventDefault(); commitNameEdit() }
     if (e.key === 'Escape') setEditingName(false)
   }
@@ -365,12 +391,18 @@ export default function PlaceInspector({
     place ? { ...place, google_ftid: place.google_ftid || googleDetails?.google_ftid || null } : null,
     googleDetails?.google_maps_url,
   )
+  const navigationLabel = navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')
   const selectedDay = days?.find(d => d.id === selectedDayId)
   const weekdayIndex = getWeekdayIndex(selectedDay?.date, placeTimeZone)
 
   // Its own files plus the ones on the bookings that hang on it (#2217).
   const placeFiles = filesForPlace(files, place.id, reservations, selectedAssignmentId != null ? [selectedAssignmentId] : [])
 
+  const shortReview = (googleDetails?.reviews || []).find(r => r.text && r.text.length > 5)
+  const phone = place.phone || googleDetails?.phone
+  const description = place.description || googleDetails?.summary
+  const showRating = (mode === 'trip' && !!onRate) || !!shortReview
+
   return (
     <div
       style={{
@@ -380,126 +412,88 @@ export default function PlaceInspector({
         transform: 'translateX(-50%)',
         width: `min(800px, calc(100% - ${leftWidth}px - ${rightWidth}px - 32px))`,
         zIndex: 50,
-        fontFamily: "var(--font-system)",
+        fontFamily: 'var(--font-system)',
       }}
     >
-      <div className="bg-surface-elevated" style={{
-        backdropFilter: 'blur(40px) saturate(180%)',
-        WebkitBackdropFilter: 'blur(40px) saturate(180%)',
-        borderRadius: 20,
-        boxShadow: '0 8px 40px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06)',
-        overflow: 'hidden',
-        maxHeight: '60vh',
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
-        {/* Header */}
-        <PlaceInspectorHeader openNow={openNow} place={place} category={category} t={t} editingName={editingName}
-          nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue} commitNameEdit={commitNameEdit}
-          handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit} onUpdatePlace={onUpdatePlace}
+      <div className="flex max-h-[60vh] flex-col overflow-hidden rounded-[20px] border border-edge-faint bg-surface-elevated shadow-popover backdrop-blur-[40px] backdrop-saturate-[1.8]">
+        <InspectorHead place={place} category={category} openNow={openNow} phone={phone}
+          rating={googleDetails?.rating ?? null} ratingCount={googleDetails?.rating_count ?? null}
+          price={place.price > 0 ? formatMoney(Number(place.price) || 0, place.currency || tripCurrency || 'EUR', locale) : null}
+          time={place.place_time ? `${formatTime(place.place_time, locale, timeFormat)}${place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}` : null}
+          editingName={editingName} nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue}
+          commitNameEdit={commitNameEdit} handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit}
+          onUpdatePlace={onUpdatePlace}
           onUploadImage={mode === 'trip' && onUpdatePlace ? onUploadImage : undefined}
-          locale={locale} timeFormat={timeFormat} onClose={onClose} />
+          onClose={onClose} />
 
-        {/* Content — scrollable */}
-        <div data-testid="inspector-scroll" style={{ flex: '1 1 auto', minHeight: 0, overflowY: 'auto', WebkitOverflowScrolling: 'touch', overscrollBehavior: 'contain', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {/* The body scrolls inside the capped card; each block keeps its natural height (#1195). */}
+        <div data-testid="inspector-scroll" className="flex min-h-0 flex-1 flex-col gap-3.5 overflow-y-auto overscroll-contain px-4 py-3.5 empty:hidden">
 
-          {/* Info-Chips — wraps on narrow screens; the review snippet inside stays desktop-only */}
-          <div className="flex" style={{ flexWrap: 'wrap', gap: 6, alignItems: 'center' }}>
-            {googleDetails?.rating && (() => {
-              const shortReview = (googleDetails.reviews || []).find(r => r.text && r.text.length > 5)
-              return (
-                <Chip
-                  icon={<Star size={12} fill="#facc15" color="#facc15" />}
-                  text={<>
-                    {googleDetails.rating.toFixed(1)}
-                    {googleDetails.rating_count ? <span style={{ opacity: 0.5 }}> ({googleDetails.rating_count.toLocaleString(locale)})</span> : ''}
-                    {shortReview && <span className="hidden md:inline" style={{ opacity: 0.6, fontWeight: 400, fontStyle: 'italic', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> · „{shortReview.text}"</span>}
-                  </>}
-                  color="var(--text-secondary)" bg="var(--bg-hover)"
-                />
-              )
-            })()}
-            {place.price > 0 && (
-              <Chip icon={<Banknote size={12} />} text={formatMoney(Number(place.price) || 0, place.currency || tripCurrency || 'EUR', locale)} color="#059669" bg="#ecfdf5" />
-            )}
-          </div>
-
-          {/* Collaborative rating (#1435) — every member's own vote, shown as the average. */}
-          {mode === 'trip' && onRate && (
-            <div className="bg-surface-hover" style={{ borderRadius: 10, padding: '8px 12px' }}>
-              <PlaceRating
-                ratings={place.ratings ?? []}
-                ratingAvg={place.rating_avg}
-                onRate={rating => onRate(place.id, rating)}
-              />
-            </div>
+          {/* Collaborative rating (#1435): every member's own vote, shown as the
+              average, and the first review worth quoting. */}
+          {showRating && (
+            // The review alone is a desktop extra, as it always was; without the vote row the block goes with it below md.
+            <DialogSection className={mode === 'trip' && onRate ? 'flex-none' : 'hidden flex-none md:block'} label={t('places.details.fact.rating')}>
+              <div className="flex flex-col gap-1.5">
+                {mode === 'trip' && onRate && (
+                  <div className={`${BOX} px-3 py-2`}>
+                    <PlaceRating ratings={place.ratings ?? []} ratingAvg={place.rating_avg} onRate={rating => onRate(place.id, rating)} />
+                  </div>
+                )}
+                {shortReview && (
+                  <p className="m-0 hidden italic text-content-muted md:block" style={{ ...fs(12, 'body'), overflowWrap: 'anywhere' }}>„{shortReview.text}"</p>
+                )}
+              </div>
+            </DialogSection>
           )}
 
-          {/* Telefon */}
-          {(place.phone || googleDetails?.phone) && (
-            <div style={{ display: 'flex', gap: 12 }}>
-              <a href={`tel:${place.phone || googleDetails.phone}`}
-                className="text-content"
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', textDecoration: 'none' }}>
-                <Phone size={12} /> {place.phone || googleDetails.phone}
-              </a>
-            </div>
-          )}
-
-          {/* Description / Summary */}
           {roadtripActive && place.stop_type === 'charging' && <ChargingInfo placeId={place.id} />}
           {(roadtripEndDay || roadtripStay) && <VisitControls endDay={roadtripEndDay} stay={roadtripStay} />}
-          {(place.description || googleDetails?.summary) && (
-            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{place.description || googleDetails?.summary || ''}</Markdown>
-            </div>
+
+          {description && (
+            <DialogSection className="flex-none" label={t('places.formDescription')}>
+              <MarkdownBox>{description}</MarkdownBox>
+            </DialogSection>
           )}
 
-          {/* Notes */}
           {place.notes && (
-            <div className="collab-note-md bg-surface-hover text-content-muted" style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: '1.5', padding: '8px 12px', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{place.notes}</Markdown>
-            </div>
+            <DialogSection className="flex-none" label={t('places.formNotes')}>
+              <MarkdownBox>{place.notes}</MarkdownBox>
+            </DialogSection>
           )}
 
           {/* Day-specific assignment note (#2163) — written via MCP/API or the
-              edit form; distinct from the pool-wide place.notes above, so it
-              carries an eyebrow saying which day-scope it belongs to. */}
+              edit form; distinct from the pool-wide place.notes above, so its
+              label says which day-scope it belongs to. */}
           {assignmentInDay?.notes && (
-            <div className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden', flexShrink: 0, padding: '8px 12px' }}>
-              <div className="text-content-faint" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 3 }}>
-                <StickyNote size={10} /> {t('places.assignmentNotes')}
-              </div>
-              <div className="collab-note-md text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: '1.5', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{assignmentInDay.notes}</Markdown>
-              </div>
-            </div>
+            <DialogSection className="flex-none" label={t('places.assignmentNotes')}>
+              <MarkdownBox>{assignmentInDay.notes}</MarkdownBox>
+            </DialogSection>
           )}
 
-          {/* Reservation + Participants — trip-only (collections have no days) */}
+          {/* Bookings + participants — trip-only (collections have no days) */}
           {mode === 'trip' && (
-            <PlaceReservationParticipants selectedAssignmentId={selectedAssignmentId} reservations={reservations}
-              assignments={assignments} selectedDayId={selectedDayId} tripMembers={tripMembers} locale={locale}
-              timeFormat={timeFormat} t={t} onSetParticipants={onSetParticipants}
-              onEditTransport={onEditTransport} onEditReservation={onEditReservation} />
+            <PlaceBookingsAndPeople selectedAssignmentId={selectedAssignmentId} reservations={reservations}
+              assignments={assignments} selectedDayId={selectedDayId} tripMembers={tripMembers}
+              timeFormat={timeFormat} onSetParticipants={onSetParticipants}
+              onEditTransport={onEditTransport} onEditReservation={onEditReservation} onOpenBooking={onOpenBooking} />
           )}
 
-          {/* Opening hours + Files — side by side on desktop only if both exist */}
           <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
-            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
+            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} place={place} placeFiles={placeFiles}
             onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
             fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading}
             distanceUnit={distanceUnit} onUpdatePlace={onUpdatePlace} />
 
           {/* Extra native rows from placeDetailProvider plugins (#1429). */}
           {mode === 'trip' && providerDetails.length > 0 && (
-            <div className="bg-surface-hover" style={{ borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
+            <div className={`${BOX} flex flex-none flex-col gap-1.5 px-3 py-2.5`}>
               {providerDetails.flatMap((p) => p.items.map((it, i) => (
-                <div key={`${p.pluginId}-${i}`} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, fontSize: 'calc(12.5px * var(--fs-scale-body, 1))' }}>
-                  <span className="text-content-secondary" style={{ fontWeight: 500, flexShrink: 0 }}>{it.label}</span>
+                <div key={`${p.pluginId}-${i}`} className="flex items-baseline justify-between gap-3" style={fs(12.5, 'body')}>
+                  <span className="flex-none font-medium text-content-secondary">{it.label}</span>
                   {it.url
-                    ? <a href={it.url} target="_blank" rel="noreferrer noopener" className="text-accent" style={{ textDecoration: 'none', textAlign: 'right', overflow: 'hidden', textOverflow: 'ellipsis' }}>{it.value ?? '↗'}</a>
-                    : <span className="text-content-muted" style={{ textAlign: 'right' }}>{it.value}</span>}
+                    ? <a href={it.url} target="_blank" rel="noreferrer noopener" className="truncate text-right text-accent-on hover:underline">{it.value ?? '↗'}</a>
+                    : <span className="text-right text-content-muted">{it.value}</span>}
                 </div>
               )))}
             </div>
@@ -507,26 +501,26 @@ export default function PlaceInspector({
 
           {/* Place-detail plugin slots (#1429): sandboxed, scoped to this place. */}
           {mode === 'trip' && placeDetailPlugins.length > 0 && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <div className="flex flex-none flex-col gap-2">
               {placeDetailPlugins.map((p) => {
                 const tid = (place as { trip_id?: number | string }).trip_id
                 return (
-                  <div key={p.id} className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
+                  <div key={p.id} className={`${BOX} overflow-hidden`}>
                     <PluginFrame pluginId={p.id} tripId={tid != null ? String(tid) : null} placeId={String(place.id)} title={p.name} surface="detail-slot" />
                   </div>
                 )
               })}
             </div>
           )}
-
         </div>
 
-        {/* Footer actions */}
-        <div className="border-t border-edge-faint" style={{ padding: '10px 16px', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', flexShrink: 0 }}>
+        {/* Footer: the day action and the ways out on the left, delete and edit on the right. */}
+        <footer className="flex flex-none flex-wrap items-center gap-2 border-t border-edge-faint px-4 py-2.5">
           {/* Collection mode — copy to trip + per-place status */}
           {mode === 'collection' && onCopyToTrip && (
-            <ActionButton onClick={onCopyToTrip} variant="primary" icon={<Copy size={13} />}
-              label={<span className="hidden sm:inline">{t('collections.copyToTrip')}</span>} />
+            <DialogButton variant="primary" onClick={onCopyToTrip} icon={<Copy size={14} strokeWidth={2} />} aria-label={t('collections.copyToTrip')}>
+              <span className="max-sm:hidden">{t('collections.copyToTrip')}</span>
+            </DialogButton>
           )}
           {mode === 'collection' && collectionStatus && onSetStatus && (
             <StatusBadge status={collectionStatus} onChange={onSetStatus} t={t} />
@@ -540,115 +534,375 @@ export default function PlaceInspector({
               pause in road trip mode. */}
           {mode === 'trip' && !!selectedDayId && !bookedNight && (
             assignmentInDay ? (
-              <ActionButton onClick={() => onRemoveAssignment?.(selectedDayId, assignmentInDay.id)} variant="ghost" icon={<Minus size={13} />}
-                label={<span className="hidden sm:inline">{t('inspector.removeFromDay')}</span>} />
+              <DialogButton onClick={() => onRemoveAssignment?.(selectedDayId, assignmentInDay.id)} icon={<Minus size={14} strokeWidth={2} />} aria-label={t('inspector.removeFromDay')}>
+                <span className="max-sm:hidden">{t('inspector.removeFromDay')}</span>
+              </DialogButton>
             ) : (
-              <ActionButton onClick={() => onAssignToDay?.(place.id)} variant="primary" icon={<Plus size={13} />} label={t('inspector.addToDay')} />
+              <DialogButton variant="primary" onClick={() => onAssignToDay?.(place.id)} icon={<Plus size={14} strokeWidth={2} />}>
+                {t('inspector.addToDay')}
+              </DialogButton>
             )
           )}
-          {/* Save to Collection — trip mode, independent of the Google Maps link */}
-          {showSaveToCollection && (
-            <ActionButton onClick={handleSaveToCollection} variant="ghost"
-              icon={savedInCollection ? <BookmarkCheck size={13} /> : <Bookmark size={13} />}
-              label={<span className="hidden sm:inline">{savedInCollection ? t('inspector.savedToCollection') : t('inspector.saveToCollection')}</span>} />
-          )}
           {navigationTargets.length > 0 && (
             <>
               {/* One target left (a place without coordinates) opens straight
                   away, exactly as this button always did. */}
-              <ActionButton
-                ref={navBtnRef}
-                onClick={() => {
-                  if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
-                  else setNavOpen(o => !o)
-                }}
-                variant="ghost"
-                icon={<Navigation size={13} />}
-                label={
-                  <span className="hidden sm:inline">
-                    {navigationTargets.length === 1 ? navigationTargets[0].label : t('inspector.navigation')}
-                  </span>
-                }
-              />
+              <span ref={navAnchorRef} className="inline-flex">
+                <DialogButton
+                  onClick={() => {
+                    if (navigationTargets.length === 1) openNavigationTarget(navigationTargets[0])
+                    else setNavOpen(o => !o)
+                  }}
+                  aria-label={navigationLabel}
+                  aria-haspopup={navigationTargets.length > 1 ? 'menu' : undefined}
+                  aria-expanded={navigationTargets.length > 1 ? navOpen : undefined}
+                  icon={<Navigation size={14} strokeWidth={2} />}
+                >
+                  <span className="max-sm:hidden">{navigationLabel}</span>
+                </DialogButton>
+              </span>
               {navOpen && (
                 <NavigationMenu
                   targets={navigationTargets}
-                  anchor={navBtnRef.current}
+                  anchor={navAnchorRef.current}
                   onClose={() => setNavOpen(false)}
                 />
               )}
             </>
           )}
           {websiteUrl && (
-            <ActionButton onClick={() => window.open(websiteUrl, '_blank', 'noopener,noreferrer')} variant="ghost" icon={<ExternalLink size={13} />}
-              label={<span className="hidden sm:inline">{t('inspector.website')}</span>} />
+            <DialogButton onClick={() => window.open(websiteUrl, '_blank', 'noopener,noreferrer')} icon={<ExternalLink size={14} strokeWidth={2} />} aria-label={t('inspector.website')}>
+              <span className="max-sm:hidden">{t('inspector.website')}</span>
+            </DialogButton>
           )}
-          <div style={{ flex: 1 }} />
-          {mode === 'trip' && onEdit && (
-            <ActionButton onClick={onEdit} variant="ghost" icon={<Edit2 size={13} />} label={<span className="hidden sm:inline">{t('common.edit')}</span>} />
+          {/* Save to Collection — trip mode, independent of the Google Maps link */}
+          {showSaveToCollection && (
+            <DialogButton onClick={handleSaveToCollection}
+              icon={savedInCollection ? <BookmarkCheck size={14} strokeWidth={2} /> : <Bookmark size={14} strokeWidth={2} />}
+              aria-label={savedInCollection ? t('inspector.savedToCollection') : t('inspector.saveToCollection')}>
+              <span className="max-sm:hidden">{savedInCollection ? t('inspector.savedToCollection') : t('inspector.saveToCollection')}</span>
+            </DialogButton>
           )}
+          <FooterSpacer />
           {mode === 'collection'
-            ? (onRemoveFromList && (
-                <ActionButton onClick={onRemoveFromList} variant="danger" icon={<Trash2 size={13} />}
-                  label={<span className="hidden sm:inline">{t('collections.removeFromList')}</span>} />
-              ))
-            : (onDelete && (
-                <ActionButton onClick={onDelete} variant="danger" icon={<Trash2 size={13} />} label={<span className="hidden sm:inline">{t('common.delete')}</span>} />
-              ))}
-        </div>
+            ? (onRemoveFromList && <DeleteButton onClick={onRemoveFromList} label={t('collections.removeFromList')} />)
+            : (onDelete && <DeleteButton onClick={onDelete} />)}
+          {mode === 'trip' && onEdit && (
+            <DialogButton variant="primary" onClick={onEdit} icon={<Pencil size={14} strokeWidth={2} />} aria-label={t('common.edit')}>
+              <span className="max-sm:hidden">{t('common.edit')}</span>
+            </DialogButton>
+          )}
+        </footer>
       </div>
     </div>
   )
 }
 
-interface ChipProps {
-  icon: React.ReactNode
-  text: React.ReactNode
-  color?: string
-  bg?: string
-}
-
-function Chip({ icon, text, color = 'var(--text-secondary)', bg = 'var(--bg-hover)' }: ChipProps) {
+/** Markdown in a framed box; it wraps long words instead of pushing the card wider. */
+function MarkdownBox({ children }: { children: string }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 9px', borderRadius: 99, background: bg, color, fontSize: 'calc(12px * var(--fs-scale-body, 1))', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', minWidth: 0 }}>
-      <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>
-      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{text}</span>
+    <div className={`${BOX} collab-note-md px-3 py-2 text-content-secondary`}
+      style={{ ...fs(12.5, 'body'), lineHeight: 1.5, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+      <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{children}</Markdown>
     </div>
   )
 }
 
-interface ActionButtonProps {
-  onClick: () => void
-  variant: 'primary' | 'ghost' | 'danger'
-  icon: React.ReactNode
-  label: React.ReactNode
-  /** For callers that anchor a popup to the button. React 19 passes it through. */
-  ref?: React.Ref<HTMLButtonElement>
+interface InspectorHeadProps {
+  place: Place
+  category: Category | undefined
+  openNow: boolean | null
+  phone: string | null | undefined
+  rating: number | null
+  ratingCount: number | null
+  price: string | null
+  time: string | null
+  editingName: boolean
+  nameInputRef: React.RefObject<HTMLInputElement | null>
+  nameValue: string
+  setNameValue: (value: string) => void
+  commitNameEdit: () => void
+  handleNameKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  startNameEdit: () => void
+  onUpdatePlace?: (placeId: number, data: Partial<Place>) => void
+  onUploadImage?: (placeId: number, file: File) => Promise<void>
+  onClose: () => void
 }
 
-export function ActionButton({ onClick, variant, icon, label, ref }: ActionButtonProps) {
-  const base = {
-    primary: { background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', hoverBg: 'var(--text-secondary)' },
-    ghost: { background: 'var(--bg-hover)', color: 'var(--text-secondary)', border: 'none', hoverBg: 'var(--bg-tertiary)' },
-    danger: { background: 'rgba(239,68,68,0.08)', color: '#dc2626', border: 'none', hoverBg: 'rgba(239,68,68,0.16)' },
-  }
-  const s = base[variant] || base.ghost
+/**
+ * The head band: the avatar with its open/closed ring and photo credit, the
+ * name (a double-click renames it), the address, and the facts as pills.
+ */
+function InspectorHead({ place, category, openNow, phone, rating, ratingCount, price, time, editingName, nameInputRef,
+  nameValue, setNameValue, commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, onUploadImage, onClose }: InspectorHeadProps) {
+  const { t, locale } = useTranslation()
+  const ring = openNow === true ? 'bg-success' : openNow === false ? 'bg-danger' : 'bg-surface-card shadow-sm'
+  const hasCoords = !!(place.lat && place.lng)
+  const hasPills = openNow !== null || !!category || !!time || rating != null || !!price || place.source === 'dawarich' || !!phone || hasCoords
   return (
-    <button type="button"
-      ref={ref}
-      onClick={onClick}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 5,
-        padding: '6px 12px', borderRadius: 10, minHeight: 30,
-        fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500, cursor: 'pointer',
-        fontFamily: 'inherit', transition: 'background 0.15s, opacity 0.15s',
-        background: s.background, color: s.color, border: s.border,
-      }}
-      onMouseEnter={e => e.currentTarget.style.background = s.hoverBg}
-      onMouseLeave={e => e.currentTarget.style.background = s.background}
+    <header className="flex-none border-b border-edge-faint px-4 pb-3 pt-3.5" style={{ background: category?.color ? tintOf(category.color) : NEUTRAL_TINT }}>
+      <div className="flex items-start gap-3.5">
+        <div className="flex w-[57px] flex-none flex-col items-center">
+          <div className={`rounded-full p-[2.5px] ${ring}`}>
+            {onUploadImage
+              ? <PlaceAvatarUpload place={place} category={category} size={52}
+                  onUpload={(file: File) => onUploadImage(place.id, file)}
+                  onRemove={() => onUpdatePlace(place.id, { image_url: null })} />
+              : <PlaceAvatar place={place} category={category} size={52} />}
+          </div>
+          <PhotoCredit imageUrl={place.image_url} />
+        </div>
+
+        <div className="min-w-0 flex-1 pt-0.5">
+          {editingName ? (
+            <input
+              ref={nameInputRef}
+              value={nameValue}
+              onChange={e => setNameValue(e.target.value)}
+              onBlur={commitNameEdit}
+              onKeyDown={handleNameKeyDown}
+              aria-label={t('places.formName')}
+              className="-mx-1.5 block w-[calc(100%+12px)] rounded-[8px] border-0 bg-surface-card px-1.5 py-0.5 font-bold tracking-[-0.01em] text-content shadow-sm outline-none"
+              style={fs(17, 'subtitle')}
+            />
+          ) : (
+            <h2 onDoubleClick={startNameEdit}
+              className={`m-0 break-words font-bold leading-snug tracking-[-0.01em] text-content ${onUpdatePlace ? 'cursor-text' : ''}`}
+              style={fs(17, 'subtitle')}>
+              {place.name}
+            </h2>
+          )}
+          {place.address && (
+            // One line, whatever its length; the whole address is in the tooltip.
+            <div className="mt-0.5 flex min-w-0 items-center gap-1 text-content-muted" style={fs(12.5, 'body')}>
+              <MapPin size={12} strokeWidth={2} className="flex-none text-content-faint" />
+              <Tooltip label={place.address}>
+                <span className="min-w-0 truncate">{place.address}</span>
+              </Tooltip>
+            </div>
+          )}
+
+          {hasPills && (
+            <div className="mt-2 flex flex-wrap items-center gap-1.5">
+              {openNow !== null && (
+                <SoftPill tone={openNow ? 'success' : 'danger'} icon={<span className="h-1.5 w-1.5 flex-none rounded-full bg-current" />}>
+                  {openNow ? t('inspector.opened') : t('inspector.closed')}
+                </SoftPill>
+              )}
+              {category && (
+                <span className={HEAD_PILL} style={fs(10.5)}>
+                  <span className="h-2 w-2 flex-none rounded-full" style={{ background: category.color || 'var(--text-faint)' }} />
+                  {category.name}
+                </span>
+              )}
+              {time && <TimePill>{time}</TimePill>}
+              {rating != null && rating > 0 && (
+                <span className={HEAD_PILL} style={fs(10.5)}>
+                  <Star size={11} strokeWidth={2} fill="currentColor" className="flex-none text-warning" />
+                  {rating.toFixed(1)}
+                  {ratingCount ? <span className="font-medium text-content-faint">({ratingCount.toLocaleString(locale)})</span> : null}
+                </span>
+              )}
+              {price && (
+                <span className={HEAD_PILL} style={fs(10.5)}>
+                  <Banknote size={11} strokeWidth={2} className="flex-none text-success" />
+                  {price}
+                </span>
+              )}
+              {/* Where the place came from, when it did not come from somebody
+                  typing it: a stay accepted out of their own recordings. The mark
+                  alone — the name beside it is already the place's name, and a
+                  word here would only repeat the tooltip. */}
+              {place.source === 'dawarich' && (
+                <Tooltip label={t('dawarich.place.fromDawarich')} placement="top">
+                  <span role="img" aria-label={t('dawarich.place.fromDawarich')} className={`${HEAD_PILL} px-1 py-[3px]`}>
+                    <span className="inline-flex overflow-hidden rounded-[4px]"><DawarichIcon size={13} /></span>
+                  </span>
+                </Tooltip>
+              )}
+              {phone && (
+                <a href={`tel:${phone}`} className={`${HEAD_PILL} hover:text-content-secondary`} style={fs(10.5)}>
+                  <Phone size={11} strokeWidth={2} className="flex-none text-content-faint" />
+                  {phone}
+                </a>
+              )}
+              {hasCoords && (
+                <span className="hidden flex-none items-center rounded-full border border-edge-faint px-2 py-[1px] font-geist tabular-nums text-content-faint sm:inline-flex" style={fs(10.5)}>
+                  {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+
+        <Tooltip label={t('common.close')}>
+          <button type="button" onClick={onClose} aria-label={t('common.close')}
+            className="grid h-8 w-8 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm transition-colors hover:text-content">
+            <X size={15} strokeWidth={2.2} />
+          </button>
+        </Tooltip>
+      </div>
+    </header>
+  )
+}
+
+interface PlaceBookingsAndPeopleProps {
+  selectedAssignmentId: number | null
+  reservations: Reservation[]
+  assignments: AssignmentsMap
+  selectedDayId: number | null
+  tripMembers: TripMember[]
+  timeFormat: string
+  onSetParticipants?: (assignmentId: number, dayId: number, participantIds: number[]) => void
+  onEditTransport?: (reservation: Reservation) => void
+  onEditReservation?: (reservation: Reservation) => void
+  onOpenBooking?: (reservation: Reservation) => void
+}
+
+/** The bookings pinned to this stop and who joins it, side by side from sm up. */
+function PlaceBookingsAndPeople({ selectedAssignmentId, reservations, assignments, selectedDayId,
+  tripMembers, timeFormat, onSetParticipants, onEditTransport, onEditReservation, onOpenBooking }: PlaceBookingsAndPeopleProps) {
+  const { t } = useTranslation()
+  const linked = getAssignmentReservations<Reservation>(reservations, selectedAssignmentId)
+  const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
+  const currentParticipants = assignment?.participants || []
+  const participantIds = currentParticipants.map(p => p.user_id)
+  const allJoined = currentParticipants.length === 0
+  const showParticipants = !!selectedAssignmentId && tripMembers.length > 1
+  if (linked.length === 0 && !showParticipants) return null
+  return (
+    <div className={`grid flex-none items-start gap-3 ${linked.length > 0 && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'}`}>
+      {/* Bookings pinned to this stop; several can share one (#2201) */}
+      {linked.length > 0 && (
+        <DialogSection label={t('reservations.title')}>
+          <div className="flex flex-col gap-2">
+            {linked.map(res => {
+              // The strip summarised the booking but went nowhere, so its
+              // attachments and fields had no route from the map (#2012).
+              // A transport has its own form; picking by type is what the day
+              // sidebar does, and an absent handler means this user may not
+              // open this one, so the strip stays inert rather than lying.
+              // With a detail to show, the card is the booking itself and opens it;
+              // the editor is one Edit further, under the same rights as before.
+              if (onOpenBooking) return <LinkedBookingCard key={res.id} res={res} timeFormat={timeFormat} open={() => onOpenBooking(res)} opens="detail" />
+              const editor = TRANSPORT_TYPES.has(res.type) ? onEditTransport : onEditReservation
+              return <LinkedBookingCard key={res.id} res={res} timeFormat={timeFormat} open={editor ? () => editor(res) : undefined} />
+            })}
+          </div>
+        </DialogSection>
+      )}
+
+      {showParticipants && (
+        <ParticipantsBox
+          tripMembers={tripMembers}
+          participantIds={participantIds}
+          allJoined={allJoined}
+          onSetParticipants={onSetParticipants}
+          selectedAssignmentId={selectedAssignmentId}
+          selectedDayId={selectedDayId}
+        />
+      )}
+    </div>
+  )
+}
+
+/** The facts of a booking's metadata that the card has no field for, one pill each. */
+function bookingMetaParts(res: Reservation, t: (key: string) => string): string[] {
+  const meta = parseMeta(res)
+  const parts: string[] = []
+  if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
+  else if (meta.flight_number) parts.push(meta.flight_number)
+  if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
+  if (meta.train_number) parts.push(meta.train_number)
+  if (meta.platform) parts.push(`${t('reservations.meta.platform')} ${meta.platform}`)
+  if (meta.check_in_time) parts.push(`${t('reservations.meta.checkIn')} ${meta.check_in_time}`)
+  if (meta.check_out_time) parts.push(`${t('reservations.meta.checkOut')} ${meta.check_out_time}`)
+  return parts
+}
+
+/**
+ * A booking on this stop as a small booking card: the head band tinted by its
+ * status, then its date, time and code as fields. With `open` it opens the
+ * booking's detail or its editor (`opens`) on a click, Enter or Space; without
+ * it the card is a read-only summary.
+ */
+function LinkedBookingCard({ res, timeFormat, open, opens = 'editor' }: { res: Reservation; timeFormat: string; open?: () => void; opens?: 'detail' | 'editor' }) {
+  const { t, locale } = useTranslation()
+  const openLabel = t(opens === 'detail' ? 'roadtrip.ride.open' : 'inspector.editRes')
+  // A stop can carry several bookings (#2201), so a card that opens its booking is
+  // named by it; the editor's card keeps its old name.
+  const cardName = opens === 'detail' ? `${openLabel}: ${res.title}` : openLabel
+  const OpenGlyph = opens === 'detail' ? ChevronRight : Pencil
+  const confirmed = res.status === 'confirmed'
+  const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
+  const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
+  const metaParts = bookingMetaParts(res, t)
+  const hasFields = !!(date || startTime || endTime || res.confirmation_number)
+  const card = (
+    <div
+      role={open ? 'button' : undefined}
+      // No press-scale on the composite card: shrinking it mid-click slides the
+      // links inside out from under the pointer (#2158).
+      data-no-press
+      aria-label={open ? cardName : undefined}
+      tabIndex={open ? 0 : undefined}
+      onClick={open}
+      onKeyDown={open ? (e: React.KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open() }
+      } : undefined}
+      className={`group flex flex-col overflow-hidden rounded-xl border border-edge-faint bg-surface-secondary text-left ${open ? 'cursor-pointer transition-shadow hover:shadow-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[color:var(--text-primary)]' : ''}`}
     >
-      {icon}{label}
-    </button>
+      <div className="flex items-center gap-2 px-2.5 py-1.5" style={{ background: toneTint(toneOf(res)) }}>
+        <TypeTile type={res.type} size={24} />
+        <span className="min-w-0 flex-1 truncate font-bold text-content" style={fs(12.5, 'body')}>{res.title}</span>
+        <SoftPill tone={confirmed ? 'success' : 'warning'} caps>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</SoftPill>
+        {open && <OpenGlyph size={12} strokeWidth={2} aria-hidden className="flex-none text-content-faint opacity-60 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />}
+      </div>
+      {(hasFields || metaParts.length > 0 || res.notes) && (
+        <div className="flex flex-col gap-2 border-t border-edge-faint px-2.5 pb-2.5 pt-2">
+          {hasFields && (
+            <div className="flex gap-2">
+              {date && (
+                <Field label={t('reservations.date')} className="flex-1">
+                  {new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}
+                </Field>
+              )}
+              {(startTime || endTime) && (
+                <Field label={t('reservations.time')} className="flex-1" tabular>
+                  {startTime ? formatTime(startTime, locale, timeFormat) : ''}
+                  {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
+                </Field>
+              )}
+              {res.confirmation_number && (
+                <Field label={t('reservations.confirmationCode')} className="flex-1" tabular>
+                  <BlurredCode className="font-geist">{res.confirmation_number}</BlurredCode>
+                </Field>
+              )}
+            </div>
+          )}
+          {metaParts.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {metaParts.map((part, i) => <SoftPill key={i}>{part}</SoftPill>)}
+            </div>
+          )}
+          {res.notes && (
+            <div className="collab-note-md text-content-muted" style={{ ...fs(11.5, 'body'), lineHeight: 1.45, wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{res.notes}</Markdown>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+  return open ? <Tooltip label={openLabel} placement="top">{card}</Tooltip> : card
+}
+
+function MemberAvatar({ member, size }: { member: TripMember; size: number }) {
+  const src = member.avatar_url || avatarSrc(member.avatar)
+  return (
+    <span className="grid flex-none place-items-center overflow-hidden rounded-full bg-surface-tertiary font-bold text-content-muted" style={{ width: size, height: size, ...fs(8.5) }}>
+      {src ? <img src={src} alt="" className="h-full w-full object-cover" /> : member.username?.[0]?.toUpperCase()}
+    </span>
   )
 }
 
@@ -656,23 +910,41 @@ interface ParticipantsBoxProps {
   tripMembers: TripMember[]
   participantIds: number[]
   allJoined: boolean
-  onSetParticipants: (assignmentId: number, dayId: number, participantIds: number[]) => void
+  onSetParticipants?: (assignmentId: number, dayId: number, participantIds: number[]) => void
   selectedAssignmentId: number | null
   selectedDayId: number | null
-  t: (key: string) => string
 }
 
-function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticipants, selectedAssignmentId, selectedDayId, t }: ParticipantsBoxProps) {
-  const [showAdd, setShowAdd] = React.useState(false)
-  const [hoveredId, setHoveredId] = React.useState(null)
+/**
+ * Who joins this stop. Nobody set means everyone; a chip takes its member off,
+ * the last one stays, and the + adds a missing member back.
+ */
+function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticipants, selectedAssignmentId, selectedDayId }: ParticipantsBoxProps) {
+  const { t } = useTranslation()
+  const [showAdd, setShowAdd] = useState(false)
+  const addRef = useRef<HTMLDivElement>(null)
+
+  // The add list closes on a click elsewhere or on Escape, like every popover.
+  useEffect(() => {
+    if (!showAdd) return
+    const onDown = (e: MouseEvent) => { if (!addRef.current?.contains(e.target as Node)) setShowAdd(false) }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setShowAdd(false) }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [showAdd])
 
   // Active participants: if allJoined, show all members; otherwise show only those in participantIds
   const activeMembers = allJoined ? tripMembers : tripMembers.filter(m => participantIds.includes(m.id))
   const availableToAdd = allJoined ? [] : tripMembers.filter(m => !participantIds.includes(m.id))
+  const canRemove = activeMembers.length > 1
 
-  const handleRemove = (userId) => {
+  const handleRemove = (userId: number) => {
     if (!onSetParticipants) return
-    let newIds
+    let newIds: number[]
     if (allJoined) {
       newIds = tripMembers.filter(m => m.id !== userId).map(m => m.id)
     } else {
@@ -682,7 +954,7 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
     onSetParticipants(selectedAssignmentId, selectedDayId, newIds)
   }
 
-  const handleAdd = (userId) => {
+  const handleAdd = (userId: number) => {
     if (!onSetParticipants) return
     const newIds = [...participantIds, userId]
     if (newIds.length === tripMembers.length) {
@@ -694,75 +966,34 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
   }
 
   return (
-    <div style={{ borderRadius: 12, border: '1px solid var(--border-faint)', padding: '8px 10px' }}>
-      <div className="text-content-faint" style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.03em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
-        <Users size={10} /> {t('inspector.participants')}
-      </div>
-      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, alignItems: 'center' }}>
-        {activeMembers.map(member => {
-          const isHovered = hoveredId === member.id
-          const canRemove = activeMembers.length > 1
-          return (
-            <button type="button" key={member.id} disabled={!canRemove}
-              onMouseEnter={() => setHoveredId(member.id)}
-              onMouseLeave={() => setHoveredId(null)}
-              onClick={() => { if (canRemove) handleRemove(member.id) }}
-              className={isHovered && canRemove ? 'bg-[rgba(239,68,68,0.06)] text-[#ef4444]' : 'bg-surface-hover text-content'}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 4, padding: '2px 7px 2px 3px', borderRadius: 99,
-                border: `1.5px solid ${isHovered && canRemove ? 'rgba(239,68,68,0.4)' : 'var(--accent)'}`,
-                fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500,
-                cursor: canRemove ? 'pointer' : 'default',
-                transition: 'all 0.15s',
-              }}>
-              <span className="bg-surface-tertiary text-content-muted" style={{
-                width: 16, height: 16, borderRadius: '50%',
-                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700,
-                overflow: 'hidden', flexShrink: 0,
-              }}>
-                {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || avatarSrc(member.avatar)!} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
-              </span>
-              <span style={{ textDecoration: isHovered && canRemove ? 'line-through' : 'none' }}>{member.username}</span>
-            </button>
-          )
-        })}
+    <DialogSection label={t('inspector.participants')}>
+      <div className="flex flex-wrap items-center gap-1.5">
+        {activeMembers.map(member => (
+          <button type="button" key={member.id} disabled={!canRemove}
+            onClick={() => { if (canRemove) handleRemove(member.id) }}
+            className="group/chip inline-flex max-w-full items-center gap-1.5 rounded-full border border-edge-faint bg-surface-card py-[2px] pl-[2px] pr-2.5 font-semibold text-content transition-colors enabled:hover:border-danger enabled:hover:bg-danger-soft enabled:hover:text-danger disabled:cursor-default"
+            style={fs(11.5, 'body')}>
+            <MemberAvatar member={member} size={18} />
+            <span className={`truncate ${canRemove ? 'group-hover/chip:line-through' : ''}`}>{member.username}</span>
+          </button>
+        ))}
 
-        {/* Add button */}
         {availableToAdd.length > 0 && (
-          <div style={{ position: 'relative' }}>
-            <button type="button" onClick={() => setShowAdd(!showAdd)} className="text-content-faint" style={{
-              width: 22, height: 22, borderRadius: '50%', border: '1.5px dashed var(--border-primary)',
-              background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))', transition: 'all 0.12s',
-            }}
-              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--text-muted)'; e.currentTarget.style.color = 'var(--text-primary)' }}
-              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-            >+</button>
+          <div ref={addRef} className="relative">
+            <Tooltip label={t('common.add')}>
+              <button type="button" onClick={() => setShowAdd(!showAdd)} aria-label={t('common.add')} aria-expanded={showAdd}
+                className="grid h-[22px] w-[22px] place-items-center rounded-full border-[1.5px] border-dashed border-edge font-semibold leading-none text-content-faint transition-colors hover:border-content-muted hover:text-content"
+                style={fs(12, 'body')}>+</button>
+            </Tooltip>
 
             {showAdd && (
-              <div className="bg-surface-card" style={{
-                position: 'absolute', top: 26, left: 0, zIndex: 100,
-                border: '1px solid var(--border-primary)', borderRadius: 10,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, minWidth: 140,
-              }}>
+              <div className="absolute left-0 top-[26px] z-[100] min-w-[160px] rounded-[10px] border border-edge bg-surface-card p-1 shadow-dropdown">
                 {availableToAdd.map(member => (
-                  <button type="button" key={member.id} onClick={() => handleAdd(member.id)} className="text-content" style={{
-                    display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
-                    borderRadius: 6, border: 'none', background: 'none', cursor: 'pointer',
-                    fontFamily: 'inherit', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', textAlign: 'left',
-                    transition: 'background 0.1s',
-                  }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'none'}
-                  >
-                    <div className="bg-surface-tertiary text-content-muted" style={{
-                      width: 18, height: 18, borderRadius: '50%',
-                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 700,
-                      overflow: 'hidden', flexShrink: 0,
-                    }}>
-                      {(member.avatar_url || member.avatar) ? <img src={member.avatar_url || avatarSrc(member.avatar)!} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : member.username?.[0]?.toUpperCase()}
-                    </div>
-                    <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>{member.username}</span>
+                  <button type="button" key={member.id} onClick={() => handleAdd(member.id)}
+                    className="flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left text-content transition-colors hover:bg-surface-hover"
+                    style={fs(11.5, 'body')}>
+                    <MemberAvatar member={member} size={18} />
+                    <span className="min-w-0 flex-1 truncate">{member.username}</span>
                     {member.is_guest && <GuestBadge size="xs" />}
                   </button>
                 ))}
@@ -771,454 +1002,247 @@ function ParticipantsBox({ tripMembers, participantIds, allJoined, onSetParticip
           </div>
         )}
       </div>
-    </div>
-  )
-}
-
-
-function PlaceInspectorHeader({ openNow, place, category, t, editingName, nameInputRef, nameValue, setNameValue,
-  commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, onUploadImage, locale, timeFormat, onClose }: any) {
-  return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: openNow !== null ? 26 : 14, padding: openNow !== null ? '18px 16px 14px 28px' : '18px 16px 14px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
-          {/* Avatar with open/closed ring + tag */}
-          <div style={{ position: 'relative', flexShrink: 0, marginBottom: openNow !== null ? 8 : 0 }}>
-            <div style={{
-              borderRadius: '50%', padding: 2.5,
-              background: openNow === true ? '#22c55e' : openNow === false ? '#ef4444' : 'transparent',
-            }}>
-              {onUploadImage
-                ? <PlaceAvatarUpload place={place} category={category} size={52}
-                    onUpload={(file: File) => onUploadImage(place.id, file)}
-                    onRemove={() => onUpdatePlace(place.id, { image_url: null })} />
-                : <PlaceAvatar place={place} category={category} size={52} />}
-            </div>
-            {openNow === null && <PhotoCredit imageUrl={place.image_url} />}
-            {openNow !== null && (
-              <span style={{
-                position: 'absolute', bottom: -7, left: '50%', transform: 'translateX(-50%)',
-                fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 500, letterSpacing: '0.02em',
-                color: 'white',
-                background: openNow ? '#16a34a' : '#dc2626',
-                padding: '1.5px 7px', borderRadius: 99,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 1px 4px rgba(0,0,0,0.2)',
-              }}>
-                {openNow ? t('inspector.opened') : t('inspector.closed')}
-              </span>
-            )}
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              {editingName ? (
-                <input
-                  ref={nameInputRef}
-                  value={nameValue}
-                  onChange={e => setNameValue(e.target.value)}
-                  onBlur={commitNameEdit}
-                  onKeyDown={handleNameKeyDown}
-                  className="text-content bg-surface-secondary"
-                  style={{ fontWeight: 600, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', lineHeight: '1.3', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '1px 6px', fontFamily: 'inherit', outline: 'none', width: '100%' }}
-                />
-              ) : (
-                <span
-                  onDoubleClick={startNameEdit}
-                  className="text-content"
-                  style={{ fontWeight: 600, fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', lineHeight: '1.3', cursor: onUpdatePlace ? 'text' : 'default' }}
-                >{place.name}</span>
-              )}
-              {/* Where the place came from, when it did not come from somebody
-                  typing it: a stay accepted out of their own recordings. The
-                  mark alone — the name beside it is already the place's name,
-                  and a word here would only repeat the tooltip. */}
-              {place.source === 'dawarich' && (
-                <Tooltip label={t('dawarich.place.fromDawarich')} placement="top">
-                  <span style={{ display: 'inline-flex', flexShrink: 0, overflow: 'hidden', borderRadius: 5 }}>
-                    <DawarichIcon size={16} />
-                  </span>
-                </Tooltip>
-              )}
-              {category && (() => {
-                const CatIcon = getCategoryIcon(category.icon)
-                return (
-                  <span style={{
-                    display: 'inline-flex', alignItems: 'center', gap: 4,
-                    fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500,
-                    color: category.color || '#6b7280',
-                    background: category.color ? `${category.color}18` : 'rgba(0,0,0,0.06)',
-                    border: `1px solid ${category.color ? `${category.color}30` : 'transparent'}`,
-                    padding: '2px 8px', borderRadius: 99,
-                  }}>
-                    <CatIcon size={10} />
-                    <span className="hidden sm:inline">{category.name}</span>
-                  </span>
-                )
-              })()}
-            </div>
-            {place.address && (
-              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 4, marginTop: 6 }}>
-                <MapPin size={11} color="var(--text-faint)" style={{ flexShrink: 0, marginTop: 2 }} />
-                <span className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: '1.4', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{place.address}</span>
-              </div>
-            )}
-            {place.place_time && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 3 }}>
-                <Clock size={10} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                <span className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{formatTime(place.place_time, locale, timeFormat)}{place.end_time ? ` – ${formatTime(place.end_time, locale, timeFormat)}` : ''}</span>
-              </div>
-            )}
-            {place.lat && place.lng && (
-              <div className="hidden sm:block text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
-                {Number(place.lat).toFixed(6)}, {Number(place.lng).toFixed(6)}
-              </div>
-            )}
-          </div>
-          <button type="button"
-            onClick={onClose}
-            className="bg-surface-hover"
-            style={{ width: 28, height: 28, borderRadius: '50%', border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', flexShrink: 0, alignSelf: 'flex-start', transition: 'background 0.15s' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-          >
-            <X size={14} strokeWidth={2} color="var(--text-secondary)" />
-          </button>
-        </div>
-  )
-}
-
-function PlaceReservationParticipants({ selectedAssignmentId, reservations, assignments, selectedDayId,
-  tripMembers, locale, timeFormat, t, onSetParticipants, onEditTransport, onEditReservation }: any) {
-  return (
-    <>
-          {(() => {
-            const linked = getAssignmentReservations<Reservation>(reservations, selectedAssignmentId)
-            const assignment = selectedAssignmentId ? (assignments[String(selectedDayId)] || []).find(a => a.id === selectedAssignmentId) : null
-            const currentParticipants = assignment?.participants || []
-            const participantIds = currentParticipants.map(p => p.user_id)
-            const allJoined = currentParticipants.length === 0
-            const showParticipants = selectedAssignmentId && tripMembers.length > 1
-            if (linked.length === 0 && !showParticipants) return null
-            return (
-              <div className={`grid ${linked.length > 0 && showParticipants ? 'grid-cols-1 sm:grid-cols-2' : 'grid-cols-1'} gap-2`}>
-                {/* Bookings pinned to this stop; several can share one (#2201) */}
-                {linked.length > 0 && (
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    {linked.map(res => {
-                      const confirmed = res.status === 'confirmed'
-                      // The strip summarised the booking but went nowhere, so its
-                      // attachments and fields had no route from the map (#2012).
-                      // A transport has its own form; picking by type is what the day
-                      // sidebar does, and an absent handler means this user may not
-                      // open this one, so the strip stays inert rather than lying.
-                      const editor = TRANSPORT_TYPES.has(res.type) ? onEditTransport : onEditReservation
-                      const open = editor ? () => editor(res) : undefined
-                      return (
-                        <div
-                          key={res.id}
-                          role={open ? 'button' : undefined}
-                          // No press-scale on the composite strip: shrinking it
-                          // mid-click slides the links inside out from under the
-                          // pointer (#2158).
-                          data-no-press
-                          aria-label={open ? t('inspector.editRes') : undefined}
-                          tabIndex={open ? 0 : undefined}
-                          onClick={open}
-                          onKeyDown={open ? (e: React.KeyboardEvent) => {
-                            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open() }
-                          } : undefined}
-                          title={open ? t('inspector.editRes') : undefined}
-                          style={{ borderRadius: 12, overflow: 'hidden', border: `1px solid ${confirmed ? 'rgba(22,163,74,0.2)' : 'rgba(217,119,6,0.2)'}`, cursor: open ? 'pointer' : undefined, textAlign: 'left' }}
-                        >
-                          <div className={confirmed ? 'bg-[rgba(22,163,74,0.08)]' : 'bg-[rgba(217,119,6,0.08)]'} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px' }}>
-                            <div className={confirmed ? 'bg-[#16a34a]' : 'bg-[#d97706]'} style={{ width: 6, height: 6, borderRadius: '50%', flexShrink: 0 }} />
-                            <span className={confirmed ? 'text-[#16a34a]' : 'text-[#d97706]'} style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700 }}>{confirmed ? t('reservations.confirmed') : t('reservations.pending')}</span>
-                            <span style={{ flex: 1 }} />
-                            <span className="text-content" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{res.title}</span>
-                          </div>
-                          <div style={{ padding: '6px 10px', display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-                            {(() => {
-                              const { date, time: startTime } = splitReservationDateTime(res.reservation_time)
-                              const { time: endTime } = splitReservationDateTime(res.reservation_end_time)
-                              return (
-                                <>
-                                  {date && (
-                                    <div>
-                                      <div className="text-content-faint" style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.date')}</div>
-                                      <div className="text-content" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, marginTop: 1 }}>{new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })}</div>
-                                    </div>
-                                  )}
-                                  {(startTime || endTime) && (
-                                    <div>
-                                      <div className="text-content-faint" style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.time')}</div>
-                                      <div className="text-content" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, marginTop: 1 }}>
-                                        {startTime ? formatTime(startTime, locale, timeFormat) : ''}
-                                        {endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}
-                                      </div>
-                                    </div>
-                                  )}
-                                </>
-                              )
-                            })()}
-                            {res.confirmation_number && (
-                              <div>
-                                <div className="text-content-faint" style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, textTransform: 'uppercase' }}>{t('reservations.confirmationCode')}</div>
-                                <div className="text-content" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, marginTop: 1 }}><BlurredCode>{res.confirmation_number}</BlurredCode></div>
-                              </div>
-                            )}
-                          </div>
-                          {res.notes && <div className="collab-note-md text-content-faint" style={{ padding: '0 10px 6px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', lineHeight: 1.4, wordBreak: 'break-word', overflowWrap: 'anywhere' }}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{res.notes}</Markdown></div>}
-                          {(() => {
-                            const meta = typeof res.metadata === 'string' ? JSON.parse(res.metadata || '{}') : (res.metadata || {})
-                            if (!meta || Object.keys(meta).length === 0) return null
-                            const parts: string[] = []
-                            if (meta.airline && meta.flight_number) parts.push(`${meta.airline} ${meta.flight_number}`)
-                            else if (meta.flight_number) parts.push(meta.flight_number)
-                            if (meta.departure_airport && meta.arrival_airport) parts.push(`${meta.departure_airport} → ${meta.arrival_airport}`)
-                            if (meta.train_number) parts.push(meta.train_number)
-                            if (meta.platform) parts.push(`Gl. ${meta.platform}`)
-                            if (meta.check_in_time) parts.push(`Check-in ${meta.check_in_time}`)
-                            if (meta.check_out_time) parts.push(`Check-out ${meta.check_out_time}`)
-                            if (parts.length === 0) return null
-                            return <div className="text-content-muted" style={{ padding: '0 10px 6px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500 }}>{parts.join(' · ')}</div>
-                          })()}
-                        </div>
-                      )
-                    })}
-                  </div>
-                )}
-
-                {/* Participants */}
-                {showParticipants && (
-                  <ParticipantsBox
-                    tripMembers={tripMembers}
-                    participantIds={participantIds}
-                    allJoined={allJoined}
-                    onSetParticipants={onSetParticipants}
-                    selectedAssignmentId={selectedAssignmentId}
-                    selectedDayId={selectedDayId}
-                    t={t}
-                  />
-                )}
-              </div>
-            )
-          })()}
-    </>
+    </DialogSection>
   )
 }
 
 /**
- * Track colour row (#776) — only for places that carry GPX geometry. Sits next
+ * Track colour (#776) — only for places that carry GPX geometry. Sits next
  * to the stats block rather than inside it: that block bails out on unparsable
  * geometry, and the colour control has no business disappearing with it.
  */
-function TrackColorRow({ place, trackColor, onUpdatePlace, t }: any) {
+function TrackColorRow({ place, trackColor, onUpdatePlace }: { place: Place; trackColor: string; onUpdatePlace?: (placeId: number, data: Partial<Place>) => void }) {
+  const { t } = useTranslation()
   const [open, setOpen] = useState(false)
   return (
-    <div className="bg-surface-hover" style={{ borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-      <button type="button"
-        onClick={() => setOpen(o => !o)}
-        aria-expanded={open}
-        style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8,
-          background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-          <Route size={13} color="#9ca3af" />
-          <span className="text-content-secondary" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500 }}>
-            {t('inspector.trackColor')}
+    <DialogSection className="flex-none" label={t('inspector.trackColor')}>
+      <div className={BOX}>
+        <button type="button" onClick={() => setOpen(o => !o)} aria-expanded={open}
+          className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left transition-colors hover:bg-surface-hover">
+          <span className="h-4 w-4 flex-none rounded-full ring-1 ring-inset ring-edge" style={{ backgroundColor: trackColor }} />
+          <span className="min-w-0 flex-1 truncate font-medium text-content-secondary" style={fs(12, 'body')}>
+            <span className="sr-only">{t('inspector.trackColor')}: </span>
+            {place.route_color ? place.route_color.toUpperCase() : t('inspector.trackColorAuto')}
           </span>
+          {open ? <ChevronUp size={13} className="flex-none text-content-faint" /> : <ChevronDown size={13} className="flex-none text-content-faint" />}
+        </button>
+        {open && (
+          <div className="border-t border-edge-faint px-3 py-2.5">
+            <TrackColorPicker
+              value={place.route_color ?? null}
+              inheritedColor={inheritedTrackColor(place)}
+              onChange={color => onUpdatePlace?.(place.id, { route_color: color })}
+            />
+          </div>
+        )}
+      </div>
+    </DialogSection>
+  )
+}
+
+interface TrackStats {
+  distKm: number
+  hasEle: boolean
+  minEle: number
+  maxEle: number
+  totalUp: number
+  totalDown: number
+  /** The elevation profile as an SVG path in a CHART_W × CHART_H box, empty without elevations. */
+  pathD: string
+}
+
+const CHART_W = 280
+const CHART_H = 60
+
+/** Distance, elevation extremes, climb and descent of a GPX track, or null when it cannot be read. */
+function computeTrackStats(routeGeometry: string): TrackStats | null {
+  try {
+    const pts: number[][] = JSON.parse(routeGeometry)
+    if (!pts || pts.length < 2) return null
+    const hasEle = pts[0].length >= 3
+
+    // Haversine distance
+    const toRad = (d: number) => d * Math.PI / 180
+    let totalDist = 0
+    for (let i = 1; i < pts.length; i++) {
+      const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
+      const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
+      const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
+      totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+    }
+
+    // Elevation stats
+    let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
+    if (hasEle) {
+      for (let i = 0; i < pts.length; i++) {
+        const e = pts[i][2]
+        if (e < minEle) minEle = e
+        if (e > maxEle) maxEle = e
+        if (i > 0) {
+          const diff = e - pts[i - 1][2]
+          if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
+        }
+      }
+    }
+
+    // Elevation profile
+    const elevations = hasEle ? pts.map(p => p[2]) : []
+    let pathD = ''
+    if (elevations.length > 1) {
+      const step = Math.max(1, Math.floor(elevations.length / CHART_W))
+      const sampled = elevations.filter((_, i) => i % step === 0)
+      const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
+      const range = eMax - eMin || 1
+      pathD = sampled.map((e, i) => {
+        const x = (i / (sampled.length - 1)) * CHART_W
+        const y = CHART_H - ((e - eMin) / range) * (CHART_H - 4) - 2
+        return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
+      }).join(' ')
+    }
+    return { distKm: totalDist / 1000, hasEle, minEle, maxEle, totalUp, totalDown, pathD }
+  } catch { return null }
+}
+
+function TrackStatsSection({ place, trackColor, distanceUnit }: { place: Place; trackColor: string; distanceUnit: DistanceUnit }) {
+  const { t } = useTranslation()
+  const stats = computeTrackStats(place.route_geometry)
+  if (!stats) return null
+  return (
+    <DialogSection className="flex-none" label={t('inspector.trackStats')}>
+      <div className={`${BOX} flex flex-col gap-2 px-3 py-2.5`}>
+        <div className="flex flex-wrap items-center gap-1.5">
+          <SoftPill icon={<MapPin size={11} strokeWidth={2} className="flex-none" style={{ color: trackColor }} />}>
+            {formatDistance(stats.distKm, distanceUnit)}
+          </SoftPill>
+          {stats.hasEle && (
+            <>
+              <SoftPill icon={<Mountain size={11} strokeWidth={2} className="flex-none text-success" />}>{formatElevation(stats.maxEle, distanceUnit)}</SoftPill>
+              <SoftPill icon={<Mountain size={11} strokeWidth={2} className="flex-none text-danger" />}>{formatElevation(stats.minEle, distanceUnit)}</SoftPill>
+              <SoftPill>{'↑ '}{formatElevation(stats.totalUp, distanceUnit)}</SoftPill>
+              <SoftPill>{'↓ '}{formatElevation(stats.totalDown, distanceUnit)}</SoftPill>
+            </>
+          )}
         </div>
-        <span
-          className="ring-1 ring-inset ring-black/10 dark:ring-white/15"
-          style={{ width: 20, height: 20, borderRadius: 999, backgroundColor: trackColor, flexShrink: 0 }}
-        />
-      </button>
-      {open && (
-        <div className="border-edge" style={{ borderTopWidth: 1, paddingTop: 8 }}>
-          <TrackColorPicker
-            value={place.route_color ?? null}
-            inheritedColor={inheritedTrackColor(place)}
-            onChange={color => onUpdatePlace?.(place.id, { route_color: color })}
-          />
-        </div>
+        {stats.pathD && (
+          <svg width="100%" viewBox={`0 0 ${CHART_W} ${CHART_H}`} preserveAspectRatio="none" className="block rounded-[6px] bg-surface-tertiary">
+            <defs>
+              <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor={trackColor} stopOpacity="0.25" />
+                <stop offset="100%" stopColor={trackColor} stopOpacity="0.02" />
+              </linearGradient>
+            </defs>
+            <path d={`${stats.pathD} L${CHART_W},${CHART_H} L0,${CHART_H} Z`} fill={`url(#ele-grad-${place.id})`} />
+            <path d={stats.pathD} fill="none" stroke={trackColor} strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
+          </svg>
+        )}
+      </div>
+    </DialogSection>
+  )
+}
+
+interface PlaceExtrasProps {
+  openingHours: string[] | null
+  weekdayIndex: number
+  hoursExpanded: boolean
+  setHoursExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  timeFormat: string
+  place: Place
+  placeFiles: TripFile[]
+  onFileUpload?: (fd: FormData) => Promise<unknown>
+  filesExpanded: boolean
+  setFilesExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  fileInputRef: React.RefObject<HTMLInputElement | null>
+  handleFileUpload: (e: React.ChangeEvent<HTMLInputElement>) => void
+  isUploading: boolean
+  distanceUnit: DistanceUnit
+  onUpdatePlace?: (placeId: number, data: Partial<Place>) => void
+}
+
+/** Opening hours, the track of a GPX place and the files, side by side from sm up when there are hours. */
+function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, place,
+  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading, distanceUnit,
+  onUpdatePlace }: PlaceExtrasProps) {
+  const { t } = useTranslation()
+  const openFile = useOpenFile()
+  const hasHours = !!openingHours && openingHours.length > 0
+  const showFiles = placeFiles.length > 0 || !!onFileUpload
+  if (!hasHours && !place.route_geometry && !showFiles) return null
+  const trackColor = resolveTrackColor(place)
+  return (
+    <div className={`grid flex-none grid-cols-1 items-start gap-3 ${hasHours ? 'sm:grid-cols-2' : ''}`}>
+      {hasHours && (
+        <DialogSection label={t('inspector.openingHours')}>
+          <div className={`${BOX} relative`}>
+            {hoursExpanded ? (
+              <>
+                <div className="flex flex-col py-2 pl-3 pr-10" style={fs(12, 'body')}>
+                  {openingHours.map((line, i) => (
+                    <span key={i} className={`py-[2px] ${i === weekdayIndex ? 'font-semibold text-content' : 'text-content-muted'}`}>
+                      {convertHoursLine(line, timeFormat)}
+                    </span>
+                  ))}
+                </div>
+                <Tooltip label={t('common.collapse')}>
+                  <button type="button" onClick={() => setHoursExpanded(false)} aria-expanded aria-label={t('common.collapse')}
+                    className="absolute right-1.5 top-1.5 grid h-7 w-7 place-items-center rounded-full text-content-faint transition-colors hover:bg-surface-hover hover:text-content">
+                    <ChevronUp size={14} strokeWidth={2} />
+                  </button>
+                </Tooltip>
+              </>
+            ) : (
+              <button type="button" onClick={() => setHoursExpanded(true)} aria-expanded={false}
+                className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left transition-colors hover:bg-surface-hover">
+                <Clock size={13} strokeWidth={2} className="flex-none text-content-faint" />
+                <span className="min-w-0 flex-1 truncate font-medium text-content-secondary" style={fs(12, 'body')}>
+                  {convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours')}
+                </span>
+                <ChevronDown size={13} className="flex-none text-content-faint" />
+              </button>
+            )}
+          </div>
+        </DialogSection>
+      )}
+
+      {place.route_geometry && <TrackColorRow place={place} trackColor={trackColor} onUpdatePlace={onUpdatePlace} />}
+      {place.route_geometry && <TrackStatsSection place={place} trackColor={trackColor} distanceUnit={distanceUnit} />}
+
+      {showFiles && (
+        <DialogSection
+          label={t('inspector.files')}
+          action={onFileUpload && (
+            <label className="inline-flex cursor-pointer items-center gap-1 rounded-full bg-surface-card px-2 py-[2px] font-geist font-semibold text-content-muted shadow-sm transition-colors focus-within:ring-2 focus-within:ring-accent hover:text-content" style={fs(10.5)}>
+              <input ref={fileInputRef} type="file" multiple className="sr-only" onChange={handleFileUpload} />
+              {isUploading ? <span aria-live="polite">…</span> : <><Upload size={11} strokeWidth={2} />{t('common.upload')}</>}
+            </label>
+          )}
+        >
+          <div className={BOX}>
+            <button type="button" onClick={() => setFilesExpanded(f => !f)} aria-expanded={filesExpanded}
+              className="flex w-full items-center gap-2 rounded-[10px] px-3 py-2 text-left transition-colors hover:bg-surface-hover">
+              <FileText size={13} strokeWidth={2} className="flex-none text-content-faint" />
+              <span className="min-w-0 flex-1 truncate font-medium text-content-secondary" style={fs(12, 'body')}>
+                {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
+              </span>
+              {filesExpanded ? <ChevronUp size={13} className="flex-none text-content-faint" /> : <ChevronDown size={13} className="flex-none text-content-faint" />}
+            </button>
+            {filesExpanded && placeFiles.length > 0 && (
+              <div className="flex flex-col gap-0.5 border-t border-edge-faint p-1">
+                {placeFiles.map(f => (
+                  <button type="button" key={f.id} onClick={() => openFile(f)}
+                    className="flex w-full items-center gap-2 rounded-[8px] px-2 py-1.5 text-left transition-colors hover:bg-surface-hover">
+                    {(f.mime_type || '').startsWith('image/')
+                      ? <FileImage size={12} strokeWidth={2} className="flex-none text-content-muted" />
+                      : <File size={12} strokeWidth={2} className="flex-none text-content-muted" />}
+                    <span className="min-w-0 flex-1 truncate text-content-secondary" style={fs(12, 'body')}>{f.original_name}</span>
+                    {f.file_size ? <span className="flex-none tabular-nums text-content-faint" style={fs(11)}>{formatFileSize(f.file_size)}</span> : null}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </DialogSection>
       )}
     </div>
   )
 }
 
-function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
-  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading, distanceUnit,
-  onUpdatePlace }: any) {
-  const trackColor = resolveTrackColor(place)
-  return (
-          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
-          {openingHours && openingHours.length > 0 && (
-            <div className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
-              <button type="button"
-                onClick={() => setHoursExpanded(h => !h)}
-                style={{
-                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                  padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-                  fontFamily: 'inherit',
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                  <Clock size={13} color="#9ca3af" />
-                  <span className="text-content-secondary" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500 }}>
-                    {hoursExpanded ? t('inspector.openingHours') : (convertHoursLine(openingHours[weekdayIndex] || '', timeFormat) || t('inspector.showHours'))}
-                  </span>
-                </div>
-                {hoursExpanded ? <ChevronUp size={13} color="#9ca3af" /> : <ChevronDown size={13} color="#9ca3af" />}
-              </button>
-              {hoursExpanded && (
-                <div style={{ padding: '0 12px 10px' }}>
-                  {openingHours.map((line, i) => (
-                    <div key={i} className={i === weekdayIndex ? 'text-content' : 'text-content-muted'} style={{
-                      fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                      fontWeight: i === weekdayIndex ? 600 : 400,
-                      padding: '2px 0',
-                    }}>{convertHoursLine(line, timeFormat)}</div>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-
-
-          {place.route_geometry && (
-            <TrackColorRow place={place} trackColor={trackColor} onUpdatePlace={onUpdatePlace} t={t} />
-          )}
-
-          {/* GPX Track stats */}
-          {place.route_geometry && (() => {
-            try {
-              const pts: number[][] = JSON.parse(place.route_geometry)
-              if (!pts || pts.length < 2) return null
-              const hasEle = pts[0].length >= 3
-
-              // Haversine distance
-              const toRad = (d: number) => d * Math.PI / 180
-              let totalDist = 0
-              for (let i = 1; i < pts.length; i++) {
-                const [lat1, lng1] = pts[i - 1], [lat2, lng2] = pts[i]
-                const dLat = toRad(lat2 - lat1), dLng = toRad(lng2 - lng1)
-                const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLng / 2) ** 2
-                totalDist += 6371000 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
-              }
-              const distKm = totalDist / 1000
-
-              // Elevation stats
-              let minEle = Infinity, maxEle = -Infinity, totalUp = 0, totalDown = 0
-              if (hasEle) {
-                for (let i = 0; i < pts.length; i++) {
-                  const e = pts[i][2]
-                  if (e < minEle) minEle = e
-                  if (e > maxEle) maxEle = e
-                  if (i > 0) {
-                    const diff = e - pts[i - 1][2]
-                    if (diff > 0) totalUp += diff; else totalDown += Math.abs(diff)
-                  }
-                }
-              }
-
-              // Elevation profile SVG
-              const chartW = 280, chartH = 60
-              const elevations = hasEle ? pts.map(p => p[2]) : []
-              let pathD = ''
-              if (elevations.length > 1) {
-                const step = Math.max(1, Math.floor(elevations.length / chartW))
-                const sampled = elevations.filter((_, i) => i % step === 0)
-                const eMin = Math.min(...sampled), eMax = Math.max(...sampled)
-                const range = eMax - eMin || 1
-                pathD = sampled.map((e, i) => {
-                  const x = (i / (sampled.length - 1)) * chartW
-                  const y = chartH - ((e - eMin) / range) * (chartH - 4) - 2
-                  return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`
-                }).join(' ')
-              }
-
-              return (
-                <div className="bg-surface-hover" style={{ borderRadius: 10, padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                    <TrendingUp size={13} color="#9ca3af" />
-                    <span className="text-content-secondary" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500 }}>{t('inspector.trackStats')}</span>
-                  </div>
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-                    <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}>
-                      <MapPin size={12} color={trackColor} />
-                      {formatDistance(distKm, distanceUnit)}
-                    </div>
-                    {hasEle && (
-                      <>
-                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}>
-                          <Mountain size={12} color="#22c55e" />
-                          {formatElevation(maxEle, distanceUnit)}
-                        </div>
-                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}>
-                          <Mountain size={12} color="#ef4444" />
-                          {formatElevation(minEle, distanceUnit)}
-                        </div>
-                        <div className="text-content-muted" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>
-                          ↑{formatElevation(totalUp, distanceUnit)} &nbsp;↓{formatElevation(totalDown, distanceUnit)}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {pathD && (
-                    <svg width="100%" viewBox={`0 0 ${chartW} ${chartH}`} preserveAspectRatio="none" className="bg-surface-tertiary" style={{ display: 'block', borderRadius: 6 }}>
-                      <defs>
-                        <linearGradient id={`ele-grad-${place.id}`} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="0%" stopColor={trackColor} stopOpacity="0.25" />
-                          <stop offset="100%" stopColor={trackColor} stopOpacity="0.02" />
-                        </linearGradient>
-                      </defs>
-                      <path d={`${pathD} L${chartW},${chartH} L0,${chartH} Z`} fill={`url(#ele-grad-${place.id})`} />
-                      <path d={pathD} fill="none" stroke={trackColor} strokeWidth="1.5" vectorEffect="non-scaling-stroke" />
-                    </svg>
-                  )}
-                </div>
-              )
-            } catch { return null }
-          })()}
-
-          {/* Files section */}
-          {(placeFiles.length > 0 || onFileUpload) && (
-            <div className="bg-surface-hover" style={{ borderRadius: 10, overflow: 'hidden' }}>
-              <div style={{ display: 'flex', alignItems: 'center', padding: '8px 12px', gap: 6 }}>
-                <button type="button"
-                  onClick={() => setFilesExpanded(f => !f)}
-                  style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', textAlign: 'left' }}
-                >
-                  <FileText size={13} color="#9ca3af" />
-                  <span className="text-content-secondary" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500 }}>
-                    {placeFiles.length > 0 ? t('inspector.filesCount', { count: placeFiles.length }) : t('inspector.files')}
-                  </span>
-                  {filesExpanded ? <ChevronUp size={12} color="#9ca3af" /> : <ChevronDown size={12} color="#9ca3af" />}
-                </button>
-                {onFileUpload && (
-                  <label className="text-content-muted bg-surface-tertiary" style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', padding: '2px 6px', borderRadius: 6 }}>
-                    <input ref={fileInputRef} type="file" multiple style={{ display: 'none' }} onChange={handleFileUpload} />
-                    {isUploading ? (
-                      <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))' }}>…</span>
-                    ) : (
-                      <><Upload size={11} strokeWidth={2} /> {t('common.upload')}</>
-                    )}
-                  </label>
-                )}
-              </div>
-              {filesExpanded && placeFiles.length > 0 && (
-                <div style={{ padding: '0 12px 10px', display: 'flex', flexDirection: 'column', gap: 4 }}>
-                  {placeFiles.map(f => (
-                    <button type="button" key={f.id} onClick={() => openFile(f.url).catch(() => {})} style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none', cursor: 'pointer', background: 'none', border: 'none', width: '100%', textAlign: 'left' }}>
-                      {(f.mime_type || '').startsWith('image/') ? <FileImage size={12} color="#6b7280" /> : <File size={12} color="#6b7280" />}
-                      <span className="text-content-secondary" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{f.original_name}</span>
-                      {f.file_size && <span className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', flexShrink: 0 }}>{formatFileSize(f.file_size)}</span>}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          )}
-          </div>
-  )
-}
diff --git a/client/src/components/Planner/PlacesBulkCategoryModal.test.tsx b/client/src/components/Planner/PlacesBulkCategoryModal.test.tsx
new file mode 100644
index 000000000..ce4b6aac0
--- /dev/null
+++ b/client/src/components/Planner/PlacesBulkCategoryModal.test.tsx
@@ -0,0 +1,51 @@
+// FE-PLANNER-BULKCAT-001 to FE-PLANNER-BULKCAT-004
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import { buildCategory } from '../../../tests/helpers/factories';
+import { PlacesBulkCategoryModal, CategoryTile } from './PlacesBulkCategoryModal';
+
+const CATS = [buildCategory({ id: 1, name: 'Museum', color: '#3b82f6' }), buildCategory({ id: 2, name: 'Food', color: null })];
+
+describe('PlacesBulkCategoryModal', () => {
+  it('FE-PLANNER-BULKCAT-001: names the dialog and says how many places it changes', () => {
+    render(<PlacesBulkCategoryModal count={3} categories={CATS} onPick={vi.fn()} onClose={vi.fn()} />);
+    expect(screen.getByRole('dialog', { name: 'Change category' })).toBeInTheDocument();
+    expect(screen.getByText('3 selected')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-BULKCAT-002: a category row applies that category', () => {
+    const onPick = vi.fn();
+    render(<PlacesBulkCategoryModal count={1} categories={CATS} onPick={onPick} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Food' }));
+    expect(onPick).toHaveBeenCalledWith(2);
+  });
+
+  it('FE-PLANNER-BULKCAT-003: "No Category" clears it, even with no categories to offer', () => {
+    const onPick = vi.fn();
+    render(<PlacesBulkCategoryModal count={1} categories={[]} onPick={onPick} onClose={vi.fn()} />);
+    fireEvent.click(screen.getByRole('button', { name: 'No Category' }));
+    expect(onPick).toHaveBeenCalledWith(null);
+  });
+
+  it('FE-PLANNER-BULKCAT-004: Cancel, the X and Escape close without picking', () => {
+    const onPick = vi.fn();
+    const onClose = vi.fn();
+    render(<PlacesBulkCategoryModal count={1} categories={CATS} onPick={onPick} onClose={onClose} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledTimes(3);
+    expect(onPick).not.toHaveBeenCalled();
+  });
+});
+
+describe('CategoryTile', () => {
+  it('FE-PLANNER-BULKCAT-005: tints with the category colour, and falls back to the neutral pin without one', () => {
+    const { container, rerender } = render(<CategoryTile category={{ icon: 'MapPin', color: '#3b82f6' }} size={20} />);
+    const tile = container.firstChild as HTMLElement;
+    expect(tile.style.width).toBe('20px');
+    expect(tile.style.background).toContain('color-mix');
+
+    rerender(<CategoryTile />);
+    expect((container.firstChild as HTMLElement).className).toContain('bg-surface-tertiary');
+  });
+});
diff --git a/client/src/components/Planner/PlacesBulkCategoryModal.tsx b/client/src/components/Planner/PlacesBulkCategoryModal.tsx
index facf531a2..93629b64d 100644
--- a/client/src/components/Planner/PlacesBulkCategoryModal.tsx
+++ b/client/src/components/Planner/PlacesBulkCategoryModal.tsx
@@ -1,7 +1,9 @@
-import { createPortal } from 'react-dom'
-import { X, MapPin } from 'lucide-react'
+import { useId } from 'react'
+import { MapPin, Tag } from 'lucide-react'
 import { getCategoryIcon } from '../shared/categoryIcons'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 import { useTranslation } from '../../i18n'
+import { tintOf } from './planParts'
 import type { Category } from '../../types'
 
 interface PlacesBulkCategoryModalProps {
@@ -11,56 +13,71 @@ interface PlacesBulkCategoryModalProps {
   onClose: () => void
 }
 
-const rowStyle: React.CSSProperties = {
-  display: 'flex', alignItems: 'center', gap: 9, width: '100%',
-  padding: '8px 10px', borderRadius: 7, border: 'none', cursor: 'pointer',
-  fontFamily: 'inherit', fontSize: 'calc(13px * var(--fs-scale-body, 1))', textAlign: 'left',
+/**
+ * A category's icon on a wash of its colour, the square the category lists of the
+ * places column are made of. Without a category it is the neutral pin.
+ */
+export function CategoryTile({ category, size = 24 }: { category?: Pick<Category, 'icon' | 'color'> | null; size?: number }) {
+  if (!category) {
+    return (
+      <span className="grid flex-none place-items-center rounded-[7px] bg-surface-tertiary text-content-faint" style={{ width: size, height: size }}>
+        <MapPin size={Math.round(size * 0.5)} strokeWidth={2.2} />
+      </span>
+    )
+  }
+  const Icon = getCategoryIcon(category.icon)
+  const color = category.color || 'var(--text-muted)'
+  return (
+    <span className="grid flex-none place-items-center rounded-[7px]" style={{ width: size, height: size, background: tintOf(color, 16) }}>
+      <Icon size={Math.round(size * 0.5)} strokeWidth={2.2} style={{ color }} />
+    </span>
+  )
 }
-const hoverOn = (e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'var(--bg-hover)' }
-const hoverOff = (e: React.MouseEvent<HTMLButtonElement>) => { e.currentTarget.style.background = 'transparent' }
+
+const ROW = 'flex w-full items-center gap-2.5 rounded-[10px] px-2 py-1.5 text-left hover:bg-surface-hover'
 
 /**
  * Popup for the Places selection toolbar: pick one category to apply to every
- * currently-selected place. Reuses the category swatch styling from the header's
- * filter dropdown; clicking a row applies immediately and closes.
+ * currently-selected place. Clicking a row applies it at once and closes.
  */
 export function PlacesBulkCategoryModal({ count, categories, onPick, onClose }: PlacesBulkCategoryModalProps) {
   const { t } = useTranslation()
-  return createPortal(
-    <div
-      role="presentation"
-      onClick={e => { if (e.target === e.currentTarget) onClose() }}
-      style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+  const titleId = useId()
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={titleId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Tag size={20} strokeWidth={1.9} className="text-content" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={titleId}
+          onClose={onClose}
+          title={t('places.changeCategory')}
+          sub={t('places.selectionCount', { count })}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+        </DialogFooter>
+      )}
     >
-      <div className="bg-surface-card text-content" style={{
-        borderRadius: 14, padding: '18px 20px', width: '100%', maxWidth: 380,
-        boxShadow: '0 16px 48px rgba(0,0,0,0.22)', border: '1px solid var(--border-faint)', fontFamily: 'inherit',
-      }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-          <span style={{ fontWeight: 600, fontSize: 14 }}>{t('places.changeCategory')}</span>
-          <button type="button" onClick={onClose} aria-label={t('common.close')} className="text-content-muted" style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, display: 'flex' }}>
-            <X size={15} strokeWidth={2} />
+      <div className="flex flex-col gap-0.5 rounded-[14px] border border-edge-faint bg-surface-secondary p-1.5">
+        {categories.map(c => (
+          <button type="button" key={c.id} onClick={() => onPick(c.id)} className={ROW} style={fs(13, 'body')}>
+            <CategoryTile category={c} size={28} />
+            <span className="min-w-0 flex-1 truncate font-medium text-content">{c.name}</span>
           </button>
-        </div>
-        <p className="text-content-faint" style={{ fontSize: 12, marginBottom: 12 }}>{t('places.selectionCount', { count })}</p>
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, maxHeight: 300, overflowY: 'auto' }}>
-          {categories.map(c => {
-            const CatIcon = getCategoryIcon(c.icon)
-            return (
-              <button type="button" key={c.id} onClick={() => onPick(c.id)} className="text-content bg-transparent" style={rowStyle} onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
-                <CatIcon size={14} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
-                <span style={{ flex: 1 }}>{c.name}</span>
-              </button>
-            )
-          })}
-          <button type="button" onClick={() => onPick(null)} className="text-content-muted bg-transparent" style={{ ...rowStyle, borderTop: categories.length > 0 ? '1px solid var(--border-faint)' : 'none', marginTop: categories.length > 0 ? 2 : 0 }} onMouseEnter={hoverOn} onMouseLeave={hoverOff}>
-            <MapPin size={14} strokeWidth={2} color="var(--text-faint)" />
-            <span style={{ flex: 1 }}>{t('places.noCategory')}</span>
-          </button>
-        </div>
+        ))}
+        {categories.length > 0 && <div className="mx-2 my-1 h-px bg-edge-faint" />}
+        <button type="button" onClick={() => onPick(null)} className={ROW} style={fs(13, 'body')}>
+          <CategoryTile size={28} />
+          <span className="min-w-0 flex-1 truncate font-medium text-content-muted">{t('places.noCategory')}</span>
+        </button>
       </div>
-    </div>,
-    document.body,
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/PlacesSidebar.test.tsx b/client/src/components/Planner/PlacesSidebar.test.tsx
index ae82a874f..ae730fb8f 100644
--- a/client/src/components/Planner/PlacesSidebar.test.tsx
+++ b/client/src/components/Planner/PlacesSidebar.test.tsx
@@ -50,12 +50,35 @@ beforeEach(() => {
   seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
 });
 
-/** The filter is one select now: open it, then pick the option by its label. */
-async function pickFilter(user: ReturnType<typeof userEvent.setup>, label: string) {
-  await user.click(within(screen.getByTestId('places-filter')).getByRole('button'));
-  await user.click(await screen.findByRole('button', { name: new RegExp(`^${label}`) }));
+type User = ReturnType<typeof userEvent.setup>;
+
+/** The "show" choice sits behind its dropdown: open it, then pick the option by its label (the count follows it). */
+async function pickFilter(user: User, label: string) {
+  if (!screen.queryByTestId('places-filter')) await user.click(screen.getByRole('button', { name: 'Show' }));
+  await user.click(within(screen.getByTestId('places-filter')).getByRole('button', { name: new RegExp(`^${label}`) }));
 }
 
+/** The categories open from their icon beside the show dropdown. */
+async function openCategories(user: User) {
+  const trigger = screen.getByRole('button', { name: 'Categories' });
+  if (trigger.getAttribute('aria-expanded') !== 'true') await user.click(trigger);
+}
+
+/** The rating floors open from the star beside the categories. */
+async function openRating(user: User) {
+  const trigger = screen.getByRole('button', { name: 'Filter by rating' });
+  if (trigger.getAttribute('aria-expanded') !== 'true') await user.click(trigger);
+}
+
+/** File and list import sit behind one Import button now. */
+async function openImportMenu(user: User, item: RegExp) {
+  await user.click(screen.getByRole('button', { name: 'Import Places' }));
+  await user.click(await screen.findByRole('button', { name: item }));
+}
+
+/** A dialog's own button, apart from the sidebar's buttons of the same name. */
+const inDialog = (name: RegExp) => within(screen.getByRole('dialog')).getByRole('button', { name });
+
 describe('PlacesSidebar', () => {
   it('FE-COMP-PLACES-001: renders without crashing', () => {
     render(<PlacesSidebar {...defaultProps} />);
@@ -64,7 +87,7 @@ describe('PlacesSidebar', () => {
 
   it('FE-COMP-PLACES-002: shows search input', () => {
     render(<PlacesSidebar {...defaultProps} />);
-    const searchInput = screen.getByPlaceholderText(/Search places/i);
+    const searchInput = screen.getByPlaceholderText('Search');
     expect(searchInput).toBeInTheDocument();
   });
 
@@ -143,7 +166,7 @@ describe('PlacesSidebar', () => {
       buildPlace({ name: 'Sacre Coeur' }),
     ];
     render(<PlacesSidebar {...defaultProps} places={places} />);
-    const searchInput = screen.getByPlaceholderText(/Search places/i);
+    const searchInput = screen.getByPlaceholderText('Search');
     await user.type(searchInput, 'Arc');
     expect(screen.getByText('Arc de Triomphe')).toBeInTheDocument();
     expect(screen.queryByText('Sacre Coeur')).not.toBeInTheDocument();
@@ -153,7 +176,7 @@ describe('PlacesSidebar', () => {
     const user = userEvent.setup();
     const places = [buildPlace({ name: 'Museum of Art' })];
     render(<PlacesSidebar {...defaultProps} places={places} />);
-    const searchInput = screen.getByPlaceholderText(/Search places/i);
+    const searchInput = screen.getByPlaceholderText('Search');
     await user.type(searchInput, 'museum');
     expect(screen.getByText('Museum of Art')).toBeInTheDocument();
   });
@@ -190,7 +213,7 @@ describe('PlacesSidebar', () => {
     ];
     const { rerender } = render(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={null} />);
 
-    await user.type(screen.getByPlaceholderText(/Search places/i), 'Visible');
+    await user.type(screen.getByPlaceholderText('Search'), 'Visible');
     scrollIntoView.mockClear();
     rerender(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={42} />);
 
@@ -201,8 +224,8 @@ describe('PlacesSidebar', () => {
   it('FE-COMP-PLACES-010: shows place count', () => {
     const places = [buildPlace({ name: 'P1' }), buildPlace({ name: 'P2' }), buildPlace({ name: 'P3' })];
     render(<PlacesSidebar {...defaultProps} places={places} />);
-    // i18n: places.count = "{count} places"
-    expect(screen.getByText(/3 places/i)).toBeInTheDocument();
+    // The count rides on the show dropdown in the head.
+    expect(screen.getByRole('button', { name: 'Show' })).toHaveTextContent('3');
   });
 
   it('FE-COMP-PLACES-011: empty list shows no place names', () => {
@@ -220,7 +243,7 @@ describe('PlacesSidebar', () => {
     const user = userEvent.setup();
     const places = [buildPlace({ name: 'Place A' }), buildPlace({ name: 'Place B' })];
     render(<PlacesSidebar {...defaultProps} places={places} />);
-    const searchInput = screen.getByPlaceholderText(/Search places/i);
+    const searchInput = screen.getByPlaceholderText('Search');
     await user.type(searchInput, 'Place A');
     expect(screen.queryByText('Place B')).not.toBeInTheDocument();
     await user.clear(searchInput);
@@ -411,7 +434,7 @@ describe('Search', () => {
     const place = buildPlace({ name: 'UK Office', address: '10 Downing Street' });
     const other = buildPlace({ name: 'Other Place', address: null });
     render(<PlacesSidebar {...defaultProps} places={[place, other]} />);
-    await user.type(screen.getByPlaceholderText(/Search places/i), 'Downing');
+    await user.type(screen.getByPlaceholderText('Search'), 'Downing');
     expect(screen.getByText('UK Office')).toBeInTheDocument();
     expect(screen.queryByText('Other Place')).not.toBeInTheDocument();
   });
@@ -420,37 +443,40 @@ describe('Search', () => {
     const user = userEvent.setup();
     const places = [buildPlace({ name: 'Paris Hotel' }), buildPlace({ name: 'Rome Cafe' })];
     render(<PlacesSidebar {...defaultProps} places={places} />);
-    const searchInput = screen.getByPlaceholderText(/Search places/i);
+    const searchInput = screen.getByPlaceholderText('Search');
     await user.type(searchInput, 'Paris');
     expect(screen.queryByText('Rome Cafe')).not.toBeInTheDocument();
-    // X clear button should appear
-    const clearBtn = document.querySelector('button svg[data-lucide="x"]')?.closest('button')
-      ?? document.querySelector('input[type="text"] ~ button')
-      ?? screen.getByRole('button', { name: '' });
-    // Find the X button by querying near the search input
-    const inputWrapper = searchInput.closest('div');
-    const xBtn = inputWrapper?.querySelector('button');
-    expect(xBtn).toBeTruthy();
-    await user.click(xBtn!);
+    // The X that clears it carries its own name now.
+    await user.click(screen.getByRole('button', { name: 'Clear search' }));
+    expect(searchInput).toHaveValue('');
     expect(screen.getByText('Rome Cafe')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Clear search' })).not.toBeInTheDocument();
   });
 });
 
 // ── Category filter dropdown ──────────────────────────────────────────────────
 
 describe('Category filter dropdown', () => {
-  it('FE-PLANNER-SIDEBAR-022: category dropdown renders when categories are present', () => {
+  it('FE-PLANNER-SIDEBAR-022: the category filter is offered when categories are present', async () => {
+    const user = userEvent.setup();
     const cat = buildCategory({ name: 'Museum', color: '#3b82f6' });
-    render(<PlacesSidebar {...defaultProps} categories={[cat]} />);
-    expect(screen.getByText(/All Categories/i)).toBeInTheDocument();
+    const { unmount } = render(<PlacesSidebar {...defaultProps} categories={[cat]} />);
+    await openCategories(user);
+    expect(screen.getByRole('button', { name: 'Museum' })).toBeInTheDocument();
+    unmount();
+
+    // Without categories there is nothing to pick, so there is no category filter either.
+    render(<PlacesSidebar {...defaultProps} categories={[]} />);
+    expect(screen.queryByRole('button', { name: 'Categories' })).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-SIDEBAR-023: clicking category dropdown opens options', async () => {
+  it('FE-PLANNER-SIDEBAR-023: opening the category filter lists the categories', async () => {
     const user = userEvent.setup();
     const cat = buildCategory({ name: 'Museum', color: '#3b82f6' });
     render(<PlacesSidebar {...defaultProps} categories={[cat]} />);
-    await user.click(screen.getByText(/All Categories/i));
-    expect(screen.getByText('Museum')).toBeInTheDocument();
+    expect(screen.queryByText('Museum')).not.toBeInTheDocument();
+    await openCategories(user);
+    expect(screen.getByRole('button', { name: 'Museum' })).toHaveAttribute('aria-pressed', 'false');
   });
 
   it('FE-PLANNER-SIDEBAR-024: selecting a category filters places', async () => {
@@ -460,11 +486,12 @@ describe('Category filter dropdown', () => {
     const withCat = buildPlace({ name: 'Central Park', category_id: cat.id, address: 'New York, NY' });
     const noCat = buildPlace({ name: 'Random Shop', category_id: null, address: 'London, UK' });
     render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
-    await user.click(screen.getByText(/All Categories/i));
-    // Click the category option in the dropdown (only one 'Park' now — no subtitle conflict)
+    await openCategories(user);
+    // Click the category option in the panel (only one 'Park' now — no subtitle conflict)
     await user.click(screen.getByText('Park'));
     expect(screen.getByText('Central Park')).toBeInTheDocument();
     expect(screen.queryByText('Random Shop')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Park' })).toHaveAttribute('aria-pressed', 'true');
   });
 
   it('FE-PLANNER-SIDEBAR-025: "Clear filter" button appears when filter active and clears it', async () => {
@@ -474,7 +501,7 @@ describe('Category filter dropdown', () => {
     const withCat = buildPlace({ name: 'Art Museum', category_id: cat.id, address: 'Paris' });
     const noCat = buildPlace({ name: 'Untagged Place', category_id: null, address: 'Berlin' });
     render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
-    await user.click(screen.getByText(/All Categories/i));
+    await openCategories(user);
     await user.click(screen.getByText('Museum'));
     expect(screen.queryByText('Untagged Place')).not.toBeInTheDocument();
     // Clear filter button should appear
@@ -488,12 +515,12 @@ describe('Category filter dropdown', () => {
     const cat1 = buildCategory({ name: 'Museum', color: '#3b82f6' });
     const cat2 = buildCategory({ name: 'Park', color: '#22c55e' });
     render(<PlacesSidebar {...defaultProps} categories={[cat1, cat2]} />);
-    await user.click(screen.getByText(/All Categories/i));
+    await openCategories(user);
     const museumOpts = screen.getAllByText('Museum');
     await user.click(museumOpts[museumOpts.length - 1]);
     const parkOpts = screen.getAllByText('Park');
     await user.click(parkOpts[parkOpts.length - 1]);
-    expect(screen.getByText(/2 categories/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Categories' })).toHaveTextContent('2');
   });
 
   it('FE-PLANNER-SIDEBAR-047: category filter survives unmount/remount (#1541)', async () => {
@@ -502,15 +529,16 @@ describe('Category filter dropdown', () => {
     const withCat = buildPlace({ name: 'Grand Palace', category_id: cat.id, address: 'Vienna' });
     const noCat = buildPlace({ name: 'Street Market', category_id: null, address: 'Lisbon' });
     const { unmount } = render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
-    await user.click(screen.getByText(/All Categories/i));
+    await openCategories(user);
     await user.click(screen.getByText('Hotel'));
     expect(screen.queryByText('Street Market')).not.toBeInTheDocument();
     // Switching planner tabs unmounts the sidebar; the filter must come back
     // both applied and visible instead of silently sticking on the map only.
     unmount();
     render(<PlacesSidebar {...defaultProps} places={[withCat, noCat]} categories={[cat]} />);
-    expect(screen.queryByText(/All Categories/i)).not.toBeInTheDocument();
-    expect(screen.getByText('Hotel')).toBeInTheDocument();
+    // Visible as the badge on the category filter, with its list closed.
+    expect(screen.getByRole('button', { name: 'Categories' })).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.getByRole('button', { name: 'Categories' })).toHaveTextContent('1');
     expect(screen.getByText('Grand Palace')).toBeInTheDocument();
     expect(screen.queryByText('Street Market')).not.toBeInTheDocument();
   });
@@ -536,33 +564,30 @@ describe('Place list interaction', () => {
   it('FE-PLANNER-SIDEBAR-027: "+" assign button appears when selectedDayId set and place not in day', () => {
     const place = buildPlace({ name: 'Unassigned Place' });
     render(<PlacesSidebar {...defaultProps} places={[place]} selectedDayId={5} assignments={{}} />);
-    // Plus button should be visible next to the place
-    const plusBtns = screen.getAllByRole('button');
-    const plusBtn = plusBtns.find(b => b.querySelector('svg'));
-    expect(plusBtn).toBeTruthy();
-    // The place row itself should be in the DOM
-    expect(screen.getByText('Unassigned Place')).toBeInTheDocument();
+    // Plus button should be visible next to the place, named like the menu entry it mirrors
+    const placeRow = screen.getByRole('option', { name: 'Unassigned Place' });
+    expect(within(placeRow).getByRole('button', { name: '+ Day' })).toBeInTheDocument();
   });
 
   it('FE-PLANNER-SIDEBAR-028: clicking "+" assign button calls onAssignToDay with placeId', async () => {
     const user = userEvent.setup();
     const onAssignToDay = vi.fn();
     const place = buildPlace({ id: 99, name: 'Place To Assign' });
-    render(<PlacesSidebar {...defaultProps} places={[place]} selectedDayId={5} assignments={{}} onAssignToDay={onAssignToDay} />);
-    // Find the + button inside the place row (small inline button)
-    const placeRow = screen.getByText('Place To Assign').closest('div[draggable]')!;
-    const plusBtn = placeRow.querySelector('button')!;
-    await user.click(plusBtn);
+    const onPlaceClick = vi.fn();
+    render(<PlacesSidebar {...defaultProps} places={[place]} selectedDayId={5} assignments={{}} onAssignToDay={onAssignToDay} onPlaceClick={onPlaceClick} />);
+    // The + button inside the place row acts on its own: it does not select the row as well.
+    const placeRow = screen.getByText('Place To Assign').closest('div[draggable]') as HTMLElement;
+    await user.click(within(placeRow).getByRole('button', { name: '+ Day' }));
     expect(onAssignToDay).toHaveBeenCalledWith(99);
+    expect(onPlaceClick).not.toHaveBeenCalled();
   });
 
   it('FE-PLANNER-SIDEBAR-029: "+" button not shown when place already assigned to selectedDay', () => {
     const place = buildPlace({ id: 55, name: 'Already Assigned' });
     const assignments = { '5': [buildAssignment({ place, day_id: 5 })] };
     render(<PlacesSidebar {...defaultProps} places={[place]} selectedDayId={5} assignments={assignments} />);
-    const placeRow = screen.getByText('Already Assigned').closest('div[draggable]')!;
-    const plusBtn = placeRow.querySelector('button');
-    expect(plusBtn).toBeNull();
+    const placeRow = screen.getByText('Already Assigned').closest('div[draggable]') as HTMLElement;
+    expect(within(placeRow).queryByRole('button', { name: '+ Day' })).not.toBeInTheDocument();
   });
 
   it('FE-PLANNER-SIDEBAR-030: place address shown as subtitle', () => {
@@ -577,12 +602,16 @@ describe('Place list interaction', () => {
     expect(screen.queryByText(/Add Place\/Activity/i)).not.toBeInTheDocument();
     expect(screen.queryByText(/GPX/i)).not.toBeInTheDocument();
     expect(screen.queryByText(/Google List/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Import Places' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Select' })).not.toBeInTheDocument();
+    // Filtering is for everyone.
+    expect(screen.getByRole('button', { name: 'Show' })).toBeInTheDocument();
   });
 
   it('FE-PLANNER-SIDEBAR-032: place count shows singular form for 1 place', () => {
     const place = buildPlace({ name: 'Solo Place' });
     render(<PlacesSidebar {...defaultProps} places={[place]} />);
-    expect(screen.getByText('1 place')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Show' })).toHaveTextContent('1');
   });
 });
 
@@ -662,7 +691,7 @@ describe('GPX import', () => {
   it('FE-PLANNER-SIDEBAR-038: "Import file" button opens the file import modal', async () => {
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} />);
-    await user.click(screen.getByText(/Import file/i));
+    await openImportMenu(user, /^Import file$/);
     expect(await screen.findByText(/\.gpx.*\.kml.*\.kmz/i)).toBeInTheDocument();
   });
 
@@ -674,14 +703,14 @@ describe('GPX import', () => {
     (window as any).__addToast = addToast;
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} pushUndo={vi.fn()} />);
-    await user.click(screen.getByText(/Import file/i));
+    await openImportMenu(user, /^Import file$/);
     const fileInput = document.querySelector('input[type="file"][accept=".gpx,.kml,.kmz"]') as HTMLInputElement;
     expect(fileInput).toBeTruthy();
     const file = new File(['track data'], 'route.gpx', { type: 'application/gpx+xml' });
     await act(async () => {
       fireEvent.change(fileInput, { target: { files: [file] } });
     });
-    await user.click(screen.getByRole('button', { name: /^import$/i }));
+    await user.click(inDialog(/^import$/i));
     await waitFor(() => {
       expect(addToast).toHaveBeenCalledWith(
         expect.stringContaining('2'),
@@ -699,16 +728,16 @@ describe('Google Maps list import', () => {
   it('FE-PLANNER-SIDEBAR-040: "Google List" button opens the URL dialog', async () => {
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} />);
-    await user.click(screen.getByText(/List Import/i));
+    await openImportMenu(user, /^List Import$/);
     expect(await screen.findByPlaceholderText(/maps\.app\.goo\.gl/i)).toBeInTheDocument();
   });
 
   it('FE-PLANNER-SIDEBAR-041: import button disabled when URL input is empty', async () => {
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} />);
-    await user.click(screen.getByText(/List Import/i));
+    await openImportMenu(user, /^List Import$/);
     await screen.findByPlaceholderText(/maps\.app\.goo\.gl/i);
-    const importBtn = screen.getByRole('button', { name: /^Import$/i });
+    const importBtn = inDialog(/^Import$/i);
     expect(importBtn).toBeDisabled();
   });
 
@@ -724,10 +753,10 @@ describe('Google Maps list import', () => {
     (window as any).__addToast = addToast;
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} pushUndo={vi.fn()} />);
-    await user.click(screen.getByText(/List Import/i));
+    await openImportMenu(user, /^List Import$/);
     const urlInput = await screen.findByPlaceholderText(/maps\.app\.goo\.gl/i);
     await user.type(urlInput, 'https://maps.app.goo.gl/abc123');
-    await user.click(screen.getByRole('button', { name: /^Import$/i }));
+    await user.click(inDialog(/^Import$/i));
     await waitFor(() => {
       expect(addToast).toHaveBeenCalledWith(
         expect.stringContaining('3'),
@@ -753,7 +782,7 @@ describe('Google Maps list import', () => {
     (window as any).__addToast = addToast;
     const user = userEvent.setup();
     render(<PlacesSidebar {...defaultProps} pushUndo={vi.fn()} />);
-    await user.click(screen.getByText(/List Import/i));
+    await openImportMenu(user, /^List Import$/);
     const urlInput = await screen.findByPlaceholderText(/maps\.app\.goo\.gl/i);
     await user.type(urlInput, 'https://maps.app.goo.gl/xyz{Enter}');
     await waitFor(() => {
@@ -832,8 +861,8 @@ describe('track colour legend (#776)', () => {
     render(<PlacesSidebar {...defaultProps} places={places} />);
     expect(screen.getByText('Meh Place')).toBeInTheDocument();
 
-    await user.click(screen.getByLabelText('Filter by rating'));
-    await user.click(screen.getByText('4+'));
+    await openRating(user);
+    await user.click(screen.getByRole('button', { name: /4\+/ }));
 
     expect(screen.getByText('Loved Place')).toBeInTheDocument();
     expect(screen.queryByText('Meh Place')).not.toBeInTheDocument();
@@ -878,3 +907,210 @@ describe('picking a place up with a finger (#1616)', () => {
     }
   });
 });
+
+// ── The decluttered head: one filter panel, chips for what is in force ─────────
+
+describe('filter panel and chips', () => {
+  it('FE-PLANNER-SIDEBAR-056: a filter list closes on Escape and on a click outside it', async () => {
+    const user = userEvent.setup();
+    render(<PlacesSidebar {...defaultProps} places={[buildPlace({ name: 'Somewhere' })]} />);
+    const trigger = screen.getByRole('button', { name: 'Show' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    await user.keyboard('{Escape}');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    expect(trigger).toHaveFocus();
+
+    await user.click(trigger);
+    await user.click(screen.getByPlaceholderText('Search'));
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('FE-PLANNER-SIDEBAR-057: each filter says what it narrows to and lifts again', async () => {
+    const user = userEvent.setup();
+    const cat = buildCategory({ name: 'Museum', color: '#3b82f6' });
+    const places = [
+      buildPlace({ id: 1, name: 'Rated Museum', category_id: cat.id, rating_avg: 4.5, rating_count: 2, address: 'A' }),
+      buildPlace({ id: 2, name: 'Plain Spot', category_id: null, address: 'B' }),
+    ];
+    render(<PlacesSidebar {...defaultProps} places={places} categories={[cat]} />);
+    const categoriesBtn = screen.getByRole('button', { name: 'Categories' });
+    const ratingBtn = screen.getByRole('button', { name: 'Filter by rating' });
+    expect(categoriesBtn).not.toHaveTextContent(/\d/);
+
+    await pickFilter(user, 'Unplanned');
+    expect(screen.getByRole('button', { name: 'Show' })).toHaveTextContent('Unplanned');
+    await openCategories(user);
+    await user.click(screen.getByRole('button', { name: 'Museum' }));
+    await user.keyboard('{Escape}');
+    await openRating(user);
+    await user.click(screen.getByRole('button', { name: /4\+/ }));
+    expect(categoriesBtn).toHaveTextContent('1');
+    expect(ratingBtn).toHaveTextContent('4+');
+
+    expect(screen.getByText('Rated Museum')).toBeInTheDocument();
+    expect(screen.queryByText('Plain Spot')).not.toBeInTheDocument();
+
+    await pickFilter(user, 'All');
+    await openCategories(user);
+    await user.click(screen.getByRole('button', { name: 'Clear filter' }));
+    await user.keyboard('{Escape}');
+    await openRating(user);
+    await user.click(screen.getByRole('button', { name: /^All$/ }));
+
+    expect(screen.getByText('Plain Spot')).toBeInTheDocument();
+    expect(useTripStore.getState().placesFilter).toBe('all');
+    expect(useTripStore.getState().placesCategoryFilter.size).toBe(0);
+    expect(categoriesBtn).not.toHaveTextContent(/\d/);
+    expect(ratingBtn).not.toHaveTextContent('+');
+  });
+
+  it('FE-PLANNER-SIDEBAR-058: the counts beside each choice ignore the rating floor', async () => {
+    const user = userEvent.setup();
+    const planned = buildPlace({ id: 1, name: 'Planned One', rating_avg: 1, rating_count: 1 });
+    const loose = buildPlace({ id: 2, name: 'Loose One' });
+    const assignments = { '1': [buildAssignment({ place: planned, day_id: 1 })] };
+    render(<PlacesSidebar {...defaultProps} places={[planned, loose]} assignments={assignments} />);
+    await openRating(user);
+    await user.click(screen.getByRole('button', { name: /5\+/ }));
+
+    await user.click(screen.getByRole('button', { name: 'Show' }));
+    const show = screen.getByTestId('places-filter');
+    expect(within(show).getByRole('button', { name: /^All/ })).toHaveTextContent('2');
+    expect(within(show).getByRole('button', { name: /^Unplanned/ })).toHaveTextContent('1');
+    expect(within(show).getByRole('button', { name: /^Planned/ })).toHaveTextContent('1');
+    // Tracks is only offered once a place carries one.
+    expect(within(show).queryByRole('button', { name: /^Tracks/ })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-SIDEBAR-059: the day chip has no X when there is no way to close the day from here', () => {
+    const today = buildPlace({ id: 91, name: 'On This Day' });
+    const assignments = { '1': [buildAssignment({ place: today, day_id: 1 })] };
+    seedStore(useTripStore, { placesFilter: 'planned' });
+    render(<PlacesSidebar {...defaultProps} places={[today]} assignments={assignments} days={[{ id: 1 }] as never} selectedDayId={1} />);
+    expect(screen.getByText('Showing the open day only')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Show the whole trip')).not.toBeInTheDocument();
+  });
+});
+
+// ── Rows: the "…" mirrors the right-click ───────────────────────────────────────
+
+describe('row actions', () => {
+  it('FE-PLANNER-SIDEBAR-060: the "…" offers the right-click entries and acts without selecting the row', async () => {
+    const user = userEvent.setup();
+    const onEditPlace = vi.fn();
+    const onPlaceClick = vi.fn();
+    const place = buildPlace({ id: 5, name: 'Menu Place' });
+    render(<PlacesSidebar {...defaultProps} places={[place]} selectedDayId={3} onEditPlace={onEditPlace} onPlaceClick={onPlaceClick} />);
+    const row = screen.getByRole('option', { name: 'Menu Place' });
+
+    await user.click(within(row).getByRole('button', { name: 'More options' }));
+    expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+    // The row's own "+" and the menu's "+ Day".
+    expect(screen.getAllByRole('button', { name: '+ Day' })).toHaveLength(2);
+    await user.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(onEditPlace).toHaveBeenCalledWith(expect.objectContaining({ id: 5 }));
+    expect(onPlaceClick).not.toHaveBeenCalled();
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-SIDEBAR-061: the right-click menu stays, with the same entries', async () => {
+    const onDeletePlace = vi.fn();
+    const user = userEvent.setup();
+    const place = buildPlace({ id: 6, name: 'Right Click Place' });
+    render(<PlacesSidebar {...defaultProps} places={[place]} onDeletePlace={onDeletePlace} />);
+    fireEvent.contextMenu(screen.getByRole('option', { name: 'Right Click Place' }));
+    await user.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(onDeletePlace).toHaveBeenCalledWith(6);
+  });
+
+  it('FE-PLANNER-SIDEBAR-062: no "…" while selecting, nor below lg where a tap opens the day sheet', async () => {
+    const user = userEvent.setup();
+    const place = buildPlace({ id: 7, name: 'Quiet Place' });
+    const { unmount } = render(<PlacesSidebar {...defaultProps} places={[place]} />);
+    const row = () => screen.getByRole('option', { name: 'Quiet Place' });
+    expect(within(row()).getByRole('button', { name: 'More options' })).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Select' }));
+    expect(within(row()).queryByRole('button', { name: 'More options' })).not.toBeInTheDocument();
+    unmount();
+
+    render(<PlacesSidebar {...defaultProps} places={[place]} isMobile />);
+    expect(within(row()).queryByRole('button', { name: 'More options' })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-SIDEBAR-063: Enter selects a focused row and Space ticks it in select mode', async () => {
+    const user = userEvent.setup();
+    const onPlaceClick = vi.fn();
+    const place = buildPlace({ id: 8, name: 'Keyboard Place' });
+    render(<PlacesSidebar {...defaultProps} places={[place]} onPlaceClick={onPlaceClick} />);
+    const row = screen.getByRole('option', { name: 'Keyboard Place' });
+    act(() => { row.focus(); });
+    await user.keyboard('{Enter}');
+    expect(onPlaceClick).toHaveBeenCalledWith(8);
+
+    await user.click(screen.getByRole('button', { name: 'Select' }));
+    act(() => { row.focus(); });
+    await user.keyboard(' ');
+    expect(screen.getByRole('status', { name: '1 selected' })).toHaveTextContent('1');
+  });
+});
+
+// ── Select mode and the import menu ─────────────────────────────────────────────
+
+describe('select mode and import menu', () => {
+  it('FE-PLANNER-SIDEBAR-064: select mode raises the selection bar at the foot, and takes it away again', async () => {
+    const user = userEvent.setup();
+    const places = [buildPlace({ name: 'One' }), buildPlace({ name: 'Two' })];
+    render(<PlacesSidebar {...defaultProps} places={places} />);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+
+    const toggle = screen.getByRole('button', { name: 'Select' });
+    await user.click(toggle);
+    expect(toggle).toHaveAttribute('aria-pressed', 'true');
+    expect(screen.getByRole('status', { name: '0 selected' })).toHaveTextContent('0');
+
+    await user.click(screen.getByRole('button', { name: 'Select all' }));
+    expect(screen.getByRole('status', { name: '2 selected' })).toHaveTextContent('2');
+
+    await user.click(screen.getByRole('button', { name: 'Done' }));
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-SIDEBAR-065: the Import button opens its menu and a second click closes it', async () => {
+    const user = userEvent.setup();
+    render(<PlacesSidebar {...defaultProps} />);
+    const trigger = screen.getByRole('button', { name: 'Import Places' });
+    expect(trigger).toHaveAttribute('aria-haspopup', 'menu');
+
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('button', { name: 'Import file' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'List Import' })).toBeInTheDocument();
+
+    await user.click(trigger);
+    expect(screen.queryByRole('button', { name: 'Import file' })).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-SIDEBAR-066: the list import closes on Cancel and keeps its enrich switch behind the maps key', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, { hasMapsKey: true });
+    render(<PlacesSidebar {...defaultProps} />);
+    await openImportMenu(user, /^List Import$/);
+    const enrich = screen.getByRole('button', { name: 'Enrich places via Google' });
+    expect(enrich).toHaveAttribute('aria-pressed', 'false');
+    await user.click(enrich);
+    expect(enrich).toHaveAttribute('aria-pressed', 'true');
+
+    // Switching the provider swaps the example link.
+    await user.click(screen.getByRole('button', { name: 'Naver List' }));
+    expect(screen.getByPlaceholderText(/naver\.me/)).toBeInTheDocument();
+
+    await user.click(inDialog(/^Cancel$/));
+    expect(screen.queryByPlaceholderText(/naver\.me/)).not.toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/Planner/PlacesSidebar.tsx b/client/src/components/Planner/PlacesSidebar.tsx
index 8cb05b3ef..a4b0eb063 100644
--- a/client/src/components/Planner/PlacesSidebar.tsx
+++ b/client/src/components/Planner/PlacesSidebar.tsx
@@ -38,39 +38,21 @@ const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProp
       onDragOver={dragDisabled ? undefined : handleSidebarDragOver}
       onDragLeave={dragDisabled ? undefined : handleSidebarDragLeave}
       onDrop={dragDisabled ? undefined : handleSidebarDrop}
-      style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "var(--font-system)", position: 'relative' }}
+      className="relative flex h-full flex-col"
+      style={{ fontFamily: 'var(--font-system)' }}
     >
       {!dragDisabled && sidebarDragOver && <PlacesDropOverlay {...S} />}
-      {/* Kopfbereich */}
       <PlacesHeader {...S} />
 
-      {/* Anzahl / Auswahl-Leiste */}
-      {selectMode ? (
-        <PlacesSelectionBar {...S} />
-      ) : (
-        <div style={{ padding: '6px 16px', flexShrink: 0 }}>
-          {/* A badge across the whole rail rather than a line of text hugging the
-              left edge: it reads as the list's header instead of as a stray label.
-              Outlined rather than filled, because the tertiary surface is a slate
-              tone and put a blue cast on the panel. */}
-          <div className="text-content-faint" style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            padding: '4px 10px', borderRadius: 99,
-            background: 'transparent', border: '1px solid var(--border-faint)',
-            fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
-            textTransform: 'uppercase', letterSpacing: '0.06em',
-          }}>
-            {filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}
-          </div>
-        </div>
-      )}
+      {/* No count line: the show filter in the head carries the number. */}
+      <div className="h-2 flex-none" />
 
       {/* Liste, with the Dawarich stays riding on top of it inside the same scroller —
           see the `header` prop for why they are not a band of their own. */}
       <PlacesList
         {...S}
         header={(
-          <div style={{ padding: '0 12px 8px' }}>
+          <div className="px-1 pb-2">
             <DawarichSuggestionsPanel
               tripId={tripId}
               trips={[{ id: tripId, label: t('dawarich.accept.thisTrip') }]}
@@ -87,6 +69,9 @@ const PlacesSidebar = React.memo(function PlacesSidebar(props: PlacesSidebarProp
         )}
       />
 
+      {/* While picking, the bar with what to do with the picks rises at the foot of the column. */}
+      {selectMode && <PlacesSelectionBar {...S} />}
+
       {dayPickerPlace && <MobileDayPickerSheet {...S} />}
       {listImportOpen && <ListImportModal {...S} />}
       <FileImportModal
diff --git a/client/src/components/Planner/PlacesSidebarHeader.tsx b/client/src/components/Planner/PlacesSidebarHeader.tsx
index 5b33a55c7..a7ce9609a 100644
--- a/client/src/components/Planner/PlacesSidebarHeader.tsx
+++ b/client/src/components/Planner/PlacesSidebarHeader.tsx
@@ -1,88 +1,366 @@
-import { Search, Plus, X, Upload, FileDown, ChevronDown, Check, MapPin, Star, CalendarPlus, CalendarDays } from 'lucide-react'
-import { getCategoryIcon } from '../shared/categoryIcons'
-import Tooltip from '../shared/Tooltip'
-import CustomSelect from '../shared/CustomSelect'
+import { useEffect, useRef, useState, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'
+import { Search, Plus, X, Upload, FileDown, ListPlus, Check, Star, CalendarPlus, CalendarDays, ChevronDown, Tag } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
+import { ContextMenu, useContextMenu } from '../shared/ContextMenu'
+import { NEUTRAL_TINT, fs } from '../shared/DialogShell'
 import { useElementSize } from '../../hooks/useElementSize'
-import type { SidebarState } from './usePlacesSidebar'
+import { Eyebrow } from './bookings/bookingParts'
+import { tintOf } from './planParts'
+import { CategoryTile } from './PlacesBulkCategoryModal'
+import type { PlacesFilter, SidebarState } from './usePlacesSidebar'
 
 /**
  * Below this the two labels stop fitting side by side and both buttons fall back
- * to their icon. Measured on the button row itself rather than derived from the
- * sidebar width: the labels are translated, so how much room they need differs
- * per locale, and the row is what actually runs out of space. The rail is
- * draggable down to 200px, which leaves the row 168.
+ * to their icon. Measured on the add row itself, the full width of the head band,
+ * rather than derived from the sidebar width: the labels are translated, so how
+ * much room they need differs per locale, and the row is what runs out of space.
+ * The rail is draggable down to 200px, which leaves the row 172.
  */
 const COMPACT_BUTTONS_WIDTH = 232
 
+/** The controls of the head band: one height, one radius, the card colour of the other trip bars. */
+const CONTROL = 'h-8 rounded-[10px] shadow-sm'
+
+/** A 32px icon control on the head band, named by its tooltip. `on` fills it in the accent (a mode that is switched on). */
+function BandButton({ label, onClick, on = false, lit = false, ariaPressed, ariaExpanded, ariaHaspopup, children }: {
+  label: string
+  onClick: (e: ReactMouseEvent<HTMLButtonElement>) => void
+  on?: boolean
+  /** Brighter while its panel or menu is open, or while it is filtering. */
+  lit?: boolean
+  ariaPressed?: boolean
+  ariaExpanded?: boolean
+  ariaHaspopup?: 'dialog' | 'menu'
+  children: ReactNode
+}) {
+  let tone = 'bg-surface-card text-content-secondary hover:text-content'
+  if (on) tone = 'bg-accent text-accent-text'
+  else if (lit) tone = 'bg-surface-card text-content'
+  return (
+    <Tooltip label={label}>
+      <button type="button" onClick={onClick} aria-label={label}
+        aria-pressed={ariaPressed} aria-expanded={ariaExpanded} aria-haspopup={ariaHaspopup}
+        className={`${CONTROL} relative grid w-8 flex-none place-items-center transition-colors ${tone}`}>
+        {children}
+      </button>
+    </Tooltip>
+  )
+}
+
+const RATING_FLOORS = ['all', 5, 4, 3, 2, 1] as const
+
 export function PlacesDropOverlay({ t }: SidebarState) {
   return (
-    <div style={{
-      position: 'absolute', inset: 0, zIndex: 10,
-      background: 'color-mix(in srgb, var(--accent) 12%, transparent)',
-      border: '2px dashed var(--accent)',
-      borderRadius: 4,
-      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-      gap: 10, pointerEvents: 'none',
-    }}>
-      <Upload size={28} strokeWidth={1.5} color="var(--accent)" />
-      <span className="text-accent" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t('places.sidebarDrop')}</span>
+    <div
+      className="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-2.5 rounded-2xl border-2 border-dashed border-accent"
+      style={{ background: tintOf('var(--accent)', 12) }}
+    >
+      <Upload size={28} strokeWidth={1.5} className="text-accent" />
+      <span className="font-semibold text-accent" style={fs(13, 'body')}>{t('places.sidebarDrop')}</span>
     </div>
   )
 }
 
+/**
+ * The head of the places column, one tinted band like every panel head in the
+ * planner, in three rows: adding and importing first, as the column's main job;
+ * search with the category and rating filters and the select switch; what to
+ * show as tabs with their counts. While a day is open on the planned tab, a chip
+ * says so.
+ */
 export function PlacesHeader(S: SidebarState) {
-  const {
-    canEditPlaces, onAddPlace, onAddPlaceToSelectedDay, selectedDayId, t, setFileImportOpen, setListImportOpen, hasMultipleListImportProviders,
-    places, categories, categoryFilters, search, setSearch, plannedIds, plannedFilterIds, dayScoped, onClearSelectedDay, hasTracks,
-    filter, setFilter, setSelectedIds, selectMode, setSelectMode,
-    catDropOpen, setCatDropOpen, toggleCategoryFilter, setCategoryFilters,
-    ratingFilter, setRatingFilter,
-    starDropOpen, setStarDropOpen,
-  } = S
-  const dayOpen = selectedDayId != null
-  const { ref: buttonRowRef, width: buttonRowWidth } = useElementSize<HTMLDivElement>()
-  // Zero is the first paint, before the observer has measured anything — treat
-  // that as roomy so the labels do not flash away and back on every mount.
-  const compact = buttonRowWidth > 0 && buttonRowWidth < COMPACT_BUTTONS_WIDTH
-  const addLabel = t(dayOpen ? 'places.addPlaceShort' : 'places.addPlace')
-  const fileImportLabel = t('places.importFile')
-  const listImportLabel = t(hasMultipleListImportProviders ? 'places.importList' : 'places.importGoogleList')
+  const { canEditPlaces, t, selectMode, setSelectMode, setSelectedIds } = S
   return (
-    <div className="border-b border-edge-faint" style={{ padding: '14px 16px 10px', flexShrink: 0 }}>
-      {canEditPlaces && <div ref={buttonRowRef} style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-        {/* The label shortens while the second button is out, so both fit side by
-            side in a default rail without either one truncating; a squeezed rail
-            drops it entirely and the aria-label carries the name instead. */}
-        <button type="button"
-          onClick={onAddPlace}
-          aria-label={compact ? addLabel : undefined}
-          title={compact ? addLabel : undefined}
-          className="bg-accent text-accent-text motion-reduce:transition-none"
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-            // Both halves are driven by flex-basis rather than by grow, so the
-            // pair lands on an exact 50/50 and the handover animates in both
-            // directions. Half of the 6px gap comes off each side.
-            flexGrow: 0, flexShrink: 1, flexBasis: dayOpen ? 'calc(50% - 3px)' : '100%',
-            minWidth: 0, padding: '8px 12px', borderRadius: 12, border: 'none',
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit',
-            overflow: 'hidden', whiteSpace: 'nowrap',
-            transition: 'flex-basis 180ms ease',
-          }}
-        >
-          <Plus size={14} strokeWidth={2} />
-          {!compact && (
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {addLabel}
+    <div className="flex flex-none flex-col gap-2 border-b border-edge-faint px-3 py-2.5" style={{ background: NEUTRAL_TINT }}>
+      {canEditPlaces && <AddRow {...S} />}
+      <div className="relative flex items-center gap-1.5">
+        <SearchField {...S} />
+        {canEditPlaces && (
+          <BandButton
+            label={t('common.select')}
+            on={selectMode}
+            ariaPressed={selectMode}
+            onClick={() => { setSelectMode(v => !v); setSelectedIds(new Set()) }}
+          >
+            {selectMode ? <X size={15} strokeWidth={2.4} /> : <Check size={15} strokeWidth={2.4} />}
+          </BandButton>
+        )}
+      </div>
+      <div className="flex items-center gap-1.5">
+        <ShowDropdown {...S} />
+        <CategoryFilter {...S} />
+        <RatingFilter {...S} />
+      </div>
+      <ActiveFilterChips {...S} />
+    </div>
+  )
+}
+
+function SearchField({ t, search, setSearch, selectMode, setSelectedIds }: SidebarState) {
+  return (
+    <label className={`${CONTROL} flex min-w-0 flex-1 items-center gap-2 bg-surface-card pl-2.5 pr-1.5 text-content-faint focus-within:ring-2 focus-within:ring-[color:var(--text-primary)]`}>
+      <Search size={13} strokeWidth={2} className="flex-none" />
+      <input
+        type="text"
+        value={search}
+        onChange={e => { setSearch(e.target.value); if (selectMode) setSelectedIds(new Set()) }}
+        placeholder={t('common.search')}
+        aria-label={t('common.search')}
+        className="min-w-0 flex-1 border-0 bg-transparent text-content outline-none placeholder:text-content-faint"
+        style={fs(12.5, 'body')}
+      />
+      {search && (
+        <Tooltip label={t('places.clearSearch')}>
+          <button type="button" onClick={() => setSearch('')} aria-label={t('places.clearSearch')}
+            className="grid h-5 w-5 flex-none place-items-center rounded-full text-content-faint hover:bg-surface-hover hover:text-content">
+            <X size={12} strokeWidth={2.2} />
+          </button>
+        </Tooltip>
+      )}
+    </label>
+  )
+}
+
+/** A category (or the no-category bucket) in the category list, ticked while it filters. */
+function CategoryChoice({ on, onClick, tile, label }: { on: boolean; onClick: () => void; tile: ReactNode; label: string }) {
+  return (
+    <button type="button" onClick={onClick} aria-pressed={on}
+      className={`flex w-full items-center gap-2 rounded-[9px] px-1.5 py-1 text-left transition-colors ${on ? 'bg-surface-tertiary' : 'hover:bg-surface-hover'}`}
+      style={fs(12.5, 'body')}>
+      {tile}
+      <span className="min-w-0 flex-1 truncate text-content">{label}</span>
+      {on && <Check size={13} strokeWidth={2.4} className="flex-none text-content-muted" />}
+    </button>
+  )
+}
+
+/** The "show" choices; tracks only once a place has one. */
+function filterTabs({ t, hasTracks }: Pick<SidebarState, 't' | 'hasTracks'>) {
+  const tabs: Array<{ id: PlacesFilter; label: string }> = [
+    { id: 'all', label: t('places.all') },
+    { id: 'unplanned', label: t('places.unplanned') },
+    { id: 'planned', label: t('places.planned') },
+  ]
+  if (hasTracks) tabs.push({ id: 'tracks', label: t('places.filterTracks') })
+  return tabs
+}
+
+/** What the list shows (every place, the unplanned, the planned, the tracks) as one dropdown with their counts. */
+function ShowDropdown(S: SidebarState) {
+  const { t, filter, pickFilter, filterCounts } = S
+  const [open, setOpen] = useState(false)
+  const tabs = filterTabs(S)
+  const current = tabs.find(tab => tab.id === filter) ?? tabs[0]
+  return (
+    <FilterDropdown
+      wide
+      name={t('places.filterShow')}
+      label={current.label}
+      count={filterCounts[current.id]}
+      active={filter !== 'all'}
+      open={open}
+      setOpen={setOpen}
+    >
+      <div data-testid="places-filter" role="group" aria-label={t('places.filterShow')} className="flex flex-col gap-px">
+        {tabs.map(tab => {
+          const on = filter === tab.id
+          return (
+            <button type="button" key={tab.id} onClick={() => { pickFilter(tab.id); setOpen(false) }} aria-pressed={on}
+              className={`flex w-full items-center gap-2 rounded-[9px] px-2 py-1.5 text-left transition-colors ${on ? 'bg-surface-tertiary' : 'hover:bg-surface-hover'}`}
+              style={fs(12.5, 'body')}>
+              <span className="min-w-0 flex-1 truncate text-content">{tab.label}</span>
+              <span className="font-geist tabular-nums text-content-faint" style={fs(11)}>{filterCounts[tab.id]}</span>
+              <span className="grid w-3.5 flex-none place-items-center">{on && <Check size={13} strokeWidth={2.4} className="text-content-muted" />}</span>
+            </button>
+          )
+        })}
+      </div>
+    </FilterDropdown>
+  )
+}
+
+/**
+ * A filter as one icon on the tabs row, opening a small list under it; closes on a
+ * click outside or Escape. A badge marks it while it is narrowing the list, and the
+ * tooltip says to what.
+ */
+function FilterDropdown({ label, active, badge, icon, open, setOpen, name, children, wide = false, count }: {
+  /** What is in force: on the trigger when `wide`, else in the tooltip ("All categories", "4+"). */
+  label: string
+  active: boolean
+  badge?: string | number
+  icon?: ReactNode
+  /** Takes the row's free width and shows its label (and `count`) on the trigger. */
+  wide?: boolean
+  count?: number
+  open: boolean
+  setOpen: (v: boolean | ((v: boolean) => boolean)) => void
+  /** The trigger's accessible name: what it filters by. */
+  name: string
+  children: ReactNode
+}) {
+  const wrapRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => { if (!wrapRef.current?.contains(e.target as Node)) setOpen(false) }
+    // Captured and stopped, so the key takes back the list and nothing under it.
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.stopPropagation()
+      setOpen(false)
+      wrapRef.current?.querySelector('button')?.focus()
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey, true)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey, true)
+    }
+  }, [open, setOpen])
+  return (
+    <div ref={wrapRef} className={`relative ${wide ? 'min-w-0 flex-1' : 'flex-none'}`}>
+      {wide ? (
+        <button type="button" onClick={() => setOpen(v => !v)} aria-expanded={open} aria-haspopup="listbox" aria-label={name}
+          className={`${CONTROL} flex w-full min-w-0 items-center gap-1.5 bg-surface-card px-2.5 font-semibold transition-colors ${active || open ? 'text-content' : 'text-content-secondary hover:text-content'}`}
+          style={fs(12, 'body')}>
+          <span className="min-w-0 truncate text-left">{label}</span>
+          {count != null && <span className="font-geist tabular-nums text-content-faint" style={fs(10.5)}>{count}</span>}
+          <ChevronDown size={13} strokeWidth={2.2} className={`ml-auto flex-none text-content-faint transition-transform ${open ? 'rotate-180' : ''}`} />
+        </button>
+      ) : (
+      <Tooltip label={active ? `${name}: ${label}` : name} disabled={open}>
+        <button type="button" onClick={() => setOpen(v => !v)} aria-expanded={open} aria-haspopup="listbox" aria-label={name}
+          className={`${CONTROL} relative grid w-8 place-items-center bg-surface-card transition-colors ${active || open ? 'text-content' : 'text-content-secondary hover:text-content'}`}>
+          {icon}
+          {active && badge != null && (
+            <span className="absolute -right-1 -top-1 grid h-4 min-w-4 place-items-center rounded-full bg-accent px-1 font-geist font-bold tabular-nums text-accent-text" style={fs(9)}>
+              {badge}
             </span>
           )}
         </button>
+      </Tooltip>
+      )}
+      {open && (
+        <div className={`trek-popover-enter absolute ${wide ? 'left-0' : 'right-0'} top-full z-50 mt-1.5 flex max-h-[min(60vh,360px)] flex-col overflow-y-auto rounded-[12px] border border-edge-secondary bg-surface-card p-1.5 shadow-popover`} style={{ width: 'max-content', minWidth: 180, maxWidth: 260 }}>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/** Which categories to show, many at once; the label says what is in force. */
+function CategoryFilter(S: SidebarState) {
+  const { t, places, categories, categoryFilters, setCategoryFilters, toggleCategoryFilter } = S
+  const [open, setOpen] = useState(false)
+  if (categories.length === 0) return null
+  let label = t('places.allCategories')
+  if (categoryFilters.size === 1) {
+    const only = categories.find(c => categoryFilters.has(String(c.id)))
+    if (categoryFilters.has('uncategorized')) label = t('places.noCategory')
+    else if (only) label = only.name
+  } else if (categoryFilters.size > 1) {
+    label = `${categoryFilters.size} ${t('places.categoriesSelected')}`
+  }
+  return (
+    <FilterDropdown name={t('categories.title')} label={label} active={categoryFilters.size > 0} badge={categoryFilters.size}
+      icon={<Tag size={14} strokeWidth={2} />} open={open} setOpen={setOpen}>
+      {categories.map(c => (
+        <CategoryChoice
+          key={c.id}
+          on={categoryFilters.has(String(c.id))}
+          onClick={() => toggleCategoryFilter(String(c.id))}
+          tile={<CategoryTile category={c} size={22} />}
+          label={c.name}
+        />
+      ))}
+      {places.some(p => p.category_id == null) && (
+        <CategoryChoice
+          on={categoryFilters.has('uncategorized')}
+          onClick={() => toggleCategoryFilter('uncategorized')}
+          tile={<CategoryTile size={22} />}
+          label={t('places.noCategory')}
+        />
+      )}
+      {categoryFilters.size > 0 && (
+        <button type="button" onClick={() => setCategoryFilters(new Set())}
+          className="mt-1 flex w-full items-center gap-1.5 rounded-[9px] border-t border-edge-faint px-1.5 pb-1 pt-2 text-left font-semibold text-content-muted hover:text-content"
+          style={fs(12, 'body')}>
+          <X size={12} strokeWidth={2.4} />
+          {t('places.clearFilter')}
+        </button>
+      )}
+    </FilterDropdown>
+  )
+}
+
+/** A minimum of stars (#1435), the same floors as the collections bar. */
+function RatingFilter(S: SidebarState) {
+  const { t, ratingFilter, setRatingFilter } = S
+  const [open, setOpen] = useState(false)
+  const star = <Star size={12} strokeWidth={2.2} fill="currentColor" className="flex-none text-warning" />
+  return (
+    <FilterDropdown
+      label={ratingFilter === 'all' ? t('common.all') : `${ratingFilter}+`}
+      name={t('places.filterByRating')}
+      active={ratingFilter !== 'all'}
+      badge={ratingFilter === 'all' ? undefined : `${ratingFilter}+`}
+      icon={<Star size={14} strokeWidth={2} className={ratingFilter === 'all' ? '' : 'fill-current text-warning'} />}
+      open={open}
+      setOpen={setOpen}
+    >
+      {RATING_FLOORS.map(opt => {
+        const on = ratingFilter === opt
+        return (
+          <button type="button" key={String(opt)} onClick={() => { setRatingFilter(opt); setOpen(false) }} aria-pressed={on}
+            className={`flex w-full items-center gap-2 rounded-[9px] px-2 py-1.5 text-left transition-colors ${on ? 'bg-surface-tertiary' : 'hover:bg-surface-hover'}`}
+            style={fs(12.5, 'body')}>
+            {opt === 'all' ? <span className="w-3" /> : star}
+            <span className="min-w-0 flex-1 text-content">{opt === 'all' ? t('common.all') : `${opt}+`}</span>
+            {on && <Check size={13} strokeWidth={2.4} className="flex-none text-content-muted" />}
+          </button>
+        )
+      })}
+    </FilterDropdown>
+  )
+}
+
+function AddRow(S: SidebarState) {
+  const { onAddPlace, onAddPlaceToSelectedDay, selectedDayId, t, setFileImportOpen, setListImportOpen, hasMultipleListImportProviders } = S
+  const dayOpen = selectedDayId != null
+  const split = dayOpen && !!onAddPlaceToSelectedDay
+  const { ref: rowRef, width: rowWidth } = useElementSize<HTMLDivElement>()
+  // Zero is the first paint, before the observer has measured anything — treat
+  // that as roomy so the labels do not flash away and back on every mount.
+  const compact = rowWidth > 0 && rowWidth < COMPACT_BUTTONS_WIDTH
+  const addLabel = t(dayOpen ? 'places.addPlaceShort' : 'places.addPlace')
+  const importMenu = useContextMenu()
+  const importItems = [
+    { label: t('places.importFile'), icon: FileDown, onClick: () => setFileImportOpen(true) },
+    { label: t(hasMultipleListImportProviders ? 'places.importList' : 'places.importGoogleList'), icon: ListPlus, onClick: () => setListImportOpen(true) },
+  ]
+  return (
+    <div ref={rowRef} className="flex items-center gap-1.5">
+      {/* The label shortens while the second button is out, so both fit side by
+          side in a default rail without either one truncating; a squeezed rail
+          drops the labels entirely and the aria-labels carry the names instead. */}
+      <div className="flex min-w-0 flex-1 gap-1.5">
+        <Tooltip label={addLabel} disabled={!compact}>
+          <button type="button"
+            onClick={onAddPlace}
+            aria-label={compact ? addLabel : undefined}
+            className={`${CONTROL} flex min-w-0 items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap bg-accent px-3 font-semibold text-accent-text transition-[flex-basis] duration-200 hover:opacity-90 motion-reduce:transition-none`}
+            // Both halves are driven by flex-basis rather than by grow, so the pair
+            // lands on an exact 50/50 and the handover animates in both directions.
+            style={{ ...fs(12.5, 'body'), flex: `0 1 ${split ? 'calc(50% - 3px)' : '100%'}` }}
+          >
+            <Plus size={14} strokeWidth={2.2} className="flex-none" />
+            {!compact && <span className="truncate">{addLabel}</span>}
+          </button>
+        </Tooltip>
         {/* Kept mounted and collapsed rather than unmounted, so it has something
-            to animate out of: a button that only exists while a day is open
-            would appear and vanish on the spot. Hidden from the tab order and
-            from screen readers in the same breath, because a zero-width button
-            is still focusable otherwise. */}
+            to animate out of. Hidden from the tab order and from screen readers in
+            the same breath, because a zero-width button is still focusable otherwise. */}
         {onAddPlaceToSelectedDay && (
           <Tooltip label={t('places.addToSelectedDay')} disabled={!dayOpen}>
             <button type="button"
@@ -91,347 +369,66 @@ export function PlacesHeader(S: SidebarState) {
               data-testid="add-place-to-day"
               aria-hidden={!dayOpen}
               tabIndex={dayOpen ? 0 : -1}
-              className="bg-accent text-accent-text motion-reduce:transition-none"
-              style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
-                flexGrow: 0, flexShrink: 1, flexBasis: dayOpen ? 'calc(50% - 3px)' : '0%',
-                minWidth: 0,
-                opacity: dayOpen ? 1 : 0,
-                padding: dayOpen ? '8px 12px' : 0,
-                borderRadius: 12, border: 'none',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-                cursor: 'pointer', fontFamily: 'inherit', overflow: 'hidden', whiteSpace: 'nowrap',
-                pointerEvents: dayOpen ? 'auto' : 'none',
-                transition: 'flex-basis 180ms ease, opacity 140ms ease, padding 180ms ease',
-              }}
+              className={`flex h-8 min-w-0 items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap rounded-[10px] bg-surface-card font-semibold text-content transition-[flex-basis,opacity,padding] duration-200 hover:text-content-secondary motion-reduce:transition-none ${dayOpen ? 'px-3 opacity-100 shadow-sm' : 'pointer-events-none px-0 opacity-0 shadow-none'}`}
+              style={{ ...fs(12.5, 'body'), flex: `0 1 ${dayOpen ? 'calc(50% - 3px)' : '0%'}` }}
             >
-              <CalendarPlus size={14} strokeWidth={2} style={{ flexShrink: 0 }} />
-              {!compact && t('places.addToDayShort')}
+              <CalendarPlus size={14} strokeWidth={2} className="flex-none" />
+              {!compact && <span className="truncate">{t('places.addToDayShort')}</span>}
             </button>
           </Tooltip>
         )}
-      </div>}
-      {canEditPlaces && <>
-      {/* Same squeeze rule as the row above, measured off the same rail: once the
-          add buttons lose their labels these two would not fit either. */}
-      <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-        <button type="button"
-          onClick={() => setFileImportOpen(true)}
-          aria-label={compact ? fileImportLabel : undefined}
-          title={compact ? fileImportLabel : undefined}
-          className="border border-dashed border-edge text-content-faint"
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-            flex: 1, minWidth: 0, padding: '5px 12px', borderRadius: 8,
-            background: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit',
-            overflow: 'hidden', whiteSpace: 'nowrap',
-          }}
-        >
-          <FileDown size={11} strokeWidth={2} /> {!compact && fileImportLabel}
-        </button>
-        <button type="button"
-          onClick={() => setListImportOpen(true)}
-          aria-label={compact ? listImportLabel : undefined}
-          title={compact ? listImportLabel : undefined}
-          className="border border-dashed border-edge text-content-faint"
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
-            flex: 1, minWidth: 0, padding: '5px 12px', borderRadius: 8,
-            background: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500,
-            cursor: 'pointer', fontFamily: 'inherit',
-            overflow: 'hidden', whiteSpace: 'nowrap',
-          }}
-        >
-          <MapPin size={11} strokeWidth={2} /> {!compact && listImportLabel}
-        </button>
       </div>
-      <div className="bg-edge" style={{ height: 1, margin: '2px 0 10px' }} />
-      </>}
-
-      {/* Filter-Tabs */}
-      {(() => {
-        const baseFiltered = places.filter(p => {
-          if (categoryFilters.size > 0) {
-            if (p.category_id == null) {
-              if (!categoryFilters.has('uncategorized')) return false
-            } else if (!categoryFilters.has(String(p.category_id))) return false
-          }
-          if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
-              !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
-          return true
-        })
-        const counts = {
-          all: baseFiltered.length,
-          unplanned: baseFiltered.filter(p => !plannedIds.has(p.id)).length,
-          // While a day is open this counts that day's plan, the same set the list and
-          // the map show. Counting the whole trip here is what made the tab read 55
-          // beside five pins, with nothing to say the two were answering different
-          // questions.
-          planned: baseFiltered.filter(p => plannedFilterIds.has(p.id)).length,
-          tracks: baseFiltered.filter(p => p.route_geometry).length,
-        }
-        const tabs = ([
-          { id: 'all', label: t('places.all') },
-          { id: 'unplanned', label: t('places.unplanned') },
-          { id: 'planned', label: t('places.planned') },
-          hasTracks ? { id: 'tracks', label: t('places.filterTracks') } : null,
-        ] as const).filter(Boolean) as Array<{ id: 'all' | 'unplanned' | 'planned' | 'tracks'; label: string }>
-        return (
-          // One select where four pills used to fight for the rail's width: with the
-          // tracks tab the row had grown past what a narrow panel can hold without
-          // clipping a word. The count rides on the trigger the way it rode on the
-          // active pill, and every option carries its own in the menu.
-          <div data-testid="places-filter" style={{ marginBottom: 8 }}>
-            <CustomSelect
-              size="sm"
-              value={filter}
-              onChange={v => { setFilter(v as 'all' | 'unplanned' | 'planned' | 'tracks'); setSelectedIds(new Set()) }}
-              options={tabs.map(f => ({ value: f.id, label: f.label, badge: String(counts[f.id]) }))}
-            />
-          </div>
-        )
-      })()}
-
-      {/* Says out loud what the count above already narrowed to.
-          The map has followed the open day on this filter since #2024, and until now
-          nothing anywhere said so: the pool read 55, the map drew five, and the honest
-          conclusion was that the map was broken. It sits under the filter select
-          rather than on the map because a chip over the canvas is unreachable on a
-          phone, which is where this was reported from. */}
-      {dayScoped && (
-        <div
-          className="border border-edge-faint bg-surface-tertiary text-content-secondary"
-          style={{
-            display: 'flex', alignItems: 'center', gap: 6,
-            padding: '4px 6px 4px 9px', borderRadius: 8, marginBottom: 8,
-            fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-          }}
-        >
-          <CalendarDays size={11} strokeWidth={2} style={{ flexShrink: 0 }} />
-          <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-            {t('places.dayScoped')}
-          </span>
-          {onClearSelectedDay && (
-            <button type="button"
-              onClick={onClearSelectedDay}
-              aria-label={t('places.dayScopedClear')}
-              title={t('places.dayScopedClear')}
-              className="text-content-faint hover:text-content"
-              style={{
-                marginInlineStart: 'auto', display: 'flex', alignItems: 'center',
-                background: 'none', border: 'none', padding: 3, cursor: 'pointer', flexShrink: 0,
-              }}
-            >
-              <X size={12} strokeWidth={2.2} />
-            </button>
-          )}
-        </div>
-      )}
-
-      {/* Suchfeld */}
-      <div style={{ position: 'relative' }}>
-        <Search size={13} strokeWidth={1.8} color="var(--text-faint)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
-        <input
-          type="text"
-          value={search}
-          onChange={e => { setSearch(e.target.value); if (selectMode) setSelectedIds(new Set()) }}
-          placeholder={t('places.search')}
-          className="bg-surface-card text-content"
-          style={{
-            width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
-            // Borderless on the tertiary surface it sat almost flush with the
-            // panel; the outline is the one the category dropdown below already
-            // uses, so the two read as the same kind of control.
-            border: '1px solid var(--border-primary)',
-            fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-            outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
-          }}
-        />
-        {search && (
-          <button type="button" onClick={() => setSearch('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }}>
-            <X size={12} strokeWidth={2} color="var(--text-faint)" />
-          </button>
-        )}
-      </div>
-
-      {/* Category multi-select plus the star filter. Rendered even without any
-          category, because the rating filter does not depend on one and a fresh
-          trip is exactly where someone collects places to rate. */}
-      {(() => {
-        const label = categoryFilters.size === 0
-          ? t('places.allCategories')
-          : categoryFilters.size === 1
-            ? (categoryFilters.has('uncategorized') ? t('places.noCategory') : categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories'))
-            : `${categoryFilters.size} ${t('places.categoriesSelected')}`
-        return (
-          <div style={{ marginTop: 6, position: 'relative', display: 'flex', gap: 6, alignItems: 'stretch' }}>
-            {categories.length > 0 && <button type="button" onClick={() => setCatDropOpen(v => !v)} className="bg-surface-card text-content" style={{
-              flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-              padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-primary)',
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}>
-              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
-              <ChevronDown size={12} className="text-content-faint" style={{ flexShrink: 0, transform: catDropOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.15s' }} />
-            </button>}
-            {/* Minimum-stars filter (#1435), same floors as the collections bar. */}
-            <Tooltip label={t('places.filterByRating')} placement="bottom">
-              <button type="button"
-                onClick={() => { setStarDropOpen(v => !v); setCatDropOpen(false) }}
-                aria-label={t('places.filterByRating')}
-                aria-expanded={starDropOpen}
-                className={ratingFilter !== 'all' ? 'text-accent' : 'text-content-faint'}
-                style={{
-                  height: 30, flexShrink: 0, borderRadius: 8, gap: 3,
-                  padding: ratingFilter === 'all' ? 0 : '0 7px',
-                  width: ratingFilter === 'all' ? 30 : undefined,
-                  border: `1px solid ${ratingFilter !== 'all' ? 'var(--accent)' : 'var(--border-primary)'}`,
-                  background: ratingFilter !== 'all' ? 'color-mix(in srgb, var(--accent) 14%, transparent)' : 'var(--bg-card)',
-                  cursor: 'pointer', fontFamily: 'inherit',
-                  fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600,
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'background 0.18s, color 0.18s, border-color 0.18s',
-                }}
-              >
-                <Star size={13} strokeWidth={2.2} fill={ratingFilter !== 'all' ? 'currentColor' : 'none'} />
-                {ratingFilter !== 'all' && <span>{ratingFilter}+</span>}
-              </button>
-            </Tooltip>
-            {starDropOpen && (
-              <div className="bg-surface-card" style={{
-                position: 'absolute', top: '100%', right: 0, zIndex: 50, marginTop: 4, minWidth: 116,
-                border: '1px solid var(--border-primary)', borderRadius: 10,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4,
-              }}>
-                {(['all', 5, 4, 3, 2, 1] as const).map(opt => {
-                  const active = ratingFilter === opt
-                  return (
-                    <button type="button"
-                      key={String(opt)}
-                      onClick={() => { setRatingFilter(opt as number | 'all'); setStarDropOpen(false) }}
-                      className={`text-content ${active ? 'bg-surface-hover' : 'bg-transparent'}`}
-                      style={{
-                        display: 'flex', alignItems: 'center', gap: 7, width: '100%',
-                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                        fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                        textAlign: 'left',
-                      }}
-                    >
-                      {opt === 'all'
-                        ? <span style={{ flex: 1 }}>{t('common.all')}</span>
-                        : (
-                          <>
-                            <Star size={12} strokeWidth={2.2} color="#facc15" fill="#facc15" />
-                            <span style={{ flex: 1 }}>{opt}+</span>
-                          </>
-                        )}
-                      {active && <Check size={11} strokeWidth={3} className="text-content-faint" />}
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-            {canEditPlaces && (
-              <Tooltip label={t('common.select')} placement="bottom">
-              <button type="button"
-                onClick={() => { setSelectMode(v => !v); setSelectedIds(new Set()) }}
-                aria-label={t('common.select')}
-                aria-pressed={selectMode}
-                className={selectMode ? 'text-accent' : 'text-content-faint'}
-                style={{
-                  position: 'relative', width: 30, flexShrink: 0, borderRadius: 8,
-                  border: `1px solid ${selectMode ? 'var(--accent)' : 'var(--border-primary)'}`,
-                  background: selectMode ? 'color-mix(in srgb, var(--accent) 14%, transparent)' : 'var(--bg-card)',
-                  cursor: 'pointer', fontFamily: 'inherit', padding: 0,
-                  transition: 'background 0.18s, color 0.18s, border-color 0.18s',
-                  overflow: 'hidden',
-                }}
-              >
-                <span style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
-                  opacity: selectMode ? 0 : 1,
-                  transform: selectMode ? 'rotate(-90deg) scale(0.6)' : 'rotate(0) scale(1)',
-                }}>
-                  <Check size={13} strokeWidth={2.4} />
-                </span>
-                <span style={{
-                  position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  transition: 'opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1)',
-                  opacity: selectMode ? 1 : 0,
-                  transform: selectMode ? 'rotate(0) scale(1)' : 'rotate(90deg) scale(0.6)',
-                }}>
-                  <X size={13} strokeWidth={2.4} />
-                </span>
-              </button>
-              </Tooltip>
-            )}
-            {catDropOpen && categories.length > 0 && (
-              <div className="bg-surface-card" style={{
-                position: 'absolute', top: '100%', left: 0, right: 0, zIndex: 50, marginTop: 4,
-                border: '1px solid var(--border-primary)', borderRadius: 10,
-                boxShadow: '0 4px 16px rgba(0,0,0,0.12)', padding: 4, maxHeight: 200, overflowY: 'auto',
-              }}>
-                {categories.map(c => {
-                  const active = categoryFilters.has(String(c.id))
-                  const CatIcon = getCategoryIcon(c.icon)
-                  return (
-                    <button type="button" key={c.id} onClick={() => toggleCategoryFilter(String(c.id))} className={`text-content ${active ? 'bg-surface-hover' : 'bg-transparent'}`} style={{
-                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                      padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                      fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                      textAlign: 'left',
-                    }}>
-                      <div style={{
-                        width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                        border: active ? 'none' : '1.5px solid var(--border-primary)',
-                        background: active ? (c.color || 'var(--accent)') : 'transparent',
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      }}>
-                        {active && <Check size={10} strokeWidth={3} color="white" />}
-                      </div>
-                      <CatIcon size={12} strokeWidth={2} color={c.color || 'var(--text-muted)'} />
-                      <span style={{ flex: 1 }}>{c.name}</span>
-                    </button>
-                  )
-                })}
-                {places.some(p => p.category_id == null) && (() => {
-                  const active = categoryFilters.has('uncategorized')
-                  return (
-                    <button type="button" onClick={() => toggleCategoryFilter('uncategorized')} className={`text-content-muted ${active ? 'bg-surface-hover' : 'bg-transparent'}`} style={{
-                      display: 'flex', alignItems: 'center', gap: 8, width: '100%',
-                      padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                      fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-                      textAlign: 'left', borderTop: '1px solid var(--border-faint)', marginTop: 2,
-                    }}>
-                      <div className={active ? 'bg-[var(--text-faint)]' : 'bg-transparent'} style={{
-                        width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-                        border: active ? 'none' : '1.5px solid var(--border-primary)',
-                        display: 'flex', alignItems: 'center', justifyContent: 'center',
-                      }}>
-                        {active && <Check size={10} strokeWidth={3} color="white" />}
-                      </div>
-                      <MapPin size={12} strokeWidth={2} color="var(--text-faint)" />
-                      <span style={{ flex: 1 }}>{t('places.noCategory')}</span>
-                    </button>
-                  )
-                })()}
-                {categoryFilters.size > 0 && (
-                  <button type="button" onClick={() => setCategoryFilters(new Set())} className="bg-transparent text-content-faint" style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
-                    width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
-                    fontFamily: 'inherit', fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-                    marginTop: 2, borderTop: '1px solid var(--border-faint)',
-                  }}>
-                    <X size={10} /> {t('places.clearFilter')}
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        )
-      })()}
+      <BandButton
+        label={t('mobileTrip.importPlaces')}
+        lit={!!importMenu.menu}
+        ariaHaspopup="menu"
+        ariaExpanded={!!importMenu.menu}
+        onClick={e => { if (importMenu.menu) importMenu.close(); else importMenu.open(e, importItems, true) }}
+      >
+        <FileDown size={15} strokeWidth={2} />
+      </BandButton>
+      <ContextMenu menu={importMenu.menu} onClose={importMenu.close} />
+    </div>
+  )
+}
+
+/** A filter in force, said out loud, with the X that lifts it. */
+function FilterChip({ label, clearLabel, onClear, icon, tone = 'neutral' }: {
+  label: string
+  /** The X's name; its tooltip, too, unless the X says more than the tooltip. */
+  clearLabel: string
+  onClear?: () => void
+  icon?: ReactNode
+  tone?: 'neutral' | 'info'
+}) {
+  const look = tone === 'info' ? 'bg-info-soft text-info' : 'border border-edge-faint bg-surface-card text-content-secondary'
+  return (
+    <span className={`inline-flex min-w-0 max-w-full items-center gap-1 rounded-full py-[3px] font-semibold ${onClear ? 'pl-2 pr-[3px]' : 'px-2'} ${look}`} style={fs(11)}>
+      {icon}
+      <span className="min-w-0 truncate">{label}</span>
+      {onClear && (
+        <Tooltip label={clearLabel}>
+          <button type="button" onClick={onClear} aria-label={clearLabel}
+            className="grid h-[18px] w-[18px] flex-none place-items-center rounded-full opacity-70 transition-opacity hover:bg-surface-hover hover:opacity-100">
+            <X size={11} strokeWidth={2.4} />
+          </button>
+        </Tooltip>
+      )}
+    </span>
+  )
+}
+
+function ActiveFilterChips(S: SidebarState) {
+  const { t, dayScoped, onClearSelectedDay } = S
+  // Says out loud what the count below already narrowed to. The map has followed
+  // the open day on this filter since #2024, and until this said so the pool read 55
+  // beside five pins and the honest conclusion was that the map was broken. The X
+  // closes the day rather than changing the filter.
+  if (!dayScoped) return null
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      <FilterChip tone="info" label={t('places.dayScoped')} clearLabel={t('places.dayScopedClear')} onClear={onClearSelectedDay}
+        icon={<CalendarDays size={11} strokeWidth={2.2} className="flex-none" />} />
     </div>
   )
 }
diff --git a/client/src/components/Planner/PlacesSidebarList.tsx b/client/src/components/Planner/PlacesSidebarList.tsx
index ccc1843ff..106656d70 100644
--- a/client/src/components/Planner/PlacesSidebarList.tsx
+++ b/client/src/components/Planner/PlacesSidebarList.tsx
@@ -19,12 +19,12 @@ export function PlacesList({ header, ...S }: SidebarState & {
   const {
     filtered, scrollContainerRef, onScrollTopChange, filter, t, canEditPlaces, onAddPlace,
     categories, selectedPlaceId, plannedIds, inDaySet, selectedIds, selectMode, selectedDayId,
-    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow, tripId,
+    isMobile, onPlaceClick, openContextMenu, placeMenuItems, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow, tripId,
   } = S
   // Plugin-contributed columns/actions for the places view, keyed by place id (#plugins).
   const contribFor = usePluginViewContributions('places', tripId)
   return (
-    <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
+    <div className="trek-stagger min-h-0 flex-1 overflow-y-auto px-2 pb-2" ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
       {header}
       {filtered.length === 0 ? (
         /* The mascot and one line, the shape every other empty state in TREK has.
@@ -50,20 +50,16 @@ export function PlacesList({ header, ...S }: SidebarState & {
       ) : (
         filtered.map(place => {
           const cat = categories.find(c => c.id === place.category_id)
-          const isSelected = place.id === selectedPlaceId
-          const isPlanned = plannedIds.has(place.id)
-          const inDay = inDaySet.has(place.id)
-          const isChecked = selectedIds.has(place.id)
           const contributions = contribFor(place.id)
           return (
             <Fragment key={place.id}>
               <MemoPlaceRow
                 place={place}
                 category={cat}
-                isSelected={isSelected}
-                isPlanned={isPlanned}
-                inDay={inDay}
-                isChecked={isChecked}
+                isSelected={place.id === selectedPlaceId}
+                isPlanned={plannedIds.has(place.id)}
+                inDay={inDaySet.has(place.id)}
+                isChecked={selectedIds.has(place.id)}
                 selectMode={selectMode}
                 selectedDayId={selectedDayId}
                 canEditPlaces={canEditPlaces}
@@ -71,13 +67,14 @@ export function PlacesList({ header, ...S }: SidebarState & {
                 t={t}
                 onPlaceClick={onPlaceClick}
                 onContextMenu={openContextMenu}
+                menuItems={placeMenuItems}
                 onAssignToDay={onAssignToDay}
                 toggleSelected={toggleSelected}
                 setDayPickerPlace={setDayPickerPlace}
                 registerPlaceRow={registerPlaceRow}
               />
               {contributions.length > 0 && (
-                <div style={{ padding: '0 14px 8px 16px' }}><PluginCardFooter items={contributions} tripId={tripId} /></div>
+                <div className="px-2.5 pb-2"><PluginCardFooter items={contributions} tripId={tripId} /></div>
               )}
             </Fragment>
           )
diff --git a/client/src/components/Planner/PlacesSidebarListImportModal.tsx b/client/src/components/Planner/PlacesSidebarListImportModal.tsx
index 58ebdd13b..a1aaa3641 100644
--- a/client/src/components/Planner/PlacesSidebarListImportModal.tsx
+++ b/client/src/components/Planner/PlacesSidebarListImportModal.tsx
@@ -1,103 +1,105 @@
-import { createPortal } from 'react-dom'
+import { useId } from 'react'
+import { ListPlus, Loader2 } from 'lucide-react'
 import ToggleSwitch from '../Settings/ToggleSwitch'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT, fs } from '../shared/DialogShell'
+import { EditorField, INPUT, Segmented } from '../shared/dialogParts'
 import type { SidebarState } from './usePlacesSidebar'
 
+type ListProvider = SidebarState['listImportProvider']
+
 export function ListImportModal(S: SidebarState) {
   const {
     setListImportOpen, setListImportUrl, t, hasMultipleListImportProviders, availableListImportProviders,
     listImportProvider, setListImportProvider, listImportUrl, listImportLoading, handleListImport,
     listImportEnrich, setListImportEnrich, canEnrichImport,
   } = S
-  return createPortal(
-    <div
-      role="presentation"
-      onClick={() => { setListImportOpen(false); setListImportUrl('') }}
-      className="bg-[rgba(0,0,0,0.4)]"
-      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+  const titleId = useId()
+  const urlId = useId()
+  const enrichHintId = useId()
+  const close = () => { setListImportOpen(false); setListImportUrl('') }
+  const google = listImportProvider === 'google'
+  const cannotImport = !listImportUrl.trim() || listImportLoading
+  const providerLabel = (provider: ListProvider) => provider === 'google' ? t('places.importGoogleList') : t('places.importNaverList')
+
+  return (
+    <DialogShell
+      onClose={close}
+      labelledBy={titleId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><ListPlus size={20} strokeWidth={1.9} className="text-content" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={titleId}
+          onClose={close}
+          title={t('places.importList')}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={close}>{t('common.cancel')}</DialogButton>
+          <DialogButton
+            variant="primary"
+            onClick={handleListImport}
+            disabled={cannotImport}
+            icon={listImportLoading ? <Loader2 size={14} className="animate-spin" /> : undefined}
+          >
+            {listImportLoading ? t('common.loading') : t('common.import')}
+          </DialogButton>
+        </DialogFooter>
+      )}
     >
-      <div
-        role="presentation"
-        onClick={e => e.stopPropagation()}
-        className="bg-surface-card"
-        style={{ borderRadius: 16, width: '100%', maxWidth: 440, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)' }}
-      >
-        <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 700, marginBottom: 4 }}>
-          {t('places.importList')}
-        </div>
-        {hasMultipleListImportProviders && (
-          <div style={{ display: 'flex', gap: 6, marginBottom: 10 }}>
-            {availableListImportProviders.map(provider => (
-              <button type="button"
-                key={provider}
-                onClick={() => setListImportProvider(provider)}
-                className={listImportProvider === provider ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-muted'}
-                style={{
-                  padding: '6px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
-                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: 'inherit',
-                }}
-              >
-                {provider === 'google' ? t('places.importGoogleList') : t('places.importNaverList')}
-              </button>
-            ))}
-          </div>
+      {hasMultipleListImportProviders && (
+        <EditorField label={t('settings.aiParsing.provider')}>
+          <Segmented<ListProvider>
+            fill
+            label={t('settings.aiParsing.provider')}
+            value={listImportProvider}
+            onChange={setListImportProvider}
+            options={availableListImportProviders.map(provider => ({ value: provider, label: providerLabel(provider) }))}
+          />
+        </EditorField>
+      )}
+
+      <EditorField
+        label={t('reservations.urlLabel')}
+        htmlFor={urlId}
+        hint={(
+          <>
+            {t(google ? 'places.googleListHint' : 'places.naverListHint')}
+            {/* Same box, same Share button: which screen the link came from is the URL's
+                business, and until it said so nobody knew a route could be pasted here. */}
+            {google && <span className="mt-1 block">{t('places.googleDirHint')}</span>}
+          </>
         )}
-        <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginBottom: 16 }}>
-          {t(listImportProvider === 'google' ? 'places.googleListHint' : 'places.naverListHint')}
-          {/* Same box, same Share button: which screen the link came from is the URL's
-              business, and until it said so nobody knew a route could be pasted here. */}
-          {listImportProvider === 'google' ? <div style={{ marginTop: 4 }}>{t('places.googleDirHint')}</div> : null}
-        </div>
+      >
         <input
+          id={urlId}
           type="text"
           value={listImportUrl}
           onChange={e => setListImportUrl(e.target.value)}
           onKeyDown={e => { if (e.key === 'Enter' && !listImportLoading) handleListImport() }}
-          placeholder={listImportProvider === 'google' ? 'https://maps.app.goo.gl/...' : 'https://naver.me/...'}
+          placeholder={google ? 'https://maps.app.goo.gl/...' : 'https://naver.me/...'}
           autoFocus
-          className="bg-surface-tertiary text-content"
-          style={{
-            width: '100%', padding: '10px 14px', borderRadius: 10,
-            border: '1px solid var(--border-primary)',
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none',
-            fontFamily: 'inherit', boxSizing: 'border-box',
-          }}
+          className={INPUT}
         />
-        {canEnrichImport && (
-          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginTop: 12 }}>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div className="text-content" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t('places.enrichOnImport')}</div>
-              <div className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginTop: 2 }}>{t('places.enrichOnImportHint')}</div>
-            </div>
-            <ToggleSwitch on={listImportEnrich} onToggle={() => setListImportEnrich(!listImportEnrich)} />
+      </EditorField>
+
+      {canEnrichImport && (
+        <div className="flex items-start gap-3 rounded-[14px] border border-edge-faint bg-surface-secondary p-3">
+          <div className="min-w-0 flex-1">
+            <div className="font-semibold text-content" style={fs(12.5, 'body')}>{t('places.enrichOnImport')}</div>
+            <div id={enrichHintId} className="mt-0.5 text-content-faint" style={fs(12, 'body')}>{t('places.enrichOnImportHint')}</div>
           </div>
-        )}
-        <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
-          <button type="button"
-            onClick={() => { setListImportOpen(false); setListImportUrl('') }}
-            className="text-content"
-            style={{
-              padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)',
-              background: 'none', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
-              cursor: 'pointer', fontFamily: 'inherit',
-            }}
-          >
-            {t('common.cancel')}
-          </button>
-          <button type="button"
-            onClick={handleListImport}
-            disabled={!listImportUrl.trim() || listImportLoading}
-            className={!listImportUrl.trim() || listImportLoading ? 'bg-surface-tertiary text-content-faint' : 'bg-accent text-accent-text'}
-            style={{
-              padding: '8px 16px', borderRadius: 10, border: 'none',
-              fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, cursor: !listImportUrl.trim() || listImportLoading ? 'default' : 'pointer',
-              fontFamily: 'inherit',
-            }}
-          >
-            {listImportLoading ? t('common.loading') : t('common.import')}
-          </button>
+          <ToggleSwitch
+            on={listImportEnrich}
+            onToggle={() => setListImportEnrich(!listImportEnrich)}
+            label={t('places.enrichOnImport')}
+            describedBy={enrichHintId}
+          />
         </div>
-      </div>
-    </div>,
-    document.body
+      )}
+    </DialogShell>
   )
 }
diff --git a/client/src/components/Planner/PlacesSidebarRow.tsx b/client/src/components/Planner/PlacesSidebarRow.tsx
index 2fbf6b278..c3849a2c6 100644
--- a/client/src/components/Planner/PlacesSidebarRow.tsx
+++ b/client/src/components/Planner/PlacesSidebarRow.tsx
@@ -1,10 +1,13 @@
-import React from 'react'
+import React, { useId } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { Plus, Check, Star } from 'lucide-react'
 import PlaceAvatar from '../shared/PlaceAvatar'
+import { Tooltip } from '../shared/Tooltip'
+import { fs } from '../shared/DialogShell'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { resolveTrackColor } from '../Map/trackColors'
+import { MoreButton, SoftPill, type MenuEntry } from './planParts'
 import type { Place, Category } from '../../types'
 
 interface MemoPlaceRowProps {
@@ -21,6 +24,8 @@ interface MemoPlaceRowProps {
   t: (key: string, params?: Record<string, any>) => string
   onPlaceClick: (id: number | null) => void
   onContextMenu: (e: React.MouseEvent, place: Place) => void
+  /** The same entries as the right-click menu, for the row's "…". */
+  menuItems: (place: Place, dayId: number | null) => MenuEntry[]
   onAssignToDay: (placeId: number, dayId?: number) => void
   toggleSelected: (id: number) => void
   setDayPickerPlace: (place: any) => void
@@ -28,13 +33,17 @@ interface MemoPlaceRowProps {
 }
 
 export const MemoPlaceRow = React.memo(function MemoPlaceRow({
-  place, category: cat, isSelected, isPlanned, inDay, isChecked,
-  selectMode, selectedDayId, canEditPlaces, isMobile, t,
-  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
+  place, category: cat, isSelected, inDay, isChecked,
+  selectMode, selectedDayId, isMobile, t,
+  onPlaceClick, onContextMenu, menuItems, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
 }: MemoPlaceRowProps) {
+  const nameId = useId()
   const hasGeometry = Boolean(place.route_geometry)
   // Touch is reached through a long press instead of being locked out (#1616).
   const dragDisabled = isMobile
+  const showAddToDay = !selectMode && !inDay && selectedDayId !== null
+  // Below lg a tap opens the day picker sheet, which carries the same actions.
+  const showMore = !selectMode && !isMobile
   // One place for what a row does, so the keyboard path below cannot drift from the click.
   const activate = () => {
     if (selectMode) {
@@ -45,13 +54,21 @@ export const MemoPlaceRow = React.memo(function MemoPlaceRow({
       onPlaceClick(isSelected ? null : place.id)
     }
   }
+  let tone = 'hover:bg-surface-hover'
+  if (isChecked) tone = 'bg-accent-subtle'
+  else if (isSelected) tone = 'bg-surface-selected'
+  const CatIcon = cat ? getCategoryIcon(cat.icon) : null
+  const hasRating = (place.rating_count ?? 0) > 0 && place.rating_avg != null
+  const subline = place.description || place.address || cat?.name
   return (
     <div
-      key={place.id}
       ref={element => registerPlaceRow(place.id, element)}
       role="option"
       tabIndex={0}
       aria-selected={isSelected}
+      // Named by the place alone: the indicators, the rating and the buttons inside
+      // would otherwise run into the name a screen reader (and a test) reads first.
+      aria-labelledby={nameId}
       data-place-id={place.id}
       draggable={!selectMode && !dragDisabled}
       onDragStart={e => {
@@ -62,88 +79,77 @@ export const MemoPlaceRow = React.memo(function MemoPlaceRow({
       }}
       onClick={activate}
       onKeyDown={e => {
-        // Only when the row itself has focus — the "+" button inside it keeps its own key handling.
+        // Only when the row itself has focus — the buttons inside it keep their own key handling.
         if (e.target !== e.currentTarget) return
         if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); activate() }
       }}
       onContextMenu={selectMode ? undefined : e => onContextMenu(e, place)}
-      style={{
-        display: 'flex', alignItems: 'center', gap: 10,
-        padding: '9px 14px 9px 16px',
-        cursor: selectMode || dragDisabled ? 'pointer' : 'grab',
-        background: isChecked ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : isSelected ? 'var(--border-faint)' : 'transparent',
-        borderBottom: '1px solid var(--border-faint)',
-        transition: 'background 0.1s',
-        contentVisibility: 'auto',
-        containIntrinsicSize: '0 52px',
-      }}
-      onMouseEnter={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'var(--bg-hover)' }}
-      onMouseLeave={e => { if (!isSelected && !isChecked) e.currentTarget.style.background = 'transparent' }}
+      className={`group mb-px flex items-center gap-2.5 rounded-[12px] px-2.5 py-2 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[color:var(--text-primary)] ${tone} ${selectMode || dragDisabled ? 'cursor-pointer' : 'cursor-grab'}`}
+      style={{ contentVisibility: 'auto', containIntrinsicSize: '0 52px' }}
     >
       {selectMode && (
-        <div className={isChecked ? 'bg-accent' : 'bg-transparent'} style={{
-          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
-          border: isChecked ? 'none' : '1.5px solid var(--border-primary)',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-        }}>
-          {isChecked && <Check size={10} strokeWidth={3} color="white" />}
-        </div>
+        <span className={`grid h-[18px] w-[18px] flex-none place-items-center rounded-full transition-colors ${isChecked ? 'bg-accent' : 'border-[1.5px] border-edge bg-surface-card'}`}>
+          {isChecked && <Check size={11} strokeWidth={3} className="text-accent-text" />}
+        </span>
       )}
       <PlaceAvatar place={place} category={cat} size={34} />
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-1.5">
           {/* A stroke of the colour the track is drawn in — the map has no legend
               of its own, so this is what tells you which line is this row (#776).
-              A line rather than another 11px icon, so it doesn't read as a second
-              category glyph next to the one below. */}
+              A line rather than another icon, so it doesn't read as a second
+              category glyph next to the one beside it. */}
           {hasGeometry && (
-            <span title={t('places.trackIndicator')} style={{ display: 'inline-flex', flexShrink: 0 }}>
-              <span style={{ display: 'block', width: 14, height: 3, borderRadius: 999, background: resolveTrackColor(place) }} />
-            </span>
+            <Tooltip label={t('places.trackIndicator')}>
+              <span role="img" aria-label={t('places.trackIndicator')} className="inline-flex flex-none">
+                <span className="block" style={{ width: 14, height: 3, borderRadius: 999, background: resolveTrackColor(place) }} />
+              </span>
+            </Tooltip>
           )}
-          {cat && (() => {
-            const CatIcon = getCategoryIcon(cat.icon)
-            return <span title={cat.name} style={{ display: 'inline-flex', flexShrink: 0 }}><CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} /></span>
-          })()}
-          <span className="text-content" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+          {cat && CatIcon && (
+            <Tooltip label={cat.name}>
+              <span role="img" aria-label={cat.name} className="inline-flex flex-none">
+                <CatIcon size={12} strokeWidth={2.2} style={{ color: cat.color || 'var(--text-muted)' }} />
+              </span>
+            </Tooltip>
+          )}
+          <span id={nameId} className="min-w-0 truncate font-semibold leading-tight text-content" style={fs(13, 'body')}>
             {place.name}
           </span>
           {/* Average member rating (#1435). */}
-          {(place.rating_count ?? 0) > 0 && place.rating_avg != null && (
-            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-secondary)', fontVariantNumeric: 'tabular-nums' }}>
-              <Star size={9} color="#facc15" fill="#facc15" />
-              {(Math.round(place.rating_avg * 10) / 10).toLocaleString()}
-            </span>
+          {hasRating && (
+            <SoftPill className="tabular-nums" icon={<Star size={9} strokeWidth={2.2} fill="currentColor" className="flex-none text-warning" />}>
+              {(Math.round(place.rating_avg! * 10) / 10).toLocaleString()}
+            </SoftPill>
           )}
         </div>
-        {(place.description || place.address || cat?.name) && (
-          <div style={{ marginTop: 2 }}>
-            {/* Rendered, like the same line in the day plan: the description is
-                Markdown everywhere else, and printing it raw here was the one
-                place a formatted place read as `_underscores_`. Still clamped to
-                one line — the row is a list entry, not the inspector. */}
-            <div className="collab-note-md text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2, maxHeight: '1.2em' }}>
-              <Markdown remarkPlugins={[remarkGfm]}>{place.description || place.address || cat?.name || ''}</Markdown>
-            </div>
+        {subline && (
+          // Rendered, like the same line in the day plan: the description is
+          // Markdown everywhere else, and printing it raw here was the one
+          // place a formatted place read as `_underscores_`. Still clamped to
+          // one line — the row is a list entry, not the inspector.
+          <div className="collab-note-md mt-0.5 overflow-hidden text-ellipsis whitespace-nowrap text-content-faint" style={{ ...fs(11), lineHeight: 1.2, maxHeight: '1.2em' }}>
+            <Markdown remarkPlugins={[remarkGfm]}>{subline}</Markdown>
           </div>
         )}
       </div>
-      <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-        {!selectMode && !inDay && selectedDayId !== null && (
-          <button type="button"
-            onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
-            className="bg-surface-hover text-content-faint"
-            style={{
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-              width: 20, height: 20, borderRadius: 6,
-              border: 'none', cursor: 'pointer',
-              padding: 0, transition: 'background 0.15s, color 0.15s',
-            }}
-            onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
-            onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
-          ><Plus size={12} strokeWidth={2.5} /></button>
-        )}
-      </div>
+      {(showAddToDay || showMore) && (
+        // The row selects on click; the buttons and the menu they open act on their own.
+        <div role="presentation" className="flex flex-none items-center gap-0.5" onClick={e => e.stopPropagation()}>
+          {showAddToDay && (
+            <Tooltip label={t('planner.addToDay')}>
+              <button type="button"
+                onClick={() => onAssignToDay(place.id)}
+                aria-label={t('planner.addToDay')}
+                className="grid h-[26px] w-[26px] place-items-center rounded-full bg-surface-card text-content-muted shadow-sm ring-1 ring-edge-faint transition-colors hover:bg-accent hover:text-accent-text hover:ring-transparent"
+              >
+                <Plus size={13} strokeWidth={2.4} />
+              </button>
+            </Tooltip>
+          )}
+          {showMore && <MoreButton label={t('files.menu')} items={menuItems(place, selectedDayId)} />}
+        </div>
+      )}
     </div>
   )
 })
diff --git a/client/src/components/Planner/PlacesSidebarSelectionBar.test.tsx b/client/src/components/Planner/PlacesSidebarSelectionBar.test.tsx
index 1435cc83c..7acaccc2b 100644
--- a/client/src/components/Planner/PlacesSidebarSelectionBar.test.tsx
+++ b/client/src/components/Planner/PlacesSidebarSelectionBar.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-SELBAR-001 to FE-PLANNER-SELBAR-014
+// FE-PLANNER-SELBAR-001 to FE-PLANNER-SELBAR-015
 import userEvent from '@testing-library/user-event';
 import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import { buildPlace } from '../../../tests/helpers/factories';
@@ -19,6 +19,8 @@ interface BarProps {
   setCategoryPickerOpen?: (open: boolean) => void;
   setSaveToListOpen?: (open: boolean) => void;
   onBulkDeletePlaces?: (ids: number[]) => void;
+  markSelectionVisited?: () => Promise<void>;
+  markVisitedBusy?: boolean;
 }
 
 // The bar reads a handful of fields off the sidebar state; the rest of the hook
@@ -36,6 +38,8 @@ function Bar(overrides: BarProps) {
     setCategoryPickerOpen: () => {},
     setSaveToListOpen: () => {},
     onBulkDeletePlaces: undefined,
+    markSelectionVisited: async () => {},
+    markVisitedBusy: false,
     ...overrides,
   };
   return <PlacesSelectionBar {...(state as unknown as SidebarState)} />;
@@ -44,7 +48,7 @@ function Bar(overrides: BarProps) {
 describe('PlacesSelectionBar', () => {
   it('FE-PLANNER-SELBAR-001: reports how many places are selected', () => {
     render(<Bar selectedIds={new Set([1, 2])} />);
-    expect(screen.getByText('2 selected')).toBeInTheDocument();
+    expect(screen.getByRole('status', { name: '2 selected' })).toHaveTextContent('2');
   });
 
   it('FE-PLANNER-SELBAR-002: offers "Select all" while the selection is partial', () => {
@@ -167,24 +171,44 @@ describe('PlacesSelectionBar', () => {
     expect(onBulkDeletePlaces).not.toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-SELBAR-013: hovering an enabled button highlights it and leaving resets it', () => {
+  it('FE-PLANNER-SELBAR-013: hovering an action shows its name as a tooltip, and leaving hides it', async () => {
+    const user = userEvent.setup();
     render(<Bar selectedIds={new Set([1])} collectionsEnabled />);
 
-    for (const name of ['Select all', 'Change category', 'Save to Collection', 'Delete selected']) {
+    for (const name of ['Select all', 'Change category', 'Save to Collection', 'Mark visited in your lists', 'Delete selected']) {
       const btn = screen.getByRole('button', { name });
-      fireEvent.mouseEnter(btn);
-      fireEvent.mouseLeave(btn);
-      expect(btn.style.background).toBe('transparent');
+      expect(btn).toBeEnabled();
+      await user.hover(btn);
+      expect(await screen.findByRole('tooltip')).toHaveTextContent(name);
+      await user.unhover(btn);
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
     }
   });
 
-  it('FE-PLANNER-SELBAR-014: hovering a disabled button leaves it unstyled', () => {
-    render(<Bar selectedIds={new Set()} collectionsEnabled />);
+  it('FE-PLANNER-SELBAR-014: without a selection every action but "Select all" is inert', () => {
+    const onBulkDeletePlaces = vi.fn((_ids: number[]) => {});
+    const markSelectionVisited = vi.fn(async () => {});
+    render(<Bar selectedIds={new Set()} collectionsEnabled onBulkDeletePlaces={onBulkDeletePlaces} markSelectionVisited={markSelectionVisited} />);
 
-    for (const name of ['Change category', 'Save to Collection', 'Delete selected']) {
+    expect(screen.getByRole('button', { name: 'Select all' })).toBeEnabled();
+    for (const name of ['Change category', 'Save to Collection', 'Mark visited in your lists', 'Delete selected']) {
       const btn = screen.getByRole('button', { name });
-      fireEvent.mouseEnter(btn);
-      expect(btn.style.background).toBe('');
+      expect(btn).toBeDisabled();
+      fireEvent.click(btn);
     }
+    expect(onBulkDeletePlaces).not.toHaveBeenCalled();
+    expect(markSelectionVisited).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-SELBAR-015: "mark visited" runs for the selection and is locked while it runs', async () => {
+    const user = userEvent.setup();
+    const markSelectionVisited = vi.fn(async () => {});
+    const { rerender } = render(<Bar selectedIds={new Set([1, 2])} collectionsEnabled markSelectionVisited={markSelectionVisited} />);
+
+    await user.click(screen.getByRole('button', { name: 'Mark visited in your lists' }));
+    expect(markSelectionVisited).toHaveBeenCalledTimes(1);
+
+    rerender(<Bar selectedIds={new Set([1, 2])} collectionsEnabled markSelectionVisited={markSelectionVisited} markVisitedBusy />);
+    expect(screen.getByRole('button', { name: 'Mark visited in your lists' })).toBeDisabled();
   });
 });
diff --git a/client/src/components/Planner/PlacesSidebarSelectionBar.tsx b/client/src/components/Planner/PlacesSidebarSelectionBar.tsx
index c94f34855..1943d0244 100644
--- a/client/src/components/Planner/PlacesSidebarSelectionBar.tsx
+++ b/client/src/components/Planner/PlacesSidebarSelectionBar.tsx
@@ -1,113 +1,88 @@
-import { Check, CheckCircle2, Loader2, Tag, Trash2, Bookmark } from 'lucide-react'
-import Tooltip from '../shared/Tooltip'
+import type { MouseEvent, ReactNode } from 'react'
+import { Bookmark, CheckCheck, CheckCircle2, Loader2, Tag, Trash2, X } from 'lucide-react'
+import { fs } from '../shared/DialogShell'
+import { Tooltip } from '../shared/Tooltip'
 import type { SidebarState } from './usePlacesSidebar'
 
-export function PlacesSelectionBar(S: SidebarState) {
-  const { t, selectedIds, filtered, setSelectedIds, isMobile, setPendingDeleteIds, onBulkDeletePlaces, setCategoryPickerOpen, collectionsEnabled, setSaveToListOpen, markSelectionVisited, markVisitedBusy } = S
+/** An action on the dark selection bar: an icon named by its tooltip. */
+function BarAction({ label, onClick, disabled = false, danger = false, children }: {
+  label: string
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void
+  disabled?: boolean
+  danger?: boolean
+  children: ReactNode
+}) {
   return (
-    <div style={{
-      margin: '6px 16px', padding: '5px 8px 5px 10px', borderRadius: 8,
-      background: 'color-mix(in srgb, var(--accent) 10%, transparent)',
-      display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0, fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
-    }}>
-      <span className="text-accent" style={{ flex: 1, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-        {t('places.selectionCount', { count: selectedIds.size })}
-      </span>
-      <Tooltip label={selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')} placement="bottom">
-      <button type="button"
-        onClick={() => {
-          if (selectedIds.size === filtered.length) setSelectedIds(new Set())
-          else setSelectedIds(new Set(filtered.map(p => p.id)))
-        }}
-        aria-label={selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')}
-        className="bg-transparent text-content-muted"
-        style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 24, height: 24, borderRadius: 6, border: 'none',
-          cursor: 'pointer', padding: 0,
-        }}
-        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
-        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-      >
-        <Check size={13} strokeWidth={2.2} />
+    <Tooltip label={label} placement="top">
+      <button type="button" onClick={onClick} disabled={disabled} aria-label={label}
+        className={`grid h-8 w-8 flex-none place-items-center rounded-[10px] transition-colors enabled:hover:bg-[color:color-mix(in_srgb,var(--accent-text)_14%,transparent)] disabled:cursor-default disabled:opacity-35 ${danger ? 'text-danger' : ''}`}>
+        {children}
       </button>
-      </Tooltip>
-      <Tooltip label={t('places.changeCategory')} placement="bottom">
-      <button type="button"
-        onClick={() => { if (selectedIds.size === 0) return; setCategoryPickerOpen(true) }}
-        disabled={selectedIds.size === 0}
-        aria-label={t('places.changeCategory')}
-        className={selectedIds.size > 0 ? 'bg-transparent text-content-muted' : 'bg-transparent text-content-faint'}
-        style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 24, height: 24, borderRadius: 6, border: 'none',
-          cursor: selectedIds.size > 0 ? 'pointer' : 'default', padding: 0,
-        }}
-        onMouseEnter={e => { if (selectedIds.size > 0) e.currentTarget.style.background = 'var(--bg-hover)' }}
-        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-      >
-        <Tag size={13} strokeWidth={2} />
-      </button>
-      </Tooltip>
-      {collectionsEnabled && (
-        <Tooltip label={t('inspector.saveToCollection')} placement="bottom">
-        <button type="button"
-          onClick={() => { if (selectedIds.size === 0) return; setSaveToListOpen(true) }}
-          disabled={selectedIds.size === 0}
-          aria-label={t('inspector.saveToCollection')}
-          className={selectedIds.size > 0 ? 'bg-transparent text-content-muted' : 'bg-transparent text-content-faint'}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            width: 24, height: 24, borderRadius: 6, border: 'none',
-            cursor: selectedIds.size > 0 ? 'pointer' : 'default', padding: 0,
-          }}
-          onMouseEnter={e => { if (selectedIds.size > 0) e.currentTarget.style.background = 'var(--bg-hover)' }}
-          onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-        >
-          <Bookmark size={13} strokeWidth={2} />
-        </button>
+    </Tooltip>
+  )
+}
+
+/**
+ * The bar that rises at the foot of the column while places are being picked:
+ * how many, what to do with them, and the way out. Dark like a toast, so it
+ * reads as the one thing in charge while the list is in this mode.
+ */
+export function PlacesSelectionBar(S: SidebarState) {
+  const { t, selectedIds, filtered, setSelectedIds, isMobile, setPendingDeleteIds, onBulkDeletePlaces, setCategoryPickerOpen, collectionsEnabled, setSaveToListOpen, markSelectionVisited, markVisitedBusy, exitSelectMode } = S
+  const none = selectedIds.size === 0
+  // An empty list keeps "Select all": 0 === 0 would otherwise read as everything selected.
+  const allLabel = selectedIds.size === filtered.length && filtered.length > 0 ? t('common.deselectAll') : t('common.selectAll')
+  return (
+    <div className="flex-none p-2">
+      <div className="flex items-center gap-0.5 rounded-[14px] bg-accent py-1 pl-1.5 pr-1 text-accent-text shadow-lg">
+        {/* Just the number, on a white badge: the words are its name and its tooltip. */}
+        <Tooltip label={t('places.selectionCount', { count: selectedIds.size })} placement="top">
+          <span role="status" aria-label={t('places.selectionCount', { count: selectedIds.size })}
+            className="grid h-7 min-w-7 flex-none place-items-center rounded-full bg-surface-card px-2 font-geist font-bold tabular-nums text-content"
+            style={fs(12.5, 'body')}>
+            {selectedIds.size}
+          </span>
         </Tooltip>
-      )}
-      {collectionsEnabled && (
-        <Tooltip label={t('collections.markVisitedSelection')} placement="bottom">
-        <button type="button"
-          onClick={() => { if (selectedIds.size === 0) return; void markSelectionVisited() }}
-          disabled={selectedIds.size === 0 || markVisitedBusy}
-          aria-label={t('collections.markVisitedSelection')}
-          className={selectedIds.size > 0 ? 'bg-transparent text-content-muted' : 'bg-transparent text-content-faint'}
-          style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'center',
-            width: 24, height: 24, borderRadius: 6, border: 'none',
-            cursor: selectedIds.size > 0 ? 'pointer' : 'default', padding: 0,
+        <span className="flex-1" />
+        <BarAction
+          label={allLabel}
+          onClick={() => {
+            if (selectedIds.size === filtered.length) setSelectedIds(new Set())
+            else setSelectedIds(new Set(filtered.map(p => p.id)))
           }}
-          onMouseEnter={e => { if (selectedIds.size > 0) e.currentTarget.style.background = 'var(--bg-hover)' }}
-          onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
         >
-          {markVisitedBusy ? <Loader2 size={13} className="animate-spin" /> : <CheckCircle2 size={13} strokeWidth={2} />}
-        </button>
-        </Tooltip>
-      )}
-      <Tooltip label={t('places.deleteSelected')} placement="bottom">
-      <button type="button"
-        onClick={() => {
-          if (selectedIds.size === 0) return
-          if (isMobile) setPendingDeleteIds(Array.from(selectedIds))
-          else onBulkDeletePlaces?.(Array.from(selectedIds))
-        }}
-        disabled={selectedIds.size === 0}
-        aria-label={t('places.deleteSelected')}
-        className={selectedIds.size > 0 ? 'bg-transparent text-[#ef4444]' : 'bg-transparent text-content-faint'}
-        style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 24, height: 24, borderRadius: 6, border: 'none',
-          cursor: selectedIds.size > 0 ? 'pointer' : 'default', padding: 0,
-        }}
-        onMouseEnter={e => { if (selectedIds.size > 0) e.currentTarget.style.background = 'color-mix(in srgb, #ef4444 14%, transparent)' }}
-        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-      >
-        <Trash2 size={13} strokeWidth={2} />
-      </button>
-      </Tooltip>
+          <CheckCheck size={15} strokeWidth={2} />
+        </BarAction>
+        <BarAction label={t('places.changeCategory')} disabled={none} onClick={() => { if (none) return; setCategoryPickerOpen(true) }}>
+          <Tag size={14} strokeWidth={2} />
+        </BarAction>
+        {collectionsEnabled && (
+          <BarAction label={t('inspector.saveToCollection')} disabled={none} onClick={() => { if (none) return; setSaveToListOpen(true) }}>
+            <Bookmark size={14} strokeWidth={2} />
+          </BarAction>
+        )}
+        {collectionsEnabled && (
+          <BarAction label={t('collections.markVisitedSelection')} disabled={none || markVisitedBusy} onClick={() => { if (none) return; void markSelectionVisited() }}>
+            {markVisitedBusy ? <Loader2 size={14} className="animate-spin" /> : <CheckCircle2 size={14} strokeWidth={2} />}
+          </BarAction>
+        )}
+        <BarAction
+          label={t('places.deleteSelected')}
+          disabled={none}
+          danger
+          onClick={() => {
+            if (none) return
+            if (isMobile) setPendingDeleteIds(Array.from(selectedIds))
+            else onBulkDeletePlaces?.(Array.from(selectedIds))
+          }}
+        >
+          <Trash2 size={14} strokeWidth={2} />
+        </BarAction>
+        <span className="mx-1 h-5 w-px flex-none bg-[color:color-mix(in_srgb,var(--accent-text)_22%,transparent)]" />
+        <BarAction label={t('packing.editDone')} onClick={exitSelectMode}>
+          <X size={15} strokeWidth={2.2} />
+        </BarAction>
+      </div>
     </div>
   )
 }
diff --git a/client/src/components/Planner/ReservationModal.test.tsx b/client/src/components/Planner/ReservationModal.test.tsx
index e3d06df7e..b9d6a7922 100644
--- a/client/src/components/Planner/ReservationModal.test.tsx
+++ b/client/src/components/Planner/ReservationModal.test.tsx
@@ -77,10 +77,10 @@ beforeEach(() => {
   vi.clearAllMocks();
 });
 
-// The booking type is one dropdown now (BookingTypeSelect): open it from the
-// field under the "Booking Type" label, then pick the option from its menu.
+// The booking type is a pill in the dialog's head band, named "Booking Type: <type>":
+// open it, then pick the option from its menu.
 function typeField(): HTMLButtonElement {
-  return screen.getByText('Booking Type').parentElement!.querySelector('button') as HTMLButtonElement;
+  return screen.getByRole('button', { name: /^Booking Type:/ }) as HTMLButtonElement;
 }
 async function pickType(name: RegExp) {
   await userEvent.click(typeField());
@@ -133,8 +133,8 @@ describe('ReservationModal', () => {
     expect(screen.getByRole('button', { name: /^Event$/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /^Tour$/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /^Parking$/i })).toBeInTheDocument();
-    // The field itself and its option both read "Other".
-    expect(screen.getAllByRole('button', { name: /^Other$/i })).toHaveLength(2);
+    // The pill reads "Booking Type: Other", so only its option is named plain "Other".
+    expect(screen.getAllByRole('button', { name: /^Other$/i })).toHaveLength(1);
     expect(screen.queryByRole('button', { name: /^Flight$/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /^Train$/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /^Car$/i })).not.toBeInTheDocument();
@@ -704,7 +704,7 @@ describe('ReservationModal', () => {
   it('FE-PLANNER-RESMODAL-046: other type renders and saves correctly', async () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
-    await userEvent.click(screen.getByRole('button', { name: /^Other$/i }));
+    await pickType(/^Other$/i);
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Misc item');
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
     await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
@@ -1503,8 +1503,8 @@ describe('ReservationModal', () => {
     render(<ReservationModal {...defaultProps} onSave={onSave} />);
 
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Boat trip');
-    await userEvent.click(screen.getByText('Pending'));
-    await userEvent.click(screen.getByRole('button', { name: 'Confirmed' }));
+    // The status pill in the head band flips pending to confirmed.
+    await userEvent.click(screen.getByRole('button', { name: 'Set to Confirmed' }));
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
diff --git a/client/src/components/Planner/ReservationModal.tsx b/client/src/components/Planner/ReservationModal.tsx
index fc5d9fe55..67c4da01a 100644
--- a/client/src/components/Planner/ReservationModal.tsx
+++ b/client/src/components/Planner/ReservationModal.tsx
@@ -1,9 +1,8 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { useState, useEffect, useRef, useMemo, useId } from 'react'
 import { localIsoDate } from '../../utils/localDate'
 import { useParams } from 'react-router'
 import { useTripStore } from '../../store/tripStore'
 import { useAddonStore } from '../../store/addonStore'
-import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { BookingCodeInput } from '../shared/BookingCode'
 import { buildAssignmentOptions } from './assignmentOptions'
@@ -18,7 +17,6 @@ import { resolveDayId } from '../../utils/formatters'
 import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, BudgetItem } from '../../types'
 import { BookingCostsSection } from './BookingCostsSection'
 import { BookingLinkAndFiles } from './BookingLinkAndFiles'
-import { BookingTypeSelect } from './BookingTypeSelect'
 import { importedPriceEntry } from './importedPrice'
 import { TravelerPicker } from './TravelerPicker'
 import type { TripMember } from '../Budget/BudgetPanelMemberChips'
@@ -26,6 +24,11 @@ import type { BookingExpenseRequest } from './BookingCostsSection.types'
 import type { BookingReviewDraft } from './parsedItemToDraft'
 import { typeToCostCategory } from '@trek/shared'
 import { stayPlaces } from '../../utils/stayPlaces'
+import { BookingDialogHeader, StatusPill } from './bookings/BookingDialogShell'
+import { DialogShell, DialogFooter, FooterSpacer, DialogButton } from '../shared/DialogShell'
+import { INPUT, TEXTAREA, LABEL, GRID_2, GRID_3, EditorField, PillSelect } from '../shared/dialogParts'
+import { typeInfo } from './bookings/bookingsModel'
+import type { StatusTone } from './bookings/bookingParts'
 
 const TYPE_OPTIONS = [
   { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
@@ -64,6 +67,7 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
   const toast = useToast()
   const { t, locale } = useTranslation()
   const fileInputRef = useRef(null)
+  const titleId = useId()
 
   const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
   const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
@@ -371,56 +375,79 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
       )
     : []
 
-  const inputClass = 'w-full border border-edge rounded-[10px] px-[12px] py-[8px] text-[13px] font-[inherit] outline-none box-border text-content bg-surface-input'
-  const labelClass = 'block text-[11px] font-semibold text-content-faint mb-[5px] uppercase tracking-[0.03em]'
+  const status = form.status === 'confirmed' ? 'confirmed' : 'pending'
+  const tone: StatusTone = form.type === 'transit' ? 'transit' : status
+  const shownType = typeInfo(form.type)
+  const saveDisabled = isSaving || !form.title.trim() || isEndBeforeStart
+  const dayOptions = days.map(d => {
+    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
+    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
+    return {
+      value: d.id,
+      label: d.title || t('dayplan.dayN', { n: d.day_number }),
+      badge: dateBadge ?? dayBadge,
+    }
+  })
+
+  const header = (
+    <BookingDialogHeader
+      tone={tone}
+      type={form.type}
+      labelId={titleId}
+      onClose={onClose}
+      eyebrow={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
+      titleInput={{
+        value: form.title,
+        onChange: v => set('title', v),
+        label: t('reservations.titleLabel'),
+        placeholder: t('reservations.titlePlaceholder'),
+        required: true,
+      }}
+      pills={(
+        <>
+          <StatusPill status={status} onToggle={() => set('status', status === 'confirmed' ? 'pending' : 'confirmed')} />
+          <PillSelect
+            label={t('reservations.bookingType')}
+            value={form.type}
+            onChange={value => set('type', value)}
+            options={TYPE_OPTIONS.map(o => ({
+              value: o.value,
+              label: t(o.labelKey),
+              icon: <o.Icon size={14} style={{ color: typeInfo(o.value).color }} />,
+            }))}
+            fallback={{ label: t(shownType.chipKey), icon: <shownType.Icon size={14} style={{ color: shownType.color }} /> }}
+          />
+        </>
+      )}
+    />
+  )
+
+  const footer = (
+    <DialogFooter>
+      <FooterSpacer />
+      <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+      <DialogButton variant="primary" onClick={handleSubmit} disabled={saveDisabled}>
+        {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+      </DialogButton>
+    </DialogFooter>
+  )
 
   return (
-    <Modal
-      isOpen={isOpen}
+    <DialogShell
+      open={isOpen}
       onClose={onClose}
-      title={reservation ? t('reservations.editTitle') : t('reservations.newTitle')}
-      size="2xl"
-      footer={
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
-          <button type="button" onClick={onClose} className="text-content-muted" style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>
-            {t('common.cancel')}
-          </button>
-          <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim() || isEndBeforeStart} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() || isEndBeforeStart ? 0.5 : 1 }}>
-            {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-          </button>
-        </div>
-      }
+      labelledBy={titleId}
+      width="editor"
+      align="top"
+      onSubmit={handleSubmit}
+      header={header}
+      footer={footer}
     >
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-
-        {/* Type and travelers side by side at the head of the dialog */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 items-start">
-          <div>
-            <label className={labelClass}>{t('reservations.bookingType')}</label>
-            <BookingTypeSelect options={TYPE_OPTIONS} value={form.type} onChange={value => set('type', value)} />
-          </div>
-          {/* Travelers: trip members and guests on this booking (#1517) */}
-          <div>
-            <label className={labelClass}>{t('reservations.travelers.label')}</label>
-            <TravelerPicker tripMembers={tripMembers} selectedIds={travelerIds} onToggle={toggleTraveler} />
-          </div>
-        </div>
-
-        {/* Title */}
-        <div>
-          <label className={labelClass}>{t('reservations.titleLabel')} *</label>
-          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
-            placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
-        </div>
-
-        {/* Assignment Picker (hidden for hotels) */}
-        {form.type !== 'hotel' && assignmentOptions.length > 0 && (
-          <div>
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label className={labelClass}>
-                <Link2 size={10} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />
-                {t('reservations.linkAssignment')}
-              </label>
+      {/* When: the plan stop it belongs to, then start and end (hidden for hotels) */}
+      {form.type !== 'hotel' && (
+        <div className="flex flex-col gap-3">
+          {assignmentOptions.length > 0 && (
+            <EditorField label={<><Link2 size={10} className="mr-[3px] inline align-[-1px]" />{t('reservations.linkAssignment')}</>}>
               <CustomSelect
                 value={form.assignment_id}
                 onChange={value => {
@@ -441,66 +468,51 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                 searchable
                 size="sm"
               />
-            </div>
+            </EditorField>
+          )}
+          <div className={GRID_2}>
+            <EditorField label={t('reservations.date')}>
+              <CustomDatePicker
+                value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
+                onChange={d => {
+                  const [, tm] = (form.reservation_time || '').split('T')
+                  set('reservation_time', d ? (tm ? `${d}T${tm}` : d) : '')
+                }}
+                min={tripDateRange.min}
+                max={tripDateRange.max}
+              />
+            </EditorField>
+            <EditorField label={t('reservations.startTime')}>
+              <CustomTimePicker
+                value={(() => { const [, tm] = (form.reservation_time || '').split('T'); return tm || '' })()}
+                onChange={tm => {
+                  const [d] = (form.reservation_time || '').split('T')
+                  const selectedDay = days.find(dy => dy.id === selectedDayId)
+                  const date = d || selectedDay?.date || localIsoDate()
+                  set('reservation_time', tm ? `${date}T${tm}` : date)
+                }}
+              />
+            </EditorField>
+            <EditorField label={t('reservations.endDate')} error={isEndBeforeStart ? t('reservations.validation.endBeforeStart') : undefined}>
+              <CustomDatePicker
+                value={form.end_date}
+                onChange={d => set('end_date', d || '')}
+                min={tripDateRange.min}
+                max={tripDateRange.max}
+              />
+            </EditorField>
+            <EditorField label={t('reservations.endTime')}>
+              <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
+            </EditorField>
           </div>
-        )}
+        </div>
+      )}
 
-        {/* Start Date/Time + End Date/Time + Status (hidden for hotels) */}
-        {form.type !== 'hotel' && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.date')}</label>
-                <CustomDatePicker
-                  value={(() => { const [d] = (form.reservation_time || '').split('T'); return d || '' })()}
-                  onChange={d => {
-                    const [, tm] = (form.reservation_time || '').split('T')
-                    set('reservation_time', d ? (tm ? `${d}T${tm}` : d) : '')
-                  }}
-                  min={tripDateRange.min}
-                  max={tripDateRange.max}
-                />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.startTime')}</label>
-                <CustomTimePicker
-                  value={(() => { const [, tm] = (form.reservation_time || '').split('T'); return tm || '' })()}
-                  onChange={tm => {
-                    const [d] = (form.reservation_time || '').split('T')
-                    const selectedDay = days.find(dy => dy.id === selectedDayId)
-                    const date = d || selectedDay?.date || localIsoDate()
-                    set('reservation_time', tm ? `${date}T${tm}` : date)
-                  }}
-                />
-              </div>
-            </div>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.endDate')}</label>
-                <CustomDatePicker
-                  value={form.end_date}
-                  onChange={d => set('end_date', d || '')}
-                  min={tripDateRange.min}
-                  max={tripDateRange.max}
-                />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.endTime')}</label>
-                <CustomTimePicker value={form.reservation_end_time} onChange={v => set('reservation_end_time', v)} />
-              </div>
-            </div>
-            {isEndBeforeStart && (
-              <div className="text-[#ef4444]" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', marginTop: -6 }}>{t('reservations.validation.endBeforeStart')}</div>
-            )}
-          </>
-        )}
-
-        {/* Location */}
-        {/* Link an existing trip place/activity to any non-hotel booking (#1353). Hotels
-            keep their own accommodation-based place picker below. */}
-        {form.type !== 'hotel' && (
-          <div>
-            <label className={labelClass}>{t('reservations.meta.linkPlace')}</label>
+      {/* Where: a trip place/activity (#1353) and the address. Hotels pick their
+          place through the accommodation below. */}
+      {form.type !== 'hotel' && (
+        <div className={GRID_2}>
+          <EditorField label={t('reservations.meta.linkPlace')}>
             <CustomSelect
               value={form.place_id}
               onChange={value => {
@@ -522,44 +534,20 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
               searchable
               size="sm"
             />
-          </div>
-        )}
-
-        {form.type !== 'hotel' && (
-          <div>
-            <label className={labelClass}>{t('reservations.locationAddress')}</label>
+          </EditorField>
+          <EditorField label={t('reservations.locationAddress')}>
             <AddressInput value={form.location} onChange={v => set('location', v)}
-              placeholder={t('reservations.locationPlaceholder')} className={inputClass} />
-          </div>
-        )}
-
-        {/* Booking Code + Status */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-            <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
-              placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
-          </div>
-          <div>
-            <label className={labelClass}>{t('reservations.status')}</label>
-            <CustomSelect
-              value={form.status}
-              onChange={value => set('status', value)}
-              options={[
-                { value: 'pending', label: t('reservations.pending') },
-                { value: 'confirmed', label: t('reservations.confirmed') },
-              ]}
-              size="sm"
-            />
-          </div>
+              placeholder={t('reservations.locationPlaceholder')} className={INPUT} />
+          </EditorField>
         </div>
+      )}
 
-        {/* Hotel fields */}
-        {form.type === 'hotel' && (
-          <>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-              <div>
-                <label className={labelClass}>{t('reservations.meta.hotelPlace')}</label>
+      {/* The stay: place and nights, then the check-in window */}
+      {form.type === 'hotel' && (
+        <>
+          <div className="flex flex-col gap-3">
+            <div className={GRID_3}>
+              <EditorField label={t('reservations.meta.hotelPlace')}>
                 <CustomSelect
                   value={form.hotel_place_id}
                   onChange={value => {
@@ -583,9 +571,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                   searchable
                   size="sm"
                 />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.fromDay')}</label>
+              </EditorField>
+              <EditorField label={t('reservations.meta.fromDay')}>
                 <CustomSelect
                   value={form.hotel_start_day}
                   onChange={value => setForm(prev => ({
@@ -595,20 +582,11 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                       ? value : prev.hotel_end_day,
                   }))}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => {
-                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
-                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
-                    return {
-                      value: d.id,
-                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
-                      badge: dateBadge ?? dayBadge,
-                    }
-                  })}
+                  options={dayOptions}
                   size="sm"
                 />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.toDay')}</label>
+              </EditorField>
+              <EditorField label={t('reservations.meta.toDay')}>
                 <CustomSelect
                   value={form.hotel_end_day}
                   onChange={value => setForm(prev => ({
@@ -618,81 +596,77 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
                     hotel_end_day: value,
                   }))}
                   placeholder={t('reservations.meta.selectDay')}
-                  options={days.map(d => {
-                    const dateBadge = d.date ? (formatDate(d.date, locale) ?? undefined) : undefined
-                    const dayBadge = d.title ? t('dayplan.dayN', { n: d.day_number }) : undefined
-                    return {
-                      value: d.id,
-                      label: d.title || t('dayplan.dayN', { n: d.day_number }),
-                      badge: dateBadge ?? dayBadge,
-                    }
-                  })}
+                  options={dayOptions}
                   size="sm"
                 />
-              </div>
+              </EditorField>
             </div>
-            <div>
-              <label className={labelClass}>{t('reservations.locationAddress')}</label>
-              <AddressInput value={form.hotel_address} onChange={v => set('hotel_address', v)}
-                placeholder={t('reservations.locationPlaceholder')} className={inputClass} />
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
-              <div>
-                <label className={labelClass}>{t('reservations.meta.checkIn')}</label>
+            <div className={GRID_3}>
+              <EditorField label={t('reservations.meta.checkIn')}>
                 <CustomTimePicker value={form.meta_check_in_time} onChange={v => set('meta_check_in_time', v)} />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.checkInUntil')}</label>
+              </EditorField>
+              <EditorField label={t('reservations.meta.checkInUntil')}>
                 <CustomTimePicker value={form.meta_check_in_end_time} onChange={v => set('meta_check_in_end_time', v)} />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.checkOut')}</label>
+              </EditorField>
+              <EditorField label={t('reservations.meta.checkOut')}>
                 <CustomTimePicker value={form.meta_check_out_time} onChange={v => set('meta_check_out_time', v)} />
-              </div>
+              </EditorField>
             </div>
-          </>
-        )}
+          </div>
+          <EditorField label={t('reservations.locationAddress')}>
+            <AddressInput value={form.hotel_address} onChange={v => set('hotel_address', v)}
+              placeholder={t('reservations.locationPlaceholder')} className={INPUT} />
+          </EditorField>
+        </>
+      )}
 
-        {/* Notes */}
-        <div>
-          <label className={labelClass}>{t('reservations.notes')}</label>
-          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
-            placeholder={t('reservations.notesPlaceholder')}
-            className={inputClass} style={{ resize: 'none', lineHeight: 1.5 }} />
-        </div>
+      {/* The booking code, and the trip members and guests on this booking (#1517) */}
+      <div className={GRID_2}>
+        <EditorField label={t('reservations.confirmationCode')}>
+          <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+            placeholder={t('reservations.confirmationPlaceholder')} className={INPUT} />
+        </EditorField>
+        <EditorField label={t('reservations.travelers.label')}>
+          <TravelerPicker tripMembers={tripMembers} selectedIds={travelerIds} onToggle={toggleTraveler} />
+        </EditorField>
+      </div>
 
-        {/* Link and files side by side */}
-        <BookingLinkAndFiles
-          url={form.url}
-          onUrlChange={value => set('url', value)}
-          labelClass={labelClass}
-          inputClass={inputClass}
-          reservationId={reservation?.id}
-          tripFiles={files}
-          attachedFiles={attachedFiles}
-          pendingFiles={pendingFiles}
-          onRemovePending={index => setPendingFiles(prev => prev.filter((_, j) => j !== index))}
-          fileInputRef={fileInputRef}
-          onFileChange={handleFileChange}
-          canAttach={!!onFileUpload}
-          uploading={uploadingFile}
-          onLinked={fileId => setLinkedFileIds(prev => [...prev, fileId])}
-          onDetached={fileId => setLinkedFileIds(prev => prev.filter(id => id !== fileId))}
+      <EditorField label={t('reservations.notes')}>
+        <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
+          placeholder={t('reservations.notesPlaceholder')} className={TEXTAREA} />
+      </EditorField>
+
+      <BookingLinkAndFiles
+        url={form.url}
+        onUrlChange={value => set('url', value)}
+        labelClass={LABEL}
+        inputClass={INPUT}
+        reservationId={reservation?.id}
+        tripFiles={files}
+        attachedFiles={attachedFiles}
+        pendingFiles={pendingFiles}
+        onRemovePending={index => setPendingFiles(prev => prev.filter((_, j) => j !== index))}
+        fileInputRef={fileInputRef}
+        onFileChange={handleFileChange}
+        canAttach={!!onFileUpload}
+        uploading={uploadingFile}
+        onLinked={fileId => setLinkedFileIds(prev => [...prev, fileId])}
+        onDetached={fileId => setLinkedFileIds(prev => prev.filter(id => id !== fileId))}
+      />
+
+      {/* Costs — create / view the expense linked to this booking */}
+      {isBudgetEnabled && (
+        <BookingCostsSection
+          reservationId={reservation?.id ?? null}
+          pendingExpense={pendingExpense}
+          onCreate={handleCreateExpense}
+          onEdit={handleEditExpense}
+          onRemove={handleRemoveExpense}
+          labelClassName={LABEL}
+          customTooltips
         />
-
-        {/* Costs — create / view the expense linked to this booking */}
-        {isBudgetEnabled && (
-          <BookingCostsSection
-            reservationId={reservation?.id ?? null}
-            pendingExpense={pendingExpense}
-            onCreate={handleCreateExpense}
-            onEdit={handleEditExpense}
-            onRemove={handleRemoveExpense}
-          />
-        )}
-
-      </form>
-    </Modal>
+      )}
+    </DialogShell>
   )
 }
 
diff --git a/client/src/components/Planner/ReservationsPanel.test.tsx b/client/src/components/Planner/ReservationsPanel.test.tsx
index 389c02fb7..5942d16c5 100644
--- a/client/src/components/Planner/ReservationsPanel.test.tsx
+++ b/client/src/components/Planner/ReservationsPanel.test.tsx
@@ -1,5 +1,5 @@
 // FE-COMP-RES-001 to FE-COMP-RES-040, FE-PLANNER-RESP-016 to FE-PLANNER-RESP-080
-import { render, screen, fireEvent, waitFor, act } from '../../../tests/helpers/render';
+import { render, screen, fireEvent, waitFor, within } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../../tests/helpers/msw/server';
@@ -33,6 +33,20 @@ const defaultProps = {
   onNavigateToFiles: vi.fn(),
 };
 
+/** The question a delete asks sits in its own portal; its Delete is the last one on the page. */
+const confirmDeleteButton = () => screen.getAllByRole('button', { name: 'Delete' }).at(-1)!;
+
+/** A card's head band carries its own Edit and Delete, named by their tooltips. */
+const cardAction = (title: string, name: 'Edit' | 'Delete') =>
+  within(screen.getByRole('article', { name: title })).getByRole('button', { name });
+
+/** The filters sit behind the Filter button in the bar. */
+async function openFilters(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(screen.getByRole('button', { name: 'Filter' }));
+}
+
+const FILTER_KEY = 'trek-bookings-filters-bookings-1';
+
 beforeEach(() => {
   resetAllStores();
   seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
@@ -142,8 +156,7 @@ describe('ReservationsPanel', () => {
     const onEdit = vi.fn();
     const res = buildReservation({ id: 77, title: 'Editable Res', type: 'hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} onEdit={onEdit} />);
-    const editBtn = screen.getByTitle('Edit');
-    await user.click(editBtn);
+    await user.click(cardAction('Editable Res', 'Edit'));
     expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ id: 77 }));
   });
 
@@ -152,10 +165,9 @@ describe('ReservationsPanel', () => {
     const onDelete = vi.fn().mockResolvedValue(undefined);
     const res = buildReservation({ id: 88, title: 'Delete Me', type: 'hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} onDelete={onDelete} />);
-    await user.click(screen.getByTitle('Delete'));
-    // Confirm dialog appears — click the Confirm button
-    const confirmBtn = await screen.findByText('Confirm');
-    await user.click(confirmBtn);
+    await user.click(cardAction('Delete Me', 'Delete'));
+    await screen.findByText(/will be permanently deleted/i);
+    await user.click(confirmDeleteButton());
     await waitFor(() => expect(onDelete).toHaveBeenCalledWith(88));
   });
 
@@ -230,19 +242,17 @@ describe('ReservationsPanel', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
     const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    const codeEl = screen.getByText('ABC123');
-    expect(codeEl.style.filter).toContain('blur');
+    expect(screen.getByText('ABC123').className).toContain('blur-[4px]');
   });
 
-  it('FE-PLANNER-RESP-023: confirmation code revealed on hover when blurred', async () => {
-    const user = userEvent.setup();
+  it('FE-PLANNER-RESP-023: a blurred confirmation code uncovers on hover', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
     const res = buildReservation({ confirmation_number: 'ABC123', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     const codeEl = screen.getByText('ABC123');
-    expect(codeEl.style.filter).toContain('blur');
-    await user.hover(codeEl);
-    expect(codeEl.style.filter).toBe('none');
+    expect(codeEl.className).toContain('blur-[4px]');
+    // The hover reveal is the stylesheet's: the blur drops while the pointer rests on it.
+    expect(codeEl.className).toContain('hover:blur-none');
   });
 
   const layoverFlight = () => buildReservation({
@@ -266,16 +276,17 @@ describe('ReservationsPanel', () => {
     expect(screen.queryByText('BER → HND')).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESP-078: a segment code obeys blur_booking_codes and reveals with the card', async () => {
+  it('FE-PLANNER-RESP-078: a segment code obeys blur_booking_codes and uncovers on its own', async () => {
     const user = userEvent.setup();
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
     render(<ReservationsPanel {...defaultProps} reservations={[layoverFlight()]} />);
     const legCode = screen.getByText('ABC123');
-    expect(legCode.style.filter).toContain('blur');
-    // One reveal per card, not per segment: the booking's own cell uncovers too.
-    await user.hover(legCode);
-    expect(legCode.style.filter).toBe('none');
-    expect(screen.getByText('BOOK1').style.filter).toBe('none');
+    expect(legCode.className).toContain('blur-[4px]');
+    await user.click(legCode);
+    expect(legCode).toHaveAttribute('aria-pressed', 'true');
+    expect(legCode.className).not.toContain('blur-[4px]');
+    // Each code is its own reveal: the booking's reference stays covered.
+    expect(screen.getByText('BOOK1').className).toContain('blur-[4px]');
   });
 
   it('FE-PLANNER-RESP-024: reservation notes are shown', () => {
@@ -364,8 +375,8 @@ describe('ReservationsPanel', () => {
     seedStore(usePermissionsStore, { permissions: { reservation_edit: 'admin' } });
     const res = buildReservation({ title: 'Read Only', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    expect(screen.queryByTitle('Edit')).not.toBeInTheDocument();
-    expect(screen.queryByTitle('Delete')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Delete' })).not.toBeInTheDocument();
   });
 
   // ── Delete confirmation ─────────────────────────────────────────────────────
@@ -374,8 +385,7 @@ describe('ReservationsPanel', () => {
     const user = userEvent.setup();
     const res = buildReservation({ id: 99, title: 'Paris Hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    await user.click(screen.getByTitle('Delete'));
-    // The dialog body contains the title in the delete message
+    await user.click(cardAction('Paris Hotel', 'Delete'));
     const dialogBody = await screen.findByText(/will be permanently deleted/i);
     expect(dialogBody.textContent).toContain('Paris Hotel');
   });
@@ -385,24 +395,22 @@ describe('ReservationsPanel', () => {
     const onDelete = vi.fn();
     const res = buildReservation({ id: 100, title: 'Cancel Test', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} onDelete={onDelete} />);
-    await user.click(screen.getByTitle('Delete'));
-    const cancelBtn = await screen.findByText('Cancel');
-    await user.click(cancelBtn);
+    await user.click(cardAction('Cancel Test', 'Delete'));
+    await user.click(await screen.findByRole('button', { name: 'Cancel' }));
     expect(onDelete).not.toHaveBeenCalled();
-    expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+    expect(screen.queryByText(/will be permanently deleted/i)).not.toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESP-036: clicking backdrop closes delete confirm dialog', async () => {
     const user = userEvent.setup();
     const res = buildReservation({ id: 101, title: 'Backdrop Test', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    await user.click(screen.getByTitle('Delete'));
-    // Dialog is visible
-    await screen.findByText('Cancel');
-    // Click the fixed backdrop (the outermost div of the portal)
-    const backdrop = document.querySelector('[style*="position: fixed"]') as HTMLElement;
-    await user.click(backdrop!);
-    await waitFor(() => expect(screen.queryByText('Cancel')).not.toBeInTheDocument());
+    await user.click(cardAction('Backdrop Test', 'Delete'));
+    const body = await screen.findByText(/will be permanently deleted/i);
+    // The dimmed layer around the question is the outermost element of its portal.
+    const backdrop = body.closest('.fixed.inset-0') as HTMLElement;
+    fireEvent.click(backdrop);
+    await waitFor(() => expect(screen.queryByText(/will be permanently deleted/i)).not.toBeInTheDocument());
   });
 
   // ── Files ───────────────────────────────────────────────────────────────────
@@ -513,14 +521,22 @@ describe('ReservationsPanel', () => {
   });
 
   // AirTrail sync badge — three states (#1646)
-  it('FE-PLANNER-RESP-046: a synced AirTrail flight shows the AirTrail badge', () => {
+  /** Hovers the AirTrail badge and returns the tooltip it raises. */
+  async function airTrailTooltip(user: ReturnType<typeof userEvent.setup>, badgeText: string) {
+    await user.hover(screen.getByText(badgeText));
+    return screen.findByRole('tooltip');
+  }
+
+  it('FE-PLANNER-RESP-046: a synced AirTrail flight shows the AirTrail badge', async () => {
+    const user = userEvent.setup();
     const res = buildReservation({ title: 'Synced flight', type: 'flight', external_source: 'airtrail', sync_enabled: 1 } as any);
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    expect(screen.getByTitle('Synced from AirTrail — edits stay in sync both ways.')).toBeInTheDocument();
     expect(screen.queryByText('Not synced')).not.toBeInTheDocument();
+    expect(await airTrailTooltip(user, 'AirTrail')).toHaveTextContent('Synced from AirTrail — edits stay in sync both ways.');
   });
 
-  it('FE-PLANNER-RESP-047: a multi-leg import shows the layover hint, not the "removed" message', () => {
+  it('FE-PLANNER-RESP-047: a multi-leg import shows the layover hint, not the "removed" message', async () => {
+    const user = userEvent.setup();
     const res = buildReservation({
       title: 'Layover flight', type: 'flight', external_source: 'airtrail', sync_enabled: 0,
       metadata: JSON.stringify({ legs: [{ from: 'AMS' }, { from: 'IST' }] }),
@@ -529,19 +545,20 @@ describe('ReservationsPanel', () => {
     // Not falsely labelled "Not synced" / "removed in AirTrail"…
     expect(screen.queryByText('Not synced')).not.toBeInTheDocument();
     // …and carries the truthful layover explanation.
-    expect(
-      screen.getByTitle('Imported from AirTrail. A multi-leg flight with a layover has no single AirTrail flight to sync back to, so it stays as a one-time import.'),
-    ).toBeInTheDocument();
+    expect(await airTrailTooltip(user, 'AirTrail')).toHaveTextContent(
+      'Imported from AirTrail. A multi-leg flight with a layover has no single AirTrail flight to sync back to, so it stays as a one-time import.',
+    );
   });
 
-  it('FE-PLANNER-RESP-048: a single-leg flight removed upstream still shows "Not synced"', () => {
+  it('FE-PLANNER-RESP-048: a single-leg flight removed upstream still shows "Not synced"', async () => {
+    const user = userEvent.setup();
     const res = buildReservation({ title: 'Removed flight', type: 'flight', external_source: 'airtrail', sync_enabled: 0 } as any);
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    expect(screen.getByText('Not synced')).toBeInTheDocument();
-    expect(screen.getByTitle('This flight was removed in AirTrail and no longer syncs.')).toBeInTheDocument();
+    expect(await airTrailTooltip(user, 'Not synced')).toHaveTextContent('This flight was removed in AirTrail and no longer syncs.');
   });
 
-  it('FE-PLANNER-RESP-049: a flight grown into multiple legs locally (endpoints > 2, no legs array) shows the layover hint, not "Not synced"', () => {
+  it('FE-PLANNER-RESP-049: a flight grown into multiple legs locally (endpoints > 2, no legs array) shows the layover hint, not "Not synced"', async () => {
+    const user = userEvent.setup();
     // Matches the server's second hasLocalMultiLegShape criterion (endpoint count > 2).
     const res = buildReservation({
       title: 'Grown multi-leg', type: 'flight', external_source: 'airtrail', sync_enabled: 0,
@@ -549,61 +566,61 @@ describe('ReservationsPanel', () => {
     } as any);
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     expect(screen.queryByText('Not synced')).not.toBeInTheDocument();
-    expect(
-      screen.getByTitle('Imported from AirTrail. A multi-leg flight with a layover has no single AirTrail flight to sync back to, so it stays as a one-time import.'),
-    ).toBeInTheDocument();
+    expect(await airTrailTooltip(user, 'AirTrail')).toHaveTextContent(
+      'Imported from AirTrail. A multi-leg flight with a layover has no single AirTrail flight to sync back to, so it stays as a one-time import.',
+    );
   });
 
   // ── Type + traveler filters ─────────────────────────────────────────────────
 
-  it('FE-PLANNER-RESP-050: a type chip narrows the list and "All" restores it', async () => {
+  it('FE-PLANNER-RESP-050: a type filter narrows the list and resetting restores it', async () => {
     const user = userEvent.setup();
     const flight = buildReservation({ id: 1, title: 'Flight out', type: 'flight', status: 'confirmed' });
     const hotel = buildReservation({ id: 2, title: 'Hotel stay', type: 'hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[flight, hotel]} />);
+    await openFilters(user);
     await user.click(screen.getByRole('button', { name: /^Flight\s*1$/ }));
     expect(screen.getByText('Flight out')).toBeInTheDocument();
     expect(screen.queryByText('Hotel stay')).not.toBeInTheDocument();
-    // The choice is remembered for this trip.
-    expect(JSON.parse(sessionStorage.getItem('trek-reservation-filters-1') || '[]')).toEqual(['flight']);
+    // The choice is remembered for this trip and this tab.
+    expect(JSON.parse(sessionStorage.getItem(FILTER_KEY) || '{}').types).toEqual(['flight']);
 
-    await user.click(screen.getByRole('button', { name: /^All\s*2$/ }));
+    await user.click(screen.getByRole('button', { name: 'Reset filters' }));
     expect(screen.getByText('Hotel stay')).toBeInTheDocument();
-    expect(sessionStorage.getItem('trek-reservation-filters-1')).toBeNull();
+    expect(JSON.parse(sessionStorage.getItem(FILTER_KEY) || '{}').types).toEqual([]);
   });
 
-  it('FE-PLANNER-RESP-051: clicking an active type chip clears it again', async () => {
+  it('FE-PLANNER-RESP-051: clicking an active type filter clears it again', async () => {
     const user = userEvent.setup();
     const flight = buildReservation({ id: 1, title: 'Flight out', type: 'flight', status: 'confirmed' });
     const hotel = buildReservation({ id: 2, title: 'Hotel stay', type: 'hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[flight, hotel]} />);
-    const chip = screen.getByRole('button', { name: /^Flight\s*1$/ });
-    await user.click(chip);
+    await openFilters(user);
+    await user.click(screen.getByRole('button', { name: /^Flight\s*1$/ }));
+    expect(screen.queryByText('Hotel stay')).not.toBeInTheDocument();
     await user.click(screen.getByRole('button', { name: /^Flight\s*1$/ }));
     expect(screen.getByText('Hotel stay')).toBeInTheDocument();
-    expect(chip).toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESP-052: a filter that matches nothing shows the "none found" hint, not the empty state', () => {
     // A stored filter for a type this trip no longer has.
-    sessionStorage.setItem('trek-reservation-filters-1', JSON.stringify(['bus']));
+    sessionStorage.setItem(FILTER_KEY, JSON.stringify({ types: ['bus'], status: 'all', travelers: [] }));
     const flight = buildReservation({ id: 1, title: 'Flight out', type: 'flight', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[flight]} />);
-    expect(screen.getByText('No places found')).toBeInTheDocument();
+    expect(screen.getByText('Nothing matches these filters')).toBeInTheDocument();
     expect(screen.queryByText('Flight out')).not.toBeInTheDocument();
     expect(document.querySelector('.trek--bookings')).toBeNull();
   });
 
   it('FE-PLANNER-RESP-053: corrupt stored filters are ignored instead of crashing the panel', () => {
-    sessionStorage.setItem('trek-reservation-filters-1', '{not json');
-    sessionStorage.setItem('trek-reservation-filters-1-travelers', '{not json');
+    sessionStorage.setItem(FILTER_KEY, '{not json');
     const res = buildReservation({ id: 1, title: 'Still here', type: 'flight', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     expect(screen.getByText('Still here')).toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESP-054: a persisted type filter is restored on mount', () => {
-    sessionStorage.setItem('trek-reservation-filters-1', JSON.stringify(['hotel']));
+    sessionStorage.setItem(FILTER_KEY, JSON.stringify({ types: ['hotel'], status: 'all', travelers: [] }));
     const flight = buildReservation({ id: 1, title: 'Flight out', type: 'flight', status: 'confirmed' });
     const hotel = buildReservation({ id: 2, title: 'Hotel stay', type: 'hotel', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[flight, hotel]} />);
@@ -617,12 +634,14 @@ describe('ReservationsPanel', () => {
     const adas = buildReservation({ id: 1, title: 'Ada flight', type: 'flight', status: 'confirmed', travelers: [{ user_id: 1, username: 'ada', avatar_url: null }] } as any);
     const bobs = buildReservation({ id: 2, title: 'Bob hotel', type: 'hotel', status: 'confirmed', travelers: [{ user_id: 2, username: 'bob', avatar_url: null }] } as any);
     render(<ReservationsPanel {...defaultProps} reservations={[adas, bobs]} tripMembers={members} />);
-    await user.click(screen.getByTitle('ada'));
+    await openFilters(user);
+    const ada = screen.getByRole('button', { name: /ada/, pressed: false });
+    await user.click(ada);
     expect(screen.getByText('Ada flight')).toBeInTheDocument();
     expect(screen.queryByText('Bob hotel')).not.toBeInTheDocument();
-    expect(JSON.parse(sessionStorage.getItem('trek-reservation-filters-1-travelers') || '[]')).toEqual([1]);
+    expect(JSON.parse(sessionStorage.getItem(FILTER_KEY) || '{}').travelers).toEqual([1]);
 
-    await user.click(screen.getByTitle('ada'));
+    await user.click(screen.getByRole('button', { name: /ada/, pressed: true }));
     expect(screen.getByText('Bob hotel')).toBeInTheDocument();
   });
 
@@ -640,31 +659,21 @@ describe('ReservationsPanel', () => {
     const onAirTrailImport = vi.fn();
     const { rerender } = render(<ReservationsPanel {...defaultProps} onImport={onImport} onAirTrailImport={onAirTrailImport} />);
     // Both handlers given but the server features are off — nothing rendered.
-    expect(screen.queryByTitle('Import booking confirmations')).not.toBeInTheDocument();
-    expect(screen.queryByTitle('Import from AirTrail')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Import booking confirmations' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Import from AirTrail' })).not.toBeInTheDocument();
 
     rerender(<ReservationsPanel {...defaultProps} onImport={onImport} bookingImportAvailable onAirTrailImport={onAirTrailImport} airTrailAvailable />);
-    const importBtn = screen.getByTitle('Import booking confirmations');
-    const airtrailBtn = screen.getByTitle('Import from AirTrail');
-    for (const btn of [importBtn, airtrailBtn]) {
-      act(() => { btn.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-      expect(btn.style.opacity).toBe('0.75');
-      act(() => { btn.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-      expect(btn.style.opacity).toBe('1');
-    }
-    await user.click(importBtn);
-    await user.click(airtrailBtn);
+    await user.click(screen.getByRole('button', { name: 'Import booking confirmations' }));
+    await user.click(screen.getByRole('button', { name: 'Import from AirTrail' }));
     expect(onImport).toHaveBeenCalled();
     expect(onAirTrailImport).toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-RESP-058: the add button dims on hover and restores on leave', () => {
+  it('FE-PLANNER-RESP-058: the add button is the accent button of the bar and dims on hover', () => {
     render(<ReservationsPanel {...defaultProps} />);
     const add = screen.getAllByText('Manual Booking')[0].closest('button') as HTMLButtonElement;
-    act(() => { add.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(add.style.opacity).toBe('0.88');
-    act(() => { add.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(add.style.opacity).toBe('1');
+    expect(add.className).toContain('bg-accent');
+    expect(add.className).toContain('hover:opacity-90');
   });
 
   // ── Card details ────────────────────────────────────────────────────────────
@@ -678,33 +687,35 @@ describe('ReservationsPanel', () => {
       reservation_time: '2025-07-01T15:00',
     } as any);
     render(<ReservationsPanel {...defaultProps} reservations={[hotel]} days={[day1, day3]} />);
-    expect(screen.getByText('Day 1')).toBeInTheDocument();
-    expect(screen.getByText('Day 3')).toBeInTheDocument();
+    expect(screen.getByText(/Day 1 → Day 3/)).toBeInTheDocument();
     // The stamped time row is suppressed for an accommodation-backed hotel.
     expect(screen.queryByText('15:00')).not.toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESP-060: clicking a blurred booking code toggles it open and closed', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
+    const onEdit = vi.fn();
     const res = buildReservation({ id: 1, confirmation_number: 'TOGGLE1', status: 'confirmed' });
-    render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
+    render(<ReservationsPanel {...defaultProps} reservations={[res]} onEdit={onEdit} />);
     const code = screen.getByText('TOGGLE1');
-    expect(code.style.filter).toContain('blur');
+    expect(code.className).toContain('blur-[4px]');
     // A bare click (no hover) flips it open, a second one hides it again.
     fireEvent.click(code);
-    expect(code.style.filter).toBe('none');
+    expect(code.className).not.toContain('blur-[4px]');
     fireEvent.click(code);
-    expect(code.style.filter).toContain('blur');
+    expect(code.className).toContain('blur-[4px]');
+    // Revealing the code never opens the booking it sits on.
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    expect(onEdit).not.toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-RESP-061: the edit button restores its idle styling after hover', () => {
+  it('FE-PLANNER-RESP-061: the card actions stay quiet until the card is hovered or focused', () => {
     const res = buildReservation({ id: 1, title: 'Hover me', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    const edit = screen.getByTitle('Edit');
-    act(() => { edit.dispatchEvent(new MouseEvent('mouseover', { bubbles: true })); });
-    expect(edit.style.color).toBe('var(--text-primary)');
-    act(() => { edit.dispatchEvent(new MouseEvent('mouseout', { bubbles: true })); });
-    expect(edit.style.color).toBe('var(--text-faint)');
+    const edit = cardAction('Hover me', 'Edit');
+    expect(edit.className).toContain('opacity-60');
+    expect(edit.className).toContain('group-hover:opacity-100');
+    expect(edit.className).toContain('group-focus-within:opacity-100');
   });
 
   it('FE-PLANNER-RESP-062: a failing delete surfaces an error instead of throwing', async () => {
@@ -712,11 +723,12 @@ describe('ReservationsPanel', () => {
     const onDelete = vi.fn().mockRejectedValue(new Error('nope'));
     const res = buildReservation({ id: 5, title: 'Undeletable', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} onDelete={onDelete} />);
-    await user.click(screen.getByTitle('Delete'));
-    await user.click(await screen.findByText('Confirm'));
+    await user.click(cardAction('Undeletable', 'Delete'));
+    await screen.findByText(/will be permanently deleted/i);
+    await user.click(confirmDeleteButton());
     await waitFor(() => expect(onDelete).toHaveBeenCalledWith(5));
-    // The dialog closed and the card is still there.
-    expect(screen.queryByText('Confirm')).not.toBeInTheDocument();
+    // The question closed, the card is still there, and the failure is said out loud.
+    expect(screen.queryByText(/will be permanently deleted/i)).not.toBeInTheDocument();
     expect(screen.getByText('Undeletable')).toBeInTheDocument();
   });
 
@@ -760,7 +772,9 @@ describe('ReservationsPanel', () => {
     const files = [{ id: 1, trip_id: 1, reservation_id: 7, original_name: 'ticket.pdf', url: '/uploads/ticket.pdf', filename: 'ticket.pdf', mime_type: 'application/pdf', created_at: '2025-01-01T00:00:00.000Z' }];
     render(<ReservationsPanel {...defaultProps} reservations={[res]} files={files} />);
     await user.click(screen.getByText('ticket.pdf'));
-    expect(vi.mocked(openFile)).toHaveBeenCalledWith('/uploads/ticket.pdf');
+    expect(vi.mocked(openFile)).toHaveBeenCalledWith('/uploads/ticket.pdf', 'ticket.pdf');
+    // Opening the file does not open the booking as well.
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 
   it('FE-PLANNER-RESP-065: an assignment without a place is skipped by the day/place lookup', () => {
@@ -781,7 +795,7 @@ describe('ReservationsPanel', () => {
   // ── Section state ───────────────────────────────────────────────────────────
 
   it('FE-PLANNER-RESP-066: a section collapsed in a previous session stays collapsed', () => {
-    localStorage.setItem('trek:bookings-confirmed-open:1', '0');
+    localStorage.setItem('trek:bookings-bookings-collapsed:1', JSON.stringify({ 'status:confirmed': true }));
     const res = buildReservation({ id: 1, title: 'Hidden card', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     expect(screen.queryByText('Hidden card')).not.toBeInTheDocument();
@@ -810,21 +824,31 @@ describe('ReservationsPanel', () => {
     ...over,
   } as any);
 
-  it('FE-PLANNER-RESP-067: a transit journey renders its own section with legs, day and duration', () => {
+  it('FE-PLANNER-RESP-067: a transit journey shows its legs, day and time, and its own section on request', () => {
     const day = buildDay({ id: 501, date: '2025-06-01', day_number: 2, title: 'Travel day' } as any);
-    render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} days={[day]} />);
-    expect(screen.getByText('Automated public transit')).toBeInTheDocument();
+    const { unmount } = render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} days={[day]} />);
     expect(screen.getByText('U2')).toBeInTheDocument();
     expect(screen.getByText('ICE 599')).toBeInTheDocument();
     expect(screen.getByText('Travel day')).toBeInTheDocument();
     expect(screen.getByText(/08:00/)).toBeInTheDocument();
+    // By default a journey sorts in among the confirmed bookings.
+    expect(screen.queryByText('Automated public transit')).not.toBeInTheDocument();
+    unmount();
+
+    // The view option puts journeys in a section of their own.
+    localStorage.setItem('trek:bookings-bookings-transitApart', 'true');
+    render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} days={[day]} />);
+    expect(screen.getByText('Automated public transit')).toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESP-068: clicking a transit journey opens it through onEdit', async () => {
+  it('FE-PLANNER-RESP-068: clicking a transit journey opens its detail, and Edit hands it to onEdit', async () => {
     const user = userEvent.setup();
     const onEdit = vi.fn();
     render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} onEdit={onEdit} />);
-    await user.click(screen.getByText(/Hamburg Hbf/));
+    await user.click(screen.getByRole('article', { name: /Hamburg Hbf/ }));
+    const detail = await screen.findByRole('dialog');
+    expect(onEdit).not.toHaveBeenCalled();
+    await user.click(within(detail).getByRole('button', { name: 'Edit' }));
     expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ id: 900 }));
   });
 
@@ -832,18 +856,20 @@ describe('ReservationsPanel', () => {
     const user = userEvent.setup();
     const onDelete = vi.fn();
     const onEdit = vi.fn();
+    const title = 'Berlin Hbf → Hamburg Hbf';
     render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} onDelete={onDelete} onEdit={onEdit} />);
-    await user.click(screen.getByTitle('Delete'));
+    await user.click(cardAction(title, 'Delete'));
     expect(onEdit).not.toHaveBeenCalled();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 
     // Cancel first — nothing is deleted.
-    await user.click(await screen.findByText('Cancel'));
+    await user.click(await screen.findByRole('button', { name: 'Cancel' }));
     expect(onDelete).not.toHaveBeenCalled();
 
-    await user.click(screen.getByTitle('Delete'));
-    const dialogButtons = (await screen.findByText('Cancel')).parentElement!.querySelectorAll('button');
-    await user.click(dialogButtons[1]);
-    expect(onDelete).toHaveBeenCalledWith(900);
+    await user.click(cardAction(title, 'Delete'));
+    await screen.findByText(/will be permanently deleted/i);
+    await user.click(confirmDeleteButton());
+    await waitFor(() => expect(onDelete).toHaveBeenCalledWith(900));
   });
 
   it('FE-PLANNER-RESP-070: a transit journey with unreadable metadata still renders its header', () => {
@@ -852,14 +878,14 @@ describe('ReservationsPanel', () => {
     expect(screen.queryByText('U2')).not.toBeInTheDocument();
   });
 
-  it('FE-PLANNER-RESP-071: a transit journey shows its first note line and traveler avatars', () => {
+  it('FE-PLANNER-RESP-071: a transit journey shows its notes as markdown and its travelers', () => {
     const res = transitJourney({
       notes: '**Reserve** a seat\nsecond line',
       travelers: [{ user_id: 1, username: 'ada', avatar_url: null }],
     });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
-    expect(screen.getByText('Reserve')).toBeInTheDocument();
-    expect(screen.queryByText(/second line/)).not.toBeInTheDocument();
+    expect(screen.getByText('Reserve').tagName).toBe('STRONG');
+    expect(screen.getByText('ada')).toBeInTheDocument();
   });
 
   // ── Reservation-detail plugin slot ──────────────────────────────────────────
@@ -894,22 +920,25 @@ describe('ReservationsPanel', () => {
     const user = userEvent.setup();
     const onDelete = vi.fn();
     render(<ReservationsPanel {...defaultProps} reservations={[transitJourney()]} onDelete={onDelete} />);
-    await user.click(screen.getByTitle('Delete'));
-    const backdrop = await waitFor(() => document.querySelector('[style*="z-index: 3000"]') as HTMLElement);
-    fireEvent.click(backdrop);
-    await waitFor(() => expect(document.querySelector('[style*="z-index: 3000"]')).toBeNull());
+    await user.click(cardAction('Berlin Hbf → Hamburg Hbf', 'Delete'));
+    const body = await screen.findByText(/will be permanently deleted/i);
+    fireEvent.click(body.closest('.fixed.inset-0') as HTMLElement);
+    await waitFor(() => expect(screen.queryByText(/will be permanently deleted/i)).not.toBeInTheDocument());
     expect(onDelete).not.toHaveBeenCalled();
   });
 
-  it('FE-PLANNER-RESP-075: hovering a blurred code reveals it and leaving hides it again', () => {
+  it('FE-PLANNER-RESP-075: a revealed code covers up again once hidden, and keeps its hover reveal', () => {
     seedStore(useSettingsStore, { settings: { time_format: '24h', blur_booking_codes: true, temperature_unit: 'celsius', language: 'en', dark_mode: false, default_currency: 'USD', map_tile_url: '', show_place_description: false } });
     const res = buildReservation({ id: 1, confirmation_number: 'HOVER1', status: 'confirmed' });
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     const code = screen.getByText('HOVER1');
-    fireEvent.mouseEnter(code);
-    expect(code.style.filter).toBe('none');
-    fireEvent.mouseLeave(code);
-    expect(code.style.filter).toContain('blur');
+    expect(code).toHaveAttribute('aria-pressed', 'false');
+    expect(code.className).toContain('hover:blur-none');
+    fireEvent.click(code);
+    expect(code).toHaveAttribute('aria-pressed', 'true');
+    fireEvent.click(code);
+    expect(code).toHaveAttribute('aria-pressed', 'false');
+    expect(code.className).toContain('blur-[4px]');
   });
 
   it('FE-PLANNER-RESP-076: entries with no resolvable date sink below the dated ones', () => {
@@ -934,7 +963,7 @@ describe('ReservationsPanel', () => {
     render(<ReservationsPanel {...defaultProps} reservations={[res]} />);
     // The stored value stays readable, but nothing is clickable.
     const shown = screen.getByText('javascript:alert(1)');
-    expect(shown.tagName).toBe('SPAN');
+    expect(shown.closest('a')).toBeNull();
     expect(document.querySelector('a[href^="javascript:"]')).toBeNull();
   });
 });
diff --git a/client/src/components/Planner/ReservationsPanel.tsx b/client/src/components/Planner/ReservationsPanel.tsx
index 72c30af61..e6c742d4f 100644
--- a/client/src/components/Planner/ReservationsPanel.tsx
+++ b/client/src/components/Planner/ReservationsPanel.tsx
@@ -1,15 +1,12 @@
-import { useCallback, useMemo, useState, type CSSProperties } from 'react'
+import { useCallback, useMemo, type CSSProperties } from 'react'
 import { Download, Plane, Plus, SearchX } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
-import { usePluginStore } from '../../store/pluginStore'
-import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import type { Reservation, Day, TripFile, AssignmentsMap, BudgetItem } from '../../types'
 import { usePluginViewContributions } from '../Plugins/PluginContributions'
 import EmptyState from '../shared/EmptyState'
-import ConfirmDialog from '../shared/ConfirmDialog'
 import type { TripMember } from '../Budget/BudgetPanelMemberChips'
 import {
   applyFilters, buildAssignmentLookup, costsFor, groupReservations, sortReservations, TYPE_ORDER, typeInfo,
@@ -22,8 +19,9 @@ import BookingsHeader from './bookings/BookingsHeader'
 import BookingCard from './bookings/BookingCard'
 import BookingsList from './bookings/BookingsList'
 import BookingsTimeline from './bookings/BookingsTimeline'
-import BookingDetailDialog from './bookings/BookingDetailDialog'
-import { canShowOnMap } from './bookings/showOnMap'
+import BookingDetailHost from './bookings/BookingDetailHost'
+import { useReservationDetailPlugins } from './bookings/useReservationDetailPlugins'
+import { useBookingActions } from './bookings/useBookingActions'
 
 interface ReservationsPanelProps {
   tripId: number
@@ -53,6 +51,9 @@ interface ReservationsPanelProps {
   isOnMap?: (reservation: Reservation) => boolean
   /** Opens the expense editor for an expense linked to a booking. */
   onEditExpense?: (item: BudgetItem) => void
+  /** Re-enters the transit search for a public-transit journey, seeded with its route.
+   *  Passed only to someone who may do that (day_edit, as on the plan); the tab adds no gate of its own. */
+  onChangeRoute?: (reservation: Reservation) => void
 }
 
 // Cards take a quarter of the row at most, so a wide screen shows four and a narrow one fewer.
@@ -69,21 +70,20 @@ const CTA_STYLE: CSSProperties = {
 export default function ReservationsPanel({
   tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onAirTrailImport,
   airTrailAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual',
-  contributionView = 'reservations', tripMembers = [], contextReservations = [], onShowOnMap, isOnMap, onEditExpense,
+  contributionView = 'reservations', tripMembers = [], contextReservations = [], onShowOnMap, isOnMap, onEditExpense, onChangeRoute,
 }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
-  const toast = useToast()
   const can = useCanDo()
   const trip = useTripStore(s => s.trip)
   const budgetItems = useTripStore(s => s.budgetItems)
-  const toggleReservationStatus = useTripStore(s => s.toggleReservationStatus)
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
   const canEdit = can('reservation_edit', trip)
   const kind: BookingsKind = contributionView === 'transports' ? 'transports' : 'bookings'
   const v = useBookingsView(kind, tripId)
   const contribFor = usePluginViewContributions(contributionView, tripId)
-  const detailPlugins = usePluginStore(s => s.plugins).filter(p => p.type === 'widget' && p.slot === 'reservation-detail')
-  const [pendingDelete, setPendingDelete] = useState<Reservation | null>(null)
+  const detailPlugins = useReservationDetailPlugins()
+  // The cards' and rows' own status switch and delete question; the detail brings its own.
+  const actions = useBookingActions(tripId, onDelete, r => { if (v.selectedId === r.id) v.setSelectedId(null) })
 
   const labelOf = useCallback((type: string) => t(typeInfo(type).labelKey), [t])
   const assignmentLookup = useMemo(() => buildAssignmentLookup(days, assignments), [days, assignments])
@@ -93,12 +93,12 @@ export default function ReservationsPanel({
     () => applyFilters(reservations, { types: v.types, status: v.status, travelers: v.travelers, query: v.query }, labelOf),
     [reservations, v.types, v.status, v.travelers, v.query, labelOf],
   )
-  const sorted = useMemo(() => sortReservations(filtered, days, v.sort.by, v.sort.dir, labelOf), [filtered, days, v.sort.by, v.sort.dir, labelOf])
+  const sorted = useMemo(() => sortReservations(filtered, days, v.sort.by, v.sort.dir, labelOf, v.transitApart), [filtered, days, v.sort.by, v.sort.dir, labelOf, v.transitApart])
   const groups = useMemo(() => groupReservations(sorted, v.group, days, trip?.start_date, trip?.end_date, {
     confirmed: t('reservations.confirmed'), pending: t('reservations.pending'), transit: t('transit.sectionTitle'),
     before: t('reservations.group.before'), after: t('reservations.group.after'), undated: t('reservations.group.undated'),
     dayN: n => t('dayplan.dayN', { n }), typeLabel: labelOf, dayDate: d => formatDay(d, locale),
-  }), [sorted, v.group, days, trip?.start_date, trip?.end_date, locale, t, labelOf])
+  }, v.transitApart), [sorted, v.group, days, trip?.start_date, trip?.end_date, locale, t, labelOf, v.transitApart])
 
   const costsOf = useCallback((r: Reservation) => costsFor(r.id, budgetItems, tripCurrency), [budgetItems, tripCurrency])
   // Formatted once per booking object and setting; a changed booking is a new object and formats again.
@@ -122,51 +122,35 @@ export default function ReservationsPanel({
   }, [reservations, v.types])
   const selected = v.selectedId != null ? reservations.find(r => r.id === v.selectedId) ?? null : null
 
-  const select = (r: Reservation) => {
-    // A transit journey has its own detail view, shared with the phone.
-    if (r.type === 'transit') { onEdit(r); return }
-    v.setSelectedId(v.selectedId === r.id ? null : r.id)
-  }
+  const select = (r: Reservation) => v.setSelectedId(v.selectedId === r.id ? null : r.id)
   // Whatever leaves the tab's own view closes the detail first: an editor, the map, an expense.
   const closeDetail = () => v.setSelectedId(null)
   const edit = (r: Reservation) => {
     closeDetail()
     onEdit(r)
   }
-  const toggleStatus = (r: Reservation) => {
-    toggleReservationStatus(tripId, r.id).catch(() => toast.error(t('reservations.toast.updateError')))
-  }
-  const confirmDelete = async () => {
-    const r = pendingDelete
-    setPendingDelete(null)
-    if (!r) return
-    if (v.selectedId === r.id) v.setSelectedId(null)
-    try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
-  }
+  const { toggleStatus, requestDelete } = actions
 
   const importAction = onImport && bookingImportAvailable ? onImport : undefined
   const airTrailAction = onAirTrailImport && airTrailAvailable ? onAirTrailImport : undefined
-  const linkedCosts = (r: Reservation) => budgetItems.filter(b => b.reservation_id === r.id)
 
   const detail = selected && (
-    <BookingDetailDialog
+    <BookingDetailHost
       r={selected}
-      facts={factsOf(selected)}
-      files={filesFor(selected, files)}
-      linkedCosts={linkedCosts(selected)}
       tripId={tripId}
+      days={days}
+      assignments={assignments}
+      files={files}
       canEdit={canEdit}
-      covered={!!pendingDelete}
-      onClose={closeDetail}
-      onEdit={() => edit(selected)}
-      onDelete={() => setPendingDelete(selected)}
-      onToggleStatus={() => toggleStatus(selected)}
-      onShowOnMap={onShowOnMap && canShowOnMap(selected) ? () => { closeDetail(); onShowOnMap(selected) } : undefined}
-      onMap={isOnMap?.(selected)}
-      onEditExpense={onEditExpense ? item => { closeDetail(); onEditExpense(item) } : undefined}
-      onNavigateToFiles={onNavigateToFiles}
       contributions={contribFor(selected.id)}
-      detailPlugins={detailPlugins}
+      onClose={closeDetail}
+      onEdit={canEdit ? onEdit : undefined}
+      onDelete={onDelete}
+      onShowOnMap={onShowOnMap}
+      isOnMap={isOnMap}
+      onEditExpense={onEditExpense}
+      onChangeRoute={onChangeRoute}
+      onNavigateToFiles={onNavigateToFiles}
     />
   )
 
@@ -204,6 +188,7 @@ export default function ReservationsPanel({
         <BookingsTimeline
           items={sorted}
           context={contextReservations}
+          contextLabel={t(kind === 'transports' ? 'reservations.timeline.contextBookings' : 'reservations.timeline.contextTransports')}
           days={days}
           zoom={v.timeline.zoom}
           onZoom={v.setZoom}
@@ -228,7 +213,7 @@ export default function ReservationsPanel({
           onToggleGroup={v.toggleGroup}
           onSelect={select}
           onEdit={edit}
-          onDelete={setPendingDelete}
+          onDelete={requestDelete}
           onToggleStatus={toggleStatus}
         />
       )
@@ -254,7 +239,7 @@ export default function ReservationsPanel({
                       selected={v.selectedId === r.id}
                       onSelect={() => select(r)}
                       onEdit={() => edit(r)}
-                      onDelete={() => setPendingDelete(r)}
+                      onDelete={() => requestDelete(r)}
                       onToggleStatus={() => toggleStatus(r)}
                       contributions={contribFor(r.id)}
                       detailPlugins={detailPlugins}
@@ -309,6 +294,8 @@ export default function ReservationsPanel({
           onByType={v.toggleByType}
           showContext={v.timeline.context}
           onShowContext={v.toggleContext}
+          transitApart={v.transitApart}
+          onTransitApart={v.view === 'cards' && v.group === 'status' && reservations.some(r => r.type === 'transit') ? v.toggleTransitApart : undefined}
           viewIsDefault={v.viewIsDefault}
           onResetView={v.resetView}
         />
@@ -318,15 +305,7 @@ export default function ReservationsPanel({
 
       {detail}
 
-      <ConfirmDialog
-        isOpen={!!pendingDelete}
-        onClose={() => setPendingDelete(null)}
-        onConfirm={confirmDelete}
-        title={t('reservations.confirm.deleteTitle')}
-        message={t('reservations.confirm.deleteBody', { name: pendingDelete?.title ?? '' })}
-        confirmLabel={t('common.delete')}
-        cancelLabel={t('common.cancel')}
-      />
+      {actions.confirmDialog}
     </div>
   )
 }
diff --git a/client/src/components/Planner/TransitJourneyModal.test.tsx b/client/src/components/Planner/TransitJourneyModal.test.tsx
index 00b8829cc..a52fa94d5 100644
--- a/client/src/components/Planner/TransitJourneyModal.test.tsx
+++ b/client/src/components/Planner/TransitJourneyModal.test.tsx
@@ -26,6 +26,9 @@ function makeReservation() {
   } as any
 }
 
+/** The journey's title in the head band, a button that turns into the rename field. */
+const titleButton = () => screen.getByRole('button', { name: /^Fernsehturm/ })
+
 function makeProps(overrides = {}) {
   return {
     reservation: makeReservation(),
@@ -61,8 +64,8 @@ describe('TransitJourneyModal', () => {
     const user = userEvent.setup()
     const onSave = vi.fn().mockResolvedValue({})
     render(<TransitJourneyModal {...makeProps({ onSave })} />)
-    // The title renames inline in the header via its pencil.
-    await user.click(screen.getByLabelText('Edit'))
+    // The title renames inline in the header: a click on it opens the field.
+    await user.click(titleButton())
     const titleInput = screen.getByDisplayValue('Fernsehturm → Zoo')
     await user.clear(titleInput)
     await user.type(titleInput, 'Zum Zoo')
@@ -145,7 +148,8 @@ describe('TransitJourneyModal', () => {
     expect(screen.queryByRole('button', { name: /^Delete$/ })).not.toBeInTheDocument()
     expect(screen.queryByRole('button', { name: /Change route/ })).not.toBeInTheDocument()
     expect(screen.queryByRole('button', { name: /^Save$/ })).not.toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /Close/ })).toBeInTheDocument()
+    // The round X in the head band and the Close that finishes the footer.
+    expect(screen.getAllByRole('button', { name: /^Close$/ })).toHaveLength(2)
   })
 
   it('FE-PLANNER-TRANSITJOURNEY-009: metadata stored as a JSON string is parsed into the itinerary', () => {
@@ -177,7 +181,7 @@ describe('TransitJourneyModal', () => {
   it('FE-PLANNER-TRANSITJOURNEY-012: Escape while renaming restores the previous title', async () => {
     const user = userEvent.setup()
     render(<TransitJourneyModal {...makeProps()} />)
-    await user.click(screen.getByLabelText('Edit'))
+    await user.click(titleButton())
     const input = screen.getByDisplayValue('Fernsehturm → Zoo')
     await user.clear(input)
     await user.type(input, 'Scrapped')
@@ -191,7 +195,7 @@ describe('TransitJourneyModal', () => {
   it('FE-PLANNER-TRANSITJOURNEY-013: blurring the title input closes inline editing but keeps the typed name', async () => {
     const user = userEvent.setup()
     render(<TransitJourneyModal {...makeProps()} />)
-    await user.click(screen.getByLabelText('Edit'))
+    await user.click(titleButton())
     const input = screen.getByDisplayValue('Fernsehturm → Zoo')
     await user.clear(input)
     await user.type(input, 'Zum Zoo')
diff --git a/client/src/components/Planner/TransitJourneyModal.tsx b/client/src/components/Planner/TransitJourneyModal.tsx
index c4d41e8a9..2cdb391ef 100644
--- a/client/src/components/Planner/TransitJourneyModal.tsx
+++ b/client/src/components/Planner/TransitJourneyModal.tsx
@@ -2,9 +2,14 @@ import { useEffect, useRef, useState } from 'react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
-import { ArrowRight, ArrowRightLeft, Bold, Clock, Code, Footprints, Heading2, Italic, Link2, List, ListChecks, MoveRight, Pencil, RefreshCw, Strikethrough, TramFront, Trash2 } from 'lucide-react'
+import { ArrowRight, ArrowRightLeft, Bold, CalendarDays, Clock, Code, Footprints, Heading2, Italic, Link2, List, ListChecks, MoveRight, Pencil, RefreshCw, Strikethrough, TramFront, Trash2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import ConfirmDialog from '../shared/ConfirmDialog'
+import { DialogShell, DialogSection, DialogFooter, FooterSpacer, DialogButton, DeleteButton, PILL, fs } from '../shared/DialogShell'
+import { Segmented, TEXTAREA } from '../shared/dialogParts'
+import { Tooltip } from '../shared/Tooltip'
+import { BookingDialogHeader, TypePill } from './bookings/BookingDialogShell'
+import { TransitLegs } from './bookings/transitParts'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { splitReservationDateTime, formatTime } from '../../utils/formatters'
@@ -137,6 +142,121 @@ export default function TransitJourneyModal({ reservation, onClose, onSave, onDe
     { Icon: Footprints, value: transit.walk_seconds > 59 ? t('transit.min', { count: Math.round(transit.walk_seconds / 60) }) : '—', label: t('transit.walkLabel') },
   ] : []
 
+  if (!isMobile) {
+    const titleId = `transit-journey-${res.id}`
+    const timeText = time ? `${formatTime(time, locale, timeFormat)}${endTime ? ` – ${formatTime(endTime, locale, timeFormat)}` : ''}` : ''
+    const header = (
+      <BookingDialogHeader
+        tone="transit"
+        type="transit"
+        labelId={titleId}
+        onClose={onClose}
+        title={<TransitTitle title={title} iconSize={16} />}
+        onTitleClick={canEdit ? () => setEditingTitle(true) : undefined}
+        titleTooltip={t('reservations.rename')}
+        titleInput={editingTitle ? {
+          value: title,
+          onChange: setTitle,
+          label: t('reservations.titleLabel'),
+          autoFocus: true,
+          onBlur: () => setEditingTitle(false),
+          onKeyDown: e => {
+            if (e.key === 'Enter') setEditingTitle(false)
+            // Spent here, so the dialog stays open and only the rename is dropped.
+            if (e.key === 'Escape') { e.preventDefault(); setTitle(res.title || ''); setEditingTitle(false) }
+          },
+        } : undefined}
+        pills={(
+          <>
+            <TypePill type="transit" />
+            {dateStr && <span className={PILL}><CalendarDays size={13} strokeWidth={2.2} className="text-content-faint" />{dateStr}</span>}
+            {timeText && <span className={PILL}><Clock size={13} strokeWidth={2.2} className="text-content-faint" /><span className="tabular-nums">{timeText}</span></span>}
+          </>
+        )}
+      />
+    )
+    const footer = (
+      <DialogFooter>
+        {canEdit && <DialogButton onClick={onChangeRoute} icon={<RefreshCw size={14} strokeWidth={2} />}>{t('transit.changeRoute')}</DialogButton>}
+        {canEdit && onEditDetails && <DialogButton onClick={onEditDetails} icon={<Pencil size={14} strokeWidth={2} />}>{t('transit.editDetails')}</DialogButton>}
+        <FooterSpacer />
+        {canEdit && <DeleteButton onClick={() => setConfirmDelete(true)} />}
+        {canEdit
+          ? <DialogButton variant="primary" onClick={save} disabled={saving || !title.trim() || !dirty}>{saving ? t('common.saving') : t('common.save')}</DialogButton>
+          : <DialogButton variant="primary" onClick={onClose}>{t('common.close')}</DialogButton>}
+      </DialogFooter>
+    )
+    const noteTools = canEdit && (
+      <span className="flex items-center gap-2">
+        {notesTab === 'write' && (
+          <span className="flex gap-px rounded-[10px] bg-surface-tertiary p-[3px]">
+            {MD_TOOLS.map(({ Icon, label, action }) => (
+              <Tooltip key={label} label={label} placement="top">
+                <button type="button" onClick={() => applyMd(action)} aria-label={label}
+                  className="grid h-7 w-7 place-items-center rounded-[8px] text-content-muted hover:bg-surface-card hover:text-content">
+                  <Icon size={13} strokeWidth={2} />
+                </button>
+              </Tooltip>
+            ))}
+          </span>
+        )}
+        <Segmented<'write' | 'preview'>
+          value={notesTab}
+          onChange={setNotesTab}
+          label={t('reservations.notes')}
+          options={[{ value: 'write', label: t('common.edit') }, { value: 'preview', label: t('common.preview') }]}
+        />
+      </span>
+    )
+    return (
+      <>
+        <DialogShell onClose={onClose} labelledBy={titleId} blocked={confirmDelete} header={header} footer={footer}>
+          {transit && (
+            <div className="flex gap-2">
+              {statTiles.map(({ value, label }) => (
+                <div key={label} className="min-w-0 flex-1 rounded-[12px] bg-surface-tertiary px-3 py-2.5 text-center">
+                  <div className="truncate font-bold tabular-nums tracking-[-0.01em] text-content" style={fs(18, 'subtitle')}>{value}</div>
+                  <div className="mt-0.5 truncate font-geist text-content-faint" style={fs(10.5)}>{label}</div>
+                </div>
+              ))}
+            </div>
+          )}
+          {transit && transit.legs.length > 0 && (
+            <DialogSection label={t('transit.itinerary')}>
+              <TransitLegs legs={transit.legs as TransitLegMeta[]} />
+            </DialogSection>
+          )}
+          <DialogSection label={t('reservations.notes')} action={noteTools}>
+            {canEdit && notesTab === 'write' ? (
+              <textarea
+                ref={notesRef}
+                value={notes}
+                onChange={e => setNotes(e.target.value)}
+                placeholder={t('reservations.notesPlaceholder')}
+                aria-label={t('reservations.notes')}
+                className={TEXTAREA}
+                style={{ minHeight: 130, resize: 'vertical', lineHeight: 1.55 }}
+              />
+            ) : (
+              <div className={`rounded-[10px] border border-edge-faint bg-surface-card px-3.5 py-3 ${canEdit ? 'min-h-[130px]' : ''}`}>
+                {notes.trim()
+                  ? <div className="collab-note-md break-words text-content" style={fs(13, 'body')}><Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{notes}</Markdown></div>
+                  : <span className="text-content-faint" style={fs(12.5, 'body')}>{t('reservations.notesPlaceholder')}</span>}
+              </div>
+            )}
+          </DialogSection>
+        </DialogShell>
+        <ConfirmDialog
+          isOpen={confirmDelete}
+          onClose={() => setConfirmDelete(false)}
+          onConfirm={async () => { setConfirmDelete(false); await onDelete(); onClose() }}
+          title={t('reservations.confirm.deleteTitle')}
+          message={t('reservations.confirm.deleteBody', { name: res.title })}
+        />
+      </>
+    )
+  }
+
   return (
     <Modal
       isOpen
diff --git a/client/src/components/Planner/TransportModal.test.tsx b/client/src/components/Planner/TransportModal.test.tsx
index 4bdb2476e..b0cffbc5d 100644
--- a/client/src/components/Planner/TransportModal.test.tsx
+++ b/client/src/components/Planner/TransportModal.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-076
+// FE-PLANNER-TRANSMODAL-001 to FE-PLANNER-TRANSMODAL-080
 import { render, screen, waitFor, fireEvent, within, act } from '../../../tests/helpers/render';
 import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
@@ -70,10 +70,10 @@ beforeEach(() => {
   vi.clearAllMocks();
 });
 
-// The booking type is one dropdown now (BookingTypeSelect): open it from the
-// field under the "Booking Type" label, then pick the option from its menu.
+// The booking type is a pill in the dialog's head band (PillSelect), named
+// "Booking Type: <type>": open it, then pick the option from its menu.
 function typeField(): HTMLButtonElement {
-  return screen.getByText('Booking Type').parentElement!.querySelector('button') as HTMLButtonElement;
+  return screen.getByRole('button', { name: /^Booking Type:/ }) as HTMLButtonElement;
 }
 async function pickType(name: RegExp) {
   await userEvent.click(typeField());
@@ -159,7 +159,7 @@ describe('TransportModal', () => {
       expect(screen.getByRole('button', { name })).toBeInTheDocument();
     }
     // The field itself and its option both read "Flight".
-    expect(screen.getAllByRole('button', { name: /^Flight$/i })).toHaveLength(2);
+    expect(screen.getAllByRole('button', { name: /^(Booking Type: ?)?Flight$/i })).toHaveLength(2);
     // Booking types stay in the booking dialog.
     expect(screen.queryByRole('button', { name: /^Accommodation$/i })).not.toBeInTheDocument();
   });
@@ -999,8 +999,9 @@ describe('TransportModal', () => {
     render(<TransportModal {...defaultProps} onSave={onSave} />);
 
     await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH 400');
-    await userEvent.click(screen.getByText('Pending'));
-    await userEvent.click(screen.getByRole('button', { name: 'Confirmed' }));
+    // The status is a pill in the head band that flips between the two.
+    expect(screen.getByText('Pending')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Set to Confirmed' }));
     await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
 
     await waitFor(() => expect(onSave).toHaveBeenCalled());
@@ -1571,4 +1572,51 @@ describe('TransportModal', () => {
     await waitFor(() => expect(onSave).toHaveBeenCalled());
     expect(onSave.mock.calls[0][0]).toMatchObject({ url: 'https://ferry.example' });
   });
+
+  // ── Dialog frame ─────────────────────────────────────────────────────────
+
+  it('FE-PLANNER-TRANSMODAL-077: Escape while the delete question is open takes back only the question', async () => {
+    const onClose = vi.fn();
+    const res = buildReservation({ title: 'Paris Flight', type: 'flight' });
+    render(<TransportModal {...defaultProps} reservation={res} onDelete={vi.fn()} onClose={onClose} />);
+    await userEvent.click(screen.getByRole('button', { name: /delete/i }));
+    expect(screen.getByText('Delete booking?')).toBeInTheDocument();
+
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByText('Delete booking?')).not.toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-PLANNER-TRANSMODAL-078: a transit journey edited by hand reads "Transit" on the type pill and saves as transit', async () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const res = buildReservation({ title: 'Tram 12', type: 'transit' });
+    render(<TransportModal {...defaultProps} reservation={res} onSave={onSave} />);
+    // The list does not offer transit, so the pill falls back to the type's own name.
+    expect(typeField()).toHaveAccessibleName(/^Booking Type: ?Transit$/);
+
+    await userEvent.click(screen.getByRole('button', { name: /^Update$/i }));
+    await waitFor(() => expect(onSave).toHaveBeenCalled());
+    expect(onSave.mock.calls[0][0]).toMatchObject({ type: 'transit' });
+  });
+
+  it('FE-PLANNER-TRANSMODAL-079: a blank title says it is required under the field', async () => {
+    render(<TransportModal {...defaultProps} />);
+    expect(screen.getByText('Title *')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Add$/i })).toBeDisabled();
+
+    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'LH 400');
+    expect(screen.queryByText('Title *')).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^Add$/i })).toBeEnabled();
+  });
+
+  it('FE-PLANNER-TRANSMODAL-080: Automated shows the whole search hint in the head band, free to wrap', async () => {
+    render(<TransportModal {...defaultProps} places={[]} accommodations={[]} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Automated' }));
+    const hint = screen.getByText(/Search real connections and add them straight to the day/);
+    expect(hint).not.toHaveClass('truncate');
+    expect(screen.queryByText('Title *')).not.toBeInTheDocument();
+  });
 });
diff --git a/client/src/components/Planner/TransportModal.tsx b/client/src/components/Planner/TransportModal.tsx
index 040b19ed6..95a4cf9e8 100644
--- a/client/src/components/Planner/TransportModal.tsx
+++ b/client/src/components/Planner/TransportModal.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { useState, useEffect, useRef, useMemo, type ReactNode } from 'react'
 import { useParams } from 'react-router'
-import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, TramFront, X, Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-react'
-import Modal from '../shared/Modal'
+import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, X, Trash2, ChevronUp, ChevronDown, CalendarDays, type LucideIcon } from 'lucide-react'
 import ConfirmDialog from '../shared/ConfirmDialog'
 import CustomSelect from '../shared/CustomSelect'
 import { BookingCodeInput } from '../shared/BookingCode'
 import CustomTimePicker from '../shared/CustomTimePicker'
+import { Tooltip } from '../shared/Tooltip'
 import AirportSelect, { type Airport } from './AirportSelect'
 import LocationSelect, { type LocationPoint } from './LocationSelect'
 import { toLocationPicks } from './locationPicks'
@@ -18,13 +18,17 @@ import type { Day, Place, Accommodation, Reservation, ReservationEndpoint, TripF
 import { parseReservationMetadata, orderedEndpoints, stripAirportCode } from '../../utils/flightLegs'
 import { BookingCostsSection } from './BookingCostsSection'
 import { BookingLinkAndFiles } from './BookingLinkAndFiles'
-import { BookingTypeSelect } from './BookingTypeSelect'
 import { importedPriceEntry } from './importedPrice'
 import { TravelerPicker } from './TravelerPicker'
 import type { TripMember } from '../Budget/BudgetPanelMemberChips'
 import type { BookingExpenseRequest } from './BookingCostsSection.types'
 import type { BookingReviewDraft } from './parsedItemToDraft'
 import TransitSearchPanel, { type PickedPlace } from './TransitSearchPanel'
+import { BookingDialogHeader, StatusPill } from './bookings/BookingDialogShell'
+import { DialogShell, DialogSection, DialogFooter, FooterSpacer, DialogButton, DeleteButton } from '../shared/DialogShell'
+import { INPUT, TEXTAREA, READONLY_BOX, LABEL, GRID_2, GRID_3, PANEL, SEARCH_ON_PANEL, EditorField, Segmented, PillSelect, AddRowButton } from '../shared/dialogParts'
+import { fs, Eyebrow, type StatusTone } from './bookings/bookingParts'
+import { typeInfo } from './bookings/bookingsModel'
 import { typeToCostCategory } from '@trek/shared'
 
 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transit', 'transport_other'] as const
@@ -129,7 +133,7 @@ function emptyStationWaypoint(dayId: string | number = ''): StationWaypointForm
   return { location: null, arrDayId: dayId, arrTime: '', depDayId: dayId, depTime: '', train_number: '', platform: '', seat: '', confirmation_number: '' }
 }
 
-const TYPE_OPTIONS = [
+const TYPE_OPTIONS: { value: TransportType; labelKey: string; Icon: LucideIcon }[] = [
   { value: 'flight',          labelKey: 'reservations.type.flight',          Icon: Plane },
   { value: 'train',           labelKey: 'reservations.type.train',           Icon: Train },
   { value: 'bus',             labelKey: 'reservations.type.bus',             Icon: Bus },
@@ -686,9 +690,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       )
     : []
 
-  const inputClass = 'w-full border border-edge rounded-[10px] px-[12px] py-[8px] text-[13px] font-[inherit] outline-none box-border text-content bg-surface-input'
-  const labelClass = 'block text-[11px] font-semibold text-content-faint mb-[5px] uppercase tracking-[0.03em]'
-
   const dayOptions = [
     { value: '', label: '—' },
     ...days.map(d => {
@@ -708,462 +709,408 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
   const writesFlightLegs = waypoints.filter(w => w.airport).length > 2
   const writesTrainLegs = trainWaypoints.filter(w => w.location).length > 2
 
-  return (
-    <Modal
-      isOpen={isOpen}
+  const titleId = 'transport-editor-title'
+  // The head band takes the colour of the card the booking will sit on.
+  const tone: StatusTone = automated || form.type === 'transit' ? 'transit' : form.status
+  const isCar = form.type === 'car'
+  const routeNames = (form.type === 'flight'
+    ? waypoints.map(w => w.airport?.iata)
+    : form.type === 'train'
+      ? trainWaypoints.map(w => w.location?.name)
+      : [fromPick.location?.name, ...(isCar ? carStops.map(s => s.location?.name) : []), toPick.location?.name]
+  ).filter(Boolean)
+  const shownType = typeInfo(form.type)
+
+  const dayField = (label: string, value: string | number, onChange: (value: string | number) => void) => (
+    <EditorField label={label}>
+      <CustomSelect value={value} onChange={onChange} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+    </EditorField>
+  )
+  const timeField = (label: string, value: string, onChange: (value: string) => void) => (
+    <EditorField label={label}>
+      <CustomTimePicker value={value} onChange={onChange} />
+    </EditorField>
+  )
+  const zoneField = (label: string, tz: string) => (
+    <EditorField label={label}>
+      <Tooltip label={tz}>
+        <div className={READONLY_BOX}>{tz || ' '}</div>
+      </Tooltip>
+    </EditorField>
+  )
+
+  // Manual vs Automated creation (#1065), only while creating: a journey is
+  // edited again through "change route" with the switch hidden. A trip without
+  // dates has no day to depart on, so it gets the manual form alone. The switch
+  // sits in the head band, which stays put while the body swaps modes.
+  const modeSwitch = !reservation && tripHasDates && (
+    <span className="ml-auto">
+      <Segmented
+        label={`${t('transport.modeManual')} / ${t('transport.modeAutomated')}`}
+        value={automated ? 'automated' : 'manual'}
+        onChange={mode => setAutomated(mode === 'automated')}
+        options={[
+          { value: 'manual', label: t('transport.modeManual') },
+          { value: 'automated', label: t('transport.modeAutomated') },
+        ]}
+      />
+    </span>
+  )
+
+  // Until there is a title, the line under it says the field is required:
+  // Add stays greyed out without one, and a disabled button cannot say why.
+  let headerSub: string | undefined
+  if (automated) headerSub = t('transit.searchHint')
+  else if (!form.title.trim()) headerSub = `${t('reservations.titleLabel')} *`
+  else if (routeNames.length >= 2) headerSub = routeNames.join(' → ')
+
+  const header = (
+    <BookingDialogHeader
+      tone={tone}
+      type={automated ? 'transit' : form.type}
+      labelId={titleId}
       onClose={onClose}
-      title={automated ? t('transit.title') : reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
-      size="2xl"
-      footer={
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, width: '100%' }}>
-          <div>
-            {!automated && reservation?.id && onDelete && (
-              <button type="button" onClick={() => setShowDeleteConfirm(true)} className="text-danger" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '8px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-                <Trash2 size={13} /> {t('common.delete')}
-              </button>
-            )}
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button type="button" onClick={onClose} className="text-content-muted" style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>
-              {t('common.cancel')}
-            </button>
-            {!automated && (
-            <button type="button" onClick={handleSubmit} disabled={isSaving || !form.title.trim()} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: isSaving || !form.title.trim() ? 0.5 : 1 }}>
-              {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
-            </button>
-            )}
-          </div>
-        </div>
-      }
-    >
-      {/* Manual vs Automated creation switch (#1065) — creating only; editing a
-          journey re-enters via "change route" with the switch hidden. Without
-          trip dates there is nothing to plan a departure against, so Automated
-          is not offered and only the manual form shows. */}
-      {!reservation && tripHasDates && (
-        <div className="bg-surface-secondary" style={{ display: 'flex', borderRadius: 11, padding: 3, gap: 2, marginBottom: 14 }}>
-          {([['manual', t('transport.modeManual')], ['automated', t('transport.modeAutomated')]] as const).map(([m, label]) => {
-            const active = (m === 'automated') === automated
-            return (
-              <button key={m} type="button" onClick={() => setAutomated(m === 'automated')}
-                className={active ? 'bg-surface-card text-content' : 'text-content-muted'}
-                style={{ flex: 1, padding: '8px 6px', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 500, borderRadius: 8, border: 0, cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap', background: active ? undefined : 'transparent', boxShadow: active ? '0 1px 4px rgba(0,0,0,0.08)' : 'none' }}>
-                {label}
-              </button>
-            )
-          })}
-        </div>
-      )}
-
-      {automated ? (
-        /* ── Automated: public transit search (#1065) ── */
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
-          {/* search header: what this is + the day it plans for */}
-          <div className="bg-surface-tertiary" style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', borderRadius: 14, flexWrap: 'wrap' }}>
-            <div style={{ width: 42, height: 42, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 12, background: '#7c3aed18' }}>
-              <TramFront size={20} strokeWidth={1.8} color="#7c3aed" />
-            </div>
-            <div style={{ flex: 1, minWidth: 180 }}>
-              <div className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, letterSpacing: '-0.01em' }}>{t('transit.title')}</div>
-              <div className="text-content-faint" style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', marginTop: 1 }}>{t('transit.searchHint')}</div>
-            </div>
-            <div style={{ width: typeof window !== 'undefined' && window.innerWidth < 768 ? '100%' : 210, flexShrink: 0 }}>
-              <CustomSelect value={form.start_day_id} onChange={v => set('start_day_id', v)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-            </div>
-          </div>
-          {(() => {
-            const transitDay = days.find(d => d.id === Number(form.start_day_id))
-            if (!transitDay) return <div className="text-content-faint" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', padding: '4px 2px 12px' }}>{t('transit.pickDay')}</div>
-            // Quick picks offer the chosen day's itinerary, not the whole trip (#1460).
-            const dayPlaces = (assignments[String(transitDay.id)] || [])
-              .slice().sort((a, b) => a.order_index - b.order_index)
-              .map(a => places.find(p => p.id === a.place_id))
-              .filter((p): p is Place => p != null)
-            return (
-              <TransitSearchPanel
-                day={transitDay}
-                days={days}
-                places={dayPlaces}
-                accommodations={accommodations}
-                onAdd={(payload) => onSave(payload as Record<string, any> & { title: string })}
-                initialFrom={transitPrefill?.from ?? null}
-                initialTo={transitPrefill?.to ?? null}
-                initialTime={transitPrefill?.time ?? null}
-              />
-            )
-          })()}
-        </div>
-      ) : (
-      <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-
-        {/* Type and travelers side by side at the head of the dialog */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 items-start">
-          <div>
-            <label className={labelClass}>{t('reservations.bookingType')}</label>
-            <BookingTypeSelect options={TYPE_OPTIONS} value={form.type} onChange={value => set('type', value as TransportType)} />
-          </div>
-          {/* Travelers: trip members and guests on this booking (#1517) */}
-          <div>
-            <label className={labelClass}>{t('reservations.travelers.label')}</label>
-            <TravelerPicker tripMembers={tripMembers} selectedIds={travelerIds} onToggle={toggleTraveler} />
-          </div>
-        </div>
-
-        {/* Title */}
-        <div>
-          <label className={labelClass}>{t('reservations.titleLabel')} *</label>
-          <input type="text" value={form.title} onChange={e => set('title', e.target.value)} required
-            placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
-        </div>
-
-        {form.type === 'flight' ? (
-          /* ── Flight route: ordered airports (origin · stops · destination) ── */
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <label className={labelClass}>{t('reservations.layover.route')}</label>
-            {waypoints.map((wp, i) => {
-              const isFirst = i === 0
-              const isLast = i === waypoints.length - 1
-              const updateWp = (patch: Partial<WaypointForm>) => setWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
-              const roleLabel = isFirst ? t('reservations.meta.from') : isLast ? t('reservations.meta.to') : t('reservations.layover.stop')
-              return (
-                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <div className="bg-surface-card" style={{ border: '1px solid var(--border-primary)', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <span className="text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', flexShrink: 0 }}>{roleLabel}</span>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <AirportSelect value={wp.airport} onChange={a => updateWp({ airport: a || null })} />
-                      </div>
-                      {!isFirst && !isLast && (
-                        <button type="button" onClick={() => setWaypoints(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 4, flexShrink: 0 }}>
-                          <Trash2 size={14} />
-                        </button>
-                      )}
-                    </div>
-                    {!isFirst && (
-                      <div style={{ display: 'flex', gap: 8 }}>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalDate')}</label>
-                          <CustomSelect value={wp.arrDayId} onChange={v => updateWp({ arrDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalTime')}</label>
-                          <CustomTimePicker value={wp.arrTime} onChange={v => updateWp({ arrTime: v })} />
-                        </div>
-                        {wp.airport && (
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
-                            <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'var(--bg-tertiary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={wp.airport.tz}>{wp.airport.tz}</div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                    {!isLast && (
-                      <>
-                        <div style={{ display: 'flex', gap: 8 }}>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureDate')}</label>
-                            <CustomSelect value={wp.depDayId} onChange={v => updateWp({ depDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                          </div>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureTime')}</label>
-                            <CustomTimePicker value={wp.depTime} onChange={v => updateWp({ depTime: v })} />
-                          </div>
-                          {wp.airport && (
-                            <div style={{ flex: 1, minWidth: 0 }}>
-                              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
-                              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 'calc(12px * var(--fs-scale-body, 1))', background: 'var(--bg-tertiary)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }} title={wp.airport.tz}>{wp.airport.tz}</div>
-                            </div>
-                          )}
-                        </div>
-                        <div className={`grid grid-cols-1 ${writesFlightLegs ? 'sm:grid-cols-4' : 'sm:grid-cols-3'} gap-3`}>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.airline')}</label>
-                            <input type="text" value={wp.airline} onChange={e => updateWp({ airline: e.target.value })} placeholder="Lufthansa" className={inputClass} />
-                          </div>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
-                            <input type="text" value={wp.flight_number} onChange={e => updateWp({ flight_number: e.target.value })} placeholder="LH 123" className={inputClass} />
-                          </div>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.seat')}</label>
-                            <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="12A" className={inputClass} />
-                          </div>
-                          {writesFlightLegs && (
-                            <div>
-                              <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-                              <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
-                                placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
-                            </div>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {!isLast && (
-                    <button type="button" onClick={() => setWaypoints(prev => [...prev.slice(0, i + 1), emptyWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}
-                      className="text-content-faint hover:text-content-secondary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>
-                      <Plus size={12} /> {t('reservations.layover.addStop')}
-                    </button>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        ) : form.type === 'train' ? (
-          /* ── Train route: ordered stations (origin · stops · destination) ── */
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            <label className={labelClass}>{t('reservations.layover.route')}</label>
-            {trainWaypoints.map((wp, i) => {
-              const isFirst = i === 0
-              const isLast = i === trainWaypoints.length - 1
-              const updateWp = (patch: Partial<StationWaypointForm>) => setTrainWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
-              const roleLabel = isFirst ? t('reservations.meta.from') : isLast ? t('reservations.meta.to') : t('reservations.layover.stop')
-              return (
-                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  <div className="bg-surface-card" style={{ border: '1px solid var(--border-primary)', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <span className="text-content-faint" style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', flexShrink: 0 }}>{roleLabel}</span>
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <LocationSelect value={wp.location} onChange={l => updateWp({ location: l || null })} places={locationPicks} />
-                      </div>
-                      {!isFirst && !isLast && (
-                        <button type="button" onClick={() => setTrainWaypoints(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 4, flexShrink: 0 }}>
-                          <Trash2 size={14} />
-                        </button>
-                      )}
-                    </div>
-                    {!isFirst && (
-                      <div style={{ display: 'flex', gap: 8 }}>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalDate')}</label>
-                          <CustomSelect value={wp.arrDayId} onChange={v => updateWp({ arrDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                        </div>
-                        <div style={{ flex: 1, minWidth: 0 }}>
-                          <label className={labelClass}>{t('reservations.arrivalTime')}</label>
-                          <CustomTimePicker value={wp.arrTime} onChange={v => updateWp({ arrTime: v })} />
-                        </div>
-                      </div>
-                    )}
-                    {!isLast && (
-                      <>
-                        <div style={{ display: 'flex', gap: 8 }}>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureDate')}</label>
-                            <CustomSelect value={wp.depDayId} onChange={v => updateWp({ depDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-                          </div>
-                          <div style={{ flex: 1, minWidth: 0 }}>
-                            <label className={labelClass}>{t('reservations.departureTime')}</label>
-                            <CustomTimePicker value={wp.depTime} onChange={v => updateWp({ depTime: v })} />
-                          </div>
-                        </div>
-                        <div className={`grid grid-cols-1 ${writesTrainLegs ? 'sm:grid-cols-4' : 'sm:grid-cols-3'} gap-3`}>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.trainNumber')}</label>
-                            <input type="text" value={wp.train_number} onChange={e => updateWp({ train_number: e.target.value })} placeholder="ICE 123" className={inputClass} />
-                          </div>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.platform')}</label>
-                            <input type="text" value={wp.platform} onChange={e => updateWp({ platform: e.target.value })} placeholder="12" className={inputClass} />
-                          </div>
-                          <div>
-                            <label className={labelClass}>{t('reservations.meta.seat')}</label>
-                            <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="42A" className={inputClass} />
-                          </div>
-                          {writesTrainLegs && (
-                            <div>
-                              <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-                              <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
-                                placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
-                            </div>
-                          )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                  {!isLast && (
-                    <button type="button" onClick={() => setTrainWaypoints(prev => [...prev.slice(0, i + 1), emptyStationWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}
-                      className="text-content-faint hover:text-content-secondary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', cursor: 'pointer', fontFamily: 'inherit' }}>
-                      <Plus size={12} /> {t('reservations.layover.addStop')}
-                    </button>
-                  )}
-                </div>
-              )
-            })}
-          </div>
-        ) : (
-          <>
-            {/* From / To endpoints (non-flight) */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <div>
-                <label className={labelClass}>{t('reservations.meta.from')}</label>
-                <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} places={locationPicks} />
-              </div>
-              <div>
-                <label className={labelClass}>{t('reservations.meta.to')}</label>
-                <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} places={locationPicks} />
-              </div>
-            </div>
-
-            {/* Stops along the drive — cars only (#1797). The rental frame above stays the
-                pick-up and return; these are the places in between, in order. */}
-            {form.type === 'car' && (
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                <label className={labelClass}>{t('roadtrip.stops.label')}</label>
-                {carStops.map((stop, i) => (
-                  <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-end' }}>
-                    {/* The order of these stops IS the route: `sequence` is the array index
-                        at save time, so the only way to change which one is driven first
-                        was to delete both and re-enter them. Buttons rather than dragging,
-                        because the row already carries a location picker and a time picker
-                        and there is nothing left to grab. */}
-                    {carStops.length > 1 && (
-                      <div style={{ display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
-                        <button
-                          type="button"
-                          onClick={() => moveCarStop(i, -1)}
-                          disabled={i === 0}
-                          aria-label={t('dayplan.moveUp')}
-                          className="text-content-faint enabled:hover:text-content disabled:opacity-30"
-                          style={{ background: 'none', border: 'none', cursor: i === 0 ? 'default' : 'pointer', padding: '2px 4px', display: 'flex', alignItems: 'center' }}
-                        >
-                          <ChevronUp size={13} />
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => moveCarStop(i, 1)}
-                          disabled={i === carStops.length - 1}
-                          aria-label={t('dayplan.moveDown')}
-                          className="text-content-faint enabled:hover:text-content disabled:opacity-30"
-                          style={{ background: 'none', border: 'none', cursor: i === carStops.length - 1 ? 'default' : 'pointer', padding: '2px 4px', display: 'flex', alignItems: 'center' }}
-                        >
-                          <ChevronDown size={13} />
-                        </button>
-                      </div>
-                    )}
-                    <div style={{ flex: 1, minWidth: 0 }}>
-                      <LocationSelect
-                        value={stop.location}
-                        onChange={l => setCarStops(prev => prev.map((s, j) => (j === i ? { ...s, location: l || null } : s)))}
-                        places={locationPicks}
-                      />
-                    </div>
-                    <div style={{ width: 110, flexShrink: 0 }}>
-                      <CustomTimePicker
-                        value={stop.time}
-                        onChange={v => setCarStops(prev => prev.map((s, j) => (j === i ? { ...s, time: v } : s)))}
-                      />
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => setCarStops(prev => prev.filter((_, j) => j !== i))}
-                      aria-label={t('roadtrip.stops.remove')}
-                      className="text-content-faint hover:text-danger"
-                      style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 8, display: 'flex', alignItems: 'center' }}
-                    >
-                      <X size={14} />
-                    </button>
-                  </div>
-                ))}
-                <button
-                  type="button"
-                  onClick={() => setCarStops(prev => [...prev, emptyCarStop()])}
-                  className="text-content-faint hover:text-content-secondary"
-                  style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', cursor: 'pointer', fontFamily: 'inherit' }}
-                >
-                  <Plus size={12} /> {t('reservations.layover.addStop')}
-                </button>
-              </div>
-            )}
-
-            {/* Departure row */}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
-                <CustomSelect value={form.start_day_id} onChange={value => set('start_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
-                <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
-              </div>
-            </div>
-
-            {/* Arrival row */}
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
-                <CustomSelect value={form.end_day_id} onChange={value => set('end_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
-                <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Train-specific fields */}
-        {/* Train number / platform / seat are per-leg now (in the route above). */}
-
-        {/* Booking Code + Status */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>{t('reservations.confirmationCode')}</label>
-            <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
-              placeholder={t('reservations.confirmationPlaceholder')} className={inputClass} />
-          </div>
-          <div>
-            <label className={labelClass}>{t('reservations.status')}</label>
-            <CustomSelect
-              value={form.status}
-              onChange={value => set('status', value)}
-              options={[
-                { value: 'pending', label: t('reservations.pending') },
-                { value: 'confirmed', label: t('reservations.confirmed') },
-              ]}
-              size="sm"
+      eyebrow={automated ? undefined : reservation ? t('transport.modalTitle.edit') : t('transport.modalTitle.create')}
+      title={automated ? t('transit.title') : undefined}
+      titleInput={automated ? undefined : {
+        value: form.title,
+        onChange: value => set('title', value),
+        label: t('reservations.titleLabel'),
+        placeholder: t('reservations.titlePlaceholder'),
+        required: true,
+      }}
+      sub={headerSub}
+      subWraps={automated}
+      pills={(
+        <>
+          {/* The search runs against one day; it heads the band next to the mode switch. */}
+          {automated && (
+            <PillSelect
+              label={t('reservations.date')}
+              value={String(form.start_day_id)}
+              onChange={value => set('start_day_id', value === '' ? '' : Number(value))}
+              options={dayOptions.map(o => ({ value: String(o.value), label: o.label, hint: 'badge' in o ? o.badge : undefined, icon: <CalendarDays size={13} strokeWidth={2.2} className="text-content-faint" /> }))}
             />
+          )}
+          {!automated && (
+            <StatusPill status={form.status} onToggle={() => set('status', form.status === 'confirmed' ? 'pending' : 'confirmed')} />
+          )}
+          {!automated && (
+            <PillSelect
+              label={t('reservations.bookingType')}
+              value={form.type}
+              onChange={value => set('type', value)}
+              options={TYPE_OPTIONS.map(o => ({ value: o.value, label: t(o.labelKey), icon: <o.Icon size={14} style={{ color: typeInfo(o.value).color }} /> }))}
+              fallback={{ label: t(shownType.chipKey), icon: <shownType.Icon size={14} style={{ color: shownType.color }} /> }}
+            />
+          )}
+          {modeSwitch}
+        </>
+      )}
+    />
+  )
+
+  const footer = (
+    <DialogFooter>
+      {!automated && reservation?.id && onDelete && <DeleteButton onClick={() => setShowDeleteConfirm(true)} />}
+      <FooterSpacer />
+      <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+      {!automated && (
+        <DialogButton variant="primary" onClick={() => handleSubmit()} disabled={isSaving || !form.title.trim()}>
+          {isSaving ? t('common.saving') : reservation ? t('common.update') : t('common.add')}
+        </DialogButton>
+      )}
+    </DialogFooter>
+  )
+
+  const transitSearch = () => {
+    const transitDay = days.find(d => d.id === Number(form.start_day_id))
+    if (!transitDay) return <p className="m-0 text-content-faint" style={fs(13, 'body')}>{t('transit.pickDay')}</p>
+    // Quick picks offer the chosen day's itinerary, not the whole trip (#1460).
+    const dayPlaces = (assignments[String(transitDay.id)] || [])
+      .slice().sort((a, b) => a.order_index - b.order_index)
+      .map(a => places.find(p => p.id === a.place_id))
+      .filter((p): p is Place => p != null)
+    return (
+      <TransitSearchPanel
+        day={transitDay}
+        days={days}
+        places={dayPlaces}
+        accommodations={accommodations}
+        onAdd={(payload) => onSave(payload as Record<string, any> & { title: string })}
+        initialFrom={transitPrefill?.from ?? null}
+        initialTo={transitPrefill?.to ?? null}
+        initialTime={transitPrefill?.time ?? null}
+      />
+    )
+  }
+
+  const roleLabel = (i: number, count: number) =>
+    i === 0 ? t('reservations.meta.from') : i === count - 1 ? t('reservations.meta.to') : t('reservations.layover.stop')
+
+  // Flight route: ordered airports (origin, stops, destination) on one rail.
+  const flightRoute = () => (
+    <DialogSection key="flight" label={t('reservations.layover.route')}>
+      <ol>
+        {waypoints.map((wp, i) => {
+          const isFirst = i === 0
+          const isLast = i === waypoints.length - 1
+          const updateWp = (patch: Partial<WaypointForm>) => setWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
+          return (
+            <RailStop key={i} first={isFirst} last={isLast}>
+              <div className={PANEL}>
+                <StopHead label={roleLabel(i, waypoints.length)} onRemove={!isFirst && !isLast ? () => setWaypoints(prev => prev.filter((_, j) => j !== i)) : undefined}>
+                  <div className={SEARCH_ON_PANEL}>
+                    <AirportSelect value={wp.airport} onChange={a => updateWp({ airport: a || null })} />
+                  </div>
+                </StopHead>
+                {!isFirst && (
+                  <div className={wp.airport ? GRID_3 : GRID_2}>
+                    {dayField(t('reservations.arrivalDate'), wp.arrDayId, v => updateWp({ arrDayId: v }))}
+                    {timeField(t('reservations.arrivalTime'), wp.arrTime, v => updateWp({ arrTime: v }))}
+                    {wp.airport && zoneField(t('reservations.meta.arrivalTimezone'), wp.airport.tz)}
+                  </div>
+                )}
+                {!isLast && (
+                  <>
+                    <div className={wp.airport ? GRID_3 : GRID_2}>
+                      {dayField(t('reservations.departureDate'), wp.depDayId, v => updateWp({ depDayId: v }))}
+                      {timeField(t('reservations.departureTime'), wp.depTime, v => updateWp({ depTime: v }))}
+                      {wp.airport && zoneField(t('reservations.meta.departureTimezone'), wp.airport.tz)}
+                    </div>
+                    <div className={writesFlightLegs ? GRID_4 : GRID_3}>
+                      <EditorField label={t('reservations.meta.airline')}>
+                        <input type="text" value={wp.airline} onChange={e => updateWp({ airline: e.target.value })} placeholder="Lufthansa" className={INPUT} />
+                      </EditorField>
+                      <EditorField label={t('reservations.meta.flightNumber')}>
+                        <input type="text" value={wp.flight_number} onChange={e => updateWp({ flight_number: e.target.value })} placeholder="LH 123" className={INPUT} />
+                      </EditorField>
+                      <EditorField label={t('reservations.meta.seat')}>
+                        <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="12A" className={INPUT} />
+                      </EditorField>
+                      {writesFlightLegs && (
+                        <EditorField label={t('reservations.confirmationCode')}>
+                          <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
+                            placeholder={t('reservations.confirmationPlaceholder')} className={INPUT} />
+                        </EditorField>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+              {!isLast && (
+                <div className="py-2.5">
+                  <AddRowButton onClick={() => setWaypoints(prev => [...prev.slice(0, i + 1), emptyWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}>
+                    {t('reservations.layover.addStop')}
+                  </AddRowButton>
+                </div>
+              )}
+            </RailStop>
+          )
+        })}
+      </ol>
+    </DialogSection>
+  )
+
+  // Train route: ordered stations on the same rail, per-leg train fields.
+  const trainRoute = () => (
+    <DialogSection key="train" label={t('reservations.layover.route')}>
+      <ol>
+        {trainWaypoints.map((wp, i) => {
+          const isFirst = i === 0
+          const isLast = i === trainWaypoints.length - 1
+          const updateWp = (patch: Partial<StationWaypointForm>) => setTrainWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
+          return (
+            <RailStop key={i} first={isFirst} last={isLast}>
+              <div className={PANEL}>
+                <StopHead label={roleLabel(i, trainWaypoints.length)} onRemove={!isFirst && !isLast ? () => setTrainWaypoints(prev => prev.filter((_, j) => j !== i)) : undefined}>
+                  <div className={SEARCH_ON_PANEL}>
+                    <LocationSelect value={wp.location} onChange={l => updateWp({ location: l || null })} places={locationPicks} />
+                  </div>
+                </StopHead>
+                {!isFirst && (
+                  <div className={GRID_2}>
+                    {dayField(t('reservations.arrivalDate'), wp.arrDayId, v => updateWp({ arrDayId: v }))}
+                    {timeField(t('reservations.arrivalTime'), wp.arrTime, v => updateWp({ arrTime: v }))}
+                  </div>
+                )}
+                {!isLast && (
+                  <>
+                    <div className={GRID_2}>
+                      {dayField(t('reservations.departureDate'), wp.depDayId, v => updateWp({ depDayId: v }))}
+                      {timeField(t('reservations.departureTime'), wp.depTime, v => updateWp({ depTime: v }))}
+                    </div>
+                    <div className={writesTrainLegs ? GRID_4 : GRID_3}>
+                      <EditorField label={t('reservations.meta.trainNumber')}>
+                        <input type="text" value={wp.train_number} onChange={e => updateWp({ train_number: e.target.value })} placeholder="ICE 123" className={INPUT} />
+                      </EditorField>
+                      <EditorField label={t('reservations.meta.platform')}>
+                        <input type="text" value={wp.platform} onChange={e => updateWp({ platform: e.target.value })} placeholder="12" className={INPUT} />
+                      </EditorField>
+                      <EditorField label={t('reservations.meta.seat')}>
+                        <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="42A" className={INPUT} />
+                      </EditorField>
+                      {writesTrainLegs && (
+                        <EditorField label={t('reservations.confirmationCode')}>
+                          <BookingCodeInput value={wp.confirmation_number} onChange={e => updateWp({ confirmation_number: e.target.value })}
+                            placeholder={t('reservations.confirmationPlaceholder')} className={INPUT} />
+                        </EditorField>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+              {!isLast && (
+                <div className="py-2.5">
+                  <AddRowButton onClick={() => setTrainWaypoints(prev => [...prev.slice(0, i + 1), emptyStationWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}>
+                    {t('reservations.layover.addStop')}
+                  </AddRowButton>
+                </div>
+              )}
+            </RailStop>
+          )
+        })}
+      </ol>
+    </DialogSection>
+  )
+
+  // Every other type: one From and one To, the day and time rows under them.
+  const plainRoute = () => (
+    <DialogSection key="plain" label={t('reservations.layover.route')}>
+      <div className={PANEL}>
+        <div className={GRID_2}>
+          <EditorField label={t('reservations.meta.from')}>
+            <div className={SEARCH_ON_PANEL}>
+              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} places={locationPicks} />
+            </div>
+          </EditorField>
+          <EditorField label={t('reservations.meta.to')}>
+            <div className={SEARCH_ON_PANEL}>
+              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} places={locationPicks} />
+            </div>
+          </EditorField>
+        </div>
+
+        {/* Stops along the drive, cars only (#1797). The rental frame above stays the
+            pick-up and return; these are the places in between, in order. */}
+        {isCar && (
+          <div>
+            <Eyebrow className="mb-[5px]">{t('roadtrip.stops.label')}</Eyebrow>
+            <div className="flex flex-col gap-2">
+              {carStops.map((stop, i) => (
+                <div key={i} className="flex items-center gap-2">
+                  {/* The order of the stops IS the route (sequence is the index at save
+                      time), and the row has no room left to drag by, hence buttons. */}
+                  {carStops.length > 1 && (
+                    <div className="flex flex-none flex-col">
+                      <IconAction label={t('dayplan.moveUp')} onClick={() => moveCarStop(i, -1)} disabled={i === 0} shape="h-[18px] w-6 rounded-md">
+                        <ChevronUp size={13} />
+                      </IconAction>
+                      <IconAction label={t('dayplan.moveDown')} onClick={() => moveCarStop(i, 1)} disabled={i === carStops.length - 1} shape="h-[18px] w-6 rounded-md">
+                        <ChevronDown size={13} />
+                      </IconAction>
+                    </div>
+                  )}
+                  <div className={`${SEARCH_ON_PANEL} flex-1`}>
+                    <LocationSelect
+                      value={stop.location}
+                      onChange={l => setCarStops(prev => prev.map((s, j) => (j === i ? { ...s, location: l || null } : s)))}
+                      places={locationPicks}
+                    />
+                  </div>
+                  <div className="w-[110px] flex-none">
+                    <CustomTimePicker
+                      value={stop.time}
+                      onChange={v => setCarStops(prev => prev.map((s, j) => (j === i ? { ...s, time: v } : s)))}
+                    />
+                  </div>
+                  <IconAction label={t('roadtrip.stops.remove')} onClick={() => setCarStops(prev => prev.filter((_, j) => j !== i))} danger>
+                    <X size={14} />
+                  </IconAction>
+                </div>
+              ))}
+              <AddRowButton onClick={() => setCarStops(prev => [...prev, emptyCarStop()])}>{t('reservations.layover.addStop')}</AddRowButton>
+            </div>
           </div>
-        </div>
-
-        {/* Notes */}
-        <div>
-          <label className={labelClass}>{t('reservations.notes')}</label>
-          <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
-            placeholder={t('reservations.notesPlaceholder')}
-            className={inputClass} style={{ resize: 'none', lineHeight: 1.5 }} />
-        </div>
-
-        {/* Link and files side by side */}
-        <BookingLinkAndFiles
-          url={form.url}
-          onUrlChange={value => set('url', value)}
-          labelClass={labelClass}
-          inputClass={inputClass}
-          reservationId={reservation?.id}
-          tripFiles={files}
-          attachedFiles={attachedFiles}
-          pendingFiles={pendingFiles}
-          onRemovePending={index => setPendingFiles(prev => prev.filter((_, j) => j !== index))}
-          fileInputRef={fileInputRef}
-          onFileChange={handleFileChange}
-          canAttach={!!onFileUpload}
-          uploading={uploadingFile}
-          onLinked={fileId => setLinkedFileIds(prev => [...prev, fileId])}
-          onDetached={fileId => setLinkedFileIds(prev => prev.filter(id => id !== fileId))}
-        />
-
-        {/* Costs — create / view the expense linked to this booking */}
-        {isBudgetEnabled && (
-          <BookingCostsSection
-            reservationId={reservation?.id ?? null}
-            pendingExpense={pendingExpense}
-            onCreate={handleCreateExpense}
-            onEdit={handleEditExpense}
-            onRemove={handleRemoveExpense}
-          />
         )}
 
-      </form>
+        <div className={GRID_2}>
+          {dayField(isCar ? t('reservations.pickupDate') : t('reservations.date'), form.start_day_id, value => set('start_day_id', value))}
+          {timeField(isCar ? t('reservations.pickupTime') : t('reservations.startTime'), form.departure_time, v => set('departure_time', v))}
+        </div>
+        <div className={GRID_2}>
+          {dayField(isCar ? t('reservations.returnDate') : t('reservations.endDate'), form.end_day_id, value => set('end_day_id', value))}
+          {timeField(isCar ? t('reservations.returnTime') : t('reservations.endTime'), form.arrival_time, v => set('arrival_time', v))}
+        </div>
+      </div>
+    </DialogSection>
+  )
+
+  return (
+    <DialogShell
+      open={isOpen}
+      onClose={onClose}
+      labelledBy={titleId}
+      width="editor"
+      align="top"
+      blocked={showDeleteConfirm}
+      onSubmit={automated ? undefined : handleSubmit}
+      header={header}
+      footer={footer}
+    >
+      {automated ? (
+        /* Automated: public transit search (#1065) for the day picked in the head band. */
+        transitSearch()
+      ) : (
+        <>
+          {/* Travelers: trip members and guests on this booking (#1517) */}
+          <DialogSection label={t('reservations.travelers.label')}>
+            <TravelerPicker tripMembers={tripMembers} selectedIds={travelerIds} onToggle={toggleTraveler} />
+          </DialogSection>
+
+          {form.type === 'flight' ? flightRoute() : form.type === 'train' ? trainRoute() : plainRoute()}
+
+          <EditorField label={t('reservations.confirmationCode')}>
+            <BookingCodeInput value={form.confirmation_number} onChange={e => set('confirmation_number', e.target.value)}
+              placeholder={t('reservations.confirmationPlaceholder')} className={INPUT} />
+          </EditorField>
+
+          <EditorField label={t('reservations.notes')}>
+            <textarea value={form.notes} onChange={e => set('notes', e.target.value)} rows={2}
+              placeholder={t('reservations.notesPlaceholder')} className={TEXTAREA} />
+          </EditorField>
+
+          <BookingLinkAndFiles
+            url={form.url}
+            onUrlChange={value => set('url', value)}
+            labelClass={LABEL}
+            inputClass={INPUT}
+            reservationId={reservation?.id}
+            tripFiles={files}
+            attachedFiles={attachedFiles}
+            pendingFiles={pendingFiles}
+            onRemovePending={index => setPendingFiles(prev => prev.filter((_, j) => j !== index))}
+            fileInputRef={fileInputRef}
+            onFileChange={handleFileChange}
+            canAttach={!!onFileUpload}
+            uploading={uploadingFile}
+            onLinked={fileId => setLinkedFileIds(prev => [...prev, fileId])}
+            onDetached={fileId => setLinkedFileIds(prev => prev.filter(id => id !== fileId))}
+          />
+
+          {/* Costs: create or view the expenses linked to this booking */}
+          {isBudgetEnabled && (
+            <BookingCostsSection
+              reservationId={reservation?.id ?? null}
+              pendingExpense={pendingExpense}
+              onCreate={handleCreateExpense}
+              onEdit={handleEditExpense}
+              onRemove={handleRemoveExpense}
+              labelClassName={LABEL}
+              customTooltips
+            />
+          )}
+        </>
       )}
 
       <ConfirmDialog
@@ -1179,6 +1126,65 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
           onClose()
         }}
       />
-    </Modal>
+    </DialogShell>
+  )
+}
+
+const GRID_4 = 'grid grid-cols-4 items-start gap-3 max-sm:grid-cols-1'
+
+/** One stop on the route: a dot on the line from origin to destination, its fields beside it. */
+function RailStop({ first, last, children }: { first: boolean; last: boolean; children: ReactNode }) {
+  return (
+    <li className="relative pl-7">
+      {!first && <span aria-hidden="true" className="absolute left-[7px] top-0 h-6 w-0.5 bg-edge" />}
+      {!last && <span aria-hidden="true" className="absolute bottom-0 left-[7px] top-6 w-0.5 bg-edge" />}
+      <span
+        aria-hidden="true"
+        className={`absolute left-[3px] top-[19px] h-2.5 w-2.5 rounded-full border-2 bg-surface-card ${first || last ? 'border-content-muted' : 'border-content-faint'}`}
+      />
+      {children}
+    </li>
+  )
+}
+
+/** The role of a stop over its place field, and the remove action an intermediate stop has. */
+function StopHead({ label, onRemove, children }: { label: string; onRemove?: () => void; children: ReactNode }) {
+  const { t } = useTranslation()
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex min-h-[24px] items-center gap-2">
+        <Eyebrow className="min-w-0 flex-1 truncate">{label}</Eyebrow>
+        {onRemove && (
+          <IconAction label={t('common.delete')} onClick={onRemove} danger>
+            <Trash2 size={13} />
+          </IconAction>
+        )}
+      </div>
+      {children}
+    </div>
+  )
+}
+
+/** A small icon button inside a route, named by its tooltip. */
+function IconAction({ label, onClick, disabled, danger = false, shape = 'h-6 w-6 rounded-full', children }: {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  danger?: boolean
+  shape?: string
+  children: ReactNode
+}) {
+  return (
+    <Tooltip label={label}>
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={label}
+        className={`grid flex-none place-items-center text-content-faint enabled:hover:bg-surface-hover disabled:cursor-default disabled:opacity-30 ${danger ? 'enabled:hover:text-danger' : 'enabled:hover:text-content'} ${shape}`}
+      >
+        {children}
+      </button>
+    </Tooltip>
   )
 }
diff --git a/client/src/components/Planner/TravelerPicker.tsx b/client/src/components/Planner/TravelerPicker.tsx
index 4da469b07..fc2dc8add 100644
--- a/client/src/components/Planner/TravelerPicker.tsx
+++ b/client/src/components/Planner/TravelerPicker.tsx
@@ -111,7 +111,7 @@ export function TravelerPicker({ tripMembers, selectedIds, onToggle }: {
                 }}>
                 <Avatar userId={m.id} username={m.username} avatarUrl={m.avatar_url} dim={!on} />
                 <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.username}</span>
-                {m.is_guest && <GuestBadge size="xs" />}
+                {m.is_guest && <GuestBadge size="xs" customTooltip />}
                 <Check size={14} strokeWidth={2.5} style={{ flexShrink: 0, opacity: on ? 1 : 0 }} />
               </button>
             )
diff --git a/client/src/components/Planner/TripExportModal.test.tsx b/client/src/components/Planner/TripExportModal.test.tsx
index dd8310c54..f6fce6c48 100644
--- a/client/src/components/Planner/TripExportModal.test.tsx
+++ b/client/src/components/Planner/TripExportModal.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-EXPORTMODAL-001 to FE-PLANNER-EXPORTMODAL-014
+// FE-PLANNER-EXPORTMODAL-001 to FE-PLANNER-EXPORTMODAL-017
 import { render, screen, waitFor } from '../../../tests/helpers/render'
 import userEvent from '@testing-library/user-event'
 import { downloadTripPDF } from '../PDF/TripPDF'
@@ -8,15 +8,20 @@ import { TripExportModal } from './TripExportModal'
 vi.mock('../PDF/TripPDF', () => ({ downloadTripPDF: vi.fn().mockResolvedValue(undefined) }))
 
 // The subscribe dialog fetches its feed token on mount; it is exercised in its
-// own test, here we only care that the entry mounts it.
-vi.mock('./IcsSubscribeModal', () => ({
-  IcsSubscribeModal: ({ title, onClose }: { title: string; onClose: () => void }) => (
-    <div data-testid="ics-subscribe-modal">
-      {title}
-      <button onClick={onClose}>close-subscribe</button>
-    </div>
-  ),
-}))
+// own test, here we only care that the entry mounts it. Portalled to the body
+// like the real one, so the stacking order can be checked.
+vi.mock('./IcsSubscribeModal', async () => {
+  const { createPortal } = await import('react-dom')
+  return {
+    IcsSubscribeModal: ({ title, onClose }: { title: string; onClose: () => void }) => createPortal(
+      <div data-testid="ics-subscribe-modal">
+        {title}
+        <button onClick={onClose}>close-subscribe</button>
+      </div>,
+      document.body,
+    ),
+  }
+})
 
 const t = (key: string, params?: Record<string, unknown>) =>
   params ? `${key}|${Object.values(params).join('|')}` : key
@@ -77,15 +82,43 @@ describe('TripExportModal', () => {
 
   it('FE-PLANNER-EXPORTMODAL-002: open, every export sits in its own section', () => {
     render(<TripExportModal {...makeProps()} />)
+    expect(screen.getByRole('dialog', { name: 'dayplan.export' })).toBeInTheDocument()
+    expect(screen.getByText('dayplan.exportIntro')).toBeInTheDocument()
     expect(screen.getByText('dayplan.exportDocument')).toBeInTheDocument()
     expect(screen.getByText('dayplan.exportCalendar')).toBeInTheDocument()
-    expect(screen.getByText('dayplan.exportMaps · GPX')).toBeInTheDocument()
+    // The format stands beside the plain-language heading as a pill, not behind a "·".
+    expect(screen.getByText('dayplan.exportMaps')).toBeInTheDocument()
+    expect(screen.getByText('GPX')).toBeInTheDocument()
+    expect(document.body.textContent).not.toContain('·')
     for (const label of ['dayplan.pdf', 'mobileTrip.icsDownload', 'mobileTrip.icsSubscribe',
       'dayplan.gpxAll', 'dayplan.gpxPlaces', 'dayplan.gpxDays']) {
       expect(screen.getByText(label)).toBeInTheDocument()
     }
   })
 
+  it('FE-PLANNER-EXPORTMODAL-015: Escape and the head band close button close the dialog', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<TripExportModal {...makeProps({ onClose })} />)
+    await user.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
+
+  it('FE-PLANNER-EXPORTMODAL-016: while one export works, every row waits', async () => {
+    const user = userEvent.setup()
+    let finish: (() => void) | null = null
+    vi.mocked(downloadTripPDF).mockImplementationOnce(() => new Promise<void>(res => { finish = res }))
+    render(<TripExportModal {...makeProps()} />)
+    await user.click(screen.getByText('dayplan.pdf'))
+    await waitFor(() => expect(screen.getByRole('button', { name: /dayplan\.gpxAll/ })).toBeDisabled())
+    expect(screen.getByRole('button', { name: /mobileTrip\.icsDownload/ })).toBeDisabled()
+    expect(screen.getByRole('button', { name: /dayplan\.pdf/ })).toBeDisabled()
+    finish!()
+    await waitFor(() => expect(screen.getByRole('button', { name: /dayplan\.gpxAll/ })).toBeEnabled())
+  })
+
   // ── PDF ───────────────────────────────────────────────────────────────────
 
   it('FE-PLANNER-EXPORTMODAL-003: the PDF row exports the trip with the day notes flattened', async () => {
@@ -160,6 +193,27 @@ describe('TripExportModal', () => {
     expect(screen.queryByTestId('ics-subscribe-modal')).not.toBeInTheDocument()
   })
 
+  // The subscription dialog used to sit under the export dialog (9999 against
+  // 10000), and one Escape closed the export behind it as well.
+  it('FE-PLANNER-EXPORTMODAL-017: the subscribe dialog stacks on top, and Escape leaves the export alone while it is open', async () => {
+    const user = userEvent.setup()
+    const onClose = vi.fn()
+    render(<TripExportModal {...makeProps({ onClose })} />)
+    await user.click(screen.getByText('mobileTrip.icsSubscribe'))
+    const exportBackdrop = screen.getByRole('dialog', { name: 'dayplan.export' }).parentElement!
+    const subscribe = screen.getByTestId('ics-subscribe-modal')
+    // Both hang off the body; the later one paints above the earlier.
+    expect(exportBackdrop.compareDocumentPosition(subscribe) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+    await user.keyboard('{Escape}')
+    expect(onClose).not.toHaveBeenCalled()
+    // A press on the export's backdrop is spent on nothing either.
+    await user.click(exportBackdrop)
+    expect(onClose).not.toHaveBeenCalled()
+    await user.click(screen.getByText('close-subscribe'))
+    await user.keyboard('{Escape}')
+    expect(onClose).toHaveBeenCalledTimes(1)
+  })
+
   // The subscription mints a link that reads the trip without an account, so it
   // needs share_manage; the one-off download is a file this member may already
   // read. Leaving the entry visible would only produce a dialog whose enable
diff --git a/client/src/components/Planner/TripExportModal.tsx b/client/src/components/Planner/TripExportModal.tsx
index ba91783d7..7908691b2 100644
--- a/client/src/components/Planner/TripExportModal.tsx
+++ b/client/src/components/Planner/TripExportModal.tsx
@@ -1,8 +1,9 @@
-import { useState, type ReactNode } from 'react'
+import { useId, useState } from 'react'
 import { CalendarDays, CalendarPlus, ChevronRight, Download, FileText, Loader2, MapPin, Route as RouteIcon } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import Modal from '../shared/Modal'
+import { DialogHeader, DialogSection, DialogShell, DialogTile, NEUTRAL_TINT, fs } from '../shared/DialogShell'
 import { IcsSubscribeModal } from './IcsSubscribeModal'
+import { SoftPill } from './planParts'
 import { useToast } from '../shared/Toast'
 import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -31,7 +32,7 @@ interface TripExportModalProps {
   assignments: AssignmentsMap
   reservations: Reservation[]
   dayNotes: Record<string, DayNote[]>
-  t: (key: string, params?: Record<string, any>) => string
+  t: (key: string, params?: Record<string, string | number>) => string
   locale: string
   toast: ReturnType<typeof useToast>
   /**
@@ -65,6 +66,7 @@ export function TripExportModal({
   // The export gets the store's assignments and applies the day plan's own filter to
   // them, so it needs the same switch the plan reads.
   const showServiceStops = useRoadtripSettings(s => s.roadtrip_service_stops_in_days !== false, tripId)
+  const titleId = useId()
   const fileBase = trip?.title || 'trip'
 
   // Shared tail of every download: Firefox and Safari cancel the download when
@@ -134,24 +136,24 @@ export function TripExportModal({
     }
   }
 
+  const header = (
+    <DialogHeader
+      tile={<DialogTile><Download size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+      tint={NEUTRAL_TINT}
+      labelId={titleId}
+      onClose={onClose}
+      title={t('dayplan.export')}
+      sub={t('dayplan.exportIntro')}
+      subWraps
+    />
+  )
+
   return (
     <>
-      <Modal
-        isOpen={isOpen}
-        onClose={onClose}
-        size="lg"
-        title={
-          <span className="flex items-center gap-2.5">
-            <span className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-accent-subtle text-accent-on">
-              <Download size={16} strokeWidth={2} />
-            </span>
-            {t('dayplan.export')}
-          </span>
-        }
-      >
-        <p className="-mt-1 mb-5 text-caption text-content-muted">{t('dayplan.exportIntro')}</p>
-
-        <Section label={t('dayplan.exportDocument')}>
+      {/* While the subscription dialog sits on top, Escape and the backdrop are
+          its own: one key press closes only the dialog in front. */}
+      <DialogShell open={isOpen} onClose={onClose} labelledBy={titleId} width="narrow" blocked={subscribeOpen} header={header}>
+        <DialogSection label={t('dayplan.exportDocument')}>
           <ExportRow
             icon={FileText}
             title={t('dayplan.pdf')}
@@ -160,45 +162,50 @@ export function TripExportModal({
             disabled={busy != null}
             onClick={exportPdf}
           />
-        </Section>
+        </DialogSection>
 
-        <Section label={t('dayplan.exportCalendar')}>
-          <ExportRow
-            icon={CalendarDays}
-            title={t('mobileTrip.icsDownload')}
-            sub={`${fileBase}.ics`}
-            busy={busy === 'ics'}
-            disabled={busy != null}
-            onClick={downloadIcs}
-          />
-          {canManageShare && (
+        <DialogSection label={t('dayplan.exportCalendar')}>
+          <div className="flex flex-col gap-1.5">
             <ExportRow
-              icon={CalendarPlus}
-              title={t('mobileTrip.icsSubscribe')}
-              sub={t('mobileTrip.icsSubscribeSub')}
+              icon={CalendarDays}
+              title={t('mobileTrip.icsDownload')}
+              sub={`${fileBase}.ics`}
+              busy={busy === 'ics'}
               disabled={busy != null}
-              onClick={() => setSubscribeOpen(true)}
+              onClick={downloadIcs}
             />
-          )}
-        </Section>
+            {canManageShare && (
+              <ExportRow
+                icon={CalendarPlus}
+                title={t('mobileTrip.icsSubscribe')}
+                sub={t('mobileTrip.icsSubscribeSub')}
+                disabled={busy != null}
+                onClick={() => setSubscribeOpen(true)}
+              />
+            )}
+          </div>
+        </DialogSection>
 
-        {/* GPX — the counterpart to the GPX import in the places sidebar. The
-            format name carries more than a translated heading would, so it is
-            spelled out beside the plain-language one. */}
-        <Section label={`${t('dayplan.exportMaps')} · GPX`}>
-          {GPX_SCOPES.map(scope => (
-            <ExportRow
-              key={scope.key}
-              icon={scope.icon}
-              title={t(scope.labelKey)}
-              busy={busy === `gpx:${scope.key}`}
-              disabled={busy != null}
-              onClick={() => downloadGpx(scope.key, scope.query)}
-            />
-          ))}
-        </Section>
-      </Modal>
+        {/* GPX: the counterpart to the GPX import in the places sidebar. The
+            format name carries more than a translated heading would, so it
+            stands beside the plain-language one as a pill of its own. */}
+        <DialogSection label={<span className="inline-flex items-center gap-1.5">{t('dayplan.exportMaps')}<SoftPill caps>GPX</SoftPill></span>}>
+          <div className="flex flex-col gap-1.5">
+            {GPX_SCOPES.map(scope => (
+              <ExportRow
+                key={scope.key}
+                icon={scope.icon}
+                title={t(scope.labelKey)}
+                busy={busy === `gpx:${scope.key}`}
+                disabled={busy != null}
+                onClick={() => downloadGpx(scope.key, scope.query)}
+              />
+            ))}
+          </div>
+        </DialogSection>
+      </DialogShell>
 
+      {/* Mounted after the export dialog, so its backdrop stacks above it. */}
       {subscribeOpen && canManageShare && (
         <IcsSubscribeModal
           endpoint={`/api/trips/${tripId}/feed`}
@@ -211,17 +218,7 @@ export function TripExportModal({
   )
 }
 
-function Section({ label, children }: { label: string; children: ReactNode }) {
-  return (
-    <section className="mb-4 last:mb-0">
-      <h3 className="mb-1.5 px-1 text-caption font-bold uppercase tracking-[0.07em] text-content-faint">{label}</h3>
-      <div className="divide-y divide-edge-faint overflow-hidden rounded-xl border border-edge-faint bg-surface">
-        {children}
-      </div>
-    </section>
-  )
-}
-
+/** One export as a card: its icon tile (a spinner while it works), what it makes, and the chevron. */
 function ExportRow({ icon: Icon, title, sub, busy = false, disabled = false, onClick }: {
   icon: LucideIcon
   title: string
@@ -235,20 +232,16 @@ function ExportRow({ icon: Icon, title, sub, busy = false, disabled = false, onC
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className="group flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors hover:bg-surface-hover disabled:cursor-default disabled:opacity-50"
+      className="group flex w-full items-center gap-3 rounded-[14px] border border-edge-faint bg-surface-card px-3 py-2.5 text-left transition-colors enabled:hover:bg-surface-hover disabled:cursor-default disabled:opacity-50"
     >
-      <span className="flex h-9 w-9 flex-none items-center justify-center rounded-[10px] bg-surface-tertiary text-content-secondary transition-colors group-enabled:group-hover:bg-accent-subtle group-enabled:group-hover:text-accent-on">
+      <span className="grid h-9 w-9 flex-none place-items-center rounded-[10px] bg-surface-tertiary text-content-secondary transition-colors group-enabled:group-hover:bg-surface-card group-enabled:group-hover:text-content">
         {busy ? <Loader2 size={16} strokeWidth={2} className="animate-spin" /> : <Icon size={16} strokeWidth={1.9} />}
       </span>
       <span className="min-w-0 flex-1">
-        <span className="block truncate text-body font-semibold text-content">{title}</span>
-        {sub && <span className="block truncate text-caption text-content-muted">{sub}</span>}
+        <span className="block truncate font-semibold text-content" style={fs(13.5, 'body')}>{title}</span>
+        {sub && <span className="block truncate text-content-muted" style={fs(11.5)}>{sub}</span>}
       </span>
-      <ChevronRight
-        size={15}
-        strokeWidth={2}
-        className="flex-none text-content-faint transition-transform group-enabled:group-hover:translate-x-0.5"
-      />
+      <ChevronRight size={15} strokeWidth={2} className="flex-none text-content-faint transition-transform group-enabled:group-hover:translate-x-0.5" />
     </button>
   )
 }
diff --git a/client/src/components/Planner/bookings/BookingCard.tsx b/client/src/components/Planner/bookings/BookingCard.tsx
index 445975aa3..514fa987c 100644
--- a/client/src/components/Planner/bookings/BookingCard.tsx
+++ b/client/src/components/Planner/bookings/BookingCard.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import { Hotel, Link2, MapPin, ExternalLink, Pencil, Trash2, Wallet } from 'lucide-react'
+import { Pencil, Trash2, Wallet } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -11,7 +11,7 @@ import { markdownLinkComponents } from '../../shared/markdownLink'
 import { BlurredCode } from '../../shared/BookingCode'
 import PluginFrame from '../../Plugins/PluginFrame'
 import { PluginCardFooter } from '../../Plugins/PluginContributions'
-import { TransitLegChips, fmtTransitDuration } from '../transitDisplay'
+import { fmtTransitDuration } from '../transitDisplay'
 import { formatMoney } from '../../../utils/formatters'
 import { parseMeta, typeInfo, displayTitle, type CostTotal } from './bookingsModel'
 import type { BookingFacts } from './bookingFacts'
@@ -19,6 +19,7 @@ import {
   AirTrailPill, BOX, Eyebrow, Field, FileRows, ReviewPill, RoundAction, StatusDot, TravelerChips, TypeChip,
   fs, toneOf, toneTint,
 } from './bookingParts'
+import { TransitLegs, transitSummary } from './transitParts'
 
 export interface BookingCardProps {
   r: Reservation
@@ -61,16 +62,19 @@ export default function BookingCard(p: BookingCardProps) {
       <div className="flex items-center gap-2 border-b border-edge-faint px-3 py-2.5" style={{ background: toneTint(tone) }}>
         <StatusDot r={r} canToggle={p.canEdit} onToggle={p.onToggleStatus} />
         <TypeChip type={r.type} />
-        <span className="min-w-0 flex-1 truncate font-bold text-content" style={fs(13.5, 'body')}>{displayTitle(r)}</span>
-        {!!r.needs_review && <ReviewPill />}
+        <span className="flex min-w-0 flex-1 items-center gap-1.5">
+          <span className="min-w-0 truncate font-bold text-content" style={fs(13.5, 'body')}>{displayTitle(r)}</span>
+          {!!r.needs_review && <ReviewPill />}
+        </span>
         <AirTrailPill r={r} />
-        {p.canEdit && !transit && <RoundAction label={t('common.edit')} onClick={p.onEdit}><Pencil size={12} strokeWidth={2} /></RoundAction>}
+        {p.canEdit && <RoundAction label={t('common.edit')} onClick={p.onEdit}><Pencil size={12} strokeWidth={2} /></RoundAction>}
         {p.canEdit && <RoundAction label={t('common.delete')} onClick={p.onDelete} danger><Trash2 size={12} strokeWidth={2} /></RoundAction>}
       </div>
 
       <div className="flex flex-1 flex-col gap-2 px-3 pb-3 pt-2.5">
         {(facts.day || facts.time) && (
-          <div className="flex gap-2">
+          // A day range needs the whole width; the time then goes below it.
+          <div className={`flex gap-2 ${facts.day?.range ? 'flex-col' : ''}`}>
             {facts.day && (
               <Field label={t('reservations.date')} className="flex-[1.4]">
                 {facts.day.label}
@@ -89,24 +93,28 @@ export default function BookingCard(p: BookingCardProps) {
               </Field>
             )}
             {facts.endpoints.length >= 2 && (
-              <div className={`${BOX} flex flex-wrap items-center justify-center gap-2 px-[10px] py-2 font-semibold text-content`} style={fs(12.5, 'body')}>
-                {facts.endpoints.map((ep, i) => (
-                  <span key={ep.id ?? i} className="inline-flex min-w-0 items-center gap-2">
-                    {i > 0 && <info.Icon size={13} strokeWidth={2.2} className="flex-none" style={{ color: info.color }} />}
-                    <span className="truncate">{ep.name}</span>
-                  </span>
-                ))}
-              </div>
+              <Block label={t('reservations.routeLabel')}>
+                <div className={`${BOX} flex flex-wrap items-center justify-center gap-2 px-[10px] py-2 font-semibold text-content`} style={fs(12.5, 'body')}>
+                  {facts.endpoints.map((ep, i) => (
+                    <span key={ep.id ?? i} className="inline-flex min-w-0 items-center gap-2">
+                      {i > 0 && <info.Icon size={13} strokeWidth={2.2} className="flex-none" style={{ color: info.color }} />}
+                      <span className="truncate">{ep.name}</span>
+                    </span>
+                  ))}
+                </div>
+              </Block>
             )}
             {facts.legCodes.length > 0 && (
-              <div className={`${BOX} flex flex-col gap-1 px-[10px] py-2`}>
-                {facts.legCodes.map((l, i) => (
-                  <div key={i} className="flex items-center gap-2" style={fs(12, 'body')}>
-                    <span className="min-w-0 flex-1 truncate font-medium text-content-secondary">{l.route || t('reservations.confirmationCode')}</span>
-                    <BlurredCode className="font-geist tabular-nums text-content-muted">{l.code}</BlurredCode>
-                  </div>
-                ))}
-              </div>
+              <Block label={t('reservations.segmentCodes')}>
+                <div className={`${BOX} flex flex-col gap-1 px-[10px] py-2`}>
+                  {facts.legCodes.map((l, i) => (
+                    <div key={i} className="flex items-center gap-2" style={fs(12, 'body')}>
+                      <span className="min-w-0 flex-1 truncate font-medium text-content-secondary">{l.route || t('reservations.confirmationCode')}</span>
+                      <BlurredCode className="font-geist tabular-nums text-content-muted">{l.code}</BlurredCode>
+                    </div>
+                  ))}
+                </div>
+              </Block>
             )}
             {facts.cells.length > 0 && (
               <div className="grid grid-cols-3 gap-2">
@@ -116,39 +124,35 @@ export default function BookingCard(p: BookingCardProps) {
           </>
         )}
 
-        {(facts.place || facts.accommodation || facts.linked || facts.url) && (
-          <div className="flex flex-col gap-1">
-            {facts.place && <IconRow icon={<MapPin size={12} strokeWidth={2} />}>{facts.place}</IconRow>}
-            {facts.accommodation && <IconRow icon={<Hotel size={12} strokeWidth={2} />}>{facts.accommodation}</IconRow>}
-            {facts.linked && <IconRow icon={<Link2 size={12} strokeWidth={2} />}>{facts.linked}</IconRow>}
-            {facts.url && (
-              <IconRow icon={<ExternalLink size={12} strokeWidth={2} />}>
-                {facts.url.href
-                  ? <a href={facts.url.href} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()} className="text-content hover:underline">{facts.url.href}</a>
-                  : facts.url.text}
-              </IconRow>
-            )}
-          </div>
+        {facts.place && <Field label={t('reservations.locationAddress')}>{facts.place}</Field>}
+        {facts.accommodation && <Field label={t('reservations.meta.linkAccommodation')}>{facts.accommodation}</Field>}
+        {facts.linked && <Field label={t('reservations.linkedTo')}>{facts.linked}</Field>}
+        {facts.url && (
+          <Field label={t('reservations.urlLabel')}>
+            {facts.url.href
+              ? <a href={facts.url.href} target="_blank" rel="noopener noreferrer" onClick={e => e.stopPropagation()} className="text-content hover:underline">{facts.url.href}</a>
+              : facts.url.text}
+          </Field>
         )}
 
-        {r.notes && !transit && (
-          <div className={`${BOX} collab-note-md line-clamp-4 px-[10px] py-2 text-content-muted`} style={fs(12, 'body')}>
-            <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{r.notes}</Markdown>
-          </div>
+        {r.notes && (
+          <Block label={t('reservations.notes')}>
+            <div className={`${BOX} collab-note-md line-clamp-4 px-[10px] py-2 text-content-muted`} style={fs(12, 'body')}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{r.notes}</Markdown>
+            </div>
+          </Block>
         )}
 
         {(r.travelers || []).length > 0 && (
-          <div>
-            <Eyebrow className="mb-[3px]">{t('reservations.travelers.label')}</Eyebrow>
+          <Block label={t('reservations.travelers.label')}>
             <TravelerChips travelers={r.travelers || []} />
-          </div>
+          </Block>
         )}
 
         {p.files.length > 0 && (
-          <div>
-            <Eyebrow className="mb-[3px]">{t('files.title')}</Eyebrow>
+          <Block label={t('files.title')}>
             <FileRows files={p.files} />
-          </div>
+          </Block>
         )}
 
         {p.costs.length > 0 && (
@@ -177,32 +181,36 @@ export default function BookingCard(p: BookingCardProps) {
   )
 }
 
-function IconRow({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+/** Content longer than a field (a route, notes, people, files) under its own label, like every field. */
+function Block({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <div className={`${BOX} flex min-w-0 items-center gap-1.5 px-[10px] py-[7px] font-semibold text-content`} style={fs(12, 'body')}>
-      <span className="flex-none text-content-muted">{icon}</span>
-      <span className="min-w-0 truncate">{children}</span>
+    <div className="min-w-0">
+      <Eyebrow className="mb-[3px]">{label}</Eyebrow>
+      {children}
     </div>
   )
 }
 
-/** A transit journey's legs in their line colours, its duration and the first line of its notes. */
+/** A transit journey as the dialog shows it, compacted: its totals as fields, then leg by leg. */
 function TransitBody({ r }: { r: Reservation }) {
   const { t } = useTranslation()
-  const meta = parseMeta(r)
-  const transit = meta.transit && Array.isArray(meta.transit.legs) ? meta.transit : null
+  const journey = transitSummary(parseMeta(r))
+  if (!journey) return null
+  const cells: { label: string; value: string }[] = []
+  if (journey.duration) cells.push({ label: t('transit.durationLabel'), value: fmtTransitDuration(journey.duration, t) })
+  if (journey.legs.length > 0) cells.push({ label: t('transit.transfersLabel'), value: String(journey.transfers) })
+  if (journey.walk > 59) cells.push({ label: t('transit.walkLabel'), value: t('transit.min', { count: Math.round(journey.walk / 60) }) })
   return (
     <>
-      {transit && (
-        <div className={`${BOX} flex flex-col gap-1.5 px-[10px] py-2`}>
-          <TransitLegChips legs={transit.legs} size="md" t={t} />
-          {transit.duration ? <span className="font-geist text-content-faint" style={fs(11)}>{fmtTransitDuration(transit.duration, t)}</span> : null}
+      {cells.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {cells.map((c, i) => <Field key={i} label={c.label}>{c.value}</Field>)}
         </div>
       )}
-      {r.notes && (
-        <div className="truncate px-0.5 font-geist text-content-faint" style={fs(11.5)}>
-          <Markdown remarkPlugins={[remarkGfm]} allowedElements={['strong', 'em', 'del', 'code', 'a']} unwrapDisallowed>{r.notes.split('\n')[0]}</Markdown>
-        </div>
+      {journey.legs.length > 0 && (
+        <Block label={t('transit.itinerary')}>
+          <TransitLegs legs={journey.legs} compact />
+        </Block>
       )}
     </>
   )
diff --git a/client/src/components/Planner/bookings/BookingDetailDialog.tsx b/client/src/components/Planner/bookings/BookingDetailDialog.tsx
index d36a341d2..8552f6ebb 100644
--- a/client/src/components/Planner/bookings/BookingDetailDialog.tsx
+++ b/client/src/components/Planner/bookings/BookingDetailDialog.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-import { ArrowRight, Copy, ExternalLink, FolderOpen, Footprints, Hotel, Link2, MapPin, Pencil, Route as RouteIcon, Trash2, Wallet, X } from 'lucide-react'
+import { useState, type ReactNode } from 'react'
+import { CalendarDays, Copy, FolderOpen, Pencil, RefreshCw, Route as RouteIcon, Wallet } from 'lucide-react'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
@@ -10,17 +9,21 @@ import type { ActivePlugin } from '../../../store/pluginStore'
 import { useTranslation } from '../../../i18n'
 import { useTripStore } from '../../../store/tripStore'
 import { useSettingsStore } from '../../../store/settingsStore'
-import { lockBodyScroll } from '../../../utils/bodyScrollLock'
 import { useToast } from '../../shared/Toast'
 import { BlurredCode } from '../../shared/BookingCode'
 import { markdownLinkComponents } from '../../shared/markdownLink'
 import NameDialog from '../../shared/NameDialog'
+import { Tooltip } from '../../shared/Tooltip'
 import PluginFrame from '../../Plugins/PluginFrame'
 import { PluginCardFooter } from '../../Plugins/PluginContributions'
 import { formatMoney, formatTime } from '../../../utils/formatters'
-import { parseMeta, displayTitle, typeInfo } from './bookingsModel'
+import { fmtTransitDuration } from '../transitDisplay'
+import { parseMeta, displayTitle } from './bookingsModel'
 import { formatDay, type BookingFacts } from './bookingFacts'
-import { AirTrailPill, BOX, Eyebrow, Field, FileRows, ReviewPill, TravelerChips, TypeTile, fs, toneColor, toneOf, toneTint } from './bookingParts'
+import { AirTrailPill, BOX, Eyebrow, Field, FileRows, ReviewPill, TravelerChips, fs, toneOf } from './bookingParts'
+import { TransitLegs, transitSummary } from './transitParts'
+import { BookingDialogHeader, StatusPill, TypePill } from './BookingDialogShell'
+import { DeleteButton, DialogButton, DialogFooter, DialogSection as Section, DialogShell, FooterSpacer, PILL } from '../../shared/DialogShell'
 
 export interface BookingDetailDialogProps {
   r: Reservation
@@ -28,16 +31,21 @@ export interface BookingDetailDialogProps {
   files: TripFile[]
   linkedCosts: BudgetItem[]
   tripId: number
+  /** reservation_edit: renaming, the status switch and Delete. */
   canEdit: boolean
   /** True while a question opened from here (the delete confirmation) sits on top. */
   covered?: boolean
   onClose: () => void
-  onEdit: () => void
+  /** Opens the booking's editor. Without it there is no Edit: the editor behind it
+   *  can need a right of its own (a transport's is day_edit on the plan). */
+  onEdit?: () => void
   onDelete: () => void
   onToggleStatus: () => void
   onShowOnMap?: () => void
   onMap?: boolean
   onEditExpense?: (item: BudgetItem) => void
+  /** A transit journey only: search the connection again from the same stops. */
+  onChangeRoute?: () => void
   onNavigateToFiles: () => void
   contributions: ViewContribution[]
   detailPlugins: ActivePlugin[]
@@ -58,33 +66,15 @@ export default function BookingDetailDialog(p: BookingDetailDialogProps) {
   const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
   const [renaming, setRenaming] = useState(false)
   const [name, setName] = useState('')
-  const panelRef = useRef<HTMLDivElement>(null)
   const meta = parseMeta(r)
   const tone = toneOf(r)
-  const info = typeInfo(r.type)
-  const transitLegs: TransitLeg[] = Array.isArray(meta.transit?.legs) ? meta.transit.legs : []
+  const transit = transitSummary(meta)
   const titleId = `booking-detail-${r.id}`
-
-  // Escape closes, unless the rename field or the delete question is the one being answered.
-  const { onClose } = p
+  // Escape and the backdrop wait while the rename field or the delete question is being answered.
   const blocked = renaming || !!p.covered
-  useEffect(() => {
-    if (blocked) return
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose() }
-    document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
-  }, [blocked, onClose])
-
-  // The page stays put behind the dialog, and the card it came from gets the focus back.
-  useEffect(() => {
-    const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null
-    const release = lockBodyScroll()
-    panelRef.current?.focus()
-    return () => { release(); opener?.focus() }
-  }, [])
 
   const subParts = [meta.airline, meta.flight_number, meta.train_number, facts.endpoints.length >= 2 ? facts.endpoints.map(e => e.code || e.name).join(' → ') : null].filter(Boolean)
-  const sub = subParts.length ? subParts.join('  ') : facts.day?.label ?? null
+  const sub = subParts.length ? subParts.join('  ') : null
 
   const stats: { value: string; label: string }[] = []
   if (facts.isHotel) {
@@ -97,13 +87,17 @@ export default function BookingDetailDialog(p: BookingDetailDialogProps) {
     const to = facts.endpoints[facts.endpoints.length - 1]
     if (facts.startTime) stats.push({ value: facts.time?.split(' → ')[0] || facts.startTime, label: from?.name || t('reservations.start') })
     if (facts.endTime) stats.push({ value: facts.time?.split(' → ')[1] || facts.endTime, label: to?.name || t('reservations.end') })
+    if (transit?.duration) stats.push({ value: fmtTransitDuration(transit.duration, t), label: t('transit.durationLabel') })
+    if (transit && transit.legs.length > 0) stats.push({ value: String(transit.transfers), label: t('transit.transfersLabel') })
+    // Under a minute of walking is not worth a tile.
+    if (transit && transit.walk > 59) stats.push({ value: t('transit.min', { count: Math.round(transit.walk / 60) }), label: t('transit.walkLabel') })
     if (meta.platform) stats.push({ value: meta.platform, label: t('reservations.meta.platform') })
     if (meta.seat) stats.push({ value: meta.seat, label: t('reservations.meta.seat') })
   }
   // Cells already shown as a stat stay out of the field grid below.
   const shownAsStat = new Set([t('reservations.meta.platform'), t('reservations.meta.seat'), t('reservations.meta.checkIn'), t('reservations.meta.checkOut')])
   const cells = facts.cells.filter(c => !shownAsStat.has(c.label))
-  const hasDetails = !!(facts.place || facts.accommodation || facts.linked || facts.url || facts.day)
+  const hasDetails = !!(facts.place || facts.accommodation || facts.linked || facts.url)
 
   const copyCode = async () => {
     try {
@@ -124,88 +118,86 @@ export default function BookingDetailDialog(p: BookingDetailDialogProps) {
     }
   }
 
-  const statusLabel = tone === 'confirmed' ? t('reservations.confirmed') : t('reservations.pending')
-  const nextStatus = tone === 'confirmed' ? t('reservations.pending') : t('reservations.confirmed')
-  const statusPill = (
-    <>
-      <span className="h-2 w-2 flex-none rounded-full" style={{ background: toneColor(tone) }} />
-      {statusLabel}
-    </>
-  )
-  const pillCls = 'inline-flex flex-none items-center gap-1.5 rounded-full bg-surface-card px-2.5 py-1 font-semibold text-content shadow-sm'
-
-  return createPortal(
-    <div
-      role="presentation"
-      className="trek-modal-backdrop trek-backdrop-enter fixed inset-0 z-[10000] flex items-center justify-center bg-[rgba(15,23,42,0.5)] px-4"
-      style={{ paddingTop: 40, paddingBottom: 'calc(40px + var(--bottom-nav-h, 0px))' }}
-      onMouseDown={e => { if (e.target === e.currentTarget && !blocked) onClose() }}
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        tabIndex={-1}
-        className="trek-modal-enter flex max-h-full w-full max-w-[600px] flex-col overflow-hidden rounded-[22px] bg-surface-card shadow-2xl outline-none"
-      >
-        <header className="flex-none px-6 pb-4 pt-5" style={{ background: toneTint(tone) }}>
-          <div className="flex items-start gap-3.5">
-            <TypeTile type={r.type} size={46} raised />
-            <div className="min-w-0 flex-1 pt-0.5">
-              {p.canEdit ? (
-                <button id={titleId} type="button" onClick={() => { setName(r.title); setRenaming(true) }} title={t('reservations.rename')}
-                  className="block w-full truncate text-left font-bold tracking-[-0.01em] text-content hover:underline hover:decoration-edge" style={fs(20, 'subtitle')}>
-                  {displayTitle(r)}
-                </button>
-              ) : (
-                <h2 id={titleId} className="m-0 truncate font-bold tracking-[-0.01em] text-content" style={fs(20, 'subtitle')}>{displayTitle(r)}</h2>
-              )}
-              {sub && <div className="mt-0.5 truncate font-geist text-content-muted" style={fs(12.5)}>{sub}</div>}
-            </div>
-            <button type="button" onClick={onClose} aria-label={t('common.close')}
-              className="grid h-9 w-9 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm hover:text-content">
-              <X size={16} strokeWidth={2.2} />
-            </button>
-          </div>
-
-          <div className="mt-4 flex flex-wrap items-center gap-2" style={fs(12, 'body')}>
-            {tone !== 'transit' && (p.canEdit ? (
-              <button type="button" onClick={p.onToggleStatus} title={t('reservations.status.switchTo', { status: nextStatus })}
-                aria-label={t('reservations.status.switchTo', { status: nextStatus })} className={`${pillCls} hover:opacity-80`}>
-                {statusPill}
-              </button>
-            ) : <span className={pillCls}>{statusPill}</span>)}
-            <span className={pillCls}><info.Icon size={13} strokeWidth={2.2} style={{ color: info.color }} />{t(info.labelKey)}</span>
-            {!!r.needs_review && <ReviewPill />}
-            <AirTrailPill r={r} />
-            {r.confirmation_number && (
-              <span className={`${pillCls} ml-auto gap-1 py-0.5 pr-1`}>
-                <BlurredCode className="font-geist tabular-nums">#{r.confirmation_number}</BlurredCode>
-                <button type="button" onClick={copyCode} aria-label={t('reservations.copyCode')} title={t('reservations.copyCode')}
+  const header = (
+    <BookingDialogHeader
+      tone={tone}
+      type={r.type}
+      labelId={titleId}
+      onClose={p.onClose}
+      title={displayTitle(r)}
+      onTitleClick={p.canEdit ? () => { setName(r.title); setRenaming(true) } : undefined}
+      titleTooltip={t('reservations.rename')}
+      sub={sub}
+      pills={(
+        <>
+          {tone !== 'transit' && <StatusPill status={tone} onToggle={p.canEdit ? p.onToggleStatus : undefined} />}
+          <TypePill type={r.type} />
+          {facts.day && (
+            <span className={PILL}>
+              <CalendarDays size={13} strokeWidth={2.2} className="text-content-faint" />
+              {facts.day.label}
+              {/* A stay's dates already stand in the check-in and check-out tiles. */}
+              {facts.day.date && !facts.isHotel && <span className="font-medium text-content-muted">{facts.day.date}</span>}
+            </span>
+          )}
+          {!!r.needs_review && <ReviewPill pill />}
+          <AirTrailPill r={r} pill />
+          {r.confirmation_number && (
+            <span className={`${PILL} ml-auto gap-1 py-0.5 pr-1`}>
+              <BlurredCode className="font-geist tabular-nums">#{r.confirmation_number}</BlurredCode>
+              <Tooltip label={t('reservations.copyCode')}>
+                <button type="button" onClick={copyCode} aria-label={t('reservations.copyCode')}
                   className="grid h-6 w-6 place-items-center rounded-full text-content-faint hover:bg-surface-hover hover:text-content">
                   <Copy size={12} strokeWidth={2} />
                 </button>
-              </span>
-            )}
-          </div>
-        </header>
-
-        <div className="flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 pb-6 pt-5">
-          {stats.length > 0 && (
-            <div className="flex gap-2">
-              {stats.map((s, i) => (
-                <div key={i} className="min-w-0 flex-1 rounded-[12px] bg-surface-tertiary px-3 py-2.5 text-center">
-                  <div className="truncate font-bold tabular-nums tracking-[-0.01em] text-content" style={fs(18, 'subtitle')}>{s.value}</div>
-                  <div className="mt-0.5 truncate font-geist text-content-faint" style={fs(10.5)}>{s.label}</div>
-                </div>
-              ))}
-            </div>
+              </Tooltip>
+            </span>
           )}
+        </>
+      )}
+    />
+  )
 
-          {transitLegs.length > 0 && <TransitLegs legs={transitLegs} />}
+  const footer = (p.onShowOnMap || p.onChangeRoute || p.canEdit || p.onEdit) && (
+    <DialogFooter>
+      {p.onShowOnMap && (
+        <DialogButton onClick={p.onShowOnMap} aria-pressed={!!p.onMap} active={!!p.onMap} icon={<RouteIcon size={14} strokeWidth={2} />}>
+          {t('mobileTrip.onMap')}
+        </DialogButton>
+      )}
+      {p.onChangeRoute && (
+        <DialogButton onClick={p.onChangeRoute} icon={<RefreshCw size={14} strokeWidth={2} />}>{t('transit.changeRoute')}</DialogButton>
+      )}
+      <FooterSpacer />
+      {p.canEdit && <DeleteButton onClick={p.onDelete} />}
+      {p.onEdit && (
+        <DialogButton variant="primary" onClick={p.onEdit} icon={<Pencil size={14} strokeWidth={2} />}>{t('common.edit')}</DialogButton>
+      )}
+    </DialogFooter>
+  )
 
-          {facts.endpoints.length > 2 && (
+  return (
+    <>
+      <DialogShell onClose={p.onClose} labelledBy={titleId} blocked={blocked} header={header} footer={footer}>
+        {stats.length > 0 && (
+          <div className="flex gap-2">
+            {stats.map((s, i) => (
+              <div key={i} className="min-w-0 flex-1 rounded-[12px] bg-surface-tertiary px-3 py-2.5 text-center">
+                <div className="truncate font-bold tabular-nums tracking-[-0.01em] text-content" style={fs(18, 'subtitle')}>{s.value}</div>
+                <div className="mt-0.5 truncate font-geist text-content-faint" style={fs(10.5)}>{s.label}</div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {transit && transit.legs.length > 0 && (
+          <Section label={t('transit.itinerary')}>
+            <TransitLegs legs={transit.legs} />
+          </Section>
+        )}
+
+        {facts.endpoints.length > 2 && (
+          <Section label={t('reservations.routeLabel')}>
             <div className={`${BOX} flex flex-col gap-2 px-3.5 py-3`}>
               {facts.endpoints.map((ep, i) => (
                 <div key={ep.id ?? i} className="flex items-center gap-2.5" style={fs(13, 'body')}>
@@ -215,118 +207,94 @@ export default function BookingDetailDialog(p: BookingDetailDialogProps) {
                 </div>
               ))}
             </div>
-          )}
+          </Section>
+        )}
 
-          {facts.legCodes.length > 0 && (
-            <Section label={t('reservations.confirmationCode')}>
-              <div className={`${BOX} flex flex-col gap-1.5 px-3.5 py-2.5`}>
-                {facts.legCodes.map((l, i) => (
-                  <div key={i} className="flex items-center gap-2" style={fs(13, 'body')}>
-                    <span className="min-w-0 flex-1 truncate font-medium text-content-secondary">{l.route || t('reservations.confirmationCode')}</span>
-                    <BlurredCode className="font-geist tabular-nums text-content-muted">#{l.code}</BlurredCode>
-                  </div>
-                ))}
-              </div>
-            </Section>
-          )}
-
-          {cells.length > 0 && (
-            <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-2">
-              {cells.map((c, i) => <Field key={i} label={c.label}>{c.value}</Field>)}
-            </div>
-          )}
-
-          {hasDetails && (
-            <div className={`${BOX} flex flex-col px-3.5`}>
-              {facts.day && <DetailRow icon={<RouteIcon size={14} />}>{[facts.day.label, facts.day.date].filter(Boolean).join('  ')}</DetailRow>}
-              {facts.place && <DetailRow icon={<MapPin size={14} />}>{facts.place}</DetailRow>}
-              {facts.accommodation && <DetailRow icon={<Hotel size={14} />}>{facts.accommodation}</DetailRow>}
-              {facts.linked && <DetailRow icon={<Link2 size={14} />}>{facts.linked}</DetailRow>}
-              {facts.url && (
-                <DetailRow icon={<ExternalLink size={14} />}>
-                  {facts.url.href ? <a href={facts.url.href} target="_blank" rel="noopener noreferrer" className="text-content hover:underline">{facts.url.href}</a> : facts.url.text}
-                </DetailRow>
-              )}
-            </div>
-          )}
-
-          {(r.travelers || []).length > 0 && (
-            <Section label={t('reservations.travelers.label')}>
-              <TravelerChips travelers={r.travelers || []} />
-            </Section>
-          )}
-
-          {r.notes && (
-            <Section label={t('reservations.notes')}>
-              <div className={`${BOX} collab-note-md px-3.5 py-3 text-content-secondary`} style={{ ...fs(13, 'body'), wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{r.notes}</Markdown>
-              </div>
-            </Section>
-          )}
-
-          {p.linkedCosts.length > 0 && (
-            <Section label={t('reservations.costsLabel')}>
-              <div className="flex flex-col gap-1.5">
-                {p.linkedCosts.map(item => (
-                  <button key={item.id} type="button" disabled={!p.onEditExpense} onClick={() => p.onEditExpense?.(item)}
-                    className={`${BOX} flex items-center gap-2.5 px-3.5 py-2.5 text-left enabled:hover:bg-surface-hover`} style={fs(13, 'body')}>
-                    <Wallet size={14} strokeWidth={2} className="flex-none text-content-faint" />
-                    <span className="min-w-0 flex-1 truncate font-medium text-content">{item.name}</span>
-                    <span className="flex-none font-semibold tabular-nums text-content">{formatMoney(item.total_price, (item.currency || tripCurrency || 'EUR'), locale)}</span>
-                  </button>
-                ))}
-              </div>
-            </Section>
-          )}
-
-          {p.files.length > 0 && (
-            <Section
-              label={t('files.title')}
-              action={(
-                <button type="button" onClick={p.onNavigateToFiles} className="inline-flex items-center gap-1 font-geist font-semibold text-content-muted hover:text-content" style={fs(11)}>
-                  <FolderOpen size={11} strokeWidth={2} />{t('reservations.showInFiles')}
-                </button>
-              )}
-            >
-              <FileRows files={p.files} />
-            </Section>
-          )}
-
-          {(p.contributions.length > 0 || p.detailPlugins.length > 0) && (
-            <div className="flex flex-col gap-2">
-              <PluginCardFooter items={p.contributions} tripId={p.tripId} />
-              {p.detailPlugins.map(pl => (
-                <div key={pl.id} className={`${BOX} overflow-hidden`}>
-                  <PluginFrame pluginId={pl.id} tripId={String(p.tripId)} reservationId={String(r.id)} title={pl.name} surface="detail-slot" />
+        {facts.legCodes.length > 0 && (
+          <Section label={t('reservations.segmentCodes')}>
+            <div className={`${BOX} flex flex-col gap-1.5 px-3.5 py-2.5`}>
+              {facts.legCodes.map((l, i) => (
+                <div key={i} className="flex items-center gap-2" style={fs(13, 'body')}>
+                  <span className="min-w-0 flex-1 truncate font-medium text-content-secondary">{l.route || t('reservations.confirmationCode')}</span>
+                  <BlurredCode className="font-geist tabular-nums text-content-muted">#{l.code}</BlurredCode>
                 </div>
               ))}
             </div>
-          )}
-        </div>
-
-        {(p.onShowOnMap || p.canEdit) && (
-          <footer className="flex flex-none items-center gap-2 border-t border-edge-faint px-6 py-3.5">
-            {p.onShowOnMap && (
-              <button type="button" onClick={p.onShowOnMap} aria-pressed={!!p.onMap}
-                className={`inline-flex items-center gap-1.5 rounded-[10px] px-3.5 py-2 font-medium ${p.onMap ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content hover:bg-surface-hover'}`} style={fs(13, 'body')}>
-                <RouteIcon size={14} strokeWidth={2} />{t('mobileTrip.onMap')}
-              </button>
-            )}
-            <span className="flex-1" />
-            {p.canEdit && (
-              <button type="button" onClick={p.onDelete} aria-label={t('common.delete')} title={t('common.delete')}
-                className="grid h-9 w-9 place-items-center rounded-[10px] bg-surface-tertiary text-danger hover:bg-surface-hover">
-                <Trash2 size={15} strokeWidth={2} />
-              </button>
-            )}
-            {p.canEdit && tone !== 'transit' && (
-              <button type="button" onClick={p.onEdit} className="inline-flex items-center gap-1.5 rounded-[10px] bg-accent px-4 py-2 font-medium text-accent-text hover:opacity-90" style={fs(13, 'body')}>
-                <Pencil size={14} strokeWidth={2} />{t('common.edit')}
-              </button>
-            )}
-          </footer>
+          </Section>
         )}
-      </div>
+
+        {cells.length > 0 && (
+          <div className="grid grid-cols-3 gap-2 max-sm:grid-cols-2">
+            {cells.map((c, i) => <Field key={i} label={c.label}>{c.value}</Field>)}
+          </div>
+        )}
+
+        {hasDetails && (
+          <div className="flex flex-col gap-2">
+            {facts.place && <DetailField label={t('reservations.locationAddress')}>{facts.place}</DetailField>}
+            {facts.accommodation && <DetailField label={t('reservations.meta.linkAccommodation')}>{facts.accommodation}</DetailField>}
+            {facts.linked && <DetailField label={t('reservations.linkedTo')}>{facts.linked}</DetailField>}
+            {facts.url && (
+              <DetailField label={t('reservations.urlLabel')}>
+                {facts.url.href ? <a href={facts.url.href} target="_blank" rel="noopener noreferrer" className="text-content hover:underline">{facts.url.href}</a> : facts.url.text}
+              </DetailField>
+            )}
+          </div>
+        )}
+
+        {(r.travelers || []).length > 0 && (
+          <Section label={t('reservations.travelers.label')}>
+            <TravelerChips travelers={r.travelers || []} />
+          </Section>
+        )}
+
+        {r.notes && (
+          <Section label={t('reservations.notes')}>
+            <div className={`${BOX} collab-note-md px-3.5 py-3 text-content-secondary`} style={{ ...fs(13, 'body'), wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={markdownLinkComponents}>{r.notes}</Markdown>
+            </div>
+          </Section>
+        )}
+
+        {p.linkedCosts.length > 0 && (
+          <Section label={t('reservations.costsLabel')}>
+            <div className="flex flex-col gap-1.5">
+              {p.linkedCosts.map(item => (
+                <button key={item.id} type="button" disabled={!p.onEditExpense} onClick={() => p.onEditExpense?.(item)}
+                  className={`${BOX} flex items-center gap-2.5 px-3.5 py-2.5 text-left enabled:hover:bg-surface-hover`} style={fs(13, 'body')}>
+                  <Wallet size={14} strokeWidth={2} className="flex-none text-content-faint" />
+                  <span className="min-w-0 flex-1 truncate font-medium text-content">{item.name}</span>
+                  <span className="flex-none font-semibold tabular-nums text-content">{formatMoney(item.total_price, (item.currency || tripCurrency || 'EUR'), locale)}</span>
+                </button>
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {p.files.length > 0 && (
+          <Section
+            label={t('files.title')}
+            action={(
+              <button type="button" onClick={p.onNavigateToFiles} className="inline-flex items-center gap-1 font-geist font-semibold text-content-muted hover:text-content" style={fs(11)}>
+                <FolderOpen size={11} strokeWidth={2} />{t('reservations.showInFiles')}
+              </button>
+            )}
+          >
+            <FileRows files={p.files} />
+          </Section>
+        )}
+
+        {(p.contributions.length > 0 || p.detailPlugins.length > 0) && (
+          <div className="flex flex-col gap-2">
+            <PluginCardFooter items={p.contributions} tripId={p.tripId} />
+            {p.detailPlugins.map(pl => (
+              <div key={pl.id} className={`${BOX} overflow-hidden`}>
+                <PluginFrame pluginId={pl.id} tripId={String(p.tripId)} reservationId={String(r.id)} title={pl.name} surface="detail-slot" />
+              </div>
+            ))}
+          </div>
+        )}
+      </DialogShell>
 
       <NameDialog
         open={renaming}
@@ -338,73 +306,16 @@ export default function BookingDetailDialog(p: BookingDetailDialogProps) {
         onConfirm={rename}
         onClose={() => setRenaming(false)}
       />
-    </div>,
-    document.body,
+    </>
   )
 }
 
-function Section({ label, action, children }: { label: string; action?: ReactNode; children: ReactNode }) {
+/** A labelled value too long to centre in a field cell: an address, a link, the linked plan entry. */
+function DetailField({ label, children }: { label: string; children: ReactNode }) {
   return (
-    <section>
-      <div className="mb-2 flex items-center gap-2">
-        <Eyebrow>{label}</Eyebrow>
-        {action && <span className="ml-auto">{action}</span>}
-      </div>
-      {children}
-    </section>
-  )
-}
-
-interface TransitLeg {
-  mode?: string
-  line?: string | null
-  line_color?: string | null
-  line_text_color?: string | null
-  duration?: number
-  stops?: number
-  from?: { name?: string; time?: string | null }
-  to?: { name?: string; time?: string | null }
-}
-
-/** A transit journey leg by leg, the way the phone lists it. */
-function TransitLegs({ legs }: { legs: TransitLeg[] }) {
-  const { t } = useTranslation()
-  return (
-    <div className={`${BOX} flex flex-col gap-2 px-3.5 py-3`}>
-      {legs.map((leg, i) => {
-        const walk = leg.mode === 'WALK'
-        const mins = leg.duration ? Math.round(leg.duration / 60) : null
-        return (
-          <div key={i} className="flex items-start gap-2">
-            {walk ? <Footprints size={13} strokeWidth={2} className="mt-0.5 flex-none text-content-faint" /> : (
-              <span className="flex-none rounded-[5px] px-1.5 py-px font-bold" style={{
-                ...fs(10.5),
-                background: leg.line_color || 'var(--bg-tertiary)',
-                color: leg.line_color ? (leg.line_text_color || '#fff') : 'var(--text-primary)', // theme-lint-disable: a transit line's own colours
-              }}>{leg.line || leg.mode}</span>
-            )}
-            <div className="min-w-0 flex-1">
-              <div className="flex flex-wrap items-center gap-1 font-medium text-content" style={fs(12.5, 'body')}>
-                {walk ? <span className="text-content-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span> : (
-                  <><span className="truncate">{leg.from?.name}</span><ArrowRight size={11} strokeWidth={2} className="flex-none text-content-faint" /><span className="truncate">{leg.to?.name}</span></>
-                )}
-              </div>
-              <div className="font-geist text-content-faint" style={fs(10.5)}>
-                {[!walk && leg.from?.time ? `${leg.from.time}${leg.to?.time ? ` → ${leg.to.time}` : ''}` : null, mins ? t('transit.min', { count: mins }) : null, !walk && leg.stops ? t('transit.stops', { count: leg.stops }) : null].filter(Boolean).join(', ')}
-              </div>
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}
-
-function DetailRow({ icon, children }: { icon: ReactNode; children: ReactNode }) {
-  return (
-    <div className="flex items-center gap-2.5 border-t border-edge-faint py-2.5 first:border-t-0 text-content-secondary" style={fs(13, 'body')}>
-      <span className="flex-none text-content-faint">{icon}</span>
-      <span className="min-w-0 flex-1 truncate">{children}</span>
+    <div className="min-w-0">
+      <Eyebrow className="mb-[3px]">{label}</Eyebrow>
+      <div className={`${BOX} truncate px-3.5 py-2.5 font-medium text-content`} style={fs(13, 'body')}>{children}</div>
     </div>
   )
 }
diff --git a/client/src/components/Planner/bookings/BookingDetailHost.test.tsx b/client/src/components/Planner/bookings/BookingDetailHost.test.tsx
new file mode 100644
index 000000000..61d365c9b
--- /dev/null
+++ b/client/src/components/Planner/bookings/BookingDetailHost.test.tsx
@@ -0,0 +1,270 @@
+// FE-PLANNER-BOOKINGHOST-001 to FE-PLANNER-BOOKINGHOST-017
+import { render, screen, fireEvent, waitFor, within } from '../../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../../tests/helpers/msw/server';
+import { resetAllStores, seedStore } from '../../../../tests/helpers/store';
+import { buildBudgetItem, buildReservation, buildTrip, buildTripFile, buildUser } from '../../../../tests/helpers/factories';
+import { resetBodyScrollLock } from '../../../utils/bodyScrollLock';
+import { useAuthStore } from '../../../store/authStore';
+import { useTripStore } from '../../../store/tripStore';
+import { usePluginStore } from '../../../store/pluginStore';
+import type { Reservation } from '../../../types';
+import BookingDetailHost, { BookingDetailPopup, type BookingDetailHostProps } from './BookingDetailHost';
+
+const calls: string[] = [];
+const onClose = vi.fn(() => { calls.push('close'); });
+
+function renderHost(r: Reservation, props: Partial<BookingDetailHostProps> = {}) {
+  return render(
+    <BookingDetailHost
+      r={r}
+      tripId={1}
+      days={[]}
+      assignments={{}}
+      files={[]}
+      canEdit
+      contributions={[]}
+      onClose={onClose}
+      onDelete={vi.fn()}
+      onNavigateToFiles={vi.fn()}
+      {...props}
+    />,
+  );
+}
+
+/** The delete question's own "Delete": the one outside the booking's dialog, which has a Delete of its own. */
+function questionDelete(dialogName: string) {
+  const own = within(screen.getByRole('dialog', { name: dialogName })).getByRole('button', { name: 'Delete' });
+  const answer = screen.getAllByRole('button', { name: 'Delete' }).find(b => b !== own);
+  if (!answer) throw new Error('the delete question is not open');
+  return answer;
+}
+
+const toasts: Array<{ message: string; type: string }> = [];
+
+beforeEach(() => {
+  calls.length = 0;
+  toasts.length = 0;
+  onClose.mockClear();
+  resetAllStores();
+  resetBodyScrollLock();
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1 }), budgetItems: [] });
+  usePluginStore.setState({ plugins: [] });
+  window.__addToast = ((message: string, type: string) => { toasts.push({ message, type }); return 1; }) as unknown as typeof window.__addToast;
+  server.use(http.get('/api/view-contributions/:view/:tripId', () => HttpResponse.json({ contributions: [] })));
+});
+
+afterEach(() => { delete window.__addToast; });
+
+describe('BookingDetailHost', () => {
+  it('FE-PLANNER-BOOKINGHOST-001: shows the booking as a dialog named by its title', () => {
+    renderHost(buildReservation({ title: 'Dinner at Kikunoi', type: 'restaurant' }));
+    expect(screen.getByRole('dialog', { name: 'Dinner at Kikunoi' })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-002: Edit closes the detail first and then hands the booking to the editor', async () => {
+    const r = buildReservation({ title: 'Dinner' });
+    const onEdit = vi.fn(() => { calls.push('edit'); });
+    renderHost(r, { onEdit });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Edit' }));
+
+    expect(onEdit).toHaveBeenCalledWith(r);
+    expect(calls).toEqual(['close', 'edit']);
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-003: without an editor there is no Edit, even with the booking right', () => {
+    renderHost(buildReservation({ title: 'Dinner' }));
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull();
+    // Rename, status and Delete belong to reservation_edit and stay.
+    expect(screen.getByRole('button', { name: 'Delete' })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-004: an editor without the booking right shows Edit but no Delete and no status switch', () => {
+    renderHost(buildReservation({ title: 'Train', type: 'train', status: 'pending' }), { canEdit: false, onEdit: vi.fn() });
+    expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Delete' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Set to Confirmed' })).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-005: a read-only viewer gets the facts without any footer action', () => {
+    renderHost(buildReservation({ title: 'Museum', type: 'tour' }), { canEdit: false });
+    expect(screen.getByRole('dialog', { name: 'Museum' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Edit' })).toBeNull();
+    expect(screen.queryByRole('button', { name: 'Delete' })).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-006: Delete asks first, then closes the detail before the delete goes out', async () => {
+    const r = buildReservation({ title: 'Dinner' });
+    const onDelete = vi.fn(async () => { calls.push('delete'); });
+    renderHost(r, { onDelete });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    expect(screen.getByText('"Dinner" will be permanently deleted.')).toBeInTheDocument();
+    expect(onDelete).not.toHaveBeenCalled();
+
+    await userEvent.click(questionDelete('Dinner'));
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalledWith(r.id));
+    expect(calls).toEqual(['close', 'delete']);
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-007: a failed delete says so', async () => {
+    renderHost(buildReservation({ title: 'Dinner' }), { onDelete: vi.fn(async () => { throw new Error('nope'); }) });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await userEvent.click(questionDelete('Dinner'));
+
+    await waitFor(() => expect(toasts).toContainEqual({ message: 'Failed to delete', type: 'error' }));
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-008: Escape answers the delete question, not the detail under it', async () => {
+    renderHost(buildReservation({ title: 'Dinner' }));
+
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByText('Delete booking?')).toBeNull();
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.getByRole('dialog', { name: 'Dinner' })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-009: the status pill switches the status through the store', async () => {
+    const toggleReservationStatus = vi.fn(async () => undefined);
+    useTripStore.setState({ toggleReservationStatus } as never);
+    const r = buildReservation({ title: 'Dinner', status: 'pending' });
+    renderHost(r);
+
+    await userEvent.click(screen.getByRole('button', { name: 'Set to Confirmed' }));
+
+    expect(toggleReservationStatus).toHaveBeenCalledWith(1, r.id);
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-010: a failed status switch says so', async () => {
+    useTripStore.setState({ toggleReservationStatus: vi.fn(async () => { throw new Error('x'); }) } as never);
+    renderHost(buildReservation({ title: 'Dinner', status: 'pending' }));
+
+    await userEvent.click(screen.getByRole('button', { name: 'Set to Confirmed' }));
+
+    await waitFor(() => expect(toasts).toContainEqual({ message: 'Failed to update', type: 'error' }));
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-011: On map is offered only for a booking the map can show, and closes first', async () => {
+    const onShowOnMap = vi.fn(() => { calls.push('map'); });
+    const routed = buildReservation({
+      title: 'Shinkansen', type: 'train',
+      endpoints: [
+        { role: 'from', name: 'Tokyo', lat: 35.68, lng: 139.76, sequence: 0 },
+        { role: 'to', name: 'Kyoto', lat: 34.98, lng: 135.75, sequence: 1 },
+      ] as never,
+    });
+    const { unmount } = renderHost(routed, { onShowOnMap, isOnMap: () => true });
+
+    const onMap = screen.getByRole('button', { name: 'On map' });
+    expect(onMap).toHaveAttribute('aria-pressed', 'true');
+    await userEvent.click(onMap);
+    expect(onShowOnMap).toHaveBeenCalledWith(routed);
+    expect(calls).toEqual(['close', 'map']);
+    unmount();
+
+    renderHost(buildReservation({ title: 'Nowhere', place_id: null }), { onShowOnMap });
+    expect(screen.queryByRole('button', { name: 'On map' })).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-012: Change route is offered for a transit journey only', async () => {
+    const onChangeRoute = vi.fn();
+    const journey = buildReservation({ title: 'U2 to Alexanderplatz', type: 'transit' });
+    const { unmount } = renderHost(journey, { onChangeRoute });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Change route' }));
+    expect(onClose).toHaveBeenCalled();
+    expect(onChangeRoute).toHaveBeenCalledWith(journey);
+    unmount();
+
+    renderHost(buildReservation({ title: 'Train', type: 'train' }), { onChangeRoute });
+    expect(screen.queryByRole('button', { name: 'Change route' })).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-017: a transit journey totals its walking in a tile of its own, and a journey without any has none', () => {
+    const journey = (legs: unknown[]) => ({
+      ...buildReservation({ title: 'Fernsehturm to Zoo', type: 'transit' }),
+      metadata: { transit: { duration: 2400, transfers: 1, legs } },
+    }) as unknown as Reservation;
+    const ride = { mode: 'SUBWAY', line: 'U2', duration: 1200, from: { name: 'Alexanderplatz' }, to: { name: 'Zoo' } };
+    const { unmount } = renderHost(journey([
+      { mode: 'WALK', duration: 300, to: { name: 'Alexanderplatz' } },
+      ride,
+      { mode: 'WALK', duration: 240, to: { name: 'Zoo' } },
+    ]));
+
+    expect(screen.getByText('Walking')).toBeInTheDocument();
+    expect(screen.getByText('9 min')).toBeInTheDocument();
+    unmount();
+
+    renderHost(journey([ride]));
+    expect(screen.getByText('Transfers')).toBeInTheDocument();
+    expect(screen.queryByText('Walking')).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-013: only the files attached to this booking are listed, and Show in files leaves the detail', async () => {
+    const r = buildReservation({ title: 'Hotel', type: 'hotel' });
+    const onNavigateToFiles = vi.fn(() => { calls.push('files'); });
+    renderHost(r, {
+      onNavigateToFiles,
+      files: [
+        buildTripFile({ original_name: 'voucher.pdf', reservation_id: r.id }),
+        buildTripFile({ original_name: 'other.pdf', reservation_id: r.id + 1000 }),
+      ],
+    });
+
+    expect(screen.getByRole('button', { name: 'voucher.pdf' })).toBeInTheDocument();
+    expect(screen.queryByText('other.pdf')).toBeNull();
+
+    await userEvent.click(screen.getByRole('button', { name: 'Show in files' }));
+    expect(calls).toEqual(['close', 'files']);
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-014: a linked expense opens its editor after the detail closed', async () => {
+    const r = buildReservation({ title: 'Dinner' });
+    const item = buildBudgetItem({ name: 'Dinner bill', reservation_id: r.id } as never);
+    useTripStore.setState({ budgetItems: [item, buildBudgetItem({ name: 'Unrelated' })] });
+    const onEditExpense = vi.fn(() => { calls.push('expense'); });
+    renderHost(r, { onEditExpense });
+
+    expect(screen.queryByText('Unrelated')).toBeNull();
+    await userEvent.click(screen.getByRole('button', { name: /Dinner bill/ }));
+
+    expect(onEditExpense).toHaveBeenCalledWith(item);
+    expect(calls).toEqual(['close', 'expense']);
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-015: a detail-slot plugin draws its frame into the detail', () => {
+    usePluginStore.setState({ plugins: [{ id: 'seatmap', name: 'Seat map', type: 'widget', slot: 'reservation-detail' }] as never });
+    renderHost(buildReservation({ title: 'Flight', type: 'flight' }));
+    expect(screen.getByTitle('Seat map')).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-BOOKINGHOST-016: the popup asks for the contributions of the view the booking belongs to', async () => {
+    const views: string[] = [];
+    server.use(http.get('/api/view-contributions/:view/:tripId', ({ params }) => {
+      views.push(String(params.view));
+      return HttpResponse.json({
+        contributions: [{ kind: 'column', pluginId: 'p', id: 'c', entityId: 70, label: 'Gate', value: 'B12', tone: 'default' }],
+      });
+    }));
+    const flight = buildReservation({ id: 70, title: 'LH 2020', type: 'flight' });
+    const { unmount } = render(
+      <BookingDetailPopup r={flight} tripId={1} days={[]} assignments={{}} files={[]} canEdit onClose={onClose} onDelete={vi.fn()} onNavigateToFiles={vi.fn()} />,
+    );
+
+    expect(await screen.findByText('B12')).toBeInTheDocument();
+    expect(views).toEqual(['transports']);
+    unmount();
+
+    const table = buildReservation({ id: 71, title: 'Table', type: 'restaurant' });
+    render(<BookingDetailPopup r={table} tripId={1} days={[]} assignments={{}} files={[]} canEdit onClose={onClose} onDelete={vi.fn()} onNavigateToFiles={vi.fn()} />);
+    await waitFor(() => expect(views).toEqual(['transports', 'reservations']));
+  });
+});
diff --git a/client/src/components/Planner/bookings/BookingDetailHost.tsx b/client/src/components/Planner/bookings/BookingDetailHost.tsx
new file mode 100644
index 000000000..6871c70c8
--- /dev/null
+++ b/client/src/components/Planner/bookings/BookingDetailHost.tsx
@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+import type { AssignmentsMap, BudgetItem, Day, Reservation, TripFile } from '../../../types'
+import type { ViewContribution } from '../../../api/client'
+import { useTranslation } from '../../../i18n'
+import { useTripStore } from '../../../store/tripStore'
+import { useSettingsStore } from '../../../store/settingsStore'
+import { usePluginViewContributions } from '../../Plugins/PluginContributions'
+import { TRANSPORT_TYPES } from '../../../utils/dayMerge'
+import { buildAssignmentLookup, costsFor } from './bookingsModel'
+import { bookingFacts } from './bookingFacts'
+import { filesFor } from './bookingParts'
+import { canShowOnMap } from './showOnMap'
+import { useBookingActions } from './useBookingActions'
+import { useReservationDetailPlugins } from './useReservationDetailPlugins'
+import BookingDetailDialog from './BookingDetailDialog'
+
+export interface BookingDetailHostProps {
+  r: Reservation
+  tripId: number
+  days: Day[]
+  assignments: AssignmentsMap
+  /** The trip's files; the ones attached to this booking are picked here. */
+  files: TripFile[]
+  /** reservation_edit: renaming, the status switch and Delete. */
+  canEdit: boolean
+  /** What plugins add to this booking in the view it belongs to. */
+  contributions: ViewContribution[]
+  onClose: () => void
+  /** The booking's editor. Without it the dialog has no Edit. */
+  onEdit?: (r: Reservation) => void
+  onDelete: (id: number) => unknown
+  /** Offered only when the booking has something the map can show. */
+  onShowOnMap?: (r: Reservation) => void
+  isOnMap?: (r: Reservation) => boolean
+  onEditExpense?: (item: BudgetItem) => void
+  /** Offered for a transit journey only. */
+  onChangeRoute?: (r: Reservation) => void
+  onNavigateToFiles: () => void
+}
+
+/**
+ * A booking's detail dialog with everything it needs: its facts, files and
+ * linked expenses, the plugins that draw into it, the status switch and the
+ * delete question. The Bookings and Transports tabs and the plan open the same
+ * one, so it reads the same wherever a booking is clicked.
+ *
+ * Whatever leaves the dialog (the editor, the map, an expense, the files) closes
+ * it first.
+ */
+export default function BookingDetailHost(p: BookingDetailHostProps) {
+  const { r, onClose } = p
+  const { t, locale } = useTranslation()
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const tripCurrency = useTripStore(s => s.trip?.currency) || 'EUR'
+  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const detailPlugins = useReservationDetailPlugins()
+  const actions = useBookingActions(p.tripId, p.onDelete, onClose)
+
+  const assignmentLookup = useMemo(() => buildAssignmentLookup(p.days, p.assignments), [p.days, p.assignments])
+  const facts = useMemo(
+    () => bookingFacts(r, { t, locale, timeFormat, days: p.days, assignmentLookup, tripCurrency, hasLinkedCost: costsFor(r.id, budgetItems, tripCurrency).length > 0 }),
+    [r, t, locale, timeFormat, p.days, assignmentLookup, tripCurrency, budgetItems],
+  )
+  const linkedCosts = useMemo(() => budgetItems.filter(b => b.reservation_id === r.id), [budgetItems, r.id])
+
+  const { onEdit, onShowOnMap, onEditExpense, onChangeRoute, onNavigateToFiles } = p
+  return (
+    <>
+      <BookingDetailDialog
+        r={r}
+        facts={facts}
+        files={filesFor(r, p.files)}
+        linkedCosts={linkedCosts}
+        tripId={p.tripId}
+        canEdit={p.canEdit}
+        covered={!!actions.pendingDelete}
+        onClose={onClose}
+        onEdit={onEdit ? () => { onClose(); onEdit(r) } : undefined}
+        onDelete={() => actions.requestDelete(r)}
+        onToggleStatus={() => actions.toggleStatus(r)}
+        onShowOnMap={onShowOnMap && canShowOnMap(r) ? () => { onClose(); onShowOnMap(r) } : undefined}
+        onMap={p.isOnMap?.(r)}
+        onEditExpense={onEditExpense ? item => { onClose(); onEditExpense(item) } : undefined}
+        onChangeRoute={onChangeRoute && r.type === 'transit' ? () => { onClose(); onChangeRoute(r) } : undefined}
+        onNavigateToFiles={() => { onClose(); onNavigateToFiles() }}
+        contributions={p.contributions}
+        detailPlugins={detailPlugins}
+      />
+      {actions.confirmDialog}
+    </>
+  )
+}
+
+export type BookingDetailPopupProps = Omit<BookingDetailHostProps, 'contributions'>
+
+/**
+ * The detail for a caller that holds no plugin lookup of its own, such as the
+ * plan: it asks for the contributions of the view the booking belongs to, once
+ * per opening. A tab passes its own lookup to BookingDetailHost instead.
+ */
+export function BookingDetailPopup(props: BookingDetailPopupProps) {
+  const view = TRANSPORT_TYPES.has(props.r.type) ? 'transports' : 'reservations'
+  return <ContributedDetail key={view} view={view} {...props} />
+}
+
+function ContributedDetail({ view, ...props }: BookingDetailPopupProps & { view: 'transports' | 'reservations' }) {
+  const contribFor = usePluginViewContributions(view, props.tripId)
+  return <BookingDetailHost {...props} contributions={contribFor(props.r.id)} />
+}
diff --git a/client/src/components/Planner/bookings/BookingDialogShell.test.tsx b/client/src/components/Planner/bookings/BookingDialogShell.test.tsx
new file mode 100644
index 000000000..0af96ea50
--- /dev/null
+++ b/client/src/components/Planner/bookings/BookingDialogShell.test.tsx
@@ -0,0 +1,171 @@
+// FE-PLANNER-BOOKINGSHELL-001 to FE-PLANNER-BOOKINGSHELL-016
+import type { FormEvent, ReactNode } from 'react';
+import { render, screen, fireEvent } from '../../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { resetBodyScrollLock } from '../../../utils/bodyScrollLock';
+import { BookingDialogHeader, StatusPill } from './BookingDialogShell';
+import { DialogShell, type DialogShellProps } from '../../shared/DialogShell';
+
+const onClose = vi.fn();
+
+function Shell(props: Partial<DialogShellProps>) {
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy="shell-title"
+      header={<BookingDialogHeader tone="pending" type="flight" labelId="shell-title" onClose={onClose} title="LH 123" />}
+      {...props}
+    >
+      {props.children ?? <p>inner content</p>}
+    </DialogShell>
+  );
+}
+
+// An opener in the page, and the dialog it opens.
+function Page({ open, children }: { open: boolean; children?: ReactNode }) {
+  return (
+    <>
+      <button type="button">Opener</button>
+      <Shell open={open}>{children}</Shell>
+    </>
+  );
+}
+
+const backdrop = () => document.querySelector('.trek-modal-backdrop') as HTMLElement;
+
+beforeEach(() => {
+  onClose.mockClear();
+  resetBodyScrollLock();
+  document.body.style.overflow = '';
+});
+
+describe('BookingDialogShell', () => {
+  it('FE-PLANNER-BOOKINGSHELL-001: renders nothing while open is false', () => {
+    render(<Shell open={false} />);
+    expect(screen.queryByText('inner content')).toBeNull();
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-002: is a dialog named by its header, without aria-modal so portaled lists stay reachable', () => {
+    render(<Shell />);
+    const dialog = screen.getByRole('dialog', { name: 'LH 123' });
+    expect(dialog).not.toHaveAttribute('aria-modal');
+    expect(dialog).toHaveTextContent('inner content');
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-003: Escape calls onClose', () => {
+    render(<Shell />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-004: Escape leaves the dialog alone while blocked', () => {
+    render(<Shell blocked />);
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-005: an Escape a field inside already handled does not close', () => {
+    render(<Shell><input aria-label="Field" onKeyDown={e => { if (e.key === 'Escape') e.preventDefault(); }} /></Shell>);
+    fireEvent.keyDown(screen.getByRole('textbox', { name: 'Field' }), { key: 'Escape' });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-006: the header Close button calls onClose', async () => {
+    render(<Shell />);
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-007: a press that starts and ends on the backdrop closes', () => {
+    render(<Shell />);
+    fireEvent.mouseDown(backdrop());
+    fireEvent.click(backdrop());
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-008: a press that starts in the panel and ends on the backdrop does not close', () => {
+    render(<Shell />);
+    fireEvent.mouseDown(screen.getByText('inner content'));
+    fireEvent.click(backdrop());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-009: a click inside the panel does not close', async () => {
+    render(<Shell />);
+    await userEvent.click(screen.getByText('inner content'));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-010: the backdrop leaves the dialog alone while blocked', () => {
+    render(<Shell blocked />);
+    fireEvent.mouseDown(backdrop());
+    fireEvent.click(backdrop());
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-011: the panel takes the focus, and the opener gets it back on close', () => {
+    const { rerender } = render(<Page open={false} />);
+    const opener = screen.getByRole('button', { name: 'Opener' });
+    opener.focus();
+
+    rerender(<Page open />);
+    expect(screen.getByRole('dialog')).toHaveFocus();
+
+    rerender(<Page open={false} />);
+    expect(opener).toHaveFocus();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-012: a field with autoFocus keeps the focus, and the opener still gets it back', () => {
+    const { rerender } = render(<Page open={false} />);
+    const opener = screen.getByRole('button', { name: 'Opener' });
+    opener.focus();
+
+    rerender(<Page open><input aria-label="Title" autoFocus /></Page>);
+    expect(screen.getByRole('textbox', { name: 'Title' })).toHaveFocus();
+
+    rerender(<Page open={false} />);
+    expect(opener).toHaveFocus();
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-013: locks the page scroll while open and releases it on close', () => {
+    const { rerender } = render(<Shell />);
+    expect(document.body.style.overflow).toBe('hidden');
+    rerender(<Shell open={false} />);
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-014: with onSubmit the body is a form', () => {
+    const onSubmit = vi.fn((e: FormEvent) => e.preventDefault());
+    render(<Shell onSubmit={onSubmit}><button type="submit">Send</button></Shell>);
+    fireEvent.click(screen.getByRole('button', { name: 'Send' }));
+    expect(onSubmit).toHaveBeenCalledOnce();
+  });
+});
+
+describe('BookingDialogHeader', () => {
+  it('FE-PLANNER-BOOKINGSHELL-015: a sub ends in an ellipsis unless it is allowed to wrap', () => {
+    const { rerender } = render(<BookingDialogHeader tone="transit" type="transit" labelId="h" onClose={onClose} title="Public transit" sub="A long hint" />);
+    expect(screen.getByText('A long hint')).toHaveClass('truncate');
+    rerender(<BookingDialogHeader tone="transit" type="transit" labelId="h" onClose={onClose} title="Public transit" sub="A long hint" subWraps />);
+    expect(screen.getByText('A long hint')).not.toHaveClass('truncate');
+    expect(screen.getByText('A long hint')).toHaveClass('break-words');
+  });
+
+  it('FE-PLANNER-BOOKINGSHELL-016: the title input and the status pill report their changes', async () => {
+    const onTitle = vi.fn();
+    const onToggle = vi.fn();
+    render(
+      <BookingDialogHeader
+        tone="pending" type="flight" labelId="h" onClose={onClose} eyebrow="Add transport"
+        titleInput={{ value: '', onChange: onTitle, label: 'Title', placeholder: 'e.g. LH 123' }}
+        pills={<StatusPill status="pending" onToggle={onToggle} />}
+      />,
+    );
+    expect(screen.getByRole('heading', { name: 'Add transport' })).toHaveAttribute('id', 'h');
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'LH 9' } });
+    expect(onTitle).toHaveBeenCalledWith('LH 9');
+    await userEvent.click(screen.getByRole('button', { name: 'Set to Confirmed' }));
+    expect(onToggle).toHaveBeenCalledOnce();
+  });
+});
diff --git a/client/src/components/Planner/bookings/BookingDialogShell.tsx b/client/src/components/Planner/bookings/BookingDialogShell.tsx
new file mode 100644
index 000000000..b987daef0
--- /dev/null
+++ b/client/src/components/Planner/bookings/BookingDialogShell.tsx
@@ -0,0 +1,42 @@
+import { useTranslation } from '../../../i18n'
+import { Tooltip } from '../../shared/Tooltip'
+import { DialogHeader, PILL, type DialogHeaderProps } from '../../shared/DialogShell'
+import { typeInfo } from './bookingsModel'
+import { TypeTile, toneColor, toneTint, type StatusTone } from './bookingParts'
+
+export interface BookingDialogHeaderProps extends Omit<DialogHeaderProps, 'tile' | 'tint'> {
+  tone: StatusTone
+  /** The booking type, drawn as the raised tile on the left. */
+  type: string
+}
+
+/** The head band of a booking dialog, tinted by the status like the card the booking sits on. */
+export function BookingDialogHeader({ tone, type, ...rest }: BookingDialogHeaderProps) {
+  return <DialogHeader {...rest} tile={<TypeTile type={type} size={46} raised />} tint={toneTint(tone)} />
+}
+
+/** Confirmed or pending with its dot. With onToggle it switches to the other. */
+export function StatusPill({ status, onToggle }: { status: 'confirmed' | 'pending'; onToggle?: () => void }) {
+  const { t } = useTranslation()
+  const content = (
+    <>
+      <span className="h-2 w-2 flex-none rounded-full" style={{ background: toneColor(status) }} />
+      {status === 'confirmed' ? t('reservations.confirmed') : t('reservations.pending')}
+    </>
+  )
+  if (!onToggle) return <span className={PILL}>{content}</span>
+  const label = t('reservations.status.switchTo', { status: status === 'confirmed' ? t('reservations.pending') : t('reservations.confirmed') })
+  return (
+    <Tooltip label={label}>
+      <button type="button" onClick={onToggle} aria-label={label} className={`${PILL} hover:opacity-80`}>
+        {content}
+      </button>
+    </Tooltip>
+  )
+}
+
+export function TypePill({ type }: { type: string }) {
+  const { t } = useTranslation()
+  const info = typeInfo(type)
+  return <span className={PILL}><info.Icon size={13} strokeWidth={2.2} style={{ color: info.color }} />{t(info.chipKey)}</span>
+}
diff --git a/client/src/components/Planner/bookings/BookingsHeader.tsx b/client/src/components/Planner/bookings/BookingsHeader.tsx
index 39b56c981..b2baa7469 100644
--- a/client/src/components/Planner/bookings/BookingsHeader.tsx
+++ b/client/src/components/Planner/bookings/BookingsHeader.tsx
@@ -48,6 +48,9 @@ export interface BookingsHeaderProps {
   onByType: () => void
   showContext: boolean
   onShowContext: () => void
+  transitApart: boolean
+  /** Set only where the choice changes something: cards grouped by status, with transit to place. */
+  onTransitApart?: () => void
   viewIsDefault: boolean
   onResetView: () => void
 }
@@ -89,13 +92,19 @@ export default function BookingsHeader(p: BookingsHeaderProps) {
               className="min-w-0 flex-1 border-0 bg-transparent text-content outline-none placeholder:text-content-faint"
               style={fs(13, 'body')}
             />
-            {p.query && <button type="button" onClick={() => p.onQuery('')} aria-label={t('common.clear')} className="flex-none text-content-faint hover:text-content"><X size={13} /></button>}
+            {p.query && (
+              <Tooltip label={t('common.clear')}>
+                <button type="button" onClick={() => p.onQuery('')} aria-label={t('common.clear')} className="flex-none text-content-faint hover:text-content"><X size={13} /></button>
+              </Tooltip>
+            )}
           </label>
           {p.filtering && (
-            <button type="button" onClick={p.onResetFilters} title={t('reservations.resetFilters')}
-              className="inline-flex h-9 flex-none items-center gap-1 rounded-[10px] bg-surface-card px-2.5 font-geist font-semibold tabular-nums text-content-muted hover:text-content" style={fs(12)}>
-              {t('reservations.results', { shown: p.shown, total: p.total })}<X size={12} />
-            </button>
+            <Tooltip label={t('reservations.resetFilters')}>
+              <button type="button" onClick={p.onResetFilters}
+                className="inline-flex h-9 flex-none items-center gap-1 rounded-[10px] bg-surface-card px-2.5 font-geist font-semibold tabular-nums text-content-muted hover:text-content" style={fs(12)}>
+                {t('reservations.results', { shown: p.shown, total: p.total })}<X size={12} />
+              </button>
+            </Tooltip>
           )}
           <FilterMenu {...p} />
           <div className="inline-flex flex-none rounded-[10px] bg-surface-card p-[3px]" role="group" aria-label={t('reservations.view.label')}>
@@ -203,7 +212,7 @@ function FilterMenu(p: BookingsHeaderProps) {
                 {p.members.map(m => {
                   const on = p.activeTravelers.has(m.id)
                   return (
-                    <button key={m.id} type="button" onClick={() => p.onToggleTraveler(m.id)} aria-pressed={on} title={m.username}
+                    <button key={m.id} type="button" onClick={() => p.onToggleTraveler(m.id)} aria-pressed={on}
                       className={`flex items-center gap-1.5 rounded-full border py-[3px] pl-[3px] pr-2.5 ${on ? 'border-[color:var(--text-primary)] text-content' : 'border-edge-faint text-content-muted hover:text-content'}`} style={fs(12, 'body')}>
                       <span className="grid h-5 w-5 flex-none place-items-center overflow-hidden rounded-full bg-surface-tertiary font-bold" style={fs(9)}>
                         {m.avatar_url ? <img src={m.avatar_url} alt="" className="h-full w-full object-cover" /> : m.username?.[0]?.toUpperCase()}
@@ -257,6 +266,12 @@ function ViewOptions(p: BookingsHeaderProps) {
               {groups.map(([g, label]) => (
                 <PopoverItem key={g} icon={g === 'day' ? <CalendarDays size={14} /> : g === 'type' ? <Tag size={14} /> : <Layers size={14} />} label={label} active={p.group === g} onClick={() => p.onGroup(g)} />
               ))}
+              {p.onTransitApart && (
+                <>
+                  <div style={POPOVER_DIVIDER} />
+                  <SwitchRow label={t('reservations.transitApart')} on={p.transitApart} onToggle={p.onTransitApart} />
+                </>
+              )}
               <div style={POPOVER_DIVIDER} />
               <div style={POPOVER_CAPTION}>{t('reservations.sort.label')}</div>
               {sorts.map(([s, label]) => (
diff --git a/client/src/components/Planner/bookings/BookingsList.tsx b/client/src/components/Planner/bookings/BookingsList.tsx
index 8f960f1d5..cd588550d 100644
--- a/client/src/components/Planner/bookings/BookingsList.tsx
+++ b/client/src/components/Planner/bookings/BookingsList.tsx
@@ -129,7 +129,7 @@ function Row({ r, p, facts, files, costs, t, locale }: {
       </div>
       <div className="flex items-center justify-end gap-1.5">
         <TravelerStack travelers={r.travelers || []} />
-        {p.canEdit && !transit && <RoundAction label={t('common.edit')} onClick={() => p.onEdit(r)}><Pencil size={12} strokeWidth={2} /></RoundAction>}
+        {p.canEdit && <RoundAction label={t('common.edit')} onClick={() => p.onEdit(r)}><Pencil size={12} strokeWidth={2} /></RoundAction>}
         {p.canEdit && <RoundAction label={t('common.delete')} onClick={() => p.onDelete(r)} danger><Trash2 size={12} strokeWidth={2} /></RoundAction>}
       </div>
     </div>
diff --git a/client/src/components/Planner/bookings/BookingsTimeline.tsx b/client/src/components/Planner/bookings/BookingsTimeline.tsx
index fff2be0da..b50c791d2 100644
--- a/client/src/components/Planner/bookings/BookingsTimeline.tsx
+++ b/client/src/components/Planner/bookings/BookingsTimeline.tsx
@@ -18,6 +18,8 @@ export interface BookingsTimelineProps {
   items: Reservation[]
   /** The other tab's bookings, drawn dimmed in a thin lane on top for orientation. */
   context: Reservation[]
+  /** What that lane is called: the other tab's name. */
+  contextLabel: string
   days: Day[]
   zoom: TimelineZoom
   onZoom: (z: TimelineZoom) => void
@@ -164,9 +166,11 @@ export default function BookingsTimeline(p: BookingsTimelineProps) {
         <div className="flex flex-wrap items-center gap-2.5 border-b border-edge-faint bg-surface-secondary px-3.5 py-2.5">
           {dayMode ? (
             <div className="flex items-center gap-1.5">
-              <button type="button" onClick={() => setDayIndex(Math.max(0, day - 1))} disabled={day === 0} aria-label={t('reservations.timeline.prevDay')} className={navBtn}>
-                <ChevronLeft size={15} strokeWidth={2.2} />
-              </button>
+              <Tooltip label={t('reservations.timeline.prevDay')}>
+                <button type="button" onClick={() => setDayIndex(Math.max(0, day - 1))} disabled={day === 0} aria-label={t('reservations.timeline.prevDay')} className={navBtn}>
+                  <ChevronLeft size={15} strokeWidth={2.2} />
+                </button>
+              </Tooltip>
               <span className="inline-flex items-stretch overflow-hidden rounded-full bg-surface-card font-semibold text-content shadow-sm" style={fs(12, 'body')}>
                 <span className="px-3 py-1">{dayName(day)}</span>
                 {axis[day]?.date && (
@@ -176,9 +180,11 @@ export default function BookingsTimeline(p: BookingsTimelineProps) {
                   </>
                 )}
               </span>
-              <button type="button" onClick={() => setDayIndex(Math.min(n - 1, day + 1))} disabled={day >= n - 1} aria-label={t('reservations.timeline.nextDay')} className={navBtn}>
-                <ChevronRight size={15} strokeWidth={2.2} />
-              </button>
+              <Tooltip label={t('reservations.timeline.nextDay')}>
+                <button type="button" onClick={() => setDayIndex(Math.min(n - 1, day + 1))} disabled={day >= n - 1} aria-label={t('reservations.timeline.nextDay')} className={navBtn}>
+                  <ChevronRight size={15} strokeWidth={2.2} />
+                </button>
+              </Tooltip>
             </div>
           ) : range && (
             <span className="inline-flex items-stretch overflow-hidden rounded-full bg-surface-card font-semibold text-content shadow-sm" style={fs(12, 'body')}>
@@ -229,7 +235,7 @@ export default function BookingsTimeline(p: BookingsTimelineProps) {
             {contextBars && contextBars.bars.length > 0 && (
               <div className="flex border-b border-edge-faint">
                 <div className="sticky left-0 z-20 flex flex-none items-center border-r border-edge-faint bg-surface-card px-3" style={{ width: LABEL_W }}>
-                  <span className={EYEBROW} style={fs(9.5)}>{t(p.items.some(r => r.type !== 'hotel') && p.context.some(r => r.type === 'hotel') ? 'reservations.timeline.contextStays' : 'reservations.timeline.contextTransports')}</span>
+                  <span className={EYEBROW} style={fs(9.5)}>{p.contextLabel}</span>
                 </div>
                 <div className="relative flex-none" style={{ width: gridW, height: 8 + contextBars.lanes * 18 }}>
                   <Cells />
@@ -252,7 +258,7 @@ export default function BookingsTimeline(p: BookingsTimelineProps) {
                 <div key={lane.key} className="flex border-b border-edge-faint last:border-b-0">
                   <div className="sticky left-0 z-20 flex flex-none items-center gap-2 border-r border-edge-faint bg-surface-card px-3" style={{ width: LABEL_W }}>
                     {lane.key !== 'all' && <info.Icon size={14} strokeWidth={2} style={{ color: info.color }} className="flex-none" />}
-                    <span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(12.5, 'body')}>{lane.key === 'all' ? t('common.all') : t(info.labelKey)}</span>
+                    <span className="min-w-0 flex-1 truncate font-semibold text-content" style={fs(12.5, 'body')}>{lane.key === 'all' ? t('common.all') : t(info.chipKey)}</span>
                     <CountPill>{lane.count}</CountPill>
                   </div>
                   <div className="relative flex-none" style={{ width: gridW, height: 12 + lane.lanes * laneH }}>
diff --git a/client/src/components/Planner/bookings/bookingFacts.ts b/client/src/components/Planner/bookings/bookingFacts.ts
index daa66b7e3..b567a4529 100644
--- a/client/src/components/Planner/bookings/bookingFacts.ts
+++ b/client/src/components/Planner/bookings/bookingFacts.ts
@@ -17,7 +17,7 @@ export interface FactsContext {
 
 export interface BookingFacts {
   /** The day or day range, e.g. "Day 2 → Day 7", with the calendar date beside it. */
-  day: { label: string; date: string | null } | null
+  day: { label: string; date: string | null; range: boolean } | null
   /** Start and end time, or null without either. */
   time: string | null
   startTime: string | null
@@ -53,12 +53,14 @@ export function bookingFacts(r: Reservation, c: FactsContext): BookingFacts {
 
   let day: BookingFacts['day'] = null
   if (span.start) {
-    const label = span.end && span.end.id !== span.start.id ? `${dayName(span.start)} → ${dayName(span.end)}` : dayName(span.start)
-    const dates = [span.start.date, span.end && span.end.id !== span.start.id ? span.end.date : null].filter(Boolean) as string[]
-    day = { label, date: dates.length ? dates.map(d => fmtDate(d, locale, dates.length === 1)).join(' → ') : null }
+    const range = !!span.end && span.end.id !== span.start.id
+    const label = range ? `${dayName(span.start)} → ${dayName(span.end!)}` : dayName(span.start)
+    const dates = [span.start.date, range ? span.end!.date : null].filter(Boolean) as string[]
+    day = { label, date: dates.length ? dates.map(d => fmtDate(d, locale, dates.length === 1)).join(' → ') : null, range }
   } else if (startDt.date) {
-    const label = endDt.date && endDt.date !== startDt.date ? `${fmtDate(startDt.date, locale)} → ${fmtDate(endDt.date, locale)}` : fmtDate(startDt.date, locale)
-    day = { label, date: null }
+    const range = !!endDt.date && endDt.date !== startDt.date
+    const label = range ? `${fmtDate(startDt.date, locale)} → ${fmtDate(endDt.date!, locale)}` : fmtDate(startDt.date, locale)
+    day = { label, date: null, range }
   }
 
   const eps = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
@@ -66,7 +68,10 @@ export function bookingFacts(r: Reservation, c: FactsContext): BookingFacts {
   const to = eps.find(e => e.role === 'to')
   const startTime = startDt.time || from?.local_time || null
   const endTime = endDt.time || to?.local_time || null
-  const time = startTime || endTime
+  // A stay backed by an accommodation says its times as check-in and check-out;
+  // the time stamped on the booking itself is not what the traveller goes by.
+  const stayBacked = isHotel && !!(r.accommodation_start_day_id || r.accommodation_end_day_id)
+  const time = !stayBacked && (startTime || endTime)
     ? `${startTime ? formatTime(startTime, locale, timeFormat) : ''}${endTime ? ` → ${formatTime(endTime, locale, timeFormat)}` : ''}`.trim()
     : null
 
diff --git a/client/src/components/Planner/bookings/bookingParts.tsx b/client/src/components/Planner/bookings/bookingParts.tsx
index 4f9de9c27..e5fcfa881 100644
--- a/client/src/components/Planner/bookings/bookingParts.tsx
+++ b/client/src/components/Planner/bookings/bookingParts.tsx
@@ -6,6 +6,8 @@ import { useTranslation } from '../../../i18n'
 import { avatarSrc } from '../../../utils/avatarSrc'
 import { openFile } from '../../../utils/fileDownload'
 import GuestBadge from '../../shared/GuestBadge'
+import { Tooltip } from '../../shared/Tooltip'
+import { PILL } from '../../shared/DialogShell'
 import { useToast } from '../../shared/Toast'
 import { parseMeta, typeInfo } from './bookingsModel'
 
@@ -77,16 +79,18 @@ export function StatusDot({ r, canToggle, onToggle, size = 8 }: { r: Reservation
   const dot = <span className="block flex-none rounded-full" style={{ width: size, height: size, background: toneColor(tone) }} />
   if (!canToggle || tone === 'transit') return <span className="grid h-[22px] w-[22px] flex-none place-items-center">{dot}</span>
   const next = tone === 'confirmed' ? t('reservations.pending') : t('reservations.confirmed')
+  const label = t('reservations.status.switchTo', { status: next })
   return (
-    <button
-      type="button"
-      onClick={e => { e.stopPropagation(); onToggle() }}
-      title={t('reservations.status.switchTo', { status: next })}
-      aria-label={t('reservations.status.switchTo', { status: next })}
-      className="grid h-[22px] w-[22px] flex-none place-items-center rounded-full hover:bg-surface-hover"
-    >
-      {dot}
-    </button>
+    <Tooltip label={label}>
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onToggle() }}
+        aria-label={label}
+        className="grid h-[22px] w-[22px] flex-none place-items-center rounded-full hover:bg-surface-hover"
+      >
+        {dot}
+      </button>
+    </Tooltip>
   )
 }
 
@@ -96,7 +100,7 @@ export function TypeChip({ type }: { type: string }) {
   return (
     <span className="inline-flex flex-none items-center gap-1 rounded-full border border-edge-faint bg-surface-card px-2 py-[2px] font-geist font-bold uppercase tracking-[.06em] text-content-muted" style={fs(9.5)}>
       <info.Icon size={11} strokeWidth={2.2} style={{ color: info.color }} />
-      {t(info.labelKey)}
+      {t(info.chipKey)}
     </span>
   )
 }
@@ -111,13 +115,22 @@ export function TypeTile({ type, size = 32, raised = false }: { type: string; si
   )
 }
 
-export function ReviewPill() {
+/** The warning icon beside a booking's name on a card or row, or with `pill` a header pill in the detail dialog. */
+export function ReviewPill({ pill = false }: { pill?: boolean }) {
   const { t } = useTranslation()
   return (
-    <span className="inline-flex flex-none items-center gap-1 rounded-full bg-warning-soft px-2 py-[2px] font-geist font-bold uppercase tracking-[.03em] text-warning" style={fs(9)} title={t('reservations.needsReviewHint')}>
-      <AlertCircle size={10} />
-      {t('reservations.needsReview')}
-    </span>
+    <Tooltip label={t('reservations.needsReviewHint')}>
+      {pill ? (
+        <span className={PILL} style={fs(12, 'body')}>
+          <AlertCircle size={13} strokeWidth={2.2} className="text-warning" />
+          {t('reservations.needsReview')}
+        </span>
+      ) : (
+        <span role="img" aria-label={t('reservations.needsReview')} className="grid flex-none place-items-center text-warning">
+          <AlertCircle size={14} strokeWidth={2.2} />
+        </span>
+      )}
+    </Tooltip>
   )
 }
 
@@ -125,36 +138,45 @@ export function ReviewPill() {
  * The AirTrail link of a booking. A multi-leg import is detached from sync by
  * design (#1535), which is not the same as a flight removed upstream (#1646).
  */
-export function AirTrailPill({ r }: { r: Reservation }) {
+export function AirTrailPill({ r, pill = false }: { r: Reservation; pill?: boolean }) {
   const { t } = useTranslation()
   if (r.external_source !== 'airtrail') return null
   const meta = parseMeta(r)
   const multiLeg = !r.sync_enabled && ((Array.isArray(meta.legs) && meta.legs.length > 1) || (r.endpoints || []).length > 2)
   const live = !!r.sync_enabled || multiLeg
   return (
-    <span
-      className={`inline-flex flex-none items-center gap-1 rounded-full px-2 py-[2px] font-geist font-bold uppercase tracking-[.03em] ${live ? 'bg-info-soft text-info' : 'bg-surface-tertiary text-content-faint'}`}
-      style={fs(9)}
-      title={r.sync_enabled ? t('reservations.airtrail.syncedHint') : multiLeg ? t('reservations.airtrail.layoverHint') : t('reservations.airtrail.notSyncedHint')}
-    >
-      <Plane size={10} />
-      {live ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
-    </span>
+    <Tooltip label={r.sync_enabled ? t('reservations.airtrail.syncedHint') : multiLeg ? t('reservations.airtrail.layoverHint') : t('reservations.airtrail.notSyncedHint')}>
+      {pill ? (
+        <span className={PILL} style={fs(12, 'body')}>
+          <Plane size={13} strokeWidth={2.2} className={live ? 'text-info' : 'text-content-faint'} />
+          {live ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
+        </span>
+      ) : (
+        <span
+          className={`inline-flex flex-none items-center gap-1 rounded-full px-2 py-[2px] font-geist font-bold uppercase tracking-[.03em] ${live ? 'bg-info-soft text-info' : 'bg-surface-tertiary text-content-faint'}`}
+          style={fs(9)}
+        >
+          <Plane size={10} />
+          {live ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
+        </span>
+      )}
+    </Tooltip>
   )
 }
 
 /** A round 26 px action on a card head, quiet until the card is hovered or focused. */
 export function RoundAction({ label, onClick, children, danger = false }: { label: string; onClick: () => void; children: ReactNode; danger?: boolean }) {
   return (
-    <button
-      type="button"
-      onClick={e => { e.stopPropagation(); onClick() }}
-      title={label}
-      aria-label={label}
-      className={`grid h-[26px] w-[26px] flex-none place-items-center rounded-full bg-surface-card text-content-muted opacity-60 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${danger ? 'hover:text-danger' : 'hover:text-content'}`}
-    >
-      {children}
-    </button>
+    <Tooltip label={label}>
+      <button
+        type="button"
+        onClick={e => { e.stopPropagation(); onClick() }}
+        aria-label={label}
+        className={`grid h-[26px] w-[26px] flex-none place-items-center rounded-full bg-surface-card text-content-muted opacity-60 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 ${danger ? 'hover:text-danger' : 'hover:text-content'}`}
+      >
+        {children}
+      </button>
+    </Tooltip>
   )
 }
 
@@ -171,7 +193,7 @@ export function TravelerChips({ travelers }: { travelers: ReservationTraveler[]
               {src ? <img src={src} alt="" className="h-full w-full object-cover" /> : tv.username?.[0]?.toUpperCase()}
             </span>
             <span className="truncate font-semibold text-content" style={fs(12, 'body')}>{tv.username}</span>
-            {!!tv.is_guest && <GuestBadge size="xs" />}
+            {!!tv.is_guest && <GuestBadge size="xs" customTooltip />}
           </span>
         )
       })}
@@ -184,17 +206,19 @@ export function TravelerStack({ travelers, max = 3 }: { travelers: ReservationTr
   if (travelers.length === 0) return null
   const names = travelers.map(tv => tv.username).join(', ')
   return (
-    <span className="flex items-center" title={names} aria-label={names}>
-      {travelers.slice(0, max).map((tv, i) => {
-        const src = tv.avatar_url || avatarSrc(tv.avatar)
-        return (
-          <span key={tv.user_id} className="grid h-[22px] w-[22px] flex-none place-items-center overflow-hidden rounded-full border-2 border-surface-card bg-accent font-bold text-accent-text" style={{ ...fs(9), marginLeft: i ? -7 : 0 }}>
-            {src ? <img src={src} alt="" className="h-full w-full object-cover" /> : tv.username?.[0]?.toUpperCase()}
-          </span>
-        )
-      })}
-      {travelers.length > max && <span className="ml-1 font-geist font-semibold text-content-faint" style={fs(10.5)}>+{travelers.length - max}</span>}
-    </span>
+    <Tooltip label={names}>
+      <span className="flex items-center" aria-label={names}>
+        {travelers.slice(0, max).map((tv, i) => {
+          const src = tv.avatar_url || avatarSrc(tv.avatar)
+          return (
+            <span key={tv.user_id} className="grid h-[22px] w-[22px] flex-none place-items-center overflow-hidden rounded-full border-2 border-surface-card bg-accent font-bold text-accent-text" style={{ ...fs(9), marginLeft: i ? -7 : 0 }}>
+              {src ? <img src={src} alt="" className="h-full w-full object-cover" /> : tv.username?.[0]?.toUpperCase()}
+            </span>
+          )
+        })}
+        {travelers.length > max && <span className="ml-1 font-geist font-semibold text-content-faint" style={fs(10.5)}>+{travelers.length - max}</span>}
+      </span>
+    </Tooltip>
   )
 }
 
diff --git a/client/src/components/Planner/bookings/bookingsModel.ts b/client/src/components/Planner/bookings/bookingsModel.ts
index 30e27a055..670bbf95a 100644
--- a/client/src/components/Planner/bookings/bookingsModel.ts
+++ b/client/src/components/Planner/bookings/bookingsModel.ts
@@ -18,15 +18,17 @@ export type SortBy = 'date' | 'title' | 'type' | 'status'
 export interface ReservationTypeInfo {
   Icon: LucideIcon
   labelKey: string
+  /** The name on a chip or pill, shorter where the full one would crowd a card's head. */
+  chipKey: string
   color: string
 }
 
 // Icons and label keys for every reservation type. The colours come from the phone's
 // models so the two shells can never drift apart on what a flight looks like.
-const TYPES: Record<string, { Icon: LucideIcon }> = {
+const TYPES: Record<string, { Icon: LucideIcon; chipKey?: string }> = {
   flight: { Icon: Plane }, train: { Icon: Train }, bus: { Icon: Bus }, car: { Icon: Car },
   taxi: { Icon: CarTaxiFront }, bicycle: { Icon: Bike }, cruise: { Icon: Ship }, ferry: { Icon: Sailboat },
-  transit: { Icon: TramFront }, transport_other: { Icon: Route },
+  transit: { Icon: TramFront, chipKey: 'reservations.typeShort.transit' }, transport_other: { Icon: Route },
   hotel: { Icon: Hotel }, restaurant: { Icon: Utensils }, event: { Icon: Ticket }, tour: { Icon: Users },
   parking: { Icon: ParkingSquare }, other: { Icon: FileText },
 }
@@ -36,6 +38,7 @@ export function typeInfo(type: string): ReservationTypeInfo {
   return {
     Icon: TYPES[known].Icon,
     labelKey: `reservations.type.${known}`,
+    chipKey: TYPES[known].chipKey ?? `reservations.type.${known}`,
     color: TRANSPORT_TYPE_COLOR[known] || BOOKING_TYPE_COLOR[known] || '#6b7280', // theme-lint-disable: fallback type colour, as on the phone
   }
 }
@@ -146,8 +149,11 @@ export function applyFilters(list: Reservation[], f: BookingFilters, labelOf: (t
   )
 }
 
-/** Chronological, undated last, creation order on a tie (#1507); other keys fall back to that order. */
-export function sortReservations(list: Reservation[], days: Day[], by: SortBy, dir: 'asc' | 'desc', labelOf: (type: string) => string): Reservation[] {
+/**
+ * Chronological, undated last, creation order on a tie (#1507); other keys fall back to that order.
+ * With `transitApart` off, a transit journey sorts by status as if confirmed, next to the bookings it sits among.
+ */
+export function sortReservations(list: Reservation[], days: Day[], by: SortBy, dir: 'asc' | 'desc', labelOf: (type: string) => string, transitApart = true): Reservation[] {
   const keyed = list.map(r => ({ r, key: startKey(r, days) }))
   const byDate = (a: typeof keyed[number], b: typeof keyed[number]) => {
     if (a.key !== b.key) {
@@ -160,7 +166,7 @@ export function sortReservations(list: Reservation[], days: Day[], by: SortBy, d
   const primary = (a: typeof keyed[number], b: typeof keyed[number]): number => {
     if (by === 'title') return a.r.title.localeCompare(b.r.title)
     if (by === 'type') return labelOf(a.r.type).localeCompare(labelOf(b.r.type))
-    if (by === 'status') return statusRank(a.r) - statusRank(b.r)
+    if (by === 'status') return statusRank(a.r, transitApart) - statusRank(b.r, transitApart)
     return 0
   }
   const sign = dir === 'desc' ? -1 : 1
@@ -176,8 +182,8 @@ export function sortReservations(list: Reservation[], days: Day[], by: SortBy, d
     .map(x => x.r)
 }
 
-function statusRank(r: Reservation): number {
-  if (r.type === 'transit') return 2
+function statusRank(r: Reservation, transitApart: boolean): number {
+  if (r.type === 'transit') return transitApart ? 2 : 0
   return r.status === 'confirmed' ? 0 : 1
 }
 
@@ -201,14 +207,19 @@ export interface GroupLabels {
   dayDate: (date: string) => string
 }
 
-/** Sections of a sorted list. Status follows the phone's order: confirmed, pending, transit. */
-export function groupReservations(sorted: Reservation[], by: GroupBy, days: Day[], tripStart: string | null | undefined, tripEnd: string | null | undefined, L: GroupLabels): BookingGroup[] {
+/**
+ * Sections of a sorted list. Status follows the phone's order: confirmed, pending, transit.
+ * With `transitApart` off, transit journeys have no section of their own: nothing is
+ * left to book on them, so they sit among the confirmed entries in time order.
+ */
+export function groupReservations(sorted: Reservation[], by: GroupBy, days: Day[], tripStart: string | null | undefined, tripEnd: string | null | undefined, L: GroupLabels, transitApart = true): BookingGroup[] {
   if (by === 'none') return [{ id: 'all', label: '', items: sorted }]
   if (by === 'status') {
+    const isTransit = (r: Reservation) => r.type === 'transit'
     const groups: BookingGroup[] = [
-      { id: 'confirmed', label: L.confirmed, items: sorted.filter(r => r.type !== 'transit' && r.status === 'confirmed') },
-      { id: 'pending', label: L.pending, items: sorted.filter(r => r.type !== 'transit' && r.status !== 'confirmed') },
-      { id: 'transit', label: L.transit, items: sorted.filter(r => r.type === 'transit') },
+      { id: 'confirmed', label: L.confirmed, items: sorted.filter(r => (isTransit(r) ? !transitApart : r.status === 'confirmed')) },
+      { id: 'pending', label: L.pending, items: sorted.filter(r => !isTransit(r) && r.status !== 'confirmed') },
+      { id: 'transit', label: L.transit, items: transitApart ? sorted.filter(isTransit) : [] },
     ]
     return groups.filter(g => g.items.length > 0)
   }
diff --git a/client/src/components/Planner/bookings/transitParts.tsx b/client/src/components/Planner/bookings/transitParts.tsx
new file mode 100644
index 000000000..ec2057bdf
--- /dev/null
+++ b/client/src/components/Planner/bookings/transitParts.tsx
@@ -0,0 +1,70 @@
+import { ArrowRight, Clock, Footprints, MoveRight } from 'lucide-react'
+import { useTranslation } from '../../../i18n'
+import { TransitMetaBadges, type TransitLegDisplay } from '../transitDisplay'
+import { BOX, fs } from './bookingParts'
+
+export interface TransitSummary {
+  legs: TransitLegDisplay[]
+  /** Seconds door to door, or null when the search did not say. */
+  duration: number | null
+  transfers: number
+  /** Seconds on foot across the whole journey. */
+  walk: number
+}
+
+/**
+ * A transit journey as its metadata stores it, or null for anything else. Older
+ * entries lack the transfer and walking totals, so both fall back to the legs.
+ */
+export function transitSummary(meta: Record<string, unknown>): TransitSummary | null {
+  const transit = meta.transit as { legs?: unknown; duration?: unknown; transfers?: unknown; walk_seconds?: unknown } | undefined
+  if (!transit || !Array.isArray(transit.legs)) return null
+  const legs = transit.legs as TransitLegDisplay[]
+  const rides = legs.filter(l => l.mode !== 'WALK').length
+  const walked = legs.filter(l => l.mode === 'WALK').reduce((sum, l) => sum + (l.duration ?? 0), 0)
+  return {
+    legs,
+    duration: typeof transit.duration === 'number' && transit.duration > 0 ? transit.duration : null,
+    transfers: typeof transit.transfers === 'number' ? transit.transfers : Math.max(0, rides - 1),
+    walk: typeof transit.walk_seconds === 'number' ? transit.walk_seconds : walked,
+  }
+}
+
+/** A transit journey leg by leg: the line and its stops, then its facts as badges. */
+export function TransitLegs({ legs, compact = false }: { legs: TransitLegDisplay[]; compact?: boolean }) {
+  const { t } = useTranslation()
+  return (
+    <div className={`${BOX} flex flex-col ${compact ? 'gap-2 px-[10px] py-2' : 'gap-3 px-3.5 py-3'}`}>
+      {legs.map((leg, i) => {
+        const walk = leg.mode === 'WALK'
+        const mins = leg.duration ? Math.round(leg.duration / 60) : null
+        return (
+          <div key={i} className="flex items-start gap-2.5">
+            {walk ? <Footprints size={compact ? 13 : 14} strokeWidth={2} className="mt-0.5 w-[26px] flex-none text-content-faint" /> : (
+              <span className="min-w-[26px] flex-none rounded-[5px] px-1.5 py-px text-center font-bold" style={{
+                ...fs(compact ? 10.5 : 11),
+                background: leg.line_color || 'var(--bg-tertiary)',
+                color: leg.line_color ? (leg.line_text_color || '#fff') : 'var(--text-primary)', // theme-lint-disable: a transit line's own colours
+              }}>{leg.line || leg.mode}</span>
+            )}
+            <div className={`flex min-w-0 flex-1 flex-col ${compact ? 'gap-1' : 'gap-1.5'}`}>
+              <div className="flex min-w-0 items-center gap-1 font-medium text-content" style={fs(compact ? 12 : 13, 'body')}>
+                {walk ? <span className="truncate text-content-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span> : (
+                  <><span className="truncate">{leg.from?.name}</span><ArrowRight size={compact ? 11 : 12} strokeWidth={2} className="flex-none text-content-faint" /><span className="truncate">{leg.to?.name}</span></>
+                )}
+              </div>
+              <TransitMetaBadges size={compact ? 'sm' : 'md'} items={[
+                { icon: Clock, text: !walk && leg.from?.time ? `${leg.from.time}${leg.to?.time ? ` → ${leg.to.time}` : ''}` : '' },
+                { text: mins ? t('transit.min', { count: mins }) : '', caps: true },
+                { text: !walk && leg.stops ? t('transit.stops', { count: leg.stops }) : '', caps: true },
+                { text: !walk && leg.from?.track ? t('transit.platform', { track: leg.from.track }) : '' },
+                { icon: MoveRight, text: !walk && leg.headsign ? leg.headsign : '', dim: true },
+                { text: !walk && leg.agency ? leg.agency : '', dim: true },
+              ]} />
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/client/src/components/Planner/bookings/useBookingActions.tsx b/client/src/components/Planner/bookings/useBookingActions.tsx
new file mode 100644
index 000000000..ccf19dab1
--- /dev/null
+++ b/client/src/components/Planner/bookings/useBookingActions.tsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import type { Reservation } from '../../../types'
+import { useTranslation } from '../../../i18n'
+import { useTripStore } from '../../../store/tripStore'
+import { useToast } from '../../shared/Toast'
+import ConfirmDialog from '../../shared/ConfirmDialog'
+
+/**
+ * The two things a booking can have done to it without its editor: switching
+ * its status, and deleting it after a question. The question is the returned
+ * element, to be rendered once next to whatever asks it.
+ *
+ * `beforeDelete` runs once the question is answered and before the delete goes
+ * out, so a detail showing that booking closes first.
+ */
+export function useBookingActions(tripId: number, onDelete: (id: number) => unknown, beforeDelete?: (r: Reservation) => void) {
+  const { t } = useTranslation()
+  const toast = useToast()
+  const toggleReservationStatus = useTripStore(s => s.toggleReservationStatus)
+  const [pendingDelete, setPendingDelete] = useState<Reservation | null>(null)
+
+  const toggleStatus = (r: Reservation) => {
+    toggleReservationStatus(tripId, r.id).catch(() => toast.error(t('reservations.toast.updateError')))
+  }
+  const confirmDelete = async () => {
+    const r = pendingDelete
+    setPendingDelete(null)
+    if (!r) return
+    beforeDelete?.(r)
+    try { await onDelete(r.id) } catch { toast.error(t('reservations.toast.deleteError')) }
+  }
+
+  const confirmDialog = (
+    <ConfirmDialog
+      isOpen={!!pendingDelete}
+      onClose={() => setPendingDelete(null)}
+      onConfirm={confirmDelete}
+      title={t('reservations.confirm.deleteTitle')}
+      message={t('reservations.confirm.deleteBody', { name: pendingDelete?.title ?? '' })}
+      confirmLabel={t('common.delete')}
+      cancelLabel={t('common.cancel')}
+    />
+  )
+
+  return { toggleStatus, requestDelete: setPendingDelete, pendingDelete, confirmDialog }
+}
diff --git a/client/src/components/Planner/bookings/useBookingsView.ts b/client/src/components/Planner/bookings/useBookingsView.ts
index 9f9e1b3b1..179c64dd0 100644
--- a/client/src/components/Planner/bookings/useBookingsView.ts
+++ b/client/src/components/Planner/bookings/useBookingsView.ts
@@ -38,6 +38,8 @@ export function useBookingsView(kind: BookingsKind, tripId: number) {
     // Anything but 'day' (an older build stored three steps) opens on the whole trip.
     return { ...stored, zoom: stored.zoom === 'day' ? 'day' : 'trip' }
   })
+  // Cards only: whether transit journeys get their own section or sit among the confirmed entries.
+  const [transitApartCards, setTransitApartCards] = useState<boolean>(() => read(local(), k('transitApart'), false))
   const [filters, setFiltersState] = useState<Filters>(() => read(session(), filterKey, { types: [], status: 'all', travelers: [] }))
   const [collapsedMap, setCollapsed] = useState<Record<string, boolean>>(() => read(local(), `${k('collapsed')}:${tripId}`, {}))
   const [query, setQuery] = useState('')
@@ -54,6 +56,7 @@ export function useBookingsView(kind: BookingsKind, tripId: number) {
   const flipSort = () => { const next = { ...sort, dir: sort.dir === 'asc' ? 'desc' as const : 'asc' as const }; setSortState(next); write(local(), k('sort'), next) }
   const patchTimeline = (patch: Partial<typeof timeline>) => { const next = { ...timeline, ...patch }; setTimeline(next); write(local(), k('timeline'), next) }
   const setFilters = (patch: Partial<Filters>) => { const next = { ...filters, ...patch }; setFiltersState(next); write(session(), filterKey, next) }
+  const setTransitApart = (on: boolean) => { setTransitApartCards(on); write(local(), k('transitApart'), on) }
 
   const toggleType = (type: string) => setFilters({ types: filters.types.includes(type) ? filters.types.filter(x => x !== type) : [...filters.types, type] })
   const toggleTraveler = (id: number) => setFilters({ travelers: filters.travelers.includes(id) ? filters.travelers.filter(x => x !== id) : [...filters.travelers, id] })
@@ -61,9 +64,10 @@ export function useBookingsView(kind: BookingsKind, tripId: number) {
 
   const viewIsDefault = view === 'timeline'
     ? timeline.byType && timeline.context
-    : groups[view] === DEFAULT_GROUP[view] && sort.by === 'date' && sort.dir === 'asc'
+    : groups[view] === DEFAULT_GROUP[view] && sort.by === 'date' && sort.dir === 'asc' && (view !== 'cards' || !transitApartCards)
   const resetView = () => {
     if (view === 'timeline') { patchTimeline({ byType: true, context: true }); return }
+    if (view === 'cards') setTransitApart(false)
     setGroup(DEFAULT_GROUP[view])
     const next = { by: 'date' as const, dir: 'asc' as const }
     setSortState(next); write(local(), k('sort'), next)
@@ -83,6 +87,9 @@ export function useBookingsView(kind: BookingsKind, tripId: number) {
     timeline, setZoom: (zoom: TimelineZoom) => patchTimeline({ zoom }),
     toggleByType: () => patchTimeline({ byType: !timeline.byType }),
     toggleContext: () => patchTimeline({ context: !timeline.context }),
+    // The list and the timeline keep transit in its own section, as before.
+    transitApart: view !== 'cards' || transitApartCards,
+    toggleTransitApart: () => setTransitApart(!transitApartCards),
     types, status: filters.status, travelers,
     setStatus: (status: StatusFilter) => setFilters({ status }),
     toggleType, clearTypes: () => setFilters({ types: [] }),
diff --git a/client/src/components/Planner/bookings/useReservationDetailPlugins.ts b/client/src/components/Planner/bookings/useReservationDetailPlugins.ts
new file mode 100644
index 000000000..905768211
--- /dev/null
+++ b/client/src/components/Planner/bookings/useReservationDetailPlugins.ts
@@ -0,0 +1,6 @@
+import { usePluginStore } from '../../../store/pluginStore'
+
+/** The plugins that draw a frame into a booking's detail. */
+export function useReservationDetailPlugins() {
+  return usePluginStore(s => s.plugins).filter(p => p.type === 'widget' && p.slot === 'reservation-detail')
+}
diff --git a/client/src/components/Planner/placeDialogParts.tsx b/client/src/components/Planner/placeDialogParts.tsx
new file mode 100644
index 000000000..23b814b8f
--- /dev/null
+++ b/client/src/components/Planner/placeDialogParts.tsx
@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import { fs } from '../shared/DialogShell'
+
+/**
+ * The pieces the two columns beside the place form share: the Place details
+ * column on the left and the saved places on the right. Both are grey panels
+ * with white cards on them, the look of the booking editors' route panels, so
+ * the three columns of the add place dialog read as one piece.
+ */
+
+/**
+ * The frame of a column. Its width is the caller's: the same sm:w-80 (320 px) on
+ * both sides of the form, so neither column reads as the more important one.
+ */
+export const SIDE_COLUMN = 'flex w-full shrink-0 flex-col self-stretch overflow-hidden rounded-[14px] border border-edge-faint bg-surface-secondary'
+
+/** The eyebrow a column opens with, its icon on a small white disc. */
+export function ColumnHead({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return (
+    <div className="flex flex-none items-center gap-2 px-3.5 pb-2.5 pt-3">
+      <span className="grid h-6 w-6 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm">{icon}</span>
+      <h3 className="m-0 min-w-0 truncate font-geist font-bold uppercase tracking-[.08em] text-content-muted" style={fs(10)}>{children}</h3>
+    </div>
+  )
+}
+
+/** A white card on the grey column, the frame every block of it sits in. */
+export const COLUMN_CARD = 'rounded-[12px] border border-edge-faint bg-surface-card'
+
+/**
+ * A quiet line in place of content: nothing picked yet, still loading, nothing
+ * found. Small on purpose, so an empty column waits instead of shouting, and it
+ * leaves the column its width so the dialog does not move when content arrives.
+ */
+export function HintCard({ icon, children }: { icon: ReactNode; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-2.5 rounded-[12px] border border-dashed border-edge px-3 py-2.5 text-content-muted" style={fs(12, 'body')}>
+      <span className="grid h-8 w-8 flex-none place-items-center rounded-full bg-surface-card text-content-faint shadow-sm">{icon}</span>
+      <span className="min-w-0 leading-snug">{children}</span>
+    </div>
+  )
+}
+
+/** A white action across the width of a column or a field, like the dialog's secondary buttons. */
+export const WHITE_BUTTON = 'flex w-full items-center justify-center gap-2 rounded-[10px] bg-surface-card px-3 py-2 font-semibold text-content shadow-sm ring-1 ring-edge-faint transition-colors hover:bg-surface-hover disabled:cursor-default disabled:opacity-50 disabled:hover:bg-surface-card'
diff --git a/client/src/components/Planner/planParts.tsx b/client/src/components/Planner/planParts.tsx
new file mode 100644
index 000000000..a982a9979
--- /dev/null
+++ b/client/src/components/Planner/planParts.tsx
@@ -0,0 +1,124 @@
+import type { MouseEvent, ReactNode } from 'react'
+import { Clock, MoreHorizontal, type LucideIcon } from 'lucide-react'
+import { Tooltip } from '../shared/Tooltip'
+import { ContextMenu, useContextMenu } from '../shared/ContextMenu'
+import { fs } from '../shared/DialogShell'
+
+/**
+ * The small pieces the Plan tab is built from, so the day list, the places
+ * list, the inspector and the day panel speak one language: the head band a
+ * panel opens with, its icon buttons, the "…" that keeps a row's actions out
+ * of sight until they are wanted, and the pills a row states its facts in.
+ */
+
+/** The band a floating panel opens with, tinted like every card head in the planner. */
+export const PANEL_BAR = 'flex min-h-[52px] flex-none items-center gap-1.5 border-b border-edge-faint px-3 py-2'
+
+/** A 32px icon control on a panel bar. Raised like an active filter tab while `active`. */
+export function BarButton({ label, onClick, active = false, disabled = false, children, className = '', ariaPressed, ariaExpanded, ariaHaspopup, placement = 'bottom' }: {
+  label: string
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void
+  active?: boolean
+  disabled?: boolean
+  children: ReactNode
+  className?: string
+  ariaPressed?: boolean
+  ariaExpanded?: boolean
+  ariaHaspopup?: 'dialog' | 'menu'
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+}) {
+  return (
+    <Tooltip label={label} placement={placement}>
+      <button type="button" onClick={onClick} disabled={disabled} aria-label={label}
+        aria-pressed={ariaPressed} aria-expanded={ariaExpanded} aria-haspopup={ariaHaspopup}
+        className={`grid h-8 w-8 flex-none place-items-center rounded-[10px] transition-colors disabled:cursor-default disabled:opacity-40 ${active ? 'bg-surface-card text-content shadow-sm' : 'text-content-muted enabled:hover:bg-surface-card enabled:hover:text-content'} ${className}`}>
+        {children}
+      </button>
+    </Tooltip>
+  )
+}
+
+export interface MenuEntry {
+  label?: string
+  icon?: LucideIcon
+  onClick?: () => void
+  danger?: boolean
+  divider?: boolean
+}
+
+/**
+ * The "…" of a row or card: the actions a right-click also offers, for the
+ * mouse that doesn't right-click and for the keyboard. Quiet at rest, it comes
+ * forward with its row's hover or focus (the row carries the `group` class).
+ */
+export function MoreButton({ label, items, size = 26, alwaysVisible = false, className = '' }: {
+  label: string
+  items: Array<MenuEntry | false | null | undefined>
+  size?: number
+  alwaysVisible?: boolean
+  className?: string
+}) {
+  const menu = useContextMenu()
+  const entries = items.filter(Boolean) as MenuEntry[]
+  // Nothing but dividers is nothing to offer.
+  if (!entries.some(e => !e.divider)) return null
+  return (
+    <>
+      <Tooltip label={label} disabled={!!menu.menu}>
+        <button type="button" aria-label={label} aria-haspopup="menu"
+          onClick={e => menu.open(e, entries, true)}
+          className={`grid flex-none place-items-center rounded-full text-content-muted transition-opacity hover:bg-surface-card hover:text-content focus-visible:opacity-100 ${alwaysVisible || menu.menu ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 [@media(hover:none)]:opacity-100'} ${className}`}
+          style={{ width: size, height: size }}>
+          <MoreHorizontal size={15} strokeWidth={2} />
+        </button>
+      </Tooltip>
+      <ContextMenu menu={menu.menu} onClose={menu.close} />
+    </>
+  )
+}
+
+/** A time or time range as a white badge, like the other facts on a card. */
+/** A small white badge on a row's second line, for what the row says about when. */
+export function WhiteBadge({ children, icon, className = '' }: { children: ReactNode; icon?: ReactNode; className?: string }) {
+  return (
+    <span className={`inline-flex flex-none items-center gap-1 whitespace-nowrap rounded-full bg-surface-card px-2 py-[2px] font-geist font-normal tabular-nums text-content-secondary shadow-sm ${className}`} style={fs(10.5)}>
+      {icon}
+      {children}
+    </span>
+  )
+}
+
+export function TimePill({ children, className = '' }: { children: ReactNode; className?: string }) {
+  return <WhiteBadge className={className} icon={<Clock size={10} strokeWidth={2.2} className="flex-none text-content-faint" />}>{children}</WhiteBadge>
+}
+
+export type PillTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent'
+
+// White badges on whatever tint the row has; the tone only colours the words and the icon.
+const PILL_TONES: Record<PillTone, string> = {
+  neutral: 'bg-surface-card text-content-secondary shadow-sm',
+  success: 'bg-surface-card text-success shadow-sm',
+  warning: 'bg-surface-card text-warning shadow-sm',
+  danger: 'bg-surface-card text-danger shadow-sm',
+  info: 'bg-surface-card text-info shadow-sm',
+  accent: 'bg-accent text-accent-text',
+}
+
+/** A small fact on a row (a status, a carrier, a phase): a white badge, its words in one of the status tones. */
+export function SoftPill({ tone = 'neutral', icon, children, className = '', caps = false }: {
+  tone?: PillTone
+  icon?: ReactNode
+  children?: ReactNode
+  className?: string
+  caps?: boolean
+}) {
+  return (
+    <span className={`inline-flex min-w-0 flex-none items-center gap-1 whitespace-nowrap rounded-full px-2 py-[2px] font-geist font-normal ${caps ? 'uppercase tracking-[.05em]' : ''} ${PILL_TONES[tone]} ${className}`} style={fs(caps ? 9.5 : 10.5)}>
+      {icon}
+      {children}
+    </span>
+  )
+}
+
+/** The tint a card head takes from a colour (a category, a note, a plugin's day tone). */
+export const tintOf = (color: string, percent = 11) => `color-mix(in srgb, ${color} ${percent}%, transparent)`
diff --git a/client/src/components/Planner/transitDisplay.tsx b/client/src/components/Planner/transitDisplay.tsx
index aaf30d579..32892dc0c 100644
--- a/client/src/components/Planner/transitDisplay.tsx
+++ b/client/src/components/Planner/transitDisplay.tsx
@@ -15,6 +15,7 @@ export interface TransitLegDisplay {
   line_text_color?: string | null
   duration?: number
   headsign?: string | null
+  agency?: string | null
   stops?: number
   from?: { name?: string; time?: string | null; track?: string | null }
   to?: { name?: string; time?: string | null; track?: string | null }
@@ -117,6 +118,8 @@ export interface TransitMetaItem {
   text: string
   /** De-emphasised (operator names and the like). */
   dim?: boolean
+  /** Set in capitals, for a count with its unit ("15 MIN", "5 STOPS"). */
+  caps?: boolean
 }
 
 /**
@@ -127,14 +130,15 @@ export function TransitMetaBadges({ items, size = 'md' }: { items: TransitMetaIt
   const font = size === 'sm' ? 'calc(10px * var(--fs-scale-caption, 1))' : 'calc(10.5px * var(--fs-scale-caption, 1))'
   return (
     <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, flexWrap: 'wrap' }}>
-      {items.filter(i => i.text).map(({ icon: Icon, text, dim }, i) => (
+      {items.filter(i => i.text).map(({ icon: Icon, text, dim, caps }, i) => (
         <span
           key={i}
           className={dim ? 'bg-surface-card text-content-faint' : 'bg-surface-card text-content-muted'}
           style={{
             display: 'inline-flex', alignItems: 'center', gap: 4,
             padding: size === 'sm' ? '1px 6px' : '2px 8px', borderRadius: 6,
-            fontSize: font, fontWeight: 500, whiteSpace: 'nowrap',
+            fontSize: font, fontWeight: caps ? 600 : 500, whiteSpace: 'nowrap',
+            textTransform: caps ? 'uppercase' : undefined, letterSpacing: caps ? '0.04em' : undefined,
             border: '1px solid var(--border-faint)',
           }}
         >
diff --git a/client/src/components/Planner/useDayDetail.ts b/client/src/components/Planner/useDayDetail.ts
index ebb1c9a52..942ac8d55 100644
--- a/client/src/components/Planner/useDayDetail.ts
+++ b/client/src/components/Planner/useDayDetail.ts
@@ -1,26 +1,51 @@
 import { useState, useEffect } from 'react'
+import type { WeatherResult } from '@trek/shared'
 import { weatherApi, accommodationsApi } from '../../api/client'
 import { isDayInAccommodationRange } from '../../utils/dayOrder'
 import { applyStayStops } from '../../store/stayStops'
+import type { Accommodation, Day } from '../../types'
+
+export interface HotelForm {
+  check_in: string
+  check_in_end: string
+  check_out: string
+  confirmation: string
+  place_id: number | null
+}
+
+export interface HotelDayRange {
+  start: number | undefined
+  end: number | undefined
+}
+
+/** false while closed, true for a new stay, 'edit' for the one in `accommodation`. */
+export type HotelPickerMode = boolean | 'edit'
+
+const EMPTY_HOTEL_FORM: HotelForm = { check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null }
 
 /** Day-detail data + accommodation logic: weather load, accommodations list,
- *  hotel picker form state and create/update/delete handlers. */
-export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: any, language: any, onAccommodationChange: any) {
-  const [weather, setWeather] = useState(null)
+ *  hotel picker form state and create/update/delete handlers.
+ *
+ *  The write handlers let a failed request through to the caller, which is the
+ *  one that can tell the user; the picker stays open with what was entered. */
+export function useDayDetail(day: Day | null, days: Day[], tripId: number, lat: number | null, lng: number | null, language: string, onAccommodationChange?: () => void) {
+  const [weather, setWeather] = useState<WeatherResult | null>(null)
   const [loading, setLoading] = useState(false)
-  const [accommodation, setAccommodation] = useState(null)
-  const [dayAccommodations, setDayAccommodations] = useState<any[]>([])
-  const [accommodations, setAccommodations] = useState([])
-  const [showHotelPicker, setShowHotelPicker] = useState(false)
+  const [accommodation, setAccommodation] = useState<Accommodation | null>(null)
+  const [dayAccommodations, setDayAccommodations] = useState<Accommodation[]>([])
+  const [accommodations, setAccommodations] = useState<Accommodation[]>([])
+  const [showHotelPicker, setShowHotelPicker] = useState<HotelPickerMode>(false)
   // A stay virtually never checks out the day it checks in — default the range
   // to check-out on the next day, unless the trip ends here.
-  const defaultHotelDayRange = (d: any) => {
-    const idx = (days || []).findIndex((x: any) => x.id === d?.id)
+  const defaultHotelDayRange = (d: Day | null): HotelDayRange => {
+    const idx = (days || []).findIndex(x => x.id === d?.id)
     return { start: d?.id, end: (idx >= 0 && days[idx + 1]?.id) || d?.id }
   }
-  const [hotelDayRange, setHotelDayRange] = useState(() => defaultHotelDayRange(day))
-  const [hotelCategoryFilter, setHotelCategoryFilter] = useState('')
-  const [hotelForm, setHotelForm] = useState({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
+  const [hotelDayRange, setHotelDayRange] = useState<HotelDayRange>(() => defaultHotelDayRange(day))
+  const [hotelCategoryFilter, setHotelCategoryFilter] = useState<number | ''>('')
+  const [hotelForm, setHotelForm] = useState<HotelForm>(EMPTY_HOTEL_FORM)
+
+  const isForDay = (a: Accommodation) => day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
 
   useEffect(() => {
     if (!day?.date || !lat || !lng) { setWeather(null); return }
@@ -35,10 +60,9 @@ export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: an
     if (!tripId) return
     accommodationsApi.list(tripId)
       .then(data => {
-        setAccommodations(data.accommodations || [])
-        const allForDay = (data.accommodations || []).filter(a =>
-          day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-        )
+        const all: Accommodation[] = data.accommodations || []
+        setAccommodations(all)
+        const allForDay = all.filter(isForDay)
         setDayAccommodations(allForDay)
         setAccommodation(allForDay[0] || null)
       })
@@ -47,37 +71,57 @@ export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: an
 
   useEffect(() => { if (day) setHotelDayRange(defaultHotelDayRange(day)) }, [day?.id])
 
-  const handleSelectPlace = (placeId) => {
+  const handleSelectPlace = (placeId: number) => {
     setHotelForm(f => ({ ...f, place_id: placeId }))
   }
 
+  /** Creates the stay the picker describes. Throws when the server refuses it. */
   const handleSaveAccommodation = async () => {
-    if (!hotelForm.place_id) return
-    try {
-      const data = await accommodationsApi.create(tripId, {
-        place_id: hotelForm.place_id,
-        start_day_id: hotelDayRange.start,
-        end_day_id: hotelDayRange.end,
-        check_in: hotelForm.check_in || null,
-        check_in_end: hotelForm.check_in_end || null,
-        check_out: hotelForm.check_out || null,
-        confirmation: hotelForm.confirmation || null,
-      })
-      applyStayStops(data)
-      const newAcc = data.accommodation
-      const updated = [...accommodations, newAcc]
-      setAccommodations(updated)
-      setAccommodation(newAcc)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setShowHotelPicker(false)
-      setHotelForm({ check_in: '', check_in_end: '', check_out: '', confirmation: '', place_id: null })
-      onAccommodationChange?.()
-    } catch {}
+    if (!hotelForm.place_id || hotelDayRange.start == null || hotelDayRange.end == null) return
+    const data = await accommodationsApi.create(tripId, {
+      place_id: hotelForm.place_id,
+      start_day_id: hotelDayRange.start,
+      end_day_id: hotelDayRange.end,
+      check_in: hotelForm.check_in || null,
+      check_in_end: hotelForm.check_in_end || null,
+      check_out: hotelForm.check_out || null,
+      confirmation: hotelForm.confirmation || null,
+    })
+    applyStayStops(data)
+    const newAcc: Accommodation = data.accommodation
+    const updated = [...accommodations, newAcc]
+    setAccommodations(updated)
+    setAccommodation(newAcc)
+    setDayAccommodations(updated.filter(isForDay))
+    setShowHotelPicker(false)
+    setHotelForm(EMPTY_HOTEL_FORM)
+    onAccommodationChange?.()
   }
 
-  const updateAccommodationField = async (field, value) => {
+  /** Saves the picker over the stay in `accommodation`, then reloads the list. Throws when the server refuses it. */
+  const handleUpdateAccommodation = async () => {
+    if (!accommodation) return
+    applyStayStops(await accommodationsApi.update(tripId, accommodation.id, {
+      place_id: hotelForm.place_id,
+      start_day_id: hotelDayRange.start,
+      end_day_id: hotelDayRange.end,
+      check_in: hotelForm.check_in || null,
+      check_in_end: hotelForm.check_in_end || null,
+      check_out: hotelForm.check_out || null,
+      confirmation: hotelForm.confirmation || null,
+    }))
+    setShowHotelPicker(false)
+    setHotelForm(EMPTY_HOTEL_FORM)
+    const d = await accommodationsApi.list(tripId)
+    const all: Accommodation[] = d.accommodations || []
+    setAccommodations(all)
+    const forDay = all.filter(isForDay)
+    setDayAccommodations(forDay)
+    setAccommodation(forDay[0] || null)
+    onAccommodationChange?.()
+  }
+
+  const updateAccommodationField = async (field: string, value: string | null) => {
     if (!accommodation) return
     try {
       const data = await accommodationsApi.update(tripId, accommodation.id, { [field]: value || null })
@@ -87,25 +131,27 @@ export function useDayDetail(day: any, days: any, tripId: any, lat: any, lng: an
     } catch {}
   }
 
-  const handleRemoveAccommodation = async () => {
-    if (!accommodation) return
-    try {
-      applyStayStops(await accommodationsApi.delete(tripId, accommodation.id))
-      const updated = accommodations.filter(a => a.id !== accommodation.id)
-      setAccommodations(updated)
-      setDayAccommodations(updated.filter(a =>
-        day ? isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days) : false
-      ))
-      setAccommodation(null)
-      onAccommodationChange?.()
-    } catch {}
+  /**
+   * Deletes the given stay. It is handed in rather than read from
+   * `accommodation`: that one is the stay last opened, and with two hotels on a
+   * day the X of the second one used to delete the first. Throws when the server
+   * refuses it.
+   */
+  const handleRemoveAccommodation = async (target: Accommodation | null = accommodation) => {
+    if (!target) return
+    applyStayStops(await accommodationsApi.delete(tripId, target.id))
+    const updated = accommodations.filter(a => a.id !== target.id)
+    setAccommodations(updated)
+    setDayAccommodations(updated.filter(isForDay))
+    setAccommodation(prev => (prev && prev.id !== target.id ? prev : null))
+    onAccommodationChange?.()
   }
 
   return {
     weather, loading, accommodation, setAccommodation, dayAccommodations, setDayAccommodations,
     accommodations, setAccommodations, showHotelPicker, setShowHotelPicker,
     hotelDayRange, setHotelDayRange, hotelCategoryFilter, setHotelCategoryFilter,
-    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation,
+    hotelForm, setHotelForm, handleSelectPlace, handleSaveAccommodation, handleUpdateAccommodation,
     updateAccommodationField, handleRemoveAccommodation,
   }
 }
diff --git a/client/src/components/Planner/usePlacesSidebar.test.tsx b/client/src/components/Planner/usePlacesSidebar.test.tsx
index 83107e1b7..4e22159f4 100644
--- a/client/src/components/Planner/usePlacesSidebar.test.tsx
+++ b/client/src/components/Planner/usePlacesSidebar.test.tsx
@@ -1,4 +1,4 @@
-// FE-PLANNER-PSHOOK-001 to FE-PLANNER-PSHOOK-052
+// FE-PLANNER-PSHOOK-001 to FE-PLANNER-PSHOOK-059
 import { http, HttpResponse } from 'msw';
 import userEvent from '@testing-library/user-event';
 import { render, screen, fireEvent, act, waitFor } from '../../../tests/helpers/render';
@@ -714,3 +714,70 @@ describe('usePlacesSidebar context menu', () => {
     });
   });
 });
+
+// ── The filter panel's figures and the row's "…" ──────────────────────────────
+
+describe('usePlacesSidebar filter panel', () => {
+  it('FE-PLANNER-PSHOOK-053: filterCounts counts each choice under search and categories, not the rating floor', () => {
+    const planned = buildPlace({ id: 1, name: 'Alpha Planned', category_id: 4, rating_avg: 1 });
+    const loose = buildPlace({ id: 2, name: 'Alpha Loose', category_id: 4, route_geometry: '[[1,2],[3,4]]' });
+    const other = buildPlace({ id: 3, name: 'Beta', category_id: null });
+    const assignments = { '9': [buildAssignment({ place: planned, day_id: 9 })] };
+    render(<Host {...makeProps({ places: [planned, loose, other], assignments })} />);
+    expect(S.filterCounts).toEqual({ all: 3, unplanned: 2, planned: 1, tracks: 1 });
+
+    act(() => { S.setSearch('alpha'); });
+    act(() => { S.setRatingFilter(5); });
+    expect(S.filterCounts).toEqual({ all: 2, unplanned: 1, planned: 1, tracks: 1 });
+
+    act(() => { S.setCategoryFilters(new Set(['uncategorized'])); });
+    expect(S.filterCounts).toEqual({ all: 0, unplanned: 0, planned: 0, tracks: 0 });
+  });
+
+  it('FE-PLANNER-PSHOOK-054: while a day is open "planned" counts that day only', () => {
+    const today = buildPlace({ id: 1, name: 'Today' });
+    const later = buildPlace({ id: 2, name: 'Later' });
+    const assignments = {
+      '1': [buildAssignment({ place: today, day_id: 1 })],
+      '2': [buildAssignment({ place: later, day_id: 2 })],
+    };
+    render(<Host {...makeProps({ places: [today, later], assignments, days: [buildDay({ id: 1 }), buildDay({ id: 2 })], selectedDayId: 1 })} />);
+    expect(S.filterCounts.planned).toBe(1);
+    expect(S.filterCounts.unplanned).toBe(0);
+  });
+
+  it('FE-PLANNER-PSHOOK-056: pickFilter changes the choice and starts a fresh selection', () => {
+    render(<Host {...makeProps({ places: [buildPlace({ id: 1 }), buildPlace({ id: 2 })] })} />);
+    act(() => { S.setSelectedIds(new Set([1, 2])); });
+    act(() => { S.pickFilter('planned'); });
+    expect(useTripStore.getState().placesFilter).toBe('planned');
+    expect(S.selectedIds.size).toBe(0);
+  });
+
+});
+
+describe('usePlacesSidebar row menu entries', () => {
+  it('FE-PLANNER-PSHOOK-058: placeMenuItems lists what the right-click shows, with "+ Day" for the given day', () => {
+    enableCollections();
+    const onAssignToDay = vi.fn((_placeId: number, _dayId: number) => {});
+    const place = buildPlace({ id: 3, name: 'Cafe', website: 'https://cafe.example', google_place_id: 'ChIJ1' });
+    render(<Host {...makeProps({ places: [place], onAssignToDay })} />);
+
+    const withDay = S.placeMenuItems(place, 4);
+    expect(withDay.map(e => e.divider ? '---' : e.label)).toEqual(['Edit', '+ Day', 'Open Website', 'Google Maps', 'Save to Collection', '---', 'Delete']);
+    withDay[1].onClick?.();
+    expect(onAssignToDay).toHaveBeenCalledWith(3, 4);
+
+    // No day, no "+ Day".
+    expect(S.placeMenuItems(place, null).some(e => e.label === '+ Day')).toBe(false);
+  });
+
+  it('FE-PLANNER-PSHOOK-059: a read-only member gets no edit or delete entries from placeMenuItems', () => {
+    seedStore(usePermissionsStore, { permissions: { place_edit: 'admin' } });
+    const place = buildPlace({ id: 3, name: 'Cafe', website: null, lat: null, lng: null, google_place_id: null });
+    render(<Host {...makeProps({ places: [place] })} />);
+    const labels = S.placeMenuItems(place, null).filter(e => !e.divider).map(e => e.label);
+    expect(labels).not.toContain('Edit');
+    expect(labels).not.toContain('Delete');
+  });
+});
diff --git a/client/src/components/Planner/usePlacesSidebar.ts b/client/src/components/Planner/usePlacesSidebar.ts
index f027881c4..8f4e8416a 100644
--- a/client/src/components/Planner/usePlacesSidebar.ts
+++ b/client/src/components/Planner/usePlacesSidebar.ts
@@ -16,10 +16,14 @@ import type { Place, Category, Day, AssignmentsMap } from '../../types'
 import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
 import { safeHttpUrl } from '../../utils/safeUrl'
 import { plannedPlaceIds, plannedPlaceIdsForDay, type PlannedAccommodation } from '../../utils/plannedPlaces'
+import type { MenuEntry } from './planParts'
 
 /** Stable identity — a fresh [] default would invalidate the planned memo on every render. */
 const NO_ACCOMMODATIONS: PlannedAccommodation[] = []
 
+/** What the pool shows: everything, what is not on a day yet, what is, or the tracks. */
+export type PlacesFilter = 'all' | 'unplanned' | 'planned' | 'tracks'
+
 export interface PlacesSidebarProps {
   tripId: number
   places: Place[]
@@ -67,7 +71,7 @@ export interface PlacesSidebarProps {
 export function usePlacesSidebar(props: PlacesSidebarProps) {
   const {
     tripId, places, assignments, selectedDayId, days, accommodations = NO_ACCOMMODATIONS,
-    pushUndo, initialScrollTop, onScrollTopChange,
+    pushUndo, initialScrollTop, onScrollTopChange, onEditPlace, onAssignToDay, onDeletePlace,
   } = props
   const { t } = useTranslation()
   const toast = useToast()
@@ -234,10 +238,12 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     setCategoryFilters(next)
   }
   const [dayPickerPlace, setDayPickerPlace] = useState<Place | null>(null)
-  const [catDropOpen, setCatDropOpen] = useState(false)
-  const [starDropOpen, setStarDropOpen] = useState(false)
+  // One panel holds what used to be three dropdowns (show, categories, rating).
   const [mobileShowDays, setMobileShowDays] = useState(false)
 
+  /** A new "show" choice starts a fresh selection, as picking it from the old select did. */
+  const pickFilter = (next: PlacesFilter) => { setFilter(next); setSelectedIds(new Set()) }
+
   // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
   const hasTracks = useMemo(() => places.some(p => p.route_geometry), [places])
   useEffect(() => { if (filter === 'tracks' && !hasTracks) setFilter('all') }, [hasTracks, filter])
@@ -285,6 +291,35 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     return list
   }, [places, filter, categoryFilters, search, plannedIds, plannedFilterIds, ratingFilter])
 
+  /**
+   * How many places each "show" choice would leave, under the category and search
+   * filters but not the rating floor. While a day is open "planned" counts that day's
+   * plan, the same set the list and the map show: counting the whole trip is what made
+   * the choice read 55 beside five pins, with nothing to say the two answered
+   * different questions.
+   */
+  const filterCounts = useMemo(() => {
+    const needle = search.toLowerCase()
+    const base = places.filter(p => {
+      if (categoryFilters.size > 0) {
+        if (p.category_id == null) {
+          if (!categoryFilters.has('uncategorized')) return false
+        } else if (!categoryFilters.has(String(p.category_id))) return false
+      }
+      if (search && !p.name.toLowerCase().includes(needle) &&
+          !(p.address || '').toLowerCase().includes(needle)) return false
+      return true
+    })
+    return {
+      all: base.length,
+      unplanned: base.filter(p => !plannedIds.has(p.id)).length,
+      planned: base.filter(p => plannedFilterIds.has(p.id)).length,
+      tracks: base.filter(p => p.route_geometry).length,
+    } satisfies Record<PlacesFilter, number>
+  }, [places, categoryFilters, search, plannedIds, plannedFilterIds])
+
+  /** The filters narrowing the list besides the search box, for the badge on the filter button. */
+
   const registerPlaceRow = useCallback((placeId: number, element: HTMLDivElement | null) => {
     if (element) {
       placeRowRefs.current.set(placeId, element)
@@ -326,19 +361,30 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
 
   const isAssignedToSelectedDay = (placeId) => inDaySet.has(placeId)
 
-  const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
-    const selDayId = selectedDayIdRef.current
+  /**
+   * A row's actions, one list for both ways in: the right-click menu and the row's
+   * "…" button. `dayId` is the day "+ Day" puts the place on.
+   */
+  const placeMenuItems = useCallback((place: Place, dayId: number | null): MenuEntry[] => {
     const googleMapsUrl = getGoogleMapsUrlForPlace(place)
-    ctxMenu.open(e, [
-      canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => props.onEditPlace(place) },
-      selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => props.onAssignToDay(place.id, selDayId) },
-      safeHttpUrl(place.website) && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(safeHttpUrl(place.website)!, '_blank', 'noopener,noreferrer') },
-      googleMapsUrl && { label: t('inspector.google'), icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
+    const website = safeHttpUrl(place.website)
+    const entries: Array<MenuEntry | false> = [
+      canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place) },
+      !!dayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => onAssignToDay(place.id, dayId) },
+      !!website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(website, '_blank', 'noopener,noreferrer') },
+      !!googleMapsUrl && { label: t('inspector.google'), icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
       collectionsEnabled && { label: t('inspector.saveToCollection'), icon: Bookmark, onClick: () => useSaveToCollectionStore.getState().open(placeToSaveTarget(place)) },
       { divider: true },
-      canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => props.onDeletePlace(place.id) },
-    ])
-  }, [ctxMenu.open, canEditPlaces, collectionsEnabled, t, props.onEditPlace, props.onAssignToDay, props.onDeletePlace])
+      canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+    ]
+    return entries.filter((entry): entry is MenuEntry => entry !== false)
+  }, [canEditPlaces, collectionsEnabled, t, onEditPlace, onAssignToDay, onDeletePlace])
+
+  // The day is read when the menu opens, so it stays stable across day switches.
+  const openCtxMenu = ctxMenu.open
+  const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
+    openCtxMenu(e, placeMenuItems(place, selectedDayIdRef.current))
+  }, [openCtxMenu, placeMenuItems])
 
   return {
     ...props,
@@ -350,16 +396,17 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     listImportLoading, listImportProvider, setListImportProvider,
     listImportEnrich, setListImportEnrich, canEnrichImport,
     availableListImportProviders, hasMultipleListImportProviders, handleListImport,
-    search, setSearch, filter, setFilter, categoryFilters, setCategoryFilters,
+    search, setSearch, filter, setFilter, pickFilter, filterCounts,
+    categoryFilters, setCategoryFilters,
     ratingFilter, setRatingFilter,
-    starDropOpen, setStarDropOpen,
     selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,
     categoryPickerOpen, setCategoryPickerOpen,
     saveToListOpen, setSaveToListOpen, collectionsEnabled, tripId,
     markSelectionVisited, markVisitedBusy,
     exitSelectMode, toggleSelected, toggleCategoryFilter, dayPickerPlace, setDayPickerPlace,
-    catDropOpen, setCatDropOpen, mobileShowDays, setMobileShowDays,
-    hasTracks, plannedIds, plannedFilterIds, dayScoped, filtered, registerPlaceRow, isAssignedToSelectedDay, inDaySet, openContextMenu,
+    mobileShowDays, setMobileShowDays,
+    hasTracks, plannedIds, plannedFilterIds, dayScoped, filtered, registerPlaceRow, isAssignedToSelectedDay, inDaySet,
+    openContextMenu, placeMenuItems,
   }
 }
 
diff --git a/client/src/components/Plugins/PluginContributions.tsx b/client/src/components/Plugins/PluginContributions.tsx
index bbc9a1928..a1d3cafc3 100644
--- a/client/src/components/Plugins/PluginContributions.tsx
+++ b/client/src/components/Plugins/PluginContributions.tsx
@@ -101,7 +101,6 @@ export function PluginActions({ items, tripId, className }: { items: ViewContrib
         <button type="button"
           key={a.pluginId + a.id}
           onClick={(e) => run(a, e)}
-          title={a.label}
           className={className ?? 'px-2 h-7 inline-flex items-center rounded-lg border border-edge bg-surface-card text-xs text-content-muted hover:text-content hover:border-content-faint transition-colors'}
         >
           {a.label}
diff --git a/client/src/components/Roadtrip/RoadtripModeSwitch.tsx b/client/src/components/Roadtrip/RoadtripModeSwitch.tsx
index 555bd49c4..68756f317 100644
--- a/client/src/components/Roadtrip/RoadtripModeSwitch.tsx
+++ b/client/src/components/Roadtrip/RoadtripModeSwitch.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { CalendarDays, Route } from 'lucide-react'
 import { useTranslation } from '../../i18n/TranslationContext'
+import { NEUTRAL_TINT } from '../shared/DialogShell'
 
 interface RoadtripModeSwitchProps {
   active: boolean
@@ -10,7 +11,8 @@ interface RoadtripModeSwitchProps {
 /**
  * Switches the plan view's left rail between the day plan and the road trip reading of
  * the same trip. Only rendered while the road trip addon is on, so a trip that isn't
- * driven anywhere never grows a control it has no use for.
+ * driven anywhere never grows a control it has no use for. It opens the rail's tinted
+ * head band, so with the day plan's tools below it the two read as one band.
  */
 export default function RoadtripModeSwitch({ active, onChange }: RoadtripModeSwitchProps): React.ReactElement {
   const { t } = useTranslation()
@@ -19,10 +21,11 @@ export default function RoadtripModeSwitch({ active, onChange }: RoadtripModeSwi
     [true, t('roadtrip.mode.roadtrip'), Route],
   ]
   return (
+    <div className="flex-none px-3 pb-1 pt-3" style={{ background: NEUTRAL_TINT }}>
     <div
       role="tablist"
       aria-label={t('roadtrip.mode.label')}
-      className="mx-3.5 mb-0 mt-3 flex gap-1 rounded-xl border border-edge-faint bg-surface-tertiary p-1"
+      className="flex gap-1 rounded-xl border border-edge-faint bg-surface-tertiary p-1"
     >
       {options.map(([value, label, Icon]) => {
         const selected = active === value
@@ -48,5 +51,6 @@ export default function RoadtripModeSwitch({ active, onChange }: RoadtripModeSwi
         )
       })}
     </div>
+    </div>
   )
 }
diff --git a/client/src/components/Roadtrip/ServiceStopSection.test.tsx b/client/src/components/Roadtrip/ServiceStopSection.test.tsx
index 801fc1f9a..7b7db172f 100644
--- a/client/src/components/Roadtrip/ServiceStopSection.test.tsx
+++ b/client/src/components/Roadtrip/ServiceStopSection.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { describe, it, expect, vi } from 'vitest'
-import { fireEvent, render, screen } from '../../../tests/helpers/render'
+import { fireEvent, render, screen, within } from '../../../tests/helpers/render'
 import ServiceStopSection from './ServiceStopSection'
 import type { ServiceStopMode } from './manualStop'
 
 /**
- * FE-SERVICESTOP-011..016, 022..024: the place form, asked for a stop on a drive.
+ * FE-SERVICESTOP-011..016, 022..026: the place form, asked for a stop on a drive.
  *
  * What the section itself owes the reader: the two questions a service stop answers,
  * the leg it will land on preselected from where the place is, how far off that leg the
@@ -88,9 +88,9 @@ describe('ServiceStopSection', () => {
     expect(screen.getByText('Add between')).toBeInTheDocument()
     // Each row names only the two stops it sits between: the word the caption carries
     // does not need repeating down the list.
-    const trigger = screen.getByRole('button', { name: /Berlin · Dresden/ })
+    const trigger = screen.getByRole('button', { name: /Berlin\s+Dresden/ })
     fireEvent.click(trigger)
-    fireEvent.click(screen.getByText(/Bremen · Berlin/))
+    fireEvent.click(screen.getByText(/Bremen\s+Berlin/))
 
     expect(props.onLeg).toHaveBeenCalledWith('5:1')
   })
@@ -100,7 +100,7 @@ describe('ServiceStopSection', () => {
 
     expect(screen.getByText(/check which leg it belongs on/)).toBeInTheDocument()
     // Still a leg to land on: the note is the reason to change it, not a refusal.
-    expect(screen.getByRole('button', { name: /Bremen · Berlin/ })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Bremen\s+Berlin/ })).toBeInTheDocument()
   })
 
   it('FE-SERVICESTOP-016: with nothing routed it says which day it will be added to', () => {
@@ -116,7 +116,7 @@ describe('ServiceStopSection', () => {
 
     expect(screen.getByTestId('service-stop-needs-point')).toBeInTheDocument()
     expect(screen.queryByText('Add between')).toBeNull()
-    expect(screen.queryByRole('button', { name: /Hamburg · Bremen/ })).toBeNull()
+    expect(screen.queryByRole('button', { name: /Hamburg\s+Bremen/ })).toBeNull()
   })
 
   it('FE-SERVICESTOP-023: every leg says how far off it the place lies, nearest first', () => {
@@ -139,9 +139,9 @@ describe('ServiceStopSection', () => {
 
     // The nearest stretch is the one on offer, and it says why it is: the trigger shows
     // the preselected row, distance and all.
-    expect(screen.getByRole('button', { name: /Bremen · Berlin · 11\.1 km off the route/ })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Bremen\s+Berlin\s+11\.1 km off the route/ })).toBeInTheDocument()
 
-    fireEvent.click(screen.getByRole('button', { name: /Bremen · Berlin/ }))
+    fireEvent.click(screen.getByRole('button', { name: /Bremen\s+Berlin/ }))
     // The trigger repeats the preselected row, so the menu itself starts one along.
     const rows = screen.getAllByRole('button')
       .map(b => b.textContent ?? '')
@@ -149,8 +149,8 @@ describe('ServiceStopSection', () => {
       .slice(1)
     // Nearest first, so the preselected one is visibly the nearest and an override is an
     // informed choice rather than a guess.
-    expect(rows[0]).toMatch(/Bremen · Berlin · 11\.1 km/)
-    expect(rows[1]).toMatch(/Hamburg · Bremen · 100\.2 km/)
+    expect(rows[0]).toMatch(/Bremen\s+Berlin\s+11\.1 km/)
+    expect(rows[1]).toMatch(/Hamburg\s+Bremen\s+100\.2 km/)
   })
 
   it('FE-SERVICESTOP-024: the day the panel is on is offered even once the others have routed', () => {
@@ -161,9 +161,33 @@ describe('ServiceStopSection', () => {
       mode: mode({ appendDay: { dayId: 7, dayNumber: 3, position: 2 } }),
     })
 
-    fireEvent.click(screen.getByRole('button', { name: /Hamburg · Bremen/ }))
+    fireEvent.click(screen.getByRole('button', { name: /Hamburg\s+Bremen/ }))
     fireEvent.click(screen.getByText(/Day 3, as stop 3/))
 
     expect(props.onLeg).toHaveBeenCalledWith('7:end')
   })
+
+  it('FE-SERVICESTOP-025: each caption names what it is over, and no row is held apart by a dot', () => {
+    draw({ lat: 51.05, lng: 13.7, mode: mode({ targetFor: () => ({ dayId: 6, position: 1, offRouteKm: 0.4 }) }) })
+
+    const kinds = screen.getByRole('group', { name: 'Kind of stop' })
+    expect(within(kinds).getByRole('button', { name: 'Fuel' })).toBeInTheDocument()
+    const stay = screen.getByRole('group', { name: 'Time at this stop' })
+    expect(within(stay).getByRole('button', { name: /45 min/ })).toBeInTheDocument()
+    // The leg picker keeps the chosen stretch as its own name; the caption names the group.
+    const legs = screen.getByRole('group', { name: 'Add between' })
+    const trigger = within(legs).getByRole('button', { name: /Berlin\s+Dresden/ })
+    expect(trigger.textContent).not.toContain('\u00b7')
+    fireEvent.click(trigger)
+    for (const row of screen.getAllByText(/Bremen\s+Berlin/)) expect(row.textContent).not.toContain('\u00b7')
+  })
+
+  it('FE-SERVICESTOP-026: the pills not chosen are white, as on the rest of the place form', () => {
+    draw()
+
+    expect(screen.getByRole('button', { name: 'Charging' })).toHaveClass('bg-surface-card', 'ring-edge-faint')
+    expect(screen.getByRole('button', { name: /45 min/ })).toHaveClass('bg-surface-card', 'ring-edge-faint')
+    // The chosen one keeps the accent fill.
+    expect(screen.getByRole('button', { name: 'Fuel' })).toHaveClass('bg-accent')
+  })
 })
diff --git a/client/src/components/Roadtrip/ServiceStopSection.tsx b/client/src/components/Roadtrip/ServiceStopSection.tsx
index c3dfa5d9b..925c9128e 100644
--- a/client/src/components/Roadtrip/ServiceStopSection.tsx
+++ b/client/src/components/Roadtrip/ServiceStopSection.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useId, useMemo } from 'react'
 import CustomSelect from '../shared/CustomSelect'
 import { useTranslation } from '../../i18n/TranslationContext'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -33,12 +33,14 @@ const ROW = 'flex flex-wrap gap-1.5'
 /**
  * What holds the pieces of one option apart.
  *
- * A separator rather than a sentence, and deliberately not a word: the caption above
- * already says these are the stretches to add between, so a row only has to name the two
- * stops and how far off them the place lies. It also reads the same way in a language
- * written right to left, which an arrow would not.
+ * Space rather than a sentence, and deliberately not a word or a glyph: the caption
+ * above already says these are the stretches to add between, so a row only has to name
+ * the two stops and how far off them the place lies. It also reads the same way in a
+ * language written right to left, which an arrow would not. An em space, because an
+ * option label is plain text and a single space would run a stop's name into the next
+ * one's.
  */
-const SEP = ' · '
+const GAP = ' '
 
 interface ServiceStopSectionProps {
   mode: ServiceStopMode
@@ -62,6 +64,9 @@ export default function ServiceStopSection({
   const { t } = useTranslation()
   const distanceUnit = useSettingsStore(s => s.settings.distance_unit)
   const choice = useMemo(() => serviceStopChoice(mode, lat, lng, leg), [mode, lat, lng, leg])
+  const kindId = useId()
+  const stayId = useId()
+  const legId = useId()
 
   /**
    * The stretches on offer, each naming what it is and how far the place lies from it.
@@ -73,11 +78,11 @@ export default function ServiceStopSection({
   const options = useMemo(() => [
     ...choice.legs.map(item => ({
       value: item.value,
-      label: item.offRouteKm === null
-        ? `${item.from}${SEP}${item.to}`
-        : `${item.from}${SEP}${item.to}${SEP}${t('roadtrip.poi.offRoute', {
-            distance: formatDistance(item.offRouteKm, distanceUnit),
-          })}`,
+      label: [
+        item.from,
+        item.to,
+        item.offRouteKm === null ? null : t('roadtrip.poi.offRoute', { distance: formatDistance(item.offRouteKm, distanceUnit) }),
+      ].filter(Boolean).join(GAP),
       badge: t('roadtrip.day', { number: item.dayNumber }),
     })),
     ...(choice.end
@@ -93,17 +98,19 @@ export default function ServiceStopSection({
   return (
     <div className="space-y-3">
       <div>
-        <label className={LABEL}>{t('roadtrip.stop.kind')}</label>
+        <label id={kindId} className={LABEL}>{t('roadtrip.stop.kind')}</label>
         <StopKindChips
           value={stopType}
           onPick={(kind, wasChosen) => { if (!wasChosen) onStopType(kind) }}
           className={ROW}
+          labelledBy={kindId}
+          white
         />
       </div>
 
       <div>
-        <label className={LABEL}>{t('roadtrip.stop.stay')}</label>
-        <StopStayChips value={minutes} onPick={onMinutes} className={ROW} />
+        <label id={stayId} className={LABEL}>{t('roadtrip.stop.stay')}</label>
+        <StopStayChips value={minutes} onPick={onMinutes} className={ROW} labelledBy={stayId} white />
       </div>
 
       {/* Where it goes. Preselected from the projection, and changeable.
@@ -115,8 +122,11 @@ export default function ServiceStopSection({
           {t('roadtrip.poi.manualNoCoords')}
         </p>
       ) : choice.legs.length > 0 ? (
-        <div>
-          <label className={LABEL}>{t('roadtrip.poi.addBetween')}</label>
+        // A group named by the caption rather than a label pointing at the trigger: a
+        // label would replace the trigger's name, which is the stretch chosen, and a
+        // click on it would open the menu.
+        <div role="group" aria-labelledby={legId}>
+          <label id={legId} className={LABEL}>{t('roadtrip.poi.addBetween')}</label>
           <CustomSelect
             value={choice.legValue}
             onChange={value => onLeg(String(value))}
diff --git a/client/src/components/Roadtrip/StopChips.tsx b/client/src/components/Roadtrip/StopChips.tsx
index a44e0907b..0ab10e196 100644
--- a/client/src/components/Roadtrip/StopChips.tsx
+++ b/client/src/components/Roadtrip/StopChips.tsx
@@ -21,19 +21,32 @@ const DWELL_CHOICES = [5, 10, 20, 30, 45, 60]
 
 const CHOSEN = 'border-transparent bg-accent font-semibold text-accent-text'
 const UNCHOSEN = 'border-edge text-content-secondary hover:border-content-faint hover:text-content'
+/** Unchosen on a grey panel: a white pill on a hairline, like every other pill there. */
+const UNCHOSEN_WHITE = 'border-transparent bg-surface-card text-content-secondary shadow-sm ring-1 ring-edge-faint hover:text-content'
+
+/** What both rows take besides their value. */
+interface RowOptions {
+  className?: string
+  /** The id of the caption over the row, which then names it as a group. */
+  labelledBy?: string
+  /** Unchosen pills white, for a row that sits on a grey panel (the place form's). */
+  white?: boolean
+}
+
+const groupProps = (labelledBy?: string) => (labelledBy ? { role: 'group', 'aria-labelledby': labelledBy } : {})
 
 /** The row itself. Overridable so a caller whose own label already spaces it can say so. */
 const ROW = 'mt-1.5 flex flex-wrap gap-1.5'
 
-export function StopKindChips({ value, onPick, className = ROW }: {
+export function StopKindChips({ value, onPick, className = ROW, labelledBy, white = false }: RowOptions & {
   value: RoadtripStopType | null
   /** Called with the kind clicked, including the one already chosen. */
   onPick: (kind: RoadtripStopType, wasChosen: boolean) => void
-  className?: string
 }): React.ReactElement {
   const { t } = useTranslation()
+  const unchosen = white ? UNCHOSEN_WHITE : UNCHOSEN
   return (
-    <div className={className}>
+    <div className={className} {...groupProps(labelledBy)}>
       {STOP_KINDS.map(({ key, labelKey, Icon }) => {
         const on = value === key
         return (
@@ -43,7 +56,7 @@ export function StopKindChips({ value, onPick, className = ROW }: {
             aria-pressed={on}
             onClick={() => onPick(key, on)}
             className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-caption transition-colors ${
-              on ? CHOSEN : UNCHOSEN
+              on ? CHOSEN : unchosen
             }`}
           >
             <Icon size={12} aria-hidden />
@@ -55,13 +68,13 @@ export function StopKindChips({ value, onPick, className = ROW }: {
   )
 }
 
-export function StopStayChips({ value, onPick, className = ROW }: {
+export function StopStayChips({ value, onPick, className = ROW, labelledBy, white = false }: RowOptions & {
   value: number
   onPick: (minutes: number) => void
-  className?: string
 }): React.ReactElement {
+  const unchosen = white ? UNCHOSEN_WHITE : UNCHOSEN
   return (
-    <div className={className}>
+    <div className={className} {...groupProps(labelledBy)}>
       {DWELL_CHOICES.map(minutes => (
         <button
           key={minutes}
@@ -69,7 +82,7 @@ export function StopStayChips({ value, onPick, className = ROW }: {
           aria-pressed={value === minutes}
           onClick={() => onPick(minutes)}
           className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-caption tabular-nums transition-colors ${
-            value === minutes ? CHOSEN : UNCHOSEN
+            value === minutes ? CHOSEN : unchosen
           }`}
         >
           <Hourglass size={11} aria-hidden />
diff --git a/client/src/components/Todo/TodoListPanel.test.tsx b/client/src/components/Todo/TodoListPanel.test.tsx
index 8c70d7c3e..3ee3f1320 100644
--- a/client/src/components/Todo/TodoListPanel.test.tsx
+++ b/client/src/components/Todo/TodoListPanel.test.tsx
@@ -868,7 +868,7 @@ describe('TodoListPanel — new task pane', () => {
 
     await user.type(screen.getByPlaceholderText('Task name'), 'Pack bags');
     await user.type(screen.getByPlaceholderText('Description (optional)'), 'rain gear');
-    await user.click(within(screen.getByRole('region', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
+    await user.click(within(screen.getByRole('dialog', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
     await user.type(await screen.findByPlaceholderText('List name'), 'Prep ');
     await user.keyboard('{Enter}');
     await user.click(screen.getByRole('button', { name: 'P1' }));
@@ -890,7 +890,7 @@ describe('TodoListPanel — new task pane', () => {
     const user = userEvent.setup();
     await openNew();
 
-    await user.click(within(screen.getByRole('region', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
+    await user.click(within(screen.getByRole('dialog', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
     await user.type(await screen.findByPlaceholderText('List name'), 'Prep');
     await user.keyboard('{Escape}');
 
@@ -1122,7 +1122,7 @@ describe('TodoListPanel — remaining paths', () => {
 
     rerender(<TodoListPanel tripId={1} items={[buildTodoItem({ id: 40, name: 'Plan route', checked: 0 })]} addItemSignal={1} />);
     await screen.findByText('Create task');
-    await user.click(within(screen.getByRole('region', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
+    await user.click(within(screen.getByRole('dialog', { name: 'New task' })).getByRole('button', { name: 'Add list' }));
     input = await screen.findByPlaceholderText('List name');
     await user.type(input, 'Prep');
     fireEvent.click(screen.getByRole('button', { name: 'Add' }));
diff --git a/client/src/components/Todo/TodoListPanel.tsx b/client/src/components/Todo/TodoListPanel.tsx
index fe361b862..f2cef6dd2 100644
--- a/client/src/components/Todo/TodoListPanel.tsx
+++ b/client/src/components/Todo/TodoListPanel.tsx
@@ -1,10 +1,10 @@
-import { Fragment, useState, useEffect, type CSSProperties } from 'react'
+import { Fragment, useId, useState, useEffect, type CSSProperties } from 'react'
 import { createPortal } from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
-import { Check, Plus, Flag, X, Calendar, User, AlertCircle, Inbox, CheckCheck, Trash2 } from 'lucide-react'
+import { Check, Plus, Flag, X, Calendar, User, AlertCircle, Inbox, CheckCheck, Trash2, ListPlus, ListTodo } from 'lucide-react'
 import type { TodoItem } from '../../types'
 
 import { katColor, taskInputStyle, type FilterType, type Member, type TaskFieldValues } from './todoListModel'
@@ -14,6 +14,7 @@ import TodoTaskFields from './TodoTaskFields'
 import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import EmptyState from '../shared/EmptyState'
 import NameDialog from '../shared/NameDialog'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from '../shared/DialogShell'
 
 /** The card the list and the detail pane sit in, the packing list's category card. */
 const CARD: CSSProperties = {
@@ -265,17 +266,24 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
           </div>
         </div>
       )}
-      {isAddingNew && !selectedItem && createPortal(
+      {isAddingNew && !selectedItem && !isMobile && (
+        <NewTaskPane
+          variant="dialog"
+          tripId={tripId}
+          categories={categories}
+          members={members}
+          defaultCategory={typeof filter === 'string' && categories.includes(filter) ? filter : null}
+          onCreated={(id) => { setIsAddingNew(false); setSelectedId(id) }}
+          onClose={() => setIsAddingNew(false)}
+        />
+      )}
+      {isAddingNew && !selectedItem && isMobile && createPortal(
         <div role="presentation" onClick={e => { if (e.target === e.currentTarget) setIsAddingNew(false) }}
           className="trek-modal-backdrop"
-          style={isMobile
-            ? { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 'var(--bottom-nav-h)' }
-            : { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15,23,42,0.5)', display: 'flex', justifyContent: 'center', alignItems: 'flex-start', paddingTop: 'calc(var(--nav-h) + 60px)', paddingBottom: 40 }}>
-          <div style={isMobile
-            ? { width: '100%', maxHeight: '85vh', display: 'flex' }
-            : { width: 'min(520px, 92vw)', maxHeight: 'calc(100vh - var(--nav-h) - 120px)', display: 'flex', boxShadow: '0 20px 60px rgba(0,0,0,0.25)', borderRadius: 16 }}>
+          style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.4)', display: 'flex', justifyContent: 'center', alignItems: 'flex-end', paddingBottom: 'var(--bottom-nav-h)' }}>
+          <div style={{ width: '100%', maxHeight: '85vh', display: 'flex' }}>
             <NewTaskPane
-              variant={isMobile ? 'sheet' : 'dialog'}
+              variant="sheet"
               tripId={tripId}
               categories={categories}
               members={members}
@@ -291,6 +299,7 @@ export default function TodoListPanel({ tripId, items, addItemSignal = 0 }: { tr
       <NameDialog
         open={canEdit && addingCategory}
         title={t('todo.addCategory')}
+        icon={ListPlus}
         placeholder={t('todo.newCategory')}
         confirmLabel={t('common.add')}
         value={newCategoryName}
@@ -465,6 +474,11 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
     setSaving(false)
   }
 
+  if (variant === 'dialog') return (
+    <NewTaskDialog name={name} onName={setName} fields={fields} onFields={patch => setFields(f => ({ ...f, ...patch }))}
+      categories={categories} members={members} saving={saving} onCreate={create} onClose={onClose} />
+  )
+
   return (
     <div role="region" aria-label={t('todo.newItem')} style={paneFrame(variant)}>
       <PaneHead title={t('todo.newItem')} onClose={onClose} />
@@ -485,3 +499,48 @@ function NewTaskPane({ tripId, categories, members, defaultCategory, onCreated,
     </div>
   )
 }
+
+/** The new task on the desktop: named in the head band, its fields below, created from the footer. */
+function NewTaskDialog({ name, onName, fields, onFields, categories, members, saving, onCreate, onClose }: {
+  name: string; onName: (name: string) => void
+  fields: TaskFieldValues; onFields: (patch: Partial<TaskFieldValues>) => void
+  categories: string[]; members: Member[]
+  saving: boolean; onCreate: () => void; onClose: () => void
+}) {
+  const { t } = useTranslation()
+  const labelId = useId()
+  return (
+    <DialogShell
+      onClose={onClose}
+      labelledBy={labelId}
+      header={(
+        <DialogHeader
+          tile={<DialogTile><ListTodo size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          eyebrow={t('todo.newItem')}
+          titleInput={{
+            value: name,
+            onChange: onName,
+            label: t('todo.newItem'),
+            placeholder: t('todo.namePlaceholder'),
+            autoFocus: true,
+            onKeyDown: e => { if (e.key === 'Enter' && name.trim()) onCreate() },
+          }}
+        />
+      )}
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={onCreate} disabled={!name.trim() || saving}>
+            {saving ? '...' : t('todo.detail.create')}
+          </DialogButton>
+        </DialogFooter>
+      )}
+    >
+      <TodoTaskFields values={fields} onChange={onFields} categories={categories} members={members} variant="dialog" />
+    </DialogShell>
+  )
+}
diff --git a/client/src/components/Todo/TodoTaskFields.tsx b/client/src/components/Todo/TodoTaskFields.tsx
index a80dab5df..0adceeddd 100644
--- a/client/src/components/Todo/TodoTaskFields.tsx
+++ b/client/src/components/Todo/TodoTaskFields.tsx
@@ -1,10 +1,12 @@
 import { useState } from 'react'
-import { Flag, Plus, User } from 'lucide-react'
+import { Flag, ListPlus, Plus, User } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { avatarSrc } from '../../utils/avatarSrc'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import NameDialog from '../shared/NameDialog'
+import { Tooltip } from '../shared/Tooltip'
+import { GRID_2, LABEL, TEXTAREA } from '../shared/dialogParts'
 import { PRIO_CONFIG, katColor, taskInputStyle, taskLabelClass, type Member, type TaskFieldValues } from './todoListModel'
 
 interface TodoTaskFieldsProps {
@@ -13,6 +15,8 @@ interface TodoTaskFieldsProps {
   categories: string[]
   members: Member[]
   canEdit?: boolean
+  /** 'dialog' draws the fields like the planner's dialogs: small caps labels, list and due date side by side. */
+  variant?: 'pane' | 'dialog'
 }
 
 /**
@@ -21,11 +25,13 @@ interface TodoTaskFieldsProps {
  * segmented track, the list (a new one is named in a dialog), the due date and
  * who does it.
  */
-export default function TodoTaskFields({ values, onChange, categories, members, canEdit = true }: TodoTaskFieldsProps) {
+export default function TodoTaskFields({ values, onChange, categories, members, canEdit = true, variant = 'pane' }: TodoTaskFieldsProps) {
   const { t } = useTranslation()
   const [namingList, setNamingList] = useState(false)
   const [listName, setListName] = useState('')
   const { desc, priority, category, dueDate, assignedUserId } = values
+  const dialog = variant === 'dialog'
+  const labelClass = dialog ? LABEL : taskLabelClass
 
   const confirmList = () => {
     const name = listName.trim()
@@ -35,17 +41,65 @@ export default function TodoTaskFields({ values, onChange, categories, members,
     setListName('')
   }
 
+  const listField = (
+    <div>
+      <label className={labelClass}>{t('todo.detail.category')}</label>
+      <div style={{ display: 'flex', gap: 6 }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <CustomSelect
+            value={category}
+            onChange={v => onChange({ category: String(v) })}
+            options={[
+              { value: '', label: t('todo.noCategory') },
+              ...categories.map(c => ({
+                value: c, label: c,
+                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+              })),
+              ...(category && !categories.includes(category) ? [{
+                value: category, label: `${category} (${t('todo.newCategoryLabel')})`,
+                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(category, categories), display: 'inline-block' }} />,
+              }] : []),
+            ]}
+            placeholder={t('todo.noCategory')}
+            size="sm"
+            disabled={!canEdit}
+          />
+        </div>
+        {canEdit && (
+          <Tooltip label={t('todo.addCategory')}>
+            <button type="button" onClick={() => setNamingList(true)} aria-label={t('todo.addCategory')}
+              style={{ width: 36, flexShrink: 0, background: 'var(--bg-tertiary)', border: 'none', borderRadius: 10, cursor: 'pointer', color: 'var(--text-muted)', display: 'grid', placeItems: 'center' }}>
+              <Plus size={14} />
+            </button>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  )
+
+  const dueField = (
+    <div>
+      <label className={labelClass}>{t('todo.detail.dueDate')}</label>
+      <CustomDatePicker value={dueDate} onChange={v => onChange({ dueDate: v })} />
+    </div>
+  )
+
   return (
     <>
       <div>
-        <label className={taskLabelClass}>{t('todo.detail.description')}</label>
-        <textarea value={desc} onChange={e => onChange({ desc: e.target.value })} disabled={!canEdit} rows={4}
-          placeholder={t('todo.descriptionPlaceholder')}
-          style={{ ...taskInputStyle, resize: 'vertical', minHeight: 84 }} />
+        <label className={labelClass}>{t('todo.detail.description')}</label>
+        {dialog ? (
+          <textarea value={desc} onChange={e => onChange({ desc: e.target.value })} disabled={!canEdit} rows={3}
+            placeholder={t('todo.descriptionPlaceholder')} className={TEXTAREA} />
+        ) : (
+          <textarea value={desc} onChange={e => onChange({ desc: e.target.value })} disabled={!canEdit} rows={4}
+            placeholder={t('todo.descriptionPlaceholder')}
+            style={{ ...taskInputStyle, resize: 'vertical', minHeight: 84 }} />
+        )}
       </div>
 
       <div>
-        <label className={taskLabelClass}>{t('todo.detail.priority')}</label>
+        <label className={labelClass}>{t('todo.detail.priority')}</label>
         <div style={{ display: 'flex', gap: 2, padding: 3, borderRadius: 11, background: 'var(--bg-tertiary)' }}>
           {[0, 1, 2, 3].map(p => {
             const cfg = PRIO_CONFIG[p]
@@ -68,45 +122,10 @@ export default function TodoTaskFields({ values, onChange, categories, members,
         </div>
       </div>
 
-      <div>
-        <label className={taskLabelClass}>{t('todo.detail.category')}</label>
-        <div style={{ display: 'flex', gap: 6 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <CustomSelect
-              value={category}
-              onChange={v => onChange({ category: String(v) })}
-              options={[
-                { value: '', label: t('todo.noCategory') },
-                ...categories.map(c => ({
-                  value: c, label: c,
-                  icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-                })),
-                ...(category && !categories.includes(category) ? [{
-                  value: category, label: `${category} (${t('todo.newCategoryLabel')})`,
-                  icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(category, categories), display: 'inline-block' }} />,
-                }] : []),
-              ]}
-              placeholder={t('todo.noCategory')}
-              size="sm"
-              disabled={!canEdit}
-            />
-          </div>
-          {canEdit && (
-            <button type="button" onClick={() => setNamingList(true)} title={t('todo.addCategory')} aria-label={t('todo.addCategory')}
-              style={{ width: 36, flexShrink: 0, background: 'var(--bg-tertiary)', border: 'none', borderRadius: 10, cursor: 'pointer', color: 'var(--text-muted)', display: 'grid', placeItems: 'center' }}>
-              <Plus size={14} />
-            </button>
-          )}
-        </div>
-      </div>
+      {dialog ? <div className={GRID_2}>{listField}{dueField}</div> : <>{listField}{dueField}</>}
 
       <div>
-        <label className={taskLabelClass}>{t('todo.detail.dueDate')}</label>
-        <CustomDatePicker value={dueDate} onChange={v => onChange({ dueDate: v })} />
-      </div>
-
-      <div>
-        <label className={taskLabelClass}>{t('todo.detail.assignedTo')}</label>
+        <label className={labelClass}>{t('todo.detail.assignedTo')}</label>
         <CustomSelect
           value={String(assignedUserId ?? '')}
           onChange={v => onChange({ assignedUserId: v ? Number(v) : null })}
@@ -133,6 +152,7 @@ export default function TodoTaskFields({ values, onChange, categories, members,
       <NameDialog
         open={namingList}
         title={t('todo.addCategory')}
+        icon={ListPlus}
         placeholder={t('todo.newCategory')}
         confirmLabel={t('common.add')}
         value={listName}
diff --git a/client/src/components/Weather/WeatherWidget.tsx b/client/src/components/Weather/WeatherWidget.tsx
index 4ee413196..f7d399ed8 100644
--- a/client/src/components/Weather/WeatherWidget.tsx
+++ b/client/src/components/Weather/WeatherWidget.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react'
 import { Sun, Cloud, CloudRain, CloudSnow, CloudDrizzle, CloudLightning, Wind } from 'lucide-react'
 import { fetchWeather } from '../../services/weatherQueue'
 import { useSettingsStore } from '../../store/settingsStore'
+import { Tooltip } from '../shared/Tooltip'
 
 const WEATHER_ICON_MAP = {
   Clear: Sun,
@@ -49,11 +50,13 @@ interface WeatherWidgetProps {
   compact?: boolean
   /** Vertical icon-over-temp layout that inherits its color (for the day badge). */
   stacked?: boolean
+  /** Leaves the icon out of the stacked layout, so the badge stays short; the tooltip still names the weather. */
+  hideIcon?: boolean
   /** Name of the place the forecast is anchored to — surfaces as a tooltip (#2167). */
   locationName?: string | null
 }
 
-export default function WeatherWidget({ lat, lng, date, compact = false, stacked = false, locationName = null }: WeatherWidgetProps) {
+export default function WeatherWidget({ lat, lng, date, compact = false, stacked = false, hideIcon = false, locationName = null }: WeatherWidgetProps) {
   const [weather, setWeather] = useState(null)
   const [loading, setLoading] = useState(false)
   const [failed, setFailed] = useState(false)
@@ -144,12 +147,16 @@ export default function WeatherWidget({ lat, lng, date, compact = false, stacked
   const title = locationName || undefined
 
   if (stacked) {
-    return (
-      <div title={title} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, fontSize: 'calc(9.5px * var(--fs-scale-caption, 1))', fontWeight: 600, lineHeight: 1, color: 'inherit', ...fontStyle }}>
-        <WeatherIcon main={weather.main} size={13} />
+    const body = (
+      // Without its icon the reading takes the badge's own type, so it matches the number above it.
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, fontSize: hideIcon ? 'inherit' : 'calc(9.5px * var(--fs-scale-caption, 1))', fontWeight: hideIcon ? 'inherit' : 600, lineHeight: 1, color: 'inherit', ...(hideIcon ? {} : fontStyle) }}>
+        {!hideIcon && <WeatherIcon main={weather.main} size={13} />}
         {temp !== null && <span>{isClimate ? 'Ø' : ''}{temp}°</span>}
       </div>
     )
+    // Without the icon the tooltip carries what the sky does as well as where.
+    const tip = hideIcon ? [weather.description, title].filter(Boolean).join(', ') : title
+    return tip ? <Tooltip label={tip}>{body}</Tooltip> : body
   }
 
   if (compact) {
diff --git a/client/src/components/shared/ConfirmDialog.tsx b/client/src/components/shared/ConfirmDialog.tsx
index 626e8db17..341c36a0c 100644
--- a/client/src/components/shared/ConfirmDialog.tsx
+++ b/client/src/components/shared/ConfirmDialog.tsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useCallback, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { AlertTriangle } from 'lucide-react'
+import { AlertTriangle, HelpCircle } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { useIsPhone } from '../../mobile/useIsPhone'
+import { DialogTile, NEUTRAL_TINT, fs } from './DialogShell'
 
 interface ConfirmDialogProps {
   isOpen: boolean
@@ -38,6 +40,7 @@ export default function ConfirmDialog({
   children,
 }: ConfirmDialogProps) {
   const { t } = useTranslation()
+  const isPhone = useIsPhone()
 
   // Captured and stopped here: the question often opens over another dialog
   // (a Modal) that closes on Escape too, and one key press should only take
@@ -65,48 +68,86 @@ export default function ConfirmDialog({
       style={{ paddingBottom: 'var(--bottom-nav-h)' }}
       onClick={onClose}
     >
-      {/* Capped at the viewport: a long list of what goes along scrolls on its
-          own, and the two buttons below it always stay in reach. */}
-      <div
-        role="presentation"
-        className={`trek-modal-enter flex max-h-[calc(100dvh-2rem-var(--bottom-nav-h,0px))] flex-col rounded-2xl shadow-2xl w-full ${children ? 'max-w-md' : 'max-w-sm'} p-6 bg-surface-card`}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex min-h-0 items-start gap-4 overflow-y-auto overscroll-contain">
-          {danger && (
-            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-danger-soft flex items-center justify-center">
-              <AlertTriangle className="w-5 h-5 text-danger" />
+      {isPhone ? (
+        <>
+        {/* Capped at the viewport: a long list of what goes along scrolls on its
+            own, and the two buttons below it always stay in reach. */}
+        <div
+          role="presentation"
+          className={`trek-modal-enter flex max-h-[calc(100dvh-2rem-var(--bottom-nav-h,0px))] flex-col rounded-2xl shadow-2xl w-full ${children ? 'max-w-md' : 'max-w-sm'} p-6 bg-surface-card`}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="flex min-h-0 items-start gap-4 overflow-y-auto overscroll-contain">
+            {danger && (
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-danger-soft flex items-center justify-center">
+                <AlertTriangle className="w-5 h-5 text-danger" />
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <h3 className="text-base font-semibold text-content">
+                {title || t('common.confirm')}
+              </h3>
+              <p className="mt-1 text-sm text-content-secondary">
+                {message}
+              </p>
+              {children}
             </div>
-          )}
-          <div className="flex-1 min-w-0">
-            <h3 className="text-base font-semibold text-content">
-              {title || t('common.confirm')}
-            </h3>
-            <p className="mt-1 text-sm text-content-secondary">
-              {message}
-            </p>
-            {children}
+          </div>
+
+          <div className="flex flex-none justify-end gap-3 mt-6">
+            <button type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-content-secondary border border-edge-secondary"
+            >
+              {cancelLabel || t('common.cancel')}
+            </button>
+            <button type="button"
+              onClick={() => { runConfirm(onConfirm); onClose() }}
+              className={`px-4 py-2 text-sm font-medium rounded-lg transition-opacity hover:opacity-90 ${
+                danger ? 'bg-danger text-white' : 'bg-accent text-accent-text'
+              }`}
+            >
+              {confirmLabel || t('common.delete')}
+            </button>
           </div>
         </div>
-
-        <div className="flex flex-none justify-end gap-3 mt-6">
-          <button type="button"
-            onClick={onClose}
-            className="px-4 py-2 text-sm font-medium rounded-lg transition-colors text-content-secondary border border-edge-secondary"
-          >
-            {cancelLabel || t('common.cancel')}
-          </button>
-          <button type="button"
-            onClick={() => { runConfirm(onConfirm); onClose() }}
-            className={`px-4 py-2 text-sm font-medium rounded-lg transition-opacity hover:opacity-90 ${
-              danger ? 'bg-danger text-white' : 'bg-accent text-accent-text'
-            }`}
-          >
-            {confirmLabel || t('common.delete')}
-          </button>
+        </>
+      ) : (
+        // The desktop draws the question like the planner's dialogs: a head band
+        // with its tile, the message below, the answers in a bar at the foot.
+        <div
+          role="presentation"
+          className={`trek-modal-enter flex max-h-[calc(100dvh-2rem-var(--bottom-nav-h,0px))] w-full flex-col overflow-hidden rounded-[22px] bg-surface-card shadow-2xl ${children ? 'max-w-md' : 'max-w-sm'}`}
+          onClick={e => e.stopPropagation()}
+        >
+          <div className={`flex flex-none items-center gap-3.5 px-6 pb-4 pt-5 ${danger ? 'bg-danger-soft' : ''}`} style={danger ? undefined : { background: NEUTRAL_TINT }}>
+            <DialogTile>
+              {danger
+                ? <AlertTriangle size={20} strokeWidth={1.9} className="text-danger" />
+                : <HelpCircle size={20} strokeWidth={1.9} className="text-content-muted" />}
+            </DialogTile>
+            <h3 className="m-0 min-w-0 flex-1 font-bold tracking-[-0.01em] text-content" style={fs(18, 'subtitle')}>
+              {title || t('common.confirm')}
+            </h3>
+          </div>
+          <div className="flex min-h-0 flex-col gap-3 overflow-y-auto overscroll-contain px-6 py-5">
+            <p className="m-0 text-content-secondary" style={fs(13.5, 'body')}>{message}</p>
+            {children}
+          </div>
+          <div className="flex flex-none items-center justify-end gap-2 border-t border-edge-faint px-6 py-3.5" style={fs(13, 'body')}>
+            <button type="button" onClick={onClose}
+              className="inline-flex items-center rounded-[10px] bg-surface-tertiary px-3.5 py-2 font-medium text-content hover:bg-surface-hover">
+              {cancelLabel || t('common.cancel')}
+            </button>
+            <button type="button"
+              onClick={() => { runConfirm(onConfirm); onClose() }}
+              className={`inline-flex items-center rounded-[10px] px-4 py-2 font-medium hover:opacity-90 ${danger ? 'bg-danger text-white' : 'bg-accent text-accent-text'}`}
+            >
+              {confirmLabel || t('common.delete')}
+            </button>
+          </div>
         </div>
-      </div>
-
+      )}
     </div>,
     document.body
   )
diff --git a/client/src/components/shared/CustomSelect.tsx b/client/src/components/shared/CustomSelect.tsx
index 82932e8b3..873565c1d 100644
--- a/client/src/components/shared/CustomSelect.tsx
+++ b/client/src/components/shared/CustomSelect.tsx
@@ -34,6 +34,8 @@ interface CustomSelectProps {
    * offer a list of identical prefixes.
    */
   menuFit?: 'anchor' | 'content'
+  /** The trigger's id, so a label outside can point at it. */
+  id?: string
 }
 
 /**
@@ -77,6 +79,7 @@ export default function CustomSelect({
   size = 'md',
   disabled = false,
   menuFit = 'anchor',
+  id,
 }: CustomSelectProps) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
@@ -138,6 +141,7 @@ export default function CustomSelect({
     <div ref={ref} style={{ position: 'relative', ...style }}>
       {/* Trigger */}
       <button
+        id={id}
         type="button"
         disabled={disabled}
         onClick={() => { if (!disabled) { setOpen(o => !o); setSearch('') } }}
diff --git a/client/src/components/shared/DialogShell.tsx b/client/src/components/shared/DialogShell.tsx
new file mode 100644
index 000000000..7daae2735
--- /dev/null
+++ b/client/src/components/shared/DialogShell.tsx
@@ -0,0 +1,284 @@
+import { useEffect, useRef, useState, type ButtonHTMLAttributes, type ClipboardEvent, type CSSProperties, type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { Trash2, X } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { lockBodyScroll } from '../../utils/bodyScrollLock'
+import { Tooltip } from './Tooltip'
+
+/** A font size that follows the user's text size setting for its tier. */
+export const fs = (px: number, tier: 'caption' | 'body' | 'subtitle' = 'caption'): CSSProperties => ({ fontSize: `calc(${px}px * var(--fs-scale-${tier}, 1))` })
+
+const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint'
+const BACKDROP = 'trek-modal-backdrop trek-backdrop-enter fixed inset-0 z-[10000] flex justify-center bg-[rgba(15,23,42,0.5)] px-4' // theme-lint-disable: the dim every shared/Modal draws
+const PANEL_WIDTH = { narrow: 'max-w-[520px]', detail: 'max-w-[600px]', editor: 'max-w-[720px]', wide: 'max-w-[960px]', xwide: 'max-w-[1280px]' } as const
+const BODY = 'flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 pb-6 pt-5'
+
+/** The head band of a dialog that belongs to no booking: a faint wash of the accent. */
+export const NEUTRAL_TINT = 'color-mix(in srgb, var(--accent) 7%, transparent)'
+
+export interface DialogShellProps {
+  /** A dialog that stays mounted passes its open state; one mounted only while shown leaves it out. */
+  open?: boolean
+  onClose: () => void
+  /** The id DialogHeader gets as labelId. */
+  labelledBy: string
+  /** 520 px for a single question, 600 px for a detail, 720 px for an editor, 960 px for one in two columns. */
+  width?: keyof typeof PANEL_WIDTH
+  /** 'top' pins the upper edge, so a dialog whose content changes height does not jump. */
+  align?: 'center' | 'top'
+  /** True while a question opened from here is being answered: Escape and the backdrop leave the dialog alone. */
+  blocked?: boolean
+  header: ReactNode
+  footer?: ReactNode
+  /** Makes the scrolling body a form. */
+  onSubmit?: (e: FormEvent<HTMLFormElement>) => void
+  /** The scrolling body; a dialog that is all head and foot leaves it out. */
+  children?: ReactNode
+  /** Replaces the body's padded column, for content that fills the panel (a document preview). */
+  bodyClassName?: string
+  /** A paste anywhere in the panel, head band included (a note takes pasted images from its title too). */
+  onPaste?: (e: ClipboardEvent<HTMLDivElement>) => void
+}
+
+/**
+ * The frame of the planner's dialogs: dimmed backdrop, the rounded panel, a
+ * head band that stays put, a body that scrolls and a bar that stays in reach.
+ */
+export function DialogShell({ open = true, ...frame }: DialogShellProps) {
+  return open ? <DialogFrame {...frame} /> : null
+}
+
+function DialogFrame({ onClose, labelledBy, width = 'detail', align = 'center', blocked = false, header, footer, onSubmit, children, bodyClassName, onPaste }: Omit<DialogShellProps, 'open'>) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const pressedOn = useRef<EventTarget | null>(null)
+  // Read while rendering, before a field inside can take the focus with autoFocus.
+  const [focusedBefore] = useState(() => document.activeElement)
+
+  useEffect(() => {
+    if (blocked) return
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !e.defaultPrevented) onClose() }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [blocked, onClose])
+
+  // The page stays put behind the dialog, and whatever opened it gets the focus back.
+  useEffect(() => {
+    const panel = panelRef.current
+    const focusedInside = !!panel && panel.contains(document.activeElement)
+    const opener = focusedInside ? focusedBefore : document.activeElement
+    const release = lockBodyScroll()
+    if (!focusedInside) panel?.focus()
+    return () => {
+      release()
+      if (opener instanceof HTMLElement) opener.focus()
+    }
+  }, [focusedBefore])
+
+  const bodyClass = bodyClassName ?? BODY
+  const body = children == null ? null : onSubmit
+    ? <form onSubmit={onSubmit} className={bodyClass}>{children}</form>
+    : <div className={bodyClass}>{children}</div>
+
+  return createPortal(
+    <div
+      role="presentation"
+      className={`${BACKDROP} ${align === 'top' ? 'items-start' : 'items-center'}`}
+      style={{ paddingTop: 40, paddingBottom: 'calc(40px + var(--bottom-nav-h, 0px))' }}
+      // Only a press that starts and ends on the backdrop closes: a selection
+      // dragged out of a field must not throw the dialog away.
+      onMouseDown={e => { pressedOn.current = e.target }}
+      onClick={e => {
+        if (!blocked && e.target === e.currentTarget && pressedOn.current === e.currentTarget) onClose()
+        pressedOn.current = null
+      }}
+    >
+      {/* No aria-modal: the pickers inside open their lists in a portal on
+          the body, and a screen reader would hide those along with the page. */}
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-labelledby={labelledBy}
+        tabIndex={-1}
+        onPaste={onPaste}
+        className={`trek-modal-enter flex max-h-full w-full ${PANEL_WIDTH[width]} flex-col overflow-hidden rounded-[22px] bg-surface-card shadow-2xl outline-none`}
+      >
+        {header}
+        {body}
+        {footer}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+/** The raised square on the left of a head band, holding the dialog's icon. */
+export function DialogTile({ children }: { children: ReactNode }) {
+  return <span className="grid h-[46px] w-[46px] flex-none place-items-center rounded-[14px] bg-surface-card shadow-sm">{children}</span>
+}
+
+export interface HeaderTitleInput {
+  value: string
+  onChange: (value: string) => void
+  /** The field's accessible name, e.g. the old "Title *" label. */
+  label: string
+  placeholder?: string
+  autoFocus?: boolean
+  required?: boolean
+  maxLength?: number
+  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void
+  onBlur?: () => void
+}
+
+export interface DialogHeaderProps {
+  /** The raised tile on the left, usually a DialogTile around an icon. */
+  tile: ReactNode
+  /** The band's background: a status tint, or NEUTRAL_TINT. */
+  tint: string
+  /** Same value as the shell's labelledBy. It lands on the eyebrow when there is one, otherwise on the title. */
+  labelId: string
+  onClose: () => void
+  /** A small line above the title; editors keep their dialog title ("Edit transport") here. */
+  eyebrow?: ReactNode
+  /** A title to read. With onTitleClick it becomes a button (a rename). */
+  title?: ReactNode
+  onTitleClick?: () => void
+  titleTooltip?: string
+  /** A title to type into, in place of title. */
+  titleInput?: HeaderTitleInput
+  sub?: ReactNode
+  /** Lets a sentence of a sub (a hint) wrap instead of ending in an ellipsis like a route does. */
+  subWraps?: boolean
+  /** The pill row under the title. */
+  pills?: ReactNode
+}
+
+/** The head band: tile, eyebrow, the title to read or type, a sub line and a row of pills. */
+export function DialogHeader(p: DialogHeaderProps) {
+  const { t } = useTranslation()
+  const titleId = p.eyebrow ? undefined : p.labelId
+  const titleStyle = fs(20, 'subtitle')
+  let title: ReactNode
+  if (p.titleInput) {
+    const f = p.titleInput
+    title = (
+      <input
+        id={titleId}
+        type="text"
+        value={f.value}
+        onChange={e => f.onChange(e.target.value)}
+        onKeyDown={e => {
+          // Enter is spent here: once it has closed the dialog and the focus is
+          // back on the opener, the rest of the key press must not click it again.
+          if (e.key === 'Enter') e.preventDefault()
+          f.onKeyDown?.(e)
+        }}
+        onBlur={f.onBlur}
+        aria-label={f.label}
+        placeholder={f.placeholder}
+        autoFocus={f.autoFocus}
+        required={f.required}
+        maxLength={f.maxLength}
+        className="-mx-2 block w-[calc(100%+16px)] rounded-[10px] border-0 bg-transparent px-2 py-0.5 font-bold tracking-[-0.01em] text-content outline-none placeholder:font-semibold placeholder:text-content-faint hover:bg-surface-card focus:bg-surface-card focus:shadow-sm dark:bg-transparent dark:hover:bg-surface-card dark:focus:bg-surface-card"
+        style={titleStyle}
+      />
+    )
+  } else if (p.onTitleClick) {
+    title = (
+      <Tooltip label={p.titleTooltip ?? ''}>
+        <button id={titleId} type="button" onClick={p.onTitleClick}
+          className="block max-w-full truncate text-left font-bold tracking-[-0.01em] text-content hover:underline hover:decoration-edge" style={titleStyle}>
+          {p.title}
+        </button>
+      </Tooltip>
+    )
+  } else {
+    title = <h2 id={titleId} className="m-0 truncate font-bold tracking-[-0.01em] text-content" style={titleStyle}>{p.title}</h2>
+  }
+
+  return (
+    <header className="flex-none px-6 pb-4 pt-5" style={{ background: p.tint }}>
+      {/* With nothing under it the title sits level with the middle of the tile. */}
+      <div className={`flex gap-3.5 ${p.sub ? 'items-start' : 'items-center'}`}>
+        {p.tile}
+        <div className={`min-w-0 flex-1 ${p.sub ? 'pt-0.5' : ''}`}>
+          {p.eyebrow && (
+            <h2 id={p.labelId} className="m-0 mb-0.5 truncate font-geist font-bold uppercase tracking-[.08em] text-content-muted" style={fs(10)}>
+              {p.eyebrow}
+            </h2>
+          )}
+          {title}
+          {p.sub && <div className={`mt-0.5 font-geist text-content-muted ${p.subWraps ? 'break-words' : 'truncate'}`} style={fs(12.5)}>{p.sub}</div>}
+        </div>
+        <Tooltip label={t('common.close')}>
+          <button type="button" onClick={p.onClose} aria-label={t('common.close')}
+            className="grid h-9 w-9 flex-none place-items-center rounded-full bg-surface-card text-content-muted shadow-sm hover:text-content">
+            <X size={16} strokeWidth={2.2} />
+          </button>
+        </Tooltip>
+      </div>
+      {p.pills && <div className="mt-4 flex flex-wrap items-center gap-2" style={fs(12, 'body')}>{p.pills}</div>}
+    </header>
+  )
+}
+
+/** A pill on the head band's row; wrap text and an icon in a span with it. */
+export const PILL = 'inline-flex flex-none items-center gap-1.5 rounded-full bg-surface-card px-2.5 py-1 font-semibold text-content shadow-sm'
+
+/** A labelled block of the body, with room for an action on the right of its label. */
+export function DialogSection({ label, action, className, children }: { label: ReactNode; action?: ReactNode; className?: string; children: ReactNode }) {
+  return (
+    <section className={className}>
+      <div className="mb-2 flex items-center gap-2">
+        <div className={EYEBROW} style={fs(9.5)}>{label}</div>
+        {action && <span className="ml-auto">{action}</span>}
+      </div>
+      {children}
+    </section>
+  )
+}
+
+/** The bar under the body. Put a FooterSpacer between what sits left and what sits right. */
+export function DialogFooter({ children }: { children: ReactNode }) {
+  return <footer className="flex flex-none items-center gap-2 border-t border-edge-faint px-6 py-3.5">{children}</footer>
+}
+
+export function FooterSpacer() {
+  return <span className="flex-1" />
+}
+
+const BUTTON_LOOK = {
+  secondary: 'inline-flex items-center gap-1.5 rounded-[10px] bg-surface-card px-3.5 py-2 font-medium text-content shadow-sm ring-1 ring-edge-faint hover:bg-surface-secondary disabled:cursor-default disabled:opacity-50',
+  active: 'inline-flex items-center gap-1.5 rounded-[10px] bg-accent px-3.5 py-2 font-medium text-accent-text disabled:cursor-default disabled:opacity-50',
+  primary: 'inline-flex items-center gap-1.5 rounded-[10px] bg-accent px-4 py-2 font-medium text-accent-text hover:opacity-90 disabled:cursor-default disabled:opacity-50',
+} as const
+
+export type DialogButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'style'> & {
+  variant?: 'primary' | 'secondary'
+  /** A secondary button that is switched on (shown on the map) takes the accent fill. */
+  active?: boolean
+  icon?: ReactNode
+}
+
+/** A footer button: white on a hairline, or the accent fill for the one that finishes the dialog. */
+export function DialogButton({ variant = 'secondary', active = false, icon, children, type = 'button', ...rest }: DialogButtonProps) {
+  const look = variant === 'primary' ? BUTTON_LOOK.primary : active ? BUTTON_LOOK.active : BUTTON_LOOK.secondary
+  return (
+    <button {...rest} type={type} className={look} style={fs(13, 'body')}>
+      {icon}{children}
+    </button>
+  )
+}
+
+/** The square delete button of the footer, named by its tooltip. */
+export function DeleteButton({ onClick, label, disabled }: { onClick: () => void; label?: string; disabled?: boolean }) {
+  const { t } = useTranslation()
+  const name = label ?? t('common.delete')
+  return (
+    <Tooltip label={name} placement="top">
+      <button type="button" onClick={onClick} disabled={disabled} aria-label={name}
+        className="grid h-9 w-9 place-items-center rounded-[10px] bg-surface-card text-danger shadow-sm ring-1 ring-edge-faint hover:bg-danger-soft disabled:cursor-default disabled:opacity-50">
+        <Trash2 size={15} strokeWidth={2} />
+      </button>
+    </Tooltip>
+  )
+}
diff --git a/client/src/components/shared/GuestBadge.test.tsx b/client/src/components/shared/GuestBadge.test.tsx
index b5a2f4311..e62a2908a 100644
--- a/client/src/components/shared/GuestBadge.test.tsx
+++ b/client/src/components/shared/GuestBadge.test.tsx
@@ -1,5 +1,6 @@
-// FE-W4GB-001 to FE-W4GB-003
+// FE-W4GB-001 to FE-W4GB-004
 import { describe, it, expect } from 'vitest'
+import { fireEvent } from '@testing-library/react'
 import { render, screen } from '../../../tests/helpers/render'
 import GuestBadge from './GuestBadge'
 
@@ -21,4 +22,12 @@ describe('GuestBadge', () => {
     render(<GuestBadge size="xs" />)
     expect(screen.getByTitle(/without an account/i)).toHaveStyle({ fontSize: 'calc(9px * var(--fs-scale-caption, 1))' })
   })
+
+  it('FE-W4GB-004: with customTooltip the hint moves from the native title into the app tooltip', async () => {
+    render(<GuestBadge customTooltip />)
+    expect(screen.queryByTitle(/without an account/i)).toBeNull()
+
+    fireEvent.mouseEnter(screen.getByText('Guest'))
+    expect(await screen.findByRole('tooltip')).toHaveTextContent(/without an account/i)
+  })
 })
diff --git a/client/src/components/shared/GuestBadge.tsx b/client/src/components/shared/GuestBadge.tsx
index d5f71acb9..06918f3e0 100644
--- a/client/src/components/shared/GuestBadge.tsx
+++ b/client/src/components/shared/GuestBadge.tsx
@@ -1,16 +1,17 @@
 import { UserRound } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { Tooltip } from './Tooltip'
 
 /**
  * Small "Guest" pill (#1362) shown next to a member's name in assignment pickers
  * so it's clear the person is an accountless guest. Purely presentational.
  */
-export default function GuestBadge({ size = 'sm' }: { size?: 'sm' | 'xs' }) {
+export default function GuestBadge({ size = 'sm', customTooltip = false }: { size?: 'sm' | 'xs'; customTooltip?: boolean }) {
   const { t } = useTranslation()
   const fs = size === 'xs' ? 9 : 10
-  return (
+  const badge = (
     <span
-      title={t('members.guestsHint')}
+      title={customTooltip ? undefined : t('members.guestsHint')}
       style={{
         display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0,
         fontSize: `calc(${fs}px * var(--fs-scale-caption, 1))`, fontWeight: 600,
@@ -21,4 +22,5 @@ export default function GuestBadge({ size = 'sm' }: { size?: 'sm' | 'xs' }) {
       <UserRound size={fs - 1} /> {t('members.guest')}
     </span>
   )
+  return customTooltip ? <Tooltip label={t('members.guestsHint')}>{badge}</Tooltip> : badge
 }
diff --git a/client/src/components/shared/NameDialog.tsx b/client/src/components/shared/NameDialog.tsx
index 0c9d04805..8e9610b02 100644
--- a/client/src/components/shared/NameDialog.tsx
+++ b/client/src/components/shared/NameDialog.tsx
@@ -1,5 +1,7 @@
-import Modal from './Modal'
+import { useEffect, useId } from 'react'
+import { PencilLine, type LucideIcon } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { DialogButton, DialogFooter, DialogHeader, DialogShell, DialogTile, FooterSpacer, NEUTRAL_TINT } from './DialogShell'
 
 interface NameDialogProps {
   open: boolean
@@ -10,44 +12,62 @@ interface NameDialogProps {
   onChange: (value: string) => void
   onConfirm: () => void
   onClose: () => void
+  /** The icon on the head band's tile; a pencil unless the caller has a better one. */
+  icon?: LucideIcon
 }
 
 /**
- * The small dialog that asks for one name: a new list, a template to save.
- * It takes the name in the middle of the screen instead of pushing a field
- * into the page; Enter confirms and Esc (from the modal) cancels.
+ * The small dialog that asks for one name: a new list, a template to save, a
+ * booking's title. The name is typed into the head band itself; Enter confirms
+ * and Escape cancels this dialog alone, never one it was opened from.
  */
-export default function NameDialog({ open, title, placeholder, confirmLabel, value, onChange, onConfirm, onClose }: NameDialogProps) {
+export default function NameDialog({ open, title, placeholder, confirmLabel, value, onChange, onConfirm, onClose, icon: Icon = PencilLine }: NameDialogProps) {
   const { t } = useTranslation()
+  const labelId = useId()
   const ready = value.trim().length > 0
+
+  // Caught before any dialog underneath hears it, so only this one closes.
+  useEffect(() => {
+    if (!open) return
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape' || e.defaultPrevented) return
+      e.preventDefault()
+      onClose()
+    }
+    document.addEventListener('keydown', onKey, true)
+    return () => document.removeEventListener('keydown', onKey, true)
+  }, [open, onClose])
+
   return (
-    <Modal
-      isOpen={open}
+    <DialogShell
+      open={open}
       onClose={onClose}
-      title={title}
-      size="sm"
-      footer={(
-        <div className="flex justify-end gap-2">
-          <button type="button" onClick={onClose} className="rounded-lg border border-edge px-4 py-2 text-body text-content-muted hover:bg-surface-hover">
-            {t('common.cancel')}
-          </button>
-          <button type="button" onClick={onConfirm} disabled={!ready}
-            className="rounded-lg bg-accent px-4 py-2 text-body font-medium text-accent-text hover:bg-accent-hover disabled:cursor-default disabled:opacity-40">
-            {confirmLabel}
-          </button>
-        </div>
+      labelledBy={labelId}
+      width="narrow"
+      header={(
+        <DialogHeader
+          tile={<DialogTile><Icon size={20} strokeWidth={1.9} className="text-content-muted" /></DialogTile>}
+          tint={NEUTRAL_TINT}
+          labelId={labelId}
+          onClose={onClose}
+          eyebrow={title}
+          titleInput={{
+            value,
+            onChange,
+            label: title,
+            placeholder,
+            autoFocus: true,
+            onKeyDown: e => { if (e.key === 'Enter' && ready) onConfirm() },
+          }}
+        />
       )}
-    >
-      <input
-        autoFocus
-        type="text"
-        value={value}
-        onChange={e => onChange(e.target.value)}
-        onKeyDown={e => { if (e.key === 'Enter' && ready) onConfirm() }}
-        placeholder={placeholder}
-        aria-label={title}
-        className="w-full rounded-lg border border-edge bg-surface-input px-3 py-2.5 text-body text-content outline-none focus:border-content-muted"
-      />
-    </Modal>
+      footer={(
+        <DialogFooter>
+          <FooterSpacer />
+          <DialogButton onClick={onClose}>{t('common.cancel')}</DialogButton>
+          <DialogButton variant="primary" onClick={onConfirm} disabled={!ready}>{confirmLabel}</DialogButton>
+        </DialogFooter>
+      )}
+    />
   )
 }
diff --git a/client/src/components/shared/NoteFormatToolbar.test.tsx b/client/src/components/shared/NoteFormatToolbar.test.tsx
index 13b3becc8..a9e7fb3d7 100644
--- a/client/src/components/shared/NoteFormatToolbar.test.tsx
+++ b/client/src/components/shared/NoteFormatToolbar.test.tsx
@@ -10,12 +10,12 @@ import NoteFormatToolbar from './NoteFormatToolbar'
  * through a real textarea rather than asserting on a callback in isolation —
  * the selection handling is the part that breaks, and it only exists in the DOM.
  */
-function Harness({ initial = '', onValue }: { initial?: string; onValue?: (v: string) => void }) {
+function Harness({ initial = '', onValue, customTooltips }: { initial?: string; onValue?: (v: string) => void; customTooltips?: boolean }) {
   const ref = useRef<HTMLTextAreaElement | null>(null)
   const [value, setValue] = useState(initial)
   return (
     <>
-      <NoteFormatToolbar textareaRef={ref} onChange={v => { setValue(v); onValue?.(v) }} />
+      <NoteFormatToolbar textareaRef={ref} onChange={v => { setValue(v); onValue?.(v) }} customTooltips={customTooltips} />
       <textarea ref={ref} aria-label="body" value={value} onChange={e => setValue(e.target.value)} />
     </>
   )
@@ -110,4 +110,25 @@ describe('NoteFormatToolbar', () => {
 
     expect(onChange).not.toHaveBeenCalled()
   })
+
+  it('FE-NOTEBAR-008: keeps the native tooltip by default', () => {
+    render(<Harness />)
+
+    expect(screen.getByRole('button', { name: /bold/i })).toHaveAttribute('title', 'Bold')
+  })
+
+  it('FE-NOTEBAR-009: with customTooltips the name shows in the shared tooltip, and the button still keeps the focus off itself', async () => {
+    const user = userEvent.setup()
+    render(<Harness initial="text" customTooltips />)
+    const bold = screen.getByRole('button', { name: /bold/i })
+    expect(bold).not.toHaveAttribute('title')
+
+    await user.hover(bold)
+    expect(await screen.findByRole('tooltip')).toHaveTextContent('Bold')
+
+    select(0, 4)
+    await user.click(bold)
+    expect(field().value).toBe('**text**')
+    await waitFor(() => expect(document.activeElement).toBe(field()))
+  })
 })
diff --git a/client/src/components/shared/NoteFormatToolbar.tsx b/client/src/components/shared/NoteFormatToolbar.tsx
index 28e9cafa2..a6fb78314 100644
--- a/client/src/components/shared/NoteFormatToolbar.tsx
+++ b/client/src/components/shared/NoteFormatToolbar.tsx
@@ -1,6 +1,7 @@
 import { useRef } from 'react'
 import { Bold, Italic, Strikethrough, List, ListOrdered, Link2, Quote, Code } from 'lucide-react'
 import { useTranslation } from '../../i18n'
+import { Tooltip } from './Tooltip'
 
 type FormatAction =
   | { type: 'wrap'; before: string; after: string }
@@ -15,6 +16,8 @@ interface Props {
   compact?: boolean
   /** Mobile sheets run on their own token family, scoped to `.m-root`. */
   variant?: 'desktop' | 'mobile'
+  /** Shows each button's name in the shared Tooltip instead of the browser's native one. */
+  customTooltips?: boolean
 }
 
 const ACTIONS: Array<{ icon: typeof Bold; labelKey: string; action: FormatAction }> = [
@@ -43,7 +46,7 @@ const ACTIONS: Array<{ icon: typeof Bold; labelKey: string; action: FormatAction
  * `--journal-*` variables and hardcodes English labels; this one runs on theme
  * tokens and goes through i18n, so it can sit in the planner.
  */
-export default function NoteFormatToolbar({ textareaRef, onChange, compact, variant = 'desktop' }: Props) {
+export default function NoteFormatToolbar({ textareaRef, onChange, compact, variant = 'desktop', customTooltips = false }: Props) {
   const { t } = useTranslation()
   // Applied after the re-render, when the field holds the new text.
   const pendingSelection = useRef<[number, number] | null>(null)
@@ -94,22 +97,25 @@ export default function NoteFormatToolbar({ textareaRef, onChange, compact, vari
 
   return (
     <div className="flex flex-wrap items-center gap-[2px]" role="toolbar" aria-label={t('notes.format.toolbar')}>
-      {ACTIONS.map(({ icon: Icon, labelKey, action }) => (
-        <button
-          key={labelKey}
-          type="button"
-          title={t(labelKey)}
-          aria-label={t(labelKey)}
-          // Buttons in a toolbar above a field must not steal focus, or the
-          // selection they are about to format is gone before the click lands.
-          onMouseDown={e => e.preventDefault()}
-          onClick={() => apply(action)}
-          className={buttonCls}
-          style={{ width: size, height: size, cursor: 'pointer', padding: 0, ...(variant === 'mobile' ? {} : { border: 0, background: 'none' }) }}
-        >
-          <Icon size={compact ? 13 : 15} strokeWidth={1.9} />
-        </button>
-      ))}
+      {ACTIONS.map(({ icon: Icon, labelKey, action }) => {
+        const button = (
+          <button
+            key={labelKey}
+            type="button"
+            title={customTooltips ? undefined : t(labelKey)}
+            aria-label={t(labelKey)}
+            // Buttons in a toolbar above a field must not steal focus, or the
+            // selection they are about to format is gone before the click lands.
+            onMouseDown={e => e.preventDefault()}
+            onClick={() => apply(action)}
+            className={buttonCls}
+            style={{ width: size, height: size, cursor: 'pointer', padding: 0, ...(variant === 'mobile' ? {} : { border: 0, background: 'none' }) }}
+          >
+            <Icon size={compact ? 13 : 15} strokeWidth={1.9} />
+          </button>
+        )
+        return customTooltips ? <Tooltip key={labelKey} label={t(labelKey)}>{button}</Tooltip> : button
+      })}
     </div>
   )
 }
diff --git a/client/src/components/shared/Tooltip.tsx b/client/src/components/shared/Tooltip.tsx
index 6bc6a86d6..04de9ac5d 100644
--- a/client/src/components/shared/Tooltip.tsx
+++ b/client/src/components/shared/Tooltip.tsx
@@ -74,7 +74,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
   return (
     <>
       {trigger}
-      {open && createPortal(
+      {open && !disabled && createPortal(
         <div
           ref={tooltipRef}
           role="tooltip"
diff --git a/client/src/components/shared/dialogParts.test.tsx b/client/src/components/shared/dialogParts.test.tsx
new file mode 100644
index 000000000..e36100e9c
--- /dev/null
+++ b/client/src/components/shared/dialogParts.test.tsx
@@ -0,0 +1,157 @@
+// FE-PLANNER-EDITORPARTS-001 to FE-PLANNER-EDITORPARTS-011
+import { useState } from 'react';
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { PillSelect, Segmented, EditorField, AddRowButton } from './dialogParts';
+
+type Kind = 'flight' | 'train' | 'bus' | 'transit';
+
+const OPTIONS = [
+  { value: 'flight' as const, label: 'Flight', icon: <span data-testid="icon-flight" /> },
+  { value: 'train' as const, label: 'Train' },
+  { value: 'bus' as const, label: 'Bus' },
+];
+
+function Picker({ initial = 'train', onChange = vi.fn() }: { initial?: Kind; onChange?: (v: Kind) => void }) {
+  const [value, setValue] = useState<Kind>(initial);
+  return (
+    <PillSelect<Kind>
+      label="Booking Type"
+      value={value}
+      options={OPTIONS}
+      onChange={v => { setValue(v); onChange(v); }}
+      fallback={{ label: 'Transit', icon: <span data-testid="icon-fallback" /> }}
+    />
+  );
+}
+
+const pill = () => screen.getByRole('button', { name: /^Booking Type:/ });
+const list = () => screen.queryByRole('group', { name: 'Booking Type' });
+const option = (name: string) => screen.getByRole('button', { name: new RegExp(`^${name}$`) });
+
+describe('PillSelect', () => {
+  it('FE-PLANNER-EDITORPARTS-001: the pill names what is picked and the value, and claims no menu', () => {
+    render(<Picker />);
+    expect(pill()).toHaveAccessibleName(/^Booking Type: ?Train$/);
+    expect(pill()).toHaveAttribute('aria-expanded', 'false');
+    expect(pill()).not.toHaveAttribute('aria-haspopup');
+    expect(list()).toBeNull();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-002: opening shows the list as a named group and puts the focus on the current choice', async () => {
+    render(<Picker />);
+    await userEvent.click(pill());
+    expect(list()).toBeInTheDocument();
+    expect(screen.queryByRole('menu')).toBeNull();
+    expect(pill()).toHaveAttribute('aria-expanded', 'true');
+    expect(pill()).toHaveAttribute('aria-controls', list()!.id);
+    expect(option('Train')).toHaveFocus();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-003: picking reports the value, closes the list and returns to the pill', async () => {
+    const onChange = vi.fn();
+    render(<Picker onChange={onChange} />);
+    await userEvent.click(pill());
+    await userEvent.click(option('Bus'));
+    expect(onChange).toHaveBeenCalledWith('bus');
+    expect(list()).toBeNull();
+    expect(pill()).toHaveAccessibleName(/^Booking Type: ?Bus$/);
+    expect(pill()).toHaveFocus();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-004: Escape closes only the list, a dialog listening on the document never hears it', async () => {
+    const dialogEscape = vi.fn();
+    document.addEventListener('keydown', dialogEscape);
+    try {
+      render(<Picker />);
+      await userEvent.click(pill());
+      await userEvent.keyboard('{Escape}');
+      expect(list()).toBeNull();
+      expect(dialogEscape).not.toHaveBeenCalled();
+      expect(pill()).toHaveFocus();
+
+      // With the list closed the next Escape is the dialog's again.
+      await userEvent.keyboard('{Escape}');
+      expect(dialogEscape).toHaveBeenCalledOnce();
+    } finally {
+      document.removeEventListener('keydown', dialogEscape);
+    }
+  });
+
+  it('FE-PLANNER-EDITORPARTS-005: a press outside closes the list, a press inside does not', async () => {
+    render(<><Picker /><p>elsewhere</p></>);
+    await userEvent.click(pill());
+    fireEvent.mouseDown(option('Bus'));
+    expect(list()).toBeInTheDocument();
+    fireEvent.mouseDown(screen.getByText('elsewhere'));
+    expect(list()).toBeNull();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-006: a second click on the pill closes the list', async () => {
+    render(<Picker />);
+    await userEvent.click(pill());
+    await userEvent.click(pill());
+    expect(list()).toBeNull();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-007: the arrow keys, Home and End walk the list and wrap around', async () => {
+    render(<Picker initial="flight" />);
+    await userEvent.click(pill());
+    expect(option('Flight')).toHaveFocus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(option('Train')).toHaveFocus();
+    await userEvent.keyboard('{End}');
+    expect(option('Bus')).toHaveFocus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(option('Flight')).toHaveFocus();
+    await userEvent.keyboard('{ArrowUp}');
+    expect(option('Bus')).toHaveFocus();
+    await userEvent.keyboard('{Home}');
+    expect(option('Flight')).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+    expect(list()).toBeNull();
+    expect(pill()).toHaveAccessibleName(/^Booking Type: ?Flight$/);
+  });
+
+  it('FE-PLANNER-EDITORPARTS-008: Tab closes the list and goes on from the pill', async () => {
+    render(<Picker />);
+    await userEvent.click(pill());
+    fireEvent.keyDown(option('Train'), { key: 'Tab' });
+    expect(list()).toBeNull();
+    expect(pill()).toHaveFocus();
+  });
+
+  it('FE-PLANNER-EDITORPARTS-009: a value none of the options holds shows the fallback, and the list opens on the first option', async () => {
+    render(<Picker initial="transit" />);
+    expect(pill()).toHaveAccessibleName(/^Booking Type: ?Transit$/);
+    expect(screen.getByTestId('icon-fallback')).toBeInTheDocument();
+    await userEvent.click(pill());
+    expect(option('Flight')).toHaveFocus();
+    expect(screen.getByTestId('icon-flight')).toBeInTheDocument();
+  });
+});
+
+describe('editor fields', () => {
+  it('FE-PLANNER-EDITORPARTS-010: Segmented marks the chosen option and reports a new one', async () => {
+    const onChange = vi.fn();
+    render(<Segmented label="Mode" value="manual" onChange={onChange} options={[{ value: 'manual', label: 'Manual' }, { value: 'automated', label: 'Automated' }]} />);
+    expect(screen.getByRole('group', { name: 'Mode' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Manual' })).toHaveAttribute('aria-pressed', 'true');
+    await userEvent.click(screen.getByRole('button', { name: 'Automated' }));
+    expect(onChange).toHaveBeenCalledWith('automated');
+  });
+
+  it('FE-PLANNER-EDITORPARTS-011: EditorField shows an error in place of its hint, and AddRowButton adds', async () => {
+    const onAdd = vi.fn();
+    const { rerender } = render(<EditorField label="Seat" htmlFor="seat" hint="Optional"><input id="seat" /></EditorField>);
+    expect(screen.getByLabelText('Seat')).toBeInTheDocument();
+    expect(screen.getByText('Optional')).toBeInTheDocument();
+    rerender(<EditorField label="Seat" htmlFor="seat" hint="Optional" error="Taken"><input id="seat" /></EditorField>);
+    expect(screen.getByText('Taken')).toBeInTheDocument();
+    expect(screen.queryByText('Optional')).toBeNull();
+
+    render(<AddRowButton onClick={onAdd}>Add stop</AddRowButton>);
+    await userEvent.click(screen.getByRole('button', { name: 'Add stop' }));
+    expect(onAdd).toHaveBeenCalledOnce();
+  });
+});
diff --git a/client/src/components/shared/dialogParts.tsx b/client/src/components/shared/dialogParts.tsx
new file mode 100644
index 000000000..283ff3cf0
--- /dev/null
+++ b/client/src/components/shared/dialogParts.tsx
@@ -0,0 +1,220 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { ChevronDown, Plus } from 'lucide-react'
+import { useAnchoredPosition } from '../../hooks/useAnchoredPosition'
+import { POPOVER } from '../Packing/packingPopoverStyles'
+import { PopoverItem } from '../Packing/PackingPopover'
+import { PILL, fs } from './DialogShell'
+
+// The editors' fields in the cards' language: framed white boxes under small
+// Geist eyebrows. The sizes are classes, not fs() styles, so components that
+// only take a className (BookingLinkAndFiles, BookingCodeInput, AddressInput)
+// get them too; both scale with the user's text size the same way.
+
+/** A text input in the box look. Same height and inset as CustomSelect and CustomTimePicker, so they line up in a row. */
+export const INPUT = 'block w-full min-w-0 rounded-[10px] border border-edge bg-surface-input px-3 py-2 text-[length:calc(13px*var(--fs-scale-body,1))] text-content outline-none placeholder:text-content-faint focus:ring-2 focus:ring-[color:var(--text-primary)] disabled:cursor-default disabled:opacity-50'
+export const TEXTAREA = 'block w-full min-w-0 resize-none rounded-[10px] border border-edge bg-surface-input px-3 py-2 text-[length:calc(13px*var(--fs-scale-body,1))] leading-normal text-content outline-none placeholder:text-content-faint focus:ring-2 focus:ring-[color:var(--text-primary)] disabled:cursor-default disabled:opacity-50'
+/** A value shown in the box look that cannot be typed into, such as an airport's timezone. */
+export const READONLY_BOX = 'block w-full min-w-0 truncate rounded-[10px] border border-edge-faint bg-surface-tertiary px-3 py-2 text-[length:calc(12.5px*var(--fs-scale-body,1))] text-content-muted'
+/** The eyebrow over a field, as a class for components that take a labelClass. */
+export const LABEL = 'mb-[5px] block font-geist text-[length:calc(9.5px*var(--fs-scale-caption,1))] font-bold uppercase tracking-[.08em] text-content-faint'
+/** Fields side by side; a narrow window stacks them. */
+export const GRID_2 = 'grid grid-cols-2 items-start gap-3 max-sm:grid-cols-1'
+export const GRID_3 = 'grid grid-cols-3 items-start gap-3 max-sm:grid-cols-1'
+/** A framed group inside the body, such as one stop of a route: the card surface with white fields on it. */
+export const PANEL = 'flex flex-col gap-3 rounded-[14px] border border-edge-faint bg-surface-secondary p-3'
+/**
+ * Wraps an AirportSelect or LocationSelect on a PANEL. Their search box keeps
+ * the grey fill it has everywhere else; here it gets the white of the fields
+ * beside it, set from outside because the phone shares the component.
+ */
+export const SEARCH_ON_PANEL = 'min-w-0 [&>div>div:first-child]:bg-surface-input'
+
+/** An eyebrow label over one control, with an optional hint or error line under it. */
+export function EditorField({ label, htmlFor, hint, error, className = '', children }: {
+  label: ReactNode
+  htmlFor?: string
+  hint?: ReactNode
+  /** Shown in the danger colour in place of the hint. */
+  error?: ReactNode
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <div className={`min-w-0 ${className}`}>
+      <label htmlFor={htmlFor} className={LABEL}>{label}</label>
+      {children}
+      {error
+        ? <p className="m-0 mt-1 text-danger" style={fs(11)}>{error}</p>
+        : hint ? <p className="m-0 mt-1 text-content-faint" style={fs(11)}>{hint}</p> : null}
+    </div>
+  )
+}
+
+export interface SegmentedOption<T extends string> {
+  value: T
+  label: ReactNode
+  icon?: ReactNode
+}
+
+/** A row of choices on a grey track, the chosen one raised like the status filter (or filled like the view switcher). */
+export function Segmented<T extends string>({ value, options, onChange, label, accent = false, fill = false }: {
+  value: T
+  options: readonly SegmentedOption<T>[]
+  onChange: (value: T) => void
+  /** The group's accessible name. */
+  label: string
+  /** The chosen option in the accent fill instead of the raised card. */
+  accent?: boolean
+  /** Stretch across the row, each option taking an equal share. */
+  fill?: boolean
+}) {
+  return (
+    <div role="group" aria-label={label} className={`${fill ? 'flex w-full' : 'inline-flex'} flex-none gap-0.5 rounded-[10px] bg-surface-tertiary p-[3px]`}>
+      {options.map(o => {
+        const on = o.value === value
+        const look = on ? (accent ? 'bg-accent text-accent-text' : 'bg-surface-card text-content shadow-sm') : 'text-content-muted hover:text-content'
+        return (
+          <button key={o.value} type="button" onClick={() => onChange(o.value)} aria-pressed={on}
+            className={`${fill ? 'flex-1' : ''} inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-[8px] px-3 py-1.5 font-medium ${look}`}
+            style={fs(12.5, 'body')}>
+            {o.icon}{o.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export interface PillOption<T extends string> {
+  value: T
+  label: string
+  icon?: ReactNode
+  /** A quieter second part after the label, such as a day's date. */
+  hint?: string
+}
+
+const itemsOf = (list: HTMLElement | null) => Array.from(list?.querySelectorAll('button') ?? [])
+
+/**
+ * A head band pill that opens a list to pick from, such as the booking type.
+ * Opening moves the focus onto the current choice; the arrow keys walk the
+ * list, Escape closes it and leaves the dialog open, Tab closes it and goes on
+ * from the pill.
+ */
+/** A PillSelect sitting in the body rather than on a head band: grey, flat and small. */
+const QUIET_PILL = 'inline-flex flex-none items-center gap-1.5 rounded-full bg-surface-tertiary px-2.5 py-1 font-semibold text-content'
+
+export function PillSelect<T extends string>({ value, options, onChange, label, fallback, quiet = false }: {
+  value: T
+  options: readonly PillOption<T>[]
+  onChange: (value: T) => void
+  /** What is being picked; read before the value by screen readers, and the list's name. */
+  label: string
+  /** What the pill shows while the value is none of the options, such as a type the list does not offer. */
+  fallback?: { label: string; icon?: ReactNode; hint?: string }
+  /** In the body of a dialog instead of on its head band. */
+  quiet?: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const startAt = useRef(0)
+  const listId = useId()
+  const box = useAnchoredPosition(triggerRef, open, { matchWidth: false, estimatedHeight: 320 })
+  const current = options.find(o => o.value === value)
+  const shown = current ?? fallback
+  const listShown = open && !!box
+
+  const toggle = () => {
+    if (!open) startAt.current = Math.max(0, options.findIndex(o => o.value === value))
+    setOpen(o => !o)
+  }
+
+  useEffect(() => {
+    if (listShown) itemsOf(menuRef.current)[startAt.current]?.focus({ preventScroll: true })
+  }, [listShown])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      const target = e.target as Node
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    // Captured and stopped, so the key takes back the list and not the dialog under it.
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      e.stopPropagation()
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey, true)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey, true)
+    }
+  }, [open])
+
+  const pick = (next: T) => {
+    setOpen(false)
+    onChange(next)
+    triggerRef.current?.focus()
+  }
+
+  const onListKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Tab') {
+      // Back on the pill before the browser moves on, so Tab carries on from there.
+      setOpen(false)
+      triggerRef.current?.focus()
+      return
+    }
+    const items = itemsOf(menuRef.current)
+    const at = items.indexOf(document.activeElement as HTMLButtonElement)
+    const last = items.length - 1
+    let next: number
+    if (e.key === 'ArrowDown') next = at < 0 || at === last ? 0 : at + 1
+    else if (e.key === 'ArrowUp') next = at <= 0 ? last : at - 1
+    else if (e.key === 'Home') next = 0
+    else if (e.key === 'End') next = last
+    else return
+    e.preventDefault()
+    items[next]?.focus()
+  }
+
+  return (
+    <>
+      <button ref={triggerRef} type="button" onClick={toggle} aria-expanded={open} aria-controls={open ? listId : undefined}
+        className={`${quiet ? QUIET_PILL : PILL} hover:opacity-80`} style={quiet ? fs(11.5, 'body') : undefined}>
+        <span className="sr-only">{label}: </span>
+        {shown?.icon}
+        <span>{shown?.label}</span>
+        {shown?.hint && <span className="font-medium text-content-muted">{shown.hint}</span>}
+        <ChevronDown size={12} strokeWidth={2.2} className={`-mr-0.5 flex-none text-content-faint transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+      {open && box && createPortal(
+        <div ref={menuRef} id={listId} role="group" aria-label={label} onKeyDown={onListKey}
+          className="fixed z-[var(--z-toast)] min-w-[200px] overflow-y-auto"
+          style={{ ...POPOVER, top: box.top, bottom: box.bottom, left: box.left, maxHeight: box.maxHeight }}>
+          {options.map(o => (
+            <PopoverItem key={o.value} icon={o.icon ?? null} label={o.label} active={o.value === value} onClick={() => pick(o.value)}
+              trailing={o.hint ? <span className="font-geist text-content-faint" style={fs(11)}>{o.hint}</span> : undefined} />
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+}
+
+/** The dashed full-width button that adds a row: a stop, a leg. */
+export function AddRowButton({ onClick, children }: { onClick: () => void; children: ReactNode }) {
+  return (
+    <button type="button" onClick={onClick}
+      className="flex w-full items-center justify-center gap-1.5 rounded-[10px] border border-dashed border-edge px-3 py-2 font-semibold text-content-muted hover:border-content-faint hover:text-content"
+      style={fs(12, 'body')}>
+      <Plus size={13} strokeWidth={2.2} />{children}
+    </button>
+  )
+}
diff --git a/client/src/index.css b/client/src/index.css
index eda101d31..61f8f6385 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1514,6 +1514,21 @@ img[alt="TREK"] {
   .collab-link-chip__action { width: 30px; height: 30px; margin: -4px 0; }
 }
 
+/* The desktop's links panel is tinted like the other Collab panels, so a chip sits on
+   the card colour as a card, the way notes and polls do; the phone keeps its pill. */
+.collab-link-grid--desk .collab-link-chip {
+  padding: 8px 8px 8px 8px;
+  border-radius: 14px;
+  background: var(--bg-card);
+  box-shadow: none;
+}
+.collab-link-grid--desk .collab-link-chip:hover, .collab-link-grid--desk .collab-link-chip:focus-within {
+  transform: none;
+  box-shadow: var(--shadow-md);
+}
+.collab-link-grid--desk .collab-link-chip--pinned { background: var(--accent-subtle); }
+.collab-link-grid--desk .collab-link-chip__icon { width: 28px; height: 28px; flex-basis: 28px; border-radius: 9px; background: var(--bg-secondary); }
+
 /* Markdown in Collab Notes */
 .collab-note-md strong, .collab-note-md-full strong { font-weight: 700 !important; }
 .collab-note-md em, .collab-note-md-full em { font-style: italic !important; }
@@ -1534,22 +1549,13 @@ img[alt="TREK"] {
 .collab-note-md-full th, .collab-note-md-full td { border: 1px solid var(--border-primary); padding: 4px 8px; font-size: 0.9em; }
 .collab-note-md-full hr { border: none; border-top: 1px solid var(--border-primary); margin: 0.8em 0; }
 
-/* Day-plan header action grid (edit / +transport / note / collapse) */
-.dp-day-actions button {
-  color: var(--text-faint);
-  background: transparent;
-  transition: background-color 0.12s ease, color 0.12s ease;
-}
-.dp-day-actions button:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-/* Reveal the action grid only when hovering the day row (pointer devices).
-   Touch devices (hover: none) keep it visible; the selected day stays visible too. */
+/* The day head's "+" (place, transport, transit, note): shown while the head is
+   hovered, focused or the day is open. Touch devices (hover: none) keep it visible. */
 @media (hover: hover) {
-  .dp-day-actions { opacity: 0; transition: opacity 0.12s ease; }
-  .dp-day-header:hover .dp-day-actions,
-  .dp-day-header[data-selected="true"] .dp-day-actions { opacity: 1; }
+  .dp-day-tools { opacity: 0; transition: opacity 0.12s ease; }
+  .dp-day-header:hover .dp-day-tools,
+  .dp-day-header:focus-within .dp-day-tools,
+  .dp-day-header[data-selected="true"] .dp-day-tools { opacity: 1; }
 }
 
 /* Planner rows a finger can pick up (#1616). A long press is what arms the drag,
diff --git a/client/src/pages/DashboardPage.desktop.test.tsx b/client/src/pages/DashboardPage.desktop.test.tsx
index 0a31839f0..0271cdbf9 100644
--- a/client/src/pages/DashboardPage.desktop.test.tsx
+++ b/client/src/pages/DashboardPage.desktop.test.tsx
@@ -350,7 +350,7 @@ describe('DashboardPage (desktop)', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Subscribe to all trips calendar' }));
     const description = await screen.findByText(/One calendar feed for all your active trips/);
 
-    fireEvent.click((description.parentElement as HTMLElement).querySelector('button') as HTMLElement);
+    fireEvent.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Close' }));
 
     await waitFor(() =>
       expect(screen.queryByText(/One calendar feed for all your active trips/)).not.toBeInTheDocument());
diff --git a/client/src/pages/TripPlannerPage.test.tsx b/client/src/pages/TripPlannerPage.test.tsx
index 4d0eb6045..ea614f23d 100644
--- a/client/src/pages/TripPlannerPage.test.tsx
+++ b/client/src/pages/TripPlannerPage.test.tsx
@@ -184,8 +184,7 @@ vi.mock('../components/Trips/TripMembersModal', () => ({
   },
 }));
 
-// The road-trip rail and the booking dialog it brings along (#2428). Both capture their
-// props so a case can drive the rail's handlers and read what the page did with them.
+// The road-trip rail. It captures its props so a case can drive its handlers.
 type RoadtripSidebarStubProps = { onOpenBooking?: (reservationId: number) => void; canEditBookings?: boolean };
 const capturedRoadtripSidebarProps: { current: RoadtripSidebarStubProps } = { current: {} };
 vi.mock('../components/Roadtrip/RoadtripSidebar', () => ({
@@ -195,15 +194,6 @@ vi.mock('../components/Roadtrip/RoadtripSidebar', () => ({
   },
 }));
 
-type TransportDetailStubProps = { transportDetail?: { id: number } | null };
-const capturedTransportDetailModalProps: { current: TransportDetailStubProps } = { current: {} };
-vi.mock('../components/Planner/DayPlanSidebarTransportDetailModal', () => ({
-  DayPlanSidebarTransportDetailModal: (props: TransportDetailStubProps) => {
-    capturedTransportDetailModalProps.current = props;
-    return null;
-  },
-}));
-
 vi.mock('../components/Roadtrip/RoadtripCorridorPanel', () => ({
   default: () => React.createElement('div', { 'data-testid': 'roadtrip-corridor-panel' }),
 }));
@@ -294,7 +284,6 @@ beforeEach(() => {
   capturedFileManagerProps.current = {};
   capturedPlaceInspectorProps.current = {};
   capturedRoadtripSidebarProps.current = {};
-  capturedTransportDetailModalProps.current = {};
   seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
 });
 
@@ -1835,8 +1824,9 @@ describe('TripPlannerPage', () => {
       sessionStorage.setItem('trip-roadtrip-42', '1');
     };
 
-    it('a flight opens the transport detail view the rail brings along, a table opens its editor', async () => {
+    it('a flight and a table both open the booking detail, and its Edit opens their editors', async () => {
       enterRoadtrip();
+      server.use(http.get('/api/view-contributions/:view/:tripId', () => HttpResponse.json({ contributions: [] })));
       vi.useFakeTimers();
       seedTripStore({ id: 42 });
       const flight = buildReservation({ id: 70, trip_id: 42, type: 'flight', title: 'LH 2020' });
@@ -1858,24 +1848,27 @@ describe('TripPlannerPage', () => {
       // every table and ticket becomes a button that no-ops.
       expect(capturedRoadtripSidebarProps.current.canEditBookings).toBe(true);
 
-      // A terminal row, a ride pill and a map endpoint all set the booking to show, and
-      // under Days the day panel owns the dialog that shows it. Here it has to be the
-      // rail's own copy, or nothing shows.
+      // A terminal row, a ride pill or a booking chip shows the booking first, as the
+      // day plan does; the editor is behind its Edit.
       act(() => { capturedRoadtripSidebarProps.current.onOpenBooking?.(70); });
-      await waitFor(() => {
-        expect(capturedTransportDetailModalProps.current.transportDetail).toMatchObject({ id: 70 });
-      });
+      expect(await screen.findByRole('dialog', { name: 'LH 2020' })).toBeInTheDocument();
       expect(capturedReservationModalProps.current.isOpen).toBe(false);
+      fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+      await waitFor(() => expect(screen.queryByRole('dialog', { name: 'LH 2020' })).not.toBeInTheDocument());
 
       act(() => { capturedRoadtripSidebarProps.current.onOpenBooking?.(11); });
+      expect(await screen.findByRole('dialog', { name: 'Tisch Bullerei' })).toBeInTheDocument();
+      expect(capturedReservationModalProps.current.isOpen).toBe(false);
+      fireEvent.click(screen.getByRole('button', { name: 'Edit' }));
       await waitFor(() => {
         expect(capturedReservationModalProps.current.isOpen).toBe(true);
       });
       expect(capturedReservationModalProps.current.reservation).toMatchObject({ id: 11 });
+      expect(screen.queryByRole('dialog', { name: 'Tisch Bullerei' })).not.toBeInTheDocument();
 
       // A booking the trip does not hold opens nothing.
       act(() => { capturedRoadtripSidebarProps.current.onOpenBooking?.(999); });
-      expect(capturedTransportDetailModalProps.current.transportDetail).toMatchObject({ id: 70 });
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
   });
 });
diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx
index 07ccbf9a2..af9b8215e 100644
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -10,7 +10,6 @@ import { TripRouteOverviewPill, TripRouteOverviewPanel } from '../components/Map
 import { DawarichTrailPill } from '../components/Map/DawarichTrailPill'
 import { getCached, fetchPhoto } from '../services/photoService'
 import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
-import { DayPlanSidebarTransportDetailModal } from '../components/Planner/DayPlanSidebarTransportDetailModal'
 import RoadtripModeSwitch from '../components/Roadtrip/RoadtripModeSwitch'
 import TripLoadingSplash from '../components/shared/TripLoadingSplash'
 import PlacesSidebar from '../components/Planner/PlacesSidebar'
@@ -22,6 +21,7 @@ import SlidingTabs from '../components/shared/SlidingTabs'
 import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
 import TransitJourneyModal from '../components/Planner/TransitJourneyModal'
+import { BookingDetailPopup } from '../components/Planner/bookings/BookingDetailHost'
 import BookingImportModal from '../components/Planner/BookingImportModal'
 import AirTrailImportModal from '../components/Planner/AirTrailImportModal'
 // MemoriesPanel moved to Journey addon
@@ -46,6 +46,7 @@ import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, mapsAp
 import { accommodationRepo } from '../repo/accommodationRepo'
 import { useAuthStore } from '../store/authStore'
 import ConfirmDialog from '../components/shared/ConfirmDialog'
+import { Tooltip } from '../components/shared/Tooltip'
 import { useTripWebSocket } from '../hooks/useTripWebSocket'
 import { useRouteCalculation } from '../hooks/useRouteCalculation'
 import { usePlaceSelection } from '../hooks/usePlaceSelection'
@@ -57,7 +58,6 @@ import { usePoiExplore } from '../components/Map/usePoiExplore'
 import { useMergedMapPois } from '../components/Map/useMergedMapPois'
 import PoiCategoryPill from '../components/Map/PoiCategoryPill'
 import { useTouchDragBridge } from '../hooks/useTouchDragBridge'
-import { showReservationOnMap } from '../components/Planner/bookings/showOnMap'
 
 // The tab panels are the planner's dead weight: each one mounts only while its
 // own tab is active, so the page chunk carried code most sessions never run. They
@@ -273,7 +273,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
   // Page = wiring container: the entire planner state machine (store, tabs,
   // selection, CRUD handlers with undo, map filters, splash) lives in the hook.
   const {
-    tripId, navigate, toast, t, language, locale, settings, placesPhotosEnabled,
+    tripId, navigate, toast, t, language, placesPhotosEnabled,
     trip, days, places, assignments, packingItems, todoItems, categories, reservations, budgetItems, files,
     selectedDayId, isLoading, tripActions, can, canUploadFiles,
     pushUndo, undo, canUndo, lastActionLabel, handleUndo,
@@ -289,6 +289,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
     startResizeLeft, startResizeRight,
     selectedPlaceId, selectedAssignmentId, setSelectedPlaceId, selectAssignment,
     showDayDetail, setShowDayDetail, dayDetailCollapsed, setDayDetailCollapsed,
+    stayPickerDayId, setStayPickerDayId,
     showPlaceForm, setShowPlaceForm, editingPlace, setEditingPlace, setPlaceFormDayId,
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     stopDraft, setStopDraft, saveStopDraft, saveStopDraftAsNight, stopDraftToForm, stopDraftDuplicate, reorderRoadtripStop,
@@ -310,6 +311,8 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
     transportModalAutomated, setTransportModalAutomated, transitPrefill, setTransitPrefill, transitJourney, setTransitJourney,
+    openTransportEditor, changeTransitRoute,
+    bookingDetail, openBookingDetail, openBookingFromDayList, closeBookingDetail, bookingDetailEditor, bookingDetailChangeRoute, showBookingOnMap, isBookingOnMap,
     reservationPrefill, transportPrefill, importReviewActive, advanceImportReview,
     receiptExpense, clearReceiptExpense,
     routeShown, setRouteShown, transitRoutesShown, routeProfile, setRouteProfile, routeVias, fitKey, setFitKey,
@@ -482,9 +485,13 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
               // In road trip mode the rides that seam the drive are drawn as their own arcs
               // beside the roads, on top of what the reader switched on under Days.
               visibleConnectionIds={roadtripActive ? roadtripConnections : visibleConnections}
+              // The desktop plan shows the booking's detail; the narrow layout keeps the day
+              // list's transport view.
               onReservationClick={(rid) => {
                 const r = reservations.find(x => x.id === rid)
-                if (r) setMapTransportDetail(r)
+                if (!r) return
+                if (isMobile) setMapTransportDetail(r)
+                else openBookingDetail(r)
               }}
               /* In road trip mode the corridor's `visible` (not `search.results`: the map is
                  the picture of that very list, and filtering the list while seventy pins stay
@@ -598,21 +605,22 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
             )}
 
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
-              <button type="button" onClick={toggleLeft}
-                aria-label={leftHidden ? t('trip.mobilePlan') : t('common.collapse')}
-                title={leftHidden ? t('trip.mobilePlan') : t('common.collapse')}
-                style={{
-                  position: leftHidden ? 'fixed' : 'absolute', top: leftHidden ? 'calc(var(--nav-h) + 44px + 14px)' : 14, left: leftHidden ? 10 : undefined, right: leftHidden ? undefined : -28, zIndex: -1,
-                  width: 36, height: 36, borderRadius: leftHidden ? 10 : '0 10px 10px 0',
-                  background: leftHidden ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
-                  boxShadow: leftHidden ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
-                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: leftHidden ? '#fff' : 'var(--text-faint)', transition: 'color 0.15s',
-                }}
-                onMouseEnter={e => { if (!leftHidden) e.currentTarget.style.color = 'var(--text-primary)' }}
-                onMouseLeave={e => { if (!leftHidden) e.currentTarget.style.color = 'var(--text-faint)' }}>
-                {leftHidden ? <PanelLeftOpen size={16} /> : <PanelLeftClose size={16} />}
-              </button>
+              {/* The panel's tab: a flap on its edge while open, a raised accent tile once it is tucked away. */}
+              <Tooltip label={leftHidden ? t('trip.mobilePlan') : t('common.collapse')} placement="right">
+                <button type="button" onClick={toggleLeft}
+                  aria-label={leftHidden ? t('trip.mobilePlan') : t('common.collapse')}
+                  className={leftHidden ? 'bg-accent text-accent-text shadow-md hover:opacity-90' : 'text-content-faint hover:text-content'}
+                  style={{
+                    position: leftHidden ? 'fixed' : 'absolute', top: leftHidden ? 'calc(var(--nav-h) + 44px + 14px)' : 14, left: leftHidden ? 10 : undefined, right: leftHidden ? undefined : -28, zIndex: -1,
+                    width: 36, height: 36, borderRadius: leftHidden ? 10 : '0 10px 10px 0',
+                    background: leftHidden ? undefined : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                    border: 'none',
+                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'color 0.15s',
+                  }}>
+                  {leftHidden ? <PanelLeftOpen size={16} /> : <PanelLeftClose size={16} />}
+                </button>
+              </Tooltip>
 
               <div style={{
                 width: leftHidden ? 0 : leftWidth, height: '100%',
@@ -636,13 +644,11 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                       selectedAssignmentId={selectedAssignmentId}
                       onSelectStop={(placeId, assignmentId) => handlePlaceClick(placeId, assignmentId)}
                       reservations={reservations}
+                      // A terminal, a ride pill or a booking chip shows the booking's detail,
+                      // as the day plan does; its Edit opens the editor.
                       onOpenBooking={(rid) => {
                         const r = reservations.find(x => x.id === rid)
-                        if (!r) return
-                        // The day plan's own split: a transport has a detail view with
-                        // an edit button on it, a table or a ticket only has its editor.
-                        if (TRANSPORT_TYPES.has(r.type)) setMapTransportDetail(r)
-                        else openLinkedReservation?.(r)
+                        if (r) openBookingDetail(r)
                       }}
                       canEditBookings={can('reservation_edit', trip)}
                       onReorderStop={can('day_edit', trip) ? reorderRoadtripStop : undefined}
@@ -661,18 +667,6 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                       collapsedDayIds={collapsedRoadtripDays}
                       onToggleDay={toggleRoadtripDay}
                     />
-                    {/* The booking a terminal, a ride pill or a map endpoint opens. Under
-                        Days the day panel owns this dialog; here the day panel is not
-                        mounted, so the rail has to bring it along (#2428). */}
-                    <DayPlanSidebarTransportDetailModal
-                      transportDetail={mapTransportDetail}
-                      setTransportDetail={setMapTransportDetail}
-                      onNavigateToFiles={() => handleTabChange('dateien')}
-                      onEdit={can('day_edit', trip) ? (reservation) => { setMapTransportDetail(null); setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true) } : undefined}
-                      t={t}
-                      locale={locale}
-                      timeFormat={settings.time_format || '24h'}
-                    />
                   </LazyPanel>
                 ) : (
                 <DayPlanSidebar
@@ -712,7 +706,10 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                   onPlanTransitLeg={can('day_edit', trip) && tripHasDates ? ({ dayId, from, to, time }) => { setTransportModalDayId(dayId); setEditingTransport(null); setTransitPrefill({ from, to, time }); setTransportModalAutomated(true); setShowTransportModal(true) } : undefined}
                   onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true) } : undefined}
                   onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true) } : undefined}
+                  // The narrow layout keeps what a booking row opened before.
+                  onOpenBooking={isMobile ? undefined : openBookingFromDayList}
                   onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }}
+                  onAddAccommodation={can('day_edit', trip) ? (day) => { handleSelectDay(day.id); setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null); setStayPickerDayId(day.id) } : undefined}
                   onRemoveAssignment={handleRemoveAssignment}
                   onEditPlace={(place, assignmentId) => {
                     // The day is cleared on the way in: the form assigns to whatever
@@ -742,30 +739,30 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                   <div
                     role="presentation"
                     onMouseDown={startResizeLeft}
-                    style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', background: 'transparent' }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.08)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                    className="transition-colors hover:bg-edge"
+                    style={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', zIndex: 2 }}
                   />
                 )}
               </div>
             </div>
 
             <div className="hidden md:block" style={{ position: 'absolute', right: 10, top: 10, bottom: 10, zIndex: 20 }}>
-              <button type="button" onClick={toggleRight}
-                aria-label={rightHidden ? t('trip.mobilePlaces') : t('common.collapse')}
-                title={rightHidden ? t('trip.mobilePlaces') : t('common.collapse')}
-                style={{
-                  position: rightHidden ? 'fixed' : 'absolute', top: rightHidden ? 'calc(var(--nav-h) + 44px + 14px)' : 14, right: rightHidden ? 10 : undefined, left: rightHidden ? undefined : -28, zIndex: -1,
-                  width: 36, height: 36, borderRadius: rightHidden ? 10 : '10px 0 0 10px',
-                  background: rightHidden ? '#000' : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
-                  boxShadow: rightHidden ? '0 2px 12px rgba(0,0,0,0.2)' : 'none', border: 'none',
-                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: rightHidden ? '#fff' : 'var(--text-faint)', transition: 'color 0.15s',
-                }}
-                onMouseEnter={e => { if (!rightHidden) e.currentTarget.style.color = 'var(--text-primary)' }}
-                onMouseLeave={e => { if (!rightHidden) e.currentTarget.style.color = 'var(--text-faint)' }}>
-                {rightHidden ? <PanelRightOpen size={16} /> : <PanelRightClose size={16} />}
-              </button>
+              {/* The panel's tab: a flap on its edge while open, a raised accent tile once it is tucked away. */}
+              <Tooltip label={rightHidden ? t('trip.mobilePlaces') : t('common.collapse')} placement="left">
+                <button type="button" onClick={toggleRight}
+                  aria-label={rightHidden ? t('trip.mobilePlaces') : t('common.collapse')}
+                  className={rightHidden ? 'bg-accent text-accent-text shadow-md hover:opacity-90' : 'text-content-faint hover:text-content'}
+                  style={{
+                    position: rightHidden ? 'fixed' : 'absolute', top: rightHidden ? 'calc(var(--nav-h) + 44px + 14px)' : 14, right: rightHidden ? 10 : undefined, left: rightHidden ? undefined : -28, zIndex: -1,
+                    width: 36, height: 36, borderRadius: rightHidden ? 10 : '10px 0 0 10px',
+                    background: rightHidden ? undefined : 'var(--sidebar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                    border: 'none',
+                    cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    transition: 'color 0.15s',
+                  }}>
+                  {rightHidden ? <PanelRightOpen size={16} /> : <PanelRightClose size={16} />}
+                </button>
+              </Tooltip>
 
               <div style={{
                 width: rightHidden ? 0 : rightWidth, height: '100%',
@@ -782,12 +779,11 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                   <div
                     role="presentation"
                     onMouseDown={startResizeRight}
-                    style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', background: 'transparent' }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(0,0,0,0.08)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+                    className="transition-colors hover:bg-edge"
+                    style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 4, cursor: 'col-resize', zIndex: 2 }}
                   />
                 )}
-                <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', paddingLeft: 4 }}>
+                <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
                   {roadtripActive ? (
                     <LazyPanel id="roadtrip-corridor">
                       {/* No Add button for someone who may not add: openAddPlaceFromPoi
@@ -882,6 +878,9 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                   onToggleCollapse={() => setDayDetailCollapsed(c => !c)}
                   mobile={isMobile}
                   onUpdateDayTitle={handleUpdateDayTitle}
+                  openStayPicker={stayPickerDayId === currentDay.id}
+                  onStayPickerOpened={() => setStayPickerDayId(null)}
+                  onOpenBooking={isMobile ? undefined : openBookingDetail}
                 />
               )
             })()}
@@ -892,6 +891,7 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                 roadtripStay={roadtripStay} roadtripActive={roadtripActive}
                 onEditTransport={openLinkedTransport}
                 onEditReservation={openLinkedReservation}
+                onOpenBooking={openBookingDetail}
                 place={selectedPlace}
                 categories={categories}
                 days={days}
@@ -1011,17 +1011,19 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                 bookingImportAvailable={bookingImportAvailable}
                 onAirTrailImport={() => setShowAirTrailImport(true)}
                 airTrailAvailable={airTrailAvailable}
-                onEdit={(r) => { if (r.type === 'transit') { setTransitJourney(r) } else { setEditingTransport(r); setTransportModalAutomated(false); setShowTransportModal(true) } }}
+                onEdit={openTransportEditor}
+                // The same right as on the plan: day_edit, as the journey view asked for.
+                onChangeRoute={bookingDetailChangeRoute}
                 onDelete={handleDeleteReservation}
                 onNavigateToFiles={() => handleTabChange('dateien')}
                 titleKey="transport.title"
                 addManualKey="transport.addManual"
                 contributionView="transports"
                 tripMembers={tripMembers}
-                contextReservations={reservations.filter(r => r.type === 'hotel')}
+                contextReservations={reservations.filter(r => !TRANSPORT_TYPES.has(r.type))}
                 onEditExpense={(item) => openBookingExpense({ editItem: item })}
-                onShowOnMap={(r) => showReservationOnMap(r, { visibleConnections, toggleConnection, selectDay: (id) => handleSelectDay(id), selectPlace: setSelectedPlaceId, openPlan: () => handleTabChange('plan') })}
-                isOnMap={(r) => visibleConnections.includes(r.id)}
+                onShowOnMap={showBookingOnMap}
+                isOnMap={isBookingOnMap}
               />
             </LazyPanel>
           </div>
@@ -1045,8 +1047,8 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
                 tripMembers={tripMembers}
                 contextReservations={reservations.filter(r => TRANSPORT_TYPES.has(r.type))}
                 onEditExpense={(item) => openBookingExpense({ editItem: item })}
-                onShowOnMap={(r) => showReservationOnMap(r, { visibleConnections, toggleConnection, selectDay: (id) => handleSelectDay(id), selectPlace: setSelectedPlaceId, openPlan: () => handleTabChange('plan') })}
-                isOnMap={(r) => visibleConnections.includes(r.id)}
+                onShowOnMap={showBookingOnMap}
+                isOnMap={isBookingOnMap}
               />
             </LazyPanel>
           </div>
@@ -1157,35 +1159,28 @@ function TripPlannerPageDesktop(): React.ReactElement | null {
           onClose={() => setTransitJourney(null)}
           onSave={async (fields) => { await tripActions.updateReservation(tripId, transitJourney.id, fields); setTransitJourney(null) }}
           onDelete={async () => { await handleDeleteReservation(transitJourney.id); setTransitJourney(null) }}
-          onChangeRoute={() => {
-            // Re-enter the transit search seeded with this journey's route; the
-            // existing reservation is REPLACED on save (editingTransport drives
-            // handleSaveTransport's update path).
-            const eps = transitJourney.endpoints || []
-            const from = eps.find(e => e.role === 'from')
-            const to = eps.find(e => e.role === 'to')
-            setTransitPrefill({
-              from: from ? { name: from.name, lat: from.lat, lng: from.lng } : null,
-              to: to ? { name: to.name, lat: to.lat, lng: to.lng } : null,
-            })
-            setEditingTransport(transitJourney)
-            setTransportModalDayId(transitJourney.day_id ?? null)
-            setTransportModalAutomated(true)
-            setTransitJourney(null)
-            setShowTransportModal(true)
-          }}
-          onEditDetails={() => {
-            // Hand off to the full transport editor (travelers, costs, files,
-            // booking code, status) — the same modal mobile opens; an
-            // unchanged-endpoints save keeps the stored itinerary (#2148).
-            const current = reservations.find(r => r.id === transitJourney.id) ?? transitJourney
-            setEditingTransport(current)
-            setTransportModalDayId(current.day_id ?? null)
-            setTransportModalAutomated(false)
-            setTransitPrefill(null)
-            setTransitJourney(null)
-            setShowTransportModal(true)
-          }}
+          onChangeRoute={() => changeTransitRoute(transitJourney)}
+          // The store copy may be newer than the journey held in state.
+          onEditDetails={() => openTransportEditor(reservations.find(r => r.id === transitJourney.id) ?? transitJourney)}
+        />
+      )}
+      {/* A booking clicked on the desktop plan: its detail first, the editor one Edit away. */}
+      {bookingDetail && (
+        <BookingDetailPopup
+          r={bookingDetail}
+          tripId={tripId}
+          days={days}
+          assignments={assignments}
+          files={files}
+          canEdit={can('reservation_edit', trip)}
+          onClose={closeBookingDetail}
+          onEdit={bookingDetailEditor}
+          onDelete={handleDeleteReservation}
+          onShowOnMap={showBookingOnMap}
+          isOnMap={isBookingOnMap}
+          onEditExpense={(item) => openBookingExpense({ editItem: item })}
+          onChangeRoute={bookingDetailChangeRoute}
+          onNavigateToFiles={() => handleTabChange('dateien')}
         />
       )}
       {expenseEditor && (
diff --git a/client/src/pages/TripPlannerPage.wiring.test.tsx b/client/src/pages/TripPlannerPage.wiring.test.tsx
index 2052d73d2..2b779c4e2 100644
--- a/client/src/pages/TripPlannerPage.wiring.test.tsx
+++ b/client/src/pages/TripPlannerPage.wiring.test.tsx
@@ -1,4 +1,4 @@
-// FE-PAGE-TPW-001 to FE-PAGE-TPW-064
+// FE-PAGE-TPW-001 to FE-PAGE-TPW-072
 //
 // The planner page is a wiring container: everything stateful lives in
 // useTripPlanner (covered in src/pages/tripPlanner/useTripPlanner.test.tsx).
@@ -81,6 +81,7 @@ vi.mock('../components/Planner/PlaceFormModal', () => ({ default: stub('placeFor
 vi.mock('../components/Planner/ReservationModal', () => ({ ReservationModal: stub('reservationModal') }))
 vi.mock('../components/Planner/TransportModal', () => ({ TransportModal: stub('transportModal', 'transport-modal') }))
 vi.mock('../components/Planner/TransitJourneyModal', () => ({ default: stub('transitModal', 'transit-modal') }))
+vi.mock('../components/Planner/bookings/BookingDetailHost', () => ({ BookingDetailPopup: stub('bookingDetail', 'booking-detail') }))
 vi.mock('../components/Planner/BookingImportModal', () => ({ default: stub('bookingImport') }))
 vi.mock('../components/Planner/AirTrailImportModal', () => ({ default: stub('airtrailImport') }))
 vi.mock('../components/Planner/ReservationsPanel', () => ({ default: stub('reservationsPanel', 'reservations-panel') }))
@@ -276,6 +277,16 @@ function baseState(): HookState {
     setTransitPrefill: vi.fn(),
     transitJourney: null,
     setTransitJourney: vi.fn(),
+    openTransportEditor: vi.fn(),
+    changeTransitRoute: vi.fn(),
+    bookingDetail: null,
+    openBookingDetail: vi.fn(),
+    openBookingFromDayList: vi.fn(),
+    closeBookingDetail: vi.fn(),
+    bookingDetailEditor: undefined,
+    bookingDetailChangeRoute: undefined,
+    showBookingOnMap: vi.fn(),
+    isBookingOnMap: vi.fn(() => false),
     reservationPrefill: null,
     transportPrefill: null,
     importReviewActive: false,
@@ -445,12 +456,25 @@ describe('TripPlannerPage — plan tab', () => {
     expect(props('map').rightWidth).toBe(0)
   })
 
-  it('FE-PAGE-TPW-010: clicking a booking route on the map opens its transport detail', () => {
+  it('FE-PAGE-TPW-010: clicking a booking route on the map opens its booking detail', () => {
     const reservation = buildReservation({ id: 3, type: 'train' })
     renderPage({ reservations: [reservation] })
 
+    act(() => { props('map').onReservationClick(3) })
+    expect(hookState.openBookingDetail).toHaveBeenCalledWith(reservation)
+    expect(hookState.setMapTransportDetail).not.toHaveBeenCalled()
+
+    act(() => { props('map').onReservationClick(999) })
+    expect(hookState.openBookingDetail).toHaveBeenCalledTimes(1)
+  })
+
+  it("FE-PAGE-TPW-065: the narrow layout keeps sending a map booking to the day list's transport view", () => {
+    const reservation = buildReservation({ id: 3, type: 'train' })
+    renderPage({ reservations: [reservation], isMobile: true })
+
     act(() => { props('map').onReservationClick(3) })
     expect(hookState.setMapTransportDetail).toHaveBeenCalledWith(reservation)
+    expect(hookState.openBookingDetail).not.toHaveBeenCalled()
 
     act(() => { props('map').onReservationClick(999) })
     expect(hookState.setMapTransportDetail).toHaveBeenCalledTimes(1)
@@ -931,18 +955,91 @@ describe('TripPlannerPage — mobile drawers', () => {
   })
 })
 
+describe("TripPlannerPage — the plan's booking detail", () => {
+  it("FE-PAGE-TPW-066: the desktop day list and the inspector open a booking's detail", () => {
+    renderPage({ selectedPlace: place })
+
+    // The day list's own opener: its rows asked for day_edit before the editor.
+    expect(props('dayPlan').onOpenBooking).toBe(hookState.openBookingFromDayList)
+    expect(props('inspector').onOpenBooking).toBe(hookState.openBookingDetail)
+    // The inspector keeps its editors: the detail's Edit goes on to them.
+    expect(props('inspector').onEditReservation).toBeTypeOf('function')
+  })
+
+  it("FE-PAGE-TPW-067: the day card opens a booking's detail on the desktop only", () => {
+    renderPage({ showDayDetail: day })
+    expect(props('dayDetail').onOpenBooking).toBe(hookState.openBookingDetail)
+    cleanup()
+
+    renderPage({ showDayDetail: day, isMobile: true })
+    expect(props('dayDetail').onOpenBooking).toBeUndefined()
+  })
+
+  it('FE-PAGE-TPW-068: the narrow layout keeps its day list paths, in the panel and in the drawer', () => {
+    renderPage({ isMobile: true })
+    expect(props('dayPlan').onOpenBooking).toBeUndefined()
+    cleanup()
+
+    renderPage({ mobileSidebarOpen: 'left' })
+    // The drawer's copy renders last; it never gets the detail.
+    expect(props('dayPlan').onOpenTransit).toBeTypeOf('function')
+    expect(props('dayPlan').onOpenBooking).toBeUndefined()
+  })
+
+  it('FE-PAGE-TPW-069: nothing is mounted while no booking is open', () => {
+    renderPage()
+    expect(screen.queryByTestId('booking-detail')).not.toBeInTheDocument()
+  })
+
+  it("FE-PAGE-TPW-070: the open booking's detail gets its rights and hands every way out to the planner", async () => {
+    const train = buildReservation({ id: 3, type: 'train', title: 'Shinkansen' })
+    const editor = vi.fn()
+    const changeRoute = vi.fn()
+    renderPage({ bookingDetail: train, bookingDetailEditor: editor, bookingDetailChangeRoute: changeRoute })
+
+    expect(screen.getByTestId('booking-detail')).toBeInTheDocument()
+    const d = props('bookingDetail')
+    expect(d.r).toBe(train)
+    expect(d.tripId).toBe(42)
+    expect(d.canEdit).toBe(true)
+    expect(d.onEdit).toBe(editor)
+    expect(d.onChangeRoute).toBe(changeRoute)
+    expect(d.onClose).toBe(hookState.closeBookingDetail)
+    expect(d.onDelete).toBe(hookState.handleDeleteReservation)
+    expect(d.onShowOnMap).toBe(hookState.showBookingOnMap)
+    expect(d.isOnMap).toBe(hookState.isBookingOnMap)
+
+    act(() => { d.onNavigateToFiles() })
+    expect(hookState.handleTabChange).toHaveBeenCalledWith('dateien')
+
+    act(() => { d.onEditExpense({ id: 12, name: 'Ticket' }) })
+    await waitFor(() => expect(screen.getByTestId('expense-modal')).toBeInTheDocument())
+    expect(props('expenseModal').editing).toEqual({ id: 12, name: 'Ticket' })
+  })
+
+  it('FE-PAGE-TPW-071: without the booking right the detail stays read-only', () => {
+    const can = vi.fn((action: string) => action !== 'reservation_edit')
+    renderPage({ bookingDetail: buildReservation({ id: 3 }), can })
+    expect(props('bookingDetail').canEdit).toBe(false)
+  })
+})
+
 describe('TripPlannerPage — other tabs', () => {
   const flight = buildReservation({ id: 1, type: 'flight' })
   const hotel = buildReservation({ id: 2, type: 'hotel' })
   const transit = buildReservation({ id: 3, type: 'train' })
 
   it('FE-PAGE-TPW-034: the transports tab lists only transport bookings and wires its actions', async () => {
-    renderPage({ activeTab: 'transports', reservations: [flight, hotel, transit] })
+    const dinner = buildReservation({ id: 4, type: 'restaurant' })
+    renderPage({ activeTab: 'transports', reservations: [flight, hotel, transit, dinner] })
     // The panel loads on demand now; its props only exist once the chunk is in.
     await screen.findByTestId('reservations-panel')
 
     const listed = props('reservationsPanel').reservations as unknown as Reservation[]
     expect(listed.map(r => r.id)).toEqual([1, 3])
+    // The timeline's "other tab" lane gets every booking of the Book tab, not only the stays.
+    const context = props('reservationsPanel').contextReservations as unknown as Reservation[]
+    expect(context.map(r => r.id)).toEqual([2, 4])
 
     act(() => { props('reservationsPanel').onAdd() })
     expect(hookState.setTransportModalAutomated).toHaveBeenCalledWith(false)
@@ -954,7 +1051,7 @@ describe('TripPlannerPage — other tabs', () => {
     expect(hookState.setShowAirTrailImport).toHaveBeenCalledWith(true)
 
     act(() => { props('reservationsPanel').onEdit(transit) })
-    expect(hookState.setEditingTransport).toHaveBeenCalledWith(transit)
+    expect(hookState.openTransportEditor).toHaveBeenCalledWith(transit)
 
     act(() => { props('reservationsPanel').onDelete(1) })
     expect(hookState.handleDeleteReservation).toHaveBeenCalledWith(1)
@@ -963,14 +1060,34 @@ describe('TripPlannerPage — other tabs', () => {
     expect(hookState.handleTabChange).toHaveBeenCalledWith('dateien')
   })
 
-  it('FE-PAGE-TPW-035: a saved transit journey opens the journey view instead of the editor', async () => {
+  it("FE-PAGE-TPW-035: the Transports tab edits a transit journey in the full editor and changes its route under the plan's right", async () => {
     const journey = buildReservation({ id: 9, type: 'transit' })
-    renderPage({ activeTab: 'transports', reservations: [journey] })
+    const changeRoute = vi.fn()
+    renderPage({ activeTab: 'transports', reservations: [journey], bookingDetailChangeRoute: changeRoute })
     await screen.findByTestId('reservations-panel')
 
     act(() => { props('reservationsPanel').onEdit(journey) })
-    expect(hookState.setTransitJourney).toHaveBeenCalledWith(journey)
-    expect(hookState.setShowTransportModal).not.toHaveBeenCalled()
+    expect(hookState.openTransportEditor).toHaveBeenCalledWith(journey)
+    expect(hookState.setTransitJourney).not.toHaveBeenCalled()
+
+    // The same day_edit-gated handler the plan's detail gets.
+    expect(props('reservationsPanel').onChangeRoute).toBe(changeRoute)
+    cleanup()
+
+    // Without day_edit the hook hands over none, and the tab offers none.
+    renderPage({ activeTab: 'transports', reservations: [journey], bookingDetailChangeRoute: undefined })
+    await screen.findByTestId('reservations-panel')
+    expect(props('reservationsPanel').onChangeRoute).toBeUndefined()
+  })
+
+  it('FE-PAGE-TPW-072: both booking tabs show a booking on the map the way the plan does', async () => {
+    for (const activeTab of ['transports', 'buchungen']) {
+      renderPage({ activeTab, reservations: [flight, hotel] })
+      await screen.findByTestId('reservations-panel')
+      expect(props('reservationsPanel').onShowOnMap).toBe(hookState.showBookingOnMap)
+      expect(props('reservationsPanel').isOnMap).toBe(hookState.isBookingOnMap)
+      cleanup()
+    }
   })
 
   it('FE-PAGE-TPW-036: the bookings tab lists everything that is not transport', async () => {
@@ -1265,26 +1382,12 @@ describe('TripPlannerPage — modals', () => {
     expect(hookState.handleDeleteReservation).toHaveBeenCalledWith(9)
 
     act(() => { props('transitModal').onChangeRoute() })
-    expect(hookState.setTransitPrefill).toHaveBeenCalledWith({
-      from: { name: 'Kyoto', lat: 34.9, lng: 135.7 },
-      to: { name: 'Osaka', lat: 34.7, lng: 135.5 },
-    })
-    expect(hookState.setEditingTransport).toHaveBeenCalledWith(journey)
-    expect(hookState.setTransportModalAutomated).toHaveBeenCalledWith(true)
+    expect(hookState.changeTransitRoute).toHaveBeenCalledWith(journey)
 
     act(() => { props('transitModal').onClose() })
     expect(hookState.setTransitJourney).toHaveBeenLastCalledWith(null)
   })
 
-  it('FE-PAGE-TPW-056: a journey without endpoints seeds an empty search', () => {
-    const journey = buildReservation({ id: 9, type: 'transit', day_id: null })
-    renderPage({ transitJourney: journey, reservations: [] })
-
-    act(() => { props('transitModal').onChangeRoute() })
-    expect(hookState.setTransitPrefill).toHaveBeenCalledWith({ from: null, to: null })
-    expect(hookState.setTransportModalDayId).toHaveBeenCalledWith(null)
-  })
-
   it('FE-PAGE-TPW-061: edit details hands the fresh reservation to the full transport editor', () => {
     const stale = buildReservation({ id: 9, type: 'transit', day_id: 7 })
     // The store copy may be newer than the journey held in state — the fresh
@@ -1293,12 +1396,7 @@ describe('TripPlannerPage — modals', () => {
     renderPage({ transitJourney: stale, reservations: [fresh] })
 
     act(() => { props('transitModal').onEditDetails() })
-    expect(hookState.setEditingTransport).toHaveBeenCalledWith(fresh)
-    expect(hookState.setTransportModalDayId).toHaveBeenCalledWith(7)
-    expect(hookState.setTransportModalAutomated).toHaveBeenCalledWith(false)
-    expect(hookState.setTransitPrefill).toHaveBeenCalledWith(null)
-    expect(hookState.setTransitJourney).toHaveBeenCalledWith(null)
-    expect(hookState.setShowTransportModal).toHaveBeenCalledWith(true)
+    expect(hookState.openTransportEditor).toHaveBeenCalledWith(fresh)
   })
 
   it('FE-PAGE-TPW-057: a booking opens the expense editor, prefilled or on an existing item', async () => {
diff --git a/client/src/pages/tripPlanner/useTripPlanner.test.tsx b/client/src/pages/tripPlanner/useTripPlanner.test.tsx
index 7915fa17f..c35d7f2cd 100644
--- a/client/src/pages/tripPlanner/useTripPlanner.test.tsx
+++ b/client/src/pages/tripPlanner/useTripPlanner.test.tsx
@@ -1,4 +1,4 @@
-// FE-TP-HOOK-001 to FE-TP-HOOK-163
+// FE-TP-HOOK-001 to FE-TP-HOOK-175
 import React from 'react'
 import { renderHook, act, waitFor } from '@testing-library/react'
 import { TranslationProvider } from '../../i18n/TranslationContext'
@@ -1941,6 +1941,202 @@ describe('useTripPlanner — bookings and transports', () => {
 
     expect(toasts.some(t => t.message === 'referenced')).toBe(true)
   })
+
+  it('FE-TP-HOOK-164: a transit journey opens in the full transport editor and leaves the journey view', async () => {
+    seedTrip()
+    const journey = buildReservation({ id: 9, type: 'transit', day_id: 7 })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.setTransitJourney(journey) })
+    act(() => { result.current.openTransportEditor(journey) })
+
+    expect(result.current.editingTransport).toBe(journey)
+    expect(result.current.transportModalDayId).toBe(7)
+    expect(result.current.transportModalAutomated).toBe(false)
+    expect(result.current.transitPrefill).toBeNull()
+    expect(result.current.transitJourney).toBeNull()
+    expect(result.current.showTransportModal).toBe(true)
+  })
+
+  it('FE-TP-HOOK-165: changing a journey\'s route seeds the transit search with its stops', async () => {
+    seedTrip()
+    const journey = buildReservation({
+      id: 9, type: 'transit', day_id: 7,
+      endpoints: [
+        { role: 'from', name: 'Kyoto', lat: 34.9, lng: 135.7 },
+        { role: 'to', name: 'Osaka', lat: 34.7, lng: 135.5 },
+      ] as never,
+    })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.changeTransitRoute(journey) })
+
+    expect(result.current.transitPrefill).toEqual({
+      from: { name: 'Kyoto', lat: 34.9, lng: 135.7 },
+      to: { name: 'Osaka', lat: 34.7, lng: 135.5 },
+    })
+    expect(result.current.editingTransport).toBe(journey)
+    expect(result.current.transportModalDayId).toBe(7)
+    expect(result.current.transportModalAutomated).toBe(true)
+    expect(result.current.showTransportModal).toBe(true)
+  })
+
+  it('FE-TP-HOOK-166: a journey without stops or day seeds an empty search', async () => {
+    seedTrip()
+    const journey = buildReservation({ id: 9, type: 'transit', day_id: null })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.changeTransitRoute(journey) })
+
+    expect(result.current.transitPrefill).toEqual({ from: null, to: null })
+    expect(result.current.transportModalDayId).toBeNull()
+  })
+})
+
+describe("useTripPlanner — the plan's booking detail", () => {
+  const routedTrain = (over: Partial<Reservation> = {}) => buildReservation({
+    id: 20, type: 'train', title: 'Shinkansen', day_id: 7,
+    endpoints: [
+      { role: 'from', name: 'Tokyo', lat: 35.68, lng: 139.76, sequence: 0 },
+      { role: 'to', name: 'Kyoto', lat: 34.98, lng: 135.75, sequence: 1 },
+    ] as never,
+    ...over,
+  })
+
+  it("FE-TP-HOOK-167: a booking opens by id, shows the store's copy and closes by itself once it is gone", async () => {
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [dinner] })
+
+    const { result } = await renderPlanner()
+    expect(result.current.bookingDetail).toBeNull()
+
+    act(() => { result.current.openBookingDetail(dinner) })
+    expect(result.current.bookingDetail).toBe(dinner)
+
+    const renamed = { ...dinner, title: 'Dinner at Kikunoi' }
+    act(() => { useTripStore.setState({ reservations: [renamed] }) })
+    expect(result.current.bookingDetail).toBe(renamed)
+
+    act(() => { useTripStore.setState({ reservations: [] }) })
+    expect(result.current.bookingDetail).toBeNull()
+
+    act(() => { useTripStore.setState({ reservations: [renamed] }) })
+    act(() => { result.current.closeBookingDetail() })
+    expect(result.current.bookingDetail).toBeNull()
+  })
+
+  it('FE-TP-HOOK-168: Edit opens the transport editor for a transport and the booking editor for anything else', async () => {
+    const train = routedTrain()
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [train, dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.openBookingDetail(train) })
+    expect(result.current.bookingDetailEditor).toBe(result.current.openTransportEditor)
+    act(() => { result.current.bookingDetailEditor!(train) })
+    expect(result.current.editingTransport).toBe(train)
+    expect(result.current.showTransportModal).toBe(true)
+    expect(result.current.showReservationModal).toBe(false)
+
+    act(() => { result.current.openBookingDetail(dinner) })
+    act(() => { result.current.bookingDetailEditor!(dinner) })
+    expect(result.current.editingReservation).toBe(dinner)
+    expect(result.current.showReservationModal).toBe(true)
+  })
+
+  it('FE-TP-HOOK-169: without day_edit a transport has no editor and a journey no route change', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 2, role: 'user' }) })
+    usePermissionsStore.setState({ permissions: { day_edit: 'admin' } })
+    const train = routedTrain()
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [train, dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.openBookingDetail(train) })
+    expect(result.current.bookingDetailEditor).toBeUndefined()
+    expect(result.current.bookingDetailChangeRoute).toBeUndefined()
+
+    // The booking editor asks for reservation_edit only, as on the Bookings tab.
+    act(() => { result.current.openBookingDetail(dinner) })
+    expect(typeof result.current.bookingDetailEditor).toBe('function')
+  })
+
+  it('FE-TP-HOOK-170: without reservation_edit a booking has no editor, while a journey keeps its route change', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 2, role: 'user' }) })
+    usePermissionsStore.setState({ permissions: { reservation_edit: 'admin' } })
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.openBookingDetail(dinner) })
+
+    expect(result.current.bookingDetailEditor).toBeUndefined()
+    expect(result.current.bookingDetailChangeRoute).toBe(result.current.changeTransitRoute)
+  })
+
+  it('FE-TP-HOOK-171: On map switches a route on and opens its day, and a second press switches it off', async () => {
+    const train = routedTrain()
+    seedTrip({ reservations: [train] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.showBookingOnMap(train) })
+
+    expect(result.current.visibleConnections).toEqual([20])
+    expect(actions.setSelectedDay).toHaveBeenCalledWith(7)
+    expect(result.current.activeTab).toBe('plan')
+
+    act(() => { result.current.showBookingOnMap(train) })
+    expect(result.current.visibleConnections).toEqual([])
+  })
+
+  it('FE-TP-HOOK-172: On map for a booking at a place selects that place on its day', async () => {
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner', place_id: 33, day_id: 7 })
+    seedTrip({ reservations: [dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.showBookingOnMap(dinner) })
+
+    expect(actions.setSelectedDay).toHaveBeenCalledWith(7)
+    expect(result.current.selectedPlaceId).toBe(33)
+  })
+  it('FE-TP-HOOK-173: a booking opened from the day list asks for day_edit before its editor, as that row did', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 2, role: 'user' }) })
+    usePermissionsStore.setState({ permissions: { day_edit: 'admin' } })
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.openBookingFromDayList(dinner) })
+    expect(result.current.bookingDetail).toBe(dinner)
+    expect(result.current.bookingDetailEditor).toBeUndefined()
+
+    // The same booking from anywhere else keeps the booking editor's own right.
+    act(() => { result.current.openBookingDetail(dinner) })
+    expect(typeof result.current.bookingDetailEditor).toBe('function')
+  })
+
+  it('FE-TP-HOOK-174: with day_edit the day list hands a booking to its editor like any other place', async () => {
+    const dinner = buildReservation({ id: 5, type: 'restaurant', title: 'Dinner' })
+    seedTrip({ reservations: [dinner] })
+
+    const { result } = await renderPlanner()
+    act(() => { result.current.openBookingFromDayList(dinner) })
+    act(() => { result.current.bookingDetailEditor!(dinner) })
+
+    expect(result.current.editingReservation).toBe(dinner)
+    expect(result.current.showReservationModal).toBe(true)
+  })
+
+  it('FE-TP-HOOK-175: a booking is on the map while its route is switched on', async () => {
+    const train = routedTrain()
+    seedTrip({ reservations: [train] })
+
+    const { result } = await renderPlanner()
+    expect(result.current.isBookingOnMap(train)).toBe(false)
+
+    act(() => { result.current.showBookingOnMap(train) })
+    expect(result.current.isBookingOnMap(train)).toBe(true)
+  })
 })
 
 describe('useTripPlanner — booking import review', () => {
diff --git a/client/src/pages/tripPlanner/useTripPlanner.ts b/client/src/pages/tripPlanner/useTripPlanner.ts
index 934d0cfb5..13bff0ac3 100644
--- a/client/src/pages/tripPlanner/useTripPlanner.ts
+++ b/client/src/pages/tripPlanner/useTripPlanner.ts
@@ -72,6 +72,7 @@ import { applyStayStops } from '../../store/stayStops'
 import { placesForDays, resolvePoolAssignmentId } from './tripPlannerModel'
 import { isDeepLinkableTripTab, TRIP_TAB_LABEL_KEYS } from '../../constants/tripTabs'
 import { isRoutableReservation } from '../../utils/reservationRoutes'
+import { showReservationOnMap } from '../../components/Planner/bookings/showOnMap'
 import {
   parseStoredConnections, resolveEffectiveConnections, resolveVisibleConnectionIds,
   toggleConnectionId, toggleAllConnections as flipAllConnectionsMode,
@@ -313,6 +314,9 @@ export function useTripPlanner() {
   // the panel along instead of leaving it on a day that is gone.
   const showDayDetail = dayDetail && days.some(d => d.id === dayDetail.id) ? dayDetail : null
   const [dayDetailCollapsed, setDayDetailCollapsed] = useState(false)
+  // The day's "+" can ask for a new stay: the details panel opens on that day and
+  // takes the request once, then hands it back so a later opening stays plain.
+  const [stayPickerDayId, setStayPickerDayId] = useState<number | null>(null)
   const [showPlaceForm, setShowPlaceForm] = useState<boolean>(false)
   const [editingPlace, setEditingPlace] = useState<Place | null>(null)
   const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string; stop_type?: RoadtripStopType | null; duration_minutes?: number } | null>(null)
@@ -418,6 +422,40 @@ export function useTripPlanner() {
   const [transportModalAutomated, setTransportModalAutomated] = useState<boolean>(false)
   const [transitPrefill, setTransitPrefill] = useState<{ from?: { name: string; lat: number; lng: number } | null; to?: { name: string; lat: number; lng: number } | null; time?: string | null } | null>(null)
   const [transitJourney, setTransitJourney] = useState<Reservation | null>(null)
+  // The booking whose detail is open over the desktop plan: a day row, a rental pill,
+  // the inspector's booking card, a map endpoint or the road-trip rail opened it.
+  // Held by id, so the dialog shows the store's copy and goes away by itself once the
+  // booking is deleted. `fromDayList` remembers that a row of the day list opened it,
+  // whose editor also asks for day_edit.
+  const [bookingDetailOpen, setBookingDetailOpen] = useState<{ id: number; fromDayList: boolean } | null>(null)
+
+  // The full transport editor on a saved entry. For a transit journey that is where
+  // travellers, costs, files, code and status live; an unchanged-endpoints save keeps
+  // the stored itinerary (#2148).
+  const openTransportEditor = useCallback((r: Reservation) => {
+    setEditingTransport(r)
+    setTransportModalDayId(r.day_id ?? null)
+    setTransportModalAutomated(false)
+    setTransitPrefill(null)
+    setTransitJourney(null)
+    setShowTransportModal(true)
+  }, [])
+  // Re-enters the transit search seeded with a journey's route; the journey is
+  // REPLACED on save (editingTransport drives handleSaveTransport's update path).
+  const changeTransitRoute = useCallback((r: Reservation) => {
+    const eps = r.endpoints || []
+    const from = eps.find(e => e.role === 'from')
+    const to = eps.find(e => e.role === 'to')
+    setTransitPrefill({
+      from: from ? { name: from.name, lat: from.lat, lng: from.lng } : null,
+      to: to ? { name: to.name, lat: to.lat, lng: to.lng } : null,
+    })
+    setEditingTransport(r)
+    setTransportModalDayId(r.day_id ?? null)
+    setTransportModalAutomated(true)
+    setTransitJourney(null)
+    setShowTransportModal(true)
+  }, [])
 
   // The bottom-nav "+" is context-aware per tab: on the Bookings / Transports tabs
   // it opens the booking / transport modal via ?create=reservation|transport
@@ -2638,6 +2676,34 @@ export function useTripPlanner() {
     catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
+  // ── The plan's booking detail ───────────────────────────────────────────────
+  // A click on a booking in the plan shows it first; the editor is one Edit away.
+  const bookingDetail = bookingDetailOpen == null ? null : reservations.find(r => r.id === bookingDetailOpen.id) ?? null
+  const openBookingDetail = (r: Reservation) => setBookingDetailOpen({ id: r.id, fromDayList: false })
+  const openBookingFromDayList = (r: Reservation) => setBookingDetailOpen({ id: r.id, fromDayList: true })
+  const closeBookingDetail = () => setBookingDetailOpen(null)
+  // Edit opens the editor the click used to open straight away, under the same right:
+  // day_edit for the transport editor, reservation_edit for the booking editor, and
+  // from a row of the day list day_edit on top, as that row asked for it. Without
+  // the right the detail has no Edit.
+  const editReservation = (r: Reservation) => { setEditingReservation(r); setShowReservationModal(true) }
+  const editorFor = (r: Reservation | null, fromDayList: boolean) => {
+    if (!r) return undefined
+    if (TRANSPORT_TYPES.has(r.type)) return can('day_edit', trip) ? openTransportEditor : undefined
+    if (fromDayList && !can('day_edit', trip)) return undefined
+    return can('reservation_edit', trip) ? editReservation : undefined
+  }
+  const bookingDetailEditor = editorFor(bookingDetail, !!bookingDetailOpen?.fromDayList)
+  // A transit journey is searched again under the right its journey view asked for,
+  // on the plan and on the Transports tab alike.
+  const bookingDetailChangeRoute = can('day_edit', trip) ? changeTransitRoute : undefined
+  // "On map", from the plan and from both booking tabs: the route switches on and its
+  // day opens, or the place is selected.
+  const showBookingOnMap = (r: Reservation) => showReservationOnMap(r, {
+    visibleConnections, toggleConnection, selectDay: id => handleSelectDay(id), selectPlace: setSelectedPlaceId, openPlan: () => handleTabChange('plan'),
+  })
+  const isBookingOnMap = (r: Reservation) => visibleConnections.includes(r.id)
+
   // ── Review-before-save booking import ───────────────────────────────────────
   // Match an existing trip place by name, else geocode the reviewed address and
   // create one. Returns the place id (or null if even creation failed).
@@ -2858,6 +2924,7 @@ export function useTripPlanner() {
     startResizeLeft, startResizeRight,
     selectedPlaceId, selectedAssignmentId, setSelectedPlaceId, selectAssignment,
     showDayDetail, setShowDayDetail, dayDetailCollapsed, setDayDetailCollapsed,
+    stayPickerDayId, setStayPickerDayId,
     showPlaceForm, setShowPlaceForm, editingPlace, setEditingPlace,
     prefillCoords, setPrefillCoords, editingAssignmentId, setEditingAssignmentId,
     placeFormDayId, setPlaceFormDayId, reservationModalDayId, setReservationModalDayId,
@@ -2888,6 +2955,8 @@ export function useTripPlanner() {
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
     transportModalAutomated, setTransportModalAutomated, transitPrefill, setTransitPrefill, transitJourney, setTransitJourney,
+    openTransportEditor, changeTransitRoute,
+    bookingDetail, openBookingDetail, openBookingFromDayList, closeBookingDetail, bookingDetailEditor, bookingDetailChangeRoute, showBookingOnMap, isBookingOnMap,
     reservationPrefill, transportPrefill, importReviewActive, startImportReview, advanceImportReview,
     receiptExpense, clearReceiptExpense: () => setReceiptExpense(null),
     routeShown, setRouteShown, autoShowRoute, transitRoutesShown, routeProfile, setRouteProfile, routeVias, fitKey, setFitKey,
diff --git a/client/tests/unit/mobile/dashboard/MDashboard.test.tsx b/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
index fd421a87a..3ed9d715a 100644
--- a/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
+++ b/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
@@ -25,6 +25,10 @@ vi.mock('../../../../src/components/Plugins/TripCardBadges', () => ({
   useTripCardBadges: () => (tripId: number) => mocks.badges[tripId] ?? [],
 }));
 
+// This screen only ever renders on a phone. Shared dialogs it opens (the calendar
+// subscription) draw their phone look there and their desktop look above 768px.
+vi.mock('../../../../src/mobile/useIsPhone', () => ({ useIsPhone: () => true }));
+
 // Local-calendar date string — NOT toISOString(), which is the UTC date and
 // disagrees with the badge logic's wall-clock classification between local
 // midnight and the UTC rollover (these tests flaked in exactly that window).
diff --git a/shared/src/i18n/ar/budget.ts b/shared/src/i18n/ar/budget.ts
index 5139e9709..d667055f9 100644
--- a/shared/src/i18n/ar/budget.ts
+++ b/shared/src/i18n/ar/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'في الإجمالي فقط — لم تتم التسوية بعد',
   'costs.tapToInclude': 'اضغط للتضمين',
   'costs.amount': 'المبلغ',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'التقسيم',
+  'costs.splitEqually': 'بالتساوي',
+  'costs.splitCustom': 'مخصص',
+  'costs.splitTicket': 'الإيصال',
+  'costs.perPerson': '{amount} لكل شخص',
+  'costs.payersHint': 'حدّد من دفع واكتب المبلغ الذي دفعه كل منهم.',
+  'costs.splitHint.equally': 'يدفع كل من حُدّد الحصة نفسها.',
+  'costs.splitHint.custom': 'اكتب حصة كل شخص؛ ويجب أن يساوي مجموع الحصص المبلغ الإجمالي.',
+  'costs.splitHint.ticket': 'اكتب ما ورد في الإيصال وحدّد من أخذ كل عنصر.',
   'costs.filter.allCategories': 'كل الفئات',
   'costs.filter.allDays': 'كل الأيام',
   'costs.expensesCount': '{count} مصروف',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'الإيصالات',
   'costs.receiptsTitle': 'الإيصالات والفواتير',
   'costs.attachReceipt': 'إرفاق إيصال / فاتورة',
+  'costs.attach': 'إرفاق',
   'costs.scan.button': 'مسح إيصال',
   'costs.scan.reading': 'جارٍ قراءة الإيصال…',
   'costs.scan.review': 'مراجعة المصروف',
   'costs.scan.nothingRead': 'تعذّرت قراءة أي إيصال من هذه الصورة.',
   'costs.scan.failed': 'تعذّر بدء قراءة الإيصال.',
   'costs.scan.title': 'مسح إيصال',
-  'costs.scan.accepted': 'صورة لإيصال واحد (JPG أو PNG أو WEBP، حتى 10 ميغابايت). يقرأها نموذج الذكاء الاصطناعي في الخلفية، ثم تراجع المصروف قبل حفظه.',
+  'costs.scan.accepted':
+    'صورة لإيصال واحد (JPG أو PNG أو WEBP، حتى 10 ميغابايت). يقرأها نموذج الذكاء الاصطناعي في الخلفية، ثم تراجع المصروف قبل حفظه.',
   'costs.scan.dropHere': 'أفلت صورة الإيصال هنا، أو انقر لاختيار صورة أو التقاطها',
   'costs.scan.dropActive': 'أفلت الصورة لمسحها',
   'costs.scan.start': 'مسح',
diff --git a/shared/src/i18n/ar/dayplan.ts b/shared/src/i18n/ar/dayplan.ts
index 8e298bf4b..e02fc80c7 100644
--- a/shared/src/i18n/ar/dayplan.ts
+++ b/shared/src/i18n/ar/dayplan.ts
@@ -66,8 +66,8 @@ const dayplan: TranslationStrings = {
   'dayplan.gpxEmpty': 'لا يوجد شيء للتصدير بعد',
   'dayplan.gpxFailed': 'فشل تصدير GPX',
   'dayplan.pdfError': 'فشل تصدير PDF',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'توسيع كل الأيام', // en-fallback
+  'dayplan.collapseAll': 'طي كل الأيام', // en-fallback
   'dayplan.export': 'تصدير',
   'dayplan.exportIntro': 'خذ خطتك معك: كمستند أو في تقويمك أو على جهاز GPS.',
   'dayplan.exportDocument': 'مستند',
diff --git a/shared/src/i18n/ar/help.ts b/shared/src/i18n/ar/help.ts
index 5f08a144f..69f369f63 100644
--- a/shared/src/i18n/ar/help.ts
+++ b/shared/src/i18n/ar/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'ar' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'المساعدة والوثائق',
+  'help.search': 'ابحث في الوثائق…',
+  'help.contents': 'المحتويات',
+  'help.noResults': 'لا توجد صفحات مطابقة.',
+  'help.errorTitle': 'تعذّر تحميل هذه الصفحة',
+  'help.errorBody': 'يُجلب محتوى المساعدة من ويكي TREK. تحقّق من اتصالك وحاول مرة أخرى.',
 
   // center
   'help.center.button': 'مساعدة لهذه الشاشة',
@@ -941,7 +941,7 @@ const help: TranslationStrings = {
     '«Travel & map»: مسارات الحجوزات دائمًا على الخريطة، وزر استكشاف الأماكن، وتحسين المسار انطلاقًا من مكان إقامتك، وإخفاء رموز الحجز، ومسارات الحجوزات المسمّاة.',
   'help.ctx.settings-display.bullet.3':
     '«البدء»: هل يفتح TREK على لوحة التحكم أم على الرحلة النشطة، وأي علامة تبويب في الرحلة تظهر أولًا.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'المظهر',
   'help.ctx.settings-appearance.summary':
     'كيف يبدو TREK على هذا الحساب: فاتح أم داكن، ولون التمييز، والزجاج والحركة، وحجم النص، وأي الأدوات تعرضها لوحة التحكم. كل شيء يسري مباشرة، على كل جهاز تسجّل الدخول منه.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2070,9 +2070,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     'افتح المحطة التي يخصّها الحجز. تعرض البطاقة شريطًا فيه «مؤكد» أو «قيد الانتظار» واسم الحجز.',
   'help.guide.place-booking.step.2': 'يحمل الشريط «التاريخ» و«الوقت» و«رمز الحجز»، وما للحجز من ملاحظات.',
-  'help.guide.place-booking.step.3': 'انقر على الشريط. يُفتح نموذج الحجز نفسه عليه.',
+  'help.guide.place-booking.step.3': 'انقر على الشريط. يُفتح الحجز فوق الخريطة.',
   'help.guide.place-booking.step.4':
-    '«ربط بخطة اليوم» هو ما يثبّت حجزًا على محطة، وهو هنا يسمّي هذه المحطة سلفًا. أغلق النموذج من جديد.',
+    '«تعديل» في أسفل الحجز يفتح نموذجه الخاص. و«ربط بخطة اليوم» هناك هو ما يثبّت حجزًا على محطة، وهو هنا يسمّي هذه المحطة سلفًا. أغلق النموذج من جديد.',
   'help.guide.place-booking.step.5':
     'الحجز الجديد لمحطة يبدأ في عمود الأيام: مرّر المؤشر فوق المحطة وانقر على علامة + في نهايتها. يُفتح النموذج باسم «حجز جديد»، مربوطًا بها سلفًا.',
   'help.guide.place-booking.result':
@@ -2395,7 +2395,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'اللون يقول أين يقف الحجز: الصف الأخضر مؤكد، والكهرماني ما زال قيد الانتظار. والفنادق ليست في هذه القائمة، فلها كتلتها الخاصة تحتها.',
   'help.guide.day-bookings.step.4':
-    'القائمة تقرأ الحجوزات فقط. أما إنشاء حجز وتغييره فيتم في علامة التبويب «الحجوزات».',
+    'انقر على صف فيُفتح الحجز. «تعديل» في أسفله يغيّره؛ أما الحجوزات الجديدة فتُنشأ في علامة التبويب «الحجوزات».',
   'help.guide.day-bookings.result': 'كل ما هو مؤرخ في اليوم، وكل ما هو معلق بإحدى محطاته، في هذه القائمة الواحدة.',
   'help.guide.day-bookings.tip.1':
     'يقع الحجز على يوم بتاريخه هو. غير التاريخ في علامة التبويب «الحجوزات» فينتقل إلى اليوم الآخر من تلقاء نفسه.',
@@ -2894,13 +2894,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': 'أدخل مطعمًا أو فعالية أو جولة أو موقف سيارات أو أي شيء آخر إلى الرحلة يدويًا.',
   'help.guide.create-booking.step.1': 'انقر على «حجز يدوي» في أعلى يمين علامة التبويب. يُفتح «حجز جديد».',
   'help.guide.create-booking.step.2':
-    'اختر «نوع الحجز» من القائمة أعلى النموذج، بجانب «المسافرون». «إقامة» و«مطعم» و«فعالية» و«جولة» و«موقف سيارات» و«أخرى» هي الأنواع الستة التي تنشئها علامة التبويب هذه، ويتغير النموذج مع الاختيار: «إقامة» وحدها تستبدل بتواريخها مدى من الأيام.',
+    'انقر شارة النوع تحت العنوان، في رأس النموذج، واختر «نوع الحجز». «إقامة» و«مطعم» و«فعالية» و«جولة» و«موقف سيارات» و«أخرى» هي الأنواع الستة التي تنشئها علامة التبويب هذه، ويتغير النموذج مع الاختيار: «إقامة» وحدها تستبدل بتواريخها مدى من الأيام.',
   'help.guide.create-booking.step.3':
     'اكتب «العنوان». هو الحقل الوحيد الذي يصر عليه النموذج، ويبقى «إضافة» معطلًا إلى أن يحمل شيئًا.',
   'help.guide.create-booking.step.4':
     'حدّد «التاريخ» و«وقت البداية»، و«تاريخ الانتهاء» و«وقت النهاية» إن كان للحجز نهاية. لا تعرض التقاويم سوى أيام داخل الرحلة، والنهاية التي ليست بعد البداية تُعلن بالأحمر وتوقف «إضافة».',
   'help.guide.create-booking.step.5':
-    'أدخل «رمز الحجز» من التأكيد وحدّد «الحالة». «قيد الانتظار» أو «مؤكد» هو ما يقرر في أي القسمين تحط البطاقة.',
+    'أدخل «رمز الحجز» من التأكيد. شارة الحالة بجانب النوع تعرض «قيد الانتظار»؛ ونقرة واحدة تحوّلها إلى «مؤكد» ونقرة أخرى تعيدها، وهذا ما يقرر في أي القسمين تحط البطاقة.',
   'help.guide.create-booking.step.6': 'انقر على «إضافة».',
   'help.guide.create-booking.result':
     'يصير الحجز بطاقة في قسمه تحمل شريحة نوعه وتواريخه ورمزه، ويراه كل من في الرحلة وهو يظهر.',
@@ -2947,7 +2947,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'تحديد لمن الحجز',
   'help.guide.booking-travelers.goal': 'علّم المسافرين الذين يشملهم الحجز، ثم اعرض حجوزاتهم وحدها.',
   'help.guide.booking-travelers.step.1':
-    'افتح الحجز بقلم الرصاص. يقع «المسافرون» أعلى النموذج، بجانب «نوع الحجز»، ويعرض «تعيين المسافرين» ما دام لا أحد في الحجز.',
+    'افتح الحجز بقلم الرصاص. يقع «المسافرون» بجانب «رمز الحجز»، ويعرض «تعيين المسافرين» ما دام لا أحد في الحجز.',
   'help.guide.booking-travelers.step.2':
     'انقر عليه واختر الأشخاص الذين لهم هذا الحجز؛ وكل «ضيف» له اسم موجود في القائمة أيضًا. يحصل المختار على علامة صح وتظهر صورته الرمزية في الحقل. وانقر على الاسم ثانية لإزالته.',
   'help.guide.booking-travelers.step.3': 'انقر على «تحديث».',
@@ -3035,7 +3035,7 @@ const help: TranslationStrings = {
     'صحّح وقتًا، أو أضف الرمز الذي وصل متأخرًا، أو انقل حجزًا من «قيد الانتظار» إلى «مؤكد».',
   'help.guide.edit-booking.step.1': 'انقر على قلم الرصاص في رأس البطاقة. يُفتح «تعديل الحجز» بكل ما يعرفه الحجز.',
   'help.guide.edit-booking.step.2': 'غيّر ما يحتاج إلى تغيير، وهو هنا «رمز الحجز» الذي أرسله المشغّل أخيرًا.',
-  'help.guide.edit-booking.step.3': 'اضبط «الحالة» على «مؤكد».',
+  'help.guide.edit-booking.step.3': 'انقر شارة «قيد الانتظار» في رأس النموذج. فتتحول إلى «مؤكد».',
   'help.guide.edit-booking.step.4': 'انقر على «تحديث».',
   'help.guide.edit-booking.result':
     'تنتقل البطاقة: الحجز المؤكد يقف في قسم «مؤكد» خلف نقطة خضراء، ويرى كل من في الرحلة انتقاله.',
@@ -3311,17 +3311,18 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': 'فتح رحلة مخطط لها وتغييرها',
   'help.guide.change-transit-route.goal': 'اقرأ الرحلة محطة محطة، أو أعد تسميتها، أو ابحث عن المسار من جديد.',
   'help.guide.change-transit-route.step.1':
-    'في تبويب «المواصلات» تجلس الرحلات المخطط لها تحت «النقل العام التلقائي». انقر البطاقة.',
+    'في تبويب «المواصلات» تجلس الرحلات المخطط لها تحت «النقل العام التلقائي». انقر البطاقة؛ فتُفتح الرحلة كحجز.',
   'help.guide.change-transit-route.step.2':
     '«المدة» و«التحويلات» و«المشي» في الأعلى. و«خط سير الرحلة» تحتها يمشي بالرحلة محطة محطة، مع الأرصفة والمشي بين الخطوط.',
-  'help.guide.change-transit-route.step.3': '«تغيير المسار» يعيد تشغيل البحث، مملوءًا مسبقًا بطرفَي هذه الرحلة ويومها.',
+  'help.guide.change-transit-route.step.3':
+    '«تغيير المسار» في أسفل الحجز يعيد تشغيل البحث، مملوءًا مسبقًا بطرفَي هذه الرحلة ويومها.',
   'help.guide.change-transit-route.step.4':
-    'اختر رحلة أخرى وانقر «إضافة إلى اليوم»، فتحل محل القديمة. أما «تعديل التفاصيل»، بجانب «تغيير المسار»، فيفتح نموذج وسيلة النقل العادي، حيث «رمز الحجز» و«الحالة» و«المسافرون» والملفات.',
+    'اختر رحلة أخرى وانقر «إضافة إلى اليوم»، فتحل محل القديمة. أما «تعديل»، في الطرف الآخر من الشريط نفسه، فيفتح بدلًا من ذلك نموذج وسيلة النقل العادي، حيث «رمز الحجز» و«الحالة» و«المسافرون» والملاحظات والملفات.',
   'help.guide.change-transit-route.result':
     'تحمل الرحلة خط السير الجديد، وتعرض بطاقتها في تبويب «المواصلات» الخطوط والأوقات الجديدة.',
   'help.guide.change-transit-route.tip.1':
-    'عنوان الرحلة نص فقط: القلم بجانبه يعيد تسميتها دون المساس بالمسار. و«ملاحظات» تحتها تقبل markdown ولها تبويبا «تعديل» و«معاينة».',
-  'help.guide.change-transit-route.tip.2': '«حذف» في أسفل الرحلة يزيلها من خطة السفر، ويحتفظ اليوم بمحطاته.',
+    'العنوان في رأس الحجز يعيد تسمية الرحلة دون المساس بالمسار. أما ملاحظاتها فتُكتب في نموذج وسيلة النقل خلف «تعديل».',
+  'help.guide.change-transit-route.tip.2': '«حذف» في أسفل الحجز يزيل الرحلة من خطة السفر، ويحتفظ اليوم بمحطاته.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'تغيير طريقة قطع مرحلة واحدة',
   'help.guide.leg-travel-mode.goal':
@@ -3344,17 +3345,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'تغيير وسيلة نقل أو حذفها',
   'help.guide.edit-transport.goal': 'صحّح وقتًا أو منصة أو رمز حجز، أو أخرج الرحلة من خطة السفر.',
-  'help.guide.edit-transport.step.1': 'في خطة اليوم تكون وسيلة النقل صفًا ملونًا بين المحطات. انقره.',
+  'help.guide.edit-transport.step.1':
+    'في خطة اليوم تكون وسيلة النقل صفًا ملونًا بين المحطات. انقره؛ فيُفتح حجزها مع الأوقات والمسار و«رمز الحجز».',
   'help.guide.edit-transport.step.2':
-    'النموذج هو نفسه الذي أنشأها، مع «تعديل وسيلة النقل» في شريط عنوانه. كل شيء قابل للتغيير: النوع والمسار والأيام والأوقات و«رمز الحجز» و«الحالة».',
+    '«تعديل» في أسفل الحجز يفتح النموذج الذي أنشأها، مع «تعديل وسيلة النقل» في شريط عنوانه. كل شيء قابل للتغيير: النوع والمسار والأيام والأوقات و«رمز الحجز» و«الحالة».',
   'help.guide.edit-transport.step.3':
     'مسار الرحلة الجوية سلسلة مطارات، ومسار القطار سلسلة محطات. و«إضافة محطة توقف» تضع واحدة أخرى بينهما، وتحتفظ كل مرحلة بأوقاتها وبرقم رحلتها أو قطارها.',
   'help.guide.edit-transport.step.4':
-    'انقر «تحديث». ولإزالة وسيلة النقل تمامًا، استعمل سلة المهملات على بطاقتها في تبويب «المواصلات» وأكّد.',
+    'انقر «تحديث». ولإزالة وسيلة النقل تمامًا، استعمل «حذف» في أسفل حجزها، أو سلة المهملات على بطاقتها في تبويب «المواصلات»، وأكّد.',
   'help.guide.edit-transport.result':
     'يظهر التغيير في كل مكان تظهر فيه وسيلة النقل: تبويب «المواصلات»، واليوم الذي تجري فيه، وخطها على الخريطة.',
   'help.guide.edit-transport.tip.1':
-    'يُفتح النموذج نفسه من الجهتين: القلم على البطاقة في تبويب «المواصلات»، وصف وسيلة النقل نفسه في خطة اليوم. والاستثناء هو رحلة النقل العام المخطط لها: صفها يفتح عرض الرحلة، و«تعديل التفاصيل» هناك يقود إلى هذا النموذج.',
+    'يُفتح النموذج نفسه من الجهتين: عبر «تعديل» في الحجز الذي يفتحه صف في خطة اليوم، وعبر القلم على البطاقة في تبويب «المواصلات». ورحلة النقل العام المخطط لها تُفتح كحجز أيضًا؛ «تغيير المسار» هناك يبحث من جديد، و«تعديل» يقود إلى هذا النموذج.',
   'help.guide.edit-transport.tip.2':
     'نقل وسيلة نقل إلى يوم آخر لا يحتاج النموذج أصلًا: اسحب صفها من بطاقة يوم إلى التالية.',
   // transport-on-map
diff --git a/shared/src/i18n/ar/places.ts b/shared/src/i18n/ar/places.ts
index cbc935fcd..c595766e2 100644
--- a/shared/src/i18n/ar/places.ts
+++ b/shared/src/i18n/ar/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'اختر نوعًا واحدًا على الأقل.',
   'places.selectionCount': '{count} محدد',
   'places.deleteSelected': 'حذف المحدد',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'تغيير الفئة',
+  'places.categoryChanged': 'تم تحديث {count} من الأماكن',
   'places.kmlKmzImported': 'تم استيراد {count} مكان من KMZ/KML',
   'places.urlResolved': 'تم استيراد المكان من الرابط',
   'places.importList': 'استيراد قائمة',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'عرض الرحلة كاملة',
   'places.filterTracks': 'المسارات',
   'places.filterByRating': 'تصفية حسب التقييم',
+  'places.filterShow': 'عرض',
+  'places.clearSearch': 'مسح البحث',
   'places.yourRating': 'تقييمك',
   'places.notRated': 'لم يُقيَّم بعد',
   'places.search': 'ابحث عن أماكن...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'الشارع، المدينة، البلد',
   'places.formLat': 'خط العرض (مثال: 48.8566)',
   'places.formLng': 'خط الطول (مثال: 2.3522)',
+  'places.formLatLabel': 'خط العرض',
+  'places.formLngLabel': 'خط الطول',
   'places.formCategory': 'الفئة',
   'places.noCategory': 'بلا فئة',
   'places.newCategory': 'فئة جديدة',
diff --git a/shared/src/i18n/ar/reservations.ts b/shared/src/i18n/ar/reservations.ts
index 714da1379..414a30eb5 100644
--- a/shared/src/i18n/ar/reservations.ts
+++ b/shared/src/i18n/ar/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'دراجة',
   'reservations.type.taxi': 'سيارة أجرة',
   'reservations.type.transit': 'النقل العام',
+  'reservations.typeShort.transit': 'نقل عام',
   'reservations.type.transport_other': 'أخرى',
   'reservations.confirm.delete': 'هل تريد حذف الحجز "{name}"؟',
   'reservations.confirm.deleteTitle': 'حذف الحجز؟',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'الموقع / العنوان',
   'reservations.locationPlaceholder': 'العنوان، المطار، الفندق...',
   'reservations.confirmationCode': 'رمز الحجز',
+  'reservations.routeLabel': 'المسار',
+  'reservations.segmentCodes': 'رموز المراحل',
   'reservations.confirmationPlaceholder': 'مثال: ABC12345',
   'reservations.day': 'اليوم',
   'reservations.noDay': 'بلا يوم',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'فشل الحذف',
   'reservations.confirm.remove': 'إزالة الحجز "{name}"؟',
   'reservations.linkAssignment': 'ربط بخطة اليوم',
+  'reservations.linkedTo': 'مرتبط بـ',
   'reservations.pickAssignment': 'اختر عنصرًا من خطتك...',
   'reservations.noAssignment': 'بلا ربط',
   'reservations.price': 'السعر',
@@ -134,9 +138,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'تم العثور على {count} حجز/حجوزات',
   'reservations.import.previewEmpty': 'تعذّر استخراج أي حجوزات من الملفات المُحمَّلة.',
   'reservations.import.removeItem': 'إزالة',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'مراجعة',
+  'reservations.import.tryAi': 'جرّب القراءة بالذكاء الاصطناعي',
+  'reservations.import.aiParsing': 'جارٍ القراءة بالذكاء الاصطناعي…',
   'reservations.import.confirm': 'استيراد {count} حجز/حجوزات',
   'reservations.import.back': 'رجوع',
   'reservations.import.success': 'تم استيراد {count} حجز/حجوزات',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'المسافرون',
   'reservations.travelers.assign': 'تعيين المسافرين',
   'reservations.travelers.none': 'لا يوجد مسافرون في الرحلة بعد.',
+  'reservations.status.switchTo': 'التبديل إلى {status}',
+  'reservations.view.label': 'العرض',
+  'reservations.view.cards': 'بطاقات',
+  'reservations.view.list': 'قائمة',
+  'reservations.view.timeline': 'مخطط زمني',
+  'reservations.filter': 'تصفية',
+  'reservations.searchPlaceholder': 'بحث',
+  'reservations.results': '{shown} من {total}',
+  'reservations.resetFilters': 'إعادة ضبط عوامل التصفية',
+  'reservations.noMatches': 'لا شيء يطابق عوامل التصفية هذه',
+  'reservations.viewOptions': 'خيارات العرض',
+  'reservations.resetView': 'إعادة ضبط العرض',
+  'reservations.group.label': 'التجميع حسب',
+  'reservations.group.status': 'الحالة',
+  'reservations.group.day': 'اليوم',
+  'reservations.group.type': 'النوع',
+  'reservations.group.none': 'بدون تجميع',
+  'reservations.transitApart': 'النقل العام في قسم مستقل',
+  'reservations.group.before': 'قبل الرحلة',
+  'reservations.group.after': 'بعد الرحلة',
+  'reservations.group.undated': 'بدون تاريخ',
+  'reservations.sort.label': 'ترتيب حسب',
+  'reservations.sort.date': 'التاريخ',
+  'reservations.sort.title': 'العنوان',
+  'reservations.sort.type': 'النوع',
+  'reservations.sort.status': 'الحالة',
+  'reservations.sort.earlyFirst': 'الأقدم أولًا',
+  'reservations.sort.lateFirst': 'الأحدث أولًا',
+  'reservations.sort.aToZ': 'من أ إلى ي',
+  'reservations.sort.zToA': 'من ي إلى أ',
+  'reservations.timeline.dayCount': '{count} أيام',
+  'reservations.timeline.zoom': 'التقريب',
+  'reservations.timeline.trip': 'رحلة',
+  'reservations.timeline.day': 'يوم',
+  'reservations.timeline.prevDay': 'اليوم السابق',
+  'reservations.timeline.nextDay': 'اليوم التالي',
+  'reservations.timeline.openDay': 'فتح {day} حسب الساعة',
+  'reservations.timeline.nothingThisDay': 'لا شيء في هذا اليوم.',
+  'reservations.timeline.today': 'اليوم',
+  'reservations.timeline.now': 'الآن',
+  'reservations.timeline.byType': 'صف لكل نوع',
+  'reservations.timeline.context': 'إظهار التبويب الآخر',
+  'reservations.timeline.contextBookings': 'الحجوزات',
+  'reservations.timeline.contextTransports': 'المواصلات',
+  'reservations.timeline.noneDated': 'لا يحمل أيٌّ من هذه تاريخًا بعد.',
+  'reservations.undated': 'بدون تاريخ',
+  'reservations.nights': 'ليالٍ',
+  'reservations.start': 'البداية',
+  'reservations.end': 'النهاية',
+  'reservations.rename': 'إعادة تسمية',
+  'reservations.copyCode': 'نسخ رمز الحجز',
+  'reservations.copyFailed': 'تعذّر النسخ',
+  'reservations.showInFiles': 'عرض في الملفات',
 };
 export default reservations;
diff --git a/shared/src/i18n/ar/transport.ts b/shared/src/i18n/ar/transport.ts
index 76ef2388e..451f9f248 100644
--- a/shared/src/i18n/ar/transport.ts
+++ b/shared/src/i18n/ar/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'تعديل وسيلة النقل',
   'transport.title': 'المواصلات',
   'transport.addManual': 'وسيلة نقل',
+  'transport.empty': 'لا توجد وسائل نقل بعد',
 };
 export default transport;
diff --git a/shared/src/i18n/az/budget.ts b/shared/src/i18n/az/budget.ts
index 401254cce..9309f9562 100644
--- a/shared/src/i18n/az/budget.ts
+++ b/shared/src/i18n/az/budget.ts
@@ -7,8 +7,7 @@ const budget: TranslationStrings = {
   'budget.title': 'Büdcə',
   'budget.exportCsv': 'CSV ixrac et',
   'budget.emptyTitle': 'Hələ büdcə yaradılmayıb',
-  'budget.emptyText':
-    'Səyahət büdcənizi planlaşdırmaq üçün kateqoriyalar və qeydlər yaradın',
+  'budget.emptyText': 'Səyahət büdcənizi planlaşdırmaq üçün kateqoriyalar və qeydlər yaradın',
   'budget.emptyPlaceholder': 'Kateqoriyanın adını daxil edin...',
   'budget.createCategory': 'Kateqoriya yarat',
   'budget.category': 'Kateqoriya',
@@ -31,8 +30,7 @@ const budget: TranslationStrings = {
   'budget.totalBudget': 'Ümumi büdcə',
   'budget.byCategory': 'Kateqoriya üzrə',
   'budget.editTooltip': 'Redaktə etmək üçün klikləyin',
-  'budget.linkedToReservation':
-    'Rezervasiya ilə əlaqələndirilib — adı orada redaktə edin',
+  'budget.linkedToReservation': 'Rezervasiya ilə əlaqələndirilib — adı orada redaktə edin',
   'budget.confirm.deleteCategory':
     '“{name}” kateqoriyasını daxilindəki {count} qeydlə birlikdə silmək istədiyinizə əminsiniz?',
   'budget.deleteCategory': 'Kateqoriyanı sil',
@@ -89,8 +87,7 @@ const budget: TranslationStrings = {
   'costs.settleUp': 'Hesablaş',
   'costs.history': 'Tarixçə',
   'costs.everyoneSquare': 'Hamının hesabı bağlanıb',
-  'costs.nothingOutstanding':
-    'Hazırda gözləyən heç bir ödəniş yoxdur.',
+  'costs.nothingOutstanding': 'Hazırda gözləyən heç bir ödəniş yoxdur.',
   'costs.pay': 'ödə',
   'costs.pays': 'ödəyir',
   'costs.settle': 'Hesablaş',
@@ -110,11 +107,9 @@ const budget: TranslationStrings = {
   'costs.undo': 'Geri qaytar',
 
   'costs.whatFor': 'Bu xərc nə üçün idi?',
-  'costs.namePlaceholder':
-    'məs. Şam yeməyi, suvenirlər, yanacaq…',
+  'costs.namePlaceholder': 'məs. Şam yeməyi, suvenirlər, yanacaq…',
   'costs.note': 'Qeyd',
-  'costs.notePlaceholder':
-    'Nələri əhatə etdiyi, kimin nə qədər qaytarmalı olduğu…',
+  'costs.notePlaceholder': 'Nələri əhatə etdiyi, kimin nə qədər qaytarmalı olduğu…',
   'costs.addNote': 'Qeyd əlavə et',
   'costs.showNote': 'Qeydi göstər',
   'costs.hideNote': 'Qeydi gizlət',
@@ -128,18 +123,20 @@ const budget: TranslationStrings = {
   'costs.whoPaid': 'Kim ödədi?',
   'costs.multiplePayers': 'Bir neçə nəfər ödədi',
   'costs.singlePayer': 'Bir nəfər ödədi',
-  'costs.payersUnbalanced':
-    'Ödəyicilərin məbləğlərinin cəmi {amount} olmalıdır',
+  'costs.payersUnbalanced': 'Ödəyicilərin məbləğlərinin cəmi {amount} olmalıdır',
 
   'costs.splitBetween': 'Bərabər bölüşdürüləcək şəxslər',
   'costs.split': 'Bölüşdür',
   'costs.splitEqually': 'Bərabər',
   'costs.splitCustom': 'Fərdi',
   'costs.splitTicket': 'Qəbz üzrə',
-  'costs.pickSomeone':
-    'Bölüşdürmək üçün ən azı bir nəfər seçin.',
-  'costs.splitSummary':
-    '{count} nəfər arasında bölünüb · hərəsinə {amount}',
+  'costs.perPerson': '{amount} nəfər başına',
+  'costs.payersHint': 'Kimin ödədiyini işarələyin və hər birinin nə qədər ödədiyini yazın.',
+  'costs.splitHint.equally': 'İşarələnən hər kəs bərabər pay ödəyir.',
+  'costs.splitHint.custom': 'Hər şəxsin payını yazın; paylar birlikdə ümumi məbləği təşkil etməlidir.',
+  'costs.splitHint.ticket': 'Qəbzdə olanları sadalayın və hər elementi kimin götürdüyünü işarələyin.',
+  'costs.pickSomeone': 'Bölüşdürmək üçün ən azı bir nəfər seçin.',
+  'costs.splitSummary': '{count} nəfər arasında bölünüb · hərəsinə {amount}',
 
   'costs.cat.accommodation': 'Yaşayış yeri',
   'costs.cat.food': 'Yemək və içki',
@@ -176,23 +173,22 @@ const budget: TranslationStrings = {
   'costs.ticketShares': 'Fərdi paylar',
   'costs.excluded': 'Daxil edilməyib',
   'costs.splitBalanced': 'Bölüşdürmə ümumi məbləğə uyğundur',
-  'costs.splitSumUnder':
-    'Payların cəmi: {total} məbləğindən {sum} ({diff} azdır)',
-  'costs.splitSumOver':
-    'Payların cəmi: {total} məbləğindən {sum} ({diff} çoxdur)',
-  'costs.toggleSign':
-    'Xərc və geri ödəniş arasında keçid et',
+  'costs.splitSumUnder': 'Payların cəmi: {total} məbləğindən {sum} ({diff} azdır)',
+  'costs.splitSumOver': 'Payların cəmi: {total} məbləğindən {sum} ({diff} çoxdur)',
+  'costs.toggleSign': 'Xərc və geri ödəniş arasında keçid et',
 
   'costs.receipts': 'Qəbzlər',
   'costs.receiptsTitle': 'Qəbzlər və fakturalar',
   'costs.attachReceipt': 'Qəbz / faktura əlavə et',
+  'costs.attach': 'Əlavə et',
   'costs.scan.button': 'Qəbzi skan et',
   'costs.scan.reading': 'Qəbz oxunur…',
   'costs.scan.review': 'Xərci yoxla',
   'costs.scan.nothingRead': 'Bu fotodan qəbz oxunmadı.',
   'costs.scan.failed': 'Qəbzin oxunmasına başlamaq mümkün olmadı.',
   'costs.scan.title': 'Qəbzi skan et',
-  'costs.scan.accepted': 'Bir qəbzin fotosu (JPG, PNG və ya WEBP, 10 MB-a qədər). Süni intellekt modeli onu arxa planda oxuyur, sonra xərci saxlamazdan əvvəl yoxlayırsan.',
+  'costs.scan.accepted':
+    'Bir qəbzin fotosu (JPG, PNG və ya WEBP, 10 MB-a qədər). Süni intellekt modeli onu arxa planda oxuyur, sonra xərci saxlamazdan əvvəl yoxlayırsan.',
   'costs.scan.dropHere': 'Qəbzin fotosunu bura burax və ya seçmək ya çəkmək üçün kliklə',
   'costs.scan.dropActive': 'Skan etmək üçün fotonu burax',
   'costs.scan.start': 'Skan et',
@@ -204,4 +200,4 @@ const budget: TranslationStrings = {
     'Yadda saxlamaq mümkün olmadı və yüklənmiş {count} qəbz hələ də qalır. Onları Fayllar bölməsindən silin.',
 };
 
-export default budget;
\ No newline at end of file
+export default budget;
diff --git a/shared/src/i18n/az/help.ts b/shared/src/i18n/az/help.ts
index c5346fa10..c96477233 100644
--- a/shared/src/i18n/az/help.ts
+++ b/shared/src/i18n/az/help.ts
@@ -2335,9 +2335,9 @@ const help: TranslationStrings = {
     'Rezervasiyanın aid olduğu dayanacağı açın. Kartda Təsdiqlənib və ya Gözləyir yazısı və rezervasiyanın adı olan zolaq görünür.',
   'help.guide.place-booking.step.2':
     'Zolaqda Tarix, Vaxt və Rezervasiya kodu, həmçinin rezervasiyanın bütün qeydləri yer alır.',
-  'help.guide.place-booking.step.3': 'Zolağa klikləyin. Rezervasiyanın öz forması onun üzərində açılır.',
+  'help.guide.place-booking.step.3': 'Zolağa klikləyin. Rezervasiya xəritənin üzərində açılır.',
   'help.guide.place-booking.step.4':
-    'Rezervasiyanı dayanacağa bağlayan Günlük planla əlaqələndir sahəsidir və burada artıq bu dayanacaq göstərilir. Formanı yenidən bağlayın.',
+    'Rezervasiyanın aşağısındakı Redaktə et onun öz formasını açır. Rezervasiyanı dayanacağa bağlayan oradakı Günlük planla əlaqələndir sahəsidir və burada artıq bu dayanacaq göstərilir. Formanı yenidən bağlayın.',
   'help.guide.place-booking.step.5':
     'Dayanacaq üçün yeni rezervasiya günlər sütunundan başlayır: kursoru dayanacağın üzərinə gətirin və sonundakı + düyməsinə klikləyin. Forma artıq ona bağlanmış Yeni rezervasiya kimi açılır.',
   'help.guide.place-booking.result':
@@ -2539,7 +2539,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Rəng rezervasiyanın vəziyyətini bildirir: yaşıl sətir təsdiqlənib, kəhrəba rəngli sətir hələ gözləyir. Otellər bu siyahıda deyil, onların aşağıda öz bloku var.',
   'help.guide.day-bookings.step.4':
-    'Siyahı rezervasiyaları yalnız göstərir. Rezervasiya Rezervasiyalar bölməsində yaradılır və dəyişdirilir.',
+    'Sətrə klikləyin və rezervasiya açılır. Onun aşağısındakı Redaktə et onu dəyişir; yeni rezervasiyalar Rezervasiyalar bölməsində yaradılır.',
   'help.guide.day-bookings.result':
     'Həmin tarixə düşən və dayanacaqlarından birinə bağlı olan hər şey bu bir siyahıdadır.',
   'help.guide.day-bookings.tip.1':
@@ -2821,19 +2821,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Əlaqəni dayanacaq-dayanacaq oxuyun, adını dəyişin və ya marşrutu yenidən axtarın.',
   'help.guide.change-transit-route.step.1':
-    'Nəqliyyat bölməsində planlaşdırılmış əlaqələr Avtomatik ictimai nəqliyyat altındadır. Karta klikləyin.',
+    'Nəqliyyat bölməsində planlaşdırılmış əlaqələr Avtomatik ictimai nəqliyyat altındadır. Karta klikləyin; əlaqə rezervasiya kimi açılır.',
   'help.guide.change-transit-route.step.2':
     'Müddət, Dəyişmələr və Piyada yuxarıdadır. Onların altındakı Marşrut planı əlaqəni platformalar və xətlər arasındakı piyada yollarla birlikdə dayanacaq-dayanacaq göstərir.',
   'help.guide.change-transit-route.step.3':
-    'Marşrutu dəyiş axtarışı bu əlaqənin iki ucu və günü ilə artıq doldurulmuş halda yenidən işə salır.',
+    'Rezervasiyanın aşağısındakı Marşrutu dəyiş axtarışı bu əlaqənin iki ucu və günü ilə artıq doldurulmuş halda yenidən işə salır.',
   'help.guide.change-transit-route.step.4':
-    'Başqa əlaqə seçin və Günə əlavə et düyməsinə klikləyin; o, köhnəsinin yerini tutur. Marşrutu dəyiş yanındakı Təfərrüatları redaktə et isə adi nəqliyyat formasını açır, burada Rezervasiya kodu, Vəziyyət, səyahətçilər və fayllar yerləşir.',
+    'Başqa əlaqə seçin və Günə əlavə et düyməsinə klikləyin; o, köhnəsinin yerini tutur. Eyni zolağın o biri ucundakı Redaktə et isə adi nəqliyyat formasını açır, burada Rezervasiya kodu, Vəziyyət, səyahətçilər, qeydlər və fayllar yerləşir.',
   'help.guide.change-transit-route.result':
     'Səfər yeni marşrut planını daşıyır, Nəqliyyat bölməsindəki kartı isə yeni xətləri və vaxtları göstərir.',
   'help.guide.change-transit-route.tip.1':
-    'Səfərin başlığı sadəcə mətndir: yanındakı karandaş marşruta toxunmadan onun adını dəyişir. Altındakı Qeydlər markdown qəbul edir və onun Redaktə et və Önizləmə tabları var.',
+    'Rezervasiyanın yuxarı hissəsindəki başlıq marşruta toxunmadan əlaqənin adını dəyişir. Onun qeydləri Redaktə et arxasındakı nəqliyyat formasında yazılır.',
   'help.guide.change-transit-route.tip.2':
-    'Səfərin aşağısındakı Sil əlaqəni səyahətdən çıxarır; gün öz dayanacaqlarını saxlayır.',
+    'Rezervasiyanın aşağısındakı Sil əlaqəni səyahətdən çıxarır; gün öz dayanacaqlarını saxlayır.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Bir mərhələnin necə keçildiyini dəyişin',
   'help.guide.leg-travel-mode.goal':
@@ -2858,17 +2858,18 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.title': 'Nəqliyyatı dəyişin və ya silin',
   'help.guide.edit-transport.goal':
     'Vaxtı, platformanı və ya rezervasiya kodunu düzəldin, yaxud gedişi səyahətdən çıxarın.',
-  'help.guide.edit-transport.step.1': 'Gün planında nəqliyyat dayanacaqlar arasında rəngli sətirdir. Ona klikləyin.',
+  'help.guide.edit-transport.step.1':
+    'Gün planında nəqliyyat dayanacaqlar arasında rəngli sətirdir. Ona klikləyin; onun rezervasiyası vaxtlar, marşrut və Rezervasiya kodu ilə açılır.',
   'help.guide.edit-transport.step.2':
-    'Bu, onu yaradan formadır, başlıq zolağında Nəqliyyatı redaktə et yazılıb. Hər şeyi dəyişmək olar: növü, marşrutu, günləri və vaxtları, Rezervasiya kodunu, Vəziyyəti.',
+    'Rezervasiyanın aşağısındakı Redaktə et onu yaradan formanı açır, başlıq zolağında Nəqliyyatı redaktə et yazılıb. Hər şeyi dəyişmək olar: növü, marşrutu, günləri və vaxtları, Rezervasiya kodunu, Vəziyyəti.',
   'help.guide.edit-transport.step.3':
     'Uçuşun marşrutu hava limanları zənciri, qatarınkı isə stansiyalar zənciridir. Ara dayanacaq əlavə et aralarına yenisini qoyur və hər mərhələ öz vaxtlarını və öz uçuş və ya qatar nömrəsini saxlayır.',
   'help.guide.edit-transport.step.4':
-    'Yenilə düyməsinə klikləyin. Nəqliyyatı tamamilə silmək üçün Nəqliyyat bölməsində onun kartındakı zibil qutusundan istifadə edin və təsdiqləyin.',
+    'Yenilə düyməsinə klikləyin. Nəqliyyatı tamamilə silmək üçün onun rezervasiyasının aşağısındakı Sil düyməsindən və ya Nəqliyyat bölməsində onun kartındakı zibil qutusundan istifadə edin və təsdiqləyin.',
   'help.guide.edit-transport.result':
     'Dəyişiklik nəqliyyatın göründüyü hər yerdə əks olunur: Nəqliyyat bölməsində, yola düşdüyü gündə və xəritədəki xəttində.',
   'help.guide.edit-transport.tip.1':
-    'Eyni forma hər iki tərəfdən açılır: Nəqliyyat bölməsindəki kartın karandaşından və gün planındakı nəqliyyatın öz sətrindən. Planlaşdırılmış ictimai nəqliyyat əlaqəsi istisnadır: onun sətri səfər görünüşünü açır, oradakı Təfərrüatları redaktə et isə bu formaya aparır.',
+    'Eyni forma hər iki tərəfdən açılır: gün planındakı sətrin açdığı rezervasiyada Redaktə et ilə və Nəqliyyat bölməsindəki kartın karandaşı ilə. Planlaşdırılmış ictimai nəqliyyat əlaqəsi də rezervasiya kimi açılır; oradakı Marşrutu dəyiş yenidən axtarır, Redaktə et isə bu formaya aparır.',
   'help.guide.edit-transport.tip.2':
     'Nəqliyyatı başqa günə köçürmək üçün formaya ümumiyyətlə ehtiyac yoxdur: onun sətrini bir günün kartından digərinə sürükləyin.',
   // transport-on-map
@@ -2939,13 +2940,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Bölmənin sağ yuxarısında Əl ilə rezervasiya et düyməsinə klikləyin. Yeni rezervasiya açılır.',
   'help.guide.create-booking.step.2':
-    'Rezervasiya növü formanın yuxarısındakı siyahıdan, Səyahətçilər yanında seçin. Bu bölmənin yaratdığı altı növ Yaşayış yeri, Restoran, Tədbir, Tur, Parkinq və Digərdir, forma isə seçimə uyğun dəyişir: yalnız Yaşayış yeri tarixlər əvəzinə günlər aralığı istifadə edir.',
+    'Formanın yuxarı hissəsində, başlığın altındakı növ nişanına klikləyin və Rezervasiya növünü seçin. Bu bölmənin yaratdığı altı növ Yaşayış yeri, Restoran, Tədbir, Tur, Parkinq və Digərdir, forma isə seçimə uyğun dəyişir: yalnız Yaşayış yeri tarixlər əvəzinə günlər aralığı istifadə edir.',
   'help.guide.create-booking.step.3':
     'Başlığı yazın. Bu, formanın tələb etdiyi yeganə sahədir və o doldurulmayana qədər Əlavə et işləmir.',
   'help.guide.create-booking.step.4':
     'Tarix və Başlanğıc vaxtı, rezervasiyanın sonu varsa, Bitmə tarixi və Bitmə vaxtı təyin edin. Təqvimlər yalnız səyahət daxilindəki günləri təklif edir, başlanğıcdan sonra olmayan son isə qırmızı ilə bildirilir və Əlavə et düyməsini bloklayır.',
   'help.guide.create-booking.step.5':
-    'Təsdiqdən Rezervasiya kodunu daxil edin və Vəziyyət təyin edin. Gözləyir və ya Təsdiqlənib kartın iki bölmədən hansına düşəcəyini müəyyən edir.',
+    'Təsdiqdən Rezervasiya kodunu daxil edin. Növün yanındakı vəziyyət nişanında Gözləyir yazılıb; bir klik onu Təsdiqlənib edir, növbəti klik geri qaytarır, bu da kartın iki bölmədən hansına düşəcəyini müəyyən edir.',
   'help.guide.create-booking.step.6': 'Əlavə et düyməsinə klikləyin.',
   'help.guide.create-booking.result':
     'Rezervasiya öz bölməsində növ nişanı, tarixləri və kodu ilə bir kartdır və səyahətdəki hər kəs onun görünməsini görür.',
@@ -2997,7 +2998,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Rezervasiyanın əhatə etdiyi səyahətçiləri qeyd edin və sonra yalnız onlarınkını görün.',
   'help.guide.booking-travelers.step.1':
-    'Rezervasiyanı karandaşla açın. Səyahətçilər formanın yuxarısında, Rezervasiya növü yanında yerləşir və rezervasiyada heç kim olmadıqca Səyahətçiləri təyin et yazısını göstərir.',
+    'Rezervasiyanı karandaşla açın. Səyahətçilər Rezervasiya kodunun yanında yerləşir və rezervasiyada heç kim olmadıqca Səyahətçiləri təyin et yazısını göstərir.',
   'help.guide.booking-travelers.step.2':
     'Ona klikləyin və bu rezervasiyanın aid olduğu insanları seçin; adlı qonaqlar da siyahıdadır. Seçilmiş şəxsdə işarə görünür, onun avatarı isə sahədə göstərilir. Onu götürmək üçün ada yenidən klikləyin.',
   'help.guide.booking-travelers.step.3': 'Yenilə düyməsinə klikləyin.',
@@ -3093,7 +3094,7 @@ const help: TranslationStrings = {
     'Kartın başlığındakı karandaşa klikləyin. Rezervasiyanı redaktə et rezervasiyanın bütün məlumatları ilə açılır.',
   'help.guide.edit-booking.step.2':
     'Dəyişməli olanı dəyişin, məsələn, operatorun nəhayət göndərdiyi Rezervasiya kodunu.',
-  'help.guide.edit-booking.step.3': 'Vəziyyəti Təsdiqlənib olaraq təyin edin.',
+  'help.guide.edit-booking.step.3': 'Formanın yuxarı hissəsindəki Gözləyir nişanına klikləyin. O, Təsdiqlənib olur.',
   'help.guide.edit-booking.step.4': 'Yenilə düyməsinə klikləyin.',
   'help.guide.edit-booking.result':
     'Kart yerini dəyişir: təsdiqlənmiş rezervasiya Təsdiqlənib bölməsində yaşıl nöqtə ilə yer alır və səyahətdəki hər kəs onun yerdəyişməsini görür.',
diff --git a/shared/src/i18n/az/places.ts b/shared/src/i18n/az/places.ts
index 0a9f74fde..f76feb499 100644
--- a/shared/src/i18n/az/places.ts
+++ b/shared/src/i18n/az/places.ts
@@ -10,13 +10,10 @@ const places: TranslationStrings = {
   'places.sidebarDrop': 'İdxal etmək üçün buraya burax',
   'places.importFileHint':
     'Google My Maps, Google Earth və ya GPS izləyicisi kimi alətlərdən .gpx, .kml və ya .kmz fayllarını idxal edin.',
-  'places.importFileDropHere':
-    'Fayl seçmək üçün klikləyin və ya faylı buraya sürükləyib buraxın',
+  'places.importFileDropHere': 'Fayl seçmək üçün klikləyin və ya faylı buraya sürükləyib buraxın',
   'places.importFileDropActive': 'Seçmək üçün faylı buraya buraxın',
-  'places.importFileUnsupported':
-    'Dəstəklənməyən fayl növüdür. .gpx, .kml və ya .kmz istifadə edin.',
-  'places.importFileTooLarge':
-    'Fayl həddindən çox böyükdür. Maksimum yükləmə ölçüsü {maxMb} MB-dır.',
+  'places.importFileUnsupported': 'Dəstəklənməyən fayl növüdür. .gpx, .kml və ya .kmz istifadə edin.',
+  'places.importFileTooLarge': 'Fayl həddindən çox böyükdür. Maksimum yükləmə ölçüsü {maxMb} MB-dır.',
   'places.importFileError': 'İdxal uğursuz oldu',
   'places.importAllSkipped': 'Bütün məkanlar artıq bu səyahətdə mövcuddur.',
 
@@ -25,14 +22,12 @@ const places: TranslationStrings = {
   'places.gpxImportWaypoints': 'Yol nöqtələri',
   'places.gpxImportRoutes': 'Marşrutlar',
   'places.gpxImportTracks': 'İzlər (marşrut xətti ilə)',
-  'places.gpxImportNoneSelected':
-    'İdxal etmək üçün ən azı bir növ seçin.',
+  'places.gpxImportNoneSelected': 'İdxal etmək üçün ən azı bir növ seçin.',
 
   'places.kmlImportTypes': 'Nələri idxal etmək istəyirsiniz?',
   'places.kmlImportPoints': 'Nöqtələr (Placemarks)',
   'places.kmlImportPaths': 'Yollar (LineStrings)',
-  'places.kmlImportNoneSelected':
-    'İdxal etmək üçün ən azı bir növ seçin.',
+  'places.kmlImportNoneSelected': 'İdxal etmək üçün ən azı bir növ seçin.',
 
   'places.selectionCount': '{count} seçilib',
   'places.deleteSelected': 'Seçilənləri sil',
@@ -41,25 +36,18 @@ const places: TranslationStrings = {
   'places.kmlKmzImported': 'KMZ/KML-dən {count} məkan idxal edildi',
   'places.urlResolved': 'Məkan URL-dən idxal edildi',
   'places.importList': 'Siyahı idxalı',
-  'places.kmlKmzSummaryValues':
-    'Məkan nişanları: {total} • İdxal edildi: {created} • Buraxıldı: {skipped}',
+  'places.kmlKmzSummaryValues': 'Məkan nişanları: {total} • İdxal edildi: {created} • Buraxıldı: {skipped}',
 
   'places.importGoogleList': 'Google siyahısı',
   'places.importNaverList': 'Naver siyahısı',
-  'places.googleListHint':
-    'Bütün məkanları idxal etmək üçün paylaşılan Google Maps siyahısının linkini daxil edin.',
+  'places.googleListHint': 'Bütün məkanları idxal etmək üçün paylaşılan Google Maps siyahısının linkini daxil edin.',
   'places.googleDirHint':
     'İstiqamət linki də istifadə edilə bilər: dayanacaqlar avtomobillə hərəkət sırasına uyğun məkanlara çevriləcək.',
-  'places.googleListImported':
-    '“{list}” siyahısından {count} məkan idxal edildi',
-  'places.googleListError':
-    'Google Maps siyahısını idxal etmək mümkün olmadı',
-  'places.naverListHint':
-    'Bütün məkanları idxal etmək üçün paylaşılan Naver Maps siyahısının linkini daxil edin.',
-  'places.naverListImported':
-    '“{list}” siyahısından {count} məkan idxal edildi',
-  'places.naverListError':
-    'Naver Maps siyahısını idxal etmək mümkün olmadı',
+  'places.googleListImported': '“{list}” siyahısından {count} məkan idxal edildi',
+  'places.googleListError': 'Google Maps siyahısını idxal etmək mümkün olmadı',
+  'places.naverListHint': 'Bütün məkanları idxal etmək üçün paylaşılan Naver Maps siyahısının linkini daxil edin.',
+  'places.naverListImported': '“{list}” siyahısından {count} məkan idxal edildi',
+  'places.naverListError': 'Naver Maps siyahısını idxal etmək mümkün olmadı',
 
   'places.viewDetails': 'Təfərrüatlara bax',
   'places.assignToDay': 'Hansı günə əlavə edilsin?',
@@ -73,6 +61,8 @@ const places: TranslationStrings = {
 
   'places.filterTracks': 'İzlər',
   'places.filterByRating': 'Reytinqə görə filtrlə',
+  'places.filterShow': 'Göstər',
+  'places.clearSearch': 'Axtarışı təmizlə',
   'places.yourRating': 'Sizin reytinqiniz',
   'places.notRated': 'Hələ qiymətləndirilməyib',
   'places.search': 'Məkanları axtarın...',
@@ -93,6 +83,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Küçə, şəhər, ölkə',
   'places.formLat': 'Enlik (məs. 48.8566)',
   'places.formLng': 'Uzunluq (məs. 2.3522)',
+  'places.formLatLabel': 'Enlik',
+  'places.formLngLabel': 'Uzunluq',
   'places.formCategory': 'Kateqoriya',
   'places.noCategory': 'Kateqoriya yoxdur',
   'places.newCategory': 'Yeni kateqoriya',
@@ -100,22 +92,18 @@ const places: TranslationStrings = {
   'places.formTime': 'Vaxt',
   'places.startTime': 'Başlanğıc',
   'places.endTime': 'Son',
-  'places.endTimeBeforeStart':
-    'Bitmə vaxtı başlanğıc vaxtından əvvəldir',
+  'places.endTimeBeforeStart': 'Bitmə vaxtı başlanğıc vaxtından əvvəldir',
   'places.timeCollision': 'Vaxt üst-üstə düşür:',
   'places.formWebsite': 'Veb-sayt',
   'places.formNotes': 'Qeydlər',
   'places.formNotesPlaceholder': 'Şəxsi qeydlər...',
   'places.assignmentNotes': 'Bu gün üçün qeydlər',
-  'places.assignmentNotesPlaceholder':
-    'Bu məkan haqqında yalnız bu günə aid qeydlər...',
+  'places.assignmentNotesPlaceholder': 'Bu məkan haqqında yalnız bu günə aid qeydlər...',
   'places.formReservation': 'Rezervasiya',
-  'places.reservationNotesPlaceholder':
-    'Rezervasiya qeydləri, təsdiq nömrəsi...',
+  'places.reservationNotesPlaceholder': 'Rezervasiya qeydləri, təsdiq nömrəsi...',
   'places.mapsSearchPlaceholder': 'Məkanları axtarın...',
   'places.mapsSearchError': 'Məkan axtarışı uğursuz oldu.',
-  'places.searchGoogleInstead':
-    'Axtardığınız məkan deyil? Əvəzində Google-da axtarın',
+  'places.searchGoogleInstead': 'Axtardığınız məkan deyil? Əvəzində Google-da axtarın',
   'places.loadingDetails': 'Məkan təfərrüatları yüklənir…',
   'places.osmHint':
     'OpenStreetMap axtarışından istifadə edilir (fotolar, iş saatları və reytinqlər yoxdur). Tam təfərrüatlar üçün tənzimləmələrdə Google API açarı əlavə edin.',
@@ -125,8 +113,7 @@ const places: TranslationStrings = {
   'places.details.empty': 'Ətraflı məlumat üçün bir nəticə seçin',
   'places.details.loading': 'Təfərrüatlar yüklənir...',
   'places.details.error': 'Təfərrüatları yükləmək mümkün olmadı.',
-  'places.details.disabled':
-    'Əlavə məlumatların əldə edilməsi administrator tərəfindən deaktiv edilib.',
+  'places.details.disabled': 'Əlavə məlumatların əldə edilməsi administrator tərəfindən deaktiv edilib.',
   'places.details.noPhotos': 'Bu məkan üçün heç bir şəkil tapılmadı.',
   'places.details.pickImage': 'Şəkil seç',
   'places.details.description': 'Təsvir',
@@ -135,8 +122,7 @@ const places: TranslationStrings = {
   'places.details.facts': 'Faydalı məlumatlar',
   'places.details.nothing': 'Bu məkan haqqında məlumat tapılmadı.',
   'places.details.aboutBrand': 'Şəbəkə haqqında',
-  'places.details.aboutBrandNote':
-    'Bu məlumat həmin filialı deyil, ümumi şəbəkəni təsvir edir.',
+  'places.details.aboutBrandNote': 'Bu məlumat həmin filialı deyil, ümumi şəbəkəni təsvir edir.',
   'places.details.fact.rating': 'Reytinq',
   'places.details.fact.cuisine': 'Mətbəx',
   'places.details.fact.openingHours': 'İş saatları',
@@ -152,8 +138,7 @@ const places: TranslationStrings = {
   'places.categoryCreateError': 'Kateqoriya yaratmaq mümkün olmadı',
   'places.nameRequired': 'Ad daxil edin',
   'places.saveError': 'Yadda saxlamaq mümkün olmadı',
-  'places.createExpenseHint':
-    'Məkanı yadda saxlayır, sonra Xərclər redaktorunu açır.',
+  'places.createExpenseHint': 'Məkanı yadda saxlayır, sonra Xərclər redaktorunu açır.',
   'places.duplicateExists': '“{name}” artıq bu səyahətdə mövcuddur.',
   'places.addAnyway': 'Yenə də əlavə et',
 
@@ -168,4 +153,4 @@ const places: TranslationStrings = {
   'places.imageRemoveError': 'Şəkli silmək mümkün olmadı',
 };
 
-export default places;
\ No newline at end of file
+export default places;
diff --git a/shared/src/i18n/az/reservations.ts b/shared/src/i18n/az/reservations.ts
index 6d356a854..266a6e0c2 100644
--- a/shared/src/i18n/az/reservations.ts
+++ b/shared/src/i18n/az/reservations.ts
@@ -3,8 +3,7 @@ import type { TranslationStrings } from '../types';
 const reservations: TranslationStrings = {
   'reservations.title': 'Rezervasiyalar',
   'reservations.empty': 'Hələ rezervasiya yoxdur',
-  'reservations.emptyHint':
-    'Uçuşlar, otellər və digər xidmətlər üçün rezervasiyalar əlavə edin',
+  'reservations.emptyHint': 'Uçuşlar, otellər və digər xidmətlər üçün rezervasiyalar əlavə edin',
   'reservations.add': 'Rezervasiya əlavə et',
   'reservations.addManual': 'Əl ilə rezervasiya et',
   'reservations.placeHint':
@@ -12,8 +11,7 @@ const reservations: TranslationStrings = {
 
   'reservations.confirmed': 'Təsdiqlənib',
   'reservations.pending': 'Gözləyir',
-  'reservations.summary':
-    '{confirmed} təsdiqlənib, {pending} gözləyir',
+  'reservations.summary': '{confirmed} təsdiqlənib, {pending} gözləyir',
   'reservations.showFiles': 'Faylları göstər',
 
   'reservations.editTitle': 'Rezervasiyanı redaktə et',
@@ -41,10 +39,8 @@ const reservations: TranslationStrings = {
   'reservations.layover.layover': 'Tranzit gözləmə',
 
   'reservations.needsReview': 'Yoxlayın',
-  'reservations.needsReviewHint':
-    'Hava limanını avtomatik uyğunlaşdırmaq mümkün olmadı — məkanı təsdiqləyin.',
-  'reservations.searchLocation':
-    'Stansiya, liman və ya ünvan axtarın…',
+  'reservations.needsReviewHint': 'Hava limanını avtomatik uyğunlaşdırmaq mümkün olmadı — məkanı təsdiqləyin.',
+  'reservations.searchLocation': 'Stansiya, liman və ya ünvan axtarın…',
 
   'reservations.meta.trainNumber': 'Qatar nömrəsi',
   'reservations.meta.platform': 'Platforma',
@@ -54,8 +50,7 @@ const reservations: TranslationStrings = {
   'reservations.meta.checkOut': 'Çıxış',
 
   'reservations.meta.linkAccommodation': 'Yaşayış yeri',
-  'reservations.meta.pickAccommodation':
-    'Yaşayış yeri ilə əlaqələndir',
+  'reservations.meta.pickAccommodation': 'Yaşayış yeri ilə əlaqələndir',
   'reservations.meta.noAccommodation': 'Heç biri',
   'reservations.meta.hotelPlace': 'Yaşayış yeri',
 
@@ -81,13 +76,12 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Velosiped',
   'reservations.type.taxi': 'Taksi',
   'reservations.type.transit': 'İctimai nəqliyyat',
+  'reservations.typeShort.transit': 'Tranzit',
   'reservations.type.transport_other': 'Digər',
 
-  'reservations.confirm.delete':
-    '“{name}” rezervasiyasını silmək istədiyinizə əminsiniz?',
+  'reservations.confirm.delete': '“{name}” rezervasiyasını silmək istədiyinizə əminsiniz?',
   'reservations.confirm.deleteTitle': 'Rezervasiya silinsin?',
-  'reservations.confirm.deleteBody':
-    '“{name}” həmişəlik silinəcək.',
+  'reservations.confirm.deleteBody': '“{name}” həmişəlik silinəcək.',
 
   'reservations.toast.updated': 'Rezervasiya yeniləndi',
   'reservations.toast.removed': 'Rezervasiya silindi',
@@ -97,12 +91,12 @@ const reservations: TranslationStrings = {
   'reservations.newTitle': 'Yeni rezervasiya',
   'reservations.bookingType': 'Rezervasiya növü',
   'reservations.titleLabel': 'Başlıq',
-  'reservations.titlePlaceholder':
-    'məs. Lufthansa LH123, Hotel Adlon...',
+  'reservations.titlePlaceholder': 'məs. Lufthansa LH123, Hotel Adlon...',
   'reservations.locationAddress': 'Məkan / Ünvan',
-  'reservations.locationPlaceholder':
-    'Ünvan, hava limanı, otel...',
+  'reservations.locationPlaceholder': 'Ünvan, hava limanı, otel...',
   'reservations.confirmationCode': 'Rezervasiya kodu',
+  'reservations.routeLabel': 'Marşrut',
+  'reservations.segmentCodes': 'Seqment kodları',
   'reservations.confirmationPlaceholder': 'məs. ABC12345',
   'reservations.day': 'Gün',
   'reservations.noDay': 'Gün seçilməyib',
@@ -118,22 +112,18 @@ const reservations: TranslationStrings = {
   'reservations.toast.updateError': 'Yeniləmək mümkün olmadı',
   'reservations.toast.deleteError': 'Silmək mümkün olmadı',
 
-  'reservations.confirm.remove':
-    '“{name}” üçün rezervasiya silinsin?',
+  'reservations.confirm.remove': '“{name}” üçün rezervasiya silinsin?',
 
   'reservations.linkAssignment': 'Günlük planla əlaqələndir',
-  'reservations.pickAssignment':
-    'Planınızdan bir təyinat seçin...',
+  'reservations.linkedTo': 'Əlaqələndirilib',
+  'reservations.pickAssignment': 'Planınızdan bir təyinat seçin...',
   'reservations.noAssignment': 'Əlaqə yoxdur (müstəqil)',
 
   'reservations.price': 'Qiymət',
   'reservations.budgetCategory': 'Büdcə kateqoriyası',
-  'reservations.budgetCategoryPlaceholder':
-    'məs. Nəqliyyat, Yaşayış yeri',
-  'reservations.budgetCategoryAuto':
-    'Avtomatik (rezervasiya növünə əsasən)',
-  'reservations.budgetHint':
-    'Yadda saxlanarkən avtomatik olaraq büdcə qeydi yaradılacaq.',
+  'reservations.budgetCategoryPlaceholder': 'məs. Nəqliyyat, Yaşayış yeri',
+  'reservations.budgetCategoryAuto': 'Avtomatik (rezervasiya növünə əsasən)',
+  'reservations.budgetHint': 'Yadda saxlanarkən avtomatik olaraq büdcə qeydi yaradılacaq.',
 
   'reservations.departureDate': 'Yola düşmə',
   'reservations.arrivalDate': 'Çatma',
@@ -145,10 +135,8 @@ const reservations: TranslationStrings = {
   'reservations.returnTime': 'Qaytarma vaxtı',
   'reservations.endDate': 'Bitmə tarixi',
 
-  'reservations.meta.departureTimezone':
-    'Yola düşmə saat qurşağı',
-  'reservations.meta.arrivalTimezone':
-    'Çatma saat qurşağı',
+  'reservations.meta.departureTimezone': 'Yola düşmə saat qurşağı',
+  'reservations.meta.arrivalTimezone': 'Çatma saat qurşağı',
 
   'reservations.span.departure': 'Yola düşmə',
   'reservations.span.arrival': 'Çatma',
@@ -165,45 +153,34 @@ const reservations: TranslationStrings = {
   'reservations.span.end': 'Son',
   'reservations.span.ongoing': 'Davam edir',
 
-  'reservations.validation.endBeforeStart':
-    'Bitmə tarixi və vaxtı başlanğıc tarixi və vaxtından sonra olmalıdır',
+  'reservations.validation.endBeforeStart': 'Bitmə tarixi və vaxtı başlanğıc tarixi və vaxtından sonra olmalıdır',
 
   'reservations.addBooking': 'Rezervasiya əlavə et',
 
-  'reservations.import.title':
-    'Rezervasiya təsdiqlərini idxal et',
+  'reservations.import.title': 'Rezervasiya təsdiqlərini idxal et',
   'reservations.import.cta': 'Fayldan idxal et',
   'reservations.import.dropHere':
     'Rezervasiya təsdiqi fayllarını buraya sürükləyib buraxın və ya seçmək üçün klikləyin',
-  'reservations.import.dropActive':
-    'İdxal etmək üçün faylları buraya buraxın',
+  'reservations.import.dropActive': 'İdxal etmək üçün faylları buraya buraxın',
   'reservations.import.acceptedFormats':
     'Qəbul edilən formatlar: EML, PDF, PKPass, HTML, TXT (hər biri maksimum 10 MB, 5 fayladək)',
   'reservations.import.acceptedPhotos': 'Fotoları (JPG, PNG, WEBP) süni intellekt modeli oxuyur.',
   'reservations.import.parsing': 'Fayllar təhlil edilir…',
-  'reservations.import.previewHeading':
-    '{count} rezervasiya tapıldı',
-  'reservations.import.previewEmpty':
-    'Yüklənən fayllardan heç bir rezervasiya çıxarmaq mümkün olmadı.',
+  'reservations.import.previewHeading': '{count} rezervasiya tapıldı',
+  'reservations.import.previewEmpty': 'Yüklənən fayllardan heç bir rezervasiya çıxarmaq mümkün olmadı.',
   'reservations.import.removeItem': 'Sil',
   'reservations.import.needsReview': 'Yoxlayın',
   'reservations.import.tryAi': 'AI ilə təhlil et',
   'reservations.import.aiParsing': 'AI ilə təhlil edilir…',
-  'reservations.import.confirm':
-    '{count} rezervasiyanı idxal et',
+  'reservations.import.confirm': '{count} rezervasiyanı idxal et',
   'reservations.import.back': 'Geri',
-  'reservations.import.success':
-    '{count} rezervasiya idxal edildi',
-  'reservations.import.partialFailure':
-    '{created} idxal edildi, {failed} uğursuz oldu',
-  'reservations.import.error':
-    'Təhlil uğursuz oldu. Faylın etibarlı rezervasiya təsdiqi olduğuna əmin olun.',
-  'reservations.import.unavailable':
-    'Rezervasiyaların idxalı bu serverdə əlçatan deyil.',
+  'reservations.import.success': '{count} rezervasiya idxal edildi',
+  'reservations.import.partialFailure': '{created} idxal edildi, {failed} uğursuz oldu',
+  'reservations.import.error': 'Təhlil uğursuz oldu. Faylın etibarlı rezervasiya təsdiqi olduğuna əmin olun.',
+  'reservations.import.unavailable': 'Rezervasiyaların idxalı bu serverdə əlçatan deyil.',
   'reservations.import.unsupportedFormat':
     'Dəstəklənməyən fayl formatıdır. EML, PDF, PKPass, HTML və ya TXT istifadə edin.',
-  'reservations.import.fileTooLarge':
-    '“{name}” faylı 10 MB limitini keçir.',
+  'reservations.import.fileTooLarge': '“{name}” faylı 10 MB limitini keçir.',
 
   'reservations.airtrail.title': 'AirTrail-dən idxal et',
   'reservations.airtrail.cta': 'AirTrail',
@@ -211,34 +188,25 @@ const reservations: TranslationStrings = {
   'reservations.airtrail.syncedHint':
     'AirTrail ilə sinxronlaşdırılıb — dəyişikliklər hər iki istiqamətdə sinxron qalır.',
   'reservations.airtrail.notSynced': 'Sinxronlaşdırılmayıb',
-  'reservations.airtrail.notSyncedHint':
-    'Bu uçuş AirTrail-dən silinib və artıq sinxronlaşdırılmır.',
+  'reservations.airtrail.notSyncedHint': 'Bu uçuş AirTrail-dən silinib və artıq sinxronlaşdırılmır.',
   'reservations.airtrail.layoverHint':
     'AirTrail-dən idxal edilib. Tranzit gözləməsi olan çoxseqmentli uçuşun AirTrail-də sinxronlaşdırıla biləcək vahid uçuş qeydi olmadığından, bu birdəfəlik idxal kimi qalır.',
-  'reservations.airtrail.loadError':
-    'AirTrail uçuşlarınızı yükləmək mümkün olmadı.',
-  'reservations.airtrail.imported':
-    '{count} uçuş idxal edildi',
-  'reservations.airtrail.skippedDuplicate':
-    '{count} uçuş artıq bu səyahətdədir və buraxıldı',
-  'reservations.airtrail.nothingImported':
-    'İdxal ediləcək heç nə yoxdur.',
-  'reservations.airtrail.importError':
-    'İdxal uğursuz oldu. Yenidən cəhd edin.',
+  'reservations.airtrail.loadError': 'AirTrail uçuşlarınızı yükləmək mümkün olmadı.',
+  'reservations.airtrail.imported': '{count} uçuş idxal edildi',
+  'reservations.airtrail.skippedDuplicate': '{count} uçuş artıq bu səyahətdədir və buraxıldı',
+  'reservations.airtrail.nothingImported': 'İdxal ediləcək heç nə yoxdur.',
+  'reservations.airtrail.importError': 'İdxal uğursuz oldu. Yenidən cəhd edin.',
   'reservations.airtrail.undo': 'AirTrail-dən idxal et',
   'reservations.airtrail.alreadyImported': 'İdxal edilib',
   'reservations.airtrail.duringTrip': 'Bu səyahət zamanı',
   'reservations.airtrail.otherFlights': 'Digər uçuşlar',
-  'reservations.airtrail.empty':
-    'AirTrail hesabınızda heç bir uçuş tapılmadı.',
+  'reservations.airtrail.empty': 'AirTrail hesabınızda heç bir uçuş tapılmadı.',
   'reservations.airtrail.importCta': '{count} uçuşu idxal et',
-  'reservations.airtrail.joinConnection':
-    '{stops} dayanacağında tranzit gözləmə ilə bir uçuş kimi idxal et',
+  'reservations.airtrail.joinConnection': '{stops} dayanacağında tranzit gözləmə ilə bir uçuş kimi idxal et',
 
   'reservations.costsLabel': 'Xərclər',
   'reservations.createExpense': 'Xərc yarat',
-  'reservations.createExpenseHint':
-    'Rezervasiyanı yadda saxlayır, sonra Xərclər redaktorunu açır.',
+  'reservations.createExpenseHint': 'Rezervasiyanı yadda saxlayır, sonra Xərclər redaktorunu açır.',
   'reservations.linkedExpense': 'Əlaqəli xərc',
   'reservations.removeExpense': 'Xərci sil',
   'reservations.linkedExpenses': 'Əlaqəli xərclər',
@@ -248,8 +216,60 @@ const reservations: TranslationStrings = {
 
   'reservations.travelers.label': 'Səyahətçilər',
   'reservations.travelers.assign': 'Səyahətçiləri təyin et',
-  'reservations.travelers.none':
-    'Hələ səyahət üzvü yoxdur.',
+  'reservations.travelers.none': 'Hələ səyahət üzvü yoxdur.',
+  'reservations.status.switchTo': '{status} olaraq təyin et',
+  'reservations.view.label': 'Görünüş',
+  'reservations.view.cards': 'Kartlar',
+  'reservations.view.list': 'Siyahı',
+  'reservations.view.timeline': 'Zaman xətti',
+  'reservations.filter': 'Filtrlə',
+  'reservations.searchPlaceholder': 'Axtar',
+  'reservations.results': '{shown} / {total}',
+  'reservations.resetFilters': 'Filtrləri sıfırla',
+  'reservations.noMatches': 'Bu filtrlərə uyğun heç nə yoxdur',
+  'reservations.viewOptions': 'Görünüş seçimləri',
+  'reservations.resetView': 'Görünüşü sıfırla',
+  'reservations.group.label': 'Qruplaşdır',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Gün',
+  'reservations.group.type': 'Növ',
+  'reservations.group.none': 'Qruplaşdırmadan',
+  'reservations.transitApart': 'İctimai nəqliyyat ayrıca bölmədə',
+  'reservations.group.before': 'Səyahətdən əvvəl',
+  'reservations.group.after': 'Səyahətdən sonra',
+  'reservations.group.undated': 'Tarixsiz',
+  'reservations.sort.label': 'Sırala',
+  'reservations.sort.date': 'Tarix',
+  'reservations.sort.title': 'Başlıq',
+  'reservations.sort.type': 'Növ',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Əvvəlcə ən erkən',
+  'reservations.sort.lateFirst': 'Əvvəlcə ən gec',
+  'reservations.sort.aToZ': 'A-dan Z-yə',
+  'reservations.sort.zToA': 'Z-dən A-ya',
+  'reservations.timeline.dayCount': '{count} gün',
+  'reservations.timeline.zoom': 'Miqyas',
+  'reservations.timeline.trip': 'Səyahət',
+  'reservations.timeline.day': 'Gün',
+  'reservations.timeline.prevDay': 'Əvvəlki gün',
+  'reservations.timeline.nextDay': 'Növbəti gün',
+  'reservations.timeline.openDay': '{day} saatbasaat aç',
+  'reservations.timeline.nothingThisDay': 'Bu gündə heç nə yoxdur.',
+  'reservations.timeline.today': 'Bu gün',
+  'reservations.timeline.now': 'indi',
+  'reservations.timeline.byType': 'Hər növ üçün bir zolaq',
+  'reservations.timeline.context': 'Digər bölməni göstər',
+  'reservations.timeline.contextBookings': 'Rezervasiyalar',
+  'reservations.timeline.contextTransports': 'Nəqliyyat',
+  'reservations.timeline.noneDated': 'Bunların heç birinin hələ tarixi yoxdur.',
+  'reservations.undated': 'Tarixsiz',
+  'reservations.nights': 'Gecə',
+  'reservations.start': 'Başlanğıc',
+  'reservations.end': 'Son',
+  'reservations.rename': 'Adını dəyiş',
+  'reservations.copyCode': 'Rezervasiya kodunu kopyala',
+  'reservations.copyFailed': 'Kopyalamaq alınmadı',
+  'reservations.showInFiles': 'Fayllarda göstər',
 };
 
-export default reservations;
\ No newline at end of file
+export default reservations;
diff --git a/shared/src/i18n/az/transport.ts b/shared/src/i18n/az/transport.ts
index 1ea3d8ec1..bf4201825 100644
--- a/shared/src/i18n/az/transport.ts
+++ b/shared/src/i18n/az/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Nəqliyyatı redaktə et',
   'transport.title': 'Nəqliyyat',
   'transport.addManual': 'Nəqliyyat',
+  'transport.empty': 'Hələ nəqliyyat yoxdur',
 };
-export default transport;
\ No newline at end of file
+export default transport;
diff --git a/shared/src/i18n/br/budget.ts b/shared/src/i18n/br/budget.ts
index b685ee821..c06c12ac4 100644
--- a/shared/src/i18n/br/budget.ts
+++ b/shared/src/i18n/br/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Apenas no total — ainda não acertado',
   'costs.tapToInclude': 'Toque para incluir',
   'costs.amount': 'Valor',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Dividir',
+  'costs.splitEqually': 'Igualmente',
+  'costs.splitCustom': 'Personalizado',
+  'costs.splitTicket': 'Recibo',
+  'costs.perPerson': '{amount} por pessoa',
+  'costs.payersHint': 'Marque quem pagou e digite quanto cada um pagou.',
+  'costs.splitHint.equally': 'Todos os marcados pagam a mesma parte.',
+  'costs.splitHint.custom': 'Digite a parte de cada pessoa; juntas, elas precisam dar o total.',
+  'costs.splitHint.ticket': 'Liste o que estava no comprovante e marque quem consumiu cada item.',
   'costs.filter.allCategories': 'Todas as categorias',
   'costs.filter.allDays': 'Todos os dias',
   'costs.expensesCount': '{count} despesas',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Comprovantes',
   'costs.receiptsTitle': 'Comprovantes e notas',
   'costs.attachReceipt': 'Anexar comprovante / nota',
+  'costs.attach': 'Anexar',
   'costs.scan.button': 'Escanear comprovante',
   'costs.scan.reading': 'Lendo o comprovante…',
   'costs.scan.review': 'Revisar a despesa',
   'costs.scan.nothingRead': 'Não foi possível ler um comprovante nesta foto.',
   'costs.scan.failed': 'Não foi possível começar a ler o comprovante.',
   'costs.scan.title': 'Escanear comprovante',
-  'costs.scan.accepted': 'A foto de um único comprovante (JPG, PNG ou WEBP, até 10 MB). O modelo de IA lê em segundo plano e depois você confere a despesa antes de salvar.',
+  'costs.scan.accepted':
+    'A foto de um único comprovante (JPG, PNG ou WEBP, até 10 MB). O modelo de IA lê em segundo plano e depois você confere a despesa antes de salvar.',
   'costs.scan.dropHere': 'Solte aqui a foto do comprovante, ou clique para escolher ou tirar uma',
   'costs.scan.dropActive': 'Solte a foto para escaneá-la',
   'costs.scan.start': 'Escanear',
diff --git a/shared/src/i18n/br/dayplan.ts b/shared/src/i18n/br/dayplan.ts
index 77d0586d0..008e9f193 100644
--- a/shared/src/i18n/br/dayplan.ts
+++ b/shared/src/i18n/br/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Todos os lugares atribuídos',
   'dayplan.mobile.noMatch': 'Sem correspondência',
   'dayplan.mobile.createNew': 'Criar novo lugar',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Expandir todos os dias', // en-fallback
+  'dayplan.collapseAll': 'Recolher todos os dias', // en-fallback
   'dayplan.reorderDays': 'Reordenar dias',
   'dayplan.reorderTitle': 'Reordenar dias',
   'dayplan.reorderHint': 'Os lugares, notas e reservas de um dia se movem junto com ele.',
diff --git a/shared/src/i18n/br/help.ts b/shared/src/i18n/br/help.ts
index 007677a9e..9fbae5d9f 100644
--- a/shared/src/i18n/br/help.ts
+++ b/shared/src/i18n/br/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'br' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Ajuda e documentação',
+  'help.search': 'Pesquisar na documentação…',
+  'help.contents': 'Conteúdo',
+  'help.noResults': 'Nenhuma página encontrada.',
+  'help.errorTitle': 'Não foi possível carregar esta página',
+  'help.errorBody': 'O conteúdo da ajuda vem da wiki do TREK. Verifique sua conexão e tente novamente.',
 
   // center
   'help.center.button': 'Ajuda para esta tela',
@@ -1030,7 +1030,7 @@ const help: TranslationStrings = {
     'Travel & map: rotas de reserva sempre no mapa, a pílula Explorar lugares, otimização de rota a partir da sua hospedagem, códigos de reserva ocultos e rotas de reserva com rótulo.',
   'help.ctx.settings-display.bullet.3':
     'Inicialização: se o TREK abre no painel ou na viagem ativa, e qual aba de uma viagem aparece primeiro.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Aparência',
   'help.ctx.settings-appearance.summary':
     'Como o TREK aparece nesta conta: claro ou escuro, a cor de destaque, vidro e movimento, tamanho do texto, e quais widgets o painel mostra. Tudo vale ao vivo, em cada dispositivo em que você entra.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2268,9 +2268,9 @@ const help: TranslationStrings = {
     'Abra a parada a que a reserva pertence. O painel mostra uma faixa com Confirmada ou Pendente e o nome da reserva.',
   'help.guide.place-booking.step.2':
     'A faixa traz a Data, a Hora e o Código da reserva, e as notas que a reserva tiver.',
-  'help.guide.place-booking.step.3': 'Clique na faixa. O formulário da própria reserva abre sobre ela.',
+  'help.guide.place-booking.step.3': 'Clique na faixa. A reserva abre sobre o mapa.',
   'help.guide.place-booking.step.4':
-    'Vincular à atribuição do dia é o que prende uma reserva a uma parada, e aqui já nomeia esta. Feche o formulário de novo.',
+    'Editar, no pé da reserva, abre o formulário dela. Vincular à atribuição do dia, ali, é o que prende uma reserva a uma parada, e aqui já nomeia esta. Feche o formulário de novo.',
   'help.guide.place-booking.step.5':
     'Uma reserva nova para uma parada começa na coluna dos dias: passe o ponteiro pela parada e clique no + no fim dela. O formulário abre como Nova reserva, já vinculada a ela.',
   'help.guide.place-booking.result':
@@ -2624,7 +2624,8 @@ const help: TranslationStrings = {
     'Uma linha mostra que tipo de reserva é, o nome dela e, quando pertence a uma parada, essa parada depois de um ponto. Os horários dela ficam na ponta direita.',
   'help.guide.day-bookings.step.3':
     'A cor diz como está uma reserva: uma linha verde está confirmada, uma âmbar ainda está pendente. As hospedagens não estão nesta lista, elas têm o bloco próprio logo abaixo.',
-  'help.guide.day-bookings.step.4': 'A lista só lê as reservas. Uma reserva é criada e alterada na aba Reservas.',
+  'help.guide.day-bookings.step.4':
+    'Clique em uma linha e a reserva abre. Editar, no pé dela, a altera; reservas novas são criadas na aba Reservas.',
   'help.guide.day-bookings.result':
     'Tudo o que está datado no dia, e tudo o que está pendurado numa das paradas dele, está nesta única lista.',
   'help.guide.day-bookings.tip.1':
@@ -3164,13 +3165,13 @@ const help: TranslationStrings = {
     'Coloque à mão na viagem um restaurante, um evento, um passeio, uma vaga de estacionamento ou qualquer outra coisa.',
   'help.guide.create-booking.step.1': 'Clique em Reserva manual no canto superior direito da aba. Nova reserva abre.',
   'help.guide.create-booking.step.2':
-    'Escolha o Tipo de reserva na lista no topo do formulário, ao lado de Viajantes. Hospedagem, Restaurante, Evento, Passeio, Estacionamento e Outro são os seis que esta aba cria, e o formulário muda com a escolha: só Hospedagem troca suas datas por um intervalo de dias.',
+    'Clique na pílula do tipo, abaixo do título, no cabeçalho do formulário, e escolha o Tipo de reserva. Hospedagem, Restaurante, Evento, Passeio, Estacionamento e Outro são os seis que esta aba cria, e o formulário muda com a escolha: só Hospedagem troca suas datas por um intervalo de dias.',
   'help.guide.create-booking.step.3':
     'Digite o Título. É o único campo em que o formulário insiste, e Adicionar fica morto até ter algo.',
   'help.guide.create-booking.step.4':
     'Defina Data e Horário de início, e Data final e Horário de término se a reserva tiver um fim. Os calendários só oferecem dias dentro da viagem, e um fim que não é posterior ao início diz isso em vermelho e bloqueia Adicionar.',
   'help.guide.create-booking.step.5':
-    'Coloque o Código da reserva da confirmação e defina o Status. Pendente ou Confirmada decide em qual das duas seções o cartão aterrissa.',
+    'Coloque o Código da reserva da confirmação. A pílula de status ao lado do tipo mostra Pendente; um clique a muda para Confirmada e outro a traz de volta, e isso decide em qual das duas seções o cartão aterrissa.',
   'help.guide.create-booking.step.6': 'Clique em Adicionar.',
   'help.guide.create-booking.result':
     'A reserva é um cartão na sua seção, com seu chip de tipo, suas datas e seu código, e todos os outros na viagem a veem aparecer.',
@@ -3220,7 +3221,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Dizer para quem é uma reserva',
   'help.guide.booking-travelers.goal': 'Marque os viajantes que uma reserva cobre e depois veja só as deles.',
   'help.guide.booking-travelers.step.1':
-    'Abra a reserva com o lápis. Viajantes fica no topo do formulário, ao lado de Tipo de reserva, e mostra Atribuir viajantes enquanto ninguém estiver na reserva.',
+    'Abra a reserva com o lápis. Viajantes fica ao lado do Código da reserva e mostra Atribuir viajantes enquanto ninguém estiver na reserva.',
   'help.guide.booking-travelers.step.2':
     'Clique nele e escolha as pessoas para quem esta reserva é; convidados com nome também estão na lista. Quem é escolhido ganha um tique e seu avatar no campo. Clique no nome de novo para tirar.',
   'help.guide.booking-travelers.step.3': 'Clique em Atualizar.',
@@ -3314,7 +3315,7 @@ const help: TranslationStrings = {
     'Clique no lápis no cabeçalho do cartão. Editar reserva abre com tudo o que a reserva sabe.',
   'help.guide.edit-booking.step.2':
     'Mude o que precisa mudar, aqui o Código da reserva que o operador finalmente mandou.',
-  'help.guide.edit-booking.step.3': 'Ponha Status em Confirmada.',
+  'help.guide.edit-booking.step.3': 'Clique na pílula Pendente no cabeçalho do formulário. Ela muda para Confirmada.',
   'help.guide.edit-booking.step.4': 'Clique em Atualizar.',
   'help.guide.edit-booking.result':
     'O cartão se muda: uma reserva confirmada fica na seção Confirmada atrás de um ponto verde, e todos na viagem a veem mudar de lugar.',
@@ -3605,19 +3606,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': 'Abrir e mudar uma conexão planejada',
   'help.guide.change-transit-route.goal': 'Ler a conexão parada por parada, renomeá-la, ou buscar o trajeto de novo.',
   'help.guide.change-transit-route.step.1':
-    'Na aba Transportes, as conexões planejadas ficam sob Transporte público automático. Clique no cartão.',
+    'Na aba Transportes, as conexões planejadas ficam sob Transporte público automático. Clique no cartão; a conexão abre como uma reserva.',
   'help.guide.change-transit-route.step.2':
     'Duração, Baldeações e A pé ficam no topo. Itinerário, abaixo, percorre a conexão parada por parada, com as plataformas e as caminhadas entre as linhas.',
   'help.guide.change-transit-route.step.3':
-    'Alterar trajeto roda a busca de novo, já preenchida com as duas pontas desta conexão e com o dia dela.',
+    'Alterar trajeto, no pé da reserva, roda a busca de novo, já preenchida com as duas pontas desta conexão e com o dia dela.',
   'help.guide.change-transit-route.step.4':
-    'Escolha outra conexão e clique em Adicionar ao dia; ela toma o lugar da antiga. Editar detalhes, ao lado de Alterar trajeto, abre em vez disso o formulário de transporte comum, onde ficam o Código da reserva, o Status, os viajantes e os arquivos.',
+    'Escolha outra conexão e clique em Adicionar ao dia; ela toma o lugar da antiga. Editar, na outra ponta da mesma barra, abre em vez disso o formulário de transporte comum, onde ficam o Código da reserva, o Status, os viajantes, as notas e os arquivos.',
   'help.guide.change-transit-route.result':
     'A viagem de transporte público carrega o novo itinerário, e o cartão dela na aba Transportes mostra as novas linhas e horários.',
   'help.guide.change-transit-route.tip.1':
-    'O título da viagem de transporte público é só texto: o lápis ao lado o renomeia sem tocar no trajeto. Notas, abaixo, aceitam markdown e têm uma aba Editar e uma aba Prévia.',
+    'O título no cabeçalho da reserva renomeia a conexão sem tocar no trajeto. As notas dela são escritas no formulário de transporte, atrás de Editar.',
   'help.guide.change-transit-route.tip.2':
-    'Excluir, no pé da viagem de transporte público, remove a conexão da viagem; o dia mantém as paradas.',
+    'Excluir, no pé da reserva, remove a conexão da viagem; o dia mantém as paradas.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Mudar como um trecho é percorrido',
   'help.guide.leg-travel-mode.goal':
@@ -3642,17 +3643,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Corrigir um horário, uma plataforma ou um código de reserva, ou tirar o trajeto da viagem.',
   'help.guide.edit-transport.step.1':
-    'No plano do dia, um transporte é uma linha colorida entre as paradas. Clique nela.',
+    'No plano do dia, um transporte é uma linha colorida entre as paradas. Clique nela; a reserva dele abre com os horários, a rota e o Código da reserva.',
   'help.guide.edit-transport.step.2':
-    'O formulário é o mesmo que o criou, com Editar transporte na barra de título. Tudo pode mudar: o tipo, a rota, os dias e horários, o Código da reserva, o Status.',
+    'Editar, no pé da reserva, abre o formulário que o criou, com Editar transporte na barra de título. Tudo pode mudar: o tipo, a rota, os dias e horários, o Código da reserva, o Status.',
   'help.guide.edit-transport.step.3':
     'A rota de um voo é uma cadeia de aeroportos, a de um trem uma cadeia de estações. Adicionar parada põe mais uma no meio, e cada trecho mantém os próprios horários e o próprio número de voo ou de trem.',
   'help.guide.edit-transport.step.4':
-    'Clique em Atualizar. Para remover o transporte de vez, use a lixeira no cartão dele na aba Transportes e confirme.',
+    'Clique em Atualizar. Para remover o transporte de vez, use Excluir no pé da reserva dele, ou a lixeira no cartão dele na aba Transportes, e confirme.',
   'help.guide.edit-transport.result':
     'A mudança aparece em todo lugar onde o transporte está: na aba Transportes, no dia em que ele corre, e na linha dele no mapa.',
   'help.guide.edit-transport.tip.1':
-    'O mesmo formulário abre dos dois lados, pelo lápis no cartão da aba Transportes e pela linha do próprio transporte no plano do dia. Uma conexão de transporte público planejada é a exceção: a linha dela abre a viagem de transporte público, e Editar detalhes leva de lá a este formulário.',
+    'O mesmo formulário abre dos dois lados: por Editar na reserva que uma linha do plano do dia abre, e pelo lápis no cartão da aba Transportes. Uma conexão de transporte público planejada também abre como reserva; Alterar trajeto ali busca de novo, e Editar leva a este formulário.',
   'help.guide.edit-transport.tip.2':
     'Mover um transporte para outro dia não precisa do formulário: arraste a linha dele de um cartão de dia para o seguinte.',
   // transport-on-map
diff --git a/shared/src/i18n/br/places.ts b/shared/src/i18n/br/places.ts
index bda8ad319..fc3c8763c 100644
--- a/shared/src/i18n/br/places.ts
+++ b/shared/src/i18n/br/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Selecione pelo menos um tipo.',
   'places.selectionCount': '{count} selecionado(s)',
   'places.deleteSelected': 'Excluir seleção',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Alterar categoria',
+  'places.categoryChanged': '{count} lugares atualizados',
   'places.kmlKmzImported': '{count} lugares importados de KMZ/KML',
   'places.urlResolved': 'Lugar importado da URL',
   'places.importList': 'Importar lista',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Mostrar a viagem inteira',
   'places.filterTracks': 'Trilhas',
   'places.filterByRating': 'Filtrar por avaliação',
+  'places.filterShow': 'Mostrar',
+  'places.clearSearch': 'Limpar busca',
   'places.yourRating': 'Sua avaliação',
   'places.notRated': 'Ainda sem avaliações',
   'places.search': 'Buscar lugares...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Rua, cidade, país',
   'places.formLat': 'Latitude (ex.: -23.5505)',
   'places.formLng': 'Longitude (ex.: -46.6333)',
+  'places.formLatLabel': 'Latitude',
+  'places.formLngLabel': 'Longitude',
   'places.formCategory': 'Categoria',
   'places.noCategory': 'Sem categoria',
   'places.newCategory': 'Nova categoria',
diff --git a/shared/src/i18n/br/reservations.ts b/shared/src/i18n/br/reservations.ts
index 10ff7f5fa..c59880687 100644
--- a/shared/src/i18n/br/reservations.ts
+++ b/shared/src/i18n/br/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicicleta',
   'reservations.type.taxi': 'Táxi',
   'reservations.type.transit': 'Transporte público',
+  'reservations.typeShort.transit': 'Transp. público',
   'reservations.type.transport_other': 'Outro',
   'reservations.confirm.delete': 'Tem certeza de que deseja excluir a reserva "{name}"?',
   'reservations.confirm.deleteTitle': 'Excluir reserva?',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Local / endereço',
   'reservations.locationPlaceholder': 'Endereço, aeroporto, hotel...',
   'reservations.confirmationCode': 'Código da reserva',
+  'reservations.routeLabel': 'Rota',
+  'reservations.segmentCodes': 'Códigos por trecho',
   'reservations.confirmationPlaceholder': 'ex.: ABC12345',
   'reservations.day': 'Dia',
   'reservations.noDay': 'Sem dia',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Falha ao excluir',
   'reservations.confirm.remove': 'Remover a reserva "{name}"?',
   'reservations.linkAssignment': 'Vincular à atribuição do dia',
+  'reservations.linkedTo': 'Vinculada a',
   'reservations.pickAssignment': 'Selecione uma atribuição do seu plano...',
   'reservations.noAssignment': 'Sem vínculo (avulsa)',
   'reservations.price': 'Preço',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} reserva(s) encontrada(s)',
   'reservations.import.previewEmpty': 'Nenhuma reserva pôde ser extraída dos arquivos enviados.',
   'reservations.import.removeItem': 'Remover',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Revisar',
+  'reservations.import.tryAi': 'Tentar leitura com IA',
+  'reservations.import.aiParsing': 'Lendo com IA…',
   'reservations.import.confirm': 'Importar {count} reserva(s)',
   'reservations.import.back': 'Voltar',
   'reservations.import.success': '{count} reserva(s) importada(s)',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Viajantes',
   'reservations.travelers.assign': 'Atribuir viajantes',
   'reservations.travelers.none': 'Nenhum viajante na viagem ainda.',
+  'reservations.status.switchTo': 'Mudar para {status}',
+  'reservations.view.label': 'Visualização',
+  'reservations.view.cards': 'Cartões',
+  'reservations.view.list': 'Lista',
+  'reservations.view.timeline': 'Linha do tempo',
+  'reservations.filter': 'Filtrar',
+  'reservations.searchPlaceholder': 'Buscar',
+  'reservations.results': '{shown} de {total}',
+  'reservations.resetFilters': 'Limpar filtros',
+  'reservations.noMatches': 'Nada corresponde a esses filtros',
+  'reservations.viewOptions': 'Opções de visualização',
+  'reservations.resetView': 'Redefinir visualização',
+  'reservations.group.label': 'Agrupar por',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Dia',
+  'reservations.group.type': 'Tipo',
+  'reservations.group.none': 'Sem agrupamento',
+  'reservations.transitApart': 'Transporte público em seção própria',
+  'reservations.group.before': 'Antes da viagem',
+  'reservations.group.after': 'Depois da viagem',
+  'reservations.group.undated': 'Sem data',
+  'reservations.sort.label': 'Ordenar por',
+  'reservations.sort.date': 'Data',
+  'reservations.sort.title': 'Título',
+  'reservations.sort.type': 'Tipo',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Mais cedo primeiro',
+  'reservations.sort.lateFirst': 'Mais tarde primeiro',
+  'reservations.sort.aToZ': 'A a Z',
+  'reservations.sort.zToA': 'Z a A',
+  'reservations.timeline.dayCount': '{count} dias',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Viagem',
+  'reservations.timeline.day': 'Dia',
+  'reservations.timeline.prevDay': 'Dia anterior',
+  'reservations.timeline.nextDay': 'Próximo dia',
+  'reservations.timeline.openDay': 'Abrir {day} hora a hora',
+  'reservations.timeline.nothingThisDay': 'Nada neste dia.',
+  'reservations.timeline.today': 'Hoje',
+  'reservations.timeline.now': 'agora',
+  'reservations.timeline.byType': 'Uma faixa por tipo',
+  'reservations.timeline.context': 'Mostrar a outra aba',
+  'reservations.timeline.contextBookings': 'Reservas',
+  'reservations.timeline.contextTransports': 'Transportes',
+  'reservations.timeline.noneDated': 'Nada aqui tem data ainda.',
+  'reservations.undated': 'Sem data',
+  'reservations.nights': 'Noites',
+  'reservations.start': 'Início',
+  'reservations.end': 'Fim',
+  'reservations.rename': 'Renomear',
+  'reservations.copyCode': 'Copiar código da reserva',
+  'reservations.copyFailed': 'Não foi possível copiar',
+  'reservations.showInFiles': 'Mostrar nos arquivos',
 };
 export default reservations;
diff --git a/shared/src/i18n/br/transport.ts b/shared/src/i18n/br/transport.ts
index 9a36f3134..466ff925d 100644
--- a/shared/src/i18n/br/transport.ts
+++ b/shared/src/i18n/br/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Editar transporte',
   'transport.title': 'Transportes',
   'transport.addManual': 'Transporte',
+  'transport.empty': 'Nenhum transporte ainda',
 };
 export default transport;
diff --git a/shared/src/i18n/ca/budget.ts b/shared/src/i18n/ca/budget.ts
index 16cd6e5dc..600c66c43 100644
--- a/shared/src/i18n/ca/budget.ts
+++ b/shared/src/i18n/ca/budget.ts
@@ -107,6 +107,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'A parts iguals',
   'costs.splitCustom': 'Personalitzat',
   'costs.splitTicket': 'Tiquet',
+  'costs.perPerson': '{amount} per persona',
+  'costs.payersHint': 'Marca qui ha pagat i escriu quant hi ha posat cadascú.',
+  'costs.splitHint.equally': 'Totes les persones marcades paguen la mateixa part.',
+  'costs.splitHint.custom': 'Escriu la part de cada persona; entre totes han de sumar el total.',
+  'costs.splitHint.ticket': 'Llista el que hi havia al rebut i marca qui ha pres cada article.',
   'costs.pickSomeone': 'Tria almenys una persona amb qui dividir-ho.',
   'costs.splitSummary': 'Dividit de {count} maneres · {amount} cadascú',
   'costs.cat.accommodation': 'Allotjament',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Rebuts',
   'costs.receiptsTitle': 'Rebuts i factures',
   'costs.attachReceipt': 'Adjuntar rebut / factura',
+  'costs.attach': 'Adjuntar',
   'costs.scan.button': 'Escanejar rebut',
   'costs.scan.reading': 'Llegint el rebut…',
   'costs.scan.review': 'Revisar la despesa',
   'costs.scan.nothingRead': "No s'ha pogut llegir cap rebut d'aquesta foto.",
   'costs.scan.failed': "No s'ha pogut començar a llegir el rebut.",
   'costs.scan.title': 'Escanejar rebut',
-  'costs.scan.accepted': "Una foto d'un sol rebut (JPG, PNG o WEBP, fins a 10 MB). El model d'IA la llegeix en segon pla i després revises la despesa abans de desar-la.",
+  'costs.scan.accepted':
+    "Una foto d'un sol rebut (JPG, PNG o WEBP, fins a 10 MB). El model d'IA la llegeix en segon pla i després revises la despesa abans de desar-la.",
   'costs.scan.dropHere': 'Deixa aquí la foto del rebut, o fes clic per triar-ne o fer-ne una',
   'costs.scan.dropActive': 'Deixa anar la foto per escanejar-la',
   'costs.scan.start': 'Escanejar',
@@ -168,7 +175,8 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Cap rebut adjunt',
   'costs.deleteReceipt': 'Eliminar rebut',
   'costs.viewReceipt': 'Veure rebut',
-  'costs.receiptLeftBehind': 'No es pot desar i encara hi ha {count} rebuts pujats. Elimina aquests fitxers a la pestanya Fitxers.',
+  'costs.receiptLeftBehind':
+    'No es pot desar i encara hi ha {count} rebuts pujats. Elimina aquests fitxers a la pestanya Fitxers.',
 };
 
 export default budget;
diff --git a/shared/src/i18n/ca/help.ts b/shared/src/i18n/ca/help.ts
index ca50c54c8..9279269a8 100644
--- a/shared/src/i18n/ca/help.ts
+++ b/shared/src/i18n/ca/help.ts
@@ -2314,9 +2314,9 @@ const help: TranslationStrings = {
     'Obre la parada a la qual pertany la reserva. La fitxa mostra una franja amb Confirmada o Pendent i el nom de la reserva.',
   'help.guide.place-booking.step.2':
     'La franja duu la Data, l’Hora i el Codi de reserva, i les notes que tingui la reserva.',
-  'help.guide.place-booking.step.3': 'Fes clic a la franja. El formulari de la reserva s’hi obre al damunt.',
+  'help.guide.place-booking.step.3': 'Fes clic a la franja. La reserva s’obre damunt del mapa.',
   'help.guide.place-booking.step.4':
-    'Vincula a una assignació del dia és el que penja una reserva d’una parada, i aquí ja n’anomena aquesta. Torna a tancar el formulari.',
+    'Editar, al peu de la reserva, n’obre el formulari. Vincula a una assignació del dia, allà, és el que penja una reserva d’una parada, i aquí ja n’anomena aquesta. Torna a tancar el formulari.',
   'help.guide.place-booking.step.5':
     'Una reserva nova per a una parada comença a la columna dels dies: passa per sobre de la parada i fes clic al + del seu extrem. El formulari s’obre com a Reserva nova, ja vinculada a ella.',
   'help.guide.place-booking.result':
@@ -2676,7 +2676,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'El color diu com està una reserva: una fila verda està confirmada, una d’ambre encara està pendent. Els allotjaments no surten en aquesta llista, tenen el seu propi bloc a sota.',
   'help.guide.day-bookings.step.4':
-    'La llista només llegeix les reserves. Una reserva es crea i es canvia a la pestanya Reserves.',
+    'Fes clic a una fila i s’obre la reserva. Editar, al seu peu, la canvia; les reserves noves es creen a la pestanya Reserves.',
   'help.guide.day-bookings.result':
     'Tot el que està datat al dia, i tot el que penja d’alguna de les seves parades, és en aquesta única llista.',
   'help.guide.day-bookings.tip.1':
@@ -3222,13 +3222,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Fes clic a Reserva manual, a dalt a la dreta de la pestanya. S’obre Reserva nova.',
   'help.guide.create-booking.step.2':
-    'Tria el Tipus de reserva a la llista de dalt del formulari, al costat de Viatgers. Allotjament, Restaurant, Esdeveniment, Excursió, Aparcament i Altres són els sis que fa aquesta pestanya, i el formulari canvia amb la tria: només Allotjament bescanvia les dates per un interval de dies.',
+    'Fes clic a la píndola del tipus, sota el títol, a la capçalera del formulari, i tria el Tipus de reserva. Allotjament, Restaurant, Esdeveniment, Excursió, Aparcament i Altres són els sis que fa aquesta pestanya, i el formulari canvia amb la tria: només Allotjament bescanvia les dates per un interval de dies.',
   'help.guide.create-booking.step.3':
     'Escriu el Títol. És l’únic camp en què el formulari insisteix, i Afegir es queda mort fins que hi hagi alguna cosa.',
   'help.guide.create-booking.step.4':
     'Posa Data i Hora d’inici, i Data de fi i Hora de fi si la reserva té un final. Els calendaris només ofereixen dies de dins del viatge, i un final que no és posterior a l’inici ho diu en vermell i bloqueja Afegir.',
   'help.guide.create-booking.step.5':
-    'Posa el Codi de reserva de la confirmació i posa l’Estat. Pendent o Confirmada decideix a quina de les dues seccions aterra la targeta.',
+    'Posa el Codi de reserva de la confirmació. La píndola d’estat al costat del tipus diu Pendent; un clic la passa a Confirmada i un altre la torna enrere, i això decideix a quina de les dues seccions aterra la targeta.',
   'help.guide.create-booking.step.6': 'Fes clic a Afegir.',
   'help.guide.create-booking.result':
     'La reserva és una targeta a la seva secció, amb el seu xip de tipus, les seves dates i el seu codi, i tothom més del viatge la veu aparèixer.',
@@ -3278,7 +3278,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Dir per a qui és una reserva',
   'help.guide.booking-travelers.goal': 'Marca els viatgers que cobreix una reserva i després mira només les seves.',
   'help.guide.booking-travelers.step.1':
-    'Obre la reserva amb el llapis. Viatgers és a dalt del formulari, al costat de Tipus de reserva, i diu Assigna viatgers mentre no hi ha ningú a la reserva.',
+    'Obre la reserva amb el llapis. Viatgers és al costat del Codi de reserva, i diu Assigna viatgers mentre no hi ha ningú a la reserva.',
   'help.guide.booking-travelers.step.2':
     'Fes-hi clic i tria les persones per a qui és aquesta reserva; els convidats amb nom també són a la llista. La que tries rep una marca i el seu avatar al camp. Torna a fer clic al nom per treure-la.',
   'help.guide.booking-travelers.step.3': 'Fes clic a Actualitzar.',
@@ -3373,7 +3373,7 @@ const help: TranslationStrings = {
     'Fes clic al llapis de la capçalera de la targeta. Edita la reserva s’obre amb tot el que la reserva sap.',
   'help.guide.edit-booking.step.2':
     'Canvia el que calgui canviar, aquí el Codi de reserva que l’operador ha acabat enviant.',
-  'help.guide.edit-booking.step.3': 'Posa Estat a Confirmada.',
+  'help.guide.edit-booking.step.3': 'Fes clic a la píndola Pendent a la capçalera del formulari. Passa a Confirmada.',
   'help.guide.edit-booking.step.4': 'Fes clic a Actualitzar.',
   'help.guide.edit-booking.result':
     'La targeta es mou: una reserva confirmada és a la secció Confirmada darrere d’un punt verd, i tothom del viatge la veu moure’s.',
@@ -3668,19 +3668,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Llegir la connexió parada a parada, canviar-li el nom, o tornar a cercar la ruta.',
   'help.guide.change-transit-route.step.1':
-    'A la pestanya Transports, les connexions planificades són sota Transport públic automatitzat. Fes clic a la targeta.',
+    'A la pestanya Transports, les connexions planificades són sota Transport públic automatitzat. Fes clic a la targeta; la connexió s’obre com una reserva.',
   'help.guide.change-transit-route.step.2':
     'Durada, Transbords i A peu són a dalt. Itinerari, a sota, recorre la connexió parada a parada, amb les andanes i els trams a peu entre les línies.',
   'help.guide.change-transit-route.step.3':
-    'Canviar de ruta torna a executar la cerca, ja plena amb els dos extrems d’aquesta connexió i amb el seu dia.',
+    'Canviar de ruta, al peu de la reserva, torna a executar la cerca, ja plena amb els dos extrems d’aquesta connexió i amb el seu dia.',
   'help.guide.change-transit-route.step.4':
-    'Tria una altra connexió i fes clic a Afegir al dia; ocupa el lloc de l’anterior. Editar detalls, al costat de Canviar de ruta, obre en canvi el formulari de transport corrent, on viuen el Codi de reserva, l’Estat, els viatgers i els fitxers.',
+    'Tria una altra connexió i fes clic a Afegir al dia; ocupa el lloc de l’anterior. Editar, a l’altre extrem de la mateixa barra, obre en canvi el formulari de transport corrent, on viuen el Codi de reserva, l’Estat, els viatgers, les notes i els fitxers.',
   'help.guide.change-transit-route.result':
     'El trajecte porta el nou itinerari, i la seva targeta a la pestanya Transports mostra les línies i les hores noves.',
   'help.guide.change-transit-route.tip.1':
-    'El títol del trajecte només és text: el llapis del costat el canvia de nom sense tocar la ruta. Notes, a sota, accepten markdown i tenen una pestanya Editar i una de Vista prèvia.',
+    'El títol a la capçalera de la reserva canvia el nom de la connexió sense tocar la ruta. Les seves notes s’escriuen al formulari de transport, darrere d’Editar.',
   'help.guide.change-transit-route.tip.2':
-    'Eliminar, al peu del trajecte, treu la connexió del viatge; el dia manté les seves parades.',
+    'Eliminar, al peu de la reserva, treu la connexió del viatge; el dia manté les seves parades.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Canviar com es fa un tram',
   'help.guide.leg-travel-mode.goal':
@@ -3705,17 +3705,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Corregir una hora, una andana o un codi de reserva, o treure el trajecte del viatge.',
   'help.guide.edit-transport.step.1':
-    'Al pla del dia un transport és una fila de color entre les parades. Fes-hi clic.',
+    'Al pla del dia un transport és una fila de color entre les parades. Fes-hi clic; s’obre la seva reserva amb les hores, la ruta i el Codi de reserva.',
   'help.guide.edit-transport.step.2':
-    'El formulari és el mateix que el va crear, amb Edita el transport a la barra de títol. Tot es pot canviar: el tipus, la ruta, els dies i les hores, el Codi de reserva, l’Estat.',
+    'Editar, al peu de la reserva, obre el formulari que el va crear, amb Edita el transport a la barra de títol. Tot es pot canviar: el tipus, la ruta, els dies i les hores, el Codi de reserva, l’Estat.',
   'help.guide.edit-transport.step.3':
     'La ruta d’un vol és una cadena d’aeroports, la d’un tren una cadena d’estacions. Afegeix una escala en posa una altra al mig, i cada tram manté les seves hores i el seu número de vol o de tren.',
   'help.guide.edit-transport.step.4':
-    'Fes clic a Actualitzar. Per treure el transport del tot, fes servir la paperera de la seva targeta a la pestanya Transports i confirma.',
+    'Fes clic a Actualitzar. Per treure el transport del tot, fes servir Eliminar al peu de la seva reserva, o la paperera de la seva targeta a la pestanya Transports, i confirma.',
   'help.guide.edit-transport.result':
     'El canvi es veu a tot arreu on surt el transport: la pestanya Transports, el dia en què va, i la seva línia al mapa.',
   'help.guide.edit-transport.tip.1':
-    'El mateix formulari s’obre pels dos costats, amb el llapis de la targeta a la pestanya Transports i amb la fila pròpia del transport al pla del dia. Una connexió de transport públic planificada és l’excepció: la seva fila obre la vista del trajecte, i Editar detalls hi porta a aquest formulari.',
+    'El mateix formulari s’obre pels dos costats: amb Editar a la reserva que obre una fila del pla del dia, i amb el llapis de la targeta a la pestanya Transports. Una connexió de transport públic planificada també s’obre com una reserva; Canviar de ruta hi torna a cercar, i Editar porta a aquest formulari.',
   'help.guide.edit-transport.tip.2':
     'Moure un transport a un altre dia no necessita gens el formulari: arrossega la seva fila d’una targeta de dia a la següent.',
   // transport-on-map
diff --git a/shared/src/i18n/ca/places.ts b/shared/src/i18n/ca/places.ts
index a825fff6b..57a59ad24 100644
--- a/shared/src/i18n/ca/places.ts
+++ b/shared/src/i18n/ca/places.ts
@@ -36,7 +36,8 @@ const places: TranslationStrings = {
   'places.importNaverList': 'Llista de Naver',
   'places.googleListHint': "Enganxa un enllaç compartit d'una llista de Google Maps per importar tots els llocs.",
   'places.googleListImported': '{count} llocs importats de "{list}"',
-  'places.googleDirHint': 'Un enllaç d’indicacions també serveix: les seves parades esdevenen llocs, en ordre de conducció.',
+  'places.googleDirHint':
+    'Un enllaç d’indicacions també serveix: les seves parades esdevenen llocs, en ordre de conducció.',
   'places.googleListError': 'Error en importar la llista de Google Maps',
   'places.naverListHint': "Enganxa un enllaç compartit d'una llista de Naver Maps per importar tots els llocs.",
   'places.naverListImported': '{count} llocs importats de "{list}"',
@@ -50,6 +51,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Mostra tot el viatge',
   'places.filterTracks': 'Rutes',
   'places.filterByRating': 'Filtra per valoració',
+  'places.filterShow': 'Mostrar',
+  'places.clearSearch': 'Esborra la cerca',
   'places.yourRating': 'La teva valoració',
   'places.notRated': 'Encara sense valoració',
   'places.search': 'Cerca llocs...',
@@ -69,6 +72,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Carrer, ciutat, país',
   'places.formLat': 'Latitud (p. ex. 48.8566)',
   'places.formLng': 'Longitud (p. ex. 2.3522)',
+  'places.formLatLabel': 'Latitud',
+  'places.formLngLabel': 'Longitud',
   'places.formCategory': 'Categoria',
   'places.noCategory': 'Sense categoria',
   'places.newCategory': 'Categoria nova',
diff --git a/shared/src/i18n/ca/reservations.ts b/shared/src/i18n/ca/reservations.ts
index 7cb7f7042..212f01dd3 100644
--- a/shared/src/i18n/ca/reservations.ts
+++ b/shared/src/i18n/ca/reservations.ts
@@ -37,6 +37,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicicleta',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Transport públic',
+  'reservations.typeShort.transit': 'Transp. públic',
   'reservations.type.transport_other': 'Altres',
   'reservations.confirm.delete': 'Segur que vols eliminar la reserva "{name}"?',
   'reservations.confirm.deleteTitle': 'Vols eliminar la reserva?',
@@ -52,6 +53,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Ubicació / adreça',
   'reservations.locationPlaceholder': 'Adreça, aeroport, hotel...',
   'reservations.confirmationCode': 'Codi de reserva',
+  'reservations.routeLabel': 'Ruta',
+  'reservations.segmentCodes': 'Codis per tram',
   'reservations.confirmationPlaceholder': 'p. ex. ABC12345',
   'reservations.day': 'Dia',
   'reservations.noDay': 'Sense dia',
@@ -66,6 +69,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': "No s'ha pogut eliminar",
   'reservations.confirm.remove': 'Vols eliminar la reserva de "{name}"?',
   'reservations.linkAssignment': 'Vincula a una assignació del dia',
+  'reservations.linkedTo': 'Vinculada a',
   'reservations.pickAssignment': 'Selecciona una assignació del teu pla...',
   'reservations.noAssignment': 'Sense vincle (independent)',
   'reservations.price': 'Preu',
@@ -182,5 +186,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Viatgers',
   'reservations.travelers.assign': 'Assigna viatgers',
   'reservations.travelers.none': 'Encara no hi ha viatgers al viatge.',
+  'reservations.status.switchTo': 'Canviar a {status}',
+  'reservations.view.label': 'Vista',
+  'reservations.view.cards': 'Targetes',
+  'reservations.view.list': 'Llista',
+  'reservations.view.timeline': 'Cronologia',
+  'reservations.filter': 'Filtrar',
+  'reservations.searchPlaceholder': 'Cerca',
+  'reservations.results': '{shown} de {total}',
+  'reservations.resetFilters': 'Restablir els filtres',
+  'reservations.noMatches': 'Res no coincideix amb aquests filtres',
+  'reservations.viewOptions': 'Opcions de vista',
+  'reservations.resetView': 'Restablir la vista',
+  'reservations.group.label': 'Agrupar per',
+  'reservations.group.status': 'Estat',
+  'reservations.group.day': 'Dia',
+  'reservations.group.type': 'Tipus',
+  'reservations.group.none': 'Sense agrupar',
+  'reservations.transitApart': 'Transport públic en una secció pròpia',
+  'reservations.group.before': 'Abans del viatge',
+  'reservations.group.after': 'Després del viatge',
+  'reservations.group.undated': 'Sense data',
+  'reservations.sort.label': 'Ordenar per',
+  'reservations.sort.date': 'Data',
+  'reservations.sort.title': 'Títol',
+  'reservations.sort.type': 'Tipus',
+  'reservations.sort.status': 'Estat',
+  'reservations.sort.earlyFirst': 'Més aviat primer',
+  'reservations.sort.lateFirst': 'Més tard primer',
+  'reservations.sort.aToZ': 'De la A a la Z',
+  'reservations.sort.zToA': 'De la Z a la A',
+  'reservations.timeline.dayCount': '{count} dies',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Viatge',
+  'reservations.timeline.day': 'Dia',
+  'reservations.timeline.prevDay': 'Dia anterior',
+  'reservations.timeline.nextDay': 'Dia següent',
+  'reservations.timeline.openDay': 'Obrir {day} hora per hora',
+  'reservations.timeline.nothingThisDay': 'No hi ha res aquest dia.',
+  'reservations.timeline.today': 'Avui',
+  'reservations.timeline.now': 'ara',
+  'reservations.timeline.byType': 'Un carril per tipus',
+  'reservations.timeline.context': "Mostrar l'altra pestanya",
+  'reservations.timeline.contextBookings': 'Reserves',
+  'reservations.timeline.contextTransports': 'Transports',
+  'reservations.timeline.noneDated': "Encara no n'hi ha cap amb data.",
+  'reservations.undated': 'Sense data',
+  'reservations.nights': 'Nits',
+  'reservations.start': 'Inici',
+  'reservations.end': 'Fi',
+  'reservations.rename': 'Canviar el nom',
+  'reservations.copyCode': 'Copiar el codi de reserva',
+  'reservations.copyFailed': "No s'ha pogut copiar",
+  'reservations.showInFiles': 'Mostrar als fitxers',
 };
 export default reservations;
diff --git a/shared/src/i18n/ca/transport.ts b/shared/src/i18n/ca/transport.ts
index dc294285c..dbb053f63 100644
--- a/shared/src/i18n/ca/transport.ts
+++ b/shared/src/i18n/ca/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Edita el transport',
   'transport.title': 'Transports',
   'transport.addManual': 'Transport manual',
+  'transport.empty': 'Encara no hi ha transports',
 };
 export default transport;
diff --git a/shared/src/i18n/cs/budget.ts b/shared/src/i18n/cs/budget.ts
index b928b2382..e565bf157 100644
--- a/shared/src/i18n/cs/budget.ts
+++ b/shared/src/i18n/cs/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Jen v součtu — zatím nevyrovnáno',
   'costs.tapToInclude': 'Klepnutím zahrnout',
   'costs.amount': 'Částka',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Rozdělení',
+  'costs.splitEqually': 'Rovným dílem',
+  'costs.splitCustom': 'Vlastní',
+  'costs.splitTicket': 'Účtenka',
+  'costs.perPerson': '{amount} na osobu',
+  'costs.payersHint': 'Zaškrtněte, kdo platil, a zadejte, kolik kdo zaplatil.',
+  'costs.splitHint.equally': 'Všichni zaškrtnutí platí stejný podíl.',
+  'costs.splitHint.custom': 'Zadejte podíl každé osoby; dohromady musí dát celkovou částku.',
+  'costs.splitHint.ticket': 'Vypište, co bylo na účtence, a zaškrtněte, kdo měl kterou položku.',
   'costs.filter.allCategories': 'Všechny kategorie',
   'costs.filter.allDays': 'Všechny dny',
   'costs.expensesCount': '{count} výdajů',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Účtenky',
   'costs.receiptsTitle': 'Účtenky a faktury',
   'costs.attachReceipt': 'Připojit účtenku / fakturu',
+  'costs.attach': 'Připojit',
   'costs.scan.button': 'Naskenovat účtenku',
   'costs.scan.reading': 'Čtení účtenky…',
   'costs.scan.review': 'Zkontrolovat výdaj',
   'costs.scan.nothingRead': 'Z této fotografie se nepodařilo přečíst žádnou účtenku.',
   'costs.scan.failed': 'Čtení účtenky se nepodařilo spustit.',
   'costs.scan.title': 'Naskenovat účtenku',
-  'costs.scan.accepted': 'Fotografie jedné účtenky (JPG, PNG nebo WEBP, do 10 MB). Model AI ji přečte na pozadí a vy pak výdaj před uložením zkontrolujete.',
+  'costs.scan.accepted':
+    'Fotografie jedné účtenky (JPG, PNG nebo WEBP, do 10 MB). Model AI ji přečte na pozadí a vy pak výdaj před uložením zkontrolujete.',
   'costs.scan.dropHere': 'Přetáhněte sem fotografii účtenky, nebo klikněte a vyberte či pořiďte novou',
   'costs.scan.dropActive': 'Pusťte fotografii pro naskenování',
   'costs.scan.start': 'Skenovat',
diff --git a/shared/src/i18n/cs/dayplan.ts b/shared/src/i18n/cs/dayplan.ts
index e9601a96f..aa88e4764 100644
--- a/shared/src/i18n/cs/dayplan.ts
+++ b/shared/src/i18n/cs/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Všechna místa přiřazena',
   'dayplan.mobile.noMatch': 'Žádná shoda',
   'dayplan.mobile.createNew': 'Vytvořit nové místo',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Rozbalit všechny dny', // en-fallback
+  'dayplan.collapseAll': 'Sbalit všechny dny', // en-fallback
   'dayplan.reorderDays': 'Změnit pořadí dnů',
   'dayplan.reorderTitle': 'Změnit pořadí dnů',
   'dayplan.reorderHint': 'Místa, poznámky a rezervace daného dne se přesunou spolu s ním.',
diff --git a/shared/src/i18n/cs/help.ts b/shared/src/i18n/cs/help.ts
index 6588a0732..0585b4ee2 100644
--- a/shared/src/i18n/cs/help.ts
+++ b/shared/src/i18n/cs/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'cs' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Nápověda a dokumentace',
+  'help.search': 'Hledat v dokumentaci…',
+  'help.contents': 'Obsah',
+  'help.noResults': 'Žádné odpovídající stránky.',
+  'help.errorTitle': 'Tuto stránku nelze načíst',
+  'help.errorBody': 'Obsah nápovědy se načítá z wiki TREK. Zkontrolujte připojení a zkuste to znovu.',
 
   // center
   'help.center.button': 'Nápověda k této obrazovce',
@@ -1001,7 +1001,7 @@ const help: TranslationStrings = {
     'Travel & map: trasy rezervací vždy na mapě, pilulka Objevovat místa, optimalizace trasy od ubytování, skryté rezervační kódy a popisky tras rezervací.',
   'help.ctx.settings-display.bullet.3':
     'Spuštění: zda se TREK otevře na přehledu, nebo na aktivní cestě, a která karta cesty se ukáže první.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Vzhled',
   'help.ctx.settings-appearance.summary':
     'Jak TREK vypadá na tomto účtu: světlý nebo tmavý, barva zvýraznění, sklo a pohyb, velikost textu a které widgety přehled ukazuje. Všechno se projeví živě, na každém zařízení, kde se přihlásíte.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2204,9 +2204,9 @@ const help: TranslationStrings = {
     'Otevřete zastávku, ke které rezervace patří. Karta ukáže proužek s Potvrzeno nebo Čeká na potvrzení a s názvem rezervace.',
   'help.guide.place-booking.step.2':
     'Proužek nese Datum, Čas a Rezervační kód, a jakékoli poznámky, které rezervace má.',
-  'help.guide.place-booking.step.3': 'Klikněte na proužek. Otevře se na něm vlastní formulář rezervace.',
+  'help.guide.place-booking.step.3': 'Klikněte na proužek. Rezervace se otevře nad mapou.',
   'help.guide.place-booking.step.4':
-    'Rezervaci k zastávce připíná Propojit s přiřazením dne a tady už tuhle zastávku jmenuje. Formulář zase zavřete.',
+    'Upravit na patě rezervace otevře její vlastní formulář. Rezervaci k zastávce tam připíná Propojit s přiřazením dne a tady už tuhle zastávku jmenuje. Formulář zase zavřete.',
   'help.guide.place-booking.step.5':
     'Nová rezervace pro zastávku začíná ve sloupci dnů: najeďte na zastávku a klikněte na + na jejím konci. Formulář se otevře jako Nová rezervace, už s ní propojený.',
   'help.guide.place-booking.result':
@@ -2555,7 +2555,8 @@ const help: TranslationStrings = {
     'Řádek ukazuje, jaký druh rezervace to je, její název a, když patří k zastávce, tu zastávku za tečkou. Její časy sedí na pravém konci.',
   'help.guide.day-bookings.step.3':
     'Barva říká, jak rezervace stojí: zelený řádek je potvrzený, jantarový ještě čeká na potvrzení. Hotely v tomto seznamu nejsou, mají vlastní blok níže.',
-  'help.guide.day-bookings.step.4': 'Seznam rezervace jen vypisuje. Rezervace se vytváří a mění na kartě Rezervace.',
+  'help.guide.day-bookings.step.4':
+    'Klikněte na řádek a rezervace se otevře. Upravit na její patě ji změní; nové rezervace se vytvářejí na kartě Rezervace.',
   'help.guide.day-bookings.result':
     'Všechno datované na ten den a všechno, co visí na některé z jeho zastávek, je v tomto jednom seznamu.',
   'help.guide.day-bookings.tip.1':
@@ -3086,13 +3087,13 @@ const help: TranslationStrings = {
     'Vložte do cesty ručně restauraci, událost, prohlídku, parkovací místo nebo cokoli jiného.',
   'help.guide.create-booking.step.1': 'Klikněte vpravo nahoře na kartě na Ruční rezervace. Otevře se Nová rezervace.',
   'help.guide.create-booking.step.2':
-    'Vyberte Typ rezervace ze seznamu nahoře ve formuláři, vedle pole Cestující. Ubytování, Restaurace, Událost, Prohlídka, Parkování a Jiné je těch šest, které tato karta dělá, a formulář se s volbou mění: jen Ubytování vymění svá data za rozsah dnů.',
+    'Klikněte na odznak typu pod názvem v záhlaví formuláře a vyberte Typ rezervace. Ubytování, Restaurace, Událost, Prohlídka, Parkování a Jiné je těch šest, které tato karta dělá, a formulář se s volbou mění: jen Ubytování vymění svá data za rozsah dnů.',
   'help.guide.create-booking.step.3':
     'Napište Název. Je to jediné pole, na kterém formulář trvá, a Přidat zůstane mrtvé, dokud v něm něco není.',
   'help.guide.create-booking.step.4':
     'Nastavte Datum a Čas začátku, a Datum konce a Čas konce, pokud má rezervace konec. Kalendáře nabízejí jen dny uvnitř cesty, a konec, který není po začátku, to řekne červeně a zablokuje Přidat.',
   'help.guide.create-booking.step.5':
-    'Vložte Rezervační kód z potvrzení a nastavte Stav. Čeká na potvrzení nebo Potvrzeno rozhodne, do které ze dvou sekcí karta padne.',
+    'Vložte Rezervační kód z potvrzení. Odznak stavu vedle typu ukazuje Čeká na potvrzení; kliknutí ho přepne na Potvrzeno a další zase zpět, a to rozhodne, do které ze dvou sekcí karta padne.',
   'help.guide.create-booking.step.6': 'Klikněte na Přidat.',
   'help.guide.create-booking.result':
     'Rezervace je karta ve své sekci se svým štítkem typu, svými daty a svým kódem, a všichni ostatní v cestě ji vidí přibýt.',
@@ -3141,7 +3142,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Říct, pro koho rezervace je',
   'help.guide.booking-travelers.goal': 'Označte cestující, které rezervace pokrývá, a pak si nechte ukázat jen jejich.',
   'help.guide.booking-travelers.step.1':
-    'Otevřete rezervaci tužkou. Pole Cestující je nahoře ve formuláři, vedle pole Typ rezervace, a dokud na rezervaci nikdo není, ukazuje Přiřadit cestující.',
+    'Otevřete rezervaci tužkou. Pole Cestující je vedle Rezervačního kódu, a dokud na rezervaci nikdo není, ukazuje Přiřadit cestující.',
   'help.guide.booking-travelers.step.2':
     'Klikněte na něj a vyberte lidi, pro které tato rezervace je; jmenovaní hosté jsou v seznamu také. Vybraný dostane fajfku a jeho avatar se objeví v poli. Dalším kliknutím na jméno ho zase sundáte.',
   'help.guide.booking-travelers.step.3': 'Klikněte na Aktualizovat.',
@@ -3234,7 +3235,7 @@ const help: TranslationStrings = {
     'Klikněte v hlavičce karty na tužku. Otevře se Upravit rezervaci se vším, co rezervace ví.',
   'help.guide.edit-booking.step.2':
     'Změňte, co je potřeba změnit, tady Rezervační kód, který provozovatel konečně poslal.',
-  'help.guide.edit-booking.step.3': 'Dejte Stav na Potvrzeno.',
+  'help.guide.edit-booking.step.3': 'Klikněte v záhlaví formuláře na odznak Čeká na potvrzení. Přepne se na Potvrzeno.',
   'help.guide.edit-booking.step.4': 'Klikněte na Aktualizovat.',
   'help.guide.edit-booking.result':
     'Karta se přesune: potvrzená rezervace stojí v sekci Potvrzeno za zelenou tečkou, a všichni v cestě ji vidí se přesunout.',
@@ -3524,19 +3525,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Přečíst spojení zastávku po zastávce, přejmenovat je nebo trasu vyhledat znovu.',
   'help.guide.change-transit-route.step.1':
-    'Na kartě Doprava sedí naplánovaná spojení pod Automatické spojení MHD. Klikněte na kartu.',
+    'Na kartě Doprava sedí naplánovaná spojení pod Automatické spojení MHD. Klikněte na kartu; spojení se otevře jako rezervace.',
   'help.guide.change-transit-route.step.2':
     'Doba trvání, Přestupy a Chůze sedí nahoře. Itinerář pod nimi projde spojení zastávku po zastávce, s nástupišti a s úseky pěšky mezi linkami.',
   'help.guide.change-transit-route.step.3':
-    'Změnit trasu spustí vyhledávání znovu, již vyplněné oběma konci tohoto spojení a jeho dnem.',
+    'Změnit trasu na patě rezervace spustí vyhledávání znovu, již vyplněné oběma konci tohoto spojení a jeho dnem.',
   'help.guide.change-transit-route.step.4':
-    'Vyberte jiné spojení a klikněte na Přidat ke dni; zaujme místo toho starého. Upravit podrobnosti vedle Změnit trasu otevře místo toho běžný formulář dopravy, kde žijí Rezervační kód, Stav, cestující a soubory.',
+    'Vyberte jiné spojení a klikněte na Přidat ke dni; zaujme místo toho starého. Upravit, na druhém konci téže lišty, otevře místo toho běžný formulář dopravy, kde žijí Rezervační kód, Stav, cestující, poznámky a soubory.',
   'help.guide.change-transit-route.result':
     'Okno Cesta veřejnou dopravou nese nový Itinerář a jeho karta na kartě Doprava ukazuje nové linky a časy.',
   'help.guide.change-transit-route.tip.1':
-    'Název v okně Cesta veřejnou dopravou je jen text: tužka vedle něj jej přejmenuje, aniž by se dotkla trasy. Poznámky pod ním přijímají markdown a mají kartu Upravit a Náhled.',
+    'Název v záhlaví rezervace přejmenuje spojení, aniž by se dotkl trasy. Jeho poznámky se píšou ve formuláři dopravy za tlačítkem Upravit.',
   'help.guide.change-transit-route.tip.2':
-    'Smazat na patě okna Cesta veřejnou dopravou vyjme spojení z cesty; den si ponechá své zastávky.',
+    'Smazat na patě rezervace vyjme spojení z cesty; den si ponechá své zastávky.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Změnit způsob cesty na jednom úseku',
   'help.guide.leg-travel-mode.goal':
@@ -3560,17 +3561,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Změnit nebo smazat dopravu',
   'help.guide.edit-transport.goal': 'Opravit čas, nástupiště nebo rezervační kód, nebo jízdu z cesty odebrat.',
-  'help.guide.edit-transport.step.1': 'V plánu dne je doprava barevným řádkem mezi zastávkami. Klikněte na něj.',
+  'help.guide.edit-transport.step.1':
+    'V plánu dne je doprava barevným řádkem mezi zastávkami. Klikněte na něj; otevře se její rezervace s časy, trasou a Rezervačním kódem.',
   'help.guide.edit-transport.step.2':
-    'Formulář je ten, který ji vytvořil, s nápisem Upravit dopravu v záhlaví. Změnit lze vše: typ, trasu, dny a časy, Rezervační kód, Stav.',
+    'Upravit na patě rezervace otevře formulář, který ji vytvořil, s nápisem Upravit dopravu v záhlaví. Změnit lze vše: typ, trasu, dny a časy, Rezervační kód, Stav.',
   'help.guide.edit-transport.step.3':
     'Trasa letu je řetězec letišť, trasa vlaku řetězec stanic. Přidat zastávku vloží mezi ně další a každý úsek si ponechá vlastní časy a vlastní číslo letu nebo vlaku.',
   'help.guide.edit-transport.step.4':
-    'Klikněte na Aktualizovat. Chcete-li dopravu odstranit úplně, použijte koš na její kartě na kartě Doprava a potvrďte.',
+    'Klikněte na Aktualizovat. Chcete-li dopravu odstranit úplně, použijte Smazat na patě její rezervace nebo koš na její kartě na kartě Doprava a potvrďte.',
   'help.guide.edit-transport.result':
     'Změna se projeví všude, kde se doprava objevuje: na kartě Doprava, ve dni, kdy jede, a na její čáře na mapě.',
   'help.guide.edit-transport.tip.1':
-    'Stejný formulář se otevře z obou stran, tužkou na kartě na kartě Doprava i vlastním řádkem dopravy v plánu dne. Výjimkou je naplánované spojení veřejnou dopravou: jeho řádek otevře okno Cesta veřejnou dopravou a Upravit podrobnosti tam vede k tomuto formuláři.',
+    'Stejný formulář se otevře z obou stran: přes Upravit v rezervaci, kterou otevře řádek v plánu dne, i tužkou na kartě na kartě Doprava. Naplánované spojení veřejnou dopravou se také otevře jako rezervace; Změnit trasu tam hledá znovu a Upravit vede k tomuto formuláři.',
   'help.guide.edit-transport.tip.2':
     'Přesun dopravy na jiný den formulář vůbec nepotřebuje: přetáhněte její řádek z jedné karty dne na druhou.',
   // transport-on-map
diff --git a/shared/src/i18n/cs/places.ts b/shared/src/i18n/cs/places.ts
index 42a48ece5..180be2b56 100644
--- a/shared/src/i18n/cs/places.ts
+++ b/shared/src/i18n/cs/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Vyberte alespoň jeden typ.',
   'places.selectionCount': '{count} vybráno',
   'places.deleteSelected': 'Smazat vybrané',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Změnit kategorii',
+  'places.categoryChanged': 'Aktualizováno míst: {count}',
   'places.kmlKmzImported': 'Importováno {count} míst z KMZ/KML',
   'places.urlResolved': 'Místo importováno z URL',
   'places.importList': 'Import seznamu',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Zobrazit celou cestu',
   'places.filterTracks': 'Trasy',
   'places.filterByRating': 'Filtrovat podle hodnocení',
+  'places.filterShow': 'Zobrazit',
+  'places.clearSearch': 'Vymazat hledání',
   'places.yourRating': 'Tvé hodnocení',
   'places.notRated': 'Zatím bez hodnocení',
   'places.search': 'Hledat místa...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Ulice, město, země',
   'places.formLat': 'Zeměpisná šířka',
   'places.formLng': 'Zeměpisná délka',
+  'places.formLatLabel': 'Zeměpisná šířka',
+  'places.formLngLabel': 'Zeměpisná délka',
   'places.formCategory': 'Kategorie',
   'places.noCategory': 'Bez kategorie',
   'places.newCategory': 'Nová kategorie',
diff --git a/shared/src/i18n/cs/reservations.ts b/shared/src/i18n/cs/reservations.ts
index 3a9393bad..ae65e2183 100644
--- a/shared/src/i18n/cs/reservations.ts
+++ b/shared/src/i18n/cs/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Kolo',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Veřejná doprava',
+  'reservations.typeShort.transit': 'MHD',
   'reservations.type.transport_other': 'Ostatní',
   'reservations.confirm.delete': 'Opravdu chcete smazat rezervaci „{name}”?',
   'reservations.confirm.deleteTitle': 'Smazat rezervaci?',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Místo / Adresa',
   'reservations.locationPlaceholder': 'Adresa, letiště, hotel...',
   'reservations.confirmationCode': 'Rezervační kód',
+  'reservations.routeLabel': 'Trasa',
+  'reservations.segmentCodes': 'Kódy úseků',
   'reservations.confirmationPlaceholder': 'např. ABC12345',
   'reservations.day': 'Den',
   'reservations.noDay': 'Žádný den',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Smazání se nezdařilo',
   'reservations.confirm.remove': 'Odstranit rezervaci pro „{name}”?',
   'reservations.linkAssignment': 'Propojit s přiřazením dne',
+  'reservations.linkedTo': 'Propojeno s',
   'reservations.pickAssignment': 'Vyberte přiřazení z vašeho plánu...',
   'reservations.noAssignment': 'Bez propojení (samostatné)',
   'reservations.price': 'Cena',
@@ -134,9 +138,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'Nalezeno {count} rezervace/í',
   'reservations.import.previewEmpty': 'Z nahraných souborů se nepodařilo extrahovat žádné rezervace.',
   'reservations.import.removeItem': 'Odebrat',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Ke kontrole',
+  'reservations.import.tryAi': 'Zkusit načíst pomocí AI',
+  'reservations.import.aiParsing': 'Načítání pomocí AI…',
   'reservations.import.confirm': 'Importovat {count} rezervaci/í',
   'reservations.import.back': 'Zpět',
   'reservations.import.success': '{count} rezervace/í importováno',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Cestující',
   'reservations.travelers.assign': 'Přiřadit cestující',
   'reservations.travelers.none': 'Zatím žádní účastníci výletu.',
+  'reservations.status.switchTo': 'Přepnout na {status}',
+  'reservations.view.label': 'Zobrazení',
+  'reservations.view.cards': 'Karty',
+  'reservations.view.list': 'Seznam',
+  'reservations.view.timeline': 'Časová osa',
+  'reservations.filter': 'Filtr',
+  'reservations.searchPlaceholder': 'Hledat',
+  'reservations.results': '{shown} z {total}',
+  'reservations.resetFilters': 'Zrušit filtry',
+  'reservations.noMatches': 'Těmto filtrům nic neodpovídá',
+  'reservations.viewOptions': 'Možnosti zobrazení',
+  'reservations.resetView': 'Obnovit zobrazení',
+  'reservations.group.label': 'Seskupit podle',
+  'reservations.group.status': 'Stav',
+  'reservations.group.day': 'Den',
+  'reservations.group.type': 'Typ',
+  'reservations.group.none': 'Neseskupovat',
+  'reservations.transitApart': 'MHD jako samostatná sekce',
+  'reservations.group.before': 'Před cestou',
+  'reservations.group.after': 'Po cestě',
+  'reservations.group.undated': 'Bez data',
+  'reservations.sort.label': 'Řadit podle',
+  'reservations.sort.date': 'Datum',
+  'reservations.sort.title': 'Název',
+  'reservations.sort.type': 'Typ',
+  'reservations.sort.status': 'Stav',
+  'reservations.sort.earlyFirst': 'Od nejdřívějších',
+  'reservations.sort.lateFirst': 'Od nejpozdějších',
+  'reservations.sort.aToZ': 'A až Z',
+  'reservations.sort.zToA': 'Z až A',
+  'reservations.timeline.dayCount': '{count} dní',
+  'reservations.timeline.zoom': 'Přiblížení',
+  'reservations.timeline.trip': 'Cesta',
+  'reservations.timeline.day': 'Den',
+  'reservations.timeline.prevDay': 'Předchozí den',
+  'reservations.timeline.nextDay': 'Následující den',
+  'reservations.timeline.openDay': 'Otevřít {day} po hodinách',
+  'reservations.timeline.nothingThisDay': 'Na tento den nic není.',
+  'reservations.timeline.today': 'Dnes',
+  'reservations.timeline.now': 'teď',
+  'reservations.timeline.byType': 'Jeden pruh pro každý typ',
+  'reservations.timeline.context': 'Zobrazit druhou kartu',
+  'reservations.timeline.contextBookings': 'Rezervace',
+  'reservations.timeline.contextTransports': 'Doprava',
+  'reservations.timeline.noneDated': 'Zatím nic z toho nemá datum.',
+  'reservations.undated': 'Bez data',
+  'reservations.nights': 'Noci',
+  'reservations.start': 'Začátek',
+  'reservations.end': 'Konec',
+  'reservations.rename': 'Přejmenovat',
+  'reservations.copyCode': 'Kopírovat rezervační kód',
+  'reservations.copyFailed': 'Kopírování se nezdařilo',
+  'reservations.showInFiles': 'Zobrazit v souborech',
 };
 export default reservations;
diff --git a/shared/src/i18n/cs/transport.ts b/shared/src/i18n/cs/transport.ts
index 7b62ac095..25bc26d3d 100644
--- a/shared/src/i18n/cs/transport.ts
+++ b/shared/src/i18n/cs/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Upravit dopravu',
   'transport.title': 'Doprava',
   'transport.addManual': 'Doprava',
+  'transport.empty': 'Zatím žádná doprava',
 };
 export default transport;
diff --git a/shared/src/i18n/de/budget.ts b/shared/src/i18n/de/budget.ts
index 70f6de170..618853e61 100644
--- a/shared/src/i18n/de/budget.ts
+++ b/shared/src/i18n/de/budget.ts
@@ -142,6 +142,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'Gleichmäßig',
   'costs.splitCustom': 'Individuell',
   'costs.splitTicket': 'Beleg',
+  'costs.perPerson': '{amount} pro Person',
+  'costs.payersHint': 'Hak an, wer bezahlt hat, und trag ein, wie viel jede Person gezahlt hat.',
+  'costs.splitHint.equally': 'Alle Angehakten zahlen den gleichen Anteil.',
+  'costs.splitHint.custom': 'Trag für jede Person ihren Anteil ein; zusammen ergeben sie den Betrag.',
+  'costs.splitHint.ticket': 'Liste auf, was auf dem Beleg steht, und hak ab, wer was hatte.',
   'costs.ticketItemName': 'Artikelname',
   'costs.ticketSplitting': 'Aufteilen auf:',
   'costs.ticketAddItem': 'Artikel hinzufügen',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Belege',
   'costs.receiptsTitle': 'Belege & Rechnungen',
   'costs.attachReceipt': 'Beleg / Rechnung anhängen',
+  'costs.attach': 'Anhängen',
   'costs.scan.button': 'Beleg scannen',
   'costs.scan.reading': 'Beleg wird gelesen…',
   'costs.scan.review': 'Ausgabe prüfen',
   'costs.scan.nothingRead': 'Aus diesem Foto ließ sich kein Beleg lesen.',
   'costs.scan.failed': 'Der Beleg konnte nicht eingelesen werden.',
   'costs.scan.title': 'Beleg scannen',
-  'costs.scan.accepted': 'Ein Foto eines Belegs (JPG, PNG oder WEBP, bis 10 MB). Das KI-Modell liest es im Hintergrund, danach prüfst du die Ausgabe, bevor sie gespeichert wird.',
+  'costs.scan.accepted':
+    'Ein Foto eines Belegs (JPG, PNG oder WEBP, bis 10 MB). Das KI-Modell liest es im Hintergrund, danach prüfst du die Ausgabe, bevor sie gespeichert wird.',
   'costs.scan.dropHere': 'Belegfoto hier ablegen oder klicken, um eins auszuwählen oder aufzunehmen',
   'costs.scan.dropActive': 'Foto ablegen, um es zu scannen',
   'costs.scan.start': 'Scannen',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Keine Belege angehängt',
   'costs.deleteReceipt': 'Beleg entfernen',
   'costs.viewReceipt': 'Beleg ansehen',
-  'costs.receiptLeftBehind': 'Speichern fehlgeschlagen, {count} hochgeladene Belege liegen noch da. Im Dateien-Tab entfernen.',
+  'costs.receiptLeftBehind':
+    'Speichern fehlgeschlagen, {count} hochgeladene Belege liegen noch da. Im Dateien-Tab entfernen.',
 };
 export default budget;
diff --git a/shared/src/i18n/de/help.ts b/shared/src/i18n/de/help.ts
index e139a9b56..70e2a5a1f 100644
--- a/shared/src/i18n/de/help.ts
+++ b/shared/src/i18n/de/help.ts
@@ -2331,9 +2331,9 @@ const help: TranslationStrings = {
     'Öffne den Stopp, zu dem die Buchung gehört. Die Ortsdetails zeigen einen Streifen mit Bestätigt oder Ausstehend und dem Namen der Buchung.',
   'help.guide.place-booking.step.2':
     'Der Streifen trägt Datum, Uhrzeit und Buchungscode, dazu alle Notizen, die die Buchung hat.',
-  'help.guide.place-booking.step.3': 'Klick auf den Streifen. Das Formular der Buchung öffnet sich darauf.',
+  'help.guide.place-booking.step.3': 'Klick auf den Streifen. Die Buchung öffnet sich über der Karte.',
   'help.guide.place-booking.step.4':
-    'Mit Tagesplanung verknüpfen ist das, was eine Buchung an einen Stopp hängt, und hier nennt es schon diesen. Schließ das Formular wieder.',
+    'Bearbeiten am Fuß der Buchung öffnet ihr eigenes Formular. Mit Tagesplanung verknüpfen ist dort das, was eine Buchung an einen Stopp hängt, und hier nennt es schon diesen. Schließ das Formular wieder.',
   'help.guide.place-booking.step.5':
     'Eine neue Buchung für einen Stopp beginnt in der Tage-Spalte: Fahr über den Stopp und klick auf das + an seinem Ende. Das Formular öffnet sich als Neue Buchung, schon mit ihm verknüpft.',
   'help.guide.place-booking.result':
@@ -2701,7 +2701,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Die Farbe sagt, wo eine Buchung steht: eine grüne Zeile ist bestätigt, eine bernsteinfarbene noch ausstehend. Unterkünfte stehen nicht in dieser Liste, sie haben ihren eigenen Block darunter.',
   'help.guide.day-bookings.step.4':
-    'Die Liste gibt die Buchungen nur wieder. Angelegt und geändert wird eine Buchung unter Buchungen.',
+    'Klick eine Zeile an, und die Buchung öffnet sich. Bearbeiten an ihrem Fuß ändert sie; neue Buchungen legst du unter Buchungen an.',
   'help.guide.day-bookings.result':
     'Alles, was auf den Tag datiert ist, und alles, was an einem seiner Stopps hängt, steht in dieser einen Liste.',
   'help.guide.day-bookings.tip.1':
@@ -3254,13 +3254,13 @@ const help: TranslationStrings = {
     'Trag ein Restaurant, eine Veranstaltung, eine Tour, einen Parkplatz oder sonst etwas von Hand in die Reise ein.',
   'help.guide.create-booking.step.1': 'Klick oben rechts im Tab auf Manuelle Buchung. Neue Buchung öffnet sich.',
   'help.guide.create-booking.step.2':
-    'Wähl die Art der Buchung aus der Liste oben im Formular, neben Reisende. Unterkunft, Restaurant, Veranstaltung, Tour, Parkplatz und Sonstiges sind die sechs, die dieser Tab anlegt, und das Formular ändert sich mit der Wahl: nur Unterkunft tauscht ihre Daten gegen eine Spanne von Tagen.',
+    'Klick auf die Pille für die Art unter dem Titel, im Kopf des Formulars, und wähl die Art der Buchung. Unterkunft, Restaurant, Veranstaltung, Tour, Parkplatz und Sonstiges sind die sechs, die dieser Tab anlegt, und das Formular ändert sich mit der Wahl: nur Unterkunft tauscht ihre Daten gegen eine Spanne von Tagen.',
   'help.guide.create-booking.step.3':
     'Tipp den Titel ein. Es ist das eine Feld, auf dem das Formular besteht, und Hinzufügen bleibt tot, bis dort etwas steht.',
   'help.guide.create-booking.step.4':
     'Setz Datum und Startzeit, und Enddatum und Endzeit, wenn die Buchung ein Ende hat. Die Kalender bieten nur Tage innerhalb der Reise an, und ein Ende, das nicht nach dem Start liegt, sagt das in Rot und sperrt Hinzufügen.',
   'help.guide.create-booking.step.5':
-    'Trag den Buchungscode aus der Bestätigung ein und setz Status. Ausstehend oder Bestätigt entscheidet, in welchem der beiden Abschnitte die Karte landet.',
+    'Trag den Buchungscode aus der Bestätigung ein. Die Status-Pille neben der Art zeigt Ausstehend; ein Klick stellt sie auf Bestätigt und wieder zurück, und das entscheidet, in welchem der beiden Abschnitte die Karte landet.',
   'help.guide.create-booking.step.6': 'Klick auf Hinzufügen.',
   'help.guide.create-booking.result':
     'Die Buchung ist eine Karte in ihrem Abschnitt, mit ihrem Chip für die Art, ihren Daten und ihrem Code, und alle anderen in der Reise sehen sie auftauchen.',
@@ -3311,7 +3311,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Sagen, für wen eine Buchung ist',
   'help.guide.booking-travelers.goal': 'Markier die Reisenden, die eine Buchung abdeckt, und sieh dann nur ihre.',
   'help.guide.booking-travelers.step.1':
-    'Öffne die Buchung mit dem Stift. Reisende steht oben im Formular, neben Art der Buchung, und zeigt Reisende zuweisen, solange niemand auf der Buchung ist.',
+    'Öffne die Buchung mit dem Stift. Reisende steht neben dem Buchungscode und zeigt Reisende zuweisen, solange niemand auf der Buchung ist.',
   'help.guide.booking-travelers.step.2':
     'Klick darauf und wähl die Personen, für die diese Buchung ist; benannte Gäste stehen auch in der Liste. Eine gewählte bekommt einen Haken und ihren Avatar im Feld. Klick den Namen noch einmal an, um sie wieder wegzunehmen.',
   'help.guide.booking-travelers.step.3': 'Klick auf Aktualisieren.',
@@ -3409,7 +3409,7 @@ const help: TranslationStrings = {
     'Klick auf den Stift im Kopf der Karte. Reservierung bearbeiten öffnet sich mit allem, was die Buchung weiß.',
   'help.guide.edit-booking.step.2':
     'Änder, was zu ändern ist, hier den Buchungscode, den der Anbieter endlich geschickt hat.',
-  'help.guide.edit-booking.step.3': 'Setz Status auf Bestätigt.',
+  'help.guide.edit-booking.step.3': 'Klick im Kopf des Formulars auf die Pille Ausstehend. Sie wechselt auf Bestätigt.',
   'help.guide.edit-booking.step.4': 'Klick auf Aktualisieren.',
   'help.guide.edit-booking.result':
     'Die Karte wandert: eine bestätigte Buchung steht im Abschnitt Bestätigt hinter einem grünen Punkt, und alle in der Reise sehen sie wandern.',
@@ -3704,19 +3704,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Die Verbindung Halt für Halt lesen, sie umbenennen, oder die Route neu heraussuchen lassen.',
   'help.guide.change-transit-route.step.1':
-    'Im Tab Transport sitzen die geplanten Verbindungen unter Automatische ÖPNV-Verbindungen. Klick die Karte an.',
+    'Im Tab Transport sitzen die geplanten Verbindungen unter Automatische ÖPNV-Verbindungen. Klick die Karte an; die Verbindung öffnet sich als Buchung.',
   'help.guide.change-transit-route.step.2':
     'Dauer, Umstiege und Fußweg stehen oben. Verbindung darunter geht die Fahrt Halt für Halt durch, mit den Gleisen und den Fußwegen zwischen den Linien.',
   'help.guide.change-transit-route.step.3':
-    'Route ändern startet die Suche noch einmal, schon gefüllt mit den beiden Enden dieser Verbindung und ihrem Tag.',
+    'Route ändern am Fuß der Buchung startet die Suche noch einmal, schon gefüllt mit den beiden Enden dieser Verbindung und ihrem Tag.',
   'help.guide.change-transit-route.step.4':
-    'Wähl eine andere Verbindung und klick auf Zum Tag hinzufügen; sie tritt an die Stelle der alten. Details bearbeiten, neben Route ändern, öffnet stattdessen das gewöhnliche Transport-Formular, in dem der Buchungscode, der Status, die Reisenden und die Dateien liegen.',
+    'Wähl eine andere Verbindung und klick auf Zum Tag hinzufügen; sie tritt an die Stelle der alten. Bearbeiten, am anderen Ende derselben Leiste, öffnet stattdessen das gewöhnliche Transport-Formular, in dem der Buchungscode, der Status, die Reisenden, die Notizen und die Dateien liegen.',
   'help.guide.change-transit-route.result':
     'Die Fahrt trägt die neue Verbindung, und ihre Karte im Tab Transport zeigt die neuen Linien und Zeiten.',
   'help.guide.change-transit-route.tip.1':
-    'Der Titel der Fahrt ist nur Text: der Stift daneben benennt sie um, ohne die Route anzurühren. Notizen darunter nehmen Markdown und haben einen Tab Bearbeiten und einen Tab Vorschau.',
+    'Der Titel im Kopf der Buchung benennt die Verbindung um, ohne die Route anzurühren. Ihre Notizen schreibst du im Transport-Formular hinter Bearbeiten.',
   'help.guide.change-transit-route.tip.2':
-    'Löschen am Fuß der Fahrt nimmt die Verbindung aus der Reise; der Tag behält seine Stopps.',
+    'Löschen am Fuß der Buchung nimmt die Verbindung aus der Reise; der Tag behält seine Stopps.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Ändern, wie eine Etappe zurückgelegt wird',
   'help.guide.leg-travel-mode.goal':
@@ -3742,17 +3742,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Eine Zeit, ein Gleis oder einen Buchungscode richten, oder die Fahrt aus der Reise nehmen.',
   'help.guide.edit-transport.step.1':
-    'Im Tagesplan ist ein Transport eine farbige Zeile zwischen den Stopps. Klick sie an.',
+    'Im Tagesplan ist ein Transport eine farbige Zeile zwischen den Stopps. Klick sie an; seine Buchung öffnet sich mit den Zeiten, der Route und dem Buchungscode.',
   'help.guide.edit-transport.step.2':
-    'Das Formular ist dasselbe, das ihn angelegt hat, mit Transport bearbeiten in der Titelzeile. Alles lässt sich ändern: der Typ, die Route, die Tage und Zeiten, der Buchungscode, der Status.',
+    'Bearbeiten am Fuß der Buchung öffnet das Formular, das ihn angelegt hat, mit Transport bearbeiten in der Titelzeile. Alles lässt sich ändern: der Typ, die Route, die Tage und Zeiten, der Buchungscode, der Status.',
   'help.guide.edit-transport.step.3':
     'Die Route eines Fluges ist eine Kette von Flughäfen, die eines Zuges eine Kette von Bahnhöfen. Zwischenstopp hinzufügen setzt einen weiteren dazwischen, und jede Etappe behält ihre eigenen Zeiten und ihre eigene Flug- oder Zugnummer.',
   'help.guide.edit-transport.step.4':
-    'Klick auf Aktualisieren. Um den Transport ganz zu entfernen, nimm den Papierkorb auf seiner Karte im Tab Transport und bestätige.',
+    'Klick auf Aktualisieren. Um den Transport ganz zu entfernen, nimm Löschen am Fuß seiner Buchung oder den Papierkorb auf seiner Karte im Tab Transport und bestätige.',
   'help.guide.edit-transport.result':
     'Die Änderung zeigt sich überall, wo der Transport auftaucht: im Tab Transport, an dem Tag, an dem er läuft, und in seiner Linie auf der Karte.',
   'help.guide.edit-transport.tip.1':
-    'Dasselbe Formular öffnet sich von beiden Seiten, über den Stift auf der Karte im Tab Transport und über die eigene Zeile des Transports im Tagesplan. Eine geplante ÖPNV-Verbindung ist die Ausnahme: ihre Zeile öffnet die Fahrtansicht, und Details bearbeiten führt von dort zu diesem Formular.',
+    'Dasselbe Formular öffnet sich von beiden Seiten: über Bearbeiten in der Buchung, die eine Zeile im Tagesplan öffnet, und über den Stift auf der Karte im Tab Transport. Eine geplante ÖPNV-Verbindung öffnet sich ebenfalls als Buchung; Route ändern sucht dort neu, und Bearbeiten führt zu diesem Formular.',
   'help.guide.edit-transport.tip.2':
     'Einen Transport auf einen anderen Tag zu verschieben braucht das Formular gar nicht: zieh seine Zeile von einer Tageskarte auf die nächste.',
   // transport-on-map
diff --git a/shared/src/i18n/de/places.ts b/shared/src/i18n/de/places.ts
index 5b166cb25..31bd99316 100644
--- a/shared/src/i18n/de/places.ts
+++ b/shared/src/i18n/de/places.ts
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Ganze Reise anzeigen',
   'places.filterTracks': 'Tracks',
   'places.filterByRating': 'Nach Bewertung filtern',
+  'places.filterShow': 'Anzeigen',
+  'places.clearSearch': 'Suche leeren',
   'places.yourRating': 'Deine Bewertung',
   'places.notRated': 'Noch nicht bewertet',
   'places.search': 'Orte suchen...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Straße, Stadt, Land',
   'places.formLat': 'Breitengrad (z.B. 48.8566)',
   'places.formLng': 'Längengrad (z.B. 2.3522)',
+  'places.formLatLabel': 'Breitengrad',
+  'places.formLngLabel': 'Längengrad',
   'places.formCategory': 'Kategorie',
   'places.noCategory': 'Keine Kategorie',
   'places.newCategory': 'Neue Kategorie',
diff --git a/shared/src/i18n/de/reservations.ts b/shared/src/i18n/de/reservations.ts
index d2cfd5cdf..db1ec40f0 100644
--- a/shared/src/i18n/de/reservations.ts
+++ b/shared/src/i18n/de/reservations.ts
@@ -67,6 +67,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Fahrrad',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'ÖPNV',
+  'reservations.typeShort.transit': 'ÖPNV',
   'reservations.type.transport_other': 'Sonstiges',
   'reservations.confirm.delete': 'Möchtest du die Reservierung "{name}" wirklich löschen?',
   'reservations.confirm.deleteTitle': 'Buchung löschen?',
@@ -86,6 +87,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Ort / Adresse',
   'reservations.locationPlaceholder': 'Adresse, Flughafen, Hotel...',
   'reservations.confirmationCode': 'Buchungscode',
+  'reservations.routeLabel': 'Strecke',
+  'reservations.segmentCodes': 'Codes pro Abschnitt',
   'reservations.confirmationPlaceholder': 'z.B. ABC12345',
   'reservations.day': 'Tag',
   'reservations.noDay': 'Kein Tag',
@@ -96,6 +99,7 @@ const reservations: TranslationStrings = {
   'reservations.attachFile': 'Datei anhängen',
   'reservations.linkExisting': 'Vorhandene verknüpfen',
   'reservations.linkAssignment': 'Mit Tagesplanung verknüpfen',
+  'reservations.linkedTo': 'Verknüpft mit',
   'reservations.pickAssignment': 'Zuordnung aus dem Plan wählen...',
   'reservations.noAssignment': 'Keine Verknüpfung',
   'reservations.price': 'Preis',
@@ -137,9 +141,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} Reservierung(en) gefunden',
   'reservations.import.previewEmpty': 'Aus den hochgeladenen Dateien konnten keine Reservierungen extrahiert werden.',
   'reservations.import.removeItem': 'Entfernen',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Prüfen',
+  'reservations.import.tryAi': 'Mit KI auslesen',
+  'reservations.import.aiParsing': 'Wird mit KI ausgelesen…',
   'reservations.import.confirm': '{count} Reservierung(en) importieren',
   'reservations.import.back': 'Zurück',
   'reservations.import.success': '{count} Reservierung(en) importiert',
@@ -199,6 +203,7 @@ const reservations: TranslationStrings = {
   'reservations.group.day': 'Tag',
   'reservations.group.type': 'Typ',
   'reservations.group.none': 'Nicht gruppieren',
+  'reservations.transitApart': 'ÖPNV als eigener Abschnitt',
   'reservations.group.before': 'Vor der Reise',
   'reservations.group.after': 'Nach der Reise',
   'reservations.group.undated': 'Ohne Datum',
@@ -223,7 +228,7 @@ const reservations: TranslationStrings = {
   'reservations.timeline.now': 'jetzt',
   'reservations.timeline.byType': 'Eine Spur pro Typ',
   'reservations.timeline.context': 'Anderen Tab einblenden',
-  'reservations.timeline.contextStays': 'Unterkünfte',
+  'reservations.timeline.contextBookings': 'Buchungen',
   'reservations.timeline.contextTransports': 'Transporte',
   'reservations.timeline.noneDated': 'Hier hat noch nichts ein Datum.',
   'reservations.undated': 'Ohne Datum',
diff --git a/shared/src/i18n/en/budget.ts b/shared/src/i18n/en/budget.ts
index 8d2ac6c18..f29c6bebe 100644
--- a/shared/src/i18n/en/budget.ts
+++ b/shared/src/i18n/en/budget.ts
@@ -115,6 +115,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'Equally',
   'costs.splitCustom': 'Custom',
   'costs.splitTicket': 'Ticket',
+  'costs.perPerson': '{amount} per person',
+  'costs.payersHint': 'Tick who paid and type how much each of them put in.',
+  'costs.splitHint.equally': 'Everyone ticked pays the same share.',
+  'costs.splitHint.custom': "Type each person's share; together they have to make the total.",
+  'costs.splitHint.ticket': 'List what was on the receipt and tick who had each item.',
   'costs.pickSomeone': 'Pick at least one person to split with.',
   'costs.splitSummary': 'Split {count} ways · {amount} each',
   'costs.cat.accommodation': 'Accommodation',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Receipts',
   'costs.receiptsTitle': 'Receipts & Invoices',
   'costs.attachReceipt': 'Attach receipt / invoice',
+  'costs.attach': 'Attach',
   'costs.scan.button': 'Scan receipt',
   'costs.scan.reading': 'Reading the receipt…',
   'costs.scan.review': 'Review expense',
   'costs.scan.nothingRead': 'No receipt could be read from this photo.',
   'costs.scan.failed': 'Could not start reading the receipt.',
   'costs.scan.title': 'Scan a receipt',
-  'costs.scan.accepted': 'A photo of one receipt (JPG, PNG or WEBP, up to 10 MB). The AI model reads it in the background, then you check the expense before it is saved.',
+  'costs.scan.accepted':
+    'A photo of one receipt (JPG, PNG or WEBP, up to 10 MB). The AI model reads it in the background, then you check the expense before it is saved.',
   'costs.scan.dropHere': 'Drop the receipt photo here, or click to pick or take one',
   'costs.scan.dropActive': 'Drop the photo to scan it',
   'costs.scan.start': 'Scan',
@@ -168,7 +175,8 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'No receipts attached',
   'costs.deleteReceipt': 'Remove receipt',
   'costs.viewReceipt': 'View receipt',
-  'costs.receiptLeftBehind': 'Save failed, and {count} uploaded receipts are still there. Remove them in the Files tab.',
+  'costs.receiptLeftBehind':
+    'Save failed, and {count} uploaded receipts are still there. Remove them in the Files tab.',
 };
 
 export default budget;
diff --git a/shared/src/i18n/en/help.ts b/shared/src/i18n/en/help.ts
index f3d290db2..0262af569 100644
--- a/shared/src/i18n/en/help.ts
+++ b/shared/src/i18n/en/help.ts
@@ -2204,9 +2204,9 @@ const help: TranslationStrings = {
     'Open the stop the booking belongs to. The card shows a strip with Confirmed or Pending and the booking’s name.',
   'help.guide.place-booking.step.2':
     'The strip carries the Date, the Time and the Booking Code, and whatever notes the booking has.',
-  'help.guide.place-booking.step.3': 'Click the strip. The booking’s own form opens on it.',
+  'help.guide.place-booking.step.3': 'Click the strip. The booking opens over the map.',
   'help.guide.place-booking.step.4':
-    'Link to day assignment is what pins a booking to a stop, and here it already names this one. Close the form again.',
+    'Edit at the foot of the booking opens its own form. Link to day assignment there is what pins a booking to a stop, and here it already names this one. Close the form again.',
   'help.guide.place-booking.step.5':
     'A new booking for a stop starts in the days column: hover the stop and click the + at its end. The form opens as New Reservation, already linked to it.',
   'help.guide.place-booking.result':
@@ -2405,7 +2405,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'The colour says where a booking stands: a green row is confirmed, an amber one is still pending. Hotels are not in this list, they have their own block below.',
   'help.guide.day-bookings.step.4':
-    'The list only reads the bookings out. A booking is created and changed under Bookings.',
+    'Click a row and the booking opens. Edit at its foot changes it; new bookings are created under Bookings.',
   'help.guide.day-bookings.result':
     'Everything dated on the day, and everything hanging off one of its stops, is in this one list.',
   'help.guide.day-bookings.tip.1':
@@ -2686,19 +2686,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': 'Open and change a planned connection',
   'help.guide.change-transit-route.goal': 'Read the connection stop by stop, rename it, or look the route up again.',
   'help.guide.change-transit-route.step.1':
-    'In the Transports tab the planned connections sit under Automated public transit. Click the card.',
+    'In the Transports tab the planned connections sit under Automated public transit. Click the card; the connection opens as a booking.',
   'help.guide.change-transit-route.step.2':
     'Duration, Transfers and Walking sit at the top. Itinerary below them walks the connection stop by stop, with the platforms and the walks between the lines.',
   'help.guide.change-transit-route.step.3':
-    'Change route runs the search again, already filled with this connection’s two ends and its day.',
+    'Change route at the foot of the booking runs the search again, already filled with this connection’s two ends and its day.',
   'help.guide.change-transit-route.step.4':
-    'Pick another connection and click Add to day; it takes the old one’s place. Edit details, next to Change route, opens the ordinary transport form instead, where the Booking Code, the Status, the travelers and the files live.',
+    'Pick another connection and click Add to day; it takes the old one’s place. Edit, at the other end of the same bar, opens the ordinary transport form instead, where the Booking Code, the Status, the travelers, the notes and the files live.',
   'help.guide.change-transit-route.result':
     'The journey carries the new itinerary, and its card in the Transports tab shows the new lines and times.',
   'help.guide.change-transit-route.tip.1':
-    'The journey’s title is only text: the pencil next to it renames it without touching the route. Notes underneath take markdown and have an Edit and a Preview tab.',
+    'The title in the head of the booking renames the connection without touching the route. Its notes are written in the transport form behind Edit.',
   'help.guide.change-transit-route.tip.2':
-    'Delete at the foot of the journey takes the connection out of the trip; the day keeps its stops.',
+    'Delete at the foot of the booking takes the connection out of the trip; the day keeps its stops.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Change how one leg is travelled',
   'help.guide.leg-travel-mode.goal':
@@ -2721,17 +2721,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Change or delete a transport',
   'help.guide.edit-transport.goal': 'Fix a time, a platform or a booking code, or take the ride out of the trip.',
-  'help.guide.edit-transport.step.1': 'In the day plan a transport is a coloured row between the stops. Click it.',
+  'help.guide.edit-transport.step.1':
+    'In the day plan a transport is a coloured row between the stops. Click it; its booking opens with the times, the route and the Booking Code.',
   'help.guide.edit-transport.step.2':
-    'The form is the one that created it, with Edit transport in its title bar. Everything can be changed: the type, the route, the days and times, the Booking Code, the Status.',
+    'Edit at the foot of the booking opens the form that created it, with Edit transport in its title bar. Everything can be changed: the type, the route, the days and times, the Booking Code, the Status.',
   'help.guide.edit-transport.step.3':
     'A flight’s route is a chain of airports, a train’s a chain of stations. Add stop puts another one in between, and every leg keeps its own times and its own flight or train number.',
   'help.guide.edit-transport.step.4':
-    'Click Update. To remove the transport altogether, use the bin on its card in the Transports tab and confirm.',
+    'Click Update. To remove the transport altogether, use Delete at the foot of its booking, or the bin on its card in the Transports tab, and confirm.',
   'help.guide.edit-transport.result':
     'The change shows everywhere the transport appears: the Transports tab, the day it runs on, and its line on the map.',
   'help.guide.edit-transport.tip.1':
-    'The same form opens from both sides, the pencil on the card in the Transports tab and the transport’s own row in the day plan. A planned public-transit connection is the exception: its row opens the journey view, and Edit details there leads to this form.',
+    'The same form opens from both sides: through Edit in the booking a row of the day plan opens, and through the pencil on the card in the Transports tab. A planned public-transit connection opens as a booking too; Change route there searches again, and Edit leads to this form.',
   'help.guide.edit-transport.tip.2':
     'Moving a transport to another day does not need the form at all: drag its row from one day card to the next.',
   // transport-on-map
@@ -2802,13 +2803,13 @@ const help: TranslationStrings = {
     'Put a restaurant, an event, a tour, a parking space or anything else into the trip by hand.',
   'help.guide.create-booking.step.1': 'Click Manual Booking at the top right of the tab. New Reservation opens.',
   'help.guide.create-booking.step.2':
-    'Pick the Booking Type from the list at the top of the form, next to Travelers. Accommodation, Restaurant, Event, Tour, Parking and Other are the six this tab makes, and the form changes with the choice: only Accommodation trades its dates for a range of days.',
+    'Click the type pill under the title, in the head of the form, and pick the Booking Type. Accommodation, Restaurant, Event, Tour, Parking and Other are the six this tab makes, and the form changes with the choice: only Accommodation trades its dates for a range of days.',
   'help.guide.create-booking.step.3':
     'Type the Title. It is the one field the form insists on, and Add stays dead until it has something.',
   'help.guide.create-booking.step.4':
     'Set Date and Start time, and End date and End time if the booking has an end. The calendars only offer days inside the trip, and an end that is not after the start says so in red and blocks Add.',
   'help.guide.create-booking.step.5':
-    'Put in the Booking Code from the confirmation and set Status. Pending or Confirmed decides which of the two sections the card lands in.',
+    'Put in the Booking Code from the confirmation. The status pill beside the type reads Pending; a click turns it to Confirmed and back, and that decides which of the two sections the card lands in.',
   'help.guide.create-booking.step.6': 'Click Add.',
   'help.guide.create-booking.result':
     'The booking is a card in its section with its type chip, its dates and its code, and everyone else in the trip sees it appear.',
@@ -2857,7 +2858,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Say who a booking is for',
   'help.guide.booking-travelers.goal': 'Mark the travellers a booking covers, and then see only theirs.',
   'help.guide.booking-travelers.step.1':
-    'Open the booking with the pencil. Travelers sits at the top of the form, next to Booking Type, and reads Assign travelers while nobody is on the booking.',
+    'Open the booking with the pencil. Travelers sits next to the Booking Code, and reads Assign travelers while nobody is on the booking.',
   'help.guide.booking-travelers.step.2':
     'Click it and pick the people this booking is for; named guests are in the list too. A chosen one gets a tick and their avatar in the field. Click the name again to take it off.',
   'help.guide.booking-travelers.step.3': 'Click Update.',
@@ -2950,7 +2951,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.step.1':
     'Click the pencil in the card’s header. Edit Reservation opens with everything the booking knows.',
   'help.guide.edit-booking.step.2': 'Change what needs changing, here the Booking Code the operator finally sent.',
-  'help.guide.edit-booking.step.3': 'Put Status on Confirmed.',
+  'help.guide.edit-booking.step.3': 'Click the Pending pill in the head of the form. It turns to Confirmed.',
   'help.guide.edit-booking.step.4': 'Click Update.',
   'help.guide.edit-booking.result':
     'The card moves: a confirmed booking stands in the Confirmed section behind a green dot, and everyone in the trip sees it move.',
diff --git a/shared/src/i18n/en/places.ts b/shared/src/i18n/en/places.ts
index 9cf880926..af0ad920d 100644
--- a/shared/src/i18n/en/places.ts
+++ b/shared/src/i18n/en/places.ts
@@ -53,6 +53,10 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Show the whole trip',
   'places.filterTracks': 'Tracks',
   'places.filterByRating': 'Filter by rating',
+  /** The button that opens the filter panel, and the panel's name. */
+  /** Label over the all/unplanned/planned/tracks choice in the filter panel. */
+  'places.filterShow': 'Show',
+  'places.clearSearch': 'Clear search',
   'places.yourRating': 'Your rating',
   'places.notRated': 'Not rated yet',
   'places.search': 'Search places...',
@@ -72,6 +76,9 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Street, City, Country',
   'places.formLat': 'Latitude (e.g. 48.8566)',
   'places.formLng': 'Longitude (e.g. 2.3522)',
+  /** The small labels over the two coordinate fields of the desktop place dialog. */
+  'places.formLatLabel': 'Latitude',
+  'places.formLngLabel': 'Longitude',
   'places.formCategory': 'Category',
   'places.noCategory': 'No Category',
   'places.newCategory': 'New category',
diff --git a/shared/src/i18n/en/reservations.ts b/shared/src/i18n/en/reservations.ts
index 75116a6ff..e555a60be 100644
--- a/shared/src/i18n/en/reservations.ts
+++ b/shared/src/i18n/en/reservations.ts
@@ -66,6 +66,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicycle',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Public transit',
+  'reservations.typeShort.transit': 'Transit',
   'reservations.type.transport_other': 'Other',
   'reservations.confirm.delete': 'Are you sure you want to delete the reservation "{name}"?',
   'reservations.confirm.deleteTitle': 'Delete booking?',
@@ -81,6 +82,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Location / Address',
   'reservations.locationPlaceholder': 'Address, Airport, Hotel...',
   'reservations.confirmationCode': 'Booking Code',
+  'reservations.routeLabel': 'Route',
+  'reservations.segmentCodes': 'Segment codes',
   'reservations.confirmationPlaceholder': 'e.g. ABC12345',
   'reservations.day': 'Day',
   'reservations.noDay': 'No Day',
@@ -95,6 +98,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Failed to delete',
   'reservations.confirm.remove': 'Remove reservation for "{name}"?',
   'reservations.linkAssignment': 'Link to day assignment',
+  'reservations.linkedTo': 'Linked to',
   'reservations.pickAssignment': 'Select an assignment from your plan...',
   'reservations.noAssignment': 'No link (standalone)',
   'reservations.price': 'Price',
@@ -198,6 +202,7 @@ const reservations: TranslationStrings = {
   'reservations.group.day': 'Day',
   'reservations.group.type': 'Type',
   'reservations.group.none': 'No grouping',
+  'reservations.transitApart': 'Public transit as its own section',
   'reservations.group.before': 'Before the trip',
   'reservations.group.after': 'After the trip',
   'reservations.group.undated': 'No date',
@@ -222,7 +227,7 @@ const reservations: TranslationStrings = {
   'reservations.timeline.now': 'now',
   'reservations.timeline.byType': 'One lane per type',
   'reservations.timeline.context': 'Show the other tab',
-  'reservations.timeline.contextStays': 'Stays',
+  'reservations.timeline.contextBookings': 'Bookings',
   'reservations.timeline.contextTransports': 'Transports',
   'reservations.timeline.noneDated': 'None of these has a date yet.',
   'reservations.undated': 'No date',
diff --git a/shared/src/i18n/es/budget.ts b/shared/src/i18n/es/budget.ts
index 50b46efd7..bae883d9a 100644
--- a/shared/src/i18n/es/budget.ts
+++ b/shared/src/i18n/es/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Solo en el total — aún sin saldar',
   'costs.tapToInclude': 'Toca para incluir',
   'costs.amount': 'Importe',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Dividir',
+  'costs.splitEqually': 'A partes iguales',
+  'costs.splitCustom': 'Personalizado',
+  'costs.splitTicket': 'Recibo',
+  'costs.perPerson': '{amount} por persona',
+  'costs.payersHint': 'Marca quién pagó y escribe cuánto puso cada uno.',
+  'costs.splitHint.equally': 'Todos los marcados pagan la misma parte.',
+  'costs.splitHint.custom': 'Escribe la parte de cada persona; entre todas tienen que sumar el total.',
+  'costs.splitHint.ticket': 'Enumera lo que había en el recibo y marca quién tomó cada artículo.',
   'costs.filter.allCategories': 'Todas las categorías',
   'costs.filter.allDays': 'Todos los días',
   'costs.expensesCount': '{count} gastos',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Recibos',
   'costs.receiptsTitle': 'Recibos y facturas',
   'costs.attachReceipt': 'Adjuntar recibo / factura',
+  'costs.attach': 'Adjuntar',
   'costs.scan.button': 'Escanear recibo',
   'costs.scan.reading': 'Leyendo el recibo…',
   'costs.scan.review': 'Revisar el gasto',
   'costs.scan.nothingRead': 'No se pudo leer ningún recibo en esta foto.',
   'costs.scan.failed': 'No se pudo iniciar la lectura del recibo.',
   'costs.scan.title': 'Escanear recibo',
-  'costs.scan.accepted': 'Una foto de un solo recibo (JPG, PNG o WEBP, hasta 10 MB). El modelo de IA la lee en segundo plano y luego revisas el gasto antes de guardarlo.',
+  'costs.scan.accepted':
+    'Una foto de un solo recibo (JPG, PNG o WEBP, hasta 10 MB). El modelo de IA la lee en segundo plano y luego revisas el gasto antes de guardarlo.',
   'costs.scan.dropHere': 'Suelta aquí la foto del recibo, o haz clic para elegir o hacer una',
   'costs.scan.dropActive': 'Suelta la foto para escanearla',
   'costs.scan.start': 'Escanear',
diff --git a/shared/src/i18n/es/dayplan.ts b/shared/src/i18n/es/dayplan.ts
index 5d61afd79..9ef0879ad 100644
--- a/shared/src/i18n/es/dayplan.ts
+++ b/shared/src/i18n/es/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Todos los lugares asignados',
   'dayplan.mobile.noMatch': 'Sin coincidencias',
   'dayplan.mobile.createNew': 'Crear nuevo lugar',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Desplegar todos los días', // en-fallback
+  'dayplan.collapseAll': 'Plegar todos los días', // en-fallback
   'dayplan.reorderDays': 'Reordenar días',
   'dayplan.reorderTitle': 'Reordenar días',
   'dayplan.reorderHint': 'Los lugares, las notas y las reservas de un día se mueven con él.',
diff --git a/shared/src/i18n/es/help.ts b/shared/src/i18n/es/help.ts
index 55921b868..caeccd4c2 100644
--- a/shared/src/i18n/es/help.ts
+++ b/shared/src/i18n/es/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'es' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Ayuda y documentación',
+  'help.search': 'Buscar en la documentación…',
+  'help.contents': 'Contenido',
+  'help.noResults': 'No hay páginas que coincidan.',
+  'help.errorTitle': 'No se pudo cargar esta página',
+  'help.errorBody': 'El contenido de la ayuda viene de la wiki de TREK. Comprueba tu conexión e inténtalo de nuevo.',
 
   // center
   'help.center.button': 'Ayuda para esta pantalla',
@@ -1049,7 +1049,7 @@ const help: TranslationStrings = {
     'Travel & map: rutas de reserva siempre en el mapa, la píldora Explorar lugares, optimización de la ruta desde tu alojamiento, códigos de reserva difuminados y rutas de reserva etiquetadas.',
   'help.ctx.settings-display.bullet.3':
     'Inicio: si TREK se abre en el panel o en el viaje activo, y qué pestaña de un viaje sale primero.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Apariencia',
   'help.ctx.settings-appearance.summary':
     'Cómo se ve TREK en esta cuenta: claro u oscuro, el color de acento, cristal y movimiento, tamaño del texto, y qué widgets muestra el panel. Todo se aplica en vivo, en cada dispositivo en el que inicies sesión.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2321,9 +2321,9 @@ const help: TranslationStrings = {
     'Abre la parada a la que pertenece la reserva. La ficha muestra una franja con Confirmada o Pendiente y el nombre de la reserva.',
   'help.guide.place-booking.step.2':
     'La franja lleva la Fecha, la Hora y el Código de reserva, y las notas que tenga la reserva.',
-  'help.guide.place-booking.step.3': 'Haz clic en la franja. Se abre encima el formulario de la reserva.',
+  'help.guide.place-booking.step.3': 'Haz clic en la franja. La reserva se abre encima del mapa.',
   'help.guide.place-booking.step.4':
-    'Vincular a una asignación del día es lo que engancha una reserva a una parada, y aquí ya nombra esta. Cierra el formulario otra vez.',
+    'Editar, al pie de la reserva, abre su propio formulario. Allí, Vincular a una asignación del día es lo que engancha una reserva a una parada, y aquí ya nombra esta. Cierra el formulario otra vez.',
   'help.guide.place-booking.step.5':
     'Una reserva nueva para una parada empieza en la columna de días: pasa el puntero por la parada y haz clic en el + de su extremo. El formulario se abre como Nueva reserva, ya vinculada a ella.',
   'help.guide.place-booking.result':
@@ -2685,7 +2685,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'El color dice cómo está una reserva: una fila verde está confirmada, una ámbar sigue pendiente. Los alojamientos no están en esta lista, tienen su propio bloque debajo.',
   'help.guide.day-bookings.step.4':
-    'La lista solo lee las reservas. Una reserva se crea y se cambia en la pestaña Reservas.',
+    'Haz clic en una fila y se abre la reserva. Editar, a su pie, la cambia; las reservas nuevas se crean en la pestaña Reservas.',
   'help.guide.day-bookings.result':
     'Todo lo fechado en el día, y todo lo que cuelga de alguna de sus paradas, está en esta única lista.',
   'help.guide.day-bookings.tip.1':
@@ -3236,13 +3236,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Haz clic en Reserva manual, arriba a la derecha de la pestaña. Se abre Nueva reserva.',
   'help.guide.create-booking.step.2':
-    'Elige el Tipo de reserva en la lista de arriba del formulario, junto a Viajeros. Alojamiento, Restaurante, Evento, Excursión, Aparcamiento y Otro son las seis que hace esta pestaña, y el formulario cambia con la elección: solo Alojamiento cambia sus fechas por un rango de días.',
+    'Haz clic en la píldora de tipo bajo el título, en la cabecera del formulario, y elige el Tipo de reserva. Alojamiento, Restaurante, Evento, Excursión, Aparcamiento y Otro son las seis que hace esta pestaña, y el formulario cambia con la elección: solo Alojamiento cambia sus fechas por un rango de días.',
   'help.guide.create-booking.step.3':
     'Escribe el Título. Es el único campo en el que el formulario insiste, y Añadir sigue muerto mientras esté vacío.',
   'help.guide.create-booking.step.4':
     'Pon Fecha y Hora de inicio, y Fecha fin y Hora de fin si la reserva tiene final. Los calendarios solo ofrecen días dentro del viaje, y un final que no es posterior al inicio lo dice en rojo y bloquea Añadir.',
   'help.guide.create-booking.step.5':
-    'Mete el Código de reserva de la confirmación y pon el Estado. Pendiente o Confirmada decide en cuál de las dos secciones aterriza la tarjeta.',
+    'Mete el Código de reserva de la confirmación. La píldora de estado, junto al tipo, pone Pendiente; un clic la pasa a Confirmada y de vuelta, y eso decide en cuál de las dos secciones aterriza la tarjeta.',
   'help.guide.create-booking.step.6': 'Haz clic en Añadir.',
   'help.guide.create-booking.result':
     'La reserva es una tarjeta en su sección, con su chip de clase, sus fechas y su código, y todos los demás del viaje la ven aparecer.',
@@ -3292,7 +3292,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Decir para quién es una reserva',
   'help.guide.booking-travelers.goal': 'Marca los viajeros que cubre una reserva y luego ve solo las suyas.',
   'help.guide.booking-travelers.step.1':
-    'Abre la reserva con el lápiz. Viajeros está arriba del formulario, junto a Tipo de reserva, y pone Asignar viajeros mientras no haya nadie en la reserva.',
+    'Abre la reserva con el lápiz. Viajeros está junto al Código de reserva, y pone Asignar viajeros mientras no haya nadie en la reserva.',
   'help.guide.booking-travelers.step.2':
     'Haz clic y elige las personas para las que es esta reserva; los invitados con nombre también están en la lista. Una elegida recibe una marca y su avatar en el campo. Vuelve a hacer clic en el nombre para quitarla.',
   'help.guide.booking-travelers.step.3': 'Haz clic en Actualizar.',
@@ -3388,7 +3388,8 @@ const help: TranslationStrings = {
     'Haz clic en el lápiz de la cabecera de la tarjeta. Editar reserva se abre con todo lo que la reserva sabe.',
   'help.guide.edit-booking.step.2':
     'Cambia lo que haya que cambiar, aquí el Código de reserva que el operador mandó por fin.',
-  'help.guide.edit-booking.step.3': 'Pon Estado en Confirmada.',
+  'help.guide.edit-booking.step.3':
+    'Haz clic en la píldora Pendiente de la cabecera del formulario. Pasa a Confirmada.',
   'help.guide.edit-booking.step.4': 'Haz clic en Actualizar.',
   'help.guide.edit-booking.result':
     'La tarjeta se muda: una reserva confirmada está en la sección Confirmada detrás de un punto verde, y todos en el viaje la ven mudarse.',
@@ -3682,19 +3683,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Leer la conexión parada a parada, cambiarle el nombre, o volver a buscar la ruta.',
   'help.guide.change-transit-route.step.1':
-    'En la pestaña Transportes, las conexiones planificadas están bajo Transporte público automático. Haz clic en la tarjeta.',
+    'En la pestaña Transportes, las conexiones planificadas están bajo Transporte público automático. Haz clic en la tarjeta; la conexión se abre como una reserva.',
   'help.guide.change-transit-route.step.2':
     'Duración, Transbordos y A pie están arriba. Itinerario, debajo, recorre la conexión parada a parada, con los andenes y los tramos a pie entre las líneas.',
   'help.guide.change-transit-route.step.3':
-    'Cambiar ruta lanza la búsqueda de nuevo, ya rellena con los dos extremos de esta conexión y con su día.',
+    'Cambiar ruta, al pie de la reserva, lanza la búsqueda de nuevo, ya rellena con los dos extremos de esta conexión y con su día.',
   'help.guide.change-transit-route.step.4':
-    'Elige otra conexión y haz clic en Añadir al día; ocupa el lugar de la anterior. Editar detalles, junto a Cambiar ruta, abre en cambio el formulario de transporte normal, donde viven el Código de reserva, el Estado, los viajeros y los archivos.',
+    'Elige otra conexión y haz clic en Añadir al día; ocupa el lugar de la anterior. Editar, en el otro extremo de la misma barra, abre en cambio el formulario de transporte normal, donde viven el Código de reserva, el Estado, los viajeros, las notas y los archivos.',
   'help.guide.change-transit-route.result':
     'El trayecto lleva el nuevo itinerario, y su tarjeta en la pestaña Transportes muestra las nuevas líneas y horas.',
   'help.guide.change-transit-route.tip.1':
-    'El título del trayecto es solo texto: el lápiz de al lado lo renombra sin tocar la ruta. Notas, debajo, acepta markdown y tiene una pestaña Editar y una Vista previa.',
+    'El título en la cabecera de la reserva renombra la conexión sin tocar la ruta. Sus notas se escriben en el formulario de transporte, detrás de Editar.',
   'help.guide.change-transit-route.tip.2':
-    'Eliminar, al pie del trayecto, saca la conexión del viaje; el día conserva sus paradas.',
+    'Eliminar, al pie de la reserva, saca la conexión del viaje; el día conserva sus paradas.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Cambiar cómo se recorre un tramo',
   'help.guide.leg-travel-mode.goal':
@@ -3720,17 +3721,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Corregir una hora, un andén o un código de reserva, o sacar el trayecto del viaje.',
   'help.guide.edit-transport.step.1':
-    'En el plan del día un transporte es una fila de color entre las paradas. Haz clic en ella.',
+    'En el plan del día un transporte es una fila de color entre las paradas. Haz clic en ella; se abre su reserva con las horas, la ruta y el Código de reserva.',
   'help.guide.edit-transport.step.2':
-    'El formulario es el que lo creó, con Editar transporte en su barra de título. Todo se puede cambiar: el tipo, la ruta, los días y las horas, el Código de reserva, el Estado.',
+    'Editar, al pie de la reserva, abre el formulario que lo creó, con Editar transporte en su barra de título. Todo se puede cambiar: el tipo, la ruta, los días y las horas, el Código de reserva, el Estado.',
   'help.guide.edit-transport.step.3':
     'La ruta de un vuelo es una cadena de aeropuertos, la de un tren una cadena de estaciones. Añadir escala pone otra en medio, y cada tramo conserva sus propias horas y su propio número de vuelo o de tren.',
   'help.guide.edit-transport.step.4':
-    'Haz clic en Actualizar. Para quitar el transporte del todo, usa la papelera de su tarjeta en la pestaña Transportes y confirma.',
+    'Haz clic en Actualizar. Para quitar el transporte del todo, usa Eliminar al pie de su reserva, o la papelera de su tarjeta en la pestaña Transportes, y confirma.',
   'help.guide.edit-transport.result':
     'El cambio se ve en todas partes donde aparece el transporte: la pestaña Transportes, el día en que va, y su línea en el mapa.',
   'help.guide.edit-transport.tip.1':
-    'El mismo formulario se abre por los dos lados, con el lápiz de la tarjeta en la pestaña Transportes y con la fila propia del transporte en el plan del día. Una conexión de transporte público planificada es la excepción: su fila abre la vista del trayecto, y Editar detalles lleva allí a este formulario.',
+    'El mismo formulario se abre por los dos lados: con Editar en la reserva que abre una fila del plan del día, y con el lápiz de la tarjeta en la pestaña Transportes. Una conexión de transporte público planificada también se abre como reserva; allí Cambiar ruta vuelve a buscar, y Editar lleva a este formulario.',
   'help.guide.edit-transport.tip.2':
     'Mover un transporte a otro día no necesita el formulario en absoluto: arrastra su fila de una tarjeta de día a la siguiente.',
   // transport-on-map
diff --git a/shared/src/i18n/es/places.ts b/shared/src/i18n/es/places.ts
index 7a9429d0b..2386e7fd6 100644
--- a/shared/src/i18n/es/places.ts
+++ b/shared/src/i18n/es/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Selecciona al menos un tipo.',
   'places.selectionCount': '{count} seleccionado(s)',
   'places.deleteSelected': 'Eliminar selección',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Cambiar categoría',
+  'places.categoryChanged': '{count} lugares actualizados',
   'places.kmlKmzImported': '{count} lugares importados desde KMZ/KML',
   'places.urlResolved': 'Lugar importado desde URL',
   'places.importList': 'Importar lista',
@@ -37,7 +37,8 @@ const places: TranslationStrings = {
   'places.importGoogleList': 'Lista Google',
   'places.importNaverList': 'Lista Naver',
   'places.googleListHint': 'Pega un enlace compartido de una lista de Google Maps para importar todos los lugares.',
-  'places.googleDirHint': 'Un enlace de indicaciones también sirve: sus paradas se convierten en lugares, en orden de conducción.',
+  'places.googleDirHint':
+    'Un enlace de indicaciones también sirve: sus paradas se convierten en lugares, en orden de conducción.',
   'places.googleListImported': '{count} lugares importados de "{list}"',
   'places.googleListError': 'Error al importar la lista de Google Maps',
   'places.naverListHint': 'Pega un enlace compartido de una lista de Naver Maps para importar todos los lugares.',
@@ -52,6 +53,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Mostrar todo el viaje',
   'places.filterTracks': 'Rutas',
   'places.filterByRating': 'Filtrar por valoración',
+  'places.filterShow': 'Mostrar',
+  'places.clearSearch': 'Borrar búsqueda',
   'places.yourRating': 'Tu valoración',
   'places.notRated': 'Sin valorar todavía',
   'places.search': 'Buscar lugares...',
@@ -71,6 +74,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Calle, ciudad, país',
   'places.formLat': 'Latitud (p. ej. 48.8566)',
   'places.formLng': 'Longitud (p. ej. 2.3522)',
+  'places.formLatLabel': 'Latitud',
+  'places.formLngLabel': 'Longitud',
   'places.formCategory': 'Categoría',
   'places.noCategory': 'Sin categoría',
   'places.newCategory': 'Nueva categoría',
diff --git a/shared/src/i18n/es/reservations.ts b/shared/src/i18n/es/reservations.ts
index e20672f5d..9a383fc44 100644
--- a/shared/src/i18n/es/reservations.ts
+++ b/shared/src/i18n/es/reservations.ts
@@ -37,6 +37,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicicleta',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Transporte público',
+  'reservations.typeShort.transit': 'T. público',
   'reservations.type.transport_other': 'Otro',
   'reservations.confirm.delete': '¿Seguro que quieres eliminar la reserva "{name}"?',
   'reservations.confirm.deleteTitle': '¿Eliminar reserva?',
@@ -52,6 +53,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Ubicación / dirección',
   'reservations.locationPlaceholder': 'Dirección, aeropuerto, hotel...',
   'reservations.confirmationCode': 'Código de reserva',
+  'reservations.routeLabel': 'Ruta',
+  'reservations.segmentCodes': 'Códigos por tramo',
   'reservations.confirmationPlaceholder': 'p. ej. ABC12345',
   'reservations.day': 'Día',
   'reservations.noDay': 'Sin día',
@@ -66,6 +69,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'No se pudo eliminar',
   'reservations.confirm.remove': '¿Eliminar la reserva de "{name}"?',
   'reservations.linkAssignment': 'Vincular a una asignación del día',
+  'reservations.linkedTo': 'Vinculado a',
   'reservations.pickAssignment': 'Selecciona una asignación de tu plan...',
   'reservations.noAssignment': 'Sin vínculo (independiente)',
   'reservations.price': 'Precio',
@@ -136,9 +140,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} reserva(s) encontrada(s)',
   'reservations.import.previewEmpty': 'No se pudieron extraer reservas de los archivos subidos.',
   'reservations.import.removeItem': 'Eliminar',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Revisar',
+  'reservations.import.tryAi': 'Probar lectura con IA',
+  'reservations.import.aiParsing': 'Leyendo con IA…',
   'reservations.import.confirm': 'Importar {count} reserva(s)',
   'reservations.import.back': 'Atrás',
   'reservations.import.success': '{count} reserva(s) importada(s)',
@@ -182,5 +186,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Viajeros',
   'reservations.travelers.assign': 'Asignar viajeros',
   'reservations.travelers.none': 'Aún no hay viajeros en el viaje.',
+  'reservations.status.switchTo': 'Cambiar a {status}',
+  'reservations.view.label': 'Vista',
+  'reservations.view.cards': 'Tarjetas',
+  'reservations.view.list': 'Lista',
+  'reservations.view.timeline': 'Cronología',
+  'reservations.filter': 'Filtrar',
+  'reservations.searchPlaceholder': 'Buscar',
+  'reservations.results': '{shown} de {total}',
+  'reservations.resetFilters': 'Restablecer filtros',
+  'reservations.noMatches': 'Nada coincide con estos filtros',
+  'reservations.viewOptions': 'Opciones de vista',
+  'reservations.resetView': 'Restablecer vista',
+  'reservations.group.label': 'Agrupar por',
+  'reservations.group.status': 'Estado',
+  'reservations.group.day': 'Día',
+  'reservations.group.type': 'Tipo',
+  'reservations.group.none': 'Sin agrupar',
+  'reservations.transitApart': 'Transporte público en su propia sección',
+  'reservations.group.before': 'Antes del viaje',
+  'reservations.group.after': 'Después del viaje',
+  'reservations.group.undated': 'Sin fecha',
+  'reservations.sort.label': 'Ordenar por',
+  'reservations.sort.date': 'Fecha',
+  'reservations.sort.title': 'Título',
+  'reservations.sort.type': 'Tipo',
+  'reservations.sort.status': 'Estado',
+  'reservations.sort.earlyFirst': 'Más tempranas primero',
+  'reservations.sort.lateFirst': 'Más tardías primero',
+  'reservations.sort.aToZ': 'De la A a la Z',
+  'reservations.sort.zToA': 'De la Z a la A',
+  'reservations.timeline.dayCount': '{count} días',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Viaje',
+  'reservations.timeline.day': 'Día',
+  'reservations.timeline.prevDay': 'Día anterior',
+  'reservations.timeline.nextDay': 'Día siguiente',
+  'reservations.timeline.openDay': 'Abrir {day} por horas',
+  'reservations.timeline.nothingThisDay': 'Nada en este día.',
+  'reservations.timeline.today': 'Hoy',
+  'reservations.timeline.now': 'ahora',
+  'reservations.timeline.byType': 'Una fila por tipo',
+  'reservations.timeline.context': 'Mostrar la otra pestaña',
+  'reservations.timeline.contextBookings': 'Reservas',
+  'reservations.timeline.contextTransports': 'Transportes',
+  'reservations.timeline.noneDated': 'Ninguna tiene fecha todavía.',
+  'reservations.undated': 'Sin fecha',
+  'reservations.nights': 'Noches',
+  'reservations.start': 'Inicio',
+  'reservations.end': 'Fin',
+  'reservations.rename': 'Renombrar',
+  'reservations.copyCode': 'Copiar código de reserva',
+  'reservations.copyFailed': 'No se pudo copiar',
+  'reservations.showInFiles': 'Mostrar en archivos',
 };
 export default reservations;
diff --git a/shared/src/i18n/es/transport.ts b/shared/src/i18n/es/transport.ts
index 2adbcc276..7a23da8b0 100644
--- a/shared/src/i18n/es/transport.ts
+++ b/shared/src/i18n/es/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Editar transporte',
   'transport.title': 'Transportes',
   'transport.addManual': 'Transporte',
+  'transport.empty': 'Aún no hay transportes',
 };
 export default transport;
diff --git a/shared/src/i18n/et/budget.ts b/shared/src/i18n/et/budget.ts
index 8a8435559..9055cbb64 100644
--- a/shared/src/i18n/et/budget.ts
+++ b/shared/src/i18n/et/budget.ts
@@ -115,6 +115,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'Võrdselt',
   'costs.splitCustom': 'Kohandatud',
   'costs.splitTicket': 'Tšekk',
+  'costs.perPerson': '{amount} inimese kohta',
+  'costs.payersHint': 'Märgi, kes maksis, ja sisesta, kui palju igaüks neist maksis.',
+  'costs.splitHint.equally': 'Kõik märgitud maksavad võrdse osa.',
+  'costs.splitHint.custom': 'Sisesta iga inimese osa; kokku peavad need andma kogusumma.',
+  'costs.splitHint.ticket': 'Loetle, mis tšekil oli, ja märgi iga kirje juurde, kellele see kuulus.',
   'costs.pickSomeone': 'Vali jagamiseks vähemalt üks inimene.',
   'costs.splitSummary': 'Jaotatud {count} osaks · igaühele {amount}',
   'costs.cat.accommodation': 'Majutus',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Kviitungid',
   'costs.receiptsTitle': 'Kviitungid ja arved',
   'costs.attachReceipt': 'Lisa kviitung või arve',
+  'costs.attach': 'Lisa',
   'costs.scan.button': 'Skanni kviitung',
   'costs.scan.reading': 'Kviitungit loetakse…',
   'costs.scan.review': 'Vaata kulu üle',
   'costs.scan.nothingRead': 'Sellelt fotolt ei õnnestunud kviitungit lugeda.',
   'costs.scan.failed': 'Kviitungi lugemist ei õnnestunud alustada.',
   'costs.scan.title': 'Skanni kviitung',
-  'costs.scan.accepted': 'Ühe kviitungi foto (JPG, PNG või WEBP, kuni 10 MB). Tehisintellekti mudel loeb selle taustal, seejärel kontrollid kulu enne salvestamist.',
+  'costs.scan.accepted':
+    'Ühe kviitungi foto (JPG, PNG või WEBP, kuni 10 MB). Tehisintellekti mudel loeb selle taustal, seejärel kontrollid kulu enne salvestamist.',
   'costs.scan.dropHere': 'Lohista kviitungi foto siia või klõpsa, et valida või pildistada',
   'costs.scan.dropActive': 'Lase foto lahti, et see skannida',
   'costs.scan.start': 'Skanni',
diff --git a/shared/src/i18n/et/help.ts b/shared/src/i18n/et/help.ts
index a89deed4e..be490d909 100644
--- a/shared/src/i18n/et/help.ts
+++ b/shared/src/i18n/et/help.ts
@@ -2260,9 +2260,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     'Ava peatus, millega broneering on seotud. Kaardil on riba, kus on kirjas Kinnitatud või Ootel ja broneeringu nimi.',
   'help.guide.place-booking.step.2': 'Ribal on Kuupäev, Aeg ja Broneerimiskood ning broneeringu märkmed, kui neid on.',
-  'help.guide.place-booking.step.3': 'Klõpsa ribal. Avaneb selle broneeringu vorm.',
+  'help.guide.place-booking.step.3': 'Klõpsa ribal. Broneering avaneb kaardi kohal.',
   'help.guide.place-booking.step.4':
-    'Väli Seo päevaplaani kirjega seob broneeringu peatusega ja siin on selleks juba see peatus valitud. Sulge vorm uuesti.',
+    'Broneeringu allosas olev Muuda avab selle oma vormi. Seal seob väli Seo päevaplaani kirjega broneeringu peatusega ja siin on selleks juba see peatus valitud. Sulge vorm uuesti.',
   'help.guide.place-booking.step.5':
     'Peatuse uus broneering algab päevade veerust: vii kursor peatusele ja klõpsa rea lõpus nuppu +. Vorm avaneb pealkirjaga Uus broneering ja on juba peatusega seotud.',
   'help.guide.place-booking.result':
@@ -2463,7 +2463,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Värv näitab broneeringu olekut: roheline rida on kinnitatud, merevaigukollane veel ootel. Hotelle selles loendis pole, neil on all oma plokk.',
   'help.guide.day-bookings.step.4':
-    'Loend ainult näitab broneeringuid. Broneeringuid luuakse ja muudetakse vahekaardil Broneeringud.',
+    'Klõpsa real ja broneering avaneb. Selle allosas olev Muuda muudab seda; uued broneeringud luuakse vahekaardil Broneeringud.',
   'help.guide.day-bookings.result':
     'Kõik, mille kuupäev on sellel päeval, ja kõik, mis on seotud mõne selle päeva peatusega, on selles ühes loendis.',
   'help.guide.day-bookings.tip.1':
@@ -2741,19 +2741,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': 'Ava ja muuda planeeritud ühendust',
   'help.guide.change-transit-route.goal': 'Vaata ühendust peatuste kaupa, nimeta see ümber või otsi marsruut uuesti.',
   'help.guide.change-transit-route.step.1':
-    'Vahekaardil Transport on planeeritud ühendused grupis Automaatne ühistranspordiotsing. Klõpsa kaardil.',
+    'Vahekaardil Transport on planeeritud ühendused grupis Automaatne ühistranspordiotsing. Klõpsa kaardil; ühendus avaneb broneeringuna.',
   'help.guide.change-transit-route.step.2':
     'Üleval on Kestus, Ümberistumised ja Jalgsi. Nende all olev Teekond näitab ühendust peatuste kaupa koos platvormide ja liinide vaheliste jalgsikäikudega.',
   'help.guide.change-transit-route.step.3':
-    'Muuda marsruuti käivitab otsingu uuesti, juba täidetuna selle ühenduse otspunktide ja päevaga.',
+    'Broneeringu allosas olev Muuda marsruuti käivitab otsingu uuesti, juba täidetuna selle ühenduse otspunktide ja päevaga.',
   'help.guide.change-transit-route.step.4':
-    'Vali teine ühendus ja klõpsa Lisa päevale; see asendab vana. Nupu Muuda marsruuti kõrval olev Muuda üksikasju avab hoopis tavalise transpordivormi, kus on Broneerimiskood, Olek, reisijad ja failid.',
+    'Vali teine ühendus ja klõpsa Lisa päevale; see asendab vana. Sama riba teises otsas olev Muuda avab hoopis tavalise transpordivormi, kus on Broneerimiskood, Olek, reisijad, märkmed ja failid.',
   'help.guide.change-transit-route.result':
     'Sõidul on nüüd uus teekond ja selle kaart vahekaardil Transport näitab uusi liine ja kellaaegu.',
   'help.guide.change-transit-route.tip.1':
-    'Sõidu pealkiri on lihtsalt tekst: selle kõrval olev pliiats nimetab sõidu ümber marsruuti muutmata. All olevad Märkmed toetavad Markdowni ning neil on vahekaardid Muuda ja Eelvaade.',
+    'Broneeringu päises olev pealkiri nimetab ühenduse ümber marsruuti muutmata. Selle märkmed kirjutatakse transpordivormis, mis avaneb nupuga Muuda.',
   'help.guide.change-transit-route.tip.2':
-    'Sõidu allosas olev Kustuta eemaldab ühenduse reisist; päeva peatused jäävad alles.',
+    'Broneeringu allosas olev Kustuta eemaldab ühenduse reisist; päeva peatused jäävad alles.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Muuda ühe teelõigu liikumisviisi',
   'help.guide.leg-travel-mode.goal':
@@ -2777,17 +2777,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Muuda või kustuta transport',
   'help.guide.edit-transport.goal': 'Paranda kellaaega, platvormi või broneerimiskoodi või eemalda sõit reisist.',
-  'help.guide.edit-transport.step.1': 'Päevaplaanis on transport värviline rida peatuste vahel. Klõpsa sellel.',
+  'help.guide.edit-transport.step.1':
+    'Päevaplaanis on transport värviline rida peatuste vahel. Klõpsa sellel; avaneb selle broneering koos kellaaegade, marsruudi ja Broneerimiskoodiga.',
   'help.guide.edit-transport.step.2':
-    'See on sama vorm, millega transport loodi, ja selle tiitliribal on Muuda transporti. Muuta saab kõike: tüüpi, marsruuti, päevi ja kellaaegu, Broneerimiskoodi, Olekut.',
+    'Broneeringu allosas olev Muuda avab sama vormi, millega transport loodi, ja selle tiitliribal on Muuda transporti. Muuta saab kõike: tüüpi, marsruuti, päevi ja kellaaegu, Broneerimiskoodi, Olekut.',
   'help.guide.edit-transport.step.3':
     'Lennu marsruut on lennujaamade ahel, rongi oma jaamade ahel. Lisa peatus lisab vahele veel ühe ja igal teelõigul on oma kellaajad ning oma lennu- või rongi number.',
   'help.guide.edit-transport.step.4':
-    'Klõpsa Uuenda. Transpordi täielikuks eemaldamiseks kasuta vahekaardil Transport selle kaardil olevat prügikasti ja kinnita.',
+    'Klõpsa Uuenda. Transpordi täielikuks eemaldamiseks kasuta selle broneeringu allosas olevat nuppu Kustuta või vahekaardil Transport selle kaardil olevat prügikasti ja kinnita.',
   'help.guide.edit-transport.result':
     'Muudatus on näha kõikjal, kus transport ilmub: vahekaardil Transport, päeval, mil see toimub, ja selle joonel kaardil.',
   'help.guide.edit-transport.tip.1':
-    'Sama vorm avaneb mõlemast kohast: pliiatsiga kaardil vahekaardil Transport ja transpordi enda realt päevaplaanis. Erandiks on planeeritud ühistranspordiühendus: selle rida avab sõiduvaate ja sealne Muuda üksikasju viib selle vormini.',
+    'Sama vorm avaneb mõlemast kohast: nupuga Muuda broneeringus, mille avab päevaplaani rida, ja pliiatsiga kaardil vahekaardil Transport. Ka planeeritud ühistranspordiühendus avaneb broneeringuna; seal otsib Muuda marsruuti uuesti ja Muuda viib selle vormini.',
   'help.guide.edit-transport.tip.2':
     'Transpordi teisele päevale viimiseks pole vormi üldse vaja: lohista selle rida ühelt päevakaardilt teisele.',
   // transport-on-map
@@ -2857,13 +2858,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Klõpsa vahekaardi paremas ülanurgas nuppu Käsitsi broneering. Avaneb Uus broneering.',
   'help.guide.create-booking.step.2':
-    'Vali Broneeringu tüüp vormi ülaosas olevast loendist, välja Reisijad kõrval. Majutus, Restoran, Üritus, Ekskursioon, Parkimine ja Muu on kuus tüüpi, mida see vahekaart loob, ja vorm muutub vastavalt valikule: ainult Majutus asendab kuupäevad päevade vahemikuga.',
+    'Klõpsa vormi päises pealkirja all oleval tüübinupul ja vali Broneeringu tüüp. Majutus, Restoran, Üritus, Ekskursioon, Parkimine ja Muu on kuus tüüpi, mida see vahekaart loob, ja vorm muutub vastavalt valikule: ainult Majutus asendab kuupäevad päevade vahemikuga.',
   'help.guide.create-booking.step.3':
     'Sisesta Pealkiri. See on ainus kohustuslik väli ja Lisa jääb passiivseks, kuni selles midagi on.',
   'help.guide.create-booking.step.4':
     'Määra Kuupäev ja Algusaeg ning, kui broneeringul on lõpp, Lõppkuupäev ja Lõpuaeg. Kalendrid pakuvad ainult reisi sisse jäävaid päevi ja kui lõpp pole pärast algust, näidatakse seda punasega ning Lisa on blokeeritud.',
   'help.guide.create-booking.step.5':
-    'Sisesta kinnituselt Broneerimiskood ja määra Olek. Ootel või Kinnitatud määrab, kummasse jaotisse kaart satub.',
+    'Sisesta kinnituselt Broneerimiskood. Tüübi kõrval olev olekunupp näitab Ootel; klõps muudab selle olekuks Kinnitatud ja tagasi ning see määrab, kummasse jaotisse kaart satub.',
   'help.guide.create-booking.step.6': 'Klõpsa Lisa.',
   'help.guide.create-booking.result':
     'Broneering on oma jaotises kaart koos tüübikiibi, kuupäevade ja koodiga ning kõik teised reisil osalejad näevad selle ilmumist.',
@@ -2914,7 +2915,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Märgi reisijad, keda broneering hõlmab, ja vaata seejärel ainult nende broneeringuid.',
   'help.guide.booking-travelers.step.1':
-    'Ava broneering pliiatsiga. Reisijad asub vormi ülaosas, välja Broneeringu tüüp kõrval, ja näitab teksti Määra reisijad, kuni broneeringul pole kedagi.',
+    'Ava broneering pliiatsiga. Reisijad asub Broneerimiskoodi kõrval ja näitab teksti Määra reisijad, kuni broneeringul pole kedagi.',
   'help.guide.booking-travelers.step.2':
     'Klõpsa sellel ja vali inimesed, kellele see broneering on; nimega külalised on samuti loendis. Valitud inimene saab linnukese ja tema avatar kuvatakse väljal. Klõpsa nimel uuesti, et see eemaldada.',
   'help.guide.booking-travelers.step.3': 'Klõpsa Uuenda.',
@@ -3008,7 +3009,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.step.1':
     'Klõpsa kaardi päises pliiatsit. Avaneb Muuda broneeringut kõigi broneeringu andmetega.',
   'help.guide.edit-booking.step.2': 'Muuda seda, mida vaja, siin Broneerimiskoodi, mille teenusepakkuja lõpuks saatis.',
-  'help.guide.edit-booking.step.3': 'Määra Olek väärtusele Kinnitatud.',
+  'help.guide.edit-booking.step.3': 'Klõpsa vormi päises nupul Ootel. See muutub olekuks Kinnitatud.',
   'help.guide.edit-booking.step.4': 'Klõpsa Uuenda.',
   'help.guide.edit-booking.result':
     'Kaart liigub: kinnitatud broneering on jaotises Kinnitatud rohelise täpiga ja kõik reisil osalejad näevad seda liikumas.',
diff --git a/shared/src/i18n/et/places.ts b/shared/src/i18n/et/places.ts
index 983e6d68b..29928b1fb 100644
--- a/shared/src/i18n/et/places.ts
+++ b/shared/src/i18n/et/places.ts
@@ -53,6 +53,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Näita kogu reisi',
   'places.filterTracks': 'Rajad',
   'places.filterByRating': 'Filtreeri hinnangu järgi',
+  'places.filterShow': 'Näita',
+  'places.clearSearch': 'Tühjenda otsing',
   'places.yourRating': 'Sinu hinnang',
   'places.notRated': 'Veel hindamata',
   'places.search': 'Otsi kohti...',
@@ -72,6 +74,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Tänav, linn, riik',
   'places.formLat': 'Laiuskraad (nt 48.8566)',
   'places.formLng': 'Pikkuskraad (nt 2.3522)',
+  'places.formLatLabel': 'Laiuskraad',
+  'places.formLngLabel': 'Pikkuskraad',
   'places.formCategory': 'Kategooria',
   'places.noCategory': 'Kategooriata',
   'places.newCategory': 'Uus kategooria',
diff --git a/shared/src/i18n/et/reservations.ts b/shared/src/i18n/et/reservations.ts
index 76fae685b..ade2ad7c3 100644
--- a/shared/src/i18n/et/reservations.ts
+++ b/shared/src/i18n/et/reservations.ts
@@ -66,6 +66,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Jalgratas',
   'reservations.type.taxi': 'Takso',
   'reservations.type.transit': 'Ühistransport',
+  'reservations.typeShort.transit': 'Ühistr.',
   'reservations.type.transport_other': 'Muu',
   'reservations.confirm.delete': 'Kas soovid kindlasti kustutada broneeringu "{name}"?',
   'reservations.confirm.deleteTitle': 'Kas kustutada broneering?',
@@ -81,6 +82,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Asukoht / aadress',
   'reservations.locationPlaceholder': 'Aadress, lennujaam, hotell...',
   'reservations.confirmationCode': 'Broneerimiskood',
+  'reservations.routeLabel': 'Marsruut',
+  'reservations.segmentCodes': 'Teelõikude koodid',
   'reservations.confirmationPlaceholder': 'Nt ABC12345',
   'reservations.day': 'Päev',
   'reservations.noDay': 'Päevata',
@@ -95,6 +98,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Kustutamine ebaõnnestus',
   'reservations.confirm.remove': 'Kas eemaldada koha "{name}" broneering?',
   'reservations.linkAssignment': 'Seo päevaplaani kirjega',
+  'reservations.linkedTo': 'Seotud',
   'reservations.pickAssignment': 'Vali plaanist kirje...',
   'reservations.noAssignment': 'Seoseta (eraldiseisev)',
   'reservations.price': 'Hind',
@@ -181,5 +185,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Reisijad',
   'reservations.travelers.assign': 'Määra reisijad',
   'reservations.travelers.none': 'Reisil pole veel liikmeid.',
+  'reservations.status.switchTo': 'Määra olekuks {status}',
+  'reservations.view.label': 'Vaade',
+  'reservations.view.cards': 'Kaardid',
+  'reservations.view.list': 'Loend',
+  'reservations.view.timeline': 'Ajajoon',
+  'reservations.filter': 'Filtreeri',
+  'reservations.searchPlaceholder': 'Otsi',
+  'reservations.results': '{shown} {total}-st',
+  'reservations.resetFilters': 'Lähtesta filtrid',
+  'reservations.noMatches': 'Nende filtritega ei leitud midagi',
+  'reservations.viewOptions': 'Vaate valikud',
+  'reservations.resetView': 'Lähtesta vaade',
+  'reservations.group.label': 'Rühmita',
+  'reservations.group.status': 'Olek',
+  'reservations.group.day': 'Päev',
+  'reservations.group.type': 'Tüüp',
+  'reservations.group.none': 'Ära rühmita',
+  'reservations.transitApart': 'Ühistransport eraldi jaotisena',
+  'reservations.group.before': 'Enne reisi',
+  'reservations.group.after': 'Pärast reisi',
+  'reservations.group.undated': 'Kuupäevata',
+  'reservations.sort.label': 'Järjesta',
+  'reservations.sort.date': 'Kuupäev',
+  'reservations.sort.title': 'Pealkiri',
+  'reservations.sort.type': 'Tüüp',
+  'reservations.sort.status': 'Olek',
+  'reservations.sort.earlyFirst': 'Varasemad eespool',
+  'reservations.sort.lateFirst': 'Hilisemad eespool',
+  'reservations.sort.aToZ': 'A-st Z-ni',
+  'reservations.sort.zToA': 'Z-st A-ni',
+  'reservations.timeline.dayCount': '{count} päeva',
+  'reservations.timeline.zoom': 'Suum',
+  'reservations.timeline.trip': 'Reis',
+  'reservations.timeline.day': 'Päev',
+  'reservations.timeline.prevDay': 'Eelmine päev',
+  'reservations.timeline.nextDay': 'Järgmine päev',
+  'reservations.timeline.openDay': 'Ava {day} tundide kaupa',
+  'reservations.timeline.nothingThisDay': 'Sellel päeval pole midagi.',
+  'reservations.timeline.today': 'Täna',
+  'reservations.timeline.now': 'praegu',
+  'reservations.timeline.byType': 'Iga tüüp eraldi real',
+  'reservations.timeline.context': 'Näita teist vahekaarti',
+  'reservations.timeline.contextBookings': 'Broneeringud',
+  'reservations.timeline.contextTransports': 'Transport',
+  'reservations.timeline.noneDated': 'Ühelgi neist pole veel kuupäeva.',
+  'reservations.undated': 'Kuupäevata',
+  'reservations.nights': 'Ööd',
+  'reservations.start': 'Algus',
+  'reservations.end': 'Lõpp',
+  'reservations.rename': 'Nimeta ümber',
+  'reservations.copyCode': 'Kopeeri broneerimiskood',
+  'reservations.copyFailed': 'Kopeerimine ebaõnnestus',
+  'reservations.showInFiles': 'Näita failides',
 };
 export default reservations;
diff --git a/shared/src/i18n/et/transport.ts b/shared/src/i18n/et/transport.ts
index e86ec41d8..c8db1fb8c 100644
--- a/shared/src/i18n/et/transport.ts
+++ b/shared/src/i18n/et/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Muuda transporti',
   'transport.title': 'Transport',
   'transport.addManual': 'Transport',
+  'transport.empty': 'Transporti veel pole',
 };
 export default transport;
diff --git a/shared/src/i18n/fr/budget.ts b/shared/src/i18n/fr/budget.ts
index 20dc5d21f..cd49dce87 100644
--- a/shared/src/i18n/fr/budget.ts
+++ b/shared/src/i18n/fr/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Total seulement — pas encore réglé',
   'costs.tapToInclude': 'Toucher pour inclure',
   'costs.amount': 'Montant',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Répartition',
+  'costs.splitEqually': 'À parts égales',
+  'costs.splitCustom': 'Personnalisé',
+  'costs.splitTicket': 'Reçu',
+  'costs.perPerson': '{amount} par personne',
+  'costs.payersHint': 'Cochez qui a payé et saisissez combien chacun a versé.',
+  'costs.splitHint.equally': 'Chaque personne cochée paie la même part.',
+  'costs.splitHint.custom': 'Saisissez la part de chaque personne ; ensemble, elles doivent faire le total.',
+  'costs.splitHint.ticket': 'Listez ce qui figurait sur le reçu et cochez qui a pris chaque article.',
   'costs.filter.allCategories': 'Toutes les catégories',
   'costs.filter.allDays': 'Tous les jours',
   'costs.expensesCount': '{count} dépenses',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Reçus',
   'costs.receiptsTitle': 'Reçus et factures',
   'costs.attachReceipt': 'Joindre un reçu / une facture',
+  'costs.attach': 'Joindre',
   'costs.scan.button': 'Scanner un reçu',
   'costs.scan.reading': 'Lecture du reçu…',
   'costs.scan.review': 'Vérifier la dépense',
   'costs.scan.nothingRead': "Aucun reçu n'a pu être lu sur cette photo.",
   'costs.scan.failed': 'Impossible de lancer la lecture du reçu.',
   'costs.scan.title': 'Scanner un reçu',
-  'costs.scan.accepted': "Une photo d'un seul reçu (JPG, PNG ou WEBP, 10 Mo max). Le modèle d'IA la lit en arrière-plan, puis vous vérifiez la dépense avant de l'enregistrer.",
+  'costs.scan.accepted':
+    "Une photo d'un seul reçu (JPG, PNG ou WEBP, 10 Mo max). Le modèle d'IA la lit en arrière-plan, puis vous vérifiez la dépense avant de l'enregistrer.",
   'costs.scan.dropHere': 'Déposez la photo du reçu ici, ou cliquez pour en choisir ou en prendre une',
   'costs.scan.dropActive': 'Déposez la photo pour la scanner',
   'costs.scan.start': 'Scanner',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Aucun reçu joint',
   'costs.deleteReceipt': 'Supprimer le reçu',
   'costs.viewReceipt': 'Voir le reçu',
-  'costs.receiptLeftBehind': 'Échec de la sauvegarde, {count} reçus téléversés sont toujours là. Supprimez-les dans les Fichiers.',
+  'costs.receiptLeftBehind':
+    'Échec de la sauvegarde, {count} reçus téléversés sont toujours là. Supprimez-les dans les Fichiers.',
 };
 export default budget;
diff --git a/shared/src/i18n/fr/dayplan.ts b/shared/src/i18n/fr/dayplan.ts
index 0b00ad267..8b7419bd1 100644
--- a/shared/src/i18n/fr/dayplan.ts
+++ b/shared/src/i18n/fr/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Tous les lieux attribués',
   'dayplan.mobile.noMatch': 'Aucun résultat',
   'dayplan.mobile.createNew': 'Créer un nouveau lieu',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Déplier tous les jours', // en-fallback
+  'dayplan.collapseAll': 'Replier tous les jours', // en-fallback
   'dayplan.reorderDays': 'Réorganiser les jours',
   'dayplan.reorderTitle': 'Réorganiser les jours',
   'dayplan.reorderHint': "Les lieux, notes et réservations d'un jour le suivent.",
diff --git a/shared/src/i18n/fr/help.ts b/shared/src/i18n/fr/help.ts
index 4bb465305..9d2f4672c 100644
--- a/shared/src/i18n/fr/help.ts
+++ b/shared/src/i18n/fr/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'fr' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Aide et documentation',
+  'help.search': 'Rechercher dans la documentation…',
+  'help.contents': 'Sommaire',
+  'help.noResults': 'Aucune page correspondante.',
+  'help.errorTitle': 'Impossible de charger cette page',
+  'help.errorBody': 'Le contenu de l’aide provient du wiki TREK. Vérifiez votre connexion et réessayez.',
 
   // center
   'help.center.button': 'Aide pour cet écran',
@@ -1066,7 +1066,7 @@ const help: TranslationStrings = {
     'Travel & map : les itinéraires de réservation toujours sur la carte, la pastille Explorer les lieux, l’optimisation de l’itinéraire depuis votre hébergement, les codes de réservation masqués et les itinéraires de réservation étiquetés.',
   'help.ctx.settings-display.bullet.3':
     'Démarrage : si TREK s’ouvre sur le tableau de bord ou sur le voyage en cours, et quel onglet d’un voyage vient en premier.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Apparence',
   'help.ctx.settings-appearance.summary':
     'L’apparence de TREK sur ce compte : clair ou sombre, la couleur d’accent, le verre et le mouvement, la taille du texte, et les widgets que le tableau de bord affiche. Tout s’applique en direct, sur chaque appareil où vous vous connectez.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2373,9 +2373,9 @@ const help: TranslationStrings = {
     'Ouvrez l’étape à laquelle appartient la réservation. La fiche montre un bandeau avec Confirmée ou En attente et le nom de la réservation.',
   'help.guide.place-booking.step.2':
     'Le bandeau porte la Date, l’Heure et le Code de réservation, ainsi que les notes de la réservation.',
-  'help.guide.place-booking.step.3': 'Cliquez sur le bandeau. Le formulaire de la réservation s’ouvre dessus.',
+  'help.guide.place-booking.step.3': 'Cliquez sur le bandeau. La réservation s’ouvre par-dessus la carte.',
   'help.guide.place-booking.step.4':
-    'Lier à l’affectation du jour est ce qui accroche une réservation à une étape, et ici il nomme déjà celle-ci. Refermez le formulaire.',
+    'Modifier, au pied de la réservation, ouvre son propre formulaire. Lier à l’affectation du jour y est ce qui accroche une réservation à une étape, et ici il nomme déjà celle-ci. Refermez le formulaire.',
   'help.guide.place-booking.step.5':
     'Une nouvelle réservation pour une étape commence dans la colonne des jours : survolez l’étape et cliquez sur le + à son bout. Le formulaire s’ouvre en Nouvelle réservation, déjà liée à elle.',
   'help.guide.place-booking.result':
@@ -2741,7 +2741,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'La couleur dit où en est une réservation : une ligne verte est confirmée, une ligne ambre est encore en attente. Les hébergements ne sont pas dans cette liste, ils ont leur propre bloc en dessous.',
   'help.guide.day-bookings.step.4':
-    'La liste ne fait que relever les réservations. Une réservation se crée et se modifie dans l’onglet Réservations.',
+    'Cliquez sur une ligne et la réservation s’ouvre. Modifier, à son pied, la change ; les nouvelles réservations se créent dans l’onglet Réservations.',
   'help.guide.day-bookings.result':
     'Tout ce qui est daté du jour, et tout ce qui est rattaché à l’une de ses étapes, est dans cette seule liste.',
   'help.guide.day-bookings.tip.1':
@@ -3296,13 +3296,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Cliquez sur Réservation manuelle en haut à droite de l’onglet. Nouvelle réservation s’ouvre.',
   'help.guide.create-booking.step.2':
-    'Choisissez le Type de réservation dans la liste en haut du formulaire, à côté de Voyageurs. Hébergement, Restaurant, Événement, Visite, Parking et Autre sont les six que cet onglet crée, et le formulaire change avec le choix : seul Hébergement échange ses dates contre une plage de jours.',
+    'Cliquez sur la pastille de type sous le titre, dans l’en-tête du formulaire, et choisissez le Type de réservation. Hébergement, Restaurant, Événement, Visite, Parking et Autre sont les six que cet onglet crée, et le formulaire change avec le choix : seul Hébergement échange ses dates contre une plage de jours.',
   'help.guide.create-booking.step.3':
     'Tapez le Titre. C’est le seul champ sur lequel le formulaire insiste, et Ajouter reste mort tant qu’il est vide.',
   'help.guide.create-booking.step.4':
     'Réglez Date et Heure de début, puis Date de fin et Heure de fin si la réservation a une fin. Les calendriers ne proposent que les jours à l’intérieur du voyage, et une fin qui n’est pas après le début le dit en rouge et bloque Ajouter.',
   'help.guide.create-booking.step.5':
-    'Entrez le Code de réservation de la confirmation et réglez Statut. En attente ou Confirmée décide dans laquelle des deux sections la carte atterrit.',
+    'Entrez le Code de réservation de la confirmation. La pastille de statut à côté du type affiche En attente ; un clic la fait passer à Confirmée et inversement, et c’est ce qui décide dans laquelle des deux sections la carte atterrit.',
   'help.guide.create-booking.step.6': 'Cliquez sur Ajouter.',
   'help.guide.create-booking.result':
     'La réservation est une carte dans sa section, avec sa pastille de sorte, ses dates et son code, et tous les autres du voyage la voient apparaître.',
@@ -3353,7 +3353,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Dire pour qui est une réservation',
   'help.guide.booking-travelers.goal': 'Marquez les voyageurs que couvre une réservation, puis ne voyez que les leurs.',
   'help.guide.booking-travelers.step.1':
-    'Ouvrez la réservation avec le crayon. Voyageurs se trouve en haut du formulaire, à côté de Type de réservation, et affiche Assigner des voyageurs tant que personne n’est sur la réservation.',
+    'Ouvrez la réservation avec le crayon. Voyageurs se trouve à côté du Code de réservation, et affiche Assigner des voyageurs tant que personne n’est sur la réservation.',
   'help.guide.booking-travelers.step.2':
     'Cliquez dessus et choisissez les personnes pour qui est cette réservation ; les invités nommés sont aussi dans la liste. Une personne choisie reçoit une coche et son avatar dans le champ. Cliquez de nouveau sur le nom pour l’enlever.',
   'help.guide.booking-travelers.step.3': 'Cliquez sur Mettre à jour.',
@@ -3449,7 +3449,8 @@ const help: TranslationStrings = {
     'Cliquez sur le crayon dans l’en-tête de la carte. Modifier la réservation s’ouvre avec tout ce que la réservation sait.',
   'help.guide.edit-booking.step.2':
     'Changez ce qui doit changer, ici le Code de réservation que le prestataire a fini par envoyer.',
-  'help.guide.edit-booking.step.3': 'Mettez Statut sur Confirmée.',
+  'help.guide.edit-booking.step.3':
+    'Cliquez sur la pastille En attente dans l’en-tête du formulaire. Elle passe à Confirmée.',
   'help.guide.edit-booking.step.4': 'Cliquez sur Mettre à jour.',
   'help.guide.edit-booking.result':
     'La carte se déplace : une réservation confirmée se tient dans la section Confirmée derrière un point vert, et tout le monde dans le voyage la voit bouger.',
@@ -3744,19 +3745,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Lire la liaison arrêt par arrêt, la renommer, ou rechercher de nouveau l’itinéraire.',
   'help.guide.change-transit-route.step.1':
-    'Dans l’onglet Transports, les liaisons planifiées sont sous Transports en commun automatisés. Cliquez sur la carte.',
+    'Dans l’onglet Transports, les liaisons planifiées sont sous Transports en commun automatisés. Cliquez sur la carte ; la liaison s’ouvre comme une réservation.',
   'help.guide.change-transit-route.step.2':
     'Durée, Correspondances et Marche sont en haut. Itinéraire en dessous parcourt la liaison arrêt par arrêt, avec les voies et les marches entre les lignes.',
   'help.guide.change-transit-route.step.3':
-    "Modifier l'itinéraire relance la recherche, déjà remplie avec les deux extrémités de cette liaison et son jour.",
+    "Modifier l'itinéraire, au pied de la réservation, relance la recherche, déjà remplie avec les deux extrémités de cette liaison et son jour.",
   'help.guide.change-transit-route.step.4':
-    "Choisissez une autre liaison et cliquez sur Ajouter au jour ; elle prend la place de l’ancienne. Modifier les détails, à côté de Modifier l'itinéraire, ouvre au contraire le formulaire de transport ordinaire, où vivent le Code de réservation, le Statut, les voyageurs et les fichiers.",
+    'Choisissez une autre liaison et cliquez sur Ajouter au jour ; elle prend la place de l’ancienne. Modifier, à l’autre bout de la même barre, ouvre au contraire le formulaire de transport ordinaire, où vivent le Code de réservation, le Statut, les voyageurs, les notes et les fichiers.',
   'help.guide.change-transit-route.result':
     'Le trajet porte le nouvel itinéraire, et sa carte dans l’onglet Transports montre les nouvelles lignes et les nouvelles heures.',
   'help.guide.change-transit-route.tip.1':
-    'Le titre du trajet n’est que du texte : le crayon à côté le renomme sans toucher à l’itinéraire. Notes en dessous accepte le markdown et a un onglet Modifier et un onglet Aperçu.',
+    'Le titre dans l’en-tête de la réservation renomme la liaison sans toucher à l’itinéraire. Ses notes s’écrivent dans le formulaire de transport, derrière Modifier.',
   'help.guide.change-transit-route.tip.2':
-    'Supprimer au pied du trajet sort la liaison du voyage ; le jour garde ses étapes.',
+    'Supprimer au pied de la réservation sort la liaison du voyage ; le jour garde ses étapes.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Changer la façon de parcourir un tronçon',
   'help.guide.leg-travel-mode.goal':
@@ -3782,17 +3783,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Corriger une heure, un quai ou un code de réservation, ou sortir le trajet du voyage.',
   'help.guide.edit-transport.step.1':
-    'Dans le plan du jour, un transport est une ligne colorée entre les étapes. Cliquez dessus.',
+    'Dans le plan du jour, un transport est une ligne colorée entre les étapes. Cliquez dessus ; sa réservation s’ouvre avec les horaires, l’itinéraire et le Code de réservation.',
   'help.guide.edit-transport.step.2':
-    'Le formulaire est celui qui l’a créé, avec Modifier le transport dans sa barre de titre. Tout peut changer : le type, l’itinéraire, les jours et les heures, le Code de réservation, le Statut.',
+    'Modifier, au pied de la réservation, ouvre le formulaire qui l’a créé, avec Modifier le transport dans sa barre de titre. Tout peut changer : le type, l’itinéraire, les jours et les heures, le Code de réservation, le Statut.',
   'help.guide.edit-transport.step.3':
     'L’itinéraire d’un vol est une chaîne d’aéroports, celui d’un train une chaîne de gares. Ajouter une escale en met une autre au milieu, et chaque tronçon garde ses propres heures et son propre numéro de vol ou de train.',
   'help.guide.edit-transport.step.4':
-    'Cliquez sur Mettre à jour. Pour retirer complètement le transport, utilisez la corbeille sur sa carte dans l’onglet Transports et confirmez.',
+    'Cliquez sur Mettre à jour. Pour retirer complètement le transport, utilisez Supprimer au pied de sa réservation, ou la corbeille sur sa carte dans l’onglet Transports, et confirmez.',
   'help.guide.edit-transport.result':
     'Le changement se voit partout où le transport apparaît : l’onglet Transports, le jour où il roule, et sa ligne sur la carte.',
   'help.guide.edit-transport.tip.1':
-    'Le même formulaire s’ouvre des deux côtés, par le crayon sur la carte dans l’onglet Transports et par la ligne propre du transport dans le plan du jour. Une liaison en transports en commun planifiée fait exception : sa ligne ouvre la vue du trajet, et Modifier les détails y mène à ce formulaire.',
+    "Le même formulaire s’ouvre des deux côtés : par Modifier dans la réservation qu’ouvre une ligne du plan du jour, et par le crayon sur la carte dans l’onglet Transports. Une liaison en transports en commun planifiée s’ouvre elle aussi comme une réservation ; Modifier l'itinéraire y relance la recherche, et Modifier mène à ce formulaire.",
   'help.guide.edit-transport.tip.2':
     'Déplacer un transport vers un autre jour n’a pas besoin du formulaire du tout : glissez sa ligne d’une carte de jour à la suivante.',
   // transport-on-map
diff --git a/shared/src/i18n/fr/places.ts b/shared/src/i18n/fr/places.ts
index 87f3c8455..0f76b61a2 100644
--- a/shared/src/i18n/fr/places.ts
+++ b/shared/src/i18n/fr/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Sélectionnez au moins un type.',
   'places.selectionCount': '{count} sélectionné(s)',
   'places.deleteSelected': 'Supprimer la sélection',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Changer de catégorie',
+  'places.categoryChanged': '{count} lieux mis à jour',
   'places.kmlKmzImported': '{count} lieux importés depuis KMZ/KML',
   'places.urlResolved': "Lieu importé depuis l'URL",
   'places.importList': 'Import de liste',
@@ -37,7 +37,8 @@ const places: TranslationStrings = {
   'places.importGoogleList': 'Liste Google',
   'places.importNaverList': 'Liste Naver',
   'places.googleListHint': 'Collez un lien de liste Google Maps partagée pour importer tous les lieux.',
-  'places.googleDirHint': 'Un lien d’itinéraire fonctionne aussi : ses étapes deviennent des lieux, dans l’ordre du trajet.',
+  'places.googleDirHint':
+    'Un lien d’itinéraire fonctionne aussi : ses étapes deviennent des lieux, dans l’ordre du trajet.',
   'places.googleListImported': '{count} lieux importés depuis "{list}"',
   'places.googleListError': "Impossible d'importer la liste Google Maps",
   'places.naverListHint': 'Collez un lien de liste Naver Maps partagée pour importer tous les lieux.',
@@ -52,6 +53,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Afficher tout le voyage',
   'places.filterTracks': 'Traces',
   'places.filterByRating': 'Filtrer par note',
+  'places.filterShow': 'Afficher',
+  'places.clearSearch': 'Effacer la recherche',
   'places.yourRating': 'Ta note',
   'places.notRated': 'Pas encore noté',
   'places.search': 'Rechercher des lieux…',
@@ -71,6 +74,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Rue, ville, pays',
   'places.formLat': 'Latitude (ex. 48.8566)',
   'places.formLng': 'Longitude (ex. 2.3522)',
+  'places.formLatLabel': 'Latitude',
+  'places.formLngLabel': 'Longitude',
   'places.formCategory': 'Catégorie',
   'places.noCategory': 'Sans catégorie',
   'places.newCategory': 'Nouvelle catégorie',
@@ -89,7 +94,7 @@ const places: TranslationStrings = {
   'places.reservationNotesPlaceholder': 'Notes de réservation, numéro de confirmation…',
   'places.mapsSearchPlaceholder': 'Rechercher des lieux…',
   'places.mapsSearchError': 'La recherche de lieu a échoué.',
-  'places.searchGoogleInstead': 'Ce n\'est pas le bon lieu ? Rechercher sur Google',
+  'places.searchGoogleInstead': "Ce n'est pas le bon lieu ? Rechercher sur Google",
   'places.loadingDetails': 'Chargement des détails du lieu…',
   'places.osmHint':
     'Recherche via OpenStreetMap (pas de photos, horaires ni notes). Ajoutez une clé API Google dans les paramètres pour plus de détails.',
diff --git a/shared/src/i18n/fr/reservations.ts b/shared/src/i18n/fr/reservations.ts
index a07d0dd43..4bfc83195 100644
--- a/shared/src/i18n/fr/reservations.ts
+++ b/shared/src/i18n/fr/reservations.ts
@@ -66,6 +66,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Vélo',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Transports en commun',
+  'reservations.typeShort.transit': 'Transp. en commun',
   'reservations.type.transport_other': 'Autre',
   'reservations.confirm.delete': 'Voulez-vous vraiment supprimer la réservation « {name} » ?',
   'reservations.confirm.deleteTitle': 'Supprimer la réservation ?',
@@ -81,6 +82,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Lieu / Adresse',
   'reservations.locationPlaceholder': 'Adresse, aéroport, hôtel…',
   'reservations.confirmationCode': 'Code de réservation',
+  'reservations.routeLabel': 'Itinéraire',
+  'reservations.segmentCodes': 'Codes par tronçon',
   'reservations.confirmationPlaceholder': 'ex. ABC12345',
   'reservations.day': 'Jour',
   'reservations.noDay': 'Aucun jour',
@@ -95,6 +98,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Échec de la suppression',
   'reservations.confirm.remove': 'Supprimer la réservation pour « {name} » ?',
   'reservations.linkAssignment': "Lier à l'affectation du jour",
+  'reservations.linkedTo': 'Lié à',
   'reservations.pickAssignment': 'Sélectionnez une affectation de votre plan…',
   'reservations.noAssignment': 'Aucun lien (autonome)',
   'reservations.price': 'Prix',
@@ -137,9 +141,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} réservation(s) trouvée(s)',
   'reservations.import.previewEmpty': "Aucune réservation n'a pu être extraite des fichiers envoyés.",
   'reservations.import.removeItem': 'Supprimer',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'À vérifier',
+  'reservations.import.tryAi': 'Essayer l’analyse par IA',
+  'reservations.import.aiParsing': 'Analyse par IA…',
   'reservations.import.confirm': 'Importer {count} réservation(s)',
   'reservations.import.back': 'Retour',
   'reservations.import.success': '{count} réservation(s) importée(s)',
@@ -185,5 +189,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Voyageurs',
   'reservations.travelers.assign': 'Assigner des voyageurs',
   'reservations.travelers.none': 'Aucun participant au voyage pour le moment.',
+  'reservations.status.switchTo': 'Passer à {status}',
+  'reservations.view.label': 'Vue',
+  'reservations.view.cards': 'Cartes',
+  'reservations.view.list': 'Liste',
+  'reservations.view.timeline': 'Chronologie',
+  'reservations.filter': 'Filtrer',
+  'reservations.searchPlaceholder': 'Rechercher',
+  'reservations.results': '{shown} sur {total}',
+  'reservations.resetFilters': 'Réinitialiser les filtres',
+  'reservations.noMatches': 'Aucun résultat pour ces filtres',
+  'reservations.viewOptions': "Options d'affichage",
+  'reservations.resetView': "Réinitialiser l'affichage",
+  'reservations.group.label': 'Grouper par',
+  'reservations.group.status': 'Statut',
+  'reservations.group.day': 'Jour',
+  'reservations.group.type': 'Type',
+  'reservations.group.none': 'Sans regroupement',
+  'reservations.transitApart': 'Transports en commun dans une section à part',
+  'reservations.group.before': 'Avant le voyage',
+  'reservations.group.after': 'Après le voyage',
+  'reservations.group.undated': 'Sans date',
+  'reservations.sort.label': 'Trier par',
+  'reservations.sort.date': 'Date',
+  'reservations.sort.title': 'Titre',
+  'reservations.sort.type': 'Type',
+  'reservations.sort.status': 'Statut',
+  'reservations.sort.earlyFirst': "Plus tôt d'abord",
+  'reservations.sort.lateFirst': "Plus tard d'abord",
+  'reservations.sort.aToZ': 'De A à Z',
+  'reservations.sort.zToA': 'De Z à A',
+  'reservations.timeline.dayCount': '{count} jours',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Voyage',
+  'reservations.timeline.day': 'Jour',
+  'reservations.timeline.prevDay': 'Jour précédent',
+  'reservations.timeline.nextDay': 'Jour suivant',
+  'reservations.timeline.openDay': 'Ouvrir {day} heure par heure',
+  'reservations.timeline.nothingThisDay': 'Rien ce jour-là.',
+  'reservations.timeline.today': "Aujourd'hui",
+  'reservations.timeline.now': 'maintenant',
+  'reservations.timeline.byType': 'Une ligne par type',
+  'reservations.timeline.context': "Afficher l'autre onglet",
+  'reservations.timeline.contextBookings': 'Réservations',
+  'reservations.timeline.contextTransports': 'Transports',
+  'reservations.timeline.noneDated': "Aucune n'a encore de date.",
+  'reservations.undated': 'Sans date',
+  'reservations.nights': 'Nuits',
+  'reservations.start': 'Début',
+  'reservations.end': 'Fin',
+  'reservations.rename': 'Renommer',
+  'reservations.copyCode': 'Copier le code de réservation',
+  'reservations.copyFailed': 'Impossible de copier',
+  'reservations.showInFiles': 'Afficher dans les fichiers',
 };
 export default reservations;
diff --git a/shared/src/i18n/fr/transport.ts b/shared/src/i18n/fr/transport.ts
index 9d1b95b21..38c933188 100644
--- a/shared/src/i18n/fr/transport.ts
+++ b/shared/src/i18n/fr/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Modifier le transport',
   'transport.title': 'Transports',
   'transport.addManual': 'Transport',
+  'transport.empty': 'Aucun transport pour le moment',
 };
 export default transport;
diff --git a/shared/src/i18n/gr/budget.ts b/shared/src/i18n/gr/budget.ts
index 80b8a2baf..5cd9ef095 100644
--- a/shared/src/i18n/gr/budget.ts
+++ b/shared/src/i18n/gr/budget.ts
@@ -136,10 +136,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Μόνο στο σύνολο — δεν έχει διακανονιστεί',
   'costs.tapToInclude': 'Πατήστε για προσθήκη',
   'costs.amount': 'Ποσό',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Διαμοιρασμός',
+  'costs.splitEqually': 'Εξίσου',
+  'costs.splitCustom': 'Προσαρμογή',
+  'costs.splitTicket': 'Απόδειξη',
+  'costs.perPerson': '{amount} ανά άτομο',
+  'costs.payersHint': 'Επιλέξτε ποιος πλήρωσε και γράψτε πόσα έβαλε ο καθένας.',
+  'costs.splitHint.equally': 'Όλοι οι επιλεγμένοι πληρώνουν το ίδιο μερίδιο.',
+  'costs.splitHint.custom': 'Γράψτε το μερίδιο κάθε ατόμου· μαζί πρέπει να φτάνουν το σύνολο.',
+  'costs.splitHint.ticket': 'Καταγράψτε τι είχε η απόδειξη και σημειώστε ποιος πήρε κάθε είδος.',
   'costs.filter.allCategories': 'Όλες οι κατηγορίες',
   'costs.filter.allDays': 'Όλες οι ημέρες',
   'costs.expensesCount': '{count} έξοδα',
@@ -155,13 +160,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Αποδείξεις',
   'costs.receiptsTitle': 'Αποδείξεις & Τιμολόγια',
   'costs.attachReceipt': 'Επισύναψη απόδειξης / τιμολογίου',
+  'costs.attach': 'Επισύναψη',
   'costs.scan.button': 'Σάρωση απόδειξης',
   'costs.scan.reading': 'Ανάγνωση της απόδειξης…',
   'costs.scan.review': 'Έλεγχος εξόδου',
   'costs.scan.nothingRead': 'Δεν ήταν δυνατή η ανάγνωση απόδειξης από αυτή τη φωτογραφία.',
   'costs.scan.failed': 'Δεν ήταν δυνατή η έναρξη ανάγνωσης της απόδειξης.',
   'costs.scan.title': 'Σάρωση απόδειξης',
-  'costs.scan.accepted': 'Φωτογραφία μίας απόδειξης (JPG, PNG ή WEBP, έως 10 MB). Το μοντέλο ΤΝ τη διαβάζει στο παρασκήνιο και μετά ελέγχετε το έξοδο πριν αποθηκευτεί.',
+  'costs.scan.accepted':
+    'Φωτογραφία μίας απόδειξης (JPG, PNG ή WEBP, έως 10 MB). Το μοντέλο ΤΝ τη διαβάζει στο παρασκήνιο και μετά ελέγχετε το έξοδο πριν αποθηκευτεί.',
   'costs.scan.dropHere': 'Αφήστε εδώ τη φωτογραφία της απόδειξης ή κάντε κλικ για να επιλέξετε ή να τραβήξετε μία',
   'costs.scan.dropActive': 'Αφήστε τη φωτογραφία για σάρωση',
   'costs.scan.start': 'Σάρωση',
@@ -169,6 +176,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Δεν υπάρχουν συνημμένες αποδείξεις',
   'costs.deleteReceipt': 'Αφαίρεση απόδειξης',
   'costs.viewReceipt': 'Προβολή απόδειξης',
-  'costs.receiptLeftBehind': 'Η αποθήκευση απέτυχε και {count} ανεβασμένες αποδείξεις παραμένουν. Διαγράψτε τες στην καρτέλα Αρχεία.',
+  'costs.receiptLeftBehind':
+    'Η αποθήκευση απέτυχε και {count} ανεβασμένες αποδείξεις παραμένουν. Διαγράψτε τες στην καρτέλα Αρχεία.',
 };
 export default budget;
diff --git a/shared/src/i18n/gr/help.ts b/shared/src/i18n/gr/help.ts
index f63407643..679c04f9e 100644
--- a/shared/src/i18n/gr/help.ts
+++ b/shared/src/i18n/gr/help.ts
@@ -2,12 +2,13 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'gr' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Βοήθεια και τεκμηρίωση',
+  'help.search': 'Αναζήτηση στην τεκμηρίωση…',
+  'help.contents': 'Περιεχόμενα',
+  'help.noResults': 'Δεν βρέθηκαν σελίδες.',
+  'help.errorTitle': 'Δεν ήταν δυνατή η φόρτωση της σελίδας',
+  'help.errorBody':
+    'Το περιεχόμενο της βοήθειας προέρχεται από το wiki του TREK. Ελέγξτε τη σύνδεσή σας και δοκιμάστε ξανά.',
 
   // center
   'help.center.button': 'Βοήθεια για αυτή την οθόνη',
@@ -1073,7 +1074,7 @@ const help: TranslationStrings = {
     'Travel & map: διαδρομές κρατήσεων πάντα στον χάρτη, το κουμπί Εξερεύνηση μερών, βελτιστοποίηση διαδρομής από το κατάλυμά σας, θολωμένοι κωδικοί κρατήσεων και διαδρομές κρατήσεων με ετικέτες.',
   'help.ctx.settings-display.bullet.3':
     'Εκκίνηση: αν το TREK ανοίγει στον πίνακα ή στο ενεργό ταξίδι, και ποια καρτέλα ενός ταξιδιού εμφανίζεται πρώτη.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Εμφάνιση',
   'help.ctx.settings-appearance.summary':
     'Πώς φαίνεται το TREK σε αυτόν τον λογαριασμό: φωτεινό ή σκούρο, το χρώμα έμφασης, γυαλί και κίνηση, μέγεθος κειμένου, και ποια widgets δείχνει ο πίνακας. Όλα εφαρμόζονται ζωντανά, σε κάθε συσκευή όπου συνδέεστε.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2380,9 +2381,9 @@ const help: TranslationStrings = {
     'Ανοίξτε τη στάση στην οποία ανήκει η κράτηση. Η κάρτα δείχνει μια λωρίδα με Επιβεβαιωμένο ή Εκκρεμές και το όνομα της κράτησης.',
   'help.guide.place-booking.step.2':
     'Η λωρίδα κουβαλά την Ημερομηνία, την Ώρα και τον Κωδικό Κράτησης, και όποιες σημειώσεις έχει η κράτηση.',
-  'help.guide.place-booking.step.3': 'Κάντε κλικ στη λωρίδα. Η ίδια η φόρμα της κράτησης ανοίγει πάνω της.',
+  'help.guide.place-booking.step.3': 'Κάντε κλικ στη λωρίδα. Η κράτηση ανοίγει πάνω από τον χάρτη.',
   'help.guide.place-booking.step.4':
-    'Το Σύνδεση με ανάθεση ημέρας είναι αυτό που καρφιτσώνει μια κράτηση σε μια στάση, και εδώ ονομάζει ήδη αυτήν. Κλείστε ξανά τη φόρμα.',
+    'Η Επεξεργασία στο κάτω μέρος της κράτησης ανοίγει τη δική της φόρμα. Εκεί, το Σύνδεση με ανάθεση ημέρας είναι αυτό που καρφιτσώνει μια κράτηση σε μια στάση, και εδώ ονομάζει ήδη αυτήν. Κλείστε ξανά τη φόρμα.',
   'help.guide.place-booking.step.5':
     'Μια νέα κράτηση για μια στάση ξεκινά στη στήλη ημερών: περάστε πάνω από τη στάση και κάντε κλικ στο + στο τέλος της. Η φόρμα ανοίγει ως Νέα Κράτηση, ήδη συνδεδεμένη με αυτήν.',
   'help.guide.place-booking.result':
@@ -2749,7 +2750,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Το χρώμα λέει πού βρίσκεται μια κράτηση: η πράσινη γραμμή είναι επιβεβαιωμένη, η κεχριμπαρένια ακόμη εκκρεμής. Τα ξενοδοχεία δεν είναι σε αυτή τη λίστα, έχουν το δικό τους μπλοκ πιο κάτω.',
   'help.guide.day-bookings.step.4':
-    'Η λίστα απλώς διαβάζει τις κρατήσεις. Μια κράτηση δημιουργείται και αλλάζει στην καρτέλα Κρατήσεις.',
+    'Κάντε κλικ σε μια γραμμή και η κράτηση ανοίγει. Η Επεξεργασία στο κάτω μέρος της την αλλάζει· οι νέες κρατήσεις δημιουργούνται στην καρτέλα Κρατήσεις.',
   'help.guide.day-bookings.result':
     'Όλα όσα έχουν ημερομηνία την ημέρα, και όλα όσα κρέμονται από μία από τις στάσεις της, βρίσκονται σε αυτή τη μία λίστα.',
   'help.guide.day-bookings.tip.1':
@@ -3309,13 +3310,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Κάντε κλικ στο Χειροκίνητη Κράτηση πάνω δεξιά στην καρτέλα. Ανοίγει η Νέα Κράτηση.',
   'help.guide.create-booking.step.2':
-    'Διαλέξτε τον Τύπο Κράτησης από τη λίστα στο πάνω μέρος της φόρμας, δίπλα στους Ταξιδιώτες. Το Κατάλυμα, το Εστιατόριο, η Εκδήλωση, η Περιήγηση, η Στάθμευση και το Άλλο είναι τα έξι που φτιάχνει αυτή η καρτέλα, και η φόρμα αλλάζει μαζί με την επιλογή: μόνο το Κατάλυμα ανταλλάσσει τις ημερομηνίες του με ένα εύρος ημερών.',
+    'Κάντε κλικ στην ετικέτα τύπου κάτω από τον τίτλο, στην κεφαλίδα της φόρμας, και διαλέξτε τον Τύπο Κράτησης. Το Κατάλυμα, το Εστιατόριο, η Εκδήλωση, η Περιήγηση, η Στάθμευση και το Άλλο είναι τα έξι που φτιάχνει αυτή η καρτέλα, και η φόρμα αλλάζει μαζί με την επιλογή: μόνο το Κατάλυμα ανταλλάσσει τις ημερομηνίες του με ένα εύρος ημερών.',
   'help.guide.create-booking.step.3':
     'Γράψτε τον Τίτλο. Είναι το μοναδικό πεδίο στο οποίο επιμένει η φόρμα, και η Προσθήκη μένει νεκρή όσο δεν έχει κάτι μέσα.',
   'help.guide.create-booking.step.4':
     'Ορίστε την Ημερομηνία και την Ώρα έναρξης, καθώς και την Ημερομηνία λήξης και την Ώρα λήξης αν η κράτηση έχει τέλος. Τα ημερολόγια προσφέρουν μόνο ημέρες μέσα στο ταξίδι, και ένα τέλος που δεν είναι μετά την έναρξη το λέει με κόκκινο και μπλοκάρει την Προσθήκη.',
   'help.guide.create-booking.step.5':
-    'Βάλτε τον Κωδικό Κράτησης από την επιβεβαίωση και ορίστε την Κατάσταση. Το Εκκρεμές ή το Επιβεβαιωμένο αποφασίζει σε ποια από τις δύο ενότητες θα προσγειωθεί η κάρτα.',
+    'Βάλτε τον Κωδικό Κράτησης από την επιβεβαίωση. Η ετικέτα κατάστασης δίπλα στον τύπο γράφει Εκκρεμές· ένα κλικ την αλλάζει σε Επιβεβαιωμένο και πίσω, και αυτό αποφασίζει σε ποια από τις δύο ενότητες θα προσγειωθεί η κάρτα.',
   'help.guide.create-booking.step.6': 'Κάντε κλικ στην Προσθήκη.',
   'help.guide.create-booking.result':
     'Η κράτηση είναι μια κάρτα στην ενότητά της με την ετικέτα τύπου της, τις ημερομηνίες της και τον κωδικό της, και όλοι οι άλλοι στο ταξίδι τη βλέπουν να εμφανίζεται.',
@@ -3367,7 +3368,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Σημειώστε τους ταξιδιώτες που καλύπτει μια κράτηση, και μετά δείτε μόνο τις δικές τους.',
   'help.guide.booking-travelers.step.1':
-    'Ανοίξτε την κράτηση με το μολύβι. Οι Ταξιδιώτες βρίσκονται στο πάνω μέρος της φόρμας, δίπλα στον Τύπο Κράτησης, και γράφουν Ανάθεση ταξιδιωτών όσο δεν υπάρχει κανείς στην κράτηση.',
+    'Ανοίξτε την κράτηση με το μολύβι. Οι Ταξιδιώτες βρίσκονται δίπλα στον Κωδικό Κράτησης, και γράφουν Ανάθεση ταξιδιωτών όσο δεν υπάρχει κανείς στην κράτηση.',
   'help.guide.booking-travelers.step.2':
     'Κάντε κλικ εκεί και διαλέξτε τα άτομα για τα οποία είναι αυτή η κράτηση· οι επώνυμοι επισκέπτες είναι κι αυτοί στη λίστα. Όποιος επιλεγεί παίρνει ένα σημάδι επιλογής και το άβατάρ του μπαίνει στο πεδίο. Κάντε ξανά κλικ στο όνομα για να τον αφαιρέσετε.',
   'help.guide.booking-travelers.step.3': 'Κάντε κλικ στην Ενημέρωση.',
@@ -3465,7 +3466,7 @@ const help: TranslationStrings = {
     'Κάντε κλικ στο μολύβι στην κεφαλίδα της κάρτας. Η Επεξεργασία Κράτησης ανοίγει με όλα όσα ξέρει η κράτηση.',
   'help.guide.edit-booking.step.2':
     'Αλλάξτε ό,τι χρειάζεται αλλαγή, εδώ τον Κωδικό Κράτησης που έστειλε επιτέλους ο πάροχος.',
-  'help.guide.edit-booking.step.3': 'Βάλτε την Κατάσταση σε Επιβεβαιωμένο.',
+  'help.guide.edit-booking.step.3': 'Κάντε κλικ στην ετικέτα Εκκρεμές στην κεφαλίδα της φόρμας. Γίνεται Επιβεβαιωμένο.',
   'help.guide.edit-booking.step.4': 'Κάντε κλικ στην Ενημέρωση.',
   'help.guide.edit-booking.result':
     'Η κάρτα μετακομίζει: μια επιβεβαιωμένη κράτηση στέκεται στην ενότητα Επιβεβαιωμένο πίσω από μια πράσινη κουκκίδα, και όλοι στο ταξίδι τη βλέπουν να μετακομίζει.',
@@ -3761,19 +3762,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Διαβάστε τη σύνδεση στάση προς στάση, μετονομάστε την, ή αναζητήστε ξανά τη διαδρομή.',
   'help.guide.change-transit-route.step.1':
-    'Στην καρτέλα Μεταφορές οι σχεδιασμένες συνδέσεις κάθονται κάτω από τις Αυτόματες δημόσιες συγκοινωνίες. Κάντε κλικ στην κάρτα.',
+    'Στην καρτέλα Μεταφορές οι σχεδιασμένες συνδέσεις κάθονται κάτω από τις Αυτόματες δημόσιες συγκοινωνίες. Κάντε κλικ στην κάρτα· η σύνδεση ανοίγει ως κράτηση.',
   'help.guide.change-transit-route.step.2':
     'Η Διάρκεια, οι Μετεπιβιβάσεις και το Περπάτημα κάθονται στην κορυφή. Το Δρομολόγιο από κάτω περπατά τη σύνδεση στάση προς στάση, με τις αποβάθρες και τα περπατήματα ανάμεσα στις γραμμές.',
   'help.guide.change-transit-route.step.3':
-    'Η Αλλαγή διαδρομής τρέχει ξανά την αναζήτηση, ήδη συμπληρωμένη με τα δύο άκρα αυτής της σύνδεσης και την ημέρα της.',
+    'Η Αλλαγή διαδρομής στο κάτω μέρος της κράτησης τρέχει ξανά την αναζήτηση, ήδη συμπληρωμένη με τα δύο άκρα αυτής της σύνδεσης και την ημέρα της.',
   'help.guide.change-transit-route.step.4':
-    'Διαλέξτε άλλη σύνδεση και κάντε κλικ στην Προσθήκη στην ημέρα· παίρνει τη θέση της παλιάς. Η Επεξεργασία λεπτομερειών, δίπλα στην Αλλαγή διαδρομής, ανοίγει στη θέση της τη συνηθισμένη φόρμα μεταφοράς, όπου ζουν ο Κωδικός Κράτησης, η Κατάσταση, οι ταξιδιώτες και τα αρχεία.',
+    'Διαλέξτε άλλη σύνδεση και κάντε κλικ στην Προσθήκη στην ημέρα· παίρνει τη θέση της παλιάς. Η Επεξεργασία, στην άλλη άκρη της ίδιας μπάρας, ανοίγει στη θέση της τη συνηθισμένη φόρμα μεταφοράς, όπου ζουν ο Κωδικός Κράτησης, η Κατάσταση, οι ταξιδιώτες, οι σημειώσεις και τα αρχεία.',
   'help.guide.change-transit-route.result':
     'Η προβολή Διαδρομή με δημόσιες συγκοινωνίες κουβαλά το νέο Δρομολόγιο, και η κάρτα της στην καρτέλα Μεταφορές δείχνει τις νέες γραμμές και ώρες.',
   'help.guide.change-transit-route.tip.1':
-    'Ο τίτλος στην προβολή Διαδρομή με δημόσιες συγκοινωνίες είναι μόνο κείμενο: το μολύβι δίπλα του τον μετονομάζει χωρίς να αγγίξει τη διαδρομή. Οι Σημειώσεις από κάτω δέχονται markdown και έχουν καρτέλα Επεξεργασία και Προεπισκόπηση.',
+    'Ο τίτλος στην κεφαλίδα της κράτησης μετονομάζει τη σύνδεση χωρίς να αγγίξει τη διαδρομή. Οι σημειώσεις της γράφονται στη φόρμα μεταφοράς, πίσω από την Επεξεργασία.',
   'help.guide.change-transit-route.tip.2':
-    'Η Διαγραφή στο κάτω μέρος της προβολής Διαδρομή με δημόσιες συγκοινωνίες βγάζει τη σύνδεση από το ταξίδι· η ημέρα κρατά τις στάσεις της.',
+    'Η Διαγραφή στο κάτω μέρος της κράτησης βγάζει τη σύνδεση από το ταξίδι· η ημέρα κρατά τις στάσεις της.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Αλλάξτε πώς διανύεται ένα σκέλος',
   'help.guide.leg-travel-mode.goal':
@@ -3799,17 +3800,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Διορθώστε μια ώρα, μια αποβάθρα ή έναν κωδικό κράτησης, ή βγάλτε τη μετακίνηση από το ταξίδι.',
   'help.guide.edit-transport.step.1':
-    'Στο πλάνο ημέρας μια μεταφορά είναι μια χρωματιστή σειρά ανάμεσα στις στάσεις. Κάντε κλικ πάνω της.',
+    'Στο πλάνο ημέρας μια μεταφορά είναι μια χρωματιστή σειρά ανάμεσα στις στάσεις. Κάντε κλικ πάνω της· η κράτησή της ανοίγει με τις ώρες, τη διαδρομή και τον Κωδικό Κράτησης.',
   'help.guide.edit-transport.step.2':
-    'Η φόρμα είναι αυτή που τη δημιούργησε, με την Επεξεργασία μεταφοράς στη γραμμή τίτλου της. Όλα αλλάζουν: ο τύπος, η διαδρομή, οι ημέρες και οι ώρες, ο Κωδικός Κράτησης, η Κατάσταση.',
+    'Η Επεξεργασία στο κάτω μέρος της κράτησης ανοίγει τη φόρμα που τη δημιούργησε, με την Επεξεργασία μεταφοράς στη γραμμή τίτλου της. Όλα αλλάζουν: ο τύπος, η διαδρομή, οι ημέρες και οι ώρες, ο Κωδικός Κράτησης, η Κατάσταση.',
   'help.guide.edit-transport.step.3':
     'Η διαδρομή μιας πτήσης είναι αλυσίδα αεροδρομίων, ενός τρένου αλυσίδα σταθμών. Η Προσθήκη στάσης βάζει άλλη μία ανάμεσα, και κάθε σκέλος κρατά τις δικές του ώρες και τον δικό του αριθμό πτήσης ή τρένου.',
   'help.guide.edit-transport.step.4':
-    'Κάντε κλικ στην Ενημέρωση. Για να αφαιρέσετε τελείως τη μεταφορά, χρησιμοποιήστε τον κάδο στην κάρτα της στην καρτέλα Μεταφορές και επιβεβαιώστε.',
+    'Κάντε κλικ στην Ενημέρωση. Για να αφαιρέσετε τελείως τη μεταφορά, χρησιμοποιήστε τη Διαγραφή στο κάτω μέρος της κράτησής της, ή τον κάδο στην κάρτα της στην καρτέλα Μεταφορές, και επιβεβαιώστε.',
   'help.guide.edit-transport.result':
     'Η αλλαγή φαίνεται παντού όπου εμφανίζεται η μεταφορά: στην καρτέλα Μεταφορές, στην ημέρα που γίνεται, και στη γραμμή της στον χάρτη.',
   'help.guide.edit-transport.tip.1':
-    'Η ίδια φόρμα ανοίγει και από τις δύο πλευρές, από το μολύβι στην κάρτα στην καρτέλα Μεταφορές και από τη σειρά της ίδιας της μεταφοράς στο πλάνο ημέρας. Η σχεδιασμένη σύνδεση με μέσα μαζικής μεταφοράς είναι η εξαίρεση: η σειρά της ανοίγει την προβολή Διαδρομή με δημόσιες συγκοινωνίες, και η Επεξεργασία λεπτομερειών εκεί οδηγεί σε αυτή τη φόρμα.',
+    'Η ίδια φόρμα ανοίγει και από τις δύο πλευρές: μέσω της Επεξεργασίας στην κράτηση που ανοίγει μια σειρά του πλάνου ημέρας, και μέσω του μολυβιού στην κάρτα στην καρτέλα Μεταφορές. Μια σχεδιασμένη σύνδεση με μέσα μαζικής μεταφοράς ανοίγει κι αυτή ως κράτηση· εκεί η Αλλαγή διαδρομής αναζητά ξανά, και η Επεξεργασία οδηγεί σε αυτή τη φόρμα.',
   'help.guide.edit-transport.tip.2':
     'Η μετακίνηση μιας μεταφοράς σε άλλη ημέρα δεν χρειάζεται καθόλου τη φόρμα: σύρετε τη σειρά της από τη μία κάρτα ημέρας στην επόμενη.',
   // transport-on-map
diff --git a/shared/src/i18n/gr/places.ts b/shared/src/i18n/gr/places.ts
index 88cb65dcc..db6ce7432 100644
--- a/shared/src/i18n/gr/places.ts
+++ b/shared/src/i18n/gr/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Επιλέξτε τουλάχιστον έναν τύπο για εισαγωγή.',
   'places.selectionCount': '{count} επιλεγμένα',
   'places.deleteSelected': 'Διαγραφή επιλεγμένων',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Αλλαγή κατηγορίας',
+  'places.categoryChanged': 'Ενημερώθηκαν {count} τοποθεσίες',
   'places.kmlKmzImported': '{count} μέρη εισήχθησαν από KMZ/KML',
   'places.urlResolved': 'Το μέρος εισήχθη από URL',
   'places.importList': 'Εισαγωγή Λίστας',
@@ -37,7 +37,8 @@ const places: TranslationStrings = {
   'places.importGoogleList': 'Λίστα Google',
   'places.importNaverList': 'Λίστα Naver',
   'places.googleListHint': 'Επικολλήστε έναν κοινοποιημένο σύνδεσμο λίστας Google Maps για να εισάγετε όλα τα μέρη.',
-  'places.googleDirHint': 'Λειτουργεί και ένας σύνδεσμος διαδρομής: οι στάσεις του γίνονται τοποθεσίες, με τη σειρά οδήγησης.',
+  'places.googleDirHint':
+    'Λειτουργεί και ένας σύνδεσμος διαδρομής: οι στάσεις του γίνονται τοποθεσίες, με τη σειρά οδήγησης.',
   'places.googleListImported': '{count} μέρη εισήχθησαν από "{list}"',
   'places.googleListError': 'Αποτυχία εισαγωγής λίστας Google Maps',
   'places.naverListHint': 'Επικολλήστε έναν κοινοποιημένο σύνδεσμο λίστας Naver Maps για να εισάγετε όλα τα μέρη.',
@@ -52,6 +53,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Εμφάνιση όλου του ταξιδιού',
   'places.filterTracks': 'Ίχνη',
   'places.filterByRating': 'Φιλτράρισμα κατά βαθμολογία',
+  'places.filterShow': 'Εμφάνιση',
+  'places.clearSearch': 'Καθαρισμός αναζήτησης',
   'places.yourRating': 'Η βαθμολογία σου',
   'places.notRated': 'Χωρίς βαθμολογία ακόμη',
   'places.search': 'Αναζήτηση μερών...',
@@ -71,6 +74,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Οδός, Πόλη, Χώρα',
   'places.formLat': 'Γεωγραφικό Πλάτος (π.χ. 48.8566)',
   'places.formLng': 'Γεωγραφικό Μήκος (π.χ. 2.3522)',
+  'places.formLatLabel': 'Γεωγραφικό Πλάτος',
+  'places.formLngLabel': 'Γεωγραφικό Μήκος',
   'places.formCategory': 'Κατηγορία',
   'places.noCategory': 'Χωρίς Κατηγορία',
   'places.newCategory': 'Νέα κατηγορία',
diff --git a/shared/src/i18n/gr/reservations.ts b/shared/src/i18n/gr/reservations.ts
index e71270785..1a8ebca99 100644
--- a/shared/src/i18n/gr/reservations.ts
+++ b/shared/src/i18n/gr/reservations.ts
@@ -66,6 +66,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Ποδήλατο',
   'reservations.type.taxi': 'Ταξί',
   'reservations.type.transit': 'Μέσα μαζικής μεταφοράς',
+  'reservations.typeShort.transit': 'ΜΜΜ',
   'reservations.type.transport_other': 'Άλλο',
   'reservations.confirm.delete': 'Είστε σίγουροι ότι θέλετε να διαγράψετε την κράτηση "{name}";',
   'reservations.confirm.deleteTitle': 'Διαγραφή κράτησης;',
@@ -81,6 +82,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Τοποθεσία / Διεύθυνση',
   'reservations.locationPlaceholder': 'Διεύθυνση, Αεροδρόμιο, Ξενοδοχείο...',
   'reservations.confirmationCode': 'Κωδικός Κράτησης',
+  'reservations.routeLabel': 'Διαδρομή',
+  'reservations.segmentCodes': 'Κωδικοί ανά σκέλος',
   'reservations.confirmationPlaceholder': 'π.χ. ABC12345',
   'reservations.day': 'Ημέρα',
   'reservations.noDay': 'Καμία Ημέρα',
@@ -95,6 +98,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Αποτυχία διαγραφής',
   'reservations.confirm.remove': 'Αφαίρεση κράτησης για "{name}";',
   'reservations.linkAssignment': 'Σύνδεση με ανάθεση ημέρας',
+  'reservations.linkedTo': 'Συνδέεται με',
   'reservations.pickAssignment': 'Επιλέξτε μια ανάθεση από το πλάνο σας...',
   'reservations.noAssignment': 'Χωρίς σύνδεση (ανεξάρτητη)',
   'reservations.price': 'Τιμή',
@@ -136,9 +140,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'Βρέθηκαν {count} κράτηση/κρατήσεις',
   'reservations.import.previewEmpty': 'Δεν ήταν δυνατή η εξαγωγή κρατήσεων από τα μεταφορτωμένα αρχεία.',
   'reservations.import.removeItem': 'Αφαίρεση',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Έλεγχος',
+  'reservations.import.tryAi': 'Δοκιμή ανάλυσης με AI',
+  'reservations.import.aiParsing': 'Ανάλυση με AI…',
   'reservations.import.confirm': 'Εισαγωγή {count} κράτησης/κρατήσεων',
   'reservations.import.back': 'Πίσω',
   'reservations.import.success': '{count} κράτηση/κρατήσεις εισήχθησαν',
@@ -183,5 +187,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Ταξιδιώτες',
   'reservations.travelers.assign': 'Ανάθεση ταξιδιωτών',
   'reservations.travelers.none': 'Δεν υπάρχουν ακόμη μέλη στο ταξίδι.',
+  'reservations.status.switchTo': 'Ορισμός σε {status}',
+  'reservations.view.label': 'Προβολή',
+  'reservations.view.cards': 'Κάρτες',
+  'reservations.view.list': 'Λίστα',
+  'reservations.view.timeline': 'Χρονολόγιο',
+  'reservations.filter': 'Φιλτράρισμα',
+  'reservations.searchPlaceholder': 'Αναζήτηση',
+  'reservations.results': '{shown} από {total}',
+  'reservations.resetFilters': 'Επαναφορά φίλτρων',
+  'reservations.noMatches': 'Τίποτα δεν ταιριάζει με αυτά τα φίλτρα',
+  'reservations.viewOptions': 'Επιλογές προβολής',
+  'reservations.resetView': 'Επαναφορά προβολής',
+  'reservations.group.label': 'Ομαδοποίηση κατά',
+  'reservations.group.status': 'Κατάσταση',
+  'reservations.group.day': 'Ημέρα',
+  'reservations.group.type': 'Τύπος',
+  'reservations.group.none': 'Χωρίς ομαδοποίηση',
+  'reservations.transitApart': 'Μέσα μαζικής μεταφοράς σε δική τους ενότητα',
+  'reservations.group.before': 'Πριν από το ταξίδι',
+  'reservations.group.after': 'Μετά το ταξίδι',
+  'reservations.group.undated': 'Χωρίς ημερομηνία',
+  'reservations.sort.label': 'Ταξινόμηση κατά',
+  'reservations.sort.date': 'Ημερομηνία',
+  'reservations.sort.title': 'Τίτλος',
+  'reservations.sort.type': 'Τύπος',
+  'reservations.sort.status': 'Κατάσταση',
+  'reservations.sort.earlyFirst': 'Πρώτα οι νωρίτερες',
+  'reservations.sort.lateFirst': 'Πρώτα οι αργότερες',
+  'reservations.sort.aToZ': 'Α έως Ω',
+  'reservations.sort.zToA': 'Ω έως Α',
+  'reservations.timeline.dayCount': '{count} ημέρες',
+  'reservations.timeline.zoom': 'Ζουμ',
+  'reservations.timeline.trip': 'Ταξίδι',
+  'reservations.timeline.day': 'Ημέρα',
+  'reservations.timeline.prevDay': 'Προηγούμενη ημέρα',
+  'reservations.timeline.nextDay': 'Επόμενη ημέρα',
+  'reservations.timeline.openDay': 'Άνοιγμα {day} ανά ώρα',
+  'reservations.timeline.nothingThisDay': 'Τίποτα αυτή την ημέρα.',
+  'reservations.timeline.today': 'Σήμερα',
+  'reservations.timeline.now': 'τώρα',
+  'reservations.timeline.byType': 'Μία λωρίδα ανά τύπο',
+  'reservations.timeline.context': 'Εμφάνιση της άλλης καρτέλας',
+  'reservations.timeline.contextBookings': 'Κρατήσεις',
+  'reservations.timeline.contextTransports': 'Μεταφορές',
+  'reservations.timeline.noneDated': 'Καμία δεν έχει ακόμη ημερομηνία.',
+  'reservations.undated': 'Χωρίς ημερομηνία',
+  'reservations.nights': 'Νύχτες',
+  'reservations.start': 'Έναρξη',
+  'reservations.end': 'Λήξη',
+  'reservations.rename': 'Μετονομασία',
+  'reservations.copyCode': 'Αντιγραφή κωδικού κράτησης',
+  'reservations.copyFailed': 'Η αντιγραφή απέτυχε',
+  'reservations.showInFiles': 'Εμφάνιση στα αρχεία',
 };
 export default reservations;
diff --git a/shared/src/i18n/gr/transport.ts b/shared/src/i18n/gr/transport.ts
index 5f21e2081..bcb3c4976 100644
--- a/shared/src/i18n/gr/transport.ts
+++ b/shared/src/i18n/gr/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Επεξεργασία μεταφοράς',
   'transport.title': 'Μεταφορές',
   'transport.addManual': 'Μεταφορά',
+  'transport.empty': 'Δεν υπάρχουν μεταφορές ακόμη',
 };
 export default transport;
diff --git a/shared/src/i18n/hu/budget.ts b/shared/src/i18n/hu/budget.ts
index 51b608d07..707a0bf86 100644
--- a/shared/src/i18n/hu/budget.ts
+++ b/shared/src/i18n/hu/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Csak az összegben — még nincs rendezve',
   'costs.tapToInclude': 'Koppintson a hozzáadáshoz',
   'costs.amount': 'Összeg',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Felosztás',
+  'costs.splitEqually': 'Egyenlően',
+  'costs.splitCustom': 'Egyéni',
+  'costs.splitTicket': 'Blokk',
+  'costs.perPerson': '{amount} személyenként',
+  'costs.payersHint': 'Jelöld be, ki fizetett, és írd be, mennyit adott bele mindegyikük.',
+  'costs.splitHint.equally': 'Minden bejelölt ugyanakkora részt fizet.',
+  'costs.splitHint.custom': 'Írd be mindenki részét; együtt ki kell adniuk a teljes összeget.',
+  'costs.splitHint.ticket': 'Sorold fel, mi szerepelt a nyugtán, és minden tételnél jelöld be, kié volt.',
   'costs.filter.allCategories': 'Összes kategória',
   'costs.filter.allDays': 'Összes nap',
   'costs.expensesCount': '{count} kiadás',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Nyugták',
   'costs.receiptsTitle': 'Nyugták és számlák',
   'costs.attachReceipt': 'Nyugta / számla csatolása',
+  'costs.attach': 'Csatolás',
   'costs.scan.button': 'Nyugta beolvasása',
   'costs.scan.reading': 'Nyugta olvasása…',
   'costs.scan.review': 'Kiadás ellenőrzése',
   'costs.scan.nothingRead': 'Erről a fotóról nem sikerült nyugtát olvasni.',
   'costs.scan.failed': 'Nem sikerült elindítani a nyugta olvasását.',
   'costs.scan.title': 'Nyugta beolvasása',
-  'costs.scan.accepted': 'Egyetlen nyugta fotója (JPG, PNG vagy WEBP, legfeljebb 10 MB). Az MI-modell a háttérben olvassa be, majd mentés előtt ellenőrzöd a kiadást.',
+  'costs.scan.accepted':
+    'Egyetlen nyugta fotója (JPG, PNG vagy WEBP, legfeljebb 10 MB). Az MI-modell a háttérben olvassa be, majd mentés előtt ellenőrzöd a kiadást.',
   'costs.scan.dropHere': 'Húzd ide a nyugta fotóját, vagy kattints egy kiválasztásához vagy elkészítéséhez',
   'costs.scan.dropActive': 'Engedd el a fotót a beolvasáshoz',
   'costs.scan.start': 'Beolvasás',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Nincsenek csatolt nyugták',
   'costs.deleteReceipt': 'Nyugta eltávolítása',
   'costs.viewReceipt': 'Nyugta megtekintése',
-  'costs.receiptLeftBehind': 'A mentés nem sikerült, és {count} feltöltött blokk még ott van. Törölje őket a Fájlok fülön.',
+  'costs.receiptLeftBehind':
+    'A mentés nem sikerült, és {count} feltöltött blokk még ott van. Törölje őket a Fájlok fülön.',
 };
 export default budget;
diff --git a/shared/src/i18n/hu/dayplan.ts b/shared/src/i18n/hu/dayplan.ts
index 6ead5a9f0..c4b0752db 100644
--- a/shared/src/i18n/hu/dayplan.ts
+++ b/shared/src/i18n/hu/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Minden helyszín kiosztva',
   'dayplan.mobile.noMatch': 'Nincs találat',
   'dayplan.mobile.createNew': 'Új helyszín létrehozása',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Minden nap kibontása', // en-fallback
+  'dayplan.collapseAll': 'Minden nap összecsukása', // en-fallback
   'dayplan.reorderDays': 'Napok átrendezése',
   'dayplan.reorderTitle': 'Napok átrendezése',
   'dayplan.reorderHint': 'A nap helyei, jegyzetei és foglalásai együtt mozognak vele.',
diff --git a/shared/src/i18n/hu/help.ts b/shared/src/i18n/hu/help.ts
index 1b360ecd0..d0d0329a0 100644
--- a/shared/src/i18n/hu/help.ts
+++ b/shared/src/i18n/hu/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'hu' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Súgó és dokumentáció',
+  'help.search': 'Keresés a dokumentációban…',
+  'help.contents': 'Tartalom',
+  'help.noResults': 'Nincs találat.',
+  'help.errorTitle': 'Az oldal nem tölthető be',
+  'help.errorBody': 'A súgó tartalma a TREK wikiből érkezik. Ellenőrizd a kapcsolatot, és próbáld újra.',
 
   // center
   'help.center.button': 'Súgó ehhez a képernyőhöz',
@@ -1045,7 +1045,7 @@ const help: TranslationStrings = {
     'Travel & map: foglalási útvonalak mindig a térképen, a Helyek felfedezése pirula, útvonal-optimalizálás a szállástól, elrejtett foglalási kódok és címkézett foglalási útvonalak.',
   'help.ctx.settings-display.bullet.3':
     'Indítás: a TREK az irányítópulton vagy az aktív utazáson nyíljon-e meg, és egy utazás melyik füle jöjjön fel először.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Megjelenés',
   'help.ctx.settings-appearance.summary':
     'Hogyan néz ki a TREK ezen a fiókon: világos vagy sötét, a kiemelőszín, üveg és mozgás, szövegméret, és mely widgeteket mutatja az irányítópult. Minden élőben érvényes, minden eszközön, ahol bejelentkezel.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2320,9 +2320,9 @@ const help: TranslationStrings = {
     'Nyisd meg a megállót, amelyikhez a foglalás tartozik. A kártya egy sávot mutat a Megerősítve vagy Függőben szóval és a foglalás nevével.',
   'help.guide.place-booking.step.2':
     'A sáv viszi a Dátumot, az Időpontot és a Foglalási kódot, meg bármilyen jegyzetet, ami a foglaláson van.',
-  'help.guide.place-booking.step.3': 'Kattints a sávra. Megnyílik rajta a foglalás saját űrlapja.',
+  'help.guide.place-booking.step.3': 'Kattints a sávra. A foglalás a térkép fölött nyílik meg.',
   'help.guide.place-booking.step.4':
-    'Az Összekapcsolás napi tervvel az, ami egy foglalást egy megállóhoz tűz, és itt már ezt nevezi meg. Zárd be újra az űrlapot.',
+    'A foglalás alján lévő Szerkesztés megnyitja a saját űrlapját. Ott az Összekapcsolás napi tervvel az, ami egy foglalást egy megállóhoz tűz, és itt már ezt nevezi meg. Zárd be újra az űrlapot.',
   'help.guide.place-booking.step.5':
     'Egy megállóhoz tartozó új foglalás a napok oszlopában kezdődik: vidd a mutatót a megálló fölé, és kattints a végén lévő + jelre. Az űrlap Új foglalás néven nyílik meg, már hozzákapcsolva.',
   'help.guide.place-booking.result':
@@ -2681,7 +2681,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'A szín megmondja, hol tart egy foglalás: a zöld sor meg van erősítve, a borostyánsárga még függőben van. A szállodák nincsenek ebben a listában, nekik lent saját blokkjuk van.',
   'help.guide.day-bookings.step.4':
-    'A lista csak kiolvassa a foglalásokat. Foglalást a Foglalások fülön hozol létre és módosítasz.',
+    'Kattints egy sorra, és megnyílik a foglalás. Az alján lévő Szerkesztés módosítja; új foglalást a Foglalások fülön hozol létre.',
   'help.guide.day-bookings.result':
     'Minden, aminek a dátuma a napra esik, és minden, ami a megállói valamelyikén lóg, ebben az egy listában van.',
   'help.guide.day-bookings.tip.1':
@@ -3231,13 +3231,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Kattints a fül jobb felső sarkában a Kézi foglalás gombra. Megnyílik az Új foglalás.',
   'help.guide.create-booking.step.2':
-    'Válaszd ki a Foglalás típusa értéket az űrlap tetején lévő listából, az Utasok mellett. A Szálloda, az Étterem, az Esemény, a Túra, a Parkolás és az Egyéb az a hat, amit ez a fül készít, és az űrlap a választással együtt változik: csak a Szálloda cseréli a dátumait egy napokból álló tartományra.',
+    'Kattints az űrlap fejlécében a cím alatti típuscímkére, és válaszd ki a Foglalás típusa értéket. A Szálloda, az Étterem, az Esemény, a Túra, a Parkolás és az Egyéb az a hat, amit ez a fül készít, és az űrlap a választással együtt változik: csak a Szálloda cseréli a dátumait egy napokból álló tartományra.',
   'help.guide.create-booking.step.3':
     'Írd be a Cím mezőt. Ez az egyetlen mező, amihez az űrlap ragaszkodik, és a Hozzáadás halott marad, amíg nincs benne valami.',
   'help.guide.create-booking.step.4':
     'Állítsd be a Dátum és a Kezdési idő mezőt, és a Befejezés dátuma meg a Befejezési idő mezőt is, ha a foglalásnak van vége. A naptárak csak az utazáson belüli napokat kínálják, és egy olyan vég, ami nincs a kezdés után, ezt pirossal megmondja, és letiltja a Hozzáadás gombot.',
   'help.guide.create-booking.step.5':
-    'Vidd be a visszaigazolásból a Foglalási kódot, és állítsd be az Állapot mezőt. A Függőben vagy a Megerősítve dönti el, a két szakasz közül melyikbe kerül a kártya.',
+    'Vidd be a visszaigazolásból a Foglalási kódot. A típus melletti állapotcímkén Függőben áll; egy kattintás Megerősítve értékre állítja és vissza, és ez dönti el, a két szakasz közül melyikbe kerül a kártya.',
   'help.guide.create-booking.step.6': 'Kattints a Hozzáadás gombra.',
   'help.guide.create-booking.result':
     'A foglalás egy kártya a saját szakaszában, a típuscímkéjével, a dátumaival és a kódjával, és az utazásban mindenki más látja megjelenni.',
@@ -3289,7 +3289,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Jelöld meg az utasokat, akikre a foglalás vonatkozik, és utána csak az övéiket nézd.',
   'help.guide.booking-travelers.step.1':
-    'Nyisd meg a foglalást a ceruzával. Az Utasok az űrlap tetején áll, a Foglalás típusa mellett, és amíg senki sincs a foglaláson, az Utasok hozzárendelése felirat látszik rajta.',
+    'Nyisd meg a foglalást a ceruzával. Az Utasok a Foglalási kód mellett áll, és amíg senki sincs a foglaláson, az Utasok hozzárendelése felirat látszik rajta.',
   'help.guide.booking-travelers.step.2':
     'Kattints rá, és válaszd ki azokat, akiknek ez a foglalás szól; a megnevezett vendégek is ott vannak a listában. A kiválasztott pipát kap, és az avatarja megjelenik a mezőben. Kattints újra a névre, és leveszed.',
   'help.guide.booking-travelers.step.3': 'Kattints a Frissítés gombra.',
@@ -3388,7 +3388,7 @@ const help: TranslationStrings = {
     'Kattints a kártya fejlécében a ceruzára. Megnyílik a Foglalás szerkesztése mindennel, amit a foglalás tud.',
   'help.guide.edit-booking.step.2':
     'Változtasd meg, amit meg kell változtatni, itt a Foglalási kódot, amit a szolgáltató végre elküldött.',
-  'help.guide.edit-booking.step.3': 'Tedd az Állapot mezőt Megerősítve értékre.',
+  'help.guide.edit-booking.step.3': 'Kattints az űrlap fejlécében a Függőben címkére. Megerősítve lesz belőle.',
   'help.guide.edit-booking.step.4': 'Kattints a Frissítés gombra.',
   'help.guide.edit-booking.result':
     'A kártya átköltözik: egy megerősített foglalás a Megerősítve szakaszban áll egy zöld pont mögött, és az utazásban mindenki látja átköltözni.',
@@ -3683,19 +3683,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Olvasd a kapcsolatot megállóról megállóra, nevezd át, vagy keresd ki újra az útvonalat.',
   'help.guide.change-transit-route.step.1':
-    'A Közlekedés fülön a tervezett kapcsolatok az Automatikus tömegközlekedés alatt ülnek. Kattints a kártyára.',
+    'A Közlekedés fülön a tervezett kapcsolatok az Automatikus tömegközlekedés alatt ülnek. Kattints a kártyára; a kapcsolat foglalásként nyílik meg.',
   'help.guide.change-transit-route.step.2':
     'Az Időtartam, az Átszállások és a Gyaloglás felül ül. Alattuk az Útiterv megállóról megállóra végigjárja a kapcsolatot, a vágányokkal és a vonalak közötti sétákkal.',
   'help.guide.change-transit-route.step.3':
-    'Az Útvonal módosítása újra lefuttatja a keresést, már kitöltve ennek a kapcsolatnak a két végével és a napjával.',
+    'A foglalás alján lévő Útvonal módosítása újra lefuttatja a keresést, már kitöltve ennek a kapcsolatnak a két végével és a napjával.',
   'help.guide.change-transit-route.step.4':
-    'Válassz másik kapcsolatot, és kattints a Hozzáadás a naphoz gombra; átveszi a régi helyét. Az Útvonal módosítása melletti Részletek szerkesztése helyette a szokásos közlekedési űrlapot nyitja meg, ahol a Foglalási kód, az Állapot, az utasok és a fájlok élnek.',
+    'Válassz másik kapcsolatot, és kattints a Hozzáadás a naphoz gombra; átveszi a régi helyét. Ugyanennek a sávnak a másik végén a Szerkesztés helyette a szokásos közlekedési űrlapot nyitja meg, ahol a Foglalási kód, az Állapot, az utasok, a jegyzetek és a fájlok élnek.',
   'help.guide.change-transit-route.result':
     'A Tömegközlekedési útvonal nézet az új Útitervet viszi, a kártyája pedig a Közlekedés fülön az új vonalakat és időpontokat mutatja.',
   'help.guide.change-transit-route.tip.1':
-    'A Tömegközlekedési útvonal nézet címe csak szöveg: a mellette lévő ceruza átnevezi anélkül, hogy az útvonalhoz nyúlna. Az alatta lévő Jegyzetek markdownt fogad, és van egy Szerkesztés és egy Előnézet füle.',
+    'A foglalás fejlécében lévő cím átnevezi a kapcsolatot anélkül, hogy az útvonalhoz nyúlna. A jegyzeteit a Szerkesztés mögötti közlekedési űrlapon írod.',
   'help.guide.change-transit-route.tip.2':
-    'A Tömegközlekedési útvonal nézet alján lévő Törlés kiveszi a kapcsolatot az utazásból; a nap megtartja a megállóit.',
+    'A foglalás alján lévő Törlés kiveszi a kapcsolatot az utazásból; a nap megtartja a megállóit.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Módosítsd, hogyan teszel meg egy szakaszt',
   'help.guide.leg-travel-mode.goal':
@@ -3720,17 +3720,18 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.title': 'Módosíts vagy törölj egy közlekedést',
   'help.guide.edit-transport.goal':
     'Javíts egy időpontot, egy vágányt vagy egy foglalási kódot, vagy vedd ki az utat az utazásból.',
-  'help.guide.edit-transport.step.1': 'A napi tervben egy közlekedés színes sor a megállók között. Kattints rá.',
+  'help.guide.edit-transport.step.1':
+    'A napi tervben egy közlekedés színes sor a megállók között. Kattints rá; megnyílik a foglalása az időpontokkal, az útvonallal és a Foglalási kóddal.',
   'help.guide.edit-transport.step.2':
-    'Az űrlap ugyanaz, amelyik létrehozta, a címsorában a Közlekedés szerkesztése felirattal. Minden módosítható: a típus, az útvonal, a napok és időpontok, a Foglalási kód, az Állapot.',
+    'A foglalás alján lévő Szerkesztés azt az űrlapot nyitja meg, amelyik létrehozta, a címsorában a Közlekedés szerkesztése felirattal. Minden módosítható: a típus, az útvonal, a napok és időpontok, a Foglalási kód, az Állapot.',
   'help.guide.edit-transport.step.3':
     'Egy repülő útvonala repterek lánca, egy vonaté állomások lánca. A Megálló hozzáadása közéjük tesz még egyet, és minden szakasz megtartja a saját időpontjait és a saját járatszámát vagy vonatszámát.',
   'help.guide.edit-transport.step.4':
-    'Kattints a Frissítés gombra. Ha teljesen el akarod távolítani a közlekedést, használd a kukát a Közlekedés fülön lévő kártyáján, és erősítsd meg.',
+    'Kattints a Frissítés gombra. Ha teljesen el akarod távolítani a közlekedést, használd a foglalása alján lévő Törlés gombot vagy a kukát a Közlekedés fülön lévő kártyáján, és erősítsd meg.',
   'help.guide.edit-transport.result':
     'A változás mindenhol látszik, ahol a közlekedés megjelenik: a Közlekedés fülön, a napon, amelyiken megy, és a vonalán a térképen.',
   'help.guide.edit-transport.tip.1':
-    'Ugyanez az űrlap mindkét oldalról megnyílik, a Közlekedés fülön lévő kártya ceruzájáról és a közlekedés saját soráról a napi tervben. A tervezett tömegközlekedési kapcsolat a kivétel: a sora a Tömegközlekedési útvonal nézetet nyitja meg, és az ottani Részletek szerkesztése vezet ehhez az űrlaphoz.',
+    'Ugyanez az űrlap mindkét oldalról megnyílik: a Szerkesztés gombbal abban a foglalásban, amelyet a napi terv egy sora nyit meg, és a Közlekedés fülön lévő kártya ceruzájával. A tervezett tömegközlekedési kapcsolat is foglalásként nyílik meg; ott az Útvonal módosítása újra keres, a Szerkesztés pedig ehhez az űrlaphoz vezet.',
   'help.guide.edit-transport.tip.2':
     'Egy közlekedés másik napra mozgatásához egyáltalán nem kell az űrlap: húzd a sorát az egyik napkártyáról a másikra.',
   // transport-on-map
diff --git a/shared/src/i18n/hu/places.ts b/shared/src/i18n/hu/places.ts
index 8560023d5..5f0bc98ba 100644
--- a/shared/src/i18n/hu/places.ts
+++ b/shared/src/i18n/hu/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Válassz legalább egy típust.',
   'places.selectionCount': '{count} kiválasztva',
   'places.deleteSelected': 'Kijelöltek törlése',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Kategória módosítása',
+  'places.categoryChanged': '{count} hely frissítve',
   'places.kmlKmzImported': '{count} hely importálva KMZ/KML-ből',
   'places.urlResolved': 'Hely importálva URL-ből',
   'places.importList': 'Lista importálás',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Teljes utazás megjelenítése',
   'places.filterTracks': 'Nyomvonalak',
   'places.filterByRating': 'Szűrés értékelés szerint',
+  'places.filterShow': 'Megjelenítés',
+  'places.clearSearch': 'Keresés törlése',
   'places.yourRating': 'Az értékelésed',
   'places.notRated': 'Még nincs értékelve',
   'places.search': 'Helyek keresése...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Utca, Város, Ország',
   'places.formLat': 'Szélességi fok (pl. 48.8566)',
   'places.formLng': 'Hosszúsági fok (pl. 2.3522)',
+  'places.formLatLabel': 'Szélességi fok',
+  'places.formLngLabel': 'Hosszúsági fok',
   'places.formCategory': 'Kategória',
   'places.noCategory': 'Nincs kategória',
   'places.newCategory': 'Új kategória',
diff --git a/shared/src/i18n/hu/reservations.ts b/shared/src/i18n/hu/reservations.ts
index 23bd8f91e..833a1c873 100644
--- a/shared/src/i18n/hu/reservations.ts
+++ b/shared/src/i18n/hu/reservations.ts
@@ -66,6 +66,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Kerékpár',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Tömegközlekedés',
+  'reservations.typeShort.transit': 'Tömegközl.',
   'reservations.type.transport_other': 'Egyéb',
   'reservations.confirm.delete': 'Biztosan törölni szeretnéd a(z) "{name}" foglalást?',
   'reservations.confirm.deleteTitle': 'Foglalás törlése?',
@@ -81,6 +82,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Helyszín / Cím',
   'reservations.locationPlaceholder': 'Cím, Repülőtér, Szálloda...',
   'reservations.confirmationCode': 'Foglalási kód',
+  'reservations.routeLabel': 'Útvonal',
+  'reservations.segmentCodes': 'Szakaszkódok',
   'reservations.confirmationPlaceholder': 'pl. ABC12345',
   'reservations.day': 'Nap',
   'reservations.noDay': 'Nincs nap',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Nem sikerült törölni',
   'reservations.confirm.remove': '"{name}" foglalás eltávolítása?',
   'reservations.linkAssignment': 'Összekapcsolás napi tervvel',
+  'reservations.linkedTo': 'Kapcsolódik',
   'reservations.pickAssignment': 'Válassz hozzárendelést a tervedből...',
   'reservations.noAssignment': 'Nincs összekapcsolás (önálló)',
   'reservations.price': 'Ár',
@@ -135,9 +139,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} foglalás találva',
   'reservations.import.previewEmpty': 'A feltöltött fájlokból nem sikerült foglalásokat kinyerni.',
   'reservations.import.removeItem': 'Eltávolítás',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Ellenőrzés',
+  'reservations.import.tryAi': 'Próba MI-elemzéssel',
+  'reservations.import.aiParsing': 'MI-elemzés folyamatban…',
   'reservations.import.confirm': '{count} foglalás importálása',
   'reservations.import.back': 'Vissza',
   'reservations.import.success': '{count} foglalás importálva',
@@ -183,5 +187,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Utasok',
   'reservations.travelers.assign': 'Utasok hozzárendelése',
   'reservations.travelers.none': 'Még nincsenek utastársak.',
+  'reservations.status.switchTo': 'Átállítás erre: {status}',
+  'reservations.view.label': 'Nézet',
+  'reservations.view.cards': 'Kártyák',
+  'reservations.view.list': 'Lista',
+  'reservations.view.timeline': 'Idővonal',
+  'reservations.filter': 'Szűrés',
+  'reservations.searchPlaceholder': 'Keresés',
+  'reservations.results': '{shown} / {total}',
+  'reservations.resetFilters': 'Szűrők visszaállítása',
+  'reservations.noMatches': 'Nincs a szűrőknek megfelelő találat',
+  'reservations.viewOptions': 'Nézet beállításai',
+  'reservations.resetView': 'Nézet visszaállítása',
+  'reservations.group.label': 'Csoportosítás',
+  'reservations.group.status': 'Állapot',
+  'reservations.group.day': 'Nap',
+  'reservations.group.type': 'Típus',
+  'reservations.group.none': 'Nincs csoportosítás',
+  'reservations.transitApart': 'Tömegközlekedés külön szakaszban',
+  'reservations.group.before': 'Az utazás előtt',
+  'reservations.group.after': 'Az utazás után',
+  'reservations.group.undated': 'Dátum nélkül',
+  'reservations.sort.label': 'Rendezés',
+  'reservations.sort.date': 'Dátum',
+  'reservations.sort.title': 'Cím',
+  'reservations.sort.type': 'Típus',
+  'reservations.sort.status': 'Állapot',
+  'reservations.sort.earlyFirst': 'Legkorábbi elöl',
+  'reservations.sort.lateFirst': 'Legkésőbbi elöl',
+  'reservations.sort.aToZ': 'A-tól Z-ig',
+  'reservations.sort.zToA': 'Z-től A-ig',
+  'reservations.timeline.dayCount': '{count} nap',
+  'reservations.timeline.zoom': 'Nagyítás',
+  'reservations.timeline.trip': 'Utazás',
+  'reservations.timeline.day': 'Nap',
+  'reservations.timeline.prevDay': 'Előző nap',
+  'reservations.timeline.nextDay': 'Következő nap',
+  'reservations.timeline.openDay': '{day} megnyitása óránkénti nézetben',
+  'reservations.timeline.nothingThisDay': 'Ezen a napon nincs semmi.',
+  'reservations.timeline.today': 'Ma',
+  'reservations.timeline.now': 'most',
+  'reservations.timeline.byType': 'Típusonként külön sáv',
+  'reservations.timeline.context': 'A másik fül megjelenítése',
+  'reservations.timeline.contextBookings': 'Foglalások',
+  'reservations.timeline.contextTransports': 'Közlekedés',
+  'reservations.timeline.noneDated': 'Egyiknek sincs még dátuma.',
+  'reservations.undated': 'Dátum nélkül',
+  'reservations.nights': 'Éjszakák',
+  'reservations.start': 'Kezdés',
+  'reservations.end': 'Vége',
+  'reservations.rename': 'Átnevezés',
+  'reservations.copyCode': 'Foglalási kód másolása',
+  'reservations.copyFailed': 'Nem sikerült másolni',
+  'reservations.showInFiles': 'Megjelenítés a fájlokban',
 };
 export default reservations;
diff --git a/shared/src/i18n/hu/transport.ts b/shared/src/i18n/hu/transport.ts
index 5bb4c8ceb..51acc6640 100644
--- a/shared/src/i18n/hu/transport.ts
+++ b/shared/src/i18n/hu/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Közlekedés szerkesztése',
   'transport.title': 'Közlekedés',
   'transport.addManual': 'Közlekedés',
+  'transport.empty': 'Még nincs közlekedés',
 };
 export default transport;
diff --git a/shared/src/i18n/id/budget.ts b/shared/src/i18n/id/budget.ts
index 8ceb8969e..9c642473d 100644
--- a/shared/src/i18n/id/budget.ts
+++ b/shared/src/i18n/id/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Hanya total — belum diselesaikan',
   'costs.tapToInclude': 'Ketuk untuk menyertakan',
   'costs.amount': 'Jumlah',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Pembagian',
+  'costs.splitEqually': 'Rata',
+  'costs.splitCustom': 'Kustom',
+  'costs.splitTicket': 'Struk',
+  'costs.perPerson': '{amount} per orang',
+  'costs.payersHint': 'Centang siapa yang membayar dan ketik berapa yang dibayar masing-masing.',
+  'costs.splitHint.equally': 'Semua yang dicentang membayar bagian yang sama.',
+  'costs.splitHint.custom': 'Ketik bagian tiap orang; jika dijumlahkan, semuanya harus sama dengan total.',
+  'costs.splitHint.ticket': 'Tuliskan isi kuitansi dan centang siapa yang mengambil tiap item.',
   'costs.filter.allCategories': 'Semua kategori',
   'costs.filter.allDays': 'Semua hari',
   'costs.expensesCount': '{count} pengeluaran',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Kuitansi',
   'costs.receiptsTitle': 'Kuitansi & Faktur',
   'costs.attachReceipt': 'Lampirkan kuitansi / faktur',
+  'costs.attach': 'Lampirkan',
   'costs.scan.button': 'Pindai kuitansi',
   'costs.scan.reading': 'Membaca kuitansi…',
   'costs.scan.review': 'Tinjau pengeluaran',
   'costs.scan.nothingRead': 'Tidak ada kuitansi yang dapat dibaca dari foto ini.',
   'costs.scan.failed': 'Tidak dapat mulai membaca kuitansi.',
   'costs.scan.title': 'Pindai kuitansi',
-  'costs.scan.accepted': 'Foto satu kuitansi (JPG, PNG, atau WEBP, maks. 10 MB). Model AI membacanya di latar belakang, lalu kamu memeriksa pengeluaran sebelum disimpan.',
+  'costs.scan.accepted':
+    'Foto satu kuitansi (JPG, PNG, atau WEBP, maks. 10 MB). Model AI membacanya di latar belakang, lalu kamu memeriksa pengeluaran sebelum disimpan.',
   'costs.scan.dropHere': 'Letakkan foto kuitansi di sini, atau klik untuk memilih atau mengambil foto',
   'costs.scan.dropActive': 'Lepaskan foto untuk memindainya',
   'costs.scan.start': 'Pindai',
diff --git a/shared/src/i18n/id/dayplan.ts b/shared/src/i18n/id/dayplan.ts
index cf8d81510..f301795b7 100644
--- a/shared/src/i18n/id/dayplan.ts
+++ b/shared/src/i18n/id/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Semua tempat sudah ditugaskan',
   'dayplan.mobile.noMatch': 'Tidak ditemukan',
   'dayplan.mobile.createNew': 'Buat tempat baru',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Buka semua hari', // en-fallback
+  'dayplan.collapseAll': 'Tutup semua hari', // en-fallback
   'dayplan.reorderDays': 'Atur ulang hari',
   'dayplan.reorderTitle': 'Atur ulang hari',
   'dayplan.reorderHint': 'Tempat, catatan, dan pesanan pada suatu hari ikut berpindah.',
diff --git a/shared/src/i18n/id/help.ts b/shared/src/i18n/id/help.ts
index 77f6515ab..865ae204b 100644
--- a/shared/src/i18n/id/help.ts
+++ b/shared/src/i18n/id/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'id' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Bantuan & Dokumentasi',
+  'help.search': 'Cari di dokumentasi…',
+  'help.contents': 'Daftar isi',
+  'help.noResults': 'Tidak ada halaman yang cocok.',
+  'help.errorTitle': 'Halaman ini tidak dapat dimuat',
+  'help.errorBody': 'Konten bantuan diambil dari wiki TREK. Periksa koneksi Anda lalu coba lagi.',
 
   // center
   'help.center.button': 'Bantuan untuk layar ini',
@@ -1042,7 +1042,7 @@ const help: TranslationStrings = {
     '“Travel & map”: rute pemesanan selalu di peta, pil Jelajahi tempat, optimalisasi rute dari akomodasi Anda, kode pemesanan yang disamarkan, dan rute pemesanan berlabel.',
   'help.ctx.settings-display.bullet.3':
     '“Mulai”: apakah TREK membuka dasbor atau perjalanan aktif, dan tab perjalanan mana yang muncul pertama.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Tampilan',
   'help.ctx.settings-appearance.summary':
     'Tampilan TREK di akun ini: terang atau gelap, warna aksen, kaca dan gerakan, ukuran teks, dan widget mana yang ditampilkan dasbor. Semuanya berlaku langsung, di setiap perangkat tempat Anda masuk.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2316,9 +2316,9 @@ const help: TranslationStrings = {
     'Buka perhentian yang memiliki pemesanan itu. Kartu menampilkan sebuah bilah dengan “Dikonfirmasi” atau “Tertunda” dan nama pemesanannya.',
   'help.guide.place-booking.step.2':
     'Bilah itu membawa “Tanggal”, “Waktu” dan “Kode Pemesanan”, serta catatan apa pun yang dimiliki pemesanan itu.',
-  'help.guide.place-booking.step.3': 'Klik bilahnya. Formulir pemesanan itu sendiri terbuka di atasnya.',
+  'help.guide.place-booking.step.3': 'Klik bilahnya. Pemesanan itu terbuka di atas peta.',
   'help.guide.place-booking.step.4':
-    '“Hubungkan ke jadwal harian” adalah yang menyematkan sebuah pemesanan ke sebuah perhentian, dan di sini sudah menyebut perhentian ini. Tutup formulirnya lagi.',
+    '“Sunting” di kaki pemesanan membuka formulirnya sendiri. “Hubungkan ke jadwal harian” di sana adalah yang menyematkan sebuah pemesanan ke sebuah perhentian, dan di sini sudah menyebut perhentian ini. Tutup formulirnya lagi.',
   'help.guide.place-booking.step.5':
     'Pemesanan baru untuk sebuah perhentian dimulai di kolom hari: arahkan kursor ke perhentian itu dan klik tanda + di ujungnya. Formulir terbuka sebagai “Reservasi Baru”, sudah terhubung dengannya.',
   'help.guide.place-booking.result':
@@ -2685,7 +2685,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Warnanya mengatakan posisi sebuah pemesanan: baris hijau sudah dikonfirmasi, baris amber masih tertunda. Hotel tidak ada dalam daftar ini, mereka punya blok sendiri di bawah.',
   'help.guide.day-bookings.step.4':
-    'Daftar ini hanya membacakan pemesanan. Sebuah pemesanan dibuat dan diubah di tab “Pemesanan”.',
+    'Klik sebuah baris dan pemesanan itu terbuka. “Sunting” di kakinya mengubahnya; pemesanan baru dibuat di tab “Pemesanan”.',
   'help.guide.day-bookings.result':
     'Semua yang bertanggal pada hari itu, dan semua yang menggantung pada salah satu perhentiannya, ada dalam satu daftar ini.',
   'help.guide.day-bookings.tip.1':
@@ -3237,13 +3237,13 @@ const help: TranslationStrings = {
     'Masukkan sebuah restoran, acara, tur, tempat parkir atau apa pun lainnya ke dalam perjalanan dengan tangan.',
   'help.guide.create-booking.step.1': 'Klik “Pemesanan Manual” di kanan atas tab. “Reservasi Baru” terbuka.',
   'help.guide.create-booking.step.2':
-    'Pilih “Jenis Pemesanan” dari daftar di bagian atas formulir, di samping “Peserta”. “Akomodasi”, “Restoran”, “Acara”, “Tur”, “Parkir” dan “Lainnya” adalah enam jenis yang dibuat tab ini, dan formulirnya berubah mengikuti pilihan: hanya “Akomodasi” yang menukar tanggalnya dengan rentang hari.',
+    'Klik pil jenis di bawah judul, di kepala formulir, lalu pilih “Jenis Pemesanan”. “Akomodasi”, “Restoran”, “Acara”, “Tur”, “Parkir” dan “Lainnya” adalah enam jenis yang dibuat tab ini, dan formulirnya berubah mengikuti pilihan: hanya “Akomodasi” yang menukar tanggalnya dengan rentang hari.',
   'help.guide.create-booking.step.3':
     'Ketik “Judul”. Inilah satu-satunya isian yang diharuskan oleh formulir, dan “Tambah” tetap mati sampai ia terisi.',
   'help.guide.create-booking.step.4':
     'Atur “Tanggal” dan “Waktu mulai”, serta “Tanggal selesai” dan “Waktu selesai” bila pemesanan itu punya akhir. Kalender hanya menawarkan hari di dalam perjalanan, dan akhir yang tidak sesudah awal dikatakan dengan warna merah lalu menghalangi “Tambah”.',
   'help.guide.create-booking.step.5':
-    'Masukkan “Kode Pemesanan” dari konfirmasi dan atur “Status”. “Tertunda” atau “Dikonfirmasi” menentukan di bagian mana dari keduanya kartu itu mendarat.',
+    'Masukkan “Kode Pemesanan” dari konfirmasi. Pil status di samping jenis bertuliskan “Tertunda”; satu klik mengubahnya menjadi “Dikonfirmasi” dan kembali lagi, dan itulah yang menentukan di bagian mana dari keduanya kartu itu mendarat.',
   'help.guide.create-booking.step.6': 'Klik “Tambah”.',
   'help.guide.create-booking.result':
     'Pemesanan itu menjadi sebuah kartu di bagiannya dengan chip jenisnya, tanggalnya dan kodenya, dan semua orang lain di perjalanan melihatnya muncul.',
@@ -3293,7 +3293,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Menyebut untuk siapa sebuah pemesanan dibuat',
   'help.guide.booking-travelers.goal': 'Tandai peserta yang dicakup sebuah pemesanan, lalu lihat hanya milik mereka.',
   'help.guide.booking-travelers.step.1':
-    'Buka pemesanan itu dengan pensil. “Peserta” ada di bagian atas formulir, di samping “Jenis Pemesanan”, dan bertuliskan “Tetapkan peserta” selama belum ada siapa pun di pemesanan itu.',
+    'Buka pemesanan itu dengan pensil. “Peserta” ada di samping “Kode Pemesanan”, dan bertuliskan “Tetapkan peserta” selama belum ada siapa pun di pemesanan itu.',
   'help.guide.booking-travelers.step.2':
     'Klik itu dan pilih orang-orang yang menjadi tujuan pemesanan ini; “Tamu” yang bernama juga ada di daftar. Yang terpilih mendapat centang dan avatarnya muncul di kolom itu. Klik namanya lagi untuk melepasnya.',
   'help.guide.booking-travelers.step.3': 'Klik “Perbarui”.',
@@ -3390,7 +3390,7 @@ const help: TranslationStrings = {
     'Klik pensil di kepala kartu. “Edit Reservasi” terbuka dengan segala yang diketahui pemesanan itu.',
   'help.guide.edit-booking.step.2':
     'Ubah apa yang perlu diubah, di sini “Kode Pemesanan” yang akhirnya dikirim operatornya.',
-  'help.guide.edit-booking.step.3': 'Letakkan “Status” pada “Dikonfirmasi”.',
+  'help.guide.edit-booking.step.3': 'Klik pil “Tertunda” di kepala formulir. Pil itu berubah menjadi “Dikonfirmasi”.',
   'help.guide.edit-booking.step.4': 'Klik “Perbarui”.',
   'help.guide.edit-booking.result':
     'Kartu itu berpindah: pemesanan yang dikonfirmasi berdiri di bagian “Dikonfirmasi” di belakang sebuah titik hijau, dan semua orang di perjalanan melihatnya berpindah.',
@@ -3684,19 +3684,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Baca koneksi perhentian demi perhentian, ganti namanya, atau cari rutenya lagi.',
   'help.guide.change-transit-route.step.1':
-    'Di tab “Transportasi”, koneksi yang direncanakan berada di bawah “Transportasi umum otomatis”. Klik kartunya.',
+    'Di tab “Transportasi”, koneksi yang direncanakan berada di bawah “Transportasi umum otomatis”. Klik kartunya; koneksi itu terbuka sebagai pemesanan.',
   'help.guide.change-transit-route.step.2':
     '“Durasi”, “Transit” dan “Jalan kaki” ada di bagian atas. “Itinerari” di bawahnya menelusuri koneksi perhentian demi perhentian, dengan peron dan jalan kaki di antara jalur.',
   'help.guide.change-transit-route.step.3':
-    '“Ubah rute” menjalankan pencarian lagi, sudah terisi dengan kedua ujung koneksi ini dan harinya.',
+    '“Ubah rute” di kaki pemesanan menjalankan pencarian lagi, sudah terisi dengan kedua ujung koneksi ini dan harinya.',
   'help.guide.change-transit-route.step.4':
-    'Pilih koneksi lain dan klik “Tambahkan ke hari”; koneksi itu mengambil tempat yang lama. “Sunting detail”, di samping “Ubah rute”, justru membuka formulir transportasi biasa, tempat “Kode Pemesanan”, “Status”, peserta dan file berada.',
+    'Pilih koneksi lain dan klik “Tambahkan ke hari”; koneksi itu mengambil tempat yang lama. “Sunting”, di ujung lain bilah yang sama, justru membuka formulir transportasi biasa, tempat “Kode Pemesanan”, “Status”, peserta, catatan dan file berada.',
   'help.guide.change-transit-route.result':
     'Perjalanan itu membawa itinerari baru, dan kartunya di tab “Transportasi” menampilkan jalur dan waktu yang baru.',
   'help.guide.change-transit-route.tip.1':
-    'Judul perjalanan hanyalah teks: pensil di sampingnya mengganti namanya tanpa menyentuh rutenya. “Catatan” di bawahnya menerima markdown dan punya tab “Sunting” dan “Pratinjau”.',
+    'Judul di kepala pemesanan mengganti nama koneksi tanpa menyentuh rutenya. Catatannya ditulis di formulir transportasi di balik “Sunting”.',
   'help.guide.change-transit-route.tip.2':
-    '“Hapus” di kaki tampilan perjalanan mengeluarkan koneksi itu dari perjalanan; hari itu tetap punya perhentiannya.',
+    '“Hapus” di kaki pemesanan mengeluarkan koneksi itu dari perjalanan; hari itu tetap punya perhentiannya.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Mengubah cara satu ruas ditempuh',
   'help.guide.leg-travel-mode.goal':
@@ -3722,17 +3722,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Perbaiki waktu, peron atau kode pemesanan, atau keluarkan perjalanan itu dari rencana perjalanan.',
   'help.guide.edit-transport.step.1':
-    'Di rencana hari, sebuah transportasi adalah baris berwarna di antara perhentian. Klik baris itu.',
+    'Di rencana hari, sebuah transportasi adalah baris berwarna di antara perhentian. Klik baris itu; pemesanannya terbuka dengan waktu, rute dan “Kode Pemesanan”.',
   'help.guide.edit-transport.step.2':
-    'Formulirnya adalah formulir yang membuatnya, dengan “Edit transportasi” di bilah judulnya. Semuanya bisa diubah: jenisnya, rutenya, hari dan waktunya, “Kode Pemesanan”, “Status”.',
+    '“Sunting” di kaki pemesanan membuka formulir yang membuatnya, dengan “Edit transportasi” di bilah judulnya. Semuanya bisa diubah: jenisnya, rutenya, hari dan waktunya, “Kode Pemesanan”, “Status”.',
   'help.guide.edit-transport.step.3':
     'Rute sebuah penerbangan adalah rantai bandara, rute kereta rantai stasiun. “Tambah persinggahan” menaruh satu lagi di antaranya, dan setiap ruas menyimpan waktunya sendiri dan nomor penerbangan atau nomor keretanya sendiri.',
   'help.guide.edit-transport.step.4':
-    'Klik “Perbarui”. Untuk menghapus transportasi sama sekali, pakai tempat sampah pada kartunya di tab “Transportasi” dan konfirmasikan.',
+    'Klik “Perbarui”. Untuk menghapus transportasi sama sekali, pakai “Hapus” di kaki pemesanannya, atau tempat sampah pada kartunya di tab “Transportasi”, lalu konfirmasikan.',
   'help.guide.edit-transport.result':
     'Perubahan tampak di semua tempat transportasi itu muncul: tab “Transportasi”, hari perjalanannya berlangsung, dan garisnya di peta.',
   'help.guide.edit-transport.tip.1':
-    'Formulir yang sama terbuka dari kedua sisi, pensil pada kartu di tab “Transportasi” dan baris transportasi itu sendiri di rencana hari. Koneksi transportasi umum yang direncanakan adalah pengecualian: barisnya membuka tampilan perjalanan, dan “Sunting detail” di sana menuju formulir ini.',
+    'Formulir yang sama terbuka dari kedua sisi: lewat “Sunting” di pemesanan yang dibuka oleh sebuah baris di rencana hari, dan lewat pensil pada kartu di tab “Transportasi”. Koneksi transportasi umum yang direncanakan juga terbuka sebagai pemesanan; “Ubah rute” di sana mencari lagi, dan “Sunting” menuju formulir ini.',
   'help.guide.edit-transport.tip.2':
     'Memindahkan transportasi ke hari lain sama sekali tidak memerlukan formulir: seret barisnya dari satu kartu hari ke kartu berikutnya.',
   // transport-on-map
diff --git a/shared/src/i18n/id/places.ts b/shared/src/i18n/id/places.ts
index 6025faa16..00329be4e 100644
--- a/shared/src/i18n/id/places.ts
+++ b/shared/src/i18n/id/places.ts
@@ -27,8 +27,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Pilih setidaknya satu jenis.',
   'places.selectionCount': '{count} dipilih',
   'places.deleteSelected': 'Hapus yang dipilih',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Ubah kategori',
+  'places.categoryChanged': '{count} tempat diperbarui',
   'places.kmlKmzImported': '{count} tempat diimpor dari KMZ/KML',
   'places.urlResolved': 'Tempat diimpor dari URL',
   'places.importList': 'Impor Daftar',
@@ -51,6 +51,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Tampilkan seluruh perjalanan',
   'places.filterTracks': 'Trek',
   'places.filterByRating': 'Saring menurut penilaian',
+  'places.filterShow': 'Tampilkan',
+  'places.clearSearch': 'Hapus pencarian',
   'places.yourRating': 'Rating kamu',
   'places.notRated': 'Belum dinilai',
   'places.search': 'Cari tempat...',
@@ -70,6 +72,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Jalan, Kota, Negara',
   'places.formLat': 'Lintang (mis. 48.8566)',
   'places.formLng': 'Bujur (mis. 2.3522)',
+  'places.formLatLabel': 'Lintang',
+  'places.formLngLabel': 'Bujur',
   'places.formCategory': 'Kategori',
   'places.noCategory': 'Tanpa Kategori',
   'places.newCategory': 'Kategori baru',
diff --git a/shared/src/i18n/id/reservations.ts b/shared/src/i18n/id/reservations.ts
index 8484409f3..8e71aad40 100644
--- a/shared/src/i18n/id/reservations.ts
+++ b/shared/src/i18n/id/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Sepeda',
   'reservations.type.taxi': 'Taksi',
   'reservations.type.transit': 'Transportasi umum',
+  'reservations.typeShort.transit': 'Angkutan umum',
   'reservations.type.transport_other': 'Lainnya',
   'reservations.confirm.delete': 'Yakin ingin menghapus reservasi "{name}"?',
   'reservations.confirm.deleteTitle': 'Hapus pemesanan?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Lokasi / Alamat',
   'reservations.locationPlaceholder': 'Alamat, Bandara, Hotel...',
   'reservations.confirmationCode': 'Kode Pemesanan',
+  'reservations.routeLabel': 'Rute',
+  'reservations.segmentCodes': 'Kode per ruas',
   'reservations.confirmationPlaceholder': 'mis. ABC12345',
   'reservations.day': 'Hari',
   'reservations.noDay': 'Tanpa Hari',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Gagal menghapus',
   'reservations.confirm.remove': 'Hapus reservasi untuk "{name}"?',
   'reservations.linkAssignment': 'Hubungkan ke jadwal harian',
+  'reservations.linkedTo': 'Terhubung ke',
   'reservations.pickAssignment': 'Pilih jadwal dari rencanamu...',
   'reservations.noAssignment': 'Tanpa tautan (mandiri)',
   'reservations.price': 'Harga',
@@ -134,9 +138,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} pemesanan ditemukan',
   'reservations.import.previewEmpty': 'Tidak ada pemesanan yang dapat diekstrak dari file yang diunggah.',
   'reservations.import.removeItem': 'Hapus',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Tinjau',
+  'reservations.import.tryAi': 'Coba baca dengan AI',
+  'reservations.import.aiParsing': 'Membaca dengan AI…',
   'reservations.import.confirm': 'Impor {count} pemesanan',
   'reservations.import.back': 'Kembali',
   'reservations.import.success': '{count} pemesanan berhasil diimpor',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Peserta',
   'reservations.travelers.assign': 'Tetapkan peserta',
   'reservations.travelers.none': 'Belum ada anggota perjalanan.',
+  'reservations.status.switchTo': 'Ubah ke {status}',
+  'reservations.view.label': 'Tampilan',
+  'reservations.view.cards': 'Kartu',
+  'reservations.view.list': 'Daftar',
+  'reservations.view.timeline': 'Linimasa',
+  'reservations.filter': 'Filter',
+  'reservations.searchPlaceholder': 'Cari',
+  'reservations.results': '{shown} dari {total}',
+  'reservations.resetFilters': 'Atur ulang filter',
+  'reservations.noMatches': 'Tidak ada yang cocok dengan filter ini',
+  'reservations.viewOptions': 'Opsi tampilan',
+  'reservations.resetView': 'Atur ulang tampilan',
+  'reservations.group.label': 'Kelompokkan menurut',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Hari',
+  'reservations.group.type': 'Jenis',
+  'reservations.group.none': 'Tanpa pengelompokan',
+  'reservations.transitApart': 'Transportasi umum di bagian tersendiri',
+  'reservations.group.before': 'Sebelum perjalanan',
+  'reservations.group.after': 'Setelah perjalanan',
+  'reservations.group.undated': 'Tanpa tanggal',
+  'reservations.sort.label': 'Urutkan menurut',
+  'reservations.sort.date': 'Tanggal',
+  'reservations.sort.title': 'Judul',
+  'reservations.sort.type': 'Jenis',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Paling awal dulu',
+  'reservations.sort.lateFirst': 'Paling akhir dulu',
+  'reservations.sort.aToZ': 'A ke Z',
+  'reservations.sort.zToA': 'Z ke A',
+  'reservations.timeline.dayCount': '{count} hari',
+  'reservations.timeline.zoom': 'Zum',
+  'reservations.timeline.trip': 'Perjalanan',
+  'reservations.timeline.day': 'Hari',
+  'reservations.timeline.prevDay': 'Hari sebelumnya',
+  'reservations.timeline.nextDay': 'Hari berikutnya',
+  'reservations.timeline.openDay': 'Buka {day} per jam',
+  'reservations.timeline.nothingThisDay': 'Tidak ada apa-apa pada hari ini.',
+  'reservations.timeline.today': 'Hari ini',
+  'reservations.timeline.now': 'sekarang',
+  'reservations.timeline.byType': 'Satu lajur per jenis',
+  'reservations.timeline.context': 'Tampilkan tab lainnya',
+  'reservations.timeline.contextBookings': 'Pemesanan',
+  'reservations.timeline.contextTransports': 'Transportasi',
+  'reservations.timeline.noneDated': 'Belum ada satu pun yang bertanggal.',
+  'reservations.undated': 'Tanpa tanggal',
+  'reservations.nights': 'Malam',
+  'reservations.start': 'Mulai',
+  'reservations.end': 'Selesai',
+  'reservations.rename': 'Ganti nama',
+  'reservations.copyCode': 'Salin kode pemesanan',
+  'reservations.copyFailed': 'Tidak dapat menyalin',
+  'reservations.showInFiles': 'Tampilkan di File',
 };
 export default reservations;
diff --git a/shared/src/i18n/id/transport.ts b/shared/src/i18n/id/transport.ts
index 1d0b94fd8..c532d4c3c 100644
--- a/shared/src/i18n/id/transport.ts
+++ b/shared/src/i18n/id/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Edit transportasi',
   'transport.title': 'Transportasi',
   'transport.addManual': 'Transportasi',
+  'transport.empty': 'Belum ada transportasi',
 };
 export default transport;
diff --git a/shared/src/i18n/it/budget.ts b/shared/src/i18n/it/budget.ts
index ef6eaf00e..1a80eee6a 100644
--- a/shared/src/i18n/it/budget.ts
+++ b/shared/src/i18n/it/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Solo nel totale — non ancora saldato',
   'costs.tapToInclude': 'Tocca per includere',
   'costs.amount': 'Importo',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Suddivisione',
+  'costs.splitEqually': 'In parti uguali',
+  'costs.splitCustom': 'Personalizzato',
+  'costs.splitTicket': 'Scontrino',
+  'costs.perPerson': '{amount} a persona',
+  'costs.payersHint': 'Spunta chi ha pagato e inserisci quanto ha versato ciascuno.',
+  'costs.splitHint.equally': 'Tutti quelli spuntati pagano la stessa quota.',
+  'costs.splitHint.custom': 'Inserisci la quota di ogni persona; insieme devono fare il totale.',
+  'costs.splitHint.ticket': "Elenca cosa c'era sulla ricevuta e spunta chi ha preso ciascun articolo.",
   'costs.filter.allCategories': 'Tutte le categorie',
   'costs.filter.allDays': 'Tutti i giorni',
   'costs.expensesCount': '{count} spese',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Ricevute',
   'costs.receiptsTitle': 'Ricevute e fatture',
   'costs.attachReceipt': 'Allega ricevuta / fattura',
+  'costs.attach': 'Allega',
   'costs.scan.button': 'Scansiona ricevuta',
   'costs.scan.reading': 'Lettura della ricevuta…',
   'costs.scan.review': 'Controlla la spesa',
   'costs.scan.nothingRead': 'Non è stato possibile leggere una ricevuta da questa foto.',
   'costs.scan.failed': 'Impossibile avviare la lettura della ricevuta.',
   'costs.scan.title': 'Scansiona ricevuta',
-  'costs.scan.accepted': 'La foto di una sola ricevuta (JPG, PNG o WEBP, fino a 10 MB). Il modello di IA la legge in background, poi controlli la spesa prima di salvarla.',
+  'costs.scan.accepted':
+    'La foto di una sola ricevuta (JPG, PNG o WEBP, fino a 10 MB). Il modello di IA la legge in background, poi controlli la spesa prima di salvarla.',
   'costs.scan.dropHere': 'Trascina qui la foto della ricevuta, oppure fai clic per sceglierla o scattarla',
   'costs.scan.dropActive': 'Rilascia la foto per scansionarla',
   'costs.scan.start': 'Scansiona',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Nessuna ricevuta allegata',
   'costs.deleteReceipt': 'Rimuovi ricevuta',
   'costs.viewReceipt': 'Visualizza ricevuta',
-  'costs.receiptLeftBehind': 'Salvataggio non riuscito e {count} ricevute caricate sono ancora lì. Rimuovile nella scheda File.',
+  'costs.receiptLeftBehind':
+    'Salvataggio non riuscito e {count} ricevute caricate sono ancora lì. Rimuovile nella scheda File.',
 };
 export default budget;
diff --git a/shared/src/i18n/it/dayplan.ts b/shared/src/i18n/it/dayplan.ts
index 1681013bf..f6e998139 100644
--- a/shared/src/i18n/it/dayplan.ts
+++ b/shared/src/i18n/it/dayplan.ts
@@ -79,8 +79,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Tutti i luoghi assegnati',
   'dayplan.mobile.noMatch': 'Nessun risultato',
   'dayplan.mobile.createNew': 'Crea nuovo luogo',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Espandi tutti i giorni', // en-fallback
+  'dayplan.collapseAll': 'Comprimi tutti i giorni', // en-fallback
   'dayplan.reorderDays': 'Riordina i giorni',
   'dayplan.reorderTitle': 'Riordina i giorni',
   'dayplan.reorderHint': 'I luoghi, le note e le prenotazioni di un giorno si spostano insieme a esso.',
diff --git a/shared/src/i18n/it/help.ts b/shared/src/i18n/it/help.ts
index 2a7860461..03e6ce55f 100644
--- a/shared/src/i18n/it/help.ts
+++ b/shared/src/i18n/it/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'it' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Guida e documentazione',
+  'help.search': 'Cerca nella documentazione…',
+  'help.contents': 'Indice',
+  'help.noResults': 'Nessuna pagina trovata.',
+  'help.errorTitle': 'Impossibile caricare questa pagina',
+  'help.errorBody': 'I contenuti della guida arrivano dal wiki di TREK. Controlla la connessione e riprova.',
 
   // center
   'help.center.button': 'Aiuto per questa schermata',
@@ -1042,7 +1042,7 @@ const help: TranslationStrings = {
     'Travel & map: i percorsi delle prenotazioni sempre sulla mappa, la pillola Esplora luoghi, l’ottimizzazione del percorso dal tuo alloggio, i codici di prenotazione nascosti e i percorsi delle prenotazioni etichettati.',
   'help.ctx.settings-display.bullet.3':
     'Avvio: se TREK si apre sulla dashboard o sul viaggio attivo, e quale scheda di un viaggio compare per prima.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Aspetto',
   'help.ctx.settings-appearance.summary':
     'Come appare TREK su questo account: chiaro o scuro, il colore d’accento, vetro e movimento, dimensione del testo, e quali widget mostra la dashboard. Tutto si applica dal vivo, su ogni dispositivo in cui accedi.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2303,9 +2303,9 @@ const help: TranslationStrings = {
     'Apri la tappa a cui appartiene la prenotazione. Il riquadro mostra una striscia con Confermata o In attesa e il nome della prenotazione.',
   'help.guide.place-booking.step.2':
     'La striscia porta la Data, l’Ora e il Codice prenotazione, e tutte le note che la prenotazione ha.',
-  'help.guide.place-booking.step.3': 'Clicca la striscia. Il modulo della prenotazione si apre sopra.',
+  'help.guide.place-booking.step.3': 'Clicca la striscia. La prenotazione si apre sopra la mappa.',
   'help.guide.place-booking.step.4':
-    'Collega all’assegnazione del giorno è ciò che appende una prenotazione a una tappa, e qui nomina già questa. Richiudi il modulo.',
+    'Modifica ai piedi della prenotazione apre il suo modulo. Lì Collega all’assegnazione del giorno è ciò che appende una prenotazione a una tappa, e qui nomina già questa. Richiudi il modulo.',
   'help.guide.place-booking.step.5':
     'Una nuova prenotazione per una tappa parte dalla colonna dei giorni: passa sulla tappa e clicca il + alla sua estremità. Il modulo si apre come Nuova prenotazione, già collegata a quella tappa.',
   'help.guide.place-booking.result':
@@ -2667,7 +2667,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Il colore dice a che punto è una prenotazione: una riga verde è confermata, una ambra è ancora in attesa. Gli alloggi non sono in questa lista, hanno il loro blocco più sotto.',
   'help.guide.day-bookings.step.4':
-    'La lista si limita a leggere le prenotazioni. Una prenotazione si crea e si cambia nella scheda Prenotazioni.',
+    'Clicca una riga e la prenotazione si apre. Modifica ai suoi piedi la cambia; le nuove prenotazioni si creano nella scheda Prenotazioni.',
   'help.guide.day-bookings.result':
     'Tutto ciò che è datato sul giorno, e tutto ciò che è legato a una delle sue tappe, sta in questa sola lista.',
   'help.guide.day-bookings.tip.1':
@@ -3217,13 +3217,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Clicca Prenotazione manuale in alto a destra nella scheda. Si apre Nuova prenotazione.',
   'help.guide.create-booking.step.2':
-    'Scegli il Tipo di prenotazione dall’elenco in cima al modulo, accanto a Viaggiatori. Alloggio, Ristorante, Evento, Tour, Parcheggio e Altro sono i sei che questa scheda crea, e il modulo cambia con la scelta: solo Alloggio scambia le sue date con un intervallo di giorni.',
+    'Clicca la pillola del tipo sotto il titolo, nell’intestazione del modulo, e scegli il Tipo di prenotazione. Alloggio, Ristorante, Evento, Tour, Parcheggio e Altro sono i sei che questa scheda crea, e il modulo cambia con la scelta: solo Alloggio scambia le sue date con un intervallo di giorni.',
   'help.guide.create-booking.step.3':
     'Digita il Titolo. È l’unico campo su cui il modulo insiste, e Aggiungi resta morto finché non c’è qualcosa.',
   'help.guide.create-booking.step.4':
     'Imposta Data e Ora di inizio, e Data fine e Ora di fine se la prenotazione ha una fine. I calendari offrono solo i giorni dentro il viaggio, e una fine che non è successiva all’inizio lo dice in rosso e blocca Aggiungi.',
   'help.guide.create-booking.step.5':
-    'Inserisci il Codice prenotazione dalla conferma e imposta Stato. In attesa o Confermata decide in quale delle due sezioni finisce la scheda.',
+    'Inserisci il Codice prenotazione dalla conferma. La pillola di stato accanto al tipo dice In attesa; un clic la passa a Confermata e viceversa, e questo decide in quale delle due sezioni finisce la scheda.',
   'help.guide.create-booking.step.6': 'Clicca Aggiungi.',
   'help.guide.create-booking.result':
     'La prenotazione è una scheda nella sua sezione, con il suo chip di genere, le sue date e il suo codice, e tutti gli altri nel viaggio la vedono comparire.',
@@ -3273,7 +3273,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Dire per chi è una prenotazione',
   'help.guide.booking-travelers.goal': 'Segna i viaggiatori che una prenotazione copre, e poi vedi solo le loro.',
   'help.guide.booking-travelers.step.1':
-    'Apri la prenotazione con la matita. Viaggiatori sta in cima al modulo, accanto a Tipo di prenotazione, e dice Assegna viaggiatori finché nessuno è sulla prenotazione.',
+    'Apri la prenotazione con la matita. Viaggiatori sta accanto al Codice prenotazione, e dice Assegna viaggiatori finché nessuno è sulla prenotazione.',
   'help.guide.booking-travelers.step.2':
     'Cliccalo e scegli le persone per cui è questa prenotazione; anche gli ospiti con nome sono nell’elenco. Una scelta riceve una spunta e il suo avatar nel campo. Clicca di nuovo il nome per toglierla.',
   'help.guide.booking-travelers.step.3': 'Clicca Aggiorna.',
@@ -3368,7 +3368,7 @@ const help: TranslationStrings = {
     'Clicca la matita nell’intestazione della scheda. Modifica prenotazione si apre con tutto ciò che la prenotazione sa.',
   'help.guide.edit-booking.step.2':
     'Cambia ciò che va cambiato, qui il Codice prenotazione che l’operatore ha finalmente mandato.',
-  'help.guide.edit-booking.step.3': 'Metti Stato su Confermata.',
+  'help.guide.edit-booking.step.3': 'Clicca la pillola In attesa nell’intestazione del modulo. Diventa Confermata.',
   'help.guide.edit-booking.step.4': 'Clicca Aggiorna.',
   'help.guide.edit-booking.result':
     'La scheda si sposta: una prenotazione confermata sta nella sezione Confermata dietro un punto verde, e tutti nel viaggio la vedono spostarsi.',
@@ -3663,19 +3663,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Leggere il collegamento fermata per fermata, rinominarlo, oppure cercare di nuovo il percorso.',
   'help.guide.change-transit-route.step.1':
-    'Nella scheda Trasporti i collegamenti pianificati stanno sotto Trasporto pubblico automatico. Clicca la scheda.',
+    'Nella scheda Trasporti i collegamenti pianificati stanno sotto Trasporto pubblico automatico. Clicca la scheda; il collegamento si apre come prenotazione.',
   'help.guide.change-transit-route.step.2':
     'Durata, Cambi e A piedi stanno in alto. Itinerario sotto di essi percorre il collegamento fermata per fermata, con i binari e i tratti a piedi tra le linee.',
   'help.guide.change-transit-route.step.3':
-    'Cambia percorso rilancia la ricerca, già compilata con i due estremi di questo collegamento e con il suo giorno.',
+    'Cambia percorso ai piedi della prenotazione rilancia la ricerca, già compilata con i due estremi di questo collegamento e con il suo giorno.',
   'help.guide.change-transit-route.step.4':
-    'Scegli un altro collegamento e clicca Aggiungi al giorno; prende il posto del vecchio. Modifica dettagli, accanto a Cambia percorso, apre invece il normale modulo di trasporto, dove stanno il Codice prenotazione, lo Stato, i viaggiatori e i file.',
+    'Scegli un altro collegamento e clicca Aggiungi al giorno; prende il posto del vecchio. Modifica, all’altra estremità della stessa barra, apre invece il normale modulo di trasporto, dove stanno il Codice prenotazione, lo Stato, i viaggiatori, le note e i file.',
   'help.guide.change-transit-route.result':
     'Il viaggio in trasporto pubblico porta il nuovo itinerario, e la sua scheda nella scheda Trasporti mostra le nuove linee e i nuovi orari.',
   'help.guide.change-transit-route.tip.1':
-    'Il titolo del viaggio in trasporto pubblico è solo testo: la matita accanto lo rinomina senza toccare il percorso. Note sotto accettano il markdown e hanno una linguetta Modifica e una linguetta Anteprima.',
+    'Il titolo nell’intestazione della prenotazione rinomina il collegamento senza toccare il percorso. Le sue note si scrivono nel modulo di trasporto dietro Modifica.',
   'help.guide.change-transit-route.tip.2':
-    'Elimina ai piedi del viaggio in trasporto pubblico toglie il collegamento dal viaggio; il giorno mantiene le sue tappe.',
+    'Elimina ai piedi della prenotazione toglie il collegamento dal viaggio; il giorno mantiene le sue tappe.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Cambiare come si percorre una tratta',
   'help.guide.leg-travel-mode.goal':
@@ -3701,17 +3701,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Sistemare un orario, un binario o un codice di prenotazione, oppure togliere il tragitto dal viaggio.',
   'help.guide.edit-transport.step.1':
-    'Nel programma del giorno un trasporto è una riga colorata tra le tappe. Cliccala.',
+    'Nel programma del giorno un trasporto è una riga colorata tra le tappe. Cliccala; la sua prenotazione si apre con gli orari, l’itinerario e il Codice prenotazione.',
   'help.guide.edit-transport.step.2':
-    'Il modulo è quello che l’ha creato, con Modifica trasporto nella barra del titolo. Tutto si può cambiare: il tipo, l’itinerario, i giorni e gli orari, il Codice prenotazione, lo Stato.',
+    'Modifica ai piedi della prenotazione apre il modulo che l’ha creato, con Modifica trasporto nella barra del titolo. Tutto si può cambiare: il tipo, l’itinerario, i giorni e gli orari, il Codice prenotazione, lo Stato.',
   'help.guide.edit-transport.step.3':
     'L’itinerario di un volo è una catena di aeroporti, quello di un treno una catena di stazioni. Aggiungi scalo ne mette un altro in mezzo, e ogni tratta mantiene i propri orari e il proprio numero di volo o di treno.',
   'help.guide.edit-transport.step.4':
-    'Clicca Aggiorna. Per togliere del tutto il trasporto, usa il cestino sulla sua scheda nella scheda Trasporti e conferma.',
+    'Clicca Aggiorna. Per togliere del tutto il trasporto, usa Elimina ai piedi della sua prenotazione, oppure il cestino sulla sua scheda nella scheda Trasporti, e conferma.',
   'help.guide.edit-transport.result':
     'La modifica si vede ovunque compaia il trasporto: nella scheda Trasporti, nel giorno in cui avviene, e nella sua linea sulla mappa.',
   'help.guide.edit-transport.tip.1':
-    'Lo stesso modulo si apre da entrambi i lati, dalla matita sulla scheda nella scheda Trasporti e dalla riga propria del trasporto nel programma del giorno. Un collegamento di trasporto pubblico pianificato è l’eccezione: la sua riga apre il viaggio in trasporto pubblico, e Modifica dettagli porta da lì a questo modulo.',
+    'Lo stesso modulo si apre da entrambi i lati: tramite Modifica nella prenotazione che apre una riga del programma del giorno, e tramite la matita sulla scheda nella scheda Trasporti. Anche un collegamento di trasporto pubblico pianificato si apre come prenotazione; lì Cambia percorso cerca di nuovo, e Modifica porta a questo modulo.',
   'help.guide.edit-transport.tip.2':
     'Spostare un trasporto a un altro giorno non ha affatto bisogno del modulo: trascina la sua riga da una scheda del giorno a quella dopo.',
   // transport-on-map
diff --git a/shared/src/i18n/it/places.ts b/shared/src/i18n/it/places.ts
index b60458d8a..2201f57ab 100644
--- a/shared/src/i18n/it/places.ts
+++ b/shared/src/i18n/it/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Seleziona almeno un tipo.',
   'places.selectionCount': '{count} selezionato/i',
   'places.deleteSelected': 'Elimina selezionati',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Cambia categoria',
+  'places.categoryChanged': '{count} luoghi aggiornati',
   'places.kmlKmzImported': '{count} luoghi importati da KMZ/KML',
   'places.urlResolved': "Luogo importato dall'URL",
   'places.importList': 'Importa lista',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Mostra tutto il viaggio',
   'places.filterTracks': 'Tracce',
   'places.filterByRating': 'Filtra per valutazione',
+  'places.filterShow': 'Mostra',
+  'places.clearSearch': 'Cancella ricerca',
   'places.yourRating': 'La tua valutazione',
   'places.notRated': 'Non ancora valutato',
   'places.search': 'Cerca luoghi...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Via, Città, Paese',
   'places.formLat': 'Latitudine (es. 48.8566)',
   'places.formLng': 'Longitudine (es. 2.3522)',
+  'places.formLatLabel': 'Latitudine',
+  'places.formLngLabel': 'Longitudine',
   'places.formCategory': 'Categoria',
   'places.noCategory': 'Nessuna categoria',
   'places.newCategory': 'Nuova categoria',
diff --git a/shared/src/i18n/it/reservations.ts b/shared/src/i18n/it/reservations.ts
index a3714f9a2..d778c7437 100644
--- a/shared/src/i18n/it/reservations.ts
+++ b/shared/src/i18n/it/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicicletta',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Trasporto pubblico',
+  'reservations.typeShort.transit': 'Mezzi pubblici',
   'reservations.type.transport_other': 'Altro',
   'reservations.confirm.delete': 'Sei sicuro di voler eliminare la prenotazione "{name}"?',
   'reservations.confirm.deleteTitle': 'Eliminare la prenotazione?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Posizione / Indirizzo',
   'reservations.locationPlaceholder': 'Indirizzo, aeroporto, hotel...',
   'reservations.confirmationCode': 'Codice prenotazione',
+  'reservations.routeLabel': 'Itinerario',
+  'reservations.segmentCodes': 'Codici per tratta',
   'reservations.confirmationPlaceholder': 'es. ABC12345',
   'reservations.day': 'Giorno',
   'reservations.noDay': 'Nessun giorno',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Impossibile eliminare',
   'reservations.confirm.remove': 'Rimuovere la prenotazione per "{name}"?',
   'reservations.linkAssignment': "Collega all'assegnazione del giorno",
+  'reservations.linkedTo': 'Collegata a',
   'reservations.pickAssignment': "Seleziona un'assegnazione dal tuo programma...",
   'reservations.noAssignment': 'Nessun collegamento (autonomo)',
   'reservations.price': 'Prezzo',
@@ -134,9 +138,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} prenotazione/i trovata/e',
   'reservations.import.previewEmpty': 'Nessuna prenotazione è stata estratta dai file caricati.',
   'reservations.import.removeItem': 'Rimuovi',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Da rivedere',
+  'reservations.import.tryAi': 'Prova la lettura con l’IA',
+  'reservations.import.aiParsing': 'Lettura con l’IA…',
   'reservations.import.confirm': 'Importa {count} prenotazione/i',
   'reservations.import.back': 'Indietro',
   'reservations.import.success': '{count} prenotazione/i importata/e',
@@ -180,5 +184,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Viaggiatori',
   'reservations.travelers.assign': 'Assegna viaggiatori',
   'reservations.travelers.none': 'Ancora nessun partecipante al viaggio.',
+  'reservations.status.switchTo': 'Imposta su {status}',
+  'reservations.view.label': 'Vista',
+  'reservations.view.cards': 'Schede',
+  'reservations.view.list': 'Elenco',
+  'reservations.view.timeline': 'Cronologia',
+  'reservations.filter': 'Filtra',
+  'reservations.searchPlaceholder': 'Cerca',
+  'reservations.results': '{shown} di {total}',
+  'reservations.resetFilters': 'Reimposta filtri',
+  'reservations.noMatches': 'Nessun risultato con questi filtri',
+  'reservations.viewOptions': 'Opzioni di visualizzazione',
+  'reservations.resetView': 'Reimposta vista',
+  'reservations.group.label': 'Raggruppa per',
+  'reservations.group.status': 'Stato',
+  'reservations.group.day': 'Giorno',
+  'reservations.group.type': 'Tipo',
+  'reservations.group.none': 'Nessun raggruppamento',
+  'reservations.transitApart': 'Trasporto pubblico in una sezione a parte',
+  'reservations.group.before': 'Prima del viaggio',
+  'reservations.group.after': 'Dopo il viaggio',
+  'reservations.group.undated': 'Senza data',
+  'reservations.sort.label': 'Ordina per',
+  'reservations.sort.date': 'Data',
+  'reservations.sort.title': 'Titolo',
+  'reservations.sort.type': 'Tipo',
+  'reservations.sort.status': 'Stato',
+  'reservations.sort.earlyFirst': "Dalla prima all'ultima",
+  'reservations.sort.lateFirst': "Dall'ultima alla prima",
+  'reservations.sort.aToZ': 'Dalla A alla Z',
+  'reservations.sort.zToA': 'Dalla Z alla A',
+  'reservations.timeline.dayCount': '{count} giorni',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Viaggio',
+  'reservations.timeline.day': 'Giorno',
+  'reservations.timeline.prevDay': 'Giorno precedente',
+  'reservations.timeline.nextDay': 'Giorno successivo',
+  'reservations.timeline.openDay': 'Apri {day} ora per ora',
+  'reservations.timeline.nothingThisDay': 'Niente in questo giorno.',
+  'reservations.timeline.today': 'Oggi',
+  'reservations.timeline.now': 'ora',
+  'reservations.timeline.byType': 'Una corsia per tipo',
+  'reservations.timeline.context': "Mostra l'altra scheda",
+  'reservations.timeline.contextBookings': 'Prenotazioni',
+  'reservations.timeline.contextTransports': 'Trasporti',
+  'reservations.timeline.noneDated': 'Nessuna di queste ha ancora una data.',
+  'reservations.undated': 'Senza data',
+  'reservations.nights': 'Notti',
+  'reservations.start': 'Inizio',
+  'reservations.end': 'Fine',
+  'reservations.rename': 'Rinomina',
+  'reservations.copyCode': 'Copia codice prenotazione',
+  'reservations.copyFailed': 'Impossibile copiare',
+  'reservations.showInFiles': 'Mostra nei file',
 };
 export default reservations;
diff --git a/shared/src/i18n/it/transport.ts b/shared/src/i18n/it/transport.ts
index fecb7df19..e5d829cf0 100644
--- a/shared/src/i18n/it/transport.ts
+++ b/shared/src/i18n/it/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Modifica trasporto',
   'transport.title': 'Trasporti',
   'transport.addManual': 'Trasporto',
+  'transport.empty': 'Ancora nessun trasporto',
 };
 export default transport;
diff --git a/shared/src/i18n/ja/budget.ts b/shared/src/i18n/ja/budget.ts
index 82aa428b3..c40578c7d 100644
--- a/shared/src/i18n/ja/budget.ts
+++ b/shared/src/i18n/ja/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': '合計のみ — 未精算',
   'costs.tapToInclude': 'タップして追加',
   'costs.amount': '金額',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': '分け方',
+  'costs.splitEqually': '均等',
+  'costs.splitCustom': 'カスタム',
+  'costs.splitTicket': 'レシート',
+  'costs.perPerson': '1人あたり{amount}',
+  'costs.payersHint': '支払った人にチェックを入れ、それぞれが出した金額を入力します。',
+  'costs.splitHint.equally': 'チェックを入れた全員が同じ額を負担します。',
+  'costs.splitHint.custom': '各人の負担額を入力します。すべて足して合計金額になる必要があります。',
+  'costs.splitHint.ticket': 'レシートの品目を書き出し、それぞれ誰の分かにチェックを入れます。',
   'costs.filter.allCategories': 'すべてのカテゴリー',
   'costs.filter.allDays': 'すべての日',
   'costs.expensesCount': '{count}件の支出',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'レシート',
   'costs.receiptsTitle': 'レシート・請求書',
   'costs.attachReceipt': 'レシート・請求書を添付',
+  'costs.attach': '添付',
   'costs.scan.button': 'レシートをスキャン',
   'costs.scan.reading': 'レシートを読み取り中…',
   'costs.scan.review': '支出を確認',
   'costs.scan.nothingRead': 'この写真からレシートを読み取れませんでした。',
   'costs.scan.failed': 'レシートの読み取りを開始できませんでした。',
   'costs.scan.title': 'レシートをスキャン',
-  'costs.scan.accepted': 'レシート1枚の写真（JPG、PNG、WEBP、10 MB まで）。AI モデルがバックグラウンドで読み取り、保存前に支出を確認します。',
+  'costs.scan.accepted':
+    'レシート1枚の写真（JPG、PNG、WEBP、10 MB まで）。AI モデルがバックグラウンドで読み取り、保存前に支出を確認します。',
   'costs.scan.dropHere': 'ここにレシートの写真をドロップするか、クリックして選択または撮影',
   'costs.scan.dropActive': 'ドロップしてスキャン',
   'costs.scan.start': 'スキャン',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': '添付されたレシートはありません',
   'costs.deleteReceipt': 'レシートを削除',
   'costs.viewReceipt': 'レシートを表示',
-  'costs.receiptLeftBehind': '保存に失敗し、アップロード済みの領収書が {count} 件残っています。ファイルタブで削除してください。',
+  'costs.receiptLeftBehind':
+    '保存に失敗し、アップロード済みの領収書が {count} 件残っています。ファイルタブで削除してください。',
 };
 export default budget;
diff --git a/shared/src/i18n/ja/help.ts b/shared/src/i18n/ja/help.ts
index b6199dd04..ec84d74ff 100644
--- a/shared/src/i18n/ja/help.ts
+++ b/shared/src/i18n/ja/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'ja' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'ヘルプとドキュメント',
+  'help.search': 'ドキュメントを検索…',
+  'help.contents': '目次',
+  'help.noResults': '一致するページはありません。',
+  'help.errorTitle': 'このページを読み込めませんでした',
+  'help.errorBody': 'ヘルプの内容は TREK wiki から取得しています。接続を確認して、もう一度お試しください。',
 
   // center
   'help.center.button': 'この画面のヘルプ',
@@ -981,7 +981,7 @@ const help: TranslationStrings = {
     '「Travel & map」：予約ルートを常に地図に表示、スポットを探すピル、宿泊先を起点にしたルート最適化、予約コードのぼかし、予約ルートのラベル表示。',
   'help.ctx.settings-display.bullet.3':
     '「起動」：TREKをダッシュボードで開くか進行中の旅行で開くか、そして旅行のどのタブを最初に表示するか。',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': '外観',
   'help.ctx.settings-appearance.summary':
     'このアカウントでのTREKの見た目：ライトかダークか、アクセントカラー、ガラス効果と動き、文字サイズ、ダッシュボードに表示するウィジェット。すべてその場で反映され、サインインしているどの端末にも及びます。',
   'help.ctx.settings-appearance.bullet.1':
@@ -2204,9 +2204,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     '予約が属する立ち寄り先を開きます。カードには「確定」または「保留」と予約の名前が入った帯が出ます。',
   'help.guide.place-booking.step.2': '帯には「日付」「時間」「予約コード」と、予約が持つメモが載ります。',
-  'help.guide.place-booking.step.3': '帯をクリックします。その予約自身のフォームが上に開きます。',
+  'help.guide.place-booking.step.3': '帯をクリックします。予約が地図の上に開きます。',
   'help.guide.place-booking.step.4':
-    '「日への割り当てにリンク」が予約を立ち寄り先に留めるもので、ここではすでにこの立ち寄り先の名前が入っています。フォームをまた閉じます。',
+    '予約の下部にある「編集」で、その予約自身のフォームが開きます。そこの「日への割り当てにリンク」が予約を立ち寄り先に留めるもので、ここではすでにこの立ち寄り先の名前が入っています。フォームをまた閉じます。',
   'help.guide.place-booking.step.5':
     '立ち寄り先の新しい予約は日程の列から始めます。立ち寄り先にマウスを乗せ、その末尾の + をクリックします。フォームは「新しい予約」として開き、すでにその立ち寄り先にリンクされています。',
   'help.guide.place-booking.result':
@@ -2549,7 +2549,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     '色が予約の状態を示します。緑の行は確定、琥珀色はまだ保留です。ホテルはこのリストには出ず、下に自分のブロックを持ちます。',
   'help.guide.day-bookings.step.4':
-    'このリストは予約を読み出すだけです。予約を作ったり変えたりするのは「予約」タブです。',
+    '行をクリックすると予約が開きます。その下部の「編集」で変更でき、新しい予約は「予約」タブで作ります。',
   'help.guide.day-bookings.result':
     'その日の日付が付いたものも、その日の立ち寄り先にぶら下がったものも、すべてこの1つのリストに入ります。',
   'help.guide.day-bookings.tip.1':
@@ -3077,13 +3077,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': 'レストラン、イベント、ツアー、駐車場など、何でも手入力で旅行に入れます。',
   'help.guide.create-booking.step.1': 'タブの右上の「手動予約」をクリックします。「新しい予約」が開きます。',
   'help.guide.create-booking.step.2':
-    'フォーム上部の「同行者」の隣にあるリストから「予約タイプ」を選びます。このタブが作るのは「宿泊」「レストラン」「イベント」「ツアー」「駐車場」「その他」の6種類で、選択に応じてフォームが変わります。日付を日の範囲に取り替えるのは「宿泊」だけです。',
+    'フォームの見出しで、タイトルの下にある種類のピルをクリックし、「予約タイプ」を選びます。このタブが作るのは「宿泊」「レストラン」「イベント」「ツアー」「駐車場」「その他」の6種類で、選択に応じてフォームが変わります。日付を日の範囲に取り替えるのは「宿泊」だけです。',
   'help.guide.create-booking.step.3':
     '「タイトル」を入力します。フォームが必ず求めるのはこの項目だけで、何か入るまで「追加」は押せません。',
   'help.guide.create-booking.step.4':
     '「日付」と「開始時刻」を設定し、終わりのある予約なら「終了日」と「終了時刻」も設定します。カレンダーは旅行期間内の日しか示さず、終わりが始まりより後でなければ赤でそう伝えて「追加」を止めます。',
   'help.guide.create-booking.step.5':
-    '確認書の「予約コード」を入れて「ステータス」を設定します。「保留」か「確定」かで、カードが2つのセクションのどちらに入るかが決まります。',
+    '確認書の「予約コード」を入れます。種類の隣のステータスピルは「保留」と表示されています。クリックすると「確定」になり、もう一度クリックすると戻ります。これで、カードが2つのセクションのどちらに入るかが決まります。',
   'help.guide.create-booking.step.6': '「追加」をクリックします。',
   'help.guide.create-booking.result':
     '予約は種類のチップと日付と予約コードを持つカードとしてそのセクションに並び、旅行のほかの全員にも現れます。',
@@ -3132,7 +3132,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': '予約が誰のためかを示す',
   'help.guide.booking-travelers.goal': '予約が対象とする同行者を指定し、そのうえでその人の分だけを表示します。',
   'help.guide.booking-travelers.step.1':
-    '鉛筆で予約を開きます。「同行者」はフォームの上部、「予約タイプ」の隣にあり、予約に誰もいない間は「同行者を割り当て」と表示されます。',
+    '鉛筆で予約を開きます。「同行者」は「予約コード」の隣にあり、予約に誰もいない間は「同行者を割り当て」と表示されます。',
   'help.guide.booking-travelers.step.2':
     'そこをクリックして、この予約の対象となる人を選びます。名前の付いた「ゲスト」もリストに含まれます。選ばれた人にはチェックが付き、フィールドにアバターが表示されます。名前をもう一度クリックすると外れます。',
   'help.guide.booking-travelers.step.3': '「更新」をクリックします。',
@@ -3223,7 +3223,7 @@ const help: TranslationStrings = {
     'カードの見出しにある鉛筆をクリックします。「予約を編集」が、その予約の持つ情報すべてとともに開きます。',
   'help.guide.edit-booking.step.2':
     '変える必要のあるところを変えます。ここでは業者がようやく送ってきた「予約コード」です。',
-  'help.guide.edit-booking.step.3': '「ステータス」を「確定」にします。',
+  'help.guide.edit-booking.step.3': 'フォームの見出しにある「保留」のピルをクリックします。「確定」に変わります。',
   'help.guide.edit-booking.step.4': '「更新」をクリックします。',
   'help.guide.edit-booking.result':
     'カードが移ります。確定した予約は緑の点の後ろ、「確定」のセクションに並び、旅行の全員にその移動が見えます。',
@@ -3508,19 +3508,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': '計画された経路を開いて変える',
   'help.guide.change-transit-route.goal': '経路を駅ごとに読み、名前を変え、あるいは経路を調べ直します。',
   'help.guide.change-transit-route.step.1':
-    '「移動」タブでは、計画された経路は「公共交通機関の自動検索」の下にあります。カードをクリックします。',
+    '「移動」タブでは、計画された経路は「公共交通機関の自動検索」の下にあります。カードをクリックすると、その経路が予約として開きます。',
   'help.guide.change-transit-route.step.2':
     '上に「所要時間」「乗り換え」「徒歩」があります。その下の「行程」が経路を駅ごとにたどり、ホームと路線間の徒歩も示します。',
   'help.guide.change-transit-route.step.3':
-    '「経路を変更」は検索をもう一度実行します。この経路の両端とその日はすでに入っています。',
+    '予約の下部にある「経路を変更」は検索をもう一度実行します。この経路の両端とその日はすでに入っています。',
   'help.guide.change-transit-route.step.4':
-    '別の経路を選んで「日程に追加」をクリックすると、古いものに取って代わります。「経路を変更」の隣の「詳細を編集」は代わりに通常の移動手段フォームを開き、そこに「予約コード」「ステータス」、同行者、ファイルがあります。',
+    '別の経路を選んで「日程に追加」をクリックすると、古いものに取って代わります。同じバーの反対の端にある「編集」は代わりに通常の移動手段フォームを開き、そこに「予約コード」「ステータス」、同行者、メモ、ファイルがあります。',
   'help.guide.change-transit-route.result':
     '経路は新しい行程を持ち、「移動」タブのそのカードは新しい路線と時刻を示します。',
   'help.guide.change-transit-route.tip.1':
-    '経路のタイトルはただのテキストです。隣の鉛筆は経路に触れずに名前を変えます。下の「メモ」は markdown を受け取り、「編集」と「プレビュー」のタブがあります。',
+    '予約の見出しにあるタイトルで、経路に触れずに名前を変えられます。メモは「編集」の先にある移動手段フォームで書きます。',
   'help.guide.change-transit-route.tip.2':
-    '経路の下部の「削除」はその経路を旅行から外します。日は立ち寄り先をそのまま保ちます。',
+    '予約の下部の「削除」はその経路を旅行から外します。日は立ち寄り先をそのまま保ちます。',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': '一区間の移動方法を変える',
   'help.guide.leg-travel-mode.goal': 'ほかは車で進む日の一区間だけを歩くか、その区間を公共交通機関の検索に任せます。',
@@ -3542,17 +3542,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': '移動手段を変える、または削除する',
   'help.guide.edit-transport.goal': '時刻、ホーム、予約コードを直すか、その移動を旅行から外します。',
-  'help.guide.edit-transport.step.1': '日程では移動手段は立ち寄り先の間の色付きの行です。それをクリックします。',
+  'help.guide.edit-transport.step.1':
+    '日程では移動手段は立ち寄り先の間の色付きの行です。それをクリックすると、時刻、経路、「予約コード」とともにその予約が開きます。',
   'help.guide.edit-transport.step.2':
-    'フォームはそれを作ったものと同じで、タイトルバーに「移動手段を編集」と出ます。すべて変えられます。種類、経路、日と時刻、「予約コード」、「ステータス」です。',
+    '予約の下部にある「編集」で、それを作ったフォームが開き、タイトルバーに「移動手段を編集」と出ます。すべて変えられます。種類、経路、日と時刻、「予約コード」、「ステータス」です。',
   'help.guide.edit-transport.step.3':
     '航空便の経路は空港の連なり、列車の経路は駅の連なりです。「経由地を追加」は間にもう一つ置き、各区間は自分の時刻と自分の便名または列車番号を保ちます。',
   'help.guide.edit-transport.step.4':
-    '「更新」をクリックします。移動手段をすっかり取り除くには、「移動」タブのそのカードのごみ箱を使って確認します。',
+    '「更新」をクリックします。移動手段をすっかり取り除くには、その予約の下部にある「削除」か、「移動」タブのそのカードのごみ箱を使って確認します。',
   'help.guide.edit-transport.result':
     '変更は移動手段が現れるすべての場所に出ます。「移動」タブ、それが動く日、そして地図上のその線です。',
   'help.guide.edit-transport.tip.1':
-    '同じフォームは両側から開きます。「移動」タブのカードの鉛筆と、日程にある移動手段自身の行です。計画された公共交通機関の経路だけは例外で、その行は経路の画面を開き、そこの「詳細を編集」がこのフォームへ導きます。',
+    '同じフォームは両側から開きます。日程の行が開く予約の「編集」からと、「移動」タブのカードの鉛筆からです。計画された公共交通機関の経路も予約として開きます。そこでは「経路を変更」で検索し直し、「編集」でこのフォームへ進みます。',
   'help.guide.edit-transport.tip.2':
     '移動手段を別の日へ動かすのにフォームは要りません。行をある日のカードから次のカードへドラッグします。',
   // transport-on-map
diff --git a/shared/src/i18n/ja/places.ts b/shared/src/i18n/ja/places.ts
index 56621f892..9c8f2bce3 100644
--- a/shared/src/i18n/ja/places.ts
+++ b/shared/src/i18n/ja/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': '少なくとも1つ選択してください。',
   'places.selectionCount': '{count} 件選択中',
   'places.deleteSelected': '選択を削除',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'カテゴリを変更',
+  'places.categoryChanged': '{count} 件の場所を更新しました',
   'places.kmlKmzImported': 'KMZ/KMLから {count} 件の場所をインポートしました',
   'places.urlResolved': 'URLから場所をインポートしました',
   'places.importList': 'リストをインポート',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': '旅行全体を表示',
   'places.filterTracks': 'トラック',
   'places.filterByRating': '評価で絞り込む',
+  'places.filterShow': '表示',
+  'places.clearSearch': '検索をクリア',
   'places.yourRating': 'あなたの評価',
   'places.notRated': '未評価',
   'places.search': '場所を検索…',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': '通り、都市、国',
   'places.formLat': '緯度（例：48.8566）',
   'places.formLng': '経度（例：2.3522）',
+  'places.formLatLabel': '緯度',
+  'places.formLngLabel': '経度',
   'places.formCategory': 'カテゴリ',
   'places.noCategory': 'カテゴリなし',
   'places.newCategory': '新しいカテゴリ',
diff --git a/shared/src/i18n/ja/reservations.ts b/shared/src/i18n/ja/reservations.ts
index 1be087cd8..f2fdcd2ae 100644
--- a/shared/src/i18n/ja/reservations.ts
+++ b/shared/src/i18n/ja/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': '自転車',
   'reservations.type.taxi': 'タクシー',
   'reservations.type.transit': '公共交通機関',
+  'reservations.typeShort.transit': '公共交通',
   'reservations.type.transport_other': 'その他',
   'reservations.confirm.delete': '予約「{name}」を削除しますか？',
   'reservations.confirm.deleteTitle': '予約を削除しますか？',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': '場所／住所',
   'reservations.locationPlaceholder': '住所、空港、ホテル...',
   'reservations.confirmationCode': '予約コード',
+  'reservations.routeLabel': '経路',
+  'reservations.segmentCodes': '区間ごとのコード',
   'reservations.confirmationPlaceholder': '例：ABC12345',
   'reservations.day': '日',
   'reservations.noDay': '日なし',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': '削除に失敗しました',
   'reservations.confirm.remove': '「{name}」の予約を削除しますか？',
   'reservations.linkAssignment': '日への割り当てにリンク',
+  'reservations.linkedTo': 'リンク先',
   'reservations.pickAssignment': '計画から割り当てを選択...',
   'reservations.noAssignment': 'リンクなし（単独）',
   'reservations.price': '価格',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} 件の予約が見つかりました',
   'reservations.import.previewEmpty': 'アップロードされたファイルから予約を抽出できませんでした。',
   'reservations.import.removeItem': '削除',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': '要確認',
+  'reservations.import.tryAi': 'AI で読み取る',
+  'reservations.import.aiParsing': 'AI で読み取り中…',
   'reservations.import.confirm': '{count} 件の予約をインポート',
   'reservations.import.back': '戻る',
   'reservations.import.success': '{count} 件の予約をインポートしました',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': '同行者',
   'reservations.travelers.assign': '同行者を割り当て',
   'reservations.travelers.none': 'まだ旅行メンバーがいません。',
+  'reservations.status.switchTo': '{status}に変更',
+  'reservations.view.label': '表示',
+  'reservations.view.cards': 'カード',
+  'reservations.view.list': 'リスト',
+  'reservations.view.timeline': 'タイムライン',
+  'reservations.filter': 'フィルター',
+  'reservations.searchPlaceholder': '検索',
+  'reservations.results': '{total}件中{shown}件',
+  'reservations.resetFilters': 'フィルターをリセット',
+  'reservations.noMatches': 'このフィルターに一致するものはありません',
+  'reservations.viewOptions': '表示オプション',
+  'reservations.resetView': '表示をリセット',
+  'reservations.group.label': 'グループ化',
+  'reservations.group.status': 'ステータス',
+  'reservations.group.day': '日',
+  'reservations.group.type': '種類',
+  'reservations.group.none': 'グループ化しない',
+  'reservations.transitApart': '公共交通機関を別セクションにする',
+  'reservations.group.before': '旅行前',
+  'reservations.group.after': '旅行後',
+  'reservations.group.undated': '日付なし',
+  'reservations.sort.label': '並び替え',
+  'reservations.sort.date': '日付',
+  'reservations.sort.title': 'タイトル',
+  'reservations.sort.type': '種類',
+  'reservations.sort.status': 'ステータス',
+  'reservations.sort.earlyFirst': '早い順',
+  'reservations.sort.lateFirst': '遅い順',
+  'reservations.sort.aToZ': 'A→Z',
+  'reservations.sort.zToA': 'Z→A',
+  'reservations.timeline.dayCount': '{count}日間',
+  'reservations.timeline.zoom': 'ズーム',
+  'reservations.timeline.trip': '旅行',
+  'reservations.timeline.day': '日',
+  'reservations.timeline.prevDay': '前の日',
+  'reservations.timeline.nextDay': '次の日',
+  'reservations.timeline.openDay': '{day}を時間単位で開く',
+  'reservations.timeline.nothingThisDay': 'この日には何もありません。',
+  'reservations.timeline.today': '今日',
+  'reservations.timeline.now': '現在',
+  'reservations.timeline.byType': '種類ごとに1レーン',
+  'reservations.timeline.context': 'もう一方のタブも表示',
+  'reservations.timeline.contextBookings': '予約',
+  'reservations.timeline.contextTransports': '移動',
+  'reservations.timeline.noneDated': 'どれにもまだ日付がありません。',
+  'reservations.undated': '日付なし',
+  'reservations.nights': '泊',
+  'reservations.start': '開始',
+  'reservations.end': '終了',
+  'reservations.rename': '名前を変更',
+  'reservations.copyCode': '予約コードをコピー',
+  'reservations.copyFailed': 'コピーできませんでした',
+  'reservations.showInFiles': 'ファイルで表示',
 };
 export default reservations;
diff --git a/shared/src/i18n/ja/transport.ts b/shared/src/i18n/ja/transport.ts
index cf56c0553..a3af74261 100644
--- a/shared/src/i18n/ja/transport.ts
+++ b/shared/src/i18n/ja/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': '移動手段を編集',
   'transport.title': '移動手段',
   'transport.addManual': '交通',
+  'transport.empty': '移動手段はまだありません',
 };
 export default transport;
diff --git a/shared/src/i18n/ko/budget.ts b/shared/src/i18n/ko/budget.ts
index 947154036..558d67c9b 100644
--- a/shared/src/i18n/ko/budget.ts
+++ b/shared/src/i18n/ko/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': '합계에만 반영 — 아직 미정산',
   'costs.tapToInclude': '탭하여 포함',
   'costs.amount': '금액',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': '나누기',
+  'costs.splitEqually': '균등하게',
+  'costs.splitCustom': '직접 설정',
+  'costs.splitTicket': '영수증',
+  'costs.perPerson': '1인당 {amount}',
+  'costs.payersHint': '결제한 사람을 체크하고 각자 낸 금액을 입력하세요.',
+  'costs.splitHint.equally': '체크한 모든 사람이 같은 몫을 냅니다.',
+  'costs.splitHint.custom': '각자의 몫을 입력하세요. 모두 합쳐 총액이 되어야 합니다.',
+  'costs.splitHint.ticket': '영수증에 있던 항목을 적고, 항목마다 누구 몫인지 체크하세요.',
   'costs.filter.allCategories': '모든 카테고리',
   'costs.filter.allDays': '모든 날짜',
   'costs.expensesCount': '지출 {count}건',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': '영수증',
   'costs.receiptsTitle': '영수증 및 청구서',
   'costs.attachReceipt': '영수증 / 청구서 첨부',
+  'costs.attach': '첨부',
   'costs.scan.button': '영수증 스캔',
   'costs.scan.reading': '영수증 읽는 중…',
   'costs.scan.review': '지출 검토',
   'costs.scan.nothingRead': '이 사진에서 영수증을 읽지 못했습니다.',
   'costs.scan.failed': '영수증 읽기를 시작하지 못했습니다.',
   'costs.scan.title': '영수증 스캔',
-  'costs.scan.accepted': '영수증 한 장의 사진(JPG, PNG, WEBP, 최대 10MB). AI 모델이 백그라운드에서 읽은 뒤, 저장하기 전에 지출을 확인합니다.',
+  'costs.scan.accepted':
+    '영수증 한 장의 사진(JPG, PNG, WEBP, 최대 10MB). AI 모델이 백그라운드에서 읽은 뒤, 저장하기 전에 지출을 확인합니다.',
   'costs.scan.dropHere': '영수증 사진을 여기에 놓거나, 클릭해서 선택하거나 촬영하세요',
   'costs.scan.dropActive': '놓아서 사진 스캔',
   'costs.scan.start': '스캔',
diff --git a/shared/src/i18n/ko/help.ts b/shared/src/i18n/ko/help.ts
index 9c2f2efd5..93b42dff3 100644
--- a/shared/src/i18n/ko/help.ts
+++ b/shared/src/i18n/ko/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'ko' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': '도움말 및 문서',
+  'help.search': '문서 검색…',
+  'help.contents': '목차',
+  'help.noResults': '일치하는 페이지가 없습니다.',
+  'help.errorTitle': '이 페이지를 불러올 수 없습니다',
+  'help.errorBody': '도움말 내용은 TREK 위키에서 가져옵니다. 연결을 확인하고 다시 시도하세요.',
 
   // center
   'help.center.button': '이 화면의 도움말',
@@ -961,7 +961,7 @@ const help: TranslationStrings = {
     '“Travel & map”: 예약 경로를 항상 지도에 표시, 장소 탐색 알약 버튼, 숙소 기준 경로 최적화, 예약 코드 흐리게, 예약 경로에 이름 표시.',
   'help.ctx.settings-display.bullet.3':
     '“시작”: TREK이 대시보드에서 열릴지 진행 중인 여행에서 열릴지, 그리고 여행의 어느 탭이 먼저 나올지.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': '모양',
   'help.ctx.settings-appearance.summary':
     '이 계정에서 TREK이 보이는 방식: 라이트 또는 다크, 강조 색상, 유리 효과와 움직임, 글자 크기, 대시보드에 보일 위젯. 모두 즉시 적용되며 로그인한 모든 기기에 반영됩니다.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2122,9 +2122,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     '예약이 속한 정차지를 엽니다. 카드에 “확정됨” 또는 “대기 중”과 예약 이름이 담긴 띠가 보입니다.',
   'help.guide.place-booking.step.2': '그 띠에는 “날짜”, “시간”, “예약 코드”와 예약이 가진 메모가 담깁니다.',
-  'help.guide.place-booking.step.3': '띠를 클릭합니다. 그 예약 자체의 양식이 그 위에 열립니다.',
+  'help.guide.place-booking.step.3': '띠를 클릭합니다. 예약이 지도 위에 열립니다.',
   'help.guide.place-booking.step.4':
-    '“날 배정에 연결”이 예약을 정차지에 붙이는 항목이고, 여기서는 이미 이 정차지를 가리키고 있습니다. 양식을 다시 닫습니다.',
+    '예약 맨 아래의 “편집”이 그 예약 자체의 양식을 엽니다. 거기서 “날 배정에 연결”이 예약을 정차지에 붙이는 항목이고, 여기서는 이미 이 정차지를 가리키고 있습니다. 양식을 다시 닫습니다.',
   'help.guide.place-booking.step.5':
     '정차지의 새 예약은 일자 열에서 시작합니다. 정차지에 마우스를 올리고 그 끝의 +를 클릭하세요. 양식이 “새 예약”으로 열리고, 이미 그 정차지에 연결되어 있습니다.',
   'help.guide.place-booking.result':
@@ -2455,7 +2455,8 @@ const help: TranslationStrings = {
     '한 행에는 예약의 종류와 이름이 나오고, 경유지에 속하면 가운뎃점 뒤에 그 경유지가 붙습니다. 시간은 오른쪽 끝에 있습니다.',
   'help.guide.day-bookings.step.3':
     '색이 예약의 상태를 말해 줍니다. 초록 행은 확정됨, 호박색 행은 아직 대기 중입니다. 호텔은 이 목록에 없고 아래에 자기 블록을 가집니다.',
-  'help.guide.day-bookings.step.4': '이 목록은 예약을 읽어 주기만 합니다. 예약을 만들고 바꾸는 곳은 “예약” 탭입니다.',
+  'help.guide.day-bookings.step.4':
+    '행을 클릭하면 예약이 열립니다. 맨 아래의 “편집”으로 바꿀 수 있고, 새 예약은 “예약” 탭에서 만듭니다.',
   'help.guide.day-bookings.result':
     '그 날로 날짜가 잡힌 것도, 그 날의 경유지에 달린 것도 모두 이 하나의 목록에 있습니다.',
   'help.guide.day-bookings.tip.1':
@@ -2974,13 +2975,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': '식당, 이벤트, 투어, 주차 자리, 그 밖의 무엇이든 손으로 여행에 넣습니다.',
   'help.guide.create-booking.step.1': '탭 오른쪽 위의 “직접 예약”을 클릭합니다. “새 예약”이 열립니다.',
   'help.guide.create-booking.step.2':
-    '양식 위쪽의 “동행자” 옆에 있는 목록에서 “예약 유형”을 고릅니다. 이 탭이 만드는 여섯 가지는 “숙박”, “레스토랑”, “이벤트”, “투어”, “주차”, “기타”이고, 고른 것에 따라 양식이 바뀝니다. 날짜를 날의 범위로 바꾸는 것은 “숙박”뿐입니다.',
+    '양식 머리에서 제목 아래의 유형 알약을 클릭하고 “예약 유형”을 고릅니다. 이 탭이 만드는 여섯 가지는 “숙박”, “레스토랑”, “이벤트”, “투어”, “주차”, “기타”이고, 고른 것에 따라 양식이 바뀝니다. 날짜를 날의 범위로 바꾸는 것은 “숙박”뿐입니다.',
   'help.guide.create-booking.step.3':
     '“제목”을 입력합니다. 양식이 꼭 요구하는 항목은 이 하나뿐이고, 무언가 들어가기 전까지 “추가”는 눌리지 않습니다.',
   'help.guide.create-booking.step.4':
     '“날짜”와 “시작 시간”을 정하고, 끝이 있는 예약이라면 “종료 날짜”와 “종료 시간”도 정합니다. 달력은 여행 안의 날만 내어 주고, 끝이 시작보다 뒤가 아니면 빨간색으로 그렇게 알리며 “추가”를 막습니다.',
   'help.guide.create-booking.step.5':
-    '확인서의 “예약 코드”를 넣고 “상태”를 정합니다. “대기 중”이냐 “확정됨”이냐가 카드가 두 구역 가운데 어디에 놓일지를 결정합니다.',
+    '확인서의 “예약 코드”를 넣습니다. 유형 옆의 상태 알약에는 “대기 중”이라고 적혀 있고, 클릭하면 “확정됨”으로 바뀌었다가 다시 돌아옵니다. 이것이 카드가 두 구역 가운데 어디에 놓일지를 결정합니다.',
   'help.guide.create-booking.step.6': '“추가”를 클릭합니다.',
   'help.guide.create-booking.result':
     '예약은 유형 칩과 날짜와 코드를 단 카드로 제 구역에 서고, 여행의 다른 모두에게도 나타납니다.',
@@ -3026,7 +3027,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': '예약이 누구를 위한 것인지 밝히기',
   'help.guide.booking-travelers.goal': '예약이 포함하는 동행자를 표시하고, 그런 다음 그 사람의 것만 봅니다.',
   'help.guide.booking-travelers.step.1':
-    '연필로 예약을 엽니다. “동행자”는 양식 위쪽, “예약 유형” 옆에 있고, 예약에 아무도 없는 동안에는 “동행자 지정”이라고 표시됩니다.',
+    '연필로 예약을 엽니다. “동행자”는 “예약 코드” 옆에 있고, 예약에 아무도 없는 동안에는 “동행자 지정”이라고 표시됩니다.',
   'help.guide.booking-travelers.step.2':
     '그곳을 클릭하고 이 예약이 해당하는 사람을 고릅니다. 이름이 있는 “게스트”도 목록에 있습니다. 고른 사람에게는 체크가 붙고 필드에 그 사람의 아바타가 나타납니다. 이름을 다시 클릭하면 풀립니다.',
   'help.guide.booking-travelers.step.3': '“업데이트”를 클릭합니다.',
@@ -3116,7 +3117,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.step.1':
     '카드 머리의 연필을 클릭합니다. “예약 편집”이 그 예약이 아는 모든 것과 함께 열립니다.',
   'help.guide.edit-booking.step.2': '바꿀 것을 바꿉니다. 여기서는 업체가 마침내 보내온 “예약 코드”입니다.',
-  'help.guide.edit-booking.step.3': '“상태”를 “확정됨”으로 둡니다.',
+  'help.guide.edit-booking.step.3': '양식 머리의 “대기 중” 알약을 클릭합니다. “확정됨”으로 바뀝니다.',
   'help.guide.edit-booking.step.4': '“업데이트”를 클릭합니다.',
   'help.guide.edit-booking.result':
     '카드가 옮겨 갑니다. 확정된 예약은 초록 점 뒤, “확정됨” 구역에 서고, 여행의 모두가 그 이동을 봅니다.',
@@ -3398,19 +3399,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': '계획된 연결편 열고 바꾸기',
   'help.guide.change-transit-route.goal': '연결편을 정류장 하나하나로 읽고, 이름을 바꾸거나, 경로를 다시 찾습니다.',
   'help.guide.change-transit-route.step.1':
-    '“교통” 탭에서 계획된 연결편은 “자동 대중교통” 아래에 있습니다. 카드를 클릭합니다.',
+    '“교통” 탭에서 계획된 연결편은 “자동 대중교통” 아래에 있습니다. 카드를 클릭하면 연결편이 예약으로 열립니다.',
   'help.guide.change-transit-route.step.2':
     '위에 “소요 시간”, “환승”, “도보”가 있습니다. 그 아래의 “여정”이 연결편을 정류장 하나하나로 훑고, 승강장과 노선 사이의 도보도 보여 줍니다.',
   'help.guide.change-transit-route.step.3':
-    '“경로 변경”은 검색을 다시 실행합니다. 이 연결편의 양쪽 끝과 날짜는 이미 채워져 있습니다.',
+    '예약 맨 아래의 “경로 변경”은 검색을 다시 실행합니다. 이 연결편의 양쪽 끝과 날짜는 이미 채워져 있습니다.',
   'help.guide.change-transit-route.step.4':
-    '다른 연결편을 골라 “일정에 추가”를 클릭하면 옛것의 자리를 대신합니다. “경로 변경” 옆의 “세부 정보 편집”은 대신 보통의 교통 양식을 열고, 거기에 “예약 코드”, “상태”, 동행자, 파일이 있습니다.',
+    '다른 연결편을 골라 “일정에 추가”를 클릭하면 옛것의 자리를 대신합니다. 같은 막대의 반대쪽 끝에 있는 “편집”은 대신 보통의 교통 양식을 열고, 거기에 “예약 코드”, “상태”, 동행자, 메모, 파일이 있습니다.',
   'help.guide.change-transit-route.result':
     '그 경로는 새 여정을 담고, “교통” 탭의 카드는 새 노선과 시간을 보여 줍니다.',
   'help.guide.change-transit-route.tip.1':
-    '경로의 제목은 글자일 뿐입니다. 옆의 연필은 경로를 건드리지 않고 이름만 바꿉니다. 아래의 “메모”는 markdown을 받고 “편집”과 “미리보기” 탭이 있습니다.',
+    '예약 머리의 제목은 경로를 건드리지 않고 연결편의 이름을 바꿉니다. 메모는 “편집” 뒤의 교통 양식에서 적습니다.',
   'help.guide.change-transit-route.tip.2':
-    '경로 맨 아래의 “삭제”는 그 연결편을 여행에서 빼냅니다. 날짜는 장소들을 그대로 지킵니다.',
+    '예약 맨 아래의 “삭제”는 그 연결편을 여행에서 빼냅니다. 날짜는 장소들을 그대로 지킵니다.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': '한 구간의 이동 방법 바꾸기',
   'help.guide.leg-travel-mode.goal':
@@ -3433,17 +3434,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': '교통 바꾸기 또는 삭제하기',
   'help.guide.edit-transport.goal': '시간, 플랫폼, 예약 코드를 고치거나, 그 이동을 여행에서 빼냅니다.',
-  'help.guide.edit-transport.step.1': '일정에서 교통은 장소들 사이의 색 있는 행입니다. 그 행을 클릭합니다.',
+  'help.guide.edit-transport.step.1':
+    '일정에서 교통은 장소들 사이의 색 있는 행입니다. 그 행을 클릭하면 시간, 경로, “예약 코드”와 함께 그 예약이 열립니다.',
   'help.guide.edit-transport.step.2':
-    '양식은 그것을 만든 바로 그 양식이며, 제목 표시줄에 “교통 편집”이 나옵니다. 모두 바꿀 수 있습니다. 유형, 경로, 날짜와 시간, “예약 코드”, “상태”입니다.',
+    '예약 맨 아래의 “편집”이 그것을 만든 양식을 열고, 제목 표시줄에 “교통 편집”이 나옵니다. 모두 바꿀 수 있습니다. 유형, 경로, 날짜와 시간, “예약 코드”, “상태”입니다.',
   'help.guide.edit-transport.step.3':
     '항공의 경로는 공항의 연쇄이고, 기차의 경로는 역의 연쇄입니다. “경유지 추가”가 그 사이에 하나를 더 넣고, 각 구간은 자기 시간과 자기 항공편 번호 또는 열차 번호를 지킵니다.',
   'help.guide.edit-transport.step.4':
-    '“업데이트”를 클릭합니다. 교통을 아주 없애려면 “교통” 탭의 그 카드에 있는 휴지통을 쓰고 확인합니다.',
+    '“업데이트”를 클릭합니다. 교통을 아주 없애려면 그 예약 맨 아래의 “삭제”나 “교통” 탭의 그 카드에 있는 휴지통을 쓰고 확인합니다.',
   'help.guide.edit-transport.result':
     '변경은 교통이 나타나는 모든 곳에 보입니다. “교통” 탭, 그것이 운행하는 날짜, 그리고 지도 위의 선입니다.',
   'help.guide.edit-transport.tip.1':
-    '같은 양식이 양쪽에서 열립니다. “교통” 탭 카드의 연필과, 일정에 있는 교통 자신의 행입니다. 계획된 대중교통 연결편만 예외로, 그 행은 경로 화면을 열고 거기의 “세부 정보 편집”이 이 양식으로 이어집니다.',
+    '같은 양식이 양쪽에서 열립니다. 일정의 행이 여는 예약의 “편집”을 통해서, 그리고 “교통” 탭 카드의 연필을 통해서입니다. 계획된 대중교통 연결편도 예약으로 열립니다. 거기서 “경로 변경”은 다시 검색하고, “편집”은 이 양식으로 이어집니다.',
   'help.guide.edit-transport.tip.2':
     '교통을 다른 날짜로 옮기는 데에는 양식이 전혀 필요 없습니다. 행을 한 날짜 카드에서 다음 카드로 끕니다.',
   // transport-on-map
diff --git a/shared/src/i18n/ko/places.ts b/shared/src/i18n/ko/places.ts
index db36caa84..10ffcab3b 100644
--- a/shared/src/i18n/ko/places.ts
+++ b/shared/src/i18n/ko/places.ts
@@ -27,8 +27,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': '가져올 유형을 하나 이상 선택하세요.',
   'places.selectionCount': '{count}개 선택됨',
   'places.deleteSelected': '선택 항목 삭제',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': '카테고리 변경',
+  'places.categoryChanged': '장소 {count}곳을 업데이트했습니다',
   'places.kmlKmzImported': 'KMZ/KML에서 {count}개 장소를 가져왔습니다',
   'places.urlResolved': 'URL에서 장소를 가져왔습니다',
   'places.importList': '목록 가져오기',
@@ -51,6 +51,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': '전체 여행 보기',
   'places.filterTracks': '트랙',
   'places.filterByRating': '평점으로 필터링',
+  'places.filterShow': '표시',
+  'places.clearSearch': '검색 지우기',
   'places.yourRating': '내 평점',
   'places.notRated': '아직 평점 없음',
   'places.search': '장소 검색...',
@@ -70,6 +72,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': '도로, 도시, 국가',
   'places.formLat': '위도 (예: 48.8566)',
   'places.formLng': '경도 (예: 2.3522)',
+  'places.formLatLabel': '위도',
+  'places.formLngLabel': '경도',
   'places.formCategory': '카테고리',
   'places.noCategory': '카테고리 없음',
   'places.newCategory': '새 카테고리',
diff --git a/shared/src/i18n/ko/reservations.ts b/shared/src/i18n/ko/reservations.ts
index a67fcab94..b4fcc9da6 100644
--- a/shared/src/i18n/ko/reservations.ts
+++ b/shared/src/i18n/ko/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': '자전거',
   'reservations.type.taxi': '택시',
   'reservations.type.transit': '대중교통',
+  'reservations.typeShort.transit': '대중교통',
   'reservations.type.transport_other': '기타',
   'reservations.confirm.delete': '예약 "{name}"을(를) 삭제할까요?',
   'reservations.confirm.deleteTitle': '예약을 삭제할까요?',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': '위치 / 주소',
   'reservations.locationPlaceholder': '주소, 공항, 호텔...',
   'reservations.confirmationCode': '예약 코드',
+  'reservations.routeLabel': '경로',
+  'reservations.segmentCodes': '구간별 코드',
   'reservations.confirmationPlaceholder': '예: ABC12345',
   'reservations.day': '날',
   'reservations.noDay': '날 없음',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': '삭제 실패',
   'reservations.confirm.remove': '"{name}"의 예약을 제거할까요?',
   'reservations.linkAssignment': '날 배정에 연결',
+  'reservations.linkedTo': '연결 대상',
   'reservations.pickAssignment': '계획에서 배정을 선택하세요...',
   'reservations.noAssignment': '연결 없음 (독립)',
   'reservations.price': '가격',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count}개 예약 발견',
   'reservations.import.previewEmpty': '업로드된 파일에서 예약을 추출할 수 없었습니다.',
   'reservations.import.removeItem': '제거',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': '검토 필요',
+  'reservations.import.tryAi': 'AI로 읽어 보기',
+  'reservations.import.aiParsing': 'AI로 읽는 중…',
   'reservations.import.confirm': '{count}개 예약 가져오기',
   'reservations.import.back': '뒤로',
   'reservations.import.success': '{count}개 예약을 가져왔습니다',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': '동행자',
   'reservations.travelers.assign': '동행자 지정',
   'reservations.travelers.none': '아직 여행 멤버가 없습니다.',
+  'reservations.status.switchTo': '{status}(으)로 변경',
+  'reservations.view.label': '보기',
+  'reservations.view.cards': '카드',
+  'reservations.view.list': '목록',
+  'reservations.view.timeline': '타임라인',
+  'reservations.filter': '필터',
+  'reservations.searchPlaceholder': '검색',
+  'reservations.results': '{total}개 중 {shown}개',
+  'reservations.resetFilters': '필터 초기화',
+  'reservations.noMatches': '이 필터에 맞는 항목이 없습니다',
+  'reservations.viewOptions': '보기 옵션',
+  'reservations.resetView': '보기 초기화',
+  'reservations.group.label': '그룹 기준',
+  'reservations.group.status': '상태',
+  'reservations.group.day': '일자',
+  'reservations.group.type': '유형',
+  'reservations.group.none': '그룹 없음',
+  'reservations.transitApart': '대중교통을 별도 구역으로',
+  'reservations.group.before': '여행 전',
+  'reservations.group.after': '여행 후',
+  'reservations.group.undated': '날짜 없음',
+  'reservations.sort.label': '정렬 기준',
+  'reservations.sort.date': '날짜',
+  'reservations.sort.title': '제목',
+  'reservations.sort.type': '유형',
+  'reservations.sort.status': '상태',
+  'reservations.sort.earlyFirst': '이른 순',
+  'reservations.sort.lateFirst': '늦은 순',
+  'reservations.sort.aToZ': 'A→Z',
+  'reservations.sort.zToA': 'Z→A',
+  'reservations.timeline.dayCount': '{count}일',
+  'reservations.timeline.zoom': '확대',
+  'reservations.timeline.trip': '여행',
+  'reservations.timeline.day': '하루',
+  'reservations.timeline.prevDay': '이전 날',
+  'reservations.timeline.nextDay': '다음 날',
+  'reservations.timeline.openDay': '{day} 시간별로 보기',
+  'reservations.timeline.nothingThisDay': '이 날에는 아무것도 없습니다.',
+  'reservations.timeline.today': '오늘',
+  'reservations.timeline.now': '지금',
+  'reservations.timeline.byType': '유형별로 한 줄씩',
+  'reservations.timeline.context': '다른 탭도 표시',
+  'reservations.timeline.contextBookings': '예약',
+  'reservations.timeline.contextTransports': '교통',
+  'reservations.timeline.noneDated': '아직 날짜가 있는 항목이 없습니다.',
+  'reservations.undated': '날짜 없음',
+  'reservations.nights': '박',
+  'reservations.start': '시작',
+  'reservations.end': '종료',
+  'reservations.rename': '이름 변경',
+  'reservations.copyCode': '예약 코드 복사',
+  'reservations.copyFailed': '복사하지 못했습니다',
+  'reservations.showInFiles': '파일에서 보기',
 };
 export default reservations;
diff --git a/shared/src/i18n/ko/transport.ts b/shared/src/i18n/ko/transport.ts
index b610c0f19..36c5a26d3 100644
--- a/shared/src/i18n/ko/transport.ts
+++ b/shared/src/i18n/ko/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': '교통 편집',
   'transport.title': '교통',
   'transport.addManual': '교통',
+  'transport.empty': '아직 교통편이 없습니다',
 };
 export default transport;
diff --git a/shared/src/i18n/nl/budget.ts b/shared/src/i18n/nl/budget.ts
index 879e84b2c..39db90298 100644
--- a/shared/src/i18n/nl/budget.ts
+++ b/shared/src/i18n/nl/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Alleen in totaal — nog niet verrekend',
   'costs.tapToInclude': 'Tik om toe te voegen',
   'costs.amount': 'Bedrag',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Verdelen',
+  'costs.splitEqually': 'Gelijk',
+  'costs.splitCustom': 'Aangepast',
+  'costs.splitTicket': 'Bon',
+  'costs.perPerson': '{amount} per persoon',
+  'costs.payersHint': 'Vink aan wie heeft betaald en typ hoeveel ieder heeft bijgedragen.',
+  'costs.splitHint.equally': 'Iedereen die is aangevinkt betaalt hetzelfde deel.',
+  'costs.splitHint.custom': 'Typ het deel van elke persoon; samen moeten ze op het totaal uitkomen.',
+  'costs.splitHint.ticket': 'Zet op een rij wat er op de bon stond en vink aan wie welk item had.',
   'costs.filter.allCategories': 'Alle categorieën',
   'costs.filter.allDays': 'Alle dagen',
   'costs.expensesCount': '{count} uitgaven',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Bonnetjes',
   'costs.receiptsTitle': 'Bonnetjes & facturen',
   'costs.attachReceipt': 'Bon / factuur bijvoegen',
+  'costs.attach': 'Bijvoegen',
   'costs.scan.button': 'Bon scannen',
   'costs.scan.reading': 'Bon wordt gelezen…',
   'costs.scan.review': 'Uitgave controleren',
   'costs.scan.nothingRead': 'Uit deze foto kon geen bon worden gelezen.',
   'costs.scan.failed': 'Het lezen van de bon kon niet worden gestart.',
   'costs.scan.title': 'Bon scannen',
-  'costs.scan.accepted': 'Een foto van één bon (JPG, PNG of WEBP, max. 10 MB). Het AI-model leest hem op de achtergrond; daarna controleer je de uitgave voordat die wordt opgeslagen.',
+  'costs.scan.accepted':
+    'Een foto van één bon (JPG, PNG of WEBP, max. 10 MB). Het AI-model leest hem op de achtergrond; daarna controleer je de uitgave voordat die wordt opgeslagen.',
   'costs.scan.dropHere': 'Zet de foto van de bon hier neer, of klik om er een te kiezen of te maken',
   'costs.scan.dropActive': 'Laat de foto los om te scannen',
   'costs.scan.start': 'Scannen',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Geen bonnetjes bijgevoegd',
   'costs.deleteReceipt': 'Bonnetje verwijderen',
   'costs.viewReceipt': 'Bonnetje bekijken',
-  'costs.receiptLeftBehind': 'Opslaan mislukt en er staan nog {count} geüploade bonnen. Verwijder ze op het tabblad Bestanden.',
+  'costs.receiptLeftBehind':
+    'Opslaan mislukt en er staan nog {count} geüploade bonnen. Verwijder ze op het tabblad Bestanden.',
 };
 export default budget;
diff --git a/shared/src/i18n/nl/dayplan.ts b/shared/src/i18n/nl/dayplan.ts
index 24189dbf0..4b4e1fdfe 100644
--- a/shared/src/i18n/nl/dayplan.ts
+++ b/shared/src/i18n/nl/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Alle plaatsen toegewezen',
   'dayplan.mobile.noMatch': 'Geen resultaat',
   'dayplan.mobile.createNew': 'Nieuwe plaats aanmaken',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Alle dagen uitklappen', // en-fallback
+  'dayplan.collapseAll': 'Alle dagen inklappen', // en-fallback
   'dayplan.reorderDays': 'Dagen herordenen',
   'dayplan.reorderTitle': 'Dagen herordenen',
   'dayplan.reorderHint': 'De plaatsen, notities en boekingen van een dag gaan mee.',
diff --git a/shared/src/i18n/nl/help.ts b/shared/src/i18n/nl/help.ts
index e8fb4c158..d1d9b93f7 100644
--- a/shared/src/i18n/nl/help.ts
+++ b/shared/src/i18n/nl/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'nl' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Hulp en documentatie',
+  'help.search': 'Zoeken in documentatie…',
+  'help.contents': 'Inhoud',
+  'help.noResults': 'Geen overeenkomende pagina’s.',
+  'help.errorTitle': 'Deze pagina kan niet worden geladen',
+  'help.errorBody': 'De help-inhoud komt van de TREK-wiki. Controleer je verbinding en probeer het opnieuw.',
 
   // center
   'help.center.button': 'Hulp bij dit scherm',
@@ -1047,7 +1047,7 @@ const help: TranslationStrings = {
     'Travel & map: boekingsroutes altijd op de kaart, de pil Plaatsen ontdekken, routeoptimalisatie vanaf je accommodatie, vervaagde boekingscodes en boekingsroutes met label.',
   'help.ctx.settings-display.bullet.3':
     'Opstarten: of TREK opent op het dashboard of op de actieve reis, en welk tabblad van een reis als eerste verschijnt.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Weergave',
   'help.ctx.settings-appearance.summary':
     'Hoe TREK eruitziet op dit account: licht of donker, de accentkleur, glas en beweging, tekstgrootte, en welke widgets het dashboard toont. Alles geldt live, op elk apparaat waarop je inlogt.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2321,9 +2321,9 @@ const help: TranslationStrings = {
     'Open de stop waar de boeking bij hoort. De details tonen een strook met Bevestigd of In behandeling en de naam van de boeking.',
   'help.guide.place-booking.step.2':
     'De strook draagt de Datum, de Tijd en de Boekingscode, en de notities die de boeking heeft.',
-  'help.guide.place-booking.step.3': 'Klik op de strook. Het eigen formulier van de boeking gaat erop open.',
+  'help.guide.place-booking.step.3': 'Klik op de strook. De boeking gaat boven de kaart open.',
   'help.guide.place-booking.step.4':
-    'Koppelen aan dagtoewijzing is wat een boeking aan een stop hangt, en hier noemt het deze al. Sluit het formulier weer.',
+    'Bewerken onderaan de boeking opent zijn eigen formulier. Koppelen aan dagtoewijzing is daar wat een boeking aan een stop hangt, en hier noemt het deze al. Sluit het formulier weer.',
   'help.guide.place-booking.step.5':
     'Een nieuwe boeking voor een stop begint in de dagenkolom: zweef over de stop en klik op de + aan het eind. Het formulier gaat open als Nieuwe reservering, al eraan gekoppeld.',
   'help.guide.place-booking.result':
@@ -2687,7 +2687,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'De kleur zegt hoe een boeking ervoor staat: een groene rij is bevestigd, een amberkleurige is nog in behandeling. Accommodaties staan niet in deze lijst, die hebben hun eigen blok eronder.',
   'help.guide.day-bookings.step.4':
-    'De lijst leest de boekingen alleen uit. Een boeking maak en wijzig je onder Boekingen.',
+    'Klik op een rij en de boeking gaat open. Bewerken onderaan wijzigt hem; nieuwe boekingen maak je onder Boekingen.',
   'help.guide.day-bookings.result':
     'Alles wat op de dag gedateerd is, en alles wat aan een van zijn stops hangt, staat in deze ene lijst.',
   'help.guide.day-bookings.tip.1':
@@ -3235,13 +3235,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Klik rechtsboven op het tabblad op Handmatige boeking. Nieuwe reservering gaat open.',
   'help.guide.create-booking.step.2':
-    'Kies het Boekingstype uit de lijst bovenaan het formulier, naast Reizigers. Accommodatie, Restaurant, Evenement, Rondleiding, Parkeren en Overig zijn de zes die dit tabblad maakt, en het formulier verandert met de keuze: alleen Accommodatie ruilt haar data in voor een reeks dagen.',
+    'Klik op de typepil onder de titel, in de kop van het formulier, en kies het Boekingstype. Accommodatie, Restaurant, Evenement, Rondleiding, Parkeren en Overig zijn de zes die dit tabblad maakt, en het formulier verandert met de keuze: alleen Accommodatie ruilt haar data in voor een reeks dagen.',
   'help.guide.create-booking.step.3':
     'Typ de Titel. Het is het enige veld waar het formulier op staat, en Toevoegen blijft dood tot er iets in staat.',
   'help.guide.create-booking.step.4':
     'Zet Datum en Starttijd, en Einddatum en Eindtijd als de boeking een eind heeft. De kalenders bieden alleen dagen binnen de reis, en een eind dat niet na het begin ligt zegt dat in rood en blokkeert Toevoegen.',
   'help.guide.create-booking.step.5':
-    'Vul de Boekingscode uit de bevestiging in en zet Status. In behandeling of Bevestigd bepaalt in welke van de twee secties de kaart landt.',
+    'Vul de Boekingscode uit de bevestiging in. De statuspil naast het type toont In behandeling; een klik zet hem op Bevestigd en weer terug, en dat bepaalt in welke van de twee secties de kaart landt.',
   'help.guide.create-booking.step.6': 'Klik op Toevoegen.',
   'help.guide.create-booking.result':
     'De boeking is een kaart in haar sectie, met haar chip voor de soort, haar data en haar code, en alle anderen in de reis zien hem verschijnen.',
@@ -3292,7 +3292,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Zeggen voor wie een boeking is',
   'help.guide.booking-travelers.goal': 'Markeer de reizigers die een boeking dekt, en zie daarna alleen die van hen.',
   'help.guide.booking-travelers.step.1':
-    'Open de boeking met het potlood. Reizigers staat bovenaan het formulier, naast Boekingstype, en toont Reizigers toewijzen zolang er niemand op de boeking staat.',
+    'Open de boeking met het potlood. Reizigers staat naast de Boekingscode en toont Reizigers toewijzen zolang er niemand op de boeking staat.',
   'help.guide.booking-travelers.step.2':
     'Klik erop en kies de mensen voor wie deze boeking is; genoemde gasten staan ook in de lijst. Een gekozen persoon krijgt een vinkje en zijn avatar in het veld. Klik nog eens op de naam om hem eraf te halen.',
   'help.guide.booking-travelers.step.3': 'Klik op Bijwerken.',
@@ -3388,7 +3388,8 @@ const help: TranslationStrings = {
     'Klik op het potlood in de kop van de kaart. Reservering bewerken gaat open met alles wat de boeking weet.',
   'help.guide.edit-booking.step.2':
     'Wijzig wat gewijzigd moet worden, hier de Boekingscode die de aanbieder eindelijk stuurde.',
-  'help.guide.edit-booking.step.3': 'Zet Status op Bevestigd.',
+  'help.guide.edit-booking.step.3':
+    'Klik op de pil In behandeling in de kop van het formulier. Hij springt op Bevestigd.',
   'help.guide.edit-booking.step.4': 'Klik op Bijwerken.',
   'help.guide.edit-booking.result':
     'De kaart verhuist: een bevestigde boeking staat in de sectie Bevestigd achter een groene stip, en iedereen in de reis ziet haar verhuizen.',
@@ -3682,19 +3683,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'De verbinding halte voor halte lezen, hernoemen, of de route opnieuw laten opzoeken.',
   'help.guide.change-transit-route.step.1':
-    'In het tabblad Transport zitten de geplande verbindingen onder Automatisch openbaar vervoer. Klik op de kaart.',
+    'In het tabblad Transport zitten de geplande verbindingen onder Automatisch openbaar vervoer. Klik op de kaart; de verbinding gaat open als boeking.',
   'help.guide.change-transit-route.step.2':
     'Duur, Overstappen en Lopen staan bovenaan. Reisplan daaronder loopt de verbinding halte voor halte door, met de perrons en de stukken lopen tussen de lijnen.',
   'help.guide.change-transit-route.step.3':
-    'Route wijzigen draait het zoeken opnieuw, al gevuld met de twee uiteinden van deze verbinding en met haar dag.',
+    'Route wijzigen onderaan de boeking draait het zoeken opnieuw, al gevuld met de twee uiteinden van deze verbinding en met haar dag.',
   'help.guide.change-transit-route.step.4':
-    'Kies een andere verbinding en klik op Toevoegen aan dag; die neemt de plaats van de oude in. Details bewerken, naast Route wijzigen, opent in plaats daarvan het gewone vervoersformulier, waar de Boekingscode, de Status, de reizigers en de bestanden wonen.',
+    'Kies een andere verbinding en klik op Toevoegen aan dag; die neemt de plaats van de oude in. Bewerken, aan het andere eind van dezelfde balk, opent in plaats daarvan het gewone vervoersformulier, waar de Boekingscode, de Status, de reizigers, de notities en de bestanden wonen.',
   'help.guide.change-transit-route.result':
     'De ov-reis draagt het nieuwe reisplan, en haar kaart in het tabblad Transport toont de nieuwe lijnen en tijden.',
   'help.guide.change-transit-route.tip.1':
-    'De titel van de ov-reis is alleen tekst: het potlood ernaast hernoemt hem zonder de route aan te raken. Notities eronder nemen markdown en hebben een tabblad Bewerken en een tabblad Voorbeeld.',
+    'De titel in de kop van de boeking hernoemt de verbinding zonder de route aan te raken. Haar notities schrijf je in het vervoersformulier achter Bewerken.',
   'help.guide.change-transit-route.tip.2':
-    'Verwijderen onderaan de ov-reis haalt de verbinding uit de reis; de dag houdt zijn stops.',
+    'Verwijderen onderaan de boeking haalt de verbinding uit de reis; de dag houdt zijn stops.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Wijzigen hoe één traject wordt afgelegd',
   'help.guide.leg-travel-mode.goal':
@@ -3719,17 +3720,18 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.title': 'Vervoer wijzigen of verwijderen',
   'help.guide.edit-transport.goal':
     'Een tijd, een perron of een boekingscode rechtzetten, of de rit uit de reis halen.',
-  'help.guide.edit-transport.step.1': 'In het dagplan is een transport een gekleurde rij tussen de stops. Klik erop.',
+  'help.guide.edit-transport.step.1':
+    'In het dagplan is een transport een gekleurde rij tussen de stops. Klik erop; zijn boeking gaat open met de tijden, de route en de Boekingscode.',
   'help.guide.edit-transport.step.2':
-    'Het formulier is hetzelfde dat het aanmaakte, met Vervoer bewerken in de titelbalk. Alles kan veranderen: het type, de route, de dagen en tijden, de Boekingscode, de Status.',
+    'Bewerken onderaan de boeking opent het formulier dat hem aanmaakte, met Vervoer bewerken in de titelbalk. Alles kan veranderen: het type, de route, de dagen en tijden, de Boekingscode, de Status.',
   'help.guide.edit-transport.step.3':
     'De route van een vlucht is een keten van luchthavens, die van een trein een keten van stations. Tussenstop toevoegen zet er nog een tussenin, en elk traject houdt zijn eigen tijden en zijn eigen vlucht- of treinnummer.',
   'help.guide.edit-transport.step.4':
-    'Klik op Bijwerken. Om het transport helemaal weg te halen, gebruik je de prullenbak op zijn kaart in het tabblad Transport en bevestig je.',
+    'Klik op Bijwerken. Om het transport helemaal weg te halen, gebruik je Verwijderen onderaan zijn boeking, of de prullenbak op zijn kaart in het tabblad Transport, en bevestig je.',
   'help.guide.edit-transport.result':
     'De wijziging is overal te zien waar het transport voorkomt: het tabblad Transport, de dag waarop het rijdt, en zijn lijn op de kaart.',
   'help.guide.edit-transport.tip.1':
-    'Hetzelfde formulier gaat van twee kanten open, via het potlood op de kaart in het tabblad Transport en via de eigen rij van het transport in het dagplan. Een geplande ov-verbinding is de uitzondering: haar rij opent de ov-reis, en Details bewerken leidt daar naar dit formulier.',
+    'Hetzelfde formulier gaat van twee kanten open: via Bewerken in de boeking die een rij van het dagplan opent, en via het potlood op de kaart in het tabblad Transport. Een geplande ov-verbinding gaat ook als boeking open; Route wijzigen zoekt daar opnieuw, en Bewerken leidt naar dit formulier.',
   'help.guide.edit-transport.tip.2':
     'Een transport naar een andere dag verplaatsen heeft het formulier helemaal niet nodig: sleep zijn rij van de ene dagkaart naar de volgende.',
   // transport-on-map
diff --git a/shared/src/i18n/nl/places.ts b/shared/src/i18n/nl/places.ts
index 7002d7dff..e3381c6c9 100644
--- a/shared/src/i18n/nl/places.ts
+++ b/shared/src/i18n/nl/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Selecteer minstens één type.',
   'places.selectionCount': '{count} geselecteerd',
   'places.deleteSelected': 'Selectie verwijderen',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Categorie wijzigen',
+  'places.categoryChanged': '{count} plaatsen bijgewerkt',
   'places.kmlKmzImported': '{count} plaatsen geïmporteerd uit KMZ/KML',
   'places.urlResolved': 'Plaats geïmporteerd van URL',
   'places.importList': 'Lijst importeren',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Hele reis tonen',
   'places.filterTracks': 'Tracks',
   'places.filterByRating': 'Filteren op beoordeling',
+  'places.filterShow': 'Tonen',
+  'places.clearSearch': 'Zoekopdracht wissen',
   'places.yourRating': 'Jouw beoordeling',
   'places.notRated': 'Nog niet beoordeeld',
   'places.search': 'Plaatsen zoeken...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Straat, stad, land',
   'places.formLat': 'Breedtegraad (bijv. 48.8566)',
   'places.formLng': 'Lengtegraad (bijv. 2.3522)',
+  'places.formLatLabel': 'Breedtegraad',
+  'places.formLngLabel': 'Lengtegraad',
   'places.formCategory': 'Categorie',
   'places.noCategory': 'Geen categorie',
   'places.newCategory': 'Nieuwe categorie',
diff --git a/shared/src/i18n/nl/reservations.ts b/shared/src/i18n/nl/reservations.ts
index e472d0949..f817ff315 100644
--- a/shared/src/i18n/nl/reservations.ts
+++ b/shared/src/i18n/nl/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Fiets',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Openbaar vervoer',
+  'reservations.typeShort.transit': 'OV',
   'reservations.type.transport_other': 'Overig',
   'reservations.confirm.delete': 'Weet je zeker dat je de reservering "{name}" wilt verwijderen?',
   'reservations.confirm.deleteTitle': 'Boeking verwijderen?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Locatie / Adres',
   'reservations.locationPlaceholder': 'Adres, luchthaven, hotel...',
   'reservations.confirmationCode': 'Boekingscode',
+  'reservations.routeLabel': 'Route',
+  'reservations.segmentCodes': 'Codes per traject',
   'reservations.confirmationPlaceholder': 'bijv. ABC12345',
   'reservations.day': 'Dag',
   'reservations.noDay': 'Geen dag',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Verwijderen mislukt',
   'reservations.confirm.remove': 'Reservering voor "{name}" verwijderen?',
   'reservations.linkAssignment': 'Koppelen aan dagtoewijzing',
+  'reservations.linkedTo': 'Gekoppeld aan',
   'reservations.pickAssignment': 'Selecteer een toewijzing uit je plan...',
   'reservations.noAssignment': 'Geen koppeling (zelfstandig)',
   'reservations.price': 'Prijs',
@@ -135,9 +139,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} reservering(en) gevonden',
   'reservations.import.previewEmpty': 'Er konden geen reserveringen worden geëxtraheerd uit de geüploade bestanden.',
   'reservations.import.removeItem': 'Verwijderen',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Controleren',
+  'reservations.import.tryAi': 'Uitlezen met AI proberen',
+  'reservations.import.aiParsing': 'Uitlezen met AI…',
   'reservations.import.confirm': '{count} reservering(en) importeren',
   'reservations.import.back': 'Terug',
   'reservations.import.success': '{count} reservering(en) geïmporteerd',
@@ -181,5 +185,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Reizigers',
   'reservations.travelers.assign': 'Reizigers toewijzen',
   'reservations.travelers.none': 'Nog geen reisgenoten in deze reis.',
+  'reservations.status.switchTo': 'Op {status} zetten',
+  'reservations.view.label': 'Weergave',
+  'reservations.view.cards': 'Kaarten',
+  'reservations.view.list': 'Lijst',
+  'reservations.view.timeline': 'Tijdlijn',
+  'reservations.filter': 'Filteren',
+  'reservations.searchPlaceholder': 'Zoeken',
+  'reservations.results': '{shown} van {total}',
+  'reservations.resetFilters': 'Filters resetten',
+  'reservations.noMatches': 'Niets voldoet aan deze filters',
+  'reservations.viewOptions': 'Weergaveopties',
+  'reservations.resetView': 'Weergave resetten',
+  'reservations.group.label': 'Groeperen op',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Dag',
+  'reservations.group.type': 'Type',
+  'reservations.group.none': 'Niet groeperen',
+  'reservations.transitApart': 'Openbaar vervoer als eigen sectie',
+  'reservations.group.before': 'Vóór de reis',
+  'reservations.group.after': 'Na de reis',
+  'reservations.group.undated': 'Zonder datum',
+  'reservations.sort.label': 'Sorteren op',
+  'reservations.sort.date': 'Datum',
+  'reservations.sort.title': 'Titel',
+  'reservations.sort.type': 'Type',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Vroegste eerst',
+  'reservations.sort.lateFirst': 'Laatste eerst',
+  'reservations.sort.aToZ': 'A tot Z',
+  'reservations.sort.zToA': 'Z tot A',
+  'reservations.timeline.dayCount': '{count} dagen',
+  'reservations.timeline.zoom': 'Zoom',
+  'reservations.timeline.trip': 'Reis',
+  'reservations.timeline.day': 'Dag',
+  'reservations.timeline.prevDay': 'Vorige dag',
+  'reservations.timeline.nextDay': 'Volgende dag',
+  'reservations.timeline.openDay': '{day} per uur openen',
+  'reservations.timeline.nothingThisDay': 'Niets op deze dag.',
+  'reservations.timeline.today': 'Vandaag',
+  'reservations.timeline.now': 'nu',
+  'reservations.timeline.byType': 'Eén baan per type',
+  'reservations.timeline.context': 'Het andere tabblad tonen',
+  'reservations.timeline.contextBookings': 'Boekingen',
+  'reservations.timeline.contextTransports': 'Transport',
+  'reservations.timeline.noneDated': 'Hiervan heeft nog niets een datum.',
+  'reservations.undated': 'Zonder datum',
+  'reservations.nights': 'Nachten',
+  'reservations.start': 'Begin',
+  'reservations.end': 'Einde',
+  'reservations.rename': 'Hernoemen',
+  'reservations.copyCode': 'Boekingscode kopiëren',
+  'reservations.copyFailed': 'Kopiëren is mislukt',
+  'reservations.showInFiles': 'Tonen in bestanden',
 };
 export default reservations;
diff --git a/shared/src/i18n/nl/transport.ts b/shared/src/i18n/nl/transport.ts
index 181c939d3..2f35d67a6 100644
--- a/shared/src/i18n/nl/transport.ts
+++ b/shared/src/i18n/nl/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Vervoer bewerken',
   'transport.title': 'Transport',
   'transport.addManual': 'Vervoer',
+  'transport.empty': 'Nog geen vervoer',
 };
 export default transport;
diff --git a/shared/src/i18n/pl/budget.ts b/shared/src/i18n/pl/budget.ts
index 68663cec7..6ce3a8c56 100644
--- a/shared/src/i18n/pl/budget.ts
+++ b/shared/src/i18n/pl/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Tylko w sumie — jeszcze nierozliczone',
   'costs.tapToInclude': 'Dotknij, aby dodać',
   'costs.amount': 'Kwota',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Podział',
+  'costs.splitEqually': 'Po równo',
+  'costs.splitCustom': 'Własny',
+  'costs.splitTicket': 'Paragon',
+  'costs.perPerson': '{amount} na osobę',
+  'costs.payersHint': 'Zaznacz, kto zapłacił, i wpisz, ile każda z tych osób wyłożyła.',
+  'costs.splitHint.equally': 'Wszyscy zaznaczeni płacą taką samą część.',
+  'costs.splitHint.custom': 'Wpisz udział każdej osoby; razem muszą dać całą kwotę.',
+  'costs.splitHint.ticket': 'Wypisz, co było na paragonie, i zaznacz, kto miał którą pozycję.',
   'costs.filter.allCategories': 'Wszystkie kategorie',
   'costs.filter.allDays': 'Wszystkie dni',
   'costs.expensesCount': '{count} wydatków',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Paragony',
   'costs.receiptsTitle': 'Paragony i faktury',
   'costs.attachReceipt': 'Załącz paragon / fakturę',
+  'costs.attach': 'Załącz',
   'costs.scan.button': 'Zeskanuj paragon',
   'costs.scan.reading': 'Odczytywanie paragonu…',
   'costs.scan.review': 'Sprawdź wydatek',
   'costs.scan.nothingRead': 'Z tego zdjęcia nie udało się odczytać paragonu.',
   'costs.scan.failed': 'Nie udało się rozpocząć odczytu paragonu.',
   'costs.scan.title': 'Zeskanuj paragon',
-  'costs.scan.accepted': 'Zdjęcie jednego paragonu (JPG, PNG lub WEBP, do 10 MB). Model AI odczyta je w tle, a potem sprawdzisz wydatek przed zapisaniem.',
+  'costs.scan.accepted':
+    'Zdjęcie jednego paragonu (JPG, PNG lub WEBP, do 10 MB). Model AI odczyta je w tle, a potem sprawdzisz wydatek przed zapisaniem.',
   'costs.scan.dropHere': 'Upuść tu zdjęcie paragonu albo kliknij, aby je wybrać lub zrobić',
   'costs.scan.dropActive': 'Upuść zdjęcie, aby je zeskanować',
   'costs.scan.start': 'Skanuj',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Brak załączonych paragonów',
   'costs.deleteReceipt': 'Usuń paragon',
   'costs.viewReceipt': 'Zobacz paragon',
-  'costs.receiptLeftBehind': 'Zapis nie powiódł się, a {count} przesłanych paragonów wciąż tam jest. Usuń je w zakładce Pliki.',
+  'costs.receiptLeftBehind':
+    'Zapis nie powiódł się, a {count} przesłanych paragonów wciąż tam jest. Usuń je w zakładce Pliki.',
 };
 export default budget;
diff --git a/shared/src/i18n/pl/dayplan.ts b/shared/src/i18n/pl/dayplan.ts
index b657916c6..cf5c1443a 100644
--- a/shared/src/i18n/pl/dayplan.ts
+++ b/shared/src/i18n/pl/dayplan.ts
@@ -79,8 +79,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Wszystkie miejsca przypisane',
   'dayplan.mobile.noMatch': 'Brak wyników',
   'dayplan.mobile.createNew': 'Utwórz nowe miejsce',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Rozwiń wszystkie dni', // en-fallback
+  'dayplan.collapseAll': 'Zwiń wszystkie dni', // en-fallback
   'dayplan.reorderDays': 'Zmień kolejność dni',
   'dayplan.reorderTitle': 'Zmień kolejność dni',
   'dayplan.reorderHint': 'Miejsca, notatki i rezerwacje danego dnia przenoszą się razem z nim.',
diff --git a/shared/src/i18n/pl/help.ts b/shared/src/i18n/pl/help.ts
index 0ee35672f..e3db0a2fa 100644
--- a/shared/src/i18n/pl/help.ts
+++ b/shared/src/i18n/pl/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'pl' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Pomoc i dokumentacja',
+  'help.search': 'Szukaj w dokumentacji…',
+  'help.contents': 'Spis treści',
+  'help.noResults': 'Brak pasujących stron.',
+  'help.errorTitle': 'Nie udało się wczytać tej strony',
+  'help.errorBody': 'Treść pomocy pochodzi z wiki TREK. Sprawdź połączenie i spróbuj ponownie.',
 
   // center
   'help.center.button': 'Pomoc do tego ekranu',
@@ -1019,7 +1019,7 @@ const help: TranslationStrings = {
     'Travel & map: trasy rezerwacji zawsze na mapie, pigułka Odkrywaj miejsca, optymalizacja trasy od zakwaterowania, rozmyte kody rezerwacji i etykiety tras rezerwacji.',
   'help.ctx.settings-display.bullet.3':
     'Uruchamianie: czy TREK otwiera się na pulpicie, czy na aktywnej podróży, i która karta podróży pojawia się pierwsza.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Wygląd',
   'help.ctx.settings-appearance.summary':
     'Jak TREK wygląda na tym koncie: jasny lub ciemny, kolor akcentu, szkło i ruch, rozmiar tekstu oraz które widżety pokazuje pulpit. Wszystko działa na żywo, na każdym urządzeniu, na którym się logujesz.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2262,9 +2262,9 @@ const help: TranslationStrings = {
     'Otwórz przystanek, do którego należy rezerwacja. Karta pokazuje pasek z Potwierdzona albo Oczekująca i z nazwą rezerwacji.',
   'help.guide.place-booking.step.2':
     'Na pasku są Data, Godzina i Kod rezerwacji oraz wszelkie notatki, które rezerwacja ma.',
-  'help.guide.place-booking.step.3': 'Kliknij pasek. Otwiera się na nim własny formularz rezerwacji.',
+  'help.guide.place-booking.step.3': 'Kliknij pasek. Rezerwacja otwiera się nad mapą.',
   'help.guide.place-booking.step.4':
-    'To Przypisz do miejsca przypina rezerwację do przystanku, a tutaj już wskazuje ten jeden. Zamknij formularz z powrotem.',
+    'Edytuj u dołu rezerwacji otwiera jej własny formularz. To tam Przypisz do miejsca przypina rezerwację do przystanku, a tutaj już wskazuje ten jeden. Zamknij formularz z powrotem.',
   'help.guide.place-booking.step.5':
     'Nowa rezerwacja dla przystanku zaczyna się w kolumnie dni: najedź na przystanek i kliknij + na jego końcu. Formularz otwiera się jako Nowa rezerwacja, już z nim powiązany.',
   'help.guide.place-booking.result':
@@ -2620,7 +2620,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Kolor mówi, jak stoi rezerwacja: zielony wiersz jest potwierdzony, bursztynowy wciąż oczekuje. Hoteli nie ma na tej liście, mają własny blok niżej.',
   'help.guide.day-bookings.step.4':
-    'Lista tylko odczytuje rezerwacje. Rezerwację tworzy się i zmienia w zakładce Rezerwacje.',
+    'Kliknij wiersz, a rezerwacja się otworzy. Edytuj u jej dołu ją zmienia; nowe rezerwacje tworzy się w zakładce Rezerwacje.',
   'help.guide.day-bookings.result':
     'Wszystko datowane na ten dzień i wszystko wiszące na którymś z jego przystanków jest na tej jednej liście.',
   'help.guide.day-bookings.tip.1':
@@ -3159,13 +3159,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Kliknij Rezerwacja ręczna u góry po prawej stronie zakładki. Otwiera się Nowa rezerwacja.',
   'help.guide.create-booking.step.2':
-    'Wybierz Rodzaj rezerwacji z listy u góry formularza, obok pola Podróżni. Zakwaterowanie, Restauracja, Wydarzenie, Wycieczka, Parking i Inne to te sześć, które ta zakładka tworzy, a formularz zmienia się razem z wyborem: tylko Zakwaterowanie wymienia swoje daty na zakres dni.',
+    'Kliknij plakietkę rodzaju pod tytułem, w nagłówku formularza, i wybierz Rodzaj rezerwacji. Zakwaterowanie, Restauracja, Wydarzenie, Wycieczka, Parking i Inne to te sześć, które ta zakładka tworzy, a formularz zmienia się razem z wyborem: tylko Zakwaterowanie wymienia swoje daty na zakres dni.',
   'help.guide.create-booking.step.3':
     'Wpisz Tytuł. To jedyne pole, przy którym formularz się upiera, a Dodaj pozostaje martwy, dopóki nic w nim nie ma.',
   'help.guide.create-booking.step.4':
     'Ustaw Datę i Godzinę rozpoczęcia, a także Datę końca i Godzinę zakończenia, jeśli rezerwacja ma koniec. Kalendarze oferują tylko dni wewnątrz podróży, a koniec, który nie jest po początku, mówi to na czerwono i blokuje Dodaj.',
   'help.guide.create-booking.step.5':
-    'Wstaw Kod rezerwacji z potwierdzenia i ustaw Status. Oczekująca albo Potwierdzona decyduje, w której z dwóch sekcji wyląduje karta.',
+    'Wpisz Kod rezerwacji z potwierdzenia. Plakietka statusu obok rodzaju pokazuje Oczekująca; kliknięcie przełącza ją na Potwierdzona i z powrotem, a to decyduje, w której z dwóch sekcji wyląduje karta.',
   'help.guide.create-booking.step.6': 'Kliknij Dodaj.',
   'help.guide.create-booking.result':
     'Rezerwacja jest kartą w swojej sekcji, ze swoją plakietką rodzaju, swoimi datami i swoim kodem, a wszyscy pozostali w podróży widzą, jak się pojawia.',
@@ -3216,7 +3216,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Zaznacz podróżnych, których rezerwacja obejmuje, a potem oglądaj tylko ich rezerwacje.',
   'help.guide.booking-travelers.step.1':
-    'Otwórz rezerwację ołówkiem. Pole Podróżni jest u góry formularza, obok pola Rodzaj rezerwacji, i dopóki nikogo nie ma w rezerwacji, pokazuje Przypisz podróżnych.',
+    'Otwórz rezerwację ołówkiem. Pole Podróżni jest obok Kodu rezerwacji i dopóki nikogo nie ma w rezerwacji, pokazuje Przypisz podróżnych.',
   'help.guide.booking-travelers.step.2':
     'Kliknij je i wybierz ludzi, dla których ta rezerwacja jest; nazwani goście też są na liście. Wybrany dostaje ptaszka i swój awatar w polu. Kliknij imię jeszcze raz, żeby go zdjąć.',
   'help.guide.booking-travelers.step.3': 'Kliknij Aktualizuj.',
@@ -3310,7 +3310,7 @@ const help: TranslationStrings = {
     'Kliknij ołówek w nagłówku karty. Otwiera się Edytuj rezerwację ze wszystkim, co rezerwacja wie.',
   'help.guide.edit-booking.step.2':
     'Zmień to, co trzeba zmienić, tutaj Kod rezerwacji, który operator w końcu przysłał.',
-  'help.guide.edit-booking.step.3': 'Ustaw Status na Potwierdzona.',
+  'help.guide.edit-booking.step.3': 'Kliknij plakietkę Oczekująca w nagłówku formularza. Zmienia się na Potwierdzona.',
   'help.guide.edit-booking.step.4': 'Kliknij Aktualizuj.',
   'help.guide.edit-booking.result':
     'Karta się przenosi: potwierdzona rezerwacja stoi w sekcji Potwierdzona za zieloną kropką, a wszyscy w podróży widzą, jak się przenosi.',
@@ -3602,19 +3602,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Przeczytaj połączenie przystanek po przystanku, zmień jego nazwę albo wyszukaj trasę jeszcze raz.',
   'help.guide.change-transit-route.step.1':
-    'W zakładce Transport zaplanowane połączenia siedzą pod Automatyczny transport publiczny. Kliknij kartę.',
+    'W zakładce Transport zaplanowane połączenia siedzą pod Automatyczny transport publiczny. Kliknij kartę; połączenie otwiera się jako rezerwacja.',
   'help.guide.change-transit-route.step.2':
     'Czas trwania, Przesiadki i Pieszo siedzą u góry. Plan podróży pod nimi przechodzi połączenie przystanek po przystanku, z peronami i odcinkami pieszo między liniami.',
   'help.guide.change-transit-route.step.3':
-    'Zmień trasę uruchamia wyszukiwanie jeszcze raz, już wypełnione obydwoma końcami tego połączenia i jego dniem.',
+    'Zmień trasę u dołu rezerwacji uruchamia wyszukiwanie jeszcze raz, już wypełnione obydwoma końcami tego połączenia i jego dniem.',
   'help.guide.change-transit-route.step.4':
-    'Wybierz inne połączenie i kliknij Dodaj do dnia; zajmuje miejsce starego. Edytuj szczegóły, obok Zmień trasę, otwiera zamiast tego zwykły formularz transportu, gdzie mieszkają Kod rezerwacji, Status, podróżni i pliki.',
+    'Wybierz inne połączenie i kliknij Dodaj do dnia; zajmuje miejsce starego. Edytuj, na drugim końcu tego samego paska, otwiera zamiast tego zwykły formularz transportu, gdzie mieszkają Kod rezerwacji, Status, podróżni, notatki i pliki.',
   'help.guide.change-transit-route.result':
     'Widok Podróż transportem publicznym niesie nowy Plan podróży, a jego karta w zakładce Transport pokazuje nowe linie i godziny.',
   'help.guide.change-transit-route.tip.1':
-    'Tytuł w widoku Podróż transportem publicznym to tylko tekst: ołówek obok niego zmienia nazwę, nie ruszając trasy. Notatki pod spodem przyjmują markdown i mają zakładkę Edytuj i Podgląd.',
+    'Tytuł w nagłówku rezerwacji zmienia nazwę połączenia, nie ruszając trasy. Jego notatki pisze się w formularzu transportu, do którego prowadzi Edytuj.',
   'help.guide.change-transit-route.tip.2':
-    'Usuń u dołu widoku Podróż transportem publicznym wyjmuje połączenie z podróży; dzień zachowuje swoje przystanki.',
+    'Usuń u dołu rezerwacji wyjmuje połączenie z podróży; dzień zachowuje swoje przystanki.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Zmień, jak pokonujesz jeden odcinek',
   'help.guide.leg-travel-mode.goal':
@@ -3638,17 +3638,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Zmień albo usuń transport',
   'help.guide.edit-transport.goal': 'Popraw godzinę, peron albo kod rezerwacji, albo wyjmij przejazd z podróży.',
-  'help.guide.edit-transport.step.1': 'W planie dnia transport to kolorowy wiersz między przystankami. Kliknij go.',
+  'help.guide.edit-transport.step.1':
+    'W planie dnia transport to kolorowy wiersz między przystankami. Kliknij go; otwiera się jego rezerwacja z godzinami, trasą i Kodem rezerwacji.',
   'help.guide.edit-transport.step.2':
-    'Formularz jest ten sam, który go utworzył, z Edytuj transport na pasku tytułu. Zmienić można wszystko: rodzaj, trasę, dni i godziny, Kod rezerwacji, Status.',
+    'Edytuj u dołu rezerwacji otwiera formularz, który go utworzył, z Edytuj transport na pasku tytułu. Zmienić można wszystko: rodzaj, trasę, dni i godziny, Kod rezerwacji, Status.',
   'help.guide.edit-transport.step.3':
     'Trasa lotu to łańcuch lotnisk, trasa pociągu łańcuch stacji. Dodaj przystanek wstawia kolejny pomiędzy, a każdy odcinek zachowuje własne godziny i własny numer lotu albo pociągu.',
   'help.guide.edit-transport.step.4':
-    'Kliknij Aktualizuj. Aby usunąć transport całkiem, użyj kosza na jego karcie w zakładce Transport i potwierdź.',
+    'Kliknij Aktualizuj. Aby usunąć transport całkiem, użyj Usuń u dołu jego rezerwacji albo kosza na jego karcie w zakładce Transport i potwierdź.',
   'help.guide.edit-transport.result':
     'Zmiana pokazuje się wszędzie, gdzie transport się pojawia: w zakładce Transport, w dniu, w którym jedzie, i na jego linii na mapie.',
   'help.guide.edit-transport.tip.1':
-    'Ten sam formularz otwiera się z obu stron, ołówkiem na karcie w zakładce Transport i własnym wierszem transportu w planie dnia. Wyjątkiem jest zaplanowane połączenie transportu publicznego: jego wiersz otwiera widok Podróż transportem publicznym, a Edytuj szczegóły prowadzi stamtąd do tego formularza.',
+    'Ten sam formularz otwiera się z obu stron: przez Edytuj w rezerwacji, którą otwiera wiersz planu dnia, i przez ołówek na karcie w zakładce Transport. Zaplanowane połączenie transportu publicznego też otwiera się jako rezerwacja; Zmień trasę szuka tam od nowa, a Edytuj prowadzi do tego formularza.',
   'help.guide.edit-transport.tip.2':
     'Przeniesienie transportu na inny dzień w ogóle nie potrzebuje formularza: przeciągnij jego wiersz z jednej karty dnia na następną.',
   // transport-on-map
diff --git a/shared/src/i18n/pl/places.ts b/shared/src/i18n/pl/places.ts
index e231029b9..087082e8d 100644
--- a/shared/src/i18n/pl/places.ts
+++ b/shared/src/i18n/pl/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Wybierz co najmniej jeden typ.',
   'places.selectionCount': '{count} zaznaczono',
   'places.deleteSelected': 'Usuń wybrane',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Zmień kategorię',
+  'places.categoryChanged': 'Zaktualizowano miejsca: {count}',
   'places.kmlKmzImported': 'Zaimportowano {count} miejsc z KMZ/KML',
   'places.urlResolved': 'Miejsce zaimportowane z URL',
   'places.kmlKmzSummaryValues': 'Placemarks: {total} • Zaimportowano: {created} • Pominięto: {skipped}',
@@ -42,6 +42,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Pokaż całą podróż',
   'places.filterTracks': 'Trasy',
   'places.filterByRating': 'Filtruj według oceny',
+  'places.filterShow': 'Pokaż',
+  'places.clearSearch': 'Wyczyść wyszukiwanie',
   'places.yourRating': 'Twoja ocena',
   'places.notRated': 'Jeszcze nie oceniono',
   'places.search': 'Szukaj miejsc...',
@@ -61,6 +63,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Ulica, miasto, kraj',
   'places.formLat': 'Szerokość (np. 48.8566)',
   'places.formLng': 'Długość (np. 2.3522)',
+  'places.formLatLabel': 'Szerokość',
+  'places.formLngLabel': 'Długość',
   'places.formCategory': 'Kategoria',
   'places.noCategory': 'Brak kategorii',
   'places.newCategory': 'Nowa kategoria',
diff --git a/shared/src/i18n/pl/reservations.ts b/shared/src/i18n/pl/reservations.ts
index 02145d5ee..9030760ff 100644
--- a/shared/src/i18n/pl/reservations.ts
+++ b/shared/src/i18n/pl/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Rower',
   'reservations.type.taxi': 'Taksówka',
   'reservations.type.transit': 'Transport publiczny',
+  'reservations.typeShort.transit': 'Komunikacja',
   'reservations.type.transport_other': 'Inne',
   'reservations.confirm.delete': 'Czy na pewno chcesz usunąć rezerwację "{name}"?',
   'reservations.confirm.deleteTitle': 'Usunąć rezerwację?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Lokalizacja / Adres',
   'reservations.locationPlaceholder': 'Adres, Lotnisko, Hotel...',
   'reservations.confirmationCode': 'Kod rezerwacji',
+  'reservations.routeLabel': 'Trasa',
+  'reservations.segmentCodes': 'Kody odcinków',
   'reservations.confirmationPlaceholder': 'np. ABC12345',
   'reservations.day': 'Dzień',
   'reservations.noDay': 'Brak dnia',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Nie udało się usunąć',
   'reservations.confirm.remove': 'Usunąć rezerwację "{name}"?',
   'reservations.linkAssignment': 'Przypisz do miejsca',
+  'reservations.linkedTo': 'Powiązano z',
   'reservations.pickAssignment': 'Wybierz miejsce z planu...',
   'reservations.noAssignment': 'Brak przypisania (samodzielna)',
   'reservations.price': 'Cena',
@@ -134,9 +138,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'Znaleziono {count} rezerwację/rezerwacje',
   'reservations.import.previewEmpty': 'Nie udało się wyodrębnić rezerwacji z przesłanych plików.',
   'reservations.import.removeItem': 'Usuń',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Do sprawdzenia',
+  'reservations.import.tryAi': 'Spróbuj odczytać przez AI',
+  'reservations.import.aiParsing': 'Odczytywanie przez AI…',
   'reservations.import.confirm': 'Importuj {count} rezerwację/rezerwacje',
   'reservations.import.back': 'Wstecz',
   'reservations.import.success': 'Zaimportowano {count} rezerwację/rezerwacje',
@@ -180,5 +184,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Podróżni',
   'reservations.travelers.assign': 'Przypisz podróżnych',
   'reservations.travelers.none': 'Brak podróżnych w wyprawie.',
+  'reservations.status.switchTo': 'Ustaw na {status}',
+  'reservations.view.label': 'Widok',
+  'reservations.view.cards': 'Karty',
+  'reservations.view.list': 'Lista',
+  'reservations.view.timeline': 'Oś czasu',
+  'reservations.filter': 'Filtruj',
+  'reservations.searchPlaceholder': 'Szukaj',
+  'reservations.results': '{shown} z {total}',
+  'reservations.resetFilters': 'Wyczyść filtry',
+  'reservations.noMatches': 'Nic nie pasuje do tych filtrów',
+  'reservations.viewOptions': 'Opcje widoku',
+  'reservations.resetView': 'Resetuj widok',
+  'reservations.group.label': 'Grupuj według',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Dzień',
+  'reservations.group.type': 'Rodzaj',
+  'reservations.group.none': 'Bez grupowania',
+  'reservations.transitApart': 'Transport publiczny jako osobna sekcja',
+  'reservations.group.before': 'Przed podróżą',
+  'reservations.group.after': 'Po podróży',
+  'reservations.group.undated': 'Bez daty',
+  'reservations.sort.label': 'Sortuj według',
+  'reservations.sort.date': 'Data',
+  'reservations.sort.title': 'Tytuł',
+  'reservations.sort.type': 'Rodzaj',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Od najwcześniejszych',
+  'reservations.sort.lateFirst': 'Od najpóźniejszych',
+  'reservations.sort.aToZ': 'Od A do Z',
+  'reservations.sort.zToA': 'Od Z do A',
+  'reservations.timeline.dayCount': 'Dni: {count}',
+  'reservations.timeline.zoom': 'Skala',
+  'reservations.timeline.trip': 'Podróż',
+  'reservations.timeline.day': 'Dzień',
+  'reservations.timeline.prevDay': 'Poprzedni dzień',
+  'reservations.timeline.nextDay': 'Następny dzień',
+  'reservations.timeline.openDay': 'Otwórz {day} w widoku godzinowym',
+  'reservations.timeline.nothingThisDay': 'Tego dnia nic nie ma.',
+  'reservations.timeline.today': 'Dziś',
+  'reservations.timeline.now': 'teraz',
+  'reservations.timeline.byType': 'Osobny pas dla każdego rodzaju',
+  'reservations.timeline.context': 'Pokaż drugą zakładkę',
+  'reservations.timeline.contextBookings': 'Rezerwacje',
+  'reservations.timeline.contextTransports': 'Transport',
+  'reservations.timeline.noneDated': 'Żadna z tych pozycji nie ma jeszcze daty.',
+  'reservations.undated': 'Bez daty',
+  'reservations.nights': 'Noce',
+  'reservations.start': 'Początek',
+  'reservations.end': 'Koniec',
+  'reservations.rename': 'Zmień nazwę',
+  'reservations.copyCode': 'Kopiuj kod rezerwacji',
+  'reservations.copyFailed': 'Nie udało się skopiować',
+  'reservations.showInFiles': 'Pokaż w plikach',
 };
 export default reservations;
diff --git a/shared/src/i18n/pl/transport.ts b/shared/src/i18n/pl/transport.ts
index 1438944cd..f91ea2bab 100644
--- a/shared/src/i18n/pl/transport.ts
+++ b/shared/src/i18n/pl/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Edytuj transport',
   'transport.title': 'Transport',
   'transport.addManual': 'Transport',
+  'transport.empty': 'Brak transportów',
 };
 export default transport;
diff --git a/shared/src/i18n/ru/budget.ts b/shared/src/i18n/ru/budget.ts
index 344fc96b1..475c04861 100644
--- a/shared/src/i18n/ru/budget.ts
+++ b/shared/src/i18n/ru/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Только в сумме — ещё не урегулировано',
   'costs.tapToInclude': 'Нажмите, чтобы добавить',
   'costs.amount': 'Сумма',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Разделение',
+  'costs.splitEqually': 'Поровну',
+  'costs.splitCustom': 'Вручную',
+  'costs.splitTicket': 'Чек',
+  'costs.perPerson': '{amount} на человека',
+  'costs.payersHint': 'Отметьте, кто платил, и впишите, сколько внёс каждый.',
+  'costs.splitHint.equally': 'Все отмеченные платят одинаковую долю.',
+  'costs.splitHint.custom': 'Впишите долю каждого; вместе они должны составить всю сумму.',
+  'costs.splitHint.ticket': 'Перечислите, что было в чеке, и отметьте, кто что брал.',
   'costs.filter.allCategories': 'Все категории',
   'costs.filter.allDays': 'Все дни',
   'costs.expensesCount': 'Расходов: {count}',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Чеки',
   'costs.receiptsTitle': 'Чеки и счета',
   'costs.attachReceipt': 'Прикрепить чек / счет',
+  'costs.attach': 'Прикрепить',
   'costs.scan.button': 'Сканировать чек',
   'costs.scan.reading': 'Чтение чека…',
   'costs.scan.review': 'Проверить расход',
   'costs.scan.nothingRead': 'Не удалось прочитать чек с этой фотографии.',
   'costs.scan.failed': 'Не удалось начать чтение чека.',
   'costs.scan.title': 'Сканировать чек',
-  'costs.scan.accepted': 'Фото одного чека (JPG, PNG или WEBP, до 10 МБ). Модель ИИ прочитает его в фоне, а затем вы проверите расход перед сохранением.',
+  'costs.scan.accepted':
+    'Фото одного чека (JPG, PNG или WEBP, до 10 МБ). Модель ИИ прочитает его в фоне, а затем вы проверите расход перед сохранением.',
   'costs.scan.dropHere': 'Перетащите сюда фото чека или нажмите, чтобы выбрать или сделать снимок',
   'costs.scan.dropActive': 'Отпустите фото, чтобы отсканировать его',
   'costs.scan.start': 'Сканировать',
diff --git a/shared/src/i18n/ru/dayplan.ts b/shared/src/i18n/ru/dayplan.ts
index dd7d14c65..3ed80560b 100644
--- a/shared/src/i18n/ru/dayplan.ts
+++ b/shared/src/i18n/ru/dayplan.ts
@@ -78,8 +78,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': 'Все места распределены',
   'dayplan.mobile.noMatch': 'Нет совпадений',
   'dayplan.mobile.createNew': 'Создать новое место',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': 'Развернуть все дни', // en-fallback
+  'dayplan.collapseAll': 'Свернуть все дни', // en-fallback
   'dayplan.reorderDays': 'Изменить порядок дней',
   'dayplan.reorderTitle': 'Изменить порядок дней',
   'dayplan.reorderHint': 'Места, заметки и бронирования дня перемещаются вместе с ним.',
diff --git a/shared/src/i18n/ru/help.ts b/shared/src/i18n/ru/help.ts
index 386a13cc9..780365e74 100644
--- a/shared/src/i18n/ru/help.ts
+++ b/shared/src/i18n/ru/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'ru' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Справка и документация',
+  'help.search': 'Поиск по документации…',
+  'help.contents': 'Содержание',
+  'help.noResults': 'Подходящих страниц нет.',
+  'help.errorTitle': 'Не удалось загрузить страницу',
+  'help.errorBody': 'Справка загружается из вики TREK. Проверьте подключение и попробуйте снова.',
 
   // center
   'help.center.button': 'Справка по этому экрану',
@@ -2274,9 +2274,9 @@ const help: TranslationStrings = {
     'Откройте остановку, которой принадлежит бронирование. Карточка показывает полоску с Подтверждено или Ожидание и с названием бронирования.',
   'help.guide.place-booking.step.2':
     'Полоска несёт Дату, Время и Код бронирования, и любые заметки, которые у бронирования есть.',
-  'help.guide.place-booking.step.3': 'Нажмите на полоску. На ней открывается собственная форма бронирования.',
+  'help.guide.place-booking.step.3': 'Нажмите на полоску. Бронирование открывается поверх карты.',
   'help.guide.place-booking.step.4':
-    'Бронирование к остановке прикрепляет Привязать к назначению дня, и здесь оно уже называет эту остановку. Закройте форму обратно.',
+    'Редактировать внизу бронирования открывает его собственную форму. Бронирование к остановке прикрепляет там Привязать к назначению дня, и здесь оно уже называет эту остановку. Закройте форму обратно.',
   'help.guide.place-booking.step.5':
     'Новое бронирование для остановки начинается в колонке дней: наведите на остановку и нажмите на + в её конце. Форма открывается как Новое бронирование, уже связанная с ней.',
   'help.guide.place-booking.result':
@@ -2632,7 +2632,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Цвет говорит, как стоит бронирование: зелёная строка подтверждена, янтарная ещё в ожидании. Отелей в этом списке нет, у них свой блок ниже.',
   'help.guide.day-bookings.step.4':
-    'Список только выписывает бронирования. Бронирование создаётся и меняется на вкладке Бронирования.',
+    'Нажмите на строку, и бронирование откроется. Редактировать внизу него меняет его; новые бронирования создаются на вкладке Бронирования.',
   'help.guide.day-bookings.result':
     'Всё датированное этим днём и всё, что висит на одной из его остановок, находится в этом одном списке.',
   'help.guide.day-bookings.tip.1':
@@ -3173,13 +3173,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Нажмите Ручное бронирование справа вверху вкладки. Открывается Новое бронирование.',
   'help.guide.create-booking.step.2':
-    'Выберите Тип бронирования в списке вверху формы, рядом с полем Путешественники. Жильё, Ресторан, Мероприятие, Экскурсия, Парковка и Другое это те шесть, которые делает эта вкладка, и форма меняется вместе с выбором: только Жильё меняет свои даты на диапазон дней.',
+    'Нажмите на фишку типа под названием, в шапке формы, и выберите Тип бронирования. Жильё, Ресторан, Мероприятие, Экскурсия, Парковка и Другое это те шесть, которые делает эта вкладка, и форма меняется вместе с выбором: только Жильё меняет свои даты на диапазон дней.',
   'help.guide.create-booking.step.3':
     'Введите Название. Это единственное поле, на котором форма настаивает, и Добавить остаётся мёртвой, пока в нём ничего нет.',
   'help.guide.create-booking.step.4':
     'Задайте Дату и Время начала, а также Дату окончания и Время окончания, если у бронирования есть конец. Календари предлагают только дни внутри поездки, а конец, который не позже начала, говорит об этом красным и блокирует Добавить.',
   'help.guide.create-booking.step.5':
-    'Вставьте Код бронирования из подтверждения и задайте Статус. Ожидание или Подтверждено решает, в какой из двух разделов попадёт карточка.',
+    'Вставьте Код бронирования из подтверждения. Фишка статуса рядом с типом показывает Ожидание; нажатие переключает её на Подтверждено и обратно, и это решает, в какой из двух разделов попадёт карточка.',
   'help.guide.create-booking.step.6': 'Нажмите Добавить.',
   'help.guide.create-booking.result':
     'Бронирование это карточка в своём разделе со своей фишкой типа, своими датами и своим кодом, и все остальные в поездке видят, как она появляется.',
@@ -3231,7 +3231,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Отметьте путешественников, которых бронирование покрывает, и потом смотрите только их бронирования.',
   'help.guide.booking-travelers.step.1':
-    'Откройте бронирование карандашом. Поле Путешественники стоит вверху формы, рядом с полем Тип бронирования, и показывает Назначить путешественников, пока в бронировании никого нет.',
+    'Откройте бронирование карандашом. Поле Путешественники стоит рядом с Кодом бронирования и показывает Назначить путешественников, пока в бронировании никого нет.',
   'help.guide.booking-travelers.step.2':
     'Нажмите на него и выберите людей, для которых это бронирование; названные гости тоже есть в списке. Выбранный получает галочку и свой аватар в поле. Нажмите на имя ещё раз, чтобы его снять.',
   'help.guide.booking-travelers.step.3': 'Нажмите Обновить.',
@@ -3328,7 +3328,7 @@ const help: TranslationStrings = {
     'Нажмите карандаш в шапке карточки. Открывается Редактировать бронирование со всем, что бронирование знает.',
   'help.guide.edit-booking.step.2':
     'Измените то, что нужно изменить, здесь Код бронирования, который оператор наконец прислал.',
-  'help.guide.edit-booking.step.3': 'Поставьте Статус на Подтверждено.',
+  'help.guide.edit-booking.step.3': 'Нажмите на фишку Ожидание в шапке формы. Она сменится на Подтверждено.',
   'help.guide.edit-booking.step.4': 'Нажмите Обновить.',
   'help.guide.edit-booking.result':
     'Карточка переезжает: подтверждённое бронирование стоит в разделе Подтверждено за зелёной точкой, и все в поездке видят, как оно переезжает.',
@@ -3621,19 +3621,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Прочитать соединение остановка за остановкой, переименовать его или найти маршрут заново.',
   'help.guide.change-transit-route.step.1':
-    'На вкладке Транспорт спланированные соединения сидят под Автоматический общественный транспорт. Нажмите на карточку.',
+    'На вкладке Транспорт спланированные соединения сидят под Автоматический общественный транспорт. Нажмите на карточку; соединение открывается как бронирование.',
   'help.guide.change-transit-route.step.2':
     'Длительность, Пересадки и Пешком сидят наверху. Маршрут под ними проходит соединение остановка за остановкой, с платформами и переходами пешком между линиями.',
   'help.guide.change-transit-route.step.3':
-    'Изменить маршрут запускает поиск заново, уже заполненный двумя концами этого соединения и его днём.',
+    'Изменить маршрут внизу бронирования запускает поиск заново, уже заполненный двумя концами этого соединения и его днём.',
   'help.guide.change-transit-route.step.4':
-    'Выберите другое соединение и нажмите Добавить в день; оно занимает место старого. Редактировать детали рядом с Изменить маршрут открывает вместо этого обычную форму транспорта, где живут Код бронирования, Статус, путешественники и файлы.',
+    'Выберите другое соединение и нажмите Добавить в день; оно занимает место старого. Редактировать, на другом конце той же панели, открывает вместо этого обычную форму транспорта, где живут Код бронирования, Статус, путешественники, заметки и файлы.',
   'help.guide.change-transit-route.result':
     'Окно Поездка на общественном транспорте несёт новый Маршрут, а его карточка на вкладке Транспорт показывает новые линии и время.',
   'help.guide.change-transit-route.tip.1':
-    'Название в окне Поездка на общественном транспорте это только текст: карандаш рядом с ним переименовывает его, не трогая маршрут. Заметки под ним принимают markdown и имеют вкладку Редактировать и Предпросмотр.',
+    'Название в шапке бронирования переименовывает соединение, не трогая маршрут. Его заметки пишутся в форме транспорта, которую открывает Редактировать.',
   'help.guide.change-transit-route.tip.2':
-    'Удалить внизу окна Поездка на общественном транспорте вынимает соединение из поездки; день сохраняет свои остановки.',
+    'Удалить внизу бронирования вынимает соединение из поездки; день сохраняет свои остановки.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Изменить, как пройден один отрезок',
   'help.guide.leg-travel-mode.goal':
@@ -3657,17 +3657,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Изменить или удалить транспорт',
   'help.guide.edit-transport.goal': 'Исправить время, платформу или код бронирования либо убрать переезд из поездки.',
-  'help.guide.edit-transport.step.1': 'В плане дня транспорт это цветная строка между остановками. Нажмите на неё.',
+  'help.guide.edit-transport.step.1':
+    'В плане дня транспорт это цветная строка между остановками. Нажмите на неё; открывается его бронирование со временем, маршрутом и Кодом бронирования.',
   'help.guide.edit-transport.step.2':
-    'Форма та же, что его создала, с надписью Изменить транспорт в заголовке. Изменить можно всё: тип, маршрут, дни и время, Код бронирования, Статус.',
+    'Редактировать внизу бронирования открывает форму, которая его создала, с надписью Изменить транспорт в заголовке. Изменить можно всё: тип, маршрут, дни и время, Код бронирования, Статус.',
   'help.guide.edit-transport.step.3':
     'Маршрут рейса это цепочка аэропортов, маршрут поезда цепочка станций. Добавить остановку вставляет ещё одну между ними, и каждый отрезок сохраняет своё время и свой номер рейса или поезда.',
   'help.guide.edit-transport.step.4':
-    'Нажмите Обновить. Чтобы убрать транспорт совсем, используйте корзину на его карточке на вкладке Транспорт и подтвердите.',
+    'Нажмите Обновить. Чтобы убрать транспорт совсем, используйте Удалить внизу его бронирования или корзину на его карточке на вкладке Транспорт и подтвердите.',
   'help.guide.edit-transport.result':
     'Изменение видно везде, где появляется транспорт: на вкладке Транспорт, в дне, когда он идёт, и на его линии на карте.',
   'help.guide.edit-transport.tip.1':
-    'Та же форма открывается с обеих сторон, карандашом на карточке на вкладке Транспорт и собственной строкой транспорта в плане дня. Исключение это спланированное соединение общественного транспорта: его строка открывает окно Поездка на общественном транспорте, а Редактировать детали ведёт оттуда к этой форме.',
+    'Та же форма открывается с обеих сторон: через Редактировать в бронировании, которое открывает строка плана дня, и через карандаш на карточке на вкладке Транспорт. Спланированное соединение общественного транспорта тоже открывается как бронирование; Изменить маршрут ищет там заново, а Редактировать ведёт к этой форме.',
   'help.guide.edit-transport.tip.2':
     'Перенос транспорта на другой день вообще не требует формы: перетащите его строку с одной карточки дня на следующую.',
   // transport-on-map
diff --git a/shared/src/i18n/ru/places.ts b/shared/src/i18n/ru/places.ts
index bb68c6539..35f996cbb 100644
--- a/shared/src/i18n/ru/places.ts
+++ b/shared/src/i18n/ru/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Выберите хотя бы один тип.',
   'places.selectionCount': '{count} выбрано',
   'places.deleteSelected': 'Удалить выбранные',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Изменить категорию',
+  'places.categoryChanged': 'Обновлено мест: {count}',
   'places.kmlKmzImported': '{count} мест импортировано из KMZ/KML',
   'places.urlResolved': 'Место импортировано из URL',
   'places.importList': 'Импорт списка',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Показать всю поездку',
   'places.filterTracks': 'Треки',
   'places.filterByRating': 'Фильтр по оценке',
+  'places.filterShow': 'Показать',
+  'places.clearSearch': 'Очистить поиск',
   'places.yourRating': 'Твоя оценка',
   'places.notRated': 'Ещё нет оценок',
   'places.search': 'Поиск мест...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Улица, город, страна',
   'places.formLat': 'Широта (напр. 48.8566)',
   'places.formLng': 'Долгота (напр. 2.3522)',
+  'places.formLatLabel': 'Широта',
+  'places.formLngLabel': 'Долгота',
   'places.formCategory': 'Категория',
   'places.noCategory': 'Без категории',
   'places.newCategory': 'Новая категория',
diff --git a/shared/src/i18n/ru/reservations.ts b/shared/src/i18n/ru/reservations.ts
index 61e7796c0..d3e67a965 100644
--- a/shared/src/i18n/ru/reservations.ts
+++ b/shared/src/i18n/ru/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Велосипед',
   'reservations.type.taxi': 'Такси',
   'reservations.type.transit': 'Общественный транспорт',
+  'reservations.typeShort.transit': 'Общ. транспорт',
   'reservations.type.transport_other': 'Другое',
   'reservations.confirm.delete': 'Вы уверены, что хотите удалить бронирование «{name}»?',
   'reservations.confirm.deleteTitle': 'Удалить бронирование?',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Местоположение / Адрес',
   'reservations.locationPlaceholder': 'Адрес, аэропорт, отель...',
   'reservations.confirmationCode': 'Код бронирования',
+  'reservations.routeLabel': 'Маршрут',
+  'reservations.segmentCodes': 'Коды сегментов',
   'reservations.confirmationPlaceholder': 'напр. ABC12345',
   'reservations.day': 'День',
   'reservations.noDay': 'Без дня',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Ошибка удаления',
   'reservations.confirm.remove': 'Удалить бронирование для «{name}»?',
   'reservations.linkAssignment': 'Привязать к назначению дня',
+  'reservations.linkedTo': 'Привязано к',
   'reservations.pickAssignment': 'Выберите назначение из вашего плана...',
   'reservations.noAssignment': 'Без привязки (самостоятельное)',
   'reservations.price': 'Цена',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'Найдено {count} бронирование(й)',
   'reservations.import.previewEmpty': 'Из загруженных файлов не удалось извлечь бронирования.',
   'reservations.import.removeItem': 'Удалить',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Проверить',
+  'reservations.import.tryAi': 'Распознать с помощью ИИ',
+  'reservations.import.aiParsing': 'Распознавание с помощью ИИ…',
   'reservations.import.confirm': 'Импортировать {count} бронирование(й)',
   'reservations.import.back': 'Назад',
   'reservations.import.success': '{count} бронирование(й) импортировано',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Путешественники',
   'reservations.travelers.assign': 'Назначить путешественников',
   'reservations.travelers.none': 'В поездке пока нет участников.',
+  'reservations.status.switchTo': 'Сменить на «{status}»',
+  'reservations.view.label': 'Вид',
+  'reservations.view.cards': 'Карточки',
+  'reservations.view.list': 'Список',
+  'reservations.view.timeline': 'Хронология',
+  'reservations.filter': 'Фильтр',
+  'reservations.searchPlaceholder': 'Поиск',
+  'reservations.results': '{shown} из {total}',
+  'reservations.resetFilters': 'Сбросить фильтры',
+  'reservations.noMatches': 'Под эти фильтры ничего не подходит',
+  'reservations.viewOptions': 'Настройки вида',
+  'reservations.resetView': 'Сбросить вид',
+  'reservations.group.label': 'Группировать по',
+  'reservations.group.status': 'Статус',
+  'reservations.group.day': 'День',
+  'reservations.group.type': 'Тип',
+  'reservations.group.none': 'Без группировки',
+  'reservations.transitApart': 'Общественный транспорт отдельным разделом',
+  'reservations.group.before': 'До поездки',
+  'reservations.group.after': 'После поездки',
+  'reservations.group.undated': 'Без даты',
+  'reservations.sort.label': 'Сортировать по',
+  'reservations.sort.date': 'Дата',
+  'reservations.sort.title': 'Название',
+  'reservations.sort.type': 'Тип',
+  'reservations.sort.status': 'Статус',
+  'reservations.sort.earlyFirst': 'Сначала ранние',
+  'reservations.sort.lateFirst': 'Сначала поздние',
+  'reservations.sort.aToZ': 'От А до Я',
+  'reservations.sort.zToA': 'От Я до А',
+  'reservations.timeline.dayCount': 'Дней: {count}',
+  'reservations.timeline.zoom': 'Масштаб',
+  'reservations.timeline.trip': 'Поездка',
+  'reservations.timeline.day': 'День',
+  'reservations.timeline.prevDay': 'Предыдущий день',
+  'reservations.timeline.nextDay': 'Следующий день',
+  'reservations.timeline.openDay': 'Открыть {day} по часам',
+  'reservations.timeline.nothingThisDay': 'В этот день ничего нет.',
+  'reservations.timeline.today': 'Сегодня',
+  'reservations.timeline.now': 'сейчас',
+  'reservations.timeline.byType': 'Отдельная дорожка для каждого типа',
+  'reservations.timeline.context': 'Показать другую вкладку',
+  'reservations.timeline.contextBookings': 'Бронирования',
+  'reservations.timeline.contextTransports': 'Транспорт',
+  'reservations.timeline.noneDated': 'Ни у одной записи пока нет даты.',
+  'reservations.undated': 'Без даты',
+  'reservations.nights': 'Ночи',
+  'reservations.start': 'Начало',
+  'reservations.end': 'Конец',
+  'reservations.rename': 'Переименовать',
+  'reservations.copyCode': 'Копировать код бронирования',
+  'reservations.copyFailed': 'Не удалось скопировать',
+  'reservations.showInFiles': 'Показать в файлах',
 };
 export default reservations;
diff --git a/shared/src/i18n/ru/transport.ts b/shared/src/i18n/ru/transport.ts
index cabaf385f..31d4dd397 100644
--- a/shared/src/i18n/ru/transport.ts
+++ b/shared/src/i18n/ru/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Изменить транспорт',
   'transport.title': 'Транспорт',
   'transport.addManual': 'Транспорт',
+  'transport.empty': 'Пока нет транспорта',
 };
 export default transport;
diff --git a/shared/src/i18n/sk/budget.ts b/shared/src/i18n/sk/budget.ts
index c81a44b7b..ed91ced91 100644
--- a/shared/src/i18n/sk/budget.ts
+++ b/shared/src/i18n/sk/budget.ts
@@ -115,6 +115,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'Rovnakým dielom',
   'costs.splitCustom': 'Vlastné',
   'costs.splitTicket': 'Účtenka',
+  'costs.perPerson': '{amount} na osobu',
+  'costs.payersHint': 'Označte, kto platil, a zadajte, koľko ktorý z nich zaplatil.',
+  'costs.splitHint.equally': 'Každý označený platí rovnaký podiel.',
+  'costs.splitHint.custom': 'Zadajte podiel každej osoby; spolu musia dať celú sumu.',
+  'costs.splitHint.ticket': 'Vypíšte, čo bolo na účtenke, a označte, kto mal ktorú položku.',
   'costs.pickSomeone': 'Vyberte aspoň jednu osobu na rozdelenie.',
   'costs.splitSummary': 'Rozdelené na {count} dielov · {amount} každý',
   'costs.cat.accommodation': 'Ubytovanie',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Účtenky',
   'costs.receiptsTitle': 'Účtenky a faktúry',
   'costs.attachReceipt': 'Priložiť účtenku / faktúru',
+  'costs.attach': 'Priložiť',
   'costs.scan.button': 'Naskenovať účtenku',
   'costs.scan.reading': 'Číta sa účtenka…',
   'costs.scan.review': 'Skontrolovať výdavok',
   'costs.scan.nothingRead': 'Z tejto fotografie sa nepodarilo prečítať účtenku.',
   'costs.scan.failed': 'Čítanie účtenky sa nepodarilo spustiť.',
   'costs.scan.title': 'Naskenovať účtenku',
-  'costs.scan.accepted': 'Fotografia jednej účtenky (JPG, PNG alebo WEBP, do 10 MB). Model AI ju prečíta na pozadí a vy potom výdavok pred uložením skontrolujete.',
+  'costs.scan.accepted':
+    'Fotografia jednej účtenky (JPG, PNG alebo WEBP, do 10 MB). Model AI ju prečíta na pozadí a vy potom výdavok pred uložením skontrolujete.',
   'costs.scan.dropHere': 'Presuňte sem fotografiu účtenky alebo kliknite a vyberte či odfoťte novú',
   'costs.scan.dropActive': 'Pustite fotografiu na naskenovanie',
   'costs.scan.start': 'Skenovať',
diff --git a/shared/src/i18n/sk/help.ts b/shared/src/i18n/sk/help.ts
index 5463b6944..5ad4f658a 100644
--- a/shared/src/i18n/sk/help.ts
+++ b/shared/src/i18n/sk/help.ts
@@ -2271,9 +2271,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     'Otvorte zastávku, ku ktorej rezervácia patrí. Karta zobrazuje pás so stavom Potvrdené alebo Čaká na potvrdenie a názvom rezervácie.',
   'help.guide.place-booking.step.2': 'Pás obsahuje Dátum, Čas a Rezervačný kód, ako aj poznámky, ktoré rezervácia má.',
-  'help.guide.place-booking.step.3': 'Kliknite na pás. Otvorí sa formulár samotnej rezervácie.',
+  'help.guide.place-booking.step.3': 'Kliknite na pás. Rezervácia sa otvorí nad mapou.',
   'help.guide.place-booking.step.4':
-    'Rezerváciu k zastávke pripína pole Prepojiť s priradením dňa a tu už uvádza práve túto zastávku. Formulár opäť zatvorte.',
+    'Upraviť v spodnej časti rezervácie otvorí jej vlastný formulár. Rezerváciu k zastávke tam pripína pole Prepojiť s priradením dňa a tu už uvádza práve túto zastávku. Formulár opäť zatvorte.',
   'help.guide.place-booking.step.5':
     'Nová rezervácia pre zastávku sa začína v stĺpci dní: prejdite myšou na zastávku a kliknite na + na jej konci. Formulár sa otvorí ako Nová rezervácia, už prepojený so zastávkou.',
   'help.guide.place-booking.result':
@@ -2469,7 +2469,8 @@ const help: TranslationStrings = {
     'Riadok ukazuje druh rezervácie, jej názov a, ak patrí k zastávke, túto zastávku za bodkou. Jej časy sú na pravom konci.',
   'help.guide.day-bookings.step.3':
     'Farba ukazuje stav rezervácie: zelený riadok je potvrdený, jantárový ešte čaká na potvrdenie. Hotely v tomto zozname nie sú, majú vlastný blok nižšie.',
-  'help.guide.day-bookings.step.4': 'Zoznam rezervácie len zobrazuje. Rezervácia sa vytvára a mení v časti Rezervácie.',
+  'help.guide.day-bookings.step.4':
+    'Kliknite na riadok a rezervácia sa otvorí. Upraviť v jej spodnej časti ju zmení; nové rezervácie sa vytvárajú v časti Rezervácie.',
   'help.guide.day-bookings.result':
     'Všetko s dátumom tohto dňa a všetko, čo visí na niektorej z jeho zastávok, je v tomto jednom zozname.',
   'help.guide.day-bookings.tip.1':
@@ -2751,19 +2752,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Prečítajte si spojenie zastávku po zastávke, premenujte ho alebo trasu vyhľadajte znova.',
   'help.guide.change-transit-route.step.1':
-    'Na záložke Doprava sú naplánované spojenia v časti Automatické spojenie MHD. Kliknite na kartu.',
+    'Na záložke Doprava sú naplánované spojenia v časti Automatické spojenie MHD. Kliknite na kartu; spojenie sa otvorí ako rezervácia.',
   'help.guide.change-transit-route.step.2':
     'Trvanie, Prestupy a Pešo sú hore. Itinerár pod nimi prechádza spojením zastávku po zastávke, s nástupišťami a presunmi pešo medzi linkami.',
   'help.guide.change-transit-route.step.3':
-    'Zmeniť trasu spustí hľadanie znova, už vyplnené oboma koncami tohto spojenia a jeho dňom.',
+    'Zmeniť trasu v spodnej časti rezervácie spustí hľadanie znova, už vyplnené oboma koncami tohto spojenia a jeho dňom.',
   'help.guide.change-transit-route.step.4':
-    'Vyberte iné spojenie a kliknite na Pridať k dňu; nahradí to staré. Upraviť podrobnosti vedľa Zmeniť trasu namiesto toho otvorí bežný formulár dopravy, kde sú Rezervačný kód, Stav, cestujúci a súbory.',
+    'Vyberte iné spojenie a kliknite na Pridať k dňu; nahradí to staré. Upraviť na druhom konci tej istej lišty namiesto toho otvorí bežný formulár dopravy, kde sú Rezervačný kód, Stav, cestujúci, poznámky a súbory.',
   'help.guide.change-transit-route.result':
     'Spojenie má nový itinerár a jeho karta na záložke Doprava ukazuje nové linky a časy.',
   'help.guide.change-transit-route.tip.1':
-    'Názov spojenia je len text: ceruzka vedľa neho ho premenuje bez zmeny trasy. Poznámky pod ním podporujú markdown a majú záložky Upraviť a Náhľad.',
+    'Názov v záhlaví rezervácie premenuje spojenie bez zmeny trasy. Jeho poznámky sa píšu vo formulári dopravy, ktorý otvorí Upraviť.',
   'help.guide.change-transit-route.tip.2':
-    'Vymazať v spodnej časti spojenia odstráni spojenie z cesty; deň si zastávky ponechá.',
+    'Odstrániť v spodnej časti rezervácie vyradí spojenie z cesty; deň si zastávky ponechá.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Zmeňte spôsob cestovania jedného úseku',
   'help.guide.leg-travel-mode.goal':
@@ -2786,17 +2787,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Zmeňte alebo vymažte dopravu',
   'help.guide.edit-transport.goal': 'Opravte čas, nástupište alebo rezervačný kód, alebo jazdu odstráňte z cesty.',
-  'help.guide.edit-transport.step.1': 'V pláne dňa je doprava farebný riadok medzi zastávkami. Kliknite naň.',
+  'help.guide.edit-transport.step.1':
+    'V pláne dňa je doprava farebný riadok medzi zastávkami. Kliknite naň; otvorí sa jej rezervácia s časmi, trasou a Rezervačným kódom.',
   'help.guide.edit-transport.step.2':
-    'Formulár je ten istý, ktorým vznikla, s Upraviť dopravu v záhlaví. Zmeniť sa dá všetko: typ, trasa, dni a časy, Rezervačný kód, Stav.',
+    'Upraviť v spodnej časti rezervácie otvorí formulár, ktorým vznikla, s Upraviť dopravu v záhlaví. Zmeniť sa dá všetko: typ, trasa, dni a časy, Rezervačný kód, Stav.',
   'help.guide.edit-transport.step.3':
     'Trasa letu je reťaz letísk, trasa vlaku reťaz staníc. Pridať zastávku vloží medzi ne ďalšiu a každý úsek si ponechá vlastné časy a vlastné číslo letu alebo vlaku.',
   'help.guide.edit-transport.step.4':
-    'Kliknite na Aktualizovať. Ak chcete dopravu úplne odstrániť, použite kôš na jej karte na záložke Doprava a potvrďte.',
+    'Kliknite na Aktualizovať. Ak chcete dopravu úplne odstrániť, použite Odstrániť v spodnej časti jej rezervácie alebo kôš na jej karte na záložke Doprava a potvrďte.',
   'help.guide.edit-transport.result':
     'Zmena sa prejaví všade, kde sa doprava zobrazuje: na záložke Doprava, v dni, v ktorý jazda prebieha, a v jej čiare na mape.',
   'help.guide.edit-transport.tip.1':
-    'Ten istý formulár sa otvára z oboch strán, ceruzkou na karte na záložke Doprava aj vlastným riadkom dopravy v pláne dňa. Výnimkou je naplánované spojenie verejnou dopravou: jeho riadok otvorí zobrazenie spojenia a Upraviť podrobnosti tam vedie k tomuto formuláru.',
+    'Ten istý formulár sa otvára z oboch strán: cez Upraviť v rezervácii, ktorú otvorí riadok plánu dňa, aj ceruzkou na karte na záložke Doprava. Naplánované spojenie verejnou dopravou sa tiež otvorí ako rezervácia; Zmeniť trasu tam hľadá znova a Upraviť vedie k tomuto formuláru.',
   'help.guide.edit-transport.tip.2':
     'Na presun dopravy do iného dňa formulár vôbec nepotrebujete: presuňte jej riadok z jednej karty dňa na ďalšiu.',
   // transport-on-map
@@ -2867,13 +2869,13 @@ const help: TranslationStrings = {
     'Zadajte do cesty ručne reštauráciu, udalosť, prehliadku, parkovacie miesto alebo čokoľvek iné.',
   'help.guide.create-booking.step.1': 'Kliknite na Ručná rezervácia vpravo hore na záložke. Otvorí sa Nová rezervácia.',
   'help.guide.create-booking.step.2':
-    'Vyberte Typ rezervácie zo zoznamu v hornej časti formulára, vedľa poľa Cestujúci. Ubytovanie, Reštaurácia, Udalosť, Prehliadka, Parkovanie a Ostatné je šesť typov, ktoré táto záložka vytvára, a formulár sa mení podľa voľby: len Ubytovanie vymení dátumy za rozsah dní.',
+    'Kliknite na štítok typu pod názvom v záhlaví formulára a vyberte Typ rezervácie. Ubytovanie, Reštaurácia, Udalosť, Prehliadka, Parkovanie a Ostatné je šesť typov, ktoré táto záložka vytvára, a formulár sa mení podľa voľby: len Ubytovanie vymení dátumy za rozsah dní.',
   'help.guide.create-booking.step.3':
     'Zadajte Názov. Je to jediné pole, na ktorom formulár trvá, a Pridať zostane neaktívne, kým v ňom niečo nie je.',
   'help.guide.create-booking.step.4':
     'Nastavte Dátum a Čas začiatku a Dátum konca a Čas konca, ak má rezervácia koniec. Kalendáre ponúkajú len dni v rámci cesty a koniec, ktorý nie je po začiatku, sa ohlási červenou a zablokuje Pridať.',
   'help.guide.create-booking.step.5':
-    'Zadajte Rezervačný kód z potvrdenia a nastavte Stav. Čaká na potvrdenie alebo Potvrdené rozhoduje, do ktorej z dvoch sekcií karta patrí.',
+    'Zadajte Rezervačný kód z potvrdenia. Štítok stavu vedľa typu ukazuje Čaká na potvrdenie; kliknutím ho prepnete na Potvrdené a späť, a to rozhoduje, do ktorej z dvoch sekcií karta patrí.',
   'help.guide.create-booking.step.6': 'Kliknite na Pridať.',
   'help.guide.create-booking.result':
     'Rezervácia je karta vo svojej sekcii so štítkom typu, dátumami a kódom a všetci ostatní v ceste ju uvidia pribudnúť.',
@@ -2924,7 +2926,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Označte cestujúcich, na ktorých sa rezervácia vzťahuje, a potom zobrazte len ich rezervácie.',
   'help.guide.booking-travelers.step.1':
-    'Otvorte rezerváciu ceruzkou. Pole Cestujúci je v hornej časti formulára, vedľa poľa Typ rezervácie, a kým na rezervácii nikto nie je, ukazuje Priradiť cestujúcich.',
+    'Otvorte rezerváciu ceruzkou. Pole Cestujúci je vedľa Rezervačného kódu a kým na rezervácii nikto nie je, ukazuje Priradiť cestujúcich.',
   'help.guide.booking-travelers.step.2':
     'Kliknite naň a vyberte ľudí, pre ktorých je rezervácia; pomenovaní hostia sú v zozname tiež. Vybraný dostane fajku a svoj avatar v poli. Ďalším kliknutím na meno ho odstránite.',
   'help.guide.booking-travelers.step.3': 'Kliknite na Aktualizovať.',
@@ -3020,7 +3022,8 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.step.1':
     'Kliknite na ceruzku v záhlaví karty. Otvorí sa Upraviť rezerváciu so všetkým, čo rezervácia obsahuje.',
   'help.guide.edit-booking.step.2': 'Zmeňte, čo treba, tu Rezervačný kód, ktorý prevádzkovateľ konečne poslal.',
-  'help.guide.edit-booking.step.3': 'Nastavte Stav na Potvrdené.',
+  'help.guide.edit-booking.step.3':
+    'Kliknite na štítok Čaká na potvrdenie v záhlaví formulára. Prepne sa na Potvrdené.',
   'help.guide.edit-booking.step.4': 'Kliknite na Aktualizovať.',
   'help.guide.edit-booking.result':
     'Karta sa presunie: potvrdená rezervácia je v sekcii Potvrdené so zeleným bodom a všetci v ceste uvidia presun.',
diff --git a/shared/src/i18n/sk/places.ts b/shared/src/i18n/sk/places.ts
index ff0c92db9..76095e88f 100644
--- a/shared/src/i18n/sk/places.ts
+++ b/shared/src/i18n/sk/places.ts
@@ -53,6 +53,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Zobraziť celú cestu',
   'places.filterTracks': 'Trasy',
   'places.filterByRating': 'Filtrovať podľa hodnotenia',
+  'places.filterShow': 'Zobraziť',
+  'places.clearSearch': 'Vymazať hľadanie',
   'places.yourRating': 'Vaše hodnotenie',
   'places.notRated': 'Zatiaľ bez hodnotenia',
   'places.search': 'Hľadať miesta...',
@@ -72,6 +74,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Ulica, mesto, krajina',
   'places.formLat': 'Zemepisná šírka (napr. 48.8566)',
   'places.formLng': 'Zemepisná dĺžka (napr. 2.3522)',
+  'places.formLatLabel': 'Zemepisná šírka',
+  'places.formLngLabel': 'Zemepisná dĺžka',
   'places.formCategory': 'Kategória',
   'places.noCategory': 'Bez kategórie',
   'places.newCategory': 'Nová kategória',
diff --git a/shared/src/i18n/sk/reservations.ts b/shared/src/i18n/sk/reservations.ts
index b7c786040..75219da76 100644
--- a/shared/src/i18n/sk/reservations.ts
+++ b/shared/src/i18n/sk/reservations.ts
@@ -67,6 +67,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bicykel',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Verejná doprava',
+  'reservations.typeShort.transit': 'MHD',
   'reservations.type.transport_other': 'Ostatné',
   'reservations.confirm.delete': 'Naozaj chcete odstrániť rezerváciu „{name}“?',
   'reservations.confirm.deleteTitle': 'Odstrániť rezerváciu?',
@@ -82,6 +83,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Miesto / Adresa',
   'reservations.locationPlaceholder': 'Adresa, letisko, hotel...',
   'reservations.confirmationCode': 'Rezervačný kód',
+  'reservations.routeLabel': 'Trasa',
+  'reservations.segmentCodes': 'Kódy úsekov',
   'reservations.confirmationPlaceholder': 'napr. ABC12345',
   'reservations.day': 'Deň',
   'reservations.noDay': 'Žiadny deň',
@@ -96,6 +99,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Odstránenie zlyhalo',
   'reservations.confirm.remove': 'Odstrániť rezerváciu pre „{name}“?',
   'reservations.linkAssignment': 'Prepojiť s priradením dňa',
+  'reservations.linkedTo': 'Prepojené s',
   'reservations.pickAssignment': 'Vyberte priradenie z vášho plánu...',
   'reservations.noAssignment': 'Bez prepojenia (samostatné)',
   'reservations.price': 'Cena',
@@ -182,5 +186,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Cestujúci',
   'reservations.travelers.assign': 'Priradiť cestujúcich',
   'reservations.travelers.none': 'Zatiaľ žiadni účastníci cesty.',
+  'reservations.status.switchTo': 'Zmeniť na „{status}“',
+  'reservations.view.label': 'Zobrazenie',
+  'reservations.view.cards': 'Karty',
+  'reservations.view.list': 'Zoznam',
+  'reservations.view.timeline': 'Časová os',
+  'reservations.filter': 'Filtrovať',
+  'reservations.searchPlaceholder': 'Hľadať',
+  'reservations.results': '{shown} z {total}',
+  'reservations.resetFilters': 'Zrušiť filtre',
+  'reservations.noMatches': 'Týmto filtrom nič nezodpovedá',
+  'reservations.viewOptions': 'Možnosti zobrazenia',
+  'reservations.resetView': 'Obnoviť zobrazenie',
+  'reservations.group.label': 'Zoskupiť podľa',
+  'reservations.group.status': 'Stav',
+  'reservations.group.day': 'Deň',
+  'reservations.group.type': 'Typ',
+  'reservations.group.none': 'Bez zoskupenia',
+  'reservations.transitApart': 'MHD ako samostatná sekcia',
+  'reservations.group.before': 'Pred cestou',
+  'reservations.group.after': 'Po ceste',
+  'reservations.group.undated': 'Bez dátumu',
+  'reservations.sort.label': 'Zoradiť podľa',
+  'reservations.sort.date': 'Dátum',
+  'reservations.sort.title': 'Názov',
+  'reservations.sort.type': 'Typ',
+  'reservations.sort.status': 'Stav',
+  'reservations.sort.earlyFirst': 'Najskoršie prvé',
+  'reservations.sort.lateFirst': 'Najneskoršie prvé',
+  'reservations.sort.aToZ': 'Od A po Z',
+  'reservations.sort.zToA': 'Od Z po A',
+  'reservations.timeline.dayCount': 'Počet dní: {count}',
+  'reservations.timeline.zoom': 'Mierka',
+  'reservations.timeline.trip': 'Cesta',
+  'reservations.timeline.day': 'Deň',
+  'reservations.timeline.prevDay': 'Predchádzajúci deň',
+  'reservations.timeline.nextDay': 'Nasledujúci deň',
+  'reservations.timeline.openDay': 'Otvoriť {day} po hodinách',
+  'reservations.timeline.nothingThisDay': 'V tento deň nič nie je.',
+  'reservations.timeline.today': 'Dnes',
+  'reservations.timeline.now': 'teraz',
+  'reservations.timeline.byType': 'Samostatný pruh pre každý typ',
+  'reservations.timeline.context': 'Zobraziť druhú záložku',
+  'reservations.timeline.contextBookings': 'Rezervácie',
+  'reservations.timeline.contextTransports': 'Doprava',
+  'reservations.timeline.noneDated': 'Zatiaľ nič z toho nemá dátum.',
+  'reservations.undated': 'Bez dátumu',
+  'reservations.nights': 'Noci',
+  'reservations.start': 'Začiatok',
+  'reservations.end': 'Koniec',
+  'reservations.rename': 'Premenovať',
+  'reservations.copyCode': 'Kopírovať rezervačný kód',
+  'reservations.copyFailed': 'Kopírovanie zlyhalo',
+  'reservations.showInFiles': 'Zobraziť v súboroch',
 };
 export default reservations;
diff --git a/shared/src/i18n/sk/transport.ts b/shared/src/i18n/sk/transport.ts
index 0df59ef73..6aeef8107 100644
--- a/shared/src/i18n/sk/transport.ts
+++ b/shared/src/i18n/sk/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Upraviť dopravu',
   'transport.title': 'Doprava',
   'transport.addManual': 'Doprava',
+  'transport.empty': 'Zatiaľ žiadna doprava',
 };
 export default transport;
diff --git a/shared/src/i18n/sv/budget.ts b/shared/src/i18n/sv/budget.ts
index 065ae0a84..bb4d89b67 100644
--- a/shared/src/i18n/sv/budget.ts
+++ b/shared/src/i18n/sv/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Endast totalt – ännu inte reglerat',
   'costs.tapToInclude': 'Tryck för att inkludera',
   'costs.amount': 'Summa',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Fördelning',
+  'costs.splitEqually': 'Lika',
+  'costs.splitCustom': 'Anpassat',
+  'costs.splitTicket': 'Kvitto',
+  'costs.perPerson': '{amount} per person',
+  'costs.payersHint': 'Bocka för vem som betalade och skriv in hur mycket var och en lade ut.',
+  'costs.splitHint.equally': 'Alla som är ibockade betalar lika stor andel.',
+  'costs.splitHint.custom': 'Skriv in varje persons andel; tillsammans måste de bli hela summan.',
+  'costs.splitHint.ticket': 'Lista det som stod på kvittot och bocka för vem som hade varje artikel.',
   'costs.filter.allCategories': 'Alla kategorier',
   'costs.filter.allDays': 'Alla dagar',
   'costs.expensesCount': '{count} utgifter',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Kvitton',
   'costs.receiptsTitle': 'Kvitton & fakturor',
   'costs.attachReceipt': 'Bifoga kvitto / faktura',
+  'costs.attach': 'Bifoga',
   'costs.scan.button': 'Skanna kvitto',
   'costs.scan.reading': 'Läser kvittot…',
   'costs.scan.review': 'Granska utgiften',
   'costs.scan.nothingRead': 'Inget kvitto kunde läsas från fotot.',
   'costs.scan.failed': 'Det gick inte att börja läsa kvittot.',
   'costs.scan.title': 'Skanna kvitto',
-  'costs.scan.accepted': 'Ett foto av ett kvitto (JPG, PNG eller WEBP, högst 10 MB). AI-modellen läser det i bakgrunden, sedan granskar du utgiften innan den sparas.',
+  'costs.scan.accepted':
+    'Ett foto av ett kvitto (JPG, PNG eller WEBP, högst 10 MB). AI-modellen läser det i bakgrunden, sedan granskar du utgiften innan den sparas.',
   'costs.scan.dropHere': 'Släpp kvittofotot här, eller klicka för att välja eller ta ett',
   'costs.scan.dropActive': 'Släpp fotot för att skanna det',
   'costs.scan.start': 'Skanna',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Inga bifogade kvitton',
   'costs.deleteReceipt': 'Ta bort kvitto',
   'costs.viewReceipt': 'Visa kvitto',
-  'costs.receiptLeftBehind': 'Sparandet misslyckades och {count} uppladdade kvitton finns kvar. Ta bort dem under Filer.',
+  'costs.receiptLeftBehind':
+    'Sparandet misslyckades och {count} uppladdade kvitton finns kvar. Ta bort dem under Filer.',
 };
 export default budget;
diff --git a/shared/src/i18n/sv/help.ts b/shared/src/i18n/sv/help.ts
index f1016b9bd..994f73ad7 100644
--- a/shared/src/i18n/sv/help.ts
+++ b/shared/src/i18n/sv/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'sv' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Hjälp och dokumentation',
+  'help.search': 'Sök i dokumentationen…',
+  'help.contents': 'Innehåll',
+  'help.noResults': 'Inga matchande sidor.',
+  'help.errorTitle': 'Sidan kunde inte laddas',
+  'help.errorBody': 'Hjälpinnehållet hämtas från TREK-wikin. Kontrollera anslutningen och försök igen.',
 
   // center
   'help.center.button': 'Hjälp för den här vyn',
@@ -1008,7 +1008,7 @@ const help: TranslationStrings = {
     'Travel & map: bokningsrutter alltid på kartan, Utforska platser-pillret, ruttoptimering från ditt boende, blurrade bokningskoder och etiketter på bokningsrutter.',
   'help.ctx.settings-display.bullet.3':
     'Start: om TREK öppnar på översikten eller på den aktiva resan, och vilken flik i en resa som kommer upp först.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Utseende',
   'help.ctx.settings-appearance.summary':
     'Hur TREK ser ut på det här kontot: ljust eller mörkt, accentfärgen, glas och rörelse, textstorlek och vilka widgetar översikten visar. Allt slår igenom live, på varje enhet du loggar in på.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2229,9 +2229,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     'Öppna stoppet som bokningen hör till. Kortet visar en remsa med Bekräftat eller Väntar på beslut och bokningens namn.',
   'help.guide.place-booking.step.2': 'Remsan bär Datum, Tid och Bokningskod, och vilka noteringar bokningen än har.',
-  'help.guide.place-booking.step.3': 'Klicka på remsan. Bokningens eget formulär öppnas på den.',
+  'help.guide.place-booking.step.3': 'Klicka på remsan. Bokningen öppnas ovanpå kartan.',
   'help.guide.place-booking.step.4':
-    'Länk till dagsuppgift är det som fäster en bokning vid ett stopp, och här namnger den redan det här. Stäng formuläret igen.',
+    'Redigera längst ner i bokningen öppnar dess eget formulär. Länk till dagsuppgift där är det som fäster en bokning vid ett stopp, och här namnger den redan det här. Stäng formuläret igen.',
   'help.guide.place-booking.step.5':
     'En ny bokning för ett stopp börjar i dagkolumnen: håll pekaren på stoppet och klicka på + i dess slut. Formuläret öppnas som Ny bokning, redan länkat till det.',
   'help.guide.place-booking.result':
@@ -2582,7 +2582,8 @@ const help: TranslationStrings = {
     'En rad visar vilken sorts bokning det är, dess namn och, när den hör till ett stopp, det stoppet efter en punkt. Dess tider sitter längst till höger.',
   'help.guide.day-bookings.step.3':
     'Färgen säger var en bokning står: en grön rad är bekräftad, en bärnstensgul väntar fortfarande. Hotell finns inte i den här listan, de har sitt eget block nedanför.',
-  'help.guide.day-bookings.step.4': 'Listan läser bara ut bokningarna. En bokning skapas och ändras under Bokningar.',
+  'help.guide.day-bookings.step.4':
+    'Klicka på en rad så öppnas bokningen. Redigera längst ner i den ändrar den; nya bokningar skapas under Bokningar.',
   'help.guide.day-bookings.result':
     'Allt som är daterat på dagen, och allt som hänger på ett av dess stopp, finns i den här enda listan.',
   'help.guide.day-bookings.tip.1':
@@ -3122,13 +3123,13 @@ const help: TranslationStrings = {
     'Lägg in en restaurang, ett evenemang, en rundtur, en parkeringsplats eller vad som helst annat i resan för hand.',
   'help.guide.create-booking.step.1': 'Klicka på Manuell bokning högst upp till höger på fliken. Ny bokning öppnas.',
   'help.guide.create-booking.step.2':
-    'Välj Bokningstyp i listan överst i formuläret, bredvid Resenärer. Boende, Restaurang, Evenemang, Rundtur, Parkering och Övrigt är de sex som den här fliken gör, och formuläret ändras med valet: bara Boende byter sina datum mot ett spann av dagar.',
+    'Klicka på typbrickan under titeln, i formulärets huvud, och välj Bokningstyp. Boende, Restaurang, Evenemang, Rundtur, Parkering och Övrigt är de sex som den här fliken gör, och formuläret ändras med valet: bara Boende byter sina datum mot ett spann av dagar.',
   'help.guide.create-booking.step.3':
     'Skriv in Titel. Det är det enda fältet formuläret kräver, och Lägg till är död tills det står något i det.',
   'help.guide.create-booking.step.4':
     'Ställ in Datum och Starttid, och Slutdatum och Sluttid om bokningen har ett slut. Kalendrarna erbjuder bara dagar inom resan, och ett slut som inte ligger efter starten säger det i rött och spärrar Lägg till.',
   'help.guide.create-booking.step.5':
-    'Skriv in Bokningskoden från bekräftelsen och sätt Status. Väntar på beslut eller Bekräftat avgör vilket av de två avsnitten kortet hamnar i.',
+    'Skriv in Bokningskoden från bekräftelsen. Statusbrickan bredvid typen visar Väntar på beslut; ett klick växlar den till Bekräftat och tillbaka, och det avgör vilket av de två avsnitten kortet hamnar i.',
   'help.guide.create-booking.step.6': 'Klicka på Lägg till.',
   'help.guide.create-booking.result':
     'Bokningen är ett kort i sitt avsnitt med sin typbricka, sina datum och sin kod, och alla andra på resan ser den dyka upp.',
@@ -3178,7 +3179,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Säg vem en bokning gäller',
   'help.guide.booking-travelers.goal': 'Märk ut resenärerna en bokning täcker, och se sedan bara deras.',
   'help.guide.booking-travelers.step.1':
-    'Öppna bokningen med pennan. Resenärer sitter överst i formuläret, bredvid Bokningstyp, och visar Tilldela resenärer så länge ingen är med på bokningen.',
+    'Öppna bokningen med pennan. Resenärer sitter bredvid Bokningskoden och visar Tilldela resenärer så länge ingen är med på bokningen.',
   'help.guide.booking-travelers.step.2':
     'Klicka på det och välj personerna den här bokningen gäller; namngivna gäster finns också i listan. En vald får en bock och sin avatar i fältet. Klicka på namnet igen för att ta bort den.',
   'help.guide.booking-travelers.step.3': 'Klicka på Uppdatera.',
@@ -3273,7 +3274,8 @@ const help: TranslationStrings = {
     'Klicka på pennan i kortets huvud. Redigera reservation öppnas med allt bokningen vet.',
   'help.guide.edit-booking.step.2':
     'Ändra det som behöver ändras, här Bokningskoden som operatören till slut skickade.',
-  'help.guide.edit-booking.step.3': 'Sätt Status på Bekräftat.',
+  'help.guide.edit-booking.step.3':
+    'Klicka på brickan Väntar på beslut i formulärets huvud. Den växlar till Bekräftat.',
   'help.guide.edit-booking.step.4': 'Klicka på Uppdatera.',
   'help.guide.edit-booking.result':
     'Kortet flyttar sig: en bekräftad bokning står i avsnittet Bekräftat bakom en grön prick, och alla på resan ser den flytta sig.',
@@ -3566,19 +3568,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Läs förbindelsen hållplats för hållplats, byt namn på den, eller slå upp resvägen igen.',
   'help.guide.change-transit-route.step.1':
-    'I fliken Transporter sitter de planerade förbindelserna under Automatisk kollektivtrafik. Klicka på kortet.',
+    'I fliken Transporter sitter de planerade förbindelserna under Automatisk kollektivtrafik. Klicka på kortet; förbindelsen öppnas som en bokning.',
   'help.guide.change-transit-route.step.2':
     'Restid, Byten och Gång sitter överst. Reseplan under dem går igenom förbindelsen hållplats för hållplats, med spåren och promenaderna mellan linjerna.',
   'help.guide.change-transit-route.step.3':
-    'Ändra resväg kör sökningen igen, redan ifylld med den här förbindelsens två ändar och dess dag.',
+    'Ändra resväg längst ner i bokningen kör sökningen igen, redan ifylld med den här förbindelsens två ändar och dess dag.',
   'help.guide.change-transit-route.step.4':
-    'Välj en annan förbindelse och klicka på Lägg till dag; den tar den gamlas plats. Redigera detaljer, bredvid Ändra resväg, öppnar i stället det vanliga transportformuläret, där Bokningskoden, Statusen, resenärerna och filerna bor.',
+    'Välj en annan förbindelse och klicka på Lägg till dag; den tar den gamlas plats. Redigera, i andra änden av samma rad, öppnar i stället det vanliga transportformuläret, där Bokningskoden, Statusen, resenärerna, noteringarna och filerna bor.',
   'help.guide.change-transit-route.result':
     'Vyn Kollektivtrafikresa bär den nya Reseplanen, och dess kort i fliken Transporter visar de nya linjerna och tiderna.',
   'help.guide.change-transit-route.tip.1':
-    'Titeln i vyn Kollektivtrafikresa är bara text: pennan bredvid den byter namn utan att röra resvägen. Noteringar under tar markdown och har en flik Redigera och en Förhandsvisning.',
+    'Titeln i bokningens huvud byter namn på förbindelsen utan att röra resvägen. Dess noteringar skrivs i transportformuläret bakom Redigera.',
   'help.guide.change-transit-route.tip.2':
-    'Ta bort längst ner i vyn Kollektivtrafikresa tar ut förbindelsen ur resan; dagen behåller sina stopp.',
+    'Ta bort längst ner i bokningen tar ut förbindelsen ur resan; dagen behåller sina stopp.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Ändra hur en sträcka färdas',
   'help.guide.leg-travel-mode.goal':
@@ -3602,17 +3604,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Ändra eller ta bort en transport',
   'help.guide.edit-transport.goal': 'Fixa en tid, en plattform eller en bokningskod, eller ta bort färden ur resan.',
-  'help.guide.edit-transport.step.1': 'I dagsplanen är en transport en färgad rad mellan stoppen. Klicka på den.',
+  'help.guide.edit-transport.step.1':
+    'I dagsplanen är en transport en färgad rad mellan stoppen. Klicka på den; dess bokning öppnas med tiderna, resvägen och Bokningskoden.',
   'help.guide.edit-transport.step.2':
-    'Formuläret är det som skapade den, med Redigera transport i sin titelrad. Allt går att ändra: typen, resvägen, dagarna och tiderna, Bokningskoden, Statusen.',
+    'Redigera längst ner i bokningen öppnar formuläret som skapade den, med Redigera transport i sin titelrad. Allt går att ändra: typen, resvägen, dagarna och tiderna, Bokningskoden, Statusen.',
   'help.guide.edit-transport.step.3':
     'En flygnings resväg är en kedja av flygplatser, ett tågs en kedja av stationer. Lägg till stopp sätter in ytterligare ett däremellan, och varje sträcka behåller sina egna tider och sitt eget flygnummer eller tågnummer.',
   'help.guide.edit-transport.step.4':
-    'Klicka på Uppdatera. För att ta bort transporten helt, använd papperskorgen på dess kort i fliken Transporter och bekräfta.',
+    'Klicka på Uppdatera. För att ta bort transporten helt, använd Ta bort längst ner i dess bokning, eller papperskorgen på dess kort i fliken Transporter, och bekräfta.',
   'help.guide.edit-transport.result':
     'Ändringen syns överallt där transporten förekommer: fliken Transporter, dagen den går på, och dess linje på kartan.',
   'help.guide.edit-transport.tip.1':
-    'Samma formulär öppnas från båda håll, pennan på kortet i fliken Transporter och transportens egen rad i dagsplanen. En planerad kollektivtrafikförbindelse är undantaget: dess rad öppnar vyn Kollektivtrafikresa, och Redigera detaljer där leder till det här formuläret.',
+    'Samma formulär öppnas från båda håll: via Redigera i bokningen som en rad i dagsplanen öppnar, och via pennan på kortet i fliken Transporter. En planerad kollektivtrafikförbindelse öppnas också som en bokning; Ändra resväg söker där på nytt, och Redigera leder till det här formuläret.',
   'help.guide.edit-transport.tip.2':
     'Att flytta en transport till en annan dag behöver inte formuläret alls: dra dess rad från ett dagkort till nästa.',
   // transport-on-map
diff --git a/shared/src/i18n/sv/places.ts b/shared/src/i18n/sv/places.ts
index f691c566a..8266b510e 100644
--- a/shared/src/i18n/sv/places.ts
+++ b/shared/src/i18n/sv/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Välj minst en typ att importera.',
   'places.selectionCount': '{count} markerade',
   'places.deleteSelected': 'Ta bort det markerade',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Ändra kategori',
+  'places.categoryChanged': '{count} platser uppdaterade',
   'places.kmlKmzImported': '{count} platser som importerats från KMZ/KML',
   'places.urlResolved': 'Plats importerad från URL',
   'places.importList': 'Importera lista',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Visa hela resan',
   'places.filterTracks': 'Spår',
   'places.filterByRating': 'Filtrera efter betyg',
+  'places.filterShow': 'Visa',
+  'places.clearSearch': 'Rensa sökning',
   'places.yourRating': 'Ditt betyg',
   'places.notRated': 'Inte betygsatt ännu',
   'places.search': 'Sök efter platser...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Gata, stad, land',
   'places.formLat': 'Latitud (t.ex. 48.8566)',
   'places.formLng': 'Longitud (t.ex. 2.3522)',
+  'places.formLatLabel': 'Latitud',
+  'places.formLngLabel': 'Longitud',
   'places.formCategory': 'Kategori',
   'places.noCategory': 'Ingen kategori',
   'places.newCategory': 'Ny kategori',
diff --git a/shared/src/i18n/sv/reservations.ts b/shared/src/i18n/sv/reservations.ts
index bb1d2a958..c716dc31c 100644
--- a/shared/src/i18n/sv/reservations.ts
+++ b/shared/src/i18n/sv/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Cyckel',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Kollektivtrafik',
+  'reservations.typeShort.transit': 'Kollektivt',
   'reservations.type.transport_other': 'Annat',
   'reservations.confirm.delete': 'Är du säker på att du vill ta bort bokningen "{name}"?',
   'reservations.confirm.deleteTitle': 'Ta bort bokningen?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Plats / Adress',
   'reservations.locationPlaceholder': 'Adress, flygplats, hotell...',
   'reservations.confirmationCode': 'Bokningskod',
+  'reservations.routeLabel': 'Rutt',
+  'reservations.segmentCodes': 'Koder per sträcka',
   'reservations.confirmationPlaceholder': 't.ex. ABC12345',
   'reservations.day': 'Dag',
   'reservations.noDay': 'Ingen dag',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Det gick inte att ta bort',
   'reservations.confirm.remove': 'Ta bort bokningen för "{name}"?',
   'reservations.linkAssignment': 'Länk till dagsuppgift',
+  'reservations.linkedTo': 'Länkad till',
   'reservations.pickAssignment': 'Välj en uppgift från din plan...',
   'reservations.noAssignment': 'Ingen länk (fristående)',
   'reservations.price': 'Pris',
@@ -180,5 +184,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Resenärer',
   'reservations.travelers.assign': 'Tilldela resenärer',
   'reservations.travelers.none': 'Inga resedeltagare ännu.',
+  'reservations.status.switchTo': 'Ändra till {status}',
+  'reservations.view.label': 'Vy',
+  'reservations.view.cards': 'Kort',
+  'reservations.view.list': 'Lista',
+  'reservations.view.timeline': 'Tidslinje',
+  'reservations.filter': 'Filtrera',
+  'reservations.searchPlaceholder': 'Sök',
+  'reservations.results': '{shown} av {total}',
+  'reservations.resetFilters': 'Återställ filter',
+  'reservations.noMatches': 'Inget matchar de här filtren',
+  'reservations.viewOptions': 'Visningsalternativ',
+  'reservations.resetView': 'Återställ vy',
+  'reservations.group.label': 'Gruppera efter',
+  'reservations.group.status': 'Status',
+  'reservations.group.day': 'Dag',
+  'reservations.group.type': 'Typ',
+  'reservations.group.none': 'Ingen gruppering',
+  'reservations.transitApart': 'Kollektivtrafik som eget avsnitt',
+  'reservations.group.before': 'Före resan',
+  'reservations.group.after': 'Efter resan',
+  'reservations.group.undated': 'Inget datum',
+  'reservations.sort.label': 'Sortera efter',
+  'reservations.sort.date': 'Datum',
+  'reservations.sort.title': 'Titel',
+  'reservations.sort.type': 'Typ',
+  'reservations.sort.status': 'Status',
+  'reservations.sort.earlyFirst': 'Tidigast först',
+  'reservations.sort.lateFirst': 'Senast först',
+  'reservations.sort.aToZ': 'A till Ö',
+  'reservations.sort.zToA': 'Ö till A',
+  'reservations.timeline.dayCount': '{count} dagar',
+  'reservations.timeline.zoom': 'Skala',
+  'reservations.timeline.trip': 'Resa',
+  'reservations.timeline.day': 'Dag',
+  'reservations.timeline.prevDay': 'Föregående dag',
+  'reservations.timeline.nextDay': 'Nästa dag',
+  'reservations.timeline.openDay': 'Öppna {day} timme för timme',
+  'reservations.timeline.nothingThisDay': 'Inget den här dagen.',
+  'reservations.timeline.today': 'Idag',
+  'reservations.timeline.now': 'nu',
+  'reservations.timeline.byType': 'Ett spår per typ',
+  'reservations.timeline.context': 'Visa den andra fliken',
+  'reservations.timeline.contextBookings': 'Bokningar',
+  'reservations.timeline.contextTransports': 'Transporter',
+  'reservations.timeline.noneDated': 'Inget av det här har något datum än.',
+  'reservations.undated': 'Inget datum',
+  'reservations.nights': 'Nätter',
+  'reservations.start': 'Start',
+  'reservations.end': 'Slut',
+  'reservations.rename': 'Döp om',
+  'reservations.copyCode': 'Kopiera bokningskod',
+  'reservations.copyFailed': 'Kunde inte kopiera',
+  'reservations.showInFiles': 'Visa i filer',
 };
 export default reservations;
diff --git a/shared/src/i18n/sv/transport.ts b/shared/src/i18n/sv/transport.ts
index 0d6e6fd3d..7fcf12a1b 100644
--- a/shared/src/i18n/sv/transport.ts
+++ b/shared/src/i18n/sv/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Redigera transport',
   'transport.title': 'Transporter',
   'transport.addManual': 'Transport',
+  'transport.empty': 'Inga transporter än',
 };
 export default transport;
diff --git a/shared/src/i18n/th/budget.ts b/shared/src/i18n/th/budget.ts
index fba6ff704..67eaca45a 100644
--- a/shared/src/i18n/th/budget.ts
+++ b/shared/src/i18n/th/budget.ts
@@ -1,174 +1,181 @@
 import type { TranslationStrings } from '../types';
 
 const budget: TranslationStrings = {
-  'costs.confirm.deleteTitle': "ลบค่าใช้จ่ายใช่ไหม",
-  'costs.confirm.deleteBody': "\"{name}\" จะถูกลบอย่างถาวร",
-  'budget.title': "งบประมาณ",
-  'budget.exportCsv': "ส่งออก CSV",
-  'budget.emptyTitle': "ยังไม่มีการสร้างงบประมาณ",
-  'budget.emptyText': "สร้างหมวดหมู่และรายการเพื่อวางแผนงบประมาณการเดินทางของคุณ",
-  'budget.emptyPlaceholder': "ใส่ชื่อหมวดหมู่...",
-  'budget.createCategory': "สร้างหมวดหมู่",
-  'budget.category': "หมวดหมู่",
-  'budget.categoryName': "ชื่อหมวดหมู่",
-  'budget.table.name': "ชื่อ",
-  'budget.table.total': "รวม",
-  'budget.table.persons': "บุคคล",
-  'budget.table.days': "วัน",
-  'budget.table.perPerson': "ต่อคน",
-  'budget.table.perDay': "ต่อวัน",
-  'budget.table.perPersonDay': "ต่อคน/วัน",
-  'budget.table.note': "หมายเหตุ",
-  'budget.table.date': "วันที่",
-  'budget.newEntry': "รายการใหม่",
-  'budget.defaultEntry': "รายการใหม่",
-  'budget.defaultCategory': "หมวดหมู่ใหม่",
-  'budget.total': "รวม",
-  'budget.totalBudget': "งบประมาณทั้งหมด",
-  'budget.byCategory': "ตามหมวดหมู่",
-  'budget.editTooltip': "คลิกเพื่อแก้ไข",
-  'budget.linkedToReservation': "เชื่อมโยงกับการจอง — แก้ไขชื่อที่นั่น",
-  'budget.confirm.deleteCategory': "คุณแน่ใจหรือไม่ว่าต้องการลบหมวดหมู่ \"{name}\" ที่มีรายการ {count}",
-  'budget.deleteCategory': "ลบหมวดหมู่",
-  'budget.perPerson': "ต่อคน",
-  'budget.paid': "ชำระเงินแล้ว",
-  'budget.open': "เปิด",
-  'budget.noMembers': "ไม่มีสมาชิกที่ได้รับมอบหมาย",
-  'budget.settlement': "การชำระบัญชี",
+  'costs.confirm.deleteTitle': 'ลบค่าใช้จ่ายใช่ไหม',
+  'costs.confirm.deleteBody': '"{name}" จะถูกลบอย่างถาวร',
+  'budget.title': 'งบประมาณ',
+  'budget.exportCsv': 'ส่งออก CSV',
+  'budget.emptyTitle': 'ยังไม่มีการสร้างงบประมาณ',
+  'budget.emptyText': 'สร้างหมวดหมู่และรายการเพื่อวางแผนงบประมาณการเดินทางของคุณ',
+  'budget.emptyPlaceholder': 'ใส่ชื่อหมวดหมู่...',
+  'budget.createCategory': 'สร้างหมวดหมู่',
+  'budget.category': 'หมวดหมู่',
+  'budget.categoryName': 'ชื่อหมวดหมู่',
+  'budget.table.name': 'ชื่อ',
+  'budget.table.total': 'รวม',
+  'budget.table.persons': 'บุคคล',
+  'budget.table.days': 'วัน',
+  'budget.table.perPerson': 'ต่อคน',
+  'budget.table.perDay': 'ต่อวัน',
+  'budget.table.perPersonDay': 'ต่อคน/วัน',
+  'budget.table.note': 'หมายเหตุ',
+  'budget.table.date': 'วันที่',
+  'budget.newEntry': 'รายการใหม่',
+  'budget.defaultEntry': 'รายการใหม่',
+  'budget.defaultCategory': 'หมวดหมู่ใหม่',
+  'budget.total': 'รวม',
+  'budget.totalBudget': 'งบประมาณทั้งหมด',
+  'budget.byCategory': 'ตามหมวดหมู่',
+  'budget.editTooltip': 'คลิกเพื่อแก้ไข',
+  'budget.linkedToReservation': 'เชื่อมโยงกับการจอง — แก้ไขชื่อที่นั่น',
+  'budget.confirm.deleteCategory': 'คุณแน่ใจหรือไม่ว่าต้องการลบหมวดหมู่ "{name}" ที่มีรายการ {count}',
+  'budget.deleteCategory': 'ลบหมวดหมู่',
+  'budget.perPerson': 'ต่อคน',
+  'budget.paid': 'ชำระเงินแล้ว',
+  'budget.open': 'เปิด',
+  'budget.noMembers': 'ไม่มีสมาชิกที่ได้รับมอบหมาย',
+  'budget.settlement': 'การชำระบัญชี',
   'budget.settlementInfo':
-    "คลิกรูปประจำตัวของสมาชิกในรายการงบประมาณเพื่อทำเครื่องหมายเป็นสีเขียว ซึ่งหมายความว่าพวกเขาชำระเงินแล้ว ข้อตกลงจะแสดงให้เห็นว่าใครเป็นหนี้ใครและเป็นจำนวนเงินเท่าใด",
-  'budget.netBalances': "ยอดคงเหลือสุทธิ",
-  'budget.categoriesLabel': "หมวดหมู่",
-  'costs.you': "คุณ",
-  'costs.youShort': "ย",
-  'costs.youLower': "คุณ",
-  'costs.youOwe': "คุณเป็นหนี้",
-  'costs.youOweSub': "คุณควรจะจ่ายเงินให้คนอื่น",
-  'costs.youreOwed': "มีคนเป็นหนี้คุณ",
-  'costs.youreOwedSub': "คนอื่นควรจ่ายเงินให้คุณ",
-  'costs.totalSpend': "ค่าใช้จ่ายในการเดินทางทั้งหมด",
-  'costs.totalSpendSub': "ทั่วทุกนักเดินทาง",
-  'costs.to': "ถึง",
-  'costs.from': "จาก",
-  'costs.allSettled': "ทุกคนเคลียร์ยอดแล้ว",
-  'costs.nothingOwed': "ไม่มีอะไรเป็นหนี้คุณ",
-  'costs.yourShare': "ส่วนแบ่งของคุณ",
-  'costs.youPaid': "คุณจ่ายเงินแล้ว",
-  'costs.outstanding': "ยอดค้างชำระ",
-  'costs.outstandingSub': "ค่าใช้จ่ายที่ยังไม่มีผู้ชำระเงิน",
-  'costs.outstandingItems': "ค่าใช้จ่ายจำเป็นต้องมีผู้ชำระเงิน",
-  'costs.expenses': "ค่าใช้จ่าย",
-  'costs.entries': "{count} รายการ",
-  'costs.searchPlaceholder': "ค้นหาค่าใช้จ่าย...",
-  'costs.filter.all': "ทั้งหมด",
-  'costs.filter.mine': "ชำระเงินโดยฉัน",
-  'costs.filter.owed': "ฉันเป็นหนี้",
-  'costs.filter.allCategories': "ทุกหมวดหมู่",
-  'costs.filter.allDays': "ทั้งวัน",
-  'costs.expensesCount': "{count} ค่าใช้จ่าย",
-  'costs.addExpense': "เพิ่มค่าใช้จ่าย",
-  'costs.editExpense': "แก้ไขค่าใช้จ่าย",
-  'costs.noMatch': "ไม่มีค่าใช้จ่ายที่ตรงกับการค้นหาของคุณ",
-  'costs.emptyText': "ไม่มีค่าใช้จ่ายเลย เพิ่มอันแรกของคุณ",
-  'costs.spent': "{amount} ใช้จ่ายไป",
-  'costs.noDate': "ไม่มีวันที่",
-  'costs.noOnePaid': "ยังไม่มีใครจ่ายเงินเลย",
-  'costs.youLent': "คุณให้ยืม {amount}",
-  'costs.youBorrowed': "คุณยืม {amount}",
-  'costs.settleUp': "เคลียร์ยอด",
-  'costs.history': "ประวัติ",
-  'costs.everyoneSquare': "ทุกคนเคลียร์ยอดแล้ว",
-  'costs.nothingOutstanding': "ไม่มียอดค้างชำระในขณะนี้",
-  'costs.pay': "จ่าย",
-  'costs.pays': "จ่าย",
-  'costs.settle': "ชำระ",
-  'costs.balances': "ยอดคงเหลือ",
-  'costs.byCategory': "ตามหมวดหมู่",
-  'costs.noCategories': "ไม่มีค่าใช้จ่ายเลย",
-  'costs.settleHistory': "ประวัติการชำระบัญชี",
-  'costs.noSettlements': "ยังไม่มีการชำระเงิน",
-  'costs.paymentsSettled': "{count} ชำระเงินเรียบร้อยแล้ว",
-  'costs.paid': "จ่ายแล้ว",
-  'costs.undo': "เลิกทำ",
-  'costs.whatFor': "มันมีไว้เพื่ออะไร?",
-  'costs.namePlaceholder': "เช่น อาหารเย็น ของที่ระลึก น้ำมัน…",
-  'costs.note': "หมายเหตุ",
-  'costs.notePlaceholder': "คุ้มครองอะไร ใครเป็นหนี้อะไรคืน...",
-  'costs.addNote': "เพิ่มบันทึก",
-  'costs.showNote': "แสดงบันทึก",
-  'costs.hideNote': "ซ่อนบันทึก",
-  'costs.totalAmount': "จำนวนเงินทั้งหมด",
-  'costs.currency': "สกุลเงิน",
-  'costs.day': "วัน",
-  'costs.rateLabel': "1 {from} = {to}",
-  'costs.category': "หมวดหมู่",
-  'costs.whoPaid': "ใครเป็นคนจ่าย?",
-  'costs.multiplePayers': "จ่ายหลายคนแล้ว",
-  'costs.singlePayer': "คนหนึ่งจ่าย",
-  'costs.payersUnbalanced': "จำนวนเงินของผู้ชำระจะต้องรวมกันไม่เกิน {amount}",
-  'costs.splitBetween': "แบ่งเท่าๆ กันระหว่าง",
-  'costs.split': "แยก",
-  'costs.splitEqually': "เท่าๆ กัน",
-  'costs.splitCustom': "กำหนดเอง",
-  'costs.splitTicket': "ตั๋ว",
-  'costs.pickSomeone': "เลือกอย่างน้อยหนึ่งคนที่จะแยกด้วย",
-  'costs.splitSummary': "แยก {count} วิธี · {amount} วิธีละ",
-  'costs.cat.accommodation': "ที่พัก",
-  'costs.cat.food': "อาหารและเครื่องดื่ม",
-  'costs.cat.groceries': "ร้านขายของชำ",
-  'costs.cat.transport': "ขนส่ง",
-  'costs.cat.flights': "เที่ยวบิน",
-  'costs.cat.activities': "กิจกรรม",
-  'costs.cat.sightseeing': "เที่ยวชมสถานที่",
-  'costs.cat.shopping': "ช้อปปิ้ง",
-  'costs.cat.fees': "ค่าธรรมเนียมและตั๋ว",
-  'costs.cat.health': "สุขภาพ",
-  'costs.cat.tips': "เคล็ดลับ",
-  'costs.cat.fuel': "เชื้อเพลิง",
-  'costs.cat.parking': "ที่จอดรถ",
-  'costs.cat.other': "อื่นๆ",
-  'costs.daysCount': "{count} วัน",
-  'costs.travelers': "นักเดินทาง {count}",
-  'costs.liveRate': "อัตราสด",
-  'costs.settleAll': "ชำระทั้งหมด",
-  'costs.payment': "การชำระเงิน",
-  'costs.editPayment': "แก้ไขการชำระเงิน",
-  'costs.addPayment': "เพิ่มการชำระเงิน",
-  'costs.unfinished': "ยังไม่เสร็จ",
-  'costs.unfinishedHint': "รวมเท่านั้น — ยังไม่ตัดสิน",
-  'costs.tapToInclude': "แตะเพื่อรวม",
-  'costs.amount': "จำนวน",
-  'costs.ticketItemName': "ชื่อรายการ",
-  'costs.ticketSplitting': "แยก:",
-  'costs.ticketAddItem': "เพิ่มรายการ",
-  'costs.ticketShares': "ส่วนแบ่งแต่ละคน",
-  'costs.excluded': "ไม่รวม",
-  'costs.splitBalanced': "หารเท่า ๆ กัน",
-  'costs.splitSumUnder': "ผลรวมของการแยก: {sum} จาก {total} (ต่ำกว่าโดย {diff})",
-  'costs.splitSumOver': "ผลรวมของการแยก: {sum} จาก {total} (มากกว่า {diff})",
-  'costs.toggleSign': "สลับระหว่างค่าใช้จ่ายและการคืนเงิน",
-  'costs.finalBudget': "งบประมาณสุดท้าย",
-  'costs.finalExpenses': "ค่าใช้จ่ายที่ชำระแล้ว",
-  'costs.finalReimbursed': "ยอดชดเชยสุทธิ",
-  'costs.finalPending': "ยอดชดเชยที่รอดำเนินการ",
-  'costs.receipts': "ใบเสร็จ",
-  'costs.receiptsTitle': "ใบเสร็จและใบแจ้งหนี้",
-  'costs.attachReceipt': "แนบใบเสร็จ / ใบแจ้งหนี้",
-  'costs.scan.button': "สแกนใบเสร็จ",
-  'costs.scan.reading': "กำลังอ่านใบเสร็จ…",
-  'costs.scan.review': "ตรวจสอบค่าใช้จ่าย",
-  'costs.scan.nothingRead': "อ่านใบเสร็จจากรูปนี้ไม่ได้",
-  'costs.scan.failed': "ไม่สามารถเริ่มอ่านใบเสร็จได้",
-  'costs.scan.title': "สแกนใบเสร็จ",
-  'costs.scan.accepted': "รูปถ่ายใบเสร็จหนึ่งใบ (JPG, PNG หรือ WEBP ไม่เกิน 10 MB) โมเดล AI จะอ่านอยู่เบื้องหลัง จากนั้นคุณตรวจสอบค่าใช้จ่ายก่อนบันทึก",
-  'costs.scan.dropHere': "วางรูปใบเสร็จที่นี่ หรือคลิกเพื่อเลือกหรือถ่ายรูป",
-  'costs.scan.dropActive': "ปล่อยรูปเพื่อสแกน",
-  'costs.scan.start': "สแกน",
-  'costs.scan.unsupported': "สแกนได้เฉพาะรูปถ่าย: JPG, PNG หรือ WEBP",
-  'costs.noReceipts': "ยังไม่มีใบเสร็จแนบ",
-  'costs.deleteReceipt': "ลบใบเสร็จ",
-  'costs.viewReceipt': "ดูใบเสร็จ",
-  'costs.receiptLeftBehind': "บันทึกไม่สำเร็จ และยังมีใบเสร็จที่อัปโหลด {count} รายการอยู่ ลบได้ในแท็บไฟล์",
+    'คลิกรูปประจำตัวของสมาชิกในรายการงบประมาณเพื่อทำเครื่องหมายเป็นสีเขียว ซึ่งหมายความว่าพวกเขาชำระเงินแล้ว ข้อตกลงจะแสดงให้เห็นว่าใครเป็นหนี้ใครและเป็นจำนวนเงินเท่าใด',
+  'budget.netBalances': 'ยอดคงเหลือสุทธิ',
+  'budget.categoriesLabel': 'หมวดหมู่',
+  'costs.you': 'คุณ',
+  'costs.youShort': 'ย',
+  'costs.youLower': 'คุณ',
+  'costs.youOwe': 'คุณเป็นหนี้',
+  'costs.youOweSub': 'คุณควรจะจ่ายเงินให้คนอื่น',
+  'costs.youreOwed': 'มีคนเป็นหนี้คุณ',
+  'costs.youreOwedSub': 'คนอื่นควรจ่ายเงินให้คุณ',
+  'costs.totalSpend': 'ค่าใช้จ่ายในการเดินทางทั้งหมด',
+  'costs.totalSpendSub': 'ทั่วทุกนักเดินทาง',
+  'costs.to': 'ถึง',
+  'costs.from': 'จาก',
+  'costs.allSettled': 'ทุกคนเคลียร์ยอดแล้ว',
+  'costs.nothingOwed': 'ไม่มีอะไรเป็นหนี้คุณ',
+  'costs.yourShare': 'ส่วนแบ่งของคุณ',
+  'costs.youPaid': 'คุณจ่ายเงินแล้ว',
+  'costs.outstanding': 'ยอดค้างชำระ',
+  'costs.outstandingSub': 'ค่าใช้จ่ายที่ยังไม่มีผู้ชำระเงิน',
+  'costs.outstandingItems': 'ค่าใช้จ่ายจำเป็นต้องมีผู้ชำระเงิน',
+  'costs.expenses': 'ค่าใช้จ่าย',
+  'costs.entries': '{count} รายการ',
+  'costs.searchPlaceholder': 'ค้นหาค่าใช้จ่าย...',
+  'costs.filter.all': 'ทั้งหมด',
+  'costs.filter.mine': 'ชำระเงินโดยฉัน',
+  'costs.filter.owed': 'ฉันเป็นหนี้',
+  'costs.filter.allCategories': 'ทุกหมวดหมู่',
+  'costs.filter.allDays': 'ทั้งวัน',
+  'costs.expensesCount': '{count} ค่าใช้จ่าย',
+  'costs.addExpense': 'เพิ่มค่าใช้จ่าย',
+  'costs.editExpense': 'แก้ไขค่าใช้จ่าย',
+  'costs.noMatch': 'ไม่มีค่าใช้จ่ายที่ตรงกับการค้นหาของคุณ',
+  'costs.emptyText': 'ไม่มีค่าใช้จ่ายเลย เพิ่มอันแรกของคุณ',
+  'costs.spent': '{amount} ใช้จ่ายไป',
+  'costs.noDate': 'ไม่มีวันที่',
+  'costs.noOnePaid': 'ยังไม่มีใครจ่ายเงินเลย',
+  'costs.youLent': 'คุณให้ยืม {amount}',
+  'costs.youBorrowed': 'คุณยืม {amount}',
+  'costs.settleUp': 'เคลียร์ยอด',
+  'costs.history': 'ประวัติ',
+  'costs.everyoneSquare': 'ทุกคนเคลียร์ยอดแล้ว',
+  'costs.nothingOutstanding': 'ไม่มียอดค้างชำระในขณะนี้',
+  'costs.pay': 'จ่าย',
+  'costs.pays': 'จ่าย',
+  'costs.settle': 'ชำระ',
+  'costs.balances': 'ยอดคงเหลือ',
+  'costs.byCategory': 'ตามหมวดหมู่',
+  'costs.noCategories': 'ไม่มีค่าใช้จ่ายเลย',
+  'costs.settleHistory': 'ประวัติการชำระบัญชี',
+  'costs.noSettlements': 'ยังไม่มีการชำระเงิน',
+  'costs.paymentsSettled': '{count} ชำระเงินเรียบร้อยแล้ว',
+  'costs.paid': 'จ่ายแล้ว',
+  'costs.undo': 'เลิกทำ',
+  'costs.whatFor': 'มันมีไว้เพื่ออะไร?',
+  'costs.namePlaceholder': 'เช่น อาหารเย็น ของที่ระลึก น้ำมัน…',
+  'costs.note': 'หมายเหตุ',
+  'costs.notePlaceholder': 'คุ้มครองอะไร ใครเป็นหนี้อะไรคืน...',
+  'costs.addNote': 'เพิ่มบันทึก',
+  'costs.showNote': 'แสดงบันทึก',
+  'costs.hideNote': 'ซ่อนบันทึก',
+  'costs.totalAmount': 'จำนวนเงินทั้งหมด',
+  'costs.currency': 'สกุลเงิน',
+  'costs.day': 'วัน',
+  'costs.rateLabel': '1 {from} = {to}',
+  'costs.category': 'หมวดหมู่',
+  'costs.whoPaid': 'ใครเป็นคนจ่าย?',
+  'costs.multiplePayers': 'จ่ายหลายคนแล้ว',
+  'costs.singlePayer': 'คนหนึ่งจ่าย',
+  'costs.payersUnbalanced': 'จำนวนเงินของผู้ชำระจะต้องรวมกันไม่เกิน {amount}',
+  'costs.splitBetween': 'แบ่งเท่าๆ กันระหว่าง',
+  'costs.split': 'แยก',
+  'costs.splitEqually': 'เท่าๆ กัน',
+  'costs.splitCustom': 'กำหนดเอง',
+  'costs.splitTicket': 'ตั๋ว',
+  'costs.perPerson': '{amount} ต่อคน',
+  'costs.payersHint': 'ติ๊กเลือกคนที่จ่าย แล้วใส่จำนวนเงินที่แต่ละคนจ่ายไป',
+  'costs.splitHint.equally': 'ทุกคนที่ติ๊กเลือกจ่ายส่วนแบ่งเท่ากัน',
+  'costs.splitHint.custom': 'ใส่ส่วนแบ่งของแต่ละคน โดยรวมกันแล้วต้องเท่ากับยอดทั้งหมด',
+  'costs.splitHint.ticket': 'ใส่รายการที่อยู่ในใบเสร็จ แล้วติ๊กว่าใครสั่งรายการไหน',
+  'costs.pickSomeone': 'เลือกอย่างน้อยหนึ่งคนที่จะแยกด้วย',
+  'costs.splitSummary': 'แยก {count} วิธี · {amount} วิธีละ',
+  'costs.cat.accommodation': 'ที่พัก',
+  'costs.cat.food': 'อาหารและเครื่องดื่ม',
+  'costs.cat.groceries': 'ร้านขายของชำ',
+  'costs.cat.transport': 'ขนส่ง',
+  'costs.cat.flights': 'เที่ยวบิน',
+  'costs.cat.activities': 'กิจกรรม',
+  'costs.cat.sightseeing': 'เที่ยวชมสถานที่',
+  'costs.cat.shopping': 'ช้อปปิ้ง',
+  'costs.cat.fees': 'ค่าธรรมเนียมและตั๋ว',
+  'costs.cat.health': 'สุขภาพ',
+  'costs.cat.tips': 'เคล็ดลับ',
+  'costs.cat.fuel': 'เชื้อเพลิง',
+  'costs.cat.parking': 'ที่จอดรถ',
+  'costs.cat.other': 'อื่นๆ',
+  'costs.daysCount': '{count} วัน',
+  'costs.travelers': 'นักเดินทาง {count}',
+  'costs.liveRate': 'อัตราสด',
+  'costs.settleAll': 'ชำระทั้งหมด',
+  'costs.payment': 'การชำระเงิน',
+  'costs.editPayment': 'แก้ไขการชำระเงิน',
+  'costs.addPayment': 'เพิ่มการชำระเงิน',
+  'costs.unfinished': 'ยังไม่เสร็จ',
+  'costs.unfinishedHint': 'รวมเท่านั้น — ยังไม่ตัดสิน',
+  'costs.tapToInclude': 'แตะเพื่อรวม',
+  'costs.amount': 'จำนวน',
+  'costs.ticketItemName': 'ชื่อรายการ',
+  'costs.ticketSplitting': 'แยก:',
+  'costs.ticketAddItem': 'เพิ่มรายการ',
+  'costs.ticketShares': 'ส่วนแบ่งแต่ละคน',
+  'costs.excluded': 'ไม่รวม',
+  'costs.splitBalanced': 'หารเท่า ๆ กัน',
+  'costs.splitSumUnder': 'ผลรวมของการแยก: {sum} จาก {total} (ต่ำกว่าโดย {diff})',
+  'costs.splitSumOver': 'ผลรวมของการแยก: {sum} จาก {total} (มากกว่า {diff})',
+  'costs.toggleSign': 'สลับระหว่างค่าใช้จ่ายและการคืนเงิน',
+  'costs.finalBudget': 'งบประมาณสุดท้าย',
+  'costs.finalExpenses': 'ค่าใช้จ่ายที่ชำระแล้ว',
+  'costs.finalReimbursed': 'ยอดชดเชยสุทธิ',
+  'costs.finalPending': 'ยอดชดเชยที่รอดำเนินการ',
+  'costs.receipts': 'ใบเสร็จ',
+  'costs.receiptsTitle': 'ใบเสร็จและใบแจ้งหนี้',
+  'costs.attachReceipt': 'แนบใบเสร็จ / ใบแจ้งหนี้',
+  'costs.attach': 'แนบ',
+  'costs.scan.button': 'สแกนใบเสร็จ',
+  'costs.scan.reading': 'กำลังอ่านใบเสร็จ…',
+  'costs.scan.review': 'ตรวจสอบค่าใช้จ่าย',
+  'costs.scan.nothingRead': 'อ่านใบเสร็จจากรูปนี้ไม่ได้',
+  'costs.scan.failed': 'ไม่สามารถเริ่มอ่านใบเสร็จได้',
+  'costs.scan.title': 'สแกนใบเสร็จ',
+  'costs.scan.accepted':
+    'รูปถ่ายใบเสร็จหนึ่งใบ (JPG, PNG หรือ WEBP ไม่เกิน 10 MB) โมเดล AI จะอ่านอยู่เบื้องหลัง จากนั้นคุณตรวจสอบค่าใช้จ่ายก่อนบันทึก',
+  'costs.scan.dropHere': 'วางรูปใบเสร็จที่นี่ หรือคลิกเพื่อเลือกหรือถ่ายรูป',
+  'costs.scan.dropActive': 'ปล่อยรูปเพื่อสแกน',
+  'costs.scan.start': 'สแกน',
+  'costs.scan.unsupported': 'สแกนได้เฉพาะรูปถ่าย: JPG, PNG หรือ WEBP',
+  'costs.noReceipts': 'ยังไม่มีใบเสร็จแนบ',
+  'costs.deleteReceipt': 'ลบใบเสร็จ',
+  'costs.viewReceipt': 'ดูใบเสร็จ',
+  'costs.receiptLeftBehind': 'บันทึกไม่สำเร็จ และยังมีใบเสร็จที่อัปโหลด {count} รายการอยู่ ลบได้ในแท็บไฟล์',
 };
 
 export default budget;
diff --git a/shared/src/i18n/th/help.ts b/shared/src/i18n/th/help.ts
index 551ff3b50..44f63c202 100644
--- a/shared/src/i18n/th/help.ts
+++ b/shared/src/i18n/th/help.ts
@@ -1,12 +1,12 @@
 import type { TranslationStrings } from '../types';
 
 const help: TranslationStrings = {
-  'help.title': "ช่วยเหลือและเอกสาร",
-  'help.search': "ค้นหาเอกสาร...",
-  'help.contents': "สารบัญ",
-  'help.noResults': "ไม่มีหน้าที่ตรงกัน",
-  'help.errorTitle': "ไม่สามารถโหลดหน้านี้ได้",
-  'help.errorBody': "เนื้อหาความช่วยเหลือดึงมาจากวิกิ TREK ตรวจสอบการเชื่อมต่อของคุณแล้วลองอีกครั้ง",
+  'help.title': 'ช่วยเหลือและเอกสาร',
+  'help.search': 'ค้นหาเอกสาร...',
+  'help.contents': 'สารบัญ',
+  'help.noResults': 'ไม่มีหน้าที่ตรงกัน',
+  'help.errorTitle': 'ไม่สามารถโหลดหน้านี้ได้',
+  'help.errorBody': 'เนื้อหาความช่วยเหลือดึงมาจากวิกิ TREK ตรวจสอบการเชื่อมต่อของคุณแล้วลองอีกครั้ง',
 
   // ── Help center (the contextual panel behind the ? in the navbar) ──────────
   'help.center.button': 'ความช่วยเหลือสำหรับหน้าจอนี้',
@@ -57,7 +57,8 @@ const help: TranslationStrings = {
     'สถิติการเดินทาง: ประเทศที่เคยไป จำนวนทริป จำนวนวันที่อยู่ระหว่างเดินทาง และระยะทางที่บิน จากทุกทริปของคุณ',
   'help.ctx.dashboard.bullet.3':
     'การ์ดทริป กรองตาม วางแผนแล้ว เก็บถาวรแล้ว และ เสร็จสิ้น แสดงเป็นตารางหรือรายการ วางเมาส์เหนือการ์ดเพื่อแก้ไข ทำซ้ำ เก็บถาวร และลบ',
-  'help.ctx.dashboard.bullet.4': 'วิดเจ็ตด้านขวา: ตัวแปลงสกุลเงิน นาฬิกาโลก การจองที่กำลังจะมาถึง และคอลเลกชัน ทุกวิดเจ็ตปิดได้',
+  'help.ctx.dashboard.bullet.4':
+    'วิดเจ็ตด้านขวา: ตัวแปลงสกุลเงิน นาฬิกาโลก การจองที่กำลังจะมาถึง และคอลเลกชัน ทุกวิดเจ็ตปิดได้',
   'help.ctx.dashboard.bullet.5': 'การ์ด ทริปใหม่ และปุ่มที่มุมขวาล่างใช้เริ่มทริปใหม่ได้ทั้งคู่',
 
   // create-trip
@@ -67,11 +68,14 @@ const help: TranslationStrings = {
   'help.guide.create-trip.step.2': 'ตั้งชื่อทริป นี่คือช่องเดียวที่จำเป็น ส่วนอื่นๆ เพิ่มภายหลังได้',
   'help.guide.create-trip.step.3':
     'เลือกวันเริ่มต้นและวันสิ้นสุด TREK จะสร้างหนึ่งวันต่อหนึ่งวันที่ แผนการเดินทางของคุณจึงพร้อมให้เติมรายละเอียด',
-  'help.guide.create-trip.step.4': 'ไม่บังคับ: เพิ่มภาพปก อัปโหลดภาพของคุณเอง ลากภาพมาวาง หรือค้นหาจุดหมายปลายทางใน Unsplash',
+  'help.guide.create-trip.step.4':
+    'ไม่บังคับ: เพิ่มภาพปก อัปโหลดภาพของคุณเอง ลากภาพมาวาง หรือค้นหาจุดหมายปลายทางใน Unsplash',
   'help.guide.create-trip.step.5': 'คลิก สร้างทริปใหม่',
   'help.guide.create-trip.result': 'ทริปจะปรากฏบนแดชบอร์ดของคุณ หากเป็นทริปถัดไป ทริปนั้นจะแสดงแทนในบอร์ดดิ้งพาสด้านบน',
-  'help.guide.create-trip.tip.1': 'เปลี่ยนวันที่ภายหลังได้ หากมีการจองอยู่แล้ว TREK จะถามว่าจะย้ายการจองไปพร้อมกับวันต่างๆ หรือไม่',
-  'help.guide.create-trip.tip.2': 'ค่าใช้จ่ายทุกรายการจะถูกแปลงเป็นสกุลเงินของทริปที่คุณเลือกตรงนี้ ให้เลือกสกุลเงินของจุดหมายปลายทาง',
+  'help.guide.create-trip.tip.1':
+    'เปลี่ยนวันที่ภายหลังได้ หากมีการจองอยู่แล้ว TREK จะถามว่าจะย้ายการจองไปพร้อมกับวันต่างๆ หรือไม่',
+  'help.guide.create-trip.tip.2':
+    'ค่าใช้จ่ายทุกรายการจะถูกแปลงเป็นสกุลเงินของทริปที่คุณเลือกตรงนี้ ให้เลือกสกุลเงินของจุดหมายปลายทาง',
 
   // edit-trip
   'help.guide.edit-trip.title': 'แก้ไขทริป',
@@ -80,7 +84,8 @@ const help: TranslationStrings = {
   'help.guide.edit-trip.step.2': 'เปลี่ยนสิ่งที่ต้องการ: ชื่อ คำอธิบาย วันที่ ภาพปก สกุลเงิน การแจ้งเตือน หรือสมาชิก',
   'help.guide.edit-trip.step.3': 'คลิก อัปเดต',
   'help.guide.edit-trip.result': 'การ์ดจะอัปเดตทันทีสำหรับสมาชิกทุกคนของทริป',
-  'help.guide.edit-trip.tip.1': 'การเลื่อนวันที่ของทริปที่มีการจองอยู่แล้วจะเปิดขั้นตอนที่สองเพื่อถามว่าจะย้ายการจองไปด้วยหรือไม่',
+  'help.guide.edit-trip.tip.1':
+    'การเลื่อนวันที่ของทริปที่มีการจองอยู่แล้วจะเปิดขั้นตอนที่สองเพื่อถามว่าจะย้ายการจองไปด้วยหรือไม่',
 
   // cover-image
   'help.guide.cover-image.title': 'ตั้งภาพปก',
@@ -89,7 +94,8 @@ const help: TranslationStrings = {
   'help.guide.cover-image.step.2': 'ใน ภาพปก ให้วางภาพ คลิกเพื่ออัปโหลด หรือพิมพ์จุดหมายปลายทางในช่องค้นหา Unsplash',
   'help.guide.cover-image.step.3': 'เลือกภาพแล้วคลิก อัปเดต',
   'help.guide.cover-image.result': 'ภาพจะถูกบันทึกไว้กับทริปและแสดงในทุกที่ที่มีทริปนั้น',
-  'help.guide.cover-image.tip.1': 'ภาพจากการค้นหา Unsplash จะใส่เครดิตให้อัตโนมัติ ส่วนภาพที่คุณอัปโหลดเองจะอยู่บนเซิร์ฟเวอร์ของคุณ',
+  'help.guide.cover-image.tip.1':
+    'ภาพจากการค้นหา Unsplash จะใส่เครดิตให้อัตโนมัติ ส่วนภาพที่คุณอัปโหลดเองจะอยู่บนเซิร์ฟเวอร์ของคุณ',
 
   // duplicate-trip
   'help.guide.duplicate-trip.title': 'ทำซ้ำทริป',
@@ -106,19 +112,22 @@ const help: TranslationStrings = {
   'help.guide.archive-trip.step.1': 'วางเมาส์เหนือการ์ดแล้วคลิก เก็บถาวร',
   'help.guide.archive-trip.step.2': 'เปลี่ยนตัวกรองเหนือการ์ดเป็น เก็บถาวรแล้ว เพื่อดูทริปนั้นอีกครั้ง',
   'help.guide.archive-trip.step.3': 'คลิก คืนค่า บนการ์ดเพื่อย้ายกลับไปที่ วางแผนแล้ว',
-  'help.guide.archive-trip.result': 'ทริปที่เก็บถาวรยังเก็บข้อมูลทุกอย่างไว้ เพียงแต่จะไม่ทำให้แดชบอร์ดและฟีดปฏิทินรวมทุกทริปรกอีกต่อไป',
+  'help.guide.archive-trip.result':
+    'ทริปที่เก็บถาวรยังเก็บข้อมูลทุกอย่างไว้ เพียงแต่จะไม่ทำให้แดชบอร์ดและฟีดปฏิทินรวมทุกทริปรกอีกต่อไป',
 
   // delete-trip
   'help.guide.delete-trip.title': 'ลบทริป',
   'help.guide.delete-trip.goal': 'ลบทริปอย่างถาวร',
   'help.guide.delete-trip.step.1': 'วางเมาส์เหนือการ์ดแล้วคลิกไอคอนถังขยะ',
   'help.guide.delete-trip.step.2': 'ยืนยัน กล่องโต้ตอบจะแสดงชื่อทริป คุณจึงรู้ว่าเลือกถูกทริป',
-  'help.guide.delete-trip.result': 'ทริปรวมถึงวัน สถานที่ การจอง และไฟล์จะหายไป ไม่สามารถเลิกทำได้ หากไม่แน่ใจให้เก็บถาวรแทน',
+  'help.guide.delete-trip.result':
+    'ทริปรวมถึงวัน สถานที่ การจอง และไฟล์จะหายไป ไม่สามารถเลิกทำได้ หากไม่แน่ใจให้เก็บถาวรแทน',
 
   // filter-and-view
   'help.guide.filter-and-view.title': 'ค้นหาทริปที่เสร็จสิ้น สลับมุมมองตารางและรายการ',
   'help.guide.filter-and-view.goal': 'ดูทริปที่จบแล้วหรือเก็บถาวรแล้ว และเลือกเลย์เอาต์ที่ชอบ',
-  'help.guide.filter-and-view.step.1': 'ใช้ วางแผนแล้ว เก็บถาวรแล้ว และ เสร็จสิ้น เหนือการ์ด เสร็จสิ้น คือทุกทริปที่วันสิ้นสุดผ่านไปแล้ว',
+  'help.guide.filter-and-view.step.1':
+    'ใช้ วางแผนแล้ว เก็บถาวรแล้ว และ เสร็จสิ้น เหนือการ์ด เสร็จสิ้น คือทุกทริปที่วันสิ้นสุดผ่านไปแล้ว',
   'help.guide.filter-and-view.step.2': 'คลิกไอคอนรายการเพื่อสลับเป็นรายการแบบกะทัดรัด คลิกอีกครั้งเพื่อกลับเป็นตาราง',
   'help.guide.filter-and-view.result': 'แดชบอร์ดจะจำเลย์เอาต์ของคุณบนอุปกรณ์นี้',
 
@@ -131,7 +140,8 @@ const help: TranslationStrings = {
     'เพิ่มฟีดด้วยปุ่มใดปุ่มหนึ่ง (Google, Apple, Outlook) หรือคัดลอกลิงก์ไปใส่ในแอปปฏิทินใดก็ได้ที่รองรับการสมัครรับ URL',
   'help.guide.calendar-feed.result':
     'ทุกทริปที่ใช้งานอยู่จะแสดงในปฏิทินของคุณและอัปเดตเอง ไม่รวมทริปที่เก็บถาวรและทริปที่สิ้นสุดไปแล้วเกิน 90 วัน',
-  'help.guide.calendar-feed.tip.1': 'ลิงก์นี้เป็นความลับ ใครก็ตามที่มีลิงก์จะอ่านฟีดได้ หากลิงก์รั่วไหลให้เพิกถอนจากกล่องโต้ตอบเดียวกัน',
+  'help.guide.calendar-feed.tip.1':
+    'ลิงก์นี้เป็นความลับ ใครก็ตามที่มีลิงก์จะอ่านฟีดได้ หากลิงก์รั่วไหลให้เพิกถอนจากกล่องโต้ตอบเดียวกัน',
 
   // widgets
   'help.guide.widgets.title': 'เลือกวิดเจ็ตแดชบอร์ดของคุณ',
@@ -140,7 +150,8 @@ const help: TranslationStrings = {
   'help.guide.widgets.step.2': 'สลับไปที่แท็บ ลักษณะที่ปรากฏ',
   'help.guide.widgets.step.3': 'ใน วิดเจ็ตแดชบอร์ด ให้เปิดหรือปิดแต่ละวิดเจ็ต เดสก์ท็อปและมือถือตั้งค่าแยกกัน',
   'help.guide.widgets.step.4': 'กลับไปที่แดชบอร์ด การเปลี่ยนแปลงจะมีผลทันที',
-  'help.guide.widgets.result': 'วิดเจ็ตที่ซ่อนจะเปิดพื้นที่ให้ทริปของคุณ ปิดแถบด้านขวาทั้งหมดเพื่อจัดเลย์เอาต์ไว้ตรงกลาง',
+  'help.guide.widgets.result':
+    'วิดเจ็ตที่ซ่อนจะเปิดพื้นที่ให้ทริปของคุณ ปิดแถบด้านขวาทั้งหมดเพื่อจัดเลย์เอาต์ไว้ตรงกลาง',
   'help.guide.widgets.link': 'เปิดการตั้งค่าลักษณะที่ปรากฏ',
 
   // currency-widget
@@ -162,7 +173,8 @@ const help: TranslationStrings = {
   'help.ctx.vacay.title': 'วันหยุด',
   'help.ctx.vacay.summary':
     'วันหยุด คือเครื่องมือวางแผนวันลาส่วนตัวของคุณ: คุณมีวันลาพักร้อนกี่วันในหนึ่งปี บันทึกวันไหนไปแล้ว และเหลืออีกเท่าไร ตารางแสดงทั้งปีในแวบเดียว ส่วนแถบด้านข้างมีตัวเลือกปี คนที่คุณวางแผนด้วย ปฏิทินที่แชร์กับคุณ คำอธิบายสัญลักษณ์ และสิทธิวันลาของคุณ',
-  'help.ctx.vacay.bullet.1': 'ตารางรายปี: การ์ดสิบสองเดือน หนึ่งช่องต่อหนึ่งวัน คลิกวันเพื่อบันทึกหรือล้าง จุดสีน้ำเงินเล็กๆ ระบุวันที่มีทริปอยู่แล้ว',
+  'help.ctx.vacay.bullet.1':
+    'ตารางรายปี: การ์ดสิบสองเดือน หนึ่งช่องต่อหนึ่งวัน คลิกวันเพื่อบันทึกหรือล้าง จุดสีน้ำเงินเล็กๆ ระบุวันที่มีทริปอยู่แล้ว',
   'help.ctx.vacay.bullet.2':
     'แถบเครื่องมือด้านล่าง: โหมด วันหยุด หรือ วันหยุดบริษัท พร้อมสวิตช์ ครึ่งวัน และ คอมพ์/เฟล็กซ์ ที่เปลี่ยนสิ่งที่การคลิกจะบันทึก',
   'help.ctx.vacay.bullet.3': 'สิทธิ: จำนวนวันของคุณในปีนั้น ใช้ไปแล้วเท่าไร และคงเหลือเท่าไร รวมยอดยกมาจากรอบก่อนหน้า',
@@ -174,20 +186,25 @@ const help: TranslationStrings = {
   // log-day
   'help.guide.log-day.title': 'บันทึกวันลาพักร้อน',
   'help.guide.log-day.goal': 'ทำเครื่องหมายวันหยุดในตารางรายปีและดูยอดคงเหลือเปลี่ยนตาม',
-  'help.guide.log-day.step.1': 'ดูแถบเครื่องมือด้านล่าง: ปุ่มซ้ายที่เป็นสีของคุณหมายความว่าการคลิกจะบันทึกวันลาพักร้อนให้คุณ',
+  'help.guide.log-day.step.1':
+    'ดูแถบเครื่องมือด้านล่าง: ปุ่มซ้ายที่เป็นสีของคุณหมายความว่าการคลิกจะบันทึกวันลาพักร้อนให้คุณ',
   'help.guide.log-day.step.2': 'คลิกวันในการ์ดเดือนใดก็ได้ ช่องนั้นจะเป็นสีของคุณและ ใช้แล้ว จะนับเพิ่มหนึ่งวัน',
   'help.guide.log-day.step.3': 'คลิกวันเดิมอีกครั้งเพื่อล้าง',
-  'help.guide.log-day.result': 'วันนั้นถูกบันทึกแล้ว วัน ใช้แล้ว และ คงเหลือ อัปเดตทันที และทุกคนที่รวมแผนกับคุณจะเห็นแบบเรียลไทม์',
+  'help.guide.log-day.result':
+    'วันนั้นถูกบันทึกแล้ว วัน ใช้แล้ว และ คงเหลือ อัปเดตทันที และทุกคนที่รวมแผนกับคุณจะเห็นแบบเรียลไทม์',
   'help.guide.log-day.tip.1': 'ไม่สามารถบันทึกวันหยุดสุดสัปดาห์ได้ขณะที่ บล็อกวันหยุดสุดสัปดาห์ เปิดอยู่ใน การตั้งค่า',
-  'help.guide.log-day.tip.2': 'จุดสีน้ำเงินในช่องหมายความว่ามีทริปของคุณในวันนั้น คุณจึงเห็นว่าวันลาและการเดินทางตรงกันตรงไหน',
+  'help.guide.log-day.tip.2':
+    'จุดสีน้ำเงินในช่องหมายความว่ามีทริปของคุณในวันนั้น คุณจึงเห็นว่าวันลาและการเดินทางตรงกันตรงไหน',
 
   // half-day
   'help.guide.half-day.title': 'บันทึกครึ่งวัน',
   'help.guide.half-day.goal': 'ลาช่วงบ่ายโดยไม่ต้องใช้สิทธิทั้งวัน',
   'help.guide.half-day.step.1': 'เปิด ครึ่งวัน ในแถบเครื่องมือ จุดสีส้มคือเครื่องหมายของวันลาครึ่งวันในตาราง',
   'help.guide.half-day.step.2': 'คลิกวัน วันนั้นจะถูกบันทึกเป็น 0.5 และมีจุดสีส้มที่มุม',
-  'help.guide.half-day.step.3': 'ปิด ครึ่งวัน อีกครั้งเมื่อเสร็จแล้ว การคลิกวันลาครึ่งวันด้วยการตั้งค่าที่ต่างออกไปจะแปลงวันนั้นทันที',
-  'help.guide.half-day.result': 'ใช้แล้ว เพิ่มขึ้น 0.5 ครึ่งวัน และ คอมพ์/เฟล็กซ์ ทำงานแยกกัน จึงบันทึกวันชดเชยครึ่งวันได้ด้วย',
+  'help.guide.half-day.step.3':
+    'ปิด ครึ่งวัน อีกครั้งเมื่อเสร็จแล้ว การคลิกวันลาครึ่งวันด้วยการตั้งค่าที่ต่างออกไปจะแปลงวันนั้นทันที',
+  'help.guide.half-day.result':
+    'ใช้แล้ว เพิ่มขึ้น 0.5 ครึ่งวัน และ คอมพ์/เฟล็กซ์ ทำงานแยกกัน จึงบันทึกวันชดเชยครึ่งวันได้ด้วย',
   'help.guide.half-day.tip.1': 'แถบเครื่องมือจะแสดงเครื่องหมายที่การคลิกครั้งถัดไปจะใส่เสมอ คุณจึงตรวจสอบได้ก่อนบันทึก',
 
   // comp-day
@@ -230,16 +247,19 @@ const help: TranslationStrings = {
   'help.guide.public-holidays.title': 'แสดงวันหยุดนักขัตฤกษ์',
   'help.guide.public-holidays.goal': 'แสดงวันหยุดนักขัตฤกษ์ของประเทศหรือภูมิภาคของคุณบนตาราง',
   'help.guide.public-holidays.step.1': 'เปิด การตั้งค่า แล้วเปิด วันหยุดนักขัตฤกษ์',
-  'help.guide.public-holidays.step.2': 'คลิก เพิ่มปฏิทิน แล้วเลือกประเทศ และภูมิภาคหากจำเป็น ตั้งสีและป้ายชื่อได้ตามต้องการ',
+  'help.guide.public-holidays.step.2':
+    'คลิก เพิ่มปฏิทิน แล้วเลือกประเทศ และภูมิภาคหากจำเป็น ตั้งสีและป้ายชื่อได้ตามต้องการ',
   'help.guide.public-holidays.step.3': 'ปิด การตั้งค่า วันหยุดจะปรากฏบนตารางและในคำอธิบายสัญลักษณ์',
   'help.guide.public-holidays.result': 'วันหยุดนักขัตฤกษ์จะแสดงเป็นสีของปฏิทินนั้นและไม่นับรวมในสิทธิของคุณ',
-  'help.guide.public-holidays.tip.1': 'คุณเพิ่มได้หลายปฏิทิน เช่น ภูมิภาคของคุณเองและภูมิภาคของเพื่อนร่วมงานที่รวมแผนกับคุณ',
+  'help.guide.public-holidays.tip.1':
+    'คุณเพิ่มได้หลายปฏิทิน เช่น ภูมิภาคของคุณเองและภูมิภาคของเพื่อนร่วมงานที่รวมแผนกับคุณ',
 
   // school-holidays
   'help.guide.school-holidays.title': 'แสดงวันหยุดโรงเรียน',
   'help.guide.school-holidays.goal': 'ดูช่วงปิดเทอมในภูมิภาคของคุณควบคู่กับวันหยุดของคุณเอง',
   'help.guide.school-holidays.step.1': 'เปิด การตั้งค่า แล้วเปิด วันหยุดโรงเรียน',
-  'help.guide.school-holidays.step.2': 'คลิก เพิ่มปฏิทิน แล้วเลือกประเทศ หากประเทศนั้นแบ่งปฏิทินออกเป็นส่วนๆ ให้เลือกภูมิภาคหรือกลุ่มด้วย',
+  'help.guide.school-holidays.step.2':
+    'คลิก เพิ่มปฏิทิน แล้วเลือกประเทศ หากประเทศนั้นแบ่งปฏิทินออกเป็นส่วนๆ ให้เลือกภูมิภาคหรือกลุ่มด้วย',
   'help.guide.school-holidays.step.3': 'ปิด การตั้งค่า ช่วงปิดเทอมแต่ละช่วงจะมีแถบสีที่ด้านล่างของวันนั้นๆ',
   'help.guide.school-holidays.result': 'วันหยุดโรงเรียนใช้แสดงผลเท่านั้น: ไม่ลดสิทธิของใคร',
   'help.guide.school-holidays.tip.1':
@@ -257,7 +277,8 @@ const help: TranslationStrings = {
   'help.guide.leave-year.title': 'ตั้งค่าปีวันลาของคุณ',
   'help.guide.leave-year.goal': 'นับสิทธิของคุณตามปีงบประมาณหรือนับจากวันที่เริ่มงาน แทนที่จะเป็นมกราคมถึงธันวาคม',
   'help.guide.leave-year.step.1': 'เปิด การตั้งค่า แล้วหา ปีวันลา',
-  'help.guide.leave-year.step.2': 'เลือก ปฏิทิน, การคลัง (พร้อมเดือนและวันที่เริ่มต้น) หรือ วันที่จ้าง (พร้อมวันที่คุณเริ่มงาน)',
+  'help.guide.leave-year.step.2':
+    'เลือก ปฏิทิน, การคลัง (พร้อมเดือนและวันที่เริ่มต้น) หรือ วันที่จ้าง (พร้อมวันที่คุณเริ่มงาน)',
   'help.guide.leave-year.result': 'สิทธิ วันที่ใช้ไป และการยกยอดจะเป็นไปตามรอบนั้น และตารางจะเริ่มที่เดือนแรกของรอบ',
   'help.guide.leave-year.tip.1': 'การตั้งค่านี้เป็นของแต่ละคน: เมื่อรวมแผนกัน ทุกคนยังคงมีปีวันลาและตัวเลขของตัวเอง',
 
@@ -275,8 +296,10 @@ const help: TranslationStrings = {
   'help.guide.invite.step.1': 'คลิกไอคอนบุคคลในแผง บุคคล',
   'help.guide.invite.step.2': 'เลือกผู้ใช้แล้วส่งคำเชิญ',
   'help.guide.invite.step.3': 'อีกฝ่ายจะได้รับการแจ้งเตือนและกดยอมรับ ระหว่างนั้นคำเชิญจะแสดงเป็น รอดำเนินการ',
-  'help.guide.invite.result': 'แผนทั้งสองจะรวมกัน: แต่ละคนมีสีของตัวเอง คุณบันทึกวันให้กันและกันได้ และทุกอย่างซิงค์แบบเรียลไทม์',
-  'help.guide.invite.tip.1': 'หากต้องการยกเลิกการรวม ให้ใช้ ยกเลิกการรวม ใน การตั้งค่า รายการของทุกคนจะกลับไปอยู่ในแผนของตัวเอง',
+  'help.guide.invite.result':
+    'แผนทั้งสองจะรวมกัน: แต่ละคนมีสีของตัวเอง คุณบันทึกวันให้กันและกันได้ และทุกอย่างซิงค์แบบเรียลไทม์',
+  'help.guide.invite.tip.1':
+    'หากต้องการยกเลิกการรวม ให้ใช้ ยกเลิกการรวม ใน การตั้งค่า รายการของทุกคนจะกลับไปอยู่ในแผนของตัวเอง',
   'help.guide.invite.tip.2': 'หากอีกฝ่ายควรเห็นเฉพาะวันของคุณ ให้แชร์ปฏิทินแทนการรวมแผน',
 
   // share-calendar
@@ -284,8 +307,10 @@ const help: TranslationStrings = {
   'help.guide.share-calendar.goal': 'ให้ผู้อื่นเห็นว่าคุณหยุดเมื่อไรโดยไม่ให้สิทธิ์แก้ไขแผนของคุณ',
   'help.guide.share-calendar.step.1': 'คลิกไอคอนแชร์ในแผง ปฏิทินที่ใช้ร่วมกัน',
   'help.guide.share-calendar.step.2': 'เลือกผู้ใช้แล้วคลิก แบ่งปัน ไม่ต้องรอการยอมรับ',
-  'help.guide.share-calendar.step.3': 'ปฏิทินที่แชร์กับคุณจะปรากฏในแผงเดียวกัน ไอคอนรูปตาใช้ซ่อนปฏิทิน หยุดแชร์ ใช้เพิกถอนปฏิทินของคุณ',
-  'help.guide.share-calendar.result': 'วันหยุดของคุณจะแสดงเป็นวงแหวนสีบนตารางของอีกฝ่าย อีกฝ่ายแก้ไขสิ่งที่คุณแชร์ไม่ได้',
+  'help.guide.share-calendar.step.3':
+    'ปฏิทินที่แชร์กับคุณจะปรากฏในแผงเดียวกัน ไอคอนรูปตาใช้ซ่อนปฏิทิน หยุดแชร์ ใช้เพิกถอนปฏิทินของคุณ',
+  'help.guide.share-calendar.result':
+    'วันหยุดของคุณจะแสดงเป็นวงแหวนสีบนตารางของอีกฝ่าย อีกฝ่ายแก้ไขสิ่งที่คุณแชร์ไม่ได้',
   'help.guide.share-calendar.tip.1': 'การแชร์และการรวมแผนแยกกัน: คุณรวมแผนกับคนหนึ่งและแชร์กับคนอื่นได้',
   'help.guide.share-calendar.tip.2': 'วางเมาส์เหนือวันที่มีวงแหวนเพื่อดูว่าใครหยุดและหยุดนานเท่าไร',
 
@@ -301,7 +326,8 @@ const help: TranslationStrings = {
     'แสดงประเทศที่วางแผนไว้ ที่มุมขวาบน: แสดงประเทศของทริปที่กำลังจะมาถึง สวิตช์นี้จะปรากฏเฉพาะเมื่อคุณมีทริปดังกล่าว',
   'help.ctx.atlas.bullet.4':
     'แผงด้านล่าง: แท็บ สถิติ แสดงประเทศ ทริป สถานที่ เมือง วัน ทวีป และสถิติต่อเนื่องของคุณ แท็บ สถานที่อยากไป แสดงสิ่งที่ยังรออยู่ข้างหน้า',
-  'help.ctx.atlas.bullet.5': 'ภูมิภาค: ตั้งแต่ระดับการซูม 5 แผนที่จะเปลี่ยนเป็นรัฐและจังหวัด แต่ละแห่งคลิกเพื่อทำเครื่องหมายหรือยกเลิกได้',
+  'help.ctx.atlas.bullet.5':
+    'ภูมิภาค: ตั้งแต่ระดับการซูม 5 แผนที่จะเปลี่ยนเป็นรัฐและจังหวัด แต่ละแห่งคลิกเพื่อทำเครื่องหมายหรือยกเลิกได้',
   'help.ctx.atlas.bullet.6':
     'Dawarich: เมื่อเชื่อมต่อส่วนเสริมแล้ว แผงทางซ้ายของสถิติจะทำเครื่องหมายสิ่งที่อยากไปว่าสำเร็จและเพิ่มประเทศจากบันทึกของคุณ โดยต้องได้รับการยืนยันจากคุณเสมอ',
   // mark-country
@@ -312,8 +338,10 @@ const help: TranslationStrings = {
   'help.guide.mark-country.step.3': 'เลือก ทำเครื่องหมายว่าเยี่ยมชมแล้ว',
   'help.guide.mark-country.result':
     'ประเทศนั้นจะมีสีบนแผนที่และ ประเทศต่างๆ จะนับเพิ่มหนึ่ง สีนั้นเป็นสีถาวร: การทำเครื่องหมายประเทศอื่นเพิ่มจะไม่สลับสีของประเทศที่เหลือ',
-  'help.guide.mark-country.tip.1': 'การคลิกประเทศสีเทาบนแผนที่จะเปิดป๊อปอัปเดียวกัน สำหรับประเทศเล็กๆ การค้นหาคือวิธีที่แน่นอนที่สุด',
-  'help.guide.mark-country.tip.2': 'ประเทศที่คุณทำเครื่องหมายเองจะนับว่าเยี่ยมชมแล้วเสมอ ไม่ว่าทริปที่ไปประเทศนั้นจะเป็นวันที่ใดก็ตาม',
+  'help.guide.mark-country.tip.1':
+    'การคลิกประเทศสีเทาบนแผนที่จะเปิดป๊อปอัปเดียวกัน สำหรับประเทศเล็กๆ การค้นหาคือวิธีที่แน่นอนที่สุด',
+  'help.guide.mark-country.tip.2':
+    'ประเทศที่คุณทำเครื่องหมายเองจะนับว่าเยี่ยมชมแล้วเสมอ ไม่ว่าทริปที่ไปประเทศนั้นจะเป็นวันที่ใดก็ตาม',
   // unmark-country
   'help.guide.unmark-country.title': 'ลบประเทศที่คุณทำเครื่องหมายไว้',
   'help.guide.unmark-country.goal': 'นำประเทศที่ทำเครื่องหมายเองออกจากแผนที่',
@@ -330,24 +358,28 @@ const help: TranslationStrings = {
   'help.guide.country-details.step.2':
     'เลือกประเทศนั้น แผนที่จะพาไปที่นั่น และแผงด้านล่างจะแสดงการ์ดพร้อมธง สถานที่ ทริป และชิปสำหรับแต่ละทริป',
   'help.guide.country-details.result': 'คลิกชิปทริปเพื่อเปิดทริปนั้นในเครื่องมือวางแผน',
-  'help.guide.country-details.tip.1': 'การวางเมาส์เหนือประเทศบนแผนที่จะแสดงตัวเลขเดียวกัน พร้อมการไปเยือนครั้งแรกและครั้งล่าสุด',
+  'help.guide.country-details.tip.1':
+    'การวางเมาส์เหนือประเทศบนแผนที่จะแสดงตัวเลขเดียวกัน พร้อมการไปเยือนครั้งแรกและครั้งล่าสุด',
   // planned-countries
   'help.guide.planned-countries.title': 'แสดงประเทศที่คุณกำลังจะไป',
   'help.guide.planned-countries.goal': 'แสดงประเทศของทริปที่กำลังจะมาถึงบนแผนที่โดยไม่นับว่าเยี่ยมชมแล้ว',
   'help.guide.planned-countries.step.1': 'เปิด แสดงประเทศที่วางแผนไว้ ที่มุมขวาบน ตัวเลขข้างๆ คือจำนวนประเทศที่รออยู่',
   'help.guide.planned-countries.step.2':
     'ค้นหาประเทศที่วางแผนไว้แล้วเลือก: แผงจะแสดง วางแผนแล้ว และคำแนะนำเครื่องมือบนแผนที่จะแสดงว่าคุณจะไปเมื่อไร',
-  'help.guide.planned-countries.result': 'ประเทศที่วางแผนไว้จะแสดงด้วยเส้นขอบประ จึงไม่ดูเหมือนที่ที่คุณเคยไปแล้ว สวิตช์จะจำตัวเลือกของคุณ',
+  'help.guide.planned-countries.result':
+    'ประเทศที่วางแผนไว้จะแสดงด้วยเส้นขอบประ จึงไม่ดูเหมือนที่ที่คุณเคยไปแล้ว สวิตช์จะจำตัวเลือกของคุณ',
   'help.guide.planned-countries.tip.1':
     'ประเทศจะนับว่าเยี่ยมชมแล้วเมื่อทริปไปที่นั่นเริ่มต้นแล้ว ทริปที่กำลังเดินทางอยู่ก็นับด้วย ทริปที่ไม่มีวันที่จะไม่ถูกนับในสถิติเลย',
   'help.guide.planned-countries.tip.2': 'สวิตช์จะมีเฉพาะเมื่อคุณมีทริปที่กำลังจะมาถึงเท่านั้น',
   // regions
   'help.guide.regions.title': 'ทำเครื่องหมายภูมิภาค',
   'help.guide.regions.goal': 'ละเอียดกว่าระดับประเทศ: ทำเครื่องหมายรัฐ จังหวัด หรือเขตปกครองที่คุณเคยไป',
-  'help.guide.regions.step.1': 'ซูมเข้าไปในประเทศจนภูมิภาคปรากฏ ตั้งแต่ระดับการซูม 5 การค้นหาประเทศแล้วเลือกจะพาคุณเข้าไปใกล้พอ',
+  'help.guide.regions.step.1':
+    'ซูมเข้าไปในประเทศจนภูมิภาคปรากฏ ตั้งแต่ระดับการซูม 5 การค้นหาประเทศแล้วเลือกจะพาคุณเข้าไปใกล้พอ',
   'help.guide.regions.step.2': 'คลิกภูมิภาค การวางเมาส์จะแสดงชื่อ ป๊อปอัปจะแสดงภูมิภาคและประเทศของภูมิภาคนั้น',
   'help.guide.regions.step.3': 'เลือก ทำเครื่องหมายว่าเยี่ยมชมแล้ว',
-  'help.guide.regions.result': 'ภูมิภาคจะเป็นสีของประเทศนั้น การทำเครื่องหมายภูมิภาคจะนับประเทศว่าเยี่ยมชมแล้วด้วย หากยังไม่ได้นับ',
+  'help.guide.regions.result':
+    'ภูมิภาคจะเป็นสีของประเทศนั้น การทำเครื่องหมายภูมิภาคจะนับประเทศว่าเยี่ยมชมแล้วด้วย หากยังไม่ได้นับ',
   'help.guide.regions.tip.1':
     'การคลิกภูมิภาคที่เยี่ยมชมแล้วจะมีตัวเลือก ลบ ไม่ว่าคุณจะทำเครื่องหมายเองหรือมีสถานที่ทำให้ภูมิภาคนั้นถูกทำเครื่องหมาย',
   'help.guide.regions.tip.2': 'ภูมิภาคที่มีสถานที่จริงของคุณจะถูกทำเครื่องหมายให้อัตโนมัติ ไม่ต้องทำอะไร',
@@ -357,16 +389,21 @@ const help: TranslationStrings = {
   'help.guide.search-place.step.1':
     'พิมพ์เมือง สถานที่สำคัญ หรือที่อยู่ในช่องค้นหา ประเทศจะแสดงก่อน สถานที่ที่ตรงกันจะแสดงใต้หัวข้อ สถานที่ ด้านล่าง',
   'help.guide.search-place.step.2': 'เลือกสถานที่ แผนที่จะพาไปที่นั่นและหาว่าจุดนั้นอยู่ในภูมิภาคใด',
-  'help.guide.search-place.step.3': 'เลือก ทำเครื่องหมายว่าเยี่ยมชมแล้ว สำหรับภูมิภาคนั้น หรือ เพิ่มในรายการสถานที่อยากไป หากคุณยังไม่ได้ไป',
-  'help.guide.search-place.result': 'ภูมิภาคจะถูกทำเครื่องหมาย พร้อมกับประเทศ ประเทศที่ไม่มีข้อมูลภูมิภาคในชุดข้อมูลแผนที่จะใช้ตัวประเทศแทน',
-  'help.guide.search-place.tip.1': 'สถานที่มาจากการค้นหาเดียวกับที่อื่นๆ ใน TREK จึงเป็นไปตามผู้ให้บริการที่ผู้ดูแลระบบตั้งค่าไว้',
+  'help.guide.search-place.step.3':
+    'เลือก ทำเครื่องหมายว่าเยี่ยมชมแล้ว สำหรับภูมิภาคนั้น หรือ เพิ่มในรายการสถานที่อยากไป หากคุณยังไม่ได้ไป',
+  'help.guide.search-place.result':
+    'ภูมิภาคจะถูกทำเครื่องหมาย พร้อมกับประเทศ ประเทศที่ไม่มีข้อมูลภูมิภาคในชุดข้อมูลแผนที่จะใช้ตัวประเทศแทน',
+  'help.guide.search-place.tip.1':
+    'สถานที่มาจากการค้นหาเดียวกับที่อื่นๆ ใน TREK จึงเป็นไปตามผู้ให้บริการที่ผู้ดูแลระบบตั้งค่าไว้',
   // bucket-country
   'help.guide.bucket-country.title': 'เพิ่มประเทศในรายการสถานที่อยากไป',
   'help.guide.bucket-country.goal': 'เก็บรายการประเทศที่อยากไปไว้บนแผนที่ แยกจากประเทศที่คุณเคยไปแล้ว',
   'help.guide.bucket-country.step.1': 'ค้นหาประเทศแล้วเลือก หรือคลิกประเทศนั้นบนแผนที่',
   'help.guide.bucket-country.step.2': 'เลือก เพิ่มในรายการสถานที่อยากไป',
-  'help.guide.bucket-country.step.3': 'เลือกเดือนและปีหากรู้แล้วว่าจะไปเมื่อไร จากนั้นยืนยันด้วย เพิ่มในรายการสถานที่อยากไป',
-  'help.guide.bucket-country.result': 'ประเทศจะแสดงเป็นลายเส้นทแยงในสีที่จะใช้เมื่อคุณไปถึง และปรากฏในแท็บ สถานที่อยากไป ของแผง',
+  'help.guide.bucket-country.step.3':
+    'เลือกเดือนและปีหากรู้แล้วว่าจะไปเมื่อไร จากนั้นยืนยันด้วย เพิ่มในรายการสถานที่อยากไป',
+  'help.guide.bucket-country.result':
+    'ประเทศจะแสดงเป็นลายเส้นทแยงในสีที่จะใช้เมื่อคุณไปถึง และปรากฏในแท็บ สถานที่อยากไป ของแผง',
   'help.guide.bucket-country.tip.1': 'ป๊อปอัปเดียวกันจะมี ลบออกจากสิ่งที่อยากได้ เมื่อประเทศอยู่ในรายการแล้ว',
   'help.guide.bucket-country.tip.2':
     'หนึ่งรายการต่อหนึ่งวันที่เป้าหมาย: ประเทศเดียวกันอยู่ในรายการได้สำหรับสองเดือนที่ต่างกัน แต่ไม่ซ้ำสองครั้งในเดือนเดียวกัน',
@@ -375,9 +412,11 @@ const help: TranslationStrings = {
   'help.guide.bucket-place.goal': 'บันทึกเมือง สถานที่ท่องเที่ยว หรือที่อยู่ที่คุณใฝ่ฝัน พร้อมพิกัดและวันที่เป้าหมาย',
   'help.guide.bucket-place.step.1': 'เปิดแท็บ สถานที่อยากไป ในแผงด้านล่าง',
   'help.guide.bucket-place.step.2': 'คลิก เพิ่มสถานที่',
-  'help.guide.bucket-place.step.3': 'พิมพ์ชื่อแล้วกดปุ่มค้นหา เลือกผลที่ตรงกันเพื่อให้สถานที่มีพิกัด พิมพ์ชื่อโดยไม่ค้นหาก็ได้เช่นกัน',
+  'help.guide.bucket-place.step.3':
+    'พิมพ์ชื่อแล้วกดปุ่มค้นหา เลือกผลที่ตรงกันเพื่อให้สถานที่มีพิกัด พิมพ์ชื่อโดยไม่ค้นหาก็ได้เช่นกัน',
   'help.guide.bucket-place.step.4': 'เลือกเดือนและปีหากต้องการ แล้วคลิก เพิ่ม',
-  'help.guide.bucket-place.result': 'สถานที่จะอยู่ด้านบนสุดของรายการสถานที่อยากไปพร้อมวันที่เป้าหมาย ปุ่ม × ข้างๆ ใช้ลบออกอีกครั้ง',
+  'help.guide.bucket-place.result':
+    'สถานที่จะอยู่ด้านบนสุดของรายการสถานที่อยากไปพร้อมวันที่เป้าหมาย ปุ่ม × ข้างๆ ใช้ลบออกอีกครั้ง',
   'help.guide.bucket-place.tip.1':
     'สิ่งที่อยากไปที่มีพิกัดคือสิ่งที่ Dawarich ทำเครื่องหมายว่าสำเร็จให้คุณได้ในภายหลัง เมื่อบันทึกของคุณแสดงว่าคุณไปที่นั่นแล้ว',
   // stats
@@ -394,7 +433,8 @@ const help: TranslationStrings = {
 
   // dawarich-countries
   'help.guide.dawarich-countries.title': 'เพิ่มประเทศจากบันทึกของคุณ',
-  'help.guide.dawarich-countries.goal': 'ให้ Dawarich บอกว่าคุณเคยอยู่ประเทศใดบ้างในปีที่ผ่านมา และเพิ่มประเทศที่คุณยืนยันลงบนแผนที่',
+  'help.guide.dawarich-countries.goal':
+    'ให้ Dawarich บอกว่าคุณเคยอยู่ประเทศใดบ้างในปีที่ผ่านมา และเพิ่มประเทศที่คุณยืนยันลงบนแผนที่',
   'help.guide.dawarich-countries.step.1':
     'เมื่อเชื่อมต่อส่วนเสริม Dawarich แล้ว แผง Dawarich จะอยู่ที่ด้านล่างของแผนที่ ทางซ้ายของสถิติ พร้อมช่องสองช่อง คลิก ประเทศต่างๆ',
   'help.guide.dawarich-countries.step.2':
@@ -409,7 +449,8 @@ const help: TranslationStrings = {
     'ชื่อประเทศที่ TREK จับคู่ไม่ได้จะแสดงไว้ใต้แถวแทนที่จะถูกตัดทิ้ง และ ตรวจสอบอีกครั้ง จะถาม Dawarich อีกครั้ง หมายเหตุใต้รายการระบุว่าตรวจสอบ 12 เดือนที่ผ่านมา ช่วงเวลานี้กำหนดตายตัว',
   // dawarich-wishes
   'help.guide.dawarich-wishes.title': 'ทำเครื่องหมายสิ่งที่อยากไปว่าสำเร็จจากบันทึกของคุณ',
-  'help.guide.dawarich-wishes.goal': 'ดูว่าสถานที่ใดในรายการสถานที่อยากไปที่คุณไปถึงจริงแล้ว และทำเครื่องหมายว่าสำเร็จตามวันที่เกิดขึ้นจริง',
+  'help.guide.dawarich-wishes.goal':
+    'ดูว่าสถานที่ใดในรายการสถานที่อยากไปที่คุณไปถึงจริงแล้ว และทำเครื่องหมายว่าสำเร็จตามวันที่เกิดขึ้นจริง',
   'help.guide.dawarich-wishes.step.1': 'ในแผง Dawarich ที่ด้านล่างของแผนที่ ทางซ้ายของสถิติ คลิก รายการอยากไป',
   'help.guide.dawarich-wishes.step.2':
     'กล่องโต้ตอบจะเปิดที่แท็บ รายการอยากไป คลิก ตรวจสอบรายการอยากไป: TREK จะค้นหาในบันทึกของคุณสำหรับทุกรายการที่มีพิกัด สิ่งที่อยากไปที่คุณไปถึงแล้วจะแสดงพร้อมระยะที่ใกล้ที่สุด ระยะเวลาที่อยู่ และวันที่ โดยถูกเลือกไว้ตั้งแต่ต้น รายการที่ทำเครื่องหมายไปแล้วจะแสดงว่า ทำเครื่องหมายว่าสำเร็จแล้ว ใต้รายการมีหมายเหตุนับรายการที่ไม่มีพิกัด และมีกฎระบุไว้ด้วย: จะนับว่าไปถึงเมื่ออยู่ในระยะ 250 ม. และอยู่ที่จุดนั้นอย่างน้อย 20 นาที',
@@ -441,15 +482,20 @@ const help: TranslationStrings = {
   'help.guide.create-list.title': 'สร้างรายการ',
   'help.guide.create-list.goal': 'เริ่มรายการใหม่ที่มีชื่อ พร้อมสีและภาพปก พร้อมสำหรับเพิ่มสถานที่',
   'help.guide.create-list.step.1': 'คลิก รายการใหม่ ที่ด้านบนของแถบรายการ',
-  'help.guide.create-list.step.2': 'ตั้งชื่อรายการและเลือกสี ภาพปก คำอธิบาย และลิงก์ไม่บังคับ คุณเพิ่มภายหลังได้ด้วย แก้ไข',
+  'help.guide.create-list.step.2':
+    'ตั้งชื่อรายการและเลือกสี ภาพปก คำอธิบาย และลิงก์ไม่บังคับ คุณเพิ่มภายหลังได้ด้วย แก้ไข',
   'help.guide.create-list.step.3': 'คลิก สร้าง',
-  'help.guide.create-list.result': 'รายการจะเปิดขึ้นแบบว่างเปล่า โดยมี เพิ่มสถานที่ และ นำเข้าจากทริป เป็นสองวิธีในการเติมรายการ',
-  'help.guide.create-list.tip.1': 'ภาพปกอาจเป็นภาพที่คุณอัปโหลดเองหรือภาพที่พบผ่านการค้นหา Unsplash ในกล่องโต้ตอบเดียวกัน',
+  'help.guide.create-list.result':
+    'รายการจะเปิดขึ้นแบบว่างเปล่า โดยมี เพิ่มสถานที่ และ นำเข้าจากทริป เป็นสองวิธีในการเติมรายการ',
+  'help.guide.create-list.tip.1':
+    'ภาพปกอาจเป็นภาพที่คุณอัปโหลดเองหรือภาพที่พบผ่านการค้นหา Unsplash ในกล่องโต้ตอบเดียวกัน',
   // add-place
   'help.guide.add-place.title': 'เพิ่มสถานที่',
-  'help.guide.add-place.goal': 'ค้นหาสถานที่และบันทึกลงในรายการที่เปิดอยู่ พร้อมชื่อ หมวดหมู่ สถานะ และบันทึกย่อในคราวเดียว',
+  'help.guide.add-place.goal':
+    'ค้นหาสถานที่และบันทึกลงในรายการที่เปิดอยู่ พร้อมชื่อ หมวดหมู่ สถานะ และบันทึกย่อในคราวเดียว',
   'help.guide.add-place.step.1': 'คลิก + ในแถวตัวกรองเหนือสถานที่',
-  'help.guide.add-place.step.2': 'พิมพ์สถานที่ในช่องค้นหาแล้วเลือกผลลัพธ์ ชื่อ ที่อยู่ และพิกัดจะถูกกรอกให้จากผลลัพธ์นั้น',
+  'help.guide.add-place.step.2':
+    'พิมพ์สถานที่ในช่องค้นหาแล้วเลือกผลลัพธ์ ชื่อ ที่อยู่ และพิกัดจะถูกกรอกให้จากผลลัพธ์นั้น',
   'help.guide.add-place.step.3':
     'ตั้งสถานะ และใส่หมวดหมู่ คำอธิบาย และลิงก์หากต้องการ แล้วคลิก เพิ่ม กล่องโต้ตอบจะยังเปิดอยู่สำหรับสถานที่ถัดไป ยกเลิก ใช้ปิดกล่องโต้ตอบ',
   'help.guide.add-place.result': 'สถานที่จะปรากฏในรายการ และเมื่อมีพิกัดจะแสดงเป็นหมุดบนแผนที่',
@@ -466,9 +512,12 @@ const help: TranslationStrings = {
   'help.guide.import-from-trip.step.3':
     'เลือกสถานที่ที่ต้องการ สถานที่ที่อยู่ในรายการแล้วจะเป็นสีเทา สถานที่ที่ไม่ได้อยู่ในวันใดของทริปจะถูกเลือกไว้ตั้งแต่ต้น ใหม่เท่านั้น จะซ่อนสิ่งที่คุณมีอยู่แล้ว',
   'help.guide.import-from-trip.step.4': 'คลิก นำเข้า ปุ่มจะแสดงเสมอว่ากำลังจะเพิ่มกี่แห่ง',
-  'help.guide.import-from-trip.result': 'สถานที่จะถูกคัดลอกลงในรายการพร้อมชื่อ ที่อยู่ พิกัด คำอธิบาย และหมวดหมู่ ทริปยังคงเหมือนเดิม',
-  'help.guide.import-from-trip.tip.1': 'รายการที่ซ้ำกันตามชื่อหรือพิกัดจะถูกข้ามโดยอัตโนมัติ การนำเข้าซ้ำจึงไม่เป็นปัญหา',
-  'help.guide.import-from-trip.tip.2': 'ภายในรายการสถานที่ของทริป โหมดเลือกมี บันทึกลงคอลเลกชัน สำหรับชุดสถานที่ที่คุณเลือกเองแทน',
+  'help.guide.import-from-trip.result':
+    'สถานที่จะถูกคัดลอกลงในรายการพร้อมชื่อ ที่อยู่ พิกัด คำอธิบาย และหมวดหมู่ ทริปยังคงเหมือนเดิม',
+  'help.guide.import-from-trip.tip.1':
+    'รายการที่ซ้ำกันตามชื่อหรือพิกัดจะถูกข้ามโดยอัตโนมัติ การนำเข้าซ้ำจึงไม่เป็นปัญหา',
+  'help.guide.import-from-trip.tip.2':
+    'ภายในรายการสถานที่ของทริป โหมดเลือกมี บันทึกลงคอลเลกชัน สำหรับชุดสถานที่ที่คุณเลือกเองแทน',
   // place-status
   'help.guide.place-status.title': 'ตั้งสถานะของสถานที่',
   'help.guide.place-status.goal': 'ติดตามว่าอะไรเป็นไอเดีย อะไรอยู่ในรายการคัดเลือก และที่ไหนที่คุณเคยไปแล้ว',
@@ -484,21 +533,26 @@ const help: TranslationStrings = {
   'help.guide.place-detail.step.1': 'คลิกแถวสถานที่ แผ่นรายละเอียดจะเปิดข้างรายการ และแผนที่จะเลื่อนไปยังสถานที่นั้น',
   'help.guide.place-detail.step.2':
     'ด้านล่างมี แก้ไข คัดลอกไปที่การเดินทาง และ ลบออกจากรายการ ไอคอนกล้องบนภาพปกใช้เปลี่ยนภาพอัตโนมัติเป็นภาพของคุณเอง',
-  'help.guide.place-detail.result': 'แก้ไข จะปลดล็อกชื่อ หมวดหมู่ ป้ายกำกับ ที่อยู่ พิกัด คำอธิบาย และลิงก์ให้แก้ไขได้ในแผ่นรายละเอียด',
+  'help.guide.place-detail.result':
+    'แก้ไข จะปลดล็อกชื่อ หมวดหมู่ ป้ายกำกับ ที่อยู่ พิกัด คำอธิบาย และลิงก์ให้แก้ไขได้ในแผ่นรายละเอียด',
   'help.guide.place-detail.tip.1':
     'ภาพปกจะถูกดึงมาโดยอัตโนมัติเมื่อสถานที่ไม่มีภาพของตัวเอง ภาพที่คุณอัปโหลดเองเป็นไฟล์ JPG, PNG, GIF หรือ WebP ขนาดไม่เกิน 20 MB ได้',
-  'help.guide.place-detail.tip.2': 'สมาชิกของรายการที่แชร์สามารถให้คะแนนดาวได้ที่นี่ด้วย และตัวกรองคะแนนในแถวตัวกรองจะใช้ค่าเฉลี่ย',
+  'help.guide.place-detail.tip.2':
+    'สมาชิกของรายการที่แชร์สามารถให้คะแนนดาวได้ที่นี่ด้วย และตัวกรองคะแนนในแถวตัวกรองจะใช้ค่าเฉลี่ย',
   // labels
   'help.guide.labels.title': 'จัดกลุ่มสถานที่ด้วยป้ายกำกับ',
   'help.guide.labels.goal': 'ตั้งป้ายกำกับเฉพาะให้รายการ เช่น ย่านหรือวัน นอกเหนือจากหมวดหมู่ที่ใช้ร่วมกัน',
   'help.guide.labels.step.1': 'เปิดตัวจัดการป้ายกำกับจากตัวควบคุมป้ายกำกับในแถวตัวกรอง',
-  'help.guide.labels.step.2': 'พิมพ์ชื่อ เลือกสี แล้วคลิก เพิ่มป้ายกำกับ เปลี่ยนชื่อ เปลี่ยนสี หรือลบป้ายกำกับที่มีอยู่ได้ในกล่องโต้ตอบเดียวกัน',
+  'help.guide.labels.step.2':
+    'พิมพ์ชื่อ เลือกสี แล้วคลิก เพิ่มป้ายกำกับ เปลี่ยนชื่อ เปลี่ยนสี หรือลบป้ายกำกับที่มีอยู่ได้ในกล่องโต้ตอบเดียวกัน',
   'help.guide.labels.step.3':
     'เปิด เลือก เลือกสถานที่ แล้วคลิก กำหนดป้ายกำกับ ในแถบการเลือก สถานที่เดียวก็รับป้ายกำกับได้ผ่าน แก้ไข ในแผ่นรายละเอียด',
   'help.guide.labels.step.4':
     'เลือกป้ายกำกับหนึ่งรายการขึ้นไปในแถวตัวกรอง เพื่อจำกัดรายการและแผนที่ให้เหลือเฉพาะสถานที่ที่มีป้ายกำกับใดป้ายหนึ่ง',
-  'help.guide.labels.result': 'สถานที่ที่มีป้ายกำกับจะแสดงป้ายกำกับบนแถว ตัวกรองป้ายกำกับใช้ได้สำหรับสมาชิกทุกคน รวมถึงผู้ดู',
-  'help.guide.labels.tip.1': 'ป้ายกำกับเป็นของรายการที่สร้างป้ายนั้นเท่านั้น การย้ายสถานที่ไปยังรายการอื่นจะทำให้ป้ายกำกับหายไป',
+  'help.guide.labels.result':
+    'สถานที่ที่มีป้ายกำกับจะแสดงป้ายกำกับบนแถว ตัวกรองป้ายกำกับใช้ได้สำหรับสมาชิกทุกคน รวมถึงผู้ดู',
+  'help.guide.labels.tip.1':
+    'ป้ายกำกับเป็นของรายการที่สร้างป้ายนั้นเท่านั้น การย้ายสถานที่ไปยังรายการอื่นจะทำให้ป้ายกำกับหายไป',
   'help.guide.labels.tip.2': 'การจัดการและกำหนดป้ายกำกับต้องมีสิทธิ์แก้ไขรายการ',
   // filter-select
   'help.guide.filter-select.title': 'กรองและเลือกสถานที่',
@@ -514,12 +568,14 @@ const help: TranslationStrings = {
   // copy-to-trip
   'help.guide.copy-to-trip.title': 'คัดลอกสถานที่ไปยังทริป',
   'help.guide.copy-to-trip.goal': 'เปลี่ยนสถานที่ที่บันทึกไว้ให้เป็นจุดแวะในทริปของคุณ',
-  'help.guide.copy-to-trip.step.1': 'เปิด เลือก แล้วเลือกสถานที่ หรือเปิดสถานที่หนึ่งแล้วใช้ คัดลอกไปที่การเดินทาง ในแผ่นรายละเอียด',
+  'help.guide.copy-to-trip.step.1':
+    'เปิด เลือก แล้วเลือกสถานที่ หรือเปิดสถานที่หนึ่งแล้วใช้ คัดลอกไปที่การเดินทาง ในแผ่นรายละเอียด',
   'help.guide.copy-to-trip.step.2': 'คลิก คัดลอกไปที่การเดินทาง ในแถบการเลือก',
   'help.guide.copy-to-trip.step.3': 'เลือกทริป ช่องค้นหาช่วยจำกัดรายการที่ยาว',
   'help.guide.copy-to-trip.result':
     'สถานที่จะไปอยู่ในรายการสถานที่ของทริปนั้นพร้อมชื่อ คำอธิบาย หมวดหมู่ บันทึกย่อ ราคา พิกัด ภาพ และแท็ก คอลเลกชันไม่มีการเปลี่ยนแปลง',
-  'help.guide.copy-to-trip.tip.1': 'ผู้ดูของรายการที่แชร์ก็ทำสิ่งนี้ได้ เป็นการคัดลอกออกจากรายการ ไม่ได้เปลี่ยนแปลงรายการ',
+  'help.guide.copy-to-trip.tip.1':
+    'ผู้ดูของรายการที่แชร์ก็ทำสิ่งนี้ได้ เป็นการคัดลอกออกจากรายการ ไม่ได้เปลี่ยนแปลงรายการ',
   // share-list
   'help.guide.share-list.title': 'แชร์รายการกับผู้อื่น',
   'help.guide.share-list.goal': 'วางแผนรายการร่วมกับผู้อื่นบน TREK นี้แบบเรียลไทม์',
@@ -538,8 +594,10 @@ const help: TranslationStrings = {
   'help.guide.export-list.step.2':
     'เลือก รายการ TREK สำหรับ TREK อื่น พร้อมป้ายกำกับและสถานะ หรือ GPX สำหรับ OsmAnd, Organic Maps, Garmin และแอปอื่นๆ ที่อ่านจุดอ้างอิงได้',
   'help.guide.export-list.result': 'ไฟล์จะถูกดาวน์โหลด สมาชิกทุกคนของรายการที่แชร์ส่งออกได้',
-  'help.guide.export-list.tip.1': 'สถานที่ที่ไม่มีพิกัดไม่สามารถเป็นจุดอ้างอิง GPX ได้ จึงจะไม่ถูกรวม และ TREK จะแจ้งว่ามีกี่แห่ง',
-  'help.guide.export-list.tip.2': 'คะแนน สมาชิก และภาพที่อัปโหลดจะไม่ถูกส่งออกโดยตั้งใจ เพราะเป็นของ TREK นี้ ไม่ใช่ของรายการ',
+  'help.guide.export-list.tip.1':
+    'สถานที่ที่ไม่มีพิกัดไม่สามารถเป็นจุดอ้างอิง GPX ได้ จึงจะไม่ถูกรวม และ TREK จะแจ้งว่ามีกี่แห่ง',
+  'help.guide.export-list.tip.2':
+    'คะแนน สมาชิก และภาพที่อัปโหลดจะไม่ถูกส่งออกโดยตั้งใจ เพราะเป็นของ TREK นี้ ไม่ใช่ของรายการ',
   // import-file
   'help.guide.import-file.title': 'นำเข้ารายการจากไฟล์',
   'help.guide.import-file.goal': 'นำเข้าไฟล์รายการ TREK หรือไฟล์ GPX เป็นรายการใหม่ หรือเข้าไปในรายการที่คุณมีอยู่',
@@ -551,19 +609,23 @@ const help: TranslationStrings = {
     'คุณจะไปที่รายการพร้อมสถานที่ที่นำเข้า การเพิ่มลงในรายการจะเพิ่มอย่างเดียวเสมอ สถานที่ที่มีอยู่แล้วจะคงสถานะ บันทึกย่อ และป้ายกำกับไว้',
   'help.guide.import-file.tip.1':
     'จากไฟล์ GPX จุดอ้างอิงทุกจุดที่มีชื่อจะกลายเป็นสถานที่ เส้นทางเป็นเส้นจึงไม่ถูกรวม และตัวอย่างจะแสดงว่ามีกี่จุด',
-  'help.guide.import-file.tip.2': 'ไฟล์ที่ไม่ใช่รายการ TREK หรือ GPX จะถูกปฏิเสธพร้อมเหตุผล สถานที่เดียวที่อ่านไม่ได้จะถูกข้าม ไม่ใช่ทั้งไฟล์',
+  'help.guide.import-file.tip.2':
+    'ไฟล์ที่ไม่ใช่รายการ TREK หรือ GPX จะถูกปฏิเสธพร้อมเหตุผล สถานที่เดียวที่อ่านไม่ได้จะถูกข้าม ไม่ใช่ทั้งไฟล์',
   // edit-list
   'help.guide.edit-list.title': 'แก้ไขหรือลบรายการ',
   'help.guide.edit-list.goal': 'เปลี่ยนชื่อ สี ภาพปก คำอธิบาย หรือลิงก์ของรายการ หรือลบรายการ',
   'help.guide.edit-list.step.1': 'คลิก แก้ไข ในส่วนหัวของรายการ เฉพาะเจ้าของเท่านั้นที่เห็นปุ่มนี้',
-  'help.guide.edit-list.step.2': 'เปลี่ยนสิ่งที่ต้องการแล้วคลิก บันทึก ลบรายการ ที่มุมซ้ายล่างจะลบรายการพร้อมสถานที่ทั้งหมดหลังจากยืนยัน',
+  'help.guide.edit-list.step.2':
+    'เปลี่ยนสิ่งที่ต้องการแล้วคลิก บันทึก ลบรายการ ที่มุมซ้ายล่างจะลบรายการพร้อมสถานที่ทั้งหมดหลังจากยืนยัน',
   'help.guide.edit-list.result': 'ส่วนหัวจะใช้สี ภาพปก และคำอธิบายใหม่ทันที',
   'help.guide.edit-list.tip.1': 'การลบรายการไม่สามารถเลิกทำได้ ส่งออกก่อนหากต้องการเก็บสำเนาไว้',
   // all-saved
   'help.guide.all-saved.title': 'ค้นหาทั้งคลังของคุณ',
   'help.guide.all-saved.goal': 'ดูทุกรายการที่คุณเป็นเจ้าของในครั้งเดียว',
-  'help.guide.all-saved.step.1': 'คลิก บันทึกทั้งหมดแล้ว ในแถบรายการ มุมมองนี้รวมสถานที่จากทุกรายการที่คุณเป็นเจ้าของหรือเป็นเจ้าของร่วม',
-  'help.guide.all-saved.step.2': 'ใช้ช่องค้นหาและตัวกรองเหมือนในรายการอื่นๆ เลือก ก็ใช้ได้ที่นี่สำหรับการคัดลอกไปยังทริป',
+  'help.guide.all-saved.step.1':
+    'คลิก บันทึกทั้งหมดแล้ว ในแถบรายการ มุมมองนี้รวมสถานที่จากทุกรายการที่คุณเป็นเจ้าของหรือเป็นเจ้าของร่วม',
+  'help.guide.all-saved.step.2':
+    'ใช้ช่องค้นหาและตัวกรองเหมือนในรายการอื่นๆ เลือก ก็ใช้ได้ที่นี่สำหรับการคัดลอกไปยังทริป',
   'help.guide.all-saved.result':
     'มุมมองเดียวสำหรับสถานที่ที่บันทึกไว้ทั้งหมด โดยไม่มีการเพิ่มหรือนำเข้า เพราะไม่มีรายการเดียวที่จะใส่สถานที่ลงไป',
   'help.guide.all-saved.tip.1': 'ป้ายกำกับแยกตามรายการ ตัวกรองป้ายกำกับจึงไม่มีใน บันทึกทั้งหมดแล้ว',
@@ -574,13 +636,15 @@ const help: TranslationStrings = {
     'การเดินทาง คือบันทึกการเดินทางที่เน้นภาพถ่ายของคุณ ทุกการเดินทางผูกกับทริปหนึ่งทริปขึ้นไป และเติบโตขึ้นทุกวันจากรายการที่มีเรื่องราว ภาพถ่าย อารมณ์ และสภาพอากาศ หน้าจอนี้แสดงการเดินทางของคุณ เปิดการเดินทางเพื่อเริ่มเขียน',
   'help.ctx.journey.bullet.1':
     'แบนเนอร์ด้านบนแสดงการเดินทางที่กำลังดำเนินอยู่ หรือการเดินทางล่าสุดของคุณ พร้อมจำนวนรายการ ภาพถ่าย และสถานที่ เขียนต่อ จะเปิดการเดินทางที่วันนี้',
-  'help.ctx.journey.bullet.2': 'ด้านล่างมีการ์ดหนึ่งใบต่อการเดินทาง พร้อมภาพปก คำบรรยาย วันที่ และจำนวน คลิกการ์ดเพื่อเปิด',
+  'help.ctx.journey.bullet.2':
+    'ด้านล่างมีการ์ดหนึ่งใบต่อการเดินทาง พร้อมภาพปก คำบรรยาย วันที่ และจำนวน คลิกการ์ดเพื่อเปิด',
   'help.ctx.journey.bullet.3': 'การ์ดใบสุดท้ายในตาราง สร้างการเดินทางครั้งใหม่ ใช้เริ่มการเดินทางจากทริปของคุณ',
   // create-journey
   'help.guide.create-journey.title': 'สร้างการเดินทาง',
   'help.guide.create-journey.goal': 'เริ่มบันทึกสำหรับทริป โดยมีสถานที่ของทริปรออยู่เป็นคำแนะนำแล้ว',
   'help.guide.create-journey.step.1': 'คลิก สร้างการเดินทางครั้งใหม่ การ์ดใบสุดท้ายในตาราง',
-  'help.guide.create-journey.step.2': 'ตั้งชื่อ และใส่คำบรรยายหากต้องการ แล้วเลือกทริปที่เกี่ยวข้อง ตัวนับจะแสดงว่าจะมีสถานที่เข้ามากี่แห่ง',
+  'help.guide.create-journey.step.2':
+    'ตั้งชื่อ และใส่คำบรรยายหากต้องการ แล้วเลือกทริปที่เกี่ยวข้อง ตัวนับจะแสดงว่าจะมีสถานที่เข้ามากี่แห่ง',
   'help.guide.create-journey.step.3': 'คลิก สร้างการเดินทาง',
   'help.guide.create-journey.result':
     'บันทึกจะเปิดขึ้น ทุกสถานที่ของทริปที่เชื่อมโยงจะอยู่ในไทม์ไลน์เป็นคำแนะนำ หนึ่งรายการต่อทุกวันที่มีสถานที่นั้น พร้อมให้เขียนลงไป',
@@ -589,7 +653,8 @@ const help: TranslationStrings = {
   // open-journey
   'help.guide.open-journey.title': 'เปิดการเดินทาง',
   'help.guide.open-journey.goal': 'เข้าสู่บันทึก และรู้ว่าบันทึกจะเปิดที่ใด',
-  'help.guide.open-journey.step.1': 'คลิกการ์ด แต่ละใบแสดงภาพปก วันที่ และจำนวนรายการ ภาพถ่าย และสถานที่ในการเดินทางนั้น',
+  'help.guide.open-journey.step.1':
+    'คลิกการ์ด แต่ละใบแสดงภาพปก วันที่ และจำนวนรายการ ภาพถ่าย และสถานที่ในการเดินทางนั้น',
   'help.guide.open-journey.result':
     'การเดินทางที่กำลังดำเนินอยู่จะเปิดที่วันนี้ หรือที่รายการล่าสุดก่อนวันนี้หากยังไม่ได้เขียนอะไร การเดินทางที่จบแล้วจะเปิดที่จุดเริ่มต้น',
   'help.guide.open-journey.tip.1': 'ภาพปกคือภาพแรกของการเดินทาง เว้นแต่คุณจะตั้งไว้ใน การตั้งค่าการเดินทาง',
@@ -607,7 +672,8 @@ const help: TranslationStrings = {
     'การเดินทางหนึ่งที่เปิดอยู่: ไทม์ไลน์ทางซ้ายเรียงตามวัน และแผนที่ทางขวาพร้อมทุกรายการและสถานที่ของทริปที่เชื่อมโยง ทุกอย่างที่ใช้เพิ่มเนื้อหาในบันทึกอยู่ด้านบน ส่วนหัวมีจำนวนต่างๆ สตูดิโอ สวิตช์คำแนะนำ และ การตั้งค่าการเดินทาง',
   'help.ctx.journey-detail.bullet.1':
     'ส่วนหัว: ภาพปก ชื่อเรื่องและคำบรรยาย จำนวนวัน สถานที่ รายการ และภาพถ่าย และทางขวามี สตูดิโอ สวิตช์คำแนะนำ และ การตั้งค่าการเดินทาง',
-  'help.ctx.journey-detail.bullet.2': 'แถบเครื่องมือ: แท็บ ไทม์ไลน์ และ แกลเลอรี่ ค้นหาในบันทึกการเดินทางนี้ และ เพิ่มรายการ',
+  'help.ctx.journey-detail.bullet.2':
+    'แถบเครื่องมือ: แท็บ ไทม์ไลน์ และ แกลเลอรี่ ค้นหาในบันทึกการเดินทางนี้ และ เพิ่มรายการ',
   'help.ctx.journey-detail.bullet.3':
     'ไทม์ไลน์: หนึ่งส่วนต่อวันพร้อมปุ่ม + สำหรับเพิ่มรายการในวันนั้น การ์ดรายการพร้อมภาพถ่าย อารมณ์ สภาพอากาศ และเรื่องราว คำแนะนำจากทริปแสดงในสไตล์ที่จางกว่าพร้อม ซ่อนคำแนะนำนี้',
   'help.ctx.journey-detail.bullet.4':
@@ -624,9 +690,11 @@ const help: TranslationStrings = {
   'help.guide.add-entry.step.3':
     'เลือกอารมณ์และสภาพอากาศ ตรวจสอบวันที่ และปักหมุดตำแหน่งหากต้องการ: ค้นหาสถานที่หรือใช้ตำแหน่งปัจจุบันของคุณ',
   'help.guide.add-entry.step.4': 'คลิก บันทึก',
-  'help.guide.add-entry.result': 'รายการจะปรากฏในวันของรายการนั้นบนไทม์ไลน์และเป็นหมุดบนแผนที่ จำนวนในส่วนหัวจะอัปเดตตาม',
+  'help.guide.add-entry.result':
+    'รายการจะปรากฏในวันของรายการนั้นบนไทม์ไลน์และเป็นหมุดบนแผนที่ จำนวนในส่วนหัวจะอัปเดตตาม',
   'help.guide.add-entry.tip.1': 'การเขียนลงในคำแนะนำใช้ตัวแก้ไขเดียวกัน โดยมีสถานที่ตั้งไว้แล้ว',
-  'help.guide.add-entry.tip.2': 'แท็กที่ด้านล่างเป็นข้อความอิสระ เช่น อัญมณีที่ซ่อนอยู่ หรือ มื้ออร่อยที่สุด และการค้นหาจะพบแท็กเหล่านี้',
+  'help.guide.add-entry.tip.2':
+    'แท็กที่ด้านล่างเป็นข้อความอิสระ เช่น อัญมณีที่ซ่อนอยู่ หรือ มื้ออร่อยที่สุด และการค้นหาจะพบแท็กเหล่านี้',
   // entry-photos
   'help.guide.entry-photos.title': 'เพิ่มรูปภาพและวิดีโอในรายการ',
   'help.guide.entry-photos.goal': 'ใส่รูปภาพให้กับวันหนึ่ง รูปแรกจะกลายเป็นภาพปกของรายการ',
@@ -637,16 +705,19 @@ const help: TranslationStrings = {
   'help.guide.entry-photos.result': 'รูปภาพจะแสดงบนการ์ดและในแกลเลอรี่ รูปแรกจะเป็นภาพขนาดย่อในทุกที่',
   'help.guide.entry-photos.tip.1':
     'เพิ่มวิดีโอในรายการได้ด้วยวิธีเดียวกัน: mp4, m4v, webm หรือ mov ขนาดไม่เกิน 500 MB โดยจัดเก็บตามที่อัปโหลด',
-  'help.guide.entry-photos.tip.2': 'ไฟล์ HEIC จาก iPhone จะถูกแปลงเป็น JPEG ตอนอัปโหลด ทำให้ข้อมูลเมตา GPS และกล้องหายไป',
+  'help.guide.entry-photos.tip.2':
+    'ไฟล์ HEIC จาก iPhone จะถูกแปลงเป็น JPEG ตอนอัปโหลด ทำให้ข้อมูลเมตา GPS และกล้องหายไป',
   // suggestions
   'help.guide.suggestions.title': 'ใช้หรือซ่อนคำแนะนำ',
   'help.guide.suggestions.goal': 'เปลี่ยนสถานที่ในทริปของคุณให้เป็นรายการ และเก็บกวาดสถานที่ที่คุณจะไม่เขียนถึง',
-  'help.guide.suggestions.step.1': 'คำแนะนำคือการ์ดสีอ่อนที่มีชื่อสถานที่เป็นตัวเอียง คลิกเพื่อเปิดตัวแก้ไขโดยตั้งค่าสถานที่และวันไว้ให้แล้ว',
+  'help.guide.suggestions.step.1':
+    'คำแนะนำคือการ์ดสีอ่อนที่มีชื่อสถานที่เป็นตัวเอียง คลิกเพื่อเปิดตัวแก้ไขโดยตั้งค่าสถานที่และวันไว้ให้แล้ว',
   'help.guide.suggestions.step.2':
     'คลิก ซ่อนคำแนะนำนี้ บนการ์ดที่คุณจะไม่ใช้ การ์ดจะหายไปจากไทม์ไลน์โดยไม่ถูกลบ และการซิงค์ทริปจะไม่เสนอให้อีก',
   'help.guide.suggestions.step.3':
     'เปลี่ยนใจแล้วใช่ไหม การตั้งค่าการเดินทาง จะแสดงจำนวนคำแนะนำที่ซ่อนไว้ และ เรียกคืนคำแนะนำที่ซ่อน จะนำกลับมาทั้งหมด',
-  'help.guide.suggestions.result': 'ไทม์ไลน์จะมีเฉพาะสิ่งที่คุณตั้งใจจะเขียน สวิตช์ที่ส่วนหัวจะซ่อนคำแนะนำทั้งหมดพร้อมกันขณะที่คุณอ่าน',
+  'help.guide.suggestions.result':
+    'ไทม์ไลน์จะมีเฉพาะสิ่งที่คุณตั้งใจจะเขียน สวิตช์ที่ส่วนหัวจะซ่อนคำแนะนำทั้งหมดพร้อมกันขณะที่คุณอ่าน',
   'help.guide.suggestions.tip.1': 'สถานที่ที่อยู่ครอบคลุมสองวันจะมีคำแนะนำในแต่ละวัน',
   'help.guide.suggestions.tip.2': 'คำแนะนำไม่ถูกนับในสถิติ นับเฉพาะรายการที่เขียนแล้วเท่านั้น',
   // add-on-day
@@ -663,7 +734,8 @@ const help: TranslationStrings = {
     'ในตัวแก้ไข หา ข้อดีข้อเสีย ใต้เรื่องราว พิมพ์ประเด็นลงใน ข้อดี หรือ ข้อเสีย แล้วใช้ เพิ่มอีกอัน สำหรับประเด็นถัดไป',
   'help.guide.pros-cons.step.2': 'คลิก บันทึก ข้อสรุปจะแสดงบนการ์ดเป็นรายการสั้นๆ สองรายการ',
   'help.guide.pros-cons.result': 'เห็นข้อดีข้อเสียได้ในพริบตา ใต้เรื่องราว',
-  'help.guide.pros-cons.tip.1': 'บันทึกการเดินทางที่ไม่ใช้ข้อสรุปสามารถปิดส่วนนี้ได้ที่ ฟิลด์ของบันทึก ใน การตั้งค่าการเดินทาง',
+  'help.guide.pros-cons.tip.1':
+    'บันทึกการเดินทางที่ไม่ใช้ข้อสรุปสามารถปิดส่วนนี้ได้ที่ ฟิลด์ของบันทึก ใน การตั้งค่าการเดินทาง',
   // search-journey
   'help.guide.search-journey.title': 'ค้นหาสิ่งที่ต้องการในบันทึกการเดินทางที่ยาว',
   'help.guide.search-journey.goal': 'ไปยังรายการที่ต้องการโดยไม่ต้องเลื่อนผ่านหลายสัปดาห์',
@@ -672,7 +744,8 @@ const help: TranslationStrings = {
   'help.guide.search-journey.step.2':
     'สวิตช์คำแนะนำที่ส่วนหัวจะซ่อนการ์ดที่ยังไม่ได้เขียนขณะที่คุณอ่าน เมื่อไทม์ไลน์ยาวขึ้น จะมีปุ่มกลมสองปุ่มลอยอยู่เหนือขอบล่าง: กลับไปด้านบน และข้ามไปยังรายการสุดท้าย',
   'help.guide.search-journey.result': 'จะเหลือเฉพาะรายการที่ตรงกัน ล้างช่องค้นหาเพื่อดูทุกอย่างอีกครั้ง',
-  'help.guide.search-journey.tip.1': 'บันทึกการเดินทางที่กำลังดำเนินอยู่จะเปิดที่วันนี้ ดังนั้นหน้าปัจจุบันมักจะแสดงอยู่แล้ว',
+  'help.guide.search-journey.tip.1':
+    'บันทึกการเดินทางที่กำลังดำเนินอยู่จะเปิดที่วันนี้ ดังนั้นหน้าปัจจุบันมักจะแสดงอยู่แล้ว',
   'help.guide.search-journey.tip.2': 'แท็กก็ค้นหาได้เช่นกัน: การค้นหา ที่เที่ยวลับ จะพบทุกรายการที่ติดแท็กนี้',
   // gallery-map
   'help.guide.gallery-map.title': 'เรียกดูแกลเลอรี่และแผนที่',
@@ -681,9 +754,11 @@ const help: TranslationStrings = {
     'สลับไปที่ แกลเลอรี่ ในแถบเครื่องมือ: ทุกรูปภาพของทุกรายการ รวมถึงรูปที่อัปโหลดไปยังแกลเลอรี่โดยตรง คลิกรูปใดรูปหนึ่งเพื่อเปิดไลต์บ็อกซ์',
   'help.guide.gallery-map.step.2':
     'แผนที่ทางขวาแสดงรายการเป็นหมุดตามลำดับวันที่ สถานที่ของทริปที่เชื่อมโยงไว้ และแทร็ก GPX ที่นำเข้าในทริปเหล่านั้น ด้วยสีเดียวกับในตัววางแผน',
-  'help.guide.gallery-map.result': 'วางเมาส์เหนือแทร็กเพื่อดูชื่อ เส้นประระหว่างรายการวาดโดย TREK ส่วนแทร็กคือเส้นทางที่คุณบันทึกไว้จริง',
+  'help.guide.gallery-map.result':
+    'วางเมาส์เหนือแทร็กเพื่อดูชื่อ เส้นประระหว่างรายการวาดโดย TREK ส่วนแทร็กคือเส้นทางที่คุณบันทึกไว้จริง',
   'help.guide.gallery-map.tip.1': 'ปิดแทร็กสำหรับบันทึกการเดินทางได้ใน การตั้งค่าการเดินทาง',
-  'help.guide.gallery-map.tip.2': 'รูปภาพในแกลเลอรี่ที่มีตำแหน่งจะแสดงบนแผนที่สาธารณะด้วย เมื่อแชร์ทั้ง แกลเลอรี่ และ แผนที่',
+  'help.guide.gallery-map.tip.2':
+    'รูปภาพในแกลเลอรี่ที่มีตำแหน่งจะแสดงบนแผนที่สาธารณะด้วย เมื่อแชร์ทั้ง แกลเลอรี่ และ แผนที่',
   // entry-fields
   'help.guide.entry-fields.title': 'ปิดฟิลด์ของบันทึก',
   'help.guide.entry-fields.goal': 'ให้ตัวแก้ไขมีเฉพาะสิ่งที่บันทึกการเดินทางนี้ใช้',
@@ -698,7 +773,8 @@ const help: TranslationStrings = {
   'help.guide.link-trip.step.1': 'เปิด การตั้งค่าการเดินทาง จากส่วนหัว',
   'help.guide.link-trip.step.2': 'ใต้ทริปที่เชื่อมโยง คลิก เพิ่มการเดินทาง',
   'help.guide.link-trip.step.3': 'เลือกทริป',
-  'help.guide.link-trip.result': 'สถานที่ของทริปนั้นจะปรากฏในไทม์ไลน์เป็นคำแนะนำในวันของแต่ละแห่ง และแทร็ก GPX จะถูกเพิ่มลงในแผนที่',
+  'help.guide.link-trip.result':
+    'สถานที่ของทริปนั้นจะปรากฏในไทม์ไลน์เป็นคำแนะนำในวันของแต่ละแห่ง และแทร็ก GPX จะถูกเพิ่มลงในแผนที่',
   'help.guide.link-trip.tip.1': 'ปุ่ม × ข้างทริปที่เชื่อมโยงจะยกเลิกการเชื่อมโยง รายการที่คุณเขียนไว้ยังคงอยู่',
   'help.guide.link-trip.tip.2': 'รายการที่มีวันจะนับเพียงครั้งเดียว ไม่ว่าจะมีกี่ทริปที่ครอบคลุมวันนั้น',
   // share-public
@@ -708,7 +784,8 @@ const help: TranslationStrings = {
   'help.guide.share-public.step.2': 'คลิก สร้างลิงก์แชร์',
   'help.guide.share-public.step.3':
     'เลือกสิ่งที่ผู้เยี่ยมชมจะเห็น: ไทม์ไลน์ แกลเลอรี่ และ แผนที่ เป็นสวิตช์แยกกัน คัดลอก จะคัดลอกลิงก์ไปยังคลิปบอร์ดของคุณ',
-  'help.guide.share-public.result': 'ทุกคนที่มีลิงก์จะเห็นเฉพาะส่วนที่เปิดไว้เท่านั้น ฟิลด์ที่คุณปิดใน ฟิลด์ของบันทึก จะถูกซ่อนที่นั่นด้วย',
+  'help.guide.share-public.result':
+    'ทุกคนที่มีลิงก์จะเห็นเฉพาะส่วนที่เปิดไว้เท่านั้น ฟิลด์ที่คุณปิดใน ฟิลด์ของบันทึก จะถูกซ่อนที่นั่นด้วย',
   'help.guide.share-public.tip.1':
     'รูปภาพจะปรากฏบนแผนที่สาธารณะเฉพาะเมื่อเปิดทั้ง แกลเลอรี่ และ แผนที่ หากปิด แผนที่ พิกัดจะถูกลบออกก่อนส่งออกจากเซิร์ฟเวอร์',
   'help.guide.share-public.tip.2': 'ลบลิงก์ในที่เดียวกันเพื่อยุติการแชร์',
@@ -737,7 +814,8 @@ const help: TranslationStrings = {
   'help.guide.archive-journey.step.1': 'เปิด การตั้งค่าการเดินทาง',
   'help.guide.archive-journey.step.2':
     'ที่ด้านล่าง ปิดการเดินทาง จะสิ้นสุดบันทึกและทำเครื่องหมายว่าเก็บถาวรแล้ว เปิดการเดินทางอีกครั้ง จะนำกลับมา ส่วน ลบ จะลบบันทึกพร้อมรายการและรูปภาพทั้งหมดหลังจากยืนยัน',
-  'help.guide.archive-journey.result': 'บันทึกการเดินทางที่เก็บถาวรยังคงอ่านและแชร์ได้ เพียงแต่จะไม่เปิดที่วันนี้อีกต่อไป',
+  'help.guide.archive-journey.result':
+    'บันทึกการเดินทางที่เก็บถาวรยังคงอ่านและแชร์ได้ เพียงแต่จะไม่เปิดที่วันนี้อีกต่อไป',
   'help.guide.archive-journey.tip.1': 'การลบไม่สามารถย้อนกลับได้ และจะไม่กระทบกับทริปที่บันทึกการเดินทางเชื่อมโยงไว้',
   'help.guide.archive-journey.tip.2': 'ภาพปก ชื่อ และคำบรรยายรองอยู่ในกล่องโต้ตอบเดียวกัน ที่ด้านบน',
 
@@ -772,18 +850,21 @@ const help: TranslationStrings = {
   // studio-pages
   'help.guide.studio-pages.title': 'เพิ่ม ย้าย และลบหน้าคู่',
   'help.guide.studio-pages.goal': 'จัดรูปแบบหนังสือทีละหน้า',
-  'help.guide.studio-pages.step.1': 'เปิด หน้า ในแถบด้านซ้าย ภาพขนาดย่อคือหนังสือตามลำดับ: ปก หน้าแรก หน้าคู่ หน้าสุดท้าย ปกหลัง',
+  'help.guide.studio-pages.step.1':
+    'เปิด หน้า ในแถบด้านซ้าย ภาพขนาดย่อคือหนังสือตามลำดับ: ปก หน้าแรก หน้าคู่ หน้าสุดท้าย ปกหลัง',
   'help.guide.studio-pages.step.2':
     'เพิ่มหน้าคู่ ที่ด้านล่างจะเพิ่มหน้าคู่ใหม่ก่อนหน้าสุดท้าย ส่วนปุ่ม + ระหว่างภาพขนาดย่อสองภาพจะแทรกหน้าคู่ ณ ตำแหน่งนั้น',
   'help.guide.studio-pages.step.3':
     'วางเมาส์เหนือภาพขนาดย่อเพื่อดูคำสั่ง: ย้ายมาก่อน, ย้ายในภายหลัง, ทำสำเนาหน้าคู่ และ ลบสเปรด คลิกภาพขนาดย่อเพื่อเปิดหน้าคู่นั้นบนพื้นที่ทำงาน',
-  'help.guide.studio-pages.result': 'ปก หน้าแรก หน้าสุดท้าย และปกหลังจะอยู่ที่เดิม หน้าคู่ใหม่จะอยู่ระหว่างหน้าเหล่านั้นเสมอ',
+  'help.guide.studio-pages.result':
+    'ปก หน้าแรก หน้าสุดท้าย และปกหลังจะอยู่ที่เดิม หน้าคู่ใหม่จะอยู่ระหว่างหน้าเหล่านั้นเสมอ',
   'help.guide.studio-pages.tip.1': 'มุมมองหนังสือ ในแถบด้านบนแสดงหนังสือทั้งเล่มเป็นแผ่น ตามแบบที่จะเย็บเล่ม',
   'help.guide.studio-pages.tip.2': 'เปิดหมายเลขหน้าได้ที่ เอกสาร ใน คุณสมบัติ เมื่อไม่ได้เลือกอะไรไว้',
   // studio-layouts
   'help.guide.studio-layouts.title': 'ใช้เค้าโครงกับหน้าคู่',
   'help.guide.studio-layouts.goal': 'ให้หน้าคู่มีการจัดวางกรอบรูปภาพและข้อความแบบสำเร็จรูป',
-  'help.guide.studio-layouts.step.1': 'เปิด เค้าโครง ในแถบด้านซ้าย มีเค้าโครงหน้าคู่สิบสามแบบ และอีกชุดแยกสำหรับปก ปกหลัง และหน้าเดี่ยว',
+  'help.guide.studio-layouts.step.1':
+    'เปิด เค้าโครง ในแถบด้านซ้าย มีเค้าโครงหน้าคู่สิบสามแบบ และอีกชุดแยกสำหรับปก ปกหลัง และหน้าเดี่ยว',
   'help.guide.studio-layouts.step.2':
     'คลิกเลือกหนึ่งแบบ หน้าคู่บนพื้นที่ทำงานจะใช้กรอบของเค้าโครงนั้น รูปภาพและข้อความที่มีอยู่แล้วจะถูกใส่ลงในกรอบ',
   'help.guide.studio-layouts.result': 'กรอบว่างจะรอเนื้อหา: ลากรูปภาพจาก เนื้อหา ไปวางในกรอบ หรือใช้ เพิ่มลงในหน้านี้',
@@ -806,7 +887,8 @@ const help: TranslationStrings = {
   'help.guide.studio-elements.step.1': 'เปิด องค์ประกอบ ในแถบด้านซ้าย',
   'help.guide.studio-elements.step.2':
     'คลิกสไตล์ข้อความสำหรับหัวข้อหรือคำบรรยายภาพ รูปร่าง เส้น กริด กรอบว่างพร้อมสไตล์กรอบ หรือไอคอนจากคลังที่ค้นหาได้ แต่ละอย่างจะปรากฏกลางหน้าคู่ พร้อมให้ย้าย',
-  'help.guide.studio-elements.result': 'ดับเบิลคลิกองค์ประกอบข้อความเพื่อพิมพ์ คุณสมบัติ มีแบบอักษร น้ำหนัก ขนาด ระยะห่าง และการจัดแนว',
+  'help.guide.studio-elements.result':
+    'ดับเบิลคลิกองค์ประกอบข้อความเพื่อพิมพ์ คุณสมบัติ มีแบบอักษร น้ำหนัก ขนาด ระยะห่าง และการจัดแนว',
   'help.guide.studio-elements.tip.1': 'เฟรมคือช่องรูปภาพว่าง: วางรูปลงไปภายหลังได้',
   // studio-travel
   'help.guide.studio-travel.title': 'เพิ่มแผนที่ ธง และตัวเลขสถิติ',
@@ -827,7 +909,8 @@ const help: TranslationStrings = {
     'ทำซ้ำ และ ลบ อยู่ที่ด้านบนของตัวตรวจสอบ เลิกทำ ในแถบด้านบนจะย้อนการเปลี่ยนแปลงเหล่านี้ได้ทั้งหมด',
   'help.guide.studio-properties.result':
     'องค์ประกอบที่ล็อกไว้จะไม่สามารถจับบนหน้าได้อีก ซึ่งช่วยให้เค้าโครงที่เสร็จแล้วปลอดภัยขณะที่คุณทำงานรอบๆ',
-  'help.guide.studio-properties.tip.1': 'Shift-คลิกเพื่อเลือกหลายองค์ประกอบ จากนั้นตัวตรวจสอบจะแก้ไของค์ประกอบเหล่านั้นพร้อมกัน',
+  'help.guide.studio-properties.tip.1':
+    'Shift-คลิกเพื่อเลือกหลายองค์ประกอบ จากนั้นตัวตรวจสอบจะแก้ไของค์ประกอบเหล่านั้นพร้อมกัน',
   'help.guide.studio-properties.tip.2':
     'การแก้ไของค์ประกอบที่เค้าโครงอัตโนมัติจัดวางไว้จะตัดการเชื่อมโยงกับรายการ องค์ประกอบจะไม่อัปเดตตามการเปลี่ยนแปลงของรายการนั้นอีก',
   // studio-format
@@ -836,8 +919,10 @@ const help: TranslationStrings = {
   'help.guide.studio-format.step.1': 'คลิก รูปแบบหน้า ในแถบด้านบน',
   'help.guide.studio-format.step.2':
     'เลือก สี่เหลี่ยมจัตุรัส 21 × 21 ซม, สี่เหลี่ยมจัตุรัส 30 × 30 ซม, A4 หรือ A5 แนวนอนหรือแนวตั้ง หรือกรอกความกว้างและความสูงเองเป็นมิลลิเมตร ระยะตัดตกและระยะขอบปลอดภัยอยู่ด้านล่าง',
-  'help.guide.studio-format.result': 'ทุกหน้าคู่จะวาดตามขนาดนั้น โดยค่าเริ่มต้นมีระยะตัดตก 3 มม. และระยะขอบปลอดภัย 5 มม.',
-  'help.guide.studio-format.tip.1': 'เปลี่ยนรูปแบบก่อน แล้วค่อยใช้ เค้าโครงอัตโนมัติ เพราะเค้าโครงจะสร้างตามขนาดที่มีอยู่ตอนนั้น',
+  'help.guide.studio-format.result':
+    'ทุกหน้าคู่จะวาดตามขนาดนั้น โดยค่าเริ่มต้นมีระยะตัดตก 3 มม. และระยะขอบปลอดภัย 5 มม.',
+  'help.guide.studio-format.tip.1':
+    'เปลี่ยนรูปแบบก่อน แล้วค่อยใช้ เค้าโครงอัตโนมัติ เพราะเค้าโครงจะสร้างตามขนาดที่มีอยู่ตอนนั้น',
   'help.guide.studio-format.tip.2': 'สอบถามค่าระยะตัดตกและระยะขอบปลอดภัยจากโรงพิมพ์ของคุณ แล้วกรอกค่าเหล่านั้น',
   // studio-export
   'help.guide.studio-export.title': 'ส่งออกหนังสือเป็น PDF',
@@ -845,7 +930,8 @@ const help: TranslationStrings = {
   'help.guide.studio-export.step.1': 'คลิก ส่งออก ในแถบด้านบน',
   'help.guide.studio-export.step.2':
     'เลือก หน้าเดียว คือหนึ่งหน้าต่อแผ่นตามลำดับการอ่าน ซึ่งเป็นแบบที่โรงพิมพ์ต้องการ หรือ สเปรด คือครั้งละสองหน้าแบบที่หนังสือเปิดออก เครื่องหมายครอบตัด จะเพิ่มระยะตัดตกทุกขอบและทำเครื่องหมายตำแหน่งที่ต้องตัด',
-  'help.guide.studio-export.step.3': 'คลิก มุมมองการพิมพ์ เบราว์เซอร์จะเปิดหน้าต่างๆ ขึ้นมา และ บันทึกเป็น PDF จะแปลงเป็นไฟล์',
+  'help.guide.studio-export.step.3':
+    'คลิก มุมมองการพิมพ์ เบราว์เซอร์จะเปิดหน้าต่างๆ ขึ้นมา และ บันทึกเป็น PDF จะแปลงเป็นไฟล์',
   'help.guide.studio-export.result': 'ได้ PDF ที่มีจำนวนแผ่นตามที่กล่องโต้ตอบแจ้งไว้ ในรูปแบบหน้าที่คุณตั้งไว้',
   'help.guide.studio-export.tip.1': 'การสร้าง PDF ทำได้บนเดสก์ท็อปเท่านั้น เช่นเดียวกับตัวสตูดิโอเอง',
   'help.guide.studio-export.tip.2':
@@ -855,8 +941,10 @@ const help: TranslationStrings = {
   'help.guide.studio-spread-file.goal': 'นำดีไซน์ที่คุณชอบจากหนังสือของบันทึกการเดินทางหนึ่งไปใช้กับอีกเล่ม',
   'help.guide.studio-spread-file.step.1':
     'เมื่อหน้าคู่อยู่บนพื้นที่ทำงาน คลิก ดาวน์โหลดสเปรดนี้ ที่ปลายขวาของแถบซูม ไฟล์จะเก็บดีไซน์ ไม่ใช่รูปถ่าย',
-  'help.guide.studio-spread-file.step.2': 'ในหนังสืออีกเล่ม เปิด หน้า แล้วคลิก นำเข้า ข้าง เพิ่มหน้าคู่ จากนั้นเลือกไฟล์',
-  'help.guide.studio-spread-file.result': 'หน้าคู่จะมาพร้อมกรอบและสไตล์ข้อความ วางรูปภาพของบันทึกการเดินทางใหม่ลงในกรอบได้เลย',
+  'help.guide.studio-spread-file.step.2':
+    'ในหนังสืออีกเล่ม เปิด หน้า แล้วคลิก นำเข้า ข้าง เพิ่มหน้าคู่ จากนั้นเลือกไฟล์',
+  'help.guide.studio-spread-file.result':
+    'หน้าคู่จะมาพร้อมกรอบและสไตล์ข้อความ วางรูปภาพของบันทึกการเดินทางใหม่ลงในกรอบได้เลย',
   'help.guide.studio-spread-file.tip.1': 'ไฟล์ที่ไม่ใช่ดีไซน์หน้าคู่จะถูกปฏิเสธพร้อมแจ้งเหตุผล',
 
   // ── Screen: settings (all tabs) ────────────────────────────────────────────
@@ -869,11 +957,13 @@ const help: TranslationStrings = {
     'ทั่วไป คือภาษา หน่วย สกุลเงิน และหน้าที่แอปเปิดขึ้นมา ลักษณะที่ปรากฏ คือธีม สี ขนาดข้อความ และวิดเจ็ตแดชบอร์ด',
   'help.ctx.settings.bullet.3':
     'แผนที่ ใช้เลือกตัวเรนเดอร์และสไตล์ การแจ้งเตือน คือช่องทางที่ติดต่อคุณ การเชื่อมต่อ คือคลังรูปภาพ คีย์ API และ MCP ส่วน ออฟไลน์ คือสิ่งที่แอปเก็บไว้บนอุปกรณ์นี้',
-  'help.ctx.settings.bullet.4': 'บัญชี มีโปรไฟล์ รหัสผ่าน การรับรองความถูกต้องด้วยสองปัจจัย พาสคีย์ และการลบบัญชีของคุณ',
+  'help.ctx.settings.bullet.4':
+    'บัญชี มีโปรไฟล์ รหัสผ่าน การรับรองความถูกต้องด้วยสองปัจจัย พาสคีย์ และการลบบัญชีของคุณ',
   'help.ctx.settings-display.title': 'ทั่วไป',
   'help.ctx.settings-display.summary':
     'ภาษา หน่วย และสกุลเงิน การทำงานของแผนที่และการจอง และหน้าที่ TREK เปิดขึ้นมา การเปลี่ยนแปลงทุกอย่างที่นี่มีผลทันที',
-  'help.ctx.settings-display.bullet.1': 'ภาษาและภูมิภาค: ภาษาของอินเทอร์เฟซ รูปแบบเวลา วันแรกของสัปดาห์ สกุลเงินที่แสดง และหน่วยระยะทางและอุณหภูมิ',
+  'help.ctx.settings-display.bullet.1':
+    'ภาษาและภูมิภาค: ภาษาของอินเทอร์เฟซ รูปแบบเวลา วันแรกของสัปดาห์ สกุลเงินที่แสดง และหน่วยระยะทางและอุณหภูมิ',
   'help.ctx.settings-display.bullet.2':
     'การเดินทางและแผนที่: แสดงเส้นทางการจองบนแผนที่เสมอ ปุ่มสำรวจสถานที่ การเพิ่มประสิทธิภาพเส้นทางจากที่พัก รหัสการจองแบบเบลอ และป้ายกำกับเส้นทางการจอง',
   'help.ctx.settings-display.bullet.3':
@@ -881,17 +971,22 @@ const help: TranslationStrings = {
   'help.ctx.settings-appearance.title': 'ลักษณะที่ปรากฏ',
   'help.ctx.settings-appearance.summary':
     'รูปลักษณ์ของ TREK ในบัญชีนี้: สว่างหรือมืด สีเน้น เอฟเฟกต์กระจกและการเคลื่อนไหว ขนาดข้อความ และวิดเจ็ตที่แดชบอร์ดแสดง ทุกอย่างมีผลทันทีบนทุกอุปกรณ์ที่คุณลงชื่อเข้าใช้',
-  'help.ctx.settings-appearance.bullet.1': 'ธีม: สว่าง, มืด หรือ อัตโนมัติ และ โทนสี พร้อม สำเนียงที่กำหนดเอง ตามที่คุณเลือกเอง',
+  'help.ctx.settings-appearance.bullet.1':
+    'ธีม: สว่าง, มืด หรือ อัตโนมัติ และ โทนสี พร้อม สำเนียงที่กำหนดเอง ตามที่คุณเลือกเอง',
   'help.ctx.settings-appearance.bullet.2':
     'ความสามารถในการอ่าน: ความโปร่งใส, ลดการเคลื่อนไหว, ความหนาแน่น และ ขนาดข้อความ พร้อมขนาดขั้นสูงแยกตามระดับ',
-  'help.ctx.settings-appearance.bullet.3': 'วิดเจ็ตแดชบอร์ด: สวิตช์หนึ่งตัวต่อหนึ่งวิดเจ็ต แยกสำหรับ เดสก์ท็อป และ มือถือ',
+  'help.ctx.settings-appearance.bullet.3':
+    'วิดเจ็ตแดชบอร์ด: สวิตช์หนึ่งตัวต่อหนึ่งวิดเจ็ต แยกสำหรับ เดสก์ท็อป และ มือถือ',
   'help.ctx.settings-appearance.bullet.4': 'รีเซ็ตเป็นค่าเริ่มต้น ที่ด้านล่างจะคืนค่าทุกอย่าง',
   'help.ctx.settings-map.title': 'แผนที่',
   'help.ctx.settings-map.summary':
     'เอนจินที่ใช้วาดแผนที่และสไตล์ที่ใช้ Leaflet คือแผนที่แรสเตอร์แบบคลาสสิก MapLibre วาดไทล์เวกเตอร์โดยไม่ต้องใช้โทเค็น ส่วน Mapbox เพิ่มอาคาร 3 มิติและภูมิประเทศด้วยโทเค็นของคุณเอง',
-  'help.ctx.settings-map.bullet.1': 'ผู้ให้บริการแผนที่: Leaflet, MapLibre หรือ Mapbox แต่ละตัวมีคำอธิบายสั้นๆ ว่าต้องใช้อะไร',
-  'help.ctx.settings-map.bullet.2': 'รูปแบบแผนที่ และ แม่แบบแผนที่: รูปลักษณ์ของไทล์ พร้อมโทเค็นหรือคีย์ที่ผู้ให้บริการต้องการ',
-  'help.ctx.settings-map.bullet.3': 'โหมดคุณภาพสูง สำหรับการลดรอยหยักและการฉายภาพแบบลูกโลก บันทึกแผนที่ จะบันทึกตัวเลือก',
+  'help.ctx.settings-map.bullet.1':
+    'ผู้ให้บริการแผนที่: Leaflet, MapLibre หรือ Mapbox แต่ละตัวมีคำอธิบายสั้นๆ ว่าต้องใช้อะไร',
+  'help.ctx.settings-map.bullet.2':
+    'รูปแบบแผนที่ และ แม่แบบแผนที่: รูปลักษณ์ของไทล์ พร้อมโทเค็นหรือคีย์ที่ผู้ให้บริการต้องการ',
+  'help.ctx.settings-map.bullet.3':
+    'โหมดคุณภาพสูง สำหรับการลดรอยหยักและการฉายภาพแบบลูกโลก บันทึกแผนที่ จะบันทึกตัวเลือก',
   'help.ctx.settings-notifications.title': 'การแจ้งเตือน',
   'help.ctx.settings-notifications.summary':
     'ช่องทางที่ TREK ติดต่อคุณนอกแอป: การแจ้งเตือนแบบพุชบนอุปกรณ์นี้, หัวข้อ ntfy, เว็บฮุค หรือช่องทางที่ปลั๊กอินให้มา ใต้ช่องทางต่างๆ จะมีหนึ่งแถวต่อหนึ่งเหตุการณ์เพื่อกำหนดว่าจะส่งอะไรไปที่ไหน',
@@ -907,8 +1002,10 @@ const help: TranslationStrings = {
     'ทุกสิ่งที่เชื่อมต่อกับ TREK จากภายนอก: คลังรูปภาพสำหรับบันทึกการเดินทาง คีย์ API สำหรับสคริปต์ และจุดสิ้นสุด MCP พร้อมโทเค็นและไคลเอ็นต์ OAuth สำหรับผู้ช่วย AI',
   'help.ctx.settings-integrations.bullet.1':
     'ผู้ให้บริการรูปภาพ: Immich และ Synology Photos แต่ละตัวมี URL และคีย์ ทดสอบการเชื่อมต่อ และ บันทึก',
-  'help.ctx.settings-integrations.bullet.2': 'คีย์ API: คีย์ส่วนตัวสำหรับสคริปต์และเครื่องมืออื่นที่เรียกใช้ TREK API ในนามของคุณ',
-  'help.ctx.settings-integrations.bullet.3': 'การกำหนดค่า MCP: จุดสิ้นสุด การกำหนดค่าไคลเอ็นต์สำเร็จรูปให้คัดลอก และโทเค็น API',
+  'help.ctx.settings-integrations.bullet.2':
+    'คีย์ API: คีย์ส่วนตัวสำหรับสคริปต์และเครื่องมืออื่นที่เรียกใช้ TREK API ในนามของคุณ',
+  'help.ctx.settings-integrations.bullet.3':
+    'การกำหนดค่า MCP: จุดสิ้นสุด การกำหนดค่าไคลเอ็นต์สำเร็จรูปให้คัดลอก และโทเค็น API',
   'help.ctx.settings-integrations.bullet.4':
     'ลูกค้า OAuth 2.1: แอปที่เข้าสู่ระบบผ่าน TREK พร้อม URI สำหรับเปลี่ยนเส้นทาง ขอบเขตที่อนุญาต ไคลเอ็นต์แบบเครื่อง และเซสชันที่ใช้งานอยู่',
   'help.ctx.settings-offline.title': 'ออฟไลน์',
@@ -928,12 +1025,15 @@ const help: TranslationStrings = {
   'help.ctx.settings-account.bullet.2': 'เปลี่ยนรหัสผ่าน: รหัสผ่านปัจจุบัน รหัสผ่านใหม่สองครั้ง แล้ว อัปเดตรหัสผ่าน',
   'help.ctx.settings-account.bullet.3':
     'การรับรองความถูกต้องด้วยสองปัจจัย (2FA) ด้วยแอปยืนยันตัวตนและรหัสสำรอง ส่วน พาสคีย์ ใช้สำหรับลงชื่อเข้าใช้โดยไม่ต้องใช้รหัสผ่าน',
-  'help.ctx.settings-account.bullet.4': 'ลบบัญชี อยู่ที่ด้านล่างและต้องยืนยันก่อน ผู้ดูแลระบบคนสุดท้ายไม่สามารถลบตัวเองได้',
+  'help.ctx.settings-account.bullet.4':
+    'ลบบัญชี อยู่ที่ด้านล่างและต้องยืนยันก่อน ผู้ดูแลระบบคนสุดท้ายไม่สามารถลบตัวเองได้',
   // language-region
   'help.guide.language-region.title': 'ตั้งค่าภาษา หน่วย และสกุลเงิน',
   'help.guide.language-region.goal': 'ให้ TREK ใช้ภาษาของคุณและนับแบบที่คุณคุ้นเคย',
-  'help.guide.language-region.step.1': 'เลือกภาษาของอินเทอร์เฟซใน ภาษาและภูมิภาค TREK จะเปลี่ยนทันทีบนทุกอุปกรณ์ที่คุณลงชื่อเข้าใช้',
-  'help.guide.language-region.step.2': 'ด้านล่างนั้น เลือกรูปแบบเวลา วันเริ่มต้นสัปดาห์ในตัวเลือกวันที่ทั้งหมด สกุลเงินที่แสดง และหน่วยระยะทางและอุณหภูมิ',
+  'help.guide.language-region.step.1':
+    'เลือกภาษาของอินเทอร์เฟซใน ภาษาและภูมิภาค TREK จะเปลี่ยนทันทีบนทุกอุปกรณ์ที่คุณลงชื่อเข้าใช้',
+  'help.guide.language-region.step.2':
+    'ด้านล่างนั้น เลือกรูปแบบเวลา วันเริ่มต้นสัปดาห์ในตัวเลือกวันที่ทั้งหมด สกุลเงินที่แสดง และหน่วยระยะทางและอุณหภูมิ',
   'help.guide.language-region.result':
     'วันที่ ระยะทาง และจำนวนเงินจะแสดงตามที่คุณคาดไว้ สกุลเงินของทริปเองยังแสดงข้างจำนวนเงินที่แปลงแล้ว',
   'help.guide.language-region.tip.1': 'สกุลเงินที่แสดงใช้สำหรับยอดรวมข้ามทริป แต่ละทริปยังคงใช้สกุลเงินที่คุณกำหนดไว้',
@@ -946,7 +1046,8 @@ const help: TranslationStrings = {
   'help.guide.travel-map-prefs.step.2':
     'รหัสการจองเบลอ จะซ่อนหมายเลขยืนยันจนกว่าคุณจะวางเมาส์ ส่วน ป้ายกำกับเส้นทางการจอง จะเขียนชื่อการจองไว้ตามเส้นทาง',
   'help.guide.travel-map-prefs.result': 'แผนที่ทริปจะเป็นไปตามการตั้งค่าเหล่านี้ในทุกทริป จนกว่าคุณจะสลับกลับ',
-  'help.guide.travel-map-prefs.tip.1': 'การตั้งค่าเหล่านี้เป็นของแต่ละบัญชี ไม่ใช่แต่ละทริป สมาชิกของทริปที่แชร์จะเห็นตามตัวเลือกของตนเอง',
+  'help.guide.travel-map-prefs.tip.1':
+    'การตั้งค่าเหล่านี้เป็นของแต่ละบัญชี ไม่ใช่แต่ละทริป สมาชิกของทริปที่แชร์จะเห็นตามตัวเลือกของตนเอง',
   // startup
   'help.guide.startup.title': 'เลือกหน้าที่ TREK เปิดขึ้นมา',
   'help.guide.startup.goal': 'ไปยังที่ที่คุณใช้งานบ่อยที่สุด แทนที่จะเป็นแดชบอร์ดทุกครั้ง',
@@ -958,7 +1059,8 @@ const help: TranslationStrings = {
   'help.guide.theme-scheme.title': 'ตั้งค่าธีมและสีเน้น',
   'help.guide.theme-scheme.goal': 'ทำให้ TREK สว่าง มืด หรือเป็นไปตามอุปกรณ์ของคุณ ด้วยสีที่คุณชอบ',
   'help.guide.theme-scheme.step.1': 'ใน ธีม เลือก สว่าง, มืด หรือ อัตโนมัติ โดย อัตโนมัติ จะเป็นไปตามอุปกรณ์ของคุณ',
-  'help.guide.theme-scheme.step.2': 'เลือก โทนสี: ค่าเริ่มต้น, คอนทราสต์สูง, สีคราม, นกเป็ดน้ำ, โรส, อำพัน, สีม่วง หรือ กำหนดเอง',
+  'help.guide.theme-scheme.step.2':
+    'เลือก โทนสี: ค่าเริ่มต้น, คอนทราสต์สูง, สีคราม, นกเป็ดน้ำ, โรส, อำพัน, สีม่วง หรือ กำหนดเอง',
   'help.guide.theme-scheme.step.3':
     'เมื่อเลือก กำหนดเอง ให้เลือกสีเน้นจากค่าที่ตั้งไว้ล่วงหน้าหรือกรอกสีของคุณเอง การตรวจสอบคอนทราสต์ข้างๆ จะบอกว่าข้อความยังอ่านได้หรือไม่',
   'help.guide.theme-scheme.result': 'ปุ่ม ลิงก์ และไฮไลต์จะใช้สีเน้นทุกที่ บนทุกอุปกรณ์ที่คุณลงชื่อเข้าใช้',
@@ -973,7 +1075,8 @@ const help: TranslationStrings = {
     'ขนาดข้อความ ปรับ ทุกอย่าง พร้อมกัน ส่วน ขนาดข้อความขั้นสูง ให้หัวเรื่อง หัวเรื่องรอง เนื้อหา และคำบรรยายมีขนาดต่างกันได้',
   'help.guide.readability.result': 'ทั้งแอปจะเปลี่ยนตามทันที รวมถึงแผงแผนที่และบันทึกการเดินทาง',
   'help.guide.readability.tip.1': 'ลดการเคลื่อนไหว จะเป็นไปตามการตั้งค่าของระบบด้วยหากคุณไม่ได้ปรับเอง',
-  'help.guide.readability.tip.2': 'ขนาดข้อความถูกใช้ผ่านระดับตัวอักษร จึงไม่มีสิ่งใดถูกตัด ขนาดที่ไม่พอดีจะขึ้นบรรทัดใหม่',
+  'help.guide.readability.tip.2':
+    'ขนาดข้อความถูกใช้ผ่านระดับตัวอักษร จึงไม่มีสิ่งใดถูกตัด ขนาดที่ไม่พอดีจะขึ้นบรรทัดใหม่',
   // dashboard-widgets
   'help.guide.dashboard-widgets.title': 'เลือกวิดเจ็ตแดชบอร์ด',
   'help.guide.dashboard-widgets.goal': 'แสดงเฉพาะวิดเจ็ตที่คุณใช้ แยกกันบนเดสก์ท็อปและบนโทรศัพท์',
@@ -991,20 +1094,25 @@ const help: TranslationStrings = {
   'help.guide.map-provider.step.2':
     'เลือก รูปแบบแผนที่ หรือ แม่แบบแผนที่ สำหรับรูปลักษณ์ Mapbox ต้องใช้ โทเค็นการเข้าถึง Mapbox และสไตล์แรสเตอร์บางแบบต้องใช้ คีย์ CARTO API ลิงก์ข้างช่องจะพาไปยังที่ที่คุณขอรับได้',
   'help.guide.map-provider.step.3': 'โหมดคุณภาพสูง จะเพิ่มการลดรอยหยักและการฉายภาพแบบลูกโลก คลิก บันทึกแผนที่',
-  'help.guide.map-provider.result': 'ทุกแผนที่ใน TREK ไม่ว่าจะเป็นทริป, แผนที่, คอลเลกชัน หรือบันทึกการเดินทาง จะวาดด้วยเอนจินที่คุณเลือก',
+  'help.guide.map-provider.result':
+    'ทุกแผนที่ใน TREK ไม่ว่าจะเป็นทริป, แผนที่, คอลเลกชัน หรือบันทึกการเดินทาง จะวาดด้วยเอนจินที่คุณเลือก',
   'help.guide.map-provider.tip.1': 'หากไม่มีโทเค็น Mapbox จะกลับไปใช้แผนที่เริ่มต้นแทนที่จะไม่แสดงอะไรเลย',
   'help.guide.map-provider.tip.2': 'แผ่นแผนที่ที่คุณเก็บไว้แบบออฟไลน์มาจากผู้ให้บริการที่ใช้งานอยู่ตอนที่คุณดาวน์โหลด',
   // notification-channels
   'help.guide.notification-channels.title': 'ตั้งค่าช่องทางรับการแจ้งเตือน',
-  'help.guide.notification-channels.goal': 'รับการแจ้งเตือนทริปและเหตุการณ์การทำงานร่วมกันบนโทรศัพท์หรือในเครื่องมืออื่น',
+  'help.guide.notification-channels.goal':
+    'รับการแจ้งเตือนทริปและเหตุการณ์การทำงานร่วมกันบนโทรศัพท์หรือในเครื่องมืออื่น',
   'help.guide.notification-channels.step.1':
     'ใน การแจ้งเตือน กรอก หัวข้อ NTF และเพิ่ม URL เซิร์ฟเวอร์ ntfy กับโทเค็นการเข้าถึงของคุณเองหากคุณมีเซิร์ฟเวอร์ ทดสอบ จะส่งข้อความทันที',
-  'help.guide.notification-channels.step.2': 'หรือระบุ URL ของเว็บฮุค ที่รับทุกเหตุการณ์เป็น JSON แล้ว ทดสอบ ด้วยวิธีเดียวกัน',
+  'help.guide.notification-channels.step.2':
+    'หรือระบุ URL ของเว็บฮุค ที่รับทุกเหตุการณ์เป็น JSON แล้ว ทดสอบ ด้วยวิธีเดียวกัน',
   'help.guide.notification-channels.step.3':
     'ในแถวด้านล่าง เปิดหรือปิดแต่ละเหตุการณ์ตามช่องทาง ช่องทางของปลั๊กอินจะแสดง กำหนดค่า จนกว่าจะตั้งค่าในการตั้งค่าของปลั๊กอิน ส่วน ส่งแบบทดสอบ จะลองส่งหนึ่งข้อความ',
-  'help.guide.notification-channels.result': 'เหตุการณ์จะถูกส่งออกผ่านช่องทางที่เปิดไว้ กระดิ่งในแถบนำทางยังคงแสดงเหตุการณ์ในแอปเสมอ',
+  'help.guide.notification-channels.result':
+    'เหตุการณ์จะถูกส่งออกผ่านช่องทางที่เปิดไว้ กระดิ่งในแถบนำทางยังคงแสดงเหตุการณ์ในแอปเสมอ',
   'help.guide.notification-channels.tip.1': 'การตั้งค่าแยกตามทริปอยู่ที่ตัวทริปเอง ในการตั้งค่าการแจ้งเตือนของทริป',
-  'help.guide.notification-channels.tip.2': 'ผู้ดูแลระบบสามารถกรอกเซิร์ฟเวอร์ ntfy เริ่มต้นไว้ให้ทุกคนได้ แต่คุณยังเลือกหัวข้อของคุณเอง',
+  'help.guide.notification-channels.tip.2':
+    'ผู้ดูแลระบบสามารถกรอกเซิร์ฟเวอร์ ntfy เริ่มต้นไว้ให้ทุกคนได้ แต่คุณยังเลือกหัวข้อของคุณเอง',
   // photo-providers
   'help.guide.photo-providers.title': 'เชื่อมต่อคลังรูปภาพ',
   'help.guide.photo-providers.goal': 'ให้บันทึกการเดินทางดึงรูปภาพของวันนั้นจาก Immich หรือ Synology Photos',
@@ -1019,8 +1127,10 @@ const help: TranslationStrings = {
   'help.guide.api-keys.title': 'สร้างคีย์ API',
   'help.guide.api-keys.goal': 'ให้สคริปต์หรือเครื่องมืออื่นเรียกใช้ TREK API ในนามของคุณ',
   'help.guide.api-keys.step.1': 'ใน คีย์ API คลิก สร้างคีย์ แล้วตั้งชื่อที่บอกว่าจะใช้คีย์นี้ที่ไหน',
-  'help.guide.api-keys.step.2': 'คัดลอกคีย์จากกล่องโต้ตอบ: คีย์จะแสดงเพียงครั้งเดียว ลบคีย์ออกจากรายการเมื่อเครื่องมือนั้นไม่ต้องใช้แล้ว',
-  'help.guide.api-keys.result': 'คำขอที่ใช้คีย์นั้นจะทำงานด้วยสิทธิ์ของคุณ รายการจะแสดงว่าแต่ละคีย์สร้างขึ้นและใช้ครั้งสุดท้ายเมื่อใด',
+  'help.guide.api-keys.step.2':
+    'คัดลอกคีย์จากกล่องโต้ตอบ: คีย์จะแสดงเพียงครั้งเดียว ลบคีย์ออกจากรายการเมื่อเครื่องมือนั้นไม่ต้องใช้แล้ว',
+  'help.guide.api-keys.result':
+    'คำขอที่ใช้คีย์นั้นจะทำงานด้วยสิทธิ์ของคุณ รายการจะแสดงว่าแต่ละคีย์สร้างขึ้นและใช้ครั้งสุดท้ายเมื่อใด',
   'help.guide.api-keys.tip.1': 'ใช้หนึ่งคีย์ต่อหนึ่งเครื่องมือเพื่อให้เพิกถอนได้ง่าย',
   'help.guide.api-keys.tip.2': 'สำหรับผู้ช่วย AI ให้ใช้ MCP กับ OAuth แทน คีย์ API มีไว้สำหรับไคลเอ็นต์ HTTP ทั่วไป',
   // mcp-oauth
@@ -1032,7 +1142,8 @@ const help: TranslationStrings = {
     'ไคลเอ็นต์ที่เข้าสู่ระบบผ่านเบราว์เซอร์ใช้ OAuth 2.1: ไคลเอ็นต์ใหม่ ใน ลูกค้า OAuth 2.1 พร้อม เปลี่ยนเส้นทาง URI, ขอบเขตที่อนุญาต และสำหรับเซิร์ฟเวอร์ที่ไม่มีเบราว์เซอร์ ให้ใช้ไคลเอ็นต์แบบ เครื่อง',
   'help.guide.mcp-oauth.step.3':
     'หมุนความลับ และ ลบไคลเอ็นต์ อยู่ที่แต่ละไคลเอ็นต์ เซสชัน OAuth ที่ใช้งานอยู่ แสดงสิ่งที่ลงชื่อเข้าใช้อยู่และให้คุณเพิกถอนได้ ส่วน โทเค็น API พร้อม สร้างโทเค็นใหม่ เป็นวิธีเชื่อมต่อแบบเก่า',
-  'help.guide.mcp-oauth.result': 'ไคลเอ็นต์จะอ่านและเปลี่ยนแปลงสิ่งที่ขอบเขตอนุญาตในนามของคุณ และทุกการกระทำจะแสดงภายใต้ชื่อของคุณ',
+  'help.guide.mcp-oauth.result':
+    'ไคลเอ็นต์จะอ่านและเปลี่ยนแปลงสิ่งที่ขอบเขตอนุญาตในนามของคุณ และทุกการกระทำจะแสดงภายใต้ชื่อของคุณ',
   'help.guide.mcp-oauth.tip.1': 'ขอบเขตคือตาข่ายนิรภัย: ให้ไคลเอ็นต์มีเพียงขอบเขตการอ่านจนกว่าจะต้องการมากกว่านั้น',
   'help.guide.mcp-oauth.tip.2': 'ผู้ดูแลระบบสามารถปิด MCP สำหรับทั้งอินสแตนซ์ได้ เมื่อนั้นส่วนนี้จะไม่แสดง',
   // offline-prepare
@@ -1042,13 +1153,16 @@ const help: TranslationStrings = {
     'ใน สิ่งที่จะจัดเก็บแบบออฟไลน์ เปิด จัดเก็บแผ่นแผนที่แบบออฟไลน์ ไว้ และเปิดทริปที่คุณต้องการเก็บไว้บนอุปกรณ์นี้',
   'help.guide.offline-prepare.step.2':
     'คลิก ดาวน์โหลดเพื่อใช้แบบออฟไลน์ ใน เตรียมความพร้อมสำหรับออฟไลน์ ระบบจะดึงทริปและแผ่นแผนที่รอบสถานที่ต่างๆ ของทริป',
-  'help.guide.offline-prepare.step.3': 'บังคับโหมดออฟไลน์ ใน โหมดออฟไลน์ ช่วยให้คุณตรวจสอบว่าทุกอย่างพร้อมก่อนออกเดินทาง',
-  'help.guide.offline-prepare.result': 'ทริปจะเปิดได้โดยไม่ต้องเชื่อมต่อ การเปลี่ยนแปลงที่คุณทำจะรออยู่ในคิวและส่งออกไปเมื่อเชื่อมต่อใหม่',
+  'help.guide.offline-prepare.step.3':
+    'บังคับโหมดออฟไลน์ ใน โหมดออฟไลน์ ช่วยให้คุณตรวจสอบว่าทุกอย่างพร้อมก่อนออกเดินทาง',
+  'help.guide.offline-prepare.result':
+    'ทริปจะเปิดได้โดยไม่ต้องเชื่อมต่อ การเปลี่ยนแปลงที่คุณทำจะรออยู่ในคิวและส่งออกไปเมื่อเชื่อมต่อใหม่',
   'help.guide.offline-prepare.tip.1': 'แผ่นแผนที่ใช้พื้นที่มากที่สุด: ส่วน แคชออฟไลน์ แสดงสิ่งที่จัดเก็บไว้แยกตามทริป',
   'help.guide.offline-prepare.tip.2': 'ติดตั้ง TREK เป็นแอปจากเบราว์เซอร์เพื่อให้เริ่มใช้งานแบบออฟไลน์ได้ราบรื่นที่สุด',
   // offline-conflicts
   'help.guide.offline-conflicts.title': 'กำหนดว่าฝั่งใดชนะเมื่อเกิดข้อขัดแย้งในการซิงค์',
-  'help.guide.offline-conflicts.goal': 'เลือกวิธีที่ TREK จัดการการเปลี่ยนแปลงที่ทำขณะออฟไลน์กับการเปลี่ยนแปลงที่ทำจากที่อื่น',
+  'help.guide.offline-conflicts.goal':
+    'เลือกวิธีที่ TREK จัดการการเปลี่ยนแปลงที่ทำขณะออฟไลน์กับการเปลี่ยนแปลงที่ทำจากที่อื่น',
   'help.guide.offline-conflicts.step.1':
     'ใน ข้อขัดแย้งในการซิงค์ เลือก ถามผมทุกครั้ง, คงเวอร์ชันของฉันไว้เสมอ หรือ คงเวอร์ชันเซิร์ฟเวอร์ไว้เสมอ',
   'help.guide.offline-conflicts.step.2':
@@ -1059,7 +1173,8 @@ const help: TranslationStrings = {
   // profile
   'help.guide.profile.title': 'เปลี่ยนโปรไฟล์ของคุณ',
   'help.guide.profile.goal': 'อัปเดตชื่อ อีเมล และรูปภาพของคุณ',
-  'help.guide.profile.step.1': 'ใน บัญชี แก้ไข ชื่อผู้ใช้ และ อีเมล รูปประจำตัวรองรับการอัปโหลดรูปของคุณเอง ลบรูปออกเพื่อกลับไปใช้ตัวอักษรย่อ',
+  'help.guide.profile.step.1':
+    'ใน บัญชี แก้ไข ชื่อผู้ใช้ และ อีเมล รูปประจำตัวรองรับการอัปโหลดรูปของคุณเอง ลบรูปออกเพื่อกลับไปใช้ตัวอักษรย่อ',
   'help.guide.profile.step.2': 'คลิก บันทึกโปรไฟล์',
   'help.guide.profile.result': 'ชื่อและรูปภาพของคุณจะอัปเดตทุกที่ทันที รวมถึงในทริปที่คุณแชร์',
   'help.guide.profile.tip.1': 'บัญชีที่ลงชื่อเข้าใช้ผ่าน OIDC จะแสดงข้อมูลนั้นที่นี่ และอีเมลจะมาจากผู้ให้บริการ',
@@ -1074,33 +1189,41 @@ const help: TranslationStrings = {
   'help.guide.mfa.title': 'เปิดการรับรองความถูกต้องด้วยสองปัจจัย',
   'help.guide.mfa.goal': 'ปกป้องบัญชีด้วยรหัสจากแอปยืนยันตัวตน',
   'help.guide.mfa.step.1': 'ใน การรับรองความถูกต้องด้วยสองปัจจัย (2FA) คลิก ตั้งค่าเครื่องยืนยันตัวตน',
-  'help.guide.mfa.step.2': 'สแกน QR โค้ดด้วยแอปของคุณ หรือกรอกรหัสลับด้วยตนเอง จากนั้นพิมพ์รหัสหกหลักที่แอปแสดงแล้วคลิก เปิดใช้งาน 2FA',
-  'help.guide.mfa.step.3': 'บันทึกรหัสสำรอง: คัดลอก ดาวน์โหลด หรือพิมพ์ออกมา แต่ละรหัสใช้ได้ครั้งเดียว สำหรับตอนที่คุณไม่มีโทรศัพท์อยู่ใกล้มือ',
+  'help.guide.mfa.step.2':
+    'สแกน QR โค้ดด้วยแอปของคุณ หรือกรอกรหัสลับด้วยตนเอง จากนั้นพิมพ์รหัสหกหลักที่แอปแสดงแล้วคลิก เปิดใช้งาน 2FA',
+  'help.guide.mfa.step.3':
+    'บันทึกรหัสสำรอง: คัดลอก ดาวน์โหลด หรือพิมพ์ออกมา แต่ละรหัสใช้ได้ครั้งเดียว สำหรับตอนที่คุณไม่มีโทรศัพท์อยู่ใกล้มือ',
   'help.guide.mfa.result': 'การลงชื่อเข้าใช้ทุกครั้งจะขอรหัสหลังจากรหัสผ่าน',
   'help.guide.mfa.tip.1': 'ปิดการใช้งาน 2FA ต้องใช้รหัสผ่านและรหัสปัจจุบัน',
   'help.guide.mfa.tip.2': 'ผู้ดูแลระบบสามารถบังคับใช้ 2FA กับทุกคนได้ ในกรณีนั้นจะปิดที่นี่ไม่ได้',
   // passkeys
   'help.guide.passkeys.title': 'เข้าสู่ระบบด้วยพาสคีย์',
   'help.guide.passkeys.goal': 'ใช้ลายนิ้วมือ ใบหน้า หรือ PIN ของอุปกรณ์แทนรหัสผ่าน',
-  'help.guide.passkeys.step.1': 'ใน พาสคีย์ คลิก เพิ่มรหัสผ่าน แล้วยืนยันด้วยอุปกรณ์ของคุณ ตั้งชื่อที่บอกว่าเป็นอุปกรณ์ใด',
+  'help.guide.passkeys.step.1':
+    'ใน พาสคีย์ คลิก เพิ่มรหัสผ่าน แล้วยืนยันด้วยอุปกรณ์ของคุณ ตั้งชื่อที่บอกว่าเป็นอุปกรณ์ใด',
   'help.guide.passkeys.step.2': 'รายการจะแสดงทุกพาสคีย์พร้อมชื่อและเวลาที่ใช้ครั้งล่าสุด ปุ่มลบจะลบพาสคีย์ออก',
   'help.guide.passkeys.result': 'หน้าลงชื่อเข้าใช้จะเสนอพาสคีย์ให้ใช้ ส่วนรหัสผ่านยังคงเป็นทางสำรอง',
-  'help.guide.passkeys.tip.1': 'พาสคีย์อยู่บนอุปกรณ์หรือในตัวจัดการรหัสผ่านของอุปกรณ์ ดังนั้นควรเพิ่มหนึ่งพาสคีย์ต่อหนึ่งอุปกรณ์',
+  'help.guide.passkeys.tip.1':
+    'พาสคีย์อยู่บนอุปกรณ์หรือในตัวจัดการรหัสผ่านของอุปกรณ์ ดังนั้นควรเพิ่มหนึ่งพาสคีย์ต่อหนึ่งอุปกรณ์',
   'help.guide.passkeys.tip.2': 'พาสคีย์ต้องใช้ HTTPS บนอินสแตนซ์ที่ใช้ HTTP ธรรมดา ส่วนนี้จะอธิบายว่าทำไมจึงใช้ไม่ได้',
   // delete-account
   'help.guide.delete-account.title': 'ลบบัญชีของคุณ',
   'help.guide.delete-account.goal': 'ลบบัญชีของคุณและข้อมูลที่เป็นของคุณเพียงคนเดียว',
   'help.guide.delete-account.step.1': 'ที่ด้านล่างสุดของ บัญชี คลิก ลบบัญชี แล้วยืนยัน',
-  'help.guide.delete-account.result': 'บัญชี ทริปของคุณเอง และบันทึกการเดินทางของคุณจะหายไป ทริปที่คุณแชร์กับผู้อื่นจะยังคงอยู่กับพวกเขา',
-  'help.guide.delete-account.tip.1': 'ผู้ดูแลระบบคนสุดท้ายของอินสแตนซ์ไม่สามารถลบตัวเองได้ ให้แต่งตั้งผู้อื่นเป็นผู้ดูแลระบบก่อน',
+  'help.guide.delete-account.result':
+    'บัญชี ทริปของคุณเอง และบันทึกการเดินทางของคุณจะหายไป ทริปที่คุณแชร์กับผู้อื่นจะยังคงอยู่กับพวกเขา',
+  'help.guide.delete-account.tip.1':
+    'ผู้ดูแลระบบคนสุดท้ายของอินสแตนซ์ไม่สามารถลบตัวเองได้ ให้แต่งตั้งผู้อื่นเป็นผู้ดูแลระบบก่อน',
   'help.guide.delete-account.tip.2': 'ไม่สามารถย้อนกลับได้ ส่งออกสิ่งที่คุณต้องการเก็บไว้ก่อนยืนยัน',
 
   // ── Screen: admin (all tabs) ───────────────────────────────────────────────
   'help.ctx.admin.title': 'ผู้ดูแลระบบ',
   'help.ctx.admin.summary':
     'อินสแตนซ์เบื้องหลัง TREK ของทุกคน: ใครลงชื่อเข้าใช้ได้และด้วยวิธีใด อะไรเปิดใช้งานอยู่ ไฟล์เก็บไว้ที่ไหน เซิร์ฟเวอร์ติดต่อผู้คนอย่างไร และสำรองข้อมูลอย่างไร เฉพาะผู้ดูแลระบบเท่านั้นที่เห็นหน้านี้ แต่ละแท็บเป็นหน้าจอแยกของตัวเองในแถบด้านข้าง',
-  'help.ctx.admin.bullet.1': 'การ์ดสี่ใบที่ด้านบนแสดงจำนวนผู้ใช้ ทริป สถานที่ และไฟล์ แบนเนอร์เหนือการ์ดจะแจ้งเมื่อมี TREK เวอร์ชันใหม่กว่า',
-  'help.ctx.admin.bullet.2': 'ผู้ใช้ และ ค่าเริ่มต้นของผู้ใช้: บัญชี ลิงก์เชิญ และการตั้งค่าแผนที่ที่บัญชีใหม่เริ่มต้นใช้',
+  'help.ctx.admin.bullet.1':
+    'การ์ดสี่ใบที่ด้านบนแสดงจำนวนผู้ใช้ ทริป สถานที่ และไฟล์ แบนเนอร์เหนือการ์ดจะแจ้งเมื่อมี TREK เวอร์ชันใหม่กว่า',
+  'help.ctx.admin.bullet.2':
+    'ผู้ใช้ และ ค่าเริ่มต้นของผู้ใช้: บัญชี ลิงก์เชิญ และการตั้งค่าแผนที่ที่บัญชีใหม่เริ่มต้นใช้',
   'help.ctx.admin.bullet.3':
     'การปรับเปลี่ยนในแบบของคุณ คือเทมเพลตการบรรจุ หมวดหมู่ และวันหยุดโรงเรียน การตั้งค่า คือวิธีการลงชื่อเข้าใช้และคีย์ API ส่วนเสริม คือโมดูลฟีเจอร์ และ ปลั๊กอิน คือปลั๊กอินจากบุคคลที่สาม',
   'help.ctx.admin.bullet.4':
@@ -1129,7 +1252,8 @@ const help: TranslationStrings = {
     'สิ่งที่ทุกทริปบนอินสแตนซ์ใช้ร่วมกัน: เทมเพลตการบรรจุ ชุดหมวดหมู่สำหรับสถานที่และคอลเลกชัน และแคตตาล็อกวันหยุดโรงเรียนที่ วันหยุด ใช้',
   'help.ctx.admin-config.bullet.1':
     'เทมเพลตการบรรจุ: รายการหมวดหมู่และสิ่งของที่ตั้งชื่อไว้ ซึ่งรายการจัดกระเป๋าของทริปสามารถใช้เป็นจุดเริ่มต้นได้',
-  'help.ctx.admin-config.bullet.2': 'หมวดหมู่: ชื่อ ไอคอน และสีของหมวดหมู่ที่ใช้ทั่วทั้ง TREK ตั้งแต่ตัวตรวจสอบสถานที่ไปจนถึง คอลเลกชัน',
+  'help.ctx.admin-config.bullet.2':
+    'หมวดหมู่: ชื่อ ไอคอน และสีของหมวดหมู่ที่ใช้ทั่วทั้ง TREK ตั้งแต่ตัวตรวจสอบสถานที่ไปจนถึง คอลเลกชัน',
   'help.ctx.admin-config.bullet.3': 'วันหยุดโรงเรียน: แคตตาล็อกประเทศและภูมิภาค สำหรับพื้นที่ที่ฟีดในตัวไม่ครอบคลุม',
   'help.ctx.admin-settings.title': 'การตั้งค่า',
   'help.ctx.admin-settings.summary':
@@ -1154,7 +1278,8 @@ const help: TranslationStrings = {
     'ปลั๊กอินจากบุคคลที่สามที่ทำงานในโปรเซสของตัวเองข้างๆ TREK แต่ละตัวมีสิทธิ์ตามที่ขอไว้ตอนติดตั้ง ติดตั้งจากแคตตาล็อก อัปโหลดแพ็กเกจ หรือลิงก์โฟลเดอร์ขณะพัฒนาปลั๊กอิน',
   'help.ctx.admin-plugins.bullet.1':
     'รายการ: ทุกปลั๊กอินที่ติดตั้งพร้อมเวอร์ชัน สถานะ ลายเซ็น และสิทธิ์ที่ได้รับ เปิดใช้งาน ปิดใช้งาน อัปเดต หรือถอนการติดตั้งได้ในแต่ละแถว',
-  'help.ctx.admin-plugins.bullet.2': 'อัปโหลดปลั๊กอิน รับไฟล์แพ็กเกจ ส่วน สแกนอีกครั้ง จะตรวจพบโฟลเดอร์ปลั๊กอินที่ลิงก์ไว้สำหรับการพัฒนา',
+  'help.ctx.admin-plugins.bullet.2':
+    'อัปโหลดปลั๊กอิน รับไฟล์แพ็กเกจ ส่วน สแกนอีกครั้ง จะตรวจพบโฟลเดอร์ปลั๊กอินที่ลิงก์ไว้สำหรับการพัฒนา',
   'help.ctx.admin-plugins.bullet.3':
     'โฮสต์ที่ได้รับอนุญาต ของแต่ละปลั๊กอิน: ที่อยู่ที่ปลั๊กอินเรียกใช้ได้ เนื่องจากการเชื่อมต่อขาออกถูกปฏิเสธโดยค่าเริ่มต้น',
   'help.ctx.admin-storage.title': 'ที่เก็บของ',
@@ -1164,7 +1289,8 @@ const help: TranslationStrings = {
     'แบ็กเอนด์: ชื่อและประเภทของแต่ละตัว พร้อม ทดสอบ, แก้ไข และ ลบ แบ็กเอนด์ที่กำหนดผ่านตัวแปรสภาพแวดล้อมจะเป็นแบบอ่านอย่างเดียวที่นี่',
   'help.ctx.admin-storage.bullet.2':
     'หมวดหมู่: ภาพปก เอกสาร รูปภาพบันทึกการเดินทาง และอื่นๆ แต่ละหมวดกำหนดให้กับแบ็กเอนด์หนึ่ง การเปลี่ยนหมวดใดจะมีตัวเลือกให้ย้ายไฟล์ที่มีอยู่',
-  'help.ctx.admin-storage.bullet.3': 'สุขภาพ: การตรวจสอบแต่ละแบ็กเอนด์ และไฟล์ seed ที่พิสูจน์ว่าการกำหนดค่าตรงกับที่เซิร์ฟเวอร์เห็น',
+  'help.ctx.admin-storage.bullet.3':
+    'สุขภาพ: การตรวจสอบแต่ละแบ็กเอนด์ และไฟล์ seed ที่พิสูจน์ว่าการกำหนดค่าตรงกับที่เซิร์ฟเวอร์เห็น',
   'help.ctx.admin-notifications.title': 'การแจ้งเตือน',
   'help.ctx.admin-notifications.summary':
     'ช่องทางที่อินสแตนซ์เสนอให้ผู้ใช้ และช่องทางที่ติดต่อคุณในฐานะผู้ดูแลระบบ ผู้ใช้เลือกหัวข้อและ URL ของตนเองใน การตั้งค่า ส่วนคุณกำหนดว่ามีช่องทางใดบ้างและกำหนดค่าอีเมล',
@@ -1188,13 +1314,15 @@ const help: TranslationStrings = {
   'help.ctx.admin-backup.title': 'สำรองข้อมูล',
   'help.ctx.admin-backup.summary':
     'การสำรองข้อมูลแบบเต็มของฐานข้อมูลและไฟล์อัปโหลด ทำด้วยตนเองหรือตามกำหนดเวลา เก็บไว้บนเซิร์ฟเวอร์และดาวน์โหลดเป็นไฟล์เดียวได้ คืนค่า จะนำข้อมูลสำรองกลับมาใช้',
-  'help.ctx.admin-backup.bullet.1': 'การสำรองข้อมูล: สร้างข้อมูลสำรอง และรายการข้อมูลสำรองที่มีอยู่พร้อม ดาวน์โหลด, คืนค่า และลบ',
+  'help.ctx.admin-backup.bullet.1':
+    'การสำรองข้อมูล: สร้างข้อมูลสำรอง และรายการข้อมูลสำรองที่มีอยู่พร้อม ดาวน์โหลด, คืนค่า และลบ',
   'help.ctx.admin-backup.bullet.2': 'อัปโหลดข้อมูลสำรอง ใช้นำไฟล์ที่สร้างบนอินสแตนซ์อื่นหรือในวันก่อนหน้าเข้ามา',
   'help.ctx.admin-backup.bullet.3': 'การสำรองข้อมูลอัตโนมัติ: เปิดหรือปิด ช่วงเวลา ชั่วโมงและวัน และจำนวนที่จะเก็บไว้',
   'help.ctx.admin-audit.title': 'การตรวจสอบ',
   'help.ctx.admin-audit.summary':
     'บันทึกเหตุการณ์ด้านความปลอดภัยและการดูแลระบบ: การลงชื่อเข้าใช้และความล้มเหลว การเปลี่ยนแปลง MFA การเปลี่ยนแปลงผู้ใช้และการตั้งค่า การสำรองและการคืนค่า อ่านได้อย่างเดียว เรียงจากใหม่ไปเก่า',
-  'help.ctx.admin-audit.bullet.1': 'หนึ่งแถวต่อหนึ่งเหตุการณ์ พร้อมเวลา ผู้ใช้ การดำเนินการ ทรัพยากร ไอพี และรายละเอียด',
+  'help.ctx.admin-audit.bullet.1':
+    'หนึ่งแถวต่อหนึ่งเหตุการณ์ พร้อมเวลา ผู้ใช้ การดำเนินการ ทรัพยากร ไอพี และรายละเอียด',
   'help.ctx.admin-audit.bullet.2': 'รีเฟรช จะโหลดใหม่ ส่วน โหลดเพิ่ม จะย้อนกลับไปดูรายการก่อนหน้านั้น',
   // create-user
   'help.guide.create-user.title': 'สร้างผู้ใช้',
@@ -1204,12 +1332,14 @@ const help: TranslationStrings = {
   'help.guide.create-user.step.3': 'คลิก สร้างผู้ใช้',
   'help.guide.create-user.result': 'บัญชีจะปรากฏในตารางและลงชื่อเข้าใช้ได้ทันที ส่งรหัสผ่านให้ผ่านช่องทางที่คุณไว้ใจ',
   'help.guide.create-user.tip.1': 'สำหรับผู้ที่ควรเลือกรหัสผ่านเอง ลิงก์เชิญเป็นวิธีที่ดีกว่า',
-  'help.guide.create-user.tip.2': 'ผู้ดูแลระบบจะเห็นหน้านี้และบันทึกการตรวจสอบ ส่วนอื่นทั้งหมดเหมือนกันสำหรับทั้งสองบทบาท',
+  'help.guide.create-user.tip.2':
+    'ผู้ดูแลระบบจะเห็นหน้านี้และบันทึกการตรวจสอบ ส่วนอื่นทั้งหมดเหมือนกันสำหรับทั้งสองบทบาท',
   // edit-user
   'help.guide.edit-user.title': 'เปลี่ยนบทบาทหรือรหัสผ่านของผู้ใช้',
   'help.guide.edit-user.goal': 'เลื่อนระดับ ลดระดับ หรือช่วยให้ผู้ใช้กลับเข้าระบบได้หลังจากลืมรหัสผ่าน',
   'help.guide.edit-user.step.1': 'คลิกไอคอนดินสอในแถวของผู้ใช้ แก้ไขผู้ใช้ จะเปิดขึ้นพร้อมรายละเอียดของบัญชี',
-  'help.guide.edit-user.step.2': 'เปลี่ยน บทบาท ตั้ง รหัสผ่านใหม่ หรือคลิก รีเซ็ตพาสคีย์ เมื่อผู้ใช้ทำอุปกรณ์ที่มีพาสคีย์หาย จากนั้นคลิก บันทึก',
+  'help.guide.edit-user.step.2':
+    'เปลี่ยน บทบาท ตั้ง รหัสผ่านใหม่ หรือคลิก รีเซ็ตพาสคีย์ เมื่อผู้ใช้ทำอุปกรณ์ที่มีพาสคีย์หาย จากนั้นคลิก บันทึก',
   'help.guide.edit-user.result': 'การเปลี่ยนแปลงมีผลในคำขอถัดไป รหัสผ่านใหม่ใช้ได้ตั้งแต่การลงชื่อเข้าใช้ครั้งถัดไป',
   'help.guide.edit-user.tip.1': 'คุณไม่สามารถถอดบทบาทผู้ดูแลระบบออกจากตัวเองได้ขณะที่คุณเป็นผู้ดูแลระบบคนสุดท้าย',
   'help.guide.edit-user.tip.2': 'การรีเซ็ตพาสคีย์จะคงรหัสผ่านไว้ ผู้ใช้จะเพิ่มพาสคีย์ใหม่ได้ใน การตั้งค่า, บัญชี',
@@ -1221,9 +1351,11 @@ const help: TranslationStrings = {
     'ตั้ง สูงสุด การใช้งาน และ หมดอายุหลัง เลือก เพิ่มในการเดินทาง (ไม่บังคับ) ได้ตามต้องการ แล้วคลิก สร้างและคัดลอก',
   'help.guide.invite-links.step.3':
     'ส่งลิงก์ออกไป แต่ละแถวแสดงจำนวนครั้งที่ใช้และผู้สร้าง คัดลอกลิงก์ จะคัดลอกอีกครั้ง และลิงก์ที่ใช้ครบหรือหมดอายุแล้วจะมีเครื่องหมายกำกับ',
-  'help.guide.invite-links.result': 'ผู้ที่เปิดลิงก์จะลงทะเบียนด้วยรหัสผ่านของตนเอง และหากเลือกทริปไว้ ก็จะเข้าร่วมทริปนั้นทันที',
+  'help.guide.invite-links.result':
+    'ผู้ที่เปิดลิงก์จะลงทะเบียนด้วยรหัสผ่านของตนเอง และหากเลือกทริปไว้ ก็จะเข้าร่วมทริปนั้นทันที',
   'help.guide.invite-links.tip.1': 'ลิงก์เชิญใช้ได้แม้ว่า การลงทะเบียนรหัสผ่าน จะถูกปิดใน การตั้งค่า',
-  'help.guide.invite-links.tip.2': 'ลิงก์ที่ใช้ได้ครั้งเดียวและหมดอายุเร็วเป็นค่าเริ่มต้นที่ปลอดภัยที่สุดสำหรับบุคคลเดียว',
+  'help.guide.invite-links.tip.2':
+    'ลิงก์ที่ใช้ได้ครั้งเดียวและหมดอายุเร็วเป็นค่าเริ่มต้นที่ปลอดภัยที่สุดสำหรับบุคคลเดียว',
   // delete-user
   'help.guide.delete-user.title': 'ลบผู้ใช้',
   'help.guide.delete-user.goal': 'ลบบัญชีและทุกสิ่งที่บัญชีนั้นเป็นเจ้าของเพียงผู้เดียว',
@@ -1248,7 +1380,8 @@ const help: TranslationStrings = {
     'ใน แผนที่ เลือก เครื่องยนต์แผนที่ และสำหรับ Mapbox หรือ MapLibre ให้เลือก รูปแบบแผนที่, โทเค็น Mapbox ที่ใช้ร่วมกัน และ โหมดคุณภาพสูง สำหรับแผนที่แรสเตอร์ ให้เลือก แม่แบบแผนที่ และ คีย์ CARTO ที่ใช้ร่วมกัน',
   'help.guide.default-map.step.2':
     'ข้างช่องที่คุณเปลี่ยน รีเซ็ต จะคืนค่าที่ TREK เลือกไว้เอง การตั้งค่าผู้ใช้เริ่มต้น ทางซ้ายทำแบบเดียวกันสำหรับ โหมดสี หน่วย และสกุลเงิน',
-  'help.guide.default-map.result': 'บัญชีใหม่จะเริ่มต้นด้วยค่าเหล่านี้ ผู้ที่ตั้งค่าแผนที่ของตนเองใน การตั้งค่า แล้วจะใช้ค่าของตนต่อไป',
+  'help.guide.default-map.result':
+    'บัญชีใหม่จะเริ่มต้นด้วยค่าเหล่านี้ ผู้ที่ตั้งค่าแผนที่ของตนเองใน การตั้งค่า แล้วจะใช้ค่าของตนต่อไป',
   'help.guide.default-map.tip.1': 'โทเค็นที่กรอกที่นี่จะใช้ร่วมกันโดยทุกคนที่ไม่มีโทเค็นของตนเอง ดังนั้นควรระวังโควตา',
   'help.guide.default-map.tip.2': 'บัญชีที่มีอยู่ซึ่งไม่เคยแตะแท็บแผนที่ก็จะใช้ค่าเริ่มต้นเหล่านี้ด้วย',
   // packing-templates
@@ -1266,11 +1399,14 @@ const help: TranslationStrings = {
   // categories
   'help.guide.categories.title': 'จัดการชุดหมวดหมู่',
   'help.guide.categories.goal': 'กำหนดว่าสถานที่และคอลเลกชันใช้หมวดหมู่ใดได้บ้าง และหมวดหมู่เหล่านั้นมีหน้าตาอย่างไร',
-  'help.guide.categories.step.1': 'คลิก หมวดหมู่ใหม่ ตั้งชื่อ เลือกไอคอนและสี ส่วน ดูตัวอย่าง จะแสดงผลลัพธ์ แล้วคลิก สร้าง',
+  'help.guide.categories.step.1':
+    'คลิก หมวดหมู่ใหม่ ตั้งชื่อ เลือกไอคอนและสี ส่วน ดูตัวอย่าง จะแสดงผลลัพธ์ แล้วคลิก สร้าง',
   'help.guide.categories.step.2': 'วางเมาส์เหนือหมวดหมู่ในรายการเพื่อแก้ไขหรือลบ การลบจะถามเพื่อยืนยันก่อน',
-  'help.guide.categories.result': 'ชุดหมวดหมู่มีผลทุกที่พร้อมกัน ทั้งหน้ารายละเอียดสถานที่ หมุดบนแผนที่ คอลเลกชัน และตัวกรอง',
+  'help.guide.categories.result':
+    'ชุดหมวดหมู่มีผลทุกที่พร้อมกัน ทั้งหน้ารายละเอียดสถานที่ หมุดบนแผนที่ คอลเลกชัน และตัวกรอง',
   'help.guide.categories.tip.1': 'สถานที่เก็บ id ของหมวดหมู่ไว้ การเปลี่ยนชื่อหมวดหมู่จึงเปลี่ยนชื่อในทุกสถานที่',
-  'help.guide.categories.tip.2': 'เมื่อลบหมวดหมู่ สถานที่ในหมวดหมู่นั้นจะไม่มีหมวดหมู่ หากเรื่องนี้สำคัญ ให้กำหนดหมวดหมู่ใหม่ก่อน',
+  'help.guide.categories.tip.2':
+    'เมื่อลบหมวดหมู่ สถานที่ในหมวดหมู่นั้นจะไม่มีหมวดหมู่ หากเรื่องนี้สำคัญ ให้กำหนดหมวดหมู่ใหม่ก่อน',
   // school-holiday-catalog
   'help.guide.school-holiday-catalog.title': 'ดูแลวันหยุดโรงเรียนด้วยตนเอง',
   'help.guide.school-holiday-catalog.goal': 'เพิ่มประเทศหรือภูมิภาคที่ฟีดวันหยุดในตัวไม่ครอบคลุม',
@@ -1280,7 +1416,8 @@ const help: TranslationStrings = {
     'คลิกภูมิภาคเพื่อเปิด ภูมิภาคหรือเขตการศึกษา แล้วใช้ เพิ่มช่วงวันหยุด กำหนด ชื่อวันหยุด วันที่เริ่ม และ วันที่สิ้นสุด ให้แต่ละช่วง แล้วคลิก บันทึก ไอคอนถังขยะใช้ลบช่วงวันหยุด ภูมิภาค หรือประเทศเมื่อไม่มีภูมิภาคเหลืออยู่แล้ว',
   'help.guide.school-holiday-catalog.result':
     'ผู้ใช้จะพบประเทศและภูมิภาคใน การตั้งค่า ของ วันหยุด และเห็นช่วงวันหยุดบนตารางรายปีของตน',
-  'help.guide.school-holiday-catalog.tip.1': 'ภูมิภาคจากฟีดในตัวแก้ไขที่นี่ไม่ได้ หากวันที่ไม่ถูกต้อง ให้เพิ่มภูมิภาคแบบกำหนดเองไว้คู่กัน',
+  'help.guide.school-holiday-catalog.tip.1':
+    'ภูมิภาคจากฟีดในตัวแก้ไขที่นี่ไม่ได้ หากวันที่ไม่ถูกต้อง ให้เพิ่มภูมิภาคแบบกำหนดเองไว้คู่กัน',
   // auth-methods
   'help.guide.auth-methods.title': 'กำหนดวิธีที่ผู้ใช้เข้าสู่ระบบ',
   'help.guide.auth-methods.goal': 'เปิดหรือปิดการเข้าสู่ระบบด้วยรหัสผ่าน SSO และการลงทะเบียน รวมถึงบังคับใช้ 2FA',
@@ -1300,13 +1437,16 @@ const help: TranslationStrings = {
   'help.guide.oidc.step.1':
     'ใน การลงชื่อเพียงครั้งเดียว (OIDC) กรอก ชื่อที่แสดง สำหรับปุ่ม รวมถึง URL ของผู้ออก รหัสไคลเอ็นต์ และ รหัสลับไคลเอ็นต์ จากผู้ให้บริการของคุณ แล้วคลิก บันทึก',
   'help.guide.oidc.step.2': 'เปิด เข้าสู่ระบบ SSO ใน วิธีการรับรองความถูกต้อง',
-  'help.guide.oidc.result': 'หน้าเข้าสู่ระบบจะแสดงปุ่ม SSO และเมื่อเปิด การจัดสรร SSO อัตโนมัติ ผู้ใช้ที่เข้ามาครั้งแรกจะได้รับบัญชีโดยอัตโนมัติ',
-  'help.guide.oidc.tip.1': 'Redirect URI ที่ผู้ให้บริการต้องการคือที่อยู่ TREK ของคุณต่อด้วยพาธ callback ของ OIDC ตามเอกสาร',
+  'help.guide.oidc.result':
+    'หน้าเข้าสู่ระบบจะแสดงปุ่ม SSO และเมื่อเปิด การจัดสรร SSO อัตโนมัติ ผู้ใช้ที่เข้ามาครั้งแรกจะได้รับบัญชีโดยอัตโนมัติ',
+  'help.guide.oidc.tip.1':
+    'Redirect URI ที่ผู้ให้บริการต้องการคือที่อยู่ TREK ของคุณต่อด้วยพาธ callback ของ OIDC ตามเอกสาร',
   'help.guide.oidc.tip.2': 'การแมป claim กำหนดว่ากลุ่ม SSO ใดจะเป็นผู้ดูแลระบบ ดูหน้า OIDC ในเอกสาร',
   // instance-keys
   'help.guide.instance-keys.title': 'ใส่คีย์ API',
   'help.guide.instance-keys.goal': 'เปิดใช้การค้นหาสถานที่ของ Google ภาพปกจาก Unsplash และ Amap สำหรับทั้งอินสแตนซ์',
-  'help.guide.instance-keys.step.1': 'ใน คีย์ API วาง คีย์ Google Maps API แล้วคลิก ทดสอบ ช่องจะแสดงว่าคีย์ตอบสนองหรือไม่',
+  'help.guide.instance-keys.step.1':
+    'ใน คีย์ API วาง คีย์ Google Maps API แล้วคลิก ทดสอบ ช่องจะแสดงว่าคีย์ตอบสนองหรือไม่',
   'help.guide.instance-keys.step.2':
     'ใน สิ่งที่คีย์นี้ใช้ได้ เปิดเฉพาะฟีเจอร์ที่คุณต้องการให้เรียกเก็บเงินกับคีย์นั้น ได้แก่ การเติมข้อความอัตโนมัติ รายละเอียด รูปภาพ การเติมข้อมูล และเงาสถานที่',
   'help.guide.instance-keys.step.3':
@@ -1329,7 +1469,8 @@ const help: TranslationStrings = {
   'help.guide.file-types.title': 'จำกัดประเภทไฟล์',
   'help.guide.file-types.goal': 'กำหนดว่าไฟล์ที่อัปโหลดมีนามสกุลใดได้บ้าง',
   'help.guide.file-types.step.1': 'ใน ประเภทไฟล์ที่อนุญาต แก้ไขรายการนามสกุลที่คั่นด้วยจุลภาค แล้วบันทึก',
-  'help.guide.file-types.result': 'การอัปโหลดไฟล์ประเภทอื่นจะถูกปฏิเสธพร้อมข้อความที่ชัดเจน ทั้งในเอกสาร บันทึกการเดินทาง และภาพปก',
+  'help.guide.file-types.result':
+    'การอัปโหลดไฟล์ประเภทอื่นจะถูกปฏิเสธพร้อมข้อความที่ชัดเจน ทั้งในเอกสาร บันทึกการเดินทาง และภาพปก',
   'help.guide.file-types.tip.1': 'คงประเภทไฟล์รูปภาพไว้ในรายการ เพราะภาพปกและรูปภาพของการเดินทางผ่านการตรวจสอบเดียวกัน',
   // toggle-addon
   'help.guide.toggle-addon.title': 'เปิดหรือปิดส่วนเสริม',
@@ -1348,7 +1489,8 @@ const help: TranslationStrings = {
     'ไทล์ เอกสาร แสดงที่เก็บเป็นแถวในส่วนย่อยของไทล์ ได้แก่ Paperless-ngx, Papra, Nextcloud, OpenCloud และ Synology Drive ทั้งห้ารายการปิดอยู่ตั้งแต่แรก และส่วนย่อยนี้จะแสดงเฉพาะเมื่อเปิด เอกสาร อยู่',
   'help.guide.document-providers.step.2':
     'สลับสวิตช์บนแถว Nextcloud จะมีข้อความ อัพเดตแอดออนแล้ว และนับจากนี้เจ้าของทริปจะพบ การซิงค์เอกสาร ในแท็บ ไฟล์ ของทริป โดยมี Nextcloud อยู่ใต้ เชื่อมต่อผู้ให้บริการ',
-  'help.guide.document-providers.result': 'ที่เก็บนี้พร้อมให้ใช้ในทุกทริปของ TREK นี้ แต่จะยังไม่มีการเชื่อมต่อจนกว่าเจ้าของทริปจะเชื่อมต่อเอง',
+  'help.guide.document-providers.result':
+    'ที่เก็บนี้พร้อมให้ใช้ในทุกทริปของ TREK นี้ แต่จะยังไม่มีการเชื่อมต่อจนกว่าเจ้าของทริปจะเชื่อมต่อเอง',
   'help.guide.document-providers.tip.1':
     'ที่นี่กำหนดเพียงว่าจะเปิดให้ใช้ที่เก็บหรือไม่ ที่อยู่และข้อมูลรับรองเป็นของแต่ละทริป และเจ้าของทริปจะกรอกในแท็บ ไฟล์ ของทริป ไม่ใช่ในแผงผู้ดูแลระบบ',
   'help.guide.document-providers.tip.2':
@@ -1356,15 +1498,18 @@ const help: TranslationStrings = {
   // install-plugin
   'help.guide.install-plugin.title': 'ติดตั้งปลั๊กอิน',
   'help.guide.install-plugin.goal': 'เพิ่มปลั๊กอินจากภายนอกและให้สิทธิ์ตามที่ปลั๊กอินขอเท่านั้น',
-  'help.guide.install-plugin.step.1': 'เปิด ค้นพบ เลือกปลั๊กอินแล้วคลิก ติดตั้ง หรือคลิก อัปโหลดปลั๊กอิน แล้วเลือกแพ็กเกจ .zip หรือ .tar.gz',
+  'help.guide.install-plugin.step.1':
+    'เปิด ค้นพบ เลือกปลั๊กอินแล้วคลิก ติดตั้ง หรือคลิก อัปโหลดปลั๊กอิน แล้วเลือกแพ็กเกจ .zip หรือ .tar.gz',
   'help.guide.install-plugin.step.2':
     'กลับไปที่ ติดตั้งแล้ว แล้วอ่านแถวของปลั๊กอิน ได้แก่ สิ่งที่ปลั๊กอินอ่านหรือเขียนได้ โฮสต์ที่ปลั๊กอินเรียกใช้ และมีการลงนามหรือไม่ จากนั้นเปิด เปิดใช้งานปลั๊กอิน',
   'help.guide.install-plugin.step.3':
     'เมนูของแถวมี รีสตาร์ท ดูบันทึกข้อผิดพลาด โฮสต์ที่ได้รับอนุญาต และ เปลี่ยนเวอร์ชัน... ส่วน ลบ ใช้ถอนการติดตั้ง เมื่อมีเวอร์ชันใหม่กว่า แถวจะแสดงการอัปเดตให้ และการอัปเดตที่ขอสิทธิ์ใหม่จะปิดอยู่จนกว่าคุณจะอนุมัติ',
   'help.guide.install-plugin.result':
     'ปลั๊กอินทำงานในโปรเซสของตัวเอง สิ่งที่ปลั๊กอินเพิ่ม เช่น วิดเจ็ต เลเยอร์แผนที่ หรือเครื่องมือ จะปรากฏในตำแหน่งที่ปลั๊กอินกำหนด',
-  'help.guide.install-plugin.tip.1': 'สแกนอีกครั้ง จะตรวจพบโฟลเดอร์ปลั๊กอินที่ลิงก์ไว้สำหรับการพัฒนาโดยไม่ต้องมีแพ็กเกจ',
-  'help.guide.install-plugin.tip.2': 'ปลั๊กอินที่ไม่ได้ลงนามจะมีเครื่องหมายระบุไว้ ติดตั้งเฉพาะเมื่อคุณเชื่อถือแหล่งที่มา',
+  'help.guide.install-plugin.tip.1':
+    'สแกนอีกครั้ง จะตรวจพบโฟลเดอร์ปลั๊กอินที่ลิงก์ไว้สำหรับการพัฒนาโดยไม่ต้องมีแพ็กเกจ',
+  'help.guide.install-plugin.tip.2':
+    'ปลั๊กอินที่ไม่ได้ลงนามจะมีเครื่องหมายระบุไว้ ติดตั้งเฉพาะเมื่อคุณเชื่อถือแหล่งที่มา',
   // storage-backends
   'help.guide.storage-backends.title': 'ย้ายไฟล์อัปโหลดไปยัง S3 หรือมิเรอร์',
   'help.guide.storage-backends.goal': 'เก็บไฟล์ไว้บน object storage หรือทั้งบนดิสก์และ bucket',
@@ -1373,9 +1518,11 @@ const help: TranslationStrings = {
   'help.guide.storage-backends.step.2':
     'ใน หมวดหมู่ กำหนดแบ็กเอนด์ให้หมวดหมู่การอัปโหลดแต่ละรายการ เมื่อเปลี่ยน ระบบจะถามว่าจะ ย้ายวัตถุที่มีอยู่ หรือ เพียงกำหนดเส้นทางการเขียนใหม่',
   'help.guide.storage-backends.step.3': 'สุขภาพ ที่ด้านบนจะตรวจสอบทุกแบ็กเอนด์ รายการสีแดงจะระบุสิ่งที่ล้มเหลว',
-  'help.guide.storage-backends.result': 'ไฟล์อัปโหลดใหม่จะไปยังแบ็กเอนด์ที่กำหนด และไฟล์ที่ย้ายแล้วจะให้บริการจากที่นั่น',
+  'help.guide.storage-backends.result':
+    'ไฟล์อัปโหลดใหม่จะไปยังแบ็กเอนด์ที่กำหนด และไฟล์ที่ย้ายแล้วจะให้บริการจากที่นั่น',
   'help.guide.storage-backends.tip.1': 'แบ็กเอนด์ที่ตั้งค่าผ่านตัวแปรสภาพแวดล้อมจะแสดงอยู่ แต่แก้ไขที่นี่ไม่ได้',
-  'help.guide.storage-backends.tip.2': 'มิเรอร์จะเขียนไปยังทั้งสองปลายทางและอ่านจากปลายทางแรก ใช้เพื่อย้ายข้อมูลโดยไม่ต้องหยุดให้บริการ',
+  'help.guide.storage-backends.tip.2':
+    'มิเรอร์จะเขียนไปยังทั้งสองปลายทางและอ่านจากปลายทางแรก ใช้เพื่อย้ายข้อมูลโดยไม่ต้องหยุดให้บริการ',
   // channels-instance
   'help.guide.channels-instance.title': 'กำหนดค่าช่องทางการแจ้งเตือน',
   'help.guide.channels-instance.goal': 'กำหนดว่าผู้ใช้เลือกช่องทางใดได้บ้าง และตั้งค่าอีเมล',
@@ -1386,7 +1533,8 @@ const help: TranslationStrings = {
   'help.guide.channels-instance.step.3':
     'การแจ้งเตือนการเดินทาง ใช้เปิดหรือปิดการเตือนก่อนเริ่มทริป ส่วน ในแอป เปิดอยู่เสมอและแสดงไว้ที่นี่เพื่ออธิบายเท่านั้น',
   'help.guide.channels-instance.result': 'แท็บ การแจ้งเตือน ของผู้ใช้ทุกคนจะแสดงช่องทางที่คุณเปิดไว้',
-  'help.guide.channels-instance.tip.1': 'เซิร์ฟเวอร์ ntfy เริ่มต้นที่กรอกที่นี่จะถูกกรอกไว้ล่วงหน้าให้ผู้ใช้ แต่ผู้ใช้ยังระบุเซิร์ฟเวอร์ของตนเองได้',
+  'help.guide.channels-instance.tip.1':
+    'เซิร์ฟเวอร์ ntfy เริ่มต้นที่กรอกที่นี่จะถูกกรอกไว้ล่วงหน้าให้ผู้ใช้ แต่ผู้ใช้ยังระบุเซิร์ฟเวอร์ของตนเองได้',
   'help.guide.channels-instance.tip.2': 'ช่องทางของปลั๊กอินจะปรากฏเองเมื่อมีปลั๊กอินที่มีความสามารถนั้นทำงานอยู่',
   // admin-channels
   'help.guide.admin-channels.title': 'รับเหตุการณ์ของผู้ดูแลระบบบนโทรศัพท์',
@@ -1394,17 +1542,20 @@ const help: TranslationStrings = {
   'help.guide.admin-channels.step.1':
     'ใน แอดมิน Ntfy กรอก topic และหากจำเป็นให้กรอกเซิร์ฟเวอร์และโทเค็น ส่วนใน แอดมินเว็บฮุค ให้กรอก URL',
   'help.guide.admin-channels.step.2': 'คลิก ส่งการทดสอบ ntfy หรือ ส่งเว็บฮุคทดสอบ เพื่อดูว่าข้อความส่งถึง',
-  'help.guide.admin-channels.result': 'เหตุการณ์ของผู้ดูแลระบบจะส่งไปที่นั่น นอกเหนือจากกระดิ่งแจ้งเตือนในแอปของผู้ดูแลระบบทุกคน',
+  'help.guide.admin-channels.result':
+    'เหตุการณ์ของผู้ดูแลระบบจะส่งไปที่นั่น นอกเหนือจากกระดิ่งแจ้งเตือนในแอปของผู้ดูแลระบบทุกคน',
   'help.guide.admin-channels.tip.1':
     'แยก topic ของผู้ดูแลระบบออกจาก topic ส่วนตัว เพื่อไม่ให้การแจ้งเตือนระบบล่มจมหายไปกับข้อความเกี่ยวกับทริป',
   // mcp-tokens-admin
   'help.guide.mcp-tokens-admin.title': 'เพิกถอนการเข้าถึงของ AI',
   'help.guide.mcp-tokens-admin.goal': 'ดูและตัดโทเค็นและเซสชันทั้งหมดที่ไคลเอ็นต์ AI ถืออยู่ ของผู้ใช้ทุกคน',
-  'help.guide.mcp-tokens-admin.step.1': 'ใน โทเค็น API ค้นหาโทเค็นตามผู้ใช้และชื่อ ไอคอนถังขยะจะลบโทเค็น และไคลเอ็นต์จะหยุดทำงานทันที',
+  'help.guide.mcp-tokens-admin.step.1':
+    'ใน โทเค็น API ค้นหาโทเค็นตามผู้ใช้และชื่อ ไอคอนถังขยะจะลบโทเค็น และไคลเอ็นต์จะหยุดทำงานทันที',
   'help.guide.mcp-tokens-admin.step.2':
     'ใน เซสชัน OAuth ใช้วิธีเดียวกันกับไคลเอ็นต์บนเบราว์เซอร์ โดยแสดงไคลเอ็นต์ ผู้ใช้ และวันที่ และไอคอนถังขยะจะเพิกถอนเซสชัน',
   'help.guide.mcp-tokens-admin.result': 'ผู้ใช้ต้องเชื่อมต่อไคลเอ็นต์ใหม่อีกครั้ง นอกนั้นไม่มีอะไรเปลี่ยนแปลง',
-  'help.guide.mcp-tokens-admin.tip.1': 'ขอบเขต บอกว่าไคลเอ็นต์ทำอะไรได้บ้าง ขอบเขตแบบอ่านอย่างเดียวปล่อยไว้ได้โดยไม่เป็นอันตราย',
+  'help.guide.mcp-tokens-admin.tip.1':
+    'ขอบเขต บอกว่าไคลเอ็นต์ทำอะไรได้บ้าง ขอบเขตแบบอ่านอย่างเดียวปล่อยไว้ได้โดยไม่เป็นอันตราย',
   'help.guide.mcp-tokens-admin.tip.2': 'การปิดส่วนเสริม MCP จะเพิกถอนทุกอย่างพร้อมกัน',
   // release-history
   'help.guide.release-history.title': 'ตรวจหารุ่นใหม่',
@@ -1413,21 +1564,26 @@ const help: TranslationStrings = {
     'เมื่อมีรุ่นใหม่กว่า อัปเดตพร้อมใช้งาน จะแสดงที่ด้านบนของหน้าผู้ดูแลระบบ ดูบน GitHub จะเปิดรุ่นนั้น และ วิธีการอัพเดต จะอธิบายการอัปเดตสำหรับ Docker และการติดตั้งแบบอื่น',
   'help.guide.release-history.step.2':
     'ประวัติการเผยแพร่ แสดงทุกรุ่นพร้อมบันทึกประจำรุ่น แสดงรายละเอียด จะขยายบันทึก รุ่นใหม่ที่สุดมีป้าย ล่าสุด และ โหลดเพิ่ม จะย้อนดูรุ่นก่อนหน้าต่อไป',
-  'help.guide.release-history.result': 'การอัปเดตทำบนโฮสต์ โดยดึงอิมเมจใหม่หรือบิลด์แท็กใหม่ ส่วนไดเรกทอรีข้อมูลยังคงอยู่เหมือนเดิม',
+  'help.guide.release-history.result':
+    'การอัปเดตทำบนโฮสต์ โดยดึงอิมเมจใหม่หรือบิลด์แท็กใหม่ ส่วนไดเรกทอรีข้อมูลยังคงอยู่เหมือนเดิม',
   'help.guide.release-history.tip.1': 'สำรองข้อมูลก่อนอัปเดต แท็บ สำรองข้อมูล อยู่ถัดไป',
-  'help.guide.release-history.tip.2': 'รุ่นทดสอบก่อนเผยแพร่จะแสดงในรายการ แต่จะไม่แจ้งเป็นการอัปเดต เว้นแต่คุณใช้รุ่นทดสอบอยู่',
+  'help.guide.release-history.tip.2':
+    'รุ่นทดสอบก่อนเผยแพร่จะแสดงในรายการ แต่จะไม่แจ้งเป็นการอัปเดต เว้นแต่คุณใช้รุ่นทดสอบอยู่',
   // create-backup
   'help.guide.create-backup.title': 'สร้างและกู้คืนข้อมูลสำรอง',
   'help.guide.create-backup.goal': 'เก็บสแนปช็อตของทั้งอินสแตนซ์ เก็บสำเนาไว้ที่อื่น และนำกลับมาใช้ได้',
   'help.guide.create-backup.step.1':
     'ใน การสำรองข้อมูล คลิก สร้างข้อมูลสำรอง ระบบจะรวมฐานข้อมูลและไฟล์อัปโหลดไว้ในไฟล์เดียวบนเซิร์ฟเวอร์',
-  'help.guide.create-backup.step.2': 'ดาวน์โหลด จะเก็บสำเนาไว้นอกเครื่อง ไอคอนถังขยะใช้ลบข้อมูลสำรองเก่าเพื่อเพิ่มพื้นที่',
+  'help.guide.create-backup.step.2':
+    'ดาวน์โหลด จะเก็บสำเนาไว้นอกเครื่อง ไอคอนถังขยะใช้ลบข้อมูลสำรองเก่าเพื่อเพิ่มพื้นที่',
   'help.guide.create-backup.step.3':
     'คืนค่า บนข้อมูลสำรอง หรือ อัปโหลดข้อมูลสำรอง พร้อมไฟล์ จะแทนที่ข้อมูลปัจจุบัน หลังจาก คืนค่าการสำรองข้อมูลหรือไม่ ถามยืนยันหนึ่งครั้ง',
   'help.guide.create-backup.result':
     'การคืนค่าจะนำผู้ใช้ ทริป ไฟล์ และการตั้งค่ากลับมาตามสถานะของข้อมูลสำรองนั้น และทุกคนจะถูกออกจากระบบ',
-  'help.guide.create-backup.tip.1': 'การคืนค่าเป็นการดำเนินการเดียวในหน้านี้ที่ย้อนกลับไม่ได้ ให้สร้างข้อมูลสำรองใหม่ก่อน',
-  'help.guide.create-backup.tip.2': 'ข้อมูลสำรองอยู่ในไดเรกทอรีข้อมูล สำเนาบนเครื่องอื่นเท่านั้นที่ทำให้เป็นข้อมูลสำรองอย่างแท้จริง',
+  'help.guide.create-backup.tip.1':
+    'การคืนค่าเป็นการดำเนินการเดียวในหน้านี้ที่ย้อนกลับไม่ได้ ให้สร้างข้อมูลสำรองใหม่ก่อน',
+  'help.guide.create-backup.tip.2':
+    'ข้อมูลสำรองอยู่ในไดเรกทอรีข้อมูล สำเนาบนเครื่องอื่นเท่านั้นที่ทำให้เป็นข้อมูลสำรองอย่างแท้จริง',
   // auto-backup
   'help.guide.auto-backup.title': 'ตั้งเวลาสำรองข้อมูล',
   'help.guide.auto-backup.goal': 'ให้เซิร์ฟเวอร์สำรองข้อมูลเองและเก็บไว้เพียงไม่กี่ชุดล่าสุด',
@@ -1435,7 +1591,8 @@ const help: TranslationStrings = {
     'ใน การสำรองข้อมูลอัตโนมัติ เปิด เปิดใช้งานการสำรองข้อมูลอัตโนมัติ แล้วเลือก ช่วงเวลา วิ่งเป็นชั่วโมง และสำหรับรายสัปดาห์หรือรายเดือน ให้เลือก วันในสัปดาห์ หรือ วันของเดือน',
   'help.guide.auto-backup.step.2':
     'ลบข้อมูลสำรองเก่าหลังจากนั้น กำหนดระยะเวลาที่เก็บข้อมูลสำรองไว้ ข้อมูลสำรองที่เก่ากว่าจะถูกลบเมื่อมีการสร้างข้อมูลสำรองใหม่',
-  'help.guide.auto-backup.result': 'ข้อมูลสำรองจะปรากฏในรายการตามกำหนดการ หากล้มเหลวจะมีการแจ้งไปยังช่องทางของผู้ดูแลระบบ',
+  'help.guide.auto-backup.result':
+    'ข้อมูลสำรองจะปรากฏในรายการตามกำหนดการ หากล้มเหลวจะมีการแจ้งไปยังช่องทางของผู้ดูแลระบบ',
   'help.guide.auto-backup.tip.1': 'เวลาเป็นไปตามเขตเวลาของเซิร์ฟเวอร์ ซึ่งแสดงในแท็บ การตรวจสอบ',
   'help.guide.auto-backup.tip.2': 'พื้นที่บนเซิร์ฟเวอร์มีจำกัด โดยทั่วไปเก็บไว้สามถึงห้าชุดก็เพียงพอ',
   // audit-log
@@ -1456,9 +1613,11 @@ const help: TranslationStrings = {
     'แถบแท็บ ได้แก่ แผน การขนส่ง การจอง รายการ ค่าใช้จ่าย ไฟล์ และ ร่วมมือกัน ส่วนเสริมและปลั๊กอินเป็นตัวกำหนดว่า TREK ของคุณมีแท็บใดบ้าง',
   'help.ctx.trip.bullet.2':
     'แผน มีสามคอลัมน์ วันอยู่ทางซ้าย แผนที่อยู่ตรงกลาง และสถานที่อยู่ทางขวา การจองและการขนส่งอยู่ภายในแผน ที่จุดแวะและระหว่างจุดแวะ ส่วนแท็บจะแสดงเป็นรายการ',
-  'help.ctx.trip.bullet.3': 'แบ่งปัน ที่มุมขวาบนจะเปิดรายชื่อผู้คนในทริป ได้แก่ สมาชิก แขก ลิงก์เชิญ และลิงก์สาธารณะแบบอ่านอย่างเดียว',
+  'help.ctx.trip.bullet.3':
+    'แบ่งปัน ที่มุมขวาบนจะเปิดรายชื่อผู้คนในทริป ได้แก่ สมาชิก แขก ลิงก์เชิญ และลิงก์สาธารณะแบบอ่านอย่างเดียว',
   'help.ctx.trip.bullet.4': 'ชื่อ วันที่ ภาพปก และสกุลเงิน แก้ไขได้จาก การเดินทางของฉัน ด้วยไอคอนดินสอบนการ์ดทริป',
-  'help.ctx.trip.bullet.5': 'ลูกศรที่ขอบด้านในของคอลัมน์ใช้ยุบคอลัมน์ แล้วแผนที่จะขยายเต็มพื้นที่ ส่วนเส้นแบ่งบางๆ ข้างคอลัมน์ใช้ปรับความกว้าง',
+  'help.ctx.trip.bullet.5':
+    'ลูกศรที่ขอบด้านในของคอลัมน์ใช้ยุบคอลัมน์ แล้วแผนที่จะขยายเต็มพื้นที่ ส่วนเส้นแบ่งบางๆ ข้างคอลัมน์ใช้ปรับความกว้าง',
   'help.ctx.trip.bullet.6': 'ลูกศรเลิกทำในแถบเครื่องมือของวันจะย้อนการเปลี่ยนแปลงล่าสุดในแผน',
   // add-member
   'help.guide.add-member.title': 'เพิ่มสมาชิก',
@@ -1466,15 +1625,18 @@ const help: TranslationStrings = {
   'help.guide.add-member.step.1': 'คลิก แบ่งปัน ที่มุมขวาบน',
   'help.guide.add-member.step.2': 'ใน เชิญผู้ใช้ เลือกบุคคลจากรายการแล้วคลิก เชิญ',
   'help.guide.add-member.step.3': 'บุคคลนั้นจะปรากฏใน การเข้าถึง มงกุฎระบุเจ้าของ และไอคอนท้ายแถวใช้ลบการเข้าถึงออก',
-  'help.guide.add-member.result': 'สมาชิกจะดูและแก้ไขทริปได้เหมือนคุณ ภายในระดับที่ผู้ดูแลระบบกำหนดไว้ใน การตั้งค่าการอนุญาต',
+  'help.guide.add-member.result':
+    'สมาชิกจะดูและแก้ไขทริปได้เหมือนคุณ ภายในระดับที่ผู้ดูแลระบบกำหนดไว้ใน การตั้งค่าการอนุญาต',
   'help.guide.add-member.tip.1': 'ผู้ที่ไม่มีในรายการยังไม่มีบัญชี TREK ให้เพิ่มเป็นแขก หรือให้ลงทะเบียนผ่านลิงก์เชิญ',
   'help.guide.add-member.tip.2': 'ตัวเลขข้าง การเข้าถึง คือจำนวนคนในทริป ส่วนแขกจะแสดงแยกไว้ด้านล่าง',
   // trip-invite-link
   'help.guide.trip-invite-link.title': 'เชิญด้วยลิงก์',
   'help.guide.trip-invite-link.goal': 'ให้ผู้คนเข้าร่วมทริปได้ด้วยตนเอง',
   'help.guide.trip-invite-link.step.1': 'คลิก แบ่งปัน จากนั้นใน ลิงก์เชิญเข้าร่วมทริป คลิก สร้างลิงก์คำเชิญ',
-  'help.guide.trip-invite-link.step.2': 'คลิก คัดลอก แล้วส่งลิงก์ ทุกคนที่มีบัญชี TREK และเปิดลิงก์จะเข้าร่วมเป็นสมาชิก',
-  'help.guide.trip-invite-link.step.3': 'สร้างใหม่ จะแทนที่ลิงก์และทำให้ลิงก์เก่าใช้ไม่ได้ ส่วน ปิดการใช้งาน จะปิดลิงก์',
+  'help.guide.trip-invite-link.step.2':
+    'คลิก คัดลอก แล้วส่งลิงก์ ทุกคนที่มีบัญชี TREK และเปิดลิงก์จะเข้าร่วมเป็นสมาชิก',
+  'help.guide.trip-invite-link.step.3':
+    'สร้างใหม่ จะแทนที่ลิงก์และทำให้ลิงก์เก่าใช้ไม่ได้ ส่วน ปิดการใช้งาน จะปิดลิงก์',
   'help.guide.trip-invite-link.result': 'ผู้ที่เปิดลิงก์จะอยู่ในทริปและปรากฏใน การเข้าถึง',
   'help.guide.trip-invite-link.tip.1':
     'ผู้ที่ไม่มีบัญชีใช้ลิงก์นี้ไม่ได้ ผู้ดูแลระบบแจกลิงก์ลงทะเบียนได้ใน ผู้ดูแลระบบ ส่วน ผู้ใช้ และผูกลิงก์เข้ากับทริปนี้ได้',
@@ -1485,7 +1647,8 @@ const help: TranslationStrings = {
   'help.guide.add-guest.step.1': 'คลิก แบ่งปัน แล้วเลื่อนไปที่ แขก',
   'help.guide.add-guest.step.2': 'พิมพ์ชื่อใน ชื่อแขก แล้วคลิก เพิ่มแขก',
   'help.guide.add-guest.result': 'แขกสามารถถูกกำหนดให้กับค่าใช้จ่าย รายการจัดกระเป๋า และงานได้ แต่เข้าสู่ระบบไม่ได้',
-  'help.guide.add-guest.tip.1': 'ไอคอนดินสอใช้เปลี่ยนชื่อแขก ไอคอนท้ายแถวใช้ลบแขกพร้อมส่วนแบ่งค่าใช้จ่ายและงานที่ได้รับมอบหมาย',
+  'help.guide.add-guest.tip.1':
+    'ไอคอนดินสอใช้เปลี่ยนชื่อแขก ไอคอนท้ายแถวใช้ลบแขกพร้อมส่วนแบ่งค่าใช้จ่ายและงานที่ได้รับมอบหมาย',
   'help.guide.add-guest.tip.2': 'หากบุคคลนั้นมีบัญชีในภายหลัง ให้เชิญเป็นสมาชิกแล้วลบแขกออก',
   // public-link
   'help.guide.public-link.title': 'เผยแพร่ลิงก์แบบอ่านอย่างเดียว',
@@ -1494,21 +1657,27 @@ const help: TranslationStrings = {
     'คลิก แบ่งปัน ทางขวาใน ลิงก์สาธารณะ ติ๊กเลือกสิ่งที่ลิงก์แสดงได้ แผนที่และแผน เปิดอยู่เสมอ ส่วน การจอง การบรรจุ ค่าใช้จ่าย และ แชท เลือกได้ตามต้องการ',
   'help.guide.public-link.step.2': 'คลิก สร้างลิงก์ แล้วคลิก คัดลอก',
   'help.guide.public-link.step.3': 'เปลี่ยนตัวเลือกที่ติ๊กไว้ได้ตลอดขณะที่ลิงก์ยังอยู่ ส่วน ลบลิงก์ จะหยุดลิงก์',
-  'help.guide.public-link.result': 'ทุกคนที่มีลิงก์จะเห็นส่วนที่เลือกไว้โดยไม่ต้องเข้าสู่ระบบ และเปลี่ยนแปลงสิ่งใดไม่ได้',
+  'help.guide.public-link.result':
+    'ทุกคนที่มีลิงก์จะเห็นส่วนที่เลือกไว้โดยไม่ต้องเข้าสู่ระบบ และเปลี่ยนแปลงสิ่งใดไม่ได้',
   'help.guide.public-link.tip.1': 'ลิงก์นี้ไม่ได้แสดงไว้ที่ใด แต่ใครก็ตามที่มีลิงก์เปิดได้ จึงควรดูแลเหมือนรหัสผ่าน',
   'help.guide.public-link.tip.2': 'หากต้องการให้สิทธิ์แก้ไข ให้เพิ่มบุคคลนั้นเป็นสมาชิกแทน',
   // transfer-ownership
   'help.guide.transfer-ownership.title': 'ส่งมอบทริปหรือออกจากทริป',
   'help.guide.transfer-ownership.goal': 'ตั้งให้ผู้อื่นเป็นเจ้าของ หรือออกจากทริปที่ไม่ใช่ของคุณ',
-  'help.guide.transfer-ownership.step.1': 'คลิก แบ่งปัน ใน การเข้าถึง มงกุฎบนแถวของสมาชิกจะตั้งให้บุคคลนั้นเป็นเจ้าของ แล้วยืนยันคำถาม',
-  'help.guide.transfer-ownership.step.2': 'ออกจากทริป บนแถวของคุณเองจะนำคุณออกจากทริป หากคุณเป็นเจ้าของ ให้ส่งมอบทริปก่อน',
+  'help.guide.transfer-ownership.step.1':
+    'คลิก แบ่งปัน ใน การเข้าถึง มงกุฎบนแถวของสมาชิกจะตั้งให้บุคคลนั้นเป็นเจ้าของ แล้วยืนยันคำถาม',
+  'help.guide.transfer-ownership.step.2':
+    'ออกจากทริป บนแถวของคุณเองจะนำคุณออกจากทริป หากคุณเป็นเจ้าของ ให้ส่งมอบทริปก่อน',
   'help.guide.transfer-ownership.result': 'เจ้าของใหม่จะจัดการสมาชิกและลบทริปได้ ส่วนคุณจะยังเป็นสมาชิกทั่วไป',
-  'help.guide.transfer-ownership.tip.1': 'เจ้าของคือผู้สร้างทริปจนกว่าจะมีการส่งมอบ และมีเพียงเจ้าของเท่านั้นที่ลบทริปได้',
-  'help.guide.transfer-ownership.tip.2': 'ลบการเข้าถึง บนแถวอื่นคือปุ่มเดียวกันในทางกลับกัน เจ้าของใช้ปุ่มนี้นำสมาชิกออก',
+  'help.guide.transfer-ownership.tip.1':
+    'เจ้าของคือผู้สร้างทริปจนกว่าจะมีการส่งมอบ และมีเพียงเจ้าของเท่านั้นที่ลบทริปได้',
+  'help.guide.transfer-ownership.tip.2':
+    'ลบการเข้าถึง บนแถวอื่นคือปุ่มเดียวกันในทางกลับกัน เจ้าของใช้ปุ่มนี้นำสมาชิกออก',
   // collapse-columns
   'help.guide.collapse-columns.title': 'เพิ่มพื้นที่ให้แผนที่',
   'help.guide.collapse-columns.goal': 'ยุบคอลัมน์หรือขยายความกว้างของคอลัมน์',
-  'help.guide.collapse-columns.step.1': 'คลิกลูกศรที่ขอบด้านในของคอลัมน์วันเพื่อยุบ แผนที่จะขยายเต็มพื้นที่ คอลัมน์สถานที่ก็มีลูกศรแบบเดียวกัน',
+  'help.guide.collapse-columns.step.1':
+    'คลิกลูกศรที่ขอบด้านในของคอลัมน์วันเพื่อยุบ แผนที่จะขยายเต็มพื้นที่ คอลัมน์สถานที่ก็มีลูกศรแบบเดียวกัน',
   'help.guide.collapse-columns.step.2': 'คลิกลูกศรอีกครั้งเพื่อแสดงคอลัมน์กลับมา',
   'help.guide.collapse-columns.step.3': 'ลากเส้นแบ่งบางๆ ระหว่างคอลัมน์กับแผนที่เพื่อปรับความกว้างของคอลัมน์',
   'help.guide.collapse-columns.result': 'ระบบจะจำความกว้างไว้ และคอลัมน์จะกลับมาเปิดอยู่เมื่อเข้าใช้ครั้งถัดไป',
@@ -1517,11 +1686,13 @@ const help: TranslationStrings = {
   // undo-change
   'help.guide.undo-change.title': 'เลิกทำการเปลี่ยนแปลงล่าสุด',
   'help.guide.undo-change.goal': 'ย้อนสิ่งที่คุณเพิ่งทำกับแผน',
-  'help.guide.undo-change.step.1': 'คลิกลูกศรเลิกทำในแถบเครื่องมือเหนือรายการวัน คำแนะนำเครื่องมือจะระบุการเปลี่ยนแปลงที่จะถูกย้อนกลับ',
+  'help.guide.undo-change.step.1':
+    'คลิกลูกศรเลิกทำในแถบเครื่องมือเหนือรายการวัน คำแนะนำเครื่องมือจะระบุการเปลี่ยนแปลงที่จะถูกย้อนกลับ',
   'help.guide.undo-change.result': 'แผนจะกลับเป็นเหมือนเดิม และลูกศรจะเป็นสีเทาจนกว่าจะมีการเปลี่ยนแปลงครั้งถัดไป',
   'help.guide.undo-change.tip.1':
     'เลิกทำ ครอบคลุมแผน ได้แก่ การกำหนด การนำออก การจัดลำดับใหม่ และการย้ายสถานที่ การปรับเส้นทางให้เหมาะสม การลบสถานที่ การเปลี่ยนหมวดหมู่ และการนำเข้า',
-  'help.guide.undo-change.tip.2': 'ย้อนได้เพียงหนึ่งขั้น เฉพาะการเปลี่ยนแปลงล่าสุดเท่านั้นที่ย้อนได้ และการเปลี่ยนแปลงใหม่จะมาแทนที่',
+  'help.guide.undo-change.tip.2':
+    'ย้อนได้เพียงหนึ่งขั้น เฉพาะการเปลี่ยนแปลงล่าสุดเท่านั้นที่ย้อนได้ และการเปลี่ยนแปลงใหม่จะมาแทนที่',
 
   // ── Screen: trip-places ───────────────────────────────────────────────────────────────
   'help.ctx.trip-places.title': 'สถานที่',
@@ -1542,20 +1713,23 @@ const help: TranslationStrings = {
   // create-place
   'help.guide.create-place.title': 'สร้างสถานที่',
   'help.guide.create-place.goal': 'เพิ่มสถานที่หรือกิจกรรมด้วยตนเอง พร้อมข้อมูลทั้งหมดที่แผนต้องใช้',
-  'help.guide.create-place.step.1': 'คลิก เพิ่มสถานที่/กิจกรรม ที่ด้านบนของคอลัมน์สถานที่ (สถานที่ใหม่ เมื่อเปิดวันอยู่) ฟอร์มจะเปิดขึ้น',
+  'help.guide.create-place.step.1':
+    'คลิก เพิ่มสถานที่/กิจกรรม ที่ด้านบนของคอลัมน์สถานที่ (สถานที่ใหม่ เมื่อเปิดวันอยู่) ฟอร์มจะเปิดขึ้น',
   'help.guide.create-place.step.2':
     'พิมพ์สถานที่ใน ค้นหาสถานที่... ที่ด้านบนแล้วเลือกผลลัพธ์ ชื่อ ที่อยู่ ละติจูด ลองจิจูด และ เว็บไซต์ จะถูกกรอกให้ และ รายละเอียดสถานที่ ทางซ้ายจะแสดงรูปภาพ เวลาทำการ และคำอธิบายของสถานที่ บน TREK ที่มีคีย์ Google จะมี ไม่ใช่สถานที่ที่ต้องการใช่ไหม ค้นหาด้วย Google แทน อยู่ใต้รายการ ซึ่งใช้ค้นหาแบบเดียวกันผ่าน Google',
   'help.guide.create-place.step.3':
     'ใน รายละเอียดสถานที่ คลิกรูปภาพใต้ เลือกรูปภาพ เพื่อตั้งเป็นรูปของสถานที่ ส่วน ใช้ข้อความนี้ จะนำคำอธิบายไปใส่ในฟอร์ม',
   'help.guide.create-place.step.4':
     'ตรวจสอบช่องต่างๆ ชื่อ เป็นช่องที่ต้องกรอก คำอธิบาย และ หมายเหตุ กรอกได้ตามต้องการ ที่อยู่ ละติจูด และ ลองจิจูด มาจากการค้นหาหรือพิมพ์เอง หมวดหมู่ ใช้เลือกหนึ่งในหมวดหมู่ของทริป และปุ่ม + ข้างๆ ใช้สร้างหมวดหมู่ใหม่ทันที ส่วน เว็บไซต์ ใช้ใส่ลิงก์',
-  'help.guide.create-place.step.5': 'คลิก เพิ่ม หากมีสถานที่ชื่อเดียวกันในทริปอยู่แล้ว ฟอร์มจะแจ้งให้ทราบ และปุ่มจะเปลี่ยนเป็น เพิ่มต่อไป',
+  'help.guide.create-place.step.5':
+    'คลิก เพิ่ม หากมีสถานที่ชื่อเดียวกันในทริปอยู่แล้ว ฟอร์มจะแจ้งให้ทราบ และปุ่มจะเปลี่ยนเป็น เพิ่มต่อไป',
   'help.guide.create-place.result': 'สถานที่จะอยู่ในรายการและบนแผนที่ ภายใต้ ไม่ได้วางแผน จนกว่าจะถูกเพิ่มลงในวัน',
   'help.guide.create-place.tip.1':
     'ไฟล์ และ ค่าใช้จ่าย ที่ด้านล่างของฟอร์มใช้แนบเอกสารกับสถานที่ หรือเปิดตัวแก้ไข ค่าใช้จ่าย สำหรับรายจ่ายของสถานที่ทันทีหลังบันทึก',
   'help.guide.create-place.tip.2':
     'ดัชนีของ TREK และ OpenStreetMap ให้ผลการค้นหาบน TREK ทุกแห่ง และ รายละเอียดสถานที่ จะดึงข้อมูลจาก Wikipedia, Wikivoyage และ Wikimedia โดยอัตโนมัติ ระบบจะถาม Google เฉพาะเมื่อทั้งสองแหล่งไม่มีผลลัพธ์ และมีเพียง Google ที่ให้คะแนนรีวิว',
-  'help.guide.create-place.tip.3': 'เริ่มสร้างสถานที่จากแผนที่ก็ได้ คลิกขวาที่จุดนั้น ฟอร์มจะเปิดขึ้นพร้อมพิกัดและที่อยู่ที่กรอกไว้แล้ว',
+  'help.guide.create-place.tip.3':
+    'เริ่มสร้างสถานที่จากแผนที่ก็ได้ คลิกขวาที่จุดนั้น ฟอร์มจะเปิดขึ้นพร้อมพิกัดและที่อยู่ที่กรอกไว้แล้ว',
   // place-to-open-day
   'help.guide.place-to-open-day.title': 'เพิ่มสถานที่ลงในวันที่เปิดอยู่โดยตรง',
   'help.guide.place-to-open-day.goal': 'ข้ามขั้นตอนที่สอง สร้างหรือเลือกสถานที่แล้วให้อยู่ในวันนั้นทันที',
@@ -1563,7 +1737,8 @@ const help: TranslationStrings = {
     'คลิกส่วนหัวของวันในคอลัมน์วัน วันนั้นจะเปิดอยู่ การ์ดของวันจะถูกไฮไลต์ และคอลัมน์สถานที่จะมีปุ่ม เพิ่มในวัน',
   'help.guide.place-to-open-day.step.2':
     'เพิ่มในวัน จะเปิดฟอร์มเดียวกับ สถานที่ใหม่ ต่างกันเพียงสถานที่จะถูกเพิ่มลงในวันที่เปิดอยู่ทันทีที่คุณคลิก เพิ่ม',
-  'help.guide.place-to-open-day.step.3': 'สถานที่ที่มีอยู่แล้วเพิ่มลงในวันที่เปิดอยู่ได้ด้วยปุ่ม + ท้ายแถว หรือคลิกขวาแล้วเลือก เพิ่มไปยังวัน',
+  'help.guide.place-to-open-day.step.3':
+    'สถานที่ที่มีอยู่แล้วเพิ่มลงในวันที่เปิดอยู่ได้ด้วยปุ่ม + ท้ายแถว หรือคลิกขวาแล้วเลือก เพิ่มไปยังวัน',
   'help.guide.place-to-open-day.step.4':
     'ทำกลับกันก็ได้ และไม่ต้องเปิดวันก่อน ลากแถวของสถานที่ออกจากคอลัมน์แล้ววางบนการ์ดวัน หากวางระหว่างจุดแวะสองจุด สถานที่จะอยู่ตรงตำแหน่งนั้นพอดี',
   'help.guide.place-to-open-day.result': 'สถานที่จะแสดงอยู่ท้ายรายการของวัน ลากขึ้นหรือลงไปยังตำแหน่งที่ต้องการ',
@@ -1578,11 +1753,13 @@ const help: TranslationStrings = {
   'help.guide.filter-places.step.2': 'พิมพ์ใน ค้นหาสถานที่... รายการจะกรองให้แคบลงขณะที่คุณพิมพ์',
   'help.guide.filter-places.step.3':
     'หมวดหมู่ทั้งหมด จะเปิดรายการให้ติ๊กเลือกหมวดหมู่หนึ่งหรือหลายหมวดหมู่ รวมถึง ไม่มีหมวดหมู่ ส่วน ล้างตัวกรอง ที่ด้านล่างใช้รีเซ็ต',
-  'help.guide.filter-places.step.4': 'ดาวข้างๆ ใช้ตั้งคะแนนขั้นต่ำ 5+ 4+ และอื่นๆ จะแสดงเฉพาะสถานที่ที่คุณให้คะแนนไว้อย่างน้อยเท่านั้น',
+  'help.guide.filter-places.step.4':
+    'ดาวข้างๆ ใช้ตั้งคะแนนขั้นต่ำ 5+ 4+ และอื่นๆ จะแสดงเฉพาะสถานที่ที่คุณให้คะแนนไว้อย่างน้อยเท่านั้น',
   'help.guide.filter-places.result': 'ตัวเลขเหนือแถวบอกจำนวนสถานที่ที่ตรงกัน และตัวกรองต่างๆ ใช้ร่วมกันได้',
   'help.guide.filter-places.tip.1':
     'เมื่อเปิดวันอยู่ วางแผนแล้ว จะแสดงเฉพาะวันนั้นพร้อมข้อความ แสดงเฉพาะวันที่เปิดอยู่ และมี แสดงทั้งทริป อยู่ข้างๆ',
-  'help.guide.filter-places.tip.2': 'แผนที่จะแสดงเฉพาะวันที่เปิดอยู่เช่นกัน แต่ ทั้งหมด ในรายการยังแสดงทุกสถานที่ของทริป',
+  'help.guide.filter-places.tip.2':
+    'แผนที่จะแสดงเฉพาะวันที่เปิดอยู่เช่นกัน แต่ ทั้งหมด ในรายการยังแสดงทุกสถานที่ของทริป',
   // edit-place
   'help.guide.edit-place.title': 'แก้ไขสถานที่',
   'help.guide.edit-place.goal': 'แก้ชื่อ ย้ายหมุด เพิ่มเว็บไซต์ หรือเปลี่ยนหมวดหมู่',
@@ -1590,16 +1767,20 @@ const help: TranslationStrings = {
   'help.guide.edit-place.step.2':
     'เปลี่ยนสิ่งที่ต้องการ ได้แก่ ชื่อ คำอธิบาย หมายเหตุ ที่อยู่ ละติจูดและลองจิจูด หมวดหมู่ เว็บไซต์ หากเปิดจากวัน ฟอร์มจะมี หมายเหตุสำหรับวันนี้ รวมถึง เริ่มต้น และ สิ้นสุด สำหรับวันนั้นด้วย',
   'help.guide.edit-place.step.3': 'คลิก อัปเดต',
-  'help.guide.edit-place.result': 'การเปลี่ยนแปลงมีผลทุกที่ที่สถานที่ปรากฏ ทั้งในรายการ บนแผนที่ และทุกวันที่มีสถานที่นี้',
-  'help.guide.edit-place.tip.1': 'หมายเหตุสำหรับวันนี้ เป็นของสถานที่ในวันนั้นวันเดียว ส่วน หมายเหตุ เป็นของตัวสถานที่เอง',
+  'help.guide.edit-place.result':
+    'การเปลี่ยนแปลงมีผลทุกที่ที่สถานที่ปรากฏ ทั้งในรายการ บนแผนที่ และทุกวันที่มีสถานที่นี้',
+  'help.guide.edit-place.tip.1':
+    'หมายเหตุสำหรับวันนี้ เป็นของสถานที่ในวันนั้นวันเดียว ส่วน หมายเหตุ เป็นของตัวสถานที่เอง',
   'help.guide.edit-place.tip.2':
     'หาก สิ้นสุด อยู่ก่อน เริ่มต้น จะกด อัปเดต ไม่ได้ ส่วน เวลาที่ทับซ้อนกันกับ: เป็นเพียงคำเตือนว่ามีจุดแวะอื่นในวันเดียวกันที่ใช้เวลาเดียวกัน',
   // delete-place
   'help.guide.delete-place.title': 'ลบสถานที่',
   'help.guide.delete-place.goal': 'นำสถานที่ออกจากทริปอย่างถาวร',
   'help.guide.delete-place.step.1': 'คลิกขวาที่แถวแล้วเลือก ลบ หรือคลิก ลบ ในรายละเอียดของสถานที่',
-  'help.guide.delete-place.step.2': 'ยืนยัน หากมีการจองที่พักค้างคืนที่สถานที่นี้ หรือมีการจองที่เชื่อมโยงอยู่ คำถามจะระบุว่าสิ่งใดจะถูกลบไปด้วย',
-  'help.guide.delete-place.result': 'สถานที่จะหายไปจากรายการ แผนที่ และทุกวัน เลิกทำ ในแถบเครื่องมือเหนือรายการวันจะนำกลับมา',
+  'help.guide.delete-place.step.2':
+    'ยืนยัน หากมีการจองที่พักค้างคืนที่สถานที่นี้ หรือมีการจองที่เชื่อมโยงอยู่ คำถามจะระบุว่าสิ่งใดจะถูกลบไปด้วย',
+  'help.guide.delete-place.result':
+    'สถานที่จะหายไปจากรายการ แผนที่ และทุกวัน เลิกทำ ในแถบเครื่องมือเหนือรายการวันจะนำกลับมา',
   'help.guide.delete-place.tip.1': 'หากต้องการนำสถานที่ออกจากวันเดียว ให้ใช้ ลบออกจากวัน ที่จุดแวะนั้นแทน',
   'help.guide.delete-place.tip.2': 'หากต้องการจัดการหลายสถานที่พร้อมกัน เครื่องหมายถูกข้างตัวกรองจะเริ่มการเลือก',
   // select-places
@@ -1611,7 +1792,8 @@ const help: TranslationStrings = {
   'help.guide.select-places.step.3':
     'เปลี่ยนหมวดหมู่ จะกำหนดหมวดหมู่เดียวกันให้ทั้งหมด บันทึกลงคอลเลกชัน จะคัดลอกไปยังคอลเลกชันหนึ่งของคุณ ส่วน ลบที่เลือกไว้ จะลบหลังจากยืนยัน',
   'help.guide.select-places.step.4': 'คลิกเครื่องหมายถูกอีกครั้งเพื่อออกจากการเลือก',
-  'help.guide.select-places.result': 'การเปลี่ยนแปลงมีผลกับทุกสถานที่ที่เลือก การลบสามารถเลิกทำได้จากแถบเครื่องมือเหนือรายการวัน',
+  'help.guide.select-places.result':
+    'การเปลี่ยนแปลงมีผลกับทุกสถานที่ที่เลือก การลบสามารถเลิกทำได้จากแถบเครื่องมือเหนือรายการวัน',
   'help.guide.select-places.tip.1':
     'ตัวกรองยังทำงานระหว่างที่เลือก กรองเป็น ไม่ได้วางแผน ก่อน แล้ว เลือกทั้งหมด จะเลือกเฉพาะสถานที่เหล่านั้น',
   'help.guide.select-places.tip.2':
@@ -1628,7 +1810,8 @@ const help: TranslationStrings = {
     'คลิก นำเข้า ข้อความจะแจ้งจำนวนสถานที่ที่นำเข้า สำหรับไฟล์ KML หรือ KMZ กล่องโต้ตอบจะยังเปิดอยู่พร้อมสรุปสิ่งที่สร้างขึ้นและสิ่งที่ข้ามไป',
   'help.guide.import-places-file.result':
     'สถานที่จะอยู่ในรายการ แทร็กจะมีเครื่องหมายเส้นทางบนแถว แสดงเส้นบนแผนที่ และมีตัวกรอง แทร็ก ของตัวเอง',
-  'help.guide.import-places-file.tip.1': 'ไฟล์ที่ใหญ่เกินไปจะถูกปฏิเสธพร้อมแจ้งขนาดสูงสุด ให้ส่งออกใหม่โดยไม่มีรูปภาพ หรือแบ่งไฟล์',
+  'help.guide.import-places-file.tip.1':
+    'ไฟล์ที่ใหญ่เกินไปจะถูกปฏิเสธพร้อมแจ้งขนาดสูงสุด ให้ส่งออกใหม่โดยไม่มีรูปภาพ หรือแบ่งไฟล์',
   'help.guide.import-places-file.tip.2': 'เลิกทำการนำเข้าทั้งหมดได้ในครั้งเดียวจากแถบเครื่องมือเหนือรายการวัน',
   // import-places-list
   'help.guide.import-places-list.title': 'นำเข้ารายการที่แชร์จาก Google Maps หรือ Naver Maps',
@@ -1637,7 +1820,8 @@ const help: TranslationStrings = {
   'help.guide.import-places-list.step.2':
     'วางลิงก์ที่แชร์ของรายการ ลิงก์เส้นทางของ Google Maps ก็ใช้ได้ จุดแวะในลิงก์จะกลายเป็นสถานที่ตามลำดับการขับรถ',
   'help.guide.import-places-list.step.3': 'คลิก นำเข้า',
-  'help.guide.import-places-list.result': 'ทุกสถานที่ในรายการจะอยู่ในทริป โดยใช้ชื่อเดียวกับในรายการ ส่วนสถานที่ที่อยู่ในทริปแล้วจะถูกข้าม',
+  'help.guide.import-places-list.result':
+    'ทุกสถานที่ในรายการจะอยู่ในทริป โดยใช้ชื่อเดียวกับในรายการ ส่วนสถานที่ที่อยู่ในทริปแล้วจะถูกข้าม',
   'help.guide.import-places-list.tip.1': 'รายการต้องแชร์แบบสาธารณะ ลิงก์ของรายการส่วนตัวจะไม่นำเข้าสิ่งใด',
   'help.guide.import-places-list.tip.2':
     'เติมเต็มสถานที่ผ่าน Google จะปรากฏในกล่องโต้ตอบเมื่อ TREK ของคุณมีคีย์ Google ซึ่งจะค้นหาทุกสถานที่ที่นำเข้าและเติมรูปภาพ ที่อยู่ และรายละเอียด',
@@ -1682,10 +1866,12 @@ const help: TranslationStrings = {
     'ลากแถวจากคอลัมน์สถานที่ไปยังการ์ดวัน วางระหว่างจุดแวะสองจุดเพื่อให้อยู่ตรงตำแหน่งนั้นพอดี หรือวางที่ใดก็ได้บนการ์ดเพื่อเพิ่มต่อท้าย',
   'help.guide.place-onto-day.step.2':
     'หากไม่ต้องการลาก ให้เปิดวันโดยคลิกส่วนหัว จากนั้นคลิก + ท้ายแถวของสถานที่ หรือคลิกขวาที่แถวแล้วเลือก เพิ่มไปยังวัน',
-  'help.guide.place-onto-day.step.3': 'ในวันที่ว่างอยู่ เพิ่มสถานที่ในวันนี้ จะเปิดฟอร์มสถานที่ และสถานที่ใหม่จะถูกเพิ่มลงในวันนั้นทันที',
+  'help.guide.place-onto-day.step.3':
+    'ในวันที่ว่างอยู่ เพิ่มสถานที่ในวันนี้ จะเปิดฟอร์มสถานที่ และสถานที่ใหม่จะถูกเพิ่มลงในวันนั้นทันที',
   'help.guide.place-onto-day.step.4':
     'จากรายละเอียดของสถานที่ เพิ่มไปยังวัน จะถามว่าต้องการวันไหน และเมื่อเปิดวันจากส่วนหัวแล้ว เพิ่มในวัน ในคอลัมน์สถานที่จะสร้างสถานที่ใหม่ในวันที่เปิดอยู่',
-  'help.guide.place-onto-day.result': 'สถานที่จะเป็นจุดแวะของวัน แสดงบนแผนที่พร้อมหมายเลขวัน และคอลัมน์สถานที่จะนับไว้ใน วางแผนแล้ว',
+  'help.guide.place-onto-day.result':
+    'สถานที่จะเป็นจุดแวะของวัน แสดงบนแผนที่พร้อมหมายเลขวัน และคอลัมน์สถานที่จะนับไว้ใน วางแผนแล้ว',
   'help.guide.place-onto-day.tip.1':
     'สถานที่หนึ่งอยู่ได้หลายวัน ให้เพิ่มลงในวันที่สองจากคอลัมน์สถานที่ การลากจุดแวะจากการ์ดวันหนึ่งไปยังอีกการ์ดหนึ่งจะเป็นการย้ายแทน',
   'help.guide.place-onto-day.tip.2': 'ลูกศรเลิกทำในแถบเครื่องมือจะย้อนการเพิ่มลงวัน',
@@ -1701,11 +1887,13 @@ const help: TranslationStrings = {
     'จุดแวะที่มีเวลากำหนดไว้จะถาม ลบเวลาเหรอ? เมื่อการย้ายจะทำให้ลำดับของวันผิดไป เพราะเวลาเป็นตัวกำหนดตำแหน่ง ยืนยัน จะลบเวลาและให้ย้ายไปที่ใดก็ได้',
   'help.guide.reorder-stops.result': 'เส้นทางและเวลาเดินทางจะเปลี่ยนตามลำดับใหม่ทันที',
   'help.guide.reorder-stops.tip.1': 'การจองที่มีกำหนดเวลาไม่สามารถจัดลำดับใหม่ได้ การจองจะอยู่ในตำแหน่งตามเวลาของตน',
-  'help.guide.reorder-stops.tip.2': 'ปรับให้เหมาะสม ในแถบเส้นทางจะจัดลำดับทั้งวันตามเส้นทางที่สั้นที่สุด ล็อกจุดแวะก่อนหากต้องการให้อยู่ที่เดิม',
+  'help.guide.reorder-stops.tip.2':
+    'ปรับให้เหมาะสม ในแถบเส้นทางจะจัดลำดับทั้งวันตามเส้นทางที่สั้นที่สุด ล็อกจุดแวะก่อนหากต้องการให้อยู่ที่เดิม',
   // set-stop-times
   'help.guide.set-stop-times.title': 'กำหนดเวลาให้จุดแวะ',
   'help.guide.set-stop-times.goal': 'กำหนดเวลาเริ่มและสิ้นสุดของจุดแวะ เพื่อให้วันอ่านได้เหมือนตารางเวลา',
-  'help.guide.set-stop-times.step.1': 'คลิกขวาที่จุดแวะแล้วเลือก แก้ไข หากเปิดจากวัน ฟอร์มจะมี เริ่มต้น และ สิ้นสุด อยู่ด้านล่าง',
+  'help.guide.set-stop-times.step.1':
+    'คลิกขวาที่จุดแวะแล้วเลือก แก้ไข หากเปิดจากวัน ฟอร์มจะมี เริ่มต้น และ สิ้นสุด อยู่ด้านล่าง',
   'help.guide.set-stop-times.step.2':
     'กรอก เริ่มต้น และ สิ้นสุด หากต้องการ เวลาที่ทับซ้อนกันกับ: จะเตือนเมื่อมีจุดแวะอื่นที่มีเวลาในวันเดียวกันทับซ้อนกัน และหาก สิ้นสุด อยู่ก่อน เริ่มต้น จะกด อัปเดต ไม่ได้',
   'help.guide.set-stop-times.step.3': 'คลิก อัปเดต จุดแวะจะมีป้ายเวลาและย้ายไปยังตำแหน่งตามเวลาในวันนั้น',
@@ -1713,22 +1901,27 @@ const help: TranslationStrings = {
   'help.guide.set-stop-times.tip.1': 'เวลาเป็นของจุดแวะในวันนั้น สถานที่เดียวกันในวันอื่นมีเวลาต่างกันได้',
   'help.guide.set-stop-times.tip.2':
     'หากต้องการย้ายจุดแวะที่มีเวลาด้วยตนเอง ให้ลาก คำถาม ลบเวลาเหรอ? จะลบเวลาไประหว่างทางเมื่อคุณคลิก ยืนยัน',
-  'help.guide.set-stop-times.tip.3': 'หมายเหตุสำหรับวันนี้ ในฟอร์มเดียวกันใช้เก็บสิ่งที่ใช้เฉพาะวันนี้ เช่น โต๊ะที่จองไว้ หรือหมายเลขตั๋ว',
+  'help.guide.set-stop-times.tip.3':
+    'หมายเหตุสำหรับวันนี้ ในฟอร์มเดียวกันใช้เก็บสิ่งที่ใช้เฉพาะวันนี้ เช่น โต๊ะที่จองไว้ หรือหมายเลขตั๋ว',
   // remove-from-day
   'help.guide.remove-from-day.title': 'นำจุดแวะออกจากวัน',
   'help.guide.remove-from-day.goal': 'ยกเลิกการวางแผนสถานที่โดยไม่ลบออกจากทริป',
   'help.guide.remove-from-day.step.1': 'คลิกขวาที่จุดแวะแล้วเลือก ลบออกจากวัน',
-  'help.guide.remove-from-day.step.2': 'จุดแวะจะหายไปจากวัน แต่สถานที่ยังอยู่ในคอลัมน์สถานที่ และอยู่ใน ไม่ได้วางแผน หากไม่ได้อยู่ในวันอื่น',
+  'help.guide.remove-from-day.step.2':
+    'จุดแวะจะหายไปจากวัน แต่สถานที่ยังอยู่ในคอลัมน์สถานที่ และอยู่ใน ไม่ได้วางแผน หากไม่ได้อยู่ในวันอื่น',
   'help.guide.remove-from-day.result': 'วัน เส้นทาง และค่าใช้จ่ายของวันจะอัปเดต ลูกศรเลิกทำจะนำจุดแวะกลับมา',
   'help.guide.remove-from-day.tip.1': 'ลบ ในเมนูเดียวกันจะลบสถานที่ออกจากทั้งทริป รวมถึงทุกวัน',
   'help.guide.remove-from-day.tip.2': 'ลบออกจากวัน ยังอยู่ในแผงรายละเอียดของสถานที่ ข้าง เพิ่มไปยังวัน ด้วย',
   // lock-stop
   'help.guide.lock-stop.title': 'ล็อกจุดแวะไว้กับที่',
   'help.guide.lock-stop.goal': 'ให้จุดแวะอยู่ที่เดิมเมื่อปรับเส้นทางให้เหมาะสม',
-  'help.guide.lock-stop.step.1': 'วางเมาส์เหนือรูปภาพของจุดแวะแล้วคลิกแม่กุญแจ รักษาตำแหน่งระหว่างการปรับเส้นทางให้เหมาะสม',
-  'help.guide.lock-stop.step.2': 'ปรับให้เหมาะสม จะเรียงจุดแวะอื่นรอบจุดแวะนี้ คลิกแม่กุญแจอีกครั้ง (คลิกเพื่อปลดล็อค) เพื่อปลดล็อก',
+  'help.guide.lock-stop.step.1':
+    'วางเมาส์เหนือรูปภาพของจุดแวะแล้วคลิกแม่กุญแจ รักษาตำแหน่งระหว่างการปรับเส้นทางให้เหมาะสม',
+  'help.guide.lock-stop.step.2':
+    'ปรับให้เหมาะสม จะเรียงจุดแวะอื่นรอบจุดแวะนี้ คลิกแม่กุญแจอีกครั้ง (คลิกเพื่อปลดล็อค) เพื่อปลดล็อก',
   'help.guide.lock-stop.result': 'แม่กุญแจจะแสดงบนรูปภาพ และจุดแวะจะอยู่ที่ตำแหน่งเดิมจนกว่าคุณจะปลดล็อก',
-  'help.guide.lock-stop.tip.1': 'จุดแวะที่มีเวลากำหนดไว้ถูกล็อกด้วยเวลาของตัวเอง และจะไม่ถูกย้ายระหว่างการปรับให้เหมาะสม',
+  'help.guide.lock-stop.tip.1':
+    'จุดแวะที่มีเวลากำหนดไว้ถูกล็อกด้วยเวลาของตัวเอง และจะไม่ถูกย้ายระหว่างการปรับให้เหมาะสม',
   'help.guide.lock-stop.tip.2':
     'การล็อกมีผลเฉพาะการเข้าใช้ครั้งนี้ หลังโหลดหน้าใหม่ทุกจุดแวะจะไม่ถูกล็อกอีก มีเพียงจุดแวะที่มีเวลาเท่านั้นที่ยังคงอยู่กับที่',
   // day-note
@@ -1738,8 +1931,10 @@ const help: TranslationStrings = {
   'help.guide.day-note.step.2':
     'ตั้งชื่อใน หมายเหตุ ซึ่งเป็นสิ่งที่การ์ดวันจะแสดง แล้วเขียนส่วนที่เหลือใน หมายเหตุรายวัน แถบเครื่องมือด้านบนใช้จัดรูปแบบข้อความ (ตัวหนา รายการ ลิงก์ คำพูด) และ ดูตัวอย่าง ทางซ้ายจะแสดงการ์ดที่จะได้',
   'help.guide.day-note.step.3': 'เลือก ไอคอน และ สี เพื่อให้หมายเหตุโดดเด่นจากจุดแวะ แล้วคลิก เพิ่ม',
-  'help.guide.day-note.step.4': 'หมายเหตุจะอยู่ในวันเหมือนจุดแวะ ลากไปยังตำแหน่งที่ต้องการ และคลิกขวาเพื่อใช้ แก้ไข และ ลบ',
-  'help.guide.day-note.result': 'หมายเหตุเป็นส่วนหนึ่งของวัน รวมถึงใน PDF ด้วย หมายเหตุที่มีเวลาจะเรียงรวมกับจุดแวะที่มีเวลา',
+  'help.guide.day-note.step.4':
+    'หมายเหตุจะอยู่ในวันเหมือนจุดแวะ ลากไปยังตำแหน่งที่ต้องการ และคลิกขวาเพื่อใช้ แก้ไข และ ลบ',
+  'help.guide.day-note.result':
+    'หมายเหตุเป็นส่วนหนึ่งของวัน รวมถึงใน PDF ด้วย หมายเหตุที่มีเวลาจะเรียงรวมกับจุดแวะที่มีเวลา',
   'help.guide.day-note.tip.1': 'หมายเหตุที่มีเวลาใช้แทนการขนส่งที่คุณไม่ได้จองไว้ได้: “08:15 S3 จากสถานีกลาง”',
   'help.guide.day-note.tip.2': 'หมายเหตุเป็นของแต่ละวัน ส่วนหมายเหตุสำหรับทั้งทริปควรอยู่ใน ร่วมมือกัน',
   // day-route
@@ -1749,10 +1944,12 @@ const help: TranslationStrings = {
     'เปิดวันแล้วคลิก เส้นทาง ในแถบเส้นทาง เส้นทางระหว่างจุดแวะจะแสดงบนแผนที่ และตัวเชื่อมระหว่างจุดแวะจะแสดงเวลาและระยะทางของแต่ละช่วง',
   'help.guide.day-route.step.2':
     'ขับรถ และ เดิน ที่อยู่ข้างๆ ใช้ตั้งรูปแบบการเดินทางของวัน แล้วแต่ละช่วงจะคำนวณใหม่ ปลั๊กอินสามารถเพิ่มรูปแบบของตัวเองได้',
-  'help.guide.day-route.step.3': 'คลิกตัวเชื่อมเพื่อเปลี่ยนรูปแบบเฉพาะช่วงนั้น เลือกรูปแบบ หรือใช้ ใช้ค่าเริ่มต้นของวัน เพื่อกลับไปใช้รูปแบบของวัน',
+  'help.guide.day-route.step.3':
+    'คลิกตัวเชื่อมเพื่อเปลี่ยนรูปแบบเฉพาะช่วงนั้น เลือกรูปแบบ หรือใช้ ใช้ค่าเริ่มต้นของวัน เพื่อกลับไปใช้รูปแบบของวัน',
   'help.guide.day-route.step.4':
     'ปรับให้เหมาะสม จะจัดลำดับจุดแวะใหม่ตามเส้นทางที่สั้นที่สุด จุดแวะที่ล็อกไว้หรือมีเวลากำหนดจะอยู่ที่เดิม และหากวันนั้นมีที่พัก เส้นทางจะเริ่มจากที่พัก',
-  'help.guide.day-route.step.5': 'เปิดใน Google Maps หรือ เปิดใน CoMaps จะเปิดทั้งวันเป็นเส้นทางในแอปนั้น เพื่อใช้นำทางระหว่างเดินทาง',
+  'help.guide.day-route.step.5':
+    'เปิดใน Google Maps หรือ เปิดใน CoMaps จะเปิดทั้งวันเป็นเส้นทางในแอปนั้น เพื่อใช้นำทางระหว่างเดินทาง',
   'help.guide.day-route.result': 'วันจะกลายเป็นเส้นทางพร้อมเวลา ต้นทุนรวม และแต่ละช่วงจะอัปเดตเมื่อลำดับเปลี่ยน',
   'help.guide.day-route.tip.1':
     'เส้นทางมาจาก OSRM โดยค่าเริ่มต้น ผู้ดูแลระบบสามารถตั้งให้ TREK ใช้ระบบคำนวณเส้นทางอื่นได้ใน ค่าเริ่มต้นของผู้ใช้',
@@ -1803,8 +2000,10 @@ const help: TranslationStrings = {
   'help.guide.export-plan.step.4':
     'แผนที่และจีพีเอส · GPX: ทั้งทริป จะส่งออกสถานที่ เส้นทางรายวัน และแทร็ก สถานที่เท่านั้น ส่งออกเฉพาะหมุด วันเป็นเส้นทาง ส่งออกหนึ่งเส้นทางต่อวัน สำหรับแผนที่ออฟไลน์และอุปกรณ์ GPS',
   'help.guide.export-plan.result': 'ไฟล์จะถูกดาวน์โหลด โดยไม่มีสิ่งใดในทริปเปลี่ยนแปลง',
-  'help.guide.export-plan.tip.1': 'ส่งวันเดียวไปยังแอปแผนที่ได้จากแถบเส้นทางของวันนั้น ด้วย เปิดใน Google Maps หรือ เปิดใน CoMaps',
-  'help.guide.export-plan.tip.2': 'สมัครสมาชิกปฏิทิน ต้องเปิดฟีดปฏิทินในการตั้งค่าของคุณก่อน แดชบอร์ด มีคู่มือสำหรับเรื่องนี้',
+  'help.guide.export-plan.tip.1':
+    'ส่งวันเดียวไปยังแอปแผนที่ได้จากแถบเส้นทางของวันนั้น ด้วย เปิดใน Google Maps หรือ เปิดใน CoMaps',
+  'help.guide.export-plan.tip.2':
+    'สมัครสมาชิกปฏิทิน ต้องเปิดฟีดปฏิทินในการตั้งค่าของคุณก่อน แดชบอร์ด มีคู่มือสำหรับเรื่องนี้',
   'help.guide.export-plan.tip.3': 'การส่งออกถือเป็นการอ่าน สมาชิกทุกคนของทริปจึงทำได้',
 
   // ── Screen: trip-place ────────────────────────────────────────────────────────────────
@@ -1826,7 +2025,8 @@ const help: TranslationStrings = {
   // read-place
   'help.guide.read-place.title': 'สิ่งที่การ์ดบอกเกี่ยวกับสถานที่',
   'help.guide.read-place.goal': 'อ่านทุกอย่างที่ทริปรู้เกี่ยวกับสถานที่หนึ่งแห่งในการ์ดเดียว',
-  'help.guide.read-place.step.1': 'ในคอลัมน์วัน คลิกจุดแวะที่ต้องการดู การ์ดจะเปิดขึ้นบนแผนที่ และจุดแวะจะยังถูกไฮไลต์อยู่ในวัน',
+  'help.guide.read-place.step.1':
+    'ในคอลัมน์วัน คลิกจุดแวะที่ต้องการดู การ์ดจะเปิดขึ้นบนแผนที่ และจุดแวะจะยังถูกไฮไลต์อยู่ในวัน',
   'help.guide.read-place.step.2':
     'ส่วนหัวมีรูปภาพทรงกลม ชื่อ ที่อยู่ และพิกัดที่แน่นอน วงแหวนสีเขียวพร้อม เปิด หรือสีแดงพร้อม ปิดแล้ว รอบรูปภาพบอกว่าสถานที่เปิดอยู่ตอนนี้หรือไม่ตามเวลาท้องถิ่นของสถานที่ เมื่อ TREK รู้เวลาทำการ X ทางขวาใช้ปิดการ์ด',
   'help.guide.read-place.step.3':
@@ -1842,21 +2042,27 @@ const help: TranslationStrings = {
     'การ์ดจะเปิดอยู่จนกว่าคุณจะปิดด้วย X หรือเลือกสถานที่อื่น เวลาทำการรายสัปดาห์จะยังขยายอยู่ และจุดแวะที่เกี่ยวข้องจะยังถูกไฮไลต์ในคอลัมน์วัน',
   'help.guide.read-place.tip.1':
     'เมื่อเลือกจากคอลัมน์สถานที่ การ์ดจะรู้จักสถานที่แต่ไม่รู้จักจุดแวะ จึงไม่แสดงผู้เข้าร่วมและการจอง ให้เลือกจุดแวะภายในวันแทน แล้วทั้งสองอย่างจะแสดง',
-  'help.guide.read-place.tip.2': 'ดับเบิลคลิกชื่อเพื่อเปลี่ยนชื่อสถานที่โดยไม่ต้องเปิดฟอร์ม Enter เพื่อบันทึก Escape เพื่อยกเลิกการเปลี่ยนแปลง',
+  'help.guide.read-place.tip.2':
+    'ดับเบิลคลิกชื่อเพื่อเปลี่ยนชื่อสถานที่โดยไม่ต้องเปิดฟอร์ม Enter เพื่อบันทึก Escape เพื่อยกเลิกการเปลี่ยนแปลง',
   'help.guide.read-place.tip.3':
     'สถานที่ที่พิมพ์เองจะไม่แสดงข้อมูลเหล่านั้น การ์ดรู้เฉพาะสิ่งที่อยู่ในฟอร์ม เปิดด้วย แก้ไข เลือกสถานที่จากคำแนะนำใต้ ค้นหาสถานที่... แล้วคลิก อัปเดต เวลาทำการ หมายเลขโทรศัพท์ และเว็บไซต์จะมาพร้อมกัน คะแนนของ Google ต้องใช้คีย์ Google',
   // rate-place
   'help.guide.rate-place.title': 'ให้คะแนนสถานที่',
   'help.guide.rate-place.goal': 'ให้ดาวกับสถานที่ด้วยตัวเอง และดูว่าคนอื่นให้คะแนนเท่าไร',
-  'help.guide.rate-place.step.1': 'เปิดสถานที่ แถวดาวอยู่ใต้ส่วนหัว แสดงค่าเฉลี่ยของคะแนนโหวตจนถึงตอนนี้ พร้อมจำนวนโหวตในวงเล็บ',
+  'help.guide.rate-place.step.1':
+    'เปิดสถานที่ แถวดาวอยู่ใต้ส่วนหัว แสดงค่าเฉลี่ยของคะแนนโหวตจนถึงตอนนี้ พร้อมจำนวนโหวตในวงเล็บ',
   'help.guide.rate-place.step.2': 'คลิกดาวที่ต้องการ ดาวจะเติมสีขณะที่คุณเลื่อนผ่าน คุณจึงเห็นว่ากำลังจะให้กี่ดาว',
-  'help.guide.rate-place.step.3': 'คะแนนของคุณจะรวมเข้ากับค่าเฉลี่ยทันที และรูปโปรไฟล์ข้างๆ คือผู้ที่โหวต วางเมาส์บนแถวเพื่อดูดาวของทุกคน',
-  'help.guide.rate-place.step.4': 'ค่าเฉลี่ยเดียวกันจะแสดงบนแถวของสถานที่ในคอลัมน์สถานที่ สถานที่ที่ดีจึงโดดเด่นในรายการ',
+  'help.guide.rate-place.step.3':
+    'คะแนนของคุณจะรวมเข้ากับค่าเฉลี่ยทันที และรูปโปรไฟล์ข้างๆ คือผู้ที่โหวต วางเมาส์บนแถวเพื่อดูดาวของทุกคน',
+  'help.guide.rate-place.step.4':
+    'ค่าเฉลี่ยเดียวกันจะแสดงบนแถวของสถานที่ในคอลัมน์สถานที่ สถานที่ที่ดีจึงโดดเด่นในรายการ',
   'help.guide.rate-place.result':
     'ดาวของคุณจะอยู่บนสถานที่ให้ทุกคนในทริปเห็น และดาวในแถวตัวกรองเหนือรายการจะกรองให้เหลือเฉพาะสถานที่ที่ได้คะแนนถึงเกณฑ์ขั้นต่ำ',
   'help.guide.rate-place.tip.1': 'นักเดินทางทุกคนให้คะแนนได้ แม้ในทริปที่มีเพียงบางคนเท่านั้นที่แก้ไขสถานที่ได้',
-  'help.guide.rate-place.tip.2': 'คลิกดาวที่คุณให้ไว้แล้วเพื่อถอนคะแนน เมื่อไม่มีใครโหวตเหลืออยู่ สถานที่จะแสดง ยังไม่ได้รับการจัดอันดับ อีกครั้ง',
-  'help.guide.rate-place.tip.3': 'รูปโปรไฟล์ผู้โหวตแสดงข้างดาวได้สูงสุดหกคน คำแนะนำเครื่องมือจะระบุชื่อทุกคนและทำเครื่องหมายของคุณไว้',
+  'help.guide.rate-place.tip.2':
+    'คลิกดาวที่คุณให้ไว้แล้วเพื่อถอนคะแนน เมื่อไม่มีใครโหวตเหลืออยู่ สถานที่จะแสดง ยังไม่ได้รับการจัดอันดับ อีกครั้ง',
+  'help.guide.rate-place.tip.3':
+    'รูปโปรไฟล์ผู้โหวตแสดงข้างดาวได้สูงสุดหกคน คำแนะนำเครื่องมือจะระบุชื่อทุกคนและทำเครื่องหมายของคุณไว้',
   // place-image
   'help.guide.place-image.title': 'ใส่รูปภาพของคุณเองให้สถานที่',
   'help.guide.place-image.goal': 'แทนที่ภาพย่ออัตโนมัติด้วยรูปภาพของคุณเอง',
@@ -1865,30 +2071,41 @@ const help: TranslationStrings = {
     'วางเมาส์บนรูปภาพทรงกลมในส่วนหัว ไอคอนกล้องจะปรากฏและคำแนะนำเครื่องมือจะแสดง อัปโหลดรูปภาพ คลิกแล้วเลือกไฟล์ของคุณ',
   'help.guide.place-image.step.3': 'ส่วนหัวจะแสดงรูปภาพของคุณ พร้อม X สีแดงเล็กๆ ที่มุม',
   'help.guide.place-image.step.4': 'รูปภาพเดียวกันจะอยู่บนแถวของสถานที่ในคอลัมน์สถานที่ และบนหมุดบนแผนที่',
-  'help.guide.place-image.result': 'รูปภาพของคุณจะเป็นรูปของสถานที่ทุกที่ ทั้งในการ์ด คอลัมน์สถานที่ จุดแวะในวัน หมุดบนแผนที่ และทริปที่แชร์',
+  'help.guide.place-image.result':
+    'รูปภาพของคุณจะเป็นรูปของสถานที่ทุกที่ ทั้งในการ์ด คอลัมน์สถานที่ จุดแวะในวัน หมุดบนแผนที่ และทริปที่แชร์',
   'help.guide.place-image.tip.1': 'รองรับ JPG, PNG, GIF และ WebP ส่วน HEIC จาก iPhone จะถูกแปลงระหว่างอัปโหลด',
   'help.guide.place-image.tip.2': 'X ที่มุมจะลบรูปภาพของคุณออก และรูปอัตโนมัติจะกลับมา ตัวสถานที่ไม่ได้รับผลกระทบ',
-  'help.guide.place-image.tip.3': 'หากไม่มีรูปภาพของคุณเอง TREK จะค้นหารูปจากพิกัดของสถานที่ และจะใช้ไอคอนของหมวดหมู่แทนหากไม่พบ',
+  'help.guide.place-image.tip.3':
+    'หากไม่มีรูปภาพของคุณเอง TREK จะค้นหารูปจากพิกัดของสถานที่ และจะใช้ไอคอนของหมวดหมู่แทนหากไม่พบ',
   // place-day-assign
   'help.guide.place-day-assign.title': 'เพิ่มสถานที่ลงในวันที่เปิดอยู่ หรือนำออก',
   'help.guide.place-day-assign.goal': 'ใช้ปุ่มบนการ์ดแทนการลากแถวข้ามหน้าวางแผน',
-  'help.guide.place-day-assign.step.1': 'คลิกส่วนหัวของวันในคอลัมน์วัน วันนั้นจะกลายเป็นวันที่เปิดอยู่ และการ์ดจะทำงานกับวันนั้น',
-  'help.guide.place-day-assign.step.2': 'คลิกสถานที่ในคอลัมน์สถานที่ที่ยังไม่อยู่ในวันนั้น การ์ดจะเปิดขึ้นและแถวด้านล่างจะมี เพิ่มไปยังวัน',
+  'help.guide.place-day-assign.step.1':
+    'คลิกส่วนหัวของวันในคอลัมน์วัน วันนั้นจะกลายเป็นวันที่เปิดอยู่ และการ์ดจะทำงานกับวันนั้น',
+  'help.guide.place-day-assign.step.2':
+    'คลิกสถานที่ในคอลัมน์สถานที่ที่ยังไม่อยู่ในวันนั้น การ์ดจะเปิดขึ้นและแถวด้านล่างจะมี เพิ่มไปยังวัน',
   'help.guide.place-day-assign.step.3': 'คลิก เพิ่มไปยังวัน จุดแวะจะถูกเพิ่มท้ายวัน และปุ่มจะเปลี่ยนเป็น ลบออกจากวัน',
   'help.guide.place-day-assign.step.4': 'จุดแวะอยู่ในวันแล้ว เป็นรายการสุดท้าย ลากขึ้นไปยังตำแหน่งที่ต้องการ',
   'help.guide.place-day-assign.step.5': 'ลบออกจากวัน จะนำจุดแวะนั้นออกจากวัน และการ์ดจะแสดง เพิ่มไปยังวัน อีกครั้ง',
   'help.guide.place-day-assign.result': 'วันจะมีหรือไม่มีจุดแวะนั้น และไม่ว่าอย่างไรตัวสถานที่ก็ไม่ได้รับผลกระทบ',
-  'help.guide.place-day-assign.tip.1': 'ปุ่มนี้มีเฉพาะเมื่อเปิดวันอยู่ หากไม่มีวันที่เปิดอยู่ การ์ดก็ไม่มีที่ให้เพิ่มสถานที่',
-  'help.guide.place-day-assign.tip.2': 'การนำจุดแวะออกจากวันยังคงเก็บสถานที่ไว้ในทริปและในคอลัมน์สถานที่ ลบ เท่านั้นที่ลบสถานที่ออกจากทุกที่',
-  'help.guide.place-day-assign.tip.3': 'จุดแวะที่มาจากการจองที่พักจะไม่มีปุ่มทั้งสอง คืนนั้นจะเพิ่มและนำออกได้ในส่วนการพักค้างคืนของวัน',
+  'help.guide.place-day-assign.tip.1':
+    'ปุ่มนี้มีเฉพาะเมื่อเปิดวันอยู่ หากไม่มีวันที่เปิดอยู่ การ์ดก็ไม่มีที่ให้เพิ่มสถานที่',
+  'help.guide.place-day-assign.tip.2':
+    'การนำจุดแวะออกจากวันยังคงเก็บสถานที่ไว้ในทริปและในคอลัมน์สถานที่ ลบ เท่านั้นที่ลบสถานที่ออกจากทุกที่',
+  'help.guide.place-day-assign.tip.3':
+    'จุดแวะที่มาจากการจองที่พักจะไม่มีปุ่มทั้งสอง คืนนั้นจะเพิ่มและนำออกได้ในส่วนการพักค้างคืนของวัน',
   // place-participants
   'help.guide.place-participants.title': 'ระบุว่าใครจะไปจุดแวะนี้',
   'help.guide.place-participants.goal': 'แยกกลุ่มสำหรับจุดแวะเดียวโดยไม่ต้องแยกทริป',
   'help.guide.place-participants.step.1': 'คลิกจุดแวะภายในวัน การ์ดจะเปิดขึ้นและ ผู้เข้าร่วม จะแสดงทุกคนในทริป',
-  'help.guide.place-participants.step.2': 'คลิกชิปของนักเดินทางเพื่อนำออกจากจุดแวะนี้ ชื่อจะมีขีดฆ่าเมื่อคุณวางเมาส์เหนือชื่อ',
-  'help.guide.place-participants.step.3': 'ปุ่ม + แบบเส้นประจะปรากฏทันทีที่มีคนไม่อยู่ในรายชื่อ คลิกเพื่อดูว่าใครไม่ได้ไปจุดแวะนี้',
-  'help.guide.place-participants.step.4': 'คลิกชื่อเพื่อเพิ่มกลับเข้ามา เมื่อทุกคนกลับเข้ามาแล้ว จุดแวะจะเป็นของทั้งกลุ่มอีกครั้ง',
-  'help.guide.place-participants.result': 'จุดแวะจะมีนักเดินทางที่คุณเลือก และคนที่เหลือในกลุ่มจะมีบ่ายนั้นเป็นเวลาของตัวเอง',
+  'help.guide.place-participants.step.2':
+    'คลิกชิปของนักเดินทางเพื่อนำออกจากจุดแวะนี้ ชื่อจะมีขีดฆ่าเมื่อคุณวางเมาส์เหนือชื่อ',
+  'help.guide.place-participants.step.3':
+    'ปุ่ม + แบบเส้นประจะปรากฏทันทีที่มีคนไม่อยู่ในรายชื่อ คลิกเพื่อดูว่าใครไม่ได้ไปจุดแวะนี้',
+  'help.guide.place-participants.step.4':
+    'คลิกชื่อเพื่อเพิ่มกลับเข้ามา เมื่อทุกคนกลับเข้ามาแล้ว จุดแวะจะเป็นของทั้งกลุ่มอีกครั้ง',
+  'help.guide.place-participants.result':
+    'จุดแวะจะมีนักเดินทางที่คุณเลือก และคนที่เหลือในกลุ่มจะมีบ่ายนั้นเป็นเวลาของตัวเอง',
   'help.guide.place-participants.tip.1':
     'ผู้เข้าร่วม จะแสดงเฉพาะเมื่อเลือกจุดแวะไว้ จึงควรเลือกสถานที่จากภายในวันแทนคอลัมน์สถานที่ และแสดงเฉพาะในทริปที่มีนักเดินทางมากกว่าหนึ่งคน',
   'help.guide.place-participants.tip.2':
@@ -1897,37 +2114,50 @@ const help: TranslationStrings = {
   // place-booking
   'help.guide.place-booking.title': 'การจองของจุดแวะ',
   'help.guide.place-booking.goal': 'อ่านการจองที่ผูกกับจุดแวะ เปิดดู และปักการจองใหม่ไว้กับจุดแวะนั้น',
-  'help.guide.place-booking.step.1': 'เปิดจุดแวะที่การจองนั้นผูกอยู่ การ์ดจะแสดงแถบที่มี ยืนยันแล้ว หรือ รอดำเนินการ พร้อมชื่อของการจอง',
+  'help.guide.place-booking.step.1':
+    'เปิดจุดแวะที่การจองนั้นผูกอยู่ การ์ดจะแสดงแถบที่มี ยืนยันแล้ว หรือ รอดำเนินการ พร้อมชื่อของการจอง',
   'help.guide.place-booking.step.2': 'แถบนี้แสดง วันที่ เวลา และ รหัสการจอง รวมถึงหมายเหตุใดๆ ที่การจองมี',
-  'help.guide.place-booking.step.3': 'คลิกที่แถบ แบบฟอร์มของการจองนั้นจะเปิดขึ้นมา',
-  'help.guide.place-booking.step.4': 'เชื่อมโยงกับแผนประจำวัน คือสิ่งที่ปักการจองไว้กับจุดแวะ และในที่นี้ระบุจุดแวะนี้ไว้แล้ว ปิดแบบฟอร์มอีกครั้ง',
+  'help.guide.place-booking.step.3': 'คลิกที่แถบ การจองจะเปิดขึ้นเหนือแผนที่',
+  'help.guide.place-booking.step.4':
+    'แก้ไข ที่ด้านล่างของการจองจะเปิดแบบฟอร์มของการจองนั้น เชื่อมโยงกับแผนประจำวัน ในแบบฟอร์มคือสิ่งที่ปักการจองไว้กับจุดแวะ และในที่นี้ระบุจุดแวะนี้ไว้แล้ว ปิดแบบฟอร์มอีกครั้ง',
   'help.guide.place-booking.step.5':
     'การจองใหม่สำหรับจุดแวะเริ่มจากคอลัมน์วัน: วางเมาส์เหนือจุดแวะแล้วคลิก + ที่ท้ายแถว แบบฟอร์มจะเปิดเป็น การจองใหม่ ซึ่งเชื่อมโยงกับจุดแวะนั้นไว้แล้ว',
-  'help.guide.place-booking.result': 'การจองผูกอยู่กับจุดแวะ: แสดงบนการ์ด อยู่ในวันนั้น และไฟล์ของการจองก็แสดงอยู่ใต้ ไฟล์ ตรงนี้ด้วย',
-  'help.guide.place-booking.tip.1': 'แถบจะแสดงเฉพาะที่จุดแวะที่การจองถูกปักไว้เท่านั้น การจองที่ไม่มีจุดแวะจะอยู่ในแท็บ จอง',
-  'help.guide.place-booking.tip.2': 'การจองหลายรายการใช้จุดแวะเดียวกันได้ เช่น มื้อกลางวันกับทัวร์ที่ออกเดินทางจากหน้าประตูเดียวกัน',
-  'help.guide.place-booking.tip.3': 'รถไฟ เที่ยวบิน หรือเรือเฟอร์รี่ จะเปิดแบบฟอร์มการขนส่งแทน ซึ่งเป็นแบบฟอร์มเดียวกับที่แท็บ การขนส่ง ใช้',
+  'help.guide.place-booking.result':
+    'การจองผูกอยู่กับจุดแวะ: แสดงบนการ์ด อยู่ในวันนั้น และไฟล์ของการจองก็แสดงอยู่ใต้ ไฟล์ ตรงนี้ด้วย',
+  'help.guide.place-booking.tip.1':
+    'แถบจะแสดงเฉพาะที่จุดแวะที่การจองถูกปักไว้เท่านั้น การจองที่ไม่มีจุดแวะจะอยู่ในแท็บ จอง',
+  'help.guide.place-booking.tip.2':
+    'การจองหลายรายการใช้จุดแวะเดียวกันได้ เช่น มื้อกลางวันกับทัวร์ที่ออกเดินทางจากหน้าประตูเดียวกัน',
+  'help.guide.place-booking.tip.3':
+    'รถไฟ เที่ยวบิน หรือเรือเฟอร์รี่ จะเปิดแบบฟอร์มการขนส่งแทน ซึ่งเป็นแบบฟอร์มเดียวกับที่แท็บ การขนส่ง ใช้',
   // place-files
   'help.guide.place-files.title': 'เก็บตั๋วของสถานที่ไว้กับสถานที่นั้น',
   'help.guide.place-files.goal': 'เก็บตั๋ว บัตรกำนัล หรือแผนที่ของสถานที่ไว้ตรงที่คุณจะมองหา',
-  'help.guide.place-files.step.1': 'เปิดสถานที่ ไฟล์ อยู่ที่ด้านล่างของการ์ด และแสดงคำว่า ไฟล์ ตราบใดที่สถานที่ยังไม่มีไฟล์',
+  'help.guide.place-files.step.1':
+    'เปิดสถานที่ ไฟล์ อยู่ที่ด้านล่างของการ์ด และแสดงคำว่า ไฟล์ ตราบใดที่สถานที่ยังไม่มีไฟล์',
   'help.guide.place-files.step.2': 'คลิก อัปโหลด ที่อยู่ข้างๆ แล้วเลือกไฟล์',
   'help.guide.place-files.step.3': 'ปุ่มจะนับจำนวนไฟล์ที่สถานที่มี และรายการจะเปิดขึ้นเอง',
   'help.guide.place-files.step.4': 'แต่ละแถวคือชื่อไฟล์พร้อมขนาด คลิกเพื่อเปิดไฟล์',
   'help.guide.place-files.result': 'ไฟล์อยู่กับสถานที่ นับรวมอยู่ในการ์ด และยังอยู่ในแท็บ ไฟล์ ของทริปด้วย',
-  'help.guide.place-files.tip.1': 'ไฟล์ ยังแสดงสิ่งที่แนบอยู่กับการจองของจุดแวะนี้ด้วย ใบยืนยันการจองโรงแรมจึงปรากฏที่โรงแรม',
+  'help.guide.place-files.tip.1':
+    'ไฟล์ ยังแสดงสิ่งที่แนบอยู่กับการจองของจุดแวะนี้ด้วย ใบยืนยันการจองโรงแรมจึงปรากฏที่โรงแรม',
   'help.guide.place-files.tip.2': 'อัปโหลด รับได้หลายไฟล์พร้อมกัน',
-  'help.guide.place-files.tip.3': 'หากไม่มีสิทธิ์อัปโหลดไฟล์ ปุ่ม อัปโหลด จะไม่ปรากฏ แต่ไฟล์ที่อยู่กับสถานที่แล้วยังคงอยู่',
+  'help.guide.place-files.tip.3':
+    'หากไม่มีสิทธิ์อัปโหลดไฟล์ ปุ่ม อัปโหลด จะไม่ปรากฏ แต่ไฟล์ที่อยู่กับสถานที่แล้วยังคงอยู่',
   // place-navigation
   'help.guide.place-navigation.title': 'เปิดสถานที่ในแอปแผนที่หรือบนเว็บไซต์',
   'help.guide.place-navigation.goal': 'ส่งต่อสถานที่ไปยังแอปที่จะพาคุณไปถึงจริงๆ',
   'help.guide.place-navigation.step.1': 'เปิดสถานที่แล้วคลิก การนำทาง ในแถวด้านล่าง',
   'help.guide.place-navigation.step.2':
     'รายการนี้คือแอปแผนที่ที่เหมาะกับสถานที่นี้: Google แผนที่, Waze, Apple Maps, OpenStreetMap และ โคแมปส์',
-  'help.guide.place-navigation.step.3': 'คลิกแอปที่คุณใช้ TREK จะส่งตัวสถานที่ให้แอปเมื่อทำได้ ไม่ใช่แค่พิกัดคู่หนึ่ง คุณจึงไปถึงทางเข้าที่ถูกต้อง',
-  'help.guide.place-navigation.step.4': 'เปิดเว็บไซต์ ที่อยู่ข้างๆ จะเปิดหน้าของสถานที่เอง พร้อมเวลาทำการและตั๋ว ในแท็บใหม่',
-  'help.guide.place-navigation.result': 'แอปแผนที่จะเปิดที่สถานที่ เว็บไซต์เปิดในแท็บของตัวเอง และไม่มีอะไรในทริปเปลี่ยนแปลง',
-  'help.guide.place-navigation.tip.1': 'Waze เริ่มนำทางทันที แอปอื่นจะเปิดสถานที่ และการเริ่มนำทางจากตรงนั้นใช้การแตะอีกครั้งเดียว',
+  'help.guide.place-navigation.step.3':
+    'คลิกแอปที่คุณใช้ TREK จะส่งตัวสถานที่ให้แอปเมื่อทำได้ ไม่ใช่แค่พิกัดคู่หนึ่ง คุณจึงไปถึงทางเข้าที่ถูกต้อง',
+  'help.guide.place-navigation.step.4':
+    'เปิดเว็บไซต์ ที่อยู่ข้างๆ จะเปิดหน้าของสถานที่เอง พร้อมเวลาทำการและตั๋ว ในแท็บใหม่',
+  'help.guide.place-navigation.result':
+    'แอปแผนที่จะเปิดที่สถานที่ เว็บไซต์เปิดในแท็บของตัวเอง และไม่มีอะไรในทริปเปลี่ยนแปลง',
+  'help.guide.place-navigation.tip.1':
+    'Waze เริ่มนำทางทันที แอปอื่นจะเปิดสถานที่ และการเริ่มนำทางจากตรงนั้นใช้การแตะอีกครั้งเดียว',
   'help.guide.place-navigation.tip.2':
     'แอปที่มีให้เลือกขึ้นอยู่กับสถานที่และอุปกรณ์ของคุณ: Apple Maps จะไม่แสดงบน Android, 高德地图 จะปรากฏเฉพาะสถานที่ในประเทศจีน ส่วน Waze, Apple Maps และ โคแมปส์ ต้องใช้พิกัดของสถานที่',
   'help.guide.place-navigation.tip.3': 'เมื่อมีเพียงแอปเดียวที่ใช้ได้ ปุ่มจะแสดงชื่อแอปนั้นและเปิดแอปทันที',
@@ -1939,8 +2169,10 @@ const help: TranslationStrings = {
     'บันทึกลงในรายการ จะแสดงทุกรายการที่คุณเป็นเจ้าของหรือแบ่งปัน เครื่องหมายถูกระบุรายการที่มีสถานที่นี้อยู่แล้ว',
   'help.guide.place-to-collection.step.3': 'คลิกรายการ สถานที่จะอยู่ในรายการนั้นทันที',
   'help.guide.place-to-collection.step.4': 'คลิก ปิด แล้วปุ่มบนการ์ดจะแสดงว่า บันทึกแล้ว',
-  'help.guide.place-to-collection.result': 'สถานที่อยู่ในรายการของคุณพร้อมรูปภาพ หมายเหตุ และที่อยู่ พร้อมสำหรับทริปถัดไป',
-  'help.guide.place-to-collection.tip.1': 'ปุ่มนี้จะมีเฉพาะเมื่อเปิดส่วนเสริม คอลเลกชัน อยู่ ซึ่งผู้ดูแลระบบเปิดได้ใน ส่วนเสริม',
+  'help.guide.place-to-collection.result':
+    'สถานที่อยู่ในรายการของคุณพร้อมรูปภาพ หมายเหตุ และที่อยู่ พร้อมสำหรับทริปถัดไป',
+  'help.guide.place-to-collection.tip.1':
+    'ปุ่มนี้จะมีเฉพาะเมื่อเปิดส่วนเสริม คอลเลกชัน อยู่ ซึ่งผู้ดูแลระบบเปิดได้ใน ส่วนเสริม',
   'help.guide.place-to-collection.tip.2':
     'สถานที่หนึ่งอยู่ในหลายรายการพร้อมกันได้ โดยมีสถานะของตัวเองในแต่ละรายการ: เป็นไอเดียในรายการหนึ่ง และเยี่ยมชมแล้วในอีกรายการ',
   'help.guide.place-to-collection.tip.3':
@@ -1955,8 +2187,10 @@ const help: TranslationStrings = {
   'help.guide.place-track.step.5':
     'ช่องเส้นประทางซ้าย สีอัตโนมัติ จะคืนสีที่แทร็กสืบทอดมา ส่วนหลอดดูดสีทางขวาจะเปิดตัวเลือกสีของระบบสำหรับสีอื่นๆ',
   'help.guide.place-track.result': 'แทร็กจะถูกวาดด้วยสีที่คุณเลือก ทั้งในการ์ด บนแถวในคอลัมน์สถานที่ และบนแผนที่',
-  'help.guide.place-track.tip.1': 'เฉพาะสถานที่ที่มีเส้นทาง ซึ่งนำเข้าจากไฟล์ GPX, KML หรือ KMZ เท่านั้นที่มีสองส่วนนี้',
-  'help.guide.place-track.tip.2': 'แทร็กที่บันทึกความสูงไว้จะแสดงจุดสูงสุดและต่ำสุด ระยะขึ้นและลงเป็นเมตร และโปรไฟล์ของเส้นทางด้วย',
+  'help.guide.place-track.tip.1':
+    'เฉพาะสถานที่ที่มีเส้นทาง ซึ่งนำเข้าจากไฟล์ GPX, KML หรือ KMZ เท่านั้นที่มีสองส่วนนี้',
+  'help.guide.place-track.tip.2':
+    'แทร็กที่บันทึกความสูงไว้จะแสดงจุดสูงสุดและต่ำสุด ระยะขึ้นและลงเป็นเมตร และโปรไฟล์ของเส้นทางด้วย',
   'help.guide.place-track.tip.3': 'การนำเข้าจะกำหนดสีเฉพาะให้ทุกแทร็กที่นำเข้ามา สองเส้นทางจึงไม่มีทางได้สีเดียวกัน',
 
   // ── Screen: trip-day-detail ───────────────────────────────────────────────────────────
@@ -1973,7 +2207,8 @@ const help: TranslationStrings = {
     'การจอง แสดงการจองของวันนั้น แต่ละรายการพร้อมประเภท จุดแวะที่ผูกอยู่ และเวลา สีเขียวหมายถึงยืนยันแล้ว สีเหลืองอำพันหมายถึงยังรอดำเนินการ ส่วนนี้ใช้อ่านอย่างเดียว การจองจะเปลี่ยนได้ที่ การจอง',
   'help.ctx.trip-day-detail.bullet.5':
     'ที่พัก แสดงทุกคืนที่จองไว้ในวันนี้ พร้อม เช็คอิน และ เช็คเอาท์ ในวันที่เกิดขึ้น ช่วงเวลาเช็คอิน เวลาเช็คเอาท์ และหมายเลขยืนยัน',
-  'help.ctx.trip-day-detail.bullet.6': 'เพิ่มที่พัก ใช้จองคืนพักในวันนี้: เลือกที่พักจากสถานที่ของทริป ระบุวันที่ครอบคลุม แล้วเพิ่มเวลาและรหัส',
+  'help.ctx.trip-day-detail.bullet.6':
+    'เพิ่มที่พัก ใช้จองคืนพักในวันนี้: เลือกที่พักจากสถานที่ของทริป ระบุวันที่ครอบคลุม แล้วเพิ่มเวลาและรหัส',
   // day-panel
   'help.guide.day-panel.title': 'เปิดวันและอ่านรายละเอียด',
   'help.guide.day-panel.goal': 'ดูวันหนึ่งทั้งวัน ทั้งสภาพอากาศ การจอง และที่ที่คุณพัก โดยไม่ต้องออกจากแผนที่',
@@ -1987,17 +2222,20 @@ const help: TranslationStrings = {
   'help.guide.day-panel.result':
     'เมื่อพับเป็นแถบ แผงจะเปิดพื้นที่แผนที่และยังคงเลือกวันไว้ เมื่อปิด วันจะถูกยกเลิกการเลือกและแผนจะกลับเป็นเหมือนเดิม',
   'help.guide.day-panel.tip.1': 'คลิกที่ใดก็ได้บนแถบส่วนหัวของแผงก็พับแผงได้เช่นกัน ลูกศรเป็นเพียงปุ่มสำหรับสิ่งนี้',
-  'help.guide.day-panel.tip.2': 'การเปิดสถานที่จากคอลัมน์สถานที่จะแสดงรายละเอียดของสถานที่แทนที่แผง ปิดรายละเอียดแล้ววันจะกลับมา',
+  'help.guide.day-panel.tip.2':
+    'การเปิดสถานที่จากคอลัมน์สถานที่จะแสดงรายละเอียดของสถานที่แทนที่แผง ปิดรายละเอียดแล้ววันจะกลับมา',
   // day-weather
   'help.guide.day-weather.title': 'อ่านสภาพอากาศของวัน',
   'help.guide.day-weather.goal': 'รู้ว่าวันนั้นอากาศจะเป็นอย่างไรในที่ที่คุณอยู่จริงในวันนั้น',
   'help.guide.day-weather.step.1':
     'พยากรณ์อากาศสำหรับ ระบุสถานที่ที่ตัวเลขเหล่านี้ใช้: จุดแวะแรกของวัน หรือในวันที่ไม่มีจุดแวะ คือโรงแรมที่คุณตื่นนอน',
-  'help.guide.day-weather.step.2': 'ตัวเลขใหญ่คืออุณหภูมิของวัน ข้างๆ คืออุณหภูมิต่ำสุดและสูงสุด และสภาพอากาศเป็นคำบรรยาย',
+  'help.guide.day-weather.step.2':
+    'ตัวเลขใหญ่คืออุณหภูมิของวัน ข้างๆ คืออุณหภูมิต่ำสุดและสูงสุด และสภาพอากาศเป็นคำบรรยาย',
   'help.guide.day-weather.step.3': 'ป้ายด้านล่าง: โอกาสฝนตก ปริมาณฝน ลมแรงสุด และเวลาพระอาทิตย์ขึ้นและตก',
   'help.guide.day-weather.step.4':
     'ด้านล่างสุดคือรายชั่วโมงของวัน ทุกสองชั่วโมง: เวลา ไอคอน อุณหภูมิ และโอกาสฝนตก ชั่วโมงที่เกิน 50 เปอร์เซ็นต์จะแรเงาเป็นสีฟ้า',
-  'help.guide.day-weather.result': 'การ์ดของวันในคอลัมน์วันแสดงสภาพอากาศเดียวกันแบบย่อใต้หมายเลขวัน จึงอ่านทั้งทริปได้ในแวบเดียว',
+  'help.guide.day-weather.result':
+    'การ์ดของวันในคอลัมน์วันแสดงสภาพอากาศเดียวกันแบบย่อใต้หมายเลขวัน จึงอ่านทั้งทริปได้ในแวบเดียว',
   'help.guide.day-weather.tip.1':
     'องศาและลมเป็นไปตาม หน่วยอุณหภูมิ ใน ทั่วไป ของ การตั้งค่า: เลือก °F Fahrenheit แล้วพยากรณ์เดียวกันจะแสดงเป็น °F และ mph',
   'help.guide.day-weather.tip.2':
@@ -2010,10 +2248,13 @@ const help: TranslationStrings = {
   'help.guide.rename-day.step.1': 'เปิดวัน ส่วนหัวจะแสดง วันที่ 5 พร้อมวันที่อยู่ด้านล่าง',
   'help.guide.rename-day.step.2': 'คลิกไอคอนดินสอข้างชื่อ',
   'help.guide.rename-day.step.3': 'ชื่อจะกลายเป็นช่องกรอก พิมพ์ชื่อที่คุณต้องการ',
-  'help.guide.rename-day.step.4': 'กด Enter หรือแค่คลิกที่อื่น ส่วน Escape จะยกเลิกการเปลี่ยนแปลง การ์ดของวันในคอลัมน์วันก็จะแสดงชื่อนี้ด้วย',
+  'help.guide.rename-day.step.4':
+    'กด Enter หรือแค่คลิกที่อื่น ส่วน Escape จะยกเลิกการเปลี่ยนแปลง การ์ดของวันในคอลัมน์วันก็จะแสดงชื่อนี้ด้วย',
   'help.guide.rename-day.result': 'ชื่อจะแทนที่ วันที่ 5 ในแผงและบนการ์ดของวันในคอลัมน์วัน ส่วนวันที่ยังอยู่ที่เดิม',
-  'help.guide.rename-day.tip.1': 'ล้างช่องแล้วบันทึก วันจะกลับเป็น วันที่ 5 อีกครั้ง: หมายเลขคือสิ่งที่แสดงเมื่อไม่มีชื่อ',
-  'help.guide.rename-day.tip.2': 'ชื่อเป็นของวัน ไม่ใช่ของวันที่ หากจัดลำดับวันใหม่ ชื่อจะย้ายไปพร้อมกับทุกอย่างในวันนั้น',
+  'help.guide.rename-day.tip.1':
+    'ล้างช่องแล้วบันทึก วันจะกลับเป็น วันที่ 5 อีกครั้ง: หมายเลขคือสิ่งที่แสดงเมื่อไม่มีชื่อ',
+  'help.guide.rename-day.tip.2':
+    'ชื่อเป็นของวัน ไม่ใช่ของวันที่ หากจัดลำดับวันใหม่ ชื่อจะย้ายไปพร้อมกับทุกอย่างในวันนั้น',
   // add-accommodation
   'help.guide.add-accommodation.title': 'จองคืนพักในวันหนึ่ง',
   'help.guide.add-accommodation.goal': 'ใส่โรงแรมลงในแผนครั้งเดียว พร้อมวันที่ครอบคลุม เวลา และหมายเลขยืนยัน',
@@ -2028,14 +2269,17 @@ const help: TranslationStrings = {
   'help.guide.add-accommodation.step.6': 'คลิก บันทึก',
   'help.guide.add-accommodation.result':
     'การพักจะแสดงในทุกวันที่ครอบคลุม โดยมี เช็คอิน ในวันแรกและ เช็คเอาท์ ในวันสุดท้าย ที่พักจะกลายเป็นจุดแวะในวันเช็คอิน แผนที่จึงวาดเส้นทางไปที่นั่น และการจองประเภท ที่พัก จะปรากฏใน การจอง',
-  'help.guide.add-accommodation.tip.1': 'ตัวเลือกจะเปิดที่วันที่คุณมาจาก โดยเช็คเอาท์เป็นวันถัดไป ทั้งสองอย่างเลื่อนได้ก่อนบันทึก',
+  'help.guide.add-accommodation.tip.1':
+    'ตัวเลือกจะเปิดที่วันที่คุณมาจาก โดยเช็คเอาท์เป็นวันถัดไป ทั้งสองอย่างเลื่อนได้ก่อนบันทึก',
   'help.guide.add-accommodation.tip.2':
     'กำหนดหมวดหมู่ Hotel ให้โรงแรมตอนสร้าง แล้วป้ายด้านบนรายการจะกรองให้เหลือเฉพาะโรงแรมของคุณในคลิกเดียว',
-  'help.guide.add-accommodation.tip.3': 'เวลาทั้งหมดไม่บังคับ: การพักที่ไม่มีเวลาเช็คอินและไม่มีรหัสก็ยังครอบคลุมคืนของมันและยังวาดเส้นทาง',
+  'help.guide.add-accommodation.tip.3':
+    'เวลาทั้งหมดไม่บังคับ: การพักที่ไม่มีเวลาเช็คอินและไม่มีรหัสก็ยังครอบคลุมคืนของมันและยังวาดเส้นทาง',
   // edit-accommodation
   'help.guide.edit-accommodation.title': 'เปลี่ยนหรือยกเลิกคืนพักที่จองไว้',
   'help.guide.edit-accommodation.goal': 'ย้ายการพัก แก้ไขเวลา หรือนำออกจากแผนอีกครั้ง',
-  'help.guide.edit-accommodation.step.1': 'ในทุกวันของการพัก การ์ดจะแสดงที่พัก ช่วงเวลาเช็คอิน เวลาเช็คเอาท์ และหมายเลขยืนยัน',
+  'help.guide.edit-accommodation.step.1':
+    'ในทุกวันของการพัก การ์ดจะแสดงที่พัก ช่วงเวลาเช็คอิน เวลาเช็คเอาท์ และหมายเลขยืนยัน',
   'help.guide.edit-accommodation.step.2': 'ไอคอนดินสอทางขวาจะเปิดการพักอีกครั้ง ป๊อปอัปจะแสดงว่า แก้ไขที่พัก',
   'help.guide.edit-accommodation.step.3':
     'แก้ไขแถวของช่อง: เช็คอิน, เช็กอินได้ถึง, เช็คเอาท์ และ การยืนยัน วันด้านบนและที่พักด้านล่างก็เปลี่ยนได้ที่นี่เช่นกัน',
@@ -2044,21 +2288,27 @@ const help: TranslationStrings = {
     'X ข้างไอคอนดินสอจะยกเลิกการพักโดยไม่ถามอะไร และการจองประเภท ที่พัก ที่ผูกกับการพักนั้นจะถูกลบไปด้วย',
   'help.guide.edit-accommodation.result':
     'การเปลี่ยนแปลงจะมีผลกับทุกวันที่การพักครอบคลุมในครั้งเดียว รวมถึงการจองประเภท ที่พัก ใน การจอง ด้วย',
-  'help.guide.edit-accommodation.tip.1': 'คืนที่อยู่กลางการพักจะไม่มีป้าย เช็คอิน หรือ เช็คเอาท์: มีเฉพาะวันแรกและวันสุดท้ายของช่วงเท่านั้น',
+  'help.guide.edit-accommodation.tip.1':
+    'คืนที่อยู่กลางการพักจะไม่มีป้าย เช็คอิน หรือ เช็คเอาท์: มีเฉพาะวันแรกและวันสุดท้ายของช่วงเท่านั้น',
   'help.guide.edit-accommodation.tip.2':
     'การยกเลิกการพักจะลบจุดแวะที่เพิ่มไว้ในวันเช็คอินและค่าใช้จ่ายที่แนบกับการจองนั้นไปด้วย หากเป็นความผิดพลาด ให้จองคืนพักใหม่อีกครั้ง',
   // day-bookings
   'help.guide.day-bookings.title': 'การจองของวันในแวบเดียว',
   'help.guide.day-bookings.goal': 'ดูในที่เดียวว่ามีอะไรจองไว้แล้วสำหรับวันนี้ และยืนยันแล้วหรือยัง',
-  'help.guide.day-bookings.step.1': 'การจอง แสดงการจองของวัน: รายการที่ลงวันที่ไว้ในวันนั้น และรายการที่ผูกกับจุดแวะใดจุดแวะหนึ่งของวัน',
+  'help.guide.day-bookings.step.1':
+    'การจอง แสดงการจองของวัน: รายการที่ลงวันที่ไว้ในวันนั้น และรายการที่ผูกกับจุดแวะใดจุดแวะหนึ่งของวัน',
   'help.guide.day-bookings.step.2':
     'แต่ละแถวแสดงประเภทของการจอง ชื่อ และหากผูกกับจุดแวะ ก็จะแสดงจุดแวะนั้นหลังจุดคั่น เวลาอยู่ที่ปลายด้านขวา',
   'help.guide.day-bookings.step.3':
     'สีบอกสถานะของการจอง: แถวสีเขียวคือยืนยันแล้ว แถวสีเหลืองอำพันคือยังรอดำเนินการ โรงแรมไม่อยู่ในรายการนี้ แต่มีส่วนของตัวเองอยู่ด้านล่าง',
-  'help.guide.day-bookings.step.4': 'รายการนี้แสดงการจองให้อ่านเท่านั้น การจองจะสร้างและเปลี่ยนแปลงได้ที่ การจอง',
-  'help.guide.day-bookings.result': 'ทุกอย่างที่ลงวันที่ไว้ในวันนั้น และทุกอย่างที่ผูกกับจุดแวะของวัน อยู่ในรายการเดียวนี้',
-  'help.guide.day-bookings.tip.1': 'การจองจะอยู่ในวันตามวันที่ของตัวเอง เปลี่ยนวันที่ใน การจอง แล้วการจองจะย้ายไปอีกวันเอง',
-  'help.guide.day-bookings.tip.2': 'ถ้าไม่มีส่วน การจอง แสดงว่าวันนั้นไม่มีการจอง: ส่วนนี้จะถูกซ่อนแทนที่จะแสดงว่างเปล่า',
+  'help.guide.day-bookings.step.4':
+    'คลิกที่แถวแล้วการจองจะเปิดขึ้น แก้ไข ที่ด้านล่างใช้เปลี่ยนการจองนั้น ส่วนการจองใหม่สร้างได้ที่ การจอง',
+  'help.guide.day-bookings.result':
+    'ทุกอย่างที่ลงวันที่ไว้ในวันนั้น และทุกอย่างที่ผูกกับจุดแวะของวัน อยู่ในรายการเดียวนี้',
+  'help.guide.day-bookings.tip.1':
+    'การจองจะอยู่ในวันตามวันที่ของตัวเอง เปลี่ยนวันที่ใน การจอง แล้วการจองจะย้ายไปอีกวันเอง',
+  'help.guide.day-bookings.tip.2':
+    'ถ้าไม่มีส่วน การจอง แสดงว่าวันนั้นไม่มีการจอง: ส่วนนี้จะถูกซ่อนแทนที่จะแสดงว่างเปล่า',
 
   // ── Screen: trip-map ──────────────────────────────────────────────────────────────────
   'help.ctx.trip-map.title': 'แผนที่',
@@ -2068,7 +2318,8 @@ const help: TranslationStrings = {
     'หมุดคือสถานที่: เป็นรูปของสถานที่เองถ้ามี ไม่เช่นนั้นเป็นสีของหมวดหมู่พร้อมไอคอนหมวดหมู่ วางเมาส์บนหมุดเพื่อดูการ์ดที่มีชื่อและที่อยู่ รวมถึงหมวดหมู่และคะแนนเมื่อสถานที่มีข้อมูลเหล่านั้น ลากหมุดไปวางบนการ์ดของวันเพื่อวางแผนสถานที่ในวันนั้น',
   'help.ctx.trip-map.bullet.2':
     'หมุดที่อยู่ใกล้กันจนแยกไม่ออกจะรวมเป็นวงกลมสีเข้มหนึ่งวงพร้อมตัวเลข คลิกวงกลมแล้วแผนที่จะซูมไปยังสิ่งที่อยู่ข้างใน',
-  'help.ctx.trip-map.bullet.3': 'คลิกหมุดเพื่อเปิดสถานที่ใต้แผนที่ พร้อมคะแนน ไฟล์ และสิ่งที่ทำต่อได้ คลิกพื้นที่ว่างบนแผนที่เพื่อยกเลิกการเลือก',
+  'help.ctx.trip-map.bullet.3':
+    'คลิกหมุดเพื่อเปิดสถานที่ใต้แผนที่ พร้อมคะแนน ไฟล์ และสิ่งที่ทำต่อได้ คลิกพื้นที่ว่างบนแผนที่เพื่อยกเลิกการเลือก',
   'help.ctx.trip-map.bullet.4':
     'เมื่อเปิดวันในคอลัมน์วัน จุดแวะของวันนั้นจะมีป้ายสีขาวเล็กๆ แสดงลำดับในวันนั้น และสถานที่ที่วางแผนไว้สองวันจะมีทั้งสองหมายเลขคั่นด้วย ·',
   'help.ctx.trip-map.bullet.5':
@@ -2094,13 +2345,16 @@ const help: TranslationStrings = {
     'ลากหมุดออกจากแผนที่ไปวางบนการ์ดของวันในคอลัมน์วัน สถานที่จะถูกวางแผนในวันนั้น เหมือนกับการลากแถวออกจากรายการสถานที่',
   'help.guide.map-markers.result':
     'ไม่มีอะไรในทริปเปลี่ยนแปลง: แผนที่เป็นเพียงมุมมองของทริป และหมุดทุกอันบอกว่าเป็นสถานที่ใด วันไหน และลำดับที่เท่าไร',
-  'help.guide.map-markers.tip.1': 'วันที่พับปิดในคอลัมน์วันจะนำจุดแวะของวันนั้นออกจากแผนที่ไปด้วย เปิดวันอีกครั้งแล้วจุดแวะจะกลับมา',
+  'help.guide.map-markers.tip.1':
+    'วันที่พับปิดในคอลัมน์วันจะนำจุดแวะของวันนั้นออกจากแผนที่ไปด้วย เปิดวันอีกครั้งแล้วจุดแวะจะกลับมา',
   'help.guide.map-markers.tip.2':
     'ตัวกรองเหนือรายการสถานที่กำหนดสิ่งที่แผนที่วาดด้วย: เลือก ไม่ได้วางแผน แล้วบนแผนที่จะเหลือเฉพาะสถานที่ที่ยังไม่มีวัน',
-  'help.guide.map-markers.tip.3': 'แผนที่นี้ไม่มีปุ่มซูม: ใช้ล้อเมาส์เพื่อซูม ดับเบิลคลิกเพื่อซูมเข้าหนึ่งระดับ และลากแผนที่เพื่อเลื่อน',
+  'help.guide.map-markers.tip.3':
+    'แผนที่นี้ไม่มีปุ่มซูม: ใช้ล้อเมาส์เพื่อซูม ดับเบิลคลิกเพื่อซูมเข้าหนึ่งระดับ และลากแผนที่เพื่อเลื่อน',
   // map-nearby-places
   'help.guide.map-nearby-places.title': 'ค้นหาสถานที่รอบตัวคุณบนแผนที่',
-  'help.guide.map-nearby-places.goal': 'ให้แผนที่ค้นหาร้านอาหาร สถานที่ท่องเที่ยว หรือโรงแรมในย่านที่คุณกำลังดู แล้วเพิ่มสักแห่งเข้าในทริป',
+  'help.guide.map-nearby-places.goal':
+    'ให้แผนที่ค้นหาร้านอาหาร สถานที่ท่องเที่ยว หรือโรงแรมในย่านที่คุณกำลังดู แล้วเพิ่มสักแห่งเข้าในทริป',
   'help.guide.map-nearby-places.step.1':
     'แถวไอคอนด้านบนของแผนที่คือการค้นหาตามหมวดหมู่: ร้านอาหาร, คาเฟ่, บาร์และสถานบันเทิงยามค่ำคืน, ที่พัก, สถานที่ท่องเที่ยว, พิพิธภัณฑ์และวัฒนธรรม, ธรรมชาติและอุทยาน และ กิจกรรม',
   'help.guide.map-nearby-places.step.2':
@@ -2109,12 +2363,14 @@ const help: TranslationStrings = {
     'เลื่อนแผนที่แล้วปุ่มที่สองจะปรากฏใต้แถว: ค้นหาบริเวณนี้ จะค้นหาแบบเดิมสำหรับมุมมองใหม่ การเลื่อนอย่างเดียวจะไม่ค้นหาอีกครั้ง ซึ่งช่วยลดจำนวนคำขอ',
   'help.guide.map-nearby-places.step.4':
     'หมุดแสดงชื่อของสิ่งที่พบ คลิกหมุดแล้วแบบฟอร์มสถานที่จะเปิดขึ้นพร้อมข้อมูลที่กรอกไว้แล้ว: ชื่อ, ที่อยู่, ละติจูด และ ลองจิจูด รวมถึงเว็บไซต์และหมายเลขโทรศัพท์เมื่อ OpenStreetMap มีข้อมูล',
-  'help.guide.map-nearby-places.step.5': 'ตรวจสอบสิ่งที่กรอกไว้ และเพิ่มสิ่งที่การค้นหาไม่รู้: คำอธิบาย, หมวดหมู่ และหมายเหตุของคุณเอง',
+  'help.guide.map-nearby-places.step.5':
+    'ตรวจสอบสิ่งที่กรอกไว้ และเพิ่มสิ่งที่การค้นหาไม่รู้: คำอธิบาย, หมวดหมู่ และหมายเหตุของคุณเอง',
   'help.guide.map-nearby-places.step.6':
     'คลิก เพิ่ม หากมีสถานที่ชื่อเดียวกันอยู่ในทริปแล้ว แบบฟอร์มจะแจ้งให้ทราบและปุ่มจะเปลี่ยนเป็น เพิ่มต่อไป',
   'help.guide.map-nearby-places.result':
     'สถานที่อยู่ในรายการสถานที่และบนแผนที่เป็นหมุดหนึ่งของทริป อยู่ใต้ ไม่ได้วางแผน จนกว่าคุณจะใส่ลงในวัน หมุดจากการค้นหาจะยังอยู่จนกว่าคุณจะปิดหมวดหมู่',
-  'help.guide.map-nearby-places.tip.1': 'แถวนี้จะหายไปเมื่อปิด สำรวจสถานที่บนแผนที่ ใน การตั้งค่า ใต้ การเดินทางและแผนที่',
+  'help.guide.map-nearby-places.tip.1':
+    'แถวนี้จะหายไปเมื่อปิด สำรวจสถานที่บนแผนที่ ใน การตั้งค่า ใต้ การเดินทางและแผนที่',
   'help.guide.map-nearby-places.tip.2':
     'ผลลัพธ์มาจากดัชนี TREK Places และจาก OpenStreetMap นี่จึงเป็นหนึ่งในไม่กี่อย่างในแผนที่ต้องใช้การเชื่อมต่อ',
   'help.guide.map-nearby-places.tip.3':
@@ -2122,10 +2378,12 @@ const help: TranslationStrings = {
   // map-add-place
   'help.guide.map-add-place.title': 'สร้างสถานที่ด้วยการคลิกขวาบนแผนที่',
   'help.guide.map-add-place.goal': 'วางสถานที่ตรงจุดที่คุณต้องการ โดยไม่ต้องค้นหาก่อน',
-  'help.guide.map-add-place.step.1': 'คลิกขวาที่จุดบนแผนที่ที่คุณต้องการ แบบฟอร์มสถานที่จะเปิดขึ้นพร้อมหัวข้อ เพิ่มสถานที่/กิจกรรม',
+  'help.guide.map-add-place.step.1':
+    'คลิกขวาที่จุดบนแผนที่ที่คุณต้องการ แบบฟอร์มสถานที่จะเปิดขึ้นพร้อมหัวข้อ เพิ่มสถานที่/กิจกรรม',
   'help.guide.map-add-place.step.2':
     'ละติจูด และ ลองจิจูด ถูกตั้งไว้ที่จุดนั้นแล้ว และ TREK จะค้นหาพิกัดแล้วกรอก ที่อยู่ จากสิ่งที่พบ รวมถึง ชื่อ เมื่อการค้นหามีให้ ยังไม่มีอะไรถูกบันทึก จึงแก้ไขสิ่งที่ไม่ถูกต้องได้เลย',
-  'help.guide.map-add-place.step.3': 'ตั้ง ชื่อ ที่คุณจำได้ และข้อมูลอื่นที่แผนควรรู้: คำอธิบาย, หมายเหตุ, หมวดหมู่, เว็บไซต์',
+  'help.guide.map-add-place.step.3':
+    'ตั้ง ชื่อ ที่คุณจำได้ และข้อมูลอื่นที่แผนควรรู้: คำอธิบาย, หมายเหตุ, หมวดหมู่, เว็บไซต์',
   'help.guide.map-add-place.step.4':
     'คลิก เพิ่ม สถานที่จะเข้าไปอยู่ในรายการเป็นสถานที่ที่ยังไม่ได้วางแผน แม้จะเปิดวันอยู่ก็ตาม: การคลิกขวาบนแผนที่บอกว่าที่ไหน ไม่ใช่เมื่อไร',
   'help.guide.map-add-place.result': 'สถานที่อยู่ในรายการและบนแผนที่ ใต้ ไม่ได้วางแผน จนกว่าคุณจะใส่ลงในวัน',
@@ -2141,9 +2399,12 @@ const help: TranslationStrings = {
   'help.guide.map-satellite.step.2':
     'ตอนนี้แผนที่เป็นภาพถ่ายทางอากาศ ละเอียดพอจะเห็นอาคารแต่ละหลัง และไม่ต้องใช้คีย์ของคุณเอง ทุกอย่างที่ TREK วาดยังคงอยู่ด้านบน: หมุด เส้นทางของวัน แทร็ก และเส้นทางการจอง',
   'help.guide.map-satellite.step.3': 'ตอนนี้ปุ่มแสดงว่า สลับไปที่มุมมองแผนที่ คลิกเพื่อกลับไปยังแผนที่แบบวาด',
-  'help.guide.map-satellite.result': 'แผนที่กลับเป็นแบบวาดอีกครั้ง และชั้นที่คุณเลือกไว้ล่าสุดจะถูกจดจำไว้ในบัญชีของคุณ',
-  'help.guide.map-satellite.tip.1': 'ตัวเลือกนี้เก็บไว้ในบัญชีของคุณ ไม่ใช่ในทริป ทุกทริปจึงเปิดแบบที่คุณทิ้งไว้ ไม่ว่าคุณจะใช้ตัวแสดงผลแผนที่แบบใด',
-  'help.guide.map-satellite.tip.2': 'ภาพถ่ายไม่มีตัวอักษร: ชื่อถนน ย่าน และบ้านเลขที่อยู่บนแผนที่แบบวาด จึงควรสลับกลับเมื่อคุณกำลังหาที่อยู่',
+  'help.guide.map-satellite.result':
+    'แผนที่กลับเป็นแบบวาดอีกครั้ง และชั้นที่คุณเลือกไว้ล่าสุดจะถูกจดจำไว้ในบัญชีของคุณ',
+  'help.guide.map-satellite.tip.1':
+    'ตัวเลือกนี้เก็บไว้ในบัญชีของคุณ ไม่ใช่ในทริป ทุกทริปจึงเปิดแบบที่คุณทิ้งไว้ ไม่ว่าคุณจะใช้ตัวแสดงผลแผนที่แบบใด',
+  'help.guide.map-satellite.tip.2':
+    'ภาพถ่ายไม่มีตัวอักษร: ชื่อถนน ย่าน และบ้านเลขที่อยู่บนแผนที่แบบวาด จึงควรสลับกลับเมื่อคุณกำลังหาที่อยู่',
   // map-whole-trip
   'help.guide.map-whole-trip.title': 'ดูทั้งทริปและระยะทาง',
   'help.guide.map-whole-trip.goal': 'เปลี่ยนจากวันเดียวที่เปิดอยู่เป็นทุกวันเดินทางของทริป และดูว่าแต่ละวันไปไกลเท่าไร',
@@ -2158,7 +2419,8 @@ const help: TranslationStrings = {
     'ทุกวันเดินทางถูกวาดด้วยสีของตัวเอง และการ์ดบอกว่าแต่ละวันครอบคลุมระยะเท่าไรและทั้งทริปรวมเป็นเท่าไร',
   'help.guide.map-whole-trip.tip.1':
     'ยอดรวมจะมาทีละไม่กี่ช่วง ขณะที่ยังมี … ต่อท้าย ตัวเลขยังเป็นผลรวมบางส่วน และจะนิ่งเมื่อทุกช่วงได้รับคำตอบแล้ว',
-  'help.guide.map-whole-trip.tip.2': 'ช่วงที่ระบบหาเส้นทางปฏิเสธจะยังเป็นเส้นตรงและไม่ถูกนับ และการ์ดจะแจ้งไว้ แทนที่จะแสดงค่าต่ำไปเงียบๆ',
+  'help.guide.map-whole-trip.tip.2':
+    'ช่วงที่ระบบหาเส้นทางปฏิเสธจะยังเป็นเส้นตรงและไม่ถูกนับ และการ์ดจะแจ้งไว้ แทนที่จะแสดงค่าต่ำไปเงียบๆ',
   'help.guide.map-whole-trip.tip.3': 'วันที่มีจุดแวะที่มีตำแหน่งน้อยกว่าสองจุดไม่มีเส้นทางให้วาด จึงไม่แสดงในการ์ดเลย',
   // map-booking-routes
   'help.guide.map-booking-routes.title': 'แสดงเส้นทางของการจองบนแผนที่',
@@ -2179,7 +2441,8 @@ const help: TranslationStrings = {
     'ปลายเส้นจะแสดงรหัสสนามบินหรือชื่อสถานีเฉพาะเมื่อเปิด ป้ายกำกับเส้นทางการจอง ใน การตั้งค่า ใต้ การเดินทางและแผนที่ ไม่เช่นนั้นจะแสดงเพียงไอคอน',
   'help.guide.map-booking-routes.tip.2':
     'แสดงเส้นทางการจองเสมอ ในการตั้งค่าเดียวกัน จะวาดเส้นทางตั้งแต่เริ่มในทุกทริปที่คุณยังไม่ได้เลือกเอง',
-  'help.guide.map-booking-routes.tip.3': 'การจองต้องมีปลายทั้งสองที่มีพิกัดก่อนจึงจะวาดได้ โรงแรมหรือร้านอาหารจึงไม่มีไอคอนเส้นทาง',
+  'help.guide.map-booking-routes.tip.3':
+    'การจองต้องมีปลายทั้งสองที่มีพิกัดก่อนจึงจะวาดได้ โรงแรมหรือร้านอาหารจึงไม่มีไอคอนเส้นทาง',
 
   // map-dawarich-trail
   'help.guide.map-dawarich-trail.title': 'แสดงเส้นทางที่คุณเดินทางจริง',
@@ -2204,7 +2467,8 @@ const help: TranslationStrings = {
     'หมุนแผนที่ด้วยการลากปุ่มขวา หรือกด Ctrl ค้างแล้วลากด้วยปุ่มซ้าย บนหน้าจอสัมผัสให้บิดด้วยสองนิ้ว เข็มทิศกลมข้างแถวไอคอนหมวดหมู่ด้านบนของแผนที่จะหมุนตาม: ลูกศรชี้ทิศเหนือเสมอ จึงเอียงเท่ากับที่คุณหมุนไป',
   'help.guide.map-compass.step.2':
     'คลิกเข็มทิศ รีเซ็ตทิศเหนือ ซึ่งเป็นชื่อของปุ่มนี้ จะค่อยๆ หมุนแผนที่กลับให้ทิศเหนืออยู่ด้านบนและเป็นมุมมองแบนราบ และลูกศรจะตั้งตรงอีกครั้ง',
-  'help.guide.map-compass.result': 'แผนที่กลับมาหันทิศเหนือขึ้นและแบนราบอีกครั้ง และไม่มีอะไรในทริปเปลี่ยนแปลง: เข็มทิศขยับแค่มุมกล้อง',
+  'help.guide.map-compass.result':
+    'แผนที่กลับมาหันทิศเหนือขึ้นและแบนราบอีกครั้ง และไม่มีอะไรในทริปเปลี่ยนแปลง: เข็มทิศขยับแค่มุมกล้อง',
   'help.guide.map-compass.tip.1':
     'เข็มทิศมีเฉพาะบนแผนที่ MapLibre GL และ Mapbox GL เท่านั้น แผนที่ Leaflet หมุนไม่ได้ จึงไม่มีเข็มทิศ ผู้ให้บริการแผนที่ ใน การตั้งค่า ใต้ แผนที่ กำหนดว่าคุณใช้แบบใด และ บันทึกแผนที่ จะเก็บตัวเลือกไว้',
   'help.guide.map-compass.tip.2':
@@ -2237,7 +2501,8 @@ const help: TranslationStrings = {
   'help.guide.transports-list.step.4':
     'การ์ดบอกทุกอย่าง: จุดสถานะพร้อม รอดำเนินการ หรือ ยืนยันแล้ว ประเภท วันที่ครอบคลุมพร้อมวันที่ เวลา รหัสการจอง เส้นทาง และสายการบินกับหมายเลขเที่ยวบิน หรือหมายเลขรถไฟ ชานชาลา และที่นั่ง',
   'help.guide.transports-list.step.5': 'ไอคอนดินสอเปิดการขนส่งเพื่อแก้ไข ถังขยะจะลบหลังจากถามยืนยันโดยระบุว่าจะลบอะไร',
-  'help.guide.transports-list.result': 'รายการถูกกรองให้เหลือสิ่งที่คุณต้องการ และทุกการ์ดบอกในแวบเดียวว่าการเดินทางนั้นจองแล้วหรือยัง',
+  'help.guide.transports-list.result':
+    'รายการถูกกรองให้เหลือสิ่งที่คุณต้องการ และทุกการ์ดบอกในแวบเดียวว่าการเดินทางนั้นจองแล้วหรือยัง',
   'help.guide.transports-list.tip.1': 'ป้ายตัวกรองและกลุ่มที่พับไว้จะถูกจดจำแยกตามทริป แท็บจึงเปิดขึ้นแบบที่คุณทิ้งไว้',
   'help.guide.transports-list.tip.2':
     'นำเข้าจากไฟล์ และ AirTrail จะปรากฏข้าง ขนส่ง ในแถบเครื่องมือเฉพาะเมื่อเซิร์ฟเวอร์อ่านใบยืนยันการจองได้ และเมื่อเชื่อมต่ออินสแตนซ์ AirTrail ไว้ หากไม่มี รายการจะถูกกรอกด้วยตนเองและจากการค้นหาขนส่งสาธารณะ',
@@ -2265,7 +2530,8 @@ const help: TranslationStrings = {
     'นักเดินทาง ระบุว่าใครอยู่ในการเดินทางนี้ ทันทีที่การขนส่งใดมีนักเดินทาง แถบเครื่องมือของแท็บจะแสดงอวาตาร์ของพวกเขาและกรองรายการตามคนได้',
   // import-transport-file
   'help.guide.import-transport-file.title': 'อ่านเที่ยวบินจากตั๋วอิเล็กทรอนิกส์',
-  'help.guide.import-transport-file.goal': 'ให้ TREK ดึงเที่ยวบิน รถไฟ หรือเรือเฟอร์รี่ออกจากตั๋วที่ผู้ให้บริการส่งมา และตรวจสอบก่อนบันทึก',
+  'help.guide.import-transport-file.goal':
+    'ให้ TREK ดึงเที่ยวบิน รถไฟ หรือเรือเฟอร์รี่ออกจากตั๋วที่ผู้ให้บริการส่งมา และตรวจสอบก่อนบันทึก',
   'help.guide.import-transport-file.step.1':
     'คลิก นำเข้าจากไฟล์ ในแถบเครื่องมือของแท็บ การขนส่ง ข้าง ขนส่ง หน้าต่าง นำเข้าการยืนยันการจอง จะเปิดขึ้น ซึ่งเป็นหน้าต่างเดียวกับในแท็บ การจอง',
   'help.guide.import-transport-file.step.2':
@@ -2305,16 +2571,20 @@ const help: TranslationStrings = {
   // change-transit-route
   'help.guide.change-transit-route.title': 'เปิดและเปลี่ยนเส้นทางที่วางแผนไว้',
   'help.guide.change-transit-route.goal': 'ดูเส้นทางทีละจุดจอด เปลี่ยนชื่อ หรือค้นหาเส้นทางใหม่',
-  'help.guide.change-transit-route.step.1': 'ในแท็บ การขนส่ง เส้นทางที่วางแผนไว้อยู่ใต้ การขนส่งสาธารณะแบบอัตโนมัติ คลิกการ์ด',
+  'help.guide.change-transit-route.step.1':
+    'ในแท็บ การขนส่ง เส้นทางที่วางแผนไว้อยู่ใต้ การขนส่งสาธารณะแบบอัตโนมัติ คลิกการ์ด แล้วเส้นทางจะเปิดขึ้นเป็นการจอง',
   'help.guide.change-transit-route.step.2':
     'ระยะเวลา, การเปลี่ยนขบวน และ เดิน อยู่ด้านบน กำหนดการเดินทาง ด้านล่างแสดงเส้นทางทีละจุดจอด พร้อมชานชาลาและการเดินระหว่างสาย',
-  'help.guide.change-transit-route.step.3': 'เปลี่ยนเส้นทาง จะค้นหาอีกครั้ง โดยกรอกปลายทั้งสองและวันของเส้นทางนี้ไว้แล้ว',
+  'help.guide.change-transit-route.step.3':
+    'เปลี่ยนเส้นทาง ที่ด้านล่างของการจองจะค้นหาอีกครั้ง โดยกรอกปลายทั้งสองและวันของเส้นทางนี้ไว้แล้ว',
   'help.guide.change-transit-route.step.4':
-    'เลือกเส้นทางอื่นแล้วคลิก เพิ่มไปยังวัน เส้นทางใหม่จะแทนที่เส้นทางเดิม แก้ไขรายละเอียด ข้าง เปลี่ยนเส้นทาง จะเปิดแบบฟอร์มการขนส่งปกติแทน ซึ่งมี รหัสการจอง, สถานะ, นักเดินทาง และไฟล์',
-  'help.guide.change-transit-route.result': 'การเดินทางมีกำหนดการเดินทางใหม่ และการ์ดในแท็บ การขนส่ง แสดงสายและเวลาใหม่',
+    'เลือกเส้นทางอื่นแล้วคลิก เพิ่มไปยังวัน เส้นทางใหม่จะแทนที่เส้นทางเดิม แก้ไข ที่ปลายอีกด้านของแถบเดียวกัน จะเปิดแบบฟอร์มการขนส่งปกติแทน ซึ่งมี รหัสการจอง, สถานะ, นักเดินทาง, หมายเหตุ และไฟล์',
+  'help.guide.change-transit-route.result':
+    'การเดินทางมีกำหนดการเดินทางใหม่ และการ์ดในแท็บ การขนส่ง แสดงสายและเวลาใหม่',
   'help.guide.change-transit-route.tip.1':
-    'ชื่อของการเดินทางเป็นเพียงข้อความ: ไอคอนดินสอข้างชื่อใช้เปลี่ยนชื่อโดยไม่แตะเส้นทาง หมายเหตุ ด้านล่างรองรับ Markdown และมีแท็บ แก้ไข และ ดูตัวอย่าง',
-  'help.guide.change-transit-route.tip.2': 'ลบ ที่ด้านล่างของการเดินทางจะนำเส้นทางออกจากทริป ส่วนวันยังคงมีจุดแวะเหมือนเดิม',
+    'ชื่อในส่วนหัวของการจองใช้เปลี่ยนชื่อการเดินทางนี้โดยไม่กระทบเส้นทาง หมายเหตุ ของการเดินทางเขียนได้ในแบบฟอร์มการขนส่งที่เปิดจาก แก้ไข',
+  'help.guide.change-transit-route.tip.2':
+    'ลบ ที่ด้านล่างของการจองจะนำเส้นทางออกจากทริป ส่วนวันยังคงมีจุดแวะเหมือนเดิม',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'เปลี่ยนวิธีเดินทางของช่วงหนึ่ง',
   'help.guide.leg-travel-mode.goal': 'เดินในช่วงหนึ่งของวันที่ปกติขับรถ หรือส่งช่วงนั้นให้การค้นหาขนส่งสาธารณะ',
@@ -2322,7 +2592,8 @@ const help: TranslationStrings = {
     'ตัวเชื่อมระหว่างจุดแวะจะปรากฏเมื่อเปิดเส้นทางของวันแล้วเท่านั้น คลิกวันเพื่อเปิด แล้วคลิก เส้นทาง ใต้จุดแวะ',
   'help.guide.leg-travel-mode.step.2':
     'ตัวเชื่อมแต่ละอันแสดงเวลาเดินทางและระยะทางของช่วงนั้น พร้อมไอคอนของวิธีที่ใช้คำนวณเส้นทาง: รถสำหรับขับรถ เท้าสำหรับเดิน',
-  'help.guide.leg-travel-mode.step.3': 'คลิกตัวเชื่อม เมนูจะมี ขับรถ และ เดิน, การขนส่งสาธารณะ และ ใช้ค่าเริ่มต้นของวัน',
+  'help.guide.leg-travel-mode.step.3':
+    'คลิกตัวเชื่อม เมนูจะมี ขับรถ และ เดิน, การขนส่งสาธารณะ และ ใช้ค่าเริ่มต้นของวัน',
   'help.guide.leg-travel-mode.step.4': 'เลือก เดิน เฉพาะช่วงนี้ที่เปลี่ยน ส่วนที่เหลือของวันยังคงใช้วิธีของตัวเอง',
   'help.guide.leg-travel-mode.result': 'ช่วงนั้นแสดงไอคอนเท้าและเวลาเดิน และช่วงอื่นๆ ของวันยังคงใช้วิธีของวัน',
   'help.guide.leg-travel-mode.tip.1':
@@ -2334,22 +2605,26 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'เปลี่ยนหรือลบการขนส่ง',
   'help.guide.edit-transport.goal': 'แก้เวลา ชานชาลา หรือรหัสการจอง หรือนำการเดินทางออกจากทริป',
-  'help.guide.edit-transport.step.1': 'ในแผนรายวัน การขนส่งเป็นแถวสีระหว่างจุดแวะ คลิกที่แถว',
+  'help.guide.edit-transport.step.1':
+    'ในแผนรายวัน การขนส่งเป็นแถวสีระหว่างจุดแวะ คลิกที่แถว แล้วการจองของการขนส่งนั้นจะเปิดขึ้นพร้อมเวลา เส้นทาง และ รหัสการจอง',
   'help.guide.edit-transport.step.2':
-    'แบบฟอร์มคือแบบเดียวกับที่ใช้สร้าง โดยมี แก้ไขการขนส่ง ในแถบหัวเรื่อง ทุกอย่างเปลี่ยนได้: ประเภท เส้นทาง วันและเวลา รหัสการจอง สถานะ',
+    'แก้ไข ที่ด้านล่างของการจองจะเปิดแบบฟอร์มเดียวกับที่ใช้สร้าง โดยมี แก้ไขการขนส่ง ในแถบหัวเรื่อง ทุกอย่างเปลี่ยนได้: ประเภท เส้นทาง วันและเวลา รหัสการจอง สถานะ',
   'help.guide.edit-transport.step.3':
     'เส้นทางของเที่ยวบินคือสนามบินที่ต่อกัน ของรถไฟคือสถานีที่ต่อกัน เพิ่มจุดแวะ จะแทรกอีกจุดไว้ระหว่างกลาง และทุกช่วงมีเวลาและหมายเลขเที่ยวบินหรือรถไฟของตัวเอง',
-  'help.guide.edit-transport.step.4': 'คลิก อัปเดต หากต้องการลบการขนส่งทั้งหมด ให้ใช้ถังขยะบนการ์ดในแท็บ การขนส่ง แล้วยืนยัน',
-  'help.guide.edit-transport.result': 'การเปลี่ยนแปลงแสดงทุกที่ที่การขนส่งปรากฏ: แท็บ การขนส่ง วันที่เดินทาง และเส้นบนแผนที่',
+  'help.guide.edit-transport.step.4':
+    'คลิก อัปเดต หากต้องการลบการขนส่งทั้งหมด ให้ใช้ ลบ ที่ด้านล่างของการจอง หรือถังขยะบนการ์ดในแท็บ การขนส่ง แล้วยืนยัน',
+  'help.guide.edit-transport.result':
+    'การเปลี่ยนแปลงแสดงทุกที่ที่การขนส่งปรากฏ: แท็บ การขนส่ง วันที่เดินทาง และเส้นบนแผนที่',
   'help.guide.edit-transport.tip.1':
-    'แบบฟอร์มเดียวกันเปิดได้จากทั้งสองทาง คือไอคอนดินสอบนการ์ดในแท็บ การขนส่ง และแถวของการขนส่งในแผนรายวัน ยกเว้นเส้นทางขนส่งสาธารณะที่วางแผนไว้: แถวของมันจะเปิดมุมมองการเดินทาง และ แก้ไขรายละเอียด ในนั้นจะพามาที่แบบฟอร์มนี้',
+    'แบบฟอร์มเดียวกันเปิดได้จากทั้งสองทาง: ผ่าน แก้ไข ในการจองที่เปิดจากแถวในแผนรายวัน และผ่านไอคอนดินสอบนการ์ดในแท็บ การขนส่ง เส้นทางขนส่งสาธารณะที่วางแผนไว้ก็เปิดเป็นการจองเช่นกัน โดย เปลี่ยนเส้นทาง ในนั้นจะค้นหาใหม่ และ แก้ไข จะพามาที่แบบฟอร์มนี้',
   'help.guide.edit-transport.tip.2': 'การย้ายการขนส่งไปอีกวันไม่ต้องใช้แบบฟอร์มเลย: ลากแถวจากการ์ดวันหนึ่งไปยังอีกวัน',
   // transport-on-map
   'help.guide.transport-on-map.title': 'วาดการขนส่งบนแผนที่',
   'help.guide.transport-on-map.goal': 'ดูว่าเที่ยวบิน การขับรถ หรือเส้นทางขนส่งสาธารณะไปทางไหนจริงๆ',
   'help.guide.transport-on-map.step.1':
     'การขนส่งที่ตั้งปลายทั้งสองไว้จะมีไอคอนเส้นทางเล็กๆ บนแถวในแผนรายวัน คลิกที่ไอคอน ป้ายของไอคอนจะเปลี่ยนเป็น ซ่อนเส้นทางการจอง',
-  'help.guide.transport-on-map.step.2': 'เส้นทางจะถูกวาดบนแผนที่ พร้อมหมุดรูปแคปซูลที่ปลายแต่ละด้านซึ่งมีไอคอนของการขนส่ง',
+  'help.guide.transport-on-map.step.2':
+    'เส้นทางจะถูกวาดบนแผนที่ พร้อมหมุดรูปแคปซูลที่ปลายแต่ละด้านซึ่งมีไอคอนของการขนส่ง',
   'help.guide.transport-on-map.step.3':
     'คลิกหมุดที่ปลายเพื่ออ่านการจองโดยไม่ต้องออกจากแผนที่: เวลา สายการบินและหมายเลขเที่ยวบิน รหัสการจอง และที่อยู่ ปิด จะเก็บแผ่นข้อมูลไป',
   'help.guide.transport-on-map.step.4':
@@ -2376,7 +2651,8 @@ const help: TranslationStrings = {
     'ทุกแถวเป็นช่องติ๊กพร้อมสายการบินและหมายเลขเที่ยวบิน สนามบินทั้งสอง และวันที่ คลิกแถวเพื่อรวมหรือไม่รวมเที่ยวบิน เที่ยวบินใต้ เที่ยวบินอื่นๆ จะถูกนำเข้าเฉพาะเมื่อคุณติ๊กเท่านั้น',
   'help.guide.airtrail-import.step.4':
     'เที่ยวบินต่อเครื่อง ซึ่งแต่ละเที่ยวออกจากสนามบินที่เที่ยวก่อนหน้าลงจอดภายในหนึ่งวัน จะถูกจัดกรอบไว้ด้วยกัน ช่องติ๊กด้านล่าง นำเข้าเป็นเที่ยวบินเดียวที่แวะพักที่สนามบินนั้น ถูกติ๊กไว้แล้ว: ติ๊กไว้เพื่อให้เป็นการจองเดียวที่มีจุดแวะ หรือเอาออกเพื่อนำเข้าแต่ละช่วงเป็นเที่ยวบินแยกกัน',
-  'help.guide.airtrail-import.step.5': 'คลิก นำเข้า ปุ่มจะนับเที่ยวบินที่ติ๊กไว้ และข้อความหลังจากนั้นจะบอกว่านำเข้ามาได้กี่เที่ยว',
+  'help.guide.airtrail-import.step.5':
+    'คลิก นำเข้า ปุ่มจะนับเที่ยวบินที่ติ๊กไว้ และข้อความหลังจากนั้นจะบอกว่านำเข้ามาได้กี่เที่ยว',
   'help.guide.airtrail-import.step.6':
     'เที่ยวบินเป็นการ์ดใต้ ยืนยันแล้ว แต่ละใบมีป้าย AirTrail สีน้ำเงินข้างสถานะ และเป็นแถวในวันที่บิน เที่ยวบินต่อเครื่องที่รวมกันเป็นการ์ดใบเดียว โดยเส้นทางผ่านจุดแวะพัก',
   'help.guide.airtrail-import.result':
@@ -2408,21 +2684,26 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': 'ใส่ร้านอาหาร อีเวนต์ ทัวร์ ที่จอดรถ หรืออย่างอื่นลงในทริปด้วยตนเอง',
   'help.guide.create-booking.step.1': 'คลิก การจองด้วยตนเอง ที่มุมขวาบนของแท็บ การจองใหม่ จะเปิดขึ้น',
   'help.guide.create-booking.step.2':
-    'เลือก ประเภทการจอง จากรายการที่ด้านบนของแบบฟอร์ม ข้าง นักเดินทาง ที่พัก, ร้านอาหาร, เหตุการณ์, ทัวร์, ที่จอดรถ และ อื่นๆ คือหกประเภทที่แท็บนี้สร้างได้ และแบบฟอร์มจะเปลี่ยนตามตัวเลือก: มีเพียง ที่พัก ที่ใช้ช่วงวันแทนวันที่',
-  'help.guide.create-booking.step.3': 'พิมพ์ ชื่อเรื่อง ซึ่งเป็นช่องเดียวที่แบบฟอร์มบังคับ และปุ่ม เพิ่ม จะกดไม่ได้จนกว่าจะมีข้อความ',
+    'คลิกป้ายประเภทใต้ชื่อเรื่องในส่วนหัวของแบบฟอร์ม แล้วเลือก ประเภทการจอง ที่พัก, ร้านอาหาร, เหตุการณ์, ทัวร์, ที่จอดรถ และ อื่นๆ คือหกประเภทที่แท็บนี้สร้างได้ และแบบฟอร์มจะเปลี่ยนตามตัวเลือก: มีเพียง ที่พัก ที่ใช้ช่วงวันแทนวันที่',
+  'help.guide.create-booking.step.3':
+    'พิมพ์ ชื่อเรื่อง ซึ่งเป็นช่องเดียวที่แบบฟอร์มบังคับ และปุ่ม เพิ่ม จะกดไม่ได้จนกว่าจะมีข้อความ',
   'help.guide.create-booking.step.4':
     'ตั้ง วันที่ และ เวลาเริ่มต้น รวมถึง วันที่สิ้นสุด และ เวลาสิ้นสุด หากการจองมีเวลาสิ้นสุด ปฏิทินจะแสดงเฉพาะวันในช่วงทริป และเวลาสิ้นสุดที่ไม่ได้อยู่หลังเวลาเริ่มจะแจ้งเป็นสีแดงและปิดปุ่ม เพิ่ม',
-  'help.guide.create-booking.step.5': 'ใส่ รหัสการจอง จากใบยืนยันและตั้ง สถานะ รอดำเนินการ หรือ ยืนยันแล้ว กำหนดว่าการ์ดจะอยู่ในส่วนใด',
+  'help.guide.create-booking.step.5':
+    'ใส่ รหัสการจอง จากใบยืนยัน ป้ายสถานะข้างประเภทจะแสดง รอดำเนินการ คลิกหนึ่งครั้งเพื่อสลับเป็น ยืนยันแล้ว และคลิกอีกครั้งเพื่อสลับกลับ ซึ่งเป็นตัวกำหนดว่าการ์ดจะอยู่ในส่วนใด',
   'help.guide.create-booking.step.6': 'คลิก เพิ่ม',
-  'help.guide.create-booking.result': 'การจองเป็นการ์ดในส่วนของตัวเองพร้อมป้ายประเภท วันที่ และรหัส และทุกคนในทริปจะเห็นการ์ดปรากฏขึ้น',
+  'help.guide.create-booking.result':
+    'การจองเป็นการ์ดในส่วนของตัวเองพร้อมป้ายประเภท วันที่ และรหัส และทุกคนในทริปจะเห็นการ์ดปรากฏขึ้น',
   'help.guide.create-booking.tip.1':
     'ที่ตั้ง / ที่อยู่ จะเสนอที่อยู่จริงขณะที่คุณพิมพ์ การเลือกที่อยู่จะแทนที่สิ่งที่คุณเขียน และที่อยู่ที่คุณพิมพ์เองจะถูกเก็บไว้ตามเดิม',
-  'help.guide.create-booking.tip.2': 'ลิงก์ รับหน้าของการจองบนเว็บไซต์ผู้ให้บริการ การ์ดจะแปลงเป็นลิงก์ที่เปิดในแท็บใหม่',
+  'help.guide.create-booking.tip.2':
+    'ลิงก์ รับหน้าของการจองบนเว็บไซต์ผู้ให้บริการ การ์ดจะแปลงเป็นลิงก์ที่เปิดในแท็บใหม่',
   'help.guide.create-booking.tip.3': 'หมายเหตุ รองรับ Markdown รายการหรือบรรทัดตัวหนาจึงแสดงผลตามนั้นบนการ์ด',
   // booking-hotel
   'help.guide.booking-hotel.title': 'จองที่พัก',
   'help.guide.booking-hotel.goal': 'กรอกที่พักเพื่อให้นับเป็นทั้งการจองและคืนพักในแผนรายวันไปพร้อมกัน',
-  'help.guide.booking-hotel.step.1': 'คลิก การจองด้วยตนเอง แล้วเลือก ที่พัก ช่องวันที่จะหายไปและมีกลุ่มช่องสำหรับโรงแรมมาแทนที่',
+  'help.guide.booking-hotel.step.1':
+    'คลิก การจองด้วยตนเอง แล้วเลือก ที่พัก ช่องวันที่จะหายไปและมีกลุ่มช่องสำหรับโรงแรมมาแทนที่',
   'help.guide.booking-hotel.step.2':
     'เลือกโรงแรมใต้ ที่พัก รายการนี้คือสถานที่ของทริป และการเลือกจะใส่ชื่อลงใน ชื่อเรื่อง และที่อยู่ลงใน ที่ตั้ง / ที่อยู่',
   'help.guide.booking-hotel.step.3':
@@ -2433,7 +2714,8 @@ const help: TranslationStrings = {
     'การ์ดแสดงช่วงวันแทนวันที่ พร้อมเวลาเช็คอินและเช็คเอาท์และที่อยู่ และการพักเดียวกันนี้ก็อยู่ในวันเหล่านั้นของแผนแล้ว',
   'help.guide.booking-hotel.tip.1':
     'ที่พัก เป็นประเภทเดียวที่ไม่มี วันที่ และ เวลาเริ่มต้น วันที่ของมันคือ จาก และ ถึง ซึ่งเป็นวันของทริป ไม่ใช่ปฏิทิน',
-  'help.guide.booking-hotel.tip.2': 'ปล่อย ที่พัก ว่างไว้แล้วพิมพ์ที่อยู่แทน: TREK จะค้นหาสถานที่ สร้าง และปักหมุดบนแผนที่ให้คุณ',
+  'help.guide.booking-hotel.tip.2':
+    'ปล่อย ที่พัก ว่างไว้แล้วพิมพ์ที่อยู่แทน: TREK จะค้นหาสถานที่ สร้าง และปักหมุดบนแผนที่ให้คุณ',
   'help.guide.booking-hotel.tip.3': 'การลบการจองจะนำคืนพักออกจากแผนรายวันไปด้วย',
   // link-booking
   'help.guide.link-booking.title': 'ผูกการจองเข้ากับแผน',
@@ -2444,20 +2726,24 @@ const help: TranslationStrings = {
   'help.guide.link-booking.step.3':
     'สถานที่/กิจกรรม เชื่อมโยงกับตัวสถานที่เอง เลือกสถานที่ในช่องนั้น แล้ว ชื่อเรื่อง และ ที่ตั้ง / ที่อยู่ จะถูกกรอกในช่องที่คุณเว้นว่างไว้',
   'help.guide.link-booking.step.4': 'คลิก อัปเดต',
-  'help.guide.link-booking.result': 'การ์ดแสดงวันและจุดแวะใต้ เชื่อมโยงกับแผนประจำวัน และการจองจะติดไปกับจุดแวะนั้นในแผนรายวัน',
+  'help.guide.link-booking.result':
+    'การ์ดแสดงวันและจุดแวะใต้ เชื่อมโยงกับแผนประจำวัน และการจองจะติดไปกับจุดแวะนั้นในแผนรายวัน',
   'help.guide.link-booking.tip.1':
     'ไม่มีลิงก์ (สแตนด์อโลน) ที่ด้านบนของรายการจะยกเลิกการเชื่อมโยง ที่พัก ไม่มีตัวเลือกจุดแวะเลย: เชื่อมโยงผ่านคืนพักของมัน',
-  'help.guide.link-booking.tip.2': 'การเลือกจุดแวะในวันที่มีวันที่กำกับจะกรอก วันที่ ที่ว่างอยู่ให้คุณ วันที่ที่คุณตั้งไว้แล้วจะไม่ถูกเปลี่ยน',
+  'help.guide.link-booking.tip.2':
+    'การเลือกจุดแวะในวันที่มีวันที่กำกับจะกรอก วันที่ ที่ว่างอยู่ให้คุณ วันที่ที่คุณตั้งไว้แล้วจะไม่ถูกเปลี่ยน',
   // booking-travelers
   'help.guide.booking-travelers.title': 'ระบุว่าการจองนี้สำหรับใคร',
   'help.guide.booking-travelers.goal': 'ระบุนักเดินทางที่การจองครอบคลุม แล้วดูเฉพาะการจองของพวกเขา',
   'help.guide.booking-travelers.step.1':
-    'เปิดการจองด้วยไอคอนดินสอ นักเดินทาง อยู่ที่ด้านบนของแบบฟอร์ม ข้าง ประเภทการจอง และจะแสดง มอบหมายให้นักเดินทาง ตราบใดที่ยังไม่มีใครอยู่ในการจอง',
+    'เปิดการจองด้วยไอคอนดินสอ นักเดินทาง อยู่ข้าง รหัสการจอง และจะแสดง มอบหมายให้นักเดินทาง ตราบใดที่ยังไม่มีใครอยู่ในการจอง',
   'help.guide.booking-travelers.step.2':
     'คลิกที่ช่องนั้นแล้วเลือกคนที่การจองนี้เป็นของ แขกที่มีชื่อก็อยู่ในรายการด้วย คนที่เลือกจะมีเครื่องหมายถูกและรูปอวตารของเขาในช่อง คลิกที่ชื่ออีกครั้งเพื่อเอาออก',
   'help.guide.booking-travelers.step.3': 'คลิก อัปเดต',
-  'help.guide.booking-travelers.step.4': 'ในแถบเครื่องมือด้านบน ข้างป้ายประเภท คลิกอวาตาร์ของนักเดินทางเพื่อดูเฉพาะการจองของคนนั้น',
-  'help.guide.booking-travelers.result': 'การ์ดแสดงรายชื่อคนที่การจองเป็นของ และแถวอวาตาร์จะกรองแท็บให้เหลือคนใดคนหนึ่ง',
+  'help.guide.booking-travelers.step.4':
+    'ในแถบเครื่องมือด้านบน ข้างป้ายประเภท คลิกอวาตาร์ของนักเดินทางเพื่อดูเฉพาะการจองของคนนั้น',
+  'help.guide.booking-travelers.result':
+    'การ์ดแสดงรายชื่อคนที่การจองเป็นของ และแถวอวาตาร์จะกรองแท็บให้เหลือคนใดคนหนึ่ง',
   'help.guide.booking-travelers.tip.1': 'บนการ์ด นักเดินทางแสดงให้ดูเท่านั้น เปลี่ยนไม่ได้ ต้องตั้งที่นี่ในแบบฟอร์ม',
   'help.guide.booking-travelers.tip.2':
     'แถวอวาตาร์จะปรากฏเมื่อทริปมีสมาชิกมากกว่าหนึ่งคน และมีการจองอย่างน้อยหนึ่งรายการที่ระบุชื่อใครสักคน สิ่งที่คุณเลือกจะคงอยู่ตลอดเซสชันเบราว์เซอร์นี้',
@@ -2473,14 +2759,16 @@ const help: TranslationStrings = {
   'help.guide.booking-files.result': 'การ์ดแสดงเอกสารใต้ ไฟล์ และการคลิกเอกสารใดก็จะเปิดเอกสารนั้น',
   'help.guide.booking-files.tip.1': 'สำหรับการจองที่คุณยังสร้างอยู่ เอกสารจะรอและอัปโหลดทันทีที่คุณคลิก เพิ่ม',
   'help.guide.booking-files.tip.2': 'X ข้างเอกสารจะเอาการเชื่อมโยงออก ไม่ใช่ตัวเอกสาร เอกสารยังอยู่ในแท็บ ไฟล์ ของทริป',
-  'help.guide.booking-files.tip.3': 'ประเภทไฟล์ที่แนบได้เป็นไปตามรายการของผู้ดูแลระบบ โดยค่าเริ่มต้นอนุญาตเอกสาร ข้อความ และรูปภาพ',
+  'help.guide.booking-files.tip.3':
+    'ประเภทไฟล์ที่แนบได้เป็นไปตามรายการของผู้ดูแลระบบ โดยค่าเริ่มต้นอนุญาตเอกสาร ข้อความ และรูปภาพ',
   // booking-cost
   'help.guide.booking-cost.title': 'เปลี่ยนราคาการจองเป็นค่าใช้จ่าย',
   'help.guide.booking-cost.goal': 'นำค่าใช้จ่ายของการจองเข้าสู่ ค่าใช้จ่าย โดยแบ่งระหว่างคนที่จ่าย',
   'help.guide.booking-cost.step.1':
     'เปิดการจองแล้วไปที่ด้านล่างของแบบฟอร์ม ใต้ ค่าใช้จ่าย มี สร้างรายจ่าย และ เชื่อมโยงค่าใช้จ่ายที่มีอยู่ พร้อมหมายเหตุ บันทึกการจอง จากนั้นเปิดตัวแก้ไขต้นทุน',
   'help.guide.booking-cost.step.2': 'คลิก สร้างรายจ่าย การจองจะถูกบันทึก แบบฟอร์มปิดลง และตัวแก้ไขค่าใช้จ่ายจะเปิดขึ้น',
-  'help.guide.booking-cost.step.3': 'มันมีไว้เพื่ออะไร? ใส่ชื่อของการจองไว้แล้ว กรอก จำนวนเงินทั้งหมด และตรวจสอบ สกุลเงิน และ วัน',
+  'help.guide.booking-cost.step.3':
+    'มันมีไว้เพื่ออะไร? ใส่ชื่อของการจองไว้แล้ว กรอก จำนวนเงินทั้งหมด และตรวจสอบ สกุลเงิน และ วัน',
   'help.guide.booking-cost.step.4': 'หมวดหมู่ เป็นหมวดที่ตรงกับประเภทการจอง ตั้ง ใครเป็นคนจ่าย? และวิธีแบ่งจำนวนเงิน',
   'help.guide.booking-cost.step.5': 'คลิก เพิ่มค่าใช้จ่าย',
   'help.guide.booking-cost.result':
@@ -2489,17 +2777,20 @@ const help: TranslationStrings = {
     'หมวดหมู่เป็นไปตามประเภท: ร้านอาหาร เป็น อาหารและเครื่องดื่ม, ที่พัก เป็น ที่พัก, ที่จอดรถ เป็น ที่จอดรถ ส่วน เหตุการณ์ และ ทัวร์ อยู่ใน อื่นๆ',
   'help.guide.booking-cost.tip.2':
     'การจองหนึ่งรายการมีค่าใช้จ่ายได้หลายรายการ เชื่อมโยงค่าใช้จ่ายที่มีอยู่ จะเสนอค่าใช้จ่ายในแท็บ ค่าใช้จ่าย ที่ยังไม่ได้ผูกกับสิ่งใด สำหรับรายการที่เชื่อมโยงแล้ว ยกเลิกการเชื่อมโยง แต่เก็บค่าใช้จ่ายไว้ จะปลดรายการออกและเก็บไว้ในแท็บ ค่าใช้จ่าย ส่วนถังขยะจะลบรายการนั้น',
-  'help.guide.booking-cost.tip.3': 'ค่าใช้จ่าย จะอยู่ในแบบฟอร์มเฉพาะเมื่อเปิดส่วนเสริม ค่าใช้จ่าย ซึ่งผู้ดูแลระบบเปิดได้ใน ส่วนเสริม',
+  'help.guide.booking-cost.tip.3':
+    'ค่าใช้จ่าย จะอยู่ในแบบฟอร์มเฉพาะเมื่อเปิดส่วนเสริม ค่าใช้จ่าย ซึ่งผู้ดูแลระบบเปิดได้ใน ส่วนเสริม',
   // filter-bookings
   'help.guide.filter-bookings.title': 'ค้นหาการจอง',
   'help.guide.filter-bookings.goal': 'กรองแท็บที่ยาวให้เหลือประเภท คน หรือสถานะที่คุณต้องการ',
-  'help.guide.filter-bookings.step.1': 'ป้ายข้างหัวข้อคือประเภทที่ทริปนี้ใช้จริง แต่ละป้ายมีจำนวนที่มีอยู่ ทั้งหมด คือทั้งแท็บ',
+  'help.guide.filter-bookings.step.1':
+    'ป้ายข้างหัวข้อคือประเภทที่ทริปนี้ใช้จริง แต่ละป้ายมีจำนวนที่มีอยู่ ทั้งหมด คือทั้งแท็บ',
   'help.guide.filter-bookings.step.2': 'คลิกป้ายเพื่อแสดงเฉพาะประเภทนั้น คลิกป้ายที่สองแล้วจะแสดงทั้งสองประเภท',
   'help.guide.filter-bookings.step.3': 'ทั้งหมด จะแสดงทุกอย่างกลับมา',
   'help.guide.filter-bookings.step.4': 'อวาตาร์ข้างป้ายใช้กรองตามนักเดินทาง ทีละคนหรือหลายคนพร้อมกัน',
   'help.guide.filter-bookings.step.5':
     'รอดำเนินการ และ ยืนยันแล้ว คือสองส่วน แต่ละส่วนมีจำนวนของตัวเอง คลิกหัวข้อเพื่อพับเก็บ แล้วเมื่อกลับมาจะยังพับอยู่',
-  'help.guide.filter-bookings.result': 'แท็บแสดงเฉพาะสิ่งที่คุณเลือก และเมื่อกลับมาในเซสชันเบราว์เซอร์นี้ ตัวเลือกก็ยังคงอยู่',
+  'help.guide.filter-bookings.result':
+    'แท็บแสดงเฉพาะสิ่งที่คุณเลือก และเมื่อกลับมาในเซสชันเบราว์เซอร์นี้ ตัวเลือกก็ยังคงอยู่',
   'help.guide.filter-bookings.tip.1': 'ป้ายแสดงเฉพาะประเภทที่ทริปมี ทริปที่ไม่มีทัวร์เลยจึงไม่มีป้าย ทัวร์',
   'help.guide.filter-bookings.tip.2':
     'ตัวกรองที่ไม่ตรงกับอะไรเลยจะทำให้แท็บว่างพร้อมข้อความ ไม่พบสถานที่ ข้อความนี้มาจากรายการสถานที่ แต่ความหมายเหมือนกัน',
@@ -2527,9 +2818,10 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.goal': 'แก้เวลา เพิ่มรหัสที่มาถึงภายหลัง หรือย้ายการจองจาก รอดำเนินการ เป็น ยืนยันแล้ว',
   'help.guide.edit-booking.step.1': 'คลิกไอคอนดินสอในส่วนหัวของการ์ด แก้ไขการจอง จะเปิดขึ้นพร้อมทุกอย่างที่การจองมี',
   'help.guide.edit-booking.step.2': 'เปลี่ยนสิ่งที่ต้องเปลี่ยน ในที่นี้คือ รหัสการจอง ที่ผู้ให้บริการส่งมาในที่สุด',
-  'help.guide.edit-booking.step.3': 'ตั้ง สถานะ เป็น ยืนยันแล้ว',
+  'help.guide.edit-booking.step.3': 'คลิกป้าย รอดำเนินการ ในส่วนหัวของแบบฟอร์ม ป้ายจะเปลี่ยนเป็น ยืนยันแล้ว',
   'help.guide.edit-booking.step.4': 'คลิก อัปเดต',
-  'help.guide.edit-booking.result': 'การ์ดจะย้าย: การจองที่ยืนยันแล้วจะอยู่ในส่วน ยืนยันแล้ว พร้อมจุดสีเขียว และทุกคนในทริปจะเห็นการย้ายนั้น',
+  'help.guide.edit-booking.result':
+    'การ์ดจะย้าย: การจองที่ยืนยันแล้วจะอยู่ในส่วน ยืนยันแล้ว พร้อมจุดสีเขียว และทุกคนในทริปจะเห็นการย้ายนั้น',
   'help.guide.edit-booking.tip.1':
     'รหัสการจองที่อ่านไม่ออกเกิดจาก รหัสการจองเบลอ ใน การตั้งค่า ใต้ จอแสดงผล วางเมาส์หรือคลิกที่รหัสแล้วจะอ่านได้',
   'help.guide.edit-booking.tip.2':
@@ -2578,13 +2870,16 @@ const help: TranslationStrings = {
     'หมวดประกอบด้วยสิ่งของเท่านั้น ลบชิ้นสุดท้ายแล้วแถวจะกลายเป็นตัวยึดตำแหน่ง หมวดจึงยังคงตำแหน่งและสี ลบแถวนั้นด้วยแล้วหมวดจะหายไป',
   'help.guide.packing-categories.tip.2':
     'การมอบหมายใครสักคนให้ดูแลหมวดจะส่งการแจ้งเตือนการจัดกระเป๋าให้คนนั้น แต่ไม่เปลี่ยนว่าใครเห็นสิ่งของได้ ซึ่งกำหนดโดย การแชร์ ในจุดสามจุดของแถว',
-  'help.guide.packing-categories.tip.3': 'สองหมวดมีชื่อเดียวกันได้ TREK แยกหมวดเหล่านั้นไว้ภายใน ชื่อจึงยังคงเป็นตามที่คุณพิมพ์',
+  'help.guide.packing-categories.tip.3':
+    'สองหมวดมีชื่อเดียวกันได้ TREK แยกหมวดเหล่านั้นไว้ภายใน ชื่อจึงยังคงเป็นตามที่คุณพิมพ์',
   // check-off-packing
   'help.guide.check-off-packing.title': 'ติ๊กสิ่งของขณะจัดกระเป๋า',
   'help.guide.check-off-packing.goal': 'ทำเครื่องหมายสิ่งที่อยู่ในกระเป๋า ดูแถบความคืบหน้า และล้างสิ่งของที่จัดแล้วออก',
   'help.guide.check-off-packing.step.1': 'คลิกช่องทางซ้ายของแถว ชื่อจะถูกขีดฆ่าและแถบจะขยับ',
-  'help.guide.check-off-packing.step.2': 'แถบด้านบนนับสิ่งที่จัดแล้วเทียบกับทุกอย่างในรายการ ทั้งเป็นตัวเลขและเปอร์เซ็นต์',
-  'help.guide.check-off-packing.step.3': 'ทั้งหมวดพร้อมกัน: จุดสามจุดในส่วนหัวมี ทำเครื่องหมายทั้งหมดว่าจัดแล้ว และ ยกเลิกการเลือกทั้งหมด',
+  'help.guide.check-off-packing.step.2':
+    'แถบด้านบนนับสิ่งที่จัดแล้วเทียบกับทุกอย่างในรายการ ทั้งเป็นตัวเลขและเปอร์เซ็นต์',
+  'help.guide.check-off-packing.step.3':
+    'ทั้งหมวดพร้อมกัน: จุดสามจุดในส่วนหัวมี ทำเครื่องหมายทั้งหมดว่าจัดแล้ว และ ยกเลิกการเลือกทั้งหมด',
   'help.guide.check-off-packing.step.4':
     'ทั้งหมด, ยังไม่ได้จัด และ เสร็จแล้ว ใช้กรองตาราง ยังไม่ได้จัด จะเหลือเฉพาะสิ่งที่ยังขาด หมวดที่จัดครบแล้วจึงหายไปจากมุมมองนี้',
   'help.guide.check-off-packing.step.5':
@@ -2606,7 +2901,8 @@ const help: TranslationStrings = {
   'help.guide.apply-packing-template.result': 'รายการและสิ่งของในเทมเพลตถูกเพิ่มเข้าในทริปแล้ว ต่อจากสิ่งที่มีอยู่เดิม',
   'help.guide.apply-packing-template.tip.1':
     'เทมเพลตเก็บเพียงชื่อและรายการเท่านั้น จำนวน น้ำหนัก กระเป๋า และสถานะที่ติ๊กไว้แล้วจะไม่ถูกนำไปด้วย',
-  'help.guide.apply-packing-template.tip.2': 'ใช้เทมเพลต จะแสดงก็ต่อเมื่อมีเทมเพลตอยู่แล้วเท่านั้น หากไม่มีเทมเพลต ปุ่มนี้จะไม่ปรากฏเลย',
+  'help.guide.apply-packing-template.tip.2':
+    'ใช้เทมเพลต จะแสดงก็ต่อเมื่อมีเทมเพลตอยู่แล้วเท่านั้น หากไม่มีเทมเพลต ปุ่มนี้จะไม่ปรากฏเลย',
   'help.guide.apply-packing-template.tip.3':
     'บันทึกเป็นเทมเพลต จะแสดงเฉพาะผู้ดูแลระบบของอินสแตนซ์ และเฉพาะเมื่อรายการมีสิ่งของอยู่ ระบบจะบันทึกส่วนกลางรวมกับสิ่งของของคุณเอง แต่จะไม่บันทึกสิ่งของส่วนตัวของสมาชิกคนอื่น',
   // import-packing-list
@@ -2618,7 +2914,8 @@ const help: TranslationStrings = {
   'help.guide.import-packing-list.step.3':
     'หรือโหลดบรรทัดจากไฟล์ด้วย โหลด CSV/TXT/MD ซึ่งรับไฟล์ .csv, .txt หรือ .md และจะแทนที่ทุกอย่างที่อยู่ในช่อง',
   'help.guide.import-packing-list.step.4': 'คลิก นำเข้า ปุ่มจะแสดงจำนวนบรรทัดที่อ่านเข้าใจได้',
-  'help.guide.import-packing-list.result': 'ทุกบรรทัดกลายเป็นหนึ่งแถว อยู่ในรายการที่ระบุในช่องแรก และสิ่งที่มีอยู่เดิมจะไม่ถูกแตะต้อง',
+  'help.guide.import-packing-list.result':
+    'ทุกบรรทัดกลายเป็นหนึ่งแถว อยู่ในรายการที่ระบุในช่องแรก และสิ่งที่มีอยู่เดิมจะไม่ถูกแตะต้อง',
   'help.guide.import-packing-list.tip.1':
     'เครื่องหมายจุลภาค อัฒภาค และแท็บ ล้วนใช้แบ่งช่องข้อมูลได้ และอัญประกาศคู่ใช้รวมช่องข้อมูลไว้ด้วยกัน ดังนั้น "เสื้อ, สีน้ำเงิน" จะยังเป็นชื่อเดียว บรรทัดที่มีค่าเดียวจะเป็นเพียงชื่อ บรรทัดที่ไม่ได้ระบุรายการจะไปอยู่ใน อื่นๆ และ "3x" หน้าชื่อจะกำหนดจำนวน',
   'help.guide.import-packing-list.tip.2':
@@ -2647,7 +2944,8 @@ const help: TranslationStrings = {
   'help.guide.share-packing-item.step.2': 'กลับไปที่ แชร์แล้ว เปิดจุดสามจุดที่ท้ายแถวแล้วคลิก การแชร์',
   'help.guide.share-packing-item.step.3':
     'มีสามระดับ: แบ่งปันแล้ว อยู่ในส่วนกลางของกลุ่มและทุกคนมองเห็น ส่วนตัว ซึ่งมีเพียงคุณที่มองเห็น และ แชร์กับ... ซึ่งคุณเลือกคนที่สิ่งของนี้ครอบคลุม',
-  'help.guide.share-packing-item.step.4': 'สิ่งของที่เป็น ส่วนตัว จะอยู่ใน รายการของฉัน เท่านั้น สลับไปที่นั่นเพื่อหาสิ่งของนั้น',
+  'help.guide.share-packing-item.step.4':
+    'สิ่งของที่เป็น ส่วนตัว จะอยู่ใน รายการของฉัน เท่านั้น สลับไปที่นั่นเพื่อหาสิ่งของนั้น',
   'help.guide.share-packing-item.step.5':
     'เปิด การแชร์ อีกครั้งแล้วติ๊กชื่อใต้ แชร์กับ... สิ่งของจะแสดงในรายการของคนนั้นด้วย และแถวจะมีป้ายเล็กๆ นับจำนวนคนที่แชร์ด้วย',
   'help.guide.share-packing-item.result': 'สิ่งของอยู่ในระดับที่คุณเลือก และแถวจะบอกว่าใครเป็นคนนำไป',
@@ -2659,10 +2957,12 @@ const help: TranslationStrings = {
     'สิ่งของใหม่จะอยู่ในมุมมองที่คุณเพิ่มเข้าไป ถ้าเพิ่มใน รายการของฉัน จะเป็น ส่วนตัว ถ้าเพิ่มใน แบ่งปันแล้ว จะเข้าไปในส่วนกลาง',
   // packing-bags
   'help.guide.packing-bags.title': 'ชั่งน้ำหนักกระเป๋า',
-  'help.guide.packing-bags.goal': 'ใส่น้ำหนักให้ทุกสิ่งของ จัดสิ่งของลงกระเป๋า และทำให้แต่ละใบไม่เกินขีดจำกัดของสายการบิน',
+  'help.guide.packing-bags.goal':
+    'ใส่น้ำหนักให้ทุกสิ่งของ จัดสิ่งของลงกระเป๋า และทำให้แต่ละใบไม่เกินขีดจำกัดของสายการบิน',
   'help.guide.packing-bags.step.1': 'คลิกป้ายน้ำหนักก่อนวงกลมแล้วพิมพ์น้ำหนักของสิ่งของเป็นกรัม',
   'help.guide.packing-bags.step.2': 'วงกลมที่ท้ายแถวคือกระเป๋าของสิ่งของนั้น คลิกที่วงกลม',
-  'help.guide.packing-bags.step.3': 'ถ้ายังไม่มีกระเป๋า: เพิ่มกระเป๋า ตั้งชื่อ แล้วกด Enter กระเป๋าจะถูกสร้างและสิ่งของจะเข้าไปอยู่ในนั้นทันที',
+  'help.guide.packing-bags.step.3':
+    'ถ้ายังไม่มีกระเป๋า: เพิ่มกระเป๋า ตั้งชื่อ แล้วกด Enter กระเป๋าจะถูกสร้างและสิ่งของจะเข้าไปอยู่ในนั้นทันที',
   'help.guide.packing-bags.step.4':
     'แผง กระเป๋า จะปรากฏทางขวาทันทีที่มีกระเป๋าอย่างน้อยหนึ่งใบ: ชื่อ น้ำหนัก แถบความจุ ใครเป็นคนถือ และจำนวนสิ่งของข้างใน ตามด้วย ยังไม่ได้มอบหมาย และ น้ำหนักรวม',
   'help.guide.packing-bags.step.5': 'คลิก กำหนดขีดจำกัด แล้วพิมพ์ขีดจำกัดเป็นกิโลกรัม ตามที่สายการบินระบุ',
@@ -2695,7 +2995,8 @@ const help: TranslationStrings = {
   'help.guide.todo-filters.goal': 'ลดรายการงานให้เหลือเฉพาะสิ่งที่สำคัญตอนนี้ แล้วแก้ไขงานที่คุณเจอ',
   'help.guide.todo-filters.step.1':
     'งาน ในแถบด้านข้าง: ทั้งหมด คือทุกอย่างที่ยังค้างอยู่ งานของฉัน คือสิ่งที่เป็นหน้าที่ของคุณ เกินกำหนด คือสิ่งที่มีวันที่ผ่านมาแล้ว เสร็จแล้ว คือสิ่งที่เสร็จสิ้น แต่ละอันแสดงจำนวนของตัวเอง คลิก เกินกำหนด',
-  'help.guide.todo-filters.step.2': 'ใต้ รายการ มีหนึ่งแถวต่อหนึ่งรายการ การเลือกรายการจะแสดงรายการนั้น รวมถึงงานที่เสร็จแล้ว',
+  'help.guide.todo-filters.step.2':
+    'ใต้ รายการ มีหนึ่งแถวต่อหนึ่งรายการ การเลือกรายการจะแสดงรายการนั้น รวมถึงงานที่เสร็จแล้ว',
   'help.guide.todo-filters.step.3':
     'ตัวเรียงลำดับที่ส่วนหัวของรายการจะจัดลำดับสิ่งที่อยู่บนหน้าจอใหม่: ลำดับความสำคัญ จะเอา P1 ขึ้นก่อน วันครบกำหนด จะเอากำหนดส่งที่ใกล้ที่สุดขึ้นก่อน ใช้ได้ทีละอย่างเท่านั้น และการคลิกครั้งที่สองจะกลับไปยังลำดับของคุณเอง',
   'help.guide.todo-filters.step.4': 'คลิกงานเพื่อเปิดในแผงด้านขวา',
@@ -2713,7 +3014,8 @@ const help: TranslationStrings = {
     'เงินของทริป: ทุกค่าใช้จ่ายในรูปสมุดบัญชีตามวันที่ ใครเป็นคนจ่ายและใครต้องรับผิดชอบ ในสกุลเงินใดก็ได้ตามใบเสร็จ และในคอลัมน์ด้านขวา ใครต้องจ่ายให้ใครเพื่อให้ยอดเท่ากันอีกครั้ง',
   'help.ctx.trip-costs.bullet.1':
     'การ์ดสี่ใบด้านบน: คุณเป็นหนี้ และ มีคนเป็นหนี้คุณ คือฝั่งของคุณในการเคลียร์ยอด ยอดค้างชำระ คือยอดที่บันทึกไว้แต่ยังไม่มีผู้จ่าย และ ค่าใช้จ่ายในการเดินทางทั้งหมด คือผลรวมทั้งหมด พร้อมส่วนแบ่งของคุณและยอดที่คุณจ่ายไว้ด้านล่าง',
-  'help.ctx.trip-costs.bullet.2': 'เพิ่มค่าใช้จ่าย ที่มุมขวาบนจะเปิดตัวแก้ไข ส่วน เคลียร์ยอด ข้างๆ จะบันทึกการโอนที่ค้างอยู่ทั้งหมดในครั้งเดียว',
+  'help.ctx.trip-costs.bullet.2':
+    'เพิ่มค่าใช้จ่าย ที่มุมขวาบนจะเปิดตัวแก้ไข ส่วน เคลียร์ยอด ข้างๆ จะบันทึกการโอนที่ค้างอยู่ทั้งหมดในครั้งเดียว',
   'help.ctx.trip-costs.bullet.3':
     'สมุดบัญชีจัดกลุ่มตามวัน ใหม่สุดอยู่ก่อน พร้อมยอดรวมของวันนั้นทางขวา แต่ละแถวแสดงหมวดหมู่เป็นแถบสี ชื่อ ชิปผู้จ่าย หมายเหตุ และจำนวนเงิน พร้อม คุณให้ยืม หรือ คุณยืม เมื่อการแบ่งทำให้คุณได้หรือเสียในรายการนั้น',
   'help.ctx.trip-costs.bullet.4':
@@ -2735,7 +3037,8 @@ const help: TranslationStrings = {
     'เลือก หมวดหมู่ มีทั้งหมดสิบสี่หมวดและเปลี่ยนแปลงไม่ได้ หมวดที่คุณเลือกจะเป็นแถบสีบนแถวและแท่งใน ตามหมวดหมู่',
   'help.guide.add-expense.step.5':
     'ใต้ ใครเป็นคนจ่าย? ให้เลือกคนที่จ่ายเงินจริง คุณ ถูกเลือกไว้ล่วงหน้า ยังไม่มีใครจ่ายเงินเลย จะบันทึกจำนวนเงินโดยไม่ทำให้ใครเป็นหนี้ และ จ่ายหลายคนแล้ว จะแบ่งบิลระหว่างผู้จ่ายหลายคน',
-  'help.guide.add-expense.step.6': 'แยก เริ่มต้นที่ เท่าๆ กัน โดยรวมทุกคน และแต่ละชื่อจะแสดงส่วนแบ่งที่คำนวณได้ คลิก เพิ่มค่าใช้จ่าย เพื่อบันทึก',
+  'help.guide.add-expense.step.6':
+    'แยก เริ่มต้นที่ เท่าๆ กัน โดยรวมทุกคน และแต่ละชื่อจะแสดงส่วนแบ่งที่คำนวณได้ คลิก เพิ่มค่าใช้จ่าย เพื่อบันทึก',
   'help.guide.add-expense.result':
     'ค่าใช้จ่ายอยู่ในสมุดบัญชีใต้วันของรายการนั้น ถูกนับรวมใน ค่าใช้จ่ายในการเดินทางทั้งหมด และคอลัมน์เคลียร์ยอดได้คำนวณใหม่แล้วว่าใครเป็นหนี้ใคร',
   'help.guide.add-expense.tip.1':
@@ -2746,7 +3049,8 @@ const help: TranslationStrings = {
     'แนบใบเสร็จ / ใบแจ้งหนี้ ที่ด้านล่างรับรูปภาพและ PDF ไฟล์จะอัปโหลดเมื่อคุณบันทึก ไปอยู่ใน ไฟล์ ของทริป และชิป ใบเสร็จ จะปรากฏข้างชื่อในรายการ',
   // expense-payers
   'help.guide.expense-payers.title': 'ระบุว่าใครจ่ายบิล',
-  'help.guide.expense-payers.goal': 'บันทึกว่าใครออกเงินไปสำหรับค่าใช้จ่ายนั้น ซึ่งเป็นอีกครึ่งหนึ่งของการคำนวณการเคลียร์ยอด',
+  'help.guide.expense-payers.goal':
+    'บันทึกว่าใครออกเงินไปสำหรับค่าใช้จ่ายนั้น ซึ่งเป็นอีกครึ่งหนึ่งของการคำนวณการเคลียร์ยอด',
   'help.guide.expense-payers.step.1':
     'เปิดค่าใช้จ่ายด้วยรูปดินสอข้างแถว แล้วดูที่ ใครเป็นคนจ่าย? ค่าเริ่มต้นคือ คนหนึ่งจ่าย: ดรอปดาวน์จะระบุคนเดียวที่จ่ายเงิน',
   'help.guide.expense-payers.step.2':
@@ -2765,7 +3069,8 @@ const help: TranslationStrings = {
     'การลบผู้จ่ายไม่ได้ลบค่าใช้จ่าย จำนวนเงินยังอยู่ใน ค่าใช้จ่ายในการเดินทางทั้งหมด และแถวจะกลายเป็น ยังไม่เสร็จ',
   // split-expense
   'help.guide.split-expense.title': 'แบ่งบิลระหว่างผู้เดินทาง',
-  'help.guide.split-expense.goal': 'กำหนดว่าใครต้องรับผิดชอบค่าใช้จ่าย: ทุกคนเท่ากัน ตามจำนวนเงิน หรือทีละบรรทัดตามใบเสร็จ',
+  'help.guide.split-expense.goal':
+    'กำหนดว่าใครต้องรับผิดชอบค่าใช้จ่าย: ทุกคนเท่ากัน ตามจำนวนเงิน หรือทีละบรรทัดตามใบเสร็จ',
   'help.guide.split-expense.step.1':
     'ในตัวแก้ไขค่าใช้จ่าย แยก จะแสดงผู้เดินทางทุกคน คลิกชื่อเพื่อไม่รวมคนนั้นในค่าใช้จ่ายนี้ ผู้เดินทางที่ถูกตัดออกจะแสดงว่า ไม่รวม และไม่ต้องจ่ายอะไร',
   'help.guide.split-expense.step.2':
@@ -2778,19 +3083,23 @@ const help: TranslationStrings = {
     'ส่วนแบ่งแต่ละคน ใต้บรรทัดต่างๆ แสดงว่าผู้เดินทางแต่ละคนต้องจ่ายเท่าไรในท้ายที่สุด และ จำนวนเงินทั้งหมด ด้านบนคำนวณจากผลรวมของบรรทัด คลิก บันทึก',
   'help.guide.split-expense.result':
     'การแบ่งคือพื้นฐานของยอดคงเหลือทุกยอด ถูกบันทึกพร้อมกับค่าใช้จ่าย และเปลี่ยนแปลงภายหลังได้โดยไม่กระทบสิ่งอื่น',
-  'help.guide.split-expense.tip.1': 'ผู้เดินทางที่คุณไม่รวมจะแสดงว่า ไม่รวม และไม่ต้องจ่ายอะไรสำหรับค่าใช้จ่ายนี้ คนอื่นๆ จะรับส่วนแบ่งของตน',
+  'help.guide.split-expense.tip.1':
+    'ผู้เดินทางที่คุณไม่รวมจะแสดงว่า ไม่รวม และไม่ต้องจ่ายอะไรสำหรับค่าใช้จ่ายนี้ คนอื่นๆ จะรับส่วนแบ่งของตน',
   'help.guide.split-expense.tip.2':
     'เท่าๆ กัน แม่นยำถึงระดับสตางค์: เศษสตางค์ที่เหลือจะหมุนเวียนไปในแต่ละค่าใช้จ่าย จึงไม่มีใครต้องเป็นคนจ่ายเศษนั้นตลอด',
-  'help.guide.split-expense.tip.3': 'โหมด ตั๋ว จะรวม จำนวนเงินทั้งหมด ให้เองและทำให้ช่องเป็นสีเทา: บรรทัดในใบเสร็จคือยอดรวม',
+  'help.guide.split-expense.tip.3':
+    'โหมด ตั๋ว จะรวม จำนวนเงินทั้งหมด ให้เองและทำให้ช่องเป็นสีเทา: บรรทัดในใบเสร็จคือยอดรวม',
   // expense-currency
   'help.guide.expense-currency.title': 'ป้อนค่าใช้จ่ายในสกุลเงินอื่น',
   'help.guide.expense-currency.goal': 'ใส่ตามที่ใบเสร็จระบุจริง แล้วให้ TREK เก็บอัตราแลกเปลี่ยนไว้',
-  'help.guide.expense-currency.step.1': 'เปิด เพิ่มค่าใช้จ่าย แล้วกรอกชื่อและจำนวนเงินตรงตามใบเสร็จ ใช้ตัวเลขนั้นเลย ไม่ต้องแปลงค่า',
+  'help.guide.expense-currency.step.1':
+    'เปิด เพิ่มค่าใช้จ่าย แล้วกรอกชื่อและจำนวนเงินตรงตามใบเสร็จ ใช้ตัวเลขนั้นเลย ไม่ต้องแปลงค่า',
   'help.guide.expense-currency.step.2':
     'เปิด สกุลเงิน แล้วเลือกสกุลเงินของใบเสร็จ รายการมีทุกรหัสที่ TREK รู้จักและค้นหาได้: พิมพ์ตัวอักษรสามตัว',
   'help.guide.expense-currency.step.3':
     'บรรทัดหนึ่งจะปรากฏใต้ช่องต่างๆ แสดงมูลค่าของจำนวนเงินในขณะนี้ พร้อมเครื่องหมาย อัตราสด นี่เป็นเพียงการแสดงตัวอย่าง ไม่ใช่ค่าที่ถูกบันทึก',
-  'help.guide.expense-currency.step.4': 'คลิก เพิ่มค่าใช้จ่าย อัตราจะถูกตรึงไว้ทันที: จากนี้ไปค่าใช้จ่ายนี้จะมีมูลค่าเท่ากับในวันที่คุณป้อน',
+  'help.guide.expense-currency.step.4':
+    'คลิก เพิ่มค่าใช้จ่าย อัตราจะถูกตรึงไว้ทันที: จากนี้ไปค่าใช้จ่ายนี้จะมีมูลค่าเท่ากับในวันที่คุณป้อน',
   'help.guide.expense-currency.step.5':
     'ในสมุดบัญชี แถวจะแสดงตัวเลขทั้งสองใต้ชื่อ: สิ่งที่คุณพิมพ์ ลูกศร และมูลค่าที่นับในสกุลเงินของทริป ยอดรวม ยอดคงเหลือ และการเคลียร์ยอดทั้งหมดด้านบนใช้ตัวเลขที่สอง',
   'help.guide.expense-currency.result':
@@ -2804,26 +3113,33 @@ const help: TranslationStrings = {
   // filter-costs
   'help.guide.filter-costs.title': 'ค้นหาค่าใช้จ่าย หรือรายจ่ายของวันใดวันหนึ่ง',
   'help.guide.filter-costs.goal': 'ลดสมุดบัญชียาวๆ ให้เหลือเฉพาะสิ่งที่คุณกำลังมองหาจริงๆ',
-  'help.guide.filter-costs.step.1': 'พิมพ์ลงใน ค้นหาค่าใช้จ่าย... เหนือรายการ ระบบจะจับคู่กับชื่อค่าใช้จ่ายขณะที่คุณพิมพ์',
-  'help.guide.filter-costs.step.2': 'ทุกหมวดหมู่ จะเปิดหมวดหมู่ทั้งสิบสี่หมวด เลือกหนึ่งหมวดแล้วจะเหลือเฉพาะค่าใช้จ่ายในหมวดนั้น',
+  'help.guide.filter-costs.step.1':
+    'พิมพ์ลงใน ค้นหาค่าใช้จ่าย... เหนือรายการ ระบบจะจับคู่กับชื่อค่าใช้จ่ายขณะที่คุณพิมพ์',
+  'help.guide.filter-costs.step.2':
+    'ทุกหมวดหมู่ จะเปิดหมวดหมู่ทั้งสิบสี่หมวด เลือกหนึ่งหมวดแล้วจะเหลือเฉพาะค่าใช้จ่ายในหมวดนั้น',
   'help.guide.filter-costs.step.3':
     'ทั้งวัน แสดงทุกวันที่มีการใช้จ่าย เลือกหนึ่งวันแล้วแบนเนอร์จะแทนที่หัวข้อวันด้วยวันนั้น จำนวนค่าใช้จ่ายในวันนั้น และยอดรวม',
   'help.guide.filter-costs.step.4':
     'สวิตช์ ทั้งหมด / ชำระเงินโดยฉัน / ฉันเป็นหนี้ คือมุมมองของคุณเองต่อสมุดบัญชี: สิ่งที่คุณออกเงินไป และสิ่งที่คุณยังไม่ได้เงินคืน',
   'help.guide.filter-costs.step.5':
     'ส่งออก CSV ที่ท้ายแถวจะเขียนค่าใช้จ่ายทั้งหมดลงไฟล์ พร้อมจำนวนเงินเดิม สกุลเงิน และจำนวนเงินที่แปลงแล้ว',
-  'help.guide.filter-costs.result': 'ตัวกรองใช้ร่วมกันได้ และกลุ่มวันจะแสดงใหม่พร้อมยอดรวมของตัวเองสำหรับสิ่งที่เหลืออยู่',
+  'help.guide.filter-costs.result':
+    'ตัวกรองใช้ร่วมกันได้ และกลุ่มวันจะแสดงใหม่พร้อมยอดรวมของตัวเองสำหรับสิ่งที่เหลืออยู่',
   'help.guide.filter-costs.tip.1':
     'การชำระเงินที่บันทึกไว้ไม่มีชื่อและไม่มีหมวดหมู่ การค้นหาหรือตัวกรองหมวดหมู่จึงซ่อนรายการเหล่านี้ ส่วนตัวกรองวันยังคงแสดงไว้ใต้วันที่บันทึกการชำระเงิน',
-  'help.guide.filter-costs.tip.2': 'ส่งออก CSV จะส่งออกค่าใช้จ่ายทั้งหมดเสมอ ไม่ว่าจะกรองอะไรไว้บนหน้าจอ หนึ่งแถวต่อหนึ่งค่าใช้จ่าย',
+  'help.guide.filter-costs.tip.2':
+    'ส่งออก CSV จะส่งออกค่าใช้จ่ายทั้งหมดเสมอ ไม่ว่าจะกรองอะไรไว้บนหน้าจอ หนึ่งแถวต่อหนึ่งค่าใช้จ่าย',
   // settle-up
   'help.guide.settle-up.title': 'คำนวณว่าใครเป็นหนี้ใคร แล้วเคลียร์ยอด',
-  'help.guide.settle-up.goal': 'เปลี่ยนค่าใช้จ่ายร่วมจำนวนมากให้เป็นการโอนที่น้อยที่สุดที่ทำให้ทุกคนเท่ากัน และบันทึกไว้เมื่อเกิดขึ้นจริง',
+  'help.guide.settle-up.goal':
+    'เปลี่ยนค่าใช้จ่ายร่วมจำนวนมากให้เป็นการโอนที่น้อยที่สุดที่ทำให้ทุกคนเท่ากัน และบันทึกไว้เมื่อเกิดขึ้นจริง',
   'help.guide.settle-up.step.1':
     'การ์ด เคลียร์ยอด ในคอลัมน์ด้านขวาแสดงการโอนที่จะทำให้ทุกคนเท่ากัน: ใครจ่ายให้ใครและเท่าไร ตัวเลขข้างชื่อการ์ดคือจำนวนรายการที่ยังค้างอยู่',
   'help.guide.settle-up.step.2': 'ชำระ ข้างการโอนจะบันทึกว่าเสร็จแล้ว รายการนั้นจะหายไปจากการ์ดและยอดคงเหลือจะแสดงใหม่',
-  'help.guide.settle-up.step.3': 'การโอนที่บันทึกแล้วเป็นแถวในสมุดบัญชี ใต้วันที่เกิดขึ้น ระบุว่า การชำระเงิน พร้อมผู้เดินทางสองคนและจำนวนเงิน',
-  'help.guide.settle-up.step.4': 'ข้างแถวนั้น รูปดินสอใช้แก้ไขการชำระเงิน และ เลิกทำ จะยกเลิก แล้วการโอนจะกลับไปที่การ์ด เคลียร์ยอด',
+  'help.guide.settle-up.step.3':
+    'การโอนที่บันทึกแล้วเป็นแถวในสมุดบัญชี ใต้วันที่เกิดขึ้น ระบุว่า การชำระเงิน พร้อมผู้เดินทางสองคนและจำนวนเงิน',
+  'help.guide.settle-up.step.4':
+    'ข้างแถวนั้น รูปดินสอใช้แก้ไขการชำระเงิน และ เลิกทำ จะยกเลิก แล้วการโอนจะกลับไปที่การ์ด เคลียร์ยอด',
   'help.guide.settle-up.step.5':
     'เพิ่มการชำระเงิน ในส่วนหัวของการ์ดใช้บันทึกการโอนที่ไม่ได้ทำตามคำแนะนำ เลือก จาก และ ถึง จำนวนเงิน สกุลเงิน และวันที่เกิดขึ้น',
   'help.guide.settle-up.step.6':
@@ -2850,7 +3166,8 @@ const help: TranslationStrings = {
     'ยอดคงเหลือ คือใครได้หรือเสียในวันนี้ ส่วน งบประมาณสุดท้าย คือค่าใช้จ่ายของทริปที่แต่ละคนต้องแบกรับในท้ายที่สุดเมื่อทุกอย่างได้รับคืนครบแล้ว',
   'help.guide.final-budget.tip.1':
     'การบันทึกการชำระเงินไม่ได้เปลี่ยนงบประมาณสุดท้ายของใคร เพียงแต่ย้ายจำนวนเงินจากยอดชดเชยที่รอดำเนินการไปเป็นยอดชดเชยสุทธิ',
-  'help.guide.final-budget.tip.2': 'ค่าใช้จ่ายที่ไม่มีผู้จ่ายจะไม่อยู่ในการ์ดทั้งสอง เช่นเดียวกับที่ไม่อยู่ในคำแนะนำการเคลียร์ยอด',
+  'help.guide.final-budget.tip.2':
+    'ค่าใช้จ่ายที่ไม่มีผู้จ่ายจะไม่อยู่ในการ์ดทั้งสอง เช่นเดียวกับที่ไม่อยู่ในคำแนะนำการเคลียร์ยอด',
   // expense-from-booking
   'help.guide.expense-from-booking.title': 'เปลี่ยนการจองให้เป็นค่าใช้จ่าย',
   'help.guide.expense-from-booking.goal': 'ผูกค่าใช้จ่ายจริงของเที่ยวบิน โรงแรม หรือสถานที่ เข้ากับรายการที่เกี่ยวข้อง',
@@ -2877,15 +3194,18 @@ const help: TranslationStrings = {
     'แท็บต่างๆ บอกว่ารายการแสดงอะไร: ทั้งหมด PDF รูปภาพ และ เอกสาร แต่ละแท็บมีจำนวนของตัวเอง แท็บดาวจะปรากฏทันทีที่มีไฟล์ติดดาว และ หมายเหตุการทำงานร่วมกัน จะปรากฏทันทีที่มีหมายเหตุแนบไฟล์',
   'help.ctx.trip-files.bullet.3':
     'แต่ละแถวแสดงผู้อัปโหลด ชื่อ หมายเหตุด้านล่าง ขนาดและวันที่ และป้ายหนึ่งป้ายต่อหนึ่งลิงก์: แผนรายวัน และสถานที่ การจอง หรือ ขนส่ง และการจอง จากบันทึกการทำงานร่วมกัน',
-  'help.ctx.trip-files.bullet.4': 'ท้ายแถวมี ดาว มอบหมาย เปิด ดาวน์โหลด และ ลบ โดย ลบ จะไม่ถาม: ไฟล์จะไปอยู่ในถังขยะ ซึ่งกู้คืนได้',
+  'help.ctx.trip-files.bullet.4':
+    'ท้ายแถวมี ดาว มอบหมาย เปิด ดาวน์โหลด และ ลบ โดย ลบ จะไม่ถาม: ไฟล์จะไปอยู่ในถังขยะ ซึ่งกู้คืนได้',
   'help.ctx.trip-files.bullet.5':
     'รูปภาพหรือวิดีโอจะเปิดแบบเต็มหน้าจอ ใช้ปุ่มลูกศรและแถบภาพย่อได้ เอกสารอื่นๆ จะเปิดเป็นตัวอย่างซ้อนบนหน้า พร้อม เปิดในแท็บใหม่ และ ดาวน์โหลด ส่วนบัตรในวอลเล็ตจะถูกดาวน์โหลดทันที',
   'help.ctx.trip-files.bullet.6':
     'ถังขยะ ทางขวาสุดจะสลับรายการไปแสดงไฟล์ที่ถูกลบ ซึ่งแต่ละไฟล์กู้คืนหรือลบถาวรได้ และ ถังขยะเปล่า จะล้างทั้งหมด หากผู้ดูแลระบบเชื่อมต่อที่เก็บเอกสารไว้ ซิงค์เอกสาร จะอยู่ข้างๆ',
   // files-upload
   'help.guide.files-upload.title': 'นำเอกสารเข้าทริป',
-  'help.guide.files-upload.goal': 'ย้ายตั๋ว ใบยืนยัน หรือรูปภาพจากโฟลเดอร์ดาวน์โหลดของคุณเข้ามาในทริป ที่ซึ่งทุกคนในทริปเข้าถึงได้',
-  'help.guide.files-upload.step.1': 'เปิดทริปแล้วคลิก ไฟล์ ในแถบแท็บ เอกสารของทริปจะแสดงอยู่ที่นั่น พร้อมกล่องอัปโหลดด้านบน',
+  'help.guide.files-upload.goal':
+    'ย้ายตั๋ว ใบยืนยัน หรือรูปภาพจากโฟลเดอร์ดาวน์โหลดของคุณเข้ามาในทริป ที่ซึ่งทุกคนในทริปเข้าถึงได้',
+  'help.guide.files-upload.step.1':
+    'เปิดทริปแล้วคลิก ไฟล์ ในแถบแท็บ เอกสารของทริปจะแสดงอยู่ที่นั่น พร้อมกล่องอัปโหลดด้านบน',
   'help.guide.files-upload.step.2':
     'คลิก วางไฟล์ที่นี่ แล้วเลือกไฟล์หนึ่งหรือหลายไฟล์ ไฟล์จะอัปโหลดทีละไฟล์ และกล่องจะแสดง กำลังอัปโหลด... ระหว่างนั้น บรรทัดใต้กล่องบอกว่า TREK นี้รับไฟล์ประเภทใด และไฟล์หนึ่งมีขนาดได้ไม่เกิน 50 MB',
   'help.guide.files-upload.step.3':
@@ -2893,7 +3213,8 @@ const help: TranslationStrings = {
   'help.guide.files-upload.step.4':
     'ไฟล์ใหม่จะอยู่ด้านบนสุดของรายการ แต่ละแถวแสดงผู้อัปโหลด ชื่อ ขนาด และวันที่ รูปภาพจะมีภาพย่อ ไฟล์อื่นๆ จะแสดงประเภท',
   'help.guide.files-upload.result': 'เอกสารอยู่ในทริปแล้ว และทุกคนที่มองเห็นทริปจะเปิดและดาวน์โหลดได้',
-  'help.guide.files-upload.tip.1': 'คุณยังลากไฟล์จากเดสก์ท็อปมาวางบนกล่องได้โดยตรง กล่องจะสว่างขึ้นขณะที่ไฟล์อยู่เหนือกล่อง',
+  'help.guide.files-upload.tip.1':
+    'คุณยังลากไฟล์จากเดสก์ท็อปมาวางบนกล่องได้โดยตรง กล่องจะสว่างขึ้นขณะที่ไฟล์อยู่เหนือกล่อง',
   'help.guide.files-upload.tip.2': 'รูปภาพในคลิปบอร์ดจะเข้าสู่รายการด้วย Ctrl+V จึงไม่ต้องบันทึกภาพหน้าจอการจองก่อน',
   'help.guide.files-upload.tip.3':
     'การอัปโหลดต้องมีสิทธิ์อัปโหลดไฟล์ หากไม่มี กล่องจะไม่แสดงเลย ประเภทที่ไม่อยู่ในรายการจะถูกปฏิเสธพร้อมข้อความ และไม่มีอะไรถูกอัปโหลด ไฟล์ที่ใหญ่กว่า 50 MB จะถูกกล่องปฏิเสธเองก่อนที่จะส่งอะไรออกไป',
@@ -2919,11 +3240,16 @@ const help: TranslationStrings = {
   'help.guide.files-star.goal': 'ดึงเอกสารสองสามชิ้นที่คุณต้องใช้จริงๆ ออกมาจากรายการที่ยาวขึ้นเรื่อยๆ ตลอดทริป',
   'help.guide.files-star.step.1':
     'คลิก ดาว ที่ท้ายแถว ดาวจะเป็นสีเหลือง ดาวดวงที่สองจะปรากฏหน้าชื่อไฟล์ และปุ่มจะเปลี่ยนเป็น ยกเลิกการติดดาว',
-  'help.guide.files-star.step.2': 'รายการจะเรียงใหม่เอง: ไฟล์ที่ติดดาวจะอยู่เหนือไฟล์อื่นทั้งหมด โดยในแต่ละกลุ่มเรียงจากใหม่สุด',
-  'help.guide.files-star.step.3': 'แท็บดาวจะปรากฏขึ้นในแท็บด้านบน พร้อมจำนวนไฟล์ที่ติดดาวต่อท้าย คลิกเพื่อดูเฉพาะไฟล์เหล่านั้น',
-  'help.guide.files-star.result': 'เอกสารที่คุณต้องใช้ที่เคาน์เตอร์จะอยู่ด้านบนสุดของรายการ และมีแท็บหนึ่งที่แสดงเฉพาะเอกสารเหล่านั้น',
-  'help.guide.files-star.tip.1': 'แท็บดาวจะมีอยู่เฉพาะเมื่อมีไฟล์ติดดาว เมื่อยกเลิกการติดดาวไฟล์สุดท้าย แท็บก็จะหายไปด้วย',
-  'help.guide.files-star.tip.2': 'การติดดาวนับเป็นการแก้ไข: สมาชิกที่อ่านไฟล์ของทริปได้อย่างเดียวจะเห็นดาวแต่ติดดาวไม่ได้',
+  'help.guide.files-star.step.2':
+    'รายการจะเรียงใหม่เอง: ไฟล์ที่ติดดาวจะอยู่เหนือไฟล์อื่นทั้งหมด โดยในแต่ละกลุ่มเรียงจากใหม่สุด',
+  'help.guide.files-star.step.3':
+    'แท็บดาวจะปรากฏขึ้นในแท็บด้านบน พร้อมจำนวนไฟล์ที่ติดดาวต่อท้าย คลิกเพื่อดูเฉพาะไฟล์เหล่านั้น',
+  'help.guide.files-star.result':
+    'เอกสารที่คุณต้องใช้ที่เคาน์เตอร์จะอยู่ด้านบนสุดของรายการ และมีแท็บหนึ่งที่แสดงเฉพาะเอกสารเหล่านั้น',
+  'help.guide.files-star.tip.1':
+    'แท็บดาวจะมีอยู่เฉพาะเมื่อมีไฟล์ติดดาว เมื่อยกเลิกการติดดาวไฟล์สุดท้าย แท็บก็จะหายไปด้วย',
+  'help.guide.files-star.tip.2':
+    'การติดดาวนับเป็นการแก้ไข: สมาชิกที่อ่านไฟล์ของทริปได้อย่างเดียวจะเห็นดาวแต่ติดดาวไม่ได้',
   // files-filter
   'help.guide.files-filter.title': 'ค้นหาเอกสารในรายการ',
   'help.guide.files-filter.goal': 'ลดรายการทั้งหมดให้เหลือเฉพาะประเภทเอกสารที่คุณต้องการ',
@@ -2940,35 +3266,45 @@ const help: TranslationStrings = {
   // files-preview
   'help.guide.files-preview.title': 'อ่านเอกสารโดยไม่ต้องออกจาก TREK',
   'help.guide.files-preview.goal': 'ดูตั๋วหรือรูปภาพได้ทันที และบันทึกลงเครื่องของคุณเมื่อต้องการ',
-  'help.guide.files-preview.step.1': 'คลิกชื่อหรือภาพย่อของรูปภาพ รูปจะเปิดแบบเต็มหน้าจอ พร้อมชื่อไฟล์และลำดับของรูปในส่วนหัว',
-  'help.guide.files-preview.step.2': 'ลูกศรกลมที่ด้านข้าง ปุ่มลูกศรซ้ายและขวา และแถบภาพย่อด้านล่าง ใช้เลื่อนดูทุกรูปที่รายการกำลังแสดงอยู่',
+  'help.guide.files-preview.step.1':
+    'คลิกชื่อหรือภาพย่อของรูปภาพ รูปจะเปิดแบบเต็มหน้าจอ พร้อมชื่อไฟล์และลำดับของรูปในส่วนหัว',
+  'help.guide.files-preview.step.2':
+    'ลูกศรกลมที่ด้านข้าง ปุ่มลูกศรซ้ายและขวา และแถบภาพย่อด้านล่าง ใช้เลื่อนดูทุกรูปที่รายการกำลังแสดงอยู่',
   'help.guide.files-preview.step.3': 'เปิดในแท็บใหม่ และ ดาวน์โหลด อยู่ในส่วนหัว × หรือ Escape จะปิดรูปภาพ',
   'help.guide.files-preview.step.4':
     'เอกสารที่ไม่ใช่รูปภาพจะเปิดเป็นตัวอย่างซ้อนบนหน้าแทน พร้อมสองปุ่มเดียวกันในส่วนหัว ตัวอย่างนี้ปิดได้ด้วย × หรือคลิกด้านนอก',
   'help.guide.files-preview.step.5': 'ดาวน์โหลด ที่ท้ายแถวจะบันทึกไฟล์ลงเครื่องของคุณโดยตรง โดยไม่ต้องเปิดอะไรก่อน',
-  'help.guide.files-preview.result': 'เอกสารแสดงอยู่บนหน้าจอ และสองปุ่มเดียวกันจะเปิดในแท็บเบราว์เซอร์หรือบันทึกลงดิสก์ของคุณ',
+  'help.guide.files-preview.result':
+    'เอกสารแสดงอยู่บนหน้าจอ และสองปุ่มเดียวกันจะเปิดในแท็บเบราว์เซอร์หรือบันทึกลงดิสก์ของคุณ',
   'help.guide.files-preview.tip.1': 'บนหน้าจอสัมผัส ให้ปัดเพื่อดูรูปภาพแทนการคลิกลูกศร',
-  'help.guide.files-preview.tip.2': 'บัตรในวอลเล็ตจะไม่เปิดตัวอย่าง: จะถูกดาวน์โหลดทันที เพื่อให้โทรศัพท์ส่งต่อไปยังแอปวอลเล็ตได้',
+  'help.guide.files-preview.tip.2':
+    'บัตรในวอลเล็ตจะไม่เปิดตัวอย่าง: จะถูกดาวน์โหลดทันที เพื่อให้โทรศัพท์ส่งต่อไปยังแอปวอลเล็ตได้',
   'help.guide.files-preview.tip.3':
     'เปิดในแท็บใหม่ และ ดาวน์โหลด ดึงไฟล์โดยใช้เซสชันของคุณ ลิงก์ที่คัดลอกจากแถบที่อยู่จึงไม่มีประโยชน์สำหรับคนอื่น',
   // files-trash
   'help.guide.files-trash.title': 'ทิ้งเอกสาร และกู้คืนกลับมา',
   'help.guide.files-trash.goal': 'ล้างสิ่งที่ทริปไม่ต้องการแล้ว โดยไม่เสียสิ่งที่ภายหลังพบว่ายังต้องใช้',
-  'help.guide.files-trash.step.1': 'คลิก ลบ ที่ท้ายแถว ไฟล์จะหายจากรายการทันทีและข้อความแสดงว่า ย้ายไปถังขยะแล้ว ไม่มีการถามก่อน',
+  'help.guide.files-trash.step.1':
+    'คลิก ลบ ที่ท้ายแถว ไฟล์จะหายจากรายการทันทีและข้อความแสดงว่า ย้ายไปถังขยะแล้ว ไม่มีการถามก่อน',
   'help.guide.files-trash.step.2':
     'ถังขยะ ทางขวาสุดของแถบเครื่องมือจะสลับรายการไปแสดงสิ่งที่ถูกทิ้ง หัวข้อจะเป็น ถังขยะ และแท็บตัวกรองจะหายไป',
-  'help.guide.files-trash.step.3': 'แถวที่ถูกทิ้งจะเป็นสีเทาและเหลือสองปุ่ม: คืนค่า ซึ่งนำไฟล์กลับมา และ ลบ ซึ่งลบถาวรหลังจากยืนยัน',
-  'help.guide.files-trash.step.4': 'คลิก คืนค่า ข้อความจะแสดง กู้คืนไฟล์แล้ว และแถวจะออกจากถังขยะ โดยยังมีหมายเหตุและลิงก์อยู่ครบ',
+  'help.guide.files-trash.step.3':
+    'แถวที่ถูกทิ้งจะเป็นสีเทาและเหลือสองปุ่ม: คืนค่า ซึ่งนำไฟล์กลับมา และ ลบ ซึ่งลบถาวรหลังจากยืนยัน',
+  'help.guide.files-trash.step.4':
+    'คลิก คืนค่า ข้อความจะแสดง กู้คืนไฟล์แล้ว และแถวจะออกจากถังขยะ โดยยังมีหมายเหตุและลิงก์อยู่ครบ',
   'help.guide.files-trash.step.5':
     'ถังขยะเปล่า ด้านบนจะลบทุกอย่างที่ยังอยู่ในนี้ถาวร และเบราว์เซอร์จะถามหนึ่งครั้งก่อนดำเนินการ ถังขยะ จะสลับกลับไปที่ไฟล์',
   'help.guide.files-trash.result': 'ไฟล์กลับมาอยู่ในรายการที่เดิม เหมือนไม่มีอะไรเกิดขึ้น',
-  'help.guide.files-trash.tip.1': 'ลบ บนแถวไม่ถามก่อน และนั่นคือหน้าที่ของถังขยะ: ไม่มีอะไรออกจาก TREK จนกว่าคุณจะสั่งที่นี่',
-  'help.guide.files-trash.tip.2': 'การทิ้งไฟล์และกู้คืนต้องมีสิทธิ์ลบไฟล์ สมาชิกที่ไม่มีสิทธิ์จะไม่เห็นทั้ง ลบ บนแถวและปุ่มในถังขยะ',
+  'help.guide.files-trash.tip.1':
+    'ลบ บนแถวไม่ถามก่อน และนั่นคือหน้าที่ของถังขยะ: ไม่มีอะไรออกจาก TREK จนกว่าคุณจะสั่งที่นี่',
+  'help.guide.files-trash.tip.2':
+    'การทิ้งไฟล์และกู้คืนต้องมีสิทธิ์ลบไฟล์ สมาชิกที่ไม่มีสิทธิ์จะไม่เห็นทั้ง ลบ บนแถวและปุ่มในถังขยะ',
   'help.guide.files-trash.tip.3': 'ไฟล์ที่ถูกลบถาวรในถังขยะจะกู้คืนไม่ได้',
 
   // files-sync
   'help.guide.files-sync.title': 'ซิงค์เอกสารให้ตรงกับที่เก็บเอกสารของคุณ',
-  'help.guide.files-sync.goal': 'ผูกทริปเข้ากับที่เก็บเอกสารของคุณเอง เพื่อให้สิ่งที่อัปโหลดที่นี่ไปอยู่ที่นั่น และสิ่งที่จัดเก็บที่นั่นปรากฏที่นี่',
+  'help.guide.files-sync.goal':
+    'ผูกทริปเข้ากับที่เก็บเอกสารของคุณเอง เพื่อให้สิ่งที่อัปโหลดที่นี่ไปอยู่ที่นั่น และสิ่งที่จัดเก็บที่นั่นปรากฏที่นี่',
   'help.guide.files-sync.step.1':
     'คลิก ซิงค์เอกสาร ข้าง ถังขยะ ทางขวาสุดของแถบเครื่องมือ กล่องโต้ตอบจะเปิดขึ้นพร้อมชื่อทริปใต้หัวเรื่อง ทางซ้ายใต้ เชื่อมต่อผู้ให้บริการ มีที่เก็บที่ผู้ดูแลระบบเปิดใช้ไว้ แต่ละรายการมีคำอธิบายว่าจัดเก็บอย่างไร: Paperless-ngx และ Papra ตามแท็ก Nextcloud และ Synology Drive ในโฟลเดอร์ OpenCloud ในสเปซ ทางขวาจะแสดง ยังไม่มีการเชื่อมต่อ',
   'help.guide.files-sync.step.2':
@@ -3007,20 +3343,24 @@ const help: TranslationStrings = {
     'กำหนดการถัดไป แสดงจุดแวะของทริปที่ยังมาไม่ถึง สูงสุดแปดรายการ พร้อมเวลาและผู้ที่เข้าร่วม แผงนี้อ่านจากแผนรายวันเท่านั้น เวลาต้องตั้งค่าที่นั่น',
   // write-note
   'help.guide.write-note.title': 'เขียนหมายเหตุที่แชร์',
-  'help.guide.write-note.goal': 'ใส่สิ่งที่ทั้งกลุ่มต้องรู้ เช่น กฎ ที่อยู่ หรือการแจ้งเตือน ไว้ในที่ที่ทุกคนหาเจออีกครั้ง',
+  'help.guide.write-note.goal':
+    'ใส่สิ่งที่ทั้งกลุ่มต้องรู้ เช่น กฎ ที่อยู่ หรือการแจ้งเตือน ไว้ในที่ที่ทุกคนหาเจออีกครั้ง',
   'help.guide.write-note.step.1': 'คลิก หมายเหตุใหม่ ที่ด้านบนของแผง หมายเหตุ แบบฟอร์มจะเปิดขึ้น',
-  'help.guide.write-note.step.2': 'ชื่อหมายเหตุ คือชื่อที่แสดงบนการ์ด เป็นสิ่งเดียวที่แบบฟอร์มบังคับ: สร้าง จะเป็นสีเทาจนกว่าจะมีข้อความในช่องนี้',
+  'help.guide.write-note.step.2':
+    'ชื่อหมายเหตุ คือชื่อที่แสดงบนการ์ด เป็นสิ่งเดียวที่แบบฟอร์มบังคับ: สร้าง จะเป็นสีเทาจนกว่าจะมีข้อความในช่องนี้',
   'help.guide.write-note.step.3':
     'ช่องใหญ่ด้านล่างใช้ใส่ข้อความและรองรับ Markdown: ตัวหนา รายการ หัวข้อ การ์ดจะแสดงสองสามบรรทัดแรก และ ขยาย บนการ์ดจะเปิดหมายเหตุทั้งหมด',
   'help.guide.write-note.step.4':
     'ใต้ หมวดหมู่ ให้เลือกหมวดที่หมายเหตุนี้อยู่ สีของหมวดจะกลายเป็นสีของการ์ด ปุ่มแคปซูลคือหมวดหมู่ที่มีอยู่แล้ว และหมวดใหม่สร้างได้ใน จัดการหมวดหมู่',
   'help.guide.write-note.step.5': 'เว็บไซต์ รับลิงก์ที่เกี่ยวข้องกับหมายเหตุ การ์ดจะมีไทล์ ลิงก์ ที่เปิดลิงก์นั้น',
   'help.guide.write-note.step.6': 'คลิก สร้าง',
-  'help.guide.write-note.result': 'หมายเหตุเป็นการ์ดในแผง หมายเหตุ ในสีของหมวดหมู่ และแสดงบนหน้าจอของสมาชิกคนอื่นทุกคนแล้ว',
+  'help.guide.write-note.result':
+    'หมายเหตุเป็นการ์ดในแผง หมายเหตุ ในสีของหมวดหมู่ และแสดงบนหน้าจอของสมาชิกคนอื่นทุกคนแล้ว',
   'help.guide.write-note.tip.1': 'พิน บนการ์ดจะคงการ์ดไว้ด้านบนของแผง ส่วนที่เหลือเรียงตามเวลาที่แก้ไขล่าสุด',
   'help.guide.write-note.tip.2':
     'เฟืองข้าง หมายเหตุใหม่ จะเปิด จัดการหมวดหมู่: ที่นั่นหมวดหมู่จะได้รับสี เปลี่ยนชื่อได้ทุกที่พร้อมกัน หรือเพิ่มได้ก่อนที่จะมีหมายเหตุใช้',
-  'help.guide.write-note.tip.3': 'แนบไฟล์ ใช้แนบเอกสารกับหมายเหตุ แนบ จะเปิดตัวเลือกไฟล์ และรูปภาพหรือ PDF ก็วางลงในแบบฟอร์มได้เลย',
+  'help.guide.write-note.tip.3':
+    'แนบไฟล์ ใช้แนบเอกสารกับหมายเหตุ แนบ จะเปิดตัวเลือกไฟล์ และรูปภาพหรือ PDF ก็วางลงในแบบฟอร์มได้เลย',
   'help.guide.write-note.tip.4':
     'หมายเหตุ เป็นสวิตช์แยกของตัวเองใต้ ส่วนเสริม ด้านล่าง ร่วมมือกัน: ผู้ดูแลระบบปิดได้โดยที่แชท ลิงก์ โพล และ กำหนดการถัดไป ยังทำงานอยู่',
   // shared-links
@@ -3041,10 +3381,13 @@ const help: TranslationStrings = {
   'help.guide.create-poll.title': 'ถามกลุ่ม',
   'help.guide.create-poll.goal': 'เปลี่ยนคำถามที่ไม่มีใครตอบในแชทให้เป็นโพลที่ทุกคนติ๊กได้',
   'help.guide.create-poll.step.1': 'คลิก โพลใหม่ ที่ด้านบนของแผง โพล',
-  'help.guide.create-poll.step.2': 'เขียนคำถาม รองรับมาร์กดาวน์ ใต้ช่องหมายความว่าตัวหนา การขึ้นบรรทัดใหม่ หรือรายการสั้นๆ ใช้ได้ที่นี่',
+  'help.guide.create-poll.step.2':
+    'เขียนคำถาม รองรับมาร์กดาวน์ ใต้ช่องหมายความว่าตัวหนา การขึ้นบรรทัดใหม่ หรือรายการสั้นๆ ใช้ได้ที่นี่',
   'help.guide.create-poll.step.3': 'กรอก ตัวเลือก 1 และ ตัวเลือก 2 ต้องมีอย่างน้อยสองตัวเลือกที่มีข้อความ',
-  'help.guide.create-poll.step.4': '+ เพิ่มตัวเลือก จะเพิ่มตัวเลือกที่สาม ที่สี่ ได้มากเท่าที่ต้องการ กากบาทเล็กข้างแถวใช้ลบตัวเลือกออก',
-  'help.guide.create-poll.step.5': 'หลายทางเลือก ให้ทุกคนติ๊กได้มากกว่าหนึ่งตัวเลือก หากปิดไว้ การโหวตจะย้ายไปเมื่อมีคนเลือกตัวเลือกอื่น',
+  'help.guide.create-poll.step.4':
+    '+ เพิ่มตัวเลือก จะเพิ่มตัวเลือกที่สาม ที่สี่ ได้มากเท่าที่ต้องการ กากบาทเล็กข้างแถวใช้ลบตัวเลือกออก',
+  'help.guide.create-poll.step.5':
+    'หลายทางเลือก ให้ทุกคนติ๊กได้มากกว่าหนึ่งตัวเลือก หากปิดไว้ การโหวตจะย้ายไปเมื่อมีคนเลือกตัวเลือกอื่น',
   'help.guide.create-poll.step.6': 'คลิก สร้างแบบสำรวจ',
   'help.guide.create-poll.result': 'โพลจะอยู่ด้านบนของแผง โพล เปิดอยู่ และยังไม่มีใครโหวต',
   'help.guide.create-poll.tip.1': 'คำถามแสดงผลเป็น Markdown ส่วนตัวเลือกเป็นข้อความธรรมดา',
@@ -3057,13 +3400,16 @@ const help: TranslationStrings = {
   'help.guide.vote-poll.title': 'โหวตและอ่านผล',
   'help.guide.vote-poll.goal': 'ลงคะแนนของคุณ ดูว่ากลุ่มคิดอย่างไร และเปลี่ยนใจได้',
   'help.guide.vote-poll.step.1': 'คลิกตัวเลือกที่คุณต้องการ วงกลมจะถูกเติมสีและแถบด้านหลังจะยาวขึ้น',
-  'help.guide.vote-poll.step.2': 'ตอนนี้อ่านผลทั้งหมดได้แล้ว: แถบคือสัดส่วน เปอร์เซ็นต์อยู่ทางขวา และวงกลมเล็กๆ คือคนที่เลือกตัวเลือกนั้น',
+  'help.guide.vote-poll.step.2':
+    'ตอนนี้อ่านผลทั้งหมดได้แล้ว: แถบคือสัดส่วน เปอร์เซ็นต์อยู่ทางขวา และวงกลมเล็กๆ คือคนที่เลือกตัวเลือกนั้น',
   'help.guide.vote-poll.step.3':
     'เปลี่ยนใจหรือ? คลิกตัวเลือกอื่น ในโพลที่ไม่มี หลายทางเลือก การโหวตของคุณจะย้ายไปแทนที่จะเพิ่มเป็นโหวตที่สอง',
   'help.guide.vote-poll.step.4':
     'ใต้คำถามจะแสดงจำนวนโหวตของโพล การคลิกตัวเลือกที่คุณเลือกไว้แล้วจะถอนการโหวตของคุณ และตัวนับจะลดลงอีกครั้ง',
-  'help.guide.vote-poll.result': 'การติ๊กของคุณอยู่ที่ตัวเลือกหนึ่ง แถบแสดงว่ากลุ่มแบ่งความเห็นอย่างไร และวงกลมบอกว่าใครเลือกอะไร',
-  'help.guide.vote-poll.tip.1': 'แถบและเปอร์เซ็นต์จะปรากฏเมื่อคุณโหวตเองแล้ว หรือเมื่อโพลปิดแล้วเท่านั้น เพื่อไม่ให้ใครถูกผลคะแนนชี้นำ',
+  'help.guide.vote-poll.result':
+    'การติ๊กของคุณอยู่ที่ตัวเลือกหนึ่ง แถบแสดงว่ากลุ่มแบ่งความเห็นอย่างไร และวงกลมบอกว่าใครเลือกอะไร',
+  'help.guide.vote-poll.tip.1':
+    'แถบและเปอร์เซ็นต์จะปรากฏเมื่อคุณโหวตเองแล้ว หรือเมื่อโพลปิดแล้วเท่านั้น เพื่อไม่ให้ใครถูกผลคะแนนชี้นำ',
   'help.guide.vote-poll.tip.2': 'การโหวตไม่เคยเป็นแบบไม่ระบุตัวตน: ชี้เมาส์ที่วงกลมบนตัวเลือกเพื่อดูชื่อเจ้าของ',
   // close-poll
   'help.guide.close-poll.title': 'ปิดโพล หรือลบโพล',
@@ -3080,16 +3426,20 @@ const help: TranslationStrings = {
   'help.guide.whats-next.goal': 'ดูว่ากลุ่มจะทำอะไรต่อไปโดยไม่ต้องเปิดแผน',
   'help.guide.whats-next.step.1':
     'แผงแสดงจุดแวะของทริปที่ยังมาไม่ถึง สูงสุดแปดรายการ เรียงตามเวลา ใต้หัวข้อของแต่ละวัน: วันนี้ พรุ่งนี้ หรือวันที่',
-  'help.guide.whats-next.step.2': 'ทางซ้ายของแถวคือเวลา: เวลาเริ่ม ถึง และเวลาสิ้นสุดหากจุดแวะมี หรือ ยังไม่กำหนด หากยังไม่ได้ตั้งเวลา',
+  'help.guide.whats-next.step.2':
+    'ทางซ้ายของแถวคือเวลา: เวลาเริ่ม ถึง และเวลาสิ้นสุดหากจุดแวะมี หรือ ยังไม่กำหนด หากยังไม่ได้ตั้งเวลา',
   'help.guide.whats-next.step.3': 'ชิปใต้ชื่อคือคนที่อยู่ในจุดแวะนั้น หากไม่ได้เลือกใครไว้ จะแสดงทุกคนในทริป',
-  'help.guide.whats-next.result': 'รายการสิ่งที่กำลังจะมาถึง สำหรับอ่านเท่านั้น: เป็นไปตามแผน และไม่มีอะไรที่นี่เปลี่ยนแผนได้',
+  'help.guide.whats-next.result':
+    'รายการสิ่งที่กำลังจะมาถึง สำหรับอ่านเท่านั้น: เป็นไปตามแผน และไม่มีอะไรที่นี่เปลี่ยนแผนได้',
   'help.guide.whats-next.tip.1': 'ที่นี่ไม่มีอะไรให้ตั้งค่า เวลามาจากแผนรายวัน เปลี่ยนที่นั่นแล้วรายการนี้จะตามทันที',
-  'help.guide.whats-next.tip.2': 'แสดงเฉพาะสิ่งที่ยังมาไม่ถึง: จุดแวะที่เลยเวลาแล้วจะหายไป และเมื่อจบทริป แผงจะว่างเปล่า',
+  'help.guide.whats-next.tip.2':
+    'แสดงเฉพาะสิ่งที่ยังมาไม่ถึง: จุดแวะที่เลยเวลาแล้วจะหายไป และเมื่อจบทริป แผงจะว่างเปล่า',
   'help.guide.whats-next.tip.3':
     'กำหนดการถัดไป เป็นสวิตช์แยกของตัวเองใต้ ส่วนเสริม ด้านล่าง ร่วมมือกัน และเป็นแผงสำหรับเดสก์ท็อป: แท็บ ร่วมมือกัน ในแอปโทรศัพท์ไม่มีแผงนี้',
   // trip-chat
   'help.guide.trip-chat.title': 'คุยกับกลุ่ม',
-  'help.guide.trip-chat.goal': 'พูดอะไรสักอย่าง ตอบข้อความใดข้อความหนึ่ง แสดงรีแอคชันต่ออีกข้อความ และถอนข้อความของคุณเอง',
+  'help.guide.trip-chat.goal':
+    'พูดอะไรสักอย่าง ตอบข้อความใดข้อความหนึ่ง แสดงรีแอคชันต่ออีกข้อความ และถอนข้อความของคุณเอง',
   'help.guide.trip-chat.step.1':
     'เขียนลงใน พิมพ์ข้อความ… แล้วกด Enter ลูกศรสีน้ำเงินข้างช่องทำงานเหมือนกัน ส่วน Shift กับ Enter จะขึ้นบรรทัดใหม่แทน',
   'help.guide.trip-chat.step.2':
@@ -3097,7 +3447,8 @@ const help: TranslationStrings = {
   'help.guide.trip-chat.step.3': 'ชี้เมาส์ที่ข้อความของคนอื่น: ปุ่มกลมเล็กๆ จะปรากฏที่มุม นั่นคือ ตอบกลับ',
   'help.guide.trip-chat.step.4':
     'ข้อความที่คุณตอบจะถูกยกมาแสดงเหนือช่อง เขียนแล้วส่ง ข้อความที่ยกมาจะติดไปในบับเบิลของคุณ กากบาทบนข้อความที่ยกมาจะเอาออก',
-  'help.guide.trip-chat.step.5': 'คลิกขวาที่ข้อความเพื่อดูรีแอคชันด่วนแปดแบบ รีแอคชันของคุณจะอยู่ใต้บับเบิล และการคลิกที่อันเดิมอีกครั้งจะถอนออก',
+  'help.guide.trip-chat.step.5':
+    'คลิกขวาที่ข้อความเพื่อดูรีแอคชันด่วนแปดแบบ รีแอคชันของคุณจะอยู่ใต้บับเบิล และการคลิกที่อันเดิมอีกครั้งจะถอนออก',
   'help.guide.trip-chat.step.6':
     'ข้อความของคุณเองมี ลบ อยู่ข้าง ตอบกลับ ซึ่งจะลบข้อความและเหลือหนึ่งบรรทัดที่บอกว่าคุณลบไปแล้ว: ย้อนกลับไม่ได้',
   'help.guide.trip-chat.result':
@@ -3135,20 +3486,26 @@ const help: TranslationStrings = {
     'ด้านล่างเป็นการ์ดหนึ่งใบต่อวัน ส่วนหัวของการ์ดแสดงหมายเลขวันและวันที่ ระยะทางและเวลาขับรถ และจำนวนจุดแวะของวันนั้น',
   'help.guide.roadtrip-mode.step.4':
     'ภายในการ์ด วันจะเป็นลำดับต่อเนื่อง: จุดแวะมีหมายเลขหนึ่งจุดต่อสถานที่ แถบการขับรถระหว่างแต่ละคู่ และเวลาถึงที่ขอบขวา',
-  'help.guide.roadtrip-mode.step.5': 'คลิกส่วนหัวของวันเพื่อพับเก็บ วันที่พับเก็บจะหายไปจากแผนที่ด้วย คลิกส่วนหัวอีกครั้งเพื่อแสดงกลับมา',
-  'help.guide.roadtrip-mode.result': 'คอลัมน์ซ้ายคือการขับรถ และแผนที่แสดงทุกวันของการขับรถ วัน จะสลับกลับไปที่แผนทันทีโดยไม่มีอะไรเปลี่ยน',
-  'help.guide.roadtrip-mode.tip.1': 'ตัวเลือกนี้ถูกจำไว้แยกตามทริปตราบเท่าที่แท็บเบราว์เซอร์ยังเปิดอยู่ การโหลดหน้าใหม่จึงกลับมาที่การขับรถ',
-  'help.guide.roadtrip-mode.tip.2': 'สวิตช์จะมีก็ต่อเมื่อผู้ดูแลระบบเปิดส่วนเสริม โรดทริป ไว้แล้ว ใต้ ส่วนเสริม ในแผงผู้ดูแลระบบ',
+  'help.guide.roadtrip-mode.step.5':
+    'คลิกส่วนหัวของวันเพื่อพับเก็บ วันที่พับเก็บจะหายไปจากแผนที่ด้วย คลิกส่วนหัวอีกครั้งเพื่อแสดงกลับมา',
+  'help.guide.roadtrip-mode.result':
+    'คอลัมน์ซ้ายคือการขับรถ และแผนที่แสดงทุกวันของการขับรถ วัน จะสลับกลับไปที่แผนทันทีโดยไม่มีอะไรเปลี่ยน',
+  'help.guide.roadtrip-mode.tip.1':
+    'ตัวเลือกนี้ถูกจำไว้แยกตามทริปตราบเท่าที่แท็บเบราว์เซอร์ยังเปิดอยู่ การโหลดหน้าใหม่จึงกลับมาที่การขับรถ',
+  'help.guide.roadtrip-mode.tip.2':
+    'สวิตช์จะมีก็ต่อเมื่อผู้ดูแลระบบเปิดส่วนเสริม โรดทริป ไว้แล้ว ใต้ ส่วนเสริม ในแผงผู้ดูแลระบบ',
   'help.guide.roadtrip-mode.tip.3': 'บนโทรศัพท์ไม่มีสวิตช์: ส่วนเสริมจะเพิ่มแท็บ โรดทริป ของตัวเองข้าง แผน',
   // roadtrip-stops
   'help.guide.roadtrip-stops.title': 'จุดแวะระหว่างทาง และระยะเวลาที่อยู่',
-  'help.guide.roadtrip-stops.goal': 'เปลี่ยนสถานที่บนเส้นทางให้เป็นจุดแวะระหว่างทาง และระบุว่าแต่ละจุดแวะใช้เวลานานเท่าไร',
+  'help.guide.roadtrip-stops.goal':
+    'เปลี่ยนสถานที่บนเส้นทางให้เป็นจุดแวะระหว่างทาง และระบุว่าแต่ละจุดแวะใช้เวลานานเท่าไร',
   'help.guide.roadtrip-stops.step.1':
     'คลิกหมายเลขหน้าจุดแวะในแถบลำดับ ป้ายกำกับคือ กำหนดเป็นจุดแวะระหว่างทาง และจะเปิด ประเภทจุดแวะ',
   'help.guide.roadtrip-stops.step.2':
     'เลือกประเภท: ที่พัก เชื้อเพลิง จุดชาร์จ จุดพักรถ ลานกางเต็นท์ อาหาร หรือ สถานที่ท่องเที่ยว หมายเลขจะเปลี่ยนเป็นไอคอนของประเภทนั้น และจุดแวะด้านล่างจะถูกจัดหมายเลขใหม่',
   'help.guide.roadtrip-stops.step.3': 'จุดแวะระหว่างทางไม่ใช่จุดหมาย ส่วนหัวของวันจึงนับจุดแวะน้อยลงหนึ่งจุด',
-  'help.guide.roadtrip-stops.step.4': 'คลิกไอคอนอีกครั้ง เปลี่ยนประเภทจุดแวะ แล้วเลือก กลับเป็นจุดหมาย เพื่อให้จุดแวะได้หมายเลขกลับคืน',
+  'help.guide.roadtrip-stops.step.4':
+    'คลิกไอคอนอีกครั้ง เปลี่ยนประเภทจุดแวะ แล้วเลือก กลับเป็นจุดหมาย เพื่อให้จุดแวะได้หมายเลขกลับคืน',
   'help.guide.roadtrip-stops.step.5': 'จุดแวะทุกจุดมีป้าย อยู่ คลิกเพื่อเปิด เวลาที่จุดแวะนี้',
   'help.guide.roadtrip-stops.step.6':
     'ตั้งระยะเวลาด้วยแถบเลื่อน ปุ่มลบและบวก หรือค่าที่ตั้งไว้ล่วงหน้า ดูว่า ถึง และ ออก เปลี่ยนไปอย่างไร แล้วคลิก บันทึก',
@@ -3165,13 +3522,16 @@ const help: TranslationStrings = {
   'help.guide.roadtrip-corridor.step.1': 'เลือกวันที่ด้านบนของ ตามเส้นทาง จะแสดงเฉพาะวันที่คำนวณเส้นทางแล้ว',
   'help.guide.roadtrip-corridor.step.2':
     'ใต้ กำลังมองหา ให้ติ๊กสิ่งที่คุณต้องการ เชื้อเพลิง จุดชาร์จ จุดพักรถ ลานกางเต็นท์ ที่พัก อาหาร และ สถานที่ท่องเที่ยว เลือกร่วมกันได้',
-  'help.guide.roadtrip-corridor.step.3': 'ใต้ ภายใน ให้เลือกระยะห่างจากสองข้างถนนที่จะค้นหา 2 กม, 5 กม หรือ 10 กม แล้วคลิก ค้นหา',
+  'help.guide.roadtrip-corridor.step.3':
+    'ใต้ ภายใน ให้เลือกระยะห่างจากสองข้างถนนที่จะค้นหา 2 กม, 5 กม หรือ 10 กม แล้วคลิก ค้นหา',
   'help.guide.roadtrip-corridor.step.4':
     'ผลลัพธ์จะแสดงแยกตามประเภท เรียงตามลำดับที่คุณผ่าน แต่ละรายการบอกว่าอยู่ห่างจากจุดเริ่มของวันเท่าไรและห่างจากเส้นทางเท่าไร',
   'help.guide.roadtrip-corridor.step.5':
     'เพิ่ม บนผลลัพธ์จะเปิด เพิ่มเป็นจุดแวะ ซึ่งบอกว่าจุดแวะจะอยู่ในวันไหนและตำแหน่งใด ถามประเภทและเวลาที่จุดแวะ และ เพิ่ม จะใส่ลงในการขับรถ',
-  'help.guide.roadtrip-corridor.result': 'ผลลัพธ์แสดงตามลำดับที่คุณผ่านและวาดบนแผนที่ และรายการที่คุณเพิ่มจะอยู่บนการขับรถ ณ จุดที่ผ่านจริง',
-  'help.guide.roadtrip-corridor.tip.1': 'จะไม่มีการค้นหาจนกว่าคุณจะกด ค้นหา: การค้นหาหนึ่งครั้งคือคำขอจำนวนมากไปยังบริการที่ใช้ร่วมกัน',
+  'help.guide.roadtrip-corridor.result':
+    'ผลลัพธ์แสดงตามลำดับที่คุณผ่านและวาดบนแผนที่ และรายการที่คุณเพิ่มจะอยู่บนการขับรถ ณ จุดที่ผ่านจริง',
+  'help.guide.roadtrip-corridor.tip.1':
+    'จะไม่มีการค้นหาจนกว่าคุณจะกด ค้นหา: การค้นหาหนึ่งครั้งคือคำขอจำนวนมากไปยังบริการที่ใช้ร่วมกัน',
   'help.guide.roadtrip-corridor.tip.2':
     'กรองตามชื่อ จะกรองผลลัพธ์ที่ได้มาโดยไม่ต้องค้นหาใหม่ และ ล้างผลลัพธ์ จะล้างรายการและหมุดบนแผนที่ คลิกผลลัพธ์เพื่อแสดงบนแผนที่',
   'help.guide.roadtrip-corridor.tip.3':
@@ -3180,15 +3540,19 @@ const help: TranslationStrings = {
   'help.guide.roadtrip-via.title': 'ดัดช่วงการขับรถผ่านจุดผ่าน',
   'help.guide.roadtrip-via.goal': 'ส่งช่วงการขับรถไปตามถนนที่คุณต้องการจริงๆ โดยไม่ต้องเพิ่มจุดแวะ',
   'help.guide.roadtrip-via.step.1': 'แสดงช่วงที่ต้องการบนแผนที่: คลิกจุดแวะในแถบลำดับ แล้วปิดการ์ดที่เปิดขึ้นบนแผนที่',
-  'help.guide.roadtrip-via.step.2': 'คลิกเส้นทางที่วาดไว้ จุดผ่านจะถูกวางบนช่วงที่คุณคลิก และช่วงนั้นจะถูกคำนวณเส้นทางใหม่ผ่านจุดนั้น',
+  'help.guide.roadtrip-via.step.2':
+    'คลิกเส้นทางที่วาดไว้ จุดผ่านจะถูกวางบนช่วงที่คุณคลิก และช่วงนั้นจะถูกคำนวณเส้นทางใหม่ผ่านจุดนั้น',
   'help.guide.roadtrip-via.step.3':
     'แถบลำดับจะอัปเดตตาม: ส่วนหัวของวันแสดงระยะทางและเวลาขับรถใหม่ และเวลาถึงทุกจุดหลังจุดผ่านจะเลื่อนตาม',
   'help.guide.roadtrip-via.step.4':
     'ชี้เมาส์ที่จุดจับแล้วจะบอกว่าทำอะไรได้: ลากเพื่อปรับเส้นทาง คลิกขวาเพื่อลบ ลากไปที่อื่นแล้วช่วงนั้นจะถูกวาดใหม่ผ่านจุดใหม่',
   'help.guide.roadtrip-via.step.5': 'คลิกขวาที่จุดจับเพื่อเอาออก ช่วงนั้นจะกลับไปใช้เส้นทางตรงอีกครั้ง',
-  'help.guide.roadtrip-via.result': 'ช่วงการขับรถไปตามถนนที่คุณเลือก และระยะทาง เวลาขับรถ และเวลาถึงของวันจะถูกคำนวณใหม่',
-  'help.guide.roadtrip-via.tip.1': 'จุดผ่านไม่ใช่จุดแวะ: ไม่มีหมายเลข ไม่มีระยะเวลาที่อยู่ ไม่มีเวลาถึง และไม่ถูกนับในจุดแวะของวัน',
-  'help.guide.roadtrip-via.tip.2': 'จุดจับจะแสดงตั้งแต่ระดับซูม 9 ขึ้นไป แผนที่ที่ซูมให้เห็นทั้งทริปจึงแสดงเส้นโดยไม่มีจุดจับ',
+  'help.guide.roadtrip-via.result':
+    'ช่วงการขับรถไปตามถนนที่คุณเลือก และระยะทาง เวลาขับรถ และเวลาถึงของวันจะถูกคำนวณใหม่',
+  'help.guide.roadtrip-via.tip.1':
+    'จุดผ่านไม่ใช่จุดแวะ: ไม่มีหมายเลข ไม่มีระยะเวลาที่อยู่ ไม่มีเวลาถึง และไม่ถูกนับในจุดแวะของวัน',
+  'help.guide.roadtrip-via.tip.2':
+    'จุดจับจะแสดงตั้งแต่ระดับซูม 9 ขึ้นไป แผนที่ที่ซูมให้เห็นทั้งทริปจึงแสดงเส้นโดยไม่มีจุดจับ',
   'help.guide.roadtrip-via.tip.3':
     'การคลิกที่ห่างจากช่วงที่วาดไว้เกินสองกิโลเมตรจะถูกเพิกเฉย เช่นเดียวกับการคลิกบนเที่ยวบิน รถไฟ หรือเรือเฟอร์รี่',
   // roadtrip-alternatives
@@ -3201,7 +3565,8 @@ const help: TranslationStrings = {
   'help.guide.roadtrip-alternatives.step.3':
     'ชี้เมาส์ที่รายการเพื่อไฮไลต์เส้นทางนั้น ปัจจุบัน คือเส้นทางที่ใช้อยู่ และ เร็วที่สุด คือเส้นทางที่เร็วที่สุด ส่วนเส้นทางอื่นจะบอกว่าช้ากว่าเท่าไร หรือหลีกเลี่ยงถนนประเภทใด',
   'help.guide.roadtrip-alternatives.step.4': 'คลิกรายการเพื่อใช้เส้นทางนั้น หรือ ปิด เพื่อใช้เส้นทางเดิม',
-  'help.guide.roadtrip-alternatives.result': 'ช่วงนั้นจะใช้ถนนที่คุณเลือก และระยะทางในแถบลำดับกับเวลาถึงหลังจากนั้นจะเปลี่ยนตาม',
+  'help.guide.roadtrip-alternatives.result':
+    'ช่วงนั้นจะใช้ถนนที่คุณเลือก และระยะทางในแถบลำดับกับเวลาถึงหลังจากนั้นจะเปลี่ยนตาม',
   'help.guide.roadtrip-alternatives.tip.1':
     'การเลือกเส้นทางอื่นจะวางจุดผ่านบนช่วงนั้นและแทนที่จุดผ่านเดิมที่มีอยู่ การเลือกเส้นทางของระบบนำทางเองจะเอาจุดผ่านเหล่านั้นออก',
   'help.guide.roadtrip-alternatives.tip.2':
@@ -3209,7 +3574,8 @@ const help: TranslationStrings = {
   // roadtrip-limits
   'help.guide.roadtrip-limits.title': 'ตั้งค่ารถและขีดจำกัดการขับรถ',
   'help.guide.roadtrip-limits.goal': 'บอก TREK ว่าคุณขับรถอะไรและยินดีขับรวดเดียวไกลแค่ไหน',
-  'help.guide.roadtrip-limits.step.1': 'การตั้งค่าการขับรถ อยู่ใต้ช่องค้นหาในคอลัมน์ขวา ป้ายต่างๆ บอกว่าตั้งค่าอะไรไว้ คลิกเพื่อเปิด',
+  'help.guide.roadtrip-limits.step.1':
+    'การตั้งค่าการขับรถ อยู่ใต้ช่องค้นหาในคอลัมน์ขวา ป้ายต่างๆ บอกว่าตั้งค่าอะไรไว้ คลิกเพื่อเปิด',
   'help.guide.roadtrip-limits.step.2':
     'ใต้ ขับรถ ค่า ขับรถต่อเนื่องได้นานที่สุด และ เวลาขับรถต่อวัน เป็นนาที ช่องว่างหมายถึงปิด และจะไม่มีการแจ้งเตือนใดๆ',
   'help.guide.roadtrip-limits.step.3':
@@ -3220,7 +3586,8 @@ const help: TranslationStrings = {
     'หลีกเลี่ยงเมื่อทำได้ เป็นความต้องการ ไม่ใช่ข้อห้าม: วันที่ไม่มีทางเลี่ยงจะยังใช้ถนนนั้น และแจ้งไว้ในส่วนหัว',
   'help.guide.roadtrip-limits.step.6':
     'ปิดกล่องโต้ตอบ การ์ดจะบอกว่าตั้งค่าอะไรไว้ และแถบลำดับจะทำเครื่องหมายทุกช่วงและทุกวันที่เกินขีดจำกัด',
-  'help.guide.roadtrip-limits.result': 'ป้ายบนการ์ดบอกว่าตั้งค่าอะไรไว้ และทุกช่วงและทุกวันที่เกินขีดจำกัดจะมีป้ายในแถบลำดับ',
+  'help.guide.roadtrip-limits.result':
+    'ป้ายบนการ์ดบอกว่าตั้งค่าอะไรไว้ และทุกช่วงและทุกวันที่เกินขีดจำกัดจะมีป้ายในแถบลำดับ',
   'help.guide.roadtrip-limits.tip.1': 'การตั้งค่าเป็นของทริป ทุกคนในทริปจึงวางแผนด้วยรถคันเดียวกันและขีดจำกัดเดียวกัน',
   'help.guide.roadtrip-limits.tip.2':
     'เติมถึง บอกว่าจุดแวะแต่ละจุดเติมได้เต็มแค่ไหน เพราะไม่มีใครชาร์จถึง 100 % ระหว่างทาง จุดแวะเติมน้ำมันหรือจุดชาร์จแต่ละจุดกำหนดค่านี้แทนได้',
@@ -3230,7 +3597,8 @@ const help: TranslationStrings = {
   'help.guide.roadtrip-day-window.title': 'กำหนดเวลาเริ่มและสิ้นสุดของวันขับรถ',
   'help.guide.roadtrip-day-window.goal': 'หยุดขับรถในเวลาที่คุณเลือก และกำหนดว่าวันควรจบที่ไหน',
   'help.guide.roadtrip-day-window.step.1': 'เปิด การตั้งค่าการขับรถ ในคอลัมน์ขวา แล้วหา เวลาเดินทางรายวัน',
-  'help.guide.roadtrip-day-window.step.2': 'ตั้ง เวลาเริ่มต้นวัน หากตั้งอย่างเดียวจะไม่มีผล: ต้องตั้งทั้งสองเวลา ตามที่หมายเหตุด้านล่างระบุ',
+  'help.guide.roadtrip-day-window.step.2':
+    'ตั้ง เวลาเริ่มต้นวัน หากตั้งอย่างเดียวจะไม่มีผล: ต้องตั้งทั้งสองเวลา ตามที่หมายเหตุด้านล่างระบุ',
   'help.guide.roadtrip-day-window.step.3':
     'ตั้ง เวลาสิ้นสุดวัน ตอนนี้การขับรถจะหยุดที่เวลานั้นและยกส่วนที่เหลือไปเช้าวันถัดไป โดยแสดงเป็นแถว สิ้นสุดวัน และแถว เดินทางต่อ ในแถบลำดับ',
   'help.guide.roadtrip-day-window.step.4':
@@ -3267,7 +3635,8 @@ const help: TranslationStrings = {
   'help.guide.roadtrip-track.title': 'ทำให้วันหนึ่งเดินทางตามแทร็กที่นำเข้า',
   'help.guide.roadtrip-track.goal': 'ให้การขับรถของวันหนึ่งไปตามเส้นทางชมวิวที่คุณนำเข้าเป็นแทร็ก GPX หรือ KML',
   'help.guide.roadtrip-track.step.1': 'คลิกป้าย แทร็ก ในส่วนหัวของวัน กล่องโต้ตอบจะเปิดขึ้นสำหรับวันนั้น',
-  'help.guide.roadtrip-track.step.2': 'เลือกแทร็ก แต่ละแทร็กบอกความยาว และบอกว่าวิ่งไปตามวันนี้หรืออยู่ห่างออกไปเท่าไร เรียงจากใกล้สุด',
+  'help.guide.roadtrip-track.step.2':
+    'เลือกแทร็ก แต่ละแทร็กบอกความยาว และบอกว่าวิ่งไปตามวันนี้หรืออยู่ห่างออกไปเท่าไร เรียงจากใกล้สุด',
   'help.guide.roadtrip-track.step.3':
     'คลิก เดินทางตามแทร็กนี้ TREK จะวางจุดผ่านในจุดที่การขับรถห่างจากแทร็กมากที่สุด แล้วคำนวณเส้นทางใหม่ทีละรอบ',
   'help.guide.roadtrip-track.step.4':
diff --git a/shared/src/i18n/th/places.ts b/shared/src/i18n/th/places.ts
index 211ce9c35..b4d71cc88 100644
--- a/shared/src/i18n/th/places.ts
+++ b/shared/src/i18n/th/places.ts
@@ -1,137 +1,141 @@
 import type { TranslationStrings } from '../types';
 
 const places: TranslationStrings = {
-  'places.addPlace': "เพิ่มสถานที่/กิจกรรม",
-  'places.importFile': "นำเข้าไฟล์",
-  'places.trackIndicator': "เส้นทางที่บันทึกไว้",
-  'places.sidebarDrop': "วางเพื่อนำเข้า",
+  'places.addPlace': 'เพิ่มสถานที่/กิจกรรม',
+  'places.importFile': 'นำเข้าไฟล์',
+  'places.trackIndicator': 'เส้นทางที่บันทึกไว้',
+  'places.sidebarDrop': 'วางเพื่อนำเข้า',
   'places.importFileHint':
-    "นำเข้าไฟล์ .gpx, .kml หรือ .kmz จากเครื่องมือ เช่น Google My Maps, Google Earth หรือเครื่องติดตาม GPS",
-  'places.importFileDropHere': "คลิกเพื่อเลือกไฟล์หรือลากและวางที่นี่",
-  'places.importFileDropActive': "วางไฟล์เพื่อเลือก",
-  'places.importFileUnsupported': "ประเภทไฟล์ที่ไม่รองรับ ใช้ .gpx, .kml หรือ .kmz",
-  'places.importFileTooLarge': "ไฟล์มีขนาดใหญ่เกินไป ขนาดการอัปโหลดสูงสุดคือ {maxMb} MB",
-  'places.importFileError': "การนำเข้าล้มเหลว",
-  'places.importAllSkipped': "ทุกสถานที่อยู่ในทริปแล้ว",
-  'places.gpxImported': "นำเข้าสถานที่จาก GPX แล้ว {count} แห่ง",
-  'places.gpxImportTypes': "คุณต้องการนำเข้าอะไร?",
-  'places.gpxImportWaypoints': "จุดอ้างอิง",
-  'places.gpxImportRoutes': "เส้นทาง",
-  'places.gpxImportTracks': "แทร็ก (พร้อมเรขาคณิตของเส้นทาง)",
-  'places.gpxImportNoneSelected': "เลือกอย่างน้อยหนึ่งประเภทที่จะนำเข้า",
-  'places.kmlImportTypes': "คุณต้องการนำเข้าอะไร?",
-  'places.kmlImportPoints': "จุด (หมุด)",
-  'places.kmlImportPaths': "เส้นทาง (LineStrings)",
-  'places.kmlImportNoneSelected': "เลือกอย่างน้อยหนึ่งประเภทที่จะนำเข้า",
-  'places.selectionCount': "เลือกแล้ว {count} รายการ",
-  'places.deleteSelected': "ลบที่เลือกไว้",
-  'places.changeCategory': "เปลี่ยนหมวดหมู่",
-  'places.categoryChanged': "เปลี่ยนหมวดหมู่สถานที่แล้ว {count} แห่ง",
-  'places.kmlKmzImported': "{count} สถานที่นำเข้าจาก KMZ/KML",
-  'places.urlResolved': "สถานที่ที่นำเข้าจาก URL",
-  'places.importList': "รายการนำเข้า",
-  'places.kmlKmzSummaryValues': "หมุด: {total} • นำเข้า: {created} • ข้าม: {skipped}",
-  'places.importGoogleList': "รายการ Google",
-  'places.importNaverList': "เนเวอร์ลิสต์",
-  'places.googleListHint': "วางลิงก์รายการ Google Maps ที่แชร์เพื่อนำเข้าสถานที่ทั้งหมด",
-  'places.googleListImported': "{count} สถานที่นำเข้าจาก \"{list}\"",
-  'places.googleListError': "ไม่สามารถนำเข้ารายการ Google Maps",
-  'places.naverListHint': "วางลิงก์รายการ Naver Maps ที่แชร์เพื่อนำเข้าสถานที่ทั้งหมด",
-  'places.naverListImported': "{count} สถานที่นำเข้าจาก \"{list}\"",
-  'places.naverListError': "ไม่สามารถนำเข้ารายการ Naver Maps",
-  'places.viewDetails': "ดูรายละเอียด",
-  'places.assignToDay': "เพิ่มในวันใด?",
-  'places.all': "ทั้งหมด",
-  'places.unplanned': "ไม่ได้วางแผน",
-  'places.planned': "วางแผนแล้ว",
-  'places.filterTracks': "แทร็ก",
-  'places.filterByRating': "กรองตามคะแนน",
-  'places.yourRating': "คะแนนของคุณ",
-  'places.notRated': "ยังไม่ได้รับการจัดอันดับ",
-  'places.search': "ค้นหาสถานที่...",
-  'places.allCategories': "หมวดหมู่ทั้งหมด",
-  'places.categoriesSelected': "หมวดหมู่",
-  'places.clearFilter': "ล้างตัวกรอง",
-  'places.count': "{count} สถานที่",
-  'places.countSingular': "1 แห่ง",
-  'places.allPlanned': "มีการวางแผนสถานที่ทั้งหมดแล้ว",
-  'places.noneFound': "ไม่พบสถานที่",
-  'places.editPlace': "แก้ไขสถานที่",
-  'places.formName': "ชื่อ",
-  'places.formNamePlaceholder': "เช่น หอไอเฟล",
-  'places.formDescription': "คำอธิบาย",
-  'places.formDescriptionPlaceholder': "คำอธิบายสั้น ๆ...",
-  'places.formAddress': "ที่อยู่",
-  'places.formAddressPlaceholder': "ถนน เมือง ประเทศ",
-  'places.formLat': "ละติจูด (เช่น 48.8566)",
-  'places.formLng': "ลองจิจูด (เช่น 2.3522)",
-  'places.formCategory': "หมวดหมู่",
-  'places.noCategory': "ไม่มีหมวดหมู่",
-  'places.newCategory': "หมวดหมู่ใหม่",
-  'places.categoryNamePlaceholder': "ชื่อหมวดหมู่",
-  'places.formTime': "เวลา",
-  'places.startTime': "เริ่ม",
-  'places.endTime': "สิ้นสุด",
-  'places.endTimeBeforeStart': "เวลาสิ้นสุดอยู่ก่อนเวลาเริ่มต้น",
-  'places.timeCollision': "เวลาที่ทับซ้อนกันกับ:",
-  'places.formWebsite': "เว็บไซต์",
-  'places.formNotes': "หมายเหตุ",
-  'places.formNotesPlaceholder': "บันทึกส่วนตัว...",
-  'places.assignmentNotes': "หมายเหตุสำหรับวันนี้",
-  'places.assignmentNotesPlaceholder': "หมายเหตุสำหรับสถานที่นี้เฉพาะวันนี้เท่านั้น...",
-  'places.formReservation': "การจอง",
-  'places.reservationNotesPlaceholder': "บันทึกการจอง เลขที่ยืนยัน...",
-  'places.mapsSearchPlaceholder': "ค้นหาสถานที่...",
-  'places.mapsSearchError': "การค้นหาสถานที่ล้มเหลว",
+    'นำเข้าไฟล์ .gpx, .kml หรือ .kmz จากเครื่องมือ เช่น Google My Maps, Google Earth หรือเครื่องติดตาม GPS',
+  'places.importFileDropHere': 'คลิกเพื่อเลือกไฟล์หรือลากและวางที่นี่',
+  'places.importFileDropActive': 'วางไฟล์เพื่อเลือก',
+  'places.importFileUnsupported': 'ประเภทไฟล์ที่ไม่รองรับ ใช้ .gpx, .kml หรือ .kmz',
+  'places.importFileTooLarge': 'ไฟล์มีขนาดใหญ่เกินไป ขนาดการอัปโหลดสูงสุดคือ {maxMb} MB',
+  'places.importFileError': 'การนำเข้าล้มเหลว',
+  'places.importAllSkipped': 'ทุกสถานที่อยู่ในทริปแล้ว',
+  'places.gpxImported': 'นำเข้าสถานที่จาก GPX แล้ว {count} แห่ง',
+  'places.gpxImportTypes': 'คุณต้องการนำเข้าอะไร?',
+  'places.gpxImportWaypoints': 'จุดอ้างอิง',
+  'places.gpxImportRoutes': 'เส้นทาง',
+  'places.gpxImportTracks': 'แทร็ก (พร้อมเรขาคณิตของเส้นทาง)',
+  'places.gpxImportNoneSelected': 'เลือกอย่างน้อยหนึ่งประเภทที่จะนำเข้า',
+  'places.kmlImportTypes': 'คุณต้องการนำเข้าอะไร?',
+  'places.kmlImportPoints': 'จุด (หมุด)',
+  'places.kmlImportPaths': 'เส้นทาง (LineStrings)',
+  'places.kmlImportNoneSelected': 'เลือกอย่างน้อยหนึ่งประเภทที่จะนำเข้า',
+  'places.selectionCount': 'เลือกแล้ว {count} รายการ',
+  'places.deleteSelected': 'ลบที่เลือกไว้',
+  'places.changeCategory': 'เปลี่ยนหมวดหมู่',
+  'places.categoryChanged': 'เปลี่ยนหมวดหมู่สถานที่แล้ว {count} แห่ง',
+  'places.kmlKmzImported': '{count} สถานที่นำเข้าจาก KMZ/KML',
+  'places.urlResolved': 'สถานที่ที่นำเข้าจาก URL',
+  'places.importList': 'รายการนำเข้า',
+  'places.kmlKmzSummaryValues': 'หมุด: {total} • นำเข้า: {created} • ข้าม: {skipped}',
+  'places.importGoogleList': 'รายการ Google',
+  'places.importNaverList': 'เนเวอร์ลิสต์',
+  'places.googleListHint': 'วางลิงก์รายการ Google Maps ที่แชร์เพื่อนำเข้าสถานที่ทั้งหมด',
+  'places.googleListImported': '{count} สถานที่นำเข้าจาก "{list}"',
+  'places.googleListError': 'ไม่สามารถนำเข้ารายการ Google Maps',
+  'places.naverListHint': 'วางลิงก์รายการ Naver Maps ที่แชร์เพื่อนำเข้าสถานที่ทั้งหมด',
+  'places.naverListImported': '{count} สถานที่นำเข้าจาก "{list}"',
+  'places.naverListError': 'ไม่สามารถนำเข้ารายการ Naver Maps',
+  'places.viewDetails': 'ดูรายละเอียด',
+  'places.assignToDay': 'เพิ่มในวันใด?',
+  'places.all': 'ทั้งหมด',
+  'places.unplanned': 'ไม่ได้วางแผน',
+  'places.planned': 'วางแผนแล้ว',
+  'places.filterTracks': 'แทร็ก',
+  'places.filterByRating': 'กรองตามคะแนน',
+  'places.filterShow': 'แสดง',
+  'places.clearSearch': 'ล้างการค้นหา',
+  'places.yourRating': 'คะแนนของคุณ',
+  'places.notRated': 'ยังไม่ได้รับการจัดอันดับ',
+  'places.search': 'ค้นหาสถานที่...',
+  'places.allCategories': 'หมวดหมู่ทั้งหมด',
+  'places.categoriesSelected': 'หมวดหมู่',
+  'places.clearFilter': 'ล้างตัวกรอง',
+  'places.count': '{count} สถานที่',
+  'places.countSingular': '1 แห่ง',
+  'places.allPlanned': 'มีการวางแผนสถานที่ทั้งหมดแล้ว',
+  'places.noneFound': 'ไม่พบสถานที่',
+  'places.editPlace': 'แก้ไขสถานที่',
+  'places.formName': 'ชื่อ',
+  'places.formNamePlaceholder': 'เช่น หอไอเฟล',
+  'places.formDescription': 'คำอธิบาย',
+  'places.formDescriptionPlaceholder': 'คำอธิบายสั้น ๆ...',
+  'places.formAddress': 'ที่อยู่',
+  'places.formAddressPlaceholder': 'ถนน เมือง ประเทศ',
+  'places.formLat': 'ละติจูด (เช่น 48.8566)',
+  'places.formLng': 'ลองจิจูด (เช่น 2.3522)',
+  'places.formLatLabel': 'ละติจูด',
+  'places.formLngLabel': 'ลองจิจูด',
+  'places.formCategory': 'หมวดหมู่',
+  'places.noCategory': 'ไม่มีหมวดหมู่',
+  'places.newCategory': 'หมวดหมู่ใหม่',
+  'places.categoryNamePlaceholder': 'ชื่อหมวดหมู่',
+  'places.formTime': 'เวลา',
+  'places.startTime': 'เริ่ม',
+  'places.endTime': 'สิ้นสุด',
+  'places.endTimeBeforeStart': 'เวลาสิ้นสุดอยู่ก่อนเวลาเริ่มต้น',
+  'places.timeCollision': 'เวลาที่ทับซ้อนกันกับ:',
+  'places.formWebsite': 'เว็บไซต์',
+  'places.formNotes': 'หมายเหตุ',
+  'places.formNotesPlaceholder': 'บันทึกส่วนตัว...',
+  'places.assignmentNotes': 'หมายเหตุสำหรับวันนี้',
+  'places.assignmentNotesPlaceholder': 'หมายเหตุสำหรับสถานที่นี้เฉพาะวันนี้เท่านั้น...',
+  'places.formReservation': 'การจอง',
+  'places.reservationNotesPlaceholder': 'บันทึกการจอง เลขที่ยืนยัน...',
+  'places.mapsSearchPlaceholder': 'ค้นหาสถานที่...',
+  'places.mapsSearchError': 'การค้นหาสถานที่ล้มเหลว',
   'places.searchGoogleInstead': 'ไม่ใช่สถานที่ที่ต้องการใช่ไหม ค้นหาด้วย Google แทน',
-  'places.loadingDetails': "กำลังโหลดรายละเอียดสถานที่...",
+  'places.loadingDetails': 'กำลังโหลดรายละเอียดสถานที่...',
   'places.osmHint':
-    "ใช้การค้นหา OpenStreetMap (ไม่มีรูปภาพ เวลาทำการ หรือการให้คะแนน) เพิ่มคีย์ Google API ในการตั้งค่าเพื่อดูรายละเอียดทั้งหมด",
-  'places.details.title': "รายละเอียดสถานที่",
-  'places.details.empty': "เลือกผลการค้นหาเพื่อดูรูปภาพและคำอธิบาย",
-  'places.details.loading': "กำลังโหลดรายละเอียด...",
-  'places.details.error': "ไม่สามารถโหลดรายละเอียดได้",
-  'places.details.disabled': "การเพิ่มข้อมูลถูกปิดโดยผู้ดูแลระบบ",
-  'places.details.noPhotos': "ไม่พบรูปภาพสำหรับสถานที่นี้",
-  'places.details.pickImage': "เลือกรูปภาพ",
-  'places.details.description': "คำอธิบาย",
-  'places.details.adopt': "ใช้ข้อความนี้",
-  'places.details.adoptBlocked': "ล้างช่องคำอธิบายก่อน",
-  'places.details.facts': "ข้อมูลน่ารู้",
-  'places.details.nothing': "ไม่พบสิ่งใดสำหรับสถานที่นี้",
-  'places.details.aboutBrand': "เกี่ยวกับแบรนด์",
-  'places.details.aboutBrandNote': "ข้อมูลนี้อธิบายแบรนด์ ไม่ใช่สาขานี้",
-  'places.details.fact.rating': "เรตติ้ง",
-  'places.details.fact.cuisine': "อาหาร",
-  'places.details.fact.openingHours': "เวลาทำการ",
-  'places.details.fact.menu': "เมนู",
-  'places.details.fact.outdoorSeating': "ที่นั่งกลางแจ้ง",
-  'places.details.fact.takeaway': "ซื้อกลับบ้าน",
-  'places.details.fact.delivery': "จัดส่ง",
-  'places.details.fact.wheelchair': "การเข้าถึงแบบไม่มีขั้นตอน",
-  'places.details.fact.vegetarian': "มังสวิรัติ",
-  'places.details.fact.vegan': "วีแกน",
-  'places.details.fact.internetAccess': "อินเตอร์เน็ตไร้สาย",
-  'places.categoryCreateError': "ไม่สามารถสร้างหมวดหมู่ได้",
-  'places.nameRequired': "กรุณากรอกชื่อ",
-  'places.saveError': "บันทึกไม่สำเร็จ",
-  'places.createExpenseHint': "บันทึกสถานที่ จากนั้นเปิดตัวแก้ไขต้นทุน",
+    'ใช้การค้นหา OpenStreetMap (ไม่มีรูปภาพ เวลาทำการ หรือการให้คะแนน) เพิ่มคีย์ Google API ในการตั้งค่าเพื่อดูรายละเอียดทั้งหมด',
+  'places.details.title': 'รายละเอียดสถานที่',
+  'places.details.empty': 'เลือกผลการค้นหาเพื่อดูรูปภาพและคำอธิบาย',
+  'places.details.loading': 'กำลังโหลดรายละเอียด...',
+  'places.details.error': 'ไม่สามารถโหลดรายละเอียดได้',
+  'places.details.disabled': 'การเพิ่มข้อมูลถูกปิดโดยผู้ดูแลระบบ',
+  'places.details.noPhotos': 'ไม่พบรูปภาพสำหรับสถานที่นี้',
+  'places.details.pickImage': 'เลือกรูปภาพ',
+  'places.details.description': 'คำอธิบาย',
+  'places.details.adopt': 'ใช้ข้อความนี้',
+  'places.details.adoptBlocked': 'ล้างช่องคำอธิบายก่อน',
+  'places.details.facts': 'ข้อมูลน่ารู้',
+  'places.details.nothing': 'ไม่พบสิ่งใดสำหรับสถานที่นี้',
+  'places.details.aboutBrand': 'เกี่ยวกับแบรนด์',
+  'places.details.aboutBrandNote': 'ข้อมูลนี้อธิบายแบรนด์ ไม่ใช่สาขานี้',
+  'places.details.fact.rating': 'เรตติ้ง',
+  'places.details.fact.cuisine': 'อาหาร',
+  'places.details.fact.openingHours': 'เวลาทำการ',
+  'places.details.fact.menu': 'เมนู',
+  'places.details.fact.outdoorSeating': 'ที่นั่งกลางแจ้ง',
+  'places.details.fact.takeaway': 'ซื้อกลับบ้าน',
+  'places.details.fact.delivery': 'จัดส่ง',
+  'places.details.fact.wheelchair': 'การเข้าถึงแบบไม่มีขั้นตอน',
+  'places.details.fact.vegetarian': 'มังสวิรัติ',
+  'places.details.fact.vegan': 'วีแกน',
+  'places.details.fact.internetAccess': 'อินเตอร์เน็ตไร้สาย',
+  'places.categoryCreateError': 'ไม่สามารถสร้างหมวดหมู่ได้',
+  'places.nameRequired': 'กรุณากรอกชื่อ',
+  'places.saveError': 'บันทึกไม่สำเร็จ',
+  'places.createExpenseHint': 'บันทึกสถานที่ จากนั้นเปิดตัวแก้ไขต้นทุน',
   'places.duplicateExists': "'{name}' อยู่ในทริปนี้แล้ว",
-  'places.addAnyway': "เพิ่มต่อไป",
-  'places.enrichOnImport': "เติมเต็มสถานที่ผ่าน Google",
+  'places.addAnyway': 'เพิ่มต่อไป',
+  'places.enrichOnImport': 'เติมเต็มสถานที่ผ่าน Google',
   'places.enrichOnImportHint':
-    "ค้นหาสถานที่ที่นำเข้าแต่ละแห่งเพื่อกรอกรูปภาพ ที่อยู่ และรายละเอียดการติดต่อ ใช้คีย์ Google Maps ของคุณ",
-  'places.uploadImage': "อัปโหลดรูปภาพ",
-  'places.changeImage': "เปลี่ยนภาพ",
-  'places.removeImage': "ลบรูปภาพ",
-  'places.imageUploadError': "ไม่สามารถอัปโหลดภาพได้",
-  'places.imageRemoveError': "ไม่สามารถลบรูปภาพได้",
-  'places.addToSelectedDay': "เพิ่มในวันที่เปิดอยู่",
-  'places.addPlaceShort': "สถานที่ใหม่",
-  'places.addToDayShort': "เพิ่มในวัน",
-  'places.googleDirHint': "ใช้ลิงก์เส้นทางได้เช่นกัน: จุดแวะจะกลายเป็นสถานที่ตามลำดับการขับรถ",
-  'places.dayScoped': "แสดงเฉพาะวันที่เปิดอยู่",
-  'places.dayScopedClear': "แสดงทั้งทริป",
-  'places.source.amap': "Amap",
+    'ค้นหาสถานที่ที่นำเข้าแต่ละแห่งเพื่อกรอกรูปภาพ ที่อยู่ และรายละเอียดการติดต่อ ใช้คีย์ Google Maps ของคุณ',
+  'places.uploadImage': 'อัปโหลดรูปภาพ',
+  'places.changeImage': 'เปลี่ยนภาพ',
+  'places.removeImage': 'ลบรูปภาพ',
+  'places.imageUploadError': 'ไม่สามารถอัปโหลดภาพได้',
+  'places.imageRemoveError': 'ไม่สามารถลบรูปภาพได้',
+  'places.addToSelectedDay': 'เพิ่มในวันที่เปิดอยู่',
+  'places.addPlaceShort': 'สถานที่ใหม่',
+  'places.addToDayShort': 'เพิ่มในวัน',
+  'places.googleDirHint': 'ใช้ลิงก์เส้นทางได้เช่นกัน: จุดแวะจะกลายเป็นสถานที่ตามลำดับการขับรถ',
+  'places.dayScoped': 'แสดงเฉพาะวันที่เปิดอยู่',
+  'places.dayScopedClear': 'แสดงทั้งทริป',
+  'places.source.amap': 'Amap',
 };
 export default places;
diff --git a/shared/src/i18n/th/reservations.ts b/shared/src/i18n/th/reservations.ts
index 2f3f3168c..56f0aed8e 100644
--- a/shared/src/i18n/th/reservations.ts
+++ b/shared/src/i18n/th/reservations.ts
@@ -1,185 +1,242 @@
 import type { TranslationStrings } from '../types';
 
 const reservations: TranslationStrings = {
-  'reservations.title': "การจอง",
-  'reservations.empty': "ยังไม่มีการจอง",
-  'reservations.emptyHint': "เพิ่มการจองเที่ยวบิน โรงแรม และอื่นๆ",
-  'reservations.add': "เพิ่มการจอง",
-  'reservations.addManual': "การจองด้วยตนเอง",
-  'reservations.placeHint': "เคล็ดลับ: ควรสร้างการจองโดยตรงจากสถานที่เพื่อเชื่อมโยงกับแผนรายวันของคุณ",
-  'reservations.confirmed': "ยืนยันแล้ว",
-  'reservations.pending': "รอดำเนินการ",
-  'reservations.summary': "{confirmed} ยืนยันแล้ว {pending} รอดำเนินการ",
-  'reservations.showFiles': "แสดงไฟล์",
-  'reservations.editTitle': "แก้ไขการจอง",
-  'reservations.status': "สถานะ",
-  'reservations.datetime': "วันที่และเวลา",
-  'reservations.startTime': "เวลาเริ่มต้น",
-  'reservations.endTime': "เวลาสิ้นสุด",
-  'reservations.date': "วันที่",
-  'reservations.time': "เวลา",
-  'reservations.timeAlt': "เวลา (ทางเลือก เช่น 19:30 น.)",
-  'reservations.notes': "หมายเหตุ",
-  'reservations.notesPlaceholder': "หมายเหตุเพิ่มเติม...",
-  'reservations.urlLabel': "ลิงก์",
-  'reservations.urlPlaceholder': "https://...",
-  'reservations.meta.airline': "สายการบิน",
-  'reservations.meta.flightNumber': "หมายเลขเที่ยวบิน",
-  'reservations.meta.from': "จาก",
-  'reservations.meta.to': "ถึง",
-  'reservations.layover.route': "เส้นทาง",
-  'reservations.layover.stop': "จุดแวะพัก",
-  'reservations.layover.addStop': "เพิ่มจุดแวะ",
-  'reservations.layover.connection': "การเชื่อมต่อ",
-  'reservations.layover.layover': "แวะพัก",
-  'reservations.needsReview': "ตรวจสอบ",
-  'reservations.needsReviewHint': "ไม่สามารถจับคู่สนามบินได้โดยอัตโนมัติ — โปรดยืนยันตำแหน่ง",
-  'reservations.searchLocation': "ค้นหาสถานี ท่าเรือ หรือที่อยู่…",
-  'reservations.meta.trainNumber': "หมายเลขรถไฟ",
-  'reservations.meta.platform': "แพลตฟอร์ม",
-  'reservations.meta.seat': "ที่นั่ง",
-  'reservations.meta.checkIn': "เช็คอิน",
-  'reservations.meta.checkInUntil': "เช็คอินจนถึง",
-  'reservations.meta.checkOut': "เช็คเอาท์",
-  'reservations.meta.linkAccommodation': "ที่พัก",
-  'reservations.meta.pickAccommodation': "ลิงก์ที่พัก",
-  'reservations.meta.noAccommodation': "ไม่มี",
-  'reservations.meta.hotelPlace': "ที่พัก",
-  'reservations.meta.linkPlace': "สถานที่/กิจกรรม",
-  'reservations.meta.pickPlace': "เลือกสถานที่/กิจกรรม",
-  'reservations.meta.pickHotel': "เลือกที่พัก",
-  'reservations.meta.fromDay': "จาก",
-  'reservations.meta.toDay': "ถึง",
-  'reservations.meta.selectDay': "เลือกวัน",
-  'reservations.type.flight': "เที่ยวบิน",
-  'reservations.type.hotel': "ที่พัก",
-  'reservations.type.restaurant': "ร้านอาหาร",
-  'reservations.type.train': "รถไฟ",
-  'reservations.type.car': "รถ",
-  'reservations.type.cruise': "ล่องเรือ",
-  'reservations.type.event': "เหตุการณ์",
-  'reservations.type.tour': "ทัวร์",
-  'reservations.type.parking': "ที่จอดรถ",
-  'reservations.type.other': "อื่นๆ",
-  'reservations.type.bus': "รถบัส",
-  'reservations.type.ferry': "เรือเฟอร์รี่",
-  'reservations.type.bicycle': "จักรยาน",
-  'reservations.type.taxi': "แท็กซี่",
-  'reservations.type.transit': "การขนส่งสาธารณะ",
-  'reservations.type.transport_other': "อื่นๆ",
-  'reservations.confirm.delete': "คุณแน่ใจหรือไม่ว่าต้องการลบการจอง \"{name}\"",
-  'reservations.confirm.deleteTitle': "ลบการจองใช่ไหม",
-  'reservations.confirm.deleteBody': "\"{name}\" จะถูกลบอย่างถาวร",
-  'reservations.toast.updated': "อัพเดตการจองแล้ว",
-  'reservations.toast.removed': "ลบการจองแล้ว",
-  'reservations.toast.fileUploaded': "อัปโหลดไฟล์แล้ว",
-  'reservations.toast.uploadError': "ล้มเหลวในการอัปโหลด",
-  'reservations.newTitle': "การจองใหม่",
-  'reservations.bookingType': "ประเภทการจอง",
-  'reservations.titleLabel': "ชื่อเรื่อง",
-  'reservations.titlePlaceholder': "เช่น Lufthansa LH123, โรงแรมแอดลอน, ...",
-  'reservations.locationAddress': "ที่ตั้ง / ที่อยู่",
-  'reservations.locationPlaceholder': "ที่อยู่ สนามบิน โรงแรม...",
-  'reservations.confirmationCode': "รหัสการจอง",
-  'reservations.confirmationPlaceholder': "เช่น เอบีซี12345",
-  'reservations.day': "วัน",
-  'reservations.noDay': "ไม่มีวัน",
-  'reservations.place': "สถานที่",
-  'reservations.noPlace': "ไม่มีสถานที่",
-  'reservations.pendingSave': "จะถูกบันทึกไว้...",
-  'reservations.uploading': "กำลังอัปโหลด...",
-  'reservations.attachFile': "แนบไฟล์",
-  'reservations.linkExisting': "ลิงก์ไฟล์ที่มีอยู่",
-  'reservations.toast.saveError': "บันทึกไม่สำเร็จ",
-  'reservations.toast.updateError': "อัปเดตไม่สำเร็จ",
-  'reservations.toast.deleteError': "ลบไม่สำเร็จ",
-  'reservations.confirm.remove': "ลบการจองสำหรับ \"{name}\" หรือไม่",
-  'reservations.linkAssignment': "เชื่อมโยงกับแผนประจำวัน",
-  'reservations.pickAssignment': "เลือกงานจากแผนของคุณ...",
-  'reservations.noAssignment': "ไม่มีลิงก์ (สแตนด์อโลน)",
-  'reservations.price': "ราคา",
-  'reservations.budgetCategory': "หมวดงบประมาณ",
-  'reservations.budgetCategoryPlaceholder': "เช่น การเดินทาง ที่พัก",
-  'reservations.budgetCategoryAuto': "อัตโนมัติ (จากประเภทการจอง)",
-  'reservations.budgetHint': "รายการงบประมาณจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อบันทึก",
-  'reservations.departureDate': "ออกเดินทาง",
-  'reservations.arrivalDate': "มาถึง",
-  'reservations.departureTime': "เวลาออกเดินทาง",
-  'reservations.arrivalTime': "เวลาถึง",
-  'reservations.pickupDate': "วันรับรถ",
-  'reservations.returnDate': "กลับ",
-  'reservations.pickupTime': "เวลารับ",
-  'reservations.returnTime': "เวลากลับ",
-  'reservations.endDate': "วันที่สิ้นสุด",
-  'reservations.meta.departureTimezone': "เขตเวลาออกเดินทาง",
-  'reservations.meta.arrivalTimezone': "เขตเวลาถึง",
-  'reservations.span.departure': "ออกเดินทาง",
-  'reservations.span.arrival': "มาถึง",
-  'reservations.span.inTransit': "ระหว่างทาง",
+  'reservations.title': 'การจอง',
+  'reservations.empty': 'ยังไม่มีการจอง',
+  'reservations.emptyHint': 'เพิ่มการจองเที่ยวบิน โรงแรม และอื่นๆ',
+  'reservations.add': 'เพิ่มการจอง',
+  'reservations.addManual': 'การจองด้วยตนเอง',
+  'reservations.placeHint': 'เคล็ดลับ: ควรสร้างการจองโดยตรงจากสถานที่เพื่อเชื่อมโยงกับแผนรายวันของคุณ',
+  'reservations.confirmed': 'ยืนยันแล้ว',
+  'reservations.pending': 'รอดำเนินการ',
+  'reservations.summary': '{confirmed} ยืนยันแล้ว {pending} รอดำเนินการ',
+  'reservations.showFiles': 'แสดงไฟล์',
+  'reservations.editTitle': 'แก้ไขการจอง',
+  'reservations.status': 'สถานะ',
+  'reservations.datetime': 'วันที่และเวลา',
+  'reservations.startTime': 'เวลาเริ่มต้น',
+  'reservations.endTime': 'เวลาสิ้นสุด',
+  'reservations.date': 'วันที่',
+  'reservations.time': 'เวลา',
+  'reservations.timeAlt': 'เวลา (ทางเลือก เช่น 19:30 น.)',
+  'reservations.notes': 'หมายเหตุ',
+  'reservations.notesPlaceholder': 'หมายเหตุเพิ่มเติม...',
+  'reservations.urlLabel': 'ลิงก์',
+  'reservations.urlPlaceholder': 'https://...',
+  'reservations.meta.airline': 'สายการบิน',
+  'reservations.meta.flightNumber': 'หมายเลขเที่ยวบิน',
+  'reservations.meta.from': 'จาก',
+  'reservations.meta.to': 'ถึง',
+  'reservations.layover.route': 'เส้นทาง',
+  'reservations.layover.stop': 'จุดแวะพัก',
+  'reservations.layover.addStop': 'เพิ่มจุดแวะ',
+  'reservations.layover.connection': 'การเชื่อมต่อ',
+  'reservations.layover.layover': 'แวะพัก',
+  'reservations.needsReview': 'ตรวจสอบ',
+  'reservations.needsReviewHint': 'ไม่สามารถจับคู่สนามบินได้โดยอัตโนมัติ — โปรดยืนยันตำแหน่ง',
+  'reservations.searchLocation': 'ค้นหาสถานี ท่าเรือ หรือที่อยู่…',
+  'reservations.meta.trainNumber': 'หมายเลขรถไฟ',
+  'reservations.meta.platform': 'แพลตฟอร์ม',
+  'reservations.meta.seat': 'ที่นั่ง',
+  'reservations.meta.checkIn': 'เช็คอิน',
+  'reservations.meta.checkInUntil': 'เช็คอินจนถึง',
+  'reservations.meta.checkOut': 'เช็คเอาท์',
+  'reservations.meta.linkAccommodation': 'ที่พัก',
+  'reservations.meta.pickAccommodation': 'ลิงก์ที่พัก',
+  'reservations.meta.noAccommodation': 'ไม่มี',
+  'reservations.meta.hotelPlace': 'ที่พัก',
+  'reservations.meta.linkPlace': 'สถานที่/กิจกรรม',
+  'reservations.meta.pickPlace': 'เลือกสถานที่/กิจกรรม',
+  'reservations.meta.pickHotel': 'เลือกที่พัก',
+  'reservations.meta.fromDay': 'จาก',
+  'reservations.meta.toDay': 'ถึง',
+  'reservations.meta.selectDay': 'เลือกวัน',
+  'reservations.type.flight': 'เที่ยวบิน',
+  'reservations.type.hotel': 'ที่พัก',
+  'reservations.type.restaurant': 'ร้านอาหาร',
+  'reservations.type.train': 'รถไฟ',
+  'reservations.type.car': 'รถ',
+  'reservations.type.cruise': 'ล่องเรือ',
+  'reservations.type.event': 'เหตุการณ์',
+  'reservations.type.tour': 'ทัวร์',
+  'reservations.type.parking': 'ที่จอดรถ',
+  'reservations.type.other': 'อื่นๆ',
+  'reservations.type.bus': 'รถบัส',
+  'reservations.type.ferry': 'เรือเฟอร์รี่',
+  'reservations.type.bicycle': 'จักรยาน',
+  'reservations.type.taxi': 'แท็กซี่',
+  'reservations.type.transit': 'การขนส่งสาธารณะ',
+  'reservations.typeShort.transit': 'ขนส่งสาธารณะ',
+  'reservations.type.transport_other': 'อื่นๆ',
+  'reservations.confirm.delete': 'คุณแน่ใจหรือไม่ว่าต้องการลบการจอง "{name}"',
+  'reservations.confirm.deleteTitle': 'ลบการจองใช่ไหม',
+  'reservations.confirm.deleteBody': '"{name}" จะถูกลบอย่างถาวร',
+  'reservations.toast.updated': 'อัพเดตการจองแล้ว',
+  'reservations.toast.removed': 'ลบการจองแล้ว',
+  'reservations.toast.fileUploaded': 'อัปโหลดไฟล์แล้ว',
+  'reservations.toast.uploadError': 'ล้มเหลวในการอัปโหลด',
+  'reservations.newTitle': 'การจองใหม่',
+  'reservations.bookingType': 'ประเภทการจอง',
+  'reservations.titleLabel': 'ชื่อเรื่อง',
+  'reservations.titlePlaceholder': 'เช่น Lufthansa LH123, โรงแรมแอดลอน, ...',
+  'reservations.locationAddress': 'ที่ตั้ง / ที่อยู่',
+  'reservations.locationPlaceholder': 'ที่อยู่ สนามบิน โรงแรม...',
+  'reservations.confirmationCode': 'รหัสการจอง',
+  'reservations.routeLabel': 'เส้นทาง',
+  'reservations.segmentCodes': 'รหัสแต่ละช่วง',
+  'reservations.confirmationPlaceholder': 'เช่น เอบีซี12345',
+  'reservations.day': 'วัน',
+  'reservations.noDay': 'ไม่มีวัน',
+  'reservations.place': 'สถานที่',
+  'reservations.noPlace': 'ไม่มีสถานที่',
+  'reservations.pendingSave': 'จะถูกบันทึกไว้...',
+  'reservations.uploading': 'กำลังอัปโหลด...',
+  'reservations.attachFile': 'แนบไฟล์',
+  'reservations.linkExisting': 'ลิงก์ไฟล์ที่มีอยู่',
+  'reservations.toast.saveError': 'บันทึกไม่สำเร็จ',
+  'reservations.toast.updateError': 'อัปเดตไม่สำเร็จ',
+  'reservations.toast.deleteError': 'ลบไม่สำเร็จ',
+  'reservations.confirm.remove': 'ลบการจองสำหรับ "{name}" หรือไม่',
+  'reservations.linkAssignment': 'เชื่อมโยงกับแผนประจำวัน',
+  'reservations.linkedTo': 'เชื่อมโยงกับ',
+  'reservations.pickAssignment': 'เลือกงานจากแผนของคุณ...',
+  'reservations.noAssignment': 'ไม่มีลิงก์ (สแตนด์อโลน)',
+  'reservations.price': 'ราคา',
+  'reservations.budgetCategory': 'หมวดงบประมาณ',
+  'reservations.budgetCategoryPlaceholder': 'เช่น การเดินทาง ที่พัก',
+  'reservations.budgetCategoryAuto': 'อัตโนมัติ (จากประเภทการจอง)',
+  'reservations.budgetHint': 'รายการงบประมาณจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อบันทึก',
+  'reservations.departureDate': 'ออกเดินทาง',
+  'reservations.arrivalDate': 'มาถึง',
+  'reservations.departureTime': 'เวลาออกเดินทาง',
+  'reservations.arrivalTime': 'เวลาถึง',
+  'reservations.pickupDate': 'วันรับรถ',
+  'reservations.returnDate': 'กลับ',
+  'reservations.pickupTime': 'เวลารับ',
+  'reservations.returnTime': 'เวลากลับ',
+  'reservations.endDate': 'วันที่สิ้นสุด',
+  'reservations.meta.departureTimezone': 'เขตเวลาออกเดินทาง',
+  'reservations.meta.arrivalTimezone': 'เขตเวลาถึง',
+  'reservations.span.departure': 'ออกเดินทาง',
+  'reservations.span.arrival': 'มาถึง',
+  'reservations.span.inTransit': 'ระหว่างทาง',
   // span.pickup does double duty: the day a rental car is picked up, and the day a
   // multi-day parking ends and you collect your own car again. Both read the same way
   // in every locale, so parking only needs the drop-off wording of its own.
-  'reservations.span.pickup': "รับรถ",
-  'reservations.span.dropOff': "นำรถไปจอด/คืนรถ",
-  'reservations.span.return': "กลับ",
-  'reservations.span.active': "ใช้งานอยู่",
-  'reservations.span.start': "เริ่ม",
-  'reservations.span.end': "สิ้นสุด",
-  'reservations.span.ongoing': "กำลังดำเนินการอยู่",
-  'reservations.validation.endBeforeStart': "วันที่/เวลาสิ้นสุดต้องอยู่หลังวันที่/เวลาเริ่มต้น",
-  'reservations.addBooking': "เพิ่มการจอง",
-  'reservations.import.title': "นำเข้าการยืนยันการจอง",
-  'reservations.import.cta': "นำเข้าจากไฟล์",
-  'reservations.import.dropHere': "วางไฟล์ยืนยันการจองที่นี่ หรือคลิกเพื่อเลือก",
-  'reservations.import.dropActive': "วางไฟล์ที่จะนำเข้า",
-  'reservations.import.acceptedFormats': "ยอมรับ: EML, PDF, PKPass, HTML, TXT (สูงสุด 10 MB ต่อไฟล์ สูงสุด 5 ไฟล์)",
-  'reservations.import.acceptedPhotos': "โมเดล AI จะอ่านรูปถ่าย (JPG, PNG, WEBP)",
-  'reservations.import.parsing': "กำลังแยกวิเคราะห์ไฟล์...",
-  'reservations.import.previewHeading': "พบการจอง {count} แล้ว",
-  'reservations.import.previewEmpty': "ไม่สามารถแยกการจองออกจากไฟล์ที่อัปโหลดได้",
-  'reservations.import.removeItem': "ลบ",
-  'reservations.import.needsReview': "ตรวจสอบ",
-  'reservations.import.tryAi': "ลองแยกวิเคราะห์ AI",
-  'reservations.import.aiParsing': "แยกวิเคราะห์ด้วย AI...",
-  'reservations.import.confirm': "นำเข้าการจอง {count}",
-  'reservations.import.back': "กลับ",
-  'reservations.import.success': "{count} นำเข้าการจองแล้ว",
-  'reservations.import.partialFailure': "นำเข้าสำเร็จ {created} รายการ ล้มเหลว {failed} รายการ",
-  'reservations.import.error': "การแยกวิเคราะห์ล้มเหลว ตรวจสอบให้แน่ใจว่าไฟล์นั้นเป็นข้อมูลยืนยันการจองที่ถูกต้อง",
-  'reservations.import.unavailable': "การนำเข้าการจองไม่พร้อมใช้งานบนเซิร์ฟเวอร์นี้",
-  'reservations.import.unsupportedFormat': "รูปแบบไฟล์ที่ไม่รองรับ ใช้ EML, PDF, PKPass, HTML หรือ TXT",
-  'reservations.import.fileTooLarge': "ไฟล์ \"{name}\" เกินขีดจำกัด 10 MB",
-  'reservations.airtrail.title': "นำเข้าจาก AirTrail",
-  'reservations.airtrail.cta': "แอร์เทรล",
-  'reservations.airtrail.synced': "แอร์เทรล",
-  'reservations.airtrail.syncedHint': "ซิงค์จาก AirTrail - การแก้ไขจะซิงค์กันทั้งสองทาง",
-  'reservations.airtrail.notSynced': "ไม่ได้ซิงค์",
-  'reservations.airtrail.notSyncedHint': "เที่ยวบินนี้ถูกลบใน AirTrail และไม่มีการซิงค์อีกต่อไป",
+  'reservations.span.pickup': 'รับรถ',
+  'reservations.span.dropOff': 'นำรถไปจอด/คืนรถ',
+  'reservations.span.return': 'กลับ',
+  'reservations.span.active': 'ใช้งานอยู่',
+  'reservations.span.start': 'เริ่ม',
+  'reservations.span.end': 'สิ้นสุด',
+  'reservations.span.ongoing': 'กำลังดำเนินการอยู่',
+  'reservations.validation.endBeforeStart': 'วันที่/เวลาสิ้นสุดต้องอยู่หลังวันที่/เวลาเริ่มต้น',
+  'reservations.addBooking': 'เพิ่มการจอง',
+  'reservations.import.title': 'นำเข้าการยืนยันการจอง',
+  'reservations.import.cta': 'นำเข้าจากไฟล์',
+  'reservations.import.dropHere': 'วางไฟล์ยืนยันการจองที่นี่ หรือคลิกเพื่อเลือก',
+  'reservations.import.dropActive': 'วางไฟล์ที่จะนำเข้า',
+  'reservations.import.acceptedFormats': 'ยอมรับ: EML, PDF, PKPass, HTML, TXT (สูงสุด 10 MB ต่อไฟล์ สูงสุด 5 ไฟล์)',
+  'reservations.import.acceptedPhotos': 'โมเดล AI จะอ่านรูปถ่าย (JPG, PNG, WEBP)',
+  'reservations.import.parsing': 'กำลังแยกวิเคราะห์ไฟล์...',
+  'reservations.import.previewHeading': 'พบการจอง {count} แล้ว',
+  'reservations.import.previewEmpty': 'ไม่สามารถแยกการจองออกจากไฟล์ที่อัปโหลดได้',
+  'reservations.import.removeItem': 'ลบ',
+  'reservations.import.needsReview': 'ตรวจสอบ',
+  'reservations.import.tryAi': 'ลองแยกวิเคราะห์ AI',
+  'reservations.import.aiParsing': 'แยกวิเคราะห์ด้วย AI...',
+  'reservations.import.confirm': 'นำเข้าการจอง {count}',
+  'reservations.import.back': 'กลับ',
+  'reservations.import.success': '{count} นำเข้าการจองแล้ว',
+  'reservations.import.partialFailure': 'นำเข้าสำเร็จ {created} รายการ ล้มเหลว {failed} รายการ',
+  'reservations.import.error': 'การแยกวิเคราะห์ล้มเหลว ตรวจสอบให้แน่ใจว่าไฟล์นั้นเป็นข้อมูลยืนยันการจองที่ถูกต้อง',
+  'reservations.import.unavailable': 'การนำเข้าการจองไม่พร้อมใช้งานบนเซิร์ฟเวอร์นี้',
+  'reservations.import.unsupportedFormat': 'รูปแบบไฟล์ที่ไม่รองรับ ใช้ EML, PDF, PKPass, HTML หรือ TXT',
+  'reservations.import.fileTooLarge': 'ไฟล์ "{name}" เกินขีดจำกัด 10 MB',
+  'reservations.airtrail.title': 'นำเข้าจาก AirTrail',
+  'reservations.airtrail.cta': 'แอร์เทรล',
+  'reservations.airtrail.synced': 'แอร์เทรล',
+  'reservations.airtrail.syncedHint': 'ซิงค์จาก AirTrail - การแก้ไขจะซิงค์กันทั้งสองทาง',
+  'reservations.airtrail.notSynced': 'ไม่ได้ซิงค์',
+  'reservations.airtrail.notSyncedHint': 'เที่ยวบินนี้ถูกลบใน AirTrail และไม่มีการซิงค์อีกต่อไป',
   'reservations.airtrail.layoverHint':
-    "นำเข้าจากแอร์เทรล เที่ยวบินหลายขาที่มีการต่อเครื่องจะไม่มีเที่ยวบิน AirTrail เดียวที่จะซิงค์กลับไป ดังนั้นจึงถือเป็นการนำเข้าครั้งเดียว",
-  'reservations.airtrail.loadError': "ไม่สามารถโหลดเที่ยวบิน AirTrail ของคุณได้",
-  'reservations.airtrail.imported': "นำเข้าเที่ยวบินแล้ว {count} เที่ยวบิน",
-  'reservations.airtrail.skippedDuplicate': "มีอยู่ในทริปนี้แล้ว {count} เที่ยวบิน ข้ามรายการ",
-  'reservations.airtrail.nothingImported': "ไม่มีอะไรจะนำเข้า",
-  'reservations.airtrail.importError': "การนำเข้าล้มเหลว โปรดลองอีกครั้ง",
-  'reservations.airtrail.undo': "นำเข้าจาก AirTrail",
-  'reservations.airtrail.alreadyImported': "นำเข้า",
-  'reservations.airtrail.duringTrip': "ในระหว่างการเดินทางครั้งนี้",
-  'reservations.airtrail.otherFlights': "เที่ยวบินอื่นๆ",
-  'reservations.airtrail.empty': "ไม่พบเที่ยวบินในบัญชี AirTrail ของคุณ",
-  'reservations.airtrail.importCta': "นำเข้า {count}",
-  'reservations.airtrail.joinConnection': "นำเข้าเป็นเที่ยวบินเดียวโดยมีการแวะพักใน {stops}",
-  'reservations.costsLabel': "ค่าใช้จ่าย",
-  'reservations.createExpense': "สร้างรายจ่าย",
-  'reservations.createExpenseHint': "บันทึกการจอง จากนั้นเปิดตัวแก้ไขต้นทุน",
-  'reservations.linkedExpense': "ค่าใช้จ่ายที่เชื่อมโยง",
-  'reservations.removeExpense': "ลบค่าใช้จ่าย",
+    'นำเข้าจากแอร์เทรล เที่ยวบินหลายขาที่มีการต่อเครื่องจะไม่มีเที่ยวบิน AirTrail เดียวที่จะซิงค์กลับไป ดังนั้นจึงถือเป็นการนำเข้าครั้งเดียว',
+  'reservations.airtrail.loadError': 'ไม่สามารถโหลดเที่ยวบิน AirTrail ของคุณได้',
+  'reservations.airtrail.imported': 'นำเข้าเที่ยวบินแล้ว {count} เที่ยวบิน',
+  'reservations.airtrail.skippedDuplicate': 'มีอยู่ในทริปนี้แล้ว {count} เที่ยวบิน ข้ามรายการ',
+  'reservations.airtrail.nothingImported': 'ไม่มีอะไรจะนำเข้า',
+  'reservations.airtrail.importError': 'การนำเข้าล้มเหลว โปรดลองอีกครั้ง',
+  'reservations.airtrail.undo': 'นำเข้าจาก AirTrail',
+  'reservations.airtrail.alreadyImported': 'นำเข้า',
+  'reservations.airtrail.duringTrip': 'ในระหว่างการเดินทางครั้งนี้',
+  'reservations.airtrail.otherFlights': 'เที่ยวบินอื่นๆ',
+  'reservations.airtrail.empty': 'ไม่พบเที่ยวบินในบัญชี AirTrail ของคุณ',
+  'reservations.airtrail.importCta': 'นำเข้า {count}',
+  'reservations.airtrail.joinConnection': 'นำเข้าเป็นเที่ยวบินเดียวโดยมีการแวะพักใน {stops}',
+  'reservations.costsLabel': 'ค่าใช้จ่าย',
+  'reservations.createExpense': 'สร้างรายจ่าย',
+  'reservations.createExpenseHint': 'บันทึกการจอง จากนั้นเปิดตัวแก้ไขต้นทุน',
+  'reservations.linkedExpense': 'ค่าใช้จ่ายที่เชื่อมโยง',
+  'reservations.removeExpense': 'ลบค่าใช้จ่าย',
   'reservations.linkedExpenses': 'รายการค่าใช้จ่ายที่เชื่อมโยง',
   'reservations.linkExpense': 'เชื่อมโยงค่าใช้จ่ายที่มีอยู่',
   'reservations.unlinkExpense': 'ยกเลิกการเชื่อมโยง แต่เก็บค่าใช้จ่ายไว้',
   'reservations.noUnlinkedExpenses': 'ไม่มีค่าใช้จ่ายที่ยังไม่ได้เชื่อมโยง',
-  'reservations.travelers.label': "นักเดินทาง",
-  'reservations.travelers.assign': "มอบหมายให้นักเดินทาง",
-  'reservations.travelers.none': "ยังไม่มีสมาชิกทริป",
+  'reservations.travelers.label': 'นักเดินทาง',
+  'reservations.travelers.assign': 'มอบหมายให้นักเดินทาง',
+  'reservations.travelers.none': 'ยังไม่มีสมาชิกทริป',
+  'reservations.status.switchTo': 'เปลี่ยนเป็น {status}',
+  'reservations.view.label': 'มุมมอง',
+  'reservations.view.cards': 'การ์ด',
+  'reservations.view.list': 'รายการ',
+  'reservations.view.timeline': 'ไทม์ไลน์',
+  'reservations.filter': 'กรอง',
+  'reservations.searchPlaceholder': 'ค้นหา',
+  'reservations.results': '{shown} จาก {total}',
+  'reservations.resetFilters': 'รีเซ็ตตัวกรอง',
+  'reservations.noMatches': 'ไม่มีรายการที่ตรงกับตัวกรองเหล่านี้',
+  'reservations.viewOptions': 'ตัวเลือกมุมมอง',
+  'reservations.resetView': 'รีเซ็ตมุมมอง',
+  'reservations.group.label': 'จัดกลุ่มตาม',
+  'reservations.group.status': 'สถานะ',
+  'reservations.group.day': 'วัน',
+  'reservations.group.type': 'ประเภท',
+  'reservations.group.none': 'ไม่จัดกลุ่ม',
+  'reservations.transitApart': 'แยกขนส่งสาธารณะเป็นส่วนของตัวเอง',
+  'reservations.group.before': 'ก่อนทริป',
+  'reservations.group.after': 'หลังทริป',
+  'reservations.group.undated': 'ไม่มีวันที่',
+  'reservations.sort.label': 'เรียงตาม',
+  'reservations.sort.date': 'วันที่',
+  'reservations.sort.title': 'ชื่อ',
+  'reservations.sort.type': 'ประเภท',
+  'reservations.sort.status': 'สถานะ',
+  'reservations.sort.earlyFirst': 'เร็วที่สุดก่อน',
+  'reservations.sort.lateFirst': 'ล่าสุดก่อน',
+  'reservations.sort.aToZ': 'ก ถึง ฮ',
+  'reservations.sort.zToA': 'ฮ ถึง ก',
+  'reservations.timeline.dayCount': '{count} วัน',
+  'reservations.timeline.zoom': 'ซูม',
+  'reservations.timeline.trip': 'ทริป',
+  'reservations.timeline.day': 'วัน',
+  'reservations.timeline.prevDay': 'วันก่อนหน้า',
+  'reservations.timeline.nextDay': 'วันถัดไป',
+  'reservations.timeline.openDay': 'เปิด {day} แบบรายชั่วโมง',
+  'reservations.timeline.nothingThisDay': 'ไม่มีอะไรในวันนี้',
+  'reservations.timeline.today': 'วันนี้',
+  'reservations.timeline.now': 'ตอนนี้',
+  'reservations.timeline.byType': 'แยกแถวตามประเภท',
+  'reservations.timeline.context': 'แสดงอีกแท็บด้วย',
+  'reservations.timeline.contextBookings': 'การจอง',
+  'reservations.timeline.contextTransports': 'การขนส่ง',
+  'reservations.timeline.noneDated': 'ยังไม่มีรายการใดที่มีวันที่',
+  'reservations.undated': 'ไม่มีวันที่',
+  'reservations.nights': 'คืน',
+  'reservations.start': 'เริ่ม',
+  'reservations.end': 'สิ้นสุด',
+  'reservations.rename': 'เปลี่ยนชื่อ',
+  'reservations.copyCode': 'คัดลอกรหัสการจอง',
+  'reservations.copyFailed': 'คัดลอกไม่สำเร็จ',
+  'reservations.showInFiles': 'แสดงในไฟล์',
 };
 export default reservations;
diff --git a/shared/src/i18n/th/transport.ts b/shared/src/i18n/th/transport.ts
index 16dbb7e8b..7a7847880 100644
--- a/shared/src/i18n/th/transport.ts
+++ b/shared/src/i18n/th/transport.ts
@@ -1,10 +1,11 @@
 import type { TranslationStrings } from '../types';
 
 const transport: TranslationStrings = {
-  'transport.addTransport': "เพิ่มการขนส่ง",
-  'transport.modalTitle.create': "เพิ่มการขนส่ง",
-  'transport.modalTitle.edit': "แก้ไขการขนส่ง",
-  'transport.title': "การขนส่ง",
-  'transport.addManual': "การขนส่ง",
+  'transport.addTransport': 'เพิ่มการขนส่ง',
+  'transport.modalTitle.create': 'เพิ่มการขนส่ง',
+  'transport.modalTitle.edit': 'แก้ไขการขนส่ง',
+  'transport.title': 'การขนส่ง',
+  'transport.addManual': 'การขนส่ง',
+  'transport.empty': 'ยังไม่มีการขนส่ง',
 };
 export default transport;
diff --git a/shared/src/i18n/tr/budget.ts b/shared/src/i18n/tr/budget.ts
index dd3ec9d97..2c75f5b59 100644
--- a/shared/src/i18n/tr/budget.ts
+++ b/shared/src/i18n/tr/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Yalnızca toplamda — henüz ödenmedi',
   'costs.tapToInclude': 'Eklemek için dokun',
   'costs.amount': 'Tutar',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Paylaşım',
+  'costs.splitEqually': 'Eşit',
+  'costs.splitCustom': 'Özel',
+  'costs.splitTicket': 'Fiş',
+  'costs.perPerson': 'Kişi başı {amount}',
+  'costs.payersHint': 'Kimin ödediğini işaretleyin ve her birinin ne kadar verdiğini yazın.',
+  'costs.splitHint.equally': 'İşaretlenen herkes aynı payı öder.',
+  'costs.splitHint.custom': 'Her kişinin payını yazın; hepsi birlikte toplam tutarı tutmalı.',
+  'costs.splitHint.ticket': 'Fişte neler olduğunu listeleyin ve her kalemi kimin aldığını işaretleyin.',
   'costs.filter.allCategories': 'Tüm kategoriler',
   'costs.filter.allDays': 'Tüm günler',
   'costs.expensesCount': '{count} harcama',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Fişler',
   'costs.receiptsTitle': 'Fişler ve Faturalar',
   'costs.attachReceipt': 'Fiş / fatura ekle',
+  'costs.attach': 'Ekle',
   'costs.scan.button': 'Fiş tara',
   'costs.scan.reading': 'Fiş okunuyor…',
   'costs.scan.review': 'Harcamayı gözden geçir',
   'costs.scan.nothingRead': 'Bu fotoğraftan fiş okunamadı.',
   'costs.scan.failed': 'Fiş okuma başlatılamadı.',
   'costs.scan.title': 'Fiş tara',
-  'costs.scan.accepted': 'Tek bir fişin fotoğrafı (JPG, PNG veya WEBP, en fazla 10 MB). Yapay zekâ modeli onu arka planda okur, sonra harcamayı kaydetmeden önce kontrol edersin.',
+  'costs.scan.accepted':
+    'Tek bir fişin fotoğrafı (JPG, PNG veya WEBP, en fazla 10 MB). Yapay zekâ modeli onu arka planda okur, sonra harcamayı kaydetmeden önce kontrol edersin.',
   'costs.scan.dropHere': 'Fiş fotoğrafını buraya bırak ya da seçmek veya çekmek için tıkla',
   'costs.scan.dropActive': 'Taramak için fotoğrafı bırak',
   'costs.scan.start': 'Tara',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Ekli fiş yok',
   'costs.deleteReceipt': 'Fişi kaldır',
   'costs.viewReceipt': 'Fişi görüntüle',
-  'costs.receiptLeftBehind': 'Kaydetme başarısız oldu ve yüklenen {count} fiş hâlâ duruyor. Dosyalar sekmesinden silin.',
+  'costs.receiptLeftBehind':
+    'Kaydetme başarısız oldu ve yüklenen {count} fiş hâlâ duruyor. Dosyalar sekmesinden silin.',
 };
 export default budget;
diff --git a/shared/src/i18n/tr/help.ts b/shared/src/i18n/tr/help.ts
index fcc83f869..434429c15 100644
--- a/shared/src/i18n/tr/help.ts
+++ b/shared/src/i18n/tr/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'tr' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Yardım ve belgeler',
+  'help.search': 'Belgelerde ara…',
+  'help.contents': 'İçindekiler',
+  'help.noResults': 'Eşleşen sayfa yok.',
+  'help.errorTitle': 'Bu sayfa yüklenemedi',
+  'help.errorBody': 'Yardım içeriği TREK wiki’sinden alınır. Bağlantınızı kontrol edip tekrar deneyin.',
 
   // center
   'help.center.button': 'Bu ekran için yardım',
@@ -1026,7 +1026,7 @@ const help: TranslationStrings = {
     'Travel & map: rezervasyon rotaları her zaman haritada, Yerleri keşfet hapı, konaklamadan rota optimizasyonu, bulanık rezervasyon kodları ve etiketli rezervasyon rotaları.',
   'help.ctx.settings-display.bullet.3':
     'Başlangıç: TREK’in panoda mı yoksa aktif gezide mi açılacağı ve bir gezinin hangi sekmesinin önce geleceği.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Görünüm',
   'help.ctx.settings-appearance.summary':
     'TREK’in bu hesapta nasıl göründüğü: açık ya da koyu, vurgu rengi, cam ve hareket, metin boyutu ve panonun hangi bileşenleri gösterdiği. Her şey canlı olarak, oturum açtığınız her cihazda uygulanır.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2269,9 +2269,9 @@ const help: TranslationStrings = {
     'Rezervasyonun ait olduğu durağı açın. Kart, Onaylandı ya da Askıda olması ile rezervasyonun adını taşıyan bir şerit gösterir.',
   'help.guide.place-booking.step.2':
     'Şerit Tarih, Zaman ve Rezervasyon Kodu ile rezervasyonun sahip olduğu notları taşır.',
-  'help.guide.place-booking.step.3': 'Şeride tıklayın. Rezervasyonun kendi formu onun üzerinde açılır.',
+  'help.guide.place-booking.step.3': 'Şeride tıklayın. Rezervasyon haritanın üzerinde açılır.',
   'help.guide.place-booking.step.4':
-    'Bir rezervasyonu bir durağa iliştiren şey Gün atamasına bağla alanıdır ve burada zaten bu durağın adını verir. Formu yeniden kapatın.',
+    'Rezervasyonun altındaki Düzenle, onun kendi formunu açar. Bir rezervasyonu bir durağa iliştiren şey oradaki Gün atamasına bağla alanıdır ve burada zaten bu durağın adını verir. Formu yeniden kapatın.',
   'help.guide.place-booking.step.5':
     'Bir durak için yeni bir rezervasyon günler sütununda başlar: imleci durağın üzerine getirin ve sonundaki + işaretine tıklayın. Form Yeni Rezervasyon olarak, ona bağlı hâlde açılır.',
   'help.guide.place-booking.result':
@@ -2622,7 +2622,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Renk bir rezervasyonun nerede olduğunu söyler: yeşil satır onaylandı, kehribar rengi olan hâlâ askıda. Oteller bu listede değildir, aşağıda kendi blokları vardır.',
   'help.guide.day-bookings.step.4':
-    'Liste rezervasyonları yalnızca okur. Bir rezervasyon Rezervasyonlar sekmesinde oluşturulur ve değiştirilir.',
+    'Bir satıra tıklayın, rezervasyon açılır. Altındaki Düzenle onu değiştirir; yeni rezervasyonlar Rezervasyonlar sekmesinde oluşturulur.',
   'help.guide.day-bookings.result':
     'Tarihi o güne düşen her şey ve duraklarından birine bağlı olan her şey bu tek listededir.',
   'help.guide.day-bookings.tip.1':
@@ -3164,13 +3164,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Sekmenin sağ üstündeki Manuel Rezervasyon düğmesine tıklayın. Yeni Rezervasyon açılır.',
   'help.guide.create-booking.step.2':
-    'Formun üstündeki listeden, Yolcular alanının yanında Rezervasyon Türü seçin. Konaklama, Restoran, Etkinlik, Tur, Otopark ve Diğer bu sekmenin yaptığı altı türdür ve form seçimle birlikte değişir: yalnızca Konaklama tarihlerini bir gün aralığıyla değiştirir.',
+    'Formun üst kısmında, başlığın altındaki tür rozetine tıklayın ve Rezervasyon Türünü seçin. Konaklama, Restoran, Etkinlik, Tur, Otopark ve Diğer bu sekmenin yaptığı altı türdür ve form seçimle birlikte değişir: yalnızca Konaklama tarihlerini bir gün aralığıyla değiştirir.',
   'help.guide.create-booking.step.3':
     'Başlık yazın. Formun ısrar ettiği tek alan budur ve içinde bir şey olana kadar Ekle ölü kalır.',
   'help.guide.create-booking.step.4':
     'Tarih ve Başlangıç zamanını, rezervasyonun bir sonu varsa Bitiş tarihi ile Bitiş zamanını da ayarlayın. Takvimler yalnızca gezinin içindeki günleri sunar ve başlangıçtan sonra olmayan bir bitiş bunu kırmızıyla söyler ve Ekle düğmesini engeller.',
   'help.guide.create-booking.step.5':
-    'Onaydan gelen Rezervasyon Kodunu girin ve Durum ayarlayın. Askıda olması ya da Onaylandı kartın iki bölümden hangisine düşeceğine karar verir.',
+    'Onaydan gelen Rezervasyon Kodunu girin. Türün yanındaki durum rozetinde Askıda olması yazar; bir tıklama onu Onaylandı yapar ve geri alır, bu da kartın iki bölümden hangisine düşeceğine karar verir.',
   'help.guide.create-booking.step.6': 'Ekle düğmesine tıklayın.',
   'help.guide.create-booking.result':
     'Rezervasyon kendi bölümünde tür rozetiyle, tarihleriyle ve koduyla bir karttır ve gezideki herkes onun belirdiğini görür.',
@@ -3221,7 +3221,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Bir rezervasyonun kapsadığı yolcuları işaretleyin ve sonra yalnızca onlarınkini görün.',
   'help.guide.booking-travelers.step.1':
-    'Rezervasyonu kalemle açın. Yolcular formun üstünde, Rezervasyon Türü alanının yanında durur ve rezervasyonda kimse yokken Yolcu ata yazar.',
+    'Rezervasyonu kalemle açın. Yolcular, Rezervasyon Kodunun yanında durur ve rezervasyonda kimse yokken Yolcu ata yazar.',
   'help.guide.booking-travelers.step.2':
     'Ona tıklayın ve bu rezervasyonun kimler için olduğunu seçin; adı verilmiş misafirler de listededir. Seçilen bir onay işareti alır ve avatarı alanda görünür. Kaldırmak için ada yeniden tıklayın.',
   'help.guide.booking-travelers.step.3': 'Güncelle düğmesine tıklayın.',
@@ -3316,7 +3316,7 @@ const help: TranslationStrings = {
     'Kartın başlığındaki kaleme tıklayın. Rezervasyonu Düzenle, rezervasyonun bildiği her şeyle açılır.',
   'help.guide.edit-booking.step.2':
     'Değişmesi gerekeni değiştirin, burada işletmecinin sonunda gönderdiği Rezervasyon Kodunu.',
-  'help.guide.edit-booking.step.3': 'Durum alanını Onaylandı yapın.',
+  'help.guide.edit-booking.step.3': 'Formun üst kısmındaki Askıda olması rozetine tıklayın. Onaylandı olarak değişir.',
   'help.guide.edit-booking.step.4': 'Güncelle düğmesine tıklayın.',
   'help.guide.edit-booking.result':
     'Kart taşınır: onaylanmış bir rezervasyon yeşil bir noktanın arkasında Onaylandı bölümünde durur ve gezideki herkes onun taşındığını görür.',
@@ -3609,19 +3609,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Bağlantıyı durak durak okuyun, adını değiştirin ya da rotayı yeniden arayın.',
   'help.guide.change-transit-route.step.1':
-    'Ulaşım sekmesinde planlanmış bağlantılar Otomatik toplu taşıma altında durur. Karta tıklayın.',
+    'Ulaşım sekmesinde planlanmış bağlantılar Otomatik toplu taşıma altında durur. Karta tıklayın; bağlantı bir rezervasyon olarak açılır.',
   'help.guide.change-transit-route.step.2':
     'Süre, Aktarma ve Yürüyüş en üstte durur. Altlarındaki Güzergah bağlantıyı durak durak yürür, peronlarla ve hatlar arasındaki yürüyüşlerle birlikte.',
   'help.guide.change-transit-route.step.3':
-    'Rotayı değiştir aramayı yeniden çalıştırır, bu bağlantının iki ucu ve günü zaten doldurulmuş olarak.',
+    'Rezervasyonun altındaki Rotayı değiştir aramayı yeniden çalıştırır, bu bağlantının iki ucu ve günü zaten doldurulmuş olarak.',
   'help.guide.change-transit-route.step.4':
-    'Başka bir bağlantı seçin ve Güne ekle düğmesine tıklayın; eskisinin yerini alır. Rotayı değiştir yanındaki Ayrıntıları düzenle ise onun yerine sıradan ulaşım formunu açar, Rezervasyon Kodu, Durum, yolcular ve dosyalar orada yaşar.',
+    'Başka bir bağlantı seçin ve Güne ekle düğmesine tıklayın; eskisinin yerini alır. Aynı çubuğun öbür ucundaki Düzenle ise onun yerine sıradan ulaşım formunu açar; Rezervasyon Kodu, Durum, yolcular, notlar ve dosyalar orada yaşar.',
   'help.guide.change-transit-route.result':
     'Toplu taşıma yolculuğu görünümü yeni Güzergahı taşır ve Ulaşım sekmesindeki kartı yeni hatları ve saatleri gösterir.',
   'help.guide.change-transit-route.tip.1':
-    'Toplu taşıma yolculuğu görünümündeki başlık yalnızca metindir: yanındaki kalem rotaya dokunmadan adını değiştirir. Altındaki Notlar markdown alır ve bir Düzenle ile bir Önizleme sekmesine sahiptir.',
+    'Rezervasyonun üst kısmındaki başlık, rotaya dokunmadan bağlantının adını değiştirir. Notları ise Düzenle’nin arkasındaki ulaşım formunda yazılır.',
   'help.guide.change-transit-route.tip.2':
-    'Toplu taşıma yolculuğu görünümünün altındaki Sil bağlantıyı seyahatten çıkarır; gün duraklarını korur.',
+    'Rezervasyonun altındaki Sil bağlantıyı seyahatten çıkarır; gün duraklarını korur.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Bir etabın nasıl gidildiğini değiştirin',
   'help.guide.leg-travel-mode.goal':
@@ -3645,17 +3645,18 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.title': 'Bir ulaşımı değiştirin ya da silin',
   'help.guide.edit-transport.goal':
     'Bir saati, bir peronu ya da bir rezervasyon kodunu düzeltin ya da yolculuğu seyahatten çıkarın.',
-  'help.guide.edit-transport.step.1': 'Gün planında bir ulaşım, duraklar arasındaki renkli bir satırdır. Ona tıklayın.',
+  'help.guide.edit-transport.step.1':
+    'Gün planında bir ulaşım, duraklar arasındaki renkli bir satırdır. Ona tıklayın; rezervasyonu saatler, rota ve Rezervasyon Kodu ile açılır.',
   'help.guide.edit-transport.step.2':
-    'Form onu oluşturan formdur, başlık çubuğunda Ulaşımı düzenle yazar. Her şey değiştirilebilir: tür, rota, günler ve saatler, Rezervasyon Kodu, Durum.',
+    'Rezervasyonun altındaki Düzenle, onu oluşturan formu açar; başlık çubuğunda Ulaşımı düzenle yazar. Her şey değiştirilebilir: tür, rota, günler ve saatler, Rezervasyon Kodu, Durum.',
   'help.guide.edit-transport.step.3':
     'Bir uçuşun rotası havaalanları zinciri, bir trenin rotası istasyonlar zinciridir. Durak ekle araya bir tane daha koyar ve her etap kendi saatlerini ve kendi uçuş ya da tren numarasını korur.',
   'help.guide.edit-transport.step.4':
-    'Güncelle düğmesine tıklayın. Ulaşımı tamamen kaldırmak için Ulaşım sekmesindeki kartında bulunan çöp kutusunu kullanın ve onaylayın.',
+    'Güncelle düğmesine tıklayın. Ulaşımı tamamen kaldırmak için rezervasyonunun altındaki Sil düğmesini ya da Ulaşım sekmesindeki kartında bulunan çöp kutusunu kullanın ve onaylayın.',
   'help.guide.edit-transport.result':
     'Değişiklik ulaşımın göründüğü her yerde görünür: Ulaşım sekmesinde, gittiği günde ve haritadaki çizgisinde.',
   'help.guide.edit-transport.tip.1':
-    'Aynı form iki taraftan da açılır, Ulaşım sekmesindeki karttaki kalemden ve gün planındaki ulaşımın kendi satırından. Planlanmış bir toplu taşıma bağlantısı istisnadır: satırı Toplu taşıma yolculuğu görünümünü açar ve oradaki Ayrıntıları düzenle bu forma götürür.',
+    'Aynı form iki taraftan da açılır: gün planındaki bir satırın açtığı rezervasyondaki Düzenle üzerinden ve Ulaşım sekmesindeki karttaki kalemden. Planlanmış bir toplu taşıma bağlantısı da bir rezervasyon olarak açılır; oradaki Rotayı değiştir yeniden arar, Düzenle ise bu forma götürür.',
   'help.guide.edit-transport.tip.2':
     'Bir ulaşımı başka bir güne taşımak forma hiç ihtiyaç duymaz: satırını bir gün kartından diğerine sürükleyin.',
   // transport-on-map
diff --git a/shared/src/i18n/tr/places.ts b/shared/src/i18n/tr/places.ts
index 90700052b..00cdf845c 100644
--- a/shared/src/i18n/tr/places.ts
+++ b/shared/src/i18n/tr/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'İçe aktarılacak en az bir tür seçin.',
   'places.selectionCount': '{count} seçildi',
   'places.deleteSelected': 'Seçileni sil',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Kategoriyi değiştir',
+  'places.categoryChanged': '{count} yer güncellendi',
   'places.kmlKmzImported': "KMZ/KML'den {count} yer içe Aktarıldı",
   'places.urlResolved': "URL'den içe aktarılan Yer",
   'places.importList': 'Liste İçe Aktarma',
@@ -54,6 +54,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Tüm yolculuğu göster',
   'places.filterTracks': 'Parçalar',
   'places.filterByRating': 'Puana göre filtrele',
+  'places.filterShow': 'Göster',
+  'places.clearSearch': 'Aramayı temizle',
   'places.yourRating': 'Senin puanın',
   'places.notRated': 'Henüz puanlanmadı',
   'places.search': 'Yer ara...',
@@ -73,6 +75,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Sokak, Şehir, Ülke',
   'places.formLat': 'Enlem (ör. 48,8566)',
   'places.formLng': 'Boylam (ör. 2,3522)',
+  'places.formLatLabel': 'Enlem',
+  'places.formLngLabel': 'Boylam',
   'places.formCategory': 'Kategori',
   'places.noCategory': 'Kategori Yok',
   'places.newCategory': 'Yeni kategori',
@@ -91,7 +95,7 @@ const places: TranslationStrings = {
   'places.reservationNotesPlaceholder': 'Rezervasyon notları, onay numarası...',
   'places.mapsSearchPlaceholder': 'Yerleri ara...',
   'places.mapsSearchError': 'Yer arama başarısız oldu.',
-  'places.searchGoogleInstead': 'Doğru yer değil mi? Bunun yerine Google\'da ara',
+  'places.searchGoogleInstead': "Doğru yer değil mi? Bunun yerine Google'da ara",
   'places.loadingDetails': 'Yer ayrıntıları yükleniyor…',
   'places.osmHint':
     'OpenStreetMap aramasını kullanma (fotoğraf, açılış saatleri veya derecelendirme yok). Tüm ayrıntılar için ayarlara bir Google API anahtarı ekleyin.',
diff --git a/shared/src/i18n/tr/reservations.ts b/shared/src/i18n/tr/reservations.ts
index 8d0466b9d..2cab2cb74 100644
--- a/shared/src/i18n/tr/reservations.ts
+++ b/shared/src/i18n/tr/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Bisiklet',
   'reservations.type.taxi': 'Taksi',
   'reservations.type.transit': 'Toplu taşıma',
+  'reservations.typeShort.transit': 'Toplu taşıma',
   'reservations.type.transport_other': 'Diğer',
   'reservations.confirm.delete': '"{name}" rezervasyonunu silmek istediğinizden emin misiniz?',
   'reservations.confirm.deleteTitle': 'Rezervasyon silinsin mi?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Konum / Adres',
   'reservations.locationPlaceholder': 'Adres, Havaalanı, Otel...',
   'reservations.confirmationCode': 'Rezervasyon Kodu',
+  'reservations.routeLabel': 'Rota',
+  'reservations.segmentCodes': 'Etap kodları',
   'reservations.confirmationPlaceholder': 'örn. ABC12345',
   'reservations.day': 'Gün',
   'reservations.noDay': 'Gün Yok',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Silinemedi',
   'reservations.confirm.remove': '"{name}" için rezervasyon kaldırılsın mı?',
   'reservations.linkAssignment': 'Gün atamasına bağla',
+  'reservations.linkedTo': 'Bağlı olduğu',
   'reservations.pickAssignment': 'Planınızdan bir atama seçin...',
   'reservations.noAssignment': 'Bağlantı yok (bağımsız)',
   'reservations.price': 'Fiyat',
@@ -135,9 +139,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '{count} rezervasyon bulundu',
   'reservations.import.previewEmpty': 'Yüklenen dosyalardan hiçbir rezervasyon çıkarılamadı.',
   'reservations.import.removeItem': 'Kaldır',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'İncele',
+  'reservations.import.tryAi': 'Yapay zekâ ile okumayı dene',
+  'reservations.import.aiParsing': 'Yapay zekâ ile okunuyor…',
   'reservations.import.confirm': '{count} rezervasyonu içe aktar',
   'reservations.import.back': 'Geri',
   'reservations.import.success': '{count} rezervasyon içe aktarıldı',
@@ -181,5 +185,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Yolcular',
   'reservations.travelers.assign': 'Yolcu ata',
   'reservations.travelers.none': 'Henüz gezi üyesi yok.',
+  'reservations.status.switchTo': '{status} olarak ayarla',
+  'reservations.view.label': 'Görünüm',
+  'reservations.view.cards': 'Kartlar',
+  'reservations.view.list': 'Liste',
+  'reservations.view.timeline': 'Zaman çizelgesi',
+  'reservations.filter': 'Filtrele',
+  'reservations.searchPlaceholder': 'Ara',
+  'reservations.results': '{total} içinden {shown}',
+  'reservations.resetFilters': 'Filtreleri sıfırla',
+  'reservations.noMatches': 'Bu filtrelere uyan bir şey yok',
+  'reservations.viewOptions': 'Görünüm seçenekleri',
+  'reservations.resetView': 'Görünümü sıfırla',
+  'reservations.group.label': 'Gruplandır',
+  'reservations.group.status': 'Durum',
+  'reservations.group.day': 'Gün',
+  'reservations.group.type': 'Tür',
+  'reservations.group.none': 'Gruplandırma yok',
+  'reservations.transitApart': 'Toplu taşıma ayrı bir bölümde',
+  'reservations.group.before': 'Geziden önce',
+  'reservations.group.after': 'Geziden sonra',
+  'reservations.group.undated': 'Tarihsiz',
+  'reservations.sort.label': 'Sırala',
+  'reservations.sort.date': 'Tarih',
+  'reservations.sort.title': 'Başlık',
+  'reservations.sort.type': 'Tür',
+  'reservations.sort.status': 'Durum',
+  'reservations.sort.earlyFirst': 'Önce en erken',
+  'reservations.sort.lateFirst': 'Önce en geç',
+  'reservations.sort.aToZ': 'A’dan Z’ye',
+  'reservations.sort.zToA': 'Z’den A’ya',
+  'reservations.timeline.dayCount': '{count} gün',
+  'reservations.timeline.zoom': 'Yakınlaştırma',
+  'reservations.timeline.trip': 'Gezi',
+  'reservations.timeline.day': 'Gün',
+  'reservations.timeline.prevDay': 'Önceki gün',
+  'reservations.timeline.nextDay': 'Sonraki gün',
+  'reservations.timeline.openDay': '{day} saatlik görünümde aç',
+  'reservations.timeline.nothingThisDay': 'Bu günde bir şey yok.',
+  'reservations.timeline.today': 'Bugün',
+  'reservations.timeline.now': 'şimdi',
+  'reservations.timeline.byType': 'Her tür için ayrı şerit',
+  'reservations.timeline.context': 'Diğer sekmeyi de göster',
+  'reservations.timeline.contextBookings': 'Rezervasyonlar',
+  'reservations.timeline.contextTransports': 'Ulaşım',
+  'reservations.timeline.noneDated': 'Bunların hiçbirinin henüz tarihi yok.',
+  'reservations.undated': 'Tarihsiz',
+  'reservations.nights': 'Gece',
+  'reservations.start': 'Başlangıç',
+  'reservations.end': 'Bitiş',
+  'reservations.rename': 'Yeniden adlandır',
+  'reservations.copyCode': 'Rezervasyon kodunu kopyala',
+  'reservations.copyFailed': 'Kopyalanamadı',
+  'reservations.showInFiles': 'Dosyalarda göster',
 };
 export default reservations;
diff --git a/shared/src/i18n/tr/transport.ts b/shared/src/i18n/tr/transport.ts
index 79b68c9bf..b54064591 100644
--- a/shared/src/i18n/tr/transport.ts
+++ b/shared/src/i18n/tr/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Ulaşımı düzenle',
   'transport.title': 'Ulaşım',
   'transport.addManual': 'Ulaşım',
+  'transport.empty': 'Henüz ulaşım yok',
 };
 export default transport;
diff --git a/shared/src/i18n/uk/budget.ts b/shared/src/i18n/uk/budget.ts
index 7c1ed5303..98e654543 100644
--- a/shared/src/i18n/uk/budget.ts
+++ b/shared/src/i18n/uk/budget.ts
@@ -135,10 +135,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': 'Лише в сумі — ще не врегульовано',
   'costs.tapToInclude': 'Натисніть, щоб додати',
   'costs.amount': 'Сума',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': 'Розподіл',
+  'costs.splitEqually': 'Порівну',
+  'costs.splitCustom': 'Вручну',
+  'costs.splitTicket': 'Чек',
+  'costs.perPerson': '{amount} на особу',
+  'costs.payersHint': 'Позначте, хто платив, і впишіть, скільки вніс кожен.',
+  'costs.splitHint.equally': 'Усі позначені платять однакову частку.',
+  'costs.splitHint.custom': 'Впишіть частку кожної людини; разом вони мають скласти загальну суму.',
+  'costs.splitHint.ticket': 'Перелічіть, що було в чеку, і позначте, хто брав кожну позицію.',
   'costs.filter.allCategories': 'Усі категорії',
   'costs.filter.allDays': 'Усі дні',
   'costs.expensesCount': '{count} витрат',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Чеки',
   'costs.receiptsTitle': 'Чеки та рахунки',
   'costs.attachReceipt': 'Додати чек / рахунок',
+  'costs.attach': 'Прикріпити',
   'costs.scan.button': 'Сканувати чек',
   'costs.scan.reading': 'Читання чека…',
   'costs.scan.review': 'Перевірити витрату',
   'costs.scan.nothingRead': 'Не вдалося прочитати чек із цієї фотографії.',
   'costs.scan.failed': 'Не вдалося почати читання чека.',
   'costs.scan.title': 'Сканувати чек',
-  'costs.scan.accepted': 'Фото одного чека (JPG, PNG або WEBP, до 10 МБ). Модель ШІ прочитає його у фоні, а потім ви перевірите витрату перед збереженням.',
+  'costs.scan.accepted':
+    'Фото одного чека (JPG, PNG або WEBP, до 10 МБ). Модель ШІ прочитає його у фоні, а потім ви перевірите витрату перед збереженням.',
   'costs.scan.dropHere': 'Перетягніть сюди фото чека або натисніть, щоб вибрати чи зробити знімок',
   'costs.scan.dropActive': 'Відпустіть фото, щоб відсканувати його',
   'costs.scan.start': 'Сканувати',
@@ -168,6 +175,7 @@ const budget: TranslationStrings = {
   'costs.noReceipts': 'Немає доданих чеків',
   'costs.deleteReceipt': 'Видалити чек',
   'costs.viewReceipt': 'Переглянути чек',
-  'costs.receiptLeftBehind': 'Не вдалося зберегти, {count} завантажених чеків залишилися. Видаліть їх на вкладці «Файли».',
+  'costs.receiptLeftBehind':
+    'Не вдалося зберегти, {count} завантажених чеків залишилися. Видаліть їх на вкладці «Файли».',
 };
 export default budget;
diff --git a/shared/src/i18n/uk/dayplan.ts b/shared/src/i18n/uk/dayplan.ts
index 0f1eaed61..7709b2e0e 100644
--- a/shared/src/i18n/uk/dayplan.ts
+++ b/shared/src/i18n/uk/dayplan.ts
@@ -50,8 +50,8 @@ const dayplan: TranslationStrings = {
   'dayplan.toast.routeOptimized': 'Маршрут оптимизирован',
   'dayplan.toast.routeOptimizedFromHotel': 'Маршрут оптимізовано від вашого житла',
   'dayplan.toast.noGeoPlaces': 'Не знайдено місць з координатами для розрахунку маршруту',
-  'dayplan.confirmed': 'Подтверждено',
-  'dayplan.pendingRes': 'Ожидание',
+  'dayplan.confirmed': 'Підтверджено',
+  'dayplan.pendingRes': 'Очікує',
   'dayplan.export': 'Експорт',
   'dayplan.exportIntro': 'Візьміть план із собою: документом, у календар або на GPS.',
   'dayplan.exportDocument': 'Документ',
diff --git a/shared/src/i18n/uk/help.ts b/shared/src/i18n/uk/help.ts
index 8ee07a2cb..cd0744de9 100644
--- a/shared/src/i18n/uk/help.ts
+++ b/shared/src/i18n/uk/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'uk' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': 'Довідка та документація',
+  'help.search': 'Пошук у документації…',
+  'help.contents': 'Зміст',
+  'help.noResults': 'Відповідних сторінок немає.',
+  'help.errorTitle': 'Не вдалося завантажити сторінку',
+  'help.errorBody': 'Довідка завантажується з вікі TREK. Перевірте з’єднання та спробуйте ще раз.',
 
   // center
   'help.center.button': 'Довідка для цього екрана',
@@ -1010,7 +1010,7 @@ const help: TranslationStrings = {
     'Travel & map: маршрути бронювань завжди на карті, кнопка Досліджуйте місця, оптимізація маршруту від житла, приховані коди бронювання та підписи маршрутів бронювань.',
   'help.ctx.settings-display.bullet.3':
     'Запуск: чи відкривається TREK на головній сторінці, чи на активній поїздці, і яка вкладка поїздки показується першою.',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': 'Вигляд',
   'help.ctx.settings-appearance.summary':
     'Як TREK виглядає в цьому обліковому записі: світлий чи темний, акцентний колір, скло й рух, розмір тексту та які віджети показує головна сторінка. Усе застосовується наживо, на кожному пристрої, де ви входите.',
   'help.ctx.settings-appearance.bullet.1':
@@ -2241,9 +2241,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     'Відкрийте зупинку, якій належить бронювання. Картка показує смужку з Підтверджено або Очікування і з назвою бронювання.',
   'help.guide.place-booking.step.2': 'Смужка несе Дату, Час і Код бронювання, і будь-які нотатки, які бронювання має.',
-  'help.guide.place-booking.step.3': 'Натисніть на смужку. На ній відкривається власна форма бронювання.',
+  'help.guide.place-booking.step.3': 'Натисніть на смужку. Бронювання відкривається поверх карти.',
   'help.guide.place-booking.step.4':
-    'Бронювання до зупинки прикріплює Прив’язати до призначення дня, і тут воно вже називає цю зупинку. Закрийте форму назад.',
+    'Редагувати внизу бронювання відкриває його власну форму. Бронювання до зупинки прикріплює саме Прив’язати до призначення дня в ній, і тут воно вже називає цю зупинку. Закрийте форму назад.',
   'help.guide.place-booking.step.5':
     'Нове бронювання для зупинки починається в колонці днів: наведіть на зупинку й натисніть на + у її кінці. Форма відкривається як Нове бронювання, уже пов’язана з нею.',
   'help.guide.place-booking.result':
@@ -2600,7 +2600,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Колір каже, як стоїть бронювання: зелений рядок підтверджений, бурштиновий ще в очікуванні. Готелів у цьому списку немає, у них свій блок нижче.',
   'help.guide.day-bookings.step.4':
-    'Список лише виписує бронювання. Бронювання створюють і змінюють на вкладці Бронювання.',
+    'Натисніть на рядок, і бронювання відкриється. Редагувати внизу змінює його; нові бронювання створюють на вкладці Бронювання.',
   'help.guide.day-bookings.result':
     'Усе датоване цим днем і все, що висить на одній з його зупинок, є в цьому одному списку.',
   'help.guide.day-bookings.tip.1':
@@ -3137,13 +3137,13 @@ const help: TranslationStrings = {
   'help.guide.create-booking.step.1':
     'Натисніть Ручне бронювання праворуч угорі вкладки. Відкривається Нове бронювання.',
   'help.guide.create-booking.step.2':
-    'Виберіть Тип бронювання у списку вгорі форми, поруч із полем Мандрівники. Житло, Ресторан, Заходи, Екскурсія, Паркування та Інше це ті шість, які робить ця вкладка, і форма змінюється разом із вибором: лише Житло міняє свої дати на діапазон днів.',
+    'Натисніть на фішку типу під назвою, у шапці форми, і виберіть Тип бронювання. Житло, Ресторан, Заходи, Екскурсія, Паркування та Інше це ті шість, які робить ця вкладка, і форма змінюється разом із вибором: лише Житло міняє свої дати на діапазон днів.',
   'help.guide.create-booking.step.3':
     'Введіть Назву. Це єдине поле, на якому форма наполягає, і Додати залишається мертвою, доки в ньому нічого немає.',
   'help.guide.create-booking.step.4':
     'Задайте Дату й Час початку, а також Дату закінчення та Час закінчення, якщо в бронювання є кінець. Календарі пропонують лише дні всередині подорожі, а кінець, який не пізніше початку, каже про це червоним і блокує Додати.',
   'help.guide.create-booking.step.5':
-    'Вставте Код бронювання з підтвердження та задайте Статус. Очікування або Підтверджено вирішує, до якого з двох розділів потрапить картка.',
+    'Вставте Код бронювання з підтвердження. Фішка статусу поруч із типом показує Очікування; клік перемикає її на Підтверджено й назад, і це вирішує, до якого з двох розділів потрапить картка.',
   'help.guide.create-booking.step.6': 'Натисніть Додати.',
   'help.guide.create-booking.result':
     'Бронювання це картка у своєму розділі зі своєю фішкою типу, своїми датами та своїм кодом, і всі інші в подорожі бачать, як вона з’являється.',
@@ -3194,7 +3194,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.goal':
     'Позначте мандрівників, яких бронювання охоплює, а потім дивіться лише їхні бронювання.',
   'help.guide.booking-travelers.step.1':
-    'Відкрийте бронювання олівцем. Поле Мандрівники стоїть угорі форми, поруч із полем Тип бронювання, і показує Призначити мандрівників, поки в бронюванні нікого немає.',
+    'Відкрийте бронювання олівцем. Поле Мандрівники стоїть поруч із Кодом бронювання і показує Призначити мандрівників, поки в бронюванні нікого немає.',
   'help.guide.booking-travelers.step.2':
     'Натисніть на нього й виберіть людей, для яких це бронювання; названі гості теж є у списку. Обраний отримує галочку і свій аватар у полі. Натисніть на ім’я ще раз, щоб його зняти.',
   'help.guide.booking-travelers.step.3': 'Натисніть Оновити.',
@@ -3290,7 +3290,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.step.1':
     'Натисніть олівець у шапці картки. Відкривається Редагувати бронювання з усім, що бронювання знає.',
   'help.guide.edit-booking.step.2': 'Змініть те, що треба змінити, тут Код бронювання, який оператор нарешті надіслав.',
-  'help.guide.edit-booking.step.3': 'Поставте Статус на Підтверджено.',
+  'help.guide.edit-booking.step.3': 'Натисніть на фішку Очікування в шапці форми. Вона перемикається на Підтверджено.',
   'help.guide.edit-booking.step.4': 'Натисніть Оновити.',
   'help.guide.edit-booking.result':
     'Картка переїжджає: підтверджене бронювання стоїть у розділі Підтверджено за зеленою крапкою, і всі в подорожі бачать, як воно переїжджає.',
@@ -3581,19 +3581,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.goal':
     'Прочитати сполучення зупинка за зупинкою, перейменувати його або знайти маршрут заново.',
   'help.guide.change-transit-route.step.1':
-    'На вкладці Транспорт сплановані сполучення сидять під Автоматичний громадський транспорт. Натисніть на картку.',
+    'На вкладці Транспорт сплановані сполучення сидять під Автоматичний громадський транспорт. Натисніть на картку; сполучення відкривається як бронювання.',
   'help.guide.change-transit-route.step.2':
     'Тривалість, Пересадки й Пішки сидять угорі. Маршрут під ними проходить сполучення зупинка за зупинкою, з платформами й переходами пішки між лініями.',
   'help.guide.change-transit-route.step.3':
-    'Змінити маршрут запускає пошук заново, уже заповнений двома кінцями цього сполучення та його днем.',
+    'Змінити маршрут внизу бронювання запускає пошук заново, уже заповнений двома кінцями цього сполучення та його днем.',
   'help.guide.change-transit-route.step.4':
-    'Виберіть інше сполучення й натисніть Додати до дня; воно займає місце старого. Редагувати деталі поряд зі Змінити маршрут натомість відкриває звичайну форму транспорту, де живуть Код бронювання, Статус, мандрівники й файли.',
+    'Виберіть інше сполучення й натисніть Додати до дня; воно займає місце старого. Редагувати, на іншому кінці тієї самої панелі, натомість відкриває звичайну форму транспорту, де живуть Код бронювання, Статус, мандрівники, нотатки й файли.',
   'help.guide.change-transit-route.result':
     'Вікно Поїздка громадським транспортом несе новий Маршрут, а його картка на вкладці Транспорт показує нові лінії й час.',
   'help.guide.change-transit-route.tip.1':
-    'Назва у вікні Поїздка громадським транспортом це лише текст: олівець поряд із нею перейменовує його, не торкаючись маршруту. Нотатки під ним приймають markdown і мають вкладку Редагувати та Перегляд.',
+    'Назва в шапці бронювання перейменовує сполучення, не торкаючись маршруту. Його нотатки пишуться у формі транспорту за кнопкою Редагувати.',
   'help.guide.change-transit-route.tip.2':
-    'Видалити внизу вікна Поїздка громадським транспортом виймає сполучення з поїздки; день зберігає свої зупинки.',
+    'Видалити внизу бронювання виймає сполучення з поїздки; день зберігає свої зупинки.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Змінити, як подолано один відрізок',
   'help.guide.leg-travel-mode.goal':
@@ -3616,17 +3616,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': 'Змінити або видалити транспорт',
   'help.guide.edit-transport.goal': 'Виправити час, платформу чи код бронювання або прибрати переїзд із поїздки.',
-  'help.guide.edit-transport.step.1': 'У плані дня транспорт це кольоровий рядок між зупинками. Натисніть на нього.',
+  'help.guide.edit-transport.step.1':
+    'У плані дня транспорт це кольоровий рядок між зупинками. Натисніть на нього; відкривається його бронювання з часом, маршрутом і Кодом бронювання.',
   'help.guide.edit-transport.step.2':
-    'Форма та сама, що його створила, з написом Змінити транспорт у заголовку. Змінити можна все: тип, маршрут, дні й час, Код бронювання, Статус.',
+    'Редагувати внизу бронювання відкриває форму, яка його створила, з написом Змінити транспорт у заголовку. Змінити можна все: тип, маршрут, дні й час, Код бронювання, Статус.',
   'help.guide.edit-transport.step.3':
     'Маршрут рейсу це ланцюжок аеропортів, маршрут поїзда ланцюжок станцій. Додати зупинку вставляє ще одну між ними, і кожен відрізок зберігає свій час і свій номер рейсу або поїзда.',
   'help.guide.edit-transport.step.4':
-    'Натисніть Оновити. Щоб прибрати транспорт зовсім, скористайтеся кошиком на його картці на вкладці Транспорт і підтвердьте.',
+    'Натисніть Оновити. Щоб прибрати транспорт зовсім, скористайтеся кнопкою Видалити внизу його бронювання або кошиком на його картці на вкладці Транспорт і підтвердьте.',
   'help.guide.edit-transport.result':
     'Зміна видна всюди, де з’являється транспорт: на вкладці Транспорт, у дні, коли він відбувається, і на його лінії на карті.',
   'help.guide.edit-transport.tip.1':
-    'Та сама форма відкривається з обох боків, олівцем на картці на вкладці Транспорт і власним рядком транспорту в плані дня. Виняток це сплановане сполучення громадського транспорту: його рядок відкриває вікно Поїздка громадським транспортом, а Редагувати деталі веде звідти до цієї форми.',
+    'Та сама форма відкривається з обох боків: через Редагувати в бронюванні, яке відкриває рядок плану дня, і через олівець на картці на вкладці Транспорт. Сплановане сполучення громадського транспорту теж відкривається як бронювання; Змінити маршрут там шукає заново, а Редагувати веде до цієї форми.',
   'help.guide.edit-transport.tip.2':
     'Перенесення транспорту на інший день форми взагалі не потребує: перетягніть його рядок з однієї картки дня на наступну.',
   // transport-on-map
diff --git a/shared/src/i18n/uk/places.ts b/shared/src/i18n/uk/places.ts
index ef163da10..ac65866fc 100644
--- a/shared/src/i18n/uk/places.ts
+++ b/shared/src/i18n/uk/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Виберіть щонайменше один тип.',
   'places.selectionCount': '{count} вибрано',
   'places.deleteSelected': 'Видалити вибране',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Змінити категорію',
+  'places.categoryChanged': 'Оновлено місць: {count}',
   'places.kmlKmzImported': '{count} місць імпортовано з KMZ/KML',
   'places.urlResolved': 'Місце імпортовано з URL',
   'places.importList': 'Імпорт списку',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Показати всю подорож',
   'places.filterTracks': 'Треки',
   'places.filterByRating': 'Фільтр за оцінкою',
+  'places.filterShow': 'Показати',
+  'places.clearSearch': 'Очистити пошук',
   'places.yourRating': 'Твоя оцінка',
   'places.notRated': 'Ще не оцінено',
   'places.search': 'Пошук місць...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Вулиця, місто, країна',
   'places.formLat': 'Широта (наприклад, 48.8566)',
   'places.formLng': 'Довгота (наприклад, 2.3522)',
+  'places.formLatLabel': 'Широта',
+  'places.formLngLabel': 'Довгота',
   'places.formCategory': 'Категорія',
   'places.noCategory': 'Без категорії',
   'places.newCategory': 'Нова категорія',
diff --git a/shared/src/i18n/uk/reservations.ts b/shared/src/i18n/uk/reservations.ts
index 6dccff6b5..aa5dbfdf9 100644
--- a/shared/src/i18n/uk/reservations.ts
+++ b/shared/src/i18n/uk/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Велосипед',
   'reservations.type.taxi': 'Таксі',
   'reservations.type.transit': 'Громадський транспорт',
+  'reservations.typeShort.transit': 'Громадський транспорт',
   'reservations.type.transport_other': 'Інше',
   'reservations.confirm.delete': 'Ви впевнені, що хочете видалити бронювання «{name}»?',
   'reservations.confirm.deleteTitle': 'Видалити бронювання?',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Місцезнаходження / Адреса',
   'reservations.locationPlaceholder': 'Адреса, аеропорт, готель...',
   'reservations.confirmationCode': 'Код бронювання',
+  'reservations.routeLabel': 'Маршрут',
+  'reservations.segmentCodes': 'Коди відрізків',
   'reservations.confirmationPlaceholder': 'наприклад, ABC12345',
   'reservations.day': 'День',
   'reservations.noDay': 'Без дня',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Помилка видалення',
   'reservations.confirm.remove': 'Видалити бронювання для «{name}»?',
   'reservations.linkAssignment': 'Прив’язати до призначення дня',
+  'reservations.linkedTo': 'Пов’язано з',
   'reservations.pickAssignment': 'Оберіть призначення з вашого плану...',
   'reservations.noAssignment': 'Без прив’язки (самостійно)',
   'reservations.price': 'Ціна',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': 'Знайдено {count} бронювання(нь)',
   'reservations.import.previewEmpty': 'З завантажених файлів не вдалося витягти бронювання.',
   'reservations.import.removeItem': 'Видалити',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': 'Перевірити',
+  'reservations.import.tryAi': 'Розпізнати за допомогою ШІ',
+  'reservations.import.aiParsing': 'Розпізнавання за допомогою ШІ…',
   'reservations.import.confirm': 'Імпортувати {count} бронювання(нь)',
   'reservations.import.back': 'Назад',
   'reservations.import.success': '{count} бронювання(нь) імпортовано',
@@ -179,5 +183,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Мандрівники',
   'reservations.travelers.assign': 'Призначити мандрівників',
   'reservations.travelers.none': 'Поки немає учасників подорожі.',
+  'reservations.status.switchTo': 'Змінити на {status}',
+  'reservations.view.label': 'Вигляд',
+  'reservations.view.cards': 'Картки',
+  'reservations.view.list': 'Список',
+  'reservations.view.timeline': 'Хронологія',
+  'reservations.filter': 'Фільтр',
+  'reservations.searchPlaceholder': 'Пошук',
+  'reservations.results': '{shown} з {total}',
+  'reservations.resetFilters': 'Скинути фільтри',
+  'reservations.noMatches': 'Нічого не відповідає цим фільтрам',
+  'reservations.viewOptions': 'Параметри вигляду',
+  'reservations.resetView': 'Скинути вигляд',
+  'reservations.group.label': 'Групувати за',
+  'reservations.group.status': 'Статус',
+  'reservations.group.day': 'День',
+  'reservations.group.type': 'Тип',
+  'reservations.group.none': 'Без групування',
+  'reservations.transitApart': 'Громадський транспорт окремим розділом',
+  'reservations.group.before': 'До подорожі',
+  'reservations.group.after': 'Після подорожі',
+  'reservations.group.undated': 'Без дати',
+  'reservations.sort.label': 'Сортувати за',
+  'reservations.sort.date': 'Дата',
+  'reservations.sort.title': 'Назва',
+  'reservations.sort.type': 'Тип',
+  'reservations.sort.status': 'Статус',
+  'reservations.sort.earlyFirst': 'Спершу найраніші',
+  'reservations.sort.lateFirst': 'Спершу найпізніші',
+  'reservations.sort.aToZ': 'Від А до Я',
+  'reservations.sort.zToA': 'Від Я до А',
+  'reservations.timeline.dayCount': 'Днів: {count}',
+  'reservations.timeline.zoom': 'Масштаб',
+  'reservations.timeline.trip': 'Подорож',
+  'reservations.timeline.day': 'День',
+  'reservations.timeline.prevDay': 'Попередній день',
+  'reservations.timeline.nextDay': 'Наступний день',
+  'reservations.timeline.openDay': 'Відкрити {day} погодинно',
+  'reservations.timeline.nothingThisDay': 'Цього дня нічого немає.',
+  'reservations.timeline.today': 'Сьогодні',
+  'reservations.timeline.now': 'зараз',
+  'reservations.timeline.byType': 'Окрема доріжка для кожного типу',
+  'reservations.timeline.context': 'Показувати й іншу вкладку',
+  'reservations.timeline.contextBookings': 'Бронювання',
+  'reservations.timeline.contextTransports': 'Транспорт',
+  'reservations.timeline.noneDated': 'Жодне з них ще не має дати.',
+  'reservations.undated': 'Без дати',
+  'reservations.nights': 'Ночі',
+  'reservations.start': 'Початок',
+  'reservations.end': 'Кінець',
+  'reservations.rename': 'Перейменувати',
+  'reservations.copyCode': 'Копіювати код бронювання',
+  'reservations.copyFailed': 'Не вдалося скопіювати',
+  'reservations.showInFiles': 'Показати у файлах',
 };
 export default reservations;
diff --git a/shared/src/i18n/uk/transport.ts b/shared/src/i18n/uk/transport.ts
index 066b74f33..be4f92aa2 100644
--- a/shared/src/i18n/uk/transport.ts
+++ b/shared/src/i18n/uk/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Змінити транспорт',
   'transport.title': 'Транспорт',
   'transport.addManual': 'Транспорт',
+  'transport.empty': 'Поки немає транспорту',
 };
 export default transport;
diff --git a/shared/src/i18n/vi/budget.ts b/shared/src/i18n/vi/budget.ts
index 62f875b44..7cbe97ae1 100644
--- a/shared/src/i18n/vi/budget.ts
+++ b/shared/src/i18n/vi/budget.ts
@@ -139,6 +139,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': 'Chia đều',
   'costs.splitCustom': 'Tùy chỉnh',
   'costs.splitTicket': 'Hóa đơn',
+  'costs.perPerson': '{amount} mỗi người',
+  'costs.payersHint': 'Đánh dấu những người đã trả và nhập số tiền mỗi người đã bỏ ra.',
+  'costs.splitHint.equally': 'Mọi người được đánh dấu trả phần bằng nhau.',
+  'costs.splitHint.custom': 'Nhập phần của từng người; cộng lại phải bằng tổng số tiền.',
+  'costs.splitHint.ticket': 'Liệt kê các món trên hóa đơn và đánh dấu ai đã dùng từng món.',
   'costs.filter.allCategories': 'Tất cả danh mục',
   'costs.filter.allDays': 'Tất cả các ngày',
   'costs.expensesCount': '{count} chi phí',
@@ -154,13 +159,15 @@ const budget: TranslationStrings = {
   'costs.receipts': 'Hóa đơn',
   'costs.receiptsTitle': 'Hóa đơn & Biên lai',
   'costs.attachReceipt': 'Đính kèm hóa đơn / biên lai',
+  'costs.attach': 'Đính kèm',
   'costs.scan.button': 'Quét hóa đơn',
   'costs.scan.reading': 'Đang đọc hóa đơn…',
   'costs.scan.review': 'Xem lại khoản chi',
   'costs.scan.nothingRead': 'Không đọc được hóa đơn nào từ ảnh này.',
   'costs.scan.failed': 'Không thể bắt đầu đọc hóa đơn.',
   'costs.scan.title': 'Quét hóa đơn',
-  'costs.scan.accepted': 'Ảnh của một hóa đơn (JPG, PNG hoặc WEBP, tối đa 10 MB). Mô hình AI đọc ảnh ở chế độ nền, sau đó bạn kiểm tra khoản chi trước khi lưu.',
+  'costs.scan.accepted':
+    'Ảnh của một hóa đơn (JPG, PNG hoặc WEBP, tối đa 10 MB). Mô hình AI đọc ảnh ở chế độ nền, sau đó bạn kiểm tra khoản chi trước khi lưu.',
   'costs.scan.dropHere': 'Thả ảnh hóa đơn vào đây, hoặc bấm để chọn hay chụp ảnh',
   'costs.scan.dropActive': 'Thả ảnh để quét',
   'costs.scan.start': 'Quét',
diff --git a/shared/src/i18n/vi/help.ts b/shared/src/i18n/vi/help.ts
index c1a6a8837..2b6c526f0 100644
--- a/shared/src/i18n/vi/help.ts
+++ b/shared/src/i18n/vi/help.ts
@@ -2255,9 +2255,9 @@ const help: TranslationStrings = {
     'Mở điểm dừng mà đặt chỗ thuộc về. Thẻ hiện một dải có “Đã xác nhận” hoặc “Chưa giải quyết” và tên của đặt chỗ.',
   'help.guide.place-booking.step.2':
     'Dải đó mang “Ngày”, “Thời gian” và “Mã đặt chỗ”, cùng bất kỳ ghi chú nào mà đặt chỗ có.',
-  'help.guide.place-booking.step.3': 'Nhấp vào dải đó. Biểu mẫu của chính đặt chỗ mở ra trên nó.',
+  'help.guide.place-booking.step.3': 'Nhấp vào dải đó. Đặt chỗ mở ra phía trên bản đồ.',
   'help.guide.place-booking.step.4':
-    '“Liên kết đến bài tập trong ngày” là thứ ghim một đặt chỗ vào một điểm dừng, và ở đây nó đã gọi tên điểm dừng này. Đóng biểu mẫu lại.',
+    '“Chỉnh sửa” ở chân đặt chỗ mở biểu mẫu riêng của nó. Trong đó, “Liên kết đến bài tập trong ngày” là thứ ghim một đặt chỗ vào một điểm dừng, và ở đây nó đã gọi tên điểm dừng này. Đóng biểu mẫu lại.',
   'help.guide.place-booking.step.5':
     'Một đặt chỗ mới cho một điểm dừng bắt đầu ở cột các ngày: di chuột lên điểm dừng và nhấp dấu + ở cuối nó. Biểu mẫu mở ra dưới tên “Đặt chỗ mới”, đã được liên kết sẵn với nó.',
   'help.guide.place-booking.result':
@@ -2609,7 +2609,7 @@ const help: TranslationStrings = {
   'help.guide.day-bookings.step.3':
     'Màu sắc cho biết một đặt chỗ đang ở đâu: hàng màu xanh lá là đã xác nhận, hàng màu hổ phách là chưa giải quyết. Khách sạn không nằm trong danh sách này, chúng có khối riêng ở bên dưới.',
   'help.guide.day-bookings.step.4':
-    'Danh sách này chỉ đọc các đặt chỗ ra. Một đặt chỗ được tạo và được thay đổi trong tab “Đặt chỗ”.',
+    'Nhấp vào một hàng và đặt chỗ mở ra. “Chỉnh sửa” ở chân nó dùng để thay đổi; đặt chỗ mới được tạo trong tab “Đặt chỗ”.',
   'help.guide.day-bookings.result':
     'Mọi thứ ghi ngày vào ngày đó, và mọi thứ treo trên một trong các điểm dừng của nó, đều nằm trong danh sách duy nhất này.',
   'help.guide.day-bookings.tip.1':
@@ -3147,13 +3147,13 @@ const help: TranslationStrings = {
     'Đưa một nhà hàng, một sự kiện, một chuyến du lịch, một chỗ đỗ xe hay bất cứ thứ gì khác vào chuyến đi bằng tay.',
   'help.guide.create-booking.step.1': 'Nhấp “Thêm đặt chỗ” ở trên cùng bên phải của thẻ. “Đặt chỗ mới” mở ra.',
   'help.guide.create-booking.step.2':
-    'Chọn “Loại đặt chỗ” từ danh sách ở đầu biểu mẫu, cạnh “Người đi”. “Chỗ ở”, “Nhà hàng”, “Sự kiện”, “Chuyến du lịch”, “Bãi đỗ xe” và “Khác” là sáu loại thẻ này tạo ra, và biểu mẫu thay đổi theo lựa chọn: chỉ “Chỗ ở” mới đổi ngày của nó lấy một khoảng các ngày.',
+    'Nhấp vào nhãn loại dưới tiêu đề, ở đầu biểu mẫu, và chọn “Loại đặt chỗ”. “Chỗ ở”, “Nhà hàng”, “Sự kiện”, “Chuyến du lịch”, “Bãi đỗ xe” và “Khác” là sáu loại thẻ này tạo ra, và biểu mẫu thay đổi theo lựa chọn: chỉ “Chỗ ở” mới đổi ngày của nó lấy một khoảng các ngày.',
   'help.guide.create-booking.step.3':
     'Gõ “Tiêu đề”. Đó là ô duy nhất biểu mẫu nhất định đòi, và “Thêm” vẫn nằm im cho tới khi nó có nội dung.',
   'help.guide.create-booking.step.4':
     'Đặt “Ngày” và “Thời gian bắt đầu”, cùng “Ngày kết thúc” và “Thời gian kết thúc” nếu đặt chỗ có điểm kết thúc. Lịch chỉ đưa ra những ngày nằm trong chuyến đi, và một điểm kết thúc không sau điểm bắt đầu sẽ báo bằng màu đỏ và chặn “Thêm”.',
   'help.guide.create-booking.step.5':
-    'Điền “Mã đặt chỗ” từ bản xác nhận và đặt “Trạng thái”. “Chưa giải quyết” hay “Đã xác nhận” quyết định thẻ rơi vào phần nào trong hai phần.',
+    'Điền “Mã đặt chỗ” từ bản xác nhận. Nhãn trạng thái cạnh loại hiện “Chưa giải quyết”; một cú nhấp chuyển nó sang “Đã xác nhận” và ngược lại, và điều đó quyết định thẻ rơi vào phần nào trong hai phần.',
   'help.guide.create-booking.step.6': 'Nhấp “Thêm”.',
   'help.guide.create-booking.result':
     'Đặt chỗ là một thẻ trong phần của nó với chip loại, ngày và mã của nó, và mọi người khác trong chuyến đi đều thấy nó xuất hiện.',
@@ -3203,7 +3203,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': 'Nói một đặt chỗ là dành cho ai',
   'help.guide.booking-travelers.goal': 'Đánh dấu những người đi mà một đặt chỗ bao gồm, rồi chỉ xem phần của họ.',
   'help.guide.booking-travelers.step.1':
-    'Mở đặt chỗ bằng cây bút chì. “Người đi” nằm ở đầu biểu mẫu, cạnh “Loại đặt chỗ”, và hiện “Chỉ định người đi” khi chưa có ai trong đặt chỗ.',
+    'Mở đặt chỗ bằng cây bút chì. “Người đi” nằm cạnh “Mã đặt chỗ”, và hiện “Chỉ định người đi” khi chưa có ai trong đặt chỗ.',
   'help.guide.booking-travelers.step.2':
     'Nhấp vào đó và chọn những người mà đặt chỗ này dành cho; những “Khách” đã có tên cũng có trong danh sách. Người được chọn sẽ có một dấu tích và ảnh đại diện của họ trong ô. Nhấp lại vào tên để bỏ ra.',
   'help.guide.booking-travelers.step.3': 'Nhấp “Cập nhật”.',
@@ -3296,7 +3296,7 @@ const help: TranslationStrings = {
     'Nhấp cây bút chì ở đầu thẻ. “Chỉnh sửa đặt chỗ” mở ra với mọi thứ mà đặt chỗ biết.',
   'help.guide.edit-booking.step.2':
     'Thay đổi thứ cần thay đổi, ở đây là “Mã đặt chỗ” mà nhà cung cấp cuối cùng cũng gửi tới.',
-  'help.guide.edit-booking.step.3': 'Đặt “Trạng thái” thành “Đã xác nhận”.',
+  'help.guide.edit-booking.step.3': 'Nhấp vào nhãn “Chưa giải quyết” ở đầu biểu mẫu. Nó chuyển sang “Đã xác nhận”.',
   'help.guide.edit-booking.step.4': 'Nhấp “Cập nhật”.',
   'help.guide.edit-booking.result':
     'Thẻ chuyển chỗ: một đặt chỗ đã xác nhận đứng trong phần “Đã xác nhận” sau một chấm xanh lá, và mọi người trong chuyến đi đều thấy nó chuyển.',
@@ -3587,19 +3587,19 @@ const help: TranslationStrings = {
   'help.guide.change-transit-route.title': 'Mở và thay đổi một tuyến đã lên kế hoạch',
   'help.guide.change-transit-route.goal': 'Đọc tuyến từng điểm dừng một, đổi tên nó, hoặc tra cứu lại lộ trình.',
   'help.guide.change-transit-route.step.1':
-    'Trong tab “Di chuyển”, các tuyến đã lên kế hoạch nằm dưới “Giao thông công cộng tự động”. Nhấp vào thẻ.',
+    'Trong tab “Di chuyển”, các tuyến đã lên kế hoạch nằm dưới “Giao thông công cộng tự động”. Nhấp vào thẻ; tuyến mở ra dưới dạng một đặt chỗ.',
   'help.guide.change-transit-route.step.2':
     '“Thời lượng”, “Chuyển tuyến” và “Đi bộ” nằm ở trên cùng. “Lộ trình” bên dưới chúng đi qua tuyến từng điểm dừng một, kèm sân ga và các đoạn đi bộ giữa các tuyến.',
   'help.guide.change-transit-route.step.3':
-    '“Đổi tuyến” chạy lại tìm kiếm, đã điền sẵn hai đầu của tuyến này và ngày của nó.',
+    '“Đổi tuyến” ở chân đặt chỗ chạy lại tìm kiếm, đã điền sẵn hai đầu của tuyến này và ngày của nó.',
   'help.guide.change-transit-route.step.4':
-    'Chọn một tuyến khác và nhấp “Thêm vào ngày”; nó thế chỗ tuyến cũ. Còn “Chỉnh sửa chi tiết”, bên cạnh “Đổi tuyến”, mở biểu mẫu phương tiện thông thường, nơi có “Mã đặt chỗ”, “Trạng thái”, người đi và các tập tin.',
+    'Chọn một tuyến khác và nhấp “Thêm vào ngày”; nó thế chỗ tuyến cũ. Còn “Chỉnh sửa”, ở đầu kia của cùng thanh đó, mở biểu mẫu phương tiện thông thường, nơi có “Mã đặt chỗ”, “Trạng thái”, người đi, ghi chú và các tập tin.',
   'help.guide.change-transit-route.result':
     'Hành trình mang lộ trình mới, và thẻ của nó trong tab “Di chuyển” hiển thị các tuyến xe và giờ giấc mới.',
   'help.guide.change-transit-route.tip.1':
-    'Tiêu đề của hành trình chỉ là chữ: cây bút chì bên cạnh đổi tên nó mà không động tới lộ trình. “Ghi chú” bên dưới nhận markdown và có hai tab “Chỉnh sửa” và “Xem trước”.',
+    'Tiêu đề ở đầu đặt chỗ đổi tên tuyến mà không động tới lộ trình. Ghi chú của tuyến được viết trong biểu mẫu phương tiện, sau nút “Chỉnh sửa”.',
   'help.guide.change-transit-route.tip.2':
-    '“Xóa bỏ” ở chân hành trình đưa tuyến ra khỏi chuyến đi; ngày vẫn giữ các điểm dừng của nó.',
+    '“Xóa bỏ” ở chân đặt chỗ đưa tuyến ra khỏi chuyến đi; ngày vẫn giữ các điểm dừng của nó.',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': 'Đổi cách đi một chặng',
   'help.guide.leg-travel-mode.goal':
@@ -3625,17 +3625,17 @@ const help: TranslationStrings = {
   'help.guide.edit-transport.goal':
     'Sửa một giờ, một sân ga hay một mã đặt chỗ, hoặc bỏ chuyến đi lại ấy ra khỏi chuyến đi.',
   'help.guide.edit-transport.step.1':
-    'Trong kế hoạch ngày, một phương tiện là một hàng có màu nằm giữa các điểm dừng. Nhấp vào nó.',
+    'Trong kế hoạch ngày, một phương tiện là một hàng có màu nằm giữa các điểm dừng. Nhấp vào nó; đặt chỗ của nó mở ra với giờ giấc, tuyến đường và “Mã đặt chỗ”.',
   'help.guide.edit-transport.step.2':
-    'Biểu mẫu chính là biểu mẫu đã tạo ra nó, với “Chỉnh sửa phương tiện đi lại” trên thanh tiêu đề. Mọi thứ đều đổi được: loại, tuyến đường, ngày và giờ, “Mã đặt chỗ”, “Trạng thái”.',
+    '“Chỉnh sửa” ở chân đặt chỗ mở biểu mẫu đã tạo ra nó, với “Chỉnh sửa phương tiện đi lại” trên thanh tiêu đề. Mọi thứ đều đổi được: loại, tuyến đường, ngày và giờ, “Mã đặt chỗ”, “Trạng thái”.',
   'help.guide.edit-transport.step.3':
     'Tuyến đường của một chuyến bay là một chuỗi sân bay, của một chuyến tàu là một chuỗi nhà ga. “Thêm điểm dừng” đặt thêm một điểm ở giữa, và mỗi chặng giữ giờ giấc riêng cùng số hiệu chuyến bay hoặc số tàu riêng.',
   'help.guide.edit-transport.step.4':
-    'Nhấp “Cập nhật”. Để bỏ hẳn phương tiện, dùng thùng rác trên thẻ của nó trong tab “Di chuyển” và xác nhận.',
+    'Nhấp “Cập nhật”. Để bỏ hẳn phương tiện, dùng “Xóa bỏ” ở chân đặt chỗ của nó, hoặc thùng rác trên thẻ của nó trong tab “Di chuyển”, rồi xác nhận.',
   'help.guide.edit-transport.result':
     'Thay đổi hiện ra ở mọi nơi phương tiện xuất hiện: tab “Di chuyển”, ngày nó chạy, và đường của nó trên bản đồ.',
   'help.guide.edit-transport.tip.1':
-    'Cùng một biểu mẫu mở ra từ cả hai phía, cây bút chì trên thẻ trong tab “Di chuyển” và chính hàng của phương tiện trong kế hoạch ngày. Một tuyến giao thông công cộng đã lên kế hoạch là ngoại lệ: hàng của nó mở khung nhìn hành trình, và “Chỉnh sửa chi tiết” ở đó dẫn tới biểu mẫu này.',
+    'Cùng một biểu mẫu mở ra từ cả hai phía: qua “Chỉnh sửa” trong đặt chỗ mà một hàng của kế hoạch ngày mở ra, và qua cây bút chì trên thẻ trong tab “Di chuyển”. Một tuyến giao thông công cộng đã lên kế hoạch cũng mở ra dưới dạng đặt chỗ; “Đổi tuyến” ở đó tìm lại, còn “Chỉnh sửa” dẫn tới biểu mẫu này.',
   'help.guide.edit-transport.tip.2':
     'Chuyển một phương tiện sang ngày khác hoàn toàn không cần tới biểu mẫu: kéo hàng của nó từ thẻ ngày này sang thẻ ngày kế tiếp.',
   // transport-on-map
diff --git a/shared/src/i18n/vi/places.ts b/shared/src/i18n/vi/places.ts
index 013a0696a..6ff568e32 100644
--- a/shared/src/i18n/vi/places.ts
+++ b/shared/src/i18n/vi/places.ts
@@ -28,8 +28,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': 'Chọn ít nhất một loại để nhập.',
   'places.selectionCount': '{count} đã chọn',
   'places.deleteSelected': 'Xóa đã chọn',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': 'Đổi danh mục',
+  'places.categoryChanged': 'Đã cập nhật {count} địa điểm',
   'places.kmlKmzImported': '{count} địa điểm được nhập từ KMZ/KML',
   'places.urlResolved': 'Địa điểm được nhập từ URL',
   'places.importList': 'Nhập danh sách',
@@ -52,6 +52,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': 'Hiện toàn bộ chuyến đi',
   'places.filterTracks': 'Bài hát',
   'places.filterByRating': 'Lọc theo đánh giá',
+  'places.filterShow': 'Hiển thị',
+  'places.clearSearch': 'Xóa tìm kiếm',
   'places.yourRating': 'Đánh giá của bạn',
   'places.notRated': 'Chưa có đánh giá',
   'places.search': 'Tìm kiếm địa điểm...',
@@ -71,6 +73,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': 'Đường phố, Thành phố, Quốc gia',
   'places.formLat': 'Vĩ độ (ví dụ: 48,8566)',
   'places.formLng': 'Kinh độ (ví dụ: 2,3522)',
+  'places.formLatLabel': 'Vĩ độ',
+  'places.formLngLabel': 'Kinh độ',
   'places.formCategory': 'Loại',
   'places.noCategory': 'Không có danh mục',
   'places.newCategory': 'Danh mục mới',
diff --git a/shared/src/i18n/vi/reservations.ts b/shared/src/i18n/vi/reservations.ts
index 04a2dcb80..3c9e88e7c 100644
--- a/shared/src/i18n/vi/reservations.ts
+++ b/shared/src/i18n/vi/reservations.ts
@@ -65,6 +65,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': 'Xe đạp',
   'reservations.type.taxi': 'Taxi',
   'reservations.type.transit': 'Giao thông công cộng',
+  'reservations.typeShort.transit': 'Xe công cộng',
   'reservations.type.transport_other': 'Khác',
   'reservations.confirm.delete': 'Bạn có chắc chắn muốn xóa đặt chỗ "{name}" không?',
   'reservations.confirm.deleteTitle': 'Xóa đặt chỗ?',
@@ -80,6 +81,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': 'Vị trí / Địa chỉ',
   'reservations.locationPlaceholder': 'Địa chỉ, Sân bay, Khách sạn...',
   'reservations.confirmationCode': 'Mã đặt chỗ',
+  'reservations.routeLabel': 'Tuyến đường',
+  'reservations.segmentCodes': 'Mã từng chặng',
   'reservations.confirmationPlaceholder': 'ví dụ. ABC12345',
   'reservations.day': 'Ngày',
   'reservations.noDay': 'Không có ngày',
@@ -94,6 +97,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': 'Không thể xóa',
   'reservations.confirm.remove': 'Xóa phần đặt chỗ cho "{name}"?',
   'reservations.linkAssignment': 'Liên kết đến bài tập trong ngày',
+  'reservations.linkedTo': 'Liên kết với',
   'reservations.pickAssignment': 'Chọn một nhiệm vụ từ kế hoạch của bạn...',
   'reservations.noAssignment': 'Không có liên kết (độc lập)',
   'reservations.price': 'Giá',
@@ -182,5 +186,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': 'Người đi',
   'reservations.travelers.assign': 'Chỉ định người đi',
   'reservations.travelers.none': 'Chưa có thành viên nào trong chuyến đi.',
+  'reservations.status.switchTo': 'Chuyển sang {status}',
+  'reservations.view.label': 'Chế độ xem',
+  'reservations.view.cards': 'Thẻ',
+  'reservations.view.list': 'Danh sách',
+  'reservations.view.timeline': 'Dòng thời gian',
+  'reservations.filter': 'Lọc',
+  'reservations.searchPlaceholder': 'Tìm kiếm',
+  'reservations.results': '{shown} trên {total}',
+  'reservations.resetFilters': 'Đặt lại bộ lọc',
+  'reservations.noMatches': 'Không có mục nào khớp với các bộ lọc này',
+  'reservations.viewOptions': 'Tùy chọn hiển thị',
+  'reservations.resetView': 'Đặt lại chế độ xem',
+  'reservations.group.label': 'Nhóm theo',
+  'reservations.group.status': 'Trạng thái',
+  'reservations.group.day': 'Ngày',
+  'reservations.group.type': 'Loại',
+  'reservations.group.none': 'Không nhóm',
+  'reservations.transitApart': 'Giao thông công cộng thành mục riêng',
+  'reservations.group.before': 'Trước chuyến đi',
+  'reservations.group.after': 'Sau chuyến đi',
+  'reservations.group.undated': 'Chưa có ngày',
+  'reservations.sort.label': 'Sắp xếp theo',
+  'reservations.sort.date': 'Ngày',
+  'reservations.sort.title': 'Tiêu đề',
+  'reservations.sort.type': 'Loại',
+  'reservations.sort.status': 'Trạng thái',
+  'reservations.sort.earlyFirst': 'Sớm nhất trước',
+  'reservations.sort.lateFirst': 'Muộn nhất trước',
+  'reservations.sort.aToZ': 'Từ A đến Z',
+  'reservations.sort.zToA': 'Từ Z đến A',
+  'reservations.timeline.dayCount': '{count} ngày',
+  'reservations.timeline.zoom': 'Thu phóng',
+  'reservations.timeline.trip': 'Chuyến đi',
+  'reservations.timeline.day': 'Ngày',
+  'reservations.timeline.prevDay': 'Ngày trước',
+  'reservations.timeline.nextDay': 'Ngày sau',
+  'reservations.timeline.openDay': 'Mở {day} theo từng giờ',
+  'reservations.timeline.nothingThisDay': 'Không có gì trong ngày này.',
+  'reservations.timeline.today': 'Hôm nay',
+  'reservations.timeline.now': 'bây giờ',
+  'reservations.timeline.byType': 'Mỗi loại một làn',
+  'reservations.timeline.context': 'Hiện cả tab còn lại',
+  'reservations.timeline.contextBookings': 'Đặt chỗ',
+  'reservations.timeline.contextTransports': 'Di chuyển',
+  'reservations.timeline.noneDated': 'Chưa mục nào trong số này có ngày.',
+  'reservations.undated': 'Chưa có ngày',
+  'reservations.nights': 'Đêm',
+  'reservations.start': 'Bắt đầu',
+  'reservations.end': 'Kết thúc',
+  'reservations.rename': 'Đổi tên',
+  'reservations.copyCode': 'Sao chép mã đặt chỗ',
+  'reservations.copyFailed': 'Không thể sao chép',
+  'reservations.showInFiles': 'Hiện trong Tập tin',
 };
 export default reservations;
diff --git a/shared/src/i18n/vi/transport.ts b/shared/src/i18n/vi/transport.ts
index c9be022c3..7c1daca03 100644
--- a/shared/src/i18n/vi/transport.ts
+++ b/shared/src/i18n/vi/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': 'Chỉnh sửa phương tiện đi lại',
   'transport.title': 'Di chuyển',
   'transport.addManual': 'Phương tiện',
+  'transport.empty': 'Chưa có phương tiện di chuyển nào',
 };
 export default transport;
diff --git a/shared/src/i18n/zh-TW/budget.ts b/shared/src/i18n/zh-TW/budget.ts
index 366aab5fc..2627e1fdb 100644
--- a/shared/src/i18n/zh-TW/budget.ts
+++ b/shared/src/i18n/zh-TW/budget.ts
@@ -134,10 +134,15 @@ const budget: TranslationStrings = {
   'costs.unfinishedHint': '僅計入總額 — 尚未結算',
   'costs.tapToInclude': '點按以加入',
   'costs.amount': '金額',
-  'costs.split': 'Split',
-  'costs.splitEqually': 'Equally',
-  'costs.splitCustom': 'Custom',
-  'costs.splitTicket': 'Ticket',
+  'costs.split': '分攤',
+  'costs.splitEqually': '平均',
+  'costs.splitCustom': '自訂',
+  'costs.splitTicket': '收據',
+  'costs.perPerson': '每人 {amount}',
+  'costs.payersHint': '勾選付款的人，並填入每個人各付了多少。',
+  'costs.splitHint.equally': '每位勾選的人負擔相同的份額。',
+  'costs.splitHint.custom': '填入每個人的份額；加總必須等於總額。',
+  'costs.splitHint.ticket': '列出收據上的項目，並勾選每一項是誰的。',
   'costs.filter.allCategories': '所有類別',
   'costs.filter.allDays': '所有日期',
   'costs.expensesCount': '{count} 筆支出',
@@ -153,13 +158,15 @@ const budget: TranslationStrings = {
   'costs.receipts': '收據',
   'costs.receiptsTitle': '收據與發票',
   'costs.attachReceipt': '附加收據/發票',
+  'costs.attach': '附加',
   'costs.scan.button': '掃描收據',
   'costs.scan.reading': '正在讀取收據…',
   'costs.scan.review': '檢查支出',
   'costs.scan.nothingRead': '無法從這張照片讀取收據。',
   'costs.scan.failed': '無法開始讀取收據。',
   'costs.scan.title': '掃描收據',
-  'costs.scan.accepted': '一張收據的照片（JPG、PNG 或 WEBP，最大 10 MB）。AI 模型會在背景讀取，儲存前你可以檢查這筆支出。',
+  'costs.scan.accepted':
+    '一張收據的照片（JPG、PNG 或 WEBP，最大 10 MB）。AI 模型會在背景讀取，儲存前你可以檢查這筆支出。',
   'costs.scan.dropHere': '將收據照片拖到這裡，或點擊選擇或拍攝照片',
   'costs.scan.dropActive': '放開以掃描照片',
   'costs.scan.start': '掃描',
diff --git a/shared/src/i18n/zh-TW/dayplan.ts b/shared/src/i18n/zh-TW/dayplan.ts
index 89245fcac..4d327acd9 100644
--- a/shared/src/i18n/zh-TW/dayplan.ts
+++ b/shared/src/i18n/zh-TW/dayplan.ts
@@ -77,8 +77,8 @@ const dayplan: TranslationStrings = {
   'dayplan.mobile.allAssigned': '所有地點已分配',
   'dayplan.mobile.noMatch': '無匹配',
   'dayplan.mobile.createNew': '建立新地點',
-  'dayplan.expandAll': 'Expand all days', // en-fallback
-  'dayplan.collapseAll': 'Collapse all days', // en-fallback
+  'dayplan.expandAll': '展開所有天數', // en-fallback
+  'dayplan.collapseAll': '收合所有天數', // en-fallback
   'dayplan.reorderDays': '重新排序日期',
   'dayplan.reorderTitle': '重新排序日期',
   'dayplan.reorderHint': '該日的地點、筆記和預訂都會一併移動。',
diff --git a/shared/src/i18n/zh-TW/help.ts b/shared/src/i18n/zh-TW/help.ts
index 839798f77..6aaa25617 100644
--- a/shared/src/i18n/zh-TW/help.ts
+++ b/shared/src/i18n/zh-TW/help.ts
@@ -2,12 +2,12 @@ import type { TranslationStrings } from '../types';
 
 // English fallback until 'zh-TW' is translated.
 const help: TranslationStrings = {
-  'help.title': 'Help & Docs',
-  'help.search': 'Search docs…',
-  'help.contents': 'Contents',
-  'help.noResults': 'No matching pages.',
-  'help.errorTitle': "Couldn't load this page",
-  'help.errorBody': 'The help content is fetched from the TREK wiki. Check your connection and try again.',
+  'help.title': '說明與文件',
+  'help.search': '搜尋文件…',
+  'help.contents': '目錄',
+  'help.noResults': '沒有符合的頁面。',
+  'help.errorTitle': '無法載入此頁面',
+  'help.errorBody': '說明內容取自 TREK Wiki。請檢查網路連線後再試一次。',
 
   // center
   'help.center.button': '此頁面的說明',
@@ -858,7 +858,7 @@ const help: TranslationStrings = {
   'help.ctx.settings-display.bullet.2':
     '「Travel & map」：訂票路線一律顯示在地圖上、探索地點的小按鈕、從住宿地點最佳化路線、模糊預訂代碼，以及為預訂路線加上標籤。',
   'help.ctx.settings-display.bullet.3': '「啟動」：TREK 開啟時是進入儀表板還是進行中的旅行，以及旅行的哪個分頁先顯示。',
-  'help.ctx.settings-appearance.title': 'Appearance',
+  'help.ctx.settings-appearance.title': '外觀',
   'help.ctx.settings-appearance.summary':
     'TREK 在這個帳戶上的樣子：淺色還是深色、強調色、玻璃效果和動態效果、文字大小，以及儀表板顯示哪些小工具。一切即時生效，在你登入的每台裝置上都一樣。',
   'help.ctx.settings-appearance.bullet.1':
@@ -1879,9 +1879,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     '開啟該預訂所屬的停靠點。卡片顯示一條橫條，上面是「已確認」或「待確認」以及預訂的名稱。',
   'help.guide.place-booking.step.2': '這條橫條帶著「日期」「時間」和「預訂碼」，以及這筆預訂的任何備註。',
-  'help.guide.place-booking.step.3': '點選這條橫條。該預訂自己的表單就在上面開啟。',
+  'help.guide.place-booking.step.3': '點選這條橫條。預訂會在地圖上方開啟。',
   'help.guide.place-booking.step.4':
-    '「關聯日程分配」就是把預訂掛到停靠點上的欄位，這裡它已經寫著這個停靠點。再把表單關掉。',
+    '預訂底部的「編輯」會開啟它自己的表單。那裡的「關聯日程分配」就是把預訂掛到停靠點上的欄位，這裡它已經寫著這個停靠點。再把表單關掉。',
   'help.guide.place-booking.step.5':
     '為某個停靠點新建預訂要從天數欄開始：滑鼠移到停靠點上，點選它末尾的 +。表單以「新建預訂」開啟，並已經關聯到它。',
   'help.guide.place-booking.result': '預訂掛在停靠點上：它在卡片裡、在當天裡，它的檔案也列在這裡的「檔案」下面。',
@@ -2170,7 +2170,8 @@ const help: TranslationStrings = {
     '一列顯示這是哪種預訂、它的名稱，如果它屬於某個停靠點，就在一個圓點之後寫出那個停靠點。它的時間在右端。',
   'help.guide.day-bookings.step.3':
     '顏色說明一筆預訂處在什麼狀態：綠色的列已確認，琥珀色的還在待確認。飯店不在這個清單裡，它們在下面有自己的區塊。',
-  'help.guide.day-bookings.step.4': '這個清單只把預訂讀出來。預訂要在「預訂」分頁裡建立和變更。',
+  'help.guide.day-bookings.step.4':
+    '點選一列，預訂就會開啟。它底部的「編輯」用來修改；新的預訂要在「預訂」分頁裡建立。',
   'help.guide.day-bookings.result': '日期落在這一天的一切，以及掛在它某個停靠點上的一切，都在這一個清單裡。',
   'help.guide.day-bookings.tip.1':
     '一筆預訂按它自己的日期落到某一天上。在「預訂」分頁裡改掉日期，它就自己挪到另一天去。',
@@ -2639,12 +2640,12 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': '把一家餐廳、一場活動、一個旅遊團、一個車位或別的什麼，手動放進這次旅行。',
   'help.guide.create-booking.step.1': '點選這一欄右上角的「手動新增」。「新建預訂」開啟。',
   'help.guide.create-booking.step.2':
-    '從表單頂部「出行成員」旁邊的清單裡選「預訂型別」。這一欄做的六類是「住宿」「餐廳」「活動」「旅遊團」「停車」和「其他」，表單隨選擇而變：只有「住宿」會把日期換成一段日子的範圍。',
+    '點選表單頭部標題下方的類型標籤，選擇「預訂型別」。這一欄做的六類是「住宿」「餐廳」「活動」「旅遊團」「停車」和「其他」，表單隨選擇而變：只有「住宿」會把日期換成一段日子的範圍。',
   'help.guide.create-booking.step.3': '填「標題」。這是表單唯一堅持要的欄位，在它有內容之前「新增」一直是灰的。',
   'help.guide.create-booking.step.4':
     '設定「日期」和「開始時間」，如果這筆預訂有結束，再設「結束日期」和「結束時間」。日曆只給出旅行之內的日子；結束不晚於開始時，會用紅色這樣提示並擋住「新增」。',
   'help.guide.create-booking.step.5':
-    '填入確認單上的「預訂碼」，並設定「狀態」。是「待確認」還是「已確認」，決定卡片落進兩個區中的哪一個。',
+    '填入確認單上的「預訂碼」。類型旁邊的狀態標籤顯示「待確認」；點一下切換為「已確認」，再點一下切回來，這決定卡片落進兩個區中的哪一個。',
   'help.guide.create-booking.step.6': '點選「新增」。',
   'help.guide.create-booking.result':
     '這筆預訂成了它那個區裡的一張卡片，帶著型別篩選片、日期和預訂碼，旅行中其他所有人也會看到它出現。',
@@ -2685,7 +2686,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': '說明一筆預訂是給誰的',
   'help.guide.booking-travelers.goal': '標出一筆預訂涵蓋的出行成員，然後只看他們的。',
   'help.guide.booking-travelers.step.1':
-    '用鉛筆開啟這筆預訂。「出行成員」在表單頂部，「預訂型別」旁邊，只要這筆預訂上還沒有人，它就顯示「指派成員」。',
+    '用鉛筆開啟這筆預訂。「出行成員」在「預訂碼」旁邊，只要這筆預訂上還沒有人，它就顯示「指派成員」。',
   'help.guide.booking-travelers.step.2':
     '點它，選出這筆預訂是給誰的那些人；有名字的「訪客」也在清單裡。被選中的人會得到一個勾，頭像也會出現在這個欄位中。再點一次名字就取消。',
   'help.guide.booking-travelers.step.3': '點選「更新」。',
@@ -2762,7 +2763,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.goal': '改正一個時間、補上晚到的預訂碼，或者把一筆預訂從「待確認」挪到「已確認」。',
   'help.guide.edit-booking.step.1': '點選卡片頭部的鉛筆。「編輯預訂」帶著這筆預訂知道的一切開啟。',
   'help.guide.edit-booking.step.2': '改該改的地方，這裡是業者終於發來的那個「預訂碼」。',
-  'help.guide.edit-booking.step.3': '把「狀態」設為「已確認」。',
+  'help.guide.edit-booking.step.3': '點選表單頭部的「待確認」標籤。它會變成「已確認」。',
   'help.guide.edit-booking.step.4': '點選「更新」。',
   'help.guide.edit-booking.result':
     '卡片挪了位置：一筆已確認的預訂立在「已確認」區裡，前面是一個綠點，旅行中的每個人都看得到它挪動。',
@@ -3017,17 +3018,19 @@ const help: TranslationStrings = {
   // change-transit-route
   'help.guide.change-transit-route.title': '開啟並變更一條規劃好的路線',
   'help.guide.change-transit-route.goal': '一站一站地讀這條路線，給它改名，或者重新查一次路線。',
-  'help.guide.change-transit-route.step.1': '在「交通」標籤頁裡，規劃好的路線在「自動大眾運輸」下面。點選卡片。',
+  'help.guide.change-transit-route.step.1':
+    '在「交通」標籤頁裡，規劃好的路線在「自動大眾運輸」下面。點選卡片，這條路線會以預訂的形式開啟。',
   'help.guide.change-transit-route.step.2':
     '「行程時間」「轉乘次數」和「步行」在最上面。它們下面的「行程」一站一站地走完這條路線，連月臺和路線之間的步行都在。',
-  'help.guide.change-transit-route.step.3': '「變更路線」重新跑一次搜尋，這條路線的兩端和它的日期都已經填好。',
+  'help.guide.change-transit-route.step.3':
+    '預訂底部的「變更路線」重新跑一次搜尋，這條路線的兩端和它的日期都已經填好。',
   'help.guide.change-transit-route.step.4':
-    '選另一條路線並點選「加入當日行程」，它就頂替舊的那條。而「變更路線」旁邊的「編輯詳細資料」開啟的是普通的交通表單，「預訂碼」、「狀態」、出行成員和檔案都在那裡。',
+    '選另一條路線並點選「加入當日行程」，它就頂替舊的那條。而同一條操作列另一端的「編輯」開啟的是普通的交通表單，「預訂碼」、「狀態」、出行成員、備註和檔案都在那裡。',
   'help.guide.change-transit-route.result':
     '這趟行程帶上了新的行程內容，它在「交通」標籤頁裡的卡片顯示新的路線和時間。',
   'help.guide.change-transit-route.tip.1':
-    '行程的標題只是文字：旁邊的鉛筆給它改名，不會動到路線。下面的「備註」接受 markdown，並有「編輯」和「預覽」兩個標籤。',
-  'help.guide.change-transit-route.tip.2': '行程底部的「刪除」把這條路線從這趟旅行裡拿走；那一天仍然保留它的地點。',
+    '預訂頭部的標題可以替這條路線改名，不會動到路線本身。它的備註在「編輯」後面的交通表單裡填寫。',
+  'help.guide.change-transit-route.tip.2': '預訂底部的「刪除」把這條路線從這趟旅行裡拿走；那一天仍然保留它的地點。',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': '變更某一段的交通方式',
   'help.guide.leg-travel-mode.goal': '在其餘路段都開車的一天裡，把其中一段改成步行，或者把那一段交給大眾運輸搜尋。',
@@ -3046,17 +3049,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': '變更或刪除一段交通',
   'help.guide.edit-transport.goal': '改一個時間、一個月臺或一個預訂碼，或者把這趟交通從旅行裡去掉。',
-  'help.guide.edit-transport.step.1': '在日程裡，一段交通是地點之間一條有顏色的列。點選它。',
+  'help.guide.edit-transport.step.1':
+    '在日程裡，一段交通是地點之間一條有顏色的列。點選它，它的預訂就會開啟，顯示時間、路線和「預訂碼」。',
   'help.guide.edit-transport.step.2':
-    '表單就是建立它的那一個，標題列寫著「編輯交通」。什麼都能改：型別、路線、日期和時間、「預訂碼」、「狀態」。',
+    '預訂底部的「編輯」開啟建立它的那個表單，標題列寫著「編輯交通」。什麼都能改：型別、路線、日期和時間、「預訂碼」、「狀態」。',
   'help.guide.edit-transport.step.3':
     '航班的路線是一串機場，火車的路線是一串車站。「新增中轉站」在中間再放一個，每一段都保留自己的時間和自己的航班號或車次。',
   'help.guide.edit-transport.step.4':
-    '點選「更新」。要把這段交通徹底移除，用它在「交通」標籤頁那張卡片上的垃圾桶，並確認。',
+    '點選「更新」。要把這段交通徹底移除，用它預訂底部的「刪除」，或它在「交通」標籤頁那張卡片上的垃圾桶，並確認。',
   'help.guide.edit-transport.result':
     '改動在這段交通出現的每個地方都會顯示：「交通」標籤頁、它所在的那一天，以及它在地圖上的線。',
   'help.guide.edit-transport.tip.1':
-    '同一個表單從兩邊都能開啟：「交通」標籤頁卡片上的鉛筆，和日程裡這段交通自己的列。規劃好的大眾運輸路線是例外：它的列開啟的是行程檢視，那裡的「編輯詳細資料」才通向這個表單。',
+    '同一個表單從兩邊都能開啟：透過日程中某一列開啟的預訂裡的「編輯」，以及「交通」標籤頁卡片上的鉛筆。規劃好的大眾運輸路線同樣以預訂的形式開啟；那裡的「變更路線」會重新搜尋，「編輯」則通向這個表單。',
   'help.guide.edit-transport.tip.2': '把一段交通挪到另一天根本不需要表單：把它的列從一張日期卡片拖到下一張。',
   // transport-on-map
   'help.guide.transport-on-map.title': '把一段交通畫到地圖上',
diff --git a/shared/src/i18n/zh-TW/places.ts b/shared/src/i18n/zh-TW/places.ts
index 619094e10..6d2714095 100644
--- a/shared/src/i18n/zh-TW/places.ts
+++ b/shared/src/i18n/zh-TW/places.ts
@@ -27,8 +27,8 @@ const places: TranslationStrings = {
   'places.kmlImportNoneSelected': '請至少選擇一種類型。',
   'places.selectionCount': '已選 {count} 項',
   'places.deleteSelected': '刪除所選',
-  'places.changeCategory': 'Change category',
-  'places.categoryChanged': '{count} places updated',
+  'places.changeCategory': '變更類別',
+  'places.categoryChanged': '已更新 {count} 個地點',
   'places.kmlKmzImported': '已從 KMZ/KML 匯入 {count} 個地點',
   'places.urlResolved': '已從 URL 匯入地點',
   'places.importList': '列表匯入',
@@ -51,6 +51,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': '顯示整趟行程',
   'places.filterTracks': '路線',
   'places.filterByRating': '依評分篩選',
+  'places.filterShow': '顯示',
+  'places.clearSearch': '清除搜尋',
   'places.yourRating': '你的評分',
   'places.notRated': '尚未評分',
   'places.search': '搜尋地點...',
@@ -70,6 +72,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': '街道、城市、國家',
   'places.formLat': '緯度（如 48.8566）',
   'places.formLng': '經度（如 2.3522）',
+  'places.formLatLabel': '緯度',
+  'places.formLngLabel': '經度',
   'places.formCategory': '分類',
   'places.noCategory': '無分類',
   'places.newCategory': '新增分類',
diff --git a/shared/src/i18n/zh-TW/reservations.ts b/shared/src/i18n/zh-TW/reservations.ts
index 59a9d58de..b37e15b34 100644
--- a/shared/src/i18n/zh-TW/reservations.ts
+++ b/shared/src/i18n/zh-TW/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': '自行車',
   'reservations.type.taxi': '計程車',
   'reservations.type.transit': '大眾運輸',
+  'reservations.typeShort.transit': '大眾運輸',
   'reservations.type.transport_other': '其他',
   'reservations.confirm.delete': '確定要刪除預訂「{name}」嗎？',
   'reservations.confirm.deleteTitle': '刪除預訂？',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': '地點 / 地址',
   'reservations.locationPlaceholder': '地址、機場、酒店...',
   'reservations.confirmationCode': '預訂碼',
+  'reservations.routeLabel': '路線',
+  'reservations.segmentCodes': '各段預訂碼',
   'reservations.confirmationPlaceholder': '如：ABC12345',
   'reservations.day': '日期',
   'reservations.noDay': '無日期',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': '刪除失敗',
   'reservations.confirm.remove': '移除「{name}」的預訂？',
   'reservations.linkAssignment': '關聯日程分配',
+  'reservations.linkedTo': '關聯到',
   'reservations.pickAssignment': '從計劃中選擇一個分配...',
   'reservations.noAssignment': '無關聯（獨立）',
   'reservations.price': '價格',
@@ -133,9 +137,9 @@ const reservations: TranslationStrings = {
   'reservations.import.previewHeading': '找到 {count} 筆預訂',
   'reservations.import.previewEmpty': '無法從上傳的檔案中提取任何預訂資訊。',
   'reservations.import.removeItem': '移除',
-  'reservations.import.needsReview': 'Review',
-  'reservations.import.tryAi': 'Try AI parsing',
-  'reservations.import.aiParsing': 'Parsing with AI…',
+  'reservations.import.needsReview': '待確認',
+  'reservations.import.tryAi': '試試 AI 解析',
+  'reservations.import.aiParsing': 'AI 解析中…',
   'reservations.import.confirm': '匯入 {count} 筆預訂',
   'reservations.import.back': '返回',
   'reservations.import.success': '已匯入 {count} 筆預訂',
@@ -178,5 +182,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': '出行成員',
   'reservations.travelers.assign': '指派成員',
   'reservations.travelers.none': '行程中尚無成員。',
+  'reservations.status.switchTo': '設為{status}',
+  'reservations.view.label': '檢視',
+  'reservations.view.cards': '卡片',
+  'reservations.view.list': '清單',
+  'reservations.view.timeline': '時間線',
+  'reservations.filter': '篩選',
+  'reservations.searchPlaceholder': '搜尋',
+  'reservations.results': '{total} 筆中的 {shown} 筆',
+  'reservations.resetFilters': '重設篩選',
+  'reservations.noMatches': '沒有符合這些篩選條件的項目',
+  'reservations.viewOptions': '檢視選項',
+  'reservations.resetView': '重設檢視',
+  'reservations.group.label': '分組依據',
+  'reservations.group.status': '狀態',
+  'reservations.group.day': '日期',
+  'reservations.group.type': '類型',
+  'reservations.group.none': '不分組',
+  'reservations.transitApart': '大眾運輸獨立成區',
+  'reservations.group.before': '旅行之前',
+  'reservations.group.after': '旅行之後',
+  'reservations.group.undated': '無日期',
+  'reservations.sort.label': '排序依據',
+  'reservations.sort.date': '日期',
+  'reservations.sort.title': '標題',
+  'reservations.sort.type': '類型',
+  'reservations.sort.status': '狀態',
+  'reservations.sort.earlyFirst': '最早的在前',
+  'reservations.sort.lateFirst': '最晚的在前',
+  'reservations.sort.aToZ': 'A 到 Z',
+  'reservations.sort.zToA': 'Z 到 A',
+  'reservations.timeline.dayCount': '{count} 天',
+  'reservations.timeline.zoom': '縮放',
+  'reservations.timeline.trip': '行程',
+  'reservations.timeline.day': '單日',
+  'reservations.timeline.prevDay': '前一天',
+  'reservations.timeline.nextDay': '後一天',
+  'reservations.timeline.openDay': '逐小時檢視 {day}',
+  'reservations.timeline.nothingThisDay': '這一天沒有安排。',
+  'reservations.timeline.today': '今天',
+  'reservations.timeline.now': '現在',
+  'reservations.timeline.byType': '每種類型單獨一列',
+  'reservations.timeline.context': '同時顯示另一個分頁',
+  'reservations.timeline.contextBookings': '預訂',
+  'reservations.timeline.contextTransports': '交通',
+  'reservations.timeline.noneDated': '這些都還沒有日期。',
+  'reservations.undated': '無日期',
+  'reservations.nights': '晚',
+  'reservations.start': '開始',
+  'reservations.end': '結束',
+  'reservations.rename': '重新命名',
+  'reservations.copyCode': '複製預訂碼',
+  'reservations.copyFailed': '無法複製',
+  'reservations.showInFiles': '在檔案中顯示',
 };
 export default reservations;
diff --git a/shared/src/i18n/zh-TW/transport.ts b/shared/src/i18n/zh-TW/transport.ts
index 824060db0..849694866 100644
--- a/shared/src/i18n/zh-TW/transport.ts
+++ b/shared/src/i18n/zh-TW/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': '編輯交通',
   'transport.title': '交通',
   'transport.addManual': '交通',
+  'transport.empty': '暫無交通',
 };
 export default transport;
diff --git a/shared/src/i18n/zh/budget.ts b/shared/src/i18n/zh/budget.ts
index 56ac04360..c31f8aa26 100644
--- a/shared/src/i18n/zh/budget.ts
+++ b/shared/src/i18n/zh/budget.ts
@@ -138,6 +138,11 @@ const budget: TranslationStrings = {
   'costs.splitEqually': '平均分摊',
   'costs.splitCustom': '自定义金额',
   'costs.splitTicket': '按账单明细',
+  'costs.perPerson': '每人 {amount}',
+  'costs.payersHint': '勾选付款的人，并填写每个人各付了多少。',
+  'costs.splitHint.equally': '每位被勾选的人承担相同的份额。',
+  'costs.splitHint.custom': '填写每个人的份额；合计必须等于总额。',
+  'costs.splitHint.ticket': '列出收据上的项目，并勾选每一项是谁的。',
   'costs.filter.allCategories': '所有类别',
   'costs.filter.allDays': '所有日期',
   'costs.expensesCount': '{count} 笔支出',
@@ -153,13 +158,15 @@ const budget: TranslationStrings = {
   'costs.receipts': '收据',
   'costs.receiptsTitle': '收据与发票',
   'costs.attachReceipt': '附加收据/发票',
+  'costs.attach': '附加',
   'costs.scan.button': '扫描收据',
   'costs.scan.reading': '正在读取收据…',
   'costs.scan.review': '检查支出',
   'costs.scan.nothingRead': '无法从这张照片中读取收据。',
   'costs.scan.failed': '无法开始读取收据。',
   'costs.scan.title': '扫描收据',
-  'costs.scan.accepted': '一张收据的照片（JPG、PNG 或 WEBP，最大 10 MB）。AI 模型在后台读取，保存前你可以检查这笔支出。',
+  'costs.scan.accepted':
+    '一张收据的照片（JPG、PNG 或 WEBP，最大 10 MB）。AI 模型在后台读取，保存前你可以检查这笔支出。',
   'costs.scan.dropHere': '将收据照片拖到这里，或点击选择或拍摄照片',
   'costs.scan.dropActive': '松开以扫描照片',
   'costs.scan.start': '扫描',
diff --git a/shared/src/i18n/zh/help.ts b/shared/src/i18n/zh/help.ts
index a961b0b19..d7e37885a 100644
--- a/shared/src/i18n/zh/help.ts
+++ b/shared/src/i18n/zh/help.ts
@@ -1841,9 +1841,9 @@ const help: TranslationStrings = {
   'help.guide.place-booking.step.1':
     '打开该预订所属的停靠点。卡片显示一条横条，上面是“已确认”或“待确认”以及预订的名称。',
   'help.guide.place-booking.step.2': '这条横条带着“日期”“时间”和“预订码”，以及这笔预订的任何备注。',
-  'help.guide.place-booking.step.3': '点击这条横条。该预订自己的表单就在上面打开。',
+  'help.guide.place-booking.step.3': '点击这条横条。预订会在地图上方打开。',
   'help.guide.place-booking.step.4':
-    '“关联日程分配”就是把预订挂到停靠点上的字段，这里它已经写着这个停靠点。再把表单关掉。',
+    '预订底部的“编辑”会打开它自己的表单。那里的“关联日程分配”就是把预订挂到停靠点上的字段，这里它已经写着这个停靠点。再把表单关掉。',
   'help.guide.place-booking.step.5':
     '为某个停靠点新建预订要从天数栏开始：鼠标悬停在停靠点上，点击它末尾的 +。表单以“新建预订”打开，并已经关联到它。',
   'help.guide.place-booking.result': '预订挂在停靠点上：它在卡片里、在当天里，它的文件也列在这里的“文件”下面。',
@@ -2125,7 +2125,7 @@ const help: TranslationStrings = {
     '一行显示这是哪种预订、它的名称，如果它属于某个停靠点，就在一个圆点之后写出那个停靠点。它的时间在右端。',
   'help.guide.day-bookings.step.3':
     '颜色说明一条预订处在什么状态：绿色的行已确认，琥珀色的还在待确认。酒店不在这个列表里，它们在下面有自己的板块。',
-  'help.guide.day-bookings.step.4': '这个列表只把预订读出来。预订要在“预订”标签页里创建和更改。',
+  'help.guide.day-bookings.step.4': '点击一行，预订就会打开。它底部的“编辑”用来修改；新的预订要在“预订”标签页里创建。',
   'help.guide.day-bookings.result': '日期落在这一天的一切，以及挂在它某个停靠点上的一切，都在这一个列表里。',
   'help.guide.day-bookings.tip.1':
     '一条预订按它自己的日期落到某一天上。在“预订”标签页里改掉日期，它就自己挪到另一天去。',
@@ -2593,12 +2593,12 @@ const help: TranslationStrings = {
   'help.guide.create-booking.goal': '把一家餐厅、一场活动、一个旅游团、一个车位或别的什么，手动放进这次旅行。',
   'help.guide.create-booking.step.1': '点击这一栏右上角的“手动添加”。“新建预订”打开。',
   'help.guide.create-booking.step.2':
-    '从表单顶部“出行人”旁边的列表里选“预订类型”。这一栏做的六类是“住宿”“餐厅”“活动”“旅游团”“停车”和“其他”，表单随选择而变：只有“住宿”会把日期换成一段日子的范围。',
+    '点击表单头部标题下方的类型标签，选择“预订类型”。这一栏做的六类是“住宿”“餐厅”“活动”“旅游团”“停车”和“其他”，表单随选择而变：只有“住宿”会把日期换成一段日子的范围。',
   'help.guide.create-booking.step.3': '填“标题”。这是表单唯一坚持要的字段，在它有内容之前“添加”一直是灰的。',
   'help.guide.create-booking.step.4':
     '设置“日期”和“开始时间”，如果这条预订有结束，再设“结束日期”和“结束时间”。日历只给出旅行之内的日子；结束不晚于开始时，会用红色这样提示并挡住“添加”。',
   'help.guide.create-booking.step.5':
-    '填入确认单上的“预订码”，并设置“状态”。是“待确认”还是“已确认”，决定卡片落进两个区中的哪一个。',
+    '填入确认单上的“预订码”。类型旁边的状态标签显示“待确认”；点一下切换为“已确认”，再点一下切回来，这决定卡片落进两个区中的哪一个。',
   'help.guide.create-booking.step.6': '点击“添加”。',
   'help.guide.create-booking.result':
     '这条预订成了它那个区里的一张卡片，带着类型筛选片、日期和预订码，旅行中其他所有人也会看到它出现。',
@@ -2639,7 +2639,7 @@ const help: TranslationStrings = {
   'help.guide.booking-travelers.title': '说明一条预订是给谁的',
   'help.guide.booking-travelers.goal': '标出一条预订涵盖的出行人，然后只看他们的。',
   'help.guide.booking-travelers.step.1':
-    '用铅笔打开这条预订。“出行人”在表单顶部，“预订类型”旁边，只要这条预订上还没有人，它就显示“分配出行人”。',
+    '用铅笔打开这条预订。“出行人”在“预订码”旁边，只要这条预订上还没有人，它就显示“分配出行人”。',
   'help.guide.booking-travelers.step.2':
     '点它，选出这条预订是给谁的那些人；有名字的“访客”也在列表里。被选中的人会得到一个勾，头像也会出现在这个字段中。再点一次名字就取消。',
   'help.guide.booking-travelers.step.3': '点击“更新”。',
@@ -2714,7 +2714,7 @@ const help: TranslationStrings = {
   'help.guide.edit-booking.goal': '改正一个时间、补上晚到的预订码，或者把一条预订从“待确认”挪到“已确认”。',
   'help.guide.edit-booking.step.1': '点击卡片头部的铅笔。“编辑预订”带着这条预订知道的一切打开。',
   'help.guide.edit-booking.step.2': '改该改的地方，这里是运营商终于发来的那个“预订码”。',
-  'help.guide.edit-booking.step.3': '把“状态”设为“已确认”。',
+  'help.guide.edit-booking.step.3': '点击表单头部的“待确认”标签。它会变成“已确认”。',
   'help.guide.edit-booking.step.4': '点击“更新”。',
   'help.guide.edit-booking.result':
     '卡片挪了位置：一条已确认的预订立在“已确认”区里，前面是一个绿点，旅行中的每个人都看得到它挪动。',
@@ -2966,16 +2966,17 @@ const help: TranslationStrings = {
   // change-transit-route
   'help.guide.change-transit-route.title': '打开并更改一条规划好的线路',
   'help.guide.change-transit-route.goal': '一站一站地读这条线路，给它改名，或者重新查一次路线。',
-  'help.guide.change-transit-route.step.1': '在“交通”标签页里，规划好的线路在“自动公共交通”下面。点击卡片。',
+  'help.guide.change-transit-route.step.1':
+    '在“交通”标签页里，规划好的线路在“自动公共交通”下面。点击卡片，这条线路会以预订的形式打开。',
   'help.guide.change-transit-route.step.2':
     '“时长”“换乘”和“步行”在最上面。它们下面的“行程”一站一站地走完这条线路，连站台和线路之间的步行都在。',
-  'help.guide.change-transit-route.step.3': '“更改路线”重新跑一次搜索，这条线路的两端和它的日期都已经填好。',
+  'help.guide.change-transit-route.step.3': '预订底部的“更改路线”重新跑一次搜索，这条线路的两端和它的日期都已经填好。',
   'help.guide.change-transit-route.step.4':
-    '选另一条线路并点击“添加到当天”，它就顶替旧的那条。而“更改路线”旁边的“编辑详情”打开的是普通的交通表单，“预订码”、“状态”、出行人和文件都在那里。',
+    '选另一条线路并点击“添加到当天”，它就顶替旧的那条。而同一操作栏另一端的“编辑”打开的是普通的交通表单，“预订码”、“状态”、出行人、备注和文件都在那里。',
   'help.guide.change-transit-route.result': '这段行程带上了新的行程安排，它在“交通”标签页里的卡片显示新的线路和时间。',
   'help.guide.change-transit-route.tip.1':
-    '行程的标题只是文字：旁边的铅笔给它改名，不会动到路线。下面的“备注”接受 markdown，并有“编辑”和“预览”两个标签。',
-  'help.guide.change-transit-route.tip.2': '行程底部的“删除”把这条线路从这趟旅行里拿走；那一天仍然保留它的地点。',
+    '预订头部的标题可以给这条线路改名，不会动到路线。它的备注在“编辑”后面的交通表单里填写。',
+  'help.guide.change-transit-route.tip.2': '预订底部的“删除”把这条线路从这趟旅行里拿走；那一天仍然保留它的地点。',
   // leg-travel-mode
   'help.guide.leg-travel-mode.title': '更改某一段的出行方式',
   'help.guide.leg-travel-mode.goal': '在其余路段都开车的一天里，把其中一段改成步行，或者把那一段交给公共交通搜索。',
@@ -2994,17 +2995,18 @@ const help: TranslationStrings = {
   // edit-transport
   'help.guide.edit-transport.title': '更改或删除一段交通',
   'help.guide.edit-transport.goal': '改一个时间、一个站台或一个预订码，或者把这趟交通从旅行里去掉。',
-  'help.guide.edit-transport.step.1': '在日程里，一段交通是地点之间一条带颜色的行。点击它。',
+  'help.guide.edit-transport.step.1':
+    '在日程里，一段交通是地点之间一条带颜色的行。点击它，它的预订就会打开，显示时间、路线和“预订码”。',
   'help.guide.edit-transport.step.2':
-    '表单就是创建它的那一个，标题栏写着“编辑交通”。什么都能改：类型、路线、日期和时间、“预订码”、“状态”。',
+    '预订底部的“编辑”打开创建它的那个表单，标题栏写着“编辑交通”。什么都能改：类型、路线、日期和时间、“预订码”、“状态”。',
   'help.guide.edit-transport.step.3':
     '航班的路线是一串机场，火车的路线是一串车站。“添加经停”在中间再放一个，每一段都保留自己的时间和自己的航班号或车次。',
   'help.guide.edit-transport.step.4':
-    '点击“更新”。要把这段交通彻底移除，用它在“交通”标签页那张卡片上的垃圾桶，并确认。',
+    '点击“更新”。要把这段交通彻底移除，用它预订底部的“删除”，或者它在“交通”标签页那张卡片上的垃圾桶，并确认。',
   'help.guide.edit-transport.result':
     '改动在这段交通出现的每个地方都会显示：“交通”标签页、它所在的那一天，以及它在地图上的线。',
   'help.guide.edit-transport.tip.1':
-    '同一个表单从两边都能打开：“交通”标签页卡片上的铅笔，和日程里这段交通自己的行。规划好的公共交通线路是例外：它的行打开的是行程视图，那里的“编辑详情”才通向这个表单。',
+    '同一个表单从两边都能打开：通过日程中某一行打开的预订里的“编辑”，以及“交通”标签页卡片上的铅笔。规划好的公共交通线路同样以预订的形式打开；那里的“更改路线”会重新搜索，“编辑”则通向这个表单。',
   'help.guide.edit-transport.tip.2': '把一段交通挪到另一天根本不需要表单：把它的行从一张日期卡片拖到下一张。',
   // transport-on-map
   'help.guide.transport-on-map.title': '把一段交通画到地图上',
diff --git a/shared/src/i18n/zh/places.ts b/shared/src/i18n/zh/places.ts
index 239a3f8c8..990e1338a 100644
--- a/shared/src/i18n/zh/places.ts
+++ b/shared/src/i18n/zh/places.ts
@@ -51,6 +51,8 @@ const places: TranslationStrings = {
   'places.dayScopedClear': '显示整个行程',
   'places.filterTracks': '路线',
   'places.filterByRating': '按评分筛选',
+  'places.filterShow': '显示',
+  'places.clearSearch': '清除搜索',
   'places.yourRating': '你的评分',
   'places.notRated': '暂无评分',
   'places.search': '搜索地点...',
@@ -70,6 +72,8 @@ const places: TranslationStrings = {
   'places.formAddressPlaceholder': '街道、城市、国家',
   'places.formLat': '纬度（如 48.8566）',
   'places.formLng': '经度（如 2.3522）',
+  'places.formLatLabel': '纬度',
+  'places.formLngLabel': '经度',
   'places.formCategory': '分类',
   'places.noCategory': '无分类',
   'places.newCategory': '新建分类',
diff --git a/shared/src/i18n/zh/reservations.ts b/shared/src/i18n/zh/reservations.ts
index 283a94642..4595d2862 100644
--- a/shared/src/i18n/zh/reservations.ts
+++ b/shared/src/i18n/zh/reservations.ts
@@ -64,6 +64,7 @@ const reservations: TranslationStrings = {
   'reservations.type.bicycle': '自行车',
   'reservations.type.taxi': '出租车',
   'reservations.type.transit': '公共交通',
+  'reservations.typeShort.transit': '公交',
   'reservations.type.transport_other': '其他',
   'reservations.confirm.delete': '确定要删除预订「{name}」吗？',
   'reservations.confirm.deleteTitle': '删除预订？',
@@ -79,6 +80,8 @@ const reservations: TranslationStrings = {
   'reservations.locationAddress': '地点 / 地址',
   'reservations.locationPlaceholder': '地址、机场、酒店...',
   'reservations.confirmationCode': '预订码',
+  'reservations.routeLabel': '路线',
+  'reservations.segmentCodes': '各段预订码',
   'reservations.confirmationPlaceholder': '如：ABC12345',
   'reservations.day': '日期',
   'reservations.noDay': '无日期',
@@ -93,6 +96,7 @@ const reservations: TranslationStrings = {
   'reservations.toast.deleteError': '删除失败',
   'reservations.confirm.remove': '移除「{name}」的预订？',
   'reservations.linkAssignment': '关联日程分配',
+  'reservations.linkedTo': '关联到',
   'reservations.pickAssignment': '从计划中选择一个分配...',
   'reservations.noAssignment': '无关联（独立）',
   'reservations.price': '价格',
@@ -178,5 +182,58 @@ const reservations: TranslationStrings = {
   'reservations.travelers.label': '出行人',
   'reservations.travelers.assign': '分配出行人',
   'reservations.travelers.none': '行程中暂无成员。',
+  'reservations.status.switchTo': '设为{status}',
+  'reservations.view.label': '视图',
+  'reservations.view.cards': '卡片',
+  'reservations.view.list': '列表',
+  'reservations.view.timeline': '时间线',
+  'reservations.filter': '筛选',
+  'reservations.searchPlaceholder': '搜索',
+  'reservations.results': '{total} 条中的 {shown} 条',
+  'reservations.resetFilters': '重置筛选',
+  'reservations.noMatches': '没有符合这些筛选条件的内容',
+  'reservations.viewOptions': '视图选项',
+  'reservations.resetView': '重置视图',
+  'reservations.group.label': '分组依据',
+  'reservations.group.status': '状态',
+  'reservations.group.day': '日期',
+  'reservations.group.type': '类型',
+  'reservations.group.none': '不分组',
+  'reservations.transitApart': '公共交通单独成区',
+  'reservations.group.before': '旅行之前',
+  'reservations.group.after': '旅行之后',
+  'reservations.group.undated': '无日期',
+  'reservations.sort.label': '排序依据',
+  'reservations.sort.date': '日期',
+  'reservations.sort.title': '标题',
+  'reservations.sort.type': '类型',
+  'reservations.sort.status': '状态',
+  'reservations.sort.earlyFirst': '最早的在前',
+  'reservations.sort.lateFirst': '最晚的在前',
+  'reservations.sort.aToZ': 'A 到 Z',
+  'reservations.sort.zToA': 'Z 到 A',
+  'reservations.timeline.dayCount': '{count} 天',
+  'reservations.timeline.zoom': '缩放',
+  'reservations.timeline.trip': '行程',
+  'reservations.timeline.day': '单日',
+  'reservations.timeline.prevDay': '前一天',
+  'reservations.timeline.nextDay': '后一天',
+  'reservations.timeline.openDay': '按小时查看 {day}',
+  'reservations.timeline.nothingThisDay': '这一天没有安排。',
+  'reservations.timeline.today': '今天',
+  'reservations.timeline.now': '现在',
+  'reservations.timeline.byType': '每种类型单独一行',
+  'reservations.timeline.context': '同时显示另一个标签页',
+  'reservations.timeline.contextBookings': '预订',
+  'reservations.timeline.contextTransports': '交通',
+  'reservations.timeline.noneDated': '这些都还没有日期。',
+  'reservations.undated': '无日期',
+  'reservations.nights': '晚',
+  'reservations.start': '开始',
+  'reservations.end': '结束',
+  'reservations.rename': '重命名',
+  'reservations.copyCode': '复制预订码',
+  'reservations.copyFailed': '无法复制',
+  'reservations.showInFiles': '在文件中显示',
 };
 export default reservations;
diff --git a/shared/src/i18n/zh/transport.ts b/shared/src/i18n/zh/transport.ts
index 97127e60f..6f318ef3a 100644
--- a/shared/src/i18n/zh/transport.ts
+++ b/shared/src/i18n/zh/transport.ts
@@ -6,5 +6,6 @@ const transport: TranslationStrings = {
   'transport.modalTitle.edit': '编辑交通',
   'transport.title': '交通',
   'transport.addManual': '交通',
+  'transport.empty': '暂无交通',
 };
 export default transport;