Fix a batch of reported bugs (#1145)

* fix(maps): fall back to OSM/Wikipedia for place photos and normalize non-standard language codes (#1137)

* fix(auth): refuse password reset for OIDC/SSO-linked accounts (#1129)

* fix(docker): ship server/assets (airports + atlas geo) in the runtime image (#1133, #1119)

* fix(unraid): point the template at a PNG icon Unraid can render (#1073)

* fix(offline): serve cached file blobs when offline or on network failure (#1046, #1069)

* fix(map): centre the selected pin in the visible map area above the bottom panel (#1125)

* fix(pdf): render persisted place-photo proxy URLs as images (#1130)

* fix(planner): show the selected place category in the edit form (#1134)

* fix(dashboard): collapse list-view trip cards to a compact row on mobile (#1132)

.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

.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
@@ -46,18 +39,27 @@ COPY package.json package-lock.json ./
 COPY shared/package.json ./shared/
 COPY server/package.json ./server/
 
+# better-sqlite3 native addon requires build tools (purged after compile).
+# kitinerary-extractor for booking-confirmation import:
+#   amd64 — static binary from KDE CDN (glibc 2.17+; wget stays for healthcheck)
+#   arm64 — apt package (KDE publishes no arm64 static binary)
 RUN apt-get update && \
-    apt-get install -y --no-install-recommends tzdata dumb-init wget ca-certificates python3 build-essential \
-    libkitinerary-bin && \
+    apt-get install -y --no-install-recommends tzdata dumb-init gosu wget ca-certificates python3 build-essential && \
     npm ci --workspace=server --omit=dev && \
-    ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
+    ARCH=$(dpkg --print-architecture) && \
+    if [ "$ARCH" = "amd64" ]; then \
+        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.2.tgz && \
+        echo "ba5cfb4a2353157c8f54cbeaea0097c5bf2c3a810e0342f63d6e524826176628 /tmp/ki.tgz" | sha256sum -c && \
+        tar -xz -C /usr/local -f /tmp/ki.tgz bin/kitinerary-extractor share/locale && \
+        rm /tmp/ki.tgz; \
+    else \
+        apt-get install -y --no-install-recommends libkitinerary-bin && \
+        ln -sf "$(find /usr/lib -name kitinerary-extractor -type f | head -1)" /usr/local/bin/kitinerary-extractor; \
+    fi && \
     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
@@ -73,12 +75,6 @@ COPY --from=server-builder /app/server/dist ./server/dist
 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 +95,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 gosu node node --require tsconfig-paths/register dist/index.js"]

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
@@ -91,7 +90,7 @@ 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
+- **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** | | |

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,7 +13,7 @@
     <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" />

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.1.3",
+  "version": "3.0.22",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,8 +17,6 @@
     "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\"",
@@ -36,9 +34,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 +58,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 +80,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,
@@ -43,10 +41,9 @@ import {
   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 +100,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 +174,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')
@@ -335,16 +327,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 +341,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 +365,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,10 +392,6 @@ 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),
@@ -460,41 +440,6 @@ export const adminApi = {
   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 +486,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 +522,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 +557,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 = {
@@ -656,7 +575,6 @@ export const budgetApi = {
   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),
   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 +603,17 @@ 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> => {
+  importBookingPreview: (tripId: number | string, files: File[]): 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)
+    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).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),
+  features: (): Promise<{ bookingImport: boolean }> => apiClient.get('/health/features').then(r => r.data),
 }
 
 export const weatherApi = {
@@ -722,17 +626,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 +732,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

@@ -32,32 +32,8 @@ export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {
 
 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. */
+/** Map any stored category (incl. legacy 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
+  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
+  return 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

@@ -14,8 +14,8 @@ export function ChatMessages(props: any) {
       {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' }}>
           <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, fontFamily: 'var(--font-subtext)' }}>{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.tsx

@@ -243,7 +243,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 +263,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 +277,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 +292,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 +306,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)',
@@ -334,10 +334,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>
@@ -397,10 +397,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 +422,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 +449,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>
                   )
                 })}

client/src/components/Collab/CollabNotesCard.tsx

@@ -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

@@ -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.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, Bus, Sailboat, Bike, CarTaxiFront, Route } 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
 }

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}>
       {/* 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

@@ -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);
@@ -114,24 +108,20 @@ function ensureJourneyPopupStyle() {
       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;
@@ -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,12 @@ 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`) }
+    // On the Costs tab the "+" adds an expense; otherwise it adds a place.
+    const tripTab = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem(`trip-tab-${inTrip.params.id}`) : null
+    if (tripTab === 'finanzplan') {
+      return { label: t('costs.addExpense'), run: () => navigate(`/trips/${inTrip.params.id}?create=expense`) }
+    }
+    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

@@ -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']
@@ -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
@@ -212,27 +173,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 +198,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 +367,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 +410,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 +516,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 +539,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 +583,6 @@ export const MapView = memo(function MapView({
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
       />
-
-      {poiMarkers}
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}

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 {
@@ -96,8 +85,8 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   }
 
   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,7 +551,7 @@ 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
@@ -672,7 +559,7 @@ export function MapViewGL({
         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 +582,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 +598,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 +614,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

@@ -158,7 +158,6 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
-  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -354,29 +353,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 +369,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 +416,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'
@@ -242,46 +241,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, RouteAnchors } 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
@@ -220,7 +197,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 +217,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 +244,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 +259,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

client/src/components/Map/placePopup.ts

@@ -1,68 +0,0 @@
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
-import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
-import type { Place } from '../../types'
-
-// HTML builders for the Mapbox GL hover popup. The Leaflet map already shows a
-// name/category/address card on hover (a cursor-following overlay); Mapbox GL has
-// no equivalent, so these produce the same card as an HTML string for a
-// mapboxgl.Popup. Kept framework-agnostic (plain strings) on purpose.
-
-type PlaceWithCategory = Place & {
-  category_color?: string | null
-  category_icon?: string | null
-  category_name?: string | null
-}
-
-function esc(s: string | null | undefined): string {
-  if (!s) return ''
-  return String(s)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-}
-
-// Render a lucide category icon to an inline SVG string in the given colour.
-function iconSvg(iconName: string | null | undefined, size: number, color: string): string {
-  const Icon = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
-  try {
-    return renderToStaticMarkup(createElement(Icon, { size, color, strokeWidth: 2 }))
-  } catch {
-    return ''
-  }
-}
-
-// Only data: thumbnails and our own photo-proxy URLs are safe to drop straight
-// into an <img src> — everything else is a fetch seed, not a displayable URL.
-function isDisplayablePhoto(url: string | null | undefined): url is string {
-  return !!url && (url.startsWith('data:') || url.startsWith('/api/maps/place-photo/'))
-}
-
-const CARD_OPEN = '<div style="font-family:var(--font-system);max-width:220px;">'
-const NAME_STYLE = 'font-weight:600;font-size:12.5px;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
-const ADDR_STYLE = 'font-size:11px;color:#9ca3af;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
-
-/** Hover-popup card for a planned place: optional photo, name, category row, address. */
-export function buildPlacePopupHtml(place: PlaceWithCategory, photoUrl: string | null): string {
-  const img = isDisplayablePhoto(photoUrl)
-    ? `<div style="width:100%;height:84px;border-radius:8px;overflow:hidden;margin-bottom:6px;background:#f3f4f6;"><img src="${esc(photoUrl)}" style="width:100%;height:100%;object-fit:cover;display:block;" /></div>`
-    : ''
-  const category =
-    place.category_name && place.category_icon
-      ? `<div style="display:flex;align-items:center;gap:4px;margin-top:2px;">${iconSvg(place.category_icon, 11, place.category_color || '#6b7280')}<span style="font-size:11px;color:#6b7280;">${esc(place.category_name)}</span></div>`
-      : ''
-  const address = place.address ? `<div style="${ADDR_STYLE}">${esc(place.address)}</div>` : ''
-  return `${CARD_OPEN}${img}<div style="${NAME_STYLE}">${esc(place.name)}</div>${category}${address}</div>`
-}
-
-/** Hover-popup card for an OSM "explore" POI: category-coloured icon, name, address. */
-export function buildPoiPopupHtml(poi: Poi): string {
-  const cat = POI_CATEGORY_BY_KEY[poi.category]
-  const color = cat?.color || '#6b7280'
-  const icon = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 12, color, strokeWidth: 2 })) : ''
-  const head = `<div style="display:flex;align-items:center;gap:5px;"><span style="flex-shrink:0;display:inline-flex;line-height:0;">${icon}</span><span style="${NAME_STYLE}">${esc(poi.name)}</span></div>`
-  const address = poi.address ? `<div style="${ADDR_STYLE}">${esc(poi.address)}</div>` : ''
-  return `${CARD_OPEN}${head}${address}</div>`
-}

client/src/components/Map/poiCategories.ts

@@ -1,43 +0,0 @@
-import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, type LucideIcon } from 'lucide-react'
-
-// The POI categories shown in the map "explore" pill. The `key` is the contract
-// with the server (CATEGORY_OSM_FILTERS in mapsService.ts) — the OSM tag mapping
-// lives there; label/icon/colour live here. `color` doubles as the active-pill
-// fill AND the marker colour, so the pill and the map agree visually.
-export interface PoiCategory {
-  key: string
-  labelKey: string
-  Icon: LucideIcon
-  color: string
-}
-
-export const POI_CATEGORIES: PoiCategory[] = [
-  { key: 'restaurant', labelKey: 'poi.cat.restaurants', Icon: Utensils, color: '#EF4444' },
-  { key: 'cafe', labelKey: 'poi.cat.cafes', Icon: Coffee, color: '#B45309' },
-  { key: 'bar', labelKey: 'poi.cat.bars', Icon: Wine, color: '#A855F7' },
-  { key: 'hotel', labelKey: 'poi.cat.hotels', Icon: BedDouble, color: '#2563EB' },
-  { key: 'sights', labelKey: 'poi.cat.sights', Icon: Camera, color: '#EC4899' },
-  { key: 'museum', labelKey: 'poi.cat.museums', Icon: Landmark, color: '#6366F1' },
-  { key: 'nature', labelKey: 'poi.cat.nature', Icon: Trees, color: '#16A34A' },
-  { key: 'activity', labelKey: 'poi.cat.activities', Icon: Ticket, color: '#F59E0B' },
-]
-
-export const POI_CATEGORY_BY_KEY: Record<string, PoiCategory> = Object.fromEntries(
-  POI_CATEGORIES.map(c => [c.key, c]),
-)
-
-// One POI result from /api/maps/pois (mirror of the server's OverpassPoi).
-export interface Poi {
-  osm_id: string
-  name: string
-  lat: number
-  lng: number
-  category: string
-  poi_type: string
-  address: string | null
-  website: string | null
-  phone: string | null
-  opening_hours: string | null
-  cuisine: string | null
-  source: 'openstreetmap'
-}

client/src/components/Map/reservationsMapbox.ts

@@ -8,7 +8,7 @@
 
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import type mapboxgl from 'mapbox-gl'
+import mapboxgl from 'mapbox-gl'
 import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
 import { escapeHtml } from '@trek/shared'
 import type { Reservation, ReservationEndpoint } from '../../types'
@@ -126,7 +126,6 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
-  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -138,38 +137,23 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
   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.
-    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 duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-    const distance = `${Math.round(distanceKm)} km`
-    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, mainLabel, subLabel })
+    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
   }
   return out
 }
@@ -220,29 +204,18 @@ export interface ReservationOverlayOptions {
   onEndpointClick?: (reservationId: number) => void
 }
 
-type GlMarker = {
-  setLngLat: (lngLat: mapboxgl.LngLatLike) => GlMarker
-  addTo: (map: mapboxgl.Map) => GlMarker
-  remove: () => void
-  getElement: () => HTMLElement
-}
-
-type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => GlMarker
-
 export class ReservationMapboxOverlay {
   private map: mapboxgl.Map
   private items: TransportItem[] = []
   private opts: ReservationOverlayOptions
-  private MarkerCtor: MarkerConstructor
-  private endpointMarkers: GlMarker[] = []
-  private statsMarkers: { marker: GlMarker; arc: [number, number][] }[] = []
+  private endpointMarkers: mapboxgl.Marker[] = []
+  private statsMarkers: { marker: mapboxgl.Marker; arc: [number, number][] }[] = []
   private rerender: () => void
   private destroyed = false
 
-  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions, MarkerCtor: MarkerConstructor) {
+  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions) {
     this.map = map
     this.opts = opts
-    this.MarkerCtor = MarkerCtor
     this.rerender = () => { if (!this.destroyed) this.render() }
     this.setupLayer()
     map.on('zoomend', this.rerender)
@@ -348,7 +321,7 @@ export class ReservationMapboxOverlay {
     if (show) {
       for (const item of visibleItems) {
         const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
-        for (const ep of item.waypoints) {
+        for (const ep of [item.from, item.to]) {
           const label = showLabel ? (ep.code || cleanName(ep.name)) : null
           const el = document.createElement('div')
           el.innerHTML = endpointMarkerHtml(item.type, label)
@@ -361,7 +334,7 @@ export class ReservationMapboxOverlay {
               this.opts.onEndpointClick?.(item.res.id)
             })
           }
-          const marker = new this.MarkerCtor({ element: node, anchor: 'center' })
+          const marker = new mapboxgl.Marker({ element: node, anchor: 'center' })
             .setLngLat([ep.lng, ep.lat])
             .addTo(map)
           this.endpointMarkers.push(marker)
@@ -369,10 +342,29 @@ export class ReservationMapboxOverlay {
       }
     }
 
-    // Stats badge removed — the floating route/duration label on the arc is no
-    // longer drawn; only the connection line and the airport markers remain.
+    // ── stats label (flights only) ──────────────────────────────────
     this.statsMarkers.forEach(s => s.marker.remove())
     this.statsMarkers = []
+    if (show && this.opts.showStats) {
+      for (const item of visibleItems) {
+        if (item.type !== 'flight') continue
+        if (!labelVisibleIds.has(item.res.id)) continue
+        if (!item.mainLabel && !item.subLabel) continue
+        const arc = item.primaryArc
+        if (arc.length < 2) continue
+        const mid = arc[Math.floor(arc.length / 2)]!
+        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
+        const el = document.createElement('div')
+        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
+        el.innerHTML = html
+        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
+          .setLngLat([mid[1], mid[0]])
+          .addTo(map)
+        this.statsMarkers.push({ marker, arc })
+      }
+    }
+    // Prime rotation once so labels don't flash horizontal on first paint.
+    this.updateStatsRotation()
   }
 
   // Match the Leaflet overlay's "rotate the label along the arc" look.

client/src/components/Map/usePoiExplore.ts

@@ -1,115 +0,0 @@
-import { useState, useRef, useCallback, useMemo } from 'react'
-import { mapsApi } from '../../api/client'
-import type { Poi } from './poiCategories'
-
-export interface Bbox { south: number; west: number; north: number; east: number }
-
-// A request we cancelled on purpose (newer search superseded it) — not a failure.
-function isAbortError(err: unknown): boolean {
-  const e = err as { name?: string; code?: string } | null
-  return e?.name === 'CanceledError' || e?.code === 'ERR_CANCELED' || e?.name === 'AbortError'
-}
-
-/**
- * State for the map POI "explore" pill. Toggling a category fetches its OSM POIs
- * for the current viewport; panning/zooming does NOT auto-refetch — it just marks
- * the results stale (`moved`) so the pill can offer "search this area". This keeps
- * Overpass load (and visual churn) down.
- */
-export function usePoiExplore() {
-  const [active, setActive] = useState<Set<string>>(() => new Set())
-  const [byCat, setByCat] = useState<Record<string, Poi[]>>({})
-  const [loadingKeys, setLoadingKeys] = useState<Set<string>>(() => new Set())
-  const [moved, setMoved] = useState(false)
-  // Categories whose last fetch genuinely failed (all Overpass mirrors down), so
-  // the pill can offer a retry instead of looking like "no places here".
-  const [errorKeys, setErrorKeys] = useState<Set<string>>(() => new Set())
-
-  const bboxRef = useRef<Bbox | null>(null)
-  // activeRef always mirrors the latest active set so async callbacks (fetch
-  // completions) can check whether a category is still wanted.
-  const activeRef = useRef(active)
-  activeRef.current = active
-  // One in-flight AbortController per category, so re-toggling / re-searching
-  // cancels the previous (possibly slow) Overpass request instead of racing it.
-  const abortRef = useRef<Record<string, AbortController>>({})
-
-  const setLoading = useCallback((key: string, on: boolean) => setLoadingKeys(prev => {
-    const next = new Set(prev)
-    if (on) next.add(key); else next.delete(key)
-    return next
-  }), [])
-
-  const setError = useCallback((key: string, on: boolean) => setErrorKeys(prev => {
-    if (on === prev.has(key)) return prev
-    const next = new Set(prev)
-    if (on) next.add(key); else next.delete(key)
-    return next
-  }), [])
-
-  const fetchCat = useCallback(async (key: string, bbox: Bbox) => {
-    abortRef.current[key]?.abort()
-    const ctrl = new AbortController()
-    abortRef.current[key] = ctrl
-    setLoading(key, true)
-    setError(key, false)
-    try {
-      const res = await mapsApi.pois(key, bbox, ctrl.signal)
-      // Drop the result if the user toggled this category off while the (slow)
-      // Overpass request was in flight — otherwise stale results re-appear.
-      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: res.pois } : prev))
-    } catch (err) {
-      // A superseded request was aborted on purpose — leave its state untouched
-      // so the newer request owns the spinner and results.
-      if (isAbortError(err)) return
-      // A real failure (every Overpass mirror down/timed out): surface it instead
-      // of a silent empty so the user can retry rather than assume "no places".
-      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: [] } : prev))
-      if (activeRef.current.has(key)) setError(key, true)
-    } finally {
-      // Only the latest controller for this key clears the spinner; a superseded
-      // one must not, or it would hide the newer request's in-flight state.
-      if (abortRef.current[key] === ctrl) {
-        setLoading(key, false)
-        delete abortRef.current[key]
-      }
-    }
-  }, [setLoading, setError])
-
-  const onViewportChange = useCallback((bbox: Bbox) => {
-    bboxRef.current = bbox
-    if (activeRef.current.size > 0) setMoved(true)
-  }, [])
-
-  // Single-select: clicking a category switches to it (dropping the previous one
-  // and its markers immediately) and fetches it for the current viewport; clicking
-  // the already-active category turns it off.
-  const toggle = useCallback((key: string) => {
-    const isOnlyActive = activeRef.current.has(key) && activeRef.current.size === 1
-    setMoved(false)
-    setErrorKeys(new Set())
-    // Switching to another category (or turning off) — cancel any in-flight
-    // fetches so their results can't land after the selection changed.
-    Object.values(abortRef.current).forEach(c => c.abort())
-    abortRef.current = {}
-    if (isOnlyActive) {
-      setActive(new Set())
-      setByCat({})
-      return
-    }
-    setActive(new Set([key]))
-    setByCat({})
-    if (bboxRef.current) fetchCat(key, bboxRef.current)
-  }, [fetchCat])
-
-  const searchArea = useCallback(() => {
-    const bbox = bboxRef.current
-    if (!bbox) return
-    setMoved(false)
-    activeRef.current.forEach(key => fetchCat(key, bbox))
-  }, [fetchCat])
-
-  const pois = useMemo(() => Object.values(byCat).flat(), [byCat])
-
-  return { active, pois, loadingKeys, errorKeys, moved, toggle, searchArea, onViewportChange }
-}

