fix(journey): raise PhotoLightbox z-index above MobileEntryView (#1101)

* Start the Journey date picker week on Monday (#1078)

The Journey entry date picker started the week on Sunday (firstDow = getDay(), headers Su-first) while every other picker (CustomDateTimePicker, VacayCalendar) starts on Monday. Align it: Monday-first leading offset ((getDay()+6)%7) and Mo-first weekday headers.

* Fix Taiwan resolving to CN-TW in the Atlas country search (#1049)

natural-earth gives Taiwan ISO_A2='CN-TW' (a subdivision-style value) with ADM0_A3='TWN'. The dynamic A2_TO_A3 augmentation added 'CN-TW'->'TWN', which then overwrote the legitimate TWN->TW entry in the reverse map, so Taiwan's country option resolved to 'CN-TW' — unresolvable by Intl.DisplayNames (no name, broken flag, not searchable). Only augment A2_TO_A3 with real 2-letter codes.

* Drop empty leftover dateless days when a trip gets a shorter dated range (#1083)

generateDays kept all unused dateless placeholder days after switching to an explicit (shorter) date range, so day_count (COUNT(*) FROM days) stayed inflated. Delete the empty leftovers (no assignments/notes/accommodations) like the dateless path already does, while preserving any that still hold content. Adds TRIP-SVC-017.

* Render GPX and route overlays once the Mapbox style has loaded (#1036)

The GPX and route geojson effects ran before the map 'load' event had
attached their sources, so on the first paint they hit the early return
and never re-ran. Add mapReady to their dependencies so they fire again
the moment the sources exist.

* Convert HEIC trip and journey covers to JPEG before upload (#1085)

HEIC/HEIF covers coming straight off an iPhone could not be rendered in
the preview or stored as a usable image. Route both cover pickers through
normalizeImageFile, the same conversion the journal entry editor already
uses, so the file becomes a JPEG before it leaves the browser.

* Name GPX routes and tracks after their source file so multiple imports stick (#1054)

Unnamed routes and tracks all fell back to the same generic 'GPX Route' /
'GPX Track' label, so the name-based import dedup dropped every one after
the first - importing several files (or one file with several tracks) only
kept a single place. Derive the default name from the source filename with
an index suffix when a file holds more than one geometry, thread the
filename down through the controller, and let the import modal take more
than one file at a time. Adds PLACE-SVC-037/038.

* Namespace the modal backdrop class so content blockers stop hiding it (#1027)

Generic class names like .modal-backdrop sit on the cosmetic filter lists
that content blockers (1Blocker, EasyList Annoyances) ship, and get hidden
with display:none. The shared Modal - used by New Trip and Add Place -
carried that class, so Safari users running such a blocker saw the modal
silently fail to open with no error and no network request. Rename it to
.trek-modal-backdrop.

* Highlight GB regions by resolving England/Scotland/Wales/NI to finer admin-1 codes (#1067)

A zoom-8 reverse geocode of a UK place only resolves to the constituent
country (GB-ENG/SCT/WLS/NIR), but Natural Earth's admin-1 polygons for GB
are counties and boroughs (GB-LND, GB-MAN, GB-CON, ...). Those four codes
match no polygon, so places in England never highlighted in the Atlas
while CH/IT/NL/etc. worked. When a GB lookup lands on a constituent
country, re-resolve it at a finer zoom where Nominatim exposes the
county/borough code the polygons actually carry. Other countries keep the
exact zoom-8 behaviour. Adds ATLAS-UNIT-021.

* Surface the real place-search error instead of a generic toast (#1092)

When a place search or detail lookup fails, the backend already forwards the
upstream reason - including descriptive Google Places API messages such as
'Places API (New) has not been used in project ... or it is disabled'. The
planner discarded it and always showed 'Place search failed', so a key that
is mis-enabled, unbilled, or pointed at the legacy API instead of Places API
(New) looked like an unexplained silent failure. Show the server-provided
message when present, and stop the Atlas bucket-list search from swallowing
its error without a trace.

* Await the async cover normalization in the TripFormModal paste test (#1085)

handleCoverSelect now normalizes the pasted file before previewing it, so
URL.createObjectURL is called a microtask later. The assertion moves into
waitFor; a non-HEIC file still passes through unchanged.

.dockerignore

@@ -30,8 +30,8 @@ Thumbs.db
 sonar-project.properties
 server/tests/
 server/vitest.config.ts
+server/reset-admin.js
 **/*.test.ts
-**/*.spec.ts
 wiki/
 scripts/
 charts/

.github/workflows/security.yml

@@ -34,5 +34,4 @@ jobs:
           command: cves
           image: trek:scan
           only-severities: critical,high
-          only-fixed: true
           exit-code: true

.github/workflows/test.yml

@@ -13,20 +13,6 @@ on:
       - '.github/workflows/test.yml'
 
 jobs:
-  i18n-parity:
-    name: i18n Key Parity
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: actions/setup-node@v6
-        with:
-          node-version: 24
-
-      - name: Check i18n key parity
-        run: node shared/scripts/i18n-parity.mjs --strict
-
   shared-contracts:
     name: Shared Contracts (Zod)
     runs-on: ubuntu-latest

.gitignore

@@ -65,6 +65,4 @@ coverage
 test-data
 
 .run
-.full-review
-# Wiki offline snapshot is baked in at build, not committed (duplicates wiki/)
-server/assets/wiki/
+.full-review

Dockerfile

@@ -1,10 +1,3 @@
-# ── Stage 0: gosu ────────────────────────────────────────────────────────────
-# Rebuild gosu with a current Go toolchain so the runtime image ships no stale
-# Go stdlib (Debian's apt gosu is built with an old Go that trips CVE scanners).
-# The binary and its runtime behaviour are identical to the apt package.
-FROM golang:1.25-alpine AS gosu-build
-RUN CGO_ENABLED=0 GOBIN=/out go install github.com/tianon/gosu@latest
-
 # ── Stage 1: shared ──────────────────────────────────────────────────────────
 FROM node:24-alpine AS shared-builder
 WORKDIR /app
@@ -38,7 +31,7 @@ COPY server/ ./server/
 RUN npm run build --workspace=server
 
 # ── Stage 4: production runtime ──────────────────────────────────────────────
-FROM node:24-trixie-slim
+FROM node:24-alpine
 WORKDIR /app
 
 # Workspace manifests only — source never enters this stage.
@@ -46,39 +39,15 @@ COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY server/package.json ./server/
 
-RUN apt-get update && \
-    apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates python3 build-essential \
-    libkitinerary-bin && \
+# better-sqlite3 native addon requires build tools; purged after install.
+RUN apk add --no-cache tzdata dumb-init su-exec python3 make g++ && \
     npm ci --workspace=server --omit=dev && \
-    ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
-    apt-get purge -y python3 build-essential && \
-    apt-get autoremove -y && \
-    rm -rf /var/lib/apt/lists/* /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
-
-# gosu rebuilt with a current Go toolchain (stage 0) — used by CMD to drop to node.
-COPY --from=gosu-build /out/gosu /usr/local/bin/gosu
-
-ENV XDG_CACHE_HOME=/tmp/kf6-cache
-# Prevent Qt from probing for a display in headless containers.
-ENV QT_QPA_PLATFORM=offscreen
-# Fixed path for both amd64 (static binary) and arm64 (symlink to apt binary).
-# Override with KITINERARY_EXTRACTOR_PATH if you install it elsewhere.
-ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
+    apk del python3 make g++ && \
+    rm -rf /usr/local/lib/node_modules/npm /usr/local/bin/npm /usr/local/bin/npx
 
 COPY --from=server-builder /app/server/dist ./server/dist
-# Runtime data assets read from server/assets at runtime: airports.json (flight
-# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
-# only emits dist, so these must be copied explicitly or the features silently
-# degrade to empty in the image.
-COPY --from=server-builder /app/server/assets ./server/assets
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
-# Encryption-key rotation is run on demand via tsx (a prod dep) straight from the
-# raw .ts source — it never enters dist, so it must be copied in explicitly or
-# `node --import tsx scripts/migrate-encryption.ts` fails with module-not-found.
-COPY server/scripts/migrate-encryption.ts ./server/scripts/migrate-encryption.ts
-# Admin recovery script (node server/reset-admin.js) for locked-out installs.
-COPY server/reset-admin.js ./server/reset-admin.js
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY --from=client-builder /app/client/dist ./server/public
 COPY --from=client-builder /app/client/public/fonts ./server/public/fonts
@@ -99,8 +68,5 @@ HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
   CMD wget -qO- http://localhost:3000/api/health || exit 1
 
 ENTRYPOINT ["dumb-init", "--"]
-# Preflight: if the app code is missing, a volume was almost certainly mounted
-# over /app (it hides the image's node_modules + dist). Fail with actionable
-# guidance instead of a cryptic "Cannot find module 'tsconfig-paths/register'".
 # cd into server/ so tsconfig-paths/register finds tsconfig.json and ../node_modules resolves correctly.
-CMD ["sh", "-c", "if [ ! -f /app/server/dist/index.js ] || [ ! -d /app/node_modules/tsconfig-paths ]; then echo 'FATAL: TREK application files are missing from the image.'; echo 'A volume is likely mounted over /app, which hides the app code.'; echo 'Mount ONLY your data and uploads dirs: -v ./data:/app/data -v ./uploads:/app/uploads'; echo 'Do NOT mount a volume at /app. See the Troubleshooting section of the README.'; exit 1; fi; chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec gosu node node --require tsconfig-paths/register dist/index.js"]
+CMD ["sh", "-c", "chown -R node:node /app/data /app/uploads 2>/dev/null || true; cd /app/server && exec su-exec node node --require tsconfig-paths/register dist/index.js"]

NOTICE.md

@@ -1,33 +0,0 @@
-# Third-party data & attributions
-
-TREK bundles and uses third-party data that requires attribution.
-
-## geoBoundaries — country & sub-national boundaries
-
-The Atlas map's administrative boundaries (admin-0 countries and admin-1
-provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
-`server/assets/atlas/admin1.geojson.gz` and generated by
-`server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
-
-> Runfola, D. et al. (2020) geoBoundaries: A global database of political
-> administrative boundaries. PLoS ONE 15(4): e0231866.
-> https://doi.org/10.1371/journal.pone.0231866
-
-geoBoundaries is licensed under **CC BY 4.0**
-(https://creativecommons.org/licenses/by/4.0/). Source: https://www.geoboundaries.org/
-
-The bundled files are simplified (coordinate-quantized) and re-tagged with the
-property names TREK consumes. Country borders (`admin0`) derive from the geoBoundaries
-CGAZ composite; sub-national regions (`admin1`) derive from the per-country open
-(gbOpen) release.
-
-## OpenStreetMap — geocoding
-
-Atlas reverse-geocodes places via the **Nominatim** service. Geocoding data is
-© OpenStreetMap contributors, licensed under the Open Database License (ODbL).
-https://www.openstreetmap.org/copyright
-
-## OurAirports — airport reference data
-
-`server/assets/airports.json` is built from **OurAirports**
-(https://ourairports.com/data/), released into the public domain.

README.md

@@ -51,10 +51,10 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
   <a href="docs/screenshots/dashboard.png"><img src="docs/screenshots/dashboard.png" alt="Dashboard" width="49%" /></a>
   <a href="docs/screenshots/trip-planner.png"><img src="docs/screenshots/trip-planner.png" alt="Trip planner with 3D map" width="49%" /></a>
   <a href="docs/screenshots/journey.png"><img src="docs/screenshots/journey.png" alt="Journey journal" width="49%" /></a>
-  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Costs · expense splitting" width="49%" /></a>
+  <a href="docs/screenshots/budget.png"><img src="docs/screenshots/budget.png" alt="Budget tracker" width="49%" /></a>
   <a href="docs/screenshots/atlas.png"><img src="docs/screenshots/atlas.png" alt="Atlas · visited countries" width="49%" /></a>
   <a href="docs/screenshots/vacay.png"><img src="docs/screenshots/vacay.png" alt="Vacay planner" width="49%" /></a>
-  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Trip planner · day plan and route" width="49%" /></a>
+  <a href="docs/screenshots/trip-iceland.png"><img src="docs/screenshots/trip-iceland.png" alt="Iceland Ring Road" width="49%" /></a>
   <a href="docs/screenshots/admin.png"><img src="docs/screenshots/admin.png" alt="Admin panel" width="49%" /></a>
 </div>
 
@@ -79,7 +79,6 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Drag & drop planner** — organise places into day plans with reordering and cross-day moves
 - **Interactive map** — Leaflet or Mapbox GL with 3D buildings, terrain, photo markers, clustering, route visualization
 - **Place search** — Google Places (photos, ratings, hours) or OpenStreetMap (free, no API key)
-- **Place import** — shared Google Maps / Naver Maps lists, plus GPX and KML/KMZ/GeoJSON map files
 - **Day notes** — timestamped, icon-tagged notes with drag-and-drop reordering
 - **Route optimisation** — auto-sort places and export to Google Maps
 - **Weather forecasts** — 16-day via Open-Meteo (no key) + historical climate fallback
@@ -90,8 +89,8 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 #### 🧳 Travel management
 
-- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files; import from booking confirmation emails and PDFs ([KDE Itinerary](https://invent.kde.org/pim/kitinerary))
-- **Costs** — track and split trip expenses (Splitwise-style): per-person / per-day breakdowns, settle-up, multi-currency
+- **Reservations** — flights, accommodations, restaurants with status, confirmation numbers, files
+- **Budget tracking** — category-based expenses with pie chart, per-person / per-day splits, multi-currency
 - **Packing lists** — categories, templates, user assignment, progress tracking
 - **Bag tracking** — optional weight tracking with iOS-style distribution
 - **Document manager** — attach docs, tickets, PDFs to trips / places / reservations (≤ 50 MB each)
@@ -109,7 +108,6 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 - **Invite links** — one-time or reusable links with expiry
 - **SSO (OIDC)** — Google, Apple, Authentik, Keycloak, or any OIDC provider
 - **2FA** — TOTP + backup codes
-- **Passkeys** — passwordless WebAuthn login (fingerprint / face / PIN / security key), admin-toggleable
 - **Collab suite** — group chat, shared notes, polls, day check-ins
 
 </td>
@@ -130,13 +128,13 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### 🧩 Addons (admin-toggleable)
 
 - **Lists** — packing lists + to-dos with templates, member assignments, optional bag tracking
-- **Costs** — expense tracker with splits and settle-up (who owes whom), multi-currency
+- **Budget** — expense tracker with splits, pie chart, multi-currency
 - **Documents** — file attachments on trips, places, and reservations
 - **Collab** — chat, notes, polls, day-by-day attendance
 - **Vacay** — personal vacation planner with calendar, 100+ country holidays, carry-over tracking
 - **Atlas** — world map of visited countries, bucket list, travel stats, streak tracking, liquid-glass UI
 - **Journey** — magazine-style travel journal with entries, photos (Immich/Synology), maps, moods
-- **AirTrail** — connect a self-hosted AirTrail instance to import and sync flights into reservations
+- **Naver List Import** — one-click import from shared Naver Maps lists
 - **MCP** — expose TREK to AI assistants via OAuth 2.1
 
 </td>
@@ -158,9 +156,8 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 #### ⚙️ Admin & customisation
 
 - **Dashboard views** — card grid or compact list · **Dark mode** — full theme with matching status bar
-- **20 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID, TR, JA, KO, UK, GR
+- **15 languages** — EN, DE, ES, FR, IT, NL, HU, RU, ZH, ZH-TW, PL, CS, AR (RTL), BR, ID
 - **Admin panel** — users, invites, packing templates, categories, addons, API keys, backups, GitHub history
-- **Notifications** — per-user preferences across email (SMTP), webhook, ntfy, and an in-app notification center
 - **Auto-backups** — scheduled with configurable retention · **Units** — °C/°F, 12h/24h, map tile sources, default coordinates
 
 </td>
@@ -194,9 +191,9 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
 <div align="center">
 
 ![Node.js](https://img.shields.io/badge/Node.js_22-339933?style=flat-square&logo=node.js&logoColor=white)
-![NestJS](https://img.shields.io/badge/NestJS_11-E0234E?style=flat-square&logo=nestjs&logoColor=white)
+![Express](https://img.shields.io/badge/Express-000000?style=flat-square&logo=express&logoColor=white)
 ![SQLite](https://img.shields.io/badge/SQLite-003B57?style=flat-square&logo=sqlite&logoColor=white)
-![React](https://img.shields.io/badge/React_19-61DAFB?style=flat-square&logo=react&logoColor=black)
+![React](https://img.shields.io/badge/React_18-61DAFB?style=flat-square&logo=react&logoColor=black)
 ![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
 ![Tailwind](https://img.shields.io/badge/Tailwind-06B6D4?style=flat-square&logo=tailwindcss&logoColor=white)
@@ -205,7 +202,7 @@ Open `http://localhost:3000`. On first boot TREK seeds an admin account — if y
 
 </div>
 
-Real-time sync via WebSocket (`ws`). Backend on NestJS 11. State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + Passkeys (WebAuthn) + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
+Real-time sync via WebSocket (`ws`). State with Zustand. Auth via JWT + OAuth 2.1 + OIDC + TOTP MFA. Weather via Open-Meteo (no key required). Maps with Leaflet and Mapbox GL.
 
 <br />
 
@@ -266,7 +263,7 @@ Then:
 docker compose up -d
 ```
 
-**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells the server how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
+**HTTPS notes:** `FORCE_HTTPS=true` is optional — it adds a 301 redirect, HSTS, CSP upgrade-insecure-requests, and forces the `secure` cookie flag. Only use it behind a TLS-terminating reverse proxy. `TRUST_PROXY=1` tells Express how many proxies sit in front so real client IPs and `X-Forwarded-Proto` work.
 
 </details>
 
@@ -314,9 +311,6 @@ docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/upl
 
 Your data stays in the mounted `data` and `uploads` volumes — updates never touch it.
 
-> [!IMPORTANT]
-> Mount **only** the data and uploads directories — `-v ./data:/app/data -v ./uploads:/app/uploads`. **Never mount a volume at `/app`.** Doing so hides the application code shipped in the image and the container fails to start with `Cannot find module 'tsconfig-paths/register'`. If you previously mounted `/app`, switch to the two mounts above; your data in `data/` and `uploads/` is preserved.
-
 <h3>Rotating the Encryption Key</h3>
 
 If you need to rotate `ENCRYPTION_KEY` (e.g. upgrading from a version that derived encryption from `JWT_SECRET`):
@@ -403,14 +397,12 @@ Caddy handles TLS and WebSockets automatically.
 | `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
 | `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
 | `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
-| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar`, `id`, `tr`, `ja`, `ko`, `uk`, `gr` | `en` |
+| `DEFAULT_LANGUAGE` | Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
 | `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
 | `HSTS_INCLUDE_SUBDOMAINS` | When `true`: adds the `includeSubDomains` directive to the HSTS header, extending HTTPS enforcement to all subdomains. Only effective when HSTS is active (`FORCE_HTTPS=true` or `NODE_ENV=production`). Leave `false` if you run other services on sibling subdomains over plain HTTP. | `false` |
 | `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: on when `NODE_ENV=production` or `FORCE_HTTPS=true`. Escape hatch: set `false` to allow session cookies over plain HTTP. Not recommended in production. | auto |
-| `SESSION_DURATION` | How long a login session stays valid when **"Remember me" is unchecked** (the default): sets the `trek_session` JWT `exp` and issues a browser-session cookie (cleared when the browser closes). Accepts `ms`-style strings: `1h`, `12h`, `7d`, `30d`, `90d`. Invalid values warn at startup and fall back to the default. | `24h` |
-| `SESSION_DURATION_REMEMBER` | Session length when **"Remember me" is ticked** at login: a longer-lived JWT plus a persistent `trek_session` cookie that survives browser restarts. Same format and startup-fallback behaviour as `SESSION_DURATION`. | `30d` |
-| `TRUST_PROXY` | Number of trusted reverse proxies. Tells the server to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
+| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Defaults to `1` in production; off in dev unless set. | `1` |
 | `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IPs (e.g. Immich on your LAN). Loopback and link-local addresses remain blocked. | `false` |
 | `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled; used as base for email notification links. | — |
 | **OIDC / SSO** | | |
@@ -445,13 +437,6 @@ Caddy handles TLS and WebSockets automatically.
 
 <br />
 
-## Data sources
-
-The Atlas map's country and sub-national (province/county) boundaries come from
-[**geoBoundaries**](https://www.geoboundaries.org/) (Runfola et al., 2020), licensed
-[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). See [NOTICE.md](NOTICE.md)
-for full third-party attributions.
-
 ## License
 
 TREK is [AGPL v3](LICENSE). Self-host freely for personal or internal company use. If you modify and offer TREK as a network service to third parties, your modifications must be open-sourced under the same licence.

ca_profile.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0"?>
-<CommunityApplications>
-  <Profile>TREK is a self-hosted, real-time collaborative travel planner. Plan trips together with interactive maps, budgets, bookings, packing lists, day-by-day itineraries and file management — every change syncs instantly across everyone in your group. Includes OIDC/SSO, TOTP MFA, dark mode, PWA support, multi-language UI and a modular addon system (Vacay, Atlas, Collab, Budget, Packing, Journey). Maintained by mauriceboe — support and bug reports via GitHub Issues.</Profile>
-  <Icon>https://raw.githubusercontent.com/mauriceboe/TREK/main/docs/trek-icon.png</Icon>
-  <WebPage>https://github.com/mauriceboe/TREK</WebPage>
-  <Forum>https://github.com/mauriceboe/TREK/issues</Forum>
-  <DonateLink>https://ko-fi.com/mauriceboe</DonateLink>
-  <DonateText>Support TREK development</DonateText>
-</CommunityApplications>

charts/README.md

@@ -39,9 +39,7 @@ See `values.yaml` for more options.
 
 ## Notes
 - Ingress is off by default. Enable and configure hosts for your domain.
-- PVCs use the cluster's default StorageClass. Set `persistence.data.storageClassName` and/or `persistence.uploads.storageClassName` to bind a specific class.
-- To use your own PVCs, set `persistence.data.existingClaim` and/or `persistence.uploads.existingClaim`. The other values for that volume (size, storageClassName, annotations) are then ignored.
-- With `persistence.enabled: false`, the data and uploads volumes use an `emptyDir` — storage is ephemeral and lost on pod restart. Intended for testing only.
+- PVCs require a default StorageClass or specify one as needed.
 - `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
 - `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
 - If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 3.1.3
+version: 3.0.22
 description: Minimal Helm chart for TREK app
-appVersion: "3.1.3"
+appVersion: "3.0.22"

charts/trek/templates/NOTES.txt

@@ -21,9 +21,3 @@
 
 4. Only one method should be used at a time. If both `generateEncryptionKey` and `existingSecret` are
    set, `existingSecret` takes precedence. Ensure the referenced secret and key exist in the namespace.
-
-5. Persistence:
-   - To bind your own PVCs, set `persistence.data.existingClaim` and/or `persistence.uploads.existingClaim`.
-     The other values for that volume (size, storageClassName, annotations) are then ignored.
-   - With `persistence.enabled=false` the volumes use an emptyDir — storage is ephemeral and is lost
-     when the pod restarts. Use only for testing.

charts/trek/templates/configmap.yaml

@@ -28,12 +28,6 @@ data:
   {{- if .Values.env.COOKIE_SECURE }}
   COOKIE_SECURE: {{ .Values.env.COOKIE_SECURE | quote }}
   {{- end }}
-  {{- if .Values.env.SESSION_DURATION }}
-  SESSION_DURATION: {{ .Values.env.SESSION_DURATION | quote }}
-  {{- end }}
-  {{- if .Values.env.SESSION_DURATION_REMEMBER }}
-  SESSION_DURATION_REMEMBER: {{ .Values.env.SESSION_DURATION_REMEMBER | quote }}
-  {{- end }}
   {{- if .Values.env.TRUST_PROXY }}
   TRUST_PROXY: {{ .Values.env.TRUST_PROXY | quote }}
   {{- end }}
@@ -70,9 +64,3 @@ data:
   {{- if .Values.env.MCP_RATE_LIMIT }}
   MCP_RATE_LIMIT: {{ .Values.env.MCP_RATE_LIMIT | quote }}
   {{- end }}
-  {{- if .Values.env.OVERPASS_URL }}
-  OVERPASS_URL: {{ .Values.env.OVERPASS_URL | quote }}
-  {{- end }}
-  {{- if .Values.env.OVERPASS_TIMEOUT_MS }}
-  OVERPASS_TIMEOUT_MS: {{ .Values.env.OVERPASS_TIMEOUT_MS | quote }}
-  {{- end }}

charts/trek/templates/deployment.yaml

@@ -82,16 +82,8 @@ spec:
             periodSeconds: 10
       volumes:
         - name: data
-          {{- if .Values.persistence.enabled }}
           persistentVolumeClaim:
-            claimName: {{ default (printf "%s-data" (include "trek.fullname" .)) .Values.persistence.data.existingClaim }}
-          {{- else }}
-          emptyDir: {}
-          {{- end }}
+            claimName: {{ include "trek.fullname" . }}-data
         - name: uploads
-          {{- if .Values.persistence.enabled }}
           persistentVolumeClaim:
-            claimName: {{ default (printf "%s-uploads" (include "trek.fullname" .)) .Values.persistence.uploads.existingClaim }}
-          {{- else }}
-          emptyDir: {}
-          {{- end }}
+            claimName: {{ include "trek.fullname" . }}-uploads

charts/trek/templates/pvc.yaml

@@ -1,42 +1,26 @@
-{{- if and .Values.persistence.enabled (not .Values.persistence.data.existingClaim) }}
+{{- if .Values.persistence.enabled }}
 apiVersion: v1
 kind: PersistentVolumeClaim
 metadata:
   name: {{ include "trek.fullname" . }}-data
   labels:
     app: {{ include "trek.name" . }}
-  {{- with .Values.persistence.data.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
 spec:
   accessModes:
     - ReadWriteOnce
-  {{- with .Values.persistence.data.storageClassName }}
-  storageClassName: {{ . | quote }}
-  {{- end }}
   resources:
     requests:
       storage: {{ .Values.persistence.data.size }}
-{{- end }}
 ---
-{{- if and .Values.persistence.enabled (not .Values.persistence.uploads.existingClaim) }}
 apiVersion: v1
 kind: PersistentVolumeClaim
 metadata:
   name: {{ include "trek.fullname" . }}-uploads
   labels:
     app: {{ include "trek.name" . }}
-  {{- with .Values.persistence.uploads.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
 spec:
   accessModes:
     - ReadWriteOnce
-  {{- with .Values.persistence.uploads.storageClassName }}
-  storageClassName: {{ . | quote }}
-  {{- end }}
   resources:
     requests:
       storage: {{ .Values.persistence.uploads.size }}

charts/trek/values.yaml

@@ -34,10 +34,6 @@ env:
   # When "true": adds includeSubDomains to the HSTS header. Only effective when HSTS is active. Leave "false" if sibling subdomains still run over plain HTTP.
   # COOKIE_SECURE: "true"
   # Auto-derived (true in production or when FORCE_HTTPS=true). Set "false" to force cookies over plain HTTP. Not recommended for production.
-  # SESSION_DURATION: "24h"
-  # How long a login session stays valid when "Remember me" is unchecked (the default): trek_session JWT exp + a browser-session cookie. Accepts 1h, 12h, 7d, 30d, 90d. Defaults to 24h.
-  # SESSION_DURATION_REMEMBER: "30d"
-  # Session length when "Remember me" is ticked: a longer-lived JWT + persistent cookie that survives browser restarts. Same format as SESSION_DURATION. Defaults to 30d.
   # TRUST_PROXY: "1"
   # Trusted proxy hops for X-Forwarded-For/X-Forwarded-Proto. Defaults to 1 in production. Must be set for FORCE_HTTPS to work.
   # ALLOW_INTERNAL_NETWORK: "false"
@@ -67,12 +63,6 @@ env:
   # Max MCP API requests per user per minute. Defaults to 300.
   # MCP_MAX_SESSION_PER_USER: "20"
   # Max concurrent MCP sessions per user. Defaults to 20.
-  # OVERPASS_URL: ""
-  # Custom Overpass endpoint(s) for the map POI "explore" search, comma-separated. When set, REPLACES the bundled
-  # public mirrors — point it at an internal/self-hosted Overpass instance when the public mirrors are unreachable
-  # from the cluster (e.g. locked-down egress). Non-http(s) entries are ignored.
-  # OVERPASS_TIMEOUT_MS: "12000"
-  # Per-endpoint timeout (ms) for Overpass POI requests. Raise it for a slow self-hosted Overpass instance. Defaults to 12000.
 
 
 # Secret environment variables stored in a Kubernetes Secret.
@@ -101,21 +91,11 @@ existingSecret: ""
 existingSecretKey: ENCRYPTION_KEY
 
 persistence:
-  # When disabled, volumes fall back to an ephemeral emptyDir (data lost on pod restart).
   enabled: true
   data:
     size: 1Gi
-    # Leave empty to use the cluster's default StorageClass; set to bind a specific class.
-    storageClassName: ""
-    # Bind an existing PVC. The other values (size, storageClassName, annotations) are then ignored.
-    existingClaim: ""
-    annotations: {}
   uploads:
     size: 1Gi
-    storageClassName: ""
-    # Specify an existing PVC to bind. The other values are then ignored.
-    existingClaim: ""
-    annotations: {}
 
 resources:
   requests:

client/index.html

@@ -5,10 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>TREK</title>
 
-    <!-- Pre-paint appearance (FOUC fix). External classic script so it runs
-         before first paint AND complies with the prod CSP (script-src 'self'). -->
-    <script src="/theme-boot.js"></script>
-
     <!-- PWA / iOS -->
     <meta name="theme-color" content="#09090b" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
@@ -17,12 +13,13 @@
     <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" />
 
     <!-- Favicon -->
-    <link rel="icon" type="image/svg+xml" href="/icons/icon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/icons/icon-dark.svg" />
 
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
 
     <!-- Leaflet -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.1.3",
+  "version": "3.0.22",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,18 +17,13 @@
     "lint": "eslint .",
     "lint:check": "eslint .",
     "lint:pages": "node scripts/check-page-pattern.mjs",
-    "theme:lint": "node scripts/theme-lint.mjs",
-    "theme:lint:strict": "node scripts/theme-lint.mjs --strict",
     "e2e": "playwright test",
     "e2e:report": "playwright show-report",
     "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
     "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
   },
   "dependencies": {
-    "@fontsource/geist-sans": "^5.2.5",
-    "@fontsource/poppins": "^5.2.7",
     "@react-pdf/renderer": "^4.5.1",
-    "@simplewebauthn/browser": "^13.1.2",
     "@trek/shared": "*",
     "axios": "^1.6.7",
     "dexie": "^4.4.2",
@@ -36,9 +31,7 @@
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",
-    "maplibre-gl": "^5.24.0",
     "marked": "^18.0.0",
-    "plyr": "^3.8.4",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-dropzone": "^14.4.1",
@@ -62,12 +55,11 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/leaflet": "^1.9.8",
-    "@types/node": "^25.9.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.18",
     "eslint": "^10.2.1",
     "eslint-config-flat-gitignore": "^2.3.0",
@@ -85,8 +77,8 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.2",
-    "vite": "8.1.0",
-    "vite-plugin-pwa": "^1.3.0",
-    "vitest": "^4.1.9"
+    "vite": "^5.1.4",
+    "vite-plugin-pwa": "^0.21.0",
+    "vitest": "^3.2.4"
   }
 }

client/public/theme-boot.js

@@ -1,58 +0,0 @@
-/*
- * Pre-paint appearance boot — kills the flash of default/wrong theme (FOUC).
- *
- * Loaded as an external, render-blocking CLASSIC script in <head> (NOT a module)
- * so it runs before first paint AND complies with the production CSP
- * (script-src 'self'; inline scripts are blocked). It reads the compact snapshot
- * written by client/src/theme/applyAppearance.ts and applies it verbatim. Keep
- * this in sync with that module's snapshot shape + apply logic.
- *
- * It must never throw — any failure silently falls back to the default look.
- */
-(function () {
-  try {
-    var raw = localStorage.getItem('trek_appearance');
-    if (!raw) return;
-    var s = JSON.parse(raw);
-    if (!s || s.v !== 1) return;
-
-    var root = document.documentElement;
-    var path = location.pathname;
-    var isShared = path.indexOf('/shared/') === 0 || path.indexOf('/public/') === 0;
-
-    var dark;
-    if (isShared) dark = false;
-    else if (s.darkMode === 'auto') dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    else dark = s.darkMode === true || s.darkMode === 'dark';
-    root.classList.toggle('dark', dark);
-
-    var scheme = isShared ? 'default' : s.scheme;
-    if (scheme && scheme !== 'default') root.setAttribute('data-scheme', scheme);
-    if (!isShared && s.noTransparency) root.setAttribute('data-no-transparency', '');
-    if (s.density === 'compact') root.setAttribute('data-density', 'compact');
-    if (s.reduceMotion) root.setAttribute('data-reduce-motion', '');
-
-    if (!isShared && scheme === 'custom' && s.accent) {
-      root.style.setProperty('--accent-custom-light', s.accent.light);
-      root.style.setProperty('--accent-custom-dark', s.accent.dark);
-      if (s.accentText) {
-        root.style.setProperty('--accent-custom-text-light', s.accentText.light);
-        root.style.setProperty('--accent-custom-text-dark', s.accentText.dark);
-      }
-    }
-
-    var ts = s.typeScale || {};
-    var fs = typeof s.fontScale === 'number' ? s.fontScale : 1;
-    setScale('--fs-scale-title', fs * (ts.title || 1));
-    setScale('--fs-scale-subtitle', fs * (ts.subtitle || 1));
-    setScale('--fs-scale-body', fs * (ts.body || 1));
-    setScale('--fs-scale-caption', fs * (ts.caption || 1));
-    if (fs !== 1) root.style.fontSize = fs * 100 + '%';
-
-    function setScale(name, v) {
-      if (typeof v === 'number' && v !== 1) root.style.setProperty(name, String(v));
-    }
-  } catch (e) {
-    /* never block boot */
-  }
-})();

client/scripts/theme-lint.mjs

@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-/*
- * theme:lint — guards the appearance token system.
- *
- * Flags styling that bypasses the design tokens and therefore won't follow a
- * user's chosen scheme / transparency / text-size:
- *   - inline color literals  (color: '#111', background: 'rgba(...)', boxShadow: '...rgba...')
- *   - inline numeric fontSize (fontSize: 13)
- *   - arbitrary-value Tailwind color classes (bg-[#..], text-[rgba(..)])
- *
- * ALLOWED (never flagged): var(--token) inline styles, bg-[var(--..)] classes,
- * and genuinely dynamic values (data-driven colors, computed sizes/positions).
- *
- * Mirrors the i18n:parity gate. Default mode reports a baseline and exits 0;
- * `--strict` exits non-zero when any violations remain (for once the backlog is
- * burned down, or wired to changed files only). Add `theme-lint-disable` in a
- * line comment to suppress an intentional exception (map/PDF/brand colors).
- */
-import { readdirSync, readFileSync, statSync } from 'node:fs';
-import { join, relative } from 'node:path';
-
-let SRC = new URL('../src', import.meta.url).pathname;
-if (process.platform === 'win32' && SRC.startsWith('/')) SRC = SRC.slice(1);
-
-// Surfaces where CSS variables genuinely cannot reach (injected map HTML, WebGL
-// paint, standalone PDF documents) — colors there must stay literal.
-const EXEMPT = [
-  /Mapbox/i, /placePopup/i, /marker/i, /popup/i, /TripPDF/, /JourneyBookPDF/,
-  /MapViewGL/, /MapView\./, /JourneyMapGL/, /reservationsMapbox/, /useAtlas/,
-  /ReservationOverlay/, /\.test\./, /\.spec\./,
-];
-
-const ARB_CLASS = /\b(?:bg|text|border|ring|fill|stroke|from|via|to|shadow|outline|decoration|divide|caret)-\[\s*(?:#|rgba?\(|hsla?\(|oklch\()/;
-const INLINE_COLOR = /(?:color|background|backgroundColor|borderColor|border|borderTop|borderBottom|borderLeft|borderRight|boxShadow|fill|stroke|outline|textDecorationColor)\s*:\s*['"`]?\s*(?:#[0-9a-fA-F]{3,8}\b|rgba?\(|hsla?\(|oklch\()/;
-const INLINE_FONTSIZE = /fontSize\s*:\s*['"`]?\d/;
-
-function walk(dir, files = []) {
-  for (const name of readdirSync(dir)) {
-    const p = join(dir, name);
-    if (statSync(p).isDirectory()) walk(p, files);
-    else if (/\.(ts|tsx)$/.test(name)) files.push(p);
-  }
-  return files;
-}
-
-const strict = process.argv.includes('--strict');
-const offenders = [];
-let total = 0;
-
-for (const f of walk(SRC)) {
-  if (EXEMPT.some((re) => re.test(f))) continue;
-  let count = 0;
-  for (const line of readFileSync(f, 'utf8').split('\n')) {
-    if (line.includes('theme-lint-disable')) continue;
-    if (ARB_CLASS.test(line) || INLINE_COLOR.test(line) || INLINE_FONTSIZE.test(line)) count++;
-  }
-  if (count) {
-    offenders.push([relative(SRC, f).replace(/\\/g, '/'), count]);
-    total += count;
-  }
-}
-
-offenders.sort((a, b) => b[1] - a[1]);
-console.log(`theme:lint — ${total} hardcoded-style hits across ${offenders.length} files (map/PDF excluded).`);
-for (const [f, c] of offenders.slice(0, 20)) console.log(`  ${String(c).padStart(4)}  ${f}`);
-if (offenders.length > 20) console.log(`  … and ${offenders.length - 20} more files.`);
-console.log('\nNew/changed code must use tokens (bg-surface / text-content / bg-accent / var(--..)) and the');
-console.log('text-title/subtitle/body/caption tiers — never inline #hex, never bg-[#..]. See src/theme/README.md.');
-
-if (strict && total > 0) {
-  console.error(`\n✖ theme:lint:strict — ${total} violations remain.`);
-  process.exit(1);
-}

client/src/App.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, ReactNode } from 'react'
 import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from './store/authStore'
 import { useSettingsStore } from './store/settingsStore'
-import { applyAppearance } from './theme/applyAppearance'
 import { useAddonStore } from './store/addonStore'
 import LoginPage from './pages/LoginPage'
 import ForgotPasswordPage from './pages/ForgotPasswordPage'
@@ -13,7 +12,6 @@ import FilesPage from './pages/FilesPage'
 import AdminPage from './pages/AdminPage'
 import SettingsPage from './pages/SettingsPage'
 import VacayPage from './pages/VacayPage'
-import HelpPage from './pages/HelpPage'
 import AtlasPage from './pages/AtlasPage'
 import JourneyPage from './pages/JourneyPage'
 import JourneyDetailPage from './pages/JourneyDetailPage'
@@ -22,7 +20,6 @@ import SharedTripPage from './pages/SharedTripPage'
 import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
 import OAuthAuthorizePage from './pages/OAuthAuthorizePage'
 import { ToastContainer } from './components/shared/Toast'
-import BackgroundTasksWidget from './components/BackgroundTasks/BackgroundTasksWidget'
 import BottomNav from './components/Layout/BottomNav'
 import { TranslationProvider, useTranslation } from './i18n'
 import { authApi } from './api/client'
@@ -177,21 +174,30 @@ export default function App() {
   const isSharedPage = location.pathname.startsWith('/shared/')
 
   useEffect(() => {
-    const run = () =>
-      applyAppearance({
-        darkMode: settings.dark_mode,
-        appearance: settings.appearance,
-        isSharedPage,
-      })
-    run()
-    // Re-resolve on OS theme change while in auto mode.
-    if (!isSharedPage && settings.dark_mode === 'auto') {
+    // Shared page always forces light mode
+    if (isSharedPage) {
+      document.documentElement.classList.remove('dark')
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', '#ffffff')
+      return
+    }
+
+    const mode = settings.dark_mode
+    const applyDark = (isDark: boolean) => {
+      document.documentElement.classList.toggle('dark', isDark)
+      const meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.setAttribute('content', isDark ? '#09090b' : '#ffffff')
+    }
+
+    if (mode === 'auto') {
       const mq = window.matchMedia('(prefers-color-scheme: dark)')
-      const handler = () => run()
+      applyDark(mq.matches)
+      const handler = (e: MediaQueryListEvent) => applyDark(e.matches)
       mq.addEventListener('change', handler)
       return () => mq.removeEventListener('change', handler)
     }
-  }, [settings.dark_mode, settings.appearance, isSharedPage])
+    applyDark(mode === true || mode === 'dark')
+  }, [settings.dark_mode, isSharedPage])
 
   const isAuthPage = location.pathname.startsWith('/login')
     || location.pathname.startsWith('/register')
@@ -202,7 +208,6 @@ export default function App() {
     <TranslationProvider>
       {!isAuthPage && <SystemNoticeHost />}
       <ToastContainer />
-      {!isAuthPage && <BackgroundTasksWidget />}
       <OfflineBanner />
       <Routes>
         <Route path="/" element={<RootRedirect />} />
@@ -222,22 +227,6 @@ export default function App() {
             </ProtectedRoute>
           }
         />
-        <Route
-          path="/help"
-          element={
-            <ProtectedRoute>
-              <HelpPage />
-            </ProtectedRoute>
-          }
-        />
-        <Route
-          path="/help/:slug"
-          element={
-            <ProtectedRoute>
-              <HelpPage />
-            </ProtectedRoute>
-          }
-        />
         <Route
           path="/trips/:id"
           element={

client/src/api/client.ts

@@ -15,20 +15,18 @@ import {
   type RegisterRequest, type LoginRequest, type ForgotPasswordRequest,
   type ResetPasswordRequest, type ChangePasswordRequest,
   type MfaVerifyLoginRequest, type MfaEnableRequest, type McpTokenCreateRequest,
-  type TripAddMemberRequest, type TripTransferOwnershipRequest,
-  type TripCreateGuestRequest, type TripRenameGuestRequest, type AssignmentReorderRequest,
+  type TripAddMemberRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
   type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest, type DayReorderRequest,
+  type DayCreateRequest, type DayUpdateRequest,
   type PlaceCreateRequest, type PlaceUpdateRequest,
   type ReservationCreateRequest, type ReservationUpdateRequest,
   type AccommodationCreateRequest, type AccommodationUpdateRequest,
   type BudgetCreateItemRequest, type BudgetUpdateItemRequest,
-  type PackingCreateItemRequest, type PackingUpdateItemRequest, type PackingSetSharingRequest,
+  type PackingCreateItemRequest, type PackingUpdateItemRequest,
   type TodoCreateItemRequest, type TodoUpdateItemRequest,
   type AssignmentCreateRequest, type AssignmentParticipantsRequest, type AssignmentTimeRequest,
   type PlaceBulkDeleteRequest,
-  type PlaceBulkUpdateRequest,
   type DayNoteCreateRequest, type DayNoteUpdateRequest,
   type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
   type PackingCategoryAssigneesRequest,
@@ -40,13 +38,9 @@ import {
   type CreateTagRequest, type UpdateTagRequest,
   type CreateCategoryRequest, type UpdateCategoryRequest,
   type PlaceImportListRequest,
-  type BookingImportPreviewItem,
-  type BookingImportPreviewResponse,
-  type BookingImportConfirmResponse,
-  type BookingImportMode,
 } from '@trek/shared'
 import { getSocketId } from './websocket'
-import { probeNow } from '../sync/connectivity'
+import { isReachable, probeNow } from '../sync/connectivity'
 
 /**
  * Validate a response payload against its @trek/shared Zod schema — but only in
@@ -103,7 +97,6 @@ const RATE_LIMIT_MESSAGES: Record<string, string> = {
   ja:      '試行回数が多すぎます。時間をおいて再度お試しください。',
   ko:      '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',
   uk:      'Занадто багато спроб. Спробуйте пізніше.',
-  sv:      'För många försök. Prova igen senare.',
 }
 
 function translateRateLimit(): string {
@@ -178,17 +171,13 @@ apiClient.interceptors.response.use(
       // distinguish a proxy auth challenge from a genuine outage. If the server
       // is reachable, a top-level reload lets the edge proxy run its auth flow.
       if (!error.response && navigator.onLine) {
-        // Only an actual edge-proxy auth wall warrants tearing down the SW to
-        // reauth: a reachable proxy (CF Access / Pangolin) that intercepts /api
-        // with a cross-origin redirect or an HTML login page. A genuine offline
-        // boot ALSO lands here — navigator.onLine reflects a network interface,
-        // not reachability, and is routinely true on mobile while offline. So
-        // gate strictly on a positive proxy signal; on plain offline do nothing
-        // and let the request reject so the cached shell + IndexedDB serve the
-        // app. Unregistering the SW here reloaded into a dead network and broke
-        // PWA offline mode (#1346).
-        const state = await probeNow()
-        if (state === 'proxy-wall') {
+        await probeNow()
+        // Both the original request and the health probe failed while the device
+        // has a network interface. This matches the proxy-auth-challenge pattern
+        // (CF Access / Pangolin intercept all requests and CORS-block XHR).
+        // Guard with sessionStorage to prevent reload loops (server genuinely
+        // down would also land here, but only reloads once).
+        if (!isReachable()) {
           const { pathname } = window.location
           if (!isAuthPublicPath(pathname) && !sessionStorage.getItem('proxy_reauth_attempted')) {
             sessionStorage.setItem('proxy_reauth_attempted', '1')
@@ -269,24 +258,6 @@ export const authApi = {
     create: (name: string) => apiClient.post('/auth/mcp-tokens', { name } satisfies McpTokenCreateRequest).then(r => r.data),
     delete: (id: number) => apiClient.delete(`/auth/mcp-tokens/${id}`).then(r => r.data),
   },
-  passkey: {
-    registerOptions: (password: string) => apiClient.post('/auth/passkey/register/options', { password }).then(r => r.data),
-    registerVerify: (attestationResponse: unknown, name?: string) => apiClient.post('/auth/passkey/register/verify', { attestationResponse, name }).then(r => r.data),
-    loginOptions: () => apiClient.post('/auth/passkey/login/options', {}).then(r => r.data),
-    loginVerify: (assertionResponse: unknown) => apiClient.post('/auth/passkey/login/verify', { assertionResponse }).then(r => r.data as { token: string; user: Record<string, unknown> }),
-    list: () => apiClient.get('/auth/passkey/credentials').then(r => r.data as { credentials: PasskeyCredential[] }),
-    rename: (id: number, name: string) => apiClient.patch(`/auth/passkey/credentials/${id}`, { name }).then(r => r.data),
-    delete: (id: number, password: string) => apiClient.delete(`/auth/passkey/credentials/${id}`, { data: { password } }).then(r => r.data),
-  },
-}
-
-export interface PasskeyCredential {
-  id: number
-  name: string | null
-  device_type: string | null
-  backed_up: boolean
-  created_at: string
-  last_used_at: string | null
 }
 
 export const oauthApi = {
@@ -335,16 +306,11 @@ export const tripsApi = {
   update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
   delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
   uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
-  searchCoverImages: (query: string) => apiClient.get('/trips/cover-images/search', { params: { query } }).then(r => r.data),
   archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
   unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
   getMembers: (id: number | string) => apiClient.get(`/trips/${id}/members`).then(r => r.data),
   addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier } satisfies TripAddMemberRequest).then(r => r.data),
   removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
-  transferOwnership: (id: number | string, newOwnerId: number) => apiClient.post(`/trips/${id}/transfer`, { newOwnerId } satisfies TripTransferOwnershipRequest).then(r => r.data),
-  createGuest: (id: number | string, name: string) => apiClient.post(`/trips/${id}/guests`, { name } satisfies TripCreateGuestRequest).then(r => r.data),
-  renameGuest: (id: number | string, userId: number, name: string) => apiClient.put(`/trips/${id}/guests/${userId}`, { name } satisfies TripRenameGuestRequest).then(r => r.data),
-  deleteGuest: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/guests/${userId}`).then(r => r.data),
   copy: (id: number | string, data?: TripCopyRequest) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
   bundle: (id: number | string) => apiClient.get(`/trips/${id}/bundle`).then(r => r.data),
 }
@@ -354,7 +320,6 @@ export const daysApi = {
   create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
   update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
-  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }
 
 export const placesApi = {
@@ -379,14 +344,12 @@ export const placesApi = {
     if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
-  importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
-  importNaverList: (tripId: number | string, url: string, enrich?: boolean) =>
-      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
+  importGoogleList: (tripId: number | string, url: string) =>
+      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url } satisfies PlaceImportListRequest).then(r => r.data),
+  importNaverList: (tripId: number | string, url: string) =>
+      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
   bulkDelete: (tripId: number | string, ids: number[]) =>
       apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids } satisfies PlaceBulkDeleteRequest).then(r => r.data),
-  bulkUpdate: (tripId: number | string, ids: number[], data: Omit<PlaceBulkUpdateRequest, 'ids'>) =>
-      apiClient.post(`/trips/${tripId}/places/bulk-update`, { ids, ...data } satisfies PlaceBulkUpdateRequest).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -408,13 +371,8 @@ export const packingApi = {
   update: (tripId: number | string, id: number, data: PackingUpdateItemRequest) => apiClient.put(`/trips/${tripId}/packing/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/packing/${id}`).then(r => r.data),
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
-  setSharing: (tripId: number | string, id: number, data: PackingSetSharingRequest) => apiClient.put(`/trips/${tripId}/packing/${id}/sharing`, data).then(r => r.data),
-  clone: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/packing/${id}/clone`).then(r => r.data),
-  addContributor: (tripId: number | string, id: number) => apiClient.post(`/trips/${tripId}/packing/${id}/contributors`).then(r => r.data),
-  removeContributor: (tripId: number | string, id: number, userId: number) => apiClient.delete(`/trips/${tripId}/packing/${id}/contributors/${userId}`).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
-  listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
   setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
@@ -453,48 +411,12 @@ export const adminApi = {
   createUser: (data: Record<string, unknown>) => apiClient.post('/admin/users', data).then(r => r.data),
   updateUser: (id: number, data: Record<string, unknown>) => apiClient.put(`/admin/users/${id}`, data).then(r => r.data),
   deleteUser: (id: number) => apiClient.delete(`/admin/users/${id}`).then(r => r.data),
-  resetUserPasskeys: (id: number) => apiClient.delete(`/admin/users/${id}/passkeys`).then(r => r.data),
   stats: () => apiClient.get('/admin/stats').then(r => r.data),
   saveDemoBaseline: () => apiClient.post('/admin/save-demo-baseline').then(r => r.data),
   getOidc: () => apiClient.get('/admin/oidc').then(r => r.data),
   updateOidc: (data: Record<string, unknown>) => apiClient.put('/admin/oidc', data).then(r => r.data),
   addons: () => apiClient.get('/admin/addons').then(r => r.data),
   updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
-  // Local LLM (Ollama) management for the AI-parsing addon.
-  llmLocalModels: (baseUrl: string): Promise<{ models: { name: string; size: number }[] }> =>
-    apiClient.get('/admin/llm/local/models', { params: { baseUrl } }).then(r => r.data),
-  /** Pull a model, streaming Ollama's NDJSON progress to `onProgress`. */
-  llmLocalPull: async (
-    baseUrl: string,
-    model: string,
-    onProgress: (p: { status?: string; total?: number; completed?: number; error?: string }) => void,
-  ): Promise<void> => {
-    const res = await fetch('/api/admin/llm/local/pull', {
-      method: 'POST',
-      credentials: 'include',
-      headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ baseUrl, model }),
-    })
-    if (!res.ok || !res.body) {
-      let msg = `Pull failed (${res.status})`
-      try { msg = (await res.json())?.error ?? msg } catch { /* non-json */ }
-      throw new Error(msg)
-    }
-    const reader = res.body.getReader()
-    const dec = new TextDecoder()
-    let buf = ''
-    for (;;) {
-      const { done, value } = await reader.read()
-      if (done) break
-      buf += dec.decode(value, { stream: true })
-      const lines = buf.split('\n')
-      buf = lines.pop() ?? ''
-      for (const line of lines) {
-        if (!line.trim()) continue
-        try { onProgress(JSON.parse(line)) } catch { /* skip partial */ }
-      }
-    }
-  },
   checkVersion: () => apiClient.get('/admin/version-check').then(r => r.data),
   getBagTracking: () => apiClient.get('/admin/bag-tracking').then(r => r.data),
   updateBagTracking: (enabled: boolean) => apiClient.put('/admin/bag-tracking', { enabled }).then(r => r.data),
@@ -541,20 +463,6 @@ export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
-export const airtrailApi = {
-  getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
-  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean; writeEnabled?: boolean }) =>
-    apiClient.put('/integrations/airtrail/settings', data).then(r => r.data),
-  status: () => apiClient.get('/integrations/airtrail/status').then(r => r.data),
-  test: (data: { url?: string; apiKey?: string; allowInsecureTls?: boolean }) =>
-    apiClient.post('/integrations/airtrail/test', data).then(r => r.data),
-  sync: (): Promise<{ changed: number }> => apiClient.post('/integrations/airtrail/sync').then(r => r.data),
-  // flights + import are added with the trip-planner import (P2)
-  flights: () => apiClient.get('/integrations/airtrail/flights').then(r => r.data),
-  import: (tripId: number, flightIds: string[]) =>
-    apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, { flightIds }).then(r => r.data),
-}
-
 export const journeyApi = {
   list: () => apiClient.get('/journeys').then(r => r.data),
   create: (data: JourneyCreateRequest) => apiClient.post('/journeys', data).then(r => r.data),
@@ -591,16 +499,9 @@ export const journeyApi = {
       onUploadProgress: opts?.onUploadProgress,
       signal: opts?.signal,
     }).then(r => r.data),
-  uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/video`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
+  addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
-  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) }).then(r => r.data),
+  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   linkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { journey_photo_id: journeyPhotoId }).then(r => r.data),
   unlinkPhoto: (entryId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/entries/${entryId}/photos/${journeyPhotoId}`).then(r => r.data),
   deleteGalleryPhoto: (journeyId: number, journeyPhotoId: number) => apiClient.delete(`/journeys/${journeyId}/gallery/${journeyPhotoId}`).then(r => r.data),
@@ -633,11 +534,6 @@ export const mapsApi = {
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => checkInDev(mapsPlacePhotoResultSchema, r.data, 'maps.placePhoto')),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => checkInDev(mapsReverseResultSchema, r.data, 'maps.reverse')),
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => checkInDev(mapsResolveUrlResultSchema, r.data, 'maps.resolveUrl')),
-  // OSM-only POI explore: places of a category within the current map viewport bbox.
-  // Overpass can be slow on a fresh (uncached) area, so this call gets a longer
-  // timeout than the global default instead of aborting at 8s and showing nothing.
-  pois: (category: string, bbox: { south: number; west: number; north: number; east: number }, signal?: AbortSignal) =>
-    apiClient.get('/maps/pois', { params: { category, ...bbox }, signal, timeout: 20000 }).then(r => r.data as { pois: import('../components/Map/poiCategories').Poi[]; source: string; truncated: boolean; clamped?: boolean }),
 }
 
 export const airportsApi = {
@@ -652,12 +548,8 @@ export const budgetApi = {
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/budget/${id}`).then(r => r.data),
   setMembers: (tripId: number | string, id: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/budget/${id}/members`, { user_ids: userIds } satisfies BudgetUpdateMembersRequest).then(r => r.data),
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid } satisfies BudgetToggleMemberPaidRequest).then(r => r.data),
-  setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
-  settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
-  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
-  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
-  deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
+  settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
   reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
   reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
 }
@@ -685,31 +577,6 @@ export const reservationsApi = {
   update: (tripId: number | string, id: number, data: ReservationUpdateRequest) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
   updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
-  importBookingPreview: (tripId: number | string, files: File[], mode: BookingImportMode = 'no-ai'): Promise<BookingImportPreviewResponse> => {
-    const fd = new FormData()
-    for (const f of files) fd.append('files', f)
-    fd.append('mode', mode)
-    // No client-side timeout: kitinerary + LLM extraction routinely exceeds the
-    // global 8s default (a cold local model alone can take ~45s).
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
-  },
-  importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
-    apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
-  // Start a background parse: returns a job id at once; progress + result arrive
-  // over the WebSocket (import:progress / import:done / import:error).
-  importBookingAsync: (tripId: number | string, files: File[], mode: BookingImportMode = 'no-ai'): Promise<{ jobId: string }> => {
-    const fd = new FormData()
-    for (const f of files) fd.append('files', f)
-    fd.append('mode', mode)
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking/async`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
-  },
-  // Poll a background job — recovery path when a WebSocket push was missed.
-  importJobStatus: (tripId: number | string, jobId: string): Promise<{ status: 'running' | 'done' | 'error'; done: number; total: number; result?: BookingImportPreviewResponse; error?: string }> =>
-    apiClient.get(`/trips/${tripId}/reservations/import/jobs/${jobId}`).then(r => r.data),
-}
-
-export const healthApi = {
-  features: (): Promise<{ bookingImport: boolean; aiParsing: boolean }> => apiClient.get('/health/features').then(r => r.data),
 }
 
 export const weatherApi = {
@@ -722,17 +589,6 @@ export const configApi = {
       apiClient.get('/config').then(r => r.data),
 }
 
-export interface HelpNavItem { title: string; slug: string }
-export interface HelpNavSection { title: string; pages: HelpNavItem[] }
-export interface HelpPageData { slug: string; title: string; markdown: string }
-
-export const helpApi = {
-  index: (): Promise<{ sections: HelpNavSection[] }> =>
-    apiClient.get('/help/index').then(r => r.data),
-  page: (slug: string): Promise<HelpPageData> =>
-    apiClient.get(`/help/page/${encodeURIComponent(slug)}`).then(r => r.data),
-}
-
 export const settingsApi = {
   get: () => apiClient.get('/settings').then(r => r.data),
   set: (key: string, value: unknown) => {
@@ -839,4 +695,4 @@ export const inAppNotificationsApi = {
       apiClient.post(`/notifications/in-app/${id}/respond`, { response }).then(r => r.data),
 }
 
-export default apiClient
+export default apiClient

client/src/api/websocket.ts

@@ -20,12 +20,6 @@ export function getSocketId(): string | null {
   return mySocketId
 }
 
-/** Trip ids the app currently has open (joined). Used to re-hydrate the active
- *  trip's store after the network comes back via the `online` event. */
-export function getActiveTrips(): string[] {
-  return Array.from(activeTrips)
-}
-
 export function setRefetchCallback(fn: RefetchCallback | null): void {
   refetchCallback = fn
 }

client/src/components/Admin/AddonManager.tsx

@@ -4,11 +4,10 @@ import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane, Server, Cloud } from 'lucide-react'
-import CustomSelect from '../shared/CustomSelect'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage } from 'lucide-react'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {
@@ -299,12 +298,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
                   </span>
                 </div>
                 {integrationAddons.map(addon => (
-                  <div key={addon.id}>
-                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
-                    {addon.id === 'llm_parsing' && addon.enabled && (
-                      <LlmParsingConfig addon={addon} />
-                    )}
-                  </div>
+                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
                 ))}
               </div>
             )}
@@ -315,225 +309,6 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
   )
 }
 
-const MASKED = '••••••••'
-const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1'
-
-/** Curated models the local extractor is tuned for, pullable via Ollama. The router drives
- *  one model per document via Ollama's grammar-constrained `format`; "thinking" is disabled
- *  automatically, so the Qwen3 family works without any tuning. A host only needs one. */
-const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended: boolean; vision: boolean }[] = [
-  { id: 'qwen3:8b', label: 'Qwen3 — 8B', note: 'Recommended · best extraction quality & speed on CPU (thinking auto-disabled) · Apache-2.0', recommended: true, vision: false },
-]
-
-/**
- * Instance-wide AI-parsing config. When set, applies to the whole instance and
- * overrides per-user config (see server llmConfig.ts). The API key is masked on
- * read; an unchanged mask is treated as a no-op by the server. For the local
- * provider, it also lists installed Ollama models and can pull NuExtract models.
- */
-function LlmParsingConfig({ addon }: { addon: Addon }) {
-  const toast = useToast()
-  const cfg = (addon.config ?? {}) as Record<string, unknown>
-  const [provider, setProvider] = useState<string>((cfg.provider as string) ?? 'local')
-  const [model, setModel] = useState<string>((cfg.model as string) ?? '')
-  const [baseUrl, setBaseUrl] = useState<string>((cfg.baseUrl as string) ?? '')
-  const [apiKey, setApiKey] = useState<string>((cfg.apiKey as string) ?? '')
-  const [saving, setSaving] = useState(false)
-
-  // Local-provider model management.
-  const [installed, setInstalled] = useState<string[]>([])
-  const [modelsErr, setModelsErr] = useState('')
-  const [loadingModels, setLoadingModels] = useState(false)
-  const [pulling, setPulling] = useState<string | null>(null)
-  const [pullPct, setPullPct] = useState(0)
-  const [pullStatus, setPullStatus] = useState('')
-
-  const effectiveUrl = baseUrl.trim() || DEFAULT_OLLAMA_URL
-  const isInstalled = (id: string) => installed.some(n => n === id || n.startsWith(id + ':') || n.startsWith(id))
-
-  const loadModels = async () => {
-    if (provider !== 'local') return
-    setLoadingModels(true)
-    setModelsErr('')
-    try {
-      const res = await adminApi.llmLocalModels(effectiveUrl)
-      setInstalled(res.models.map(m => m.name))
-    } catch (e: unknown) {
-      setModelsErr(e instanceof Error ? e.message : 'Could not reach the local LLM server')
-      setInstalled([])
-    } finally {
-      setLoadingModels(false)
-    }
-  }
-
-  // Load installed models when the local provider is active.
-  useEffect(() => {
-    if (provider === 'local') loadModels()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [provider])
-
-  const pull = async (id: string) => {
-    if (pulling) return
-    setPulling(id)
-    setPullPct(0)
-    setPullStatus('starting…')
-    try {
-      await adminApi.llmLocalPull(effectiveUrl, id, (p) => {
-        if (p.error) throw new Error(p.error)
-        if (p.status) setPullStatus(p.status)
-        if (p.total && p.completed != null) setPullPct(Math.round((p.completed / p.total) * 100))
-      })
-      toast.success('Model pulled')
-      setModel(id)
-      await loadModels()
-    } catch (e: unknown) {
-      toast.error(e instanceof Error ? e.message : 'Pull failed')
-    } finally {
-      setPulling(null)
-      setPullPct(0)
-      setPullStatus('')
-    }
-  }
-
-  const save = async () => {
-    setSaving(true)
-    try {
-      // Send the masked sentinel unchanged so the server keeps the stored key.
-      await adminApi.updateAddon(addon.id, { config: { provider, model: model.trim(), baseUrl: baseUrl.trim(), apiKey, multimodal: cfg.multimodal === true } })
-      toast.success('Saved')
-    } catch {
-      toast.error('Failed to save')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  const fieldCls = 'w-full rounded-lg border border-edge-secondary bg-surface px-3 py-2 text-sm text-content placeholder:text-content-faint transition-colors focus:border-edge focus:outline-none'
-  const labelCls = 'mb-1.5 block text-xs font-medium text-content-secondary'
-  const sectionCls = 'text-[11px] font-semibold uppercase tracking-wide text-content-faint'
-
-  const providerOptions = [
-    { value: 'local', label: 'Local · OpenAI-compatible', icon: <Server size={14} />, badge: 'Ollama' },
-    { value: 'openai', label: 'OpenAI', icon: <Cloud size={14} /> },
-    { value: 'anthropic', label: 'Anthropic', icon: <Sparkles size={14} /> },
-  ]
-
-  return (
-    <div className="border-b border-edge-secondary bg-surface-secondary py-5 pr-6 pl-[70px]">
-      <div className="max-w-2xl space-y-6">
-        <p className="text-xs text-content-faint">
-          Set instance-wide config (applies to all users). Leave blank to let each user configure their own provider.
-        </p>
-
-        {/* Connection */}
-        <section className="space-y-3">
-          <div className={sectionCls}>Connection</div>
-          <div>
-            <span className={labelCls}>Provider</span>
-            <CustomSelect value={provider} onChange={v => setProvider(String(v))} options={providerOptions} />
-          </div>
-          {provider !== 'anthropic' && (
-            <label className="block">
-              <span className={labelCls}>Base URL</span>
-              <input type="url" autoComplete="off" className={fieldCls} value={baseUrl} onChange={e => setBaseUrl(e.target.value)} onBlur={loadModels} placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'} />
-            </label>
-          )}
-          <label className="block">
-            <span className={labelCls}>API key</span>
-            <input type="password" className={fieldCls} value={apiKey} onChange={e => setApiKey(e.target.value)} placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'} />
-          </label>
-          {provider === 'anthropic' && (
-            <p className="text-xs text-content-faint">Anthropic reads PDFs (including scans) natively. Local/OpenAI models receive extracted text — scanned PDFs need Anthropic.</p>
-          )}
-        </section>
-
-        {/* Model */}
-        <section className="space-y-3">
-          <div className={sectionCls}>Model</div>
-          <label className="block">
-            <input autoComplete="off" className={fieldCls} value={model} onChange={e => setModel(e.target.value)} placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'} />
-          </label>
-
-          {/* Local model management (Ollama) */}
-          {provider === 'local' && (
-            <div className="space-y-3 rounded-lg border border-edge-secondary bg-surface p-3">
-              <div className="flex items-center justify-between">
-                <span className="text-xs font-medium text-content-secondary">Installed on the server</span>
-                <button onClick={loadModels} disabled={loadingModels} className="text-xs text-content-muted underline disabled:opacity-60">
-                  {loadingModels ? 'Loading…' : 'Refresh'}
-                </button>
-              </div>
-              {modelsErr && <p className="text-xs text-rose-600">{modelsErr}</p>}
-              {!modelsErr && installed.length === 0 && !loadingModels && (
-                <p className="text-xs text-content-faint">No models installed yet — pull one below.</p>
-              )}
-              {installed.length > 0 && (
-                <div className="flex flex-wrap gap-1.5">
-                  {installed.map(name => (
-                    <button
-                      key={name}
-                      title={name}
-                      onClick={() => setModel(name)}
-                      className={`max-w-full truncate rounded-full border px-2.5 py-1 text-xs transition-colors ${model === name ? 'border-transparent bg-accent text-accent-text' : 'border-edge-secondary text-content-secondary hover:border-edge'}`}
-                    >
-                      {name}
-                    </button>
-                  ))}
-                </div>
-              )}
-
-              <div className="border-t border-edge-secondary pt-3">
-                <div className="mb-2 text-xs font-medium text-content-secondary">Pull a recommended model</div>
-                <div className="space-y-1">
-                  {RECOMMENDED_MODELS.map(m => {
-                    const installedHere = isInstalled(m.id)
-                    const isPulling = pulling === m.id
-                    const active = model === m.id
-                    return (
-                      <div key={m.id} className={`flex items-center gap-3 rounded-lg border px-3 py-2 transition-colors ${active ? 'border-edge-secondary bg-surface-secondary' : 'border-transparent'}`}>
-                        <div className="min-w-0 flex-1">
-                          <div className="flex items-center gap-2">
-                            <span className="text-sm text-content">{m.label}</span>
-                            {m.recommended && (
-                              <span className="rounded-md bg-[rgba(16,185,129,0.15)] px-1.5 py-px text-[10px] font-semibold text-emerald-600">Recommended</span>
-                            )}
-                          </div>
-                          <div className="text-xs text-content-faint">{m.note}</div>
-                          {isPulling && (
-                            <div className="mt-1.5">
-                              <div className="h-1.5 w-full overflow-hidden rounded-full bg-surface-tertiary">
-                                <div className="h-full bg-accent transition-[width] duration-200" style={{ width: `${pullPct}%` }} />
-                              </div>
-                              <div className="mt-0.5 text-[10px] text-content-faint">{pullStatus}{pullPct ? ` · ${pullPct}%` : ''}</div>
-                            </div>
-                          )}
-                        </div>
-                        {installedHere ? (
-                          <button onClick={() => setModel(m.id)} disabled={active} className={`shrink-0 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${active ? 'bg-surface-tertiary text-content-muted' : 'border border-edge-secondary text-content-secondary hover:border-edge'}`}>
-                            {active ? 'Selected' : 'Use'}
-                          </button>
-                        ) : (
-                          <button onClick={() => pull(m.id)} disabled={!!pulling} className="shrink-0 rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-text disabled:opacity-60">
-                            {isPulling ? 'Pulling…' : 'Pull'}
-                          </button>
-                        )}
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-          )}
-        </section>
-
-        <button onClick={save} disabled={saving} className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-text transition-opacity disabled:opacity-60">
-          {saving ? 'Saving…' : 'Save'}
-        </button>
-      </div>
-    </div>
-  )
-}
-
 interface AddonRowProps {
   addon: Addon
   onToggle: (addon: Addon) => void

client/src/components/Admin/BackupPanel.tsx

@@ -473,10 +473,10 @@ export default function BackupPanel() {
                 <AlertTriangle size={20} className="text-white" />
               </div>
               <div>
-                <h3 className="text-white" style={{ margin: 0, fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700 }}>
+                <h3 className="text-white" style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>
                   {t('backup.restoreConfirmTitle')}
                 </h3>
-                <p className="text-[rgba(255,255,255,0.8)]" style={{ margin: '2px 0 0', fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>
+                <p className="text-[rgba(255,255,255,0.8)]" style={{ margin: '2px 0 0', fontSize: 12 }}>
                   {restoreConfirm.filename}
                 </p>
               </div>
@@ -484,11 +484,11 @@ export default function BackupPanel() {
 
             {/* Body */}
             <div style={{ padding: '20px 24px' }}>
-              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', lineHeight: 1.6, margin: 0 }}>
+              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
                 {t('backup.restoreWarning')}
               </p>
 
-              <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 10, fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.5 }}
+              <div style={{ marginTop: 14, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
                 className="bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800"
               >
                 {t('backup.restoreTip')}
@@ -500,14 +500,14 @@ export default function BackupPanel() {
               <button
                 onClick={() => setRestoreConfirm(null)}
                 className="text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700"
-                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
+                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
               >
                 {t('common.cancel')}
               </button>
               <button
                 onClick={executeRestore}
                 className="bg-[#dc2626] text-white"
-                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
+                style={{ padding: '9px 20px', borderRadius: 10, fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}
                 onMouseEnter={e => e.currentTarget.style.background = '#b91c1c'}
                 onMouseLeave={e => e.currentTarget.style.background = '#dc2626'}
               >

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -6,17 +6,7 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
-import type { DistanceUnit, Place } from '../../types'
-import {
-  MAPBOX_DEFAULT_STYLE,
-  defaultStyleForProvider,
-  getStylePresets,
-  isOpenFreeMapStyle,
-  normalizeStyleForProvider,
-  styleSettingKey,
-  type GlMapProvider,
-} from '../Map/glProviders'
+import type { Place } from '../../types'
 
 const MAP_PRESETS = [
   { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -28,30 +18,10 @@ const MAP_PRESETS = [
 
 type Defaults = {
   temperature_unit?: string
-  distance_unit?: DistanceUnit
   dark_mode?: string | boolean
   time_format?: string
-  default_currency?: string
   blur_booking_codes?: boolean
   map_tile_url?: string
-  map_provider?: string
-  mapbox_access_token?: string
-  mapbox_style?: string
-  maplibre_style?: string
-  mapbox_3d_enabled?: boolean
-  mapbox_quality_mode?: boolean
-}
-
-type MapProvider = 'leaflet' | GlMapProvider
-
-function normalizeProvider(value: unknown): MapProvider {
-  return value === 'mapbox-gl' || value === 'maplibre-gl' ? value : 'leaflet'
-}
-
-function styleForProvider(provider: MapProvider, style?: string | null): string {
-  if (provider === 'leaflet') return style || MAPBOX_DEFAULT_STYLE
-  if (provider === 'mapbox-gl' && isOpenFreeMapStyle(style)) return MAPBOX_DEFAULT_STYLE
-  return normalizeStyleForProvider(provider, style)
 }
 
 function OptionRow({
@@ -89,7 +59,7 @@ function OptionButton({
       style={{
         display: 'flex', alignItems: 'center', gap: 8,
         padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
-        fontFamily: 'inherit', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 500,
+        fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
         border: active ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
         background: active ? 'var(--bg-hover)' : 'var(--bg-card)',
         color: 'var(--text-primary)',
@@ -107,16 +77,11 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const [defaults, setDefaults] = useState<Defaults>({})
   const [loaded, setLoaded] = useState(false)
   const [mapTileUrl, setMapTileUrl] = useState('')
-  const [mapboxToken, setMapboxToken] = useState('')
-  const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
     adminApi.getDefaultUserSettings().then((data: Defaults) => {
-      const provider = normalizeProvider(data.map_provider)
       setDefaults(data)
       setMapTileUrl(data.map_tile_url || '')
-      setMapboxToken(data.mapbox_access_token || '')
-      setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
       setLoaded(true)
     }).catch(() => setLoaded(true))
   }, [])
@@ -136,11 +101,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       const updated = await adminApi.updateDefaultUserSettings({ [key]: null })
       setDefaults(updated)
       if (key === 'map_tile_url') setMapTileUrl('')
-      if (key === 'mapbox_access_token') setMapboxToken('')
-      if (key === 'mapbox_style' || key === 'maplibre_style') {
-        const provider = normalizeProvider(defaults.map_provider)
-        setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
-      }
       toast.success(t('admin.defaultSettings.reset'))
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.error'))
@@ -186,24 +146,10 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   }], [])
 
   if (!loaded) {
-    return <p className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontStyle: 'italic', padding: 16 }}>Loading…</p>
+    return <p className="text-content-faint" style={{ fontSize: 12, fontStyle: 'italic', padding: 16 }}>Loading…</p>
   }
 
   const darkMode = defaults.dark_mode
-  const mapProvider = normalizeProvider(defaults.map_provider)
-  const glStylePresets = mapProvider === 'leaflet' ? [] : getStylePresets(mapProvider)
-  const styleKey: keyof Defaults = mapProvider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
-  const saveMapProvider = (nextProvider: MapProvider) => {
-    const patch: Partial<Defaults> = { map_provider: nextProvider }
-    if (nextProvider !== 'leaflet') {
-      // Load + save the new provider's own style slot so the other provider's style is kept.
-      const slot = nextProvider === 'maplibre-gl' ? defaults.maplibre_style : defaults.mapbox_style
-      const nextStyle = styleForProvider(nextProvider, slot)
-      setMapboxStyle(nextStyle)
-      patch[styleSettingKey(nextProvider)] = nextStyle
-    }
-    save(patch)
-  }
 
   return (
     <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
@@ -244,22 +190,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         ))}
       </OptionRow>
 
-      {/* Distance */}
-      <OptionRow label={<>{t('settings.distance')} <ResetButton field="distance_unit" /></>}>
-        {([
-          { value: 'metric', label: 'km Metric' },
-          { value: 'imperial', label: 'mi Imperial' },
-        ] as const).map(opt => (
-          <OptionButton
-            key={opt.value}
-            active={defaults.distance_unit === opt.value}
-            onClick={() => save({ distance_unit: opt.value })}
-          >
-            {opt.label}
-          </OptionButton>
-        ))}
-      </OptionRow>
-
       {/* Time Format */}
       <OptionRow label={<>{t('settings.timeFormat')} <ResetButton field="time_format" /></>}>
         {([
@@ -276,23 +206,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
         ))}
       </OptionRow>
 
-      {/* Default Currency */}
-      <div>
-        <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-          {t('settings.currency')} <ResetButton field="default_currency" />
-        </label>
-        <CustomSelect
-          value={defaults.default_currency || ''}
-          onChange={(value: string) => { if (value) save({ default_currency: value }) }}
-          placeholder={t('settings.currency')}
-          searchable
-          options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
-          size="sm"
-          style={{ maxWidth: 240 }}
-        />
-        <p className="text-xs mt-1 text-content-faint">{t('settings.currencyHint')}</p>
-      </div>
-
       {/* Blur Booking Codes */}
       <OptionRow label={<>{t('settings.blurBookingCodes')} <ResetButton field="blur_booking_codes" /></>}>
         {([
@@ -354,105 +267,6 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           })}
         </div>
       </div>
-
-      {/* ── Map provider / instance-wide Mapbox ───────────────────────── */}
-      <div style={{ borderTop: '1px solid var(--border-primary)', paddingTop: 20, marginTop: 4 }}>
-        <OptionRow
-          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton field="map_provider" /></>}
-          hint={t('admin.defaultSettings.mapProviderHint')}
-        >
-          {([
-            { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
-            { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
-            { value: 'maplibre-gl', label: t('admin.defaultSettings.providerMapLibre') },
-          ] as const).map(opt => (
-            <OptionButton
-              key={opt.value}
-              active={mapProvider === opt.value}
-              onClick={() => saveMapProvider(opt.value)}
-            >
-              {opt.label}
-            </OptionButton>
-          ))}
-        </OptionRow>
-
-        {mapProvider !== 'leaflet' && (
-          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
-            {mapProvider === 'mapbox-gl' && (
-            <div>
-              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-                {t('admin.defaultSettings.mapboxToken')}
-                <ResetButton field="mapbox_access_token" />
-              </label>
-              <input
-                type="text"
-                value={mapboxToken}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxToken(e.target.value)}
-                onBlur={() => save({ mapbox_access_token: mapboxToken })}
-                placeholder="pk.eyJ…"
-                spellCheck={false}
-                autoComplete="off"
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-              <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.mapboxTokenHint')}</p>
-            </div>
-            )}
-
-            <div>
-              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
-                {t('admin.defaultSettings.mapboxStyle')}
-                <ResetButton field={styleKey} />
-              </label>
-              <CustomSelect
-                value={mapboxStyle}
-                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ [styleKey]: value }) } }}
-                placeholder={t('admin.defaultSettings.mapboxStylePlaceholder')}
-                options={glStylePresets.map(p => ({ value: p.url, label: p.name }))}
-                size="sm"
-                style={{ marginBottom: 8 }}
-              />
-              <input
-                type="text"
-                value={mapboxStyle}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxStyle(e.target.value)}
-                onBlur={() => {
-                  const nextStyle = normalizeStyleForProvider(mapProvider, mapboxStyle)
-                  setMapboxStyle(nextStyle)
-                  save({ [styleKey]: nextStyle })
-                }}
-                placeholder={defaultStyleForProvider(mapProvider)}
-                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
-              />
-            </div>
-
-            {mapProvider === 'mapbox-gl' && (
-            <>
-            <OptionRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
-              {([
-                { value: true, label: t('settings.on') || 'On' },
-                { value: false, label: t('settings.off') || 'Off' },
-              ] as const).map(opt => (
-                <OptionButton key={String(opt.value)} active={(defaults.mapbox_3d_enabled ?? true) === opt.value} onClick={() => save({ mapbox_3d_enabled: opt.value })}>
-                  {opt.label}
-                </OptionButton>
-              ))}
-            </OptionRow>
-
-            <OptionRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton field="mapbox_quality_mode" /></>}>
-              {([
-                { value: true, label: t('settings.on') || 'On' },
-                { value: false, label: t('settings.off') || 'Off' },
-              ] as const).map(opt => (
-                <OptionButton key={String(opt.value)} active={(defaults.mapbox_quality_mode ?? false) === opt.value} onClick={() => save({ mapbox_quality_mode: opt.value })}>
-                  {opt.label}
-                </OptionButton>
-              ))}
-            </OptionRow>
-            </>
-            )}
-          </div>
-        )}
-      </div>
     </Section>
   )
 }

client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx

@@ -1,163 +0,0 @@
-import ReactDOM from 'react-dom'
-import { useEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Loader2, CheckCircle2, AlertCircle, X } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { addListener, removeListener } from '../../api/websocket'
-import { reservationsApi } from '../../api/client'
-import { useBackgroundTasksStore, type BackgroundImportTask } from '../../store/backgroundTasksStore'
-
-/**
- * Global, route-independent widget (bottom-right) that tracks background booking
- * imports. Mounted once at the app root so it survives navigation. It listens to the
- * user's WebSocket for import:progress / import:done / import:error and reflects each
- * job; a finished job offers a "review" action that takes the user to the trip, where
- * the per-item review flow opens. Polls running jobs as a backstop for missed pushes.
- */
-export default function BackgroundTasksWidget() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const tasks = useBackgroundTasksStore((s) => s.tasks)
-  const setProgress = useBackgroundTasksStore((s) => s.setProgress)
-  const setDone = useBackgroundTasksStore((s) => s.setDone)
-  const setError = useBackgroundTasksStore((s) => s.setError)
-  const requestReview = useBackgroundTasksStore((s) => s.requestReview)
-  const dismiss = useBackgroundTasksStore((s) => s.dismiss)
-
-  // On (re)load, reconcile tasks restored from localStorage with the server: a parse
-  // that was still running when the page reloaded must keep its widget, so re-fetch each
-  // job's real status (and its parsed items) once. A job the server has since dropped
-  // (404, expired) is removed so no stale card lingers.
-  const didRehydrate = useRef(false)
-  useEffect(() => {
-    if (didRehydrate.current) return
-    didRehydrate.current = true
-    const restored = useBackgroundTasksStore.getState().tasks
-    for (const task of restored) {
-      reservationsApi
-        .importJobStatus(task.tripId, task.id)
-        .then((s) => {
-          if (s.status === 'done') setDone(task.id, task.tripId, (s.result?.items ?? []) as never, s.result?.warnings ?? [])
-          else if (s.status === 'error') setError(task.id, task.tripId, s.error ?? 'error')
-          else setProgress(task.id, task.tripId, s.done, s.total)
-        })
-        .catch((err: { response?: { status?: number } }) => {
-          if (err?.response?.status === 404) dismiss(task.id)
-        })
-    }
-    // run once on mount against whatever was rehydrated from storage
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Server pushes import:* to the user on whatever page they're on.
-  useEffect(() => {
-    const handler = (e: Record<string, unknown>) => {
-      const type = typeof e.type === 'string' ? e.type : ''
-      if (!type.startsWith('import:')) return
-      const id = String(e.jobId ?? '')
-      const tripId = String(e.tripId ?? '')
-      if (!id) return
-      if (type === 'import:progress') setProgress(id, tripId, Number(e.done ?? 0), Number(e.total ?? 1))
-      else if (type === 'import:done') {
-        const result = e.result as { items?: unknown[]; warnings?: string[] } | undefined
-        setDone(id, tripId, (result?.items ?? []) as never, result?.warnings ?? [])
-      } else if (type === 'import:error') setError(id, tripId, String(e.message ?? 'error'))
-    }
-    addListener(handler)
-    return () => removeListener(handler)
-  }, [setProgress, setDone, setError])
-
-  // Backstop: poll jobs whose state we still need — running ones (in case a WebSocket push
-  // was missed) and a restored 'done' task whose items haven't been re-fetched yet (so a
-  // failed one-shot rehydrate self-heals instead of getting stuck on "preview empty").
-  useEffect(() => {
-    const pending = tasks.filter((task) => task.status === 'running' || (task.status === 'done' && task.items === undefined))
-    if (pending.length === 0) return
-    const iv = setInterval(() => {
-      for (const task of pending) {
-        reservationsApi
-          .importJobStatus(task.tripId, task.id)
-          .then((s) => {
-            if (s.status === 'done') setDone(task.id, task.tripId, (s.result?.items ?? []) as never, s.result?.warnings ?? [])
-            else if (s.status === 'error') setError(task.id, task.tripId, s.error ?? 'error')
-            else setProgress(task.id, task.tripId, s.done, s.total)
-          })
-          .catch(() => {})
-      }
-    }, 5000)
-    return () => clearInterval(iv)
-  }, [tasks, setProgress, setDone, setError])
-
-  if (tasks.length === 0) return null
-
-  const review = (task: BackgroundImportTask) => {
-    requestReview(task.id)
-    navigate(`/trips/${task.tripId}`)
-  }
-
-  return ReactDOM.createPortal(
-    <div
-      style={{ position: 'fixed', right: 16, bottom: 16, zIndex: 50000, display: 'flex', flexDirection: 'column', gap: 8, width: 380, maxWidth: 'calc(100vw - 32px)', fontFamily: 'var(--font-system)' }}
-    >
-      {tasks.map((task) => (
-        <div
-          key={task.id}
-          className="bg-surface-card"
-          style={{ borderRadius: 12, border: '1px solid var(--border-primary)', boxShadow: '0 8px 24px rgba(0,0,0,0.18)', padding: '11px 13px', backdropFilter: 'blur(8px)', display: 'flex', gap: 10, alignItems: 'flex-start' }}
-        >
-          <div style={{ flexShrink: 0, marginTop: 1 }}>
-            {(task.status === 'running' || (task.status === 'done' && task.items === undefined)) && <Loader2 size={16} className="animate-spin" color="var(--accent)" />}
-            {task.status === 'done' && task.items !== undefined && <CheckCircle2 size={16} color="#10b981" />}
-            {task.status === 'error' && <AlertCircle size={16} color="#ef4444" />}
-          </div>
-
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {task.label}
-            </div>
-
-            {task.status === 'running' && (
-              <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>
-                {t('reservations.import.parsing')}
-                {task.total > 1 ? ` · ${task.done}/${task.total}` : ''}
-              </div>
-            )}
-
-            {task.status === 'done' && (
-              task.items === undefined ? (
-                // Restored from a reload; items are being re-fetched (see the poll backstop).
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.parsing')}</div>
-              ) : task.items.length > 0 ? (
-                <button
-                  onClick={() => review(task)}
-                  className="bg-accent text-accent-text"
-                  style={{ marginTop: 4, border: 'none', borderRadius: 8, padding: '4px 12px', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}
-                >
-                  {t('common.import')}
-                </button>
-              ) : (
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.previewEmpty')}</div>
-              )
-            )}
-
-            {task.status === 'error' && (
-              <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b91c1c', marginTop: 1, whiteSpace: 'pre-wrap' }}>{task.error}</div>
-            )}
-          </div>
-
-          {task.status !== 'running' && (
-            <button
-              onClick={() => dismiss(task.id)}
-              className="bg-transparent text-content-faint"
-              style={{ flexShrink: 0, border: 'none', cursor: 'pointer', padding: 2, borderRadius: 6, display: 'flex', alignItems: 'center' }}
-              aria-label={t('common.close')}
-            >
-              <X size={13} />
-            </button>
-          )}
-        </div>
-      ))}
-    </div>,
-    document.body
-  )
-}

client/src/components/Budget/BudgetPanel.tsx

@@ -38,14 +38,14 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
         <div style={{ width: 64, height: 64, borderRadius: 16, background: 'var(--bg-tertiary)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 20px' }}>
           <Calculator size={28} color="#6b7280" />
         </div>
-        <h2 style={{ fontSize: 'calc(20px * var(--fs-scale-title, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{t('budget.emptyTitle')}</h2>
-        <p style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', margin: '0 0 24px', lineHeight: 1.5 }}>{t('budget.emptyText')}</p>
+        <h2 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>{t('budget.emptyTitle')}</h2>
+        <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 24px', lineHeight: 1.5 }}>{t('budget.emptyText')}</p>
         {canEdit && (
           <div style={{ display: 'flex', gap: 6, justifyContent: 'center', alignItems: 'stretch', maxWidth: 320, margin: '0 auto' }}>
             <input value={newCategoryName} onChange={e => setNewCategoryName(e.target.value)}
               onKeyDown={e => e.key === 'Enter' && handleAddCategory()}
               placeholder={t('budget.emptyPlaceholder')}
-              style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
+              style={{ flex: 1, padding: '9px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', minWidth: 0 }} />
             <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
               style={{ background: 'var(--accent)', color: 'var(--accent-text)', border: 'none', borderRadius: 10, padding: '0 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', opacity: newCategoryName.trim() ? 1 : 0.5, flexShrink: 0 }}>
               <Plus size={16} />
@@ -65,7 +65,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
           padding: '14px 16px 14px 22px',
           display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
         }}>
-          <h2 style={{ margin: 0, fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
             {t('budget.title')}
           </h2>
           <div className="flex flex-wrap max-md:!w-full max-md:!mt-2" style={{ alignItems: 'center', gap: 8, marginLeft: 'auto', flexShrink: 0 }}>
@@ -85,14 +85,14 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                   onChange={e => setNewCategoryName(e.target.value)}
                   onKeyDown={e => { if (e.key === 'Enter') handleAddCategory() }}
                   placeholder={t('budget.categoryName')}
-                  style={{ flex: 1, minWidth: 0, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none', fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+                  style={{ flex: 1, minWidth: 0, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '9px 14px', fontSize: 13, outline: 'none', fontFamily: 'inherit', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
                 />
                 <button onClick={handleAddCategory} disabled={!newCategoryName.trim()}
                   title={t('budget.addCategory')}
                   style={{
                     appearance: 'none', border: 'none', cursor: newCategoryName.trim() ? 'pointer' : 'default', fontFamily: 'inherit',
                     display: 'inline-flex', alignItems: 'center', gap: 6,
-                    padding: '9px 14px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
+                    padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
                     background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
                     opacity: newCategoryName.trim() ? 1 : 0.4,
                     transition: 'opacity 0.15s ease',
@@ -105,7 +105,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
               style={{
                 appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                 display: 'inline-flex', alignItems: 'center', gap: 6,
-                padding: '9px 14px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
+                padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
                 background: 'var(--accent)', color: 'var(--accent-text)', flexShrink: 0,
                 transition: 'opacity 0.15s ease',
               }}

client/src/components/Budget/BudgetPanelAddItemRow.tsx

@@ -23,7 +23,7 @@ export default function AddItemRow({ onAdd, t }: AddItemRowProps) {
     setTimeout(() => nameRef.current?.focus(), 50)
   }
 
-  const inp = { border: '1px solid var(--border-primary)', borderRadius: 4, padding: '4px 6px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none', fontFamily: 'inherit', width: '100%', background: 'var(--bg-input)', color: 'var(--text-primary)' }
+  const inp = { border: '1px solid var(--border-primary)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', fontFamily: 'inherit', width: '100%', background: 'var(--bg-input)', color: 'var(--text-primary)' }
 
   return (
     <tr className="bg-surface-secondary">
@@ -44,9 +44,9 @@ export default function AddItemRow({ onAdd, t }: AddItemRowProps) {
         <input value={days} onChange={e => setDays(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
           placeholder="-" inputMode="numeric" style={{ ...inp, textAlign: 'center', maxWidth: 60, margin: '0 auto' }} />
       </td>
-      <td className="hidden md:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'center' }}>-</td>
-      <td className="hidden md:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'center' }}>-</td>
-      <td className="hidden lg:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'center' }}>-</td>
+      <td className="hidden md:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden md:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 12, textAlign: 'center' }}>-</td>
+      <td className="hidden lg:table-cell text-content-faint" style={{ padding: '4px 6px', fontSize: 12, textAlign: 'center' }}>-</td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
         <div style={{ maxWidth: 90, margin: '0 auto' }}>
           <CustomDatePicker value={expenseDate} onChange={setExpenseDate} placeholder="-" compact />

client/src/components/Budget/BudgetPanelCategoryTable.tsx

@@ -103,11 +103,11 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                         onChange={e => setEditingCat({ ...editingCat, value: e.target.value })}
                         onBlur={() => { handleRenameCategory(cat, editingCat.value); setEditingCat(null) }}
                         onKeyDown={e => { if (e.key === 'Enter') { handleRenameCategory(cat, editingCat.value); setEditingCat(null) } if (e.key === 'Escape') setEditingCat(null) }}
-                        style={{ fontWeight: 600, fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: 4, color: '#fff', padding: '1px 6px', outline: 'none', fontFamily: 'inherit', width: '100%' }}
+                        style={{ fontWeight: 600, fontSize: 13, background: 'rgba(255,255,255,0.15)', border: 'none', borderRadius: 4, color: '#fff', padding: '1px 6px', outline: 'none', fontFamily: 'inherit', width: '100%' }}
                       />
                     ) : (
                       <>
-                        <span style={{ fontWeight: 600, fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{cat}</span>
+                        <span style={{ fontWeight: 600, fontSize: 13 }}>{cat}</span>
                         {canEdit && (
                           <button onClick={() => setEditingCat({ name: cat, value: cat })}
                             style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.4)', display: 'flex', padding: 1 }}
@@ -119,7 +119,7 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                     )}
                   </div>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, opacity: 0.9 }}>{fmt(subtotal, currency)}</span>
+                    <span style={{ fontSize: 13, fontWeight: 500, opacity: 0.9 }}>{fmt(subtotal, currency)}</span>
                     {canEdit && (
                       <button onClick={() => handleDeleteCategory(cat)} title={t('budget.deleteCategory')}
                         style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 4, color: '#fff', cursor: 'pointer', padding: '3px 6px', display: 'flex', alignItems: 'center', opacity: 0.6 }}
@@ -233,7 +233,7 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                                   <CustomDatePicker value={item.expense_date || ''} onChange={v => handleUpdateField(item.id, 'expense_date', v || null)} placeholder="—" compact borderless />
                                 </div>
                               ) : (
-                                <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: item.expense_date ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{item.expense_date || '—'}</span>
+                                <span style={{ fontSize: 11, color: item.expense_date ? 'var(--text-secondary)' : 'var(--text-faint)' }}>{item.expense_date || '—'}</span>
                               )}
                             </td>
                             <td className="hidden sm:table-cell" style={td}><InlineEditCell value={item.note} onSave={v => handleUpdateField(item.id, 'note', v)} placeholder={t('budget.table.note')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} /></td>

client/src/components/Budget/BudgetPanelInlineEditCell.tsx

@@ -50,7 +50,7 @@ export default function InlineEditCell({ value, onSave, type = 'text', style = {
     return <input ref={inputRef} type="text" inputMode={type === 'number' ? 'decimal' : 'text'} value={editValue}
       onChange={e => setEditValue(e.target.value)} onBlur={save} onPaste={handlePaste}
       onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setEditValue(value ?? ''); setEditing(false) } }}
-      style={{ width: '100%', border: '1px solid var(--accent)', borderRadius: 4, padding: '4px 6px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', ...style }}
+      style={{ width: '100%', border: '1px solid var(--accent)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', ...style }}
       placeholder={placeholder} />
   }
 
@@ -62,7 +62,7 @@ export default function InlineEditCell({ value, onSave, type = 'text', style = {
     <div onClick={() => { if (readOnly) return; setEditValue(value ?? ''); setEditing(true) }} title={readOnly ? undefined : editTooltip}
       style={{ cursor: readOnly ? 'default' : 'pointer', padding: '2px 4px', borderRadius: 4, minHeight: 22, display: 'flex', alignItems: 'center',
         justifyContent: style?.textAlign === 'center' ? 'center' : 'flex-start', transition: 'background 0.15s',
-        color: display ? 'var(--text-primary)' : 'var(--text-faint)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', ...style }}
+        color: display ? 'var(--text-primary)' : 'var(--text-faint)', fontSize: 13, ...style }}
       onMouseEnter={e => { if (!readOnly) e.currentTarget.style.background = 'var(--bg-hover)' }}
       onMouseLeave={e => { if (!readOnly) e.currentTarget.style.background = 'transparent' }}>
       {display || placeholder || '-'}

client/src/components/Budget/BudgetPanelMemberChips.tsx

@@ -7,7 +7,6 @@ export interface TripMember {
   id: number
   username: string
   avatar_url?: string | null
-  is_guest?: boolean
 }
 
 // ── Chip with custom tooltip ─────────────────────────────────────────────────
@@ -57,13 +56,13 @@ export function ChipWithTooltip({ label, avatarUrl, size = 20, paid, onClick }:
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
           display: 'flex', alignItems: 'center', gap: 5,
           background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
+          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
           boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
         }}>
           {label}
           {paid && (
             <span style={{
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, padding: '1px 5px', borderRadius: 4,
+              fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 4,
               background: 'rgba(34,197,94,0.15)', color: '#16a34a',
               textTransform: 'uppercase', letterSpacing: '0.03em',
             }}>Paid</span>
@@ -152,14 +151,14 @@ export default function BudgetMemberChips({ members = [], tripMembers = [], onSe
               <button key={tm.id} onClick={() => toggleMember(tm.id)} style={{
                 display: 'flex', alignItems: 'center', gap: 6, width: '100%', padding: '5px 8px',
                 borderRadius: 6, border: 'none', background: isActive ? 'var(--bg-hover)' : 'none', cursor: 'pointer',
-                fontFamily: 'inherit', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-primary)', textAlign: 'left',
+                fontFamily: 'inherit', fontSize: 11, color: 'var(--text-primary)', textAlign: 'left',
               }}
                 onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = 'var(--bg-hover)' }}
                 onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = 'none' }}
               >
                 <div style={{
                   width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 700,
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 8, fontWeight: 700,
                   color: 'var(--text-muted)', overflow: 'hidden', flexShrink: 0,
                 }}>
                   {tm.avatar_url

client/src/components/Budget/BudgetPanelPerPersonInline.tsx

@@ -51,10 +51,10 @@ export default function PerPersonInline({ tripId, budgetItems, currency, locale,
             <div key={p.user_id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0' }}>
               <RingAvatar userId={p.user_id} username={p.username} avatarUrl={p.avatar_url} size={34} innerBg={theme.centerBg} textColor={theme.text} />
               <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', fontWeight: 500, letterSpacing: '-0.01em', color: theme.text }}>{p.username}</div>
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: theme.faint, marginTop: 1 }}>{percent}%</div>
+                <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text }}>{p.username}</div>
+                <div style={{ fontSize: 11, color: theme.faint, marginTop: 1 }}>{percent}%</div>
               </div>
-              <div style={{ fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>{fmt(p.total_assigned)}</div>
+              <div style={{ fontSize: 13.5, fontWeight: 600, color: theme.text, letterSpacing: '-0.01em' }}>{fmt(p.total_assigned)}</div>
             </div>
           )
         })}

client/src/components/Budget/BudgetPanelPieChart.tsx

@@ -46,7 +46,7 @@ export default function PieChart({ segments, size = 200, totalLabel }: PieChartP
         boxShadow: 'inset 0 0 12px rgba(0,0,0,0.04)',
       }}>
         <Wallet size={18} color="var(--text-faint)" style={{ marginBottom: 2 }} />
-        <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 500 }}>{totalLabel}</span>
+        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 500 }}>{totalLabel}</span>
       </div>
     </div>
   )

client/src/components/Budget/BudgetPanelSummary.tsx

@@ -47,7 +47,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                 <Wallet size={20} strokeWidth={2} />
               </div>
               <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: theme.faint, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.09em' }}>{t('budget.totalBudget')}</div>
+                <div style={{ fontSize: 11, color: theme.faint, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.09em' }}>{t('budget.totalBudget')}</div>
               </div>
             </div>
 
@@ -58,13 +58,13 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
               const [integerPart, decimalPart] = decimals > 0 ? full.split(sep) : [full, '']
               return (
                 <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, letterSpacing: '-0.03em', lineHeight: 1 }}>
-                  <span style={{ fontSize: 'calc(38px * var(--fs-scale-title, 1))', fontWeight: 700 }}>{integerPart}</span>
-                  {decimalPart && <span style={{ fontSize: 'calc(22px * var(--fs-scale-title, 1))', fontWeight: 500, color: theme.sub }}>{sep}{decimalPart}</span>}
-                  <span style={{ fontSize: 'calc(22px * var(--fs-scale-title, 1))', fontWeight: 500, color: theme.sub, marginLeft: 2 }}>{SYMBOLS[currency] || currency}</span>
+                  <span style={{ fontSize: 38, fontWeight: 700 }}>{integerPart}</span>
+                  {decimalPart && <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub }}>{sep}{decimalPart}</span>}
+                  <span style={{ fontSize: 22, fontWeight: 500, color: theme.sub, marginLeft: 2 }}>{SYMBOLS[currency] || currency}</span>
                 </div>
               )
             })()}
-            <div style={{ color: theme.faint, fontSize: 'calc(12px * var(--fs-scale-body, 1))', marginTop: 8, fontWeight: 500, letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 6 }}>
+            <div style={{ color: theme.faint, fontSize: 12, marginTop: 8, fontWeight: 500, letterSpacing: '0.04em', display: 'flex', alignItems: 'center', gap: 6 }}>
               <span>{currency}</span>
             </div>
 
@@ -78,7 +78,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                 <button onClick={() => setSettlementOpen(v => !v)} style={{
                   display: 'flex', alignItems: 'center', gap: 6, width: '100%',
                   background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit',
-                  color: theme.sub, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, letterSpacing: 0.5,
+                  color: theme.sub, fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
                 }}>
                   {settlementOpen ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                   {t('budget.settlement')}
@@ -95,7 +95,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                       marginTop: 6, width: 220, padding: '10px 12px', borderRadius: 10, zIndex: 100,
                       background: 'var(--bg-card)', border: '1px solid var(--border-faint)',
                       boxShadow: '0 4px 16px rgba(0,0,0,0.12)',
-                      fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 400, color: 'var(--text-secondary)', lineHeight: 1.5, textAlign: 'left',
+                      fontSize: 11, fontWeight: 400, color: 'var(--text-secondary)', lineHeight: 1.5, textAlign: 'left',
                     }}>
                       {t('budget.settlementInfo')}
                     </div>
@@ -117,7 +117,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                       >
                         <RingAvatar userId={flow.from.user_id} username={flow.from.username} avatarUrl={flow.from.avatar_url} size={32} innerBg={theme.centerBg} textColor={theme.text} />
                         <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
-                          <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700, color: '#ef4444', letterSpacing: '-0.01em' }}>
+                          <span style={{ fontSize: 13, fontWeight: 700, color: '#ef4444', letterSpacing: '-0.01em' }}>
                             {fmt(flow.amount, currency)}
                           </span>
                           <div style={{ width: '100%', height: 2, borderRadius: 2, background: 'linear-gradient(90deg, rgba(239,68,68,0.1), rgba(239,68,68,0.55), rgba(239,68,68,0.3))', position: 'relative' }}>
@@ -130,7 +130,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
 
                     {settlement.balances.filter(b => Math.abs(b.balance) > 0.01).length > 0 && (
                       <div style={{ marginTop: 8, borderTop: `1px solid ${theme.divider}`, paddingTop: 12 }}>
-                        <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.11em', marginBottom: 10 }}>
+                        <div style={{ fontSize: 10, fontWeight: 700, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.11em', marginBottom: 10 }}>
                           {t('budget.netBalances')}
                         </div>
                         <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
@@ -140,13 +140,13 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                             return (
                               <div key={b.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '5px 0' }}>
                                 <RingAvatar userId={b.user_id} username={b.username} avatarUrl={b.avatar_url} size={26} innerBg={theme.centerBg} textColor={theme.text} />
-                                <span style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: theme.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                                <span style={{ flex: 1, fontSize: 13, color: theme.text, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                                   {b.username}
                                 </span>
                                 <span style={{
                                   display: 'inline-flex', alignItems: 'center', gap: 4,
                                   padding: '4px 10px', borderRadius: 8,
-                                  fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, letterSpacing: '-0.01em',
+                                  fontSize: 12, fontWeight: 700, letterSpacing: '-0.01em',
                                   background: positive ? 'rgba(16,185,129,0.13)' : 'rgba(239,68,68,0.13)',
                                   color: positive ? '#10b981' : '#ef4444',
                                 }}>
@@ -192,7 +192,7 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                     <PieChartIcon size={18} strokeWidth={2} />
                   </div>
                   <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.09em', fontWeight: 600 }}>{t('budget.byCategory')}</div>
+                    <div style={{ fontSize: 11, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.09em', fontWeight: 600 }}>{t('budget.byCategory')}</div>
                   </div>
                 </div>
 
@@ -226,12 +226,12 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                     })}
                   </svg>
                   <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, pointerEvents: 'none' }}>
-                    <div style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700 }}>{t('budget.total')}</div>
-                    <div style={{ fontSize: 'calc(22px * var(--fs-scale-title, 1))', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 2 }}>
+                    <div style={{ fontSize: 10.5, color: theme.faint, textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 700 }}>{t('budget.total')}</div>
+                    <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 2 }}>
                       <span>{totalInt}</span>
-                      {totalDec && <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, color: theme.sub }}>{decimalSep}{totalDec}</span>}
+                      {totalDec && <span style={{ fontSize: 13, fontWeight: 500, color: theme.sub }}>{decimalSep}{totalDec}</span>}
                     </div>
-                    <div style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: theme.faint, fontWeight: 500, marginTop: 2 }}>{currency}</div>
+                    <div style={{ fontSize: 10.5, color: theme.faint, fontWeight: 500, marginTop: 2 }}>{currency}</div>
                   </div>
                 </div>
 
@@ -256,13 +256,13 @@ export default function BudgetSummary({ theme, currency, locale, grandTotal, has
                           boxShadow: `0 0 12px ${seg.color}80`,
                         }} />
                         <div style={{ flex: 1, minWidth: 0 }}>
-                          <div style={{ fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', fontWeight: 500, letterSpacing: '-0.01em', color: theme.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{seg.name}</div>
-                          <div style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: theme.sub, fontWeight: 500, marginTop: 1 }}>{fmt(seg.value, currency)}</div>
+                          <div style={{ fontSize: 13.5, fontWeight: 500, letterSpacing: '-0.01em', color: theme.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{seg.name}</div>
+                          <div style={{ fontSize: 11.5, color: theme.sub, fontWeight: 500, marginTop: 1 }}>{fmt(seg.value, currency)}</div>
                         </div>
                         <span style={{
                           flexShrink: 0,
                           padding: '4px 9px', borderRadius: 7,
-                          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, letterSpacing: '-0.01em',
+                          fontSize: 11, fontWeight: 700, letterSpacing: '-0.01em',
                           background: `${seg.color}26`,
                           border: `1px solid ${seg.color}40`,
                           color: chipColor,

client/src/components/Budget/CostsPanel.test.tsx

@@ -1,257 +0,0 @@
-// FE-COMP-COSTS: settlements surfaced inline in the Costs ledger (issue #1241)
-import { render, screen, waitFor } from '../../../tests/helpers/render'
-import { http, HttpResponse } from 'msw'
-import { server } from '../../../tests/helpers/msw/server'
-import { useAuthStore } from '../../store/authStore'
-import { useTripStore } from '../../store/tripStore'
-import { resetAllStores, seedStore } from '../../../tests/helpers/store'
-import { buildUser, buildTrip, buildBudgetItem } from '../../../tests/helpers/factories'
-import CostsPanel from './CostsPanel'
-
-const tripMembers = [
-  { id: 1, username: 'alice', avatar_url: null },
-  { id: 2, username: 'bob', avatar_url: null },
-]
-
-beforeEach(() => {
-  resetAllStores()
-  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
-  seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'EUR' }) })
-})
-
-describe('CostsPanel — settlements in the ledger', () => {
-  it('renders a settle-up payment as a ledger row with an undo action', async () => {
-    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
-      http.get('/api/trips/1/budget/settlement', () =>
-        HttpResponse.json({
-          balances: [],
-          flows: [],
-          settlements: [
-            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
-          ],
-        })
-      ),
-    )
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    // The expense and the settlement (payment) both appear in the unified ledger.
-    await screen.findByText('Dinner')
-    await screen.findByText('Payment')
-    // The payment row exposes an inline undo (no need to open a separate History modal).
-    expect(screen.getByTitle('Undo')).toBeInTheDocument()
-  })
-
-  it('records a manual payment via the Add payment button', async () => {
-    let posted: Record<string, unknown> | null = null
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
-        posted = await request.json() as Record<string, unknown>
-        return HttpResponse.json({ settlement: { id: 1, ...posted } })
-      }),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
-    await user.type(await screen.findByPlaceholderText('0.00'), '25')
-    // The footer submit is the second "Add payment" control once the modal is open.
-    const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
-    const submit = addButtons[addButtons.length - 1]
-    await user.click(submit)
-    await waitFor(() => expect(posted).toMatchObject({ amount: 25 }))
-  })
-
-  it('hides payment rows while a text search is active', async () => {
-    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
-      http.get('/api/trips/1/budget/settlement', () =>
-        HttpResponse.json({
-          balances: [],
-          flows: [],
-          settlements: [
-            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
-          ],
-        })
-      ),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await screen.findByText('Payment')
-    await user.type(screen.getByPlaceholderText('Search expenses…'), 'Dinner')
-    // Payment rows have no name, so a search hides them while the matching expense stays.
-    expect(screen.queryByText('Payment')).not.toBeInTheDocument()
-    expect(screen.getByText('Dinner')).toBeInTheDocument()
-  })
-
-  it('supports custom split amounts on save', async () => {
-    let posted: Record<string, unknown> | null = null
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-      http.post('/api/trips/1/budget', async ({ request }) => {
-        posted = await request.json() as Record<string, unknown>
-        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Dinner' }), id: 5 } })
-      }),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
-    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
-    const nums = () => screen.getAllByPlaceholderText('0.00') as HTMLInputElement[]
-    await user.type(nums()[0], '100') // total = 100
-
-    await user.click(screen.getByRole('button', { name: /Custom/i }))
-
-    const customInputs = screen.getAllByPlaceholderText('50.00')
-    await user.type(customInputs[0], '30')
-    await user.type(customInputs[1], '70')
-
-    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
-    await user.click(addBtns[addBtns.length - 1]) // footer submit
-    await waitFor(() => expect(posted).toBeTruthy())
-    expect(posted!.total_price).toBe(100)
-    expect(posted!.payers).toEqual([
-      expect.objectContaining({ amount: 100 })
-    ])
-    expect(posted!.members).toEqual(expect.arrayContaining([
-      expect.objectContaining({ user_id: 1, amount: 30 }),
-      expect.objectContaining({ user_id: 2, amount: 70 }),
-    ]))
-  })
-
-  it('accepts a comma as the decimal separator in the total amount (#1256)', async () => {
-    let posted: Record<string, unknown> | null = null
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-      http.post('/api/trips/1/budget', async ({ request }) => {
-        posted = await request.json() as Record<string, unknown>
-        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'AirTags' }), id: 6 } })
-      }),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
-    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'AirTags')
-    await user.type(screen.getAllByPlaceholderText('0.00')[0], '39,99') // comma → normalized to 39.99
-
-    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
-    await user.click(addBtns[addBtns.length - 1]) // footer submit
-    await waitFor(() => expect(posted).toBeTruthy())
-    expect(posted!.total_price).toBe(39.99)
-  })
-
-  it('marks an expense with no payer as Unfinished', async () => {
-    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Hotel' }), total_price: 90, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-    )
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-    await screen.findByText('Hotel')
-    expect(screen.getByText('Unfinished')).toBeInTheDocument()
-  })
-
-  it('records a recorded-total expense with nobody to split with (#1286)', async () => {
-    let posted: Record<string, unknown> | null = null
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-      http.post('/api/trips/1/budget', async ({ request }) => {
-        posted = await request.json() as Record<string, unknown>
-        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Hotel' }), id: 9 } })
-      }),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
-    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Hotel')
-    await user.type(screen.getAllByPlaceholderText('0.00')[0], '120') // total only, paid on-site later
-
-    // Deselect everyone — the cost is recorded without a split (the bug: this was blocked).
-    // The participant toggles are buttons; the same names also appear as plain text in
-    // the Balances sidebar, so target the buttons specifically.
-    await user.click(screen.getByRole('button', { name: /alice/i }))
-    await user.click(screen.getByRole('button', { name: /bob/i }))
-
-    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
-    const submit = addBtns[addBtns.length - 1] // footer submit
-    expect(submit).not.toBeDisabled()
-    await user.click(submit)
-
-    await waitFor(() => expect(posted).toBeTruthy())
-    expect(posted!.total_price).toBe(120)
-    expect(posted!.member_ids).toEqual([])
-    expect(posted!.payers).toEqual([])
-  })
-
-  it('supports itemized receipt ticket manual entry and split assignment', async () => {
-    let posted: Record<string, unknown> | null = null
-    server.use(
-      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
-      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
-      http.post('/api/trips/1/budget', async ({ request }) => {
-        posted = await request.json() as Record<string, unknown>
-        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Dinner' }), id: 10 } })
-      }),
-    )
-    const { default: userEvent } = await import('@testing-library/user-event')
-    const user = userEvent.setup()
-    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
-
-    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
-    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
-
-    await user.click(screen.getByRole('button', { name: 'Ticket' }))
-
-    const addBtn = screen.getByRole('button', { name: /Add item/i })
-    await user.click(addBtn)
-    await user.click(addBtn)
-    await user.click(addBtn)
-
-    const itemNames = screen.getAllByPlaceholderText('Item name')
-    const itemPrices = screen.getAllByPlaceholderText('0.00')
-    
-    await user.type(itemNames[0], 'Apples')
-    await user.type(itemPrices[1], '10')
-
-    await user.type(itemNames[1], 'chocolate cake')
-    await user.type(itemPrices[2], '50')
-    const bobButtons = screen.getAllByRole('button', { name: /bob/i })
-    await user.click(bobButtons[1])
-
-    await user.type(itemNames[2], 'Milk')
-    await user.type(itemPrices[3], '40')
-
-    expect(screen.getByDisplayValue('100.00')).toBeDisabled()
-
-    expect(screen.getByText('Individual Shares Summary')).toBeInTheDocument()
-    expect(screen.getByText(/75\.00/)).toBeInTheDocument()
-    expect(screen.getByText(/25\.00/)).toBeInTheDocument()
-
-    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
-    await user.click(addBtns[addBtns.length - 1])
-
-    await waitFor(() => expect(posted).toBeTruthy())
-    expect(posted!.total_price).toBe(100)
-    expect(posted!.members).toEqual(expect.arrayContaining([
-      expect.objectContaining({ user_id: 1, amount: 75 }),
-      expect.objectContaining({ user_id: 2, amount: 25 }),
-    ]))
-    expect(posted!.note).toContain('TICKETJSON:')
-  })
-})

client/src/components/Budget/costsCategories.tsx

@@ -1,63 +0,0 @@
-import { Hotel, Utensils, ShoppingCart, Bus, Plane, Ticket, Camera, ShoppingBag, FileText, HeartPulse, Coins, MoreHorizontal } from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import { COST_CATEGORIES, type CostCategory } from '@trek/shared'
-
-/**
- * The fixed Costs categories. Users can't add their own — every expense maps to
- * one of these. Category colour is the one place an accent is allowed (it
- * visualises the category); everything else stays black/white. The label comes
- * from i18n (`costs.cat.*`).
- */
-export interface CostCategoryMeta {
-  key: CostCategory
-  labelKey: string
-  Icon: LucideIcon
-  color: string
-}
-
-export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
-  accommodation: { key: 'accommodation', labelKey: 'costs.cat.accommodation', Icon: Hotel, color: '#16a34a' },
-  food:          { key: 'food',          labelKey: 'costs.cat.food',          Icon: Utensils, color: '#ea580c' },
-  groceries:     { key: 'groceries',     labelKey: 'costs.cat.groceries',     Icon: ShoppingCart, color: '#65a30d' },
-  transport:     { key: 'transport',     labelKey: 'costs.cat.transport',     Icon: Bus, color: '#2563eb' },
-  flights:       { key: 'flights',       labelKey: 'costs.cat.flights',       Icon: Plane, color: '#0ea5e9' },
-  activities:    { key: 'activities',    labelKey: 'costs.cat.activities',    Icon: Ticket, color: '#9333ea' },
-  sightseeing:   { key: 'sightseeing',   labelKey: 'costs.cat.sightseeing',   Icon: Camera, color: '#db2777' },
-  shopping:      { key: 'shopping',      labelKey: 'costs.cat.shopping',      Icon: ShoppingBag, color: '#e11d48' },
-  fees:          { key: 'fees',          labelKey: 'costs.cat.fees',          Icon: FileText, color: '#475569' },
-  health:        { key: 'health',        labelKey: 'costs.cat.health',        Icon: HeartPulse, color: '#dc2626' },
-  tips:          { key: 'tips',          labelKey: 'costs.cat.tips',          Icon: Coins, color: '#d97706' },
-  other:         { key: 'other',         labelKey: 'costs.cat.other',         Icon: MoreHorizontal, color: '#6b7280' },
-}
-
-export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])
-
-/**
- * Legacy / English free-text categories (and reservation type labels) mapped to
- * the fixed keys. Bookings used to store labels like "Flight"/"Train"/"Other",
- * which never matched the lowercase keys and fell through to `other`.
- */
-const LEGACY_CATEGORY_MAP: Record<string, CostCategory> = {
-  flight: 'flights', flights: 'flights', plane: 'flights', flug: 'flights',
-  train: 'transport', bus: 'transport', car: 'transport', 'car rental': 'transport',
-  ferry: 'transport', boat: 'transport', taxi: 'transport', transfer: 'transport',
-  transport: 'transport', transportation: 'transport',
-  hotel: 'accommodation', accommodation: 'accommodation', lodging: 'accommodation', hostel: 'accommodation',
-  restaurant: 'food', food: 'food', dining: 'food', meal: 'food', meals: 'food',
-  grocery: 'groceries', groceries: 'groceries',
-  activity: 'activities', activities: 'activities',
-  sightseeing: 'sightseeing', sights: 'sightseeing',
-  shop: 'shopping', shopping: 'shopping',
-  fee: 'fees', fees: 'fees',
-  health: 'health', medical: 'health',
-  tip: 'tips', tips: 'tips',
-  other: 'other', misc: 'other',
-}
-
-/** Map any stored category (incl. legacy/localized free-text values) to a known meta. */
-export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (!cat) return COST_CAT_META.other
-  if (cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  const mapped = LEGACY_CATEGORY_MAP[cat.trim().toLowerCase()]
-  return mapped ? COST_CAT_META[mapped] : COST_CAT_META.other
-}

client/src/components/Collab/CollabChat.test.tsx

@@ -647,7 +647,7 @@ describe('CollabChat', () => {
     let foundBigEmoji = false;
     while (el) {
       const styleAttr = el.getAttribute('style');
-      if (styleAttr && styleAttr.includes('font-size: calc(40px')) {
+      if (styleAttr && styleAttr.includes('font-size: 40px')) {
         foundBigEmoji = true;
         break;
       }

client/src/components/Collab/CollabChat.tsx

@@ -33,7 +33,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
           <div style={{
             display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8,
             padding: '6px 10px', borderRadius: 10, background: 'var(--bg-secondary)',
-            borderLeft: '3px solid #007AFF', fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)',
+            borderLeft: '3px solid #007AFF', fontSize: 12, color: 'var(--text-muted)',
           }}>
             <Reply size={12} style={{ flexShrink: 0, opacity: 0.5 }} />
             <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
@@ -67,7 +67,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
             disabled={!canEdit}
             style={{
               flex: 1, resize: 'none', border: '1px solid var(--border-primary)', borderRadius: 20,
-              padding: '8px 14px', fontSize: 'calc(14px * var(--fs-scale-body, 1))', lineHeight: 1.4, fontFamily: 'inherit',
+              padding: '8px 14px', fontSize: 14, lineHeight: 1.4, fontFamily: 'inherit',
               background: 'var(--bg-input)', color: 'var(--text-primary)', outline: 'none',
               maxHeight: 100, overflowY: 'hidden',
               opacity: canEdit ? 1 : 0.5,

client/src/components/Collab/CollabChatEmojiPicker.tsx

@@ -49,7 +49,7 @@ export function EmojiPicker({ onSelect, onClose, anchorRef, containerRef }: Emoj
           <button key={c} onClick={() => setCat(c)} style={{
             flex: 1, padding: '4px 0', borderRadius: 6, border: 'none', cursor: 'pointer',
             background: cat === c ? 'var(--bg-hover)' : 'transparent',
-            color: 'var(--text-primary)', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: 'inherit',
+            color: 'var(--text-primary)', fontSize: 10, fontWeight: 600, fontFamily: 'inherit',
           }}>
             {c}
           </button>

client/src/components/Collab/CollabChatLinkPreview.tsx

@@ -45,17 +45,17 @@ export function LinkPreview({ url, tripId, own, onLoad }: LinkPreviewProps) {
       )}
       <div style={{ padding: '8px 10px' }}>
         {domain && (
-          <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: own ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
+          <div style={{ fontSize: 10, fontWeight: 600, color: own ? 'rgba(255,255,255,0.5)' : 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, marginBottom: 2 }}>
             {data.site_name || domain}
           </div>
         )}
         {data.title && (
-          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: own ? '#fff' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+          <div style={{ fontSize: 12, fontWeight: 600, color: own ? '#fff' : 'var(--text-primary)', lineHeight: 1.3, marginBottom: 2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
             {data.title}
           </div>
         )}
         {data.description && (
-          <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: own ? 'rgba(255,255,255,0.7)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+          <div style={{ fontSize: 11, color: own ? 'rgba(255,255,255,0.7)' : 'var(--text-muted)', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
             {data.description}
           </div>
         )}

client/src/components/Collab/CollabChatMessages.tsx

@@ -12,10 +12,10 @@ export function ChatMessages(props: any) {
     <>
       {/* Messages */}
       {messages.length === 0 ? (
-        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32, textAlign: 'center' }}>
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: 'var(--text-faint)', padding: 32 }}>
           <MessageCircle size={40} strokeWidth={1.2} style={{ opacity: 0.4 }} />
-          <span style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t('collab.chat.empty')}</span>
-          <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', opacity: 0.6, fontFamily: 'var(--font-subtext)' }}>{t('collab.chat.emptyDesc') || ''}</span>
+          <span style={{ fontSize: 14, fontWeight: 600 }}>{t('collab.chat.empty')}</span>
+          <span style={{ fontSize: 12, opacity: 0.6 }}>{t('collab.chat.emptyDesc') || ''}</span>
         </div>
       ) : (
         <div ref={scrollRef} onScroll={checkAtBottom} className="chat-scroll" style={{
@@ -25,7 +25,7 @@ export function ChatMessages(props: any) {
           {hasMore && (
             <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 10px' }}>
               <button onClick={handleLoadMore} disabled={loadingMore} style={{
-                display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
+                display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600,
                 color: 'var(--text-muted)', background: 'var(--bg-secondary)', border: '1px solid var(--border-faint)',
                 borderRadius: 99, padding: '5px 14px', cursor: 'pointer', fontFamily: 'inherit',
               }}>
@@ -51,13 +51,13 @@ export function ChatMessages(props: any) {
                 <React.Fragment key={msg.id}>
                   {showDate && (
                     <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
-                      <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99, letterSpacing: 0.3, textTransform: 'uppercase' }}>
                         {formatDateSeparator(msg.created_at, t)}
                       </span>
                     </div>
                   )}
                   <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0' }}>
-                    <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontStyle: 'italic' }}>
+                    <span style={{ fontSize: 11, color: 'var(--text-faint)', fontStyle: 'italic' }}>
                       {msg.username} {t('collab.chat.deletedMessage') || 'deleted a message'} · {formatTime(msg.created_at, is12h)}
                     </span>
                   </div>
@@ -76,7 +76,7 @@ export function ChatMessages(props: any) {
                 {showDate && (
                   <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 6px' }}>
                     <span style={{
-                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)',
+                      fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
                       background: 'var(--bg-secondary)', padding: '3px 12px', borderRadius: 99,
                       letterSpacing: 0.3, textTransform: 'uppercase',
                     }}>
@@ -103,7 +103,7 @@ export function ChatMessages(props: any) {
                           <div style={{
                             width: 28, height: 28, borderRadius: '50%', background: 'var(--bg-tertiary)',
                             display: 'flex', alignItems: 'center', justifyContent: 'center',
-                            fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)',
+                            fontSize: 11, fontWeight: 700, color: 'var(--text-muted)',
                           }}>
                             {(msg.username || '?')[0].toUpperCase()}
                           </div>
@@ -115,7 +115,7 @@ export function ChatMessages(props: any) {
                   <div style={{ display: 'flex', flexDirection: 'column', alignItems: own ? 'flex-end' : 'flex-start', maxWidth: '78%', minWidth: 0 }}>
                     {/* Username for others at group start */}
                     {!own && isNewGroup && (
-                      <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', marginBottom: 2, paddingLeft: 4 }}>
+                      <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', marginBottom: 2, paddingLeft: 4 }}>
                         {msg.username}
                       </span>
                     )}
@@ -138,7 +138,7 @@ export function ChatMessages(props: any) {
                       }}
                     >
                       {bigEmoji ? (
-                        <div style={{ fontSize: 'calc(40px * var(--fs-scale-title, 1))', lineHeight: 1.2, padding: '2px 0' }}>
+                        <div style={{ fontSize: 40, lineHeight: 1.2, padding: '2px 0' }}>
                           {msg.text}
                         </div>
                       ) : (
@@ -146,16 +146,16 @@ export function ChatMessages(props: any) {
                           background: own ? '#007AFF' : 'var(--bg-secondary)',
                           color: own ? '#fff' : 'var(--text-primary)',
                           borderRadius: br, padding: hasReply ? '4px 4px 8px 4px' : '8px 14px',
-                          fontSize: 'calc(14px * var(--fs-scale-body, 1))', lineHeight: 1.4, wordBreak: 'break-word', whiteSpace: 'pre-wrap',
+                          fontSize: 14, lineHeight: 1.4, wordBreak: 'break-word', whiteSpace: 'pre-wrap',
                         }}>
                           {/* Inline reply quote */}
                           {hasReply && (
                             <div style={{
                               padding: '5px 10px', marginBottom: 4, borderRadius: 12,
                               background: own ? 'rgba(255,255,255,0.15)' : 'var(--bg-tertiary)',
-                              fontSize: 'calc(12px * var(--fs-scale-body, 1))', lineHeight: 1.3,
+                              fontSize: 12, lineHeight: 1.3,
                             }}>
-                              <div style={{ fontWeight: 600, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', opacity: 0.7, marginBottom: 1 }}>
+                              <div style={{ fontWeight: 600, fontSize: 11, opacity: 0.7, marginBottom: 1 }}>
                                 {msg.reply_username || ''}
                               </div>
                               <div style={{ opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
@@ -233,7 +233,7 @@ export function ChatMessages(props: any) {
 
                     {/* Timestamp — only on last message of group */}
                     {isLastInGroup && (
-                      <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 2, padding: '0 4px' }}>
+                      <span style={{ fontSize: 9, color: 'var(--text-faint)', marginTop: 2, padding: '0 4px' }}>
                         {formatTime(msg.created_at, is12h)}
                       </span>
                     )}

client/src/components/Collab/CollabChatReactionBadge.tsx

@@ -34,14 +34,14 @@ export function ReactionBadge({ reaction, currentUserId, onReact }: ReactionBadg
         }}
       >
         <TwemojiImg emoji={reaction.emoji} size={16} />
-        {reaction.count > 1 && <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)', minWidth: 8 }}>{reaction.count}</span>}
+        {reaction.count > 1 && <span style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', minWidth: 8 }}>{reaction.count}</span>}
       </button>
       {hover && names && ReactDOM.createPortal(
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
           background: 'var(--bg-card, white)', color: 'var(--text-primary, #111827)',
-          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
+          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
           boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint, #e5e7eb)',
         }}>
           {names}

client/src/components/Collab/CollabNotes.constants.ts

@@ -1,4 +1,4 @@
-export const FONT = "var(--font-system)"
+export const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
 
 export const NOTE_COLORS = [
   { value: '#6366f1', label: 'Indigo' },

client/src/components/Collab/CollabNotes.test.tsx

@@ -175,7 +175,7 @@ describe('CollabNotes', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
+  it('FE-COMP-NOTES-013: delete note calls DELETE API and removes it from grid', async () => {
     const user = userEvent.setup();
     server.use(
       http.get('/api/trips/1/collab/notes', () =>
@@ -193,11 +193,8 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    await user.click(screen.getByTitle('Delete'));
-    // Deleting now asks for confirmation first — the note stays until confirmed.
-    expect(screen.getByText('Delete note?')).toBeInTheDocument();
-    expect(screen.getByText('Remove Me')).toBeInTheDocument();
-    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
+    const deleteBtn = screen.getByTitle('Delete');
+    await user.click(deleteBtn);
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/CollabNotes.tsx

@@ -10,7 +10,6 @@ import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
-import ConfirmDialog from '../shared/ConfirmDialog'
 import type { User } from '../../types'
 import type { CollabNote } from './CollabNotes.types'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -45,7 +44,6 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const [previewFile, setPreviewFile] = useState(null)
   const [showSettings, setShowSettings] = useState(false)
   const [activeCategory, setActiveCategory] = useState(null)
-  const [pendingDeleteNoteId, setPendingDeleteNoteId] = useState<number | null>(null)
 
   // Empty categories (no notes yet) stored in localStorage
   const [emptyCategories, setEmptyCategories] = useState(() => {
@@ -233,7 +231,6 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
     activeCategory, setActiveCategory, categoryColors, getCategoryColor,
     handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
     handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
-    pendingDeleteNoteId, setPendingDeleteNoteId,
   }
 }
 
@@ -243,7 +240,7 @@ function CollabNotesLoading({ t }: NotesState) {
   return (
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
       <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border-faint)' }}>
-        <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0, fontFamily: FONT }}>
+        <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0, fontFamily: FONT }}>
           {t('collab.notes.title')}
         </h3>
       </div>
@@ -263,7 +260,7 @@ function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal }: Not
   return (
     <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
       <h3 style={{
-        fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', margin: 0, fontFamily: FONT,
+        fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', margin: 0, fontFamily: FONT,
         letterSpacing: 0.3, textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 7,
       }}>
         <StickyNote size={14} color="var(--text-faint)" />
@@ -277,7 +274,7 @@ function CollabNotesHeader({ t, canEdit, setShowSettings, setShowNewModal }: Not
           <Settings size={14} />
         </button>}
         {canEdit && <button onClick={() => setShowNewModal(true)}
-          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
+          style={{ display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px', background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600, fontFamily: FONT, border: 'none', cursor: 'pointer', whiteSpace: 'nowrap' }}>
           <Plus size={12} />
           {t('collab.notes.new')}
         </button>}
@@ -292,7 +289,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
       <button
         onClick={() => setActiveCategory(null)}
         style={{
-          flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT,
+          flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
           border: activeCategory === null ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
           background: activeCategory === null ? 'var(--accent)' : 'transparent',
           color: activeCategory === null ? 'var(--accent-text)' : 'var(--text-secondary)',
@@ -306,7 +303,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
           key={cat}
           onClick={() => setActiveCategory(prev => prev === cat ? null : cat)}
           style={{
-            flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: FONT,
+            flexShrink: 0, borderRadius: 99, padding: '3px 10px', fontSize: 10, fontWeight: 600, fontFamily: FONT,
             border: activeCategory === cat ? '1px solid var(--accent)' : '1px solid var(--border-faint)',
             background: activeCategory === cat ? 'var(--accent)' : 'transparent',
             color: activeCategory === cat ? 'var(--accent-text)' : 'var(--text-secondary)',
@@ -322,7 +319,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
 
 function CollabNotesGrid(S: NotesState) {
   const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
+    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
   return (
@@ -334,10 +331,10 @@ function CollabNotesGrid(S: NotesState) {
           padding: '48px 20px', textAlign: 'center', height: '100%',
         }}>
           <Pencil size={36} color="var(--text-faint)" style={{ marginBottom: 12 }} />
-          <div style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4, fontFamily: FONT }}>
+          <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4, fontFamily: FONT }}>
             {t('collab.notes.empty')}
           </div>
-          <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', fontFamily: FONT }}>
+          <div style={{ fontSize: 12, color: 'var(--text-faint)', fontFamily: FONT }}>
             {t('collab.notes.emptyDesc') || 'Create a note to get started'}
           </div>
         </div>
@@ -355,7 +352,7 @@ function CollabNotesGrid(S: NotesState) {
               currentUser={currentUser}
               canEdit={canEdit}
               onUpdate={handleUpdateNote}
-              onDelete={setPendingDeleteNoteId}
+              onDelete={handleDeleteNote}
               onEdit={setEditingNote}
               onView={setViewingNote}
               onPreviewFile={setPreviewFile}
@@ -397,10 +394,10 @@ function ViewNoteModal(S: NotesState) {
           display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
         }}>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
+            <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--text-primary)' }}>{viewingNote.title}</div>
             {viewingNote.category && (
               <span style={{
-                display: 'inline-block', marginTop: 4, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
+                display: 'inline-block', marginTop: 4, fontSize: 10, fontWeight: 600,
                 color: getCategoryColor(viewingNote.category),
                 background: `${getCategoryColor(viewingNote.category)}18`,
                 padding: '2px 8px', borderRadius: 6,
@@ -422,11 +419,11 @@ function ViewNoteModal(S: NotesState) {
             </button>
           </div>
         </div>
-        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 'calc(14px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', lineHeight: 1.7 }}>
+        <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
           <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
           {(viewingNote.attachments || []).length > 0 && (
             <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
-              <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
+              <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                 {(viewingNote.attachments || []).map(a => {
                   const isImage = a.mime_type?.startsWith('image/')
@@ -449,10 +446,10 @@ function ViewNoteModal(S: NotesState) {
                           }}
                           onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
                           onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                          <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
                         </div>
                       )}
-                      <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+                      <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
                     </div>
                   )
                 })}
@@ -473,7 +470,6 @@ export default function CollabNotes(props: CollabNotesProps) {
     viewingNote, showNewModal, editingNote, previewFile, showSettings,
     setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
     handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
-    handleDeleteNote, pendingDeleteNoteId, setPendingDeleteNoteId,
   } = S
 
   if (loading) return <CollabNotesLoading {...S} />
@@ -531,15 +527,6 @@ export default function CollabNotes(props: CollabNotesProps) {
           t={t}
         />
       )}
-
-      {/* Confirm: delete a collab note — guards against accidental deletion */}
-      <ConfirmDialog
-        isOpen={pendingDeleteNoteId !== null}
-        onClose={() => setPendingDeleteNoteId(null)}
-        onConfirm={() => { if (pendingDeleteNoteId !== null) handleDeleteNote(pendingDeleteNoteId) }}
-        title={t('collab.notes.confirmDeleteTitle')}
-        message={t('collab.notes.confirmDeleteBody')}
-      />
     </div>
   )
 }

client/src/components/Collab/CollabNotesCard.tsx

@@ -16,7 +16,7 @@ interface NoteCardProps {
   currentUser: User
   canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
-  onDelete: (noteId: number) => void
+  onDelete: (noteId: number) => Promise<void>
   onEdit: (note: CollabNote) => void
   onView: (note: CollabNote) => void
   onPreviewFile: (file: NoteFile) => void
@@ -63,11 +63,11 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
       }}>
         {!!note.pinned && <Pin size={9} color={color} style={{ flexShrink: 0 }} />}
         <span style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden', flex: 1, minWidth: 0 }}>
-          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {note.title}
           </span>
           {note.category && (
-            <span style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', fontWeight: 600, color, background: `${color}18`, padding: '2px 6px', borderRadius: 99, flexShrink: 0, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
+            <span style={{ fontSize: 8, fontWeight: 600, color, background: `${color}18`, padding: '2px 6px', borderRadius: 99, flexShrink: 0, letterSpacing: '0.02em', textTransform: 'uppercase' }}>
               {note.category}
             </span>
           )}
@@ -115,7 +115,7 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
                 marginBottom: 6, pointerEvents: 'none', opacity: 0, transition: 'opacity 0.12s',
                 whiteSpace: 'nowrap', zIndex: 10,
                 background: 'var(--bg-card)', color: 'var(--text-primary)',
-                fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
+                fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
                 boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint)',
               }}>
                 {author.username}
@@ -137,7 +137,7 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
           <div style={{ flex: 1, minWidth: 0 }}>
             {note.content && (
               <div className="collab-note-md" style={{
-                fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)', lineHeight: 1.5, margin: 0,
+                fontSize: 11.5, color: 'var(--text-muted)', lineHeight: 1.5, margin: 0,
                 maxHeight: '4.5em', overflow: 'hidden',
                 wordBreak: 'break-word', fontFamily: FONT,
               }}>
@@ -151,14 +151,14 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
                   {/* Website */}
                   {note.website && (
                     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-                      <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>Link</span>
+                      <span style={{ fontSize: 7, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>Link</span>
                       <WebsiteThumbnail url={note.website} tripId={tripId} color={color} />
                     </div>
                   )}
                   {/* Files */}
                   {(note.attachments || []).length > 0 && (
                     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
-                      <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>{t('files.title')}</span>
+                      <span style={{ fontSize: 7, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3 }}>{t('files.title')}</span>
                       <div style={{ display: 'flex', gap: 4 }}>
                   {(note.attachments || []).slice(0, note.website ? 1 : 2).map(a => {
                     const isImage = a.mime_type?.startsWith('image/')
@@ -179,12 +179,12 @@ export function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdi
                         }}
                         onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.08)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
                         onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
-                        <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                        <span style={{ fontSize: 9, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
                       </div>
                     )
                   })}
                   {(note.attachments?.length || 0) > (note.website ? 1 : 2) && (
-                    <span style={{ fontSize: 'calc(8px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', textAlign: 'center' }}>+{(note.attachments?.length || 0) - (note.website ? 1 : 2)}</span>
+                    <span style={{ fontSize: 8, color: 'var(--text-faint)', textAlign: 'center' }}>+{(note.attachments?.length || 0) - (note.website ? 1 : 2)}</span>
                   )}
                       </div>
                     </div>

client/src/components/Collab/CollabNotesCategorySettingsModal.tsx

@@ -71,7 +71,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
       }} onClick={e => e.stopPropagation()}>
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>
+          <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>
             {t('collab.notes.categorySettings') || 'Category Settings'}
           </h3>
           <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}>
@@ -82,7 +82,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
         {/* Categories list */}
         <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
           {allCats.length === 0 && (
-            <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', textAlign: 'center', padding: 16 }}>
+            <p style={{ fontSize: 12, color: 'var(--text-faint)', textAlign: 'center', padding: 16 }}>
               {t('collab.notes.noCategoriesYet') || 'No categories yet'}
             </p>
           )}
@@ -119,7 +119,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
               placeholder={t('collab.notes.newCategory')}
               style={{
                 flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
+                fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
               }} />
             <button onClick={handleAddCategory} disabled={!newCatName.trim()} style={{
               background: newCatName.trim() ? 'var(--accent)' : 'var(--border-primary)', color: 'var(--accent-text)',
@@ -133,7 +133,7 @@ export function CategorySettingsModal({ onClose, categories, categoryColors, onS
           {/* Save */}
           <button onClick={handleSave} style={{
             width: '100%', borderRadius: 99, padding: '9px 14px', background: 'var(--accent)', color: 'var(--accent-text)',
-            fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: 'pointer', marginTop: 8,
+            fontSize: 13, fontWeight: 600, border: 'none', cursor: 'pointer', marginTop: 8,
           }}>
             {t('collab.notes.save')}
           </button>

client/src/components/Collab/CollabNotesEditableCatName.tsx

@@ -21,12 +21,12 @@ export function EditableCatName({ name, onRename }: EditableCatNameProps) {
   if (editing) {
     return <input ref={inputRef} value={value} onChange={e => setValue(e.target.value)}
       onBlur={save} onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setValue(name); setEditing(false) } }}
-      style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '2px 8px', background: 'var(--bg-input)', fontFamily: 'inherit', outline: 'none' }} />
+      style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', border: '1px solid var(--border-primary)', borderRadius: 6, padding: '2px 8px', background: 'var(--bg-input)', fontFamily: 'inherit', outline: 'none' }} />
   }
 
   return (
     <span onClick={() => { setValue(name); setEditing(true) }}
-      style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', cursor: 'pointer', padding: '2px 0' }}
+      style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', cursor: 'pointer', padding: '2px 0' }}
       title="Click to rename">
       {name}
     </span>

client/src/components/Collab/CollabNotesFilePreviewPortal.tsx

@@ -37,7 +37,7 @@ export function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
             : <Loader2 size={32} className="animate-spin text-[rgba(255,255,255,0.5)]" />
           }
           <div style={{ position: 'absolute', top: -36, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{file.original_name}</span>
+            <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{file.original_name}</span>
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}><ExternalLink size={15} /></button>
               <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}><X size={17} /></button>
@@ -48,21 +48,21 @@ export function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
         /* Document viewer — card with header */
         <div style={{ width: '100%', maxWidth: 950, height: '94vh', display: 'flex', flexDirection: 'column', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }} onClick={e => e.stopPropagation()}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-            <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{file.original_name}</span>
+            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{file.original_name}</span>
             <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
-              <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)', padding: 0 }}><ExternalLink size={13} /></button>
+              <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 3, fontSize: 11, color: 'var(--text-muted)', padding: 0 }}><ExternalLink size={13} /></button>
               <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={18} /></button>
             </div>
           </div>
           {(isPdf || isTxt) ? (
             <object data={authUrl ? `${authUrl}#view=FitH` : ''} type={file.mime_type} style={{ flex: 1, width: '100%', border: 'none', background: '#fff' }} title={file.original_name}>
               <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 'calc(14px * var(--fs-scale-body, 1))', padding: 0 }}>Download</button>
+                <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 14, padding: 0 }}>Download</button>
               </p>
             </object>
           ) : (
             <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 40 }}>
-              <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 'calc(14px * var(--fs-scale-body, 1))', padding: 0 }}>Download {file.original_name}</button>
+              <button onClick={openInNewTab} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-primary)', textDecoration: 'underline', fontSize: 14, padding: 0 }}>Download {file.original_name}</button>
             </div>
           )}
         </div>

