Scope settings loading tests to their section and document onboarding paths

The /settings/notifications and /settings/ai loading tests passed on any skeleton, including the webhook and Recipe search cards' own. They now wait for those sections to settle and check the one skeleton left sits before them, so removing the held section's skeleton fails the test. docs/STATES.md listed /onboarding as the Regulars step. It now lists the Welcome (/onboarding), Regulars (/onboarding/regulars) and Notifications (/onboarding/notifications) steps, each tested at its own path. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Document and test every route's empty, loading and error states
2026-10-10 22:35:40 -04:00 · 2026-10-10 22:10:15 -04:00
30 changed files with 152 additions and 1193 deletions
@@ -82,8 +82,7 @@ sqlc:
 	$(SQLC) generate

 # Fails on any difference from the committed generated code, including new
-# or deleted files. A failing git status is itself a failure: its empty
-# output would otherwise read as "no drift".
+# or deleted files.
 sqlc-check: sqlc
-	@drift="$$(git status --porcelain --untracked-files=all -- $(SQLC_OUT))" || { echo "git status failed; cannot check internal/db for drift"; exit 1; }; \
+	@drift="$$(git status --porcelain --untracked-files=all -- $(SQLC_OUT))"; \
 	if [ -n "$$drift" ]; then echo "internal/db is stale; run make sqlc and commit:"; echo "$$drift"; git diff -- $(SQLC_OUT); exit 1; fi
