@@ -11,18 +11,20 @@ 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) on a
-  right-aligned `.theme-bar` row below the header, rendered by
-  `app/layout.jsx` between `<SiteHeader>` and the persistence script (the
-  right-edge mirror of the breadcrumbs' left-edge alignment), palettes
-  selected in `app/globals.css` via `:root:has(#rf-theme-…:checked)` +
+  `plans/css-only-dark-mode.md`): three radios (light/dark/system) on the
+  right side of the `.theme-bar` row below the header, rendered by
+  `app/layout.jsx` — the breadcrumb trail shares the row on report routes
+  (crumbs left, toggle right, vertically centered; 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;
+- Breadcrumb trail on the theme bar row 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
   branch (`rf:branch-resolved` event) so the label matches the loaded report
   (`main` 404 → `master` fallback)
 
@@ -352,20 +352,20 @@ pre {
 
 /* ---- Breadcrumbs (user/report trail under the top menu) ---- */
 .breadcrumbs {
-  /* Same column as the top menu: #top-menu is capped by mvp.css at
-     --width-content, so reuse the variable — the two can never drift apart.
-     border-box (not mvp's default content-box) so the horizontal padding
-     insets crumbs exactly like .menu-bar's padding insets the brand; with
-     content-box, symmetric padding on a centered block never moves the
-     content edge. */
-  max-width: var(--width-content);
-  box-sizing: border-box;
+  /* Lives on the .theme-bar row (rendered by app/layout.jsx), sharing the
+     line with the color theme toggle: the row owns the menu-column
+     alignment formula (max-width: var(--width-content) + 0.8rem horizontal
+     padding, see .theme-bar above), so the trail must add no box-model
+     offsets of its own — flex-grow fills the row's left side, keeping the
+     first crumb's glyph at the menu bar's left content edge while the
+     toggle pins to the right edge, both vertically centered. */
+  flex: 1 1 auto;
+  min-width: 0;
   /* mvp.css gives bare nav a 7rem bottom margin, bold text and a spaced flex
-     row — reset all three so the trail hugs the menu like a sub-bar. */
-  margin: 0 auto;
+     row — reset all three so the trail sits inline like a sub-bar. */
+  margin: 0;
   font-weight: normal;
   display: block;
-  padding: 0 0.8rem;
   font-size: 0.85rem;
 }
 
@@ -685,14 +685,19 @@ pre {
 }
 
 /* ---- Color theme toggle (three radio modes, pure-CSS switching) ---- */
-/* Row below the site header (rendered by app/layout.jsx): 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. */
+/* Row below the site header (rendered by app/layout.jsx): the breadcrumb
+   trail (when the route has one) on the left and the toggle on the right,
+   vertically centered on one line. The alignment formula .breadcrumbs used
+   to carry lives here now: --width-content column, 0.8rem horizontal
+   padding, border-box — keeping the first crumb's glyph at the menu bar's
+   left content edge and the toggle at its right content edge at every
+   viewport, the two edges mirroring each other. #top-menu is capped by
+   mvp.css at --width-content, so the row and the menu bar can never drift
+   apart. Crumb routes grow the trail (flex: 1 1 auto); crumb-less routes
+   leave only the toggle, pinned right by flex-end. */
 .theme-bar {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   max-width: var(--width-content);
   box-sizing: border-box;
 
@@ -49,13 +49,20 @@ export default function RootLayout({ children }) {
       </head>
       <body>
         <SiteHeader repositories={repositories} />
-        {/* Color theme toggle on a row below the header: .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). */}
+        {/* Theme bar row below the header: the breadcrumb trail (report/user
+            routes only) on the left and the color theme toggle on the right,
+            vertically centered on one line. The row reuses the breadcrumbs'
+            alignment formula (--width-content column, 0.8rem horizontal
+            padding, border-box), so the first crumb's glyph sits at the menu
+            bar's left content edge and the toggle at its right content edge
+            — the two edges mirror each other (plans/css-only-dark-mode.md).
+            Suspense is required for useSearchParams (static export; the
+            fallback keeps prerendered HTML crumb-free and the toggle still
+            renders — an empty flex slot). */}
         <div className="theme-bar">
+          <Suspense fallback={null}>
+            <Breadcrumbs />
+          </Suspense>
           <ThemeToggle />
         </div>
         {/* Theme persistence shim (plans/css-only-dark-mode.md): switching
@@ -74,12 +81,6 @@ export default function RootLayout({ children }) {
               "(function(){var r;try{r=localStorage.getItem('rf-theme')}catch(e){}if(r==='light'||r==='dark'){var i=document.getElementById('rf-theme-'+r);if(i)i.checked=true}document.addEventListener('change',function(e){var t=e.target;if(t&&t.name==='rf-theme'){try{localStorage.setItem('rf-theme',t.value)}catch(_){}}})})();"
           }}
         />
-        {/* Breadcrumb trail under the menu (report/user routes only). Suspense
-            is required because useSearchParams deopts otherwise (static
-            export; the fallback keeps prerendered HTML crumb-free). */}
-        <Suspense fallback={null}>
-          <Breadcrumbs />
-        </Suspense>
         <main id="app" tabIndex={-1}>{children}</main>
         <SiteFooter />
         <SentryProvider />
 
@@ -21,7 +21,9 @@ renders three radios named `rf-theme` (`rf-theme-light`, `rf-theme-dark`,
 icon pill (inline SVG: sun / moon / monitor). The toggle sits on the
 **`.theme-bar` row below `#top-menu`**, rendered by `app/layout.jsx` right
 after `<SiteHeader />` (and before the persistence shim, which needs the
-radios parsed), right-aligned with the menu bar's content edge.
+radios parsed); on report routes the breadcrumb trail shares the row, to the
+toggle's left, both vertically centered, the toggle pinned to the menu bar's
+right 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.
@@ -124,15 +126,16 @@ practices" and "only CSS" conflict here, so the plan resolves it as:
 ### Alignment with the menu
 
 The toggle lives on a `.theme-bar` row rendered by `app/layout.jsx` right
-after `<SiteHeader />`, below the header block, 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.4rem 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 row simply follows the wrapped menu
-bar.
+after `<SiteHeader />`, below the header block. The row owns the alignment
+formula the standalone breadcrumb bar used to carry — `max-width:
+var(--width-content)`, `box-sizing: border-box`, `margin: 0 auto`,
+`padding: 0.4rem 0.8rem 0.45rem` — with `align-items: center` so the
+breadcrumb trail (report/user routes; `flex: 1 1 auto`, no box-model offsets
+of its own) sits on the line's left at the menu bar's left content edge,
+vertically centered against the toggle pinned to the right content edge
+(`justify-content: flex-end` keeps the toggle right on crumb-less pages).
+No positioning tricks or magic numbers; the formula works identically at
+mobile widths, where the row simply follows the wrapped menu bar.
 
 ### Toggle UI / a11y
 
 
@@ -3,6 +3,14 @@
 // (radio :has() + prefers-color-scheme), and the inline bootstrap script
 // persists the choice across hard loads.
 import { test, expect } from '@playwright/test';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+
+const SAMPLE_REPORT = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), '../fixtures/junit4-report.json'),
+  'utf8'
+);
 
 const LIGHT_BG = 'rgb(255, 255, 255)';
 const DARK_BG = 'rgb(16, 22, 29)';
@@ -119,3 +127,38 @@ test('dark mode keeps rendering dark on report pages after navigation', async ({
   expect(await bodyBackground(page)).toBe(DARK_BG);
   expect(await page.evaluate(() => localStorage.getItem('rf-theme'))).toBe('dark');
 });
+
+test('breadcrumbs and the toggle share one vertically centered row on report pages', async ({ page }) => {
+  test.skip(test.info().project.name !== 'chromium', 'geometry check runs once');
+  // Mock GitHub raw content so the report page never hits the network.
+  await page.route('**/raw.githubusercontent.com/**', route => {
+    if (route.request().url().endsWith('refactor-first.json')) {
+      route.fulfill({ status: 200, contentType: 'application/json', body: SAMPLE_REPORT });
+    } else {
+      route.continue();
+    }
+  });
+  await page.goto('/refactorfirst/refactorfirst/master/');
+  await page.waitForLoadState('networkidle');
+  const edges = await page.evaluate(() => {
+    const crumb = document.querySelector('nav[aria-label="Breadcrumb"] ol li a');
+    const crumbBox = crumb.getBoundingClientRect();
+    const toggle = document.querySelector('.theme-toggle').getBoundingClientRect();
+    const bar = document.querySelector('.menu-bar').getBoundingClientRect();
+    return {
+      crumbGlyphLeft: crumbBox.left + parseFloat(getComputedStyle(crumb).paddingLeft),
+      brandLeft: document.querySelector('.brand').getBoundingClientRect().left,
+      sameRow: crumbBox.top < toggle.bottom && toggle.top < crumbBox.bottom,
+      centerDelta: Math.abs((crumbBox.top + crumbBox.bottom) / 2 - (toggle.top + toggle.bottom) / 2),
+      toggleRight: toggle.right,
+      barContentRight: bar.right - parseFloat(getComputedStyle(document.querySelector('.menu-bar')).paddingRight)
+    };
+  });
+  // The first crumb's glyph keeps the menu column's left content edge…
+  expect(Math.abs(edges.crumbGlyphLeft - edges.brandLeft)).toBeLessThanOrEqual(1);
+  // …the toggle keeps the right content edge…
+  expect(Math.abs(edges.toggleRight - edges.barContentRight)).toBeLessThanOrEqual(1);
+  // …and the two share one vertically centered line.
+  expect(edges.sameRow).toBe(true);
+  expect(edges.centerDelta).toBeLessThanOrEqual(1);
+});
@@ -1,16 +1,19 @@
 // Dark mode toggle below the site header: three radio modes (light / dark /
 // system) rendered as icon pills, with the system preference preselected and
-// the whole control on a right-aligned .theme-bar row under the header whose
-// right edge aligns with the menu bar's content edge
+// the whole control on a right-aligned .theme-bar row under the header —
+// the row the breadcrumb trail shares on report routes (crumbs left, toggle
+// right), aligned with the menu bar's content edges
 // (plans/css-only-dark-mode.md).
 import { describe, test, expect } from 'bun:test';
 import { mock } from 'bun:test';
 
 import { sharedNextNavigationMock } from './next-navigation-stub';
 
+let currentPath = '/';
+let currentSearch = '';
 mock.module('next/navigation', () => sharedNextNavigationMock({
-  usePathname: () => '/',
-  useSearchParams: () => new URLSearchParams()
+  usePathname: () => currentPath,
+  useSearchParams: () => new URLSearchParams(currentSearch)
 }));
 
 import { render, installRtlDom, within } from './rtl';
@@ -82,4 +85,27 @@ describe('Root layout placement', () => {
     const shim = html.indexOf("localStorage.getItem('rf-theme')");
     expect(shim).toBeGreaterThan(themeBar);
   });
+
+  test('on report routes the breadcrumb trail shares the toggle row, to its left', () => {
+    currentPath = '/alice/some-repo/master';
+    currentSearch = '';
+    try {
+      const html = renderToStaticMarkup(_jsx(RootLayout, { children: null }));
+      const themeBar = html.indexOf('class="theme-bar"');
+      const main = html.indexOf('<main');
+      const rowHtml = html.slice(themeBar, main);
+      const crumbs = rowHtml.indexOf('aria-label="Breadcrumb"');
+      const toggle = rowHtml.indexOf('rf-theme-light');
+      expect(crumbs, 'breadcrumb nav missing from the theme bar').toBeGreaterThan(-1);
+      expect(toggle).toBeGreaterThan(-1);
+      // DOM order mirrors the flex row: crumbs first (left), toggle last
+      // (right); the row's flex-grow keeps them on one line.
+      expect(crumbs).toBeLessThan(toggle);
+      // The trail no longer renders outside the row.
+      expect(html.slice(0, themeBar)).not.toContain('aria-label="Breadcrumb"');
+      expect(html.slice(main)).not.toContain('aria-label="Breadcrumb"');
+    } finally {
+      currentPath = '/';
+    }
+  });
 });
