From 1d69d75633741ce4ac2b0178acfeb06f8755a242 Mon Sep 17 00:00:00 2001
From: Harry Randall <randallhazza@gmail.com>
Date: Wed, 23 Sep 2026 10:58:26 +1000
Subject: [PATCH 1/3] fix: follow the system theme outside the account

Signed-out visitors now follow the operating system instead of a forced
light theme, and never inherit the last account's saved choice. Signed-in
people keep their choice on every route, onboarding included. Only the
landing page stays light until it has a dark design.

The auth pages use theme tokens instead of hard-coded greys, the landing
mesh gains a dark variant, and the global error page follows the saved
theme. Sign-up stops shouting, sign-in and sign-up keep focus on the
submitted field and link errors to it, and the loading skeleton matches
the stacked social buttons.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/auth/auth-loading.tsx         |  26 ++---
 apps/web/app/auth/auth-shell.tsx           |  32 +++----
 apps/web/app/auth/sign-in/sign-in-form.tsx |  35 ++++---
 apps/web/app/auth/sign-up/sign-up-form.tsx |  57 +++++++----
 apps/web/app/auth/social-sign-in.tsx       |  11 +--
 apps/web/app/global-error.tsx              |  11 ++-
 apps/web/app/globals.css                   |  20 ++++
 apps/web/app/login/page.tsx                |  14 +--
 apps/web/app/signup/page.tsx               |  16 ++--
 apps/web/lib/theme.ts                      |  35 ++++---
 apps/web/tests/theme-first-paint.test.mjs  |   3 +-
 apps/web/tests/theme.test.ts               | 105 +++++++++++++++------
 apps/web/ui/shell/app-theme-provider.tsx   |   8 +-
 13 files changed, 244 insertions(+), 129 deletions(-)

