diff --git a/apps/web/lib/coursemap/requisite-evaluation.ts b/apps/web/lib/coursemap/requisite-evaluation.ts
new file mode 100644
index 00000000..f1cbeb06
--- /dev/null
+++ b/apps/web/lib/coursemap/requisite-evaluation.ts
@@ -0,0 +1,290 @@
+import { gradePointAverage, weightedAverageMark } from "@/lib/academic/metrics";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import type { CompletedRequisiteCourse } from "@/lib/coursemap/requisite-summary";
+import type { CourseRuleCondition } from "@/lib/coursemap/requisite-tree";
+import type { Attempt } from "@/lib/coursemap/types";
+
+/**
+ * What a student has done, in the terms a requisite rule asks about. Every
+ * field a rule cannot be judged without is nullable, so a missing record reads
+ * as "not known" rather than as a failure.
+ */
+export type StudentRecord = {
+  completed: ReadonlyMap<
+    string,
+    { units: number; mark: number | null; tags?: readonly string[] }
+  >;
+  /** Courses taken this semester, which satisfy a concurrent requisite. */
+  enrolled: ReadonlySet<string>;
+  programmeCodes: readonly string[];
+  wam: number | null;
+  gpa: number | null;
+  studyYear: number | null;
+};
+
+export type RequisiteStatus = "met" | "partial" | "unmet" | "unknown";
+
+export type RequisiteMeasure =
+  | { kind: "units"; value: number; target: number }
+  | { kind: "score"; value: number; threshold: number; scale: "wam" | "gpa" }
+  | { kind: "count"; value: number; target: number };
+
+export type ConditionEvaluation = {
+  status: RequisiteStatus;
+  measure?: RequisiteMeasure;
+  /** One line about the student's side of the condition. */
+  detail?: string;
+};
+
+const COURSE_CODE = /^([A-Z]{4})(\d)\d{3}[A-Z]?$/u;
+
+function courseLevel(code: string) {
+  const match = COURSE_CODE.exec(code);
+  return match ? Number(match[2]) * 1000 : null;
+}
+
+function subjectOf(code: string) {
+  return COURSE_CODE.exec(code)?.[1] ?? null;
+}
+
+function unitsWhere(
+  student: StudentRecord,
+  include: (code: string, tags: readonly string[]) => boolean,
+) {
+  let units = 0;
+  for (const [code, result] of student.completed) {
+    if (include(code, result.tags ?? [])) units += result.units;
+  }
+  return units;
+}
+
+function unitsStatus(value: number, target: number): RequisiteStatus {
+  if (value >= target) return "met";
+  return value > 0 ? "partial" : "unmet";
+}
+
+function unitsEvaluation(value: number, target: number): ConditionEvaluation {
+  return {
+    status: unitsStatus(value, target),
+    measure: { kind: "units", value, target },
+  };
+}
+
+function scoreEvaluation(
+  value: number | null,
+  threshold: number,
+  scale: "wam" | "gpa",
+): ConditionEvaluation {
+  if (value === null) return { status: "unknown" };
+  return {
+    status: value >= threshold ? "met" : "unmet",
+    measure: { kind: "score", value, threshold, scale },
+  };
+}
+
+/**
+ * One condition against one student. Conditions the record cannot answer,
+ * such as a permission or a tag the catalogue does not carry, stay unknown.
+ */
+export function evaluateCondition(
+  condition: CourseRuleCondition,
+  student: StudentRecord,
+): ConditionEvaluation {
+  switch (condition.kind) {
+    case "course": {
+      const result = student.completed.get(condition.code);
+      if (result) {
+        if (condition.minimumMark === null) return { status: "met" };
+        if (result.mark === null)
+          return { status: "unknown", detail: "Your mark is not recorded" };
+        return {
+          status: result.mark >= condition.minimumMark ? "met" : "unmet",
+          detail: `You got ${result.mark} in ${condition.code}`,
+        };
+      }
+      if (
+        condition.requirementMode === "completed_or_concurrent" &&
+        student.enrolled.has(condition.code)
+      ) {
+        return {
+          status: "met",
+          detail: "Enrolled this semester, which counts for this course",
+        };
+      }
+      return { status: "unmet" };
+    }
+    case "incompatible":
+      return student.completed.has(condition.code)
+        ? {
+            status: "unmet",
+            detail: `You have completed ${condition.code}`,
+          }
+        : {
+            status: "met",
+            detail: `You haven't completed ${condition.code}`,
+          };
+    case "units_total":
+      return unitsEvaluation(
+        unitsWhere(student, () => true),
+        condition.units,
+      );
+    case "subject_units":
+      return condition.subject
+        ? unitsEvaluation(
+            unitsWhere(
+              student,
+              (code) => subjectOf(code) === condition.subject,
+            ),
+            condition.units,
+          )
+        : { status: "unknown" };
+    case "level_units":
+      return unitsEvaluation(
+        unitsWhere(student, (code) => {
+          const level = courseLevel(code);
+          if (level === null || level < condition.minimumLevel) return false;
+          if (condition.maximumLevel !== null && level > condition.maximumLevel)
+            return false;
+          return !condition.subject || subjectOf(code) === condition.subject;
+        }),
+        condition.units,
+      );
+    case "course_set_units":
+      return unitsEvaluation(
+        unitsWhere(student, (code) => condition.courseCodes.includes(code)),
+        condition.units,
+      );
+    case "year_standing":
+      if (student.studyYear === null) return { status: "unknown" };
+      return {
+        status: student.studyYear >= condition.minimumYear ? "met" : "unmet",
+        detail: `You're in year ${student.studyYear}`,
+      };
+    case "structure":
+      if (!condition.structureCode) return { status: "unknown" };
+      return student.programmeCodes.includes(condition.structureCode)
+        ? {
+            status: "met",
+            detail: `You're enrolled in ${condition.structureCode}`,
+          }
+        : { status: "unmet" };
+    case "structure_set": {
+      const matched = condition.structureCodes.filter((code) =>
+        student.programmeCodes.includes(code),
+      ).length;
+      const needed = condition.minimumCount ?? 1;
+      return { status: matched >= needed ? "met" : "unmet" };
+    }
+    case "wam":
+      return scoreEvaluation(student.wam, condition.minimumWam, "wam");
+    case "gpa":
+      return scoreEvaluation(student.gpa, condition.minimumGpa, "gpa");
+    case "tagged_units": {
+      // A tag is one category however it is capitalised.
+      const wanted = condition.tag.toLowerCase();
+      return unitsEvaluation(
+        unitsWhere(student, (_code, tags) =>
+          tags.some((tag) => tag.toLowerCase() === wanted),
+        ),
+        condition.units,
+      );
+    }
+    case "elective_units":
+    case "permission":
+    case "other":
+      return { status: "unknown" };
+  }
+}
+
+type Group = Extract<CourseRuleExpression, { kind: "group" }>;
+
+export function groupRequiredCount(group: Group) {
+  if (group.operator === "all_of") return group.conditions.length;
+  if (group.operator === "any_of") return 1;
+  return group.minimumCount ?? 1;
+}
+
+/** A rule or sub-rule against one student, with its children's results. */
+export function evaluateRule(
+  expression: CourseRuleExpression,
+  student: StudentRecord,
+): ConditionEvaluation {
+  if (expression.kind !== "group")
+    return evaluateCondition(expression, student);
+  const results = expression.conditions.map((child) =>
+    evaluateRule(child, student),
+  );
+  const met = results.filter((result) => result.status === "met").length;
+  const needed = groupRequiredCount(expression);
+  const measure: RequisiteMeasure = {
+    kind: "count",
+    value: Math.min(met, needed),
+    target: needed,
+  };
+  if (met >= needed) return { status: "met", measure };
+  if (results.every((result) => result.status === "unknown"))
+    return { status: "unknown" };
+  const started = results.some(
+    (result) => result.status === "met" || result.status === "partial",
+  );
+  return { status: started ? "partial" : "unmet", measure };
+}
+
+/**
+ * The reader's record in the terms a requisite asks about. Completion comes
+ * from the server snapshot, which only counts finished attempts; marks and
+ * this semester's enrolments come from the plan.
+ */
+export function studentRecord({
+  attempts,
+  commencementYear,
+  completedCourses,
+  programmeCodes,
+}: {
+  attempts: readonly Attempt[];
+  commencementYear: number | null;
+  completedCourses: readonly CompletedRequisiteCourse[];
+  programmeCodes: readonly string[];
+}): StudentRecord {
+  const finished = attempts.filter((attempt) => attempt.status === "completed");
+  const markByCode = new Map(
+    finished.flatMap((attempt) =>
+      attempt.mark === undefined
+        ? []
+        : [[attempt.courseCode, attempt.mark] as const],
+    ),
+  );
+  const completed = new Map(
+    completedCourses.map((course) => [
+      course.code.toUpperCase(),
+      {
+        units: course.units,
+        mark: markByCode.get(course.code.toUpperCase()) ?? null,
+        tags: course.tags ?? [],
+      },
+    ]),
+  );
+  const results = finished.map((attempt) => ({
+    mark: attempt.mark,
+    resultCode: attempt.resultCode,
+    units:
+      attempt.unitsEarned ??
+      attempt.unitsAttempted ??
+      completed.get(attempt.courseCode)?.units ??
+      0,
+  }));
+  return {
+    completed,
+    enrolled: new Set(
+      attempts
+        .filter((attempt) => attempt.status === "enrolled")
+        .map((attempt) => attempt.courseCode),
+    ),
+    programmeCodes: programmeCodes.map((code) => code.toUpperCase()),
+    wam: weightedAverageMark(results),
+    gpa: gradePointAverage(results),
+    studyYear: commencementYear
+      ? Math.max(1, new Date().getFullYear() - commencementYear + 1)
+      : null,
+  };
+}
diff --git a/apps/web/lib/coursemap/requisite-progress.ts b/apps/web/lib/coursemap/requisite-progress.ts
index b1bf31cb..835793b3 100644
--- a/apps/web/lib/coursemap/requisite-progress.ts
+++ b/apps/web/lib/coursemap/requisite-progress.ts
@@ -83,12 +83,33 @@ export async function loadCurrentUserRequisiteCompletion(): Promise<RequisiteCom
         course.code,
       ]),
     );