client/src/components/PDF/TripPDF.test.ts

@@ -84,22 +84,6 @@ const transportReservation = {
   metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),
 } as any
 
-const multiLegFlight = {
-  id: 401,
-  title: 'Flight to Tokyo',
-  type: 'flight',
-  day_id: 10,
-  reservation_time: '2025-06-01T08:00:00',
-  confirmation_number: 'XYZ789',
-  metadata: JSON.stringify({
-    legs: [
-      { from: 'FRA', to: 'BER', airline: 'Lufthansa', flight_number: 'LH1' },
-      { from: 'BER', to: 'HND', airline: 'Lufthansa', flight_number: 'LH2' },
-    ],
-    departure_airport: 'FRA', arrival_airport: 'HND', airline: 'Lufthansa', flight_number: 'LH1',
-  }),
-} as any
-
 const richArgs = {
   trip: { id: 10, title: 'Italy Trip', description: 'Summer adventure', cover_image: '/uploads/cover.jpg' } as any,
   days: [dayWithPlaces],
@@ -212,16 +196,6 @@ describe('downloadTripPDF', () => {
     const iframe = getIframe()
     expect(iframe!.srcdoc).toContain('Flight to Rome')
     expect(iframe!.srcdoc).toContain('ABC123')
-    // Single-leg flight keeps its full-route subtitle.
-    expect(iframe!.srcdoc).toContain('Air Italia · AI123 · CDG → FCO')
-  })
-
-  it('FE-COMP-TRIPPDF-013b: renders every flight number for a multi-leg flight', async () => {
-    await downloadTripPDF({ ...richArgs, reservations: [multiLegFlight] })
-    const iframe = getIframe()
-    // One subtitle line per leg, each with its own flight number and segment route.
-    expect(iframe!.srcdoc).toContain('Lufthansa · LH1 · FRA → BER')
-    expect(iframe!.srcdoc).toContain('Lufthansa · LH2 · BER → HND')
   })
 
   it('FE-COMP-TRIPPDF-014: renders cover image when trip has cover_image', async () => {
@@ -323,28 +297,6 @@ describe('downloadTripPDF', () => {
     expect(photoCalled).toBe(true)
   })
 
-  it('FE-COMP-TRIPPDF-019b: fetches photos for OSM places via osm_id recovered from the places pool (#1130)', async () => {
-    let fetchedId: string | null = null
-    server.use(
-      http.get('/api/maps/place-photo/:placeId', ({ params }) => {
-        fetchedId = params.placeId as string
-        return HttpResponse.json({ photoUrl: 'https://example.com/osm.jpg' })
-      }),
-    )
-    // The assignment projection drops osm_id; the full place in `places` carries it.
-    const osmPlace = { ...placeWithDetails, id: 101, image_url: null, google_place_id: null, osm_id: 'node/240109189', lat: 41.89, lng: 12.49 }
-    const args = {
-      ...richArgs,
-      places: [osmPlace],
-      assignments: {
-        '10': [{ ...assignmentForDay, id: 201, place_id: 101, place: { ...placeWithDetails, id: 101, image_url: null, google_place_id: null } }],
-      } as any,
-    }
-    await downloadTripPDF(args)
-    // osm_id is used as the photo key (not the coords fallback), proving the pool lookup works.
-    expect(fetchedId).toBe('node/240109189')
-  })
-
   it('FE-COMP-TRIPPDF-020: renders empty day message when no items assigned', async () => {
     const args = {
       ...minimalArgs,