diff --git a/apps/web/app/auth/auth-loading.tsx b/apps/web/app/auth/auth-loading.tsx
index 2414e334..406bbe76 100644
--- a/apps/web/app/auth/auth-loading.tsx
+++ b/apps/web/app/auth/auth-loading.tsx
@@ -16,28 +16,28 @@ export function AuthLoading({
     <AuthShell>
       <div aria-busy="true">
         <span className="sr-only">{label}</span>
-        <Skeleton className="h-8 w-48 bg-zinc-100 sm:h-9" />
-        <Skeleton className="mt-3 h-3.5 w-full bg-zinc-100" />
-        <Skeleton className="mt-2 h-3.5 w-2/3 bg-zinc-100" />
-        <div className="mt-7 grid gap-3 sm:grid-cols-2">
-          <Skeleton className="h-10 rounded-lg bg-zinc-100" />
-          <Skeleton className="h-10 rounded-lg bg-zinc-100" />
+        <Skeleton className="h-8 w-48 sm:h-9" />
+        <Skeleton className="mt-3 h-3.5 w-full" />
+        <Skeleton className="mt-2 h-3.5 w-2/3" />
+        <div className="mt-7 space-y-2.5">
+          <Skeleton className="h-11 rounded-lg" />
+          <Skeleton className="h-11 rounded-lg" />
         </div>
         <div className="my-6 flex items-center gap-3">
-          <span className="h-px flex-1 bg-zinc-200" />
-          <Skeleton className="h-2.5 w-28 bg-zinc-100" />
-          <span className="h-px flex-1 bg-zinc-200" />
+          <span className="h-px flex-1 bg-border" />
+          <Skeleton className="h-2.5 w-28" />
+          <span className="h-px flex-1 bg-border" />
         </div>
         <div className="space-y-4">
           {Array.from({ length: fields }, (_, index) => (
             <div key={index}>
-              <Skeleton className="mb-2 h-3 w-20 bg-zinc-100" />
-              <Skeleton className="h-10 w-full rounded-lg bg-zinc-100" />
+              <Skeleton className="mb-2 h-3 w-20" />
+              <Skeleton className="h-11 w-full rounded-lg" />
             </div>
           ))}
-          <Skeleton className="h-10 w-full rounded-lg bg-zinc-100" />
+          <Skeleton className="h-11 w-full rounded-lg" />
         </div>
-        <Skeleton className="mx-auto mt-6 h-3.5 w-52 bg-zinc-100" />
+        <Skeleton className="mx-auto mt-6 h-3.5 w-52" />
       </div>
     </AuthShell>
   );
diff --git a/apps/web/app/auth/auth-shell.tsx b/apps/web/app/auth/auth-shell.tsx
index 2ea71f4b..9b17bec0 100644
--- a/apps/web/app/auth/auth-shell.tsx
+++ b/apps/web/app/auth/auth-shell.tsx
@@ -16,12 +16,12 @@ const highlights = [
  */
 export function AuthShell({ children }: { children: ReactNode }) {
   return (
-    <main className="grid min-h-dvh bg-white lg:grid-cols-[1fr_minmax(0,44rem)]">
+    <main className="grid min-h-dvh bg-background lg:grid-cols-[1fr_minmax(0,44rem)]">
       <section className="flex flex-col px-5 py-6 sm:px-10">
         <Link
           href="/"
           aria-label="Coursemap home"
-          className="inline-flex w-fit items-center gap-2.5 text-zinc-900"
+          className="inline-flex w-fit items-center gap-2.5 text-foreground"
         >
           <BrandMark className="size-9" />
           <strong className="brand-wordmark text-lg">coursemap</strong>
@@ -31,7 +31,7 @@ export function AuthShell({ children }: { children: ReactNode }) {
           <div className="w-full max-w-sm">{children}</div>
         </div>
 
-        <p className="text-[11px] leading-relaxed text-zinc-400">
+        <p className="text-[11px] leading-relaxed text-muted-foreground">
           Coursemap is an independent planning tool. It is not an official ANU
           system and does not replace Programs and Courses or academic advice.
         </p>
@@ -39,23 +39,23 @@ export function AuthShell({ children }: { children: ReactNode }) {
 
       <aside
         aria-hidden="true"
-        className="landing-mesh relative hidden overflow-hidden border-l border-zinc-100 lg:block"
+        className="landing-mesh relative hidden overflow-hidden border-l border-border lg:block"
       >
         <div className="absolute inset-0 flex flex-col justify-center gap-8 px-14">
           <div className="max-w-md">
-            <p className="text-xs font-bold tracking-wider text-brand-700 uppercase">
+            <p className="text-xs font-bold tracking-wider text-primary uppercase">
               Your ANU degree, mapped
             </p>
-            <h2 className="mt-3 text-3xl leading-tight font-bold tracking-tight text-zinc-950">
+            <h2 className="mt-3 text-3xl leading-tight font-bold tracking-tight text-foreground">
               Every course, every prerequisite, one clear plan.
             </h2>
             <ul className="mt-6 space-y-3">
               {highlights.map((highlight) => (
                 <li
                   key={highlight}
-                  className="flex items-center gap-3 text-sm text-zinc-700"
+                  className="flex items-center gap-3 text-sm text-foreground/80"
                 >
-                  <span className="grid size-6 shrink-0 place-items-center rounded-full bg-white text-brand-700 shadow-xs ring-1 ring-zinc-200">
+                  <span className="grid size-6 shrink-0 place-items-center rounded-full bg-card text-primary shadow-xs ring-1 ring-border">
                     <Check className="size-3.5" />
                   </span>
                   {highlight}
@@ -65,8 +65,8 @@ export function AuthShell({ children }: { children: ReactNode }) {
           </div>
 
           <div className="relative max-w-md">
-            <div className="rounded-3xl bg-white/90 p-5 shadow-lg ring-1 ring-zinc-200/80 backdrop-blur-sm">
-              <p className="text-[11px] font-bold tracking-wider text-zinc-400 uppercase">
+            <div className="rounded-3xl bg-card/90 p-5 shadow-lg ring-1 ring-border backdrop-blur-sm">
+              <p className="text-[11px] font-bold tracking-wider text-muted-foreground uppercase">
                 Semester 1 · 2026
               </p>
               <div className="mt-3 space-y-2">
@@ -77,7 +77,7 @@ export function AuthShell({ children }: { children: ReactNode }) {
                 ].map(([code, name, tone]) => (
                   <div
                     key={code}
-                    className="flex items-center gap-3 rounded-xl bg-zinc-50 px-3 py-2.5 ring-1 ring-zinc-100"
+                    className="flex items-center gap-3 rounded-xl bg-muted/60 px-3 py-2.5 ring-1 ring-border"
                   >
                     <span
                       className={
@@ -88,21 +88,21 @@ export function AuthShell({ children }: { children: ReactNode }) {
                             : "size-2 rounded-full bg-amber-400"
                       }
                     />
-                    <span className="font-mono text-xs font-semibold text-zinc-900">
+                    <span className="font-mono text-xs font-semibold text-foreground">
                       {code}
                     </span>
-                    <span className="truncate text-xs text-zinc-500">
+                    <span className="truncate text-xs text-muted-foreground">
                       {name}
                     </span>
                   </div>
                 ))}
               </div>
             </div>
-            <div className="absolute -top-4 -right-4 rounded-2xl bg-white px-4 py-3 shadow-md ring-1 ring-zinc-200/80">
-              <p className="text-[11px] font-semibold text-zinc-500">
+            <div className="absolute -top-4 -right-4 rounded-2xl bg-card px-4 py-3 shadow-md ring-1 ring-border">
+              <p className="text-[11px] font-semibold text-muted-foreground">
                 Prerequisites met
               </p>
-              <p className="mt-0.5 text-lg font-bold tracking-tight text-emerald-600">
+              <p className="mt-0.5 text-lg font-bold tracking-tight text-emerald-600 dark:text-emerald-400">
                 3 of 3
               </p>
             </div>
diff --git a/apps/web/app/auth/sign-in/sign-in-form.tsx b/apps/web/app/auth/sign-in/sign-in-form.tsx
index fac9032c..d36b02bc 100644
--- a/apps/web/app/auth/sign-in/sign-in-form.tsx
+++ b/apps/web/app/auth/sign-in/sign-in-form.tsx
@@ -3,10 +3,9 @@ import { Alert, AlertDescription } from "@coursemap/ui/components/alert";
 import { Button } from "@coursemap/ui/primitives/button";
 import { Field } from "@coursemap/ui/primitives/field";
 import { Input } from "@coursemap/ui/primitives/input";
-import { cn } from "@/lib/cn";
 
 import { CircleAlert, LockKeyhole, Mail } from "lucide-react";
-import { useState, type FormEvent } from "react";
+import { useId, useRef, useState, type FormEvent } from "react";
 
 import { createClient } from "@/lib/supabase/browser";
 
@@ -23,6 +22,8 @@ export function SignInForm({
   const [password, setPassword] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(initialError);
+  const errorId = useId();
+  const passwordRef = useRef<HTMLInputElement>(null);
 
   const submit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -39,11 +40,15 @@ export function SignInForm({
       });
 
       if (error) {
+        const invalidCredentials = error.message
+          .toLowerCase()
+          .includes("invalid login credentials");
         setErrorMessage(
-          error.message.toLowerCase().includes("invalid login credentials")
+          invalidCredentials
             ? "Email or password is incorrect."
             : "Coursemap could not sign you in. Wait a moment and try again.",
         );
+        if (invalidCredentials) passwordRef.current?.select();
         return;
       }
 
@@ -70,7 +75,7 @@ export function SignInForm({
           <span className="text-sm font-medium">{"Email address"}</span>
           <span className="relative block">
             <Mail
-              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400"
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
             <Input
@@ -82,7 +87,10 @@ export function SignInForm({
               maxLength={254}
               placeholder="name@anu.edu.au"
               required
-              disabled={!configured || submitting}
+              disabled={!configured}
+              readOnly={submitting}
+              aria-invalid={errorMessage ? true : undefined}
+              aria-describedby={errorMessage ? errorId : undefined}
               className="min-h-11 pl-10"
             />
           </span>
@@ -94,7 +102,7 @@ export function SignInForm({
           <span className="text-sm font-medium">{"Password"}</span>
           <span className="relative block">
             <LockKeyhole
-              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400"
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
             <Input
@@ -102,11 +110,15 @@ export function SignInForm({
               name="password"
               value={password}
               onChange={(event) => setPassword(event.target.value)}
+              ref={passwordRef}
               autoComplete="current-password"
               minLength={8}
               maxLength={128}
               required
-              disabled={!configured || submitting}
+              disabled={!configured}
+              readOnly={submitting}
+              aria-invalid={errorMessage ? true : undefined}
+              aria-describedby={errorMessage ? errorId : undefined}
               className="min-h-11 pl-10"
             />
           </span>
@@ -114,8 +126,8 @@ export function SignInForm({
       </Field>
 
       {errorMessage && (
-        <Alert role="alert" variant={"destructive"}>
-          <CircleAlert />
+        <Alert id={errorId} role="alert" variant="destructive">
+          <CircleAlert aria-hidden="true" />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}
@@ -123,8 +135,9 @@ export function SignInForm({
       <Button
         type="submit"
         variant="default"
-        disabled={!configured || submitting}
-        className={cn("min-h-11", "w-full")}
+        disabled={!configured}
+        aria-disabled={submitting || undefined}
+        className="min-h-11 w-full"
       >
         {submitting ? "Signing in..." : "Sign in"}
       </Button>
diff --git a/apps/web/app/auth/sign-up/sign-up-form.tsx b/apps/web/app/auth/sign-up/sign-up-form.tsx
index 48aaf2f0..3b1b4b1e 100644
--- a/apps/web/app/auth/sign-up/sign-up-form.tsx
+++ b/apps/web/app/auth/sign-up/sign-up-form.tsx
@@ -3,10 +3,9 @@ import { Alert, AlertDescription } from "@coursemap/ui/components/alert";
 import { Button } from "@coursemap/ui/primitives/button";
 import { Field, FieldDescription } from "@coursemap/ui/primitives/field";
 import { Input } from "@coursemap/ui/primitives/input";
-import { cn } from "@/lib/cn";
 
 import { CircleAlert, LockKeyhole, Mail } from "lucide-react";
-import { useState, type FormEvent } from "react";
+import { useId, useRef, useState, type FormEvent } from "react";
 
 import { createClient } from "@/lib/supabase/browser";
 
@@ -22,6 +21,10 @@ export function SignUpForm({
   const [passwordConfirmation, setPasswordConfirmation] = useState("");
   const [submitting, setSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [notice, setNotice] = useState<string | null>(null);
+  const errorId = useId();
+  const passwordHintId = useId();
+  const confirmationRef = useRef<HTMLInputElement>(null);
 
   const submit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -29,11 +32,13 @@ export function SignUpForm({
 
     if (password !== passwordConfirmation) {
       setErrorMessage("Passwords do not match.");
+      confirmationRef.current?.select();
       return;
     }
 
     setSubmitting(true);
     setErrorMessage(null);
+    setNotice(null);
 
     try {
       const supabase = createClient();
@@ -56,7 +61,7 @@ export function SignUpForm({
       }
 
       if (!data.session) {
-        setErrorMessage(
+        setNotice(
           "Your account was created, but email confirmation is still enabled. Contact the Coursemap administrator before trying again.",
         );
         return;
@@ -80,7 +85,7 @@ export function SignUpForm({
           <span className="text-sm font-medium">{"Email address"}</span>
           <span className="relative block">
             <Mail
-              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400"
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
             <Input
@@ -92,7 +97,10 @@ export function SignUpForm({
               maxLength={254}
               placeholder="name@anu.edu.au"
               required
-              disabled={!configured || submitting}
+              disabled={!configured}
+              readOnly={submitting}
+              aria-invalid={errorMessage ? true : undefined}
+              aria-describedby={errorMessage ? errorId : undefined}
               className="min-h-11 pl-10"
             />
           </span>
@@ -104,7 +112,7 @@ export function SignUpForm({
           <span className="text-sm font-medium">{"Password"}</span>
           <span className="relative block">
             <LockKeyhole
-              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400"
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
             <Input
@@ -116,14 +124,19 @@ export function SignUpForm({
               minLength={8}
               maxLength={128}
               required
-              disabled={!configured || submitting}
+              disabled={!configured}
+              readOnly={submitting}
+              aria-invalid={errorMessage ? true : undefined}
+              aria-describedby={
+                errorMessage ? `${passwordHintId} ${errorId}` : passwordHintId
+              }
               className="min-h-11 pl-10"
             />
           </span>
-          <FieldDescription>
-            {"Use at least 8 characters and do not reuse your ANU password."}
-          </FieldDescription>
         </label>
+        <FieldDescription id={passwordHintId}>
+          Use at least 8 characters and do not reuse your ANU password.
+        </FieldDescription>
       </Field>
 
       <Field>
@@ -131,19 +144,23 @@ export function SignUpForm({
           <span className="text-sm font-medium">{"Confirm password"}</span>
           <span className="relative block">
             <LockKeyhole
-              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-zinc-400"
+              className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
               aria-hidden="true"
             />
             <Input
               type="password"
               name="passwordConfirmation"
               value={passwordConfirmation}
+              ref={confirmationRef}
               onChange={(event) => setPasswordConfirmation(event.target.value)}
               autoComplete="new-password"
               minLength={8}
               maxLength={128}
               required
-              disabled={!configured || submitting}
+              disabled={!configured}
+              readOnly={submitting}
+              aria-invalid={errorMessage ? true : undefined}
+              aria-describedby={errorMessage ? errorId : undefined}
               className="min-h-11 pl-10"
             />
           </span>
@@ -151,17 +168,25 @@ export function SignUpForm({
       </Field>
 
       {errorMessage && (
-        <Alert role="alert" variant={"destructive"}>
-          <CircleAlert />
+        <Alert id={errorId} role="alert" variant="destructive">
+          <CircleAlert aria-hidden="true" />
           <AlertDescription>{errorMessage}</AlertDescription>
         </Alert>
       )}
 
+      {notice && (
+        <Alert role="status" variant="warning">
+          <CircleAlert aria-hidden="true" />
+          <AlertDescription>{notice}</AlertDescription>
+        </Alert>
+      )}
+
       <Button
         type="submit"
         variant="default"
-        disabled={!configured || submitting}
-        className={cn("min-h-11", "w-full")}
+        disabled={!configured}
+        aria-disabled={submitting || undefined}
+        className="min-h-11 w-full"
       >
         {submitting ? "Creating account..." : "Create account"}
       </Button>
diff --git a/apps/web/app/auth/social-sign-in.tsx b/apps/web/app/auth/social-sign-in.tsx
index a294ed81..62e29382 100644
--- a/apps/web/app/auth/social-sign-in.tsx
+++ b/apps/web/app/auth/social-sign-in.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { Button } from "@coursemap/ui/primitives/button";
-import { cn } from "@/lib/cn";
 
 import { useCoursemap } from "@/app/providers";
 
@@ -60,10 +59,7 @@ export function SocialSignIn({ disabled }: { disabled?: boolean }) {
         type="button"
         disabled={disabled}
         onClick={() => announce("Google")}
-        className={cn(
-          "min-h-11 !rounded-xl text-[13px] font-semibold",
-          "w-full",
-        )}
+        className="min-h-11 w-full"
         size="lg"
         variant="outline"
       >
@@ -74,10 +70,7 @@ export function SocialSignIn({ disabled }: { disabled?: boolean }) {
         type="button"
         disabled={disabled}
         onClick={() => announce("Microsoft")}
-        className={cn(
-          "min-h-11 !rounded-xl text-[13px] font-semibold",
-          "w-full",
-        )}
+        className="min-h-11 w-full"
         size="lg"
         variant="outline"
       >
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
index 7d86588d..9d912882 100644
--- a/apps/web/app/global-error.tsx
+++ b/apps/web/app/global-error.tsx
@@ -2,7 +2,11 @@
 
 /* eslint-disable @next/next/no-html-link-for-pages -- The root fallback must recover with a full document navigation. */
 
+import { themeInitialisationScript } from "@/lib/theme";
+
 // This fallback replaces the root layout and cannot rely on its styles or providers.
+// It cannot tell whether anyone is signed in, so it applies the saved theme,
+// which sign-out clears.
 export default function GlobalError({
   error,
   reset,
@@ -11,9 +15,12 @@ export default function GlobalError({
   reset: () => void;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <title>Something went wrong · Coursemap</title>
+        <script
+          dangerouslySetInnerHTML={{ __html: themeInitialisationScript(true) }}
+        />
       </head>
       <body style={{ margin: 0 }}>
         <style>{`
@@ -31,7 +38,7 @@ export default function GlobalError({
           .fallback button { background: var(--brand); border-color: var(--brand); color: white; }
           .fallback :focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
           .fallback .reference { font-size: 12px; overflow-wrap: anywhere; }
-          @media (prefers-color-scheme: dark) { .fallback { --canvas: #0a0a0a; --ink: #fafafa; --muted: #a1a1aa; --edge: #27272a; --brand: #8b5cf6; } }
+          .dark-mode .fallback { --canvas: #0a0a0a; --ink: #fafafa; --muted: #a1a1aa; --edge: #27272a; --brand: #8b5cf6; }
         `}</style>
         <div className="fallback">
           <header>
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index a0ed3f47..edffc13c 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -373,6 +373,26 @@
     );
 }
 
+.dark-mode .landing-mesh {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(
+      ellipse 70% 55% at 12% 8%,
+      rgba(139, 92, 246, 0.22),
+      transparent 58%
+    ),
+    radial-gradient(
+      ellipse 55% 45% at 88% 12%,
+      rgba(56, 189, 248, 0.14),
+      transparent 52%
+    ),
+    radial-gradient(
+      ellipse 50% 40% at 72% 88%,
+      rgba(236, 72, 153, 0.12),
+      transparent 55%
+    );
+}
+
 .brand-wordmark {
   font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", var(--font-sans);
   font-weight: 700;
diff --git a/apps/web/app/login/page.tsx b/apps/web/app/login/page.tsx
index 80f33d0a..63b8515e 100644
--- a/apps/web/app/login/page.tsx
+++ b/apps/web/app/login/page.tsx
@@ -31,10 +31,10 @@ export default async function LoginPage({
 
   return (
     <AuthShell>
-      <h1 className="text-2xl font-bold tracking-tight text-zinc-950 sm:text-3xl">
+      <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
         Welcome back
       </h1>
-      <p className="mt-2 text-sm leading-relaxed text-zinc-500">
+      <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
         Sign in to your plan and pick up where you left off.
       </p>
 
@@ -53,11 +53,11 @@ export default async function LoginPage({
       </div>
 
       <div className="my-6 flex items-center gap-3" aria-hidden="true">
-        <span className="h-px flex-1 bg-zinc-200" />
-        <span className="text-[11px] text-zinc-400">
+        <span className="h-px flex-1 bg-border" />
+        <span className="text-[11px] text-muted-foreground">
           or continue with email
         </span>
-        <span className="h-px flex-1 bg-zinc-200" />
+        <span className="h-px flex-1 bg-border" />
       </div>
 
       <SignInForm
@@ -66,11 +66,11 @@ export default async function LoginPage({
         initialError={initialError}
       />
 
-      <p className="mt-6 text-center text-sm text-zinc-500">
+      <p className="mt-6 text-center text-sm text-muted-foreground">
         New to Coursemap?{" "}
         <Link
           href={signUpHref}
-          className="font-semibold text-brand-700 hover:text-brand-800 hover:underline"
+          className="font-semibold text-primary hover:underline"
         >
           Create an account
         </Link>
diff --git a/apps/web/app/signup/page.tsx b/apps/web/app/signup/page.tsx
index b088b21c..eaeb2f3c 100644
--- a/apps/web/app/signup/page.tsx
+++ b/apps/web/app/signup/page.tsx
@@ -28,10 +28,10 @@ export default async function SignupPage({
 
   return (
     <AuthShell>
-      <h1 className="text-2xl font-bold tracking-tight text-zinc-950 sm:text-3xl">
-        Create your account NOW!
+      <h1 className="text-2xl font-bold tracking-tight text-foreground sm:text-3xl">
+        Create your account
       </h1>
-      <p className="mt-2 text-sm leading-relaxed text-zinc-500">
+      <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
         Map your degree, follow prerequisites and keep one plan across every
         semester. Free for ANU students.
       </p>
@@ -51,20 +51,20 @@ export default async function SignupPage({
       </div>
 
       <div className="my-6 flex items-center gap-3" aria-hidden="true">
-        <span className="h-px flex-1 bg-zinc-200" />
-        <span className="text-[11px] text-zinc-400">
+        <span className="h-px flex-1 bg-border" />
+        <span className="text-[11px] text-muted-foreground">
           or continue with email
         </span>
-        <span className="h-px flex-1 bg-zinc-200" />
+        <span className="h-px flex-1 bg-border" />
       </div>
 
       <SignUpForm next={next} configured={configured} />
 
-      <p className="mt-6 text-center text-sm text-zinc-500">
+      <p className="mt-6 text-center text-sm text-muted-foreground">
         Already have an account?{" "}
         <Link
           href={signInHref}
-          className="font-semibold text-brand-700 hover:text-brand-800 hover:underline"
+          className="font-semibold text-primary hover:underline"
         >
           Sign in
         </Link>
diff --git a/apps/web/lib/theme.ts b/apps/web/lib/theme.ts
index 5640146e..879a90ba 100644
--- a/apps/web/lib/theme.ts
+++ b/apps/web/lib/theme.ts
@@ -1,21 +1,32 @@
-const LIGHT_ROUTE_PREFIXES = ["/", "/login", "/signup", "/auth"] as const;
+export const THEME_STORAGE_KEY = "coursemap.theme";
 
-export function forceLightTheme(pathname: string, authenticated: boolean) {
-  return (
-    !authenticated ||
-    LIGHT_ROUTE_PREFIXES.some(
-      (prefix) => pathname === prefix || pathname.startsWith(`${prefix}/`),
-    )
-  );
+/**
+ * Signed-out visitors read a key the theme menu never writes, so they follow
+ * the operating system instead of the last account's choice on a shared
+ * browser. The logout route also clears site storage.
+ */
+const SIGNED_OUT_THEME_STORAGE_KEY = "coursemap.theme.signed-out";
+
+/**
+ * The landing page has no dark design yet. Remove it from this list once it
+ * does; every other route follows the saved or system theme.
+ */
+const LIGHT_ONLY_PATHS: readonly string[] = ["/"];
+
+export function isLightOnlyPath(pathname: string) {
+  return LIGHT_ONLY_PATHS.includes(pathname);
+}
+
+export function themeStorageKey(authenticated: boolean) {
+  return authenticated ? THEME_STORAGE_KEY : SIGNED_OUT_THEME_STORAGE_KEY;
 }
 
 export function themeInitialisationScript(authenticated: boolean) {
   return `(() => {
-    const lightRoutes = ${JSON.stringify(LIGHT_ROUTE_PREFIXES)};
-    const forceLight = ${!authenticated} || lightRoutes.some(prefix => location.pathname === prefix || location.pathname.startsWith(prefix + "/"));
+    const lightOnly = ${JSON.stringify(LIGHT_ONLY_PATHS)}.includes(location.pathname);
     let theme = "system";
-    try { theme = localStorage.getItem("coursemap.theme") || "system"; } catch {}
-    const dark = !forceLight && (theme === "dark" || (theme !== "light" && matchMedia("(prefers-color-scheme: dark)").matches));
+    try { theme = localStorage.getItem(${JSON.stringify(themeStorageKey(authenticated))}) || "system"; } catch {}
+    const dark = !lightOnly && (theme === "dark" || (theme !== "light" && matchMedia("(prefers-color-scheme: dark)").matches));
     const root = document.documentElement;
     root.classList.remove("light", "dark-mode");
     root.classList.add(dark ? "dark-mode" : "light");
diff --git a/apps/web/tests/theme-first-paint.test.mjs b/apps/web/tests/theme-first-paint.test.mjs
index 19165343..545a9bec 100644
--- a/apps/web/tests/theme-first-paint.test.mjs
+++ b/apps/web/tests/theme-first-paint.test.mjs
@@ -41,7 +41,8 @@ test.each([
   ["/rooms", "dark", false, "dark"],
   ["/rooms", "light", true, "light"],
   ["/rooms", "system", true, "dark"],
-  ["/login", "dark", true, "light"],
+  ["/login", "dark", false, "dark"],
+  ["/", "dark", true, "light"],
 ])(
   "applies %s with %s preference before body content without the Next.js runtime",
   async (path, theme, systemDark, expected) => {
diff --git a/apps/web/tests/theme.test.ts b/apps/web/tests/theme.test.ts
index 214e9df7..85697c3f 100644
--- a/apps/web/tests/theme.test.ts
+++ b/apps/web/tests/theme.test.ts
@@ -1,37 +1,84 @@
 import { runInNewContext } from "node:vm";
 import { expect, test } from "vitest";
-import { forceLightTheme, themeInitialisationScript } from "../lib/theme";
+import {
+  isLightOnlyPath,
+  THEME_STORAGE_KEY,
+  themeInitialisationScript,
+  themeStorageKey,
+} from "../lib/theme";
 
-test("public and signed-out pages stay light without changing authenticated workspace themes", () => {
-  for (const path of ["/", "/login", "/signup", "/auth/error"]) {
-    expect(forceLightTheme(path, true)).toBe(true);
-    expect(forceLightTheme(path, false)).toBe(true);
+function renderTheme(
+  pathname: string,
+  authenticated: boolean,
+  { stored, systemDark }: { stored?: string; systemDark: boolean },
+) {
+  const classes = new Set<string>();
+  const root = {
+    classList: {
+      remove: (...names: string[]) =>
+        names.forEach((name) => classes.delete(name)),
+      add: (name: string) => classes.add(name),
+    },
+    style: { colorScheme: "" },
+  };
+  runInNewContext(themeInitialisationScript(authenticated), {
+    location: { pathname },
+    localStorage: {
+      getItem: (key: string) =>
+        key === THEME_STORAGE_KEY ? (stored ?? null) : null,
+    },
+    matchMedia: () => ({ matches: systemDark }),
+    document: { documentElement: root },
+  });
+  return root.style.colorScheme;
+}
+
+test("only the landing page is held light", () => {
+  expect(isLightOnlyPath("/")).toBe(true);
+  for (const path of ["/login", "/signup", "/auth/error", "/onboarding"]) {
+    expect(isLightOnlyPath(path)).toBe(false);
   }
-  expect(forceLightTheme("/courses/2026/comp1100", false)).toBe(true);
-  expect(forceLightTheme("/admin", true)).toBe(false);
-  expect(forceLightTheme("/dashboard", true)).toBe(false);
 });
 
-test("the bootstrap ignores a saved dark preference on login but restores it in the workspace", () => {
-  const renderTheme = (pathname: string, authenticated: boolean) => {
-    const classes = new Set<string>();
-    const root = {
-      classList: {
-        remove: (...names: string[]) =>
-          names.forEach((name) => classes.delete(name)),
-        add: (name: string) => classes.add(name),
-      },
-      style: { colorScheme: "" },
-    };
-    runInNewContext(themeInitialisationScript(authenticated), {
-      location: { pathname },
-      localStorage: { getItem: () => "dark" },
-      matchMedia: () => ({ matches: true }),
-      document: { documentElement: root },
-    });
-    return { classes, scheme: root.style.colorScheme };
+test("signed-out visitors follow the system and ignore a saved choice", () => {
+  expect(themeStorageKey(false)).not.toBe(THEME_STORAGE_KEY);
+  expect(renderTheme("/login", false, { systemDark: true })).toBe("dark");
+  expect(
+    renderTheme("/courses", false, { stored: "light", systemDark: true }),
+  ).toBe("dark");
+  expect(
+    renderTheme("/signup", false, { stored: "dark", systemDark: false }),
+  ).toBe("light");
+});
+
+test("signed-in people keep their saved choice on every route but the landing page", () => {
+  expect(themeStorageKey(true)).toBe(THEME_STORAGE_KEY);
+  expect(
+    renderTheme("/onboarding", true, { stored: "dark", systemDark: false }),
+  ).toBe("dark");
+  expect(
+    renderTheme("/dashboard", true, { stored: "light", systemDark: true }),
+  ).toBe("light");
+  expect(renderTheme("/plan", true, { systemDark: true })).toBe("dark");
+  expect(renderTheme("/", true, { stored: "dark", systemDark: true })).toBe(
+    "light",
+  );
+});
+
+test("an unreadable store falls back to the system theme", () => {
+  const root = {
+    classList: { remove: () => {}, add: () => {} },
+    style: { colorScheme: "" },
   };
-  expect(renderTheme("/login", true).scheme).toBe("light");
-  expect(renderTheme("/dashboard", true).scheme).toBe("dark");
-  expect(renderTheme("/courses", false).classes.has("dark-mode")).toBe(false);
+  runInNewContext(themeInitialisationScript(true), {
+    location: { pathname: "/plan" },
+    localStorage: {
+      getItem: () => {
+        throw new Error("blocked");
+      },
+    },
+    matchMedia: () => ({ matches: true }),
+    document: { documentElement: root },
+  });
+  expect(root.style.colorScheme).toBe("dark");
 });
diff --git a/apps/web/ui/shell/app-theme-provider.tsx b/apps/web/ui/shell/app-theme-provider.tsx
index 59d004a1..d6b56672 100644
--- a/apps/web/ui/shell/app-theme-provider.tsx
+++ b/apps/web/ui/shell/app-theme-provider.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from "react";
 import { usePathname } from "next/navigation";
-import { forceLightTheme } from "@/lib/theme";
+import { isLightOnlyPath, themeStorageKey } from "@/lib/theme";
 import { ThemeProvider } from "next-themes";
 import { TooltipProvider } from "@coursemap/ui/primitives/tooltip";
 
@@ -19,13 +19,11 @@ export function AppThemeProvider({
     <ThemeProvider
       attribute="class"
       value={{ light: "light", dark: "dark-mode" }}
-      forcedTheme={
-        forceLightTheme(pathname ?? "/", authenticated) ? "light" : undefined
-      }
+      forcedTheme={isLightOnlyPath(pathname ?? "/") ? "light" : undefined}
       defaultTheme="system"
       enableSystem
       disableTransitionOnChange
-      storageKey="coursemap.theme"
+      storageKey={themeStorageKey(authenticated)}
       // Keep the library's inline bootstrap inert during client rendering.
       // Its effects still manage theme changes and system preference updates.
       scriptProps={{ type: "text/plain" }}

From c39ff938e21f4522f92098742f7f88b5820225be Mon Sep 17 00:00:00 2001
From: Harry Randall <randallhazza@gmail.com>
Date: Wed, 23 Sep 2026 10:58:26 +1000
Subject: [PATCH 2/3] feat: rebuild onboarding around the year a student
 started

Onboarding asks for a name, the year the student started, their degree and
their study load, one question per step with a live summary of the plan.
The rules year follows the start year, falling back to the closest
published year, so continuing students no longer get a timeline that
starts years early.

The catalogue loader pages past the 1000-row limit and batches identifier
lists. Profile types move into lib, the student-number rule is shared,
toasts gain an error tone and match the visible theme, and removing a
course revalidates the plan.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/onboarding/loading.tsx           |  56 +-
 apps/web/app/onboarding/onboarding-form.tsx   | 768 +++++++++---------
 apps/web/app/onboarding/page.tsx              |   8 +-
 apps/web/app/profile/profile-editor.tsx       |  14 +-
 apps/web/app/providers.tsx                    |  38 +-
 apps/web/lib/coursemap/actions.ts             |  25 +-
 apps/web/lib/coursemap/admin-catalogue.ts     |  21 +-
 apps/web/lib/coursemap/commencement.ts        |  35 +
 .../web/lib/coursemap/onboarding-catalogue.ts | 126 +--
 .../coursemap/programme-structure-options.ts  |  20 +-
 apps/web/lib/coursemap/state.ts               |   2 +-
 apps/web/lib/coursemap/student-number.ts      |   8 +
 apps/web/lib/coursemap/types.ts               |  20 +
 apps/web/lib/supabase/read-all-rows.ts        |  46 ++
 apps/web/tests/commencement.test.ts           |  29 +
 apps/web/tests/onboarding-catalogue.test.ts   | 104 +++
 apps/web/tests/onboarding-form.test.tsx       | 134 +++
 .../programme-structure-options.test.mjs      |  18 +-
 apps/web/ui/onboarding/choice-cards.tsx       |  85 ++
 .../web/ui/onboarding/onboarding-progress.tsx |  26 +
 apps/web/ui/onboarding/onboarding-summary.tsx |  40 +
 21 files changed, 1056 insertions(+), 567 deletions(-)
 create mode 100644 apps/web/lib/coursemap/commencement.ts
 create mode 100644 apps/web/lib/coursemap/student-number.ts
 create mode 100644 apps/web/lib/supabase/read-all-rows.ts
 create mode 100644 apps/web/tests/commencement.test.ts
 create mode 100644 apps/web/tests/onboarding-catalogue.test.ts
 create mode 100644 apps/web/tests/onboarding-form.test.tsx
 create mode 100644 apps/web/ui/onboarding/choice-cards.tsx
 create mode 100644 apps/web/ui/onboarding/onboarding-progress.tsx
 create mode 100644 apps/web/ui/onboarding/onboarding-summary.tsx

diff --git a/apps/web/app/onboarding/loading.tsx b/apps/web/app/onboarding/loading.tsx
index a43ebdf4..59369f08 100644
--- a/apps/web/app/onboarding/loading.tsx
+++ b/apps/web/app/onboarding/loading.tsx
@@ -1,46 +1,40 @@
-import { Card } from "@coursemap/ui/primitives/card";
 import { Skeleton } from "@coursemap/ui/primitives/skeleton";
 import { BrandMark } from "@/ui/brand-mark";
 
-/** Mirrors the onboarding wizard: brand header, welcome panel with step pills and the first form step. */
+/** Mirrors the onboarding flow: brand header, the question card and the plan summary. */
 export default function OnboardingLoading() {
   return (
-    <main className="landing-mesh min-h-dvh px-4 py-8 sm:py-12">
-      <div aria-busy="true" className="mx-auto w-full">
-        <span className="sr-only">Loading onboarding</span>
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2.5">
-            <BrandMark className="size-10" />
-            <strong className="brand-wordmark text-lg">coursemap</strong>
-          </div>
-          <Skeleton className="h-8 w-24 rounded-lg" />
+    <main className="landing-mesh min-h-dvh px-4 py-6 sm:px-6 sm:py-8">
+      <span className="sr-only">Loading onboarding</span>
+      <div
+        aria-busy="true"
+        className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4"
+      >
+        <div className="flex items-center gap-2.5">
+          <BrandMark className="size-9" />
+          <strong className="brand-wordmark text-lg">coursemap</strong>
         </div>
+        <Skeleton className="h-8 w-24 rounded-lg" />
+      </div>
 
-        <Card className="mt-8 gap-0 overflow-hidden rounded-3xl py-0">
-          <div className="border-b bg-gradient-to-br from-primary/10 via-card to-card px-6 py-7 sm:px-9">
-            <Skeleton className="size-11 rounded-2xl" />
-            <Skeleton className="mt-4 h-8 w-64 max-w-full" />
-            <Skeleton className="mt-3 h-3.5 w-full max-w-xl" />
-            <Skeleton className="mt-2 h-3.5 w-3/4 max-w-md" />
-            <div className="mt-6 flex flex-wrap items-center gap-2">
-              {["w-28", "w-28", "w-32"].map((width, index) => (
-                <Skeleton key={index} className={`h-9 rounded-full ${width}`} />
-              ))}
-            </div>
-          </div>
-          <div className="space-y-5 p-6 sm:p-9">
-            <Skeleton className="h-4 w-40" />
-            {Array.from({ length: 3 }, (_, index) => (
+      <div className="mx-auto mt-8 grid w-full max-w-5xl gap-6 sm:mt-14 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-10">
+        <div className="mx-auto w-full max-w-xl rounded-3xl border bg-card p-6 shadow-sm sm:p-9">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="mt-2 h-1.5 w-full rounded-full" />
+          <Skeleton className="mt-8 h-8 w-72 max-w-full" />
+          <div className="mt-6 space-y-5">
+            {Array.from({ length: 2 }, (_, index) => (
               <div key={index}>
                 <Skeleton className="mb-2 h-3 w-24" />
-                <Skeleton className="h-10 w-full rounded-lg" />
+                <Skeleton className="h-9 w-full rounded-lg" />
               </div>
             ))}
-            <div className="flex justify-end pt-2">
-              <Skeleton className="h-10 w-28 rounded-lg" />
-            </div>
           </div>
-        </Card>
+          <div className="mt-8 flex justify-end">
+            <Skeleton className="h-9 w-28 rounded-lg" />
+          </div>
+        </div>
+        <Skeleton className="hidden h-72 rounded-2xl lg:block" />
       </div>
     </main>
   );
diff --git a/apps/web/app/onboarding/onboarding-form.tsx b/apps/web/app/onboarding/onboarding-form.tsx
index 5b5b69c7..1a98d5d7 100644
--- a/apps/web/app/onboarding/onboarding-form.tsx
+++ b/apps/web/app/onboarding/onboarding-form.tsx
@@ -2,155 +2,164 @@
 
 import { Alert, AlertDescription } from "@coursemap/ui/components/alert";
 import { Button } from "@coursemap/ui/primitives/button";
-import { Card } from "@coursemap/ui/primitives/card";
 import {
   Field,
   FieldDescription,
   FieldLabel,
 } from "@coursemap/ui/primitives/field";
 import { Input } from "@coursemap/ui/primitives/input";
-import {
-  ArrowLeft,
-  ArrowRight,
-  CalendarClock,
-  Check,
-  GraduationCap,
-  Sparkles,
-  TriangleAlert,
-  UserRound,
-} from "lucide-react";
+import { ArrowLeft, ArrowRight, Info, TriangleAlert } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import {
+  useEffect,
   useId,
   useMemo,
+  useRef,
   useState,
   type FormEvent,
-  type ReactNode,
 } from "react";
 
 import { BrandMark } from "@/ui/brand-mark";
-import { StructureMultiSelect } from "@/ui/profile/structure-multi-select";
 import { SelectField } from "@/ui/common/select-field";
-import { cn } from "@/lib/cn";
+import {
+  ChoiceCards,
+  type ChoiceCardOption,
+} from "@/ui/onboarding/choice-cards";
+import { OnboardingProgress } from "@/ui/onboarding/onboarding-progress";
+import { OnboardingSummary } from "@/ui/onboarding/onboarding-summary";
+import { StructureMultiSelect } from "@/ui/profile/structure-multi-select";
 import { saveProfileAndPlan } from "@/lib/coursemap/actions";
-import type {
-  OnboardingCatalogue,
-  ProgrammeOption,
-} from "@/lib/coursemap/onboarding-catalogue";
+import {
+  commencementYearOptions,
+  rulesYearForCommencement,
+} from "@/lib/coursemap/commencement";
+import type { OnboardingCatalogue } from "@/lib/coursemap/onboarding-catalogue";
 import { nominalProgrammeDuration } from "@/lib/coursemap/plan-timeline";
+import { normaliseStudentNumber } from "@/lib/coursemap/student-number";
 
 type OnboardingFormProps = {
   catalogue: OnboardingCatalogue;
+  currentYear: number;
   email: string;
 };
 
 const steps = [
-  { id: "about", label: "About you", icon: UserRound },
-  { id: "degree", label: "Your degree", icon: GraduationCap },
-  { id: "details", label: "Study details", icon: CalendarClock },
+  { id: "about", label: "About you", title: "What should we call you?" },
+  { id: "start", label: "Start year", title: "When did you start at ANU?" },
+  { id: "degree", label: "Degree", title: "What are you studying?" },
+  { id: "pace", label: "Study load", title: "How much are you taking on?" },
 ] as const;
 
 type StepId = (typeof steps)[number]["id"];
 type StudyLoad = "Full time" | "Part time";
 
-const STUDENT_NUMBER_PATTERN = /^u\d{7}$/;
-const STUDY_LOADS: { value: StudyLoad; label: string }[] = [
-  { value: "Full time", label: "Full time" },
-  { value: "Part time", label: "Part time" },
+const STUDY_LOADS: readonly ChoiceCardOption<StudyLoad>[] = [
+  {
+    value: "Full time",
+    label: "Full time",
+    description: "3 or 4 courses a semester",
+  },
+  {
+    value: "Part time",
+    label: "Part time",
+    description: "1 or 2 courses a semester",
+  },
 ];
 
-function yearsOfStudy(degree: ProgrammeOption | undefined) {
-  const duration = nominalProgrammeDuration(
-    degree
-      ? { duration: degree.durationYears, units: degree.units }
-      : undefined,
-  );
-  if (duration === null) return [];
-  return Array.from({ length: duration }, (_, index) => index + 1);
-}
-
 /**
- * Three-step first-run flow that creates the student's primary plan. The flow
- * is optional: students can skip to the dashboard and set up a plan later from
- * the profile page.
+ * First-run flow that creates the student's primary plan. It is optional:
+ * students can skip to the dashboard and set up a plan from their profile.
  */
-export function OnboardingForm({ catalogue, email }: OnboardingFormProps) {
+export function OnboardingForm({
+  catalogue,
+  currentYear,
+  email,
+}: OnboardingFormProps) {
   const router = useRouter();
   const nameId = useId();
   const studentNumberId = useId();
+  const messageId = useId();
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const movedStep = useRef(false);
+
   const [stepId, setStepId] = useState<StepId>("about");
   const [name, setName] = useState("");
   const [studentNumber, setStudentNumber] = useState("");
-  const [catalogueYear, setCatalogueYear] = useState(
-    catalogue.catalogueYears[0]?.year ?? 0,
+  const [commencementYear, setCommencementYear] = useState<number | null>(null);
+  const [rulesYearOverride, setRulesYearOverride] = useState<number | null>(
+    null,
   );
-  const degrees = useMemo(
-    () =>
-      catalogue.degrees.filter((item) => item.catalogueYear === catalogueYear),
-    [catalogue.degrees, catalogueYear],
-  );
-  const [degreeCode, setDegreeCode] = useState(degrees[0]?.code ?? "");
+  const [degreeCode, setDegreeCode] = useState("");
   const [majorCode, setMajorCode] = useState("");
   const [minorCodes, setMinorCodes] = useState<string[]>([]);
   const [specialisationCodes, setSpecialisationCodes] = useState<string[]>([]);
-  const [yearOfStudy, setYearOfStudy] = useState(1);
   const [studyLoad, setStudyLoad] = useState<StudyLoad>("Full time");
   const [message, setMessage] = useState<string | null>(null);
   const [submitting, setSubmitting] = useState(false);
 
-  const degree = useMemo(
-    () => degrees.find((item) => item.code === degreeCode),
-    [degreeCode, degrees],
-  );
-  const majors = useMemo(
-    () =>
-      catalogue.majors.filter(
-        (item) =>
-          item.catalogueYear === catalogueYear &&
-          (degree?.majorCodes.includes(item.code) ?? false),
-      ),
-    [catalogue.majors, catalogueYear, degree?.majorCodes],
+  const publishedYears = useMemo(
+    () => catalogue.catalogueYears.map((item) => item.year),
+    [catalogue.catalogueYears],
   );
-  const minors = useMemo(
-    () =>
-      catalogue.minors.filter(
-        (item) =>
-          item.catalogueYear === catalogueYear &&
-          (degree?.minorCodes.includes(item.code) ?? false),
-      ),
-    [catalogue.minors, catalogueYear, degree?.minorCodes],
+  const suggestedRulesYear =
+    commencementYear === null
+      ? null
+      : rulesYearForCommencement(commencementYear, publishedYears);
+  const catalogueYear = rulesYearOverride ?? suggestedRulesYear;
+
+  // The lists are short, so filtering on render is cheaper than memoising.
+  const degrees = catalogue.degrees.filter(
+    (item) => item.catalogueYear === catalogueYear,
   );
-  const specialisations = useMemo(
-    () =>
-      catalogue.specialisations.filter(
-        (item) =>
-          item.catalogueYear === catalogueYear &&
-          (degree?.specialisationCodes.includes(item.code) ?? false),
-      ),
-    [catalogue.specialisations, catalogueYear, degree?.specialisationCodes],
+  const degree = degrees.find((item) => item.code === degreeCode);
+  const offered = (codes: readonly string[] | undefined) => {
+    const set = new Set(codes ?? []);
+    return (item: { code: string; catalogueYear: number }) =>
+      item.catalogueYear === catalogueYear && set.has(item.code);
+  };
+  const majors = catalogue.majors.filter(offered(degree?.majorCodes));
+  const minors = catalogue.minors.filter(offered(degree?.minorCodes));
+  const specialisations = catalogue.specialisations.filter(
+    offered(degree?.specialisationCodes),
   );
-  const studyYears = yearsOfStudy(degree);
-  const planningDurationAvailable = studyYears.length > 0;
   const major = majors.find((item) => item.code === majorCode);
+  const planningAvailable =
+    nominalProgrammeDuration(
+      degree
+        ? { duration: degree.durationYears, units: degree.units }
+        : undefined,
+    ) !== null;
+  const studentNumberInvalid = normaliseStudentNumber(studentNumber) === null;
+
+  const stepIndex = steps.findIndex((item) => item.id === stepId);
+  const step = steps[stepIndex];
+  const unavailable = publishedYears.length === 0;
 
-  const stepIndex = steps.findIndex((step) => step.id === stepId);
-  const unavailable = !catalogueYear || catalogue.degrees.length === 0;
+  // Moving between steps replaces the form, so focus follows the new heading
+  // and screen readers hear which step they are on.
+  useEffect(() => {
+    if (movedStep.current) headingRef.current?.focus();
+  }, [stepId]);
 
-  /** Changing the degree invalidates every structure chosen beneath it. */
+  /** Changing the rules year or degree invalidates every structure beneath it. */
   const resetStructures = () => {
     setMajorCode("");
     setMinorCodes([]);
     setSpecialisationCodes([]);
-    setYearOfStudy(1);
   };
 
-  const selectCatalogueYear = (nextYear: number) => {
-    const nextDegree = catalogue.degrees.find(
-      (item) => item.catalogueYear === nextYear,
-    );
-    setCatalogueYear(nextYear);
-    setDegreeCode(nextDegree?.code ?? "");
+  const selectCommencementYear = (year: number) => {
+    setCommencementYear(year);
+    setRulesYearOverride(null);
+    setDegreeCode("");
+    resetStructures();
+  };
+
+  const selectRulesYear = (year: number) => {
+    setRulesYearOverride(year);
+    setDegreeCode("");
     resetStructures();
   };
 
@@ -159,58 +168,55 @@ export function OnboardingForm({ catalogue, email }: OnboardingFormProps) {
     resetStructures();
   };
 
-  const goBack = () => {
+  const moveTo = (next: StepId) => {
+    movedStep.current = true;
     setMessage(null);
-    if (stepIndex > 0) setStepId(steps[stepIndex - 1].id);
+    setStepId(next);
   };
 
-  const goForward = () => {
-    if (stepId === "about" && !name.trim()) {
-      setMessage("Add your name so your plan has an owner.");
-      return;
+  /** Returns what is missing from the current step, or null when it is complete. */
+  const validate = () => {
+    if (stepId === "about") {
+      if (!name.trim()) return "Add your name so your plan has an owner.";
+      if (studentNumberInvalid) {
+        return "Enter a student number in the format u1234567, or leave it blank.";
+      }
     }
-    if (
-      stepId === "about" &&
-      studentNumber.trim() &&
-      !STUDENT_NUMBER_PATTERN.test(studentNumber.trim().toLowerCase())
-    ) {
-      setMessage(
-        "Enter a student number in the format u1234567, or leave it blank.",
-      );
-      return;
+    if (stepId === "start" && commencementYear === null) {
+      return "Choose the year you started.";
     }
-    if (stepId === "degree" && !degree) {
-      setMessage("Choose a degree to continue.");
-      return;
+    if (stepId === "degree") {
+      if (!degree) return "Choose your degree to continue.";
+      if (!planningAvailable) {
+        return "Planning is not available for this degree yet. Skip for now and come back later.";
+      }
     }
-    setMessage(null);
-    if (stepIndex < steps.length - 1) setStepId(steps[stepIndex + 1].id);
+    return null;
   };
 
   const submit = async (event: FormEvent) => {
     event.preventDefault();
-    if (stepId !== "details") {
-      goForward();
-      return;
-    }
-    if (!catalogueYear || !degree || !name.trim()) {
-      setMessage("Choose a degree and add your name to continue.");
+    if (submitting) return;
+    const problem = validate();
+    if (problem) {
+      setMessage(problem);
+      if (stepId === "about") nameRef.current?.focus();
       return;
     }
-    if (!planningDurationAvailable) {
-      setMessage(
-        "Planning is not available for this programme yet. You can skip this step and return later.",
-      );
+    if (stepId !== "pace") {
+      moveTo(steps[stepIndex + 1].id);
       return;
     }
+    if (!degree || catalogueYear === null || commencementYear === null) return;
+
     setSubmitting(true);
     setMessage(null);
     const result = await saveProfileAndPlan({
-      name,
+      name: name.trim(),
       studentId: studentNumber,
       email,
       catalogueYear,
-      commencementYear: catalogueYear - (yearOfStudy - 1),
+      commencementYear,
       degreeCode,
       majorCode,
       minorCodes,
@@ -218,283 +224,275 @@ export function OnboardingForm({ catalogue, email }: OnboardingFormProps) {
       studyLoad,
       extensionYears: 0,
     });
-    setSubmitting(false);
     if (!result.ok) {
+      setSubmitting(false);
       setMessage(result.message);
       return;
     }
+    // Stay in the submitting state until the plan page replaces this one.
     router.replace("/plan");
     router.refresh();
   };
 
-  return (
-    <main className="landing-mesh min-h-dvh px-4 py-8 sm:py-12">
-      <div className="mx-auto w-full">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2.5">
-            <BrandMark className="size-10" />
-            <strong className="brand-wordmark text-lg">coursemap</strong>
-          </div>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/dashboard">Skip for now</Link>
-          </Button>
-        </div>
+  const namesOf = (
+    options: readonly { code: string; name: string }[],
+    codes: readonly string[],
+  ) =>
+    options
+      .filter((item) => codes.includes(item.code))
+      .map((item) => item.name)
+      .join(", ");
 
-        <Card className="mt-8 overflow-hidden rounded-3xl p-0">
-          <div className="border-b bg-gradient-to-br from-primary/10 via-card to-card px-6 py-7 sm:px-9">
-            <span className="grid size-11 place-items-center rounded-2xl bg-primary text-primary-foreground shadow-sm">
-              <Sparkles size={20} aria-hidden="true" />
-            </span>
-            <h1 className="mt-4 text-2xl font-bold tracking-tight sm:text-3xl">
-              Welcome to Coursemap
-            </h1>
-            <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
-              Three quick steps and your degree plan is ready. You can change
-              any of this later, or skip and set it up from your profile.
-            </p>
+  const summaryRows = [
+    { label: "Name", value: name.trim() },
+    {
+      label: "Started",
+      value:
+        commencementYear === null
+          ? ""
+          : catalogueYear === null || catalogueYear === commencementYear
+            ? String(commencementYear)
+            : `${commencementYear} · ${catalogueYear} rules`,
+    },
+    { label: "Degree", value: degree?.name ?? "" },
+    { label: "Major", value: major?.name ?? "" },
+    ...(minorCodes.length > 0
+      ? [{ label: "Minors", value: namesOf(minors, minorCodes) }]
+      : []),
+    ...(specialisationCodes.length > 0
+      ? [
+          {
+            label: "Specialisations",
+            value: namesOf(specialisations, specialisationCodes),
+          },
+        ]
+      : []),
+    { label: "Study load", value: stepId === "pace" ? studyLoad : "" },
+  ];
 
-            <ol
-              className="mt-6 flex flex-wrap items-center gap-2"
-              aria-label="Onboarding steps"
-            >
-              {steps.map((step, index) => {
-                const Icon = step.icon;
-                const isCurrent = step.id === stepId;
-                const isComplete = index < stepIndex;
-                return (
-                  <li
-                    key={step.id}
-                    aria-current={isCurrent ? "step" : undefined}
-                    className={cn(
-                      "flex min-h-9 items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-semibold transition",
-                      isCurrent &&
-                        "bg-primary text-primary-foreground shadow-sm",
-                      isComplete &&
-                        "bg-emerald-500/10 text-emerald-700 ring-1 ring-emerald-500/30 ring-inset dark:text-emerald-300",
-                      !isCurrent &&
-                        !isComplete &&
-                        "bg-card text-muted-foreground ring-1 ring-border ring-inset",
-                    )}
-                  >
-                    {isComplete ? (
-                      <Check className="size-3.5" aria-hidden="true" />
-                    ) : (
-                      <Icon className="size-3.5" aria-hidden="true" />
-                    )}
-                    {step.label}
-                    {isComplete ? (
-                      <span className="sr-only">(completed)</span>
-                    ) : null}
-                  </li>
-                );
-              })}
-            </ol>
-          </div>
+  return (
+    <main className="landing-mesh min-h-dvh px-4 py-6 sm:px-6 sm:py-8">
+      <div className="mx-auto flex w-full max-w-5xl items-center justify-between gap-4">
+        <div className="flex items-center gap-2.5">
+          <BrandMark className="size-9" />
+          <strong className="brand-wordmark text-lg">coursemap</strong>
+        </div>
+        <Button asChild variant="ghost" size="sm">
+          <Link href="/dashboard">Skip for now</Link>
+        </Button>
+      </div>
 
+      <div className="mx-auto mt-8 grid w-full max-w-5xl gap-6 sm:mt-14 lg:grid-cols-[minmax(0,1fr)_18rem] lg:gap-10">
+        <div className="mx-auto w-full max-w-xl rounded-3xl border bg-card p-6 shadow-sm sm:p-9">
+          <h1 className="sr-only">Set up your plan</h1>
           {unavailable ? (
-            <div className="p-6 sm:p-9">
-              <Alert variant="warning">
-                <TriangleAlert aria-hidden="true" />
-                <AlertDescription>
-                  No programmes are available for the{" "}
-                  {catalogueYear || "current"} catalogue yet. You can skip this
-                  step and return later.
-                </AlertDescription>
-              </Alert>
-            </div>
+            <Alert variant="warning">
+              <TriangleAlert aria-hidden="true" />
+              <AlertDescription>
+                No degrees are available to plan yet. Skip for now and set up
+                your plan from your profile later.
+              </AlertDescription>
+            </Alert>
           ) : (
-            <form className="p-6 sm:p-9" onSubmit={submit}>
-              {stepId === "about" ? (
-                <fieldset className="space-y-5">
-                  <legend className="text-base font-semibold">
-                    Tell us who is planning
-                  </legend>
-                  <Field>
-                    <FieldLabel htmlFor={nameId}>Your name</FieldLabel>
-                    <Input
-                      autoComplete="name"
-                      autoFocus
-                      id={nameId}
-                      onChange={(event) => setName(event.target.value)}
-                      placeholder="Your name"
-                      required
-                      value={name}
-                    />
-                  </Field>
-                  <Field>
-                    <FieldLabel htmlFor={studentNumberId}>
-                      Student number
-                    </FieldLabel>
-                    <Input
-                      autoComplete="off"
-                      id={studentNumberId}
-                      onChange={(event) => setStudentNumber(event.target.value)}
-                      placeholder="u1234567"
-                      value={studentNumber}
-                    />
-                    <FieldDescription>
-                      Optional. Use the format u1234567.
-                    </FieldDescription>
-                  </Field>
-                </fieldset>
-              ) : null}
+            <form noValidate onSubmit={submit}>
+              <OnboardingProgress
+                current={stepIndex + 1}
+                label={step.label}
+                total={steps.length}
+              />
 
-              {stepId === "degree" ? (
-                <fieldset className="space-y-5">
-                  <legend className="text-base font-semibold">
-                    Choose your course of study
-                  </legend>
-                  <SelectField
-                    description="Your requirements follow the catalogue year you started under."
-                    items={catalogue.catalogueYears.map((item) => ({
-                      value: item.year,
-                      label: `${item.year} catalogue`,
-                    }))}
-                    label="Rules year"
-                    onValueChange={selectCatalogueYear}
-                    searchable={false}
-                    value={catalogueYear}
-                  />
-                  <SelectField
-                    items={degrees.map((item) => ({
-                      value: item.code,
-                      label: `${item.name} (${item.code})`,
-                    }))}
-                    label="Degree"
-                    onValueChange={selectDegree}
-                    value={degreeCode}
-                  />
-                  <SelectField
-                    description="Optional. You can pick this later."
-                    disabled={majors.length === 0}
-                    items={[
-                      { value: "", label: "Choose later" },
-                      ...majors.map((item) => ({
-                        value: item.code,
-                        label: `${item.name} (${item.code})`,
-                      })),
-                    ]}
-                    label="Major"
-                    onValueChange={setMajorCode}
-                    value={majorCode}
-                  />
-                  {minors.length > 0 ? (
-                    <StructureMultiSelect
-                      hint="Optional. Select every minor you want included in this plan."
-                      label="Minors"
-                      onChange={setMinorCodes}
-                      options={minors}
-                      value={minorCodes}
-                    />
-                  ) : null}
-                  {specialisations.length > 0 ? (
-                    <StructureMultiSelect
-                      hint="Optional. Select every specialisation you want included in this plan."
-                      label="Specialisations"
-                      onChange={setSpecialisationCodes}
-                      options={specialisations}
-                      value={specialisationCodes}
+              <h2
+                ref={headingRef}
+                tabIndex={-1}
+                className="mt-8 text-2xl font-bold tracking-tight outline-none sm:text-3xl"
+              >
+                {step.title}
+              </h2>
+
+              <div className="mt-6 space-y-5">
+                {stepId === "about" ? (
+                  <>
+                    <Field>
+                      <FieldLabel htmlFor={nameId}>Name</FieldLabel>
+                      <Input
+                        ref={nameRef}
+                        aria-describedby={message ? messageId : undefined}
+                        aria-invalid={
+                          message && !name.trim() ? true : undefined
+                        }
+                        autoComplete="name"
+                        autoFocus
+                        id={nameId}
+                        onChange={(event) => setName(event.target.value)}
+                        value={name}
+                      />
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor={studentNumberId}>
+                        Student number{" "}
+                        <span className="font-normal text-muted-foreground">
+                          (optional)
+                        </span>
+                      </FieldLabel>
+                      <Input
+                        aria-invalid={
+                          message && studentNumberInvalid ? true : undefined
+                        }
+                        autoComplete="off"
+                        id={studentNumberId}
+                        onChange={(event) =>
+                          setStudentNumber(event.target.value)
+                        }
+                        placeholder="u1234567"
+                        value={studentNumber}
+                      />
+                    </Field>
+                  </>
+                ) : null}
+
+                {stepId === "start" ? (
+                  <>
+                    <ChoiceCards
+                      columns={3}
+                      label="Year you started"
+                      onValueChange={selectCommencementYear}
+                      options={commencementYearOptions(currentYear).map(
+                        (year) => ({
+                          value: year,
+                          label: String(year),
+                          description:
+                            year === currentYear ? "Starting now" : undefined,
+                        }),
+                      )}
+                      value={commencementYear}
                     />
-                  ) : null}
-                </fieldset>
-              ) : null}
+                    {commencementYear !== null && catalogueYear !== null ? (
+                      <div className="space-y-4 rounded-xl bg-muted/50 p-4 text-sm">
+                        <p className="flex gap-2">
+                          <Info
+                            className="mt-0.5 size-4 shrink-0 text-muted-foreground"
+                            aria-hidden="true"
+                          />
+                          <span>
+                            {suggestedRulesYear === commencementYear
+                              ? `Your plan follows the ${commencementYear} degree rules, from the year you started.`
+                              : `Coursemap doesn't have the ${commencementYear} degree rules yet, so your plan uses ${suggestedRulesYear}.`}
+                          </span>
+                        </p>
+                        {publishedYears.length > 1 ? (
+                          <SelectField
+                            description="Change this only if you moved to a newer set of rules."
+                            items={publishedYears.map((year) => ({
+                              value: year,
+                              label: `${year} rules`,
+                            }))}
+                            label="Degree rules"
+                            onValueChange={selectRulesYear}
+                            searchable={false}
+                            value={catalogueYear}
+                          />
+                        ) : null}
+                      </div>
+                    ) : null}
+                  </>
+                ) : null}
 
-              {stepId === "details" ? (
-                <fieldset className="space-y-5">
-                  <legend className="text-base font-semibold">
-                    Nearly there
-                  </legend>
-                  <div className="grid gap-5 sm:grid-cols-2">
+                {stepId === "degree" ? (
+                  <>
                     <SelectField
-                      disabled={!planningDurationAvailable}
-                      items={studyYears.map((year) => ({
-                        value: year,
-                        label: `Year ${year}`,
+                      items={degrees.map((item) => ({
+                        value: item.code,
+                        label: `${item.name} (${item.code})`,
                       }))}
-                      label="What year of your degree are you in?"
-                      onValueChange={setYearOfStudy}
-                      searchable={false}
-                      value={yearOfStudy}
+                      label="Degree"
+                      onValueChange={selectDegree}
+                      placeholder="Search degrees"
+                      value={degreeCode}
                     />
-                    <SelectField
-                      items={STUDY_LOADS}
+                    {majors.length > 0 ? (
+                      <SelectField
+                        description="Optional. You can choose later."
+                        items={[
+                          { value: "", label: "Choose later" },
+                          ...majors.map((item) => ({
+                            value: item.code,
+                            label: `${item.name} (${item.code})`,
+                          })),
+                        ]}
+                        label="Major"
+                        onValueChange={setMajorCode}
+                        value={majorCode}
+                      />
+                    ) : null}
+                    {minors.length > 0 ? (
+                      <StructureMultiSelect
+                        hint="Optional. Choose any you plan to complete."
+                        label="Minors"
+                        onChange={setMinorCodes}
+                        options={minors}
+                        value={minorCodes}
+                      />
+                    ) : null}
+                    {specialisations.length > 0 ? (
+                      <StructureMultiSelect
+                        hint="Optional. Choose any you plan to complete."
+                        label="Specialisations"
+                        onChange={setSpecialisationCodes}
+                        options={specialisations}
+                        value={specialisationCodes}
+                      />
+                    ) : null}
+                  </>
+                ) : null}
+
+                {stepId === "pace" ? (
+                  <>
+                    <ChoiceCards
                       label="Study load"
                       onValueChange={setStudyLoad}
-                      searchable={false}
+                      options={STUDY_LOADS}
                       value={studyLoad}
                     />
-                  </div>
-
-                  {degree && !planningDurationAvailable ? (
-                    <Alert variant="warning">
-                      <TriangleAlert aria-hidden="true" />
-                      <AlertDescription>
-                        Planning is not available for this programme yet. You
-                        can skip this step and return later.
-                      </AlertDescription>
-                    </Alert>
-                  ) : null}
-                  <div className="rounded-2xl bg-muted/50 p-4 ring-1 ring-border">
-                    <p className="text-xs font-bold tracking-wider text-muted-foreground uppercase">
-                      Your plan
-                    </p>
-                    <dl className="mt-3 space-y-2 text-sm">
-                      <SummaryRow label="Planner">
-                        {name.trim() || "Not set"}
-                      </SummaryRow>
-                      <SummaryRow label="Degree">
-                        {degree ? `${degree.name} (${degree.code})` : "Not set"}
-                      </SummaryRow>
-                      <SummaryRow label="Major">
-                        {major ? major.name : "Choose later"}
-                      </SummaryRow>
-                      {minors.length > 0 ? (
-                        <SummaryRow label="Minors">
-                          {structureNames(minors, minorCodes)}
-                        </SummaryRow>
-                      ) : null}
-                      {specialisations.length > 0 ? (
-                        <SummaryRow label="Specialisations">
-                          {structureNames(specialisations, specialisationCodes)}
-                        </SummaryRow>
-                      ) : null}
-                      <SummaryRow label="Rules year">
-                        {catalogueYear} catalogue
-                      </SummaryRow>
-                      <SummaryRow label="Load">
-                        {planningDurationAvailable
-                          ? `Year ${yearOfStudy} · ${studyLoad}`
-                          : `Study year not available · ${studyLoad}`}
-                      </SummaryRow>
-                    </dl>
-                  </div>
-                </fieldset>
-              ) : null}
+                    <OnboardingSummary
+                      className="lg:hidden"
+                      rows={summaryRows}
+                    />
+                    <FieldDescription>
+                      You can change any of this later from your profile.
+                    </FieldDescription>
+                  </>
+                ) : null}
+              </div>
 
               {message ? (
-                <Alert className="mt-5" role="alert" variant="warning">
+                <Alert
+                  className="mt-5"
+                  id={messageId}
+                  role="alert"
+                  variant="warning"
+                >
                   <TriangleAlert aria-hidden="true" />
                   <AlertDescription>{message}</AlertDescription>
                 </Alert>
               ) : null}
 
-              <div className="mt-7 flex items-center justify-between gap-3 border-t pt-6">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  className={cn(stepIndex === 0 && "invisible")}
-                  onClick={goBack}
-                  disabled={submitting}
-                >
-                  <ArrowLeft aria-hidden="true" />
-                  Back
-                </Button>
-                {stepId === "details" ? (
+              <div className="mt-8 flex items-center justify-between gap-3">
+                {stepIndex > 0 ? (
                   <Button
-                    type="submit"
-                    disabled={submitting || !planningDurationAvailable}
+                    type="button"
+                    variant="ghost"
+                    onClick={() => moveTo(steps[stepIndex - 1].id)}
+                    disabled={submitting}
                   >
-                    {submitting ? "Saving your plan…" : "Create my plan"}
+                    <ArrowLeft aria-hidden="true" />
+                    Back
+                  </Button>
+                ) : (
+                  <span />
+                )}
+                {stepId === "pace" ? (
+                  <Button type="submit" aria-disabled={submitting || undefined}>
+                    {submitting ? "Creating your plan…" : "Create my plan"}
                   </Button>
                 ) : (
                   <Button type="submit">
@@ -505,38 +503,18 @@ export function OnboardingForm({ catalogue, email }: OnboardingFormProps) {
               </div>
             </form>
           )}
-        </Card>
+        </div>
 
-        <p className="mt-5 text-center text-xs text-muted-foreground">
-          Signed in as {email || "your account"}. Your plan is private to you.
-        </p>
+        <aside className="hidden lg:block">
+          <div className="sticky top-8 space-y-3">
+            <OnboardingSummary rows={summaryRows} />
+            <p className="px-1 text-xs text-muted-foreground">
+              Signed in as {email || "your account"}. Only you can see your
+              plan.
+            </p>
+          </div>
+        </aside>
       </div>
     </main>
   );
 }
-
-function SummaryRow({
-  label,
-  children,
-}: {
-  label: string;
-  children: ReactNode;
-}) {
-  return (
-    <div className="flex justify-between gap-4">
-      <dt className="text-muted-foreground">{label}</dt>
-      <dd className="text-right font-medium">{children}</dd>
-    </div>
-  );
-}
-
-function structureNames(
-  options: { code: string; name: string }[],
-  selected: string[],
-) {
-  if (selected.length === 0) return "Choose later";
-  return options
-    .filter((item) => selected.includes(item.code))
-    .map((item) => item.name)
-    .join(", ");
-}
diff --git a/apps/web/app/onboarding/page.tsx b/apps/web/app/onboarding/page.tsx
index 05bd1192..33cb7ded 100644
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -36,5 +36,11 @@ export default async function OnboardingPage() {
     );
   }
 
-  return <OnboardingForm catalogue={catalogue} email={viewer.email ?? ""} />;
+  return (
+    <OnboardingForm
+      catalogue={catalogue}
+      currentYear={new Date().getFullYear()}
+      email={viewer.email ?? ""}
+    />
+  );
 }
diff --git a/apps/web/app/profile/profile-editor.tsx b/apps/web/app/profile/profile-editor.tsx
index 2576934a..c07a90c3 100644
--- a/apps/web/app/profile/profile-editor.tsx
+++ b/apps/web/app/profile/profile-editor.tsx
@@ -47,8 +47,7 @@ import { GeneratedAvatar } from "@/ui/common/generated-avatar";
 import { SelectField } from "@/ui/common/select-field";
 import type { OnboardingCatalogue } from "@/lib/coursemap/onboarding-catalogue";
 import { nominalProgrammeDuration } from "@/lib/coursemap/plan-timeline";
-
-const STUDENT_NUMBER_PATTERN = /^u\d{7}$/;
+import { normaliseStudentNumber } from "@/lib/coursemap/student-number";
 
 const sections = [
   { value: "about", label: "About you", icon: UserRound },
@@ -149,9 +148,9 @@ export function ProfileEditor({
   /* Validation and save                                               */
   /* ---------------------------------------------------------------- */
 
-  const studentNumber = draft.studentId.trim().toLowerCase();
+  const studentNumber = normaliseStudentNumber(draft.studentId);
   const studentNumberError =
-    studentNumber && !STUDENT_NUMBER_PATTERN.test(studentNumber)
+    studentNumber === null
       ? "Use the format u1234567, or leave it blank."
       : null;
   const nameError = !draft.name.trim() ? "Add your name." : null;
@@ -183,9 +182,12 @@ export function ProfileEditor({
       return;
     }
     setSaving(true);
-    const result = await updateProfile({ ...draft, studentId: studentNumber });
+    const result = await updateProfile({
+      ...draft,
+      studentId: studentNumber ?? "",
+    });
     setSaving(false);
-    notify(result.message, result.ok ? "success" : "warning");
+    notify(result.message, result.ok ? "success" : "error");
   }
 
   const major = majors.find((item) => item.code === draft.majorCode);
diff --git a/apps/web/app/providers.tsx b/apps/web/app/providers.tsx
index 2aa9b229..2dd51216 100644
--- a/apps/web/app/providers.tsx
+++ b/apps/web/app/providers.tsx
@@ -3,6 +3,7 @@ import { useInputModality } from "@/lib/browser/use-input-modality";
 import { Toaster } from "@coursemap/ui/primitives/sonner";
 import type { CSSProperties } from "react";
 import { toast } from "sonner";
+import { useTheme } from "next-themes";
 import {
   createContext,
   useCallback,
@@ -13,7 +14,9 @@ import {
 } from "react";
 import { useRouter } from "next/navigation";
 import type { AuthViewer } from "@/lib/auth/viewer";
-import type { Attempt, AttemptStatus } from "@/lib/coursemap/types";
+import type { AppState, AttemptStatus, Profile } from "@/lib/coursemap/types";
+
+export type { AppState, Profile } from "@/lib/coursemap/types";
 import {
   addPlanCourse,
   movePlanCourse,
@@ -24,27 +27,7 @@ import {
   type CoursemapActionResult,
 } from "@/lib/coursemap/actions";
 
-export type Profile = {
-  name: string;
-  studentId: string;
-  email: string;
-  commencementYear: number;
-  catalogueYear: number;
-  degreeCode: string;
-  majorCode: string;
-  minorCodes: string[];
-  specialisationCodes: string[];
-  studyLoad: "Full time" | "Part time";
-  extensionYears: number;
-};
-
-export type AppState = {
-  schemaVersion: 1;
-  profile: Profile;
-  attempts: Attempt[];
-};
-
-type ToastTone = "success" | "warning" | "info";
+type ToastTone = "success" | "warning" | "info" | "error";
 
 type AppContextValue = {
   state: AppState;
@@ -111,6 +94,9 @@ export function AppProvider({
 }) {
   useInputModality();
   const router = useRouter();
+  // The vendored Toaster reads the stored theme, which ignores a forced one.
+  const { forcedTheme, resolvedTheme } = useTheme();
+  const toastTheme = forcedTheme ?? resolvedTheme;
   const initialState = useMemo(
     () => suppliedInitialState ?? createInitialState(viewer),
     [suppliedInitialState, viewer],
@@ -143,7 +129,8 @@ export function AppProvider({
   }, [viewer]);
 
   const notify = useCallback((message: string, tone: ToastTone = "success") => {
-    if (tone === "warning") toast.warning(message);
+    if (tone === "error") toast.error(message);
+    else if (tone === "warning") toast.warning(message);
     else if (tone === "info") toast.info(message);
     else toast.success(message);
   }, []);
@@ -394,6 +381,11 @@ export function AppProvider({
     <AppContext.Provider value={value}>
       {children}
       <Toaster
+        theme={
+          toastTheme === "dark" || toastTheme === "light"
+            ? toastTheme
+            : "system"
+        }
         position="top-center"
         style={{ "--width": "560px" } as CSSProperties}
         closeButton
diff --git a/apps/web/lib/coursemap/actions.ts b/apps/web/lib/coursemap/actions.ts
index 69c62b6f..3a3738b5 100644
--- a/apps/web/lib/coursemap/actions.ts
+++ b/apps/web/lib/coursemap/actions.ts
@@ -1,8 +1,8 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import type { Profile } from "@/app/providers";
-import type { AttemptStatus } from "@/lib/coursemap/types";
+import { normaliseStudentNumber } from "@/lib/coursemap/student-number";
+import type { AttemptStatus, Profile } from "@/lib/coursemap/types";
 import { createClient } from "@/lib/supabase/server";
 
 export type CoursemapActionResult = {
@@ -14,19 +14,6 @@ export type CoursemapActionResult = {
   unitsEarned?: number;
 };
 
-const STUDENT_NUMBER_PATTERN = /^u\d{7}$/;
-
-function normaliseStudentNumber(value: string) {
-  const studentNumber = value.trim().toLowerCase();
-  if (!studentNumber) return "";
-  if (!STUDENT_NUMBER_PATTERN.test(studentNumber)) {
-    throw new Error(
-      "Enter a student number in the format u1234567, or leave it blank.",
-    );
-  }
-  return studentNumber;
-}
-
 function termParts(termId: string) {
   if (termId === "unscheduled") {
     return { year: undefined, period: undefined };
@@ -53,6 +40,13 @@ export async function saveProfileAndPlan(
 ): Promise<CoursemapActionResult> {
   try {
     const studentNumber = normaliseStudentNumber(profile.studentId);
+    if (studentNumber === null) {
+      return {
+        ok: false,
+        message:
+          "Enter a student number in the format u1234567, or leave it blank.",
+      };
+    }
     const supabase = await createClient();
     const { data, error } = await supabase.rpc(
       "save_current_user_primary_plan",
@@ -151,6 +145,7 @@ export async function removePlanCourse(
       { p_plan_item_id: planItemId },
     );
     if (error) throw error;
+    if (data) revalidatePath("/plan");
     return data
       ? { ok: true, message: "Course removed from the plan" }
       : { ok: false, message: "Course was not found in your plan" };
diff --git a/apps/web/lib/coursemap/admin-catalogue.ts b/apps/web/lib/coursemap/admin-catalogue.ts
index 16f09eb4..5c6cb8a6 100644
--- a/apps/web/lib/coursemap/admin-catalogue.ts
+++ b/apps/web/lib/coursemap/admin-catalogue.ts
@@ -1,7 +1,7 @@
 import "server-only";
-import type { PostgrestError } from "@supabase/supabase-js";
 import { emptyCatalogueContent } from "@/lib/catalogue/content";
 import { contentHashForCatalogueContent } from "@/lib/catalogue-import/version-content";
+import { readAllRows } from "@/lib/supabase/read-all-rows";
 import { createClient } from "@/lib/supabase/server";
 import type {
   CatalogueDirectoryPage,
@@ -14,25 +14,6 @@ import { catalogueRecordState } from "./catalogue-kinds";
 export * from "./catalogue-kinds";
 
 const PAGE_SIZE = 50;
-const ROW_PAGE_SIZE = 1000;
-
-async function readAllRows<Row>(
-  readPage: (
-    from: number,
-    to: number,
-  ) => PromiseLike<{
-    data: Row[] | null;
-    error: PostgrestError | null;
-  }>,
-) {
-  const rows: Row[] = [];
-  for (let from = 0; ; from += ROW_PAGE_SIZE) {
-    const { data, error } = await readPage(from, from + ROW_PAGE_SIZE - 1);
-    if (error) return { data: rows, error };
-    rows.push(...(data ?? []));
-    if ((data?.length ?? 0) < ROW_PAGE_SIZE) return { data: rows, error: null };
-  }
-}
 
 export async function loadCatalogueYears() {
   const supabase = await createClient();
diff --git a/apps/web/lib/coursemap/commencement.ts b/apps/web/lib/coursemap/commencement.ts
new file mode 100644
index 00000000..84bb43d1
--- /dev/null
+++ b/apps/web/lib/coursemap/commencement.ts
@@ -0,0 +1,35 @@
+/** How many past start years onboarding offers besides the current one. */
+const EARLIEST_START_OFFSET = 5;
+
+export function commencementYearOptions(currentYear: number) {
+  return Array.from(
+    { length: EARLIEST_START_OFFSET + 1 },
+    (_, index) => currentYear - index,
+  );
+}
+
+/**
+ * Students follow the rules of the year they started. When Coursemap has not
+ * published that year, the closest published year stands in, preferring the
+ * later of two equally close years because its rules are the ones still
+ * maintained.
+ */
+export function rulesYearForCommencement(
+  commencementYear: number,
+  publishedYears: readonly number[],
+) {
+  let closest: number | null = null;
+  for (const year of publishedYears) {
+    if (
+      closest === null ||
+      Math.abs(year - commencementYear) <
+        Math.abs(closest - commencementYear) ||
+      (Math.abs(year - commencementYear) ===
+        Math.abs(closest - commencementYear) &&
+        year > closest)
+    ) {
+      closest = year;
+    }
+  }
+  return closest;
+}
diff --git a/apps/web/lib/coursemap/onboarding-catalogue.ts b/apps/web/lib/coursemap/onboarding-catalogue.ts
index ca0f598a..3b15eb0e 100644
--- a/apps/web/lib/coursemap/onboarding-catalogue.ts
+++ b/apps/web/lib/coursemap/onboarding-catalogue.ts
@@ -8,6 +8,7 @@ import {
   type ProgrammeStructureRequirementOption,
   type SelectableStructureKind,
 } from "@/lib/coursemap/programme-structure-options";
+import { readAllRows, readRowsForIds } from "@/lib/supabase/read-all-rows";
 import { createPublicClient } from "@/lib/supabase/public-server";
 
 export type CatalogueYearOption = {
@@ -36,18 +37,22 @@ export type OnboardingCatalogue = {
 };
 
 /**
- * Student choices come only from explicitly published immutable snapshots.
- * The legacy `degrees` property is retained at the component boundary while
- * the database and import vocabulary consistently use `programme`.
+ * Student choices come only from published versions. Students call a
+ * programme a degree, so the component boundary keeps `degrees`.
  */
 export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
   const supabase = createPublicClient();
-  const { data: structureYears, error: structureYearsError } = await supabase
-    .from("catalogue_records")
-    .select("academic_year_id,published_version_id,code_id")
-    .neq("kind", "course")
-    .is("archived_at", null)
-    .not("published_version_id", "is", null);
+  const { data: structureYears, error: structureYearsError } =
+    await readAllRows((from, to) =>
+      supabase
+        .from("catalogue_records")
+        .select("id,academic_year_id,published_version_id,code_id")
+        .neq("kind", "course")
+        .is("archived_at", null)
+        .not("published_version_id", "is", null)
+        .order("id")
+        .range(from, to),
+    );
   if (structureYearsError) throw structureYearsError;
 
   const publishedYears = (structureYears ?? []).filter(
@@ -71,11 +76,11 @@ export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
     ...new Set(publishedYears.map((row) => row.academic_year_id)),
   ];
   const structureIds = [...new Set(publishedYears.map((row) => row.code_id))];
-  const snapshotIds = publishedYears.map((row) => row.published_version_id);
+  const versionIds = publishedYears.map((row) => row.published_version_id);
   const [
     yearsResult,
     structuresResult,
-    snapshotsResult,
+    versionsResult,
     relationshipsResult,
     requirementConditionsResult,
     requirementOptionsResult,
@@ -85,33 +90,58 @@ export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
       .select("id,year")
       .in("id", academicYearIds)
       .order("year", { ascending: false }),
-    supabase
-      .from("catalogue_codes")
-      .select("code,id,kind")
-      .in("id", structureIds),
-    supabase
-      .from("structure_version_details")
-      .select("description,duration_years,version_id,name,units")
-      .in("version_id", snapshotIds),
-    supabase
-      .from("academic_structure_snapshot_relationships")
-      .select("relationship_kind,version_id,target_code,target_kind")
-      .in("version_id", snapshotIds),
-    supabase
-      .from("requirement_conditions")
-      .select("condition_kind,id,version_id,structure_kind")
-      .in("version_id", snapshotIds)
-      .eq("condition_kind", "structure_set"),
-    supabase
-      .from("requirement_condition_options")
-      .select("code,condition_id,kind,version_id")
-      .in("version_id", snapshotIds)
-      .neq("kind", "course"),
+    readRowsForIds(structureIds, (batch, from, to) =>
+      supabase
+        .from("catalogue_codes")
+        .select("code,id,kind")
+        .in("id", batch)
+        .order("id")
+        .range(from, to),
+    ),
+    readRowsForIds(versionIds, (batch, from, to) =>
+      supabase
+        .from("structure_version_details")
+        .select("description,duration_years,version_id,name,units")
+        .in("version_id", batch)
+        .order("version_id")
+        .range(from, to),
+    ),
+    readRowsForIds(versionIds, (batch, from, to) =>
+      supabase
+        .from("academic_structure_snapshot_relationships")
+        .select("relationship_kind,version_id,target_code,target_kind")
+        .in("version_id", batch)
+        .order("version_id")
+        .order("relationship_kind")
+        .order("target_kind")
+        .order("target_code")
+        .range(from, to),
+    ),
+    readRowsForIds(versionIds, (batch, from, to) =>
+      supabase
+        .from("requirement_conditions")
+        .select("condition_kind,id,version_id,structure_kind")
+        .in("version_id", batch)
+        .eq("condition_kind", "structure_set")
+        .order("id")
+        .range(from, to),
+    ),
+    readRowsForIds(versionIds, (batch, from, to) =>
+      supabase
+        .from("requirement_condition_options")
+        .select("code,condition_id,kind,version_id")
+        .in("version_id", batch)
+        .neq("kind", "course")
+        .order("condition_id")
+        .order("kind")
+        .order("code")
+        .range(from, to),
+    ),
   ]);
   const error = [
     yearsResult.error,
     structuresResult.error,
-    snapshotsResult.error,
+    versionsResult.error,
     relationshipsResult.error,
     requirementConditionsResult.error,
     requirementOptionsResult.error,
@@ -124,17 +154,17 @@ export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
   const structureById = new Map(
     (structuresResult.data ?? []).map((structure) => [structure.id, structure]),
   );
-  const publishedYearBySnapshotId = new Map(
+  const publishedYearByVersionId = new Map(
     publishedYears.map((row) => [row.published_version_id, row]),
   );
-  const programmeSnapshotIds = new Set(
+  const programmeVersionIds = new Set(
     publishedYears.flatMap((row) => {
       const identity = structureById.get(row.code_id);
       return identity?.kind === "programme" ? [row.published_version_id] : [];
     }),
   );
-  const structureCodesByProgrammeSnapshot = collectSelectableStructureCodes({
-    programmeSnapshotIds,
+  const structureCodesByProgrammeVersion = collectSelectableStructureCodes({
+    programmeVersionIds,
     relationships: (relationshipsResult.data ??
       []) as ProgrammeStructureRelationship[],
     requirementConditions: (requirementConditionsResult.data ??
@@ -146,11 +176,9 @@ export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
   const options = (
     kind: "programme" | SelectableStructureKind,
   ): ProgrammeOption[] =>
-    (snapshotsResult.data ?? [])
-      .flatMap((snapshot) => {
-        const structureYear = publishedYearBySnapshotId.get(
-          snapshot.version_id,
-        );
+    (versionsResult.data ?? [])
+      .flatMap((version) => {
+        const structureYear = publishedYearByVersionId.get(version.version_id);
         const identity = structureYear
           ? structureById.get(structureYear.code_id)
           : null;
@@ -160,23 +188,23 @@ export async function loadOnboardingCatalogue(): Promise<OnboardingCatalogue> {
         if (!identity || !academicYear || identity.kind !== kind) return [];
         const selectableCodes =
           kind === "programme"
-            ? (structureCodesByProgrammeSnapshot.get(snapshot.version_id) ??
+            ? (structureCodesByProgrammeVersion.get(version.version_id) ??
               emptySelectableStructureCodes())
             : emptySelectableStructureCodes();
         return [
           {
             catalogueYear: academicYear,
             code: identity.code,
-            description: snapshot.description ?? "",
+            description: version.description ?? "",
             durationYears:
-              snapshot.duration_years === null
+              version.duration_years === null
                 ? null
-                : Number(snapshot.duration_years),
+                : Number(version.duration_years),
             majorCodes: selectableCodes.major,
             minorCodes: selectableCodes.minor,
-            name: snapshot.name,
+            name: version.name,
             specialisationCodes: selectableCodes.specialisation,
-            units: snapshot.units === null ? null : Number(snapshot.units),
+            units: version.units === null ? null : Number(version.units),
           } satisfies ProgrammeOption,
         ];
       })
diff --git a/apps/web/lib/coursemap/programme-structure-options.ts b/apps/web/lib/coursemap/programme-structure-options.ts
index 8ee0baa0..b56da69a 100644
--- a/apps/web/lib/coursemap/programme-structure-options.ts
+++ b/apps/web/lib/coursemap/programme-structure-options.ts
@@ -49,35 +49,35 @@ function isSelectableStructureKind(
  * become student choices.
  */
 export function collectSelectableStructureCodes({
-  programmeSnapshotIds,
+  programmeVersionIds,
   relationships,
   requirementConditions,
   requirementOptions,
 }: {
-  programmeSnapshotIds: ReadonlySet<number>;
+  programmeVersionIds: ReadonlySet<number>;
   relationships: readonly ProgrammeStructureRelationship[];
   requirementConditions: readonly ProgrammeStructureRequirementCondition[];
   requirementOptions: readonly ProgrammeStructureRequirementOption[];
 }) {
-  const codesBySnapshotId = new Map<
+  const codesByVersionId = new Map<
     number,
     Record<SelectableStructureKind, Set<string>>
   >();
   const addCode = (
-    snapshotId: number,
+    versionId: number,
     kind: SelectableStructureKind,
     code: string,
   ) => {
-    if (!programmeSnapshotIds.has(snapshotId)) return;
+    if (!programmeVersionIds.has(versionId)) return;
     const codes =
-      codesBySnapshotId.get(snapshotId) ??
+      codesByVersionId.get(versionId) ??
       ({
         major: new Set<string>(),
         minor: new Set<string>(),
         specialisation: new Set<string>(),
       } satisfies Record<SelectableStructureKind, Set<string>>);
     codes[kind].add(code.toUpperCase());
-    codesBySnapshotId.set(snapshotId, codes);
+    codesByVersionId.set(versionId, codes);
   };
 
   for (const relationship of relationships) {
@@ -102,7 +102,7 @@ export function collectSelectableStructureCodes({
   >();
   for (const condition of requirementConditions) {
     if (
-      programmeSnapshotIds.has(condition.version_id) &&
+      programmeVersionIds.has(condition.version_id) &&
       condition.condition_kind === "structure_set" &&
       isSelectableStructureKind(condition.structure_kind)
     ) {
@@ -125,8 +125,8 @@ export function collectSelectableStructureCodes({
   }
 
   return new Map<number, SelectableStructureCodes>(
-    [...codesBySnapshotId].map(([snapshotId, codes]) => [
-      snapshotId,
+    [...codesByVersionId].map(([versionId, codes]) => [
+      versionId,
       {
         major: [...codes.major].sort(),
         minor: [...codes.minor].sort(),
diff --git a/apps/web/lib/coursemap/state.ts b/apps/web/lib/coursemap/state.ts
index 9ceda18b..e6d295fc 100644
--- a/apps/web/lib/coursemap/state.ts
+++ b/apps/web/lib/coursemap/state.ts
@@ -1,4 +1,4 @@
-import type { AppState } from "@/app/providers";
+import type { AppState } from "@/lib/coursemap/types";
 import type { AuthViewer } from "@/lib/auth/viewer";
 import { createClient } from "@/lib/supabase/server";
 
diff --git a/apps/web/lib/coursemap/student-number.ts b/apps/web/lib/coursemap/student-number.ts
new file mode 100644
index 00000000..8f7ec82c
--- /dev/null
+++ b/apps/web/lib/coursemap/student-number.ts
@@ -0,0 +1,8 @@
+const STUDENT_NUMBER_PATTERN = /^u\d{7}$/;
+
+/** Returns the lower-case student number, "" when blank, or null when invalid. */
+export function normaliseStudentNumber(value: string) {
+  const studentNumber = value.trim().toLowerCase();
+  if (!studentNumber) return "";
+  return STUDENT_NUMBER_PATTERN.test(studentNumber) ? studentNumber : null;
+}
diff --git a/apps/web/lib/coursemap/types.ts b/apps/web/lib/coursemap/types.ts
index 4c092dff..ca64c50f 100644
--- a/apps/web/lib/coursemap/types.ts
+++ b/apps/web/lib/coursemap/types.ts
@@ -91,3 +91,23 @@ export type Relation = {
   state: "Verified" | "Automatic" | "Review";
   sourceText: string;
 };
+
+export type Profile = {
+  name: string;
+  studentId: string;
+  email: string;
+  commencementYear: number;
+  catalogueYear: number;
+  degreeCode: string;
+  majorCode: string;
+  minorCodes: string[];
+  specialisationCodes: string[];
+  studyLoad: "Full time" | "Part time";
+  extensionYears: number;
+};
+
+export type AppState = {
+  schemaVersion: 1;
+  profile: Profile;
+  attempts: Attempt[];
+};
diff --git a/apps/web/lib/supabase/read-all-rows.ts b/apps/web/lib/supabase/read-all-rows.ts
new file mode 100644
index 00000000..4e25c687
--- /dev/null
+++ b/apps/web/lib/supabase/read-all-rows.ts
@@ -0,0 +1,46 @@
+import type { PostgrestError } from "@supabase/supabase-js";
+
+/** Matches `max_rows` in `supabase/config.toml`; a shorter page ends the read. */
+const ROW_PAGE_SIZE = 1000;
+
+/**
+ * Identifier lists travel in the query string, and the database gateway
+ * rejects long URLs, so `.in()` filters are split into batches of this size.
+ */
+const IDENTIFIER_BATCH_SIZE = 200;
+
+type PageResult<Row> = PromiseLike<{
+  data: Row[] | null;
+  error: PostgrestError | null;
+}>;
+
+/** Reads every page of a query. `readPage` must apply a stable `order`. */
+export async function readAllRows<Row>(
+  readPage: (from: number, to: number) => PageResult<Row>,
+) {
+  const rows: Row[] = [];
+  for (let from = 0; ; from += ROW_PAGE_SIZE) {
+    const { data, error } = await readPage(from, from + ROW_PAGE_SIZE - 1);
+    if (error) return { data: rows, error };
+    rows.push(...(data ?? []));
+    if ((data?.length ?? 0) < ROW_PAGE_SIZE) return { data: rows, error: null };
+  }
+}
+
+/** Reads every row matching an identifier list, in batches and pages. */
+export async function readRowsForIds<Id, Row>(
+  ids: readonly Id[],
+  readPage: (batch: Id[], from: number, to: number) => PageResult<Row>,
+) {
+  const batches: Id[][] = [];
+  for (let index = 0; index < ids.length; index += IDENTIFIER_BATCH_SIZE) {
+    batches.push(ids.slice(index, index + IDENTIFIER_BATCH_SIZE));
+  }
+  const results = await Promise.all(
+    batches.map((batch) =>
+      readAllRows((from, to) => readPage(batch, from, to)),
+    ),
+  );
+  const error = results.find((result) => result.error)?.error ?? null;
+  return { data: results.flatMap((result) => result.data), error };
+}
diff --git a/apps/web/tests/commencement.test.ts b/apps/web/tests/commencement.test.ts
new file mode 100644
index 00000000..42b94c8d
--- /dev/null
+++ b/apps/web/tests/commencement.test.ts
@@ -0,0 +1,29 @@
+import { expect, test } from "vitest";
+import {
+  commencementYearOptions,
+  rulesYearForCommencement,
+} from "../lib/coursemap/commencement";
+import { normaliseStudentNumber } from "../lib/coursemap/student-number";
+
+test("offers this year and the five before it", () => {
+  expect(commencementYearOptions(2026)).toEqual([
+    2026, 2025, 2024, 2023, 2022, 2021,
+  ]);
+});
+
+test("follows the rules of the year a student started", () => {
+  expect(rulesYearForCommencement(2024, [2026, 2025, 2024])).toBe(2024);
+});
+
+test("uses the closest published rules when the start year is missing", () => {
+  expect(rulesYearForCommencement(2021, [2026, 2025, 2024])).toBe(2024);
+  expect(rulesYearForCommencement(2027, [2026, 2025])).toBe(2026);
+  expect(rulesYearForCommencement(2024, [2023, 2025])).toBe(2025);
+  expect(rulesYearForCommencement(2024, [])).toBeNull();
+});
+
+test("student numbers are optional but must match the ANU format", () => {
+  expect(normaliseStudentNumber("  ")).toBe("");
+  expect(normaliseStudentNumber(" U1234567 ")).toBe("u1234567");
+  expect(normaliseStudentNumber("1234567")).toBeNull();
+});
diff --git a/apps/web/tests/onboarding-catalogue.test.ts b/apps/web/tests/onboarding-catalogue.test.ts
new file mode 100644
index 00000000..372dd254
--- /dev/null
+++ b/apps/web/tests/onboarding-catalogue.test.ts
@@ -0,0 +1,104 @@
+import { beforeEach, expect, test, vi } from "vitest";
+
+type Row = Record<string, unknown>;
+const tables = new Map<string, Row[]>();
+const requests: { table: string; ids: number; from: number }[] = [];
+
+/** A PostgREST stand-in that honours `.in()`, `.eq()` and `.range()` and caps pages at 1000 rows. */
+function query(table: string) {
+  let rows = tables.get(table) ?? [];
+  let ids = 0;
+  let from = 0;
+  let to = Number.POSITIVE_INFINITY;
+  const builder = {
+    select: () => builder,
+    neq: () => builder,
+    is: () => builder,
+    not: () => builder,
+    order: () => builder,
+    eq: (column: string, value: unknown) => {
+      rows = rows.filter((row) => row[column] === value);
+      return builder;
+    },
+    in: (column: string, values: unknown[]) => {
+      ids = values.length;
+      const set = new Set(values);
+      rows = rows.filter((row) => set.has(row[column]));
+      return builder;
+    },
+    range: (start: number, end: number) => {
+      from = start;
+      to = end;
+      return builder;
+    },
+    then: (resolve: (value: unknown) => void) => {
+      requests.push({ table, ids, from });
+      resolve({
+        data: rows.slice(from, Math.min(to + 1, from + 1000)),
+        error: null,
+      });
+    },
+  };
+  return builder;
+}
+
+vi.mock("@/lib/supabase/public-server", () => ({
+  createPublicClient: () => ({ from: query }),
+}));
+
+const { loadOnboardingCatalogue } =
+  await import("@/lib/coursemap/onboarding-catalogue");
+
+const PROGRAMMES = 1250;
+
+beforeEach(() => {
+  requests.length = 0;
+  const range = Array.from({ length: PROGRAMMES }, (_, index) => index + 1);
+  tables.set(
+    "catalogue_records",
+    range.map((id) => ({
+      id,
+      academic_year_id: 1,
+      published_version_id: 10_000 + id,
+      code_id: id,
+    })),
+  );
+  tables.set("academic_years", [{ id: 1, year: 2026 }]);
+  tables.set(
+    "catalogue_codes",
+    range.map((id) => ({ id, code: `P${id}`, kind: "programme" })),
+  );
+  tables.set(
+    "structure_version_details",
+    range.map((id) => ({
+      version_id: 10_000 + id,
+      name: `Programme ${String(id).padStart(4, "0")}`,
+      description: null,
+      duration_years: 3,
+      units: 144,
+    })),
+  );
+  tables.set("academic_structure_snapshot_relationships", []);
+  tables.set("requirement_conditions", []);
+  tables.set("requirement_condition_options", []);
+});
+
+test("loads every published programme past the 1000-row page limit", async () => {
+  const catalogue = await loadOnboardingCatalogue();
+  expect(catalogue.catalogueYears).toEqual([{ id: 1, year: 2026 }]);
+  expect(catalogue.degrees).toHaveLength(PROGRAMMES);
+  expect(catalogue.degrees[0]).toMatchObject({
+    code: "P1",
+    durationYears: 3,
+    units: 144,
+  });
+});
+
+test("keeps identifier lists short enough for the query string", async () => {
+  await loadOnboardingCatalogue();
+  const listed = requests.filter((request) => request.ids > 0);
+  expect(listed.length).toBeGreaterThan(0);
+  expect(Math.max(...listed.map((request) => request.ids))).toBeLessThanOrEqual(
+    200,
+  );
+});
diff --git a/apps/web/tests/onboarding-form.test.tsx b/apps/web/tests/onboarding-form.test.tsx
new file mode 100644
index 00000000..2a27d37e
--- /dev/null
+++ b/apps/web/tests/onboarding-form.test.tsx
@@ -0,0 +1,134 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeEach, expect, test, vi } from "vitest";
+import { OnboardingForm } from "@/app/onboarding/onboarding-form";
+import type { OnboardingCatalogue } from "@/lib/coursemap/onboarding-catalogue";
+
+const actions = vi.hoisted(() => ({ saveProfileAndPlan: vi.fn() }));
+const router = vi.hoisted(() => ({ replace: vi.fn(), refresh: vi.fn() }));
+vi.mock("@/lib/coursemap/actions", () => actions);
+vi.mock("next/navigation", () => ({ useRouter: () => router }));
+vi.mock("next/image", () => ({ default: () => null }));
+
+// cmdk scrolls the active option into view, which jsdom does not implement.
+Element.prototype.scrollIntoView = () => {};
+
+const programme = (catalogueYear: number) => ({
+  catalogueYear,
+  code: "AACOM",
+  description: "",
+  durationYears: 3,
+  majorCodes: ["COMP-MAJ"],
+  minorCodes: [],
+  name: "Bachelor of Advanced Computing",
+  specialisationCodes: [],
+  units: 144,
+});
+
+const catalogue: OnboardingCatalogue = {
+  catalogueYears: [
+    { id: 2, year: 2026 },
+    { id: 1, year: 2024 },
+  ],
+  degrees: [programme(2026), programme(2024)],
+  majors: [
+    {
+      ...programme(2024),
+      code: "COMP-MAJ",
+      name: "Computer Science",
+      majorCodes: [],
+    },
+  ],
+  minors: [],
+  specialisations: [],
+};
+
+beforeEach(() => vi.resetAllMocks());
+
+function renderForm() {
+  return render(
+    <OnboardingForm
+      catalogue={catalogue}
+      currentYear={2026}
+      email="s@x.test"
+    />,
+  );
+}
+
+test("walks through every step and saves the start year as the commencement year", async () => {
+  const user = userEvent.setup();
+  actions.saveProfileAndPlan.mockResolvedValue({ ok: true, message: "Saved" });
+  renderForm();
+
+  await user.type(screen.getByLabelText("Name"), "Ada");
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  expect(
+    screen.getByRole("heading", { name: "When did you start at ANU?" }),
+  ).toHaveFocus();
+
+  await user.click(screen.getByRole("radio", { name: "2025" }));
+  expect(
+    screen.getByText(/doesn't have the 2025 degree rules yet/),
+  ).toBeVisible();
+  await user.click(screen.getByRole("radio", { name: "2024" }));
+  expect(screen.getByText(/follows the 2024 degree rules/)).toBeVisible();
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  expect(screen.getByRole("alert")).toHaveTextContent(
+    "Choose your degree to continue.",
+  );
+  await user.click(screen.getByLabelText("Degree"));
+  await user.click(
+    await screen.findByRole("button", { name: /Advanced Computing \(AACOM\)/ }),
+  );
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+
+  await user.click(screen.getByRole("radio", { name: /Part time/ }));
+  await user.click(screen.getByRole("button", { name: "Create my plan" }));
+
+  await waitFor(() => expect(router.replace).toHaveBeenCalledWith("/plan"));
+  expect(actions.saveProfileAndPlan).toHaveBeenCalledWith(
+    expect.objectContaining({
+      name: "Ada",
+      catalogueYear: 2024,
+      commencementYear: 2024,
+      degreeCode: "AACOM",
+      studyLoad: "Part time",
+    }),
+  );
+});
+
+test("explains a missing name instead of relying on browser validation", async () => {
+  const user = userEvent.setup();
+  renderForm();
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  expect(screen.getByRole("alert")).toHaveTextContent("Add your name");
+  expect(screen.getByLabelText("Name")).toHaveFocus();
+  expect(screen.getByLabelText("Name")).toHaveAttribute("aria-invalid", "true");
+});
+
+test("keeps the answers and shows the reason when saving fails", async () => {
+  const user = userEvent.setup();
+  actions.saveProfileAndPlan.mockResolvedValue({
+    ok: false,
+    message: "Coursemap could not save your plan.",
+  });
+  renderForm();
+  await user.type(screen.getByLabelText("Name"), "Ada");
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  await user.click(screen.getByRole("radio", { name: /^2026/ }));
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  await user.click(screen.getByLabelText("Degree"));
+  await user.click(
+    await screen.findByRole("button", { name: /Advanced Computing \(AACOM\)/ }),
+  );
+  await user.click(screen.getByRole("button", { name: /continue/i }));
+  await user.click(screen.getByRole("button", { name: "Create my plan" }));
+
+  expect(await screen.findByRole("alert")).toHaveTextContent(
+    "could not save your plan",
+  );
+  expect(router.replace).not.toHaveBeenCalled();
+  expect(screen.getByRole("button", { name: "Create my plan" })).toBeEnabled();
+});
diff --git a/apps/web/tests/programme-structure-options.test.mjs b/apps/web/tests/programme-structure-options.test.mjs
index 79974bc2..17a01077 100644
--- a/apps/web/tests/programme-structure-options.test.mjs
+++ b/apps/web/tests/programme-structure-options.test.mjs
@@ -1,12 +1,11 @@
 import assert from "node:assert/strict";
-import { readFile } from "node:fs/promises";
 import { test } from "vitest";
 
 import { collectSelectableStructureCodes } from "../lib/coursemap/programme-structure-options.ts";
 
 test("keeps only explicit programme structure relationship semantics", () => {
   const codes = collectSelectableStructureCodes({
-    programmeSnapshotIds: new Set([101]),
+    programmeVersionIds: new Set([101]),
     relationships: [
       relationship("required", "MATH-MAJ"),
       relationship("option", "COMP-MAJ"),
@@ -31,7 +30,7 @@ test("keeps only explicit programme structure relationship semantics", () => {
 
 test("includes structure options from programme structure-set requirements", () => {
   const codes = collectSelectableStructureCodes({
-    programmeSnapshotIds: new Set([101]),
+    programmeVersionIds: new Set([101]),
     relationships: [],
     requirementConditions: [
       condition(1, "structure_set", "major"),
@@ -60,19 +59,6 @@ test("includes structure options from programme structure-set requirements", ()
   assert.equal(codes.has(202), false);
 });
 
-test("onboarding loads explicit relationship and structure-set semantics without zero fallbacks", async () => {
-  const source = await readFile(
-    new URL("../lib/coursemap/onboarding-catalogue.ts", import.meta.url),
-    "utf8",
-  );
-
-  assert.match(source, /collectSelectableStructureCodes/u);
-  assert.match(source, /relationship_kind,version_id,target_code,target_kind/u);
-  assert.match(source, /from\("requirement_conditions"\)/u);
-  assert.match(source, /from\("requirement_condition_options"\)/u);
-  assert.doesNotMatch(source, /snapshot\.units === null \? 0/u);
-});
-
 function relationship(relationshipKind, targetCode, targetKind = "major") {
   return {
     relationship_kind: relationshipKind,
diff --git a/apps/web/ui/onboarding/choice-cards.tsx b/apps/web/ui/onboarding/choice-cards.tsx
new file mode 100644
index 00000000..27011441
--- /dev/null
+++ b/apps/web/ui/onboarding/choice-cards.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { useId, type ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type ChoiceCardOption<T extends string | number> = {
+  value: T;
+  label: string;
+  description?: ReactNode;
+};
+
+/**
+ * A radio group drawn as selectable cards. Native radios keep arrow-key
+ * movement, form semantics and the accessible name without extra ARIA.
+ */
+export function ChoiceCards<T extends string | number>({
+  className,
+  columns = 2,
+  label,
+  onValueChange,
+  options,
+  value,
+}: {
+  className?: string;
+  columns?: 2 | 3;
+  label: string;
+  onValueChange: (value: T) => void;
+  options: readonly ChoiceCardOption<T>[];
+  value: T | null;
+}) {
+  const name = useId();
+  return (
+    <fieldset className={cn("min-w-0", className)}>
+      <legend className="sr-only">{label}</legend>
+      <div
+        className={cn(
+          "grid gap-2.5",
+          columns === 3 ? "grid-cols-2 sm:grid-cols-3" : "sm:grid-cols-2",
+        )}
+      >
+        {options.map((option) => {
+          const checked = option.value === value;
+          return (
+            <label
+              key={option.value}
+              className={cn(
+                "relative flex min-h-14 cursor-pointer flex-col justify-center gap-0.5 rounded-xl border bg-card px-4 py-3 transition-colors",
+                "hover:border-primary/40 hover:bg-accent/40",
+                "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 has-[:focus-visible]:ring-offset-background",
+                checked && "border-primary bg-primary/5 hover:bg-primary/5",
+              )}
+            >
+              <input
+                checked={checked}
+                className="sr-only"
+                name={name}
+                onChange={() => onValueChange(option.value)}
+                type="radio"
+                value={String(option.value)}
+              />
+              <span className="pr-6 text-sm font-semibold">{option.label}</span>
+              {option.description ? (
+                <span className="pr-6 text-xs text-muted-foreground">
+                  {option.description}
+                </span>
+              ) : null}
+              <span
+                aria-hidden="true"
+                className={cn(
+                  "absolute top-1/2 right-3.5 grid size-5 -translate-y-1/2 place-items-center rounded-full border",
+                  checked
+                    ? "border-primary bg-primary text-primary-foreground"
+                    : "border-border",
+                )}
+              >
+                {checked ? <Check className="size-3" /> : null}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    </fieldset>
+  );
+}
diff --git a/apps/web/ui/onboarding/onboarding-progress.tsx b/apps/web/ui/onboarding/onboarding-progress.tsx
new file mode 100644
index 00000000..5665c896
--- /dev/null
+++ b/apps/web/ui/onboarding/onboarding-progress.tsx
@@ -0,0 +1,26 @@
+import { Progress } from "@coursemap/ui/primitives/progress";
+
+export function OnboardingProgress({
+  current,
+  label,
+  total,
+}: {
+  current: number;
+  label: string;
+  total: number;
+}) {
+  return (
+    <div className="space-y-2">
+      <p className="flex items-baseline justify-between gap-3 text-xs font-medium text-muted-foreground">
+        <span>
+          Step {current} of {total}
+        </span>
+        <span>{label}</span>
+      </p>
+      <Progress
+        aria-label={`Step ${current} of ${total}`}
+        value={(current / total) * 100}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/ui/onboarding/onboarding-summary.tsx b/apps/web/ui/onboarding/onboarding-summary.tsx
new file mode 100644
index 00000000..b0252b43
--- /dev/null
+++ b/apps/web/ui/onboarding/onboarding-summary.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+
+export type OnboardingSummaryRow = {
+  label: string;
+  value: ReactNode;
+};
+
+/** The answers so far. Rows without a value show a dash, so the shape of the plan is visible from the start. */
+export function OnboardingSummary({
+  className,
+  rows,
+}: {
+  className?: string;
+  rows: readonly OnboardingSummaryRow[];
+}) {
+  return (
+    <section
+      aria-label="Your plan so far"
+      className={cn(
+        "rounded-2xl border bg-card/80 p-5 backdrop-blur-sm",
+        className,
+      )}
+    >
+      <h2 className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+        Your plan
+      </h2>
+      <dl className="mt-4 space-y-3 text-sm">
+        {rows.map((row) => (
+          <div key={row.label} className="grid gap-0.5">
+            <dt className="text-xs text-muted-foreground">{row.label}</dt>
+            <dd className="font-medium break-words">
+              {row.value || <span className="text-muted-foreground">—</span>}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  );
+}

From e157792a5dcce03b2c20b536d12f75e8f80b9ce6 Mon Sep 17 00:00:00 2001
From: Harry Randall <randallhazza@gmail.com>
Date: Wed, 23 Sep 2026 10:58:26 +1000
Subject: [PATCH 3/3] fix: resolve the smaller interface audit findings

The course drawer's result buttons read correctly in dark mode, failures
use the error toast, requirement and key-date tabs use the shared line
style, floors on a route say so in text, and the usage preview drops its
own width cap.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 apps/web/app/academic/academic-record.tsx     |  2 +-
 apps/web/app/requirements/requirements.tsx    | 16 ++++--
 apps/web/tests/campus-buildings.test.mjs      |  2 +-
 apps/web/ui/assistant/assistant-usage.tsx     |  2 +-
 .../ui/common/outlined-tabs-list.module.css   | 51 -------------------
 apps/web/ui/common/outlined-tabs-list.tsx     | 18 -------
 .../ui/key-dates/university-calendar-view.tsx | 12 +++--
 apps/web/ui/overlays/course-drawer.tsx        | 27 +++++-----
 apps/web/ui/rooms/room-finder.tsx             | 13 +++--
 9 files changed, 45 insertions(+), 98 deletions(-)
 delete mode 100644 apps/web/ui/common/outlined-tabs-list.module.css
 delete mode 100644 apps/web/ui/common/outlined-tabs-list.tsx

diff --git a/apps/web/app/academic/academic-record.tsx b/apps/web/app/academic/academic-record.tsx
index 0864c49a..1160b80e 100644
--- a/apps/web/app/academic/academic-record.tsx
+++ b/apps/web/app/academic/academic-record.tsx
@@ -107,7 +107,7 @@ export function AcademicRecord({ catalogue }: { catalogue: PlanCatalogue }) {
         router.refresh();
       } catch {
         setSelected(null);
-        toast.error("An unexpected error occurred");
+        notify("We couldn't save that result. Try again.", "error");
       }
     });
   }
diff --git a/apps/web/app/requirements/requirements.tsx b/apps/web/app/requirements/requirements.tsx
index 4539aa17..5e17f23d 100644
--- a/apps/web/app/requirements/requirements.tsx
+++ b/apps/web/app/requirements/requirements.tsx
@@ -4,10 +4,14 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Plus, X } from "lucide-react";
 import { Button } from "@coursemap/ui/primitives/button";
-import { Tabs, TabsTrigger, TabsContent } from "@coursemap/ui/primitives/tabs";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@coursemap/ui/primitives/tabs";
 import { useCoursemap } from "@/app/providers";
 import { AppShell } from "@/ui/shell";
-import { OutlinedTabsList } from "@/ui/common/outlined-tabs-list";
 import type {
   PlanCatalogue,
   PlanStructureKind,
@@ -150,7 +154,11 @@ export function Requirements({
             )}
           />
         )}
-        <OutlinedTabsList className="mb-5" aria-label="Requirement sections">
+        <TabsList
+          className="mb-5"
+          aria-label="Requirement sections"
+          variant="line"
+        >
           {sections.map(({ kind, label }) => (
             <TabsTrigger key={kind} value={kind}>
               {label}
@@ -161,7 +169,7 @@ export function Requirements({
               )}
             </TabsTrigger>
           ))}
-        </OutlinedTabsList>
+        </TabsList>
         {sections.map(({ kind, label }) => (
           <TabsContent
             key={kind}
diff --git a/apps/web/tests/campus-buildings.test.mjs b/apps/web/tests/campus-buildings.test.mjs
index 55f32be7..554d2620 100644
--- a/apps/web/tests/campus-buildings.test.mjs
+++ b/apps/web/tests/campus-buildings.test.mjs
@@ -870,7 +870,7 @@ test("lists a selected building's rooms and turns a room into the destination",
   assert.match(roomFinder, /journey\.steps\.map/);
   assert.match(roomFinder, /onShowLevel=\{showIndoorLevel\}/);
   assert.match(roomFinder, /requestKey: indoorFocusRequest/);
-  assert.match(roomFinder, /aria-label=\{`Show \$\{level\.name\}`\}/);
+  assert.match(roomFinder, /`Show \$\{level\.name\}/);
   assert.match(roomFinder, /min-h-11 min-w-11/);
   assert.match(roomFinder, /initialRoomBuilding \?\?/);
 });
diff --git a/apps/web/ui/assistant/assistant-usage.tsx b/apps/web/ui/assistant/assistant-usage.tsx
index 877e2a36..4d4f8e20 100644
--- a/apps/web/ui/assistant/assistant-usage.tsx
+++ b/apps/web/ui/assistant/assistant-usage.tsx
@@ -26,7 +26,7 @@ const activity = [18, 12, 24, 16, 31, 15, 12];
 export function AssistantUsage() {
   return (
     <div className="h-full overflow-y-auto p-4 sm:p-6">
-      <div className="mx-auto max-w-6xl space-y-6">
+      <div className="space-y-6">
         <div>
           <div className="flex items-center gap-3">
             <h1 className="text-2xl font-semibold">Compass usage preview</h1>
diff --git a/apps/web/ui/common/outlined-tabs-list.module.css b/apps/web/ui/common/outlined-tabs-list.module.css
deleted file mode 100644
index 0e6c8526..00000000
--- a/apps/web/ui/common/outlined-tabs-list.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.tabs {
-  flex-shrink: 0;
-  overflow-x: auto;
-}
-
-:global(.style-nova) .tabs [data-slot="tabs-list"][data-variant="line"] {
-  width: 100%;
-}
-
-:global(.style-nova) .tabs [data-slot="tabs-list"][data-variant="line"]::after {
-  content: "";
-  align-self: flex-end;
-  flex: 1;
-  border-bottom: 1px solid var(--border);
-}
-
-:global(.style-nova)
-  .tabs
-  [data-slot="tabs-list"][data-variant="line"]
-  [data-slot="tabs-trigger"] {
-  border: 1px solid transparent;
-  border-radius: 0;
-  transition-property: color;
-}
-
-:global(.style-nova)
-  .tabs
-  [data-slot="tabs-list"][data-variant="line"]
-  [data-slot="tabs-trigger"][data-state="active"] {
-  border-color: var(--border);
-  border-bottom-color: transparent;
-  border-radius: 0.5rem 0.5rem 0 0;
-}
-
-:global(.style-nova)
-  .tabs
-  [data-slot="tabs-list"][data-variant="line"]
-  [data-slot="tabs-trigger"]::after {
-  inset-inline: -1px;
-  bottom: -1px;
-  height: 1px;
-  background-color: var(--border);
-  opacity: 1;
-}
-
-:global(.style-nova)
-  .tabs
-  [data-slot="tabs-list"][data-variant="line"]
-  [data-slot="tabs-trigger"][data-state="active"]::after {
-  display: none;
-}
diff --git a/apps/web/ui/common/outlined-tabs-list.tsx b/apps/web/ui/common/outlined-tabs-list.tsx
deleted file mode 100644
index c605eedd..00000000
--- a/apps/web/ui/common/outlined-tabs-list.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-import { TabsList } from "@coursemap/ui/primitives/tabs";
-import { cn } from "@/lib/cn";
-import styles from "./outlined-tabs-list.module.css";
-
-/** Use inside Tabs with TabsTrigger children; className styles the scrolling container. */
-export function OutlinedTabsList({
-  className,
-  ...props
-}: Omit<ComponentProps<typeof TabsList>, "variant">) {
-  return (
-    <div className={cn(styles.tabs, className)}>
-      <TabsList {...props} variant="line" />
-    </div>
-  );
-}
diff --git a/apps/web/ui/key-dates/university-calendar-view.tsx b/apps/web/ui/key-dates/university-calendar-view.tsx
index 10ffb918..823aa085 100644
--- a/apps/web/ui/key-dates/university-calendar-view.tsx
+++ b/apps/web/ui/key-dates/university-calendar-view.tsx
@@ -3,8 +3,12 @@ import { badgeVariantForTone } from "@/lib/ui";
 
 import { Badge } from "@coursemap/ui/components/badge";
 
-import { Tabs, TabsContent, TabsTrigger } from "@coursemap/ui/primitives/tabs";
-import { OutlinedTabsList } from "@/ui/common/outlined-tabs-list";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@coursemap/ui/primitives/tabs";
 import { useRouter, useSearchParams } from "next/navigation";
 import {
   BookOpen,
@@ -262,7 +266,7 @@ export function UniversityCalendarView({
         onValueChange={(value) => router.push(href(value), { scroll: false })}
         className="gap-4"
       >
-        <OutlinedTabsList aria-label="Date period">
+        <TabsList aria-label="Date period" variant="line">
           {(
             [
               ["upcoming", "Upcoming", futureEvents.length],
@@ -283,7 +287,7 @@ export function UniversityCalendarView({
               </Badge>
             </TabsTrigger>
           ))}
-        </OutlinedTabsList>
+        </TabsList>
         <TabsContent
           key={`${year}-${period}-${category}-${query}`}
           value={period}
diff --git a/apps/web/ui/overlays/course-drawer.tsx b/apps/web/ui/overlays/course-drawer.tsx
index 62037ca9..a426615e 100644
--- a/apps/web/ui/overlays/course-drawer.tsx
+++ b/apps/web/ui/overlays/course-drawer.tsx
@@ -90,7 +90,7 @@ export function CourseDrawer({
     : undefined;
   const remove = async () => {
     const result = await removeAttempt(attempt.id);
-    notify(result.message, result.ok ? "success" : "warning");
+    notify(result.message, result.ok ? "success" : "error");
     if (result.ok) onClose();
   };
 
@@ -423,14 +423,12 @@ export function CourseDrawer({
               variant="outline"
               size="sm"
               disabled={recorded || unitSelectionMissing}
+              aria-pressed={attempt.status === "completed"}
               className={cn(
-                cn(
-                  attempt.status === "completed" &&
-                    "!bg-card !text-emerald-700 !ring-emerald-300 hover:!bg-emerald-50 disabled:opacity-100 dark:bg-emerald-950/60 dark:text-emerald-300 dark:ring-emerald-900",
-                  attempt.status !== "completed" &&
-                    "hover:!bg-emerald-50 hover:!text-emerald-700 hover:!ring-emerald-200 dark:bg-emerald-950/60 dark:text-emerald-300 dark:ring-emerald-900",
-                ),
                 "w-full",
+                attempt.status === "completed"
+                  ? "border-emerald-300 bg-emerald-50 text-emerald-800 disabled:opacity-100 dark:border-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-200"
+                  : "hover:border-emerald-200 hover:bg-emerald-50 hover:text-emerald-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950/60 dark:hover:text-emerald-200",
               )}
               onClick={async () => {
                 const result = await updateAttempt(
@@ -443,7 +441,7 @@ export function CourseDrawer({
                   result.ok
                     ? `${course.code} marked as completed`
                     : result.message,
-                  result.ok ? "success" : "warning",
+                  result.ok ? "success" : "error",
                 );
               }}
               type="button"
@@ -455,13 +453,12 @@ export function CourseDrawer({
               variant={attempt.status === "failed" ? "destructive" : "outline"}
               size="sm"
               disabled={recorded || unitSelectionMissing}
+              aria-pressed={attempt.status === "failed"}
               className={cn(
-                cn(
-                  attempt.status === "failed" && "opacity-100",
-                  attempt.status !== "failed" &&
-                    "hover:!bg-rose-50 hover:!text-rose-700 hover:!ring-rose-200 dark:bg-rose-950/60 dark:text-rose-300 dark:ring-rose-900",
-                ),
                 "w-full",
+                attempt.status === "failed"
+                  ? "disabled:opacity-100"
+                  : "hover:border-rose-200 hover:bg-rose-50 hover:text-rose-800 dark:hover:border-rose-800 dark:hover:bg-rose-950/60 dark:hover:text-rose-200",
               )}
               onClick={async () => {
                 const result = await updateAttempt(
@@ -474,7 +471,7 @@ export function CourseDrawer({
                   result.ok
                     ? `${course.code} recorded as a failed attempt`
                     : result.message,
-                  result.ok ? "success" : "warning",
+                  result.ok ? "success" : "error",
                 );
               }}
               type="button"
@@ -487,7 +484,7 @@ export function CourseDrawer({
               size="sm"
               disabled={recorded}
               onClick={() => void remove()}
-              className={cn(undefined, "w-full")}
+              className="w-full"
               type="button"
             >
               <Trash2 size={14} />
diff --git a/apps/web/ui/rooms/room-finder.tsx b/apps/web/ui/rooms/room-finder.tsx
index a96a826e..86b74611 100644
--- a/apps/web/ui/rooms/room-finder.tsx
+++ b/apps/web/ui/rooms/room-finder.tsx
@@ -786,9 +786,16 @@ export function RoomFinder({
             const shown = level.id === shownLevelId;
             const onRoute = journey?.route.levelIds.includes(level.id) ?? false;
             return (
-              <Hint key={level.id} label={level.name}>
+              <Hint
+                key={level.id}
+                label={onRoute ? `${level.name} · on your route` : level.name}
+              >
                 <button
-                  aria-label={`Show ${level.name}`}
+                  aria-label={
+                    onRoute
+                      ? `Show ${level.name}, on your route`
+                      : `Show ${level.name}`
+                  }
                   aria-current={shown ? "true" : undefined}
                   className={cn(
                     "relative min-h-11 min-w-11 rounded-md text-xs font-semibold outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring",
@@ -800,7 +807,7 @@ export function RoomFinder({
                   {level.ref || level.number}
                   {onRoute && !shown ? (
                     <span
-                      aria-label="on your route"
+                      aria-hidden="true"
                       className="absolute top-1 right-1 size-1.5 rounded-full bg-amber-500"
                     />
                   ) : null}