client/src/components/Collab/CollabNotesFormModal.tsx

@@ -118,7 +118,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
           borderBottom: '1px solid var(--border-faint)',
         }}>
           <h3 style={{
-            fontSize: 'calc(14px * var(--fs-scale-body, 1))',
+            fontSize: 14,
             fontWeight: 700,
             color: 'var(--text-primary)',
             margin: 0,
@@ -153,7 +153,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
           {/* Title */}
           <div>
             <div style={{
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
+              fontSize: 9,
               fontWeight: 600,
               color: 'var(--text-faint)',
               textTransform: 'uppercase',
@@ -173,7 +173,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
                 border: '1px solid var(--border-primary)',
                 borderRadius: 10,
                 padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+                fontSize: 13,
                 background: 'var(--bg-input)',
                 color: 'var(--text-primary)',
                 fontFamily: 'inherit',
@@ -186,7 +186,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
           {/* Content */}
           <div>
             <div style={{
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
+              fontSize: 9,
               fontWeight: 600,
               color: 'var(--text-faint)',
               textTransform: 'uppercase',
@@ -205,7 +205,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
                 border: '1px solid var(--border-primary)',
                 borderRadius: 10,
                 padding: '8px 12px',
-                fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+                fontSize: 13,
                 background: 'var(--bg-input)',
                 color: 'var(--text-primary)',
                 fontFamily: 'inherit',
@@ -220,7 +220,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
 
           {/* Category pills */}
           <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, fontFamily: FONT }}>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6, fontFamily: FONT }}>
               {t('collab.notes.category')}
             </div>
             <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
@@ -229,7 +229,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
                 const active = category === cat
                 return (
                   <button key={cat} type="button" onClick={() => setCategory(cat)}
-                    style={{ padding: '4px 12px', borderRadius: 99, border: active ? `1.5px solid ${c}` : '1px solid var(--border-faint)', background: active ? `${c}18` : 'transparent', color: active ? c : 'var(--text-muted)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, cursor: 'pointer', fontFamily: FONT }}>
+                    style={{ padding: '4px 12px', borderRadius: 99, border: active ? `1.5px solid ${c}` : '1px solid var(--border-faint)', background: active ? `${c}18` : 'transparent', color: active ? c : 'var(--text-muted)', fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: FONT }}>
                     {cat}
                   </button>
                 )
@@ -239,17 +239,17 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
 
           {/* Website */}
           <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
               {t('collab.notes.website')}
             </div>
             <input value={website} onChange={e => setWebsite(e.target.value)}
               placeholder={t('collab.notes.websitePlaceholder')}
-              style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
+              style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
           </div>
 
           {/* File attachments */}
           {canUploadFiles && <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4, fontFamily: FONT }}>
               {t('collab.notes.attachFiles')}
             </div>
             <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={e => { const files = e.target.files; if (files?.length) setPendingFiles(prev => [...prev, ...Array.from(files)]); e.target.value = '' }} />
@@ -258,7 +258,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
               {existingAttachments.map(a => {
                 const isImage = a.mime_type?.startsWith('image/')
                 return (
-                  <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)' }}>
+                  <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
                     {isImage && <AuthedImg src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
                     {(a.original_name || '').length > 20 ? a.original_name.slice(0, 17) + '...' : a.original_name}
                     <button type="button" onClick={() => handleDeleteAttachment(a.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444', padding: 0, display: 'flex' }}>
@@ -269,7 +269,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
               })}
               {/* New pending files */}
               {pendingFiles.map((f, i) => (
-                <div key={`new-${i}`} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-muted)' }}>
+                <div key={`new-${i}`} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
                   {f.name.length > 20 ? f.name.slice(0, 17) + '...' : f.name}
                   <button type="button" onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 0, display: 'flex' }}>
                     <X size={10} />
@@ -277,7 +277,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
                 </div>
               ))}
               <button type="button" onClick={() => fileRef.current?.click()}
-                style={{ padding: '4px 10px', borderRadius: 8, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontFamily: FONT, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+                style={{ padding: '4px 10px', borderRadius: 8, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 11, fontFamily: FONT, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                 <Plus size={11} /> {t('files.attach') || 'Add'}
               </button>
             </div>
@@ -293,7 +293,7 @@ export function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategor
               padding: '7px 14px',
               background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
               color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)',
-              fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+              fontSize: 12,
               fontWeight: 600,
               fontFamily: FONT,
               border: 'none',

client/src/components/Collab/CollabNotesWebsiteThumbnail.tsx

@@ -37,7 +37,7 @@ export function WebsiteThumbnail({ url, tripId, color }: WebsiteThumbnailProps)
       ) : (
         <>
           <ExternalLink size={14} color="var(--text-muted)" />
-          <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', maxWidth: 42, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
+          <span style={{ fontSize: 7, fontWeight: 600, color: 'var(--text-muted)', maxWidth: 42, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
             {domain}
           </span>
         </>

client/src/components/Collab/CollabPanel.tsx

@@ -175,7 +175,7 @@ export default function CollabPanel({ tripId, tripMembers = [], collabFeatures }
               padding: '8px 0', borderRadius: 10, border: 'none', cursor: 'pointer',
               background: active ? 'var(--accent)' : 'transparent',
               color: active ? 'var(--accent-text)' : 'var(--text-muted)',
-              fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, fontFamily: 'inherit',
+              fontSize: 11, fontWeight: 600, fontFamily: 'inherit',
               transition: 'all 0.15s',
             }}>
               {tab.label}

client/src/components/Collab/CollabPolls.tsx

@@ -32,7 +32,7 @@ interface Poll {
   created_at: string
 }
 
-const FONT = "var(--font-system)"
+const FONT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif"
 
 function timeRemaining(deadline) {
   if (!deadline) return null
@@ -88,30 +88,30 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
     <div style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg, rgba(0,0,0,0.35))', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16, fontFamily: FONT }} onClick={onClose}>
       <form style={{ background: 'var(--bg-card)', borderRadius: 16, width: '100%', maxWidth: 400, maxHeight: '90vh', overflow: 'auto', border: '1px solid var(--border-faint)' }} onClick={e => e.stopPropagation()} onSubmit={handleSubmit}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px 12px', borderBottom: '1px solid var(--border-faint)' }}>
-          <h3 style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.polls.new')}</h3>
+          <h3 style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>{t('collab.polls.new')}</h3>
           <button type="button" onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', padding: 2, display: 'flex' }}><X size={16} /></button>
         </div>
         <div style={{ padding: '14px 16px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
           {/* Question */}
           <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
-            <input autoFocus value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder') || 'Ask a question...'} style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.question')}</div>
+            <input autoFocus value={question} onChange={e => setQuestion(e.target.value)} placeholder={t('collab.polls.questionPlaceholder') || 'Ask a question...'} style={{ width: '100%', border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box' }} />
           </div>
 
           {/* Options */}
           <div>
-            <div style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.options')}</div>
+            <div style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>{t('collab.polls.options')}</div>
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               {options.map((opt, i) => (
                 <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                   <input value={opt} onChange={e => updateOption(i, e.target.value)} placeholder={`${t('collab.polls.option')} ${i + 1}`}
-                    style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
+                    style={{ flex: 1, border: '1px solid var(--border-primary)', borderRadius: 10, padding: '8px 12px', fontSize: 13, background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }} />
                   {options.length > 2 && (
                     <button type="button" onClick={() => removeOption(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 2 }}><X size={14} /></button>
                   )}
                 </div>
               ))}
-              <button type="button" onClick={addOption} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 10, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontFamily: FONT }}>
+              <button type="button" onClick={addOption} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px', borderRadius: 10, border: '1px dashed var(--border-faint)', background: 'transparent', cursor: 'pointer', color: 'var(--text-faint)', fontSize: 12, fontFamily: FONT }}>
                 <Plus size={12} /> {t('collab.polls.addOption')}
               </button>
             </div>
@@ -126,13 +126,13 @@ function CreatePollModal({ onClose, onCreate, t }: CreatePollModalProps) {
             }}>
               <div style={{ width: 16, height: 16, borderRadius: '50%', background: '#fff', transition: 'transform 0.2s', transform: multiChoice ? 'translateX(16px)' : 'translateX(0)' }} />
             </div>
-            <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', fontFamily: FONT }}>{t('collab.polls.multiChoice')}</span>
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: FONT }}>{t('collab.polls.multiChoice')}</span>
           </label>
 
           {/* Submit */}
           <button type="submit" disabled={!canSubmit} style={{
             width: '100%', borderRadius: 99, padding: '9px 14px', background: canSubmit ? 'var(--accent)' : 'var(--border-primary)',
-            color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, border: 'none', cursor: canSubmit ? 'pointer' : 'default', fontFamily: FONT,
+            color: canSubmit ? 'var(--accent-text)' : 'var(--text-faint)', fontSize: 13, fontWeight: 600, border: 'none', cursor: canSubmit ? 'pointer' : 'default', fontFamily: FONT,
           }}>
             {submitting ? '...' : t('collab.polls.create')}
           </button>
@@ -168,7 +168,7 @@ function VoterChip({ voter, offset }: VoterChipProps) {
         style={{
           width: 18, height: 18, borderRadius: '50%', background: 'var(--bg-tertiary)',
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden',
+          fontSize: 7, fontWeight: 700, color: 'var(--text-muted)', overflow: 'hidden',
           border: '1.5px solid var(--bg-card)', marginLeft: offset ? -5 : 0, flexShrink: 0,
         }}>
         {voter.avatar_url ? <img src={voter.avatar_url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : (voter.username || '?')[0].toUpperCase()}
@@ -178,7 +178,7 @@ function VoterChip({ voter, offset }: VoterChipProps) {
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           pointerEvents: 'none', zIndex: 10000, whiteSpace: 'nowrap',
           background: 'var(--bg-card)', color: 'var(--text-primary)',
-          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '5px 10px', borderRadius: 8,
+          fontSize: 11, fontWeight: 500, padding: '5px 10px', borderRadius: 8,
           boxShadow: '0 4px 12px rgba(0,0,0,0.15)', border: '1px solid var(--border-faint)',
         }}>
           {voter.username}
@@ -217,26 +217,26 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
         background: isClosed ? 'var(--bg-secondary)' : 'transparent',
       }}>
         <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
+          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1.35, wordBreak: 'break-word' }}>
             {poll.question}
           </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, flexWrap: 'wrap' }}>
             {isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
                 <Lock size={8} /> {t('collab.polls.closed')}
               </span>
             )}
             {remaining && !isClosed && (
-              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: '#f59e0b', background: '#f59e0b18', padding: '2px 7px', borderRadius: 99 }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 9, fontWeight: 600, color: '#f59e0b', background: '#f59e0b18', padding: '2px 7px', borderRadius: 99 }}>
                 <Clock size={8} /> {remaining}
               </span>
             )}
             {poll.multi_choice && (
-              <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
+              <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--text-faint)', background: 'var(--bg-tertiary)', padding: '2px 7px', borderRadius: 99 }}>
                 {t('collab.polls.multiChoice')}
               </span>
             )}