@@ -1,113 +0,0 @@
-# Accessibility pass
-
-A pass over every route the PWA serves (the routes in [STATES.md](STATES.md))
-for launch, on 2026-10-10. Each route was checked for:
-
- **Keyboard** — every action reachable and operable with the keyboard alone.
- **Focus** — a visible focus ring on everything that takes focus.
- **Names and roles** — what a screen reader announces: switches, checkboxes,
-  the current nav item, dialogs and their labels.
- **Contrast** — text at least 4.5:1 against its ground, for every token pair
-  used for text.
- **Hit targets** — every tap target at least 44 × 44 px.
- **Reduced motion** — what `prefers-reduced-motion: reduce` turns off.
-
-The pass read each screen's markup and stylesheets, computed contrast from
-[tokens.css](../web/src/styles/tokens.css), and checked the fixes' computed
-styles in Chrome. Severity: **high** blocks a task for keyboard or
-screen-reader users; **medium** fails a criterion above but leaves a way
-through; **low** is a gap outside the criteria above, or a polish item. High
-and medium findings are fixed in this pass with a regression test; low ones are
-follow-ups.
-
-## Shared building blocks
-
-Most of the criteria are met once, in the shared components every screen uses:
-
-| Concern | Where | Behaviour |
-| --- | --- | --- |
-| Focus ring | [base.css](../web/src/styles/base.css) | `:focus-visible` draws a 2 px grape (`--color-accent`) outline 2 px out, on every focusable element. |
-| Dialogs | [Sheet](../web/src/ui/Sheet.tsx) | `role="dialog"`, `aria-modal="true"`, and a required `aria-label` or `aria-labelledby` (the type will not compile without one). Opening moves focus in, Tab is trapped, Escape and the scrim close, the page behind is `inert`, and focus returns to the opener. Every sheet is labelled by its visible title. |
-| Toggles | [Toggle](../web/src/ui/Toggle.tsx) | A `<button role="switch" aria-checked>`; Space and Enter flip it; a 44 px hit box around the 40 × 24 track. |
-| Checkboxes | [Checkbox](../web/src/ui/Checkbox.tsx) | A native `<input type="checkbox">` inside its `<label>`; the label row is the 44 px target. |
-| Segmented controls | [Segmented](../web/src/ui/Segmented.tsx) | `role="radiogroup"` of `role="radio"` buttons with a roving tab stop; arrows, Home and End move the choice. |
-| Icon buttons | [IconButton](../web/src/ui/IconButton.tsx) | A required `label` names every icon-only button; the 40 px face sits in a 44 px hit box. |
-| Primary nav | [BottomBar](../web/src/shell/BottomBar.tsx), [Rail](../web/src/shell/Rail.tsx), [Sidebar](../web/src/shell/Sidebar.tsx) | `<nav aria-label="Primary">` of `NavLink`s; the current item has `aria-current="page"`, nested routes (`/plan/shopping`, `/settings/ai`) keep their section current. The bottom bar's inactive items keep their name in a visually hidden label. |
-| Status and errors | [ErrorBanner](../web/src/ui/ErrorBanner.tsx), `role="status"` / `role="alert"` lines | Loading regions are `aria-busy` and named; errors are announced. |
-| Reduced motion | `--motion-scale` in tokens.css; `@media (prefers-reduced-motion: reduce)` in each animated component; `matchMedia` before every Web Animations call | Sheets appear without rising, skeletons stop pulsing, buttons do not scale, toggles and checkboxes do not spring, the nav pill jumps rather than slides, and the Discover deck fades a decided card out with no throw, bump, wiggle or promotion. |
-
-## Routes
-
-| Route | Keyboard | Focus | Names and roles | Hit targets | Reduced motion |
-| --- | --- | --- | --- | --- | --- |
-| App shell (every route) | Nav is links in tab order. | Global ring; **the bottom bar's ring was 1.8:1 on the dark bar — fixed (M2).** | `nav "Primary"`, `aria-current="page"`. | Bottom bar items 62 px tall, ≥ 44 px wide; rail items 56 × 44. | Pill jumps; no label fade. |
-| `/` Home | All tiles, status rows, Recipe, the bell and the Rotation check are buttons or links. | Global ring; tiles, status rows and "We didn't make it" draw a 3 px ring, inside their cards' padding. | Tonight `section`, Status list; the bell is named "Recent updates" and its sheet is labelled by its title. | Recipe pill and "We didn't make it" kept at 44 px. | — |
-| `/onboarding` (all steps) | Buttons and form fields; Add Regular submits on Enter. | Global ring. | `h1` per step; progress bar hidden; "Add Regular" and "Add *pick*" named. | Covered by onboarding tests. | — |
-| `/plan` Draft board (mobile) | **Swap without drag:** each day tile is a button that opens the swap sheet; the sheet's rows are buttons. Previous/Next week, Rebuild week, Push to Calendar are buttons. | Global ring. | Week list "Dinners this week"; swap sheet labelled "Swap *Day*"; Quest log / Regulars radio group. | Tiles ≥ 86 px tall. | Sheet appears without rising. |
-| `/plan` plan manager (tablet, desktop) | **Swap without drag:** every day has a "Swap *Day*" button opening the swap sheet. Dragging also works by keyboard: Enter or Space picks a dinner up, arrows move between days, Enter drops, Escape cancels; a polite live region narrates each step and focus lands on the day's swap button. | Global ring. | Days named by weekday; the panel is "Quest log and Regulars"; each draggable row is described by the keys hint. | **The tablet-portrait Quest log chips were 38 px tall — fixed (M4).** | — |
-| `/plan/shopping` Supply run | Native checkboxes; links to the archive. | Global ring. | Groups named by dinner; native checkbox per item; read-only weeks say "have it" in text, not by colour alone. | Checkbox rows 44 px. | — |
-| `/plan/shopping/archive` | Period radio group; posts are links. | Posts draw a 3 px ring. | Periods named by heading. | — | — |
-| `/discover` | **← Pass, → Try it** anywhere on the page (not while typing, nor with a sheet open); Pass and Try it are also buttons; the Quest log pill opens its sheet. | Global ring. | Only the top card is exposed, labelled by its name; cards behind are `aria-hidden` and `inert`; Try it / Pass labels are shown under the buttons. | Pass and Try it 62 px; Quest log pill 44 px. | Card fades out; no throw, bump, wiggle, snap-back spring or promotion. |
-| `/quick` Quick dinners | Tab radio group; add buttons; More link. | Global ring; More draws a 3 px ring. | Rows named by idea; "Added" is a status. | Covered by Quick dinners tests. | — |
-| `/cook-from-pantry` | Field adds an ingredient on Enter; chips' remove buttons; Find ideas. | The field rings as a whole (`:focus-within`). | Ingredients list "Ingredients on hand"; idea cards named. | Chip remove buttons 44 px. | — |
-| `/dinner/:id` (phone) | Buttons for Favorite, Add to week, back. | Global ring. | Favorite is `aria-pressed`; Add to week sheet labelled. | Favorite 52 px. | — |
-| `/dinner/:id` Kitchen reading mode | ← / → move steps (not while typing, nor with a sheet open); Previous and Next step buttons; text size radio group; ingredient checkboxes. | **The text-size pill clipped its focus ring — fixed (M3).** | Keep screen on is a `role="switch"`; ingredients are native checkboxes; the current step is `aria-current="step"`. | Checkboxes 44 px rows. | — |
-| `/settings` | Rows are links; on tablet, a `tablist` with arrow keys. | Global ring. | Tabs `role="tab"` / `tabpanel`. | Covered by Settings tests. | — |
-| `/settings/notifications` | Every channel is a switch; reminder time button; webhook form. | Global ring. | Each switch named "*Event*: *Channel*"; the matrix is a named group; the webhook sheet is labelled. | Toggle hit box 44 px. | — |
-| `/settings/ai` | Selects, slider, Add/Replace key. | Global ring. | Native `select`s and range input with labels; key sheet labelled. | Covered by AI settings tests. | — |
-| `/settings/household` | Selects; time zone list of buttons. | Global ring. | The chosen time zone is `aria-pressed`. | Zone options 48 px. | — |
-| `/settings/regulars` | Add, edit and favourite buttons; method selects; recipe search. | Global ring. | Favourite is `aria-pressed`; edit sheet labelled. | Covered by Regulars tests. | — |
-| `/settings/calendar` | Connect link; calendar select. | Global ring. | Reconnect problems are `role="alert"`. | — | — |
-
-## Text contrast
-
-WCAG AA asks 4.5:1 for normal-size text. Every colour a stylesheet gives text,
-on every ground it is drawn on:
-
-| Text token | Grounds | Lowest ratio |
-| --- | --- | --- |
-| `--color-text` | bg, surface, neutral-100, neutral-200, accent-100, accent-200, accent-2-100, accent-2-200, accent-2-300 | 11.10 (on accent-2-300) |
-| `--color-neutral-700` | bg, surface, neutral-100, neutral-200, accent-100, accent-200, accent-2-100, accent-2-200 | 5.22 (on accent-200) |
-| `--color-neutral-800` | the same light grounds | 7.90 |
-| `--color-neutral-900` | the same light grounds | 11.18 |
-| `--color-accent` | the same light grounds | 7.16 |
-| `--color-accent-700` | the same light grounds | 5.76 |
-| `--color-accent-800` | the same light grounds | 8.69 |
-| `--color-accent-2-800` | the same light grounds | 7.51 |
-| `--color-accent-2-900` | the light grounds and accent-2-300 | 9.51 (on accent-2-300) |
-| `--on-accent` | accent, accent-800, neutral-800 | 8.39 (on accent) |
-| `--color-bg` | text, neutral-800 | 9.26 (on neutral-800) |
-| `--color-neutral-400` | text (the bottom bar's inactive items) | 8.28 |
-
-`--color-neutral-600` (3.5:1 on surface, 4.0:1 on bg) was used for muted text
-in five places and failed — fixed (M1). [contrast.test.ts](../web/src/contrast.test.ts)
-checks every pair above from tokens.css and fails if any stylesheet gives text a
-colour token not in this table.
-
-Non-text: the teal Try it button and teal "+" buttons draw a light icon on
-`--color-accent-2-600` at 3.73:1, which meets the 3:1 asked of icons; their
-names are text elsewhere (the shown label, or `aria-label`).
-
-## Findings
-
-### Fixed in this pass
-
-| # | Severity | Route | Finding | Fix | Regression test |
-| --- | --- | --- | --- | --- | --- |
-| M1 | Medium | `/plan`, `/dinner/:id`, `/cook-from-pantry` | Muted text in `--color-neutral-600` at 3.5–4.0:1: the swapping day's dinner and start-by time, Regulars already this week in the swap sheet, ingredients set out and steps done in Kitchen reading mode, and the ingredient field's placeholder. | `--color-neutral-700` (≥ 5.4:1 on bg and surface); still muted against `--color-text`, and set-out ingredients keep their strike-through. | [contrast.test.ts](../web/src/contrast.test.ts); the swapping-tile and done-step colour assertions in [PlanPage.test.tsx](../web/src/plan/PlanPage.test.tsx) and [KitchenReading.test.tsx](../web/src/dinners/KitchenReading.test.tsx). |
-| M2 | Medium | Every route (phone) | The bottom bar's focus ring was the global grape ring on the near-black bar: 1.8:1, nearly invisible. | The bar's items ring in `--on-accent` (15.4:1 on the bar). | "rings a focused item in on-accent ink" in [BottomBar.test.tsx](../web/src/shell/BottomBar.test.tsx). |
-| M3 | Medium | `/dinner/:id` Kitchen reading mode | The text-size pill hides overflow, so the focus ring of the chosen size — drawn outside it — was cut off top and bottom, and in grape on the grape fill. | The ring sits 4 px inside the size, in `--on-accent` (8.4:1 on grape). Only the chosen size takes focus (roving tab stop). | "rings the focused size inside the clipped pill" in [KitchenReading.test.tsx](../web/src/dinners/KitchenReading.test.tsx). |
-| M4 | Medium | `/plan` (tablet portrait, 768–1179 px) | The Quest log strip's draggable chips were 38 px tall (28 px photo, 3 px padding, 2 px border). | The chip button keeps a 44 × 44 px minimum. | The strip test's `expectMinHitArea` in [PlanPage.test.tsx](../web/src/plan/PlanPage.test.tsx). |
-
-No high findings.
-
-### Follow-ups (low)
-
-| # | Route | Finding | Suggested follow-up |
-| --- | --- | --- | --- |
-| L1 | Every route with a checkbox | An unchecked checkbox's `--color-neutral-400` border is 1.9:1 on bg — below the 3:1 WCAG asks of a control's boundary. Its label row still names and reveals it. | Darken the border (for example `--color-neutral-600`, 4.0:1) with the design owner. |
-| L2 | Settings, Kitchen reading mode | An off toggle's `--color-neutral-300` track is 1.4:1 on bg; the knob's position and the switch's name carry the state. | Give the off track a ≥ 3:1 edge with the design owner. |
-| L3 | `/discover` | The ← / → shortcuts are not announced to screen readers. | Add `aria-keyshortcuts` to Pass and Try it. |
-| L4 | `/discover` | Deciding the last card replaces Pass and Try it with "All caught up", and focus falls back to the page. | Move focus to "Get more now" when the deck empties. |
-| L5 | `/discover` | A decision is not announced; the next card's name appears silently. | A polite status ("Added to the Quest log" / "Passed") after each decision. |
-| L6 | `/plan` (mobile) | A day tile's name is its day and dinner ("MON Beef tacos"); it does not say it opens the swap sheet. | Add "Swap" to the tile's accessible name. |
@@ -79,7 +79,6 @@ type Auth struct {
 	provider *oidc.Provider
 	client   *http.Client
 	cookie   loginCookie
-	pending  *PendingStates
 	sessions Sessions
 	allowed  []string
 	// endSessionURL is the provider's end_session_endpoint; logout ends
@@ -158,7 +157,6 @@ func New(ctx context.Context, cfg Config, sessions Sessions, logger *slog.Logger
 		client:        client,
 		allowed:       slices.Clone(cfg.AllowedGroups),
 		cookie:        newLoginCookie(cfg.SecretKey),
-		pending:       NewPendingStates(loginCookieTTL),
 		sessions:      sessions,
 		endSessionURL: discovered.EndSessionURI,
 		logger:        logger,
@@ -252,13 +250,7 @@ func (a *Auth) login(w http.ResponseWriter, r *http.Request) {
 		Verifier: oauth2.GenerateVerifier(),
 		Return:   returnTo,
 	}
-	now := time.Now()
-	if err := a.pending.Add(state.State, now); err != nil {
-		a.logger.WarnContext(r.Context(), "login refused", "error", err)
-		http.Error(w, "too many sign-ins in progress; try again later", http.StatusServiceUnavailable)
-		return
-	}
-	if err := a.cookie.set(w, state, now); err != nil {
+	if err := a.cookie.set(w, state, time.Now()); err != nil {
 		a.logger.ErrorContext(r.Context(), "set login cookie", "error", err)
 		http.Error(w, "internal error", http.StatusInternalServerError)
 		return
@@ -270,7 +262,7 @@ func (a *Auth) login(w http.ResponseWriter, r *http.Request) {
 }

 // callback completes the flow: it checks state against the login cookie,
-// consumes it, exchanges the code, verifies the ID token and nonce, then starts a session
+// exchanges the code, verifies the ID token and nonce, then starts a session
 // if the account is in an allowed group. Membership is checked on every
 // login, so an account removed from the group is refused at its next one.
 func (a *Auth) callback(w http.ResponseWriter, r *http.Request) {
@@ -291,13 +283,6 @@ func (a *Auth) callback(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "sign-in state mismatch; start again", http.StatusBadRequest)
 		return
 	}
-	// A copy of the cookie verifies until it expires, so the state is
-	// single-use only because it is consumed here.
-	if !a.pending.Consume(state.State) {
-		a.logger.WarnContext(ctx, "login callback state already used")
-		http.Error(w, "sign-in state mismatch; start again", http.StatusBadRequest)
-		return
-	}
 	if q.Get("error") != "" {
 		// error and error_description are provider-supplied text; only the
 		// fixed category is logged.
@@ -497,59 +497,6 @@ func TestCallbackDefaultReturnPath(t *testing.T) {
 	}
 }

-// A saved copy of the login cookie still verifies until it expires, so a
-// replay with a second valid code is refused only because the server
-// consumed the state on first use.
-func TestCallbackRefusesReplayedLoginState(t *testing.T) {
-	t.Parallel()
-	h := newHarness(t)
-	l := h.login(t, LoginPath)
-	idToken := h.provider.signRS256(h.provider.claims(l.query.Get("nonce")))
-
-	if resp := h.callback(l, l.query.Get("state"), idToken); resp.StatusCode != http.StatusSeeOther {
-		t.Fatalf("first callback status = %d, want 303", resp.StatusCode)
-	}
-	resp := h.callback(l, l.query.Get("state"), idToken)
-	if resp.StatusCode != http.StatusBadRequest {
-		t.Errorf("replayed callback status = %d, want 400", resp.StatusCode)
-	}
-	if n := len(h.sessions.started()); n != 1 {
-		t.Errorf("%d sessions started, want 1", n)
-	}
-	assertLoginCookieCleared(t, resp)
-}
-
-// Pending login states live in memory, so a login started before a restart
-// fails closed after it even though its cookie still verifies.
-func TestCallbackRefusesLoginStartedBeforeRestart(t *testing.T) {
-	t.Parallel()
-	h := newHarness(t)
-	l := h.login(t, LoginPath)
-
-	restarted, err := New(context.Background(), Config{
-		Issuer:        h.provider.issuer(),
-		ClientID:      testClientID,
-		ClientSecret:  testClientSecret,
-		PublicURL:     testPublicURL,
-		SecretKey:     []byte("server-secret-key"),
-		AllowedGroups: testAllowedGroups,
-	}, h.sessions, slog.New(slog.DiscardHandler))
-	if err != nil {
-		t.Fatal(err)
-	}
-	r := chi.NewRouter()
-	restarted.Mount(r)
-	h.router = r
-
-	resp := h.callback(l, l.query.Get("state"), h.provider.signRS256(h.provider.claims(l.query.Get("nonce"))))
-	if resp.StatusCode != http.StatusBadRequest {
-		t.Errorf("callback after restart status = %d, want 400", resp.StatusCode)
-	}
-	if n := len(h.sessions.started()); n != 0 {
-		t.Errorf("%d sessions started, want none", n)
-	}
-}
-
 func TestCallbackRejected(t *testing.T) {
 	t.Parallel()

@@ -872,44 +819,6 @@ func TestLoginCookieExpires(t *testing.T) {
 	}
 }

-func TestPendingStates(t *testing.T) {
-	t.Parallel()
-	p := NewPendingStates(time.Minute)
-	now := time.Now()
-	if err := p.Add("first", now); err != nil {
-		t.Fatal(err)
-	}
-	if !p.Consume("first") {
-		t.Error("Consume of a pending state = false")
-	}
-	if p.Consume("first") {
-		t.Error("second Consume of a state = true")
-	}
-	if p.Consume("never-added") {
-		t.Error("Consume of an unknown state = true")
-	}
-
-	for i := range maxPendingStates - 1 {
-		if err := p.Add(fmt.Sprint("s", i), now); err != nil {
-			t.Fatalf("Add %d: %v", i, err)
-		}
-	}
-	// "first" was consumed but has not expired, so it still counts.
-	if err := p.Add("over", now); !errors.Is(err, ErrTooManyPending) {
-		t.Errorf("Add past the bound = %v, want ErrTooManyPending", err)
-	}
-	// Once the earlier states expire, they are forgotten and a new one fits.
-	if err := p.Add("later", now.Add(time.Minute)); err != nil {
-		t.Errorf("Add after expiry: %v", err)
-	}
-	if p.Consume("s0") {
-		t.Error("an expired state was still pending")
-	}
-	if !p.Consume("later") {
-		t.Error("the state added after expiry is not pending")
-	}
-}
-
 func TestLoginRejectsOffOriginReturn(t *testing.T) {
 	t.Parallel()
 	h := newHarness(t)
@@ -10,7 +10,6 @@ import (
 	"net/http"
 	"net/url"
 	"strings"
-	"sync"
 	"time"
 )

@@ -154,73 +153,6 @@ func (c FlowCookie) Read(r *http.Request, v flowValue, now time.Time) error {
 	return nil
 }

-// maxPendingStates bounds each flow's pending states. The login route is
-// unauthenticated, so without a bound anyone could grow the set without
-// limit; one household never has close to this many flows in progress.
-const maxPendingStates = 10000
-
-// ErrTooManyPending means a flow's pending states are at maxPendingStates,
-// so a new flow is refused until older ones expire.
-var ErrTooManyPending = errors.New("too many sign-in flows in progress")
-
-// PendingStates holds the state of every redirect flow started and not yet
-// completed, until its flow cookie expires. A copy of a flow cookie verifies
-// until it expires, so a flow is single-use only because its callback
-// consumes the state here. The states live in memory — MealQuest runs as one
-// process — so a flow started before a restart fails closed after it.
-type PendingStates struct {
-	ttl    time.Duration
-	mu     sync.Mutex
-	states map[string]time.Time
-	// order is every added state in the order added. Every state is pending
-	// for the same ttl, so it is also expiry order and Add forgets expired
-	// states from its front.
-	order []pendingState
-}
-
-type pendingState struct {
-	state   string
-	expires time.Time
-}
-
-// NewPendingStates returns an empty set whose states are pending for ttl,
-// the flow cookie's lifetime.
-func NewPendingStates(ttl time.Duration) *PendingStates {
-	return &PendingStates{ttl: ttl, states: map[string]time.Time{}}
-}
-
-// Add records state, started at now, as pending and forgets expired ones.
-// It fails with ErrTooManyPending when maxPendingStates are pending.
-func (p *PendingStates) Add(state string, now time.Time) error {
-	p.mu.Lock()
-	defer p.mu.Unlock()
-	expired := 0
-	for expired < len(p.order) && !now.Before(p.order[expired].expires) {
-		delete(p.states, p.order[expired].state)
-		expired++
-	}
-	p.order = p.order[expired:]
-	// The bound counts every unexpired state, consumed or not: a consumed
-	// state leaves states at once but order only when it expires.
-	if len(p.order) >= maxPendingStates {
-		return ErrTooManyPending
-	}
-	expires := now.Add(p.ttl)
-	p.states[state] = expires
-	p.order = append(p.order, pendingState{state: state, expires: expires})
-	return nil
-}
-
-// Consume removes state from the pending states, reporting whether it was
-// there.
-func (p *PendingStates) Consume(state string) bool {
-	p.mu.Lock()
-	defer p.mu.Unlock()
-	_, ok := p.states[state]
-	delete(p.states, state)
-	return ok
-}
-
 // returnPath validates the optional post-login return path. Empty means "/".
 // Only same-origin absolute paths are allowed: no scheme, host, protocol-
 // relative "//" prefix, backslashes or control characters.
@@ -137,9 +137,10 @@ type Service struct {
 	account sync.Mutex

 	// pending holds the state of every connect started and not yet
-	// completed. Complete consumes a state once, so a replayed cookie finds
-	// it gone.
-	pending *auth.PendingStates
+	// completed, with when it expires. Complete consumes a state once, so a
+	// replayed cookie finds it gone.
+	pendingMu sync.Mutex
+	pending   map[string]time.Time
 }

 // NewService returns the service over st, sealing refresh tokens with box.
@@ -174,7 +175,7 @@ func NewService(st *store.Store, box *secretbox.Box, cfg Config) (*Service, erro
 		cookie:      auth.NewFlowCookie(connectCookieName, connectCookieKeyLabel, connectCookieTTL, cfg.SecretKey),
 		retryDelay:  firstRetryDelay,
 		now:         time.Now,
-		pending:     auth.NewPendingStates(connectCookieTTL),
+		pending:     map[string]time.Time{},
 	}, nil
 }

@@ -209,12 +210,10 @@ func (s *Service) Connect(w http.ResponseWriter, session auth.Session) (string,
 		Session:  sessionBinding(session),
 	}
 	now := s.now()
-	if err := s.pending.Add(state.State, now); err != nil {
-		return "", fmt.Errorf("gcal: %w", err)
-	}
 	if err := s.cookie.Set(w, &state, now); err != nil {
 		return "", fmt.Errorf("gcal: set connect cookie: %w", err)
 	}
+	s.addPending(state.State, now)
 	return s.oauth.AuthCodeURL(state.State,
 		oauth2.AccessTypeOffline,
 		oauth2.ApprovalForce,
@@ -244,7 +243,7 @@ func (s *Service) Complete(w http.ResponseWriter, r *http.Request, session auth.
 	}
 	// A copy of the cookie verifies until it expires, so the state is
 	// single-use only because it is consumed here.
-	if !s.pending.Consume(state.State) {
+	if !s.consumePending(state.State) {
 		return fmt.Errorf("%w: already used", ErrBadState)
 	}
 	if q.Get("error") != "" {
@@ -277,6 +276,29 @@ func (s *Service) Complete(w http.ResponseWriter, r *http.Request, session auth.
 	return s.store(ctx, sealed)
 }

+// addPending records state, started at now, as pending until the connect
+// cookie expires, and forgets expired ones.
+func (s *Service) addPending(state string, now time.Time) {
+	s.pendingMu.Lock()
+	defer s.pendingMu.Unlock()
+	for k, expires := range s.pending {
+		if !now.Before(expires) {
+			delete(s.pending, k)
+		}
+	}
+	s.pending[state] = now.Add(connectCookieTTL)
+}
+
+// consumePending removes state from the pending states, reporting whether
+// it was there.
+func (s *Service) consumePending(state string) bool {
+	s.pendingMu.Lock()
+	defer s.pendingMu.Unlock()
+	_, ok := s.pending[state]
+	delete(s.pending, state)
+	return ok
+}
+
 // checkScopes fails with ErrScopes unless token's granted scopes include
 // every scope in Scopes. Google lets the household untick a permission on
 // the consent screen and reports what was granted in "scope".
@@ -1,86 +0,0 @@
-// Text contrast over the design tokens (docs/A11Y.md, "Text contrast"). Every
-// colour a stylesheet gives text must be a token listed in TEXT_GROUNDS, and
-// every pair listed there must reach WCAG AA's 4.5:1 for normal-size text.
-import { describe, expect, it } from 'vitest'
-import tokens from './styles/tokens.css?raw'
-
-const stylesheets = import.meta.glob<string>(['./**/*.css', '!./styles/tokens.css'], {
-  query: '?raw',
-  import: 'default',
-  eager: true,
-})
-
-// The grounds MealQuest's pages, cards, rows and tinted fills use.
-const LIGHT_GROUNDS = [
-  '--color-bg',
-  '--color-surface',
-  '--color-neutral-100',
-  '--color-neutral-200',
-  '--color-accent-100',
-  '--color-accent-200',
-  '--color-accent-2-100',
-  '--color-accent-2-200',
-]
-
-// Each text colour token, with every ground it is drawn on.
-const TEXT_GROUNDS: Record<string, string[]> = {
-  '--color-text': [...LIGHT_GROUNDS, '--color-accent-2-300'],
-  '--color-neutral-700': LIGHT_GROUNDS,
-  '--color-neutral-800': LIGHT_GROUNDS,
-  '--color-neutral-900': LIGHT_GROUNDS,
-  '--color-accent': LIGHT_GROUNDS,
-  '--color-accent-700': LIGHT_GROUNDS,
-  '--color-accent-800': LIGHT_GROUNDS,
-  '--color-accent-2-800': LIGHT_GROUNDS,
-  '--color-accent-2-900': [...LIGHT_GROUNDS, '--color-accent-2-300'],
-  // Light ink on the grape fills (buttons, the active nav pill, the chosen
-  // text size) and on the dark ones (the Offline pill).
-  '--on-accent': ['--color-accent', '--color-accent-800', '--color-neutral-800'],
-  // The dark pill button and the chosen settings tab.
-  '--color-bg': ['--color-text', '--color-neutral-800'],
-  // The bottom bar's inactive items, on the dark bar.
-  '--color-neutral-400': ['--color-text'],
-}
-
-function hex(name: string): string {
-  const value = new RegExp(`^\\s*${name}:\\s*(#[0-9a-fA-F]{6})\\b`, 'm').exec(tokens)?.[1]
-  if (value === undefined) throw new Error(`${name} is not a hex colour in tokens.css`)
-  return value
-}
-
-// Relative luminance, per WCAG 2.
-function luminance(colour: string): number {
-  const [r, g, b] = [1, 3, 5].map((i) => {
-    const c = Number.parseInt(colour.slice(i, i + 2), 16) / 255
-    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
-  })
-  return 0.2126 * r! + 0.7152 * g! + 0.0722 * b!
-}
-
-function contrast(a: string, b: string): number {
-  const [light, dark] = [luminance(hex(a)), luminance(hex(b))].sort((x, y) => y - x)
-  return (light! + 0.05) / (dark! + 0.05)
-}
-
-describe('text contrast', () => {
-  const pairs = Object.entries(TEXT_GROUNDS).flatMap(([text, grounds]) => grounds.map((ground) => [text, ground] as const))
-
-  it.each(pairs)('%s on %s reaches 4.5:1', (text, ground) => {
-    expect(contrast(text, ground)).toBeGreaterThanOrEqual(4.5)
-  })
-
-  it('gives text only the colour tokens checked above', () => {
-    expect(Object.keys(stylesheets).length).toBeGreaterThan(0)
-    const unchecked = Object.entries(stylesheets).flatMap(([path, css]) =>
-      Array.from(css.matchAll(/(?<![\w-])color:\s*([^;}]+)/g))
-        .map((match) => match[1]!.trim())
-        .filter((value) => value !== 'inherit')
-        .filter((value) => {
-          const token = /^var\((--[\w-]+)\)$/.exec(value)?.[1]
-          return token === undefined || !(token in TEXT_GROUNDS)
-        })
-        .map((value) => `${path}: color: ${value}`),
-    )
-    expect(unchecked).toEqual([])
-  })
-})
@@ -341,13 +341,6 @@
  box-shadow: none;
 }

-/* The pill clips anything outside it, so the focus ring sits inside the
-   size, drawn in on-accent ink: only the chosen size takes focus. */
-.readingHeader .textSize > :focus-visible {
-  outline-color: var(--on-accent);
-  outline-offset: -4px;
-}
-
 .readingHeader .textSize > :nth-child(1) {
  font-size: 13px;
 }
@@ -440,7 +433,7 @@
 }

 .setOut {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-600);
  text-decoration: line-through;
 }

@@ -522,7 +515,7 @@
 }

 .stepDone {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-600);
 }

 .stepCurrent {
@@ -325,7 +325,7 @@ describe('Kitchen reading mode', () => {
      // The step done is muted, its number a check.
      expect(steps()[0]!.textContent).toBe('Rinse the rice and start it cooking.')
      expect(steps()[0]!.querySelector('svg')).not.toBeNull()
-      expect(declaredStyle(steps()[0]!).color).toBe('var(--color-neutral-700)')
+      expect(declaredStyle(steps()[0]!).color).toBe('var(--color-neutral-600)')
      expect(declaredStyle(steps()[0]!).fontSize).toBe('calc(18px * var(--reading-scale))')

      fireEvent.click(next)
@@ -381,21 +381,6 @@ describe('Kitchen reading mode', () => {
  })

  describe('text size', () => {
-    it('rings the focused size inside the clipped pill, in on-accent ink on the grape', async () => {
-      serve()
-      await renderPage()
-      const medium = screen.getByRole('radio', { name: 'Medium text' })
-      // A key press makes the next focus a keyboard one, which
-      // :focus-visible matches.
-      fireEvent.keyDown(document.body, { key: 'Tab' })
-      medium.focus()
-      expect(medium.matches(':focus-visible')).toBe(true)
-      // The pill hides overflow, so a ring outside the size would be cut off.
-      expect(declaredStyle(medium).getPropertyValue('outline-offset')).toBe('-4px')
-      expect(declaredStyle(medium).getPropertyValue('outline-color')).toBe('var(--on-accent)')
-      expect(declaredStyle(medium).background).toBe('var(--color-accent)')
-    })
-
    it('is remembered on this device', async () => {
      serve()
      const view = await renderPage()
@@ -71,7 +71,7 @@
 }

 .input::placeholder {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-600);
 }

 .notice {
@@ -203,7 +203,7 @@

 .swapping .dinner,
 .swapping .startBy {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-600);
 }

 .rebuildCell {
@@ -410,12 +410,6 @@
  list-style: none;
 }

-/* An upright tablet's week: four days over three, every column wide enough
-   that nothing scrolls sideways. */
-.portraitPage .week {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
 .column {
  min-width: 0;
  display: flex;
@@ -8,7 +8,6 @@ import { SupplyRunPage } from '../shopping/SupplyRunPage.tsx'
 import { cacheFallbackHeader } from '../sw/routes.ts'
 import { HOUSEHOLD_SETTINGS } from '../test/ApiProviders.tsx'
 import { declaredStyle } from '../test/cssRules.ts'
-import { expectMinHitArea } from '../test/hitArea.ts'
 import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
 import { mockViewport } from '../test/matchMedia.ts'
 import { ago, cooking, duration, PlanPage } from './PlanPage.tsx'
@@ -1223,7 +1222,7 @@ describe('PlanPage', () => {
      expect(declaredStyle(friday).background).toBe('var(--color-bg)')
      expect(declaredStyle(friday).boxShadow).toBe('inset 0 0 0 2px var(--color-accent)')
      expect(declaredStyle(within(friday).getByText('FRI · SWAPPING…')).color).toBe('var(--color-accent-700)')
-      expect(declaredStyle(within(friday).getByText('Pizza night')).color).toBe('var(--color-neutral-700)')
+      expect(declaredStyle(within(friday).getByText('Pizza night')).color).toBe('var(--color-neutral-600)')

      // "Quest log · N | Regulars · N", on the Quest log first.
      expect(await within(sheet).findByRole('radio', { name: 'Quest log · 1', checked: true })).toBeInTheDocument()
@@ -1392,64 +1391,6 @@ describe('PlanPage', () => {
      expect(within(tile('FRI')).getByText('Pizza night')).toBeInTheDocument()
    })

-    it("still shows a swap's failure on coming back to the week, through another, and asks for the swap again only on Retry", async () => {
-      const fetchMock = stubServer({
-        [`GET ${THIS_WEEK}`]: () => jsonResponse(200, planBody('draft')),
-        [`GET ${NEXT_WEEK}`]: () => errorResponse(404, 'not_found'),
-        [`GET /api/v1/plans/2026-10-19`]: () => errorResponse(404, 'not_found'),
-        ...lists,
-        [`PUT ${FRIDAY}`]: () => errorResponse(409, 'dinner_not_plannable'),
-      })
-      await renderPage()
-
-      fireEvent.click(await within(await openFriday()).findByRole('button', { name: /Lemon orzo/ }))
-      expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't swap Friday's dinner. dinner_not_plannable message")
-      fireEvent.click(screen.getByRole('button', { name: 'Next week' }))
-      expect(await screen.findByRole('button', { name: 'Draft this week' })).toBeInTheDocument()
-      fireEvent.click(screen.getByRole('button', { name: 'Next week' }))
-      await waitFor(() => expect(screen.getByTestId('search')).toHaveTextContent('?week=2026-10-19'))
-      expect(await screen.findByRole('button', { name: 'Draft this week' })).toBeInTheDocument()
-      fireEvent.click(screen.getByRole('button', { name: 'Previous week' }))
-      await waitFor(() => expect(screen.getByTestId('search')).toHaveTextContent('?week=2026-10-12'))
-      fireEvent.click(screen.getByRole('button', { name: 'Previous week' }))
-
-      expect(await screen.findByRole('alert')).toHaveTextContent("Couldn't swap Friday's dinner. dinner_not_plannable message")
-      expect(within(tile('FRI')).getByText('Pizza night')).toBeInTheDocument()
-      expect(puts(fetchMock)).toHaveLength(1)
-    })
-
-    it('reads the plan again when the dinner is already on another day, and offers to choose another rather than send it again', async () => {
-      // Meanwhile lemon orzo was planned on Wednesday.
-      let read = planBody('draft')
-      const fetchMock = stubServer({
-        [`GET ${THIS_WEEK}`]: () => jsonResponse(200, read),
-        ...lists,
-        [`PUT ${FRIDAY}`]: () => errorResponse(409, 'dinner_already_planned'),
-      })
-      await renderPage()
-
-      const sheet = await openFriday()
-      read = planBody('draft')
-      read.days[2] = { ...read.days[2]!, dinner: { ...read.days[2]!.dinner, id: 'q1', name: 'Lemon orzo' }, is_new: true }
-      fireEvent.click(await within(sheet).findByRole('button', { name: /Lemon orzo/ }))
-
-      const alert = await screen.findByRole('alert')
-      expect(alert).toHaveTextContent("Couldn't swap Friday's dinner. Lemon orzo is already on another day this week.")
-      expect(within(alert).queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument()
-      await waitFor(() => expect(within(tile('WED · NEW')).getByText('Lemon orzo')).toBeInTheDocument())
-      expect(within(tile('FRI')).getByText('Pizza night')).toBeInTheDocument()
-
-      // Choosing again opens Friday's sheet on the plan read, where lemon
-      // orzo is already this week; nothing is sent again.
-      fireEvent.click(within(alert).getByRole('button', { name: 'Choose another dinner' }))
-      const again = screen.getByRole('dialog', { name: 'Swap Friday' })
-      expect(screen.queryByRole('alert')).not.toBeInTheDocument()
-      const orzo = within(within(again).getByRole('list', { name: 'Quest log' })).getByRole('listitem')
-      expect(within(orzo).getByText('Already this week')).toBeInTheDocument()
-      expect(within(orzo).queryByRole('button')).not.toBeInTheDocument()
-      expect(puts(fetchMock)).toHaveLength(1)
-    })
-
    it('waits for a pending swap before Rebuild week, keeping its failure', async () => {
      let refuse!: () => void
      const fetchMock = stubServer({
@@ -1703,9 +1644,6 @@ describe.each([
      const chip = within(within(strip).getByRole('list', { name: 'Quest log dinners' })).getByRole('listitem')
      expect(chip).toHaveTextContent('Lemon orzo')
      expect(declaredStyle(within(chip).getByRole('img', { hidden: true, name: 'Lemon orzo' })).width).toBe('28px')
-      // The 28 px photo makes a 38 px chip; the chip is a button, so it
-      // keeps the 44 px tap minimum.
-      expectMinHitArea(within(chip).getByRole('button', { name: /Lemon orzo/ }))
      // The strip follows the grid.
      const grid = await screen.findByRole('list', { name: 'Dinners this week' })
      expect(grid.compareDocumentPosition(strip) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
@@ -8,7 +8,7 @@ import { Confirm } from '../settings/LeaveGuard.tsx'
 import { methodLabels } from '../settings/RegularsSettingsPage.tsx'
 import { formatClockTime, useHouseholdSettings } from '../settings/api.ts'
 import { supplyRunScreen, useGenerateSupplyRun, useSupplyRun, WEEK_PARAM } from '../shopping/api.ts'
-import { useBreakpoint, useOrientation, type Breakpoint } from '../shell/useBreakpoint.ts'
+import { useBreakpoint, type Breakpoint } from '../shell/useBreakpoint.ts'
 import { Button } from '../ui/Button.tsx'
 import buttonStyles from '../ui/Button.module.css'
 import { EmptyState } from '../ui/EmptyState.tsx'
@@ -127,12 +127,6 @@ export function ago(at: Date, now: Date): string {
  return days === 1 ? '1 day ago' : `${days} days ago`
 }

-// alreadyPlanned says whether a swap was refused because its dinner is
-// already on another day of the week: sending it again cannot succeed.
-function alreadyPlanned(error: Error): boolean {
-  return error instanceof ApiError && error.code === 'dinner_already_planned'
-}
-
 // pushedToCalendar says whether drafting over a plan of this status needs
 // confirm: it was pushed to Calendar.
 function pushedToCalendar(status: PlanStatus): boolean {
@@ -404,18 +398,9 @@ function WeekBoard({
      </ErrorBanner>
    )
  ) : swap.failed !== null ? (
-    alreadyPlanned(swap.failed.error) ? (
-      // The plan is read again (useSwapDay): the household chooses another
-      // dinner from it rather than sending the refused swap again.
-      <ErrorBanner onRetry={() => openSwap(swap.failed!.swap.date)} retryLabel="Choose another dinner">
-        Couldn't swap {weekdayName(swap.failed.swap.date)}'s dinner. {swap.failed.swap.dinner.name} is already on another day
-        this week.
-      </ErrorBanner>
-    ) : (
-      <ErrorBanner onRetry={() => swapIn(swap.failed!.swap)}>
-        Couldn't swap {weekdayName(swap.failed.swap.date)}'s dinner. {swap.failed.error.message}
-      </ErrorBanner>
-    )
+    <ErrorBanner onRetry={() => swapIn(swap.failed!.swap)}>
+      Couldn't swap {weekdayName(swap.failed.swap.date)}'s dinner. {swap.failed.error.message}
+    </ErrorBanner>
  ) : startDraft.isError ? (
    <ErrorBanner onRetry={rebuild}>Couldn't start drafting this week. {startDraft.error.message}</ErrorBanner>
  ) : result.error !== null ? (
@@ -688,10 +673,8 @@ function PushFailure({ error, cached, onRetry }: { error: Error; cached: boolean
 // week; the week buttons keep ?week= on the week shown. The board keeps its place in the tree across layouts, so crossing a
 // breakpoint keeps a draft being followed. From tablet up a dinner is
 // dragged from the strip or the panel onto a day of the grid to swap it in.
-// An upright tablet lays the week out four days over three.
 export function PlanPage() {
  const layout = useBreakpoint()
-  const orientation = useOrientation()
  const settings = useHouseholdSettings()
  const [params, setParams] = useSearchParams()
  const chosen = params.get(WEEK_PARAM)
@@ -716,11 +699,7 @@ export function PlanPage() {
  }
  return (
    <PlanDragProvider>
-      <div
-        className={[styles.page, styles[`${layout}Page`], layout === 'tablet' && orientation === 'portrait' && styles.portraitPage]
-          .filter(Boolean)
-          .join(' ')}
-      >
+      <div className={`${styles.page} ${styles[`${layout}Page`]}`}>
        <div className={styles.board}>
          {content}
          {layout === 'tablet' && <QuestLogStrip />}
@@ -190,12 +190,7 @@
  padding: 8px;
 }

-/* The 28 px photo makes a 38 px chip; the chip is a button, so it keeps the
-   44 px tap minimum. */
 .chip.draggable {
-  box-sizing: border-box;
-  min-width: 44px;
-  min-height: 44px;
  padding: 3px 12px 3px 3px;
 }

@@ -40,7 +40,7 @@

 /* A dinner already this week: shown, muted, and not a button. */
 .already {
-  color: var(--color-neutral-700);
+  color: var(--color-neutral-600);
 }

 .skeletonRow {
@@ -127,17 +127,6 @@ describe('usePlan', () => {
    ['a method it does not know', (body: ReturnType<typeof planBody>) => (body.days[0]!.dinner.method = 'microwave'), 'method "microwave"'],
    ['no method', (body: ReturnType<typeof planBody>) => Reflect.deleteProperty(body.days[0]!.dinner, 'method'), 'method undefined'],
    ['a sync time that is no instant', (body: ReturnType<typeof planBody>) => (body.calendar_synced_at = 'yesterday'), 'calendar_synced_at "yesterday"'],
-    // Date reads both, in this device's zone: neither says which instant.
-    [
-      'a sync time with no offset',
-      (body: ReturnType<typeof planBody>) => (body.calendar_synced_at = '2026-10-07T15:58:00'),
-      'calendar_synced_at "2026-10-07T15:58:00" is not an instant',
-    ],
-    [
-      'a sync date with no time',
-      (body: ReturnType<typeof planBody>) => (body.calendar_synced_at = '2026-10-07'),
-      'calendar_synced_at "2026-10-07" is not an instant',
-    ],
  ])('refuses a plan with %s', async (_, change, said) => {
    const body = planBody()
    change(body)
@@ -219,72 +208,6 @@ describe('useSwapDay', () => {
    expect(result.current.swap.failed?.error.message).toBe('dinner_not_plannable message')
  })

-  it('leaves a day a later plan read landed, the very day the swap wrote, when the swap of it fails', async () => {
-    const friday = deferred()
-    let read = planBody()
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, read),
-      [`PUT ${FRIDAY}`]: () => friday.reply,
-    })
-    const { result, plan, queryClient } = await renderSwaps()
-
-    // The read finds Friday lemon orzo, field for field the day the swap
-    // wrote: the server has it, whatever this swap's PUT is answered with.
-    const swapped = { date: '2026-10-09', dinner: ORZO.dinner, is_new: true, start_by: null }
-    act(() => result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(plan().days[4]).toEqual(swapped))
-    read = planBody({ 4: { id: 'q1', name: 'Lemon orzo', is_new: true } })
-    await act(() => result.current.plan.refetch())
-    await act(async () => friday.send(errorResponse(500, 'internal')))
-
-    await waitFor(() => expect(queryClient.isMutating()).toBe(0))
-    expect(plan().days[4]).toEqual(swapped)
-    expect(result.current.swap.failed?.error.message).toBe('internal message')
-  })
-
-  it('puts the day back when the swap of it fails with no plan read since, after a later swap of another day', async () => {
-    const friday = deferred()
-    const monday = deferred()
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, planBody()),
-      [`PUT ${FRIDAY}`]: () => friday.reply,
-      [`PUT ${MONDAY}`]: () => monday.reply,
-    })
-    const { result, plan, queryClient } = await renderSwaps()
-
-    act(() => result.current.swap.mutate(ORZO))
-    act(() => result.current.swap.mutate(FISH))
-    await waitFor(() => expect(plan().days[0]!.dinner.name).toBe('Fish tacos'))
-    await act(async () => friday.send(errorResponse(500, 'internal')))
-
-    await waitFor(() => expect(plan().days[4]!.dinner.name).toBe('Dinner 4'))
-    expect(plan().days[0]!.dinner.name).toBe('Fish tacos')
-    await act(async () => monday.send(errorResponse(500, 'internal')))
-    await waitFor(() => expect(queryClient.isMutating()).toBe(0))
-    expect(plan().days.map((day) => day.dinner.name)).toEqual(planBody().days.map((day) => day.dinner.name))
-  })
-
-  it('reads the plan again when the dinner is already on another day of the week, and sends the swap only once', async () => {
-    let read = planBody()
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, read),
-      [`PUT ${FRIDAY}`]: () => errorResponse(409, 'dinner_already_planned'),
-    })
-    const { result, plan, queryClient } = await renderSwaps()
-
-    // Meanwhile lemon orzo was planned on Wednesday.
-    read = planBody({ 2: { id: 'q1', name: 'Lemon orzo', is_new: true } })
-    act(() => result.current.swap.mutate(ORZO))
-
-    await waitFor(() => expect(plan().days[2]!.dinner.name).toBe('Lemon orzo'))
-    expect(plan().days[4]!.dinner.name).toBe('Dinner 4')
-    await waitFor(() => expect(queryClient.isMutating()).toBe(0))
-    expect(result.current.swap.failed?.error.message).toBe('dinner_already_planned message')
-    const sent = vi.mocked(fetch).mock.calls.map(([input, init]) => `${init?.method ?? 'GET'} ${String(input)}`)
-    expect(sent.filter((call) => call === `PUT ${FRIDAY}`)).toHaveLength(1)
-    expect(sent.filter((call) => call === `GET ${PLAN}`)).toHaveLength(2)
-  })
-
  it('refuses to dismiss a pending swap', async () => {
    const friday = deferred()
    stubServer({ [`GET ${PLAN}`]: () => jsonResponse(200, planBody()), [`PUT ${FRIDAY}`]: () => friday.reply })
@@ -430,61 +353,6 @@ describe('week mutations', () => {
    expect(weekMutations(queryClient, LATER)).toEqual([])
  })

-  it("leaves behind a week's settled swaps but for the failure that speaks for it, which stays until its week leaves it behind", async () => {
-    let refuse = true
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, planBody()),
-      [`PUT ${FRIDAY}`]: () => (refuse ? errorResponse(409, 'dinner_not_plannable') : jsonResponse(200, planBody())),
-      [`PUT ${MONDAY}`]: () => jsonResponse(200, planBody({ 0: { id: 'r1', name: 'Fish tacos' } })),
-      [`GET /api/v1/plans/${NEXT}`]: () => errorResponse(404, 'not_found'),
-      [`GET /api/v1/plans/${LATER}`]: () => errorResponse(404, 'not_found'),
-    })
-    const api = createApiClient(fakeLocation('/plan'), createNetworkStatus(window), createVerifiedSession(localStorage))
-    await api.loadMe()
-    const queryClient = createQueryClient()
-    const wrapper = ({ children }: { children: ReactNode }) => (
-      <ApiProvider client={api}>
-        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-      </ApiProvider>
-    )
-    const hook = renderHook(({ week }) => ({ plan: usePlan(week), swap: useSwapDay(week) }), {
-      wrapper,
-      initialProps: { week: WEEK },
-    })
-    await waitFor(() => expect(hook.result.current.plan.isSuccess).toBe(true))
-
-    // Two swaps settle while the week is shown: the earlier is needed for
-    // ordering no longer, and only the latest stays.
-    act(() => hook.result.current.swap.mutate(FISH))
-    act(() => hook.result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(weekMutations(queryClient, WEEK)).toEqual(['swap error']))
-
-    // Leaving the week, through two others, keeps the failure alone.
-    for (const week of [NEXT, LATER, NEXT]) {
-      hook.rerender({ week })
-      await waitFor(() => expect(hook.result.current.plan.isSuccess).toBe(true))
-      expect(weekMutations(queryClient, WEEK)).toEqual(['swap error'])
-    }
-
-    // Coming back shows it; it fails again, and again one stays.
-    hook.rerender({ week: WEEK })
-    expect(hook.result.current.swap.failed?.error.message).toBe('dinner_not_plannable message')
-    act(() => hook.result.current.swap.dismiss())
-    act(() => hook.result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(hook.result.current.swap.failed).not.toBeNull())
-    expect(weekMutations(queryClient, WEEK)).toEqual(['swap error'])
-
-    // A swap that succeeds is left behind once the week is.
-    refuse = false
-    act(() => hook.result.current.swap.dismiss())
-    act(() => hook.result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(hook.result.current.swap.succeeded).not.toBeNull())
-    expect(weekMutations(queryClient, WEEK)).toEqual(['swap success'])
-    hook.rerender({ week: NEXT })
-    await waitFor(() => expect(hook.result.current.plan.isSuccess).toBe(true))
-    expect(weekMutations(queryClient, WEEK)).toEqual([])
-  })
-
  it('keeps a push whose Supply run was not made, settled in a week no longer shown, to be shown on coming back', async () => {
    const nextPush = deferred()
    stubServer({
@@ -1,14 +1,5 @@
 import { useEffect } from 'react'
-import {
-  useMutation,
-  useMutationState,
-  useQuery,
-  useQueryClient,
-  type Mutation,
-  type Query,
-  type QueryClient,
-  type QueryKey,
-} from '@tanstack/react-query'
+import { useMutation, useMutationState, useQuery, useQueryClient, type Mutation, type QueryClient } from '@tanstack/react-query'
 import { ApiError, useApi, type ApiRead } from '../api/index.ts'
 import { isRecord } from '../api/errors.ts'
 import { METHODS, oneOf, photoId, type Method } from '../dinners/api.ts'
@@ -92,16 +83,10 @@ function parseDay(where: string, body: unknown): PlanDay {
  return { date: body.date, dinner, is_new: body.is_new, start_by: body.start_by }
 }

-// RFC3339 is an RFC 3339 instant as the server writes it: a full date and
-// time, to the second or finer, and its offset, Z or ±hh:mm. A date alone,
-// or a time with no offset, which Date would read in this device's zone, is
-// not one.
-const RFC3339 = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/
-
 // syncedAt reads calendar_synced_at, an RFC 3339 instant or null.
 function syncedAt(where: string, value: unknown): Date | null {
  if (value === null) return null
-  const at = typeof value === 'string' && RFC3339.test(value) ? new Date(value) : null
+  const at = typeof value === 'string' ? new Date(value) : null
  if (at === null || Number.isNaN(at.getTime())) {
    throw new Error(`${where}: calendar_synced_at ${JSON.stringify(value)} is not an instant`)
  }
@@ -279,54 +264,38 @@ const weeksShown = new WeakMap<QueryClient, WeeksShown>()
 // time a week is shown, and is never removed, so a swap or push that settles
 // after its Draft board, or the whole Plan, is gone is still collected.
 //
-// A swap or push pending is kept, with every other of its kind and week:
-// an earlier pending one must see those sent after it, across leaving its
-// week and coming back. Once none of a kind and week is pending, only the
-// latest is needed, and the rest are removed, whenever a week is shown or
-// one settles. The latest itself stays while its week is shown. In a week
-// not shown it is removed, unless:
-//
-//   - it is a failed swap: it stays, whatever is shown, until the week's
-//     board leaves it behind (useWeekSwap, Rebuild week, Push to Calendar),
-//     so coming back to the week shows the failure;
-//   - it is a push whose Supply run was not made: the week has no shopping
-//     list until one is made, which settles the push, or a push sent since
-//     replaces it, and making it may still be under way when the week is
-//     left;
-//   - it is a failed push that settled after its week was left: it stays
-//     until a week is next shown, so coming straight back shows it.
-//
-// So once none of its kind is pending, a week keeps at most one settled
-// swap and one settled push, and a week left keeps none but those above:
-// settled swaps and pushes never accumulate.
+// When a week is shown, the settled ones of every other week are removed,
+// unless that week still has one pending: a pending one, and those an
+// earlier pending one must see, stay across leaving its week and coming
+// back. When one settles, the same is done, except that a week's latest,
+// when it failed, stays until a week is next shown, so that coming straight
+// back to it shows the failure. A week's latest push whose Supply run was
+// not made stays whatever is shown: the week has no shopping list until one
+// is made, which settles the push, or a push sent since replaces it, and
+// making it may still be under way when the week is left. The cache holds
+// at most the weeks shown's, those of weeks left pending, one push of each
+// week whose Supply run was not made, and one failure of each week whose
+// last pending one settled since a week was last shown.
 function keepWeekMutations(queryClient: QueryClient): WeeksShown {
  const kept = weeksShown.get(queryClient)
  if (kept !== undefined) return kept
  const mutations = queryClient.getMutationCache()
  // How many times each week is shown at once.
  const shown = new Map<string, number>()
-  // keep says whether the latest of its kind and week, none of which is
-  // pending, stays; settled says a mutation settling swept, not a week
-  // shown.
-  function keep(mutation: Mutation, of: { kind: 'swap' | 'push'; week: string }, settled: boolean): boolean {
-    if (shown.has(of.week)) return true
-    if (of.kind === 'swap') return failed(mutation)
-    return unmade(mutation) || (settled && failed(mutation))
-  }
  function sweep(settled: boolean) {
-    // The mutations of each kind of each week, in the order sent.
-    const sent = new Map<string, { of: { kind: 'swap' | 'push'; week: string }; week: Mutation[] }>()
+    // The mutations of each kind of each week not shown, in the order sent.
+    const left = new Map<string, Mutation[]>()
    for (const mutation of mutations.getAll()) {
      const of = weekMutation(mutation)
-      if (of === null) continue
+      if (of === null || shown.has(of.week)) continue
      const id = `${of.kind} ${of.week}`
-      sent.set(id, { of, week: [...(sent.get(id)?.week ?? []), mutation] })
+      left.set(id, [...(left.get(id) ?? []), mutation])
    }
-    for (const { of, week } of sent.values()) {
+    for (const week of left.values()) {
      if (week.some((mutation) => mutation.state.status === 'pending')) continue
      const latest = week.at(-1)
      for (const mutation of week) {
-        if (mutation === latest && keep(mutation, of, settled)) continue
+        if (mutation === latest && (unmade(mutation) || (settled && failed(mutation)))) continue
        mutations.remove(mutation)
      }
    }
@@ -355,30 +324,6 @@ function useWeekShown(weekStart: string) {
  useEffect(() => keepWeekMutations(queryClient).show(weekStart), [queryClient, weekStart])
 }

-// swapWrites counts, for each plan query, its updates that were a swap's
-// own optimistic write or rollback, not a plan read from the server.
-const swapWrites = new WeakMap<Query, number>()
-
-// serverReads is how many plans read from the server have landed in the
-// plan query: its updates, less the swaps' own writes. A plan read lands
-// whether or not it differs from the plan shown.
-function serverReads(query: Query): number {
-  return query.state.dataUpdateCount - (swapWrites.get(query) ?? 0)
-}
-
-// writeSwap updates the plan query as a swap's own write, which serverReads
-// does not count.
-function writeSwap(queryClient: QueryClient, query: Query, update: (plan: Plan | null | undefined) => Plan | null | undefined) {
-  const before = query.state.dataUpdateCount
-  queryClient.setQueryData<Plan | null>(query.queryKey, update)
-  swapWrites.set(query, (swapWrites.get(query) ?? 0) + query.state.dataUpdateCount - before)
-}
-
-// planQuery is the plan query keyed key, if the query cache has it.
-function planQuery(queryClient: QueryClient, key: QueryKey): Query | undefined {
-  return queryClient.getQueryCache().find({ queryKey: key, exact: true })
-}
-
 // swapKey keys the swaps of the week starting on weekStart in the mutation
 // cache, where they outlive the Draft board that sent them.
 function swapKey(weekStart: string) {
@@ -400,13 +345,9 @@ export type SwapDay = {
 // (PUT /api/v1/plans/{weekStart}/days/{date}). The day shows the dinner at
 // once, NEW when it came from the Quest log, with no start-by time until the
 // server answers with the plan as swapped, which then replaces it. A refused
-// swap puts the day back as it was, unless it has changed again meanwhile:
-// another swap wrote over it, or any plan read from the server landed
-// since, even one with the very day the swap wrote. A swap refused because
-// the dinner is already on another day of the week (409
-// dinner_already_planned) reads the plan again, so the household chooses
-// again from the plan as it is. However the swap ends, the Quest log is
-// read again: the server leaves a dinner on the plan out of it.
+// swap puts the day back as it was, unless it has changed again meanwhile.
+// However the swap ends, the Quest log is read again: the server leaves a
+// dinner on the plan out of it.
 //
 // The week's swaps live in the mutation cache, not in the component, so
 // leaving the week and coming back keeps them: pending and failed are read
@@ -433,7 +374,7 @@ export function useSwapDay(weekStart: string): SwapDay {
  function mutate(chosen: Swap) {
    // isLatest says whether no swap of the week was sent after this one.
    const isLatest = () => mutations.findAll({ mutationKey }).every((other) => other.mutationId <= mutation.mutationId)
-    const mutation = mutations.build<Plan, Error, Swap, { previous: PlanDay; swapped: PlanDay; query: Query; reads: number }>(queryClient, {
+    const mutation = mutations.build<Plan, Error, Swap, { previous: PlanDay; swapped: PlanDay }>(queryClient, {
      mutationKey,
      // Kept until dismissed or settled in a week not shown
      // (keepWeekMutations): a later swap must stay in the cache while an
@@ -446,32 +387,24 @@ export function useSwapDay(weekStart: string): SwapDay {
      },
      onMutate: async ({ date, dinner, fromQuestLog }) => {
        await queryClient.cancelQueries({ queryKey: key })
-        const query = planQuery(queryClient, key)
-        const plan = query?.state.data as Plan | null | undefined
+        const plan = queryClient.getQueryData<Plan | null>(key)
        const previous = plan?.days.find((day) => day.date === date)
-        if (query === undefined || !plan || previous === undefined) {
-          throw new Error(`The week of ${weekStart} has no plan day ${date} to swap.`)
-        }
+        if (!plan || previous === undefined) throw new Error(`The week of ${weekStart} has no plan day ${date} to swap.`)
        const swapped: PlanDay = { date, dinner, is_new: fromQuestLog, start_by: null }
-        writeSwap(queryClient, query, () => ({ ...plan, days: plan.days.map((day) => (day.date === date ? swapped : day)) }))
-        return { previous, swapped, query, reads: serverReads(query) }
+        queryClient.setQueryData<Plan>(key, { ...plan, days: plan.days.map((day) => (day.date === date ? swapped : day)) })
+        return { previous, swapped }
      },
      onSuccess: (plan) => {
        if (isLatest()) queryClient.setQueryData<Plan>(key, plan)
      },
      // The day goes back only while it is still, field for field, the day
-      // this swap wrote, and no plan read from the server has landed since
-      // (serverReads): a later swap that replaced it, or a read that did,
-      // even with the same day, is left alone.
-      onError: (error, _swap, context) => {
-        if (context !== undefined && planQuery(queryClient, key) === context.query && serverReads(context.query) === context.reads) {
-          writeSwap(queryClient, context.query, (plan) =>
-            plan && { ...plan, days: plan.days.map((day) => (sameDay(day, context.swapped) ? context.previous : day)) },
-          )
-        }
-        if (error instanceof ApiError && error.code === 'dinner_already_planned') {
-          void queryClient.invalidateQueries({ queryKey: key })
-        }
+      // this swap wrote: a later swap or plan read that replaced it is left
+      // alone.
+      onError: (_error, _swap, context) => {
+        if (context === undefined) return
+        queryClient.setQueryData<Plan | null>(key, (plan) =>
+          plan && { ...plan, days: plan.days.map((day) => (sameDay(day, context.swapped) ? context.previous : day)) },
+        )
      },
      onSettled: () => queryClient.invalidateQueries({ queryKey: QUEST_LOG_KEY }),
    })
@@ -80,10 +80,7 @@ export function RegularsSettingsPage() {
 // Which sheet is open, for which Regular.
 type Open = { sheet: 'edit' | 'fix'; id: string } | null

-// RegularsManager lists, adds, edits and fixes the recipes of the
-// household's Regulars: this page's body, and the Settings "Regular
-// dinners" sub-tab at tablet and desktop widths.
-export function RegularsManager() {
+function RegularsManager() {
  const regulars = useRegulars()
  const add = useAddRegular()
  const remove = useRemoveRegular()
@@ -104,10 +104,7 @@ describe('SettingsPage', () => {
    expect(await screen.findByText('America/New_York · Dinner at 5:30 pm')).toBeInTheDocument()
    expect(within(row('AI assistant')).getByText('Anthropic · Claude Sonnet')).toBeInTheDocument()
    expect(within(row('Household')).getByText('America/New_York · Dinner at 5:30 pm')).toBeInTheDocument()
-    // The rotation count and the hidden Regular dinners sub-tab both read
-    // the Regulars.
    expect(fetchMock.mock.calls.map(([input]) => String(input)).sort()).toEqual([
-      REGULARS_PATH,
      REGULARS_PATH,
      CALENDAR_PATH,
      '/api/v1/settings/ai',
@@ -120,7 +117,7 @@ describe('SettingsPage', () => {
  })

  it('shows the not-yet-available states while the server has no endpoint for them', async () => {
-    stubSettings({ [REGULARS_PATH]: () => errorResponse(404, 'not_found') })
+    stubSettings()
    renderSettings()
    expect(await within(row('Regular dinners')).findByText('Rotation count unavailable')).toBeInTheDocument()
    expect(
@@ -83,12 +83,6 @@
  gap: 20px;
 }

-/* An upright tablet stacks the columns: Notifications above the AI
-   assistant and Recipe search. */
-.portrait .columns {
-  grid-template-columns: minmax(0, 1fr);
-}
-
 .column {
  min-width: 0;
  display: flex;
@@ -101,3 +95,24 @@
  padding: 24px;
  border-radius: 30px;
 }
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.cardTitle {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.hint {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--color-neutral-700);
+}
@@ -11,11 +11,9 @@ import {
  HOUSEHOLD_SETTINGS,
  NOTIFICATION_SETTINGS,
  RECIPE_SEARCH_SETTINGS,
-  SETTINGS_REGULARS,
 } from '../test/ApiProviders.tsx'
 import { InDataRouter } from '../test/dataRouter.tsx'
-import { dinnerBody, type DinnerBody } from '../test/dinners.ts'
-import { fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
+import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
 import { expectMinHitArea } from '../test/hitArea.ts'
 import { mockViewport } from '../test/matchMedia.ts'
 import { SettingsPage } from './SettingsPage.tsx'
@@ -34,7 +32,6 @@ function stubAPI(responders: Record<string, Responder> = {}): Mock<typeof fetch>
    'GET /api/v1/settings/recipe-search': () => jsonResponse(200, RECIPE_SEARCH_SETTINGS),
    'GET /api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
    'GET /api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK),
-    'GET /api/v1/dinners?status=regular': () => jsonResponse(200, SETTINGS_REGULARS),
    ...responders,
  }
  const fetchMock = vi.fn<typeof fetch>((input, init) => {
@@ -124,7 +121,7 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
    expect(tab('Regular dinners')).toHaveAttribute('aria-selected', 'true')
    expect(tab('Regular dinners')).toHaveFocus()
    expect(panel('Regular dinners')).toBeVisible()
-    expect(await within(panel('Regular dinners')).findByRole('heading', { name: 'On rotation · 1' })).toBeInTheDocument()
+    expect(within(panel('Regular dinners')).getByRole('region', { name: 'Regular dinners' })).toBeInTheDocument()
    expect(panel('Household')).not.toBeVisible()

    fireEvent.keyDown(tab('Regular dinners'), { key: 'End' })
@@ -168,123 +165,6 @@ describe.each([1440, 1180])('SettingsPage at %i px (mock 2e)', (width) => {
  })
 })

-const TACOS = dinnerBody('d1', 'Beef tacos', { method: 'stovetop', minutes_total: 40, difficulty: 'easy' })
-const PIZZA = dinnerBody('d3', 'Pizza night', { grounding_status: 'failed', grounding_error: 'no_recipe_found' })
-
-// stubRegulars answers the Regulars from server.regulars, so a write's
-// responder changes what the next read sees.
-function stubRegulars(regulars: DinnerBody[], responders: (server: { regulars: DinnerBody[] }) => Record<string, Responder>) {
-  const server = { regulars }
-  const fetchMock = stubAPI({
-    'GET /api/v1/dinners?status=regular': () => jsonResponse(200, { dinners: server.regulars }),
-    ...responders(server),
-  })
-  return { server, fetchMock }
-}
-
-// writes lists the requests other than GETs, as method, path and body.
-function writes(fetchMock: Mock<typeof fetch>) {
-  return fetchMock.mock.calls
-    .filter(([, init]) => (init?.method ?? 'GET') !== 'GET')
-    .map(([input, init]) => [init?.method, String(input), init?.body])
-}
-
-// openRegulars shows the Regular dinners tab once its Regulars have loaded.
-async function openRegulars() {
-  fireEvent.click(tab('Regular dinners'))
-  const regulars = within(panel('Regular dinners'))
-  await regulars.findByRole('heading', { level: 2, name: /^On rotation/ })
-  return regulars
-}
-
-function regularRow(name: string) {
-  const item = within(screen.getByRole('list', { name: 'Regulars' }))
-    .getAllByRole('listitem')
-    .find((li) => within(li).queryByText(name) !== null)
-  if (item === undefined) throw new Error(`no Regular row named ${name}`)
-  return within(item)
-}
-
-describe.each([1440, 1180])('SettingsPage Regular dinners tab at %i px (mock 2e)', (width) => {
-  it('lists the Regulars as /settings/regulars does, under the page title rather than its own', async () => {
-    stubRegulars([TACOS, PIZZA], () => ({}))
-    await renderAt(width)
-    const regulars = await openRegulars()
-    expect(regulars.getByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
-    expect(regularRow('Beef tacos').getByText('Stovetop · 40 min')).toBeInTheDocument()
-    expect(regularRow('Beef tacos').getByText('Recipe found')).toBeInTheDocument()
-    expect(regularRow('Pizza night').getByText('Needs a recipe')).toBeInTheDocument()
-    expect(regulars.getByRole('textbox', { name: 'Add a Regular' })).toBeInTheDocument()
-    expect(screen.getAllByRole('heading', { level: 1 }).map((h) => h.textContent)).toEqual(['Settings'])
-    expect(regulars.queryByRole('button', { name: 'Back to Settings' })).not.toBeInTheDocument()
-  })
-
-  it('adds a Regular by name', async () => {
-    const { fetchMock } = stubRegulars([TACOS], (server) => ({
-      'POST /api/v1/dinners': (body) => {
-        const created = dinnerBody('d9', (body as { name: string }).name, { grounding_status: 'pending' })
-        server.regulars = [...server.regulars, created]
-        return jsonResponse(201, { ...created, grounding_job_id: 'job-1' })
-      },
-    }))
-    await renderAt(width)
-    const regulars = await openRegulars()
-    fireEvent.change(regulars.getByRole('textbox', { name: 'Add a Regular' }), { target: { value: 'Chicken enchiladas' } })
-    fireEvent.click(regulars.getByRole('button', { name: 'Add Regular' }))
-
-    expect(await regulars.findByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
-    expect(regularRow('Chicken enchiladas').getByText('Finding recipe…')).toBeInTheDocument()
-    expect(writes(fetchMock)).toEqual([['POST', '/api/v1/dinners', JSON.stringify({ name: 'Chicken enchiladas' })]])
-  })
-
-  it('edits a Regular in its sheet', async () => {
-    const { fetchMock } = stubRegulars([TACOS], (server) => ({
-      'PATCH /api/v1/dinners/d1': (body) => {
-        const edited = { ...TACOS, ...(body as object) }
-        server.regulars = [edited]
-        return jsonResponse(200, edited)
-      },
-    }))
-    await renderAt(width)
-    await openRegulars()
-    fireEvent.click(regularRow('Beef tacos').getByRole('button', { name: /^Beef tacos/ }))
-    const sheet = within(screen.getByRole('dialog', { name: 'Edit Beef tacos' }))
-    fireEvent.change(sheet.getByLabelText('Minutes'), { target: { value: '25' } })
-    fireEvent.click(sheet.getByRole('button', { name: 'Save changes' }))
-
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
-    expect(writes(fetchMock)).toEqual([['PATCH', '/api/v1/dinners/d1', JSON.stringify({ minutes_total: 25 })]])
-    expect(await regularRow('Beef tacos').findByText('Stovetop · 25 min')).toBeInTheDocument()
-  })
-
-  it('fixes the recipe of a Regular that needs one', async () => {
-    const { fetchMock } = stubRegulars([PIZZA], (server) => ({
-      'GET /api/v1/dinners/d3/recipe-candidates': () =>
-        jsonResponse(200, {
-          candidates: [
-            { candidate_id: 'https://example.com/pizza', title: 'Weeknight pizza', site_name: 'Example Kitchen', photo_url: null, minutes: 45 },
-          ],
-        }),
-      'POST /api/v1/dinners/d3/ground': () => {
-        const fixed = { ...PIZZA, grounding_status: 'grounded', grounding_error: null }
-        server.regulars = [fixed]
-        return jsonResponse(200, fixed)
-      },
-    }))
-    await renderAt(width)
-    await openRegulars()
-    fireEvent.click(regularRow('Pizza night').getByRole('button', { name: /^Pizza night/ }))
-    const sheet = within(screen.getByRole('dialog', { name: 'Fix recipe' }))
-    fireEvent.click(await sheet.findByRole('button', { name: 'Use Weeknight pizza from Example Kitchen' }))
-
-    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
-    expect(writes(fetchMock)).toEqual([
-      ['POST', '/api/v1/dinners/d3/ground', JSON.stringify({ candidate_id: 'https://example.com/pizza' })],
-    ])
-    expect(await regularRow('Pizza night').findByText('Recipe found')).toBeInTheDocument()
-  })
-})
-
 describe('SettingsPage reminder time across tabs', () => {
  it('shows a reminder time saved on Notifications in the Household tab, keeping its draft', async () => {
    const saved = { ...HOUSEHOLD_SETTINGS }
@@ -315,7 +195,10 @@ describe('SettingsPage reminder time across tabs', () => {

 describe('SettingsPage across the 768 px breakpoint', () => {
  it('shows the mobile list below 768 px and the sub-tabs from 768 px', async () => {
-    stubAPI({ 'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED) })
+    stubAPI({
+      'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
+      'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
+    })
    const resize = await renderAt(767)
    expect(screen.getByRole('link', { name: /^AI assistant/ })).toHaveAttribute('href', '/settings/ai')
    expect(screen.queryByRole('tablist')).not.toBeInTheDocument()
@@ -326,7 +209,10 @@ describe('SettingsPage across the 768 px breakpoint', () => {
  })

  it('keeps an unsaved draft and its leave guard across 1180 px, 390 px and back', async () => {
-    stubAPI({ 'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED) })
+    stubAPI({
+      'GET /api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
+      'GET /api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
+    })
    const resize = await renderAt(1180)
    fireEvent.change(await screen.findByRole('textbox', { name: 'System prompt' }), {
      target: { value: 'A draft' },
@@ -1,11 +1,10 @@
 import { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
-import { useBreakpoint, useOrientation } from '../shell/useBreakpoint.ts'
+import { Card } from '../ui/Card.tsx'
 import { AIAssistantCard } from './AISettingsPage.tsx'
 import { HouseholdSettingsSections } from './HouseholdSettingsPage.tsx'
 import { LeaveGuard } from './LeaveGuard.tsx'
 import { ChatWebhookCard, NotificationsCard } from './NotificationsPage.tsx'
 import { RecipeSearchCard } from './RecipeSearchCard.tsx'
-import { RegularsManager } from './RegularsSettingsPage.tsx'
 import styles from './SettingsTabs.module.css'

 type Tab = 'household' | 'regulars' | 'notifications-ai'
@@ -22,10 +21,7 @@ const step: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 }
 // sub-tabs instead of the mobile list. Every tab stays mounted while hidden,
 // so a draft survives switching tabs, and one leave guard covers them all.
 // hidden hides the page but keeps it mounted, drafts and leave guard included.
-// On an upright tablet the two columns stack into one.
 export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
-  const layout = useBreakpoint()
-  const orientation = useOrientation()
  const [tab, setTab] = useState<Tab>('notifications-ai')
  const [householdDirty, setHouseholdDirty] = useState(false)
  const [aiDirty, setAIDirty] = useState(false)
@@ -68,10 +64,7 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
  }

  return (
-    <div
-      className={[styles.page, layout === 'tablet' && orientation === 'portrait' && styles.portrait].filter(Boolean).join(' ')}
-      hidden={hidden}
-    >
+    <div className={styles.page} hidden={hidden}>
      <header className={styles.header}>
        <div className={styles.heading}>
          <h1 className={styles.title}>Settings</h1>
@@ -101,7 +94,13 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {

      {panel('household', styles.single, <HouseholdSettingsSections onDirtyChange={setHouseholdDirty} />)}

-      {panel('regulars', styles.single, <RegularsManager />)}
+      {panel(
+        'regulars',
+        styles.single,
+        // TODO(Feature 12): embed the Regular dinners screen here once Feature
+        // 12 builds it.
+        <Placeholder title="Regular dinners">Managing the household's Regulars arrives in a later update.</Placeholder>,
+      )}

      {panel(
        'notifications-ai',
@@ -122,3 +121,17 @@ export function SettingsTabs({ hidden = false }: { hidden?: boolean }) {
    </div>
  )
 }
+
+// Placeholder is a neutral card holding a section's place until the feature
+// that owns it renders it.
+function Placeholder({ title, children }: { title: string; children: ReactNode }) {
+  const titleId = useId()
+  return (
+    <Card className={styles.placeholder} aria-labelledby={titleId} role="region">
+      <h2 id={titleId} className={styles.cardTitle}>
+        {title}
+      </h2>
+      <p className={styles.hint}>{children}</p>
+    </Card>
+  )
+}
@@ -22,9 +22,3 @@
 .desktop .main {
  padding: 32px 36px;
 }
-
-/* An upright tablet (820 px wide) leaves 724 px beside the rail; slimmer side
-   padding gives the page a little more of it. */
-.tablet.portrait .main {
-  padding: 32px 28px;
-}
@@ -2,17 +2,15 @@ import { Outlet } from 'react-router'
 import { BottomBar } from './BottomBar.tsx'
 import { Rail } from './Rail.tsx'
 import { Sidebar } from './Sidebar.tsx'
-import { useBreakpoint, useOrientation } from './useBreakpoint.ts'
+import { useBreakpoint } from './useBreakpoint.ts'
 import styles from './AppShell.module.css'

 // The responsive frame around every page: one nav layout per breakpoint and a
-// scrolling main area for the routed page. A portrait viewport is marked so
-// the narrower upright tablet keeps its content clear of the rail.
+// scrolling main area for the routed page.
 export function AppShell() {
  const breakpoint = useBreakpoint()
-  const orientation = useOrientation()
  return (
-    <div className={[styles.shell, styles[breakpoint], orientation === 'portrait' && styles.portrait].filter(Boolean).join(' ')}>
+    <div className={`${styles.shell} ${styles[breakpoint]}`}>
      {breakpoint === 'mobile' && <BottomBar />}
      {breakpoint === 'tablet' && <Rail />}
      {breakpoint === 'desktop' && <Sidebar />}
@@ -48,12 +48,6 @@
  color: var(--on-accent);
 }

-/* The app-wide grape focus ring barely shows on the dark bar (1.8:1); the
-   bar's ring is the light on-accent ink instead. */
-.item:focus-visible {
-  outline-color: var(--on-accent);
-}
-
 .label {
  font-family: var(--font-body);
  font-size: 13px;
@@ -182,18 +182,6 @@ describe('BottomBar', () => {
    ])
  })

-  it('rings a focused item in on-accent ink, which shows on the dark bar', async () => {
-    await renderAt('/')
-    const item = link('Plan')
-    // A key press makes the next focus a keyboard one, which :focus-visible
-    // matches; earlier tests' clicks would leave it a pointer one.
-    fireEvent.keyDown(document.body, { key: 'Tab' })
-    item.focus()
-    expect(item).toHaveFocus()
-    expect(item.matches(':focus-visible')).toBe(true)
-    expect(declaredStyle(item).getPropertyValue('outline-color')).toBe('var(--on-accent)')
-  })
-
  it('does not animate when the active item stays the same', async () => {
    await renderAt('/plan')
    fireEvent.click(link('Plan'))
@@ -1,225 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { AppRoutes } from '../App.tsx'
-import planStyles from '../plan/PlanPage.module.css'
-import settingsTabsStyles from '../settings/SettingsTabs.module.css'
-import {
-  AI_MODELS,
-  AI_SETTINGS,
-  CHAT_WEBHOOK_NONE,
-  GOOGLE_NOT_CONNECTED,
-  HOME,
-  HOUSEHOLD_SETTINGS,
-  NOTIFICATION_SETTINGS,
-  RECIPE_SEARCH_SETTINGS,
-  ApiProviders,
-} from '../test/ApiProviders.tsx'
-import { declaredStyle } from '../test/cssRules.ts'
-import { InDataRouter } from '../test/dataRouter.tsx'
-import { dinnerBody } from '../test/dinners.ts'
-import { jsonResponse, ME } from '../test/fetchStub.ts'
-import { mockViewport } from '../test/matchMedia.ts'
-import shellStyles from './AppShell.module.css'
-import railStyles from './Rail.module.css'
-
-// Every primary route on a tablet held upright (820 × 1180) and on its side
-// (1180 × 820): both have the 96 px rail and the tablet layout; upright, the
-// shell is marked portrait, the Plan week reflows four days over three, and
-// Settings' two columns stack into one.
-
-const PORTRAIT = { width: 820, height: 1180 }
-const LANDSCAPE = { width: 1180, height: 820 }
-
-const DAYS = ['2026-10-05', '2026-10-06', '2026-10-07', '2026-10-08', '2026-10-09', '2026-10-10', '2026-10-11']
-
-const PLAN = {
-  id: 'plan-1',
-  week_start: '2026-10-05',
-  week_label: 'Week 41 · Oct 5 – 11',
-  status: 'draft',
-  ai_note: null,
-  calendar_synced_at: null,
-  days: DAYS.map((date, i) => ({
-    date,
-    dinner: { id: `d${i}`, name: `Dinner ${i}`, photo: null, minutes: 30, method: 'stovetop', origin: 'regular' },
-    is_new: false,
-    start_by: null,
-  })),
-  updated_at: '2026-10-04T15:00:00Z',
-}
-
-const SUPPLY_RUN = {
-  weekStart: '2026-10-05',
-  label: 'Week 41 · Oct 5 – 11',
-  title: null,
-  status: 'current',
-  sent_to_chat_at: null,
-  chat_send_unconfirmed_at: null,
-  needed_count: 1,
-  total_count: 1,
-  groups: [
-    {
-      dinner: { id: 'd0', name: 'Dinner 0' },
-      date: '2026-10-05',
-      day: 'Monday',
-      items: [{ id: 'i1', name: 'Ground beef', qty: '1 lb', needed: true }],
-    },
-  ],
-}
-
-const DETAIL = {
-  id: 'd1',
-  name: 'Korean beef bowls',
-  status: 'regular',
-  origin: 'regular',
-  method: 'stovetop',
-  minutes_total: 30,
-  difficulty: 'easy',
-  cuisine: 'korean',
-  is_favorite: false,
-  photo_urls: null,
-  ingredients: [{ name: 'Ground beef', qty: '1', unit: 'lb', note: null, raw_text: '1 lb ground beef' }],
-  steps: ['Brown the beef.'],
-  source: null,
-  grounding_status: 'manual',
-  grounding_error: null,
-  why_picked: null,
-}
-
-// The API every route reads, answered as a settled household's server would.
-// Any other request stays pending, so a route that reads more just shows its
-// loading state.
-const API: Record<string, unknown> = {
-  '/api/v1/me': ME,
-  '/api/v1/home': HOME,
-  '/api/v1/rotation-reviews': { reviews: [] },
-  '/api/v1/settings/household': HOUSEHOLD_SETTINGS,
-  '/api/v1/settings/ai': AI_SETTINGS,
-  '/api/v1/settings/ai/models': AI_MODELS,
-  '/api/v1/settings/recipe-search': RECIPE_SEARCH_SETTINGS,
-  '/api/v1/settings/notifications': NOTIFICATION_SETTINGS,
-  '/api/v1/settings/chat-webhook': CHAT_WEBHOOK_NONE,
-  '/api/v1/integrations/google': GOOGLE_NOT_CONNECTED,
-  '/api/v1/plans/2026-10-05': PLAN,
-  '/api/v1/shopping/2026-10-05': SUPPLY_RUN,
-  '/api/v1/shopping/archive?by=week': { by: 'week', periods: [] },
-  '/api/v1/suggestions/deck': { suggestions: [], active_batch: null, failed_batch: null },
-  '/api/v1/dinners?status=regular': { dinners: [dinnerBody('r1', 'Beef tacos')] },
-  '/api/v1/dinners?status=quest_log': { dinners: [] },
-  '/api/v1/dinners/d1': DETAIL,
-}
-
-beforeEach(() => {
-  vi.useFakeTimers({ toFake: ['Date'] })
-  vi.setSystemTime(new Date('2026-10-07T16:00:00Z'))
-  const path = (input: Parameters<typeof fetch>[0]) => new URL(String(input), 'https://mealquest.test')
-  vi.stubGlobal(
-    'fetch',
-    vi.fn<typeof fetch>((input) => {
-      const url = path(input)
-      const key = `${url.pathname}${url.search}`
-      if (!Object.hasOwn(API, key)) return new Promise<Response>(() => {})
-      return Promise.resolve(jsonResponse(200, API[key]))
-    }),
-  )
-})
-
-afterEach(() => {
-  Reflect.deleteProperty(window, 'matchMedia')
-  vi.useRealTimers()
-  vi.unstubAllGlobals()
-})
-
-async function renderAt(path: string, { width, height }: { width: number; height: number }) {
-  mockViewport(width, { height })
-  render(
-    <InDataRouter path={path}>
-      <ApiProviders>
-        <AppRoutes />
-      </ApiProviders>
-    </InDataRouter>,
-  )
-  // The routes wait for the household settings (OnboardingGate).
-  await screen.findByRole('navigation', { name: 'Primary' })
-}
-
-function shell() {
-  return screen.getByRole('main').parentElement!
-}
-
-const ROUTES: [string, string][] = [
-  ['Home', '/'],
-  ['Plan', '/plan?week=2026-10-05'],
-  ['Supply run', '/plan/shopping'],
-  ['Supply archive', '/plan/shopping/archive'],
-  ['Discover', '/discover'],
-  ['Quick dinners', '/quick'],
-  ['Cook from what I have', '/cook-from-pantry'],
-  ['Dinner detail (Kitchen reading mode)', '/dinner/d1'],
-  ['Settings', '/settings'],
-  ['Notifications', '/settings/notifications'],
-  ['AI assistant', '/settings/ai'],
-  ['Household', '/settings/household'],
-  ['Regulars', '/settings/regulars'],
-  ['Calendar', '/settings/calendar'],
-]
-
-describe.each([
-  ['portrait', PORTRAIT],
-  ['landscape', LANDSCAPE],
-])('tablet %s', (orientation, viewport) => {
-  const portrait = orientation === 'portrait'
-
-  it.each(ROUTES)(`renders %s with the 96 px rail in the tablet ${orientation} layout`, async (_name, path) => {
-    await renderAt(path, viewport)
-    expect(screen.getAllByRole('navigation')).toHaveLength(1)
-    expect(screen.getByRole('navigation', { name: 'Primary' })).toHaveClass(railStyles.rail!)
-    expect(declaredStyle(screen.getByRole('navigation', { name: 'Primary' })).width).toBe('96px')
-    expect(shell()).toHaveClass(shellStyles.tablet!)
-    if (portrait) expect(shell()).toHaveClass(shellStyles.portrait!)
-    else expect(shell()).not.toHaveClass(shellStyles.portrait!)
-    expect(await screen.findByRole('heading', { level: 1 })).toBeInTheDocument()
-  })
-
-  it(`lays the Plan week out ${portrait ? 'four days over three' : 'in seven columns'}`, async () => {
-    await renderAt('/plan?week=2026-10-05', viewport)
-    const week = await screen.findByRole('list', { name: 'Dinners this week' })
-    const page = week.closest(`.${planStyles.tabletPage}`)
-    expect(page).not.toBeNull()
-    if (portrait) expect(page).toHaveClass(planStyles.portraitPage!)
-    else expect(page).not.toHaveClass(planStyles.portraitPage!)
-    expect(declaredStyle(week).gridTemplateColumns).toBe(
-      portrait ? 'repeat(4, minmax(0, 1fr))' : 'repeat(7, minmax(112px, 1fr))',
-    )
-    expect(declaredStyle(week).overflowX).toBe('auto')
-  })
-
-  it(`shows Settings (mock 2e) in ${portrait ? 'one column' : 'two columns'}`, async () => {
-    await renderAt('/settings', viewport)
-    const panel = screen.getByRole('tabpanel', { name: 'Notifications & AI' })
-    const page = panel.closest(`.${settingsTabsStyles.page}`)
-    if (portrait) expect(page).toHaveClass(settingsTabsStyles.portrait!)
-    else expect(page).not.toHaveClass(settingsTabsStyles.portrait!)
-    expect(declaredStyle(panel).gridTemplateColumns).toBe(
-      portrait ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1.15fr)',
-    )
-  })
-})
-
-it('reflows when the tablet turns', async () => {
-  const resize = mockViewport(PORTRAIT.width, { height: PORTRAIT.height })
-  render(
-    <InDataRouter path="/plan?week=2026-10-05">
-      <ApiProviders>
-        <AppRoutes />
-      </ApiProviders>
-    </InDataRouter>,
-  )
-  const week = await screen.findByRole('list', { name: 'Dinners this week' })
-  expect(shell()).toHaveClass(shellStyles.portrait!)
-  expect(week.closest(`.${planStyles.tabletPage}`)).toHaveClass(planStyles.portraitPage!)
-  resize(LANDSCAPE.width, LANDSCAPE.height)
-  expect(shell()).toHaveClass(shellStyles.tablet!)
-  expect(shell()).not.toHaveClass(shellStyles.portrait!)
-  expect(week.closest(`.${planStyles.tabletPage}`)).not.toHaveClass(planStyles.portraitPage!)
-})
@@ -7,12 +7,6 @@ export type Breakpoint = 'mobile' | 'tablet' | 'desktop'
 export const TABLET_QUERY = '(min-width: 768px)'
 export const DESKTOP_QUERY = '(min-width: 1200px)'

-export type Orientation = 'portrait' | 'landscape'
-
-// A tablet held upright (820 × 1180) has the rail and the tablet layout but
-// far less width than one on its side, so pages reflow for it.
-export const PORTRAIT_QUERY = '(orientation: portrait)'
-
 // The layout the current viewport calls for, updated as the viewport crosses
 // a breakpoint.
 export function useBreakpoint(): Breakpoint {
@@ -35,16 +29,3 @@ export function useBreakpoint(): Breakpoint {
    lists.desktop.matches ? 'desktop' : lists.tablet.matches ? 'tablet' : 'mobile',
  )
 }
-
-// The viewport's orientation, updated as the device turns.
-export function useOrientation(): Orientation {
-  const [list] = useState(() => window.matchMedia(PORTRAIT_QUERY))
-  const subscribe = useCallback(
-    (onChange: () => void) => {
-      list.addEventListener('change', onChange)
-      return () => list.removeEventListener('change', onChange)
-    },
-    [list],
-  )
-  return useSyncExternalStore(subscribe, () => (list.matches ? 'portrait' : 'landscape'))
-}
@@ -2,8 +2,7 @@ import { QueryClientProvider } from '@tanstack/react-query'
 import { useState, type ReactNode } from 'react'
 import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
 import { createNetworkStatus } from '../pwa/networkStatus.ts'
-import { dinnerBody } from './dinners.ts'
-import { fakeLocation, jsonResponse } from './fetchStub.ts'
+import { errorResponse, fakeLocation, jsonResponse } from './fetchStub.ts'

 // AI_SETTINGS is a GET /api/v1/settings/ai body: Anthropic with a verified key.
 export const AI_SETTINGS = {
@@ -100,16 +99,12 @@ export const CHAT_WEBHOOK = {
  last_test_status: null,
 }

-// SETTINGS_REGULARS is a GET /api/v1/dinners?status=regular body: one
-// Regular, its recipe found.
-export const SETTINGS_REGULARS = { dinners: [dinnerBody('r1', 'Beef tacos')] }
-
 // SETTINGS_API answers the settings home's requests, for stubFetchByPath, as
-// today's server does: one Regular on rotation, and neither Google Calendar
-// nor Google Chat connected. The home's sub-tabs stay mounted on mobile, so
-// it also reads the Regulars list, the AI models and recipe search settings.
+// today's server does: the dinners endpoint does not exist yet, and neither
+// Google Calendar nor Google Chat is connected. The home's sub-tabs stay mounted on mobile, so
+// it also reads the AI models and recipe search settings.
 export const SETTINGS_API = {
-  '/api/v1/dinners?status=regular': () => jsonResponse(200, SETTINGS_REGULARS),
+  '/api/v1/dinners?status=regular': () => errorResponse(404, 'not_found'),
  '/api/v1/integrations/google': () => jsonResponse(200, GOOGLE_NOT_CONNECTED),
  '/api/v1/settings/notifications': () => jsonResponse(200, NOTIFICATION_SETTINGS),
  '/api/v1/settings/chat-webhook': () => jsonResponse(200, CHAT_WEBHOOK_NONE),
@@ -3,22 +3,16 @@ import { act } from '@testing-library/react'
 type Listener = (event: MediaQueryListEvent) => void

 // Replaces window.matchMedia with one that answers min-width / max-width
-// queries for a pretend viewport width, orientation: portrait for its height
-// (a viewport given no height is landscape), and prefers-reduced-motion:
-// reduce with reducedMotion (jsdom has no matchMedia and no layout). Returns
-// a function that resizes the pretend viewport and notifies every query
-// whose answer changed.
-export function mockViewport(
-  initialWidth: number,
-  { reducedMotion = false, height: initialHeight = 0 } = {},
-): (width: number, height?: number) => void {
+// queries for a pretend viewport width, and prefers-reduced-motion: reduce
+// with reducedMotion (jsdom has no matchMedia and no layout). Returns a
+// function that resizes the pretend viewport and notifies every query whose
+// answer changed.
+export function mockViewport(initialWidth: number, { reducedMotion = false } = {}): (width: number) => void {
  let width = initialWidth
-  let height = initialHeight
  const lists: { list: MediaQueryList; listeners: Set<Listener> }[] = []

  function evaluate(query: string): boolean {
    if (query === '(prefers-reduced-motion: reduce)') return reducedMotion
-    if (query === '(orientation: portrait)') return height >= width
    const min = /\(min-width:\s*(\d+)px\)/.exec(query)
    const max = /\(max-width:\s*(\d+)px\)/.exec(query)
    if (!min && !max) throw new Error(`mockViewport cannot evaluate ${JSON.stringify(query)}`)
@@ -43,10 +37,9 @@ export function mockViewport(
    return list
  }

-  return (nextWidth: number, nextHeight = 0) => {
+  return (next: number) => {
    const before = lists.map(({ list }) => list.matches)
-    width = nextWidth
-    height = nextHeight
+    width = next
    act(() => {
      lists.forEach(({ list, listeners }, i) => {
        if (list.matches === before[i]) return