@@ -11,14 +11,15 @@ in `out/` is served by any static host (GitHub Pages, GitLab Pages, Bitbucket).
 **Key Features:**
 - Search over curated repository listing (`repositories.txt`)
 - Dark mode, 100% CSS switching (`components/theme-toggle.jsx` +
-  `plans/css-only-dark-mode.md`): three radios (light/dark/system) as the
-  last `.menu-bar` child, palettes selected in `app/globals.css` via
-  `:root:has(#rf-theme-…:checked)` + `prefers-color-scheme`; an inline
-  pre-paint script in `app/layout.jsx` only restores/persists the choice
-  (CSP-hashed by the build). Guards: `tests/unit/theme-css.test.js` (the
-  two dark blocks must stay byte-identical; all hex colors live in the
-  palette blocks; dark palette passes the same WCAG AA math as
-  `tests/unit/css-a11y.test.js`)
+  `plans/css-only-dark-mode.md`): three radios (light/dark/system) on a
+  right-aligned `.theme-bar` sub-row under the menu bar (the right-edge
+  mirror of the breadcrumbs' left-edge alignment), palettes selected in
+  `app/globals.css` via `:root:has(#rf-theme-…:checked)` +
+  `prefers-color-scheme`; an inline pre-paint script in `app/layout.jsx`
+  only restores/persists the choice (CSP-hashed by the build). Guards:
+  `tests/unit/theme-css.test.js` (the two dark blocks must stay
+  byte-identical; all hex colors live in the palette blocks; dark palette
+  passes the same WCAG AA math as `tests/unit/css-a11y.test.js`)
 - Breadcrumb trail under the menu (`components/breadcrumbs.jsx` +
   `lib/breadcrumbs.js`): mirrors `/user/repo/branch` with linked ancestors;
   the repo crumb never self-links, and ReportView announces the resolved
 
@@ -609,12 +609,6 @@ pre {
     order: 2;
   }
 
-  /* Right of the hamburger at the bar's right edge (order 2 ties resolve
-     by DOM order, and the hamburger's auto margin pushes both right). */
-  .theme-toggle {
-    order: 2;
-  }
-
   .menu-search {
     /* On mobile the search sits on its own row between toggle and links. */
     order: 3;
@@ -691,6 +685,21 @@ pre {
 }
 
 /* ---- Color theme toggle (three radio modes, pure-CSS switching) ---- */
+/* Sub-row under the menu bar: the same alignment formula .breadcrumbs use
+   (--width-content column, 0.8rem horizontal padding, border-box) keeps the
+   toggle's right edge flush with the menu bar's right content edge at every
+   viewport — the right-edge mirror of the breadcrumb trail's left-edge
+   alignment. #top-menu is capped by mvp.css at --width-content, so the row
+   and the menu bar can never drift apart. */
+.theme-bar {
+  display: flex;
+  justify-content: flex-end;
+  max-width: var(--width-content);
+  box-sizing: border-box;
+  margin: 0 auto;
+  padding: 0.2rem 0.8rem 0.45rem;
+}
+
 /* The radios in components/theme-toggle.jsx are the theme's single source of
    truth (see the palette blocks at the top of this file). Each input is
    visually replaced by its icon pill (appearance: none, absolute, fills the
 
@@ -4,9 +4,9 @@ import MenuSearch from './menu-search';
 import ThemeToggle from './theme-toggle';
 import { withBasePath } from '../lib/base-path';
 
-// Site header: brand logo, hamburger toggle, main navigation links, the
-// type-ahead menu search and the three-mode color theme toggle pinned to the
-// right side of the bar.
+// Site header: brand logo, hamburger toggle, main navigation links and the
+// type-ahead menu search in the top bar, plus the three-mode color theme
+// toggle on a right-aligned sub-row below the bar.
 export default function SiteHeader({ repositories = [] }) {
   return (
     <>
@@ -34,11 +34,16 @@ export default function SiteHeader({ repositories = [] }) {
             </li>
           </ul>
           <MenuSearch repositories={repositories} />
-          {/* Last flex child: the toggle's right edge sits flush with the
-              menu bar's content edge, mirroring the breadcrumbs' left-edge
-              alignment (plans/css-only-dark-mode.md). */}
-          <ThemeToggle />
         </nav>
+        {/* Theme sub-row below the menu bar: .theme-bar reuses the
+            breadcrumbs' alignment formula (--width-content column, 0.8rem
+            horizontal padding, border-box) so the toggle's right edge sits
+            flush with the menu bar's right content edge, mirroring how the
+            breadcrumb trail aligns with the bar's left edge
+            (plans/css-only-dark-mode.md). */}
+        <div className="theme-bar">
+          <ThemeToggle />
+        </div>
       </header>
     </>
   );
 
@@ -2,9 +2,9 @@
 
 ## Goals
 
-1. Three-mode theme control in the top menu bar — **light / dark / system** —
-   with small images (icons) for each mode.
-2. The control's right edge aligns with the top menu's right content edge at
+1. Three-mode theme control — **light / dark / system** — with small images
+   (icons) for each mode, on a sub-row below the top menu bar.
+2. The control's right edge aligns with the menu bar's right content edge at
    every viewport (mirroring how the breadcrumb trail aligns with the menu's
    left edge).
 3. All *theming* is pure CSS: custom properties + `prefers-color-scheme` +