-            <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>
+            <span style={{ fontSize: 9, color: 'var(--text-faint)' }}>
               {total} {total === 1 ? 'vote' : 'votes'}
             </span>
           </div>
@@ -303,7 +303,7 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
 
               {/* Label */}
               <span style={{
-                flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: myVote || isWinner ? 600 : 400,
+                flex: 1, fontSize: 13, fontWeight: myVote || isWinner ? 600 : 400,
                 color: 'var(--text-primary)', position: 'relative', zIndex: 1,
               }}>
                 {typeof opt === 'string' ? opt : opt.text}
@@ -321,7 +321,7 @@ function PollCard({ poll, currentUser, canEdit, onVote, onClose, onDelete, t }:
               {/* Percentage */}
               {(hasVoted || isClosed) && (
                 <span style={{
-                  fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: myVote ? '#007AFF' : 'var(--text-muted)',
+                  fontSize: 12, fontWeight: 700, color: myVote ? '#007AFF' : 'var(--text-muted)',
                   position: 'relative', zIndex: 1, minWidth: 32, textAlign: 'right',
                 }}>
                   {pct}%
@@ -443,14 +443,14 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
     <div style={{ height: '100%', display: 'flex', flexDirection: 'column', fontFamily: FONT }}>
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }}>
-        <h3 style={{ margin: 0, fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
+        <h3 style={{ margin: 0, fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 7, letterSpacing: 0.3, textTransform: 'uppercase' }}>
           <BarChart3 size={14} color="var(--text-faint)" />
           {t('collab.polls.title')}
         </h3>
         {canEdit && (
           <button onClick={() => setShowForm(true)} style={{
             display: 'inline-flex', alignItems: 'center', gap: 4, borderRadius: 99, padding: '6px 12px',
-            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600,
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 11, fontWeight: 600,
             fontFamily: FONT, border: 'none', cursor: 'pointer',
           }}>
             <Plus size={12} /> {t('collab.polls.new')}
@@ -463,8 +463,8 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
         {polls.length === 0 ? (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px 20px', textAlign: 'center', height: '100%' }}>
             <BarChart3 size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
-            <div style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.polls.empty')}</div>
-            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)' }}>{t('collab.polls.emptyHint')}</div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.polls.empty')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.polls.emptyHint')}</div>
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
@@ -474,7 +474,7 @@ export default function CollabPolls({ tripId, currentUser }: CollabPollsProps) {
             {closedPolls.length > 0 && (
               <>
                 {activePolls.length > 0 && (
-                  <div style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, padding: '8px 0 2px' }}>
+                  <div style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.3, padding: '8px 0 2px' }}>
                     {t('collab.polls.closedSection') || 'Closed'}
                   </div>
                 )}

client/src/components/Collab/WhatsNextWidget.tsx

@@ -91,7 +91,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
         padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
       }}>
         <Sparkles size={14} color="var(--text-faint)" />
-        <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
+        <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-muted)', letterSpacing: 0.3, textTransform: 'uppercase' }}>
           {t('collab.whatsNext.title') || "What's Next"}
         </span>
       </div>
@@ -101,8 +101,8 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
         {upcoming.length === 0 ? (
           <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: '48px 20px', textAlign: 'center' }}>
             <Calendar size={36} color="var(--text-faint)" strokeWidth={1.3} style={{ marginBottom: 12 }} />
-            <div style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.whatsNext.empty')}</div>
-            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)' }}>{t('collab.whatsNext.emptyHint')}</div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', marginBottom: 4 }}>{t('collab.whatsNext.empty')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)' }}>{t('collab.whatsNext.emptyHint')}</div>
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
@@ -114,7 +114,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                 <React.Fragment key={item.id}>
                   {showDayHeader && (
                     <div style={{
-                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, color: 'var(--text-faint)',
+                      fontSize: 10, fontWeight: 500, color: 'var(--text-faint)',
                       textTransform: 'uppercase', letterSpacing: 0.5,
                       padding: idx === 0 ? '0 4px 4px' : '8px 4px 4px',
                     }}>
@@ -132,15 +132,15 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                   >
                     {/* Time column */}
                     <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minWidth: 44, flexShrink: 0 }}>
