diff --git a/client/scripts/rtl-baseline.json b/client/scripts/rtl-baseline.json
index 900aa6a77..336a0ca7f 100644
--- a/client/scripts/rtl-baseline.json
+++ b/client/scripts/rtl-baseline.json
@@ -80,11 +80,9 @@
   "hooks/useElementRect.ts": 3,
   "mobile/components/MSegmented.tsx": 1,
   "mobile/components/MSheet.tsx": 1,
-  "mobile/screens/dashboard/MDashboard.tsx": 1,
   "mobile/screens/journey/MJourneyDetail.tsx": 3,
   "mobile/screens/journey/MJourneyEntrySheet.tsx": 1,
   "mobile/screens/trip/map/MMapArea.tsx": 3,
-  "mobile/screens/trip/tabs/MCollabPolls.tsx": 1,
   "mobile/screens/trip/tabs/MFileLightbox.tsx": 2,
   "mobile/screens/vacay/MVacayMonth.tsx": 1,
   "pages/AtlasPage.tsx": 2,
diff --git a/client/src/components/Journey/JournalBody.test.tsx b/client/src/components/Journey/JournalBody.test.tsx
index f22553bd4..30e1abb3a 100644
--- a/client/src/components/Journey/JournalBody.test.tsx
+++ b/client/src/components/Journey/JournalBody.test.tsx
@@ -77,8 +77,9 @@ describe('JournalBody', () => {
     const { container } = render(<JournalBody text={'# Big\n\n### Small'} />);
     expect(container.querySelector('h1')).not.toBeInTheDocument();
     expect(container.querySelector('h3')).not.toBeInTheDocument();
-    expect(screen.getByText('Big').tagName).toBe('P');
-    expect(screen.getByText('Small').tagName).toBe('P');
+    // Each paragraph's text sits in an isolate (<bdi>) so it keeps its own direction.
+    expect(screen.getByText('Big').parentElement?.tagName).toBe('P');
+    expect(screen.getByText('Small').parentElement?.tagName).toBe('P');
   });
 
   it('FE-COMP-JOURNALBODY-012: keeps a setext underline as text instead of a heading', () => {
diff --git a/client/src/components/Journey/JournalBody.tsx b/client/src/components/Journey/JournalBody.tsx
index 962a9ef21..08987a7f3 100644
--- a/client/src/components/Journey/JournalBody.tsx
+++ b/client/src/components/Journey/JournalBody.tsx
@@ -15,13 +15,14 @@ export default function JournalBody({ text, dark }: Props) {
       lineHeight: 1.6,
       color: 'inherit',
     }}>
+      {/* Each paragraph in its own direction (bdi): a Latin story in the Arabic UI keeps its full stop at its end. */}
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkBreaks]}
         components={{
-          h1: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
-          h2: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
-          h3: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
-          p: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
+          h1: ({ children }) => <p style={{ margin: '0 0 6px' }}><bdi>{children}</bdi></p>,
+          h2: ({ children }) => <p style={{ margin: '0 0 6px' }}><bdi>{children}</bdi></p>,
+          h3: ({ children }) => <p style={{ margin: '0 0 6px' }}><bdi>{children}</bdi></p>,
+          p: ({ children }) => <p style={{ margin: '0 0 6px' }}><bdi>{children}</bdi></p>,
           blockquote: ({ children }) => (
             <blockquote style={{
               borderInlineStart: `3px solid var(--journal-accent)`,
diff --git a/client/src/components/Notifications/InAppNotificationItem.tsx b/client/src/components/Notifications/InAppNotificationItem.tsx
index 1679e8219..b59820f96 100644
--- a/client/src/components/Notifications/InAppNotificationItem.tsx
+++ b/client/src/components/Notifications/InAppNotificationItem.tsx
@@ -3,7 +3,7 @@ import { Check, X, ArrowRight, Trash2, CheckCheck, Mail } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { InAppNotification } from '../../store/inAppNotificationStore'
 import { compactTime, useNotificationItemActions } from './useNotificationItemActions'
-import { KIND_LOOK, createdAt, kindOf } from './notificationModel'
+import { KIND_LOOK, createdAt, kindOf, localizedParams } from './notificationModel'
 
 interface NotificationItemProps {
   notification: InAppNotification
@@ -55,7 +55,7 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
     useNotificationItemActions(notification, onClose)
 
   const titleText = t(notification.title_key, notification.title_params)
-  const bodyText = t(notification.text_key, notification.text_params)
+  const bodyText = t(notification.text_key, localizedParams(notification.text_params, locale))
   const unread = !notification.is_read
   const answered = notification.response !== null
   const { positive_text_key: yesKey, negative_text_key: noKey, navigate_text_key: goKey } = notification
diff --git a/client/src/components/Notifications/notificationModel.test.tsx b/client/src/components/Notifications/notificationModel.test.tsx
index 5353cc69d..e35626e5c 100644
--- a/client/src/components/Notifications/notificationModel.test.tsx
+++ b/client/src/components/Notifications/notificationModel.test.tsx
@@ -1,5 +1,5 @@
 /**
- * FE-NOTIF-MODEL-001 to FE-NOTIF-MODEL-007
+ * FE-NOTIF-MODEL-001 to FE-NOTIF-MODEL-009
  *
  * What a notification's tile shows, how the server's time is read, and how the
  * list is cut into days under headings in the reader's language.
@@ -9,7 +9,7 @@ import { describe, expect, it } from 'vitest';
 import { render, screen } from '../../../tests/helpers/render';
 import type { InAppNotification } from '../../store/inAppNotificationStore';
 import NotificationDayList from './NotificationDayList';
-import { KIND_LOOK, createdAt, dayLabel, groupByDay, kindOf } from './notificationModel';
+import { KIND_LOOK, createdAt, dayLabel, groupByDay, kindOf, localizedParams } from './notificationModel';
 
 const note = (id: number, created_at: string, title_key = 'notif.trip_invite.title'): InAppNotification => ({
   id,
@@ -89,3 +89,21 @@ describe('NotificationDayList', () => {
     expect(screen.getAllByRole('region')).toHaveLength(2);
   });
 });
+
+describe('localizedParams', () => {
+  const NOW = new Date(2026, 10, 7, 12);
+
+  it('FE-NOTIF-MODEL-008: a due day sent as YYYY-MM-DD reads as the short date of the language', () => {
+    const params = { todo: 'Exchange the JR Pass', trip: 'Kyoto', due: '2026-11-05' };
+    expect(localizedParams(params, 'de', NOW)).toEqual({ todo: 'Exchange the JR Pass', trip: 'Kyoto', due: '5. Nov.' });
+    expect(localizedParams(params, 'en-US', NOW).due).toBe('Nov 5');
+    expect(localizedParams(params, 'ru', NOW).due).toBe('5 нояб.');
+    // Another year names it.
+    expect(localizedParams({ due: '2027-01-02' }, 'en-US', NOW).due).toBe('Jan 2, 2027');
+  });
+
+  it('FE-NOTIF-MODEL-009: anything that is not a bare date passes through, and no params stay none', () => {
+    expect(localizedParams({ trip: '2026-11-05 at noon', n: '3' }, 'de', NOW)).toEqual({ trip: '2026-11-05 at noon', n: '3' });
+    expect(localizedParams(undefined, 'de', NOW)).toEqual({});
+  });
+});
diff --git a/client/src/components/Notifications/notificationModel.ts b/client/src/components/Notifications/notificationModel.ts
index c4b20f00b..af47586ea 100644
--- a/client/src/components/Notifications/notificationModel.ts
+++ b/client/src/components/Notifications/notificationModel.ts
@@ -80,6 +80,34 @@ export function createdAt(value: string): Date {
 
 const dayStart = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
 
+const BARE_DAY = /^(\d{4})-(\d{2})-(\d{2})$/;
+
+/**
+ * The parameters of a notification's text as the reader's language writes
+ * them. A day the server sends (a todo's due date) arrives as YYYY-MM-DD, which
+ * would stand as "2026-11-05" in a German or Arabic sentence; it becomes the
+ * short date of the language ("5. Nov.", "٥ نوفمبر"), with the year only when
+ * it is not this one. Everything else passes through as it came.
+ */
+export function localizedParams(
+  params: Record<string, string> | null | undefined,
+  locale: string,
+  now: Date = new Date()
+): Record<string, string> {
+  const out: Record<string, string> = { ...params };
+  for (const [key, value] of Object.entries(out)) {
+    const day = BARE_DAY.exec(value);
+    if (!day) continue;
+    const date = new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+    out[key] = new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'short',
+      ...(date.getFullYear() === now.getFullYear() ? {} : { year: 'numeric' }),
+    }).format(date);
+  }
+  return out;
+}
+
 /**
  * The heading of the day a notification belongs to, in the reader's language:
  * today and yesterday by name, the rest of the week by weekday, anything older
diff --git a/client/src/components/shared/MarkdownText.test.tsx b/client/src/components/shared/MarkdownText.test.tsx
index afd9ad015..6628a9e10 100644
--- a/client/src/components/shared/MarkdownText.test.tsx
+++ b/client/src/components/shared/MarkdownText.test.tsx
@@ -41,4 +41,23 @@ describe('MarkdownText', () => {
     expect(wrapper.className).toContain('truncate')
     expect(wrapper.className).toContain('text-m-muted')
   })
+
+  it('FE-MDTEXT-007: a clamped row takes its direction from its own text, so a Latin address in Arabic is cut at its end', () => {
+    const { container } = render(<MarkdownText clamp>{'68 Fukakusa Yabunouchicho, Fushimi Ward, Kyoto'}</MarkdownText>)
+    const wrapper = container.firstElementChild as HTMLElement
+    expect(wrapper).toHaveAttribute('dir', 'auto')
+    expect(wrapper).toHaveClass('truncate')
+    // No isolate inside: dir="auto" would not see the text through a <bdi>.
+    expect(wrapper.querySelector('bdi')).toBeNull()
+  })
+
+  it('FE-MDTEXT-008: in a full view each paragraph runs in its own direction, inside its block', () => {
+    const text = ["Kyoto's kitchen: pickles and matcha everything.", 'Second paragraph?'].join('\n\n')
+    const { container } = render(<MarkdownText>{text}</MarkdownText>)
+    expect(container.firstElementChild).not.toHaveAttribute('dir')
+    const paragraphs = container.querySelectorAll('p')
+    expect(paragraphs).toHaveLength(2)
+    paragraphs.forEach(p => expect(p.firstElementChild?.tagName).toBe('BDI'))
+    expect(paragraphs[1].textContent).toBe('Second paragraph?')
+  })
 })
diff --git a/client/src/components/shared/MarkdownText.tsx b/client/src/components/shared/MarkdownText.tsx
index f65be4069..bc9714b36 100644
--- a/client/src/components/shared/MarkdownText.tsx
+++ b/client/src/components/shared/MarkdownText.tsx
@@ -3,6 +3,7 @@ import type { Components } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
 import { markdownLinkComponents } from './markdownLink'
+import { isolatedTextBlocks } from './markdownSanitize'
 
 /**
  * A clamped caption lives inside a tappable row, so an anchor there would eat
@@ -12,6 +13,8 @@ const clampedComponents: Components = {
   a: ({ children }) => <>{children}</>,
 }
 
+const fullComponents: Components = { ...isolatedTextBlocks, ...markdownLinkComponents }
+
 /**
  * A description or note, rendered (#2337). The field is Markdown wherever it is
  * written — the editors ship a formatting bar — so printing it raw anywhere
@@ -20,6 +23,9 @@ const clampedComponents: Components = {
  * `clamp` is the list-row variant: one line high, matching what the desktop
  * sidebar rows do with the same field. The height cap is inline because the row
  * itself sets a font size, and a Tailwind `leading-*` would race with it.
+ * The clamped line takes its direction from its own text (dir="auto" on the
+ * row, which a <bdi> inside would hide from it), so a Latin address in an Arabic
+ * row loses its end at the cut, not its beginning.
  */
 export default function MarkdownText({ children, className = '', clamp = false }: {
   children: string
@@ -28,12 +34,13 @@ export default function MarkdownText({ children, className = '', clamp = false }
 }) {
   return (
     <div
+      dir={clamp ? 'auto' : undefined}
       className={`collab-note-md ${clamp ? 'truncate ' : ''}${className}`}
       style={clamp ? { maxHeight: '1.2em', lineHeight: 1.2 } : undefined}
     >
       <Markdown
         remarkPlugins={[remarkGfm, remarkBreaks]}
-        components={clamp ? clampedComponents : markdownLinkComponents}
+        components={clamp ? clampedComponents : fullComponents}
       >
         {children}
       </Markdown>
diff --git a/client/src/components/shared/markdownSanitize.tsx b/client/src/components/shared/markdownSanitize.tsx
index 8d78abaa9..5808e5893 100644
--- a/client/src/components/shared/markdownSanitize.tsx
+++ b/client/src/components/shared/markdownSanitize.tsx
@@ -31,6 +31,35 @@ export const sanitizedMarkdownPlugins: NonNullable<Options['rehypePlugins']> = [
   [rehypeSanitize, schema],
 ]
 
+/**
+ * A paragraph or heading of user text runs in its own direction: a Latin note
+ * in the Arabic UI keeps its question mark and full stop at its end (and an
+ * Arabic one in an English UI), while the block keeps the alignment of the page
+ * around it. The isolate is inline, so the block itself stays as it was.
+ */
+export const isolatedTextBlocks: Components = {
+  p: ({ children }) => (
+    <p>
+      <bdi>{children}</bdi>
+    </p>
+  ),
+  h1: ({ children }) => (
+    <h1>
+      <bdi>{children}</bdi>
+    </h1>
+  ),
+  h2: ({ children }) => (
+    <h2>
+      <bdi>{children}</bdi>
+    </h2>
+  ),
+  h3: ({ children }) => (
+    <h3>
+      <bdi>{children}</bdi>
+    </h3>
+  ),
+}
+
 /**
  * Links as in markdownLinkComponents (#1629): own tab plus `rel` protection.
  * The exception is a footnote or heading link, which points inside the text
@@ -38,6 +67,7 @@ export const sanitizedMarkdownPlugins: NonNullable<Options['rehypePlugins']> = [
  * somewhere else.
  */
 export const sanitizedMarkdownComponents: Components = {
+  ...isolatedTextBlocks,
   a: ({ children, href, ...rest }) =>
     href?.startsWith('#') ? (
       <a {...rest} href={href}>
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 7b879d5c8..573a80997 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -25,6 +25,7 @@ import '@fontsource/geist-sans/600.css'
 // several .leaflet-* styles.
 import 'leaflet/dist/leaflet.css'
 import './index.css'
+import './styles/rtl.css'
 import './styles/ferratas.css'
 import './styles/paddle.css'
 import './styles/walkRoute.css'
diff --git a/client/src/mobile/screens/collections/MCollAddSheet.tsx b/client/src/mobile/screens/collections/MCollAddSheet.tsx
index bae23e7b7..6cbab86df 100644
--- a/client/src/mobile/screens/collections/MCollAddSheet.tsx
+++ b/client/src/mobile/screens/collections/MCollAddSheet.tsx
@@ -99,8 +99,8 @@ export default function MCollAddSheet({ open, collectionId, collectionName, list
                   <MapPin size={14} strokeWidth={2.2} />
                 </span>
                 <span className="min-w-0 flex-1">
-                  <span className="block truncate text-[0.8125rem] font-semibold text-m-ink">{str(r.name)}</span>
-                  {str(r.address) && <span className="block truncate font-geist text-[0.625rem] text-m-muted">{str(r.address)}</span>}
+                  <span dir="auto" className="block truncate text-[0.8125rem] font-semibold text-m-ink">{str(r.name)}</span>
+                  {str(r.address) && <span dir="auto" className="block truncate font-geist text-[0.625rem] text-m-muted">{str(r.address)}</span>}
                 </span>
               </button>
             ))}
diff --git a/client/src/mobile/screens/collections/MCollLinksEditor.tsx b/client/src/mobile/screens/collections/MCollLinksEditor.tsx
index ccf74c4f3..deb1b5bdb 100644
--- a/client/src/mobile/screens/collections/MCollLinksEditor.tsx
+++ b/client/src/mobile/screens/collections/MCollLinksEditor.tsx
@@ -27,6 +27,7 @@ export default function MCollLinksEditor({ links, onChange, t }: MCollLinksEdito
             className={`w-24 flex-none ${rowInput}`}
           />
           <input
+            dir="ltr"
             value={l.url}
             onChange={e => setLink(i, { url: e.target.value })}
             placeholder="https://…"
diff --git a/client/src/mobile/screens/collections/MCollListPickerSheet.tsx b/client/src/mobile/screens/collections/MCollListPickerSheet.tsx
index 3ef0f75ce..1f2311d7c 100644
--- a/client/src/mobile/screens/collections/MCollListPickerSheet.tsx
+++ b/client/src/mobile/screens/collections/MCollListPickerSheet.tsx
@@ -56,7 +56,7 @@ export default function MCollListPickerSheet({ mode, lists, count, onPick, onClo
               className="mb-1 flex w-full items-center gap-[10px] rounded-[13px] border border-[color:var(--m-rowbr)] bg-[color:var(--m-sheet)] px-3 py-[11px] text-start disabled:opacity-60"
             >
               <span className="h-[9px] w-[9px] flex-none rounded-full" style={{ background: list.color || '#6366F1' }} />
-              <span className="min-w-0 flex-1 truncate text-[0.84375rem] font-semibold text-m-ink">{list.name}</span>
+              <span dir="auto" className="min-w-0 flex-1 truncate text-[0.84375rem] font-semibold text-m-ink">{list.name}</span>
               {busyId === list.id
                 ? <Loader2 size={13} className="flex-none animate-spin text-m-faint" />
                 : <span className="font-geist text-[0.6875rem] font-bold text-m-faint">{list.place_count ?? 0}</span>}
diff --git a/client/src/mobile/screens/collections/MCollPlaceRow.tsx b/client/src/mobile/screens/collections/MCollPlaceRow.tsx
index ce8cdc82a..29fada868 100644
--- a/client/src/mobile/screens/collections/MCollPlaceRow.tsx
+++ b/client/src/mobile/screens/collections/MCollPlaceRow.tsx
@@ -59,11 +59,11 @@ export default function MCollPlaceRow({
           {selected ? <Check size={17} strokeWidth={2.4} /> : <TileIcon size={17} strokeWidth={2.2} />}
         </span>
         <span className="min-w-0 flex-1">
-          <span className="block truncate text-[0.78125rem] font-bold text-m-ink">{place.name}</span>
+          <span dir="auto" className="block truncate text-[0.78125rem] font-bold text-m-ink">{place.name}</span>
           {place.address && (
             <span className="mt-[2px] flex items-center gap-[3px] truncate font-geist text-[0.625rem] text-m-muted">
               <MapPin size={9} strokeWidth={2.2} className="flex-none" />
-              <span className="truncate">{place.address}</span>
+              <span dir="auto" className="truncate">{place.address}</span>
             </span>
           )}
         </span>
@@ -84,7 +84,7 @@ export default function MCollPlaceRow({
         {cat && place.category?.name && (
           <span className={pill} style={pillStyle(cat.color)}>
             <TileIcon size={9} strokeWidth={2.6} className="flex-none" />
-            <span className="truncate">{place.category.name}</span>
+            <span dir="auto" className="truncate">{place.category.name}</span>
           </span>
         )}
       </div>
diff --git a/client/src/mobile/screens/collections/MCollPlaceSheet.tsx b/client/src/mobile/screens/collections/MCollPlaceSheet.tsx
index b71bbf063..a4f6f83f5 100644
--- a/client/src/mobile/screens/collections/MCollPlaceSheet.tsx
+++ b/client/src/mobile/screens/collections/MCollPlaceSheet.tsx
@@ -89,7 +89,7 @@ export default function MCollPlaceSheet({
               {held.category?.name && (
                 <span className={HERO_CAT_CHIP}>
                   <MapPin size={9} strokeWidth={2.6} className="flex-none" />
-                  <span className="truncate">{held.category.name}</span>
+                  <span dir="auto" className="truncate">{held.category.name}</span>
                 </span>
               )}
               {/* -me-1 keeps the buttons 14px off the edge, where close has always sat. */}
diff --git a/client/src/mobile/screens/collections/MCollTripPickerSheet.tsx b/client/src/mobile/screens/collections/MCollTripPickerSheet.tsx
index 698cf81c7..8159e376b 100644
--- a/client/src/mobile/screens/collections/MCollTripPickerSheet.tsx
+++ b/client/src/mobile/screens/collections/MCollTripPickerSheet.tsx
@@ -59,7 +59,7 @@ export default function MCollTripPickerSheet({ open, count, onCopy, onClose, t }
                     : <MapPin size={15} strokeWidth={2} />}
                 </span>
                 <span className="min-w-0 flex-1">
-                  <span className="block truncate text-[0.8125rem] font-semibold text-m-ink">{trip.title}</span>
+                  <span dir="auto" className="block truncate text-[0.8125rem] font-semibold text-m-ink">{trip.title}</span>
                   {dateRange(trip) && (
                     <span className="mt-[1px] flex items-center gap-1 truncate font-geist text-[0.6875rem] text-m-muted">
                       <CalendarDays size={11} strokeWidth={2} className="flex-none" /> {dateRange(trip)}
diff --git a/client/src/mobile/screens/collections/MCollections.tsx b/client/src/mobile/screens/collections/MCollections.tsx
index bb271a27e..ae6e2e48c 100644
--- a/client/src/mobile/screens/collections/MCollections.tsx
+++ b/client/src/mobile/screens/collections/MCollections.tsx
@@ -367,7 +367,7 @@ export default function MCollections() {
                           className={`flex w-full items-center gap-[10px] rounded-[11px] p-[10px] text-start ${on ? 'bg-[color:var(--m-ic)]' : ''}`}
                         >
                           <span className="h-[9px] w-[9px] flex-none rounded-full" style={{ background: l.color || '#6366F1' }} />
-                          <span className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold text-m-ink">{l.name}</span>
+                          <span dir="auto" className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold text-m-ink">{l.name}</span>
                           <span className="font-geist text-[0.6875rem] font-bold text-m-faint">{l.count}</span>
                           {on && <Check size={14} strokeWidth={2.6} className="flex-none text-m-ink" />}
                         </button>
diff --git a/client/src/mobile/screens/dashboard/MDashWidgets.tsx b/client/src/mobile/screens/dashboard/MDashWidgets.tsx
index 5cf89cac5..73aaa8132 100644
--- a/client/src/mobile/screens/dashboard/MDashWidgets.tsx
+++ b/client/src/mobile/screens/dashboard/MDashWidgets.tsx
@@ -140,7 +140,7 @@ function MCurrencyWidget(): React.ReactElement {
         </div>
       </div>
       <div className="mt-[9px] font-geist text-[0.65625rem] text-m-muted">
-        {rate != null ? `1 ${from} = ${rate.toFixed(4)} ${to}` : t('dashboard.fx.unavailable')}
+        {rate != null ? <span dir="ltr">{`1 ${from} = ${rate.toFixed(4)} ${to}`}</span> : t('dashboard.fx.unavailable')}
       </div>
     </WidgetPanel>
   )
@@ -195,7 +195,7 @@ function MCollectionsWidget(): React.ReactElement {
             className="mt-[11px] flex w-full items-center rounded-[14px] p-[15px_14px] text-start text-white"
             style={{ background: list.color || entityGradient(list.id) }}
           >
-            <span className="min-w-0 flex-1 truncate text-[0.875rem] font-bold">{list.name}</span>
+            <span dir="auto" className="min-w-0 flex-1 truncate text-[0.875rem] font-bold">{list.name}</span>
             <span className="ms-auto flex flex-none items-center gap-1 rounded-full bg-white/[.22] px-[10px] py-[3px] font-geist text-[0.625rem] font-bold">
               <MapPin size={10} strokeWidth={2.4} />
               {list.place_count ?? 0}
@@ -307,7 +307,7 @@ function MUpcomingWidget({ items }: { items: UpcomingReservation[] }): React.Rea
             </span>
             <div className="min-w-0 flex-1">
               <div className="flex min-w-0 items-center gap-1.5">
-                <span className="truncate text-[0.8125rem] font-semibold">{r.title}</span>
+                <span dir="auto" className="truncate text-[0.8125rem] font-semibold">{r.title}</span>
                 {r.status === 'pending' && (
                   <span className="flex-none rounded-full bg-[color:var(--m-ic)] px-[6px] py-px font-geist text-[0.5625rem] font-bold uppercase tracking-[.08em] text-m-muted">
                     {t('reservations.pending')}
diff --git a/client/src/mobile/screens/dashboard/MDashboard.tsx b/client/src/mobile/screens/dashboard/MDashboard.tsx
index 92df6413d..f766028ad 100644
--- a/client/src/mobile/screens/dashboard/MDashboard.tsx
+++ b/client/src/mobile/screens/dashboard/MDashboard.tsx
@@ -418,10 +418,10 @@ function MSpotlightCard({ trip, t, onOpen, actions }: {
             </span>
           )}
         </span>
-        <div className="mt-[7px] truncate text-[1.4375rem] font-bold">{trip.title}</div>
+        <div dir="auto" className="mt-[7px] truncate text-[1.4375rem] font-bold">{trip.title}</div>
         {ongoing && (
           <div className="relative mb-2 mt-[9px] h-1 rounded-full bg-white/25">
-            <span className="absolute bottom-0 left-0 top-0 rounded-full bg-white" style={{ width: `${progress}%` }} />
+            <span className="absolute bottom-0 start-0 top-0 rounded-full bg-white" style={{ width: `${progress}%` }} />
           </div>
         )}
         <div className={`flex flex-wrap gap-[6px] ${ongoing ? '' : 'mt-[9px]'}`}>
@@ -541,7 +541,7 @@ function MTripGridCard({ trip, locale, badge, pluginBadges, actions, onOpen }: {
       </div>
       <div className="p-[9px_12px_12px]">
         {/* The name has the card's whole width; the dates take the line under it. */}
-        <div className="truncate text-[0.875rem] font-semibold">{trip.title}</div>
+        <div dir="auto" className="truncate text-[0.875rem] font-semibold">{trip.title}</div>
         <span className="mt-[6px] inline-flex max-w-full items-center gap-[6px] rounded-full bg-[color:var(--m-ic)] px-[10px] py-1 font-geist text-[0.6875rem] font-semibold text-m-ink">
           <span className="truncate">{fullDate(trip.start_date, locale) ?? '—'}</span>
           <ArrowRight size={12} strokeWidth={2.2} className="flex-none text-m-faint" />
@@ -572,7 +572,7 @@ function MTripListCard({ trip, locale, t, badge, pluginBadges, actions, onOpen }
         <div className="absolute end-3 top-3 flex gap-[7px]">
           {actions.map(a => <CoverActionBtn key={a.key} action={a} />)}
         </div>
-        <div className="absolute bottom-[14px] inset-x-4 truncate text-[1.625rem] font-extrabold text-white [text-shadow:0_2px_12px_rgba(0,0,0,.4)]">
+        <div dir="auto" className="absolute bottom-[14px] inset-x-4 truncate text-[1.625rem] font-extrabold text-white [text-shadow:0_2px_12px_rgba(0,0,0,.4)]">
           {trip.title}
         </div>
       </div>
diff --git a/client/src/mobile/screens/journey/MJourney.tsx b/client/src/mobile/screens/journey/MJourney.tsx
index 83dc69e47..adf5ed1d0 100644
--- a/client/src/mobile/screens/journey/MJourney.tsx
+++ b/client/src/mobile/screens/journey/MJourney.tsx
@@ -151,7 +151,7 @@ function HeroCard({ journey, onOpen }: { journey: JourneyListItem; onOpen: () =>
             {t('mobileJourney.latestJourney')}
           </span>
         </span>
-        <div className="mt-[7px] truncate text-[1.4375rem] font-bold">{journey.title}</div>
+        <div dir="auto" className="mt-[7px] truncate text-[1.4375rem] font-bold">{journey.title}</div>
         <div className="mt-[9px] flex gap-[6px]">
           <HeroPill icon={<NotebookPen size={10} strokeWidth={2.2} />} label={t('mobileJourney.entriesCount', { count: journey.entry_count ?? 0 })} />
           <HeroPill icon={<Image size={10} strokeWidth={2.2} />} label={t('mobileJourney.photosCount', { count: journey.photo_count ?? 0 })} />
@@ -186,7 +186,7 @@ function GridCard({ journey, onOpen }: { journey: JourneyListItem; onOpen: () =>
     >
       <div className="h-[74px]" style={journeyCoverStyle(journey)} />
       <div className="px-3 pb-[13px] pt-[11px]">
-        <div className="truncate text-[0.875rem] font-extrabold">{journey.title}</div>
+        <div dir="auto" className="truncate text-[0.875rem] font-extrabold">{journey.title}</div>
         {hasStats && (
           <div className="mt-[9px] flex gap-[5px]">
             <span className="inline-flex items-center gap-[3px] rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] font-geist text-[0.5625rem] font-bold text-m-muted">
diff --git a/client/src/mobile/screens/journey/MJourneyEntrySheet.tsx b/client/src/mobile/screens/journey/MJourneyEntrySheet.tsx
index c5bb711cb..85114a86a 100644
--- a/client/src/mobile/screens/journey/MJourneyEntrySheet.tsx
+++ b/client/src/mobile/screens/journey/MJourneyEntrySheet.tsx
@@ -162,9 +162,10 @@ export default function MJourneyEntrySheet({
             name is the one thing that makes an entry findable later, and it is one
             line to type, so it comes first here too. */}
         {readOnly ? (
-          <div className="pb-[10px] pt-1 text-[1.25rem] font-extrabold">{title || t('journey.editor.titlePlaceholder')}</div>
+          <div className="pb-[10px] pt-1 text-[1.25rem] font-extrabold"><bdi>{title || t('journey.editor.titlePlaceholder')}</bdi></div>
         ) : (
           <input
+            dir="auto"
             value={title}
             onChange={e => setTitle(e.target.value)}
             placeholder={t('journey.editor.titlePlaceholder')}
@@ -404,6 +405,7 @@ export default function MJourneyEntrySheet({
         {captureOnly && !readOnly && (
           <textarea
             rows={2}
+            dir="auto"
             value={story}
             onChange={e => setStory(e.target.value)}
             placeholder={t('journey.editor.writeStory')}
@@ -422,6 +424,7 @@ export default function MJourneyEntrySheet({
             <textarea
               ref={storyRef}
               rows={3}
+              dir="auto"
               value={story}
               onChange={e => setStory(e.target.value)}
               placeholder={t('journey.editor.writeStory')}
@@ -547,6 +550,7 @@ export default function MJourneyEntrySheet({
           <div className={`${eyebrow} mb-[5px]`}>{t('journey.editor.location')}</div>
           <div className={`flex items-center gap-2 px-3 py-[10px] ${fieldShell}`}>
             <input
+              dir="auto"
               value={locationQuery || locationName}
               readOnly={readOnly}
               onChange={e => searchLocation(e.target.value)}
@@ -580,8 +584,8 @@ export default function MJourneyEntrySheet({
                 >
                   <MapPin size={13} className="mt-[2px] flex-none text-m-faint" />
                   <span className="min-w-0">
-                    <span className="block truncate text-[0.78125rem] font-semibold">{r.name}</span>
-                    {r.address && <span className="block truncate font-geist text-[0.65625rem] text-m-muted">{r.address}</span>}
+                    <span dir="auto" className="block truncate text-[0.78125rem] font-semibold">{r.name}</span>
+                    {r.address && <span dir="auto" className="block truncate font-geist text-[0.65625rem] text-m-muted">{r.address}</span>}
                   </span>
                 </button>
               ))}
diff --git a/client/src/mobile/screens/journey/MJourneyFeed.tsx b/client/src/mobile/screens/journey/MJourneyFeed.tsx
index c1ffe3fbf..2efefcdaa 100644
--- a/client/src/mobile/screens/journey/MJourneyFeed.tsx
+++ b/client/src/mobile/screens/journey/MJourneyFeed.tsx
@@ -126,7 +126,7 @@ function FeedCard({ entry, color, active, onTap, showMood, showWeather, t }: Fee
           <span
             className={`min-w-0 flex-1 text-body font-extrabold leading-[1.3] text-m-ink ${suggestion ? 'italic text-m-muted' : ''}`}
           >
-            {cardTitle(entry, t)}
+            <bdi>{cardTitle(entry, t)}</bdi>
           </span>
           <FeedMarks entry={entry} showMood={showMood} showWeather={showWeather} />
         </span>
@@ -137,12 +137,12 @@ function FeedCard({ entry, color, active, onTap, showMood, showWeather, t }: Fee
             ) : (
               <MapPin size={11} strokeWidth={2.2} className="flex-none" />
             )}
-            <span className="truncate font-geist text-[length:calc(11px*var(--fs-scale-caption,1))] font-semibold">
+            <span dir="auto" className="truncate font-geist text-[length:calc(11px*var(--fs-scale-caption,1))] font-semibold">
               {place}
             </span>
           </span>
         )}
-        {story && <span className="line-clamp-3 text-caption leading-[1.45] text-m-ink opacity-80">{story}</span>}
+        {story && <span dir="auto" className="line-clamp-3 text-caption leading-[1.45] text-m-ink opacity-80">{story}</span>}
       </span>
     </button>
   );
diff --git a/client/src/mobile/screens/notifications/MNotificationRow.tsx b/client/src/mobile/screens/notifications/MNotificationRow.tsx
index 0e8a6fcf2..40c6ba592 100644
--- a/client/src/mobile/screens/notifications/MNotificationRow.tsx
+++ b/client/src/mobile/screens/notifications/MNotificationRow.tsx
@@ -3,6 +3,7 @@ import { ArrowRight, Bell, Check, Mail, Trash2, X } from 'lucide-react'
 import { useTranslation } from '../../../i18n'
 import type { InAppNotification } from '../../../store/inAppNotificationStore'
 import { compactTime, useNotificationItemActions } from '../../../components/Notifications/useNotificationItemActions'
+import { localizedParams } from '../../../components/Notifications/notificationModel'
 import MChip from '../../components/MChip'
 
 interface MNotificationRowProps {
@@ -15,11 +16,11 @@ interface MNotificationRowProps {
  * render as chips below the text, per-row delete sits in the trailing column.
  */
 export default function MNotificationRow({ notification }: MNotificationRowProps) {
-  const { t } = useTranslation()
+  const { t, locale } = useTranslation()
   const { handleRespond, handleNavigate, markRead, markUnread, deleteNotification } = useNotificationItemActions(notification)
 
   const title = t(notification.title_key, notification.title_params)
-  const body = t(notification.text_key, notification.text_params)
+  const body = t(notification.text_key, localizedParams(notification.text_params, locale))
 
   // Tapping an unread row marks it read; a row that is already read carries no
   // action, so it neither takes focus nor claims a role. It stays a div because
diff --git a/client/src/mobile/screens/settings/MSettingsGeneral.tsx b/client/src/mobile/screens/settings/MSettingsGeneral.tsx
index 75331230e..d0017511b 100644
--- a/client/src/mobile/screens/settings/MSettingsGeneral.tsx
+++ b/client/src/mobile/screens/settings/MSettingsGeneral.tsx
@@ -137,9 +137,10 @@ export default function MSettingsGeneral() {
         <MSetSegments
           value={settings.temperature_unit || 'celsius'}
           onChange={(v) => save('temperature_unit', v)}
+          // The unit names are Latin in every language: isolated, so Arabic keeps "°F Fahrenheit" whole.
           options={[
-            { value: 'celsius', label: '°C Celsius' },
-            { value: 'fahrenheit', label: '°F Fahrenheit' },
+            { value: 'celsius', label: <bdi>°C Celsius</bdi> },
+            { value: 'fahrenheit', label: <bdi>°F Fahrenheit</bdi> },
           ]}
         />
 
@@ -148,8 +149,8 @@ export default function MSettingsGeneral() {
           value={settings.distance_unit || 'metric'}
           onChange={(v) => save('distance_unit', v)}
           options={[
-            { value: 'metric', label: 'km Metric' },
-            { value: 'imperial', label: 'mi Imperial' },
+            { value: 'metric', label: <bdi>km Metric</bdi> },
+            { value: 'imperial', label: <bdi>mi Imperial</bdi> },
           ]}
         />
 
diff --git a/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx b/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
index 3eaeb0adf..3b34d16ac 100644
--- a/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
+++ b/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
@@ -324,7 +324,7 @@ export default function MPlacesBrowser({ planner, shell }: MPlacesBrowserProps)
                         />
                       )}
                       <CatIcon size={12} strokeWidth={2.2} className="flex-none" style={{ color: cat?.color || 'var(--m-muted)' }} />
-                      <span className="truncate text-[0.8125rem] font-semibold text-m-ink">{place.name}</span>
+                      <span dir="auto" className="truncate text-[0.8125rem] font-semibold text-m-ink">{place.name}</span>
                     </span>
                     {sub && (
                       <MarkdownText clamp className="mt-px font-geist text-[0.65625rem] text-m-muted">{sub}</MarkdownText>
diff --git a/client/src/mobile/screens/trip/plan/MPlanTimeline.tsx b/client/src/mobile/screens/trip/plan/MPlanTimeline.tsx
index a2d3aac1b..3a94e1298 100644
--- a/client/src/mobile/screens/trip/plan/MPlanTimeline.tsx
+++ b/client/src/mobile/screens/trip/plan/MPlanTimeline.tsx
@@ -389,7 +389,7 @@ function UpNextCard({ tl, t, onOpen }: {
                 {time}
               </span>
             )}
-            <span className="min-w-0 truncate text-[1.125rem] font-bold">{place?.name}</span>
+            <span dir="auto" className="min-w-0 truncate text-[1.125rem] font-bold">{place?.name}</span>
           </div>
           {sub && <MarkdownText clamp className="mt-[2px] font-geist text-[0.75rem] text-m-muted">{sub}</MarkdownText>}
         </div>
diff --git a/client/src/mobile/screens/trip/plan/MPlanTimelineRows.tsx b/client/src/mobile/screens/trip/plan/MPlanTimelineRows.tsx
index c24f6b4ca..6af04ac27 100644
--- a/client/src/mobile/screens/trip/plan/MPlanTimelineRows.tsx
+++ b/client/src/mobile/screens/trip/plan/MPlanTimelineRows.tsx
@@ -23,6 +23,7 @@ import { WalkLateLine } from '../../../../components/Tours/walk/WalkTransitNote'
 import { TourDayTimeText, TourOverrunLine } from '../../../../components/Tours/TourDayTimeParts'
 import { tourDayEntryOf, type TourOverrun } from '../../../../components/Tours/tourDayTime'
 import type { WalkLate } from '../../../../components/Tours/walk/walkTransit'
+import { flowText } from '../../../../utils/flowText'
 
 /**
  * The five row types of the mobile day timeline (place / manual transport /
@@ -198,7 +199,7 @@ export function PlaceRow({ assignment, fullPlace, tour, linkedReservations, chro
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-1.5">
           {tour ? (chrome.editing && <TourDayRowIcon type={tour.tour_type} size={20} />) : <CatIcon size={12} strokeWidth={2.2} className="flex-none text-m-muted" />}
-          <span className="min-w-0 truncate text-[0.875rem] font-semibold">{place?.name}</span>
+          <span dir="auto" className="min-w-0 truncate text-[0.875rem] font-semibold">{place?.name}</span>
           {bookingLines.length > 0 && (
             <span className="flex flex-none items-center gap-1 rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] text-[0.5625rem] font-bold tracking-[.04em]">
               <Ticket size={10} strokeWidth={2.2} />
@@ -216,7 +217,7 @@ export function PlaceRow({ assignment, fullPlace, tour, linkedReservations, chro
         )}
         {bookingLines.slice(1).map(line => (
           <div key={line.id} className="mt-[2px] flex min-w-0 items-center gap-1.5">
-            <span className="min-w-0 truncate font-geist text-[0.71875rem] text-m-muted">{line.text}</span>
+            <span dir="auto" className="min-w-0 truncate font-geist text-[0.71875rem] text-m-muted">{line.text}</span>
             {line.code && <BlurredCode interactive={false} className={ROW_CODE}>{line.code}</BlurredCode>}
           </div>
         ))}
@@ -284,7 +285,7 @@ export function TransportRow({ res, dayId, chrome, reorder, drag, onOpen }: {
       <div className="flex min-w-0 flex-1 items-center gap-4 rounded-[13px] border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-[11px] py-[7px]">
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-baseline gap-[7px]">
-            <span className="min-w-0 truncate text-[0.875rem] font-semibold">{res.title}</span>
+            <span dir="auto" className="min-w-0 truncate text-[0.875rem] font-semibold">{res.title}</span>
             {time && <span className={TIME_CHIP}>{time}</span>}
           </div>
           {sub && <div className="mt-px truncate font-geist text-[0.71875rem] text-m-muted">{sub}</div>}
@@ -376,7 +377,7 @@ function TransitLegRows({ legs, t }: { legs: TransitLegDisplay[]; t: Translation
                   <div className="flex items-center gap-1.5">
                     <LineBadge leg={leg} className="flex-none" />
                     <span className="truncate text-[0.78125rem] font-bold">
-                      {[leg.from?.name, leg.to?.name].filter(Boolean).join(' → ')}
+                      {flowText([leg.from?.name, leg.to?.name].filter((n): n is string => !!n))}
                     </span>
                   </div>
                   <div className="mt-[2px] font-geist text-[0.625rem] text-m-faint">
@@ -434,7 +435,7 @@ export function TransitRow({ res, transit, dayId, open, chrome, reorder, drag, o
         >
           <div className="flex items-center gap-[7px]">
             <span className="min-w-0 truncate text-[0.84375rem] font-bold">
-              {to ? `${from} → ${to}` : res.title}
+              {to ? flowText([from, to]) : res.title}
             </span>
             {start && (
               <span className="ms-auto flex-none whitespace-nowrap rounded-[6px] bg-[color:var(--m-ic)] px-[6px] py-px font-geist text-[0.6875rem] font-semibold tabular-nums">
@@ -475,8 +476,9 @@ function TravelLine({ seg }: { seg: RouteSegment }) {
       <span className="h-px flex-1 bg-[color:var(--m-rowbr)]" />
       <span className="inline-flex items-center gap-[6px] whitespace-nowrap rounded-full border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-2.5 py-[3px] font-geist text-[0.6875rem] leading-none">
         <Icon size={12} strokeWidth={2.2} className="flex-none text-m-muted" />
-        <span className="font-semibold text-m-ink">{durationText}</span>
-        {seg.distanceText && <span className="text-m-muted">{seg.distanceText}</span>}
+        {/* Each figure in its own direction, so "5 km" does not turn into "km 5" in Arabic. */}
+        <span dir="auto" className="font-semibold text-m-ink">{durationText}</span>
+        {seg.distanceText && <span dir="auto" className="text-m-muted">{seg.distanceText}</span>}
         {/* Extra text a plugin route attached to this leg (e.g. "25 min charge"). */}
         {seg.noteText && (
           <span className="inline-flex items-center gap-[3px] text-m-muted">
@@ -540,7 +542,7 @@ export function HotelConnRow({ seg, name, placement }: {
   const hotel = (
     <div className="flex items-center justify-center gap-[5px] whitespace-nowrap font-geist text-[0.59375rem] font-semibold text-m-muted">
       <BedDouble size={11} strokeWidth={2} className="flex-none" />
-      <span className="min-w-0 truncate">{name}</span>
+      <span dir="auto" className="min-w-0 truncate">{name}</span>
     </div>
   )
   return (
diff --git a/client/src/mobile/screens/trip/sheets/MAccommodationSheet.tsx b/client/src/mobile/screens/trip/sheets/MAccommodationSheet.tsx
index ca0f48937..0a7d84308 100644
--- a/client/src/mobile/screens/trip/sheets/MAccommodationSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MAccommodationSheet.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Check, Hotel, MapPin, X } from 'lucide-react'
+import { ArrowRight, Check, Hotel, MapPin, X } from 'lucide-react'
 import MSheet from '../../../components/MSheet'
 import MIconBtn from '../../../components/MIconBtn'
 import CustomSelect from '../../../../components/shared/CustomSelect'
@@ -140,7 +140,7 @@ export default function MAccommodationSheet({ planner, shell }: MTripSheetsProps
               size="sm"
             />
           </div>
-          <span className="flex-none text-m-faint">→</span>
+          <ArrowRight size={14} strokeWidth={2.2} aria-hidden="true" className="flex-none text-m-faint" />
           <div className="min-w-0 flex-1">
             <CustomSelect
               value={range.end}
@@ -224,8 +224,8 @@ export default function MAccommodationSheet({ planner, shell }: MTripSheetsProps
                     {p.image_url ? <img src={p.image_url} alt="" className="h-full w-full object-cover" /> : <MapPin size={14} className="text-m-faint" />}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <div className="truncate text-[0.8125rem] font-semibold text-m-ink">{p.name}</div>
-                    {p.address && <div className="truncate font-geist text-[0.65625rem] text-m-muted">{p.address}</div>}
+                    <div dir="auto" className="truncate text-[0.8125rem] font-semibold text-m-ink">{p.name}</div>
+                    {p.address && <div dir="auto" className="truncate font-geist text-[0.65625rem] text-m-muted">{p.address}</div>}
                   </div>
                   {sel && (
                     <span className="flex h-[22px] w-[22px] flex-none items-center justify-center rounded-full bg-m-act text-m-actfg">
diff --git a/client/src/mobile/screens/trip/sheets/MBookingFields.tsx b/client/src/mobile/screens/trip/sheets/MBookingFields.tsx
index 471ee7661..cd6ab9caa 100644
--- a/client/src/mobile/screens/trip/sheets/MBookingFields.tsx
+++ b/client/src/mobile/screens/trip/sheets/MBookingFields.tsx
@@ -96,6 +96,7 @@ export function MBookingNotes({
     <>
       <Eyebrow className="mb-[5px] mt-3 uppercase">{t('reservations.notes')}</Eyebrow>
       <textarea
+        dir="auto"
         value={value}
         onChange={(e) => onChange(e.target.value)}
         rows={2}
diff --git a/client/src/mobile/screens/trip/sheets/MCostSheet.tsx b/client/src/mobile/screens/trip/sheets/MCostSheet.tsx
index 6207db9d6..bdcb858b1 100644
--- a/client/src/mobile/screens/trip/sheets/MCostSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MCostSheet.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { Check, ChevronDown, Plus, Trash2, Wallet, Receipt, Paperclip } from 'lucide-react'
+import { ArrowRight, Check, ChevronDown, Plus, Trash2, Wallet, Receipt, Paperclip } from 'lucide-react'
 import MSheet from '../../../components/MSheet'
 import CustomSelect from '../../../../components/shared/CustomSelect'
 import { NumericInput } from '../../../../components/shared/NumericInput'
@@ -184,7 +184,7 @@ export default function MCostSheet({ tripId, base, people, me, editing, prefill,
           <div className="mt-2 flex flex-wrap items-center gap-2 rounded-[12px] border border-[color:var(--m-rowbr)] bg-[color:var(--m-ic)] px-3 py-[9px] text-[0.71875rem] text-m-muted">
             <span>{formatMoney(totalNum, currency, locale)}</span>
             {fx.inTrip != null && <>
-              <span className="text-m-faint">→</span>
+              <ArrowRight size={12} strokeWidth={2.2} aria-hidden="true" className="text-m-faint" />
               <span className={fx.shown == null ? 'font-semibold text-m-ink' : undefined}>{formatMoney(fx.inTrip, tripCur, locale)}</span>
             </>}
             {fx.shown != null && <>
@@ -493,7 +493,7 @@ export default function MCostSheet({ tripId, base, people, me, editing, prefill,
                   className="flex min-w-0 flex-1 items-center gap-2 text-start"
                 >
                   <Receipt size={14} className="flex-none text-m-faint" />
-                  <span className="truncate text-[0.8125rem] font-medium text-m-ink">{r.original_name}</span>
+                  <span dir="auto" className="truncate text-[0.8125rem] font-medium text-m-ink">{r.original_name}</span>
                 </button>
                 <button
                   type="button"
@@ -509,7 +509,7 @@ export default function MCostSheet({ tripId, base, people, me, editing, prefill,
               <div key={idx} className={ROW_CLS}>
                 <div className="flex min-w-0 flex-1 items-center gap-2">
                   <Paperclip size={14} className="flex-none text-m-faint" />
-                  <span className="truncate text-[0.8125rem] font-medium text-m-ink">{file.name}</span>
+                  <span dir="auto" className="truncate text-[0.8125rem] font-medium text-m-ink">{file.name}</span>
                 </div>
                 <button
                   type="button"
diff --git a/client/src/mobile/screens/trip/sheets/MDaySheet.tsx b/client/src/mobile/screens/trip/sheets/MDaySheet.tsx
index 6fe3155fb..0f2d11e00 100644
--- a/client/src/mobile/screens/trip/sheets/MDaySheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MDaySheet.tsx
@@ -415,7 +415,7 @@ export default function MDaySheet({ planner, shell }: MTripSheetsProps) {
                         className={`flex w-full items-center gap-[10px] rounded-[13px] px-[11px] py-[9px] text-start ${INNER_CLS}`}
                       >
                         <ResIcon size={15} strokeWidth={2} className="flex-none text-m-muted" />
-                        <span className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{r.title}</span>
+                        <span dir="auto" className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{r.title}</span>
                         {(startTime || endTime) && (
                           <span className="flex-none font-geist text-[0.6875rem] tabular-nums text-m-muted">
                             {startTime ? displayTime(startTime, locale, timeFormat) : ''}
@@ -512,9 +512,9 @@ export default function MDaySheet({ planner, shell }: MTripSheetsProps) {
                           </div>
                         )}
                         <div className="min-w-0 flex-1">
-                          <div className="truncate text-[0.875rem] font-semibold">{acc.place_name}</div>
+                          <div dir="auto" className="truncate text-[0.875rem] font-semibold">{acc.place_name}</div>
                           {acc.place_address && (
-                            <div className="truncate font-geist text-[0.65625rem] text-m-muted">{acc.place_address}</div>
+                            <div dir="auto" className="truncate font-geist text-[0.65625rem] text-m-muted">{acc.place_address}</div>
                           )}
                         </div>
                         </button>
diff --git a/client/src/mobile/screens/trip/sheets/MLinkedCosts.tsx b/client/src/mobile/screens/trip/sheets/MLinkedCosts.tsx
index ef4f94198..302bdff0e 100644
--- a/client/src/mobile/screens/trip/sheets/MLinkedCosts.tsx
+++ b/client/src/mobile/screens/trip/sheets/MLinkedCosts.tsx
@@ -70,7 +70,7 @@ export default function MLinkedCosts({ reservationId = null, placeId = null, hin
                     <Icon size={15} strokeWidth={2} />
                   </span>
                   <span className="min-w-0 flex-1">
-                    <span className="block truncate text-[0.8125rem] font-semibold text-m-ink">{item.name}</span>
+                    <span dir="auto" className="block truncate text-[0.8125rem] font-semibold text-m-ink">{item.name}</span>
                     <span className="block truncate font-geist text-[0.65625rem] text-m-faint">{t(meta.labelKey)}</span>
                   </span>
                   <span className="flex-none font-geist text-[0.8125rem] font-semibold tabular-nums text-m-ink">{money(item)}</span>
@@ -122,7 +122,7 @@ export default function MLinkedCosts({ reservationId = null, placeId = null, hin
                     onClick={async () => { await link(item); setPicking(false); setQuery('') }}
                     className="flex w-full items-center gap-[10px] rounded-[10px] px-[10px] py-[8px] text-start active:bg-[color:var(--m-ic)]">
                     <Icon size={14} strokeWidth={2} className="flex-none" style={{ color: meta.color }} />
-                    <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-medium text-m-ink">{item.name}</span>
+                    <span dir="auto" className="min-w-0 flex-1 truncate text-[0.78125rem] font-medium text-m-ink">{item.name}</span>
                     <span className="flex-none font-geist text-[0.71875rem] tabular-nums text-m-muted">{money(item)}</span>
                     <ChevronRight size={13} strokeWidth={2} className="flex-none text-m-faint" />
                   </button>
diff --git a/client/src/mobile/screens/trip/sheets/MPlaceEditSheet.tsx b/client/src/mobile/screens/trip/sheets/MPlaceEditSheet.tsx
index 769fcee30..f1977b094 100644
--- a/client/src/mobile/screens/trip/sheets/MPlaceEditSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MPlaceEditSheet.tsx
@@ -362,6 +362,7 @@ export default function MPlaceEditSheet({ planner, onOpenExpense }: MPlaceEditSh
         <Eyebrow className="mb-[5px] mt-3 uppercase">{t('places.formWebsite')}</Eyebrow>
         <input
           type="url"
+          dir="ltr"
           value={form.website}
           onChange={e => handleChange('website', e.target.value)}
           placeholder="https://"
diff --git a/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx b/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
index a9cf3b8e4..0344bebf4 100644
--- a/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
@@ -214,7 +214,7 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
               </div>
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-1.5">
-                  <span className="min-w-0 truncate text-[1rem] font-bold leading-snug">{place.name}</span>
+                  <span dir="auto" className="min-w-0 truncate text-[1rem] font-bold leading-snug">{place.name}</span>
                   {/* Accepted out of the traveller's own recordings — the same
                       mark the desktop inspector carries. */}
                   {place.source === 'dawarich' && (
@@ -224,14 +224,14 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
                   )}
                 </div>
                 {place.address && (
-                  <div className="mt-[2px] font-geist text-[0.6875rem] leading-[1.4] text-m-muted">{place.address}</div>
+                  <div className="mt-[2px] font-geist text-[0.6875rem] leading-[1.4] text-m-muted"><bdi>{place.address}</bdi></div>
                 )}
                 {/* The category under the name and address, as wide as its name:
                     squeezed under the photo it was cut to "Shoppi…". */}
                 {category && (
                   <span className="mt-[6px] inline-flex max-w-full items-center gap-1 rounded-full border border-[color:var(--m-faint)] px-2 py-[2px] font-geist text-[0.625rem] font-semibold text-m-muted">
                     <CatIcon size={10} strokeWidth={2} className="flex-none" />
-                    <span className="truncate">{category.name}</span>
+                    <span dir="auto" className="truncate">{category.name}</span>
                   </span>
                 )}
               </div>
@@ -420,7 +420,7 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
                         className="h-2 w-2 flex-none rounded-full"
                         style={{ background: res.status === 'confirmed' ? 'var(--m-st-confirmed)' : 'var(--m-st-pending)' }}
                       />
-                      <span className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{res.title}</span>
+                      <span dir="auto" className="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{res.title}</span>
                       <span className="flex-none font-geist text-[0.65625rem] text-m-muted">
                         {res.status === 'confirmed' ? t('reservations.confirmed') : t('reservations.pending')}
                       </span>
@@ -477,7 +477,7 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
                             ? <img src={m.avatar_url || avatarSrc(m.avatar)!} alt="" className="h-full w-full object-cover" />
                             : m.username?.[0]?.toUpperCase()}
                         </span>
-                        <span className="min-w-0 flex-1 truncate">{m.username}</span>
+                        <span dir="auto" className="min-w-0 flex-1 truncate">{m.username}</span>
                       </button>
                     ))}
                   </div>
@@ -522,7 +522,7 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
                       onClick={() => openFile(f.url, f.original_name)}
                       className="flex w-full items-center gap-2 rounded-[10px] bg-[color:var(--m-ic)] px-[10px] py-[7px] text-start"
                     >
-                      <span className="min-w-0 flex-1 truncate text-[0.75rem] font-medium">{f.original_name}</span>
+                      <span dir="auto" className="min-w-0 flex-1 truncate text-[0.75rem] font-medium">{f.original_name}</span>
                       <ExternalLink size={11} strokeWidth={2} className="flex-none text-m-faint" />
                     </button>
                   ))}
diff --git a/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx b/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
index eb34ba27a..d63da671f 100644
--- a/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MReservationSheet.tsx
@@ -218,6 +218,7 @@ export default function MReservationSheet({ planner, onOpenExpense }: MReservati
         <Eyebrow className="mb-[5px] mt-3 uppercase">{t('reservations.titleLabel')} *</Eyebrow>
         <input
           type="text"
+          dir="auto"
           value={form.title}
           onChange={e => set('title', e.target.value)}
           placeholder={t('reservations.titlePlaceholder')}
@@ -363,7 +364,8 @@ export default function MReservationSheet({ planner, onOpenExpense }: MReservati
 
         {/* LINK */}
         <Eyebrow className="mb-[5px] mt-3 uppercase">{t('reservations.urlLabel')}</Eyebrow>
-        <div className="relative">
+        {/* An address reads left to right in every language, icon and all. */}
+        <div className="relative" dir="ltr">
           <Link2 size={15} className="pointer-events-none absolute start-3 top-1/2 -translate-y-1/2 text-m-faint" />
           <input
             type="url"
diff --git a/client/src/mobile/screens/trip/sheets/MTransportSheet.tsx b/client/src/mobile/screens/trip/sheets/MTransportSheet.tsx
index 620ff4899..d98b45b79 100644
--- a/client/src/mobile/screens/trip/sheets/MTransportSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MTransportSheet.tsx
@@ -19,6 +19,7 @@ import { useBookingLink } from '../../../../hooks/useBookingLink'
 import { bookingFacts, stayStats } from '../../../../components/Planner/bookings/bookingFacts'
 import { parseMeta } from '../../../../components/Planner/bookings/bookingsModel'
 import { Eyebrow, INNER_CLS, StatBox, TileHeader, displayTime } from './MTripSheetUi'
+import { flowText } from '../../../../utils/flowText'
 
 interface TransportSheetPayload {
   reservationId?: number
@@ -147,8 +148,8 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
   if (airline) subParts.push(airline)
   if (flightNumber) subParts.push(flightNumber)
   if (trainNumber) subParts.push(trainNumber)
-  if (leg && (leg.from || leg.to)) subParts.push([leg.from, leg.to].filter(Boolean).join(' → '))
-  else if (from?.name && to?.name) subParts.push(`${from.name} → ${to.name}`)
+  if (leg && (leg.from || leg.to)) subParts.push(flowText([leg.from, leg.to].filter((n): n is string => !!n)))
+  else if (from?.name && to?.name) subParts.push(flowText([from.name, to.name]))
   else if (date) subParts.push(bookingDayLabel(date, locale))
 
   // A flight's legs carry no seat or platform of their own, so those stay the booking's.
@@ -210,7 +211,7 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
       <div className="flex-none px-[18px] pt-4">
         <TileHeader
           icon={<ResIcon size={19} strokeWidth={1.8} />}
-          title={<span className="truncate text-[1rem]">{res.title}</span>}
+          title={<span dir="auto" className="truncate text-[1rem]">{res.title}</span>}
           sub={subParts.length > 0 ? subParts.join(' · ') : undefined}
           onClose={shell.closeSheet}
           closeLabel={t('common.close')}
@@ -266,9 +267,9 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
                         <span className="text-m-muted">{t('transit.walkTo', { name: leg.to?.name || '' })}</span>
                       ) : (
                         <>
-                          <span className="truncate">{leg.from?.name}</span>
+                          <span dir="auto" className="truncate">{leg.from?.name}</span>
                           <ArrowRight size={10} strokeWidth={2} className="flex-none text-m-faint" />
-                          <span className="truncate">{leg.to?.name}</span>
+                          <span dir="auto" className="truncate">{leg.to?.name}</span>
                         </>
                       )}
                     </div>
@@ -358,7 +359,7 @@ export default function MTransportSheet({ planner, shell }: MTripSheetsProps) {
               className={`flex max-w-[150px] items-center gap-[5px] rounded-full px-3 py-[7px] text-[0.75rem] font-semibold ${INNER_CLS}`}
             >
               <Paperclip size={13} strokeWidth={2} className="flex-none" />
-              <span className="truncate">{f.original_name}</span>
+              <span dir="auto" className="truncate">{f.original_name}</span>
             </button>
           ))}
           {canEditDays && (
diff --git a/client/src/mobile/screens/trip/sheets/PlFileAttach.tsx b/client/src/mobile/screens/trip/sheets/PlFileAttach.tsx
index 43d13b792..c73a484b7 100644
--- a/client/src/mobile/screens/trip/sheets/PlFileAttach.tsx
+++ b/client/src/mobile/screens/trip/sheets/PlFileAttach.tsx
@@ -86,7 +86,7 @@ export default function PlFileAttach({ planner, files, onAdd, onRemove, hideHint
               className={ITEM_CLS}
             >
               <FileText size={11} strokeWidth={2} className="flex-none text-m-faint" />
-              <span className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] text-m-ink">{file.original_name}</span>
+              <span dir="auto" className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] text-m-ink">{file.original_name}</span>
               <Link2 size={12} strokeWidth={2.2} className="flex-none text-m-faint" />
             </button>
           ))}
@@ -99,14 +99,14 @@ export default function PlFileAttach({ planner, files, onAdd, onRemove, hideHint
               {isWalletPass(file.mime_type, file.original_name)
                 ? <Wallet size={11} strokeWidth={2} className="flex-none text-m-ink" />
                 : <FileText size={11} strokeWidth={2} className="flex-none text-m-faint" />}
-              <span className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] font-medium text-m-ink">{file.original_name}</span>
+              <span dir="auto" className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] font-medium text-m-ink">{file.original_name}</span>
               <ExternalLink size={11} strokeWidth={2} className="flex-none text-m-faint" />
             </button>
           ))}
           {files.map((file, idx) => (
             <div key={`${file.name}-${idx}`} className={ITEM_CLS}>
               <Paperclip size={11} strokeWidth={2} className="flex-none text-m-faint" />
-              <span className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] text-m-muted">{file.name}</span>
+              <span dir="auto" className="min-w-0 flex-1 truncate font-geist text-[0.6875rem] text-m-muted">{file.name}</span>
               <button
                 type="button"
                 onClick={() => onRemove(idx)}
diff --git a/client/src/mobile/screens/trip/sheets/PlPlaceSearch.tsx b/client/src/mobile/screens/trip/sheets/PlPlaceSearch.tsx
index 3271a8e20..008503278 100644
--- a/client/src/mobile/screens/trip/sheets/PlPlaceSearch.tsx
+++ b/client/src/mobile/screens/trip/sheets/PlPlaceSearch.tsx
@@ -136,9 +136,9 @@ export default function PlPlaceSearch({ planner, locationBias, onPick, onSuggest
             >
               <div className="flex items-center gap-2">
                 <div className="min-w-0 flex-1">
-                  <div className="truncate text-[0.8125rem] font-semibold text-m-ink">{s.mainText}</div>
+                  <div dir="auto" className="truncate text-[0.8125rem] font-semibold text-m-ink">{s.mainText}</div>
                   {s.secondaryText && (
-                    <div className="truncate font-geist text-[0.65625rem] text-m-muted">{s.secondaryText}</div>
+                    <div dir="auto" className="truncate font-geist text-[0.65625rem] text-m-muted">{s.secondaryText}</div>
                   )}
                 </div>
                 <SourceMark label={sourceLabel(s, acSource)} />
@@ -159,8 +159,8 @@ export default function PlPlaceSearch({ planner, locationBias, onPick, onSuggest
             >
               <div className="flex items-center gap-2">
                 <div className="min-w-0 flex-1">
-                  <div className="truncate text-[0.8125rem] font-semibold text-m-ink">{String(result.name ?? '')}</div>
-                  <div className="truncate font-geist text-[0.65625rem] text-m-muted">{String(result.address ?? '')}</div>
+                  <div dir="auto" className="truncate text-[0.8125rem] font-semibold text-m-ink">{String(result.name ?? '')}</div>
+                  <div dir="auto" className="truncate font-geist text-[0.65625rem] text-m-muted">{String(result.address ?? '')}</div>
                 </div>
                 <SourceMark label={sourceLabel(result, searchSource)} />
               </div>
diff --git a/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx b/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
index b2f769fc9..8c53e39a5 100644
--- a/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
@@ -172,7 +172,7 @@ function BookingCard({ res, planner, canEdit, compact }: {
             {res.location && (
               <div className="mt-2 flex items-center gap-[6px] rounded-[10px] border border-[color:var(--m-rowbr)] bg-m-card px-[10px] py-[7px]">
                 <MapPin size={12} strokeWidth={2} className="flex-none text-m-muted" />
-                <span className="truncate text-[0.71875rem] font-semibold text-m-ink">{res.location}</span>
+                <span dir="auto" className="truncate text-[0.71875rem] font-semibold text-m-ink">{res.location}</span>
               </div>
             )}
 
diff --git a/client/src/mobile/screens/trip/tabs/MCollabChat.tsx b/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
index 3e421189b..fe243d3f2 100644
--- a/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCollabChat.tsx
@@ -182,6 +182,7 @@ export default function MCollabChat({ planner }: MCollabChatProps) {
             </button>
             <textarea
               ref={textareaRef}
+              dir="auto"
               rows={1}
               value={text}
               onChange={handleTextChange}
@@ -333,10 +334,10 @@ function ChatBubbleRow({ msg, own, showHeader, isLastInGroup, marginTop, is12h,
               {hasReply && (
                 <div className="mb-1 rounded-[10px] bg-[color:var(--m-card)] px-[10px] py-[5px]">
                   <div className="font-geist text-[0.625rem] font-bold opacity-70">{msg.reply_username}</div>
-                  <div className="line-clamp-2 text-[0.71875rem] opacity-80">{msg.reply_text?.slice(0, 80)}</div>
+                  <div dir="auto" className="line-clamp-2 text-[0.71875rem] opacity-80">{msg.reply_text?.slice(0, 80)}</div>
                 </div>
               )}
-              <span className="whitespace-pre-wrap break-words">{msg.text}</span>
+              <span dir="auto" className="whitespace-pre-wrap break-words">{msg.text}</span>
               {msg.attachments?.map(att => (
                 <img key={att.id} src={att.url} alt={att.original_name || ''} className="mt-2 max-h-52 w-full rounded-[10px] object-cover" />
               ))}
diff --git a/client/src/mobile/screens/trip/tabs/MCollabNotes.tsx b/client/src/mobile/screens/trip/tabs/MCollabNotes.tsx
index 604d6587d..10707a6ad 100644
--- a/client/src/mobile/screens/trip/tabs/MCollabNotes.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCollabNotes.tsx
@@ -282,7 +282,7 @@ function NoteCardRow({ note, color, canEdit, onTap, onTogglePin, onDelete, t }:
       <div className="flex items-center gap-[7px] px-3 py-[10px]" style={{ background: `${color}0d` }}>
         {!!note.pinned && <Pin size={11} strokeWidth={2.4} style={{ color }} className="flex-none" />}
         <button type="button" onClick={onTap} className="flex min-w-0 flex-1 items-center gap-[7px] text-start">
-          <span className="min-w-0 flex-1 truncate text-[0.8125rem] font-bold text-m-ink">{note.title}</span>
+          <span dir="auto" className="min-w-0 flex-1 truncate text-[0.8125rem] font-bold text-m-ink">{note.title}</span>
           {note.category && (
             <span
               className="flex-none rounded-full px-2 py-[2px] font-geist text-[0.5625rem] font-bold uppercase tracking-[.03em]"
@@ -335,7 +335,7 @@ function NoteCardRow({ note, color, canEdit, onTap, onTogglePin, onDelete, t }:
           <span className="flex h-4 w-4 flex-none items-center justify-center rounded-full bg-m-card font-geist text-[0.5rem] font-bold text-m-muted">
             {initial}
           </span>
-          <span className="min-w-0 flex-1 truncate font-geist text-[0.625rem] text-m-faint">{note.username}</span>
+          <span dir="auto" className="min-w-0 flex-1 truncate font-geist text-[0.625rem] text-m-faint">{note.username}</span>
           {note.attachments.length > 0 && (
             <span className="flex flex-none items-center gap-[3px] font-geist text-[0.625rem] font-semibold text-m-faint">
               <Paperclip size={10} strokeWidth={2.2} />
@@ -435,6 +435,7 @@ function NoteFormSheet({ open, target, categories, colorMap, canUploadFiles, onC
         <Eyebrow className="mb-[5px] mt-2 uppercase">{t('common.title')} *</Eyebrow>
         <input
           type="text"
+          dir="auto"
           value={title}
           onChange={e => setTitle(e.target.value)}
           maxLength={200}
@@ -444,6 +445,7 @@ function NoteFormSheet({ open, target, categories, colorMap, canUploadFiles, onC
 
         <Eyebrow className="mb-[5px] mt-3 uppercase">{t('collab.notes.content')}</Eyebrow>
         <textarea
+          dir="auto"
           value={content}
           onChange={e => setContent(e.target.value)}
           rows={5}
@@ -506,6 +508,7 @@ function NoteFormSheet({ open, target, categories, colorMap, canUploadFiles, onC
         <input
           type="url"
           inputMode="url"
+          dir="ltr"
           value={website}
           onChange={e => setWebsite(e.target.value)}
           placeholder={t('collab.notes.websitePlaceholder')}
diff --git a/client/src/mobile/screens/trip/tabs/MCollabPolls.tsx b/client/src/mobile/screens/trip/tabs/MCollabPolls.tsx
index 54c77022b..c6e32ff6c 100644
--- a/client/src/mobile/screens/trip/tabs/MCollabPolls.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCollabPolls.tsx
@@ -265,7 +265,7 @@ function PollCardRow({ poll, canEdit, currentUserId, t, onVote, onClosePoll, onD
               onClick={() => onVote(poll.id, idx)}
               className="relative flex items-start gap-[8px] overflow-hidden rounded-[10px] bg-m-card px-[12px] py-[10px] text-start disabled:cursor-default"
             >
-              <span className="absolute inset-y-0 left-0" style={{ width: `${pct}%`, background: fillTint }} />
+              <span className="absolute inset-y-0 start-0" style={{ width: `${pct}%`, background: fillTint }} />
               <span
                 className={`relative flex h-5 w-5 flex-none items-center justify-center border-2 ${
                   poll.multiple_choice ? 'rounded-[6px]' : 'rounded-full'
@@ -276,7 +276,7 @@ function PollCardRow({ poll, canEdit, currentUserId, t, onVote, onClosePoll, onD
               </span>
               {/* No truncate: long or multiline options wrap fully (#2177) */}
               <span className={`relative min-w-0 flex-1 whitespace-pre-wrap break-words text-[0.8125rem] [overflow-wrap:anywhere] ${myVote || isWinner ? 'font-bold' : 'font-medium'} text-m-ink`}>
-                {opt.text}
+                <bdi>{opt.text}</bdi>
               </span>
               {(voted || closed) && count > 0 && (
                 <span className="relative flex flex-none [&>*+*]:-ms-1">
diff --git a/client/src/mobile/screens/trip/tabs/MCostsTab.tsx b/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
index 3dc64951e..29db6f6c2 100644
--- a/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MCostsTab.tsx
@@ -6,6 +6,7 @@ import {
 import MDancingTrek from '../../../components/MDancingTrek'
 import { useTranslation } from '../../../../i18n'
 import { formatMoney } from '../../../../utils/formatters'
+import { flowText } from '../../../../utils/flowText'
 import { openFile } from '../../../../utils/fileDownload'
 import MCostSheet from '../sheets/MCostSheet'
 import { ReceiptPreviewModal } from '../../../../components/Budget/ReceiptPreviewModal'
@@ -227,10 +228,10 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
               <div className="mt-[6px]">
                 {flows.map((f, i) => (
                   <div key={i} className="flex items-center gap-2 border-b border-[color:var(--m-rowbr)] py-2 last:border-b-0">
-                    <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(f.from.user_id)}</span>
+                    <span dir="auto" className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(f.from.user_id)}</span>
                     <ArrowRight size={12} strokeWidth={2.2} className="flex-none text-m-faint" />
-                    <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(f.to.user_id)}</span>
-                    <span className="ms-auto flex-none font-geist text-[0.78125rem] font-extrabold tabular-nums text-m-ink">{formatMoney(f.amount, base, locale)}</span>
+                    <span dir="auto" className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(f.to.user_id)}</span>
+                    <span dir="ltr" className="ms-auto flex-none font-geist text-[0.78125rem] font-extrabold tabular-nums text-m-ink">{formatMoney(f.amount, base, locale)}</span>
                   </div>
                 ))}
               </div>
@@ -245,7 +246,7 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
                 <div key={p.id} className="flex items-center gap-[9px] border-b border-[color:var(--m-rowbr)] py-[7px] last:border-b-0">
                   <MemberAvatar name={p.username} avatarUrl={p.avatar_url} variant="neutral" size={24} />
                   <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{p.id === me ? t('costs.you') : p.username}</span>
-                  <span className="ms-auto flex-none font-geist text-[0.75rem] font-extrabold tabular-nums" style={{ color: pos ? STATUS_COLOR.confirmed : neg ? STATUS_COLOR.danger : 'var(--m-faint)' }}>
+                  <span dir="ltr" className="ms-auto flex-none font-geist text-[0.75rem] font-extrabold tabular-nums" style={{ color: pos ? STATUS_COLOR.confirmed : neg ? STATUS_COLOR.danger : 'var(--m-faint)' }}>
                     {pos ? '+' : neg ? '−' : ''}
                     {formatMoney(Math.abs(balance), base, locale)}
                   </span>
@@ -273,8 +274,8 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
                 className="flex w-full items-center gap-[9px] py-[7px] text-start font-[inherit]"
               >
                 <MemberAvatar name={p.username} avatarUrl={p.avatar_url} variant="neutral" size={24} />
-                <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(p.id)}</span>
-                <span className="ms-auto flex-none font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">{formatMoney(row.final, base, locale)}</span>
+                <span dir="auto" className="min-w-0 flex-1 truncate text-[0.78125rem] font-semibold text-m-ink">{personName(p.id)}</span>
+                <span dir="ltr" className="ms-auto flex-none font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">{formatMoney(row.final, base, locale)}</span>
                 {open
                   ? <ChevronUp size={13} strokeWidth={2.2} className="flex-none text-m-faint" />
                   : <ChevronDown size={13} strokeWidth={2.2} className="flex-none text-m-faint" />}
@@ -300,7 +301,7 @@ export default function MCostsTab({ planner, shell }: MTabScreenProps) {
                 <div className="flex items-center gap-[7px]">
                   <span className="h-2 w-2 flex-none rounded-full" style={{ background: meta.color }} />
                   <span className="min-w-0 flex-1 truncate font-geist text-[0.65625rem] font-semibold text-m-muted">{t(meta.labelKey)}</span>
-                  <span className="ms-auto flex-none font-geist text-[0.65625rem] font-bold tabular-nums text-m-ink">{formatMoney(c.amount, base, locale)}</span>
+                  <span dir="ltr" className="ms-auto flex-none font-geist text-[0.65625rem] font-bold tabular-nums text-m-ink">{formatMoney(c.amount, base, locale)}</span>
                 </div>
                 <div className="mt-1 h-1 overflow-hidden rounded-full bg-[color:var(--m-ic)]">
                   <span className="block h-full rounded-full" style={{ width: `${c.widthPct}%`, background: meta.color }} />
@@ -603,7 +604,7 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
         <div className="flex items-center gap-[10px]">
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-1.5 min-w-0">
-              <span className="truncate text-[0.8125rem] font-bold text-m-ink">{item.name}</span>
+              <span dir="auto" className="truncate text-[0.8125rem] font-bold text-m-ink">{item.name}</span>
               {(item.receipts || []).length > 0 && (
                 <button
                   type="button"
@@ -620,7 +621,7 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
               )}
             </div>
             {line && (
-              <div className="mt-[1px] truncate font-geist text-[0.59375rem] text-m-faint">
+              <div dir="auto" className="mt-[1px] truncate font-geist text-[0.59375rem] text-m-faint">
                 {formatMoney(line.entered.amount, line.entered.currency, locale)} {'→'} {formatMoney(line.into.amount, line.into.currency, locale)}
               </div>
             )}
@@ -638,7 +639,7 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
                     }`}
                   >
                     <MemberAvatar name={m.username} avatarUrl={m.avatar_url} variant="accent" size={14} />
-                    <span className="font-geist text-[0.5625rem] font-bold tabular-nums text-m-ink">
+                    <span dir="ltr" className="font-geist text-[0.5625rem] font-bold tabular-nums text-m-ink">
                       {formatMoney(memberShareOf(item, m.user_id, ctx), base, locale)}
                     </span>
                   </button>
@@ -646,7 +647,7 @@ function ExpenseRow({ item, ctx, base, locale, t, canEdit, onEdit, onDelete, onT
               </div>
             )}
           </div>
-          <span className="flex-none rounded-full bg-[color:var(--m-ic)] px-[11px] py-1 font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">
+          <span dir="ltr" className="flex-none rounded-full bg-[color:var(--m-ic)] px-[11px] py-1 font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">
             {formatMoney(total, base, locale)}
           </span>
         </div>
@@ -716,7 +717,7 @@ function PaymentRow({ settlement, ctx, base, locale, t, personName, canEdit, onE
   // A transfer without a currency was entered in the display currency, not the trip's.
   const amount = paymentAmount(settlement, ctx)
   const line = paymentLineOf(settlement, ctx, amount)
-  const who = `${personName(settlement.from_user_id)} → ${personName(settlement.to_user_id)}`
+  const who = flowText([personName(settlement.from_user_id), personName(settlement.to_user_id)])
   return (
     <div className="mt-2 flex items-center gap-[6px]">
       <div className="relative min-w-0 flex-1 rounded-2xl border border-[color:var(--m-rowbr)] bg-m-card px-3 py-[12px]">
@@ -728,12 +729,12 @@ function PaymentRow({ settlement, ctx, base, locale, t, personName, canEdit, onE
             <div className="truncate text-[0.8125rem] font-bold text-m-ink">{t('costs.payment')}</div>
             <div className="truncate font-geist text-[0.65625rem] text-m-faint">{who}</div>
             {line && (
-              <div className="mt-[1px] truncate font-geist text-[0.59375rem] text-m-faint">
+              <div dir="auto" className="mt-[1px] truncate font-geist text-[0.59375rem] text-m-faint">
                 {formatMoney(line.entered.amount, line.entered.currency, locale)} {'→'} {formatMoney(line.into.amount, line.into.currency, locale)}
               </div>
             )}
           </div>
-          <span className="flex-none rounded-full bg-[color:var(--m-ic)] px-[11px] py-1 font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">
+          <span dir="ltr" className="flex-none rounded-full bg-[color:var(--m-ic)] px-[11px] py-1 font-geist text-[0.75rem] font-extrabold tabular-nums text-m-ink">
             {formatMoney(amount, base, locale)}
           </span>
         </div>
@@ -771,7 +772,7 @@ function FinalBudgetBreakdown({ row, items, ctx, base, locale, t, personName }:
 }) {
   const signed = (v: number) => (v < 0 ? '−' : '+') + formatMoney(Math.abs(v), base, locale)
   const { fronted, moved, outstanding } = finalBudgetSources(row, items)
-  const transfer = (fromId: number, toId: number) => `${personName(fromId)} → ${personName(toId)}`
+  const transfer = (fromId: number, toId: number) => flowText([personName(fromId), personName(toId)])
   // Beside a converted row's name, what was entered, as the list above names it (#2525).
   const nameOf = (itemId: number, name: string, shown: number) => {
     const e = items.find(i => i.id === itemId)
@@ -781,7 +782,7 @@ function FinalBudgetBreakdown({ row, items, ctx, base, locale, t, personName }:
   const line = (key: string, label: string, value: string) => (
     <div key={key} className="flex items-baseline gap-2 py-[2px] font-geist text-[0.6875rem]">
       <span className="min-w-0 flex-1 truncate text-m-muted">{label}</span>
-      <span className="flex-none font-semibold tabular-nums text-m-ink">{value}</span>
+      <span dir="ltr" className="flex-none font-semibold tabular-nums text-m-ink">{value}</span>
     </div>
   )
   // Capped and scrollable so a long trip's list can't push the page away.
diff --git a/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx b/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
index b6c177a0d..21cc34156 100644
--- a/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFileLightbox.tsx
@@ -97,7 +97,8 @@ export default function MFileLightbox({ files, index, onIndexChange, onClose, t
             aria-label={t('mobileTrip.filesPrev')}
             className="absolute left-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/80"
           >
-            <ChevronLeft size={22} strokeWidth={2} />
+            {/* The buttons sit on physical sides, so their arrows stay put in Arabic. */}
+            <ChevronLeft size={22} strokeWidth={2} className="rtl:scale-x-100" />
           </button>
         )}
         {fileIsVideo ? (
@@ -124,7 +125,7 @@ export default function MFileLightbox({ files, index, onIndexChange, onClose, t
             aria-label={t('mobileTrip.filesNext')}
             className="absolute right-3 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/80"
           >
-            <ChevronRight size={22} strokeWidth={2} />
+            <ChevronRight size={22} strokeWidth={2} className="rtl:scale-x-100" />
           </button>
         )}
       </div>
diff --git a/client/src/mobile/screens/trip/tabs/MFileMenuSheet.tsx b/client/src/mobile/screens/trip/tabs/MFileMenuSheet.tsx
index c554799d8..041484289 100644
--- a/client/src/mobile/screens/trip/tabs/MFileMenuSheet.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFileMenuSheet.tsx
@@ -78,7 +78,7 @@ export default function MFileMenuSheet({ planner, file, onClose, onOpenLinks }:
         <div className="flex-none px-[18px] pt-4">
           <TileHeader
             icon={<TypeIcon size={19} strokeWidth={1.8} style={{ color: meta.color }} />}
-            title={<span className="truncate">{shown.original_name}</span>}
+            title={<span dir="auto" className="truncate">{shown.original_name}</span>}
             sub={[formatSize(shown.file_size), formatFileDate(shown.created_at, locale)].filter(Boolean).join(' · ')}
             onClose={onClose}
             closeLabel={t('common.close')}
diff --git a/client/src/mobile/screens/trip/tabs/MFileTrashSheet.tsx b/client/src/mobile/screens/trip/tabs/MFileTrashSheet.tsx
index 6eb1fa988..e342e7517 100644
--- a/client/src/mobile/screens/trip/tabs/MFileTrashSheet.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFileTrashSheet.tsx
@@ -92,7 +92,7 @@ export default function MFileTrashSheet({ planner, open, onClose }: MFileTrashSh
                       <TypeIcon size={15} strokeWidth={2} />
                     </span>
                     <div className="min-w-0 flex-1">
-                      <div className="truncate text-[0.78125rem] font-semibold text-m-ink">{file.original_name}</div>
+                      <div dir="auto" className="truncate text-[0.78125rem] font-semibold text-m-ink">{file.original_name}</div>
                       <div className="mt-[2px] font-geist text-[0.625rem] text-m-faint">
                         {[formatSize(file.file_size), formatFileDate(file.created_at, locale)].filter(Boolean).join(' · ')}
                       </div>
diff --git a/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx b/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
index 4857d4d70..6ec979ebe 100644
--- a/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
@@ -118,7 +118,7 @@ export function FileTile({ file, selected, canStar, onPick, onStar, onMenu, t }:
           )}
         </span>
         <span className="flex flex-1 flex-col gap-[6px] px-3 pb-[10px] pt-2">
-          <span className="line-clamp-2 break-words text-[length:calc(12.5px*var(--fs-scale-body,1))] font-bold leading-[1.3] text-m-ink">
+          <span dir="auto" className="line-clamp-2 break-words text-[length:calc(12.5px*var(--fs-scale-body,1))] font-bold leading-[1.3] text-m-ink">
             {file.original_name}
           </span>
           <span className="mt-auto flex flex-wrap items-center gap-1">
@@ -160,7 +160,8 @@ export function FileTile({ file, selected, canStar, onPick, onStar, onMenu, t }:
 
 function Badge({ children }: { children: ReactNode }) {
   return (
-    <span className="whitespace-nowrap rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] font-geist text-[length:calc(9px*var(--fs-scale-caption,1))] font-bold text-m-muted">
+    // A size, a date or a name, each in its own direction ("46.1 KB" stays so in Arabic).
+    <span dir="auto" className="whitespace-nowrap rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] font-geist text-[length:calc(9px*var(--fs-scale-caption,1))] font-bold text-m-muted">
       {children}
     </span>
   );
@@ -220,7 +221,7 @@ export function FilePreviewPane({ file, planner, onOpen, onStar, onLinks, onMenu
 
       <div>
         <h3 className="break-words text-[length:calc(16px*var(--fs-scale-subtitle,1))] font-extrabold leading-[1.3] text-m-ink">
-          {file.original_name}
+          <bdi>{file.original_name}</bdi>
         </h3>
         <div className="mt-[6px] flex flex-wrap items-center gap-1">
           <span
diff --git a/client/src/mobile/screens/trip/tabs/MFilesTab.tsx b/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
index 993add11d..2cf95e3ad 100644
--- a/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
@@ -322,7 +322,7 @@ function FileRow({ file, planner, onOpen, onStar, onMenu }: {
         </div>
 
         <div className="min-w-0 flex-1">
-          <div className="truncate text-[0.8125rem] font-bold text-m-ink">{file.original_name}</div>
+          <div dir="auto" className="truncate text-[0.8125rem] font-bold text-m-ink">{file.original_name}</div>
 
           <div className="mt-1 flex flex-wrap items-center gap-1">
             {isWalletPass(file.mime_type, file.original_name) && (
@@ -333,7 +333,7 @@ function FileRow({ file, planner, onOpen, onStar, onMenu }: {
               </span>
             )}
             {!!file.file_size && (
-              <span className="whitespace-nowrap rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] font-geist text-[0.53125rem] font-bold text-m-muted">
+              <span dir="ltr" className="whitespace-nowrap rounded-full bg-[color:var(--m-ic)] px-[7px] py-[2px] font-geist text-[0.53125rem] font-bold text-m-muted">
                 {formatSize(file.file_size)}
               </span>
             )}
@@ -345,7 +345,7 @@ function FileRow({ file, planner, onOpen, onStar, onMenu }: {
                 <span className="flex h-3 w-3 flex-none items-center justify-center rounded-full bg-m-act font-geist text-[0.40625rem] font-extrabold text-m-actfg">
                   {file.uploaded_by_name[0]?.toUpperCase()}
                 </span>
-                <span className="max-w-[92px] truncate font-geist text-[0.53125rem] font-bold text-m-muted">{file.uploaded_by_name}</span>
+                <span dir="auto" className="max-w-[92px] truncate font-geist text-[0.53125rem] font-bold text-m-muted">{file.uploaded_by_name}</span>
               </span>
             )}
           </div>
diff --git a/client/src/mobile/screens/trip/tabs/MPackingListTab.tsx b/client/src/mobile/screens/trip/tabs/MPackingListTab.tsx
index 5b45ad8ec..19b5a8dd7 100644
--- a/client/src/mobile/screens/trip/tabs/MPackingListTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MPackingListTab.tsx
@@ -502,7 +502,7 @@ function PackingCategoryCard({
             className="min-w-0 flex-1 border-b border-[color:var(--m-rowbr)] bg-transparent text-[0.875rem] font-bold text-m-ink outline-none"
           />
         ) : (
-          <span className="min-w-0 flex-1 truncate text-[0.875rem] font-bold text-m-ink">{group.category}</span>
+          <span dir="auto" className="min-w-0 flex-1 truncate text-[0.875rem] font-bold text-m-ink">{group.category}</span>
         )}
         {editMode && (
           <button
diff --git a/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx b/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
index 3d4345550..f45d72679 100644
--- a/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
+++ b/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
@@ -37,7 +37,7 @@ export function CardTitleButton({
         <TypeIcon size={10} strokeWidth={2.2} style={{ color: typeColor }} />
         {t(`reservations.type.${res.type}`)}
       </span>
-      <span className="min-w-0 flex-1 truncate text-[0.78125rem] font-bold text-m-ink wide:line-clamp-2 wide:whitespace-normal">
+      <span dir="auto" className="min-w-0 flex-1 truncate text-[0.78125rem] font-bold text-m-ink wide:line-clamp-2 wide:whitespace-normal">
         {res.title}
       </span>
       {!!res.needs_review && (
@@ -105,7 +105,7 @@ export function CardWhenAndCode({
           <Field label={t('reservations.date')} className="flex-[1.4]">
             {dayDate ? (
               <span className="flex min-w-0 items-center justify-center gap-1.5">
-                <span className="min-w-0 truncate">{dayValue}</span>
+                <span dir="auto" className="min-w-0 truncate">{dayValue}</span>
                 <span className="flex-none font-medium text-m-faint">{dayDate}</span>
               </span>
             ) : (
@@ -166,7 +166,7 @@ export function CardFiles({ files, card, t }: { files: ReturnType<typeof filesFo
             className="flex items-center gap-[6px] rounded-[10px] border border-[color:var(--m-rowbr)] bg-m-card px-[10px] py-[7px]"
           >
             <FileText size={12} strokeWidth={2} className="flex-none text-m-muted" />
-            <span className="truncate font-geist text-[0.65625rem] font-semibold text-m-muted">{f.original_name}</span>
+            <span dir="auto" className="truncate font-geist text-[0.65625rem] font-semibold text-m-muted">{f.original_name}</span>
           </span>
         ))}
       </div>
diff --git a/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx b/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
index 95de84d14..27930a3cf 100644
--- a/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
@@ -175,8 +175,9 @@ function TransportCard({ res, planner, shell, canEdit, compact }: {
               <div className="mt-2 flex flex-wrap items-center justify-center gap-2 rounded-[10px] border border-[color:var(--m-rowbr)] bg-m-card px-[10px] py-2 text-[0.71875rem] font-semibold text-m-ink">
                 {eps.map((ep, i) => (
                   <span key={i} className="inline-flex min-w-0 items-center gap-2">
-                    {i > 0 && <TypeIcon size={12} strokeWidth={2.2} className="flex-none" style={{ color: typeColor }} />}
-                    <span className="truncate">{ep.name}</span>
+                    {/* The vehicle heads for the next stop, so it turns round with the reading direction. */}
+                    {i > 0 && <TypeIcon size={12} strokeWidth={2.2} className="flex-none rtl:-scale-x-100" style={{ color: typeColor }} />}
+                    <span dir="auto" className="truncate">{ep.name}</span>
                   </span>
                 ))}
               </div>
diff --git a/client/src/mobile/screens/trip/tabs/tabChrome.tsx b/client/src/mobile/screens/trip/tabs/tabChrome.tsx
index 90aad4ca5..0ea0c3e6c 100644
--- a/client/src/mobile/screens/trip/tabs/tabChrome.tsx
+++ b/client/src/mobile/screens/trip/tabs/tabChrome.tsx
@@ -281,7 +281,7 @@ export function TravelerAvatars({ travelers, label }: {
               <span className="flex h-[20px] w-[20px] flex-none items-center justify-center overflow-hidden rounded-full bg-m-act text-[0.5625rem] font-extrabold text-m-actfg">
                 {src ? <img src={src} alt="" className="h-full w-full object-cover" /> : tv.username?.[0]?.toUpperCase()}
               </span>
-              <span className="truncate text-[0.71875rem] font-semibold text-m-ink">{tv.username}</span>
+              <span dir="auto" className="truncate text-[0.71875rem] font-semibold text-m-ink">{tv.username}</span>
               {!!tv.is_guest && <GuestBadge size="xs" />}
             </span>
           )
diff --git a/client/src/styles/rtl.css b/client/src/styles/rtl.css
new file mode 100644
index 000000000..67a98a3e4
--- /dev/null
+++ b/client/src/styles/rtl.css
@@ -0,0 +1,62 @@
+/*
+ * Right to left (Arabic). Layout already follows the reading direction through
+ * the logical utilities (ms-, ps-, start-, text-start); what is here are the
+ * three things a logical utility cannot say.
+ */
+
+/*
+ * User text in its own direction. A name, title or address carries dir="auto",
+ * so a Latin one in an Arabic row keeps its punctuation at its own end and, when
+ * it is cut, loses its end rather than its beginning. Cut, clamped or typed into
+ * a field, it still lines up with the row and the form: on the UI's start edge,
+ * wherever its own start is (an empty field reads as left to right, so without
+ * this its placeholder would jump to the far side). A free paragraph shown on
+ * its own (a note, a chat message) keeps the alignment of its own language.
+ * Zero specificity, so an explicit text-center or text-end on the element wins.
+ */
+:where(
+    :root[dir='rtl'] [dir='auto']:dir(ltr):is(.truncate, [class*='line-clamp-'], input, textarea),
+    :root[dir='ltr'] [dir='auto']:dir(rtl):is(.truncate, [class*='line-clamp-'], input, textarea)
+  ) {
+  text-align: end;
+}
+
+/*
+ * Arrows and chevrons that point along the reading direction (back, forward, a
+ * disclosure row, a date range, a payment from one person to another) turn
+ * round in a right-to-left language. The touch shell draws them all with
+ * lucide, so the shell (and the sheets it portals, which carry m-root too)
+ * mirrors them here instead of every icon carrying its own class. An icon that
+ * names its own RTL treatment keeps it: rtl:-scale-x-100 already turns it, and
+ * rtl:scale-x-100 marks an arrow that is physical on purpose. `scale` is its
+ * own property, so it composes with a rotation the icon carries (an open
+ * disclosure pointing down) instead of replacing it.
+ */
+:root[dir='rtl'] .m-root
+  :is(
+    .lucide-chevron-left,
+    .lucide-chevron-right,
+    .lucide-chevrons-left,
+    .lucide-chevrons-right,
+    .lucide-arrow-left,
+    .lucide-arrow-right,
+    .lucide-move-left,
+    .lucide-move-right
+  ):not([class*='rtl:']) {
+  scale: -1 1;
+}
+
+/*
+ * Arabic (and Hebrew) has no capitals, so the touch shell's small uppercase
+ * eyebrows (field labels, stat labels, status pills) lose the weight capitals
+ * give a Latin label and read as grey specks. There they grow by a fifth (about
+ * 2px, padding and pill with them), drop the tracking that pulls joined letters
+ * apart, and take the muted ink instead of the faint one.
+ */
+:root:is(:lang(ar), :lang(he)) .m-root .uppercase {
+  zoom: 1.2;
+  letter-spacing: 0;
+}
+:root:is(:lang(ar), :lang(he)) .m-root .uppercase.text-m-faint {
+  color: var(--m-muted);
+}
diff --git a/client/src/styles/rtlCss.test.ts b/client/src/styles/rtlCss.test.ts
new file mode 100644
index 000000000..8bb1af4db
--- /dev/null
+++ b/client/src/styles/rtlCss.test.ts
@@ -0,0 +1,50 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+// FE-RTL-CSS-001 to FE-RTL-CSS-004
+//
+// styles/rtl.css carries what the logical utilities cannot say for Arabic: user
+// text that lines up with the UI in its own direction, arrows that turn round
+// in the touch shell, and Arabic's caption labels. jsdom applies no
+// stylesheet, so these read the real file.
+const css = readFileSync(resolve(process.cwd(), 'src/styles/rtl.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+
+/** The declarations of the rule whose selector text contains every given part. */
+function ruleBody(...parts: string[]): string {
+  for (const chunk of css.split('}')) {
+    const open = chunk.indexOf('{')
+    if (open < 0) continue
+    const head = chunk.slice(0, open)
+    if (parts.every(part => head.includes(part))) return chunk.slice(open + 1)
+  }
+  return ''
+}
+
+describe('rtl.css', () => {
+  it('FE-RTL-CSS-001: the stylesheet is loaded with the app', () => {
+    const main = readFileSync(resolve(process.cwd(), 'src/main.tsx'), 'utf8')
+    expect(main).toMatch(/import '\.\/styles\/rtl\.css'/)
+  })
+
+  it('FE-RTL-CSS-002: cut, clamped or typed user text in its own direction sits on the UI start edge', () => {
+    const body = ruleBody(":root[dir='rtl'] [dir='auto']:dir(ltr)", '.truncate', "[class*='line-clamp-']", 'input', 'textarea')
+    expect(body).toMatch(/text-align:\s*end/)
+    // The left-to-right UI gets the mirror case: Arabic text in an English row.
+    expect(css).toContain(":root[dir='ltr'] [dir='auto']:dir(rtl)")
+    // Zero specificity: an explicit alignment class on the element still wins.
+    expect(css).toMatch(/:where\(\s*:root\[dir='rtl'\]/)
+  })
+
+  it('FE-RTL-CSS-003: in the touch shell every back, forward and flow arrow turns round in a right-to-left language', () => {
+    const body = ruleBody(":root[dir='rtl'] .m-root", '.lucide-chevron-left', '.lucide-chevron-right', '.lucide-arrow-left', '.lucide-arrow-right')
+    expect(body).toMatch(/scale:\s*-1 1/)
+    // An icon that names its own treatment keeps it.
+    expect(css).toContain(":not([class*='rtl:'])")
+  })
+
+  it('FE-RTL-CSS-004: Arabic and Hebrew caption labels grow, drop the tracking and take the muted ink', () => {
+    expect(ruleBody(':lang(ar)', ':lang(he)', '.m-root .uppercase')).toMatch(/zoom:\s*1\.2[\s\S]*letter-spacing:\s*0/)
+    expect(ruleBody('.uppercase.text-m-faint')).toMatch(/color:\s*var\(--m-muted\)/)
+  })
+})
diff --git a/client/src/utils/flowText.test.ts b/client/src/utils/flowText.test.ts
new file mode 100644
index 000000000..5abc9c8b6
--- /dev/null
+++ b/client/src/utils/flowText.test.ts
@@ -0,0 +1,34 @@
+/**
+ * FE-UTIL-FLOW-001 to FE-UTIL-FLOW-003
+ *
+ * "A → B" as one string that reads in the direction of the UI.
+ */
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { flowText, isRtlDocument } from './flowText';
+
+const FSI = '⁨';
+const PDI = '⁩';
+
+describe('flowText', () => {
+  afterEach(() => {
+    document.documentElement.dir = '';
+  });
+
+  it('FE-UTIL-FLOW-001: a left-to-right UI gets the plain arrow between the names', () => {
+    expect(flowText(['Sam Carter', 'Ada'], false)).toBe('Sam Carter → Ada');
+    expect(flowText(['Kyoto', 'Osaka', 'Nara'], false)).toBe('Kyoto → Osaka → Nara');
+  });
+
+  it('FE-UTIL-FLOW-002: in Arabic each name is isolated and the arrow points left, from the first to the second', () => {
+    expect(flowText(['Sam Carter', 'أنت'], true)).toBe(`${FSI}Sam Carter${PDI} ← ${FSI}أنت${PDI}`);
+  });
+
+  it('FE-UTIL-FLOW-003: without an explicit direction it follows the document', () => {
+    expect(isRtlDocument()).toBe(false);
+    expect(flowText(['A', 'B'])).toBe('A → B');
+    document.documentElement.dir = 'rtl';
+    expect(isRtlDocument()).toBe(true);
+    expect(flowText(['A', 'B'])).toBe(`${FSI}A${PDI} ← ${FSI}B${PDI}`);
+  });
+});
diff --git a/client/src/utils/flowText.ts b/client/src/utils/flowText.ts
new file mode 100644
index 000000000..5da24867c
--- /dev/null
+++ b/client/src/utils/flowText.ts
@@ -0,0 +1,22 @@
+/**
+ * "Sam → Ada", "Kyoto → Osaka": two names with an arrow from the first to the
+ * second, as one string (a row's label, an aria-label).
+ *
+ * In an Arabic UI the plain form reads backwards. A Latin name and an Arabic one
+ * reorder around the arrow, and the arrow itself never turns, so "Sam Carter →
+ * أنت" shows the arrow pointing back at Sam. There each name goes into its own
+ * isolate (U+2068 … U+2069), so the pair lines up in reading order whatever
+ * script the names are in, and the arrow points left, from the first name to
+ * the second. A left-to-right UI gets the plain string.
+ */
+const FSI = '⁨';
+const PDI = '⁩';
+
+export function isRtlDocument(): boolean {
+  return typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+}
+
+export function flowText(parts: readonly string[], rtl: boolean = isRtlDocument()): string {
+  if (!rtl) return parts.join(' → ');
+  return parts.map((part) => `${FSI}${part}${PDI}`).join(' ← ');
+}
diff --git a/client/tests/unit/mobile/dashboard/MDashboard.test.tsx b/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
index b8a293235..fd36e6cb2 100644
--- a/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
+++ b/client/tests/unit/mobile/dashboard/MDashboard.test.tsx
@@ -109,6 +109,18 @@ describe('MDashboard', () => {
     expect(screen.getByText('Lisbon')).toBeInTheDocument();
   });
 
+  it('FE-MOB-DASH-040: the spotlight title keeps its own direction and its progress fills from the start edge', () => {
+    mocks.dash = buildDash({ spotlight: buildTrip() });
+    render(<MDashboard />);
+    // dir="auto": a Latin title in the Arabic UI is cut at its end, not its beginning.
+    expect(screen.getAllByText('Japan 2026')[0]).toHaveAttribute('dir', 'auto');
+    const fill = document.querySelector('span[style*="width"].rounded-full.bg-white') as HTMLElement;
+    expect(fill).not.toBeNull();
+    // start-0, not left-0: in Arabic the bar fills from the right like every other bar.
+    expect(fill).toHaveClass('start-0');
+    expect(fill.className).not.toMatch(/\bleft-0\b/);
+  });
+
   it('FE-MOB-DASH-002: archived filter swaps card actions to restore + permanent delete', () => {
     const handleUnarchive = vi.fn();
     mocks.dash = buildDash({
diff --git a/client/tests/unit/mobile/trip/MCollabChat.test.tsx b/client/tests/unit/mobile/trip/MCollabChat.test.tsx
index 6c6bdb9b4..e2df1bc41 100644
--- a/client/tests/unit/mobile/trip/MCollabChat.test.tsx
+++ b/client/tests/unit/mobile/trip/MCollabChat.test.tsx
@@ -11,7 +11,7 @@ import { resetAllStores, seedStore } from '../../../helpers/store'
 import { server } from '../../../helpers/msw/server'
 import { act, fireEvent, render, screen, waitFor } from '../../../helpers/render'
 
-// FE-MOB-CCHAT-001 to FE-MOB-CCHAT-033
+// FE-MOB-CCHAT-001 to FE-MOB-CCHAT-035
 
 const ME = 7
 
@@ -176,6 +176,18 @@ describe('MCollabChat', () => {
     expect(screen.getByText('typed').closest('.flex-col')).not.toHaveTextContent('from the assistant')
   })
 
+  it('FE-MOB-CCHAT-035: a message, its quote and the composer each take their direction from their own text', async () => {
+    serveMessages([
+      chatMsg(1, { text: 'Who has the JR Pass vouchers?' }),
+      chatMsg(2, { text: 'Me!', reply_to: 1, reply_text: 'Who has the JR Pass vouchers?', reply_username: 'Alice' }),
+    ])
+    await renderChat()
+    // In Arabic a Latin message keeps its question mark at its end.
+    for (const node of screen.getAllByText('Who has the JR Pass vouchers?')) expect(node).toHaveAttribute('dir', 'auto')
+    expect(screen.getByText('Me!')).toHaveAttribute('dir', 'auto')
+    expect(screen.getByPlaceholderText('collab.chat.placeholder')).toHaveAttribute('dir', 'auto')
+  })
+
   it('FE-MOB-CCHAT-008: shows the quoted message above a reply bubble', async () => {
     serveMessages([
       chatMsg(1, { text: 'Where do we meet?' }),
diff --git a/client/tests/unit/mobile/trip/MCollabPolls.test.tsx b/client/tests/unit/mobile/trip/MCollabPolls.test.tsx
index e2f0c58e6..eb749788c 100644
--- a/client/tests/unit/mobile/trip/MCollabPolls.test.tsx
+++ b/client/tests/unit/mobile/trip/MCollabPolls.test.tsx
@@ -483,4 +483,25 @@ describe('MCollabPolls', () => {
       options: ['A', 'B'],
     })))
   })
+
+  it('FE-MOB-POLLS-030: in Arabic the result fill grows from the start edge, and question and options keep their own direction', async () => {
+    setup([poll({
+      is_closed: true,
+      question: 'Day trip on Saturday?',
+      options: [
+        { text: 'Nara and the deer', label: 'Nara and the deer', voters: [voter(9, 'lea'), voter(10, 'tom')] },
+        { text: 'Kurama hike', label: 'Kurama hike', voters: [voter(11, 'ada')] },
+      ],
+    })])
+    const question = await screen.findByText('Day trip on Saturday?')
+    // The paragraph is isolated, so its question mark stays at its end in a right-to-left page.
+    expect(question.tagName).toBe('BDI')
+    expect(screen.getByText('Nara and the deer').tagName).toBe('BDI')
+    const option = screen.getByRole('button', { name: /Nara and the deer/ })
+    const fill = option.querySelector('span[style*="width"]') as HTMLElement
+    expect(fill.style.width).toBe('67%')
+    // Logical, not left-0: in Arabic the bar fills from the right, under the option's radio.
+    expect(fill).toHaveClass('start-0')
+    expect(fill.className).not.toMatch(/\bleft-0\b/)
+  })
 })
diff --git a/client/tests/unit/mobile/trip/MCostsTab.test.tsx b/client/tests/unit/mobile/trip/MCostsTab.test.tsx
index 34867b9ca..27cd289ff 100644
--- a/client/tests/unit/mobile/trip/MCostsTab.test.tsx
+++ b/client/tests/unit/mobile/trip/MCostsTab.test.tsx
@@ -945,4 +945,27 @@ describe('MCostsTab', () => {
     expect(within(expenses).getByPlaceholderText('costs.searchPlaceholder')).toBeInTheDocument()
     expect(within(expenses).getByRole('heading', { name: 'costs.expenses' })).toBeInTheDocument()
   })
+
+  it('FE-MOB-COSTT-055: in Arabic a signed balance and an amount read as one left-to-right run, and a payment names who paid whom in reading order', async () => {
+    const payment = { id: 503, from_user_id: 3, to_user_id: 1, amount: 15, currency: 'USD', created_at: '2026-06-15T09:00:00Z' }
+    serveSettlement({ ...SETTLEMENT, settlements: [payment] })
+    // The page reads right to left for the whole render (the translation provider
+    // would otherwise set it back to the test's English).
+    Object.defineProperty(document.documentElement, 'dir', { configurable: true, get: () => 'rtl', set: () => {} })
+    try {
+      await renderTab()
+      const settle = up(screen.getByText('costs.settleUp'), 3)
+      // The sign stays in front of the figure instead of trailing it.
+      expect(within(settle).getByText('+$12.50')).toHaveAttribute('dir', 'ltr')
+      expect(within(settle).getByText('−$7.25')).toHaveAttribute('dir', 'ltr')
+      expect(within(settle).getByText('$40.00')).toHaveAttribute('dir', 'ltr')
+      // Names keep their own direction, so a Latin one loses its end when cut.
+      expect(within(settle).getByText('Ghost')).toHaveAttribute('dir', 'auto')
+      // Each name isolated, the arrow pointing left from the payer to the payee.
+      expect(screen.getByText('\u2068Bob\u2069 ← \u2068costs.you\u2069')).toBeInTheDocument()
+    } finally {
+      // Back to the prototype's reflected attribute.
+      delete (document.documentElement as { dir?: string }).dir
+    }
+  })
 })
diff --git a/client/tests/unit/mobile/trip/MFilesTab.test.tsx b/client/tests/unit/mobile/trip/MFilesTab.test.tsx
index 1b527b5d7..0d6d3bb68 100644
--- a/client/tests/unit/mobile/trip/MFilesTab.test.tsx
+++ b/client/tests/unit/mobile/trip/MFilesTab.test.tsx
@@ -10,7 +10,7 @@ import { setSizeClass } from '../../../helpers/sizeClass'
 import { fileRepo } from '../../../../src/repo/fileRepo'
 import { act, fireEvent, render, screen, waitFor, within } from '../../../helpers/render'
 
-// FE-MOB-FTAB-001 to FE-MOB-FTAB-027
+// FE-MOB-FTAB-001 to FE-MOB-FTAB-028
 
 vi.mock('../../../../src/utils/fileDownload', () => ({
   downloadFile: vi.fn(async () => undefined),
@@ -189,6 +189,13 @@ describe('MFilesTab', () => {
     expect(screen.getByText('files.sourceCollab')).toBeInTheDocument()
   })
 
+  it('FE-MOB-FTAB-028: in Arabic a size reads "2.0 KB", and names keep their own direction', () => {
+    renderTab()
+    expect(screen.getByText('2.0 KB')).toHaveAttribute('dir', 'ltr')
+    expect(screen.getByText('ada')).toHaveAttribute('dir', 'auto')
+    for (const node of screen.queryAllByText(NAME_RE)) expect(node).toHaveAttribute('dir', 'auto')
+  })
+
   it('FE-MOB-FTAB-008: starring calls the api and refreshes the store', async () => {
     const { planner } = renderTab()
     expect(screen.getByRole('button', { name: 'files.unstar' })).toBeInTheDocument()