diff --git a/CLAUDE.md b/CLAUDE.md
index d988269c..5531a3d6 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -82,7 +82,7 @@ server (`docs/architecture.md`, "The language bar").
   `/newsletter/subscribe` with `locale` in the body (`/discount/preview` takes
   `{code}` only, `GET /discount/region` nothing), every call with
   `credentials: 'omit'`, so no platform cookie lands on a public page.
-- Light theme by default; `localStorage.theme` holds an explicit choice, shared
+- The theme follows the OS by default; `localStorage.theme` holds an explicit choice, shared
   with the account app on the same origin.
 
 ## Conventions
diff --git a/docs/rebuild/design/architecture.md b/docs/rebuild/design/architecture.md
index 6771400c..582cba6a 100644
--- a/docs/rebuild/design/architecture.md
+++ b/docs/rebuild/design/architecture.md
@@ -26,7 +26,7 @@ both repos under the contract in §3.
 | SEO | A single PHP `PageRegistry` drives the canonical URL, the robots value, hreflang (with `x-default` set to English), `og:locale`, the sitemap with alternates, the OG card choice and the language switcher. Each page lists the locales it **renders** in and the locales it is **indexed** in, which can differ (`/vi/blog` renders but is `noindex, follow`). React renders the head from one shared `seo` prop. JSON-LD is built per page type in TypeScript with `inLanguage`. There is no FAQPage, HowTo or rating markup. |
 | Errors | `Inertia::handleExceptionsUsing` renders a branded `Error` page for 404 and 410 (and 500/503 when debug is off) in the locale taken from the path. Static Blade fallbacks cover 500/503. One global middleware normalises trailing slashes and `/index.php`, and applies `resources/data/redirects.json` (301 and 410) in a single hop that keeps the query string. |
 | Assets | One manifest per owning app (`resources/data/assets.json` here) feeds an `<AssetSlot id>` component and carries every handoff field the spec requires. Placeholder or supplied mode depends only on the manifest's `status`. A placeholder never makes an `<img>` request, and in production it renders nothing. `docs/visual-assets.md` is generated from the manifest plus per-family prose fragments. |
-| Theme | One shared head partial, as specified in design-system §2.8. The default is light, storage access is guarded, the script sets `color-scheme`, `data-theme-choice` and a single `theme-color` (`#ffffff` / `#121212`), and the stored values are `light`, `dark` and `system`. A shared `ThemeControl` offers Light, Dark and System. Images switch on the `.dark` class, never on `prefers-color-scheme`. |
+| Theme | One shared head partial, as specified in design-system §2.8. The default is `system` (it was light until 2026-10-10), storage access is guarded, the script sets `color-scheme`, `data-theme-choice` and a single `theme-color` (`#ffffff` / `#121212`), and the stored values are `light`, `dark` and `system`. A shared `ThemeControl` offers Light, Dark and System. Images switch on the `.dark` class, never on `prefers-color-scheme`. |
 | Third parties | Crisp loads only on click. The Polar/LemonSqueezy SDK loads lazily at checkout intent instead of on every page. The Product Hunt hotlink goes. GA Consent Mode stays as it is. |
 | Download | Server: GitHub `releases/latest`, falling back to the appcast, with a fresh cache, a last-good copy and a negative cache. Client: nothing starts automatically. iPhone and iPad get the App Store card. A Chromium `architecture` hint only highlights a button. |
 | Platform locale | The account app takes `locale` from the query, a form field or the JSON body. Signed URLs ignore it, and platform URLs stay unprefixed (§2). |