-                      <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                      <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
                         {item.time ? formatTime(item.time, is12h) : 'TBD'}
                       </span>
                       {item.endTime && (
                         <>
-                          <span style={{ fontSize: 'calc(7px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
+                          <span style={{ fontSize: 7, color: 'var(--text-faint)', fontWeight: 600, letterSpacing: 0.3, margin: '2px 0', textTransform: 'uppercase' }}>
                             {t('collab.whatsNext.until') || 'bis'}
                           </span>
-                          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
+                          <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-primary)', whiteSpace: 'nowrap', lineHeight: 1 }}>
                             {formatTime(item.endTime, is12h)}
                           </span>
                         </>
@@ -152,13 +152,13 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
 
                     {/* Details */}
                     <div style={{ flex: 1, minWidth: 0 }}>
-                      <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-primary)', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                         {item.name}
                       </div>
                       {item.address && (
                         <div style={{ display: 'flex', alignItems: 'center', gap: 3, marginTop: 2 }}>
                           <MapPin size={9} color="var(--text-faint)" style={{ flexShrink: 0 }} />
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          <span style={{ fontSize: 10, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                             {item.address}
                           </span>
                         </div>
@@ -175,7 +175,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                               <div style={{
                                 width: 16, height: 16, borderRadius: '50%', background: 'var(--bg-secondary)',
                                 display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                fontSize: 'calc(7px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-muted)',
+                                fontSize: 7, fontWeight: 700, color: 'var(--text-muted)',
                                 overflow: 'hidden', flexShrink: 0,
                               }}>
                                 {p.avatar
@@ -183,7 +183,7 @@ export default function WhatsNextWidget({ tripMembers = [] }: WhatsNextWidgetPro
                                   : p.username?.[0]?.toUpperCase()
                                 }
                               </div>
-                              <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
+                              <span style={{ fontSize: 10, fontWeight: 500, color: 'var(--text-muted)' }}>{p.username}</span>
                             </div>
                           ))}
                         </div>

client/src/components/Files/FileManager.constants.ts

@@ -1 +1 @@
-export const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'])
+export const TRANSPORT_TYPES = new Set(['flight', 'train', 'car', 'cruise'])

client/src/components/Files/FileManager.helpers.ts

@@ -1,4 +1,4 @@
-import { FileText, FileImage, File, FileVideo, Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { FileText, FileImage, File, Plane, Train, Car, Ship } from 'lucide-react'
 import { downloadFile } from '../../utils/fileDownload'
 
 export function isImage(mimeType?: string | null) {
@@ -6,30 +6,9 @@ export function isImage(mimeType?: string | null) {
   return mimeType.startsWith('image/')
 }
 
-export function isVideo(mimeType?: string | null) {
-  return !!mimeType && mimeType.startsWith('video/')
-}
-
-/** Image or video — the file types that open in the media lightbox (#823). */
-export function isMedia(mimeType?: string | null) {
-  return isImage(mimeType) || isVideo(mimeType)
-}
-
-/**
- * Markdown file (#1345). Detected by EXTENSION first — browsers often send an
- * empty / octet-stream / text/plain MIME for .md — falling back to the markdown
- * MIME types.
- */
-export function isMarkdown(mimeType?: string | null, name?: string | null) {
-  const ext = (name || '').toLowerCase().split('.').pop()
-  if (ext === 'md' || ext === 'markdown') return true
-  return !!mimeType && (mimeType === 'text/markdown' || mimeType === 'text/x-markdown')
-}
-
 export function getFileIcon(mimeType?: string | null) {
   if (!mimeType) return File
   if (mimeType === 'application/pdf') return FileText
-  if (isVideo(mimeType)) return FileVideo
   if (isImage(mimeType)) return FileImage
   return File
 }
@@ -54,12 +33,7 @@ export function formatDateWithLocale(dateStr?: string | null, locale?: string) {
 
 export function transportIcon(type: string) {
   if (type === 'train') return Train
-  if (type === 'bus') return Bus
   if (type === 'car') return Car
-  if (type === 'taxi') return CarTaxiFront
-  if (type === 'bicycle') return Bike
   if (type === 'cruise') return Ship
-  if (type === 'ferry') return Sailboat
-  if (type === 'transport_other') return Route
   return Plane
 }

client/src/components/Files/FileManager.test.tsx

@@ -15,15 +15,6 @@ vi.mock('../../api/authUrl', () => ({
   getAuthUrl: vi.fn().mockResolvedValue('http://localhost/signed-url'),
 }));
 
-// Markdown pipeline mocked to render its children verbatim (the unified/ESM
-// pipeline is heavy in jsdom) — we only assert the markdown text reaches the modal.
-vi.mock('react-markdown', () => ({
-  default: ({ children }: { children: string }) => <span data-testid="md">{children}</span>,
-}));
-vi.mock('remark-gfm', () => ({ default: () => ({}) }));
-vi.mock('remark-breaks', () => ({ default: () => ({}) }));
-vi.mock('rehype-sanitize', () => ({ default: () => ({}) }));
-
 // Mock filesApi
 vi.mock('../../api/client', async (importOriginal) => {
   const original = (await importOriginal()) as any;
@@ -298,21 +289,6 @@ describe('FileManager', () => {
     });
   });
 
-  it('FE-COMP-FILEMANAGER-034: markdown file click opens an inline rendered preview (#1345)', async () => {
-    server.use(http.get('http://localhost/signed-url', () => HttpResponse.text('# Hello heading\n\nworld body')));
-    const files = [buildFile({ id: 1, mime_type: 'text/markdown', original_name: 'notes.md' })];
-    render(<FileManager {...defaultProps} files={files} />);
-    const user = userEvent.setup();
-
-    await user.click(screen.getByText('notes.md'));
-
-    await waitFor(() => {
-      const md = screen.getByTestId('md');
-      expect(md).toBeInTheDocument();
-      expect(md.textContent).toContain('Hello heading');
-    });
-  });
-
   it('FE-COMP-FILEMANAGER-015: file with uploader name shows avatar chip initials', () => {
     const files = [buildFile({ uploaded_by_name: 'Alice Smith' })];
     render(<FileManager {...defaultProps} files={files} />);

client/src/components/Files/FileManager.tsx

@@ -2,27 +2,23 @@ import { useFileManager, type FileManagerProps } from './useFileManager'
 import { ImageLightbox } from './FileManagerImageLightbox'
 import { AssignModal } from './FileManagerAssignModal'
 import { PdfPreviewModal } from './FileManagerPdfPreviewModal'
-import { MarkdownPreviewModal } from './FileManagerMarkdownPreviewModal'
-import { isMarkdown } from './FileManager.helpers'
 import { FileManagerToolbar } from './FileManagerToolbar'
 import { TrashView } from './FileManagerTrashView'
 import { FilesView } from './FileManagerFilesView'
 
 export default function FileManager(props: FileManagerProps) {
   const S = useFileManager(props)
-  const { lightboxIndex, setLightboxIndex, mediaFiles, assignFileId, previewFile, handlePaste, showTrash } = S
+  const { lightboxIndex, setLightboxIndex, imageFiles, assignFileId, previewFile, handlePaste, showTrash } = S
   return (
-    <div className="flex flex-col h-full" style={{ fontFamily: "var(--font-system)" }} onPaste={handlePaste} tabIndex={-1}>
+    <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
       {/* Lightbox */}
-      {lightboxIndex !== null && <ImageLightbox files={mediaFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
+      {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
 
       {/* Assign modal */}
       {assignFileId && <AssignModal {...S} />}
 
-      {/* Document preview modal (markdown is rendered inline; everything else PDF/object) */}
-      {previewFile && (isMarkdown(previewFile.mime_type, previewFile.original_name)
-        ? <MarkdownPreviewModal {...S} />
-        : <PdfPreviewModal {...S} />)}
+      {/* PDF preview modal */}
+      {previewFile && <PdfPreviewModal {...S} />}
 
       {/* Toolbar */}
       <FileManagerToolbar {...S} />

client/src/components/Files/FileManagerAssignModal.tsx

@@ -17,8 +17,8 @@ export function AssignModal(S: FileManagerState) {
       }} onClick={e => e.stopPropagation()}>
         <div style={{ padding: '16px 20px 12px', borderBottom: '1px solid var(--border-primary)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
           <div style={{ flex: 1, minWidth: 0 }}>
-            <div style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)' }}>{t('files.assignTitle')}</div>
-            <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)' }}>{t('files.assignTitle')}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-faint)', marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
               {files.find(f => f.id === assignFileId)?.original_name || ''}
             </div>
           </div>
@@ -27,7 +27,7 @@ export function AssignModal(S: FileManagerState) {
           </button>
         </div>
         <div style={{ padding: '8px 12px 0' }}>
-          <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '0 2px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+          <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '0 2px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
             {t('files.noteLabel') || 'Note'}
           </div>
           <input
@@ -43,7 +43,7 @@ export function AssignModal(S: FileManagerState) {
             }}
             onKeyDown={e => { if (e.key === 'Enter') (e.target as HTMLInputElement).blur() }}
             style={{
-              width: '100%', padding: '7px 10px', fontSize: 'calc(13px * var(--fs-scale-body, 1))', borderRadius: 8,
+              width: '100%', padding: '7px 10px', fontSize: 13, borderRadius: 8,
               border: '1px solid var(--border-primary)', background: 'var(--bg-secondary)',
               color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none',
             }}
@@ -91,7 +91,7 @@ export function AssignModal(S: FileManagerState) {
                   }
                 }} style={{
                   width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                  border: 'none', cursor: 'pointer', fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-primary)',
+                  border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
                   borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
                   display: 'flex', alignItems: 'center', gap: 6,
                 }}
@@ -106,18 +106,18 @@ export function AssignModal(S: FileManagerState) {
 
             const placesSection = places.length > 0 && (
               <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                   {t('files.assignPlace')}
                 </div>
                 {dayGroups.map(({ day, dayPlaces }) => (
                   <div key={day.id}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>
                       <span>{day.title || t('dayplan.dayN', { n: day.day_number })}</span>
                       {(() => {
                         const badge = day.date || (day.title ? t('dayplan.dayN', { n: day.day_number }) : null)
                         return badge ? (
                           <span style={{
-                            fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)',
+                            fontSize: 10, fontWeight: 600, color: 'var(--text-faint)',
                             background: 'var(--bg-tertiary)', padding: '1px 6px', borderRadius: 999,
                           }}>{badge}</span>
                         ) : null
@@ -128,7 +128,7 @@ export function AssignModal(S: FileManagerState) {
                 ))}
                 {unassigned.length > 0 && (
                   <div>
-                    {dayGroups.length > 0 && <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>{t('files.unassigned')}</div>}
+                    {dayGroups.length > 0 && <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', padding: '8px 10px 2px' }}>{t('files.unassigned')}</div>}
                     {unassigned.map(placeBtn)}
                   </div>
                 )}
@@ -166,7 +166,7 @@ export function AssignModal(S: FileManagerState) {
                   }
                 }} style={{
                   width: '100%', textAlign: 'left', padding: '6px 10px 6px 20px', background: isLinked ? 'var(--bg-hover)' : 'none',
-                  border: 'none', cursor: 'pointer', fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-primary)',
+                  border: 'none', cursor: 'pointer', fontSize: 13, color: 'var(--text-primary)',
                   borderRadius: 8, fontFamily: 'inherit', fontWeight: isLinked ? 600 : 400,
                   display: 'flex', alignItems: 'center', gap: 6,
                 }}
@@ -183,7 +183,7 @@ export function AssignModal(S: FileManagerState) {
               <div style={{ flex: 1, minWidth: 0 }}>
                 {bookingReservations.length > 0 && (
                   <>
-                    <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>
                       {t('files.assignBooking')}
                     </div>
                     {bookingReservations.map(reservationBtn)}
@@ -191,7 +191,7 @@ export function AssignModal(S: FileManagerState) {
                 )}
                 {transportReservations.length > 0 && (
                   <>
-                    <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: bookingReservations.length > 0 ? 4 : 0 }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', padding: '8px 10px 4px', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: bookingReservations.length > 0 ? 4 : 0 }}>
                       {t('files.assignTransport')}
                     </div>
                     {transportReservations.map(reservationBtn)}

client/src/components/Files/FileManagerAvatarChip.tsx

@@ -32,7 +32,7 @@ export function AvatarChip({ name, avatarUrl, size = 20 }: { name: string; avata
         <div style={{
           position: 'fixed', top: pos.top, left: pos.left, transform: 'translate(-50%, -100%)',
           background: 'var(--bg-elevated)', color: 'var(--text-primary)',
-          fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 500, padding: '3px 8px', borderRadius: 6,
+          fontSize: 11, fontWeight: 500, padding: '3px 8px', borderRadius: 6,
           boxShadow: '0 2px 8px rgba(0,0,0,0.15)', whiteSpace: 'nowrap', zIndex: 9999,
           pointerEvents: 'none',
         }}>

client/src/components/Files/FileManagerFilesView.tsx

@@ -22,15 +22,15 @@ export function FilesView(S: FileManagerState) {
         <input {...getInputProps()} />
         <Upload size={24} style={{ margin: '0 auto 8px', color: isDragActive ? 'var(--text-secondary)' : 'var(--text-faint)', display: 'block' }} />
         {uploading ? (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-secondary)' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: 'var(--text-secondary)' }}>
             <div style={{ width: 14, height: 14, border: '2px solid var(--text-secondary)', borderTopColor: 'transparent', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
             {t('files.uploading')}
           </div>
         ) : (
           <>
-            <p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-secondary)', fontWeight: 500, margin: 0 }}>{t('files.dropzone')}</p>
-            <p style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 3 }}>{t('files.dropzoneHint')}</p>
-            <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 6, opacity: 0.7 }}>
+            <p style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 500, margin: 0 }}>{t('files.dropzone')}</p>
+            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', marginTop: 3 }}>{t('files.dropzoneHint')}</p>
+            <p style={{ fontSize: 10, color: 'var(--text-faint)', marginTop: 6, opacity: 0.7 }}>
               {(allowedFileTypes || 'jpg,jpeg,png,gif,webp,heic,pdf,doc,docx,xls,xlsx,txt,csv').toUpperCase().split(',').join(', ')} · Max 50 MB
             </p>
           </>
@@ -48,14 +48,14 @@ export function FilesView(S: FileManagerState) {
           ...(files.some(f => f.note_id) ? [{ id: 'collab', label: t('files.filterCollab') || 'Collab' }] : []),
         ].map(tab => (
           <button key={tab.id} onClick={() => setFilterType(tab.id)} style={{
-            padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+            padding: '4px 12px', borderRadius: 99, border: 'none', cursor: 'pointer', fontSize: 12,
             fontFamily: 'inherit', transition: 'all 0.12s',
             background: filterType === tab.id ? 'var(--accent)' : 'transparent',
             color: filterType === tab.id ? 'var(--accent-text)' : 'var(--text-muted)',
             fontWeight: filterType === tab.id ? 600 : 400,
           }}>{tab.icon ? <tab.icon size={13} fill={filterType === tab.id ? '#facc15' : 'none'} color={filterType === tab.id ? '#facc15' : 'currentColor'} /> : tab.label}</button>
         ))}
-        <span style={{ marginLeft: 'auto', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', alignSelf: 'center' }}>
+        <span style={{ marginLeft: 'auto', fontSize: 11.5, color: 'var(--text-faint)', alignSelf: 'center' }}>
           {filteredFiles.length === 1 ? t('files.countSingular') : t('files.count', { count: filteredFiles.length })}
         </span>
       </div>
@@ -65,8 +65,8 @@ export function FilesView(S: FileManagerState) {
         {filteredFiles.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
             <FileText size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-            <p style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.empty')}</p>
-            <p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-faint)', margin: 0 }}>{t('files.emptyHint')}</p>
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.empty')}</p>
+            <p style={{ fontSize: 13, color: 'var(--text-faint)', margin: 0 }}>{t('files.emptyHint')}</p>
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>

client/src/components/Files/FileManagerImageLightbox.tsx

@@ -1,11 +1,10 @@
 import { useState, useEffect } from 'react'
-import { ExternalLink, Download, X, ChevronLeft, ChevronRight, Play } from 'lucide-react'
+import { ExternalLink, Download, X, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import type { TripFile } from '../../types'
 import { getAuthUrl } from '../../api/authUrl'
 import { openFile as openFileUrl } from '../../utils/fileDownload'
-import { triggerDownload, isVideo } from './FileManager.helpers'
-import VideoPlayer from '../Journey/VideoPlayer'
+import { triggerDownload } from './FileManager.helpers'
 
 // Image lightbox with gallery navigation
 interface ImageLightboxProps {
@@ -21,14 +20,10 @@ export function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxPro
   const [touchStart, setTouchStart] = useState<number | null>(null)
   const file = files[index]
 
-  const fileIsVideo = isVideo(file?.mime_type)
-
   useEffect(() => {
     setImgSrc('')
-    // Images use a one-shot signed URL; a video must use the plain same-origin
-    // URL (cookie auth) so its many Range requests all authenticate (#823).
-    if (file && !isVideo(file.mime_type)) getAuthUrl(file.url, 'download').then(setImgSrc)
-  }, [file?.url, file?.mime_type])
+    if (file) getAuthUrl(file.url, 'download').then(setImgSrc)
+  }, [file?.url])
 
   const goPrev = () => setIndex(i => Math.max(0, i - 1))
   const goNext = () => setIndex(i => Math.min(files.length - 1, i + 1))
@@ -76,7 +71,7 @@ export function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxPro
     >
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }} onClick={e => e.stopPropagation()}>
-        <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
           {file.original_name}
           <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
         </span>
@@ -103,13 +98,7 @@ export function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxPro
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', minHeight: 0 }}
         onClick={e => { if (e.target === e.currentTarget) onClose() }}>
         {navBtn('left', goPrev, hasPrev)}
-        {fileIsVideo ? (
-          <div onClick={e => e.stopPropagation()}>
-            <VideoPlayer src={file.url} style={{ maxWidth: '85vw', maxHeight: '80vh', borderRadius: 8 }} />
-          </div>
-        ) : (
-          imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />
-        )}
+        {imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />}
         {navBtn('right', goNext, hasNext)}
       </div>
 
@@ -126,20 +115,14 @@ export function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxPro
 }
 
 function ThumbImg({ file, active, onClick }: { file: TripFile & { url: string }; active: boolean; onClick: () => void }) {
-  const fileIsVideo = isVideo(file.mime_type)
   const [src, setSrc] = useState('')
-  // Videos have no stored thumbnail and can't render as an <img>; show a play
-  // placeholder and don't mint a download token for them (#823).
-  useEffect(() => { if (!fileIsVideo) getAuthUrl(file.url, 'download').then(setSrc) }, [file.url, fileIsVideo])
+  useEffect(() => { getAuthUrl(file.url, 'download').then(setSrc) }, [file.url])
   return (
     <button onClick={onClick} style={{
       width: 48, height: 48, borderRadius: 6, overflow: 'hidden', border: active ? '2px solid #fff' : '2px solid transparent',
       opacity: active ? 1 : 0.5, cursor: 'pointer', padding: 0, background: '#111', flexShrink: 0, transition: 'opacity 0.15s',
-      display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'rgba(255,255,255,0.7)',
     }}>
-      {fileIsVideo
-        ? <Play size={16} fill="currentColor" />
-        : (src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />)}
+      {src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
     </button>
   )
 }

client/src/components/Files/FileManagerMarkdownPreviewModal.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from 'react'
-import ReactDOM from 'react-dom'
-import { ExternalLink, Download, X } from 'lucide-react'
-import Markdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import remarkBreaks from 'remark-breaks'
-import rehypeSanitize from 'rehype-sanitize'
-import { openFile as openFileUrl } from '../../utils/fileDownload'
-import type { FileManagerState } from './useFileManager'
-import { triggerDownload } from './FileManager.helpers'
-
-/**
- * Inline preview for uploaded Markdown files (#1345). Fetches the file's text via
- * the signed preview URL and renders it with react-markdown. Output is sanitized
- * with rehype-sanitize — these are UNTRUSTED uploads, unlike collab notes — and
- * react-markdown v10 already drops raw HTML, so no script can execute.
- */
-export function MarkdownPreviewModal(S: FileManagerState) {
-  const { previewFile, setPreviewFile, previewFileUrl, toast, t } = S
-  const [text, setText] = useState('')
-  const [err, setErr] = useState(false)
-
-  useEffect(() => {
-    if (!previewFileUrl) return
-    let cancelled = false
-    setErr(false)
-    setText('')
-    fetch(previewFileUrl, { credentials: 'include' })
-      .then(r => (r.ok ? r.text() : Promise.reject(new Error('load failed'))))
-      .then(body => { if (!cancelled) setText(body) })
-      .catch(() => { if (!cancelled) setErr(true) })
-    return () => { cancelled = true }
-  }, [previewFileUrl])
-
-  return ReactDOM.createPortal(
-    <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.85)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
-      onClick={() => setPreviewFile(null)}
-    >
-      <div
-        style={{ width: '100%', maxWidth: 820, height: '94vh', background: 'var(--bg-card)', borderRadius: 12, overflow: 'hidden', display: 'flex', flexDirection: 'column', boxShadow: '0 20px 60px rgba(0,0,0,0.3)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-          <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
-            <button
-              onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px', borderRadius: 6 }}>
-              <ExternalLink size={13} /> {t('files.openTab')}
-            </button>
-            <button
-              onClick={() => triggerDownload(previewFile.url, previewFile.original_name)}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', padding: '4px 8px', borderRadius: 6 }}>
-              <Download size={13} /> {t('files.download') || 'Download'}
-            </button>
-            <button onClick={() => setPreviewFile(null)}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6 }}>
-              <X size={18} />
-            </button>
-          </div>
-        </div>
-        <div className="collab-note-md" style={{ flex: 1, overflowY: 'auto', padding: '20px 28px', color: 'var(--text-primary)', lineHeight: 1.6, wordBreak: 'break-word' }}>
-          {err
-            ? <p style={{ color: 'var(--text-muted)' }}>{t('files.openError')}</p>
-            : <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} rehypePlugins={[rehypeSanitize]}>{text}</Markdown>}
-        </div>
-      </div>
-    </div>,
-    document.body
-  )
-}

client/src/components/Files/FileManagerPdfPreviewModal.tsx

@@ -16,18 +16,18 @@ export function PdfPreviewModal(S: FileManagerState) {
         onClick={e => e.stopPropagation()}
       >
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', borderBottom: '1px solid var(--border-primary)', flexShrink: 0 }}>
-          <span style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
+          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
             <button
               onClick={() => openFileUrl(previewFile.url, previewFile.original_name).catch(() => toast.error(t('files.openError')))}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
+              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
               onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
               onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
               <ExternalLink size={13} /> {t('files.openTab')}
             </button>
             <button
               onClick={() => triggerDownload(previewFile.url, previewFile.original_name)}
-              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
+              style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
               onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
               onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
               <Download size={13} /> {t('files.download') || 'Download'}

client/src/components/Files/FileManagerRow.tsx

@@ -49,7 +49,7 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
               const isPdf = file.mime_type === 'application/pdf'
               return (
                 <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', background: isPdf ? '#ef44441a' : 'var(--bg-tertiary)' }}>
-                  <span style={{ fontSize: 'calc(9px * var(--fs-scale-caption, 1))', fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                  <span style={{ fontSize: 9, fontWeight: 700, color: isPdf ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
                 </div>
               )
             })()
@@ -65,19 +65,19 @@ export function FileRow(p: FileManagerState & { file: TripFile; isTrash?: boolea
           {!isTrash && file.starred ? <Star size={12} fill="#facc15" color="#facc15" style={{ flexShrink: 0 }} /> : null}
           <span
             onClick={() => !isTrash && openFile(file)}
-            style={{ fontWeight: 500, fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: isTrash ? 'default' : 'pointer' }}
+            style={{ fontWeight: 500, fontSize: 13, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: isTrash ? 'default' : 'pointer' }}
           >
             {file.original_name}
           </span>
         </div>
 
         {file.description && (
-          <p style={{ fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.description}</p>
+          <p style={{ fontSize: 11.5, color: 'var(--text-faint)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{file.description}</p>
         )}
 
         <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
-          {file.file_size && <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{formatSize(file.file_size)}</span>}
-          <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
+          {file.file_size && <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatSize(file.file_size)}</span>}
+          <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{formatDateWithLocale(file.created_at, locale)}</span>
 
           {linkedPlaces.map(p => (
             <SourceBadge key={p.id} icon={MapPin} label={`${t('files.sourcePlan')} · ${p.name}`} />

client/src/components/Files/FileManagerSourceBadge.tsx

@@ -8,7 +8,7 @@ export function SourceBadge({ icon: Icon, label }: SourceBadgeProps) {
   return (
     <span style={{
       display: 'inline-flex', alignItems: 'center', gap: 4,
-      fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))', color: '#4b5563',
+      fontSize: 10.5, color: '#4b5563',
       background: 'var(--bg-tertiary)', border: '1px solid var(--border-primary)',
       borderRadius: 6, padding: '2px 7px',
       fontWeight: 500, maxWidth: '100%', overflow: 'hidden',

client/src/components/Files/FileManagerToolbar.tsx

@@ -10,7 +10,7 @@ export function FileManagerToolbar(S: FileManagerState) {
         padding: '14px 16px 14px 22px',
         display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
       }}>
-        <h2 style={{ margin: 0, fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
+        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.01em', flexShrink: 0 }}>
           {showTrash ? (t('files.trash') || 'Trash') : t('files.title')}
         </h2>
 
@@ -40,7 +40,7 @@ export function FileManagerToolbar(S: FileManagerState) {
                     style={{
                       appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                       display: 'inline-flex', alignItems: 'center', gap: 6,
-                      padding: '6px 12px', borderRadius: 99, fontSize: 'calc(13px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap',
+                      padding: '6px 12px', borderRadius: 99, fontSize: 13, whiteSpace: 'nowrap',
                       background: active ? 'var(--bg-card)' : 'transparent',
                       color: active ? 'var(--text-primary)' : 'var(--text-muted)',
                       fontWeight: active ? 500 : 400,
@@ -51,7 +51,7 @@ export function FileManagerToolbar(S: FileManagerState) {
                     {TabIcon ? <TabIcon size={13} fill={active ? '#facc15' : 'none'} color={active ? '#facc15' : 'currentColor'} /> : null}
                     {'label' in tab && tab.label}
                     <span style={{
-                      fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600,
+                      fontSize: 10, fontWeight: 600,
                       background: active ? 'var(--bg-tertiary)' : 'rgba(0,0,0,0.06)',
                       color: 'var(--text-faint)',
                       padding: '1px 6px', borderRadius: 99, minWidth: 16, textAlign: 'center',
@@ -66,7 +66,7 @@ export function FileManagerToolbar(S: FileManagerState) {
         <button onClick={toggleTrash} style={{
           appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
           display: 'inline-flex', alignItems: 'center', gap: 6,
-          padding: '9px 14px', borderRadius: 10, fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500,
+          padding: '9px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500,
           background: 'var(--accent)', color: 'var(--accent-text)',
           flexShrink: 0, marginLeft: 'auto',
           opacity: showTrash ? 1 : 0.88,

client/src/components/Files/FileManagerTrashView.tsx

@@ -10,7 +10,7 @@ export function TrashView(S: FileManagerState) {
         <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 12 }}>
           <button onClick={handleEmptyTrash} style={{
             padding: '5px 12px', borderRadius: 8, border: '1px solid #fecaca',
-            background: '#fef2f2', color: '#dc2626', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 500,
+            background: '#fef2f2', color: '#dc2626', fontSize: 12, fontWeight: 500,
             cursor: 'pointer', fontFamily: 'inherit',
           }}>
             {t('files.emptyTrash') || 'Empty Trash'}
@@ -24,7 +24,7 @@ export function TrashView(S: FileManagerState) {
       ) : trashFiles.length === 0 ? (
         <div style={{ textAlign: 'center', padding: '60px 20px', color: 'var(--text-faint)' }}>
           <Trash2 size={40} style={{ color: 'var(--text-faint)', display: 'block', margin: '0 auto 12px' }} />
-          <p style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.trashEmpty') || 'Trash is empty'}</p>
+          <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>{t('files.trashEmpty') || 'Trash is empty'}</p>
         </div>
       ) : (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>

client/src/components/Files/useFileManager.ts

@@ -7,7 +7,7 @@ import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../ty
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { getAuthUrl } from '../../api/authUrl'
-import { isImage, isMedia } from './FileManager.helpers'
+import { isImage } from './FileManager.helpers'
 
 export interface FileManagerProps {
   files?: TripFile[]
@@ -184,12 +184,11 @@ export function useFileManager({ files = [], onUpload, onDelete, onUpdate, place
     }
   }
 
-  // Image OR video — both open in the lightbox; videos play there (#823).
-  const mediaFiles = filteredFiles.filter(f => isMedia(f.mime_type))
+  const imageFiles = filteredFiles.filter(f => isImage(f.mime_type))
 
   const openFile = (file) => {
-    if (isMedia(file.mime_type)) {
-      const idx = mediaFiles.findIndex(f => f.id === file.id)
+    if (isImage(file.mime_type)) {
+      const idx = imageFiles.findIndex(f => f.id === file.id)
       setLightboxIndex(idx >= 0 ? idx : 0)
     } else {
       setPreviewFile(file)
@@ -203,7 +202,7 @@ export function useFileManager({ files = [], onUpload, onDelete, onUpdate, place
     toggleTrash, refreshFiles, handleStar, handleRestore, handlePermanentDelete, handleEmptyTrash,
     previewFile, setPreviewFile, previewFileUrl, assignFileId, setAssignFileId,
     getRootProps, getInputProps, isDragActive, handlePaste, filteredFiles, handleDelete,
-    handleAssign, mediaFiles, openFile,
+    handleAssign, imageFiles, openFile,
   }
 }
 

client/src/components/Journey/JournalBody.tsx

@@ -48,7 +48,7 @@ export default function JournalBody({ text, dark }: Props) {
                 <pre style={{
                   background: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
                   borderRadius: 8, padding: 14, overflowX: 'auto',
-                  fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontFamily: 'monospace', margin: '12px 0',
+                  fontSize: 13, fontFamily: 'monospace', margin: '12px 0',
                 }}>
                   <code>{children}</code>
                 </pre>

client/src/components/Journey/JourneyDetailPageGalleryView.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState, useRef } from 'react'
-import { RefreshCw, Camera, Image, Plus, X, Play } from 'lucide-react'
+import { RefreshCw, Camera, Image, Plus, X } from 'lucide-react'
 import { normalizeImageFiles } from '../../utils/convertHeic'
-import { isVideoFile } from '../../utils/videoPoster'
 import { useJourneyStore } from '../../store/journeyStore'
 import { useTranslation } from '../../i18n'
 import { journeyApi, addonsApi } from '../../api/client'
@@ -67,11 +66,7 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
     if (!files?.length) return
     setGalleryProgress({ done: 0, total: files.length })
     try {
-      // Videos skip HEIC normalization; only images are converted (#823).
-      const all = Array.from(files)
-      const videos = all.filter(isVideoFile)
-      const images = all.filter(f => !isVideoFile(f))
-      const normalized = [...(images.length ? await normalizeImageFiles(images) : []), ...videos]
+      const normalized = await normalizeImageFiles(files)
       const { failed } = await useJourneyStore.getState().uploadGalleryPhotos(journeyId, normalized, {
         onProgress: p => setGalleryProgress({ done: p.done, total: p.total }),
       })
@@ -115,7 +110,7 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
 
   return (
     <div>
-      <input ref={galleryFileRef} type="file" accept="image/*,video/*" multiple onChange={handleGalleryUpload} className="hidden" />
+      <input ref={galleryFileRef} type="file" accept="image/*" multiple onChange={handleGalleryUpload} className="hidden" />
 
       {/* Header */}
       <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
@@ -163,26 +158,13 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
               className="relative aspect-square rounded-lg overflow-hidden cursor-pointer group"
               onClick={() => onPhotoClick(allPhotos, i)}
             >
-              {photo.media_type === 'video' && !photo.thumbnail_path ? (
-                // Poster-less video (capture failed / unsupported codec): show a
-                // neutral tile rather than a broken 404 thumbnail (#823).
-                <div className="w-full h-full bg-zinc-200 dark:bg-zinc-800" />
-              ) : (
-                <img
-                  src={photoUrl(photo, 'thumbnail')}
-                  alt={photo.caption || ''}
-                  className="w-full h-full object-cover transition-transform group-hover:scale-105"
-                  loading="lazy"
-                />
-              )}
+              <img
+                src={photoUrl(photo, 'thumbnail')}
+                alt={photo.caption || ''}
+                className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                loading="lazy"
+              />
               <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
-              {photo.media_type === 'video' && (
-                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                  <span className="w-9 h-9 rounded-full bg-black/55 backdrop-blur flex items-center justify-center text-white">
-                    <Play size={16} className="ml-0.5" fill="currentColor" />
-                  </span>
-                </div>
-              )}
               {/* Delete button */}
               <button
                 onClick={(e) => { e.stopPropagation(); handleDeletePhoto(photo.id) }}
@@ -223,10 +205,10 @@ export function GalleryView({ entries, gallery, journeyId, userId, trips, onPhot
             for (const group of groups) {
               try {
                 if (entryId) {
-                  const result = await journeyApi.addProviderPhotos(entryId, pickerProvider!, group.assetIds, undefined, group.passphrase, group.mediaTypes)
+                  const result = await journeyApi.addProviderPhotos(entryId, pickerProvider!, group.assetIds, undefined, group.passphrase)
                   added += result.added || 0
                 } else {
-                  const result = await journeyApi.addProviderPhotosToGallery(journeyId, pickerProvider!, group.assetIds, group.passphrase, group.mediaTypes)
+                  const result = await journeyApi.addProviderPhotosToGallery(journeyId, pickerProvider!, group.assetIds, group.passphrase)
                   added += result.added || 0
                 }
               } catch {

client/src/components/Journey/JourneyDetailPageProviderPicker.tsx

@@ -13,7 +13,7 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
   trips: JourneyTrip[]
   existingAssetIds: Set<string>
   onClose: () => void
-  onAdd: (groups: Array<{ assetIds: string[]; passphrase?: string; mediaTypes?: string[] }>, entryId: number | null) => Promise<void>
+  onAdd: (groups: Array<{ assetIds: string[]; passphrase?: string }>, entryId: number | null) => Promise<void>
 }) {
   const { t } = useTranslation()
   const [filter, setFilter] = useState<'trip' | 'custom' | 'all' | 'album'>('trip')
@@ -27,7 +27,7 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
   const [searchPage, setSearchPage] = useState(1)
   const [searchFrom, setSearchFrom] = useState('')
   const [searchTo, setSearchTo] = useState('')
-  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string; mediaType?: string }>>(new Map())
+  const [selected, setSelected] = useState<Map<string, { albumId?: string; passphrase?: string }>>(new Map())
   const [customFrom, setCustomFrom] = useState('')
   const [customTo, setCustomTo] = useState('')
   const [targetEntryId, setTargetEntryId] = useState<number | null>(null)
@@ -123,8 +123,7 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
       if (next.has(id)) {
         next.delete(id)
       } else {
-        const mediaType = (photos as any[]).find(p => p.id === id)?.mediaType
-        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType })
+        next.set(id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase })
       }
       return next
     })
@@ -294,7 +293,7 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
                   if (allSelected) {
                     setSelected(new Map())
                   } else {
-                    setSelected(new Map(selectable.map((a: any) => [a.id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase, mediaType: a.mediaType }])))
+                    setSelected(new Map(selectable.map((a: any) => [a.id, { albumId: selectedAlbum ?? undefined, passphrase: selectedAlbumPassphrase }])))
                   }
                 }}
                 className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-[11px] font-medium border border-zinc-200 dark:border-zinc-700 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800"
@@ -397,14 +396,13 @@ export function ProviderPicker({ provider, userId, entries, trips, existingAsset
             </button>
             <button
               onClick={() => {
-                const groupMap = new Map<string | undefined, { assetIds: string[]; mediaTypes: string[] }>()
-                for (const [assetId, { passphrase, mediaType }] of selected.entries()) {
-                  const g = groupMap.get(passphrase) || { assetIds: [], mediaTypes: [] }
-                  g.assetIds.push(assetId)
-                  g.mediaTypes.push(mediaType === 'video' ? 'video' : 'image')
-                  groupMap.set(passphrase, g)
+                const groupMap = new Map<string | undefined, string[]>()
+                for (const [assetId, { passphrase }] of selected.entries()) {
+                  const list = groupMap.get(passphrase) || []
+                  list.push(assetId)
+                  groupMap.set(passphrase, list)
                 }
-                const groups = [...groupMap.entries()].map(([passphrase, g]) => ({ assetIds: g.assetIds, mediaTypes: g.mediaTypes, passphrase }))
+                const groups = [...groupMap.entries()].map(([passphrase, assetIds]) => ({ assetIds, passphrase }))
                 onAdd(groups, targetEntryId)
               }}
               disabled={selected.size === 0}

client/src/components/Journey/JourneyMap.tsx

@@ -77,7 +77,7 @@ function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): st
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
       <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }
@@ -300,7 +300,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
             border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
             color: dark ? '#fff' : '#18181B',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, lineHeight: 1,
+            cursor: 'pointer', fontSize: 16, fontWeight: 700, lineHeight: 1,
           }}
         >+</button>
         <button
@@ -312,7 +312,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
             border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
             color: dark ? '#fff' : '#18181B',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            cursor: 'pointer', fontSize: 'calc(16px * var(--fs-scale-subtitle, 1))', fontWeight: 700, lineHeight: 1,
+            cursor: 'pointer', fontSize: 16, fontWeight: 700, lineHeight: 1,
           }}
         >−</button>
       </div>

client/src/components/Journey/JourneyMapAuto.tsx

@@ -1,11 +1,7 @@
-import { forwardRef, lazy, Suspense, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import JourneyMap, { type JourneyMapHandle } from './JourneyMap'
-import type { JourneyMapGLHandle } from './JourneyMapGL'
-
-// Lazy-load the GL renderer (and its ~230 KB gzip engine) so Leaflet-only
-// installs never download it — it ships only once a GL provider is picked.
-const JourneyMapGL = lazy(() => import('./JourneyMapGL'))
+import JourneyMapGL, { type JourneyMapGLHandle } from './JourneyMapGL'
 
 // Unified handle — both providers expose the same three methods.
 export type JourneyMapAutoHandle = JourneyMapHandle
@@ -41,9 +37,8 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
   const glRef = useRef<JourneyMapGLHandle>(null)
 
   // Fall back to Leaflet when the user selected Mapbox GL but hasn't
-  // supplied a token yet. MapLibre/OpenFreeMap is tokenless.
-  const useGL = provider === 'maplibre-gl' || (provider === 'mapbox-gl' && !!token)
-  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl' : 'mapbox-gl'
+  // supplied a token yet — otherwise the map would just show a stub.
+  const useGL = provider === 'mapbox-gl' && !!token
 
   useImperativeHandle(ref, () => ({
     highlightMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.highlightMarker(id),
@@ -52,12 +47,8 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
   }), [useGL])
 
   if (useGL) {
-    return (
-      <Suspense fallback={null}>
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <JourneyMapGL ref={glRef} {...(props as any)} glProvider={glProvider} />
-      </Suspense>
-    )
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return <JourneyMapGL ref={glRef} {...(props as any)} />
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return <JourneyMap ref={leafletRef} {...(props as any)} />

client/src/components/Journey/JourneyMapGL.tsx

@@ -1,11 +1,8 @@
 import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
-import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
-import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
-import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from '../Map/glProviders'
 
 export interface JourneyMapGLHandle {
   highlightMarker: (id: string | null) => void
@@ -35,7 +32,6 @@ interface Props {
   onMarkerClick?: (id: string, type?: string) => void
   fullScreen?: boolean
   paddingBottom?: number
-  glProvider?: GlMapProvider
 }
 
 interface Item {
@@ -99,10 +95,8 @@ function ensureJourneyPopupStyle() {
   const s = document.createElement('style')
   s.id = 'trek-journey-popup-style'
   s.textContent = `
-    .mapboxgl-popup.trek-journey-popup,
-    .maplibregl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-content {
+    .mapboxgl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content {
       padding: 9px 14px 10px;
       border-radius: 14px;
       background: rgba(255, 255, 255, 0.94);
@@ -110,28 +104,24 @@ function ensureJourneyPopupStyle() {
       -webkit-backdrop-filter: blur(16px) saturate(180%);
       border: 1px solid rgba(0, 0, 0, 0.06);
       box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
-      font-family:var(--font-system);
+      font-family: -apple-system, system-ui, sans-serif;
       min-width: 160px;
       max-width: 280px;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content,
-    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-content {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content {
       background: rgba(24, 24, 27, 0.88);
       border-color: rgba(255, 255, 255, 0.08);
       color: #FAFAFA;
     }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip {
       border-top-color: rgba(255, 255, 255, 0.94);
       border-bottom-color: rgba(255, 255, 255, 0.94);
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip,
-    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip {
       border-top-color: rgba(24, 24, 27, 0.88);
       border-bottom-color: rgba(24, 24, 27, 0.88);
     }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button,
-    .maplibregl-popup.trek-journey-popup .maplibregl-popup-close-button { display: none; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button { display: none; }
     .trek-journey-popup-title {
       font-size: 13.5px;
       font-weight: 600;
@@ -142,8 +132,7 @@ function ensureJourneyPopupStyle() {
       overflow: hidden;
       text-overflow: ellipsis;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title,
-    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
     .trek-journey-popup-sub {
       display: flex;
       align-items: baseline;
@@ -154,8 +143,7 @@ function ensureJourneyPopupStyle() {
       line-height: 1.35;
       white-space: nowrap;
     }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub,
-    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
     .trek-journey-popup-place {
       min-width: 0;
       overflow: hidden;
@@ -197,7 +185,7 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
-    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="'Poppins',system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+    <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
   wrap.appendChild(inner)
   return wrap
@@ -206,29 +194,20 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []
 
 const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl' },
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
   ref
 ) {
   const stableTrail = trail || EMPTY_TRAIL
-  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
-  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
+  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
-  const mapLang = useSettingsStore(s => s.settings.language)
-  const isMapLibre = glProvider === 'maplibre-gl'
-  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
-  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
-  const enableMapbox3d = !isMapLibre && mapbox3d
   const containerRef = useRef<HTMLDivElement>(null)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mapRef = useRef<any | null>(null)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const markersRef = useRef<Map<string, any>>(new Map())
+  const mapRef = useRef<mapboxgl.Map | null>(null)
+  const markersRef = useRef<Map<string, mapboxgl.Marker>>(new Map())
   const itemsRef = useRef<Item[]>([])
   const highlightedRef = useRef<string | null>(null)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const popupRef = useRef<any | null>(null)
+  const popupRef = useRef<mapboxgl.Popup | null>(null)
   const onMarkerClickRef = useRef(onMarkerClick)
   onMarkerClickRef.current = onMarkerClick
   const darkRef = useRef(dark)
@@ -268,7 +247,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       const el = popupRef.current.getElement()
       if (el) el.classList.toggle('trek-dark', !!darkRef.current)
     } else {
-      popupRef.current = new gl.Popup({
+      popupRef.current = new mapboxgl.Popup({
         closeButton: false,
         closeOnClick: false,
         closeOnMove: false,
@@ -281,7 +260,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
         .setHTML(html)
         .addTo(mapRef.current)
     }
-  }, [gl])
+  }, [])
 
   const hidePopup = useCallback(() => {
     if (popupRef.current) {
@@ -326,11 +305,11 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       mapRef.current.flyTo({
         center: marker.getLngLat(),
         zoom: Math.max(mapRef.current.getZoom(), 14),
-        pitch: enableMapbox3d ? 45 : 0,
+        pitch: mapbox3d ? 45 : 0,
         duration: 600,
       })
     } catch { /* map not yet ready */ }
-  }, [highlightMarker, enableMapbox3d])
+  }, [highlightMarker, mapbox3d])
 
   const invalidateSize = useCallback(() => {
     try { mapRef.current?.resize() } catch { /* map not yet ready */ }
@@ -341,46 +320,39 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
   // Build map once per style/token change. Markers and layers are rebuilt
   // inside the same effect so they stay in sync with the active style.
   useEffect(() => {
-    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
-    if (!isMapLibre) mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || !mapboxToken) return
+    mapboxgl.accessToken = mapboxToken
 
     const items = buildItems(entries)
     itemsRef.current = items
 
-    const bounds = new gl.LngLatBounds()
+    const bounds = new mapboxgl.LngLatBounds()
     items.forEach(i => bounds.extend([i.lng, i.lat]))
     stableTrail.forEach(p => bounds.extend([p.lng, p.lat]))
     const hasPoints = items.length > 0 || stableTrail.length > 0
 
-    const mapOptions: Record<string, unknown> = {
+    const map = new mapboxgl.Map({
       container: containerRef.current,
-      style: glStyle,
+      style: mapboxStyle,
       center: hasPoints ? bounds.getCenter() : [0, 30],
       zoom: hasPoints ? 2 : 1,
-      pitch: enableMapbox3d && fullScreen ? 45 : 0,
+      pitch: mapbox3d && fullScreen ? 45 : 0,
       attributionControl: true,
       antialias: mapboxQuality,
-    }
-    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
-
-    const map = new gl.Map(mapOptions as any)
+      projection: mapboxQuality ? 'globe' : 'mercator',
+    })
     mapRef.current = map
 
     map.on('load', () => {
-      if (enableMapbox3d) {
-        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(glStyle)) addCustom3dBuildings(map, !!darkRef.current)
+      if (mapbox3d) {
+        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(mapboxStyle)) addCustom3dBuildings(map, !!darkRef.current)
       }
       // Flatten Mapbox Standard's built-in DEM so HTML markers (at Z=0)
       // stay pinned to their coordinates at every zoom and pitch.
-      if (glStyle === MAPBOX_DEFAULT_STYLE) {
+      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
         try { map.setTerrain(null) } catch { /* noop */ }
       }
-      // Pin the basemap label language to the UI language so labels don't fall back to the
-      // browser/OS locale and stack multiple scripts per place (#1299).
-      if (!isMapLibre && isStandardFamily(glStyle)) {
-        try { map.setConfigProperty('basemap', 'language', basemapLanguage(mapLang)) } catch { /* style/SDK may not support it */ }
-      }
 
       // route trail — dashed line connecting entries in time order
       if (items.length > 1) {
@@ -411,7 +383,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       // markers
       items.forEach((item) => {
         const el = markerHtml(item.dayColor, item.dayLabel, false)
-        const marker = new gl.Marker({ element: el, anchor: 'bottom' })
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)
         el.addEventListener('click', (ev) => {
@@ -428,7 +400,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
           map.fitBounds(bounds, {
             padding: { top: 50, bottom: pb, left: 50, right: 50 },
             maxZoom: 16,
-            pitch: enableMapbox3d && fullScreen ? 45 : 0,
+            pitch: mapbox3d && fullScreen ? 45 : 0,
             duration: 0,
           })
         } catch { /* empty bounds */ }
@@ -446,7 +418,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       try { map.remove() } catch { /* noop */ }
       mapRef.current = null
     }
-  }, [entries, stableTrail, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])
+  }, [entries, stableTrail, mapboxStyle, mapboxToken, mapbox3d, mapboxQuality, fullScreen, paddingBottom])
 
   // external activeMarkerId → highlight + flyTo
   useEffect(() => {
@@ -459,15 +431,15 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
         mapRef.current.flyTo({
           center: marker.getLngLat(),
           zoom: Math.max(mapRef.current.getZoom(), 12),
-          pitch: enableMapbox3d && fullScreen ? 45 : 0,
+          pitch: mapbox3d && fullScreen ? 45 : 0,
           duration: 500,
         })
       } catch { /* map not ready */ }
     }, 50)
     return () => clearTimeout(t)
-  }, [activeMarkerId, highlightMarker, enableMapbox3d, fullScreen])
+  }, [activeMarkerId, highlightMarker, mapbox3d, fullScreen])
 
-  if (!isMapLibre && !mapboxToken) {
+  if (!mapboxToken) {
     return (
       <div
         style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}

client/src/components/Journey/MarkdownToolbar.test.tsx

@@ -1,6 +1,6 @@
 // FE-COMP-MDTOOLBAR-001 to FE-COMP-MDTOOLBAR-006
 
-import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '../../../tests/helpers/render';
 import MarkdownToolbar from './MarkdownToolbar';
 import React from 'react';
@@ -16,10 +16,10 @@ function createTextareaRef(value = '', selectionStart = 0, selectionEnd = 0) {
 }
 
 describe('MarkdownToolbar', () => {
-  let onUpdate: Mock<(value: string) => void>;
+  let onUpdate: ReturnType<typeof vi.fn>;
 
   beforeEach(() => {
-    onUpdate = vi.fn<(value: string) => void>();
+    onUpdate = vi.fn();
   });
 
   it('FE-COMP-MDTOOLBAR-001: renders all 8 toolbar buttons', () => {

client/src/components/Journey/PhotoLightbox.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { ChevronLeft, ChevronRight, X } from 'lucide-react'
-import VideoPlayer from './VideoPlayer'
 
 interface LightboxPhoto {
   id: string
@@ -9,7 +8,6 @@ interface LightboxPhoto {
   provider?: string
   asset_id?: string | null
   owner_id?: number | null
-  mediaType?: string | null
 }
 
 interface Props {
@@ -83,7 +81,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props
       >
         {/* Top bar */}
         <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px' }}>
-          <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500 }}>
+          <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, fontWeight: 500 }}>
             {idx + 1} / {photos.length}
           </span>
           <button onClick={onClose} style={{
@@ -109,21 +107,17 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props
           </button>
         )}
 
-        {/* Photo or video */}
-        {photo.mediaType === 'video' ? (
-          <VideoPlayer key={photo.id} src={photo.src} />
-        ) : (
-          <img
-            key={photo.id}
-            src={photo.src}
-            alt={photo.caption || ''}
-            style={{
-              maxWidth: '92vw', maxHeight: '92vh',
-              objectFit: 'contain', borderRadius: 4,
-              animation: 'fadeIn 0.15s ease',
-            }}
-          />
-        )}
+        {/* Photo */}
+        <img
+          key={photo.id}
+          src={photo.src}
+          alt={photo.caption || ''}
+          style={{
+            maxWidth: '92vw', maxHeight: '92vh',
+            objectFit: 'contain', borderRadius: 4,
+            animation: 'fadeIn 0.15s ease',
+          }}
+        />
 
         {/* Next button */}
         {hasNext && (
@@ -143,7 +137,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props
         {photo.caption && (
           <div style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', zIndex: 5, maxWidth: '70%', textAlign: 'center' }}>
             <p style={{
-              fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontStyle: 'italic',
+              fontSize: 14, fontStyle: 'italic',
               color: 'rgba(255,255,255,0.75)', margin: 0, lineHeight: 1.5,
               background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(8px)',
               padding: '6px 14px', borderRadius: 10,

client/src/components/Journey/VideoPlayer.tsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import Plyr from 'plyr'
-import 'plyr/dist/plyr.css'
-
-/**
- * Video player for gallery/lightbox playback (#823), built on Plyr over a native
- * <video>. Local videos stream with HTTP Range (seeking works out of the box) and
- * the source carries the correct video MIME from the server. The Plyr instance is
- * created once per mounted source and destroyed on unmount, so navigating away in
- * the lightbox stops playback.
- */
-export default function VideoPlayer({
-  src,
-  poster,
-  autoPlay = true,
-  style,
-}: {
-  src: string
-  poster?: string
-  autoPlay?: boolean
-  style?: React.CSSProperties
-}): React.ReactElement {
-  const videoRef = useRef<HTMLVideoElement>(null)
-
-  useEffect(() => {
-    const el = videoRef.current
-    if (!el) return
-    const player = new Plyr(el, {
-      controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
-      autoplay: autoPlay,
-      // Keep playback inline so the lightbox stays in control on mobile.
-      clickToPlay: true,
-    })
-    return () => { try { player.destroy() } catch { /* already torn down */ } }
-  }, [src, autoPlay])
-
-  return (
-    <div
-      style={{
-        width: 'min(92vw, 1100px)',
-        maxHeight: '92vh',
-        borderRadius: 4,
-        overflow: 'hidden',
-        animation: 'fadeIn 0.15s ease',
-        ...style,
-      }}
-    >
-      <video ref={videoRef} src={src} poster={poster} playsInline controls preload="metadata" />
-    </div>
-  )
-}

client/src/components/Layout/BottomNav.test.tsx

@@ -1,4 +1,4 @@
-// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-010
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-006
 
 vi.mock('../../api/websocket', () => ({
   connect: vi.fn(),
@@ -30,7 +30,6 @@ const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@exampl
 beforeEach(() => {
   resetAllStores();
   mockNavigate.mockClear();
-  sessionStorage.clear();
   seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
 });
 
@@ -80,37 +79,4 @@ describe('BottomNav', () => {
     render(<BottomNav />);
     expect(screen.queryByText('Foo Addon')).not.toBeInTheDocument();
   });
-
-  // Context-aware "+" inside a trip — #1349
-  it('FE-COMP-BOTTOMNAV-007: in a trip, the "+" adds a place by default (plan tab)', async () => {
-    const user = userEvent.setup();
-    sessionStorage.setItem('trip-tab-42', 'plan');
-    render(<BottomNav />, { initialEntries: ['/trips/42'] });
-    await user.click(screen.getByRole('button', { name: 'Add Place/Activity' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=place');
-  });
-
-  it('FE-COMP-BOTTOMNAV-008: Bookings tab → "+" creates a reservation', async () => {
-    const user = userEvent.setup();
-    sessionStorage.setItem('trip-tab-42', 'buchungen');
-    render(<BottomNav />, { initialEntries: ['/trips/42'] });
-    await user.click(screen.getByRole('button', { name: 'Manual Booking' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=reservation');
-  });
-
-  it('FE-COMP-BOTTOMNAV-009: Transports tab → "+" creates a transport', async () => {
-    const user = userEvent.setup();
-    sessionStorage.setItem('trip-tab-42', 'transports');
-    render(<BottomNav />, { initialEntries: ['/trips/42'] });
-    await user.click(screen.getByRole('button', { name: 'Manual Transport' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=transport');
-  });
-
-  it('FE-COMP-BOTTOMNAV-010: Costs tab → "+" creates an expense', async () => {
-    const user = userEvent.setup();
-    sessionStorage.setItem('trip-tab-42', 'finanzplan');
-    render(<BottomNav />, { initialEntries: ['/trips/42'] });
-    await user.click(screen.getByRole('button', { name: 'Add expense' }));
-    expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=expense');
-  });
 });

client/src/components/Layout/BottomNav.tsx

@@ -25,15 +25,7 @@ function useCreateAction(): { label: string; run: () => void } {
   const onJourneyList = useMatch('/journey')
 
   if (inTrip) {
-    // The "+" is context-aware per active tab: Bookings → reservation,
-    // Transports → transport, Costs → expense. Tabs without a create modal
-    // (lists / files / collab) fall through to adding a place. #1349
-    const id = inTrip.params.id
-    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${id}`) : null
-    if (tripTab === 'finanzplan') return { label: t('costs.addExpense'), run: () => navigate(`/trips/${id}?create=expense`) }
-    if (tripTab === 'buchungen') return { label: t('reservations.addManual'), run: () => navigate(`/trips/${id}?create=reservation`) }
-    if (tripTab === 'transports') return { label: t('transport.addManual'), run: () => navigate(`/trips/${id}?create=transport`) }
-    return { label: t('places.addPlace'), run: () => navigate(`/trips/${id}?create=place`) }
+    return { label: t('places.addPlace'), run: () => navigate(`/trips/${inTrip.params.id}?create=place`) }
   }
   if (inJourney) {
     return { label: t('journey.detail.addEntry'), run: () => navigate(`/journey/${inJourney.params.id}?create=entry`) }

client/src/components/Layout/DemoBanner.tsx

@@ -273,7 +273,7 @@ export default function DemoBanner(): React.ReactElement | null {
       paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
       paddingLeft: 16, paddingRight: 16,
       overflow: 'auto',
-      fontFamily: "var(--font-system)",
+      fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
     }} onClick={() => setDismissed(true)}>
       <div style={{
         background: 'white', borderRadius: 20, padding: '28px 24px 0',
@@ -287,12 +287,12 @@ export default function DemoBanner(): React.ReactElement | null {
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
           <img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
-          <h2 style={{ margin: 0, fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
+          <h2 style={{ margin: 0, fontSize: 17, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
             {t.titleBefore}<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />{t.titleAfter}
           </h2>
         </div>
 
-        <p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
+        <p style={{ fontSize: 13, color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
           {t.description}
         </p>
 
@@ -303,7 +303,7 @@ export default function DemoBanner(): React.ReactElement | null {
             background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 10, padding: '8px 10px',
           }}>
             <Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#0369a1', fontWeight: 600 }}>
+            <span style={{ fontSize: 11, color: '#0369a1', fontWeight: 600 }}>
               {t.resetIn} {minutesLeft} {t.minutes}
             </span>
           </div>
@@ -312,7 +312,7 @@ export default function DemoBanner(): React.ReactElement | null {
             background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '8px 10px',
           }}>
             <Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>{t.uploadNote}</span>
+            <span style={{ fontSize: 11, color: '#b45309' }}>{t.uploadNote}</span>
           </div>
         </div>
 
@@ -323,15 +323,15 @@ export default function DemoBanner(): React.ReactElement | null {
         }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
             <Map size={14} style={{ color: '#111827' }} />
-            <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span style={{ fontSize: 12, fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
               {t.whatIs}
             </span>
           </div>
-          <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
+          <p style={{ fontSize: 12, color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
         </div>
 
         {/* Addons */}
-        <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
           <Puzzle size={12} />
           {t.addonsTitle}
         </p>
@@ -345,16 +345,16 @@ export default function DemoBanner(): React.ReactElement | null {
               }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                   <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
-                  <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}>{name}</span>
+                  <span style={{ fontSize: 11, fontWeight: 700, color: '#111827' }}>{name}</span>
                 </div>
-                <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
+                <p style={{ fontSize: 10, color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
               </div>
             )
           })}
         </div>
 
         {/* Full version features */}
-        <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+        <p style={{ fontSize: 10, fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
           <Shield size={12} />
           {t.fullVersionTitle}
         </p>
@@ -362,7 +362,7 @@ export default function DemoBanner(): React.ReactElement | null {
           {t.features.map((text, i) => {
             const Icon = featureIcons[i]
             return (
-              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#4b5563', padding: '4px 0' }}>
+              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: '#4b5563', padding: '4px 0' }}>
                 <Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
                 <span>{text}</span>
               </div>
@@ -377,7 +377,7 @@ export default function DemoBanner(): React.ReactElement | null {
           position: 'sticky', bottom: 0, background: 'white',
           marginTop: 'auto',
         }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#9ca3af' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#9ca3af' }}>
             <Github size={13} />
             <span>{t.selfHost}</span>
             <a href="https://github.com/mauriceboe/TREK" target="_blank" rel="noopener noreferrer"
@@ -387,7 +387,7 @@ export default function DemoBanner(): React.ReactElement | null {
           </div>
           <button onClick={() => setDismissed(true)} style={{
             background: '#111827', color: 'white', border: 'none',
-            borderRadius: 10, padding: '8px 20px', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+            borderRadius: 10, padding: '8px 20px', fontSize: 12,
             fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
           }}>
             {t.close}

client/src/components/Layout/InAppNotificationBell.tsx

@@ -55,7 +55,7 @@ export default function InAppNotificationBell(): React.ReactElement {
             className="absolute -top-0.5 -right-0.5 flex items-center justify-center rounded-full text-white font-bold"
             style={{
               background: '#ef4444',
-              fontSize: 'calc(9px * var(--fs-scale-caption, 1))',
+              fontSize: 9,
               minWidth: 14,
               height: 14,
               padding: '0 3px',

client/src/components/Layout/Navbar.tsx

@@ -5,7 +5,7 @@ import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen } from 'lucide-react'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import InAppNotificationBell from './InAppNotificationBell.tsx'
 
@@ -154,7 +154,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
               <Link key={tab.id} to={tab.path}
                 className="flex items-center gap-1.5 transition-colors"
                 style={{
-                  padding: '5px 16px', borderRadius: 9, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', fontWeight: 500,
+                  padding: '5px 16px', borderRadius: 9, fontSize: 13.5, fontWeight: 500,
                   color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
                   background: isActive ? 'var(--bg-card)' : 'transparent',
                   boxShadow: isActive ? '0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.05)' : 'none',
@@ -252,14 +252,6 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
                     {t('nav.settings')}
                   </Link>
 
-                  <Link to="/help" onClick={() => setUserMenuOpen(false)}
-                    className="flex items-center gap-2 px-4 py-2 text-sm transition-colors text-content-secondary"
-                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                    <BookOpen className="w-4 h-4" />
-                    {t('nav.help')}
-                  </Link>
-
                   {user.role === 'admin' && (
                     <Link to="/admin" onClick={() => setUserMenuOpen(false)}
                       className="flex items-center gap-2 px-4 py-2 text-sm transition-colors text-content-secondary"
@@ -282,7 +274,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
                       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                         <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, background: 'var(--bg-tertiary)', borderRadius: 99, padding: '4px 12px' }}>
                           <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 10, opacity: 0.5 }} />
-                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)' }}>v{appVersion}</span>
+                          <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>v{appVersion}</span>
                         </div>
                         <a href="https://discord.gg/NhZBDSd4qW" target="_blank" rel="noopener noreferrer"
                           style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 99, background: 'var(--bg-tertiary)', transition: 'background 0.15s' }}

client/src/components/Layout/OfflineBanner.test.tsx

@@ -1,58 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { screen, waitFor } from '@testing-library/react'
-import { render } from '../../../tests/helpers/render'
-import OfflineBanner from './OfflineBanner'
-
-vi.mock('../../sync/mutationQueue', () => ({
-  mutationQueue: {
-    pendingCount: vi.fn(),
-    failedCount: vi.fn(),
-    conflictCount: vi.fn(),
-  },
-}))
-
-import { mutationQueue } from '../../sync/mutationQueue'
-import { _resetNetworkMode } from '../../sync/networkMode'
-
-const pendingCount = mutationQueue.pendingCount as ReturnType<typeof vi.fn>
-const failedCount = mutationQueue.failedCount as ReturnType<typeof vi.fn>
-const conflictCount = mutationQueue.conflictCount as ReturnType<typeof vi.fn>
-
-afterEach(() => {
-  vi.clearAllMocks()
-  _resetNetworkMode()
-  Object.defineProperty(navigator, 'onLine', { value: true, writable: true, configurable: true })
-})
-
-describe('OfflineBanner (B3 surface)', () => {
-  it('shows the failed pill when failedCount > 0 while online', async () => {
-    pendingCount.mockResolvedValue(0)
-    failedCount.mockResolvedValue(2)
-    conflictCount.mockResolvedValue(0)
-
-    render(<OfflineBanner />)
-
-    expect(await screen.findByText(/failed to sync: 2/i)).toBeInTheDocument()
-  })
-
-  it('shows the conflict pill when conflicts exist while online', async () => {
-    pendingCount.mockResolvedValue(0)
-    failedCount.mockResolvedValue(0)
-    conflictCount.mockResolvedValue(3)
-
-    render(<OfflineBanner />)
-
-    expect(await screen.findByText(/conflicts: 3/i)).toBeInTheDocument()
-  })
-
-  it('stays hidden when online with nothing pending, failed or conflicting', async () => {
-    pendingCount.mockResolvedValue(0)
-    failedCount.mockResolvedValue(0)
-    conflictCount.mockResolvedValue(0)
-
-    const { container } = render(<OfflineBanner />)
-    // Give the async poll a tick to resolve.
-    await waitFor(() => expect(failedCount).toHaveBeenCalled())
-    expect(container.querySelector('[role="status"]')).toBeNull()
-  })
-})

client/src/components/Layout/OfflineBanner.tsx

@@ -1,79 +1,60 @@
 /**
  * OfflineBanner — connectivity + sync state indicator.
  *
- * Priority (highest first):
- *   N failed     →  red pill    "Failed to sync: N"  (changes were dropped)
- *   N conflicts  →  purple pill "Conflicts: N"       (need resolving)
- *   offline      →  amber pill  "Offline" / "Offline mode" / "Offline · N queued"
- *   online + N   →  blue pill   "Syncing N…"
- *   online + 0   →  hidden
+ * States:
+ *   offline + N queued  →  amber pill "Offline · N queued"
+ *   offline + 0 queued  →  amber pill "Offline"
+ *   online  + N pending →  blue pill  "Syncing N…"
+ *   online  + 0 pending →  hidden
  *
  * Rendered as a small floating pill anchored to the bottom-center of the
  * viewport so it never competes with top navigation or sticky modal
  * headers. On mobile it hovers just above the bottom tab bar.
  */
 import React, { useState, useEffect } from 'react'
-import { WifiOff, RefreshCw, AlertTriangle, GitMerge } from 'lucide-react'
+import { WifiOff, RefreshCw } from 'lucide-react'
 import { mutationQueue } from '../../sync/mutationQueue'
-import { useNetworkMode } from '../../hooks/useNetworkMode'
-import { useTranslation } from '../../i18n'
 
 const POLL_MS = 3_000
 
 export default function OfflineBanner(): React.ReactElement | null {
-  const { t } = useTranslation()
-  const { offline, forced } = useNetworkMode()
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
   const [pendingCount, setPendingCount] = useState(0)
-  const [failedCount, setFailedCount] = useState(0)
-  const [conflictCount, setConflictCount] = useState(0)
+
+  useEffect(() => {
+    const onOnline  = () => setIsOnline(true)
+    const onOffline = () => setIsOnline(false)
+    window.addEventListener('online',  onOnline)
+    window.addEventListener('offline', onOffline)
+    return () => {
+      window.removeEventListener('online',  onOnline)
+      window.removeEventListener('offline', onOffline)
+    }
+  }, [])
 
   useEffect(() => {
     let cancelled = false
     async function poll() {
-      const [n, failed, conflicts] = await Promise.all([
-        mutationQueue.pendingCount(),
-        mutationQueue.failedCount(),
-        mutationQueue.conflictCount(),
-      ])
-      if (!cancelled) {
-        setPendingCount(n)
-        setFailedCount(failed)
-        setConflictCount(conflicts)
-      }
+      const n = await mutationQueue.pendingCount()
+      if (!cancelled) setPendingCount(n)
     }
     poll()
     const id = setInterval(poll, POLL_MS)
     return () => { cancelled = true; clearInterval(id) }
   }, [])
 
-  const hidden = !offline && pendingCount === 0 && failedCount === 0 && conflictCount === 0
+  const hidden = isOnline && pendingCount === 0
   if (hidden) return null
 
-  // Failed mutations are the most important signal — they mean data was dropped.
-  // Conflicts come next (they still need a decision), then plain offline status.
-  const failed = failedCount > 0
-  const conflict = !failed && conflictCount > 0
-  const bg = failed ? '#b91c1c' : conflict ? '#6d28d9' : offline ? '#92400e' : '#1e40af'
+  const offline = !isOnline
+  const bg    = offline ? '#92400e' : '#1e40af'
+  const text  = '#fff'
 
-  let label: string
-  let icon: React.ReactElement
-  if (failed) {
-    label = t('settings.offline.banner.failed', { count: failedCount })
-    icon = <AlertTriangle size={12} />
-  } else if (conflict) {
-    label = t('settings.offline.banner.conflicts', { count: conflictCount })
-    icon = <GitMerge size={12} />
-  } else if (offline) {
-    label = pendingCount > 0
-      ? t('settings.offline.banner.queued', { count: pendingCount })
-      : forced
-        ? t('settings.offline.banner.forced')
-        : t('settings.offline.banner.offline')
-    icon = <WifiOff size={12} />
-  } else {
-    label = t('settings.offline.banner.syncing', { count: pendingCount })
-    icon = <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
-  }
+  const label = offline
+    ? pendingCount > 0
+      ? `Offline · ${pendingCount} queued`
+      : 'Offline'
+    : `Syncing ${pendingCount}…`
 
   return (
     <div
@@ -88,20 +69,23 @@ export default function OfflineBanner(): React.ReactElement | null {
         transform: 'translateX(-50%)',
         zIndex: 9999,
         background: bg,
-        color: '#fff',
+        color: text,
         display: 'inline-flex',
         alignItems: 'center',
         gap: 6,
         padding: '6px 14px',
         borderRadius: 999,
         boxShadow: '0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.08)',
-        fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+        fontSize: 12,
         fontWeight: 600,
         whiteSpace: 'nowrap',
         pointerEvents: 'none',
       }}
     >
-      {icon}
+      {offline
+        ? <WifiOff size={12} />
+        : <RefreshCw size={12} style={{ animation: 'spin 1s linear infinite' }} />
+      }
       {label}
     </div>
   )

client/src/components/Layout/PageSidebar.tsx

@@ -5,9 +5,6 @@ export interface PageSidebarTab {
   id: string
   label: string
   icon: LucideIcon
-  /** Optional group heading shown above the first tab of each group. Tabs that
-   *  share a group must be contiguous in the array. */
-  group?: string
 }
 
 interface PageSidebarProps {
@@ -163,40 +160,29 @@ function SidebarInner({
         </div>
       )}
       <nav className="flex flex-col gap-1 flex-1">
-        {(() => {
-          let lastGroup: string | undefined
-          return tabs.map((tab) => {
-            const Icon = tab.icon
-            const active = tab.id === activeTab
-            const showHeader = !!tab.group && tab.group !== lastGroup
-            lastGroup = tab.group
-            return (
-              <React.Fragment key={tab.id}>
-                {showHeader && (
-                  <div className="text-[10px] font-bold tracking-widest uppercase text-content-faint px-3 mt-3 mb-0.5 first:mt-0">
-                    {tab.group}
-                  </div>
-                )}
-                <button
-                  onClick={() => onTabChange(tab.id)}
-                  className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-left transition-colors ${active ? 'text-content font-semibold' : 'text-content-secondary font-medium'}`}
-                  style={{
-                    background: active ? 'var(--bg-hover)' : 'transparent',
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!active) e.currentTarget.style.background = 'var(--bg-hover)'
-                  }}
-                  onMouseLeave={(e) => {
-                    if (!active) e.currentTarget.style.background = 'transparent'
-                  }}
-                >
-                  <Icon size={16} className="shrink-0" />
-                  <span className="truncate">{tab.label}</span>
-                </button>
-              </React.Fragment>
-            )
-          })
-        })()}
+        {tabs.map((tab) => {
+          const Icon = tab.icon
+          const active = tab.id === activeTab
+          return (
+            <button
+              key={tab.id}
+              onClick={() => onTabChange(tab.id)}
+              className={`flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm text-left transition-colors ${active ? 'text-content font-semibold' : 'text-content-secondary font-medium'}`}
+              style={{
+                background: active ? 'var(--bg-hover)' : 'transparent',
+              }}
+              onMouseEnter={(e) => {
+                if (!active) e.currentTarget.style.background = 'var(--bg-hover)'
+              }}
+              onMouseLeave={(e) => {
+                if (!active) e.currentTarget.style.background = 'transparent'
+              }}
+            >
+              <Icon size={16} className="shrink-0" />
+              <span className="truncate">{tab.label}</span>
+            </button>
+          )
+        })}
       </nav>
       {footer && (
         <div

client/src/components/Map/MapCompassPill.tsx

@@ -1,54 +0,0 @@
-import { useEffect, useState } from 'react'
-import { Navigation } from 'lucide-react'
-
-export interface CompassMap {
-  getBearing: () => number
-  on: (type: 'rotate', listener: () => void) => unknown
-  off: (type: 'rotate', listener: () => void) => unknown
-  easeTo: (options: { bearing: number; pitch: number; duration: number }) => unknown
-}
-
-/**
- * Round compass pill for the GL planner map. The map can be rotated and
- * pitched, so this shows the current bearing (the arrow points to north) and snaps
- * the camera back to north + flat on click. Rendered next to the POI "explore" pill
- * (GL only) and built as the SAME frosted shell (padding 4 around a 34px button)
- * so its height and transparency match the POI pill exactly.
- */
-export function MapCompassPill({ map }: { map: CompassMap }) {
-  const [bearing, setBearing] = useState(() => map.getBearing())
-
-  useEffect(() => {
-    const update = () => setBearing(map.getBearing())
-    update()
-    map.on('rotate', update)
-    return () => { map.off('rotate', update) }
-  }, [map])
-
-  return (
-    <div style={{
-      display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
-      background: 'var(--sidebar-bg)',
-      backdropFilter: 'blur(20px) saturate(180%)',
-      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-      boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
-    }}>
-      <button
-        type="button"
-        onClick={() => map.easeTo({ bearing: 0, pitch: 0, duration: 300 })}
-        aria-label="Reset north"
-        className="text-content-muted"
-        style={{
-          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-          width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
-          background: 'transparent', padding: 0,
-          transition: 'background 0.14s, color 0.14s',
-        }}
-        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
-        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
-      >
-        <Navigation size={16} strokeWidth={2} style={{ transform: `rotate(${-bearing}deg)`, transition: 'transform 0.1s linear' }} />
-      </button>
-    </div>
-  )
-}

client/src/components/Map/MapView.test.tsx

@@ -244,22 +244,4 @@ describe('MapView', () => {
     rerender(<MapView places={places} fitKey={2} />)
     expect(mapMock.fitBounds.mock.calls.length).toBeGreaterThan(afterFirst)
   })
-
-  it('FE-COMP-MAPVIEW-020: a day fit expands to include the route once it arrives (#1128)', async () => {
-    const L = ((await import('leaflet')).default) as unknown as { latLngBounds: ReturnType<typeof vi.fn> }
-    const dayPlaces = [
-      buildMapPlace({ id: 1, lat: 48.0, lng: 2.0 }),
-      buildMapPlace({ id: 2, lat: 48.1, lng: 2.1 }),
-    ]
-    // Day selected, route not computed yet → first fit is the two destinations.
-    const { rerender } = render(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[]} fitKey={5} />)
-    const lastBounds = () => { const c = L.latLngBounds.mock.calls; return c[c.length - 1][0] }
-    expect(lastBounds()).toHaveLength(2)
-
-    // The day's route arrives → one-shot re-fit including the 3 route points.
-    L.latLngBounds.mockClear()
-    rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[[[47.9, 1.9], [48.05, 2.05], [48.2, 2.2]]]} fitKey={5} />)
-    expect(L.latLngBounds).toHaveBeenCalled()
-    expect(lastBounds()).toHaveLength(5) // 2 destinations + 3 route points
-  })
 })

client/src/components/Map/MapView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -10,7 +10,6 @@ import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
 import type { Reservation } from '../../types'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -65,7 +64,7 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:var(--font-system);line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
@@ -119,44 +118,6 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   return fallbackIcon
 }
 
-// Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
-// markers of planned places; the colour matches its pill category.
-const poiIconCache = new Map<string, L.DivIcon>()
-function createPoiIcon(category: string) {
-  const cached = poiIconCache.get(category)
-  if (cached) return cached
-  const cat = POI_CATEGORY_BY_KEY[category]
-  const color = cat?.color || '#6b7280'
-  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
-  const icon = L.divIcon({
-    className: '',
-    html: `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;">${svg}</div>`,
-    iconSize: [26, 26],
-    iconAnchor: [13, 13],
-    tooltipAnchor: [0, -14],
-  })
-  poiIconCache.set(category, icon)
-  return icon
-}
-
-// Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
-// OSM places for the visible area.
-function ViewportController({ onViewportChange }: { onViewportChange?: (b: { south: number; west: number; north: number; east: number }) => void }) {
-  const map = useMap()
-  useEffect(() => {
-    if (!onViewportChange) return
-    const emit = () => {
-      const b = map.getBounds()
-      onViewportChange({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
-    }
-    map.whenReady(emit) // ensure the first bbox is captured once the map is laid out
-    map.on('moveend', emit)
-    map.on('zoomend', emit)
-    return () => { map.off('moveend', emit); map.off('zoomend', emit) }
-  }, [map, onViewportChange])
-  return null
-}
-
 interface SelectionControllerProps {
   places: Place[]
   selectedPlaceId: number | null
@@ -170,21 +131,10 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom. Offset the centre by the
-      // side-panel + bottom-inspector padding so the pin lands in the middle of the
-      // *visible* map area rather than the geometric centre (where the bottom panel
-      // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
+      // Pan to the selected place without changing zoom
       const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat != null && selected?.lng != null) {
-        const latlng: [number, number] = [selected.lat, selected.lng]
-        const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
-        const br = paddingOpts.paddingBottomRight as [number, number] | undefined
-        if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
-          const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
-          map.panTo(map.unproject(point), { animate: true })
-        } else {
-          map.panTo(latlng, { animate: true })
-        }
+      if (selected?.lat && selected?.lng) {
+        map.panTo([selected.lat, selected.lng], { animate: true })
       }
     }
     prev.current = selectedPlaceId
@@ -212,27 +162,24 @@ function MapController({ center, zoom }: MapControllerProps) {
   return null
 }
 
-// Fit bounds when places change (fitKey triggers re-fit). On a day selection we
-// fit to that day's destinations immediately, then — once the day's route has
-// finished computing asynchronously — re-fit once more to include the full route
-// polyline, so a route that bulges past its stops stays in view (#1128).
+// Fit bounds when places change (fitKey triggers re-fit)
 interface BoundsControllerProps {
   hasDayDetail?: boolean
   places: Place[]
-  routeCoords: [number, number][]
   fitKey: number
   paddingOpts: L.FitBoundsOptions
 }
 
-function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
+function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
   const map = useMap()
   const prevFitKey = useRef(-1)
-  const awaitingRoute = useRef(false)
 
-  const fitTo = useCallback((coords: [number, number][]) => {
-    if (coords.length === 0) return
+  useEffect(() => {
+    if (fitKey === prevFitKey.current) return
+    prevFitKey.current = fitKey
+    if (places.length === 0) return
     try {
-      const bounds = L.latLngBounds(coords)
+      const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
       if (bounds.isValid()) {
         map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
         if (hasDayDetail) {
@@ -240,27 +187,8 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDeta
         }
       }
     } catch {}
-  }, [map, paddingOpts, hasDayDetail])
-
-  // New fitKey (initial trip fit or a day selection): fit to the destinations now
-  // and arm a one-shot re-fit for when the route arrives.
-  useEffect(() => {
-    if (fitKey === prevFitKey.current) return
-    prevFitKey.current = fitKey
-    awaitingRoute.current = false
-    if (places.length === 0) return
-    fitTo(places.map(p => [p.lat, p.lng] as [number, number]))
-    awaitingRoute.current = true
   }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Once the just-selected day's route is ready, expand the fit to include it.
-  // One-shot per day-fit, so later route-profile toggles don't re-zoom the map.
-  useEffect(() => {
-    if (!awaitingRoute.current || routeCoords.length === 0) return
-    awaitingRoute.current = false
-    fitTo([...places.map(p => [p.lat, p.lng] as [number, number]), ...routeCoords])
-  }, [routeCoords]) // eslint-disable-line react-hooks/exhaustive-deps
-
   return null
 }
 
@@ -428,21 +356,7 @@ export const MapView = memo(function MapView({
   showReservationStats = false,
   visibleConnectionIds = [] as number[],
   onReservationClick,
-  pois = [] as Poi[],
-  onPoiClick,
-  onViewportChange,
 }: any) {
-  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
-    <Marker
-      key={`poi-${poi.osm_id}`}
-      position={[poi.lat, poi.lng]}
-      icon={createPoiIcon(poi.category)}
-      zIndexOffset={500}
-      eventHandlers={{ click: () => onPoiClick?.(poi) }}
-    >
-      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
-    </Marker>
-  )), [pois, onPoiClick])
   const visibleReservations = useMemo(() => {
     if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
     const set = new Set(visibleConnectionIds)
@@ -485,9 +399,6 @@ export const MapView = memo(function MapView({
   const thumbRafRef = useRef<number | null>(null)
 
   const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
-  // Flattened [lat,lng] points of the selected day's route, so the bounds fit can
-  // include the full polyline once it has been computed.
-  const routeCoords = useMemo<[number, number][]>(() => (route || []).flat() as [number, number][], [route])
   useEffect(() => {
     if (!places || places.length === 0 || !placesPhotosEnabled) return
     const cleanups: (() => void)[] = []
@@ -594,12 +505,7 @@ export const MapView = memo(function MapView({
   // Desktop browsers only get IP-based geolocation (city-level accuracy),
   // so the button would be misleading. Mobile, where real GPS lives, keeps it.
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
-  // When the day-detail panel is open it slides up over the map (bottom: navh+20,
-  // height var(--day-panel-h)) and covers the button's band, so lift the button
-  // above it; otherwise keep the plain bottom-nav offset. #1348
-  const locationButtonBottom = hasDayDetail
-    ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
-    : 'calc(var(--bottom-nav-h, 84px) + 12px)'
+  const locationButtonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
   return (
     <>
@@ -622,11 +528,10 @@ export const MapView = memo(function MapView({
       />
 
       <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
-      <ViewportController onViewportChange={onViewportChange} />
       <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
       <MarkerClusterGroup
@@ -667,8 +572,6 @@ export const MapView = memo(function MapView({
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
       />
-
-      {poiMarkers}
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}
@@ -689,7 +592,7 @@ export const MapView = memo(function MapView({
         borderRadius: 8,
         boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
         padding: '6px 10px',
-        fontFamily: "var(--font-system)",
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
         maxWidth: 220,
         whiteSpace: 'nowrap',
       }}>

client/src/components/Map/MapViewAuto.tsx

@@ -1,36 +1,16 @@
-import { lazy, Suspense } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import { MapView } from './MapView'
-
-// MapLibre/Mapbox pull in a ~230 KB (gzip) GL engine. Lazy-load the GL renderer so
-// Leaflet-only installs never download it — it ships only once a GL provider is picked.
-const MapViewGL = lazy(() => import('./MapViewGL').then(m => ({ default: m.MapViewGL })))
+import { MapViewGL } from './MapViewGL'
 
 // Auto-selects the map renderer based on user settings. Keeps the existing
 // Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
 // behind a toggle. Atlas is not affected — it imports Leaflet directly.
-//
-// Offline maps: only the Leaflet renderer supports full pre-download (raster
-// tiles via sync/tilePrefetcher.ts). GL maps are best-effort offline — their
-// vector tiles are cached opportunistically by the Service Worker as you view
-// them online (see the GL tile rules in vite.config.js), not prefetched.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function MapViewAuto(props: any) {
   const provider = useSettingsStore(s => s.settings.map_provider)
   const token = useSettingsStore(s => s.settings.mapbox_access_token)
   // Fall back to Leaflet when Mapbox is selected but no token is set,
   // so trip planner never shows an empty map due to a missing token.
-  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
-    : provider === 'mapbox-gl' && token ? 'mapbox-gl'
-    : null
-  if (glProvider) {
-    // Render the previous Leaflet map as the fallback so there's no blank flash
-    // while the GL chunk loads on first use.
-    return (
-      <Suspense fallback={<MapView {...props} />}>
-        <MapViewGL {...props} glProvider={glProvider} />
-      </Suspense>
-    )
-  }
+  if (provider === 'mapbox-gl' && token) return <MapViewGL {...props} />
   return <MapView {...props} />
 }

client/src/components/Map/MapViewGL.test.tsx

@@ -31,62 +31,19 @@ const glMap = vi.hoisted(() => ({
 vi.mock('mapbox-gl', () => ({
   default: {
     accessToken: '',
-    Map: vi.fn(function () {
-      return glMap
-    }),
-    Marker: vi.fn(function () {
-      return {
-        setLngLat: vi.fn().mockReturnThis(),
-        addTo: vi.fn().mockReturnThis(),
-        remove: vi.fn(),
-        getElement: vi.fn(() => document.createElement('div')),
-      }
-    }),
-    LngLatBounds: vi.fn(function () {
-      return { extend: vi.fn().mockReturnThis() }
-    }),
+    Map: vi.fn(() => glMap),
+    Marker: vi.fn(() => ({
+      setLngLat: vi.fn().mockReturnThis(),
+      addTo: vi.fn().mockReturnThis(),
+      remove: vi.fn(),
+      getElement: vi.fn(() => document.createElement('div')),
+    })),
+    LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
     NavigationControl: vi.fn(),
-    Popup: vi.fn(function () {
-      return {
-        setLngLat: vi.fn().mockReturnThis(),
-        setHTML: vi.fn().mockReturnThis(),
-        addTo: vi.fn().mockReturnThis(),
-        remove: vi.fn(),
-      }
-    }),
   },
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))
 
-vi.mock('maplibre-gl', () => ({
-  default: {
-    Map: vi.fn(function () {
-      return glMap
-    }),
-    Marker: vi.fn(function () {
-      return {
-        setLngLat: vi.fn().mockReturnThis(),
-        addTo: vi.fn().mockReturnThis(),
-        remove: vi.fn(),
-        getElement: vi.fn(() => document.createElement('div')),
-      }
-    }),
-    LngLatBounds: vi.fn(function () {
-      return { extend: vi.fn().mockReturnThis() }
-    }),
-    NavigationControl: vi.fn(),
-    Popup: vi.fn(function () {
-      return {
-        setLngLat: vi.fn().mockReturnThis(),
-        setHTML: vi.fn().mockReturnThis(),
-        addTo: vi.fn().mockReturnThis(),
-        remove: vi.fn(),
-      }
-    }),
-  },
-}))
-vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}))
-
 vi.mock('./mapboxSetup', () => ({
   isStandardFamily: vi.fn(() => false),
   supportsCustom3d: vi.fn(() => false),
@@ -100,9 +57,7 @@ vi.mock('./locationMarkerMapbox', () => ({
 }))
 
 vi.mock('./reservationsMapbox', () => ({
-  ReservationMapboxOverlay: vi.fn(function () {
-    return { update: vi.fn() }
-  }),
+  ReservationMapboxOverlay: vi.fn().mockImplementation(() => ({ update: vi.fn() })),
 }))
 
 vi.mock('../../hooks/useGeolocation', () => ({
@@ -206,25 +161,4 @@ describe('MapViewGL', () => {
     await act(async () => {})
     expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(after_first)
   })
-
-  it('FE-COMP-MAPVIEWGL-004: renders with the MapLibre provider and no token', async () => {
-    const mapboxgl = (await import('mapbox-gl')).default
-    const maplibregl = (await import('maplibre-gl')).default
-    useSettingsStore.setState({
-      settings: {
-        ...useSettingsStore.getState().settings,
-        map_provider: 'maplibre-gl',
-        mapbox_access_token: '', // MapLibre/OpenFreeMap is tokenless — must not short-circuit
-        maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
-      },
-    } as any)
-    const places = [buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]
-
-    render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
-    await act(async () => {})
-
-    // The MapLibre engine builds the map even without a token; Mapbox is not used.
-    expect(maplibregl.Map).toHaveBeenCalled()
-    expect(mapboxgl.Map).not.toHaveBeenCalled()
-  })
 })

client/src/components/Map/MapViewGL.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useMemo, useState, createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
-import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
-import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAuthStore } from '../../store/authStore'
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
@@ -11,12 +9,9 @@ import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
 import { ReservationMapboxOverlay } from './reservationsMapbox'
-import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
-import { buildPlacePopupHtml, buildPoiPopupHtml } from './placePopup'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -54,12 +49,6 @@ interface Props {
   visibleConnectionIds?: number[]
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
-  pois?: Poi[]
-  onPoiClick?: (poi: Poi) => void
-  onViewportChange?: (bbox: { south: number; west: number; north: number; east: number }) => void
-  glProvider?: GlMapProvider
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  onMapReady?: (map: any | null) => void
 }
 
 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
@@ -90,14 +79,14 @@ function createMarkerElement(place: Place & { category_color?: string; category_
       box-shadow:0 1px 4px rgba(0,0,0,0.18);
       display:flex;align-items:center;justify-content:center;
       font-size:${orderNumbers.length > 1 ? 7.5 : 9}px;font-weight:800;color:#111827;
-      font-family:var(--font-system);line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;line-height:1;
       box-sizing:border-box;white-space:nowrap;
     ">${label}</span>`
   }
 
   const wrap = document.createElement('div')
-  // Do NOT set `position: relative` here — GL map libraries ship
-  // marker classes with `position: absolute` and rely on it. An inline
+  // Do NOT set `position: relative` here — mapbox-gl ships
+  // `.mapboxgl-marker { position: absolute }` and relies on it. An inline
   // `position: relative` here overrides the class, turns every marker into
   // a static block element, and stacks them in document order inside the
   // canvas container. The result looks exactly like "markers drift as the
@@ -139,17 +128,6 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   return wrap
 }
 
-// Small coloured pin for an OSM "explore" POI (matches the pill category colour).
-function createPoiMarkerElement(category: string): HTMLDivElement {
-  const cat = POI_CATEGORY_BY_KEY[category]
-  const color = cat?.color || '#6b7280'
-  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
-  const el = document.createElement('div')
-  el.style.cssText = 'width:26px;height:26px;cursor:pointer;'
-  el.innerHTML = `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;box-sizing:border-box;">${svg}</div>`
-  return el
-}
-
 export function MapViewGL({
   places = [],
   dayPlaces = [],
@@ -171,93 +149,56 @@ export function MapViewGL({
   visibleConnectionIds = [],
   showReservationStats = false,
   onReservationClick,
-  pois = [],
-  onPoiClick,
-  onViewportChange,
-  glProvider = 'mapbox-gl',
-  onMapReady,
 }: Props) {
-  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
-  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
+  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
   const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
   const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
   const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
-  const mapLang = useSettingsStore(s => s.settings.language)
-  const isMapLibre = glProvider === 'maplibre-gl'
-  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
-  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
-  const enableMapbox3d = !isMapLibre && mapbox3d
   const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
   const [mapReady, setMapReady] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const mapRef = useRef<any | null>(null)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const markersRef = useRef<Map<number, any>>(new Map())
+  const mapRef = useRef<mapboxgl.Map | null>(null)
+  const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
   const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
   const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
   // Refs so the reservation overlay always sees the latest callback /
   // options without forcing a full overlay rebuild on every prop change.
   const onReservationClickRef = useRef(onReservationClick)
   onReservationClickRef.current = onReservationClick
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const poiMarkersRef = useRef<any[]>([])
-  // Single reusable hover popup (name/category/address card) shared by planned
-  // places and POI markers — mirrors the Leaflet map's hover tooltip.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const popupRef = useRef<any | null>(null)
-  const onPoiClickRef = useRef(onPoiClick)
-  onPoiClickRef.current = onPoiClick
-  const onViewportChangeRef = useRef(onViewportChange)
-  onViewportChangeRef.current = onViewportChange
-  const onMapReadyRef = useRef(onMapReady)
-  onMapReadyRef.current = onMapReady
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
   const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
   onClickRefs.current.marker = onMarkerClick
   onClickRefs.current.map = onMapClick
   onClickRefs.current.context = onMapContextMenu
 
-  // Build/rebuild the map on provider/style/token/3d change
+  // Build/rebuild the map on style/token/3d change
   useEffect(() => {
-    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
-    if (!isMapLibre) mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || !mapboxToken) return
+    mapboxgl.accessToken = mapboxToken
 
-    const mapOptions: Record<string, unknown> = {
+    const map = new mapboxgl.Map({
       container: containerRef.current,
-      style: glStyle,
+      style: mapboxStyle,
       center: [center[1], center[0]],
       zoom,
-      pitch: enableMapbox3d ? 45 : 0,
+      pitch: mapbox3d ? 45 : 0,
       attributionControl: true,
       antialias: mapboxQuality,
-    }
-    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
-
-    const map = new gl.Map(mapOptions as any)
-    mapRef.current = map
-    popupRef.current = new gl.Popup({
-      closeButton: false,
-      closeOnClick: false,
-      offset: 18,
-      maxWidth: '240px',
-      className: 'trek-map-popup',
+      projection: mapboxQuality ? 'globe' : 'mercator',
     })
-    // Hand the map out so the trip planner can render its own compass pill next to
-    // the POI pill (a custom round control instead of Mapbox's default top-right one).
-    onMapReadyRef.current?.(map)
+    mapRef.current = map
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(window as any).__trek_map = map
 
     map.on('load', () => {
-      if (enableMapbox3d) {
+      if (mapbox3d) {
         // Terrain is only valuable on satellite styles — on clean vector
         // styles it makes route lines drift off the HTML markers because
         // the lines snap to DEM height while markers stay at sea level.
-        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(glStyle)) {
+        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(mapboxStyle)) {
           const dark = document.documentElement.classList.contains('dark')
           addCustom3dBuildings(map, dark)
         }
@@ -270,7 +211,7 @@ export function MapViewGL({
       // non-satellite Standard style still looks great without terrain,
       // so flatten it out to keep markers pinned. (Satellite variants
       // are left alone — the DEM is what gives them their character.)
-      if (glStyle === MAPBOX_DEFAULT_STYLE) {
+      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
         try { map.setTerrain(null) } catch { /* noop */ }
       }
       // initial route source — kept around so updates can setData() cheaply
@@ -316,18 +257,10 @@ export function MapViewGL({
 
     map.on('click', (e) => {
       const t = e.originalEvent.target as HTMLElement
-      if (t.closest('.mapboxgl-marker, .maplibregl-marker')) return // markers handle their own click
+      if (t.closest('.mapboxgl-marker')) return // markers handle their own click
       onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
     })
-    // Emit the viewport bbox (pan/zoom + once on first idle) so the POI-explore
-    // pill can fetch OSM places for the visible area.
-    const emitViewport = () => {
-      const b = map.getBounds()
-      onViewportChangeRef.current?.({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
-    }
-    map.on('moveend', emitViewport)
-    map.once('idle', emitViewport)
-    // In the GL map the right mouse button is reserved for the
+    // In the mapbox-gl map the right mouse button is reserved for the
     // built-in rotate/pitch gesture, so we bind the "add place" action
     // to the middle mouse button (button === 1) instead.
     const canvas = map.getCanvasContainer()
@@ -374,9 +307,7 @@ export function MapViewGL({
         const ll = marker.getLngLat()
         let alt = 0
         try {
-          const e = typeof map.queryTerrainElevation === 'function'
-            ? map.queryTerrainElevation([ll.lng, ll.lat])
-            : null
+          const e = map.queryTerrainElevation([ll.lng, ll.lat])
           if (typeof e === 'number' && Number.isFinite(e)) alt = e
         } catch { /* terrain not ready */ }
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -388,17 +319,13 @@ export function MapViewGL({
         }
       })
     }
-    // Terrain altitude sync only matters with mapbox 3D/terrain on; skip the per-frame
-    // listener entirely for MapLibre and flat mapbox styles.
-    if (enableMapbox3d) map.on('render', syncMarkerAltitudes)
+    map.on('render', syncMarkerAltitudes)
 
     return () => {
       canvas.removeEventListener('mousedown', onAuxDown)
       canvas.removeEventListener('auxclick', onAuxClick)
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
-      if (popupRef.current) { popupRef.current.remove(); popupRef.current = null }
-      onMapReadyRef.current?.(null)
       if (reservationOverlayRef.current) {
         reservationOverlayRef.current.destroy()
         reservationOverlayRef.current = null
@@ -411,17 +338,7 @@ export function MapViewGL({
       mapRef.current = null
       setMapReady(false)
     }
-  }, [glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality]) // rebuild on provider/style changes only
-
-  // Pin the basemap label language to the UI language so labels don't fall back to the
-  // browser/OS locale and stack multiple scripts per place (e.g. "India/भारत/India", #1299).
-  // Mapbox Standard exposes this via a basemap config property; classic and MapLibre styles
-  // are left as-is. Runs on load (mapReady) and whenever the UI language changes.
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !mapReady || isMapLibre || !isStandardFamily(glStyle)) return
-    try { map.setConfigProperty('basemap', 'language', basemapLanguage(mapLang)) } catch { /* style/SDK may not support the basemap language property */ }
-  }, [mapLang, mapReady, isMapLibre, glStyle])
+  }, [mapboxStyle, mapboxToken, mapbox3d]) // rebuild on style changes only
 
   // Photo loading — mirrors the Leaflet MapView. Updates via RAF to batch
   // simultaneous thumb arrivals into one re-render.
@@ -482,10 +399,6 @@ export function MapViewGL({
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
-    // Markers are about to be rebuilt; drop any open hover popup first. A marker
-    // recreated under the pointer (e.g. when its photo streams in) never fires
-    // mouseleave, which would otherwise leave the popup orphaned on the map.
-    popupRef.current?.remove()
     const ids = new Set(places.map(p => p.id))
 
     markersRef.current.forEach((marker, id) => {
@@ -506,12 +419,6 @@ export function MapViewGL({
         ev.stopPropagation()
         onClickRefs.current.marker?.(place.id)
       })
-      el.addEventListener('mouseenter', () => {
-        popupRef.current?.setLngLat([place.lng, place.lat])
-          .setHTML(buildPlacePopupHtml(place as Place & { category_color?: string; category_icon?: string; category_name?: string }, photoUrl))
-          .addTo(map)
-      })
-      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
       // Recreate marker each time rather than patching internal state —
       // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
       const existing = markersRef.current.get(place.id)
@@ -521,32 +428,12 @@ export function MapViewGL({
       // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
       // but it rotates the element by the pitch angle and visually offsets
       // the anchor by ~100px at 45° tilt, which caused the observed drift.
-      const m = new gl.Marker({ element: el, anchor: 'center' })
+      const m = new mapboxgl.Marker({ element: el, anchor: 'center' })
         .setLngLat([place.lng, place.lat])
         .addTo(map)
       markersRef.current.set(place.id, m)
     })
-  }, [places, selectedPlaceId, dayOrderMap, photoUrls, mapReady, glProvider])
-
-  // Reconcile OSM "explore" POI markers (imperative, kept separate from the
-  // planned-place markers so they don't cluster or get confused with them).
-  useEffect(() => {
-    const map = mapRef.current
-    if (!map || !mapReady) return
-    popupRef.current?.remove() // same orphan-popup guard as the place markers
-    poiMarkersRef.current.forEach(m => m.remove())
-    poiMarkersRef.current = []
-    for (const poi of (pois as Poi[])) {
-      const el = createPoiMarkerElement(poi.category)
-      el.addEventListener('mouseenter', () => {
-        popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
-      })
-      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
-      el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
-      const m = new gl.Marker({ element: el, anchor: 'center' }).setLngLat([poi.lng, poi.lat]).addTo(map)
-      poiMarkersRef.current.push(m)
-    }
-  }, [pois, mapReady, glProvider])
+  }, [places, selectedPlaceId, dayOrderMap, photoUrls])
 
   // Update route geojson
   useEffect(() => {
@@ -610,7 +497,7 @@ export function MapViewGL({
         showStats: showReservationStats,
         showEndpointLabels,
         onEndpointClick: (id) => onReservationClickRef.current?.(id),
-      }, gl.Marker as any)
+      })
     }
     reservationOverlayRef.current.update(visibleReservations, {
       showConnections: true,
@@ -618,7 +505,7 @@ export function MapViewGL({
       showEndpointLabels,
       onEndpointClick: (id) => onReservationClickRef.current?.(id),
     })
-  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady, glProvider])
+  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady])
 
   // Fit bounds on fitKey change — matches the Leaflet BoundsController
   const paddingOpts = useMemo(() => {
@@ -638,14 +525,14 @@ export function MapViewGL({
     const target = dayPlaces.length > 0 ? dayPlaces : places
     const valid = target.filter(p => p.lat && p.lng)
     if (valid.length === 0) return
-    const bounds = new gl.LngLatBounds()
+    const bounds = new mapboxgl.LngLatBounds()
     valid.forEach(p => bounds.extend([p.lng, p.lat]))
     const run = () => {
       try {
         map.fitBounds(bounds, {
           padding: paddingOpts,
           maxZoom: 15,
-          pitch: enableMapbox3d ? 45 : 0,
+          pitch: mapbox3d ? 45 : 0,
           duration: 400,
         })
       } catch { /* noop */ }
@@ -664,15 +551,11 @@ export function MapViewGL({
       map.flyTo({
         center: [target.lng, target.lat],
         zoom: Math.max(map.getZoom(), 14),
-        pitch: enableMapbox3d ? 45 : 0,
+        pitch: mapbox3d ? 45 : 0,
         duration: 400,
-        // Account for the side panels and the bottom inspector / day-detail panel
-        // so the selected pin lands in the centre of the *visible* map area rather
-        // than the geometric centre (where the bottom panel would cover it).
-        padding: paddingOpts,
       })
     } catch { /* noop */ }
-  }, [selectedPlaceId, enableMapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // External center/zoom prop changes — jump without animation
   useEffect(() => {
@@ -695,7 +578,7 @@ export function MapViewGL({
     }
     if (!userPosition) return
     const apply = () => {
-      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map, gl.Marker as any)
+      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map)
       locationMarkerRef.current.update(userPosition)
       if (trackingMode === 'follow') {
         // easeTo is gentler than flyTo for continuous updates
@@ -711,9 +594,9 @@ export function MapViewGL({
     }
     if (map.loaded()) apply()
     else map.once('load', apply)
-  }, [userPosition, trackingMode, glProvider])
+  }, [userPosition, trackingMode])
 
-  if (!isMapLibre && !mapboxToken) {
+  if (!mapboxToken) {
     return (
       <div className="w-full h-full flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-center px-6">
         <div className="text-sm text-zinc-500">
@@ -727,12 +610,7 @@ export function MapViewGL({
   // Desktop browsers only get IP-based geolocation (city-level accuracy),
   // so the button would be misleading. Mobile, where real GPS lives, keeps it.
   const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
-  // When the day-detail panel is open it slides up over the map (bottom: navh+20,
-  // height var(--day-panel-h)) and covers the button's band, so lift the button
-  // above it; otherwise keep the plain bottom-nav offset. #1348
-  const buttonBottom = hasDayDetail
-    ? 'calc(var(--bottom-nav-h, 84px) + 20px + var(--day-panel-h, 0px) + 12px)'
-    : 'calc(var(--bottom-nav-h, 84px) + 12px)'
+  const buttonBottom = 'calc(var(--bottom-nav-h, 84px) + 12px)'
 
   return (
     <div className="w-full h-full relative">

client/src/components/Map/PoiCategoryPill.tsx

@@ -1,101 +0,0 @@
-import { RotateCw, AlertTriangle } from 'lucide-react'
-import { useTranslation } from '../../i18n'
-import { Tooltip } from '../shared/Tooltip'
-import { POI_CATEGORIES } from './poiCategories'
-
-interface Props {
-  active: Set<string>
-  onToggle: (key: string) => void
-  loadingKeys?: Set<string>
-  /** categories whose last fetch failed → show a retry affordance */
-  errorKeys?: Set<string>
-  /** true when the map moved since the last search → offer "search this area" */
-  moved?: boolean
-  onSearchArea?: () => void
-}
-
-// Frosted, icon-only segmented control that floats over the map. Active segments
-// fill with the category colour (matching their markers); the label shows in a
-// custom tooltip on hover so the pill stays compact and never needs to scroll.
-export default function PoiCategoryPill({ active, onToggle, loadingKeys, errorKeys, moved, onSearchArea }: Props) {
-  const { t } = useTranslation()
-  const anyError = !!errorKeys && Array.from(active).some(k => errorKeys.has(k))
-
-  const frosted: React.CSSProperties = {
-    background: 'var(--sidebar-bg)',
-    backdropFilter: 'blur(20px) saturate(180%)',
-    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
-    boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
-  }
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
-      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 4, borderRadius: 999, pointerEvents: 'auto', ...frosted }}>
-        {POI_CATEGORIES.map(cat => {
-          const on = active.has(cat.key)
-          const loading = loadingKeys?.has(cat.key)
-          return (
-            <Tooltip key={cat.key} label={t(cat.labelKey)} placement="bottom">
-              <button
-                type="button"
-                onClick={() => onToggle(cat.key)}
-                aria-pressed={on}
-                aria-label={t(cat.labelKey)}
-                className={on ? '' : 'text-content-muted'}
-                style={{
-                  position: 'relative',
-                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                  width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
-                  background: on ? cat.color : 'transparent',
-                  color: on ? '#fff' : undefined,
-                  transition: 'background 0.14s, color 0.14s',
-                }}
-                onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-hover)' }}
-                onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent' }}
-              >
-                {loading ? (
-                  <span
-                    className="animate-spin"
-                    style={{
-                      width: 14, height: 14, borderRadius: 999, display: 'inline-block',
-                      border: '2px solid', borderColor: on ? 'rgba(255,255,255,0.45)' : 'var(--border-primary)',
-                      borderTopColor: on ? '#fff' : 'var(--text-muted)',
-                    }}
-                  />
-                ) : (
-                  <cat.Icon size={16} strokeWidth={2} />
-                )}
-                {on && !loading && errorKeys?.has(cat.key) && (
-                  <span style={{
-                    position: 'absolute', top: 2, right: 2, width: 8, height: 8,
-                    borderRadius: 999, background: '#ef4444', border: '1.5px solid var(--sidebar-bg)',
-                  }} />
-                )}
-              </button>
-            </Tooltip>
-          )
-        })}
-      </div>
-
-      {(moved || anyError) && active.size > 0 && (
-        <button
-          type="button"
-          onClick={onSearchArea}
-          className="text-content"
-          style={{
-            display: 'inline-flex', alignItems: 'center', gap: 6,
-            padding: '6px 13px', borderRadius: 999, border: 'none', cursor: 'pointer',
-            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', pointerEvents: 'auto',
-            color: anyError ? '#ef4444' : undefined,
-            ...frosted,
-          }}
-        >
-          {anyError
-            ? <AlertTriangle size={13} strokeWidth={2.4} />
-            : <RotateCw size={13} strokeWidth={2.4} />}
-          {t('poi.searchThisArea')}
-        </button>
-      )}
-    </div>
-  )
-}

client/src/components/Map/ReservationOverlay.tsx

@@ -2,8 +2,7 @@ import { createElement, useEffect, useMemo, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
-import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
-import { escapeHtml } from '@trek/shared'
+import { Plane, Train, Ship, Car } from 'lucide-react'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -11,8 +10,8 @@ const ENDPOINT_PANE = 'reservation-endpoints'
 const AIRPORT_BADGE_HALF_PX = 16
 const BADGE_GAP_PX = 5
 
-type TransportType = 'flight' | 'train' | 'cruise' | 'car' | 'bus' | 'taxi' | 'bicycle' | 'ferry' | 'transport_other'
-const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car', 'bus', 'taxi', 'bicycle', 'ferry', 'transport_other']
+type TransportType = 'flight' | 'train' | 'cruise' | 'car'
+const TRANSPORT_TYPES: TransportType[] = ['flight', 'train', 'cruise', 'car']
 
 const TRANSPORT_COLOR = '#3b82f6'
 
@@ -21,11 +20,6 @@ const TYPE_META: Record<TransportType, { color: string; icon: typeof Plane; geod
   train: { color: TRANSPORT_COLOR, icon: Train, geodesic: false },
   cruise: { color: TRANSPORT_COLOR, icon: Ship, geodesic: true },
   car: { color: TRANSPORT_COLOR, icon: Car, geodesic: false },
-  bus: { color: TRANSPORT_COLOR, icon: Bus, geodesic: false },
-  taxi: { color: TRANSPORT_COLOR, icon: CarTaxiFront, geodesic: false },
-  bicycle: { color: TRANSPORT_COLOR, icon: Bike, geodesic: false },
-  ferry: { color: TRANSPORT_COLOR, icon: Sailboat, geodesic: true },
-  transport_other: { color: TRANSPORT_COLOR, icon: Route, geodesic: false },
 }
 
 function useEndpointPane() {
@@ -43,7 +37,7 @@ function useEndpointPane() {
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
   const { icon: IconCmp, color } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span>${escapeHtml(label)}</span>` : ''
+  const labelHtml = label ? `<span>${label}</span>` : ''
   const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
   return L.divIcon({
     className: 'trek-endpoint-marker',
@@ -52,9 +46,9 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
       padding:0 8px;border-radius:999px;
       background:${color};box-shadow:0 2px 6px rgba(0,0,0,0.25);
       border:1.5px solid #fff;color:#fff;
-      font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
+      font-family:-apple-system,system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
       box-sizing:border-box;height:22px;white-space:nowrap;
-    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''}</div>`,
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
     iconSize: [estWidth, 22],
     iconAnchor: [estWidth / 2, 11],
     popupAnchor: [0, -11],
@@ -158,7 +152,6 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
-  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -174,8 +167,8 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -183,7 +176,7 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
     background:rgba(17,24,39,0.92);color:#fff;
     box-shadow:0 2px 6px rgba(0,0,0,0.25);
     border:1px solid ${color}aa;
-    font-family:var(--font-system);
+    font-family:-apple-system,system-ui,'SF Pro Text',sans-serif;
     white-space:nowrap;box-sizing:border-box;
     transform-origin:center;
     will-change:transform;
@@ -354,29 +347,15 @@ export default function ReservationOverlay({ reservations, showConnections, show
     const out: TransportItem[] = []
     for (const r of reservations) {
       if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-      // Ordered waypoints (from · stops · to). A single-leg booking has exactly two,
-      // so the arc + markers below are byte-identical to before for it.
-      const waypoints = (r.endpoints || [])
-        .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
-        .slice()
-        .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
-      if (waypoints.length < 2) continue
-      const from = waypoints[0]
-      const to = waypoints[waypoints.length - 1]
+      const eps = r.endpoints || []
+      const from = eps.find(e => e.role === 'from')
+      const to = eps.find(e => e.role === 'to')
+      if (!from || !to) continue
       const type = r.type as TransportType
       const isGeo = TYPE_META[type].geodesic
-      // One arc per leg (between consecutive waypoints), concatenated.
-      const arcs: [number, number][][] = []
-      let distanceKm = 0
-      for (let i = 0; i < waypoints.length - 1; i++) {
-        const a = waypoints[i]
-        const b = waypoints[i + 1]
-        const segArcs = isGeo
-          ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
-          : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
-        arcs.push(...segArcs)
-        distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
-      }
+      const arcs = isGeo
+        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
+        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
       const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
       const primaryArc = arcs[primaryIdx] ?? []
       const fallback: [number, number] = primaryArc.length > 0
@@ -384,15 +363,12 @@ export default function ReservationOverlay({ reservations, showConnections, show
         : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
 
       const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-      const distance = `${Math.round(distanceKm)} km`
-      // Show the full route (FRA → BER → HND) when every waypoint has a code.
-      const mainLabel = waypoints.every(w => w.code)
-        ? waypoints.map(w => w.code).join(' → ')
-        : (from.code && to.code ? `${from.code} → ${to.code}` : null)
+      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
+      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
       const subParts = [duration, distance].filter(Boolean) as string[]
       const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
 
-      out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
     }
     return out
   }, [reservations])
@@ -434,21 +410,38 @@ export default function ReservationOverlay({ reservations, showConnections, show
         />
       )))}
 
-      {visibleItems.flatMap(item => item.waypoints.map((wp, wi) => (
+      {visibleItems.flatMap(item => [
         <Marker
-          key={`wp-${item.res.id}-${wi}`}
-          position={[wp.lat, wp.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (wp.code || cleanName(wp.name)) : null)}
+          key={`from-${item.res.id}`}
+          position={[item.from.lat, item.from.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
           pane={ENDPOINT_PANE}
           zIndexOffset={1000}
           eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
         >
           <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{wp.name}</div>
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
             {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
           </Tooltip>
-        </Marker>
-      )))}
+        </Marker>,
+        <Marker
+          key={`to-${item.res.id}`}
+          position={[item.to.lat, item.to.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
+          pane={ENDPOINT_PANE}
+          zIndexOffset={1000}
+          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
+        >
+          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
+            {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
+          </Tooltip>
+        </Marker>,
+      ])}
+
+      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
+        <StatsLabel key={`stats-${item.res.id}`} item={item} />
+      ))}
     </>
   )
 }

client/src/components/Map/RouteCalculator.test.ts

@@ -6,7 +6,6 @@ import {
   calculateSegments,
   optimizeRoute,
   generateGoogleMapsUrl,
-  withHotelBookends,
 } from './RouteCalculator'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
@@ -162,62 +161,6 @@ describe('optimizeRoute', () => {
     expect(result[1]).toEqual(c)
     expect(result[2]).toEqual(b)
   })
-
-  it('FE-COMP-ROUTECALCULATOR-016: start anchor begins the chain at the anchor-nearest stop', () => {
-    const a = { lat: 10, lng: 1 }
-    const b = { lat: 2, lng: 1 }
-    const c = { lat: 5, lng: 1 }
-    // From the accommodation anchor (1,1): nearest is b(2,1), then c(5,1), then a(10,1)
-    const result = optimizeRoute([a, b, c], { start: { lat: 1, lng: 1 } })
-    expect(result).toEqual([b, c, a])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-017: start + end anchors reorder a shuffled day and keep the end-nearest stop last', () => {
-    const a = { lat: 2, lng: 1 }
-    const b = { lat: 5, lng: 1 }
-    const c = { lat: 8, lng: 1 }
-    // Transfer day: start at hotel A (1,1), end at hotel B (9,1). c is nearest B, so it must be last.
-    const result = optimizeRoute([c, a, b], { start: { lat: 1, lng: 1 }, end: { lat: 9, lng: 1 } })
-    expect(result).toEqual([a, b, c])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-018: an anchor makes even a two-stop day sortable', () => {
-    const a = { lat: 10, lng: 1 }
-    const b = { lat: 2, lng: 1 }
-    // Without anchors two stops are returned unchanged; the start anchor orders them by proximity.
-    const result = optimizeRoute([a, b], { start: { lat: 1, lng: 1 } })
-    expect(result).toEqual([b, a])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-019: 2-opt untangles a round-trip into a clean loop around the hotel', () => {
-    const hotel = { lat: 48.8668, lng: 2.3013 } // Rue Marbeuf
-    const stops = [
-      { id: 1, lat: 48.8565, lng: 2.3324 },
-      { id: 2, lat: 48.8813, lng: 2.3151 },
-      { id: 3, lat: 48.8796, lng: 2.308 },
-      { id: 4, lat: 48.8723, lng: 2.2926 },
-      { id: 5, lat: 48.866, lng: 2.3102 }, // nearest the hotel
-    ]
-    const d = (a: { lat: number; lng: number }, b: { lat: number; lng: number }) =>
-      Math.hypot(a.lat - b.lat, a.lng - b.lng)
-    const loop = (order: typeof stops) =>
-      d(hotel, order[0]) + order.slice(1).reduce((s, p, i) => s + d(order[i], p), 0) + d(order[order.length - 1], hotel)
-
-    const result = optimizeRoute(stops, { start: hotel, end: hotel })
-    // The optimized loop is no longer than the original order…
-    expect(loop(result)).toBeLessThanOrEqual(loop(stops) + 1e-9)
-    // …and the hotel-adjacent stop sits at one end of the loop, right next to the hotel.
-    expect([result[0].id, result[result.length - 1].id]).toContain(5)
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-020: an end anchor without a start finishes at the stop nearest it', () => {
-    const a = { lat: 2, lng: 1 }
-    const b = { lat: 5, lng: 1 }
-    const c = { lat: 9, lng: 1 }
-    // a is nearest the end anchor, so the route must finish at a rather than start there.
-    const result = optimizeRoute([a, b, c], { end: { lat: 1, lng: 1 } })
-    expect(result[result.length - 1]).toEqual(a)
-  })
 })
 
 // ── generateGoogleMapsUrl ──────────────────────────────────────────────────────
@@ -242,46 +185,3 @@ describe('generateGoogleMapsUrl', () => {
     expect(result).toContain('48.86,2.36')
   })
 })
-
-// ── withHotelBookends (#1275: draw the hotel → first / last → hotel legs) ────────
-
-describe('withHotelBookends', () => {
-  const hotel = { lat: 1, lng: 1 }
-  const a = { lat: 2, lng: 2 }
-  const b = { lat: 3, lng: 3 }
-  const evening = { lat: 4, lng: 4 }
-
-  it('FE-COMP-ROUTECALCULATOR-021: leaves runs untouched when there is no hotel', () => {
-    const runs = [[a, b]]
-    expect(withHotelBookends(runs, a, b, null, null)).toEqual([[a, b]])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-022: prepends hotel→first and appends last→hotel around the runs', () => {
-    const runs = [[a, b]]
-    expect(withHotelBookends(runs, a, b, hotel, evening)).toEqual([
-      [hotel, a],
-      [a, b],
-      [b, evening],
-    ])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-023: a single stop with no runs still draws hotel→stop→hotel', () => {
-    expect(withHotelBookends([], a, a, hotel, evening)).toEqual([
-      [hotel, a],
-      [a, evening],
-    ])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-024: a missing first/last waypoint skips that bookend', () => {
-    const runs = [[a, b]]
-    expect(withHotelBookends(runs, undefined, undefined, hotel, evening)).toEqual([[a, b]])
-  })
-
-  it('FE-COMP-ROUTECALCULATOR-025: only the start hotel adds just the opening leg', () => {
-    const runs = [[a, b]]
-    expect(withHotelBookends(runs, a, b, hotel, null)).toEqual([
-      [hotel, a],
-      [a, b],
-    ])
-  })
-})

client/src/components/Map/RouteCalculator.ts

@@ -1,6 +1,4 @@
-import { useSettingsStore } from '../../store/settingsStore'
-import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
-import { formatDistance } from '../../utils/units'
+import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
@@ -62,34 +60,13 @@ export async function calculateRoute(
     coordinates,
     distance,
     duration,
-    distanceText: formatRouteDistance(distance),
+    distanceText: formatDistance(distance),
     durationText: formatDuration(duration),
     walkingText: formatDuration(walkingDuration),
     drivingText: formatDuration(drivingDuration),
   }
 }
 
-/**
- * Prepends a hotel→first-waypoint run and appends a last-waypoint→hotel run to the
- * day's activity runs, so the drawn route starts and ends at the day's accommodation
- * (matching the sidebar's hotel connectors). A bookend is only added when both its
- * hotel and the first/last located waypoint exist; passing nulls leaves `runs`
- * untouched. The shared first/last waypoint is repeated so the polylines join.
- */
-export function withHotelBookends(
-  runs: Waypoint[][],
-  firstWay: Waypoint | undefined,
-  lastWay: Waypoint | undefined,
-  startHotel: Waypoint | null,
-  endHotel: Waypoint | null,
-): Waypoint[][] {
-  const out: Waypoint[][] = []
-  if (startHotel && firstWay) out.push([startHotel, firstWay])
-  out.push(...runs)
-  if (endHotel && lastWay) out.push([lastWay, endHotel])
-  return out
-}
-
 export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   const valid = places.filter((p) => p.lat && p.lng)
   if (valid.length === 0) return null
@@ -100,98 +77,35 @@ export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   return `https://www.google.com/maps/dir/${stops}`
 }
 
-// Squared planar distance — enough for nearest-neighbor comparisons and cheaper than a full haversine.
-function sqDist(a: Waypoint, b: Waypoint): number {
-  return (a.lat - b.lat) ** 2 + (a.lng - b.lng) ** 2
-}
+/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
+export function optimizeRoute<T extends Waypoint>(places: T[]): T[] {
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 2) return places
 
-// Length of visiting `order` in sequence, optionally pinned to a fixed start and/or end anchor.
-// With start === end this is a closed loop back to the anchor (a day out from and back to the hotel).
-function tourLength(order: Waypoint[], start?: Waypoint, end?: Waypoint): number {
-  if (order.length === 0) return 0
-  let total = 0
-  if (start) total += Math.sqrt(sqDist(start, order[0]))
-  for (let i = 0; i < order.length - 1; i++) total += Math.sqrt(sqDist(order[i], order[i + 1]))
-  if (end) total += Math.sqrt(sqDist(order[order.length - 1], end))
-  return total
-}
-
-// Greedy nearest-neighbor ordering, seeded at the start anchor when there is one.
-function nearestNeighborOrder<T extends Waypoint>(valid: T[], start?: Waypoint): T[] {
   const visited = new Set<number>()
   const result: T[] = []
-  let current: Waypoint
-  if (start) {
-    current = start
-  } else {
-    current = valid[0]
-    visited.add(0)
-    result.push(valid[0])
-  }
+  let current = valid[0]
+  visited.add(0)
+  result.push(current)
+
   while (result.length < valid.length) {
     let nearestIdx = -1
     let minDist = Infinity
     for (let i = 0; i < valid.length; i++) {
       if (visited.has(i)) continue
-      const d = sqDist(valid[i], current)
+      const d = Math.sqrt(
+        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
+      )
       if (d < minDist) { minDist = d; nearestIdx = i }
     }
     if (nearestIdx === -1) break
     visited.add(nearestIdx)
     current = valid[nearestIdx]
-    result.push(valid[nearestIdx])
+    result.push(current)
   }
   return result
 }
 
-// 2-opt: repeatedly reverse a sub-segment whenever it shortens the tour. This removes the crossings
-// a pure nearest-neighbor pass leaves behind. The start/end anchors stay fixed, so a round trip
-// (start === end) is untangled into a clean loop rather than an open path.
-function twoOptImprove<T extends Waypoint>(order: T[], start?: Waypoint, end?: Waypoint): T[] {
-  if (order.length < 3) return order
-  let best = order
-  let bestLen = tourLength(best, start, end)
-  let improved = true
-  while (improved) {
-    improved = false
-    for (let i = 0; i < best.length - 1; i++) {
-      for (let j = i + 1; j < best.length; j++) {
-        const candidate = best.slice(0, i).concat(best.slice(i, j + 1).reverse(), best.slice(j + 1))
-        const len = tourLength(candidate, start, end)
-        if (len < bestLen - 1e-12) {
-          best = candidate
-          bestLen = len
-          improved = true
-        }
-      }
-    }
-  }
-  return best
-}
-
-/**
- * Reorders waypoints to minimize travel distance: a nearest-neighbor pass for a good starting order,
- * then 2-opt to untangle crossings. Optional anchors (e.g. the day's accommodation) pin the route's
- * ends — start === end makes it a loop out from and back to the hotel; a transfer day runs start → end.
- */
-export function optimizeRoute<T extends Waypoint>(places: T[], anchors: RouteAnchors = {}): T[] {
-  const { start, end } = anchors
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 1) return places
-  // Two unanchored stops have no meaningful order to optimize; anchors can still flip them.
-  if (valid.length === 2 && !start && !end) return places
-
-  const order = twoOptImprove(nearestNeighborOrder(valid, start), start, end)
-
-  // A round trip's loop direction is arbitrary, so orient it to begin at the stop nearest the hotel —
-  // that reads naturally as "leave the hotel, head to the closest place, …, come back".
-  if (start && end && start.lat === end.lat && start.lng === end.lng && order.length > 1) {
-    if (sqDist(order[order.length - 1], start) < sqDist(order[0], start)) order.reverse()
-  }
-
-  return order
-}
-
 /** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
 export async function calculateSegments(
   waypoints: Waypoint[],
@@ -220,7 +134,7 @@ export async function calculateSegments(
       duration: leg.duration,
       walkingText: formatDuration(walkingDuration),
       drivingText: formatDuration(leg.duration),
-      distanceText: formatRouteDistance(leg.distance),
+      distanceText: formatDistance(leg.distance),
     }
   })
 }
@@ -240,9 +154,7 @@ export async function calculateRouteWithLegs(
   }
 
   const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  // The cached result carries formatted leg distances, so the active distance unit is
-  // part of the key — otherwise switching km↔mi would return stale text (#1300).
-  const cacheKey = `${profile}:${getDistanceUnit()}:${coords}`
+  const cacheKey = `${profile}:${coords}`
   const cached = routeCache.get(cacheKey)
   if (cached) return cached
 
@@ -269,7 +181,7 @@ export async function calculateRouteWithLegs(
         duration: leg.duration,
         walkingText: formatDuration(walkingDuration),
         drivingText: formatDuration(leg.duration),
-        distanceText: formatRouteDistance(leg.distance),
+        distanceText: formatDistance(leg.distance),
         durationText: formatDuration(leg.duration),
       }
     }
@@ -284,16 +196,11 @@ export async function calculateRouteWithLegs(
   return result
 }
 
-function getDistanceUnit(): DistanceUnit {
-  return useSettingsStore.getState().settings.distance_unit === 'imperial' ? 'imperial' : 'metric'
-}
-
-function formatRouteDistance(meters: number): string {
-  const unit = getDistanceUnit()
-  if (unit === 'metric' && meters < 1000) {
+function formatDistance(meters: number): string {
+  if (meters < 1000) {
     return `${Math.round(meters)} m`
   }
-  return formatDistance(meters / 1000, unit)
+  return `${(meters / 1000).toFixed(1)} km`
 }
 
 function formatDuration(seconds: number): string {

client/src/components/Map/glProviders.test.ts

@@ -1,72 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import {
-  MAPBOX_DEFAULT_STYLE,
-  OPENFREEMAP_DEFAULT_STYLE,
-  isOpenFreeMapStyle,
-  normalizeStyleForProvider,
-  styleForActiveProvider,
-  basemapLanguage,
-} from './glProviders'
-
-describe('glProviders', () => {
-  it('keeps OpenFreeMap styles for MapLibre', () => {
-    const style = 'https://tiles.openfreemap.org/styles/bright'
-
-    expect(normalizeStyleForProvider('maplibre-gl', style)).toBe(style)
-  })
-
-  it('falls back to OpenFreeMap for MapLibre styles outside the CSP allowlist', () => {
-    expect(normalizeStyleForProvider('maplibre-gl', 'https://demotiles.maplibre.org/style.json')).toBe(
-      OPENFREEMAP_DEFAULT_STYLE,
-    )
-    expect(normalizeStyleForProvider('maplibre-gl', MAPBOX_DEFAULT_STYLE)).toBe(OPENFREEMAP_DEFAULT_STYLE)
-  })
-
-  it('leaves Mapbox styles unchanged for Mapbox GL', () => {
-    expect(normalizeStyleForProvider('mapbox-gl', MAPBOX_DEFAULT_STYLE)).toBe(MAPBOX_DEFAULT_STYLE)
-  })
-
-  it('matches the OpenFreeMap CSP host', () => {
-    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org/styles/liberty')).toBe(true)
-    expect(isOpenFreeMapStyle('https://demotiles.maplibre.org/style.json')).toBe(false)
-  })
-
-  it('rejects host/userinfo spoofing and http downgrade', () => {
-    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org.evil.com/styles/x')).toBe(false)
-    expect(isOpenFreeMapStyle('https://evil.com/@tiles.openfreemap.org/styles/x')).toBe(false)
-    expect(isOpenFreeMapStyle('http://tiles.openfreemap.org/styles/liberty')).toBe(false)
-    expect(isOpenFreeMapStyle('  https://tiles.openfreemap.org/styles/liberty  ')).toBe(true)
-  })
-
-  it('falls back to provider defaults for empty/whitespace styles', () => {
-    expect(normalizeStyleForProvider('maplibre-gl', '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
-    expect(normalizeStyleForProvider('maplibre-gl', '   ')).toBe(OPENFREEMAP_DEFAULT_STYLE)
-    expect(normalizeStyleForProvider('mapbox-gl', '')).toBe(MAPBOX_DEFAULT_STYLE)
-    expect(normalizeStyleForProvider('mapbox-gl', null)).toBe(MAPBOX_DEFAULT_STYLE)
-  })
-
-  it('styleForActiveProvider reads each provider\'s own style slot', () => {
-    const mb = 'mapbox://styles/me/custom'
-    const ofm = 'https://tiles.openfreemap.org/styles/bright'
-    expect(styleForActiveProvider('mapbox-gl', mb, ofm)).toBe(mb)
-    expect(styleForActiveProvider('maplibre-gl', mb, ofm)).toBe(ofm)
-    // An empty MapLibre slot falls back to the OpenFreeMap default, leaving mapbox untouched.
-    expect(styleForActiveProvider('maplibre-gl', mb, '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
-  })
-
-  it('basemapLanguage maps TREK UI codes to basemap label codes (#1299)', () => {
-    // Pass-through for plain ISO 639-1 codes.
-    expect(basemapLanguage('en')).toBe('en')
-    expect(basemapLanguage('de')).toBe('de')
-    expect(basemapLanguage('fr')).toBe('fr')
-    // TREK-specific overrides.
-    expect(basemapLanguage('br')).toBe('pt')
-    expect(basemapLanguage('gr')).toBe('el')
-    expect(basemapLanguage('zh')).toBe('zh-Hans')
-    expect(basemapLanguage('zhTw')).toBe('zh-Hant')
-    expect(basemapLanguage('zh-TW')).toBe('zh-Hant')
-    // Falls back to English when unset.
-    expect(basemapLanguage(undefined)).toBe('en')
-    expect(basemapLanguage('')).toBe('en')
-  })
-})

client/src/components/Map/glProviders.ts

@@ -1,87 +0,0 @@
-export type GlMapProvider = 'mapbox-gl' | 'maplibre-gl'
-
-export interface GlStylePreset {
-  name: string
-  url: string
-  tags?: string[]
-}
-
-export const MAPBOX_DEFAULT_STYLE = 'mapbox://styles/mapbox/standard'
-export const OPENFREEMAP_DEFAULT_STYLE = 'https://tiles.openfreemap.org/styles/liberty'
-
-export const MAPBOX_STYLE_PRESETS: GlStylePreset[] = [
-  { name: 'Mapbox Standard', url: MAPBOX_DEFAULT_STYLE, tags: ['3D', 'Apple-like'] },
-  { name: 'Standard Satellite', url: 'mapbox://styles/mapbox/standard-satellite', tags: ['3D', 'Satellite'] },
-  { name: 'Streets', url: 'mapbox://styles/mapbox/streets-v12', tags: ['3D', 'Classic'] },
-  { name: 'Outdoors', url: 'mapbox://styles/mapbox/outdoors-v12', tags: ['3D', 'Terrain'] },
-  { name: 'Light', url: 'mapbox://styles/mapbox/light-v11', tags: ['3D', 'Minimal'] },
-  { name: 'Dark', url: 'mapbox://styles/mapbox/dark-v11', tags: ['3D', 'Dark'] },
-  { name: 'Satellite', url: 'mapbox://styles/mapbox/satellite-v9', tags: ['3D', 'Satellite'] },
-  { name: 'Satellite Streets', url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
-  { name: 'Navigation Day', url: 'mapbox://styles/mapbox/navigation-day-v1', tags: ['3D', 'Apple-like'] },
-  { name: 'Navigation Night', url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
-]
-
-export const OPENFREEMAP_STYLE_PRESETS: GlStylePreset[] = [
-  { name: 'OpenFreeMap Liberty', url: OPENFREEMAP_DEFAULT_STYLE, tags: ['OpenFreeMap', '2D'] },
-  { name: 'OpenFreeMap Bright', url: 'https://tiles.openfreemap.org/styles/bright', tags: ['OpenFreeMap', 'Classic'] },
-  { name: 'OpenFreeMap Positron', url: 'https://tiles.openfreemap.org/styles/positron', tags: ['OpenFreeMap', 'Minimal'] },
-]
-
-export function getStylePresets(provider: GlMapProvider): GlStylePreset[] {
-  return provider === 'maplibre-gl' ? OPENFREEMAP_STYLE_PRESETS : MAPBOX_STYLE_PRESETS
-}
-
-export function defaultStyleForProvider(provider: GlMapProvider): string {
-  return provider === 'maplibre-gl' ? OPENFREEMAP_DEFAULT_STYLE : MAPBOX_DEFAULT_STYLE
-}
-
-export function isOpenFreeMapStyle(style?: string | null): boolean {
-  return (style || '').trim().startsWith('https://tiles.openfreemap.org/')
-}
-
-export function normalizeStyleForProvider(provider: GlMapProvider, style?: string | null): string {
-  const trimmed = (style || '').trim()
-  if (!trimmed) return defaultStyleForProvider(provider)
-  if (provider === 'maplibre-gl') {
-    return isOpenFreeMapStyle(trimmed) ? trimmed : OPENFREEMAP_DEFAULT_STYLE
-  }
-  return trimmed
-}
-
-/** The settings key that holds the style for a given GL provider. */
-export function styleSettingKey(provider: GlMapProvider): 'mapbox_style' | 'maplibre_style' {
-  return provider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
-}
-
-/**
- * Each GL provider keeps its style in its own slot (mapbox_style / maplibre_style), so
- * switching providers never overwrites the other one's custom style. Picks and normalizes
- * the style for the active provider.
- */
-export function styleForActiveProvider(
-  provider: GlMapProvider,
-  mapboxStyle?: string | null,
-  maplibreStyle?: string | null,
-): string {
-  return normalizeStyleForProvider(provider, provider === 'maplibre-gl' ? maplibreStyle : mapboxStyle)
-}
-
-// A few TREK UI language codes differ from what the GL basemap expects for its labels.
-const BASEMAP_LANG_OVERRIDES: Record<string, string> = {
-  br: 'pt',          // TREK 'br' = Brazilian Portuguese
-  gr: 'el',          // TREK 'gr' = Greek
-  zh: 'zh-Hans',
-  zhTw: 'zh-Hant',
-  'zh-TW': 'zh-Hant',
-}
-
-/**
- * Maps a TREK UI language code to the label language the GL basemap expects. Used to pin
- * Mapbox Standard's basemap labels to the user's language so they don't fall back to the
- * browser/OS locale and stack multiple scripts per place (#1299).
- */
-export function basemapLanguage(uiLang: string | undefined): string {
-  const code = (uiLang || 'en').trim()
-  return BASEMAP_LANG_OVERRIDES[code] ?? code
-}

client/src/components/Map/locationMarkerMapbox.ts

@@ -1,13 +1,6 @@
-import type mapboxgl from 'mapbox-gl'
+import mapboxgl from 'mapbox-gl'
 import type { GeoPosition } from '../../hooks/useGeolocation'
 
-type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => {
-  setLngLat: (lngLat: mapboxgl.LngLatLike) => { addTo: (map: mapboxgl.Map) => unknown }
-  addTo: (map: mapboxgl.Map) => unknown
-  remove: () => void
-  getElement: () => HTMLElement
-}
-
 // Build the DOM element that backs the mapbox Marker. We animate the
 // heading cone via a CSS rotation so the DOM stays stable across updates
 // and mapbox doesn't get confused about which element to position.
@@ -73,10 +66,10 @@ export interface LocationMarkerHandle {
 // mapbox map. Returns a handle the caller uses to push position updates
 // and clean up. Keeps its own DOM element and GeoJSON source so it can
 // coexist with the regular trip markers.
-export function attachLocationMarker(map: mapboxgl.Map, MarkerCtor: MarkerConstructor): LocationMarkerHandle {
+export function attachLocationMarker(map: mapboxgl.Map): LocationMarkerHandle {
   ensurePulseStyle()
   const { root, cone } = buildLocationEl()
-  const marker = new MarkerCtor({ element: root, anchor: 'center' })
+  const marker = new mapboxgl.Marker({ element: root, anchor: 'center' })
 
   const ensureAccuracyLayer = () => {
     if (map.getSource('trek-location-accuracy')) return