+    // A tagged-units rule counts the tags of the version actually completed.
+    const { data: tagRows, error: tagsError } = versionIds.length
+      ? await supabase
+          .from("course_tags")
+          .select("version_id,name")
+          .in("version_id", versionIds)
+      : { data: [], error: null };
+    if (tagsError) throw tagsError;
+    const tagsByVersionId = new Map<number, string[]>();
+    for (const row of tagRows ?? []) {
+      tagsByVersionId.set(row.version_id, [
+        ...(tagsByVersionId.get(row.version_id) ?? []),
+        row.name,
+      ]);
+    }
     return {
       completedCourses: attemptRows.flatMap((attempt) => {
         const codeId = codeIdByVersionId.get(attempt.catalogue_version_id);
         const code = codeId ? codeByCourseId.get(codeId) : undefined;
         return code && attempt.units_earned > 0
-          ? [{ code, units: attempt.units_earned }]
+          ? [
+              {
+                code,
+                units: attempt.units_earned,
+                tags: tagsByVersionId.get(attempt.catalogue_version_id) ?? [],
+              },
+            ]
           : [];
       }),
       enrolledProgrammeCodes: await loadEnrolledProgrammeCodes(
diff --git a/apps/web/lib/coursemap/requisite-samples.ts b/apps/web/lib/coursemap/requisite-samples.ts
new file mode 100644
index 00000000..759ae0a5
--- /dev/null
+++ b/apps/web/lib/coursemap/requisite-samples.ts
@@ -0,0 +1,168 @@
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import type { StudentRecord } from "@/lib/coursemap/requisite-evaluation";
+
+export type SampleStudent = "new" | "partway" | "complete";
+
+type Draft = {
+  completed: Map<
+    string,
+    { units: number; mark: number | null; tags?: string[] }
+  >;
+  programmeCodes: Set<string>;
+  wam: number | null;
+  gpa: number | null;
+  studyYear: number;
+};
+
+const COURSE_UNITS = 6;
+
+/**
+ * Invented course codes that count towards a unit rule. They use the top of
+ * each level's number range and skip any code the sample already holds, so
+ * a course the rule names is never counted twice.
+ */
+function fillerCodes(
+  subject: string,
+  level: number,
+  count: number,
+  used: Map<string, unknown>,
+) {
+  const codes: string[] = [];
+  for (let serial = 999; codes.length < count && serial >= 900; serial -= 1) {
+    const code = `${subject}${level}${String(serial).padStart(3, "0")}`;
+    if (!used.has(code)) codes.push(code);
+  }
+  return codes;
+}
+
+function addUnits(
+  draft: Draft,
+  units: number,
+  subject: string,
+  level: number,
+  tags: string[] = [],
+) {
+  const count = Math.ceil(units / COURSE_UNITS);
+  for (const code of fillerCodes(subject, level, count, draft.completed)) {
+    draft.completed.set(code, { units: COURSE_UNITS, mark: 75, tags });
+  }
+}
+
+/**
+ * Satisfies a rule completely, or about half of it, so a reviewer can see
+ * every state a student might be in without touching anyone's record.
+ */
+function satisfy(node: CourseRuleExpression, draft: Draft, share: number) {
+  const partial = share < 1;
+  switch (node.kind) {
+    case "group": {
+      const needed =
+        node.operator === "all_of"
+          ? node.conditions.length
+          : node.operator === "any_of"
+            ? 1
+            : (node.minimumCount ?? 1);
+      const target = partial ? Math.floor(needed / 2) : needed;
+      node.conditions
+        .slice(0, node.operator === "all_of" ? undefined : target)
+        .forEach((child, index) => {
+          if (node.operator === "all_of") {
+            satisfy(child, draft, partial && index % 2 === 1 ? 0 : share);
+          } else {
+            satisfy(child, draft, 1);
+          }
+        });
+      return;
+    }
+    case "course":
+      if (share === 0) return;
+      draft.completed.set(node.code, {
+        units: COURSE_UNITS,
+        mark: Math.max(node.minimumMark ?? 0, 75),
+      });
+      return;
+    case "units_total":
+      addUnits(draft, Math.floor(node.units * share), "ZZSA", 1);
+      return;
+    case "subject_units":
+      addUnits(
+        draft,
+        Math.floor(node.units * share),
+        node.subject ?? "ZZSA",
+        1,
+      );
+      return;
+    case "level_units":
+      addUnits(
+        draft,
+        Math.floor(node.units * share),
+        node.subject ?? "ZZSA",
+        node.minimumLevel / 1000,
+      );
+      return;
+    case "course_set_units": {
+      const count = Math.ceil((node.units * share) / COURSE_UNITS);
+      for (const code of node.courseCodes.slice(0, count)) {
+        draft.completed.set(code, { units: COURSE_UNITS, mark: 75 });
+      }
+      return;
+    }
+    case "year_standing":
+      draft.studyYear = Math.max(
+        draft.studyYear,
+        partial ? Math.max(1, node.minimumYear - 1) : node.minimumYear,
+      );
+      return;
+    case "structure":
+      if (!partial && node.structureCode)
+        draft.programmeCodes.add(node.structureCode);
+      return;
+    case "structure_set":
+      if (!partial && node.structureCodes[0])
+        draft.programmeCodes.add(node.structureCodes[0]);
+      return;
+    case "wam":
+      draft.wam = partial
+        ? node.minimumWam - 3
+        : Math.max(node.minimumWam + 5, 75);
+      return;
+    case "gpa":
+      draft.gpa = partial
+        ? Math.max(0, node.minimumGpa - 0.5)
+        : Math.min(7, node.minimumGpa + 0.8);
+      return;
+    case "tagged_units":
+      addUnits(draft, Math.floor(node.units * share), "ZZTG", 1, [node.tag]);
+      return;
+    case "incompatible":
+    case "elective_units":
+    case "permission":
+    case "other":
+      return;
+  }
+}
+
+/** A made-up student for previewing how a course's requisites read. */
+export function sampleStudent(
+  expression: CourseRuleExpression | null,
+  sample: SampleStudent,
+): StudentRecord {
+  const draft: Draft = {
+    completed: new Map(),
+    programmeCodes: new Set(),
+    wam: null,
+    gpa: null,
+    studyYear: 1,
+  };
+  if (expression && sample !== "new") {
+    satisfy(expression, draft, sample === "complete" ? 1 : 0.5);
+  }
+  return {
+    completed: draft.completed,
+    enrolled: new Set(),
+    programmeCodes: [...draft.programmeCodes],
+    wam: draft.wam,
+    gpa: draft.gpa,
+    studyYear: draft.studyYear,
+  };
+}
diff --git a/apps/web/lib/coursemap/requisite-summary.ts b/apps/web/lib/coursemap/requisite-summary.ts
index d49b9bd3..00d1901d 100644
--- a/apps/web/lib/coursemap/requisite-summary.ts
+++ b/apps/web/lib/coursemap/requisite-summary.ts
@@ -35,153 +35,6 @@ export type RequisiteExpression =
 export type CompletedRequisiteCourse = {
   code: string;
   units: number;
+  /** The tags on the version the student completed. */
+  tags?: string[];
 };
-
-export type RequisiteProgress =
-  | {
-      kind: "course";
-      code: string;
-      satisfied: boolean;
-    }
-  | {
-      completedUnits: number;
-      kind: "subject_units";
-      requiredUnits: number;
-      satisfied: boolean;
-      subject: string;
-    }
-  | {
-      completedUnits: number;
-      kind: "level_units";
-      level: number;
-      requiredUnits: number;
-      satisfied: boolean;
-      subject?: string;
-    }
-  | {
-      completedUnits: number;
-      kind: "units_total";
-      requiredUnits: number;
-      satisfied: boolean;
-    }
-  | {
-      code: string;
-      kind: "programme_enrolment";
-      name: string;
-      satisfied: boolean;
-    }
-  | {
-      conditions: RequisiteProgress[];
-      kind: "group";
-      operator: "all_of" | "any_of";
-      satisfied: boolean;
-    };
-
-const COURSE_LEVEL_PATTERN = /^[A-Z]{4}(\d)\d{3}[A-Z]?$/u;
-
-function courseLevel(code: string) {
-  const digit = COURSE_LEVEL_PATTERN.exec(code.toUpperCase())?.[1];
-  return digit === undefined ? null : Number(digit) * 1000;
-}
-
-/**
- * Evaluates only completed course attempts. Planned and enrolled courses are
- * deliberately excluded because the ANU wording requires completed study.
- */
-export function evaluateRequisiteExpression(
-  expression: RequisiteExpression,
-  completedCourses: readonly CompletedRequisiteCourse[],
-  enrolledProgrammeCodes: readonly string[] = [],
-): RequisiteProgress {
-  if (expression.kind === "programme_enrolment") {
-    return {
-      kind: "programme_enrolment",
-      code: expression.code,
-      name: expression.name,
-      satisfied: enrolledProgrammeCodes.some(
-        (code) => code.toUpperCase() === expression.code,
-      ),
-    };
-  }
-
-  if (expression.kind === "course") {
-    return {
-      kind: "course",
-      code: expression.code,
-      satisfied: completedCourses.some(
-        (course) => course.code.toUpperCase() === expression.code,
-      ),
-    };
-  }
-
-  if (expression.kind === "subject_units") {
-    const completedUnits = completedCourses.reduce((total, course) => {
-      const subject = course.code.slice(0, 4).toUpperCase();
-      return subject === expression.subject && Number.isFinite(course.units)
-        ? total + course.units
-        : total;
-    }, 0);
-    return {
-      kind: "subject_units",
-      subject: expression.subject,
-      requiredUnits: expression.units,
-      completedUnits,
-      satisfied: completedUnits >= expression.units,
-    };
-  }
-
-  if (expression.kind === "level_units") {
-    const completedUnits = completedCourses.reduce((total, course) => {
-      const subject = course.code.slice(0, 4).toUpperCase();
-      const level = courseLevel(course.code);
-      const subjectMatches =
-        expression.subject === undefined || subject === expression.subject;
-      return subjectMatches &&
-        level === expression.level &&
-        Number.isFinite(course.units)
-        ? total + course.units
-        : total;
-    }, 0);
-    return {
-      kind: "level_units",
-      level: expression.level,
-      ...(expression.subject !== undefined
-        ? { subject: expression.subject }
-        : {}),
-      requiredUnits: expression.units,
-      completedUnits,
-      satisfied: completedUnits >= expression.units,
-    };
-  }
-
-  if (expression.kind === "units_total") {
-    const completedUnits = completedCourses.reduce(
-      (total, course) =>
-        Number.isFinite(course.units) ? total + course.units : total,
-      0,
-    );
-    return {
-      kind: "units_total",
-      requiredUnits: expression.units,
-      completedUnits,
-      satisfied: completedUnits >= expression.units,
-    };
-  }
-
-  const conditions = expression.conditions.map((condition) =>
-    evaluateRequisiteExpression(
-      condition,
-      completedCourses,
-      enrolledProgrammeCodes,
-    ),
-  );
-  return {
-    kind: "group",
-    operator: expression.operator,
-    conditions,
-    satisfied:
-      expression.operator === "all_of"
-        ? conditions.every((condition) => condition.satisfied)
-        : conditions.some((condition) => condition.satisfied),
-  };
-}
diff --git a/apps/web/lib/coursemap/requisite-tree.ts b/apps/web/lib/coursemap/requisite-tree.ts
index 8cda04fa..c61d0d38 100644
--- a/apps/web/lib/coursemap/requisite-tree.ts
+++ b/apps/web/lib/coursemap/requisite-tree.ts
@@ -1,352 +1,6 @@
-import type {
-  CoursePrerequisiteEdge,
-  CourseRuleExpression,
-} from "@/lib/coursemap/course-types";
-import type {
-  RequirementTreeCondition,
-  RequirementTreeOption,
-} from "@/lib/coursemap/requirement-tree-node";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
 
 export type CourseRuleCondition = Exclude<
   CourseRuleExpression,
   { kind: "group" }
 >;
-
-/**
- * One course rule condition in the shared requirement shape, so a requisite
- * reads through the same vocabulary as a programme requirement instead of
- * falling back to the ANU prose for every kind the narrow summary never
- * covered.
- */
-export function requisiteConditionNode(
-  condition: CourseRuleCondition,
-  position = 0,
-): RequirementTreeCondition {
-  const options: RequirementTreeOption[] =
-    condition.kind === "course_set_units"
-      ? condition.courseCodes.map((code, index) => ({
-          code,
-          kind: "course",
-          position: index,
-          structureKind: null,
-        }))
-      : condition.kind === "structure_set"
-        ? condition.structureCodes.map((code, index) => ({
-            code,
-            kind: "structure",
-            position: index,
-            structureKind: condition.structureKind,
-          }))
-        : [];
-  return {
-    type: "condition",
-    conditionKind: condition.kind,
-    freeText:
-      condition.kind === "permission" ||
-      condition.kind === "other" ||
-      condition.kind === "structure"
-        ? condition.text
-        : null,
-    id: position,
-    itemCode:
-      condition.kind === "course" || condition.kind === "incompatible"
-        ? condition.code
-        : condition.kind === "structure"
-          ? condition.structureCode
-          : null,
-    maximumLevel:
-      condition.kind === "level_units" ? condition.maximumLevel : null,
-    maximumUnits: null,
-    minimumCourses:
-      condition.kind === "structure_set" ? condition.minimumCount : null,
-    minimumGpa: condition.kind === "gpa" ? condition.minimumGpa : null,
-    minimumLevel:
-      condition.kind === "level_units" ? condition.minimumLevel : null,
-    minimumMark: condition.kind === "course" ? condition.minimumMark : null,
-    minimumUnits:
-      condition.kind === "units_total" ||
-      condition.kind === "subject_units" ||
-      condition.kind === "level_units" ||
-      condition.kind === "course_set_units" ||
-      condition.kind === "tagged_units" ||
-      condition.kind === "elective_units"
-        ? condition.units
-        : null,
-    minimumWam: condition.kind === "wam" ? condition.minimumWam : null,
-    minimumYear:
-      condition.kind === "year_standing" ? condition.minimumYear : null,
-    options,
-    position,
-    projectionKey: `${condition.kind}-${position}`,
-    requirementMode:
-      condition.kind === "course" ? condition.requirementMode : null,
-    sourceLocator: "",
-    sourceText: condition.sourceText,
-    structureKind:
-      condition.kind === "structure_set" ? condition.structureKind : null,
-    subjectCode:
-      condition.kind === "units_total" ||
-      condition.kind === "subject_units" ||
-      condition.kind === "level_units"
-        ? condition.subject
-        : null,
-    tag: condition.kind === "tagged_units" ? condition.tag : null,
-  };
-}
-
-/**
- * A prerequisite rule drawn as a layered graph. Nodes carry the condition they
- * came from rather than finished wording, so the display kit in
- * `ui/requirements/requirement-presentation.ts` keeps ownership of how every
- * condition kind reads and the graph cannot grow a second vocabulary.
- */
-export type RequisiteGraphNode =
-  | { id: string; depth: number; kind: "current"; code: string }
-  | {
-      id: string;
-      depth: number;
-      kind: "course";
-      code: string;
-      isAvailable: boolean;
-      condition: CourseRuleCondition | null;
-    }
-  | {
-      id: string;
-      depth: number;
-      kind: "requirement";
-      condition: CourseRuleCondition;
-    }
-  | {
-      id: string;
-      depth: number;
-      kind: "choice";
-      minimumCount: number | null;
-      operator: "all_of" | "any_of" | "at_least";
-    }
-  | {
-      id: string;
-      depth: number;
-      kind: "unlocked";
-      code: string;
-      isAvailable: boolean;
-    };
-
-export type RequisiteGraphEdge = {
-  from: string;
-  to: string;
-  /** Leaves an alternative group, so this is one of several ways to qualify. */
-  alternative: boolean;
-};
-
-export type RequisiteGraph = {
-  edges: RequisiteGraphEdge[];
-  /**
-   * Courses the prerequisite rule excludes. Collected so the caller can say so
-   * separately; an incompatibility is never drawn as something to complete.
-   */
-  incompatibleCodes: string[];
-  /** Furthest prerequisite column, counting left from the course itself. */
-  maximumDepth: number;
-  nodes: RequisiteGraphNode[];
-  /** Whether the upstream side came from the rule tree or there is none. */
-  source: "none" | "rule";
-};
-
-const GRAPH_COURSE_CODE = /^[A-Z]{4}\d{4}[A-Z]?$/u;
-
-function collectIncompatibleCodes(
-  expression: CourseRuleExpression,
-  codes: Set<string>,
-) {
-  if (expression.kind === "group") {
-    for (const child of expression.conditions) {
-      collectIncompatibleCodes(child, codes);
-    }
-    return;
-  }
-  if (expression.kind === "incompatible") codes.add(expression.code);
-}
-
-/** Whether anything survives once incompatibilities are taken out. */
-function hasRequirementContent(expression: CourseRuleExpression): boolean {
-  if (expression.kind === "incompatible") return false;
-  if (expression.kind !== "group") return true;
-  return expression.conditions.some(hasRequirementContent);
-}
-
-/**
- * An `all_of` earns a node inside an alternative, where flattening would make
- * "one of X, or both Y and Z" read as three equal choices, and at the root.
- *
- * The root used to be flattened too, on the reasoning that every edge into the
- * course already means "and". Readers do not see it that way: several arrows
- * converging on one course read as several ways in, and once one of those
- * arrows leaves a "Choose one" node the rest are read as further choices. For
- * COMP3600 that turned "24 units of COMP, and one of MATH or COMP1600" into
- * three alternatives. An explicit node says the requirements are all needed.
- * A group with a single child is noise either way.
- */
-function groupNeedsNode(
-  expression: Extract<CourseRuleExpression, { kind: "group" }>,
-  childCount: number,
-  insideAlternative: boolean,
-  isRoot: boolean,
-) {
-  if (childCount < 2) return false;
-  if (expression.operator === "all_of") return insideAlternative || isRoot;
-  return true;
-}
-
-export function buildRequisiteGraph({
-  availableCourseCodes,
-  code,
-  expression,
-  prerequisiteEdges,
-}: {
-  availableCourseCodes: ReadonlySet<string>;
-  code: string;
-  expression: CourseRuleExpression | null;
-  prerequisiteEdges: readonly CoursePrerequisiteEdge[];
-}): RequisiteGraph {
-  const nodes: RequisiteGraphNode[] = [];
-  const edges: RequisiteGraphEdge[] = [];
-  const incompatible = new Set<string>();
-  const currentId = "course";
-  nodes.push({ id: currentId, depth: 0, kind: "current", code });
-
-  const courseNodeByCode = new Map<string, string>();
-  let counter = 0;
-  const nextId = (prefix: string) => `${prefix}-${(counter += 1)}`;
-
-  const addCourseNode = (
-    courseCode: string,
-    depth: number,
-    condition: CourseRuleCondition | null,
-  ) => {
-    const existing = courseNodeByCode.get(courseCode);
-    if (existing) return existing;
-    const id = nextId("course");
-    courseNodeByCode.set(courseCode, id);
-    nodes.push({
-      id,
-      depth,
-      kind: "course",
-      code: courseCode,
-      isAvailable: availableCourseCodes.has(courseCode),
-      condition,
-    });
-    return id;
-  };
-
-  let source: RequisiteGraph["source"] = "none";
-
-  if (expression) {
-    collectIncompatibleCodes(expression, incompatible);
-    const attach = (
-      child: CourseRuleExpression,
-      parentId: string,
-      depth: number,
-      alternative: boolean,
-    ) => {
-      if (!hasRequirementContent(child)) return;
-      if (child.kind === "group") {
-        const children = child.conditions.filter(hasRequirementContent);
-        if (
-          !groupNeedsNode(
-            child,
-            children.length,
-            alternative,
-            parentId === currentId,
-          )
-        ) {
-          // Flattened, so each child inherits the meaning of the edge above it.
-          for (const grandchild of children) {
-            attach(grandchild, parentId, depth, alternative);
-          }
-          return;
-        }
-        const id = nextId("choice");
-        nodes.push({
-          id,
-          depth,
-          kind: "choice",
-          minimumCount: child.minimumCount,
-          operator: child.operator,
-        });
-        edges.push({ from: id, to: parentId, alternative });
-        for (const grandchild of children) {
-          attach(grandchild, id, depth + 1, child.operator !== "all_of");
-        }
-        return;
-      }
-      if (child.kind === "course" && GRAPH_COURSE_CODE.test(child.code)) {
-        const id = addCourseNode(child.code, depth, child);
-        edges.push({ from: id, to: parentId, alternative });
-        return;
-      }
-      const id = nextId("requirement");
-      nodes.push({ id, depth, kind: "requirement", condition: child });
-      edges.push({ from: id, to: parentId, alternative });
-    };
-    attach(expression, currentId, 1, false);
-    if (nodes.length > 1) source = "rule";
-  }
-
-  // Chain further upstream from every course the rule names, so a prerequisite
-  // of a prerequisite stays visible. Those courses carry no operator here; the
-  // AND and OR shape of their own rules belongs on their own pages.
-  const incoming = new Map<string, CoursePrerequisiteEdge[]>();
-  for (const edge of prerequisiteEdges) {
-    if (edge.from === edge.to) continue;
-    incoming.set(edge.to, [...(incoming.get(edge.to) ?? []), edge]);
-  }
-  const depthByNode = new Map(nodes.map((node) => [node.id, node.depth]));
-  const visitUpstream = (courseCode: string, path: ReadonlySet<string>) => {
-    const targetId = courseNodeByCode.get(courseCode);
-    if (!targetId) return;
-    const targetDepth = depthByNode.get(targetId) ?? 1;
-    for (const edge of incoming.get(courseCode) ?? []) {
-      if (path.has(edge.from)) continue;
-      const existingId = courseNodeByCode.get(edge.from);
-      const id = existingId ?? addCourseNode(edge.from, targetDepth + 1, null);
-      const nextDepth = Math.max(
-        depthByNode.get(id) ?? targetDepth + 1,
-        targetDepth + 1,
-      );
-      depthByNode.set(id, nextDepth);
-      const node = nodes.find((candidate) => candidate.id === id);
-      if (node) node.depth = nextDepth;
-      if (!edges.some((item) => item.from === id && item.to === targetId)) {
-        edges.push({ from: id, to: targetId, alternative: false });
-      }
-      visitUpstream(edge.from, new Set([...path, edge.from]));
-    }
-  };
-  for (const courseCode of [...courseNodeByCode.keys()]) {
-    visitUpstream(courseCode, new Set([code, courseCode]));
-  }
-
-  for (const edge of prerequisiteEdges) {
-    if (edge.from !== code || edge.to === code) continue;
-    if (nodes.some((node) => node.kind === "unlocked" && node.code === edge.to))
-      continue;
-    const id = nextId("unlocked");
-    nodes.push({
-      id,
-      depth: -1,
-      kind: "unlocked",
-      code: edge.to,
-      isAvailable: edge.toIsAvailable || availableCourseCodes.has(edge.to),
-    });
-    edges.push({ from: currentId, to: id, alternative: false });
-  }
-
-  return {
-    edges,
-    incompatibleCodes: [...incompatible].sort(),
-    // Always keep one prerequisite column so its empty state has somewhere to sit.
-    maximumDepth: Math.max(1, ...nodes.map((node) => node.depth)),
-    nodes,
-    source,
-  };
-}
diff --git a/apps/web/tests/enrolment-steps.test.tsx b/apps/web/tests/enrolment-steps.test.tsx
new file mode 100644
index 00000000..e8bfbbc5
--- /dev/null
+++ b/apps/web/tests/enrolment-steps.test.tsx
@@ -0,0 +1,133 @@
+import { expect, test } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import type { StudentRecord } from "@/lib/coursemap/requisite-evaluation";
+import { EnrolmentSteps } from "@/ui/courses/enrolment-steps";
+
+const base = {
+  confidence: 1,
+  hardness: "hard" as const,
+  reviewState: "automatic" as const,
+  sourceText: "",
+};
+const course = (code: string): CourseRuleExpression => ({
+  ...base,
+  kind: "course",
+  code,
+  minimumMark: null,
+  requirementMode: "completed",
+});
+
+const rule: CourseRuleExpression = {
+  kind: "group",
+  operator: "all_of",
+  minimumCount: null,
+  conditions: [
+    { ...base, kind: "units_total", subject: null, units: 72 },
+    {
+      kind: "group",
+      operator: "at_least",
+      minimumCount: 2,
+      conditions: [course("COMP2100"), course("COMP2120"), course("COMP2300")],
+    },
+    { ...base, kind: "wam", minimumWam: 70 },
+    { ...base, kind: "permission", text: "Apply to the School of Computing." },
+    { ...base, kind: "incompatible", code: "COMP3530" },
+  ],
+};
+
+const student: StudentRecord = {
+  completed: new Map([
+    ["COMP2300", { units: 6, mark: 75 }],
+    ["COMP1100", { units: 54, mark: 70 }],
+  ]),
+  enrolled: new Set(),
+  programmeCodes: [],
+  wam: 72.5,
+  gpa: 5.8,
+  studyYear: 3,
+};
+
+function renderSteps(value: StudentRecord | null) {
+  return render(
+    <EnrolmentSteps
+      academicYear={2026}
+      availableCourseCodes={new Set(["COMP2100", "COMP2120", "COMP2300"])}
+      expression={rule}
+      student={value}
+    />,
+  );
+}
+
+test("every part of the rule is a step, with permission and exclusions last", () => {
+  renderSteps(null);
+  const steps = within(screen.getByRole("list")).getAllByRole("listitem");
+  expect(steps.map((step) => step.querySelector("p")?.textContent)).toEqual([
+    "Complete 72 units",
+    "Complete any 2 of these courses",
+    "Have a WAM of 70 or more",
+    "Get permission to enrol",
+    "You can't take this if you've completed COMP3530",
+  ]);
+  expect(screen.getByText("Sign in to see your progress")).toBeInTheDocument();
+  expect(screen.queryByRole("progressbar")).not.toBeInTheDocument();
+});
+
+test("a signed-in student sees progress towards each step", () => {
+  renderSteps(student);
+  expect(
+    screen.getByRole("progressbar", { name: "Units completed" }),
+  ).toHaveAttribute("aria-valuenow", "60");
+  expect(screen.getByText("1 of 2 done")).toBeInTheDocument();
+  expect(screen.getByText("72.5")).toBeInTheDocument();
+  expect(
+    screen.getByText("You haven't completed COMP3530"),
+  ).toBeInTheDocument();
+  // Units, courses and the exclusion count; the permission cannot be checked.
+  expect(screen.getByText("2 of 4 met")).toBeInTheDocument();
+});
+
+test("completed courses come first in a choice", () => {
+  renderSteps(student);
+  const chips = screen
+    .getAllByRole("link")
+    .map((link) => link.textContent?.replace(/\s*\(done\)/u, ""));
+  expect(chips).toEqual(["COMP2300", "COMP2100", "COMP2120"]);
+});
+
+test("a unit requirement links to the courses that count towards it", () => {
+  render(
+    <EnrolmentSteps
+      academicYear={2026}
+      availableCourseCodes={new Set()}
+      expression={{
+        kind: "group",
+        operator: "all_of",
+        minimumCount: null,
+        conditions: [
+          { ...base, kind: "subject_units", subject: "COMP", units: 24 },
+          {
+            ...base,
+            kind: "level_units",
+            minimumLevel: 2000,
+            maximumLevel: null,
+            subject: "COMP",
+            units: 12,
+          },
+          { ...base, kind: "tagged_units", tag: "Science", units: 6 },
+        ],
+      }}
+      student={null}
+    />,
+  );
+  expect(
+    screen.getByRole("link", { name: /24 units of COMP courses/u }),
+  ).toHaveAttribute("href", "/courses?year=2026&subject=COMP");
+  expect(
+    screen.getByRole("link", { name: /2000-level or higher COMP/u }),
+  ).toHaveAttribute("href", "/courses?year=2026&level=2%2B&subject=COMP");
+  expect(screen.getByRole("link", { name: /tagged Science/u })).toHaveAttribute(
+    "href",
+    "/courses?year=2026&tag=Science",
+  );
+});
diff --git a/apps/web/tests/prereq-graph.test.tsx b/apps/web/tests/prereq-graph.test.tsx
deleted file mode 100644
index 7c66c653..00000000
--- a/apps/web/tests/prereq-graph.test.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { expect, test } from "vitest";
-import { render, screen, within } from "@testing-library/react";
-import { TooltipProvider } from "@coursemap/ui/primitives/tooltip";
-import { PrereqGraph } from "@/ui/prereq-graph";
-import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
-
-const base = {
-  confidence: 1,
-  hardness: "hard" as const,
-  reviewState: "automatic" as const,
-  sourceText: "",
-};
-
-/** COMP3600 in the local catalogue: 24 units of COMP AND (6 units of MATH OR COMP1600). */
-const comp3600Rule: CourseRuleExpression = {
-  kind: "group",
-  operator: "all_of",
-  minimumCount: null,
-  conditions: [
-    { ...base, kind: "subject_units", subject: "COMP", units: 24 },
-    {
-      kind: "group",
-      operator: "any_of",
-      minimumCount: null,
-      conditions: [
-        { ...base, kind: "subject_units", subject: "MATH", units: 6 },
-        {
-          ...base,
-          kind: "course",
-          code: "COMP1600",
-          minimumMark: null,
-          requirementMode: "completed",
-        },
-      ],
-    },
-  ],
-};
-
-function renderGraph(props: Partial<Parameters<typeof PrereqGraph>[0]> = {}) {
-  return render(
-    <TooltipProvider>
-      <PrereqGraph
-        academicYear={2026}
-        availableCourseCodes={new Set(["COMP3600", "COMP1600"])}
-        code="COMP3600"
-        expression={comp3600Rule}
-        hasPrerequisiteWording
-        prerequisiteEdges={[]}
-        showStudentState={false}
-        statusByCode={new Map()}
-        unlocksAreKnown
-        {...props}
-      />
-    </TooltipProvider>,
-  );
-}
-
-test("every condition of the rule is drawn, including the unit requirements", () => {
-  renderGraph();
-  // Each unit rule is one line that leads with the figure a student needs.
-  expect(screen.getByText("24 units of COMP courses")).toBeInTheDocument();
-  expect(screen.getByText("6 units of MATH courses")).toBeInTheDocument();
-  expect(screen.getByRole("link", { name: /COMP1600/u })).toHaveAttribute(
-    "href",
-    "/courses/2026/comp1600",
-  );
-});
-
-test("alternatives are marked as a choice and the rule's AND is explicit", () => {
-  renderGraph();
-  expect(screen.getByText("Choose one")).toBeInTheDocument();
-  // The 24 units of COMP sit beside the choice, not inside it. The root AND
-  // used to be left for the reader to infer, and several arrows converging on
-  // the course read as several ways in, so a named junction now holds both.
-  expect(screen.getByText("All of these")).toBeInTheDocument();
-});
-
-test("a nested all_of inside a choice keeps its own group node", () => {
-  renderGraph({
-    expression: {
-      kind: "group",
-      operator: "any_of",
-      minimumCount: null,
-      conditions: [
-        {
-          ...base,
-          kind: "course",
-          code: "COMP1600",
-          minimumMark: null,
-          requirementMode: "completed",
-        },
-        {
-          kind: "group",
-          operator: "all_of",
-          minimumCount: null,
-          conditions: [
-            { ...base, kind: "subject_units", subject: "MATH", units: 6 },
-            { ...base, kind: "units_total", subject: null, units: 24 },
-          ],
-        },
-      ],
-    },
-  });
-  expect(screen.getByText("Choose one")).toBeInTheDocument();
-  expect(screen.getByText("All of these")).toBeInTheDocument();
-});
-
-test("an incompatibility is stated as an exclusion, never as a prerequisite", () => {
-  renderGraph({
-    expression: {
-      kind: "group",
-      operator: "all_of",
-      minimumCount: null,
-      conditions: [
-        {
-          ...base,
-          kind: "course",
-          code: "COMP1600",
-          minimumMark: null,
-          requirementMode: "completed",
-        },
-        { ...base, kind: "incompatible", code: "COMP6466" },
-      ],
-    },
-  });
-  expect(
-    screen.queryByRole("link", { name: /COMP6466/u }),
-  ).not.toBeInTheDocument();
-  expect(screen.getByText(/Not a prerequisite.*COMP6466/u)).toBeInTheDocument();
-});
-
-test("course state carries a word as well as a colour", () => {
-  renderGraph({
-    expression: {
-      kind: "group",
-      operator: "any_of",
-      minimumCount: null,
-      conditions: [
-        {
-          ...base,
-          kind: "course",
-          code: "COMP1600",
-          minimumMark: null,
-          requirementMode: "completed",
-        },
-        {
-          ...base,
-          kind: "course",
-          code: "COMP1110",
-          minimumMark: null,
-          requirementMode: "completed",
-        },
-      ],
-    },
-    availableCourseCodes: new Set(["COMP3600", "COMP1600", "COMP1110"]),
-    showStudentState: true,
-    statusByCode: new Map([
-      ["COMP1600", "completed"],
-      ["COMP1110", "planned"],
-    ] as const),
-  });
-  expect(
-    within(screen.getByRole("link", { name: /COMP1600/u })).getByText(
-      "Completed",
-    ),
-  ).toBeInTheDocument();
-  expect(
-    within(screen.getByRole("link", { name: /COMP1110/u })).getByText(
-      "Planned",
-    ),
-  ).toBeInTheDocument();
-});
-
-test("unlocks says it is unknown rather than implying nothing follows", () => {
-  renderGraph({ unlocksAreKnown: false });
-  expect(screen.getByText("Not known yet")).toBeInTheDocument();
-  expect(
-    screen.queryByText("No published course lists this one"),
-  ).not.toBeInTheDocument();
-});
-
-test("a known and empty reverse lookup says so plainly", () => {
-  renderGraph({ unlocksAreKnown: true });
-  expect(
-    screen.getByText("No published course lists this one"),
-  ).toBeInTheDocument();
-});
-
-test("unlocked courses appear when the reverse lookup found some", () => {
-  renderGraph({
-    prerequisiteEdges: [
-      {
-        from: "COMP3600",
-        to: "COMP4600",
-        fromIsAvailable: true,
-        toIsAvailable: true,
-      },
-    ],
-  });
-  expect(screen.getByRole("link", { name: /COMP4600/u })).toHaveAttribute(
-    "href",
-    "/courses/2026/comp4600",
-  );
-});
-
-test("without a rule the graph draws no prerequisites of its own", () => {
-  renderGraph({
-    expression: null,
-    prerequisiteEdges: [
-      {
-        from: "COMP1600",
-        to: "COMP3600",
-        fromIsAvailable: true,
-        toIsAvailable: true,
-      },
-    ],
-  });
-  // Only the rule says what a course requires; a stored edge alone carries no
-  // operator, so nothing is drawn from it.
-  expect(screen.queryByRole("link", { name: /COMP1600/u })).toBeNull();
-  expect(
-    screen.getByText(
-      "The prerequisites for COMP3600 have not been read into a chain yet. They are listed below as ANU publishes them.",
-    ),
-  ).toBeInTheDocument();
-});
-
-test("a course with no rule and no references still explains the gap", () => {
-  renderGraph({ expression: null, hasPrerequisiteWording: false });
-  // Nothing either side, so a sentence rather than three unconnected boxes.
-  expect(
-    screen.getByText(
-      "COMP3600 has no prerequisites, and no published course lists it as one.",
-    ),
-  ).toBeInTheDocument();
-});
-
-test("nodes in a column are stacked without overlapping", () => {
-  renderGraph({ showStudentState: true });
-  const placed = [
-    ...screen.getByTestId("prereq-graph").querySelectorAll<HTMLElement>("*"),
-  ]
-    .filter((element) => element.style.left && element.style.top)
-    .map((element) => ({
-      left: Number.parseFloat(element.style.left),
-      top: Number.parseFloat(element.style.top),
-      bottom:
-        Number.parseFloat(element.style.top) +
-        Number.parseFloat(element.style.height),
-    }));
-  expect(placed.length).toBeGreaterThan(3);
-  for (const column of new Set(placed.map((item) => item.left))) {
-    const stacked = placed
-      .filter((item) => item.left === column)
-      .sort((left, right) => left.top - right.top);
-    for (let index = 1; index < stacked.length; index += 1) {
-      expect(stacked[index].top).toBeGreaterThanOrEqual(
-        stacked[index - 1].bottom,
-      );
-    }
-  }
-});
diff --git a/apps/web/tests/requisite-diagram.test.tsx b/apps/web/tests/requisite-diagram.test.tsx
new file mode 100644
index 00000000..041c7b62
--- /dev/null
+++ b/apps/web/tests/requisite-diagram.test.tsx
@@ -0,0 +1,137 @@
+import { expect, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import type { StudentRecord } from "@/lib/coursemap/requisite-evaluation";
+import { RequisiteDiagram } from "@/ui/courses/requisite-diagram";
+
+const base = {
+  confidence: 1,
+  hardness: "hard" as const,
+  reviewState: "automatic" as const,
+  sourceText: "",
+};
+const course = (code: string): CourseRuleExpression => ({
+  ...base,
+  kind: "course",
+  code,
+  minimumMark: null,
+  requirementMode: "completed",
+});
+
+/** 72 units AND any 2 of three courses, with a permission and an exclusion. */
+const rule: CourseRuleExpression = {
+  kind: "group",
+  operator: "all_of",
+  minimumCount: null,
+  conditions: [
+    { ...base, kind: "units_total", subject: null, units: 72 },
+    {
+      kind: "group",
+      operator: "at_least",
+      minimumCount: 2,
+      conditions: [course("COMP2100"), course("COMP2120"), course("COMP2300")],
+    },
+    { ...base, kind: "permission", text: "Apply to the School of Computing." },
+    { ...base, kind: "incompatible", code: "COMP3530" },
+  ],
+};
+
+function renderDiagram(
+  props: Partial<Parameters<typeof RequisiteDiagram>[0]> = {},
+) {
+  return render(
+    <RequisiteDiagram
+      academicYear={2026}
+      availableCourseCodes={
+        new Set(["COMP2100", "COMP2120", "COMP2300", "COMP4500"])
+      }
+      code="COMP3500"
+      expression={rule}
+      hasPrerequisiteWording
+      student={null}
+      unlocks={[
+        { code: "COMP4500", isAvailable: true },
+        { code: "COMP4550", isAvailable: false },
+      ]}
+      unlocksAreKnown
+      {...props}
+    />,
+  );
+}
+
+test("each requirement is its own box and the group says how many it needs", () => {
+  renderDiagram();
+  expect(screen.getByText("Requires all of")).toBeInTheDocument();
+  expect(screen.getByText("72 units in total")).toBeInTheDocument();
+  expect(screen.getByRole("group", { name: "Any 2 of 3" })).toBeInTheDocument();
+  expect(screen.getByRole("link", { name: /COMP2120/u })).toHaveAttribute(
+    "href",
+    "/courses/2026/comp2120",
+  );
+});
+
+test("lines merge before the course, so it gets exactly one arrowhead", () => {
+  renderDiagram();
+  const svg = screen.getByTestId("requisite-diagram").querySelector("svg")!;
+  const heads = [...svg.querySelectorAll("path")].filter((path) =>
+    path.getAttribute("d")?.endsWith("z"),
+  );
+  // One into the course and one into each unlocked course.
+  expect(heads).toHaveLength(3);
+  expect(svg.querySelectorAll("circle")).toHaveLength(1);
+});
+
+test("a permission is a badge on the course, not a prerequisite box", () => {
+  renderDiagram();
+  expect(screen.getByText("Permission needed")).toBeInTheDocument();
+  expect(
+    screen.queryByText("Apply to the School of Computing."),
+  ).not.toBeInTheDocument();
+  expect(
+    screen.getByText(/cannot be counted with COMP3530/u),
+  ).toBeInTheDocument();
+});
+
+test("unlocked courses without published details still link, marked unavailable", () => {
+  renderDiagram();
+  expect(screen.getByRole("link", { name: /COMP4500/u })).toBeInTheDocument();
+  expect(screen.getByRole("link", { name: /COMP4550/u })).toHaveAttribute(
+    "title",
+    "COMP4550: course details unavailable",
+  );
+});
+
+test("completed requirements say so in words as well as colour", () => {
+  const student: StudentRecord = {
+    completed: new Map([["COMP2100", { units: 6, mark: null }]]),
+    enrolled: new Set(),
+    programmeCodes: [],
+    wam: null,
+    gpa: null,
+    studyYear: null,
+  };
+  renderDiagram({ student });
+  expect(
+    screen.getByRole("link", { name: /COMP2100.*Done/u }),
+  ).toBeInTheDocument();
+});
+
+test("a course with nothing on either side explains the gap", () => {
+  renderDiagram({
+    expression: null,
+    unlocks: [],
+    hasPrerequisiteWording: false,
+  });
+  expect(
+    screen.getByText(
+      "COMP3500 has no prerequisites, and no published course lists it as one.",
+    ),
+  ).toBeInTheDocument();
+});
+
+test("with nothing known to follow, the unlocks column is left out", () => {
+  renderDiagram({ unlocks: [], unlocksAreKnown: false });
+  expect(screen.queryByText("Unlocks")).not.toBeInTheDocument();
+  expect(screen.queryByText("Not known yet")).not.toBeInTheDocument();
+  expect(screen.getByText("This course")).toBeInTheDocument();
+});
diff --git a/apps/web/tests/requisite-evaluation.test.ts b/apps/web/tests/requisite-evaluation.test.ts
new file mode 100644
index 00000000..40af6b8f
--- /dev/null
+++ b/apps/web/tests/requisite-evaluation.test.ts
@@ -0,0 +1,206 @@
+import { expect, test } from "vitest";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import {
+  evaluateRule,
+  studentRecord,
+  type StudentRecord,
+} from "@/lib/coursemap/requisite-evaluation";
+
+const base = {
+  confidence: 1,
+  hardness: "hard" as const,
+  reviewState: "automatic" as const,
+  sourceText: "",
+};
+
+const course = (
+  code: string,
+  extra: Partial<{
+    minimumMark: number | null;
+    requirementMode: "completed" | "completed_or_concurrent";
+  }> = {},
+): CourseRuleExpression => ({
+  ...base,
+  kind: "course",
+  code,
+  minimumMark: null,
+  requirementMode: "completed",
+  ...extra,
+});
+
+const student: StudentRecord = {
+  completed: new Map([
+    ["COMP1100", { units: 6, mark: 72 }],
+    ["COMP2100", { units: 6, mark: 58 }],
+    ["MATH1005", { units: 6, mark: null }],
+  ]),
+  enrolled: new Set(["COMP2310"]),
+  programmeCodes: ["AACOM"],
+  wam: 68.4,
+  gpa: 5.4,
+  studyYear: 2,
+};
+
+test("unit rules count completed units and report how far along the student is", () => {
+  expect(
+    evaluateRule(
+      { ...base, kind: "units_total", subject: null, units: 24 },
+      student,
+    ),
+  ).toEqual({
+    status: "partial",
+    measure: { kind: "units", value: 18, target: 24 },
+  });
+  expect(
+    evaluateRule(
+      { ...base, kind: "subject_units", subject: "COMP", units: 12 },
+      student,
+    ).status,
+  ).toBe("met");
+  expect(
+    evaluateRule(
+      {
+        ...base,
+        kind: "level_units",
+        minimumLevel: 2000,
+        maximumLevel: null,
+        subject: "COMP",
+        units: 12,
+      },
+      student,
+    ).measure,
+  ).toEqual({ kind: "units", value: 6, target: 12 });
+});
+
+test("a minimum mark is checked against the recorded mark", () => {
+  expect(
+    evaluateRule(course("COMP1100", { minimumMark: 65 }), student),
+  ).toMatchObject({ status: "met", detail: "You got 72 in COMP1100" });
+  expect(
+    evaluateRule(course("COMP2100", { minimumMark: 65 }), student).status,
+  ).toBe("unmet");
+  expect(
+    evaluateRule(course("MATH1005", { minimumMark: 65 }), student).status,
+  ).toBe("unknown");
+});
+
+test("a concurrent requisite is met by this semester's enrolment", () => {
+  expect(
+    evaluateRule(
+      course("COMP2310", { requirementMode: "completed_or_concurrent" }),
+      student,
+    ).status,
+  ).toBe("met");
+  expect(evaluateRule(course("COMP2310"), student).status).toBe("unmet");
+});
+
+test("WAM, GPA and year standing compare against the student's figures", () => {
+  expect(
+    evaluateRule({ ...base, kind: "wam", minimumWam: 70 }, student),
+  ).toMatchObject({
+    status: "unmet",
+    measure: { kind: "score", value: 68.4, threshold: 70, scale: "wam" },
+  });
+  expect(
+    evaluateRule({ ...base, kind: "gpa", minimumGpa: 5 }, student).status,
+  ).toBe("met");
+  expect(
+    evaluateRule({ ...base, kind: "year_standing", minimumYear: 3 }, student),
+  ).toMatchObject({ status: "unmet", detail: "You're in year 2" });
+  expect(
+    evaluateRule(
+      { ...base, kind: "wam", minimumWam: 70 },
+      { ...student, wam: null },
+    ).status,
+  ).toBe("unknown");
+});
+
+test("groups need the number of children their operator asks for", () => {
+  const atLeastTwo: CourseRuleExpression = {
+    kind: "group",
+    operator: "at_least",
+    minimumCount: 2,
+    conditions: [course("COMP1100"), course("COMP2100"), course("COMP2300")],
+  };
+  expect(evaluateRule(atLeastTwo, student)).toEqual({
+    status: "met",
+    measure: { kind: "count", value: 2, target: 2 },
+  });
+  const both: CourseRuleExpression = {
+    kind: "group",
+    operator: "all_of",
+    minimumCount: null,
+    conditions: [course("COMP1100"), course("COMP2300")],
+  };
+  expect(evaluateRule(both, student).status).toBe("partial");
+});
+
+test("an incompatibility is met only while the other course is not completed", () => {
+  expect(
+    evaluateRule({ ...base, kind: "incompatible", code: "COMP1140" }, student)
+      .status,
+  ).toBe("met");
+  expect(
+    evaluateRule({ ...base, kind: "incompatible", code: "COMP1100" }, student)
+      .status,
+  ).toBe("unmet");
+});
+
+test("the student record takes marks and enrolments from the plan", () => {
+  const record = studentRecord({
+    attempts: [
+      {
+        id: "1",
+        courseCode: "COMP1100",
+        termId: "t1",
+        status: "completed",
+        mark: 80,
+        unitsEarned: 6,
+      },
+      {
+        id: "2",
+        courseCode: "COMP1600",
+        termId: "t1",
+        status: "completed",
+        mark: 60,
+        unitsEarned: 6,
+      },
+      { id: "3", courseCode: "COMP2310", termId: "t2", status: "enrolled" },
+    ],
+    commencementYear: null,
+    completedCourses: [
+      { code: "COMP1100", units: 6 },
+      { code: "COMP1600", units: 6 },
+    ],
+    programmeCodes: ["aacom"],
+  });
+  expect(record.completed.get("COMP1100")).toEqual({
+    units: 6,
+    mark: 80,
+    tags: [],
+  });
+  expect(record.enrolled.has("COMP2310")).toBe(true);
+  expect(record.programmeCodes).toEqual(["AACOM"]);
+  expect(record.wam).toBe(70);
+  expect(record.studyYear).toBeNull();
+});
+
+test("tagged units count completed courses carrying the tag, however it is cased", () => {
+  const tagged: StudentRecord = {
+    ...student,
+    completed: new Map([
+      ["PHYS1101", { units: 6, mark: 70, tags: ["science"] }],
+      ["CHEM1101", { units: 6, mark: 70, tags: ["Science", "Laboratory"] }],
+      ["ARTH1001", { units: 6, mark: 70, tags: ["Arts"] }],
+    ]),
+  };
+  expect(
+    evaluateRule(
+      { ...base, kind: "tagged_units", tag: "Science", units: 18 },
+      tagged,
+    ),
+  ).toEqual({
+    status: "partial",
+    measure: { kind: "units", value: 12, target: 18 },
+  });
+});
diff --git a/apps/web/tests/requisite-rule-summary.test.tsx b/apps/web/tests/requisite-rule-summary.test.tsx
deleted file mode 100644
index 6ce5b5a2..00000000
--- a/apps/web/tests/requisite-rule-summary.test.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { expect, test } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { TooltipProvider } from "@coursemap/ui/primitives/tooltip";
-import { RequisiteRuleSummary } from "@/ui/courses/requisite-summary";
-import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
-
-const base = {
-  confidence: 1,
-  hardness: "hard" as const,
-  reviewState: "automatic" as const,
-  sourceText: "",
-};
-
-function renderSummary(expression: CourseRuleExpression) {
-  render(
-    <TooltipProvider>
-      <RequisiteRuleSummary
-        academicYear={2026}
-        expression={expression}
-        availableCourseCodes={new Set(["COMP1600"])}
-      />
-    </TooltipProvider>,
-  );
-}
-
-test("reads the whole tree, including the kinds the narrow summary drops", () => {
-  renderSummary({
-    kind: "group",
-    operator: "all_of",
-    minimumCount: null,
-    conditions: [
-      { ...base, kind: "subject_units", subject: "COMP", units: 24 },
-      { ...base, kind: "year_standing", minimumYear: 3 },
-      {
-        kind: "group",
-        operator: "any_of",
-        minimumCount: null,
-        conditions: [
-          { ...base, kind: "subject_units", subject: "MATH", units: 6 },
-          {
-            ...base,
-            kind: "course",
-            code: "COMP1600",
-            minimumMark: null,
-            requirementMode: "completed",
-          },
-        ],
-      },
-    ],
-  });
-  // Each group says what the reader needs, not a pair of near-identical
-  // "Complete ... of the following" headings.
-  expect(screen.getByText("You need all of these")).toBeInTheDocument();
-  expect(screen.getByText("You need one of these")).toBeInTheDocument();
-  // A unit rule leads with the figure rather than burying it under a category.
-  expect(screen.getByText("24 units of COMP courses")).toBeInTheDocument();
-  expect(screen.getByText("At least year 3 standing")).toBeInTheDocument();
-  // An alternative separates its options with "or", so it cannot read as a
-  // list of things to complete.
-  expect(screen.getByText("or")).toBeInTheDocument();
-  expect(screen.getByRole("link", { name: "COMP1600" })).toHaveAttribute(
-    "href",
-    "/courses/2026/comp1600",
-  );
-});
-
-test("an at_least group says how many of its options must be met", () => {
-  renderSummary({
-    kind: "group",
-    operator: "at_least",
-    minimumCount: 2,
-    conditions: [
-      { ...base, kind: "subject_units", subject: "COMP", units: 6 },
-      { ...base, kind: "subject_units", subject: "MATH", units: 6 },
-      { ...base, kind: "subject_units", subject: "STAT", units: 6 },
-    ],
-  });
-  expect(screen.getByText("You need at least 2 of these")).toBeInTheDocument();
-});
-
-test("an incompatibility is flagged rather than read as something to complete", () => {
-  renderSummary({ ...base, kind: "incompatible", code: "COMP6466" });
-  // The code is a link, so the sentence is split across elements.
-  expect(screen.getByText(/Cannot be counted with/)).toBeInTheDocument();
-  expect(
-    screen.getByLabelText("Incompatible", { selector: "svg" }),
-  ).toBeInTheDocument();
-});
diff --git a/apps/web/tests/requisite-samples.test.ts b/apps/web/tests/requisite-samples.test.ts
new file mode 100644
index 00000000..228c9843
--- /dev/null
+++ b/apps/web/tests/requisite-samples.test.ts
@@ -0,0 +1,62 @@
+import { expect, test } from "vitest";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import { evaluateRule } from "@/lib/coursemap/requisite-evaluation";
+import { sampleStudent } from "@/lib/coursemap/requisite-samples";
+
+const base = {
+  confidence: 1,
+  hardness: "hard" as const,
+  reviewState: "automatic" as const,
+  sourceText: "",
+};
+const course = (code: string): CourseRuleExpression => ({
+  ...base,
+  kind: "course",
+  code,
+  minimumMark: 65,
+  requirementMode: "completed",
+});
+
+const rule: CourseRuleExpression = {
+  kind: "group",
+  operator: "all_of",
+  minimumCount: null,
+  conditions: [
+    { ...base, kind: "units_total", subject: null, units: 72 },
+    { ...base, kind: "subject_units", subject: "COMP", units: 24 },
+    {
+      ...base,
+      kind: "level_units",
+      minimumLevel: 2000,
+      maximumLevel: null,
+      subject: "COMP",
+      units: 12,
+    },
+    {
+      kind: "group",
+      operator: "at_least",
+      minimumCount: 2,
+      conditions: [course("COMP2100"), course("COMP2120"), course("COMP2300")],
+    },
+    { ...base, kind: "wam", minimumWam: 70 },
+    { ...base, kind: "year_standing", minimumYear: 3 },
+    { ...base, kind: "structure", structureCode: "AACOM", text: null },
+  ],
+};
+
+test("the complete sample meets every checkable part of the rule", () => {
+  const student = sampleStudent(rule, "complete");
+  expect(evaluateRule(rule, student).status).toBe("met");
+});
+
+test("the partway sample is part of the way, not done or untouched", () => {
+  expect(evaluateRule(rule, sampleStudent(rule, "partway")).status).toBe(
+    "partial",
+  );
+});
+
+test("the new student has nothing on their record", () => {
+  const student = sampleStudent(rule, "new");
+  expect(student.completed.size).toBe(0);
+  expect(evaluateRule(rule, student).status).toBe("unmet");
+});
diff --git a/apps/web/tests/requisite-summary.test.mjs b/apps/web/tests/requisite-summary.test.mjs
deleted file mode 100644
index 8bda3bcb..00000000
--- a/apps/web/tests/requisite-summary.test.mjs
+++ /dev/null
@@ -1,148 +0,0 @@
-import assert from "node:assert/strict";
-
-import { test } from "vitest";
-
-const { evaluateRequisiteExpression } =
-  await import("../lib/coursemap/requisite-summary.ts");
-
-test("evaluates level and total unit progress from completed courses", () => {
-  const levelExpression = {
-    kind: "level_units",
-    units: 12,
-    level: 2000,
-    subject: "COMP",
-  };
-  assert.deepEqual(
-    evaluateRequisiteExpression(levelExpression, [
-      { code: "COMP2100F", units: 6 },
-      { code: "COMP2300P", units: 6 },
-      { code: "COMP1100", units: 6 },
-      { code: "MATH2222", units: 6 },
-    ]),
-    {
-      kind: "level_units",
-      level: 2000,
-      subject: "COMP",
-      requiredUnits: 12,
-      completedUnits: 12,
-      satisfied: true,
-    },
-  );
-
-  const totalExpression = { kind: "units_total", units: 24 };
-  assert.deepEqual(
-    evaluateRequisiteExpression(totalExpression, [
-      { code: "COMP1100", units: 6 },
-      { code: "MATH1005", units: 6 },
-    ]),
-    {
-      kind: "units_total",
-      requiredUnits: 24,
-      completedUnits: 12,
-      satisfied: false,
-    },
-  );
-});
-
-test("evaluates subject units and alternatives from completed courses only", () => {
-  const expression = {
-    kind: "group",
-    operator: "all_of",
-    conditions: [
-      { kind: "subject_units", subject: "COMP", units: 24 },
-      {
-        kind: "group",
-        operator: "any_of",
-        conditions: [
-          { kind: "subject_units", subject: "MATH", units: 6 },
-          { kind: "course", code: "COMP1600" },
-        ],
-      },
-    ],
-  };
-
-  assert.deepEqual(
-    evaluateRequisiteExpression(expression, [
-      { code: "COMP1100", units: 6 },
-      { code: "COMP1110", units: 6 },
-      { code: "COMP2100", units: 6 },
-      { code: "COMP2300", units: 6 },
-      { code: "MATH1005", units: 6 },
-    ]),
-    {
-      kind: "group",
-      operator: "all_of",
-      satisfied: true,
-      conditions: [
-        {
-          kind: "subject_units",
-          subject: "COMP",
-          requiredUnits: 24,
-          completedUnits: 24,
-          satisfied: true,
-        },
-        {
-          kind: "group",
-          operator: "any_of",
-          satisfied: true,
-          conditions: [
-            {
-              kind: "subject_units",
-              subject: "MATH",
-              requiredUnits: 6,
-              completedUnits: 6,
-              satisfied: true,
-            },
-            { kind: "course", code: "COMP1600", satisfied: false },
-          ],
-        },
-      ],
-    },
-  );
-});
-
-test("evaluates programme enrolment against the student's programmes", () => {
-  const expression = {
-    kind: "group",
-    operator: "all_of",
-    conditions: [
-      { kind: "course", code: "ACST4031" },
-      {
-        kind: "group",
-        operator: "any_of",
-        conditions: [
-          {
-            kind: "programme_enrolment",
-            code: "HACTS",
-            name: "Bachelor of Actuarial Studies (Honours)",
-          },
-          {
-            kind: "programme_enrolment",
-            code: "ASSAE",
-            name: "Bachelor of Social Sciences (Honours in Actuarial Studies and Economics)",
-          },
-        ],
-      },
-    ],
-  };
-
-  const enrolled = evaluateRequisiteExpression(
-    expression,
-    [{ code: "ACST4031", units: 6 }],
-    ["HACTS"],
-  );
-  assert.equal(enrolled.satisfied, true);
-
-  const notEnrolled = evaluateRequisiteExpression(
-    expression,
-    [{ code: "ACST4031", units: 6 }],
-    [],
-  );
-  assert.equal(notEnrolled.satisfied, false);
-  assert.deepEqual(notEnrolled.conditions[1].conditions[0], {
-    kind: "programme_enrolment",
-    code: "HACTS",
-    name: "Bachelor of Actuarial Studies (Honours)",
-    satisfied: false,
-  });
-});
diff --git a/apps/web/ui/admin/catalogue/version-preview.tsx b/apps/web/ui/admin/catalogue/version-preview.tsx
index d9cb3642..31581988 100644
--- a/apps/web/ui/admin/catalogue/version-preview.tsx
+++ b/apps/web/ui/admin/catalogue/version-preview.tsx
@@ -1,10 +1,14 @@
 "use client";
 
-import { Tabs } from "@coursemap/ui/primitives/tabs";
-import { useState } from "react";
+import { Tabs, TabsList, TabsTrigger } from "@coursemap/ui/primitives/tabs";
+import { useMemo, useState } from "react";
 
 import type { CatalogueContent } from "@/lib/catalogue/content";
 import type { CourseDetails } from "@/lib/coursemap/course-types";
+import {
+  sampleStudent,
+  type SampleStudent,
+} from "@/lib/coursemap/requisite-samples";
 import { structureDetailsFromWrite } from "@/lib/coursemap/structure-version-view";
 import {
   CourseDetailTabsList,
@@ -20,19 +24,58 @@ import {
 
 const EMPTY = { completedCourses: [], isAuthenticated: false };
 
-/** The student view of a course snapshot, rendered from its projection. */
+const PREVIEW_READERS = [
+  { value: "signed-out", label: "Signed out" },
+  { value: "new", label: "New student" },
+  { value: "partway", label: "Partway" },
+  { value: "complete", label: "Meets everything" },
+] as const;
+
+type PreviewReader = (typeof PREVIEW_READERS)[number]["value"];
+
+/**
+ * The student view of a course snapshot, rendered from its projection. The
+ * reader switch fills the requisites with a made-up student built from this
+ * course's own rule, so every progress state can be checked without a real
+ * record.
+ */
 export function CoursePreview({ course }: { course: CourseDetails }) {
   const [tab, setTab] = useState<CourseTab>("overview");
+  const [reader, setReader] = useState<PreviewReader>("signed-out");
+  const rule = course.prerequisiteRule?.relationalExpression ?? null;
+  const student = useMemo(
+    () =>
+      reader === "signed-out"
+        ? null
+        : sampleStudent(rule, reader as SampleStudent),
+    [reader, rule],
+  );
   return (
     <Tabs
       value={tab}
       onValueChange={(value) => setTab(value as CourseTab)}
       className="block"
     >
-      <div className="mb-4 overflow-x-auto">
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3 overflow-x-auto">
         <CourseDetailTabsList />
+        <Tabs
+          value={reader}
+          onValueChange={(value) => setReader(value as PreviewReader)}
+        >
+          <TabsList aria-label="Preview as">
+            {PREVIEW_READERS.map((option) => (
+              <TabsTrigger key={option.value} value={option.value}>
+                {option.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
       </div>
-      <CourseDetailView course={course} requisiteCompletion={EMPTY} />
+      <CourseDetailView
+        course={course}
+        previewStudent={student}
+        requisiteCompletion={EMPTY}
+      />
     </Tabs>
   );
 }
diff --git a/apps/web/ui/courses/course-detail-client.tsx b/apps/web/ui/courses/course-detail-client.tsx
index 4ba2e60d..589b49fa 100644
--- a/apps/web/ui/courses/course-detail-client.tsx
+++ b/apps/web/ui/courses/course-detail-client.tsx
@@ -63,6 +63,7 @@ export function CourseDetailClient({
       <AppShell tabs={<CourseDetailTabsList />}>
         <CourseDetailView
           attempts={state.attempts}
+          commencementYear={state.profile.commencementYear}
           course={course}
           onAddToPlan={() => setPlanOpen(true)}
           requisiteCompletion={requisiteCompletion}
diff --git a/apps/web/ui/courses/course-detail-view.tsx b/apps/web/ui/courses/course-detail-view.tsx
index dc53e0ff..d00b9bb3 100644
--- a/apps/web/ui/courses/course-detail-view.tsx
+++ b/apps/web/ui/courses/course-detail-view.tsx
@@ -32,6 +32,7 @@ import {
   BookOpen,
   Banknote,
   CalendarClock,
+  ChevronRight,
   ArrowUpRight,
   ClipboardCheck,
   GitBranch,
@@ -42,14 +43,13 @@ import {
   Plus,
 } from "lucide-react";
 import { Hint } from "@/ui/common/hint";
-import { PrereqGraph } from "@/ui/prereq-graph";
 import type { CourseDetails } from "@/lib/coursemap/course-types";
-import { requirementCourseStatus } from "@/lib/coursemap/requirement-display";
 import type { Attempt } from "@/lib/coursemap/types";
+import type { CompletedRequisiteCourse } from "@/lib/coursemap/requisite-summary";
 import {
-  evaluateRequisiteExpression,
-  type CompletedRequisiteCourse,
-} from "@/lib/coursemap/requisite-summary";
+  studentRecord,
+  type StudentRecord,
+} from "@/lib/coursemap/requisite-evaluation";
 import {
   feeValue,
   formatDate,
@@ -59,11 +59,9 @@ import {
   unitValueLabel,
 } from "@/ui/courses/course-detail-format";
 import { CourseReferenceText } from "@/ui/courses/course-reference";
-import {
-  RequisiteExpressionSummary,
-  RequisiteProgressSummary,
-  RequisiteRuleSummary,
-} from "@/ui/courses/requisite-summary";
+import { EnrolmentSteps } from "@/ui/courses/enrolment-steps";
+import { RequisiteDiagram } from "@/ui/courses/requisite-diagram";
+import { RequisiteExpressionSummary } from "@/ui/courses/requisite-summary";
 
 export const courseDetailTabs = [
   { id: "overview", label: "Overview", icon: BookOpen },
@@ -107,14 +105,23 @@ const NO_ATTEMPTS: readonly Attempt[] = [];
  */
 export function CourseDetailView({
   attempts = NO_ATTEMPTS,
+  commencementYear = null,
   course,
   onAddToPlan,
+  previewStudent,
   requisiteCompletion,
 }: {
-  /** The reader's own plan, so the graph can mark what they have done. */
+  /** The reader's own plan, so the requisites can mark what they have done. */
   attempts?: readonly Attempt[];
+  /** The year the reader started their degree, for year-standing rules. */
+  commencementYear?: number | null;
   course: CourseDetails;
   onAddToPlan?: () => void;
+  /**
+   * A sample student for the admin preview. When given, it replaces the
+   * reader's own record, and null previews a signed-out reader.
+   */
+  previewStudent?: StudentRecord | null;
   requisiteCompletion: {
     completedCourses: CompletedRequisiteCourse[];
     enrolledProgrammeCodes?: string[];
@@ -124,21 +131,17 @@ export function CourseDetailView({
   const availableCourseCodes = new Set(course.availableCourseCodes);
   const structuredRule = course.prerequisiteRule?.expression ?? null;
   const relationalRule = course.prerequisiteRule?.relationalExpression ?? null;
-  const statusByCode = new Map(
-    [...new Set(attempts.map((attempt) => attempt.courseCode))].flatMap(
-      (attemptCode) => {
-        const status = requirementCourseStatus(attemptCode, attempts);
-        return status ? [[attemptCode, status] as const] : [];
-      },
-    ),
-  );
-  const requisiteProgress = structuredRule
-    ? evaluateRequisiteExpression(
-        structuredRule,
-        requisiteCompletion.completedCourses,
-        requisiteCompletion.enrolledProgrammeCodes ?? [],
-      )
-    : null;
+  const student =
+    previewStudent !== undefined
+      ? previewStudent
+      : requisiteCompletion.isAuthenticated
+        ? studentRecord({
+            attempts,
+            commencementYear,
+            completedCourses: requisiteCompletion.completedCourses,
+            programmeCodes: requisiteCompletion.enrolledProgrammeCodes ?? [],
+          })
+        : null;
   const hasPrerequisiteWording =
     course.prerequisiteText.trim().length > 0 &&
     !/^No prerequisites listed\.?$/iu.test(course.prerequisiteText.trim());
@@ -503,138 +506,136 @@ export function CourseDetailView({
             </CardTitle>
           </CardHeader>
           <CardContent className="border-t border-border/60 px-0 pt-5 pb-0">
-            <PrereqGraph
+            <RequisiteDiagram
               academicYear={course.year}
               availableCourseCodes={availableCourseCodes}
               code={course.code}
               expression={relationalRule}
               hasPrerequisiteWording={hasPrerequisiteWording}
-              prerequisiteEdges={course.prerequisiteEdges}
-              showStudentState={
-                requisiteCompletion.isAuthenticated || attempts.length > 0
-              }
-              statusByCode={statusByCode}
+              student={student}
+              unlocks={course.prerequisiteEdges
+                .filter(
+                  (edge) =>
+                    edge.from === course.code && edge.to !== course.code,
+                )
+                .map((edge) => ({
+                  code: edge.to,
+                  isAvailable: edge.toIsAvailable,
+                }))}
               unlocksAreKnown={course.unlocksAreKnown}
             />
           </CardContent>
         </Card>
 
-        <Card>
-          <CardHeader className="flex-col gap-3 sm:flex-row">
+        <Card className="gap-0 pb-0">
+          <CardHeader className="pb-4">
             <CardTitle>
-              <h2>{"Requisites and compatibility"}</h2>
+              <h2>{"Enrolment requirements"}</h2>
             </CardTitle>
           </CardHeader>
-          <CardContent className="space-y-5 border-t border-border/60 pt-5 text-[13px] leading-relaxed text-foreground/80">
-            {requisiteProgress && requisiteCompletion.isAuthenticated ? (
-              <div>
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Prerequisites against your completed courses
-                </h3>
-                <div className="mt-2">
-                  <RequisiteProgressSummary
-                    academicYear={course.year}
-                    progress={requisiteProgress}
-                    availableCourseCodes={availableCourseCodes}
-                  />
-                </div>
-              </div>
-            ) : relationalRule ? (
-              <div>
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Prerequisite requirements
-                </h3>
-                <div className="mt-2">
-                  <RequisiteRuleSummary
-                    academicYear={course.year}
-                    expression={relationalRule}
-                    availableCourseCodes={availableCourseCodes}
-                  />
-                </div>
-              </div>
+          <CardContent className="border-t border-border/60 p-0 text-[13px] leading-relaxed text-foreground/80">
+            {relationalRule ? (
+              <EnrolmentSteps
+                academicYear={course.year}
+                availableCourseCodes={availableCourseCodes}
+                expression={relationalRule}
+                student={student}
+              />
             ) : structuredRule ? (
-              <div>
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Coursemap summary
-                </h3>
-                <div className="mt-2">
-                  <RequisiteExpressionSummary
-                    academicYear={course.year}
-                    expression={structuredRule}
-                    availableCourseCodes={availableCourseCodes}
-                  />
-                </div>
-              </div>
-            ) : null}
-            <div>
-              <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                Prerequisites as published
-              </h3>
-              <p className="mt-2 whitespace-pre-line">
-                <CourseReferenceText
+              <div className="px-6 py-5">
+                <RequisiteExpressionSummary
                   academicYear={course.year}
-                  text={course.prerequisiteText}
+                  expression={structuredRule}
                   availableCourseCodes={availableCourseCodes}
                 />
-              </p>
-            </div>
-            {course.corequisiteText ? (
-              <div className="border-t border-border/60 pt-5">
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Corequisites
-                </h3>
-                <p className="mt-2 whitespace-pre-line">
-                  <CourseReferenceText
-                    academicYear={course.year}
-                    text={course.corequisiteText}
-                    availableCourseCodes={availableCourseCodes}
-                  />
-                </p>
-              </div>
-            ) : null}
-            {course.inherentRequirements ? (
-              <div className="border-t border-border/60 pt-5">
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Inherent requirements
-                </h3>
-                <p className="mt-2 whitespace-pre-line">
-                  {course.inherentRequirements}
-                </p>
               </div>
-            ) : null}
-            {course.assumedKnowledgeText ? (
-              <div className="border-t border-border/60 pt-5">
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Assumed knowledge
-                </h3>
-                <p className="mt-2 whitespace-pre-line">
-                  {course.assumedKnowledgeText}
-                </p>
-              </div>
-            ) : null}
-            {course.permissionText ? (
-              <div className="border-t border-border/60 pt-5">
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Permission
-                </h3>
-                <p className="mt-2 whitespace-pre-line">
-                  {course.permissionText}
-                </p>
-              </div>
-            ) : null}
-            {course.incompatibilityText ? (
-              <div className="border-t border-border/60 pt-5">
-                <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                  Incompatibilities
+            ) : (
+              <div className="px-6 py-5">
+                <h3 className="text-sm font-semibold text-foreground">
+                  Prerequisites
                 </h3>
                 <p className="mt-2 whitespace-pre-line">
                   <CourseReferenceText
                     academicYear={course.year}
-                    text={course.incompatibilityText}
+                    text={course.prerequisiteText}
                     availableCourseCodes={availableCourseCodes}
                   />
                 </p>
               </div>
+            )}
+            {[
+              {
+                title: "Corequisites",
+                text: course.corequisiteText,
+                linked: true,
+              },
+              {
+                title: "Assumed knowledge",
+                text: course.assumedKnowledgeText,
+                linked: false,
+              },
+              {
+                title: "Inherent requirements",
+                text: course.inherentRequirements,
+                linked: false,
+              },
+            ].map((section) =>
+              section.text ? (
+                <section
+                  key={section.title}
+                  className="border-t border-border/60 px-6 py-5"
+                >
+                  <h3 className="text-sm font-semibold text-foreground">
+                    {section.title}
+                  </h3>
+                  <p className="mt-2 whitespace-pre-line">
+                    {section.linked ? (
+                      <CourseReferenceText
+                        academicYear={course.year}
+                        text={section.text}
+                        availableCourseCodes={availableCourseCodes}
+                      />
+                    ) : (
+                      section.text
+                    )}
+                  </p>
+                </section>
+              ) : null,
+            )}
+            {/* The steps are Coursemap's reading of ANU's wording, so the
+                wording stays one click away to check them against. */}
+            {relationalRule ||
+            structuredRule ||
+            course.permissionText ||
+            course.incompatibilityText ? (
+              <details className="group border-t border-border/60 px-6 py-4">
+                <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden">
+                  <ChevronRight
+                    className="size-3.5 transition-transform group-open:rotate-90 motion-reduce:transition-none"
+                    aria-hidden="true"
+                  />
+                  ANU&apos;s wording
+                </summary>
+                <div className="mt-3 flex flex-col gap-3 border-l-2 border-border pl-3 text-xs text-muted-foreground">
+                  {[
+                    relationalRule || structuredRule
+                      ? course.prerequisiteText
+                      : "",
+                    course.permissionText,
+                    course.incompatibilityText,
+                  ]
+                    .filter((text): text is string => Boolean(text?.trim()))
+                    .map((text, index) => (
+                      <p key={index} className="whitespace-pre-line">
+                        <CourseReferenceText
+                          academicYear={course.year}
+                          text={text}
+                          availableCourseCodes={availableCourseCodes}
+                        />
+                      </p>
+                    ))}
+                </div>
+              </details>
             ) : null}
           </CardContent>
         </Card>
diff --git a/apps/web/ui/courses/enrolment-steps.tsx b/apps/web/ui/courses/enrolment-steps.tsx
new file mode 100644
index 00000000..04b57894
--- /dev/null
+++ b/apps/web/ui/courses/enrolment-steps.tsx
@@ -0,0 +1,547 @@
+import Link from "next/link";
+import {
+  ArrowUpRight,
+  Check,
+  CircleSlash,
+  Info,
+  KeyRound,
+  X,
+} from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "@/lib/cn";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import {
+  evaluateRule,
+  groupRequiredCount,
+  type ConditionEvaluation,
+  type RequisiteStatus,
+  type StudentRecord,
+} from "@/lib/coursemap/requisite-evaluation";
+import type { CourseRuleCondition } from "@/lib/coursemap/requisite-tree";
+import {
+  groupSentence,
+  requisiteExplorerLink,
+  requisiteNoun,
+  requisiteSentence,
+  splitRequisiteRule,
+} from "@/ui/courses/requisite-wording";
+
+type Group = Extract<CourseRuleExpression, { kind: "group" }>;
+type Marker = RequisiteStatus | "permission" | "note" | "blocked";
+type ChipState = "done" | "enrolled" | "todo";
+
+type Step = {
+  title: string;
+  /** The explorer, filtered to the courses that count towards this step. */
+  link?: { href: string; label: string } | null;
+  marker: Marker;
+  counted: boolean;
+  body: ReactNode;
+};
+
+function Chip({
+  code,
+  state,
+  href,
+}: {
+  code: string;
+  state: ChipState;
+  href: string | null;
+}) {
+  const className = cn(
+    "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 font-mono text-xs font-semibold",
+    state === "done"
+      ? "border-success/40 bg-success/10 text-success"
+      : state === "enrolled"
+        ? "border-primary/40 bg-primary/10 text-primary"
+        : href
+          ? "border-border bg-card text-primary hover:border-primary/50"
+          : "border-border bg-muted/40 text-muted-foreground",
+  );
+  const content = (
+    <>
+      {state === "done" ? (
+        <Check className="size-3" strokeWidth={3} aria-hidden="true" />
+      ) : null}
+      {state === "enrolled" ? (
+        <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
+      ) : null}
+      {code}
+      {state === "done" ? <span className="sr-only"> (done)</span> : null}
+      {state === "enrolled" ? (
+        <span className="sr-only"> (enrolled this semester)</span>
+      ) : null}
+    </>
+  );
+  return href ? (
+    <Link href={href} prefetch={false} className={className}>
+      {content}
+    </Link>
+  ) : (
+    <span className={className}>{content}</span>
+  );
+}
+
+function UnitsBar({ value, target }: { value: number; target: number }) {
+  const met = value >= target;
+  return (
+    <div className="flex max-w-md flex-col gap-1.5">
+      <div
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={target}
+        aria-valuenow={Math.min(value, target)}
+        aria-label="Units completed"
+        className="h-1.5 overflow-hidden rounded-full bg-muted-foreground/20"
+      >
+        <div
+          className={cn(
+            "h-full rounded-full",
+            met ? "bg-success" : "bg-primary",
+          )}
+          style={{ width: `${Math.min(100, (value / target) * 100)}%` }}
+        />
+      </div>
+      <p className="text-xs text-muted-foreground">
+        <span className="font-medium text-foreground tabular-nums">
+          {value}
+        </span>{" "}
+        of <span className="tabular-nums">{target}</span> units
+        {met ? " · done" : ` · ${target - value} to go`}
+      </p>
+    </div>
+  );
+}
+
+function ScoreScale({
+  value,
+  threshold,
+  scale,
+}: {
+  value: number;
+  threshold: number;
+  scale: "wam" | "gpa";
+}) {
+  const max = scale === "wam" ? 100 : 7;
+  const digits = 1;
+  const at = (n: number) => `${Math.min(100, Math.max(0, (n / max) * 100))}%`;
+  const met = value >= threshold;
+  const label = scale === "wam" ? "WAM" : "GPA";
+  return (
+    <div className="flex max-w-md flex-col gap-1.5">
+      <div className="relative mt-5 h-1.5 rounded-full bg-muted-foreground/20">
+        <div
+          className={cn(
+            "absolute inset-y-0 left-0 rounded-full",
+            met ? "bg-success" : "bg-warning",
+          )}
+          style={{ width: at(value) }}
+        />
+        <div
+          aria-hidden="true"
+          className="absolute -top-1.5 -bottom-1.5 w-0.5 bg-foreground/70"
+          style={{ left: at(threshold) }}
+        />
+        <span
+          aria-hidden="true"
+          className="absolute -top-5.5 -translate-x-1/2 text-[10px] font-semibold whitespace-nowrap text-foreground/80"
+          style={{ left: at(threshold) }}
+        >
+          {threshold.toFixed(digits)} needed
+        </span>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Your {label} is{" "}
+        <span
+          className={cn(
+            "font-medium tabular-nums",
+            met ? "text-success" : "text-warning",
+          )}
+        >
+          {value.toFixed(digits)}
+        </span>
+        {met ? "" : ` · ${(threshold - value).toFixed(digits)} below`}
+      </p>
+    </div>
+  );
+}
+
+function StateLine({ met, text }: { met: boolean; text: string }) {
+  return (
+    <p
+      className={cn(
+        "flex items-center gap-1.5 text-xs",
+        met ? "text-success" : "text-warning",
+      )}
+    >
+      {met ? (
+        <Check className="size-3.5" strokeWidth={3} aria-hidden="true" />
+      ) : (
+        <X className="size-3.5" strokeWidth={3} aria-hidden="true" />
+      )}
+      {text}
+    </p>
+  );
+}
+
+function MarkerIcon({ marker, index }: { marker: Marker; index: number }) {
+  const base =
+    "relative z-10 grid size-6 shrink-0 place-items-center rounded-full text-[11px] font-semibold";
+  if (marker === "met")
+    return (
+      <span className={cn(base, "bg-success text-white")}>
+        <Check className="size-3.5" strokeWidth={3} aria-hidden="true" />
+        <span className="sr-only">Met</span>
+      </span>
+    );
+  if (marker === "partial")
+    return (
+      <span
+        className={cn(
+          base,
+          "border-2 border-warning bg-background text-warning",
+        )}
+      >
+        {index}
+        <span className="sr-only">, partly met</span>
+      </span>
+    );
+  if (marker === "permission")
+    return (
+      <span className={cn(base, "bg-warning/15 text-warning")}>
+        <KeyRound className="size-3.5" aria-hidden="true" />
+      </span>
+    );
+  if (marker === "note")
+    return (
+      <span className={cn(base, "bg-muted text-muted-foreground")}>
+        <Info className="size-3.5" aria-hidden="true" />
+      </span>
+    );
+  if (marker === "blocked")
+    return (
+      <span className={cn(base, "bg-warning/15 text-warning")}>
+        <CircleSlash className="size-3.5" aria-hidden="true" />
+      </span>
+    );
+  return (
+    <span
+      className={cn(base, "border border-border bg-card text-muted-foreground")}
+    >
+      {index}
+    </span>
+  );
+}
+
+const CHIP_ORDER: Record<ChipState, number> = { done: 0, enrolled: 1, todo: 2 };
+
+/** Done first, then this semester's, so progress reads left to right. */
+function sortChips<T extends { state: ChipState }>(chips: T[]) {
+  return [...chips].sort(
+    (left, right) => CHIP_ORDER[left.state] - CHIP_ORDER[right.state],
+  );
+}
+
+function courseState(code: string, student: StudentRecord | null): ChipState {
+  if (!student) return "todo";
+  if (student.completed.has(code)) return "done";
+  if (student.enrolled.has(code)) return "enrolled";
+  return "todo";
+}
+
+export function EnrolmentSteps({
+  academicYear,
+  availableCourseCodes,
+  expression,
+  student,
+}: {
+  academicYear: number;
+  availableCourseCodes: ReadonlySet<string>;
+  expression: CourseRuleExpression;
+  /** Null when signed out: the steps show, the progress does not. */
+  student: StudentRecord | null;
+}) {
+  const { requirements, permissions, notes, incompatible } =
+    splitRequisiteRule(expression);
+  const href = (code: string) =>
+    availableCourseCodes.has(code)
+      ? `/courses/${academicYear}/${code.toLowerCase()}`
+      : null;
+  const evaluate = (node: CourseRuleExpression): ConditionEvaluation | null =>
+    student ? evaluateRule(node, student) : null;
+
+  const courseChips = (list: readonly string[]) => (
+    <div className="flex flex-wrap items-center gap-1.5">
+      {sortChips(
+        list.map((code) => ({ code, state: courseState(code, student) })),
+      ).map((chip) => (
+        <Chip
+          key={chip.code}
+          code={chip.code}
+          state={chip.state}
+          href={href(chip.code)}
+        />
+      ))}
+    </div>
+  );
+
+  const conditionBody = (
+    condition: CourseRuleCondition,
+    result: ConditionEvaluation | null,
+  ): ReactNode => {
+    const measure = result?.measure;
+    switch (condition.kind) {
+      case "course":
+        return (
+          <>
+            {courseChips([condition.code])}
+            {result?.detail ? (
+              <StateLine met={result.status === "met"} text={result.detail} />
+            ) : null}
+          </>
+        );
+      case "course_set_units":
+        return (
+          <>
+            {courseChips(condition.courseCodes)}
+            {measure?.kind === "units" ? (
+              <UnitsBar value={measure.value} target={measure.target} />
+            ) : null}
+          </>
+        );
+      case "units_total":
+      case "subject_units":
+      case "level_units":
+      case "tagged_units":
+        return measure?.kind === "units" ? (
+          <UnitsBar value={measure.value} target={measure.target} />
+        ) : null;
+      case "wam":
+      case "gpa":
+        return measure?.kind === "score" ? (
+          <ScoreScale
+            value={measure.value}
+            threshold={measure.threshold}
+            scale={measure.scale}
+          />
+        ) : null;
+      case "structure_set":
+        return (
+          <div className="flex flex-wrap gap-1.5">
+            {sortChips(
+              condition.structureCodes.map((code) => ({
+                code,
+                state: (student?.programmeCodes.includes(code)
+                  ? "done"
+                  : "todo") as ChipState,
+              })),
+            ).map((chip) => (
+              <Chip
+                key={chip.code}
+                code={chip.code}
+                state={chip.state}
+                href={null}
+              />
+            ))}
+          </div>
+        );
+      case "elective_units":
+        return student ? (
+          <p className="text-xs text-muted-foreground">
+            Your record can&apos;t be checked against this yet.
+          </p>
+        ) : null;
+      default:
+        return result?.detail ? (
+          <StateLine met={result.status === "met"} text={result.detail} />
+        ) : null;
+    }
+  };
+
+  const groupBody = (group: Group, result: ConditionEvaluation | null) => {
+    if (group.conditions.every((child) => child.kind === "course")) {
+      const needed = groupRequiredCount(group);
+      return (
+        <div className="flex flex-wrap items-center gap-1.5">
+          {courseChips(
+            group.conditions.map((child) =>
+              child.kind === "course" ? child.code : "",
+            ),
+          )}
+          {student && needed > 1 && result?.measure?.kind === "count" ? (
+            <span className="ml-1 text-xs text-muted-foreground">
+              {result.measure.value} of {needed} done
+            </span>
+          ) : null}
+        </div>
+      );
+    }
+    const choice = group.operator !== "all_of";
+    return (
+      <div className="flex max-w-xl flex-col">
+        {group.conditions.map((child, index) => {
+          const met = evaluate(child)?.status === "met";
+          const lines =
+            child.kind === "group"
+              ? child.conditions.map((grandchild, lineIndex) =>
+                  grandchild.kind === "group"
+                    ? groupSentence(grandchild)
+                    : `${lineIndex > 0 ? (child.operator === "all_of" ? "and " : "or ") : ""}${requisiteNoun(grandchild)}`,
+                )
+              : [requisiteNoun(child)];
+          return (
+            <div key={index}>
+              {index > 0 ? (
+                <div
+                  aria-hidden="true"
+                  className={cn(
+                    "flex items-center gap-2 py-1.5 text-[10px] font-bold tracking-wider uppercase",
+                    choice ? "text-primary" : "text-muted-foreground",
+                  )}
+                >
+                  <span className="h-px flex-1 bg-border" />
+                  {choice ? "or" : "and"}
+                  <span className="h-px flex-1 bg-border" />
+                </div>
+              ) : null}
+              <div
+                className={cn(
+                  "rounded-lg border px-3 py-2",
+                  met
+                    ? "border-success/40 bg-success/5"
+                    : "border-border bg-card",
+                )}
+              >
+                <p className="flex items-center justify-between gap-2 text-xs font-semibold text-foreground">
+                  Option {String.fromCharCode(65 + index)}
+                  {met ? (
+                    <span className="flex items-center gap-1 text-success">
+                      <Check
+                        className="size-3.5"
+                        strokeWidth={3}
+                        aria-hidden="true"
+                      />
+                      You meet this
+                    </span>
+                  ) : null}
+                </p>
+                <ul className="mt-1 flex flex-col gap-0.5 text-xs text-foreground/80">
+                  {lines.map((line, lineIndex) => (
+                    <li key={lineIndex}>{line}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const steps: Step[] = [
+    ...requirements.map((node): Step => {
+      const result = evaluate(node);
+      return {
+        title:
+          node.kind === "group" ? groupSentence(node) : requisiteSentence(node),
+        link:
+          node.kind === "group"
+            ? null
+            : requisiteExplorerLink(node, academicYear),
+        marker: result?.status ?? "unmet",
+        counted: true,
+        body:
+          node.kind === "group"
+            ? groupBody(node, result)
+            : conditionBody(node, result),
+      };
+    }),
+    ...permissions.map((text): Step => ({
+      title: "Get permission to enrol",
+      marker: "permission",
+      counted: false,
+      body: <p className="text-muted-foreground">{text}</p>,
+    })),
+    ...notes.map((text): Step => ({
+      title: "Also required",
+      marker: "note",
+      counted: false,
+      body: <p className="text-muted-foreground">{text}</p>,
+    })),
+    ...incompatible.map((code): Step => {
+      const clear = student ? !student.completed.has(code) : null;
+      return {
+        title: `You can't take this if you've completed ${code}`,
+        marker: clear === null ? "blocked" : clear ? "met" : "blocked",
+        counted: student !== null,
+        body:
+          clear === null ? null : (
+            <StateLine
+              met={clear}
+              text={
+                clear
+                  ? `You haven't completed ${code}`
+                  : `You have completed ${code}`
+              }
+            />
+          ),
+      };
+    }),
+  ];
+
+  if (steps.length === 0) return null;
+  const counted = steps.filter((step) => step.counted);
+  const met = counted.filter((step) => step.marker === "met").length;
+
+  return (
+    <div className="text-[13px]">
+      <div className="flex items-center justify-between gap-3 border-b border-border/60 px-6 py-3">
+        <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
+          {steps.length === 1 ? "Required" : `All ${steps.length} required`}
+        </p>
+        {student ? (
+          <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-semibold text-foreground/80 tabular-nums">
+            {met} of {counted.length} met
+          </span>
+        ) : (
+          <span className="text-[11px] text-muted-foreground">
+            Sign in to see your progress
+          </span>
+        )}
+      </div>
+      <ol className="px-6 py-5">
+        {steps.map((step, index) => (
+          <li key={index} className="relative flex gap-3 pb-6 last:pb-0">
+            {index < steps.length - 1 ? (
+              <span
+                aria-hidden="true"
+                className="absolute top-7 bottom-1 left-3 w-px bg-border"
+              />
+            ) : null}
+            <MarkerIcon marker={step.marker} index={index + 1} />
+            <div className="flex min-w-0 flex-1 flex-col gap-2 pt-0.5">
+              {step.link ? (
+                <Link
+                  href={step.link.href}
+                  prefetch={false}
+                  title={step.link.label}
+                  className="group/step inline-flex w-fit items-center gap-1 font-medium text-foreground underline-offset-4 hover:text-primary hover:underline"
+                >
+                  {step.title}
+                  <ArrowUpRight
+                    className="size-3.5 text-muted-foreground transition-colors group-hover/step:text-primary motion-reduce:transition-none"
+                    aria-hidden="true"
+                  />
+                  <span className="sr-only">. {step.link.label}</span>
+                </Link>
+              ) : (
+                <p className="font-medium text-foreground">{step.title}</p>
+              )}
+              {step.body}
+            </div>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}
diff --git a/apps/web/ui/courses/requisite-diagram.tsx b/apps/web/ui/courses/requisite-diagram.tsx
new file mode 100644
index 00000000..fa2f8fc4
--- /dev/null
+++ b/apps/web/ui/courses/requisite-diagram.tsx
@@ -0,0 +1,592 @@
+import Link from "next/link";
+import {
+  ArrowUpRight,
+  CalendarRange,
+  Check,
+  CircleAlert,
+  GaugeCircle,
+  GraduationCap,
+  Info,
+  KeyRound,
+  LockKeyhole,
+  TrendingUp,
+} from "lucide-react";
+import type { CSSProperties } from "react";
+import { cn } from "@/lib/cn";
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import {
+  evaluateRule,
+  type StudentRecord,
+} from "@/lib/coursemap/requisite-evaluation";
+import type { CourseRuleCondition } from "@/lib/coursemap/requisite-tree";
+import {
+  groupLabel,
+  requisiteExplorerLink,
+  requisiteNoun,
+  splitRequisiteRule,
+} from "@/ui/courses/requisite-wording";
+
+/*
+ * Drawn from fixed geometry rather than measured layout, so every line meets
+ * the centre of the box it joins and there is one arrowhead per box.
+ */
+const CARD = 44;
+const CARD_GAP = 8;
+const HEADER = 24;
+const JOINER = 26;
+const PAD = 8;
+const BORDER = 2;
+const ENTRY_GAP = 16;
+const COURSE_H = 48;
+const REQUIRES_W = 220;
+const MERGE_GAP = 40;
+const COURSE_W = 160;
+const UNLOCK_GAP = 64;
+const UNLOCK_W = 150;
+const EMPTY_H = 46;
+
+type Group = Extract<CourseRuleExpression, { kind: "group" }>;
+
+function heightOf(node: CourseRuleExpression): number {
+  if (node.kind !== "group") return CARD;
+  return (
+    BORDER +
+    PAD * 2 +
+    HEADER +
+    node.conditions.reduce((total, child) => total + heightOf(child), 0) +
+    (node.conditions.length - 1) * JOINER
+  );
+}
+
+/** Met is the checklist's own verdict, so the graph and the steps agree. */
+const isMet = (node: CourseRuleExpression, student: StudentRecord | null) =>
+  student ? evaluateRule(node, student).status === "met" : false;
+
+const courseHref = (year: number, code: string) =>
+  `/courses/${year}/${code.toLowerCase()}`;
+
+function KindIcon({ kind }: { kind: CourseRuleCondition["kind"] }) {
+  const Icon =
+    kind === "wam" || kind === "gpa"
+      ? TrendingUp
+      : kind === "year_standing"
+        ? CalendarRange
+        : kind === "structure" || kind === "structure_set"
+          ? GraduationCap
+          : kind === "other"
+            ? Info
+            : GaugeCircle;
+  return <Icon className="size-4 shrink-0 text-primary" aria-hidden="true" />;
+}
+
+function Met() {
+  return (
+    <span className="grid size-4 shrink-0 place-items-center rounded-full bg-success text-white">
+      <Check className="size-3" strokeWidth={3} aria-hidden="true" />
+      <span className="sr-only">Done</span>
+    </span>
+  );
+}
+
+function CourseCard({
+  code,
+  academicYear,
+  available,
+  met,
+  style,
+  className,
+}: {
+  code: string;
+  academicYear: number;
+  available: boolean;
+  met: boolean;
+  style?: CSSProperties;
+  className?: string;
+}) {
+  const box = cn(
+    "flex h-11 items-center justify-between gap-2 rounded-lg border px-3",
+    className,
+  );
+  // A course without a published page still links through, so it can be
+  // opened as soon as it is published.
+  return (
+    <Link
+      href={courseHref(academicYear, code)}
+      prefetch={false}
+      style={style}
+      title={available ? undefined : `${code}: course details unavailable`}
+      className={cn(
+        box,
+        "transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+        met
+          ? "border-success/40 bg-success/5 hover:bg-success/10"
+          : available
+            ? "border-border bg-card hover:border-primary/50"
+            : "border-border bg-muted/40 text-muted-foreground hover:border-primary/50",
+      )}
+    >
+      <span className="font-mono text-[13px] font-semibold">{code}</span>
+      {met ? (
+        <Met />
+      ) : available ? (
+        <ArrowUpRight
+          className="size-3.5 text-muted-foreground/70"
+          aria-hidden="true"
+        />
+      ) : (
+        <LockKeyhole className="size-3.5" aria-hidden="true" />
+      )}
+    </Link>
+  );
+}
+
+function Leaf({
+  node,
+  academicYear,
+  availableCourseCodes,
+  student,
+  style,
+  className,
+}: {
+  node: CourseRuleCondition;
+  academicYear: number;
+  availableCourseCodes: ReadonlySet<string>;
+  student: StudentRecord | null;
+  style?: CSSProperties;
+  className?: string;
+}) {
+  const met = isMet(node, student);
+  if (node.kind === "course") {
+    return (
+      <CourseCard
+        code={node.code}
+        academicYear={academicYear}
+        available={availableCourseCodes.has(node.code)}
+        met={met}
+        style={style}
+        className={className}
+      />
+    );
+  }
+  const link = requisiteExplorerLink(node, academicYear);
+  const box = cn(
+    "flex h-11 items-center gap-2 rounded-lg border px-3",
+    met ? "border-success/40 bg-success/5" : "border-border bg-card",
+    className,
+  );
+  const content = (
+    <>
+      <KindIcon kind={node.kind} />
+      <span className="line-clamp-2 min-w-0 flex-1 text-xs leading-snug font-medium">
+        {requisiteNoun(node)}
+      </span>
+      {met ? (
+        <Met />
+      ) : link ? (
+        <ArrowUpRight
+          className="size-3.5 shrink-0 text-muted-foreground/70"
+          aria-hidden="true"
+        />
+      ) : null}
+    </>
+  );
+  // A unit rule opens the courses that count towards it.
+  return link ? (
+    <Link
+      href={link.href}
+      prefetch={false}
+      title={link.label}
+      aria-label={`${requisiteNoun(node)}. ${link.label}`}
+      style={style}
+      className={cn(
+        box,
+        "transition-colors hover:border-primary/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none",
+      )}
+    >
+      {content}
+    </Link>
+  ) : (
+    <div style={style} className={box}>
+      {content}
+    </div>
+  );
+}
+
+function Joiner({ word }: { word: "and" | "or" }) {
+  return (
+    <div
+      aria-hidden="true"
+      style={{ height: JOINER }}
+      className="flex items-center gap-2 text-[10px] font-bold tracking-wider uppercase"
+    >
+      <span className="h-px flex-1 bg-border" />
+      <span
+        className={cn(
+          "rounded-full px-2 py-0.5",
+          word === "or"
+            ? "bg-primary/15 text-primary"
+            : "bg-muted text-muted-foreground",
+        )}
+      >
+        {word}
+      </span>
+      <span className="h-px flex-1 bg-border" />
+    </div>
+  );
+}
+
+function GroupBox({
+  group,
+  style,
+  className,
+  ...shared
+}: {
+  group: Group;
+  academicYear: number;
+  availableCourseCodes: ReadonlySet<string>;
+  student: StudentRecord | null;
+  style?: CSSProperties;
+  className?: string;
+}) {
+  const choice = group.operator !== "all_of";
+  const met = isMet(group, shared.student);
+  return (
+    <div
+      role="group"
+      aria-label={groupLabel(group)}
+      style={{ ...style, height: heightOf(group), padding: PAD }}
+      className={cn(
+        "rounded-xl border",
+        choice && "border-dashed",
+        met
+          ? "border-success/50 bg-success/[0.04]"
+          : choice
+            ? "border-primary/50 bg-primary/[0.04]"
+            : "border-border bg-muted/30",
+        className,
+      )}
+    >
+      <p
+        style={{ height: HEADER }}
+        className={cn(
+          "px-1 text-[10px] font-bold tracking-wider uppercase",
+          met
+            ? "text-success"
+            : choice
+              ? "text-primary"
+              : "text-muted-foreground",
+        )}
+      >
+        {groupLabel(group)}
+        {met ? <span className="sr-only"> (met)</span> : null}
+      </p>
+      {group.conditions.map((child, index) => (
+        <div key={index}>
+          {index > 0 ? <Joiner word={choice ? "or" : "and"} /> : null}
+          {child.kind === "group" ? (
+            <GroupBox group={child} {...shared} />
+          ) : (
+            <Leaf node={child} {...shared} />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Head({ x, y, met = false }: { x: number; y: number; met?: boolean }) {
+  return (
+    <path
+      d={`M ${x - 8} ${y - 4.5} L ${x} ${y} L ${x - 8} ${y + 4.5} z`}
+      className={met ? "fill-success" : "fill-muted-foreground/80"}
+    />
+  );
+}
+
+function Line({ d, met = false }: { d: string; met?: boolean }) {
+  return (
+    <path
+      d={d}
+      fill="none"
+      className={met ? "stroke-success" : "stroke-muted-foreground/55"}
+      strokeWidth={1.5}
+    />
+  );
+}
+
+function Placeholder({
+  label,
+  style,
+}: {
+  label: string;
+  style: CSSProperties;
+}) {
+  return (
+    <p
+      style={style}
+      className="absolute flex items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-3 text-center text-[11px] font-medium text-muted-foreground"
+    >
+      {label}
+    </p>
+  );
+}
+
+/**
+ * What a course needs, the course, and what it opens up: three columns and
+ * nothing further upstream, since each linked course carries its own diagram.
+ * Every requirement is its own box and their lines meet at one point before a
+ * single arrow, so the rule's AND is drawn rather than implied.
+ */
+export function RequisiteDiagram({
+  academicYear,
+  availableCourseCodes,
+  code,
+  expression,
+  hasPrerequisiteWording,
+  student,
+  unlocks,
+  unlocksAreKnown,
+}: {
+  academicYear: number;
+  availableCourseCodes: ReadonlySet<string>;
+  code: string;
+  expression: CourseRuleExpression | null;
+  hasPrerequisiteWording: boolean;
+  student: StudentRecord | null;
+  unlocks: readonly { code: string; isAvailable: boolean }[];
+  unlocksAreKnown: boolean;
+}) {
+  const { requirements, permissions, incompatible } =
+    splitRequisiteRule(expression);
+
+  if (
+    requirements.length === 0 &&
+    unlocks.length === 0 &&
+    !permissions.length
+  ) {
+    return (
+      <p
+        className="px-5 pb-5 text-center text-sm text-muted-foreground"
+        data-testid="requisite-diagram"
+      >
+        {hasPrerequisiteWording
+          ? `The prerequisites for ${code} have not been read into a chain yet. They are listed below as ANU publishes them.`
+          : unlocksAreKnown
+            ? `${code} has no prerequisites, and no published course lists it as one.`
+            : `${code} has no prerequisites. Which courses it leads to is not known until it is published.`}
+      </p>
+    );
+  }
+
+  const shared = { academicYear, availableCourseCodes, student };
+  const heights = requirements.map(heightOf);
+  const requiresTotal = requirements.length
+    ? heights.reduce((total, height) => total + height, 0) +
+      (requirements.length - 1) * ENTRY_GAP
+    : EMPTY_H;
+  const unlockTotal = unlocks.length
+    ? unlocks.length * CARD + (unlocks.length - 1) * CARD_GAP
+    : EMPTY_H;
+  // Room below the course for the permission badge.
+  const courseTotal = COURSE_H + (permissions.length ? 2 * 40 : 0);
+  const height = Math.max(requiresTotal, unlockTotal, courseTotal);
+  const mid = height / 2;
+
+  const firstTop = (height - requiresTotal) / 2;
+  const placed = requirements.map((node, index) => {
+    const top =
+      firstTop +
+      heights
+        .slice(0, index)
+        .reduce((total, entryHeight) => total + entryHeight + ENTRY_GAP, 0);
+    return {
+      node,
+      top,
+      anchor: top + heights[index]! / 2,
+      met: isMet(node, student),
+    };
+  });
+  // The arrow into the course turns green only once every requirement is met.
+  const allMet = placed.length > 0 && placed.every((entry) => entry.met);
+
+  const merges = placed.length > 1;
+  const mergeX = REQUIRES_W + MERGE_GAP;
+  const courseX = mergeX + (merges ? 44 : 0);
+  const unlockX = courseX + COURSE_W + UNLOCK_GAP;
+  // With nothing known to follow, the column is left out rather than filled
+  // with a placeholder, and the diagram closes on the course.
+  const width = unlocks.length ? unlockX + UNLOCK_W : courseX + COURSE_W;
+  const spineX = courseX + COURSE_W + UNLOCK_GAP / 2;
+  const unlockTop = mid - unlockTotal / 2;
+  const unlockCentre = (index: number) =>
+    unlockTop + index * (CARD + CARD_GAP) + CARD / 2;
+
+  return (
+    <div className="overflow-x-auto px-5 pb-6" data-testid="requisite-diagram">
+      {/* Centred when it fits; a wider diagram scrolls from its left edge. */}
+      <div className="mx-auto" style={{ width }}>
+        <div className="relative h-6 text-center text-[10px] font-bold tracking-wider text-muted-foreground/80 uppercase">
+          <p className="absolute" style={{ left: 0, width: REQUIRES_W }}>
+            {merges ? "Requires all of" : "Requires"}
+          </p>
+          <p className="absolute" style={{ left: courseX, width: COURSE_W }}>
+            This course
+          </p>
+          {unlocks.length ? (
+            <p className="absolute" style={{ left: unlockX, width: UNLOCK_W }}>
+              Unlocks
+            </p>
+          ) : null}
+        </div>
+        <div className="relative" style={{ height }}>
+          <svg
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+            className="absolute inset-0 overflow-visible"
+            aria-hidden="true"
+          >
+            {merges ? (
+              <>
+                {placed.map((entry) => {
+                  const bend = REQUIRES_W + MERGE_GAP / 2;
+                  return (
+                    <Line
+                      key={entry.anchor}
+                      met={entry.met}
+                      d={`M ${REQUIRES_W} ${entry.anchor} C ${bend} ${entry.anchor}, ${bend} ${mid}, ${mergeX} ${mid}`}
+                    />
+                  );
+                })}
+                <circle
+                  cx={mergeX}
+                  cy={mid}
+                  r={3.5}
+                  className={allMet ? "fill-success" : "fill-muted-foreground"}
+                />
+                <Line met={allMet} d={`M ${mergeX} ${mid} H ${courseX - 2}`} />
+                <Head met={allMet} x={courseX - 2} y={mid} />
+              </>
+            ) : placed.length === 1 ? (
+              <>
+                <Line
+                  met={allMet}
+                  d={`M ${REQUIRES_W} ${mid} H ${courseX - 2}`}
+                />
+                <Head met={allMet} x={courseX - 2} y={mid} />
+              </>
+            ) : null}
+            {unlocks.length === 1 ? (
+              <>
+                <Line d={`M ${courseX + COURSE_W} ${mid} H ${unlockX - 2}`} />
+                <Head x={unlockX - 2} y={mid} />
+              </>
+            ) : unlocks.length > 1 ? (
+              <>
+                <Line d={`M ${courseX + COURSE_W} ${mid} H ${spineX}`} />
+                <Line
+                  d={`M ${spineX} ${unlockCentre(0)} V ${unlockCentre(unlocks.length - 1)}`}
+                />
+                {unlocks.map((unlock, index) => (
+                  <g key={unlock.code}>
+                    <Line
+                      d={`M ${spineX} ${unlockCentre(index)} H ${unlockX - 2}`}
+                    />
+                    <Head x={unlockX - 2} y={unlockCentre(index)} />
+                  </g>
+                ))}
+              </>
+            ) : null}
+          </svg>
+
+          {placed.length === 0 ? (
+            <Placeholder
+              label={
+                hasPrerequisiteWording
+                  ? "See the requirements below"
+                  : "No course prerequisites"
+              }
+              style={{
+                left: 0,
+                width: REQUIRES_W,
+                top: mid - EMPTY_H / 2,
+                height: EMPTY_H,
+              }}
+            />
+          ) : (
+            placed.map((entry, index) =>
+              entry.node.kind === "group" ? (
+                <GroupBox
+                  key={index}
+                  group={entry.node}
+                  className="absolute"
+                  style={{ left: 0, width: REQUIRES_W, top: entry.top }}
+                  {...shared}
+                />
+              ) : (
+                <Leaf
+                  key={index}
+                  node={entry.node}
+                  className="absolute"
+                  style={{ left: 0, width: REQUIRES_W, top: entry.top }}
+                  {...shared}
+                />
+              ),
+            )
+          )}
+
+          {/* The badge hangs below the node without taking layout height, so
+              the node's centre stays level with every line that meets it. */}
+          <div
+            className="absolute"
+            style={{ left: courseX, width: COURSE_W, top: mid - COURSE_H / 2 }}
+          >
+            <span
+              aria-current="page"
+              className="flex h-12 items-center justify-center rounded-lg bg-primary font-mono text-[13px] font-semibold text-white shadow-sm"
+            >
+              {code}
+            </span>
+            {permissions.length ? (
+              <span className="absolute inset-x-0 top-full mt-1.5 flex items-center justify-center gap-1.5 rounded-md border border-warning/40 bg-warning/10 px-2 py-1 text-[11px] font-medium text-warning">
+                <KeyRound className="size-3.5" aria-hidden="true" />
+                Permission needed
+              </span>
+            ) : null}
+          </div>
+
+          {unlocks.map((unlock, index) => (
+            <CourseCard
+              key={unlock.code}
+              code={unlock.code}
+              academicYear={academicYear}
+              available={
+                unlock.isAvailable || availableCourseCodes.has(unlock.code)
+              }
+              met={false}
+              className="absolute"
+              style={{
+                left: unlockX,
+                width: UNLOCK_W,
+                top: unlockCentre(index) - CARD / 2,
+              }}
+            />
+          ))}
+        </div>
+
+        {incompatible.length ? (
+          <p className="mt-4 flex items-start gap-2 text-xs text-muted-foreground">
+            <CircleAlert
+              className="mt-px size-3.5 shrink-0 text-warning"
+              aria-hidden="true"
+            />
+            <span>
+              Not a prerequisite: this course cannot be counted with{" "}
+              {incompatible.join(", ")}.
+            </span>
+          </p>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/courses/requisite-summary.tsx b/apps/web/ui/courses/requisite-summary.tsx
index 417c83c1..fbd36e1e 100644
--- a/apps/web/ui/courses/requisite-summary.tsx
+++ b/apps/web/ui/courses/requisite-summary.tsx
@@ -1,18 +1,8 @@
 "use client";
-import { badgeVariantForTone } from "@/lib/ui";
-import { Badge } from "@coursemap/ui/components/badge";
-import { CheckCircle2, Circle, CircleAlert } from "lucide-react";
-import {
-  type RequisiteCondition,
-  type RequisiteExpression,
-  type RequisiteProgress,
+import type {
+  RequisiteCondition,
+  RequisiteExpression,
 } from "@/lib/coursemap/requisite-summary";
-import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
-import { requisiteConditionNode } from "@/lib/coursemap/requisite-tree";
-import {
-  conditionSummary,
-  conditionTone,
-} from "@/ui/requirements/requirement-presentation";
 import { CourseReferenceText } from "@/ui/courses/course-reference";
 
 export function RequisiteConditionText({
@@ -102,260 +92,3 @@ export function RequisiteExpressionSummary({
     </div>
   );
 }
-export function RequisiteProgressSummary({
-  academicYear,
-  progress,
-  availableCourseCodes,
-}: {
-  academicYear: number;
-  progress: RequisiteProgress;
-  availableCourseCodes: ReadonlySet<string>;
-}) {
-  if (progress.kind === "course") {
-    return (
-      <div className="flex items-start gap-2">
-        {progress.satisfied ? (
-          <CheckCircle2
-            aria-label="Completed"
-            className="mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-300"
-            size={16}
-          />
-        ) : (
-          <Circle
-            aria-label="Not completed"
-            className="mt-0.5 shrink-0 text-amber-700 dark:text-amber-300"
-            size={16}
-          />
-        )}
-        <span>
-          Complete{" "}
-          <CourseReferenceText
-            academicYear={academicYear}
-            text={progress.code}
-            availableCourseCodes={availableCourseCodes}
-          />
-        </span>
-      </div>
-    );
-  }
-
-  if (
-    progress.kind === "subject_units" ||
-    progress.kind === "level_units" ||
-    progress.kind === "units_total"
-  ) {
-    const description =
-      progress.kind === "subject_units"
-        ? `${progress.subject}-coded units completed`
-        : progress.kind === "level_units"
-          ? `${progress.level}-level${progress.subject ? ` ${progress.subject}` : ""} units completed`
-          : "units of study completed";
-    return (
-      <div className="flex items-start gap-2">
-        {progress.satisfied ? (
-          <CheckCircle2
-            aria-label="Completed"
-            className="mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-300"
-            size={16}
-          />
-        ) : (
-          <Circle
-            aria-label="Not completed"
-            className="mt-0.5 shrink-0 text-amber-700 dark:text-amber-300"
-            size={16}
-          />
-        )}
-        <span>
-          {progress.completedUnits} of {progress.requiredUnits} {description}
-        </span>
-      </div>
-    );
-  }
-
-  if (progress.kind === "programme_enrolment") {
-    return (
-      <div className="flex items-start gap-2">
-        {progress.satisfied ? (
-          <CheckCircle2
-            aria-label="Enrolled"
-            className="mt-0.5 shrink-0 text-emerald-600 dark:text-emerald-300"
-            size={16}
-          />
-        ) : (
-          <Circle
-            aria-label="Not enrolled"
-            className="mt-0.5 shrink-0 text-amber-700 dark:text-amber-300"
-            size={16}
-          />
-        )}
-        <span>
-          Be enrolled in {progress.name}{" "}
-          <span className="font-mono font-semibold">({progress.code})</span>
-        </span>
-      </div>
-    );
-  }
-
-  const title =
-    progress.operator === "all_of"
-      ? "Complete all of the following"
-      : "Complete one of the following";
-  return (
-    <div className="rounded-lg border border-border bg-card p-3">
-      <div className="flex items-center justify-between gap-2">
-        <p className="text-xs font-semibold text-foreground/90">{title}</p>
-        <Badge
-          variant={
-            badgeVariantForTone[progress.satisfied ? "success" : "warning"]
-          }
-        >
-          {progress.satisfied ? "Met" : "Not met"}
-        </Badge>
-      </div>
-      <ul className="mt-3 space-y-2 border-l border-border pl-3 text-xs text-foreground/80">
-        {progress.conditions.map((condition, index) => (
-          <li key={index}>
-            <RequisiteProgressSummary
-              academicYear={academicYear}
-              progress={condition}
-              availableCourseCodes={availableCourseCodes}
-            />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-/**
- * A requisite rule read through the shared requirement vocabulary. The narrow
- * summary above covers the handful of kinds it was written for and returns
- * nothing for the rest, which used to leave the reader with the ANU prose
- * alone. Course codes stay linked, so this loses nothing the prose carried.
- */
-/**
- * What a group asks for, in the reader's terms. "Complete all of the
- * following" over "Complete one of the following" read alike at a glance, and
- * the difference between them is the whole rule.
- */
-function groupTitle(
-  expression: Extract<CourseRuleExpression, { kind: "group" }>,
-  childCount: number,
-) {
-  if (expression.operator === "all_of") {
-    return childCount === 2
-      ? "You need both of these"
-      : "You need all of these";
-  }
-  if (expression.operator === "any_of") return "You need one of these";
-  return `You need at least ${expression.minimumCount ?? 1} of these`;
-}
-
-export function RequisiteRuleSummary({
-  academicYear,
-  expression,
-  availableCourseCodes,
-  depth = 0,
-}: {
-  academicYear: number;
-  expression: CourseRuleExpression;
-  availableCourseCodes: ReadonlySet<string>;
-  /** Only the outermost group is boxed; nesting a box in a box hid the logic. */
-  depth?: number;
-}) {
-  if (expression.kind === "group") {
-    // A group of one is only its child, so it gets no heading of its own.
-    if (expression.conditions.length === 1 && expression.conditions[0]) {
-      return (
-        <RequisiteRuleSummary
-          academicYear={academicYear}
-          expression={expression.conditions[0]}
-          availableCourseCodes={availableCourseCodes}
-          depth={depth}
-        />
-      );
-    }
-    const alternative = expression.operator !== "all_of";
-    const list = (
-      <>
-        <p className="text-xs font-semibold text-foreground/90">
-          {groupTitle(expression, expression.conditions.length)}
-        </p>
-        <ul className="mt-2 flex flex-col text-xs text-foreground/80">
-          {expression.conditions.map((condition, index) => (
-            <li key={index}>
-              {/* An alternative says "or" between its options, so it cannot be
-                  read as a list of things to do. */}
-              {alternative && index > 0 ? (
-                <p
-                  aria-hidden="true"
-                  className="my-1.5 flex items-center gap-2 text-[10px] font-semibold tracking-wider text-muted-foreground uppercase"
-                >
-                  <span className="h-px flex-1 bg-border" />
-                  or
-                  <span className="h-px flex-1 bg-border" />
-                </p>
-              ) : null}
-              <div
-                className={
-                  alternative
-                    ? undefined
-                    : "flex gap-2 py-1 before:mt-1.5 before:size-1.5 before:shrink-0 before:rounded-full before:bg-muted-foreground/50"
-                }
-              >
-                <div className="min-w-0 flex-1">
-                  <RequisiteRuleSummary
-                    academicYear={academicYear}
-                    expression={condition}
-                    availableCourseCodes={availableCourseCodes}
-                    depth={depth + 1}
-                  />
-                </div>
-              </div>
-            </li>
-          ))}
-        </ul>
-      </>
-    );
-    return depth === 0 ? (
-      <div className="rounded-lg border border-border bg-card p-3">{list}</div>
-    ) : (
-      <div className="border-l-2 border-border py-0.5 pl-3">{list}</div>
-    );
-  }
-
-  const condition = requisiteConditionNode(expression);
-  const tone = conditionTone(condition);
-  const optionCodes = condition.options
-    .filter((option) => option.kind === "course")
-    .map((option) => option.code);
-  return (
-    <div className="flex items-start gap-2">
-      {tone === "warning" ? (
-        <CircleAlert
-          aria-label="Incompatible"
-          className="mt-0.5 shrink-0 text-warning"
-          size={16}
-        />
-      ) : null}
-      <div className="min-w-0">
-        <p className="text-foreground/90">
-          <CourseReferenceText
-            academicYear={academicYear}
-            text={conditionSummary(condition)}
-            availableCourseCodes={availableCourseCodes}
-          />
-        </p>
-        {optionCodes.length ? (
-          <p className="mt-1 text-muted-foreground">
-            <CourseReferenceText
-              academicYear={academicYear}
-              text={optionCodes.join(", ")}
-              availableCourseCodes={availableCourseCodes}
-            />
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/ui/courses/requisite-wording.ts b/apps/web/ui/courses/requisite-wording.ts
new file mode 100644
index 00000000..3c8ef37d
--- /dev/null
+++ b/apps/web/ui/courses/requisite-wording.ts
@@ -0,0 +1,185 @@
+import type { CourseRuleExpression } from "@/lib/coursemap/course-types";
+import type { CourseRuleCondition } from "@/lib/coursemap/requisite-tree";
+
+type Group = Extract<CourseRuleExpression, { kind: "group" }>;
+
+/**
+ * Pulls the parts of a rule that are not course relationships out of its
+ * top level: a permission is a gate on the course, free text is a note, and
+ * an incompatibility is not a prerequisite at all. What remains is what the
+ * student has to complete, one entry per thing to do.
+ */
+export function splitRequisiteRule(expression: CourseRuleExpression | null) {
+  const permissions: string[] = [];
+  const notes: string[] = [];
+  const incompatible: string[] = [];
+  const requirements: CourseRuleExpression[] = [];
+  const visit = (node: CourseRuleExpression) => {
+    if (node.kind === "permission") permissions.push(node.text);
+    else if (node.kind === "other") notes.push(node.text);
+    else if (node.kind === "incompatible") incompatible.push(node.code);
+    else if (node.kind === "group" && node.operator === "all_of")
+      node.conditions.forEach(visit);
+    else if (node.kind === "group" && node.conditions.length === 1)
+      visit(node.conditions[0]!);
+    else requirements.push(node);
+  };
+  if (expression) visit(expression);
+  return { requirements, permissions, notes, incompatible };
+}
+
+/** The heading on a group box: how many of its children are needed. */
+export function groupLabel(group: Group) {
+  const count = group.conditions.length;
+  if (group.operator === "all_of") return count === 2 ? "Both" : `All ${count}`;
+  if (group.operator === "any_of") return `Any 1 of ${count}`;
+  return `Any ${group.minimumCount ?? 1} of ${count}`;
+}
+
+function levelPhrase(minimum: number, maximum: number | null) {
+  if (maximum === null) return `${minimum}-level or higher`;
+  return minimum === maximum
+    ? `${minimum}-level`
+    : `${minimum}- to ${maximum}-level`;
+}
+
+function codes(list: readonly string[]) {
+  if (list.length <= 1) return list.join("");
+  return `${list.slice(0, -1).join(", ")} or ${list.at(-1)}`;
+}
+
+/** A condition as a short label for a diagram box. */
+export function requisiteNoun(condition: CourseRuleCondition): string {
+  switch (condition.kind) {
+    case "course":
+      return condition.code;
+    case "incompatible":
+      return `Not ${condition.code}`;
+    case "units_total":
+      return `${condition.units} units in total`;
+    case "subject_units":
+      return `${condition.units} units of ${condition.subject ?? "subject"} courses`;
+    case "level_units":
+      return `${condition.units} units of ${levelPhrase(condition.minimumLevel, condition.maximumLevel)}${
+        condition.subject ? ` ${condition.subject}` : ""
+      } courses`;
+    case "course_set_units":
+      return `${condition.units} units from ${codes(condition.courseCodes)}`;
+    case "tagged_units":
+      return `${condition.units} units tagged ${condition.tag}`;
+    case "elective_units":
+      return `${condition.units} units of electives`;
+    case "year_standing":
+      return `Year ${condition.minimumYear} or later`;
+    case "structure":
+      return `Enrolled in ${condition.structureCode ?? condition.text ?? "a program"}`;
+    case "structure_set":
+      return condition.minimumCount && condition.minimumCount > 1
+        ? `Enrolled in ${condition.minimumCount} of ${codes(condition.structureCodes)}`
+        : `Enrolled in ${codes(condition.structureCodes)}`;
+    case "gpa":
+      return `GPA of ${condition.minimumGpa} or more`;
+    case "wam":
+      return `WAM of ${condition.minimumWam} or more`;
+    case "permission":
+    case "other":
+      return condition.text;
+  }
+}
+
+/** A condition as the thing a student has to do, for the steps list. */
+export function requisiteSentence(condition: CourseRuleCondition): string {
+  switch (condition.kind) {
+    case "course":
+      if (condition.minimumMark !== null)
+        return `Complete ${condition.code} with a mark of ${condition.minimumMark} or more`;
+      return condition.requirementMode === "completed_or_concurrent"
+        ? `Complete ${condition.code}, or take it in the same semester`
+        : `Complete ${condition.code}`;
+    case "incompatible":
+      return `You can't take this if you've completed ${condition.code}`;
+    case "units_total":
+      return `Complete ${condition.units} units`;
+    case "subject_units":
+      return `Complete ${condition.units} units of ${condition.subject ?? "subject"} courses`;
+    case "level_units":
+      return `Complete ${requisiteNoun(condition)}`;
+    case "course_set_units":
+      return `Complete ${condition.units} units from these courses`;
+    case "tagged_units":
+      return `Complete ${condition.units} units of courses tagged ${condition.tag}`;
+    case "elective_units":
+      return `Complete ${condition.units} units of electives`;
+    case "year_standing":
+      return `Be in year ${condition.minimumYear} or later of your degree`;
+    case "structure":
+      return `Be enrolled in ${condition.structureCode ?? condition.text ?? "the required program"}`;
+    case "structure_set":
+      return condition.minimumCount && condition.minimumCount > 1
+        ? `Be enrolled in ${condition.minimumCount} of these programs`
+        : "Be enrolled in one of these programs";
+    case "gpa":
+      return `Have a GPA of ${condition.minimumGpa} or more`;
+    case "wam":
+      return `Have a WAM of ${condition.minimumWam} or more`;
+    case "permission":
+      return "Get permission to enrol";
+    case "other":
+      return "Also required";
+  }
+}
+
+/** A group as the thing a student has to do. */
+export function groupSentence(group: Group) {
+  const allCourses = group.conditions.every((child) => child.kind === "course");
+  const noun = allCourses ? "these courses" : "these";
+  const verb = allCourses ? "Complete" : "Meet";
+  if (group.operator === "all_of") return `${verb} all of ${noun}`;
+  if (group.operator === "any_of") return `${verb} one of ${noun}`;
+  return `${verb} any ${group.minimumCount ?? 1} of ${noun}`;
+}
+
+/**
+ * Where to see the courses that count towards a unit requirement: the course
+ * explorer, filtered the way the rule is worded. Requirements that name their
+ * own courses link through those courses instead, so they have none.
+ */
+export function requisiteExplorerLink(
+  condition: CourseRuleCondition,
+  academicYear: number,
+): { href: string; label: string } | null {
+  const params = new URLSearchParams({ year: String(academicYear) });
+  switch (condition.kind) {
+    case "subject_units":
+      if (!condition.subject) return null;
+      params.set("subject", condition.subject);
+      return {
+        href: `/courses?${params}`,
+        label: `See ${condition.subject} courses`,
+      };
+    case "level_units": {
+      const level = condition.minimumLevel / 1000;
+      params.set(
+        "level",
+        condition.maximumLevel === condition.minimumLevel
+          ? String(level)
+          : `${level}+`,
+      );
+      if (condition.subject) params.set("subject", condition.subject);
+      return {
+        href: `/courses?${params}`,
+        label: `See ${levelPhrase(condition.minimumLevel, condition.maximumLevel)}${
+          condition.subject ? ` ${condition.subject}` : ""
+        } courses`,
+      };
+    }
+    case "tagged_units":
+      params.set("tag", condition.tag);
+      return {
+        href: `/courses?${params}`,
+        label: `See courses tagged ${condition.tag}`,
+      };
+    default:
+      return null;
+  }
+}
diff --git a/apps/web/ui/prereq-graph.tsx b/apps/web/ui/prereq-graph.tsx
deleted file mode 100644
index d17602da..00000000
--- a/apps/web/ui/prereq-graph.tsx
+++ /dev/null
@@ -1,499 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import {
-  CalendarDays,
-  Check,
-  CircleAlert,
-  CircleDashed,
-  GaugeCircle,
-  LockKeyhole,
-} from "lucide-react";
-import { Fragment, useId, useMemo } from "react";
-import { Badge } from "@coursemap/ui/components/badge";
-import { Hint } from "@/ui/common/hint";
-import { cn } from "@/lib/cn";
-import type {
-  CoursePrerequisiteEdge,
-  CourseRuleExpression,
-} from "@/lib/coursemap/course-types";
-import {
-  buildRequisiteGraph,
-  requisiteConditionNode,
-  type RequisiteGraphNode,
-} from "@/lib/coursemap/requisite-tree";
-import { conditionSummary } from "@/ui/requirements/requirement-presentation";
-
-const COLUMN_WIDTH = 168;
-/**
- * A junction is a short pill ("Choose one", "All of these"), so a column that
- * holds nothing else is narrower. At a uniform width the junction that makes
- * the AND explicit added a full column and pushed the graph past its card.
- */
-const JUNCTION_WIDTH = 116;
-const COLUMN_GAP = 36;
-const ROW_GAP = 14;
-const CHOICE_HEIGHT = 34;
-const REQUIREMENT_HEIGHT = 68;
-const EMPTY_HEIGHT = 46;
-const ARROW_INSET = 3;
-
-type CourseStatus = "completed" | "enrolled" | "planned";
-
-/** A node, or a column's empty state, with somewhere to sit on the canvas. */
-type Placed = {
-  column: number;
-  height: number;
-  id: string;
-  node: RequisiteGraphNode | null;
-  top: number;
-};
-
-function courseHeight(showStudentState: boolean) {
-  return showStudentState ? 64 : 46;
-}
-
-function nodeHeight(node: RequisiteGraphNode, showStudentState: boolean) {
-  if (node.kind === "choice") return CHOICE_HEIGHT;
-  if (node.kind === "requirement") return REQUIREMENT_HEIGHT;
-  if (node.kind === "current") return courseHeight(false);
-  return courseHeight(showStudentState);
-}
-
-const STATUS_LABEL: Record<CourseStatus, string> = {
-  completed: "Completed",
-  enrolled: "Enrolled",
-  planned: "Planned",
-};
-
-/**
- * The same words and icons the requirement kit puts on a course row, so a
- * course means the same thing in the graph and in the card underneath it.
- */
-function CourseStatusBadge({ status }: { status: CourseStatus | null }) {
-  return (
-    <Badge
-      variant={
-        status === "completed"
-          ? "success-light"
-          : status
-            ? "primary-light"
-            : "secondary"
-      }
-    >
-      {status === "completed" ? (
-        <Check className="size-3" aria-hidden="true" />
-      ) : status ? (
-        <CalendarDays className="size-3" aria-hidden="true" />
-      ) : (
-        <CircleDashed className="size-3" aria-hidden="true" />
-      )}
-      {status ? STATUS_LABEL[status] : "Not planned"}
-    </Badge>
-  );
-}
-
-function choiceLabel(node: Extract<RequisiteGraphNode, { kind: "choice" }>) {
-  if (node.operator === "all_of") return "All of these";
-  if (node.operator === "any_of") return "Choose one";
-  return `Choose at least ${node.minimumCount ?? 1}`;
-}
-
-/**
- * The prerequisite rule as a left-to-right dependency graph, with a node for
- * every condition the rule states. Alternatives get a group node so an OR
- * cannot be mistaken for a list of separate requirements, and a unit rule is
- * a node like any other rather than being dropped for naming no single course.
- *
- * Drawn with layout and SVG rather than the React Flow canvas the reviewer's
- * editor uses: every node here is a real link or a real piece of text in
- * reading order, which a student on a phone or a screen reader needs and a
- * pannable canvas takes away.
- */
-export function PrereqGraph({
-  academicYear,
-  availableCourseCodes,
-  code,
-  expression,
-  hasPrerequisiteWording,
-  prerequisiteEdges,
-  showStudentState,
-  statusByCode,
-  unlocksAreKnown,
-}: {
-  academicYear: number;
-  availableCourseCodes: ReadonlySet<string>;
-  code: string;
-  expression: CourseRuleExpression | null;
-  hasPrerequisiteWording: boolean;
-  prerequisiteEdges: readonly CoursePrerequisiteEdge[];
-  showStudentState: boolean;
-  statusByCode: ReadonlyMap<string, CourseStatus>;
-  unlocksAreKnown: boolean;
-}) {
-  const markerId = useId();
-  const graph = useMemo(
-    () =>
-      buildRequisiteGraph({
-        availableCourseCodes,
-        code,
-        expression,
-        prerequisiteEdges,
-      }),
-    [availableCourseCodes, code, expression, prerequisiteEdges],
-  );
-
-  // With nothing on either side there is no chain to draw. Three empty boxes
-  // with no edges between them read as a diagram that failed to render, and
-  // drawing arrows to placeholders would invent relationships, so say it.
-  if (graph.nodes.every((node) => node.kind === "current")) {
-    return (
-      <p
-        className="px-5 pb-5 text-center text-sm text-muted-foreground"
-        data-testid="prereq-graph"
-      >
-        {hasPrerequisiteWording
-          ? `The prerequisites for ${code} have not been read into a chain yet. They are listed below as ANU publishes them.`
-          : unlocksAreKnown
-            ? `${code} has no prerequisites, and no published course lists it as one.`
-            : `${code} has no prerequisites. Which courses it leads to is not known until it is published.`}
-      </p>
-    );
-  }
-
-  const columnCount = graph.maximumDepth + 2;
-  const currentColumn = graph.maximumDepth;
-  const columnOf = (node: RequisiteGraphNode) =>
-    node.kind === "unlocked"
-      ? columnCount - 1
-      : graph.maximumDepth - node.depth;
-
-  const placed: Placed[] = [];
-  const byColumn = new Map<number, Placed[]>();
-  const push = (entry: Placed) => {
-    placed.push(entry);
-    byColumn.set(entry.column, [...(byColumn.get(entry.column) ?? []), entry]);
-  };
-  for (const node of graph.nodes) {
-    push({
-      column: columnOf(node),
-      height: nodeHeight(node, showStudentState),
-      id: node.id,
-      node,
-      top: 0,
-    });
-  }
-  if ((byColumn.get(currentColumn - 1) ?? []).length === 0) {
-    push({
-      column: currentColumn - 1,
-      height: EMPTY_HEIGHT,
-      id: "empty-requires",
-      node: null,
-      top: 0,
-    });
-  }
-  if ((byColumn.get(columnCount - 1) ?? []).length === 0) {
-    push({
-      column: columnCount - 1,
-      height: EMPTY_HEIGHT,
-      id: "empty-unlocks",
-      node: null,
-      top: 0,
-    });
-  }
-
-  const columnHeights = new Map<number, number>();
-  for (const [column, entries] of byColumn) {
-    columnHeights.set(
-      column,
-      entries.reduce((total, entry) => total + entry.height, 0) +
-        ROW_GAP * Math.max(0, entries.length - 1),
-    );
-  }
-  const height = Math.max(EMPTY_HEIGHT, ...columnHeights.values());
-  for (const [column, entries] of byColumn) {
-    let offset = (height - (columnHeights.get(column) ?? 0)) / 2;
-    for (const entry of entries) {
-      entry.top = offset;
-      offset += entry.height + ROW_GAP;
-    }
-  }
-
-  const geometry = new Map(placed.map((entry) => [entry.id, entry]));
-  const columnWidths = Array.from({ length: columnCount }, (_, column) => {
-    const entries = byColumn.get(column) ?? [];
-    return entries.length > 0 &&
-      entries.every((entry) => entry.node?.kind === "choice")
-      ? JUNCTION_WIDTH
-      : COLUMN_WIDTH;
-  });
-  const leftOf = (column: number) =>
-    columnWidths
-      .slice(0, column)
-      .reduce((total, columnWidth) => total + columnWidth + COLUMN_GAP, 0);
-  const widthOf = (column: number) => columnWidths[column] ?? COLUMN_WIDTH;
-  const width = leftOf(columnCount - 1) + widthOf(columnCount - 1);
-
-  return (
-    <div className="overflow-x-auto px-5 pb-5" data-testid="prereq-graph">
-      {/* Centred when it fits; mx-auto has no effect once the diagram is wider
-          than the card, so a wide graph still scrolls from its left edge. */}
-      <div className="mx-auto" style={{ width }}>
-        <div
-          className="grid pb-2 text-center text-[10px] font-bold tracking-wider text-muted-foreground/80 uppercase"
-          style={{
-            columnGap: COLUMN_GAP,
-            gridTemplateColumns: columnWidths
-              .map((columnWidth) => `${columnWidth}px`)
-              .join(" "),
-          }}
-        >
-          <p style={{ gridColumn: `span ${currentColumn}` }}>Requires</p>
-          <p>This course</p>
-          <p>Unlocks</p>
-        </div>
-
-        <div className="relative" style={{ height }}>
-          <svg
-            width={width}
-            height={height}
-            viewBox={`0 0 ${width} ${height}`}
-            className="absolute top-0 left-0 overflow-visible"
-            aria-hidden="true"
-          >
-            {/* Without heads the edges gave no direction, so a reader could not
-                tell what led to what. One marker per state, because a marker
-                cannot inherit its path's colour everywhere. */}
-            <defs>
-              {(["idle", "met"] as const).map((state) => (
-                <marker
-                  key={state}
-                  id={`${markerId}-${state}`}
-                  viewBox="0 0 10 10"
-                  refX="9"
-                  refY="5"
-                  markerWidth="7"
-                  markerHeight="7"
-                  orient="auto-start-reverse"
-                >
-                  <path
-                    d="M 0 0 L 10 5 L 0 10 z"
-                    className={
-                      state === "met"
-                        ? "fill-success"
-                        : "fill-muted-foreground/60"
-                    }
-                  />
-                </marker>
-              ))}
-            </defs>
-            {graph.edges.map((edge) => {
-              const from = geometry.get(edge.from);
-              const to = geometry.get(edge.to);
-              if (!from || !to) return null;
-              const x1 = leftOf(from.column) + widthOf(from.column);
-              // Stop short of the node so the head sits in the gap rather than
-              // on the node's border.
-              const x2 = leftOf(to.column) - ARROW_INSET;
-              const y1 = from.top + from.height / 2;
-              const y2 = to.top + to.height / 2;
-              const mid = (x1 + x2) / 2;
-              const met =
-                from.node?.kind === "course" &&
-                statusByCode.get(from.node.code) === "completed";
-              return (
-                <path
-                  key={`${edge.from}:${edge.to}`}
-                  d={`M ${x1} ${y1} C ${mid} ${y1}, ${mid} ${y2}, ${x2} ${y2}`}
-                  fill="none"
-                  strokeDasharray={edge.alternative ? "5 4" : undefined}
-                  className={
-                    met ? "stroke-success" : "stroke-muted-foreground/50"
-                  }
-                  strokeWidth={1.75}
-                  markerEnd={`url(#${markerId}-${met ? "met" : "idle"})`}
-                />
-              );
-            })}
-          </svg>
-
-          {placed.map((entry) => {
-            const style = {
-              height: entry.height,
-              left: leftOf(entry.column),
-              top: entry.top,
-              width: widthOf(entry.column),
-            };
-            if (!entry.node) {
-              const unlocks = entry.id === "empty-unlocks";
-              const label = unlocks
-                ? unlocksAreKnown
-                  ? "No published course lists this one"
-                  : "Not known yet"
-                : hasPrerequisiteWording
-                  ? "See prerequisite requirements"
-                  : "No prerequisite listed";
-              const box = (
-                <p
-                  style={style}
-                  className="absolute flex items-center justify-center rounded-lg border border-dashed border-border bg-muted/30 px-3 text-center text-[11px] font-medium text-muted-foreground"
-                >
-                  {label}
-                </p>
-              );
-              if (!unlocks || unlocksAreKnown) {
-                return <Fragment key={entry.id}>{box}</Fragment>;
-              }
-              return (
-                <Hint
-                  key={entry.id}
-                  label="This course is not published for this year, so the courses it unlocks have not been looked up."
-                >
-                  {box}
-                </Hint>
-              );
-            }
-            return (
-              <GraphNode
-                academicYear={academicYear}
-                key={entry.id}
-                node={entry.node}
-                showStudentState={showStudentState}
-                statusByCode={statusByCode}
-                style={style}
-              />
-            );
-          })}
-        </div>
-
-        {graph.incompatibleCodes.length > 0 ? (
-          <p className="mt-4 flex items-start gap-2 text-xs text-muted-foreground">
-            <CircleAlert
-              className="mt-px size-3.5 shrink-0 text-warning"
-              aria-hidden="true"
-            />
-            <span>
-              Not a prerequisite: this course cannot be counted with{" "}
-              {graph.incompatibleCodes.join(", ")}.
-            </span>
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function GraphNode({
-  academicYear,
-  node,
-  showStudentState,
-  statusByCode,
-  style,
-}: {
-  academicYear: number;
-  node: RequisiteGraphNode;
-  showStudentState: boolean;
-  statusByCode: ReadonlyMap<string, CourseStatus>;
-  style: { height: number; left: number; top: number; width: number };
-}) {
-  if (node.kind === "choice") {
-    return (
-      <p
-        style={style}
-        className="absolute flex items-center justify-center rounded-full border border-primary/30 bg-primary/5 px-3 text-center text-xs font-semibold text-primary"
-      >
-        {choiceLabel(node)}
-      </p>
-    );
-  }
-
-  if (node.kind === "requirement") {
-    const condition = requisiteConditionNode(node.condition);
-    const summary = conditionSummary(condition) || node.condition.sourceText;
-    return (
-      <div
-        style={style}
-        className="absolute flex items-center gap-2 rounded-lg border border-border bg-card px-3"
-      >
-        <span className="grid size-7 shrink-0 place-items-center rounded-md bg-primary/10 text-primary">
-          <GaugeCircle className="size-4" aria-hidden="true" />
-        </span>
-        {/* One line that leads with the figure: a category heading over a
-            detail line repeated itself and left "24 units" in the faintest
-            text on the node. */}
-        <span className="line-clamp-3 min-w-0 text-xs leading-snug font-medium">
-          {summary}
-        </span>
-      </div>
-    );
-  }
-
-  if (node.kind === "current") {
-    return (
-      <span
-        style={style}
-        aria-current="page"
-        className="absolute flex items-center justify-center gap-1.5 rounded-lg bg-primary px-3 font-mono text-[13px] font-semibold text-white shadow-sm"
-      >
-        {node.code}
-      </span>
-    );
-  }
-
-  const status = statusByCode.get(node.code) ?? null;
-  const body = (
-    <>
-      <span className="font-mono text-[13px] font-semibold">{node.code}</span>
-      {node.kind === "course" &&
-      node.condition?.kind === "course" &&
-      node.condition.requirementMode === "completed_or_concurrent" ? (
-        <span className="text-[10px] leading-tight text-muted-foreground">
-          Completed or taken at the same time
-        </span>
-      ) : null}
-      {showStudentState && node.isAvailable ? (
-        <CourseStatusBadge status={status} />
-      ) : null}
-    </>
-  );
-  const className = cn(
-    "absolute flex flex-col items-center justify-center gap-1 rounded-lg px-2 text-center transition-colors motion-reduce:transition-none",
-    !node.isAvailable
-      ? "border border-border bg-muted/40 text-muted-foreground"
-      : status === "completed"
-        ? "border border-success/30 bg-success/5 hover:bg-success/10"
-        : status
-          ? "border border-primary/30 bg-primary/5 hover:bg-primary/10"
-          : "border border-border bg-card hover:border-foreground/20 hover:bg-muted/40",
-  );
-
-  if (!node.isAvailable) {
-    return (
-      <Hint label={`${node.code}: course details unavailable`}>
-        <span style={style} className={className}>
-          <span className="flex items-center gap-1">
-            <LockKeyhole className="size-3" aria-hidden="true" />
-            <span className="font-mono text-[13px] font-semibold">
-              {node.code}
-            </span>
-          </span>
-          <span className="text-[10px] leading-tight">Not available</span>
-        </span>
-      </Hint>
-    );
-  }
-
-  return (
-    <Link
-      href={`/courses/${academicYear}/${node.code.toLowerCase()}`}
-      prefetch={false}
-      style={style}
-      className={cn(
-        className,
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
-      )}
-    >
-      {body}
-    </Link>
-  );
-}