@@ -56,17 +56,18 @@ describe('layout styles (mvp.css section-flex reset)', () => {
     expect(body).toMatch(/margin:\s*0\s+auto\s*;/);
   });
 
-  test('the breadcrumb bar shares the top menu column (#top-menu caps)', () => {
-    // #top-menu is capped by mvp.css at --width-content; reusing the variable
-    // keeps the breadcrumb column and the menu column aligned forever. The
-    // bar must be border-box so its horizontal padding insets crumbs exactly
-    // like .menu-bar's padding insets the brand: with content-box, symmetric
-    // padding on a centered block never moves the content edge.
+  test('the breadcrumb trail stretches inside the theme bar row (menu column)', () => {
+    // The trail now shares the .theme-bar row with the color theme toggle:
+    // the row carries the alignment formula (max-width: var(--width-content)
+    // + 0.8rem horizontal padding, guarded in tests/unit/theme-css.test.js),
+    // so .breadcrumbs must not add its own box-model offsets — it grows to
+    // fill the row's left side, keeping the first crumb's glyph at the menu
+    // column's left content edge while the toggle pins to the right edge.
     const body = rules.get('.breadcrumbs');
     expect(body).toBeTruthy();
-    expect(body).toMatch(/max-width:\s*var\(--width-content\)/);
-    expect(body).toMatch(/box-sizing:\s*border-box\s*;/);
-    expect(body).toMatch(/padding:\s*0\s+0\.8rem\s*;/); // matches .menu-bar
+    expect(body).toMatch(/flex:\s*1\s+1\s+auto/);
+    expect(body).not.toMatch(/max-width/);
+    expect(body).not.toMatch(/padding:\s*0\s+0\.8rem/);
   });
 
   test('crumb links carry no left padding (glyph edge aligns with the brand)', () => {
 
@@ -224,15 +224,17 @@ describe('toggle styles', () => {
     expect(height).toBeGreaterThanOrEqual(1.5);
   });
 
-  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.
+  it('the row below the header mirrors the breadcrumb alignment formula', () => {
+    // Same invariant layout-styles.test.js pinned for the standalone
+    // .breadcrumbs bar: the row shares #top-menu's --width-content column
+    // and the 0.8rem horizontal padding insets its children to the menu
+    // bar's content edges at every viewport — the toggle on the right, the
+    // breadcrumb trail on the left (flex-grow), vertically centered.
     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(/align-items:\s*center/);
     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/);