@@ -1,6 +1,6 @@
 # v3.0.0 Workspace Cutover — Implementation Plan
 
-**Status:** Phases 0–1 complete (merged to `modern`). Phase 2 next.
+**Status:** Phases 0–2 complete (merged to `modern`). Phase 3 next.
 
 Carries the `modern` branch from its mid-build state (M8a complete; new multi-page workspace exists
 but cannot export YAML and loses data on refresh) through to **v3.0.0**, where the workspace UI is a
 
@@ -2,10 +2,12 @@
  * @vitest-environment jsdom
  */
 
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
 import { StoreProvider } from '../../state/StoreContext';
 import { App } from '../../App';
+import { overrideFlags, restoreFlags } from '../../featureFlags';
+import { makeTestWorkspace } from '../helpers/test-fixtures';
 
 /**
  * Integration tests for ARIA landmarks (P1.1.4)
@@ -144,4 +146,90 @@ describe('ARIA Landmarks', () => {
       });
     });
   });
+
+  describe('Per-route landmarks (new workspace UI)', () => {
+    const renderRoute = (hash) => {
+      window.location.hash = hash;
+      return render(
+        <StoreProvider initialState={{ workspace: makeTestWorkspace() }}>
+          <App />
+        </StoreProvider>
+      );
+    };
+
+    afterEach(() => {
+      restoreFlags();
+      window.location.hash = '';
+    });
+
+    // makeTestWorkspace seeds animal "remy" + day "remy_20230622".
+    it('Home: one main + one #main-content, a navigation landmark, and a Workspace link', () => {
+      overrideFlags({ animalWorkspace: true });
+      const { container } = renderRoute('#/home');
+
+      expect(container.querySelectorAll('[role="main"]')).toHaveLength(1);
+      expect(container.querySelectorAll('#main-content')).toHaveLength(1);
+      expect(container.querySelector('[role="navigation"]')).toBeTruthy();
+      // Escape to the workspace exists via the primary nav.
+      expect(screen.getByRole('link', { name: /^workspace$/i })).toBeInTheDocument();
+    });
+
+    it('Workspace: one main + one #main-content, a navigation landmark, escape to Home', () => {
+      overrideFlags({ animalWorkspace: true });
+      const { container } = renderRoute('#/workspace');
+
+      expect(container.querySelectorAll('[role="main"]')).toHaveLength(1);
+      expect(container.querySelectorAll('#main-content')).toHaveLength(1);
+      expect(container.querySelector('[role="navigation"]')).toBeTruthy();
+      expect(screen.getByRole('link', { name: /^home$/i })).toBeInTheDocument();
+    });
+
+    it('DayEditor: one main + one #main-content + one banner/contentinfo; back-to-workspace link', async () => {
+      overrideFlags({ animalWorkspace: true, newDayEditor: true });
+      const { container } = renderRoute('#/day/remy_20230622');
+
+      // useDayIdFromUrl resolves the day id in an effect, so wait for the real stepper.
+      const back = await screen.findByRole('link', { name: /back to workspace/i });
+      expect(back).toBeInTheDocument();
+      expect(container.querySelectorAll('[role="main"]')).toHaveLength(1);
+      expect(container.querySelectorAll('#main-content')).toHaveLength(1);
+      // The stepper header/footer are plain divs, so AppLayout owns the only banner
+      // and contentinfo landmarks (no duplicates).
+      expect(container.querySelectorAll('[role="banner"], header')).toHaveLength(1);
+      expect(container.querySelectorAll('[role="contentinfo"], footer')).toHaveLength(1);
+    });
+
+    it('AnimalEditor: exactly one main + one #main-content (duplicate removed); back-to-workspace link', async () => {
+      overrideFlags({ animalWorkspace: true });
+      const { container } = renderRoute('#/animal/remy/editor');
+
+      // AnimalEditor is lazy-loaded behind Suspense.
+      await waitFor(() => {
+        expect(container.querySelectorAll('[role="main"]')).toHaveLength(1);
+      });
+      expect(container.querySelectorAll('#main-content')).toHaveLength(1);
+      // Stepper header/footer are plain divs → AppLayout owns the only banner/contentinfo.
+      expect(container.querySelectorAll('[role="banner"], header')).toHaveLength(1);
+      expect(container.querySelectorAll('[role="contentinfo"], footer')).toHaveLength(1);
+      expect(screen.getByRole('link', { name: /back to workspace/i })).toBeInTheDocument();
+    });
+
+    it('keeps the default route (#/) on the legacy form even with flags enabled', () => {
+      overrideFlags({ animalWorkspace: true, newDayEditor: true });
+      window.location.hash = '#/';
+      // No seeded workspace here: the legacy form reads the flat formData model, so
+      // seeding only { workspace } would leave formData without its fields.
+      const { container } = render(
+        <StoreProvider>
+          <App />
+        </StoreProvider>
+      );
+
+      // Default stays legacy this phase (cutover flips the default in a later phase).
+      expect(container.querySelector('form')).toBeTruthy();
+      // Legacy supplies a single main; the primary nav is not rendered on legacy.
+      expect(container.querySelectorAll('[role="main"]')).toHaveLength(1);
+      expect(screen.queryByRole('navigation', { name: /primary/i })).not.toBeInTheDocument();
+    });
+  });
 });
@@ -2,6 +2,62 @@ body {
   font-family: sans-serif;
 }
 
+/* Global screen-reader-only utility. Defined here (index.css is loaded on every
+   route) so the always-present route announcer and per-component sr-only labels are
+   visually hidden on the new workspace routes too, not just where a route-specific
+   stylesheet happens to define it. */
+.sr-only,
+.visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Primary navigation into the workspace (rendered on non-legacy routes). Sits in
+   normal flow below the banner; positioned/stacked so banner content can't overlap
+   and intercept clicks on the links. */
+.primary-nav {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 10px;
+  border-bottom: 1px solid #e0e0e0;
+  background: #fafafa;
+}
+
+.primary-nav a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0.4rem 0.9rem;
+  border-radius: 4px;
+  color: #1565c0;
+  text-decoration: none;
+}
+
+.primary-nav a:hover {
+  background: #eef3fb;
+  text-decoration: underline;
+}
+
+.primary-nav a[aria-current='page'] {
+  font-weight: 600;
+  background: #e3f0ff;
+}
+
+.primary-nav .legacy-toggle {
+  margin-left: auto;
+}
+
 /* Notice shown when a previously-saved workspace could not be restored. */
 .load-notice {
   display: flex;
 
@@ -9,6 +9,7 @@
 
 import React, { useEffect, useRef, lazy, Suspense } from 'react';
 import { useHashRouter } from '../hooks/useHashRouter';
+import { isFeatureEnabled } from '../featureFlags';
 import { useStoreContext } from '../state/StoreContext';
 import { useUnsavedWorkGuard } from '../hooks/useUnsavedWorkGuard';
 import { Home } from '../pages/Home';
@@ -115,7 +116,17 @@ export function AppLayout() {
   }, [currentRoute]);
 
   /**
-   * Render current view based on route
+   * Render current view based on route.
+   *
+   * Routing contract (see shared-contracts "Feature flags & routing"): the default
+   * route (`#/`) renders the legacy form, and the new workspace routes (`#/home`,
+   * `#/workspace`, `#/day/:id`, `#/animal/:id/editor`, `#/validation`) render their
+   * views and remain reachable for development regardless of the feature flags.
+   * The cutover (a single switch in a later phase) flips `animalWorkspace` /
+   * `newDayEditor` on and changes the *default* route to the workspace; nothing else
+   * in this resolution changes. We intentionally do NOT gate the explicit new routes
+   * behind the flags here, so they stay reachable while the default stays legacy.
+   *
    * @returns {React.Element} Current view component
    */
   function renderView() {
@@ -179,6 +190,35 @@ export function AppLayout() {
         </a>
       </div>
 
+      {/*
+        Primary navigation makes the workspace discoverable. Rendered on the new
+        (non-legacy) routes only: the legacy view supplies its own in-page
+        "Form section navigation" landmark, so scoping this here keeps exactly one
+        navigation landmark per route. The "Use Legacy Editor" toggle is hidden until
+        the cutover enables `showLegacyToggle`.
+      */}
+      {currentRoute.view !== 'legacy' && (
+        <nav className="primary-nav" role="navigation" aria-label="Primary">
+          <a
+            href="#/home"
+            aria-current={currentRoute.view === 'home' ? 'page' : undefined}
+          >
+            Home
+          </a>
+          <a
+            href="#/workspace"
+            aria-current={currentRoute.view === 'workspace' ? 'page' : undefined}
+          >
+            Workspace
+          </a>
+          {isFeatureEnabled('showLegacyToggle') && (
+            <a href="#/" className="legacy-toggle">
+              Use Legacy Editor
+            </a>
+          )}
+        </nav>
+      )}
+
       {/* Notice when previously-saved workspace data could not be restored, so a
           discarded (corrupt / incompatible-version) workspace is never silent. */}
       {persistence.loadNotice && (
 
@@ -441,6 +441,37 @@ describe('AppLayout', () => {
     });
   });
 
+  describe('primary navigation', () => {
+    it('is hidden on the legacy route (legacy supplies its own nav)', () => {
+      window.location.hash = '#/';
+      render(<AppLayout />);
+      expect(screen.queryByRole('navigation', { name: /primary/i })).not.toBeInTheDocument();
+    });
+
+    it('renders Home and Workspace links on non-legacy routes', () => {
+      window.location.hash = '#/home';
+      render(<AppLayout />);
+
+      const nav = screen.getByRole('navigation', { name: /primary/i });
+      expect(nav).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: /^home$/i })).toHaveAttribute('href', '#/home');
+      expect(screen.getByRole('link', { name: /^workspace$/i })).toHaveAttribute('href', '#/workspace');
+    });
+
+    it('marks the current route link with aria-current=page', () => {
+      window.location.hash = '#/workspace';
+      render(<AppLayout />);
+      expect(screen.getByRole('link', { name: /^workspace$/i })).toHaveAttribute('aria-current', 'page');
+      expect(screen.getByRole('link', { name: /^home$/i })).not.toHaveAttribute('aria-current');
+    });
+
+    it('hides the "Use Legacy Editor" toggle while showLegacyToggle is off', () => {
+      window.location.hash = '#/home';
+      render(<AppLayout />);
+      expect(screen.queryByRole('link', { name: /use legacy editor/i })).not.toBeInTheDocument();
+    });
+  });
+
   describe('discarded-workspace notice', () => {
     afterEach(() => {
       window.localStorage.clear();