@@ -18,8 +18,9 @@
 `components/theme-toggle.jsx` (a Server Component — no state, no handlers)
 renders three radios named `rf-theme` (`rf-theme-light`, `rf-theme-dark`,
 `rf-theme-system`, with `system` `defaultChecked`), each wrapped in a labelled
-icon pill (inline SVG: sun / moon / monitor). The toggle is the **last flex
-child of `.menu-bar`**, after `MenuSearch`.
+icon pill (inline SVG: sun / moon / monitor). The toggle sits on the
+**`.theme-bar` sub-row under `.menu-bar`**, inside `#top-menu`, right-aligned
+with the menu bar's content edge.
 
 Why radios: "one of three modes" is exactly a radio group, the checked state
 is queryable from CSS (`:has(#id:checked)`), and switching requires zero JS.
@@ -121,12 +122,15 @@ practices" and "only CSS" conflict here, so the plan resolves it as:
 
 ### Alignment with the menu
 
-The toggle is a normal flex child at the end of `.menu-bar` (which carries
-`padding: 0.3rem 0.8rem`), so its right edge is flush with the menu's content
-edge by construction — the same 0.8rem inset the breadcrumbs mirror on the
-left (`tests/unit/layout-styles.test.js` pins that invariant). Below 900px it
-keeps `order: 2` so it sits beside the hamburger at the right edge. No
-absolute positioning, no magic numbers.
+The toggle lives on a `.theme-bar` sub-row inside `#top-menu`, right after
+`.menu-bar`, and pinned right via `justify-content: flex-end`. The row
+reuses the breadcrumbs' exact alignment formula — `max-width:
+var(--width-content)`, `box-sizing: border-box`, `margin: 0 auto`,
+`padding: 0.2rem 0.8rem 0.45rem` (see `tests/unit/layout-styles.test.js` for
+the breadcrumb invariant this mirrors) — so its right content edge is the
+menu bar's right content edge at every viewport, with no positioning tricks
+or magic numbers; the formula works identically at mobile widths, where the
+sub-row simply follows the wrapped menu bar.
 
 ### Toggle UI / a11y
 
@@ -188,10 +192,10 @@ mustache-rendered).
 
 1. Write the failing unit/integration tests (above).
 2. `components/theme-toggle.jsx` + render it in `components/site-header.jsx`
-   after `MenuSearch`.
+   on a `.theme-bar` sub-row after `.menu-bar`.
 3. globals.css: split color roles, sweep hardcoded colors into variables, add
    the three cascade blocks + mvp variable overrides + dark overrides for the
-   report template's light-only rules + toggle styles (+ mobile order).
+   report template's light-only rules + `.theme-bar`/toggle styles.
 4. `app/layout.jsx`: inline persistence script after `<SiteHeader />` +
    `color-scheme` meta.
 5. Unit/integration green; `npx eslint` clean.
@@ -250,11 +254,11 @@ mustache-rendered).
    were pre-verified (dark bg/text ≈13:1, muted ≈8:1, links ≈7.7:1, focus
     indicator 3.8:1 on the page bg (3.3:1 on surfaces), brand-bg+white 5.5:1,
     error/success ≈8:1).
-10. **Alignment is structural, not geometric** — placing the toggle inside
-    `.menu-bar` (like the search before it) guarantees right-edge alignment
-    at every viewport with zero positioning code; the E2E test pins it with a
-    bounding-box comparison. This mirrors (and is simpler than) the
-    breadcrumbs' `--width-content` trick, which only aligns below ~1263px.
+10. **Alignment is structural, not geometric** — the `.theme-bar` sub-row
+    reuses the breadcrumbs' `--width-content` column + 0.8rem padding formula,
+    so the toggle's right edge is the menu bar's right content edge at every
+    viewport with zero positioning code; the E2E test pins it with a
+    bounding-box comparison, at desktop and mobile widths.
 
 Verdict: the design is sound. The only genuine trade-offs — the persistence
 shim (flagged deviation) and the duplicated dark block (test-guarded) — are
 
@@ -37,29 +37,28 @@ test('the toggle right edge aligns with the top menu content edge', async ({ pag
     return {
       toggleRight: toggle.right,
       // The menu bar's right *content* edge (its 0.8rem padding insets the
-      // search input exactly like the breadcrumb padding insets crumbs).
+      // search input exactly like the sub-row padding insets the toggle).
       barContentRight: bar.right - parseFloat(style.paddingRight)
     };
   });
   expect(Math.abs(edges.toggleRight - edges.barContentRight)).toBeLessThanOrEqual(1);
 });
 
-test('the toggle stays right-aligned on mobile next to the hamburger', async ({ page }) => {
+test('the toggle sits below the menu bar, right-aligned, at mobile widths', async ({ page }) => {
   test.skip(test.info().project.name !== 'chromium', 'geometry check runs once');
   await page.setViewportSize({ width: 375, height: 800 });
   await page.goto('/');
   const edges = await page.evaluate(() => {
     const bar = document.querySelector('.menu-bar').getBoundingClientRect();
     const toggle = document.querySelector('.theme-toggle').getBoundingClientRect();
-    const hamburger = document.querySelector('.menu-toggle').getBoundingClientRect();
     return {
       toggleRight: toggle.right,
       barContentRight: bar.right - parseFloat(getComputedStyle(document.querySelector('.menu-bar')).paddingRight),
-      hamburgerBeforeToggle: hamburger.right <= toggle.left
+      belowBar: toggle.top >= bar.bottom
     };
   });
   expect(Math.abs(edges.toggleRight - edges.barContentRight)).toBeLessThanOrEqual(1);
-  expect(edges.hamburgerBeforeToggle).toBe(true);
+  expect(edges.belowBar).toBe(true);
 });
 
 test('light OS preference renders light by default', async ({ page }) => {
 
@@ -1,7 +1,7 @@
-// Dark mode toggle in the top menu: three radio modes (light / dark /
+// Dark mode toggle under the top menu: three radio modes (light / dark /
 // system) rendered as icon pills, with the system preference preselected and
-// the whole control placed after the menu search box so its right edge can
-// align with the top menu's content edge (plans/css-only-dark-mode.md).
+// the whole control on a sub-row below the menu bar whose right edge aligns
+// with the menu's content edge (plans/css-only-dark-mode.md).
 import { describe, test, expect } from 'bun:test';
 import { mock } from 'bun:test';
 
@@ -60,15 +60,20 @@ describe('ThemeToggle', () => {
 });
 
 describe('SiteHeader placement', () => {
-  test('the toggle is the last child of the menu bar, after the search box', () => {
+  test('the toggle sits on a sub-row below the menu bar, inside the header', () => {
     render(_jsx(SiteHeader, { repositories: [] }));
+    const header = document.getElementById('top-menu');
     const bar = document.querySelector('.menu-bar');
-    const children = [...bar.children];
-    const search = bar.querySelector('.menu-search');
-    const toggle = bar.querySelector('.theme-toggle');
+    const themeBar = header.querySelector('.theme-bar');
+    const toggle = themeBar.querySelector('.theme-toggle');
+    expect(themeBar).toBeTruthy();
     expect(toggle).toBeTruthy();
-    expect(children[children.length - 1]).toBe(toggle);
-    expect(children.indexOf(search)).toBeGreaterThan(0);
-    expect(children.indexOf(toggle)).toBeGreaterThan(children.indexOf(search));
+    // The sub-row comes after the menu bar and holds only the toggle.
+    const children = [...header.children];
+    expect(children[children.length - 1]).toBe(themeBar);
+    expect(children.indexOf(themeBar)).toBeGreaterThan(children.indexOf(bar));
+    expect(themeBar.children.length).toBe(1);
+    expect(themeBar.contains(toggle)).toBe(true);
+    expect(bar.contains(toggle)).toBe(false);
   });
 });
@@ -206,7 +206,7 @@ describe('dark mode cascade structure', () => {
 });
 
 describe('toggle styles', () => {
-  it('the toggle is a flex child of the menu bar with an icon pill per mode', () => {
+  it('the toggle renders icon pills over appearance-none radios', () => {
     expect(rules.get('.theme-toggle')).toMatch(/display:\s*flex/);
     expect(rules.get('.theme-option-input')).toMatch(/appearance:\s*none/);
     expect(rules.get('.theme-option-input')).toMatch(/position:\s*absolute/);
@@ -224,12 +224,19 @@ describe('toggle styles', () => {
     expect(height).toBeGreaterThanOrEqual(1.5);
   });
 
-  it('the toggle stays right-aligned on mobile, next to the hamburger', () => {
-    const mobileSlice = noComments.split('@media (max-width: 900px)')[1];
-    expect(mobileSlice).toBeTruthy();
-    const mobileToggle = mobileSlice.match(/\.theme-toggle\s*\{([^{}]*)\}/);
-    expect(mobileToggle).toBeTruthy();
-    expect(mobileToggle[1]).toMatch(/order:\s*2/);
+  it('the sub-row under the menu bar mirrors the breadcrumb alignment formula', () => {
+    // Same invariant layout-styles.test.js pins for .breadcrumbs: the row
+    // shares #top-menu's --width-content column and the 0.8rem horizontal
+    // padding insets the toggle to the menu bar's right *content* edge at
+    // every viewport. Flex-end pins the control to that edge.
+    const row = rules.get('.theme-bar');
+    expect(row).toBeTruthy();
+    expect(row).toMatch(/display:\s*flex/);
+    expect(row).toMatch(/justify-content:\s*flex-end/);
+    expect(row).toMatch(/max-width:\s*var\(--width-content\)/);
+    expect(row).toMatch(/box-sizing:\s*border-box/);
+    expect(row).toMatch(/margin:\s*0\s+auto/);
+    expect(row).toMatch(/padding:\s*[^;]*0\.8rem[^;]*;/);
   });
 });