@@ -945,7 +945,7 @@ design-system §2.8, verbatim:
 <meta name="theme-color" content="#ffffff">
 <script>
 (function () {
-  var choice = 'light';                                         // light by default
+  var choice = 'system';                                        // the OS decides by default
   try {
     var t = localStorage.getItem('theme');
     if (t === 'dark' || t === 'system' || t === 'light') { choice = t; }
diff --git a/docs/rebuild/design/design-system.md b/docs/rebuild/design/design-system.md
index ec4ee860..579b092e 100644
--- a/docs/rebuild/design/design-system.md
+++ b/docs/rebuild/design/design-system.md
@@ -36,7 +36,7 @@ The page sketches in §8 add layout to the sitemap's structure. Where a sketch a
 |---|---|
 | Grounds | Achromatic neutrals. Light: white page, `#f7f7f7` bands. Dark: `#121212` page, lighter surfaces for elevation |
 | Accent | One brand hue, 55. The fill `#f68001` is unchanged. Every derived brand token returns to hue 55; the old text accent had drifted to 45 in light and 58 in dark |
-| Theme | Light by default. Light / Dark / System control in both apps. Shared `localStorage.theme`. Driven by the theme class, never by the OS media query, and painted with no flash |
+| Theme | System by default (decided 2026-10-10; it was light). Light / Dark / System control in both apps. Shared `localStorage.theme`. Driven by the theme class, which the head script sets from the choice or the OS, and painted with no flash |
 | Type | Inter Variable for everything except code and identifiers, which use IBM Plex Mono 400. Running copy is 16px. Tables and cards use 14px. Nothing is smaller than 12px. Vietnamese headings get line-height 1.3. Labels are never uppercase or tracked |
 | Width | Content column 1216px (Container 1280 minus 32px gutters), reading column 704px, narrow 576px. Gutters 16 / 24 / 32 |
 | Rhythm | Section spacing 64 / 80 / 96px, replacing the old stacked spacers of up to 184px between sections. The frame's join sits in the middle of it (§4.3) |
@@ -69,7 +69,7 @@ The page sketches in §8 add layout to the sitemap's structure. Where a sketch a
 - **Neutrals carry no hue** (chroma 0). Screenshots of a Mac app read true on a neutral ground, while a warm-tinted page would colour-cast the captures. The orange accent then has no competition.
 - **Brand hue 55, unchanged.** Only lightness and chroma vary between brand tokens, and every one sits inside sRGB (checked; Appendix A). The light text accent moves from `oklch(0.52 0.148 45)` (`#ab4501`) to `oklch(0.52 0.125 55)` (`#9e5209`), and the dark one from hue 58 to 55. That brings them back to the brand hue, as spec §0 asks.
 - **Tokens are opaque.** The old `--rule` was an alpha value, so its contrast depended on whatever sat behind it. Opaque tokens have one defined ratio, and the contrast test can parse them.
-- **Light is the default.** The `.dark` class (set before paint, §2.8) swaps every token.
+- **The system decides by default.** The `.dark` class (set before paint, §2.8) swaps every token.
 
 ### 2.2 Tokens
 
@@ -253,7 +253,7 @@ Every row of the §2.3 table becomes an assertion. Add a gamut assertion: no tok
 
 ### 2.8 Theme mechanics (identical in both apps)
 
-**Storage.** `localStorage.theme` holds `'light'`, `'dark'` or `'system'`. If the key is absent, unreadable, or holds any other value, the page is light. The key is shared, because both apps live on `tablepro.app`.
+**Storage.** `localStorage.theme` holds `'light'`, `'dark'` or `'system'`. If the key is absent, unreadable, or holds any other value, the choice is `system` and the page follows the OS (decided 2026-10-10: every surveyed site with a theme control follows the OS until the reader picks, as NN/g and web.dev advise). The key is shared, because both apps live on `tablepro.app`.
 
 **Head script.** It runs before CSS paints and replaces the inline theme script in each app's `app.blade.php`. This script is the whole content of the shared partial `resources/views/partials/head-theme.blade.php` (architecture §1.10 copies it verbatim; a byte-identical file under architecture §3). It knows nothing about assets: a supplied LCP image is preloaded by a separate block in `app.blade.php` (architecture §1.9), so the partial stays identical in the license repo.
 
@@ -261,7 +261,7 @@ Every row of the §2.3 table becomes an assertion. Add a gamut assertion: no tok
 <meta name="theme-color" content="#ffffff">
 <script>
 (function () {
-  var choice = 'light';
+  var choice = 'system';
   try {
     var t = localStorage.getItem('theme');
     if (t === 'dark' || t === 'system' || t === 'light') { choice = t; }
@@ -802,7 +802,7 @@ Repo key:
 #### 5.3.15 LanguageSwitcher
 
 - **Header:**
-  - A `quiet` `sm` button: globe icon + the *current* endonym ("English" / "Tiếng Việt"), accessible name "Language: English" / "Ngôn ngữ: Tiếng Việt" (it contains the visible text, WCAG 2.5.3).
+  - A 40 × 40 globe icon button, named and titled "Language: English" / "Ngôn ngữ: Tiếng Việt" (decided 2026-10-10: the header kept a visible control at the top, as W3C and NN/g ask, at the width of one icon). The footer menu still shows the endonym.
   - It opens a menu (`--raised`, `--shadow-overlay`, 12px radius, 4px padding).
   - Items are `<a href hreflang lang>` links to the **equivalent page**, labelled with endonyms. The current item gets a check and `aria-current="true"`.
   - Keyboard: arrow keys and Escape, and focus returns to the button.
@@ -817,7 +817,7 @@ Repo key:
 
 One shared file, `components/shared/theme-control.tsx` (architecture §1.10 and §3), with three variants. Each app passes its labels as props, so the file stays byte-identical.
 
-- **`variant="menu"` (header):**
+- **`variant="menu"` (the account app's header; the public header has no theme control since 2026-10-10):**
   - A 40 × 40 `quiet` icon button. Its icon reflects the *choice* (sun / moon / monitor), selected by CSS from `[data-theme-choice]`.
   - Accessible name: "Theme: Light" / "Giao diện: Sáng" (Dark / Tối; System / Theo hệ thống).
   - Opens a menu (`--raised`, `--shadow-overlay`, 12px radius) of three `menuitemradio` items with icon and label, `aria-checked` on the current one. Arrow keys move; Escape closes and returns focus to the button.
@@ -834,10 +834,11 @@ One shared file, `components/shared/theme-control.tsx` (architecture §1.10 and
 - Left: the logo (`/images/logo.png` at 28px + "TablePro" at 18/600), linking to `/` or `/vi`.
 - ≥ 1024 (items and order from sitemap §B.1):
   - Nav: **Features ▾** · Databases · Pricing · Docs ↗ · Blog. Features is a `<button aria-expanded>` that opens a disclosure panel (`--raised`, `--shadow-overlay`, 12px radius) listing All features, the seven feature pages (Querying, Data editing, Schema, Import & export, AI & MCP, Connections, Sync & teams) and iPhone & iPad. Escape closes it and returns focus. With a mouse it also opens on hover, 80ms after the pointer rests on the button, and closes 150ms after it leaves the button and the panel; a click on a panel that hover opened pins it open. Touch and pen keep the click (decided 2026-10-06).
-  - Right: LanguageSwitcher, ThemeControl, GitHub (`quiet` `sm`, GitHub's mark and the star count, from 1280px only), Account (`quiet`, a plain `<a>` to `/account?locale={locale}`), **Download** (`primary` `sm`, to `/download`).
-  - GitHub's link is 79px with a count and 96px with the word "GitHub". From 1280 the row has 1216px, and the widest language (French) needs 1169 with the word. Below 1280 the row has no room for it in every language, so it shows only in the menu there.
+  - Right: LanguageSwitcher (a globe), GitHub (`quiet` `sm`, GitHub's mark and the star count), Account (`quiet`, a plain `<a>` to `/account?locale={locale}`), **Download** (`primary` `sm`, to `/download`).
+  - No theme control: the theme follows the system until the reader picks one in the footer or the menu (decided 2026-10-10, after a 40-site survey: every site with a theme control follows the OS by default, and most keep it out of the header).
+  - GitHub's link is 79px with a count and 96px with the word "GitHub".
 - < 1024: logo, Download (`primary` `sm`, in a 44px target), Menu button (44 × 44, `aria-expanded`, `aria-controls`).
-- The desktop row needs more than the 960px a 1024px window gives it in French (1065px), Portuguese (1040), Spanish (1008), German (980) and Italian (965), so those languages switch at 1152px instead (`headerLayout`, `site-links.ts`). `SiteChromeTest` holds the measured widths and fails when a header label grows.
+- The desktop row needs more than the 960px a 1024px window gives it in French (1044px) and Spanish (991), measured with GitHub at its widest, so those languages switch at 1152px instead (`headerLayout`, `site-links.ts`). `SiteChromeTest` holds the measured widths and fails when a header label grows.
 - Internal hrefs go through `LocaleLink`, which is why this component never moves to the license repo (§9).
 - `scroll-padding-top: 80px`, so anchors and focused elements clear the header (WCAG 2.4.11). The banner scrolls away, so it adds nothing.
 
@@ -1894,7 +1895,7 @@ Confirm no mark touches the line above. Also check:
 2. **"Save 33%".** The spec forbids *inventing* savings. This one is arithmetic on published prices (33.1% Starter, 33.3% Team), so it stays, as a computed caption rather than a badge (§2.4). If the saving statement is ever dropped, the caption shows only "Billed once a year".
 3. **Equal pricing emphasis.** All plan purchase buttons are `secondary`, and no card is highlighted. That follows from "no invented 'most popular'" and "do not optimize for aggressive conversion". The homepage still has exactly one primary button per region.
 4. **Sponsors third.** Kept, as a compact strip between Databases and the workflow sections, so the explanation is interrupted as little as possible.
-5. **Light default for OS-dark visitors.** This is a product decision (spec §0). It changes what dark-OS visitors see on first load, which is why the theme control sits in the header rather than only in the footer.
+5. **The theme default.** Light by default (spec §0) is why the theme control once sat in the header: a dark-OS visitor needed a way out on first load. On 2026-10-10 the default became the system's theme and the control moved to the footer and the menu, as on every surveyed site that has one.
 6. **Footer newsletter stats.** The design does not need `/api/newsletter/stats`. Sitemap §B.3 settles it: the footer shows no subscriber count and does not call the endpoint, whose contract stays unchanged.
 7. **Grid lines and a quiet page.** The owner asked for the grid-line look (§4.7) on 2026-10-06. It stays compatible with "the page stays quiet" by being neutral, static and at `--rule` weight, by drawing structure that already exists (the column, the block boundaries, sets of like items) and by leaving prose sections unlined. A frame that needed hatching, graph paper or accent marks to be seen would break §1.1 and §1.4.
 
diff --git a/docs/rebuild/design/positioning.md b/docs/rebuild/design/positioning.md
index 9037c5db..170cd3e0 100644
--- a/docs/rebuild/design/positioning.md
+++ b/docs/rebuild/design/positioning.md
@@ -473,10 +473,10 @@ and §11 win.
 
 ### 10.1 Header and mobile menu
 
-**Desktop** (sitemap §B.1): logo · **Features ▾** · Databases · Pricing · Docs ↗ · Blog · (spacer) · Language ·
-Theme · GitHub · Account · **Download** (button). GitHub is GitHub's mark and the star count ("6.2k"), from 1280px
-only (decided 2026-10-10). It is also linked from the footer's Resources and Community groups and from the homepage
-open-source section.
+**Desktop** (sitemap §B.1): logo · **Features ▾** · Databases · Pricing · Docs ↗ · Blog · (spacer) · Language (a
+globe) · GitHub · Account · **Download** (button). GitHub is GitHub's mark and the star count ("6.2k"). It is also
+linked from the footer's Resources and Community groups and from the homepage open-source section. The theme control is
+in the footer and the mobile menu only (decided 2026-10-10).
 
 | Slot | English | Tiếng Việt | Notes |
 |---|---|---|---|
@@ -485,8 +485,8 @@ open-source section.
 | Pricing | Pricing | Bảng giá | `/pricing` |
 | Docs | Docs ↗ | Tài liệu ↗ | External, English only. VI accessible name "Tài liệu (tiếng Anh)", `hreflang="en"` |
 | Blog | Blog | Blog | The VI listing labels English-only posts "(tiếng Anh)" |
-| Language | {current language name} ▾, then English · Tiếng Việt | same | Accessible name "Language" / "Ngôn ngữ". Endonyms, no flags or codes. Each option links to the equivalent page, with `aria-current` on the active one |
-| Theme | Icon button ▾, then Light · Dark · System | Sáng · Tối · Theo hệ thống | Accessible name "Theme" / "Giao diện". Stored in `localStorage` key `theme`; light when nothing is stored |
+| Language | Globe icon, then English · Tiếng Việt | same | Accessible name "Language: English" / "Ngôn ngữ: Tiếng Việt". Endonyms, no flags or codes. Each option links to the equivalent page, with `aria-current` on the active one |
+| Theme (footer and mobile menu) | Light · Dark · System | Sáng · Tối · Theo hệ thống | Accessible name "Theme" / "Giao diện". Stored in `localStorage` key `theme`; the system's theme when nothing is stored |
 | Account | Account | Tài khoản | `/account?locale={locale}`, unprefixed |
 | Download button | Download | Tải về | `/download` · `/vi/download`; `download_click{location:'header', platform:'mac'}`. The label stays neutral when a platform ships |
 | Skip link | Skip to content | Chuyển đến nội dung chính | |
diff --git a/docs/rebuild/design/sitemap.md b/docs/rebuild/design/sitemap.md
index a2dd66fd..1b284629 100644
--- a/docs/rebuild/design/sitemap.md
+++ b/docs/rebuild/design/sitemap.md
@@ -275,7 +275,7 @@ Not slots, because they are identity assets: the logo, favicon, database vendor
 
 ### B.1 Header (desktop, ≥1024px)
 
-`[Logo → / or /vi]` · **Features ▾** · Databases · Pricing · Docs ↗ · Blog · (spacer) · **Language** · **Theme** · GitHub · Account · **[Download]**
+`[Logo → / or /vi]` · **Features ▾** · Databases · Pricing · Docs ↗ · Blog · (spacer) · **Language** (globe) · GitHub · Account · **[Download]**
 
 | Item | EN | VI | Target | Notes |
 |---|---|---|---|---|
@@ -284,9 +284,8 @@ Not slots, because they are identity assets: the logo, favicon, database vendor
 | Pricing | Pricing | Bảng giá | /pricing | |
 | Docs | Docs ↗ | Tài liệu ↗ | https://docs.tablepro.app | External. On VI the link has `hreflang="en"` and the accessible name "Tài liệu (tiếng Anh)" |
 | Blog | Blog | Blog | /blog or /vi/blog | |
-| Language | current name ▾ | current name ▾ | §B.4 | A disclosure of two `<a>` links, "English" and "Tiếng Việt", with `lang`, `hreflang` and `aria-current`. No flags and no codes |
-| Theme | icon button ▾ | same | Light / Dark / System | Visible labels in the menu: Light, Dark, System (VI: Sáng, Tối, Theo hệ thống). Writes localStorage `theme`; light is the default when nothing is stored |
-| GitHub | [GitHub mark] 6.2k | same | the repository (`facts.json` → `links.github`) | From 1280px only: the row has no room for it below that in every language. Accessible name "GitHub, 6.2k stars" / "GitHub, 6.2k star". The count is GitHub's own style (truncated, never rounded up), from `stars:refresh`; before the first refresh the link reads "GitHub". Same tab, like every external link (decided 2026-10-10) |
+| Language | globe icon | globe icon | §B.4 | Named "Language: English" / "Ngôn ngữ: Tiếng Việt". A disclosure of one `<a>` per language, with `lang`, `hreflang` and `aria-current`. No flags and no codes |
+| GitHub | [GitHub mark] 6.2k | same | the repository (`facts.json` → `links.github`) | Accessible name "GitHub, 6.2k stars" / "GitHub, 6.2k star". The count is GitHub's own style (truncated, never rounded up), from `stars:refresh`; before the first refresh the link reads "GitHub". Same tab, like every external link (decided 2026-10-10) |
 | Account | Account | Tài khoản | `/account?locale={pageLocale}` | A plain `<a>` (cross-app) |
 | Download | Download | Tải về | /download or /vi/download | Primary button; fires `download_click{location:'header', platform:'mac'}`. "Tải về" everywhere, matching Apple's Vietnamese (positioning §2, §4); the `/download` architecture buttons read "Tải bản cho Apple silicon" and "Tải bản cho Intel" |
 
@@ -296,7 +295,9 @@ Collapsed bar: logo · [Download] (compact) · menu button (36×36 minimum targe
 
 The open panel lists, in order: Features (expands to the same 9 links), Databases, Pricing, iPhone & iPad, Docs ↗, Blog, FAQ, GitHub ↗ (with the mark and the star count at the end of the row), Account. Then "Download for Mac" (→ /download) and the App Store badge, firing `download_click{location:'mobile-nav'}` with platform `mac` and `ios`; on an iPhone or iPad the badge is drawn first. Last come **Language**, one row that opens the list of languages (a `<details>`; twelve rows pushed the download actions 1,273px down an 844px screen), and **Theme** as a 3-option segmented control.
 
-In French, Portuguese, Spanish, German and Italian the desktop row is wider than a 1024px window, so those languages keep this bar and menu to 1152px (design-system §5.3.17).
+In French and Spanish the desktop row is wider than a 1024px window, so those languages keep this bar and menu to 1152px (design-system §5.3.17).
+
+The theme control is in the footer bar and this menu only. Until the reader picks one, the theme follows the system (decided 2026-10-10).
 
 ### B.3 Footer (every public page)
 
@@ -348,7 +349,7 @@ Two lists drive this. **`alternates`** (for hreflang) holds real translations on
 | Platform `/thank-you`, `/newsletter/confirmed` | Download, Account, Blog, Home | Locale-aware public links; `noindex` |
 | "Billing & invoices" (account) | https://polar.sh/tablepro/portal | Shown only for licenses bought through Polar (spec §0) |
 
-**Theme across both apps.** Both use the same localStorage `theme` key on the same origin. Both head scripts default to light when nothing is stored, guard storage access with try/catch, and set the class before first paint. Screenshot variants follow the site's theme class, not `prefers-color-scheme`.
+**Theme across both apps.** Both use the same localStorage `theme` key on the same origin. Both head scripts default to `system` when nothing is stored, guard storage access with try/catch, and set the class before first paint. Screenshot variants follow the site's theme class, not `prefers-color-scheme`.
 
 **License banner.** `config/banner.php` is on by default (owner decision, 2026-10-05), on every public page except /pricing in every language, and links to /pricing or to a release post. On /ios a reader on an iPhone or iPad does not get it: the license is for the Mac app. It asks a regular user to buy a license and says what a license adds and pays for; it never pleads. Its dismiss key `tablepro:banner-dismissed` holds the closed version and an end date: 30 days after closing, a year for a license holder or a buyer. The copy "The whole app is free" stays deleted.
 
diff --git a/docs/shared-files.md b/docs/shared-files.md
index 89936e2f..afd1249d 100644
--- a/docs/shared-files.md
+++ b/docs/shared-files.md
@@ -48,9 +48,9 @@ string arrives as a prop, so each app passes its own words in its own language.
 | `resources/css/tokens.css` | `aeba9a5b0dbcadc2285968462c8973217be6a03f349aa8d317f6698ccc5d6a40` | Colour tokens for light and dark, `color-scheme`, the type roles and their `--lh-*` line heights per language, radii, motion, the default border colour, the focus ring, forced colours, the ThemeControl icon and segment states, reduced motion (design-system §2–§4, §7) |
 | `resources/css/fonts.css` | `1ca1fc06d1978f008deb7c1d3e0b6421d11df39732612898e8776941228be6c0` | Inter (optical size) and IBM Plex Mono 400, declared latin-ext, vietnamese, latin (architecture §1.11) |
 | `resources/css/international.css` | `dce122464933097269a0d628baf50582e469b2c9dfacd3a7f64074f1a759bacb` | Native Japanese, Korean, simplified and traditional Chinese font stacks in both apps |
-| `resources/views/partials/head-theme.blade.php` | `10d0c109dc1b41f732519b94fa2dfa302fab590dc80089f419b48d36a3710110` | The pre-paint theme script, verbatim from design-system §2.8: light by default, `theme` in `localStorage`, `data-theme-choice`, one `theme-color` |
+| `resources/views/partials/head-theme.blade.php` | `2c4265b1bad9ee202c8a8c4f3e839d0fa93df48a3ab40a2be41561f39ce9458e` | The pre-paint theme script, verbatim from design-system §2.8: the system's theme by default, `theme` in `localStorage`, `data-theme-choice`, one `theme-color` |
 | `tests/Support/vi-forbidden-variants.php` | `fcf40949323de01bed0be38a53d89256184e6c823acedfd0e0a91513690caa69` | The glossary's forbidden Vietnamese variants (sitemap §E.10), read by `Localization/ContentParityTest` here and `Localization/LangParityTest` in the account app |
-| `resources/js/lib/theme.ts` | `2c8b2af95cb12329a87a11743281af2506917ccbd57cc109629b51e4505d9765` | Reading, applying and syncing the theme choice across tabs and both apps (`theme` key; `tablepro:theme-change` event) |
+| `resources/js/lib/theme.ts` | `43c2322b496b7fea1a1f81dd28daa171183da0230dc094b614c01949bc1e30f8` | Reading, applying and syncing the theme choice across tabs and both apps (`theme` key; `tablepro:theme-change` event) |
 | `resources/js/components/shared/theme-control.tsx` | `f94cbcd17353cca13463c2cb2e81e5c13ab9ef8c041cc2770f54eec51c2256c7` | ThemeControl, `menu`, `segmented` and `icons` variants; labels arrive as props |
 | `resources/js/components/shared/footer-bar.tsx` | `1757417d90c9a1816e5ec0abcecea291394e6537cc28850ab5a63970693e3e2f` | FooterBar, the last row of every page in both apps: the mark, the copyright, a slot for the app's language control and ThemeControl `icons`, kept clear of the chat launcher where chat is configured. FooterMenu, the `<details>` menu that opens upward and that each app's language switcher fills, and `FOOTER_MENU_ITEM`, the class of one of its choices |
 | `resources/js/lib/consent.ts` | `1c276dfffeb65b67e01601e2d17bffeb854542573797c9c69f4bc8e21ae51aeb` | The analytics consent record (`tablepro:analytics-consent`), applying and withdrawing it, and the "Cookie settings" reopen event |
diff --git a/resources/js/components/site/language-switcher.tsx b/resources/js/components/site/language-switcher.tsx
index df589e2c..08310a7b 100644
--- a/resources/js/components/site/language-switcher.tsx
+++ b/resources/js/components/site/language-switcher.tsx
@@ -11,8 +11,9 @@ import { cn } from '@/lib/utils';
 
 interface LanguageSwitcherProps {
     /**
-     * - `menu`: the header control, the current language's own name, opening
-     *   the choices below it. A `<details>`, so it needs no JavaScript.
+     * - `menu`: the header control, a globe named for the current language
+     *   ("Language: English"), opening the choices below it. A `<details>`,
+     *   so it needs no JavaScript.
      * - `footer`: the same choices in the shared FooterMenu, which opens upward
      *   and works without JavaScript.
      * - `stack`: one row naming the current language that opens the choices,
@@ -172,6 +173,7 @@ function LanguageMenu({ items, className }: { items: SwitcherItem[]; className?:
     const { m, fmt } = useI18n();
     const root = useRef<HTMLDetailsElement>(null);
     const current = items.find((item) => item.current) ?? items[0];
+    const label = fmt(m.controls.language.current, { language: current.native });
 
     useEffect(() => {
         const details = root.current;
@@ -255,12 +257,11 @@ function LanguageMenu({ items, className }: { items: SwitcherItem[]; className?:
             className={cn('group relative', className)}
         >
             <summary
-                aria-label={fmt(m.controls.language.current, { language: current.native })}
-                className="inline-flex min-h-8 cursor-pointer list-none items-center gap-1.5 rounded-control px-2 text-sm leading-[1.3] font-medium text-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) select-none hover:bg-surface active:bg-surface-strong [&::-webkit-details-marker]:hidden"
+                aria-label={label}
+                title={label}
+                className="inline-flex size-10 cursor-pointer list-none items-center justify-center rounded-control text-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) select-none hover:bg-surface active:bg-surface-strong [&::-webkit-details-marker]:hidden"
             >
-                <Globe className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-                <span lang={current.locale}>{current.native}</span>
-                <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-(--dur-state) group-open:rotate-180" aria-hidden="true" />
+                <Globe className="size-4 shrink-0" aria-hidden="true" />
             </summary>
             <div
                 data-menu-panel
diff --git a/resources/js/components/site/site-header.tsx b/resources/js/components/site/site-header.tsx
index 696ba265..65ec1a17 100644
--- a/resources/js/components/site/site-header.tsx
+++ b/resources/js/components/site/site-header.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useState, type ReactNode } from 'react';
 import { usePage } from '@inertiajs/react';
 import { Menu } from 'lucide-react';
-import ThemeControl from '@/components/shared/theme-control';
 import Button, { buttonClasses } from '@/components/ui/button';
 import Container from '@/components/ui/container';
 import { GitHubGlyph } from '@/components/ui/glyph';
@@ -40,12 +39,12 @@ function NavLink({ href, current, exact, children }: { href: string; current: bo
  * design-system §5.3.17).
  *
  * From 1024px: the logo, Features ▾ · Databases · Pricing · Docs ↗ · Blog,
- * then the language, the theme, GitHub with its star count, Account and
+ * then the language (a globe), GitHub with its star count, Account and
  * Download. Below 1024px: the logo, a compact Download and the Menu button;
  * everything else moves into the menu. The row does not fit 1024px in every
  * language, so the ones it is too wide for switch at 1152px instead
- * (`headerLayout`, site-links.ts). GitHub joins the row only from 1280px,
- * the first width where every language has room for it.
+ * (`headerLayout`, site-links.ts). The theme is in the footer and the menu
+ * only: it follows the system until the reader picks one.
  *
  * The current section takes the text colour and a 2px indicator bar, never
  * colour alone. Internal links go through `LocaleLink`, so they stay in the
@@ -108,14 +107,13 @@ export default function SiteHeader() {
                 <div className="ml-auto flex items-center gap-2">
                     <div className={layout.controls}>
                         <LanguageSwitcher variant="menu" />
-                        <ThemeControl variant="menu" labels={m.controls.theme} />
                         <Button
                             variant="quiet"
                             size="sm"
                             href={EXTERNAL.github}
                             icon={<GitHubGlyph />}
                             aria-label={stars?.label}
-                            className="hidden tabular-nums xl:inline-flex"
+                            className="tabular-nums"
                         >
                             {stars?.count ?? m.nav.github}
                         </Button>
diff --git a/resources/js/components/site/site-links.ts b/resources/js/components/site/site-links.ts
index 3654b9bf..bc0d36ff 100644
--- a/resources/js/components/site/site-links.ts
+++ b/resources/js/components/site/site-links.ts
@@ -148,8 +148,8 @@ const HEADER_FROM_1152: HeaderLayout = {
 };
 
 // The desktop row is wider than the 960px a 1024px window gives it in these languages
-// (fr 1065px, pt-BR 1040, es 1008, de 980, it 965), so they keep the menu button to 1152px.
-export const WIDE_HEADER_LOCALES: readonly string[] = ['de', 'es', 'fr', 'it', 'pt-BR'];
+// (fr 1044px, es 991), so they keep the menu button to 1152px.
+export const WIDE_HEADER_LOCALES: readonly string[] = ['es', 'fr'];
 
 export function headerLayout(locale: string): HeaderLayout {
     return WIDE_HEADER_LOCALES.includes(locale) ? HEADER_FROM_1152 : HEADER_FROM_1024;
diff --git a/resources/js/lib/theme.ts b/resources/js/lib/theme.ts
index 05647d93..9506c3ce 100644
--- a/resources/js/lib/theme.ts
+++ b/resources/js/lib/theme.ts
@@ -10,9 +10,10 @@
  * `resolveDark()` below before anything is drawn; this module takes over once
  * the page is interactive.
  *
- * Light is the default. A missing key, an unreadable key (storage throws in a
- * private window) and any value other than the three below all mean light, so
- * a visitor whose system is dark still sees light until they choose otherwise.
+ * The system decides by default. A missing key, an unreadable key (storage
+ * throws in a private window) and any value other than the three below all
+ * mean `system`, so a visitor whose system is dark sees dark until they choose
+ * otherwise.
  *
  * Pure apart from the browser globals it touches at call time, and with
  * relative imports only, so `node --test` loads it directly.
@@ -32,17 +33,17 @@ export const THEME_COLORS = { light: '#ffffff', dark: '#121212' } as const;
 
 const SYSTEM_DARK_QUERY = '(prefers-color-scheme: dark)';
 
-/** Anything but a known choice reads as light, matching the head script. */
+/** Anything but a known choice reads as `system`, matching the head script. */
 export function parseTheme(value: unknown): ThemeChoice {
-    return value === 'dark' || value === 'system' || value === 'light' ? value : 'light';
+    return value === 'dark' || value === 'system' || value === 'light' ? value : 'system';
 }
 
-/** The stored choice, or light when there is none or storage refuses. */
+/** The stored choice, or `system` when there is none or storage refuses. */
 export function readTheme(): ThemeChoice {
     try {
         return parseTheme(window.localStorage.getItem(THEME_STORAGE_KEY));
     } catch {
-        return 'light';
+        return 'system';
     }
 }
 
@@ -100,8 +101,8 @@ export function renderTheme(choice: ThemeChoice): void {
  * The reader chose a theme: store it, paint it, and tell every control.
  *
  * A storage failure is not an error. The choice holds for this page and the
- * next load falls back to light, which is the honest outcome for a browser
- * that cannot remember anything.
+ * next load falls back to the system's theme, which is the honest outcome for
+ * a browser that cannot remember anything.
  */
 export function applyTheme(choice: ThemeChoice): void {
     try {
diff --git a/resources/views/partials/head-theme.blade.php b/resources/views/partials/head-theme.blade.php
index adb8019e..57bc8957 100644
--- a/resources/views/partials/head-theme.blade.php
+++ b/resources/views/partials/head-theme.blade.php
@@ -2,7 +2,7 @@
 <meta name="theme-color" content="#ffffff">
 <script>
 (function () {
-  var choice = 'light';
+  var choice = 'system';
   try {
     var t = localStorage.getItem('theme');
     if (t === 'dark' || t === 'system' || t === 'light') { choice = t; }
diff --git a/tests/Feature/Chrome/SiteChromeTest.php b/tests/Feature/Chrome/SiteChromeTest.php
index bce69dd4..33ca31d5 100644
--- a/tests/Feature/Chrome/SiteChromeTest.php
+++ b/tests/Feature/Chrome/SiteChromeTest.php
@@ -105,25 +105,25 @@ function chromeLocales(): array
 
 /**
  * The header's desktop row with every label on one line, measured in Chromium
- * at 14px Inter: its width in px, the display columns of its eight labels at
- * the time (a CJK character is two), and its width from 1280px, where the
- * GitHub link joins it, with that link at its widest (the word "GitHub",
- * before any count is stored). The row has 960px at 1024, 1088px at 1152 and
- * 1216px from 1280.
+ * at 14px Inter: its width in px with the GitHub link at its widest (the word
+ * "GitHub", before any count is stored), and the display columns of its seven
+ * labels at the time (a CJK character is two). The language is a globe and the
+ * theme lives in the footer, so neither adds a label. The row has 960px at
+ * 1024 and 1088px at 1152.
  */
 const HEADER_ROW_MEASURED = [
-    'en' => [893, 54, 997],
-    'vi' => [944, 67, 1047],
-    'es' => [1008, 69, 1112],
-    'de' => [980, 64, 1083],
-    'fr' => [1065, 79, 1169],
-    'ja' => [943, 66, 1048],
-    'pt-BR' => [1040, 74, 1143],
-    'zh-Hans' => [754, 38, 861],
-    'ko' => [773, 48, 877],
-    'zh-Hant' => [797, 44, 904],
-    'it' => [965, 66, 1069],
-    'id' => [930, 58, 1034],
+    'en' => [880, 47],
+    'vi' => [911, 57],
+    'es' => [991, 62],
+    'de' => [960, 57],
+    'fr' => [1044, 71],
+    'ja' => [938, 60],
+    'pt-BR' => [955, 56],
+    'zh-Hans' => [736, 30],
+    'ko' => [772, 42],
+    'zh-Hant' => [779, 36],
+    'it' => [952, 58],
+    'id' => [848, 42],
 ];
 
 it('frames the page with a skip link, one header, one main and one footer', function (string $path, string $locale): void {
@@ -173,7 +173,7 @@ function chromeLocales(): array
     Assert::assertNotNull(chromeLink($header, "{$prefix}/ios", $vi ? 'iPhone và iPad' : 'iPhone & iPad'), 'The platform page is missing from the Features menu');
 })->with('chrome locales');
 
-it('links GitHub with its star count, from 1280px in the header and always in the menu', function (string $path, string $locale): void {
+it('links GitHub with its star count, in the header row and in the menu', function (string $path, string $locale): void {
     Storage::fake(StarCount::DISK);
     Storage::disk(StarCount::DISK)->put(StarCount::FILE, '6224');
 
@@ -190,7 +190,7 @@ function chromeLocales(): array
     // The visible count is part of the name (WCAG 2.5.3), and the link opens in the same tab like every other.
     expect($bar['text'])->toBe('6.2k')
         ->and($bar['attrs']['aria-label'])->toBe($name)
-        ->and($bar['attrs']['class'])->toEndWith('hidden tabular-nums xl:inline-flex')
+        ->and($bar['attrs']['class'])->toEndWith(' tabular-nums')
         ->and($bar['attrs'])->not->toHaveKey('target')
         ->and($menu['text'])->toBe('GitHub↗6.2k')
         ->and($menu['attrs']['aria-label'])->toBe($name);
@@ -211,25 +211,24 @@ function chromeLocales(): array
         ->and($links[1]['attrs'])->not->toHaveKey('aria-label');
 })->with(['/download', '/vi/download']);
 
-it('shows the desktop row only where it fits, in every language', function (string $code, string $prefix, string $native): void {
+it('shows the desktop row only where it fits, in every language', function (string $code, string $prefix): void {
     /*
      * At 1024px the row wrapped to three lines in Spanish and French, pushed
      * the French Download button 8px off the page, and wrapped the language
      * button in Portuguese. A language whose row is wider than 960px keeps
      * the menu button to 1152px instead.
      */
-    [$width, $columns, $withGitHub] = HEADER_ROW_MEASURED[$code];
+    [$width, $columns] = HEADER_ROW_MEASURED[$code];
     $wide = $width > 960;
 
-    expect($width)->toBeLessThanOrEqual($wide ? 1088 : 960)
-        ->and($withGitHub)->toBeLessThanOrEqual(1216);
+    expect($width)->toBeLessThanOrEqual($wide ? 1088 : 960);
 
     /*
      * No browser runs here, so the widths above are only as good as the
      * labels they were measured for. A longer label means measuring again.
      */
     $nav = chromeCatalog($code, 'nav');
-    $labels = [$nav['features'], $nav['databases'], $nav['pricing'], $nav['docs'], $nav['blog'], $native, $nav['account'], $nav['download']];
+    $labels = [$nav['features'], $nav['databases'], $nav['pricing'], $nav['docs'], $nav['blog'], $nav['account'], $nav['download']];
 
     Assert::assertLessThanOrEqual($columns, array_sum(array_map(mb_strwidth(...), $labels)), "{$code}: a header label grew. Measure the row again and update HEADER_ROW_MEASURED.");
 
@@ -358,7 +357,7 @@ function chromeLocales(): array
         Assert::assertSame($code === $locale ? 'true' : null, $link['attrs']['aria-current'] ?? null);
     }
 
-    // Named by what it does, in the page language, with the current language visible.
+    // A globe named by what it does and the current language, in the page language.
     expect($header)->toContain('aria-label="' . ($locale === 'vi' ? 'Ngôn ngữ: Tiếng Việt' : 'Language: English') . '"');
 })->with('chrome locales');
 
diff --git a/tests/Feature/Localization/RootTemplateTest.php b/tests/Feature/Localization/RootTemplateTest.php
index 5348c2e7..0ca44139 100644
--- a/tests/Feature/Localization/RootTemplateTest.php
+++ b/tests/Feature/Localization/RootTemplateTest.php
@@ -19,14 +19,14 @@ function headOf(string $html): string
     return substr($html, 0, (int) strpos($html, '</head>'));
 }
 
-it('paints the theme before anything else, light unless chosen', function (): void {
+it('paints the theme before anything else, the system\'s unless chosen', function (): void {
     $head = headOf($this->get('/download')->getContent());
 
     $theme = strpos($head, "localStorage.getItem('theme')");
 
     expect($theme)->not->toBeFalse();
     expect($theme)->toBeLessThan(strpos($head, '<link rel="icon"'));
-    expect($head)->toContain("var choice = 'light';");
+    expect($head)->toContain("var choice = 'system';");
     expect(substr_count($head, '<meta name="theme-color"'))->toBe(1);
     expect($head)->not->toContain('prefers-color-scheme: light');
     expect($head)->not->toContain('media="(prefers-color-scheme');
diff --git a/tests/Feature/Theme/ThemeControlTest.php b/tests/Feature/Theme/ThemeControlTest.php
index 25fbcaaa..1b3d94a9 100644
--- a/tests/Feature/Theme/ThemeControlTest.php
+++ b/tests/Feature/Theme/ThemeControlTest.php
@@ -3,9 +3,11 @@
 use PHPUnit\Framework\Assert;
 
 /**
- * The theme control: Light, Dark and System, in the header as a menu, in the
- * mobile menu as a segmented control and in the footer as the same control
- * drawn with icons (design-system §5.3.16).
+ * The theme control: Light, Dark and System, in the mobile menu as a
+ * segmented control and in the footer as the same control drawn with icons
+ * (design-system §5.3.16). The public header has none: the theme follows the
+ * system until the reader picks one. The `menu` variant is the account app's
+ * header.
  *
  * The control is one file shared byte for byte with the account app, so it
  * takes its words as props and imports nothing app-specific. Its server markup
@@ -88,10 +90,10 @@ function themeLabels(string $locale): array
     expect($tokens)->toContain(':root:not([data-theme-choice]) .theme-choice-icon[data-choice="light"]');
 });
 
-it('puts the menu in the header, the segmented form in the mobile menu and the icons in the footer bar', function (): void {
+it('leaves the header to the footer bar and the mobile menu', function (): void {
     $read = static fn(string $file): string => (string) file_get_contents(resource_path("js/components/site/{$file}"));
 
-    expect($read('site-header.tsx'))->toContain('<ThemeControl variant="menu" labels={m.controls.theme} />');
+    expect($read('site-header.tsx'))->not->toContain('ThemeControl');
     expect($read('mobile-nav.tsx'))->toContain('<ThemeControl variant="segmented" labels={m.controls.theme} />');
 
     // The footer hands its labels to the shared bar, which draws the control.
@@ -110,22 +112,14 @@ function themeLabels(string $locale): array
     $html = ssrHtml($path);
     $labels = themeLabels($locale);
 
-    // The header button: named "Theme" until the choice is known after mount, with all three icons present.
-    Assert::assertMatchesRegularExpression(
-        '/<button[^>]*aria-label="' . preg_quote($labels['label'], '/') . '"[^>]*aria-haspopup="menu"/u',
-        $html,
-        "{$path}: the header theme button must be named in the page language",
-    );
-
     foreach (['light', 'dark', 'system'] as $choice) {
-        Assert::assertStringContainsString("data-choice=\"{$choice}\"", $html);
         Assert::assertStringContainsString("data-theme-option=\"{$choice}\"", $html);
         Assert::assertStringContainsString('>' . $labels[$choice] . '</label>', $html, "{$path}: the {$choice} segment must be labelled in the page language");
         Assert::assertStringContainsString('title="' . $labels[$choice] . '"', $html, "{$path}: the footer's {$choice} icon must carry its word as a tooltip");
         Assert::assertStringContainsString('<span class="sr-only">' . $labels[$choice] . '</span></label>', $html, "{$path}: the footer's {$choice} icon must be named for assistive tech");
     }
 
-    // The server cannot know the stored theme, so it renders light as checked, like the head script's default.
+    // The server cannot know the stored theme, so it renders light as checked: the theme a page gets without scripts.
     // Each radio is read whole, because React places `checked` before `value`.
     preg_match_all('/<input type="radio"[^>]*>/', $html, $radios);
 
diff --git a/tests/Feature/Theme/ThemeHeadTest.php b/tests/Feature/Theme/ThemeHeadTest.php
index f1694fcd..381c1249 100644
--- a/tests/Feature/Theme/ThemeHeadTest.php
+++ b/tests/Feature/Theme/ThemeHeadTest.php
@@ -54,21 +54,21 @@ function themeScannedSources(): array
     Assert::assertSame($block[1] ?? null, themePartialBody(), 'The partial must be design-system §2.8, byte for byte');
 });
 
-it('is light unless the reader chose otherwise, and survives storage that throws', function (): void {
+it('follows the system unless the reader chose otherwise, and survives storage that throws', function (): void {
     $script = themePartialBody();
 
-    $default = strpos($script, "var choice = 'light';");
+    $default = strpos($script, "var choice = 'system';");
     $try = strpos($script, 'try {');
     $read = strpos($script, "localStorage.getItem('theme')");
     $catch = strpos($script, '} catch (e) {}');
 
-    Assert::assertNotFalse($default, 'Light must be the starting choice');
+    Assert::assertNotFalse($default, 'System must be the starting choice');
     Assert::assertNotFalse($try);
     Assert::assertNotFalse($read, 'The choice is read from the shared `theme` key');
     Assert::assertNotFalse($catch);
-    Assert::assertTrue($default < $try && $try < $read && $read < $catch, 'Storage must be read inside try, after light is set');
+    Assert::assertTrue($default < $try && $try < $read && $read < $catch, 'Storage must be read inside try, after the default is set');
 
-    // Only the three known values are accepted; anything else stays light.
+    // Only the three known values are accepted; anything else stays system.
     expect($script)->toContain("if (t === 'dark' || t === 'system' || t === 'light') { choice = t; }");
 });
 
diff --git a/tests/js/theme.test.ts b/tests/js/theme.test.ts
index cd361a66..1df78ea0 100644
--- a/tests/js/theme.test.ts
+++ b/tests/js/theme.test.ts
@@ -19,8 +19,8 @@ import {
  * The theme choice, executed against a fake browser. Run with `npm run test:js`.
  *
  * The head script decides the theme before paint; this module decides it after
- * load. Both must agree, and both must fall back to light whenever storage is
- * missing, unreadable or holds something unexpected. The head script is run
+ * load. Both must agree, and both must fall back to the system whenever storage
+ * is missing, unreadable or holds something unexpected. The head script is run
  * here too, from the shared partial, so the two cannot drift apart unnoticed.
  */
 
@@ -143,27 +143,28 @@ beforeEach(() => {
     delete (globalThis as Record<string, unknown>).document;
 });
 
-test('reads only the three known choices, and anything else as light', () => {
+test('reads only the three known choices, and anything else as system', () => {
     assert.equal(parseTheme('light'), 'light');
     assert.equal(parseTheme('dark'), 'dark');
     assert.equal(parseTheme('system'), 'system');
-    assert.equal(parseTheme(null), 'light');
-    assert.equal(parseTheme(''), 'light');
-    assert.equal(parseTheme('Dark'), 'light');
-    assert.equal(parseTheme('auto'), 'light');
+    assert.equal(parseTheme(null), 'system');
+    assert.equal(parseTheme(''), 'system');
+    assert.equal(parseTheme('Dark'), 'system');
+    assert.equal(parseTheme('auto'), 'system');
 });
 
-test('is light for a visitor who never chose, even on a dark system', () => {
+test('follows the system for a visitor who never chose', () => {
     installBrowser({ systemDark: true });
 
-    assert.equal(readTheme(), 'light');
-    assert.equal(resolveDark(readTheme(), true), false);
+    assert.equal(readTheme(), 'system');
+    assert.equal(resolveDark(readTheme(), true), true);
+    assert.equal(resolveDark(readTheme(), false), false);
 });
 
-test('is light when storage throws', () => {
+test('follows the system when storage throws', () => {
     installBrowser({ storageThrows: true, stored: 'dark' });
 
-    assert.equal(readTheme(), 'light');
+    assert.equal(readTheme(), 'system');
 });
 
 test('follows the system only when the reader chose system', () => {